@prestack/thread-ui 0.0.1

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

@@ -0,0 +1,50 @@
+import { type ReactNode } from 'react';
+import type { MessageKey } from '../content.tsx';
+import { type Position } from '../positioning.ts';
+import type { MenuProps } from './menu.tsx';
+export interface MenuItem {
+    readonly labelKey: MessageKey;
+    readonly dispatch?: string;
+    readonly navigateTo?: string;
+    readonly icon?: string;
+    readonly disabled?: boolean;
+}
+export { Presented } from '../presented.tsx';
+import type { PresentedProps } from '../presented.tsx';
+export declare function MenuRow({ item, onDone, }: {
+    readonly item: MenuItem;
+    readonly onDone: () => void;
+}): ReactNode;
+type Kept = {
+    readonly trigger: React.RefObject<HTMLButtonElement | null>;
+    readonly layer: React.RefObject<HTMLDivElement | null>;
+    readonly open: boolean;
+    readonly at: Position | null;
+    readonly names: {
+        readonly trigger: string;
+        readonly menu: string;
+    };
+    readonly show: (to: boolean | ((was: boolean) => boolean)) => void;
+};
+export declare function uses(props: MenuProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
+    readonly trigger: React.RefObject<HTMLButtonElement | null>;
+    readonly layer: React.RefObject<HTMLDivElement | null>;
+    readonly open: boolean;
+    readonly at: Position | null;
+    readonly names: {
+        readonly trigger: string;
+        readonly menu: string;
+    };
+    readonly show: (to: boolean | ((was: boolean) => boolean)) => void;
+};
+export declare function opener(_props: MenuProps, kept: Kept): Readonly<Record<string, unknown>>;
+export declare function portal(_props: MenuProps, kept: Kept): PresentedProps;
+export declare function listing(props: MenuProps, kept: Kept): Readonly<Record<string, unknown>>;
+export declare function row(_props: MenuProps, kept: Kept, item: Record<string, unknown>, _at: number): {
+    readonly item: MenuItem;
+    readonly onDone: () => void;
+};
+export declare function measured(_props: MenuProps, kept: Kept): Readonly<Record<string, string | number>>;

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

@@ -0,0 +1,100 @@
+'use client';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { positionOf } from "../positioning.js";
+import { ITEM_ATTR, useRovingFocus } from "../roving-focus.js";
+import { pressOf, usePress, useSurface } from "../wrappers.js";
+import { drawn } from "./glyph.works.js";
+export { Presented } from "../presented.js";
+const SIDE = 'bottom';
+export function MenuRow({ item, onDone, }) {
+    const { text } = useSurface({});
+    const press = usePress(pressOf(item), { element: 'Menu', name: item.labelKey });
+    return (_jsxs("button", { [ITEM_ATTR]: '', type: "button", role: "menuitem", disabled: item.disabled === true, onClick: () => {
+            press?.();
+            onDone();
+        }, children: [item.icon === undefined ? null : drawn(item.icon, { 'aria-hidden': true }), text(item.labelKey)] }));
+}
+export function uses(props) {
+    const trigger = useRef(null);
+    const layer = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [at, setAt] = useState(null);
+    const base = useId();
+    useRovingFocus(layer, { orientation: 'vertical', wrap: true, active: open });
+    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 ?? SIDE),
+        }).then((position) => {
+            if (live)
+                setAt(position);
+        });
+        return () => {
+            live = false;
+        };
+    }, [open, props.side]);
+    return {
+        trigger,
+        layer,
+        open,
+        at,
+        names: { trigger: `${base}-trigger`, menu: `${base}-menu` },
+        show: setOpen,
+    };
+}
+export function opener(_props, kept) {
+    return {
+        ref: kept.trigger,
+        type: 'button',
+        id: kept.names.trigger,
+        'aria-haspopup': 'menu',
+        'aria-expanded': kept.open,
+        ...(kept.open ? { 'aria-controls': kept.names.menu } : {}),
+        onPointerDown: (event) => {
+            if (event.button > 0 || event.ctrlKey)
+                return;
+            event.currentTarget.focus();
+            event.preventDefault();
+            kept.show((was) => !was);
+        },
+        onKeyDown: (event) => {
+            if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'ArrowDown')
+                return;
+            event.preventDefault();
+            if (event.key === 'ArrowDown')
+                kept.show(true);
+            else
+                kept.show((was) => !was);
+        },
+    };
+}
+export function portal(_props, kept) {
+    return { presentation: 'popover', open: kept.open, onDismiss: () => kept.show(false), children: null };
+}
+export function listing(props, kept) {
+    return {
+        ref: kept.layer,
+        id: kept.names.menu,
+        role: 'menu',
+        'aria-labelledby': kept.names.trigger,
+        'data-side': kept.at?.placement ?? props.side ?? SIDE,
+        onKeyDown: (event) => {
+            if (event.key !== 'Tab')
+                return;
+            kept.show(false);
+        },
+    };
+}
+export function row(_props, kept, item, _at) {
+    return { item: item, onDone: () => kept.show(false) };
+}
+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/money.d.ts

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

package/dist/ui/elements/money.js

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

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

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

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

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

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

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

package/dist/ui/elements/pagination.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 { step, steps } from "./pagination.works.js";
+export const Pagination = element('Pagination', (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.pagination'), children: _jsx(Each, { rows: steps(props), by: 'id', children: (each0, at) => (_jsx(Link.linkInline, { ...step(props, each0, at) })) }) }));
+}, 'e-pagination');

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

@@ -0,0 +1,5 @@
+import type { Row } from '../charts.tsx';
+import type { LinkProps } from './link.tsx';
+import type { PaginationProps } from './pagination.tsx';
+export declare function steps(props: PaginationProps): readonly Row[];
+export declare function step(_props: PaginationProps, row: Row, _at: number): LinkProps;

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

@@ -0,0 +1,15 @@
+export function steps(props) {
+    const known = new Map(props.map.screens.map((one) => [one.id, one]));
+    const walk = props.sequence.filter((id) => known.has(id));
+    const at = walk.indexOf(props.current);
+    if (at === -1)
+        return [];
+    const either = [
+        ...(at > 0 ? [{ id: walk[at - 1], way: 'previous' }] : []),
+        ...(at < walk.length - 1 ? [{ id: walk[at + 1], way: 'next' }] : []),
+    ];
+    return either.map((one) => ({ ...one, nameKey: known.get(one.id)?.nameKey ?? `nav.${one.way}` }));
+}
+export function step(_props, row, _at) {
+    return { navigateTo: String(row['id']), labelKey: String(row['nameKey']), is: 'label' };
+}

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

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

package/dist/ui/elements/progress.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { element, useSurface } from "../wrappers.js";
+import { measured } from "./progress.works.js";
+export const Progress = element('Progress', (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 }) },
+        measures: measured(props), });
+    return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, role: "progressbar", "aria-valuenow": Number(measured(props).fraction), "aria-valuemin": 0, "aria-valuemax": 100, style: surface.measures, "aria-label": surface.text(props.labelKey), children: _jsx("span", { className: "e-progress-bar" }) }));
+}, 'e-progress');

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

@@ -0,0 +1,2 @@
+import type { ProgressProps } from './progress.tsx';
+export declare function measured(props: ProgressProps): Readonly<Record<string, string | number>>;

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

@@ -0,0 +1,6 @@
+export function measured(props) {
+    const target = props.target ?? 0;
+    const part = target <= 0 ? 0 : Math.min(1, Math.max(0, (props.value ?? 0) / target));
+    const whole = Math.round(part * 100);
+    return { fraction: whole, span: `${String(whole)}%` };
+}

package/dist/ui/elements/radio-group.d.ts

@@ -0,0 +1,15 @@
+import type { MessageKey } from '../content.tsx';
+import type { Row } from '../charts.tsx';
+import { type Element } from '../wrappers.tsx';
+export interface RadioGroupProps {
+    readonly name: string;
+    readonly labelKey: MessageKey;
+    readonly options: readonly Row[];
+    readonly chosen?: string;
+    readonly onValue?: (said: string) => void;
+    readonly disabled?: boolean;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const RadioGroup: Element<'RadioGroup', RadioGroupProps>;

package/dist/ui/elements/radio-group.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, option, uses } from "./radio-group.works.js";
+export const RadioGroup = element('RadioGroup', (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: "radiogroup", "aria-label": surface.text(props.labelKey), children: _jsx(Each, { rows: props.options, by: 'value', children: (each0, at) => (_jsxs("label", { children: [_jsx("input", { ...option(props, kept, each0, at), type: "radio", disabled: surface.marked('disabled') }), _jsx("span", { children: shown(props, each0, surface, kept).caption })] })) }) }));
+}, 'e-radio-group');

package/dist/ui/elements/radio-group.works.d.ts

@@ -0,0 +1,10 @@
+import type { Row } from '../charts.tsx';
+import type { Surface } from '../door.ts';
+import type { RadioGroupProps } from './radio-group.tsx';
+export declare function uses(props: RadioGroupProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on: Readonly<Record<string, unknown>>;
+};
+export declare function option(props: RadioGroupProps, _kept: unknown, row: Row, _at: number): Readonly<Record<string, unknown>>;
+export declare function shown(_props: RadioGroupProps, row: Row, surface: Surface, _kept?: unknown): Readonly<Record<string, string>>;

package/dist/ui/elements/radio-group.works.js

@@ -0,0 +1,22 @@
+import { useRef } from 'react';
+import { ITEM_ATTR, useRovingFocus } from "../roving-focus.js";
+export function uses(props) {
+    const group = useRef(null);
+    useRovingFocus(group, { orientation: 'vertical' });
+    return {
+        ...(props.disabled === true ? { holds: ['disabled'] } : {}),
+        on: { ref: group },
+    };
+}
+export function option(props, _kept, row, _at) {
+    return {
+        ...{ [ITEM_ATTR]: '' },
+        name: props.name,
+        value: String(row['value']),
+        checked: props.chosen === row['value'],
+        onChange: () => props.onValue?.(String(row['value'])),
+    };
+}
+export function shown(_props, row, surface, _kept) {
+    return { caption: surface.text(String(row['labelKey'])) };
+}

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

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

package/dist/ui/elements/row.js

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

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

package/dist/ui/elements/scatter.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { element, useSurface } from "../wrappers.js";
+import { point, uses } from "./scatter.works.js";
+export const Scatter = element('Scatter', (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: props.rows.map((each0, at) => (_jsx("circle", { ...point(props, kept, each0, at) }, at))) }));
+}, 'e-scatter');

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

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

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

@@ -0,0 +1,24 @@
+import { num, useRamp } from "../charts.js";
+const SIDE = 100;
+export function uses(props) {
+    const ramp = useRamp(1);
+    return {
+        ...(props.rows.length === 0 ? { holds: ['empty'] } : {}),
+        on: { viewBox: `0 0 ${String(SIDE)} ${String(SIDE)}` },
+        ramp,
+    };
+}
+export function point(props, kept, row, _at) {
+    const xs = props.rows.map((one) => num(one, props.x));
+    const ys = props.rows.map((one) => num(one, props.y));
+    const leastX = Math.min(...xs);
+    const leastY = Math.min(...ys);
+    const spanX = Math.max(...xs) - leastX || 1;
+    const spanY = Math.max(...ys) - leastY || 1;
+    return {
+        cx: (((num(row, props.x) - leastX) / spanX) * SIDE).toFixed(2),
+        cy: (SIDE - ((num(row, props.y) - leastY) / spanY) * SIDE).toFixed(2),
+        r: 2,
+        fill: kept.ramp[0] ?? 'currentColor',
+    };
+}

package/dist/ui/elements/select.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 SelectProps {
+    readonly labelKey: MessageKey;
+    readonly options: readonly Row[];
+    readonly value?: string;
+    readonly onValue?: (said: string) => void;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Select: Element<'Select', SelectProps>;

package/dist/ui/elements/select.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 { Each } from "./each.js";
+import { does } from "./select.works.js";
+export const Select = element('Select', (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("select", { disabled: surface.marked('disabled'), value: props.value ?? '', onChange: (event) => does(props).chose(event.target.value), children: _jsx(Each, { rows: props.options, by: props.value, children: (each0, at) => (_jsx("option", { value: String(each0.value), children: surface.text(String(each0.labelKey)) })) }) })] }));
+}, 'e-select');

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

@@ -0,0 +1,4 @@
+import type { SelectProps } from './select.tsx';
+export declare function does(props: SelectProps): {
+    readonly chose: (value: string) => void;
+};

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

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

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

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

package/dist/ui/elements/separator.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 Separator = element('Separator', (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("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, role: "separator", "aria-orientation": props.orientation === 'vertical' ? 'vertical' : 'horizontal', children: props.labelKey === undefined ? null : _jsx("span", { children: surface.text(props.labelKey) }) }));
+}, 'e-separator');

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

@@ -0,0 +1,8 @@
+import { type Element } from '../wrappers.tsx';
+export interface SkeletonProps {
+    readonly lines?: number;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const Skeleton: Element<'Skeleton', SkeletonProps>;

package/dist/ui/elements/skeleton.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 Skeleton = element('Skeleton', (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("span", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, "aria-hidden": "true", children: Array.from({ length: Math.max(1, props.lines ?? 1) }, (_, at) => (_jsx("span", {}))) }));
+}, 'e-skeleton');

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

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

package/dist/ui/elements/slider.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { element, useSurface } from "../wrappers.js";
+import { does } from "./slider.works.js";
+export const Slider = element('Slider', (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("input", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, type: "range", disabled: surface.marked('disabled'), value: props.value ?? 0, onChange: (event) => does(props).moved(Number(event.target.value)), min: props.min, max: props.max, step: props.step ?? 1, "aria-label": surface.text(props.labelKey) }));
+}, 'e-slider');

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

@@ -0,0 +1,4 @@
+import type { SliderProps } from './slider.tsx';
+export declare function does(props: SliderProps): {
+    readonly moved: (to: number) => void;
+};

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

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

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

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

package/dist/ui/elements/sparkline.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { roleClass } from "../fonts.js";
+import { element, useSurface } from "../wrappers.js";
+import { drawing, uses } from "./sparkline.works.js";
+export const Sparkline = element('Sparkline', (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 ?? {}), "aria-hidden": "true", children: _jsx("polyline", { ...drawing(props, kept) }) }));
+}, 'e-sparkline');

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

@@ -0,0 +1,10 @@
+import type { SparklineProps } from './sparkline.tsx';
+export declare function uses(props: SparklineProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
+    readonly ramp: readonly string[];
+};
+export declare function drawing(props: SparklineProps, kept: {
+    readonly ramp: readonly string[];
+}): Readonly<Record<string, string | number>>;

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

@@ -0,0 +1,19 @@
+import { num, polyline, useRamp } from "../charts.js";
+const WIDE = 100;
+const TALL = 24;
+export function uses(props) {
+    const ramp = useRamp(1);
+    return {
+        ...(props.rows.length === 0 ? { holds: ['empty'] } : {}),
+        on: { viewBox: `0 0 ${String(WIDE)} ${String(TALL)}` },
+        ramp,
+    };
+}
+export function drawing(props, kept) {
+    return {
+        points: polyline(props.rows.map((one) => num(one, props.value)), WIDE, TALL),
+        fill: 'none',
+        stroke: kept.ramp[0] ?? 'currentColor',
+        strokeWidth: 2,
+    };
+}

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

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