@prestack/thread-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,37 @@
+import { formatValue } from '../validators.ts'
+import { seriesColour } from '../series.ts'
+import { num, str, useRamp, type Row } from '../charts.tsx'
+import type { FunnelProps } from './funnel.tsx'
+
+export function uses(props: FunnelProps): {
+  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: FunnelProps,
+  kept: { readonly ramp: readonly string[] },
+  row: Row,
+  at: number,
+): Readonly<Record<string, string | number>> {
+  const top = num(props.rows[0] as Row, props.value) || 1
+  const before = at === 0 ? null : num(props.rows[at - 1] as Row, props.value)
+  const drop = before === null || before === 0 ? null : 1 - num(row, props.value) / before
+  return {
+    series: seriesColour(kept.ramp, at),
+    fraction: `${((num(row, props.value) / top) * 100).toFixed(1)}%`,
+    ...(drop === null ? {} : { drop: `${(drop * 100).toFixed(1)}%` }),
+  }
+}
+
+export function shown(props: FunnelProps, 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/gauge.js

@@ -12,4 +12,4 @@ export const Gauge = element('Gauge', (props, className) => {
         ],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsxs("svg", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), role: "img", "aria-label": surface.text(props.labelKey), children: [_jsx("path", { ...track(props, kept) }), _jsx("path", { ...needle(props, kept) })] }));
-}, 'e-gauge');
+}, 'e-gauge', { "statTile": "thread-stat-tile" });

package/dist/ui/elements/gauge.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { track, needle, uses } from './gauge.works.ts'
+
+
+export interface GaugeProps {
+  readonly value?: number
+  readonly min?: number
+  readonly max?: number
+  readonly labelKey: MessageKey
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Gauge: Element<'Gauge', GaugeProps> = element(
+  'Gauge',
+  (props: GaugeProps, 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 (
+      <svg className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} role="img" aria-label={surface.text(props.labelKey)}>
+        <path {...track(props, kept)}></path>
+        <path {...needle(props, kept)}></path>
+      </svg>
+    )
+  },
+  'e-gauge',
+  {"statTile":"thread-stat-tile"},
+)

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

@@ -0,0 +1,42 @@
+import { useRamp } from '../charts.tsx'
+import type { GaugeProps } from './gauge.tsx'
+
+const LEFT = 10
+const RIGHT = 90
+const MIDDLE = 50
+const RADIUS = 40
+
+export function uses(_props: GaugeProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+  readonly ramp: readonly string[]
+} {
+  return { on: { viewBox: `0 0 100 56` }, ramp: useRamp(1) }
+}
+
+export function track(_props: GaugeProps, _kept: unknown): Readonly<Record<string, string | number>> {
+  return {
+    d: `M ${String(LEFT)} ${String(MIDDLE)} A ${String(RADIUS)} ${String(RADIUS)} 0 0 1 ${String(RIGHT)} ${String(MIDDLE)}`,
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeOpacity: 0.15,
+    strokeWidth: 8,
+  }
+}
+
+export function needle(props: GaugeProps, kept: { readonly ramp: readonly string[] }): Readonly<Record<string, string | number>> {
+  const least = props.min ?? 0
+  const most = props.max ?? 0
+  const span = most - least
+  const part = span <= 0 ? 0 : Math.min(1, Math.max(0, ((props.value ?? 0) - least) / span))
+  const angle = Math.PI * (1 - part)
+  return {
+    d:
+      `M ${String(LEFT)} ${String(MIDDLE)} A ${String(RADIUS)} ${String(RADIUS)} 0 0 1 ` +
+      `${(MIDDLE + RADIUS * Math.cos(angle)).toFixed(2)} ${(MIDDLE - RADIUS * Math.sin(angle)).toFixed(2)}`,
+    fill: 'none',
+    stroke: kept.ramp[0] ?? 'currentColor',
+    strokeWidth: 8,
+  }
+}

package/dist/ui/elements/glyph.js

@@ -6,4 +6,4 @@ export const Glyph = element('Glyph', (props, 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 (shows(props, surface));
-}, 'e-glyph');
+}, 'e-glyph', { "glyphPlain": "thread-glyph-plain" });

package/dist/ui/elements/glyph.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import type { MessageKey } from '../content.tsx'
+import { roleClass } from '../fonts.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { shows } from './glyph.works.tsx'
+
+
+export interface GlyphProps {
+  readonly name: string
+  readonly labelKey?: MessageKey
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Glyph: Element<'Glyph', GlyphProps> = element(
+  'Glyph',
+  (props: GlyphProps, 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 (
+      shows(props, surface)
+    )
+  },
+  'e-glyph',
+  {"glyphPlain":"thread-glyph-plain"},
+)

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

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react'
+
+import type { Surface } from '../door.ts'
+import { drawnFor, iconSize, installedSet, strokeFor } from '../icons.ts'
+import type { GlyphProps } from './glyph.tsx'
+
+type Drawn = (props: {
+  readonly size?: number
+  readonly strokeWidth?: number
+  readonly className?: string
+  readonly 'aria-hidden'?: boolean
+  readonly 'aria-label'?: string
+  readonly role?: string
+}) => ReactNode
+
+export function drawn(name: string, semantics: Readonly<Record<string, unknown>>, className?: string): ReactNode {
+  const Symbol = drawnFor(name) as Drawn
+  const set = installedSet()
+  const stroke = set === undefined ? undefined : strokeFor(set)
+
+  return (
+    <Symbol
+      size={iconSize()}
+      {...(className === undefined ? {} : { className })}
+      {...(stroke === undefined ? {} : { strokeWidth: stroke })}
+      {...semantics}
+    />
+  )
+}
+
+export function shows(props: GlyphProps, surface: Surface): ReactNode {
+  return drawn(
+    props.name,
+    {
+      ...surface.marks,
+      ...(props.labelKey === undefined
+        ? ({ 'aria-hidden': true } as const)
+        : ({ role: 'img', 'aria-label': surface.text(props.labelKey) } as const)),
+    },
+    surface.className,
+  )
+}

package/dist/ui/elements/grid.js

@@ -5,4 +5,4 @@ export const Grid = element('Grid', (props, 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 (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, children: props.children }));
-}, 'e-grid');
+}, 'e-grid', {});

package/dist/ui/elements/grid.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+
+
+export interface GridProps {
+  readonly children: ReactNode
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Grid: Element<'Grid', GridProps> = element(
+  'Grid',
+  (props: GridProps, 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-grid',
+  {},
+)

package/dist/ui/elements/heatmap.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { roleClass } from "../fonts.js";
 import { measured as marking } from "../charts.js";
 import { element, useSurface } from "../wrappers.js";
-import { Each } from "./each.js";
+import { Each } from "../elements/each.js";
 import { sized, uses } from "./heatmap.works.js";
 export const Heatmap = element('Heatmap', (props, className) => {
     const kept = uses(props);
@@ -14,4 +14,4 @@ export const Heatmap = element('Heatmap', (props, className) => {
         ],
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     return (_jsx("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), role: "img", ...(props.titleKey === undefined ? {} : { 'aria-label': surface.text(props.titleKey) }), children: _jsx(Each, { rows: props.rows, by: props.by, children: (each0, at) => (_jsx("span", { style: marking(sized(props, kept, each0, at)) })) }) }));
-}, 'e-heatmap');
+}, 'e-heatmap', { "card": "thread-card" });

package/dist/ui/elements/heatmap.tsx

@@ -0,0 +1,47 @@
+'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 Element, element, useSurface } from '../wrappers.tsx'
+import { Each } from '../elements/each.tsx'
+import { sized, uses } from './heatmap.works.ts'
+
+
+export interface HeatmapProps {
+  readonly rows: readonly Row[]
+  readonly by: string
+  readonly x: string
+  readonly y: string
+  readonly value?: string
+  readonly titleKey?: MessageKey
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const Heatmap: Element<'Heatmap', HeatmapProps> = element(
+  'Heatmap',
+  (props: HeatmapProps, 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>
+          )}
+        </Each>
+      </div>
+    )
+  },
+  'e-heatmap',
+  {"card":"thread-card"},
+)

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

@@ -0,0 +1,24 @@
+import { num, useRamp, type Row } from '../charts.tsx'
+import type { HeatmapProps } from './heatmap.tsx'
+
+export function uses(props: HeatmapProps): {
+  readonly holds?: readonly string[]
+  readonly animates?: boolean
+  readonly on?: Readonly<Record<string, unknown>>
+  readonly ramp: readonly string[]
+} {
+  const ramp = useRamp(1)
+  return { ...(props.rows.length === 0 ? { holds: ['empty'] as const } : {}), ramp }
+}
+
+export function sized(
+  props: HeatmapProps,
+  kept: { readonly ramp: readonly string[] },
+  row: Row,
+  _at: number,
+): Readonly<Record<string, string | number>> {
+  const readings = props.rows.map((one: Row) => (props.value === undefined ? 1 : num(one, props.value)))
+  const most = Math.max(...readings, 0) || 1
+  const here = props.value === undefined ? 1 : num(row, props.value)
+  return { series: kept.ramp[0] ?? '', share: Math.max(0.08, here / most) }
+}

package/dist/ui/elements/hit-box.js

@@ -12,4 +12,4 @@ export const HitBox = element('HitBox', (props, className) => {
         ...(kept.animates === undefined ? {} : { animates: kept.animates }), });
     const wired = wires(props, kept, surface);
     return (_jsxs("div", { className: surface.className, ...surface.marks, ...surface.invokes, ...surface.a11y, ...(kept.on ?? {}), ...(wired.on ?? {}), children: [props.children, _jsx("div", { className: "e-hit-box-carried", children: shown(props, surface, kept, wired).carried })] }));
-}, 'e-hit-box');
+}, 'e-hit-box', { "tapTarget": "thread-tap-target" });

package/dist/ui/elements/hit-box.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import type { Subject } from '../drag.ts'
+
+import { type Element, element, useSurface } from '../wrappers.tsx'
+import { shown, uses, wires } from './hit-box.works.tsx'
+
+
+export interface HitBoxProps {
+  readonly children: ReactNode
+  readonly gesture: string
+  readonly tuning?: Readonly<Record<string, number>>
+  readonly axis?: string
+  readonly grabs?: Subject | readonly Subject[]
+  readonly accepts: readonly string[]
+  readonly collects?: Subject | readonly Subject[]
+  readonly dwell?: number
+  readonly moves?: boolean
+  readonly onDrop?: () => void
+  readonly dispatch?: string
+  readonly input?: Readonly<Record<string, unknown>>
+  readonly invokeOn?: 'press' | 'shown'
+}
+
+export const HitBox: Element<'HitBox', HitBoxProps> = element(
+  'HitBox',
+  (props: HitBoxProps, className) => {
+    const kept = uses(props)
+    const surface = useSurface({ 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 (
+      <div className={surface.className} {...surface.marks} {...surface.invokes} {...surface.a11y} {...(kept.on ?? {})} {...(wired.on ?? {})}>
+        {props.children}
+        <div className="e-hit-box-carried">{shown(props, surface, kept, wired).carried}</div>
+      </div>
+    )
+  },
+  'e-hit-box',
+  {"tapTarget":"thread-tap-target"},
+)