@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/dist/src/toast/toast.js

@@ -1,5 +1,5 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-import { Array, Duration, Effect, Match, Option, Schema, Stream, pipe } from "effect";
+import { Array, Duration, Effect, Match, Option, Schema, Stream, pipe, } from "effect";
 import * as Command from "foldkit/command";
 import * as Dom from "foldkit/dom";
 import { defineMessageUnion } from "foldkit/message";
@@ -10,13 +10,13 @@ import { defineView } from "foldkit/submodel";
 import * as Update from "foldkit/update";
 import * as Announcer from "../announcer/announcer.js";
 import * as Button from "../button/button.js";
+import { htmlElement } from "../dom/html-element.js";
 import { Focus } from "../focus/focus.js";
-import * as IconButton from "../iconButton/iconButton.js";
+import * as IconButton from "../icon-button/icon-button.js";
 import { isPlain } from "../keys/keys.js";
 import * as Notice from "../notice/notice.js";
 import * as Stack from "./stack.js";
 import { Action } from "./stack.js";
-// MODEL
 /** Schema for the page's toast stack: the `@foldkit/ui` Toast stack it is built on, which
  *  holds the slips, what holds them on screen (the pointer on a slip, the keyboard in the
  *  stack), and where focus came into the stack from. */
@@ -26,7 +26,6 @@ export const Model = Schema.Struct({
     isFocusIn: Schema.Boolean,
     maybeReturnFocusId: Schema.Option(Schema.String),
 });
-// MESSAGE
 /** Union of all Messages the toast stack can produce. */
 export const Message = defineMessageUnion({
     GotStackMessage: { message: Stack.Message },
@@ -40,32 +39,24 @@ export const Message = defineMessageUnion({
     CompletedFocus: {},
     CompletedAnnounceSlip: {},
 });
-// OUT MESSAGE
 /** Union of OutMessages the toast stack reports: a slip's action was pressed (the slip is on
  *  its way out), with the action's id and the slip's. */
 export const OutMessage = defineMessageUnion({
     SelectedAction: { id: Schema.String, entryId: Schema.String },
 });
-// INIT
-/** How long a slip that is not an error stays while nothing holds it: the stylesheet's
- *  `--toast-hold`, which an update cannot read. */
-const HOLD = Duration.seconds(5);
-/** The most slips that are not errors on screen at once. Errors are not counted. */
+const TOAST_HOLD = Duration.seconds(5);
 const MOST_SHOWING = 3;
 /** Creates an empty toast stack. */
 export const init = (config) => (__foldkitBrandViewResult(({
-    stack: Stack.init({ id: config.id, defaultDuration: HOLD }),
+    stack: Stack.init({ id: config.id, defaultDuration: TOAST_HOLD }),
     isPointerIn: false,
     isFocusIn: false,
     maybeReturnFocusId: Option.none(),
 }), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#init"));
-// ACCESSORS
 /** The stack's id, unique in the document. */
 export const id = (model) => __foldkitBrandViewResult((model.stack.id), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#id");
 const isHeld = (model) => __foldkitBrandViewResult((model.isPointerIn || model.isFocusIn), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#isHeld");
-/** The slips on screen, newest last. */
 const slips = (model) => __foldkitBrandViewResult((Stack.showing(model.stack)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#slips");
-// the slips on screen are read from the stack, so one that has left needs nothing more
 const foldStackOutMessage = Stack.OutMessage.match({
     DismissedToast: () => __foldkitBrandViewResult(((model) => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous"))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#DismissedToast"),
 });
@@ -76,19 +67,22 @@ const foldConfig = {
     toParentMessage: (message) => __foldkitBrandViewResult((Message.GotStackMessage({ message })), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#toParentMessage"),
 };
 const foldStack = Update.foldChild({ update: Stack.update, ...foldConfig });
-const stackStep = (apply, entryId) => __foldkitBrandViewResult((Update.foldChildStep({ update: (stack) => __foldkitBrandViewResult((apply(stack, entryId)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#update"), ...foldConfig })), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#stackStep");
+const stackStep = (apply, entryId) => __foldkitBrandViewResult((Update.foldChildStep({
+    update: (stack) => __foldkitBrandViewResult((apply(stack, entryId)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#update"),
+    ...foldConfig,
+})), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#stackStep");
 const dismissStep = (entryId) => __foldkitBrandViewResult((stackStep(Stack.dismiss, entryId)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#dismissStep");
 const eachSlip = (model, apply, maybeExceptId) => __foldkitBrandViewResult((Update.combine(model, Array.map(Array.filter(slips(model), (slip) => __foldkitBrandViewResult((!Option.contains(maybeExceptId, slip.id)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~2")), (slip) => __foldkitBrandViewResult((stackStep(apply, slip.id)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~3")))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#eachSlip");
 const holdAll = (model) => __foldkitBrandViewResult((eachSlip(model, Stack.hold, Option.none())), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#holdAll");
-const releaseUnlessHeld = (model, maybeExceptId) => __foldkitBrandViewResult((isHeld(model) ? holdAll(model) : eachSlip(model, Stack.release, maybeExceptId)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#releaseUnlessHeld");
+const releaseUnlessHeld = (model, maybeExceptId) => __foldkitBrandViewResult((isHeld(model)
+    ? holdAll(model)
+    : eachSlip(model, Stack.release, maybeExceptId)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#releaseUnlessHeld");
 const pointerMoved = (stackMessage) => __foldkitBrandViewResult((Match.value(stackMessage).pipe(Match.withReturnType(), Match.tag("HoveredEntry", ({ entryId }) => __foldkitBrandViewResult((Option.some({ isPointerIn: true, entryId })), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~4")), Match.tag("LeftEntry", ({ entryId }) => __foldkitBrandViewResult((Option.some({ isPointerIn: false, entryId })), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~5")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~6")))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#pointerMoved");
 const holdIfHeld = (entryId) => __foldkitBrandViewResult(((model) => __foldkitBrandViewResult((isHeld(model) ? stackStep(Stack.hold, entryId)(model) : { model }), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~7")), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#holdIfHeld");
 const updateStack = (model, stackMessage) => __foldkitBrandViewResult((Option.match(pointerMoved(stackMessage), {
     onNone: () => __foldkitBrandViewResult((foldStack(model, stackMessage)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#onNone"),
     onSome: ({ isPointerIn, entryId }) => __foldkitBrandViewResult((Update.combine(modifyFields(model, { isPointerIn: () => __foldkitBrandViewResult((isPointerIn), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#isPointerIn") }), [
         foldStack(stackMessage),
-        // the stack's own fold already let go of the slip the pointer left, so only the
-        // others are released
         (moved) => __foldkitBrandViewResult((releaseUnlessHeld(moved, Option.some(entryId))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~8"),
     ])), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#onSome"),
 })), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#updateStack");
@@ -99,11 +93,7 @@ export const FocusSlip = Command.define("FocusSlip", {
     messages: [Message.CompletedFocusSlip],
     execute: ({ entryId }) => __foldkitBrandViewResult((Dom.focus(`#${CSS.escape(entryId)} .toast > .iconbtn`).pipe(Effect.ignore, Effect.as(Message.CompletedFocusSlip()))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#execute"),
 });
-/** The stack element in the page now: `@foldkit/ui`'s container, which carries the stack's
- *  id. */
-const stackElement = (stackId) => __foldkitBrandViewResult((Option.fromNullishOr(document.getElementById(stackId))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#stackElement");
-// NOTE: @foldkit/ui gap: Toast's container is always a polite live region and cannot be told
-// otherwise, so the stack says a slip and the Announcer only where the stack cannot.
+const stackElement = (stackId) => __foldkitBrandViewResult((htmlElement(`#${CSS.escape(stackId)}`)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#stackElement");
 /**
  * Says a raised slip exactly once. `@foldkit/ui`'s stack is always a polite live region, so a
  * slip added to a stack already on the page is read from there, and this says nothing more. A
@@ -133,9 +123,7 @@ const focusAfter = (model, entryId) => {
     const remaining = Array.filter(slips(model), (slip) => __foldkitBrandViewResult((slip.id !== entryId), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~14"));
     return __foldkitBrandViewResult((Option.match(Array.get(remaining, Math.min(index, remaining.length - 1)), {
         onSome: (slip) => __foldkitBrandViewResult((Option.some(FocusSlip({ entryId: slip.id }))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#onSome~2"),
-        onNone: () => 
-        // focus goes back where it came into the stack from, once the last slip has gone
-        __foldkitBrandViewResult((Option.map(model.maybeReturnFocusId, (elementId) => __foldkitBrandViewResult((Focus({ id: elementId })), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~15"))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#onNone~2"),
+        onNone: () => __foldkitBrandViewResult((Option.map(model.maybeReturnFocusId, (elementId) => __foldkitBrandViewResult((Focus({ id: elementId })), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~15"))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#onNone~2"),
     })), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#focusAfter");
 };
 const dismissKeepingFocus = (model, entryId) => __foldkitBrandViewResult((Update.combine(model, [
@@ -154,7 +142,7 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
     GotStackMessage: ({ message: stackMessage }) => __foldkitBrandViewResult((updateStack(model, stackMessage)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#GotStackMessage"),
     FocusedStack: ({ maybeFromId }) => __foldkitBrandViewResult((holdAll(modifyFields(model, {
         isFocusIn: () => __foldkitBrandViewResult((true), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#isFocusIn~2"),
-        maybeReturnFocusId: (returnId) => (__foldkitBrandViewResult((model.isFocusIn ? returnId : maybeFromId), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#maybeReturnFocusId")),
+        maybeReturnFocusId: (returnId) => __foldkitBrandViewResult((model.isFocusIn ? returnId : maybeFromId), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#maybeReturnFocusId"),
     }))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#FocusedStack"),
     BlurredStack: () => __foldkitBrandViewResult((model.isFocusIn
         ? releaseUnlessHeld(modifyFields(model, { isFocusIn: () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#isFocusIn~3") }), Option.none())
@@ -163,7 +151,10 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
         onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#onNone~3")),
         onSome: (newest) => __foldkitBrandViewResult((dismissKeepingFocus(model, newest.id)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#onSome~3"),
     })), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#PressedEscape"),
-    MovedHost: () => __foldkitBrandViewResult((releaseUnlessHeld(modifyFields(model, { isFocusIn: () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#isFocusIn~4"), isPointerIn: () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#isPointerIn~2") }), Option.none())), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#MovedHost"),
+    MovedHost: () => __foldkitBrandViewResult((releaseUnlessHeld(modifyFields(model, {
+        isFocusIn: () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#isFocusIn~4"),
+        isPointerIn: () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#isPointerIn~2"),
+    }), Option.none())), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#MovedHost"),
     ClickedAction: ({ entryId, action }) => __foldkitBrandViewResult((pipe(dismissKeepingFocus(model, entryId), Update.withOutMessage(OutMessage.SelectedAction({ id: action.id, entryId })))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#ClickedAction"),
     ClickedDismiss: ({ entryId }) => __foldkitBrandViewResult((dismissKeepingFocus(model, entryId)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#ClickedDismiss"),
     CompletedFocusSlip: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#CompletedFocusSlip")),
@@ -174,7 +165,9 @@ const oldestCalm = (model) => {
     const calm = Array.filter(slips(model), (slip) => __foldkitBrandViewResult((slip.payload.tone !== "Error"), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~17"));
     return __foldkitBrandViewResult((Option.filter(Array.head(calm), () => __foldkitBrandViewResult((calm.length >= MOST_SHOWING), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~18"))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#oldestCalm");
 };
-const spoken = (config) => __foldkitBrandViewResult((config.body === undefined ? `${config.title}.` : `${config.title}. ${config.body}`), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#spoken");
+const spoken = (config) => __foldkitBrandViewResult((config.body === undefined
+    ? `${config.title}.`
+    : `${config.title}. ${config.body}`), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#spoken");
 /**
  * Raises a slip and says it once (see `AnnounceSlip`). At most `MOST_SHOWING` slips that are
  * not errors show: one more takes the place of the oldest of them. Errors stack without limit,
@@ -193,17 +186,22 @@ export const show = (model, config) => {
     const raised = Update.combine(model, [
         ...Array.fromOption(Option.map(maybeReplaced, (slip) => __foldkitBrandViewResult((dismissStep(slip.id)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~20"))),
         Update.foldChildStep({
-            update: (stack) => __foldkitBrandViewResult((Stack.show(stack, { payload, variant: "Info", sticky: config.tone === "Error" })), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#update~3"),
+            update: (stack) => __foldkitBrandViewResult((Stack.show(stack, {
+                payload,
+                variant: "Info",
+                sticky: config.tone === "Error",
+            })), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#update~3"),
             ...foldConfig,
         }),
     ]);
-    // the stack's show always adds an entry, so a stack without one is a broken invariant
     const entryId = Option.getOrThrowWith(Stack.newestId(raised.model.stack), () => __foldkitBrandViewResult((new Error("The toast stack raised no entry.")), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~21"));
     const shown = Update.combine(raised.model, [
         holdIfHeld(entryId),
         (stepModel) => (__foldkitBrandViewResult(({
             model: stepModel,
-            commands: [AnnounceSlip({ stackId: id(stepModel), text: spoken(config) })],
+            commands: [
+                AnnounceSlip({ stackId: id(stepModel), text: spoken(config) }),
+            ],
         }), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~22")),
     ]);
     return __foldkitBrandViewResult(({
@@ -214,7 +212,6 @@ export const show = (model, config) => {
 };
 /** Takes a slip back by its id: what it reported has recovered. */
 export const dismiss = (model, entryId) => __foldkitBrandViewResult((dismissKeepingFocus(model, entryId)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#dismiss");
-// VIEW
 const slipView = (entry, h) => {
     const { tone, title, maybeBody, maybeAction } = entry.payload;
     return __foldkitBrandViewResult((h.div([h.Class(`notice toast${Notice.TONE_CLASS[tone]}`)], [
@@ -233,13 +230,15 @@ const slipView = (entry, h) => {
     ])), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#slipView");
 };
 const isOutside = (stack, target) => __foldkitBrandViewResult((!(target instanceof Node && stack.contains(target))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#isOutside");
-const elementId = (target) => __foldkitBrandViewResult((target instanceof Element && target.id !== "" ? Option.some(target.id) : Option.none()), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#elementId");
-const isEscape = (event) => __foldkitBrandViewResult((event.key === "Escape" && !event.isComposing && !event.defaultPrevented && isPlain(event)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#isEscape");
-/** Focus coming into the stack, from outside it: where it came from, so it can go back. */
+const elementId = (target) => __foldkitBrandViewResult((target instanceof Element && target.id !== ""
+    ? Option.some(target.id)
+    : Option.none()), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#elementId");
+const isEscape = (event) => __foldkitBrandViewResult((event.key === "Escape" &&
+    !event.isComposing &&
+    !event.defaultPrevented &&
+    isPlain(event)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#isEscape");
 export const stackFocusIn = (stack, event) => __foldkitBrandViewResult((Option.liftPredicate(Message.FocusedStack({ maybeFromId: elementId(event.relatedTarget) }), () => __foldkitBrandViewResult((isOutside(stack, event.relatedTarget)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~24"))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#stackFocusIn");
-/** Focus leaving the stack for somewhere outside it. */
 export const stackFocusOut = (stack, event) => __foldkitBrandViewResult((Option.liftPredicate(Message.BlurredStack(), () => __foldkitBrandViewResult((isOutside(stack, event.relatedTarget)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~25"))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#stackFocusOut");
-/** A plain Escape on a slip, not composing and not handled already. */
 export const stackKey = (event) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedEscape(), () => __foldkitBrandViewResult((isEscape(event)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#anonymous~26"))), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#stackKey");
 /** The stack's focus and keys: focus coming in (and from where) and going out, and Escape
  *  on a slip, which takes the newest and keeps a Dialog the stack sits in open (its default is
@@ -277,7 +276,11 @@ export const BindStack = Mount.defineStream("BindStack", {
  * topmost one (in its `toLiveRegionView`, beside the Announcer), so a toast raised from a card
  * shows above it and can be reached; otherwise in the body. Moving it lets go of its holds.
  */
-export const view = defineView((model, h) => __foldkitBrandViewResult((h.div([h.OnMount(BindStack()), h.OnUnmount(Message.MovedHost()), h.Class("toasts")], [
+export const view = defineView((model, h) => __foldkitBrandViewResult((h.div([
+    h.OnMount(BindStack()),
+    h.OnUnmount(Message.MovedHost()),
+    h.Class("toasts"),
+], [
     h.submodel({
         slotId: `${id(model)}-entries`,
         model: model.stack,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toc/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACtD,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toc/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEtD,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/dist/src/toc/toc.d.ts

@@ -16,7 +16,7 @@ export type Entry = Readonly<{
 }>;
 /** Configuration for rendering a table of contents with `view`. */
 export type ViewConfig = Readonly<{
-    entries: ReadonlyArray<Entry>;
+    entries: readonly Entry[];
     /** The heading being read, from the caller's Model, kept by `readingPositionEntry`. `None`
      *  until it first reports, as during a server render: the first heading is marked. */
     maybeCurrentId: Option.Option<string>;
@@ -29,7 +29,7 @@ export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>
 /** Configuration for the `readingPositionEntry` Subscription helper. */
 export type ReadingPositionConfig<Model, Message> = Readonly<{
     /** The ids of the headings the contents list, in page order; nothing is read while empty. */
-    headingIds: (model: Model) => ReadonlyArray<string>;
+    headingIds: (model: Model) => readonly string[];
     toMessage: (id: string) => Message;
 }>;
 /**
@@ -42,6 +42,6 @@ export type ReadingPositionConfig<Model, Message> = Readonly<{
  * the page, not the contents element, and its answer is Model state the view renders.
  */
 export declare const readingPositionEntry: <Model, Message>(config: ReadingPositionConfig<Model, Message>) => EntryWithoutKeepAlive<Model, Message, Readonly<{
-    headingIds: ReadonlyArray<string>;
+    headingIds: readonly string[];
 }>, never>;
 //# sourceMappingURL=toc.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../../src/toc/toc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAE,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAC7D,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAIlE,mEAAmE;AACnE,eAAO,MAAM,KAAK,kCAA0B,CAAC;AAC7C,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAEtC,mCAAmC;AACnC,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC;IAC3B,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;IACb,iFAAiF;IACjF,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACvC,CAAC,CAAC;AAEH,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,OAAO,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9B;0FACsF;IACtF,cAAc,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACtC,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAQH;2FAC2F;AAC3F,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IA0B3E,CAAC;AAoBF,wEAAwE;AACxE,MAAM,MAAM,qBAAqB,CAAC,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC;IAC3D,6FAA6F;IAC7F,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,aAAa,CAAC,MAAM,CAAC,CAAC;IACpD,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;CACpC,CAAC,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,EAAE,OAAO,UACzC,qBAAqB,CAAC,KAAK,EAAE,OAAO,CAAC,KAC5C,qBAAqB,CACtB,KAAK,EACL,OAAO,EACP,QAAQ,CAAC;IAAE,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC,EAC/C,KAAK,CAqBL,CAAC"}
+{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../../src/toc/toc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAE,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAC7D,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,mEAAmE;AACnE,eAAO,MAAM,KAAK,kCAA0B,CAAC;AAE7C,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAEtC,mCAAmC;AACnC,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC;IAC3B,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;IACb,iFAAiF;IACjF,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACvC,CAAC,CAAC;AAEH,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,OAAO,EAAE,SAAS,KAAK,EAAE,CAAC;IAC1B;0FACsF;IACtF,cAAc,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACtC,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAUH;2FAC2F;AAC3F,eAAO,MAAM,IAAI,GAAI,OAAO,UAClB,UAAU,KACf,WAAW,CAAC,OAAO,CAAC,KACtB,IA8BF,CAAC;AAyBF,wEAAwE;AACxE,MAAM,MAAM,qBAAqB,CAAC,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC;IAC3D,6FAA6F;IAC7F,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,MAAM,EAAE,CAAC;IAChD,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;CACpC,CAAC,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,EAAE,OAAO,UACzC,qBAAqB,CAAC,KAAK,EAAE,OAAO,CAAC,KAC5C,qBAAqB,CACtB,KAAK,EACL,OAAO,EACP,QAAQ,CAAC;IAAE,UAAU,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,CAAC,EAC3C,KAAK,CAuBL,CAAC"}

package/dist/src/toc/toc.js

@@ -1,6 +1,5 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Array, Option, Schema, Stream, pipe } from "effect";
-// VIEW
 /** A heading's level: `2` at the margin, `3` indented under it. */
 export const Level = Schema.Literals([2, 3]);
 const currentId = (entries, maybeCurrentId) => __foldkitBrandViewResult((Option.orElse(maybeCurrentId, () => __foldkitBrandViewResult((Option.map(Array.head(entries), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#anonymous~2"))), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#anonymous"))), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#currentId");
@@ -13,19 +12,21 @@ export const view = (config, h) => {
         h.ul([h.Class("toc")], Array.map(entries, ({ id, label: words, level, detail = [] }) => __foldkitBrandViewResult((h.keyed("li")(id, level === 3 ? [h.Class("l3")] : [], [
             h.a([
                 h.Href(`#${id}`),
-                ...(Option.contains(maybeCurrent, id) ? [h.AriaCurrent("true")] : []),
+                ...(Option.contains(maybeCurrent, id)
+                    ? [h.AriaCurrent("true")]
+                    : []),
             ], Array.match(detail, {
                 onEmpty: () => __foldkitBrandViewResult(([words]), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#onEmpty"),
-                onNonEmpty: (aside) => __foldkitBrandViewResult(([h.span([h.Class("toc-entry")], [words, ...aside])]), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#onNonEmpty"),
+                onNonEmpty: (aside) => __foldkitBrandViewResult(([
+                    h.span([h.Class("toc-entry")], [words, ...aside]),
+                ]), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#onNonEmpty"),
             })),
         ])), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#anonymous~3"))),
     ])), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#view");
 };
-// SUBSCRIPTION
-/** The reading line: a heading counts as read once it passes the upper fifth of the view. */
 const READING_LINE = 0.2;
 const readingPosition = (headingIds) => {
-    const headings = Array.getSomes(Array.map(headingIds, (id) => __foldkitBrandViewResult((Option.fromNullishOr(document.getElementById(id))), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#anonymous~4")));
+    const headings = Array.getSomes(Array.map(headingIds, (id) => __foldkitBrandViewResult((Option.fromNullishOr(document.querySelector(`#${CSS.escape(id)}`))), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#anonymous~4")));
     const line = window.innerHeight * READING_LINE;
     return __foldkitBrandViewResult((pipe(Array.findLast(headings, (heading) => __foldkitBrandViewResult((heading.getBoundingClientRect().top <= line), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#anonymous~5")), Option.orElse(() => __foldkitBrandViewResult((Array.head(headings)), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#anonymous~6")), Option.map(({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#anonymous~7")))), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#readingPosition");
 };
@@ -39,7 +40,9 @@ const readingPosition = (headingIds) => {
  * the page, not the contents element, and its answer is Model state the view renders.
  */
 export const readingPositionEntry = (config) => (__foldkitBrandViewResult(({
-    dependenciesSchema: Schema.Struct({ headingIds: Schema.Array(Schema.String) }),
+    dependenciesSchema: Schema.Struct({
+        headingIds: Schema.Array(Schema.String),
+    }),
     modelToDependencies: (model) => (__foldkitBrandViewResult(({ headingIds: config.headingIds(model) }), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#modelToDependencies")),
     dependenciesToStream: ({ headingIds }) => __foldkitBrandViewResult((Array.match(headingIds, {
         onEmpty: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/toc/toc.js#onEmpty~2"),

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

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

package/dist/src/toolbar/toolbar.d.ts

@@ -28,7 +28,7 @@ export type ViewConfig<ParentMessage> = Readonly<{
     /** Names the toolbar for screen readers. */
     label: string;
     /** IconButtons and small Buttons; a tool in force is `aria-pressed`. */
-    tools: ReadonlyArray<Html>;
+    tools: readonly Html[];
     orientation?: Orientation;
     /** Floats above what is under it, on the button print shadow. */
     isFloating?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAEpF,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAMvC;oDACoD;AACpD,eAAO,MAAM,WAAW,sDAA8C,CAAC;AACvE,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,CAAC;AAQlD,6FAA6F;AAC7F,eAAO,MAAM,OAAO;;QAA0C,IAAI;;EAAe,CAAC;AAClF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAsG1C;;;;;;yDAMyD;AACzD,eAAO,MAAM,YAAY;;;EAuBvB,CAAC;AAIH,yDAAyD;AACzD,MAAM,MAAM,UAAU,CAAC,aAAa,IAAI,QAAQ,CAAC;IAC/C,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;iIAG6H;IAC7H,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,aAAa,CAAC;CACtD,CAAC,CAAC;AAEH;;gEAEgE;AAChE,eAAO,MAAM,IAAI,GAAI,aAAa,UACxB,UAAU,CAAC,aAAa,CAAC,KAC9B,WAAW,CAAC,aAAa,CAAC,KAC5B,IAmBF,CAAC"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,MAAM,EAGP,MAAM,QAAQ,CAAC;AAEhB,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAIvC;oDACoD;AACpD,eAAO,MAAM,WAAW,sDAA8C,CAAC;AAEvE,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,CAAC;AAMlD,6FAA6F;AAC7F,eAAO,MAAM,OAAO;;QACA,IAAI;;EACtB,CAAC;AAEH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAiI1C;;;;;;yDAMyD;AACzD,eAAO,MAAM,YAAY;;;EA2BvB,CAAC;AAEH,yDAAyD;AACzD,MAAM,MAAM,UAAU,CAAC,aAAa,IAAI,QAAQ,CAAC;IAC/C,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;iIAG6H;IAC7H,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,aAAa,CAAC;CACtD,CAAC,CAAC;AAEH;;gEAEgE;AAChE,eAAO,MAAM,IAAI,GAAI,aAAa,UACxB,UAAU,CAAC,aAAa,CAAC,KAC9B,WAAW,CAAC,aAAa,CAAC,KAC5B,IAmBF,CAAC"}

package/dist/src/toolbar/toolbar.js

@@ -1,46 +1,45 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-import { Array, Effect, Match, Number, Option, Schema, Stream, pipe } from "effect";
+import { Array, Effect, Match, Number, Option, Schema, Stream, pipe, } from "effect";
 import * as Dom from "foldkit/dom";
 import { defineMessageUnion } from "foldkit/message";
 import * as Mount from "foldkit/mount";
 import { isPlain } from "../keys/keys.js";
-// MODEL
 /** Which way the strip lies. A `Vertical` strip stands on end: a canvas's tools down its left
  *  edge. The arrows of both axes move in either. */
 export const Orientation = Schema.Literals(["Horizontal", "Vertical"]);
-/** Where a key moved focus: one tool either way, or to an end. */
 const ToolMove = Schema.Literals(["Previous", "Next", "First", "Last"]);
-// MESSAGE
 /** What a toolbar's keys report: a move they already made. Nothing in a Model follows it. */
-export const Message = defineMessageUnion({ MovedToolFocus: { move: ToolMove } });
-// TOOL KEYS
+export const Message = defineMessageUnion({
+    MovedToolFocus: { move: ToolMove },
+});
 const TOOL_SELECTOR = "button:not(:disabled), a[href]";
 const isOwnTool = (bar) => __foldkitBrandViewResult(((tool) => {
     const popover = tool.closest("[popover]");
-    return __foldkitBrandViewResult((tool.closest('[role="toolbar"]') === bar && (popover === null || !bar.contains(popover))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous");
+    return (__foldkitBrandViewResult((tool.closest('[role="toolbar"]') === bar &&
+        (popover === null || !bar.contains(popover))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous"));
 }), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#isOwnTool");
-// NOTE: the bar's own tools, in order: not the items of a menu one of them opens. A disabled
-// tool is passed over; an `aria-disabled` one stays, as it does for Tab.
 const tools = (bar) => __foldkitBrandViewResult((Array.filter(Array.fromIterable(bar.querySelectorAll(TOOL_SELECTOR)), isOwnTool(bar))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#tools");
-const rove = (bar, to) => __foldkitBrandViewResult((Array.forEach(tools(bar), (tool) => {
-    tool.tabIndex = tool === to ? 0 : -1;
-})), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#rove");
+const rove = (bar, to) => {
+    for (const tool of tools(bar)) {
+        tool.tabIndex = tool === to ? 0 : -1;
+    }
+};
 const roveToCurrent = (bar) => {
     const all = tools(bar);
-    const maybeCurrent = Option.orElse(Array.findFirst(all, (tool) => __foldkitBrandViewResult((tool.getAttribute("tabindex") === "0"), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~3")), () => __foldkitBrandViewResult((Array.head(all)), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~4"));
+    const maybeCurrent = Option.orElse(Array.findFirst(all, (tool) => __foldkitBrandViewResult((tool.getAttribute("tabindex") === "0"), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~2")), () => __foldkitBrandViewResult((Array.head(all)), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~3"));
     if (Option.isSome(maybeCurrent)) {
         rove(bar, maybeCurrent.value);
     }
 };
-const toToolMove = (key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.withReturnType(), Match.whenOr("ArrowUp", "ArrowLeft", () => __foldkitBrandViewResult((Option.some("Previous")), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~5")), Match.whenOr("ArrowDown", "ArrowRight", () => __foldkitBrandViewResult((Option.some("Next")), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~6")), Match.when("Home", () => __foldkitBrandViewResult((Option.some("First")), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~7")), Match.when("End", () => __foldkitBrandViewResult((Option.some("Last")), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~8")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~9")))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#toToolMove");
-const targetIndex = (move, index, lastIndex) => __foldkitBrandViewResult((Match.value(move).pipe(Match.withReturnType(), Match.when("Previous", () => __foldkitBrandViewResult((Number.clamp(index - 1, { minimum: 0, maximum: lastIndex })), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~10")), Match.when("Next", () => __foldkitBrandViewResult((Number.clamp(index + 1, { minimum: 0, maximum: lastIndex })), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~11")), Match.when("First", () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~12")), Match.when("Last", () => __foldkitBrandViewResult((lastIndex), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~13")), Match.exhaustive)), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#targetIndex");
+const toToolMove = (key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.withReturnType(), Match.whenOr("ArrowUp", "ArrowLeft", () => __foldkitBrandViewResult((Option.some("Previous")), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~4")), Match.whenOr("ArrowDown", "ArrowRight", () => __foldkitBrandViewResult((Option.some("Next")), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~5")), Match.when("Home", () => __foldkitBrandViewResult((Option.some("First")), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~6")), Match.when("End", () => __foldkitBrandViewResult((Option.some("Last")), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~7")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~8")))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#toToolMove");
+const targetIndex = (move, index, lastIndex) => __foldkitBrandViewResult((Match.value(move).pipe(Match.withReturnType(), Match.when("Previous", () => __foldkitBrandViewResult((Number.clamp(index - 1, { minimum: 0, maximum: lastIndex })), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~9")), Match.when("Next", () => __foldkitBrandViewResult((Number.clamp(index + 1, { minimum: 0, maximum: lastIndex })), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~10")), Match.when("First", () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~11")), Match.when("Last", () => __foldkitBrandViewResult((lastIndex), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~12")), Match.exhaustive)), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#targetIndex");
 const toolStep = (bar, event) => {
     if (event.isComposing || event.defaultPrevented || !isPlain(event)) {
         return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#toolStep");
     }
     return __foldkitBrandViewResult((Option.flatMap(toToolMove(event.key), (move) => {
         const all = tools(bar);
-        return __foldkitBrandViewResult((pipe(Array.findFirstIndex(all, (tool) => __foldkitBrandViewResult((tool === event.target), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~15")), Option.flatMap((index) => __foldkitBrandViewResult((Array.get(all, targetIndex(move, index, all.length - 1))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~16")), Option.map((tool) => (__foldkitBrandViewResult(({ move, tool }), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~17"))))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~14");
+        return __foldkitBrandViewResult((pipe(Array.findFirstIndex(all, (tool) => __foldkitBrandViewResult((tool === event.target), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~14")), Option.flatMap((index) => __foldkitBrandViewResult((Array.get(all, targetIndex(move, index, all.length - 1))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~15")), Option.map((tool) => (__foldkitBrandViewResult(({ move, tool }), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~16"))))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~13");
     })), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#toolStep");
 };
 const moveToolFocus = (bar, event) => {
@@ -49,20 +48,22 @@ const moveToolFocus = (bar, event) => {
         rove(bar, maybeStep.value.tool);
         maybeStep.value.tool.focus();
     }
-    return __foldkitBrandViewResult((Option.map(maybeStep, ({ move }) => __foldkitBrandViewResult((Message.MovedToolFocus({ move })), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~18"))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#moveToolFocus");
+    return __foldkitBrandViewResult((Option.map(maybeStep, ({ move }) => __foldkitBrandViewResult((Message.MovedToolFocus({ move })), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~17"))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#moveToolFocus");
 };
-// NOTE: the stop for Tab stays on a tool as tools come and go (one disabled, one added). The
-// stream emits nothing; it holds the observer while the bar is mounted.
 const keepStop = (bar) => __foldkitBrandViewResult((Stream.callback(() => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => {
-    const observer = new MutationObserver(() => __foldkitBrandViewResult((roveToCurrent(bar)), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~21"));
+    const observer = new MutationObserver(() => {
+        roveToCurrent(bar);
+    });
     roveToCurrent(bar);
     observer.observe(bar, {
         childList: true,
         subtree: true,
         attributeFilter: ["disabled", "href"],
     });
-    return __foldkitBrandViewResult((observer), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~20");
-}), (observer) => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((observer.disconnect()), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~23"))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~22"))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~19"))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#keepStop");
+    return __foldkitBrandViewResult((observer), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~19");
+}), (observer) => __foldkitBrandViewResult((Effect.sync(() => {
+    observer.disconnect();
+})), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~21"))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~18"))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#keepStop");
 /** The toolbar's keys and its roving stop for Tab. Either axis's arrows move focus one tool
  *  and stop at the ends, Home and End go to the ends, and the default is prevented only for a
  *  key that moved. Keys act only when their target is one of the bar's own tools: a key typed
@@ -81,8 +82,10 @@ export const BindToolKeys = Mount.defineStream("BindToolKeys", {
         Dom.streamFromEventFilterMap({
             target: element,
             type: "focusin",
-            filterMapEvent: (event) => __foldkitBrandViewResult((Array.findFirst(tools(element), (tool) => __foldkitBrandViewResult((tool === event.target), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~24"))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#filterMapEvent~2"),
-        }).pipe(Stream.tap((tool) => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((rove(element, tool)), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~26"))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~25")), Stream.drain),
+            filterMapEvent: (event) => __foldkitBrandViewResult((Array.findFirst(tools(element), (tool) => __foldkitBrandViewResult((tool === event.target), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~23"))), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#filterMapEvent~2"),
+        }).pipe(Stream.tap((tool) => __foldkitBrandViewResult((Effect.sync(() => {
+            rove(element, tool);
+        })), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#anonymous~24")), Stream.drain),
         keepStop(element),
     ], { concurrency: "unbounded" })), "@gjermundgaraba-designs/pixel-paper/src/toolbar/toolbar.js#execute"),
 });

package/dist/src/{topBar/barHeight.d.ts → top-bar/bar-height.d.ts}

@@ -24,9 +24,8 @@ export declare const MeasureHeight: Mount.MountDefinitionWithArgs<"MeasureHeight
 export declare const sceneMounts: <ParentMessage>(toParentMessage: (message: Message) => ParentMessage) => readonly [readonly [{
     readonly name: "MeasureHeight";
 }, ParentMessage]];
-/** The bar's measuring attributes, its Mount lifted into the parent's Message. */
 export declare const measureAttributes: <ParentMessage>(toParentMessage: (message: Message) => ParentMessage, args: Readonly<{
     selector: string;
     property: string;
 }>, h: HtmlBuilder<ParentMessage>) => Attributes<ParentMessage>;
-//# sourceMappingURL=barHeight.d.ts.map
+//# sourceMappingURL=bar-height.d.ts.map

package/dist/src/top-bar/bar-height.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-height.d.ts","sourceRoot":"","sources":["../../../src/top-bar/bar-height.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,MAAM,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAE9D;mDACmD;AACnD,eAAO,MAAM,OAAO;;EAAqD,CAAC;AAE1E,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAK1C;;;uBAGuB;AACvB,eAAO,MAAM,aAAa;;;;;EAkCxB,CAAC;AAEH;;yFAEyF;AACzF,eAAO,MAAM,WAAW,GAAI,aAAa,mBACtB,CAAC,OAAO,EAAE,OAAO,KAAK,aAAa;aAI9C,IAAI;kBAGA,CAAC;AAEb,eAAO,MAAM,iBAAiB,GAAI,aAAa,mBAC5B,CAAC,OAAO,EAAE,OAAO,KAAK,aAAa,QAC9C,QAAQ,CAAC;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,KACnD,WAAW,CAAC,aAAa,CAAC,KAC5B,UAAU,CAAC,aAAa,CAE1B,CAAC"}

package/dist/src/{topBar/barHeight.js → top-bar/bar-height.js}

@@ -2,12 +2,10 @@ import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Effect, Schema } from "effect";
 import { defineMessageUnion } from "foldkit/message";
 import * as Mount from "foldkit/mount";
-// MESSAGE
 /** What a bar's height Mount reports: it started keeping the page's custom property at the
  *  bar's height. Nothing in a Model follows it. */
 export const Message = defineMessageUnion({ CompletedMeasureHeight: {} });
-// MOUNT
-const isFirstOfKind = (element, selector) => __foldkitBrandViewResult((document.querySelector(selector) === element), "@gjermundgaraba-designs/pixel-paper/src/topBar/barHeight.js#isFirstOfKind");
+const isFirstOfKind = (element, selector) => __foldkitBrandViewResult((document.querySelector(selector) === element), "@gjermundgaraba-designs/pixel-paper/src/top-bar/bar-height.js#isFirstOfKind");
 /** Keeps `property` on the page's root at the bar's height, however it wraps, from the moment
  *  the bar mounts until it leaves, so what is placed around it clears it. Only the page's
  *  first bar of its kind (`selector`) does: one shown inside the page, a specimen of one,
@@ -16,26 +14,35 @@ export const MeasureHeight = Mount.define("MeasureHeight", {
     args: { selector: Schema.String, property: Schema.String },
     messages: [Message.CompletedMeasureHeight],
     execute: ({ element, selector, property }) => __foldkitBrandViewResult((Effect.gen(function* () {
-        if (!(element instanceof HTMLElement) || !isFirstOfKind(element, selector)) {
-            return __foldkitBrandViewResult((Message.CompletedMeasureHeight()), "@gjermundgaraba-designs/pixel-paper/src/topBar/barHeight.js#anonymous");
+        if (!(element instanceof HTMLElement) ||
+            !isFirstOfKind(element, selector)) {
+            return __foldkitBrandViewResult((Message.CompletedMeasureHeight()), "@gjermundgaraba-designs/pixel-paper/src/top-bar/bar-height.js#anonymous");
         }
         const root = document.documentElement.style;
         yield* Effect.acquireRelease(Effect.sync(() => {
-            const measure = () => __foldkitBrandViewResult((root.setProperty(property, `${element.offsetHeight}px`)), "@gjermundgaraba-designs/pixel-paper/src/topBar/barHeight.js#measure");
+            const measure = () => {
+                root.setProperty(property, `${element.offsetHeight}px`);
+            };
             const observer = new ResizeObserver(measure);
             observer.observe(element);
             measure();
-            return __foldkitBrandViewResult((observer), "@gjermundgaraba-designs/pixel-paper/src/topBar/barHeight.js#anonymous~2");
+            return __foldkitBrandViewResult((observer), "@gjermundgaraba-designs/pixel-paper/src/top-bar/bar-height.js#anonymous~2");
         }), (observer) => __foldkitBrandViewResult((Effect.sync(() => {
             observer.disconnect();
             root.removeProperty(property);
-        })), "@gjermundgaraba-designs/pixel-paper/src/topBar/barHeight.js#anonymous~3"));
-        return __foldkitBrandViewResult((Message.CompletedMeasureHeight()), "@gjermundgaraba-designs/pixel-paper/src/topBar/barHeight.js#anonymous");
-    })), "@gjermundgaraba-designs/pixel-paper/src/topBar/barHeight.js#execute"),
+        })), "@gjermundgaraba-designs/pixel-paper/src/top-bar/bar-height.js#anonymous~3"));
+        return __foldkitBrandViewResult((Message.CompletedMeasureHeight()), "@gjermundgaraba-designs/pixel-paper/src/top-bar/bar-height.js#anonymous");
+    })), "@gjermundgaraba-designs/pixel-paper/src/top-bar/bar-height.js#execute"),
 });
 /** What a parent's Scene resolves the bar's Mount with, the Message lifted as the bar's
  *  `toParentMessage` lifts it: `Scene.Mount.resolveAll(...TopBar.sceneMounts(toParentMessage))`.
  *  It matches by name, since the Mount the parent holds reports the parent's Message. */
-export const sceneMounts = (toParentMessage) => __foldkitBrandViewResult(([[{ name: MeasureHeight.name }, toParentMessage(Message.CompletedMeasureHeight())]]), "@gjermundgaraba-designs/pixel-paper/src/topBar/barHeight.js#sceneMounts");
-/** The bar's measuring attributes, its Mount lifted into the parent's Message. */
-export const measureAttributes = (toParentMessage, args, h) => __foldkitBrandViewResult(([h.OnMount(Mount.mapMessage(MeasureHeight(args), toParentMessage))]), "@gjermundgaraba-designs/pixel-paper/src/topBar/barHeight.js#measureAttributes");
+export const sceneMounts = (toParentMessage) => __foldkitBrandViewResult(([
+    [
+        { name: MeasureHeight.name },
+        toParentMessage(Message.CompletedMeasureHeight()),
+    ],
+]), "@gjermundgaraba-designs/pixel-paper/src/top-bar/bar-height.js#sceneMounts");
+export const measureAttributes = (toParentMessage, args, h) => __foldkitBrandViewResult(([
+    h.OnMount(Mount.mapMessage(MeasureHeight(args), toParentMessage)),
+]), "@gjermundgaraba-designs/pixel-paper/src/top-bar/bar-height.js#measureAttributes");

package/dist/src/top-bar/index.d.ts

@@ -0,0 +1,4 @@
+export { MeasureHeight, Message, sceneMounts } from "./bar-height.ts";
+export { view } from "./top-bar.ts";
+export type { ViewConfig } from "./top-bar.ts";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/top-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/top-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/src/top-bar/index.js

@@ -0,0 +1,2 @@
+export { MeasureHeight, Message, sceneMounts } from "./bar-height.js";
+export { view } from "./top-bar.js";

package/dist/src/{topBar/topBar.d.ts → top-bar/top-bar.d.ts}

@@ -1,11 +1,11 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
-import { type Message as BarHeightMessage } from "./barHeight.ts";
+import type { Message as BarHeightMessage } from "./bar-height.ts";
 /** Configuration for rendering a top bar with `view`. */
 export type ViewConfig<Message> = Readonly<{
     /** The wordmark, at the left. */
     brand: ReadonlyArray<Html | string>;
     /** A NavStrip; on a phone it drops to a full-width strip under the brand. */
-    nav?: ReadonlyArray<Html>;
+    nav?: readonly Html[];
     /** The right-hand tools; they wrap as one group. */
     tools?: ReadonlyArray<Html | string>;
     /** Lifts the bar's lifecycle Message (`MeasureHeight` started: the page's first top bar
@@ -17,4 +17,4 @@ export type ViewConfig<Message> = Readonly<{
 /** The sticky paper bar across the top of an interface, closed by a 2px ink rule: the page's
  *  banner landmark (`<header>`), with the brand, the navigation and the tools. */
 export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;
-//# sourceMappingURL=topBar.d.ts.map
+//# sourceMappingURL=top-bar.d.ts.map

package/dist/src/top-bar/top-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../../src/top-bar/top-bar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItD,OAAO,KAAK,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnE,yDAAyD;AACzD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,iCAAiC;IACjC,KAAK,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,6EAA6E;IAC7E,GAAG,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACtB,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACrC;;;iEAG6D;IAC7D,eAAe,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC;CACzD,CAAC,CAAC;AAEH;kFACkF;AAClF,eAAO,MAAM,IAAI,GAAI,OAAO,UAClB,UAAU,CAAC,OAAO,CAAC,KACxB,WAAW,CAAC,OAAO,CAAC,KACtB,IAcF,CAAC"}

package/dist/src/{topBar/topBar.js → top-bar/top-bar.js}

@@ -1,6 +1,6 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { slotView } from "../slot/slot.js";
-import { measureAttributes } from "./barHeight.js";
+import { measureAttributes } from "./bar-height.js";
 /** The sticky paper bar across the top of an interface, closed by a 2px ink rule: the page's
  *  banner landmark (`<header>`), with the brand, the navigation and the tools. */
 export const view = (config, h) => {
@@ -8,5 +8,5 @@ export const view = (config, h) => {
     return __foldkitBrandViewResult((h.header([
         ...measureAttributes(toParentMessage, { selector: ".topbar", property: "--topbar-h" }, h),
         h.Class("topbar"),
-    ], [...brand, ...nav, ...slotView("div", "topbar-tools", tools, h)])), "@gjermundgaraba-designs/pixel-paper/src/topBar/topBar.js#view");
+    ], [...brand, ...nav, ...slotView("div", "topbar-tools", tools, h)])), "@gjermundgaraba-designs/pixel-paper/src/top-bar/top-bar.js#view");
 };

package/dist/src/video-frame/index.d.ts

@@ -0,0 +1,3 @@
+export { view } from "./video-frame.ts";
+export type { Captions, ViewInputs } from "./video-frame.ts";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/video-frame/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/video-frame/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}