@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/DESIGN.md

@@ -1239,7 +1239,7 @@ Palette: with no `data-scheme` the page follows `prefers-color-scheme`, live, in
 
 How a component in this package is made. The components follow these rules, and a new one follows them too; a review finding against one of them is a defect, not a style note.
 
-**The two kinds.** A **View** is a stateless render helper, `X.view(config, h)`: the caller owns any state and passes its Messages in the config. Copy `src/button/`, `src/notice/` or `src/card/` (a container with slots). A **Submodel** has a Model, Message, OutMessage, `init`, `update` and a `view` made with `defineView`, embedded with `h.submodel`. Build it over the matching `@foldkit/ui` component when there is one and it fits; one that would need more than one `@foldkit/ui gap` note to fit (the Reel, beside DragAndDrop) holds its own state. Copy `src/dialog/` (over a `@foldkit/ui` component, with a Mount that reads real key events), `src/confirmDialog/` (over another Submodel, with OutMessages) or `src/keyHelp/` (with its own Subscription). Clocks come from the Model (`Time.clockEntry`), keys from `Dom.streamFromKeyBindings`, and browser services through an Effect service the application provides as a Layer in its `resources` (CopyButton's `Clipboard`, from `@effect/platform-browser`); a Command that only touches the page it runs in does so directly, inside its Effect (SchemeSwitch's `PinScheme`).
+**The two kinds.** A **View** is a stateless render helper, `X.view(config, h)`: the caller owns any state and passes its Messages in the config. Copy `src/button/`, `src/notice/` or `src/card/` (a container with slots). A **Submodel** has a Model, Message, OutMessage, `init`, `update` and a `view` made with `defineView`, embedded with `h.submodel`. Build it over the matching `@foldkit/ui` component when there is one and it fits; one that would need more than one `@foldkit/ui gap` note to fit (the Reel, beside DragAndDrop) holds its own state. Copy `src/dialog/` (over a `@foldkit/ui` component, with a Mount that reads real key events), `src/confirm-dialog/` (over another Submodel, with OutMessages) or `src/key-help/` (with its own Subscription). Clocks come from the Model (`Time.clockEntry`), keys from `Dom.streamFromKeyBindings`, and browser services through an Effect service the application provides as a Layer in its `resources` (CopyButton's `Clipboard`, from `@effect/platform-browser`); a Command that only touches the page it runs in does so directly, inside its Effect (SchemeSwitch's `PinScheme`).
 
 Each component is `src/<name>/<name>.ts` with an explicit `index.ts`, a colocated `<name>.test.ts` (a Story for update, a Scene for view), an `export * as` line in `src/index.ts`, a section with an example file on the specimen's components page (`site/src/example/`, and its name in `site/src/covers.ts`, which a test holds against `src/index.ts`), and an entry in this document. The `index.ts` is the namespace's public surface and nothing more: `view` and its config types, and for a Submodel its Model, Message, `init`, `update`, Commands, Mounts and accessors. Only `src/index.ts` imports it: inside `src/` a file, a test included, imports the file that defines what it needs (`../button/button.ts`, `../glyph/glyphs.ts`). What several components share and no application imports has a folder with no index: `src/attributes/` (the `Attributes` type), `src/slot/` (`slotView`, an optional slot in its one element), `src/locale/`, `src/keys/`, `src/subscription/`. `src/focus/` has one: its `Focus` Command, which focuses an element by id, is a namespace of its own for the application's focus moves, with the `Message` it reports for code that returns it without a union of its own, and each Submodel that returns it re-exports it too, so a parent's test resolves it by the child's name.
 
@@ -1254,14 +1254,39 @@ Each component is `src/<name>/<name>.ts` with an explicit `index.ts`, a colocate
 9. **A Scene test for every accessibility contract** a component adds beyond `@foldkit/ui`: roles, accessible names, `aria-pressed`, `aria-describedby`, `aria-invalid`, held and disabled states, alerts. Behaviour that only a real event shows (a Mount's key handling) gets a test with real DOM events in happy-dom, no mocks.
 10. **Toggles.** `aria-pressed` comes only from `Button.pressedAttribute(isPressed, h)`, present in both states so the control reads as a toggle.
 11. **Naming code.** Never put `aria-label` on `code` or `pre` alone; give them `role="group"` and a name.
-12. **Live regions follow the topmost open dialog.** An open Dialog makes the page outside it inert and hidden from screen readers. Anything that must be heard or reached while it is open (the Announcer's live region, the toast stack) renders inside the topmost open dialog, through its `toLiveRegionView: () => Html` (rendered inside the `<dialog>`, outside the card), and in the body otherwise. Every dialog-like Submodel (ConfirmDialog, KeyHelp, CommandPalette) passes `toLiveRegionView` through. A Menu does not trap focus, so it hosts nothing. `LiveRegion.place` decides which host from the application's Model, and the application lists its dialogs in stacking order (the specimen's `site/src/liveRegion.ts`, shown under Setting up). A `role="status"` element stays in the DOM with only its contents swapped; it is never mounted already holding its message, which would go unheard.
+12. **Live regions follow the topmost open dialog.** An open Dialog makes the page outside it inert and hidden from screen readers. Anything that must be heard or reached while it is open (the Announcer's live region, the toast stack) renders inside the topmost open dialog, through its `toLiveRegionView: () => Html` (rendered inside the `<dialog>`, outside the card), and in the body otherwise. Every dialog-like Submodel (ConfirmDialog, KeyHelp, CommandPalette) passes `toLiveRegionView` through. A Menu does not trap focus, so it hosts nothing. `LiveRegion.place` decides which host from the application's Model, and the application lists its dialogs in stacking order (the specimen's `site/src/live-region.ts`, shown under Setting up). A `role="status"` element stays in the DOM with only its contents swapped; it is never mounted already holding its message, which would go unheard.
 13. **The key platform lives in the application's Model** (`KeyHint.KeyPlatform`, starting `"Other"` so server and browser render alike), set once by one init Command that runs `KeyHint.detectKeyPlatform`. Components take `platform` as an input; none detects it.
 14. **Shipped Commands for page-wide side effects.** What every application would otherwise write for itself is a Command in its namespace (`Focus.Focus`, `Announcer.Announce`, `Announcer.Flash`, `SkipLink.ScrollToFragment`), reporting a `Completed*` Message from that namespace's `Message` union, which the application's own union declares too (`CompletedAnnounce: {}`), so the tag matches and its update changes nothing for it. One Command per effect, so a Story test resolves it by its one name. A component that says or focuses something as part of its own work keeps a Command named for that work (`Board.AnnounceMove`, `CopyButton.AnnounceCopy`), so its name never collides with the application's.
 15. **A Mount reports through the parent.** A View that owns a Mount takes a required `toParentMessage: (message: X.Message) => ParentMessage` (TopBar, StatusBar, Toolbar, the mermaid adapter), and a fire-and-forget Mount maps to a caller `Completed*` Message the parent may ignore. A bare `onX: Message` is used only where the parent's Model acts on the fact (ImageFrame's `onBroken`). In a Scene, resolve the Mount by name with the lifted Message: `Scene.Mount.resolve({ name: X.Mount.name }, toParentMessage(...))`. Where every application's Scene must resolve a component's Mounts to render a page at all, the namespace exports `sceneMounts`, the matchers paired with Messages that change nothing, for `Scene.Mount.resolveAll(...X.sceneMounts)`: `TopBar.sceneMounts(toParentMessage)`, `Toast.sceneMounts` and `Dialog.sceneMounts` (which serves ConfirmDialog, KeyHelp and CommandPalette too).
 16. **Fragment links focus through the application.** A link to `#id` (SkipLink, an ErrorSummary's links) needs the application's URL handler to return `SkipLink.ScrollToFragment` for the changed URL, since Foldkit routes the click.
 17. **Platform services are the application's.** A component that needs a platform service says so in its TSDoc and here (CopyButton writes through Effect's `Clipboard`), and the application provides the Layer in its `resources`.
 18. **Held work gives up.** Work that holds a dialog's ways out (a save, a delete) waits on something outside the page, which can hang, and a hang would shut the reader in. Its Command ends in a timeout mapped to its failure Message (`Effect.timeoutOrElse({ duration, orElse: () => Effect.succeed(FailedSave({ … })) })`), so the hold always ends with the reason in the dialog.
-19. **Upstream gaps.** Where `@foldkit/ui` lacks a capability, the workaround carries `// NOTE: @foldkit/ui gap: <what>` at its site, and that note is the record: there is no list beside it. A wrapper that must build a child Message itself says so in the same note, with a lint disable on that line alone.
+19. **Upstream gaps.** Where `@foldkit/ui` lacks a capability, the workaround is listed under Upstream gaps below, by component, and the code carries no note. A wrapper that must build a child Message itself has a lint disable on that line alone.
+
+### Upstream gaps
+
+What `@foldkit/ui` 0.169.0 and Foldkit lack, and what pixel-paper does instead:
+
+- **DragAndDrop** (Board, Sortable, `src/drag/`):
+  - It has no accessor for which input holds an item. `ghostStyle` is Some only while a pointer drags, so it tells a pointer drag from a keyboard one.
+  - It exposes no update capability for a press, a keyboard pick-up, a pointer's move and release, or a cancel. So Board and Sortable build those child Messages themselves (`drag.ts`, under a lint disable per line).
+  - Its `draggable` bundle forces `role="option"`, `tabindex` and `data-sortable-id`, and its `droppable` bundle forces `role="listbox"`. So a grip carries `data-draggable-id` by hand, a Board column carries `data-droppable-id` by hand, and FocusItem finds the grip by it. While moves are held a Sortable's grip stays, held, so the focus of a keyboard hold that stopping cancels has somewhere to return.
+  - Its ResolveKeyboardMove walks every `[data-droppable-id]` in the document. A column past a board's first or last is another list's, so the Board does not take that step.
+  - Its pointer resolves a drop along one axis, which a wrapping grid cannot use. So Sortable reads the pointer itself and hands DragAndDrop its moves and release.
+  - Tab while an item is held reaches it as a step to another list. A Sortable has no other list, so the item stays.
+  - Its own Escape cancels the move and lets the key travel on, to a dialog around the list. Board and Sortable take the key first and stop it.
+  - Its Subscription keys are fixed, so two users on a page would share them. Board and Sortable lift the ones they use under their own names, behind the parent's prefix (`prefixKeys`).
+- **Dialog:** it has no way to hold a close. Escape, a press on the veil and a `closeButton` control all send `RequestedClose`, so a held dialog reads it by its tag and leaves it out. Its `open` is its update on `RequestedOpen`, which reports `Opened`, so `foldDialog` gives every step an OutMessage fold. It ships no Scene resolution for its resources Mount, so `Dialog`'s test helper builds the child Message the Mount would report.
+- **Combobox:** its popup does not fit an always-open list in a card, so CommandPalette is not built on it. Its list is a popup anchored under the field (portaled unless told not to) behind a press-catcher, hidden until positioned. Its cursor is an index that wraps and passes disabled rows, pointer movement moves it, and leaving the field closes it. Its Escape is handled, so the Dialog never sees the Escape that must close the whole palette.
+- **Menu:** its 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, where the ARIA menu pattern stops on them, and its row ids are private. It opens only under its button, never at a point. So Menu and ContextMenu are hand-built ARIA menus with real focus on their rows, positioned by the public Anchor.
+- **Toast:** it exports no accessor for its entries or for whether one is leaving, and `show` does not return the id it gave the entry. So the stack reads its Model: an entry stops showing as its leave starts (its animation's `isShowing`), and `show` appends the entry. It holds one slip while the pointer rests on it, with no way to hold them all, and no step that holds or releases a slip from outside. So `Stack.hold` and `Stack.release` build the pointer's two child Messages, and the stack holds every slip while the pointer is on any slip or the keyboard is in the stack. Its container is always a polite live region and cannot be told otherwise, so a slip is read from the stack, and only a stack that mounts already holding it says it through the page's live region (`AnnounceSlip`). Its test helper does not export `LEAVE_TRANSITION_GENERATION`, so `toast.test.ts` keeps a copy.
+- **Nav:** it renders one item per href it was given, in order, so NavStrip pairs each item with its own.
+- **RadioGroup:** its `optionId` is private, so `radio-choices.ts` holds its id format, the one place that writes it.
+- **FileDrop:** it exports no `id` accessor, so DropZone reads its Model's field.
+- **Input, Select, Textarea:** they have no required option, so Field says it.
+- **Mounts:** a Mount's teardown runs after the patch that removes it, too late to report a Message. So a Menu or ContextMenu slip that leaves the page while open says so from `OnUnmount`, and a slip opened anew names the opening it was for.
+- **Scene:** a Scene runs no destroy hooks and no Mount against real DOM. Tests of what only a live runtime shows embed the real view in happy-dom (`src/test/embed.ts`, `src/test/settle.ts`).
+- **Subscriptions:** `Subscription.aggregate` throws on a duplicate key. TypeScript does not infer template-literal keys built at runtime, so `prefixKeys` states its record's type once, under a file-scoped `no-unsafe-type-assertion` exception.
 
 ## Do's and Don'ts
 

package/dist/src/adapters/diagram.d.ts

@@ -0,0 +1,38 @@
+import { Effect, Schema } from "effect";
+import type { Mermaid } from "mermaid";
+import { Palette } from "../scheme/scheme.ts";
+declare const MermaidMissing_base: new <A extends Record<string, any> = {}>(args: import("effect/Types").VoidIfEmpty<{ readonly [P in keyof A as P extends "_tag" ? never : P]: A[P]; }>) => import("effect/Cause").YieldableError & {
+    readonly _tag: "MermaidMissing";
+} & Readonly<A>;
+export declare class MermaidMissing extends MermaidMissing_base<{
+    reason: string;
+}> {
+}
+export declare const loadMermaid: Effect.Effect<Mermaid, MermaidMissing>;
+/** 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 declare const Message: import("foldkit/message").MessageUnion<{
+    readonly SucceededDrawDiagram: {
+        palette: Schema.Literals<readonly ["Paper", "Plum"]>;
+    };
+    readonly FailedLoadMermaid: {
+        palette: Schema.Literals<readonly ["Paper", "Plum"]>;
+        reason: Schema.String;
+    };
+    readonly FailedDrawDiagram: {
+        palette: Schema.Literals<readonly ["Paper", "Plum"]>;
+        reason: Schema.String;
+    };
+}>;
+export type Message = typeof Message.Type;
+export declare const drawDiagram: (load: Effect.Effect<Mermaid, MermaidMissing>) => ({ element, source, palette, }: Readonly<{
+    element: Element;
+    source: string;
+    palette: Palette;
+}>) => Effect.Effect<Message>;
+export {};
+//# sourceMappingURL=diagram.d.ts.map

package/dist/src/adapters/diagram.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../../src/adapters/diagram.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,MAAM,EAAU,MAAM,EAAa,MAAM,QAAQ,CAAC;AAExE,OAAO,KAAK,EAAE,OAAO,EAAiB,MAAM,SAAS,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;;;;AAwK9C,qBAAa,cAAe,SAAQ,oBAAmC;IACrE,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;CAAG;AAmBL,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,cAAc,CAQ3D,CAAC;AAsCL;;;;;6DAK6D;AAC7D,eAAO,MAAM,OAAO;;QACM,OAAO;;;QACV,OAAO;QAAW,MAAM;;;QACxB,OAAO;QAAW,MAAM;;EAC7C,CAAC;AAEH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAE1C,eAAO,MAAM,WAAW,SACf,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,qCAK1C,QAAQ,CAAC;IACV,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAcvB,CAAC"}

package/dist/src/adapters/diagram.js

@@ -0,0 +1,206 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Array, Data, Effect, Record, Schema, Semaphore } from "effect";
+import { defineMessageUnion } from "foldkit/message";
+import { Palette } from "../scheme/scheme.js";
+const COLOURS = {
+    ink: "--ink",
+    paper: "--paper",
+    head: "--head",
+    rule: "--rule",
+    muted: "--muted",
+    red: "--red",
+    onHead: "--on-head",
+};
+const readColours = () => {
+    const probe = document.createElement("span");
+    probe.hidden = true;
+    document.documentElement.append(probe);
+    const colours = Record.map(COLOURS, (token) => {
+        probe.style.color = `var(${token})`;
+        return __foldkitBrandViewResult((getComputedStyle(probe).color), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#anonymous");
+    });
+    probe.remove();
+    return __foldkitBrandViewResult((colours), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#readColours");
+};
+const isDark = (rgb) => {
+    const [red = 255, green = 255, blue = 255] = Array.map(rgb.match(/[\d.]+/gu) ?? [], Number);
+    return __foldkitBrandViewResult((red * 0.299 + green * 0.587 + blue * 0.114 < 128), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#isDark");
+};
+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); }
+`;
+const PIXELS = /^(?<amount>\d*\.?\d+)px$/u;
+const theme = () => {
+    const colours = readColours();
+    const style = getComputedStyle(document.documentElement);
+    const body = style.getPropertyValue("--font-body").trim();
+    const type = style.getPropertyValue("--type-body").trim();
+    const amount = PIXELS.exec(type)?.groups?.["amount"];
+    if (amount === undefined) {
+        throw new Error(`--type-body is not a length in pixels: "${type}".`);
+    }
+    const size = Number(amount);
+    return __foldkitBrandViewResult(({
+        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,
+        },
+        flowchart: { curve: "step", padding: 12, nodeSpacing: 40, rankSpacing: 48 },
+        sequence: { rightAngles: true },
+    }), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#theme");
+};
+export class MermaidMissing extends Data.TaggedError("MermaidMissing") {
+}
+class DiagramError extends Data.TaggedError("DiagramError") {
+}
+const reasonOf = (cause) => __foldkitBrandViewResult((cause instanceof Error ? cause.message : String(cause)), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#reasonOf");
+const DRAWING = Semaphore.makeUnsafe(1);
+const loadFace = async (family) => {
+    const root = getComputedStyle(document.documentElement);
+    return __foldkitBrandViewResult((await document.fonts.load(`${root.getPropertyValue("--type-body").trim()} ${root.getPropertyValue(family).trim()}`)), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#loadFace");
+};
+export const loadMermaid = Effect.tryPromise({
+    try: async () => {
+        const { default: mermaid } = await import("mermaid");
+        return __foldkitBrandViewResult((mermaid), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#try");
+    },
+    catch: (cause) => __foldkitBrandViewResult((new MermaidMissing({ reason: reasonOf(cause) })), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#catch"),
+});
+const loadFaces = Effect.tryPromise({
+    try: async () => __foldkitBrandViewResult((await Promise.all([loadFace("--font-px"), loadFace("--font-body")])), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#try~2"),
+    catch: (cause) => __foldkitBrandViewResult((new DiagramError({ reason: reasonOf(cause) })), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#catch~2"),
+});
+const renderDiagram = (load, box, source) => __foldkitBrandViewResult((Effect.gen(function* () {
+    const [mermaid] = yield* Effect.all([load, loadFaces], {
+        concurrency: "unbounded",
+    });
+    return __foldkitBrandViewResult((yield* Effect.tryPromise({
+        try: async () => {
+            mermaid.initialize({
+                startOnLoad: false,
+                suppressErrorRendering: true,
+                ...theme(),
+            });
+            const { svg } = await mermaid.render(`pixel-paper-diagram-${crypto.randomUUID()}`, source, box);
+            return __foldkitBrandViewResult((svg), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#try~3");
+        },
+        catch: (cause) => __foldkitBrandViewResult((new DiagramError({ reason: reasonOf(cause) })), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#catch~3"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#anonymous~2");
+}).pipe(Semaphore.withPermit(DRAWING))), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#renderDiagram");
+/** 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 const drawDiagram = (load) => __foldkitBrandViewResult((({ element, source, palette, }) => __foldkitBrandViewResult((renderDiagram(load, element, source).pipe(Effect.tap((svg) => __foldkitBrandViewResult((Effect.sync(() => {
+    element.innerHTML = svg;
+})), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#anonymous~4")), Effect.as(Message.SucceededDrawDiagram({ palette })), Effect.catchTags({
+    MermaidMissing: ({ reason }) => __foldkitBrandViewResult((Effect.succeed(Message.FailedLoadMermaid({ palette, reason }))), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#MermaidMissing"),
+    DiagramError: ({ reason }) => __foldkitBrandViewResult((Effect.succeed(Message.FailedDrawDiagram({ palette, reason }))), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#DiagramError"),
+}))), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#anonymous~3")), "@gjermundgaraba-designs/pixel-paper/src/adapters/diagram.js#drawDiagram");

package/dist/src/adapters/mermaid.d.ts

@@ -2,26 +2,8 @@ import { Schema } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 import * as Mount from "foldkit/mount";
 import { Palette } from "../scheme/scheme.ts";
-/** 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 declare const Message: import("foldkit/message").MessageUnion<{
-    readonly SucceededDrawDiagram: {
-        palette: Schema.Literals<readonly ["Paper", "Plum"]>;
-    };
-    readonly FailedLoadMermaid: {
-        palette: Schema.Literals<readonly ["Paper", "Plum"]>;
-        reason: Schema.String;
-    };
-    readonly FailedDrawDiagram: {
-        palette: Schema.Literals<readonly ["Paper", "Plum"]>;
-        reason: Schema.String;
-    };
-}>;
-export type Message = typeof Message.Type;
+import { Message } from "./diagram.ts";
+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
  *  and draws again. A View lifts it with `Mount.mapMessage`, which a Scene does not replay:

package/dist/src/adapters/mermaid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mermaid.d.ts","sourceRoot":"","sources":["../../../src/adapters/mermaid.ts"],"names":[],"mappings":"AAcA,OAAO,EAA+B,MAAM,EAAa,MAAM,QAAQ,CAAC;AACxE,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAGvC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAgO9C;;;;;6DAK6D;AAC7D,eAAO,MAAM,OAAO;;QACM,OAAO;;;QACV,OAAO;QAAW,MAAM;;;QACxB,OAAO;QAAW,MAAM;;EAC7C,CAAC;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C;;;uFAGuF;AACvF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EAkBtB,CAAC;AAIH,yDAAyD;AACzD,MAAM,MAAM,UAAU,CAAC,aAAa,IAAI,QAAQ,CAAC;IAC/C;mBACe;IACf,MAAM,EAAE,MAAM,CAAC;IACf;4EACwE;IACxE,OAAO,EAAE,OAAO,CAAC;IACjB;+BAC2B;IAC3B,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,aAAa,CAAC;CACtD,CAAC,CAAC;AAEH;mFACmF;AACnF,eAAO,MAAM,IAAI,GAAI,aAAa,UACxB,UAAU,CAAC,aAAa,CAAC,KAC9B,WAAW,CAAC,aAAa,CAAC,KAC5B,IAOF,CAAC"}
+{"version":3,"file":"mermaid.d.ts","sourceRoot":"","sources":["../../../src/adapters/mermaid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAA4B,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC;;;uFAGuF;AACvF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EAQtB,CAAC;AAEH,yDAAyD;AACzD,MAAM,MAAM,UAAU,CAAC,aAAa,IAAI,QAAQ,CAAC;IAC/C;mBACe;IACf,MAAM,EAAE,MAAM,CAAC;IACf;4EACwE;IACxE,OAAO,EAAE,OAAO,CAAC;IACjB;+BAC2B;IAC3B,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,aAAa,CAAC;CACtD,CAAC,CAAC;AAEH;mFACmF;AACnF,eAAO,MAAM,IAAI,GAAI,aAAa,UACxB,UAAU,CAAC,aAAa,CAAC,KAC9B,WAAW,CAAC,aAAa,CAAC,KAC5B,IASF,CAAC"}

package/dist/src/adapters/mermaid.js

@@ -1,241 +1,21 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-// 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 { defineMessageUnion } from "foldkit/message";
+import { Schema } from "effect";
 import * as Mount from "foldkit/mount";
 import { Palette } from "../scheme/scheme.js";
-const COLOURS = {
-    ink: "--ink",
-    paper: "--paper",
-    head: "--head",
-    rule: "--rule",
-    muted: "--muted",
-    red: "--red",
-    onHead: "--on-head",
-};
-/** 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 = () => {
-    const probe = document.createElement("span");
-    probe.hidden = true;
-    document.documentElement.append(probe);
-    const colours = Record.map(COLOURS, (token) => {
-        probe.style.color = `var(${token})`;
-        return __foldkitBrandViewResult((getComputedStyle(probe).color), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#anonymous");
-    });
-    probe.remove();
-    return __foldkitBrandViewResult((colours), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#readColours");
-};
-/** Plum or paper, by the paper's own lightness. */
-const isDark = (rgb) => {
-    const [red = 255, green = 255, blue = 255] = Array.map(rgb.match(/[\d.]+/g) ?? [], Number);
-    return __foldkitBrandViewResult((red * 0.299 + green * 0.587 + blue * 0.114 < 128), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#isDark");
-};
-// 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 = () => {
-    const colours = readColours();
-    const style = getComputedStyle(document.documentElement);
-    const body = style.getPropertyValue("--font-body").trim();
-    const size = Number.parseFloat(style.getPropertyValue("--type-body"));
-    return __foldkitBrandViewResult(({
-        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 },
-    }), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#theme");
-};
-// 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") {
-}
-/** 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") {
-}
-const reasonOf = (cause) => __foldkitBrandViewResult((cause instanceof Error ? cause.message : String(cause)), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#reasonOf");
-// 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) => {
-    const root = getComputedStyle(document.documentElement);
-    return __foldkitBrandViewResult((document.fonts.load(`${root.getPropertyValue("--type-body").trim()} ${root.getPropertyValue(family).trim()}`)), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#loadFace");
-};
-const loadMermaid = Effect.tryPromise({
-    try: () => __foldkitBrandViewResult((import("mermaid")), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#try"),
-    catch: (cause) => __foldkitBrandViewResult((new MermaidMissing({ reason: reasonOf(cause) })), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#catch"),
-});
-const loadFaces = Effect.tryPromise({
-    try: () => __foldkitBrandViewResult((Promise.all([loadFace("--font-px"), loadFace("--font-body")])), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#try~2"),
-    catch: (cause) => __foldkitBrandViewResult((new DiagramError({ reason: reasonOf(cause) })), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#catch~2"),
-});
-/** 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, source) => __foldkitBrandViewResult((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 __foldkitBrandViewResult((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 __foldkitBrandViewResult((svg), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#try~3");
-        },
-        catch: (cause) => __foldkitBrandViewResult((new DiagramError({ reason: reasonOf(cause) })), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#catch~3"),
-    })), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#anonymous~2");
-}).pipe(Semaphore.withPermit(DRAWING))), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#renderDiagram");
-// 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 },
-});
-// MOUNT
+import { Message, drawDiagram, loadMermaid } from "./diagram.js";
+export { Message } from "./diagram.js";
 /** 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
  *  and draws again. A View lifts it with `Mount.mapMessage`, which a Scene does not replay:
  *  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 }) => __foldkitBrandViewResult((renderDiagram(element, source).pipe(Effect.tap((svg) => __foldkitBrandViewResult((Effect.sync(() => {
-        element.innerHTML = svg;
-    })), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#anonymous~3")), Effect.as(Message.SucceededDrawDiagram({ palette })), Effect.catchTags({
-        MermaidMissing: ({ reason }) => __foldkitBrandViewResult((Effect.succeed(Message.FailedLoadMermaid({ palette, reason }))), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#MermaidMissing"),
-        DiagramError: ({ reason }) => __foldkitBrandViewResult((Effect.succeed(Message.FailedDrawDiagram({ palette, reason }))), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#DiagramError"),
-    }))), "@gjermundgaraba-designs/pixel-paper/src/adapters/mermaid.js#execute"),
+    messages: [
+        Message.SucceededDrawDiagram,
+        Message.FailedLoadMermaid,
+        Message.FailedDrawDiagram,
+    ],
+    execute: drawDiagram(loadMermaid),
 });
 /** The box a diagram is drawn in, once it is on the page. Empty on the server and until the
  *  drawing lands; the caller shows a Loading line or an error Notice beside it. */

package/dist/src/announcer/announcer.d.ts

@@ -20,11 +20,7 @@ export declare const ANNOUNCER_ATTRIBUTE = "data-pixel-paper-announcer";
  * `LiveRegion.place` puts them where the rule says.
  */
 export declare const view: <Message>(h: HtmlBuilder<Message>) => Html;
-/** 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 declare const announce: (text: string) => Effect.Effect<void>;
-/** Inverts the element `selector` finds for one beat; `Flash` runs it. */
 export declare const flash: (selector: string) => Effect.Effect<void>;
 /**
  * Says `text` to screen readers through the page's live region (see `view`). Words said in

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

@@ -1 +1 @@
-{"version":3,"file":"announcer.d.ts","sourceRoot":"","sources":["../../../src/announcer/announcer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,MAAM,EAAU,MAAM,EAAQ,MAAM,QAAQ,CAAC;AACvE,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD;;sDAEsD;AACtD,eAAO,MAAM,OAAO;;;EAGlB,CAAC;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C;uFACuF;AACvF,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAIhE;;;;;;GAMG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAMpD,CAAC;AA6CL;;mCAEmC;AACnC,eAAO,MAAM,QAAQ,SAAU,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAQtD,CAAC;AAsCL,0EAA0E;AAC1E,eAAO,MAAM,KAAK,aAAc,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CASvD,CAAC;AAIL;;;;GAIG;AACH,eAAO,MAAM,QAAQ;;;;iBAInB,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,KAAK;;;;iBAIhB,CAAC"}
+{"version":3,"file":"announcer.d.ts","sourceRoot":"","sources":["../../../src/announcer/announcer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,MAAM,EAAU,MAAM,EAAQ,MAAM,QAAQ,CAAC;AACvE,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItD;;sDAEsD;AACtD,eAAO,MAAM,OAAO;;;EAGlB,CAAC;AAEH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAE1C;uFACuF;AACvF,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAIhE;;;;;;GAMG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAMpD,CAAC;AA0DL,eAAO,MAAM,QAAQ,SAAU,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAQtD,CAAC;AAiDL,eAAO,MAAM,KAAK,aAAc,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAWvD,CAAC;AAEL;;;;GAIG;AACH,eAAO,MAAM,QAAQ;;;;iBAKnB,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,KAAK;;;;iBAKhB,CAAC"}