@gjermundgaraba-designs/pixel-paper 0.14.1 → 0.16.0

package/dist/src/dialog/dialog.js

@@ -10,11 +10,9 @@ import { defineView } from "foldkit/submodel";
 import { isPlain } from "../keys/keys.js";
 import { foldDialog } from "./fold.js";
 // MODEL
-/** Schema for a pixel-paper dialog: the `@foldkit/ui` Dialog it is built on, and whether its
- *  ways out are held (`setCloseHeld`). */
+/** Schema for a pixel-paper dialog: the `@foldkit/ui` Dialog it is built on. */
 export const Model = Schema.Struct({
     dialog: UiDialog.Model,
-    isCloseHeld: Schema.Boolean,
 });
 /** Which way h, l and the side arrows move focus in a dialog's action bar. */
 const ActionDirection = Schema.Literals(["Previous", "Next"]);
@@ -36,15 +34,12 @@ export const OutMessage = defineMessageUnion({
 /** Creates a closed dialog. */
 export const init = (config) => (__foldkitBrandViewResult(({
     dialog: UiDialog.init({ id: config.id }),
-    isCloseHeld: false,
 }), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#init"));
 // ACCESSORS
 /** The dialog's id, unique in the document. */
 export const id = (model) => __foldkitBrandViewResult((model.dialog.id), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#id");
 /** Whether the dialog is open. */
 export const isOpen = (model) => __foldkitBrandViewResult((model.dialog.isOpen), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#isOpen");
-/** Whether the dialog's ways out are held (`setCloseHeld`). */
-export const isCloseHeld = (model) => __foldkitBrandViewResult((model.isCloseHeld), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#isCloseHeld");
 // UPDATE
 const toOutMessage = UiDialog.OutMessage.match({
     Opened: () => __foldkitBrandViewResult((undefined), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#Opened"),
@@ -56,29 +51,21 @@ const dialogFold = foldDialog(UiDialog, {
     toParentMessage: (message) => __foldkitBrandViewResult((Message.GotDialogMessage({ message })), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#toParentMessage"),
     toParentOutMessage: toOutMessage,
 });
+const FREE = { isCloseHeld: false };
 // NOTE: @foldkit/ui gap: Dialog has no way to hold a close. Escape, a press on the veil and a
 // control given the `closeButton` group all send `RequestedClose`, so a held dialog reads it
 // by its tag and leaves it out.
-const isHeldClose = (model, message) => __foldkitBrandViewResult((model.isCloseHeld && message._tag === "RequestedClose"), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#isHeldClose");
+const isHeldClose = (context, message) => __foldkitBrandViewResult((context.isCloseHeld && message._tag === "RequestedClose"), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#isHeldClose");
 /** Processes a dialog Message and returns the next Model, Commands and OutMessage. */
-export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
-    GotDialogMessage: ({ message: dialogMessage }) => __foldkitBrandViewResult((isHeldClose(model, dialogMessage) ? { model } : dialogFold.update(model, dialogMessage)), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#GotDialogMessage"),
+export const update = (model, message, context = FREE) => __foldkitBrandViewResult((Message.match(message, {
+    GotDialogMessage: ({ message: dialogMessage }) => __foldkitBrandViewResult((isHeldClose(context, dialogMessage) ? { model } : dialogFold.update(model, dialogMessage)), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#GotDialogMessage"),
     PressedActionKey: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#PressedActionKey")),
 })), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#update");
-/** Opens the dialog with its ways out free: focus moves to the element given the
- *  `initialFocus` group, else to the first control, and returns to where it was when the
- *  dialog closes. */
-export const open = (model) => __foldkitBrandViewResult((dialogFold.open(modifyFields(model, { isCloseHeld: () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#isCloseHeld~2") }))), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#open");
-/** Closes the dialog without reporting `Closed`, and lets go of a hold. */
-export const close = (model) => __foldkitBrandViewResult((dialogFold.close(modifyFields(model, { isCloseHeld: () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#isCloseHeld~3") }))), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#close");
-/** Holds the dialog's ways out, or lets them go: while held, Escape, a press on the veil and
- *  a control given the `closeButton` group leave it open and report no `Closed`, so the
- *  result of work the reader may not walk away from (a save whose failure must land here)
- *  lands in it. Hold it in the update that starts the work, and let go in the update where
- *  the work fails, or the reader is shut in with the failure; `close` lets go once it lands,
- *  and `open` opens it free.
- *  Hold the card's own close controls too (`Card.formView`'s `isBusy`). */
-export const setCloseHeld = (model, isHeld) => __foldkitBrandViewResult((modifyFields(model, { isCloseHeld: () => __foldkitBrandViewResult((isHeld), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#isCloseHeld~4") })), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#setCloseHeld");
+/** Opens the dialog: focus moves to the element given the `initialFocus` group, else to the
+ *  first control, and returns to where it was when the dialog closes. */
+export const open = (model) => __foldkitBrandViewResult((dialogFold.open(model)), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#open");
+/** Closes the dialog without reporting `Closed`. */
+export const close = (model) => __foldkitBrandViewResult((dialogFold.close(model)), "@gjermundgaraba-designs/pixel-paper/src/dialog/dialog.js#close");
 // ACTION BAR KEYS
 const ACTION_BAR_ATTRIBUTE = "data-pixel-paper-action-bar";
 const ACTION_SELECTOR = "button:not(:disabled), a[href]";

package/dist/src/dialog/fold.d.ts

@@ -1,9 +1,10 @@
 import * as Update from "foldkit/update";
+import type { UpdateContext } from "./dialog.ts";
 type ChildReturn<ChildModel, ChildMessage, ChildOutMessage> = Update.ReturnWithOutMessage<ChildModel, ChildMessage, ChildOutMessage>;
 /** A dialog a parent holds: its update, and the steps that open and close it (`@foldkit/ui`'s
  *  Dialog, or pixel-paper's). */
 type DialogChild<ChildModel, ChildMessage, ChildOutMessage> = Readonly<{
-    update: (model: ChildModel, message: ChildMessage) => ChildReturn<ChildModel, ChildMessage, ChildOutMessage>;
+    update: (model: ChildModel, message: ChildMessage, context: UpdateContext) => ChildReturn<ChildModel, ChildMessage, ChildOutMessage>;
     open: (model: ChildModel) => ChildReturn<ChildModel, ChildMessage, ChildOutMessage>;
     close: (model: ChildModel) => ChildReturn<ChildModel, ChildMessage, ChildOutMessage>;
 }>;
@@ -16,10 +17,17 @@ type DialogFoldConfig<ParentModel, ParentMessage, ParentOutMessage, ChildModel,
      *  veil, a close button). Without it the dialog's OutMessages report nothing: a parent
      *  that reads `isOpen` when it needs to. */
     toParentOutMessage?: (outMessage: ChildOutMessage) => ParentOutMessage | undefined;
+    /** Whether the dialog's ways out are held, read from the parent's own state as each
+     *  Message arrives (`(model) => model.isSaving`). Free when not given. See
+     *  `Dialog.UpdateContext`. */
+    isCloseHeld?: (model: ParentModel) => boolean;
 }>;
 /** The dialog folded into its parent: a dialog Message, and opening and closing it. */
 type DialogFold<ParentModel, ParentMessage, ParentOutMessage, ChildMessage> = Readonly<{
     update: (model: ParentModel, message: ChildMessage) => Update.ReturnWithOutMessage<ParentModel, ParentMessage, ParentOutMessage>;
+    /** The update a parent that is itself a dialog (ConfirmDialog) runs with the hold its own
+     *  parent gave it. */
+    updateWith: (context: UpdateContext) => (model: ParentModel, message: ChildMessage) => Update.ReturnWithOutMessage<ParentModel, ParentMessage, ParentOutMessage>;
     open: (model: ParentModel) => Update.Return<ParentModel, ParentMessage>;
     close: (model: ParentModel) => Update.Return<ParentModel, ParentMessage>;
 }>;

package/dist/src/dialog/fold.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fold.d.ts","sourceRoot":"","sources":["../../../src/dialog/fold.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAC;AAIzC,KAAK,WAAW,CAAC,UAAU,EAAE,YAAY,EAAE,eAAe,IAAI,MAAM,CAAC,oBAAoB,CACvF,UAAU,EACV,YAAY,EACZ,eAAe,CAChB,CAAC;AAEF;iCACiC;AACjC,KAAK,WAAW,CAAC,UAAU,EAAE,YAAY,EAAE,eAAe,IAAI,QAAQ,CAAC;IACrE,MAAM,EAAE,CACN,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,YAAY,KAClB,WAAW,CAAC,UAAU,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC;IAC5D,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,WAAW,CAAC,UAAU,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC;IACpF,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,WAAW,CAAC,UAAU,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC;CACtF,CAAC,CAAC;AAEH,gGAAgG;AAChG,KAAK,gBAAgB,CACnB,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,eAAe,IACb,QAAQ,CAAC;IACX,IAAI,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,UAAU,CAAC;IACzC,KAAK,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,KAAK,WAAW,CAAC;IACnE,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,aAAa,CAAC;IAC1D;;gDAE4C;IAC5C,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,gBAAgB,GAAG,SAAS,CAAC;CACpF,CAAC,CAAC;AAEH,uFAAuF;AACvF,KAAK,UAAU,CAAC,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,YAAY,IAAI,QAAQ,CAAC;IACrF,MAAM,EAAE,CACN,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,YAAY,KAClB,MAAM,CAAC,oBAAoB,CAAC,WAAW,EAAE,aAAa,EAAE,gBAAgB,CAAC,CAAC;IAC/E,IAAI,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;IACxE,KAAK,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;CAC1E,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;uFAsBuF;AACvF,eAAO,MAAM,UAAU,GACrB,WAAW,EACX,aAAa,EACb,UAAU,EACV,YAAY,EACZ,eAAe,EACf,gBAAgB,GAAG,KAAK,SAEjB,WAAW,CAAC,UAAU,EAAE,YAAY,EAAE,eAAe,CAAC,UACrD,gBAAgB,CACtB,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,eAAe,CAChB,KACA,UAAU,CAAC,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,YAAY,CAqBvE,CAAC"}
+{"version":3,"file":"fold.d.ts","sourceRoot":"","sources":["../../../src/dialog/fold.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAC;AAEzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,KAAK,WAAW,CAAC,UAAU,EAAE,YAAY,EAAE,eAAe,IAAI,MAAM,CAAC,oBAAoB,CACvF,UAAU,EACV,YAAY,EACZ,eAAe,CAChB,CAAC;AAEF;iCACiC;AACjC,KAAK,WAAW,CAAC,UAAU,EAAE,YAAY,EAAE,eAAe,IAAI,QAAQ,CAAC;IACrE,MAAM,EAAE,CACN,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,YAAY,EACrB,OAAO,EAAE,aAAa,KACnB,WAAW,CAAC,UAAU,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC;IAC5D,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,WAAW,CAAC,UAAU,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC;IACpF,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,WAAW,CAAC,UAAU,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC;CACtF,CAAC,CAAC;AAEH,gGAAgG;AAChG,KAAK,gBAAgB,CACnB,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,eAAe,IACb,QAAQ,CAAC;IACX,IAAI,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,UAAU,CAAC;IACzC,KAAK,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,KAAK,WAAW,CAAC;IACnE,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,aAAa,CAAC;IAC1D;;gDAE4C;IAC5C,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,gBAAgB,GAAG,SAAS,CAAC;IACnF;;kCAE8B;IAC9B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,OAAO,CAAC;CAC/C,CAAC,CAAC;AAEH,uFAAuF;AACvF,KAAK,UAAU,CAAC,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,YAAY,IAAI,QAAQ,CAAC;IACrF,MAAM,EAAE,CACN,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,YAAY,KAClB,MAAM,CAAC,oBAAoB,CAAC,WAAW,EAAE,aAAa,EAAE,gBAAgB,CAAC,CAAC;IAC/E;0BACsB;IACtB,UAAU,EAAE,CACV,OAAO,EAAE,aAAa,KACnB,CACH,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,YAAY,KAClB,MAAM,CAAC,oBAAoB,CAAC,WAAW,EAAE,aAAa,EAAE,gBAAgB,CAAC,CAAC;IAC/E,IAAI,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;IACxE,KAAK,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;CAC1E,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;uFAsBuF;AACvF,eAAO,MAAM,UAAU,GACrB,WAAW,EACX,aAAa,EACb,UAAU,EACV,YAAY,EACZ,eAAe,EACf,gBAAgB,GAAG,KAAK,SAEjB,WAAW,CAAC,UAAU,EAAE,YAAY,EAAE,eAAe,CAAC,UACrD,gBAAgB,CACtB,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,eAAe,CAChB,KACA,UAAU,CAAC,WAAW,EAAE,aAAa,EAAE,gBAAgB,EAAE,YAAY,CAyBvE,CAAC"}

package/dist/src/dialog/fold.js

@@ -34,12 +34,16 @@ export const foldDialog = (child, config) => {
     // `RequestedOpen`, which reports `Opened`), and so can its update, so each fold needs a
     // step for an OutMessage. This one keeps the parent's Model: a step reports nothing.
     const foldOutMessage = () => __foldkitBrandViewResult(((model) => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/dialog/fold.js#anonymous"))), "@gjermundgaraba-designs/pixel-paper/src/dialog/fold.js#foldOutMessage");
-    const { toParentOutMessage } = config;
-    const update = toParentOutMessage === undefined
-        ? Update.foldChild({ update: child.update, ...lift, foldOutMessage })
-        : Update.foldChild({ update: child.update, ...lift, toParentOutMessage });
+    const { toParentOutMessage, isCloseHeld = () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/dialog/fold.js#anonymous~2") } = config;
+    const updateWith = (context) => {
+        const childUpdate = (model, message) => __foldkitBrandViewResult((child.update(model, message, context)), "@gjermundgaraba-designs/pixel-paper/src/dialog/fold.js#childUpdate");
+        return __foldkitBrandViewResult((toParentOutMessage === undefined
+            ? Update.foldChild({ update: childUpdate, ...lift, foldOutMessage })
+            : Update.foldChild({ update: childUpdate, ...lift, toParentOutMessage })), "@gjermundgaraba-designs/pixel-paper/src/dialog/fold.js#updateWith");
+    };
     return __foldkitBrandViewResult(({
-        update,
+        update: (model, message) => __foldkitBrandViewResult((updateWith({ isCloseHeld: isCloseHeld(model) })(model, message)), "@gjermundgaraba-designs/pixel-paper/src/dialog/fold.js#update"),
+        updateWith,
         open: Update.foldChildStep({ update: child.open, ...lift, foldOutMessage }),
         close: Update.foldChildStep({ update: child.close, ...lift, foldOutMessage }),
     }), "@gjermundgaraba-designs/pixel-paper/src/dialog/fold.js#foldDialog");

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

@@ -1,4 +1,4 @@
-export { BindActionKeys, Message, Model, OutMessage, close, id, init, isCloseHeld, isOpen, open, sceneMounts, setCloseHeld, update, view, } from "./dialog.ts";
-export type { InitConfig, Placement, RenderInfo, ViewInputs } from "./dialog.ts";
+export { BindActionKeys, Message, Model, OutMessage, close, id, init, isOpen, open, sceneMounts, update, view, } from "./dialog.ts";
+export type { InitConfig, Placement, RenderInfo, UpdateContext, ViewInputs } from "./dialog.ts";
 export { foldDialog } from "./fold.ts";
 //# sourceMappingURL=index.d.ts.map

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

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

package/dist/src/dialog/index.js

@@ -1,2 +1,2 @@
-export { BindActionKeys, Message, Model, OutMessage, close, id, init, isCloseHeld, isOpen, open, sceneMounts, setCloseHeld, update, view, } from "./dialog.js";
+export { BindActionKeys, Message, Model, OutMessage, close, id, init, isOpen, open, sceneMounts, update, view, } from "./dialog.js";
 export { foldDialog } from "./fold.js";

package/dist/src/keyHelp/keyHelp.d.ts

@@ -20,7 +20,6 @@ export declare const Model: Schema.Struct<{
             }>;
             readonly maybeFocusSelector: Schema.Option<Schema.String>;
         }>;
-        readonly isCloseHeld: Schema.Boolean;
     }>;
     readonly query: Schema.String;
 }>;
@@ -106,7 +105,6 @@ export declare const update: (model: Model, message: Message) => Readonly<{
                 };
                 readonly maybeFocusSelector: import("effect/Option").Option<string>;
             };
-            readonly isCloseHeld: boolean;
         };
         readonly query: string;
     };
@@ -184,7 +182,6 @@ export declare const subscriptions: {
                 };
                 readonly maybeFocusSelector: import("effect/Option").Option<string>;
             };
-            readonly isCloseHeld: boolean;
         };
         readonly query: string;
     }, {
@@ -271,7 +268,6 @@ export declare const view: import("foldkit/submodel").View<{
             };
             readonly maybeFocusSelector: import("effect/Option").Option<string>;
         };
-        readonly isCloseHeld: boolean;
     };
     readonly query: string;
 }, {

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

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

package/dist/src/panel/panel.d.ts

@@ -9,6 +9,9 @@ export type ViewConfig = Readonly<{
     id: string;
     /** Pixel caps in the inverted title bar. */
     title: string;
+    /** A quiet IconButton before the title, such as the grip a Sortable of panels hands each
+     *  panel. On the ink bar it prints as `actions` do. */
+    lead?: ReadonlyArray<Html | string>;
     /** A count or state at the title bar's right. */
     meta?: string;
     /** Small Buttons and IconButtons at the title bar's right end, after the meta. On the ink

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

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/panel/panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC;;;;kCAI8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;yFACqF;IACrF,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACvC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,MAAuB,CAAC;AAE7D;gFACgF;AAChF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAmB3E,CAAC"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/panel/panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC;;;;kCAI8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd;2DACuD;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;yFACqF;IACrF,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACvC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,MAAuB,CAAC;AAE7D;gFACgF;AAChF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAoB3E,CAAC"}

package/dist/src/panel/panel.js

@@ -5,9 +5,10 @@ export const titleId = (id) => __foldkitBrandViewResult((`${id}-title`), "@gjerm
 /** The unit of the system: paper in a 2px ink box on a 5px print shadow, under a title bar. A
  *  region landmark (`<section>`) named by its `h2` title, keyed by its `id`. */
 export const view = (config, h) => {
-    const { id, title, meta, actions = [], body, foot = [], isFlush = false } = config;
+    const { id, title, lead = [], meta, actions = [], body, foot = [], isFlush = false } = config;
     return __foldkitBrandViewResult((h.keyed("section")(id, [h.Id(id), h.AriaLabelledBy(titleId(id)), h.Class("panel")], [
         h.header([h.Class("panel-tb")], [
+            ...slotView("span", "panel-lead", lead, h),
             h.h2([h.Id(titleId(id))], [title]),
             ...(meta === undefined ? [] : [h.span([h.Class("meta")], [meta])]),
             ...slotView("span", "panel-acts", actions, h),

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

@@ -954,13 +954,16 @@ export declare const SizeLiftedItem: Mount.MountDefinitionWithArgs<"SizeLiftedIt
 }, {
     readonly _tag: "CompletedSizeLiftedItem";
 }>;
-/** How the items lay out: a column of rows, or tiles that wrap. */
-export type Layout = "List" | "Grid";
+/** How the items lay out: a column of rows, tiles that wrap, or the parent's own panels. */
+export type Layout = "List" | "Grid" | "Panels";
 /** What the list hands `toItemView` for each item. */
 export type ItemRender = Readonly<{
     /** This render is the held copy: hidden from screen readers and inert. Leave out ids and
      *  anything the page must find once. */
     isLifted: boolean;
+    /** The item's grip, for the `"Panels"` layout, where the item places it: in its panel's
+     *  `lead`. The other layouts print it before the item themselves. */
+    grip: Html;
 }>;
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. The `to*` members
  *  are functions because they may carry the parent's handlers. */
@@ -969,16 +972,21 @@ export type ViewInputs = Readonly<{
     /** Names the list for screen readers. */
     label: string;
     /** `"List"` (the default): rows between 1px rules, for a flush panel. `"Grid"`: tiles that
-     *  wrap, 180px and up. */
+     *  wrap, 180px and up. `"Panels"`: each item is a Panel the parent prints, with `render.grip`
+     *  in its `lead`, up to three across in the deck's gutter, 300px and up. */
     layout?: Layout;
+    /** The reader may look but not reorder, as a read-only sign-in: every grip prints held, as
+     *  while moves are held, and nothing lifts. */
+    isReadOnly?: boolean;
     /** One item's content, beside its grip. Also called for the held copy, with
      *  `render.isLifted`. */
     toItemView: (item: Item, render: ItemRender) => ReadonlyArray<Html>;
 }>;
 /**
- * Items the reader puts in order, as rows or as tiles, built on `@foldkit/ui`'s DragAndDrop:
- * `div.sortable` holding `ul.sortable-items` (named by `label`) of `li.sortable-item`, each its
- * grip and the parent's content. The items are the parent's; a drop reports `Moved`.
+ * Items the reader puts in order, as rows, as tiles or as panels, built on `@foldkit/ui`'s
+ * DragAndDrop: `div.sortable` holding `ul.sortable-items` (named by `label`) of
+ * `li.sortable-item`, each its grip and the parent's content (a panel holds its grip in its
+ * title bar). The items are the parent's; a drop reports `Moved`.
  *
  * A mouse drags an item by its body or its grip; touch takes the grip alone, so a finger on
  * an item scrolls the page; the keyboard takes the grip too: Space or Enter picks the item
@@ -1134,8 +1142,12 @@ export declare const view: import("foldkit/submodel").View<{
     /** Names the list for screen readers. */
     label: string;
     /** `"List"` (the default): rows between 1px rules, for a flush panel. `"Grid"`: tiles that
-     *  wrap, 180px and up. */
+     *  wrap, 180px and up. `"Panels"`: each item is a Panel the parent prints, with `render.grip`
+     *  in its `lead`, up to three across in the deck's gutter, 300px and up. */
     layout?: Layout;
+    /** The reader may look but not reorder, as a read-only sign-in: every grip prints held, as
+     *  while moves are held, and nothing lifts. */
+    isReadOnly?: boolean;
     /** One item's content, beside its grip. Also called for the held copy, with
      *  `render.isLifted`. */
     toItemView: (item: Item, render: ItemRender) => ReadonlyArray<Html>;

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

@@ -1 +1 @@
-{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/sortable/sortable.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/sortable/sortable.ts"],"names":[],"mappings":"AACA,OAAO,EAAS,MAAM,EAAS,MAAM,EAAE,MAAM,EAAE,MAAM,EAAQ,MAAM,QAAQ,CAAC;AAC5E,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,EAAa,IAAI,EAAe,MAAM,cAAc,CAAC;AAEjE,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAGvC,OAAO,KAAK,YAAY,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAC;AA0BzC;oDACoD;AACpD,eAAO,MAAM,IAAI;;;EAA6D,CAAC;AAC/E,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC;AAiCpC;iFACiF;AACjF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIhB,CAAC;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAItC,oDAAoD;AACpD,eAAO,MAAM,OAAO;;QACO,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAE9B,MAAM;QACN,SAAS;QACT,OAAO;QACP,OAAO;QACP,OAAO;QACP,OAAO;QACP,KAAK;;;;;;QAEW,MAAM;QAAiB,KAAK;;;;;;QAE5C,OAAO;QACP,OAAO;QACP,OAAO;QACP,OAAO;QACP,UAAU;;;QAGV,OAAO;QACP,OAAO;QACP,OAAO;QACP,OAAO;QACP,UAAU;;;;;;EAMZ,CAAC;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C;;;;0EAI0E;AAC1E,eAAO,MAAM,UAAU;;QAEnB,MAAM;QACN,SAAS;QACT,OAAO;QACP,gBAAgB;QAChB,iBAAiB;;EAEnB,CAAC;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAC;AAIhD;6CAC6C;AAC7C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElD,kEAAkE;AAClE,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAIxC,CAAC;AAOH,0CAA0C;AAC1C,eAAO,MAAM,SAAS,UAAW,KAAK,KAAG,OAC2B,CAAC;AAWrE,2FAA2F;AAC3F,eAAO,MAAM,eAAe;;;;iBAK1B,CAAC;AAIH,KAAK,YAAY,GAAG,MAAM,CAAC,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;AAuN5E,wFAAwF;AACxF,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCjD,CAAC;AAIL;6DAC6D;AAC7D,eAAO,MAAM,UAAU,UAAW,KAAK,aAAa,OAAO,KAAG,YAG7D,CAAC;AAoBF,QAAA,MAAM,WAAW;;;;EAIf,CAAC;AACH,KAAK,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,CAAC;AAU3C,8FAA8F;AAC9F,eAAO,MAAM,eAAe,SAAU,WAAW,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAgBxE,CAAC;AAmDF;;;;6CAI6C;AAC7C,eAAO,MAAM,aAAa,GAAI,MAAM,SAAS,MAAM,aAAa,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGACxB,CAAC;AAI/C;0EAC0E;AAC1E,eAAO,MAAM,cAAc;;;;;;EAQzB,CAAC;AAIH,4FAA4F;AAC5F,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEhD,sDAAsD;AACtD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC;4CACwC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB;yEACqE;IACrE,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC,CAAC;AAEH;kEACkE;AAClE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd;;gFAE4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;mDAC+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;6BACyB;IACzB,UAAU,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,KAAK,aAAa,CAAC,IAAI,CAAC,CAAC;CACrE,CAAC,CAAC;AAyPH;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WApRR,aAAa,CAAC,IAAI,CAAC;IAC1B,yCAAyC;WAClC,MAAM;IACb;;gFAE4E;aACnE,MAAM;IACf;mDAC+C;iBAClC,OAAO;IACpB;6BACyB;gBACb,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,KAAK,aAAa,CAAC,IAAI,CAAC;GAqSnE,CAAC"}

package/dist/src/sortable/sortable.js

@@ -368,9 +368,15 @@ const helpId = (model) => __foldkitBrandViewResult((`${id(model)}-grip-help`), "
 const isHeldItem = (model, itemId) => __foldkitBrandViewResult((UiDragAndDrop.isDragging(model.dragAndDrop) &&
     Option.contains(UiDragAndDrop.maybeDraggedItemId(model.dragAndDrop), itemHook(model, itemId))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#isHeldItem");
 const liftedGrip = (h) => __foldkitBrandViewResult((h.span([h.Class("iconbtn quiet"), h.AriaHidden(true)], [Glyph.view({ name: "grip" }, h)])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#liftedGrip");
-const liftedView = (info, item, h) => __foldkitBrandViewResult((h.div([h.Class("sortable-item lifted")], [liftedGrip(h), h.div([h.Class("sortable-body")], info.toItemView(item, { isLifted: true }))])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#liftedView");
+/** The item's content beside its grip, or, in a layout where the item places its grip,
+ *  alone. */
+const itemContents = (info, item, render, h) => {
+    const body = h.div([h.Class("sortable-body")], info.toItemView(item, render));
+    return __foldkitBrandViewResult((info.layout === "Panels" ? [body] : [render.grip, body]), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemContents");
+};
+const liftedView = (info, item, h) => __foldkitBrandViewResult((h.div([h.Class("sortable-item lifted")], itemContents(info, item, { isLifted: true, grip: liftedGrip(h) }, h))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#liftedView");
 const gripView = (info, item, h) => {
-    const { model, items } = info;
+    const { model, isMovable, items } = info;
     const isIdleNow = phaseOf(model.dragAndDrop) === "Idle";
     const onGripKey = h.OnKeyDownPreventDefault((key) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGripKey({ itemId: item.id, items }), () => __foldkitBrandViewResult((isIdleNow && (key === " " || key === "Enter")), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~36"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~35"));
     // NOTE: @foldkit/ui gap: DragAndDrop's `draggable` bundle forces `role="option"`, which a
@@ -381,19 +387,19 @@ const gripView = (info, item, h) => {
         glyph: "grip",
         label: fill(COPY.gripLabel, item.label),
         isQuiet: true,
-        isDisabled: !model.isMovable,
+        isDisabled: !isMovable,
         attributes: [
             h.DataAttribute("draggable-id", itemHook(model, item.id)),
             h.DataAttribute(GRIP_ATTRIBUTE, ""),
             h.AriaRoleDescription("draggable"),
             h.AriaDescribedBy(helpId(model)),
             Button.pressedAttribute(isHeldItem(model, item.id), h),
-            ...(model.isMovable ? [onGripKey] : []),
+            ...(isMovable ? [onGripKey] : []),
         ],
     }, h)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#gripView");
 };
 const itemAttributes = (info, item, h) => {
-    const { model, items } = info;
+    const { model, isMovable, items } = info;
     const isIdleNow = phaseOf(model.dragAndDrop) === "Idle";
     const onPress = h.OnPointerDown((pointerType, button, screenX, screenY, _time, clientX, clientY, pointerId, target) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedItem({
         itemId: item.id,
@@ -403,10 +409,7 @@ const itemAttributes = (info, item, h) => {
         clientX,
         clientY,
         items,
-    }), () => __foldkitBrandViewResult((isIdleNow &&
-        model.isMovable &&
-        button === LEFT_BUTTON &&
-        isLiftingPress(target, pointerType)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~38"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~37"));
+    }), () => __foldkitBrandViewResult((isIdleNow && isMovable && button === LEFT_BUTTON && isLiftingPress(target, pointerType)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~38"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~37"));
     return __foldkitBrandViewResult(([h.DataAttribute(ITEM_ATTRIBUTE, ""), onPress]), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemAttributes");
 };
 /** Where a pointer would drop the held item, marked on the item it would land beside: before
@@ -425,15 +428,12 @@ const dropClass = (info, item) => __foldkitBrandViewResult((Option.match(Option.
     onNone: () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onNone~5"),
     onSome: ({ side }) => (__foldkitBrandViewResult((side === "Before" ? " drop-before" : " drop-after"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onSome~5")),
 })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#dropClass");
-const itemClass = (info, item) => __foldkitBrandViewResult((`sortable-item${info.model.isMovable ? " movable" : ""}${isHeldItem(info.model, item.id) ? " drag-dim" : ""}${dropClass(info, item)}`), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemClass");
+const itemClass = (info, item) => __foldkitBrandViewResult((`sortable-item${info.isMovable ? " movable" : ""}${isHeldItem(info.model, item.id) ? " drag-dim" : ""}${dropClass(info, item)}`), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemClass");
 const itemView = (info, item, h) => __foldkitBrandViewResult((h.keyed("li")(item.id, [
     ...UiDragAndDrop.sortable(itemHook(info.model, item.id)),
     ...itemAttributes(info, item, h),
     h.Class(itemClass(info, item)),
-], [
-    gripView(info, item, h),
-    h.div([h.Class("sortable-body")], info.toItemView(item, { isLifted: false })),
-])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemView");
+], itemContents(info, item, { isLifted: false, grip: gripView(info, item, h) }, h))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemView");
 /** The items in order, with the held item's copy where the keyboard would drop it: before the
  *  other item at its target, or last. The copy carries no `data-sortable-id`, so it is not
  *  counted as an item. */
@@ -473,10 +473,12 @@ const liftedCopyView = (info, h) => {
         })),
     ], [liftedView(info, held.item, h)])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~57")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#liftedCopyView");
 };
+const layoutClass = (layout) => __foldkitBrandViewResult((Match.value(layout).pipe(Match.withReturnType(), Match.when("List", () => __foldkitBrandViewResult(("sortable"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~58")), Match.when("Grid", () => __foldkitBrandViewResult(("sortable grid"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~59")), Match.when("Panels", () => __foldkitBrandViewResult(("sortable panels"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~60")), Match.exhaustive)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#layoutClass");
 /**
- * Items the reader puts in order, as rows or as tiles, built on `@foldkit/ui`'s DragAndDrop:
- * `div.sortable` holding `ul.sortable-items` (named by `label`) of `li.sortable-item`, each its
- * grip and the parent's content. The items are the parent's; a drop reports `Moved`.
+ * Items the reader puts in order, as rows, as tiles or as panels, built on `@foldkit/ui`'s
+ * DragAndDrop: `div.sortable` holding `ul.sortable-items` (named by `label`) of
+ * `li.sortable-item`, each its grip and the parent's content (a panel holds its grip in its
+ * title bar). The items are the parent's; a drop reports `Moved`.
  *
  * A mouse drags an item by its body or its grip; touch takes the grip alone, so a finger on
  * an item scrolls the page; the keyboard takes the grip too: Space or Enter picks the item
@@ -487,9 +489,16 @@ const liftedCopyView = (info, h) => {
  * the keys.
  */
 export const view = defineView((model, viewInputs, h) => {
-    const { items, label, layout = "List", toItemView } = viewInputs;
-    const info = { model, items, maybeDropMark: dropMarkOf(model), toItemView };
-    return __foldkitBrandViewResult((h.div([h.Class(layout === "Grid" ? "sortable grid" : "sortable")], [
+    const { items, label, layout = "List", isReadOnly = false, toItemView } = viewInputs;
+    const info = {
+        model,
+        layout,
+        isMovable: model.isMovable && !isReadOnly,
+        items,
+        maybeDropMark: dropMarkOf(model),
+        toItemView,
+    };
+    return __foldkitBrandViewResult((h.div([h.Class(layoutClass(layout))], [
         // NOTE: Safari takes list semantics from a list printed without markers, so the list
         // says it is one
         h.ul([
@@ -500,5 +509,5 @@ export const view = defineView((model, viewInputs, h) => {
         ], itemsView(info, h)),
         h.p([h.Id(helpId(model)), h.Class("sr-only")], [COPY.gripHelp]),
         ...liftedCopyView(info, h),
-    ])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~58");
+    ])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~61");
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjermundgaraba-designs/pixel-paper",
-  "version": "0.14.1",
+  "version": "0.16.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/card/card.ts

@@ -102,6 +102,10 @@ export type FormViewConfig<Message> = Omit<
     /** 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>;
+    /** Above the fields, outside the group `isBusy` holds: what the page says about the form
+     *  while it is open (a lost connection with its retry), whose controls stay live while it
+     *  sends. */
+    notices?: 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`. */
@@ -111,9 +115,10 @@ export type FormViewConfig<Message> = Omit<
     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. */
+     *  nothing changes under the send and nothing sends twice. In a Dialog, pass the same state
+     *  as `isCloseHeld` to its update, so Escape and the veil are held too. 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
@@ -128,8 +133,8 @@ export type FormViewConfig<Message> = Omit<
  *  `Focus.Focus({ id: Card.submitId(id) })`. */
 export const submitId = (id: string): string => `${id}-submit`;
 
-/** 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. */
+/** A card that is a form, named by its title, so a form landmark: its notices, its body in
+ *  one Fields group, then cancel and the primary submit button in the action bar. */
 export const formView = <Message>(
   config: FormViewConfig<Message>,
   h: HtmlBuilder<Message>,
@@ -140,6 +145,7 @@ export const formView = <Message>(
     submit,
     cancel,
     closeAttributes,
+    notices = [],
     isBusy = false,
     isSubmitDisabled = false,
     onSubmit,
@@ -182,7 +188,7 @@ export const formView = <Message>(
     childrenView(
       {
         ...config,
-        body: [Fields.view({ body: config.body, isBusy }, h)],
+        body: [...notices, Fields.view({ body: config.body, isBusy }, h)],
         isCloseHeld: isBusy,
         actions: [...cancelButton, submitButton],
       },

package/src/confirmDialog/confirmDialog.ts

@@ -34,7 +34,7 @@ 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 its ways out are held (`setCloseHeld`). */
+ *  the parent's to decide. Never reported while its ways out are held (`Dialog.UpdateContext`). */
 export const OutMessage = defineMessageUnion({
   Confirmed: {},
   Cancelled: {},
@@ -65,32 +65,28 @@ const dialogFold = foldDialog(Dialog, {
   toParentOutMessage: toCancelled,
 });
 
-/** Processes a confirm dialog Message and returns the next Model, Commands and OutMessage. */
-export const update = (model: Model, message: Message) =>
+const FREE: Dialog.UpdateContext = { isCloseHeld: false };
+
+/** Processes a confirm dialog Message and returns the next Model, Commands and OutMessage.
+ *  While `context.isCloseHeld`, cancel, Escape and the veil change nothing. */
+export const update = (model: Model, message: Message, context: Dialog.UpdateContext = FREE) =>
   Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(message, {
-    GotDialogMessage: ({ message: dialogMessage }) => dialogFold.update(model, dialogMessage),
+    GotDialogMessage: ({ message: dialogMessage }) =>
+      dialogFold.updateWith(context)(model, dialogMessage),
     ClickedConfirm: () => ({ model, outMessage: OutMessage.Confirmed() }),
     ClickedCancel: () =>
-      Dialog.isCloseHeld(model.dialog)
+      context.isCloseHeld
         ? { model }
         : pipe(dialogFold.close(model), Update.withOutMessage(OutMessage.Cancelled())),
   });
 
-/** Opens the confirm dialog with its ways out free: focus starts on the action, or on cancel
- *  when it is `isDanger`. */
+/** Opens the confirm dialog: focus starts on the action, or on cancel when it is `isDanger`. */
 export const open = (model: Model): Update.Return<Model, Message> => dialogFold.open(model);
 
-/** Closes the confirm dialog without reporting `Cancelled`, and lets go of a hold: call it
- *  once confirmed work has landed. */
+/** Closes the confirm dialog without reporting `Cancelled`: call it once confirmed work has
+ *  landed. */
 export const close = (model: Model): Update.Return<Model, Message> => dialogFold.close(model);
 
-/** 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: Model, isHeld: boolean): Model =>
-  modifyFields(model, { dialog: (dialog) => Dialog.setCloseHeld(dialog, isHeld) });
-
 // ACCESSORS
 
 /** The confirm dialog's id, unique in the document. */
@@ -99,9 +95,6 @@ export const id = (model: Model): string => Dialog.id(model.dialog);
 /** Whether the confirm dialog is open. */
 export const isOpen = (model: Model): boolean => Dialog.isOpen(model.dialog);
 
-/** Whether its ways out are held (`setCloseHeld`). */
-export const isCloseHeld = (model: Model): boolean => Dialog.isCloseHeld(model.dialog);
-
 // VIEW
 
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
@@ -123,8 +116,9 @@ export type ViewInputs = Readonly<{
   /** Destructive: the confirming button turns red and cancel becomes the default. */
   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 the dialog's ways out are held (`setCloseHeld`). */
+   *  working cursor prints, a second press does nothing) and keeps focus, and cancel is held
+   *  with it. Pair it with `isCloseHeld` in `update`'s context, from the same state, so
+   *  Escape and the veil change nothing either. */
   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
@@ -136,7 +130,6 @@ export type ViewInputs = Readonly<{
 }>;
 
 const cardView = (
-  model: Model,
   viewInputs: ViewInputs,
   render: Dialog.RenderInfo,
   h: HtmlBuilder<Message>,
@@ -159,7 +152,7 @@ const cardView = (
     {
       label: "cancel",
       isDefault: isDanger,
-      isDisabled: Dialog.isCloseHeld(model.dialog),
+      isDisabled: isBusy,
       onClick: Message.ClickedCancel(),
       attributes: isDanger ? render.initialFocus : [],
     },
@@ -199,9 +192,9 @@ const cardView = (
  * arm-then-confirm button: red never rests on a button, and an armed button is easy to
  * 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`. Hold its ways
- * out with `setCloseHeld` too when the reader must stay to see how it ends.
+ * Work that takes a while stays in the dialog: set `isBusy` while it runs (and `isCloseHeld`
+ * in `update`'s context), `close` once it has landed, and on failure keep it open with the
+ * error in `toDetailView`.
  */
 export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html =>
   h.submodel({
@@ -212,7 +205,7 @@ export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h
       isAlert: viewInputs.isDanger ?? false,
       hasDescription: true,
       toLiveRegionView: viewInputs.toLiveRegionView,
-      toView: (render) => cardView(model, viewInputs, render, h),
+      toView: (render) => cardView(viewInputs, render, h),
     },
     toParentMessage: (message) => Message.GotDialogMessage({ message }),
   }),