@timbal-ai/timbal-react 1.3.0 → 1.5.0

package/dist/{chunk-YCXN67SD.esm.js → chunk-SZDYIRMB.esm.js}

@@ -15,27 +15,36 @@ import {
   studioIntegrationCardClass,
   studioTopbarPillHeightClass,
   toNum
-} from "./chunk-GQBYZRD7.esm.js";
+} from "./chunk-IGHBLJV3.esm.js";
 import {
   Checkbox,
+  CopyButton,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   Skeleton
-} from "./chunk-UCGVL7ZY.esm.js";
+} from "./chunk-5ECRZ5O7.esm.js";
 import {
   PillSegmentedTabs
-} from "./chunk-VXMM2HX7.esm.js";
+} from "./chunk-ZNYAETFD.esm.js";
 import {
+  Avatar,
+  AvatarFallback,
   Button,
   Dialog,
   DialogContent,
   DialogTitle,
+  TIMBAL_V2_ELEVATED_GRADIENT,
   TIMBAL_V2_ELEVATED_SURFACE,
   TIMBAL_V2_LOGO_TILE,
   TIMBAL_V2_SWITCH_THUMB,
   TIMBAL_V2_SWITCH_TRACK_OFF,
   TimbalV2Button,
-  cn,
   controlClass
-} from "./chunk-QU7ET55D.esm.js";
+} from "./chunk-AZL2WANO.esm.js";
+import {
+  cn
+} from "./chunk-EDEKQYSU.esm.js";
 
 // src/design/ui-vocabulary.ts
 var SEMANTIC_COLOR_TOKENS = [
@@ -191,6 +200,13 @@ var HOUSE_RULES = [
     rule: "Don't nest a bordered card inside another bordered card. Group with spacing or a Section instead.",
     why: "Card-in-card doubles borders and shadows for no information gain."
   },
+  {
+    id: "no-table-in-card",
+    rule: "Never wrap a DataTable or table inside a Card, SurfaceCard, or ArtifactCard.",
+    why: "The DataTable is already designed to sit flat with its own borders and shadows. Wrapping it inside a card adds redundant borders, margins, and shadows, which looks like slop.",
+    slop: "<Card><DataTable columns={columns} rows={rows} getRowKey={getRowKey} /></Card>",
+    good: "<DataTable columns={columns} rows={rows} getRowKey={getRowKey} />"
+  },
   {
     id: "no-row-dividers",
     rule: "Don't put a divider between every list row. Use spacing or zebra striping.",
@@ -212,6 +228,27 @@ var HOUSE_RULES = [
     why: "Hand-rolled controls drift from the shared control-surface skin and look foreign next to kit controls.",
     slop: `<button className="rounded-lg border border-input bg-transparent px-3 h-9">`,
     good: `<SelectTrigger><SelectValue /></SelectTrigger>`
+  },
+  {
+    id: "no-title-repetition",
+    rule: "Never repeat the page title/description inside a Section, Card, or Table header.",
+    why: "If the Page already has a title, repeating it in the first child section or table is redundant and wastes vertical space.",
+    slop: `<Page title="Orders"><Section title="Orders"><DataTable ... /></Section></Page>`,
+    good: `<Page title="Orders"><DataTable ... /></Page>`
+  },
+  {
+    id: "no-chat-wrapping",
+    rule: "Never wrap TimbalChat or AppChatPanel in a Card, Section, or custom bordered/padded container, and never add custom heading/status blocks above it.",
+    why: "The chat component is a full-bleed, full-height surface that handles its own layout, welcome screen, and suggestions. Wrapping it or hand-rolling headers/online badges inside the page content is redundant and wastes layout space.",
+    slop: `<Page title="Assistant"><Card><div className="flex justify-between"><h3>TIBA Concierge</h3><span>Online</span></div><TimbalChat /></Card></Page>`,
+    good: `<Page fill><TimbalChat workforceId="..." welcome={{ heading: "Hola, soy el Concierge de TIBA", subheading: "Preg\xFAntame sobre..." }} /></Page>`
+  },
+  {
+    id: "no-colored-hover",
+    rule: "Interactive cards and list items must use neutral hover states \u2014 never hard-code colored backgrounds or borders on hover.",
+    why: "Colored hover highlights (like hover:bg-primary/5 or hover:bg-emerald-500/5) look dirty and break the neutral chrome aesthetic. Use the kit's clean, neutral hover states, or AlertCard, or TIMBAL_V2_SECONDARY_CHROME hover layers.",
+    slop: `<Card className="hover:bg-emerald-500/10 hover:border-emerald-500/30">`,
+    good: `<AlertCard onClick={handleClick}>`
   }
 ];
 
@@ -239,6 +276,45 @@ You are **not** required to copy any example layout, page title, section order,
 
 When in doubt: compose from the **component menu** + **guidelines**, then adapt creatively to the request.
 
+### Layout archetypes \u2014 pick the shape that fits (don't default to one)
+
+The most common failure is shipping the **same** layout every time: sidebar + topbar + \`Page\` + one \`MetricRow\` + one full-width \`DataTable\`. That is *one* archetype, not *the* layout. Choose deliberately \u2014 different domains want different shapes, and varying the shell/page composition is encouraged.
+
+| Archetype | When | Compose |
+|-----------|------|---------|
+| **Sidebar dashboard** | Multi-section product (CRM, billing, ops) with nav | \`StudioSidebar\` in \`AppShell.sidebar\` + \`Page\` \u2192 \`Section\` |
+| **Focused / no-chrome** | A single tool or one-screen utility | \`AppShell\` (no sidebar) + \`Page width="narrow"\` / \`"prose"\` (optionally with a custom topbar) for a centered focused column |
+| **Bento overview** | Home / at-a-glance dashboards | \`Page\` + an **asymmetric grid** of \`SurfaceCard\` / \`ChartPanel\` / \`StatTile\` spanning different widths (not a uniform row + table) |
+| **Split master\u2013detail** | Inbox, triage queue, record browser, log explorer | \`AppShell contentFill\` + \`Page fill\` + a two-column flex row, each pane \`min-h-0 overflow-y-auto\` |
+| **Full-page chat / canvas** | Chat-first app, editor, map, single full-bleed surface | \`AppShell contentFill\` + headerless \`Page fill\` + a \`min-h-0 flex-1\` child (e.g. \`TimbalChat\`) |
+| **Copilot overlay** | A data app that also wants an assistant | any of the above + \`AppShell chat={<AppChatPanel />}\` (floating, never a second column) |
+| **Section-switcher** | One page, several views | \`SubNav\` / \`PillSegmentedTabs\` (\`trackVariant="flush"\`) switching panels with state/router |
+
+Mix them: vary the grid columns, density, header placement (\`Page\` actions vs. a global topbar), and whether there's a sidebar at all. Two dashboards for two domains should not look identical.
+
+### Full-height pages (chat, canvas, split views)
+
+The content region is a **padded scroll area** by default \u2014 great for stacked \`Page\` \u2192 \`Section\` content, wrong for a surface that must fill the viewport. For full-bleed pages:
+
+- Pass **\`contentFill\`** to \`AppShell\` \u2192 the content region becomes a bounded, non-scrolling flex column (clipped, no bottom padding).
+- Pass **\`fill\`** to \`Page\` \u2192 the page becomes a \`min-h-0 flex-1\` flex column.
+- Give the filling child **\`min-h-0 flex-1\`** (or \`h-full\`) so its own scroll/footer resolves \u2014 e.g. \`<TimbalChat className="min-h-0 flex-1" />\`, or a two-pane row where each pane is \`min-h-0 overflow-y-auto\`.
+
+\`\`\`tsx
+<AppShell contentFill topbar={<div className="flex justify-end p-4"><ModeToggle /></div>}>
+  <Page fill>                                  {/* headerless: omit title */}
+    <TimbalChat workforceId="\u2026" className="min-h-0 flex-1" />
+  </Page>
+</AppShell>
+\`\`\`
+
+**Don't** size full-height content with \`h-[calc(100dvh-\u2026)]\` (guesses chrome height \u2192 spurious scrollbar) or \`min-h-[\u2026]\` (free-growing floor \u2192 a pinned footer like the chat composer rides down on scroll). Let \`contentFill\` + \`fill\` provide the bounded height. \`Page\` with no \`title\` renders **no header** \u2014 you don't need to abandon \`Page\` to drop a heading.
+
+**Full-page Assistant Guidelines (Hardened Layout):**
+When creating a full-page assistant/chat page, let the chat component own the layout and welcome state completely.
+- **Never wrap** \`<TimbalChat>\` or \`<AppChatPanel>\` inside standard card or section elements (like \`<Card>\`, \`<Section>\`, or custom bordered/padded panels). Wrapping degrades the viewport height calculations and wastes valuable layout estate.
+- **Never add custom headings, titles, descriptions, or status badges** (e.g., "Asistente Virtual", "Online", or subtitle text blocks) inside the page. The assistant page context is already implicit. If you need a customized title or greeting, pass it through the \`welcome\` prop config: e.g., \`<TimbalChat welcome={{ heading: "Hola, soy el Concierge de TIBA", subheading: "Preg\xFAntame sobre..." }} />\`.
+
 ### Module layout (source folders)
 
 Presentational groups \u2014 import from the package root, not from these paths:
@@ -248,11 +324,11 @@ Presentational groups \u2014 import from the package root, not from these paths:
 | \`data/\` | \`MetricRow\`, \`MetricChartCard\`, \`MetricTile\`, \`DataTable\`, \`FilterBar\`, \`FilterField\`, \`ChartPanel\` |
 | \`integrations/\` | \`IntegrationCard\`, \`ConnectionRow\`, \`ConnectionRowList\`, \`IntegrationsEmptyState\`, \`PlanBadge\` |
 | \`settings/\` | \`SettingsSection\`, \`FieldRow\`, \`DangerZone\`, \`FloatingUnsavedChangesBar\` |
-| \`surfaces/\` | \`StatTile\`, \`InfoCard\`, \`ResourceCard\`, \`DescriptionList\`, \`ExpandableSection\`, \`StatusDot\`, \`StatusBadge\`, \`EmptyState\` |
-| \`layout/\` | \`AppShell\`, \`Page\`, \`Section\` |
+| \`surfaces/\` | \`StatTile\`, \`InfoCard\`, \`AlertCard\`, \`CatalogCard\`, \`ResourceCard\`, \`DescriptionList\`, \`ExpandableSection\`, \`StatusDot\`, \`StatusBadge\`, \`EmptyState\` |
+| \`layout/\` | \`AppShell\`, \`Page\` (auto-stacks children; \`width\` ladder), \`Section\`, \`Stack\` |
 | \`charts\` (re-exported) | \`LineAreaChart\`, \`PieChart\`, \`RadialChart\`, \`RadarChart\`, \`Sparkline\`, \`CHART_PALETTE\` |
 
-Also re-exported: \`Button\`, \`TimbalChat\`, \`ChartArtifactView\`, \`APP_KIT_AGENT_INSTRUCTIONS\`.
+Also re-exported from \`/app\`: \`Button\`, \`Avatar\` / \`AvatarImage\` / \`AvatarFallback\`, \`Banner\`, \`Timeline\`, \`Kanban\` (drag-and-drop board), \`TimbalChat\`, \`ChartArtifactView\`, \`APP_KIT_AGENT_INSTRUCTIONS\`. Other UI primitives used in block recipes (\`Card\`, \`Input\`, \`Label\`, \`Sheet\`, \`Separator\`, \`AlertDialog\`, \`Badge\`, \`Select\`, \u2026) import from \`@timbal-ai/timbal-react/ui\` or the package root \u2014 **not** from \`/app\`.
 
 Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\`, \`themeToCss\`, \`applyTimbalTheme\`, \`TIMBAL_THEME_PRESETS\`, \`applyThemePreset\`, \`TimbalThemeStyle\`, \`THEME_AGENT_INSTRUCTIONS\`. Theming is **configured by the developer**, not surfaced as an end-user theme picker.
 
@@ -264,9 +340,12 @@ Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\
 | **Chat panel** | \`AppChatPanel\` only; \`Thread\` uses \`variant="panel"\` internally. Dismiss with **X**; trigger is a **text-only** pill (e.g. "Assistant") \u2014 **no** MessageSquare or chat icons on the shell trigger. |
 | **Context** | Do not show raw JSON context in the panel header; keep context in \`AppCopilotProvider\` only. |
 | **Theming** | Use semantic Tailwind tokens (\`bg-background\`, \`text-foreground\`, \`border-border\`, \`bg-elevated-from\`, etc.) from the host app's \`styles.css\`. To rebrand, **never hand-author OKLCH** \u2014 call \`createTimbalTheme({ brand })\` + \`themeToCss\`/\`applyTimbalTheme\`, or apply a catalog preset (\`TIMBAL_THEME_PRESETS\` / \`applyThemePreset\`). Apply the theme **programmatically** \u2014 do **not** add an end-user theme selector to generated apps. See \`THEME_AGENT_INSTRUCTIONS\`. |
-| **Layout chrome** | \`Page\` \u2192 \`Section\` for main content hierarchy. Default to **no global topbar** \u2014 put account/theme/global actions in the \`Page\` \`actions\` slot (or the sidebar). Add \`AppShellTopbar\` only when a full-width global bar is explicitly requested. |
+| **Layout chrome** | \`Page\` \u2192 \`Section\` for main content hierarchy. Default to **no global topbar** \u2014 put account/theme/global actions in the \`Page\` \`actions\` slot (or the sidebar). Add a topbar only when a full-width global bar is explicitly requested. |
+| **Spacing / gaps** | \`Page\` **auto-stacks its direct children with a vertical gap** \u2014 drop blocks straight in (e.g. \`Page\` \u2192 \`FilterBar\` + \`DataTable\`, or \`MetricRow\` + \`ChartPanel\`) and they breathe; do **not** wrap every block in an extra \`<div>\` (that collapses the gap). For ad-hoc clusters inside a card/row use \`Stack\` (\`gap\`, \`direction\`) instead of bare flex with no gap. Grids still need their own \`gap-*\`. |
+| **Width** | \`Page\` defaults to a wide centered column. For focused / reading / form pages pass \`width\` (\`default\`, \`centered\`, \`narrow\`, \`prose\`) instead of always running full-bleed \u2014 not everything needs the full width. \`width="full"\` opts into edge-to-edge. For full-height pages that should stay centered use \`fill\` + \`fillPadded\`. |
 | **Density** | Set \`density="compact"\` on \`Page\` for tighter dashboards (full-width column, smaller section gaps, card padding, metric tiles, default chart height 220). Default is \`"default"\` (platform spacing). Wrap custom layouts with \`AppDensityProvider\` when not using \`Page\`. Per-section override: \`Section density="compact"\`. Do **not** hand-tune five layers of \`className\` padding when density covers the need. |
 | **Data** | Prefer \`DataTable\` with typed \`columns\` / \`rows\` / \`getRowKey\`; use \`ChartPanel\` with a \`ChartArtifact\` for charts (set \`chartType\` + options \u2014 see the chart catalog). Chart colors come from the theme \`--chart-1..6\` tokens; pass \`series[].color\` / \`colors\` only to override, never raw hex on every series. |
+| **Boards** | For status/triage workflows (pipelines, sprint boards, review queues) use \`Kanban\` \u2014 pass \`columns\` (each with \`cards\`) + \`renderCard\`; handle \`onColumnsChange\`/\`onMove\` to persist. It's drag-and-drop **and** keyboard accessible; don't hand-roll columns of cards. |
 | **Modals** | Use \`AppConfirmDialog\` for destructive/export confirmations. |
 | **Metrics** | Overview KPIs \u2192 \`MetricRow\` or \`MetricChartCard\` (not four separate heavy cards). Values use **normal** font weight, not bold. |
 | **Integrations** | Catalog \u2192 \`IntegrationCard\` grid; connected list \u2192 \`ConnectionRow\` inside \`ConnectionRowList\`. Footer CTAs: \`Button variant="secondary"\`. |
@@ -297,17 +376,16 @@ The cause of slop is dropping **below** the curated block layer into raw primiti
 
 | Component | Use for |
 |-----------|---------|
-| \`AppShell\` | Shell: optional \`sidebar\`, \`topbar\`, main \`children\`, optional floating \`chat\`. Props: \`chatTriggerLabel\`, \`chatCollapsible\`, \`chatWidth\`, \`chatHeight\`, controlled \`chatOpen\`. |
-| \`AppShellTopbar\` | Full-width top bar: \`start\`, \`actions\` slots. |
+| \`AppShell\` | Shell: optional \`sidebar\`, \`topbar\`, main \`children\`, optional floating \`chat\`. Props: \`chatTriggerLabel\`, \`chatCollapsible\`, \`chatWidth\`, \`chatHeight\`, controlled \`chatOpen\`, **\`contentFill\`** (bounded non-scrolling content region for full-bleed pages \u2014 chat/canvas/split view). |
 | \`AppCopilotProvider\` | React context for copilot-aware tools (page, filters, selection, etc.). |
 | \`AppChatPanel\` | Floating thread: \`workforceId\`, \`welcome\`, \`debug\`. |
 | \`useAppShellChat\` | Custom open/close trigger when \`hideChatTrigger\` on shell. |
-| \`Page\` | Page title, description, \`breadcrumbs\`, \`actions\`, \`density\` (\`"default"\` | \`"compact"\`), children. |
+| \`Page\` | Page title, description, \`breadcrumbs\`, \`actions\`, \`density\` (\`"default"\` | \`"compact"\`), children. **\`title\` is optional** \u2014 omit it for a headerless page (no \`<h1>\`). **\`fill\`** makes it a \`min-h-0 flex-1\` column for full-height content (pair with \`AppShell contentFill\`). |
 | \`Section\` | Titled block inside a page. Optional \`density\` overrides inherited page density. |
 | \`SubNav\` | **Section switcher** (Overview / Reports pill bar): \`items\`, \`activeId\`, \`onChange\`. Never use Radix/shadcn \`Tabs\` \u2014 it is not in this package. Switch panels with state or the router. |
 | **Menus** | **Select** = short list, no search. **Combobox** = searchable (same trigger as Select). **Command** only inside \`PopoverContent variant="list"\` or Combobox \u2014 never padded default Popover. See \`examples/app-kit/src/recipes/primitives-catalog.ts\`. |
 | \`Breadcrumbs\` | Trail: \`items: [{ label, href? }]\`. |
-| \`Button\` | Actions \u2014 \`variant="secondary"\` for catalog/secondary CTAs; \`variant="default"\` for primary. |
+| \`Button\` | Actions. Untitled UI-style \`color\` alias (\`primary\` \\| \`secondary\` \\| \`tertiary\` \\| \`link\` \\| \`primary-destructive\` \\| \`secondary-destructive\`) + \`iconLeading\` / \`iconTrailing\`; or legacy \`variant="secondary"\` (catalog CTAs) / \`variant="default"\` (primary). \`color="primary-destructive"\` is the solid red delete CTA. |
 | \`StatTile\` | Single KPI in its own card (grid of scattered stats). Prefer \`MetricRow\` for a unified overview strip. |
 | \`StatusBadge\` | Status pill: \`tone\` (\`default\`\\|\`primary\`\\|\`success\`\\|\`warn\`\\|\`danger\`\\|\`muted\`), children. Use \`danger\` for critical/error severity. |
 | \`FilterBar\` | Horizontal filter row \u2014 bottom-aligns controls. Mix \`SearchInput\` with labeled \`FilterField\` + \`Select\` (or \`Field\` + \`Select\`); labels sit above, control baselines match. |
@@ -316,7 +394,7 @@ The cause of slop is dropping **below** the curated block layer into raw primiti
 | \`DataTable\` | Sortable table: \`columns\`, \`rows\`, \`getRowKey\`, optional \`sort\` / \`onSortChange\`, \`emptyTitle\`, \`showRowCount\`, \`caption\`, \`truncate: true\` on columns with long text. **Scales:** \`pageSize\` (built-in client pager), \`selectable\` + \`onSelectionChange\` (checkbox column for bulk actions), \`loading\` (skeleton rows). \`onRowClick\` for row \u2192 detail (open a \`Sheet\`). |
 | \`Avatar\` / \`AvatarFallback\` | User initials: \`variant="secondary"\` (or \`primary\` / \`chart\` alias) on **both** \`Avatar\` and \`AvatarFallback\` \u2014 same chrome as catalog **Action** buttons (\`Button variant="secondary"\`: elevated gradient, \`border-border\`, \`shadow-card\`, \`text-foreground\`). Never dark primary CTA fill or raw \`bg-blue-600\`. |
 | \`ChartPanel\` | Same shell as \`MetricChartCard\`: title row (\`px-4 pt-4\`), flush plot (\`pt-2\` only) with **no axis ticks** \u2014 hover tooltips show category + value. Pass \`title\` + \`artifact\` (omit \`artifact.title\` to avoid duplicates) or \`children\`. \`loading\` renders a plot-height skeleton. Default plot height follows page \`density\` (300 default, 220 compact); pass \`height\` to override. |
-| \`FieldInput\`, \`FieldTextarea\`, \`FieldSelect\`, \`FieldSwitch\` | Settings-style forms with labels and hints. |
+| \`FieldInput\`, \`FieldTextarea\`, \`FieldSelect\`, \`FieldSwitch\` | Settings-style forms with labels and hints. **\`label\` is required** on every \`Field*\` component; for a label-less filter control use \`FilterField\` (optional label) or \`SearchInput\`. |
 | \`FormSection\` | Grouped form block. |
 | \`AppConfirmDialog\` | Confirm/cancel modal: \`open\`, \`onOpenChange\`, \`title\`, \`description\`, \`onConfirm\`. |
 | \`SurfaceCard\`, \`EmptyState\` | Generic surfaces when needed. |
@@ -362,9 +440,13 @@ Charts run on **recharts** with shadcn \`ChartContainer\` / \`ChartTooltipConten
 | Component | Use for |
 |-----------|---------|
 | \`InfoCard\` | Soft callout: \`icon\`, \`title\`, body, \`action\`, \`tone\` (\`info\`/\`success\`/\`warn\`/\`danger\`). |
+| \`AlertCard\` | Actionable / AI-generated alert card with integrated status tags, clear titles, descriptive bodies, and automated action footers. Supports: \`title\`, \`description?\`, \`category?\`, \`categoryTone?\`, \`status?\`, \`statusTone?\`, \`action?\` (action description text), \`trailing?\` (custom element), and \`onClick?\`. Renders with a beautiful neutral hover state, avoiding loud/colored hover background effects. |
+| \`CatalogCard\` | Highly sophisticated marketplace/routing catalog tile (models, datasets, tools). Supports: \`title\`, \`subtitle?\`, \`logo?\` (e.g. brand logo), \`badge?\` (e.g. model type badge), \`description?\`, \`tags?\` (metadata array), \`href?\` (title link), \`footerLinks?\` (bottom-left links), \`copyValue?\` (copy ID button), \`actions?\`, and \`onClick?\` (neutral-hover interactive state). |
 | \`DescriptionList\` | Read-only key/value metadata: \`items: [{ label, value }]\`, optional \`stacked\`. |
 | \`ExpandableSection\` | Collapsible block: \`title\`, \`icon\`, \`count\`, animated body (\`aria-expanded\` + \`aria-controls\`). |
 | \`StatusDot\` | Status indicator dot: \`tone\`, \`label\`, \`pulse\`. |
+| \`Banner\` | Page-level announcement bar: \`tone\` (\`default\`\\|\`primary\`\\|\`success\`\\|\`warn\`\\|\`danger\`), \`icon\`, \`title\`, body as children, right-aligned \`actions\`, \`onDismiss\` (renders the dismiss X). For in-form/field messages use \`InfoCard\` or \`Alert\` instead. |
+| \`Timeline\` | Vertical event log: \`items: [{ id, title, description?, meta?, tone?, icon? }]\`. Presentational \u2014 pass already-formatted timestamps in \`meta\`. |
 
 Studio chrome (\`StudioSidebar\`, \`ModeToggle\`, \u2026) lives in \`@timbal-ai/timbal-react/studio\` \u2014 optional, not required for every dashboard.
 
@@ -395,8 +477,11 @@ Ready-made **section patterns** assembled from the components above. Each is a c
 - **Empty states** \u2014 no-data / no-results / first-run. Compose \`EmptyState\` + \`Card\` + \`Button\`.
 - **Sign-in card** \u2014 centered auth entry. Compose \`Card\` + \`Input\` + \`Label\` + \`Button\`.
 
-**Shells & theming**
+**Shells & layouts**
 - **Minimal shell** \u2014 \`AppShell\` + \`Page\` (no sidebar/chat).
+- **Bento dashboard** \u2014 \`Page\` + an asymmetric grid of \`SurfaceCard\` / \`ChartPanel\` / \`StatTile\` (varied spans) for overview/home screens.
+- **Split view** \u2014 master\u2013detail: \`AppShell contentFill\` + \`Page fill\` + a two-pane flex row (list + detail), each pane \`min-h-0 overflow-y-auto\`.
+- **Full-page chat** \u2014 \`AppShell contentFill\` + headerless \`Page fill\` + \`TimbalChat className="min-h-0 flex-1"\` (composer pinned; no \`h-[calc(...)]\`).
 - **Copilot overlay** \u2014 \`AppShell\` + floating \`AppChatPanel\`.
 - **Theme presets** \u2014 apply a brand preset programmatically (\`applyThemePreset\` / \`applyTimbalTheme\`); never hand-author OKLCH and don't expose a theme picker to end users.
 
@@ -429,6 +514,8 @@ import {
   DataTable,
   FilterBar,
   FilterField,
+  AlertCard,
+  CatalogCard,
 } from "@timbal-ai/timbal-react/app";
 \`\`\`
 
@@ -439,6 +526,17 @@ import {
 | \`examples/app-kit/recipes/*\` | **Recipes** \u2014 one pattern each (~20\u201380 lines). Use for capability, not layout. |
 | \`examples/app-kit/reference/operations-dashboard.tsx\` | **Reference only** \u2014 full wired app; do not treat as the default generated layout. |
 
+### API gotchas \u2014 props that do NOT exist (don't guess, don't retry variations)
+
+The compiler rejects these every time; write against the documented shapes above instead:
+
+- \`FieldInput\` / \`FieldTextarea\` / \`FieldSelect\` / \`FieldSwitch\` **require \`label\`** \u2014 TS2741 if omitted. Label-less control \u2192 \`FilterField\` or \`SearchInput\`.
+- Full-height layout: \`fill\` lives on \`Page\` (paired with \`AppShell contentFill\`) \u2014 there is no \`fill\` on \`Section\` or \`AppShell\`.
+- \`WorkforceSelector\` (chat subpath / root) is a **controlled** picker: \`workforces\` (e.g. from \`useWorkforces()\`), \`value\`, \`onChange(id)\`, optional \`hideWhenSingle\` / \`placeholder\`. It does **not** fetch and has no \`workforceId\` prop \u2014 for an embedded assistant use \`AppChatPanel workforceId="\u2026"\`.
+- There is **no \`Tabs\` export** \u2014 section switching uses \`SubNav\` or \`PillSegmentedTabs\`.
+- \`Banner\` and \`Timeline\` exist (see menu) \u2014 import them from \`/app\`, \`/ui\`, or the root.
+- If a prop still type-errors, read the actual definitions in \`node_modules/@timbal-ai/timbal-react/dist/app.d.ts\` once instead of retrying guessed prop names.
+
 ### Rules
 
 - Prefer stable props documented above; avoid undocumented \`design/*\` class exports (\`connectionRowListClass\` is exported but \`ConnectionRowList\` is preferred).
@@ -469,6 +567,7 @@ var GRADIENT_DIRECTIONS = /* @__PURE__ */ new Set([
 ]);
 var ICON_IMPORT_RE = /from\s+["']lucide-react["']/;
 var RAW_CONTROL_SURFACE_RE = /\bborder-input\b/;
+var COLORED_HOVER_RE = /\bhover:(?:bg|from|to|via)-(?:primary|destructive|success|warn|danger|blue|emerald|green|amber|red|indigo|violet|purple|pink|rose|sky|cyan|teal|lime|yellow|orange|fuchsia)\b/;
 var RESERVED_GRADIENT_SET = new Set(RESERVED_GRADIENT_TOKENS);
 function stripVariants(util) {
   return util.replace(/^(?:[a-z-]+:)*/, "");
@@ -485,7 +584,14 @@ function lintGeneratedUi(source, options = {}) {
   let usesLucide = false;
   let iconUsageCount = 0;
   let dividerRunCount = 0;
+  let pageTitle = null;
+  const pageTitleMatch = source.match(/<Page\s+[^>]*\btitle=(?:"([^"]+)"|\{["']([^"']+)["']\})/);
+  if (pageTitleMatch) {
+    pageTitle = (pageTitleMatch[1] || pageTitleMatch[2]).trim().toLowerCase();
+  }
+  const hasChat = /\b(?:TimbalChat|AppChatPanel|Thread)\b/.test(source);
   const lucideNames = /* @__PURE__ */ new Set();
+  const openCards = [];
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
     const lineNo = i + 1;
@@ -501,6 +607,33 @@ function lintGeneratedUi(source, options = {}) {
       continue;
     }
     if (isCommentOrImport(line)) continue;
+    const cardMatch = line.match(/<(Card|SurfaceCard|ArtifactCard)\b/);
+    if (cardMatch) {
+      const isSelfClosing = /\/>/.test(line) && line.indexOf(cardMatch[0]) < line.indexOf("/>");
+      if (!isSelfClosing) {
+        openCards.push({ type: cardMatch[1], line: lineNo });
+      }
+    }
+    const closeMatch = line.match(/<\/(Card|SurfaceCard|ArtifactCard)\b/);
+    if (closeMatch && openCards.length > 0) {
+      const idx = openCards.map((c) => c.type).lastIndexOf(closeMatch[1]);
+      if (idx !== -1) {
+        openCards.splice(idx, 1);
+      }
+    }
+    if (openCards.length > 0) {
+      const tableMatch = line.match(/<(DataTable|table|Table)\b/);
+      if (tableMatch) {
+        const parentCard = openCards[openCards.length - 1];
+        findings.push({
+          rule: "no-table-in-card",
+          severity: "error",
+          line: lineNo,
+          message: `Table inside card. Never wrap a <${tableMatch[1]}> or table inside a <${parentCard.type}> (opened on L${parentCard.line}). Place the table directly on the Page or Section instead.`,
+          snippet: line.trim().slice(0, 120)
+        });
+      }
+    }
     const rawColors = line.match(RAW_COLOR_RE);
     if (rawColors) {
       for (const m of rawColors) {
@@ -541,6 +674,15 @@ function lintGeneratedUi(source, options = {}) {
         snippet: line.trim().slice(0, 120)
       });
     }
+    if (COLORED_HOVER_RE.test(line)) {
+      findings.push({
+        rule: "no-colored-hover",
+        severity: "warn",
+        line: lineNo,
+        message: "Colored hover background/gradient. House style: interactive cards and list items must use neutral hover states \u2014 never hard-code colored backgrounds or borders on hover.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
     if (BOLD_VALUE_RE.test(line)) {
       findings.push({
         rule: "bold-metric",
@@ -587,6 +729,44 @@ function lintGeneratedUi(source, options = {}) {
         if (hits) iconUsageCount += hits.length;
       }
     }
+    if (pageTitle) {
+      const titleMatch = line.match(/<(Section|ChartPanel|Card|DataTable|SurfaceCard)\s+[^>]*\btitle=(?:"([^"]+)"|\{["']([^"']+)["']\})/);
+      if (titleMatch) {
+        const element = titleMatch[1];
+        const titleVal = (titleMatch[2] || titleMatch[3]).trim().toLowerCase();
+        if (titleVal === pageTitle || titleVal.includes(pageTitle) || pageTitle.includes(titleVal)) {
+          findings.push({
+            rule: "no-title-repetition",
+            severity: "warn",
+            line: lineNo,
+            message: `Title repetition. The <${element}> title "${titleVal}" repeats or is very similar to the <Page> title "${pageTitle}". Drop the title from the child element or use a title-less Section to avoid redundant headings.`,
+            snippet: line.trim().slice(0, 120)
+          });
+        }
+      }
+    }
+    if (hasChat) {
+      const wrappingMatch = line.match(/<(Card|Section|SurfaceCard|FormSection|SettingsSection)\b/);
+      if (wrappingMatch) {
+        findings.push({
+          rule: "no-chat-wrapping",
+          severity: "error",
+          line: lineNo,
+          message: `Chat component wrapping. Never wrap TimbalChat or AppChatPanel inside a <${wrappingMatch[1]}> or custom bordered container. Let the chat component fill the page or slot directly.`,
+          snippet: line.trim().slice(0, 120)
+        });
+      }
+      const headingMatch = line.match(/<(h[1-6])\b/);
+      if (headingMatch) {
+        findings.push({
+          rule: "no-chat-wrapping",
+          severity: "error",
+          line: lineNo,
+          message: `Custom heading in chat view. Do not render custom <${headingMatch[1]}> headings on the chat page. Pass welcome.heading to TimbalChat if you need to customize the welcome title.`,
+          snippet: line.trim().slice(0, 120)
+        });
+      }
+    }
   }
   if (usesLucide && iconUsageCount > maxIcons) {
     findings.push({
@@ -1319,7 +1499,20 @@ var TimbalThemeStyle = ({
 
 // src/design/app-classes.ts
 var appPageColumnClass = "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
-var appShellTopbarInsetClass = "w-full px-4 md:px-6";
+var PAGE_WIDTH_MAXW = {
+  full: "max-w-none",
+  wide: "max-w-[100rem]",
+  default: "max-w-7xl",
+  centered: "max-w-5xl",
+  narrow: "max-w-3xl",
+  prose: "max-w-2xl"
+};
+function appPageColumn(width, density = "default") {
+  const lateral = density === "compact" ? "px-3 md:px-4" : "px-4 md:px-6 lg:px-8";
+  const maxW = width ? PAGE_WIDTH_MAXW[width] : density === "compact" ? "max-w-none" : "max-w-[100rem]";
+  return cn("mx-auto w-full", maxW, lateral);
+}
+var appShellTopbarInsetClass = "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
 var appShellInsetTopClass = "pt-4 md:pt-6";
 var appShellInsetBottomClass = "pb-8 md:pb-10";
 var appShellTopbarRowClass = cn(
@@ -1386,6 +1579,15 @@ var APP_DENSITY_CLASSES = {
     default: appPageHeaderClass,
     compact: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between pb-2 pt-1"
   },
+  /**
+   * Vertical rhythm between a `Page`'s direct content blocks. Page-level gap so
+   * stacked blocks (FilterBar + DataTable, MetricRow + ChartPanel, bare cards)
+   * never render flush — the #1 source of gap-less generated layouts.
+   */
+  pageStack: {
+    default: "flex flex-col gap-6",
+    compact: "flex flex-col gap-4"
+  },
   section: {
     default: appSectionClass,
     compact: "flex flex-col gap-2 py-2"
@@ -1411,12 +1613,12 @@ var APP_DENSITY_CLASSES = {
     compact: "relative flex min-w-0 flex-1 flex-col gap-1 px-3 py-2 text-left font-normal"
   },
   metricChartRegion: {
-    default: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 pt-2",
-    compact: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 pt-1"
+    default: "relative min-h-0 w-full overflow-x-hidden pt-2",
+    compact: "relative min-h-0 w-full overflow-x-hidden pt-1"
   },
   metricChartPlotRegion: {
-    default: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 px-0 pt-5 pb-3",
-    compact: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 px-0 pt-3 pb-2"
+    default: "relative min-h-0 w-full overflow-x-hidden px-0 pt-5 pb-3",
+    compact: "relative min-h-0 w-full overflow-x-hidden px-0 pt-3 pb-2"
   },
   chartPanelBody: {
     default: "pt-2 pb-3",
@@ -1445,8 +1647,71 @@ function useAppDensityClass(key, override) {
   return appDensityClass(key, override ?? inherited);
 }
 
+// src/charts/sparkline.tsx
+import { useId } from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Sparkline = ({
+  data,
+  dataKey = "value",
+  color = "var(--primary, #6366f1)",
+  area = true,
+  width = 96,
+  height = 28,
+  strokeWidth = 1.5,
+  className,
+  ariaLabel = "Trend"
+}) => {
+  const uid = useId();
+  const values = data.map((d) => typeof d === "number" ? d : toNum(d[dataKey]));
+  if (values.length === 0) {
+    return /* @__PURE__ */ jsx3("span", { className: cn("inline-block", className), style: { width, height } });
+  }
+  const pad = strokeWidth + 1;
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const range = max - min || 1;
+  const innerW = width - pad * 2;
+  const innerH = height - pad * 2;
+  const points = values.map((v, i) => ({
+    x: pad + (values.length > 1 ? i / (values.length - 1) * innerW : innerW / 2),
+    y: pad + innerH - (v - min) / range * innerH
+  }));
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      role: "img",
+      "aria-label": ariaLabel,
+      preserveAspectRatio: "none",
+      children: [
+        area && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs2("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx3("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
+            /* @__PURE__ */ jsx3("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
+          ] }) }),
+          /* @__PURE__ */ jsx3("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: monotoneLinePath(points),
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+};
+
 // src/app/data/metrics-shared.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var metricCardShellClass = cn(
   studioIntegrationCardClass,
   "aui-app-metric-card shadow-none",
@@ -1456,18 +1721,22 @@ var metricTilesRowClass = "grid w-full min-w-0";
 var metricCellDividerClass = "border-r border-border/40";
 var MetricCardHeader = ({
   title,
+  titleTag,
   titleId,
   description,
   actions
 }) => {
   const headerClass = useAppDensityClass("metricCardHeader");
   if (!title && !description && !actions) return null;
-  return /* @__PURE__ */ jsxs2("header", { className: headerClass, children: [
-    /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
-      title ? /* @__PURE__ */ jsx3("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }) : null,
-      description ? /* @__PURE__ */ jsx3("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+  return /* @__PURE__ */ jsxs3("header", { className: cn(headerClass, "items-center"), children: [
+    /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2.5", children: [
+        title ? /* @__PURE__ */ jsx4("h3", { id: titleId, className: "text-sm font-semibold text-foreground tracking-tight select-none", children: title }) : null,
+        titleTag ? /* @__PURE__ */ jsx4("span", { className: "inline-flex rounded-full bg-muted/70 px-2 py-0.5 text-[10px] font-medium text-muted-foreground border border-border/30 tracking-tight leading-none select-none", children: titleTag }) : null
+      ] }),
+      description ? /* @__PURE__ */ jsx4("p", { className: "mt-1 text-xs text-muted-foreground leading-normal select-none", children: description }) : null
     ] }),
-    actions ? /* @__PURE__ */ jsx3("div", { className: "shrink-0", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx4("div", { className: "shrink-0 flex items-center", children: actions }) : null
   ] });
 };
 function metricTilesGridColsClass(n) {
@@ -1478,6 +1747,8 @@ function metricTilesGridColsClass(n) {
       return "grid-cols-2";
     case 3:
       return "grid-cols-3";
+    case 4:
+      return "grid-cols-2 md:grid-cols-4";
     case 5:
       return "grid-cols-2 sm:grid-cols-5";
     case 6:
@@ -1488,12 +1759,25 @@ function metricTilesGridColsClass(n) {
 }
 
 // src/app/data/MetricTile.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var trendToneClass = {
   up: "border-border/80 bg-muted/40 text-muted-foreground",
   down: "border-border/80 bg-muted/40 text-muted-foreground",
   neutral: "border-border/80 bg-muted/30 text-muted-foreground"
 };
+var inlineTrendToneClass = {
+  up: "text-blue-500/90 dark:text-blue-400/95 font-medium",
+  down: "text-rose-500/90 dark:text-rose-400/95 font-medium",
+  neutral: "text-muted-foreground/80"
+};
+var activeToneClass = {
+  default: "bg-foreground dark:bg-white",
+  primary: "bg-primary",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500",
+  danger: "bg-destructive",
+  neutral: "bg-border"
+};
 var metricTileInteractiveExtraClass = cn(
   "bg-transparent hover:bg-transparent active:bg-transparent",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/10"
@@ -1504,58 +1788,86 @@ var MetricTile = ({
   unit,
   trend,
   trendTone = "neutral",
+  trendVariant = "pill",
   active = false,
+  activeTone = "default",
   showDivider = false,
   onSelect,
+  sparklineData,
+  sparklineConfig,
+  sparkline,
   ariaLabel,
   className
 }) => {
   const metricTileBaseClass = useAppDensityClass("metricTile");
-  const content = /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    active ? /* @__PURE__ */ jsx4(
+  const hasSparkline = Boolean(sparkline || sparklineData);
+  const content = /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    active ? /* @__PURE__ */ jsx5(
       "span",
       {
         "aria-hidden": true,
-        className: "absolute inset-x-0 bottom-0 h-0.5 bg-foreground dark:bg-white"
+        className: cn(
+          "absolute inset-x-0 bottom-0 h-0.5 z-20 transition-colors duration-200",
+          activeToneClass[activeTone]
+        )
       }
     ) : null,
-    /* @__PURE__ */ jsx4("span", { className: "text-xs font-normal text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs3("span", { className: "flex items-baseline gap-1", children: [
-        /* @__PURE__ */ jsx4("span", { className: "text-2xl font-normal tracking-tight text-foreground tabular-nums", children: value }),
-        unit ? /* @__PURE__ */ jsx4("span", { className: "text-xs font-normal text-muted-foreground", children: unit }) : null
-      ] }),
-      trend ? /* @__PURE__ */ jsx4(
-        "span",
-        {
-          className: cn(
-            "rounded-full border px-1.5 py-0.5 text-xs font-normal",
-            trendToneClass[trendTone]
-          ),
-          children: trend
-        }
-      ) : null
+    hasSparkline ? /* @__PURE__ */ jsx5("div", { className: "absolute inset-x-0 bottom-0.5 h-9 w-full overflow-hidden pointer-events-none z-0 opacity-45 dark:opacity-35 select-none", children: sparkline ?? /* @__PURE__ */ jsx5(
+      Sparkline,
+      {
+        data: sparklineData,
+        width: 160,
+        height: 36,
+        className: "w-full h-full",
+        color: trendTone === "up" ? "var(--primary, #3b82f6)" : trendTone === "down" ? "var(--destructive, #f43f5e)" : "var(--muted-foreground, #64748b)",
+        ...sparklineConfig
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsxs4("div", { className: "relative z-10 flex flex-col gap-1 w-full text-left", children: [
+      /* @__PURE__ */ jsx5("span", { className: "text-xs font-semibold text-muted-foreground/80 tracking-tight", children: label }),
+      /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs4("span", { className: "flex items-baseline gap-1", children: [
+          /* @__PURE__ */ jsx5("span", { className: "text-2xl font-normal tracking-tight text-foreground tabular-nums", children: value }),
+          unit ? /* @__PURE__ */ jsx5("span", { className: "text-xs font-medium text-muted-foreground", children: unit }) : null
+        ] }),
+        trend ? trendVariant === "inline" ? /* @__PURE__ */ jsx5("span", { className: cn("text-xs leading-none select-none", inlineTrendToneClass[trendTone]), children: trend }) : /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: cn(
+              "rounded-full border px-1.5 py-0.5 text-xs font-normal select-none",
+              trendToneClass[trendTone]
+            ),
+            children: trend
+          }
+        ) : null
+      ] })
     ] })
   ] });
   const divider = showDivider ? metricCellDividerClass : void 0;
   if (onSelect) {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
         onClick: onSelect,
         "aria-pressed": active,
         "aria-label": ariaLabel,
-        className: cn(metricTileBaseClass, metricTileInteractiveExtraClass, divider, className),
+        className: cn(
+          metricTileBaseClass,
+          "transition-all duration-200 hover:bg-muted/10",
+          metricTileInteractiveExtraClass,
+          divider,
+          className
+        ),
         children: content
       }
     );
   }
-  return /* @__PURE__ */ jsx4("div", { className: cn(metricTileBaseClass, divider, className), children: content });
+  return /* @__PURE__ */ jsx5("div", { className: cn(metricTileBaseClass, divider, className), children: content });
 };
 
 // src/app/theme/ThemePresetGallery.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 
 // src/app/layout/app-shell-chat-context.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -1581,8 +1893,8 @@ function useAppShellNav() {
 
 // src/app/layout/AppShell.tsx
 import { motion, useReducedMotion } from "motion/react";
-import { useCallback, useMemo, useState } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var floatingTriggerClass = cn(
   "aui-app-shell-chat-trigger-fixed fixed z-50 rounded-full px-5 py-2.5 text-sm font-medium shadow-card-elevated",
   "bg-primary text-primary-foreground transition-colors hover:bg-primary/90",
@@ -1600,39 +1912,57 @@ var AppShellBody = ({
   sidebar,
   topbarContent,
   mainClassName,
+  contentFill = false,
   insetPaddingPx,
   insetExpanded,
   children
 }) => {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < 768;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onResize = () => setIsMobile(window.innerWidth < 768);
+    onResize();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
   const reducedMotion = useReducedMotion();
   const layoutDirection = insetExpanded ? "expand" : "collapse";
   const layoutTransition = studioSidebarWidthTransition(
     !!reducedMotion,
     layoutDirection
   );
-  const insetPadding = sidebar ? insetPaddingPx : 0;
-  return /* @__PURE__ */ jsx6(
+  const insetPadding = sidebar && !isMobile ? insetPaddingPx : 0;
+  return /* @__PURE__ */ jsx7(
     motion.div,
     {
       className: "aui-app-shell-body relative z-10 flex min-h-0 min-w-0 flex-1 flex-col",
       initial: false,
       animate: { paddingLeft: insetPadding },
       transition: layoutTransition,
-      children: /* @__PURE__ */ jsxs5(
+      children: /* @__PURE__ */ jsxs6(
         "div",
         {
           className: cn(
-            "aui-app-shell-scroll flex min-h-0 flex-1 flex-col overflow-y-auto",
+            "aui-app-shell-scroll flex min-h-0 flex-1 flex-col",
+            // Padded scroll region by default; a full-bleed page (chat / canvas) owns
+            // its own scroll, so clip here and let the bounded `main` fill exactly.
+            contentFill ? "overflow-hidden" : "overflow-y-auto",
             !topbarContent && appShellInsetTopClass
           ),
           children: [
-            topbarContent ? /* @__PURE__ */ jsx6("header", { className: cn("aui-app-shell-topbar-region", appShellTopbarStickyClass), children: /* @__PURE__ */ jsx6("div", { className: appShellTopbarInsetClass, children: topbarContent }) }) : null,
-            /* @__PURE__ */ jsx6(
+            topbarContent ? /* @__PURE__ */ jsx7("header", { className: cn("aui-app-shell-topbar-region", appShellTopbarStickyClass), children: /* @__PURE__ */ jsx7("div", { className: appShellTopbarInsetClass, children: topbarContent }) }) : null,
+            /* @__PURE__ */ jsx7(
               "main",
               {
                 className: cn(
-                  "aui-app-shell-main min-w-0 flex-1",
-                  appShellInsetBottomClass,
+                  // Bounded flex column by default so `h-full` / `flex-1 min-h-0` children
+                  // (full-page chat, canvas) resolve a height without `mainClassName` surgery.
+                  "aui-app-shell-main flex min-h-0 min-w-0 flex-1 flex-col",
+                  // Bottom breathing room for scrolling content; full-bleed pages skip it.
+                  !contentFill && appShellInsetBottomClass,
                   mainClassName
                 ),
                 children
@@ -1662,7 +1992,8 @@ var AppShell = ({
   defaultNavOpen = false,
   onNavOpenChange,
   className,
-  mainClassName
+  mainClassName,
+  contentFill = false
 }) => {
   const topbarContent = topbar ?? header;
   const hasChat = Boolean(chat);
@@ -1703,18 +2034,19 @@ var AppShell = ({
     setInsetPaddingPx(insetPx);
   }, []);
   const insetExpanded = insetPaddingPx >= SIDEBAR_INSET_PX_EXPANDED;
-  const shellBody = /* @__PURE__ */ jsx6(
+  const shellBody = /* @__PURE__ */ jsx7(
     AppShellBody,
     {
       sidebar,
       topbarContent,
       mainClassName,
+      contentFill,
       insetPaddingPx,
       insetExpanded,
       children
     }
   );
-  const tree = /* @__PURE__ */ jsx6(ShellInsetProvider, { value: sidebar ? reportShellInset : null, children: /* @__PURE__ */ jsxs5(
+  const tree = /* @__PURE__ */ jsx7(ShellInsetProvider, { value: sidebar ? reportShellInset : null, children: /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
@@ -1724,7 +2056,7 @@ var AppShell = ({
       style: studioChromeShellStyle,
       children: [
         sidebar,
-        sidebar && navOpen ? /* @__PURE__ */ jsx6(
+        sidebar && navOpen ? /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -1734,7 +2066,7 @@ var AppShell = ({
           }
         ) : null,
         shellBody,
-        hasChat && chatOpen ? /* @__PURE__ */ jsx6(
+        hasChat && chatOpen ? /* @__PURE__ */ jsx7(
           "div",
           {
             className: floatingPanelClass,
@@ -1747,7 +2079,7 @@ var AppShell = ({
             children: chat
           }
         ) : null,
-        hasChat && chatCollapsible && !chatOpen && !hideChatTrigger ? /* @__PURE__ */ jsx6(
+        hasChat && chatCollapsible && !chatOpen && !hideChatTrigger ? /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -1760,11 +2092,11 @@ var AppShell = ({
       ]
     }
   ) });
-  const withNav = /* @__PURE__ */ jsx6(AppShellNavProvider, { value: navControls, children: tree });
+  const withNav = /* @__PURE__ */ jsx7(AppShellNavProvider, { value: navControls, children: tree });
   if (!hasChat) {
     return withNav;
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     AppShellChatProvider,
     {
       value: {
@@ -1778,23 +2110,6 @@ var AppShell = ({
   );
 };
 
-// src/app/layout/AppShellTopbar.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var AppShellTopbar = ({
-  start,
-  actions,
-  children,
-  className
-}) => {
-  return /* @__PURE__ */ jsxs6("div", { className: cn("aui-app-shell-topbar", appShellTopbarRowClass, className), children: [
-    /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-      start,
-      children
-    ] }),
-    actions ? /* @__PURE__ */ jsx7("div", { className: "aui-app-shell-topbar-actions flex shrink-0 items-center gap-2", children: actions }) : null
-  ] });
-};
-
 // src/app/layout/AppShellChatTrigger.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
 var floatingPositionClass = "fixed bottom-6 right-6 z-50 max-sm:bottom-4 max-sm:right-4";
@@ -1858,11 +2173,14 @@ var PageHeader = ({
   className
 }) => {
   const pageHeaderClass = useAppDensityClass("pageHeader");
+  if (title == null && description == null && actions == null) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs7("header", { className: cn("aui-app-page-header", pageHeaderClass, className), children: [
-    /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx10("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
+    title != null || description != null ? /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
+      title != null ? /* @__PURE__ */ jsx10("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }) : null,
       description ? /* @__PURE__ */ jsx10("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
-    ] }),
+    ] }) : null,
     actions ? /* @__PURE__ */ jsx10("div", { className: "aui-app-page-header-actions flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
   ] });
 };
@@ -1872,32 +2190,47 @@ import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var PageFrame = ({
   children,
   breadcrumbs,
+  width,
+  fill = false,
+  fillPadded = false,
   className,
   ...headerProps
 }) => {
   const density = useAppDensity();
-  const pageColumnClass = useAppDensityClass("pageColumn");
-  return /* @__PURE__ */ jsxs8(
-    "div",
-    {
-      className: cn("aui-app-page", pageColumnClass, className),
-      "data-density": density,
-      children: [
-        breadcrumbs,
-        /* @__PURE__ */ jsx11(PageHeader, { ...headerProps }),
-        children
-      ]
-    }
-  );
+  const stackClass = useAppDensityClass("pageStack");
+  const columnClass = appPageColumn(width, density);
+  const rootClass = fill ? cn(
+    "flex min-h-0 min-w-0 flex-1 flex-col",
+    fillPadded && columnClass
+  ) : columnClass;
+  return /* @__PURE__ */ jsxs8("div", { className: cn("aui-app-page", rootClass, className), "data-density": density, children: [
+    breadcrumbs,
+    /* @__PURE__ */ jsx11(PageHeader, { ...headerProps }),
+    fill ? children : /* @__PURE__ */ jsx11("div", { className: cn("aui-app-page-stack", stackClass), children })
+  ] });
 };
 var Page = ({
   density = "default",
   children,
   breadcrumbs,
+  width,
+  fill = false,
+  fillPadded = false,
   className,
   ...headerProps
 }) => {
-  return /* @__PURE__ */ jsx11(AppDensityProvider, { density, children: /* @__PURE__ */ jsx11(PageFrame, { breadcrumbs, className, ...headerProps, children }) });
+  return /* @__PURE__ */ jsx11(AppDensityProvider, { density, children: /* @__PURE__ */ jsx11(
+    PageFrame,
+    {
+      breadcrumbs,
+      width,
+      fill,
+      fillPadded,
+      className,
+      ...headerProps,
+      children
+    }
+  ) });
 };
 
 // src/app/layout/Section.tsx
@@ -1917,15 +2250,61 @@ var Section = ({
   ] });
 };
 
+// src/app/layout/Stack.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var GAP_CLASS = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8"
+};
+var ALIGN_CLASS = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var JUSTIFY_CLASS = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+};
+var Stack = ({
+  children,
+  direction = "vertical",
+  gap = "md",
+  align,
+  justify,
+  wrap = false,
+  className
+}) => /* @__PURE__ */ jsx13(
+  "div",
+  {
+    className: cn(
+      "flex min-w-0",
+      direction === "vertical" ? "flex-col" : "flex-row",
+      GAP_CLASS[gap],
+      align && ALIGN_CLASS[align],
+      justify && JUSTIFY_CLASS[justify],
+      wrap && "flex-wrap",
+      className
+    ),
+    children
+  }
+);
+
 // src/app/copilot/app-copilot-context.tsx
 import { createContext as createContext4, useContext as useContext4 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var AppCopilotContext = createContext4(null);
 var AppCopilotProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ jsx13(AppCopilotContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx14(AppCopilotContext.Provider, { value, children });
 };
 function useAppCopilotContext() {
   return useContext4(AppCopilotContext) ?? {};
@@ -1933,7 +2312,7 @@ function useAppCopilotContext() {
 
 // src/app/chat/AppChatPanel.tsx
 import { XIcon } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var shellClass = "aui-app-chat-panel flex h-full min-h-0 flex-col overflow-hidden";
 var chromeClass = cn(
   "aui-app-chat-panel-chrome relative z-20 flex min-h-10 shrink-0 items-center justify-end px-2 pt-2"
@@ -1979,17 +2358,17 @@ var AppChatPanel = ({
 }) => {
   const shellChat = useAppShellChat();
   return /* @__PURE__ */ jsxs10("div", { className: cn(shellClass, className), children: [
-    shellChat?.collapsible ? /* @__PURE__ */ jsx14("div", { className: chromeClass, children: /* @__PURE__ */ jsx14(
+    shellChat?.collapsible ? /* @__PURE__ */ jsx15("div", { className: chromeClass, children: /* @__PURE__ */ jsx15(
       "button",
       {
         type: "button",
         className: closeButtonClass,
         onClick: () => shellChat.setOpen(false),
         "aria-label": "Close assistant",
-        children: /* @__PURE__ */ jsx14(XIcon, { className: "size-4", "aria-hidden": true })
+        children: /* @__PURE__ */ jsx15(XIcon, { className: "size-4", "aria-hidden": true })
       }
     ) }) : null,
-    /* @__PURE__ */ jsx14("div", { className: bodyClass, children: /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15("div", { className: bodyClass, children: /* @__PURE__ */ jsx15(
       TimbalRuntimeProvider,
       {
         workforceId,
@@ -1999,7 +2378,7 @@ var AppChatPanel = ({
         attachmentsUploadUrl,
         attachmentsAccept,
         debug,
-        children: /* @__PURE__ */ jsx14(
+        children: /* @__PURE__ */ jsx15(
           Thread,
           {
             variant: "panel",
@@ -2020,41 +2399,121 @@ var AppChatPanel = ({
 };
 
 // src/app/surfaces/SurfaceCard.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var SurfaceCard = ({ children, className }) => {
+import { jsx as jsx16 } from "react/jsx-runtime";
+var surfaceVariantClass = {
+  default: "",
+  muted: "bg-none bg-muted/40 shadow-none border border-border/20",
+  outline: "bg-none bg-transparent border border-border shadow-none",
+  elevated: "shadow-card-elevated border border-border/80",
+  flat: "bg-card/70 border border-border/50 shadow-[0_1px_3px_rgba(0,0,0,0.03),0_10px_15px_-3px_rgba(0,0,0,0.01)] dark:bg-card/40",
+  hierarchical: "bg-card/90 border border-border/60 shadow-[0_1px_2px_rgba(0,0,0,0.02),0_8px_16px_rgba(0,0,0,0.01)] rounded-2xl dark:bg-card/50"
+};
+var surfaceToneClass = {
+  default: "",
+  primary: "ring-1 ring-inset ring-primary/25",
+  success: "ring-1 ring-inset ring-emerald-500/25",
+  warn: "ring-1 ring-inset ring-amber-500/30",
+  danger: "ring-1 ring-inset ring-destructive/25"
+};
+var SurfaceCard = ({
+  children,
+  variant = "default",
+  tone = "default",
+  hoverable,
+  onClick,
+  ariaLabel,
+  className
+}) => {
   const surfaceCardClass = useAppDensityClass("surfaceCard");
-  return /* @__PURE__ */ jsx15("div", { className: cn("aui-app-surface-card", surfaceCardClass, className), children });
+  const isInteractive = Boolean(onClick);
+  const shouldHover = hoverable ?? isInteractive;
+  const baseClass = cn(
+    "aui-app-surface-card",
+    surfaceCardClass,
+    surfaceVariantClass[variant],
+    surfaceToneClass[tone],
+    shouldHover && "transition-all duration-200 hover:border-border/80 hover:shadow-md",
+    isInteractive && "cursor-pointer select-none active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    className
+  );
+  if (isInteractive) {
+    return /* @__PURE__ */ jsx16(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "aria-label": ariaLabel,
+        className: baseClass,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16("div", { className: baseClass, children });
 };
 
 // src/app/surfaces/StatTile.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
-var StatTile = ({ label, value, hint, className }) => {
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var statValueToneClass = {
+  default: "",
+  primary: "text-primary",
+  success: "text-emerald-700 dark:text-emerald-400",
+  warn: "text-amber-700 dark:text-amber-400",
+  danger: "text-destructive"
+};
+var StatTile = ({
+  label,
+  value,
+  hint,
+  tone = "default",
+  className
+}) => {
   const statTileClass = useAppDensityClass("statTile");
   return /* @__PURE__ */ jsxs11("div", { className: cn("aui-app-stat-tile", statTileClass, className), children: [
-    /* @__PURE__ */ jsx16("span", { className: appStatLabelClass, children: label }),
-    /* @__PURE__ */ jsx16("span", { className: appStatValueClass, children: value }),
-    hint ? /* @__PURE__ */ jsx16("span", { className: "text-xs text-muted-foreground", children: hint }) : null
+    /* @__PURE__ */ jsx17("span", { className: appStatLabelClass, children: label }),
+    /* @__PURE__ */ jsx17("span", { className: cn(appStatValueClass, statValueToneClass[tone]), children: value }),
+    hint ? /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: hint }) : null
   ] });
 };
 
 // src/app/surfaces/EmptyState.tsx
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var EmptyState = ({
   title,
   description,
   action,
-  className
+  className,
+  variant = "default"
 }) => {
-  const emptyStateClass = useAppDensityClass("emptyState");
-  return /* @__PURE__ */ jsxs12("div", { className: cn("aui-app-empty-state", emptyStateClass, className), children: [
-    /* @__PURE__ */ jsx17("p", { className: appEmptyStateTitleClass, children: title }),
-    description ? /* @__PURE__ */ jsx17("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
-    action
+  const densityClass = useAppDensityClass("emptyState");
+  if (variant === "layered") {
+    return /* @__PURE__ */ jsx18(
+      "div",
+      {
+        className: cn(
+          "aui-app-empty-state-layered w-full rounded-2xl border border-border/40 bg-muted/20 p-6 md:p-8 flex items-center justify-center dark:bg-muted/10",
+          className
+        ),
+        children: /* @__PURE__ */ jsxs12("div", { className: "w-full max-w-xl rounded-xl border border-border bg-card p-6 md:p-8 shadow-[0_1px_3px_rgba(0,0,0,0.02),0_10px_15px_-3px_rgba(0,0,0,0.01)] flex flex-col items-center justify-center text-center gap-4 transition-all duration-200 hover:border-border/80 dark:bg-card/45", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1.5 items-center justify-center", children: [
+            /* @__PURE__ */ jsx18("h3", { className: "text-base font-semibold text-foreground tracking-tight", children: title }),
+            description ? /* @__PURE__ */ jsx18("p", { className: "max-w-sm text-sm text-muted-foreground leading-relaxed", children: description }) : null
+          ] }),
+          action ? /* @__PURE__ */ jsx18("div", { className: "mt-1", children: action }) : null
+        ] })
+      }
+    );
+  }
+  const isCompact = variant === "compact";
+  const finalClass = isCompact ? "aui-app-empty-state rounded-xl border border-border bg-gradient-to-b from-elevated-from to-elevated-to p-3 flex flex-col items-center justify-center gap-2 py-8 text-center" : cn("aui-app-empty-state", densityClass);
+  return /* @__PURE__ */ jsxs12("div", { className: cn(finalClass, className), children: [
+    /* @__PURE__ */ jsx18("p", { className: cn(appEmptyStateTitleClass, "font-semibold tracking-tight"), children: title }),
+    description ? /* @__PURE__ */ jsx18("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
+    action ? /* @__PURE__ */ jsx18("div", { className: "mt-1", children: action }) : null
   ] });
 };
 
 // src/app/surfaces/StatusBadge.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var statusBadgeToneClass = {
   default: "bg-muted text-foreground ring-border",
   primary: "bg-primary/10 text-primary ring-primary/20",
@@ -2087,7 +2546,7 @@ var StatusBadge = ({
         className
       ),
       children: [
-        dot ? /* @__PURE__ */ jsx18(
+        dot ? /* @__PURE__ */ jsx19(
           "span",
           {
             "aria-hidden": true,
@@ -2104,7 +2563,7 @@ var StatusBadge = ({
 };
 
 // src/app/surfaces/AppConfirmDialog.tsx
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var bodyClass2 = "flex flex-col gap-4 p-6";
 var titleClass = "pr-8";
 var actionsClass = "flex flex-wrap justify-end gap-2";
@@ -2119,15 +2578,15 @@ var AppConfirmDialog = ({
   destructive = false,
   className
 }) => {
-  return /* @__PURE__ */ jsx19(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx20(
     DialogContent,
     {
       className: cn("gap-0 p-0 sm:max-w-md", className),
       children: /* @__PURE__ */ jsxs14("div", { className: bodyClass2, children: [
-        /* @__PURE__ */ jsx19(DialogTitle, { className: titleClass, children: title }),
-        description ? /* @__PURE__ */ jsx19("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+        /* @__PURE__ */ jsx20(DialogTitle, { className: titleClass, children: title }),
+        description ? /* @__PURE__ */ jsx20("p", { className: "text-sm text-muted-foreground", children: description }) : null,
         /* @__PURE__ */ jsxs14("div", { className: actionsClass, children: [
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             TimbalV2Button,
             {
               type: "button",
@@ -2137,7 +2596,7 @@ var AppConfirmDialog = ({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             TimbalV2Button,
             {
               type: "button",
@@ -2157,7 +2616,7 @@ var AppConfirmDialog = ({
 };
 
 // src/app/surfaces/InfoCard.tsx
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var toneClass = {
   neutral: "border-border bg-muted/40",
   info: "border-primary/25 bg-primary/5",
@@ -2165,34 +2624,67 @@ var toneClass = {
   warn: "border-amber-500/25 bg-amber-500/5",
   danger: "border-destructive/25 bg-destructive/5"
 };
+var toneVerticalClass = {
+  neutral: "border-border/60 bg-card hover:border-border dark:bg-card/40",
+  info: "border-primary/20 bg-primary/5 hover:border-primary/45",
+  success: "border-emerald-500/20 bg-emerald-500/5 hover:border-emerald-500/45",
+  warn: "border-amber-500/25 bg-amber-500/5 hover:border-amber-500/45",
+  danger: "border-destructive/20 bg-destructive/5 hover:border-destructive/45"
+};
 var InfoCard = ({
   title,
   children,
   icon,
   action,
   tone = "neutral",
+  layout = "horizontal",
+  onClick,
+  ariaLabel,
   className
-}) => /* @__PURE__ */ jsxs15(
-  "div",
-  {
-    className: cn(
-      "flex items-start gap-3 rounded-xl border p-4",
-      toneClass[tone],
-      className
-    ),
-    children: [
-      icon ? /* @__PURE__ */ jsx20("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
-      /* @__PURE__ */ jsxs15("div", { className: "min-w-0 flex-1", children: [
-        title ? /* @__PURE__ */ jsx20("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
-        children ? /* @__PURE__ */ jsx20("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
+}) => {
+  const isInteractive = Boolean(onClick);
+  if (layout === "vertical") {
+    const cardContent = /* @__PURE__ */ jsxs15(Fragment4, { children: [
+      icon ? /* @__PURE__ */ jsx21("span", { className: "flex size-10 items-center justify-center rounded-xl bg-muted/50 border border-border/40 text-muted-foreground/80 transition-transform duration-200 group-hover:scale-105", children: icon }) : null,
+      /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1.5 w-full text-left", children: [
+        title ? /* @__PURE__ */ jsx21("p", { className: "text-sm font-semibold text-foreground tracking-tight leading-tight", children: title }) : null,
+        children ? /* @__PURE__ */ jsx21("div", { className: "text-xs text-muted-foreground leading-relaxed", children }) : null
       ] }),
-      action ? /* @__PURE__ */ jsx20("div", { className: "shrink-0", children: action }) : null
-    ]
+      action ? /* @__PURE__ */ jsx21("div", { className: "w-full mt-1", children: action }) : null
+    ] });
+    const baseClass2 = cn(
+      "group flex flex-col gap-4 items-start rounded-2xl border p-5 transition-all duration-200 shadow-[0_1px_3px_rgba(0,0,0,0.03),0_10px_15px_-3px_rgba(0,0,0,0.01)]",
+      toneVerticalClass[tone],
+      isInteractive && "cursor-pointer select-none hover:shadow-md active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+      className
+    );
+    if (isInteractive) {
+      return /* @__PURE__ */ jsx21("button", { type: "button", onClick, "aria-label": ariaLabel, className: baseClass2, children: cardContent });
+    }
+    return /* @__PURE__ */ jsx21("div", { className: baseClass2, children: cardContent });
   }
-);
+  const horizontalContent = /* @__PURE__ */ jsxs15(Fragment4, { children: [
+    icon ? /* @__PURE__ */ jsx21("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
+    /* @__PURE__ */ jsxs15("div", { className: "min-w-0 flex-1 text-left", children: [
+      title ? /* @__PURE__ */ jsx21("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
+      children ? /* @__PURE__ */ jsx21("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
+    ] }),
+    action ? /* @__PURE__ */ jsx21("div", { className: "shrink-0", children: action }) : null
+  ] });
+  const baseClass = cn(
+    "flex items-start gap-3 rounded-xl border p-4 transition-all duration-200",
+    toneClass[tone],
+    isInteractive && "cursor-pointer select-none hover:bg-muted/30 active:scale-[0.995] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    className
+  );
+  if (isInteractive) {
+    return /* @__PURE__ */ jsx21("button", { type: "button", onClick, "aria-label": ariaLabel, className: baseClass, children: horizontalContent });
+  }
+  return /* @__PURE__ */ jsx21("div", { className: baseClass, children: horizontalContent });
+};
 
 // src/app/surfaces/StatusDot.tsx
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var dotClass = {
   online: "bg-emerald-500",
   busy: "bg-amber-500",
@@ -2207,7 +2699,7 @@ var StatusDot = ({
   className
 }) => /* @__PURE__ */ jsxs16("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
   /* @__PURE__ */ jsxs16("span", { className: "relative flex size-2", children: [
-    pulse ? /* @__PURE__ */ jsx21(
+    pulse ? /* @__PURE__ */ jsx22(
       "span",
       {
         className: cn(
@@ -2216,18 +2708,18 @@ var StatusDot = ({
         )
       }
     ) : null,
-    /* @__PURE__ */ jsx21("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
+    /* @__PURE__ */ jsx22("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
   ] }),
-  label ? /* @__PURE__ */ jsx21("span", { className: "text-xs text-muted-foreground", children: label }) : null
+  label ? /* @__PURE__ */ jsx22("span", { className: "text-xs text-muted-foreground", children: label }) : null
 ] });
 
 // src/app/surfaces/DescriptionList.tsx
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var DescriptionList = ({
   items,
   stacked = false,
   className
-}) => /* @__PURE__ */ jsx22(
+}) => /* @__PURE__ */ jsx23(
   "dl",
   {
     className: cn(
@@ -2239,16 +2731,18 @@ var DescriptionList = ({
       {
         className: cn(
           "px-4 py-3",
-          stacked ? "flex flex-col gap-0.5" : "flex items-center justify-between gap-4"
+          stacked ? "flex flex-col gap-0.5" : "flex items-center justify-between gap-4",
+          item.className
         ),
         children: [
-          /* @__PURE__ */ jsx22("dt", { className: "text-sm text-muted-foreground", children: item.label }),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23("dt", { className: cn("text-sm text-muted-foreground", item.labelClassName), children: item.label }),
+          /* @__PURE__ */ jsx23(
             "dd",
             {
               className: cn(
                 "text-sm text-foreground",
-                !stacked && "text-right tabular-nums"
+                !stacked && "text-right tabular-nums",
+                item.valueClassName
               ),
               children: item.value
             }
@@ -2261,10 +2755,10 @@ var DescriptionList = ({
 );
 
 // src/app/surfaces/ExpandableSection.tsx
-import { useId, useState as useState2 } from "react";
+import { useId as useId2, useState as useState2 } from "react";
 import { AnimatePresence, motion as motion2, useReducedMotion as useReducedMotion2 } from "motion/react";
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
-var Chevron = ({ open }) => /* @__PURE__ */ jsx23(
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var Chevron = ({ open }) => /* @__PURE__ */ jsx24(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2278,7 +2772,7 @@ var Chevron = ({ open }) => /* @__PURE__ */ jsx23(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": true,
-    children: /* @__PURE__ */ jsx23("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx24("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var ExpandableSection = ({
@@ -2292,7 +2786,7 @@ var ExpandableSection = ({
   className
 }) => {
   const reduceMotion = useReducedMotion2();
-  const panelId = useId();
+  const panelId = useId2();
   const [internalOpen, setInternalOpen] = useState2(defaultOpen);
   const open = openProp ?? internalOpen;
   const toggle = () => {
@@ -2310,15 +2804,15 @@ var ExpandableSection = ({
         className: "flex w-full items-center justify-between gap-3 bg-transparent px-4 py-3 text-left hover:bg-transparent active:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/10",
         children: [
           /* @__PURE__ */ jsxs18("span", { className: "flex min-w-0 items-center gap-3", children: [
-            icon ? /* @__PURE__ */ jsx23("span", { className: "flex size-8 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", children: icon }) : null,
-            /* @__PURE__ */ jsx23("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
-            count != null ? /* @__PURE__ */ jsx23("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: count }) : null
+            icon ? /* @__PURE__ */ jsx24("span", { className: "flex size-8 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", children: icon }) : null,
+            /* @__PURE__ */ jsx24("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
+            count != null ? /* @__PURE__ */ jsx24("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: count }) : null
           ] }),
-          /* @__PURE__ */ jsx23(Chevron, { open })
+          /* @__PURE__ */ jsx24(Chevron, { open })
         ]
       }
     ),
-    /* @__PURE__ */ jsx23(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx24(
       motion2.div,
       {
         id: panelId,
@@ -2327,7 +2821,7 @@ var ExpandableSection = ({
         exit: reduceMotion ? void 0 : { height: 0, opacity: 0 },
         transition: { duration: 0.2, ease: "easeOut" },
         className: "overflow-hidden",
-        children: /* @__PURE__ */ jsx23("div", { className: "bg-muted/20", children })
+        children: /* @__PURE__ */ jsx24("div", { className: "bg-muted/20", children })
       },
       "body"
     ) : null })
@@ -2335,19 +2829,14 @@ var ExpandableSection = ({
 };
 
 // src/app/surfaces/ResourceCard.tsx
-import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
-var resourceCardShellClass = cn(
-  "flex min-h-[8.5rem] flex-col rounded-2xl p-4 text-left font-normal",
-  TIMBAL_V2_ELEVATED_SURFACE
-);
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var mediaShellClass = cn(
   "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-xl text-sm font-normal text-foreground",
   TIMBAL_V2_LOGO_TILE
 );
 var resourceCardInteractiveClass = cn(
-  resourceCardShellClass,
-  "cursor-pointer bg-transparent hover:bg-transparent active:bg-transparent",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+  "flex min-h-[8.5rem] flex-col rounded-2xl p-4 text-left font-normal border border-border shadow-card",
+  TIMBAL_V2_ELEVATED_SURFACE
 );
 var ResourceCard = ({
   title,
@@ -2358,37 +2847,236 @@ var ResourceCard = ({
   action,
   onClick,
   ariaLabel,
-  className
+  className,
+  variant = "flat",
+  avatarShape = "circle"
 }) => {
-  const body = /* @__PURE__ */ jsxs19(Fragment3, { children: [
+  const isInteractive = Boolean(onClick);
+  const shellClass3 = cn(
+    "flex min-h-[8.5rem] flex-col rounded-2xl p-5 text-left font-normal transition-all duration-200",
+    variant === "default" && TIMBAL_V2_ELEVATED_SURFACE,
+    variant === "flat" && "border border-border/50 bg-card/65 shadow-[0_1px_3px_rgba(0,0,0,0.05),0_10px_15px_-3px_rgba(0,0,0,0.01)] hover:border-border hover:shadow-md dark:bg-card/45",
+    variant === "outline" && "border border-border/70 bg-transparent shadow-none hover:bg-muted/5",
+    isInteractive && "cursor-pointer select-none active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+  );
+  const dynamicMediaShellClass = cn(
+    "flex size-10 shrink-0 items-center justify-center overflow-hidden text-sm font-normal text-foreground transition-all duration-200",
+    avatarShape === "circle" ? "rounded-full" : "rounded-xl",
+    TIMBAL_V2_LOGO_TILE
+  );
+  const body = /* @__PURE__ */ jsxs19(Fragment5, { children: [
     /* @__PURE__ */ jsxs19("div", { className: "flex items-start gap-3", children: [
-      media ? /* @__PURE__ */ jsx24("span", { className: mediaShellClass, children: media }) : null,
+      media ? /* @__PURE__ */ jsx25("span", { className: dynamicMediaShellClass, children: media }) : null,
       /* @__PURE__ */ jsxs19("div", { className: "min-w-0 flex-1 pt-0.5", children: [
-        /* @__PURE__ */ jsx24("p", { className: "truncate text-sm font-normal leading-snug text-foreground", children: title }),
-        subtitle ? /* @__PURE__ */ jsx24("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground", children: subtitle }) : null
+        /* @__PURE__ */ jsx25("p", { className: "truncate text-sm font-semibold leading-snug text-foreground tracking-tight", children: title }),
+        subtitle ? /* @__PURE__ */ jsx25("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground/90 leading-relaxed", children: subtitle }) : null
       ] }),
-      badge ? /* @__PURE__ */ jsx24("span", { className: "shrink-0 pt-0.5", children: badge }) : null
+      badge ? /* @__PURE__ */ jsx25("span", { className: "shrink-0 pt-0.5", children: badge }) : null
     ] }),
     footer || action ? /* @__PURE__ */ jsxs19("div", { className: "mt-auto flex items-center justify-between gap-3 border-t border-border/40 pt-3 text-xs font-normal text-muted-foreground", children: [
-      /* @__PURE__ */ jsx24("span", { className: "min-w-0 truncate", children: footer }),
-      action ? /* @__PURE__ */ jsx24("span", { className: "shrink-0 opacity-80", children: action }) : null
+      /* @__PURE__ */ jsx25("span", { className: "min-w-0 truncate", children: footer }),
+      action ? /* @__PURE__ */ jsx25("span", { className: "shrink-0 opacity-90", children: action }) : null
+    ] }) : null
+  ] });
+  if (onClick) {
+    return /* @__PURE__ */ jsx25(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "aria-label": ariaLabel,
+        className: cn(shellClass3, className),
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx25("article", { className: cn(shellClass3, className), children: body });
+};
+
+// src/app/surfaces/AlertCard.tsx
+import { ChevronRight } from "lucide-react";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+var alertCardShellClass = cn(
+  "flex flex-col rounded-2xl p-4 text-left font-normal border border-border shadow-card",
+  TIMBAL_V2_ELEVATED_GRADIENT
+);
+var alertCardInteractiveClass = cn(
+  "flex flex-col rounded-2xl p-4 text-left font-normal border border-border shadow-card cursor-pointer",
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "transition-[background-color,box-shadow,border-color] duration-150 ease-in-out",
+  "hover:border-foreground/20",
+  "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
+  "active:from-secondary-fill-active-from active:to-secondary-fill-active-to",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+);
+var AlertCard = ({
+  title,
+  description,
+  category,
+  categoryTone = "default",
+  status,
+  statusTone = "default",
+  action,
+  trailing,
+  onClick,
+  ariaLabel,
+  className
+}) => {
+  const showTags = Boolean(category || status);
+  const showTrailing = Boolean(trailing || onClick);
+  const bodyContent = /* @__PURE__ */ jsxs20("div", { className: "flex-1 min-w-0 flex flex-col h-full", children: [
+    showTags ? /* @__PURE__ */ jsxs20("div", { className: "flex flex-wrap items-center gap-1.5 mb-2.5", children: [
+      category ? /* @__PURE__ */ jsx26(StatusBadge, { tone: categoryTone, children: category }) : null,
+      status ? /* @__PURE__ */ jsx26(StatusBadge, { tone: statusTone, children: status }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx26("h4", { className: "text-sm font-medium leading-snug text-foreground", children: title }),
+    description ? /* @__PURE__ */ jsx26("p", { className: "mt-1.5 text-xs text-muted-foreground leading-normal", children: description }) : null,
+    action ? /* @__PURE__ */ jsxs20("div", { className: "mt-auto pt-3 text-xs text-muted-foreground/90 leading-normal", children: [
+      /* @__PURE__ */ jsx26("strong", { className: "font-semibold text-foreground/80", children: "Action: " }),
+      action
     ] }) : null
   ] });
+  const cardContent = /* @__PURE__ */ jsxs20("div", { className: "flex items-start justify-between gap-4 w-full h-full", children: [
+    bodyContent,
+    showTrailing ? /* @__PURE__ */ jsx26("div", { className: "shrink-0 flex items-center justify-center self-center text-muted-foreground/50", children: trailing || /* @__PURE__ */ jsx26(ChevronRight, { className: "size-4" }) }) : null
+  ] });
+  if (onClick) {
+    return /* @__PURE__ */ jsx26(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "aria-label": ariaLabel,
+        className: cn(alertCardInteractiveClass, className),
+        children: cardContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx26("article", { className: cn(alertCardShellClass, className), children: cardContent });
+};
+
+// src/app/surfaces/CatalogCard.tsx
+import { ExternalLink } from "lucide-react";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+var catalogCardShellClass = cn(
+  "flex flex-col rounded-2xl border border-border shadow-card overflow-hidden text-left font-normal",
+  TIMBAL_V2_ELEVATED_GRADIENT
+);
+var catalogCardInteractiveClass = cn(
+  "flex flex-col rounded-2xl border border-border shadow-card overflow-hidden text-left font-normal cursor-pointer",
+  TIMBAL_V2_ELEVATED_GRADIENT,
+  "transition-[background-color,box-shadow,border-color] duration-150 ease-in-out",
+  "hover:border-foreground/20",
+  "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
+  "active:from-secondary-fill-active-from active:to-secondary-fill-active-to",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+);
+var CatalogCard = ({
+  title,
+  subtitle,
+  logo,
+  href,
+  badge,
+  description,
+  tags,
+  footerLinks,
+  copyValue,
+  copyLabel = "Copy ID",
+  actions,
+  onClick,
+  ariaLabel,
+  className
+}) => {
+  const showHeaderTags = Boolean(subtitle || badge);
+  const showFooter = Boolean(footerLinks && footerLinks.length > 0 || copyValue || actions);
+  const mainContent = /* @__PURE__ */ jsxs21("div", { className: "flex-1 p-5 flex flex-col h-full min-h-0", children: [
+    /* @__PURE__ */ jsxs21("div", { className: "flex items-start gap-3", children: [
+      logo ? /* @__PURE__ */ jsx27("div", { className: "size-8 shrink-0 flex items-center justify-center overflow-hidden rounded-lg bg-muted/40", children: logo }) : null,
+      /* @__PURE__ */ jsxs21("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+        /* @__PURE__ */ jsx27("div", { className: "flex items-center gap-1.5 flex-wrap", children: href ? /* @__PURE__ */ jsxs21(
+          "a",
+          {
+            href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex items-center gap-1 hover:underline text-sm font-medium leading-snug text-foreground focus-visible:outline-none focus-visible:underline",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx27("span", { className: "truncate", children: title }),
+              /* @__PURE__ */ jsx27(ExternalLink, { className: "size-3.5 shrink-0 text-muted-foreground/60" })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx27("h4", { className: "text-sm font-medium leading-snug text-foreground truncate", children: title }) }),
+        showHeaderTags ? /* @__PURE__ */ jsxs21("div", { className: "flex flex-wrap items-center gap-2 mt-1", children: [
+          subtitle ? /* @__PURE__ */ jsx27("span", { className: "text-xs font-medium text-muted-foreground", children: subtitle }) : null,
+          badge ? /* @__PURE__ */ jsx27("div", { className: "shrink-0 flex items-center", children: badge }) : null
+        ] }) : null
+      ] })
+    ] }),
+    description ? /* @__PURE__ */ jsx27("p", { className: "mt-3 text-xs leading-relaxed text-muted-foreground line-clamp-3", children: description }) : null,
+    tags && tags.length > 0 ? /* @__PURE__ */ jsx27("div", { className: "flex flex-wrap items-center gap-2 mt-4", children: tags.map((tag, idx) => /* @__PURE__ */ jsxs21("div", { className: "flex items-center text-xs text-muted-foreground/80", children: [
+      idx > 0 && /* @__PURE__ */ jsx27("span", { className: "mr-2 text-muted-foreground/30", children: "\u2022" }),
+      tag
+    ] }, idx)) }) : null
+  ] });
+  const footerMarkup = showFooter ? /* @__PURE__ */ jsxs21("div", { className: "border-t border-border/40 px-5 py-3 flex items-center justify-between gap-4 bg-muted/[0.02]", children: [
+    /* @__PURE__ */ jsx27("div", { className: "flex flex-wrap items-center gap-4", children: footerLinks && footerLinks.length > 0 ? footerLinks.map((link, idx) => /* @__PURE__ */ jsxs21(
+      "a",
+      {
+        href: link.href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground hover:underline transition-colors focus-visible:outline-none focus-visible:underline",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx27("span", { children: link.label }),
+          /* @__PURE__ */ jsx27(ExternalLink, { className: "size-2.5 shrink-0 text-muted-foreground/50" })
+        ]
+      },
+      idx
+    )) : null }),
+    /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", onClick: (e) => e.stopPropagation(), children: [
+      actions ? actions : null,
+      !actions && copyValue ? /* @__PURE__ */ jsx27(
+        CopyButton,
+        {
+          value: copyValue,
+          className: "h-7 text-xs px-2 hover:bg-muted/40 text-muted-foreground/80 hover:text-foreground",
+          children: copyLabel
+        }
+      ) : null
+    ] })
+  ] }) : null;
   if (onClick) {
-    return /* @__PURE__ */ jsx24("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
+    return /* @__PURE__ */ jsxs21(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "aria-label": ariaLabel,
+        className: cn(catalogCardInteractiveClass, className),
+        children: [
+          mainContent,
+          footerMarkup
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ jsx24("article", { className: cn(resourceCardShellClass, className), children: body });
+  return /* @__PURE__ */ jsxs21("article", { className: cn(catalogCardShellClass, className), children: [
+    mainContent,
+    footerMarkup
+  ] });
 };
 
 // src/app/settings/SettingsSection.tsx
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 var SettingsSectionHeader = ({
   title,
   description,
   className
-}) => /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-col", className), children: [
-  /* @__PURE__ */ jsx25("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
-  description ? /* @__PURE__ */ jsx25("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+}) => /* @__PURE__ */ jsxs22("div", { className: cn("flex flex-col", className), children: [
+  /* @__PURE__ */ jsx28("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
+  description ? /* @__PURE__ */ jsx28("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
 ] });
 var SettingsSection = ({
   title,
@@ -2397,7 +3085,7 @@ var SettingsSection = ({
   children,
   noBorderTop = false,
   className
-}) => /* @__PURE__ */ jsxs20(
+}) => /* @__PURE__ */ jsxs22(
   "section",
   {
     className: cn(
@@ -2406,18 +3094,18 @@ var SettingsSection = ({
       className
     ),
     children: [
-      /* @__PURE__ */ jsxs20("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx25("h2", { className: "text-sm font-medium text-foreground", children: title }),
-        description ? /* @__PURE__ */ jsx25("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
-        descriptionFooter ? /* @__PURE__ */ jsx25("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
+      /* @__PURE__ */ jsxs22("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx28("h2", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx28("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
+        descriptionFooter ? /* @__PURE__ */ jsx28("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
       ] }),
-      /* @__PURE__ */ jsx25("div", { className: "min-w-0 space-y-3", children })
+      /* @__PURE__ */ jsx28("div", { className: "min-w-0 space-y-3", children })
     ]
   }
 );
 
 // src/app/settings/FieldRow.tsx
-import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 var FieldRow = ({
   label,
   children,
@@ -2427,7 +3115,7 @@ var FieldRow = ({
   className
 }) => {
   if (inline) {
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs23(
       "div",
       {
         className: cn(
@@ -2435,8 +3123,8 @@ var FieldRow = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs21("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsxs23("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx29(
               "label",
               {
                 htmlFor,
@@ -2444,25 +3132,25 @@ var FieldRow = ({
                 children: label
               }
             ),
-            description ? /* @__PURE__ */ jsx26("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
+            description ? /* @__PURE__ */ jsx29("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
           ] }),
-          /* @__PURE__ */ jsx26("div", { className: "shrink-0", children })
+          /* @__PURE__ */ jsx29("div", { className: "shrink-0", children })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs21("div", { className: cn("flex flex-col gap-1.5", className), children: [
-    /* @__PURE__ */ jsx26("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
+  return /* @__PURE__ */ jsxs23("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsx29("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
     children,
-    description ? /* @__PURE__ */ jsx26("p", { className: "text-xs text-muted-foreground", children: description }) : null
+    description ? /* @__PURE__ */ jsx29("p", { className: "text-xs text-muted-foreground", children: description }) : null
   ] });
 };
 
 // src/app/settings/FloatingUnsavedChangesBar.tsx
-import { useEffect, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import { AnimatePresence as AnimatePresence2, motion as motion3, useReducedMotion as useReducedMotion3 } from "motion/react";
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 var FloatingUnsavedChangesBar = ({
   visible,
   message = "Unsaved changes",
@@ -2477,10 +3165,10 @@ var FloatingUnsavedChangesBar = ({
 }) => {
   const reduceMotion = useReducedMotion3();
   const [mounted, setMounted] = useState3(false);
-  useEffect(() => setMounted(true), []);
+  useEffect2(() => setMounted(true), []);
   if (!mounted || typeof document === "undefined") return null;
   return createPortal(
-    /* @__PURE__ */ jsx27(AnimatePresence2, { children: visible ? /* @__PURE__ */ jsx27("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ jsxs22(
+    /* @__PURE__ */ jsx30(AnimatePresence2, { children: visible ? /* @__PURE__ */ jsx30("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ jsxs24(
       motion3.div,
       {
         role: "region",
@@ -2494,10 +3182,10 @@ var FloatingUnsavedChangesBar = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx27("span", { className: "text-sm text-muted-foreground", children: message }),
-          /* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx27(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
-            /* @__PURE__ */ jsx27(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
+          /* @__PURE__ */ jsx30("span", { className: "text-sm text-muted-foreground", children: message }),
+          /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx30(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
+            /* @__PURE__ */ jsx30(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
           ] })
         ]
       }
@@ -2507,13 +3195,13 @@ var FloatingUnsavedChangesBar = ({
 };
 
 // src/app/settings/DangerZone.tsx
-import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 var DangerZoneAction = ({
   title,
   description,
   action,
   className
-}) => /* @__PURE__ */ jsxs23(
+}) => /* @__PURE__ */ jsxs25(
   "div",
   {
     className: cn(
@@ -2521,11 +3209,11 @@ var DangerZoneAction = ({
       className
     ),
     children: [
-      /* @__PURE__ */ jsxs23("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx28("p", { className: "text-sm font-medium text-foreground", children: title }),
-        description ? /* @__PURE__ */ jsx28("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+      /* @__PURE__ */ jsxs25("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx31("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ jsx28("div", { className: "shrink-0", children: action })
+      /* @__PURE__ */ jsx31("div", { className: "shrink-0", children: action })
     ]
   }
 );
@@ -2534,7 +3222,7 @@ var DangerZone = ({
   description,
   children,
   className
-}) => /* @__PURE__ */ jsxs23(
+}) => /* @__PURE__ */ jsxs25(
   "section",
   {
     className: cn(
@@ -2542,18 +3230,18 @@ var DangerZone = ({
       className
     ),
     children: [
-      (title || description) && /* @__PURE__ */ jsxs23("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
-        title ? /* @__PURE__ */ jsx28("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
-        description ? /* @__PURE__ */ jsx28("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+      (title || description) && /* @__PURE__ */ jsxs25("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
+        title ? /* @__PURE__ */ jsx31("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
+        description ? /* @__PURE__ */ jsx31("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ jsx28("div", { className: "divide-y divide-border bg-card", children })
+      /* @__PURE__ */ jsx31("div", { className: "divide-y divide-border bg-card", children })
     ]
   }
 );
 
 // src/app/integrations/IntegrationCard.tsx
-import { useId as useId2 } from "react";
-import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useId as useId3 } from "react";
+import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 var INTEGRATION_CATALOG_CARD_HEIGHT_CLASS = "h-[12.25rem] min-h-[12.25rem] max-h-[12.25rem]";
 var statusLabel = {
   available: null,
@@ -2561,14 +3249,14 @@ var statusLabel = {
   disabled: "Disabled",
   locked: "Locked"
 };
-var catalogCardShellClass = cn(
+var catalogCardShellClass2 = cn(
   "group relative box-border flex flex-col overflow-hidden rounded-2xl px-4 pb-4 pt-4 text-left font-normal",
   INTEGRATION_CATALOG_CARD_HEIGHT_CLASS,
   TIMBAL_V2_ELEVATED_SURFACE,
   "transition-opacity duration-200 ease-out"
 );
-var catalogCardInteractiveClass = cn(
-  catalogCardShellClass,
+var catalogCardInteractiveClass2 = cn(
+  catalogCardShellClass2,
   "cursor-pointer bg-transparent hover:bg-transparent active:bg-transparent",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 );
@@ -2591,15 +3279,15 @@ var IntegrationCard = ({
   ariaLabel,
   className
 }) => {
-  const titleId = useId2();
+  const titleId = useId3();
   const locked = status === "locked";
   const dimmed = status === "disabled" || locked;
-  const body = /* @__PURE__ */ jsxs24("div", { className: "flex h-full min-h-0 flex-col", children: [
-    /* @__PURE__ */ jsxs24("div", { className: "flex shrink-0 items-start gap-3 pr-2", children: [
-      logo ? /* @__PURE__ */ jsx29("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
-      /* @__PURE__ */ jsx29("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ jsxs24("div", { className: "flex items-start justify-between gap-2", children: [
-        /* @__PURE__ */ jsxs24("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx29(
+  const body = /* @__PURE__ */ jsxs26("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs26("div", { className: "flex shrink-0 items-start gap-3 pr-2", children: [
+      logo ? /* @__PURE__ */ jsx32("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
+      /* @__PURE__ */ jsx32("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ jsxs26("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs26("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx32(
             "h4",
             {
               id: onClick && !action ? void 0 : titleId,
@@ -2607,12 +3295,12 @@ var IntegrationCard = ({
               children: name
             }
           ),
-          statusLabel[status] ? /* @__PURE__ */ jsx29("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
+          statusLabel[status] ? /* @__PURE__ */ jsx32("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
         ] }),
-        badge ? /* @__PURE__ */ jsx29("span", { className: "shrink-0", children: badge }) : null
+        badge ? /* @__PURE__ */ jsx32("span", { className: "shrink-0", children: badge }) : null
       ] }) })
     ] }),
-    description ? /* @__PURE__ */ jsx29(
+    description ? /* @__PURE__ */ jsx32(
       "p",
       {
         className: cn(
@@ -2622,19 +3310,19 @@ var IntegrationCard = ({
         children: description
       }
     ) : null,
-    action ? /* @__PURE__ */ jsxs24(Fragment4, { children: [
-      /* @__PURE__ */ jsx29("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
-      /* @__PURE__ */ jsx29("div", { className: "relative mt-3 shrink-0", children: action })
+    action ? /* @__PURE__ */ jsxs26(Fragment6, { children: [
+      /* @__PURE__ */ jsx32("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
+      /* @__PURE__ */ jsx32("div", { className: "relative mt-3 shrink-0", children: action })
     ] }) : null
   ] });
   const shellClass3 = cn(
-    catalogCardShellClass,
+    catalogCardShellClass2,
     dimmed && catalogCardMutedClass,
     locked && "cursor-default opacity-75",
     className
   );
   if (onClick && !action) {
-    return /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx32(
       "button",
       {
         type: "button",
@@ -2642,7 +3330,7 @@ var IntegrationCard = ({
         disabled: locked,
         "aria-label": ariaLabel,
         className: cn(
-          catalogCardInteractiveClass,
+          catalogCardInteractiveClass2,
           dimmed && catalogCardMutedClass,
           locked && "cursor-default opacity-75",
           className
@@ -2651,12 +3339,12 @@ var IntegrationCard = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx29("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
+  return /* @__PURE__ */ jsx32("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
 };
 
 // src/app/integrations/IntegrationsEmptyState.tsx
-import { useId as useId3 } from "react";
-import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useId as useId4 } from "react";
+import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 var IntegrationsEmptyState = ({
   title = "No integrations yet",
   description = "Connect a provider to start syncing data and powering your workforce.",
@@ -2664,8 +3352,8 @@ var IntegrationsEmptyState = ({
   action,
   className
 }) => {
-  const titleId = useId3();
-  return /* @__PURE__ */ jsxs25(
+  const titleId = useId4();
+  return /* @__PURE__ */ jsxs27(
     "section",
     {
       className: cn(
@@ -2675,7 +3363,7 @@ var IntegrationsEmptyState = ({
       ),
       "aria-labelledby": titleId,
       children: [
-        icon ? /* @__PURE__ */ jsx30(
+        icon ? /* @__PURE__ */ jsx33(
           "span",
           {
             className: cn(
@@ -2687,21 +3375,21 @@ var IntegrationsEmptyState = ({
             children: icon
           }
         ) : null,
-        /* @__PURE__ */ jsx30("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
-        description ? /* @__PURE__ */ jsx30("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
-        action ? /* @__PURE__ */ jsx30("div", { className: "mt-1", children: action }) : null
+        /* @__PURE__ */ jsx33("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx33("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
+        action ? /* @__PURE__ */ jsx33("div", { className: "mt-1", children: action }) : null
       ]
     }
   );
 };
 
 // src/app/integrations/PlanBadge.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var planBadgeClass = "inline-flex h-5 max-w-full shrink-0 items-center rounded-md border border-border bg-muted/90 px-2 text-[11px] font-normal text-muted-foreground dark:border-white/10 dark:bg-white/5 dark:text-muted-foreground";
-var PlanBadge = ({ children, className }) => /* @__PURE__ */ jsx31("span", { className: cn(planBadgeClass, className), children });
+var PlanBadge = ({ children, className }) => /* @__PURE__ */ jsx34("span", { className: cn(planBadgeClass, className), children });
 
 // src/app/integrations/ConnectionRow.tsx
-import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
 var logoShellClass2 = cn(
   "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg",
   TIMBAL_V2_LOGO_TILE
@@ -2716,14 +3404,14 @@ var ConnectionRow = ({
   ariaLabel,
   className
 }) => {
-  const inner = /* @__PURE__ */ jsxs26(Fragment5, { children: [
-    logo ? /* @__PURE__ */ jsx32("span", { className: logoShellClass2, children: logo }) : null,
-    /* @__PURE__ */ jsxs26("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx32("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
-      meta ? /* @__PURE__ */ jsx32("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
+  const inner = /* @__PURE__ */ jsxs28(Fragment7, { children: [
+    logo ? /* @__PURE__ */ jsx35("span", { className: logoShellClass2, children: logo }) : null,
+    /* @__PURE__ */ jsxs28("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx35("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
+      meta ? /* @__PURE__ */ jsx35("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
     ] }),
-    badge ? /* @__PURE__ */ jsx32("span", { className: "shrink-0", children: badge }) : null,
-    action ? /* @__PURE__ */ jsx32("span", { className: "shrink-0", children: action }) : null
+    badge ? /* @__PURE__ */ jsx35("span", { className: "shrink-0", children: badge }) : null,
+    action ? /* @__PURE__ */ jsx35("span", { className: "shrink-0", children: action }) : null
   ] });
   const rowClass2 = cn(
     "flex w-full items-center gap-3 px-4 py-3 text-left",
@@ -2731,7 +3419,7 @@ var ConnectionRow = ({
     className
   );
   if (onClick) {
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx35(
       "button",
       {
         type: "button",
@@ -2743,7 +3431,7 @@ var ConnectionRow = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx32("div", { role: "listitem", className: rowClass2, children: inner });
+  return /* @__PURE__ */ jsx35("div", { role: "listitem", className: rowClass2, children: inner });
 };
 var connectionRowListClass = cn(
   "overflow-hidden rounded-2xl",
@@ -2751,12 +3439,12 @@ var connectionRowListClass = cn(
 );
 
 // src/app/integrations/ConnectionRowList.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var ConnectionRowList = ({
   children,
   "aria-label": ariaLabel = "Connected integrations",
   className
-}) => /* @__PURE__ */ jsx33(
+}) => /* @__PURE__ */ jsx36(
   "div",
   {
     role: "list",
@@ -2767,7 +3455,7 @@ var ConnectionRowList = ({
 );
 
 // src/app/navigation/SubNav.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var SubNav = ({
   items,
   activeId,
@@ -2776,7 +3464,7 @@ var SubNav = ({
   "aria-label": ariaLabel = "Section navigation",
   layoutId
 }) => {
-  return /* @__PURE__ */ jsx34("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx37("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx37(
     PillSegmentedTabs,
     {
       value: activeId,
@@ -2790,13 +3478,13 @@ var SubNav = ({
 };
 
 // src/app/navigation/Breadcrumbs.tsx
-import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
 var Breadcrumbs = ({ items, className }) => {
-  return /* @__PURE__ */ jsx35("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx35("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx38("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx38("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ jsxs27("li", { className: "inline-flex items-center gap-1.5", children: [
-      index > 0 ? /* @__PURE__ */ jsx35("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
-      isLast ? /* @__PURE__ */ jsx35("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx35("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsxs29("li", { className: "inline-flex items-center gap-1.5", children: [
+      index > 0 ? /* @__PURE__ */ jsx38("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
+      isLast ? /* @__PURE__ */ jsx38("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx38("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ jsx38(
         "button",
         {
           type: "button",
@@ -2810,7 +3498,8 @@ var Breadcrumbs = ({ items, className }) => {
 };
 
 // src/app/forms/Field.tsx
-import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useId as useId5 } from "react";
+import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
 var Field = ({
   label,
   hint,
@@ -2819,11 +3508,11 @@ var Field = ({
   className,
   htmlFor
 }) => {
-  return /* @__PURE__ */ jsxs28("div", { className: cn("aui-app-field", appFieldClass, className), children: [
-    /* @__PURE__ */ jsx36("label", { className: appFieldLabelClass, htmlFor, children: label }),
+  return /* @__PURE__ */ jsxs30("div", { className: cn("aui-app-field", appFieldClass, className), children: [
+    /* @__PURE__ */ jsx39("label", { className: appFieldLabelClass, htmlFor, children: label }),
     children,
-    hint && !error ? /* @__PURE__ */ jsx36("p", { className: appFieldHintClass, children: hint }) : null,
-    error ? /* @__PURE__ */ jsx36("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
+    hint && !error ? /* @__PURE__ */ jsx39("p", { className: appFieldHintClass, children: hint }) : null,
+    error ? /* @__PURE__ */ jsx39("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
   ] });
 };
 var FieldInput = ({
@@ -2835,8 +3524,9 @@ var FieldInput = ({
   id,
   ...inputProps
 }) => {
-  const inputId = id ?? inputProps.name;
-  return /* @__PURE__ */ jsx36(
+  const autoId = useId5();
+  const inputId = id ?? inputProps.name ?? autoId;
+  return /* @__PURE__ */ jsx39(
     Field,
     {
       label,
@@ -2844,7 +3534,7 @@ var FieldInput = ({
       error,
       htmlFor: inputId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsx36(
+      children: /* @__PURE__ */ jsx39(
         "input",
         {
           id: inputId,
@@ -2858,7 +3548,8 @@ var FieldInput = ({
 };
 
 // src/app/forms/FieldTextarea.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { useId as useId6 } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var textareaClass = cn(
   appInputClass,
   "min-h-[5.5rem] resize-y py-2.5 leading-relaxed"
@@ -2872,8 +3563,9 @@ var FieldTextarea = ({
   id,
   ...props
 }) => {
-  const textareaId = id ?? props.name;
-  return /* @__PURE__ */ jsx37(
+  const autoId = useId6();
+  const textareaId = id ?? props.name ?? autoId;
+  return /* @__PURE__ */ jsx40(
     Field,
     {
       label,
@@ -2881,7 +3573,7 @@ var FieldTextarea = ({
       error,
       htmlFor: textareaId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx40(
         "textarea",
         {
           id: textareaId,
@@ -2895,8 +3587,9 @@ var FieldTextarea = ({
 };
 
 // src/app/forms/FieldSelect.tsx
+import { useId as useId7 } from "react";
 import { ChevronDownIcon } from "lucide-react";
-import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
 var selectWrapClass = "relative";
 var selectClass = cn(
   appInputClass,
@@ -2912,8 +3605,9 @@ var FieldSelect = ({
   id,
   ...props
 }) => {
-  const selectId = id ?? props.name;
-  return /* @__PURE__ */ jsx38(
+  const autoId = useId7();
+  const selectId = id ?? props.name ?? autoId;
+  return /* @__PURE__ */ jsx41(
     Field,
     {
       label,
@@ -2921,8 +3615,8 @@ var FieldSelect = ({
       error,
       htmlFor: selectId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsxs29("div", { className: selectWrapClass, children: [
-        /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsxs31("div", { className: selectWrapClass, children: [
+        /* @__PURE__ */ jsx41(
           "select",
           {
             id: selectId,
@@ -2932,7 +3626,7 @@ var FieldSelect = ({
             children
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx41(
           ChevronDownIcon,
           {
             className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground",
@@ -2945,7 +3639,8 @@ var FieldSelect = ({
 };
 
 // src/app/forms/FieldSwitch.tsx
-import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+import { useId as useId8 } from "react";
+import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
 var trackClass = cn(
   "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-[background,box-shadow,border-color] duration-200",
   "peer-focus-visible:ring-2 peer-focus-visible:ring-foreground/10",
@@ -2965,8 +3660,9 @@ var FieldSwitch = ({
   id,
   ...props
 }) => {
-  const inputId = id ?? props.name ?? "switch";
-  return /* @__PURE__ */ jsxs30(
+  const autoId = useId8();
+  const inputId = id ?? props.name ?? autoId;
+  return /* @__PURE__ */ jsxs32(
     "label",
     {
       className: cn(
@@ -2975,8 +3671,8 @@ var FieldSwitch = ({
       ),
       htmlFor: inputId,
       children: [
-        /* @__PURE__ */ jsxs30("span", { className: "relative mt-0.5", children: [
-          /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsxs32("span", { className: "relative mt-0.5", children: [
+          /* @__PURE__ */ jsx42(
             "input",
             {
               id: inputId,
@@ -2986,11 +3682,11 @@ var FieldSwitch = ({
               ...props
             }
           ),
-          /* @__PURE__ */ jsx39("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ jsx39("span", { className: thumbClass }) })
+          /* @__PURE__ */ jsx42("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ jsx42("span", { className: thumbClass }) })
         ] }),
-        /* @__PURE__ */ jsxs30("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsx39("span", { className: "text-sm font-medium text-foreground", children: label }),
-          description ? /* @__PURE__ */ jsx39("span", { className: "text-xs text-muted-foreground", children: description }) : null
+        /* @__PURE__ */ jsxs32("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx42("span", { className: "text-sm font-medium text-foreground", children: label }),
+          description ? /* @__PURE__ */ jsx42("span", { className: "text-xs text-muted-foreground", children: description }) : null
         ] })
       ]
     }
@@ -2999,13 +3695,13 @@ var FieldSwitch = ({
 
 // src/app/forms/SearchInput.tsx
 import { SearchIcon } from "lucide-react";
-import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var SearchInput = ({
   className,
   placeholder = "Search\u2026",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs33(
     "label",
     {
       className: cn(
@@ -3014,8 +3710,8 @@ var SearchInput = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx40(SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx43(SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx43(
           "input",
           {
             type: "search",
@@ -3030,26 +3726,26 @@ var SearchInput = ({
 };
 
 // src/app/forms/FormSection.tsx
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var FormSection = ({ title, children, className }) => {
   const density = useAppDensity();
   const sectionClass = useAppDensityClass("section");
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs34(
     "fieldset",
     {
       className: cn("aui-app-form-section", sectionClass, "border-0 p-0", className),
       children: [
-        title ? /* @__PURE__ */ jsx41("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
-        /* @__PURE__ */ jsx41("div", { className: cn("flex flex-col", density === "compact" ? "gap-2" : "gap-4"), children })
+        title ? /* @__PURE__ */ jsx44("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
+        /* @__PURE__ */ jsx44("div", { className: cn("flex flex-col", density === "compact" ? "gap-2" : "gap-4"), children })
       ]
     }
   );
 };
 
 // src/app/data/FilterBar.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var FilterBar = ({ children, className }) => {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       className: cn("aui-app-filter-bar", appFilterBarClass, className),
@@ -3061,41 +3757,539 @@ var FilterBar = ({ children, className }) => {
 };
 
 // src/app/data/FilterField.tsx
-import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
 var FilterField = ({
   label,
   children,
   className
 }) => {
-  return /* @__PURE__ */ jsxs33("div", { className: cn("aui-app-filter-field", appFieldClass, className), children: [
-    label ? /* @__PURE__ */ jsx43("span", { className: appFieldLabelClass, children: label }) : null,
+  return /* @__PURE__ */ jsxs35("div", { className: cn("aui-app-filter-field", appFieldClass, className), children: [
+    label ? /* @__PURE__ */ jsx46("span", { className: appFieldLabelClass, children: label }) : null,
     children
   ] });
 };
 
+// src/app/data/FilterDropdown.tsx
+import { useState as useState4, useMemo as useMemo2, useEffect as useEffect3 } from "react";
+import {
+  CalendarIcon,
+  ChevronDownIcon as ChevronDownIcon2,
+  ChevronRightIcon,
+  CircleDollarSignIcon,
+  ListFilterIcon,
+  SearchIcon as SearchIcon2,
+  TrendingUpIcon,
+  UserIcon,
+  WalletIcon
+} from "lucide-react";
+import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
+var DEFAULT_CONTACTS = [
+  { id: "1", name: "Pedro Olivares Sanchez", email: "polivares@timbal.ai", initials: "PE" },
+  { id: "2", name: "John Doe", email: "john@example.com", initials: "JD" },
+  { id: "3", name: "Sarah Smith", email: "sarah@example.com", initials: "SS" }
+];
+var OPERATORS = [
+  { id: "greater_than", label: "Greater than..." },
+  { id: "less_than", label: "Less than..." },
+  { id: "equals", label: "Equals..." }
+];
+function FilterDropdown({
+  filters,
+  onFiltersChange,
+  initialFilters,
+  contacts = DEFAULT_CONTACTS,
+  className
+}) {
+  const [isOpen, setIsOpen] = useState4(false);
+  const [activeMenu, setActiveMenu] = useState4("contact");
+  const [isMobile, setIsMobile] = useState4(false);
+  useEffect3(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  const [selectedContacts, setSelectedContacts] = useState4(
+    filters?.contacts ?? initialFilters?.contacts ?? []
+  );
+  const [walletInput, setWalletInput] = useState4(filters?.walletAddress ?? initialFilters?.walletAddress ?? "");
+  const [appliedWallet, setAppliedWallet] = useState4(filters?.walletAddress ?? initialFilters?.walletAddress ?? "");
+  const [selectedDatePreset, setSelectedDatePreset] = useState4(
+    filters?.lastInvoiceDate ?? initialFilters?.lastInvoiceDate ?? null
+  );
+  const [customDateFrom, setCustomDateFrom] = useState4(
+    filters?.customDateRange?.from ?? initialFilters?.customDateRange?.from ?? ""
+  );
+  const [customDateTo, setCustomDateTo] = useState4(
+    filters?.customDateRange?.to ?? initialFilters?.customDateRange?.to ?? ""
+  );
+  const [ltvOperator, setLtvOperator] = useState4(
+    filters?.lifetimeValue?.operator ?? initialFilters?.lifetimeValue?.operator ?? "greater_than"
+  );
+  const [ltvValue, setLtvValue] = useState4(filters?.lifetimeValue?.value ?? initialFilters?.lifetimeValue?.value ?? "");
+  const [isLtvOperatorOpen, setLtvOperatorOpen] = useState4(false);
+  const [outstandingOperator, setOutstandingOperator] = useState4(
+    filters?.outstanding?.operator ?? initialFilters?.outstanding?.operator ?? "greater_than"
+  );
+  const [outstandingValue, setOutstandingValue] = useState4(filters?.outstanding?.value ?? initialFilters?.outstanding?.value ?? "");
+  const [isOutstandingOperatorOpen, setOutstandingOperatorOpen] = useState4(false);
+  useEffect3(() => {
+    if (filters) {
+      setSelectedContacts(filters.contacts ?? []);
+      setWalletInput(filters.walletAddress ?? "");
+      setAppliedWallet(filters.walletAddress ?? "");
+      setSelectedDatePreset(filters.lastInvoiceDate ?? null);
+      setCustomDateFrom(filters.customDateRange?.from ?? "");
+      setCustomDateTo(filters.customDateRange?.to ?? "");
+      setLtvOperator(filters.lifetimeValue?.operator ?? "greater_than");
+      setLtvValue(filters.lifetimeValue?.value ?? "");
+      setOutstandingOperator(filters.outstanding?.operator ?? "greater_than");
+      setOutstandingValue(filters.outstanding?.value ?? "");
+    }
+  }, [filters]);
+  const [contactSearch, setContactSearch] = useState4("");
+  const [walletSearch, setWalletSearch] = useState4("");
+  const refDate = useMemo2(() => new Date(2026, 5, 26), []);
+  const presets = useMemo2(() => {
+    const year = refDate.getFullYear();
+    const month = refDate.getMonth();
+    const lastMonthDate = new Date(year, month - 1, 1);
+    const lastMonthLabel = lastMonthDate.toLocaleDateString("en-US", { month: "short", year: "numeric" });
+    const thisMonthLabel = refDate.toLocaleDateString("en-US", { month: "short", year: "numeric" });
+    const thisQuarter = Math.floor(month / 3) + 1;
+    const thisQuarterLabel = `Q${thisQuarter} ${year}`;
+    const lastQuarter = thisQuarter === 1 ? 4 : thisQuarter - 1;
+    const lastQuarterYear = thisQuarter === 1 ? year - 1 : year;
+    const lastQuarterLabel = `Q${lastQuarter} ${lastQuarterYear}`;
+    const thisYearLabel = `${year}`;
+    const last30 = new Date(refDate);
+    last30.setDate(refDate.getDate() - 30);
+    const formatDate = (d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+    const last30Label = `${formatDate(last30)} - ${formatDate(refDate)}`;
+    const last90 = new Date(refDate);
+    last90.setDate(refDate.getDate() - 90);
+    const last90Label = `${formatDate(last90)} - ${formatDate(refDate)}`;
+    return [
+      { id: "last_month", label: "Last month", date: lastMonthLabel },
+      { id: "this_month", label: "This month", date: thisMonthLabel },
+      { id: "this_quarter", label: "This quarter", date: thisQuarterLabel },
+      { id: "last_quarter", label: "Last quarter", date: lastQuarterLabel },
+      { id: "this_year", label: "This year", date: thisYearLabel },
+      { id: "last_30_days", label: "Last 30 days", date: last30Label },
+      { id: "last_90_days", label: "Last 90 days", date: last90Label },
+      { id: "custom", label: "Custom range", date: "" }
+    ];
+  }, [refDate]);
+  const filteredContacts = useMemo2(() => {
+    if (!contactSearch) return contacts;
+    const query = contactSearch.toLowerCase();
+    return contacts.filter(
+      (c) => c.name.toLowerCase().includes(query) || c.email.toLowerCase().includes(query)
+    );
+  }, [contacts, contactSearch]);
+  const handleContactToggle = (contactName) => {
+    const next = selectedContacts.includes(contactName) ? selectedContacts.filter((name) => name !== contactName) : [...selectedContacts, contactName];
+    setSelectedContacts(next);
+    notifyChanges({ contacts: next });
+    setIsOpen(false);
+  };
+  const handleWalletApply = () => {
+    setAppliedWallet(walletInput);
+    notifyChanges({ walletAddress: walletInput });
+    setIsOpen(false);
+  };
+  const handleWalletClear = () => {
+    setWalletInput("");
+    setAppliedWallet("");
+    notifyChanges({ walletAddress: "" });
+    setIsOpen(false);
+  };
+  const handleDatePresetSelect = (presetId) => {
+    setSelectedDatePreset(presetId);
+    if (presetId !== "custom") {
+      notifyChanges({ lastInvoiceDate: presetId, customDateRange: void 0 });
+      setIsOpen(false);
+    }
+  };
+  const handleCustomDateApply = () => {
+    notifyChanges({
+      lastInvoiceDate: "custom",
+      customDateRange: { from: customDateFrom, to: customDateTo }
+    });
+    setIsOpen(false);
+  };
+  const handleLtvApply = () => {
+    notifyChanges({
+      lifetimeValue: ltvValue ? { operator: ltvOperator, value: ltvValue } : null
+    });
+    setIsOpen(false);
+  };
+  const handleLtvClear = () => {
+    setLtvValue("");
+    notifyChanges({ lifetimeValue: null });
+    setIsOpen(false);
+  };
+  const handleOutstandingApply = () => {
+    notifyChanges({
+      outstanding: outstandingValue ? { operator: outstandingOperator, value: outstandingValue } : null
+    });
+    setIsOpen(false);
+  };
+  const handleOutstandingClear = () => {
+    setOutstandingValue("");
+    notifyChanges({ outstanding: null });
+    setIsOpen(false);
+  };
+  const notifyChanges = (overrides) => {
+    const current = {
+      contacts: selectedContacts,
+      walletAddress: appliedWallet,
+      lastInvoiceDate: selectedDatePreset,
+      customDateRange: customDateFrom || customDateTo ? { from: customDateFrom, to: customDateTo } : void 0,
+      lifetimeValue: ltvValue ? { operator: ltvOperator, value: ltvValue } : null,
+      outstanding: outstandingValue ? { operator: outstandingOperator, value: outstandingValue } : null,
+      ...overrides
+    };
+    onFiltersChange?.(current);
+  };
+  const menuItems = [
+    { id: "contact", label: "Contact", icon: /* @__PURE__ */ jsx47(UserIcon, { className: "size-4" }) },
+    { id: "wallet", label: "Wallet address", icon: /* @__PURE__ */ jsx47(WalletIcon, { className: "size-4" }) },
+    { id: "date", label: "Last invoice date", icon: /* @__PURE__ */ jsx47(CalendarIcon, { className: "size-4" }) },
+    { id: "ltv", label: "Lifetime value", icon: /* @__PURE__ */ jsx47(TrendingUpIcon, { className: "size-4" }) },
+    { id: "outstanding", label: "Outstanding", icon: /* @__PURE__ */ jsx47(CircleDollarSignIcon, { className: "size-4" }) }
+  ];
+  const activeIdx = menuItems.findIndex((item) => item.id === activeMenu);
+  return /* @__PURE__ */ jsx47("div", { className: cn("inline-block", className), children: /* @__PURE__ */ jsxs36(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx47(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        shape: "pill",
+        className: "border-dashed font-medium text-muted-foreground hover:text-foreground",
+        iconLeading: /* @__PURE__ */ jsx47(ListFilterIcon, { className: "size-4" }),
+        children: "Filter"
+      }
+    ) }),
+    /* @__PURE__ */ jsx47(
+      PopoverContent,
+      {
+        variant: "list",
+        align: "start",
+        className: "overflow-visible border-none bg-transparent p-0 shadow-none max-w-[calc(100vw-32px)] md:max-w-none",
+        children: /* @__PURE__ */ jsxs36("div", { className: "relative flex flex-col md:flex-row items-stretch md:items-start w-[calc(100vw-32px)] max-w-[340px] md:w-auto md:max-w-none", children: [
+          /* @__PURE__ */ jsx47("div", { className: "w-full md:w-56 rounded-xl border border-border bg-popover p-1.5 shadow-lg", children: menuItems.map((item) => {
+            const isActive = activeMenu === item.id;
+            return /* @__PURE__ */ jsxs36(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  "flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm text-left transition-colors outline-none",
+                  isActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                ),
+                onMouseEnter: () => !isMobile && setActiveMenu(item.id),
+                onClick: () => setActiveMenu(item.id),
+                children: [
+                  /* @__PURE__ */ jsxs36("span", { className: "flex items-center gap-2", children: [
+                    item.icon,
+                    /* @__PURE__ */ jsx47("span", { children: item.label })
+                  ] }),
+                  /* @__PURE__ */ jsx47(ChevronRightIcon, { className: "size-4 text-muted-foreground/50" })
+                ]
+              },
+              item.id
+            );
+          }) }),
+          activeMenu && /* @__PURE__ */ jsxs36(
+            "div",
+            {
+              className: "relative left-0 mt-2 w-full md:absolute md:left-[calc(100%+6px)] md:w-80 rounded-xl border border-border bg-popover p-3 shadow-lg transition-all duration-150 md:mt-0",
+              style: isMobile ? {} : { top: `${activeIdx * 36 + 6}px` },
+              children: [
+                activeMenu === "contact" && /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
+                  /* @__PURE__ */ jsxs36("div", { className: "relative flex items-center", children: [
+                    /* @__PURE__ */ jsx47(SearchIcon2, { className: "absolute left-2.5 size-4 text-muted-foreground/60" }),
+                    /* @__PURE__ */ jsx47(
+                      "input",
+                      {
+                        type: "text",
+                        placeholder: "Search by name or email...",
+                        value: contactSearch,
+                        onChange: (e) => setContactSearch(e.target.value),
+                        className: "w-full rounded-lg border border-border bg-background py-1.5 pl-8 pr-3 text-sm outline-none placeholder:text-muted-foreground/60 focus:border-border"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx47("div", { className: "max-h-48 overflow-y-auto flex flex-col gap-1 pr-1", children: filteredContacts.length === 0 ? /* @__PURE__ */ jsx47("p", { className: "py-4 text-center text-xs text-muted-foreground", children: "No contacts found" }) : filteredContacts.map((contact) => {
+                    const isChecked = selectedContacts.includes(contact.name);
+                    return /* @__PURE__ */ jsxs36(
+                      "label",
+                      {
+                        className: "flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 hover:bg-muted/50 transition-colors",
+                        children: [
+                          /* @__PURE__ */ jsx47(
+                            Checkbox,
+                            {
+                              checked: isChecked,
+                              onCheckedChange: () => handleContactToggle(contact.name)
+                            }
+                          ),
+                          /* @__PURE__ */ jsx47(Avatar, { variant: "secondary", children: /* @__PURE__ */ jsx47(AvatarFallback, { children: contact.initials }) }),
+                          /* @__PURE__ */ jsx47("span", { className: "text-sm font-medium text-foreground", children: contact.name })
+                        ]
+                      },
+                      contact.id
+                    );
+                  }) })
+                ] }),
+                activeMenu === "wallet" && /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
+                  /* @__PURE__ */ jsx47("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsx47(
+                    "input",
+                    {
+                      type: "text",
+                      placeholder: "Search by wallet...",
+                      value: walletInput,
+                      onChange: (e) => setWalletInput(e.target.value),
+                      className: "w-full rounded-lg border border-border bg-background px-3 py-1.5 text-sm outline-none placeholder:text-muted-foreground/60"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-end gap-2 pt-1 border-t border-border/40", children: [
+                    /* @__PURE__ */ jsx47(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: handleWalletClear,
+                        className: "text-muted-foreground hover:text-foreground h-8 px-3",
+                        children: "Clear"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx47(
+                      Button,
+                      {
+                        color: "primary",
+                        size: "sm",
+                        onClick: handleWalletApply,
+                        className: "h-8 px-3",
+                        children: "Apply"
+                      }
+                    )
+                  ] })
+                ] }),
+                activeMenu === "date" && /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-1", children: [
+                  presets.map((preset) => {
+                    const isSelected = selectedDatePreset === preset.id;
+                    return /* @__PURE__ */ jsxs36(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => handleDatePresetSelect(preset.id),
+                        className: cn(
+                          "flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-sm text-left transition-colors outline-none",
+                          isSelected ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx47("span", { children: preset.label }),
+                          preset.date && /* @__PURE__ */ jsx47("span", { className: "text-xs text-muted-foreground/70", children: preset.date })
+                        ]
+                      },
+                      preset.id
+                    );
+                  }),
+                  selectedDatePreset === "custom" && /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2 mt-2 pt-2 border-t border-border/40", children: [
+                    /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx47(
+                        "input",
+                        {
+                          type: "date",
+                          value: customDateFrom,
+                          onChange: (e) => setCustomDateFrom(e.target.value),
+                          className: "w-full rounded-lg border border-border bg-background px-2 py-1 text-xs outline-none"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx47("span", { className: "text-xs text-muted-foreground", children: "to" }),
+                      /* @__PURE__ */ jsx47(
+                        "input",
+                        {
+                          type: "date",
+                          value: customDateTo,
+                          onChange: (e) => setCustomDateTo(e.target.value),
+                          className: "w-full rounded-lg border border-border bg-background px-2 py-1 text-xs outline-none"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx47("div", { className: "flex justify-end gap-2", children: /* @__PURE__ */ jsx47(
+                      Button,
+                      {
+                        color: "primary",
+                        size: "sm",
+                        onClick: handleCustomDateApply,
+                        className: "h-7 text-xs px-2.5",
+                        children: "Apply"
+                      }
+                    ) })
+                  ] })
+                ] }),
+                activeMenu === "ltv" && /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
+                  /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs36("div", { className: "relative shrink-0", children: [
+                      /* @__PURE__ */ jsxs36(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setLtvOperatorOpen(!isLtvOperatorOpen),
+                          className: "flex h-9 items-center gap-1 rounded-lg border border-border bg-background px-2.5 text-xs font-normal text-muted-foreground hover:bg-muted/50 hover:text-foreground outline-none whitespace-nowrap",
+                          children: [
+                            /* @__PURE__ */ jsx47("span", { children: OPERATORS.find((op) => op.id === ltvOperator)?.label.replace("...", "") }),
+                            /* @__PURE__ */ jsx47(ChevronDownIcon2, { className: "size-3" })
+                          ]
+                        }
+                      ),
+                      isLtvOperatorOpen && /* @__PURE__ */ jsx47("div", { className: "absolute left-0 top-full z-50 mt-1 w-32 rounded-lg border border-border bg-popover p-1 shadow-md", children: OPERATORS.map((op) => /* @__PURE__ */ jsx47(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setLtvOperator(op.id);
+                            setLtvOperatorOpen(false);
+                          },
+                          className: "w-full rounded-md px-2 py-1 text-left text-xs text-foreground hover:bg-muted outline-none",
+                          children: op.label
+                        },
+                        op.id
+                      )) })
+                    ] }),
+                    /* @__PURE__ */ jsx47(
+                      "input",
+                      {
+                        type: "text",
+                        placeholder: "0.00",
+                        value: ltvValue,
+                        onChange: (e) => setLtvValue(e.target.value),
+                        className: "h-9 flex-1 min-w-0 rounded-lg border border-border bg-background px-3 py-1 text-sm outline-none placeholder:text-muted-foreground/60"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-end gap-2 pt-1 border-t border-border/40", children: [
+                    /* @__PURE__ */ jsx47(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: handleLtvClear,
+                        className: "text-muted-foreground hover:text-foreground h-8 px-3",
+                        children: "Clear"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx47(
+                      Button,
+                      {
+                        color: "primary",
+                        size: "sm",
+                        onClick: handleLtvApply,
+                        className: "h-8 px-3",
+                        children: "Apply"
+                      }
+                    )
+                  ] })
+                ] }),
+                activeMenu === "outstanding" && /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
+                  /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs36("div", { className: "relative shrink-0", children: [
+                      /* @__PURE__ */ jsxs36(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => setOutstandingOperatorOpen(!isOutstandingOperatorOpen),
+                          className: "flex h-9 items-center gap-1 rounded-lg border border-border bg-background px-2.5 text-xs font-normal text-muted-foreground hover:bg-muted/50 hover:text-foreground outline-none whitespace-nowrap",
+                          children: [
+                            /* @__PURE__ */ jsx47("span", { children: OPERATORS.find((op) => op.id === outstandingOperator)?.label.replace("...", "") }),
+                            /* @__PURE__ */ jsx47(ChevronDownIcon2, { className: "size-3" })
+                          ]
+                        }
+                      ),
+                      isOutstandingOperatorOpen && /* @__PURE__ */ jsx47("div", { className: "absolute left-0 top-full z-50 mt-1 w-32 rounded-lg border border-border bg-popover p-1 shadow-md", children: OPERATORS.map((op) => /* @__PURE__ */ jsx47(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setOutstandingOperator(op.id);
+                            setOutstandingOperatorOpen(false);
+                          },
+                          className: "w-full rounded-md px-2 py-1 text-left text-xs text-foreground hover:bg-muted outline-none",
+                          children: op.label
+                        },
+                        op.id
+                      )) })
+                    ] }),
+                    /* @__PURE__ */ jsx47(
+                      "input",
+                      {
+                        type: "text",
+                        placeholder: "0.00",
+                        value: outstandingValue,
+                        onChange: (e) => setOutstandingValue(e.target.value),
+                        className: "h-9 flex-1 min-w-0 rounded-lg border border-border bg-background px-3 py-1 text-sm outline-none placeholder:text-muted-foreground/60"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-end gap-2 pt-1 border-t border-border/40", children: [
+                    /* @__PURE__ */ jsx47(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: handleOutstandingClear,
+                        className: "text-muted-foreground hover:text-foreground h-8 px-3",
+                        children: "Clear"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx47(
+                      Button,
+                      {
+                        color: "primary",
+                        size: "sm",
+                        onClick: handleOutstandingApply,
+                        className: "h-8 px-3",
+                        children: "Apply"
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] }) });
+}
+
 // src/app/data/DataTable.tsx
-import { useEffect as useEffect2, useMemo as useMemo2, useState as useState4 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useState as useState5 } from "react";
 import {
   ArrowDownIcon,
   ArrowUpDownIcon,
   ArrowUpIcon,
   ChevronLeftIcon,
-  ChevronRightIcon
+  ChevronRightIcon as ChevronRightIcon2
 } from "lucide-react";
-import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
-var shellClass2 = "overflow-hidden rounded-xl border border-border bg-gradient-to-b from-elevated-from to-elevated-to shadow-card";
-var tableClass = "w-full border-collapse bg-transparent text-sm";
-var headRowClass = "bg-muted/40";
-var headCellClass = "border-b border-border/70 px-4 py-2.5 text-left text-[11px] font-semibold uppercase tracking-[0.04em] text-muted-foreground/90";
-var bodyCellClass = "border-b border-border/40 bg-transparent px-4 py-2.5 text-foreground";
-var rowClass = "bg-transparent transition-colors hover:bg-muted/40 data-[clickable=true]:cursor-pointer data-[selected=true]:bg-primary/[0.06]";
-var footCellClass = "border-t border-border/60 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground";
+import { jsx as jsx48, jsxs as jsxs37 } from "react/jsx-runtime";
+var shellClass2 = "w-full";
+var tableClass = "w-full border-separate border-spacing-0 bg-transparent text-sm";
+var headRowClass = "";
+var headCellClass = "bg-gradient-to-b from-white to-[#F9FAFB] dark:from-[#1F242F] dark:to-[#10121C] border-t border-b border-border px-4 py-2.5 text-left text-xs font-medium text-muted-foreground/90 first:rounded-l-lg first:border-l last:rounded-r-lg last:border-r shadow-skeuomorphic-bordered";
+var bodyCellClass = "border-b border-border/40 bg-transparent px-4 py-4 text-foreground";
+var rowClass = "bg-transparent transition-colors hover:bg-muted/20 data-[clickable=true]:cursor-pointer data-[selected=true]:bg-primary/[0.04]";
+var footCellClass = "border-t border-border/40 bg-transparent px-4 py-3 text-xs text-muted-foreground";
 var footInnerClass = "flex flex-wrap items-center gap-2";
 var emptyCellClass = "bg-transparent px-4 py-10 text-center text-sm text-muted-foreground";
-var sortButtonClass = "group inline-flex min-w-0 items-center gap-1.5 rounded-md -mx-1 px-1 py-0.5 text-left font-semibold text-muted-foreground/90 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10";
-var stickyHeadClass = "sticky top-0 z-[1] bg-muted/95 shadow-[0_1px_0_0_hsl(var(--border)/0.6)] backdrop-blur-sm";
-var selectCellClass = "w-10 px-4 py-2.5 align-middle";
-var pagerButtonClass = "inline-flex size-7 items-center justify-center rounded-md border border-border bg-gradient-to-b from-elevated-from to-elevated-to text-muted-foreground shadow-card transition-colors hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to hover:text-foreground disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10";
+var sortButtonClass = "group inline-flex min-w-0 items-center gap-1.5 rounded-md -mx-1 px-1 py-0.5 text-left font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10";
+var stickyHeadClass = "sticky top-0 z-[1] bg-background/95 shadow-[0_1px_0_0_hsl(var(--border)/0.4)] backdrop-blur-sm";
+var selectCellClass = "w-10 px-4 py-4 align-middle";
+var pagerButtonClass = "inline-flex size-7 items-center justify-center rounded-md border border-border bg-background text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10";
 var alignClass = {
   left: "text-left",
   center: "text-center",
@@ -3125,12 +4319,12 @@ function SortIndicator({
 }) {
   const iconClass = "size-3.5 shrink-0 opacity-60 group-hover:opacity-100";
   if (!active) {
-    return /* @__PURE__ */ jsx44(ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ jsx48(ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
   }
   if (direction === "desc") {
-    return /* @__PURE__ */ jsx44(ArrowDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ jsx48(ArrowDownIcon, { className: iconClass, "aria-hidden": true });
   }
-  return /* @__PURE__ */ jsx44(ArrowUpIcon, { className: iconClass, "aria-hidden": true });
+  return /* @__PURE__ */ jsx48(ArrowUpIcon, { className: iconClass, "aria-hidden": true });
 }
 function DataTable({
   columns,
@@ -3162,7 +4356,7 @@ function DataTable({
   defaultPageIndex = 0,
   onPageChange
 }) {
-  const [uncontrolledSort, setUncontrolledSort] = useState4(
+  const [uncontrolledSort, setUncontrolledSort] = useState5(
     defaultSort
   );
   const isSortControlled = sortProp !== void 0;
@@ -3173,19 +4367,19 @@ function DataTable({
     }
     onSortChange?.(next);
   };
-  const [uncontrolledSelected, setUncontrolledSelected] = useState4(
+  const [uncontrolledSelected, setUncontrolledSelected] = useState5(
     defaultSelectedKeys ?? []
   );
   const isSelectionControlled = selectedKeysProp !== void 0;
   const selectedKeys = isSelectionControlled ? selectedKeysProp : uncontrolledSelected;
-  const selectedSet = useMemo2(() => new Set(selectedKeys), [selectedKeys]);
+  const selectedSet = useMemo3(() => new Set(selectedKeys), [selectedKeys]);
   const setSelected = (next) => {
     if (!isSelectionControlled) {
       setUncontrolledSelected(next);
     }
     onSelectionChange?.(next);
   };
-  const [uncontrolledPage, setUncontrolledPage] = useState4(defaultPageIndex);
+  const [uncontrolledPage, setUncontrolledPage] = useState5(defaultPageIndex);
   const isPageControlled = pageIndexProp !== void 0;
   const rawPageIndex = isPageControlled ? pageIndexProp : uncontrolledPage;
   const setPage = (next) => {
@@ -3194,7 +4388,7 @@ function DataTable({
     }
     onPageChange?.(next);
   };
-  const sortedRows = useMemo2(() => {
+  const sortedRows = useMemo3(() => {
     if (!sort) return rows;
     const column = columns.find((col) => col.id === sort.columnId);
     if (!column?.sortable) return rows;
@@ -3213,13 +4407,13 @@ function DataTable({
   const paginated = typeof pageSize === "number" && pageSize > 0;
   const pageCount = paginated ? Math.max(1, Math.ceil(sortedRows.length / pageSize)) : 1;
   const pageIndex = Math.min(Math.max(0, rawPageIndex), pageCount - 1);
-  useEffect2(() => {
+  useEffect4(() => {
     if (!paginated || isPageControlled) return;
     if (uncontrolledPage > pageCount - 1) {
       setUncontrolledPage(pageCount - 1);
     }
   }, [paginated, isPageControlled, uncontrolledPage, pageCount]);
-  const visibleRows = useMemo2(() => {
+  const visibleRows = useMemo3(() => {
     if (!paginated) return sortedRows;
     const start = pageIndex * pageSize;
     return sortedRows.slice(start, start + pageSize);
@@ -3228,7 +4422,7 @@ function DataTable({
   const headPad = dense ? "px-3 py-2" : void 0;
   const colSpan = columns.length + (selectable ? 1 : 0);
   if (!loading && rows.length === 0 && emptyMode === "replace") {
-    return /* @__PURE__ */ jsx44(EmptyState, { title: emptyTitle, description: emptyDescription, className });
+    return /* @__PURE__ */ jsx48(EmptyState, { title: emptyTitle, description: emptyDescription, className });
   }
   const allKeys = sortedRows.map(getRowKey);
   const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));
@@ -3253,10 +4447,10 @@ function DataTable({
   const hasPager = paginated && !loading && sortedRows.length > 0;
   const hasFoot = (showRowCount || footer || hasPager) && (loading || sortedRows.length > 0);
   const skeletonCount = loadingRows ?? pageSize ?? 5;
-  return /* @__PURE__ */ jsx44("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ jsx44("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs34("table", { className: tableClass, children: [
-    caption ? /* @__PURE__ */ jsx44("caption", { className: "sr-only", children: caption }) : null,
-    /* @__PURE__ */ jsx44("thead", { className: cn(headRowClass, stickyHeader && stickyHeadClass), children: /* @__PURE__ */ jsxs34("tr", { children: [
-      selectable ? /* @__PURE__ */ jsx44("th", { scope: "col", className: cn(selectCellClass, headPad), children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx48("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ jsx48("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs37("table", { className: tableClass, children: [
+    caption ? /* @__PURE__ */ jsx48("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ jsx48("thead", { className: cn(headRowClass, stickyHeader && stickyHeadClass), children: /* @__PURE__ */ jsxs37("tr", { children: [
+      selectable ? /* @__PURE__ */ jsx48("th", { scope: "col", className: cn(selectCellClass, headPad), children: /* @__PURE__ */ jsx48(
         Checkbox,
         {
           checked: headerCheckedState,
@@ -3268,19 +4462,19 @@ function DataTable({
       columns.map((col) => {
         const isSorted = sort?.columnId === col.id;
         const ariaSort = col.sortable ? isSorted ? sort.direction === "asc" ? "ascending" : "descending" : "none" : void 0;
-        const headerContent = col.sortable ? /* @__PURE__ */ jsxs34(
+        const headerContent = col.sortable ? /* @__PURE__ */ jsxs37(
           "button",
           {
             type: "button",
             className: sortButtonClass,
             onClick: () => setSort(nextSort(sort, col.id)),
             children: [
-              /* @__PURE__ */ jsx44("span", { className: "truncate", children: col.header }),
-              /* @__PURE__ */ jsx44(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
+              /* @__PURE__ */ jsx48("span", { className: "truncate", children: col.header }),
+              /* @__PURE__ */ jsx48(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
             ]
           }
         ) : col.header;
-        return /* @__PURE__ */ jsx44(
+        return /* @__PURE__ */ jsx48(
           "th",
           {
             scope: "col",
@@ -3297,9 +4491,9 @@ function DataTable({
         );
       })
     ] }) }),
-    /* @__PURE__ */ jsx44("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: loading ? Array.from({ length: skeletonCount }).map((_, rowIdx) => /* @__PURE__ */ jsxs34("tr", { className: rowClass, "aria-hidden": true, children: [
-      selectable ? /* @__PURE__ */ jsx44("td", { className: cn(selectCellClass, cellPad), children: /* @__PURE__ */ jsx44(Skeleton, { className: "size-4 rounded-[4px]" }) }) : null,
-      columns.map((col) => /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx48("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: loading ? Array.from({ length: skeletonCount }).map((_, rowIdx) => /* @__PURE__ */ jsxs37("tr", { className: rowClass, "aria-hidden": true, children: [
+      selectable ? /* @__PURE__ */ jsx48("td", { className: cn(selectCellClass, cellPad), children: /* @__PURE__ */ jsx48(Skeleton, { className: "size-4 rounded-[4px]" }) }) : null,
+      columns.map((col) => /* @__PURE__ */ jsx48(
         "td",
         {
           className: cn(
@@ -3308,17 +4502,17 @@ function DataTable({
             col.align && alignClass[col.align],
             col.className
           ),
-          children: /* @__PURE__ */ jsx44(Skeleton, { className: "h-4 w-[60%]" })
+          children: /* @__PURE__ */ jsx48(Skeleton, { className: "h-4 w-[60%]" })
         },
         col.id
       ))
-    ] }, `skeleton-${rowIdx}`)) : visibleRows.length === 0 ? /* @__PURE__ */ jsx44("tr", { children: /* @__PURE__ */ jsx44("td", { colSpan, className: emptyCellClass, children: /* @__PURE__ */ jsxs34("div", { className: "flex flex-col items-center gap-1", children: [
-      /* @__PURE__ */ jsx44("p", { className: "font-medium text-foreground", children: emptyTitle }),
-      emptyDescription ? /* @__PURE__ */ jsx44("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
+    ] }, `skeleton-${rowIdx}`)) : visibleRows.length === 0 ? /* @__PURE__ */ jsx48("tr", { children: /* @__PURE__ */ jsx48("td", { colSpan, className: emptyCellClass, children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx48("p", { className: "font-medium text-foreground", children: emptyTitle }),
+      emptyDescription ? /* @__PURE__ */ jsx48("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
     ] }) }) }) : visibleRows.map((row) => {
       const key = getRowKey(row);
       const isSelected = selectedSet.has(key);
-      return /* @__PURE__ */ jsxs34(
+      return /* @__PURE__ */ jsxs37(
         "tr",
         {
           className: rowClass,
@@ -3334,12 +4528,12 @@ function DataTable({
           tabIndex: onRowClick ? 0 : void 0,
           role: onRowClick ? "button" : void 0,
           children: [
-            selectable ? /* @__PURE__ */ jsx44(
+            selectable ? /* @__PURE__ */ jsx48(
               "td",
               {
                 className: cn(selectCellClass, cellPad),
                 onClick: (event) => event.stopPropagation(),
-                children: /* @__PURE__ */ jsx44(
+                children: /* @__PURE__ */ jsx48(
                   Checkbox,
                   {
                     checked: isSelected,
@@ -3349,7 +4543,7 @@ function DataTable({
                 )
               }
             ) : null,
-            columns.map((col) => /* @__PURE__ */ jsx44(
+            columns.map((col) => /* @__PURE__ */ jsx48(
               "td",
               {
                 className: cn(
@@ -3359,7 +4553,7 @@ function DataTable({
                   col.align && alignClass[col.align],
                   col.className
                 ),
-                children: col.truncate ? /* @__PURE__ */ jsx44("div", { className: "truncate", children: col.cell(row) }) : col.cell(row)
+                children: col.truncate ? /* @__PURE__ */ jsx48("div", { className: "truncate", children: col.cell(row) }) : col.cell(row)
               },
               col.id
             ))
@@ -3368,7 +4562,7 @@ function DataTable({
         key
       );
     }) }),
-    hasFoot ? /* @__PURE__ */ jsx44("tfoot", { children: /* @__PURE__ */ jsx44("tr", { children: /* @__PURE__ */ jsx44("td", { colSpan, className: footCellClass, children: /* @__PURE__ */ jsxs34(
+    hasFoot ? /* @__PURE__ */ jsx48("tfoot", { children: /* @__PURE__ */ jsx48("tr", { children: /* @__PURE__ */ jsx48("td", { colSpan, className: footCellClass, children: /* @__PURE__ */ jsxs37(
       "div",
       {
         className: cn(
@@ -3376,18 +4570,18 @@ function DataTable({
           (showRowCount || footer || hasPager) && "justify-between"
         ),
         children: [
-          /* @__PURE__ */ jsxs34("div", { className: footInnerClass, children: [
-            showRowCount ? /* @__PURE__ */ jsxs34("span", { children: [
+          /* @__PURE__ */ jsxs37("div", { className: footInnerClass, children: [
+            showRowCount ? /* @__PURE__ */ jsxs37("span", { children: [
               rowCountText,
               selectable && selectedSet.size > 0 ? ` \xB7 ${selectedSet.size} selected` : null
-            ] }) : selectable && selectedSet.size > 0 ? /* @__PURE__ */ jsxs34("span", { children: [
+            ] }) : selectable && selectedSet.size > 0 ? /* @__PURE__ */ jsxs37("span", { children: [
               selectedSet.size,
               " selected"
             ] }) : null,
             footer
           ] }),
-          hasPager ? /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs34("span", { className: "tabular-nums", children: [
+          hasPager ? /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs37("span", { className: "tabular-nums", children: [
               pageIndex * pageSize + 1,
               "\u2013",
               Math.min(
@@ -3398,8 +4592,8 @@ function DataTable({
               "of ",
               sortedRows.length
             ] }),
-            /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx44(
+            /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx48(
                 "button",
                 {
                   type: "button",
@@ -3407,10 +4601,10 @@ function DataTable({
                   onClick: () => setPage(pageIndex - 1),
                   disabled: pageIndex <= 0,
                   "aria-label": "Previous page",
-                  children: /* @__PURE__ */ jsx44(ChevronLeftIcon, { className: "size-4", "aria-hidden": true })
+                  children: /* @__PURE__ */ jsx48(ChevronLeftIcon, { className: "size-4", "aria-hidden": true })
                 }
               ),
-              /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx48(
                 "button",
                 {
                   type: "button",
@@ -3418,7 +4612,7 @@ function DataTable({
                   onClick: () => setPage(pageIndex + 1),
                   disabled: pageIndex >= pageCount - 1,
                   "aria-label": "Next page",
-                  children: /* @__PURE__ */ jsx44(ChevronRightIcon, { className: "size-4", "aria-hidden": true })
+                  children: /* @__PURE__ */ jsx48(ChevronRightIcon2, { className: "size-4", "aria-hidden": true })
                 }
               )
             ] })
@@ -3430,8 +4624,8 @@ function DataTable({
 }
 
 // src/app/data/ChartPanel.tsx
-import { useId as useId4 } from "react";
-import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { useId as useId9 } from "react";
+import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
 var ChartPanel = ({
   title,
   description,
@@ -3446,17 +4640,17 @@ var ChartPanel = ({
   const height = heightProp ?? APP_DENSITY_CHART_HEIGHT[density];
   const metricChartPlotRegionClass = useAppDensityClass("metricChartPlotRegion");
   const chartPanelBodyClass = useAppDensityClass("chartPanelBody");
-  const titleId = useId4();
+  const titleId = useId9();
   const resolvedTitle = title ?? artifact?.title;
   const hasHeader = Boolean(resolvedTitle || description || actions);
-  const body = loading ? /* @__PURE__ */ jsx45(Skeleton, { className: "w-full rounded-lg", style: { height }, "aria-hidden": true }) : children ?? (artifact ? /* @__PURE__ */ jsx45(ChartArtifactView, { artifact, embedded: true, height }) : null);
-  return /* @__PURE__ */ jsxs35(
+  const body = loading ? /* @__PURE__ */ jsx49(Skeleton, { className: "w-full rounded-lg", style: { height }, "aria-hidden": true }) : children ?? (artifact ? /* @__PURE__ */ jsx49(ChartArtifactView, { artifact, embedded: true, height }) : null);
+  return /* @__PURE__ */ jsxs38(
     "section",
     {
       className: cn(metricCardShellClass, "aui-app-chart-panel", className),
       "aria-labelledby": resolvedTitle ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx49(
           MetricCardHeader,
           {
             title: resolvedTitle,
@@ -3465,14 +4659,14 @@ var ChartPanel = ({
             actions
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx49(
           "div",
           {
             className: cn(
               "relative min-h-0 w-full",
               hasHeader ? metricChartPlotRegionClass : chartPanelBodyClass
             ),
-            children: body ?? /* @__PURE__ */ jsx45(
+            children: body ?? /* @__PURE__ */ jsx49(
               "div",
               {
                 className: "flex items-center justify-center text-sm font-normal text-muted-foreground",
@@ -3489,10 +4683,11 @@ var ChartPanel = ({
 };
 
 // src/app/data/MetricRow.tsx
-import { useId as useId5, useState as useState5 } from "react";
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useId as useId10, useState as useState6 } from "react";
+import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 var MetricRow = ({
   title,
+  titleTag,
   description,
   actions,
   metrics,
@@ -3504,9 +4699,9 @@ var MetricRow = ({
   className
 }) => {
   const metricTileClass = useAppDensityClass("metricTile");
-  const titleId = useId5();
+  const titleId = useId10();
   const selectable = onMetricChange != null || activeMetricId != null;
-  const [internalId, setInternalId] = useState5(
+  const [internalId, setInternalId] = useState6(
     defaultActiveMetricId ?? metrics[0]?.id
   );
   const activeId = activeMetricId ?? internalId;
@@ -3514,22 +4709,24 @@ var MetricRow = ({
     if (activeMetricId == null) setInternalId(id);
     onMetricChange?.(id);
   };
-  return /* @__PURE__ */ jsxs36(
+  const hasHeader = Boolean(title || titleTag || description || actions);
+  return /* @__PURE__ */ jsxs39(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx50(
           MetricCardHeader,
           {
             title,
+            titleTag,
             titleId,
             description,
             actions
           }
         ),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx50(
           "div",
           {
             role: selectable ? "group" : void 0,
@@ -3538,20 +4735,20 @@ var MetricRow = ({
             className: cn(
               metricTilesRowClass,
               metricTilesGridColsClass(loading ? metrics.length || 4 : metrics.length),
-              (title || description || actions) && "mt-3"
+              hasHeader && "mt-3.5 border-t border-border/40"
             ),
-            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ jsxs36(
+            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ jsxs39(
               "div",
               {
                 className: cn("flex min-w-0 flex-1 flex-col gap-2", metricTileClass),
                 "aria-hidden": true,
                 children: [
-                  /* @__PURE__ */ jsx46(Skeleton, { className: "h-3 w-20" }),
-                  /* @__PURE__ */ jsx46(Skeleton, { className: "h-7 w-24" })
+                  /* @__PURE__ */ jsx50(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ jsx50(Skeleton, { className: "h-7 w-24" })
                 ]
               },
               `skeleton-${index}`
-            )) : metrics.map((m, index) => /* @__PURE__ */ jsx46(
+            )) : metrics.map((m, index) => /* @__PURE__ */ jsx50(
               MetricTile,
               {
                 label: m.label,
@@ -3559,6 +4756,11 @@ var MetricRow = ({
                 unit: m.unit,
                 trend: m.trend,
                 trendTone: m.trendTone,
+                trendVariant: m.trendVariant,
+                activeTone: m.activeTone,
+                sparklineData: m.sparklineData,
+                sparklineConfig: m.sparklineConfig,
+                sparkline: m.sparkline,
                 active: selectable && m.id === activeId,
                 showDivider: index < metrics.length - 1,
                 onSelect: selectable ? () => select(m.id) : void 0
@@ -3573,10 +4775,11 @@ var MetricRow = ({
 };
 
 // src/app/data/MetricChartCard.tsx
-import { useId as useId6, useState as useState6 } from "react";
-import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+import { useId as useId11, useState as useState7 } from "react";
+import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 var MetricChartCard = ({
   title,
+  titleTag,
   description,
   actions,
   metrics,
@@ -3597,8 +4800,8 @@ var MetricChartCard = ({
   const height = heightProp ?? APP_DENSITY_CHART_HEIGHT[density];
   const metricChartRegionClass = useAppDensityClass("metricChartRegion");
   const metricTileClass = useAppDensityClass("metricTile");
-  const titleId = useId6();
-  const [internalId, setInternalId] = useState6(
+  const titleId = useId11();
+  const [internalId, setInternalId] = useState7(
     defaultActiveMetricId ?? metrics[0]?.id
   );
   const activeId = activeMetricId ?? internalId;
@@ -3607,24 +4810,25 @@ var MetricChartCard = ({
     if (activeMetricId == null) setInternalId(id);
     onMetricChange?.(id);
   };
-  const hasHeader = Boolean(title || description || actions);
+  const hasHeader = Boolean(title || titleTag || description || actions);
   const chartAriaLabel = typeof active?.label === "string" ? `${active.label} over time` : "Metric chart";
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs40(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx51(
           MetricCardHeader,
           {
             title,
-            titleId,
+            titleTag,
             description,
-            actions
+            actions,
+            titleId
           }
         ),
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx51(
           "div",
           {
             role: "group",
@@ -3633,20 +4837,20 @@ var MetricChartCard = ({
             className: cn(
               metricTilesRowClass,
               metricTilesGridColsClass(loading ? metrics.length || 4 : metrics.length),
-              hasHeader && "mt-3"
+              hasHeader && "mt-3.5 border-t border-border/40"
             ),
-            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ jsxs37(
+            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ jsxs40(
               "div",
               {
                 className: cn("flex min-w-0 flex-1 flex-col gap-2", metricTileClass),
                 "aria-hidden": true,
                 children: [
-                  /* @__PURE__ */ jsx47(Skeleton, { className: "h-3 w-20" }),
-                  /* @__PURE__ */ jsx47(Skeleton, { className: "h-7 w-24" })
+                  /* @__PURE__ */ jsx51(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ jsx51(Skeleton, { className: "h-7 w-24" })
                 ]
               },
               `skeleton-${index}`
-            )) : metrics.map((m, index) => /* @__PURE__ */ jsx47(
+            )) : metrics.map((m, index) => /* @__PURE__ */ jsx51(
               MetricTile,
               {
                 label: m.label,
@@ -3654,6 +4858,11 @@ var MetricChartCard = ({
                 unit: m.unit,
                 trend: m.trend,
                 trendTone: m.trendTone,
+                trendVariant: m.trendVariant,
+                activeTone: m.activeTone,
+                sparklineData: m.sparklineData,
+                sparklineConfig: m.sparklineConfig,
+                sparkline: m.sparkline,
                 active: m.id === active?.id,
                 showDivider: index < metrics.length - 1,
                 onSelect: () => select(m.id)
@@ -3662,14 +4871,14 @@ var MetricChartCard = ({
             ))
           }
         ),
-        /* @__PURE__ */ jsx47("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: loading ? /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx51("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: loading ? /* @__PURE__ */ jsx51(
           Skeleton,
           {
             className: "w-full rounded-lg",
             style: { height },
             "aria-hidden": true
           }
-        ) : active?.data && active.data.length > 0 ? /* @__PURE__ */ jsx47(
+        ) : active?.data && active.data.length > 0 ? /* @__PURE__ */ jsx51(
           LineAreaChart,
           {
             data: active.data,
@@ -3689,7 +4898,7 @@ var MetricChartCard = ({
             ariaLabel: chartAriaLabel
           },
           active.id
-        ) : /* @__PURE__ */ jsx47(
+        ) : /* @__PURE__ */ jsx51(
           "div",
           {
             className: "flex w-full items-center justify-center text-sm font-normal text-muted-foreground",
@@ -3704,13 +4913,13 @@ var MetricChartCard = ({
 };
 
 // src/hooks/use-live-query.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useRef, useState as useState7 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useRef, useState as useState8 } from "react";
 function useInterval(callback, delayMs) {
   const saved = useRef(callback);
-  useEffect3(() => {
+  useEffect5(() => {
     saved.current = callback;
   }, [callback]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (delayMs === null) return;
     const id = setInterval(() => saved.current(), delayMs);
     return () => clearInterval(id);
@@ -3723,19 +4932,19 @@ function useLiveQuery(fetcher, options = {}) {
     immediate = true,
     refetchOnFocus = true
   } = options;
-  const [data, setData] = useState7(void 0);
-  const [error, setError] = useState7(void 0);
-  const [loading, setLoading] = useState7(enabled);
-  const [refreshing, setRefreshing] = useState7(false);
-  const [lastUpdated, setLastUpdated] = useState7(null);
+  const [data, setData] = useState8(void 0);
+  const [error, setError] = useState8(void 0);
+  const [loading, setLoading] = useState8(enabled);
+  const [refreshing, setRefreshing] = useState8(false);
+  const [lastUpdated, setLastUpdated] = useState8(null);
   const fetcherRef = useRef(fetcher);
-  useEffect3(() => {
+  useEffect5(() => {
     fetcherRef.current = fetcher;
   }, [fetcher]);
   const mounted = useRef(true);
   const requestId = useRef(0);
   const hasData = useRef(false);
-  useEffect3(() => {
+  useEffect5(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -3767,11 +4976,11 @@ function useLiveQuery(fetcher, options = {}) {
     if (!enabled) return;
     run();
   }, [enabled, run]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (!enabled) return;
     if (immediate) run();
   }, [enabled, immediate, run]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (!enabled || intervalMs === null) return;
     const tick = () => {
       if (refetchOnFocus && typeof document !== "undefined" && document.visibilityState === "hidden") {
@@ -3782,7 +4991,7 @@ function useLiveQuery(fetcher, options = {}) {
     const handle = setInterval(tick, intervalMs);
     return () => clearInterval(handle);
   }, [enabled, intervalMs, refetchOnFocus, run]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (!enabled || !refetchOnFocus || typeof document === "undefined") return;
     const onVisible = () => {
       if (document.visibilityState === "visible") run();
@@ -3793,69 +5002,6 @@ function useLiveQuery(fetcher, options = {}) {
   return { data, error, loading, refreshing, lastUpdated, refetch };
 }
 
-// src/charts/sparkline.tsx
-import { useId as useId7 } from "react";
-import { Fragment as Fragment6, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
-var Sparkline = ({
-  data,
-  dataKey = "value",
-  color = "var(--primary, #6366f1)",
-  area = true,
-  width = 96,
-  height = 28,
-  strokeWidth = 1.5,
-  className,
-  ariaLabel = "Trend"
-}) => {
-  const uid = useId7();
-  const values = data.map((d) => typeof d === "number" ? d : toNum(d[dataKey]));
-  if (values.length === 0) {
-    return /* @__PURE__ */ jsx48("span", { className: cn("inline-block", className), style: { width, height } });
-  }
-  const pad = strokeWidth + 1;
-  const min = Math.min(...values);
-  const max = Math.max(...values);
-  const range = max - min || 1;
-  const innerW = width - pad * 2;
-  const innerH = height - pad * 2;
-  const points = values.map((v, i) => ({
-    x: pad + (values.length > 1 ? i / (values.length - 1) * innerW : innerW / 2),
-    y: pad + innerH - (v - min) / range * innerH
-  }));
-  return /* @__PURE__ */ jsxs38(
-    "svg",
-    {
-      width,
-      height,
-      viewBox: `0 0 ${width} ${height}`,
-      className: cn("block", className),
-      role: "img",
-      "aria-label": ariaLabel,
-      preserveAspectRatio: "none",
-      children: [
-        area && /* @__PURE__ */ jsxs38(Fragment6, { children: [
-          /* @__PURE__ */ jsx48("defs", { children: /* @__PURE__ */ jsxs38("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-            /* @__PURE__ */ jsx48("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
-            /* @__PURE__ */ jsx48("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
-          ] }) }),
-          /* @__PURE__ */ jsx48("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
-        ] }),
-        /* @__PURE__ */ jsx48(
-          "path",
-          {
-            d: monotoneLinePath(points),
-            fill: "none",
-            stroke: color,
-            strokeWidth,
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
-    }
-  );
-};
-
 export {
   SEMANTIC_COLOR_TOKENS,
   RESERVED_GRADIENT_TOKENS,
@@ -3892,16 +5038,17 @@ export {
   AppDensityProvider,
   useAppDensity,
   useAppDensityClass,
+  Sparkline,
   MetricTile,
   useAppShellChat,
   useAppShellNav,
   AppShell,
-  AppShellTopbar,
   AppShellChatTrigger,
   AppShellSidebarTrigger,
   PageHeader,
   Page,
   Section,
+  Stack,
   AppCopilotProvider,
   useAppCopilotContext,
   AppChatPanel,
@@ -3915,6 +5062,8 @@ export {
   DescriptionList,
   ExpandableSection,
   ResourceCard,
+  AlertCard,
+  CatalogCard,
   SettingsSectionHeader,
   SettingsSection,
   FieldRow,
@@ -3939,11 +5088,11 @@ export {
   FormSection,
   FilterBar,
   FilterField,
+  FilterDropdown,
   DataTable,
   ChartPanel,
   MetricRow,
   MetricChartCard,
   useInterval,
-  useLiveQuery,
-  Sparkline
+  useLiveQuery
 };