@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.0

package/dist/dialog/dialog.d.ts

@@ -0,0 +1,278 @@
+import { Option, Schema } from "effect";
+import { ChildAttribute, Html } from "foldkit/html";
+import * as Mount from "foldkit/mount";
+import * as Update from "foldkit/update";
+/** Schema for a pixel-paper dialog: the `@foldkit/ui` Dialog it is built on. */
+export declare const Model: Schema.Struct<{
+  readonly dialog: Schema.Struct<{
+    readonly id: Schema.String;
+    readonly isOpen: Schema.Boolean;
+    readonly isAnimated: Schema.Boolean;
+    readonly animation: Schema.Struct<{
+      readonly id: Schema.String;
+      readonly isShowing: Schema.Boolean;
+      readonly transitionState: Schema.Literals<readonly ["Idle", "EnterStart", "EnterAnimating", "LeaveStart", "LeaveAnimating"]>;
+      readonly transitionGeneration: Schema.Number;
+    }>;
+    readonly maybeFocusSelector: Schema.Option<Schema.String>;
+  }>;
+}>;
+export type Model = typeof Model.Type;
+/** Where the card hangs: `Center`, or `Top`, 18% down, for a command palette. */
+export declare const Placement: Schema.Literals<readonly ["Center", "Top"]>;
+export type Placement = typeof Placement.Type;
+/** Union of all Messages a dialog can produce. `PressedActionKey` is a key in the action bar
+ *  that moved focus there (the Mount already moved it); nothing in the Model follows it. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+  readonly GotDialogMessage: {
+    message: import("foldkit/message").MessageUnion<{
+      readonly RequestedOpen: {};
+      readonly RequestedClose: {};
+      readonly SucceededShowDialog: {};
+      readonly FailedShowDialog: {};
+      readonly SucceededAcquireResources: {};
+      readonly FailedAcquireResources: {};
+      readonly CompletedCloseDialog: {};
+      readonly Unmounted: {};
+      readonly CompletedReleaseDialogResources: {};
+      readonly GotAnimationMessage: {
+        message: import("foldkit/message").MessageUnion<{
+          readonly Showed: {};
+          readonly Hid: {};
+          readonly CompletedWaitForPaint: {
+            generation: Schema.Number;
+          };
+          readonly EndedAnimation: {
+            generation: Schema.Number;
+          };
+        }>;
+      };
+    }>;
+  };
+  readonly PressedActionKey: {
+    direction: Schema.Literals<readonly ["Previous", "Next"]>;
+  };
+}>;
+export type Message = typeof Message.Type;
+/** Union of OutMessages a dialog reports to its parent: the reader closed it (Escape, a click
+ *  on the veil, a close button). `open` and `close`, which the parent calls, report nothing. */
+export declare const OutMessage: import("foldkit/message").MessageUnion<{
+  readonly Closed: {};
+}>;
+export type OutMessage = typeof OutMessage.Type;
+/** Configuration for creating a dialog with `init`. The `id` must be unique in the document. */
+export type InitConfig = Readonly<{
+  id: string;
+}>;
+/** Creates a closed dialog. */
+export declare const init: (config: InitConfig) => Model;
+/** The dialog's id, unique in the document. */
+export declare const id: (model: Model) => string;
+/** Whether the dialog is open. */
+export declare const isOpen: (model: Model) => boolean;
+/** What a dialog's update reads from its parent as a Message arrives. */
+export type UpdateContext = Readonly<{
+  /** The reader may not walk away from the work running now (a save whose failure must land
+   *  in this dialog): Escape, a press on the veil and a control given the `closeButton` group
+   *  change nothing and report no `Closed`. Read it from the parent's own state as the
+   *  Message arrives (`isSaving(model)`), so it holds exactly while the work runs, however
+   *  soon after the start a key comes. */
+  isCloseHeld: boolean;
+}>;
+/** Processes a dialog Message and returns the next Model, Commands and OutMessage. */
+export declare const update: (model: Model, message: Message, context?: UpdateContext) => Readonly<{
+  model: {
+    readonly dialog: {
+      readonly id: string;
+      readonly isOpen: boolean;
+      readonly isAnimated: boolean;
+      readonly animation: {
+        readonly id: string;
+        readonly isShowing: boolean;
+        readonly transitionState: "EnterAnimating" | "EnterStart" | "Idle" | "LeaveAnimating" | "LeaveStart";
+        readonly transitionGeneration: number;
+      };
+      readonly maybeFocusSelector: Option.Option<string>;
+    };
+  };
+  commands?: Update.Commands<{
+    readonly _tag: "GotDialogMessage";
+    readonly message: {
+      readonly _tag: "CompletedCloseDialog";
+    } | {
+      readonly _tag: "CompletedReleaseDialogResources";
+    } | {
+      readonly _tag: "FailedAcquireResources";
+    } | {
+      readonly _tag: "FailedShowDialog";
+    } | {
+      readonly _tag: "GotAnimationMessage";
+      readonly message: {
+        readonly _tag: "CompletedWaitForPaint";
+        readonly generation: number;
+      } | {
+        readonly _tag: "EndedAnimation";
+        readonly generation: number;
+      } | {
+        readonly _tag: "Hid";
+      } | {
+        readonly _tag: "Showed";
+      };
+    } | {
+      readonly _tag: "RequestedClose";
+    } | {
+      readonly _tag: "RequestedOpen";
+    } | {
+      readonly _tag: "SucceededAcquireResources";
+    } | {
+      readonly _tag: "SucceededShowDialog";
+    } | {
+      readonly _tag: "Unmounted";
+    };
+  } | {
+    readonly _tag: "PressedActionKey";
+    readonly direction: "Next" | "Previous";
+  }, never>;
+  outMessage?: {
+    readonly _tag: "Closed";
+  };
+}>;
+/** 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 declare const open: (model: Model) => Update.Return<Model, Message>;
+/** Closes the dialog without reporting `Closed`. */
+export declare const close: (model: Model) => Update.Return<Model, Message>;
+/** The action bar's keys: h or ←, and l or →, move focus between its actions (see
+ *  `moveActionFocus`). Attached by the `actionBar` group. In a Scene, resolve it with
+ *  `sceneMounts`. */
+export declare const BindActionKeys: Mount.MountDefinitionNoArgs<"BindActionKeys", {
+  readonly _tag: "PressedActionKey";
+  readonly direction: "Next" | "Previous";
+}>;
+/** What a parent's Scene resolves an open dialog's Mounts with (`@foldkit/ui`'s resources,
+ *  then the action bar's keys), each with a Message that changes nothing:
+ *  `Scene.Mount.resolveAll(...Dialog.sceneMounts)`. It serves every dialog built on this one
+ *  (ConfirmDialog, KeyHelp, CommandPalette), since a Scene lifts the Messages for it. */
+export declare const sceneMounts: readonly [readonly [Mount.MountDefinitionWithArgs<"AcquireResources", {
+  id: Schema.String;
+  focusSelector: Schema.String;
+}, {
+  readonly _tag: "SucceededAcquireResources";
+} | {
+  readonly _tag: "FailedAcquireResources";
+}>, {
+  readonly _tag: "SucceededAcquireResources";
+}], readonly [Mount.MountDefinitionNoArgs<"BindActionKeys", {
+  readonly _tag: "PressedActionKey";
+  readonly direction: "Next" | "Previous";
+}>, {
+  readonly _tag: "PressedActionKey";
+  readonly direction: "Next" | "Previous";
+}]];
+/** Attribute groups a dialog hands its content. Spread each onto the element it names; a Card
+ *  takes `title` and `actionBar` directly. None of them carries a class. */
+export type RenderInfo = Readonly<{
+  /** The heading that names the dialog. Leave it unspread when the dialog has a `label`. */
+  title: readonly ChildAttribute[];
+  /** The text that says what the dialog asks; set `hasDescription` when it is rendered. */
+  description: readonly ChildAttribute[];
+  /** The control that takes focus when the dialog opens. */
+  initialFocus: readonly ChildAttribute[];
+  /** A control that closes the dialog: a close glyph, a cancel button. */
+  closeButton: readonly ChildAttribute[];
+  /** The card's action bar: h or ←, and l or →, move focus between its actions. */
+  actionBar: readonly ChildAttribute[];
+}>;
+/** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
+export type ViewInputs = Readonly<{
+  /** The dialog's content, one Card. A function because it receives the attribute groups. */
+  toView: (render: RenderInfo) => Html;
+  /** The dialog's name when no heading in it says it (a command palette): printed for
+   *  screen readers only. Otherwise the content's heading names it, through `title`. */
+  label?: string;
+  /** An alert dialog: a question that interrupts, such as a confirm. */
+  isAlert?: boolean;
+  placement?: Placement;
+  hasDescription?: boolean;
+  /** The page's live region (`Announcer.view`) and toast stack, while this is the topmost
+   *  open dialog: the page outside it is inert and hidden from screen readers. Rendered
+   *  inside the dialog, outside the card. A function, so markup with the application's
+   *  handlers (the toasts' buttons) is built in the application's boundary. `undefined` while
+   *  another dialog is the topmost: the application decides the host on every render. */
+  toLiveRegionView?: (() => Html) | undefined;
+}>;
+/**
+ * A modal dialog on the ink veil with its checker grain, built on `@foldkit/ui`'s Dialog. It
+ * opens with `show()` in place, not in the top layer: Foldkit makes the page behind it inert
+ * and hidden from screen readers, traps focus, closes it on Escape and on a click on the veil
+ * (`.veil-backdrop`, under `.veil-pad`, which lets a click through everywhere but on the
+ * card), and returns focus on close. The content comes from `toView`, usually one Card given
+ * the `title` and `actionBar` groups.
+ */
+export declare const view: import("foldkit/submodel").View<{
+  readonly dialog: {
+    readonly id: string;
+    readonly isOpen: boolean;
+    readonly isAnimated: boolean;
+    readonly animation: {
+      readonly id: string;
+      readonly isShowing: boolean;
+      readonly transitionState: "EnterAnimating" | "EnterStart" | "Idle" | "LeaveAnimating" | "LeaveStart";
+      readonly transitionGeneration: number;
+    };
+    readonly maybeFocusSelector: Option.Option<string>;
+  };
+}, {
+  readonly _tag: "GotDialogMessage";
+  readonly message: {
+    readonly _tag: "CompletedCloseDialog";
+  } | {
+    readonly _tag: "CompletedReleaseDialogResources";
+  } | {
+    readonly _tag: "FailedAcquireResources";
+  } | {
+    readonly _tag: "FailedShowDialog";
+  } | {
+    readonly _tag: "GotAnimationMessage";
+    readonly message: {
+      readonly _tag: "CompletedWaitForPaint";
+      readonly generation: number;
+    } | {
+      readonly _tag: "EndedAnimation";
+      readonly generation: number;
+    } | {
+      readonly _tag: "Hid";
+    } | {
+      readonly _tag: "Showed";
+    };
+  } | {
+    readonly _tag: "RequestedClose";
+  } | {
+    readonly _tag: "RequestedOpen";
+  } | {
+    readonly _tag: "SucceededAcquireResources";
+  } | {
+    readonly _tag: "SucceededShowDialog";
+  } | {
+    readonly _tag: "Unmounted";
+  };
+} | {
+  readonly _tag: "PressedActionKey";
+  readonly direction: "Next" | "Previous";
+}, Readonly<{
+  /** The dialog's content, one Card. A function because it receives the attribute groups. */
+  toView: (render: RenderInfo) => Html;
+  /** The dialog's name when no heading in it says it (a command palette): printed for
+   *  screen readers only. Otherwise the content's heading names it, through `title`. */
+  label?: string;
+  /** An alert dialog: a question that interrupts, such as a confirm. */
+  isAlert?: boolean;
+  placement?: Placement;
+  hasDescription?: boolean;
+  /** The page's live region (`Announcer.view`) and toast stack, while this is the topmost
+   *  open dialog: the page outside it is inert and hidden from screen readers. Rendered
+   *  inside the dialog, outside the card. A function, so markup with the application's
+   *  handlers (the toasts' buttons) is built in the application's boundary. `undefined` while
+   *  another dialog is the topmost: the application decides the host on every render. */
+  toLiveRegionView?: (() => Html) | undefined;
+}>>;

package/dist/dialog/dialog.js

@@ -0,0 +1,145 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { isPlain } from "../keys/keys.js";
+import { foldDialog } from "./fold.js";
+import { Array, Match, Option, Schema, pipe } from "effect";
+import { defineMessageUnion } from "foldkit/message";
+import { Dialog } from "@foldkit/ui";
+import { childAttributes } from "foldkit/html";
+import * as Mount from "foldkit/mount";
+import { modifyFields } from "foldkit/struct";
+import { defineView } from "foldkit/submodel";
+import * as Dom from "foldkit/dom";
+import { constUndefined } from "effect/Function";
+// src/dialog/dialog.ts
+var dialog_exports = /* @__PURE__ */ __exportAll({
+	BindActionKeys: () => __foldkitBrandViewResult((BindActionKeys), "@gjermundgaraba/pixel-paper/dialog/dialog.js#BindActionKeys"),
+	FREE: () => __foldkitBrandViewResult((FREE), "@gjermundgaraba/pixel-paper/dialog/dialog.js#FREE"),
+	Message: () => __foldkitBrandViewResult((Message), "@gjermundgaraba/pixel-paper/dialog/dialog.js#Message"),
+	Model: () => __foldkitBrandViewResult((Model), "@gjermundgaraba/pixel-paper/dialog/dialog.js#Model"),
+	OutMessage: () => __foldkitBrandViewResult((OutMessage), "@gjermundgaraba/pixel-paper/dialog/dialog.js#OutMessage"),
+	Placement: () => __foldkitBrandViewResult((Placement), "@gjermundgaraba/pixel-paper/dialog/dialog.js#Placement"),
+	close: () => __foldkitBrandViewResult((close), "@gjermundgaraba/pixel-paper/dialog/dialog.js#close"),
+	id: () => __foldkitBrandViewResult((id), "@gjermundgaraba/pixel-paper/dialog/dialog.js#id"),
+	init: () => __foldkitBrandViewResult((init), "@gjermundgaraba/pixel-paper/dialog/dialog.js#init"),
+	isOpen: () => __foldkitBrandViewResult((isOpen), "@gjermundgaraba/pixel-paper/dialog/dialog.js#isOpen"),
+	moveActionFocus: () => __foldkitBrandViewResult((moveActionFocus), "@gjermundgaraba/pixel-paper/dialog/dialog.js#moveActionFocus"),
+	open: () => __foldkitBrandViewResult((open), "@gjermundgaraba/pixel-paper/dialog/dialog.js#open"),
+	sceneMounts: () => __foldkitBrandViewResult((sceneMounts), "@gjermundgaraba/pixel-paper/dialog/dialog.js#sceneMounts"),
+	update: () => __foldkitBrandViewResult((update), "@gjermundgaraba/pixel-paper/dialog/dialog.js#update"),
+	view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/dialog/dialog.js#view")
+});
+/** Schema for a pixel-paper dialog: the `@foldkit/ui` Dialog it is built on. */
+const Model = Schema.Struct({ dialog: Dialog.Model });
+const ActionDirection = Schema.Literals(["Previous", "Next"]);
+/** Where the card hangs: `Center`, or `Top`, 18% down, for a command palette. */
+const Placement = Schema.Literals(["Center", "Top"]);
+/** Union of all Messages a dialog can produce. `PressedActionKey` is a key in the action bar
+*  that moved focus there (the Mount already moved it); nothing in the Model follows it. */
+const Message = defineMessageUnion({
+	GotDialogMessage: { message: Dialog.Message },
+	PressedActionKey: { direction: ActionDirection }
+});
+/** Union of OutMessages a dialog reports to its parent: the reader closed it (Escape, a click
+*  on the veil, a close button). `open` and `close`, which the parent calls, report nothing. */
+const OutMessage = defineMessageUnion({ Closed: {} });
+/** Creates a closed dialog. */
+const init = (config) => (__foldkitBrandViewResult(({ dialog: Dialog.init({ id: config.id }) }), "@gjermundgaraba/pixel-paper/dialog/dialog.js#init~2"));
+/** The dialog's id, unique in the document. */
+const id = (model) => __foldkitBrandViewResult((model.dialog.id), "@gjermundgaraba/pixel-paper/dialog/dialog.js#id~2");
+/** Whether the dialog is open. */
+const isOpen = (model) => __foldkitBrandViewResult((model.dialog.isOpen), "@gjermundgaraba/pixel-paper/dialog/dialog.js#isOpen~2");
+const toOutMessage = Dialog.OutMessage.match({
+	Opened: constUndefined,
+	Closed: () => __foldkitBrandViewResult((OutMessage.Closed()), "@gjermundgaraba/pixel-paper/dialog/dialog.js#Closed")
+});
+const dialogFold = foldDialog(Dialog, {
+	read: (model) => __foldkitBrandViewResult((model.dialog), "@gjermundgaraba/pixel-paper/dialog/dialog.js#read"),
+	write: (model, nextDialog) => __foldkitBrandViewResult((modifyFields(model, { dialog: () => __foldkitBrandViewResult((nextDialog), "@gjermundgaraba/pixel-paper/dialog/dialog.js#dialog") })), "@gjermundgaraba/pixel-paper/dialog/dialog.js#write"),
+	toParentMessage: (message) => __foldkitBrandViewResult((Message.GotDialogMessage({ message })), "@gjermundgaraba/pixel-paper/dialog/dialog.js#toParentMessage"),
+	toParentOutMessage: toOutMessage
+});
+const FREE = { isCloseHeld: false };
+const isHeldClose = (context, message) => __foldkitBrandViewResult((context.isCloseHeld && message._tag === "RequestedClose"), "@gjermundgaraba/pixel-paper/dialog/dialog.js#isHeldClose");
+/** Processes a dialog Message and returns the next Model, Commands and OutMessage. */
+const update = (model, message, context = FREE) => __foldkitBrandViewResult((Message.match(message, {
+	GotDialogMessage: ({ message: dialogMessage }) => __foldkitBrandViewResult((isHeldClose(context, dialogMessage) ? { model } : dialogFold.update(model, dialogMessage)), "@gjermundgaraba/pixel-paper/dialog/dialog.js#GotDialogMessage"),
+	PressedActionKey: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/dialog/dialog.js#PressedActionKey"))
+})), "@gjermundgaraba/pixel-paper/dialog/dialog.js#update~2");
+/** 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. */
+const open = (model) => __foldkitBrandViewResult((dialogFold.open(model)), "@gjermundgaraba/pixel-paper/dialog/dialog.js#open~2");
+/** Closes the dialog without reporting `Closed`. */
+const close = (model) => __foldkitBrandViewResult((dialogFold.close(model)), "@gjermundgaraba/pixel-paper/dialog/dialog.js#close~2");
+const ACTION_BAR_ATTRIBUTE = "data-pixel-paper-action-bar";
+const ACTION_SELECTOR = "button:not(:disabled), a[href]";
+const isInBarItself = (bar, action) => __foldkitBrandViewResult((action.closest(`[${ACTION_BAR_ATTRIBUTE}]`) === bar), "@gjermundgaraba/pixel-paper/dialog/dialog.js#isInBarItself");
+const isInBarsDialog = (bar, action) => __foldkitBrandViewResult((action.closest("dialog") === bar.closest("dialog")), "@gjermundgaraba/pixel-paper/dialog/dialog.js#isInBarsDialog");
+const isOutsidePopover = (action) => __foldkitBrandViewResult((action.closest("[popover]") === null), "@gjermundgaraba/pixel-paper/dialog/dialog.js#isOutsidePopover");
+const ownedActions = (bar) => __foldkitBrandViewResult((Array.filter(Array.fromIterable(bar.querySelectorAll(ACTION_SELECTOR)), (action) => __foldkitBrandViewResult((isInBarItself(bar, action) && isInBarsDialog(bar, action) && isOutsidePopover(action)), "@gjermundgaraba/pixel-paper/dialog/dialog.js#anonymous"))), "@gjermundgaraba/pixel-paper/dialog/dialog.js#ownedActions");
+const isUnhandledPlainKey = (event) => __foldkitBrandViewResult((!event.isComposing && !event.defaultPrevented && isPlain(event)), "@gjermundgaraba/pixel-paper/dialog/dialog.js#isUnhandledPlainKey");
+const actionBeside = (actions, target, direction) => __foldkitBrandViewResult((Option.flatMap(Array.findFirstIndex(actions, (action) => __foldkitBrandViewResult((action === target), "@gjermundgaraba/pixel-paper/dialog/dialog.js#anonymous~2")), (index) => __foldkitBrandViewResult((Array.get(actions, index + (direction === "Previous" ? -1 : 1))), "@gjermundgaraba/pixel-paper/dialog/dialog.js#anonymous~3"))), "@gjermundgaraba/pixel-paper/dialog/dialog.js#actionBeside");
+const toActionDirection = (key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.withReturnType(), Match.whenOr("h", "ArrowLeft", () => __foldkitBrandViewResult((Option.some("Previous")), "@gjermundgaraba/pixel-paper/dialog/dialog.js#anonymous~4")), Match.whenOr("l", "ArrowRight", () => __foldkitBrandViewResult((Option.some("Next")), "@gjermundgaraba/pixel-paper/dialog/dialog.js#anonymous~5")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/dialog/dialog.js#anonymous~6")))), "@gjermundgaraba/pixel-paper/dialog/dialog.js#toActionDirection");
+const moveActionFocus = (bar, event) => {
+	if (!isUnhandledPlainKey(event)) return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/dialog/dialog.js#moveActionFocus~2");
+	return __foldkitBrandViewResult((pipe(toActionDirection(event.key), Option.flatMap((direction) => __foldkitBrandViewResult((Option.map(actionBeside(ownedActions(bar), event.target, direction), (next) => {
+		event.preventDefault();
+		next.focus();
+		return __foldkitBrandViewResult((direction), "@gjermundgaraba/pixel-paper/dialog/dialog.js#anonymous~8");
+	})), "@gjermundgaraba/pixel-paper/dialog/dialog.js#anonymous~7")))), "@gjermundgaraba/pixel-paper/dialog/dialog.js#moveActionFocus~2");
+};
+/** The action bar's keys: h or ←, and l or →, move focus between its actions (see
+*  `moveActionFocus`). Attached by the `actionBar` group. In a Scene, resolve it with
+*  `sceneMounts`. */
+const BindActionKeys = Mount.defineStream("BindActionKeys", {
+	messages: [Message.PressedActionKey],
+	execute: ({ element }) => __foldkitBrandViewResult((Dom.streamFromEventFilterMap({
+		target: element,
+		type: "keydown",
+		filterMapEvent: (event) => __foldkitBrandViewResult((Option.map(moveActionFocus(element, event), (direction) => __foldkitBrandViewResult((Message.PressedActionKey({ direction })), "@gjermundgaraba/pixel-paper/dialog/dialog.js#anonymous~9"))), "@gjermundgaraba/pixel-paper/dialog/dialog.js#filterMapEvent")
+	})), "@gjermundgaraba/pixel-paper/dialog/dialog.js#execute")
+});
+/** What a parent's Scene resolves an open dialog's Mounts with (`@foldkit/ui`'s resources,
+*  then the action bar's keys), each with a Message that changes nothing:
+*  `Scene.Mount.resolveAll(...Dialog.sceneMounts)`. It serves every dialog built on this one
+*  (ConfirmDialog, KeyHelp, CommandPalette), since a Scene lifts the Messages for it. */
+const sceneMounts = [[Dialog.AcquireResources, Dialog.Message.SucceededAcquireResources()], [BindActionKeys, Message.PressedActionKey({ direction: "Next" })]];
+/**
+* A modal dialog on the ink veil with its checker grain, built on `@foldkit/ui`'s Dialog. It
+* opens with `show()` in place, not in the top layer: Foldkit makes the page behind it inert
+* and hidden from screen readers, traps focus, closes it on Escape and on a click on the veil
+* (`.veil-backdrop`, under `.veil-pad`, which lets a click through everywhere but on the
+* card), and returns focus on close. The content comes from `toView`, usually one Card given
+* the `title` and `actionBar` groups.
+*/
+const view = defineView((model, viewInputs, h) => {
+	const { toView, label, isAlert = false, placement = "Center", hasDescription = false, toLiveRegionView } = viewInputs;
+	const actionBar = childAttributes([h.Attribute(ACTION_BAR_ATTRIBUTE, ""), h.OnMount(BindActionKeys())]);
+	const veilView = (render) => __foldkitBrandViewResult((h.dialog([
+		...render.dialog,
+		...isAlert ? [h.Role("alertdialog")] : [],
+		h.Class("veil")
+	], render.isVisible ? [
+		h.div([...render.backdrop, h.Class("veil-backdrop")]),
+		...label === void 0 ? [] : [h.span([...render.title, h.Class("sr-only")], [label])],
+		h.div([...render.panel, h.Class(placement === "Top" ? "veil-pad top" : "veil-pad")], [toView({
+			title: render.title,
+			description: render.description,
+			initialFocus: render.initialFocus,
+			closeButton: render.closeButton,
+			actionBar
+		})]),
+		...toLiveRegionView === void 0 ? [] : [toLiveRegionView()]
+	] : [])), "@gjermundgaraba/pixel-paper/dialog/dialog.js#veilView");
+	return __foldkitBrandViewResult((h.submodel({
+		slotId: id(model),
+		model: model.dialog,
+		view: Dialog.view,
+		viewInputs: {
+			hasDescription,
+			toView: veilView
+		},
+		toParentMessage: (message) => __foldkitBrandViewResult((Message.GotDialogMessage({ message })), "@gjermundgaraba/pixel-paper/dialog/dialog.js#toParentMessage~2")
+	})), "@gjermundgaraba/pixel-paper/dialog/dialog.js#anonymous~10");
+});
+export { BindActionKeys, FREE, Message, Model, OutMessage, Placement, close, dialog_exports, id, init, isOpen, moveActionFocus, open, sceneMounts, update, view };

package/dist/dialog/fold.d.ts

@@ -0,0 +1,58 @@
+import { UpdateContext } from "./dialog.js";
+import * as Update from "foldkit/update";
+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). */
+export type DialogChild<ChildModel, ChildMessage, ChildOutMessage> = Readonly<{
+  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>;
+}>;
+/** Where the parent keeps its dialog, and what the dialog's Messages and OutMessages become. */
+export type DialogFoldConfig<ParentModel, ParentMessage, ParentOutMessage, ChildModel, ChildMessage, ChildOutMessage> = Readonly<{
+  read: (model: ParentModel) => ChildModel;
+  write: (model: ParentModel, nextDialog: ChildModel) => ParentModel;
+  toParentMessage: (message: ChildMessage) => ParentMessage;
+  /** The parent's OutMessage for one the dialog reports from its own update (Escape, the
+   *  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. */
+export 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>;
+}>;
+/** Folds a dialog a parent always holds (`Dialog`, `ConfirmDialog`, `@foldkit/ui`'s Dialog):
+ *  its update, `open` and `close`, each lifted into the parent's Model and Messages, in place
+ *  of a `foldChild` and two `foldChildStep`s.
+ *
+ *  ```ts
+ *  const dialogFold = Dialog.foldDialog(Dialog, {
+ *    read: (model: Model) => model.dialog,
+ *    write: (model: Model, dialog: Dialog.Model) => modifyFields(model, { dialog: () => dialog }),
+ *    toParentMessage: (message: Dialog.Message): Message => Message.GotDialogMessage({ message }),
+ *  });
+ *  ```
+ *
+ *  `toParentMessage` returns the parent's whole Message, so the steps compose with the
+ *  parent's own in `Update.combine`.
+ *
+ *  A step the parent asked for reports nothing: `open` and `close` return the next Model and
+ *  Commands, and the parent, which called them, attaches its own OutMessage where it has one
+ *  (`pipe(dialogFold.close(model), Update.withOutMessage(…))`). Only the dialog's own Escape,
+ *  veil or close button reports, through `update`, and only when `toParentOutMessage` is
+ *  given; without it `update` reports nothing either.
+ *
+ *  A parent that acts on what the dialog reports by changing its own Model (a ConfirmDialog's
+ *  `Confirmed`) folds that update with `Update.foldChild` and its `foldOutMessage`. */
+export declare const foldDialog: <ParentModel, ParentMessage, ChildModel, ChildMessage, ChildOutMessage, ParentOutMessage = never>(child: DialogChild<ChildModel, ChildMessage, ChildOutMessage>, config: DialogFoldConfig<ParentModel, ParentMessage, ParentOutMessage, ChildModel, ChildMessage, ChildOutMessage>) => DialogFold<ParentModel, ParentMessage, ParentOutMessage, ChildMessage>;
+export {};

package/dist/dialog/fold.js

@@ -0,0 +1,63 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Option } from "effect";
+import * as Update from "foldkit/update";
+// src/dialog/fold.ts
+/** Folds a dialog a parent always holds (`Dialog`, `ConfirmDialog`, `@foldkit/ui`'s Dialog):
+*  its update, `open` and `close`, each lifted into the parent's Model and Messages, in place
+*  of a `foldChild` and two `foldChildStep`s.
+*
+*  ```ts
+*  const dialogFold = Dialog.foldDialog(Dialog, {
+*    read: (model: Model) => model.dialog,
+*    write: (model: Model, dialog: Dialog.Model) => modifyFields(model, { dialog: () => dialog }),
+*    toParentMessage: (message: Dialog.Message): Message => Message.GotDialogMessage({ message }),
+*  });
+*  ```
+*
+*  `toParentMessage` returns the parent's whole Message, so the steps compose with the
+*  parent's own in `Update.combine`.
+*
+*  A step the parent asked for reports nothing: `open` and `close` return the next Model and
+*  Commands, and the parent, which called them, attaches its own OutMessage where it has one
+*  (`pipe(dialogFold.close(model), Update.withOutMessage(…))`). Only the dialog's own Escape,
+*  veil or close button reports, through `update`, and only when `toParentOutMessage` is
+*  given; without it `update` reports nothing either.
+*
+*  A parent that acts on what the dialog reports by changing its own Model (a ConfirmDialog's
+*  `Confirmed`) folds that update with `Update.foldChild` and its `foldOutMessage`. */
+const foldDialog = (child, config) => {
+	const lift = {
+		read: (model) => __foldkitBrandViewResult((Option.some(config.read(model))), "@gjermundgaraba/pixel-paper/dialog/fold.js#read"),
+		write: config.write,
+		toParentMessage: config.toParentMessage
+	};
+	const foldOutMessage = () => __foldkitBrandViewResult(((model) => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/dialog/fold.js#anonymous"))), "@gjermundgaraba/pixel-paper/dialog/fold.js#foldOutMessage");
+	const { toParentOutMessage, isCloseHeld = () => __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/dialog/fold.js#anonymous~2") } = config;
+	const updateWith = (context) => {
+		const childUpdate = (model, message) => __foldkitBrandViewResult((child.update(model, message, context)), "@gjermundgaraba/pixel-paper/dialog/fold.js#childUpdate");
+		return __foldkitBrandViewResult((toParentOutMessage === void 0 ? Update.foldChild({
+			update: childUpdate,
+			...lift,
+			foldOutMessage
+		}) : Update.foldChild({
+			update: childUpdate,
+			...lift,
+			toParentOutMessage
+		})), "@gjermundgaraba/pixel-paper/dialog/fold.js#updateWith");
+	};
+	return __foldkitBrandViewResult(({
+		update: (model, message) => __foldkitBrandViewResult((updateWith({ isCloseHeld: isCloseHeld(model) })(model, message)), "@gjermundgaraba/pixel-paper/dialog/fold.js#update"),
+		updateWith,
+		open: Update.foldChildStep({
+			update: child.open,
+			...lift,
+			foldOutMessage
+		}),
+		close: Update.foldChildStep({
+			update: child.close,
+			...lift,
+			foldOutMessage
+		})
+	}), "@gjermundgaraba/pixel-paper/dialog/fold.js#foldDialog");
+};
+export { foldDialog };

package/dist/dialog/index.d.ts

@@ -0,0 +1,6 @@
+import { BindActionKeys, InitConfig, Message, Model, OutMessage, RenderInfo, UpdateContext, ViewInputs, close, id, init, isOpen, open, sceneMounts, update, view } from "./dialog.js";
+import { foldDialog } from "./fold.js";
+declare namespace index_d_exports {
+  export { BindActionKeys, InitConfig, Message, Model, OutMessage, RenderInfo, UpdateContext, ViewInputs, close, foldDialog, id, init, isOpen, open, sceneMounts, update, view };
+}
+export { BindActionKeys, type InitConfig, Message, Model, OutMessage, type RenderInfo, type UpdateContext, type ViewInputs, close, foldDialog, id, index_d_exports, init, isOpen, open, sceneMounts, update, view };

package/dist/dialog/index.js

@@ -0,0 +1,21 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { foldDialog } from "./fold.js";
+import { BindActionKeys, Message, Model, OutMessage, close, id, init, isOpen, open, sceneMounts, update, view } from "./dialog.js";
+// src/dialog/index.ts
+var dialog_exports = /* @__PURE__ */ __exportAll({
+	BindActionKeys: () => __foldkitBrandViewResult((BindActionKeys), "@gjermundgaraba/pixel-paper/dialog/index.js#BindActionKeys"),
+	Message: () => __foldkitBrandViewResult((Message), "@gjermundgaraba/pixel-paper/dialog/index.js#Message"),
+	Model: () => __foldkitBrandViewResult((Model), "@gjermundgaraba/pixel-paper/dialog/index.js#Model"),
+	OutMessage: () => __foldkitBrandViewResult((OutMessage), "@gjermundgaraba/pixel-paper/dialog/index.js#OutMessage"),
+	close: () => __foldkitBrandViewResult((close), "@gjermundgaraba/pixel-paper/dialog/index.js#close"),
+	foldDialog: () => __foldkitBrandViewResult((foldDialog), "@gjermundgaraba/pixel-paper/dialog/index.js#foldDialog"),
+	id: () => __foldkitBrandViewResult((id), "@gjermundgaraba/pixel-paper/dialog/index.js#id"),
+	init: () => __foldkitBrandViewResult((init), "@gjermundgaraba/pixel-paper/dialog/index.js#init"),
+	isOpen: () => __foldkitBrandViewResult((isOpen), "@gjermundgaraba/pixel-paper/dialog/index.js#isOpen"),
+	open: () => __foldkitBrandViewResult((open), "@gjermundgaraba/pixel-paper/dialog/index.js#open"),
+	sceneMounts: () => __foldkitBrandViewResult((sceneMounts), "@gjermundgaraba/pixel-paper/dialog/index.js#sceneMounts"),
+	update: () => __foldkitBrandViewResult((update), "@gjermundgaraba/pixel-paper/dialog/index.js#update"),
+	view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/dialog/index.js#view")
+});
+export { BindActionKeys, Message, Model, OutMessage, close, dialog_exports, foldDialog, id, init, isOpen, open, sceneMounts, update, view };

package/dist/disclosure/disclosure.d.ts

@@ -0,0 +1,24 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a disclosure with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  /** Unique in the document; the button's and the body's ids derive from it. */
+  id: string;
+  /** What opens, in pixel caps (`"edit grants"`, `"danger zone"`): the button's name. */
+  label: string;
+  /** Whether it is open, from the parent's Model. */
+  isOpen: boolean;
+  /** Dispatched with the new state when the line is pressed, or Enter or Space is pressed on
+   *  it. Store it and pass it back in as `isOpen`. */
+  onToggle: (isOpen: boolean) => Message;
+  /** What hangs under the line while it is open. It stays on the page while closed (hidden),
+   *  so a field in it keeps what was typed. */
+  body: ReadonlyArray<Html | string>;
+}>;
+/**
+ * A line that opens what is under it, built on `@foldkit/ui`'s Disclosure: the parent owns
+ * whether it is open. `div.disclosure > button.disclosure-summary[aria-expanded]` (the caret
+ * and the label) and `div.disclosure-body`, which hangs from the caret on a 1px
+ * rule guide. Open, the caret turns a quarter in one step. For what a reader opens on purpose
+ * (grants to edit, details, a danger zone), never to hide the one thing the screen is for.
+ */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/disclosure/disclosure.js

@@ -0,0 +1,25 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { view as view$1 } from "../glyph/glyph.js";
+import { Disclosure } from "@foldkit/ui";
+// src/disclosure/disclosure.ts
+/**
+* A line that opens what is under it, built on `@foldkit/ui`'s Disclosure: the parent owns
+* whether it is open. `div.disclosure > button.disclosure-summary[aria-expanded]` (the caret
+* and the label) and `div.disclosure-body`, which hangs from the caret on a 1px
+* rule guide. Open, the caret turns a quarter in one step. For what a reader opens on purpose
+* (grants to edit, details, a danger zone), never to hide the one thing the screen is for.
+*/
+const view = (config, h) => {
+	const { id, label, isOpen, onToggle, body } = config;
+	return __foldkitBrandViewResult((Disclosure.view({
+		id,
+		isOpen,
+		onToggle,
+		toView: (groups) => __foldkitBrandViewResult((h.div([h.Class("disclosure")], [h.button([...groups.button, h.Class("disclosure-summary")], [view$1({ name: "caret-right" }, h), h.span([h.Class("disclosure-label")], [label])]), h.div([
+			...groups.panel,
+			h.Hidden(!isOpen),
+			h.Class("disclosure-body")
+		], body)])), "@gjermundgaraba/pixel-paper/disclosure/disclosure.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/disclosure/disclosure.js#view");
+};
+export { view };

package/dist/disclosure/index.d.ts

@@ -0,0 +1,5 @@
+import { ViewConfig, view } from "./disclosure.js";
+declare namespace index_d_exports {
+  export { ViewConfig, view };
+}
+export { type ViewConfig, index_d_exports, view };

package/dist/disclosure/index.js

@@ -0,0 +1,6 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { view } from "./disclosure.js";
+// src/disclosure/index.ts
+var disclosure_exports = /* @__PURE__ */ __exportAll({ view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/disclosure/index.js#view") });
+export { disclosure_exports, view };