@prestack/thread-ui 0.0.1 → 0.0.2

package/dist/ui/drag.ts

@@ -0,0 +1,316 @@
+
+
+export const EDGE_SCROLL_DEFAULTS = {
+
+  band: 48,
+
+  speed: 900,
+} as const
+
+export interface Subject {
+  readonly kind: string
+  readonly id: string
+}
+
+export interface DragSession {
+
+  readonly gesture: string
+
+  readonly subject: readonly Subject[]
+
+  readonly from: string
+
+  readonly x: number
+  readonly y: number
+
+  readonly startedAt: number
+
+  readonly at: number
+
+  readonly over?: string
+  readonly overSince: number
+}
+
+let SESSION: DragSession | undefined
+
+export function dragSession(): DragSession | undefined {
+  return SESSION
+}
+
+const LISTENERS = new Set<() => void>()
+
+export function subscribeDrag(listener: () => void): () => void {
+  LISTENERS.add(listener)
+  return () => {
+    LISTENERS.delete(listener)
+  }
+}
+
+function announce(): void {
+  for (const listener of LISTENERS) listener()
+}
+
+export type DragStatus = 'idle' | 'carrying' | 'over' | 'refusing' | 'elsewhere'
+
+export function dragStatusOf(hitBox: string, accepts: readonly string[] | undefined): DragStatus {
+  const session = SESSION
+  if (session === undefined) return 'idle'
+  if (session.from === hitBox) return 'carrying'
+  if (session.over !== hitBox) return 'elsewhere'
+  return accepted(accepts, session) ? 'over' : 'refusing'
+}
+
+export interface Scroller {
+
+  readonly top: number
+  readonly bottom: number
+  readonly left: number
+  readonly right: number
+
+  readonly scrollsVertically: boolean
+  readonly scrollsHorizontally: boolean
+
+  readonly scrollBy: (dx: number, dy: number) => void
+}
+
+export interface Layout {
+
+  readonly hitBoxesAt: (x: number, y: number) => readonly string[]
+
+  readonly scrollersAt: (x: number, y: number) => readonly Scroller[]
+}
+
+export const DOM_LAYOUT: Layout = {
+  hitBoxesAt: (x, y) => {
+    if (typeof document === 'undefined' || typeof document.elementsFromPoint !== 'function') return []
+    const found: string[] = []
+    for (const el of document.elementsFromPoint(x, y)) {
+      const id = el.getAttribute('data-hitbox')
+      if (id !== null) found.push(id)
+    }
+    return found
+  },
+  scrollersAt: (x, y) => {
+    if (typeof document === 'undefined' || typeof document.elementsFromPoint !== 'function') return []
+    const found: Scroller[] = []
+    for (const el of document.elementsFromPoint(x, y)) {
+      if (!(el instanceof HTMLElement)) continue
+      const box = el.getBoundingClientRect()
+      found.push({
+        top: box.top,
+        bottom: box.bottom,
+        left: box.left,
+        right: box.right,
+        scrollsVertically: el.scrollHeight > el.clientHeight,
+        scrollsHorizontally: el.scrollWidth > el.clientWidth,
+        scrollBy: (dx, dy) => {
+          el.scrollLeft += dx
+          el.scrollTop += dy
+        },
+      })
+    }
+    return found
+  },
+}
+
+let LAYOUT: Layout = DOM_LAYOUT
+
+export function setLayout(layout: Layout): () => void {
+  const previous = LAYOUT
+  LAYOUT = layout
+  return () => {
+    LAYOUT = previous
+  }
+}
+
+export function currentLayout(): Layout {
+  return LAYOUT
+}
+
+let CLAIM: string | undefined
+
+export function claimGesture(hitBox: string): boolean {
+  if (CLAIM !== undefined && CLAIM !== hitBox) return false
+  CLAIM = hitBox
+  return true
+}
+
+export function releaseGesture(hitBox: string): void {
+  if (CLAIM === hitBox) CLAIM = undefined
+}
+
+export function gestureClaim(): string | undefined {
+  return CLAIM
+}
+
+export interface DropTarget {
+  readonly id: string
+
+  readonly accepts?: readonly string[]
+
+  readonly collects?: () => Subject | readonly Subject[]
+
+  readonly dwell?: number
+
+  readonly onDrop?: (session: DragSession) => void
+}
+
+const TARGETS = new Map<string, DropTarget>()
+
+export function registerTarget(target: DropTarget): () => void {
+  TARGETS.set(target.id, target)
+  return () => {
+    TARGETS.delete(target.id)
+  }
+}
+
+export function targetFor(id: string): DropTarget | undefined {
+  return TARGETS.get(id)
+}
+
+export function innermostTarget(stack: readonly string[], session: DragSession | undefined = SESSION): DropTarget | undefined {
+  if (session === undefined) return undefined
+  for (const id of stack) {
+    const target = TARGETS.get(id)
+    if (target !== undefined && accepted(target.accepts, session)) return target
+  }
+  return undefined
+}
+
+export interface BeginDrag {
+  readonly gesture: string
+  readonly subject: Subject | readonly Subject[]
+  readonly from: string
+  readonly x: number
+  readonly y: number
+
+  readonly t: number
+}
+
+export function beginDrag(input: BeginDrag): DragSession {
+  if (SESSION !== undefined) {
+    throw new Error(
+      `a drag from "${SESSION.from}" is already in progress, so "${input.from}" cannot start one. ` +
+        'Two live sessions would both receive moves and the drop would commit whichever wrote last.',
+    )
+  }
+  const subject = Array.isArray(input.subject) ? [...(input.subject as readonly Subject[])] : [input.subject as Subject]
+  if (subject.length === 0) throw new Error('a drag carries something — beginDrag was given an empty subject')
+
+  SESSION = {
+    gesture: input.gesture,
+    subject,
+    from: input.from,
+    x: input.x,
+    y: input.y,
+    startedAt: input.t,
+    at: input.t,
+    overSince: input.t,
+  }
+  announce()
+  return SESSION
+}
+
+export interface MoveDrag {
+  readonly x: number
+  readonly y: number
+
+  readonly over?: string
+  readonly t: number
+}
+
+export function moveDrag(input: MoveDrag): DragSession | undefined {
+  if (SESSION === undefined) return undefined
+  const arrived = input.over !== SESSION.over
+  SESSION = {
+    ...SESSION,
+    x: input.x,
+    y: input.y,
+    at: input.t,
+    ...(input.over === undefined ? { over: undefined } : { over: input.over }),
+    overSince: arrived ? input.t : SESSION.overSince,
+  }
+  announce()
+  return SESSION
+}
+
+export function collect(more: Subject | readonly Subject[]): DragSession | undefined {
+  if (SESSION === undefined) return undefined
+  const added = Array.isArray(more) ? (more as readonly Subject[]) : [more as Subject]
+  const have = new Set(SESSION.subject.map((s) => `${s.kind}:${s.id}`))
+  const fresh = added.filter((s) => !have.has(`${s.kind}:${s.id}`))
+  if (fresh.length === 0) return SESSION
+  SESSION = { ...SESSION, subject: [...SESSION.subject, ...fresh] }
+  announce()
+  return SESSION
+}
+
+export function endDrag(): DragSession | undefined {
+  const finished = SESSION
+  SESSION = undefined
+  announce()
+  return finished
+}
+
+export function resetDrag(): void {
+  SESSION = undefined
+  CLAIM = undefined
+  TARGETS.clear()
+  announce()
+}
+
+export function dwell(session: DragSession | undefined = SESSION): number {
+  if (session?.over === undefined) return 0
+  return Math.max(0, session.at - session.overSince)
+}
+
+export function accepted(kinds: readonly string[] | undefined, session: DragSession | undefined = SESSION): boolean {
+  if (kinds === undefined || session === undefined) return false
+  return session.subject.every((s) => kinds.includes(s.kind))
+}
+
+export interface EdgeScrollTuning {
+  readonly band?: number
+  readonly speed?: number
+}
+
+export function edgeScroll(
+  pointer: number,
+  start: number,
+  end: number,
+  dt: number,
+  { band = EDGE_SCROLL_DEFAULTS.band, speed = EDGE_SCROLL_DEFAULTS.speed }: EdgeScrollTuning = {},
+): number {
+  const extent = end - start
+  if (extent <= 0 || speed <= 0 || band <= 0 || dt <= 0) return 0
+
+  const reach = Math.min(band, extent / 2)
+
+  const intoStart = start + reach - pointer
+  if (intoStart > 0) return -Math.min(1, intoStart / reach) * speed * dt
+
+  const intoEnd = pointer - (end - reach)
+  if (intoEnd > 0) return Math.min(1, intoEnd / reach) * speed * dt
+
+  return 0
+}
+
+export function pullEdges(x: number, y: number, dt: number, tuning: EdgeScrollTuning = {}, layout: Layout = LAYOUT): { dx: number; dy: number } {
+  for (const scroller of layout.scrollersAt(x, y)) {
+    if (scroller.scrollsVertically) {
+      const dy = edgeScroll(y, scroller.top, scroller.bottom, dt, tuning)
+      if (dy !== 0) {
+        scroller.scrollBy(0, dy)
+        return { dx: 0, dy }
+      }
+    }
+    if (scroller.scrollsHorizontally) {
+      const dx = edgeScroll(x, scroller.left, scroller.right, dt, tuning)
+      if (dx !== 0) {
+        scroller.scrollBy(dx, 0)
+        return { dx, dy: 0 }
+      }
+    }
+  }
+  return { dx: 0, dy: 0 }
+}

package/dist/ui/elements/accordion.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } 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 { shown, section, header, region, uses } from "./accordion.works.js";
 export const Accordion = element('Accordion', (props, className) => {
     const kept = uses(props);
@@ -13,4 +13,4 @@ export const Accordion = element('Accordion', (props, className) => {
         ],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), children: _jsx(Each, { rows: props.items, by: 'id', children: (each0, at) => (_jsxs("div", { ...section(props, kept, each0, at), children: [_jsx("button", { ...header(props, kept, each0, at), children: shown(props, each0, surface, kept).label }), _jsx("div", { ...region(props, kept, each0, at), children: shown(props, each0, surface, kept).inside })] })) }) }));
-}, 'e-accordion');
+}, 'e-accordion', { "card": "thread-card" });

package/dist/ui/elements/accordion.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+import type { TabItem } from '../disclosure.tsx'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { Each } from '../elements/each.tsx'
+import { shown, section, header, region, uses } from './accordion.works.ts'
+
+
+export interface AccordionProps {
+  readonly items: readonly TabItem[]
+  readonly initial: readonly string[]
+  readonly exclusive?: boolean
+  readonly onChange?: (said: readonly string[]) => void
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Accordion: Element<'Accordion', AccordionProps> = element(
+  'Accordion',
+  (props: AccordionProps, className) => {
+    const kept = uses(props)
+    const surface = useSurface({ className: roleClass(undefined, className),
+    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+    holds: [
+      ...(kept.holds ?? []),
+    ],
+    ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
+    return (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})}>
+        <Each rows={props.items} by={'id'}>
+          {(each0, at) => (
+            <div {...section(props, kept, each0, at)}>
+              <button {...header(props, kept, each0, at)}>{shown(props, each0, surface, kept).label}</button>
+              <div {...region(props, kept, each0, at)}>{shown(props, each0, surface, kept).inside}</div>
+            </div>
+          )}
+        </Each>
+      </div>
+    )
+  },
+  'e-accordion',
+  {"card":"thread-card"},
+)

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

@@ -0,0 +1,66 @@
+import { useId, useState, type ReactNode } from 'react'
+
+import type { Row } from '../charts.tsx'
+import type { Surface } from '../door.ts'
+import type { AccordionProps } from './accordion.tsx'
+
+type Kept = {
+  readonly base: string
+  readonly open: readonly string[]
+  readonly toggle: (id: string) => void
+}
+
+export function uses(props: AccordionProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+  readonly base: string
+  readonly open: readonly string[]
+  readonly toggle: (id: string) => void
+} {
+  const base = useId()
+  const [open, setOpen] = useState<readonly string[]>(props.initial ?? [])
+  return {
+    base,
+    open,
+    toggle: (id: string): void => {
+      const next = open.includes(id)
+        ? open.filter((one) => one !== id)
+        : props.exclusive === true
+          ? [id]
+          : [...open, id]
+      setOpen(next)
+      props.onChange?.(next)
+    },
+  }
+}
+
+export function section(_props: AccordionProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>> {
+  return { 'data-open': kept.open.includes(String(row['id'])) }
+}
+
+export function header(_props: AccordionProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>> {
+  const id = String(row['id'])
+  return {
+    type: 'button',
+    id: `${kept.base}-header-${id}`,
+    'aria-controls': `${kept.base}-region-${id}`,
+    'aria-expanded': kept.open.includes(id),
+    disabled: row['disabled'] === true,
+    onClick: (): void => kept.toggle(id),
+  }
+}
+
+export function region(_props: AccordionProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>> {
+  const id = String(row['id'])
+  return {
+    role: 'region',
+    id: `${kept.base}-region-${id}`,
+    'aria-labelledby': `${kept.base}-header-${id}`,
+    hidden: !kept.open.includes(id),
+  }
+}
+
+export function shown(_props: AccordionProps, row: Row, surface: Surface, _kept: unknown): Readonly<Record<string, ReactNode>> {
+  return { label: surface.text(String(row['labelKey'])), inside: row['content'] as ReactNode }
+}

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

@@ -6,4 +6,4 @@ export const AspectRatio = element('AspectRatio', (props, className) => {
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
         measures: { "ratio": String(props.ratio ?? '') }, });
     return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, style: surface.measures, children: props.children }));
-}, 'e-aspect-ratio');
+}, 'e-aspect-ratio', { "framed": "thread-framed" });

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

@@ -0,0 +1,30 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+
+
+export interface AspectRatioProps {
+  readonly children: ReactNode
+  readonly ratio: number
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const AspectRatio: Element<'AspectRatio', AspectRatioProps> = element(
+  'AspectRatio',
+  (props: AspectRatioProps, className) => {
+    const surface = useSurface({ className,
+    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+    measures: { "ratio": String(props.ratio ?? '') }, })
+    return (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} style={surface.measures}>
+        {props.children}
+      </div>
+    )
+  },
+  'e-aspect-ratio',
+  {"framed":"thread-framed"},
+)

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

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

package/dist/ui/elements/avatar.js

@@ -7,4 +7,4 @@ export const Avatar = element('Avatar', (props, className) => {
     const surface = useSurface({ className: roleClass(undefined, className),
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });
     return (_jsxs("span", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, role: "img", "aria-label": surface.text(props.labelKey), children: [props.src === undefined ? null : _jsx("img", { src: props.src, alt: "" }), _jsx("span", { children: shown(props, surface).lettering })] }));
-}, 'e-avatar');
+}, 'e-avatar', { "avatarRound": "thread-avatar-round" });

package/dist/ui/elements/avatar.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { shown } from './avatar.works.ts'
+
+
+export interface AvatarProps {
+  readonly labelKey: MessageKey
+  readonly src?: string
+  readonly initials?: string
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Avatar: Element<'Avatar', AvatarProps> = element(
+  'Avatar',
+  (props: AvatarProps, className) => {
+    const surface = useSurface({ className: roleClass(undefined, className),
+    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
+    return (
+      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} role="img" aria-label={surface.text(props.labelKey)}>
+        {props.src === undefined ? null : <img src={props.src} alt="" />}
+        <span>{shown(props, surface).lettering}</span>
+      </span>
+    )
+  },
+  'e-avatar',
+  {"avatarRound":"thread-avatar-round"},
+)

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

@@ -0,0 +1,16 @@
+import type { AvatarProps } from './avatar.tsx'
+
+export function shown(props: AvatarProps, surface: { readonly text: (key: AvatarProps['labelKey']) => string }): Readonly<Record<string, string | null>> {
+  if (props.src !== undefined) return { lettering: null }
+  const said = props.initials
+  if (said !== undefined) return { lettering: said }
+  return {
+    lettering: surface
+      .text(props.labelKey)
+      .split(/\s+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part.charAt(0).toUpperCase())
+      .join(''),
+  }
+}

package/dist/ui/elements/badge.js

@@ -7,4 +7,4 @@ export const Badge = element('Badge', (props, className) => {
     const surface = useSurface({ className: roleClass(undefined, className),
         invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, });
     return (_jsx("span", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, children: shows(props, surface) }));
-}, 'e-badge');
+}, 'e-badge', { "chip": "thread-chip" });

package/dist/ui/elements/badge.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { shows } from './badge.works.ts'
+
+
+export interface BadgeProps {
+  readonly labelKey: MessageKey
+  readonly count?: number
+  readonly max?: number
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Badge: Element<'Badge', BadgeProps> = element(
+  'Badge',
+  (props: BadgeProps, className) => {
+    const surface = useSurface({ className: roleClass(undefined, className),
+    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
+    return (
+      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
+        {shows(props, surface)}
+      </span>
+    )
+  },
+  'e-badge',
+  {"chip":"thread-chip"},
+)

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

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react'
+
+import type { BadgeProps } from './badge.tsx'
+
+export function shows(props: BadgeProps, surface: { readonly text: (key: BadgeProps['labelKey']) => string }): ReactNode {
+  const max = props.max ?? 99
+  if (props.count === undefined) return surface.text(props.labelKey)
+  return props.count > max ? `${max}+` : String(props.count)
+}

package/dist/ui/elements/bars.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { roleClass } from "../fonts.js";
 import { measured as marking } from "../charts.js";
 import { element, useSurface } from "../wrappers.js";
-import { Each } from "./each.js";
+import { Each } from "../elements/each.js";
 import { shown, sized, uses } from "./bars.works.js";
 export const Bars = element('Bars', (props, className) => {
     const kept = uses(props);
@@ -14,4 +14,4 @@ export const Bars = element('Bars', (props, className) => {
         ],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), role: "img", ...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) }), children: _jsx(Each, { rows: props.rows, by: props.by, children: (each0, at) => (_jsxs("span", { style: marking(sized(props, kept, each0, at)), children: [_jsx("span", { children: shown(props, each0, surface, kept).label }), _jsx("span", { children: shown(props, each0, surface, kept).amount })] })) }) }));
-}, 'e-bars');
+}, 'e-bars', { "card": "thread-card" });

package/dist/ui/elements/bars.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import type { Row } from '../charts.tsx'
+import { roleClass } from '../fonts.ts'
+import { measured as marking } from '../charts.tsx'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { Each } from '../elements/each.tsx'
+import { shown, sized, uses } from './bars.works.ts'
+
+
+export interface BarsProps {
+  readonly rows: readonly Row[]
+  readonly by: string
+  readonly value: string
+  readonly format?: string
+  readonly titleKey?: MessageKey
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Bars: Element<'Bars', BarsProps> = element(
+  'Bars',
+  (props: BarsProps, className) => {
+    const kept = uses(props)
+    const surface = useSurface({ className: roleClass(undefined, className),
+    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+    holds: [
+      ...(kept.holds ?? []),
+    ],
+    ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
+    return (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} role="img" {...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) })}>
+        <Each rows={props.rows} by={props.by}>
+          {(each0, at) => (
+            <span style={marking(sized(props, kept, each0, at))}>
+              <span>{shown(props, each0, surface, kept).label}</span>
+              <span>{shown(props, each0, surface, kept).amount}</span>
+            </span>
+          )}
+        </Each>
+      </div>
+    )
+  },
+  'e-bars',
+  {"card":"thread-card"},
+)