@gjermundgaraba-designs/pixel-paper 0.17.0 → 0.19.0

package/DESIGN.md

@@ -212,6 +212,9 @@ spacing:
   row-min: "34px"
   reading-measure: "68ch"
   chart-plot: "160px"
+  reel-gutter: "16px"
+  reel-column-min: "280px"
+  reel-pane-min: "120px"
 components:
   button:
     backgroundColor: "{colors.paper}"
@@ -602,6 +605,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 +813,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 +835,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.
 
@@ -906,6 +917,8 @@ The Deck is one centred column, `max-width: 1160px` (`--deck`), padded 24px top,
 
 **Toasts:** the stack sits 16px in from the bottom right, `min(360px, 100vw - 32px)` wide, newest lowest, 10px apart, standing 12px clear of a showing Banner (anchored to it); on a phone it spans the bottom. While the system's Dialog is open the stack moves inside it, so a toast raised from a card prints above the card and can be used; a raw `<dialog>` an adopter opens with `showModal()` is not followed.
 
+**Reel:** a row of columns of windows that fills whatever holds it and scrolls sideways when the columns are wider than it, and down where a column's panes need more than its height, `--reel-gutter` (16px) between columns, between a column's panes and at either end. A column's width is a share of the reel's (`width × (view − gutter) − gutter`, so columns whose shares add up to one fill it exactly), never under `--reel-column-min` (280px); a column is the reel's height and a pane's height its share of its column by weight, never under `--reel-pane-min` (120px), a column of more panes than fit growing taller. The shares a width steps through (a third, half, two thirds, the whole) are the component's, in its code, not tokens: they are the words it says as much as the sizes it prints.
+
 **Rail:** a column of panels beside the deck (`--rail`, 272px, then the deck centred in what is left), fixed from the top bar's lower edge (hung from it by anchor positioning, like the stage) to the window's bottom, scrolling itself, padded `24px 10px 24px 20px` so its panels' shadows print. At 900px and under it leaves the page: the deck starts with a small button (the `sidebar` glyph and the rail's name) that opens the same element as a drawer.
 
 Frames with no surface of their own (Deck, Wall, Stage) are described here rather than among the components.
@@ -918,7 +931,7 @@ Breakpoints: 600px (phone; the page title steps to 18px, stats two across, the w
 
 ### Named Rules
 
-**The Panel Scroll Rule.** The page scrolls; a panel does not, except a board column above 900px, a card body inside a dialog, the rail, and a window's body (a window is sized by the canvas, not by its content). A stage never scrolls. A wide table, a long code line or a run of bar columns scrolls horizontally inside its own panel and never widens the deck.
+**The Panel Scroll Rule.** The page scrolls; a panel does not, except a board column above 900px, a card body inside a dialog, the rail, a window's body (a window is sized by the canvas, not by its content), and a reel, which scrolls sideways, and down where a column is taller than it, its windows sized by its columns. A stage never scrolls. A wide table, a long code line or a run of bar columns scrolls horizontally inside its own panel and never widens the deck.
 
 **The 24px Target Rule.** Every target is at least 24px square. A control drawn smaller (a tab, a glyph-switch option, a filter chip, a row toggle, a clickable mark or tag, a text button, a crumb, an error-summary link) keeps its look and takes the pointer over an invisible 24px square centred on it; an icon button never gives up its 24px to a full line (a tag beside it clips first), and links in a list stand 24px apart so no two squares overlap.
 
@@ -1027,9 +1040,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,14 +1050,14 @@ 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).
 - **Banner** → `div.banner > span.glyph (.error, .ok, .quiet) + span`: a fixed paper slip on the 3px shadow with a 26px glyph box in the Notice's tones and a sentence that says what happens to the reader's work. It holds a state the whole interface is in, for as long as it lasts, one at a time. It is not a live region (it arrives already holding its sentence, which would go unheard): the application says the state once, when it begins, with the `Announcer.Announce` Command. `"Error"` (the default; red, bang): a state that stops work (offline). `"Warn"` (amber): a state that is passing (reconnecting). `"Ok"` (ink, check): the state just ended (back online), shown briefly and then taken away. `"Quiet"` (head, info): news. With the connection word it is one pair: LinkState `"Reconnecting"` beside a warn Banner, `"Offline"` beside an error Banner with a retry, then `"Online"` beside an ok Banner for a moment; `"Connecting"` takes none.
 - **Rail** (Submodel) → `div.railed > main.deck#main + aside.rail[popover="auto"][aria-label]`: the rail's panels (a tree, places, filters) beside the deck's, after it in the markup so the page's main content and its h1 come first in reading order; the stylesheet fixes the rail at the left under the top bar. One element serves both layouts, so nothing in it renders twice or loses its state: at rest it stands there (its `popover` attribute is inert until opened), and at 900px and under it is hidden and `span.rail-open > button.btn.small[aria-expanded]` at the top of the deck opens it as a drawer: a slice of the dithered ground, `min(320px, 100vw - 40px)` wide from the left edge, closed by a 2px ink rule and the 8px card shadow, entering from the left in three steps over a veil. Its head (`div.rail-head`: the name in the label register and a close IconButton) shows only in the drawer. Opening focuses its first control; Escape, a click on the veil, the close glyph or focus leaving closes it, and all but the last return focus to the button. Widening the window past 900px closes it. The parent reads whether the drawer is open with `Rail.isOpen`, to hold its own page keys while the drawer covers the page. A file tree flush in a rail panel (or any panel) drops its own border.
 - **Stage** → `main.stage#main > div.stage-work > div.stage-canvas + div.stage-tools + div.stage-bar`: see Layout. `paused` (a Notice saying why: the link dropped, the page is read-only) veils the work when editing stops: `div.stage-paused[role="status"]` lays the dialog veil and its ink grain over everything and centres that Notice on the 3px button shadow, while the work beneath is `inert`. It lifts when `paused` is not given; the connection word says reconnecting meanwhile.
-- **Window** → `section.panel.window (.flush) > header.panel-tb + div.window-body + div.panel-foot`: a Panel for a stage, as tall and wide as whatever places it (and moved by it, if anything moves it). Its title bar is the panel's, trimmed to hold tools: 30px tall (`3px 3px 3px 10px`), centred, with an optional kind glyph, the title (clipped with an ellipsis), a status chip (its border turns paper so it reads on ink), tools and a close IconButton, both in the bar's paper. The body scrolls inside (`16px`, a 14px grid); flush, what fills it (a code surface, a file tree, a diff) drops its border and fills it. A foot is a panel foot; a notice there takes the whole line.
+- **Window** → `section.panel.window (.flush) > header.panel-tb + div.window-body + div.panel-foot`: a Panel for a stage or a reel, as tall and wide as whatever places it (and moved by it, if anything moves it). Its title bar is the panel's, trimmed to hold tools: 30px tall (`3px 3px 3px 10px`, its left trimmed to 3px under a `lead`), centred, with an optional `lead` (`span.panel-lead`, a quiet IconButton: a Reel's grip), an optional kind glyph, the title (clipped with an ellipsis), a status chip (its border turns paper so it reads on ink), tools and a close IconButton, both in the bar's paper. The body scrolls inside (`16px`, a 14px grid); flush, what fills it (a code surface, a file tree, a diff) drops its border and fills it. A foot is a panel foot; a notice there takes the whole line.
 - **Loading** → `div.loading[role="status"]`: where content is on its way, centred like an EmptyState at `26px 16px`, a 12px uppercase 0.08em (`--tracking-title`) muted line ("loading the items") ending in the 6×11px working cursor. Its status element stays in the page and only its words change: with `isLoading` false it is `div.loading-idle[role="status"]`, empty and out of the flow (`position: absolute`, never `display: none`, which would drop the live region), so it takes no room and no gap at the top of a panel's or a card's body, and a screen reader hears the line when it arrives. The content or an EmptyState takes its place on screen; the line never prints beside either. It is not the page's live region (the Announcer's).
 - **Remote** → spread where content goes: data that loads, in each of Foldkit's `AsyncData` states, with the retry built in, so a failure is never shown without its way back. A Loading line (`loading <label>`) leads in every state, in place, so its status is heard, and holds its words only while the first load runs: a refresh over data already shown is quiet, so a page that polls is not heard each time. Retry takes its button away with the notice, so the update returns focus to the line (its `id`) with the retry, where a first load is heard. A failure with nothing to show is an error Notice titled "<Label> not loaded", the reason (`toErrorText`) under it and a small "retry" button (`onRetry`); a refresh that failed over data already shown (stale) is a warn Notice titled "<Label> not refreshed" with the same reason and retry, above the last data; loaded and refreshing data is the caller's `toDataView` alone, an EmptyState for none included.
 - **Disclosure** (a View over `@foldkit/ui`'s Disclosure; the caller keeps whether it is open) → `div.disclosure > button.disclosure-summary[aria-expanded] + div.disclosure-body`. The summary is a control-register line (`3px 0`) of a 12px `caret-right` glyph, `span.disclosure-label` (a dotted underline on hover) and an optional `span.meta` pushed right; open, the caret turns a quarter in one step (a right angle keeps the grid). The body hangs from the caret on a 1px Rule Grey guide, its content level with the summary's words (`margin-left: 5px`, `padding-left: 14px`), in a 14px grid. For what a reader opens on purpose (grants to edit, details, a danger zone), never to hide the one thing the screen is for.
@@ -1099,6 +1112,22 @@ One keyboard for the page, Vim first, with the arrows beside the letters. The ke
 
 **Sortable** (Submodel over `@foldkit/ui`'s DragAndDrop, for items the reader puts in order: a list of rows, a grid of tiles, or a grid of the page's panels) → `div.sortable (.grid, .panels)` holding `ul.sortable-items[aria-label]` (a plain list: no listbox, so an item's content may hold anything) of `li.sortable-item (.movable, .drag-dim, .drop-before, .drop-after)`, each a grip, then `div.sortable-body` with the parent's content, and the list's keyboard help in a `p.sr-only`. `"List"` (the default) prints rows edge to edge between 1px rules, for a flush panel, `8px 16px 8px 10px`; `"Grid"` prints tiles that wrap, 180px and up, 12px apart: paper slips in a 2px ink border on the 3px print shadow. `"Panels"` prints each item as the parent's own Panel, up to three across in the deck's 24px gutter and 300px and up, so two across and then one as the column narrows; a row takes its tallest panel's height, each panel's foot sits at its bottom, and the list hands each item its grip (`render.grip`) for the panel's `lead` instead of printing it beside the item. The held copy is the whole panel, tinted head on the 8px card shadow, under ids of its own, and the drop line runs down the middle of the gutter. `isReadOnly`, for a reader who may look but not reorder, prints every grip held and lifts nothing, as holding moves does. Each item starts with a quiet `button.iconbtn` grip (in a panel's title bar, for `"Panels"`) (the grip glyph, named "Move <label>", `aria-roledescription="draggable"`, `aria-pressed`, described by the keyboard help); while moves are held it stays, held (`aria-disabled`, in the keyboard), so focus on it stays put when holding moves cancels one. Only the grip lifts an item, under a mouse, a finger or a pen (`cursor: grab` and `touch-action: none` on a movable grip only), so the rest of an item selects its text and a finger on it scrolls the page; the keyboard takes the grip too: Space or Enter picks the item up, every arrow moves it one place in reading order, Space or Enter drops it, Escape puts it back (taken before a dialog or the page's keys see it), and Tab leaves it where it is. Only the pointer that pressed moves the item; the browser cancelling it puts the item back. The held item dims to 40% in place (`.drag-dim`) and keeps its own print; a copy of it, `.lifted`, tinted head on the 8px card shadow in a 2px ink border (`aria-hidden`, `inert`, rendered with `isLifted`, so it carries no ids), follows the pointer in `div.sortable-lift`, or, held by the keyboard, prints in the list where it would land, in `li.sortable-slot`, counted as no item. Where a pointer would drop it, a 2px dashed ink line prints beside the item it lands next to (`.drop-before`, or `.drop-after` past the last), over the layout, so nothing moves under the pointer. The pointer's place is read from the item whose centre is closest, across where items sit side by side and down a column, and read again where the pointer is let go, so a page that scrolled under a still pointer drops where the pointer is. Each step is said through the page's live region in words from the item's `label` and its place, counted from one ("Beta, 3 of 4."). The items are the parent's: a drop reports `Moved`, and the parent moves the item, or decides not to, and flashes it; a drop where the item was, outside the list, or while moves are held reports nothing. While a pointer presses or carries an item the page's root carries `data-pixel-paper-dragging`, which prints the grabbing cursor everywhere and holds text selection.
 
+### Reel
+
+**Reel** (Submodel, holding its own drag state rather than `@foldkit/ui`'s DragAndDrop, whose targets are positions in a list and whose pointer reads the items under it; for a workspace of windows side by side: terminals, an editor, a browser, a canvas, in columns the reader arranges) → `div.reel[role="group"][aria-label][data-reel]` holding the scroller `div.reel-view`, whose `div.reel-track` holds, in order, `div.reel-gap` (the gap before the first column), then per column `div.reel-column[data-reel-column]` (the column's id; its share in `--reel-width`) with `div.reel-column-head` (the column's grip and `span.reel-width`, its share in the state register: `1/2`, `full`), a `div.reel-slot` per pane (`--reel-weight`, `--reel-anchor`) and between two slots `div.reel-split[role="separator"][aria-orientation="horizontal"]` ("Height of <pane>", `data-reel-split` the id of the pane above it), and after each column `div.reel-gap.reel-resize[role="separator"][aria-orientation="vertical"]` ("Width of column 2", its share as `aria-valuenow` and in words as `aria-valuetext`, `data-reel-resize` its column's id), then `div.reel-panes` with a `div.reel-pane[data-reel-pane][tabindex="-1"]` per pane, each the parent's Window with the pane's grip as its `lead`; after the scroller, the grips' keyboard help in a `p.sr-only` and, while a pointer carries a pane or a column, `div.reel-lift` with its copy. The reel takes its height from whatever holds it. The layout is the parent's (`Reel.Layout`: columns, each an id, a width and its panes, each an id, a label and a weight), passed to the view and, as `{ layout }`, to `update`, so the reel never holds a copy that could go stale. Whenever the parent changes the layout (a request it applied, another client's, a pane it closed), it calls `Reel.reconcile` with the layout as it is now.
+
+**The Pane Order Rule.** The panes are in the page in one order, by id, whatever their layout, and each is drawn over its slot by anchor positioning (`anchor-name` on the slot, `position-anchor` and `anchor()` insets on the pane; the track is the containing block and the pane layer is `display: contents`). A move changes where a pane is drawn and never its place in the page, so a terminal, a video or an embedded browser keeps its focus, its scroll and its state through any move, and a new pane is inserted among the others without moving them. So Tab follows ids, not columns: give panes ids that sort by when they were made (ULID, UUIDv7) and the reading order is the order they were opened; the keys below move by place.
+
+**The Id Rule.** Everything the reel asks of the layout names panes and columns by id, never by position: a pane into a column at a place among its panes, a pane into a column of its own before a column (or after the last), a column before another, a column's width, its panes' weights by pane id. So a request means what it meant after the layout changed under it, applied at once, later, on a server or after another client's move, and what is held keeps its target the same way. A request naming a pane or column the layout no longer has changes nothing. A column `Reel.apply` makes for a pane pulled out takes the pane's id (`notes`, or `notes/2` where a column has it), so pane and column ids share one namespace.
+
+Each pane's grip, and each column's, is a quiet `button.iconbtn[data-reel-grip]` (the grip glyph, "Move <pane>" or "Move column 2", `aria-roledescription="draggable"`, `aria-pressed`, described by the help). Only a grip lifts, under a mouse, a finger or a pen (`cursor: grab`, `touch-action: none`), so a pane's text selects and a terminal takes the pointer; it carries once the pointer has moved 5px. A held pane dims to 40% in place (`.drag-dim`); its copy, drawn by the reel from the labels (the title bars alone, tinted head on the 8px card shadow, `aria-hidden`, `inert`, no ids), follows the pointer, the panes of a held column stacked in it, so whatever a pane holds is never built twice. Where it would drop, a 2px dashed ink line prints down the gap it would open (`.drop-here`, a new column there for a pane, the column's new place for a column) or across the gutter between the panes it would join (`.drop-before`, `.drop-after`), over the layout, so nothing moves under the pointer; near either edge of the reel the reel scrolls under a carried pane, by time, not frames. On the keyboard, Space or Enter on a grip picks it up and the grip takes the keys while it holds it: ← and → step from a column to the gap beside it and on to the next, ↑ and ↓ move among a column's panes, and Space or Enter drops it. Escape puts it back, taken before a dialog sees it, and so does focus leaving the grip (Tab, a click elsewhere), so a field reached by Tab types as it should. A stop where the drop would change nothing is passed over, but for where it started. A column dropped by the keyboard gets its grip's focus back, since a column's element moves with it. Each step is said through the page's live region ("Notes, 2 of 2 in column 2 of 3.", and at a gap "Notes, column 4 of 4.", the new column it would make). A held pane or column that leaves the layout cancels the move ("Move cancelled."), and one held over a column that leaves aims back where it started, so the arrows go on from there.
+
+The splitters size by pointer or by the side arrows (a width) and up and down (a height), 5% of the reel or the column a press, unmodified only: a modified arrow is the application's. A splitter moves a share of the reel's width, or of its column's height, from the sizes the layout holds, never the sizes printed, which the stylesheet may hold at their least: a width goes no narrower than a tenth, and a pane keeps a twentieth of its column, and the stylesheet keeps both at their least on screen. A height splitter sizes the pane above it, named by id, against whichever pane is below it in the layout when the drag moves, so a reorder while it is dragged never resizes a pane in its place; it lets go when the pane above it has no pane below. While a splitter is dragged the reel prints the new sizes as a preview and asks for the size only when let go; the browser cancelling the pointer, or Escape, puts it back.
+
+The reel binds no page keys: the application binds its own and calls `Reel.perform` with an `Action` (focus a pane to any side, move the focused pane to any side, into a column of its own, move its column, or step its column through the shares). Moving a pane sideways past the last column, from a column it shares, opens a new column for it. The specimen binds herdr's on the reel's frame, so they act while focus is in the reel and leave the page's keys alone: Command (Super) and Option for focus (H J K L and the arrows), with Shift to move the pane, with Control too (H, L) to move its column, E to pull a pane into a column of its own and R to step its width. They act while a field in the reel has focus, as a terminal's input does, and are matched by the key (`KeyboardEvent.code`), since Option on a Mac turns a letter into another character. A browser keeps some (Chrome on a Mac opens its developer tools on ⌘⌥J), and an Electron application's default menu takes ⌘⌥H for Hide Others: drop that role to bind it.
+
+Focus is the reel's: one pane is focused (`.focused`, its window on the 8px card shadow), the one that last took focus or that a key moved to; `reconcile` reads its place again from each changed layout, so when it goes, focus finds the pane now nearest where it was, whoever moved it. A focus key puts the keyboard in the pane's control marked `data-reel-focus` (a terminal's input), else on the pane itself (ringed outside its window), and the browser scrolls the pane into view by the least distance either way, its gutter kept by `scroll-margin` (motion is stepped or instant, and a follow is instant); a pointer focusing a pane does not scroll the reel. When the focused pane leaves the layout with the keyboard in it, `reconcile` puts the keyboard in the pane now nearest where it was; focus the reader put elsewhere stays there. Each focus and move is said ("Diff, column 2 of 3.", "Shell moved to 1 of 2 in column 2 of 3.", "Column 1 takes two thirds of the width."). Every move and resize reports what it asks (`MovedPane`, `PulledOutPane`, `MovedColumn`, `ResizedColumn`, `ResizedPanes`), which `Reel.apply` applies to a layout, so the parent can apply it at once and keep or replace it when its source answers; a pane that joins a column takes that column's mean weight and an emptied column is dropped. An application that draws something of its own over a pane (a native view) measures the pane's bounds itself, which follows the reel's scroll, moves and resizes alike.
+
 ### Inputs / Fields
 
 - **Field** (a View over `@foldkit/ui`'s Input) → `div.field (.boxed, .mono) > label + input + p.field-error + p.field-help`, the label naming the input and the help describing it; a failed field prints why in `p.field-error` (sans, Urgent Red) under the control, which is `aria-invalid` and described by it before its help, and the ErrorSummary above the fields says it again; a required field's control is `aria-required`; the input's `type` the platform's (`"date"` for the browser's date control) when given. **SelectField** (over `@foldkit/ui`'s Select) → `div.field > label + select + p.field-error + p.field-help`, its options in order and a group's under an `optgroup` heading, an option that is listed but not choosable `disabled`; **TextareaField** (over `@foldkit/ui`'s Textarea) → `div.field (.mono) > label + textarea + p.field-error + p.field-help`, opening at `rows` lines. Both name, describe and mark their control as a Field does. **Fieldset** → `fieldset.field > legend.field-label`, then the controls, `p.field-error` and `p.field-help`, its error and its help linked with `aria-describedby`; **FieldGrid** → `div.field-grid` (auto-fit, 160px minimum); **Fields** → `fieldset.stack.gap-m`: a form's fields as one column `--space-m` (14px) apart, a body's gap, on the layout primitives with no rule of its own. `isBusy` (a save in flight) sets `disabled` and `aria-busy` on it, so every control holds at once and nothing changes under the save; the submit Button stays outside it, `isBusy`, so it keeps focus. A disabled control prints its value in Muted Ink; a boxless one also drops its dotted baseline (the mark of a place to type), a boxed one or a select mutes its box and caret.
@@ -1139,7 +1168,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
 
@@ -1192,7 +1221,7 @@ Installing: see README.md beside this file. The package is a Foldkit library. It
 
 The peers in `package.json` are pinned to the Foldkit line pixel-paper is built and tested against. Foldkit is pre-1.0, so a caret range admits patches only; a new Foldkit minor is a new pixel-paper release.
 
-Without Foldkit: link `pixel-paper.css` and write the markup named in each component above. The stylesheet relies on these attributes: `aria-current` (`="page"` on a nav segment, a crumb, a menu link and a place's button; `="true"` on `.row` and `.board-card` for the cursor, given `tabindex="0"` while the others take `-1`, on the open file and on a history's current entry), `aria-selected`, `aria-pressed`, `aria-checked`, `aria-expanded`, `aria-disabled` (on buttons, on a board card's `.title`, on menu items, on a select-all box), `aria-invalid`, `disabled` and `aria-busy` on the Fields `fieldset` while a save is in flight, `aria-hidden="true"` on a button's or menu item's `kbd.key-hint`, `data-label` on stacked-table cells, `data-drag-over` on a drop zone while a file hovers, `data-pixel-paper-dragging` on the root while a sortable's item is pressed or carried, `data-tip` on glyph-only controls (the words the page's one tip shows), native `<dialog>` for overlays and native `[popover]` for the rail's drawer and tips. Behaviour the components own (board moves, a menu's placement and arrow keys, a context menu's placement and focus, tips, a toolbar's roving focus, the palette cursor, tab arrows, focus into dialogs, an error summary's focus, the flash, the remembered palette, the toast stack's hold and focus, a player's controls, the key help) is the adopter's to write.
+Without Foldkit: link `pixel-paper.css` and write the markup named in each component above. The stylesheet relies on these attributes: `aria-current` (`="page"` on a nav segment, a crumb, a menu link and a place's button; `="true"` on `.row` and `.board-card` for the cursor, given `tabindex="0"` while the others take `-1`, on the open file and on a history's current entry), `aria-selected`, `aria-pressed`, `aria-checked`, `aria-expanded`, `aria-disabled` (on buttons, on a board card's `.title`, on menu items, on a select-all box), `aria-invalid`, `disabled` and `aria-busy` on the Fields `fieldset` while a save is in flight, `aria-hidden="true"` on a button's or menu item's `kbd.key-hint`, `data-label` on stacked-table cells, `data-drag-over` on a drop zone while a file hovers, `data-pixel-paper-dragging` on the root while a sortable's item or a reel's pane is pressed or carried, `--reel-width`, `--reel-weight` and `--reel-anchor` on a reel's columns, slots and panes, `data-reel-focus` on the control in a pane focus lands on, `data-tip` on glyph-only controls (the words the page's one tip shows), native `<dialog>` for overlays and native `[popover]` for the rail's drawer and tips. Behaviour the components own (board moves, a reel's moves, sizes and focus, a menu's placement and arrow keys, a context menu's placement and focus, tips, a toolbar's roving focus, the palette cursor, tab arrows, focus into dialogs, an error summary's focus, the flash, the remembered palette, the toast stack's hold and focus, a player's controls, the key help) is the adopter's to write.
 
 Palette: with no `data-scheme` the page follows `prefers-color-scheme`, live, in CSS alone. `Scheme.SchemeSwitch` is a Submodel with no service to provide: choosing a scheme returns its `PinScheme` Command, which sets or clears `data-scheme` on `<html>` (`"light"` for paper, `"dark"` for plum) and remembers the choice in `localStorage` (storage that refuses still switches the page; the choice is just not kept); `SchemeSwitch.select` does the same from outside the switch (a palette entry). `SchemeSwitch.init()` returns the switch on `"System"`, as the server renders it, with a `ReadScheme` Command the client runs after hydration, which reads the scheme `schemeScript` pinned before first paint; map its Commands into the application's `init`. Its Subscription follows `prefers-color-scheme` (Foldkit's `Dom.streamFromMediaQuery`), so the switch knows the palette `"System"` prints in. Read the choice with `SchemeSwitch.scheme` and the palette the page prints in, `"Paper"` or `"Plum"` (`Scheme.Palette`), with `SchemeSwitch.palette`: the pinned one, or under `"System"` the system's, followed as it changes (`"Paper"` until the browser reports, as the server renders). A scheme chosen in another tab is seen on that page's next load, not live. Put `schemeScript` inline in the page's `<head>` so a remembered palette applies before first paint. A subtree with `color-scheme: dark` prints plum colours inside a paper page, the dither too, which is how the specimen shows both palettes side by side.
 
@@ -1200,7 +1229,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. 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/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`).
 
 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.
 
@@ -1251,7 +1280,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/drag/drag.d.ts

@@ -21,6 +21,9 @@ export declare const innerControls: (liftingButtons: string) => string;
 export declare const takeEscape: <Message>(event: KeyboardEvent, message: Message) => Option.Option<Message>;
 /** Escape on the window, in the capture phase, as `message`. */
 export declare const escapeKeys: <Message>(message: Message) => Stream.Stream<Message>;
+/** The moves, release and cancel of the pointer `pointerId`, on the document; another
+ *  pointer's are not the drag's. */
+export declare const pressingPointer: (pointerId: number) => Stream.Stream<PointerEvent>;
 /** Sizes the copy that follows the pointer to the element `sourceSelector` finds, and keeps the
  *  pointer where it pressed that element. */
 export declare const measureLift: (element: Element, sourceSelector: string, pressX: number, pressY: number) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"drag.d.ts","sourceRoot":"","sources":["../../../src/drag/drag.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,IAAI,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAiB,MAAM,EAAS,MAAM,EAAQ,MAAM,QAAQ,CAAC;AAKpE;+BAC+B;AAC/B,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,kBAAkB,CAAC;AAKzE,eAAO,MAAM,OAAO,gBAAiB,aAAa,CAAC,KAAK,KAAG,KAU1D,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,UAAU,UAAW,KAAK,KAAG,OACmB,CAAC;AAQ9D,eAAO,MAAM,gBAAgB,WACnB,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KACnE,aAAa,CAAC,OAE+B,CAAC;AAEjD,eAAO,MAAM,qBAAqB,WACxB,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KACxE,aAAa,CAAC,OAEoC,CAAC;AAEtD,eAAO,MAAM,YAAY,WACf,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAC/D,aAAa,CAAC,OAE2B,CAAC;AAE7C,eAAO,MAAM,eAAe,QAAO,aAAa,CAAC,OAER,CAAC;AAE1C,eAAO,MAAM,aAAa,QAAO,aAAa,CAAC,OAER,CAAC;AAIxC,sDAAsD;AACtD,eAAO,MAAM,WAAW,IAAI,CAAC;AAE7B;4FAC4F;AAC5F,eAAO,MAAM,aAAa,mBAAoB,MAAM,KAAG,MASzC,CAAC;AAMf;4CAC4C;AAC5C,eAAO,MAAM,UAAU,GAAI,OAAO,SACzB,aAAa,WACX,OAAO,KACf,MAAM,CAAC,MAAM,CAAC,OAAO,CAQvB,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,UAAU,GAAI,OAAO,WAAW,OAAO,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAMxE,CAAC;AAIL;6CAC6C;AAC7C,eAAO,MAAM,WAAW,YACb,OAAO,kBACA,MAAM,UACd,MAAM,UACN,MAAM,KACb,IAQF,CAAC;AAoBF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,cACd,OAAO,UACV,MAAM,WACL,MAAM,WACN,MAAM,KACd,MA+BF,CAAC;AAMF;;8DAE8D;AAC9D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAK7C,CAAC"}
+{"version":3,"file":"drag.d.ts","sourceRoot":"","sources":["../../../src/drag/drag.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,IAAI,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAiB,MAAM,EAAS,MAAM,EAAQ,MAAM,QAAQ,CAAC;AAKpE;+BAC+B;AAC/B,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,kBAAkB,CAAC;AAKzE,eAAO,MAAM,OAAO,gBAAiB,aAAa,CAAC,KAAK,KAAG,KAU1D,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,UAAU,UAAW,KAAK,KAAG,OACmB,CAAC;AAQ9D,eAAO,MAAM,gBAAgB,WACnB,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,KACnE,aAAa,CAAC,OAE+B,CAAC;AAEjD,eAAO,MAAM,qBAAqB,WACxB,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KACxE,aAAa,CAAC,OAEoC,CAAC;AAEtD,eAAO,MAAM,YAAY,WACf,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAC/D,aAAa,CAAC,OAE2B,CAAC;AAE7C,eAAO,MAAM,eAAe,QAAO,aAAa,CAAC,OAER,CAAC;AAE1C,eAAO,MAAM,aAAa,QAAO,aAAa,CAAC,OAER,CAAC;AAIxC,sDAAsD;AACtD,eAAO,MAAM,WAAW,IAAI,CAAC;AAE7B;4FAC4F;AAC5F,eAAO,MAAM,aAAa,mBAAoB,MAAM,KAAG,MASzC,CAAC;AAMf;4CAC4C;AAC5C,eAAO,MAAM,UAAU,GAAI,OAAO,SACzB,aAAa,WACX,OAAO,KACf,MAAM,CAAC,MAAM,CAAC,OAAO,CAQvB,CAAC;AAEF,gEAAgE;AAChE,eAAO,MAAM,UAAU,GAAI,OAAO,WAAW,OAAO,KAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAMxE,CAAC;AAIL;oCACoC;AACpC,eAAO,MAAM,eAAe,cAAe,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAS3E,CAAC;AAIJ;6CAC6C;AAC7C,eAAO,MAAM,WAAW,YACb,OAAO,kBACA,MAAM,UACd,MAAM,UACN,MAAM,KACb,IAQF,CAAC;AAoBF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,cACd,OAAO,UACV,MAAM,WACL,MAAM,WACN,MAAM,KACd,MA+BF,CAAC;AAMF;;8DAE8D;AAC9D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAK7C,CAAC"}

package/dist/src/drag/drag.js

@@ -1,8 +1,8 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-// 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";
 import * as Dom from "foldkit/dom";
@@ -79,6 +79,10 @@ export const escapeKeys = (message) => __foldkitBrandViewResult((Dom.streamFromE
     filterMapEvent: (event) => __foldkitBrandViewResult((takeEscape(event, message)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#filterMapEvent"),
     options: { capture: true },
 })), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#escapeKeys");
+// 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) => __foldkitBrandViewResult((Stream.filter(Stream.mergeAll(Array.map(["pointermove", "pointerup", "pointercancel"], (type) => __foldkitBrandViewResult((Stream.fromEventListener(document, type)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous")), { concurrency: "unbounded" }), (event) => __foldkitBrandViewResult((event.pointerId === pointerId), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~2"))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#pressingPointer");
 // LIFTED COPY
 /** Sizes the copy that follows the pointer to the element `sourceSelector` finds, and keeps the
  *  pointer where it pressed that element. */
@@ -110,14 +114,14 @@ const isOnSameRow = (box, other) => __foldkitBrandViewResult((Math.abs(other.top
  * in a column of rows it is read down, so one reading serves a list and a grid.
  */
 export const insertionIndex = (container, heldId, clientX, clientY) => {
-    const items = Array.map(Array.fromIterable(container.querySelectorAll("[data-sortable-id]")), (item) => (__foldkitBrandViewResult(({ id: item.dataset["sortableId"], box: boxOf(item) }), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous")));
+    const items = Array.map(Array.fromIterable(container.querySelectorAll("[data-sortable-id]")), (item) => (__foldkitBrandViewResult(({ id: item.dataset["sortableId"], box: boxOf(item) }), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~3")));
     // read with the held item in its place: two tiles side by side are a row even while one of
     // them is held
-    const isTiled = Array.some(items, ({ box }, index) => __foldkitBrandViewResult((Option.exists(Array.get(items, index + 1), (next) => __foldkitBrandViewResult((isOnSameRow(box, next.box)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~3"))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~2"));
-    const boxes = pipe(Array.filter(items, (item) => __foldkitBrandViewResult((item.id !== heldId), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~4")), Array.map(({ box }) => __foldkitBrandViewResult((box), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~5")));
+    const isTiled = Array.some(items, ({ box }, index) => __foldkitBrandViewResult((Option.exists(Array.get(items, index + 1), (next) => __foldkitBrandViewResult((isOnSameRow(box, next.box)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~5"))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~4"));
+    const boxes = pipe(Array.filter(items, (item) => __foldkitBrandViewResult((item.id !== heldId), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~6")), Array.map(({ box }) => __foldkitBrandViewResult((box), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~7")));
     const distance = (box) => __foldkitBrandViewResult((Math.hypot(box.centreX - clientX, box.centreY - clientY)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#distance");
-    const byDistance = Order.mapInput(Order.Number, ({ box }) => __foldkitBrandViewResult((distance(box)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~6"));
-    return __foldkitBrandViewResult((Array.match(Array.map(boxes, (box, index) => (__foldkitBrandViewResult(({ box, index }), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~7"))), {
+    const byDistance = Order.mapInput(Order.Number, ({ box }) => __foldkitBrandViewResult((distance(box)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~8"));
+    return __foldkitBrandViewResult((Array.match(Array.map(boxes, (box, index) => (__foldkitBrandViewResult(({ box, index }), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~9"))), {
         onEmpty: () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#onEmpty"),
         onNonEmpty: (candidates) => {
             const { box, index } = Array.min(candidates, byDistance);
@@ -131,4 +135,4 @@ const DRAGGING_ATTRIBUTE = "data-pixel-paper-dragging";
 /** While a pointer presses or carries an item, the page is marked
  *  (`data-pixel-paper-dragging` on the root), so the stylesheet prints the grabbing cursor and
  *  holds text selection, with no style element of its own. */
-export const markDragging = Stream.callback(() => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((document.documentElement.setAttribute(DRAGGING_ATTRIBUTE, "")), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~9")), () => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((document.documentElement.removeAttribute(DRAGGING_ATTRIBUTE)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~11"))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~10")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~12")))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~8"));
+export const markDragging = Stream.callback(() => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((document.documentElement.setAttribute(DRAGGING_ATTRIBUTE, "")), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~11")), () => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((document.documentElement.removeAttribute(DRAGGING_ATTRIBUTE)), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~13"))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~12")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~14")))), "@gjermundgaraba-designs/pixel-paper/src/drag/drag.js#anonymous~10"));

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/index.d.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/dist/src/index.d.ts.map

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

package/dist/src/index.js

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

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"}