@timbal-ai/timbal-react 0.8.2 → 1.1.0

package/dist/{chunk-6YVKCVEP.esm.js → chunk-TK2AGIME.esm.js}

@@ -13,14 +13,16 @@ import {
   monotoneAreaPath,
   monotoneLinePath,
   studioIntegrationCardClass,
-  studioSearchChromeClass,
-  studioSecondaryChromeClass,
   studioTopbarPillHeightClass,
   toNum
-} from "./chunk-5ZKLPWVN.esm.js";
+} from "./chunk-YXZ22OJN.esm.js";
+import {
+  Checkbox,
+  Skeleton
+} from "./chunk-JEAUF54A.esm.js";
 import {
   PillSegmentedTabs
-} from "./chunk-OISVICYF.esm.js";
+} from "./chunk-P3KDAYX6.esm.js";
 import {
   Button,
   Dialog,
@@ -31,10 +33,195 @@ import {
   TIMBAL_V2_SWITCH_THUMB,
   TIMBAL_V2_SWITCH_TRACK_OFF,
   TimbalV2Button,
-  cn
-} from "./chunk-QVAUCVQA.esm.js";
+  cn,
+  controlClass
+} from "./chunk-4AKJ6FKE.esm.js";
+
+// src/design/ui-vocabulary.ts
+var SEMANTIC_COLOR_TOKENS = [
+  // shadcn-style base tokens
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring",
+  // sidebar scope
+  "sidebar",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring",
+  // timbal chrome extensions
+  "elevated-from",
+  "elevated-to",
+  "modal-from",
+  "modal-to",
+  "playground-from",
+  "playground-via",
+  "playground-to",
+  "composer-bg",
+  "composer-border",
+  "composer-border-focus",
+  "bubble-user",
+  "bubble-user-foreground",
+  "code-block-bg",
+  "code-header-bg"
+];
+var RESERVED_GRADIENT_TOKENS = [
+  "primary-fill-from",
+  "primary-fill-to",
+  "primary-fill-hover-from",
+  "primary-fill-hover-to",
+  "primary-fill-active-from",
+  "primary-fill-active-to",
+  "secondary-fill-hover-from",
+  "secondary-fill-hover-to",
+  "secondary-fill-active-from",
+  "secondary-fill-active-to",
+  "destructive-fill-hover-from",
+  "destructive-fill-hover-to",
+  "destructive-fill-active-from",
+  "destructive-fill-active-to",
+  "ghost-fill-hover",
+  "ghost-fill-active",
+  "elevated-from",
+  "elevated-to",
+  "modal-from",
+  "modal-to",
+  "playground-from",
+  "playground-via",
+  "playground-to"
+];
+var TAILWIND_PALETTE_COLORS = [
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
+];
+var COLOR_UTILITY_PREFIXES = [
+  "bg",
+  "text",
+  "border",
+  "ring",
+  "from",
+  "via",
+  "to",
+  "fill",
+  "stroke",
+  "decoration",
+  "outline",
+  "shadow",
+  "divide",
+  "accent",
+  "caret"
+];
+var SLOP_BUDGETS = {
+  /** Max decorative/standalone icons rendered in a single generated file. */
+  maxIconsPerView: 6,
+  /** Max consecutive list rows separated by an explicit border/divider before
+   *  it reads as a "ruled table" — prefer spacing or zebra instead. */
+  maxRowDividers: 2
+};
+var HOUSE_RULES = [
+  {
+    id: "semantic-color",
+    rule: "Color only through semantic tokens \u2014 never a raw palette color, hex, or oklch literal.",
+    why: "The theme generator owns every color; hardcoding breaks dark mode and rebranding.",
+    slop: `<span className="text-blue-600 bg-green-50">`,
+    good: `<span className="text-primary bg-muted">`
+  },
+  {
+    id: "no-decorative-icons",
+    rule: "Icons must earn their place (action, nav, or status). Never add an icon beside a label that already says the thing.",
+    why: "An icon on every tile/card is the #1 tell of generated slop.",
+    slop: `<StatTile label={<><BarChart2 /> Revenue</>} value="$95k" />`,
+    good: `<StatTile label="Revenue" value="$95k" />`
+  },
+  {
+    id: "neutral-trend",
+    rule: "Don't put a colored trend pill on every metric. Use a trend only when the delta is the point, and keep it muted.",
+    why: "Loud green/red pills everywhere are noise, not signal.",
+    slop: `<MetricTile trend="+8%" className="text-green-500" />`,
+    good: `<MetricTile label="Win rate" value="50%" />`
+  },
+  {
+    id: "values-normal-weight",
+    rule: "Metric values use normal font weight, not bold.",
+    why: "Giant bold numbers read as a template; normal weight reads as a product.",
+    slop: `<span className="text-3xl font-bold tabular-nums">$322k</span>`,
+    good: `<span className="text-2xl font-normal tabular-nums">$322k</span>`
+  },
+  {
+    id: "no-card-in-card",
+    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-row-dividers",
+    rule: "Don't put a divider between every list row. Use spacing or zebra striping.",
+    why: "A rule under every row turns a clean list into a dense ledger."
+  },
+  {
+    id: "no-data-gradient",
+    rule: "Gradients are reserved for chrome (composer, elevated surface, playground). Never on a data card, tile, or table.",
+    why: "Gradient stat cards are the canonical 'AI dashboard' look."
+  },
+  {
+    id: "compose-from-blocks",
+    rule: "Build from premade blocks (MetricRow, MetricChartCard, DataTable, IntegrationCard). Drop to raw primitives only when no block fits.",
+    why: "Slop appears the moment generation falls below the curated block layer."
+  },
+  {
+    id: "use-kit-controls",
+    rule: "Use the kit's controls (SearchInput, Select, DropdownMenu, FieldInput, FieldSelect) \u2014 never hand-roll an input/trigger surface (`border-input rounded-* bg-\u2026`).",
+    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>`
+  }
+];
 
 // src/app/agent-instructions.ts
+var ANTI_SLOP_CHECKLIST = HOUSE_RULES.map((r) => {
+  const pair = r.slop && r.good ? `
+  - slop: \`${r.slop}\`
+  - good: \`${r.good}\`` : "";
+  return `- **${r.id}** \u2014 ${r.rule} (${r.why})${pair}`;
+}).join("\n");
 var APP_KIT_AGENT_INSTRUCTIONS = `
 ## App kit (@timbal-ai/timbal-react/app)
 
@@ -58,12 +245,12 @@ Presentational groups \u2014 import from the package root, not from these paths:
 
 | Folder | Components |
 |--------|------------|
-| \`data/\` | \`MetricRow\`, \`MetricChartCard\`, \`MetricTile\`, \`DataTable\`, \`FilterBar\`, \`ChartPanel\` |
+| \`data/\` | \`MetricRow\`, \`MetricChartCard\`, \`MetricTile\`, \`DataTable\`, \`FilterBar\`, \`FilterField\`, \`ChartPanel\` |
 | \`integrations/\` | \`IntegrationCard\`, \`ConnectionRow\`, \`ConnectionRowList\`, \`IntegrationsEmptyState\`, \`PlanBadge\` |
 | \`settings/\` | \`SettingsSection\`, \`FieldRow\`, \`DangerZone\`, \`FloatingUnsavedChangesBar\` |
 | \`surfaces/\` | \`StatTile\`, \`InfoCard\`, \`ResourceCard\`, \`DescriptionList\`, \`ExpandableSection\`, \`StatusDot\`, \`StatusBadge\`, \`EmptyState\` |
 | \`layout/\` | \`AppShell\`, \`Page\`, \`Section\` |
-| \`charts\` (re-exported) | \`LineAreaChart\`, \`Sparkline\`, \`CHART_PALETTE\` |
+| \`charts\` (re-exported) | \`LineAreaChart\`, \`PieChart\`, \`RadialChart\`, \`RadarChart\`, \`Sparkline\`, \`CHART_PALETTE\` |
 
 Also re-exported: \`Button\`, \`TimbalChat\`, \`ChartArtifactView\`, \`APP_KIT_AGENT_INSTRUCTIONS\`.
 
@@ -78,11 +265,19 @@ Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\
 | **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\`). To offer styles, render \`ThemePresetGallery\`. See \`THEME_AGENT_INSTRUCTIONS\`. |
 | **Layout chrome** | \`Page\` \u2192 \`Section\` for main content hierarchy. \`AppShellTopbar\` for global actions (auth, theme). |
-| **Data** | Prefer \`DataTable\` with typed \`columns\` / \`rows\` / \`getRowKey\`; use \`ChartPanel\` with \`ChartArtifact\` for charts. |
+| **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. |
 | **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"\`. |
-| **Anti-slop** | No loud green/red trend pills on every tile; no \`bg-card\` flat grids when platform chrome exists; avoid recycling demo names ("Operations", mock workforce lists). |
+| **Anti-slop** | Follow the **anti-slop checklist** below. No loud green/red trend pills on every tile; no \`bg-card\` flat grids when platform chrome exists; avoid recycling demo names ("Operations", mock workforce lists). |
+
+### Anti-slop checklist (required \u2014 output is linted against this)
+
+Generated UIs are checked by \`lintGeneratedUi\` and rejected on any error. Self-review against these before returning code (icon budget: ${SLOP_BUDGETS.maxIconsPerView} per view; at most ${SLOP_BUDGETS.maxRowDividers} ruled rows before it reads as a ledger):
+
+${ANTI_SLOP_CHECKLIST}
+
+The cause of slop is dropping **below** the curated block layer into raw primitives + free Tailwind. Stay on the blocks; reach for primitives only when no block fits, and even then keep colors on semantic tokens.
 
 ### Accessibility (required)
 
@@ -108,15 +303,17 @@ Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\
 | \`useAppShellChat\` | Custom open/close trigger when \`hideChatTrigger\` on shell. |
 | \`Page\` | Page title, description, \`breadcrumbs\`, \`actions\`, children. |
 | \`Section\` | Titled block inside a page. |
-| \`SubNav\` | In-page tabs: \`items\`, \`activeId\`, \`onChange\`. |
+| \`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. |
 | \`StatTile\` | Single KPI in its own card (grid of scattered stats). Prefer \`MetricRow\` for a unified overview strip. |
-| \`StatusBadge\` | Status pill: \`tone\` (\`success\`, \`warn\`, \u2026), children. |
-| \`FilterBar\` | Horizontal filter row (wraps \`SearchInput\`, buttons, etc.). |
+| \`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. |
 | \`SearchInput\` | Filter field with consistent app styling. |
-| \`DataTable\` | Sortable table: \`columns\`, \`rows\`, \`getRowKey\`, optional \`sort\` / \`onSortChange\`, \`emptyTitle\`, \`showRowCount\`, \`caption\` for screen readers. |
-| \`ChartPanel\` | Same shell as \`MetricChartCard\`: title row (\`px-4 pt-4\`), flush plot (\`pt-2\` only). Pass \`title\` + \`artifact\` (omit \`artifact.title\` to avoid duplicates) or \`children\`. |
+| \`DataTable\` | Sortable table: \`columns\`, \`rows\`, \`getRowKey\`, optional \`sort\` / \`onSortChange\`, \`emptyTitle\`, \`showRowCount\`, \`caption\`. **Scales:** \`pageSize\` (built-in client pager), \`selectable\` + \`onSelectionChange\` (checkbox column for bulk actions), \`loading\` (skeleton rows). \`onRowClick\` for row \u2192 detail (open a \`Sheet\`). |
+| \`ChartPanel\` | Same shell as \`MetricChartCard\`: title row (\`px-4 pt-4\`), flush plot (\`pt-2\` only). Pass \`title\` + \`artifact\` (omit \`artifact.title\` to avoid duplicates) or \`children\`. \`loading\` renders a plot-height skeleton. |
 | \`FieldInput\`, \`FieldTextarea\`, \`FieldSelect\`, \`FieldSwitch\` | Settings-style forms with labels and hints. |
 | \`FormSection\` | Grouped form block. |
 | \`AppConfirmDialog\` | Confirm/cancel modal: \`open\`, \`onOpenChange\`, \`title\`, \`description\`, \`onConfirm\`. |
@@ -125,13 +322,18 @@ Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\
 
 #### Charts & metrics
 
+Charts run on **recharts** with shadcn \`ChartContainer\` / \`ChartTooltipContent\` chrome (see \`src/ui/chart.tsx\`). Series colors default to \`--chart-1..6\`; override those CSS tokens to rebrand every chart.
+
 | Component | Use for |
 |-----------|---------|
-| \`LineAreaChart\` | Chart engine. Props: \`data\`, \`xKey\`, \`series\`, \`variant\` (\`"area"\`), \`layout\` (\`"flush"\`), \`height\`, \`ariaLabel\`, \`formatX\`, \`formatValue\`. |
+| \`LineAreaChart\` | Cartesian engine (shadcn-style chrome). Props: \`data\`, \`xKey\`, \`series: [{ dataKey, label?, color? }]\`, \`variant\` (\`area\`\\|\`line\`\\|\`bar\`), \`orientation\` (\`horizontal\` for horizontal bars), \`stacked\`, \`curve\` (\`monotone\`\\|\`linear\`\\|\`step\`), \`dots\`, \`gridLines\`, \`tooltipIndicator\` (\`dot\`\\|\`line\`\\|\`dashed\`), \`layout\` (\`flush\`), \`height\`, \`showLegend\`, \`formatX\`, \`formatValue\`, \`ariaLabel\`. |
+| \`PieChart\` | Pie / donut: \`data\`, \`nameKey\`, \`dataKey\`, \`innerRadius\` (>0 = donut), \`centerValue\`/\`centerLabel\` (donut hole KPI), \`showLabels\`, \`colors\`. |
+| \`RadialChart\` | Concentric progress rings: \`data\`, \`nameKey\`, \`dataKey\`, \`maxValue\`, \`centerValue\`/\`centerLabel\`. Good for gauges / share-of-target. |
+| \`RadarChart\` | Spider chart (\u22653 axes): \`data\`, \`nameKey\`, \`series\`, \`maxValue\`. Compare a few metrics across entities. |
 | \`Sparkline\` | Tiny inline trend (table cells): \`data\`, \`color\`, \`area\`. |
 | \`MetricTile\` | Low-level KPI cell \u2014 prefer \`MetricRow\` / \`MetricChartCard\` instead of hand-wiring tiles. |
-| \`MetricRow\` | KPI strip in one elevated card (no chart). Props: \`metrics: [{ id, label, value, unit?, trend? }]\`, optional \`onMetricChange\`, \`metricsAriaLabel\`. |
-| \`MetricChartCard\` | KPI strip + flush chart; tile click swaps series. Same metrics shape + \`data\` per metric. Default chart height 300. |
+| \`MetricRow\` | KPI strip in one elevated card (no chart). Props: \`metrics: [{ id, label, value, unit?, trend?, trendTone? }]\`, optional \`onMetricChange\`, \`metricsAriaLabel\`, \`loading\` (skeleton tiles). |
+| \`MetricChartCard\` | KPI strip + flush chart; tile click swaps series. Same metrics shape + \`data\` per metric. Default chart height 300. \`loading\` renders skeleton tiles + chart. |
 
 #### Settings
 
@@ -164,19 +366,37 @@ Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\
 
 Studio chrome (\`StudioSidebar\`, \`ModeToggle\`, \u2026) lives in \`@timbal-ai/timbal-react/studio\` \u2014 optional, not required for every dashboard.
 
-### Recipe index (\`examples/app-kit/recipes/\`)
+### Block recipes \u2014 compose these (don't clone wholesale)
+
+Ready-made **section patterns** assembled from the components above. Each is a composition to rebuild in your own domain with your data \u2014 **not** an importable component. Reach for a block before dropping to raw primitives.
 
-| Recipe file | Components to study |
-|-------------|---------------------|
-| \`metrics-row.tsx\` | \`Page\`, \`MetricRow\` |
-| \`analytics-card.tsx\` | \`MetricChartCard\`, \`Button\` |
-| \`integrations-grid.tsx\` | \`IntegrationCard\`, \`ConnectionRowList\`, \`PlanBadge\` |
-| \`table-with-filters.tsx\` | \`FilterBar\`, \`DataTable\` |
-| \`settings-page.tsx\` | \`SettingsSection\`, \`DangerZone\`, \`FloatingUnsavedChangesBar\` |
-| \`resource-gallery.tsx\` | \`ResourceCard\`, \`StatusDot\`, \`Sparkline\` |
-| \`charts-panel.tsx\` | \`ChartPanel\`, \`ChartArtifact\` |
-| \`copilot-overlay.tsx\` | \`AppShell\`, \`AppChatPanel\` |
-| \`theme-presets.tsx\` | \`ThemePresetGallery\`, \`applyTimbalTheme\` |
+**Settings**
+- **Project settings** \u2014 General / Usage / Danger sections; the floating save bar appears on first edit. Compose \`SettingsSection\` + \`FieldInput\`/\`FieldSwitch\` + \`FieldRow\` + \`InfoCard\` + \`DangerZone\` + \`FloatingUnsavedChangesBar\`.
+- **Settings form** \u2014 compact stacked form for one concern (profile, billing). Compose \`FormSection\` + \`FieldInput\`/\`FieldSelect\`/\`FieldTextarea\`.
+
+**Data & metrics**
+- **Metrics row** \u2014 KPI strip in one elevated card. Compose \`MetricRow\` + \`MetricTile\`.
+- **Analytics card** \u2014 selectable KPI tiles driving a shared chart. Compose \`MetricChartCard\` + \`LineAreaChart\`.
+- **Charts panel** \u2014 embedded chart artifact. Compose \`ChartPanel\` + \`ChartArtifactView\`.
+- **Chart catalog** \u2014 every chart kind (stacked area, multi-line, step, bar, stacked + horizontal bar, donut, radial, radar) in \`ChartPanel\` cards. Pick a \`chartType\` + options on a \`ChartArtifact\`; theme via \`--chart-N\`.
+- **Table + filters** \u2014 \`FilterBar\` above a sortable \`DataTable\` (+ \`StatusBadge\` in cells).
+
+**Collections**
+- **Integrations grid** \u2014 connector catalog + connected list. Compose \`IntegrationCard\` + \`PlanBadge\` + \`ConnectionRowList\` (\`IntegrationsEmptyState\` when empty).
+- **Resource gallery** \u2014 project / agent / dataset cards. Compose \`ResourceCard\` + \`StatusDot\` + \`Sparkline\`.
+
+**Overlays & flows** (animate automatically)
+- **Confirm & destructive** \u2014 confirm/cancel modal or destructive alert. Compose \`AppConfirmDialog\` (or \`AlertDialog\`) + \`Button\`; never hand-roll a \`Dialog\` for confirms.
+- **Detail sheet** \u2014 slide-over edit panel without leaving the list. Compose \`Sheet\` + \`Field*\` + \`Button\` + \`Separator\`.
+
+**States & auth**
+- **Empty states** \u2014 no-data / no-results / first-run. Compose \`EmptyState\` + \`Card\` + \`Button\`.
+- **Sign-in card** \u2014 centered auth entry. Compose \`Card\` + \`Input\` + \`Label\` + \`Button\`.
+
+**Shells & theming**
+- **Minimal shell** \u2014 \`AppShell\` + \`Page\` (no sidebar/chat).
+- **Copilot overlay** \u2014 \`AppShell\` + floating \`AppChatPanel\`.
+- **Theme presets** \u2014 \`ThemePresetGallery\` + \`applyTimbalTheme\` (never hand-author OKLCH).
 
 ### Typical compositions
 
@@ -187,6 +407,7 @@ Studio chrome (\`StudioSidebar\`, \`ModeToggle\`, \u2026) lives in \`@timbal-ai/
 - **Integrations** \u2014 grid of \`IntegrationCard\`; \`ConnectionRowList\` for connected providers; \`IntegrationsEmptyState\` when empty.
 - **Resource gallery** \u2014 grid of \`ResourceCard\`.
 - **Copilot-assisted app** \u2014 \`AppCopilotProvider\` + \`AppShell\` with \`chat={<AppChatPanel workforceId="\u2026" />}\`.
+- **Motion is automatic** \u2014 Dialog, AlertDialog, Sheet, Popover, DropdownMenu, Select, Tooltip, Toast, and Accordion/Collapsible animate out of the box (fade/zoom/slide/height) via the engine inlined in \`styles.css\`. Do not add a separate animation library or hand-write \`@keyframes\`.
 
 ### Example imports
 
@@ -205,6 +426,7 @@ import {
   Button,
   DataTable,
   FilterBar,
+  FilterField,
 } from "@timbal-ai/timbal-react/app";
 \`\`\`
 
@@ -222,6 +444,211 @@ import {
 - For rich in-chat widgets, use **artifacts** (\`ARTIFACT_AGENT_INSTRUCTIONS\`) \u2014 app kit is for the **host application shell**.
 `.trim();
 
+// src/design/ui-lint.ts
+var PALETTE_GROUP = TAILWIND_PALETTE_COLORS.join("|");
+var PREFIX_GROUP = COLOR_UTILITY_PREFIXES.join("|");
+var RAW_COLOR_RE = new RegExp(
+  `(?:^|[\\s"'\`:])(?:[a-z-]+:)*(?:${PREFIX_GROUP})-(?:${PALETTE_GROUP})-\\d{2,3}(?:/\\d{1,3})?`,
+  "g"
+);
+var COLOR_LITERAL_RE = /#[0-9a-fA-F]{3,8}\b|\b(?:oklch|rgba?|hsla?)\s*\(/g;
+var INLINE_STYLE_COLOR_RE = /style=\{\{[^}]*\b(?:color|background|backgroundColor|borderColor|fill|stroke)\b/;
+var BOLD_VALUE_RE = /text-(?:xl|2xl|3xl|4xl|5xl|6xl)[^"'`]*\bfont-(?:bold|extrabold|black|semibold)|font-(?:bold|extrabold|black|semibold)[^"'`]*text-(?:xl|2xl|3xl|4xl|5xl|6xl)/;
+var GRADIENT_RE = /\bbg-(?:gradient|linear|radial|conic)-/;
+var GRADIENT_DIRECTIONS = /* @__PURE__ */ new Set([
+  "t",
+  "tr",
+  "r",
+  "br",
+  "b",
+  "bl",
+  "l",
+  "tl"
+]);
+var ICON_IMPORT_RE = /from\s+["']lucide-react["']/;
+var RAW_CONTROL_SURFACE_RE = /\bborder-input\b/;
+var RESERVED_GRADIENT_SET = new Set(RESERVED_GRADIENT_TOKENS);
+function stripVariants(util) {
+  return util.replace(/^(?:[a-z-]+:)*/, "");
+}
+function isCommentOrImport(line) {
+  const t = line.trim();
+  return t.startsWith("//") || t.startsWith("*") || t.startsWith("/*") || t.startsWith("import ") || t.startsWith("export ");
+}
+function lintGeneratedUi(source, options = {}) {
+  const maxIcons = options.maxIconsPerView ?? SLOP_BUDGETS.maxIconsPerView;
+  const maxRowDividers = options.maxRowDividers ?? SLOP_BUDGETS.maxRowDividers;
+  const findings = [];
+  const lines = source.split("\n");
+  let usesLucide = false;
+  let iconUsageCount = 0;
+  let dividerRunCount = 0;
+  const lucideNames = /* @__PURE__ */ new Set();
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const lineNo = i + 1;
+    if (ICON_IMPORT_RE.test(line)) {
+      usesLucide = true;
+      const named = line.match(/\{([^}]*)\}/);
+      if (named) {
+        for (const raw of named[1].split(",")) {
+          const name = raw.trim().split(/\s+as\s+/)[0].trim();
+          if (name) lucideNames.add(name);
+        }
+      }
+      continue;
+    }
+    if (isCommentOrImport(line)) continue;
+    const rawColors = line.match(RAW_COLOR_RE);
+    if (rawColors) {
+      for (const m of rawColors) {
+        findings.push({
+          rule: "raw-color",
+          severity: "error",
+          line: lineNo,
+          message: "Hardcoded palette color. Use a semantic token (text-primary, bg-muted, border-border, text-muted-foreground, \u2026) so dark mode and rebranding work.",
+          snippet: m.trim().replace(/^["'`:\s]+/, "")
+        });
+      }
+    }
+    const literals = line.match(COLOR_LITERAL_RE);
+    if (literals) {
+      findings.push({
+        rule: "color-literal",
+        severity: "error",
+        line: lineNo,
+        message: "Hardcoded color literal. Colors must come from the theme generator (createTimbalTheme) and semantic tokens \u2014 never inline hex/oklch/rgb.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
+    if (INLINE_STYLE_COLOR_RE.test(line)) {
+      findings.push({
+        rule: "inline-style-color",
+        severity: "error",
+        line: lineNo,
+        message: "Inline style color. Move color to a semantic Tailwind token on className.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
+    if (RAW_CONTROL_SURFACE_RE.test(line)) {
+      findings.push({
+        rule: "raw-control-surface",
+        severity: "warn",
+        line: lineNo,
+        message: "Hand-rolled control surface (border-input). Use a kit control \u2014 SearchInput, Select, DropdownMenu, FieldInput, FieldSelect \u2014 so it matches every other control.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
+    if (BOLD_VALUE_RE.test(line)) {
+      findings.push({
+        rule: "bold-metric",
+        severity: "warn",
+        line: lineNo,
+        message: "Bold large value. House style: metric values use font-normal, not bold \u2014 bold giant numbers read as a template.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
+    if (GRADIENT_RE.test(line)) {
+      const fromTo = line.match(
+        new RegExp(`(?:from|via|to)-([a-z-]+)`, "g")
+      );
+      const colorStops = (fromTo ?? []).map((u) => stripVariants(u).replace(/^(?:from|via|to)-/, "")).filter((token) => !GRADIENT_DIRECTIONS.has(token));
+      const allReserved = colorStops.length > 0 && colorStops.every((token) => RESERVED_GRADIENT_SET.has(token));
+      if (!allReserved) {
+        findings.push({
+          rule: "data-gradient",
+          severity: "warn",
+          line: lineNo,
+          message: "Gradient outside chrome. Gradients are reserved for buttons / elevated / modal / playground \u2014 never a data card, tile, or table.",
+          snippet: line.trim().slice(0, 120)
+        });
+      }
+    }
+    if (/\b(?:border-t|border-b|divide-y)\b/.test(line)) {
+      dividerRunCount++;
+      if (dividerRunCount === maxRowDividers + 1) {
+        findings.push({
+          rule: "row-divider",
+          severity: "warn",
+          line: lineNo,
+          message: "Divider on every row. Prefer spacing (gap-*) or zebra striping over a rule under each list item.",
+          snippet: line.trim().slice(0, 120)
+        });
+      }
+    } else if (line.trim() !== "" && !line.includes("className")) {
+      if (!/^\s*[)>}/]/.test(line)) dividerRunCount = 0;
+    }
+    if (usesLucide && lucideNames.size > 0) {
+      for (const name of lucideNames) {
+        const usage = new RegExp(`<${name}\\b`, "g");
+        const hits = line.match(usage);
+        if (hits) iconUsageCount += hits.length;
+      }
+    }
+  }
+  if (usesLucide && iconUsageCount > maxIcons) {
+    findings.push({
+      rule: "icon-spam",
+      severity: "warn",
+      line: 1,
+      message: `Too many icons (${iconUsageCount} > ${maxIcons}). Icons should mark actions/nav/status \u2014 not decorate every label, tile, and card.`,
+      snippet: `${iconUsageCount} lucide-react icon usages`
+    });
+  }
+  const effectiveErrors = findings.filter(
+    (f) => f.severity === "error" || options.strict && f.severity === "warn"
+  ).length;
+  return {
+    findings,
+    errorCount: findings.filter((f) => f.severity === "error").length,
+    warnCount: findings.filter((f) => f.severity === "warn").length,
+    ok: effectiveErrors === 0
+  };
+}
+function formatLintReport(findings) {
+  if (findings.length === 0) return "";
+  const lines = findings.slice().sort((a, b) => a.line - b.line).map((f) => {
+    const tag = f.severity === "error" ? "ERROR" : "warn ";
+    return `  ${tag} L${f.line} [${f.rule}] ${f.message}
+        \u2192 ${f.snippet}`;
+  });
+  const errs = findings.filter((f) => f.severity === "error").length;
+  const warns = findings.filter((f) => f.severity === "warn").length;
+  return `Anti-slop review: ${errs} error(s), ${warns} warning(s)
+${lines.join("\n")}`;
+}
+
+// src/design/ui-review.ts
+function reviewGeneratedUi(source, options = {}) {
+  const lint = lintGeneratedUi(source, options);
+  const report = formatLintReport(lint.findings);
+  if (lint.ok) {
+    return { lint, passed: true, report, revisionPrompt: null };
+  }
+  const revisionPrompt = [
+    "The generated UI failed the Timbal anti-slop review. Fix every issue below, then return the corrected code only.",
+    "",
+    report,
+    "",
+    "Rules: colors come only from semantic tokens (text-primary, bg-muted, border-border, text-muted-foreground, \u2026) \u2014 never palette colors, hex, or oklch. Icons mark actions/nav/status, not decoration. Metric values use font-normal. No gradients on data surfaces. No divider under every row. Do not change anything that already passed."
+  ].join("\n");
+  return { lint, passed: false, report, revisionPrompt };
+}
+var UI_REVIEW_AGENT_INSTRUCTIONS = `
+## Self-review before returning UI (anti-slop)
+
+Before you output any generated UI code, silently re-read it and fix anything that matches the slop checklist \u2014 this is the same rubric an automated linter applies, so output that fails it will be rejected and sent back:
+
+- **No hardcoded colors.** Every color is a semantic token (\`text-primary\`, \`bg-muted\`, \`border-border\`, \`text-muted-foreground\`, \`bg-destructive\`, \u2026). No \`text-blue-600\`, no \`#hex\`, no \`oklch(...)\`, no \`style={{ color }}\`.
+- **No decorative icons.** An icon must mark an action, nav target, or status. Remove icons that sit beside a label that already says the thing. Aim for very few icons per view.
+- **Muted, sparse trends.** No colored up/down pill on every metric. Show a trend only when the change is the point.
+- **Normal-weight values.** Metric numbers use \`font-normal\`, never \`font-bold\` at large sizes.
+- **No card-in-card, no per-row dividers, no gradients on data surfaces.** Group with spacing/Sections; reserve gradients for chrome.
+- **Compose from blocks.** Prefer \`MetricRow\` / \`MetricChartCard\` / \`DataTable\` / \`IntegrationCard\` over hand-assembled primitives.
+
+If a check fails, fix it and re-read once more. Only return code that would pass clean.
+`.trim();
+
 // src/design/oklch.ts
 var clamp = (n, min, max) => Math.min(max, Math.max(min, n));
 var round = (n, digits) => {
@@ -1109,22 +1536,14 @@ var appStatTileClass = cn(
 );
 var appStatValueClass = "text-2xl font-normal tracking-tight text-foreground tabular-nums";
 var appStatLabelClass = "text-xs font-normal text-muted-foreground";
-var appFilterBarClass = cn(
-  "flex flex-wrap items-center gap-2",
-  studioTopbarPillHeightClass
-);
-var appSearchInputClass = cn(studioSearchChromeClass, "text-sm");
+var appFilterBarClass = "flex flex-wrap items-end gap-2";
+var appSearchInputClass = controlClass({}, "inline-flex items-center gap-2");
 var appBreadcrumbsClass = "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground";
 var appBreadcrumbLinkClass = "transition-colors hover:text-foreground";
 var appFieldClass = "flex flex-col gap-1.5";
 var appFieldLabelClass = "text-sm font-medium text-foreground";
 var appFieldHintClass = "text-xs text-muted-foreground";
-var appInputClass = cn(
-  studioSecondaryChromeClass,
-  "h-10 w-full rounded-lg px-3 text-sm text-foreground outline-none",
-  "placeholder:text-muted-foreground/70",
-  "focus-visible:ring-2 focus-visible:ring-foreground/10"
-);
+var appInputClass = controlClass({}, "w-full");
 var appEmptyStateClass = cn(
   appSurfaceCardClass,
   "flex flex-col items-center justify-center gap-2 py-12 text-center"
@@ -1141,9 +1560,23 @@ function useAppShellChat() {
   return useContext(AppShellChatContext);
 }
 
+// src/app/layout/app-shell-nav-context.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var AppShellNavContext = createContext2(null);
+var AppShellNavProvider = AppShellNavContext.Provider;
+function useAppShellNav() {
+  return useContext2(AppShellNavContext) ?? {
+    open: false,
+    setOpen: () => {
+    },
+    toggle: () => {
+    }
+  };
+}
+
 // src/app/layout/AppShell.tsx
 import { motion, useReducedMotion } from "motion/react";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } 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",
@@ -1210,11 +1643,29 @@ var AppShell = ({
   chatCollapsible = true,
   chatTriggerLabel = "Assistant",
   hideChatTrigger = false,
+  navOpen: navOpenProp,
+  defaultNavOpen = false,
+  onNavOpenChange,
   className,
   mainClassName
 }) => {
   const topbarContent = topbar ?? header;
   const hasChat = Boolean(chat);
+  const [uncontrolledNavOpen, setUncontrolledNavOpen] = useState(defaultNavOpen);
+  const isNavControlled = navOpenProp !== void 0;
+  const navOpen = isNavControlled ? navOpenProp : uncontrolledNavOpen;
+  const setNavOpen = useCallback(
+    (open) => {
+      if (!isNavControlled) setUncontrolledNavOpen(open);
+      onNavOpenChange?.(open);
+    },
+    [isNavControlled, onNavOpenChange]
+  );
+  const toggleNav = useCallback(() => setNavOpen(!navOpen), [navOpen, setNavOpen]);
+  const navControls = useMemo(
+    () => ({ open: navOpen, setOpen: setNavOpen, toggle: toggleNav }),
+    [navOpen, setNavOpen, toggleNav]
+  );
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultChatOpen);
   const isChatControlled = chatOpenProp !== void 0;
   const chatOpen = isChatControlled ? chatOpenProp : uncontrolledOpen;
@@ -1258,6 +1709,15 @@ var AppShell = ({
       style: studioChromeShellStyle,
       children: [
         sidebar,
+        sidebar && navOpen ? /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Close navigation",
+            onClick: () => setNavOpen(false),
+            className: "fixed inset-0 z-40 bg-foreground/30 backdrop-blur-[2px] md:hidden"
+          }
+        ) : null,
         shellBody,
         hasChat && chatOpen ? /* @__PURE__ */ jsx5(
           "div",
@@ -1285,8 +1745,9 @@ var AppShell = ({
       ]
     }
   ) });
+  const withNav = /* @__PURE__ */ jsx5(AppShellNavProvider, { value: navControls, children: tree });
   if (!hasChat) {
-    return tree;
+    return withNav;
   }
   return /* @__PURE__ */ jsx5(
     AppShellChatProvider,
@@ -1297,7 +1758,7 @@ var AppShell = ({
         toggle: toggleChat,
         collapsible: chatCollapsible
       },
-      children: tree
+      children: withNav
     }
   );
 };
@@ -1348,8 +1809,33 @@ var AppShellChatTrigger = ({
   );
 };
 
+// src/app/layout/AppShellSidebarTrigger.tsx
+import { MenuIcon } from "lucide-react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var AppShellSidebarTrigger = ({
+  label = "Open navigation",
+  className
+}) => {
+  const nav = useAppShellNav();
+  return /* @__PURE__ */ jsx8(
+    "button",
+    {
+      type: "button",
+      onClick: nav.toggle,
+      "aria-label": label,
+      "aria-expanded": nav.open,
+      className: cn(
+        "inline-flex size-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-foreground/[0.04] hover:text-foreground md:hidden",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10",
+        className
+      ),
+      children: /* @__PURE__ */ jsx8(MenuIcon, { className: "size-5", "aria-hidden": true })
+    }
+  );
+};
+
 // src/app/layout/PageHeader.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var PageHeader = ({
   title,
   description,
@@ -1358,15 +1844,15 @@ var PageHeader = ({
 }) => {
   return /* @__PURE__ */ jsxs7("header", { className: cn("aui-app-page-header", appPageHeaderClass, className), children: [
     /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx8("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
-      description ? /* @__PURE__ */ jsx8("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+      /* @__PURE__ */ jsx9("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
+      description ? /* @__PURE__ */ jsx9("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
     ] }),
-    actions ? /* @__PURE__ */ jsx8("div", { className: "aui-app-page-header-actions flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx9("div", { className: "aui-app-page-header-actions flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
   ] });
 };
 
 // src/app/layout/Page.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var Page = ({
   children,
   breadcrumbs,
@@ -1375,13 +1861,13 @@ var Page = ({
 }) => {
   return /* @__PURE__ */ jsxs8("div", { className: cn("aui-app-page", appPageColumnClass, className), children: [
     breadcrumbs,
-    /* @__PURE__ */ jsx9(PageHeader, { ...headerProps }),
+    /* @__PURE__ */ jsx10(PageHeader, { ...headerProps }),
     children
   ] });
 };
 
 // src/app/layout/Section.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var Section = ({
   title,
   description,
@@ -1389,29 +1875,29 @@ var Section = ({
   className
 }) => {
   return /* @__PURE__ */ jsxs9("section", { className: cn("aui-app-section", appSectionClass, className), children: [
-    title ? /* @__PURE__ */ jsx10("h2", { className: appSectionTitleClass, children: title }) : null,
-    description ? /* @__PURE__ */ jsx10("p", { className: appSectionDescriptionClass, children: description }) : null,
+    title ? /* @__PURE__ */ jsx11("h2", { className: appSectionTitleClass, children: title }) : null,
+    description ? /* @__PURE__ */ jsx11("p", { className: appSectionDescriptionClass, children: description }) : null,
     children
   ] });
 };
 
 // src/app/copilot/app-copilot-context.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var AppCopilotContext = createContext2(null);
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var AppCopilotContext = createContext3(null);
 var AppCopilotProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ jsx11(AppCopilotContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx12(AppCopilotContext.Provider, { value, children });
 };
 function useAppCopilotContext() {
-  return useContext2(AppCopilotContext) ?? {};
+  return useContext3(AppCopilotContext) ?? {};
 }
 
 // src/app/chat/AppChatPanel.tsx
 import { XIcon } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, 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"
@@ -1457,17 +1943,17 @@ var AppChatPanel = ({
 }) => {
   const shellChat = useAppShellChat();
   return /* @__PURE__ */ jsxs10("div", { className: cn(shellClass, className), children: [
-    shellChat?.collapsible ? /* @__PURE__ */ jsx12("div", { className: chromeClass, children: /* @__PURE__ */ jsx12(
+    shellChat?.collapsible ? /* @__PURE__ */ jsx13("div", { className: chromeClass, children: /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
         className: closeButtonClass,
         onClick: () => shellChat.setOpen(false),
         "aria-label": "Close assistant",
-        children: /* @__PURE__ */ jsx12(XIcon, { className: "size-4", "aria-hidden": true })
+        children: /* @__PURE__ */ jsx13(XIcon, { className: "size-4", "aria-hidden": true })
       }
     ) }) : null,
-    /* @__PURE__ */ jsx12("div", { className: bodyClass, children: /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13("div", { className: bodyClass, children: /* @__PURE__ */ jsx13(
       TimbalRuntimeProvider,
       {
         workforceId,
@@ -1477,7 +1963,7 @@ var AppChatPanel = ({
         attachmentsUploadUrl,
         attachmentsAccept,
         debug,
-        children: /* @__PURE__ */ jsx12(
+        children: /* @__PURE__ */ jsx13(
           Thread,
           {
             variant: "panel",
@@ -1498,23 +1984,23 @@ var AppChatPanel = ({
 };
 
 // src/app/surfaces/SurfaceCard.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var SurfaceCard = ({ children, className }) => {
-  return /* @__PURE__ */ jsx13("div", { className: cn("aui-app-surface-card", appSurfaceCardClass, className), children });
+  return /* @__PURE__ */ jsx14("div", { className: cn("aui-app-surface-card", appSurfaceCardClass, className), children });
 };
 
 // src/app/surfaces/StatTile.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var StatTile = ({ label, value, hint, className }) => {
   return /* @__PURE__ */ jsxs11("div", { className: cn("aui-app-stat-tile", appStatTileClass, className), children: [
-    /* @__PURE__ */ jsx14("span", { className: appStatLabelClass, children: label }),
-    /* @__PURE__ */ jsx14("span", { className: appStatValueClass, children: value }),
-    hint ? /* @__PURE__ */ jsx14("span", { className: "text-xs text-muted-foreground", children: hint }) : null
+    /* @__PURE__ */ jsx15("span", { className: appStatLabelClass, children: label }),
+    /* @__PURE__ */ jsx15("span", { className: appStatValueClass, children: value }),
+    hint ? /* @__PURE__ */ jsx15("span", { className: "text-xs text-muted-foreground", children: hint }) : null
   ] });
 };
 
 // src/app/surfaces/EmptyState.tsx
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 var EmptyState = ({
   title,
   description,
@@ -1522,19 +2008,20 @@ var EmptyState = ({
   className
 }) => {
   return /* @__PURE__ */ jsxs12("div", { className: cn("aui-app-empty-state", appEmptyStateClass, className), children: [
-    /* @__PURE__ */ jsx15("p", { className: appEmptyStateTitleClass, children: title }),
-    description ? /* @__PURE__ */ jsx15("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
+    /* @__PURE__ */ jsx16("p", { className: appEmptyStateTitleClass, children: title }),
+    description ? /* @__PURE__ */ jsx16("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
     action
   ] });
 };
 
 // src/app/surfaces/StatusBadge.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var statusBadgeToneClass = {
   default: "bg-muted text-foreground",
   primary: "bg-primary/10 text-primary",
   success: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
   warn: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  danger: "bg-destructive/10 text-destructive",
   muted: "bg-muted/80 text-muted-foreground"
 };
 var StatusBadge = ({
@@ -1542,7 +2029,7 @@ var StatusBadge = ({
   tone = "default",
   className
 }) => {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "span",
     {
       className: cn(
@@ -1556,7 +2043,7 @@ var StatusBadge = ({
 };
 
 // src/app/surfaces/AppConfirmDialog.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } 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";
@@ -1571,15 +2058,15 @@ var AppConfirmDialog = ({
   destructive = false,
   className
 }) => {
-  return /* @__PURE__ */ jsx17(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx18(
     DialogContent,
     {
       className: cn("gap-0 p-0 sm:max-w-md", className),
       children: /* @__PURE__ */ jsxs13("div", { className: bodyClass2, children: [
-        /* @__PURE__ */ jsx17(DialogTitle, { className: titleClass, children: title }),
-        description ? /* @__PURE__ */ jsx17("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+        /* @__PURE__ */ jsx18(DialogTitle, { className: titleClass, children: title }),
+        description ? /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: description }) : null,
         /* @__PURE__ */ jsxs13("div", { className: actionsClass, children: [
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             TimbalV2Button,
             {
               type: "button",
@@ -1589,7 +2076,7 @@ var AppConfirmDialog = ({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(
             TimbalV2Button,
             {
               type: "button",
@@ -1609,7 +2096,7 @@ var AppConfirmDialog = ({
 };
 
 // src/app/surfaces/InfoCard.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var toneClass = {
   neutral: "border-border bg-muted/40",
   info: "border-primary/25 bg-primary/5",
@@ -1633,18 +2120,18 @@ var InfoCard = ({
       className
     ),
     children: [
-      icon ? /* @__PURE__ */ jsx18("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
+      icon ? /* @__PURE__ */ jsx19("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
       /* @__PURE__ */ jsxs14("div", { className: "min-w-0 flex-1", children: [
-        title ? /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
-        children ? /* @__PURE__ */ jsx18("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
+        title ? /* @__PURE__ */ jsx19("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
+        children ? /* @__PURE__ */ jsx19("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
       ] }),
-      action ? /* @__PURE__ */ jsx18("div", { className: "shrink-0", children: action }) : null
+      action ? /* @__PURE__ */ jsx19("div", { className: "shrink-0", children: action }) : null
     ]
   }
 );
 
 // src/app/surfaces/StatusDot.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var dotClass = {
   online: "bg-emerald-500",
   busy: "bg-amber-500",
@@ -1659,7 +2146,7 @@ var StatusDot = ({
   className
 }) => /* @__PURE__ */ jsxs15("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
   /* @__PURE__ */ jsxs15("span", { className: "relative flex size-2", children: [
-    pulse ? /* @__PURE__ */ jsx19(
+    pulse ? /* @__PURE__ */ jsx20(
       "span",
       {
         className: cn(
@@ -1668,18 +2155,18 @@ var StatusDot = ({
         )
       }
     ) : null,
-    /* @__PURE__ */ jsx19("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
+    /* @__PURE__ */ jsx20("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
   ] }),
-  label ? /* @__PURE__ */ jsx19("span", { className: "text-xs text-muted-foreground", children: label }) : null
+  label ? /* @__PURE__ */ jsx20("span", { className: "text-xs text-muted-foreground", children: label }) : null
 ] });
 
 // src/app/surfaces/DescriptionList.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var DescriptionList = ({
   items,
   stacked = false,
   className
-}) => /* @__PURE__ */ jsx20(
+}) => /* @__PURE__ */ jsx21(
   "dl",
   {
     className: cn(
@@ -1694,8 +2181,8 @@ var DescriptionList = ({
           stacked ? "flex flex-col gap-0.5" : "flex items-center justify-between gap-4"
         ),
         children: [
-          /* @__PURE__ */ jsx20("dt", { className: "text-sm text-muted-foreground", children: item.label }),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21("dt", { className: "text-sm text-muted-foreground", children: item.label }),
+          /* @__PURE__ */ jsx21(
             "dd",
             {
               className: cn(
@@ -1715,8 +2202,8 @@ var DescriptionList = ({
 // src/app/surfaces/ExpandableSection.tsx
 import { useId, useState as useState2 } from "react";
 import { AnimatePresence, motion as motion2, useReducedMotion as useReducedMotion2 } from "motion/react";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
-var Chevron = ({ open }) => /* @__PURE__ */ jsx21(
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+var Chevron = ({ open }) => /* @__PURE__ */ jsx22(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1730,7 +2217,7 @@ var Chevron = ({ open }) => /* @__PURE__ */ jsx21(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": true,
-    children: /* @__PURE__ */ jsx21("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx22("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var ExpandableSection = ({
@@ -1762,15 +2249,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__ */ jsxs17("span", { className: "flex min-w-0 items-center gap-3", children: [
-            icon ? /* @__PURE__ */ jsx21("span", { className: "flex size-8 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", children: icon }) : null,
-            /* @__PURE__ */ jsx21("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
-            count != null ? /* @__PURE__ */ jsx21("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: count }) : null
+            icon ? /* @__PURE__ */ jsx22("span", { className: "flex size-8 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", children: icon }) : null,
+            /* @__PURE__ */ jsx22("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
+            count != null ? /* @__PURE__ */ jsx22("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: count }) : null
           ] }),
-          /* @__PURE__ */ jsx21(Chevron, { open })
+          /* @__PURE__ */ jsx22(Chevron, { open })
         ]
       }
     ),
-    /* @__PURE__ */ jsx21(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx22(
       motion2.div,
       {
         id: panelId,
@@ -1779,7 +2266,7 @@ var ExpandableSection = ({
         exit: reduceMotion ? void 0 : { height: 0, opacity: 0 },
         transition: { duration: 0.2, ease: "easeOut" },
         className: "overflow-hidden",
-        children: /* @__PURE__ */ jsx21("div", { className: "bg-muted/20", children })
+        children: /* @__PURE__ */ jsx22("div", { className: "bg-muted/20", children })
       },
       "body"
     ) : null })
@@ -1787,7 +2274,7 @@ var ExpandableSection = ({
 };
 
 // src/app/surfaces/ResourceCard.tsx
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs18 } 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
@@ -1814,33 +2301,33 @@ var ResourceCard = ({
 }) => {
   const body = /* @__PURE__ */ jsxs18(Fragment3, { children: [
     /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-3", children: [
-      media ? /* @__PURE__ */ jsx22("span", { className: mediaShellClass, children: media }) : null,
+      media ? /* @__PURE__ */ jsx23("span", { className: mediaShellClass, children: media }) : null,
       /* @__PURE__ */ jsxs18("div", { className: "min-w-0 flex-1 pt-0.5", children: [
-        /* @__PURE__ */ jsx22("p", { className: "truncate text-sm font-normal leading-snug text-foreground", children: title }),
-        subtitle ? /* @__PURE__ */ jsx22("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground", children: subtitle }) : null
+        /* @__PURE__ */ jsx23("p", { className: "truncate text-sm font-normal leading-snug text-foreground", children: title }),
+        subtitle ? /* @__PURE__ */ jsx23("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground", children: subtitle }) : null
       ] }),
-      badge ? /* @__PURE__ */ jsx22("span", { className: "shrink-0 pt-0.5", children: badge }) : null
+      badge ? /* @__PURE__ */ jsx23("span", { className: "shrink-0 pt-0.5", children: badge }) : null
     ] }),
     footer || action ? /* @__PURE__ */ jsxs18("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__ */ jsx22("span", { className: "min-w-0 truncate", children: footer }),
-      action ? /* @__PURE__ */ jsx22("span", { className: "shrink-0 opacity-80", children: action }) : null
+      /* @__PURE__ */ jsx23("span", { className: "min-w-0 truncate", children: footer }),
+      action ? /* @__PURE__ */ jsx23("span", { className: "shrink-0 opacity-80", children: action }) : null
     ] }) : null
   ] });
   if (onClick) {
-    return /* @__PURE__ */ jsx22("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
+    return /* @__PURE__ */ jsx23("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
   }
-  return /* @__PURE__ */ jsx22("article", { className: cn(resourceCardShellClass, className), children: body });
+  return /* @__PURE__ */ jsx23("article", { className: cn(resourceCardShellClass, className), children: body });
 };
 
 // src/app/settings/SettingsSection.tsx
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var SettingsSectionHeader = ({
   title,
   description,
   className
 }) => /* @__PURE__ */ jsxs19("div", { className: cn("flex flex-col", className), children: [
-  /* @__PURE__ */ jsx23("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
-  description ? /* @__PURE__ */ jsx23("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+  /* @__PURE__ */ jsx24("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
+  description ? /* @__PURE__ */ jsx24("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
 ] });
 var SettingsSection = ({
   title,
@@ -1859,17 +2346,17 @@ var SettingsSection = ({
     ),
     children: [
       /* @__PURE__ */ jsxs19("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx23("h2", { className: "text-sm font-medium text-foreground", children: title }),
-        description ? /* @__PURE__ */ jsx23("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
-        descriptionFooter ? /* @__PURE__ */ jsx23("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
+        /* @__PURE__ */ jsx24("h2", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx24("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
+        descriptionFooter ? /* @__PURE__ */ jsx24("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
       ] }),
-      /* @__PURE__ */ jsx23("div", { className: "min-w-0 space-y-3", children })
+      /* @__PURE__ */ jsx24("div", { className: "min-w-0 space-y-3", children })
     ]
   }
 );
 
 // src/app/settings/FieldRow.tsx
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var FieldRow = ({
   label,
   children,
@@ -1888,7 +2375,7 @@ var FieldRow = ({
         ),
         children: [
           /* @__PURE__ */ jsxs20("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx25(
               "label",
               {
                 htmlFor,
@@ -1896,17 +2383,17 @@ var FieldRow = ({
                 children: label
               }
             ),
-            description ? /* @__PURE__ */ jsx24("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
+            description ? /* @__PURE__ */ jsx25("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
           ] }),
-          /* @__PURE__ */ jsx24("div", { className: "shrink-0", children })
+          /* @__PURE__ */ jsx25("div", { className: "shrink-0", children })
         ]
       }
     );
   }
   return /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-col gap-1.5", className), children: [
-    /* @__PURE__ */ jsx24("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsx25("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
     children,
-    description ? /* @__PURE__ */ jsx24("p", { className: "text-xs text-muted-foreground", children: description }) : null
+    description ? /* @__PURE__ */ jsx25("p", { className: "text-xs text-muted-foreground", children: description }) : null
   ] });
 };
 
@@ -1914,7 +2401,7 @@ var FieldRow = ({
 import { useEffect, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import { AnimatePresence as AnimatePresence2, motion as motion3, useReducedMotion as useReducedMotion3 } from "motion/react";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 var FloatingUnsavedChangesBar = ({
   visible,
   message = "Unsaved changes",
@@ -1932,7 +2419,7 @@ var FloatingUnsavedChangesBar = ({
   useEffect(() => setMounted(true), []);
   if (!mounted || typeof document === "undefined") return null;
   return createPortal(
-    /* @__PURE__ */ jsx25(AnimatePresence2, { children: visible ? /* @__PURE__ */ jsx25("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsx26(AnimatePresence2, { children: visible ? /* @__PURE__ */ jsx26("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ jsxs21(
       motion3.div,
       {
         role: "region",
@@ -1946,10 +2433,10 @@ var FloatingUnsavedChangesBar = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: message }),
+          /* @__PURE__ */ jsx26("span", { className: "text-sm text-muted-foreground", children: message }),
           /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx25(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
-            /* @__PURE__ */ jsx25(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
+            /* @__PURE__ */ jsx26(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
+            /* @__PURE__ */ jsx26(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
           ] })
         ]
       }
@@ -1959,7 +2446,7 @@ var FloatingUnsavedChangesBar = ({
 };
 
 // src/app/settings/DangerZone.tsx
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 var DangerZoneAction = ({
   title,
   description,
@@ -1974,10 +2461,10 @@ var DangerZoneAction = ({
     ),
     children: [
       /* @__PURE__ */ jsxs22("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx26("p", { className: "text-sm font-medium text-foreground", children: title }),
-        description ? /* @__PURE__ */ jsx26("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+        /* @__PURE__ */ jsx27("p", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx27("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ jsx26("div", { className: "shrink-0", children: action })
+      /* @__PURE__ */ jsx27("div", { className: "shrink-0", children: action })
     ]
   }
 );
@@ -1995,17 +2482,17 @@ var DangerZone = ({
     ),
     children: [
       (title || description) && /* @__PURE__ */ jsxs22("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
-        title ? /* @__PURE__ */ jsx26("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
-        description ? /* @__PURE__ */ jsx26("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+        title ? /* @__PURE__ */ jsx27("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
+        description ? /* @__PURE__ */ jsx27("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ jsx26("div", { className: "divide-y divide-border bg-card", children })
+      /* @__PURE__ */ jsx27("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 jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs23 } 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,
@@ -2048,10 +2535,10 @@ var IntegrationCard = ({
   const dimmed = status === "disabled" || locked;
   const body = /* @__PURE__ */ jsxs23("div", { className: "flex h-full min-h-0 flex-col", children: [
     /* @__PURE__ */ jsxs23("div", { className: "flex shrink-0 items-start gap-3 pr-2", children: [
-      logo ? /* @__PURE__ */ jsx27("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
-      /* @__PURE__ */ jsx27("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ jsxs23("div", { className: "flex items-start justify-between gap-2", children: [
+      logo ? /* @__PURE__ */ jsx28("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
+      /* @__PURE__ */ jsx28("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ jsxs23("div", { className: "flex items-start justify-between gap-2", children: [
         /* @__PURE__ */ jsxs23("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsx28(
             "h4",
             {
               id: onClick && !action ? void 0 : titleId,
@@ -2059,12 +2546,12 @@ var IntegrationCard = ({
               children: name
             }
           ),
-          statusLabel[status] ? /* @__PURE__ */ jsx27("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
+          statusLabel[status] ? /* @__PURE__ */ jsx28("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
         ] }),
-        badge ? /* @__PURE__ */ jsx27("span", { className: "shrink-0", children: badge }) : null
+        badge ? /* @__PURE__ */ jsx28("span", { className: "shrink-0", children: badge }) : null
       ] }) })
     ] }),
-    description ? /* @__PURE__ */ jsx27(
+    description ? /* @__PURE__ */ jsx28(
       "p",
       {
         className: cn(
@@ -2075,8 +2562,8 @@ var IntegrationCard = ({
       }
     ) : null,
     action ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
-      /* @__PURE__ */ jsx27("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
-      /* @__PURE__ */ jsx27("div", { className: "relative mt-3 shrink-0", children: action })
+      /* @__PURE__ */ jsx28("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
+      /* @__PURE__ */ jsx28("div", { className: "relative mt-3 shrink-0", children: action })
     ] }) : null
   ] });
   const shellClass3 = cn(
@@ -2086,7 +2573,7 @@ var IntegrationCard = ({
     className
   );
   if (onClick && !action) {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(
       "button",
       {
         type: "button",
@@ -2103,12 +2590,12 @@ var IntegrationCard = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx27("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
+  return /* @__PURE__ */ jsx28("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
 };
 
 // src/app/integrations/IntegrationsEmptyState.tsx
 import { useId as useId3 } from "react";
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 var IntegrationsEmptyState = ({
   title = "No integrations yet",
   description = "Connect a provider to start syncing data and powering your workforce.",
@@ -2127,7 +2614,7 @@ var IntegrationsEmptyState = ({
       ),
       "aria-labelledby": titleId,
       children: [
-        icon ? /* @__PURE__ */ jsx28(
+        icon ? /* @__PURE__ */ jsx29(
           "span",
           {
             className: cn(
@@ -2139,21 +2626,21 @@ var IntegrationsEmptyState = ({
             children: icon
           }
         ) : null,
-        /* @__PURE__ */ jsx28("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
-        description ? /* @__PURE__ */ jsx28("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
-        action ? /* @__PURE__ */ jsx28("div", { className: "mt-1", children: action }) : null
+        /* @__PURE__ */ jsx29("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx29("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
+        action ? /* @__PURE__ */ jsx29("div", { className: "mt-1", children: action }) : null
       ]
     }
   );
 };
 
 // src/app/integrations/PlanBadge.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } 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__ */ jsx29("span", { className: cn(planBadgeClass, className), children });
+var PlanBadge = ({ children, className }) => /* @__PURE__ */ jsx30("span", { className: cn(planBadgeClass, className), children });
 
 // src/app/integrations/ConnectionRow.tsx
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 var logoShellClass2 = cn(
   "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg",
   TIMBAL_V2_LOGO_TILE
@@ -2169,13 +2656,13 @@ var ConnectionRow = ({
   className
 }) => {
   const inner = /* @__PURE__ */ jsxs25(Fragment5, { children: [
-    logo ? /* @__PURE__ */ jsx30("span", { className: logoShellClass2, children: logo }) : null,
+    logo ? /* @__PURE__ */ jsx31("span", { className: logoShellClass2, children: logo }) : null,
     /* @__PURE__ */ jsxs25("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx30("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
-      meta ? /* @__PURE__ */ jsx30("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
+      /* @__PURE__ */ jsx31("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
+      meta ? /* @__PURE__ */ jsx31("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
     ] }),
-    badge ? /* @__PURE__ */ jsx30("span", { className: "shrink-0", children: badge }) : null,
-    action ? /* @__PURE__ */ jsx30("span", { className: "shrink-0", children: action }) : null
+    badge ? /* @__PURE__ */ jsx31("span", { className: "shrink-0", children: badge }) : null,
+    action ? /* @__PURE__ */ jsx31("span", { className: "shrink-0", children: action }) : null
   ] });
   const rowClass2 = cn(
     "flex w-full items-center gap-3 px-4 py-3 text-left",
@@ -2183,7 +2670,7 @@ var ConnectionRow = ({
     className
   );
   if (onClick) {
-    return /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       "button",
       {
         type: "button",
@@ -2195,7 +2682,7 @@ var ConnectionRow = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx30("div", { role: "listitem", className: rowClass2, children: inner });
+  return /* @__PURE__ */ jsx31("div", { role: "listitem", className: rowClass2, children: inner });
 };
 var connectionRowListClass = cn(
   "overflow-hidden rounded-2xl",
@@ -2203,12 +2690,12 @@ var connectionRowListClass = cn(
 );
 
 // src/app/integrations/ConnectionRowList.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var ConnectionRowList = ({
   children,
   "aria-label": ariaLabel = "Connected integrations",
   className
-}) => /* @__PURE__ */ jsx31(
+}) => /* @__PURE__ */ jsx32(
   "div",
   {
     role: "list",
@@ -2219,7 +2706,7 @@ var ConnectionRowList = ({
 );
 
 // src/app/navigation/SubNav.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var SubNav = ({
   items,
   activeId,
@@ -2228,7 +2715,7 @@ var SubNav = ({
   "aria-label": ariaLabel = "Section navigation",
   layoutId
 }) => {
-  return /* @__PURE__ */ jsx32("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx33(
     PillSegmentedTabs,
     {
       value: activeId,
@@ -2242,13 +2729,13 @@ var SubNav = ({
 };
 
 // src/app/navigation/Breadcrumbs.tsx
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 var Breadcrumbs = ({ items, className }) => {
-  return /* @__PURE__ */ jsx33("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx33("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx34("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx34("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     return /* @__PURE__ */ jsxs26("li", { className: "inline-flex items-center gap-1.5", children: [
-      index > 0 ? /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
-      isLast ? /* @__PURE__ */ jsx33("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx33("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ jsx33(
+      index > 0 ? /* @__PURE__ */ jsx34("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
+      isLast ? /* @__PURE__ */ jsx34("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx34("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ jsx34(
         "button",
         {
           type: "button",
@@ -2262,7 +2749,7 @@ var Breadcrumbs = ({ items, className }) => {
 };
 
 // src/app/forms/Field.tsx
-import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 var Field = ({
   label,
   hint,
@@ -2272,10 +2759,10 @@ var Field = ({
   htmlFor
 }) => {
   return /* @__PURE__ */ jsxs27("div", { className: cn("aui-app-field", appFieldClass, className), children: [
-    /* @__PURE__ */ jsx34("label", { className: appFieldLabelClass, htmlFor, children: label }),
+    /* @__PURE__ */ jsx35("label", { className: appFieldLabelClass, htmlFor, children: label }),
     children,
-    hint && !error ? /* @__PURE__ */ jsx34("p", { className: appFieldHintClass, children: hint }) : null,
-    error ? /* @__PURE__ */ jsx34("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
+    hint && !error ? /* @__PURE__ */ jsx35("p", { className: appFieldHintClass, children: hint }) : null,
+    error ? /* @__PURE__ */ jsx35("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
   ] });
 };
 var FieldInput = ({
@@ -2288,7 +2775,7 @@ var FieldInput = ({
   ...inputProps
 }) => {
   const inputId = id ?? inputProps.name;
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     Field,
     {
       label,
@@ -2296,7 +2783,7 @@ var FieldInput = ({
       error,
       htmlFor: inputId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx35(
         "input",
         {
           id: inputId,
@@ -2310,7 +2797,7 @@ var FieldInput = ({
 };
 
 // src/app/forms/FieldTextarea.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var textareaClass = cn(
   appInputClass,
   "min-h-[5.5rem] resize-y py-2.5 leading-relaxed"
@@ -2325,7 +2812,7 @@ var FieldTextarea = ({
   ...props
 }) => {
   const textareaId = id ?? props.name;
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     Field,
     {
       label,
@@ -2333,7 +2820,7 @@ var FieldTextarea = ({
       error,
       htmlFor: textareaId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsx36(
         "textarea",
         {
           id: textareaId,
@@ -2348,7 +2835,7 @@ var FieldTextarea = ({
 
 // src/app/forms/FieldSelect.tsx
 import { ChevronDownIcon } from "lucide-react";
-import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
 var selectWrapClass = "relative";
 var selectClass = cn(
   appInputClass,
@@ -2365,7 +2852,7 @@ var FieldSelect = ({
   ...props
 }) => {
   const selectId = id ?? props.name;
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Field,
     {
       label,
@@ -2374,7 +2861,7 @@ var FieldSelect = ({
       htmlFor: selectId,
       className: fieldClassName,
       children: /* @__PURE__ */ jsxs28("div", { className: selectWrapClass, children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "select",
           {
             id: selectId,
@@ -2384,7 +2871,7 @@ var FieldSelect = ({
             children
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           ChevronDownIcon,
           {
             className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground",
@@ -2397,7 +2884,7 @@ var FieldSelect = ({
 };
 
 // src/app/forms/FieldSwitch.tsx
-import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs29 } 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",
@@ -2428,7 +2915,7 @@ var FieldSwitch = ({
       htmlFor: inputId,
       children: [
         /* @__PURE__ */ jsxs29("span", { className: "relative mt-0.5", children: [
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             "input",
             {
               id: inputId,
@@ -2438,11 +2925,11 @@ var FieldSwitch = ({
               ...props
             }
           ),
-          /* @__PURE__ */ jsx37("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ jsx37("span", { className: thumbClass }) })
+          /* @__PURE__ */ jsx38("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ jsx38("span", { className: thumbClass }) })
         ] }),
         /* @__PURE__ */ jsxs29("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsx37("span", { className: "text-sm font-medium text-foreground", children: label }),
-          description ? /* @__PURE__ */ jsx37("span", { className: "text-xs text-muted-foreground", children: description }) : null
+          /* @__PURE__ */ jsx38("span", { className: "text-sm font-medium text-foreground", children: label }),
+          description ? /* @__PURE__ */ jsx38("span", { className: "text-xs text-muted-foreground", children: description }) : null
         ] })
       ]
     }
@@ -2451,7 +2938,7 @@ var FieldSwitch = ({
 
 // src/app/forms/SearchInput.tsx
 import { SearchIcon } from "lucide-react";
-import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
 var SearchInput = ({
   className,
   placeholder = "Search\u2026",
@@ -2466,8 +2953,8 @@ var SearchInput = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx38(SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx39(
           "input",
           {
             type: "search",
@@ -2482,18 +2969,18 @@ var SearchInput = ({
 };
 
 // src/app/forms/FormSection.tsx
-import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
 var FormSection = ({ title, children, className }) => {
   return /* @__PURE__ */ jsxs31("fieldset", { className: cn("aui-app-form-section", appSectionClass, "border-0 p-0", className), children: [
-    title ? /* @__PURE__ */ jsx39("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
-    /* @__PURE__ */ jsx39("div", { className: "flex flex-col gap-4", children })
+    title ? /* @__PURE__ */ jsx40("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
+    /* @__PURE__ */ jsx40("div", { className: "flex flex-col gap-4", children })
   ] });
 };
 
 // src/app/data/FilterBar.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var FilterBar = ({ children, className }) => {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
       className: cn("aui-app-filter-bar", appFilterBarClass, className),
@@ -2504,20 +2991,41 @@ var FilterBar = ({ children, className }) => {
   );
 };
 
+// src/app/data/FilterField.tsx
+import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+var FilterField = ({
+  label,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs32("div", { className: cn("aui-app-filter-field", appFieldClass, className), children: [
+    label ? /* @__PURE__ */ jsx42("span", { className: appFieldLabelClass, children: label }) : null,
+    children
+  ] });
+};
+
 // src/app/data/DataTable.tsx
-import { useMemo, useState as useState4 } from "react";
-import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState4 } from "react";
+import {
+  ArrowDownIcon,
+  ArrowUpDownIcon,
+  ArrowUpIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon
+} from "lucide-react";
+import { jsx as jsx43, jsxs as jsxs33 } from "react/jsx-runtime";
 var shellClass2 = "overflow-hidden rounded-xl border border-border bg-card shadow-card";
 var tableClass = "w-full border-collapse bg-transparent text-sm";
 var headCellClass = "border-b border-border/60 bg-transparent px-4 py-2.5 text-left text-xs font-medium uppercase tracking-wide text-muted-foreground";
 var bodyCellClass = "border-b border-border/40 bg-transparent px-4 py-2.5 text-foreground";
-var rowClass = "bg-transparent transition-colors hover:bg-foreground/[0.03] data-[clickable=true]:cursor-pointer";
+var rowClass = "bg-transparent transition-colors hover:bg-foreground/[0.03] data-[clickable=true]:cursor-pointer data-[selected=true]:bg-primary/[0.04]";
 var footCellClass = "border-t border-border/60 bg-transparent px-4 py-2.5 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-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-card/95 shadow-[0_1px_0_0_hsl(var(--border)/0.5)] backdrop-blur-sm [&_th]:bg-card/95";
+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-transparent text-muted-foreground transition-colors hover:bg-foreground/[0.04] 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",
@@ -2547,12 +3055,12 @@ function SortIndicator({
 }) {
   const iconClass = "size-3.5 shrink-0 opacity-60 group-hover:opacity-100";
   if (!active) {
-    return /* @__PURE__ */ jsx41(ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ jsx43(ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
   }
   if (direction === "desc") {
-    return /* @__PURE__ */ jsx41(ArrowDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ jsx43(ArrowDownIcon, { className: iconClass, "aria-hidden": true });
   }
-  return /* @__PURE__ */ jsx41(ArrowUpIcon, { className: iconClass, "aria-hidden": true });
+  return /* @__PURE__ */ jsx43(ArrowUpIcon, { className: iconClass, "aria-hidden": true });
 }
 function DataTable({
   columns,
@@ -2571,7 +3079,18 @@ function DataTable({
   onRowClick,
   stickyHeader = false,
   dense = false,
-  caption
+  caption,
+  loading = false,
+  loadingRows,
+  selectable = false,
+  selectedKeys: selectedKeysProp,
+  defaultSelectedKeys,
+  onSelectionChange,
+  selectAllAriaLabel = "Select all rows",
+  pageSize,
+  pageIndex: pageIndexProp,
+  defaultPageIndex = 0,
+  onPageChange
 }) {
   const [uncontrolledSort, setUncontrolledSort] = useState4(
     defaultSort
@@ -2584,7 +3103,28 @@ function DataTable({
     }
     onSortChange?.(next);
   };
-  const sortedRows = useMemo(() => {
+  const [uncontrolledSelected, setUncontrolledSelected] = useState4(
+    defaultSelectedKeys ?? []
+  );
+  const isSelectionControlled = selectedKeysProp !== void 0;
+  const selectedKeys = isSelectionControlled ? selectedKeysProp : uncontrolledSelected;
+  const selectedSet = useMemo2(() => new Set(selectedKeys), [selectedKeys]);
+  const setSelected = (next) => {
+    if (!isSelectionControlled) {
+      setUncontrolledSelected(next);
+    }
+    onSelectionChange?.(next);
+  };
+  const [uncontrolledPage, setUncontrolledPage] = useState4(defaultPageIndex);
+  const isPageControlled = pageIndexProp !== void 0;
+  const rawPageIndex = isPageControlled ? pageIndexProp : uncontrolledPage;
+  const setPage = (next) => {
+    if (!isPageControlled) {
+      setUncontrolledPage(next);
+    }
+    onPageChange?.(next);
+  };
+  const sortedRows = useMemo2(() => {
     if (!sort) return rows;
     const column = columns.find((col) => col.id === sort.columnId);
     if (!column?.sortable) return rows;
@@ -2600,89 +3140,218 @@ function DataTable({
       return sort.direction === "asc" ? cmp : -cmp;
     });
   }, [columns, rows, sort]);
+  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(() => {
+    if (!paginated || isPageControlled) return;
+    if (uncontrolledPage > pageCount - 1) {
+      setUncontrolledPage(pageCount - 1);
+    }
+  }, [paginated, isPageControlled, uncontrolledPage, pageCount]);
+  const visibleRows = useMemo2(() => {
+    if (!paginated) return sortedRows;
+    const start = pageIndex * pageSize;
+    return sortedRows.slice(start, start + pageSize);
+  }, [paginated, sortedRows, pageIndex, pageSize]);
   const cellPad = dense ? "px-3 py-2" : void 0;
   const headPad = dense ? "px-3 py-2" : void 0;
-  if (rows.length === 0 && emptyMode === "replace") {
-    return /* @__PURE__ */ jsx41(EmptyState, { title: emptyTitle, description: emptyDescription, className });
+  const colSpan = columns.length + (selectable ? 1 : 0);
+  if (!loading && rows.length === 0 && emptyMode === "replace") {
+    return /* @__PURE__ */ jsx43(EmptyState, { title: emptyTitle, description: emptyDescription, className });
   }
+  const allKeys = sortedRows.map(getRowKey);
+  const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));
+  const headerCheckedState = allSelected ? true : selectedSet.size > 0 ? "indeterminate" : false;
+  const toggleAll = () => {
+    if (allSelected) {
+      setSelected([]);
+    } else {
+      setSelected(allKeys);
+    }
+  };
+  const toggleRow = (key) => {
+    const next = new Set(selectedSet);
+    if (next.has(key)) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+    setSelected([...next]);
+  };
   const rowCountText = rowCountLabel?.(sortedRows.length) ?? `${sortedRows.length} row${sortedRows.length === 1 ? "" : "s"}`;
-  const hasFoot = Boolean((showRowCount || footer) && sortedRows.length > 0);
-  return /* @__PURE__ */ jsx41("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ jsx41("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs32("table", { className: tableClass, children: [
-    caption ? /* @__PURE__ */ jsx41("caption", { className: "sr-only", children: caption }) : null,
-    /* @__PURE__ */ jsx41("thead", { className: cn(stickyHeader && stickyHeadClass), children: /* @__PURE__ */ jsx41("tr", { children: 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__ */ jsxs32(
-        "button",
+  const hasPager = paginated && !loading && sortedRows.length > 0;
+  const hasFoot = (showRowCount || footer || hasPager) && (loading || sortedRows.length > 0);
+  const skeletonCount = loadingRows ?? pageSize ?? 5;
+  return /* @__PURE__ */ jsx43("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ jsx43("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs33("table", { className: tableClass, children: [
+    caption ? /* @__PURE__ */ jsx43("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ jsx43("thead", { className: cn(stickyHeader && stickyHeadClass), children: /* @__PURE__ */ jsxs33("tr", { children: [
+      selectable ? /* @__PURE__ */ jsx43("th", { scope: "col", className: cn(selectCellClass, headPad), children: /* @__PURE__ */ jsx43(
+        Checkbox,
         {
-          type: "button",
-          className: sortButtonClass,
-          onClick: () => setSort(nextSort(sort, col.id)),
-          children: [
-            /* @__PURE__ */ jsx41("span", { className: "truncate", children: col.header }),
-            /* @__PURE__ */ jsx41(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
-          ]
+          checked: headerCheckedState,
+          onCheckedChange: toggleAll,
+          "aria-label": selectAllAriaLabel,
+          disabled: loading || allKeys.length === 0
         }
-      ) : col.header;
-      return /* @__PURE__ */ jsx41(
-        "th",
-        {
-          scope: "col",
-          "aria-sort": ariaSort,
-          className: cn(
-            headCellClass,
-            headPad,
-            col.align && alignClass[col.align],
-            col.headerClassName
-          ),
-          children: headerContent
-        },
-        col.id
-      );
-    }) }) }),
-    /* @__PURE__ */ jsx41("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: sortedRows.length === 0 ? /* @__PURE__ */ jsx41("tr", { children: /* @__PURE__ */ jsx41("td", { colSpan: columns.length, className: emptyCellClass, children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-col items-center gap-1", children: [
-      /* @__PURE__ */ jsx41("p", { className: "font-medium text-foreground", children: emptyTitle }),
-      emptyDescription ? /* @__PURE__ */ jsx41("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
-    ] }) }) }) : sortedRows.map((row) => /* @__PURE__ */ jsx41(
-      "tr",
-      {
-        className: rowClass,
-        "data-clickable": onRowClick ? "true" : void 0,
-        onClick: onRowClick ? () => onRowClick(row) : void 0,
-        onKeyDown: onRowClick ? (event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            onRowClick(row);
+      ) }) : null,
+      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__ */ jsxs33(
+          "button",
+          {
+            type: "button",
+            className: sortButtonClass,
+            onClick: () => setSort(nextSort(sort, col.id)),
+            children: [
+              /* @__PURE__ */ jsx43("span", { className: "truncate", children: col.header }),
+              /* @__PURE__ */ jsx43(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
+            ]
           }
-        } : void 0,
-        tabIndex: onRowClick ? 0 : void 0,
-        role: onRowClick ? "button" : void 0,
-        children: columns.map((col) => /* @__PURE__ */ jsx41(
-          "td",
+        ) : col.header;
+        return /* @__PURE__ */ jsx43(
+          "th",
           {
+            scope: "col",
+            "aria-sort": ariaSort,
             className: cn(
-              bodyCellClass,
-              cellPad,
+              headCellClass,
+              headPad,
               col.align && alignClass[col.align],
-              col.className
+              col.headerClassName
             ),
-            children: col.cell(row)
+            children: headerContent
           },
           col.id
-        ))
-      },
-      getRowKey(row)
-    )) }),
-    hasFoot ? /* @__PURE__ */ jsx41("tfoot", { children: /* @__PURE__ */ jsx41("tr", { children: /* @__PURE__ */ jsx41("td", { colSpan: columns.length, className: footCellClass, children: /* @__PURE__ */ jsxs32(
+        );
+      })
+    ] }) }),
+    /* @__PURE__ */ jsx43("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: loading ? Array.from({ length: skeletonCount }).map((_, rowIdx) => /* @__PURE__ */ jsxs33("tr", { className: rowClass, "aria-hidden": true, children: [
+      selectable ? /* @__PURE__ */ jsx43("td", { className: cn(selectCellClass, cellPad), children: /* @__PURE__ */ jsx43(Skeleton, { className: "size-4 rounded-[4px]" }) }) : null,
+      columns.map((col) => /* @__PURE__ */ jsx43(
+        "td",
+        {
+          className: cn(
+            bodyCellClass,
+            cellPad,
+            col.align && alignClass[col.align],
+            col.className
+          ),
+          children: /* @__PURE__ */ jsx43(Skeleton, { className: "h-4 w-[60%]" })
+        },
+        col.id
+      ))
+    ] }, `skeleton-${rowIdx}`)) : visibleRows.length === 0 ? /* @__PURE__ */ jsx43("tr", { children: /* @__PURE__ */ jsx43("td", { colSpan, className: emptyCellClass, children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx43("p", { className: "font-medium text-foreground", children: emptyTitle }),
+      emptyDescription ? /* @__PURE__ */ jsx43("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__ */ jsxs33(
+        "tr",
+        {
+          className: rowClass,
+          "data-clickable": onRowClick ? "true" : void 0,
+          "data-selected": isSelected ? "true" : void 0,
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          onKeyDown: onRowClick ? (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              onRowClick(row);
+            }
+          } : void 0,
+          tabIndex: onRowClick ? 0 : void 0,
+          role: onRowClick ? "button" : void 0,
+          children: [
+            selectable ? /* @__PURE__ */ jsx43(
+              "td",
+              {
+                className: cn(selectCellClass, cellPad),
+                onClick: (event) => event.stopPropagation(),
+                children: /* @__PURE__ */ jsx43(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onCheckedChange: () => toggleRow(key),
+                    "aria-label": `Select row`
+                  }
+                )
+              }
+            ) : null,
+            columns.map((col) => /* @__PURE__ */ jsx43(
+              "td",
+              {
+                className: cn(
+                  bodyCellClass,
+                  cellPad,
+                  col.align && alignClass[col.align],
+                  col.className
+                ),
+                children: col.cell(row)
+              },
+              col.id
+            ))
+          ]
+        },
+        key
+      );
+    }) }),
+    hasFoot ? /* @__PURE__ */ jsx43("tfoot", { children: /* @__PURE__ */ jsx43("tr", { children: /* @__PURE__ */ jsx43("td", { colSpan, className: footCellClass, children: /* @__PURE__ */ jsxs33(
       "div",
       {
         className: cn(
           footInnerClass,
-          showRowCount && footer ? "justify-between" : "justify-start"
+          (showRowCount || footer || hasPager) && "justify-between"
         ),
         children: [
-          showRowCount ? /* @__PURE__ */ jsx41("span", { children: rowCountText }) : null,
-          footer
+          /* @__PURE__ */ jsxs33("div", { className: footInnerClass, children: [
+            showRowCount ? /* @__PURE__ */ jsxs33("span", { children: [
+              rowCountText,
+              selectable && selectedSet.size > 0 ? ` \xB7 ${selectedSet.size} selected` : null
+            ] }) : selectable && selectedSet.size > 0 ? /* @__PURE__ */ jsxs33("span", { children: [
+              selectedSet.size,
+              " selected"
+            ] }) : null,
+            footer
+          ] }),
+          hasPager ? /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs33("span", { className: "tabular-nums", children: [
+              pageIndex * pageSize + 1,
+              "\u2013",
+              Math.min(
+                (pageIndex + 1) * pageSize,
+                sortedRows.length
+              ),
+              " ",
+              "of ",
+              sortedRows.length
+            ] }),
+            /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx43(
+                "button",
+                {
+                  type: "button",
+                  className: pagerButtonClass,
+                  onClick: () => setPage(pageIndex - 1),
+                  disabled: pageIndex <= 0,
+                  "aria-label": "Previous page",
+                  children: /* @__PURE__ */ jsx43(ChevronLeftIcon, { className: "size-4", "aria-hidden": true })
+                }
+              ),
+              /* @__PURE__ */ jsx43(
+                "button",
+                {
+                  type: "button",
+                  className: pagerButtonClass,
+                  onClick: () => setPage(pageIndex + 1),
+                  disabled: pageIndex >= pageCount - 1,
+                  "aria-label": "Next page",
+                  children: /* @__PURE__ */ jsx43(ChevronRightIcon, { className: "size-4", "aria-hidden": true })
+                }
+              )
+            ] })
+          ] }) : null
         ]
       }
     ) }) }) }) : null
@@ -2691,7 +3360,7 @@ function DataTable({
 
 // src/app/data/ChartPanel.tsx
 import { useId as useId4 } from "react";
-import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 var ChartPanel = ({
   title,
   description,
@@ -2699,19 +3368,20 @@ var ChartPanel = ({
   children,
   actions,
   height = 300,
+  loading = false,
   className
 }) => {
   const titleId = useId4();
   const resolvedTitle = title ?? artifact?.title;
   const hasHeader = Boolean(resolvedTitle || description || actions);
-  const body = children ?? (artifact ? /* @__PURE__ */ jsx42(ChartArtifactView, { artifact, embedded: true, height }) : null);
-  return /* @__PURE__ */ jsxs33(
+  const body = loading ? /* @__PURE__ */ jsx44(Skeleton, { className: "w-full rounded-lg", style: { height }, "aria-hidden": true }) : children ?? (artifact ? /* @__PURE__ */ jsx44(ChartArtifactView, { artifact, embedded: true, height }) : null);
+  return /* @__PURE__ */ jsxs34(
     "section",
     {
       className: cn(metricCardShellClass, "aui-app-chart-panel", className),
       "aria-labelledby": resolvedTitle ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx44(
           MetricCardHeader,
           {
             title: resolvedTitle,
@@ -2720,14 +3390,14 @@ var ChartPanel = ({
             actions
           }
         ),
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx44(
           "div",
           {
             className: cn(
               "relative min-h-0 w-full",
               hasHeader ? metricChartPlotRegionClass : "pt-2 pb-3"
             ),
-            children: body ?? /* @__PURE__ */ jsx42(
+            children: body ?? /* @__PURE__ */ jsx44(
               "div",
               {
                 className: "flex items-center justify-center text-sm font-normal text-muted-foreground",
@@ -2745,7 +3415,7 @@ var ChartPanel = ({
 
 // src/app/data/MetricRow.tsx
 import { useId as useId5, useState as useState5 } from "react";
-import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var MetricRow = ({
   title,
   description,
@@ -2755,6 +3425,7 @@ var MetricRow = ({
   defaultActiveMetricId,
   onMetricChange,
   metricsAriaLabel = "Metrics",
+  loading = false,
   className
 }) => {
   const titleId = useId5();
@@ -2767,13 +3438,13 @@ var MetricRow = ({
     if (activeMetricId == null) setInternalId(id);
     onMetricChange?.(id);
   };
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx45(
           MetricCardHeader,
           {
             title,
@@ -2782,17 +3453,29 @@ var MetricRow = ({
             actions
           }
         ),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx45(
           "div",
           {
             role: selectable ? "group" : void 0,
             "aria-label": selectable ? metricsAriaLabel : void 0,
+            "aria-busy": loading || void 0,
             className: cn(
               metricTilesRowClass,
-              metricTilesGridColsClass(metrics.length),
+              metricTilesGridColsClass(loading ? metrics.length || 4 : metrics.length),
               (title || description || actions) && "mt-3"
             ),
-            children: metrics.map((m, index) => /* @__PURE__ */ jsx43(
+            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ jsxs35(
+              "div",
+              {
+                className: "flex min-w-0 flex-1 flex-col gap-2 px-4 py-3",
+                "aria-hidden": true,
+                children: [
+                  /* @__PURE__ */ jsx45(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ jsx45(Skeleton, { className: "h-7 w-24" })
+                ]
+              },
+              `skeleton-${index}`
+            )) : metrics.map((m, index) => /* @__PURE__ */ jsx45(
               MetricTile,
               {
                 label: m.label,
@@ -2815,7 +3498,7 @@ var MetricRow = ({
 
 // src/app/data/MetricChartCard.tsx
 import { useId as useId6, useState as useState6 } from "react";
-import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var MetricChartCard = ({
   title,
   description,
@@ -2831,6 +3514,7 @@ var MetricChartCard = ({
   formatValue,
   emptyLabel = "No data yet",
   metricsAriaLabel = "Metrics",
+  loading = false,
   className
 }) => {
   const titleId = useId6();
@@ -2845,13 +3529,13 @@ var MetricChartCard = ({
   };
   const hasHeader = Boolean(title || description || actions);
   const chartAriaLabel = typeof active?.label === "string" ? `${active.label} over time` : "Metric chart";
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx46(
           MetricCardHeader,
           {
             title,
@@ -2860,17 +3544,29 @@ var MetricChartCard = ({
             actions
           }
         ),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx46(
           "div",
           {
             role: "group",
             "aria-label": metricsAriaLabel,
+            "aria-busy": loading || void 0,
             className: cn(
               metricTilesRowClass,
-              metricTilesGridColsClass(metrics.length),
+              metricTilesGridColsClass(loading ? metrics.length || 4 : metrics.length),
               hasHeader && "mt-3"
             ),
-            children: metrics.map((m, index) => /* @__PURE__ */ jsx44(
+            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ jsxs36(
+              "div",
+              {
+                className: "flex min-w-0 flex-1 flex-col gap-2 px-4 py-3",
+                "aria-hidden": true,
+                children: [
+                  /* @__PURE__ */ jsx46(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ jsx46(Skeleton, { className: "h-7 w-24" })
+                ]
+              },
+              `skeleton-${index}`
+            )) : metrics.map((m, index) => /* @__PURE__ */ jsx46(
               MetricTile,
               {
                 label: m.label,
@@ -2886,7 +3582,14 @@ var MetricChartCard = ({
             ))
           }
         ),
-        /* @__PURE__ */ jsx44("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: active?.data && active.data.length > 0 ? /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx46("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: loading ? /* @__PURE__ */ jsx46(
+          Skeleton,
+          {
+            className: "w-full rounded-lg",
+            style: { height },
+            "aria-hidden": true
+          }
+        ) : active?.data && active.data.length > 0 ? /* @__PURE__ */ jsx46(
           LineAreaChart,
           {
             data: active.data,
@@ -2906,7 +3609,7 @@ var MetricChartCard = ({
             ariaLabel: chartAriaLabel
           },
           active.id
-        ) : /* @__PURE__ */ jsx44(
+        ) : /* @__PURE__ */ jsx46(
           "div",
           {
             className: "flex w-full items-center justify-center text-sm font-normal text-muted-foreground",
@@ -2920,9 +3623,99 @@ var MetricChartCard = ({
   );
 };
 
+// src/hooks/use-live-query.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useRef, useState as useState7 } from "react";
+function useInterval(callback, delayMs) {
+  const saved = useRef(callback);
+  useEffect3(() => {
+    saved.current = callback;
+  }, [callback]);
+  useEffect3(() => {
+    if (delayMs === null) return;
+    const id = setInterval(() => saved.current(), delayMs);
+    return () => clearInterval(id);
+  }, [delayMs]);
+}
+function useLiveQuery(fetcher, options = {}) {
+  const {
+    intervalMs = null,
+    enabled = true,
+    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(() => {
+    fetcherRef.current = fetcher;
+  }, [fetcher]);
+  const mounted = useRef(true);
+  const requestId = useRef(0);
+  const hasData = useRef(false);
+  useEffect3(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const run = useCallback2(() => {
+    const id = ++requestId.current;
+    if (hasData.current) {
+      setRefreshing(true);
+    } else {
+      setLoading(true);
+    }
+    fetcherRef.current().then((result) => {
+      if (!mounted.current || id !== requestId.current) return;
+      setData(result);
+      setError(void 0);
+      setLastUpdated(Date.now());
+      hasData.current = true;
+    }).catch((err) => {
+      if (!mounted.current || id !== requestId.current) return;
+      setError(err);
+    }).finally(() => {
+      if (!mounted.current || id !== requestId.current) return;
+      setLoading(false);
+      setRefreshing(false);
+    });
+  }, []);
+  const refetch = useCallback2(() => {
+    if (!enabled) return;
+    run();
+  }, [enabled, run]);
+  useEffect3(() => {
+    if (!enabled) return;
+    if (immediate) run();
+  }, [enabled, immediate, run]);
+  useEffect3(() => {
+    if (!enabled || intervalMs === null) return;
+    const tick = () => {
+      if (refetchOnFocus && typeof document !== "undefined" && document.visibilityState === "hidden") {
+        return;
+      }
+      run();
+    };
+    const handle = setInterval(tick, intervalMs);
+    return () => clearInterval(handle);
+  }, [enabled, intervalMs, refetchOnFocus, run]);
+  useEffect3(() => {
+    if (!enabled || !refetchOnFocus || typeof document === "undefined") return;
+    const onVisible = () => {
+      if (document.visibilityState === "visible") run();
+    };
+    document.addEventListener("visibilitychange", onVisible);
+    return () => document.removeEventListener("visibilitychange", onVisible);
+  }, [enabled, refetchOnFocus, run]);
+  return { data, error, loading, refreshing, lastUpdated, refetch };
+}
+
 // src/charts/sparkline.tsx
 import { useId as useId7 } from "react";
-import { Fragment as Fragment6, jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 var Sparkline = ({
   data,
   dataKey = "value",
@@ -2937,7 +3730,7 @@ var Sparkline = ({
   const uid = useId7();
   const values = data.map((d) => typeof d === "number" ? d : toNum(d[dataKey]));
   if (values.length === 0) {
-    return /* @__PURE__ */ jsx45("span", { className: cn("inline-block", className), style: { width, height } });
+    return /* @__PURE__ */ jsx47("span", { className: cn("inline-block", className), style: { width, height } });
   }
   const pad = strokeWidth + 1;
   const min = Math.min(...values);
@@ -2949,7 +3742,7 @@ var Sparkline = ({
     x: pad + (values.length > 1 ? i / (values.length - 1) * innerW : innerW / 2),
     y: pad + innerH - (v - min) / range * innerH
   }));
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "svg",
     {
       width,
@@ -2960,14 +3753,14 @@ var Sparkline = ({
       "aria-label": ariaLabel,
       preserveAspectRatio: "none",
       children: [
-        area && /* @__PURE__ */ jsxs36(Fragment6, { children: [
-          /* @__PURE__ */ jsx45("defs", { children: /* @__PURE__ */ jsxs36("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-            /* @__PURE__ */ jsx45("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
-            /* @__PURE__ */ jsx45("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
+        area && /* @__PURE__ */ jsxs37(Fragment6, { children: [
+          /* @__PURE__ */ jsx47("defs", { children: /* @__PURE__ */ jsxs37("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx47("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
+            /* @__PURE__ */ jsx47("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
           ] }) }),
-          /* @__PURE__ */ jsx45("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
+          /* @__PURE__ */ jsx47("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
         ] }),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx47(
           "path",
           {
             d: monotoneLinePath(points),
@@ -2984,7 +3777,17 @@ var Sparkline = ({
 };
 
 export {
+  SEMANTIC_COLOR_TOKENS,
+  RESERVED_GRADIENT_TOKENS,
+  TAILWIND_PALETTE_COLORS,
+  COLOR_UTILITY_PREFIXES,
+  SLOP_BUDGETS,
+  HOUSE_RULES,
   APP_KIT_AGENT_INSTRUCTIONS,
+  lintGeneratedUi,
+  formatLintReport,
+  reviewGeneratedUi,
+  UI_REVIEW_AGENT_INSTRUCTIONS,
   createTimbalTheme,
   themeToCss,
   ensureThemeFontLink,
@@ -3006,9 +3809,11 @@ export {
   appFilterBarClass,
   appSearchInputClass,
   useAppShellChat,
+  useAppShellNav,
   AppShell,
   AppShellTopbar,
   AppShellChatTrigger,
+  AppShellSidebarTrigger,
   PageHeader,
   Page,
   Section,
@@ -3048,9 +3853,12 @@ export {
   SearchInput,
   FormSection,
   FilterBar,
+  FilterField,
   DataTable,
   ChartPanel,
   MetricRow,
   MetricChartCard,
+  useInterval,
+  useLiveQuery,
   Sparkline
 };