@prestack/thread-ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,46 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { Subject } from '../drag.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { shown, uses, wires } from './hit-box.works.tsx'
+
+
+export interface HitBoxProps {
+  readonly children: ReactNode
+  readonly gesture: string
+  readonly tuning?: Readonly<Record<string, number>>
+  readonly axis?: string
+  readonly grabs?: Subject | readonly Subject[]
+  readonly accepts: readonly string[]
+  readonly collects?: Subject | readonly Subject[]
+  readonly dwell?: number
+  readonly moves?: boolean
+  readonly onDrop?: () => void
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const HitBox: Element<'HitBox', HitBoxProps> = element(
+  'HitBox',
+  (props: HitBoxProps, 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 ?? []),
+    ],
+    ...(kept.animates === undefined ? {} : { animates: kept.animates }), })
+    const wired = wires(props, kept, surface)
+    return (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} {...(wired.on ?? {})}>
+        {props.children}
+        <div className="e-hit-box-carried">{shown(props, surface, kept, wired).carried}</div>
+      </div>
+    )
+  },
+  'e-hit-box',
+  {"tapTarget":"thread-tap-target"},
+)

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

@@ -0,0 +1,576 @@
+'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,
+  type Subject,
+} from '../drag.ts'
+import { measured, placed } from '../charts.tsx'
+import { nameOf } from '../token.ts'
+import { useSurface, useUi } from '../wrappers.tsx'
+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, 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 } = 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 = 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.js

@@ -6,4 +6,4 @@ export const Image = element('Image', (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("img", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, src: props.src, alt: surface.text(props.altKey) }));
-}, 'e-image');
+}, 'e-image', { "framed": "thread-framed" });

package/dist/ui/elements/image.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+
+
+export interface ImageProps {
+  readonly src: string
+  readonly altKey: MessageKey
+  readonly dispatch?: string
+  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.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } 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 { drawing, lines, uses } from "./line-chart.works.js";
 export const LineChart = element('LineChart', (props, className) => {
     const kept = uses(props);
@@ -13,4 +13,4 @@ export const LineChart = element('LineChart', (props, className) => {
         ],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsx("svg", { 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: lines(props, kept), by: 'group', children: (each0, at) => (_jsx("polyline", { ...drawing(props, kept, each0, at) })) }) }));
-}, 'e-line-chart');
+}, 'e-line-chart', { "card": "thread-card" });