@a4ui/core 0.26.0 → 0.28.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/BalanceCard.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface BalanceCardProps {
+    label: string;
+    amount: number;
+    /** ISO 4217 currency code. Defaults to `'USD'`. */
+    currency?: string;
+    /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+    locale?: string;
+    /** Period-over-period change as a fraction (0.042 = +4.2%). Shows an up/down chip. */
+    delta?: number;
+    /** Small line under the balance (e.g. "Available" / account number). */
+    sub?: JSX.Element;
+    class?: string;
+}
+/**
+ * Balance-first summary card: label, large formatted amount, and an optional
+ * signed-percent delta chip (up/down colored via {@link Badge} tones).
+ *
+ * @example
+ * ```tsx
+ * <BalanceCard label="Total balance" amount={128430.52} delta={0.042} />
+ * ```
+ */
+export declare function BalanceCard(props: BalanceCardProps): 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/KpiBlock.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+export interface KpiBlockProps {
+    label: string;
+    value: string | number;
+    /** Change as a fraction (0.128 = +12.8%). Shows a signed up/down chip. */
+    delta?: number;
+    /** Optional chart node (e.g. a <Sparkline/> from @a4ui/core/charts) shown at the bottom. */
+    chart?: JSX.Element;
+    class?: string;
+}
+/**
+ * Labelled metric tile for dashboards: a large value with a signed
+ * up/down delta chip and an optional chart slot at the bottom. The chart is
+ * consumer-supplied (e.g. a `<Sparkline/>` from `@a4ui/core/charts`) — this
+ * component takes it as a prop rather than importing the charts package.
+ *
+ * @example
+ * ```tsx
+ * <KpiBlock label="Monthly revenue" value="$48,204" delta={0.128} />
+ * ```
+ */
+export declare function KpiBlock(props: KpiBlockProps): JSX.Element;

package/dist/ui/MoneyActionButton.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+/** Money-movement action a {@link MoneyActionButton} represents; picks the leading icon. */
+export type MoneyActionKind = 'send' | 'request' | 'pay' | 'withdraw';
+export interface MoneyActionButtonProps {
+    children: JSX.Element;
+    /** Which money-movement action this triggers. Defaults to `'send'`. */
+    kind?: MoneyActionKind;
+    onClick?: () => void;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Bold, full-height pill CTA reserved for value-moving actions — send,
+ * request, pay, withdraw. Uses the app's single accent (`bg-primary`) so it
+ * stands out from ordinary buttons, with a leading icon chosen by `kind`.
+ *
+ * @example
+ * ```tsx
+ * <MoneyActionButton kind="send" onClick={() => sendMoney()}>Send</MoneyActionButton>
+ * ```
+ */
+export declare function MoneyActionButton(props: MoneyActionButtonProps): JSX.Element;

package/dist/ui/ScrollScene.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+export interface ScrollSceneProps {
+    /** Render-prop receiving a reactive progress accessor (0..1). */
+    children: (progress: () => number) => JSX.Element;
+    class?: string;
+}
+/**
+ * Wraps `children` in an element that tracks its own scroll progress: 0 when
+ * its top edge reaches the bottom of the viewport, 1 when its bottom edge
+ * passes the top of the viewport. Progress is exposed as a reactive accessor
+ * via a render prop, so the caller drives whatever transform/animation it
+ * wants — this component only measures. Scroll position isn't itself motion,
+ * so it keeps measuring under `prefers-reduced-motion`; it just never
+ * animates anything on its own.
+ *
+ * @example
+ * ```tsx
+ * <ScrollScene>
+ *   {(progress) => (
+ *     <div style={{ opacity: progress() }}>Reveal on scroll</div>
+ *   )}
+ * </ScrollScene>
+ * ```
+ */
+export declare function ScrollScene(props: ScrollSceneProps): JSX.Element;

package/dist/ui/SideRail.d.ts

@@ -0,0 +1,39 @@
+import { JSX } from 'solid-js';
+/** A single destination within a {@link SideRail}. */
+export interface SideRailItem {
+    value: string;
+    label: string;
+    icon?: JSX.Element;
+    /** Optional badge (e.g. an unread count) rendered on the item. */
+    badge?: JSX.Element;
+}
+export interface SideRailProps {
+    items: SideRailItem[];
+    value: string;
+    onChange: (value: string) => void;
+    /** Show text labels under icons. When false, labels go in a tooltip. @default true */
+    labels?: boolean;
+    class?: string;
+}
+/**
+ * Narrow vertical column of stacked icon+label destinations — the vertical
+ * counterpart to {@link BottomNavigation} for side placement. The active item
+ * is highlighted with a left indicator bar and `aria-selected`. ArrowUp/
+ * ArrowDown move the selection between items (roving activation, matching the
+ * WAI-ARIA tabs pattern). Renders inline where placed — the consumer is
+ * responsible for positioning (e.g. `fixed inset-y-0 left-0`).
+ *
+ * @example
+ * ```tsx
+ * <SideRail
+ *   value={section()}
+ *   onChange={setSection}
+ *   items={[
+ *     { value: 'home', label: 'Home', icon: <HomeIcon /> },
+ *     { value: 'inbox', label: 'Inbox', icon: <InboxIcon />, badge: <Badge tone="info">3</Badge> },
+ *     { value: 'settings', label: 'Settings', icon: <SettingsIcon /> },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function SideRail(props: SideRailProps): 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/dist/ui/Spaces.d.ts

@@ -0,0 +1,31 @@
+import { JSX } from 'solid-js';
+export interface Space {
+    id: string;
+    label: string;
+    icon?: JSX.Element;
+    content: JSX.Element;
+}
+export interface SpacesProps {
+    spaces: Space[];
+    /** Controlled active space. Uncontrolled (internal signal, defaults to the first space) when omitted. */
+    activeId?: string;
+    onChange?: (id: string) => void;
+    class?: string;
+}
+/**
+ * Swipeable, switchable "context" containers — one space visible at a time,
+ * sliding horizontally between spaces, with a dot/pill indicator rail to jump
+ * directly to one. Drag/touch to swipe (the track follows the pointer and
+ * snaps on release past a threshold), same engine-free approach as Carousel.
+ *
+ * @example
+ * ```tsx
+ * <Spaces
+ *   spaces={[
+ *     { id: 'personal', label: 'Personal', icon: <User class="h-4 w-4" />, content: <PersonalPane /> },
+ *     { id: 'work', label: 'Work', icon: <Briefcase class="h-4 w-4" />, content: <WorkPane /> },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Spaces(props: SpacesProps): JSX.Element;

package/dist/ui/StickyReveal.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface StickyRevealProps {
+    children: JSX.Element;
+    /** Total scroll distance of the section (the taller it is, the longer the pin). CSS length, e.g. '200vh'. @default '180vh' */
+    height?: string;
+    class?: string;
+}
+/**
+ * A pinned hero/feature section: the outer element reserves `height` of
+ * scroll distance while the inner content sticks to the viewport and fades +
+ * rises in as the user scrolls through it. Needs real scroll room above/below
+ * to see the effect — drop it inside a page with enough surrounding content
+ * (or bump `height`) rather than in a short isolated container.
+ *
+ * @example
+ * ```tsx
+ * <StickyReveal height="200vh">
+ *   <Card class="p-10 text-center">
+ *     <h2 class="text-3xl font-bold">Pinned moment</h2>
+ *   </Card>
+ * </StickyReveal>
+ * ```
+ */
+export declare function StickyReveal(props: StickyRevealProps): JSX.Element;

package/dist/ui/TransactionFeed.d.ts

@@ -0,0 +1,40 @@
+import { JSX } from 'solid-js';
+/** A single row in a {@link TransactionFeed}. */
+export interface Transaction {
+    id: string;
+    title: string;
+    subtitle?: string;
+    /** Negative = outgoing, positive (or zero) = incoming. */
+    amount: number;
+    /** ISO or display string. Required to group rows when `groupByDate` is set. */
+    date?: string;
+    icon?: JSX.Element;
+}
+export interface TransactionFeedProps {
+    transactions: Transaction[];
+    /** ISO 4217 currency code. Defaults to `'USD'`. */
+    currency?: string;
+    /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+    locale?: string;
+    /** Group rows under date headers (uses each tx.date). @default false */
+    groupByDate?: boolean;
+    class?: string;
+}
+/**
+ * Dense vertical list of transactions/activity for finance dashboards. Each
+ * row shows an optional leading icon, a title + subtitle, and the amount
+ * formatted as currency — incoming (`amount >= 0`) in a success text tone,
+ * outgoing as `-$X` in the default foreground. Optionally groups rows under
+ * `text-xs uppercase` date headers via `groupByDate`.
+ *
+ * @example
+ * ```tsx
+ * <TransactionFeed
+ *   transactions={[
+ *     { id: '1', title: 'Acme Corp', subtitle: 'Invoice #1042', amount: 1200, date: '2026-07-18' },
+ *     { id: '2', title: 'Cloud Hosting', subtitle: 'Monthly plan', amount: -49.99, date: '2026-07-17' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function TransactionFeed(props: TransactionFeedProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.26.0",
+  "version": "0.28.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.28.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,18 @@ 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'
+
+// Phase 3 — scroll storytelling, finance, spaces/rail.
+export { ScrollScene, type ScrollSceneProps } from './ui/ScrollScene'
+export { StickyReveal, type StickyRevealProps } from './ui/StickyReveal'
+export { BalanceCard, type BalanceCardProps } from './ui/BalanceCard'
+export { TransactionFeed, type TransactionFeedProps, type Transaction } from './ui/TransactionFeed'
+export { KpiBlock, type KpiBlockProps } from './ui/KpiBlock'
+export { MoneyActionButton, type MoneyActionButtonProps, type MoneyActionKind } from './ui/MoneyActionButton'
+export { Spaces, type SpacesProps, type Space } from './ui/Spaces'
+export { SideRail, type SideRailProps, type SideRailItem } from './ui/SideRail'
 
 // 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/BalanceCard.tsx

@@ -0,0 +1,68 @@
+// Balance-first summary card for finance dashboards: a label, a large
+// formatted balance, and an optional up/down delta chip.
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+import { TrendingDown, TrendingUp } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+import { Badge } from './Badge'
+import { Card, CardContent } from './Card'
+
+export interface BalanceCardProps {
+  label: string
+  amount: number
+  /** ISO 4217 currency code. Defaults to `'USD'`. */
+  currency?: string
+  /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+  locale?: string
+  /** Period-over-period change as a fraction (0.042 = +4.2%). Shows an up/down chip. */
+  delta?: number
+  /** Small line under the balance (e.g. "Available" / account number). */
+  sub?: JSX.Element
+  class?: string
+}
+
+/**
+ * Balance-first summary card: label, large formatted amount, and an optional
+ * signed-percent delta chip (up/down colored via {@link Badge} tones).
+ *
+ * @example
+ * ```tsx
+ * <BalanceCard label="Total balance" amount={128430.52} delta={0.042} />
+ * ```
+ */
+export function BalanceCard(props: BalanceCardProps): JSX.Element {
+  const format = () =>
+    new Intl.NumberFormat(props.locale ?? 'en-US', {
+      style: 'currency',
+      currency: props.currency ?? 'USD',
+    }).format(props.amount)
+
+  const isPositive = () => (props.delta ?? 0) >= 0
+
+  const deltaLabel = () => {
+    const pct = Math.abs(props.delta as number) * 100
+    const rounded = Math.round(pct * 10) / 10
+    return `${isPositive() ? '+' : '-'}${rounded}%`
+  }
+
+  return (
+    <Card glass class={cn('inline-block', props.class)}>
+      <CardContent class="flex flex-col gap-2">
+        <span class="text-sm text-muted-foreground">{props.label}</span>
+        <div class="flex items-center gap-3">
+          <span class="text-3xl font-bold text-foreground">{format()}</span>
+          <Show when={props.delta !== undefined}>
+            <Badge tone={isPositive() ? 'success' : 'danger'}>
+              <Show when={isPositive()} fallback={<TrendingDown class="h-3 w-3" aria-hidden="true" />}>
+                <TrendingUp class="h-3 w-3" aria-hidden="true" />
+              </Show>
+              {deltaLabel()}
+            </Badge>
+          </Show>
+        </div>
+        <Show when={props.sub}>{props.sub}</Show>
+      </CardContent>
+    </Card>
+  )
+}