@prestack/thread-ui 0.0.1 → 0.1.0

package/dist/ui/elements/consent.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+import type { ConsentDecision } from '../consent.ts'
+import { Box } from './box.tsx'
+import { Column } from './column.tsx'
+import { Text } from './text.tsx'
+import { Toggle } from './toggle.tsx'
+import { Button } from './button.tsx'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { Each } from '../elements/each.tsx'
+import { title, policy, hasPolicy, categories, label, describe, chooser, optional, fixed, required, withdraw, withdrawable, decline, accept, acceptAll, uses } from './consent.works.tsx'
+
+
+export interface ConsentProps {
+  readonly decision?: ConsentDecision
+  readonly onDecide: (said: ConsentDecision) => void
+  readonly policyKey?: MessageKey
+  readonly preselected: readonly string[]
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Consent: Element<'Consent', ConsentProps> = element(
+  'Consent',
+  (props: ConsentProps, 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 (
+      <>
+        <Box.card>
+          <Column>
+            <Text {...title(props, kept)}></Text>
+            {!hasPolicy(props, kept) ? null : <Text {...policy(props, kept)}></Text>}
+            <Column>
+              <Each rows={categories(props, kept)} by={'id'}>
+                {(each0, at) => (
+                  <Box>
+                    <Column>
+                      <Text {...label(props, kept, each0, at)}></Text>
+                      <Text {...describe(props, kept, each0, at)}></Text>
+                    </Column>
+                    {!optional(props, kept, each0) ? null : <Toggle.input {...chooser(props, kept, each0, at)}></Toggle.input>}
+                    {!required(props, kept, each0) ? null : <Text {...fixed(props, kept, each0, at)}></Text>}
+                  </Box>
+                )}
+              </Each>
+            </Column>
+            <Box>
+              {!withdrawable(props, kept) ? null : <Button.buttonQuiet {...withdraw(props, kept)}></Button.buttonQuiet>}
+              <Button.buttonBorder {...decline(props, kept)}></Button.buttonBorder>
+              <Button.buttonBorder {...accept(props, kept)}></Button.buttonBorder>
+              <Button.buttonFill {...acceptAll(props, kept)}></Button.buttonFill>
+            </Box>
+          </Column>
+        </Box.card>
+      </>
+    )
+  },
+  'e-consent',
+  {},
+)

package/dist/ui/elements/consent.works.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import { useState } from 'react'
+
+import { consentCategories, type ConsentCategory, type ConsentDecision } from '../consent.ts'
+import type { Row } from '../charts.tsx'
+import type { ButtonProps } from './button.tsx'
+import type { ConsentProps } from './consent.tsx'
+import type { TextProps } from './text.tsx'
+import type { ToggleProps } from './toggle.tsx'
+
+type Kept = {
+  readonly categories: readonly ConsentCategory[]
+  readonly selected: readonly string[]
+  readonly accepted: boolean
+  readonly offered: readonly string[]
+  readonly toggle: (id: string, on: boolean) => void
+  readonly decide: (decision: ConsentDecision['decision'], accepted: readonly string[]) => void
+}
+
+function firstSelection(
+  categories: readonly ConsentCategory[],
+  decision: ConsentDecision | undefined,
+  preselected: readonly string[],
+): readonly string[] {
+  const answered = decision !== undefined
+  return categories
+    .filter(
+      (one) =>
+        one.required ||
+        (answered
+          ? decision.decision === 'accepted' && decision.accepted.includes(one.id)
+          : preselected.includes(one.id)),
+    )
+    .map((one) => one.id)
+}
+
+export function uses(props: ConsentProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+  readonly categories: readonly ConsentCategory[]
+  readonly selected: readonly string[]
+  readonly accepted: boolean
+  readonly offered: readonly string[]
+  readonly toggle: (id: string, on: boolean) => void
+  readonly decide: (decision: ConsentDecision['decision'], accepted: readonly string[]) => void
+} {
+  const categories = consentCategories()
+  const [selected, setSelected] = useState<readonly string[]>(() =>
+    firstSelection(categories, props.decision, props.preselected ?? []),
+  )
+  const offered = categories.map((one) => one.id)
+
+  return {
+    categories,
+    selected,
+    offered,
+    accepted: props.decision?.decision === 'accepted',
+    toggle: (id: string, on: boolean): void => {
+      setSelected((was) => (on ? [...was, id] : was.filter((one) => one !== id)))
+    },
+    decide: (decision: ConsentDecision['decision'], accepted: readonly string[]): void => {
+      props.onDecide({ decision, accepted: [...accepted], offered })
+    },
+  }
+}
+
+export function categories(_props: ConsentProps, kept: Kept): readonly Row[] {
+  return kept.categories as unknown as readonly Row[]
+}
+
+export function hasPolicy(props: ConsentProps, _kept: Kept): boolean {
+  return props.policyKey !== undefined
+}
+
+export function withdrawable(_props: ConsentProps, kept: Kept): boolean {
+  return kept.accepted
+}
+
+export function optional(_props: ConsentProps, _kept: Kept, row: Row): boolean {
+  return row['required'] !== true
+}
+
+export function required(_props: ConsentProps, _kept: Kept, row: Row): boolean {
+  return row['required'] === true
+}
+
+export function title(_props: ConsentProps, _kept: Kept, _at?: number): TextProps {
+  return { k: 'consent.title', is: 'heading' }
+}
+
+export function policy(props: ConsentProps, _kept: Kept, _at?: number): TextProps {
+  return { k: props.policyKey ?? 'consent.title', is: 'body' }
+}
+
+export function label(_props: ConsentProps, _kept: Kept, row: Row, _at: number): TextProps {
+  return { k: String(row['labelKey']), is: 'label' }
+}
+
+export function describe(_props: ConsentProps, _kept: Kept, row: Row, _at: number): TextProps {
+  return { k: String(row['describeKey']), is: 'body' }
+}
+
+export function fixed(_props: ConsentProps, _kept: Kept, _row: Row, _at: number): TextProps {
+  return { k: 'consent.required', is: 'label' }
+}
+
+export function chooser(_props: ConsentProps, kept: Kept, row: Row, _at?: number): ToggleProps {
+  const id = String(row['id'])
+  return {
+    labelKey: String(row['labelKey']),
+    on: kept.selected.includes(id),
+    onToggle: (on: boolean): void => kept.toggle(id, on),
+  }
+}
+
+export function withdraw(_props: ConsentProps, kept: Kept): ButtonProps {
+  return { label: 'consent.withdraw', onPress: (): void => kept.decide('withdrawn', []) }
+}
+
+export function decline(_props: ConsentProps, kept: Kept): ButtonProps {
+  return { label: 'consent.decline', onPress: (): void => kept.decide('declined', []) }
+}
+
+export function accept(_props: ConsentProps, kept: Kept): ButtonProps {
+  return { label: 'consent.accept', onPress: (): void => kept.decide('accepted', kept.selected) }
+}
+
+export function acceptAll(_props: ConsentProps, kept: Kept): ButtonProps {
+  return { label: 'consent.acceptAll', onPress: (): void => kept.decide('accepted', kept.offered) }
+}

package/dist/ui/elements/donut.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } 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 { slice, uses } from "./donut.works.js";
 export const Donut = element('Donut', (props, className) => {
     const kept = uses(props);
@@ -13,4 +13,4 @@ export const Donut = element('Donut', (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: _jsx(Each, { rows: props.rows, by: props.by, children: (each0, at) => (_jsx("circle", { ...slice(props, kept, each0, at) })) }) }));
-}, 'e-donut');
+}, 'e-donut', { "card": "thread-card" });

package/dist/ui/elements/donut.tsx

@@ -0,0 +1,44 @@
+'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 { slice, uses } from './donut.works.ts'
+
+
+export interface DonutProps {
+  readonly rows: readonly Row[]
+  readonly by: string
+  readonly value: string
+  readonly titleKey?: MessageKey
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Donut: Element<'Donut', DonutProps> = element(
+  'Donut',
+  (props: DonutProps, 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) })}>
+        <Each rows={props.rows} by={props.by}>
+          {(each0, at) => (
+            <circle {...slice(props, kept, each0, at)}></circle>
+          )}
+        </Each>
+      </svg>
+    )
+  },
+  'e-donut',
+  {"card":"thread-card"},
+)

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

@@ -0,0 +1,42 @@
+import { seriesColour } from '../series.ts'
+import { num, useRamp, type Row } from '../charts.tsx'
+import type { DonutProps } from './donut.tsx'
+
+const RADIUS = 40
+const ROUND = 2 * Math.PI * RADIUS
+
+export function uses(props: DonutProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+  readonly ramp: readonly string[]
+} {
+  const ramp = useRamp(props.rows.length)
+  return {
+    ...(props.rows.length === 0 ? { holds: ['empty'] as const } : {}),
+    on: { viewBox: '0 0 100 100' },
+    ramp,
+  }
+}
+
+export function slice(
+  props: DonutProps,
+  kept: { readonly ramp: readonly string[] },
+  row: Row,
+  at: number,
+): Readonly<Record<string, string | number>> {
+  const whole = props.rows.reduce((sum: number, one: Row) => sum + num(one, props.value), 0) || 1
+  const share = num(row, props.value) / whole
+  const before = props.rows.slice(0, at).reduce((sum: number, one: Row) => sum + num(one, props.value), 0) / whole
+  return {
+    cx: 50,
+    cy: 50,
+    r: RADIUS,
+    fill: 'none',
+    stroke: seriesColour(kept.ramp, at),
+    strokeWidth: 16,
+    strokeDasharray: `${(share * ROUND).toFixed(2)} ${ROUND.toFixed(2)}`,
+    strokeDashoffset: (-before * ROUND).toFixed(2),
+    transform: 'rotate(-90 50 50)',
+  }
+}

package/dist/ui/elements/each.js

@@ -6,4 +6,4 @@ export const Each = element('Each', (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-each');
+}, 'e-each', {});

package/dist/ui/elements/each.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { Row } from '../charts.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { shows } from './each.works.tsx'
+
+
+export interface EachProps {
+  readonly rows: readonly object[]
+  readonly by: string
+  readonly children: (row: Row, at: number) => ReactNode
+  readonly settles?: string
+  readonly paced?: string
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Each: Element<'Each', EachProps> = element(
+  'Each',
+  (props: EachProps, 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-each',
+  {},
+)

package/dist/ui/elements/each.works.tsx

@@ -0,0 +1,82 @@
+import { Fragment, useLayoutEffect, useRef, type ReactNode } from 'react'
+
+import type { Row } from '../charts.tsx'
+import { nameOf } from '../token.ts'
+import type { EachProps } from './each.tsx'
+
+function keyOf(row: object, by: string, at: number): string {
+  const value = (row as Record<string, unknown>)[by]
+  if (value === undefined || value === null) {
+    throw new Error(
+      `Each: row ${String(at)} has no value for "${by}", so it has no key. React reuses DOM by key, and a ` +
+        "row without one is matched by position — which silently keeps the previous row's state when " +
+        'the list reorders. Name the field that identifies a row in this view.',
+    )
+  }
+  return String(value)
+}
+
+function following(marker: HTMLElement): readonly HTMLElement[] {
+  const found: HTMLElement[] = []
+  let node = marker.nextElementSibling
+  while (node !== null) {
+    found.push(node as HTMLElement)
+    node = node.nextElementSibling
+  }
+  return found
+}
+
+function boxes(marker: HTMLElement, ids: readonly string[]): Map<string, DOMRect> {
+  const found = new Map<string, DOMRect>()
+  following(marker).forEach((node, at) => {
+    const id = ids[at]
+    if (id !== undefined) found.set(id, node.getBoundingClientRect())
+  })
+  return found
+}
+
+function settle(marker: HTMLElement, ids: readonly string[], was: Map<string, DOMRect>, over: string, paced: string): void {
+  following(marker).forEach((node, at) => {
+    const id = ids[at]
+    if (id === undefined) return
+    const before = was.get(id)
+    if (before === undefined) return
+    const after = node.getBoundingClientRect()
+    const dx = before.left - after.left
+    const dy = before.top - after.top
+    if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) return
+
+    node.style.transition = `transform var(${nameOf('motion-instant')})`
+    node.style.transform = `translate(${String(dx)}px, ${String(dy)}px)`
+    void node.offsetWidth
+    node.style.transition = `transform var(--${over}) var(--${paced})`
+    node.style.transform = ''
+  })
+}
+
+export function shows(props: EachProps, _surface: unknown): ReactNode {
+  const within = useRef<HTMLElement | null>(null)
+  const was = useRef<Map<string, DOMRect>>(new Map())
+  const drawn = useRef('')
+
+  const order = props.rows.map((row, at) => keyOf(row, props.by, at)).join('|')
+
+  useLayoutEffect(() => {
+    const marker = within.current
+    if (marker === null || props.settles === undefined || props.paced === undefined) return
+    const ids = order === '' ? [] : order.split('|')
+    const moved = drawn.current !== '' && drawn.current !== order
+    if (moved) settle(marker, ids, was.current, props.settles, props.paced)
+    drawn.current = order
+    was.current = boxes(marker, ids)
+  }, [order, props.settles, props.paced])
+
+  return (
+    <>
+      <span ref={within} hidden />
+      {props.rows.map((row, at) => (
+        <Fragment key={keyOf(row, props.by, at)}>{props.children(row as Row, at)}</Fragment>
+      ))}
+    </>
+  )
+}

package/dist/ui/elements/empty.js

@@ -9,4 +9,4 @@ export const Empty = element('Empty', (props, className) => {
             'empty',
         ], });
     return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, children: surface.text(props.labelKey) }));
-}, 'e-empty');
+}, 'e-empty', { "card": "thread-card" });

package/dist/ui/elements/empty.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 EmptyProps {
+  readonly labelKey: MessageKey
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Empty: Element<'Empty', EmptyProps> = element(
+  'Empty',
+  (props: EmptyProps, 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: [
+      'empty' as const,
+    ], })
+    return (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
+        {surface.text(props.labelKey)}
+      </div>
+    )
+  },
+  'e-empty',
+  {"card":"thread-card"},
+)

package/dist/ui/elements/field.js

@@ -12,4 +12,4 @@ export const Field = element('Field', (props, className) => {
         ],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsxs("label", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), children: [_jsx("span", { children: surface.text(props.labelKey) }), _jsx("input", { ...entry(props, kept) }), _jsx("span", { children: shown(props, surface, kept).fault })] }));
-}, 'e-field');
+}, 'e-field', { "input": "thread-input" });

package/dist/ui/elements/field.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { shown, entry, uses } from './field.works.ts'
+
+
+export interface FieldProps {
+  readonly name: string
+  readonly validator: string
+  readonly labelKey: MessageKey
+  readonly value?: string
+  readonly onValue?: (said: string) => void
+  readonly context?: Readonly<Record<string, unknown>>
+  readonly autocomplete?: string
+  readonly disabled?: boolean
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Field: Element<'Field', FieldProps> = element(
+  'Field',
+  (props: FieldProps, 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 (
+      <label className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})}>
+        <span>{surface.text(props.labelKey)}</span>
+        <input {...entry(props, kept)} />
+        <span>{shown(props, surface, kept).fault}</span>
+      </label>
+    )
+  },
+  'e-field',
+  {"input":"thread-input"},
+)

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

@@ -0,0 +1,65 @@
+import { useState, type ReactNode } from 'react'
+
+import { acceptsKeystroke, applyMask, entryConstraints, evaluateMoney, runValidator } from '../validators.ts'
+import type { Surface } from '../door.ts'
+import type { FieldProps } from './field.tsx'
+
+export 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
+} {
+  const [wrong, said] = useState<string | null>(null)
+  return { ...(props.disabled === true ? { holds: ['disabled'] as const } : {}), wrong, said }
+}
+
+export function entry(
+  props: FieldProps,
+  kept: { readonly wrong: string | null; readonly said: (to: string | null) => void },
+): Readonly<Record<string, unknown>> {
+  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: { readonly target: { readonly value: string } }): void => {
+      let kept_ = ''
+      for (const ch of event.target.value) {
+        if (acceptsKeystroke(props.validator, kept_, ch)) kept_ += ch
+      }
+      props.onValue?.(applyMask(props.validator, kept_))
+    },
+
+    onBlur: (): void => {
+      const text = props.value ?? ''
+      let judged: unknown = 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: FieldProps,
+  surface: Surface,
+  kept: { readonly wrong: string | null },
+): Readonly<Record<string, ReactNode>> {
+  return { fault: kept.wrong === null ? null : surface.text(kept.wrong) }
+}

package/dist/ui/elements/funnel.js

@@ -3,7 +3,7 @@ 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 { Each } from "../elements/each.js";
 import { shown, sized, uses } from "./funnel.works.js";
 export const Funnel = element('Funnel', (props, className) => {
     const kept = uses(props);
@@ -14,4 +14,4 @@ export const Funnel = element('Funnel', (props, className) => {
         ],
         ...(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');
+}, 'e-funnel', { "card": "thread-card" });

package/dist/ui/elements/funnel.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 { measured as marking } from '../charts.tsx'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { Each } from '../elements/each.tsx'
+import { shown, sized, uses } from './funnel.works.ts'
+
+
+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 const Funnel: Element<'Funnel', FunnelProps> = element(
+  'Funnel',
+  (props: FunnelProps, 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="img" {...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) })}>
+        <Each rows={props.rows} by={props.by}>
+          {(each0, at) => (
+            <span style={marking(sized(props, kept, each0, at))}>
+              <span>{shown(props, each0, surface, kept).label}</span>
+              <span>{shown(props, each0, surface, kept).amount}</span>
+            </span>
+          )}
+        </Each>
+      </div>
+    )
+  },
+  'e-funnel',
+  {"card":"thread-card"},
+)