@a4ui/core 0.25.0 → 0.27.0

package/src/ui/CodeTabs.tsx

@@ -0,0 +1,100 @@
+// Tabbed code blocks with a per-tab copy button, for embedding several code
+// samples/languages (docs, marketing) in a single card. Plain monospace —
+// no syntax highlighting.
+import { Check, Copy } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createSignal, For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single tab's content: label, source code, and optional language tag. */
+export interface CodeTab {
+  label: string
+  code: string
+  /** Language tag, e.g. `'tsx'`. Not used for highlighting; informational only. */
+  lang?: string
+}
+
+export interface CodeTabsProps {
+  tabs: CodeTab[]
+  class?: string
+}
+
+const COPIED_TIMEOUT_MS = 1500
+
+/**
+ * Card of tabbed code blocks with a copy button for the active tab, for
+ * showing several code samples or language variants side by side.
+ *
+ * @example
+ * ```tsx
+ * <CodeTabs
+ *   tabs={[
+ *     { label: 'npm', code: 'npm install @a4ui/core' },
+ *     { label: 'pnpm', code: 'pnpm add @a4ui/core' },
+ *   ]}
+ * />
+ * ```
+ */
+export function CodeTabs(props: CodeTabsProps): JSX.Element {
+  const [activeIndex, setActiveIndex] = createSignal(0)
+  const [copied, setCopied] = createSignal(false)
+
+  const active = () => props.tabs[activeIndex()]
+
+  const copy = () => {
+    if (!navigator.clipboard) return
+    navigator.clipboard.writeText(active().code).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), COPIED_TIMEOUT_MS)
+    })
+  }
+
+  return (
+    <div class={cn('overflow-hidden rounded-lg border border-border bg-card', props.class)}>
+      <div class="flex items-center justify-between border-b border-border pr-2">
+        <div class="flex" role="tablist">
+          <For each={props.tabs}>
+            {(tab, index) => (
+              <button
+                type="button"
+                role="tab"
+                aria-selected={activeIndex() === index()}
+                class={cn(
+                  'border-b-2 px-4 py-2 text-sm font-medium transition-colors',
+                  activeIndex() === index()
+                    ? 'border-foreground text-foreground'
+                    : 'border-transparent text-muted-foreground hover:text-foreground',
+                )}
+                onClick={() => setActiveIndex(index())}
+              >
+                {tab.label}
+              </button>
+            )}
+          </For>
+        </div>
+        <button
+          type="button"
+          class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground hover:text-foreground"
+          onClick={copy}
+        >
+          <Show
+            when={copied()}
+            fallback={
+              <>
+                <Copy class="h-3.5 w-3.5" />
+                Copy
+              </>
+            }
+          >
+            <Check class="h-3.5 w-3.5" />
+            Copied
+          </Show>
+        </button>
+      </div>
+      <pre class="overflow-x-auto p-4 text-sm font-mono text-foreground">
+        <code>{active().code}</code>
+      </pre>
+    </div>
+  )
+}

package/src/ui/DataView.tsx

@@ -0,0 +1,198 @@
+// One dataset, three switchable presentations: table (reuses Table), board
+// (rows grouped into columns, Kanban-style), and gallery (a card grid). The
+// view switcher reuses SegmentedControl; board/gallery cards fall back to a
+// simple key/value list when no `card` renderer is given.
+import type { JSX } from 'solid-js'
+import { createMemo, createSignal, For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Badge } from './Badge'
+import type { SegmentedOption } from './SegmentedControl'
+import { SegmentedControl } from './SegmentedControl'
+import { Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow } from './Table'
+
+/** A single table column for {@link DataView}'s table presentation. */
+export interface DataViewColumn<T> {
+  /** Row property this column reads. */
+  key: string
+  /** Column heading text. */
+  header: string
+  /** Custom cell renderer; falls back to `String(row[key])` when omitted. */
+  cell?: (row: T) => JSX.Element
+}
+
+/** Presentation mode offered by {@link DataView}. */
+export type DataViewMode = 'table' | 'board' | 'gallery'
+
+/** Props for {@link DataView}. */
+export interface DataViewProps<T> {
+  data: T[]
+  /** Table columns; also used as the source of truth in board/gallery fallbacks. */
+  columns: DataViewColumn<T>[]
+  /** Stable row identifier, used as a DOM hook for tests/a11y. */
+  getId: (row: T) => string
+  /** For board view: group rows into columns by this key. If omitted, board mode is not offered. */
+  groupBy?: (row: T) => string
+  /** Card renderer for board + gallery. Falls back to a simple key/value list. */
+  card?: (row: T) => JSX.Element
+  /** Which views to offer (in order). Default: `['table', 'gallery']` plus `'board'` when `groupBy` is set. */
+  views?: DataViewMode[]
+  /** Controlled current view. Uncontrolled (internal signal) when omitted. */
+  view?: DataViewMode
+  onViewChange?: (view: DataViewMode) => void
+  class?: string
+}
+
+const MODE_LABELS: Record<DataViewMode, string> = {
+  table: 'Table',
+  board: 'Board',
+  gallery: 'Gallery',
+}
+
+function defaultModes<T>(props: DataViewProps<T>): DataViewMode[] {
+  if (props.views) return props.views
+  return props.groupBy ? ['table', 'board', 'gallery'] : ['table', 'gallery']
+}
+
+/** Key/value fallback used for board + gallery cards when no `card` renderer is given. */
+function FallbackCard<T>(props: { row: T }): JSX.Element {
+  const entries = () => Object.entries(props.row as Record<string, unknown>)
+  return (
+    <dl class="flex flex-col gap-1 text-sm">
+      <For each={entries()}>
+        {([key, value]) => (
+          <div class="flex items-center justify-between gap-3">
+            <dt class="text-muted-foreground">{key}</dt>
+            <dd class="truncate font-medium text-foreground">{String(value)}</dd>
+          </div>
+        )}
+      </For>
+    </dl>
+  )
+}
+
+/**
+ * One dataset, switchable between table, board (grouped columns), and
+ * gallery (card grid) presentations. Generic over the row type — pass
+ * `columns` for the table, an optional `groupBy` to enable the board view,
+ * and an optional `card` renderer reused by board + gallery.
+ *
+ * @example
+ * ```tsx
+ * <DataView
+ *   data={tasks}
+ *   getId={(t) => t.id}
+ *   columns={[
+ *     { key: 'title', header: 'Title' },
+ *     { key: 'status', header: 'Status' },
+ *   ]}
+ *   groupBy={(t) => t.status}
+ *   card={(t) => <span class="font-medium">{t.title}</span>}
+ * />
+ * ```
+ */
+export function DataView<T>(props: DataViewProps<T>): JSX.Element {
+  const modes = createMemo<DataViewMode[]>(() => defaultModes(props))
+
+  const [internalView, setInternalView] = createSignal<DataViewMode>(props.view ?? modes()[0] ?? 'table')
+
+  const view = createMemo(() => props.view ?? internalView())
+
+  const setView = (next: DataViewMode) => {
+    if (props.view === undefined) setInternalView(next)
+    props.onViewChange?.(next)
+  }
+
+  const options = createMemo<SegmentedOption[]>(() =>
+    modes().map((mode) => ({ value: mode, label: MODE_LABELS[mode] })),
+  )
+
+  const groups = createMemo(() => {
+    const groupBy = props.groupBy
+    if (!groupBy) return []
+    const byKey = new Map<string, T[]>()
+    for (const row of props.data) {
+      const key = groupBy(row)
+      const bucket = byKey.get(key)
+      if (bucket) bucket.push(row)
+      else byKey.set(key, [row])
+    }
+    return Array.from(byKey.entries()).map(([key, rows]) => ({ key, rows }))
+  })
+
+  return (
+    <div class={cn('flex w-full flex-col gap-4', props.class)}>
+      <div class="flex items-center justify-end">
+        <SegmentedControl
+          value={view()}
+          onChange={(next) => setView(next as DataViewMode)}
+          options={options()}
+        />
+      </div>
+
+      <Show when={view() === 'table'}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <For each={props.columns}>{(column) => <TableHeadCell>{column.header}</TableHeadCell>}</For>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <For each={props.data}>
+              {(row) => (
+                <TableRow data-row-id={props.getId(row)}>
+                  <For each={props.columns}>
+                    {(column) => (
+                      <TableCell>
+                        {column.cell?.(row) ?? String((row as Record<string, unknown>)[column.key])}
+                      </TableCell>
+                    )}
+                  </For>
+                </TableRow>
+              )}
+            </For>
+          </TableBody>
+        </Table>
+      </Show>
+
+      <Show when={view() === 'board' && props.groupBy}>
+        <div class="flex gap-4 overflow-x-auto">
+          <For each={groups()}>
+            {(group) => (
+              <div class="flex min-w-64 flex-col gap-3 rounded-xl border border-border bg-card p-3 text-card-foreground">
+                <div class="flex items-center justify-between gap-2 text-sm font-semibold">
+                  <span class="truncate">{group.key}</span>
+                  <Badge tone="neutral">{group.rows.length}</Badge>
+                </div>
+                <div class="flex flex-col gap-2">
+                  <For each={group.rows}>
+                    {(row) => (
+                      <div
+                        data-row-id={props.getId(row)}
+                        class="rounded-lg border border-border bg-background p-3"
+                      >
+                        {props.card?.(row) ?? <FallbackCard row={row} />}
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+
+      <Show when={view() === 'gallery'}>
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <For each={props.data}>
+            {(row) => (
+              <div data-row-id={props.getId(row)} class="card rounded-xl bg-card p-4 text-card-foreground">
+                {props.card?.(row) ?? <FallbackCard row={row} />}
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/ui/MasterDetail.tsx

@@ -0,0 +1,117 @@
+// List + detail-pane layout with keyboard navigation, e.g. an inbox or a
+// command-result view. The list is a `listbox`; Up/Down move the selection,
+// Home/End jump to the first/last item. Controlled (`selectedId`+`onSelect`)
+// or uncontrolled (internal signal, defaults to the first item).
+import type { JSX } from 'solid-js'
+import { createMemo, createSignal, For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface MasterDetailItem {
+  id: string
+  label: string
+  meta?: JSX.Element
+  detail: JSX.Element
+}
+
+export interface MasterDetailProps {
+  items: MasterDetailItem[]
+  /** Controlled selection. Uncontrolled (internal signal, defaults to the first item) when omitted. */
+  selectedId?: string
+  onSelect?: (id: string) => void
+  class?: string
+}
+
+/**
+ * List + detail-pane layout: a scrollable list of items on the left, the
+ * selected item's detail content on the right. Arrow keys (and Home/End)
+ * move the selection within the list.
+ *
+ * @example
+ * ```tsx
+ * <MasterDetail
+ *   items={messages.map((m) => ({ id: m.id, label: m.subject, meta: <Badge>{m.from}</Badge>, detail: <MessageBody message={m} /> }))}
+ * />
+ * ```
+ */
+export function MasterDetail(props: MasterDetailProps): JSX.Element {
+  const [internalId, setInternalId] = createSignal<string | undefined>(props.items[0]?.id)
+
+  const selectedId = createMemo(() => props.selectedId ?? internalId())
+
+  const select = (id: string) => {
+    if (props.selectedId === undefined) setInternalId(id)
+    props.onSelect?.(id)
+  }
+
+  const selectedItem = createMemo(() => props.items.find((item) => item.id === selectedId()))
+
+  let listEl: HTMLDivElement | undefined
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    const items = props.items
+    if (items.length === 0) return
+    const currentIndex = items.findIndex((item) => item.id === selectedId())
+
+    let nextIndex: number
+    if (event.key === 'ArrowDown')
+      nextIndex = currentIndex < 0 ? 0 : Math.min(currentIndex + 1, items.length - 1)
+    else if (event.key === 'ArrowUp') nextIndex = currentIndex < 0 ? 0 : Math.max(currentIndex - 1, 0)
+    else if (event.key === 'Home') nextIndex = 0
+    else if (event.key === 'End') nextIndex = items.length - 1
+    else return
+
+    event.preventDefault()
+    const next = items[nextIndex]
+    if (!next) return
+    select(next.id)
+    listEl?.querySelector<HTMLElement>(`[data-item-id="${next.id}"]`)?.focus()
+  }
+
+  return (
+    <div class={cn('grid grid-cols-1 gap-4 sm:grid-cols-[16rem_1fr]', props.class)}>
+      <div
+        ref={listEl}
+        role="listbox"
+        aria-label="Items"
+        tabindex={0}
+        onKeyDown={onKeyDown}
+        class="flex max-h-96 flex-col gap-1 overflow-y-auto rounded-xl border border-border bg-card p-1 text-card-foreground sm:max-h-[28rem]"
+      >
+        <For each={props.items}>
+          {(item) => {
+            const isSelected = () => item.id === selectedId()
+            return (
+              <button
+                type="button"
+                role="option"
+                aria-selected={isSelected()}
+                data-item-id={item.id}
+                tabindex={-1}
+                onClick={() => select(item.id)}
+                class={cn(
+                  'flex w-full items-center justify-between gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors',
+                  isSelected() ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-muted/60',
+                )}
+              >
+                <span class="truncate">{item.label}</span>
+                <Show when={item.meta}>{item.meta}</Show>
+              </button>
+            )
+          }}
+        </For>
+      </div>
+      <div class="rounded-xl border border-border bg-card p-5 text-card-foreground">
+        {/* keyed: re-render the detail when the selected item changes (a plain
+            Show wouldn't re-run its child when `when` stays truthy across items). */}
+        <Show
+          when={selectedItem()}
+          keyed
+          fallback={<p class="text-sm text-muted-foreground">Select an item to see its details.</p>}
+        >
+          {(item) => item.detail}
+        </Show>
+      </div>
+    </div>
+  )
+}

package/src/ui/PillSearch.tsx

@@ -0,0 +1,86 @@
+// Compact multi-parameter search entry: a single rounded-full bar that
+// compresses several fields (e.g. Where / When / Who) into clickable
+// segments, ending in a round primary search button.
+import type { JSX } from 'solid-js'
+import { For } from 'solid-js'
+import { Search } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+
+export interface PillField {
+  /** Stable identifier passed back via {@link PillSearchProps.onFieldClick}. */
+  key: string
+  /** Small label shown above the value, e.g. `"Where"`. */
+  label: string
+  /** Current value shown below the label. Falls back to `placeholder` when unset. */
+  value?: string
+  /** Muted hint shown when `value` is unset. */
+  placeholder?: string
+}
+
+export interface PillSearchProps {
+  fields: PillField[]
+  /** Called with the clicked field's `key`. */
+  onFieldClick?: (key: string) => void
+  /** Called when the round search button is pressed. */
+  onSearch?: () => void
+  class?: string
+}
+
+/**
+ * Rounded-full search bar that packs several fields into segments with a
+ * round primary search button — the classic "Where / When / Who" pattern
+ * compressed into one compact control.
+ *
+ * @example
+ * ```tsx
+ * <PillSearch
+ *   fields={[
+ *     { key: 'where', label: 'Where', value: 'Lisbon' },
+ *     { key: 'when', label: 'When', placeholder: 'Add dates' },
+ *     { key: 'who', label: 'Who', placeholder: 'Add guests' },
+ *   ]}
+ *   onFieldClick={(key) => console.log('open', key)}
+ *   onSearch={() => console.log('search')}
+ * />
+ * ```
+ */
+export function PillSearch(props: PillSearchProps): JSX.Element {
+  return (
+    <div
+      class={cn(
+        'inline-flex max-w-full items-center overflow-x-auto rounded-full border border-border bg-card shadow-sm',
+        props.class,
+      )}
+    >
+      <For each={props.fields}>
+        {(field, index) => (
+          <button
+            type="button"
+            aria-label={field.label}
+            onClick={() => props.onFieldClick?.(field.key)}
+            class={cn(
+              'flex min-w-[6.5rem] shrink-0 flex-col items-start px-4 py-2 text-left transition-colors duration-150 hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring',
+              index() === 0 ? 'rounded-l-full' : 'border-l border-border',
+            )}
+          >
+            <span class="text-xs font-medium text-muted-foreground">{field.label}</span>
+            <span class={cn('text-sm', field.value ? 'text-foreground' : 'text-muted-foreground')}>
+              {field.value ?? field.placeholder}
+            </span>
+          </button>
+        )}
+      </For>
+      <div class="shrink-0 py-1.5 pl-1 pr-1.5">
+        <button
+          type="button"
+          aria-label="Search"
+          onClick={() => props.onSearch?.()}
+          class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground transition-[color,background-color,transform] duration-150 hover:bg-primary/90 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-ring"
+        >
+          <Search class="h-4 w-4" aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/ui/SlashMenu.tsx

@@ -0,0 +1,141 @@
+// SlashMenu — filterable "/" insert/command menu (the "type / to insert
+// anything" pattern). Presentational and keyboard-driven; the caller wires
+// the '/' trigger and owns `open` + `query` (usually whatever the user typed
+// after '/').
+import { createEffect, createMemo, createSignal, For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single insertable item in a {@link SlashMenu}. */
+export interface SlashItem {
+  /** Value passed to `onSelect` when this item is picked. */
+  value: string
+  /** Primary text shown on the row. */
+  label: string
+  /** Optional secondary text shown muted below the label. */
+  description?: string
+  /** Optional leading icon. */
+  icon?: JSX.Element
+  /** Extra terms matched against the query, in addition to label + description. */
+  keywords?: string[]
+}
+
+export interface SlashMenuProps {
+  items: SlashItem[]
+  /** Filter text — typically whatever the user typed after '/'. */
+  query: string
+  /** Invoked with the picked item's `value` (click or Enter). */
+  onSelect: (value: string) => void
+  /** Renders nothing when `false`. @default true */
+  open?: boolean
+  class?: string
+}
+
+/**
+ * Floating, keyboard-navigable menu for a "/"-triggered insert/command flow.
+ * Filters `items` against `query` (case-insensitive match over label +
+ * description + keywords), highlights an active row (↑/↓, wraps), and picks
+ * it on Enter or click. Purely presentational: the caller owns the '/'
+ * trigger, `open`, and `query` — this component only renders the filtered
+ * list and reports the pick.
+ *
+ * @example
+ * ```tsx
+ * const [query, setQuery] = createSignal('')
+ * <SlashMenu
+ *   items={[{ value: 'heading', label: 'Heading', icon: <Heading size={16} /> }]}
+ *   query={query()}
+ *   onSelect={(value) => insertBlock(value)}
+ * />
+ * ```
+ */
+export function SlashMenu(props: SlashMenuProps): JSX.Element {
+  const [active, setActive] = createSignal(0)
+  let rootRef: HTMLDivElement | undefined
+
+  const isOpen = () => props.open ?? true
+
+  const results = createMemo<SlashItem[]>(() => {
+    const q = props.query.trim().toLowerCase()
+    if (!q) return props.items
+    return props.items.filter((item) =>
+      `${item.label} ${item.description ?? ''} ${(item.keywords ?? []).join(' ')}`.toLowerCase().includes(q),
+    )
+  })
+
+  // Keep the highlighted row in range whenever the filtered set changes.
+  createEffect(() => {
+    results()
+    setActive(0)
+  })
+
+  // Focus the menu whenever it opens so arrow keys work immediately.
+  createEffect(() => {
+    if (isOpen()) rootRef?.focus()
+  })
+
+  const pick = (item: SlashItem) => props.onSelect(item.value)
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const list = results()
+    if (list.length === 0) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActive((i) => (i + 1) % list.length)
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActive((i) => (i - 1 + list.length) % list.length)
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      const item = list[active()]
+      if (item) pick(item)
+    }
+  }
+
+  return (
+    <Show when={isOpen()}>
+      <div
+        ref={rootRef}
+        role="listbox"
+        tabindex={0}
+        onKeyDown={onKeyDown}
+        class={cn(
+          'card max-h-72 overflow-y-auto rounded-lg border border-border bg-card p-1 shadow-lg outline-none',
+          props.class,
+        )}
+      >
+        <Show
+          when={results().length}
+          fallback={<div class="px-3 py-6 text-center text-sm text-muted-foreground">No matches</div>}
+        >
+          <For each={results()}>
+            {(item, i) => (
+              <div
+                role="option"
+                aria-selected={active() === i()}
+                onMouseEnter={() => setActive(i())}
+                onClick={() => pick(item)}
+                class={cn(
+                  'flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-left transition-colors',
+                  active() === i() ? 'bg-muted' : undefined,
+                )}
+              >
+                <Show when={item.icon}>
+                  <span class="flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground">
+                    {item.icon}
+                  </span>
+                </Show>
+                <div class="min-w-0 flex-1">
+                  <div class="truncate text-sm text-foreground">{item.label}</div>
+                  <Show when={item.description}>
+                    <div class="truncate text-xs text-muted-foreground">{item.description}</div>
+                  </Show>
+                </div>
+              </div>
+            )}
+          </For>
+        </Show>
+      </div>
+    </Show>
+  )
+}