@prestack/thread-ui 0.1.10 → 0.1.12

package/dist/ui/elements/hit-box.works.tsx

@@ -1,576 +0,0 @@
-'use client'
-
-import { gestureFor, gestureNames, holds as declared, recognise, type GesturePhase, type PointerSample } from '../signals.ts'
-import { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore, type PointerEvent, type ReactNode } from 'react'
-import { createPortal } from 'react-dom'
-
-import {
-  accepted,
-  beginDrag,
-  claimGesture,
-  collect,
-  currentLayout,
-  dragSession,
-  dragStatusOf,
-  dwell,
-  endDrag,
-  innermostTarget,
-  moveDrag,
-  pullEdges,
-  registerTarget,
-  releaseGesture,
-  subscribeDrag,
-  type DragSession,
-  type DragStatus,
-  type DropTarget,
-} from '../drag.ts'
-import { measured, placed } from '../charts.tsx'
-import { nameOf } from '../token.ts'
-import { useSurface, useUi } from '../wrappers.tsx'
-import type { Dispatching } from '../checked.ts'
-import type { HitBoxProps } from './hit-box.tsx'
-
-export type Axis = 'x' | 'y' | 'both'
-
-const held = (row: string): string => `var(${nameOf(row)})`
-
-const TOUCH_ACTION: Record<Axis, string> = {
-  x: 'touch-down',
-  y: 'touch-across',
-  both: 'touch-own',
-}
-
-const wallClock = (): number => (typeof performance === 'object' ? performance.now() : Date.now()) / 1000
-
-const settleMs = (): number => {
-  if (typeof document !== 'object') return 0
-  const said = getComputedStyle(document.documentElement).getPropertyValue('--motion-normal').trim()
-  const ms = /^([\d.]+)ms$/.exec(said)
-  if (ms !== null) return Number(ms[1])
-  const seconds = /^([\d.]+)s$/.exec(said)
-  return seconds === null ? 0 : Number(seconds[1]) * 1000
-}
-
-const SWING_AT = 220
-const SWING_MAX = 12
-
-const STIFFNESS = 180
-const DAMPING = 14
-const SETTLED = 0.05
-
-const EMPTY: Readonly<Record<string, number>> = {}
-
-interface Tracked {
-  readonly id: number
-  x: number
-  y: number
-  readonly startX: number
-  readonly startY: number
-  readonly startT: number
-  down: boolean
-}
-
-export function uses(props: HitBoxProps) {
-  const id = useId()
-  const { edgeScroll: pull } = useUi()
-
-  const claimed = gestureFor(props.gesture)
-  if (claimed === undefined) {
-    throw new Error(
-      `<HitBox gesture="${props.gesture}"> — nothing registered that gesture, so this region would ` +
-        `take the pointer and do nothing. Registered: ${gestureNames().join(' · ')}. Contribute one with defineGesture.`,
-    )
-  }
-
-  const [down, setDown] = useState(false)
-  const [phase, setPhase] = useState<GesturePhase>('idle')
-  const [produced, setProduced] = useState<Readonly<Record<string, number>>>({})
-
-  const released = useRef(Number.NEGATIVE_INFINITY)
-
-  const took = useRef<{
-    readonly width: number
-    readonly height: number
-    readonly gripX: number
-    readonly gripY: number
-  } | null>(null)
-
-  const [pointer, setPointer] = useState<{ readonly x: number; readonly y: number } | null>(null)
-
-  const [settling, setSettling] = useState(false)
-
-  const speed = useRef(0)
-  const moved = useRef(0)
-
-  const [lean, setLean] = useState(0)
-  const leanSpeed = useRef(0)
-  const lastTick = useRef(0)
-
-  const grabbed = useRef(props.grabs)
-  grabbed.current = props.grabs
-  const grabsKey = props.grabs === undefined ? '' : JSON.stringify(props.grabs)
-
-  const tuned = useRef(props.tuning)
-  tuned.current = props.tuning
-  const tuningKey = props.tuning === undefined ? '' : JSON.stringify(props.tuning)
-
-  const node = useRef<HTMLDivElement | null>(null)
-
-  const clockNow = useRef(0)
-
-  const wants = props.gesture === 'pinch' || props.gesture === 'rotate'
-  const synthesised = useRef<number | null>(null)
-
-  useEffect(() => {
-    const surfaceNode = node.current
-    if (!wants || surfaceNode === null) return undefined
-
-    const SPAN = 100
-
-    const put = (scale: number, radians: number): void => {
-      const box = surfaceNode.getBoundingClientRect()
-      const cx = box.left + box.width / 2
-      const cy = box.top + box.height / 2
-      const reach = (SPAN / 2) * scale
-      const dxr = Math.cos(radians) * reach
-      const dyr = Math.sin(radians) * reach
-
-      tracked.current.set(-1, { id: -1, x: cx + dxr, y: cy + dyr, startX: cx + SPAN / 2, startY: cy, startT: clockNow.current, down: true })
-      tracked.current.set(-2, { id: -2, x: cx - dxr, y: cy - dyr, startX: cx - SPAN / 2, startY: cy, startT: clockNow.current, down: true })
-      at.current = { x: cx, y: cy }
-      setDown(true)
-
-      if (synthesised.current !== null) clearTimeout(synthesised.current)
-      synthesised.current = window.setTimeout(() => {
-        tracked.current.delete(-1)
-        tracked.current.delete(-2)
-        setDown(false)
-        releaseGesture(id)
-        setPhase('idle')
-        setProduced(EMPTY)
-      }, 140)
-    }
-
-    let scale = 1
-    let radians = 0
-
-    const onWheel = (e: WheelEvent): void => {
-      if (!e.ctrlKey) return
-      e.preventDefault()
-      scale = Math.min(4, Math.max(0.25, scale * Math.exp(-e.deltaY / 100)))
-      put(scale, radians)
-    }
-
-    const onGesture = (e: Event): void => {
-      const held = e as Event & { scale?: number; rotation?: number }
-      e.preventDefault()
-      scale = held.scale ?? scale
-      radians = ((held.rotation ?? 0) * Math.PI) / 180
-      put(scale, radians)
-    }
-
-    surfaceNode.addEventListener('wheel', onWheel, { passive: false })
-    surfaceNode.addEventListener('gesturechange', onGesture)
-    return () => {
-      surfaceNode.removeEventListener('wheel', onWheel)
-      surfaceNode.removeEventListener('gesturechange', onGesture)
-      if (synthesised.current !== null) clearTimeout(synthesised.current)
-    }
-  }, [wants, id])
-
-  const tracked = useRef(new Map<number, Tracked>())
-  const at = useRef({ x: 0, y: 0 })
-  const lastFrame = useRef(0)
-
-  const key = props.accepts?.join(',') ?? ''
-  const status = useSyncExternalStore(
-    subscribeDrag,
-    useCallback(() => dragStatusOf(id, key === '' ? undefined : key.split(',')), [id, key]),
-    useCallback((): DragStatus => 'idle', []),
-  )
-
-  const carrying = status === 'carrying'
-  const raises = claimed.raises
-
-  return {
-    on: {},
-    pull,
-    animates: down || carrying || settling,
-    holds: [
-
-      ...(phase === 'active' || phase === 'done'
-        ? declared.filter((one) => raises.some((s) => s.name === one.id)).map((one) => one.id)
-        : []),
-      ...(carrying ? (['carrying'] as const) : []),
-      ...(status === 'over' && dwell() >= (props.dwell ?? 0) ? (['draggedOver'] as const) : []),
-      ...(status === 'refusing' ? (['refusing'] as const) : []),
-    ],
-    id,
-    claimed,
-    down,
-    setDown,
-    phase,
-    setPhase,
-    produced,
-    setProduced,
-    released,
-    took,
-    pointer,
-    setPointer,
-    settling,
-    setSettling,
-    speed,
-    moved,
-    lean,
-    setLean,
-    leanSpeed,
-    lastTick,
-    grabbed,
-    grabsKey,
-    tuned,
-    tuningKey,
-    node,
-    clockNow,
-    wants,
-    synthesised,
-    tracked,
-    at,
-    lastFrame,
-    key,
-    status,
-    carrying,
-    raises,
-  }
-}
-
-export function wires(props: HitBoxProps, kept: ReturnType<typeof uses>, surface: ReturnType<typeof useSurface>) {
-  const { dispatch: invoke } = useUi()
-  const { pull, id, down, setDown, phase, setPhase, setProduced, released, took, pointer, setPointer, settling, setSettling, speed, moved, lean, setLean, leanSpeed, lastTick, grabbed, grabsKey, tuned, tuningKey, node, clockNow, tracked, at, lastFrame, key, carrying } = kept
-
-  useEffect(() => {
-    if (!down) return undefined
-    const give = (e: globalThis.PointerEvent): void => {
-
-      const session = dragSession()
-      if (session?.from === id) {
-        const target = innermostTarget(currentLayout().hitBoxesAt(e.clientX, e.clientY))
-        const finished = endDrag()
-        if (target?.onDrop !== undefined && finished !== undefined && accepted(target.accepts, finished)) {
-          target.onDrop(finished)
-        }
-      }
-      tracked.current.clear()
-      setDown(false)
-      setPointer(null)
-      took.current = null
-      releaseGesture(id)
-
-      setPhase('idle')
-    }
-    const follow = (e: globalThis.PointerEvent): void => {
-      advance(e.pointerId, e.clientX, e.clientY)
-    }
-    window.addEventListener('pointermove', follow)
-    window.addEventListener('pointerup', give)
-    window.addEventListener('pointercancel', give)
-    return () => {
-      window.removeEventListener('pointermove', follow)
-      window.removeEventListener('pointerup', give)
-      window.removeEventListener('pointercancel', give)
-    }
-  }, [down, id])
-
-  useEffect(
-    () => () => {
-      releaseGesture(id)
-      if (dragSession()?.from === id) endDrag()
-    },
-    [id],
-  )
-
-  const onDrop = props.onDrop
-  const named: keyof Dispatching | undefined = props.dispatch
-  const carriedInput = props.input
-  const collects = props.collects
-  useEffect(() => {
-    if (props.accepts === undefined) return undefined
-    const target: DropTarget = {
-      id,
-      accepts: key.split(','),
-      ...(props.dwell === undefined ? {} : { dwell: props.dwell }),
-      ...(collects === undefined ? {} : { collects: () => collects }),
-      ...(onDrop === undefined && named === undefined
-        ? {}
-        : {
-            onDrop: (finished: DragSession) => {
-              if (onDrop !== undefined) onDrop()
-              if (named === undefined) return
-              if (invoke === undefined) throw new Error(`\`${named}\` cannot be invoked from here — no dispatch is wired`)
-              void invoke(named, { ...(carriedInput ?? {}), ...(finished.subject[0] ?? {}) })
-            },
-          }),
-    }
-    return registerTarget(target)
-  }, [id, key, props.accepts, props.dwell, collects, onDrop, named, carriedInput, invoke])
-
-  const t = surface.t
-  clockNow.current = t
-  useEffect(() => {
-    if (!down) return
-    const dt = Math.max(0, t - lastFrame.current)
-    lastFrame.current = t
-
-    const pointers: PointerSample[] = [...tracked.current.values()].map((p) => ({
-      id: p.id,
-      x: p.x,
-      y: p.y,
-      startX: p.startX,
-      startY: p.startY,
-      held: t - p.startT,
-      down: p.down,
-    }))
-
-    const result = recognise(props.gesture, {
-      pointers,
-      t,
-      params: tuned.current ?? {},
-
-      sinceRelease: wallClock() - released.current,
-    })
-
-    const takesPointer = grabbed.current !== undefined
-    const mine = result.phase === 'idle' || !takesPointer ? true : claimGesture(id)
-    setPhase(mine ? result.phase : 'idle')
-
-    setProduced(mine && result.values !== undefined ? result.values : EMPTY)
-    if (!mine) return
-
-    const session = dragSession()
-
-    if (result.phase !== 'idle' && grabbed.current !== undefined && session === undefined) {
-      beginDrag({ gesture: props.gesture, subject: grabbed.current, from: id, x: at.current.x, y: at.current.y, t })
-      return
-    }
-
-    if (session === undefined || session.from !== id) return
-
-    const target = innermostTarget(currentLayout().hitBoxesAt(at.current.x, at.current.y))
-    moveDrag({ x: at.current.x, y: at.current.y, ...(target === undefined ? {} : { over: target.id }), t })
-
-    if (target?.collects !== undefined && dwell() >= (target.dwell ?? 0)) collect(target.collects())
-
-    pullEdges(at.current.x, at.current.y, dt, pull ?? {})
-
-  }, [down, t, pointer, id, props.gesture, grabsKey, tuningKey, pull])
-
-  useEffect(() => {
-    if (phase !== 'done') return undefined
-    const frame = requestAnimationFrame(() => {
-      releaseGesture(id)
-      setPhase('idle')
-      setProduced(EMPTY)
-    })
-    return () => cancelAnimationFrame(frame)
-  }, [phase, id])
-
-  const onPointerDown = (e: PointerEvent<HTMLDivElement>): void => {
-
-    if (grabbed.current !== undefined) {
-      e.currentTarget.setPointerCapture?.(e.pointerId)
-
-      e.preventDefault()
-    }
-
-    const box = e.currentTarget.getBoundingClientRect()
-    setPointer({ x: e.clientX, y: e.clientY })
-    took.current =
-      box.width > 0 && box.height > 0
-        ? { width: box.width, height: box.height, gripX: e.clientX - box.left, gripY: e.clientY - box.top }
-        : null
-    speed.current = 0
-    moved.current = wallClock()
-    tracked.current.set(e.pointerId, { id: e.pointerId, x: e.clientX, y: e.clientY, startX: e.clientX, startY: e.clientY, startT: t, down: true })
-    at.current = { x: e.clientX, y: e.clientY }
-    lastFrame.current = t
-    setDown(true)
-  }
-
-  const advance = (pointerId: number, x: number, y: number): void => {
-    const p = tracked.current.get(pointerId)
-    if (p === undefined) return
-    if (p.x === x && p.y === y) return
-    const e = { pointerId, clientX: x, clientY: y }
-
-    const at2 = wallClock()
-    const dt = Math.max(1 / 240, at2 - moved.current)
-    const raw = (e.clientX - p.x) / dt
-    speed.current = speed.current * 0.7 + raw * 0.3
-    moved.current = at2
-
-    p.x = e.clientX
-    p.y = e.clientY
-    at.current = { x: e.clientX, y: e.clientY }
-    setPointer({ x: e.clientX, y: e.clientY })
-  }
-
-  const onPointerMove = (e: PointerEvent<HTMLDivElement>): void => {
-    advance(e.pointerId, e.clientX, e.clientY)
-  }
-
-  const finish = (e: PointerEvent<HTMLDivElement>, cancelled: boolean): void => {
-    const p = tracked.current.get(e.pointerId)
-    if (p !== undefined) {
-
-      p.x = e.clientX
-      p.y = e.clientY
-      p.down = false
-      at.current = { x: e.clientX, y: e.clientY }
-    }
-
-    const session = dragSession()
-    if (session?.from === id) {
-
-      const target = cancelled ? undefined : innermostTarget(currentLayout().hitBoxesAt(e.clientX, e.clientY))
-      const finished = endDrag()
-      if (target?.onDrop !== undefined && finished !== undefined && accepted(target.accepts, finished)) {
-        target.onDrop(finished)
-      }
-
-      releaseGesture(id)
-
-      speed.current = 0
-    }
-
-    const last = p !== undefined && tracked.current.size === 1 && !cancelled ? p : undefined
-    let completed = false
-    if (last !== undefined) {
-      const result = recognise(props.gesture, {
-        pointers: [
-          { id: last.id, x: last.x, y: last.y, startX: last.startX, startY: last.startY, held: t - last.startT, down: false },
-        ],
-        t,
-        params: props.tuning ?? {},
-        sinceRelease: wallClock() - released.current,
-      })
-      if (result.phase !== 'idle' && claimGesture(id)) {
-        setPhase(result.phase)
-        setProduced(result.values ?? EMPTY)
-        completed = true
-      }
-    }
-
-    tracked.current.delete(e.pointerId)
-    if (tracked.current.size === 0) {
-      setDown(false)
-
-      releaseGesture(id)
-      setPointer(null)
-      took.current = null
-      if (!completed) setPhase('idle')
-
-      if (!cancelled) released.current = wallClock()
-    }
-  }
-
-  const session = dragSession()
-  const mine = carrying && session !== undefined && session.from === id
-
-  useEffect(() => {
-    if (!mine && !settling) {
-      lastTick.current = t
-      return
-    }
-    const step = Math.min(1 / 20, Math.max(0, t - lastTick.current))
-    lastTick.current = t
-    if (step === 0) return
-
-    const target = mine ? Math.max(-SWING_MAX, Math.min(SWING_MAX, speed.current / SWING_AT)) : 0
-    const force = -STIFFNESS * (lean - target) - DAMPING * leanSpeed.current
-    const next = lean + leanSpeed.current * step
-    leanSpeed.current += force * step
-
-    if (!mine && Math.abs(next) < SETTLED && Math.abs(leanSpeed.current) < SETTLED) {
-      leanSpeed.current = 0
-      if (lean !== 0) setLean(0)
-      return
-    }
-    setLean(next)
-  }, [t, mine, settling, lean])
-
-  useEffect(() => {
-    if (mine) {
-      setSettling(true)
-      return undefined
-    }
-    if (!settling) return undefined
-
-    if (Math.abs(lean) < SETTLED && Math.abs(leanSpeed.current) < SETTLED) {
-      const timer = setTimeout(() => setSettling(false), settleMs())
-      return () => clearTimeout(timer)
-    }
-    return undefined
-  }, [mine, settling, lean])
-
-  const swing = lean
-
-  useEffect(() => {
-    if (!mine) return undefined
-    const root = document.documentElement
-    const was = root.style.userSelect
-    root.style.userSelect = held('picking-off')
-    return () => {
-      root.style.userSelect = was
-    }
-  }, [mine])
-
-  const travels = props.moves !== false
-
-  const flying = mine && travels && took.current !== null && pointer !== null
-
-  const layer =
-    flying && took.current !== null && pointer !== null ? (
-
-      <div
-        aria-hidden
-        className={placed('hit-box', 'carried')}
-        style={measured({
-          width: `${String(took.current.width)}px`,
-          height: `${String(took.current.height)}px`,
-          carry:
-            `translate3d(${String(pointer.x - took.current.gripX)}px, ${String(pointer.y - took.current.gripY)}px, 0)` +
-            ' var(--transform-carried, scale(1)) var(--transform-carried-turn, rotate(0deg))' +
-            ` rotate(${swing.toFixed(2)}deg)`,
-          grip: `${took.current.gripX.toFixed(1)}px ${took.current.gripY.toFixed(1)}px`,
-        })}
-      >
-        {props.children}
-      </div>
-    ) : null
-
-  return {
-    on: {
-      ref: node,
-      'data-hitbox': id,
-      style: measured({
-        touch: held(props.grabs === undefined ? 'touch-page' : (TOUCH_ACTION[(props.axis ?? 'both') as Axis] ?? 'touch-own')),
-        pick: held(props.grabs === undefined ? 'picking-open' : 'picking-off'),
-        shown: held(flying ? 'visibility-hidden' : 'visibility-shown'),
-        flow: held(flying ? 'position-lifted' : 'position-flow'),
-      }),
-      onPointerDown,
-      onPointerMove,
-      onPointerUp: (e: PointerEvent<HTMLDivElement>) => finish(e, false),
-      onPointerCancel: (e: PointerEvent<HTMLDivElement>) => finish(e, true),
-    },
-    layer,
-  }
-}
-
-export function shown(
-  _props: HitBoxProps,
-  _surface: ReturnType<typeof useSurface>,
-  _kept: ReturnType<typeof uses>,
-  wired: ReturnType<typeof wires>,
-): Readonly<Record<string, ReactNode>> {
-  return { carried: wired.layer === null ? null : createPortal(wired.layer, document.body) }
-}

package/dist/ui/elements/image.tsx

@@ -1,29 +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 ImageProps {
-  readonly src: string
-  readonly altKey: MessageKey
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Image: Element<'Image', ImageProps> = element(
-  'Image',
-  (props: ImageProps, 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 (
-      <img className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} src={props.src} alt={surface.text(props.altKey)} />
-    )
-  },
-  'e-image',
-  {"framed":"thread-framed"},
-)

package/dist/ui/elements/line-chart.tsx

@@ -1,45 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import type { Row } from '../charts.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { Each } from '../elements/each.tsx'
-import { drawing, lines, uses } from './line-chart.works.ts'
-
-
-export interface LineChartProps {
-  readonly rows: readonly Row[]
-  readonly by?: string
-  readonly value: string
-  readonly titleKey?: MessageKey
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const LineChart: Element<'LineChart', LineChartProps> = element(
-  'LineChart',
-  (props: LineChartProps, className) => {
-    const kept = uses(props)
-    const surface = useSurface({ className: roleClass(undefined, className),
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
-    holds: [
-      ...(kept.holds ?? []),
-    ],
-    ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
-    return (
-      <svg className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} role="img" {...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) })}>
-        <Each rows={lines(props, kept)} by={'group'}>
-          {(each0, at) => (
-            <polyline {...drawing(props, kept, each0, at)}></polyline>
-          )}
-        </Each>
-      </svg>
-    )
-  },
-  'e-line-chart',
-  {"card":"thread-card"},
-)

package/dist/ui/elements/line-chart.works.ts

@@ -1,41 +0,0 @@
-import { seriesColour } from '../series.ts'
-import { num, polyline, str, useRamp, type Row } from '../charts.tsx'
-import type { LineChartProps } from './line-chart.tsx'
-
-const WIDE = 300
-const TALL = 120
-
-export function lines(props: LineChartProps, _kept?: unknown): readonly Row[] {
-  if (props.by === undefined) return [{ group: '' }]
-  return [...new Set(props.rows.map((one: Row) => str(one, props.by as string)))].map((group) => ({ group }))
-}
-
-export function uses(props: LineChartProps): {
-  readonly holds?: readonly string[]
-  readonly animates?: boolean
-  readonly on?: Readonly<Record<string, unknown>>
-  readonly ramp: readonly string[]
-} {
-  const ramp = useRamp(lines(props).length)
-  return {
-    ...(props.rows.length === 0 ? { holds: ['empty'] as const } : {}),
-    on: { viewBox: `0 0 ${String(WIDE)} ${String(TALL)}` },
-    ramp,
-  }
-}
-
-export function drawing(
-  props: LineChartProps,
-  kept: { readonly ramp: readonly string[] },
-  row: Row,
-  at: number,
-): Readonly<Record<string, string | number>> {
-  const group = str(row, 'group')
-  const mine = props.rows.filter((one: Row) => props.by === undefined || str(one, props.by) === group)
-  return {
-    points: polyline(mine.map((one: Row) => num(one, props.value)), WIDE, TALL),
-    fill: 'none',
-    stroke: seriesColour(kept.ramp, at),
-    strokeWidth: 2,
-  }
-}