@prestack/thread-ui 0.0.1 → 0.1.0

package/dist/ui/elements/line-chart.works.ts

@@ -0,0 +1,41 @@
+import { seriesColour } from '../series.ts'
+import { num, polyline, str, useRamp, type Row } from '../charts.tsx'
+import type { LineChartProps } from './line-chart.tsx'
+
+const WIDE = 300
+const TALL = 120
+
+export function lines(props: LineChartProps, _kept?: unknown): readonly Row[] {
+  if (props.by === undefined) return [{ group: '' }]
+  return [...new Set(props.rows.map((one: Row) => str(one, props.by as string)))].map((group) => ({ group }))
+}
+
+export function uses(props: LineChartProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+  readonly ramp: readonly string[]
+} {
+  const ramp = useRamp(lines(props).length)
+  return {
+    ...(props.rows.length === 0 ? { holds: ['empty'] as const } : {}),
+    on: { viewBox: `0 0 ${String(WIDE)} ${String(TALL)}` },
+    ramp,
+  }
+}
+
+export function drawing(
+  props: LineChartProps,
+  kept: { readonly ramp: readonly string[] },
+  row: Row,
+  at: number,
+): Readonly<Record<string, string | number>> {
+  const group = str(row, 'group')
+  const mine = props.rows.filter((one: Row) => props.by === undefined || str(one, props.by) === group)
+  return {
+    points: polyline(mine.map((one: Row) => num(one, props.value)), WIDE, TALL),
+    fill: 'none',
+    stroke: seriesColour(kept.ramp, at),
+    strokeWidth: 2,
+  }
+}

package/dist/ui/elements/link.js

@@ -12,4 +12,4 @@ export const Link = element('Link', (props, className) => {
         ],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsx("a", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), children: surface.text(props.labelKey) }));
-}, 'e-link');
+}, 'e-link', { "linkInline": "thread-link-inline" });

package/dist/ui/elements/link.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass, type FontRoleId } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { uses } from './link.works.ts'
+
+
+export interface LinkProps {
+  readonly navigateTo: string
+  readonly labelKey: MessageKey
+  readonly is?: FontRoleId
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Link: Element<'Link', LinkProps> = element(
+  'Link',
+  (props: LinkProps, className) => {
+    const kept = uses(props)
+    const surface = useSurface({ className: roleClass(props.is, className),
+    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+    holds: [
+      ...(kept.holds ?? []),
+    ],
+    ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
+    return (
+      <a className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})}>
+        {surface.text(props.labelKey)}
+      </a>
+    )
+  },
+  'e-link',
+  {"linkInline":"thread-link-inline"},
+)

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

@@ -0,0 +1,25 @@
+import type { MouseEvent } from 'react'
+
+import { usePress } from '../wrappers.tsx'
+import type { LinkProps } from './link.tsx'
+
+export function uses(props: LinkProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on: {
+    readonly href: string
+    readonly onClick: (event: MouseEvent<HTMLAnchorElement>) => void
+  }
+} {
+  const press = usePress({ navigateTo: props.navigateTo }, { element: 'Link', name: props.labelKey })
+  return {
+    on: {
+      href: `#${props.navigateTo}`,
+      onClick: (event: MouseEvent<HTMLAnchorElement>): void => {
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return
+        event.preventDefault()
+        press?.()
+      },
+    },
+  }
+}

package/dist/ui/elements/media.js

@@ -19,4 +19,4 @@ export const Media = element('Media', (props, className) => {
                 return null;
         }
     })());
-}, 'e-media');
+}, 'e-media', { "card": "thread-card", "framed": "thread-framed" });

package/dist/ui/elements/media.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+
+
+export interface MediaProps {
+  readonly as: 'image' | 'video' | 'audio' | 'file'
+  readonly src: string
+  readonly altKey: MessageKey
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Media: Element<'Media', MediaProps> = element(
+  'Media',
+  (props: MediaProps, 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 (
+      (() => {
+      switch (props.as) {
+        case 'image':
+          return (
+            <img className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} src={props.src} alt={surface.text(props.altKey)} />
+          )
+        case 'video':
+          return (
+            <video className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} src={props.src} aria-label={surface.text(props.altKey)} controls preload="metadata">
+              {null}
+            </video>
+          )
+        case 'audio':
+          return (
+            <audio className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} src={props.src} aria-label={surface.text(props.altKey)} controls preload="metadata">
+              {null}
+            </audio>
+          )
+        case 'file':
+          return (
+            <a className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} href={props.src} download>
+              {surface.text(props.altKey)}
+            </a>
+          )
+        default:
+          return null
+      }
+    })()
+    )
+  },
+  'e-media',
+  {"card":"thread-card","framed":"thread-framed"},
+)

package/dist/ui/elements/menu.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { roleClass } from "../fonts.js";
 import { Presented, MenuRow } from "./menu.works.js";
 import { element, useSurface } from "../wrappers.js";
-import { Each } from "./each.js";
+import { Each } from "../elements/each.js";
 import { measured, opener, portal, listing, row, uses } from "./menu.works.js";
 export const Menu = element('Menu', (props, className) => {
     const kept = uses(props);
@@ -15,4 +15,4 @@ export const Menu = element('Menu', (props, className) => {
         measures: measured(props, kept),
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsxs("span", { ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), style: surface.measures, children: [_jsx("button", { className: `e-menu-opener ${surface.className ?? ''}`, ...opener(props, kept), children: surface.text(props.labelKey) }), _jsx(Presented, { ...portal(props, kept), children: _jsx("div", { className: "e-menu-layer", ...listing(props, kept), children: _jsx(Each, { rows: props.items, by: props.labelKey, children: (each0, at) => (_jsx(MenuRow, { ...row(props, kept, each0, at) })) }) }) })] }));
-}, 'e-menu');
+}, 'e-menu', { "card": "thread-card" });

package/dist/ui/elements/menu.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import type { Row } from '../charts.tsx'
+import { roleClass } from '../fonts.ts'
+import { Presented, MenuRow } from './menu.works.tsx'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { Each } from '../elements/each.tsx'
+import { measured, opener, portal, listing, row, uses } from './menu.works.tsx'
+
+
+export interface MenuProps {
+  readonly labelKey: MessageKey
+  readonly items: readonly Row[]
+  readonly side?: string
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Menu: Element<'Menu', MenuProps> = element(
+  'Menu',
+  (props: MenuProps, 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 ?? []),
+    ],
+    measures: measured(props, kept),
+    ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
+    return (
+      <span {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} style={surface.measures}>
+        <button className={`e-menu-opener ${surface.className ?? ''}`} {...opener(props, kept)}>{surface.text(props.labelKey)}</button>
+        <Presented {...portal(props, kept)}>
+          <div className="e-menu-layer" {...listing(props, kept)}>
+            <Each rows={props.items} by={props.labelKey}>
+              {(each0, at) => (
+                <MenuRow {...row(props, kept, each0, at)}></MenuRow>
+              )}
+            </Each>
+          </div>
+        </Presented>
+      </span>
+    )
+  },
+  'e-menu',
+  {"card":"thread-card"},
+)

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

@@ -0,0 +1,153 @@
+'use client'
+
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react'
+
+import type { MessageKey } from '../content.tsx'
+import { positionOf, type AnchorOptions, type Position } from '../positioning.ts'
+import { ITEM_ATTR, useRovingFocus } from '../roving-focus.ts'
+import { pressOf, usePress, useSurface } from '../wrappers.tsx'
+import { drawn } from './glyph.works.tsx'
+import type { MenuProps } from './menu.tsx'
+
+export interface MenuItem {
+  readonly labelKey: MessageKey
+  readonly dispatch?: string
+  readonly navigateTo?: string
+  readonly icon?: string
+  readonly disabled?: boolean
+}
+
+export { Presented } from '../presented.tsx'
+import type { PresentedProps } from '../presented.tsx'
+
+const SIDE = 'bottom'
+
+export function MenuRow({
+  item,
+  onDone,
+}: {
+  readonly item: MenuItem
+  readonly onDone: () => void
+}): ReactNode {
+
+  const { text } = useSurface({})
+  const press = usePress(pressOf(item), { element: 'Menu', name: item.labelKey })
+  return (
+    <button
+      {...{ [ITEM_ATTR]: '' }}
+      type="button"
+      role="menuitem"
+      disabled={item.disabled === true}
+      onClick={() => {
+        press?.()
+        onDone()
+      }}
+    >
+      {item.icon === undefined ? null : drawn(item.icon, { 'aria-hidden': true })}
+      {text(item.labelKey)}
+    </button>
+  )
+}
+
+type Kept = {
+  readonly trigger: React.RefObject<HTMLButtonElement | null>
+  readonly layer: React.RefObject<HTMLDivElement | null>
+  readonly open: boolean
+  readonly at: Position | null
+  readonly names: { readonly trigger: string; readonly menu: string }
+  readonly show: (to: boolean | ((was: boolean) => boolean)) => void
+}
+
+export function uses(props: MenuProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+  readonly trigger: React.RefObject<HTMLButtonElement | null>
+  readonly layer: React.RefObject<HTMLDivElement | null>
+  readonly open: boolean
+  readonly at: Position | null
+  readonly names: { readonly trigger: string; readonly menu: string }
+  readonly show: (to: boolean | ((was: boolean) => boolean)) => void
+} {
+  const trigger = useRef<HTMLButtonElement>(null)
+  const layer = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(false)
+  const [at, setAt] = useState<Position | null>(null)
+  const base = useId()
+
+  useRovingFocus(layer, { orientation: 'vertical', wrap: true, active: open })
+
+  useEffect(() => {
+    if (!open) return undefined
+    const anchor = trigger.current
+    const floating = layer.current
+    if (anchor === null || floating === null) return undefined
+    let live = true
+    void positionOf(anchor, floating, {
+      placement: (props.side ?? SIDE) as NonNullable<AnchorOptions['placement']>,
+    }).then((position) => {
+      if (live) setAt(position)
+    })
+    return () => {
+      live = false
+    }
+  }, [open, props.side])
+
+  return {
+    trigger,
+    layer,
+    open,
+    at,
+    names: { trigger: `${base}-trigger`, menu: `${base}-menu` },
+    show: setOpen,
+  }
+}
+
+export function opener(_props: MenuProps, kept: Kept): Readonly<Record<string, unknown>> {
+  return {
+    ref: kept.trigger,
+    type: 'button',
+    id: kept.names.trigger,
+    'aria-haspopup': 'menu',
+    'aria-expanded': kept.open,
+    ...(kept.open ? { 'aria-controls': kept.names.menu } : {}),
+    onPointerDown: (event: React.PointerEvent<HTMLButtonElement>): void => {
+      if (event.button > 0 || event.ctrlKey) return
+      event.currentTarget.focus()
+      event.preventDefault()
+      kept.show((was) => !was)
+    },
+    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>): void => {
+      if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'ArrowDown') return
+      event.preventDefault()
+      if (event.key === 'ArrowDown') kept.show(true)
+      else kept.show((was) => !was)
+    },
+  }
+}
+
+export function portal(_props: MenuProps, kept: Kept): PresentedProps {
+  return { presentation: 'popover', open: kept.open, onDismiss: () => kept.show(false), children: null }
+}
+
+export function listing(props: MenuProps, kept: Kept): Readonly<Record<string, unknown>> {
+  return {
+    ref: kept.layer,
+    id: kept.names.menu,
+    role: 'menu',
+    'aria-labelledby': kept.names.trigger,
+    'data-side': kept.at?.placement ?? props.side ?? SIDE,
+    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>): void => {
+      if (event.key !== 'Tab') return
+      kept.show(false)
+    },
+  }
+}
+
+export function row(_props: MenuProps, kept: Kept, item: Record<string, unknown>, _at: number): { readonly item: MenuItem; readonly onDone: () => void } {
+  return { item: item as unknown as MenuItem, onDone: () => kept.show(false) }
+}
+
+export function measured(_props: MenuProps, kept: Kept): Readonly<Record<string, string | number>> {
+  return kept.at === null ? {} : { x: `${String(kept.at.x)}px`, y: `${String(kept.at.y)}px` }
+}

package/dist/ui/elements/money.js

@@ -6,4 +6,4 @@ export const Money = element('Money', (props, className) => {
     const surface = useSurface({ className: roleClass(props.is, className),
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });
     return (shows(props, surface));
-}, 'e-money');
+}, 'e-money', {});

package/dist/ui/elements/money.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { roleClass, type FontRoleId } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { shows } from './money.works.ts'
+
+
+export interface MoneyProps {
+  readonly value?: unknown
+  readonly is?: FontRoleId
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Money: Element<'Money', MoneyProps> = element(
+  'Money',
+  (props: MoneyProps, className) => {
+    const surface = useSurface({ className: roleClass(props.is, className),
+    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
+    return (
+      shows(props, surface)
+    )
+  },
+  'e-money',
+  {},
+)

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react'
+
+import { renderValue } from '../content.tsx'
+import type { Surface } from '../door.ts'
+import type { MoneyProps } from './money.tsx'
+
+export function shows(props: MoneyProps, surface: Surface): ReactNode {
+  return renderValue({ validator: 'money', value: props.value }, surface)
+}

package/dist/ui/elements/pagination.js

@@ -3,10 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { roleClass } from "../fonts.js";
 import { Link } from "./link.js";
 import { element, useSurface } from "../wrappers.js";
-import { Each } from "./each.js";
+import { Each } from "../elements/each.js";
 import { step, steps } from "./pagination.works.js";
 export const Pagination = element('Pagination', (props, className) => {
     const surface = useSurface({ className: roleClass(undefined, className),
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });
     return (_jsx("nav", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, "aria-label": surface.text('nav.pagination'), children: _jsx(Each, { rows: steps(props), by: 'id', children: (each0, at) => (_jsx(Link.linkInline, { ...step(props, each0, at) })) }) }));
-}, 'e-pagination');
+}, 'e-pagination', { "tabBar": "thread-tab-bar" });

package/dist/ui/elements/pagination.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { roleClass } from '../fonts.ts'
+import type { MapIsland } from '../islands/map.ts'
+import { Link } from './link.tsx'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { Each } from '../elements/each.tsx'
+import { step, steps } from './pagination.works.ts'
+
+
+export interface PaginationProps {
+  readonly map: MapIsland
+  readonly sequence: readonly string[]
+  readonly current: string
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Pagination: Element<'Pagination', PaginationProps> = element(
+  'Pagination',
+  (props: PaginationProps, 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 (
+      <nav className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} aria-label={surface.text('nav.pagination')}>
+        <Each rows={steps(props)} by={'id'}>
+          {(each0, at) => (
+            <Link.linkInline {...step(props, each0, at)}></Link.linkInline>
+          )}
+        </Each>
+      </nav>
+    )
+  },
+  'e-pagination',
+  {"tabBar":"thread-tab-bar"},
+)

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

@@ -0,0 +1,20 @@
+import type { Row } from '../charts.tsx'
+import type { LinkProps } from './link.tsx'
+import type { PaginationProps } from './pagination.tsx'
+
+export function steps(props: PaginationProps): readonly Row[] {
+  const known = new Map(props.map.screens.map((one) => [one.id, one]))
+  const walk = props.sequence.filter((id) => known.has(id))
+  const at = walk.indexOf(props.current)
+  if (at === -1) return []
+
+  const either = [
+    ...(at > 0 ? [{ id: walk[at - 1] as string, way: 'previous' }] : []),
+    ...(at < walk.length - 1 ? [{ id: walk[at + 1] as string, way: 'next' }] : []),
+  ]
+  return either.map((one) => ({ ...one, nameKey: known.get(one.id)?.nameKey ?? `nav.${one.way}` }))
+}
+
+export function step(_props: PaginationProps, row: Row, _at: number): LinkProps {
+  return { navigateTo: String(row['id']), labelKey: String(row['nameKey']), is: 'label' }
+}

package/dist/ui/elements/progress.js

@@ -8,4 +8,4 @@ export const Progress = element('Progress', (props, className) => {
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
         measures: measured(props), });
     return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, role: "progressbar", "aria-valuenow": Number(measured(props).fraction), "aria-valuemin": 0, "aria-valuemax": 100, style: surface.measures, "aria-label": surface.text(props.labelKey), children: _jsx("span", { className: "e-progress-bar" }) }));
-}, 'e-progress');
+}, 'e-progress', { "statTile": "thread-stat-tile" });

package/dist/ui/elements/progress.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 { measured } from './progress.works.ts'
+
+
+export interface ProgressProps {
+  readonly value?: number
+  readonly target?: number
+  readonly labelKey: MessageKey
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Progress: Element<'Progress', ProgressProps> = element(
+  'Progress',
+  (props: ProgressProps, className) => {
+    const surface = useSurface({ className: roleClass(undefined, className),
+    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+    measures: measured(props), })
+    return (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} role="progressbar" aria-valuenow={Number(measured(props).fraction)} aria-valuemin={0} aria-valuemax={100} style={surface.measures} aria-label={surface.text(props.labelKey)}>
+        <span className="e-progress-bar"></span>
+      </div>
+    )
+  },
+  'e-progress',
+  {"statTile":"thread-stat-tile"},
+)

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

@@ -0,0 +1,8 @@
+import type { ProgressProps } from './progress.tsx'
+
+export function measured(props: ProgressProps): Readonly<Record<string, string | number>> {
+  const target = props.target ?? 0
+  const part = target <= 0 ? 0 : Math.min(1, Math.max(0, (props.value ?? 0) / target))
+  const whole = Math.round(part * 100)
+  return { fraction: whole, span: `${String(whole)}%` }
+}

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

@@ -2,7 +2,7 @@
 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 { shown, option, uses } from "./radio-group.works.js";
 export const RadioGroup = element('RadioGroup', (props, className) => {
     const kept = uses(props);
@@ -13,4 +13,4 @@ export const RadioGroup = element('RadioGroup', (props, className) => {
         ],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), role: "radiogroup", "aria-label": surface.text(props.labelKey), children: _jsx(Each, { rows: props.options, by: 'value', children: (each0, at) => (_jsxs("label", { children: [_jsx("input", { ...option(props, kept, each0, at), type: "radio", disabled: surface.marked('disabled') }), _jsx("span", { children: shown(props, each0, surface, kept).caption })] })) }) }));
-}, 'e-radio-group');
+}, 'e-radio-group', { "choice": "thread-choice" });

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"},
+)