@prestack/thread-ui 0.0.1 → 0.1.0

package/dist/ui/elements/accordion.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+import type { TabItem } from '../disclosure.tsx'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { Each } from '../elements/each.tsx'
+import { shown, section, header, region, uses } from './accordion.works.ts'
+
+
+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 const Accordion: Element<'Accordion', AccordionProps> = element(
+  'Accordion',
+  (props: AccordionProps, 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 ?? {})}>
+        <Each rows={props.items} by={'id'}>
+          {(each0, at) => (
+            <div {...section(props, kept, each0, at)}>
+              <button {...header(props, kept, each0, at)}>{shown(props, each0, surface, kept).label}</button>
+              <div {...region(props, kept, each0, at)}>{shown(props, each0, surface, kept).inside}</div>
+            </div>
+          )}
+        </Each>
+      </div>
+    )
+  },
+  'e-accordion',
+  {"card":"thread-card"},
+)

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

@@ -0,0 +1,66 @@
+import { useId, useState, 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 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
+} {
+  const base = useId()
+  const [open, setOpen] = useState<readonly string[]>(props.initial ?? [])
+  return {
+    base,
+    open,
+    toggle: (id: string): void => {
+      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: AccordionProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>> {
+  return { 'data-open': kept.open.includes(String(row['id'])) }
+}
+
+export function header(_props: AccordionProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>> {
+  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: (): void => kept.toggle(id),
+  }
+}
+
+export function region(_props: AccordionProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>> {
+  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: AccordionProps, row: Row, surface: Surface, _kept: unknown): Readonly<Record<string, ReactNode>> {
+  return { label: surface.text(String(row['labelKey'])), inside: row['content'] as ReactNode }
+}

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

@@ -6,4 +6,4 @@ export const AspectRatio = element('AspectRatio', (props, 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');
+}, 'e-aspect-ratio', { "framed": "thread-framed" });

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

@@ -0,0 +1,30 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import { type Element, element, useSurface } 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 const AspectRatio: Element<'AspectRatio', AspectRatioProps> = element(
+  'AspectRatio',
+  (props: AspectRatioProps, 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 (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} style={surface.measures}>
+        {props.children}
+      </div>
+    )
+  },
+  'e-aspect-ratio',
+  {"framed":"thread-framed"},
+)

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

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

package/dist/ui/elements/avatar.js

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

package/dist/ui/elements/avatar.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 { shown } from './avatar.works.ts'
+
+
+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 const Avatar: Element<'Avatar', AvatarProps> = element(
+  'Avatar',
+  (props: AvatarProps, 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} role="img" aria-label={surface.text(props.labelKey)}>
+        {props.src === undefined ? null : <img src={props.src} alt="" />}
+        <span>{shown(props, surface).lettering}</span>
+      </span>
+    )
+  },
+  'e-avatar',
+  {"avatarRound":"thread-avatar-round"},
+)

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

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

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

package/dist/ui/elements/badge.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'
+import { shows } from './badge.works.ts'
+
+
+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 const Badge: Element<'Badge', BadgeProps> = element(
+  'Badge',
+  (props: BadgeProps, 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}>
+        {shows(props, surface)}
+      </span>
+    )
+  },
+  'e-badge',
+  {"chip":"thread-chip"},
+)

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react'
+
+import type { BadgeProps } from './badge.tsx'
+
+export function shows(props: BadgeProps, surface: { readonly text: (key: BadgeProps['labelKey']) => string }): ReactNode {
+  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.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 "./bars.works.js";
 export const Bars = element('Bars', (props, className) => {
     const kept = uses(props);
@@ -14,4 +14,4 @@ export const Bars = element('Bars', (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-bars');
+}, 'e-bars', { "card": "thread-card" });

package/dist/ui/elements/bars.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 './bars.works.ts'
+
+
+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 const Bars: Element<'Bars', BarsProps> = element(
+  'Bars',
+  (props: BarsProps, 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-bars',
+  {"card":"thread-card"},
+)

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

@@ -0,0 +1,29 @@
+import { formatValue } from '../validators.ts'
+import { seriesColour } from '../series.ts'
+import { num, str, useRamp, type Row } from '../charts.tsx'
+import type { BarsProps } from './bars.tsx'
+
+export function uses(props: BarsProps): {
+  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 } : {}), ramp }
+}
+
+export function sized(props: BarsProps, kept: { readonly ramp: readonly string[] }, row: Row, at: number): Readonly<Record<string, string | number>> {
+  const most = Math.max(...props.rows.map((one: Row) => num(one, props.value)), 0) || 1
+  return {
+    series: seriesColour(kept.ramp, at),
+    fraction: `${((num(row, props.value) / most) * 100).toFixed(1)}%`,
+  }
+}
+
+export function shown(props: BarsProps, row: Row, _surface: unknown, _kept?: unknown): Readonly<Record<string, string>> {
+  return {
+    label: str(row, props.by),
+    amount: String(formatValue(props.format ?? 'number', num(row, props.value))),
+  }
+}

package/dist/ui/elements/box.js

@@ -6,6 +6,7 @@ export const Box = element('Box', (props, className) => {
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
         holds: [
             ...(props.scrolling === true ? ['scrolling'] : []),
-        ], });
+        ],
+        raises: ['scrolling'], });
     return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(props.labelKey === undefined ? {} : { role: 'group' }), ...(props.labelKey === undefined ? {} : { 'aria-label': surface.text(props.labelKey) }), children: props.children }));
-}, 'e-box');
+}, 'e-box', { "card": "thread-card", "listRow": "thread-list-row", "bubbleThem": "thread-bubble-them", "bubbleMe": "thread-bubble-me" });

package/dist/ui/elements/box.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { MessageKey } from '../content.tsx'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+
+
+export interface BoxProps {
+  readonly children: ReactNode
+  readonly labelKey?: MessageKey
+  readonly scrolling?: boolean
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Box: Element<'Box', BoxProps> = element(
+  'Box',
+  (props: BoxProps, className) => {
+    const surface = useSurface({ className,
+    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+    holds: [
+      ...(props.scrolling === true ? ['scrolling' as const] : []),
+    ],
+    raises: ['scrolling' as const], })
+    return (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(props.labelKey === undefined ? {} : { role: 'group' as const })} {...(props.labelKey === undefined ? {} : { 'aria-label': surface.text(props.labelKey) })}>
+        {props.children}
+      </div>
+    )
+  },
+  'e-box',
+  {"card":"thread-card","listRow":"thread-list-row","bubbleThem":"thread-bubble-them","bubbleMe":"thread-bubble-me"},
+)

package/dist/ui/elements/breadcrumb.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 { crumb, steps } from "./breadcrumb.works.js";
 export const Breadcrumb = element('Breadcrumb', (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.breadcrumb'), children: _jsx(Each, { rows: steps(props), by: 'id', children: (each0, at) => (_jsx(Link.linkInline, { ...crumb(props, each0, at) })) }) }));
-}, 'e-breadcrumb');
+}, 'e-breadcrumb', { "tabBar": "thread-tab-bar" });

package/dist/ui/elements/breadcrumb.tsx

@@ -0,0 +1,37 @@
+'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 { crumb, steps } from './breadcrumb.works.ts'
+
+
+export interface BreadcrumbProps {
+  readonly map: MapIsland
+  readonly current: string
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Breadcrumb: Element<'Breadcrumb', BreadcrumbProps> = element(
+  'Breadcrumb',
+  (props: BreadcrumbProps, 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.breadcrumb')}>
+        <Each rows={steps(props)} by={'id'}>
+          {(each0, at) => (
+            <Link.linkInline {...crumb(props, each0, at)}></Link.linkInline>
+          )}
+        </Each>
+      </nav>
+    )
+  },
+  'e-breadcrumb',
+  {"tabBar":"thread-tab-bar"},
+)

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

@@ -0,0 +1,24 @@
+import { trailTo } from '../navigation.tsx'
+import type { Row } from '../charts.tsx'
+import type { BreadcrumbProps } from './breadcrumb.tsx'
+import type { LinkProps } from './link.tsx'
+
+export function steps(props: BreadcrumbProps): readonly Row[] {
+  const known = new Map(props.map.screens.map((one) => [one.id, one]))
+  if (!known.has(props.current)) return []
+  const trail = trailTo(props.map, props.current)
+  return trail.flatMap((id, at) => {
+    const screen = known.get(id)
+    if (screen === undefined) return []
+    return [{ id, nameKey: screen.nameKey, here: at === trail.length - 1 }]
+  })
+}
+
+export function crumb(_props: BreadcrumbProps, row: Row, _at: number): LinkProps & { readonly 'aria-current'?: 'page' } {
+  return {
+    navigateTo: String(row['id']),
+    labelKey: String(row['nameKey']),
+    is: 'label',
+    ...(row['here'] === true ? ({ 'aria-current': 'page' } as const) : {}),
+  }
+}

package/dist/ui/elements/button.js

@@ -13,4 +13,4 @@ export const Button = element('Button', (props, className) => {
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     const wired = wires(props, kept, surface);
     return (_jsxs("button", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), ...(wired.on ?? {}), children: [!iconed(props, kept) ? null : _jsx("span", { className: "e-button-symbol", children: shown(props, surface, kept, wired).symbol }), !worded(props, kept) ? null : _jsx("span", { children: shown(props, surface, kept, wired).wording })] }));
-}, 'e-button');
+}, 'e-button', { "buttonFill": "thread-button-fill", "buttonNormal": "thread-button-normal", "buttonGhost": "thread-button-ghost", "buttonBorder": "thread-button-border", "buttonDestructive": "thread-button-destructive", "buttonDestructiveGhost": "thread-button-destructive-ghost", "buttonCta": "thread-button-cta", "buttonQuiet": "thread-button-quiet", "buttonGlass": "thread-button-glass" });

package/dist/ui/elements/button.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { shown, iconed, worded, uses, wires } from './button.works.tsx'
+
+
+export interface ButtonProps {
+  readonly label: MessageKey
+  readonly with?: Readonly<Record<string, unknown>>
+  readonly icon?: string
+  readonly shows?: string
+  readonly type?: string
+  readonly disabled?: boolean
+  readonly loading?: boolean
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly navigateTo?: string
+  readonly onPress?: () => void
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Button: Element<'Button', ButtonProps> = element(
+  'Button',
+  (props: ButtonProps, 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 }), })
+    const wired = wires(props, kept, surface)
+    return (
+      <button className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} {...(wired.on ?? {})}>
+        {!iconed(props, kept) ? null : <span className="e-button-symbol">{shown(props, surface, kept, wired).symbol}</span>}
+        {!worded(props, kept) ? null : <span>{shown(props, surface, kept, wired).wording}</span>}
+      </button>
+    )
+  },
+  'e-button',
+  {"buttonFill":"thread-button-fill","buttonNormal":"thread-button-normal","buttonGhost":"thread-button-ghost","buttonBorder":"thread-button-border","buttonDestructive":"thread-button-destructive","buttonDestructiveGhost":"thread-button-destructive-ghost","buttonCta":"thread-button-cta","buttonQuiet":"thread-button-quiet","buttonGlass":"thread-button-glass"},
+)

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

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react'
+
+import { pressOf, usePress } from '../wrappers.tsx'
+import type { Surface } from '../door.ts'
+import { drawn } from './glyph.works.tsx'
+import type { ButtonProps } from './button.tsx'
+
+export function uses(props: ButtonProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+  readonly press: (() => void) | undefined
+} {
+  return {
+    holds: [
+      ...(props.disabled === true ? (['disabled'] as const) : []),
+      ...(props.loading === true ? (['loading'] as const) : []),
+    ],
+    press: usePress(pressOf(props), { element: 'Button', name: props.label }),
+  }
+}
+
+export function wires(
+  props: ButtonProps,
+  kept: { readonly press: (() => void) | undefined },
+  surface: Surface,
+): { readonly on: Readonly<Record<string, unknown>> } {
+  const inert = surface.marked('disabled') || surface.marked('loading')
+  return {
+    on: {
+      type: props.type ?? 'button',
+      disabled: inert,
+      ...(props.shows === 'icon' ? { 'aria-label': surface.text(props.label, props.with) } : {}),
+      onClick: inert ? undefined : kept.press,
+    },
+  }
+}
+
+export function iconed(props: ButtonProps, _kept?: unknown): boolean {
+  return props.icon !== undefined
+}
+
+export function worded(props: ButtonProps, _kept?: unknown): boolean {
+  return props.shows !== 'icon'
+}
+
+export function shown(props: ButtonProps, surface: Surface, _kept: unknown, _wired?: unknown): Readonly<Record<string, ReactNode>> {
+  return {
+    symbol: props.icon === undefined ? null : drawn(props.icon, { 'aria-hidden': true }),
+    wording: props.shows === 'icon' ? null : surface.text(props.label, props.with),
+  }
+}

package/dist/ui/elements/column.js

@@ -5,4 +5,4 @@ export const Column = element('Column', (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-column');
+}, 'e-column', {});

package/dist/ui/elements/column.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+
+
+export interface ColumnProps {
+  readonly children: ReactNode
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Column: Element<'Column', ColumnProps> = element(
+  'Column',
+  (props: ColumnProps, 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-column',
+  {},
+)

package/dist/ui/elements/consent.js

@@ -7,7 +7,7 @@ import { Text } from "./text.js";
 import { Toggle } from "./toggle.js";
 import { Button } from "./button.js";
 import { element, useSurface } from "../wrappers.js";
-import { Each } from "./each.js";
+import { Each } from "../elements/each.js";
 import { title, policy, hasPolicy, categories, label, describe, chooser, optional, fixed, required, withdraw, withdrawable, decline, accept, acceptAll, uses } from "./consent.works.js";
 export const Consent = element('Consent', (props, className) => {
     const kept = uses(props);
@@ -18,4 +18,4 @@ export const Consent = element('Consent', (props, className) => {
         ],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsx(_Fragment, { children: _jsx(Box.card, { children: _jsxs(Column, { children: [_jsx(Text, { ...title(props, kept) }), !hasPolicy(props, kept) ? null : _jsx(Text, { ...policy(props, kept) }), _jsx(Column, { children: _jsx(Each, { rows: categories(props, kept), by: 'id', children: (each0, at) => (_jsxs(Box, { children: [_jsxs(Column, { children: [_jsx(Text, { ...label(props, kept, each0, at) }), _jsx(Text, { ...describe(props, kept, each0, at) })] }), !optional(props, kept, each0) ? null : _jsx(Toggle.input, { ...chooser(props, kept, each0, at) }), !required(props, kept, each0) ? null : _jsx(Text, { ...fixed(props, kept, each0, at) })] })) }) }), _jsxs(Box, { children: [!withdrawable(props, kept) ? null : _jsx(Button.buttonQuiet, { ...withdraw(props, kept) }), _jsx(Button.buttonBorder, { ...decline(props, kept) }), _jsx(Button.buttonBorder, { ...accept(props, kept) }), _jsx(Button.buttonFill, { ...acceptAll(props, kept) })] })] }) }) }));
-}, 'e-consent');
+}, 'e-consent', {});