@prestack/thread-ui 0.0.1

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

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import type { Surface } from '../door.ts';
+import type { FieldProps } from './field.tsx';
+export declare function uses(props: FieldProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
+    readonly wrong: string | null;
+    readonly said: (to: string | null) => void;
+};
+export declare function entry(props: FieldProps, kept: {
+    readonly wrong: string | null;
+    readonly said: (to: string | null) => void;
+}): Readonly<Record<string, unknown>>;
+export declare function shown(_props: FieldProps, surface: Surface, kept: {
+    readonly wrong: string | null;
+}): Readonly<Record<string, ReactNode>>;

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

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { acceptsKeystroke, applyMask, entryConstraints, evaluateMoney, runValidator } from "../validators.js";
+export function uses(props) {
+    const [wrong, said] = useState(null);
+    return { ...(props.disabled === true ? { holds: ['disabled'] } : {}), wrong, said };
+}
+export function entry(props, kept) {
+    const rules = entryConstraints(props.validator, props.context ?? {});
+    return {
+        name: props.name,
+        ...(rules.secret === true ? { type: 'password' } : {}),
+        ...(props.autocomplete ?? rules.autocomplete === undefined
+            ? {}
+            : { autoComplete: props.autocomplete ?? rules.autocomplete }),
+        ...(rules.keyboard === 'text' ? {} : { inputMode: rules.keyboard }),
+        ...(rules.maxChars === undefined ? {} : { maxLength: rules.maxChars }),
+        value: props.value ?? '',
+        ...(kept.wrong === null ? {} : { 'aria-invalid': true }),
+        onChange: (event) => {
+            let kept_ = '';
+            for (const ch of event.target.value) {
+                if (acceptsKeystroke(props.validator, kept_, ch))
+                    kept_ += ch;
+            }
+            props.onValue?.(applyMask(props.validator, kept_));
+        },
+        onBlur: () => {
+            const text = props.value ?? '';
+            let judged = text;
+            if (rules.entry === 'calculator') {
+                const currency = props.context?.['currency'];
+                const resolved = typeof currency === 'string' ? evaluateMoney(text, currency) : undefined;
+                if (resolved !== undefined) {
+                    judged = { amount: resolved.amount, currency };
+                    props.onValue?.(String(resolved.amount));
+                }
+            }
+            const result = runValidator(props.validator, judged, props.context ?? {});
+            kept.said(result.ok ? null : result.errorKey);
+        },
+    };
+}
+export function shown(_props, surface, kept) {
+    return { fault: kept.wrong === null ? null : surface.text(kept.wrong) };
+}

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

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

package/dist/ui/elements/funnel.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 "./funnel.works.js";
+export const Funnel = element('Funnel', (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-funnel');

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

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

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

@@ -0,0 +1,23 @@
+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 top = num(props.rows[0], props.value) || 1;
+    const before = at === 0 ? null : num(props.rows[at - 1], props.value);
+    const drop = before === null || before === 0 ? null : 1 - num(row, props.value) / before;
+    return {
+        series: seriesColour(kept.ramp, at),
+        fraction: `${((num(row, props.value) / top) * 100).toFixed(1)}%`,
+        ...(drop === null ? {} : { drop: `${(drop * 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/gauge.d.ts

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

package/dist/ui/elements/gauge.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 { track, needle, uses } from "./gauge.works.js";
+export const Gauge = element('Gauge', (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("svg", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), role: "img", "aria-label": surface.text(props.labelKey), children: [_jsx("path", { ...track(props, kept) }), _jsx("path", { ...needle(props, kept) })] }));
+}, 'e-gauge');

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

@@ -0,0 +1,11 @@
+import type { GaugeProps } from './gauge.tsx';
+export declare function uses(_props: GaugeProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
+    readonly ramp: readonly string[];
+};
+export declare function track(_props: GaugeProps, _kept: unknown): Readonly<Record<string, string | number>>;
+export declare function needle(props: GaugeProps, kept: {
+    readonly ramp: readonly string[];
+}): Readonly<Record<string, string | number>>;

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

@@ -0,0 +1,31 @@
+import { useRamp } from "../charts.js";
+const LEFT = 10;
+const RIGHT = 90;
+const MIDDLE = 50;
+const RADIUS = 40;
+export function uses(_props) {
+    return { on: { viewBox: `0 0 100 56` }, ramp: useRamp(1) };
+}
+export function track(_props, _kept) {
+    return {
+        d: `M ${String(LEFT)} ${String(MIDDLE)} A ${String(RADIUS)} ${String(RADIUS)} 0 0 1 ${String(RIGHT)} ${String(MIDDLE)}`,
+        fill: 'none',
+        stroke: 'currentColor',
+        strokeOpacity: 0.15,
+        strokeWidth: 8,
+    };
+}
+export function needle(props, kept) {
+    const least = props.min ?? 0;
+    const most = props.max ?? 0;
+    const span = most - least;
+    const part = span <= 0 ? 0 : Math.min(1, Math.max(0, ((props.value ?? 0) - least) / span));
+    const angle = Math.PI * (1 - part);
+    return {
+        d: `M ${String(LEFT)} ${String(MIDDLE)} A ${String(RADIUS)} ${String(RADIUS)} 0 0 1 ` +
+            `${(MIDDLE + RADIUS * Math.cos(angle)).toFixed(2)} ${(MIDDLE - RADIUS * Math.sin(angle)).toFixed(2)}`,
+        fill: 'none',
+        stroke: kept.ramp[0] ?? 'currentColor',
+        strokeWidth: 8,
+    };
+}

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

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

package/dist/ui/elements/glyph.js

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

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

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+import type { Surface } from '../door.ts';
+import type { GlyphProps } from './glyph.tsx';
+export declare function drawn(name: string, semantics: Readonly<Record<string, unknown>>, className?: string): ReactNode;
+export declare function shows(props: GlyphProps, surface: Surface): ReactNode;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { drawnFor, iconSize, installedSet, strokeFor } from "../icons.js";
+export function drawn(name, semantics, className) {
+    const Symbol = drawnFor(name);
+    const set = installedSet();
+    const stroke = set === undefined ? undefined : strokeFor(set);
+    return (_jsx(Symbol, { size: iconSize(), ...(className === undefined ? {} : { className }), ...(stroke === undefined ? {} : { strokeWidth: stroke }), ...semantics }));
+}
+export function shows(props, surface) {
+    return drawn(props.name, {
+        ...surface.marks,
+        ...(props.labelKey === undefined
+            ? { 'aria-hidden': true }
+            : { role: 'img', 'aria-label': surface.text(props.labelKey) }),
+    }, surface.className);
+}

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

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

package/dist/ui/elements/grid.js

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

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

package/dist/ui/elements/heatmap.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } 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 { sized, uses } from "./heatmap.works.js";
+export const Heatmap = element('Heatmap', (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) => (_jsx("span", { style: marking(sized(props, kept, each0, at)) })) }) }));
+}, 'e-heatmap');

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

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

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

@@ -0,0 +1,11 @@
+import { num, useRamp } from "../charts.js";
+export function uses(props) {
+    const ramp = useRamp(1);
+    return { ...(props.rows.length === 0 ? { holds: ['empty'] } : {}), ramp };
+}
+export function sized(props, kept, row, _at) {
+    const readings = props.rows.map((one) => (props.value === undefined ? 1 : num(one, props.value)));
+    const most = Math.max(...readings, 0) || 1;
+    const here = props.value === undefined ? 1 : num(row, props.value);
+    return { series: kept.ramp[0] ?? '', share: Math.max(0.08, here / most) };
+}

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { Subject } from '../drag.ts';
+import { type Element } from '../wrappers.tsx';
+export interface HitBoxProps {
+    readonly children: ReactNode;
+    readonly gesture: string;
+    readonly tuning?: Readonly<Record<string, number>>;
+    readonly axis?: string;
+    readonly grabs?: Subject | readonly Subject[];
+    readonly accepts: readonly string[];
+    readonly collects?: Subject | readonly Subject[];
+    readonly dwell?: number;
+    readonly moves?: boolean;
+    readonly onDrop?: () => void;
+    readonly dispatch?: string;
+    readonly input?: Readonly<Record<string, unknown>>;
+    readonly invokeOn?: 'press' | 'shown';
+}
+export declare const HitBox: Element<'HitBox', HitBoxProps>;

package/dist/ui/elements/hit-box.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 { shown, uses, wires } from "./hit-box.works.js";
+export const HitBox = element('HitBox', (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 ?? []),
+        ],
+        ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
+    const wired = wires(props, kept, surface);
+    return (_jsxs("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), ...(wired.on ?? {}), children: [props.children, _jsx("div", { className: "e-hit-box-carried", children: shown(props, surface, kept, wired).carried })] }));
+}, 'e-hit-box');

package/dist/ui/elements/hit-box.works.d.ts

@@ -0,0 +1,87 @@
+import { type GesturePhase } from '../signals.ts';
+import { type PointerEvent, type ReactNode } from 'react';
+import { type DragStatus, type Subject } from '../drag.ts';
+import { useSurface } from '../wrappers.tsx';
+import type { HitBoxProps } from './hit-box.tsx';
+export type Axis = 'x' | 'y' | 'both';
+interface Tracked {
+    readonly id: number;
+    x: number;
+    y: number;
+    readonly startX: number;
+    readonly startY: number;
+    readonly startT: number;
+    down: boolean;
+}
+export declare function uses(props: HitBoxProps): {
+    on: {};
+    pull: {
+        readonly band?: number;
+        readonly speed?: number;
+    } | undefined;
+    animates: boolean;
+    holds: ("scrolling" | "disabled" | "loading" | "empty" | "spinner" | "hover" | "active" | "focus" | "invalid" | "leaving" | "arriving" | "carrying" | "draggedOver" | "refusing" | "tapped" | "doubleTapped" | "pressing" | "dragging" | "swiping" | "pinching" | "rotating")[];
+    id: string;
+    claimed: import("../signals.ts").GestureEntry;
+    down: boolean;
+    setDown: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    phase: GesturePhase;
+    setPhase: import("react").Dispatch<import("react").SetStateAction<GesturePhase>>;
+    produced: Readonly<Record<string, number>>;
+    setProduced: import("react").Dispatch<import("react").SetStateAction<Readonly<Record<string, number>>>>;
+    released: import("react").RefObject<number>;
+    took: import("react").RefObject<{
+        readonly width: number;
+        readonly height: number;
+        readonly gripX: number;
+        readonly gripY: number;
+    } | null>;
+    pointer: {
+        readonly x: number;
+        readonly y: number;
+    } | null;
+    setPointer: import("react").Dispatch<import("react").SetStateAction<{
+        readonly x: number;
+        readonly y: number;
+    } | null>>;
+    settling: boolean;
+    setSettling: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    speed: import("react").RefObject<number>;
+    moved: import("react").RefObject<number>;
+    lean: number;
+    setLean: import("react").Dispatch<import("react").SetStateAction<number>>;
+    leanSpeed: import("react").RefObject<number>;
+    lastTick: import("react").RefObject<number>;
+    grabbed: import("react").RefObject<Subject | readonly Subject[] | undefined>;
+    grabsKey: string;
+    tuned: import("react").RefObject<Readonly<Record<string, number>> | undefined>;
+    tuningKey: string;
+    node: import("react").RefObject<HTMLDivElement | null>;
+    clockNow: import("react").RefObject<number>;
+    wants: boolean;
+    synthesised: import("react").RefObject<number | null>;
+    tracked: import("react").RefObject<Map<number, Tracked>>;
+    at: import("react").RefObject<{
+        x: number;
+        y: number;
+    }>;
+    lastFrame: import("react").RefObject<number>;
+    key: string;
+    status: DragStatus;
+    carrying: boolean;
+    raises: readonly import("../signals.ts").SignalEntry[];
+};
+export declare function wires(props: HitBoxProps, kept: ReturnType<typeof uses>, surface: ReturnType<typeof useSurface>): {
+    on: {
+        ref: import("react").RefObject<HTMLDivElement | null>;
+        'data-hitbox': string;
+        style: Record<string, string | number>;
+        onPointerDown: (e: PointerEvent<HTMLDivElement>) => void;
+        onPointerMove: (e: PointerEvent<HTMLDivElement>) => void;
+        onPointerUp: (e: PointerEvent<HTMLDivElement>) => void;
+        onPointerCancel: (e: PointerEvent<HTMLDivElement>) => void;
+    };
+    layer: import("react").JSX.Element | null;
+};
+export declare function shown(_props: HitBoxProps, _surface: ReturnType<typeof useSurface>, _kept: ReturnType<typeof uses>, wired: ReturnType<typeof wires>): Readonly<Record<string, ReactNode>>;
+export {};