@prestack/thread-ui 0.0.1 → 0.1.0

package/dist/ui/content.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { useCallback, useSyncExternalStore, type ReactNode } from 'react'
+import { formatValue, runValidator, validatorFor } from './validators.ts'
+import { ICON_TARGET, strokeFor } from './icons.ts'
+
+import { element, useSurface, useUi, useVisibility } from './wrappers.tsx'
+
+export type MessageKey = string
+
+export interface ValueProps {
+  readonly validator: string
+  readonly value: unknown
+
+  readonly context?: Readonly<Record<string, unknown>>
+}
+
+export function renderValue(
+  { validator, value, context }: ValueProps,
+  surface: ReturnType<typeof useSurface>,
+): ReactNode {
+  const entry = validatorFor(validator)
+  const result = runValidator(validator, value, context ?? {})
+
+  if (!result.ok) {
+    return (
+      <span className={surface.className} {...surface.marks} data-invalid="true">
+        {surface.text(result.errorKey)}
+      </span>
+    )
+  }
+
+  return (
+    <span className={surface.className} {...surface.marks} data-validator={entry.name}>
+      {formatValue(validator, result.value, context ?? {})}
+    </span>
+  )
+}
+

package/dist/ui/contrast.ts

@@ -0,0 +1,27 @@
+export const CONTRAST_LARGE = 3
+
+function channel(value: number): number {
+  const c = value / 255
+  return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+}
+
+export function luminance(hex: string): number {
+  const clean = hex.replace('#', '')
+  const full =
+    clean.length === 3
+      ? clean
+          .split('')
+          .map((c) => c + c)
+          .join('')
+      : clean.slice(0, 6)
+  const num = Number.parseInt(full, 16)
+  const r = channel((num >> 16) & 255)
+  const g = channel((num >> 8) & 255)
+  const b = channel(num & 255)
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+export function contrast(a: string, b: string): number {
+  const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x) as [number, number]
+  return (light + 0.05) / (dark + 0.05)
+}

package/dist/ui/controls.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import { acceptsKeystroke, applyMask, entryConstraints, evaluateMoney, runValidator } from './validators.ts'
+
+import { ITEM_ATTR, useRovingFocus } from './roving-focus.ts'
+import { element, pressOf, useSurface, usePress } from './wrappers.tsx'
+import type { MessageKey } from './content.tsx'
+import type { Dispatching } from './checked.ts'
+
+export interface PressProps {
+
+  readonly dispatch?: [keyof Dispatching] extends [never] ? string : keyof Dispatching & string
+
+  readonly input?: Readonly<Record<string, unknown>>
+
+  readonly navigateTo?: string
+
+  readonly onPress?: () => void
+}
+
+export interface Option {
+  readonly value: string
+  readonly labelKey: MessageKey
+}
+
+export { Menu, type MenuProps } from './elements/menu.tsx'
+
+export { type MenuItem } from './elements/menu.works.tsx'
+

package/dist/ui/disclosure.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { useId, useRef, useState, type ReactNode } from 'react'
+
+import { ITEM_ATTR, useRovingFocus } from './roving-focus.ts'
+import { element, useSurface } from './wrappers.tsx'
+import type { MessageKey } from './content.tsx'
+
+export interface TabItem {
+  readonly id: string
+  readonly labelKey: MessageKey
+  readonly disabled?: boolean
+  readonly content: ReactNode
+}
+
+export interface AccordionItem {
+  readonly id: string
+  readonly labelKey: MessageKey
+  readonly disabled?: boolean
+  readonly content: ReactNode
+}
+

package/dist/ui/dismiss-layer.ts

@@ -0,0 +1,87 @@
+'use client'
+
+import { useEffect, type RefObject } from 'react'
+
+export interface Layer {
+  readonly ref: RefObject<HTMLElement | null>
+  readonly dismissOnEscape: boolean
+  readonly dismissOnOutside: boolean
+  readonly onDismiss: () => void
+}
+
+const layers: Layer[] = []
+
+function ordered(): readonly Layer[] {
+  return layers
+    .filter((layer) => layer.ref.current !== null)
+    .sort((a, b) => {
+      const first = a.ref.current as HTMLElement
+      const second = b.ref.current as HTMLElement
+      if (first === second) return 0
+
+      return (first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0 ? -1 : 1
+    })
+}
+
+function target(kind: 'escape' | 'outside'): Layer | undefined {
+  const open = ordered()
+  for (let i = open.length - 1; i >= 0; i -= 1) {
+    const layer = open[i] as Layer
+    if (kind === 'escape' ? layer.dismissOnEscape : layer.dismissOnOutside) return layer
+  }
+  return undefined
+}
+
+export function useDismissLayer(
+  ref: RefObject<HTMLElement | null>,
+  options: {
+    readonly active: boolean
+    readonly dismissOnEscape: boolean
+    readonly dismissOnOutside: boolean
+    readonly onDismiss: () => void
+  },
+): void {
+  const { active, dismissOnEscape, dismissOnOutside, onDismiss } = options
+
+  useEffect(() => {
+    if (!active) return
+    const layer: Layer = { ref, dismissOnEscape, dismissOnOutside, onDismiss }
+    layers.push(layer)
+
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key !== 'Escape') return
+      if (target('escape') !== layer) return
+      event.preventDefault()
+
+      event.stopPropagation()
+      layer.onDismiss()
+    }
+
+    const onPointerDown = (event: Event): void => {
+      if (target('outside') !== layer) return
+      const root = ref.current
+      const node = event.target
+      if (root === null || !(node instanceof Node)) return
+      if (root.contains(node)) return
+
+      event.preventDefault()
+      event.stopPropagation()
+      layer.onDismiss()
+    }
+
+    document.addEventListener('keydown', onKeyDown, true)
+    document.addEventListener('pointerdown', onPointerDown, true)
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, true)
+      document.removeEventListener('pointerdown', onPointerDown, true)
+      const at = layers.indexOf(layer)
+
+      if (at !== -1) layers.splice(at, 1)
+    }
+  }, [active, dismissOnEscape, dismissOnOutside, onDismiss, ref])
+}
+
+export function openLayers(): number {
+  return layers.length
+}

package/dist/ui/door.ts

@@ -0,0 +1,140 @@
+
+export const PRESENTATIONS = ['page', 'sheet', 'popover', 'overlay', 'toast'] as const
+export type Presentation = (typeof PRESENTATIONS)[number]
+
+export const PRESENTATION_BEHAVIOUR: Readonly<Record<Presentation, {
+  readonly portal: boolean
+  readonly backdrop: boolean
+  readonly trapFocus: boolean
+  readonly returnFocus: boolean
+  readonly dismissOnEscape: boolean
+  readonly dismissOnOutside: boolean
+}>> = {
+  page: { portal: false, backdrop: false, trapFocus: false, returnFocus: false, dismissOnEscape: false, dismissOnOutside: false },
+  sheet: { portal: true, backdrop: true, trapFocus: true, returnFocus: true, dismissOnEscape: true, dismissOnOutside: true },
+  overlay: { portal: true, backdrop: true, trapFocus: true, returnFocus: true, dismissOnEscape: true, dismissOnOutside: true },
+
+  popover: { portal: true, backdrop: false, trapFocus: false, returnFocus: true, dismissOnEscape: true, dismissOnOutside: true },
+
+  toast: { portal: true, backdrop: false, trapFocus: false, returnFocus: false, dismissOnEscape: false, dismissOnOutside: false },
+}
+
+export interface ClockSubscriber {
+
+  (t: number): void
+}
+
+export class Ticker {
+  #subscribers = new Set<() => void>()
+  #stop: (() => void) | undefined
+  readonly #every: (fn: () => void) => () => void
+
+  constructor(every?: (fn: () => void) => () => void) {
+    this.#every =
+      every ??
+      ((fn) => {
+        const id = setInterval(fn, 1000)
+        return () => clearInterval(id)
+      })
+  }
+
+  get running(): boolean {
+    return this.#stop !== undefined
+  }
+
+  subscribe(fn: () => void): () => void {
+    this.#subscribers.add(fn)
+    if (this.#stop === undefined) this.#stop = this.#every(() => this.tick())
+    return () => {
+      this.#subscribers.delete(fn)
+
+      if (this.#subscribers.size === 0) {
+        this.#stop?.()
+        this.#stop = undefined
+      }
+    }
+  }
+
+  tick(): void {
+    for (const fn of this.#subscribers) fn()
+  }
+}
+
+export class Clock {
+  #subscribers = new Set<ClockSubscriber>()
+  #visible = true
+  #running = false
+  #t = 0
+  #ticks = 0
+  readonly #schedule: (fn: () => void) => void
+
+  constructor(schedule?: (fn: () => void) => void) {
+    this.#schedule =
+      schedule ??
+      ((fn) => {
+        if (typeof requestAnimationFrame === 'function') requestAnimationFrame(() => fn())
+        else setTimeout(fn, 16)
+      })
+  }
+
+  get ticks(): number {
+    return this.#ticks
+  }
+
+  get running(): boolean {
+    return this.#running
+  }
+
+  subscribe(fn: ClockSubscriber): () => void {
+    this.#subscribers.add(fn)
+    this.#maybeStart()
+    return () => {
+      this.#subscribers.delete(fn)
+      if (this.#subscribers.size === 0) this.#running = false
+    }
+  }
+
+  setVisible(visible: boolean): void {
+    this.#visible = visible
+    if (visible) this.#maybeStart()
+    else this.#running = false
+  }
+
+  tick(dt: number): void {
+    if (!this.#visible) return
+    this.#t += dt
+    this.#ticks += 1
+    for (const fn of this.#subscribers) fn(this.#t)
+  }
+
+  #maybeStart(): void {
+    if (this.#running || !this.#visible || this.#subscribers.size === 0) return
+    this.#running = true
+    const loop = (): void => {
+      if (!this.#running) return
+      this.tick(1 / 60)
+      this.#schedule(loop)
+    }
+    this.#schedule(loop)
+  }
+}
+
+export interface Surface {
+  readonly className?: string
+
+  readonly holds: readonly string[]
+
+  readonly marks: Readonly<Record<string, boolean>>
+
+  readonly invokes: Readonly<Record<string, unknown>>
+
+  readonly marked: (signal: string) => boolean
+
+  readonly text: (key: string, params?: Readonly<Record<string, unknown>>) => string
+
+  readonly a11y: Readonly<Record<string, string | boolean | number>>
+
+  readonly measures: Readonly<Record<string, string | number>>
+
+  readonly t: number
+}

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" });