@a4ui/core 0.32.0 → 0.34.0

package/src/ui/DiffViewer.tsx

@@ -0,0 +1,166 @@
+// Read-only unified-diff / line-diff renderer. Reuses the CodeTabs monospace
+// idiom (rounded border, bg-card, font-mono text-sm) and the Alert/Badge tone
+// tokens: `emerald` for added (their `success` tone) and the `destructive`
+// CSS-var token for removed. No syntax highlighting.
+import { type JSX, Show } from 'solid-js'
+import { createMemo, For } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single rendered row of a diff. */
+export interface DiffLine {
+  type: 'add' | 'remove' | 'context'
+  content: string
+  /** Line number in the old file. Present for `'remove'` and `'context'` rows. */
+  oldNum?: number
+  /** Line number in the new file. Present for `'add'` and `'context'` rows. */
+  newNum?: number
+}
+
+export interface DiffViewerProps {
+  /** Unified diff text (as produced by `git diff`/`diff -u`). Ignored if `lines` is set. */
+  diff?: string
+  /** Pre-parsed diff rows. Takes precedence over `diff`. */
+  lines?: DiffLine[]
+  /** Header label. If omitted, inferred from the `+++`/`---` headers of `diff`, when present. */
+  filename?: string
+  class?: string
+}
+
+const MARKER: Record<DiffLine['type'], string> = { add: '+', remove: '-', context: ' ' }
+
+const ROW_BG: Record<DiffLine['type'], string> = {
+  add: 'bg-emerald-500/10',
+  remove: 'bg-destructive/10',
+  context: '',
+}
+
+const MARKER_TONE: Record<DiffLine['type'], string> = {
+  add: 'text-emerald-500',
+  remove: 'text-destructive',
+  context: 'text-muted-foreground',
+}
+
+const CONTENT_TONE: Record<DiffLine['type'], string> = {
+  add: 'text-foreground',
+  remove: 'text-foreground',
+  context: 'text-muted-foreground',
+}
+
+const HUNK_HEADER = /^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/
+
+/** Parses a unified diff string into rows plus an optional inferred filename. */
+function parseUnifiedDiff(diff: string): { lines: DiffLine[]; filename?: string } {
+  const rawLines = diff.split('\n')
+  // Drop the trailing empty element produced when `diff` ends with a newline.
+  if (rawLines.length > 0 && rawLines[rawLines.length - 1] === '') rawLines.pop()
+
+  const lines: DiffLine[] = []
+  let filename: string | undefined
+  let oldNum = 0
+  let newNum = 0
+
+  for (const raw of rawLines) {
+    if (raw.startsWith('+++ ') || raw.startsWith('--- ')) {
+      const path = raw.slice(4).trim()
+      if (raw.startsWith('+++ ') && path !== '/dev/null') filename = path.replace(/^[ab]\//, '')
+      continue
+    }
+    const hunkMatch = HUNK_HEADER.exec(raw)
+    if (hunkMatch) {
+      oldNum = Number(hunkMatch[1])
+      newNum = Number(hunkMatch[2])
+      continue
+    }
+    if (raw.startsWith('\\')) continue // ""
+
+    if (raw.startsWith('+')) {
+      lines.push({ type: 'add', content: raw.slice(1), newNum: newNum++ })
+    } else if (raw.startsWith('-')) {
+      lines.push({ type: 'remove', content: raw.slice(1), oldNum: oldNum++ })
+    } else {
+      lines.push({
+        type: 'context',
+        content: raw.startsWith(' ') ? raw.slice(1) : raw,
+        oldNum: oldNum++,
+        newNum: newNum++,
+      })
+    }
+  }
+
+  return { lines, filename }
+}
+
+/**
+ * Read-only diff block: renders added/removed/context lines with a line-number
+ * gutter and a +/-/space marker. Accepts either a raw unified-diff string
+ * (parsed internally) or pre-parsed {@link DiffLine} rows.
+ *
+ * @example
+ * ```tsx
+ * <DiffViewer
+ *   filename="src/lib/cn.ts"
+ *   diff={`@@ -1,3 +1,3 @@\n-export const cn = (a) => a\n+export const cn = (a, b) => a + b\n context line`}
+ * />
+ * ```
+ */
+export function DiffViewer(props: DiffViewerProps): JSX.Element {
+  const parsed = createMemo(() =>
+    props.lines ? { lines: props.lines, filename: undefined } : parseUnifiedDiff(props.diff ?? ''),
+  )
+
+  const rows = () => parsed().lines
+  const displayFilename = () => props.filename ?? parsed().filename
+
+  const counts = createMemo(() => {
+    let added = 0
+    let removed = 0
+    for (const line of rows()) {
+      if (line.type === 'add') added++
+      else if (line.type === 'remove') removed++
+    }
+    return { added, removed }
+  })
+
+  const ariaLabel = () => {
+    const { added, removed } = counts()
+    const name = displayFilename()
+    return `Diff${name ? ` for ${name}` : ''}: ${added} added, ${removed} removed`
+  }
+
+  return (
+    <div
+      role="figure"
+      aria-label={ariaLabel()}
+      class={cn('overflow-hidden rounded-lg border border-border bg-card', props.class)}
+    >
+      <Show when={displayFilename()}>
+        <div class="border-b border-border px-4 py-2 text-sm font-medium text-foreground">
+          {displayFilename()}
+        </div>
+      </Show>
+      <div class="overflow-x-auto">
+        <div class="min-w-max font-mono text-sm">
+          <For each={rows()}>
+            {(line) => (
+              <div class={cn('flex', ROW_BG[line.type])}>
+                <span class="w-12 shrink-0 select-none py-0.5 pr-2 text-right tabular-nums text-xs text-muted-foreground">
+                  {line.oldNum ?? ''}
+                </span>
+                <span class="w-12 shrink-0 select-none py-0.5 pr-2 text-right tabular-nums text-xs text-muted-foreground">
+                  {line.newNum ?? ''}
+                </span>
+                <span class={cn('w-5 shrink-0 select-none py-0.5 text-center', MARKER_TONE[line.type])}>
+                  {MARKER[line.type]}
+                </span>
+                <span class={cn('flex-1 whitespace-pre py-0.5 pr-4', CONTENT_TONE[line.type])}>
+                  {line.content}
+                </span>
+              </div>
+            )}
+          </For>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/ui/FollowingPointer.tsx

@@ -0,0 +1,112 @@
+// FollowingPointer — hides the native cursor over `children` and renders a
+// custom arrow + label chip that follows the mouse instead. Position is
+// written straight to the DOM node's `transform` on every pointermove (same
+// "skip the signal, touch the ref directly" idiom as Magnetic.tsx) rather
+// than through a reactive signal, so the follow is jank-free. No-op (native
+// cursor kept, nothing custom rendered) under motionReduced().
+import { onCleanup, onMount, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface FollowingPointerProps {
+  label?: JSX.Element
+  /** Tone of the custom cursor + label chip. @default 'primary' */
+  color?: 'primary' | 'accent'
+  children: JSX.Element
+  class?: string
+}
+
+/**
+ * Wraps `children` in a `relative` container that hides the native cursor
+ * and renders a custom pointer — a small arrow glyph plus a rounded label
+ * chip in the given tone — that follows the mouse within the container.
+ * Hidden until the pointer enters, hidden again on leave. Under
+ * {@link motionReduced}, the native cursor is kept and nothing custom is
+ * rendered. Listeners are cleaned up on unmount.
+ *
+ * @example
+ * ```tsx
+ * <FollowingPointer label="Alex" color="accent">
+ *   <div class="grid h-48 place-items-center rounded-lg border">Hover me</div>
+ * </FollowingPointer>
+ * ```
+ */
+export function FollowingPointer(props: FollowingPointerProps): JSX.Element {
+  let root: HTMLDivElement | undefined
+  let pointerEl: HTMLDivElement | undefined
+
+  onMount(() => {
+    if (motionReduced() || !root || !pointerEl) return
+
+    const handlePointerMove = (event: PointerEvent): void => {
+      const rect = root!.getBoundingClientRect()
+      const x = event.clientX - rect.left
+      const y = event.clientY - rect.top
+      pointerEl!.style.transform = `translate(${x}px, ${y}px)`
+    }
+
+    const handlePointerEnter = (event: PointerEvent): void => {
+      pointerEl!.style.opacity = '1'
+      handlePointerMove(event)
+    }
+
+    const handlePointerLeave = (): void => {
+      pointerEl!.style.opacity = '0'
+    }
+
+    root.addEventListener('pointermove', handlePointerMove)
+    root.addEventListener('pointerenter', handlePointerEnter)
+    root.addEventListener('pointerleave', handlePointerLeave)
+
+    onCleanup(() => {
+      root!.removeEventListener('pointermove', handlePointerMove)
+      root!.removeEventListener('pointerenter', handlePointerEnter)
+      root!.removeEventListener('pointerleave', handlePointerLeave)
+    })
+  })
+
+  const tone = (): 'primary' | 'accent' => (props.color === 'accent' ? 'accent' : 'primary')
+
+  return (
+    <div ref={root} class={cn('relative', !motionReduced() && 'cursor-none', props.class)}>
+      {props.children}
+      <Show when={!motionReduced()}>
+        <div
+          ref={pointerEl}
+          aria-hidden="true"
+          class="pointer-events-none absolute left-0 top-0 z-50 flex items-center opacity-0 transition-opacity duration-150 will-change-transform"
+        >
+          <svg
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            class={cn(
+              '-translate-x-0.5 -translate-y-0.5 drop-shadow',
+              tone() === 'accent' ? 'text-accent' : 'text-primary',
+            )}
+          >
+            <path
+              d="M2 2 L18 9 L10 11 L8 18 Z"
+              fill="currentColor"
+              stroke="hsl(var(--background))"
+              stroke-width="1"
+            />
+          </svg>
+          <Show when={props.label}>
+            <div
+              class={cn(
+                'ml-2 whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-medium shadow-lg',
+                tone() === 'accent'
+                  ? 'bg-accent text-accent-foreground'
+                  : 'bg-primary text-primary-foreground',
+              )}
+            >
+              {props.label}
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/ui/GanttChart.tsx

@@ -0,0 +1,283 @@
+// GanttChart — a read-only project schedule chart built from plain flex/grid
+// `div`s (no SVG, no date library). Each task is a row with its name in a
+// fixed-width left column and a bar positioned on a proportional time axis
+// (left%/width% derived from the task's start/end within the overall date
+// range), mirroring BarChart's percentage-of-max layout idiom. Dependency
+// arrows are drawn as right-angle elbow connectors using bordered divs so
+// the whole chart stays in the same box-model coordinate space as the bars.
+import { createMemo, For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+const DAY_MS = 24 * 60 * 60 * 1000
+/** Header height (`h-8`) in px — the coordinate origin for row overlays. */
+const HEADER_HEIGHT = 32
+/** Per-task row height (`h-10`) in px. */
+const ROW_HEIGHT = 40
+/** Candidate tick spacings (days); the smallest that keeps ticks readable wins. */
+const TICK_STEP_DAYS = [1, 2, 3, 7, 14, 30, 60, 90, 180]
+
+/** A single bar rendered by {@link GanttChart}. */
+export interface GanttTask {
+  id: string
+  name: string
+  /** ISO date, `'YYYY-MM-DD'`. */
+  start: string
+  /** ISO date, `'YYYY-MM-DD'`. */
+  end: string
+  /** Ids of tasks that must finish before this one starts; drawn as elbow connectors. */
+  dependencies?: string[]
+  /** Bar color. Defaults to `'primary'`. */
+  tone?: 'primary' | 'accent'
+}
+
+export interface GanttChartProps {
+  tasks: GanttTask[]
+  class?: string
+}
+
+interface Tick {
+  label: string
+  percent: number
+}
+
+interface Connector {
+  id: string
+  /** Elbow's vertical run: x of the dependency's end, from its row to the dependent's row. */
+  xFrom: number
+  yFrom: number
+  xTo: number
+  yTo: number
+  arrowRight: boolean
+}
+
+function pickStepDays(totalDays: number): number {
+  const target = totalDays / 8
+  return TICK_STEP_DAYS.find((step) => step >= target) ?? TICK_STEP_DAYS[TICK_STEP_DAYS.length - 1]
+}
+
+function formatTick(date: Date): string {
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+/**
+ * Read-only Gantt chart: a header row of date ticks over a proportional time
+ * axis, one row per task with a colored bar spanning `start`–`end`, elbow
+ * connectors for `dependencies`, and a "today" marker when today falls
+ * within the overall range. Horizontal scroll kicks in when the range is
+ * wide relative to the container.
+ *
+ * @example
+ * ```tsx
+ * <GanttChart
+ *   tasks={[
+ *     { id: 'design', name: 'Design', start: '2026-01-05', end: '2026-01-16', tone: 'accent' },
+ *     { id: 'build', name: 'Build', start: '2026-01-19', end: '2026-02-06', dependencies: ['design'] },
+ *     { id: 'launch', name: 'Launch', start: '2026-02-09', end: '2026-02-10', dependencies: ['build'] },
+ *   ]}
+ * />
+ * ```
+ */
+export function GanttChart(props: GanttChartProps): JSX.Element {
+  const range = createMemo(() => {
+    if (props.tasks.length === 0) return null
+    let min = Number.POSITIVE_INFINITY
+    let max = Number.NEGATIVE_INFINITY
+    for (const task of props.tasks) {
+      const start = new Date(task.start).getTime()
+      const end = new Date(task.end).getTime()
+      if (start < min) min = start
+      if (end > max) max = end
+    }
+    // Guard a zero-width range (single task, start === end) so percentages stay finite.
+    const totalMs = Math.max(max - min, DAY_MS)
+    return { min, max: min + totalMs, totalMs }
+  })
+
+  const percentFor = (isoOrTime: string | number): number => {
+    const r = range()
+    if (!r) return 0
+    const time = typeof isoOrTime === 'string' ? new Date(isoOrTime).getTime() : isoOrTime
+    return Math.min(100, Math.max(0, ((time - r.min) / r.totalMs) * 100))
+  }
+
+  const ticks = createMemo<Tick[]>(() => {
+    const r = range()
+    if (!r) return []
+    const totalDays = Math.max(1, Math.round(r.totalMs / DAY_MS))
+    const step = pickStepDays(totalDays)
+    const out: Tick[] = []
+    for (let d = 0; d <= totalDays; d += step) {
+      out.push({ label: formatTick(new Date(r.min + d * DAY_MS)), percent: (d / totalDays) * 100 })
+    }
+    return out
+  })
+
+  const todayPercent = createMemo<number | null>(() => {
+    const r = range()
+    if (!r) return null
+    const now = new Date()
+    const today = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())
+    if (today < r.min || today > r.max) return null
+    return percentFor(today)
+  })
+
+  const rowIndex = createMemo(() => {
+    const map = new Map<string, number>()
+    props.tasks.forEach((task, i) => map.set(task.id, i))
+    return map
+  })
+
+  const connectors = createMemo<Connector[]>(() => {
+    const byId = new Map(props.tasks.map((t) => [t.id, t]))
+    const index = rowIndex()
+    const out: Connector[] = []
+    for (const task of props.tasks) {
+      for (const depId of task.dependencies ?? []) {
+        const dep = byId.get(depId)
+        if (!dep || dep.id === task.id) continue
+        const iDep = index.get(dep.id)
+        const iTask = index.get(task.id)
+        if (iDep === undefined || iTask === undefined) continue
+        const xFrom = percentFor(dep.end)
+        const xTo = percentFor(task.start)
+        out.push({
+          id: `${dep.id}->${task.id}`,
+          xFrom,
+          yFrom: iDep * ROW_HEIGHT + ROW_HEIGHT / 2,
+          xTo,
+          yTo: iTask * ROW_HEIGHT + ROW_HEIGHT / 2,
+          arrowRight: xTo >= xFrom,
+        })
+      }
+    }
+    return out
+  })
+
+  return (
+    <div class={cn('overflow-x-auto rounded-lg border border-border bg-card', props.class)}>
+      <Show
+        when={props.tasks.length > 0}
+        fallback={<p class="p-4 text-sm text-muted-foreground">No tasks to display.</p>}
+      >
+        <div class="flex min-w-[640px]">
+          {/* Names column */}
+          <div class="w-40 shrink-0 border-r border-border">
+            <div class="flex h-8 items-center px-3 text-xs font-medium text-muted-foreground">Task</div>
+            <For each={props.tasks}>
+              {(task, i) => (
+                <div
+                  class={cn(
+                    'flex h-10 items-center border-t border-border px-3',
+                    i() % 2 === 1 && 'bg-muted',
+                  )}
+                >
+                  <span class="truncate text-sm text-foreground" title={task.name}>
+                    {task.name}
+                  </span>
+                </div>
+              )}
+            </For>
+          </div>
+
+          {/* Chart column: header ticks, rows, connectors and the today marker all
+              share this box as their coordinate space (percent for x, px for y). */}
+          <div class="relative flex-1">
+            {/* Vertical gridlines, one per tick, spanning the whole chart column. */}
+            <div class="pointer-events-none absolute inset-0">
+              <For each={ticks()}>
+                {(tick) => (
+                  <div
+                    class="absolute inset-y-0 border-l border-border/40"
+                    style={{ left: `${tick.percent}%` }}
+                  />
+                )}
+              </For>
+            </div>
+
+            <div class="relative h-8">
+              <For each={ticks()}>
+                {(tick) => (
+                  <span
+                    class="absolute top-1/2 -translate-y-1/2 whitespace-nowrap pl-1 text-[11px] text-muted-foreground"
+                    style={{ left: `${tick.percent}%` }}
+                  >
+                    {tick.label}
+                  </span>
+                )}
+              </For>
+            </div>
+
+            <For each={props.tasks}>
+              {(task, i) => {
+                const left = () => percentFor(task.start)
+                const width = () => Math.max(percentFor(task.end) - left(), 1)
+                return (
+                  <div class={cn('relative h-10 border-t border-border', i() % 2 === 1 && 'bg-muted')}>
+                    <div
+                      title={`${task.name}: ${task.start} → ${task.end}`}
+                      class={cn(
+                        'absolute inset-y-2 rounded',
+                        task.tone === 'accent' ? 'bg-accent' : 'bg-primary',
+                      )}
+                      style={{ left: `${left()}%`, width: `${width()}%` }}
+                    />
+                  </div>
+                )
+              }}
+            </For>
+
+            {/* Dependency connectors: elbow (vertical run at the predecessor's end,
+                horizontal run into the dependent's start) as bordered divs. */}
+            <div
+              class="pointer-events-none absolute inset-x-0 bottom-0"
+              style={{ top: `${HEADER_HEIGHT}px` }}
+            >
+              <For each={connectors()}>
+                {(c) => (
+                  <>
+                    <div
+                      class="absolute border-l border-border"
+                      style={{
+                        left: `${c.xFrom}%`,
+                        top: `${Math.min(c.yFrom, c.yTo)}px`,
+                        height: `${Math.abs(c.yTo - c.yFrom)}px`,
+                      }}
+                    />
+                    <div
+                      class="absolute border-t border-border"
+                      style={{
+                        top: `${c.yTo}px`,
+                        left: `${Math.min(c.xFrom, c.xTo)}%`,
+                        width: `${Math.abs(c.xTo - c.xFrom)}%`,
+                      }}
+                    />
+                    <div
+                      class={cn(
+                        'absolute h-0 w-0 border-y-4 border-y-transparent',
+                        c.arrowRight ? 'border-l-8 border-l-border' : 'border-r-8 border-r-border',
+                      )}
+                      style={{
+                        top: `${c.yTo - 4}px`,
+                        left: c.arrowRight ? `calc(${c.xTo}% - 8px)` : `${c.xTo}%`,
+                      }}
+                    />
+                  </>
+                )}
+              </For>
+            </div>
+
+            {/* "Today" marker, spanning the header + every row. */}
+            <Show when={todayPercent() !== null}>
+              <div
+                class="pointer-events-none absolute inset-y-0 border-l border-primary"
+                style={{ left: `${todayPercent()}%` }}
+                title="Today"
+              />
+            </Show>
+          </div>
+        </div>
+      </Show>
+    </div>
+  )
+}