@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/dist/src/menu/menu.js

@@ -12,13 +12,7 @@ import { lookClassName } from "../button/button.js";
 import { Focus } from "../focus/focus.js";
 import * as Glyph from "../glyph/glyph.js";
 import { isPlain } from "../keys/keys.js";
-import { ChoiceKind, Edge, anchorUnder, edgeSelector, rowsView, slipStream } from "./slip.js";
-// NOTE: @foldkit/ui gap: Menu's rows are always `role="menuitem"` with no hook for a row's
-// role or attributes (no `menuitemradio`, `menuitemcheckbox` or `aria-checked`), its arrows
-// pass unavailable rows (the ARIA menu pattern stops on them), and its row ids are private.
-// So this menu is not built on it: it follows the ARIA menu pattern with real focus on its
-// rows, positioned by `@foldkit/ui`'s public Anchor.
-// MODEL
+import { ChoiceKind, Edge, anchorUnder, edgeSelector, rowsView, slipStream, } from "./slip.js";
 /** Schema for a menu: its id, whether its slip is open, and which end of the slip takes
  *  focus as it opens. One Model serves one toggle: a menu on every row of a list is a Model
  *  per row, each with its own id, never one Model handed from row to row. */
@@ -27,7 +21,6 @@ export const Model = Schema.Struct({
     isOpen: Schema.Boolean,
     edge: Edge,
 });
-// MESSAGE
 /** Union of all Messages a menu can produce. `LeftSlip` (focus went outside the slip),
  *  `UnmountedSlip` (the slip left the page) and `CompletedFocus` (focus is back on the
  *  toggle) can arrive after the menu has closed. Each must reach the Model of the menu that
@@ -45,7 +38,6 @@ export const Message = defineMessageUnion({
     CompletedFocus: {},
     CompletedFocusEdge: {},
 });
-// OUT MESSAGE
 /** Union of OutMessages a menu reports. `Selected`: an action, a radio item or a link was
  *  chosen and the slip has closed (the browser follows a link itself). `Toggled`: a check item
  *  was chosen; the slip stays open and the parent flips the value it keeps. */
@@ -59,30 +51,29 @@ export const init = (config) => (__foldkitBrandViewResult(({
     isOpen: false,
     edge: "First",
 }), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#init"));
-// ACCESSORS
 /** The menu's id, unique in the document. */
 export const id = (model) => __foldkitBrandViewResult((model.id), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#id");
 /** Whether the slip is open: a parent pauses its own page keys while it is. */
 export const isOpen = (model) => __foldkitBrandViewResult((model.isOpen), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#isOpen");
 const toggleId = (model) => __foldkitBrandViewResult((`${model.id}-toggle`), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#toggleId");
 const slipId = (model) => __foldkitBrandViewResult((`${model.id}-slip`), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#slipId");
-// UPDATE
 /** Moves focus to an end of the open slip (↓ or ↑ on the toggle while it is open). */
 export const FocusEdge = Command.define("FocusEdge", {
     args: { slipId: Schema.String, edge: Edge },
     messages: [Message.CompletedFocusEdge],
-    execute: ({ slipId: id, edge }) => __foldkitBrandViewResult((Dom.focus(`#${CSS.escape(id)} ${edgeSelector(edge)}`).pipe(Effect.ignore, Effect.as(Message.CompletedFocusEdge()))), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#execute"),
+    execute: ({ slipId: openSlipId, edge }) => __foldkitBrandViewResult((Dom.focus(`#${CSS.escape(openSlipId)} ${edgeSelector(edge)}`).pipe(Effect.ignore, Effect.as(Message.CompletedFocusEdge()))), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#execute"),
 });
 const opened = (model, edge) => __foldkitBrandViewResult((modifyFields(model, { isOpen: () => __foldkitBrandViewResult((true), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#isOpen~2"), edge: () => __foldkitBrandViewResult((edge), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#edge") })), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#opened");
 const closed = (model) => __foldkitBrandViewResult((modifyFields(model, { isOpen: () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#isOpen~3") })), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#closed");
-// focus goes back on the toggle as the slip closes by Escape, Tab or a choice
 const closedWithFocus = (model) => (__foldkitBrandViewResult(({
     model: closed(model),
     commands: [Focus({ id: toggleId(model) })],
 }), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#closedWithFocus"));
 /** Processes a menu Message and returns the next Model, Commands and OutMessage. */
 export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
-    ClickedToggle: () => (__foldkitBrandViewResult(({ model: model.isOpen ? closed(model) : opened(model, "First") }), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#ClickedToggle")),
+    ClickedToggle: () => (__foldkitBrandViewResult(({
+        model: model.isOpen ? closed(model) : opened(model, "First"),
+    }), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#ClickedToggle")),
     PressedToggleArrow: ({ edge }) => __foldkitBrandViewResult((model.isOpen
         ? { model, commands: [FocusEdge({ slipId: slipId(model), edge })] }
         : { model: opened(model, edge) }), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#PressedToggleArrow"),
@@ -97,11 +88,7 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
     CompletedFocus: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#CompletedFocus")),
     CompletedFocusEdge: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#CompletedFocusEdge")),
 })), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#update");
-// KEYS
 const toggleEdge = (key) => __foldkitBrandViewResult((Match.value(key).pipe(Match.withReturnType(), Match.when("ArrowDown", () => __foldkitBrandViewResult((Option.some("First")), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#anonymous")), Match.when("ArrowUp", () => __foldkitBrandViewResult((Option.some("Last")), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#anonymous~2")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#anonymous~3")))), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#toggleEdge");
-/** What one keydown on the toggle does: ↓ and ↑ open the slip on its first or last row. A
- *  key an IME is composing, a modified key, a key someone already handled and any other key
- *  are left alone. */
 export const toggleKey = (event) => __foldkitBrandViewResult((event.isComposing || event.defaultPrevented || !isPlain(event)
     ? Option.none()
     : Option.map(toggleEdge(event.key), (edge) => __foldkitBrandViewResult((Message.PressedToggleArrow({ edge })), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#anonymous~4"))), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#toggleKey");
@@ -127,24 +114,22 @@ export const BindSlip = Mount.defineStream("BindSlip", {
         Message.PressedTab,
         Message.LeftSlip,
     ],
-    execute: ({ element, toggleId: id, isEnd, edge }) => __foldkitBrandViewResult((slipStream(element, {
+    execute: ({ element, toggleId: slipToggleId, isEnd, edge }) => __foldkitBrandViewResult((slipStream(element, {
         placed: Message.CompletedPlaceSlip(),
         events: {
             escape: Message.PressedEscape(),
             tab: Message.PressedTab(),
             left: Message.LeftSlip(),
         },
-        keepId: Option.some(id),
-        setup: anchorUnder({ toggleId: id, isEnd, edge }),
+        keepId: Option.some(slipToggleId),
+        setup: anchorUnder({ toggleId: slipToggleId, isEnd, edge }),
     })), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#execute~3"),
 });
-// VIEW
 /** Which edge of the toggle the slip hangs from. */
 export const Align = Schema.Literals(["Start", "End"]);
-// a toggle that shows a glyph or its own content says its label as its name and tip
 const isNamedByLabel = (viewInputs) => __foldkitBrandViewResult((viewInputs.glyph !== undefined || viewInputs.toggleContent !== undefined), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#isNamedByLabel");
 const toggleClass = (viewInputs) => {
-    const { glyph, isQuiet = false, toggleContent, variant = "Default" } = viewInputs;
+    const { glyph, isQuiet = false, toggleContent, variant = "Default", } = viewInputs;
     if (glyph === undefined || toggleContent !== undefined) {
         return __foldkitBrandViewResult((lookClassName({ variant, isSmall: true })), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#toggleClass");
     }
@@ -165,7 +150,8 @@ const toggleView = (model, viewInputs, h) => {
                 : []),
             h.OnMount(BindToggleKeys()),
             h.Class(toggleClass(viewInputs)),
-        ], toggleContent ?? (glyph === undefined ? [label] : [Glyph.view({ name: glyph }, h)]))), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#toView"),
+        ], toggleContent ??
+            (glyph === undefined ? [label] : [Glyph.view({ name: glyph }, h)]))), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#toView"),
     }, h)), "@gjermundgaraba-designs/pixel-paper/src/menu/menu.js#toggleView");
 };
 /**
@@ -190,11 +176,14 @@ export const view = defineView((model, viewInputs, h) => {
                 h.div([
                     h.Id(slipId(model)),
                     h.Role("menu"),
-                    isNamedByLabel(viewInputs) ? h.AriaLabel(label) : h.AriaLabelledBy(toggleId(model)),
-                    h.OnMount(BindSlip({ toggleId: toggleId(model), isEnd: align === "End", edge: model.edge })),
-                    // NOTE: the slip's Mount ends after the patch that removes it, too late to
-                    // report, so a slip that leaves the page with its toggle (the row it sits on
-                    // is gone) says so here, and the menu closes.
+                    isNamedByLabel(viewInputs)
+                        ? h.AriaLabel(label)
+                        : h.AriaLabelledBy(toggleId(model)),
+                    h.OnMount(BindSlip({
+                        toggleId: toggleId(model),
+                        isEnd: align === "End",
+                        edge: model.edge,
+                    })),
                     h.OnUnmount(Message.UnmountedSlip()),
                     h.Class("menu"),
                 ], rowsView({

package/dist/src/menu/slip.d.ts

@@ -1,43 +1,31 @@
 import { Option, Schema, Stream } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 import { Item } from "./item.ts";
-/** What kind of row was chosen: a check keeps the slip open, the others close it. */
 export declare const ChoiceKind: Schema.Literals<readonly ["Action", "Radio", "Check", "Link"]>;
 export type ChoiceKind = typeof ChoiceKind.Type;
 /** Where focus lands as the slip opens: its first row, or (↑ on the toggle) its last. */
 export declare const Edge: Schema.Literals<readonly ["First", "Last"]>;
 export type Edge = typeof Edge.Type;
-/** The selector of the row focus lands on as the slip opens. */
 export declare const edgeSelector: (edge: Edge) => string;
-/** The slip's rows: items, groups under their headings, and notes. `slipId` names the group
- *  headings' ids; `toChoose` is the Message a row's click sends. */
 export declare const rowsView: <Message>(config: Readonly<{
     slipId: string;
-    items: ReadonlyArray<Item>;
+    items: readonly Item[];
     toChoose: (id: string, kind: ChoiceKind) => Message;
-}>, h: HtmlBuilder<Message>) => ReadonlyArray<Html>;
-/** The Messages a slip's keys and focus report to its owner. */
+}>, h: HtmlBuilder<Message>) => readonly Html[];
 type SlipEvents<Message> = Readonly<{
-    /** Escape: close and put focus back. Its default is prevented, so a Dialog the slip sits
-     *  in stays open. */
     escape: Message;
-    /** Tab: close and put focus back where the slip came from. */
     tab: Message;
-    /** Focus went somewhere outside the slip (a click elsewhere): close and leave it there. */
     left: Message;
 }>;
 /** The slip's keys and focus as a stream of its owner's Messages, set up by `setup` (anchoring,
  *  portaling) and torn down with the element. A press inside the slip keeps focus where it
  *  is, so a click on a row reaches it in every browser. */
 export declare const slipStream: <Message>(element: Element, config: Readonly<{
-    /** Reported once the slip is placed and its keys are bound. */
     placed: Message;
     events: SlipEvents<Message>;
     keepId: Option.Option<string>;
     setup: (element: Element) => () => void;
 }>) => Stream.Stream<Message>;
-/** Hangs the slip under its toggle with `@foldkit/ui`'s Anchor (portaled out of clipping
- *  ancestors, into the dialog when inside one), then focuses the row at `edge`. */
 export declare const anchorUnder: (config: Readonly<{
     toggleId: string;
     isEnd: boolean;
@@ -45,12 +33,10 @@ export declare const anchorUnder: (config: Readonly<{
 }>) => (element: Element) => (() => void);
 /** Where a context slip opens, in viewport pixels. */
 export declare const Point: Schema.Struct<{
-    readonly x: Schema.Number;
-    readonly y: Schema.Number;
+    readonly x: Schema.Finite;
+    readonly y: Schema.Finite;
 }>;
 export type Point = typeof Point.Type;
-/** Opens the slip at a point, portaled, kept 12px inside the window (flipping to the other
- *  side of the point when it would cross the edge), then focuses its first row. */
 export declare const placeAt: (point: Point) => (element: Element) => (() => void);
 export {};
 //# sourceMappingURL=slip.d.ts.map

package/dist/src/menu/slip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slip.d.ts","sourceRoot":"","sources":["../../../src/menu/slip.ts"],"names":[],"mappings":"AACA,OAAO,EAAwB,MAAM,EAAS,MAAM,EAAE,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAC3F,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAQtD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AASjC,qFAAqF;AACrF,eAAO,MAAM,UAAU,gEAAwD,CAAC;AAChF,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAC;AAMhD,yFAAyF;AACzF,eAAO,MAAM,IAAI,6CAAqC,CAAC;AACvD,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC;AAEpC,gEAAgE;AAChE,eAAO,MAAM,YAAY,SAAU,IAAI,KAAG,MACyB,CAAC;AAoJpE;oEACoE;AACpE,eAAO,MAAM,QAAQ,GAAI,OAAO,UACtB,QAAQ,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;CACrD,CAAC,KACC,WAAW,CAAC,OAAO,CAAC,KACtB,aAAa,CAAC,IAAI,CAsBpB,CAAC;AAIF,gEAAgE;AAChE,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IAClC;yBACqB;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,8DAA8D;IAC9D,GAAG,EAAE,OAAO,CAAC;IACb,2FAA2F;IAC3F,IAAI,EAAE,OAAO,CAAC;CACf,CAAC,CAAC;AAgGH;;2DAE2D;AAC3D,eAAO,MAAM,UAAU,GAAI,OAAO,WACvB,OAAO,UACR,QAAQ,CAAC;IACf,+DAA+D;IAC/D,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC9B,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;CACzC,CAAC,KACD,MAAM,CAAC,MAAM,CAAC,OAAO,CAuCrB,CAAC;AAOJ;mFACmF;AACnF,eAAO,MAAM,WAAW,WACb,QAAQ,CAAC;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,eACzD,OAAO,KAAG,CAAC,MAAM,IAAI,CAW3B,CAAC;AAEP,sDAAsD;AACtD,eAAO,MAAM,KAAK;;;EAAwD,CAAC;AAC3E,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAKtC;mFACmF;AACnF,eAAO,MAAM,OAAO,UACV,KAAK,eACH,OAAO,KAAG,CAAC,MAAM,IAAI,CAgB9B,CAAC"}
+{"version":3,"file":"slip.d.ts","sourceRoot":"","sources":["../../../src/menu/slip.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,MAAM,EAEN,MAAM,EACN,MAAM,EAGP,MAAM,QAAQ,CAAC;AAChB,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAStD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGjC,eAAO,MAAM,UAAU,gEAAwD,CAAC;AAEhF,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAC;AAMhD,yFAAyF;AACzF,eAAO,MAAM,IAAI,6CAAqC,CAAC;AAEvD,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC;AAEpC,eAAO,MAAM,YAAY,SAAU,IAAI,KAAG,MACyB,CAAC;AAyJpE,eAAO,MAAM,QAAQ,GAAI,OAAO,UACtB,QAAQ,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;CACrD,CAAC,KACC,WAAW,CAAC,OAAO,CAAC,KACtB,SAAS,IAAI,EA4Bf,CAAC;AAEF,KAAK,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,GAAG,EAAE,OAAO,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACf,CAAC,CAAC;AA0HH;;2DAE2D;AAC3D,eAAO,MAAM,UAAU,GAAI,OAAO,WACvB,OAAO,UACR,QAAQ,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC9B,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;CACzC,CAAC,KACD,MAAM,CAAC,MAAM,CAAC,OAAO,CA6CrB,CAAC;AAKJ,eAAO,MAAM,WAAW,WACb,QAAQ,CAAC;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,eACzD,OAAO,KAAG,CAAC,MAAM,IAAI,CAW3B,CAAC;AAEP,sDAAsD;AACtD,eAAO,MAAM,KAAK;;;EAAwD,CAAC;AAE3E,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAOtC,eAAO,MAAM,OAAO,UACV,KAAK,eACH,OAAO,KAAG,CAAC,MAAM,IAAI,CAkB9B,CAAC"}

package/dist/src/menu/slip.js

@@ -1,37 +1,35 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Anchor, Button as UiButton } from "@foldkit/ui";
-import { Array, Effect, Match, Option, Queue, Schema, Stream, String, pipe } from "effect";
+import { Array, Effect, Match, Option, Queue, Schema, Stream, String, pipe, } from "effect";
+import { htmlElement } from "../dom/html-element.js";
 import * as Glyph from "../glyph/glyph.js";
-import * as KeyHint from "../keyHint/keyHint.js";
+import * as KeyHint from "../key-hint/key-hint.js";
 import { isPlain } from "../keys/keys.js";
 import { Item } from "./item.js";
-// NOTE: the slip shared by Menu and ContextMenu: its rows, and the keys and focus rules of
-// the ARIA menu pattern. Each owner defines its own Mount over these helpers, so the
-// Messages are its own.
-// CHOICE
-/** What kind of row was chosen: a check keeps the slip open, the others close it. */
 export const ChoiceKind = Schema.Literals(["Action", "Radio", "Check", "Link"]);
 const ITEM_SELECTOR = '[role^="menuitem"]';
 const FIRST_ATTRIBUTE = "data-pixel-paper-slip-first";
 const LAST_ATTRIBUTE = "data-pixel-paper-slip-last";
 /** Where focus lands as the slip opens: its first row, or (↑ on the toggle) its last. */
 export const Edge = Schema.Literals(["First", "Last"]);
-/** The selector of the row focus lands on as the slip opens. */
 export const edgeSelector = (edge) => __foldkitBrandViewResult((edge === "First" ? `[${FIRST_ATTRIBUTE}]` : `[${LAST_ATTRIBUTE}]`), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#edgeSelector");
 const isGroup = Item.$is("Group");
 const isNote = Item.$is("Note");
 const entriesOf = (items) => __foldkitBrandViewResult((Array.flatMap(items, (item) => (__foldkitBrandViewResult((isGroup(item) ? item.items : [item]), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous")))), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#entriesOf");
 const choosableIds = (items) => __foldkitBrandViewResult((Array.flatMap(entriesOf(items), (entry) => (__foldkitBrandViewResult((isNote(entry) ? [] : [entry.id]), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~2")))), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#choosableIds");
 const edgeAttributes = (context, id, h) => __foldkitBrandViewResult(([
-    ...(Option.contains(context.firstId, id) ? [h.Attribute(FIRST_ATTRIBUTE, "")] : []),
-    ...(Option.contains(context.lastId, id) ? [h.Attribute(LAST_ATTRIBUTE, "")] : []),
+    ...(Option.contains(context.firstId, id)
+        ? [h.Attribute(FIRST_ATTRIBUTE, "")]
+        : []),
+    ...(Option.contains(context.lastId, id)
+        ? [h.Attribute(LAST_ATTRIBUTE, "")]
+        : []),
 ]), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#edgeAttributes");
 const wordsView = (entry, h) => __foldkitBrandViewResult(([
     ...(entry.glyph === undefined ? [] : [Glyph.view({ name: entry.glyph }, h)]),
     h.span([h.Class("menu-label")], [entry.label]),
     ...(entry.keyHint === undefined ? [] : [KeyHint.view(entry.keyHint, h)]),
 ]), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#wordsView");
-// a row that is a button: an action, a radio item or a check item
 const buttonRowView = (config, context, h) => {
     const { entry, isDisabled, attributes, children } = config;
     return __foldkitBrandViewResult((UiButton.view({
@@ -58,7 +56,10 @@ const choosableView = (entry, context, h) => __foldkitBrandViewResult((Match.val
 }, context, h)), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~4")), Match.tag("Check", (check) => __foldkitBrandViewResult((buttonRowView({
     entry: check,
     isDisabled: false,
-    attributes: [h.Role("menuitemcheckbox"), h.AriaChecked(check.isChecked)],
+    attributes: [
+        h.Role("menuitemcheckbox"),
+        h.AriaChecked(check.isChecked),
+    ],
     children: [
         h.span([h.Class("menu-check"), h.AriaHidden(true)]),
         h.span([h.Class("menu-label")], [check.label]),
@@ -74,8 +75,6 @@ const choosableView = (entry, context, h) => __foldkitBrandViewResult((Match.val
 const entryView = (entry, context, h) => __foldkitBrandViewResult((isNote(entry)
     ? h.span([h.Class("menu-note"), h.Role("none")], [entry.text])
     : choosableView(entry, context, h)), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#entryView");
-/** The slip's rows: items, groups under their headings, and notes. `slipId` names the group
- *  headings' ids; `toChoose` is the Message a row's click sends. */
 export const rowsView = (config, h) => {
     const ids = choosableIds(config.items);
     const context = {
@@ -107,7 +106,10 @@ const wrap = (index, length) => __foldkitBrandViewResult(((index + length) % len
 const startsWith = (item, key) => __foldkitBrandViewResult((pipe(item.textContent ?? "", String.trim, String.toLowerCase, String.startsWith(String.toLowerCase(key)))), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#startsWith");
 const typeahead = (items, key) => {
     const from = Option.getOrElse(focusedIndex(items), () => __foldkitBrandViewResult((-1), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~10"));
-    const ordered = [...Array.drop(items, from + 1), ...Array.take(items, from + 1)];
+    const ordered = [
+        ...Array.drop(items, from + 1),
+        ...Array.take(items, from + 1),
+    ];
     return __foldkitBrandViewResult((Option.match(Array.findFirst(ordered, (item) => __foldkitBrandViewResult((startsWith(item, key)), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~11")), {
         onNone: () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#onNone~2"),
         onSome: (item) => {
@@ -116,18 +118,19 @@ const typeahead = (items, key) => {
         },
     })), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#typeahead");
 };
-// Shift+Tab leaves the slip backwards as Tab leaves it forwards, so Tab alone takes Shift.
-const isShiftTab = (event) => __foldkitBrandViewResult((event.key === "Tab" && event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#isShiftTab");
-/** What one keydown in the slip does: ↑ and ↓ move focus among its rows and wrap, Home and End
- *  go to the ends, a letter goes to the next row it starts, Escape and Tab (or Shift+Tab)
- *  report. Unavailable rows are stopped on too. Returns whether it acted, and prevents the
- *  default when it did. */
+const isShiftTab = (event) => __foldkitBrandViewResult((event.key === "Tab" &&
+    event.shiftKey &&
+    !event.altKey &&
+    !event.ctrlKey &&
+    !event.metaKey), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#isShiftTab");
 const handleSlipKey = (slip, event, events) => {
-    if (event.isComposing || event.defaultPrevented || !(isPlain(event) || isShiftTab(event))) {
+    if (event.isComposing ||
+        event.defaultPrevented ||
+        !(isPlain(event) || isShiftTab(event))) {
         return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#handleSlipKey");
     }
     const items = itemsOf(slip);
-    const length = items.length;
+    const { length } = items;
     const current = Option.getOrElse(focusedIndex(items), () => __foldkitBrandViewResult((-1), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~12"));
     const moved = (didMove) => {
         if (didMove) {
@@ -141,10 +144,11 @@ const handleSlipKey = (slip, event, events) => {
     };
     return __foldkitBrandViewResult((Match.value(event.key).pipe(Match.withReturnType(), Match.when("ArrowDown", () => __foldkitBrandViewResult((moved(length > 0 && focusAt(items, wrap(current + 1, length)))), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~13")), Match.when("ArrowUp", () => __foldkitBrandViewResult((moved(length > 0 && focusAt(items, wrap(Math.max(current, 0) - 1, length)))), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~14")), Match.when("Home", () => __foldkitBrandViewResult((moved(focusAt(items, 0))), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~15")), Match.when("End", () => __foldkitBrandViewResult((moved(focusAt(items, length - 1))), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~16")), Match.when("Escape", () => __foldkitBrandViewResult((reported(events.escape)), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~17")), Match.when("Tab", () => __foldkitBrandViewResult((reported(events.tab)), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~18")), Match.when((key) => __foldkitBrandViewResult((key.length === 1 && key !== " "), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~19"), (key) => __foldkitBrandViewResult((moved(typeahead(items, key))), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~20")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~21")))), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#handleSlipKey");
 };
-/** Whether focus leaving the slip for `next` closes it: anything but the slip itself and the
- *  element whose id is `keepId` (the toggle, which closes it on its own click). */
 const isLeaving = (slip, next, keepId) => __foldkitBrandViewResult((!(next instanceof Node && slip.contains(next)) &&
     !(next instanceof Element && Option.contains(keepId, next.id))), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#isLeaving");
+const preventMouseDown = (event) => {
+    event.preventDefault();
+};
 /** The slip's keys and focus as a stream of its owner's Messages, set up by `setup` (anchoring,
  *  portaling) and torn down with the element. A press inside the slip keeps focus where it
  *  is, so a click on a row reaches it in every browser. */
@@ -166,25 +170,21 @@ export const slipStream = (element, config) => __foldkitBrandViewResult((Stream.
                 Queue.offerUnsafe(queue, config.events.left);
             }
         };
-        const onMouseDown = (event) => __foldkitBrandViewResult((event.preventDefault()), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#onMouseDown");
         element.addEventListener("keydown", onKeyDown);
         element.addEventListener("focusout", onFocusOut);
-        element.addEventListener("mousedown", onMouseDown);
+        element.addEventListener("mousedown", preventMouseDown);
         return __foldkitBrandViewResult((() => {
             element.removeEventListener("keydown", onKeyDown);
             element.removeEventListener("focusout", onFocusOut);
-            element.removeEventListener("mousedown", onMouseDown);
+            element.removeEventListener("mousedown", preventMouseDown);
             cleanup();
         }), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~24");
     }), (teardown) => __foldkitBrandViewResult((Effect.sync(teardown)), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~26"));
     Queue.offerUnsafe(queue, config.placed);
     return __foldkitBrandViewResult((yield* Effect.never), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~23");
 })), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~22"))), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#slipStream");
-// PLACEMENT
 const GAP = 6;
 const WINDOW_PADDING = 12;
-/** Hangs the slip under its toggle with `@foldkit/ui`'s Anchor (portaled out of clipping
- *  ancestors, into the dialog when inside one), then focuses the row at `edge`. */
 export const anchorUnder = (config) => __foldkitBrandViewResult(((element) => __foldkitBrandViewResult((Anchor.anchorSetup(element, {
     buttonId: config.toggleId,
     anchor: {
@@ -197,10 +197,10 @@ export const anchorUnder = (config) => __foldkitBrandViewResult(((element) => __
     focusSelector: edgeSelector(config.edge),
 })), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anonymous~27")), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#anchorUnder");
 /** Where a context slip opens, in viewport pixels. */
-export const Point = Schema.Struct({ x: Schema.Number, y: Schema.Number });
-const clampInto = (start, size, limit) => __foldkitBrandViewResult((start + size > limit - WINDOW_PADDING ? Math.max(WINDOW_PADDING, start - size) : start), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#clampInto");
-/** Opens the slip at a point, portaled, kept 12px inside the window (flipping to the other
- *  side of the point when it would cross the edge), then focuses its first row. */
+export const Point = Schema.Struct({ x: Schema.Finite, y: Schema.Finite });
+const clampInto = (start, size, limit) => __foldkitBrandViewResult((start + size > limit - WINDOW_PADDING
+    ? Math.max(WINDOW_PADDING, start - size)
+    : start), "@gjermundgaraba-designs/pixel-paper/src/menu/slip.js#clampInto");
 export const placeAt = (point) => __foldkitBrandViewResult(((element) => {
     const cleanup = Anchor.portalToContainingRoot(element);
     if (element instanceof HTMLElement) {
@@ -209,7 +209,7 @@ export const placeAt = (point) => __foldkitBrandViewResult(((element) => {
         const rect = element.getBoundingClientRect();
         element.style.left = `${clampInto(point.x, rect.width, window.innerWidth)}px`;
         element.style.top = `${clampInto(point.y, rect.height, window.innerHeight)}px`;
-        const maybeFirst = Option.fromNullishOr(element.querySelector(edgeSelector("First")));
+        const maybeFirst = htmlElement(edgeSelector("First"), element);
         if (Option.isSome(maybeFirst)) {
             maybeFirst.value.focus({ preventScroll: true });
         }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/meter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/meter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEjD,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/meter/meter.d.ts

@@ -50,7 +50,7 @@ export type MeterConfig = Readonly<{
 }>;
 /** Configuration for rendering a list of meters with `listView`. */
 export type ListViewConfig = Readonly<{
-    meters: ReadonlyArray<MeterConfig>;
+    meters: readonly MeterConfig[];
 }>;
 /**
  * A ruled list of meters, edge to edge in a flush panel. Each is a named reading against a

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

@@ -1 +1 @@
-{"version":3,"file":"meter.d.ts","sourceRoot":"","sources":["../../../src/meter/meter.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAatD,0DAA0D;AAC1D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,uDAAuD;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,SAAS,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AASH;0EAC0E;AAC1E,eAAO,MAAM,SAAS,GAAI,OAAO,UAAU,WAAW,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAmBjF,CAAC;AAIF,iCAAiC;AACjC,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,uDAAuD;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;yCACqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;uFACmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;mDAE+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;kBAEc;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACrC,CAAC,CAAC;AA8GH,oEAAoE;AACpE,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACpC,MAAM,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACpC,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,OAAO,UAAU,cAAc,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAMjF,CAAC"}
+{"version":3,"file":"meter.d.ts","sourceRoot":"","sources":["../../../src/meter/meter.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAWtD,0DAA0D;AAC1D,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,uDAAuD;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,SAAS,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAWH;0EAC0E;AAC1E,eAAO,MAAM,SAAS,GAAI,OAAO,UACvB,WAAW,KAChB,WAAW,CAAC,OAAO,CAAC,KACtB,IAmBF,CAAC;AAEF,iCAAiC;AACjC,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,uDAAuD;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;yCACqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;uFACmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;mDAE+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;kBAEc;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACrC,CAAC,CAAC;AA+HH,oEAAoE;AACpE,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACpC,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC;CAChC,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,OAAO,UACtB,cAAc,KACnB,WAAW,CAAC,OAAO,CAAC,KACtB,IAIA,CAAC"}

package/dist/src/meter/meter.js

@@ -5,7 +5,6 @@ import * as Chip from "../chip/chip.js";
 import { LOCALE } from "../locale/locale.js";
 import * as Mark from "../mark/mark.js";
 import { slotView } from "../slot/slot.js";
-// CELLS
 const METER_CELLS = 20;
 const HIGH_SHARE = 0.8;
 const PERCENT = 100;
@@ -24,8 +23,6 @@ export const cellsView = (config, h) => {
         toView: (groups) => __foldkitBrandViewResult((h.span([...groups.meter, h.Class(isShort ? "cells short" : "cells")], cellRowView(count, on, h))), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#toView"),
     }, h)), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#cellsView");
 };
-/** A reading scaled to `whole` (cells, percent), short of `whole` until the value reaches
- *  `max`: 49,999 of 50,000 rounds to 99%, never to a full meter without its red chip. */
 const scaled = (share, whole, isFull) => {
     const rounded = Math.round(share * whole);
     return __foldkitBrandViewResult((isFull ? rounded : Math.min(whole - 1, rounded)), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#scaled");
@@ -41,9 +38,7 @@ const levelOf = (value, max) => {
     else if (value >= max * HIGH_SHARE) {
         return __foldkitBrandViewResult(("High"), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#levelOf");
     }
-    else {
-        return __foldkitBrandViewResult(("Calm"), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#levelOf");
-    }
+    return __foldkitBrandViewResult(("Calm"), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#levelOf");
 };
 const percentView = (config, percent, level, h) => {
     const percentText = `${percent}%`;
@@ -53,9 +48,7 @@ const percentView = (config, percent, level, h) => {
     else if (level === "High") {
         return __foldkitBrandViewResult((Mark.readingView({ label: percentText }, h)), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#percentView");
     }
-    else {
-        return __foldkitBrandViewResult((h.span([h.Class("pct")], [percentText])), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#percentView");
-    }
+    return __foldkitBrandViewResult((h.span([h.Class("pct")], [percentText])), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#percentView");
 };
 const TONE_CLASS = {
     Full: " toned full",
@@ -77,13 +70,20 @@ const meterView = (config, h) => {
         valueText: numbers,
         toView: (groups) => __foldkitBrandViewResult((h.keyed("li")(id, [h.Class(rowClass)], [
             h.div([h.Class("meter-head")], [
-                h.span([...groups.label, h.Class("meter-name")], [label, ...(isStale ? [h.span([h.Class("sr-only")], [" (stale)"])] : [])]),
+                h.span([...groups.label, h.Class("meter-name")], [
+                    label,
+                    ...(isStale
+                        ? [h.span([h.Class("sr-only")], [" (stale)"])]
+                        : []),
+                ]),
                 ...slotView("span", "meter-detail", detail, h),
             ]),
             h.div([h.Class("meter-line")], [
                 h.span([...groups.meter, h.Class("cells")], cellRowView(METER_CELLS, scaled(share, METER_CELLS, isFull), h)),
                 percentView(config, scaled(share, PERCENT, isFull), level, h),
-                ...(hasNumbers ? [h.span([h.Class("meter-num tnum")], [numbers])] : []),
+                ...(hasNumbers
+                    ? [h.span([h.Class("meter-num tnum")], [numbers])]
+                    : []),
             ]),
             ...slotView("div", "meter-foot", foot, h),
         ])), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#toView~2"),
@@ -96,7 +96,4 @@ const meterView = (config, h) => {
  * the numbers in English, a foot line. The cells print ink unless the meter `isToned`. The cells are the `meter`, named by the printed label,
  * with the value, the maximum and the numbers in words for screen readers.
  */
-export const listView = (config, h) => __foldkitBrandViewResult((h.ul(
-// NOTE: Safari takes list semantics from a list printed without markers, so the list
-// says it is one
-[h.Role("list"), h.Class("meters")], Array.map(config.meters, (meter) => __foldkitBrandViewResult((meterView(meter, h)), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#anonymous~2")))), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#listView");
+export const listView = (config, h) => __foldkitBrandViewResult((h.ul([h.Role("list"), h.Class("meters")], Array.map(config.meters, (meter) => __foldkitBrandViewResult((meterView(meter, h)), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#anonymous~2")))), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#listView");

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/monogram/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/monogram/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"monogram.d.ts","sourceRoot":"","sources":["../../../src/monogram/monogram.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAsDtD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;oDAGgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;yCACqC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC,CAAC;AAEH;wFACwF;AACxF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAmB3E,CAAC"}
+{"version":3,"file":"monogram.d.ts","sourceRoot":"","sources":["../../../src/monogram/monogram.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAqDtD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;oDAGgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;yCACqC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC,CAAC;AAEH;wFACwF;AACxF,eAAO,MAAM,IAAI,GAAI,OAAO,UAClB,UAAU,KACf,WAAW,CAAC,OAAO,CAAC,KACtB,IAyBF,CAAC"}

package/dist/src/monogram/monogram.js

@@ -2,19 +2,14 @@ import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Array, Number, String, pipe } from "effect";
 import { cellView } from "../glyph/glyph.js";
 import { artRows, toCells } from "../glyph/glyphs.js";
-// LETTERS
-const WORD_BREAK = /[\s._-]+/;
+const WORD_BREAK = /[\s._-]+/u;
 const LETTER_COUNT = 2;
-/** The letters a name prints as: the first letter of its first two words, or the first two
- *  letters of a one-word name. */
 const initials = (name) => __foldkitBrandViewResult((pipe(name.split(WORD_BREAK), Array.filter(String.isNonEmpty), Array.match({
     onEmpty: () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/monogram/monogram.js#onEmpty"),
     onNonEmpty: (words) => __foldkitBrandViewResult((words.length > 1
         ? pipe(Array.take(words, LETTER_COUNT), Array.map((word) => __foldkitBrandViewResult((word.slice(0, 1)), "@gjermundgaraba-designs/pixel-paper/src/monogram/monogram.js#anonymous")), Array.join(""))
         : Array.headNonEmpty(words).slice(0, LETTER_COUNT)), "@gjermundgaraba-designs/pixel-paper/src/monogram/monogram.js#onNonEmpty"),
 }))), "@gjermundgaraba-designs/pixel-paper/src/monogram/monogram.js#initials");
-// DRAWING
-/** A drawing prints a pixel per cell, two in a large monogram, so its cells stay whole. */
 const DRAWN_CELL = 1;
 const LARGE_DRAWN_CELL = 2;
 const drawingView = (art, isLarge, h) => {
@@ -34,7 +29,13 @@ const drawingView = (art, isLarge, h) => {
 export const view = (config, h) => {
     const { label, letters, drawing, isLarge = false, isCurrent = false, isDecorative = false, } = config;
     return __foldkitBrandViewResult((h.span([
-        ...(isDecorative ? [h.AriaHidden(true)] : [h.Role("img"), h.AriaLabel(label)]),
+        ...(isDecorative
+            ? [h.AriaHidden(true)]
+            : [h.Role("img"), h.AriaLabel(label)]),
         h.Class(`monogram${drawing === undefined ? "" : " drawn"}${isLarge ? " large" : ""}${isCurrent ? " current" : ""}`),
-    ], [drawing === undefined ? (letters ?? initials(label)) : drawingView(drawing, isLarge, h)])), "@gjermundgaraba-designs/pixel-paper/src/monogram/monogram.js#view");
+    ], [
+        drawing === undefined
+            ? (letters ?? initials(label))
+            : drawingView(drawing, isLarge, h),
+    ])), "@gjermundgaraba-designs/pixel-paper/src/monogram/monogram.js#view");
 };

package/dist/src/nav-strip/index.d.ts

@@ -0,0 +1,3 @@
+export { view } from "./nav-strip.ts";
+export type { NavItem, ViewConfig } from "./nav-strip.ts";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/nav-strip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nav-strip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEtC,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/src/nav-strip/index.js

@@ -0,0 +1 @@
+export { view } from "./nav-strip.js";

package/dist/src/{navStrip/navStrip.d.ts → nav-strip/nav-strip.d.ts}

@@ -11,14 +11,11 @@ export type NavItem = Readonly<{
 export type ViewConfig = Readonly<{
     /** Names the navigation for screen readers. */
     label: string;
-    items: ReadonlyArray<NavItem>;
+    items: readonly NavItem[];
 }>;
-/** A segment's count after its label, which NavStrip and Tabs print alike. The space keeps the
- *  label and the count two words in the segment's name, and is not drawn: the gap is the
- *  badge's own margin. */
-export declare const countView: <Message>(count: number, h: HtmlBuilder<Message>) => ReadonlyArray<Html>;
+export declare const countView: <Message>(count: number, h: HtmlBuilder<Message>) => readonly Html[];
 /** One ink-bordered strip of link segments, built on `@foldkit/ui`'s Nav: a navigation
  *  landmark named by its label, the current page `aria-current="page"` and printed inverted.
  *  Its links route through the application as every link does. */
 export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;
-//# sourceMappingURL=navStrip.d.ts.map
+//# sourceMappingURL=nav-strip.d.ts.map

package/dist/src/nav-strip/nav-strip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-strip.d.ts","sourceRoot":"","sources":["../../../src/nav-strip/nav-strip.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItD,wCAAwC;AACxC,MAAM,MAAM,OAAO,GAAG,QAAQ,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC,CAAC;AAEH,2DAA2D;AAC3D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,OAAO,EAAE,CAAC;CAC3B,CAAC,CAAC;AAEH,eAAO,MAAM,SAAS,GAAI,OAAO,SACxB,MAAM,KACV,WAAW,CAAC,OAAO,CAAC,KACtB,SAAS,IAAI,EAGf,CAAC;AAYF;;kEAEkE;AAClE,eAAO,MAAM,IAAI,GAAI,OAAO,UAClB,UAAU,KACf,WAAW,CAAC,OAAO,CAAC,KACtB,IAoBF,CAAC"}

package/dist/src/nav-strip/nav-strip.js

@@ -0,0 +1,25 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Nav as UiNav } from "@foldkit/ui";
+import { Array, Option } from "effect";
+import { LOCALE } from "../locale/locale.js";
+export const countView = (count, h) => __foldkitBrandViewResult(([
+    h.span([h.Class("sr-only")], [" "]),
+    h.span([h.Class("navnum")], [count.toLocaleString(LOCALE)]),
+]), "@gjermundgaraba-designs/pixel-paper/src/nav-strip/nav-strip.js#countView");
+const linkView = (info, { label, count }, h) => __foldkitBrandViewResult((h.keyed("a")(info.value, info.link, [
+    label,
+    ...(count === undefined ? [] : countView(count, h)),
+])), "@gjermundgaraba-designs/pixel-paper/src/nav-strip/nav-strip.js#linkView");
+/** One ink-bordered strip of link segments, built on `@foldkit/ui`'s Nav: a navigation
+ *  landmark named by its label, the current page `aria-current="page"` and printed inverted.
+ *  Its links route through the application as every link does. */
+export const view = (config, h) => {
+    const { label, items } = config;
+    return __foldkitBrandViewResult((UiNav.view({
+        items: Array.map(items, ({ href }) => __foldkitBrandViewResult((href), "@gjermundgaraba-designs/pixel-paper/src/nav-strip/nav-strip.js#anonymous")),
+        ariaLabel: label,
+        toHref: (href) => __foldkitBrandViewResult((href), "@gjermundgaraba-designs/pixel-paper/src/nav-strip/nav-strip.js#toHref"),
+        isItemCurrent: (_href, index) => __foldkitBrandViewResult((Option.exists(Array.get(items, index), ({ isCurrent = false }) => __foldkitBrandViewResult((isCurrent), "@gjermundgaraba-designs/pixel-paper/src/nav-strip/nav-strip.js#anonymous~2"))), "@gjermundgaraba-designs/pixel-paper/src/nav-strip/nav-strip.js#isItemCurrent"),
+        toView: (render) => __foldkitBrandViewResult((h.nav([...render.nav, h.Class("nav")], Array.zipWith(render.items, items, (info, item) => __foldkitBrandViewResult((linkView(info, item, h)), "@gjermundgaraba-designs/pixel-paper/src/nav-strip/nav-strip.js#anonymous~3")))), "@gjermundgaraba-designs/pixel-paper/src/nav-strip/nav-strip.js#toView"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/nav-strip/nav-strip.js#view");
+};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/notice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/notice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC"}