@prestack/thread-ui 0.0.1

package/dist/ui/collector.js

@@ -0,0 +1,75 @@
+export const INERT_COLLECTOR = {
+    record: () => undefined,
+    flush: async () => undefined,
+    stop: () => undefined,
+    dropped: () => 0,
+    pending: () => 0,
+};
+export function createCollector(options) {
+    const now = options.now ?? (() => Date.now());
+    const random = options.random ?? Math.random;
+    const maxBatch = options.maxBatch ?? 25;
+    const intervalMs = options.intervalMs ?? 10_000;
+    const sampled = (options.sample ?? 1) >= 1 || random() < (options.sample ?? 1);
+    if (!sampled)
+        return INERT_COLLECTOR;
+    let buffer = [];
+    let dropped = 0;
+    let stopped = false;
+    let seq = 0;
+    const send = async (batch) => {
+        if (batch.length === 0)
+            return;
+        const body = JSON.stringify({ events: batch });
+        if (options.beacon !== undefined && options.beacon(options.endpoint, body))
+            return;
+        const doFetch = options.fetch ?? globalThis.fetch;
+        if (doFetch === undefined) {
+            dropped += batch.length;
+            return;
+        }
+        try {
+            const response = await doFetch(options.endpoint, {
+                method: 'POST',
+                headers: { 'content-type': 'application/json' },
+                keepalive: true,
+                body,
+            });
+            if (!response.ok)
+                dropped += batch.length;
+        }
+        catch {
+            dropped += batch.length;
+        }
+    };
+    const flush = async () => {
+        const batch = buffer;
+        buffer = [];
+        await send(batch);
+    };
+    const record = (event) => {
+        if (stopped || !options.allowed())
+            return;
+        buffer.push({ ...event, at: now(), seq: ++seq });
+        if (buffer.length >= maxBatch)
+            void flush();
+    };
+    const timer = setInterval(() => void flush(), intervalMs);
+    timer.unref?.();
+    const onHide = () => {
+        if (globalThis.document?.visibilityState === 'hidden')
+            void flush();
+    };
+    globalThis.document?.addEventListener('visibilitychange', onHide);
+    return {
+        record,
+        flush,
+        stop: () => {
+            stopped = true;
+            clearInterval(timer);
+            globalThis.document?.removeEventListener('visibilitychange', onHide);
+        },
+        dropped: () => dropped,
+        pending: () => buffer.length,
+    };
+}

package/dist/ui/compositions.d.ts

@@ -0,0 +1,21 @@
+import type { Threaded } from '@prestack/thread/core/thread';
+import type { Tree } from '@prestack/thread/core/tree';
+export declare const TEACHES: readonly string[];
+export declare const REACHES: RegExp;
+export declare const declares: readonly Threaded[];
+export declare const COMPOSITIONS: Threaded & {
+    readonly files: string;
+};
+export declare function nameOf(at: string): string;
+export declare function catalogue(tree: Tree, making: 'composition' | 'screen'): Promise<readonly string[]>;
+export declare function composed(body: string, rows: readonly {
+    readonly id: string;
+    readonly at?: string;
+}[], from: 'screens' | 'compositions', except?: string): readonly string[];
+export declare const DOORS: ReadonlySet<string>;
+export declare function reaching(at: string, text: string, elements: ReadonlySet<string>, declared: ReadonlySet<string>): readonly string[];
+export declare function undeclared(tree: Tree, rows: readonly Threaded[]): Promise<readonly string[]>;
+export declare function seeds(rows: readonly Threaded[], held: (at: string) => boolean): readonly {
+    readonly path: string;
+    readonly content: string;
+}[];

package/dist/ui/compositions.js

@@ -0,0 +1,305 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { basename, dirname, join } from 'node:path';
+import { stdout } from 'node:process';
+import { pathToFileURL } from 'node:url';
+import { wrapped } from "@prestack/thread/core/asking";
+import { exit, invoked } from "@prestack/thread/core/invoked";
+import { named as packageOf } from "@prestack/thread/core/scope";
+import { findTree, inTree } from "@prestack/thread/core/tree";
+export const TEACHES = [
+    '  what the body may reach, and how a premium state is written:',
+    '',
+    '    `useUi()` is the door. It carries `actor` — who is asking, with the roles read from',
+    '    the row that declared itself the caller — and `translate`, `clock` and `dispatch`. Name',
+    '    it in the body and the import is written for you.',
+    '',
+    '    A premium state is DATA, not a permission. The row says what somebody IS; a grant says',
+    '    what they may RUN; a variant says how a thing LOOKS. So a locked look is a signal set',
+    '    from a value you already have, so the hook is read where it is used:',
+    '',
+    '      <FeatureBox.paywalled locked={useUi().actor?.roles.includes(\'role_paid\') !== true}>',
+    '        <Text k=\'feature.title\' />',
+    '      </FeatureBox.paywalled>',
+    '',
+    '    Read it in three parts, and each is its own command:',
+    '',
+    '      `locked` is a boolean prop because the ELEMENT declares it raises that signal —',
+    '      `thread create element` with `raises: locked`. A signal this app declares cannot be',
+    '      raised on an element that never said it raises one, so `Box` will not take it.',
+    '      `.paywalled` is a variant worn as the TAG, never passed as a prop, and it is what',
+    '      carries the look — `thread create variant` with a `state: locked` and what it sets.',
+    '      `useUi().actor` is who is asking, with the roles read off the row that declared',
+    '      itself the caller in `thread create entity`.',
+    '',
+    '    THE MEMBER IS THE VARIANT\'S WHOLE ID, CAMELCASED — never the part after the element',
+    '    name. A variant `button-fill` is worn `<Button.buttonFill>`, and `<Button.fill>` is not',
+    '    a thing. `.paywalled` above reads short only because that variant is itself named',
+    '    `paywalled`; most carry the element in their id and wear all of it.',
+    '',
+    '  how a control reaches an operation:',
+    '',
+    '    Wiring is imperative. There is no `run=`, `operation=` or `dispatch=` prop on any',
+    '    element, and the compiler is what will tell you so. A control calls dispatch in its own',
+    '    handler:',
+    '',
+    '      <Button.buttonFill label=\'common.save\'',
+    '        onPress={() => useUi().dispatch?.(\'wf_save\')} />',
+    '',
+    '    `dispatch` is optional on the hook, so `?.` is required — without it the compiler says',
+    '    "Cannot invoke an object which is possibly \'undefined\'". The name is the operation\'s own',
+    '    id from `thread create operation`, and one this app never declared is refused before it',
+    '    runs. An operation whose `to:` named nobody is refused however the button looks — and',
+    '    `to:` takes roles off an entity, which is a noun that arrives with `thread attach',
+    `    ${packageOf('data')}\`.`,
+    '',
+    '    Nothing here decides access. The gate still refuses the operation behind the lock',
+    '    whatever the screen shows, so a screen that got this wrong shows the wrong thing and',
+    '    still cannot do the wrong thing.',
+    '',
+    '  how a press moves to another screen:',
+    '',
+    '    Name the screen. `navigateTo` takes the screen\'s export name — its id in PascalCase, so',
+    '    `order-detail` is reached as `navigateTo="OrderDetail"`:',
+    '',
+    '      <Button.buttonNormal label=\'home.orders\' navigateTo="Orders" />',
+    '',
+    '    That is the whole of it. `thread routes` reads every `navigateTo` the screens and their',
+    '    compositions hold and writes the map — from which screen, through which button, to which',
+    '    screen — and the pages. A page is reached by its route, and a sheet, popover, overlay or',
+    '    toast opens where somebody already is, so the press is written the same way for both.',
+    '    A name no screen has and a destination not written out as a name are each refused there.',
+    '    Never an `href` and never',
+    '    a router: a move the map cannot see is a screen the map reads as unreachable.',
+];
+export const REACHES = /\buseUi\s*\(/;
+const here = 'thread/ui/compositions.ts';
+const said = [
+    {
+        on: '2026-08-25',
+        said: 'Compositions is basically a mix of elements+variants, arranged with arrangement elements, with ways to invoke functions (navigateTo, dispatch).',
+    },
+    {
+        on: '2026-08-25',
+        said: 'The compositions.ts just says what the thing is, and describes it. Then the file itself, seeded, is a cmp_ file, where we build the actual UI from. And the UI file is plain react, just with our system.',
+    },
+    {
+        on: '2026-08-25',
+        said: 'Variants themselves declare what elements they relate to, in their declarations. Then the composition says button.primary and if that matches the combination of variant and element it is acceptable. And make sure the composition can only dispatch existing operations.',
+    },
+];
+export const declares = [];
+export const COMPOSITIONS = {
+    id: 'composition',
+    at: here,
+    files: 'compositions/cmp_*.tsx',
+    describes: 'A React component made through this system: elements wearing variants, arranged, and able to reach a declared operation. Each row names a file prefixed `cmp_`, and that file is plain React a person writes, because the arrangement, the conditions and the content are theirs. A call site states only what is left over: what a thing does comes from its element, and how it looks and which states it answers to come from its variant, so `Button.primary` is legal only where a variant `primary` says it is worn by `Button`. Text in it is a message key, a look is a variant, and a value names a style guide row, never a raw one. The framework ships none, because what an app is made of is the app’s, and this row says what a composition is, never what is inside it.',
+    version: 1,
+    cites: said,
+    declares,
+};
+const PASCAL = (id) => id
+    .split('-')
+    .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+    .join('');
+export function nameOf(at) {
+    const file = at.split('\\').join('/').split('/').at(-1) ?? at;
+    return PASCAL(file.replace(/^cmp_/, '').replace(/\.[^.]+$/, ''));
+}
+async function sheetOf(tree, file, ...named) {
+    try {
+        const held = (await import(__rewriteRelativeImportExtension(pathToFileURL(inTree(tree, file)).href)));
+        for (const one of named) {
+            const found = held[one]?.declares;
+            if (found !== undefined)
+                return found;
+        }
+        return [];
+    }
+    catch {
+        return [];
+    }
+}
+const camelOf = (id) => id.replace(/-([a-z0-9])/g, (_, one) => one.toUpperCase());
+const sentence = (one, pad) => String(one.describes ?? '').trim() === '' ? [] : wrapped(String(one.describes), pad);
+export async function catalogue(tree, making) {
+    const [elements, variants, compositions, screens] = await Promise.all([
+        sheetOf(tree, `elements.${'ts'}`, 'ELEMENT', 'ELEMENTS'),
+        sheetOf(tree, `variants.${'ts'}`, 'VARIANT', 'VARIANTS'),
+        sheetOf(tree, `compositions.${'ts'}`, 'COMPOSITION', 'COMPOSITIONS'),
+        making === 'screen' ? sheetOf(tree, `screens.${'ts'}`, 'SCREEN', 'SCREENS') : Promise.resolve([]),
+    ]);
+    const worn = new Map();
+    for (const one of variants) {
+        for (const each of one.wears ?? []) {
+            const key = PASCAL(each);
+            const already = worn.get(key) ?? [];
+            if (!already.includes(one.id))
+                worn.set(key, [...already, one.id]);
+        }
+    }
+    const writes = (one) => {
+        const name = PASCAL(one.id);
+        const members = (worn.get(name) ?? []).sort().map((each) => `<${name}.${camelOf(each)}>`);
+        if (members.length === 0)
+            return `<${name}>`;
+        return one.arranges === true ? `<${name}>, or ${members.join(' ')}` : members.join(' ');
+    };
+    const section = (title, rows, write) => rows.length === 0
+        ? [`  ${title}: none yet.`, '']
+        : [
+            `  ${title} (${String(rows.length)}):`,
+            ...rows.flatMap((one) => [`    ${write(one)}`, ...sentence(one, '      ')]),
+            '',
+        ];
+    return [
+        '',
+        ...(making === 'screen'
+            ? section('SCREENS that exist, and the name a press reaches each one by', screens, (one) => `${one.id} — navigateTo="${PASCAL(one.id)}"`)
+            : []),
+        ...section('COMPOSITIONS you can place', compositions, (one) => `<${typeof one.at === 'string' && one.at !== '' ? nameOf(one.at) : PASCAL(one.id)}>`),
+        ...section('ELEMENTS, written as the tags they can actually be typed as', elements, writes),
+        ...(variants.length === 0
+            ? ['  VARIANTS: none yet.', '']
+            : [
+                `  VARIANTS (${String(variants.length)}), under the elements that accept them:`,
+                ...[...worn.keys()].sort().map((name) => `    ${name} — ${(worn.get(name) ?? []).sort().map(camelOf).join(', ')}`),
+                ...(() => {
+                    const nobody = variants.filter((one) => (one.wears ?? []).length === 0).map((one) => one.id);
+                    return nobody.length === 0
+                        ? []
+                        : [`    worn by nothing, so writable nowhere: ${nobody.sort().join(', ')}`];
+                })(),
+                '',
+            ]),
+        '  Materials, style guide values, fonts and animations are chosen inside a VARIANT, never inside',
+        '  a body — `npx thread create variant` prints every one of them at the moment one is needed.',
+        '',
+        '  Every element and the tags it is written as: `npx thread create element`. Every variant and',
+        '  the tag it is worn as: `npx thread create variant`. Then open the one nearest to what you are',
+        '  about to build with `npx thread read <id>` — it already answers how a body is arranged, how a',
+        '  variant is worn and how a control reaches an operation, and a file cannot be wrong in the way',
+        '  a remembered example can.',
+        '',
+    ];
+}
+const TAG = /<([A-Z][A-Za-z0-9]*)/g;
+export function composed(body, rows, from, except) {
+    const named = new Map();
+    for (const row of rows) {
+        const at = row.at;
+        if (typeof at !== 'string' || at === '' || at === except)
+            continue;
+        named.set(PASCAL(row.id), at);
+    }
+    const found = new Set();
+    for (const [, tag] of body.matchAll(TAG))
+        if (tag !== undefined && named.has(tag))
+            found.add(tag);
+    return [...found].sort().map((one) => {
+        const at = named.get(one) ?? '';
+        const file = (at.split('\\').join('/').split('/').at(-1) ?? at).replace(/\.[^.]+$/, '');
+        return `import { ${one} } from '${from === 'screens' ? '../compositions' : '.'}/${file}.tsx'`;
+    });
+}
+const IMPORTS = /^import\s[\s\S]*?from\s*['"]([^'"]+)['"]/gm;
+export const DOORS = new Set(['react', `${packageOf('ui')}/wrappers`, `${packageOf('ui')}/drag`]);
+const SHIPPED = new RegExp(`^${packageOf('ui')}/elements/([a-z0-9-]+)$`);
+const slashed = (path) => path.split('\\').join('/');
+export function reaching(at, text, elements, declared) {
+    const here = slashed(at).split('/').slice(0, -1).join('/');
+    const found = new Set();
+    for (const one of text.matchAll(IMPORTS)) {
+        const from = one[1];
+        if (from === undefined || DOORS.has(from))
+            continue;
+        const shipped = SHIPPED.exec(from)?.[1];
+        if (shipped !== undefined && elements.has(shipped))
+            continue;
+        if (from.startsWith('.') && declared.has(slashed(join(here, from))))
+            continue;
+        found.add(from);
+    }
+    return [...found].sort();
+}
+export async function undeclared(tree, rows) {
+    const elements = new Set();
+    const declared = new Set();
+    for (const [file, exported] of [
+        ['elements.ts', 'ELEMENT'],
+        ['compositions.ts', 'COMPOSITION'],
+        ['screens.ts', 'SCREEN'],
+    ]) {
+        const where = inTree(tree, file);
+        if (!existsSync(where))
+            continue;
+        const sheet = (await import(__rewriteRelativeImportExtension(pathToFileURL(where).href)));
+        for (const row of sheet[exported]?.declares ?? []) {
+            if (exported === 'ELEMENT')
+                elements.add(row.id);
+            if (row.at !== '')
+                declared.add(slashed(row.at));
+        }
+    }
+    const found = [];
+    for (const row of rows) {
+        const file = join(tree.at, row.at);
+        if (!existsSync(file))
+            continue;
+        for (const one of reaching(row.at, readFileSync(file, 'utf8'), elements, declared)) {
+            found.push(`${row.at} imports \`${one}\`, which this app declares nothing by. A composition reaches ` +
+                'declared elements, other declared compositions, and the door — everything else is a thing ' +
+                'nothing wrote down. Declare it, or take it out and write the body through `thread create`.');
+        }
+    }
+    return found;
+}
+function starter(row) {
+    const name = nameOf(row.at);
+    return `'use client'
+
+import { Box } from './elements/box.tsx'
+import { composition } from './wrappers.tsx'
+
+export const ${name} = composition('${name}', () => <Box.card />)
+`;
+}
+export function seeds(rows, held) {
+    return rows.filter((row) => !held(row.at)).map((row) => ({ path: row.at, content: starter(row) }));
+}
+async function run() {
+    const tree = findTree();
+    const at = inTree(tree, 'compositions.ts');
+    if (!existsSync(at)) {
+        stdout.write(`thread: this tree has no ${tree.name}/${basename(at)}, so it declares no composition and there is nothing to seed or check.\n`);
+        return 0;
+    }
+    const held = (await import(__rewriteRelativeImportExtension(pathToFileURL(at).href)));
+    if (held.COMPOSITION === undefined) {
+        stdout.write(`thread: ${tree.name}/compositions.ts exports no \`COMPOSITION\`, so nothing declares a composition here.\n`);
+        return 1;
+    }
+    const rows = held.COMPOSITION.declares ?? [];
+    const made = seeds(rows, (where) => existsSync(join(tree.at, where)));
+    for (const one of made) {
+        mkdirSync(dirname(join(tree.at, one.path)), { recursive: true });
+        writeFileSync(join(tree.at, one.path), one.content, 'utf8');
+        stdout.write(`thread: seeded ${one.path}\n`);
+    }
+    const loose = await undeclared(tree, rows);
+    for (const one of loose)
+        stdout.write(`thread: ${one}\n`);
+    stdout.write(`thread: ${String(rows.length)} composition(s) declared, ${String(made.length)} seeded, ` +
+        `${String(rows.length - made.length)} already written, ` +
+        `${loose.length === 0 ? 'none reaching anything undeclared' : `${String(loose.length)} reaching something undeclared`}\n`);
+    return loose.length === 0 ? 0 : 1;
+}
+if (invoked(import.meta.url))
+    exit(await run());

package/dist/ui/consent.d.ts

@@ -0,0 +1,22 @@
+import { z } from 'zod';
+export declare const ConsentCategorySchema: z.ZodObject<{
+    id: z.ZodString;
+    labelKey: z.ZodString;
+    describeKey: z.ZodString;
+    required: z.ZodDefault<z.ZodBoolean>;
+}, z.core.$strict>;
+export type ConsentCategory = z.infer<typeof ConsentCategorySchema>;
+export declare function defineConsentCategory(category: ConsentCategory): void;
+export declare function consentCategories(): readonly ConsentCategory[];
+export declare function consentCategory(id: string): ConsentCategory | undefined;
+export declare const ConsentDecisionSchema: z.ZodObject<{
+    decision: z.ZodEnum<{
+        accepted: "accepted";
+        declined: "declined";
+        withdrawn: "withdrawn";
+    }>;
+    accepted: z.ZodArray<z.ZodString>;
+    offered: z.ZodArray<z.ZodString>;
+}, z.core.$strict>;
+export type ConsentDecision = z.infer<typeof ConsentDecisionSchema>;
+export declare function consentAllows(decision: ConsentDecision | undefined, categoryId: string): boolean;

package/dist/ui/consent.js

@@ -0,0 +1,44 @@
+import { z } from 'zod';
+export const ConsentCategorySchema = z
+    .strictObject({
+    id: z
+        .string()
+        .regex(/^[a-z][a-z0-9_]*$/, 'a consent category id is lower_snake_case')
+        .describe('The id recorded in `thread.consent.categories`.'),
+    labelKey: z.string().min(1).describe('The category’s name, as a message key. Never a sentence.'),
+    describeKey: z.string().min(1).describe('What is collected under it, as a message key.'),
+    required: z.boolean().default(false).describe('True where the app cannot function without it.'),
+})
+    .describe('One thing an app may ask permission to collect.');
+const TELEMETRY = ConsentCategorySchema.parse({
+    id: 'telemetry',
+    labelKey: 'consent.telemetry.label',
+    describeKey: 'consent.telemetry.describe',
+});
+const REGISTRY = new Map([[TELEMETRY.id, TELEMETRY]]);
+export function defineConsentCategory(category) {
+    const parsed = ConsentCategorySchema.parse(category);
+    if (REGISTRY.has(parsed.id))
+        throw new Error(`consent category "${parsed.id}" is already registered`);
+    REGISTRY.set(parsed.id, parsed);
+}
+export function consentCategories() {
+    return [...REGISTRY.values()].sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+}
+export function consentCategory(id) {
+    return REGISTRY.get(id);
+}
+export const ConsentDecisionSchema = z
+    .strictObject({
+    decision: z.enum(['accepted', 'declined', 'withdrawn']).describe('Withdrawal is a decision and is recorded like any other.'),
+    accepted: z.array(z.string()).describe('The category ids accepted.'),
+    offered: z.array(z.string()).describe('Every category shown at that moment, accepted or not.'),
+})
+    .describe('One consent decision, with the choice set as it stood when it was made.');
+export function consentAllows(decision, categoryId) {
+    if (consentCategory(categoryId)?.required === true)
+        return true;
+    if (decision === undefined || decision.decision !== 'accepted')
+        return false;
+    return decision.accepted.includes(categoryId);
+}

package/dist/ui/content.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { useSurface } from './wrappers.tsx';
+export type MessageKey = string;
+export interface ValueProps {
+    readonly validator: string;
+    readonly value: unknown;
+    readonly context?: Readonly<Record<string, unknown>>;
+}
+export declare function renderValue({ validator, value, context }: ValueProps, surface: ReturnType<typeof useSurface>): ReactNode;

package/dist/ui/content.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatValue, runValidator, validatorFor } from "./validators.js";
+export function renderValue({ validator, value, context }, surface) {
+    const entry = validatorFor(validator);
+    const result = runValidator(validator, value, context ?? {});
+    if (!result.ok) {
+        return (_jsx("span", { className: surface.className, ...surface.marks, "data-invalid": "true", children: surface.text(result.errorKey) }));
+    }
+    return (_jsx("span", { className: surface.className, ...surface.marks, "data-validator": entry.name, children: formatValue(validator, result.value, context ?? {}) }));
+}

package/dist/ui/contrast.d.ts

@@ -0,0 +1,3 @@
+export declare const CONTRAST_LARGE = 3;
+export declare function luminance(hex: string): number;
+export declare function contrast(a: string, b: string): number;

package/dist/ui/contrast.js

@@ -0,0 +1,23 @@
+export const CONTRAST_LARGE = 3;
+function channel(value) {
+    const c = value / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+export function luminance(hex) {
+    const clean = hex.replace('#', '');
+    const full = clean.length === 3
+        ? clean
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        : clean.slice(0, 6);
+    const num = Number.parseInt(full, 16);
+    const r = channel((num >> 16) & 255);
+    const g = channel((num >> 8) & 255);
+    const b = channel(num & 255);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+export function contrast(a, b) {
+    const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (light + 0.05) / (dark + 0.05);
+}

package/dist/ui/controls.d.ts

@@ -0,0 +1,14 @@
+import type { MessageKey } from './content.tsx';
+import type { Dispatching } from './checked.ts';
+export interface PressProps {
+    readonly dispatch?: [keyof Dispatching] extends [never] ? string : keyof Dispatching & string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly navigateTo?: string;
+    readonly onPress?: () => void;
+}
+export interface Option {
+    readonly value: string;
+    readonly labelKey: MessageKey;
+}
+export { Menu, type MenuProps } from './elements/menu.tsx';
+export { type MenuItem } from './elements/menu.works.tsx';

package/dist/ui/controls.js

@@ -0,0 +1,2 @@
+'use client';
+export { Menu } from "./elements/menu.js";

package/dist/ui/disclosure.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import type { MessageKey } from './content.tsx';
+export interface TabItem {
+    readonly id: string;
+    readonly labelKey: MessageKey;
+    readonly disabled?: boolean;
+    readonly content: ReactNode;
+}
+export interface AccordionItem {
+    readonly id: string;
+    readonly labelKey: MessageKey;
+    readonly disabled?: boolean;
+    readonly content: ReactNode;
+}

package/dist/ui/disclosure.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/dist/ui/dismiss-layer.d.ts

@@ -0,0 +1,14 @@
+import { type RefObject } from 'react';
+export interface Layer {
+    readonly ref: RefObject<HTMLElement | null>;
+    readonly dismissOnEscape: boolean;
+    readonly dismissOnOutside: boolean;
+    readonly onDismiss: () => void;
+}
+export declare function useDismissLayer(ref: RefObject<HTMLElement | null>, options: {
+    readonly active: boolean;
+    readonly dismissOnEscape: boolean;
+    readonly dismissOnOutside: boolean;
+    readonly onDismiss: () => void;
+}): void;
+export declare function openLayers(): number;

package/dist/ui/dismiss-layer.js

@@ -0,0 +1,66 @@
+'use client';
+import { useEffect } from 'react';
+const layers = [];
+function ordered() {
+    return layers
+        .filter((layer) => layer.ref.current !== null)
+        .sort((a, b) => {
+        const first = a.ref.current;
+        const second = b.ref.current;
+        if (first === second)
+            return 0;
+        return (first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0 ? -1 : 1;
+    });
+}
+function target(kind) {
+    const open = ordered();
+    for (let i = open.length - 1; i >= 0; i -= 1) {
+        const layer = open[i];
+        if (kind === 'escape' ? layer.dismissOnEscape : layer.dismissOnOutside)
+            return layer;
+    }
+    return undefined;
+}
+export function useDismissLayer(ref, options) {
+    const { active, dismissOnEscape, dismissOnOutside, onDismiss } = options;
+    useEffect(() => {
+        if (!active)
+            return;
+        const layer = { ref, dismissOnEscape, dismissOnOutside, onDismiss };
+        layers.push(layer);
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            if (target('escape') !== layer)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            layer.onDismiss();
+        };
+        const onPointerDown = (event) => {
+            if (target('outside') !== layer)
+                return;
+            const root = ref.current;
+            const node = event.target;
+            if (root === null || !(node instanceof Node))
+                return;
+            if (root.contains(node))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            layer.onDismiss();
+        };
+        document.addEventListener('keydown', onKeyDown, true);
+        document.addEventListener('pointerdown', onPointerDown, true);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown, true);
+            document.removeEventListener('pointerdown', onPointerDown, true);
+            const at = layers.indexOf(layer);
+            if (at !== -1)
+                layers.splice(at, 1);
+        };
+    }, [active, dismissOnEscape, dismissOnOutside, onDismiss, ref]);
+}
+export function openLayers() {
+    return layers.length;
+}