@prestack/thread-ui 0.1.0 → 0.1.2

package/dist/ui/elements.d.ts

@@ -1,17 +1,17 @@
 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 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-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 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 derives: readonly [{
         readonly id: "accordion";
         readonly at: "thread/ui/elements/accordion.tsx";
         readonly by: "thread elements";
@@ -179,7 +179,6 @@ export declare const ELEMENTS: {
             readonly type: "words";
             readonly disabled: "flag";
             readonly loading: "flag";
-            readonly dispatch: "words";
             readonly input: "holding";
             readonly navigateTo: "words";
             readonly onPress: "doing";
@@ -484,7 +483,6 @@ export declare const ELEMENTS: {
             readonly dwell: "count";
             readonly moves: "flag";
             readonly onDrop: "doing";
-            readonly dispatch: "words";
             readonly input: "holding";
         };
         readonly sets: {
@@ -642,6 +640,8 @@ export declare const ELEMENTS: {
         readonly at: "thread/ui/elements/money.tsx";
         readonly by: "thread elements";
         readonly runs: "thread elements --own --check";
+        readonly tag: "span";
+        readonly raises: readonly ["invalid"];
         readonly carries: {
             readonly value: "amount";
             readonly is: "styling";
@@ -1068,6 +1068,8 @@ export declare const ELEMENTS: {
         readonly at: "thread/ui/elements/time.tsx";
         readonly by: "thread elements";
         readonly runs: "thread elements --own --check";
+        readonly tag: "span";
+        readonly raises: readonly ["invalid"];
         readonly keeps: true;
         readonly carries: {
             readonly value: "amount";
@@ -1131,6 +1133,8 @@ export declare const ELEMENTS: {
         readonly at: "thread/ui/elements/value.tsx";
         readonly by: "thread elements";
         readonly runs: "thread elements --own --check";
+        readonly tag: "span";
+        readonly raises: readonly ["invalid"];
         readonly carries: {
             readonly validator: "ruling";
             readonly value: "amount";

package/dist/ui/elements.js

@@ -15,7 +15,7 @@ export const ELEMENTS = {
             said: 'CLI actually generates the tsx file, and you MUST give the file its body, properly.',
         },
     ],
-    declares: arranging([
+    derives: arranging([
         { id: 'accordion', at: 'thread/ui/elements/accordion.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', keeps: true, works: './accordion.works.ts', carries: { items: 'parting', initial: 'ordering', exclusive: 'flag', onChange: 'choosing' }, places: { section: { tag: 'div', each: 'items', by: 'id', gives: 'section', holds: 'header region' }, header: { tag: 'button', gives: 'header', shows: 'label' }, region: { tag: 'div', gives: 'region', shows: 'inside' } }, describes: 'Sections that open one at a time, for long material somebody reads part of.' },
         { id: 'aspect-ratio', at: 'thread/ui/elements/aspect-ratio.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', arranges: true, carries: { ratio: 'count' }, measures: ['ratio'], works: './aspect-ratio.works.ts', sets: { aspectRatio: 'ratio' }, describes: 'A slot that keeps its proportions whatever width it gets, so a loading picture reserves its room.' },
         { id: 'avatar', at: 'thread/ui/elements/avatar.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', reads: 'picture', carries: { labelKey: 'naming', src: 'picture', initials: 'words' }, works: './avatar.works.ts', places: { picture: { tag: 'img', shows: 'src' }, lettering: { shows: 'lettering' } }, describes: 'A person or an organisation as a small picture, falling back to initials when there is no image.' },
@@ -23,7 +23,7 @@ export const ELEMENTS = {
         { id: 'bars', at: 'thread/ui/elements/bars.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', reads: 'picture', keeps: true, works: './bars.works.ts', carries: { rows: 'listing', by: 'ruling', value: 'ruling', format: 'words', titleKey: 'titling' }, places: { bar: { each: 'rows', by: 'by', marks: 'sized', holds: 'label amount' }, label: { shows: 'label' }, amount: { shows: 'amount' } }, describes: 'Quantities compared across categories. The default when the horizontal axis is not time.' },
         { id: 'box', at: 'thread/ui/elements/box.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', arranges: true, reads: 'grouping', raises: ['scrolling'], carries: { labelKey: 'titling' }, 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.' },
         { id: 'breadcrumb', at: 'thread/ui/elements/breadcrumb.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'nav', called: 'nav.breadcrumb', works: './breadcrumb.works.ts', carries: { map: 'mapping', current: 'ruling' }, places: { step: { tag: 'Link.linkInline', each: 'steps', by: 'id', gives: 'crumb' } }, describes: 'The trail back up from wherever somebody is, derived from the route rather than assembled by hand.' },
-        { id: 'button', at: 'thread/ui/elements/button.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'button', keeps: true, works: './button.works.tsx', wires: 'wires', carries: { label: 'wording', with: 'holding', icon: 'words', shows: 'words', type: 'words', disabled: 'flag', loading: 'flag', dispatch: 'words', input: 'holding', navigateTo: 'words', onPress: 'doing' }, places: { symbol: { when: 'iconed', shows: 'symbol', display: 'layout-flex', alignItems: 'align-centre' }, wording: { when: 'worded', shows: 'wording' } }, describes: 'A press that runs a declared workflow or goes to a declared screen. The only way to start either from a tap.' },
+        { id: 'button', at: 'thread/ui/elements/button.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'button', keeps: true, works: './button.works.tsx', wires: 'wires', carries: { label: 'wording', with: 'holding', icon: 'words', shows: 'words', type: 'words', disabled: 'flag', loading: 'flag', input: 'holding', navigateTo: 'words', onPress: 'doing' }, places: { symbol: { when: 'iconed', shows: 'symbol', display: 'layout-flex', alignItems: 'align-centre' }, wording: { when: 'worded', shows: 'wording' } }, describes: 'A press that runs a declared workflow or goes to a declared screen. The only way to start either from a tap.' },
         { id: 'column', at: 'thread/ui/elements/column.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', describes: 'Children stacked top to bottom. The vertical arrangement, and the default shape of a form.', arranges: true, sets: { display: 'layout-flex', flexDirection: 'flow-down', gap: 'space-3' } },
         { id: 'consent', at: 'thread/ui/elements/consent.tsx', by: 'thread elements', runs: 'thread elements --own --check', keeps: true, works: './consent.works.tsx', carries: { decision: 'judging', onDecide: 'judged', policyKey: 'noting', preselected: 'ordering' }, places: { panel: { tag: 'Box.card', holds: 'body' }, body: { tag: 'Column', holds: 'title policy list actions' }, title: { tag: 'Text', gives: 'title' }, policy: { tag: 'Text', when: 'hasPolicy', gives: 'policy' }, list: { tag: 'Column', holds: 'category' }, category: { tag: 'Box', each: 'categories', by: 'id', holds: 'words switch fixed' }, words: { tag: 'Column', holds: 'label describe' }, label: { tag: 'Text', gives: 'label' }, describe: { tag: 'Text', gives: 'describe' }, switch: { tag: 'Toggle.input', when: 'optional', gives: 'chooser' }, fixed: { tag: 'Text', when: 'required', gives: 'fixed' }, actions: { tag: 'Box', holds: 'withdraw decline accept accept-all' }, withdraw: { tag: 'Button.buttonQuiet', when: 'withdrawable', gives: 'withdraw' }, decline: { tag: 'Button.buttonBorder', gives: 'decline' }, accept: { tag: 'Button.buttonBorder', gives: 'accept' }, 'accept-all': { tag: 'Button.buttonFill', gives: 'acceptAll' } }, describes: 'The complete permission-to-collect surface, with every declared category and its decision.' },
         { id: 'donut', at: 'thread/ui/elements/donut.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'svg', reads: 'picture', keeps: true, works: './donut.works.ts', carries: { rows: 'listing', by: 'ruling', value: 'ruling', titleKey: 'titling' }, places: { slice: { tag: 'circle', each: 'rows', by: 'by', gives: 'slice' } }, describes: 'Parts of one whole, for a handful of slices. Beyond that the reading is worse than a bar.' },
@@ -34,14 +34,14 @@ export const ELEMENTS = {
         { id: 'gauge', at: 'thread/ui/elements/gauge.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'svg', reads: 'picture', keeps: true, works: './gauge.works.ts', carries: { value: 'count', min: 'count', max: 'count', labelKey: 'naming' }, places: { track: { tag: 'path', gives: 'track' }, needle: { tag: 'path', gives: 'needle' } }, describes: 'A single quantity against a target, where the reading is how far along rather than how much.' },
         { id: 'grid', at: 'thread/ui/elements/grid.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', 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.', arranges: true },
         { id: 'heatmap', at: 'thread/ui/elements/heatmap.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', reads: 'picture', keeps: true, works: './heatmap.works.ts', carries: { rows: 'listing', by: 'ruling', x: 'ruling', y: 'ruling', value: 'words', titleKey: 'titling' }, places: { cell: { each: 'rows', by: 'by', marks: 'sized' } }, describes: 'Density across two axes, for when the pattern matters more than any single cell.' },
-        { id: 'hit-box', at: 'thread/ui/elements/hit-box.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', arranges: true, keeps: true, works: './hit-box.works.tsx', wires: 'wires', carries: { gesture: 'ruling', tuning: 'tuning', axis: 'words', grabs: 'subjecting', accepts: 'ordering', collects: 'subjecting', dwell: 'count', moves: 'flag', onDrop: 'doing', dispatch: 'words', input: 'holding' }, sets: { display: 'layout-block', touchAction: 'touch', userSelect: 'pick', visibility: 'shown', position: 'flow' }, measures: ['touch', 'pick', 'shown', 'flow', 'width', 'height', 'carry', 'grip'], places: { carried: { tag: 'div', shows: 'carried', position: 'position-pinned', left: 'space-0', top: 'space-0', width: 'width', height: 'height', transform: 'carry', transformOrigin: 'grip', pointerEvents: 'reach-through', userSelect: 'picking-off', zIndex: 'layer-carried', willChange: 'readying-movement' } }, 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.' },
+        { id: 'hit-box', at: 'thread/ui/elements/hit-box.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', arranges: true, keeps: true, works: './hit-box.works.tsx', wires: 'wires', carries: { gesture: 'ruling', tuning: 'tuning', axis: 'words', grabs: 'subjecting', accepts: 'ordering', collects: 'subjecting', dwell: 'count', moves: 'flag', onDrop: 'doing', input: 'holding' }, sets: { display: 'layout-block', touchAction: 'touch', userSelect: 'pick', visibility: 'shown', position: 'flow' }, measures: ['touch', 'pick', 'shown', 'flow', 'width', 'height', 'carry', 'grip'], places: { carried: { tag: 'div', shows: 'carried', position: 'position-pinned', left: 'space-0', top: 'space-0', width: 'width', height: 'height', transform: 'carry', transformOrigin: 'grip', pointerEvents: 'reach-through', userSelect: 'picking-off', zIndex: 'layer-carried', willChange: 'readying-movement' } }, 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.' },
         { id: 'glyph', at: 'thread/ui/elements/glyph.tsx', by: 'thread elements', runs: 'thread elements --own --check', carries: { name: 'ruling', labelKey: 'noting' }, works: './glyph.works.tsx', 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.', sets: { display: 'layout-flex' } },
         { id: 'image', at: 'thread/ui/elements/image.tsx', by: 'thread elements', runs: 'thread elements --own --check', carries: { src: 'source', altKey: 'naming' }, tag: 'img', describes: 'A picture with alternative wording, for photographs and artwork rather than for interface symbols.' },
         { id: 'line-chart', at: 'thread/ui/elements/line-chart.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'svg', reads: 'picture', keeps: true, works: './line-chart.works.ts', carries: { rows: 'listing', by: 'words', value: 'ruling', titleKey: 'titling' }, places: { line: { tag: 'polyline', each: 'lines', by: 'group', gives: 'drawing' } }, describes: 'A quantity over time, with axes. The chart for a trend somebody will read values off.' },
         { id: 'link', at: 'thread/ui/elements/link.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'a', keeps: true, shows: 'labelKey', carries: { navigateTo: 'ruling', labelKey: 'wording', is: 'styling' }, works: './link.works.ts', describes: 'Wording that carries somebody to a declared screen. A press that navigates and does not act.' },
         { id: 'media', at: 'thread/ui/elements/media.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: { by: 'as', image: 'img', video: 'video', audio: 'audio', file: 'a' }, carries: { as: 'words', src: 'source', altKey: 'naming' }, describes: 'Whatever a media or file value turns out to be — a picture, a clip, a document — rendered by its kind.' },
         { id: 'menu', at: 'thread/ui/elements/menu.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', keeps: true, works: './menu.works.tsx', dresses: 'opener', measures: ['x', 'y'], carries: { labelKey: 'wording', items: 'listing', side: 'words' }, places: { opener: { tag: 'button', gives: 'opener', shows: 'labelKey' }, portal: { tag: 'Presented', gives: 'portal', holds: 'layer' }, layer: { tag: 'div', gives: 'listing', holds: 'row', position: 'position-lifted', left: 'x', top: 'y' }, row: { tag: 'MenuRow', each: 'items', by: 'labelKey', gives: 'row' } }, describes: 'Actions revealed on demand from a trigger, with keyboard traversal and dismissal already handled.' },
-        { id: 'money', at: 'thread/ui/elements/money.tsx', by: 'thread elements', runs: 'thread elements --own --check', carries: { value: 'amount', is: 'styling' }, works: './money.works.ts', describes: 'An amount with its currency, formatted for the locale. Never a number and a symbol concatenated.' },
+        { id: 'money', at: 'thread/ui/elements/money.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', raises: ['invalid'], carries: { value: 'amount', is: 'styling' }, works: './money.works.ts', describes: 'An amount with its currency, formatted for the locale. Never a number and a symbol concatenated.' },
         { id: 'pagination', at: 'thread/ui/elements/pagination.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'nav', called: 'nav.pagination', works: './pagination.works.ts', carries: { map: 'mapping', sequence: 'ordering', current: 'ruling' }, places: { step: { tag: 'Link.linkInline', each: 'steps', by: 'id', gives: 'step' } }, describes: 'Movement between pages of a long result, for when scrolling to the end is not reasonable.' },
         { id: 'progress', at: 'thread/ui/elements/progress.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', reads: 'progress', carries: { value: 'count', target: 'count', labelKey: 'naming' }, measures: ['fraction', 'span'], works: './progress.works.ts', places: { bar: { width: 'span' } }, describes: 'Work advancing toward a known end. The determinate half of what a spinner shows.' },
         { id: 'radio-group', at: 'thread/ui/elements/radio-group.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', reads: 'choices', keeps: true, works: './radio-group.works.ts', carries: { name: 'ruling', labelKey: 'naming', options: 'listing', chosen: 'words', onValue: 'picking', disabled: 'flag' }, places: { option: { tag: 'label', each: 'options', by: 'value', holds: 'control caption' }, control: { tag: 'input', reads: 'choosing', gives: 'option' }, caption: { shows: 'caption' } }, describes: 'One answer from a short set, all visible at once. The version of a picker with nothing hidden.' },
@@ -60,9 +60,9 @@ export const ELEMENTS = {
         { id: 'tabs', at: 'thread/ui/elements/tabs.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', keeps: true, works: './tabs.works.ts', carries: { items: 'parting', initial: 'words', onChange: 'picking', orientation: 'words' }, dresses: 'strip', places: { strip: { tag: 'div', gives: 'strip', holds: 'tab', display: 'layout-flex', alignItems: 'align-centre' }, tab: { tag: 'button', each: 'items', by: 'id', gives: 'tab', shows: 'label', display: 'layout-flex', alignItems: 'align-centre', justifyContent: 'align-centre', height: 'control-md', padding: 'control-pad-y control-pad-x', borderRadius: 'control-radius', borderWidth: 'edge-hair', borderStyle: 'line-off', borderColor: 'colour-clear', background: 'colour-clear', color: 'colour-ink', cursor: 'cursor-press', transition: 'motion-quick ease-out' }, panel: { tag: 'div', when: 'opened', gives: 'panel', shows: 'inside' } }, 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.' },
         { id: 'text', at: 'thread/ui/elements/text.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', shows: 'k', sets: { display: 'layout-inline-block' }, carries: { k: 'wording', with: 'holding', is: 'styling', announce: 'announcing' }, 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.' },
         { id: 'textarea', at: 'thread/ui/elements/textarea.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'label', carries: { labelKey: 'wording', name: 'words', value: 'words', onValue: 'picking', validator: 'words', rows: 'count' }, works: './textarea.works.ts', places: { label: { shows: 'labelKey' }, control: { tag: 'textarea', reads: 'writing', shows: 'value', takes: 'name rows validator' } }, describes: 'Prose being typed across more than one line, where the shape of what is written matters.' },
-        { id: 'time', at: 'thread/ui/elements/time.tsx', by: 'thread elements', runs: 'thread elements --own --check', keeps: true, carries: { value: 'amount', relative: 'flag', is: 'styling' }, works: './time.works.ts', describes: 'A moment, formatted absolutely or as distance from now. Never a date somebody assembled from parts.' },
+        { id: 'time', at: 'thread/ui/elements/time.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', raises: ['invalid'], keeps: true, carries: { value: 'amount', relative: 'flag', is: 'styling' }, works: './time.works.ts', describes: 'A moment, formatted absolutely or as distance from now. Never a date somebody assembled from parts.' },
         { id: 'toggle', at: 'thread/ui/elements/toggle.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'label', carries: { labelKey: 'wording', on: 'flag', onToggle: 'telling' }, works: './toggle.works.ts', places: { control: { tag: 'input', reads: 'choice', shows: 'on' }, label: { shows: 'labelKey' } }, describes: 'A single yes-or-no answer, flipped in place. Reach for this rather than two mutually exclusive buttons.' },
         { id: 'tooltip', at: 'thread/ui/elements/tooltip.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', arranges: true, keeps: true, works: './tooltip.works.ts', dresses: 'bubble', measures: ['x', 'y'], carries: { labelKey: 'wording', side: 'words' }, places: { bubble: { tag: 'span', when: 'showing', gives: 'bubble', shows: 'labelKey', position: 'position-lifted', left: 'x', top: 'y' } }, describes: 'A short clarification revealed by hovering or focusing. Never the only place something is said.' },
-        { id: 'value', at: 'thread/ui/elements/value.tsx', by: 'thread elements', runs: 'thread elements --own --check', carries: { validator: 'ruling', value: 'amount', context: 'holding', is: 'styling' }, works: './value.works.ts', describes: 'A single formatted datum, punctuated by the validator that governs its kind rather than by the caller.' },
+        { id: 'value', at: 'thread/ui/elements/value.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', raises: ['invalid'], carries: { validator: 'ruling', value: 'amount', context: 'holding', is: 'styling' }, works: './value.works.ts', describes: 'A single formatted datum, punctuated by the validator that governs its kind rather than by the caller.' },
     ]),
 };

package/dist/ui/elements.ts

@@ -38,7 +38,7 @@ interface Arranging extends Threaded {
 
 interface Catalogue extends Threaded {
   readonly files: string
-  readonly declares?: readonly Arranging[]
+  readonly derives?: readonly Arranging[]
 }
 
 const arranging = <const T extends readonly Arranging[]>(
@@ -74,7 +74,7 @@ export const ELEMENTS = {
       said: 'CLI actually generates the tsx file, and you MUST give the file its body, properly.',
     },
   ],
-  declares: arranging([
+  derives: arranging([
     { id: 'accordion', at: 'thread/ui/elements/accordion.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', keeps: true, works: './accordion.works.ts', carries: { items: 'parting', initial: 'ordering', exclusive: 'flag', onChange: 'choosing' }, places: { section: { tag: 'div', each: 'items', by: 'id', gives: 'section', holds: 'header region' }, header: { tag: 'button', gives: 'header', shows: 'label' }, region: { tag: 'div', gives: 'region', shows: 'inside' } }, describes: 'Sections that open one at a time, for long material somebody reads part of.' },
     { id: 'aspect-ratio', at: 'thread/ui/elements/aspect-ratio.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', arranges: true, carries: { ratio: 'count' }, measures: ['ratio'], works: './aspect-ratio.works.ts', sets: { aspectRatio: 'ratio' }, describes: 'A slot that keeps its proportions whatever width it gets, so a loading picture reserves its room.' },
     { id: 'avatar', at: 'thread/ui/elements/avatar.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', reads: 'picture', carries: { labelKey: 'naming', src: 'picture', initials: 'words' }, works: './avatar.works.ts', places: { picture: { tag: 'img', shows: 'src' }, lettering: { shows: 'lettering' } }, describes: 'A person or an organisation as a small picture, falling back to initials when there is no image.' },
@@ -82,7 +82,7 @@ export const ELEMENTS = {
     { id: 'bars', at: 'thread/ui/elements/bars.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', reads: 'picture', keeps: true, works: './bars.works.ts', carries: { rows: 'listing', by: 'ruling', value: 'ruling', format: 'words', titleKey: 'titling' }, places: { bar: { each: 'rows', by: 'by', marks: 'sized', holds: 'label amount' }, label: { shows: 'label' }, amount: { shows: 'amount' } }, describes: 'Quantities compared across categories. The default when the horizontal axis is not time.' },
     { id: 'box', at: 'thread/ui/elements/box.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', arranges: true, reads: 'grouping', raises: ['scrolling'], carries: { labelKey: 'titling' }, 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.' },
     { id: 'breadcrumb', at: 'thread/ui/elements/breadcrumb.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'nav', called: 'nav.breadcrumb', works: './breadcrumb.works.ts', carries: { map: 'mapping', current: 'ruling' }, places: { step: { tag: 'Link.linkInline', each: 'steps', by: 'id', gives: 'crumb' } }, describes: 'The trail back up from wherever somebody is, derived from the route rather than assembled by hand.' },
-    { id: 'button', at: 'thread/ui/elements/button.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'button', keeps: true, works: './button.works.tsx', wires: 'wires', carries: { label: 'wording', with: 'holding', icon: 'words', shows: 'words', type: 'words', disabled: 'flag', loading: 'flag', dispatch: 'words', input: 'holding', navigateTo: 'words', onPress: 'doing' }, places: { symbol: { when: 'iconed', shows: 'symbol', display: 'layout-flex', alignItems: 'align-centre' }, wording: { when: 'worded', shows: 'wording' } }, describes: 'A press that runs a declared workflow or goes to a declared screen. The only way to start either from a tap.' },
+    { id: 'button', at: 'thread/ui/elements/button.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'button', keeps: true, works: './button.works.tsx', wires: 'wires', carries: { label: 'wording', with: 'holding', icon: 'words', shows: 'words', type: 'words', disabled: 'flag', loading: 'flag', input: 'holding', navigateTo: 'words', onPress: 'doing' }, places: { symbol: { when: 'iconed', shows: 'symbol', display: 'layout-flex', alignItems: 'align-centre' }, wording: { when: 'worded', shows: 'wording' } }, describes: 'A press that runs a declared workflow or goes to a declared screen. The only way to start either from a tap.' },
     { id: 'column', at: 'thread/ui/elements/column.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', describes: 'Children stacked top to bottom. The vertical arrangement, and the default shape of a form.', arranges: true, sets: { display: 'layout-flex', flexDirection: 'flow-down', gap: 'space-3' } },
     { id: 'consent', at: 'thread/ui/elements/consent.tsx', by: 'thread elements', runs: 'thread elements --own --check', keeps: true, works: './consent.works.tsx', carries: { decision: 'judging', onDecide: 'judged', policyKey: 'noting', preselected: 'ordering' }, places: { panel: { tag: 'Box.card', holds: 'body' }, body: { tag: 'Column', holds: 'title policy list actions' }, title: { tag: 'Text', gives: 'title' }, policy: { tag: 'Text', when: 'hasPolicy', gives: 'policy' }, list: { tag: 'Column', holds: 'category' }, category: { tag: 'Box', each: 'categories', by: 'id', holds: 'words switch fixed' }, words: { tag: 'Column', holds: 'label describe' }, label: { tag: 'Text', gives: 'label' }, describe: { tag: 'Text', gives: 'describe' }, switch: { tag: 'Toggle.input', when: 'optional', gives: 'chooser' }, fixed: { tag: 'Text', when: 'required', gives: 'fixed' }, actions: { tag: 'Box', holds: 'withdraw decline accept accept-all' }, withdraw: { tag: 'Button.buttonQuiet', when: 'withdrawable', gives: 'withdraw' }, decline: { tag: 'Button.buttonBorder', gives: 'decline' }, accept: { tag: 'Button.buttonBorder', gives: 'accept' }, 'accept-all': { tag: 'Button.buttonFill', gives: 'acceptAll' } }, describes: 'The complete permission-to-collect surface, with every declared category and its decision.' },
     { id: 'donut', at: 'thread/ui/elements/donut.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'svg', reads: 'picture', keeps: true, works: './donut.works.ts', carries: { rows: 'listing', by: 'ruling', value: 'ruling', titleKey: 'titling' }, places: { slice: { tag: 'circle', each: 'rows', by: 'by', gives: 'slice' } }, describes: 'Parts of one whole, for a handful of slices. Beyond that the reading is worse than a bar.' },
@@ -93,14 +93,14 @@ export const ELEMENTS = {
     { id: 'gauge', at: 'thread/ui/elements/gauge.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'svg', reads: 'picture', keeps: true, works: './gauge.works.ts', carries: { value: 'count', min: 'count', max: 'count', labelKey: 'naming' }, places: { track: { tag: 'path', gives: 'track' }, needle: { tag: 'path', gives: 'needle' } }, describes: 'A single quantity against a target, where the reading is how far along rather than how much.' },
     { id: 'grid', at: 'thread/ui/elements/grid.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', 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.', arranges: true },
     { id: 'heatmap', at: 'thread/ui/elements/heatmap.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', reads: 'picture', keeps: true, works: './heatmap.works.ts', carries: { rows: 'listing', by: 'ruling', x: 'ruling', y: 'ruling', value: 'words', titleKey: 'titling' }, places: { cell: { each: 'rows', by: 'by', marks: 'sized' } }, describes: 'Density across two axes, for when the pattern matters more than any single cell.' },
-    { id: 'hit-box', at: 'thread/ui/elements/hit-box.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', arranges: true, keeps: true, works: './hit-box.works.tsx', wires: 'wires', carries: { gesture: 'ruling', tuning: 'tuning', axis: 'words', grabs: 'subjecting', accepts: 'ordering', collects: 'subjecting', dwell: 'count', moves: 'flag', onDrop: 'doing', dispatch: 'words', input: 'holding' }, sets: { display: 'layout-block', touchAction: 'touch', userSelect: 'pick', visibility: 'shown', position: 'flow' }, measures: ['touch', 'pick', 'shown', 'flow', 'width', 'height', 'carry', 'grip'], places: { carried: { tag: 'div', shows: 'carried', position: 'position-pinned', left: 'space-0', top: 'space-0', width: 'width', height: 'height', transform: 'carry', transformOrigin: 'grip', pointerEvents: 'reach-through', userSelect: 'picking-off', zIndex: 'layer-carried', willChange: 'readying-movement' } }, 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.' },
+    { id: 'hit-box', at: 'thread/ui/elements/hit-box.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', arranges: true, keeps: true, works: './hit-box.works.tsx', wires: 'wires', carries: { gesture: 'ruling', tuning: 'tuning', axis: 'words', grabs: 'subjecting', accepts: 'ordering', collects: 'subjecting', dwell: 'count', moves: 'flag', onDrop: 'doing', input: 'holding' }, sets: { display: 'layout-block', touchAction: 'touch', userSelect: 'pick', visibility: 'shown', position: 'flow' }, measures: ['touch', 'pick', 'shown', 'flow', 'width', 'height', 'carry', 'grip'], places: { carried: { tag: 'div', shows: 'carried', position: 'position-pinned', left: 'space-0', top: 'space-0', width: 'width', height: 'height', transform: 'carry', transformOrigin: 'grip', pointerEvents: 'reach-through', userSelect: 'picking-off', zIndex: 'layer-carried', willChange: 'readying-movement' } }, 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.' },
     { id: 'glyph', at: 'thread/ui/elements/glyph.tsx', by: 'thread elements', runs: 'thread elements --own --check', carries: { name: 'ruling', labelKey: 'noting' }, works: './glyph.works.tsx', 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.', sets: { display: 'layout-flex' } },
     { id: 'image', at: 'thread/ui/elements/image.tsx', by: 'thread elements', runs: 'thread elements --own --check', carries: { src: 'source', altKey: 'naming' }, tag: 'img', describes: 'A picture with alternative wording, for photographs and artwork rather than for interface symbols.' },
     { id: 'line-chart', at: 'thread/ui/elements/line-chart.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'svg', reads: 'picture', keeps: true, works: './line-chart.works.ts', carries: { rows: 'listing', by: 'words', value: 'ruling', titleKey: 'titling' }, places: { line: { tag: 'polyline', each: 'lines', by: 'group', gives: 'drawing' } }, describes: 'A quantity over time, with axes. The chart for a trend somebody will read values off.' },
     { id: 'link', at: 'thread/ui/elements/link.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'a', keeps: true, shows: 'labelKey', carries: { navigateTo: 'ruling', labelKey: 'wording', is: 'styling' }, works: './link.works.ts', describes: 'Wording that carries somebody to a declared screen. A press that navigates and does not act.' },
     { id: 'media', at: 'thread/ui/elements/media.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: { by: 'as', image: 'img', video: 'video', audio: 'audio', file: 'a' }, carries: { as: 'words', src: 'source', altKey: 'naming' }, describes: 'Whatever a media or file value turns out to be — a picture, a clip, a document — rendered by its kind.' },
     { id: 'menu', at: 'thread/ui/elements/menu.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', keeps: true, works: './menu.works.tsx', dresses: 'opener', measures: ['x', 'y'], carries: { labelKey: 'wording', items: 'listing', side: 'words' }, places: { opener: { tag: 'button', gives: 'opener', shows: 'labelKey' }, portal: { tag: 'Presented', gives: 'portal', holds: 'layer' }, layer: { tag: 'div', gives: 'listing', holds: 'row', position: 'position-lifted', left: 'x', top: 'y' }, row: { tag: 'MenuRow', each: 'items', by: 'labelKey', gives: 'row' } }, describes: 'Actions revealed on demand from a trigger, with keyboard traversal and dismissal already handled.' },
-    { id: 'money', at: 'thread/ui/elements/money.tsx', by: 'thread elements', runs: 'thread elements --own --check', carries: { value: 'amount', is: 'styling' }, works: './money.works.ts', describes: 'An amount with its currency, formatted for the locale. Never a number and a symbol concatenated.' },
+    { id: 'money', at: 'thread/ui/elements/money.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', raises: ['invalid'], carries: { value: 'amount', is: 'styling' }, works: './money.works.ts', describes: 'An amount with its currency, formatted for the locale. Never a number and a symbol concatenated.' },
     { id: 'pagination', at: 'thread/ui/elements/pagination.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'nav', called: 'nav.pagination', works: './pagination.works.ts', carries: { map: 'mapping', sequence: 'ordering', current: 'ruling' }, places: { step: { tag: 'Link.linkInline', each: 'steps', by: 'id', gives: 'step' } }, describes: 'Movement between pages of a long result, for when scrolling to the end is not reasonable.' },
     { id: 'progress', at: 'thread/ui/elements/progress.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', reads: 'progress', carries: { value: 'count', target: 'count', labelKey: 'naming' }, measures: ['fraction', 'span'], works: './progress.works.ts', places: { bar: { width: 'span' } }, describes: 'Work advancing toward a known end. The determinate half of what a spinner shows.' },
     { id: 'radio-group', at: 'thread/ui/elements/radio-group.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', reads: 'choices', keeps: true, works: './radio-group.works.ts', carries: { name: 'ruling', labelKey: 'naming', options: 'listing', chosen: 'words', onValue: 'picking', disabled: 'flag' }, places: { option: { tag: 'label', each: 'options', by: 'value', holds: 'control caption' }, control: { tag: 'input', reads: 'choosing', gives: 'option' }, caption: { shows: 'caption' } }, describes: 'One answer from a short set, all visible at once. The version of a picker with nothing hidden.' },
@@ -119,9 +119,9 @@ export const ELEMENTS = {
     { id: 'tabs', at: 'thread/ui/elements/tabs.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'div', keeps: true, works: './tabs.works.ts', carries: { items: 'parting', initial: 'words', onChange: 'picking', orientation: 'words' }, dresses: 'strip', places: { strip: { tag: 'div', gives: 'strip', holds: 'tab', display: 'layout-flex', alignItems: 'align-centre' }, tab: { tag: 'button', each: 'items', by: 'id', gives: 'tab', shows: 'label', display: 'layout-flex', alignItems: 'align-centre', justifyContent: 'align-centre', height: 'control-md', padding: 'control-pad-y control-pad-x', borderRadius: 'control-radius', borderWidth: 'edge-hair', borderStyle: 'line-off', borderColor: 'colour-clear', background: 'colour-clear', color: 'colour-ink', cursor: 'cursor-press', transition: 'motion-quick ease-out' }, panel: { tag: 'div', when: 'opened', gives: 'panel', shows: 'inside' } }, 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.' },
     { id: 'text', at: 'thread/ui/elements/text.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', shows: 'k', sets: { display: 'layout-inline-block' }, carries: { k: 'wording', with: 'holding', is: 'styling', announce: 'announcing' }, 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.' },
     { id: 'textarea', at: 'thread/ui/elements/textarea.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'label', carries: { labelKey: 'wording', name: 'words', value: 'words', onValue: 'picking', validator: 'words', rows: 'count' }, works: './textarea.works.ts', places: { label: { shows: 'labelKey' }, control: { tag: 'textarea', reads: 'writing', shows: 'value', takes: 'name rows validator' } }, describes: 'Prose being typed across more than one line, where the shape of what is written matters.' },
-    { id: 'time', at: 'thread/ui/elements/time.tsx', by: 'thread elements', runs: 'thread elements --own --check', keeps: true, carries: { value: 'amount', relative: 'flag', is: 'styling' }, works: './time.works.ts', describes: 'A moment, formatted absolutely or as distance from now. Never a date somebody assembled from parts.' },
+    { id: 'time', at: 'thread/ui/elements/time.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', raises: ['invalid'], keeps: true, carries: { value: 'amount', relative: 'flag', is: 'styling' }, works: './time.works.ts', describes: 'A moment, formatted absolutely or as distance from now. Never a date somebody assembled from parts.' },
     { id: 'toggle', at: 'thread/ui/elements/toggle.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'label', carries: { labelKey: 'wording', on: 'flag', onToggle: 'telling' }, works: './toggle.works.ts', places: { control: { tag: 'input', reads: 'choice', shows: 'on' }, label: { shows: 'labelKey' } }, describes: 'A single yes-or-no answer, flipped in place. Reach for this rather than two mutually exclusive buttons.' },
     { id: 'tooltip', at: 'thread/ui/elements/tooltip.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', arranges: true, keeps: true, works: './tooltip.works.ts', dresses: 'bubble', measures: ['x', 'y'], carries: { labelKey: 'wording', side: 'words' }, places: { bubble: { tag: 'span', when: 'showing', gives: 'bubble', shows: 'labelKey', position: 'position-lifted', left: 'x', top: 'y' } }, describes: 'A short clarification revealed by hovering or focusing. Never the only place something is said.' },
-    { id: 'value', at: 'thread/ui/elements/value.tsx', by: 'thread elements', runs: 'thread elements --own --check', carries: { validator: 'ruling', value: 'amount', context: 'holding', is: 'styling' }, works: './value.works.ts', describes: 'A single formatted datum, punctuated by the validator that governs its kind rather than by the caller.' },
+    { id: 'value', at: 'thread/ui/elements/value.tsx', by: 'thread elements', runs: 'thread elements --own --check', tag: 'span', raises: ['invalid'], carries: { validator: 'ruling', value: 'amount', context: 'holding', is: 'styling' }, works: './value.works.ts', describes: 'A single formatted datum, punctuated by the validator that governs its kind rather than by the caller.' },
   ]),
 } as const satisfies Catalogue

package/dist/ui/fonts.d.ts

@@ -1,6 +1,6 @@
 import type { Threaded } from '@prestack/thread/core/thread';
 import { type Holds } from './token.ts';
-export declare const FACES: readonly ["body", "heading", "display", "mono"];
+export declare const FACES: readonly ['body', 'heading', 'display', 'mono'];
 export type Face = (typeof FACES)[number];
 export interface FontFamily {
     readonly name: string;

package/dist/ui/fonts.js

@@ -1,4 +1,4 @@
-import { sheeted } from "./token.js";
+import { sheeted } from './token.js';
 export const FACES = ['body', 'heading', 'display', 'mono'];
 const SANS_FALLBACK = 'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif';
 const SERIF_FALLBACK = 'ui-serif, Georgia, Cambria, Times New Roman, serif';

package/dist/ui/generators/dev.d.ts

@@ -1,2 +1 @@
-export declare function declared(at: string, entry: string, read: (where: string) => string | undefined): string | undefined;
-export declare function unrunnable(entry: string, said: string | undefined): string | undefined;
+export declare function unrunnable(program: string): string;

package/dist/ui/generators/dev.js

@@ -1,62 +1,58 @@
-import { spawnSync } from 'node:child_process';
-import { writeSync } from 'node:fs';
-import { basename, join } from 'node:path';
-import { argv } from 'node:process';
-import { generators, settling } from "@prestack/thread/core/chain";
-import { existsSync, readFileSync } from "@prestack/thread/core/files";
-import { exit, invoked } from "@prestack/thread/core/invoked";
-import { named } from "@prestack/thread/core/scope";
-import { findTree } from "@prestack/thread/core/tree";
-const MANIFEST = 'package.json';
+import { releases, starts } from '@prestack/thread/integrations/cli';
+import { basename } from 'node:path';
+import { argv, execPath, stdout } from 'node:process';
+import { generators, settling } from '@prestack/thread/core/chain';
+import { existsSync } from '@prestack/thread/integrations/disk';
+import { CLI, exit, invoked } from '@prestack/thread/core/invoked';
+import { named } from '@prestack/thread/core/scope';
+import { findTree } from '@prestack/thread/core/tree';
+import { programOf } from '@prestack/thread/integrations/target';
+const SERVER = 'next';
 const SHIP = '--ship';
 const ENTRY = 'dev';
 const SHIPPED = 'build';
+const GATE = 'gate';
 const say = (line) => {
-    writeSync(1, line);
+    stdout.write(line);
 };
-export function declared(at, entry, read) {
-    const source = read(join(at, MANIFEST));
-    if (source === undefined)
-        return undefined;
-    return JSON.parse(source).scripts?.[entry];
-}
-export function unrunnable(entry, said) {
-    if (said !== undefined)
-        return undefined;
-    return (`this app's ${MANIFEST} declares no \`${entry}\` script, so there is nothing here to run. ` +
-        `\`thread attach ${named('integrity')}\` is what writes it, along with the \`thread gate\` hook that ` +
-        'stands in front of it — run the attach and try again.');
+export function unrunnable(program) {
+    return (program + ' is not installed here, so there is nothing to serve this app with. ' +
+        named('ui') + ' brings it: run thread attach ' + named('ui') + ' and try again.');
 }
 async function run() {
     const tree = findTree();
     const shipping = argv.includes(SHIP);
     const entry = shipping ? SHIPPED : ENTRY;
-    const read = (where) => (existsSync(where) ? readFileSync(where, 'utf8') : undefined);
-    const refused = unrunnable(entry, declared(tree.at, entry, read));
-    if (refused !== undefined) {
-        say(`thread: ${refused}\n`);
+    const program = programOf(SERVER, tree.at, existsSync);
+    if (program === undefined) {
+        say('thread: ' + unrunnable(SERVER) + '\n');
         return 1;
     }
     const settled = settling(tree.at, await generators(tree));
     for (const said of settled.ran)
         if (said.trim() !== '')
-            say(`${said}\n`);
+            say(said + '\n');
     if (settled.unsettled.length > 0) {
-        say(`thread: ${settled.unsettled.join(', ')} would not settle after ${String(settled.rounds)} rounds, ` +
+        say('thread: ' + settled.unsettled.join(', ') + ' would not settle after ' + String(settled.rounds) + ' rounds, ' +
             'so what this tree declares and what is written from it still disagree. Nothing is served over that.\n');
         return 1;
     }
-    say(`thread: ${basename(tree.at)} settled in ${String(settled.rounds)} round(s); running \`${entry}\`\n`);
+    say('thread: ' + basename(tree.at) + ' settled in ' + String(settled.rounds) + ' round(s); running the gate\n');
+    const gated = starts(execPath, [...CLI, GATE], { at: tree.at, shows: true });
+    if (!gated.ok) {
+        say('thread: the gate refused this tree, and nothing is served over a red gate. What it refused is printed above.\n');
+        return gated.code === 0 ? 1 : gated.code;
+    }
+    say('thread: the gate passed; running ' + SERVER + ' ' + entry + '\n');
     const extra = argv.slice(2).filter((one) => one !== SHIP);
-    const held = spawnSync('npm', ['run', entry, ...(extra.length === 0 ? [] : ['--', ...extra])], {
-        cwd: tree.at,
-        stdio: 'inherit',
-    });
-    if (held.error !== undefined) {
-        say(`thread: could not start \`npm run ${entry}\` — ${held.error.message}\n`);
+    if (!shipping)
+        releases();
+    const held = starts(program, [entry, ...extra], { at: tree.at, shows: true });
+    if (!held.there) {
+        say('thread: could not start ' + SERVER + ' ' + entry + ': ' + held.why + '\n');
         return 1;
     }
-    return held.status ?? 1;
+    return held.code;
 }
 if (invoked(import.meta.url))
     exit(await run());

package/dist/ui/generators/dev.ts

@@ -1,15 +1,15 @@
-import { spawnSync } from 'node:child_process'
-import { writeSync } from 'node:fs'
-import { basename, join } from 'node:path'
-import { argv } from 'node:process'
+import { releases, starts } from '@prestack/thread/integrations/cli'
+import { basename } from 'node:path'
+import { argv, execPath, stdout } from 'node:process'
 
 import { generators, settling } from '@prestack/thread/core/chain'
-import { existsSync, readFileSync } from '@prestack/thread/core/files'
-import { exit, invoked } from '@prestack/thread/core/invoked'
+import { existsSync } from '@prestack/thread/integrations/disk'
+import { CLI, exit, invoked } from '@prestack/thread/core/invoked'
 import { named } from '@prestack/thread/core/scope'
 import { findTree } from '@prestack/thread/core/tree'
+import { programOf } from '@prestack/thread/integrations/target'
 
-const MANIFEST = 'package.json'
+const SERVER = 'next'
 
 const SHIP = '--ship'
 
@@ -17,26 +17,16 @@ const ENTRY = 'dev'
 
 const SHIPPED = 'build'
 
-const say = (line: string): void => {
-  writeSync(1, line)
-}
-
-interface Manifest {
-  readonly scripts?: Record<string, string>
-}
+const GATE = 'gate'
 
-export function declared(at: string, entry: string, read: (where: string) => string | undefined): string | undefined {
-  const source = read(join(at, MANIFEST))
-  if (source === undefined) return undefined
-  return (JSON.parse(source) as Manifest).scripts?.[entry]
+const say = (line: string): void => {
+  stdout.write(line)
 }
 
-export function unrunnable(entry: string, said: string | undefined): string | undefined {
-  if (said !== undefined) return undefined
+export function unrunnable(program: string): string {
   return (
-    `this app's ${MANIFEST} declares no \`${entry}\` script, so there is nothing here to run. ` +
-    `\`thread attach ${named('integrity')}\` is what writes it, along with the \`thread gate\` hook that ` +
-    'stands in front of it — run the attach and try again.'
+    program + ' is not installed here, so there is nothing to serve this app with. ' +
+    named('ui') + ' brings it: run thread attach ' + named('ui') + ' and try again.'
   )
 }
 
@@ -44,37 +34,40 @@ async function run(): Promise<number> {
   const tree = findTree()
   const shipping = argv.includes(SHIP)
   const entry = shipping ? SHIPPED : ENTRY
-  const read = (where: string): string | undefined => (existsSync(where) ? readFileSync(where, 'utf8') : undefined)
 
-  const refused = unrunnable(entry, declared(tree.at, entry, read))
-  if (refused !== undefined) {
-    say(`thread: ${refused}\n`)
+  const program = programOf(SERVER, tree.at, existsSync)
+  if (program === undefined) {
+    say('thread: ' + unrunnable(SERVER) + '\n')
     return 1
   }
 
   const settled = settling(tree.at, await generators(tree))
-  for (const said of settled.ran) if (said.trim() !== '') say(`${said}\n`)
+  for (const said of settled.ran) if (said.trim() !== '') say(said + '\n')
 
   if (settled.unsettled.length > 0) {
     say(
-      `thread: ${settled.unsettled.join(', ')} would not settle after ${String(settled.rounds)} rounds, ` +
+      'thread: ' + settled.unsettled.join(', ') + ' would not settle after ' + String(settled.rounds) + ' rounds, ' +
         'so what this tree declares and what is written from it still disagree. Nothing is served over that.\n',
     )
     return 1
   }
 
-  say(`thread: ${basename(tree.at)} settled in ${String(settled.rounds)} round(s); running \`${entry}\`\n`)
+  say('thread: ' + basename(tree.at) + ' settled in ' + String(settled.rounds) + ' round(s); running the gate\n')
+  const gated = starts(execPath, [...CLI, GATE], { at: tree.at, shows: true })
+  if (!gated.ok) {
+    say('thread: the gate refused this tree, and nothing is served over a red gate. What it refused is printed above.\n')
+    return gated.code === 0 ? 1 : gated.code
+  }
 
+  say('thread: the gate passed; running ' + SERVER + ' ' + entry + '\n')
   const extra = argv.slice(2).filter((one) => one !== SHIP)
-  const held = spawnSync('npm', ['run', entry, ...(extra.length === 0 ? [] : ['--', ...extra])], {
-    cwd: tree.at,
-    stdio: 'inherit',
-  })
-  if (held.error !== undefined) {
-    say(`thread: could not start \`npm run ${entry}\` — ${held.error.message}\n`)
+  if (!shipping) releases()
+  const held = starts(program, [entry, ...extra], { at: tree.at, shows: true })
+  if (!held.there) {
+    say('thread: could not start ' + SERVER + ' ' + entry + ': ' + held.why + '\n')
     return 1
   }
-  return held.status ?? 1
+  return held.code
 }
 
 if (invoked(import.meta.url)) exit(await run())

package/dist/ui/generators/elements.d.ts

@@ -14,6 +14,7 @@ export declare function translated(name: string, tag: string | Readonly<Record<s
     readonly parts: string;
     readonly consent: string;
     readonly drag: string;
+    readonly checked: string;
 }, carries?: Readonly<Record<string, string>>, always?: readonly string[], places?: Readonly<Record<string, Readonly<Record<string, string>>>>, works?: string, measures?: readonly string[], reads?: string, gives?: readonly string[], keeps?: boolean, animates?: boolean, says?: string, called?: string, wires?: string, dresses?: string): string;
 export declare const CARRIES: readonly string[];
 export declare const READINGS: readonly string[];

package/dist/ui/generators/elements.js

@@ -6,13 +6,13 @@ var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExte
     }
     return path;
 };
-import { existsSync, readFileSync, writeFileSync } from "@prestack/thread/core/files";
+import { existsSync, readFileSync, writeFileSync } from '@prestack/thread/integrations/disk';
 import { join, resolve } from 'node:path';
 import { argv, stdout } from 'node:process';
 import { fileURLToPath, pathToFileURL } from 'node:url';
-import { exit, invoked } from "@prestack/thread/core/invoked";
-import { findTree, inTree } from "@prestack/thread/core/tree";
-import { camel, classOf, classOfElement, looking } from "../variant.js";
+import { exit, invoked } from '@prestack/thread/core/invoked';
+import { findTree, inTree } from '@prestack/thread/core/tree';
+import { camel, classOf, classOfElement, looking } from '../variant.js';
 const idOf = (name) => name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 export function pascal(id) {
     return id
@@ -43,7 +43,7 @@ export function translated(name, tag, arranges, raises, from, carries = {}, alwa
         throw new Error(`\`${name}\` is written before the variant rows that wear it were read, so it would ship wearing none of them`);
     }
     const invoking = [
-        ...(carries['dispatch'] === undefined ? ['  readonly dispatch?: string'] : []),
+        ...(carries['dispatch'] === undefined ? ['  readonly dispatch?: keyof Dispatching'] : []),
         ...(carries['input'] === undefined ? ['  readonly input?: Readonly<Record<string, unknown>>'] : []),
         "  readonly invokeOn?: 'press' | 'shown'",
     ];
@@ -320,6 +320,7 @@ ${[
             : []),
     ].join('\n')}
 
+import type { Dispatching } from '${from.checked}'
 import { type Element, element, useSurface } from '${from.wrappers}'
 ${Object.values(places).some((made) => (made?.['takes'] ?? '').split(/\s+/).includes('validator')) ? `import { limited } from '${from.validators}'\n` : ''}${repeats ? `import { Each } from '../elements/each.tsx'\n` : ''}${works === undefined || wanted.length === 0 ? '' : `import { ${wanted.join(', ')} } from '${works}'\n`}
 
@@ -427,7 +428,7 @@ const READS = {
 };
 export const CARRIES = Object.keys(KINDS);
 export const READINGS = Object.keys(READS);
-const BESIDE = { wrappers: '../wrappers.tsx', content: '../content.tsx', rows: '../charts.tsx', validators: '../validators.ts', fonts: '../fonts.ts', map: '../islands/map.ts', parts: '../disclosure.tsx', consent: '../consent.ts', drag: '../drag.ts' };
+const BESIDE = { wrappers: '../wrappers.tsx', content: '../content.tsx', rows: '../charts.tsx', validators: '../validators.ts', fonts: '../fonts.ts', map: '../islands/map.ts', parts: '../disclosure.tsx', consent: '../consent.ts', drag: '../drag.ts', checked: '../checked.ts' };
 export const declared = new Set();
 export const wears = new Map();
 const SHEET = `elements.${'ts'}`;
@@ -473,10 +474,11 @@ async function run() {
     }
     const root = findTree().at;
     const from = BESIDE;
-    for (const one of sheet.ELEMENT.declares ?? [])
+    const listed = sheet.ELEMENT.derives ?? sheet.ELEMENT.declares ?? [];
+    for (const one of listed)
         declared.add(one.id);
     const dressed = await variants(own);
-    for (const one of sheet.ELEMENT.declares ?? []) {
+    for (const one of listed) {
         const held = {};
         for (const row of dressed) {
             if (!row.wears.includes(pascal(one.id)))
@@ -485,7 +487,7 @@ async function run() {
         }
         wears.set(one.id, held);
     }
-    const rows = (sheet.ELEMENT.declares ?? []).filter((row) => derived(row, own));
+    const rows = listed.filter((row) => derived(row, own));
     const checking = argv.includes('--check');
     for (const row of rows) {
         if (row.at === undefined) {