@prestack/thread-ui 0.1.10 → 0.1.11

package/dist/ui/elements/link.tsx

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

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

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

package/dist/ui/elements/media.tsx

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

package/dist/ui/elements/menu.tsx

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

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

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

package/dist/ui/elements/money.tsx

@@ -1,36 +0,0 @@
-'use client'
-
-import { roleClass, type FontRoleId } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { shows } from './money.works.ts'
-
-
-export interface MoneyProps {
-  readonly value?: unknown
-  readonly is?: FontRoleId
-  readonly invalid?: boolean
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Money: Element<'Money', MoneyProps> = element(
-  'Money',
-  (props: MoneyProps, className) => {
-    const surface = useSurface({ className: roleClass(props.is, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
-    holds: [
-      ...(props.invalid === true ? ['invalid' as const] : []),
-    ],
-    raises: ['invalid' as const], })
-    return (
-      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
-        {shows(props, surface)}
-      </span>
-    )
-  },
-  'e-money',
-  {},
-)

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

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

package/dist/ui/elements/pagination.tsx

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

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

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

package/dist/ui/elements/progress.tsx

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

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

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

package/dist/ui/elements/radio-group.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 type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { Each } from '../elements/each.tsx'
-import { shown, option, uses } from './radio-group.works.ts'
-
-
-export interface RadioGroupProps {
-  readonly name: string
-  readonly labelKey: MessageKey
-  readonly options: readonly Row[]
-  readonly chosen?: string
-  readonly onValue?: (said: string) => void
-  readonly disabled?: boolean
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const RadioGroup: Element<'RadioGroup', RadioGroupProps> = element(
-  'RadioGroup',
-  (props: RadioGroupProps, className) => {
-    const kept = uses(props)
-    const surface = useSurface({ className: roleClass(undefined, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
-    holds: [
-      ...(kept.holds ?? []),
-    ],
-    ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
-    return (
-      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} role="radiogroup" aria-label={surface.text(props.labelKey)}>
-        <Each rows={props.options} by={'value'}>
-          {(each0, at) => (
-            <label>
-              <input {...option(props, kept, each0, at)} type="radio" disabled={surface.marked('disabled')} />
-              <span>{shown(props, each0, surface, kept).caption}</span>
-            </label>
-          )}
-        </Each>
-      </div>
-    )
-  },
-  'e-radio-group',
-  {"choice":"thread-choice"},
-)

package/dist/ui/elements/radio-group.works.ts

@@ -1,33 +0,0 @@
-import { useRef } from 'react'
-
-import { ITEM_ATTR, useRovingFocus } from '../roving-focus.ts'
-import type { Row } from '../charts.tsx'
-import type { Surface } from '../door.ts'
-import type { RadioGroupProps } from './radio-group.tsx'
-
-export function uses(props: RadioGroupProps): {
-  readonly holds?: readonly string[]
-  readonly animates?: boolean
-  readonly on: Readonly<Record<string, unknown>>
-} {
-  const group = useRef<HTMLDivElement>(null)
-  useRovingFocus(group, { orientation: 'vertical' })
-  return {
-    ...(props.disabled === true ? { holds: ['disabled'] as const } : {}),
-    on: { ref: group },
-  }
-}
-
-export function option(props: RadioGroupProps, _kept: unknown, row: Row, _at: number): Readonly<Record<string, unknown>> {
-  return {
-    ...{ [ITEM_ATTR]: '' },
-    name: props.name,
-    value: String(row['value']),
-    checked: props.chosen === row['value'],
-    onChange: (): void => props.onValue?.(String(row['value'])),
-  }
-}
-
-export function shown(_props: RadioGroupProps, row: Row, surface: Surface, _kept?: unknown): Readonly<Record<string, string>> {
-  return { caption: surface.text(String(row['labelKey'])) }
-}

package/dist/ui/elements/row.tsx

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

package/dist/ui/elements/scatter.tsx

@@ -1,42 +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 { point, uses } from './scatter.works.ts'
-
-
-export interface ScatterProps {
-  readonly rows: readonly Row[]
-  readonly x: string
-  readonly y: string
-  readonly titleKey?: MessageKey
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Scatter: Element<'Scatter', ScatterProps> = element(
-  'Scatter',
-  (props: ScatterProps, 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) })}>
-        {props.rows.map((each0, at) => (
-            <circle key={at} {...point(props, kept, each0, at)}></circle>
-        ))}
-      </svg>
-    )
-  },
-  'e-scatter',
-  {"card":"thread-card"},
-)

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

@@ -1,38 +0,0 @@
-import { num, useRamp, type Row } from '../charts.tsx'
-import type { ScatterProps } from './scatter.tsx'
-
-const SIDE = 100
-
-export function uses(props: ScatterProps): {
-  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 } : {}),
-    on: { viewBox: `0 0 ${String(SIDE)} ${String(SIDE)}` },
-    ramp,
-  }
-}
-
-export function point(
-  props: ScatterProps,
-  kept: { readonly ramp: readonly string[] },
-  row: Row,
-  _at: number,
-): Readonly<Record<string, string | number>> {
-  const xs = props.rows.map((one: Row) => num(one, props.x))
-  const ys = props.rows.map((one: Row) => num(one, props.y))
-  const leastX = Math.min(...xs)
-  const leastY = Math.min(...ys)
-  const spanX = Math.max(...xs) - leastX || 1
-  const spanY = Math.max(...ys) - leastY || 1
-  return {
-    cx: (((num(row, props.x) - leastX) / spanX) * SIDE).toFixed(2),
-    cy: (SIDE - ((num(row, props.y) - leastY) / spanY) * SIDE).toFixed(2),
-    r: 2,
-    fill: kept.ramp[0] ?? 'currentColor',
-  }
-}