@prestack/thread-ui 0.0.1

package/dist/ui/door.d.ts

@@ -0,0 +1,40 @@
+export declare const PRESENTATIONS: readonly ["page", "sheet", "popover", "overlay", "toast"];
+export type Presentation = (typeof PRESENTATIONS)[number];
+export declare const PRESENTATION_BEHAVIOUR: Readonly<Record<Presentation, {
+    readonly portal: boolean;
+    readonly backdrop: boolean;
+    readonly trapFocus: boolean;
+    readonly returnFocus: boolean;
+    readonly dismissOnEscape: boolean;
+    readonly dismissOnOutside: boolean;
+}>>;
+export interface ClockSubscriber {
+    (t: number): void;
+}
+export declare class Ticker {
+    #private;
+    constructor(every?: (fn: () => void) => () => void);
+    get running(): boolean;
+    subscribe(fn: () => void): () => void;
+    tick(): void;
+}
+export declare class Clock {
+    #private;
+    constructor(schedule?: (fn: () => void) => void);
+    get ticks(): number;
+    get running(): boolean;
+    subscribe(fn: ClockSubscriber): () => void;
+    setVisible(visible: boolean): void;
+    tick(dt: number): void;
+}
+export interface Surface {
+    readonly className?: string;
+    readonly holds: readonly string[];
+    readonly marks: Readonly<Record<string, boolean>>;
+    readonly invokes: Readonly<Record<string, unknown>>;
+    readonly marked: (signal: string) => boolean;
+    readonly text: (key: string, params?: Readonly<Record<string, unknown>>) => string;
+    readonly a11y: Readonly<Record<string, string | boolean | number>>;
+    readonly measures: Readonly<Record<string, string | number>>;
+    readonly t: number;
+}

package/dist/ui/door.js

@@ -0,0 +1,100 @@
+export const PRESENTATIONS = ['page', 'sheet', 'popover', 'overlay', 'toast'];
+export const PRESENTATION_BEHAVIOUR = {
+    page: { portal: false, backdrop: false, trapFocus: false, returnFocus: false, dismissOnEscape: false, dismissOnOutside: false },
+    sheet: { portal: true, backdrop: true, trapFocus: true, returnFocus: true, dismissOnEscape: true, dismissOnOutside: true },
+    overlay: { portal: true, backdrop: true, trapFocus: true, returnFocus: true, dismissOnEscape: true, dismissOnOutside: true },
+    popover: { portal: true, backdrop: false, trapFocus: false, returnFocus: true, dismissOnEscape: true, dismissOnOutside: true },
+    toast: { portal: true, backdrop: false, trapFocus: false, returnFocus: false, dismissOnEscape: false, dismissOnOutside: false },
+};
+export class Ticker {
+    #subscribers = new Set();
+    #stop;
+    #every;
+    constructor(every) {
+        this.#every =
+            every ??
+                ((fn) => {
+                    const id = setInterval(fn, 1000);
+                    return () => clearInterval(id);
+                });
+    }
+    get running() {
+        return this.#stop !== undefined;
+    }
+    subscribe(fn) {
+        this.#subscribers.add(fn);
+        if (this.#stop === undefined)
+            this.#stop = this.#every(() => this.tick());
+        return () => {
+            this.#subscribers.delete(fn);
+            if (this.#subscribers.size === 0) {
+                this.#stop?.();
+                this.#stop = undefined;
+            }
+        };
+    }
+    tick() {
+        for (const fn of this.#subscribers)
+            fn();
+    }
+}
+export class Clock {
+    #subscribers = new Set();
+    #visible = true;
+    #running = false;
+    #t = 0;
+    #ticks = 0;
+    #schedule;
+    constructor(schedule) {
+        this.#schedule =
+            schedule ??
+                ((fn) => {
+                    if (typeof requestAnimationFrame === 'function')
+                        requestAnimationFrame(() => fn());
+                    else
+                        setTimeout(fn, 16);
+                });
+    }
+    get ticks() {
+        return this.#ticks;
+    }
+    get running() {
+        return this.#running;
+    }
+    subscribe(fn) {
+        this.#subscribers.add(fn);
+        this.#maybeStart();
+        return () => {
+            this.#subscribers.delete(fn);
+            if (this.#subscribers.size === 0)
+                this.#running = false;
+        };
+    }
+    setVisible(visible) {
+        this.#visible = visible;
+        if (visible)
+            this.#maybeStart();
+        else
+            this.#running = false;
+    }
+    tick(dt) {
+        if (!this.#visible)
+            return;
+        this.#t += dt;
+        this.#ticks += 1;
+        for (const fn of this.#subscribers)
+            fn(this.#t);
+    }
+    #maybeStart() {
+        if (this.#running || !this.#visible || this.#subscribers.size === 0)
+            return;
+        this.#running = true;
+        const loop = () => {
+            if (!this.#running)
+                return;
+            this.tick(1 / 60);
+            this.#schedule(loop);
+        };
+        this.#schedule(loop);
+    }
+}

package/dist/ui/drag.d.ts

@@ -0,0 +1,82 @@
+export declare const EDGE_SCROLL_DEFAULTS: {
+    readonly band: 48;
+    readonly speed: 900;
+};
+export interface Subject {
+    readonly kind: string;
+    readonly id: string;
+}
+export interface DragSession {
+    readonly gesture: string;
+    readonly subject: readonly Subject[];
+    readonly from: string;
+    readonly x: number;
+    readonly y: number;
+    readonly startedAt: number;
+    readonly at: number;
+    readonly over?: string;
+    readonly overSince: number;
+}
+export declare function dragSession(): DragSession | undefined;
+export declare function subscribeDrag(listener: () => void): () => void;
+export type DragStatus = 'idle' | 'carrying' | 'over' | 'refusing' | 'elsewhere';
+export declare function dragStatusOf(hitBox: string, accepts: readonly string[] | undefined): DragStatus;
+export interface Scroller {
+    readonly top: number;
+    readonly bottom: number;
+    readonly left: number;
+    readonly right: number;
+    readonly scrollsVertically: boolean;
+    readonly scrollsHorizontally: boolean;
+    readonly scrollBy: (dx: number, dy: number) => void;
+}
+export interface Layout {
+    readonly hitBoxesAt: (x: number, y: number) => readonly string[];
+    readonly scrollersAt: (x: number, y: number) => readonly Scroller[];
+}
+export declare const DOM_LAYOUT: Layout;
+export declare function setLayout(layout: Layout): () => void;
+export declare function currentLayout(): Layout;
+export declare function claimGesture(hitBox: string): boolean;
+export declare function releaseGesture(hitBox: string): void;
+export declare function gestureClaim(): string | undefined;
+export interface DropTarget {
+    readonly id: string;
+    readonly accepts?: readonly string[];
+    readonly collects?: () => Subject | readonly Subject[];
+    readonly dwell?: number;
+    readonly onDrop?: (session: DragSession) => void;
+}
+export declare function registerTarget(target: DropTarget): () => void;
+export declare function targetFor(id: string): DropTarget | undefined;
+export declare function innermostTarget(stack: readonly string[], session?: DragSession | undefined): DropTarget | undefined;
+export interface BeginDrag {
+    readonly gesture: string;
+    readonly subject: Subject | readonly Subject[];
+    readonly from: string;
+    readonly x: number;
+    readonly y: number;
+    readonly t: number;
+}
+export declare function beginDrag(input: BeginDrag): DragSession;
+export interface MoveDrag {
+    readonly x: number;
+    readonly y: number;
+    readonly over?: string;
+    readonly t: number;
+}
+export declare function moveDrag(input: MoveDrag): DragSession | undefined;
+export declare function collect(more: Subject | readonly Subject[]): DragSession | undefined;
+export declare function endDrag(): DragSession | undefined;
+export declare function resetDrag(): void;
+export declare function dwell(session?: DragSession | undefined): number;
+export declare function accepted(kinds: readonly string[] | undefined, session?: DragSession | undefined): boolean;
+export interface EdgeScrollTuning {
+    readonly band?: number;
+    readonly speed?: number;
+}
+export declare function edgeScroll(pointer: number, start: number, end: number, dt: number, { band, speed }?: EdgeScrollTuning): number;
+export declare function pullEdges(x: number, y: number, dt: number, tuning?: EdgeScrollTuning, layout?: Layout): {
+    dx: number;
+    dy: number;
+};

package/dist/ui/drag.js

@@ -0,0 +1,212 @@
+export const EDGE_SCROLL_DEFAULTS = {
+    band: 48,
+    speed: 900,
+};
+let SESSION;
+export function dragSession() {
+    return SESSION;
+}
+const LISTENERS = new Set();
+export function subscribeDrag(listener) {
+    LISTENERS.add(listener);
+    return () => {
+        LISTENERS.delete(listener);
+    };
+}
+function announce() {
+    for (const listener of LISTENERS)
+        listener();
+}
+export function dragStatusOf(hitBox, accepts) {
+    const session = SESSION;
+    if (session === undefined)
+        return 'idle';
+    if (session.from === hitBox)
+        return 'carrying';
+    if (session.over !== hitBox)
+        return 'elsewhere';
+    return accepted(accepts, session) ? 'over' : 'refusing';
+}
+export const DOM_LAYOUT = {
+    hitBoxesAt: (x, y) => {
+        if (typeof document === 'undefined' || typeof document.elementsFromPoint !== 'function')
+            return [];
+        const found = [];
+        for (const el of document.elementsFromPoint(x, y)) {
+            const id = el.getAttribute('data-hitbox');
+            if (id !== null)
+                found.push(id);
+        }
+        return found;
+    },
+    scrollersAt: (x, y) => {
+        if (typeof document === 'undefined' || typeof document.elementsFromPoint !== 'function')
+            return [];
+        const found = [];
+        for (const el of document.elementsFromPoint(x, y)) {
+            if (!(el instanceof HTMLElement))
+                continue;
+            const box = el.getBoundingClientRect();
+            found.push({
+                top: box.top,
+                bottom: box.bottom,
+                left: box.left,
+                right: box.right,
+                scrollsVertically: el.scrollHeight > el.clientHeight,
+                scrollsHorizontally: el.scrollWidth > el.clientWidth,
+                scrollBy: (dx, dy) => {
+                    el.scrollLeft += dx;
+                    el.scrollTop += dy;
+                },
+            });
+        }
+        return found;
+    },
+};
+let LAYOUT = DOM_LAYOUT;
+export function setLayout(layout) {
+    const previous = LAYOUT;
+    LAYOUT = layout;
+    return () => {
+        LAYOUT = previous;
+    };
+}
+export function currentLayout() {
+    return LAYOUT;
+}
+let CLAIM;
+export function claimGesture(hitBox) {
+    if (CLAIM !== undefined && CLAIM !== hitBox)
+        return false;
+    CLAIM = hitBox;
+    return true;
+}
+export function releaseGesture(hitBox) {
+    if (CLAIM === hitBox)
+        CLAIM = undefined;
+}
+export function gestureClaim() {
+    return CLAIM;
+}
+const TARGETS = new Map();
+export function registerTarget(target) {
+    TARGETS.set(target.id, target);
+    return () => {
+        TARGETS.delete(target.id);
+    };
+}
+export function targetFor(id) {
+    return TARGETS.get(id);
+}
+export function innermostTarget(stack, session = SESSION) {
+    if (session === undefined)
+        return undefined;
+    for (const id of stack) {
+        const target = TARGETS.get(id);
+        if (target !== undefined && accepted(target.accepts, session))
+            return target;
+    }
+    return undefined;
+}
+export function beginDrag(input) {
+    if (SESSION !== undefined) {
+        throw new Error(`a drag from "${SESSION.from}" is already in progress, so "${input.from}" cannot start one. ` +
+            'Two live sessions would both receive moves and the drop would commit whichever wrote last.');
+    }
+    const subject = Array.isArray(input.subject) ? [...input.subject] : [input.subject];
+    if (subject.length === 0)
+        throw new Error('a drag carries something — beginDrag was given an empty subject');
+    SESSION = {
+        gesture: input.gesture,
+        subject,
+        from: input.from,
+        x: input.x,
+        y: input.y,
+        startedAt: input.t,
+        at: input.t,
+        overSince: input.t,
+    };
+    announce();
+    return SESSION;
+}
+export function moveDrag(input) {
+    if (SESSION === undefined)
+        return undefined;
+    const arrived = input.over !== SESSION.over;
+    SESSION = {
+        ...SESSION,
+        x: input.x,
+        y: input.y,
+        at: input.t,
+        ...(input.over === undefined ? { over: undefined } : { over: input.over }),
+        overSince: arrived ? input.t : SESSION.overSince,
+    };
+    announce();
+    return SESSION;
+}
+export function collect(more) {
+    if (SESSION === undefined)
+        return undefined;
+    const added = Array.isArray(more) ? more : [more];
+    const have = new Set(SESSION.subject.map((s) => `${s.kind}:${s.id}`));
+    const fresh = added.filter((s) => !have.has(`${s.kind}:${s.id}`));
+    if (fresh.length === 0)
+        return SESSION;
+    SESSION = { ...SESSION, subject: [...SESSION.subject, ...fresh] };
+    announce();
+    return SESSION;
+}
+export function endDrag() {
+    const finished = SESSION;
+    SESSION = undefined;
+    announce();
+    return finished;
+}
+export function resetDrag() {
+    SESSION = undefined;
+    CLAIM = undefined;
+    TARGETS.clear();
+    announce();
+}
+export function dwell(session = SESSION) {
+    if (session?.over === undefined)
+        return 0;
+    return Math.max(0, session.at - session.overSince);
+}
+export function accepted(kinds, session = SESSION) {
+    if (kinds === undefined || session === undefined)
+        return false;
+    return session.subject.every((s) => kinds.includes(s.kind));
+}
+export function edgeScroll(pointer, start, end, dt, { band = EDGE_SCROLL_DEFAULTS.band, speed = EDGE_SCROLL_DEFAULTS.speed } = {}) {
+    const extent = end - start;
+    if (extent <= 0 || speed <= 0 || band <= 0 || dt <= 0)
+        return 0;
+    const reach = Math.min(band, extent / 2);
+    const intoStart = start + reach - pointer;
+    if (intoStart > 0)
+        return -Math.min(1, intoStart / reach) * speed * dt;
+    const intoEnd = pointer - (end - reach);
+    if (intoEnd > 0)
+        return Math.min(1, intoEnd / reach) * speed * dt;
+    return 0;
+}
+export function pullEdges(x, y, dt, tuning = {}, layout = LAYOUT) {
+    for (const scroller of layout.scrollersAt(x, y)) {
+        if (scroller.scrollsVertically) {
+            const dy = edgeScroll(y, scroller.top, scroller.bottom, dt, tuning);
+            if (dy !== 0) {
+                scroller.scrollBy(0, dy);
+                return { dx: 0, dy };
+            }
+        }
+        if (scroller.scrollsHorizontally) {
+            const dx = edgeScroll(x, scroller.left, scroller.right, dt, tuning);
+            if (dx !== 0) {
+                scroller.scrollBy(dx, 0);
+                return { dx, dy: 0 };
+            }
+        }
+    }
+    return { dx: 0, dy: 0 };
+}

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

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

package/dist/ui/elements/accordion.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, section, header, region, uses } from "./accordion.works.js";
+export const Accordion = element('Accordion', (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 ?? {}), children: _jsx(Each, { rows: props.items, by: 'id', children: (each0, at) => (_jsxs("div", { ...section(props, kept, each0, at), children: [_jsx("button", { ...header(props, kept, each0, at), children: shown(props, each0, surface, kept).label }), _jsx("div", { ...region(props, kept, each0, at), children: shown(props, each0, surface, kept).inside })] })) }) }));
+}, 'e-accordion');

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

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import type { Row } from '../charts.tsx';
+import type { Surface } from '../door.ts';
+import type { AccordionProps } from './accordion.tsx';
+type Kept = {
+    readonly base: string;
+    readonly open: readonly string[];
+    readonly toggle: (id: string) => void;
+};
+export declare function uses(props: AccordionProps): {
+    readonly holds?: readonly string[];
+    readonly animates?: boolean;
+    readonly on?: Readonly<Record<string, unknown>>;
+    readonly base: string;
+    readonly open: readonly string[];
+    readonly toggle: (id: string) => void;
+};
+export declare function section(_props: AccordionProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>>;
+export declare function header(_props: AccordionProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>>;
+export declare function region(_props: AccordionProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>>;
+export declare function shown(_props: AccordionProps, row: Row, surface: Surface, _kept: unknown): Readonly<Record<string, ReactNode>>;
+export {};

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

@@ -0,0 +1,44 @@
+import { useId, useState } from 'react';
+export function uses(props) {
+    const base = useId();
+    const [open, setOpen] = useState(props.initial ?? []);
+    return {
+        base,
+        open,
+        toggle: (id) => {
+            const next = open.includes(id)
+                ? open.filter((one) => one !== id)
+                : props.exclusive === true
+                    ? [id]
+                    : [...open, id];
+            setOpen(next);
+            props.onChange?.(next);
+        },
+    };
+}
+export function section(_props, kept, row, _at) {
+    return { 'data-open': kept.open.includes(String(row['id'])) };
+}
+export function header(_props, kept, row, _at) {
+    const id = String(row['id']);
+    return {
+        type: 'button',
+        id: `${kept.base}-header-${id}`,
+        'aria-controls': `${kept.base}-region-${id}`,
+        'aria-expanded': kept.open.includes(id),
+        disabled: row['disabled'] === true,
+        onClick: () => kept.toggle(id),
+    };
+}
+export function region(_props, kept, row, _at) {
+    const id = String(row['id']);
+    return {
+        role: 'region',
+        id: `${kept.base}-region-${id}`,
+        'aria-labelledby': `${kept.base}-header-${id}`,
+        hidden: !kept.open.includes(id),
+    };
+}
+export function shown(_props, row, surface, _kept) {
+    return { label: surface.text(String(row['labelKey'])), inside: row['content'] };
+}

package/dist/ui/elements/aspect-ratio.d.ts

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

package/dist/ui/elements/aspect-ratio.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { element, useSurface } from "../wrappers.js";
+export const AspectRatio = element('AspectRatio', (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 }) },
+        measures: { "ratio": String(props.ratio ?? '') }, });
+    return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, style: surface.measures, children: props.children }));
+}, 'e-aspect-ratio');

package/dist/ui/elements/aspect-ratio.works.d.ts

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

package/dist/ui/elements/aspect-ratio.works.js

@@ -0,0 +1,3 @@
+export function measured(props) {
+    return { ratio: props.ratio };
+}

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

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

package/dist/ui/elements/avatar.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 "./avatar.works.js";
+export const Avatar = element('Avatar', (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("span", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, role: "img", "aria-label": surface.text(props.labelKey), children: [props.src === undefined ? null : _jsx("img", { src: props.src, alt: "" }), _jsx("span", { children: shown(props, surface).lettering })] }));
+}, 'e-avatar');

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

@@ -0,0 +1,4 @@
+import type { AvatarProps } from './avatar.tsx';
+export declare function shown(props: AvatarProps, surface: {
+    readonly text: (key: AvatarProps['labelKey']) => string;
+}): Readonly<Record<string, string | null>>;

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

@@ -0,0 +1,16 @@
+export function shown(props, surface) {
+    if (props.src !== undefined)
+        return { lettering: null };
+    const said = props.initials;
+    if (said !== undefined)
+        return { lettering: said };
+    return {
+        lettering: surface
+            .text(props.labelKey)
+            .split(/\s+/)
+            .filter(Boolean)
+            .slice(0, 2)
+            .map((part) => part.charAt(0).toUpperCase())
+            .join(''),
+    };
+}

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

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

package/dist/ui/elements/badge.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 { shows } from "./badge.works.js";
+export const Badge = element('Badge', (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, children: shows(props, surface) }));
+}, 'e-badge');

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

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+import type { BadgeProps } from './badge.tsx';
+export declare function shows(props: BadgeProps, surface: {
+    readonly text: (key: BadgeProps['labelKey']) => string;
+}): ReactNode;

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

@@ -0,0 +1,6 @@
+export function shows(props, surface) {
+    const max = props.max ?? 99;
+    if (props.count === undefined)
+        return surface.text(props.labelKey);
+    return props.count > max ? `${max}+` : String(props.count);
+}

package/dist/ui/elements/bars.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 BarsProps {
+    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 Bars: Element<'Bars', BarsProps>;