@gjermundgaraba-designs/pixel-paper 0.17.0 → 0.19.0

package/dist/src/sortable/sortable.d.ts

@@ -245,6 +245,8 @@ export declare const update: (model: Model, message: Message) => Readonly<{
         }>;
     };
     commands?: Update.Commands<{
+        readonly _tag: "PressedEscape";
+    } | {
         readonly _tag: "CancelledPointer";
     } | {
         readonly _tag: "CompletedAnnounceReorder";
@@ -253,6 +255,9 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     } | {
         readonly _tag: "GotDragAndDropMessage";
         readonly message: {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
+        } | {
             readonly _tag: "ActivatedKeyboardDrag";
             readonly itemId: string;
             readonly containerId: string;
@@ -279,9 +284,6 @@ export declare const update: (model: Model, message: Message) => Readonly<{
                 readonly containerId: string;
                 readonly index: number;
             }>;
-        } | {
-            readonly _tag: "PressedArrowKey";
-            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
         } | {
             readonly _tag: "PressedDraggable";
             readonly itemId: string;
@@ -299,8 +301,6 @@ export declare const update: (model: Model, message: Message) => Readonly<{
         readonly clientX: number;
         readonly clientY: number;
         readonly maybeIndex: Option.Option<number>;
-    } | {
-        readonly _tag: "PressedEscape";
     } | {
         readonly _tag: "PressedGripKey";
         readonly itemId: string;
@@ -413,6 +413,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
             }>;
         }>;
     }, {
+        readonly _tag: "PressedEscape";
+    } | {
         readonly _tag: "CancelledPointer";
     } | {
         readonly _tag: "CompletedAnnounceReorder";
@@ -421,6 +423,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "GotDragAndDropMessage";
         readonly message: {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
+        } | {
             readonly _tag: "ActivatedKeyboardDrag";
             readonly itemId: string;
             readonly containerId: string;
@@ -447,9 +452,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
                 readonly containerId: string;
                 readonly index: number;
             }>;
-        } | {
-            readonly _tag: "PressedArrowKey";
-            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
         } | {
             readonly _tag: "PressedDraggable";
             readonly itemId: string;
@@ -467,8 +469,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly clientX: number;
         readonly clientY: number;
         readonly maybeIndex: Option.Option<number>;
-    } | {
-        readonly _tag: "PressedEscape";
     } | {
         readonly _tag: "PressedGripKey";
         readonly itemId: string;
@@ -559,6 +559,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
             }>;
         }>;
     }, {
+        readonly _tag: "PressedEscape";
+    } | {
         readonly _tag: "CancelledPointer";
     } | {
         readonly _tag: "CompletedAnnounceReorder";
@@ -567,6 +569,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "GotDragAndDropMessage";
         readonly message: {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
+        } | {
             readonly _tag: "ActivatedKeyboardDrag";
             readonly itemId: string;
             readonly containerId: string;
@@ -593,9 +598,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
                 readonly containerId: string;
                 readonly index: number;
             }>;
-        } | {
-            readonly _tag: "PressedArrowKey";
-            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
         } | {
             readonly _tag: "PressedDraggable";
             readonly itemId: string;
@@ -613,8 +615,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly clientX: number;
         readonly clientY: number;
         readonly maybeIndex: Option.Option<number>;
-    } | {
-        readonly _tag: "PressedEscape";
     } | {
         readonly _tag: "PressedGripKey";
         readonly itemId: string;
@@ -710,6 +710,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
             }>;
         }>;
     }, {
+        readonly _tag: "PressedEscape";
+    } | {
         readonly _tag: "CancelledPointer";
     } | {
         readonly _tag: "CompletedAnnounceReorder";
@@ -718,6 +720,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "GotDragAndDropMessage";
         readonly message: {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
+        } | {
             readonly _tag: "ActivatedKeyboardDrag";
             readonly itemId: string;
             readonly containerId: string;
@@ -744,9 +749,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
                 readonly containerId: string;
                 readonly index: number;
             }>;
-        } | {
-            readonly _tag: "PressedArrowKey";
-            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
         } | {
             readonly _tag: "PressedDraggable";
             readonly itemId: string;
@@ -764,8 +766,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly clientX: number;
         readonly clientY: number;
         readonly maybeIndex: Option.Option<number>;
-    } | {
-        readonly _tag: "PressedEscape";
     } | {
         readonly _tag: "PressedGripKey";
         readonly itemId: string;
@@ -857,6 +857,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
             }>;
         }>;
     }, {
+        readonly _tag: "PressedEscape";
+    } | {
         readonly _tag: "CancelledPointer";
     } | {
         readonly _tag: "CompletedAnnounceReorder";
@@ -865,6 +867,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "GotDragAndDropMessage";
         readonly message: {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
+        } | {
             readonly _tag: "ActivatedKeyboardDrag";
             readonly itemId: string;
             readonly containerId: string;
@@ -891,9 +896,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
                 readonly containerId: string;
                 readonly index: number;
             }>;
-        } | {
-            readonly _tag: "PressedArrowKey";
-            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
         } | {
             readonly _tag: "PressedDraggable";
             readonly itemId: string;
@@ -911,8 +913,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly clientX: number;
         readonly clientY: number;
         readonly maybeIndex: Option.Option<number>;
-    } | {
-        readonly _tag: "PressedEscape";
     } | {
         readonly _tag: "PressedGripKey";
         readonly itemId: string;
@@ -1055,6 +1055,8 @@ export declare const view: import("foldkit/submodel").View<{
         }>;
     }>;
 }, {
+    readonly _tag: "PressedEscape";
+} | {
     readonly _tag: "CancelledPointer";
 } | {
     readonly _tag: "CompletedAnnounceReorder";
@@ -1063,6 +1065,9 @@ export declare const view: import("foldkit/submodel").View<{
 } | {
     readonly _tag: "GotDragAndDropMessage";
     readonly message: {
+        readonly _tag: "PressedArrowKey";
+        readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
+    } | {
         readonly _tag: "ActivatedKeyboardDrag";
         readonly itemId: string;
         readonly containerId: string;
@@ -1089,9 +1094,6 @@ export declare const view: import("foldkit/submodel").View<{
             readonly containerId: string;
             readonly index: number;
         }>;
-    } | {
-        readonly _tag: "PressedArrowKey";
-        readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
     } | {
         readonly _tag: "PressedDraggable";
         readonly itemId: string;
@@ -1109,8 +1111,6 @@ export declare const view: import("foldkit/submodel").View<{
     readonly clientX: number;
     readonly clientY: number;
     readonly maybeIndex: Option.Option<number>;
-} | {
-    readonly _tag: "PressedEscape";
 } | {
     readonly _tag: "PressedGripKey";
     readonly itemId: string;

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

@@ -1 +1 @@
-{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/sortable/sortable.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/sortable/sortable.ts"],"names":[],"mappings":"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"}

package/dist/src/sortable/sortable.js

@@ -10,7 +10,7 @@ import * as Subscription from "foldkit/subscription";
 import * as Update from "foldkit/update";
 import * as Announcer from "../announcer/announcer.js";
 import * as Button from "../button/button.js";
-import { LEFT_BUTTON, activatedKeyboardDrag, cancelledDrag, escapeKeys, insertionIndex, isCarrying, markDragging, measureLift, movedPointer, phaseOf, pressedDraggable, releasedPointer, } from "../drag/drag.js";
+import { LEFT_BUTTON, activatedKeyboardDrag, cancelledDrag, escapeKeys, insertionIndex, isCarrying, markDragging, measureLift, movedPointer, phaseOf, pressedDraggable, pressingPointer, releasedPointer, } from "../drag/drag.js";
 import * as Glyph from "../glyph/glyph.js";
 import * as IconButton from "../iconButton/iconButton.js";
 import { LOCALE } from "../locale/locale.js";
@@ -289,15 +289,7 @@ const pointerAt = (hold, event) => (__foldkitBrandViewResult(({
     maybeIndex: pointerIndex(hold.listId, hold.heldHook, event.clientX, event.clientY),
 }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#pointerAt"));
 /** The pressing pointer's moves, release and cancel; another pointer's are not the list's. */
-export const pointerMessages = (hold) => {
-    const fromPressing = (type) => __foldkitBrandViewResult((Stream.fromEventListener(document, type).pipe(Stream.filter((event) => __foldkitBrandViewResult((event.pointerId === hold.pointerId), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~25")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#fromPressing");
-    const streams = [
-        Stream.map(fromPressing("pointermove"), (event) => __foldkitBrandViewResult((Message.MovedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~26")),
-        Stream.map(fromPressing("pointerup"), (event) => __foldkitBrandViewResult((Message.ReleasedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~27")),
-        Stream.map(fromPressing("pointercancel"), () => __foldkitBrandViewResult((Message.CancelledPointer()), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~28")),
-    ];
-    return __foldkitBrandViewResult((Stream.mergeAll(streams, { concurrency: "unbounded" })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#pointerMessages");
-};
+export const pointerMessages = (hold) => __foldkitBrandViewResult((Stream.map(pressingPointer(hold.pointerId), (event) => __foldkitBrandViewResult((Match.value(event.type).pipe(Match.when("pointermove", () => __foldkitBrandViewResult((Message.MovedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~26")), Match.when("pointerup", () => __foldkitBrandViewResult((Message.ReleasedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~27")), Match.orElse(() => __foldkitBrandViewResult((Message.CancelledPointer()), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~28")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~25"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#pointerMessages");
 const ownSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResult(({
     pointer: entry({ maybeHold: Schema.Option(PointerHold) }, {
         modelToDependencies: (model) => (__foldkitBrandViewResult(({

package/dist/src/toast/toast.d.ts

@@ -326,8 +326,6 @@ export declare const update: (model: Model, message: Message) => Readonly<{
                 readonly pendingDismissVersion: number;
                 readonly isHovered: boolean;
                 readonly swipeState: {
-                    readonly _tag: "Idle";
-                } | {
                     readonly _tag: "Dismissing";
                     readonly offsetX: number;
                     readonly direction: "Left" | "Right";
@@ -336,6 +334,8 @@ export declare const update: (model: Model, message: Message) => Readonly<{
                     readonly pointerId: number;
                     readonly startX: number;
                     readonly currentX: number;
+                } | {
+                    readonly _tag: "Idle";
                 } | {
                     readonly _tag: "Settling";
                     readonly offsetX: number;
@@ -371,15 +371,15 @@ export declare const update: (model: Model, message: Message) => Readonly<{
             readonly _tag: "GotAnimationMessage";
             readonly entryId: string;
             readonly message: {
-                readonly _tag: "Hid";
-            } | {
-                readonly _tag: "Showed";
-            } | {
                 readonly _tag: "CompletedWaitForPaint";
                 readonly generation: number;
             } | {
                 readonly _tag: "EndedAnimation";
                 readonly generation: number;
+            } | {
+                readonly _tag: "Hid";
+            } | {
+                readonly _tag: "Showed";
             };
         } | {
             readonly _tag: "HoveredEntry";
@@ -557,8 +557,6 @@ export declare const view: import("foldkit/submodel").View<{
             readonly pendingDismissVersion: number;
             readonly isHovered: boolean;
             readonly swipeState: {
-                readonly _tag: "Idle";
-            } | {
                 readonly _tag: "Dismissing";
                 readonly offsetX: number;
                 readonly direction: "Left" | "Right";
@@ -567,6 +565,8 @@ export declare const view: import("foldkit/submodel").View<{
                 readonly pointerId: number;
                 readonly startX: number;
                 readonly currentX: number;
+            } | {
+                readonly _tag: "Idle";
             } | {
                 readonly _tag: "Settling";
                 readonly offsetX: number;
@@ -602,15 +602,15 @@ export declare const view: import("foldkit/submodel").View<{
         readonly _tag: "GotAnimationMessage";
         readonly entryId: string;
         readonly message: {
-            readonly _tag: "Hid";
-        } | {
-            readonly _tag: "Showed";
-        } | {
             readonly _tag: "CompletedWaitForPaint";
             readonly generation: number;
         } | {
             readonly _tag: "EndedAnimation";
             readonly generation: number;
+        } | {
+            readonly _tag: "Hid";
+        } | {
+            readonly _tag: "Showed";
         };
     } | {
         readonly _tag: "HoveredEntry";

package/dist/src/window/window.d.ts

@@ -6,6 +6,8 @@ export type ViewConfig<Message> = Readonly<{
     id: string;
     /** Pixel caps in the inverted title bar. */
     title: string;
+    /** A quiet IconButton before the kind glyph: a Reel's grip. */
+    lead?: ReadonlyArray<Html>;
     /** What kind of thing it is: a terminal, a note, a machine. */
     glyph?: GlyphName;
     /** A chip in the title bar: its state. */

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

@@ -1 +1 @@
-{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/window/window.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAOpD,wDAAwD;AACxD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACtC,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,iEAAiE;IACjE,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH;;6DAE6D;AAC7D,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAoCpF,CAAC"}
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/window/window.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAOpD,wDAAwD;AACxD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACtC,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,iEAAiE;IACjE,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH;;6DAE6D;AAC7D,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAsCpF,CAAC"}

package/dist/src/window/window.js

@@ -7,13 +7,14 @@ import { slotView } from "../slot/slot.js";
  *  its body scrolls inside, and its title bar carries its kind, its state and its tools. A
  *  region landmark (`<section>`) named by its `h2` title. */
 export const view = (config, h) => {
-    const { id, title, glyph, status = [], tools = [], onClose, body, foot = [], isFlush = false, } = config;
+    const { id, title, lead = [], glyph, status = [], tools = [], onClose, body, foot = [], isFlush = false, } = config;
     return __foldkitBrandViewResult((h.section([
         h.Id(id),
         h.AriaLabelledBy(titleId(id)),
         h.Class(isFlush ? "panel window flush" : "panel window"),
     ], [
         h.header([h.Class("panel-tb")], [
+            ...slotView("span", "panel-lead", lead, h),
             ...(glyph === undefined ? [] : [Glyph.view({ name: glyph }, h)]),
             h.h2([h.Id(titleId(id))], [title]),
             ...status,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjermundgaraba-designs/pixel-paper",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/drag/drag.ts

@@ -1,7 +1,7 @@
-// Shared by Board and Sortable, the two users of @foldkit/ui's DragAndDrop: the phase a drag
-// is in, the DragAndDrop Messages both build, what a press lifts, Escape taken before anything
-// else, the lifted copy's measure, and the closest-centre drop target a sortable resolves for
-// a pointer.
+// Shared by Board and Sortable, the two users of @foldkit/ui's DragAndDrop, and Reel, which
+// holds its own: the phase a drag is in, the DragAndDrop Messages both build, what a press
+// lifts, Escape taken before anything else, the pressing pointer's events, the lifted copy's
+// measure, and the closest-centre drop target a sortable resolves for a pointer.
 
 import { DragAndDrop as UiDragAndDrop } from "@foldkit/ui";
 import { Array, Effect, Option, Order, Stream, pipe } from "effect";
@@ -110,6 +110,21 @@ export const escapeKeys = <Message>(message: Message): Stream.Stream<Message> =>
     options: { capture: true },
   });
 
+// POINTER
+
+/** The moves, release and cancel of the pointer `pointerId`, on the document; another
+ *  pointer's are not the drag's. */
+export const pressingPointer = (pointerId: number): Stream.Stream<PointerEvent> =>
+  Stream.filter(
+    Stream.mergeAll(
+      Array.map(["pointermove", "pointerup", "pointercancel"] as const, (type) =>
+        Stream.fromEventListener<PointerEvent>(document, type),
+      ),
+      { concurrency: "unbounded" },
+    ),
+    (event) => event.pointerId === pointerId,
+  );
+
 // LIFTED COPY
 
 /** Sizes the copy that follows the pointer to the element `sourceSelector` finds, and keeps the

package/src/glyph/glyph.ts

@@ -14,7 +14,8 @@ export type ViewConfig = Readonly<{
   size?: number;
 }>;
 
-const cellView =
+/** One inked rectangle of a drawing, in `currentColor`. */
+export const cellView =
   <Message>(h: HtmlBuilder<Message>) =>
   ([x, y, width, height]: Cell): Html =>
     h.rect([

package/src/glyph/glyphs.ts

@@ -2614,10 +2614,11 @@ export const artRows = (art: string): ReadonlyArray<string> =>
 
 const INK_RUN = /#+/g;
 
-/** A drawing as rectangles one cell tall: one for each horizontal run of ink in each row. */
-const toCells = (art: string): ReadonlyArray<Cell> =>
+/** A drawing as rectangles one cell tall: one for each horizontal run of ink in each row,
+ *  up to `width` cells into the row. */
+export const toCells = (art: string, width: number): ReadonlyArray<Cell> =>
   Array.flatMap(artRows(art), (row, y) =>
-    Array.map(Array.fromIterable(row.slice(0, GRID_SIZE).matchAll(INK_RUN)), (run): Cell => [
+    Array.map(Array.fromIterable(row.slice(0, width).matchAll(INK_RUN)), (run): Cell => [
       run.index,
       y,
       run[0].length,
@@ -2627,7 +2628,8 @@ const toCells = (art: string): ReadonlyArray<Cell> =>
 
 const drawFamily = <Name extends string>(
   family: Record.ReadonlyRecord<Name, string>,
-): Record.ReadonlyRecord<Name, ReadonlyArray<Cell>> => Record.map(family, toCells);
+): Record.ReadonlyRecord<Name, ReadonlyArray<Cell>> =>
+  Record.map(family, (art) => toCells(art, GRID_SIZE));
 
 /** Every glyph as the rectangles `Glyph.view` draws. */
 export const glyphs: Record.ReadonlyRecord<GlyphName, ReadonlyArray<Cell>> = {

package/src/identity/identity.ts

@@ -11,6 +11,8 @@ export type ViewConfig = Readonly<{
   label: string;
   /** The monogram's letters, when the name's initials are not the ones people know. */
   letters?: string;
+  /** The monogram's mark drawn in cells, in place of its letters (see Monogram). */
+  drawing?: string;
   /** A line under the name: an id, a kind, a scope. */
   meta?: ReadonlyArray<Html | string>;
   /** Beside a name set large, as a card's subject. */
@@ -20,13 +22,19 @@ export type ViewConfig = Readonly<{
 /** Who or what something is: its monogram beside its name in the sans, and a meta line.
  *  Screen readers hear the name once: the monogram beside it is hidden from them. */
 export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
-  const { label, letters, meta = [], isLarge = false } = config;
+  const { label, letters, drawing, meta = [], isLarge = false } = config;
 
   return h.div(
     [h.Class(isLarge ? "identity large" : "identity")],
     [
       Monogram.view(
-        { label, ...(letters !== undefined && { letters }), isLarge, isDecorative: true },
+        {
+          label,
+          ...(letters !== undefined && { letters }),
+          ...(drawing !== undefined && { drawing }),
+          isLarge,
+          isDecorative: true,
+        },
         h,
       ),
       h.span(

package/src/index.ts

@@ -65,6 +65,7 @@ export * as Prose from "./prose/index.ts";
 export * as QueryChip from "./queryChip/index.ts";
 export * as RadioChoices from "./radioChoices/index.ts";
 export * as Rail from "./rail/index.ts";
+export * as Reel from "./reel/index.ts";
 export * as Remote from "./remote/index.ts";
 export * as Rows from "./rows/index.ts";
 export * as Scheme from "./scheme/index.ts";

package/src/meter/meter.ts

@@ -81,6 +81,10 @@ export type MeterConfig = Readonly<{
   hasNumbers?: boolean;
   /** In a red chip once the value reaches `max`. The percentage by default. */
   full?: string;
+  /** The lit cells take the reading's tone as well: amber from 80%, red at `max`. For a page
+   *  of readings scanned for their level, such as a wall of limits; the reading beside the
+   *  cells still says it in a mark or a chip. */
+  isToned?: boolean;
   /** The last reading failed: the cells print muted, the numbers are the last known, and
    *  screen readers hear "(stale)" after the name. Say why, and when it was last read, in
    *  `foot`. */
@@ -119,6 +123,16 @@ const percentView = <Message>(
   }
 };
 
+const toneClass = (value: number, max: number, isFull: boolean): string => {
+  if (isFull) {
+    return " toned full";
+  } else if (value >= max * HIGH_SHARE) {
+    return " toned high";
+  } else {
+    return " toned";
+  }
+};
+
 const meterView = <Message>(config: MeterConfig, h: HtmlBuilder<Message>): Html => {
   const {
     id,
@@ -129,10 +143,12 @@ const meterView = <Message>(config: MeterConfig, h: HtmlBuilder<Message>): Html
     foot = [],
     isStale = false,
     hasNumbers = true,
+    isToned = false,
   } = config;
   const share = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;
   const isFull = value >= max;
   const numbers = config.valueText ?? numbersText(value, max, config.unit);
+  const rowClass = `meter-row${isStale ? " stale" : ""}${isToned ? toneClass(value, max, isFull) : ""}`;
 
   return UiMeter.view(
     {
@@ -144,7 +160,7 @@ const meterView = <Message>(config: MeterConfig, h: HtmlBuilder<Message>): Html
       toView: (groups) =>
         h.keyed("li")(
           id,
-          [h.Class(isStale ? "meter-row stale" : "meter-row")],
+          [h.Class(rowClass)],
           [
             h.div(
               [h.Class("meter-head")],
@@ -184,7 +200,7 @@ export type ListViewConfig = Readonly<{
  * A ruled list of meters, edge to edge in a flush panel. Each is a named reading against a
  * maximum, in the vocabulary of `<meter>`, built on `@foldkit/ui`'s Meter: 20 cells, the
  * percentage (amber from 80%, a red chip at `max`, and neither 100% nor every cell before it),
- * the numbers in English, a foot line. The cells are the `meter`, named by the printed label,
+ * the numbers in English, a foot line. The cells print ink unless the meter `isToned`. The cells are the `meter`, named by the printed label,
  * with the value, the maximum and the numbers in words for screen readers.
  */
 export const listView = <Message>(config: ListViewConfig, h: HtmlBuilder<Message>): Html =>

package/src/monogram/monogram.ts

@@ -1,6 +1,9 @@
-import { Array, String, pipe } from "effect";
+import { Array, Number, String, pipe } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
+import { cellView } from "../glyph/glyph.ts";
+import { artRows, toCells } from "../glyph/glyphs.ts";
+
 // LETTERS
 
 const WORD_BREAK = /[\s._-]+/;
@@ -25,6 +28,29 @@ const initials = (name: string): string =>
     }),
   );
 
+// DRAWING
+
+/** A drawing prints a pixel per cell, two in a large monogram, so its cells stay whole. */
+const DRAWN_CELL = 1;
+const LARGE_DRAWN_CELL = 2;
+
+const drawingView = <Message>(art: string, isLarge: boolean, h: HtmlBuilder<Message>): Html => {
+  const rows = artRows(art);
+  const columns = Array.reduce(rows, 0, (widest, row) => Number.max(widest, row.length));
+  const cell = isLarge ? LARGE_DRAWN_CELL : DRAWN_CELL;
+
+  return h.svg(
+    [
+      h.ViewBox(`0 0 ${columns} ${rows.length}`),
+      h.Width(`${columns * cell}`),
+      h.Height(`${rows.length * cell}`),
+      h.AriaHidden(true),
+      h.Class("px-icon"),
+    ],
+    Array.map(toCells(art, columns), cellView(h)),
+  );
+};
+
 // VIEW
 
 /** Configuration for rendering a monogram with `view`. */
@@ -33,6 +59,11 @@ export type ViewConfig = Readonly<{
   label: string;
   /** One or two letters, when the name's initials are not the ones people know. */
   letters?: string;
+  /** A mark the product draws in cells, in place of the letters: rows of `#` (ink) and `.`,
+   *  as a glyph is drawn, on a grid of up to 16 for a large monogram. It prints bare, in ink,
+   *  a pixel per cell (two when large): a provider's own mark redrawn in the system's
+   *  cells, never a picture or a brand colour. */
+  drawing?: string;
   /** 34px, beside a name set large (a card of readings, a wall). */
   isLarge?: boolean;
   /** You, among others: the monogram inverts. */
@@ -42,16 +73,25 @@ export type ViewConfig = Readonly<{
   isDecorative?: boolean;
 }>;
 
-/** Letters in an ink square: the identity of a person, a provider or a source, where the
- *  system draws no logos. An image named by `label`, or hidden when `isDecorative`. */
+/** Letters in an ink square, or a mark the product draws in cells: the identity of a person,
+ *  a provider or a source. An image named by `label`, or hidden when `isDecorative`. */
 export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
-  const { label, letters, isLarge = false, isCurrent = false, isDecorative = false } = config;
+  const {
+    label,
+    letters,
+    drawing,
+    isLarge = false,
+    isCurrent = false,
+    isDecorative = false,
+  } = config;
 
   return h.span(
     [
       ...(isDecorative ? [h.AriaHidden(true)] : [h.Role("img"), h.AriaLabel(label)]),
-      h.Class(`monogram${isLarge ? " large" : ""}${isCurrent ? " current" : ""}`),
+      h.Class(
+        `monogram${drawing === undefined ? "" : " drawn"}${isLarge ? " large" : ""}${isCurrent ? " current" : ""}`,
+      ),
     ],
-    [letters ?? initials(label)],
+    [drawing === undefined ? (letters ?? initials(label)) : drawingView(drawing, isLarge, h)],
   );
 };