@prestack/thread-ui 0.1.10 → 0.1.11

package/dist/ui/variant.ts

@@ -1,349 +0,0 @@
-import { BOUND as MATERIAL_BOUND, compose, composed, FREE, type Material, type Setting } from './material.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 & {})
-
-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?: string
-
-  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

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

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

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

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

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

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

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