@prestack/thread-ui 0.0.1 → 0.0.2

package/dist/ui/consent.ts

@@ -0,0 +1,55 @@
+import { z } from 'zod'
+
+export const ConsentCategorySchema = z
+  .strictObject({
+    id: z
+      .string()
+      .regex(/^[a-z][a-z0-9_]*$/, 'a consent category id is lower_snake_case')
+      .describe('The id recorded in `thread.consent.categories`.'),
+    labelKey: z.string().min(1).describe('The category’s name, as a message key. Never a sentence.'),
+    describeKey: z.string().min(1).describe('What is collected under it, as a message key.'),
+
+    required: z.boolean().default(false).describe('True where the app cannot function without it.'),
+  })
+  .describe('One thing an app may ask permission to collect.')
+
+export type ConsentCategory = z.infer<typeof ConsentCategorySchema>
+
+const TELEMETRY: ConsentCategory = ConsentCategorySchema.parse({
+  id: 'telemetry',
+  labelKey: 'consent.telemetry.label',
+  describeKey: 'consent.telemetry.describe',
+})
+
+const REGISTRY = new Map<string, ConsentCategory>([[TELEMETRY.id, TELEMETRY]])
+
+export function defineConsentCategory(category: ConsentCategory): void {
+  const parsed = ConsentCategorySchema.parse(category)
+  if (REGISTRY.has(parsed.id)) throw new Error(`consent category "${parsed.id}" is already registered`)
+  REGISTRY.set(parsed.id, parsed)
+}
+
+export function consentCategories(): readonly ConsentCategory[] {
+  return [...REGISTRY.values()].sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
+}
+
+export function consentCategory(id: string): ConsentCategory | undefined {
+  return REGISTRY.get(id)
+}
+
+export const ConsentDecisionSchema = z
+  .strictObject({
+    decision: z.enum(['accepted', 'declined', 'withdrawn']).describe('Withdrawal is a decision and is recorded like any other.'),
+
+    accepted: z.array(z.string()).describe('The category ids accepted.'),
+    offered: z.array(z.string()).describe('Every category shown at that moment, accepted or not.'),
+  })
+  .describe('One consent decision, with the choice set as it stood when it was made.')
+
+export type ConsentDecision = z.infer<typeof ConsentDecisionSchema>
+
+export function consentAllows(decision: ConsentDecision | undefined, categoryId: string): boolean {
+  if (consentCategory(categoryId)?.required === true) return true
+  if (decision === undefined || decision.decision !== 'accepted') return false
+  return decision.accepted.includes(categoryId)
+}

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
+}