@a4ui/core 0.34.0 → 0.35.0

package/src/ui/ActivityFeed.tsx

@@ -0,0 +1,178 @@
+// Chronological audit-trail list, newest first, grouped by day with a
+// Timeline-style connector line down the left. Distinct from
+// TransactionFeed (dense finance rows, no day grouping/connector) — this is
+// generic activity/audit history ("who did what, when").
+import { Activity } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Avatar } from './Avatar'
+
+/** A single audit-trail entry rendered by {@link ActivityFeed}. */
+export interface ActivityItem {
+  id: string
+  /** Name of the user/system that performed the action. */
+  actor: string
+  /** What happened, rendered right after `actor` (e.g. `"commented on Invoice #42"`). */
+  action: JSX.Element
+  /** Leading icon shown when `avatar` is omitted. Defaults to a generic activity icon. */
+  icon?: JSX.Element
+  /** ISO 8601 timestamp of the event. */
+  timestamp: string
+  avatar?: string
+}
+
+export interface ActivityFeedProps {
+  items: ActivityItem[]
+  class?: string
+}
+
+interface ActivityGroup {
+  label: string
+  items: ActivityItem[]
+}
+
+const DAY_MS = 86_400_000
+
+function startOfDay(date: Date): number {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()
+}
+
+/** `"Today"` / `"Yesterday"` / a locale date, based on calendar-day distance from now. */
+function dayLabel(timestamp: string): string {
+  const date = new Date(timestamp)
+  const diffDays = Math.round((startOfDay(new Date()) - startOfDay(date)) / DAY_MS)
+  if (diffDays === 0) return 'Today'
+  if (diffDays === 1) return 'Yesterday'
+  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
+}
+
+/** Compact relative time (`"2h ago"`, `"just now"`) computed from an ISO timestamp. */
+function relativeTime(timestamp: string): string {
+  const diffSeconds = Math.round((Date.now() - new Date(timestamp).getTime()) / 1000)
+  if (diffSeconds < 60) return 'just now'
+  const diffMinutes = Math.round(diffSeconds / 60)
+  if (diffMinutes < 60) return `${diffMinutes}m ago`
+  const diffHours = Math.round(diffMinutes / 60)
+  if (diffHours < 24) return `${diffHours}h ago`
+  const diffDays = Math.round(diffHours / 24)
+  if (diffDays < 7) return `${diffDays}d ago`
+  const diffWeeks = Math.round(diffDays / 7)
+  if (diffWeeks < 5) return `${diffWeeks}w ago`
+  const diffMonths = Math.round(diffDays / 30)
+  if (diffMonths < 12) return `${diffMonths}mo ago`
+  return `${Math.round(diffDays / 365)}y ago`
+}
+
+function initials(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join('')
+}
+
+/** Groups items newest-first by calendar day, preserving first-seen group order. */
+function groupByDay(items: ActivityItem[]): ActivityGroup[] {
+  const sorted = [...items].sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+  const groups: ActivityGroup[] = []
+  const byLabel = new Map<string, ActivityGroup>()
+  for (const item of sorted) {
+    const label = dayLabel(item.timestamp)
+    let group = byLabel.get(label)
+    if (!group) {
+      group = { label, items: [] }
+      byLabel.set(label, group)
+      groups.push(group)
+    }
+    group.items.push(item)
+  }
+  return groups
+}
+
+/**
+ * Chronological audit-trail list (newest first), grouped under subtle day
+ * headers (`"Today"` / `"Yesterday"` / a locale date) with a continuous
+ * connector line down the left, in the same spirit as {@link Timeline}. Each
+ * row shows an avatar (or a fallback icon), `"{actor} {action}"`, and a
+ * relative timestamp whose `title` carries the absolute time. Distinct from
+ * {@link TransactionFeed}: this is generic activity/audit history, not a
+ * financial ledger.
+ *
+ * @example
+ * ```tsx
+ * <ActivityFeed
+ *   items={[
+ *     {
+ *       id: '1',
+ *       actor: 'Ada Lovelace',
+ *       action: <>commented on <strong>Invoice #42</strong></>,
+ *       timestamp: '2026-07-21T09:15:00Z',
+ *       avatar: ada.avatarUrl,
+ *     },
+ *     {
+ *       id: '2',
+ *       actor: 'System',
+ *       action: 'archived the project',
+ *       timestamp: '2026-07-20T18:02:00Z',
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export function ActivityFeed(props: ActivityFeedProps): JSX.Element {
+  const groups = () => groupByDay(props.items)
+
+  return (
+    <div class={cn('flex flex-col gap-6', props.class)}>
+      <For each={groups()}>
+        {(group) => (
+          <div>
+            <p class="mb-3 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              {group.label}
+            </p>
+            <ol class="relative flex flex-col gap-5">
+              <For each={group.items}>
+                {(item, index) => (
+                  <li class="relative flex gap-3 pl-1">
+                    <Show when={index() < group.items.length - 1}>
+                      <span
+                        aria-hidden="true"
+                        class="absolute left-[1.375rem] top-9 -bottom-5 w-px -translate-x-1/2 bg-border"
+                      />
+                    </Show>
+                    <Show
+                      when={item.avatar}
+                      fallback={
+                        <span class="relative z-[1] grid h-9 w-9 shrink-0 place-items-center rounded-full bg-muted text-muted-foreground">
+                          {item.icon ?? <Activity class="h-4 w-4" />}
+                        </span>
+                      }
+                    >
+                      <span class="relative z-[1] shrink-0">
+                        <Avatar src={item.avatar} alt={item.actor} fallback={initials(item.actor)} />
+                      </span>
+                    </Show>
+                    <div class="min-w-0 flex-1 pt-1.5">
+                      <p class="text-sm text-foreground">
+                        <span class="font-medium">{item.actor}</span> {item.action}
+                      </p>
+                      <p
+                        class="mt-0.5 text-xs text-muted-foreground"
+                        title={new Date(item.timestamp).toLocaleString()}
+                      >
+                        {relativeTime(item.timestamp)}
+                      </p>
+                    </div>
+                  </li>
+                )}
+              </For>
+            </ol>
+          </div>
+        )}
+      </For>
+    </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>
+  )
+}