@gjermundgaraba-designs/pixel-paper 0.13.0 → 0.14.0

package/dist/src/board/board.js

@@ -2,7 +2,6 @@ import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Button as UiButton, DragAndDrop as UiDragAndDrop } from "@foldkit/ui";
 import { Array, Effect, Equal, Match, Option, Schema, Stream, pipe } from "effect";
 import * as Command from "foldkit/command";
-import * as Dom from "foldkit/dom";
 import { childAttributes, } from "foldkit/html";
 import { defineMessageUnion } from "foldkit/message";
 import * as Mount from "foldkit/mount";
@@ -17,6 +16,7 @@ import * as IconButton from "../iconButton/iconButton.js";
 import { LOCALE } from "../locale/locale.js";
 import { slotView } from "../slot/slot.js";
 import { prefixKeys } from "../subscription/prefixKeys.js";
+import { LEFT_BUTTON, activatedKeyboardDrag, cancelledDrag, escapeKeys, innerControls, isCarrying, measureLift, phaseOf, pressedDraggable, } from "../drag/drag.js";
 // MODEL
 /** Schema for one card as the board knows it: its id, unique across the board, and its name
  *  in words, which the grip and screen readers use. */
@@ -134,28 +134,8 @@ const columnHook = (model, columnId) => __foldkitBrandViewResult((hookId(id(mode
 const CARD_ATTRIBUTE = "board-card";
 const TITLE_ATTRIBUTE = "board-title";
 const GRIP_ATTRIBUTE = "board-grip";
-// PHASE
-const Phase = Schema.Literals(["Idle", "Pressed", "PointerDragging", "KeyboardDragging"]);
-// NOTE: @foldkit/ui gap: DragAndDrop has no accessor for which input holds a card.
-// `ghostStyle` is Some only while a pointer drags, so it tells a pointer drag from a keyboard
-// one.
-const phaseOf = (dragAndDrop) => {
-    if (Option.isNone(UiDragAndDrop.maybeDraggedItemId(dragAndDrop))) {
-        return __foldkitBrandViewResult(("Idle"), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#phaseOf");
-    }
-    else if (!UiDragAndDrop.isDragging(dragAndDrop)) {
-        return __foldkitBrandViewResult(("Pressed"), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#phaseOf");
-    }
-    else if (Option.isSome(UiDragAndDrop.ghostStyle(dragAndDrop))) {
-        return __foldkitBrandViewResult(("PointerDragging"), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#phaseOf");
-    }
-    else {
-        return __foldkitBrandViewResult(("KeyboardDragging"), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#phaseOf");
-    }
-};
-const isCarrying = (phase) => __foldkitBrandViewResult((phase === "PointerDragging" || phase === "KeyboardDragging"), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#isCarrying");
 // COMMAND
-/** Says a step of a move through the page's live region (`Announcer.announce`), which is
+/** Says a step of a move through the page's live region (as `Announcer.Announce` does), which is
  *  inside the topmost open dialog when there is one. */
 export const AnnounceMove = Command.define("AnnounceMove", {
     args: { text: Schema.String },
@@ -238,18 +218,6 @@ const settle = (previous, putBack = COPY.putBack) => __foldkitBrandViewResult(((
         commands: [...(dragAndDropUpdate.commands ?? []), ...announceMove(maybeText)],
     }, dragAndDropUpdate.outMessage)), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#anonymous~20");
 }), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#settle");
-// NOTE: @foldkit/ui gap: DragAndDrop exposes no update capability for a press, a keyboard
-// pick-up or a cancel, and its `draggable` bundle (`role="option"`, `tabindex`) cannot sit on
-// the grip's button, so the board builds these three child Messages itself.
-const pressedDraggable = (fields) => 
-// oxlint-disable-next-line foldkit/no-child-message-construction-in-root
-__foldkitBrandViewResult((UiDragAndDrop.Message.PressedDraggable(fields)), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#pressedDraggable");
-const activatedKeyboardDrag = (fields) => 
-// oxlint-disable-next-line foldkit/no-child-message-construction-in-root
-__foldkitBrandViewResult((UiDragAndDrop.Message.ActivatedKeyboardDrag(fields)), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#activatedKeyboardDrag");
-const cancelledDrag = () => 
-// oxlint-disable-next-line foldkit/no-child-message-construction-in-root
-__foldkitBrandViewResult((UiDragAndDrop.Message.CancelledDrag()), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#cancelledDrag");
 const holding = (model, held) => __foldkitBrandViewResult((modifyFields(model, { maybeHeld: () => __foldkitBrandViewResult((Option.some(held)), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#maybeHeld~2") })), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#holding");
 const canLift = (model) => __foldkitBrandViewResult((model.isMovable && phaseOf(model.dragAndDrop) === "Idle"), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#canLift");
 const liftByKeyboard = (model, place, columns) => {
@@ -345,28 +313,10 @@ export const setMovable = (model, isMovable) => {
     return __foldkitBrandViewResult((isMovable ? { model: next } : cancel(next)), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#setMovable");
 };
 // SUBSCRIPTION
-// NOTE: @foldkit/ui gap: DragAndDrop's own Escape cancels the move and lets the key travel
-// on, to a dialog around the board. The board takes the key first and stops it.
-/** Escape while a card is pressed or held cancels it and goes no further: it is taken on the
- *  window, before the page's own key bindings or a dialog see it. */
-export const escapeMessage = (event) => {
-    if (event.key !== "Escape" || event.isComposing) {
-        return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#escapeMessage");
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    return __foldkitBrandViewResult((Option.some(Message.PressedEscape())), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#escapeMessage");
-};
-const escapeKeys = Dom.streamFromEventFilterMap({
-    target: () => __foldkitBrandViewResult((window), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#target"),
-    type: "keydown",
-    filterMapEvent: escapeMessage,
-    options: { capture: true },
-});
 const holdingSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResult(({
     escape: entry({ isHolding: Schema.Boolean }, {
         modelToDependencies: (model) => (__foldkitBrandViewResult(({ isHolding: isHolding(model) }), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#modelToDependencies")),
-        dependenciesToStream: ({ isHolding: isHoldingNow }) => __foldkitBrandViewResult((isHoldingNow ? escapeKeys : Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#dependenciesToStream"),
+        dependenciesToStream: ({ isHolding: isHoldingNow }) => __foldkitBrandViewResult((isHoldingNow ? escapeKeys(Message.PressedEscape()) : Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#dependenciesToStream"),
     }),
 }), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#anonymous~35")));
 // NOTE: @foldkit/ui gap: DragAndDrop's Subscription keys are fixed, so two of its users on a
@@ -396,26 +346,11 @@ export const SizeLiftedCard = Mount.define("SizeLiftedCard", {
     args: { cardHook: Schema.String, pressX: Schema.Number, pressY: Schema.Number },
     messages: [Message.CompletedSizeLiftedCard],
     execute: ({ element, cardHook: hook, pressX, pressY }) => __foldkitBrandViewResult((Effect.sync(() => {
-        const maybeCard = Option.fromNullishOr(document.querySelector(`[data-sortable-id="${CSS.escape(hook)}"]`));
-        if (Option.isSome(maybeCard) && element instanceof HTMLElement) {
-            const rect = maybeCard.value.getBoundingClientRect();
-            element.style.setProperty("--lift-width", `${rect.width}px`);
-            element.style.setProperty("--lift-x", `${rect.left - pressX}px`);
-            element.style.setProperty("--lift-y", `${rect.top - pressY}px`);
-        }
+        measureLift(element, `[data-sortable-id="${CSS.escape(hook)}"]`, pressX, pressY);
         return __foldkitBrandViewResult((Message.CompletedSizeLiftedCard()), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#anonymous~37");
     })), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#execute~2"),
 });
-const LEFT_BUTTON = 0;
-const INNER_CONTROL = [
-    "input",
-    "textarea",
-    "select",
-    "a[href]",
-    '[contenteditable]:not([contenteditable="false"])',
-    `button:not([data-${TITLE_ATTRIBUTE}]):not([data-${GRIP_ATTRIBUTE}])`,
-    "[data-no-lift]",
-].join(", ");
+const INNER_CONTROL = innerControls(`[data-${TITLE_ATTRIBUTE}], [data-${GRIP_ATTRIBUTE}]`);
 const isInside = (outer, inner) => __foldkitBrandViewResult((inner !== null && outer.contains(inner)), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#isInside");
 /** Where a press on a card landed: its body, its grip, or a control inside it (none). */
 const pressSpotOf = (target) => {
@@ -549,7 +484,9 @@ const columnView = (info, column, h) => {
             ]),
             ...Array.match(items, {
                 onEmpty: () => __foldkitBrandViewResult((info.toEmptyView(column)), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#onEmpty"),
-                onNonEmpty: (cards) => __foldkitBrandViewResult(([h.ul([h.Class("board-cards")], cards)]), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#onNonEmpty"),
+                // NOTE: Safari takes list semantics from a list printed without markers, so the
+                // list says it is one
+                onNonEmpty: (cards) => __foldkitBrandViewResult(([h.ul([h.Role("list"), h.Class("board-cards")], cards)]), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#onNonEmpty"),
             }),
         ]),
     ])), "@gjermundgaraba-designs/pixel-paper/src/board/board.js#columnView");

package/dist/src/button/button.d.ts

@@ -64,7 +64,7 @@ export type ViewConfig<Message> = Look & Readonly<{
  * While busy it is `aria-busy` too.
  *
  * Enter in a field can still submit a form that has no live submit button, so the form's
- * own update must ignore a submit while its work is saving (see `Card`'s `onSubmit`).
+ * own update must ignore a submit while its work is saving (see `Card.formView`).
  */
 export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=button.d.ts.map

package/dist/src/button/button.js

@@ -33,7 +33,7 @@ const wordsView = (label, maybeDone, h) => __foldkitBrandViewResult((Option.matc
  * While busy it is `aria-busy` too.
  *
  * Enter in a field can still submit a form that has no live submit button, so the form's
- * own update must ignore a submit while its work is saving (see `Card`'s `onSubmit`).
+ * own update must ignore a submit while its work is saving (see `Card.formView`).
  */
 export const view = (config, h) => {
     const { label, onClick, isBusy = false, isDisabled = false, type = "button", attributes = [], glyph, } = config;

package/dist/src/card/card.d.ts

@@ -11,11 +11,6 @@ export type ViewConfig<Message> = Readonly<{
     /** Attributes for the close glyph, such as a Dialog's `closeButton` group, which closes it.
      *  The glyph prints when they are given. */
     closeAttributes?: Attributes<Message>;
-    /** The close glyph is held while work the reader may not walk away from runs: it prints
-     *  held (`aria-disabled`), stays in the keyboard and drops `closeAttributes`, so a press does
-     *  nothing. Escape and the veil still send a Dialog's close request, so the parent's update
-     *  leaves that Message out while it holds the glyph (see `Dialog.isCloseRequest`). */
-    isCloseHeld?: boolean;
     /** 440px instead of 680px: confirms, settings, sign-in. */
     isNarrow?: boolean;
     /** The action bar: a 2px ink rule, then these pushed right. Give the default `isDefault`. */
@@ -25,11 +20,42 @@ export type ViewConfig<Message> = Readonly<{
     /** Attributes for the action bar, such as a Dialog's `actionBar` group, which moves focus
      *  between the actions with h, l and the side arrows. */
     actionBarAttributes?: Attributes<Message>;
-    /** Makes the card a form, named by its title, so it is a form landmark; Enter in a field
-     *  submits it, whether or not its submit button is held. While the form's work is saving,
-     *  the parent's update must ignore this Message. */
-    onSubmit?: Message;
 }>;
 /** The raised surface: paper in a 2px ink box on the 8px print shadow, under a title bar. */
 export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;
+/** Configuration for rendering a form card with `formView`: a card's, but for its body, its
+ *  close attributes and its action bar, which the form fills. */
+export type FormViewConfig<Message> = Omit<ViewConfig<Message>, "body" | "closeAttributes" | "actions" | "lead"> & Readonly<{
+    /** Unique in the document: the submit button's id is `submitId(id)`. */
+    id: string;
+    /** The form's content, fields and all, in one Fields group that `isBusy` holds. A link in
+     *  it (an ErrorSummary's) stays live. */
+    body: ReadonlyArray<Html | string>;
+    /** The submit button's words. It prints primary, the card's default. */
+    submit: string;
+    /** The cancel button's words, before the submit. It closes through `closeAttributes`. */
+    cancel?: string;
+    /** Attributes for the close glyph and the cancel button, such as a Dialog's `closeButton`
+     *  group, which closes it. The glyph prints when they are given. */
+    closeAttributes?: Attributes<Message>;
+    /** The form's work is running (it sends): the submit button is busy, the close glyph and
+     *  cancel are held without `closeAttributes`, and the body is natively disabled, so
+     *  nothing changes under the send and nothing sends twice. In a Dialog, hold its ways out
+     *  too (`Dialog.setCloseHeld`), and let go of both where the send fails. Enter in a field can submit before the fields are held,
+     *  so the update still ignores `onSubmit` while busy. */
+    isBusy?: boolean;
+    /** The form cannot be sent yet (nothing to send): the submit button is held as a Button
+     *  is, and the fields and cancel stay live. Enter in a field can still submit, so the
+     *  update ignores `onSubmit` while it cannot be sent. */
+    isSubmitDisabled?: boolean;
+    /** Sent when the form submits, by its button or by Enter in a field. */
+    onSubmit: Message;
+}>;
+/** The id of a form card's submit button. A send disables the fields, so focus in one falls
+ *  to the page: the form's update moves it here as it sends, with
+ *  `Focus.Focus({ id: Card.submitId(id) })`. */
+export declare const submitId: (id: string) => string;
+/** A card that is a form, named by its title, so a form landmark: its body in one Fields
+ *  group, then cancel and the primary submit button in the action bar. */
+export declare const formView: <Message>(config: FormViewConfig<Message>, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/card/card.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAM9D,sDAAsD;AACtD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,0FAA0F;IAC1F,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC;gDAC4C;IAC5C,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IACtC;;;0FAGsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACvC,uEAAuE;IACvE,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC;6DACyD;IACzD,mBAAmB,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC1C;;wDAEoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH,6FAA6F;AAC7F,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAkDpF,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/card/card.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAQ9D,sDAAsD;AACtD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,0FAA0F;IAC1F,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC;gDAC4C;IAC5C,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IACtC,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACvC,uEAAuE;IACvE,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC;6DACyD;IACzD,mBAAmB,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAC3C,CAAC,CAAC;AAsDH,6FAA6F;AAC7F,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IACd,CAAC;AAIxE;iEACiE;AACjE,MAAM,MAAM,cAAc,CAAC,OAAO,IAAI,IAAI,CACxC,UAAU,CAAC,OAAO,CAAC,EACnB,MAAM,GAAG,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAChD,GACC,QAAQ,CAAC;IACP,wEAAwE;IACxE,EAAE,EAAE,MAAM,CAAC;IACX;6CACyC;IACzC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,wEAAwE;IACxE,MAAM,EAAE,MAAM,CAAC;IACf,yFAAyF;IACzF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;wEACoE;IACpE,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IACtC;;;;6DAIyD;IACzD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;6DAEyD;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wEAAwE;IACxE,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEL;;gDAEgD;AAChD,eAAO,MAAM,QAAQ,OAAQ,MAAM,KAAG,MAAwB,CAAC;AAE/D;0EAC0E;AAC1E,eAAO,MAAM,QAAQ,GAAI,OAAO,UACtB,cAAc,CAAC,OAAO,CAAC,KAC5B,WAAW,CAAC,OAAO,CAAC,KACtB,IAwDF,CAAC"}

package/dist/src/card/card.js

@@ -1,10 +1,11 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Array } from "effect";
+import * as Button from "../button/button.js";
+import * as Fields from "../fields/fields.js";
 import * as IconButton from "../iconButton/iconButton.js";
 import { slotView } from "../slot/slot.js";
-/** The raised surface: paper in a 2px ink box on the 8px print shadow, under a title bar. */
-export const view = (config, h) => {
-    const { title, titleAttributes = [], meta, body, closeAttributes, isCloseHeld = false, isNarrow = false, actions = [], lead = [], actionBarAttributes = [], onSubmit, } = config;
+const childrenView = (config, h) => {
+    const { title, titleAttributes = [], meta, body, closeAttributes, isCloseHeld = false, actions = [], lead = [], actionBarAttributes = [], } = config;
     const titleBar = h.header([h.Class("card-tb")], [
         h.h2(titleAttributes, [title]),
         ...(meta === undefined ? [] : [h.span([h.Class("meta")], [meta])]),
@@ -23,9 +24,46 @@ export const view = (config, h) => {
         onEmpty: () => __foldkitBrandViewResult(([]), "@gjermundgaraba-designs/pixel-paper/src/card/card.js#onEmpty"),
         onNonEmpty: (bar) => __foldkitBrandViewResult(([h.div([...actionBarAttributes, h.Class("card-actions")], bar)]), "@gjermundgaraba-designs/pixel-paper/src/card/card.js#onNonEmpty"),
     });
-    const children = [titleBar, h.div([h.Class("card-body")], body), ...actionBar];
-    const rootAttributes = [h.Class(isNarrow ? "card narrow" : "card")];
-    return __foldkitBrandViewResult((onSubmit === undefined
-        ? h.div(rootAttributes, children)
-        : h.form([...rootAttributes, h.AriaLabel(title), h.Novalidate(true), h.OnSubmit(onSubmit)], children)), "@gjermundgaraba-designs/pixel-paper/src/card/card.js#view");
+    return __foldkitBrandViewResult(([titleBar, h.div([h.Class("card-body")], body), ...actionBar]), "@gjermundgaraba-designs/pixel-paper/src/card/card.js#childrenView");
+};
+const className = (isNarrow) => __foldkitBrandViewResult((isNarrow === true ? "card narrow" : "card"), "@gjermundgaraba-designs/pixel-paper/src/card/card.js#className");
+/** The raised surface: paper in a 2px ink box on the 8px print shadow, under a title bar. */
+export const view = (config, h) => __foldkitBrandViewResult((h.div([h.Class(className(config.isNarrow))], childrenView(config, h))), "@gjermundgaraba-designs/pixel-paper/src/card/card.js#view");
+/** The id of a form card's submit button. A send disables the fields, so focus in one falls
+ *  to the page: the form's update moves it here as it sends, with
+ *  `Focus.Focus({ id: Card.submitId(id) })`. */
+export const submitId = (id) => __foldkitBrandViewResult((`${id}-submit`), "@gjermundgaraba-designs/pixel-paper/src/card/card.js#submitId");
+/** A card that is a form, named by its title, so a form landmark: its body in one Fields
+ *  group, then cancel and the primary submit button in the action bar. */
+export const formView = (config, h) => {
+    const { id, title, submit, cancel, closeAttributes, isBusy = false, isSubmitDisabled = false, onSubmit, } = config;
+    const cancelButton = cancel === undefined
+        ? []
+        : [
+            Button.view({
+                label: cancel,
+                isDisabled: isBusy,
+                attributes: isBusy ? [] : (closeAttributes ?? []),
+            }, h),
+        ];
+    const submitButton = Button.view({
+        label: submit,
+        variant: "Primary",
+        isDefault: true,
+        isBusy,
+        isDisabled: isSubmitDisabled,
+        type: "submit",
+        attributes: [h.Id(submitId(id))],
+    }, h);
+    return __foldkitBrandViewResult((h.form([
+        h.Class(className(config.isNarrow)),
+        h.AriaLabel(title),
+        h.Novalidate(true),
+        h.OnSubmit(onSubmit),
+    ], childrenView({
+        ...config,
+        body: [Fields.view({ body: config.body, isBusy }, h)],
+        isCloseHeld: isBusy,
+        actions: [...cancelButton, submitButton],
+    }, h))), "@gjermundgaraba-designs/pixel-paper/src/card/card.js#formView");
 };

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

@@ -1,3 +1,3 @@
-export { view } from "./card.ts";
-export type { ViewConfig } from "./card.ts";
+export { formView, submitId, view } from "./card.ts";
+export type { FormViewConfig, ViewConfig } from "./card.ts";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACrD,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}

package/dist/src/card/index.js

@@ -1 +1 @@
-export { view } from "./card.js";
+export { formView, submitId, view } from "./card.js";

package/dist/src/commandPalette/commandPalette.d.ts

@@ -31,6 +31,7 @@ export declare const Model: Schema.Struct<{
             }>;
             readonly maybeFocusSelector: Schema.Option<Schema.String>;
         }>;
+        readonly isCloseHeld: Schema.Boolean;
     }>;
     readonly query: Schema.String;
     readonly maybeCursor: Schema.Option<Schema.String>;
@@ -126,6 +127,7 @@ export declare const update: (model: Model, message: Message) => Readonly<{
                 };
                 readonly maybeFocusSelector: Option.Option<string>;
             };
+            readonly isCloseHeld: boolean;
         };
         readonly query: string;
         readonly maybeCursor: Option.Option<string>;
@@ -289,6 +291,7 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
                 };
                 readonly maybeFocusSelector: Option.Option<string>;
             };
+            readonly isCloseHeld: boolean;
         };
         readonly query: string;
         readonly maybeCursor: Option.Option<string>;
@@ -457,6 +460,7 @@ export declare const view: import("foldkit/submodel").View<{
             };
             readonly maybeFocusSelector: Option.Option<string>;
         };
+        readonly isCloseHeld: boolean;
     };
     readonly query: string;
     readonly maybeCursor: Option.Option<string>;

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

@@ -1 +1 @@
-{"version":3,"file":"commandPalette.d.ts","sourceRoot":"","sources":["../../../src/commandPalette/commandPalette.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"commandPalette.d.ts","sourceRoot":"","sources":["../../../src/commandPalette/commandPalette.ts"],"names":[],"mappings":"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"}

package/dist/src/confirmDialog/confirmDialog.d.ts

@@ -16,11 +16,11 @@ export declare const Model: Schema.Struct<{
             }>;
             readonly maybeFocusSelector: Schema.Option<Schema.String>;
         }>;
+        readonly isCloseHeld: Schema.Boolean;
     }>;
 }>;
 export type Model = typeof Model.Type;
-/** Union of all Messages a confirm dialog can produce. `RequestedCloseWhileHeld`: Escape or a
- *  press on the veil while `isCloseHeld` is set; nothing follows it. */
+/** Union of all Messages a confirm dialog can produce. */
 export declare const Message: import("foldkit/message").MessageUnion<{
     readonly GotDialogMessage: {
         message: import("foldkit/message").MessageUnion<{
@@ -56,13 +56,12 @@ export declare const Message: import("foldkit/message").MessageUnion<{
     };
     readonly ClickedConfirm: {};
     readonly ClickedCancel: {};
-    readonly RequestedCloseWhileHeld: {};
 }>;
 export type Message = typeof Message.Type;
 /** Union of OutMessages a confirm dialog reports. `Confirmed`: the reader pressed the action;
  *  the dialog stays open until the parent calls `close`. `Cancelled`: cancel, Escape or a click
  *  on the veil; the dialog has closed, and whether that also stops work already running is
- *  the parent's to decide. Never reported while `isCloseHeld` is set. */
+ *  the parent's to decide. Never reported while its ways out are held (`setCloseHeld`). */
 export declare const OutMessage: import("foldkit/message").MessageUnion<{
     readonly Confirmed: {};
     readonly Cancelled: {};
@@ -90,6 +89,7 @@ export declare const update: (model: Model, message: Message) => Readonly<{
                 };
                 readonly maybeFocusSelector: import("effect/Option").Option<string>;
             };
+            readonly isCloseHeld: boolean;
         };
     };
     commands?: Update.Commands<{
@@ -136,8 +136,6 @@ export declare const update: (model: Model, message: Message) => Readonly<{
             readonly _tag: "PressedActionKey";
             readonly direction: "Next" | "Previous";
         };
-    } | {
-        readonly _tag: "RequestedCloseWhileHeld";
     }, never>;
     outMessage?: {
         readonly _tag: "Cancelled";
@@ -147,13 +145,20 @@ export declare const update: (model: Model, message: Message) => Readonly<{
 }>;
 /** Opens the confirm dialog: focus starts on the action, or on cancel when it is `isDanger`. */
 export declare const open: (model: Model) => Update.Return<Model, Message>;
-/** Closes the confirm dialog without reporting `Cancelled`: call it once confirmed work has
- *  landed. */
+/** Closes the confirm dialog without reporting `Cancelled`, and lets go of a hold: call it
+ *  once confirmed work has landed. */
 export declare const close: (model: Model) => Update.Return<Model, Message>;
+/** Holds cancel, Escape and the veil, or lets them go: while held the dialog stays open and
+ *  reports no `Cancelled`, and cancel prints held (`aria-disabled`, in the keyboard). Hold it
+ *  in the update that starts confirmed work whose failure must land here, and let go in the
+ *  update where the work fails; `close` lets go once it lands. */
+export declare const setCloseHeld: (model: Model, isHeld: boolean) => Model;
 /** The confirm dialog's id, unique in the document. */
 export declare const id: (model: Model) => string;
 /** Whether the confirm dialog is open. */
 export declare const isOpen: (model: Model) => boolean;
+/** Whether its ways out are held (`setCloseHeld`). */
+export declare const isCloseHeld: (model: Model) => boolean;
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
 export type ViewInputs = Readonly<{
     /** The title bar: the action's name (`"Delete"`). */
@@ -174,18 +179,12 @@ export type ViewInputs = Readonly<{
     isDanger?: boolean;
     /** The confirmed work is running: the confirming button is held (its word stays, the
      *  working cursor prints, a second press does nothing) and keeps focus. Cancel stays live
-     *  unless `isCloseHeld`. */
+     *  unless the dialog's ways out are held (`setCloseHeld`). */
     isBusy?: boolean;
     /** The action cannot run now (nothing is running; it is blocked): the confirming button is
      *  held, `aria-disabled` without the working cursor, and stays in the keyboard, so focus
      *  does not fall to the page. Cancel stays live. */
     isDisabled?: boolean;
-    /** The reader may not walk away from the work running now (a delete whose failure must
-     *  land in this dialog): cancel is held as a Button is (`aria-disabled`, in the keyboard,
-     *  a press does nothing), and Escape and a press on the veil leave the
-     *  dialog open, so it reports no `Cancelled` while this is set. `close` still closes it.
-     *  Usually set with `isBusy`. */
-    isCloseHeld?: boolean;
     /** The page's live region and toasts while this is the topmost open dialog, `undefined`
      *  while it is not (see `Dialog`). */
     toLiveRegionView?: (() => Html) | undefined;
@@ -200,8 +199,8 @@ export type ViewInputs = Readonly<{
  * double-click through.
  *
  * Work that takes a while stays in the dialog: set `isBusy` while it runs, `close` once it
- * has landed, and on failure keep it open with the error in `toDetailView`. Set
- * `isCloseHeld` with it when the reader must stay to see how it ends.
+ * has landed, and on failure keep it open with the error in `toDetailView`. Hold its ways
+ * out with `setCloseHeld` too when the reader must stay to see how it ends.
  */
 export declare const view: import("foldkit/submodel").View<{
     readonly dialog: {
@@ -217,6 +216,7 @@ export declare const view: import("foldkit/submodel").View<{
             };
             readonly maybeFocusSelector: import("effect/Option").Option<string>;
         };
+        readonly isCloseHeld: boolean;
     };
 }, {
     readonly _tag: "ClickedCancel";
@@ -262,8 +262,6 @@ export declare const view: import("foldkit/submodel").View<{
         readonly _tag: "PressedActionKey";
         readonly direction: "Next" | "Previous";
     };
-} | {
-    readonly _tag: "RequestedCloseWhileHeld";
 }, Readonly<{
     /** The title bar: the action's name (`"Delete"`). */
     title: string;
@@ -283,18 +281,12 @@ export declare const view: import("foldkit/submodel").View<{
     isDanger?: boolean;
     /** The confirmed work is running: the confirming button is held (its word stays, the
      *  working cursor prints, a second press does nothing) and keeps focus. Cancel stays live
-     *  unless `isCloseHeld`. */
+     *  unless the dialog's ways out are held (`setCloseHeld`). */
     isBusy?: boolean;
     /** The action cannot run now (nothing is running; it is blocked): the confirming button is
      *  held, `aria-disabled` without the working cursor, and stays in the keyboard, so focus
      *  does not fall to the page. Cancel stays live. */
     isDisabled?: boolean;
-    /** The reader may not walk away from the work running now (a delete whose failure must
-     *  land in this dialog): cancel is held as a Button is (`aria-disabled`, in the keyboard,
-     *  a press does nothing), and Escape and a press on the veil leave the
-     *  dialog open, so it reports no `Cancelled` while this is set. `close` still closes it.
-     *  Usually set with `isBusy`. */
-    isCloseHeld?: boolean;
     /** The page's live region and toasts while this is the topmost open dialog, `undefined`
      *  while it is not (see `Dialog`). */
     toLiveRegionView?: (() => Html) | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"confirmDialog.d.ts","sourceRoot":"","sources":["../../../src/confirmDialog/confirmDialog.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"confirmDialog.d.ts","sourceRoot":"","sources":["../../../src/confirmDialog/confirmDialog.ts"],"names":[],"mappings":"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"}

package/dist/src/confirmDialog/confirmDialog.js

@@ -15,19 +15,17 @@ export const Model = Schema.Struct({
     dialog: Dialog.Model,
 });
 // MESSAGE
-/** Union of all Messages a confirm dialog can produce. `RequestedCloseWhileHeld`: Escape or a
- *  press on the veil while `isCloseHeld` is set; nothing follows it. */
+/** Union of all Messages a confirm dialog can produce. */
 export const Message = defineMessageUnion({
     GotDialogMessage: { message: Dialog.Message },
     ClickedConfirm: {},
     ClickedCancel: {},
-    RequestedCloseWhileHeld: {},
 });
 // OUT MESSAGE
 /** Union of OutMessages a confirm dialog reports. `Confirmed`: the reader pressed the action;
  *  the dialog stays open until the parent calls `close`. `Cancelled`: cancel, Escape or a click
  *  on the veil; the dialog has closed, and whether that also stops work already running is
- *  the parent's to decide. Never reported while `isCloseHeld` is set. */
+ *  the parent's to decide. Never reported while its ways out are held (`setCloseHeld`). */
 export const OutMessage = defineMessageUnion({
     Confirmed: {},
     Cancelled: {},
@@ -50,21 +48,29 @@ const dialogFold = foldDialog(Dialog, {
 export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
     GotDialogMessage: ({ message: dialogMessage }) => __foldkitBrandViewResult((dialogFold.update(model, dialogMessage)), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#GotDialogMessage"),
     ClickedConfirm: () => (__foldkitBrandViewResult(({ model, outMessage: OutMessage.Confirmed() }), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#ClickedConfirm")),
-    ClickedCancel: () => __foldkitBrandViewResult((pipe(dialogFold.close(model), Update.withOutMessage(OutMessage.Cancelled()))), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#ClickedCancel"),
-    RequestedCloseWhileHeld: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#RequestedCloseWhileHeld")),
+    ClickedCancel: () => __foldkitBrandViewResult((Dialog.isCloseHeld(model.dialog)
+        ? { model }
+        : pipe(dialogFold.close(model), Update.withOutMessage(OutMessage.Cancelled()))), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#ClickedCancel"),
 })), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#update");
 /** Opens the confirm dialog: focus starts on the action, or on cancel when it is `isDanger`. */
 export const open = (model) => __foldkitBrandViewResult((dialogFold.open(model)), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#open");
-/** Closes the confirm dialog without reporting `Cancelled`: call it once confirmed work has
- *  landed. */
+/** Closes the confirm dialog without reporting `Cancelled`, and lets go of a hold: call it
+ *  once confirmed work has landed. */
 export const close = (model) => __foldkitBrandViewResult((dialogFold.close(model)), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#close");
+/** Holds cancel, Escape and the veil, or lets them go: while held the dialog stays open and
+ *  reports no `Cancelled`, and cancel prints held (`aria-disabled`, in the keyboard). Hold it
+ *  in the update that starts confirmed work whose failure must land here, and let go in the
+ *  update where the work fails; `close` lets go once it lands. */
+export const setCloseHeld = (model, isHeld) => __foldkitBrandViewResult((modifyFields(model, { dialog: (dialog) => __foldkitBrandViewResult((Dialog.setCloseHeld(dialog, isHeld)), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#dialog~2") })), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#setCloseHeld");
 // ACCESSORS
 /** The confirm dialog's id, unique in the document. */
 export const id = (model) => __foldkitBrandViewResult((Dialog.id(model.dialog)), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#id");
 /** Whether the confirm dialog is open. */
 export const isOpen = (model) => __foldkitBrandViewResult((Dialog.isOpen(model.dialog)), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#isOpen");
-const cardView = (viewInputs, render, h) => {
-    const { isDanger = false, isBusy = false, isDisabled = false, isCloseHeld = false, toDetailView, } = viewInputs;
+/** Whether its ways out are held (`setCloseHeld`). */
+export const isCloseHeld = (model) => __foldkitBrandViewResult((Dialog.isCloseHeld(model.dialog)), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#isCloseHeld");
+const cardView = (model, viewInputs, render, h) => {
+    const { isDanger = false, isBusy = false, isDisabled = false, toDetailView } = viewInputs;
     const commit = Button.view({
         label: viewInputs.label,
         variant: isDanger ? "Danger" : "Primary",
@@ -77,7 +83,7 @@ const cardView = (viewInputs, render, h) => {
     const cancel = Button.view({
         label: "cancel",
         isDefault: isDanger,
-        isDisabled: isCloseHeld,
+        isDisabled: Dialog.isCloseHeld(model.dialog),
         onClick: Message.ClickedCancel(),
         attributes: isDanger ? render.initialFocus : [],
     }, h);
@@ -108,8 +114,8 @@ const cardView = (viewInputs, render, h) => {
  * double-click through.
  *
  * Work that takes a while stays in the dialog: set `isBusy` while it runs, `close` once it
- * has landed, and on failure keep it open with the error in `toDetailView`. Set
- * `isCloseHeld` with it when the reader must stay to see how it ends.
+ * has landed, and on failure keep it open with the error in `toDetailView`. Hold its ways
+ * out with `setCloseHeld` too when the reader must stay to see how it ends.
  */
 export const view = defineView((model, viewInputs, h) => __foldkitBrandViewResult((h.submodel({
     slotId: id(model),
@@ -119,11 +125,7 @@ export const view = defineView((model, viewInputs, h) => __foldkitBrandViewResul
         isAlert: viewInputs.isDanger ?? false,
         hasDescription: true,
         toLiveRegionView: viewInputs.toLiveRegionView,
-        toView: (render) => __foldkitBrandViewResult((cardView(viewInputs, render, h)), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#toView"),
+        toView: (render) => __foldkitBrandViewResult((cardView(model, viewInputs, render, h)), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#toView"),
     },
-    // NOTE: while closing is held, Escape and a press on the veil are handed on as
-    // `RequestedCloseWhileHeld` instead of reaching the Dialog.
-    toParentMessage: (message) => __foldkitBrandViewResult((viewInputs.isCloseHeld === true && Dialog.isCloseRequest(message)
-        ? Message.RequestedCloseWhileHeld()
-        : Message.GotDialogMessage({ message })), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#toParentMessage~2"),
+    toParentMessage: (message) => __foldkitBrandViewResult((Message.GotDialogMessage({ message })), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#toParentMessage~2"),
 })), "@gjermundgaraba-designs/pixel-paper/src/confirmDialog/confirmDialog.js#anonymous"));

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

@@ -1,3 +1,3 @@
-export { Message, Model, OutMessage, close, id, init, isOpen, open, update, view, } from "./confirmDialog.ts";
+export { Message, Model, OutMessage, close, id, init, isCloseHeld, isOpen, open, setCloseHeld, update, view, } from "./confirmDialog.ts";
 export type { InitConfig, ViewInputs } from "./confirmDialog.ts";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/confirmDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,KAAK,EACL,EAAE,EACF,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,MAAM,EACN,IAAI,GACL,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/confirmDialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,KAAK,EACL,UAAU,EACV,KAAK,EACL,EAAE,EACF,IAAI,EACJ,WAAW,EACX,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,IAAI,GACL,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/src/confirmDialog/index.js

@@ -1 +1 @@
-export { Message, Model, OutMessage, close, id, init, isOpen, open, update, view, } from "./confirmDialog.js";
+export { Message, Model, OutMessage, close, id, init, isCloseHeld, isOpen, open, setCloseHeld, update, view, } from "./confirmDialog.js";