@prestack/thread-ui 0.0.1 → 0.0.2

package/dist/ui/elements/surface.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { uses } from './surface.works.ts'
+
+
+export interface SurfaceProps {
+  readonly children: ReactNode
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Surface: Element<'Surface', SurfaceProps> = element(
+  'Surface',
+  (props: SurfaceProps, className) => {
+    const kept = uses(props)
+    const surface = useSurface({ className,
+    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
+    holds: [
+      ...(kept.holds ?? []),
+    ],
+    animates: true,
+    ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
+    return (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})}>
+        {props.children}
+      </div>
+    )
+  },
+  'e-surface',
+  {"card":"thread-card"},
+)

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

@@ -0,0 +1,9 @@
+import { useVisibility } from '../wrappers.tsx'
+
+export function uses(_props: unknown): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on: { readonly ref: (node: HTMLElement | null) => void }
+} {
+  return { on: { ref: useVisibility(true) } }
+}

package/dist/ui/elements/table.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, heading, uses } from "./table.works.js";
 export const Table = element('Table', (props, className) => {
     const kept = uses(props);
@@ -13,4 +13,4 @@ export const Table = element('Table', (props, className) => {
         ],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsxs("table", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), ...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) }), children: [_jsx("thead", { children: _jsx("tr", { children: _jsx(Each, { rows: props.columns, by: 'field', children: (each0, at) => (_jsx("th", { ...heading(props, kept, each0, at), children: shown(props, each0, surface, kept).heading })) }) }) }), _jsx("tbody", { children: _jsx(Each, { rows: props.rows, by: props.by, children: (each0, at) => (_jsx("tr", { children: _jsx(Each, { rows: props.columns, by: 'field', children: (each1, at) => (_jsx("td", { children: shown(props, each0, each1, surface, kept).cell })) }) })) }) })] }));
-}, 'e-table');
+}, 'e-table', { "card": "thread-card" });

package/dist/ui/elements/table.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import type { Row } from '../charts.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { Each } from '../elements/each.tsx'
+import { shown, heading, uses } from './table.works.ts'
+
+
+export interface TableProps {
+  readonly rows: readonly Row[]
+  readonly columns: readonly Row[]
+  readonly by: string
+  readonly titleKey?: MessageKey
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Table: Element<'Table', TableProps> = element(
+  'Table',
+  (props: TableProps, 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 (
+      <table className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} {...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) })}>
+        <thead>
+          <tr>
+            <Each rows={props.columns} by={'field'}>
+              {(each0, at) => (
+                <th {...heading(props, kept, each0, at)}>{shown(props, each0, surface, kept).heading}</th>
+              )}
+            </Each>
+          </tr>
+        </thead>
+        <tbody>
+          <Each rows={props.rows} by={props.by}>
+            {(each0, at) => (
+              <tr>
+                <Each rows={props.columns} by={'field'}>
+                  {(each1, at) => (
+                    <td>{shown(props, each0, each1, surface, kept).cell}</td>
+                  )}
+                </Each>
+              </tr>
+            )}
+          </Each>
+        </tbody>
+      </table>
+    )
+  },
+  'e-table',
+  {"card":"thread-card"},
+)

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

@@ -0,0 +1,30 @@
+import { formatValue } from '../validators.ts'
+import type { ReactNode } from 'react'
+
+import type { Row } from '../charts.tsx'
+import type { Surface } from '../door.ts'
+import type { TableProps } from './table.tsx'
+
+export function uses(props: TableProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+} {
+  return props.rows.length === 0 ? { holds: ['empty'] } : {}
+}
+
+export function shown(
+  _props: TableProps,
+  ...rest: readonly [Row, Surface, unknown] | readonly [Row, Row, Surface, unknown]
+): Readonly<Record<string, ReactNode>> {
+  if (rest.length === 3) {
+    const [column, surface] = rest
+    return { heading: surface.text(String(column['labelKey'])) }
+  }
+  const [row, column] = rest
+  return { cell: formatValue(String(column['format'] ?? 'text'), row[String(column['field'])]) }
+}
+
+export function heading(_props: TableProps, _kept: unknown, _column: Row, _at: number): Readonly<Record<string, string>> {
+  return { scope: 'col' }
+}

package/dist/ui/elements/tabs.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, strip, tab, panel, opened, uses } from "./tabs.works.js";
 export const Tabs = element('Tabs', (props, className) => {
     const kept = uses(props);
@@ -13,4 +13,4 @@ export const Tabs = element('Tabs', (props, className) => {
         ],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsxs("div", { ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), children: [_jsx("div", { className: `e-tabs-strip ${surface.className ?? ''}`, ...strip(props, kept), children: _jsx(Each, { rows: props.items, by: 'id', children: (each0, at) => (_jsx("button", { className: "e-tabs-tab", ...tab(props, kept, each0, at), children: shown(props, each0, surface, kept).label })) }) }), !opened(props, kept) ? null : _jsx("div", { ...panel(props, kept), children: shown(props, surface, kept).inside })] }));
-}, 'e-tabs');
+}, 'e-tabs', { "tabBar": "thread-tab-bar" });

package/dist/ui/elements/tabs.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, strip, tab, panel, opened, uses } from './tabs.works.ts'
+
+
+export interface TabsProps {
+  readonly items: readonly TabItem[]
+  readonly initial?: string
+  readonly onChange?: (said: string) => void
+  readonly orientation?: string
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Tabs: Element<'Tabs', TabsProps> = element(
+  'Tabs',
+  (props: TabsProps, 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 {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})}>
+        <div className={`e-tabs-strip ${surface.className ?? ''}`} {...strip(props, kept)}>
+          <Each rows={props.items} by={'id'}>
+            {(each0, at) => (
+              <button className="e-tabs-tab" {...tab(props, kept, each0, at)}>{shown(props, each0, surface, kept).label}</button>
+            )}
+          </Each>
+        </div>
+        {!opened(props, kept) ? null : <div {...panel(props, kept)}>{shown(props, surface, kept).inside}</div>}
+      </div>
+    )
+  },
+  'e-tabs',
+  {"tabBar":"thread-tab-bar"},
+)

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

@@ -0,0 +1,84 @@
+import { useId, useRef, useState } from 'react'
+
+import { ITEM_ATTR, useRovingFocus } from '../roving-focus.ts'
+import type { ReactNode, RefObject } from 'react'
+
+import type { Row } from '../charts.tsx'
+import type { Surface } from '../door.ts'
+import type { TabsProps } from './tabs.tsx'
+
+type Kept = {
+  readonly list: RefObject<HTMLDivElement | null>
+  readonly base: string
+  readonly open: string | undefined
+  readonly choose: (id: string) => void
+}
+
+export function uses(props: TabsProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+  readonly list: RefObject<HTMLDivElement | null>
+  readonly base: string
+  readonly open: string | undefined
+  readonly choose: (id: string) => void
+} {
+  const list = useRef<HTMLDivElement>(null)
+  const base = useId()
+  const first = props.items.find((one) => one.disabled !== true)?.id
+  const [active, setActive] = useState<string | undefined>(props.initial ?? first)
+  useRovingFocus(list, { orientation: props.orientation === 'vertical' ? 'vertical' : 'horizontal' })
+
+  const open = props.items.find((one) => one.id === active) ?? props.items.find((one) => one.disabled !== true)
+  return {
+    list,
+    base,
+    open: open?.id,
+    choose: (id: string): void => {
+      setActive(id)
+      props.onChange?.(id)
+    },
+  }
+}
+
+export function strip(props: TabsProps, kept: Kept): Readonly<Record<string, unknown>> {
+  return { ref: kept.list, role: 'tablist', 'aria-orientation': props.orientation === 'vertical' ? 'vertical' : 'horizontal' }
+}
+
+export function tab(_props: TabsProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>> {
+  const id = String(row['id'])
+  return {
+    ...{ [ITEM_ATTR]: '' },
+    type: 'button',
+    role: 'tab',
+    id: `${kept.base}-tab-${id}`,
+    'aria-controls': `${kept.base}-panel-${id}`,
+    'aria-selected': id === kept.open,
+    disabled: row['disabled'] === true,
+    onClick: (): void => kept.choose(id),
+  }
+}
+
+export function opened(_props: TabsProps, kept: Kept): boolean {
+  return kept.open !== undefined
+}
+
+export function panel(_props: TabsProps, kept: Kept): Readonly<Record<string, unknown>> {
+  return {
+    role: 'tabpanel',
+    id: `${kept.base}-panel-${String(kept.open)}`,
+    'aria-labelledby': `${kept.base}-tab-${String(kept.open)}`,
+  }
+}
+
+export function shown(
+  props: TabsProps,
+  ...rest: readonly [Surface, Kept] | readonly [Row, Surface, Kept]
+): Readonly<Record<string, ReactNode>> {
+  if (rest.length === 3) {
+    const [row, surface] = rest
+    return { label: surface.text(String(row['labelKey'])) }
+  }
+  const [, kept] = rest
+  return { inside: props.items.find((one) => one.id === kept.open)?.content ?? null }
+}

package/dist/ui/elements/text.js

@@ -6,4 +6,4 @@ export const Text = element('Text', (props, 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 }) }, });
     return (_jsx("span", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, role: props.announce, children: surface.text(props.k, props.with) }));
-}, 'e-text');
+}, 'e-text', {});

package/dist/ui/elements/text.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass, type FontRoleId } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+
+
+export interface TextProps {
+  readonly k: MessageKey
+  readonly with?: Readonly<Record<string, unknown>>
+  readonly is?: FontRoleId
+  readonly announce?: 'alert' | 'status'
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Text: Element<'Text', TextProps> = element(
+  'Text',
+  (props: TextProps, 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 }) }, })
+    return (
+      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} role={props.announce}>
+        {surface.text(props.k, props.with)}
+      </span>
+    )
+  },
+  'e-text',
+  {},
+)

package/dist/ui/elements/textarea.js

@@ -8,4 +8,4 @@ export const Textarea = element('Textarea', (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("label", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, children: [_jsx("span", { children: surface.text(props.labelKey) }), props.value === undefined ? null : _jsx("textarea", { name: props.name, rows: props.rows ?? 4, ...limited(props.validator), disabled: surface.marked('disabled'), value: props.value ?? '', onChange: (event) => does(props).wrote(event.target.value) })] }));
-}, 'e-textarea');
+}, 'e-textarea', { "input": "thread-input" });

package/dist/ui/elements/textarea.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { limited } from '../validators.ts'
+import { does } from './textarea.works.ts'
+
+
+export interface TextareaProps {
+  readonly labelKey: MessageKey
+  readonly name?: string
+  readonly value?: string
+  readonly onValue?: (said: string) => void
+  readonly validator?: string
+  readonly rows?: number
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Textarea: Element<'Textarea', TextareaProps> = element(
+  'Textarea',
+  (props: TextareaProps, 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 (
+      <label className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
+        <span>{surface.text(props.labelKey)}</span>
+        {props.value === undefined ? null : <textarea name={props.name} rows={props.rows ?? 4} {...limited(props.validator)} disabled={surface.marked('disabled')} value={props.value ?? ''} onChange={(event) => does(props).wrote(event.target.value)}></textarea>}
+      </label>
+    )
+  },
+  'e-textarea',
+  {"input":"thread-input"},
+)

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

@@ -0,0 +1,5 @@
+import type { TextareaProps } from './textarea.tsx'
+
+export function does(props: TextareaProps): { readonly wrote: (said: string) => void } {
+  return { wrote: (said: string) => props.onValue?.(said) }
+}

package/dist/ui/elements/time.js

@@ -11,4 +11,4 @@ export const Time = element('Time', (props, className) => {
         ],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (shows(props, surface, kept));
-}, 'e-time');
+}, 'e-time', {});

package/dist/ui/elements/time.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { roleClass, type FontRoleId } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { shows, uses } from './time.works.ts'
+
+
+export interface TimeProps {
+  readonly value?: unknown
+  readonly relative?: boolean
+  readonly is?: FontRoleId
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Time: Element<'Time', TimeProps> = element(
+  'Time',
+  (props: TimeProps, 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 (
+      shows(props, surface, kept)
+    )
+  },
+  'e-time',
+  {},
+)

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

@@ -0,0 +1,25 @@
+import { useCallback, useSyncExternalStore, type ReactNode } from 'react'
+
+import { renderValue } from '../content.tsx'
+import type { Surface } from '../door.ts'
+import { useUi } from '../wrappers.tsx'
+import type { TimeProps } from './time.tsx'
+
+const NO_CLOCK_YET = (): number | undefined => undefined
+
+export function uses(props: TimeProps): { readonly holds?: readonly string[]; readonly animates?: boolean; readonly at: number | undefined } {
+  const { now, ticker } = useUi()
+  const subscribe = useCallback(
+    (onChange: () => void) => (props.relative === true && ticker !== undefined ? ticker.subscribe(onChange) : () => undefined),
+    [props.relative, ticker],
+  )
+  const read = useCallback(() => now?.(), [now])
+  return { at: useSyncExternalStore(subscribe, read, NO_CLOCK_YET) }
+}
+
+export function shows(props: TimeProps, surface: Surface, kept: { readonly at: number | undefined }): ReactNode {
+  if (props.relative !== true || kept.at === undefined) {
+    return renderValue({ validator: 'datetime', value: props.value }, surface)
+  }
+  return renderValue({ validator: 'relativeTime', value: props.value, context: { now: kept.at } }, surface)
+}

package/dist/ui/elements/toggle.js

@@ -7,4 +7,4 @@ export const Toggle = element('Toggle', (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("label", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, children: [props.on === undefined ? null : _jsx("input", { type: "checkbox", disabled: surface.marked('disabled'), checked: props.on === true, onChange: (event) => does(props).changed(event.target.checked) }), _jsx("span", { children: surface.text(props.labelKey) })] }));
-}, 'e-toggle');
+}, 'e-toggle', { "input": "thread-input" });

package/dist/ui/elements/toggle.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 { does } from './toggle.works.ts'
+
+
+export interface ToggleProps {
+  readonly labelKey: MessageKey
+  readonly on?: boolean
+  readonly onToggle?: (said: boolean) => void
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Toggle: Element<'Toggle', ToggleProps> = element(
+  'Toggle',
+  (props: ToggleProps, 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 (
+      <label className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
+        {props.on === undefined ? null : <input type="checkbox" disabled={surface.marked('disabled')} checked={props.on === true} onChange={(event) => does(props).changed(event.target.checked)} />}
+        <span>{surface.text(props.labelKey)}</span>
+      </label>
+    )
+  },
+  'e-toggle',
+  {"input":"thread-input"},
+)

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

@@ -0,0 +1,5 @@
+import type { ToggleProps } from './toggle.tsx'
+
+export function does(props: ToggleProps): { readonly changed: (on: boolean) => void } {
+  return { changed: (on: boolean) => props.onToggle?.(on) }
+}

package/dist/ui/elements/tooltip.js

@@ -12,4 +12,4 @@ export const Tooltip = element('Tooltip', (props, className) => {
         measures: measured(props, kept),
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsxs("span", { ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), style: surface.measures, children: [props.children, !showing(props, kept) ? null : _jsx("span", { className: `e-tooltip-bubble ${surface.className ?? ''}`, ...bubble(props, kept), children: surface.text(props.labelKey) })] }));
-}, 'e-tooltip');
+}, 'e-tooltip', { "card": "thread-card" });

package/dist/ui/elements/tooltip.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { MessageKey } from '../content.tsx'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { measured, bubble, showing, uses } from './tooltip.works.ts'
+
+
+export interface TooltipProps {
+  readonly children: ReactNode
+  readonly labelKey: MessageKey
+  readonly side?: string
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Tooltip: Element<'Tooltip', TooltipProps> = element(
+  'Tooltip',
+  (props: TooltipProps, className) => {
+    const kept = uses(props)
+    const surface = useSurface({ 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}>
+        {props.children}
+        {!showing(props, kept) ? null : <span className={`e-tooltip-bubble ${surface.className ?? ''}`} {...bubble(props, kept)}>{surface.text(props.labelKey)}</span>}
+      </span>
+    )
+  },
+  'e-tooltip',
+  {"card":"thread-card"},
+)

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

@@ -0,0 +1,77 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { useDismissLayer } from '../dismiss-layer.ts'
+import { positionOf, type AnchorOptions } from '../positioning.ts'
+import type { TooltipProps } from './tooltip.tsx'
+
+type Kept = {
+  readonly trigger: React.RefObject<HTMLSpanElement | null>
+  readonly layer: React.RefObject<HTMLSpanElement | null>
+  readonly open: boolean
+  readonly at: { readonly x: number; readonly y: number } | null
+  readonly show: (to: boolean) => void
+}
+
+export function uses(props: TooltipProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on: Readonly<Record<string, unknown>>
+  readonly trigger: React.RefObject<HTMLSpanElement | null>
+  readonly layer: React.RefObject<HTMLSpanElement | null>
+  readonly open: boolean
+  readonly at: { readonly x: number; readonly y: number } | null
+  readonly show: (to: boolean) => void
+} {
+  const trigger = useRef<HTMLSpanElement>(null)
+  const layer = useRef<HTMLSpanElement>(null)
+  const [open, setOpen] = useState(false)
+  const [at, setAt] = useState<{ x: number; y: number } | null>(null)
+
+  useDismissLayer(layer, {
+    active: open,
+    dismissOnEscape: true,
+    dismissOnOutside: true,
+    onDismiss: () => setOpen(false),
+  })
+
+  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 ?? 'top') as NonNullable<AnchorOptions['placement']> }).then((position) => {
+      if (live) setAt({ x: position.x, y: position.y })
+    })
+    return () => {
+      live = false
+    }
+  }, [open, props.side])
+
+  return {
+    on: {
+      ref: trigger,
+      onPointerEnter: () => setOpen(true),
+      onPointerLeave: () => setOpen(false),
+      onFocus: () => setOpen(true),
+      onBlur: () => setOpen(false),
+    },
+    trigger,
+    layer,
+    open,
+    at,
+    show: setOpen,
+  }
+}
+
+export function showing(_props: TooltipProps, kept: Kept): boolean {
+  return kept.open
+}
+
+export function bubble(props: TooltipProps, kept: Kept): Readonly<Record<string, unknown>> {
+  return { ref: kept.layer, role: 'tooltip', 'data-side': props.side ?? 'top' }
+}
+
+export function measured(_props: TooltipProps, 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/value.js

@@ -6,4 +6,4 @@ export const Value = element('Value', (props, 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 }) }, });
     return (shows(props, surface));
-}, 'e-value');
+}, 'e-value', {});