@prestack/thread-ui 0.0.1

package/dist/ui/elements/spinner.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 Spinner = element('Spinner', (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: [
+            'spinner',
+        ], });
+    return (_jsx("span", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, "aria-label": surface.text(props.labelKey), children: null }));
+}, 'e-spinner');

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

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

package/dist/ui/elements/stack.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { element, useSurface } from "../wrappers.js";
+export const Stack = element('Stack', (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-stack');

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

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

package/dist/ui/elements/stat.js

@@ -0,0 +1,10 @@
+'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 } from "./stat.works.js";
+export const Stat = element('Stat', (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 (_jsxs("figure", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, children: [_jsx("span", { children: shown(props, surface).figure }), _jsx("figcaption", { children: surface.text(props.labelKey) }), _jsx("span", { children: shown(props, surface).delta })] }));
+}, 'e-stat');

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

@@ -0,0 +1,3 @@
+import type { ReactNode } from 'react';
+import type { StatProps } from './stat.tsx';
+export declare function shown(props: StatProps, _surface: unknown): Readonly<Record<string, ReactNode>>;

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

@@ -0,0 +1,10 @@
+import { formatValue } from "../validators.js";
+export function shown(props, _surface) {
+    const current = typeof props.value === 'number' ? props.value : Number(props.value ?? 0);
+    const against = props.compare;
+    const moved = against === undefined || against === 0 ? null : (current - against) / Math.abs(against);
+    return {
+        figure: formatValue(props.format ?? 'number', props.value),
+        delta: moved === null ? null : formatValue('percent', Math.round(moved * 1000) / 10),
+    };
+}

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

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

package/dist/ui/elements/surface.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { element, useSurface } from "../wrappers.js";
+import { uses } from "./surface.works.js";
+export const Surface = element('Surface', (props, className) => {
+    const kept = uses(props);
+    const surface = useSurface({ className,
+        invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+        holds: [
+            ...(kept.holds ?? []),
+        ],
+        animates: true,
+        ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
+    return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), children: props.children }));
+}, 'e-surface');

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

@@ -0,0 +1,7 @@
+export declare function uses(_props: unknown): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on: {
+        readonly ref: (node: HTMLElement | null) => void;
+    };
+};

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

@@ -0,0 +1,4 @@
+import { useVisibility } from "../wrappers.js";
+export function uses(_props) {
+    return { on: { ref: useVisibility(true) } };
+}

package/dist/ui/elements/table.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 TableProps {
+    readonly rows: readonly Row[];
+    readonly columns: readonly Row[];
+    readonly by: string;
+    readonly titleKey?: MessageKey;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Table: Element<'Table', TableProps>;

package/dist/ui/elements/table.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 { Each } from "./each.js";
+import { shown, heading, uses } from "./table.works.js";
+export const Table = element('Table', (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("table", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), ...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) }), children: [_jsx("thead", { children: _jsx("tr", { children: _jsx(Each, { rows: props.columns, by: 'field', children: (each0, at) => (_jsx("th", { ...heading(props, kept, each0, at), children: shown(props, each0, surface, kept).heading })) }) }) }), _jsx("tbody", { children: _jsx(Each, { rows: props.rows, by: props.by, children: (each0, at) => (_jsx("tr", { children: _jsx(Each, { rows: props.columns, by: 'field', children: (each1, at) => (_jsx("td", { children: shown(props, each0, each1, surface, kept).cell })) }) })) }) })] }));
+}, 'e-table');

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { Row } from '../charts.tsx';
+import type { Surface } from '../door.ts';
+import type { TableProps } from './table.tsx';
+export declare function uses(props: TableProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
+};
+export declare function shown(_props: TableProps, ...rest: readonly [Row, Surface, unknown] | readonly [Row, Row, Surface, unknown]): Readonly<Record<string, ReactNode>>;
+export declare function heading(_props: TableProps, _kept: unknown, _column: Row, _at: number): Readonly<Record<string, string>>;

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

@@ -0,0 +1,15 @@
+import { formatValue } from "../validators.js";
+export function uses(props) {
+    return props.rows.length === 0 ? { holds: ['empty'] } : {};
+}
+export function shown(_props, ...rest) {
+    if (rest.length === 3) {
+        const [column, surface] = rest;
+        return { heading: surface.text(String(column['labelKey'])) };
+    }
+    const [row, column] = rest;
+    return { cell: formatValue(String(column['format'] ?? 'text'), row[String(column['field'])]) };
+}
+export function heading(_props, _kept, _column, _at) {
+    return { scope: 'col' };
+}

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

@@ -0,0 +1,12 @@
+import type { TabItem } from '../disclosure.tsx';
+import { type Element } from '../wrappers.tsx';
+export interface TabsProps {
+    readonly items: readonly TabItem[];
+    readonly initial?: string;
+    readonly onChange?: (said: string) => void;
+    readonly orientation?: string;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Tabs: Element<'Tabs', TabsProps>;

package/dist/ui/elements/tabs.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 { Each } from "./each.js";
+import { shown, strip, tab, panel, opened, uses } from "./tabs.works.js";
+export const Tabs = element('Tabs', (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("div", { ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), children: [_jsx("div", { className: `e-tabs-strip ${surface.className ?? ''}`, ...strip(props, kept), children: _jsx(Each, { rows: props.items, by: 'id', children: (each0, at) => (_jsx("button", { className: "e-tabs-tab", ...tab(props, kept, each0, at), children: shown(props, each0, surface, kept).label })) }) }), !opened(props, kept) ? null : _jsx("div", { ...panel(props, kept), children: shown(props, surface, kept).inside })] }));
+}, 'e-tabs');

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

@@ -0,0 +1,25 @@
+import type { ReactNode, RefObject } from 'react';
+import type { Row } from '../charts.tsx';
+import type { Surface } from '../door.ts';
+import type { TabsProps } from './tabs.tsx';
+type Kept = {
+    readonly list: RefObject<HTMLDivElement | null>;
+    readonly base: string;
+    readonly open: string | undefined;
+    readonly choose: (id: string) => void;
+};
+export declare function uses(props: TabsProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
+    readonly list: RefObject<HTMLDivElement | null>;
+    readonly base: string;
+    readonly open: string | undefined;
+    readonly choose: (id: string) => void;
+};
+export declare function strip(props: TabsProps, kept: Kept): Readonly<Record<string, unknown>>;
+export declare function tab(_props: TabsProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>>;
+export declare function opened(_props: TabsProps, kept: Kept): boolean;
+export declare function panel(_props: TabsProps, kept: Kept): Readonly<Record<string, unknown>>;
+export declare function shown(props: TabsProps, ...rest: readonly [Surface, Kept] | readonly [Row, Surface, Kept]): Readonly<Record<string, ReactNode>>;
+export {};

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

@@ -0,0 +1,53 @@
+import { useId, useRef, useState } from 'react';
+import { ITEM_ATTR, useRovingFocus } from "../roving-focus.js";
+export function uses(props) {
+    const list = useRef(null);
+    const base = useId();
+    const first = props.items.find((one) => one.disabled !== true)?.id;
+    const [active, setActive] = useState(props.initial ?? first);
+    useRovingFocus(list, { orientation: props.orientation === 'vertical' ? 'vertical' : 'horizontal' });
+    const open = props.items.find((one) => one.id === active) ?? props.items.find((one) => one.disabled !== true);
+    return {
+        list,
+        base,
+        open: open?.id,
+        choose: (id) => {
+            setActive(id);
+            props.onChange?.(id);
+        },
+    };
+}
+export function strip(props, kept) {
+    return { ref: kept.list, role: 'tablist', 'aria-orientation': props.orientation === 'vertical' ? 'vertical' : 'horizontal' };
+}
+export function tab(_props, kept, row, _at) {
+    const id = String(row['id']);
+    return {
+        ...{ [ITEM_ATTR]: '' },
+        type: 'button',
+        role: 'tab',
+        id: `${kept.base}-tab-${id}`,
+        'aria-controls': `${kept.base}-panel-${id}`,
+        'aria-selected': id === kept.open,
+        disabled: row['disabled'] === true,
+        onClick: () => kept.choose(id),
+    };
+}
+export function opened(_props, kept) {
+    return kept.open !== undefined;
+}
+export function panel(_props, kept) {
+    return {
+        role: 'tabpanel',
+        id: `${kept.base}-panel-${String(kept.open)}`,
+        'aria-labelledby': `${kept.base}-tab-${String(kept.open)}`,
+    };
+}
+export function shown(props, ...rest) {
+    if (rest.length === 3) {
+        const [row, surface] = rest;
+        return { label: surface.text(String(row['labelKey'])) };
+    }
+    const [, kept] = rest;
+    return { inside: props.items.find((one) => one.id === kept.open)?.content ?? null };
+}

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

@@ -0,0 +1,13 @@
+import type { MessageKey } from '../content.tsx';
+import { type FontRoleId } from '../fonts.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 input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Text: Element<'Text', TextProps>;

package/dist/ui/elements/text.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+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 }) }, });
+    return (_jsx("span", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, role: props.announce, children: surface.text(props.k, props.with) }));
+}, 'e-text');

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

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

package/dist/ui/elements/textarea.js

@@ -0,0 +1,11 @@
+'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";
+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 }) }, });
+    return (_jsxs("label", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, children: [_jsx("span", { children: surface.text(props.labelKey) }), props.value === undefined ? null : _jsx("textarea", { name: props.name, rows: props.rows ?? 4, ...limited(props.validator), disabled: surface.marked('disabled'), value: props.value ?? '', onChange: (event) => does(props).wrote(event.target.value) })] }));
+}, 'e-textarea');

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

@@ -0,0 +1,4 @@
+import type { TextareaProps } from './textarea.tsx';
+export declare function does(props: TextareaProps): {
+    readonly wrote: (said: string) => void;
+};

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

@@ -0,0 +1,3 @@
+export function does(props) {
+    return { wrote: (said) => props.onValue?.(said) };
+}

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

@@ -0,0 +1,11 @@
+import { type FontRoleId } from '../fonts.ts';
+import { type Element } from '../wrappers.tsx';
+export interface TimeProps {
+    readonly value?: unknown;
+    readonly relative?: boolean;
+    readonly is?: FontRoleId;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Time: Element<'Time', TimeProps>;

package/dist/ui/elements/time.js

@@ -0,0 +1,14 @@
+'use client';
+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: [
+            ...(kept.holds ?? []),
+        ],
+        ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
+    return (shows(props, surface, kept));
+}, 'e-time');

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

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import type { Surface } from '../door.ts';
+import type { TimeProps } from './time.tsx';
+export declare function uses(props: TimeProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly at: number | undefined;
+};
+export declare function shows(props: TimeProps, surface: Surface, kept: {
+    readonly at: number | undefined;
+}): ReactNode;

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

@@ -0,0 +1,16 @@
+import { useCallback, useSyncExternalStore } from 'react';
+import { renderValue } from "../content.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) };
+}
+export function shows(props, surface, kept) {
+    if (props.relative !== true || kept.at === undefined) {
+        return renderValue({ validator: 'datetime', value: props.value }, surface);
+    }
+    return renderValue({ validator: 'relativeTime', value: props.value, context: { now: kept.at } }, surface);
+}

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

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

package/dist/ui/elements/toggle.js

@@ -0,0 +1,10 @@
+'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";
+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 }) }, });
+    return (_jsxs("label", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, children: [props.on === undefined ? null : _jsx("input", { type: "checkbox", disabled: surface.marked('disabled'), checked: props.on === true, onChange: (event) => does(props).changed(event.target.checked) }), _jsx("span", { children: surface.text(props.labelKey) })] }));
+}, 'e-toggle');

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

@@ -0,0 +1,4 @@
+import type { ToggleProps } from './toggle.tsx';
+export declare function does(props: ToggleProps): {
+    readonly changed: (on: boolean) => void;
+};

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

@@ -0,0 +1,3 @@
+export function does(props) {
+    return { changed: (on) => props.onToggle?.(on) };
+}

package/dist/ui/elements/tooltip.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 TooltipProps {
+    readonly children: ReactNode;
+    readonly labelKey: MessageKey;
+    readonly side?: string;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Tooltip: Element<'Tooltip', TooltipProps>;

package/dist/ui/elements/tooltip.js

@@ -0,0 +1,15 @@
+'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";
+export const Tooltip = element('Tooltip', (props, className) => {
+    const kept = uses(props);
+    const surface = useSurface({ className,
+        invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+        holds: [
+            ...(kept.holds ?? []),
+        ],
+        measures: measured(props, kept),
+        ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
+    return (_jsxs("span", { ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), style: surface.measures, children: [props.children, !showing(props, kept) ? null : _jsx("span", { className: `e-tooltip-bubble ${surface.className ?? ''}`, ...bubble(props, kept), children: surface.text(props.labelKey) })] }));
+}, 'e-tooltip');

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

@@ -0,0 +1,28 @@
+import type { TooltipProps } from './tooltip.tsx';
+type Kept = {
+    readonly trigger: React.RefObject<HTMLSpanElement | null>;
+    readonly layer: React.RefObject<HTMLSpanElement | null>;
+    readonly open: boolean;
+    readonly at: {
+        readonly x: number;
+        readonly y: number;
+    } | null;
+    readonly show: (to: boolean) => void;
+};
+export declare function uses(props: TooltipProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on: Readonly<Record<string, unknown>>;
+    readonly trigger: React.RefObject<HTMLSpanElement | null>;
+    readonly layer: React.RefObject<HTMLSpanElement | null>;
+    readonly open: boolean;
+    readonly at: {
+        readonly x: number;
+        readonly y: number;
+    } | null;
+    readonly show: (to: boolean) => void;
+};
+export declare function showing(_props: TooltipProps, kept: Kept): boolean;
+export declare function bubble(props: TooltipProps, kept: Kept): Readonly<Record<string, unknown>>;
+export declare function measured(_props: TooltipProps, kept: Kept): Readonly<Record<string, string | number>>;
+export {};

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

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react';
+import { useDismissLayer } from "../dismiss-layer.js";
+import { positionOf } from "../positioning.js";
+export function uses(props) {
+    const trigger = useRef(null);
+    const layer = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [at, setAt] = useState(null);
+    useDismissLayer(layer, {
+        active: open,
+        dismissOnEscape: true,
+        dismissOnOutside: true,
+        onDismiss: () => setOpen(false),
+    });
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        const anchor = trigger.current;
+        const floating = layer.current;
+        if (anchor === null || floating === null)
+            return undefined;
+        let live = true;
+        void positionOf(anchor, floating, { placement: (props.side ?? 'top') }).then((position) => {
+            if (live)
+                setAt({ x: position.x, y: position.y });
+        });
+        return () => {
+            live = false;
+        };
+    }, [open, props.side]);
+    return {
+        on: {
+            ref: trigger,
+            onPointerEnter: () => setOpen(true),
+            onPointerLeave: () => setOpen(false),
+            onFocus: () => setOpen(true),
+            onBlur: () => setOpen(false),
+        },
+        trigger,
+        layer,
+        open,
+        at,
+        show: setOpen,
+    };
+}
+export function showing(_props, kept) {
+    return kept.open;
+}
+export function bubble(props, kept) {
+    return { ref: kept.layer, role: 'tooltip', 'data-side': props.side ?? 'top' };
+}
+export function measured(_props, kept) {
+    return kept.at === null ? {} : { x: `${String(kept.at.x)}px`, y: `${String(kept.at.y)}px` };
+}

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

@@ -0,0 +1,12 @@
+import { type FontRoleId } from '../fonts.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 input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Value: Element<'Value', ValueProps>;

package/dist/ui/elements/value.js

@@ -0,0 +1,9 @@
+'use client';
+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));
+}, 'e-value');

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

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+import type { Surface } from '../door.ts';
+import type { ValueProps } from './value.tsx';
+export declare function shows(props: ValueProps, surface: Surface): ReactNode;

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

@@ -0,0 +1,4 @@
+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);
+}