@prestack/thread-ui 0.1.10 → 0.1.12

package/dist/ui/elements/accordion.works.ts

@@ -1,66 +0,0 @@
-import { useId, useState, type ReactNode } from 'react'
-
-import type { Row } from '../charts.tsx'
-import type { Surface } from '../door.ts'
-import type { AccordionProps } from './accordion.tsx'
-
-type Kept = {
-  readonly base: string
-  readonly open: readonly string[]
-  readonly toggle: (id: string) => void
-}
-
-export function uses(props: AccordionProps): {
-  readonly holds?: readonly string[]
-  readonly animates?: boolean
-  readonly on?: Readonly<Record<string, unknown>>
-  readonly base: string
-  readonly open: readonly string[]
-  readonly toggle: (id: string) => void
-} {
-  const base = useId()
-  const [open, setOpen] = useState<readonly string[]>(props.initial ?? [])
-  return {
-    base,
-    open,
-    toggle: (id: string): void => {
-      const next = open.includes(id)
-        ? open.filter((one) => one !== id)
-        : props.exclusive === true
-          ? [id]
-          : [...open, id]
-      setOpen(next)
-      props.onChange?.(next)
-    },
-  }
-}
-
-export function section(_props: AccordionProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>> {
-  return { 'data-open': kept.open.includes(String(row['id'])) }
-}
-
-export function header(_props: AccordionProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>> {
-  const id = String(row['id'])
-  return {
-    type: 'button',
-    id: `${kept.base}-header-${id}`,
-    'aria-controls': `${kept.base}-region-${id}`,
-    'aria-expanded': kept.open.includes(id),
-    disabled: row['disabled'] === true,
-    onClick: (): void => kept.toggle(id),
-  }
-}
-
-export function region(_props: AccordionProps, kept: Kept, row: Row, _at: number): Readonly<Record<string, unknown>> {
-  const id = String(row['id'])
-  return {
-    role: 'region',
-    id: `${kept.base}-region-${id}`,
-    'aria-labelledby': `${kept.base}-header-${id}`,
-    hidden: !kept.open.includes(id),
-  }
-}
-
-export function shown(_props: AccordionProps, row: Row, surface: Surface, _kept: unknown): Readonly<Record<string, ReactNode>> {
-  return { label: surface.text(String(row['labelKey'])), inside: row['content'] as ReactNode }
-}

package/dist/ui/elements/aspect-ratio.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-
-
-export interface AspectRatioProps {
-  readonly children: ReactNode
-  readonly ratio: number
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const AspectRatio: Element<'AspectRatio', AspectRatioProps> = element(
-  'AspectRatio',
-  (props: AspectRatioProps, className) => {
-    const surface = useSurface({ className,
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
-    measures: { "ratio": String(props.ratio ?? '') }, })
-    return (
-      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} style={surface.measures}>
-        {props.children}
-      </div>
-    )
-  },
-  'e-aspect-ratio',
-  {"framed":"thread-framed"},
-)

package/dist/ui/elements/aspect-ratio.works.ts

@@ -1,5 +0,0 @@
-import type { AspectRatioProps } from './aspect-ratio.tsx'
-
-export function measured(props: AspectRatioProps): Readonly<Record<string, string | number>> {
-  return { ratio: props.ratio }
-}

package/dist/ui/elements/avatar.tsx

@@ -1,34 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { shown } from './avatar.works.ts'
-
-
-export interface AvatarProps {
-  readonly labelKey: MessageKey
-  readonly src?: string
-  readonly initials?: string
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Avatar: Element<'Avatar', AvatarProps> = element(
-  'Avatar',
-  (props: AvatarProps, 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 (
-      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} role="img" aria-label={surface.text(props.labelKey)}>
-        {props.src === undefined ? null : <img src={props.src} alt="" />}
-        <span>{shown(props, surface).lettering}</span>
-      </span>
-    )
-  },
-  'e-avatar',
-  {"avatarRound":"thread-avatar-round"},
-)

package/dist/ui/elements/avatar.works.ts

@@ -1,16 +0,0 @@
-import type { AvatarProps } from './avatar.tsx'
-
-export function shown(props: AvatarProps, surface: { readonly text: (key: AvatarProps['labelKey']) => string }): Readonly<Record<string, string | null>> {
-  if (props.src !== undefined) return { lettering: null }
-  const said = props.initials
-  if (said !== undefined) return { lettering: said }
-  return {
-    lettering: surface
-      .text(props.labelKey)
-      .split(/\s+/)
-      .filter(Boolean)
-      .slice(0, 2)
-      .map((part) => part.charAt(0).toUpperCase())
-      .join(''),
-  }
-}

package/dist/ui/elements/badge.tsx

@@ -1,33 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { shows } from './badge.works.ts'
-
-
-export interface BadgeProps {
-  readonly labelKey: MessageKey
-  readonly count?: number
-  readonly max?: number
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Badge: Element<'Badge', BadgeProps> = element(
-  'Badge',
-  (props: BadgeProps, 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 (
-      <span className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
-        {shows(props, surface)}
-      </span>
-    )
-  },
-  'e-badge',
-  {"chip":"thread-chip"},
-)

package/dist/ui/elements/badge.works.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from 'react'
-
-import type { BadgeProps } from './badge.tsx'
-
-export function shows(props: BadgeProps, surface: { readonly text: (key: BadgeProps['labelKey']) => string }): ReactNode {
-  const max = props.max ?? 99
-  if (props.count === undefined) return surface.text(props.labelKey)
-  return props.count > max ? `${max}+` : String(props.count)
-}

package/dist/ui/elements/bars.tsx

@@ -1,50 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import type { Row } from '../charts.tsx'
-import { roleClass } from '../fonts.ts'
-import { measured as marking } from '../charts.tsx'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { Each } from '../elements/each.tsx'
-import { shown, sized, uses } from './bars.works.ts'
-
-
-export interface BarsProps {
-  readonly rows: readonly Row[]
-  readonly by: string
-  readonly value: string
-  readonly format?: string
-  readonly titleKey?: MessageKey
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Bars: Element<'Bars', BarsProps> = element(
-  'Bars',
-  (props: BarsProps, 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 ?? {})} role="img" {...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) })}>
-        <Each rows={props.rows} by={props.by}>
-          {(each0, at) => (
-            <span style={marking(sized(props, kept, each0, at))}>
-              <span>{shown(props, each0, surface, kept).label}</span>
-              <span>{shown(props, each0, surface, kept).amount}</span>
-            </span>
-          )}
-        </Each>
-      </div>
-    )
-  },
-  'e-bars',
-  {"card":"thread-card"},
-)

package/dist/ui/elements/bars.works.ts

@@ -1,29 +0,0 @@
-import { formatValue } from '../validators.ts'
-import { seriesColour } from '../series.ts'
-import { num, str, useRamp, type Row } from '../charts.tsx'
-import type { BarsProps } from './bars.tsx'
-
-export function uses(props: BarsProps): {
-  readonly holds?: readonly string[]
-  readonly animates?: boolean
-  readonly on?: Readonly<Record<string, unknown>>
-  readonly ramp: readonly string[]
-} {
-  const ramp = useRamp(props.rows.length)
-  return { ...(props.rows.length === 0 ? { holds: ['empty'] as const } : {}), ramp }
-}
-
-export function sized(props: BarsProps, kept: { readonly ramp: readonly string[] }, row: Row, at: number): Readonly<Record<string, string | number>> {
-  const most = Math.max(...props.rows.map((one: Row) => num(one, props.value)), 0) || 1
-  return {
-    series: seriesColour(kept.ramp, at),
-    fraction: `${((num(row, props.value) / most) * 100).toFixed(1)}%`,
-  }
-}
-
-export function shown(props: BarsProps, row: Row, _surface: unknown, _kept?: unknown): Readonly<Record<string, string>> {
-  return {
-    label: str(row, props.by),
-    amount: String(formatValue(props.format ?? 'number', num(row, props.value))),
-  }
-}

package/dist/ui/elements/box.tsx

@@ -1,36 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import type { MessageKey } from '../content.tsx'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-
-
-export interface BoxProps {
-  readonly children: ReactNode
-  readonly labelKey?: MessageKey
-  readonly scrolling?: boolean
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Box: Element<'Box', BoxProps> = element(
-  'Box',
-  (props: BoxProps, className) => {
-    const surface = useSurface({ className,
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) },
-    holds: [
-      ...(props.scrolling === true ? ['scrolling' as const] : []),
-    ],
-    raises: ['scrolling' as const], })
-    return (
-      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(props.labelKey === undefined ? {} : { role: 'group' as const })} {...(props.labelKey === undefined ? {} : { 'aria-label': surface.text(props.labelKey) })}>
-        {props.children}
-      </div>
-    )
-  },
-  'e-box',
-  {"card":"thread-card","listRow":"thread-list-row","bubbleThem":"thread-bubble-them","bubbleMe":"thread-bubble-me"},
-)

package/dist/ui/elements/breadcrumb.tsx

@@ -1,38 +0,0 @@
-'use client'
-
-import { roleClass } from '../fonts.ts'
-import type { MapIsland } from '../islands/map.ts'
-import { Link } from './link.tsx'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { Each } from '../elements/each.tsx'
-import { crumb, steps } from './breadcrumb.works.ts'
-
-
-export interface BreadcrumbProps {
-  readonly map: MapIsland
-  readonly current: string
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Breadcrumb: Element<'Breadcrumb', BreadcrumbProps> = element(
-  'Breadcrumb',
-  (props: BreadcrumbProps, 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 (
-      <nav className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} aria-label={surface.text('nav.breadcrumb')}>
-        <Each rows={steps(props)} by={'id'}>
-          {(each0, at) => (
-            <Link.linkInline {...crumb(props, each0, at)}></Link.linkInline>
-          )}
-        </Each>
-      </nav>
-    )
-  },
-  'e-breadcrumb',
-  {"tabBar":"thread-tab-bar"},
-)

package/dist/ui/elements/breadcrumb.works.ts

@@ -1,24 +0,0 @@
-import { trailTo } from '../navigation.tsx'
-import type { Row } from '../charts.tsx'
-import type { BreadcrumbProps } from './breadcrumb.tsx'
-import type { LinkProps } from './link.tsx'
-
-export function steps(props: BreadcrumbProps): readonly Row[] {
-  const known = new Map(props.map.screens.map((one) => [one.id, one]))
-  if (!known.has(props.current)) return []
-  const trail = trailTo(props.map, props.current)
-  return trail.flatMap((id, at) => {
-    const screen = known.get(id)
-    if (screen === undefined) return []
-    return [{ id, nameKey: screen.nameKey, here: at === trail.length - 1 }]
-  })
-}
-
-export function crumb(_props: BreadcrumbProps, row: Row, _at: number): LinkProps & { readonly 'aria-current'?: 'page' } {
-  return {
-    navigateTo: String(row['id']),
-    labelKey: String(row['nameKey']),
-    is: 'label',
-    ...(row['here'] === true ? ({ 'aria-current': 'page' } as const) : {}),
-  }
-}

package/dist/ui/elements/button.tsx

@@ -1,46 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import { roleClass } from '../fonts.ts'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { shown, iconed, worded, uses, wires } from './button.works.tsx'
-
-
-export interface ButtonProps {
-  readonly label: MessageKey
-  readonly with?: Readonly<Record<string, unknown>>
-  readonly icon?: string
-  readonly shows?: string
-  readonly type?: string
-  readonly disabled?: boolean
-  readonly loading?: boolean
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly navigateTo?: string
-  readonly onPress?: () => void
-  readonly dispatch?: keyof Dispatching
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Button: Element<'Button', ButtonProps> = element(
-  'Button',
-  (props: ButtonProps, 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 }), })
-    const wired = wires(props, kept, surface)
-    return (
-      <button className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} {...(wired.on ?? {})}>
-        {!iconed(props, kept) ? null : <span className="e-button-symbol">{shown(props, surface, kept, wired).symbol}</span>}
-        {!worded(props, kept) ? null : <span>{shown(props, surface, kept, wired).wording}</span>}
-      </button>
-    )
-  },
-  'e-button',
-  {"buttonFill":"thread-button-fill","buttonNormal":"thread-button-normal","buttonGhost":"thread-button-ghost","buttonBorder":"thread-button-border","buttonDestructive":"thread-button-destructive","buttonDestructiveGhost":"thread-button-destructive-ghost","buttonCta":"thread-button-cta","buttonQuiet":"thread-button-quiet","buttonGlass":"thread-button-glass"},
-)

package/dist/ui/elements/button.works.tsx

@@ -1,52 +0,0 @@
-import type { ReactNode } from 'react'
-
-import { pressOf, usePress } from '../wrappers.tsx'
-import type { Surface } from '../door.ts'
-import { drawn } from './glyph.works.tsx'
-import type { ButtonProps } from './button.tsx'
-
-export function uses(props: ButtonProps): {
-  readonly holds?: readonly string[]
-  readonly animates?: boolean
-  readonly on?: Readonly<Record<string, unknown>>
-  readonly press: (() => void) | undefined
-} {
-  return {
-    holds: [
-      ...(props.disabled === true ? (['disabled'] as const) : []),
-      ...(props.loading === true ? (['loading'] as const) : []),
-    ],
-    press: usePress(pressOf(props), { element: 'Button', name: props.label }),
-  }
-}
-
-export function wires(
-  props: ButtonProps,
-  kept: { readonly press: (() => void) | undefined },
-  surface: Surface,
-): { readonly on: Readonly<Record<string, unknown>> } {
-  const inert = surface.marked('disabled') || surface.marked('loading')
-  return {
-    on: {
-      type: props.type ?? 'button',
-      disabled: inert,
-      ...(props.shows === 'icon' ? { 'aria-label': surface.text(props.label, props.with) } : {}),
-      onClick: inert ? undefined : kept.press,
-    },
-  }
-}
-
-export function iconed(props: ButtonProps, _kept?: unknown): boolean {
-  return props.icon !== undefined
-}
-
-export function worded(props: ButtonProps, _kept?: unknown): boolean {
-  return props.shows !== 'icon'
-}
-
-export function shown(props: ButtonProps, surface: Surface, _kept: unknown, _wired?: unknown): Readonly<Record<string, ReactNode>> {
-  return {
-    symbol: props.icon === undefined ? null : drawn(props.icon, { 'aria-hidden': true }),
-    wording: props.shows === 'icon' ? null : surface.text(props.label, props.with),
-  }
-}

package/dist/ui/elements/column.tsx

@@ -1,29 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-
-
-export interface ColumnProps {
-  readonly children: ReactNode
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Column: Element<'Column', ColumnProps> = element(
-  'Column',
-  (props: ColumnProps, className) => {
-    const surface = useSurface({ className,
-    invokes: { ...(props.dispatch === undefined ? {} : { dispatch: props.dispatch }), ...(props.input === undefined ? {} : { input: props.input }), ...(props.invokeOn === undefined ? {} : { on: props.invokeOn }) }, })
-    return (
-      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y}>
-        {props.children}
-      </div>
-    )
-  },
-  'e-column',
-  {},
-)

package/dist/ui/elements/consent.tsx

@@ -1,71 +0,0 @@
-'use client'
-
-import type { MessageKey } from '../content.tsx'
-import { roleClass } from '../fonts.ts'
-import type { ConsentDecision } from '../consent.ts'
-import { Box } from './box.tsx'
-import { Column } from './column.tsx'
-import { Text } from './text.tsx'
-import { Toggle } from './toggle.tsx'
-import { Button } from './button.tsx'
-
-import type { Dispatching } from '../checked.ts'
-import { type Element, element, useSurface } from '../wrappers.tsx'
-import { Each } from '../elements/each.tsx'
-import { title, policy, hasPolicy, categories, label, describe, chooser, optional, fixed, required, withdraw, withdrawable, decline, accept, acceptAll, uses } from './consent.works.tsx'
-
-
-export interface ConsentProps {
-  readonly decision?: ConsentDecision
-  readonly onDecide: (said: ConsentDecision) => void
-  readonly policyKey?: MessageKey
-  readonly preselected: readonly string[]
-  readonly dispatch?: keyof Dispatching
-  readonly input?: Readonly<Record<string, unknown>>
-  readonly invokeOn?: 'press' | 'shown'
-}
-
-export const Consent: Element<'Consent', ConsentProps> = element(
-  'Consent',
-  (props: ConsentProps, className) => {
-    const kept = uses(props)
-    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 (
-      <>
-        <Box.card>
-          <Column>
-            <Text {...title(props, kept)}></Text>
-            {!hasPolicy(props, kept) ? null : <Text {...policy(props, kept)}></Text>}
-            <Column>
-              <Each rows={categories(props, kept)} by={'id'}>
-                {(each0, at) => (
-                  <Box>
-                    <Column>
-                      <Text {...label(props, kept, each0, at)}></Text>
-                      <Text {...describe(props, kept, each0, at)}></Text>
-                    </Column>
-                    {!optional(props, kept, each0) ? null : <Toggle.input {...chooser(props, kept, each0, at)}></Toggle.input>}
-                    {!required(props, kept, each0) ? null : <Text {...fixed(props, kept, each0, at)}></Text>}
-                  </Box>
-                )}
-              </Each>
-            </Column>
-            <Box>
-              {!withdrawable(props, kept) ? null : <Button.buttonQuiet {...withdraw(props, kept)}></Button.buttonQuiet>}
-              <Button.buttonBorder {...decline(props, kept)}></Button.buttonBorder>
-              <Button.buttonBorder {...accept(props, kept)}></Button.buttonBorder>
-              <Button.buttonFill {...acceptAll(props, kept)}></Button.buttonFill>
-            </Box>
-          </Column>
-        </Box.card>
-      </>
-    )
-  },
-  'e-consent',
-  {},
-)