@gjermundgaraba-designs/pixel-paper 0.17.0 → 0.18.0

package/DESIGN.md

@@ -602,6 +602,14 @@ components:
     backgroundColor: "{colors.muted}"
     width: "10px"
     height: "14px"
+  meter-cell-toned-high:
+    backgroundColor: "{colors.amber}"
+    width: "10px"
+    height: "14px"
+  meter-cell-toned-full:
+    backgroundColor: "{colors.red}"
+    width: "10px"
+    height: "14px"
   strength-cell:
     backgroundColor: "{colors.head}"
     width: "24px"
@@ -802,9 +810,9 @@ Two neutral palettes over one set of tokens, with three meaning hues shared betw
 
 ### Primary
 
-- **Marker Amber** (`{colors.amber}`, both palettes): the Mark (a viewfinder glyph on an amber square beside a marked item), the warn chip (an update waiting, a source behind), a meter reading at or above 80% of its limit, the glyph box of a warning notice, of a confirm dialog and of a reconnecting banner; a stat's change or a bar's reading that the product calls a warning. Always carries Printer Ink text (`{colors.on-status}`); an amber glyph on paper is never allowed because it fails contrast. Where every row is marked the Mark prints plain (muted, no fill): amber is for the one among many.
+- **Marker Amber** (`{colors.amber}`, both palettes): the Mark (a viewfinder glyph on an amber square beside a marked item), the warn chip (an update waiting, a source behind), a meter reading at or above 80% of its limit and a toned meter's lit cells there, the glyph box of a warning notice, of a confirm dialog and of a reconnecting banner; a stat's change or a bar's reading that the product calls a warning. Always carries Printer Ink text (`{colors.on-status}`); an amber glyph on paper is never allowed because it fails contrast. Where every row is marked the Mark prints plain (muted, no fill): amber is for the one among many.
 - **Active Green** (`{colors.green}`, both palettes): the go chip of something that is live or in sync. Also carries Printer Ink text. Nothing else is green.
-- **Urgent Red** (`{colors.red}` paper / `{colors.red-plum}` plum): the danger button's text, border and shadow tint; the blocked and limit-reached chips; a field's error line; the error notice's and error toast's border and glyph box; the offline word and an offline banner's glyph box; a stat's change or a bar's reading at fault; a broken image, video or audio frame; a stale age, a late due day (on a cursor row or card, a red slip with `on-red` text), a failed check, a stale meter's foot; a failed field's rule and label, a failed radio or select box, a fieldset's legend over a failed control; a link to a page that does not exist; the minus sign of a deleted diff line. Red fills carry Paper White text on paper (`{colors.on-red}`) and Printer Ink on plum (`{colors.on-red-plum}`), because plum lightens red for text contrast.
+- **Urgent Red** (`{colors.red}` paper / `{colors.red-plum}` plum): the danger button's text, border and shadow tint; the blocked and limit-reached chips; a toned meter's lit cells at its limit; a field's error line; the error notice's and error toast's border and glyph box; the offline word and an offline banner's glyph box; a stat's change or a bar's reading at fault; a broken image, video or audio frame; a stale age, a late due day (on a cursor row or card, a red slip with `on-red` text), a failed check, a stale meter's foot; a failed field's rule and label, a failed radio or select box, a fieldset's legend over a failed control; a link to a page that does not exist; the minus sign of a deleted diff line. Red fills carry Paper White text on paper (`{colors.on-red}`) and Printer Ink on plum (`{colors.on-red-plum}`), because plum lightens red for text contrast.
 
 ### Neutral
 
@@ -824,7 +832,7 @@ What a program prints (terminal output, highlighted code, a log) is content, not
 
 **The Content Ink Rule.** The `--term-*` and `--code-*` tokens colour only what a program printed, inside a code surface, a terminal, a log or a library adapter. They never colour chrome, state, a border, a fill or a person: a busy build is a chip, not a cyan word, and presence is a Monogram, not a hue.
 
-**The Meaning Colour Rule.** Amber means marked or warning, green means active or in sync, red means urgent, offline, error, missing or destructive. Every other colour on a surface is a neutral token. A new element that wants colour must be one of those three meanings, or it is ink (content inks aside; see the Content Ink Rule). A meter's cells stay ink at every level; the reading beside them carries the colour. A search hit is inverted ink and a list's cursor row a muted outline, never amber, because a hit is a selection, not a warning. Charts and stats keep the rule: bar cells and the line stay ink (a second series is muted ink with smaller cells, never a hue), and a stat's change prints in ink with a direction glyph, because up is not good and down is not bad until the product says so; only a reading the product calls a warning or a fault takes amber or red.
+**The Meaning Colour Rule.** Amber means marked or warning, green means active or in sync, red means urgent, offline, error, missing or destructive. Every other colour on a surface is a neutral token. A new element that wants colour must be one of those three meanings, or it is ink (content inks aside; see the Content Ink Rule). A meter's cells stay ink at every level and the reading beside them carries the colour, except in a toned meter (`isToned`): on a page whose readings are scanned for their level, a wall of limits, the lit cells take the reading's amber from 80% and its red at the limit, and the reading beside them still says so in a mark or a chip, so the level never rests on colour. A search hit is inverted ink and a list's cursor row a muted outline, never amber, because a hit is a selection, not a warning. Charts and stats keep the rule: bar cells and the line stay ink (a second series is muted ink with smaller cells, never a hue), and a stat's change prints in ink with a direction glyph, because up is not good and down is not bad until the product says so; only a reading the product calls a warning or a fault takes amber or red.
 
 **The Red On Commit Rule.** Red never rests on a button. Row and form actions that destroy something (disable, delete, restore over, reset) are neutral buttons; the ConfirmDialog they open carries the one red button, the commit. Red at rest belongs to states only: a blocked chip, a failed check, a missing page, the offline word. A `ConfirmDialog` with `isDanger` is the only destructive confirm: there is no inline arm-then-confirm button ("delete" that turns into "sure?"), because the dialog gives the commit protected focus (cancel is the default) and an alert dialog's semantics, while an armed button is easy to double-click through and shifts the layout as its word changes.
 
@@ -1027,9 +1035,9 @@ The printed button: a paper rectangle in a 2px ink frame that casts a 3px shadow
 
 ### Monograms
 
-**Monogram** → `span.monogram[role="img"][aria-label]` (`.large`, `.current`): one or two letters (the label's initials, or `letters`) in the 11px pixel face, uppercase, centred in a 22px square closed by a 2px ink border on paper; large is 34px with 14px letters, for a card of readings or a wall. `isCurrent` inverts it: you, among others. `isDecorative` → `span.monogram[aria-hidden="true"]`, for a monogram beside the same name in words, which screen readers then hear once. The system draws no logos: a provider, a source, a harness or a person is a monogram beside its name, never a brand mark and never a colour.
+**Monogram** → `span.monogram[role="img"][aria-label]` (`.large`, `.current`): one or two letters (the label's initials, or `letters`) in the 11px pixel face, uppercase, centred in a 22px square closed by a 2px ink border on paper; large is 34px with 14px letters, for a card of readings or a wall. `isCurrent` inverts it: you, among others. `isDecorative` → `span.monogram[aria-hidden="true"]`, for a monogram beside the same name in words, which screen readers then hear once. The system draws no logos of its own: a provider, a source, a harness or a person is a monogram beside its name, never a picture and never a brand colour. Where the product knows a provider's own mark, it may redraw it in cells (`drawing`: rows of `#` and `.`, as a glyph is drawn) → `span.monogram.drawn > svg.px-icon`: the mark prints bare in ink, without the border or the paper, in the square the letters would take, a pixel per cell (two in a large monogram, so a 16-cell drawing is 32px in the 34px square); `isCurrent` sets it in paper on an ink square.
 
-**Identity** → `div.identity (.large) > span.monogram[aria-hidden="true"] + span.identity-text > strong + span.meta`: that pairing as one piece, its name read once (the monogram is decorative beside it). The name in the sans at 600 (16px when large, beside the large monogram, as a card's subject), wrapping rather than clipping; under it a meta line of whatever says which one (an id in code, a kind in a Tag), 8px apart and wrapping. A consent card names the client asking with it; a list of sources, harnesses or people names each.
+**Identity** → `div.identity (.large) > span.monogram[aria-hidden="true"] + span.identity-text > strong + span.meta`: that pairing as one piece (its monogram letters or drawn), its name read once (the monogram is decorative beside it). The name in the sans at 600 (16px when large, beside the large monogram, as a card's subject), wrapping rather than clipping; under it a meta line of whatever says which one (an id in code, a kind in a Tag), 8px apart and wrapping. A consent card names the client asking with it; a list of sources, harnesses or people names each.
 
 ### Time
 
@@ -1037,7 +1045,7 @@ The printed button: a paper rectangle in a 2px ink frame that casts a 3px shadow
 
 ### Panels
 
-- **Panel** → `section.panel[aria-labelledby] > header.panel-tb > span.panel-lead + h2 + span.meta`, then `div.panel-body` (or the body directly when `isFlush`), then `div.panel-foot`. The section is keyed by its `id`, so a panel among siblings that come and go keeps its own element, and a panel under another id is another element: one that replaces another in the same place is built anew (a live region inside it is inserted, not kept), so keep one panel under one id across states that should share it. Square, 2px ink border, Paper White, panel shadow. The title bar is inverted Departure Mono 13px uppercase 0.08em (`--tracking-title`), `padding: 6px 12px`; its meta is 11px at 75% opacity. A control in a title bar (a panel's, a window's or a card's) rings in paper, 2px inside its own edge, because the ink ring would vanish on the ink bar. The body pads 16px with a 14px grid gap; the foot pads `10px 12px` over a 1px rule, with a `.push` slot that goes right. `actions` puts small Buttons and IconButtons in `span.panel-acts` (6px apart) at the title bar's right end, after the meta; the bar trims to `3px 3px 3px 12px` at 31px or more. `lead` puts a quiet IconButton in `span.panel-lead` before the title (a Sortable's grip), and the bar trims its left to 3px the same way; a quiet icon button there prints in paper, hovered too, and held at 60%. On the ink bar a button is a paper outline (a primary one fills paper), flat, nudged 1px when pressed, its ring 4px inside in its own colour; disabled, it prints at 60%.
+- **Panel** → `section.panel[aria-labelledby]` (`[aria-label]` with `name`) `> header.panel-tb > span.panel-lead + h2 + span.meta`, then `div.panel-body` (or the body directly when `isFlush`), then `div.panel-foot`. The section is named by its title, or by `name` where the title repeats among its siblings (panels titled by a kind, one per account), so each landmark keeps a name of its own. It is keyed by its `id`, so a panel among siblings that come and go keeps its own element, and a panel under another id is another element: one that replaces another in the same place is built anew (a live region inside it is inserted, not kept), so keep one panel under one id across states that should share it. Square, 2px ink border, Paper White, panel shadow. The title bar is inverted Departure Mono 13px uppercase 0.08em (`--tracking-title`), `padding: 6px 12px`; its meta is 11px at 75% opacity. A control in a title bar (a panel's, a window's or a card's) rings in paper, 2px inside its own edge, because the ink ring would vanish on the ink bar. The body pads 16px with a 14px grid gap; the foot pads `10px 12px` over a 1px rule, with a `.push` slot that goes right. `actions` puts small Buttons and IconButtons in `span.panel-acts` (6px apart) at the title bar's right end, after the meta; the bar trims to `3px 3px 3px 12px` at 31px or more. `lead` puts a quiet IconButton in `span.panel-lead` before the title (a Sortable's grip), and the bar trims its left to 3px the same way; a quiet icon button there prints in paper, hovered too, and held at 60%. On the ink bar a button is a paper outline (a primary one fills paper), flat, nudged 1px when pressed, its ring 4px inside in its own colour; disabled, it prints at 60%.
 - **Deck** → `main.deck#main`: the column of panels.
 - **EmptyState** → `div.empty > h3.empty-title + p`: `headingLevel` is required and picks the title's element, which looks the same at every level. Where the empty state is a page's or a section's main content it is a heading, `3` inside a Panel (whose title is an `h2`), `1` for a gate or a missing page; `"Strong"` prints `strong.empty-title` where it is not (a chart with nothing to chart, a picture of the state). Centred, `26px 16px`, a 12px uppercase 0.08em (`--tracking-title`) headline, a muted 46ch sentence, an optional action 6px below.
 - **Wall** → `main.wall`, `Wall.markView` → `div.wall-mark` (a 30px ink-bordered glyph box beside the 22px wordmark). `Wall.cornerView` → `aside.wall-corner[aria-label]`, rendered just before the Wall: a paper slip in a 2px ink box on the 3px shadow, `6px 8px`, holding what a top bar would (see Layout).
@@ -1139,7 +1147,7 @@ One keyboard for the page, Vim first, with the arrows beside the letters. The ke
 
 ### Meters and cells
 
-**Cells** (`Meter.cellsView`) → `span.cells[role="meter"] > span.cell (.on)` (`.short` for 24×8px cells). **Meter** (over `@foldkit/ui`'s Meter) → `li.meter-row (.stale)` in `Meter.listView` → `ul.meters`: a reading against a maximum in the vocabulary of `<meter>` (`value`, `max`): the label (name register) and an optional detail (meta) beside twenty cells lit in ink up to the reading; then the reading's state (the percentage in the 12px pixel face below 80% of max, the amber reading mark from 80%, a red chip at max holding `full` or the percentage; below max it never prints 100% or lights every cell, so 49,999 of 50,000 reads 99% with 19 cells); then the numbers (or `valueText`) in 11px muted tabular figures, formatted in English (`41,200`) so server and browser agree, left out with `hasNumbers: false` where they would repeat the percentage (`valueText: "62% used"` beside 62%; screen readers still hear it); then `div.meter-foot` (resets, last read; `.late` red). `ul.meters` is a size container (`container: meters`), so a row lays out by the column it is placed in, not the window: from 560px the name and detail sit in a left column (180px to 240px) beside the cells; narrower, the row stacks and the numbers take a line of their own; under 280px, 240px and 200px the cells step down to 8, 6 and 4px wide, whole pixels. A meter list fits any column from 160px; give it the column's width (a flush panel's body), since a size container takes no width from its content. A stale meter (`isStale`: the last reading failed, the numbers are the last known) prints its lit cells muted and its name ends in "(stale)" for screen readers (`span.sr-only`), so the state never rests on colour; the caller says why and when it was last read in the foot line.
+**Cells** (`Meter.cellsView`) → `span.cells[role="meter"] > span.cell (.on)` (`.short` for 24×8px cells). **Meter** (over `@foldkit/ui`'s Meter) → `li.meter-row (.stale, .toned (.high, .full))` in `Meter.listView` → `ul.meters`: a reading against a maximum in the vocabulary of `<meter>` (`value`, `max`): the label (name register) and an optional detail (meta) beside twenty cells lit in ink up to the reading; then the reading's state (the percentage in the 12px pixel face below 80% of max, the amber reading mark from 80%, a red chip at max holding `full` or the percentage; below max it never prints 100% or lights every cell, so 49,999 of 50,000 reads 99% with 19 cells); then the numbers (or `valueText`) in 11px muted tabular figures, formatted in English (`41,200`) so server and browser agree, left out with `hasNumbers: false` where they would repeat the percentage (`valueText: "62% used"` beside 62%; screen readers still hear it); then `div.meter-foot` (resets, last read; `.late` red). `ul.meters` is a size container (`container: meters`), so a row lays out by the column it is placed in, not the window: from 560px the name and detail sit in a left column (180px to 240px) beside the cells; narrower, the row stacks and the numbers take a line of their own; under 280px, 240px and 200px the cells step down to 8, 6 and 4px wide, whole pixels. A meter list fits any column from 160px; give it the column's width (a flush panel's body), since a size container takes no width from its content. A stale meter (`isStale`: the last reading failed, the numbers are the last known) prints its lit cells muted and its name ends in "(stale)" for screen readers (`span.sr-only`), so the state never rests on colour; the caller says why and when it was last read in the foot line. A toned meter (`isToned`) lights its cells amber from 80% (`.toned.high`) and red at max (`.toned.full`), beside the same mark or chip; for a page of readings scanned for their level, such as a wall of limits, where the cells are what the eye finds first. A stale reading's muted cells win over the tone.
 
 ### Stats
 
@@ -1251,7 +1259,7 @@ Each component is `src/<name>/<name>.ts` with an explicit `index.ts`, a colocate
 - **Don't** round a corner, blur a shadow, or tint a shadow with anything other than Shadow (or Danger Shadow on a danger button).
 - **Don't** use amber, green or red for decoration, and don't put an amber or green glyph on paper without its fill.
 - **Don't** let a content ink (`--term-*`, `--code-*`) out of code, terminals and logs: not on a chip, a border, a state word or a person.
-- **Don't** colour a meter's cells by level, or highlight a search hit in amber; the warning lives in the reading and a hit is a selection.
+- **Don't** colour a meter's cells by level outside a toned meter, or highlight a search hit in amber; the warning lives in the reading and a hit is a selection.
 - **Don't** chart in hues, curves, diagonals or filled areas, or colour a stat's change by its direction; cells and stepped lines stay ink and only a toned reading carries colour.
 - **Don't** print figures as a row of raised cards each holding one big number; Stats are ruled cells in a flush panel that names what they measure.
 - **Don't** build an inline arm-then-confirm button ("delete" that turns into "sure?"); the one destructive confirm is a ConfirmDialog with `isDanger`.

package/dist/src/glyph/glyph.d.ts

@@ -1,11 +1,13 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
-import { type GlyphName } from "./glyphs.ts";
+import { type Cell, type GlyphName } from "./glyphs.ts";
 /** Configuration for rendering a glyph with `view`. */
 export type ViewConfig = Readonly<{
     name: GlyphName;
     /** Rendered size in px. The grid is always 12x12; 12 is the size it was drawn for. */
     size?: number;
 }>;
+/** One inked rectangle of a drawing, in `currentColor`. */
+export declare const cellView: <Message>(h: HtmlBuilder<Message>) => ([x, y, width, height]: Cell) => Html;
 /** One glyph from the inventory, in `currentColor`. Decorative: label the control that holds
  *  it. */
 export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

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

@@ -1 +1 @@
-{"version":3,"file":"glyph.d.ts","sourceRoot":"","sources":["../../../src/glyph/glyph.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,EAAa,KAAK,SAAS,EAAU,MAAM,aAAa,CAAC;AAMhE,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,IAAI,EAAE,SAAS,CAAC;IAChB,sFAAsF;IACtF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAaH;UACU;AACV,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAa3E,CAAC"}
+{"version":3,"file":"glyph.d.ts","sourceRoot":"","sources":["../../../src/glyph/glyph.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAU,MAAM,aAAa,CAAC;AAMhE,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,IAAI,EAAE,SAAS,CAAC;IAChB,sFAAsF;IACtF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,2DAA2D;AAC3D,eAAO,MAAM,QAAQ,GAClB,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,6BACT,IAAI,KAAG,IAO3B,CAAC;AAEP;UACU;AACV,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAa3E,CAAC"}

package/dist/src/glyph/glyph.js

@@ -3,7 +3,8 @@ import { Array } from "effect";
 import { glyphs } from "./glyphs.js";
 // VIEW
 const DRAWN_SIZE = 12;
-const cellView = (h) => __foldkitBrandViewResult((([x, y, width, height]) => __foldkitBrandViewResult((h.rect([
+/** One inked rectangle of a drawing, in `currentColor`. */
+export const cellView = (h) => __foldkitBrandViewResult((([x, y, width, height]) => __foldkitBrandViewResult((h.rect([
     h.X(`${x}`),
     h.Y(`${y}`),
     h.Width(`${width}`),

package/dist/src/glyph/glyphs.d.ts

@@ -374,6 +374,9 @@ export type GlyphName = {
 }[keyof Families];
 /** The rows of a drawing, trimmed: twelve strings of twelve `#` or `.` for a well-drawn glyph. */
 export declare const artRows: (art: string) => ReadonlyArray<string>;
+/** 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 declare const toCells: (art: string, width: number) => ReadonlyArray<Cell>;
 /** Every glyph as the rectangles `Glyph.view` draws. */
 export declare const glyphs: Record.ReadonlyRecord<GlyphName, ReadonlyArray<Cell>>;
 export {};

package/dist/src/glyph/glyphs.d.ts.map

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

package/dist/src/glyph/glyphs.js

@@ -2589,14 +2589,15 @@ const GRID_SIZE = 12;
 /** The rows of a drawing, trimmed: twelve strings of twelve `#` or `.` for a well-drawn glyph. */
 export const artRows = (art) => __foldkitBrandViewResult((pipe(art, String.trim, String.split("\n"), Array.map(String.trim))), "@gjermundgaraba-designs/pixel-paper/src/glyph/glyphs.js#artRows");
 const INK_RUN = /#+/g;
-/** A drawing as rectangles one cell tall: one for each horizontal run of ink in each row. */
-const toCells = (art) => __foldkitBrandViewResult((Array.flatMap(artRows(art), (row, y) => __foldkitBrandViewResult((Array.map(Array.fromIterable(row.slice(0, GRID_SIZE).matchAll(INK_RUN)), (run) => __foldkitBrandViewResult(([
+/** 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, width) => __foldkitBrandViewResult((Array.flatMap(artRows(art), (row, y) => __foldkitBrandViewResult((Array.map(Array.fromIterable(row.slice(0, width).matchAll(INK_RUN)), (run) => __foldkitBrandViewResult(([
     run.index,
     y,
     run[0].length,
     1,
 ]), "@gjermundgaraba-designs/pixel-paper/src/glyph/glyphs.js#anonymous~2"))), "@gjermundgaraba-designs/pixel-paper/src/glyph/glyphs.js#anonymous"))), "@gjermundgaraba-designs/pixel-paper/src/glyph/glyphs.js#toCells");
-const drawFamily = (family) => __foldkitBrandViewResult((Record.map(family, toCells)), "@gjermundgaraba-designs/pixel-paper/src/glyph/glyphs.js#drawFamily");
+const drawFamily = (family) => __foldkitBrandViewResult((Record.map(family, (art) => __foldkitBrandViewResult((toCells(art, GRID_SIZE)), "@gjermundgaraba-designs/pixel-paper/src/glyph/glyphs.js#anonymous~3"))), "@gjermundgaraba-designs/pixel-paper/src/glyph/glyphs.js#drawFamily");
 /** Every glyph as the rectangles `Glyph.view` draws. */
 export const glyphs = {
     ...drawFamily(direction),

package/dist/src/identity/identity.d.ts

@@ -5,6 +5,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. */

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

@@ -1 +1 @@
-{"version":3,"file":"identity.d.ts","sourceRoot":"","sources":["../../../src/identity/identity.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAOtD,2DAA2D;AAC3D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH;qFACqF;AACrF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAgB3E,CAAC"}
+{"version":3,"file":"identity.d.ts","sourceRoot":"","sources":["../../../src/identity/identity.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAOtD,2DAA2D;AAC3D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH;qFACqF;AACrF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAsB3E,CAAC"}

package/dist/src/identity/identity.js

@@ -4,9 +4,15 @@ import { slotView } from "../slot/slot.js";
 /** 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 = (config, h) => {
-    const { label, letters, meta = [], isLarge = false } = config;
+    const { label, letters, drawing, meta = [], isLarge = false } = config;
     return __foldkitBrandViewResult((h.div([h.Class(isLarge ? "identity large" : "identity")], [
-        Monogram.view({ label, ...(letters !== undefined && { letters }), isLarge, isDecorative: true }, h),
+        Monogram.view({
+            label,
+            ...(letters !== undefined && { letters }),
+            ...(drawing !== undefined && { drawing }),
+            isLarge,
+            isDecorative: true,
+        }, h),
         h.span([h.Class("identity-text")], [h.strong([], [label]), ...slotView("span", "meta", meta, h)]),
     ])), "@gjermundgaraba-designs/pixel-paper/src/identity/identity.js#view");
 };

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

@@ -37,6 +37,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`. */
@@ -52,7 +56,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 declare const listView: <Message>(config: ListViewConfig, h: HtmlBuilder<Message>) => Html;

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

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

package/dist/src/meter/meter.js

@@ -47,18 +47,30 @@ const percentView = (config, percent, isFull, h) => {
         return __foldkitBrandViewResult((h.span([h.Class("pct")], [percentText])), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#percentView");
     }
 };
+const toneClass = (value, max, isFull) => {
+    if (isFull) {
+        return __foldkitBrandViewResult((" toned full"), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#toneClass");
+    }
+    else if (value >= max * HIGH_SHARE) {
+        return __foldkitBrandViewResult((" toned high"), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#toneClass");
+    }
+    else {
+        return __foldkitBrandViewResult((" toned"), "@gjermundgaraba-designs/pixel-paper/src/meter/meter.js#toneClass");
+    }
+};
 const meterView = (config, h) => {
-    const { id, label, value, max, detail = [], foot = [], isStale = false, hasNumbers = true, } = config;
+    const { id, label, value, max, detail = [], 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 __foldkitBrandViewResult((UiMeter.view({
         id,
         value,
         min: 0,
         max,
         valueText: numbers,
-        toView: (groups) => __foldkitBrandViewResult((h.keyed("li")(id, [h.Class(isStale ? "meter-row stale" : "meter-row")], [
+        toView: (groups) => __foldkitBrandViewResult((h.keyed("li")(id, [h.Class(rowClass)], [
             h.div([h.Class("meter-head")], [
                 h.span([...groups.label, h.Class("meter-name")], [label, ...(isStale ? [h.span([h.Class("sr-only")], [" (stale)"])] : [])]),
                 ...slotView("span", "meter-detail", detail, h),
@@ -76,7 +88,7 @@ const meterView = (config, h) => {
  * 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 = (config, h) => __foldkitBrandViewResult((h.ul(

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

@@ -5,6 +5,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. */
@@ -13,7 +18,7 @@ export type ViewConfig = Readonly<{
      *  the name once, from the words. */
     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 declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=monogram.d.ts.map

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

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

package/dist/src/monogram/monogram.js

@@ -1,5 +1,7 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-import { Array, String, pipe } from "effect";
+import { Array, Number, String, pipe } from "effect";
+import { cellView } from "../glyph/glyph.js";
+import { artRows, toCells } from "../glyph/glyphs.js";
 // LETTERS
 const WORD_BREAK = /[\s._-]+/;
 const LETTER_COUNT = 2;
@@ -11,12 +13,28 @@ const initials = (name) => __foldkitBrandViewResult((pipe(name.split(WORD_BREAK)
         ? pipe(Array.take(words, LETTER_COUNT), Array.map((word) => __foldkitBrandViewResult((word.slice(0, 1)), "@gjermundgaraba-designs/pixel-paper/src/monogram/monogram.js#anonymous")), Array.join(""))
         : Array.headNonEmpty(words).slice(0, LETTER_COUNT)), "@gjermundgaraba-designs/pixel-paper/src/monogram/monogram.js#onNonEmpty"),
 }))), "@gjermundgaraba-designs/pixel-paper/src/monogram/monogram.js#initials");
-/** 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`. */
+// DRAWING
+/** A drawing prints a pixel per cell, two in a large monogram, so its cells stay whole. */
+const DRAWN_CELL = 1;
+const LARGE_DRAWN_CELL = 2;
+const drawingView = (art, isLarge, h) => {
+    const rows = artRows(art);
+    const columns = Array.reduce(rows, 0, (widest, row) => __foldkitBrandViewResult((Number.max(widest, row.length)), "@gjermundgaraba-designs/pixel-paper/src/monogram/monogram.js#anonymous~2"));
+    const cell = isLarge ? LARGE_DRAWN_CELL : DRAWN_CELL;
+    return __foldkitBrandViewResult((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)))), "@gjermundgaraba-designs/pixel-paper/src/monogram/monogram.js#drawingView");
+};
+/** 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 = (config, h) => {
-    const { label, letters, isLarge = false, isCurrent = false, isDecorative = false } = config;
+    const { label, letters, drawing, isLarge = false, isCurrent = false, isDecorative = false, } = config;
     return __foldkitBrandViewResult((h.span([
         ...(isDecorative ? [h.AriaHidden(true)] : [h.Role("img"), h.AriaLabel(label)]),
-        h.Class(`monogram${isLarge ? " large" : ""}${isCurrent ? " current" : ""}`),
-    ], [letters ?? initials(label)])), "@gjermundgaraba-designs/pixel-paper/src/monogram/monogram.js#view");
+        h.Class(`monogram${drawing === undefined ? "" : " drawn"}${isLarge ? " large" : ""}${isCurrent ? " current" : ""}`),
+    ], [drawing === undefined ? (letters ?? initials(label)) : drawingView(drawing, isLarge, h)])), "@gjermundgaraba-designs/pixel-paper/src/monogram/monogram.js#view");
 };

package/dist/src/panel/panel.d.ts

@@ -9,6 +9,10 @@ export type ViewConfig = Readonly<{
     id: string;
     /** Pixel caps in the inverted title bar. */
     title: string;
+    /** What screen readers call the panel where its title repeats among its siblings (panels
+     *  titled by a kind, one per account): the title and what tells this one apart. The
+     *  title names it otherwise. */
+    name?: string;
     /** A quiet IconButton before the title, such as the grip a Sortable of panels hands each
      *  panel. On the ink bar it prints as `actions` do. */
     lead?: ReadonlyArray<Html | string>;
@@ -26,6 +30,6 @@ export type ViewConfig = Readonly<{
 /** The id of a panel's title, which names it. */
 export declare const titleId: (id: string) => string;
 /** The unit of the system: paper in a 2px ink box on a 5px print shadow, under a title bar. A
- *  region landmark (`<section>`) named by its `h2` title, keyed by its `id`. */
+ *  region landmark (`<section>`) named by its `h2` title, or by `name`, keyed by its `id`. */
 export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=panel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/panel/panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC;;;;kCAI8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd;2DACuD;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;yFACqF;IACrF,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACvC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,MAAuB,CAAC;AAE7D;gFACgF;AAChF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAoB3E,CAAC"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/panel/panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC;;;;kCAI8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd;;oCAEgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;2DACuD;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;yFACqF;IACrF,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACvC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,MAAuB,CAAC;AAE7D;8FAC8F;AAC9F,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAkC3E,CAAC"}

package/dist/src/panel/panel.js

@@ -3,10 +3,14 @@ import { slotView } from "../slot/slot.js";
 /** The id of a panel's title, which names it. */
 export const titleId = (id) => __foldkitBrandViewResult((`${id}-title`), "@gjermundgaraba-designs/pixel-paper/src/panel/panel.js#titleId");
 /** The unit of the system: paper in a 2px ink box on a 5px print shadow, under a title bar. A
- *  region landmark (`<section>`) named by its `h2` title, keyed by its `id`. */
+ *  region landmark (`<section>`) named by its `h2` title, or by `name`, keyed by its `id`. */
 export const view = (config, h) => {
-    const { id, title, lead = [], meta, actions = [], body, foot = [], isFlush = false } = config;
-    return __foldkitBrandViewResult((h.keyed("section")(id, [h.Id(id), h.AriaLabelledBy(titleId(id)), h.Class("panel")], [
+    const { id, title, name, lead = [], meta, actions = [], body, foot = [], isFlush = false, } = config;
+    return __foldkitBrandViewResult((h.keyed("section")(id, [
+        h.Id(id),
+        name === undefined ? h.AriaLabelledBy(titleId(id)) : h.AriaLabel(name),
+        h.Class("panel"),
+    ], [
         h.header([h.Class("panel-tb")], [
             ...slotView("span", "panel-lead", lead, h),
             h.h2([h.Id(titleId(id))], [title]),

package/package.json

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

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/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)],
   );
 };

package/src/panel/panel.ts

@@ -14,6 +14,10 @@ export type ViewConfig = Readonly<{
   id: string;
   /** Pixel caps in the inverted title bar. */
   title: string;
+  /** What screen readers call the panel where its title repeats among its siblings (panels
+   *  titled by a kind, one per account): the title and what tells this one apart. The
+   *  title names it otherwise. */
+  name?: string;
   /** A quiet IconButton before the title, such as the grip a Sortable of panels hands each
    *  panel. On the ink bar it prints as `actions` do. */
   lead?: ReadonlyArray<Html | string>;
@@ -33,13 +37,27 @@ export type ViewConfig = Readonly<{
 export const titleId = (id: string): string => `${id}-title`;
 
 /** The unit of the system: paper in a 2px ink box on a 5px print shadow, under a title bar. A
- *  region landmark (`<section>`) named by its `h2` title, keyed by its `id`. */
+ *  region landmark (`<section>`) named by its `h2` title, or by `name`, keyed by its `id`. */
 export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
-  const { id, title, lead = [], meta, actions = [], body, foot = [], isFlush = false } = config;
+  const {
+    id,
+    title,
+    name,
+    lead = [],
+    meta,
+    actions = [],
+    body,
+    foot = [],
+    isFlush = false,
+  } = config;
 
   return h.keyed("section")(
     id,
-    [h.Id(id), h.AriaLabelledBy(titleId(id)), h.Class("panel")],
+    [
+      h.Id(id),
+      name === undefined ? h.AriaLabelledBy(titleId(id)) : h.AriaLabel(name),
+      h.Class("panel"),
+    ],
     [
       h.header(
         [h.Class("panel-tb")],

package/src/pixel-paper.css

@@ -3655,6 +3655,16 @@ dialog.veil:focus {
   flex-wrap: wrap;
 }
 
+/* a toned meter's lit cells take its reading's tone, amber from 80% and red at the maximum,
+   unless the reading is stale */
+.meter-row.toned.high:not(.stale) .cells .cell.on {
+  background: var(--amber);
+}
+
+.meter-row.toned.full:not(.stale) .cells .cell.on {
+  background: var(--red);
+}
+
 /* a stale reading prints its cells muted: the number is last known, not current */
 .meter-row.stale .cells .cell.on {
   background: var(--muted);
@@ -4522,7 +4532,7 @@ dialog.veil:focus {
   position: absolute;
 }
 
-/* ---------- monograms: letters in an ink square, where the system draws no logos ---------- */
+/* ---------- monograms: letters in an ink square, or a mark the product draws in cells ---------- */
 
 .monogram {
   display: inline-grid;
@@ -4551,6 +4561,16 @@ dialog.veil:focus {
   color: var(--paper);
 }
 
+/* a mark drawn in cells prints bare, in ink, in the square the letters would take */
+.monogram.drawn {
+  border: 0;
+  background: none;
+}
+
+.monogram.drawn.current {
+  background: var(--ink);
+}
+
 /* ---------- identity: who or what, as its monogram beside its name ---------- */
 
 .identity {