@prestack/thread-ui 0.0.1 → 0.0.2

package/dist/ui/elements/radio-group.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import type { Row } from '../charts.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { Each } from '../elements/each.tsx'
+import { shown, option, uses } from './radio-group.works.ts'
+
+
+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 const RadioGroup: Element<'RadioGroup', RadioGroupProps> = element(
+  'RadioGroup',
+  (props: RadioGroupProps, 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 (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} role="radiogroup" aria-label={surface.text(props.labelKey)}>
+        <Each rows={props.options} by={'value'}>
+          {(each0, at) => (
+            <label>
+              <input {...option(props, kept, each0, at)} type="radio" disabled={surface.marked('disabled')} />
+              <span>{shown(props, each0, surface, kept).caption}</span>
+            </label>
+          )}
+        </Each>
+      </div>
+    )
+  },
+  'e-radio-group',
+  {"choice":"thread-choice"},
+)

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

@@ -0,0 +1,33 @@
+import { useRef } from 'react'
+
+import { ITEM_ATTR, useRovingFocus } from '../roving-focus.ts'
+import type { Row } from '../charts.tsx'
+import type { Surface } from '../door.ts'
+import type { RadioGroupProps } from './radio-group.tsx'
+
+export function uses(props: RadioGroupProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on: Readonly<Record<string, unknown>>
+} {
+  const group = useRef<HTMLDivElement>(null)
+  useRovingFocus(group, { orientation: 'vertical' })
+  return {
+    ...(props.disabled === true ? { holds: ['disabled'] as const } : {}),
+    on: { ref: group },
+  }
+}
+
+export function option(props: RadioGroupProps, _kept: unknown, row: Row, _at: number): Readonly<Record<string, unknown>> {
+  return {
+    ...{ [ITEM_ATTR]: '' },
+    name: props.name,
+    value: String(row['value']),
+    checked: props.chosen === row['value'],
+    onChange: (): void => props.onValue?.(String(row['value'])),
+  }
+}
+
+export function shown(_props: RadioGroupProps, row: Row, surface: Surface, _kept?: unknown): Readonly<Record<string, string>> {
+  return { caption: surface.text(String(row['labelKey'])) }
+}

package/dist/ui/elements/row.js

@@ -5,4 +5,4 @@ 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');
+}, 'e-row', {});

package/dist/ui/elements/row.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+
+
+export interface RowProps {
+  readonly children: ReactNode
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Row: Element<'Row', RowProps> = element(
+  'Row',
+  (props: RowProps, 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 (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
+        {props.children}
+      </div>
+    )
+  },
+  'e-row',
+  {},
+)

package/dist/ui/elements/scatter.js

@@ -12,4 +12,4 @@ export const Scatter = element('Scatter', (props, className) => {
         ],
         ...(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');
+}, 'e-scatter', { "card": "thread-card" });

package/dist/ui/elements/scatter.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import type { Row } from '../charts.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { point, uses } from './scatter.works.ts'
+
+
+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 const Scatter: Element<'Scatter', ScatterProps> = element(
+  'Scatter',
+  (props: ScatterProps, 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 (
+      <svg className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} role="img" {...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) })}>
+        {props.rows.map((each0, at) => (
+            <circle key={at} {...point(props, kept, each0, at)}></circle>
+        ))}
+      </svg>
+    )
+  },
+  'e-scatter',
+  {"card":"thread-card"},
+)

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

@@ -0,0 +1,38 @@
+import { num, useRamp, type Row } from '../charts.tsx'
+import type { ScatterProps } from './scatter.tsx'
+
+const SIDE = 100
+
+export function uses(props: ScatterProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+  readonly ramp: readonly string[]
+} {
+  const ramp = useRamp(1)
+  return {
+    ...(props.rows.length === 0 ? { holds: ['empty'] as const } : {}),
+    on: { viewBox: `0 0 ${String(SIDE)} ${String(SIDE)}` },
+    ramp,
+  }
+}
+
+export function point(
+  props: ScatterProps,
+  kept: { readonly ramp: readonly string[] },
+  row: Row,
+  _at: number,
+): Readonly<Record<string, string | number>> {
+  const xs = props.rows.map((one: Row) => num(one, props.x))
+  const ys = props.rows.map((one: Row) => 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.js

@@ -2,10 +2,10 @@
 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 { Each } from "../elements/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');
+}, 'e-select', { "input": "thread-input" });

package/dist/ui/elements/select.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import type { Row } from '../charts.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { Each } from '../elements/each.tsx'
+import { does } from './select.works.ts'
+
+
+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 const Select: Element<'Select', SelectProps> = element(
+  'Select',
+  (props: SelectProps, 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 (
+      <label className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
+        <span>{surface.text(props.labelKey)}</span>
+        {props.value === undefined ? null : <select disabled={surface.marked('disabled')} value={props.value ?? ''} onChange={(event) => does(props).chose(event.target.value)}>
+          <Each rows={props.options} by={props.value}>
+            {(each0, at) => (
+              <option value={String(each0.value)}>{surface.text(String(each0.labelKey))}</option>
+            )}
+          </Each>
+        </select>}
+      </label>
+    )
+  },
+  'e-select',
+  {"input":"thread-input"},
+)

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

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

package/dist/ui/elements/separator.js

@@ -6,4 +6,4 @@ 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');
+}, 'e-separator', { "rule": "thread-rule" });

package/dist/ui/elements/separator.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } 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 const Separator: Element<'Separator', SeparatorProps> = element(
+  'Separator',
+  (props: SeparatorProps, 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 (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} role="separator" aria-orientation={props.orientation === 'vertical' ? 'vertical' : 'horizontal'}>
+        {props.labelKey === undefined ? null : <span>{surface.text(props.labelKey)}</span>}
+      </div>
+    )
+  },
+  'e-separator',
+  {"rule":"thread-rule"},
+)

package/dist/ui/elements/skeleton.js

@@ -6,4 +6,4 @@ 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');
+}, 'e-skeleton', { "skeletonBlock": "thread-skeleton-block" });

package/dist/ui/elements/skeleton.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+
+
+export interface SkeletonProps {
+  readonly lines?: number
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Skeleton: Element<'Skeleton', SkeletonProps> = element(
+  'Skeleton',
+  (props: SkeletonProps, 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 (
+      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} aria-hidden="true">
+        {Array.from({ length: Math.max(1, props.lines ?? 1) }, (_, at) => (
+            <span></span>
+        ))}
+      </span>
+    )
+  },
+  'e-skeleton',
+  {"skeletonBlock":"thread-skeleton-block"},
+)

package/dist/ui/elements/slider.js

@@ -7,4 +7,4 @@ 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');
+}, 'e-slider', { "input": "thread-input" });

package/dist/ui/elements/slider.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { does } from './slider.works.ts'
+
+
+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 const Slider: Element<'Slider', SliderProps> = element(
+  'Slider',
+  (props: SliderProps, 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 (
+      <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',
+  {"input":"thread-input"},
+)

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

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

package/dist/ui/elements/sparkline.js

@@ -12,4 +12,4 @@ export const Sparkline = element('Sparkline', (props, className) => {
         ],
         ...(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');
+}, 'e-sparkline', { "card": "thread-card" });

package/dist/ui/elements/sparkline.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import type { Row } from '../charts.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { drawing, uses } from './sparkline.works.ts'
+
+
+export interface SparklineProps {
+  readonly rows: readonly Row[]
+  readonly value: string
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Sparkline: Element<'Sparkline', SparklineProps> = element(
+  'Sparkline',
+  (props: SparklineProps, 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 (
+      <svg className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} aria-hidden="true">
+        <polyline {...drawing(props, kept)}></polyline>
+      </svg>
+    )
+  },
+  'e-sparkline',
+  {"card":"thread-card"},
+)

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

@@ -0,0 +1,32 @@
+import { num, polyline, useRamp } from '../charts.tsx'
+import type { Row } from '../charts.tsx'
+import type { SparklineProps } from './sparkline.tsx'
+
+const WIDE = 100
+const TALL = 24
+
+export function uses(props: SparklineProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+  readonly ramp: readonly string[]
+} {
+  const ramp = useRamp(1)
+  return {
+    ...(props.rows.length === 0 ? { holds: ['empty'] as const } : {}),
+    on: { viewBox: `0 0 ${String(WIDE)} ${String(TALL)}` },
+    ramp,
+  }
+}
+
+export function drawing(
+  props: SparklineProps,
+  kept: { readonly ramp: readonly string[] },
+): Readonly<Record<string, string | number>> {
+  return {
+    points: polyline(props.rows.map((one: Row) => num(one, props.value)), WIDE, TALL),
+    fill: 'none',
+    stroke: kept.ramp[0] ?? 'currentColor',
+    strokeWidth: 2,
+  }
+}

package/dist/ui/elements/spinner.js

@@ -9,4 +9,4 @@ export const Spinner = element('Spinner', (props, className) => {
             'spinner',
         ], });
     return (_jsx("span", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, "aria-label": surface.text(props.labelKey), children: null }));
-}, 'e-spinner');
+}, 'e-spinner', { "spinnerTurning": "thread-spinner-turning" });

package/dist/ui/elements/spinner.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+
+
+export interface SpinnerProps {
+  readonly labelKey: MessageKey
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Spinner: Element<'Spinner', SpinnerProps> = element(
+  'Spinner',
+  (props: SpinnerProps, 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' as const,
+    ], })
+    return (
+      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} aria-label={surface.text(props.labelKey)}>
+        {null}
+      </span>
+    )
+  },
+  'e-spinner',
+  {"spinnerTurning":"thread-spinner-turning"},
+)

package/dist/ui/elements/stack.js

@@ -5,4 +5,4 @@ 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');
+}, 'e-stack', {});

package/dist/ui/elements/stack.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+
+
+export interface StackProps {
+  readonly children: ReactNode
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Stack: Element<'Stack', StackProps> = element(
+  'Stack',
+  (props: StackProps, 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 (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
+        {props.children}
+      </div>
+    )
+  },
+  'e-stack',
+  {},
+)

package/dist/ui/elements/stat.js

@@ -7,4 +7,4 @@ 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');
+}, 'e-stat', { "statTile": "thread-stat-tile" });

package/dist/ui/elements/stat.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { shown } from './stat.works.ts'
+
+
+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 const Stat: Element<'Stat', StatProps> = element(
+  'Stat',
+  (props: StatProps, 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 (
+      <figure className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
+        <span>{shown(props, surface).figure}</span>
+        <figcaption>{surface.text(props.labelKey)}</figcaption>
+        <span>{shown(props, surface).delta}</span>
+      </figure>
+    )
+  },
+  'e-stat',
+  {"statTile":"thread-stat-tile"},
+)

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react'
+
+import { formatValue } from '../validators.ts'
+import type { StatProps } from './stat.tsx'
+
+export function shown(props: StatProps, _surface: unknown): Readonly<Record<string, ReactNode>> {
+  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.js

@@ -12,4 +12,4 @@ export const Surface = element('Surface', (props, className) => {
         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');
+}, 'e-surface', { "card": "thread-card" });