@prestack/thread-ui 0.0.1

package/dist/ui/elements/bars.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { measured as marking } from "../charts.js";
+import { element, useSurface } from "../wrappers.js";
+import { Each } from "./each.js";
+import { shown, sized, uses } from "./bars.works.js";
+export const Bars = element('Bars', (props, className) => {
+    const kept = uses(props);
+    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 }) },
+        holds: [
+            ...(kept.holds ?? []),
+        ],
+        ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
+    return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), role: "img", ...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) }), children: _jsx(Each, { rows: props.rows, by: props.by, children: (each0, at) => (_jsxs("span", { style: marking(sized(props, kept, each0, at)), children: [_jsx("span", { children: shown(props, each0, surface, kept).label }), _jsx("span", { children: shown(props, each0, surface, kept).amount })] })) }) }));
+}, 'e-bars');

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

@@ -0,0 +1,12 @@
+import { type Row } from '../charts.tsx';
+import type { BarsProps } from './bars.tsx';
+export declare function uses(props: BarsProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
+    readonly ramp: readonly string[];
+};
+export declare function sized(props: BarsProps, kept: {
+    readonly ramp: readonly string[];
+}, row: Row, at: number): Readonly<Record<string, string | number>>;
+export declare function shown(props: BarsProps, row: Row, _surface: unknown, _kept?: unknown): Readonly<Record<string, string>>;

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

@@ -0,0 +1,20 @@
+import { formatValue } from "../validators.js";
+import { seriesColour } from "../series.js";
+import { num, str, useRamp } from "../charts.js";
+export function uses(props) {
+    const ramp = useRamp(props.rows.length);
+    return { ...(props.rows.length === 0 ? { holds: ['empty'] } : {}), ramp };
+}
+export function sized(props, kept, row, at) {
+    const most = Math.max(...props.rows.map((one) => num(one, props.value)), 0) || 1;
+    return {
+        series: seriesColour(kept.ramp, at),
+        fraction: `${((num(row, props.value) / most) * 100).toFixed(1)}%`,
+    };
+}
+export function shown(props, row, _surface, _kept) {
+    return {
+        label: str(row, props.by),
+        amount: String(formatValue(props.format ?? 'number', num(row, props.value))),
+    };
+}

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { MessageKey } from '../content.tsx';
+import { type Element } from '../wrappers.tsx';
+export interface BoxProps {
+    readonly children: ReactNode;
+    readonly labelKey?: MessageKey;
+    readonly scrolling?: boolean;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Box: Element<'Box', BoxProps>;

package/dist/ui/elements/box.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { element, useSurface } from "../wrappers.js";
+export const Box = element('Box', (props, className) => {
+    const surface = useSurface({ className,
+        invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+        holds: [
+            ...(props.scrolling === true ? ['scrolling'] : []),
+        ], });
+    return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(props.labelKey === undefined ? {} : { role: 'group' }), ...(props.labelKey === undefined ? {} : { 'aria-label': surface.text(props.labelKey) }), children: props.children }));
+}, 'e-box');

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

@@ -0,0 +1,10 @@
+import type { MapIsland } from '../islands/map.ts';
+import { type Element } from '../wrappers.tsx';
+export interface BreadcrumbProps {
+    readonly map: MapIsland;
+    readonly current: string;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Breadcrumb: Element<'Breadcrumb', BreadcrumbProps>;

package/dist/ui/elements/breadcrumb.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { Link } from "./link.js";
+import { element, useSurface } from "../wrappers.js";
+import { Each } from "./each.js";
+import { crumb, steps } from "./breadcrumb.works.js";
+export const Breadcrumb = element('Breadcrumb', (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 }) }, });
+    return (_jsx("nav", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, "aria-label": surface.text('nav.breadcrumb'), children: _jsx(Each, { rows: steps(props), by: 'id', children: (each0, at) => (_jsx(Link.linkInline, { ...crumb(props, each0, at) })) }) }));
+}, 'e-breadcrumb');

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

@@ -0,0 +1,7 @@
+import type { Row } from '../charts.tsx';
+import type { BreadcrumbProps } from './breadcrumb.tsx';
+import type { LinkProps } from './link.tsx';
+export declare function steps(props: BreadcrumbProps): readonly Row[];
+export declare function crumb(_props: BreadcrumbProps, row: Row, _at: number): LinkProps & {
+    readonly 'aria-current'?: 'page';
+};

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

@@ -0,0 +1,21 @@
+import { trailTo } from "../navigation.js";
+export function steps(props) {
+    const known = new Map(props.map.screens.map((one) => [one.id, one]));
+    if (!known.has(props.current))
+        return [];
+    const trail = trailTo(props.map, props.current);
+    return trail.flatMap((id, at) => {
+        const screen = known.get(id);
+        if (screen === undefined)
+            return [];
+        return [{ id, nameKey: screen.nameKey, here: at === trail.length - 1 }];
+    });
+}
+export function crumb(_props, row, _at) {
+    return {
+        navigateTo: String(row['id']),
+        labelKey: String(row['nameKey']),
+        is: 'label',
+        ...(row['here'] === true ? { 'aria-current': 'page' } : {}),
+    };
+}

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

@@ -0,0 +1,17 @@
+import type { MessageKey } from '../content.tsx';
+import { type Element } from '../wrappers.tsx';
+export interface ButtonProps {
+    readonly label: MessageKey;
+    readonly with?: Readonly<Record<string, unknown>>;
+    readonly icon?: string;
+    readonly shows?: string;
+    readonly type?: string;
+    readonly disabled?: boolean;
+    readonly loading?: boolean;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly navigateTo?: string;
+    readonly onPress?: () => void;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Button: Element<'Button', ButtonProps>;

package/dist/ui/elements/button.js

@@ -0,0 +1,16 @@
+'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 { shown, iconed, worded, uses, wires } from "./button.works.js";
+export const Button = element('Button', (props, className) => {
+    const kept = uses(props);
+    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 }) },
+        holds: [
+            ...(kept.holds ?? []),
+        ],
+        ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
+    const wired = wires(props, kept, surface);
+    return (_jsxs("button", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), ...(wired.on ?? {}), children: [!iconed(props, kept) ? null : _jsx("span", { className: "e-button-symbol", children: shown(props, surface, kept, wired).symbol }), !worded(props, kept) ? null : _jsx("span", { children: shown(props, surface, kept, wired).wording })] }));
+}, 'e-button');

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

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { Surface } from '../door.ts';
+import type { ButtonProps } from './button.tsx';
+export declare function uses(props: ButtonProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
+    readonly press: (() => void) | undefined;
+};
+export declare function wires(props: ButtonProps, kept: {
+    readonly press: (() => void) | undefined;
+}, surface: Surface): {
+    readonly on: Readonly<Record<string, unknown>>;
+};
+export declare function iconed(props: ButtonProps, _kept?: unknown): boolean;
+export declare function worded(props: ButtonProps, _kept?: unknown): boolean;
+export declare function shown(props: ButtonProps, surface: Surface, _kept: unknown, _wired?: unknown): Readonly<Record<string, ReactNode>>;

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

@@ -0,0 +1,34 @@
+import { pressOf, usePress } from "../wrappers.js";
+import { drawn } from "./glyph.works.js";
+export function uses(props) {
+    return {
+        holds: [
+            ...(props.disabled === true ? ['disabled'] : []),
+            ...(props.loading === true ? ['loading'] : []),
+        ],
+        press: usePress(pressOf(props), { element: 'Button', name: props.label }),
+    };
+}
+export function wires(props, kept, surface) {
+    const inert = surface.marked('disabled') || surface.marked('loading');
+    return {
+        on: {
+            type: props.type ?? 'button',
+            disabled: inert,
+            ...(props.shows === 'icon' ? { 'aria-label': surface.text(props.label, props.with) } : {}),
+            onClick: inert ? undefined : kept.press,
+        },
+    };
+}
+export function iconed(props, _kept) {
+    return props.icon !== undefined;
+}
+export function worded(props, _kept) {
+    return props.shows !== 'icon';
+}
+export function shown(props, surface, _kept, _wired) {
+    return {
+        symbol: props.icon === undefined ? null : drawn(props.icon, { 'aria-hidden': true }),
+        wording: props.shows === 'icon' ? null : surface.text(props.label, props.with),
+    };
+}

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import { type Element } from '../wrappers.tsx';
+export interface ColumnProps {
+    readonly children: ReactNode;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Column: Element<'Column', ColumnProps>;

package/dist/ui/elements/column.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { element, useSurface } from "../wrappers.js";
+export const Column = element('Column', (props, className) => {
+    const surface = useSurface({ className,
+        invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });
+    return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, children: props.children }));
+}, 'e-column');

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

@@ -0,0 +1,13 @@
+import type { MessageKey } from '../content.tsx';
+import type { ConsentDecision } from '../consent.ts';
+import { type Element } from '../wrappers.tsx';
+export interface ConsentProps {
+    readonly decision?: ConsentDecision;
+    readonly onDecide: (said: ConsentDecision) => void;
+    readonly policyKey?: MessageKey;
+    readonly preselected: readonly string[];
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Consent: Element<'Consent', ConsentProps>;

package/dist/ui/elements/consent.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { Box } from "./box.js";
+import { Column } from "./column.js";
+import { Text } from "./text.js";
+import { Toggle } from "./toggle.js";
+import { Button } from "./button.js";
+import { element, useSurface } from "../wrappers.js";
+import { Each } from "./each.js";
+import { title, policy, hasPolicy, categories, label, describe, chooser, optional, fixed, required, withdraw, withdrawable, decline, accept, acceptAll, uses } from "./consent.works.js";
+export const Consent = element('Consent', (props, className) => {
+    const kept = uses(props);
+    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 }) },
+        holds: [
+            ...(kept.holds ?? []),
+        ],
+        ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
+    return (_jsx(_Fragment, { children: _jsx(Box.card, { children: _jsxs(Column, { children: [_jsx(Text, { ...title(props, kept) }), !hasPolicy(props, kept) ? null : _jsx(Text, { ...policy(props, kept) }), _jsx(Column, { children: _jsx(Each, { rows: categories(props, kept), by: 'id', children: (each0, at) => (_jsxs(Box, { children: [_jsxs(Column, { children: [_jsx(Text, { ...label(props, kept, each0, at) }), _jsx(Text, { ...describe(props, kept, each0, at) })] }), !optional(props, kept, each0) ? null : _jsx(Toggle.input, { ...chooser(props, kept, each0, at) }), !required(props, kept, each0) ? null : _jsx(Text, { ...fixed(props, kept, each0, at) })] })) }) }), _jsxs(Box, { children: [!withdrawable(props, kept) ? null : _jsx(Button.buttonQuiet, { ...withdraw(props, kept) }), _jsx(Button.buttonBorder, { ...decline(props, kept) }), _jsx(Button.buttonBorder, { ...accept(props, kept) }), _jsx(Button.buttonFill, { ...acceptAll(props, kept) })] })] }) }) }));
+}, 'e-consent');

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

@@ -0,0 +1,41 @@
+import { type ConsentCategory, type ConsentDecision } from '../consent.ts';
+import type { Row } from '../charts.tsx';
+import type { ButtonProps } from './button.tsx';
+import type { ConsentProps } from './consent.tsx';
+import type { TextProps } from './text.tsx';
+import type { ToggleProps } from './toggle.tsx';
+type Kept = {
+    readonly categories: readonly ConsentCategory[];
+    readonly selected: readonly string[];
+    readonly accepted: boolean;
+    readonly offered: readonly string[];
+    readonly toggle: (id: string, on: boolean) => void;
+    readonly decide: (decision: ConsentDecision['decision'], accepted: readonly string[]) => void;
+};
+export declare function uses(props: ConsentProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
+    readonly categories: readonly ConsentCategory[];
+    readonly selected: readonly string[];
+    readonly accepted: boolean;
+    readonly offered: readonly string[];
+    readonly toggle: (id: string, on: boolean) => void;
+    readonly decide: (decision: ConsentDecision['decision'], accepted: readonly string[]) => void;
+};
+export declare function categories(_props: ConsentProps, kept: Kept): readonly Row[];
+export declare function hasPolicy(props: ConsentProps, _kept: Kept): boolean;
+export declare function withdrawable(_props: ConsentProps, kept: Kept): boolean;
+export declare function optional(_props: ConsentProps, _kept: Kept, row: Row): boolean;
+export declare function required(_props: ConsentProps, _kept: Kept, row: Row): boolean;
+export declare function title(_props: ConsentProps, _kept: Kept, _at?: number): TextProps;
+export declare function policy(props: ConsentProps, _kept: Kept, _at?: number): TextProps;
+export declare function label(_props: ConsentProps, _kept: Kept, row: Row, _at: number): TextProps;
+export declare function describe(_props: ConsentProps, _kept: Kept, row: Row, _at: number): TextProps;
+export declare function fixed(_props: ConsentProps, _kept: Kept, _row: Row, _at: number): TextProps;
+export declare function chooser(_props: ConsentProps, kept: Kept, row: Row, _at?: number): ToggleProps;
+export declare function withdraw(_props: ConsentProps, kept: Kept): ButtonProps;
+export declare function decline(_props: ConsentProps, kept: Kept): ButtonProps;
+export declare function accept(_props: ConsentProps, kept: Kept): ButtonProps;
+export declare function acceptAll(_props: ConsentProps, kept: Kept): ButtonProps;
+export {};

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

@@ -0,0 +1,79 @@
+'use client';
+import { useState } from 'react';
+import { consentCategories } from "../consent.js";
+function firstSelection(categories, decision, preselected) {
+    const answered = decision !== undefined;
+    return categories
+        .filter((one) => one.required ||
+        (answered
+            ? decision.decision === 'accepted' && decision.accepted.includes(one.id)
+            : preselected.includes(one.id)))
+        .map((one) => one.id);
+}
+export function uses(props) {
+    const categories = consentCategories();
+    const [selected, setSelected] = useState(() => firstSelection(categories, props.decision, props.preselected ?? []));
+    const offered = categories.map((one) => one.id);
+    return {
+        categories,
+        selected,
+        offered,
+        accepted: props.decision?.decision === 'accepted',
+        toggle: (id, on) => {
+            setSelected((was) => (on ? [...was, id] : was.filter((one) => one !== id)));
+        },
+        decide: (decision, accepted) => {
+            props.onDecide({ decision, accepted: [...accepted], offered });
+        },
+    };
+}
+export function categories(_props, kept) {
+    return kept.categories;
+}
+export function hasPolicy(props, _kept) {
+    return props.policyKey !== undefined;
+}
+export function withdrawable(_props, kept) {
+    return kept.accepted;
+}
+export function optional(_props, _kept, row) {
+    return row['required'] !== true;
+}
+export function required(_props, _kept, row) {
+    return row['required'] === true;
+}
+export function title(_props, _kept, _at) {
+    return { k: 'consent.title', is: 'heading' };
+}
+export function policy(props, _kept, _at) {
+    return { k: props.policyKey ?? 'consent.title', is: 'body' };
+}
+export function label(_props, _kept, row, _at) {
+    return { k: String(row['labelKey']), is: 'label' };
+}
+export function describe(_props, _kept, row, _at) {
+    return { k: String(row['describeKey']), is: 'body' };
+}
+export function fixed(_props, _kept, _row, _at) {
+    return { k: 'consent.required', is: 'label' };
+}
+export function chooser(_props, kept, row, _at) {
+    const id = String(row['id']);
+    return {
+        labelKey: String(row['labelKey']),
+        on: kept.selected.includes(id),
+        onToggle: (on) => kept.toggle(id, on),
+    };
+}
+export function withdraw(_props, kept) {
+    return { label: 'consent.withdraw', onPress: () => kept.decide('withdrawn', []) };
+}
+export function decline(_props, kept) {
+    return { label: 'consent.decline', onPress: () => kept.decide('declined', []) };
+}
+export function accept(_props, kept) {
+    return { label: 'consent.accept', onPress: () => kept.decide('accepted', kept.selected) };
+}
+export function acceptAll(_props, kept) {
+    return { label: 'consent.acceptAll', onPress: () => kept.decide('accepted', kept.offered) };
+}

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

@@ -0,0 +1,13 @@
+import type { MessageKey } from '../content.tsx';
+import type { Row } from '../charts.tsx';
+import { type Element } from '../wrappers.tsx';
+export interface DonutProps {
+    readonly rows: readonly Row[];
+    readonly by: string;
+    readonly value: string;
+    readonly titleKey?: MessageKey;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Donut: Element<'Donut', DonutProps>;

package/dist/ui/elements/donut.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { element, useSurface } from "../wrappers.js";
+import { Each } from "./each.js";
+import { slice, uses } from "./donut.works.js";
+export const Donut = element('Donut', (props, className) => {
+    const kept = uses(props);
+    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 }) },
+        holds: [
+            ...(kept.holds ?? []),
+        ],
+        ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
+    return (_jsx("svg", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), role: "img", ...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) }), children: _jsx(Each, { rows: props.rows, by: props.by, children: (each0, at) => (_jsx("circle", { ...slice(props, kept, each0, at) })) }) }));
+}, 'e-donut');

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

@@ -0,0 +1,11 @@
+import { type Row } from '../charts.tsx';
+import type { DonutProps } from './donut.tsx';
+export declare function uses(props: DonutProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
+    readonly ramp: readonly string[];
+};
+export declare function slice(props: DonutProps, kept: {
+    readonly ramp: readonly string[];
+}, row: Row, at: number): Readonly<Record<string, string | number>>;

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

@@ -0,0 +1,28 @@
+import { seriesColour } from "../series.js";
+import { num, useRamp } from "../charts.js";
+const RADIUS = 40;
+const ROUND = 2 * Math.PI * RADIUS;
+export function uses(props) {
+    const ramp = useRamp(props.rows.length);
+    return {
+        ...(props.rows.length === 0 ? { holds: ['empty'] } : {}),
+        on: { viewBox: '0 0 100 100' },
+        ramp,
+    };
+}
+export function slice(props, kept, row, at) {
+    const whole = props.rows.reduce((sum, one) => sum + num(one, props.value), 0) || 1;
+    const share = num(row, props.value) / whole;
+    const before = props.rows.slice(0, at).reduce((sum, one) => sum + num(one, props.value), 0) / whole;
+    return {
+        cx: 50,
+        cy: 50,
+        r: RADIUS,
+        fill: 'none',
+        stroke: seriesColour(kept.ramp, at),
+        strokeWidth: 16,
+        strokeDasharray: `${(share * ROUND).toFixed(2)} ${ROUND.toFixed(2)}`,
+        strokeDashoffset: (-before * ROUND).toFixed(2),
+        transform: 'rotate(-90 50 50)',
+    };
+}

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { Row } from '../charts.tsx';
+import { type Element } from '../wrappers.tsx';
+export interface EachProps {
+    readonly rows: readonly object[];
+    readonly by: string;
+    readonly children: (row: Row, at: number) => ReactNode;
+    readonly settles?: string;
+    readonly paced?: string;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Each: Element<'Each', EachProps>;

package/dist/ui/elements/each.js

@@ -0,0 +1,9 @@
+'use client';
+import { roleClass } from "../fonts.js";
+import { element, useSurface } from "../wrappers.js";
+import { shows } from "./each.works.js";
+export const Each = element('Each', (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 }) }, });
+    return (shows(props, surface));
+}, 'e-each');

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

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { EachProps } from './each.tsx';
+export declare function shows(props: EachProps, _surface: unknown): ReactNode;

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useLayoutEffect, useRef } from 'react';
+import { nameOf } from "../token.js";
+function keyOf(row, by, at) {
+    const value = row[by];
+    if (value === undefined || value === null) {
+        throw new Error(`Each: row ${String(at)} has no value for "${by}", so it has no key. React reuses DOM by key, and a ` +
+            "row without one is matched by position — which silently keeps the previous row's state when " +
+            'the list reorders. Name the field that identifies a row in this view.');
+    }
+    return String(value);
+}
+function following(marker) {
+    const found = [];
+    let node = marker.nextElementSibling;
+    while (node !== null) {
+        found.push(node);
+        node = node.nextElementSibling;
+    }
+    return found;
+}
+function boxes(marker, ids) {
+    const found = new Map();
+    following(marker).forEach((node, at) => {
+        const id = ids[at];
+        if (id !== undefined)
+            found.set(id, node.getBoundingClientRect());
+    });
+    return found;
+}
+function settle(marker, ids, was, over, paced) {
+    following(marker).forEach((node, at) => {
+        const id = ids[at];
+        if (id === undefined)
+            return;
+        const before = was.get(id);
+        if (before === undefined)
+            return;
+        const after = node.getBoundingClientRect();
+        const dx = before.left - after.left;
+        const dy = before.top - after.top;
+        if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5)
+            return;
+        node.style.transition = `transform var(${nameOf('motion-instant')})`;
+        node.style.transform = `translate(${String(dx)}px, ${String(dy)}px)`;
+        void node.offsetWidth;
+        node.style.transition = `transform var(--${over}) var(--${paced})`;
+        node.style.transform = '';
+    });
+}
+export function shows(props, _surface) {
+    const within = useRef(null);
+    const was = useRef(new Map());
+    const drawn = useRef('');
+    const order = props.rows.map((row, at) => keyOf(row, props.by, at)).join('|');
+    useLayoutEffect(() => {
+        const marker = within.current;
+        if (marker === null || props.settles === undefined || props.paced === undefined)
+            return;
+        const ids = order === '' ? [] : order.split('|');
+        const moved = drawn.current !== '' && drawn.current !== order;
+        if (moved)
+            settle(marker, ids, was.current, props.settles, props.paced);
+        drawn.current = order;
+        was.current = boxes(marker, ids);
+    }, [order, props.settles, props.paced]);
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: within, hidden: true }), props.rows.map((row, at) => (_jsx(Fragment, { children: props.children(row, at) }, keyOf(row, props.by, at))))] }));
+}

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

@@ -0,0 +1,9 @@
+import type { MessageKey } from '../content.tsx';
+import { type Element } from '../wrappers.tsx';
+export interface EmptyProps {
+    readonly labelKey: MessageKey;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Empty: Element<'Empty', EmptyProps>;

package/dist/ui/elements/empty.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { element, useSurface } from "../wrappers.js";
+export const Empty = element('Empty', (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 }) },
+        holds: [
+            'empty',
+        ], });
+    return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, children: surface.text(props.labelKey) }));
+}, 'e-empty');

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

@@ -0,0 +1,16 @@
+import type { MessageKey } from '../content.tsx';
+import { type Element } from '../wrappers.tsx';
+export interface FieldProps {
+    readonly name: string;
+    readonly validator: string;
+    readonly labelKey: MessageKey;
+    readonly value?: string;
+    readonly onValue?: (said: string) => void;
+    readonly context?: Readonly<Record<string, unknown>>;
+    readonly autocomplete?: string;
+    readonly disabled?: boolean;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Field: Element<'Field', FieldProps>;

package/dist/ui/elements/field.js

@@ -0,0 +1,15 @@
+'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 { shown, entry, uses } from "./field.works.js";
+export const Field = element('Field', (props, className) => {
+    const kept = uses(props);
+    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 }) },
+        holds: [
+            ...(kept.holds ?? []),
+        ],
+        ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
+    return (_jsxs("label", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), children: [_jsx("span", { children: surface.text(props.labelKey) }), _jsx("input", { ...entry(props, kept) }), _jsx("span", { children: shown(props, surface, kept).fault })] }));
+}, 'e-field');