@a4ui/core 0.25.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/lib/easing.d.ts

@@ -0,0 +1,42 @@
+/** Named cubic-bezier easing curves, as CSS `transition-timing-function` strings. */
+export declare const EASE: {
+    /** Gentle ease-out — the sensible default for entrances and most UI motion. */
+    readonly out: "cubic-bezier(0.22, 1, 0.36, 1)";
+    /** Balanced ease-in-out for reversible state toggles. */
+    readonly inOut: "cubic-bezier(0.65, 0, 0.35, 1)";
+    /** Emphasized, decisive curve (fast start, long settle) for hero moments. */
+    readonly emphasized: "cubic-bezier(0.2, 0, 0, 1)";
+    /** No easing. */
+    readonly linear: "linear";
+};
+/** A key of {@link EASE}. */
+export type EaseName = keyof typeof EASE;
+/**
+ * Spring option presets for the `spring` helper (motion.dev), re-exported from
+ * `@a4ui/core`. Pass one straight through:
+ *
+ * @example
+ * ```ts
+ * import { animate, spring, SPRING } from '@a4ui/core'
+ * animate(el, { y: 0 }, { type: spring, ...SPRING.snappy })
+ * ```
+ */
+export declare const SPRING: {
+    /** Soft, natural settle — good for panels and layout shifts. */
+    readonly gentle: {
+        readonly stiffness: 170;
+        readonly damping: 26;
+    };
+    /** Quick and tight, minimal overshoot — good for toggles and small controls. */
+    readonly snappy: {
+        readonly stiffness: 320;
+        readonly damping: 30;
+    };
+    /** Playful overshoot — good for playful accents. Use sparingly. */
+    readonly bouncy: {
+        readonly stiffness: 420;
+        readonly damping: 18;
+    };
+};
+/** A key of {@link SPRING}. */
+export type SpringName = keyof typeof SPRING;

package/dist/ui/CategoryStrip.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+/** A single selectable category: value, label, and optional leading icon. */
+export interface CategoryItem {
+    value: string;
+    label: string;
+    icon?: JSX.Element;
+}
+export interface CategoryStripProps {
+    items: CategoryItem[];
+    value: string;
+    onChange: (value: string) => void;
+    class?: string;
+}
+/**
+ * Horizontally-scrollable row of icon-over-label category tabs with a
+ * bottom-underline indicator on the active item. Left/Right arrow keys move
+ * the selection between items.
+ *
+ * @example
+ * ```tsx
+ * <CategoryStrip items={categories} value={category()} onChange={setCategory} />
+ * ```
+ */
+export declare function CategoryStrip(props: CategoryStripProps): JSX.Element;

package/dist/ui/CodeTabs.d.ts

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

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/MasterDetail.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'solid-js';
+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 declare function MasterDetail(props: MasterDetailProps): JSX.Element;

package/dist/ui/PillSearch.d.ts

@@ -0,0 +1,38 @@
+import { JSX } from 'solid-js';
+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 declare function PillSearch(props: PillSearchProps): 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.25.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

@@ -28,6 +28,50 @@ const glass = plugin(({ addComponents, addVariant }) => {
   // and a darker one on light to keep WCAG AA in both.
   addVariant('light', "[data-theme='light'] &")
   addComponents({
+    // ---- Elevation scale ----
+    // A layered depth system: `.elevation-1..4` for raised surfaces (rising
+    // shadow), `.pressed` for an inset/recessed look. Uses the same `--shadow`
+    // token as the glass surfaces, so it recolors per theme.
+    '.elevation-1': {
+      boxShadow: '0 1px 2px hsl(var(--shadow) / 0.06), 0 1px 3px hsl(var(--shadow) / 0.1)',
+    },
+    '.elevation-2': {
+      boxShadow: '0 2px 4px hsl(var(--shadow) / 0.06), 0 4px 12px hsl(var(--shadow) / 0.12)',
+    },
+    '.elevation-3': {
+      boxShadow: '0 2px 6px hsl(var(--shadow) / 0.08), 0 8px 24px hsl(var(--shadow) / 0.14)',
+    },
+    '.elevation-4': {
+      boxShadow: '0 4px 12px hsl(var(--shadow) / 0.1), 0 16px 40px hsl(var(--shadow) / 0.18)',
+    },
+    '.pressed': {
+      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.25.0'
+export const A4UI_VERSION = '0.27.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -35,6 +35,8 @@ export { useMediaQuery } from './lib/media'
 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'
@@ -158,6 +160,14 @@ export { FloatingToolbar, type FloatingToolbarProps } from './ui/FloatingToolbar
 export { PageTransition, type PageTransitionProps } from './ui/PageTransition'
 export { InlineSelect, type InlineSelectProps, type InlineSelectOption } from './ui/InlineSelect'
 
+// Phase 2 — code, search, navigation, master-detail.
+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;
 // `motion` is external, so importing one of these is the only thing that pulls it.

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/lib/easing.ts

@@ -0,0 +1,43 @@
+// Shared motion vocabulary — named easing curves and spring presets, so every
+// component transition can pull from one consistent set instead of hand-rolling
+// cubic-beziers. `EASE` values are plain CSS `transition-timing-function`
+// strings (drop into an inline style, a `transition-timing-function`, or a
+// Tailwind `ease-[…]` arbitrary value). `SPRING` values are option objects for
+// the `spring` helper re-exported from `@a4ui/core` (motion.dev).
+
+/** Named cubic-bezier easing curves, as CSS `transition-timing-function` strings. */
+export const EASE = {
+  /** Gentle ease-out — the sensible default for entrances and most UI motion. */
+  out: 'cubic-bezier(0.22, 1, 0.36, 1)',
+  /** Balanced ease-in-out for reversible state toggles. */
+  inOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
+  /** Emphasized, decisive curve (fast start, long settle) for hero moments. */
+  emphasized: 'cubic-bezier(0.2, 0, 0, 1)',
+  /** No easing. */
+  linear: 'linear',
+} as const
+
+/** A key of {@link EASE}. */
+export type EaseName = keyof typeof EASE
+
+/**
+ * Spring option presets for the `spring` helper (motion.dev), re-exported from
+ * `@a4ui/core`. Pass one straight through:
+ *
+ * @example
+ * ```ts
+ * import { animate, spring, SPRING } from '@a4ui/core'
+ * animate(el, { y: 0 }, { type: spring, ...SPRING.snappy })
+ * ```
+ */
+export const SPRING = {
+  /** Soft, natural settle — good for panels and layout shifts. */
+  gentle: { stiffness: 170, damping: 26 },
+  /** Quick and tight, minimal overshoot — good for toggles and small controls. */
+  snappy: { stiffness: 320, damping: 30 },
+  /** Playful overshoot — good for playful accents. Use sparingly. */
+  bouncy: { stiffness: 420, damping: 18 },
+} as const
+
+/** A key of {@link SPRING}. */
+export type SpringName = keyof typeof SPRING

package/src/ui/CategoryStrip.tsx

@@ -0,0 +1,80 @@
+// Horizontally-scrollable strip of icon+label category filters, with an
+// active-underline indicator — e.g. a storefront category nav (All, Fresh,
+// Bakery, Dairy, …). Scrollbar is hidden; Left/Right arrows move selection.
+import type { JSX } from 'solid-js'
+import { For } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single selectable category: value, label, and optional leading icon. */
+export interface CategoryItem {
+  value: string
+  label: string
+  icon?: JSX.Element
+}
+
+export interface CategoryStripProps {
+  items: CategoryItem[]
+  value: string
+  onChange: (value: string) => void
+  class?: string
+}
+
+/**
+ * Horizontally-scrollable row of icon-over-label category tabs with a
+ * bottom-underline indicator on the active item. Left/Right arrow keys move
+ * the selection between items.
+ *
+ * @example
+ * ```tsx
+ * <CategoryStrip items={categories} value={category()} onChange={setCategory} />
+ * ```
+ */
+export function CategoryStrip(props: CategoryStripProps): JSX.Element {
+  const activeIndex = () => props.items.findIndex((item) => item.value === props.value)
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+    event.preventDefault()
+    const count = props.items.length
+    if (count === 0) return
+    const current = activeIndex()
+    const delta = event.key === 'ArrowRight' ? 1 : -1
+    const next = ((current === -1 ? 0 : current) + delta + count) % count
+    props.onChange(props.items[next].value)
+  }
+
+  return (
+    <div
+      role="tablist"
+      class={cn(
+        'flex gap-6 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+        props.class,
+      )}
+      onKeyDown={onKeyDown}
+    >
+      <For each={props.items}>
+        {(item) => {
+          const isActive = () => item.value === props.value
+          return (
+            <button
+              type="button"
+              role="tab"
+              aria-selected={isActive()}
+              class={cn(
+                'flex shrink-0 flex-col items-center gap-1 border-b-2 px-1 pb-2 text-xs font-medium transition-colors',
+                isActive()
+                  ? 'border-primary text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground',
+              )}
+              onClick={() => props.onChange(item.value)}
+            >
+              {item.icon}
+              <span>{item.label}</span>
+            </button>
+          )
+        }}
+      </For>
+    </div>
+  )
+}