@gjermundgaraba-designs/pixel-paper 0.22.1 → 0.23.0

package/dist/src/reel/reel.js

@@ -1,5 +1,5 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-import { Array, Effect, Equal, Match, Number, Option, Order, Schema, Stream, String } from "effect";
+import { Array, Effect, Equal, Match, Number, Option, Order, Queue, Schema, Stream, String, } from "effect";
 import * as Command from "foldkit/command";
 import { defineMessageUnion } from "foldkit/message";
 import * as Mount from "foldkit/mount";
@@ -15,21 +15,23 @@ import * as Glyph from "../glyph/glyph.js";
 import * as IconButton from "../iconButton/iconButton.js";
 import { isPlain } from "../keys/keys.js";
 import { prefixKeys } from "../subscription/prefixKeys.js";
-import { OutMessage, Resize, Splitter, Step, Subject, Target, WHERE_IT_WAS, apply, columnOfTarget, fill, firstPlace, isSplitterPresent, isTargetPresent, landingWords, nextPreset, originOf, placeAt, placeOf, placeWords, requestOf, resizeOf, steppedTarget, subjectWords, targetAtPoint, whereWords, widthWords, } from "./layout.js";
+import { OutMessage, Resize, Splitter, Step, Subject, Target, WHERE_IT_WAS, apply, columnOfTarget, fill, firstPlace, isChange, isSplitterPresent, isTargetPresent, landingWords, nextPreset, originOf, placeAt, placeOf, placeWords, requestOf, resizeOf, steppedTarget, subjectWords, targetAtPoint, whereWords, widthWords, } from "./layout.js";
 // MODEL
+/** How the keyboard carries what it holds: said on the grip and once it is picked up. */
+const KEYBOARD_MOVES = "Arrow keys move it, space drops it, escape or tab puts it back.";
 /** The words a reel says. `{pane}` is a pane's label, `{subject}` what moves (the held pane,
  *  or a column a key moves, by its first pane), `{where}` a place and `{column}` a column's
  *  number. */
 const COPY = {
     paneGrip: "Move {pane}",
-    gripHelp: "Press space to pick it up. Arrow keys move it, space drops it, escape or tab puts it back.",
+    gripHelp: `Press space to pick it up. ${KEYBOARD_MOVES}`,
     widthLabel: "Width of column {column}",
     heightLabel: "Height of {pane}",
     focused: "{pane}, {where}.",
     moved: "{subject} moved to {where}.",
     widened: "Column {column} takes {width}.",
     pickedUp: "Picked up {subject}.",
-    pickedUpByKeyboard: "Picked up {subject}. Arrow keys move it, space drops it, escape or tab puts it back.",
+    pickedUpByKeyboard: `Picked up {subject}. ${KEYBOARD_MOVES}`,
     over: "{subject}, {where}.",
     dropped: "{subject} dropped at {where}.",
     putBack: "{subject} put back where it was.",
@@ -132,6 +134,8 @@ const focusedPlace = (model, layout) => __foldkitBrandViewResult((Option.orElse(
  *  now nearest its place; the first pane before any is focused. None for an empty layout. */
 export const focusedPaneId = (model, layout) => __foldkitBrandViewResult((Option.map(focusedPlace(model, layout), ({ pane }) => __foldkitBrandViewResult((pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~4"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#focusedPaneId");
 const isHolding = (model) => __foldkitBrandViewResult((Option.isSome(model.maybeHeld)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#isHolding");
+/** Whether nothing is held and no splitter is dragged: a grip or a splitter may be pressed. */
+const isIdle = (model) => __foldkitBrandViewResult((!isHolding(model) && Option.isNone(model.maybeResizing)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#isIdle");
 /** Whether `held` is carried: by the keyboard, or by a pointer past the threshold. */
 const isCarried = (held) => __foldkitBrandViewResult((By.match(held.by, { Pointer: ({ isCarrying }) => __foldkitBrandViewResult((isCarrying), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pointer"), Keyboard: () => __foldkitBrandViewResult((true), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Keyboard") })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#isCarried");
 // DOM HOOKS
@@ -206,7 +210,8 @@ const focusOn = (model, place) => __foldkitBrandViewResult((modifyFields(model,
     maybeFocus: () => __foldkitBrandViewResult((Option.some({ paneId: place.pane.id, column: place.columnIndex, row: place.row })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#maybeFocus"),
 })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#focusOn");
 const announce = (text) => __foldkitBrandViewResult((AnnounceReel({ text })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#announce");
-const heldWords = (layout, held) => __foldkitBrandViewResult((String.capitalize(Option.getOrElse(subjectWords(layout, Subject.Pane({ paneId: held.paneId })), () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~13")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#heldWords");
+const heldLabel = (layout, held) => __foldkitBrandViewResult((Option.getOrElse(subjectWords(layout, Subject.Pane({ paneId: held.paneId })), () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~13"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#heldLabel");
+const heldWords = (layout, held) => __foldkitBrandViewResult((String.capitalize(heldLabel(layout, held))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#heldWords");
 const scrollToTarget = (model, layout, target) => __foldkitBrandViewResult((Array.fromOption(Option.map(columnOfTarget(layout, target), (columnId) => __foldkitBrandViewResult((ScrollIntoView({ hook: columnHook(model, columnId) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~14")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#scrollToTarget");
 /** Lets go of the held pane: dropped at its target when it is carried and the drop changes
  *  something (reported as the request), put back otherwise, said in `putBack`'s words. */
@@ -235,7 +240,7 @@ const letGo = (model, layout, held, putBack) => {
     })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#letGo");
 };
 const cancel = (model, layout, held) => __foldkitBrandViewResult((letGo(model, layout, { ...held, maybeTarget: Option.none() }, COPY.cancelled)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#cancel");
-const lift = (model, layout, paneId, by) => __foldkitBrandViewResult((Option.match(Option.filter(originOf(layout, paneId), () => __foldkitBrandViewResult((!isHolding(model) && Option.isNone(model.maybeResizing)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~17")), {
+const lift = (model, layout, paneId, by) => __foldkitBrandViewResult((Option.match(Option.filter(originOf(layout, paneId), () => __foldkitBrandViewResult((isIdle(model)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~17")), {
     onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~3")),
     onSome: (origin) => {
         const held = { paneId, by, maybeTarget: Option.some(origin) };
@@ -330,7 +335,7 @@ export const update = (model, message, context) => {
             onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~8")),
             onSome: (place) => (__foldkitBrandViewResult(({ model: focusOn(model, place) }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~7")),
         })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#FocusedPane"),
-        PressedSplitter: ({ splitter, pointerId, clientX, clientY }) => __foldkitBrandViewResult((isHolding(model) || Option.isSome(model.maybeResizing) || !isSplitterPresent(layout, splitter)
+        PressedSplitter: ({ splitter, pointerId, clientX, clientY }) => __foldkitBrandViewResult((!isIdle(model) || !isSplitterPresent(layout, splitter)
             ? { model }
             : {
                 model: withResizing(model, Option.some({
@@ -422,7 +427,7 @@ const focusStep = (model, layout, place) => (__foldkitBrandViewResult(({
 }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#focusStep"));
 /** Asks for `request` with focus kept on the pane it moves, at its new place, the reel
  *  scrolled to it and the move said; nothing where it would change nothing. */
-const requestStep = (model, layout, place, subject, maybeRequest) => __foldkitBrandViewResult((Option.match(Option.filter(maybeRequest, (request) => __foldkitBrandViewResult((!Equal.equals(apply(layout, request), layout)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~36")), {
+const requestStep = (model, layout, place, subject, maybeRequest) => __foldkitBrandViewResult((Option.match(Option.filter(maybeRequest, (request) => __foldkitBrandViewResult((isChange(layout, request)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~36")), {
     onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~12")),
     onSome: (request) => {
         const next = apply(layout, request);
@@ -492,29 +497,36 @@ export const perform = (model, action, context) => {
 const EDGE_SCROLL = 40;
 const EDGE_SCROLL_PIXELS_PER_MILLI = 0.8;
 const LONGEST_FRAME_MILLIS = 50;
-/** A column as the pointer reads it from the page: its edges, and the middles of its slots
- *  but the held pane's. */
-const columnBoxOf = (element, heldId) => {
+/** A column as the pointer reads it from the page: its edges. */
+const columnBoxOf = (element) => {
     const rect = element.getBoundingClientRect();
     return __foldkitBrandViewResult(({
         id: element.getAttribute("data-reel-column") ?? "",
         left: rect.left,
         right: rect.right,
-        slotMiddles: Array.map(Array.filter(Array.fromIterable(element.querySelectorAll("[data-reel-slot]")), (slot) => __foldkitBrandViewResult((slot.getAttribute("data-reel-slot") !== heldId), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~60")), (slot) => {
-            const slotRect = slot.getBoundingClientRect();
-            return __foldkitBrandViewResult((slotRect.top + slotRect.height / 2), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~61");
-        }),
     }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#columnBoxOf");
 };
+/** The middles of a column's slots but the held pane's. */
+const slotMiddlesOf = (element, heldId) => __foldkitBrandViewResult((Array.map(Array.filter(Array.fromIterable(element.querySelectorAll("[data-reel-slot]")), (slot) => __foldkitBrandViewResult((slot.getAttribute("data-reel-slot") !== heldId), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~60")), (slot) => {
+    const slotRect = slot.getBoundingClientRect();
+    return __foldkitBrandViewResult((slotRect.top + slotRect.height / 2), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~61");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#slotMiddlesOf");
 /** Where a pointer at (`clientX`, `clientY`) would drop the pane `paneId` in the reel
- *  `reelHook` names, read from where its columns and their slots sit: none outside the reel. */
+ *  `reelHook` names, read from where its columns sit and the slots of the one it is over: none
+ *  outside the reel. */
 const pointerTarget = (reelHook, paneId, clientX, clientY) => __foldkitBrandViewResult((Option.map(Option.filter(scrollerOf(reelHook), (view) => {
     const rect = view.getBoundingClientRect();
     return (__foldkitBrandViewResult((clientX >= rect.left &&
         clientX <= rect.right &&
         clientY >= rect.top &&
         clientY <= rect.bottom), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~62"));
-}), (view) => __foldkitBrandViewResult((targetAtPoint(Array.map(Array.fromIterable(view.querySelectorAll("[data-reel-column]")), (element) => __foldkitBrandViewResult((columnBoxOf(element, paneId)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~64")), clientX, clientY)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~63"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerTarget");
+}), (view) => {
+    const columns = Array.fromIterable(view.querySelectorAll("[data-reel-column]"));
+    return __foldkitBrandViewResult((targetAtPoint(Array.map(columns, columnBoxOf), clientX, clientY, (index) => __foldkitBrandViewResult((Option.match(Array.get(columns, index), {
+        onNone: () => __foldkitBrandViewResult(([]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~16"),
+        onSome: (column) => __foldkitBrandViewResult((slotMiddlesOf(column, paneId)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~15"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~64"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~63");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerTarget");
 const PointerHold = Schema.Struct({
     reelHook: Schema.String,
     paneId: Schema.String,
@@ -525,12 +537,51 @@ const pointerAt = (hold, event) => (__foldkitBrandViewResult(({
     clientY: event.clientY,
     maybeTarget: pointerTarget(hold.reelHook, hold.paneId, event.clientX, event.clientY),
 }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerAt"));
-/** The pressing pointer's moves, release and cancel; another pointer's are not the reel's. */
-const pointerMessages = (hold) => __foldkitBrandViewResult((dragMessages(hold.pointerId, {
-    moved: (event) => __foldkitBrandViewResult((Message.MovedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#moved"),
-    released: (event) => __foldkitBrandViewResult((Message.ReleasedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#released"),
-    cancelled: () => __foldkitBrandViewResult((Message.CancelledPointer()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#cancelled"),
-})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerMessages");
+/** The pressing pointer's moves, release and cancel; another pointer's are not the reel's. A
+ *  pointer reports moves faster than the page draws, and each reads the reel's layout, so its
+ *  moves are read once a frame, at the latest; a release first reads the move not read yet,
+ *  so the pane is carried as far as the pointer went, and a cancel drops it. */
+const pointerMessages = (hold) => __foldkitBrandViewResult((Stream.callback((queue) => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => {
+    const state = { maybeMove: Option.none(), frame: 0 };
+    const offer = (message) => {
+        Queue.offerUnsafe(queue, message);
+    };
+    const readMove = () => {
+        cancelAnimationFrame(state.frame);
+        Option.map(state.maybeMove, (event) => __foldkitBrandViewResult((offer(Message.MovedPointer(pointerAt(hold, event)))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~67"));
+        state.maybeMove = Option.none();
+    };
+    const onMove = (event) => {
+        if (event.pointerId === hold.pointerId) {
+            if (Option.isNone(state.maybeMove)) {
+                state.frame = requestAnimationFrame(readMove);
+            }
+            state.maybeMove = Option.some(event);
+        }
+    };
+    const onUp = (event) => {
+        if (event.pointerId === hold.pointerId) {
+            readMove();
+            offer(Message.ReleasedPointer(pointerAt(hold, event)));
+        }
+    };
+    const onCancel = (event) => {
+        if (event.pointerId === hold.pointerId) {
+            cancelAnimationFrame(state.frame);
+            state.maybeMove = Option.none();
+            offer(Message.CancelledPointer());
+        }
+    };
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onUp);
+    document.addEventListener("pointercancel", onCancel);
+    return __foldkitBrandViewResult(({ state, onMove, onUp, onCancel }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~66");
+}), ({ state, onMove, onUp, onCancel }) => __foldkitBrandViewResult((Effect.sync(() => {
+    cancelAnimationFrame(state.frame);
+    document.removeEventListener("pointermove", onMove);
+    document.removeEventListener("pointerup", onUp);
+    document.removeEventListener("pointercancel", onCancel);
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~68"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~65"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerMessages");
 /** Which way a pointer at `at` scrolls a box from `low` to `high`: towards the edge it is near. */
 const towards = (at, low, high) => {
     if (at < low + EDGE_SCROLL) {
@@ -568,11 +619,11 @@ const edgeScroll = (hold) => __foldkitBrandViewResult((Stream.callback(() => __f
     };
     document.addEventListener("pointermove", onMove);
     state.frame = requestAnimationFrame(step);
-    return __foldkitBrandViewResult(({ state, onMove }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~66");
+    return __foldkitBrandViewResult(({ state, onMove }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~71");
 }), ({ state, onMove }) => __foldkitBrandViewResult((Effect.sync(() => {
     cancelAnimationFrame(state.frame);
     document.removeEventListener("pointermove", onMove);
-})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~68")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~70")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~65"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#edgeScroll");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~73")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~75")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~70"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#edgeScroll");
 const SplitterHold = Schema.Struct({
     reelHook: Schema.String,
     splitter: Splitter,
@@ -586,12 +637,12 @@ const heightOf = (element) => __foldkitBrandViewResult((element.getBoundingClien
  *  column's panes' height for a pane splitter. */
 const scaleOf = (hold) => __foldkitBrandViewResult((Option.getOrElse(Option.map(scrollerOf(hold.reelHook), (view) => __foldkitBrandViewResult((Splitter.match(hold.splitter, {
     Width: () => __foldkitBrandViewResult((view.clientWidth -
-        Option.getOrElse(Option.map(Option.fromNullishOr(view.querySelector(".reel-gap")), (gap) => __foldkitBrandViewResult((gap.getBoundingClientRect().width), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~72")), () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~73"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Width"),
+        Option.getOrElse(Option.map(Option.fromNullishOr(view.querySelector(".reel-gap")), (gap) => __foldkitBrandViewResult((gap.getBoundingClientRect().width), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~77")), () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~78"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Width"),
     Split: ({ abovePaneId }) => __foldkitBrandViewResult((Number.sumAll(Array.map(Array.fromIterable(view
         .querySelector(`[data-reel-slot="${CSS.escape(abovePaneId)}"]`)
         ?.closest(".reel-column")
         ?.querySelectorAll("[data-reel-slot]") ?? []), heightOf))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Split"),
-})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~71")), () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~74"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#scaleOf");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~76")), () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~79"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#scaleOf");
 /** The dragging pointer's moves, release and cancel, as shares of the splitter's scale. */
 const splitterMessages = (hold) => __foldkitBrandViewResult((Stream.suspend(() => {
     const scale = scaleOf(hold);
@@ -600,28 +651,28 @@ const splitterMessages = (hold) => __foldkitBrandViewResult((Stream.suspend(() =
         return __foldkitBrandViewResult((scale > 0 ? moved / scale : 0), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#shareOf");
     };
     return __foldkitBrandViewResult((dragMessages(hold.pointerId, {
-        moved: (event) => __foldkitBrandViewResult((Message.MovedSplitter({ share: shareOf(event) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#moved~2"),
-        released: (event) => __foldkitBrandViewResult((Message.ReleasedSplitter({ share: shareOf(event) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#released~2"),
-        cancelled: () => __foldkitBrandViewResult((Message.CancelledSplitter()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#cancelled~2"),
-    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~75");
+        moved: (event) => __foldkitBrandViewResult((Message.MovedSplitter({ share: shareOf(event) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#moved"),
+        released: (event) => __foldkitBrandViewResult((Message.ReleasedSplitter({ share: shareOf(event) })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#released"),
+        cancelled: () => __foldkitBrandViewResult((Message.CancelledSplitter()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#cancelled"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~80");
 })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#splitterMessages");
 const pointerHoldOf = (model, isCarryingOnly) => __foldkitBrandViewResult((Option.flatMap(model.maybeHeld, ({ paneId, by }) => __foldkitBrandViewResult((By.match(by, {
     Keyboard: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Keyboard~3"),
     Pointer: ({ pointerId, isCarrying }) => __foldkitBrandViewResult((isCarryingOnly && !isCarrying
         ? Option.none()
         : Option.some({ reelHook: model.id, paneId, pointerId })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pointer~3"),
-})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~76"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerHoldOf");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~81"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#pointerHoldOf");
 const reelSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResult(({
     pointer: entry({ maybeHold: Schema.Option(PointerHold) }, {
         modelToDependencies: (model) => (__foldkitBrandViewResult(({ maybeHold: pointerHoldOf(model, false) }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#modelToDependencies")),
         dependenciesToStream: ({ maybeHold }) => __foldkitBrandViewResult((Option.match(maybeHold, {
-            onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~16"),
-            onSome: (hold) => __foldkitBrandViewResult((Stream.merge(pointerMessages(hold), markDragging)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~15"),
+            onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~17"),
+            onSome: (hold) => __foldkitBrandViewResult((Stream.merge(pointerMessages(hold), markDragging)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~16"),
         })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dependenciesToStream"),
     }),
     edge: entry({ maybeHold: Schema.Option(PointerHold) }, {
         modelToDependencies: (model) => (__foldkitBrandViewResult(({ maybeHold: pointerHoldOf(model, true) }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#modelToDependencies~2")),
-        dependenciesToStream: ({ maybeHold }) => __foldkitBrandViewResult((Option.match(maybeHold, { onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~17"), onSome: edgeScroll })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dependenciesToStream~2"),
+        dependenciesToStream: ({ maybeHold }) => __foldkitBrandViewResult((Option.match(maybeHold, { onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~18"), onSome: edgeScroll })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dependenciesToStream~2"),
     }),
     resize: entry({ maybeHold: Schema.Option(SplitterHold) }, {
         modelToDependencies: (model) => (__foldkitBrandViewResult(({
@@ -631,20 +682,20 @@ const reelSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResu
                 pointerId,
                 pressX,
                 pressY,
-            }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~78"))),
+            }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~83"))),
         }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#modelToDependencies~3")),
         dependenciesToStream: ({ maybeHold }) => __foldkitBrandViewResult((Option.match(maybeHold, {
-            onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~18"),
-            onSome: (hold) => __foldkitBrandViewResult((Stream.merge(splitterMessages(hold), markDragging)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~16"),
+            onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~19"),
+            onSome: (hold) => __foldkitBrandViewResult((Stream.merge(splitterMessages(hold), markDragging)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~17"),
         })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dependenciesToStream~3"),
     }),
     escape: entry({ isHolding: Schema.Boolean }, {
         modelToDependencies: (model) => (__foldkitBrandViewResult(({
-            isHolding: isHolding(model) || Option.isSome(model.maybeResizing),
+            isHolding: !isIdle(model),
         }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#modelToDependencies~4")),
         dependenciesToStream: ({ isHolding: isHoldingNow }) => __foldkitBrandViewResult((isHoldingNow ? escapeKeys(Message.PressedEscape()) : Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dependenciesToStream~4"),
     }),
-}), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~77")));
+}), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~82")));
 /** A held pane follows the pointer (the reel scrolling near its edges), a dragged
  *  splitter resizes, and Escape puts either back, before a dialog or the page sees it, from
  *  listeners that run only while something is held. Lift them into the application's
@@ -659,7 +710,7 @@ export const SizeLiftedPane = Mount.define("SizeLiftedPane", {
     messages: [Message.CompletedSizeLiftedPane],
     execute: ({ element, sourceSelector, pressX, pressY }) => __foldkitBrandViewResult((Effect.sync(() => {
         measureLift(element, sourceSelector, pressX, pressY);
-        return __foldkitBrandViewResult((Message.CompletedSizeLiftedPane()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~79");
+        return __foldkitBrandViewResult((Message.CompletedSizeLiftedPane()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~84");
     })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#execute~5"),
 });
 const helpId = (model) => __foldkitBrandViewResult((`${model.id}-grip-help`), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#helpId");
@@ -676,31 +727,30 @@ const isDropKey = (key) => __foldkitBrandViewResult((key === " " || key === "Ent
  *  the pane's place in the id order, which the slot and the pane read from one list. */
 const anchorName = (index) => __foldkitBrandViewResult((`--reel-${index}`), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anchorName");
 /** The panes in their layer's order: by id, which no move changes. */
-const byId = Order.mapInput(Order.String, (pane) => __foldkitBrandViewResult((pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~80"));
+const byId = Order.mapInput(Order.String, (pane) => __foldkitBrandViewResult((pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~85"));
 /** Where a carried drop would land, marked: none where it would change nothing. */
-const markOf = (model, layout) => __foldkitBrandViewResult((Option.flatMap(Option.filter(model.maybeHeld, isCarried), (held) => __foldkitBrandViewResult((Option.filter(held.maybeTarget, (target) => __foldkitBrandViewResult((Option.isSome(requestOf(layout, held.paneId, target))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~82"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~81"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#markOf");
-const carriedIdOf = (model) => __foldkitBrandViewResult((Option.map(Option.filter(model.maybeHeld, isCarried), ({ paneId }) => __foldkitBrandViewResult((paneId), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~83"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#carriedIdOf");
+const markOf = (model, layout) => __foldkitBrandViewResult((Option.flatMap(Option.filter(model.maybeHeld, isCarried), (held) => __foldkitBrandViewResult((Option.filter(held.maybeTarget, (target) => __foldkitBrandViewResult((Option.isSome(requestOf(layout, held.paneId, target))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~87"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~86"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#markOf");
+const carriedIdOf = (model) => __foldkitBrandViewResult((Option.map(Option.filter(model.maybeHeld, isCarried), ({ paneId }) => __foldkitBrandViewResult((paneId), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~88"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#carriedIdOf");
 const gripView = (model, pane, h) => {
-    const isIdleNow = !isHolding(model) && Option.isNone(model.maybeResizing);
-    const maybeHeldHere = Option.filter(model.maybeHeld, (held) => __foldkitBrandViewResult((held.paneId === pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~84"));
+    const maybeHeldHere = Option.filter(model.maybeHeld, (held) => __foldkitBrandViewResult((held.paneId === pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~89"));
     const isHeld = Option.exists(maybeHeldHere, isCarried);
-    const isKeyboardHeld = Option.exists(maybeHeldHere, (held) => __foldkitBrandViewResult((held.by._tag === "Keyboard"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~85"));
+    const isKeyboardHeld = Option.exists(maybeHeldHere, (held) => __foldkitBrandViewResult((held.by._tag === "Keyboard"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~90"));
     // the keyboard holds an item on its grip: the keys are the grip's own, and focus leaving the
     // grip puts the item back, so a field reached by Tab types as it should
     const onGripKey = h.OnKeyDownPreventDefault((key, modifiers) => {
         if (!isPlain(modifiers)) {
-            return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~86");
+            return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~91");
         }
         else if (isKeyboardHeld) {
             return __foldkitBrandViewResult((isDropKey(key)
                 ? Option.some(Message.DroppedHeld())
-                : Option.map(Option.fromNullishOr(HELD_STEPS[key]), (step) => __foldkitBrandViewResult((Message.SteppedHeld({ step })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~87"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~86");
+                : Option.map(Option.fromNullishOr(HELD_STEPS[key]), (step) => __foldkitBrandViewResult((Message.SteppedHeld({ step })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~92"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~91");
         }
         else {
-            return __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGripKey({ paneId: pane.id }), () => __foldkitBrandViewResult((isIdleNow && isDropKey(key)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~88"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~86");
+            return __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGripKey({ paneId: pane.id }), () => __foldkitBrandViewResult((isIdle(model) && isDropKey(key)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~93"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~91");
         }
     });
-    const onGripPress = h.OnPointerDown((_pointerType, button, _screenX, _screenY, _time, clientX, clientY, pointerId) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGrip({ paneId: pane.id, pointerId, clientX, clientY }), () => __foldkitBrandViewResult((isIdleNow && button === LEFT_BUTTON), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~90"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~89"));
+    const onGripPress = h.OnPointerDown((_pointerType, button, _screenX, _screenY, _time, clientX, clientY, pointerId) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGrip({ paneId: pane.id, pointerId, clientX, clientY }), () => __foldkitBrandViewResult((isIdle(model) && button === LEFT_BUTTON), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~95"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~94"));
     return __foldkitBrandViewResult((IconButton.view({
         glyph: "grip",
         label: fill(COPY.paneGrip, { pane: pane.label }),
@@ -719,20 +769,25 @@ const gripView = (model, pane, h) => {
 /** A splitter's handlers: a pointer drags it, and its arrows step it by `SPLITTER_STEP`. */
 const reelSplitterAttributes = (model, splitter, h) => __foldkitBrandViewResult((splitterAttributes({
     orientation: splitter._tag === "Width" ? "vertical" : "horizontal",
-    isIdle: !isHolding(model) && Option.isNone(model.maybeResizing),
+    isIdle: isIdle(model),
     onPress: (pointerId, clientX, clientY) => __foldkitBrandViewResult((Message.PressedSplitter({ splitter, pointerId, clientX, clientY })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onPress"),
     onStep: (direction) => __foldkitBrandViewResult((Message.PressedSplitterKey({ splitter, share: direction * SPLITTER_STEP })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onStep"),
 }, h)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#reelSplitterAttributes");
-const dropClass = (info, column, paneId) => __foldkitBrandViewResult((Option.match(Option.flatMap(info.maybeMark, (mark) => {
+/** The pane a drop into `column` is marked on, and the class that marks it: the pane it would
+ *  land before, or the last one when it would land at the end, the carried pane left out. */
+const dropMarkOf = (info, column) => __foldkitBrandViewResult((Option.flatMap(info.maybeMark, (mark) => {
     if (mark._tag !== "Into" || mark.columnId !== column.id) {
-        return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~91");
+        return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~96");
     }
-    const others = Array.filter(column.panes, (pane) => __foldkitBrandViewResult((!Option.contains(info.maybeCarriedId, pane.id)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~92"));
-    return __foldkitBrandViewResult((Option.orElse(Option.map(Option.filter(Array.get(others, mark.index), (pane) => __foldkitBrandViewResult((pane.id === paneId), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~93")), () => __foldkitBrandViewResult((" drop-before"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~94")), () => __foldkitBrandViewResult((Option.map(Option.filter(Array.last(others), (pane) => __foldkitBrandViewResult((mark.index >= others.length && pane.id === paneId), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~96")), () => __foldkitBrandViewResult((" drop-after"), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~97"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~95"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~91");
-}), { onNone: () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~19"), onSome: (mark) => __foldkitBrandViewResult((mark), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~17") })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dropClass");
-const isGapMarked = (info, maybeBeforeColumnId) => __foldkitBrandViewResult((Option.exists(info.maybeMark, (mark) => __foldkitBrandViewResult((mark._tag === "Gap" && Equal.equals(mark.maybeBeforeColumnId, maybeBeforeColumnId)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~98"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#isGapMarked");
-const slotView = (info, anchors, column, pane, h) => __foldkitBrandViewResult((h.keyed("div")(pane.id, [
-    h.Class(`reel-slot${dropClass(info, column, pane.id)}`),
+    const others = Array.filter(column.panes, (pane) => __foldkitBrandViewResult((!Option.contains(info.maybeCarriedId, pane.id)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~97"));
+    return __foldkitBrandViewResult((Option.orElse(Option.map(Array.get(others, mark.index), ({ id }) => (__foldkitBrandViewResult(({
+        paneId: id,
+        markClass: " drop-before",
+    }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~98"))), () => __foldkitBrandViewResult((Option.map(Option.filter(Array.last(others), () => __foldkitBrandViewResult((mark.index >= others.length), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~100")), ({ id }) => (__foldkitBrandViewResult(({ paneId: id, markClass: " drop-after" }), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~101")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~99"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~96");
+})), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#dropMarkOf");
+const isGapMarked = (info, maybeBeforeColumnId) => __foldkitBrandViewResult((Option.exists(info.maybeMark, (mark) => __foldkitBrandViewResult((mark._tag === "Gap" && Equal.equals(mark.maybeBeforeColumnId, maybeBeforeColumnId)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~102"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#isGapMarked");
+const slotView = (anchors, maybeDropMark, pane, h) => __foldkitBrandViewResult((h.keyed("div")(pane.id, [
+    h.Class(`reel-slot${Option.match(Option.filter(maybeDropMark, ({ paneId }) => __foldkitBrandViewResult((paneId === pane.id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~103")), { onNone: () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~20"), onSome: ({ markClass }) => __foldkitBrandViewResult((markClass), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~18") })}`),
     h.DataAttribute("reel-slot", pane.id),
     h.Style({ "--reel-weight": `${pane.weight}`, "--reel-anchor": anchors.get(pane.id) ?? "none" }),
 ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#slotView");
@@ -749,12 +804,13 @@ const splitView = (model, above, share, h) => __foldkitBrandViewResult((h.keyed(
 ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#splitView");
 const columnView = (info, anchors, column, index, h) => {
     const { model, layout } = info;
-    const total = Number.sumAll(Array.map(column.panes, (pane) => __foldkitBrandViewResult((pane.weight), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~99")));
+    const total = Number.sumAll(Array.map(column.panes, (pane) => __foldkitBrandViewResult((pane.weight), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~104")));
+    const maybeDropMark = dropMarkOf(info, column);
     const stack = Array.flatMap(column.panes, (pane, row) => __foldkitBrandViewResult(([
-        ...Array.fromOption(Option.map(Array.get(column.panes, row - 1), (above) => __foldkitBrandViewResult((splitView(model, above, total > 0 ? above.weight / total : 0, h)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~101"))),
-        slotView(info, anchors, column, pane, h),
-    ]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~100"));
-    const maybeNextId = Option.map(Array.get(layout, index + 1), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~102"));
+        ...Array.fromOption(Option.map(Array.get(column.panes, row - 1), (above) => __foldkitBrandViewResult((splitView(model, above, total > 0 ? above.weight / total : 0, h)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~106"))),
+        slotView(anchors, maybeDropMark, pane, h),
+    ]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~105"));
+    const maybeNextId = Option.map(Array.get(layout, index + 1), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~107"));
     return __foldkitBrandViewResult(([
         h.keyed("div")(`column:${column.id}`, [
             h.Class("reel-column"),
@@ -795,7 +851,7 @@ const paneLayerView = (info, panes, anchors, h) => {
                 grip: gripView(model, pane, h),
                 id: `${model.id}-${pane.id}`,
             }),
-        ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~103");
+        ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~108");
     }))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#paneLayerView");
 };
 /** The copy a pointer carries: the held pane's title bar, drawn by the reel from its label,
@@ -818,14 +874,14 @@ const liftedCopyView = (info, h) => {
             h.div([h.Class("panel window")], [
                 h.div([h.Class("panel-tb")], [
                     h.span([h.Class("panel-lead")], [h.span([h.Class("iconbtn quiet")], [Glyph.view({ name: "grip" }, h)])]),
-                    h.h2([], [heldWords(layout, held)]),
+                    h.h2([], [heldLabel(layout, held)]),
                 ]),
             ]),
-        ]), () => __foldkitBrandViewResult((isCarrying), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~105"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pointer~4"),
-    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~104")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#liftedCopyView");
+        ]), () => __foldkitBrandViewResult((isCarrying), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~110"))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#Pointer~4"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~109")))), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#liftedCopyView");
 };
 /** The layout as it prints, with a dragged splitter's resize shown before it is asked for. */
-const previewed = (model, layout) => __foldkitBrandViewResult((Option.match(Option.flatMap(model.maybeResizing, ({ maybeResize }) => __foldkitBrandViewResult((maybeResize), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~106")), { onNone: () => __foldkitBrandViewResult((layout), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~20"), onSome: (resize) => __foldkitBrandViewResult((apply(layout, resize)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~18") })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#previewed");
+const previewed = (model, layout) => __foldkitBrandViewResult((Option.match(Option.flatMap(model.maybeResizing, ({ maybeResize }) => __foldkitBrandViewResult((maybeResize), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~111")), { onNone: () => __foldkitBrandViewResult((layout), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onNone~21"), onSome: (resize) => __foldkitBrandViewResult((apply(layout, resize)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#onSome~19") })), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#previewed");
 /**
  * A row of columns wider than the view when it must be, each a stack of panes, scrolled
  * sideways, and down where a column is taller than the view: `div.reel` holding the scroller
@@ -843,8 +899,8 @@ const previewed = (model, layout) => __foldkitBrandViewResult((Option.match(Opti
 export const view = defineView((model, viewInputs, h) => {
     const { label, toPaneView } = viewInputs;
     const layout = previewed(model, viewInputs.layout);
-    const panes = Array.sort(Array.flatMap(layout, (column) => __foldkitBrandViewResult((column.panes), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~108")), byId);
-    const anchors = new Map(Array.map(panes, (pane, index) => __foldkitBrandViewResult(([pane.id, anchorName(index)]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~109")));
+    const panes = Array.sort(Array.flatMap(layout, (column) => __foldkitBrandViewResult((column.panes), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~113")), byId);
+    const anchors = new Map(Array.map(panes, (pane, index) => __foldkitBrandViewResult(([pane.id, anchorName(index)]), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~114")));
     const info = {
         model,
         layout,
@@ -857,15 +913,15 @@ export const view = defineView((model, viewInputs, h) => {
         h.div([h.Class("reel-view")], [
             h.div([h.Class("reel-track")], [
                 h.keyed("div")("gap:start", [
-                    h.Class(`reel-gap${isGapMarked(info, Option.map(Array.head(layout), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~110")))
+                    h.Class(`reel-gap${isGapMarked(info, Option.map(Array.head(layout), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~115")))
                         ? " drop-here"
                         : ""}`),
                 ]),
-                ...Array.flatMap(layout, (column, index) => __foldkitBrandViewResult((columnView(info, anchors, column, index, h)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~111")),
+                ...Array.flatMap(layout, (column, index) => __foldkitBrandViewResult((columnView(info, anchors, column, index, h)), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~116")),
                 paneLayerView(info, panes, anchors, h),
             ]),
         ]),
         h.p([h.Id(helpId(model)), h.Class("sr-only")], [COPY.gripHelp]),
         ...liftedCopyView(info, h),
-    ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~107");
+    ])), "@gjermundgaraba-designs/pixel-paper/src/reel/reel.js#anonymous~112");
 });

package/dist/src/scheme/scheme.d.ts

@@ -10,5 +10,5 @@ export type Palette = typeof Palette.Type;
 /** The `data-scheme` value a scheme pins, or none for `System`. */
 export declare const toPinnedValue: (scheme: Scheme) => Option.Option<string>;
 /** The scheme a `data-scheme` value pins. Anything else, or nothing, is `System`. */
-export declare const fromPinnedValue: (value: string | null | undefined) => Scheme;
+export declare const fromPinnedValue: (value: string | null) => Scheme;
 //# sourceMappingURL=scheme.d.ts.map

package/dist/src/scheme/scheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scheme.d.ts","sourceRoot":"","sources":["../../../src/scheme/scheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE/C;0FAC0F;AAC1F,eAAO,MAAM,MAAM,uDAA+C,CAAC;AACnE,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAC;AAExC;uCACuC;AACvC,eAAO,MAAM,OAAO,6CAAqC,CAAC;AAC1D,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAE1C,mEAAmE;AACnE,eAAO,MAAM,aAAa,WAAY,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAOhE,CAAC;AAEJ,qFAAqF;AACrF,eAAO,MAAM,eAAe,UAAW,MAAM,GAAG,IAAI,GAAG,SAAS,KAAG,MAMhE,CAAC"}
+{"version":3,"file":"scheme.d.ts","sourceRoot":"","sources":["../../../src/scheme/scheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE/C;0FAC0F;AAC1F,eAAO,MAAM,MAAM,uDAA+C,CAAC;AACnE,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAC;AAExC;uCACuC;AACvC,eAAO,MAAM,OAAO,6CAAqC,CAAC;AAC1D,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAE1C,mEAAmE;AACnE,eAAO,MAAM,aAAa,WAAY,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAOhE,CAAC;AAEJ,qFAAqF;AACrF,eAAO,MAAM,eAAe,UAAW,MAAM,GAAG,IAAI,KAAG,MAMpD,CAAC"}

package/dist/src/segmented/segmented.d.ts

@@ -1,5 +1,4 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
-import type { Attributes } from "../attributes/attributes.ts";
 import type { GlyphName } from "../glyph/glyphs.ts";
 /** One segment: its value, its words, and optionally a glyph printed instead of the words. */
 export type Segment<Value extends string> = Readonly<{
@@ -15,8 +14,6 @@ export type ViewConfig<Value extends string, Message> = Readonly<{
     options: ReadonlyArray<Segment<Value>>;
     value: Value;
     onSelect: (value: Value) => Message;
-    /** Further attributes for the group, never a class. */
-    attributes?: Attributes<Message>;
 }>;
 /** A choice of one: the pressed segment inverts and is `aria-pressed="true"`, the others
  *  `"false"`, in a `role="group"` named by the label. Words print as the nav strip; glyphs print as

package/dist/src/segmented/segmented.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented.d.ts","sourceRoot":"","sources":["../../../src/segmented/segmented.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAG9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,8FAA8F;AAC9F,MAAM,MAAM,OAAO,CAAC,KAAK,SAAS,MAAM,IAAI,QAAQ,CAAC;IACnD,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC,CAAC;AAEH,kEAAkE;AAClE,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,MAAM,EAAE,OAAO,IAAI,QAAQ,CAAC;IAC/D,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC;IACpC,uDAAuD;IACvD,UAAU,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAClC,CAAC,CAAC;AA0BH;;4DAE4D;AAC5D,eAAO,MAAM,IAAI,GAAI,KAAK,SAAS,MAAM,EAAE,OAAO,UACxC,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,KAC/B,WAAW,CAAC,OAAO,CAAC,KACtB,IAYF,CAAC"}
+{"version":3,"file":"segmented.d.ts","sourceRoot":"","sources":["../../../src/segmented/segmented.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,8FAA8F;AAC9F,MAAM,MAAM,OAAO,CAAC,KAAK,SAAS,MAAM,IAAI,QAAQ,CAAC;IACnD,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC,CAAC;AAEH,kEAAkE;AAClE,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,MAAM,EAAE,OAAO,IAAI,QAAQ,CAAC;IAC/D,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC;CACrC,CAAC,CAAC;AA0BH;;4DAE4D;AAC5D,eAAO,MAAM,IAAI,GAAI,KAAK,SAAS,MAAM,EAAE,OAAO,UACxC,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,KAC/B,WAAW,CAAC,OAAO,CAAC,KACtB,IAOF,CAAC"}

package/dist/src/segmented/segmented.js

@@ -18,10 +18,5 @@ const segmentView = (config, option, h) => __foldkitBrandViewResult((UiButton.vi
  *  a compact switch of 26px cells (a layout, a density). */
 export const view = (config, h) => {
     const isGlyphs = Array.every(config.options, (option) => __foldkitBrandViewResult((option.glyph !== undefined), "@gjermundgaraba-designs/pixel-paper/src/segmented/segmented.js#anonymous"));
-    return __foldkitBrandViewResult((h.div([
-        ...(config.attributes ?? []),
-        h.Role("group"),
-        h.AriaLabel(config.label),
-        h.Class(isGlyphs ? "switch" : "nav"),
-    ], Array.map(config.options, (option) => __foldkitBrandViewResult((segmentView(config, option, h)), "@gjermundgaraba-designs/pixel-paper/src/segmented/segmented.js#anonymous~2")))), "@gjermundgaraba-designs/pixel-paper/src/segmented/segmented.js#view");
+    return __foldkitBrandViewResult((h.div([h.Role("group"), h.AriaLabel(config.label), h.Class(isGlyphs ? "switch" : "nav")], Array.map(config.options, (option) => __foldkitBrandViewResult((segmentView(config, option, h)), "@gjermundgaraba-designs/pixel-paper/src/segmented/segmented.js#anonymous~2")))), "@gjermundgaraba-designs/pixel-paper/src/segmented/segmented.js#view");
 };

package/dist/src/selectField/selectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectField.d.ts","sourceRoot":"","sources":["../../../src/selectField/selectField.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,qCAAqC;AACrC,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC,CAAC;AAEH,mDAAmD;AACnD,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,iDAAiD;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACtC,CAAC,CAAC;AAEH,8DAA8D;AAC9D,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACrC,sEAAsE;IACtE,OAAO,EAAE,aAAa,CAAC,YAAY,GAAG,WAAW,CAAC,CAAC;IACnD,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;uCAEmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,yFAAyF;IACzF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC,CAAC;AAoBH;;;8DAG8D;AAC9D,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAiCpF,CAAC"}
+{"version":3,"file":"selectField.d.ts","sourceRoot":"","sources":["../../../src/selectField/selectField.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,qCAAqC;AACrC,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC,CAAC;AAEH,mDAAmD;AACnD,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,iDAAiD;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACtC,CAAC,CAAC;AAEH,8DAA8D;AAC9D,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACrC,sEAAsE;IACtE,OAAO,EAAE,aAAa,CAAC,YAAY,GAAG,WAAW,CAAC,CAAC;IACnD,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;uCAEmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,yFAAyF;IACzF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC,CAAC;AAoBH;;;8DAG8D;AAC9D,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IA0BpF,CAAC"}

package/dist/src/selectField/selectField.js

@@ -1,7 +1,7 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Select as UiSelect } from "@foldkit/ui";
 import { Array } from "effect";
-import { describedByError, errorView } from "../field/field.js";
+import { controlAttributes, errorView, helpView } from "../field/field.js";
 const isGroup = (entry) => __foldkitBrandViewResult(("options" in entry), "@gjermundgaraba-designs/pixel-paper/src/selectField/selectField.js#isGroup");
 const optionView = (h) => __foldkitBrandViewResult((({ value, label, isDisabled = false }) => __foldkitBrandViewResult((h.keyed("option")(value, [h.Value(value), h.Disabled(isDisabled)], [label])), "@gjermundgaraba-designs/pixel-paper/src/selectField/selectField.js#anonymous")), "@gjermundgaraba-designs/pixel-paper/src/selectField/selectField.js#optionView");
 const entryView = (h) => __foldkitBrandViewResult(((entry) => __foldkitBrandViewResult((isGroup(entry)
@@ -21,16 +21,9 @@ export const view = (config, h) => {
         hasDescription: help !== undefined,
         toView: (groups) => __foldkitBrandViewResult((h.div([h.Class("field")], [
             h.label(groups.label, [label]),
-            // NOTE: @foldkit/ui gap: Select has no required option, so the wrapper says it.
-            h.select([
-                ...groups.select,
-                ...describedByError(id, error, help !== undefined, h),
-                ...(isRequired ? [h.AriaRequired(true)] : []),
-            ], Array.map(options, entryView(h))),
+            h.select([...groups.select, ...controlAttributes(id, error, help, isRequired, h)], Array.map(options, entryView(h))),
             ...errorView(id, error, h),
-            ...(help === undefined
-                ? []
-                : [h.p([...groups.description, h.Class("field-help")], [help])]),
+            ...helpView(help, groups.description, h),
         ])), "@gjermundgaraba-designs/pixel-paper/src/selectField/selectField.js#toView"),
     }, h)), "@gjermundgaraba-designs/pixel-paper/src/selectField/selectField.js#view");
 };

package/dist/src/sortable/index.d.ts

@@ -1,3 +1,3 @@
-export { AnnounceReorder, Item, Message, Model, OutMessage, SizeLiftedItem, init, isHolding, setMovable, subscriptions, update, view, } from "./sortable.ts";
+export { AnnounceReorder, Item, Message, Model, OutMessage, SizeLiftedItem, init, setMovable, subscriptions, update, view, } from "./sortable.ts";
 export type { InitConfig, ItemRender, Layout, ViewInputs } from "./sortable.ts";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/sortable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sortable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,IAAI,EACJ,OAAO,EACP,KAAK,EACL,UAAU,EACV,cAAc,EACd,IAAI,EACJ,SAAS,EACT,UAAU,EACV,aAAa,EACb,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sortable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,IAAI,EACJ,OAAO,EACP,KAAK,EACL,UAAU,EACV,cAAc,EACd,IAAI,EACJ,UAAU,EACV,aAAa,EACb,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/src/sortable/index.js

@@ -1 +1 @@
-export { AnnounceReorder, Item, Message, Model, OutMessage, SizeLiftedItem, init, isHolding, setMovable, subscriptions, update, view, } from "./sortable.js";
+export { AnnounceReorder, Item, Message, Model, OutMessage, SizeLiftedItem, init, setMovable, subscriptions, update, view, } from "./sortable.js";