@prestack/thread-ui 0.1.10 → 0.1.12

package/dist/ui/contrast.ts

@@ -1,27 +0,0 @@
-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

@@ -1,25 +0,0 @@
-'use client'
-
-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

@@ -1,20 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-
-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

@@ -1,87 +0,0 @@
-'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

@@ -1,140 +0,0 @@
-
-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

@@ -1,316 +0,0 @@
-
-
-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.tsx

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