@prestack/thread-ui 0.1.1 → 0.1.3

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

@@ -1,12 +1,13 @@
 import type { MessageKey } from '../content.tsx';
 import { type FontRoleId } from '../fonts.ts';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface TextProps {
     readonly k: MessageKey;
     readonly with?: Readonly<Record<string, unknown>>;
     readonly is?: FontRoleId;
     readonly announce?: 'alert' | 'status';
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/text.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { roleClass } from "../fonts.js";
-import { element, useSurface } from "../wrappers.js";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
 export const Text = element('Text', (props, className) => {
     const surface = useSurface({ className: roleClass(props.is, className),
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });

package/dist/ui/elements/text.tsx

@@ -3,6 +3,7 @@
 import type { MessageKey } from '../content.tsx'
 import { roleClass, type FontRoleId } from '../fonts.ts'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 
 
@@ -11,7 +12,7 @@ export interface TextProps {
   readonly with?: Readonly<Record<string, unknown>>
   readonly is?: FontRoleId
   readonly announce?: 'alert' | 'status'
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

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

@@ -1,4 +1,5 @@
 import type { MessageKey } from '../content.tsx';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface TextareaProps {
     readonly labelKey: MessageKey;
@@ -7,7 +8,7 @@ export interface TextareaProps {
     readonly onValue?: (said: string) => void;
     readonly validator?: string;
     readonly rows?: number;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/textarea.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { roleClass } from "../fonts.js";
-import { element, useSurface } from "../wrappers.js";
-import { limited } from "../validators.js";
-import { does } from "./textarea.works.js";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { limited } from '../validators.js';
+import { does } from './textarea.works.js';
 export const Textarea = element('Textarea', (props, className) => {
     const surface = useSurface({ className: roleClass(undefined, className),
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });

package/dist/ui/elements/textarea.tsx

@@ -3,6 +3,7 @@
 import type { MessageKey } from '../content.tsx'
 import { roleClass } from '../fonts.ts'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 import { limited } from '../validators.ts'
 import { does } from './textarea.works.ts'
@@ -15,7 +16,7 @@ export interface TextareaProps {
   readonly onValue?: (said: string) => void
   readonly validator?: string
   readonly rows?: number
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

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

@@ -1,10 +1,12 @@
 import { type FontRoleId } from '../fonts.ts';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface TimeProps {
     readonly value?: unknown;
     readonly relative?: boolean;
     readonly is?: FontRoleId;
-    readonly dispatch?: string;
+    readonly invalid?: boolean;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/time.js

@@ -1,14 +1,17 @@
 'use client';
-import { roleClass } from "../fonts.js";
-import { element, useSurface } from "../wrappers.js";
-import { shows, uses } from "./time.works.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { shows, uses } from './time.works.js';
 export const Time = element('Time', (props, className) => {
     const kept = uses(props);
     const surface = useSurface({ className: roleClass(props.is, className),
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
         holds: [
+            ...(props.invalid === true ? ['invalid'] : []),
             ...(kept.holds ?? []),
         ],
+        raises: ['invalid'],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
-    return (shows(props, surface, kept));
+    return (_jsx("span", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), children: shows(props, surface, kept) }));
 }, 'e-time', {});

package/dist/ui/elements/time.tsx

@@ -1,7 +1,9 @@
 'use client'
 
+import type { MessageKey } from '../content.tsx'
 import { roleClass, type FontRoleId } from '../fonts.ts'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 import { shows, uses } from './time.works.ts'
 
@@ -10,7 +12,8 @@ export interface TimeProps {
   readonly value?: unknown
   readonly relative?: boolean
   readonly is?: FontRoleId
-  readonly dispatch?: string
+  readonly invalid?: boolean
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }
@@ -22,11 +25,15 @@ export const Time: Element<'Time', TimeProps> = element(
     const surface = useSurface({ className: roleClass(props.is, className),
     invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
     holds: [
+      ...(props.invalid === true ? ['invalid' as const] : []),
       ...(kept.holds ?? []),
     ],
+    raises: ['invalid' as const],
     ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
     return (
-      shows(props, surface, kept)
+      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})}>
+        {shows(props, surface, kept)}
+      </span>
     )
   },
   'e-time',

package/dist/ui/elements/time.works.d.ts

@@ -4,6 +4,7 @@ import type { TimeProps } from './time.tsx';
 export declare function uses(props: TimeProps): {
     readonly holds?: readonly string[];
     readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
     readonly at: number | undefined;
 };
 export declare function shows(props: TimeProps, surface: Surface, kept: {

package/dist/ui/elements/time.works.js

@@ -1,12 +1,16 @@
 import { useCallback, useSyncExternalStore } from 'react';
-import { renderValue } from "../content.js";
-import { useUi } from "../wrappers.js";
+import { renderValue } from '../content.js';
+import { runValidator } from '../validators.js';
+import { useUi } from '../wrappers.js';
 const NO_CLOCK_YET = () => undefined;
 export function uses(props) {
     const { now, ticker } = useUi();
     const subscribe = useCallback((onChange) => (props.relative === true && ticker !== undefined ? ticker.subscribe(onChange) : () => undefined), [props.relative, ticker]);
     const read = useCallback(() => now?.(), [now]);
-    return { at: useSyncExternalStore(subscribe, read, NO_CLOCK_YET) };
+    const at = useSyncExternalStore(subscribe, read, NO_CLOCK_YET);
+    const { relative, value } = props;
+    const { ok } = runValidator(relative === true ? 'relativeTime' : 'datetime', value, relative === true ? { now: at } : {});
+    return ok ? { at } : { at, holds: ['invalid'] };
 }
 export function shows(props, surface, kept) {
     if (props.relative !== true || kept.at === undefined) {

package/dist/ui/elements/time.works.ts

@@ -1,20 +1,24 @@
 import { useCallback, useSyncExternalStore, type ReactNode } from 'react'
 
 import { renderValue } from '../content.tsx'
+import { runValidator } from '../validators.ts'
 import type { Surface } from '../door.ts'
 import { useUi } from '../wrappers.tsx'
 import type { TimeProps } from './time.tsx'
 
 const NO_CLOCK_YET = (): number | undefined => undefined
 
-export function uses(props: TimeProps): { readonly holds?: readonly string[]; readonly animates?: boolean; readonly at: number | undefined } {
+export function uses(props: TimeProps): { readonly holds?: readonly string[]; readonly animates?: boolean; readonly on?: Readonly<Record<string, unknown>>; readonly at: number | undefined } {
   const { now, ticker } = useUi()
   const subscribe = useCallback(
     (onChange: () => void) => (props.relative === true && ticker !== undefined ? ticker.subscribe(onChange) : () => undefined),
     [props.relative, ticker],
   )
   const read = useCallback(() => now?.(), [now])
-  return { at: useSyncExternalStore(subscribe, read, NO_CLOCK_YET) }
+  const at = useSyncExternalStore(subscribe, read, NO_CLOCK_YET)
+  const { relative, value } = props
+  const { ok } = runValidator(relative === true ? 'relativeTime' : 'datetime', value, relative === true ? { now: at } : {})
+  return ok ? { at } : { at, holds: ['invalid'] }
 }
 
 export function shows(props: TimeProps, surface: Surface, kept: { readonly at: number | undefined }): ReactNode {

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

@@ -1,10 +1,11 @@
 import type { MessageKey } from '../content.tsx';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface ToggleProps {
     readonly labelKey: MessageKey;
     readonly on?: boolean;
     readonly onToggle?: (said: boolean) => void;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/toggle.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { roleClass } from "../fonts.js";
-import { element, useSurface } from "../wrappers.js";
-import { does } from "./toggle.works.js";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { does } from './toggle.works.js';
 export const Toggle = element('Toggle', (props, className) => {
     const surface = useSurface({ className: roleClass(undefined, className),
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });

package/dist/ui/elements/toggle.tsx

@@ -3,6 +3,7 @@
 import type { MessageKey } from '../content.tsx'
 import { roleClass } from '../fonts.ts'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 import { does } from './toggle.works.ts'
 
@@ -11,7 +12,7 @@ export interface ToggleProps {
   readonly labelKey: MessageKey
   readonly on?: boolean
   readonly onToggle?: (said: boolean) => void
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

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

@@ -1,11 +1,12 @@
 import type { ReactNode } from 'react';
 import type { MessageKey } from '../content.tsx';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface TooltipProps {
     readonly children: ReactNode;
     readonly labelKey: MessageKey;
     readonly side?: string;
-    readonly dispatch?: string;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/tooltip.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { element, useSurface } from "../wrappers.js";
-import { measured, bubble, showing, uses } from "./tooltip.works.js";
+import { element, useSurface } from '../wrappers.js';
+import { measured, bubble, showing, uses } from './tooltip.works.js';
 export const Tooltip = element('Tooltip', (props, className) => {
     const kept = uses(props);
     const surface = useSurface({ className,

package/dist/ui/elements/tooltip.tsx

@@ -3,6 +3,7 @@
 import type { ReactNode } from 'react'
 import type { MessageKey } from '../content.tsx'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 import { measured, bubble, showing, uses } from './tooltip.works.ts'
 
@@ -11,7 +12,7 @@ export interface TooltipProps {
   readonly children: ReactNode
   readonly labelKey: MessageKey
   readonly side?: string
-  readonly dispatch?: string
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }

package/dist/ui/elements/tooltip.works.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import { useDismissLayer } from "../dismiss-layer.js";
-import { positionOf } from "../positioning.js";
+import { useDismissLayer } from '../dismiss-layer.js';
+import { positionOf } from '../positioning.js';
 export function uses(props) {
     const trigger = useRef(null);
     const layer = useRef(null);

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

@@ -1,11 +1,13 @@
 import { type FontRoleId } from '../fonts.ts';
+import type { Dispatching } from '../checked.ts';
 import { type Element } from '../wrappers.tsx';
 export interface ValueProps {
     readonly validator: string;
     readonly value?: unknown;
     readonly context?: Readonly<Record<string, unknown>>;
     readonly is?: FontRoleId;
-    readonly dispatch?: string;
+    readonly invalid?: boolean;
+    readonly dispatch?: keyof Dispatching;
     readonly input?: Readonly<Record<string, unknown>>;
     readonly invokeOn?: 'press' | 'shown';
 }

package/dist/ui/elements/value.js

@@ -1,9 +1,14 @@
 'use client';
-import { roleClass } from "../fonts.js";
-import { element, useSurface } from "../wrappers.js";
-import { shows } from "./value.works.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from '../fonts.js';
+import { element, useSurface } from '../wrappers.js';
+import { shows } from './value.works.js';
 export const Value = element('Value', (props, className) => {
     const surface = useSurface({ className: roleClass(props.is, className),
-        invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });
-    return (shows(props, surface));
+        invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+        holds: [
+            ...(props.invalid === true ? ['invalid'] : []),
+        ],
+        raises: ['invalid'], });
+    return (_jsx("span", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, children: shows(props, surface) }));
 }, 'e-value', {});

package/dist/ui/elements/value.tsx

@@ -1,7 +1,9 @@
 'use client'
 
+import type { MessageKey } from '../content.tsx'
 import { roleClass, type FontRoleId } from '../fonts.ts'
 
+import type { Dispatching } from '../checked.ts'
 import { type Element, element, useSurface } from '../wrappers.tsx'
 import { shows } from './value.works.ts'
 
@@ -11,7 +13,8 @@ export interface ValueProps {
   readonly value?: unknown
   readonly context?: Readonly<Record<string, unknown>>
   readonly is?: FontRoleId
-  readonly dispatch?: string
+  readonly invalid?: boolean
+  readonly dispatch?: keyof Dispatching
   readonly input?: Readonly<Record<string, unknown>>
   readonly invokeOn?: 'press' | 'shown'
 }
@@ -20,9 +23,15 @@ export const Value: Element<'Value', ValueProps> = element(
   'Value',
   (props: ValueProps, className) => {
     const surface = useSurface({ className: roleClass(props.is, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
+    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+    holds: [
+      ...(props.invalid === true ? ['invalid' as const] : []),
+    ],
+    raises: ['invalid' as const], })
     return (
-      shows(props, surface)
+      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
+        {shows(props, surface)}
+      </span>
     )
   },
   'e-value',

package/dist/ui/elements/value.works.js

@@ -1,4 +1,4 @@
-import { renderValue } from "../content.js";
+import { renderValue } from '../content.js';
 export function shows(props, surface) {
     return renderValue({ validator: props.validator, value: props.value, ...(props.context === undefined ? {} : { context: props.context }) }, surface);
 }

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