@prestack/thread-ui 0.0.1 → 0.0.2

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', {});

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