@a4ui/core 0.33.0 → 0.35.0

package/src/ui/AudioWaveform.tsx

@@ -0,0 +1,190 @@
+// Bar-style audio waveform over a hidden native <audio> element — no media
+// library. When no real `peaks` are supplied, a deterministic placeholder
+// waveform is derived from the bar index (abs(sin(...)) blend) so the shape
+// is stable across renders instead of reshuffling on every re-render like
+// Math.random() would.
+import { Pause, Play } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface AudioWaveformProps {
+  src?: string
+  peaks?: number[]
+  /** Bar row height in pixels. @default 64 */
+  height?: number
+  class?: string
+}
+
+const PLACEHOLDER_BAR_COUNT = 48
+// Demo progress rate (fraction of the fake "duration" per animation frame
+// tick) used only when there's no `src` to drive real audio playback.
+const DEMO_TICK_MS = 100
+const DEMO_STEP = 0.01
+
+/** Deterministic placeholder bar heights (0..1), no Math.random. */
+function placeholderPeaks(count: number): number[] {
+  return Array.from({ length: count }, (_, i) => {
+    const a = Math.abs(Math.sin(i * 0.35))
+    const b = Math.abs(Math.sin(i * 0.09 + 1.2))
+    return 0.15 + 0.85 * (0.65 * a + 0.35 * b)
+  })
+}
+
+/**
+ * Waveform of vertical bars driven by an optional hidden `<audio>` element.
+ * Pass `peaks` (numbers in `0..1`) for a real waveform, or omit it for a
+ * deterministic placeholder shape. The played portion (up to
+ * `currentTime / duration`) is highlighted; clicking a bar seeks there. With
+ * no `src`, playback is simulated on a timer for demo purposes.
+ *
+ * @example
+ * ```tsx
+ * <AudioWaveform src="/media/track.mp3" />
+ * <AudioWaveform peaks={[0.2, 0.8, 0.4, 0.9, 0.3]} height={48} />
+ * ```
+ */
+export function AudioWaveform(props: AudioWaveformProps): JSX.Element {
+  let audioRef: HTMLAudioElement | undefined
+
+  const [playing, setPlaying] = createSignal(false)
+  const [currentTime, setCurrentTime] = createSignal(0)
+  const [duration, setDuration] = createSignal(0)
+
+  const bars = createMemo(() => props.peaks ?? placeholderPeaks(PLACEHOLDER_BAR_COUNT))
+  const progress = createMemo(() => (duration() > 0 ? currentTime() / duration() : 0))
+  const barHeight = () => props.height ?? 64
+
+  const togglePlay = (): void => {
+    if (props.src) {
+      const audio = audioRef
+      if (!audio) return
+      if (audio.paused) void audio.play()
+      else audio.pause()
+      return
+    }
+    // No source: drive a fake demo progress instead of real playback.
+    setPlaying((p) => !p)
+  }
+
+  const seekToRatio = (ratio: number): void => {
+    const clamped = Math.min(Math.max(ratio, 0), 1)
+    if (props.src) {
+      const audio = audioRef
+      if (!audio || !duration()) return
+      audio.currentTime = clamped * duration()
+      return
+    }
+    setCurrentTime(clamped * (duration() || 1))
+  }
+
+  const handleBarClick = (index: number): void => {
+    seekToRatio((index + 0.5) / bars().length)
+  }
+
+  onMount(() => {
+    if (props.src) {
+      const audio = audioRef
+      if (!audio) return
+
+      const onPlay = (): void => {
+        setPlaying(true)
+      }
+      const onPause = (): void => {
+        setPlaying(false)
+      }
+      const onTimeUpdate = (): void => {
+        setCurrentTime(audio.currentTime)
+      }
+      const onLoadedMetadata = (): void => {
+        setDuration(audio.duration || 0)
+      }
+
+      audio.addEventListener('play', onPlay)
+      audio.addEventListener('pause', onPause)
+      audio.addEventListener('timeupdate', onTimeUpdate)
+      audio.addEventListener('loadedmetadata', onLoadedMetadata)
+
+      onCleanup(() => {
+        audio.removeEventListener('play', onPlay)
+        audio.removeEventListener('pause', onPause)
+        audio.removeEventListener('timeupdate', onTimeUpdate)
+        audio.removeEventListener('loadedmetadata', onLoadedMetadata)
+      })
+      return
+    }
+
+    // Demo mode: fake a duration and advance currentTime on an interval while playing.
+    setDuration(30)
+    const interval = setInterval(() => {
+      if (!playing() || motionReduced()) return
+      setCurrentTime((t) => {
+        const next = t + DEMO_STEP * duration()
+        if (next >= duration()) {
+          setPlaying(false)
+          return 0
+        }
+        return next
+      })
+    }, DEMO_TICK_MS)
+    onCleanup(() => clearInterval(interval))
+  })
+
+  return (
+    <div class={cn('card flex items-center gap-3 p-3', props.class)}>
+      <Show when={props.src}>
+        <audio ref={audioRef} src={props.src} />
+      </Show>
+
+      <button
+        type="button"
+        aria-label={playing() ? 'Pause' : 'Play'}
+        onClick={togglePlay}
+        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-transform duration-150 hover:scale-105 active:scale-95"
+      >
+        <Show when={playing()} fallback={<Play class="h-4 w-4 translate-x-0.5" fill="currentColor" />}>
+          <Pause class="h-4 w-4" fill="currentColor" />
+        </Show>
+      </button>
+
+      <div
+        role="slider"
+        aria-label="Waveform position"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={Math.round(progress() * 100)}
+        tabIndex={0}
+        class="flex flex-1 cursor-pointer items-center gap-[2px]"
+        style={{ height: `${barHeight()}px` }}
+        onClick={(event) => {
+          const rect = event.currentTarget.getBoundingClientRect()
+          seekToRatio((event.clientX - rect.left) / rect.width)
+        }}
+      >
+        <For each={bars()}>
+          {(peak, index) => {
+            const played = createMemo(() => index() / bars().length <= progress())
+            return (
+              <button
+                type="button"
+                aria-hidden="true"
+                tabIndex={-1}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  handleBarClick(index())
+                }}
+                class={cn(
+                  'w-full min-w-[2px] flex-1 rounded-full transition-colors duration-150',
+                  played() ? 'bg-primary' : 'bg-muted',
+                )}
+                style={{ height: `${Math.max(peak, 0.06) * 100}%` }}
+              />
+            )
+          }}
+        </For>
+      </div>
+    </div>
+  )
+}

package/src/ui/AvailabilityPicker.tsx

@@ -0,0 +1,163 @@
+// Booking-style time-slot picker: a compact scrollable list of bookable dates on
+// the left (from the keys of `slotsByDate`), open 'HH:mm' slots for the selected
+// date as a button grid on the right. Shares its time-slot idiom with
+// EventScheduler (native `Date`, ISO/'HH:mm' strings, no date library) — this one
+// lays slots out as buttons instead of a positioned grid. Plain Solid + theme
+// tokens (works in light/dark).
+import type { JSX } from 'solid-js'
+import { createMemo, createSignal, For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface AvailabilityPickerProps {
+  /** Open slots per date, keyed by local ISO 'YYYY-MM-DD'; each value is a list of 'HH:mm' times. */
+  slotsByDate: Record<string, string[]>
+  /** Controlled selection; omit to manage selection internally. */
+  value?: { date: string; time: string }
+  onChange?: (selection: { date: string; time: string }) => void
+  /** Label shown near the slots. @default the browser's Intl timezone */
+  timezone?: string
+  class?: string
+}
+
+const WEEKDAY_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const
+const MONTH_SHORT = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+] as const
+
+/** Parse a `YYYY-MM-DD` key into a local `Date` at midnight, no timezone shifting. */
+function parseDateKey(key: string): Date {
+  const [y, m, d] = key.split('-').map(Number)
+  return new Date(y, m - 1, d)
+}
+
+/** Format an 'HH:mm' 24h slot as a 12h label, e.g. '09:30' -> '9:30 AM'. */
+function formatSlot(time: string): string {
+  const [hh, mm] = time.split(':').map(Number)
+  const period = hh < 12 ? 'AM' : 'PM'
+  const h12 = hh % 12 === 0 ? 12 : hh % 12
+  return `${h12}:${String(mm).padStart(2, '0')} ${period}`
+}
+
+/**
+ * Booking-style availability picker: a scrollable list of bookable dates on the
+ * left (built from the keys of `slotsByDate`) and a scrollable grid of open
+ * 'HH:mm' slots for the selected date on the right, with a timezone label.
+ * Controlled via `value`/`onChange`, or self-managed when `value` is omitted.
+ * Fully keyboard accessible (native buttons, `aria-pressed` on the current pick).
+ *
+ * @example
+ * ```tsx
+ * const [selection, setSelection] = createSignal<{ date: string; time: string }>()
+ * <AvailabilityPicker
+ *   slotsByDate={{ '2026-07-22': ['09:00', '09:30', '14:00'], '2026-07-23': ['10:00'] }}
+ *   value={selection()}
+ *   onChange={setSelection}
+ * />
+ * ```
+ */
+export function AvailabilityPicker(props: AvailabilityPickerProps): JSX.Element {
+  const dates = createMemo(() => Object.keys(props.slotsByDate).sort())
+
+  const [internalValue, setInternalValue] = createSignal<{ date: string; time: string } | undefined>(
+    undefined,
+  )
+  // eslint-disable-next-line solid/reactivity -- seed once; navigation from here is user-driven
+  const [viewingDate, setViewingDate] = createSignal<string | undefined>(props.value?.date ?? dates()[0])
+
+  const selection = () => props.value ?? internalValue()
+  const activeDate = () => props.value?.date ?? viewingDate()
+  const slots = createMemo(() => props.slotsByDate[activeDate() ?? ''] ?? [])
+  const timezone = () => props.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone
+
+  const pick = (date: string, time: string) => {
+    setViewingDate(date)
+    setInternalValue({ date, time })
+    props.onChange?.({ date, time })
+  }
+
+  return (
+    <div class={cn('flex overflow-hidden rounded-xl border border-border bg-card', props.class)}>
+      {/* Date list */}
+      <div class="flex w-32 shrink-0 flex-col gap-1 overflow-y-auto border-r border-border p-2">
+        <For each={dates()} fallback={<p class="p-2 text-xs text-muted-foreground">No dates</p>}>
+          {(dateKey) => {
+            const d = parseDateKey(dateKey)
+            const isActive = () => activeDate() === dateKey
+            const count = () => props.slotsByDate[dateKey]?.length ?? 0
+            return (
+              <button
+                type="button"
+                aria-pressed={isActive()}
+                disabled={count() === 0}
+                onClick={() => setViewingDate(dateKey)}
+                class={cn(
+                  'flex flex-col items-start rounded-md px-2 py-1.5 text-left transition-colors',
+                  isActive() ? 'bg-primary text-primary-foreground' : 'text-foreground hover:bg-muted',
+                  count() === 0 && !isActive() && 'text-muted-foreground/50',
+                )}
+              >
+                <span class="text-[10px] uppercase opacity-80">{WEEKDAY_SHORT[d.getDay()]}</span>
+                <span class="text-sm font-medium">
+                  {MONTH_SHORT[d.getMonth()]} {d.getDate()}
+                </span>
+              </button>
+            )
+          }}
+        </For>
+      </div>
+
+      {/* Slots */}
+      <div class="flex flex-1 flex-col">
+        <div class="flex items-center justify-between border-b border-border px-3 py-2">
+          <span class="text-sm font-medium text-foreground">
+            <Show when={activeDate()} fallback="Select a date">
+              {(d) => {
+                const date = parseDateKey(d())
+                return `${WEEKDAY_SHORT[date.getDay()]}, ${MONTH_SHORT[date.getMonth()]} ${date.getDate()}`
+              }}
+            </Show>
+          </span>
+          <span class="text-xs text-muted-foreground">{timezone()}</span>
+        </div>
+
+        <div class="grid grid-cols-3 gap-2 overflow-y-auto p-3" style={{ 'max-height': '20rem' }}>
+          <For
+            each={slots()}
+            fallback={<p class="col-span-3 text-sm text-muted-foreground">No open times</p>}
+          >
+            {(time) => {
+              const isSelected = () => selection()?.date === activeDate() && selection()?.time === time
+              return (
+                <button
+                  type="button"
+                  aria-pressed={isSelected()}
+                  onClick={() => pick(activeDate() ?? '', time)}
+                  class={cn(
+                    'rounded-md border px-2 py-1.5 text-sm transition-colors',
+                    isSelected()
+                      ? 'border-primary bg-primary text-primary-foreground'
+                      : 'border-border text-foreground hover:bg-muted',
+                  )}
+                >
+                  {formatSlot(time)}
+                </button>
+              )
+            }}
+          </For>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/ui/CodeEditor.tsx

@@ -0,0 +1,277 @@
+// Lightweight code textarea — line numbers + approximate syntax highlighting,
+// no parser, no syntax-highlight dependency. A transparent <textarea> is
+// layered exactly over a <pre> highlight overlay; the textarea stays the
+// real input (caret, selection, a11y), the overlay is purely decorative.
+import type { JSX } from 'solid-js'
+import { createMemo, For } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface CodeEditorProps {
+  value: string
+  /** Called with the new source string on every input event. */
+  onInput?: (v: string) => void
+  /** Language used to pick the keyword set for highlighting. Default `'ts'`. */
+  language?: 'ts' | 'js' | 'json' | 'html' | 'css'
+  /** Hides the caret and blocks editing; the overlay still highlights. */
+  readOnly?: boolean
+  class?: string
+}
+
+const KEYWORDS: Record<NonNullable<CodeEditorProps['language']>, string[]> = {
+  ts: [
+    'const',
+    'let',
+    'var',
+    'function',
+    'return',
+    'if',
+    'else',
+    'for',
+    'while',
+    'switch',
+    'case',
+    'break',
+    'continue',
+    'class',
+    'extends',
+    'implements',
+    'interface',
+    'type',
+    'enum',
+    'import',
+    'export',
+    'from',
+    'default',
+    'new',
+    'this',
+    'super',
+    'try',
+    'catch',
+    'finally',
+    'throw',
+    'async',
+    'await',
+    'typeof',
+    'instanceof',
+    'in',
+    'of',
+    'null',
+    'undefined',
+    'true',
+    'false',
+    'void',
+    'public',
+    'private',
+    'protected',
+    'readonly',
+    'static',
+    'as',
+  ],
+  js: [
+    'const',
+    'let',
+    'var',
+    'function',
+    'return',
+    'if',
+    'else',
+    'for',
+    'while',
+    'switch',
+    'case',
+    'break',
+    'continue',
+    'class',
+    'extends',
+    'import',
+    'export',
+    'from',
+    'default',
+    'new',
+    'this',
+    'super',
+    'try',
+    'catch',
+    'finally',
+    'throw',
+    'async',
+    'await',
+    'typeof',
+    'instanceof',
+    'in',
+    'of',
+    'null',
+    'undefined',
+    'true',
+    'false',
+    'void',
+  ],
+  json: ['true', 'false', 'null'],
+  html: ['DOCTYPE', 'html', 'head', 'body', 'div', 'span', 'script', 'style', 'link', 'meta'],
+  css: [
+    'color',
+    'background',
+    'display',
+    'flex',
+    'grid',
+    'position',
+    'width',
+    'height',
+    'margin',
+    'padding',
+    'border',
+    'font',
+    'transition',
+    'transform',
+  ],
+}
+
+/** Escapes text that will be inserted as literal `<pre>` content. */
+function escapeHtml(text: string): string {
+  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+/**
+ * Tokenizes a single line into highlighted HTML. Approximate on purpose —
+ * regex-based, not a real parser — good enough for readability, not for
+ * correctness-sensitive tooling.
+ */
+function highlightLine(line: string, keywords: string[]): string {
+  // Comments win outright: once matched, the rest of the line is dimmed as-is.
+  const lineCommentIndex = line.indexOf('//')
+  const htmlCommentIndex = line.indexOf('<!--')
+  const commentIndex =
+    lineCommentIndex === -1
+      ? htmlCommentIndex
+      : htmlCommentIndex === -1
+        ? lineCommentIndex
+        : Math.min(lineCommentIndex, htmlCommentIndex)
+
+  const code = commentIndex === -1 ? line : line.slice(0, commentIndex)
+  const comment = commentIndex === -1 ? '' : line.slice(commentIndex)
+
+  const keywordPattern = keywords.length > 0 ? `\\b(${keywords.join('|')})\\b` : ''
+  const tokenPattern = new RegExp(
+    [
+      /"(?:[^"\\]|\\.)*"/.source, // double-quoted string
+      /'(?:[^'\\]|\\.)*'/.source, // single-quoted string
+      /`(?:[^`\\]|\\.)*`/.source, // template string
+      /\b\d+(?:\.\d+)?\b/.source, // number
+      ...(keywordPattern ? [keywordPattern] : []),
+    ].join('|'),
+    'g',
+  )
+
+  let highlighted = ''
+  let lastIndex = 0
+  for (const match of code.matchAll(tokenPattern)) {
+    const token = match[0]
+    const start = match.index ?? 0
+    highlighted += escapeHtml(code.slice(lastIndex, start))
+    if (token[0] === '"' || token[0] === "'" || token[0] === '`') {
+      highlighted += `<span class="text-accent">${escapeHtml(token)}</span>`
+    } else if (/^\d/.test(token)) {
+      highlighted += `<span class="text-primary">${escapeHtml(token)}</span>`
+    } else {
+      highlighted += `<span class="text-primary font-medium">${escapeHtml(token)}</span>`
+    }
+    lastIndex = start + token.length
+  }
+  highlighted += escapeHtml(code.slice(lastIndex))
+
+  if (comment) {
+    highlighted += `<span class="text-muted-foreground italic">${escapeHtml(comment)}</span>`
+  }
+
+  return highlighted || ' ' // keep empty lines at full line-height
+}
+
+const SHARED_TEXT = 'whitespace-pre font-mono text-sm leading-6 px-3 py-2 [tab-size:2]' as const
+
+/**
+ * A minimal code editor: line numbers in a gutter, a transparent textarea for
+ * input, and a `<pre>` overlay underneath it that renders approximate syntax
+ * highlighting from simple regexes (keywords, strings, numbers, comments).
+ * Not a full parser — good for READMEs, config editors, and demo panes, not
+ * a replacement for a real editor component (CodeMirror/Monaco).
+ *
+ * @example
+ * ```tsx
+ * const [src, setSrc] = createSignal('const x: number = 1\n')
+ * <CodeEditor value={src()} onInput={setSrc} language="ts" />
+ * ```
+ */
+export function CodeEditor(props: CodeEditorProps): JSX.Element {
+  const local = props
+
+  let textareaRef: HTMLTextAreaElement | undefined
+  let overlayRef: HTMLPreElement | undefined
+
+  const lines = createMemo(() => local.value.split('\n'))
+  const keywords = createMemo(() => KEYWORDS[local.language ?? 'ts'])
+  const highlightedLines = createMemo(() => lines().map((line) => highlightLine(line, keywords())))
+
+  const syncScroll = () => {
+    if (!textareaRef || !overlayRef) return
+    overlayRef.scrollTop = textareaRef.scrollTop
+    overlayRef.scrollLeft = textareaRef.scrollLeft
+  }
+
+  const handleKeyDown: JSX.EventHandlerUnion<HTMLTextAreaElement, KeyboardEvent> = (ev) => {
+    if (ev.key !== 'Tab' || local.readOnly) return
+    ev.preventDefault()
+    const el = ev.currentTarget
+    const start = el.selectionStart
+    const end = el.selectionEnd
+    const next = `${local.value.slice(0, start)}  ${local.value.slice(end)}`
+    local.onInput?.(next)
+    // Restore caret after the inserted spaces once the value commits.
+    queueMicrotask(() => {
+      el.selectionStart = el.selectionEnd = start + 2
+    })
+  }
+
+  return (
+    <div class={cn('relative flex overflow-hidden rounded-md border border-border bg-card', local.class)}>
+      <div
+        aria-hidden="true"
+        class={cn(
+          SHARED_TEXT,
+          'select-none border-r border-border bg-muted text-right text-muted-foreground',
+        )}
+      >
+        <For each={lines()}>{(_line, index) => <div>{index() + 1}</div>}</For>
+      </div>
+      <div class="relative flex-1 overflow-hidden">
+        <pre
+          ref={overlayRef}
+          aria-hidden="true"
+          class={cn(SHARED_TEXT, 'pointer-events-none absolute inset-0 overflow-auto text-foreground')}
+        >
+          <For each={highlightedLines()}>
+            {(html) => (
+              // eslint-disable-next-line solid/no-innerhtml -- highlightLine() HTML-escapes every code slice via escapeHtml(); only our own token <span>s are injected, so this cannot inject markup from `value`.
+              <div innerHTML={html} />
+            )}
+          </For>
+        </pre>
+        <textarea
+          ref={textareaRef}
+          aria-label="Code editor"
+          class={cn(
+            SHARED_TEXT,
+            'absolute inset-0 resize-none overflow-auto bg-transparent text-transparent caret-foreground outline-none',
+            local.readOnly && 'caret-transparent',
+          )}
+          spellcheck={false}
+          readOnly={local.readOnly}
+          value={local.value}
+          onInput={(ev) => local.onInput?.(ev.currentTarget.value)}
+          onScroll={syncScroll}
+          onKeyDown={handleKeyDown}
+        />
+      </div>
+    </div>
+  )
+}