@prestack/thread-ui 0.0.1

package/dist/ui/elements.d.ts

@@ -0,0 +1,1143 @@
+export declare const ELEMENTS: {
+    readonly id: "element";
+    readonly at: "thread/ui/elements.ts";
+    readonly files: "ui/*.tsx";
+    readonly describes: "An interface part, and function only: what it does, what it carries and which signals it raises, never how it looks and never markup a person writes. Its look is a variant it wears, its wording arrives as a message key rather than as words, and `thread elements` writes its file from this row, so the file is never typed. Every part this framework ships is listed here, an app adds its own to the same list, and a row that goes missing breaks the build, because what the framework offers is not an app’s to withdraw. A thing made of parts already listed here is a composition, not a new element.";
+    readonly version: 1;
+    readonly cites: readonly [{
+        readonly on: "2026-08-31";
+        readonly said: "elements does not hold anything that can render anything, its functionality only . only our compiler can translate things into proper css and html and only at build time do we produce a renderable result.";
+    }, {
+        readonly on: "2026-08-29";
+        readonly said: "CLI actually generates the tsx file, and you MUST give the file its body, properly.";
+    }];
+    readonly declares: readonly [{
+        readonly id: "accordion";
+        readonly at: "thread/ui/elements/accordion.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly keeps: true;
+        readonly works: "./accordion.works.ts";
+        readonly carries: {
+            readonly items: "parting";
+            readonly initial: "ordering";
+            readonly exclusive: "flag";
+            readonly onChange: "choosing";
+        };
+        readonly places: {
+            readonly section: {
+                readonly tag: "div";
+                readonly each: "items";
+                readonly by: "id";
+                readonly gives: "section";
+                readonly holds: "header region";
+            };
+            readonly header: {
+                readonly tag: "button";
+                readonly gives: "header";
+                readonly shows: "label";
+            };
+            readonly region: {
+                readonly tag: "div";
+                readonly gives: "region";
+                readonly shows: "inside";
+            };
+        };
+        readonly describes: "Sections that open one at a time, for long material somebody reads part of.";
+    }, {
+        readonly id: "aspect-ratio";
+        readonly at: "thread/ui/elements/aspect-ratio.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly arranges: true;
+        readonly carries: {
+            readonly ratio: "count";
+        };
+        readonly measures: readonly ["ratio"];
+        readonly works: "./aspect-ratio.works.ts";
+        readonly sets: {
+            readonly aspectRatio: "ratio";
+        };
+        readonly describes: "A slot that keeps its proportions whatever width it gets, so a loading picture reserves its room.";
+    }, {
+        readonly id: "avatar";
+        readonly at: "thread/ui/elements/avatar.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "span";
+        readonly reads: "picture";
+        readonly carries: {
+            readonly labelKey: "naming";
+            readonly src: "picture";
+            readonly initials: "words";
+        };
+        readonly works: "./avatar.works.ts";
+        readonly places: {
+            readonly picture: {
+                readonly tag: "img";
+                readonly shows: "src";
+            };
+            readonly lettering: {
+                readonly shows: "lettering";
+            };
+        };
+        readonly describes: "A person or an organisation as a small picture, falling back to initials when there is no image.";
+    }, {
+        readonly id: "badge";
+        readonly at: "thread/ui/elements/badge.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "span";
+        readonly carries: {
+            readonly labelKey: "wording";
+            readonly count: "count";
+            readonly max: "count";
+        };
+        readonly works: "./badge.works.ts";
+        readonly describes: "A short status word attached to something else. For counts and states, never for an action.";
+    }, {
+        readonly id: "bars";
+        readonly at: "thread/ui/elements/bars.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly reads: "picture";
+        readonly keeps: true;
+        readonly works: "./bars.works.ts";
+        readonly carries: {
+            readonly rows: "listing";
+            readonly by: "ruling";
+            readonly value: "ruling";
+            readonly format: "words";
+            readonly titleKey: "titling";
+        };
+        readonly places: {
+            readonly bar: {
+                readonly each: "rows";
+                readonly by: "by";
+                readonly marks: "sized";
+                readonly holds: "label amount";
+            };
+            readonly label: {
+                readonly shows: "label";
+            };
+            readonly amount: {
+                readonly shows: "amount";
+            };
+        };
+        readonly describes: "Quantities compared across categories. The default when the horizontal axis is not time.";
+    }, {
+        readonly id: "box";
+        readonly at: "thread/ui/elements/box.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly arranges: true;
+        readonly reads: "grouping";
+        readonly raises: readonly ["scrolling"];
+        readonly carries: {
+            readonly labelKey: "titling";
+        };
+        readonly describes: "The declared `div`. Groups children, optionally as a landmark region, and optionally scrolls. A box that scrolls raises `scrolling`, which a variant may dress; naming one makes it a group, and leaving it unnamed leaves it a box.";
+    }, {
+        readonly id: "breadcrumb";
+        readonly at: "thread/ui/elements/breadcrumb.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "nav";
+        readonly called: "nav.breadcrumb";
+        readonly works: "./breadcrumb.works.ts";
+        readonly carries: {
+            readonly map: "mapping";
+            readonly current: "ruling";
+        };
+        readonly places: {
+            readonly step: {
+                readonly tag: "Link.linkInline";
+                readonly each: "steps";
+                readonly by: "id";
+                readonly gives: "crumb";
+            };
+        };
+        readonly describes: "The trail back up from wherever somebody is, derived from the route rather than assembled by hand.";
+    }, {
+        readonly id: "button";
+        readonly at: "thread/ui/elements/button.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "button";
+        readonly keeps: true;
+        readonly works: "./button.works.tsx";
+        readonly wires: "wires";
+        readonly carries: {
+            readonly label: "wording";
+            readonly with: "holding";
+            readonly icon: "words";
+            readonly shows: "words";
+            readonly type: "words";
+            readonly disabled: "flag";
+            readonly loading: "flag";
+            readonly dispatch: "words";
+            readonly input: "holding";
+            readonly navigateTo: "words";
+            readonly onPress: "doing";
+        };
+        readonly places: {
+            readonly symbol: {
+                readonly when: "iconed";
+                readonly shows: "symbol";
+                readonly display: "layout-flex";
+                readonly alignItems: "align-centre";
+            };
+            readonly wording: {
+                readonly when: "worded";
+                readonly shows: "wording";
+            };
+        };
+        readonly describes: "A press that runs a declared workflow or goes to a declared screen. The only way to start either from a tap.";
+    }, {
+        readonly id: "column";
+        readonly at: "thread/ui/elements/column.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly describes: "Children stacked top to bottom. The vertical arrangement, and the default shape of a form.";
+        readonly arranges: true;
+        readonly sets: {
+            readonly display: "layout-flex";
+            readonly flexDirection: "flow-down";
+            readonly gap: "space-3";
+        };
+    }, {
+        readonly id: "consent";
+        readonly at: "thread/ui/elements/consent.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly keeps: true;
+        readonly works: "./consent.works.tsx";
+        readonly carries: {
+            readonly decision: "judging";
+            readonly onDecide: "judged";
+            readonly policyKey: "noting";
+            readonly preselected: "ordering";
+        };
+        readonly places: {
+            readonly panel: {
+                readonly tag: "Box.card";
+                readonly holds: "body";
+            };
+            readonly body: {
+                readonly tag: "Column";
+                readonly holds: "title policy list actions";
+            };
+            readonly title: {
+                readonly tag: "Text";
+                readonly gives: "title";
+            };
+            readonly policy: {
+                readonly tag: "Text";
+                readonly when: "hasPolicy";
+                readonly gives: "policy";
+            };
+            readonly list: {
+                readonly tag: "Column";
+                readonly holds: "category";
+            };
+            readonly category: {
+                readonly tag: "Box";
+                readonly each: "categories";
+                readonly by: "id";
+                readonly holds: "words switch fixed";
+            };
+            readonly words: {
+                readonly tag: "Column";
+                readonly holds: "label describe";
+            };
+            readonly label: {
+                readonly tag: "Text";
+                readonly gives: "label";
+            };
+            readonly describe: {
+                readonly tag: "Text";
+                readonly gives: "describe";
+            };
+            readonly switch: {
+                readonly tag: "Toggle.input";
+                readonly when: "optional";
+                readonly gives: "chooser";
+            };
+            readonly fixed: {
+                readonly tag: "Text";
+                readonly when: "required";
+                readonly gives: "fixed";
+            };
+            readonly actions: {
+                readonly tag: "Box";
+                readonly holds: "withdraw decline accept accept-all";
+            };
+            readonly withdraw: {
+                readonly tag: "Button.buttonQuiet";
+                readonly when: "withdrawable";
+                readonly gives: "withdraw";
+            };
+            readonly decline: {
+                readonly tag: "Button.buttonBorder";
+                readonly gives: "decline";
+            };
+            readonly accept: {
+                readonly tag: "Button.buttonBorder";
+                readonly gives: "accept";
+            };
+            readonly 'accept-all': {
+                readonly tag: "Button.buttonFill";
+                readonly gives: "acceptAll";
+            };
+        };
+        readonly describes: "The complete permission-to-collect surface, with every declared category and its decision.";
+    }, {
+        readonly id: "donut";
+        readonly at: "thread/ui/elements/donut.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "svg";
+        readonly reads: "picture";
+        readonly keeps: true;
+        readonly works: "./donut.works.ts";
+        readonly carries: {
+            readonly rows: "listing";
+            readonly by: "ruling";
+            readonly value: "ruling";
+            readonly titleKey: "titling";
+        };
+        readonly places: {
+            readonly slice: {
+                readonly tag: "circle";
+                readonly each: "rows";
+                readonly by: "by";
+                readonly gives: "slice";
+            };
+        };
+        readonly describes: "Parts of one whole, for a handful of slices. Beyond that the reading is worse than a bar.";
+    }, {
+        readonly id: "each";
+        readonly at: "thread/ui/elements/each.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly works: "./each.works.tsx";
+        readonly carries: {
+            readonly rows: "anything";
+            readonly by: "ruling";
+            readonly children: "drawing";
+            readonly settles: "words";
+            readonly paced: "words";
+        };
+        readonly describes: "One rendered thing per row of data. The construct that replaces mapping over an array by hand.";
+    }, {
+        readonly id: "empty";
+        readonly at: "thread/ui/elements/empty.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly always: readonly ["empty"];
+        readonly tag: "div";
+        readonly describes: "What a surface says when its read answered with nothing. Never the same rendering as still loading.";
+    }, {
+        readonly id: "field";
+        readonly at: "thread/ui/elements/field.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "label";
+        readonly keeps: true;
+        readonly works: "./field.works.ts";
+        readonly carries: {
+            readonly name: "ruling";
+            readonly validator: "ruling";
+            readonly labelKey: "wording";
+            readonly value: "words";
+            readonly onValue: "picking";
+            readonly context: "holding";
+            readonly autocomplete: "words";
+            readonly disabled: "flag";
+        };
+        readonly places: {
+            readonly caption: {
+                readonly shows: "labelKey";
+            };
+            readonly entry: {
+                readonly tag: "input";
+                readonly gives: "entry";
+            };
+            readonly fault: {
+                readonly reads: "alarm";
+                readonly shows: "fault";
+            };
+        };
+        readonly describes: "One value being typed, governed entirely by the validator it names — keyboard, mask, limit and message.";
+    }, {
+        readonly id: "funnel";
+        readonly at: "thread/ui/elements/funnel.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly reads: "picture";
+        readonly keeps: true;
+        readonly works: "./funnel.works.ts";
+        readonly carries: {
+            readonly rows: "listing";
+            readonly by: "ruling";
+            readonly value: "ruling";
+            readonly format: "words";
+            readonly titleKey: "titling";
+        };
+        readonly places: {
+            readonly stage: {
+                readonly each: "rows";
+                readonly by: "by";
+                readonly marks: "sized";
+                readonly holds: "label amount";
+            };
+            readonly label: {
+                readonly shows: "label";
+            };
+            readonly amount: {
+                readonly shows: "amount";
+            };
+        };
+        readonly describes: "Fall-off between ordered stages, with the drop at each step derived rather than supplied.";
+    }, {
+        readonly id: "gauge";
+        readonly at: "thread/ui/elements/gauge.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "svg";
+        readonly reads: "picture";
+        readonly keeps: true;
+        readonly works: "./gauge.works.ts";
+        readonly carries: {
+            readonly value: "count";
+            readonly min: "count";
+            readonly max: "count";
+            readonly labelKey: "naming";
+        };
+        readonly places: {
+            readonly track: {
+                readonly tag: "path";
+                readonly gives: "track";
+            };
+            readonly needle: {
+                readonly tag: "path";
+                readonly gives: "needle";
+            };
+        };
+        readonly describes: "A single quantity against a target, where the reading is how far along rather than how much.";
+    }, {
+        readonly id: "grid";
+        readonly at: "thread/ui/elements/grid.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly describes: "Children arranged, and nothing more. Its tracks are not something a row can state — the style guide binds no track property, deliberately — so this sets nothing and a caller that wants a set of equal panels wraps a `Row` instead. Kept, and its sentence made true, because the one it carried promised tracks it has never laid out: “as many equal tracks as the container allows”, on a row with no `sets` at all.";
+        readonly arranges: true;
+    }, {
+        readonly id: "heatmap";
+        readonly at: "thread/ui/elements/heatmap.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly reads: "picture";
+        readonly keeps: true;
+        readonly works: "./heatmap.works.ts";
+        readonly carries: {
+            readonly rows: "listing";
+            readonly by: "ruling";
+            readonly x: "ruling";
+            readonly y: "ruling";
+            readonly value: "words";
+            readonly titleKey: "titling";
+        };
+        readonly places: {
+            readonly cell: {
+                readonly each: "rows";
+                readonly by: "by";
+                readonly marks: "sized";
+            };
+        };
+        readonly describes: "Density across two axes, for when the pattern matters more than any single cell.";
+    }, {
+        readonly id: "hit-box";
+        readonly at: "thread/ui/elements/hit-box.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly arranges: true;
+        readonly keeps: true;
+        readonly works: "./hit-box.works.tsx";
+        readonly wires: "wires";
+        readonly carries: {
+            readonly gesture: "ruling";
+            readonly tuning: "tuning";
+            readonly axis: "words";
+            readonly grabs: "subjecting";
+            readonly accepts: "ordering";
+            readonly collects: "subjecting";
+            readonly dwell: "count";
+            readonly moves: "flag";
+            readonly onDrop: "doing";
+            readonly dispatch: "words";
+            readonly input: "holding";
+        };
+        readonly sets: {
+            readonly display: "layout-block";
+            readonly touchAction: "touch";
+            readonly userSelect: "pick";
+            readonly visibility: "shown";
+            readonly position: "flow";
+        };
+        readonly measures: readonly ["touch", "pick", "shown", "flow", "width", "height", "carry", "grip"];
+        readonly places: {
+            readonly carried: {
+                readonly tag: "div";
+                readonly shows: "carried";
+                readonly position: "position-pinned";
+                readonly left: "space-0";
+                readonly top: "space-0";
+                readonly width: "width";
+                readonly height: "height";
+                readonly transform: "carry";
+                readonly transformOrigin: "grip";
+                readonly pointerEvents: "reach-through";
+                readonly userSelect: "picking-off";
+                readonly zIndex: "layer-carried";
+                readonly willChange: "readying-movement";
+            };
+        };
+        readonly describes: "A region that claims a gesture, composed with anything and declared by nothing. Put it where the grab should be, not on the element.";
+    }, {
+        readonly id: "glyph";
+        readonly at: "thread/ui/elements/glyph.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly carries: {
+            readonly name: "ruling";
+            readonly labelKey: "noting";
+        };
+        readonly works: "./glyph.works.tsx";
+        readonly describes: "A semantic pictogram — `close`, `search` — resolved from whichever set the design chose at build time. It is laid out rather than left inline, because an `svg` that is left inline stands on a text baseline: the line it sits on keeps a descender's worth of room under the drawing, so the drawing rides above the middle of whatever holds it and the wording beside it reads as sitting lower. Measured 2026-09-03 in `thread-palette-lab`: a 24px symbol in a 28px box, its centre 2.00px above the row's and the wording's 0.36px below — 2.36px apart, the same amount everywhere, on every icon in the app.";
+        readonly sets: {
+            readonly display: "layout-flex";
+        };
+    }, {
+        readonly id: "image";
+        readonly at: "thread/ui/elements/image.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly carries: {
+            readonly src: "source";
+            readonly altKey: "naming";
+        };
+        readonly tag: "img";
+        readonly describes: "A picture with alternative wording, for photographs and artwork rather than for interface symbols.";
+    }, {
+        readonly id: "line-chart";
+        readonly at: "thread/ui/elements/line-chart.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "svg";
+        readonly reads: "picture";
+        readonly keeps: true;
+        readonly works: "./line-chart.works.ts";
+        readonly carries: {
+            readonly rows: "listing";
+            readonly by: "words";
+            readonly value: "ruling";
+            readonly titleKey: "titling";
+        };
+        readonly places: {
+            readonly line: {
+                readonly tag: "polyline";
+                readonly each: "lines";
+                readonly by: "group";
+                readonly gives: "drawing";
+            };
+        };
+        readonly describes: "A quantity over time, with axes. The chart for a trend somebody will read values off.";
+    }, {
+        readonly id: "link";
+        readonly at: "thread/ui/elements/link.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "a";
+        readonly keeps: true;
+        readonly shows: "labelKey";
+        readonly carries: {
+            readonly navigateTo: "ruling";
+            readonly labelKey: "wording";
+            readonly is: "styling";
+        };
+        readonly works: "./link.works.ts";
+        readonly describes: "Wording that carries somebody to a declared screen. A press that navigates and does not act.";
+    }, {
+        readonly id: "media";
+        readonly at: "thread/ui/elements/media.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: {
+            readonly by: "as";
+            readonly image: "img";
+            readonly video: "video";
+            readonly audio: "audio";
+            readonly file: "a";
+        };
+        readonly carries: {
+            readonly as: "words";
+            readonly src: "source";
+            readonly altKey: "naming";
+        };
+        readonly describes: "Whatever a media or file value turns out to be — a picture, a clip, a document — rendered by its kind.";
+    }, {
+        readonly id: "menu";
+        readonly at: "thread/ui/elements/menu.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "span";
+        readonly keeps: true;
+        readonly works: "./menu.works.tsx";
+        readonly dresses: "opener";
+        readonly measures: readonly ["x", "y"];
+        readonly carries: {
+            readonly labelKey: "wording";
+            readonly items: "listing";
+            readonly side: "words";
+        };
+        readonly places: {
+            readonly opener: {
+                readonly tag: "button";
+                readonly gives: "opener";
+                readonly shows: "labelKey";
+            };
+            readonly portal: {
+                readonly tag: "Presented";
+                readonly gives: "portal";
+                readonly holds: "layer";
+            };
+            readonly layer: {
+                readonly tag: "div";
+                readonly gives: "listing";
+                readonly holds: "row";
+                readonly position: "position-lifted";
+                readonly left: "x";
+                readonly top: "y";
+            };
+            readonly row: {
+                readonly tag: "MenuRow";
+                readonly each: "items";
+                readonly by: "labelKey";
+                readonly gives: "row";
+            };
+        };
+        readonly describes: "Actions revealed on demand from a trigger, with keyboard traversal and dismissal already handled.";
+    }, {
+        readonly id: "money";
+        readonly at: "thread/ui/elements/money.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly carries: {
+            readonly value: "amount";
+            readonly is: "styling";
+        };
+        readonly works: "./money.works.ts";
+        readonly describes: "An amount with its currency, formatted for the locale. Never a number and a symbol concatenated.";
+    }, {
+        readonly id: "pagination";
+        readonly at: "thread/ui/elements/pagination.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "nav";
+        readonly called: "nav.pagination";
+        readonly works: "./pagination.works.ts";
+        readonly carries: {
+            readonly map: "mapping";
+            readonly sequence: "ordering";
+            readonly current: "ruling";
+        };
+        readonly places: {
+            readonly step: {
+                readonly tag: "Link.linkInline";
+                readonly each: "steps";
+                readonly by: "id";
+                readonly gives: "step";
+            };
+        };
+        readonly describes: "Movement between pages of a long result, for when scrolling to the end is not reasonable.";
+    }, {
+        readonly id: "progress";
+        readonly at: "thread/ui/elements/progress.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly reads: "progress";
+        readonly carries: {
+            readonly value: "count";
+            readonly target: "count";
+            readonly labelKey: "naming";
+        };
+        readonly measures: readonly ["fraction", "span"];
+        readonly works: "./progress.works.ts";
+        readonly places: {
+            readonly bar: {
+                readonly width: "span";
+            };
+        };
+        readonly describes: "Work advancing toward a known end. The determinate half of what a spinner shows.";
+    }, {
+        readonly id: "radio-group";
+        readonly at: "thread/ui/elements/radio-group.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly reads: "choices";
+        readonly keeps: true;
+        readonly works: "./radio-group.works.ts";
+        readonly carries: {
+            readonly name: "ruling";
+            readonly labelKey: "naming";
+            readonly options: "listing";
+            readonly chosen: "words";
+            readonly onValue: "picking";
+            readonly disabled: "flag";
+        };
+        readonly places: {
+            readonly option: {
+                readonly tag: "label";
+                readonly each: "options";
+                readonly by: "value";
+                readonly holds: "control caption";
+            };
+            readonly control: {
+                readonly tag: "input";
+                readonly reads: "choosing";
+                readonly gives: "option";
+            };
+            readonly caption: {
+                readonly shows: "caption";
+            };
+        };
+        readonly describes: "One answer from a short set, all visible at once. The version of a picker with nothing hidden.";
+    }, {
+        readonly id: "row";
+        readonly at: "thread/ui/elements/row.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly describes: "Children left to right at the width each one needs. The horizontal arrangement, and the one this catalogue did not have — measured 2026-08-31: a column stacks, a grid cuts equal tracks, a stack overlaps, and a box states what it means rather than which way it runs, so a label beside a button had no declared shape and every app drew it with a host element.";
+        readonly arranges: true;
+        readonly sets: {
+            readonly display: "layout-flex";
+            readonly flexDirection: "flow-across";
+            readonly alignItems: "align-centre";
+            readonly gap: "space-3";
+        };
+    }, {
+        readonly id: "scatter";
+        readonly at: "thread/ui/elements/scatter.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "svg";
+        readonly reads: "picture";
+        readonly keeps: true;
+        readonly works: "./scatter.works.ts";
+        readonly carries: {
+            readonly rows: "listing";
+            readonly x: "ruling";
+            readonly y: "ruling";
+            readonly titleKey: "titling";
+        };
+        readonly places: {
+            readonly point: {
+                readonly tag: "circle";
+                readonly each: "rows";
+                readonly keyed: "position";
+                readonly gives: "point";
+            };
+        };
+        readonly describes: "Two measurements plotted against each other, to show whether they move together.";
+    }, {
+        readonly id: "select";
+        readonly at: "thread/ui/elements/select.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "label";
+        readonly carries: {
+            readonly labelKey: "wording";
+            readonly options: "listing";
+            readonly value: "words";
+            readonly onValue: "picking";
+        };
+        readonly works: "./select.works.ts";
+        readonly places: {
+            readonly label: {
+                readonly shows: "labelKey";
+            };
+            readonly control: {
+                readonly tag: "select";
+                readonly reads: "chooser";
+                readonly shows: "value";
+                readonly holds: "option";
+            };
+            readonly option: {
+                readonly tag: "option";
+                readonly each: "options";
+                readonly by: "value";
+                readonly shows: "labelKey";
+            };
+        };
+        readonly describes: "One answer picked from a closed list somebody scrolls. For a handful of options, prefer radios.";
+    }, {
+        readonly id: "separator";
+        readonly at: "thread/ui/elements/separator.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly reads: "divider";
+        readonly carries: {
+            readonly labelKey: "noting";
+            readonly orientation: "words";
+        };
+        readonly places: {
+            readonly label: {
+                readonly shows: "labelKey";
+            };
+        };
+        readonly describes: "A visible break between groups, announced as one rather than drawn as a border on a neighbour.";
+    }, {
+        readonly id: "skeleton";
+        readonly at: "thread/ui/elements/skeleton.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "span";
+        readonly reads: "placeholder";
+        readonly carries: {
+            readonly lines: "count";
+        };
+        readonly places: {
+            readonly line: {
+                readonly each: "lines";
+            };
+        };
+        readonly describes: "The shape of content that has not arrived, sized like the real thing so nothing jumps when it does.";
+    }, {
+        readonly id: "slider";
+        readonly at: "thread/ui/elements/slider.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "input";
+        readonly reads: "sliding";
+        readonly gives: readonly ["min", "max", "step"];
+        readonly carries: {
+            readonly labelKey: "naming";
+            readonly value: "count";
+            readonly min: "count";
+            readonly max: "count";
+            readonly step: "count";
+            readonly onValue: "moving";
+        };
+        readonly works: "./slider.works.ts";
+        readonly describes: "A number chosen along a range, where the approximate value matters more than the exact one.";
+    }, {
+        readonly id: "sparkline";
+        readonly at: "thread/ui/elements/sparkline.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "svg";
+        readonly reads: "placeholder";
+        readonly keeps: true;
+        readonly works: "./sparkline.works.ts";
+        readonly carries: {
+            readonly rows: "listing";
+            readonly value: "ruling";
+        };
+        readonly places: {
+            readonly line: {
+                readonly tag: "polyline";
+                readonly gives: "drawing";
+            };
+        };
+        readonly describes: "A shape over time with no axes, small enough to sit inside a row of text.";
+    }, {
+        readonly id: "spinner";
+        readonly at: "thread/ui/elements/spinner.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly carries: {
+            readonly labelKey: "naming";
+        };
+        readonly always: readonly ["spinner"];
+        readonly tag: "span";
+        readonly describes: "Work in progress with no measurable end. Where the end IS measurable, show progress instead.";
+    }, {
+        readonly id: "stack";
+        readonly at: "thread/ui/elements/stack.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly describes: "Children on the z-axis, overlapping by a token offset — an avatar sitting over the top edge of a panel.";
+        readonly arranges: true;
+    }, {
+        readonly id: "stat";
+        readonly at: "thread/ui/elements/stat.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "figure";
+        readonly carries: {
+            readonly labelKey: "wording";
+            readonly value: "amount";
+            readonly compare: "count";
+            readonly format: "words";
+        };
+        readonly works: "./stat.works.ts";
+        readonly places: {
+            readonly figure: {
+                readonly shows: "figure";
+            };
+            readonly caption: {
+                readonly tag: "figcaption";
+                readonly shows: "labelKey";
+            };
+            readonly delta: {
+                readonly shows: "delta";
+            };
+        };
+        readonly describes: "One headline number with its movement, derived. Passing a precomputed delta is how a dashboard disagrees with itself.";
+    }, {
+        readonly id: "surface";
+        readonly at: "thread/ui/elements/surface.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly arranges: true;
+        readonly keeps: true;
+        readonly animates: true;
+        readonly works: "./surface.works.ts";
+        readonly describes: "A plain painted panel wearing a resolved look, for when the treatment IS the content.";
+    }, {
+        readonly id: "table";
+        readonly at: "thread/ui/elements/table.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "table";
+        readonly keeps: true;
+        readonly works: "./table.works.ts";
+        readonly carries: {
+            readonly rows: "listing";
+            readonly columns: "listing";
+            readonly by: "ruling";
+            readonly titleKey: "titling";
+        };
+        readonly places: {
+            readonly head: {
+                readonly tag: "thead";
+                readonly holds: "heading";
+            };
+            readonly heading: {
+                readonly tag: "tr";
+                readonly holds: "headed";
+            };
+            readonly headed: {
+                readonly tag: "th";
+                readonly each: "columns";
+                readonly by: "field";
+                readonly gives: "heading";
+                readonly shows: "heading";
+            };
+            readonly body: {
+                readonly tag: "tbody";
+                readonly holds: "record";
+            };
+            readonly record: {
+                readonly tag: "tr";
+                readonly each: "rows";
+                readonly by: "by";
+                readonly holds: "cell";
+            };
+            readonly cell: {
+                readonly tag: "td";
+                readonly each: "columns";
+                readonly by: "field";
+                readonly shows: "cell";
+            };
+        };
+        readonly describes: "Rows and columns somebody scans and compares. Reach for this when the exact values are the point.";
+    }, {
+        readonly id: "tabs";
+        readonly at: "thread/ui/elements/tabs.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "div";
+        readonly keeps: true;
+        readonly works: "./tabs.works.ts";
+        readonly carries: {
+            readonly items: "parting";
+            readonly initial: "words";
+            readonly onChange: "picking";
+            readonly orientation: "words";
+        };
+        readonly dresses: "strip";
+        readonly places: {
+            readonly strip: {
+                readonly tag: "div";
+                readonly gives: "strip";
+                readonly holds: "tab";
+                readonly display: "layout-flex";
+                readonly alignItems: "align-centre";
+            };
+            readonly tab: {
+                readonly tag: "button";
+                readonly each: "items";
+                readonly by: "id";
+                readonly gives: "tab";
+                readonly shows: "label";
+                readonly display: "layout-flex";
+                readonly alignItems: "align-centre";
+                readonly justifyContent: "align-centre";
+                readonly height: "control-md";
+                readonly padding: "control-pad-y control-pad-x";
+                readonly borderRadius: "control-radius";
+                readonly borderWidth: "edge-hair";
+                readonly borderStyle: "line-off";
+                readonly borderColor: "colour-clear";
+                readonly background: "colour-clear";
+                readonly color: "colour-ink";
+                readonly cursor: "cursor-press";
+                readonly transition: "motion-quick ease-out";
+            };
+            readonly panel: {
+                readonly tag: "div";
+                readonly when: "opened";
+                readonly gives: "panel";
+                readonly shows: "inside";
+            };
+        };
+        readonly describes: "Sibling panels where only one is visible, switched without going anywhere. Not navigation between screens. It `dresses` its strip rather than itself, which is the difference between a row of tabs and a capsule: the element wraps the strip AND the panel, so a variant landing on the element put `radius-lg` and a filled material around the whole assembly — measured 2026-09-03, and it is what made tabs read as one pill with a page inside it. The tab itself states its own look here because every key it had was structural, so the generator emitted a `button` with no class at all and nothing any style guide row said could reach it.";
+    }, {
+        readonly id: "text";
+        readonly at: "thread/ui/elements/text.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "span";
+        readonly shows: "k";
+        readonly sets: {
+            readonly display: "layout-inline-block";
+        };
+        readonly carries: {
+            readonly k: "wording";
+            readonly with: "holding";
+            readonly is: "styling";
+            readonly announce: "announcing";
+        };
+        readonly describes: "The only place a message key becomes visible words. Every sentence a person reads passes through here. It sets `inline-block` because that is what makes a font role's trim reach it: `text-box-trim` acts on a block container's line boxes and an inline box is not one, so a role carrying the trim governed nothing wherever wording rendered inline. Measured 2026-09-03 at a 1280 viewport: 62 of 90 text elements trimmed to their cap height exactly without this, 72 with it, and the number wrapping to more than one line was 4 either way — it costs no wrapping. Inline-block rather than block because wording still belongs in a line beside other things when an app puts it there.";
+    }, {
+        readonly id: "textarea";
+        readonly at: "thread/ui/elements/textarea.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "label";
+        readonly carries: {
+            readonly labelKey: "wording";
+            readonly name: "words";
+            readonly value: "words";
+            readonly onValue: "picking";
+            readonly validator: "words";
+            readonly rows: "count";
+        };
+        readonly works: "./textarea.works.ts";
+        readonly places: {
+            readonly label: {
+                readonly shows: "labelKey";
+            };
+            readonly control: {
+                readonly tag: "textarea";
+                readonly reads: "writing";
+                readonly shows: "value";
+                readonly takes: "name rows validator";
+            };
+        };
+        readonly describes: "Prose being typed across more than one line, where the shape of what is written matters.";
+    }, {
+        readonly id: "time";
+        readonly at: "thread/ui/elements/time.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly keeps: true;
+        readonly carries: {
+            readonly value: "amount";
+            readonly relative: "flag";
+            readonly is: "styling";
+        };
+        readonly works: "./time.works.ts";
+        readonly describes: "A moment, formatted absolutely or as distance from now. Never a date somebody assembled from parts.";
+    }, {
+        readonly id: "toggle";
+        readonly at: "thread/ui/elements/toggle.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "label";
+        readonly carries: {
+            readonly labelKey: "wording";
+            readonly on: "flag";
+            readonly onToggle: "telling";
+        };
+        readonly works: "./toggle.works.ts";
+        readonly places: {
+            readonly control: {
+                readonly tag: "input";
+                readonly reads: "choice";
+                readonly shows: "on";
+            };
+            readonly label: {
+                readonly shows: "labelKey";
+            };
+        };
+        readonly describes: "A single yes-or-no answer, flipped in place. Reach for this rather than two mutually exclusive buttons.";
+    }, {
+        readonly id: "tooltip";
+        readonly at: "thread/ui/elements/tooltip.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly tag: "span";
+        readonly arranges: true;
+        readonly keeps: true;
+        readonly works: "./tooltip.works.ts";
+        readonly dresses: "bubble";
+        readonly measures: readonly ["x", "y"];
+        readonly carries: {
+            readonly labelKey: "wording";
+            readonly side: "words";
+        };
+        readonly places: {
+            readonly bubble: {
+                readonly tag: "span";
+                readonly when: "showing";
+                readonly gives: "bubble";
+                readonly shows: "labelKey";
+                readonly position: "position-lifted";
+                readonly left: "x";
+                readonly top: "y";
+            };
+        };
+        readonly describes: "A short clarification revealed by hovering or focusing. Never the only place something is said.";
+    }, {
+        readonly id: "value";
+        readonly at: "thread/ui/elements/value.tsx";
+        readonly by: "thread elements";
+        readonly runs: "thread elements --own --check";
+        readonly carries: {
+            readonly validator: "ruling";
+            readonly value: "amount";
+            readonly context: "holding";
+            readonly is: "styling";
+        };
+        readonly works: "./value.works.ts";
+        readonly describes: "A single formatted datum, punctuated by the validator that governs its kind rather than by the caller.";
+    }];
+};