@prestack/thread-ui 0.1.10 → 0.1.11

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

@@ -1,132 +0,0 @@
-'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.tsx

@@ -1,45 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import type { Row } from '../charts.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.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?: keyof Dispatching
-  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

@@ -1,42 +0,0 @@
-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.tsx

@@ -1,34 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import type { Row } from '../charts.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.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?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Each: Element<'Each', EachProps> = element(
-  'Each',
-  (props: EachProps, className) => {
-    const surface = useSurface({ className: roleClass(undefined, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
-    return (
-      shows(props, surface)
-    )
-  },
-  'e-each',
-  {},
-)

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

@@ -1,82 +0,0 @@
-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.tsx

@@ -1,33 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-
-
-export interface EmptyProps {
-  readonly labelKey: MessageKey
-  readonly dispatch?: keyof Dispatching
-  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.tsx

@@ -1,45 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.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?: keyof Dispatching
-  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

@@ -1,65 +0,0 @@
-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.tsx

@@ -1,50 +0,0 @@
-'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 { Dispatching } from '../checked.ts'
-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?: keyof Dispatching
-  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

@@ -1,37 +0,0 @@
-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.tsx

@@ -1,40 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.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?: keyof Dispatching
-  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

@@ -1,42 +0,0 @@
-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,
-  }
-}