@prestack/thread-ui 0.0.1 → 0.0.2

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

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

@@ -0,0 +1,37 @@
+import { formatValue } from '../validators.ts'
+import { seriesColour } from '../series.ts'
+import { num, str, useRamp, type Row } from '../charts.tsx'
+import type { FunnelProps } from './funnel.tsx'
+
+export function uses(props: FunnelProps): {
+  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: FunnelProps,
+  kept: { readonly ramp: readonly string[] },
+  row: Row,
+  at: number,
+): Readonly<Record<string, string | number>> {
+  const top = num(props.rows[0] as Row, props.value) || 1
+  const before = at === 0 ? null : num(props.rows[at - 1] as Row, props.value)
+  const drop = before === null || before === 0 ? null : 1 - num(row, props.value) / before
+  return {
+    series: seriesColour(kept.ramp, at),
+    fraction: `${((num(row, props.value) / top) * 100).toFixed(1)}%`,
+    ...(drop === null ? {} : { drop: `${(drop * 100).toFixed(1)}%` }),
+  }
+}
+
+export function shown(props: FunnelProps, 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/gauge.js

@@ -12,4 +12,4 @@ export const Gauge = element('Gauge', (props, className) => {
         ],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsxs("svg", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), role: "img", "aria-label": surface.text(props.labelKey), children: [_jsx("path", { ...track(props, kept) }), _jsx("path", { ...needle(props, kept) })] }));
-}, 'e-gauge');
+}, 'e-gauge', { "statTile": "thread-stat-tile" });

package/dist/ui/elements/gauge.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { track, needle, uses } from './gauge.works.ts'
+
+
+export interface GaugeProps {
+  readonly value?: number
+  readonly min?: number
+  readonly max?: number
+  readonly labelKey: MessageKey
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Gauge: Element<'Gauge', GaugeProps> = element(
+  'Gauge',
+  (props: GaugeProps, 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" aria-label={surface.text(props.labelKey)}>
+        <path {...track(props, kept)}></path>
+        <path {...needle(props, kept)}></path>
+      </svg>
+    )
+  },
+  'e-gauge',
+  {"statTile":"thread-stat-tile"},
+)

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

@@ -0,0 +1,42 @@
+import { useRamp } from '../charts.tsx'
+import type { GaugeProps } from './gauge.tsx'
+
+const LEFT = 10
+const RIGHT = 90
+const MIDDLE = 50
+const RADIUS = 40
+
+export function uses(_props: GaugeProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+  readonly ramp: readonly string[]
+} {
+  return { on: { viewBox: `0 0 100 56` }, ramp: useRamp(1) }
+}
+
+export function track(_props: GaugeProps, _kept: unknown): Readonly<Record<string, string | number>> {
+  return {
+    d: `M ${String(LEFT)} ${String(MIDDLE)} A ${String(RADIUS)} ${String(RADIUS)} 0 0 1 ${String(RIGHT)} ${String(MIDDLE)}`,
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeOpacity: 0.15,
+    strokeWidth: 8,
+  }
+}
+
+export function needle(props: GaugeProps, kept: { readonly ramp: readonly string[] }): Readonly<Record<string, string | number>> {
+  const least = props.min ?? 0
+  const most = props.max ?? 0
+  const span = most - least
+  const part = span <= 0 ? 0 : Math.min(1, Math.max(0, ((props.value ?? 0) - least) / span))
+  const angle = Math.PI * (1 - part)
+  return {
+    d:
+      `M ${String(LEFT)} ${String(MIDDLE)} A ${String(RADIUS)} ${String(RADIUS)} 0 0 1 ` +
+      `${(MIDDLE + RADIUS * Math.cos(angle)).toFixed(2)} ${(MIDDLE - RADIUS * Math.sin(angle)).toFixed(2)}`,
+    fill: 'none',
+    stroke: kept.ramp[0] ?? 'currentColor',
+    strokeWidth: 8,
+  }
+}

package/dist/ui/elements/glyph.js

@@ -6,4 +6,4 @@ export const Glyph = element('Glyph', (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-glyph');
+}, 'e-glyph', { "glyphPlain": "thread-glyph-plain" });

package/dist/ui/elements/glyph.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { shows } from './glyph.works.tsx'
+
+
+export interface GlyphProps {
+  readonly name: string
+  readonly labelKey?: MessageKey
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Glyph: Element<'Glyph', GlyphProps> = element(
+  'Glyph',
+  (props: GlyphProps, 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-glyph',
+  {"glyphPlain":"thread-glyph-plain"},
+)

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

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react'
+
+import type { Surface } from '../door.ts'
+import { drawnFor, iconSize, installedSet, strokeFor } from '../icons.ts'
+import type { GlyphProps } from './glyph.tsx'
+
+type Drawn = (props: {
+  readonly size?: number
+  readonly strokeWidth?: number
+  readonly className?: string
+  readonly 'aria-hidden'?: boolean
+  readonly 'aria-label'?: string
+  readonly role?: string
+}) => ReactNode
+
+export function drawn(name: string, semantics: Readonly<Record<string, unknown>>, className?: string): ReactNode {
+  const Symbol = drawnFor(name) as Drawn
+  const set = installedSet()
+  const stroke = set === undefined ? undefined : strokeFor(set)
+
+  return (
+    <Symbol
+      size={iconSize()}
+      {...(className === undefined ? {} : { className })}
+      {...(stroke === undefined ? {} : { strokeWidth: stroke })}
+      {...semantics}
+    />
+  )
+}
+
+export function shows(props: GlyphProps, surface: Surface): ReactNode {
+  return drawn(
+    props.name,
+    {
+      ...surface.marks,
+      ...(props.labelKey === undefined
+        ? ({ 'aria-hidden': true } as const)
+        : ({ role: 'img', 'aria-label': surface.text(props.labelKey) } as const)),
+    },
+    surface.className,
+  )
+}

package/dist/ui/elements/grid.js

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

package/dist/ui/elements/grid.tsx

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

package/dist/ui/elements/heatmap.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } 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 { sized, uses } from "./heatmap.works.js";
 export const Heatmap = element('Heatmap', (props, className) => {
     const kept = uses(props);
@@ -14,4 +14,4 @@ export const Heatmap = element('Heatmap', (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) => (_jsx("span", { style: marking(sized(props, kept, each0, at)) })) }) }));
-}, 'e-heatmap');
+}, 'e-heatmap', { "card": "thread-card" });

package/dist/ui/elements/heatmap.tsx

@@ -0,0 +1,47 @@
+'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 { sized, uses } from './heatmap.works.ts'
+
+
+export interface HeatmapProps {
+  readonly rows: readonly Row[]
+  readonly by: string
+  readonly x: string
+  readonly y: string
+  readonly value?: string
+  readonly titleKey?: MessageKey
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Heatmap: Element<'Heatmap', HeatmapProps> = element(
+  'Heatmap',
+  (props: HeatmapProps, 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>
+          )}
+        </Each>
+      </div>
+    )
+  },
+  'e-heatmap',
+  {"card":"thread-card"},
+)

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

@@ -0,0 +1,24 @@
+import { num, useRamp, type Row } from '../charts.tsx'
+import type { HeatmapProps } from './heatmap.tsx'
+
+export function uses(props: HeatmapProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+  readonly ramp: readonly string[]
+} {
+  const ramp = useRamp(1)
+  return { ...(props.rows.length === 0 ? { holds: ['empty'] as const } : {}), ramp }
+}
+
+export function sized(
+  props: HeatmapProps,
+  kept: { readonly ramp: readonly string[] },
+  row: Row,
+  _at: number,
+): Readonly<Record<string, string | number>> {
+  const readings = props.rows.map((one: Row) => (props.value === undefined ? 1 : num(one, props.value)))
+  const most = Math.max(...readings, 0) || 1
+  const here = props.value === undefined ? 1 : num(row, props.value)
+  return { series: kept.ramp[0] ?? '', share: Math.max(0.08, here / most) }
+}

package/dist/ui/elements/hit-box.js

@@ -12,4 +12,4 @@ export const HitBox = element('HitBox', (props, className) => {
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     const wired = wires(props, kept, surface);
     return (_jsxs("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), ...(wired.on ?? {}), children: [props.children, _jsx("div", { className: "e-hit-box-carried", children: shown(props, surface, kept, wired).carried })] }));
-}, 'e-hit-box');
+}, 'e-hit-box', { "tapTarget": "thread-tap-target" });