@a4ui/core 0.32.0 → 0.34.0

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>
+  )
+}

package/src/ui/UsageMeter.tsx

@@ -0,0 +1,71 @@
+// Labeled consumption bar (e.g. token/quota usage) on Kobalte's Meter
+// primitive — same idiom as Meter.tsx/Progress.tsx, plus a warning-tone fill
+// past a configurable threshold and a "N left" remaining line.
+import { Meter as KMeter } from '@kobalte/core/meter'
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface UsageMeterProps {
+  used: number
+  limit: number
+  /** Header content shown before the "{used}/{limit}{unit}" count. */
+  label?: JSX.Element
+  /** Appended to displayed numbers, e.g. `' tokens'` or `'%'`. */
+  unit?: string
+  /** Fraction of `limit` (0–1) at which the fill switches to the warning tone. @default 0.85 */
+  warnAt?: number
+  class?: string
+}
+
+/**
+ * Labeled consumption bar: a header row with `label` and the raw
+ * "{used}/{limit}{unit}" count, a track whose fill width is `used / limit`
+ * (clamped to 0–100%) and switches to a warning tone once that ratio reaches
+ * `warnAt`, and a small "{remaining} left" line underneath. Built on Kobalte's
+ * `Meter` primitive, so it carries the same `role="meter"` a11y semantics as
+ * {@link Meter}.
+ *
+ * @example
+ * ```tsx
+ * <UsageMeter used={92} limit={100} label="API requests" unit=" req" warnAt={0.9} />
+ * ```
+ */
+export function UsageMeter(props: UsageMeterProps): JSX.Element {
+  const unit = () => props.unit ?? ''
+  const ratio = () => (props.limit > 0 ? props.used / props.limit : 0)
+  const percent = () => Math.max(0, Math.min(100, ratio() * 100))
+  const isWarning = () => ratio() >= (props.warnAt ?? 0.85)
+  const remaining = () => Math.max(0, props.limit - props.used)
+
+  return (
+    <KMeter
+      value={props.used}
+      minValue={0}
+      maxValue={props.limit}
+      getValueLabel={() => `${props.used}/${props.limit}${unit()}`}
+      class={cn('flex flex-col gap-1.5', props.class)}
+    >
+      <div class="flex items-center justify-between text-sm text-foreground">
+        <Show when={props.label}>
+          <KMeter.Label>{props.label}</KMeter.Label>
+        </Show>
+        <KMeter.ValueLabel class="ml-auto tabular-nums text-muted-foreground" />
+      </div>
+      <KMeter.Track class="h-2 overflow-hidden rounded-full bg-muted">
+        <KMeter.Fill
+          class={cn(
+            'h-full rounded-full transition-all duration-500',
+            isWarning() ? 'bg-amber-500' : 'bg-primary',
+          )}
+          style={{ width: `${percent()}%` }}
+        />
+      </KMeter.Track>
+      <p class="text-xs text-muted-foreground">
+        {remaining()}
+        {unit()} left
+      </p>
+    </KMeter>
+  )
+}

package/src/ui/VideoPlayerShell.tsx

@@ -0,0 +1,282 @@
+// Custom video player over the native <video> element — no media library.
+// Controls (play/pause, scrub, volume, fullscreen, PiP) are hand-rolled on top
+// of the video's own event listeners (timeupdate/play/pause/volumechange),
+// wired up in onMount and torn down in onCleanup. The control bar auto-hides
+// during playback and reappears on pointer movement or keyboard focus.
+import { Maximize, Pause, PictureInPicture2, Play, Volume2, VolumeX } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createSignal, onCleanup, onMount, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface VideoPlayerShellProps {
+  src: string
+  poster?: string
+  class?: string
+}
+
+const AUTO_HIDE_MS = 2200
+const SEEK_STEP_SECONDS = 5
+
+function formatTime(seconds: number): string {
+  if (!Number.isFinite(seconds) || seconds < 0) return '0:00'
+  const total = Math.floor(seconds)
+  const m = Math.floor(total / 60)
+  const s = total % 60
+  return `${m}:${s.toString().padStart(2, '0')}`
+}
+
+/**
+ * Native `<video>` wrapped in a glass shell with fully custom controls: a big
+ * center play/pause, a bottom bar (play/pause, elapsed/duration, a scrub
+ * range, mute toggle, fullscreen, Picture-in-Picture), and a keyboard map
+ * (Space = play/pause, ArrowLeft/Right = seek ±5s). Controls auto-hide while
+ * playing and reappear on pointer movement.
+ *
+ * @example
+ * ```tsx
+ * <VideoPlayerShell src="/media/demo.mp4" poster="/media/demo-poster.jpg" />
+ * ```
+ */
+export function VideoPlayerShell(props: VideoPlayerShellProps): JSX.Element {
+  let containerRef: HTMLDivElement | undefined
+  let videoRef: HTMLVideoElement | undefined
+
+  const [playing, setPlaying] = createSignal(false)
+  const [currentTime, setCurrentTime] = createSignal(0)
+  const [duration, setDuration] = createSignal(0)
+  const [muted, setMuted] = createSignal(false)
+  const [volume, setVolume] = createSignal(1)
+  const [fullscreen, setFullscreen] = createSignal(false)
+  const [pipSupported, setPipSupported] = createSignal(false)
+  const [controlsVisible, setControlsVisible] = createSignal(true)
+
+  let hideTimer: ReturnType<typeof setTimeout> | undefined
+
+  const clearHideTimer = (): void => {
+    if (hideTimer !== undefined) clearTimeout(hideTimer)
+    hideTimer = undefined
+  }
+
+  const scheduleHide = (): void => {
+    clearHideTimer()
+    if (!playing()) return
+    hideTimer = setTimeout(() => setControlsVisible(false), AUTO_HIDE_MS)
+  }
+
+  const revealControls = (): void => {
+    setControlsVisible(true)
+    scheduleHide()
+  }
+
+  const togglePlay = (): void => {
+    const video = videoRef
+    if (!video) return
+    if (video.paused) void video.play()
+    else video.pause()
+  }
+
+  const seekBy = (deltaSeconds: number): void => {
+    const video = videoRef
+    if (!video) return
+    video.currentTime = Math.min(Math.max(video.currentTime + deltaSeconds, 0), video.duration || 0)
+  }
+
+  const handleScrub = (event: Event & { currentTarget: HTMLInputElement }): void => {
+    const video = videoRef
+    if (!video) return
+    video.currentTime = Number(event.currentTarget.value)
+  }
+
+  const toggleMute = (): void => {
+    const video = videoRef
+    if (!video) return
+    video.muted = !video.muted
+  }
+
+  const handleVolume = (event: Event & { currentTarget: HTMLInputElement }): void => {
+    const video = videoRef
+    if (!video) return
+    const next = Number(event.currentTarget.value)
+    video.volume = next
+    video.muted = next === 0
+  }
+
+  const toggleFullscreen = (): void => {
+    const container = containerRef
+    if (!container) return
+    if (document.fullscreenElement) void document.exitFullscreen()
+    else void container.requestFullscreen()
+  }
+
+  const togglePip = (): void => {
+    const video = videoRef
+    if (!video || !pipSupported()) return
+    if (document.pictureInPictureElement) void document.exitPictureInPicture()
+    else void video.requestPictureInPicture()
+  }
+
+  const handleKeyDown = (event: KeyboardEvent): void => {
+    if (event.code === 'Space') {
+      event.preventDefault()
+      togglePlay()
+    } else if (event.code === 'ArrowLeft') {
+      event.preventDefault()
+      seekBy(-SEEK_STEP_SECONDS)
+    } else if (event.code === 'ArrowRight') {
+      event.preventDefault()
+      seekBy(SEEK_STEP_SECONDS)
+    }
+    revealControls()
+  }
+
+  onMount(() => {
+    const video = videoRef
+    if (!video) return
+
+    setPipSupported(
+      typeof document !== 'undefined' &&
+        'pictureInPictureEnabled' in document &&
+        !video.disablePictureInPicture,
+    )
+
+    const onPlay = (): void => {
+      setPlaying(true)
+      scheduleHide()
+    }
+    const onPause = (): void => {
+      setPlaying(false)
+      clearHideTimer()
+      setControlsVisible(true)
+    }
+    const onTimeUpdate = (): void => {
+      setCurrentTime(video.currentTime)
+    }
+    const onLoadedMetadata = (): void => {
+      setDuration(video.duration || 0)
+    }
+    const onVolumeChange = (): void => {
+      setMuted(video.muted)
+      setVolume(video.volume)
+    }
+    const onFullscreenChange = (): void => {
+      setFullscreen(document.fullscreenElement === containerRef)
+    }
+
+    video.addEventListener('play', onPlay)
+    video.addEventListener('pause', onPause)
+    video.addEventListener('timeupdate', onTimeUpdate)
+    video.addEventListener('loadedmetadata', onLoadedMetadata)
+    video.addEventListener('volumechange', onVolumeChange)
+    document.addEventListener('fullscreenchange', onFullscreenChange)
+
+    onCleanup(() => {
+      video.removeEventListener('play', onPlay)
+      video.removeEventListener('pause', onPause)
+      video.removeEventListener('timeupdate', onTimeUpdate)
+      video.removeEventListener('loadedmetadata', onLoadedMetadata)
+      video.removeEventListener('volumechange', onVolumeChange)
+      document.removeEventListener('fullscreenchange', onFullscreenChange)
+      clearHideTimer()
+    })
+  })
+
+  return (
+    <div
+      ref={containerRef}
+      class={cn('card group relative aspect-video w-full overflow-hidden bg-black outline-none', props.class)}
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+      onPointerMove={revealControls}
+      onMouseLeave={() => playing() && setControlsVisible(false)}
+    >
+      <video
+        ref={videoRef}
+        src={props.src}
+        poster={props.poster}
+        class="h-full w-full object-contain"
+        onClick={togglePlay}
+      />
+
+      {/* Big center play/pause */}
+      <Show when={controlsVisible() || !playing()}>
+        <button
+          type="button"
+          aria-label={playing() ? 'Pause' : 'Play'}
+          onClick={togglePlay}
+          class="absolute inset-0 flex items-center justify-center transition-opacity duration-200"
+        >
+          <Show when={!playing()}>
+            <span class="flex h-16 w-16 items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-sm transition-transform duration-150 hover:scale-105">
+              <Play class="h-7 w-7 translate-x-0.5" fill="currentColor" />
+            </span>
+          </Show>
+        </button>
+      </Show>
+
+      {/* Bottom control bar */}
+      <div
+        class={cn(
+          'absolute inset-x-0 bottom-0 flex flex-col gap-1.5 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-3 pb-2 pt-6 text-white transition-opacity duration-200',
+          controlsVisible() ? 'opacity-100' : 'pointer-events-none opacity-0',
+        )}
+      >
+        <input
+          type="range"
+          aria-label="Seek"
+          min={0}
+          max={duration() || 0}
+          step={0.1}
+          value={currentTime()}
+          onInput={handleScrub}
+          class="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-white/25 accent-primary"
+        />
+        <div class="flex items-center gap-2">
+          <button type="button" aria-label={playing() ? 'Pause' : 'Play'} onClick={togglePlay} class="p-1">
+            <Show when={playing()} fallback={<Play class="h-4 w-4" fill="currentColor" />}>
+              <Pause class="h-4 w-4" fill="currentColor" />
+            </Show>
+          </button>
+
+          <span class="text-xs tabular-nums text-white/85">
+            {formatTime(currentTime())} / {formatTime(duration())}
+          </span>
+
+          <div class="ml-1 flex items-center gap-1">
+            <button type="button" aria-label={muted() ? 'Unmute' : 'Mute'} onClick={toggleMute} class="p-1">
+              <Show when={!muted() && volume() > 0} fallback={<VolumeX class="h-4 w-4" />}>
+                <Volume2 class="h-4 w-4" />
+              </Show>
+            </button>
+            <input
+              type="range"
+              aria-label="Volume"
+              min={0}
+              max={1}
+              step={0.05}
+              value={muted() ? 0 : volume()}
+              onInput={handleVolume}
+              class="h-1 w-16 cursor-pointer appearance-none rounded-full bg-white/25 accent-primary"
+            />
+          </div>
+
+          <div class="ml-auto flex items-center gap-2">
+            <Show when={pipSupported()}>
+              <button type="button" aria-label="Picture in picture" onClick={togglePip} class="p-1">
+                <PictureInPicture2 class="h-4 w-4" />
+              </button>
+            </Show>
+            <button
+              type="button"
+              aria-label={fullscreen() ? 'Exit fullscreen' : 'Enter fullscreen'}
+              onClick={toggleFullscreen}
+              class="p-1"
+            >
+              <Maximize class="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}