@a4ui/core 0.33.0 → 0.35.0

package/src/ui/SignaturePad.tsx

@@ -0,0 +1,221 @@
+// Canvas-based signature capture. DPR-aware sizing (crisp strokes on retina),
+// pointer events (mouse + touch + pen in one listener set), and a stroke stack
+// so Undo can redraw from scratch instead of trying to "erase" a curve.
+import { Eraser, Undo2 } from 'lucide-solid'
+import { createSignal, onCleanup, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+interface Point {
+  x: number
+  y: number
+}
+
+type Stroke = Point[]
+
+export interface SignaturePadProps {
+  /** Called with a PNG data URL after each completed stroke, or `null` once the pad is empty (cleared/undone to nothing). */
+  onChange?: (dataUrl: string | null) => void
+  /** Canvas height in CSS pixels. @default 200 */
+  height?: number
+  class?: string
+}
+
+/**
+ * A signature capture pad: draw with mouse, pen, or touch on a DPR-aware
+ * `<canvas>`, with Clear and Undo controls. Strokes are kept as point lists so
+ * Undo can fully redraw the remaining ones rather than trying to erase pixels.
+ *
+ * @example
+ * ```tsx
+ * <SignaturePad height={220} onChange={(dataUrl) => setSignature(dataUrl)} />
+ * ```
+ */
+export function SignaturePad(props: SignaturePadProps): JSX.Element {
+  let canvas!: HTMLCanvasElement
+  let container!: HTMLDivElement
+  let ctx: CanvasRenderingContext2D | null = null
+
+  const strokes: Stroke[] = []
+  let current: Stroke | null = null
+  let drawing = false
+
+  const [hasInk, setHasInk] = createSignal(false)
+
+  const height = () => props.height ?? 200
+
+  const resize = (): void => {
+    if (!canvas || !container) return
+    const dpr = window.devicePixelRatio || 1
+    const width = container.clientWidth
+    const h = height()
+    canvas.width = Math.max(1, Math.round(width * dpr))
+    canvas.height = Math.max(1, Math.round(h * dpr))
+    canvas.style.width = `${width}px`
+    canvas.style.height = `${h}px`
+    ctx = canvas.getContext('2d')
+    if (ctx) ctx.scale(dpr, dpr)
+    redraw()
+  }
+
+  const strokeColor = (): string => {
+    // Resolved at draw time so it stays correct across theme/light-dark toggles.
+    const root = getComputedStyle(document.documentElement)
+    const hsl = root.getPropertyValue('--foreground').trim()
+    return hsl ? `hsl(${hsl})` : '#000'
+  }
+
+  const drawStroke = (context: CanvasRenderingContext2D, stroke: Stroke): void => {
+    if (stroke.length < 2) {
+      // A single tap/click: draw a dot so it's not silently lost.
+      if (stroke.length === 1) {
+        context.beginPath()
+        context.arc(stroke[0].x, stroke[0].y, 1.25, 0, Math.PI * 2)
+        context.fillStyle = strokeColor()
+        context.fill()
+      }
+      return
+    }
+    context.lineJoin = 'round'
+    context.lineCap = 'round'
+    context.lineWidth = 2.25
+    context.strokeStyle = strokeColor()
+    context.beginPath()
+    context.moveTo(stroke[0].x, stroke[0].y)
+    for (let i = 1; i < stroke.length; i++) context.lineTo(stroke[i].x, stroke[i].y)
+    context.stroke()
+  }
+
+  const clearCanvas = (context: CanvasRenderingContext2D): void => {
+    const dpr = window.devicePixelRatio || 1
+    context.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr)
+  }
+
+  const redraw = (): void => {
+    if (!ctx) return
+    clearCanvas(ctx)
+    for (const stroke of strokes) drawStroke(ctx, stroke)
+    setHasInk(strokes.length > 0)
+  }
+
+  const emitChange = (): void => {
+    props.onChange?.(strokes.length > 0 ? canvas.toDataURL('image/png') : null)
+  }
+
+  const pointFromEvent = (event: PointerEvent): Point => {
+    const rect = canvas.getBoundingClientRect()
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top }
+  }
+
+  const onPointerDown = (event: PointerEvent): void => {
+    if (!ctx) return
+    event.preventDefault()
+    drawing = true
+    current = [pointFromEvent(event)]
+    canvas.setPointerCapture(event.pointerId)
+  }
+
+  const onPointerMove = (event: PointerEvent): void => {
+    if (!drawing || !current || !ctx) return
+    const point = pointFromEvent(event)
+    const prev = current[current.length - 1]
+    current.push(point)
+    ctx.lineJoin = 'round'
+    ctx.lineCap = 'round'
+    ctx.lineWidth = 2.25
+    ctx.strokeStyle = strokeColor()
+    ctx.beginPath()
+    ctx.moveTo(prev.x, prev.y)
+    ctx.lineTo(point.x, point.y)
+    ctx.stroke()
+  }
+
+  const endStroke = (): void => {
+    if (!drawing) return
+    drawing = false
+    if (current && current.length > 0) {
+      strokes.push(current)
+      setHasInk(true)
+      emitChange()
+    }
+    current = null
+  }
+
+  const onPointerUp = (event: PointerEvent): void => {
+    if (canvas.hasPointerCapture(event.pointerId)) canvas.releasePointerCapture(event.pointerId)
+    endStroke()
+  }
+
+  const handleClear = (): void => {
+    strokes.length = 0
+    current = null
+    drawing = false
+    redraw()
+    emitChange()
+  }
+
+  const handleUndo = (): void => {
+    strokes.pop()
+    redraw()
+    emitChange()
+  }
+
+  onMount(() => {
+    resize()
+    window.addEventListener('resize', resize)
+    canvas.addEventListener('pointerdown', onPointerDown)
+    canvas.addEventListener('pointermove', onPointerMove)
+    canvas.addEventListener('pointerup', onPointerUp)
+    canvas.addEventListener('pointercancel', onPointerUp)
+  })
+
+  onCleanup(() => {
+    window.removeEventListener('resize', resize)
+    canvas.removeEventListener('pointerdown', onPointerDown)
+    canvas.removeEventListener('pointermove', onPointerMove)
+    canvas.removeEventListener('pointerup', onPointerUp)
+    canvas.removeEventListener('pointercancel', onPointerUp)
+  })
+
+  return (
+    <div class={cn('flex flex-col gap-2', props.class)} role="group" aria-label="Signature pad">
+      <div
+        ref={container}
+        class="relative w-full touch-none overflow-hidden rounded-md border border-input bg-background"
+        style={{ height: `${height()}px` }}
+      >
+        <canvas
+          ref={canvas}
+          class="block h-full w-full cursor-crosshair touch-none"
+          aria-label="Draw your signature here"
+        />
+        {!hasInk() && (
+          <div class="pointer-events-none absolute inset-x-4 bottom-6 flex flex-col items-center gap-1">
+            <span class="w-full border-b border-dashed border-border" />
+            <span class="text-xs text-muted-foreground">Sign here</span>
+          </div>
+        )}
+      </div>
+      <div class="flex items-center justify-end gap-2">
+        <button
+          type="button"
+          onClick={handleUndo}
+          disabled={strokes.length === 0}
+          class="inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:opacity-50"
+        >
+          <Undo2 class="h-3.5 w-3.5" />
+          Undo
+        </button>
+        <button
+          type="button"
+          onClick={handleClear}
+          disabled={!hasInk()}
+          class="inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:opacity-50"
+        >
+          <Eraser class="h-3.5 w-3.5" />
+          Clear
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/ui/SpreadsheetGrid.tsx

@@ -0,0 +1,304 @@
+// Excel-like editable grid: header row + row-number gutter, keyboard navigation,
+// rectangular range selection, and TSV copy/paste. Fixed rows×cols for v1 (no
+// add-row); for huge grids, virtualize with @tanstack/solid-virtual instead.
+import type { JSX } from 'solid-js'
+import { createMemo, createSignal, For } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface SpreadsheetGridProps {
+  /** Number of rows in the grid (fixed for the component's lifetime). */
+  rows: number
+  /** Number of columns in the grid (fixed for the component's lifetime). */
+  cols: number
+  /** Initial cell values, seeded once on mount (missing cells default to `''`). */
+  data?: string[][]
+  /** Called with the full `rows×cols` matrix after any edit or paste. */
+  onChange?: (data: string[][]) => void
+  /** Column header labels; defaults to `A, B, C, …, Z, AA, AB, …`. */
+  columnHeaders?: string[]
+  class?: string
+}
+
+interface CellPos {
+  r: number
+  c: number
+}
+
+/** Converts a zero-based column index to a spreadsheet-style letter label. */
+function colLabel(index: number): string {
+  let n = index
+  let label = ''
+  while (n >= 0) {
+    label = String.fromCharCode(65 + (n % 26)) + label
+    n = Math.floor(n / 26) - 1
+  }
+  return label
+}
+
+function seedData(props: SpreadsheetGridProps): string[][] {
+  const grid: string[][] = []
+  for (let r = 0; r < props.rows; r++) {
+    const row: string[] = []
+    for (let c = 0; c < props.cols; c++) row.push(props.data?.[r]?.[c] ?? '')
+    grid.push(row)
+  }
+  return grid
+}
+
+function cloneData(data: string[][]): string[][] {
+  return data.map((row) => [...row])
+}
+
+/**
+ * Excel-like editable grid. Arrow keys move the active cell; typing or Enter
+ * opens an inline editor that commits on Enter/blur and cancels on Escape.
+ * Shift+click / Shift+arrow extend a rectangular selection (Ctrl/Cmd+C copies
+ * it as TSV, Ctrl/Cmd+V pastes TSV starting at the active cell).
+ *
+ * @example
+ * ```tsx
+ * const [sheet, setSheet] = createSignal<string[][]>([])
+ * <SpreadsheetGrid rows={10} cols={6} onChange={setSheet} />
+ * ```
+ */
+export function SpreadsheetGrid(props: SpreadsheetGridProps): JSX.Element {
+  const [data, setData] = createSignal<string[][]>(seedData(props))
+  const [active, setActive] = createSignal<CellPos>({ r: 0, c: 0 })
+  const [anchor, setAnchor] = createSignal<CellPos>({ r: 0, c: 0 })
+  const [editing, setEditing] = createSignal<CellPos | null>(null)
+  const [editValue, setEditValue] = createSignal('')
+  let containerRef: HTMLDivElement | undefined
+
+  const headers = createMemo(
+    () => props.columnHeaders ?? Array.from({ length: props.cols }, (_, i) => colLabel(i)),
+  )
+  const rowIndices = createMemo(() => Array.from({ length: props.rows }, (_, i) => i))
+  const colIndices = createMemo(() => Array.from({ length: props.cols }, (_, i) => i))
+
+  const bounds = createMemo(() => {
+    const a = anchor()
+    const b = active()
+    return {
+      minR: Math.min(a.r, b.r),
+      maxR: Math.max(a.r, b.r),
+      minC: Math.min(a.c, b.c),
+      maxC: Math.max(a.c, b.c),
+    }
+  })
+
+  function inSelection(r: number, c: number): boolean {
+    const b = bounds()
+    return r >= b.minR && r <= b.maxR && c >= b.minC && c <= b.maxC
+  }
+
+  function isActive(r: number, c: number): boolean {
+    const a = active()
+    return a.r === r && a.c === c
+  }
+
+  function isAnchor(r: number, c: number): boolean {
+    const a = anchor()
+    return a.r === r && a.c === c
+  }
+
+  function isEditing(r: number, c: number): boolean {
+    const e = editing()
+    return e !== null && e.r === r && e.c === c
+  }
+
+  function commitCell(r: number, c: number, value: string) {
+    const next = cloneData(data())
+    next[r][c] = value
+    setData(next)
+    props.onChange?.(next)
+  }
+
+  function startEdit(r: number, c: number, initial?: string) {
+    setEditing({ r, c })
+    setEditValue(initial ?? data()[r][c])
+  }
+
+  function commitEdit() {
+    const e = editing()
+    if (!e) return
+    commitCell(e.r, e.c, editValue())
+    setEditing(null)
+  }
+
+  function cancelEdit() {
+    setEditing(null)
+  }
+
+  function moveActive(dr: number, dc: number, extend: boolean) {
+    const cur = active()
+    const r = Math.min(Math.max(cur.r + dr, 0), props.rows - 1)
+    const c = Math.min(Math.max(cur.c + dc, 0), props.cols - 1)
+    setActive({ r, c })
+    if (!extend) setAnchor({ r, c })
+  }
+
+  function selectCell(r: number, c: number, extend: boolean) {
+    setActive({ r, c })
+    if (!extend) setAnchor({ r, c })
+  }
+
+  function copySelection() {
+    const b = bounds()
+    const tsv = data()
+      .slice(b.minR, b.maxR + 1)
+      .map((row) => row.slice(b.minC, b.maxC + 1).join('\t'))
+      .join('\n')
+    void navigator.clipboard.writeText(tsv)
+  }
+
+  function pasteAtActive() {
+    void navigator.clipboard.readText().then((text) => {
+      const lines = text.replace(/\r/g, '').split('\n')
+      while (lines.length > 1 && lines[lines.length - 1] === '') lines.pop()
+      const grid = lines.map((line) => line.split('\t'))
+      const start = active()
+      const next = cloneData(data())
+      grid.forEach((line, ri) => {
+        line.forEach((value, ci) => {
+          const r = start.r + ri
+          const c = start.c + ci
+          if (r < props.rows && c < props.cols) next[r][c] = value
+        })
+      })
+      setData(next)
+      props.onChange?.(next)
+    })
+  }
+
+  function handleKeyDown(ev: KeyboardEvent) {
+    if (editing()) {
+      if (ev.key === 'Enter') {
+        ev.preventDefault()
+        commitEdit()
+        moveActive(1, 0, false)
+        containerRef?.focus()
+      } else if (ev.key === 'Escape') {
+        ev.preventDefault()
+        cancelEdit()
+        containerRef?.focus()
+      }
+      return
+    }
+
+    const mod = ev.ctrlKey || ev.metaKey
+    if (mod && ev.key.toLowerCase() === 'c') {
+      ev.preventDefault()
+      copySelection()
+      return
+    }
+    if (mod && ev.key.toLowerCase() === 'v') {
+      ev.preventDefault()
+      pasteAtActive()
+      return
+    }
+
+    switch (ev.key) {
+      case 'ArrowUp':
+        ev.preventDefault()
+        moveActive(-1, 0, ev.shiftKey)
+        break
+      case 'ArrowDown':
+        ev.preventDefault()
+        moveActive(1, 0, ev.shiftKey)
+        break
+      case 'ArrowLeft':
+        ev.preventDefault()
+        moveActive(0, -1, ev.shiftKey)
+        break
+      case 'ArrowRight':
+        ev.preventDefault()
+        moveActive(0, 1, ev.shiftKey)
+        break
+      case 'Tab':
+        ev.preventDefault()
+        moveActive(0, ev.shiftKey ? -1 : 1, false)
+        break
+      case 'Enter':
+        ev.preventDefault()
+        startEdit(active().r, active().c)
+        break
+      default:
+        if (ev.key.length === 1 && !mod && !ev.altKey) {
+          startEdit(active().r, active().c, ev.key)
+        }
+    }
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      tabIndex={0}
+      role="grid"
+      aria-rowcount={props.rows}
+      aria-colcount={props.cols}
+      class={cn(
+        'inline-block select-none overflow-auto rounded-md border border-border bg-card text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary',
+        props.class,
+      )}
+      onKeyDown={handleKeyDown}
+    >
+      <div class="grid" style={{ 'grid-template-columns': `48px repeat(${props.cols}, minmax(80px, 1fr))` }}>
+        <div class="border-b border-r border-border bg-muted" />
+        <For each={headers()}>
+          {(h) => (
+            <div
+              role="columnheader"
+              class="border-b border-r border-border bg-muted px-2 py-1 text-center text-xs font-semibold text-muted-foreground"
+            >
+              {h}
+            </div>
+          )}
+        </For>
+        <For each={rowIndices()}>
+          {(r) => (
+            <>
+              <div
+                role="rowheader"
+                class="border-b border-r border-border bg-muted px-2 py-1 text-center text-xs text-muted-foreground"
+              >
+                {r + 1}
+              </div>
+              <For each={colIndices()}>
+                {(c) => (
+                  <div
+                    role="gridcell"
+                    aria-selected={isActive(r, c)}
+                    class={cn(
+                      'relative h-8 border-b border-r border-border px-2 py-1 text-sm cursor-cell',
+                      inSelection(r, c) && 'bg-primary/10',
+                      isActive(r, c) && 'ring-2 ring-inset ring-primary',
+                      isAnchor(r, c) && !isActive(r, c) && 'border-primary',
+                    )}
+                    onClick={(ev) => selectCell(r, c, ev.shiftKey)}
+                    onDblClick={() => startEdit(r, c)}
+                  >
+                    {isEditing(r, c) ? (
+                      <input
+                        ref={(el) => {
+                          el.focus()
+                          el.select()
+                        }}
+                        class="absolute inset-0 h-full w-full border-none bg-transparent px-2 py-1 text-sm text-foreground outline-none"
+                        value={editValue()}
+                        onInput={(ev) => setEditValue(ev.currentTarget.value)}
+                        onBlur={() => commitEdit()}
+                      />
+                    ) : (
+                      <span class="block truncate">{data()[r][c]}</span>
+                    )}
+                  </div>
+                )}
+              </For>
+            </>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

package/src/ui/TreeTable.tsx

@@ -0,0 +1,172 @@
+// Hierarchical data table: rows can nest via `children`, expand/collapse lives
+// in the first column (chevron + depth indentation), all other columns render
+// like a plain DataGrid column. Built on the Table primitives + Tree's toggle idiom.
+import { ChevronRight } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createSignal, For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow } from './Table'
+
+/** A column definition for {@link TreeTable}. */
+export interface TreeTableColumn<T> {
+  /** Row data property this column reads when `cell` is omitted. */
+  key: string
+  /** Column heading content. */
+  header: JSX.Element
+  /** Custom cell renderer; falls back to `String(row[key])` when omitted. */
+  cell?: (row: T) => JSX.Element
+  /** Right-align the column (numbers, totals). */
+  align?: 'left' | 'right'
+}
+
+/** A single node in a {@link TreeTable}; nodes may nest via `children`. */
+export interface TreeTableRow<T> {
+  /** Unique identifier; used to track expanded state. */
+  id: string
+  /** Row payload passed to each column's `cell` renderer. */
+  data: T
+  /** Child rows revealed when this row is expanded. */
+  children?: TreeTableRow<T>[]
+}
+
+export interface TreeTableProps<T> {
+  columns: TreeTableColumn<T>[]
+  rows: TreeTableRow<T>[]
+  /** Expand every row with children on first render. Defaults to false. */
+  defaultExpanded?: boolean
+  class?: string
+}
+
+function collectIds<T>(rows: TreeTableRow<T>[], out: Set<string>): void {
+  for (const row of rows) {
+    if (row.children?.length) {
+      out.add(row.id)
+      collectIds(row.children, out)
+    }
+  }
+}
+
+/**
+ * Hierarchical table: rows may carry `children`, revealed by clicking the
+ * chevron in the first column. Depth is shown via indentation; expanded state
+ * is tracked internally, seeded fully expanded when `defaultExpanded` is set.
+ *
+ * @example
+ * ```tsx
+ * <TreeTable
+ *   defaultExpanded
+ *   columns={[
+ *     { key: 'name', header: 'Name' },
+ *     { key: 'size', header: 'Size', align: 'right', cell: (row) => `${row.size} KB` },
+ *   ]}
+ *   rows={[
+ *     {
+ *       id: 'src',
+ *       data: { name: 'src', size: 0 },
+ *       children: [{ id: 'index', data: { name: 'index.ts', size: 2 } }],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export function TreeTable<T>(props: TreeTableProps<T>): JSX.Element {
+  const [expanded, setExpanded] = createSignal<Set<string>>(
+    props.defaultExpanded ? seedExpanded(props.rows) : new Set<string>(),
+  )
+
+  function seedExpanded(rows: TreeTableRow<T>[]): Set<string> {
+    const ids = new Set<string>()
+    collectIds(rows, ids)
+    return ids
+  }
+
+  const toggle = (id: string) =>
+    setExpanded((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+
+  const Rows = (rowsProps: { rows: TreeTableRow<T>[]; depth: number }): JSX.Element => (
+    <For each={rowsProps.rows}>
+      {(row) => {
+        const hasChildren = () => (row.children?.length ?? 0) > 0
+        const isExpanded = () => expanded().has(row.id)
+
+        return (
+          <>
+            <TableRow>
+              <For each={props.columns}>
+                {(col, colIndex) => (
+                  <TableCell class={cn(col.align === 'right' && 'text-right tabular-nums')}>
+                    <Show
+                      when={colIndex() === 0}
+                      fallback={
+                        col.cell
+                          ? col.cell(row.data)
+                          : String((row.data as Record<string, unknown>)[col.key] ?? '')
+                      }
+                    >
+                      <div
+                        class="flex items-center gap-1.5"
+                        style={{ 'padding-left': `${rowsProps.depth * 1}rem` }}
+                      >
+                        <Show
+                          when={hasChildren()}
+                          fallback={<span class="h-3.5 w-3.5 shrink-0" aria-hidden="true" />}
+                        >
+                          <button
+                            type="button"
+                            class="flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
+                            aria-expanded={isExpanded()}
+                            aria-label={isExpanded() ? 'Collapse row' : 'Expand row'}
+                            onClick={() => toggle(row.id)}
+                          >
+                            <ChevronRight
+                              class={cn(
+                                'h-3.5 w-3.5 transition-transform duration-200',
+                                isExpanded() && 'rotate-90',
+                              )}
+                              aria-hidden="true"
+                            />
+                          </button>
+                        </Show>
+                        <span>
+                          {col.cell
+                            ? col.cell(row.data)
+                            : String((row.data as Record<string, unknown>)[col.key] ?? '')}
+                        </span>
+                      </div>
+                    </Show>
+                  </TableCell>
+                )}
+              </For>
+            </TableRow>
+            <Show when={hasChildren() && isExpanded()}>
+              <Rows rows={row.children ?? []} depth={rowsProps.depth + 1} />
+            </Show>
+          </>
+        )
+      }}
+    </For>
+  )
+
+  return (
+    <Table class={props.class}>
+      <TableHead>
+        <TableRow>
+          <For each={props.columns}>
+            {(col) => (
+              <TableHeadCell class={cn(col.align === 'right' && 'text-right')}>{col.header}</TableHeadCell>
+            )}
+          </For>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <Rows rows={props.rows} depth={0} />
+      </TableBody>
+    </Table>
+  )
+}