@a4ui/core 0.26.0 → 0.27.0

package/dist/layout/Aurora.d.ts

@@ -9,6 +9,12 @@ export interface AuroraProps {
      * on any `.glow-edge` cards). Reduced-motion aware (off when reduced). @default true
      */
     pointerGlow?: boolean;
+    /**
+     * Backdrop style: `'blobs'` (soft blurred color blobs) or `'mesh'` (a
+     * multi-point gradient mesh). Both are theme-tinted and drift when `animated`.
+     * @default 'blobs'
+     */
+    variant?: 'blobs' | 'mesh';
     class?: string;
 }
 /**

package/dist/lib/createLinkedSelection.d.ts

@@ -0,0 +1,30 @@
+export interface LinkedSelection<Id> {
+    hoveredId: () => Id | undefined;
+    selectedId: () => Id | undefined;
+    setHovered: (id: Id | undefined) => void;
+    setSelected: (id: Id | undefined) => void;
+    isHovered: (id: Id) => boolean;
+    isSelected: (id: Id) => boolean;
+    /** Convenience props to spread onto an element for a given id (onPointerEnter/Leave + onClick). */
+    itemProps: (id: Id) => {
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+        onClick: () => void;
+    };
+}
+/**
+ * Shared hovered/selected state for two synchronized views of the same
+ * collection (a map and a list, a chart and a table, …): hover a list row to
+ * highlight the map pin, and vice versa.
+ *
+ * @example
+ * ```tsx
+ * const selection = createLinkedSelection<string>()
+ * return (
+ *   <For each={items}>
+ *     {(item) => <ListRow class={selection.isSelected(item.id) ? 'active' : ''} {...selection.itemProps(item.id)} />}
+ *   </For>
+ * )
+ * ```
+ */
+export declare function createLinkedSelection<Id = string>(initialSelected?: Id): LinkedSelection<Id>;

package/dist/ui/DataView.d.ts

@@ -0,0 +1,51 @@
+import { JSX } from 'solid-js';
+/** 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;
+}
+/**
+ * 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 declare function DataView<T>(props: DataViewProps<T>): JSX.Element;

package/dist/ui/SlashMenu.d.ts

@@ -0,0 +1,43 @@
+import { JSX } from 'solid-js';
+/** 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 declare function SlashMenu(props: SlashMenuProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/preset.js

@@ -48,6 +48,30 @@ const glass = plugin(({ addComponents, addVariant }) => {
       boxShadow: 'inset 0 1px 2px hsl(var(--shadow) / 0.18)',
     },
 
+    // ---- Refractive glass ----
+    // A heavier glass surface with a specular sheen + bright top edge, so it
+    // reads as light refracting through the material rather than a flat blur.
+    // Sits over the Aurora backdrop like `.card`; use for hero/feature panels.
+    '.glass-refractive': {
+      position: 'relative',
+      overflow: 'hidden',
+      background: 'hsl(var(--card) / 0.5)',
+      backdropFilter: 'blur(14px) saturate(180%)',
+      WebkitBackdropFilter: 'blur(14px) saturate(180%)',
+      border: '1px solid hsl(var(--foreground) / 0.14)',
+      borderRadius: 'var(--radius-xl, 1rem)',
+      boxShadow:
+        '0 1px 2px hsl(var(--shadow) / 0.06), 0 8px 24px hsl(var(--shadow) / 0.14), inset 0 1px 0 hsl(0 0% 100% / 0.18)',
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        inset: '0',
+        borderRadius: 'inherit',
+        background: 'linear-gradient(150deg, hsl(0 0% 100% / 0.16), transparent 42%)',
+        pointerEvents: 'none',
+      },
+    },
+
     // ---- Primary glass surface ----
     '.card': {
       position: 'relative',

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.26.0'
+export const A4UI_VERSION = '0.27.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -36,6 +36,7 @@ export { remeasureAfterLayout } from './lib/virtual'
 export { createOptimistic } from './lib/createOptimistic'
 export { startViewTransition } from './lib/viewTransition'
 export { EASE, SPRING, type EaseName, type SpringName } from './lib/easing'
+export { createLinkedSelection, type LinkedSelection } from './lib/createLinkedSelection'
 
 // UI components (src/ui) — all 18 extracted. See CLAUDE.md.
 export { Accordion, type AccordionItem } from './ui/Accordion'
@@ -164,6 +165,8 @@ export { CodeTabs, type CodeTabsProps, type CodeTab } from './ui/CodeTabs'
 export { PillSearch, type PillSearchProps, type PillField } from './ui/PillSearch'
 export { CategoryStrip, type CategoryStripProps, type CategoryItem } from './ui/CategoryStrip'
 export { MasterDetail, type MasterDetailProps, type MasterDetailItem } from './ui/MasterDetail'
+export { SlashMenu, type SlashMenuProps, type SlashItem } from './ui/SlashMenu'
+export { DataView, type DataViewProps, type DataViewColumn, type DataViewMode } from './ui/DataView'
 
 // Motion components (src/ui) — animation primitives built on the `motion` engine
 // (adapted from motion.dev examples). All tree-shakeable and reduced-motion aware;

package/src/layout/Aurora.tsx

@@ -8,7 +8,7 @@
 // Usage: render it once at the top of your layout and keep the page root's
 // background transparent (don't put `bg-background` on the root) so the Aurora
 // shows through — the component paints the base background itself.
-import { For, onCleanup, onMount, type JSX } from 'solid-js'
+import { For, onCleanup, onMount, Show, type JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
 import { motionReduced } from '../lib/motion'
@@ -24,9 +24,24 @@ export interface AuroraProps {
    * on any `.glow-edge` cards). Reduced-motion aware (off when reduced). @default true
    */
   pointerGlow?: boolean
+  /**
+   * Backdrop style: `'blobs'` (soft blurred color blobs) or `'mesh'` (a
+   * multi-point gradient mesh). Both are theme-tinted and drift when `animated`.
+   * @default 'blobs'
+   */
+  variant?: 'blobs' | 'mesh'
   class?: string
 }
 
+// Mesh variant — several token-tinted radial gradients composited into one
+// backdrop (positions chosen to fill the corners without a hard seam).
+const MESH_STOPS = [
+  { at: '18% 22%', token: '--primary', a: 1 },
+  { at: '82% 26%', token: '--accent', a: 0.9 },
+  { at: '72% 82%', token: '--primary', a: 0.8 },
+  { at: '14% 78%', token: '--accent', a: 0.85 },
+] as const
+
 // Static class strings (scanned by Tailwind). token = which theme color; a =
 // per-blob opacity weight, multiplied by `intensity`.
 const BLOBS = [
@@ -53,6 +68,11 @@ const BLOBS = [
  */
 export function Aurora(props: AuroraProps): JSX.Element {
   const intensity = (): number => props.intensity ?? 0.45
+  const meshBg = (): string =>
+    MESH_STOPS.map(
+      (s) =>
+        `radial-gradient(45% 45% at ${s.at}, hsl(var(${s.token}) / ${(intensity() * s.a).toFixed(2)}), transparent 70%)`,
+    ).join(', ')
   let root: HTMLDivElement | undefined
 
   onMount(() => {
@@ -69,16 +89,26 @@ export function Aurora(props: AuroraProps): JSX.Element {
       aria-hidden="true"
       class={cn('pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-background', props.class)}
     >
-      <For each={BLOBS}>
-        {(b) => (
-          <div
-            class={cn('absolute rounded-full blur-3xl', b.pos, b.size, props.animated && 'aurora-drift')}
-            style={{
-              background: `radial-gradient(circle, hsl(var(${b.token}) / ${(intensity() * b.a).toFixed(2)}), transparent 70%)`,
-            }}
-          />
-        )}
-      </For>
+      <Show
+        when={props.variant === 'mesh'}
+        fallback={
+          <For each={BLOBS}>
+            {(b) => (
+              <div
+                class={cn('absolute rounded-full blur-3xl', b.pos, b.size, props.animated && 'aurora-drift')}
+                style={{
+                  background: `radial-gradient(circle, hsl(var(${b.token}) / ${(intensity() * b.a).toFixed(2)}), transparent 70%)`,
+                }}
+              />
+            )}
+          </For>
+        }
+      >
+        <div
+          class={cn('absolute -inset-[15%] blur-2xl', props.animated && 'aurora-drift')}
+          style={{ background: meshBg() }}
+        />
+      </Show>
       {/* Soft glow that follows the cursor across the backdrop (positioned by
           bindPointerFx via left/top on pointermove). */}
       <div

package/src/lib/createLinkedSelection.ts

@@ -0,0 +1,60 @@
+// Shared hover/selection state for two views of the same collection (e.g. a
+// map and a list) so interacting with one highlights the other.
+import { createSignal } from 'solid-js'
+
+export interface LinkedSelection<Id> {
+  hoveredId: () => Id | undefined
+  selectedId: () => Id | undefined
+  setHovered: (id: Id | undefined) => void
+  setSelected: (id: Id | undefined) => void
+  isHovered: (id: Id) => boolean
+  isSelected: (id: Id) => boolean
+  /** Convenience props to spread onto an element for a given id (onPointerEnter/Leave + onClick). */
+  itemProps: (id: Id) => { onPointerEnter: () => void; onPointerLeave: () => void; onClick: () => void }
+}
+
+/**
+ * Shared hovered/selected state for two synchronized views of the same
+ * collection (a map and a list, a chart and a table, …): hover a list row to
+ * highlight the map pin, and vice versa.
+ *
+ * @example
+ * ```tsx
+ * const selection = createLinkedSelection<string>()
+ * return (
+ *   <For each={items}>
+ *     {(item) => <ListRow class={selection.isSelected(item.id) ? 'active' : ''} {...selection.itemProps(item.id)} />}
+ *   </For>
+ * )
+ * ```
+ */
+export function createLinkedSelection<Id = string>(initialSelected?: Id): LinkedSelection<Id> {
+  const [hoveredId, setHoveredId] = createSignal<Id | undefined>(undefined)
+  const [selectedId, setSelectedId] = createSignal<Id | undefined>(initialSelected)
+
+  function setHovered(id: Id | undefined) {
+    setHoveredId(() => id)
+  }
+
+  function setSelected(id: Id | undefined) {
+    setSelectedId(() => id)
+  }
+
+  function isHovered(id: Id): boolean {
+    return hoveredId() === id
+  }
+
+  function isSelected(id: Id): boolean {
+    return selectedId() === id
+  }
+
+  function itemProps(id: Id) {
+    return {
+      onPointerEnter: () => setHovered(id),
+      onPointerLeave: () => setHovered(undefined),
+      onClick: () => setSelected(id),
+    }
+  }
+
+  return { hoveredId, selectedId, setHovered, setSelected, isHovered, isSelected, itemProps }
+}

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