@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/toc/toc.ts

@@ -2,10 +2,9 @@ import { Array, Option, Schema, Stream, pipe } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 import type { EntryWithoutKeepAlive } from "foldkit/subscription";
 
-// VIEW
-
 /** A heading's level: `2` at the margin, `3` indented under it. */
 export const Level = Schema.Literals([2, 3]);
+
 export type Level = typeof Level.Type;
 
 /** One heading in the contents. */
@@ -21,7 +20,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>;
@@ -30,14 +29,19 @@ export type ViewConfig = Readonly<{
 }>;
 
 const currentId = (
-  entries: ReadonlyArray<Entry>,
-  maybeCurrentId: Option.Option<string>,
+  entries: readonly Entry[],
+  maybeCurrentId: Option.Option<string>
 ): Option.Option<string> =>
-  Option.orElse(maybeCurrentId, () => Option.map(Array.head(entries), ({ id }) => id));
+  Option.orElse(maybeCurrentId, () =>
+    Option.map(Array.head(entries), ({ id }) => id)
+  );
 
 /** The page's headings as plain links in a `<nav>`. One ink cell marks the heading being read,
  *  which is also `aria-current`. An entry's `detail` sits under its words, in the link. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { entries, label = "On this page" } = config;
   const maybeCurrent = currentId(entries, config.maybeCurrentId);
 
@@ -51,42 +55,51 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
             h.a(
               [
                 h.Href(`#${id}`),
-                ...(Option.contains(maybeCurrent, id) ? [h.AriaCurrent("true")] : []),
+                ...(Option.contains(maybeCurrent, id)
+                  ? [h.AriaCurrent("true")]
+                  : []),
               ],
               Array.match(detail, {
                 onEmpty: () => [words],
-                onNonEmpty: (aside) => [h.span([h.Class("toc-entry")], [words, ...aside])],
-              }),
+                onNonEmpty: (aside) => [
+                  h.span([h.Class("toc-entry")], [words, ...aside]),
+                ],
+              })
             ),
-          ]),
-        ),
+          ])
+        )
       ),
-    ],
+    ]
   );
 };
 
-// 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: ReadonlyArray<string>): Option.Option<string> => {
+const readingPosition = (
+  headingIds: readonly string[]
+): Option.Option<string> => {
   const headings = Array.getSomes(
-    Array.map(headingIds, (id) => Option.fromNullishOr(document.getElementById(id))),
+    Array.map(headingIds, (id) =>
+      Option.fromNullishOr(document.querySelector(`#${CSS.escape(id)}`))
+    )
   );
+
   const line = window.innerHeight * READING_LINE;
 
   return pipe(
-    Array.findLast(headings, (heading) => heading.getBoundingClientRect().top <= line),
+    Array.findLast(
+      headings,
+      (heading) => heading.getBoundingClientRect().top <= line
+    ),
     Option.orElse(() => Array.head(headings)),
-    Option.map(({ id }) => id),
+    Option.map(({ id }) => id)
   );
 };
 
 /** 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;
 }>;
 
@@ -100,14 +113,16 @@ export type ReadingPositionConfig<Model, Message> = Readonly<{
  * the page, not the contents element, and its answer is Model state the view renders.
  */
 export const readingPositionEntry = <Model, Message>(
-  config: ReadingPositionConfig<Model, Message>,
+  config: ReadingPositionConfig<Model, Message>
 ): EntryWithoutKeepAlive<
   Model,
   Message,
-  Readonly<{ headingIds: ReadonlyArray<string> }>,
+  Readonly<{ headingIds: readonly string[] }>,
   never
 > => ({
-  dependenciesSchema: Schema.Struct({ headingIds: Schema.Array(Schema.String) }),
+  dependenciesSchema: Schema.Struct({
+    headingIds: Schema.Array(Schema.String),
+  }),
   modelToDependencies: (model) => ({ headingIds: config.headingIds(model) }),
   dependenciesToStream: ({ headingIds }) =>
     Array.match(headingIds, {
@@ -116,14 +131,14 @@ export const readingPositionEntry = <Model, Message>(
         Stream.suspend(() =>
           Stream.concat(
             Stream.make(undefined),
-            Stream.fromEventListener(window, "scroll", { passive: true }),
-          ),
+            Stream.fromEventListener(window, "scroll", { passive: true })
+          )
         ).pipe(
           Stream.map(() => readingPosition(ids)),
           Stream.filter(Option.isSome),
           Stream.map(({ value }) => value),
           Stream.changes,
-          Stream.map(config.toMessage),
+          Stream.map(config.toMessage)
         ),
     }),
 });

package/src/tokens.css

@@ -14,7 +14,6 @@
 :root {
   color-scheme: light dark;
 
-  /* ---------- colour: neutrals ---------- */
   --ink: light-dark(#16150f, #efecf3);
   --paper: light-dark(#fdfdfa, #3b3640);
   --ground: light-dark(#dcdcd4, #2d2931);
@@ -22,19 +21,15 @@
   --head: light-dark(#efefe8, #453f4b);
   --muted: light-dark(#5d5c52, #aea7b8);
 
-  /* ---------- colour: the three meanings ---------- */
   --amber: #f5a623;
   --green: #2fbf71;
-  /* plum lightens red for text and border contrast, so its red fills carry black */
   --red: light-dark(#b3251e, #ff8074);
 
-  /* ---------- colour: text on fills ---------- */
   --on-status: #16150f;
   --on-red: light-dark(#fdfdfa, #16150f);
   /* muted misses AA on plum's head tint; text on a head fill uses this */
   --on-head: light-dark(#5d5c52, #b6afc1);
 
-  /* ---------- colour: content, inside code and terminals only ---------- */
   /* Sixteen printer's inks for what a program prints: terminal colours, syntax. Never on
      chrome. Each reads at AA on the head tint, the ground code sits on, except black on
      plum, which is the ground's own tone. On paper the whites print as greys and ink,
@@ -55,7 +50,6 @@
   --term-bright-magenta: light-dark(#8f3570, #f7c1e2);
   --term-bright-cyan: light-dark(#2a6f6a, #aee3dc);
   --term-bright-white: light-dark(#16150f, #efecf3);
-  /* syntax roles, drawn from the same inks */
   --code-keyword: var(--term-magenta);
   --code-string: var(--term-cyan);
   --code-number: var(--term-yellow);
@@ -63,7 +57,6 @@
   --code-type: var(--term-green);
   --code-comment: var(--on-head);
 
-  /* ---------- colour: print and veil ---------- */
   --shadow-color: light-dark(rgba(22, 21, 15, 0.85), rgba(0, 0, 0, 0.8));
   --shadow-danger-color: light-dark(rgba(179, 37, 30, 0.6), rgba(0, 0, 0, 0.8));
   --veil: rgba(22, 21, 15, 0.4);
@@ -74,24 +67,23 @@
      background: var(--veil-grain), var(--veil) for a veil. */
   --veil-grain:
     conic-gradient(at 1px 1px, #0000 75%, rgb(22 21 15 / 0.5) 0) 0 0 / 4px 4px,
-    conic-gradient(at 1px 1px, #0000 75%, rgb(22 21 15 / 0.5) 0) 2px 2px / 4px 4px;
+    conic-gradient(at 1px 1px, #0000 75%, rgb(22 21 15 / 0.5) 0) 2px 2px / 4px
+      4px;
   --dither-base: light-dark(#e0e0d8, #2f2b33);
   --dither-dot: light-dark(#bcbcb2, #423d4a);
   --dither:
     conic-gradient(at 1px 1px, #0000 75%, var(--dither-dot) 0) 0 0 / 4px 4px,
-    conic-gradient(at 1px 1px, #0000 75%, var(--dither-dot) 0) 2px 2px / 4px 4px, var(--dither-base);
+    conic-gradient(at 1px 1px, #0000 75%, var(--dither-dot) 0) 2px 2px / 4px 4px,
+    var(--dither-base);
 
-  /* ---------- colour: fades ---------- */
   --fade-on-ink: 0.75; /* what prints muted on paper, printed in paper on an inverted fill */
   --fade-held: 0.6; /* a held control on an ink title bar */
   --fade-dragged: 0.4; /* a held item, dimmed in place while its copy follows the pointer */
 
-  /* ---------- type: three families ---------- */
   --font-px: "Departure Mono", ui-monospace, Menlo, Monaco, monospace;
   --font-body: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
   --font-code: ui-monospace, Menlo, Monaco, monospace;
 
-  /* ---------- type: the working scale ---------- */
   --type-label: 10px; /* labels, field labels, table heads, meta */
   --type-state: 11px; /* chips, tabs, ages, counts, state words */
   --type-control: 12px; /* buttons, nav, menus, code, notices */
@@ -108,7 +100,6 @@
   --tracking-title: 0.08em; /* a panel's title bar, an empty state's headline, the flash word */
   --tracking-label: 0.1em; /* uppercase pixel labels */
 
-  /* ---------- type: the reading scale (authored pages only) ---------- */
   --read-body: 15px;
   --read-h3: 15px;
   --read-h2: 20px;
@@ -116,11 +107,9 @@
   --read-weight: 650;
   --read-measure: 68ch;
 
-  /* ---------- lines ---------- */
   --line: 2px; /* anything that contains: ink */
   --hair: 1px; /* anything that divides: rule */
 
-  /* ---------- space ---------- */
   --row: 34px; /* the height of a row */
   --pad: 16px; /* inside a panel or card */
   --gap: 24px; /* between panels */
@@ -129,16 +118,15 @@
   --rail-drawer: 320px; /* the rail as a drawer, whatever width the reader gave it */
   --rail-folded: 64px; /* the rail folded to its first panel's bar, stood on end */
 
-  /* ---------- space: between components (Stack, Group, Wrap) ---------- */
   --space-s: 8px; /* things in one line: buttons, chips, a glyph and its word */
   --space-m: 14px; /* the parts of one body: a panel's, a card's, a window's */
-  --space-l: var(--gap); /* whole surfaces: panels, a card and what stands beside it */
+  --space-l: var(
+    --gap
+  ); /* whole surfaces: panels, a card and what stands beside it */
 
-  /* ---------- type: figures ---------- */
   --type-figure: 30px; /* a stat's value */
   --type-figure-narrow: 22px; /* the same value at 900px and under, a step down the ramp */
 
-  /* ---------- print shadows: zero blur, offset down and right ---------- */
   --shadow-card: 8px 8px 0 var(--shadow-color);
   --shadow-panel: 5px 5px 0 var(--shadow-color);
   --shadow-button: 3px 3px 0 var(--shadow-color);
@@ -146,25 +134,20 @@
   --shadow-pressed: 1px 1px 0 var(--shadow-color);
   --shadow-danger: 3px 3px 0 var(--shadow-danger-color);
 
-  /* ---------- the reel: a scrolling row of columns of panes ---------- */
   --reel-gutter: 16px; /* between columns, and between the panes of a column */
   --reel-column-min: 280px; /* the narrowest a column prints, whatever its width */
   --reel-pane-min: 120px; /* the shortest a pane prints */
 
-  /* ---------- the bench: a page whose work is the window ---------- */
   --bench-work-min: 152px; /* the least of its height the work keeps: a 120px pane, 16px gutters */
   --bench-head-min: 64px; /* the least of its head a short window keeps: its padding and a small button */
 
-  /* ---------- charts ---------- */
   --chart-plot: 160px; /* a line chart's plot, between its top line and its axis */
 
-  /* ---------- motion: stepped or instant ---------- */
   --motion-flash: 0.7s;
   --motion-blink: 1.2s;
   --motion-card: 0.14s;
   --motion-veil: 0.12s;
 
-  /* ---------- motion: how long a toast stays ---------- */
   --toast-hold: 5s; /* how long a toast that is not an error stays while nothing holds it */
 }
 

package/src/toolbar/index.ts

@@ -1,2 +1,3 @@
 export { BindToolKeys, Message, view } from "./toolbar.ts";
+
 export type { Orientation, ViewConfig } from "./toolbar.ts";

package/src/toolbar/toolbar.ts

@@ -1,4 +1,13 @@
-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 type { Html, HtmlBuilder } from "foldkit/html";
 import { defineMessageUnion } from "foldkit/message";
@@ -6,24 +15,22 @@ import * as Mount from "foldkit/mount";
 
 import { isPlain } from "../keys/keys.ts";
 
-// 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"]);
+
 export type Orientation = typeof Orientation.Type;
 
-/** Where a key moved focus: one tool either way, or to an end. */
 const ToolMove = Schema.Literals(["Previous", "Next", "First", "Last"]);
-type ToolMove = typeof ToolMove.Type;
 
-// MESSAGE
+type ToolMove = typeof ToolMove.Type;
 
 /** What a toolbar's keys report: a move they already made. Nothing in a Model follows it. */
-export const Message = defineMessageUnion({ MovedToolFocus: { move: ToolMove } });
-export type Message = typeof Message.Type;
+export const Message = defineMessageUnion({
+  MovedToolFocus: { move: ToolMove },
+});
 
-// TOOL KEYS
+export type Message = typeof Message.Type;
 
 const TOOL_SELECTOR = "button:not(:disabled), a[href]";
 
@@ -31,28 +38,33 @@ const isOwnTool =
   (bar: Element) =>
   (tool: HTMLElement): boolean => {
     const popover = tool.closest("[popover]");
-    return tool.closest('[role="toolbar"]') === bar && (popover === null || !bar.contains(popover));
+
+    return (
+      tool.closest('[role="toolbar"]') === bar &&
+      (popover === null || !bar.contains(popover))
+    );
   };
 
-// 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: Element): ReadonlyArray<HTMLElement> =>
+const tools = (bar: Element): readonly HTMLElement[] =>
   Array.filter(
     Array.fromIterable(bar.querySelectorAll<HTMLElement>(TOOL_SELECTOR)),
-    isOwnTool(bar),
+    isOwnTool(bar)
   );
 
-const rove = (bar: Element, to: HTMLElement): void =>
-  Array.forEach(tools(bar), (tool) => {
+const rove = (bar: Element, to: HTMLElement): void => {
+  for (const tool of tools(bar)) {
     tool.tabIndex = tool === to ? 0 : -1;
-  });
+  }
+};
 
 const roveToCurrent = (bar: Element): void => {
   const all = tools(bar);
+
   const maybeCurrent = Option.orElse(
     Array.findFirst(all, (tool) => tool.getAttribute("tabindex") === "0"),
-    () => Array.head(all),
+    () => Array.head(all)
   );
+
   if (Option.isSome(maybeCurrent)) {
     rove(bar, maybeCurrent.value);
   }
@@ -65,62 +77,86 @@ const toToolMove = (key: string): Option.Option<ToolMove> =>
     Match.whenOr("ArrowDown", "ArrowRight", () => Option.some("Next")),
     Match.when("Home", () => Option.some("First")),
     Match.when("End", () => Option.some("Last")),
-    Match.orElse(() => Option.none()),
+    Match.orElse(() => Option.none())
   );
 
-const targetIndex = (move: ToolMove, index: number, lastIndex: number): number =>
+const targetIndex = (
+  move: ToolMove,
+  index: number,
+  lastIndex: number
+): number =>
   Match.value(move).pipe(
     Match.withReturnType<number>(),
-    Match.when("Previous", () => Number.clamp(index - 1, { minimum: 0, maximum: lastIndex })),
-    Match.when("Next", () => Number.clamp(index + 1, { minimum: 0, maximum: lastIndex })),
+    Match.when("Previous", () =>
+      Number.clamp(index - 1, { minimum: 0, maximum: lastIndex })
+    ),
+    Match.when("Next", () =>
+      Number.clamp(index + 1, { minimum: 0, maximum: lastIndex })
+    ),
     Match.when("First", () => 0),
     Match.when("Last", () => lastIndex),
-    Match.exhaustive,
+    Match.exhaustive
   );
 
 type ToolStep = Readonly<{ move: ToolMove; tool: HTMLElement }>;
 
-const toolStep = (bar: Element, event: KeyboardEvent): Option.Option<ToolStep> => {
+const toolStep = (
+  bar: Element,
+  event: KeyboardEvent
+): Option.Option<ToolStep> => {
   if (event.isComposing || event.defaultPrevented || !isPlain(event)) {
     return Option.none();
   }
 
   return Option.flatMap(toToolMove(event.key), (move) => {
     const all = tools(bar);
+
     return pipe(
       Array.findFirstIndex(all, (tool) => tool === event.target),
-      Option.flatMap((index) => Array.get(all, targetIndex(move, index, all.length - 1))),
-      Option.map((tool) => ({ move, tool })),
+      Option.flatMap((index) =>
+        Array.get(all, targetIndex(move, index, all.length - 1))
+      ),
+      Option.map((tool) => ({ move, tool }))
     );
   });
 };
 
-const moveToolFocus = (bar: Element, event: KeyboardEvent): Option.Option<Message> => {
+const moveToolFocus = (
+  bar: Element,
+  event: KeyboardEvent
+): Option.Option<Message> => {
   const maybeStep = toolStep(bar, event);
+
   if (Option.isSome(maybeStep)) {
     rove(bar, maybeStep.value.tool);
     maybeStep.value.tool.focus();
   }
+
   return Option.map(maybeStep, ({ move }) => Message.MovedToolFocus({ move }));
 };
 
-// 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: Element): Stream.Stream<never> =>
   Stream.callback<never>(() =>
     Effect.acquireRelease(
       Effect.sync(() => {
-        const observer = new MutationObserver(() => roveToCurrent(bar));
+        const observer = new MutationObserver(() => {
+          roveToCurrent(bar);
+        });
+
         roveToCurrent(bar);
         observer.observe(bar, {
           childList: true,
           subtree: true,
           attributeFilter: ["disabled", "href"],
         });
+
         return observer;
       }),
-      (observer) => Effect.sync(() => observer.disconnect()),
-    ),
+      (observer) =>
+        Effect.sync(() => {
+          observer.disconnect();
+        })
+    )
   );
 
 /** The toolbar's keys and its roving stop for Tab. Either axis's arrows move focus one tool
@@ -146,23 +182,25 @@ export const BindToolKeys = Mount.defineStream("BindToolKeys", {
           filterMapEvent: (event) =>
             Array.findFirst(tools(element), (tool) => tool === event.target),
         }).pipe(
-          Stream.tap((tool) => Effect.sync(() => rove(element, tool))),
-          Stream.drain,
+          Stream.tap((tool) =>
+            Effect.sync(() => {
+              rove(element, tool);
+            })
+          ),
+          Stream.drain
         ),
         keepStop(element),
       ],
-      { concurrency: "unbounded" },
+      { concurrency: "unbounded" }
     ),
 });
 
-// VIEW
-
 /** Configuration for rendering a toolbar with `view`. */
 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;
@@ -178,7 +216,7 @@ export type ViewConfig<ParentMessage> = Readonly<{
  *  go to the ends, and Tab comes back to the tool used last. */
 export const view = <ParentMessage>(
   config: ViewConfig<ParentMessage>,
-  h: HtmlBuilder<ParentMessage>,
+  h: HtmlBuilder<ParentMessage>
 ): Html => {
   const {
     label,
@@ -196,6 +234,6 @@ export const view = <ParentMessage>(
       h.OnMount(Mount.mapMessage(BindToolKeys(), toParentMessage)),
       h.Class(isFloating ? "toolbar floating" : "toolbar"),
     ],
-    toolViews,
+    toolViews
   );
 };

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

@@ -5,14 +5,11 @@ import * as Mount from "foldkit/mount";
 
 import type { Attributes } from "../attributes/attributes.ts";
 
-// 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: {} });
-export type Message = typeof Message.Type;
 
-// MOUNT
+export type Message = typeof Message.Type;
 
 const isFirstOfKind = (element: Element, selector: string): boolean =>
   document.querySelector(selector) === element;
@@ -26,24 +23,33 @@ export const MeasureHeight = Mount.define("MeasureHeight", {
   messages: [Message.CompletedMeasureHeight],
   execute: ({ element, selector, property }) =>
     Effect.gen(function* () {
-      if (!(element instanceof HTMLElement) || !isFirstOfKind(element, selector)) {
+      if (
+        !(element instanceof HTMLElement) ||
+        !isFirstOfKind(element, selector)
+      ) {
         return Message.CompletedMeasureHeight();
       }
+
       const root = document.documentElement.style;
       yield* Effect.acquireRelease(
         Effect.sync(() => {
-          const measure = (): void => root.setProperty(property, `${element.offsetHeight}px`);
+          const measure = (): void => {
+            root.setProperty(property, `${element.offsetHeight}px`);
+          };
+
           const observer = new ResizeObserver(measure);
           observer.observe(element);
           measure();
+
           return observer;
         }),
         (observer) =>
           Effect.sync(() => {
             observer.disconnect();
             root.removeProperty(property);
-          }),
+          })
       );
+
       return Message.CompletedMeasureHeight();
     }),
 });
@@ -51,12 +57,20 @@ export const MeasureHeight = Mount.define("MeasureHeight", {
 /** 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 = <ParentMessage>(toParentMessage: (message: Message) => ParentMessage) =>
-  [[{ name: MeasureHeight.name }, toParentMessage(Message.CompletedMeasureHeight())]] as const;
+export const sceneMounts = <ParentMessage>(
+  toParentMessage: (message: Message) => ParentMessage
+) =>
+  [
+    [
+      { name: MeasureHeight.name },
+      toParentMessage(Message.CompletedMeasureHeight()),
+    ],
+  ] as const;
 
-/** The bar's measuring attributes, its Mount lifted into the parent's Message. */
 export const measureAttributes = <ParentMessage>(
   toParentMessage: (message: Message) => ParentMessage,
   args: Readonly<{ selector: string; property: string }>,
-  h: HtmlBuilder<ParentMessage>,
-): Attributes<ParentMessage> => [h.OnMount(Mount.mapMessage(MeasureHeight(args), toParentMessage))];
+  h: HtmlBuilder<ParentMessage>
+): Attributes<ParentMessage> => [
+  h.OnMount(Mount.mapMessage(MeasureHeight(args), toParentMessage)),
+];

package/src/top-bar/index.ts

@@ -0,0 +1,5 @@
+export { MeasureHeight, Message, sceneMounts } from "./bar-height.ts";
+
+export { view } from "./top-bar.ts";
+
+export type { ViewConfig } from "./top-bar.ts";

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

@@ -1,16 +1,15 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
 
 import { slotView } from "../slot/slot.ts";
-import { type Message as BarHeightMessage, measureAttributes } from "./barHeight.ts";
-
-// VIEW
+import { measureAttributes } from "./bar-height.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
@@ -22,14 +21,21 @@ 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 const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
   const { brand, nav = [], tools = [], toParentMessage } = config;
 
   return h.header(
     [
-      ...measureAttributes(toParentMessage, { selector: ".topbar", property: "--topbar-h" }, h),
+      ...measureAttributes(
+        toParentMessage,
+        { selector: ".topbar", property: "--topbar-h" },
+        h
+      ),
       h.Class("topbar"),
     ],
-    [...brand, ...nav, ...slotView("div", "topbar-tools", tools, h)],
+    [...brand, ...nav, ...slotView("div", "topbar-tools", tools, h)]
   );
 };

package/src/video-frame/index.ts

@@ -0,0 +1,3 @@
+export { view } from "./video-frame.ts";
+
+export type { Captions, ViewInputs } from "./video-frame.ts";