@timbal-ai/timbal-react 1.4.0 → 1.6.0

package/dist/{chunk-VOWNCS3F.esm.js → chunk-6SQMTBPL.esm.js}

@@ -4,38 +4,51 @@ import {
   ShellInsetProvider,
   studioChromeShellStyle,
   studioSidebarWidthTransition
-} from "./chunk-QIABF4KB.esm.js";
+} from "./chunk-ELEY66OH.esm.js";
 import {
   ChartArtifactView,
   LineAreaChart,
   Thread,
   TimbalRuntimeProvider,
+  formatCompact,
   monotoneAreaPath,
   monotoneLinePath,
   studioIntegrationCardClass,
   studioTopbarPillHeightClass,
   toNum
-} from "./chunk-GQBYZRD7.esm.js";
+} from "./chunk-WQIQW7EM.esm.js";
 import {
   Checkbox,
+  CopyButton,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
   Skeleton
-} from "./chunk-UCGVL7ZY.esm.js";
+} from "./chunk-NO5AWNWT.esm.js";
 import {
   PillSegmentedTabs
-} from "./chunk-VXMM2HX7.esm.js";
+} from "./chunk-R4RQT2XQ.esm.js";
 import {
   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-MBS7XHV2.esm.js";
+import {
+  cn
+} from "./chunk-EDEKQYSU.esm.js";
 
 // src/design/ui-vocabulary.ts
 var SEMANTIC_COLOR_TOKENS = [
@@ -191,6 +204,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 +232,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}>`
   }
 ];
 
@@ -246,14 +287,14 @@ The most common failure is shipping the **same** layout every time: sidebar + to
 | 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\` (optionally just \`AppShellTopbar\`); or a centered narrow column |
+| **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 \`AppShellTopbar\`), and whether there's a sidebar at all. Two dashboards for two domains should not look identical.
+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)
 
@@ -264,7 +305,7 @@ The content region is a **padded scroll area** by default \u2014 great for stack
 - 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={<AppShellTopbar actions={<ModeToggle />} />}>
+<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>
@@ -273,20 +314,25 @@ The content region is a **padded scroll area** by default \u2014 great for stack
 
 **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:
 
 | Folder | Components |
 |--------|------------|
-| \`data/\` | \`MetricRow\`, \`MetricChartCard\`, \`MetricTile\`, \`DataTable\`, \`FilterBar\`, \`FilterField\`, \`ChartPanel\` |
+| \`data/\` | \`MetricRow\`, \`MetricChartCard\`, \`MetricTile\`, \`DataTable\`, \`FilterBar\`, \`FilterField\`, \`FilterDropdown\`, \`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.
 
@@ -298,9 +344,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"\`. |
@@ -332,7 +381,6 @@ 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\`, **\`contentFill\`** (bounded non-scrolling content region for full-bleed pages \u2014 chat/canvas/split view). |
-| \`AppShellTopbar\` | Full-width top bar: \`start\`, \`actions\` slots. |
 | \`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. |
@@ -341,16 +389,17 @@ The cause of slop is dropping **below** the curated block layer into raw primiti
 | \`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. |
 | \`FilterField\` | Optional label wrapper for a filter control inside \`FilterBar\` (severity, status, \u2026). Omit \`label\` for search-only fields. |
+| \`FilterDropdown\` | Single-button **multi-facet** filter popover for dense list/table views \u2014 **data-driven**: pass \`fields\` describing your **actual columns** (each \`{ id, label, type }\` where \`type\` is \`multiselect\` \\| \`text\` \\| \`daterange\` \\| \`numeric\`; \`multiselect\` takes \`options: [{ value, label, hint?, icon? }]\`). State is keyed by field \`id\` \u2014 controlled (\`value\` + \`onChange\`) or uncontrolled (\`defaultValue\`). Renders **removable active-filter pills** next to the trigger by default (\`showActiveChips\`); wire \`onChange\` to actually filter your rows. **Always derive \`fields\` from the table's columns/data; never ship the default example facets.** Use when one \`FilterBar\` row isn't enough. |
 | \`SearchInput\` | Filter field with consistent app styling. |
 | \`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. |
@@ -396,9 +445,28 @@ 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\`. |
+
+#### More \`/ui\` primitives (import from \`/ui\` or the package root)
+
+These ship in the same design system but aren't re-exported from \`/app\`. Reach for them before hand-rolling \u2014 they're all dependency-free and on the shared tokens / control surface.
+
+| Component | Use for |
+|-----------|---------|
+| \`Stepper\` | Ordered step indicator for wizards / onboarding (horizontal or vertical; complete / active / upcoming states). |
+| \`Rating\` | Star rating \u2014 interactive (keyboard + hover preview) or \`readOnly\`; controlled or uncontrolled. |
+| \`NumberField\` | Numeric input with \u2212/+ steppers on the control surface; clamps to \`min\`/\`max\`, steps by \`step\`. |
+| \`TagInput\` | Chips / token input; commits on Enter/comma, removes on Backspace, optional \`dedupe\`/\`max\`. |
+| \`AvatarGroup\` | Overlapping avatar stack with an optional \`+N\` overflow chip (\`max\`, \`spacing\`). |
+| \`CircularProgress\` | Lightweight SVG progress ring \u2014 determinate (optional center label) or indeterminate. |
+| \`CopyButton\` | Click-to-copy with a transient check confirmation; icon-only or with a label. |
+| \`Snippet\` | Single-line code / command on the elevated surface with a built-in copy button. |
 
 Studio chrome (\`StudioSidebar\`, \`ModeToggle\`, \u2026) lives in \`@timbal-ai/timbal-react/studio\` \u2014 optional, not required for every dashboard.
 
@@ -466,6 +534,9 @@ import {
   DataTable,
   FilterBar,
   FilterField,
+  FilterDropdown,
+  AlertCard,
+  CatalogCard,
 } from "@timbal-ai/timbal-react/app";
 \`\`\`
 
@@ -476,6 +547,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).
@@ -506,6 +588,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-]+:)*/, "");
@@ -522,7 +605,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;
@@ -538,6 +628,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) {
@@ -578,6 +695,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",
@@ -624,6 +750,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({
@@ -1356,7 +1520,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(
@@ -1423,6 +1600,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"
@@ -1448,12 +1634,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",
@@ -1482,8 +1668,155 @@ function useAppDensityClass(key, override) {
   return appDensityClass(key, override ?? inherited);
 }
 
+// src/charts/sparkline.tsx
+import {
+  useId,
+  useRef,
+  useState
+} 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",
+  interactive = false,
+  labels,
+  formatValue
+}) => {
+  const uid = useId();
+  const containerRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(null);
+  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 padX = 0;
+  const padY = strokeWidth + 1;
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const range = max - min || 1;
+  const innerW = width - padX * 2;
+  const innerH = height - padY * 2;
+  const points = values.map((v, i) => ({
+    x: padX + (values.length > 1 ? i / (values.length - 1) * innerW : innerW / 2),
+    y: padY + innerH - (v - min) / range * innerH
+  }));
+  const svg = /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", interactive ? "h-full w-full" : 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 - padY), fill: `url(#${uid}-spark)` })
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: monotoneLinePath(points),
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        interactive && activeIndex != null && points[activeIndex] ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx3(
+            "line",
+            {
+              x1: points[activeIndex].x,
+              x2: points[activeIndex].x,
+              y1: 0,
+              y2: height,
+              stroke: color,
+              strokeWidth: 1,
+              strokeOpacity: 0.3,
+              vectorEffect: "non-scaling-stroke"
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "circle",
+            {
+              cx: points[activeIndex].x,
+              cy: points[activeIndex].y,
+              r: 2.75,
+              fill: color,
+              stroke: "var(--background, #fff)",
+              strokeWidth: 1.5,
+              vectorEffect: "non-scaling-stroke"
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+  if (!interactive) return svg;
+  const onMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    if (rect.width === 0) return;
+    const fraction = (e.clientX - rect.left) / rect.width;
+    const index = Math.max(
+      0,
+      Math.min(values.length - 1, Math.round(fraction * (values.length - 1)))
+    );
+    setActiveIndex(index);
+  };
+  const active = activeIndex != null ? points[activeIndex] : null;
+  const formattedValue = activeIndex != null ? formatValue ? formatValue(values[activeIndex], activeIndex) : formatCompact(values[activeIndex]) : null;
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      ref: containerRef,
+      className: cn("relative block touch-none", className),
+      style: { width: "100%", height: "100%" },
+      onPointerMove: onMove,
+      onPointerLeave: () => setActiveIndex(null),
+      children: [
+        svg,
+        active ? /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute z-30 -translate-x-1/2 -translate-y-full whitespace-nowrap",
+              "rounded-xl border px-3 py-2 text-[11px] font-medium leading-none tabular-nums shadow-[0_12px_40px_-10px_rgba(0,0,0,0.55)]",
+              "border-white/10 bg-gradient-to-b from-neutral-800 to-neutral-950 text-white",
+              "dark:border-black/10 dark:from-white dark:to-neutral-100 dark:text-neutral-900"
+            ),
+            style: {
+              left: `${active.x / width * 100}%`,
+              top: `${active.y / height * 100}%`,
+              marginTop: -8
+            },
+            children: [
+              labels?.[activeIndex] != null ? /* @__PURE__ */ jsx3("span", { className: "mr-1.5 text-neutral-300 dark:text-neutral-500", children: labels[activeIndex] }) : null,
+              /* @__PURE__ */ jsx3("span", { children: formattedValue })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
 // 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",
@@ -1493,18 +1826,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) {
@@ -1515,6 +1852,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:
@@ -1525,12 +1864,34 @@ 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 sparklineToneColor = {
+  up: "var(--primary, #3b82f6)",
+  down: "var(--destructive, #f43f5e)",
+  neutral: "var(--muted-foreground, #64748b)"
+};
+var sparklineBandBleed = {
+  default: "-mx-4 -mb-3 h-10",
+  compact: "-mx-3 -mb-2 h-8"
+};
+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"
@@ -1541,58 +1902,98 @@ var MetricTile = ({
   unit,
   trend,
   trendTone = "neutral",
+  trendVariant = "pill",
   active = false,
+  activeTone = "default",
   showDivider = false,
   onSelect,
+  sparklineData,
+  sparklineConfig,
+  sparkline,
   ariaLabel,
   className
 }) => {
+  const density = useAppDensity();
   const metricTileBaseClass = useAppDensityClass("metricTile");
-  const content = /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    active ? /* @__PURE__ */ jsx4(
+  const hasSparkline = Boolean(sparkline || sparklineData);
+  const bandBleed = sparklineBandBleed[density === "compact" ? "compact" : "default"];
+  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
-    ] })
+    /* @__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
+      ] })
+    ] }),
+    hasSparkline ? /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: cn(
+          "relative z-10 mt-2",
+          bandBleed
+        ),
+        children: sparkline ?? /* @__PURE__ */ jsx5(
+          Sparkline,
+          {
+            data: sparklineData,
+            width: 160,
+            height: 40,
+            interactive: true,
+            className: "h-full w-full opacity-90",
+            color: sparklineToneColor[trendTone],
+            ...sparklineConfig
+          }
+        )
+      }
+    ) : 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";
@@ -1618,8 +2019,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 as useState2 } 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",
@@ -1642,21 +2043,32 @@ var AppShellBody = ({
   insetExpanded,
   children
 }) => {
+  const [isMobile, setIsMobile] = useState2(() => {
+    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(
@@ -1667,8 +2079,8 @@ var AppShellBody = ({
             !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(
@@ -1711,7 +2123,7 @@ var AppShell = ({
 }) => {
   const topbarContent = topbar ?? header;
   const hasChat = Boolean(chat);
-  const [uncontrolledNavOpen, setUncontrolledNavOpen] = useState(defaultNavOpen);
+  const [uncontrolledNavOpen, setUncontrolledNavOpen] = useState2(defaultNavOpen);
   const isNavControlled = navOpenProp !== void 0;
   const navOpen = isNavControlled ? navOpenProp : uncontrolledNavOpen;
   const setNavOpen = useCallback(
@@ -1726,7 +2138,7 @@ var AppShell = ({
     () => ({ open: navOpen, setOpen: setNavOpen, toggle: toggleNav }),
     [navOpen, setNavOpen, toggleNav]
   );
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultChatOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState2(defaultChatOpen);
   const isChatControlled = chatOpenProp !== void 0;
   const chatOpen = isChatControlled ? chatOpenProp : uncontrolledOpen;
   const setChatOpen = useCallback(
@@ -1741,14 +2153,14 @@ var AppShell = ({
   const toggleChat = useCallback(() => {
     setChatOpen(!chatOpen);
   }, [chatOpen, setChatOpen]);
-  const [insetPaddingPx, setInsetPaddingPx] = useState(
+  const [insetPaddingPx, setInsetPaddingPx] = useState2(
     sidebar ? SIDEBAR_INSET_PX_EXPANDED : 0
   );
   const reportShellInset = useCallback((insetPx) => {
     setInsetPaddingPx(insetPx);
   }, []);
   const insetExpanded = insetPaddingPx >= SIDEBAR_INSET_PX_EXPANDED;
-  const shellBody = /* @__PURE__ */ jsx6(
+  const shellBody = /* @__PURE__ */ jsx7(
     AppShellBody,
     {
       sidebar,
@@ -1760,7 +2172,7 @@ var AppShell = ({
       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(
@@ -1770,7 +2182,7 @@ var AppShell = ({
       style: studioChromeShellStyle,
       children: [
         sidebar,
-        sidebar && navOpen ? /* @__PURE__ */ jsx6(
+        sidebar && navOpen ? /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -1780,7 +2192,7 @@ var AppShell = ({
           }
         ) : null,
         shellBody,
-        hasChat && chatOpen ? /* @__PURE__ */ jsx6(
+        hasChat && chatOpen ? /* @__PURE__ */ jsx7(
           "div",
           {
             className: floatingPanelClass,
@@ -1793,7 +2205,7 @@ var AppShell = ({
             children: chat
           }
         ) : null,
-        hasChat && chatCollapsible && !chatOpen && !hideChatTrigger ? /* @__PURE__ */ jsx6(
+        hasChat && chatCollapsible && !chatOpen && !hideChatTrigger ? /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -1806,11 +2218,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: {
@@ -1824,23 +2236,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";
@@ -1921,34 +2316,32 @@ 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",
-        fill ? "flex min-h-0 min-w-0 flex-1 flex-col" : 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
 }) => {
@@ -1956,7 +2349,9 @@ var Page = ({
     PageFrame,
     {
       breadcrumbs,
+      width,
       fill,
+      fillPadded,
       className,
       ...headerProps,
       children
@@ -1981,15 +2376,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) ?? {};
@@ -1997,7 +2438,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"
@@ -2043,17 +2484,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,
@@ -2063,7 +2504,7 @@ var AppChatPanel = ({
         attachmentsUploadUrl,
         attachmentsAccept,
         debug,
-        children: /* @__PURE__ */ jsx14(
+        children: /* @__PURE__ */ jsx15(
           Thread,
           {
             variant: "panel",
@@ -2084,41 +2525,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",
@@ -2145,13 +2666,13 @@ var StatusBadge = ({
     "span",
     {
       className: cn(
-        "aui-app-status-badge inline-flex items-center gap-1.5 rounded-full px-2 py-0.5",
+        "aui-app-status-badge inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5",
         "text-xs font-medium leading-none ring-1 ring-inset",
         statusBadgeToneClass[tone],
         className
       ),
       children: [
-        dot ? /* @__PURE__ */ jsx18(
+        dot ? /* @__PURE__ */ jsx19(
           "span",
           {
             "aria-hidden": true,
@@ -2168,7 +2689,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";
@@ -2183,15 +2704,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",
@@ -2201,7 +2722,7 @@ var AppConfirmDialog = ({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             TimbalV2Button,
             {
               type: "button",
@@ -2221,7 +2742,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",
@@ -2229,34 +2750,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],
+}) => {
+  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__ */ 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
-    ),
-    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
-      ] }),
-      action ? /* @__PURE__ */ jsx20("div", { className: "shrink-0", children: action }) : null
-    ]
+    );
+    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",
@@ -2271,7 +2825,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(
@@ -2280,18 +2834,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(
@@ -2303,16 +2857,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
             }
@@ -2325,10 +2881,10 @@ var DescriptionList = ({
 );
 
 // src/app/surfaces/ExpandableSection.tsx
-import { useId, useState as useState2 } from "react";
+import { useId as useId2, useState as useState3 } 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",
@@ -2342,7 +2898,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 = ({
@@ -2356,8 +2912,8 @@ var ExpandableSection = ({
   className
 }) => {
   const reduceMotion = useReducedMotion2();
-  const panelId = useId();
-  const [internalOpen, setInternalOpen] = useState2(defaultOpen);
+  const panelId = useId2();
+  const [internalOpen, setInternalOpen] = useState3(defaultOpen);
   const open = openProp ?? internalOpen;
   const toggle = () => {
     if (openProp == null) setInternalOpen((o) => !o);
@@ -2374,15 +2930,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,
@@ -2391,7 +2947,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 })
@@ -2399,19 +2955,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,
@@ -2422,37 +2973,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__ */ jsx24("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
+    return /* @__PURE__ */ jsx25(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "aria-label": ariaLabel,
+        className: cn(shellClass3, className),
+        children: body
+      }
+    );
   }
-  return /* @__PURE__ */ jsx24("article", { className: cn(resourceCardShellClass, 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__ */ jsxs21(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "aria-label": ariaLabel,
+        className: cn(catalogCardInteractiveClass, className),
+        children: [
+          mainContent,
+          footerMarkup
+        ]
+      }
+    );
+  }
+  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,
@@ -2461,7 +3211,7 @@ var SettingsSection = ({
   children,
   noBorderTop = false,
   className
-}) => /* @__PURE__ */ jsxs20(
+}) => /* @__PURE__ */ jsxs22(
   "section",
   {
     className: cn(
@@ -2470,18 +3220,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,
@@ -2491,7 +3241,7 @@ var FieldRow = ({
   className
 }) => {
   if (inline) {
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs23(
       "div",
       {
         className: cn(
@@ -2499,8 +3249,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,
@@ -2508,25 +3258,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 useState4 } 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",
@@ -2540,11 +3290,11 @@ var FloatingUnsavedChangesBar = ({
   className
 }) => {
   const reduceMotion = useReducedMotion3();
-  const [mounted, setMounted] = useState3(false);
-  useEffect(() => setMounted(true), []);
+  const [mounted, setMounted] = useState4(false);
+  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",
@@ -2558,10 +3308,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 })
           ] })
         ]
       }
@@ -2571,13 +3321,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(
@@ -2585,11 +3335,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 })
     ]
   }
 );
@@ -2598,7 +3348,7 @@ var DangerZone = ({
   description,
   children,
   className
-}) => /* @__PURE__ */ jsxs23(
+}) => /* @__PURE__ */ jsxs25(
   "section",
   {
     className: cn(
@@ -2606,18 +3356,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,
@@ -2625,14 +3375,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"
 );
@@ -2655,15 +3405,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,
@@ -2671,12 +3421,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(
@@ -2686,19 +3436,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",
@@ -2706,7 +3456,7 @@ var IntegrationCard = ({
         disabled: locked,
         "aria-label": ariaLabel,
         className: cn(
-          catalogCardInteractiveClass,
+          catalogCardInteractiveClass2,
           dimmed && catalogCardMutedClass,
           locked && "cursor-default opacity-75",
           className
@@ -2715,12 +3465,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.",
@@ -2728,8 +3478,8 @@ var IntegrationsEmptyState = ({
   action,
   className
 }) => {
-  const titleId = useId3();
-  return /* @__PURE__ */ jsxs25(
+  const titleId = useId4();
+  return /* @__PURE__ */ jsxs27(
     "section",
     {
       className: cn(
@@ -2739,7 +3489,7 @@ var IntegrationsEmptyState = ({
       ),
       "aria-labelledby": titleId,
       children: [
-        icon ? /* @__PURE__ */ jsx30(
+        icon ? /* @__PURE__ */ jsx33(
           "span",
           {
             className: cn(
@@ -2751,21 +3501,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
@@ -2780,14 +3530,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",
@@ -2795,7 +3545,7 @@ var ConnectionRow = ({
     className
   );
   if (onClick) {
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx35(
       "button",
       {
         type: "button",
@@ -2807,7 +3557,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",
@@ -2815,12 +3565,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",
@@ -2831,7 +3581,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,
@@ -2840,7 +3590,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,
@@ -2854,13 +3604,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",
@@ -2874,8 +3624,8 @@ var Breadcrumbs = ({ items, className }) => {
 };
 
 // src/app/forms/Field.tsx
-import { useId as useId4 } from "react";
-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,
@@ -2884,11 +3634,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 = ({
@@ -2900,9 +3650,9 @@ var FieldInput = ({
   id,
   ...inputProps
 }) => {
-  const autoId = useId4();
+  const autoId = useId5();
   const inputId = id ?? inputProps.name ?? autoId;
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx39(
     Field,
     {
       label,
@@ -2910,7 +3660,7 @@ var FieldInput = ({
       error,
       htmlFor: inputId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsx36(
+      children: /* @__PURE__ */ jsx39(
         "input",
         {
           id: inputId,
@@ -2924,8 +3674,8 @@ var FieldInput = ({
 };
 
 // src/app/forms/FieldTextarea.tsx
-import { useId as useId5 } from "react";
-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"
@@ -2939,9 +3689,9 @@ var FieldTextarea = ({
   id,
   ...props
 }) => {
-  const autoId = useId5();
+  const autoId = useId6();
   const textareaId = id ?? props.name ?? autoId;
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx40(
     Field,
     {
       label,
@@ -2949,7 +3699,7 @@ var FieldTextarea = ({
       error,
       htmlFor: textareaId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx40(
         "textarea",
         {
           id: textareaId,
@@ -2963,9 +3713,9 @@ var FieldTextarea = ({
 };
 
 // src/app/forms/FieldSelect.tsx
-import { useId as useId6 } from "react";
+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,
@@ -2981,9 +3731,9 @@ var FieldSelect = ({
   id,
   ...props
 }) => {
-  const autoId = useId6();
+  const autoId = useId7();
   const selectId = id ?? props.name ?? autoId;
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx41(
     Field,
     {
       label,
@@ -2991,8 +3741,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,
@@ -3002,7 +3752,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",
@@ -3015,8 +3765,8 @@ var FieldSelect = ({
 };
 
 // src/app/forms/FieldSwitch.tsx
-import { useId as useId7 } from "react";
-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",
@@ -3036,9 +3786,9 @@ var FieldSwitch = ({
   id,
   ...props
 }) => {
-  const autoId = useId7();
+  const autoId = useId8();
   const inputId = id ?? props.name ?? autoId;
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs32(
     "label",
     {
       className: cn(
@@ -3047,8 +3797,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,
@@ -3058,11 +3808,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
         ] })
       ]
     }
@@ -3071,13 +3821,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(
@@ -3086,8 +3836,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",
@@ -3102,26 +3852,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),
@@ -3133,41 +3883,501 @@ 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 { useEffect as useEffect3, useMemo as useMemo2, useState as useState5 } from "react";
+import { ChevronRightIcon, ListFilterIcon, XIcon as XIcon2 } from "lucide-react";
+import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
+var DEFAULT_PRESETS = [
+  { id: "last_7_days", label: "Last 7 days" },
+  { id: "last_30_days", label: "Last 30 days" },
+  { id: "last_90_days", label: "Last 90 days" },
+  { id: "this_month", label: "This month" },
+  { id: "this_year", label: "This year" },
+  { id: "custom", label: "Custom range" }
+];
+var DEFAULT_OPERATORS = [
+  { id: "gt", label: "Greater than" },
+  { id: "lt", label: "Less than" },
+  { id: "eq", label: "Equals" }
+];
+function asArray(v) {
+  return Array.isArray(v) ? v : [];
+}
+function asText(v) {
+  return typeof v === "string" ? v : "";
+}
+function asDate(v) {
+  return v && !Array.isArray(v) && typeof v === "object" && "preset" in v ? v : { preset: null };
+}
+function asNumeric(v) {
+  return v && !Array.isArray(v) && typeof v === "object" && "operator" in v ? v : { operator: "gt", value: "" };
+}
+var OPERATOR_SYMBOL = {
+  gt: ">",
+  lt: "<",
+  eq: "="
+};
+function FilterDropdown({
+  fields,
+  value,
+  defaultValue,
+  onChange,
+  label = "Filter",
+  align = "start",
+  showActiveChips = true,
+  className
+}) {
+  const [isOpen, setIsOpen] = useState5(false);
+  const [activeId, setActiveId] = useState5(fields[0]?.id ?? null);
+  const [isMobile, setIsMobile] = useState5(false);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState5(defaultValue ?? {});
+  const values = isControlled ? value : internal;
+  useEffect3(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  useEffect3(() => {
+    if (!fields.some((f) => f.id === activeId)) {
+      setActiveId(fields[0]?.id ?? null);
+    }
+  }, [fields, activeId]);
+  const commit = (id, next) => {
+    const merged = { ...values, [id]: next };
+    if (!isControlled) setInternal(merged);
+    onChange?.(merged);
+  };
+  const clearAll = () => {
+    if (!isControlled) setInternal({});
+    onChange?.({});
+  };
+  const activeIdx = fields.findIndex((f) => f.id === activeId);
+  const activeField = activeIdx >= 0 ? fields[activeIdx] : void 0;
+  const chips = [];
+  for (const field of fields) {
+    const v = values[field.id];
+    if (field.type === "multiselect") {
+      const selected = asArray(v);
+      for (const optionValue of selected) {
+        const opt = field.options?.find((o) => o.value === optionValue);
+        chips.push({
+          id: `${field.id}:${optionValue}`,
+          label: `${field.label}: ${opt?.label ?? optionValue}`,
+          remove: () => commit(field.id, selected.filter((x) => x !== optionValue))
+        });
+      }
+    } else if (field.type === "text") {
+      const text = asText(v);
+      if (text) {
+        chips.push({
+          id: field.id,
+          label: `${field.label}: ${text}`,
+          remove: () => commit(field.id, "")
+        });
+      }
+    } else if (field.type === "numeric") {
+      const n = asNumeric(v);
+      if (n.value) {
+        chips.push({
+          id: field.id,
+          label: `${field.label} ${OPERATOR_SYMBOL[n.operator]} ${n.value}`,
+          remove: () => commit(field.id, null)
+        });
+      }
+    } else if (field.type === "daterange") {
+      const d = asDate(v);
+      if (d.preset) {
+        const presetLabel = d.preset === "custom" ? `${d.from || "\u2026"} \u2013 ${d.to || "\u2026"}` : (field.presets ?? DEFAULT_PRESETS).find((p) => p.id === d.preset)?.label ?? d.preset;
+        chips.push({
+          id: field.id,
+          label: `${field.label}: ${presetLabel}`,
+          remove: () => commit(field.id, { preset: null })
+        });
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxs36("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs36(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx47(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "border-dashed font-medium text-muted-foreground hover:text-foreground",
+          iconLeading: /* @__PURE__ */ jsx47(ListFilterIcon, { className: "size-4" }),
+          children: label
+        }
+      ) }),
+      /* @__PURE__ */ jsx47(
+        PopoverContent,
+        {
+          variant: "list",
+          align,
+          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: fields.map((field) => {
+              const isActive = activeId === field.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 && setActiveId(field.id),
+                  onClick: () => setActiveId(field.id),
+                  children: [
+                    /* @__PURE__ */ jsxs36("span", { className: "flex items-center gap-2", children: [
+                      field.icon,
+                      /* @__PURE__ */ jsx47("span", { children: field.label })
+                    ] }),
+                    /* @__PURE__ */ jsx47(ChevronRightIcon, { className: "size-4 text-muted-foreground/50" })
+                  ]
+                },
+                field.id
+              );
+            }) }),
+            activeField && /* @__PURE__ */ jsx47(
+              "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: /* @__PURE__ */ jsx47(
+                  FilterFieldControl,
+                  {
+                    field: activeField,
+                    value: values[activeField.id],
+                    onChange: (next) => commit(activeField.id, next),
+                    onClose: () => setIsOpen(false)
+                  }
+                )
+              }
+            )
+          ] })
+        }
+      )
+    ] }),
+    showActiveChips && chips.map((chip) => /* @__PURE__ */ jsx47(FilterChip, { label: chip.label, onRemove: chip.remove }, chip.id)),
+    showActiveChips && chips.length > 0 && /* @__PURE__ */ jsx47(
+      "button",
+      {
+        type: "button",
+        onClick: clearAll,
+        className: "rounded-full px-3 py-1 text-sm font-medium text-muted-foreground outline-none transition-colors hover:text-foreground",
+        children: "Clear all"
+      }
+    )
+  ] });
+}
+function FilterChip({ label, onRemove }) {
+  return /* @__PURE__ */ jsxs36("span", { className: "inline-flex h-9 items-center gap-1.5 rounded-full border border-border bg-muted/40 pl-3 pr-1.5 text-sm font-medium text-foreground", children: [
+    /* @__PURE__ */ jsx47("span", { className: "truncate", children: label }),
+    /* @__PURE__ */ jsx47(
+      "button",
+      {
+        type: "button",
+        onClick: onRemove,
+        "aria-label": `Remove ${label}`,
+        className: "flex size-5 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground",
+        children: /* @__PURE__ */ jsx47(XIcon2, { className: "size-3.5" })
+      }
+    )
+  ] });
+}
+function FilterFieldControl({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  switch (field.type) {
+    case "multiselect":
+      return /* @__PURE__ */ jsx47(MultiSelectControl, { field, value: asArray(value), onChange });
+    case "text":
+      return /* @__PURE__ */ jsx47(TextControl, { field, value: asText(value), onChange, onClose });
+    case "daterange":
+      return /* @__PURE__ */ jsx47(DateRangeControl, { field, value: asDate(value), onChange, onClose });
+    case "numeric":
+      return /* @__PURE__ */ jsx47(NumericControl, { field, value: asNumeric(value), onChange, onClose });
+    default:
+      return null;
+  }
+}
+function MultiSelectControl({
+  field,
+  value,
+  onChange
+}) {
+  const options = field.options ?? [];
+  const [search, setSearch] = useState5("");
+  const searchable = field.searchable ?? options.length > 8;
+  const filtered = useMemo2(() => {
+    if (!search) return options;
+    const q = search.toLowerCase();
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || o.hint?.toLowerCase().includes(q)
+    );
+  }, [options, search]);
+  const toggle = (optionValue) => {
+    onChange(
+      value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
+    );
+  };
+  return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
+    searchable && /* @__PURE__ */ jsx47(
+      SearchInput,
+      {
+        placeholder: field.searchPlaceholder ?? "Search\u2026",
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        className: "w-full min-w-0"
+      }
+    ),
+    /* @__PURE__ */ jsx47("div", { className: "flex max-h-48 flex-col gap-1 overflow-y-auto pr-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx47("p", { className: "py-4 text-center text-xs text-muted-foreground", children: "No options found" }) : filtered.map((option) => /* @__PURE__ */ jsxs36(
+      "label",
+      {
+        className: "flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 transition-colors hover:bg-muted/50",
+        children: [
+          /* @__PURE__ */ jsx47(
+            Checkbox,
+            {
+              checked: value.includes(option.value),
+              onCheckedChange: () => toggle(option.value)
+            }
+          ),
+          option.icon,
+          /* @__PURE__ */ jsxs36("span", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ jsx47("span", { className: "truncate text-sm font-medium text-foreground", children: option.label }),
+            option.hint && /* @__PURE__ */ jsx47("span", { className: "truncate text-xs text-muted-foreground", children: option.hint })
+          ] })
+        ]
+      },
+      option.value
+    )) })
+  ] });
+}
+function TextControl({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  const [draft, setDraft] = useState5(value);
+  useEffect3(() => setDraft(value), [value]);
+  return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
+    /* @__PURE__ */ jsx47(
+      "input",
+      {
+        type: "text",
+        placeholder: field.placeholder ?? "Type a value\u2026",
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            onChange(draft);
+            onClose();
+          }
+        },
+        className: controlClass({ size: "sm" }, "w-full")
+      }
+    ),
+    /* @__PURE__ */ jsx47(
+      ApplyClear,
+      {
+        onClear: () => {
+          setDraft("");
+          onChange("");
+          onClose();
+        },
+        onApply: () => {
+          onChange(draft);
+          onClose();
+        }
+      }
+    )
+  ] });
+}
+function DateRangeControl({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  const presets = field.presets ?? DEFAULT_PRESETS;
+  const [from, setFrom] = useState5(value.from ?? "");
+  const [to, setTo] = useState5(value.to ?? "");
+  return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-1", children: [
+    presets.map((preset) => {
+      const isSelected = value.preset === preset.id;
+      return /* @__PURE__ */ jsxs36(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if (preset.id === "custom") {
+              onChange({ preset: "custom", from, to });
+            } else {
+              onChange({ preset: preset.id });
+              onClose();
+            }
+          },
+          className: cn(
+            "flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-sm 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.hint && /* @__PURE__ */ jsx47("span", { className: "text-xs text-muted-foreground/70", children: preset.hint })
+          ]
+        },
+        preset.id
+      );
+    }),
+    value.preset === "custom" && /* @__PURE__ */ jsxs36("div", { className: "mt-2 flex flex-col gap-2 border-t border-border/40 pt-2", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx47(
+          "input",
+          {
+            type: "date",
+            value: from,
+            onChange: (e) => setFrom(e.target.value),
+            className: controlClass({ size: "sm" }, "w-full text-xs")
+          }
+        ),
+        /* @__PURE__ */ jsx47("span", { className: "text-xs text-muted-foreground", children: "to" }),
+        /* @__PURE__ */ jsx47(
+          "input",
+          {
+            type: "date",
+            value: to,
+            onChange: (e) => setTo(e.target.value),
+            className: controlClass({ size: "sm" }, "w-full text-xs")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx47("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx47(
+        Button,
+        {
+          color: "primary",
+          size: "sm",
+          className: "h-8 px-3",
+          onClick: () => {
+            onChange({ preset: "custom", from, to });
+            onClose();
+          },
+          children: "Apply"
+        }
+      ) })
+    ] })
+  ] });
+}
+function NumericControl({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  const operators = field.operators ?? DEFAULT_OPERATORS;
+  const [operator, setOperator] = useState5(value.operator);
+  const [draft, setDraft] = useState5(value.value);
+  useEffect3(() => {
+    setOperator(value.operator);
+    setDraft(value.value);
+  }, [value.operator, value.value]);
+  return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs36(Select, { value: operator, onValueChange: (v) => setOperator(v), children: [
+        /* @__PURE__ */ jsx47(SelectTrigger, { size: "sm", className: "shrink-0", children: /* @__PURE__ */ jsx47(SelectValue, {}) }),
+        /* @__PURE__ */ jsx47(SelectContent, { children: operators.map((op) => /* @__PURE__ */ jsx47(SelectItem, { value: op.id, children: op.label }, op.id)) })
+      ] }),
+      /* @__PURE__ */ jsx47(
+        "input",
+        {
+          type: "text",
+          inputMode: "decimal",
+          placeholder: field.placeholder ?? "0.00",
+          value: draft,
+          onChange: (e) => setDraft(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              onChange(draft ? { operator, value: draft } : null);
+              onClose();
+            }
+          },
+          className: controlClass({ size: "sm" }, "min-w-0 flex-1")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx47(
+      ApplyClear,
+      {
+        onClear: () => {
+          setDraft("");
+          onChange(null);
+          onClose();
+        },
+        onApply: () => {
+          onChange(draft ? { operator, value: draft } : null);
+          onClose();
+        }
+      }
+    )
+  ] });
+}
+function ApplyClear({ onClear, onApply }) {
+  return /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-end gap-2 border-t border-border/40 pt-1", children: [
+    /* @__PURE__ */ jsx47(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: onClear,
+        className: "h-8 px-3 text-muted-foreground hover:text-foreground",
+        children: "Clear"
+      }
+    ),
+    /* @__PURE__ */ jsx47(Button, { color: "primary", size: "sm", onClick: onApply, 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 useState6 } 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",
@@ -3197,12 +4407,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,
@@ -3234,7 +4444,7 @@ function DataTable({
   defaultPageIndex = 0,
   onPageChange
 }) {
-  const [uncontrolledSort, setUncontrolledSort] = useState4(
+  const [uncontrolledSort, setUncontrolledSort] = useState6(
     defaultSort
   );
   const isSortControlled = sortProp !== void 0;
@@ -3245,19 +4455,19 @@ function DataTable({
     }
     onSortChange?.(next);
   };
-  const [uncontrolledSelected, setUncontrolledSelected] = useState4(
+  const [uncontrolledSelected, setUncontrolledSelected] = useState6(
     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] = useState6(defaultPageIndex);
   const isPageControlled = pageIndexProp !== void 0;
   const rawPageIndex = isPageControlled ? pageIndexProp : uncontrolledPage;
   const setPage = (next) => {
@@ -3266,7 +4476,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;
@@ -3285,13 +4495,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);
@@ -3300,7 +4510,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));
@@ -3325,10 +4535,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,
@@ -3340,19 +4550,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",
@@ -3369,9 +4579,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(
@@ -3380,17 +4590,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,
@@ -3406,12 +4616,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,
@@ -3421,7 +4631,7 @@ function DataTable({
                 )
               }
             ) : null,
-            columns.map((col) => /* @__PURE__ */ jsx44(
+            columns.map((col) => /* @__PURE__ */ jsx48(
               "td",
               {
                 className: cn(
@@ -3431,7 +4641,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
             ))
@@ -3440,7 +4650,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(
@@ -3448,18 +4658,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(
@@ -3470,8 +4680,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",
@@ -3479,10 +4689,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",
@@ -3490,7 +4700,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 })
                 }
               )
             ] })
@@ -3502,8 +4712,8 @@ function DataTable({
 }
 
 // src/app/data/ChartPanel.tsx
-import { useId as useId8 } 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,
@@ -3518,17 +4728,17 @@ var ChartPanel = ({
   const height = heightProp ?? APP_DENSITY_CHART_HEIGHT[density];
   const metricChartPlotRegionClass = useAppDensityClass("metricChartPlotRegion");
   const chartPanelBodyClass = useAppDensityClass("chartPanelBody");
-  const titleId = useId8();
+  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,
@@ -3537,14 +4747,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",
@@ -3561,10 +4771,11 @@ var ChartPanel = ({
 };
 
 // src/app/data/MetricRow.tsx
-import { useId as useId9, useState as useState5 } from "react";
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useId as useId10, useState as useState7 } from "react";
+import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 var MetricRow = ({
   title,
+  titleTag,
   description,
   actions,
   metrics,
@@ -3576,9 +4787,9 @@ var MetricRow = ({
   className
 }) => {
   const metricTileClass = useAppDensityClass("metricTile");
-  const titleId = useId9();
+  const titleId = useId10();
   const selectable = onMetricChange != null || activeMetricId != null;
-  const [internalId, setInternalId] = useState5(
+  const [internalId, setInternalId] = useState7(
     defaultActiveMetricId ?? metrics[0]?.id
   );
   const activeId = activeMetricId ?? internalId;
@@ -3586,22 +4797,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,
@@ -3610,20 +4823,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,
@@ -3631,6 +4844,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
@@ -3645,10 +4863,11 @@ var MetricRow = ({
 };
 
 // src/app/data/MetricChartCard.tsx
-import { useId as useId10, useState as useState6 } from "react";
-import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+import { useId as useId11, useState as useState8 } from "react";
+import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 var MetricChartCard = ({
   title,
+  titleTag,
   description,
   actions,
   metrics,
@@ -3669,8 +4888,8 @@ var MetricChartCard = ({
   const height = heightProp ?? APP_DENSITY_CHART_HEIGHT[density];
   const metricChartRegionClass = useAppDensityClass("metricChartRegion");
   const metricTileClass = useAppDensityClass("metricTile");
-  const titleId = useId10();
-  const [internalId, setInternalId] = useState6(
+  const titleId = useId11();
+  const [internalId, setInternalId] = useState8(
     defaultActiveMetricId ?? metrics[0]?.id
   );
   const activeId = activeMetricId ?? internalId;
@@ -3679,24 +4898,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",
@@ -3705,20 +4925,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,
@@ -3726,6 +4946,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)
@@ -3734,14 +4959,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,
@@ -3761,7 +4986,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",
@@ -3776,13 +5001,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 as useRef2, useState as useState9 } from "react";
 function useInterval(callback, delayMs) {
-  const saved = useRef(callback);
-  useEffect3(() => {
+  const saved = useRef2(callback);
+  useEffect5(() => {
     saved.current = callback;
   }, [callback]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (delayMs === null) return;
     const id = setInterval(() => saved.current(), delayMs);
     return () => clearInterval(id);
@@ -3795,19 +5020,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 fetcherRef = useRef(fetcher);
-  useEffect3(() => {
+  const [data, setData] = useState9(void 0);
+  const [error, setError] = useState9(void 0);
+  const [loading, setLoading] = useState9(enabled);
+  const [refreshing, setRefreshing] = useState9(false);
+  const [lastUpdated, setLastUpdated] = useState9(null);
+  const fetcherRef = useRef2(fetcher);
+  useEffect5(() => {
     fetcherRef.current = fetcher;
   }, [fetcher]);
-  const mounted = useRef(true);
-  const requestId = useRef(0);
-  const hasData = useRef(false);
-  useEffect3(() => {
+  const mounted = useRef2(true);
+  const requestId = useRef2(0);
+  const hasData = useRef2(false);
+  useEffect5(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -3839,11 +5064,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") {
@@ -3854,7 +5079,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();
@@ -3865,69 +5090,6 @@ function useLiveQuery(fetcher, options = {}) {
   return { data, error, loading, refreshing, lastUpdated, refetch };
 }
 
-// src/charts/sparkline.tsx
-import { useId as useId11 } 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 = useId11();
-  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,
@@ -3964,16 +5126,17 @@ export {
   AppDensityProvider,
   useAppDensity,
   useAppDensityClass,
+  Sparkline,
   MetricTile,
   useAppShellChat,
   useAppShellNav,
   AppShell,
-  AppShellTopbar,
   AppShellChatTrigger,
   AppShellSidebarTrigger,
   PageHeader,
   Page,
   Section,
+  Stack,
   AppCopilotProvider,
   useAppCopilotContext,
   AppChatPanel,
@@ -3987,6 +5150,8 @@ export {
   DescriptionList,
   ExpandableSection,
   ResourceCard,
+  AlertCard,
+  CatalogCard,
   SettingsSectionHeader,
   SettingsSection,
   FieldRow,
@@ -4011,11 +5176,11 @@ export {
   FormSection,
   FilterBar,
   FilterField,
+  FilterDropdown,
   DataTable,
   ChartPanel,
   MetricRow,
   MetricChartCard,
   useInterval,
-  useLiveQuery,
-  Sparkline
+  useLiveQuery
 };