refactor(web): shared createDragReorder primitive owning DOM drag plumbing #126

Merged

dominik.polakovics merged 1 commit from afk/124 into main

2026-07-19 09:56:22 +02:00

dominik.polakovics commented

2026-07-19 02:48:54 +02:00

Owner

Closes #124

What

The drop verdicts were already pure and unit-tested (classifyDrop, resolveDrop); the DOM event plumbing around them was hand-wired per pane. This PR extracts that skeleton into one shared Solid primitive and adopts it in the three genuine reorder sites, plus the two cleanups folded into the issue:

web/src/dragReorder.ts — createDragReorder<Drag, Spot> owns the drag + drop-spot signals, the dragover guard/preventDefault/dropEffect="move" invariant (spot and accept are independent, so PagePane's "forbidden" indicator still renders without accepting), keyed dragleave clearing with the real-browser child-crossing anti-flicker guard, and clear-then-act drop/dragend. Zone geometry and verdicts stay pane-side as callbacks. 12 unit tests.
PagePane — all four target kinds (rows, top-level/end gaps, empty cells, slot gaps) share one spot signal via per-kind owns predicates; read-only gating unchanged; the verdictFor/verdictFor2 duplication dies because the primitive hands the drag value to the drop action.
TreePane — three-position grammar unchanged; the auto-expand-on-hover timer (wired via onClear) and drop-time zone recompute stay pane-owned; mark dedupe preserved via sameSpot.
FormPane — repeatable-item reorder; the relatedTarget anti-flicker dragleave is absorbed by the primitive; the inline no-op guard and drop-time recompute survive.
web/src/dropzone.ts — the single midpoint/25-50-25/mode-degradation band-math implementation (was duplicated as rowDropZone in elementcrud and dropZone in pagemanage). Thresholds unchanged; the only reconciliations are the exact-75%-boundary tie-break (adopting pagemanage's pinned >=) and keeping the degenerate zero-height-rect boundary in the middle zone (which the jsdom wiring suites rely on) — both spelled out in a comment.
web/src/test/dragsim.ts — the one jsdom drag-simulation helper (incl. FakeDataTransfer + permittedDropEffects); the four per-file copies are deleted, all suites pass with unchanged assertions.

MediaModule and MediaPicker are deliberately not converted (whole-target folder move / upload sinks — not the reorder pattern).

Verification

Full web suite: 966/966 across 49 files, tsc --noEmit clean.
go vet ./... + go test ./... (hugo on PATH, web/dist built): all green.
Grep gates: no pane declares drag/spot signals; effectAllowed/dropEffect only in the primitive (+ out-of-scope MediaModule); band math only in dropzone.ts; one fireDrag.
Real-browser smoke test (playwright-core + nix Chromium against harness serve, content created through the UI): drag indicators appear and moves land in all three panes (tree: [alpha, beta] → [beta, alpha] confirmed via /api/tree; page elements [Text, Quote] → [Quote, Text] confirmed in the content file; card items [First, Second] → [Second, First]). Zero console errors.

The smoke test surfaced one pre-existing quirk (reproduced bit-for-bit on a main build, so not from this PR): PagePane drops landing in a row's before/after edge zone can silently no-op because the gap slots collapse when drag state clears and the drop-time zone recompute then reads the shifted rect. Gap-slot drops — the primary affordance — land correctly. Filed separately.

🤖 Generated with Claude Code

Closes #124 ## What The drop *verdicts* were already pure and unit-tested (`classifyDrop`, `resolveDrop`); the DOM event plumbing around them was hand-wired per pane. This PR extracts that skeleton into one shared Solid primitive and adopts it in the three genuine reorder sites, plus the two cleanups folded into the issue: - **`web/src/dragReorder.ts`** — `createDragReorder<Drag, Spot>` owns the drag + drop-spot signals, the dragover guard/`preventDefault`/`dropEffect="move"` invariant (spot and accept are independent, so PagePane's "forbidden" indicator still renders without accepting), keyed dragleave clearing with the real-browser child-crossing anti-flicker guard, and clear-then-act drop/dragend. Zone geometry and verdicts stay pane-side as callbacks. 12 unit tests. - **PagePane** — all four target kinds (rows, top-level/end gaps, empty cells, slot gaps) share one spot signal via per-kind `owns` predicates; read-only gating unchanged; the `verdictFor`/`verdictFor2` duplication dies because the primitive hands the drag value to the drop action. - **TreePane** — three-position grammar unchanged; the auto-expand-on-hover timer (wired via `onClear`) and drop-time zone recompute stay pane-owned; mark dedupe preserved via `sameSpot`. - **FormPane** — repeatable-item reorder; the `relatedTarget` anti-flicker dragleave is absorbed by the primitive; the inline no-op guard and drop-time recompute survive. - **`web/src/dropzone.ts`** — the single midpoint/25-50-25/mode-degradation band-math implementation (was duplicated as `rowDropZone` in elementcrud and `dropZone` in pagemanage). Thresholds unchanged; the only reconciliations are the exact-75%-boundary tie-break (adopting pagemanage's pinned `>=`) and keeping the degenerate zero-height-rect boundary in the middle zone (which the jsdom wiring suites rely on) — both spelled out in a comment. - **`web/src/test/dragsim.ts`** — the one jsdom drag-simulation helper (incl. `FakeDataTransfer` + `permittedDropEffects`); the four per-file copies are deleted, all suites pass with unchanged assertions. MediaModule and MediaPicker are deliberately not converted (whole-target folder move / upload sinks — not the reorder pattern). ## Verification - Full web suite: **966/966 across 49 files**, `tsc --noEmit` clean. - `go vet ./...` + `go test ./...` (hugo on PATH, `web/dist` built): all green. - Grep gates: no pane declares drag/spot signals; `effectAllowed`/`dropEffect` only in the primitive (+ out-of-scope MediaModule); band math only in `dropzone.ts`; one `fireDrag`. - **Real-browser smoke test** (playwright-core + nix Chromium against `harness serve`, content created through the UI): drag indicators appear and moves land in all three panes (tree: `[alpha, beta]` → `[beta, alpha]` confirmed via `/api/tree`; page elements `[Text, Quote]` → `[Quote, Text]` confirmed in the content file; card items `[First, Second]` → `[Second, First]`). Zero console errors. The smoke test surfaced one **pre-existing** quirk (reproduced bit-for-bit on a `main` build, so not from this PR): PagePane drops landing in a row's before/after edge zone can silently no-op because the gap slots collapse when drag state clears and the drop-time zone recompute then reads the shifted rect. Gap-slot drops — the primary affordance — land correctly. Filed separately. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

dominik.polakovics added 1 commit

2026-07-19 02:48:54 +02:00

refactor(web): extract shared createDragReorder drag-and-drop primitive

ci / build-and-test (pull_request) Successful in 6m2s

Details

8463293685

Issue #124: the drop verdicts were already pure and shared
(classifyDrop, resolveDrop), but every pane hand-wired the same DOM
skeleton around them. Now:

- createDragReorder (web/src/dragReorder.ts) owns the drag/drop-spot
  signals, the dragover guard/preventDefault/dropEffect invariant,
  keyed dragleave clearing (with the real-browser child-crossing
  anti-flicker guard), and clear-then-act drop/dragend — once,
  generic over the drag payload and spot types.
- PagePane (four target kinds sharing one spot signal), TreePane
  (auto-expand timer and drop-time recompute stay pane-owned), and
  FormPane adopt it; no pane declares its own drag signals or
  skeleton any more, and PagePane's duplicate verdict-recompute
  helper dies because the primitive hands the drag value to the
  drop action.
- The duplicated midpoint/25-50-25 zone band math (elementcrud's
  rowDropZone vs pagemanage's dropZone) is unified into
  web/src/dropzone.ts with thresholds unchanged.
- The four per-file jsdom drag-simulation helpers collapse into one
  web/src/test/dragsim.ts.

MediaModule/MediaPicker stay hand-wired by design (whole-target
moves and upload sinks, not reorder).

Closes #124

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

dominik.polakovics commented

2026-07-19 09:56:19 +02:00

Author

Owner

This was generated by AI while landing a PR.

Landing audit — #126

Verdict: CONCERNS (non-blocking), merged on maintainer go-ahead.

Verification signal relied on

ci / build-and-test — success (6m2s). Runs unconditionally on every pull_request; covers npm ci && npm run build && npm test, then go vet ./... && go test ./... && go build. Not re-run.
tsc --noEmit — run during this landing, exit 0. CI does not typecheck: npm test is bare vitest run, and vite build strips types without checking them. This was the one gate nothing vouched for, so it was closed here rather than assumed.

Mechanical checks

Conventional Commits title, Closes #124 present and well-formed, no conflicts against main.
All four acceptance-criteria grep gates verified independently: band math only in dropzone.ts; dropEffect/effectAllowed only in the primitive (plus out-of-scope MediaModule); exactly one fireDrag; no pane declares its own drag/spot signals.
preventDefault in drop handlers preserved one-for-one across all three panes.

Behavior deltas found (all accepted)

PagePane row zones: the 75% boundary flipped into → after. Old rowDropZone used strict >; the unified dropZone uses >=. For a container row at top=100, height=40, clientY=130 previously dropped inside the block and now drops after it. Disclosed in the PR body and pinned in a code comment. No test covered PagePane's boundary (old cases were 105/120/135), so the flip was silent.
TreePane zero-height rect, rel === 0 flipped after → into, via the new && rel > 0 guard. Unreachable in a real browser — for any non-zero-height rect rel === 0 resolves in the before branch. jsdom-only.
PagePane/TreePane dragleave now suppress child-crossing. Old PagePane handlers took no event and cleared unconditionally; routing them through reorder.leave extends FormPane's anti-flicker fix to them. An improvement — but the one delta not disclosed in the PR body.

Deltas 1 and 3 fall under issue #124's stated out-of-scope ("zone thresholds, indicator visuals"). Accepted as the unavoidable cost of unifying two implementations that genuinely disagreed at one boundary pixel: consolidation requires picking a winner, and the choice was documented rather than hidden.

Verified clean (no divergence)

verdictFor/verdictFor2 collapse (all six call sites; the old !from fallback was dead code) · read-only gating, handler-for-handler · all four owns predicates vs. the old clear* helpers · TreePane's auto-expand timer, cancelled in all four cases (dragLeave still cancels explicitly before the anti-flicker early-return) · TreePane sameSpot dedupe · FormPane relatedTarget handling incl. the null case · dropEffect/preventDefault accept-gating across all three panes.

Note

The PR body states the pre-existing PagePane edge-zone no-op quirk was "Filed separately" — no such issue exists on the tracker.

> *This was generated by AI while landing a PR.* ## Landing audit — #126 **Verdict: CONCERNS (non-blocking), merged on maintainer go-ahead.** ### Verification signal relied on - `ci / build-and-test` — **success** (6m2s). Runs unconditionally on every `pull_request`; covers `npm ci && npm run build && npm test`, then `go vet ./... && go test ./... && go build`. Not re-run. - **`tsc --noEmit` — run during this landing, exit 0.** CI does *not* typecheck: `npm test` is bare `vitest run`, and `vite build` strips types without checking them. This was the one gate nothing vouched for, so it was closed here rather than assumed. ### Mechanical checks - Conventional Commits title, `Closes #124` present and well-formed, no conflicts against `main`. - All four acceptance-criteria grep gates verified independently: band math only in `dropzone.ts`; `dropEffect`/`effectAllowed` only in the primitive (plus out-of-scope MediaModule); exactly one `fireDrag`; no pane declares its own drag/spot signals. - `preventDefault` in drop handlers preserved one-for-one across all three panes. ### Behavior deltas found (all accepted) 1. **PagePane row zones: the 75% boundary flipped `into` → `after`.** Old `rowDropZone` used strict `>`; the unified `dropZone` uses `>=`. For a container row at `top=100, height=40`, `clientY=130` previously dropped *inside* the block and now drops *after* it. Disclosed in the PR body and pinned in a code comment. No test covered PagePane's boundary (old cases were 105/120/135), so the flip was silent. 2. **TreePane zero-height rect, `rel === 0` flipped `after` → `into`**, via the new `&& rel > 0` guard. Unreachable in a real browser — for any non-zero-height rect `rel === 0` resolves in the `before` branch. jsdom-only. 3. **PagePane/TreePane dragleave now suppress child-crossing.** Old PagePane handlers took no event and cleared unconditionally; routing them through `reorder.leave` extends FormPane's anti-flicker fix to them. An improvement — but the one delta *not* disclosed in the PR body. Deltas 1 and 3 fall under issue #124's stated out-of-scope ("zone thresholds, indicator visuals"). Accepted as the unavoidable cost of unifying two implementations that genuinely disagreed at one boundary pixel: consolidation requires picking a winner, and the choice was documented rather than hidden. ### Verified clean (no divergence) `verdictFor`/`verdictFor2` collapse (all six call sites; the old `!from` fallback was dead code) · read-only gating, handler-for-handler · all four `owns` predicates vs. the old `clear*` helpers · TreePane's auto-expand timer, cancelled in all four cases (`dragLeave` still cancels explicitly *before* the anti-flicker early-return) · TreePane `sameSpot` dedupe · FormPane `relatedTarget` handling incl. the null case · `dropEffect`/`preventDefault` accept-gating across all three panes. ### Note The PR body states the pre-existing PagePane edge-zone no-op quirk was "Filed separately" — **no such issue exists** on the tracker.

dominik.polakovics merged commit ba7916ebff into main

2026-07-19 09:56:22 +02:00

dominik.polakovics referenced this pull request from a commit

2026-07-19 09:56:23 +02:00

Merge pull request 'refactor(web): shared createDragReorder primitive owning DOM drag plumbing' (#126) from afk/124 into main

dominik.polakovics referenced this pull request

2026-07-19 09:58:10 +02:00

PagePane: drops in a row edge zone silently no-op (gap slots collapse before the drop-time recompute) #127