@prestack/thread-ui 0.0.1 → 0.1.0

package/dist/ui/variant.ts

@@ -0,0 +1,352 @@
+import { BOUND as MATERIAL_BOUND, compose, composed, FREE, type Material, type Setting } from './material.ts'
+import type { MATERIALS } from './materials.ts'
+import type { Holds, Token, Wearing } from './token.ts'
+import { coexist, holds, isSignal, selectorOf, signalNames } from './signals.ts'
+
+interface Stateful {
+  readonly id: string
+
+  readonly states?: readonly {
+    readonly when: readonly string[]
+    readonly sets: readonly Setting[]
+  }[]
+}
+
+type SignalId = (typeof holds)[number]['id'] | (string & {})
+
+type MaterialId = (typeof MATERIALS)['declares'][number]['id'] | (string & {})
+
+const BOUND = {
+  background: ['colour', 'gradient', 'texture', 'noise', 'img'],
+  borderColor: ['colour'],
+  color: ['colour'],
+  borderRadius: ['radius'],
+  borderWidth: ['edge'],
+
+  borderStyle: ['line'],
+  boxShadow: ['shadow'],
+  cursor: ['cursor'],
+  gap: ['space'],
+  padding: ['space'],
+  outlineOffset: ['space'],
+  minHeight: ['control', 'space'],
+  minWidth: ['space'],
+  maxWidth: ['space'],
+  opacity: ['opacity'],
+  transform: ['transform'],
+  animation: ['animation'],
+  width: ['icon'],
+  height: ['control', 'icon'],
+
+  display: ['layout'],
+  flexDirection: ['flow'],
+  alignItems: ['align'],
+  justifyContent: ['align'],
+  flexWrap: ['wrap'],
+
+  position: ['position'],
+  visibility: ['visibility'],
+  pointerEvents: ['reach'],
+  userSelect: ['picking'],
+  touchAction: ['touch'],
+  willChange: ['readying'],
+  transformOrigin: ['origin'],
+  overflow: ['overflow'],
+  zIndex: ['layer'],
+  top: ['space'],
+  left: ['space'],
+  aspectRatio: ['ratio'],
+} as const
+
+type Property = keyof typeof BOUND
+
+type BoundSettingFor<P extends Property> = {
+  readonly property: P
+
+  readonly is?: string
+
+  readonly token?: (typeof BOUND)[P][number]
+
+  readonly asks?: Readonly<Record<string, string | number>>
+}
+
+type FreeProperty = (typeof FREE)[number]
+
+type FreeSettingFor<P extends FreeProperty> = {
+  readonly property: P
+
+  readonly is: string
+}
+
+type VariantSetting =
+  | { [P in Property]: BoundSettingFor<P> }[Property]
+  | { [P in FreeProperty]: FreeSettingFor<P> }[FreeProperty]
+
+export interface Variant {
+  readonly id: string
+
+  readonly version?: number
+
+  readonly material?: MaterialId
+
+  readonly type?: string
+
+  readonly icon?: string
+
+  readonly sets: readonly VariantSetting[]
+
+  readonly states?: readonly {
+    readonly when: readonly SignalId[]
+    readonly sets: readonly VariantSetting[]
+  }[]
+
+  readonly reacts: readonly SignalId[]
+
+  readonly plays?: {
+    readonly in?: string
+    readonly out?: string
+  }
+}
+
+export function propertiesHeld(): Readonly<Record<string, readonly string[]>> {
+  return BOUND
+}
+
+export function freeHeld(): readonly string[] {
+  return FREE
+}
+
+export const structural = new Set(['tag', 'shows', 'reads', 'holds', 'each', 'by', 'takes', 'marks', 'gives', 'keyed', 'when'])
+
+export function looking(made: Readonly<Record<string, string>>): boolean {
+  return Object.keys(made).some((key) => !structural.has(key))
+}
+
+export const variant = <const T extends Variant>(
+  one: T & {
+    readonly sets: {
+      readonly [I in keyof T['sets']]: T['sets'][I] extends { readonly is: infer Said }
+        ? { readonly is: Wearing<Said & string> }
+        : unknown
+    }
+  } & (T extends { readonly states: infer States }
+    ? {
+        readonly states: {
+          readonly [S in keyof States]: States[S] extends { readonly sets: infer Sets }
+            ? {
+                readonly sets: {
+                  readonly [I in keyof Sets]: Sets[I] extends { readonly is: infer Said }
+                    ? { readonly is: Wearing<Said & string> }
+                    : unknown
+                }
+              }
+            : unknown
+        }
+      }
+    : unknown),
+): T => one
+
+export function boundHeld(): Readonly<Record<string, readonly string[]>> {
+  return BOUND
+}
+export function camel(id: string): string {
+  return id.replace(/-([a-z0-9])/g, (_, one: string) => one.toUpperCase())
+}
+
+export function classOf(id: string): string {
+  return `thread-${id}`
+}
+
+export function classOfElement(id: string): string {
+  return `e-${id}`
+}
+
+export function classOfComposition(id: string): string {
+  return `c-${id}`
+}
+
+export function classOfScreen(id: string): string {
+  return `s-${id}`
+}
+
+export function unreacted(
+  variant: Variant,
+  materials: Readonly<Record<string, Material>>,
+): readonly string[] {
+  const whole = statesOf(variant, materials)
+  const described = new Set((whole.states ?? []).flatMap((one) => one.when))
+  const claimed = new Set<string>(variant.reacts)
+  const missing: string[] = []
+
+  for (const name of [...described].sort()) {
+    if (claimed.has(name)) continue
+    missing.push(
+      `\`${variant.id}\` looks different under "${name}" and does not say it reacts to it. A ` +
+        'variant states what it answers to, so reading one tells you without opening its material.',
+    )
+  }
+
+  for (const name of [...claimed].sort()) {
+    if (!isSignal(name)) {
+      missing.push(
+        `\`${variant.id}\` says it reacts to "${name}", and no signal by that name is declared. ` +
+          `Declared: ${signalNames().join(' · ')}.`,
+      )
+      continue
+    }
+    if (described.has(name)) continue
+    missing.push(
+      `\`${variant.id}\` says it reacts to "${name}" and never says how it looks under it, so it ` +
+        'reacts to nothing.',
+    )
+  }
+
+  return missing
+}
+
+export function complete(
+  variant: Variant,
+  materials: Readonly<Record<string, Material>>,
+  named: ReadonlySet<string>,
+  tokens: Readonly<Record<string, Token>>,
+  kinds: Readonly<Record<string, string>>,
+): Readonly<Record<string, Holds>> {
+  const made: Record<string, Holds> = {}
+
+  if (variant.material !== undefined) {
+    const material = materials[variant.material]
+    if (material === undefined) {
+      throw new Error(
+        `\`${variant.id}\` is made of \`${variant.material}\`, and no material by that name is ` +
+          'declared. A variant is material plus the rest, so without the material there is no rest.',
+      )
+    }
+    Object.assign(made, compose(material, named, tokens, kinds))
+  }
+
+  Object.assign(
+    made,
+    composed(variant.sets, named, tokens, variant.id, kinds, { ...MATERIAL_BOUND, ...BOUND }),
+  )
+
+  return made
+}
+
+export function statesOf(
+  variant: Variant,
+  materials: Readonly<Record<string, Material>>,
+): Stateful {
+  const material = variant.material === undefined ? undefined : materials[variant.material]
+  const merged = new Map<string, { when: readonly string[]; sets: Setting[] }>()
+
+  for (const state of [...(material?.states ?? []), ...(variant.states ?? [])]) {
+    const at = [...state.when].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0)).join('+')
+    const already = merged.get(at)
+    if (already === undefined) merged.set(at, { when: state.when, sets: [...state.sets] })
+    else already.sets.push(...state.sets)
+  }
+
+  return { id: variant.id, states: [...merged.values()] }
+}
+
+function marked(when: readonly string[]): string {
+  return [...when]
+    .sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))
+    .map((one) => selectorOf(one) ?? '')
+    .join('')
+}
+
+export function under(
+  variant: Stateful,
+  named: ReadonlySet<string>,
+  tokens: Readonly<Record<string, Token>>,
+  kinds: Readonly<Record<string, string>>,
+): readonly { readonly marks: string; readonly made: Readonly<Record<string, Holds>> }[] {
+  const found: { marks: string; made: Readonly<Record<string, Holds>> }[] = []
+
+  for (const state of variant.states ?? []) {
+    if (state.when.length === 0) {
+      throw new Error(
+        `\`${variant.id}\` declares a state that names no signal. A state is the set of truths it ` +
+          'holds under, and the empty set is the resting look, which is already declared.',
+      )
+    }
+
+    for (const name of state.when) {
+      if (isSignal(name)) continue
+      throw new Error(
+        `\`${variant.id}\` declares a state under \`${name}\`, and no signal by that name is ` +
+          `declared. Declared: ${signalNames().join(' · ')}.`,
+      )
+    }
+
+    found.push({
+      marks: marked(state.when),
+      made: composed(state.sets, named, tokens, variant.id, kinds, { ...MATERIAL_BOUND, ...BOUND }),
+    })
+  }
+
+  return found
+}
+
+const key = (when: readonly string[]): string =>
+  [...when].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0)).join('+')
+
+function sized(all: readonly string[], size: number): readonly (readonly string[])[] {
+  if (size === 0) return [[]]
+  const found: (readonly string[])[] = []
+  for (let at = 0; at <= all.length - size; at += 1) {
+    const head = all[at]
+    if (head === undefined) continue
+    for (const rest of sized(all.slice(at + 1), size - 1)) found.push([head, ...rest])
+  }
+  return found
+}
+
+function together(all: readonly string[]): boolean {
+  for (let i = 0; i < all.length; i += 1) {
+    for (let j = i + 1; j < all.length; j += 1) {
+      if (!coexist(all[i] ?? '', all[j] ?? '')) return false
+    }
+  }
+  return true
+}
+
+export function undeclaredStates(variant: Stateful): readonly string[] {
+  const states = variant.states ?? []
+  const declared = new Set(states.map((one) => key(one.when)))
+  const named = [...new Set(states.flatMap((one) => one.when))].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0))
+  const missing: string[] = []
+
+  for (let size = 2; size <= named.length; size += 1) {
+    for (const combination of sized(named, size)) {
+      if (!together(combination)) continue
+      if (declared.has(key(combination))) continue
+
+      const applying = states.filter((one) => one.when.every((name) => combination.includes(name)))
+      const deepest = new Map<string, number>()
+      const tied = new Map<string, number>()
+      for (const state of applying) {
+        for (const property of new Set(state.sets.map((set) => set.property))) {
+          const depth = deepest.get(property) ?? 0
+          if (state.when.length > depth) {
+            deepest.set(property, state.when.length)
+            tied.set(property, 1)
+          } else if (state.when.length === depth) {
+            tied.set(property, (tied.get(property) ?? 0) + 1)
+          }
+        }
+      }
+      const clash = new Set([...tied.entries()].filter(([, held]) => held > 1).map(([property]) => property))
+      if (clash.size === 0) continue
+
+      missing.push(
+        `${combination.map((one) => `"${one}"`).join(' and ')} can all hold at once and they all ` +
+          `set ${[...clash].sort().join(', ')}, so which one wins would be an accident of file ` +
+          `order. "${key(combination)}" is not declared — declare it, or say the signals cannot coexist`,
+      )
+    }
+  }
+
+  return missing
+}

package/dist/ui/variants/var_avatar-round.ts

@@ -0,0 +1,14 @@
+import { variant } from '../variant.ts'
+
+export const AVATAR_ROUND = variant({
+  id: 'avatar-round',
+  sets: [
+    { property: 'width', is: 'icon-lg' },
+    { property: 'height', is: 'icon-lg' },
+    { property: 'borderRadius', is: 'radius-pill' },
+    { property: 'background', is: 'colour-sunken' },
+    { property: 'display', is: 'layout-flex' },
+    { property: 'alignItems', is: 'align-centre' },
+  ],
+  reacts: [],
+} as const)

package/dist/ui/variants/var_bubble-me.ts

@@ -0,0 +1,14 @@
+import { variant } from '../variant.ts'
+
+export const BUBBLE_ME = variant({
+  id: 'bubble-me',
+  material: 'flat',
+  sets: [
+    { property: 'background', is: 'colour-accent' },
+    { property: 'color', is: 'colour-on-accent' },
+    { property: 'borderRadius', is: 'radius-lg' },
+    { property: 'padding', is: 'space-3 space-4' },
+    { property: 'gap', is: 'space-2' },
+  ],
+  reacts: ['focus', 'hover'],
+} as const)

package/dist/ui/variants/var_bubble-them.ts

@@ -0,0 +1,13 @@
+import { variant } from '../variant.ts'
+
+export const BUBBLE_THEM = variant({
+  id: 'bubble-them',
+  material: 'flat',
+  sets: [
+    { property: 'color', is: 'colour-ink' },
+    { property: 'borderRadius', is: 'radius-lg' },
+    { property: 'padding', is: 'space-3 space-4' },
+    { property: 'gap', is: 'space-2' },
+  ],
+  reacts: ['focus', 'hover'],
+} as const)

package/dist/ui/variants/var_button-border.ts

@@ -0,0 +1,76 @@
+import { variant } from '../variant.ts'
+
+export const BUTTON_BORDER = variant({
+  id: 'button-border',
+  type: 'label',
+  icon: 'md',
+  sets: [
+    { property: 'display', is: 'layout-flex' },
+    { property: 'alignItems', is: 'align-centre' },
+    { property: 'justifyContent', is: 'align-centre' },
+    { property: 'borderRadius', is: 'control-radius' },
+    { property: 'height', is: 'control-md' },
+    { property: 'padding', is: 'control-pad-y control-pad-x' },
+    { property: 'gap', is: 'control-gap' },
+    { property: 'cursor', is: 'cursor-press' },
+    { property: 'transition', is: 'motion-quick ease-out' },
+    { property: 'background', is: 'colour-clear' },
+    { property: 'color', is: 'colour-accent' },
+    { property: 'borderWidth', is: 'control-edge' },
+    { property: 'borderStyle', is: 'line-solid' },
+    { property: 'borderColor', is: 'colour-accent' },
+    { property: 'boxShadow', is: 'shadow-0' },
+  ],
+  states: [
+    {
+      when: ['hover'],
+      sets: [
+        { property: 'background', is: 'colour-surface-lit' },
+        { property: 'transform', is: 'transform-lift' },
+      ],
+    },
+    {
+      when: ['active'],
+      sets: [
+        { property: 'background', is: 'colour-surface-lit' },
+        { property: 'transform', is: 'transform-press' },
+      ],
+    },
+    {
+      when: ['active', 'hover'],
+      sets: [
+        { property: 'background', is: 'colour-surface-lit' },
+        { property: 'transform', is: 'transform-press' },
+      ],
+    },
+    {
+      when: ['focus'],
+      sets: [
+        { property: 'outline', is: 'control-ring line-solid colour-accent' },
+        { property: 'outlineOffset', is: 'control-ring-offset' },
+      ],
+    },
+    {
+      when: ['loading'],
+      sets: [
+        { property: 'opacity', is: 'opacity-muted' },
+      ],
+    },
+    {
+      when: ['disabled'],
+      sets: [
+        { property: 'cursor', is: 'cursor-refuse' },
+        { property: 'borderColor', is: 'colour-edge' },
+        { property: 'color', is: 'colour-ink-faint' },
+      ],
+    },
+    {
+      when: ['disabled', 'hover'],
+      sets: [
+        { property: 'background', is: 'colour-clear' },
+        { property: 'transform', is: 'transform-rest' },
+      ],
+    },
+  ],
+  reacts: ['active', 'disabled', 'focus', 'hover', 'loading'],
+} as const)

package/dist/ui/variants/var_button-cta.ts

@@ -0,0 +1,76 @@
+import { variant } from '../variant.ts'
+
+export const BUTTON_CTA = variant({
+  id: 'button-cta',
+  type: 'body',
+  icon: 'md',
+  sets: [
+    { property: 'display', is: 'layout-flex' },
+    { property: 'alignItems', is: 'align-centre' },
+    { property: 'justifyContent', is: 'align-centre' },
+    { property: 'borderRadius', is: 'control-radius' },
+    { property: 'height', is: 'control-lg' },
+    { property: 'padding', is: 'control-pad-y control-pad-x' },
+    { property: 'gap', is: 'control-gap' },
+    { property: 'cursor', is: 'cursor-press' },
+    { property: 'transition', is: 'motion-quick ease-out' },
+    { property: 'background', is: 'colour-accent' },
+    { property: 'color', is: 'colour-on-accent' },
+    { property: 'borderWidth', is: 'edge-hair' },
+    { property: 'borderStyle', is: 'line-off' },
+    { property: 'borderColor', is: 'colour-clear' },
+    { property: 'boxShadow', is: 'shadow-2' },
+  ],
+  states: [
+    {
+      when: ['hover'],
+      sets: [
+        { property: 'background', is: 'colour-accent-hover' },
+        { property: 'transform', is: 'transform-lift' },
+      ],
+    },
+    {
+      when: ['active'],
+      sets: [
+        { property: 'background', is: 'colour-accent-press' },
+        { property: 'transform', is: 'transform-press' },
+      ],
+    },
+    {
+      when: ['active', 'hover'],
+      sets: [
+        { property: 'background', is: 'colour-accent-press' },
+        { property: 'transform', is: 'transform-press' },
+      ],
+    },
+    {
+      when: ['focus'],
+      sets: [
+        { property: 'outline', is: 'control-ring line-solid colour-accent' },
+        { property: 'outlineOffset', is: 'control-ring-offset' },
+      ],
+    },
+    {
+      when: ['loading'],
+      sets: [
+        { property: 'opacity', is: 'opacity-muted' },
+      ],
+    },
+    {
+      when: ['disabled'],
+      sets: [
+        { property: 'cursor', is: 'cursor-refuse' },
+        { property: 'background', is: 'colour-sunken' },
+        { property: 'color', is: 'colour-ink-faint' },
+      ],
+    },
+    {
+      when: ['disabled', 'hover'],
+      sets: [
+        { property: 'background', is: 'colour-sunken' },
+        { property: 'transform', is: 'transform-rest' },
+      ],
+    },
+  ],
+  reacts: ['active', 'disabled', 'focus', 'hover', 'loading'],
+} as const)

package/dist/ui/variants/var_button-destructive-ghost.ts

@@ -0,0 +1,72 @@
+import { variant } from '../variant.ts'
+
+export const BUTTON_DESTRUCTIVE_GHOST = variant({
+  id: 'button-destructive-ghost',
+  type: 'label',
+  icon: 'md',
+  sets: [
+    { property: 'display', is: 'layout-flex' },
+    { property: 'alignItems', is: 'align-centre' },
+    { property: 'justifyContent', is: 'align-centre' },
+    { property: 'borderRadius', is: 'control-radius' },
+    { property: 'height', is: 'control-md' },
+    { property: 'padding', is: 'control-pad-y control-pad-x' },
+    { property: 'gap', is: 'control-gap' },
+    { property: 'cursor', is: 'cursor-press' },
+    { property: 'transition', is: 'motion-quick ease-out' },
+    { property: 'background', is: 'colour-clear' },
+    { property: 'color', is: 'colour-negative' },
+    { property: 'borderWidth', is: 'edge-hair' },
+    { property: 'borderStyle', is: 'line-off' },
+    { property: 'borderColor', is: 'colour-clear' },
+    { property: 'boxShadow', is: 'shadow-0' },
+  ],
+  states: [
+    {
+      when: ['hover'],
+      sets: [
+        { property: 'background', is: 'colour-surface-alert' },
+        { property: 'transform', is: 'transform-lift' },
+      ],
+    },
+    {
+      when: ['active'],
+      sets: [
+        { property: 'background', is: 'colour-surface-alert' },
+        { property: 'transform', is: 'transform-press' },
+      ],
+    },
+    {
+      when: ['active', 'hover'],
+      sets: [
+        { property: 'background', is: 'colour-surface-alert' },
+        { property: 'transform', is: 'transform-press' },
+      ],
+    },
+    {
+      when: ['focus'],
+      sets: [
+        { property: 'outline', is: 'control-ring line-solid colour-negative' },
+        { property: 'outlineOffset', is: 'control-ring-offset' },
+      ],
+    },
+    {
+      when: ['loading'],
+      sets: [
+        { property: 'opacity', is: 'opacity-muted' },
+      ],
+    },
+    {
+      when: ['disabled'],
+      sets: [{ property: 'color', is: 'colour-ink-faint' }, { property: 'cursor', is: 'cursor-refuse' }],
+    },
+    {
+      when: ['disabled', 'hover'],
+      sets: [
+        { property: 'background', is: 'colour-clear' },
+        { property: 'transform', is: 'transform-rest' },
+      ],
+    },
+  ],
+  reacts: ['active', 'disabled', 'focus', 'hover', 'loading'],
+} as const)

package/dist/ui/variants/var_button-destructive.ts

@@ -0,0 +1,76 @@
+import { variant } from '../variant.ts'
+
+export const BUTTON_DESTRUCTIVE = variant({
+  id: 'button-destructive',
+  type: 'label',
+  icon: 'md',
+  sets: [
+    { property: 'display', is: 'layout-flex' },
+    { property: 'alignItems', is: 'align-centre' },
+    { property: 'justifyContent', is: 'align-centre' },
+    { property: 'borderRadius', is: 'control-radius' },
+    { property: 'height', is: 'control-md' },
+    { property: 'padding', is: 'control-pad-y control-pad-x' },
+    { property: 'gap', is: 'control-gap' },
+    { property: 'cursor', is: 'cursor-press' },
+    { property: 'transition', is: 'motion-quick ease-out' },
+    { property: 'background', is: 'colour-negative' },
+    { property: 'color', is: 'colour-on-negative' },
+    { property: 'borderWidth', is: 'edge-hair' },
+    { property: 'borderStyle', is: 'line-off' },
+    { property: 'borderColor', is: 'colour-clear' },
+    { property: 'boxShadow', is: 'shadow-0' },
+  ],
+  states: [
+    {
+      when: ['hover'],
+      sets: [
+        { property: 'background', is: 'colour-negative-hover' },
+        { property: 'transform', is: 'transform-lift' },
+      ],
+    },
+    {
+      when: ['active'],
+      sets: [
+        { property: 'background', is: 'colour-negative-press' },
+        { property: 'transform', is: 'transform-press' },
+      ],
+    },
+    {
+      when: ['active', 'hover'],
+      sets: [
+        { property: 'background', is: 'colour-negative-press' },
+        { property: 'transform', is: 'transform-press' },
+      ],
+    },
+    {
+      when: ['focus'],
+      sets: [
+        { property: 'outline', is: 'control-ring line-solid colour-negative' },
+        { property: 'outlineOffset', is: 'control-ring-offset' },
+      ],
+    },
+    {
+      when: ['loading'],
+      sets: [
+        { property: 'opacity', is: 'opacity-muted' },
+      ],
+    },
+    {
+      when: ['disabled'],
+      sets: [
+        { property: 'cursor', is: 'cursor-refuse' },
+        { property: 'background', is: 'colour-sunken' },
+        { property: 'color', is: 'colour-ink-faint' },
+      ],
+    },
+    {
+      when: ['disabled', 'hover'],
+      sets: [
+        { property: 'background', is: 'colour-sunken' },
+        { property: 'transform', is: 'transform-rest' },
+      ],
+    },
+  ],
+  reacts: ['active', 'disabled', 'focus', 'hover', 'loading'],
+} as const)