@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/adapters/mermaid.ts

@@ -1,261 +1,11 @@
-// pixel paper for mermaid: flowcharts and sequence diagrams in the system's inks, lines and
-// faces, in the page's palette. An optional entry point ("./adapters/mermaid"):
-// mermaid is the adopter's own dependency, loaded here only when a diagram is drawn.
-//
-// Two layers. themeCSS repaints with var(…), so the parts it names (nodes, edges, labels,
-// clusters, actors, messages, notes) follow a palette switch in place. themeVariables must be
-// colours, not var() strings (mermaid mixes its own shades from them), so they are read from
-// the page's palette; whatever mermaid bakes from them needs a fresh render, which the
-// palette-keyed box gives it.
-//
-// The faces: what an author writes in a diagram (a node, an edge, a message, an actor, a
-// note) is authored content, so it is set in the sans; mermaid's own words (a loop's or an
-// alt's tab, a cluster's name, a sequence number) are chrome, in the pixel face.
-
-import { Array, Data, Effect, Record, Schema, Semaphore } from "effect";
+import { Schema } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
-import { defineMessageUnion } from "foldkit/message";
 import * as Mount from "foldkit/mount";
-import type { MermaidConfig } from "mermaid";
 
 import { Palette } from "../scheme/scheme.ts";
+import { Message, drawDiagram, loadMermaid } from "./diagram.ts";
 
-const COLOURS = {
-  ink: "--ink",
-  paper: "--paper",
-  head: "--head",
-  rule: "--rule",
-  muted: "--muted",
-  red: "--red",
-  onHead: "--on-head",
-} as const;
-
-type Colours = Record<keyof typeof COLOURS, string>;
-
-/** The tokens' colours in the page's palette, as rgb() strings. A token holds light-dark(),
- *  so it is read through a probe's computed colour. */
-const readColours = (): Colours => {
-  const probe = document.createElement("span");
-  probe.hidden = true;
-  document.documentElement.append(probe);
-  const colours = Record.map(COLOURS, (token) => {
-    probe.style.color = `var(${token})`;
-    return getComputedStyle(probe).color;
-  });
-  probe.remove();
-  return colours;
-};
-
-/** Plum or paper, by the paper's own lightness. */
-const isDark = (rgb: string): boolean => {
-  const [red = 255, green = 255, blue = 255] = Array.map(rgb.match(/[\d.]+/g) ?? [], Number);
-  return red * 0.299 + green * 0.587 + blue * 0.114 < 128;
-};
-
-// Selectors are mermaid's own; it scopes every rule to the diagram's id.
-const THEME_CSS = `
-rect, line, path, polygon { shape-rendering: crispedges; }
-
-/* nodes: paper in a 2px ink frame, square, on the 3px print shadow */
-.node rect, .node polygon, .node circle, .node ellipse, .node path {
-  fill: var(--paper); stroke: var(--ink); stroke-width: var(--line);
-}
-.node rect { rx: 0; ry: 0; }
-.node { filter: drop-shadow(var(--shadow-button)); }
-.label, .label text, .label span, .label p, .nodeLabel {
-  font-family: var(--font-body); font-size: var(--type-body); color: var(--ink); fill: var(--ink);
-}
-
-/* edges: 2px ink, stepped (the curve is "step"), ink arrowheads */
-.flowchart-link, .edgePaths .path { stroke: var(--ink); stroke-width: var(--line); }
-.marker, .arrowheadPath { fill: var(--ink); stroke: var(--ink); }
-
-/* edge labels sit on paper, in the sans a size down */
-.edgeLabel, .edgeLabel p, .edgeLabel span, .labelBkg {
-  background-color: var(--paper); color: var(--ink); font-size: var(--type-control);
-}
-.edgeLabel rect { fill: var(--paper); opacity: 1; }
-
-/* clusters: a head-tinted area on a 1px rule, named in the label register */
-.cluster rect { fill: var(--head); stroke: var(--rule); stroke-width: var(--hair); rx: 0; ry: 0; }
-.cluster-label span, .cluster-label p, .cluster text, .cluster span {
-  font-family: var(--font-px); font-size: var(--type-label); text-transform: uppercase;
-  letter-spacing: var(--tracking-label); color: var(--on-head); fill: var(--on-head);
-}
-
-/* sequence: actors print like nodes; lifelines are rules; replies dot in 2px cells */
-.actor { fill: var(--paper); stroke: var(--ink); stroke-width: var(--line); }
-rect.actor { filter: drop-shadow(var(--shadow-button)); }
-text.actor > tspan, .messageText { fill: var(--ink); }
-.actor-line { stroke: var(--rule); stroke-width: var(--hair); }
-.messageLine0, .messageLine1 { stroke: var(--ink); stroke-width: var(--line); }
-.messageLine1 { stroke-dasharray: var(--line) var(--line) !important; }
-[id$="-arrowhead"] path, [id$="-crosshead"] path { fill: var(--ink); stroke: var(--ink); }
-.activation0, .activation1, .activation2 { fill: var(--head); stroke: var(--ink); stroke-width: var(--line); }
-
-/* a loop or an alt: a 1px rule around it (a dashed line means a drop target here), and its
-   word on an inverted tab, like a title bar. Mermaid writes the sans on every text, so the
-   pixel face has to insist. */
-.loopLine { stroke: var(--rule); stroke-width: var(--hair); stroke-dasharray: none; }
-.labelBox { fill: var(--ink); stroke: var(--ink); }
-.labelText, .labelText > tspan {
-  fill: var(--paper); font-family: var(--font-px) !important; font-size: var(--type-label) !important;
-  text-transform: uppercase; letter-spacing: var(--tracking-label);
-}
-.loopText, .loopText > tspan, .sectionTitle, .sectionTitle > tspan { fill: var(--muted); }
-
-/* notes: the quiet notice, head tint in a rule frame */
-.note { fill: var(--head); stroke: var(--rule); stroke-width: var(--line); }
-.noteText, .noteText > tspan { fill: var(--on-head); }
-
-.sequenceNumber { fill: var(--paper); font-family: var(--font-px) !important; }
-[id$="-sequencenumber"] { fill: var(--ink); }
-`;
-
-/** Mermaid's theme in pixel paper, read from the page's palette as it is now. */
-const theme = (): MermaidConfig => {
-  const colours = readColours();
-  const style = getComputedStyle(document.documentElement);
-  const body = style.getPropertyValue("--font-body").trim();
-  const size = Number.parseFloat(style.getPropertyValue("--type-body"));
-  return {
-    theme: "base",
-    look: "classic",
-    fontFamily: body,
-    fontSize: size,
-    themeCSS: THEME_CSS,
-    themeVariables: {
-      darkMode: isDark(colours.paper),
-      background: colours.paper,
-      fontFamily: body,
-      fontSize: `${size}px`,
-      strokeWidth: 2,
-      primaryColor: colours.paper,
-      primaryTextColor: colours.ink,
-      primaryBorderColor: colours.ink,
-      secondaryColor: colours.head,
-      secondaryTextColor: colours.onHead,
-      secondaryBorderColor: colours.ink,
-      tertiaryColor: colours.head,
-      tertiaryTextColor: colours.onHead,
-      tertiaryBorderColor: colours.rule,
-      mainBkg: colours.paper,
-      nodeBorder: colours.ink,
-      nodeTextColor: colours.ink,
-      textColor: colours.ink,
-      titleColor: colours.ink,
-      lineColor: colours.ink,
-      arrowheadColor: colours.ink,
-      clusterBkg: colours.head,
-      clusterBorder: colours.rule,
-      edgeLabelBackground: colours.paper,
-      actorBkg: colours.paper,
-      actorBorder: colours.ink,
-      actorTextColor: colours.ink,
-      actorLineColor: colours.rule,
-      signalColor: colours.ink,
-      signalTextColor: colours.ink,
-      labelBoxBkgColor: colours.ink,
-      labelBoxBorderColor: colours.ink,
-      labelTextColor: colours.paper,
-      loopTextColor: colours.muted,
-      activationBkgColor: colours.head,
-      activationBorderColor: colours.ink,
-      noteBkgColor: colours.head,
-      noteTextColor: colours.onHead,
-      noteBorderColor: colours.rule,
-      sequenceNumberColor: colours.paper,
-      errorBkgColor: colours.red,
-      errorTextColor: colours.red,
-    },
-    // orthogonal edges: steps, never curves or diagonals
-    flowchart: { curve: "step", padding: 12, nodeSpacing: 40, rankSpacing: 48 },
-    // a sequence diagram sets every word in fontFamily at fontSize, written on each text
-    sequence: { rightAngles: true },
-  };
-};
-
-// ERROR
-
-/** Mermaid did not load: the application has not installed it (it is an optional peer), or
- *  its code failed to arrive. `reason` is the whole of what the import said. */
-class MermaidMissing extends Data.TaggedError("MermaidMissing")<{ reason: string }> {}
-
-/** Mermaid loaded but the diagram was not drawn: its source does not parse, a face did not
- *  load, or mermaid failed while drawing. `reason` is the whole of what was said; for a parse
- *  error that is several lines (where, the line with a caret under the fault, what was
- *  expected), so print it as preformatted text. */
-class DiagramError extends Data.TaggedError("DiagramError")<{ reason: string }> {}
-
-const reasonOf = (cause: unknown): string =>
-  cause instanceof Error ? cause.message : String(cause);
-
-// DRAW
-
-// mermaid's settings are global: one diagram at a time, each with the theme as it is then
-const DRAWING = Semaphore.makeUnsafe(1);
-
-const loadFace = (family: string): Promise<unknown> => {
-  const root = getComputedStyle(document.documentElement);
-  return document.fonts.load(
-    `${root.getPropertyValue("--type-body").trim()} ${root.getPropertyValue(family).trim()}`,
-  );
-};
-
-const loadMermaid = Effect.tryPromise({
-  try: () => import("mermaid"),
-  catch: (cause) => new MermaidMissing({ reason: reasonOf(cause) }),
-});
-
-const loadFaces = Effect.tryPromise({
-  try: () => Promise.all([loadFace("--font-px"), loadFace("--font-body")]),
-  catch: (cause) => new DiagramError({ reason: reasonOf(cause) }),
-});
-
-/** Draws `source` in `box` in pixel paper and returns the SVG markup, to put in the box.
- *  Loads mermaid and the faces first. Fails with `MermaidMissing` when mermaid does not load,
- *  and with `DiagramError` when the diagram is not drawn (most often a source that does not
- *  parse). */
-const renderDiagram = (
-  box: Element,
-  source: string,
-): Effect.Effect<string, MermaidMissing | DiagramError> =>
-  Effect.gen(function* () {
-    // the faces must be loaded before mermaid measures the words set in them
-    const [{ default: mermaid }] = yield* Effect.all([loadMermaid, loadFaces], {
-      concurrency: "unbounded",
-    });
-    return yield* Effect.tryPromise({
-      try: async () => {
-        mermaid.initialize({ startOnLoad: false, suppressErrorRendering: true, ...theme() });
-        // a fresh id each time, so the drawing on screen is not mistaken for the new one
-        const { svg } = await mermaid.render(
-          `pixel-paper-diagram-${crypto.randomUUID()}`,
-          source,
-          box,
-        );
-        return svg;
-      },
-      catch: (cause) => new DiagramError({ reason: reasonOf(cause) }),
-    });
-  }).pipe(Semaphore.withPermit(DRAWING));
-
-// MESSAGE
-
-/** What a diagram's box reports. `SucceededDrawDiagram`: the diagram is drawn, in `palette`.
- *  `FailedLoadMermaid`: mermaid did not load (the application has not installed it, or its
- *  code did not arrive), so no diagram on the page can be drawn. `FailedDrawDiagram`: mermaid
- *  loaded but this diagram was not drawn, most often because its source does not parse.
- *  `reason` is the whole diagnostic, several lines for a parse error (the line, a caret under
- *  the fault, what was expected), so print it as written. */
-export const Message = defineMessageUnion({
-  SucceededDrawDiagram: { palette: Palette },
-  FailedLoadMermaid: { palette: Palette, reason: Schema.String },
-  FailedDrawDiagram: { palette: Palette, reason: Schema.String },
-});
-export type Message = typeof Message.Type;
-
-// MOUNT
+export { Message } from "./diagram.ts";
 
 /** Draws `source` into the box it is mounted on and reports how it went. Its args are read
  *  once, so the box is keyed by the palette and the source: either changing mounts a new box
@@ -263,26 +13,14 @@ export type Message = typeof Message.Type;
  *  resolve it by name, `{ name: DrawDiagram.name }`, with the caller's own Message. */
 export const DrawDiagram = Mount.define("DrawDiagram", {
   args: { source: Schema.String, palette: Palette },
-  messages: [Message.SucceededDrawDiagram, Message.FailedLoadMermaid, Message.FailedDrawDiagram],
-  execute: ({ element, source, palette }) =>
-    renderDiagram(element, source).pipe(
-      Effect.tap((svg) =>
-        Effect.sync(() => {
-          element.innerHTML = svg;
-        }),
-      ),
-      Effect.as(Message.SucceededDrawDiagram({ palette })),
-      Effect.catchTags({
-        MermaidMissing: ({ reason }) =>
-          Effect.succeed(Message.FailedLoadMermaid({ palette, reason })),
-        DiagramError: ({ reason }) =>
-          Effect.succeed(Message.FailedDrawDiagram({ palette, reason })),
-      }),
-    ),
+  messages: [
+    Message.SucceededDrawDiagram,
+    Message.FailedLoadMermaid,
+    Message.FailedDrawDiagram,
+  ],
+  execute: drawDiagram(loadMermaid),
 });
 
-// VIEW
-
 /** Configuration for rendering a diagram with `view`. */
 export type ViewConfig<ParentMessage> = Readonly<{
   /** The mermaid source. Give it `accTitle` and `accDescr`, which name the drawing to screen
@@ -300,12 +38,14 @@ export type ViewConfig<ParentMessage> = Readonly<{
  *  drawing lands; the caller shows a Loading line or an error Notice beside it. */
 export const view = <ParentMessage>(
   config: ViewConfig<ParentMessage>,
-  h: HtmlBuilder<ParentMessage>,
+  h: HtmlBuilder<ParentMessage>
 ): Html => {
   const { source, palette, toParentMessage } = config;
 
   return h.keyed("div")(`${palette}:${source}`, [
     h.Class("diagram"),
-    h.OnMount(Mount.mapMessage(DrawDiagram({ source, palette }), toParentMessage)),
+    h.OnMount(
+      Mount.mapMessage(DrawDiagram({ source, palette }), toParentMessage)
+    ),
   ]);
 };

package/src/announcer/announcer.ts

@@ -4,8 +4,6 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 import { defineMessageUnion } from "foldkit/message";
 import * as Render from "foldkit/render";
 
-// MESSAGE
-
 /** What `Announce` and `Flash` report. An application that runs them puts
  *  `CompletedAnnounce: {}` and `CompletedFlash: {}` in its own Message union, which these tags
  *  match, and its update changes nothing for them. */
@@ -13,9 +11,8 @@ export const Message = defineMessageUnion({
   CompletedAnnounce: {},
   CompletedFlash: {},
 });
-export type Message = typeof Message.Type;
 
-// HOSTING
+export type Message = typeof Message.Type;
 
 /** The attribute that marks the page's live region, which a test finds it by: Loading's line
  *  is a `role="status"` too, so counting that role counts more than the one region. */
@@ -38,27 +35,37 @@ export const view = <Message>(h: HtmlBuilder<Message>): Html =>
     h.Attribute(ANNOUNCER_ATTRIBUTE, ""),
   ]);
 
-// ANNOUNCE
-
-/** How long words said together are gathered before the region reads them as one. */
 const GATHER = Duration.millis(30);
 
 const PENDING_ATTRIBUTE = "data-pixel-paper-announcing";
 
 const topmostRegion = (): Option.Option<HTMLElement> => {
-  const regions = Array.fromIterable(document.querySelectorAll<HTMLElement>(ANNOUNCER_SELECTOR));
+  const regions = Array.fromIterable(
+    document.querySelectorAll<HTMLElement>(ANNOUNCER_SELECTOR)
+  );
+
   return Option.orElse(
-    Array.findLast(regions, (region) => region.closest("dialog[open]") !== null),
-    () => Array.last(regions),
+    Array.findLast(
+      regions,
+      (region) => region.closest("dialog[open]") !== null
+    ),
+    () => Array.last(regions)
   );
 };
 
 const gather = (region: HTMLElement, text: string): boolean => {
-  const maybePending = Option.fromNullishOr(region.getAttribute(PENDING_ATTRIBUTE));
+  const maybePending = Option.fromNullishOr(
+    region.getAttribute(PENDING_ATTRIBUTE)
+  );
+
   region.setAttribute(
     PENDING_ATTRIBUTE,
-    Option.match(maybePending, { onNone: () => text, onSome: (said) => `${said} ${text}` }),
+    Option.match(maybePending, {
+      onNone: () => text,
+      onSome: (said) => `${said} ${text}`,
+    })
   );
+
   return Option.isNone(maybePending);
 };
 
@@ -70,6 +77,7 @@ const speak = (region: HTMLElement): void => {
 const sayIn = (region: HTMLElement, text: string): Effect.Effect<void> =>
   Effect.gen(function* () {
     const isFirst = yield* Effect.sync(() => gather(region, text));
+
     if (!isFirst) {
       return;
     }
@@ -78,12 +86,11 @@ const sayIn = (region: HTMLElement, text: string): Effect.Effect<void> =>
       region.textContent = "";
     });
     yield* Effect.sleep(GATHER);
-    yield* Effect.sync(() => speak(region));
+    yield* Effect.sync(() => {
+      speak(region);
+    });
   });
 
-/** Says `text` to screen readers through the page's live region, once it has rendered. A
- *  component that says its own steps (a board's move, a copy) runs it from a Command of its
- *  own, named for what it says. */
 export const announce = (text: string): Effect.Effect<void> =>
   Effect.gen(function* () {
     yield* Render.afterCommit;
@@ -94,17 +101,25 @@ export const announce = (text: string): Effect.Effect<void> =>
     });
   });
 
-// FLASH
-
 const FLASH_ID = "pixel-paper-flash";
 
-/** The beat in milliseconds, from the stylesheet's `--motion-flash`: none on a page that has
- *  not loaded the stylesheet, which has nothing to flash with. */
+const TIME = /^(?<amount>(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(?<unit>m?s)?$/iu;
+
 const beatOf = (element: Element): Option.Option<number> => {
-  const time = getComputedStyle(element).getPropertyValue("--motion-flash").trim();
+  const time = getComputedStyle(element)
+    .getPropertyValue("--motion-flash")
+    .trim();
+
+  const groups = TIME.exec(time)?.groups;
+
   return pipe(
-    Option.liftPredicate(Number.parseFloat(time), Number.isFinite),
-    Option.map((value) => (time.endsWith("ms") ? value : value * 1000)),
+    Option.fromNullishOr(groups?.["amount"]),
+    Option.map((amount) =>
+      groups?.["unit"]?.toLowerCase() === "ms"
+        ? Number(amount)
+        : Number(amount) * 1000
+    ),
+    Option.filter(Number.isFinite)
   );
 };
 
@@ -112,38 +127,40 @@ const prefersReducedMotion = (): boolean =>
   window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
 const runFlash = (element: Element, beat: number): void => {
-  Array.forEach(
-    Array.filter(element.getAnimations(), (animation) => animation.id === FLASH_ID),
-    (animation) => animation.cancel(),
-  );
+  for (const animation of Array.filter(
+    element.getAnimations(),
+    (running) => running.id === FLASH_ID
+  )) {
+    animation.cancel();
+  }
+
   if (prefersReducedMotion()) {
     const ring = "var(--line) solid var(--ink)";
     element.animate(
       { outline: [ring, ring], outlineOffset: ["-2px", "-2px"] },
-      { duration: beat, id: FLASH_ID },
+      { duration: beat, id: FLASH_ID }
     );
   } else {
     element.animate(
       { filter: ["invert(1)", "invert(1)"] },
-      { duration: beat / 2, delay: beat / 4, id: FLASH_ID },
+      { duration: beat / 2, delay: beat / 4, id: FLASH_ID }
     );
   }
 };
 
-/** Inverts the element `selector` finds for one beat; `Flash` runs it. */
 export const flash = (selector: string): Effect.Effect<void> =>
   Effect.sync(() => {
     const maybeElement = Option.fromNullishOr(document.querySelector(selector));
+
     const maybeFlash = Option.flatMap(maybeElement, (element) =>
-      Option.map(beatOf(element), (beat) => ({ element, beat })),
+      Option.map(beatOf(element), (beat) => ({ element, beat }))
     );
+
     if (Option.isSome(maybeFlash)) {
       runFlash(maybeFlash.value.element, maybeFlash.value.beat);
     }
   });
 
-// COMMAND
-
 /**
  * Says `text` to screen readers through the page's live region (see `view`). Words said in
  * the same moment are read together, and the region clears first, so the same words twice
@@ -152,7 +169,8 @@ export const flash = (selector: string): Effect.Effect<void> =>
 export const Announce = Command.define("Announce", {
   args: { text: Schema.String },
   messages: [Message.CompletedAnnounce],
-  execute: ({ text }) => announce(text).pipe(Effect.as(Message.CompletedAnnounce())),
+  execute: ({ text }) =>
+    announce(text).pipe(Effect.as(Message.CompletedAnnounce())),
 });
 
 /**
@@ -164,5 +182,6 @@ export const Announce = Command.define("Announce", {
 export const Flash = Command.define("Flash", {
   args: { selector: Schema.String },
   messages: [Message.CompletedFlash],
-  execute: ({ selector }) => flash(selector).pipe(Effect.as(Message.CompletedFlash())),
+  execute: ({ selector }) =>
+    flash(selector).pipe(Effect.as(Message.CompletedFlash())),
 });

package/src/attributes/attributes.ts

@@ -2,4 +2,6 @@ import type { Attribute, ChildAttribute } from "foldkit/html";
 
 /** Attributes passed through to an element. Never a class: a later class replaces an earlier
  *  one, so a passthrough class would wipe the system's own. */
-export type Attributes<Message> = ReadonlyArray<Attribute<Message> | ChildAttribute>;
+export type Attributes<Message> = ReadonlyArray<
+  Attribute<Message> | ChildAttribute
+>;

package/src/{audioFrame/audioFrame.ts → audio-frame/audio-frame.ts}

@@ -5,8 +5,6 @@ import { defineView } from "foldkit/submodel";
 import * as Media from "../media/media.ts";
 import * as Notice from "../notice/notice.ts";
 
-// VIEW
-
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
 export type ViewInputs = Readonly<{
   src: string;
@@ -39,7 +37,7 @@ export const view = defineView<Media.Model, Media.Message, ViewInputs>(
         body: [`${label}. ${Media.failureReason(model.maybeErrorCode)}`],
         actions: Media.retryActions(hasRetry, h),
       },
-      h,
+      h
     );
 
     const barView = h.div(
@@ -50,7 +48,7 @@ export const view = defineView<Media.Model, Media.Message, ViewInputs>(
         Media.seekView(model, false, h),
         Media.timeView(model, Media.isWaiting(model, maybeHeld), h),
         Media.muteButtonView(model, false, h),
-      ],
+      ]
     );
 
     return h.div(
@@ -69,7 +67,7 @@ export const view = defineView<Media.Model, Media.Message, ViewInputs>(
           h.OnMount(Media.ReadMedia()),
         ]),
         isBroken ? brokenView : barView,
-      ],
+      ]
     );
-  },
+  }
 );

package/src/audio-frame/index.ts

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

package/src/banner/banner.ts

@@ -2,8 +2,6 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 
 import * as Notice from "../notice/notice.ts";
 
-// VIEW
-
 /** Configuration for rendering a banner with `view`. */
 export type ViewConfig = Readonly<{
   /** One sentence: the state, and what happens to the reader's work. */
@@ -22,11 +20,14 @@ export type ViewConfig = Readonly<{
  *  go unheard: the application says the state once, when it begins, through the page's live
  *  region (the `Announcer.Announce` Command). An outcome that comes and goes is a
  *  toast; a word beside the control that did it is a FlashWord. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { body, tone = "Error", actions = [] } = config;
 
   return h.div(
     [h.Class("banner")],
-    [Notice.toneGlyphView({ tone }, h), h.span([], body), ...actions],
+    [Notice.toneGlyphView({ tone }, h), h.span([], body), ...actions]
   );
 };

package/src/banner/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./banner.ts";
+
 export type { ViewConfig } from "./banner.ts";