@timbal-ai/timbal-react 1.1.0 → 1.3.0

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

@@ -15,14 +15,14 @@ import {
   studioIntegrationCardClass,
   studioTopbarPillHeightClass,
   toNum
-} from "./chunk-YXZ22OJN.esm.js";
+} from "./chunk-GQBYZRD7.esm.js";
 import {
   Checkbox,
   Skeleton
-} from "./chunk-JEAUF54A.esm.js";
+} from "./chunk-UCGVL7ZY.esm.js";
 import {
   PillSegmentedTabs
-} from "./chunk-P3KDAYX6.esm.js";
+} from "./chunk-VXMM2HX7.esm.js";
 import {
   Button,
   Dialog,
@@ -35,7 +35,7 @@ import {
   TimbalV2Button,
   cn,
   controlClass
-} from "./chunk-4AKJ6FKE.esm.js";
+} from "./chunk-QU7ET55D.esm.js";
 
 // src/design/ui-vocabulary.ts
 var SEMANTIC_COLOR_TOKENS = [
@@ -198,8 +198,8 @@ var HOUSE_RULES = [
   },
   {
     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."
+    rule: "Gradients are reserved for chrome (composer, elevated surface, playground) and built-in chart/avatar fills \u2014 never on a data card shell, stat tile, or table row background.",
+    why: `Gradient stat cards are the canonical 'AI dashboard' look; SVG bar/pie fills and AvatarFallback variant="secondary" (Action button chrome) are kit-owned exceptions.`
   },
   {
     id: "compose-from-blocks",
@@ -254,7 +254,7 @@ Presentational groups \u2014 import from the package root, not from these paths:
 
 Also re-exported: \`Button\`, \`TimbalChat\`, \`ChartArtifactView\`, \`APP_KIT_AGENT_INSTRUCTIONS\`.
 
-Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\`, \`themeToCss\`, \`applyTimbalTheme\`, \`TIMBAL_THEME_PRESETS\`, \`applyThemePreset\`, \`ThemePresetGallery\`, \`TimbalThemeStyle\`, \`THEME_AGENT_INSTRUCTIONS\`.
+Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\`, \`themeToCss\`, \`applyTimbalTheme\`, \`TIMBAL_THEME_PRESETS\`, \`applyThemePreset\`, \`TimbalThemeStyle\`, \`THEME_AGENT_INSTRUCTIONS\`. Theming is **configured by the developer**, not surfaced as an end-user theme picker.
 
 ### Design guidelines (required)
 
@@ -263,8 +263,9 @@ Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\
 | **Copilot** | Use \`AppCopilotProvider\` for page context (\`useAppCopilotContext\`). Copilot is a **floating overlay** via \`AppShell\` \`chat={<AppChatPanel />}\` \u2014 not a sidebar column that shrinks main content. |
 | **Chat panel** | \`AppChatPanel\` only; \`Thread\` uses \`variant="panel"\` internally. Dismiss with **X**; trigger is a **text-only** pill (e.g. "Assistant") \u2014 **no** MessageSquare or chat icons on the shell trigger. |
 | **Context** | Do not show raw JSON context in the panel header; keep context in \`AppCopilotProvider\` only. |
-| **Theming** | Use semantic Tailwind tokens (\`bg-background\`, \`text-foreground\`, \`border-border\`, \`bg-elevated-from\`, etc.) from the host app's \`styles.css\`. To rebrand, **never hand-author OKLCH** \u2014 call \`createTimbalTheme({ brand })\` + \`themeToCss\`/\`applyTimbalTheme\`, or apply a catalog preset (\`TIMBAL_THEME_PRESETS\` / \`applyThemePreset\`). To offer styles, render \`ThemePresetGallery\`. See \`THEME_AGENT_INSTRUCTIONS\`. |
-| **Layout chrome** | \`Page\` \u2192 \`Section\` for main content hierarchy. \`AppShellTopbar\` for global actions (auth, theme). |
+| **Theming** | Use semantic Tailwind tokens (\`bg-background\`, \`text-foreground\`, \`border-border\`, \`bg-elevated-from\`, etc.) from the host app's \`styles.css\`. To rebrand, **never hand-author OKLCH** \u2014 call \`createTimbalTheme({ brand })\` + \`themeToCss\`/\`applyTimbalTheme\`, or apply a catalog preset (\`TIMBAL_THEME_PRESETS\` / \`applyThemePreset\`). Apply the theme **programmatically** \u2014 do **not** add an end-user theme selector to generated apps. See \`THEME_AGENT_INSTRUCTIONS\`. |
+| **Layout chrome** | \`Page\` \u2192 \`Section\` for main content hierarchy. Default to **no global topbar** \u2014 put account/theme/global actions in the \`Page\` \`actions\` slot (or the sidebar). Add \`AppShellTopbar\` only when a full-width global bar is explicitly requested. |
+| **Density** | Set \`density="compact"\` on \`Page\` for tighter dashboards (full-width column, smaller section gaps, card padding, metric tiles, default chart height 220). Default is \`"default"\` (platform spacing). Wrap custom layouts with \`AppDensityProvider\` when not using \`Page\`. Per-section override: \`Section density="compact"\`. Do **not** hand-tune five layers of \`className\` padding when density covers the need. |
 | **Data** | Prefer \`DataTable\` with typed \`columns\` / \`rows\` / \`getRowKey\`; use \`ChartPanel\` with a \`ChartArtifact\` for charts (set \`chartType\` + options \u2014 see the chart catalog). Chart colors come from the theme \`--chart-1..6\` tokens; pass \`series[].color\` / \`colors\` only to override, never raw hex on every series. |
 | **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. |
@@ -301,8 +302,8 @@ The cause of slop is dropping **below** the curated block layer into raw primiti
 | \`AppCopilotProvider\` | React context for copilot-aware tools (page, filters, selection, etc.). |
 | \`AppChatPanel\` | Floating thread: \`workforceId\`, \`welcome\`, \`debug\`. |
 | \`useAppShellChat\` | Custom open/close trigger when \`hideChatTrigger\` on shell. |
-| \`Page\` | Page title, description, \`breadcrumbs\`, \`actions\`, children. |
-| \`Section\` | Titled block inside a page. |
+| \`Page\` | Page title, description, \`breadcrumbs\`, \`actions\`, \`density\` (\`"default"\` | \`"compact"\`), children. |
+| \`Section\` | Titled block inside a page. Optional \`density\` overrides inherited page density. |
 | \`SubNav\` | **Section switcher** (Overview / Reports pill bar): \`items\`, \`activeId\`, \`onChange\`. Never use Radix/shadcn \`Tabs\` \u2014 it is not in this package. Switch panels with state or the router. |
 | **Menus** | **Select** = short list, no search. **Combobox** = searchable (same trigger as Select). **Command** only inside \`PopoverContent variant="list"\` or Combobox \u2014 never padded default Popover. See \`examples/app-kit/src/recipes/primitives-catalog.ts\`. |
 | \`Breadcrumbs\` | Trail: \`items: [{ label, href? }]\`. |
@@ -312,8 +313,9 @@ The cause of slop is dropping **below** the curated block layer into raw primiti
 | \`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\`. **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. |
+| \`DataTable\` | Sortable table: \`columns\`, \`rows\`, \`getRowKey\`, optional \`sort\` / \`onSortChange\`, \`emptyTitle\`, \`showRowCount\`, \`caption\`, \`truncate: true\` on columns with long text. **Scales:** \`pageSize\` (built-in client pager), \`selectable\` + \`onSelectionChange\` (checkbox column for bulk actions), \`loading\` (skeleton rows). \`onRowClick\` for row \u2192 detail (open a \`Sheet\`). |
+| \`Avatar\` / \`AvatarFallback\` | User initials: \`variant="secondary"\` (or \`primary\` / \`chart\` alias) on **both** \`Avatar\` and \`AvatarFallback\` \u2014 same chrome as catalog **Action** buttons (\`Button variant="secondary"\`: elevated gradient, \`border-border\`, \`shadow-card\`, \`text-foreground\`). Never dark primary CTA fill or raw \`bg-blue-600\`. |
+| \`ChartPanel\` | Same shell as \`MetricChartCard\`: title row (\`px-4 pt-4\`), flush plot (\`pt-2\` only) with **no axis ticks** \u2014 hover tooltips show category + value. Pass \`title\` + \`artifact\` (omit \`artifact.title\` to avoid duplicates) or \`children\`. \`loading\` renders a plot-height skeleton. Default plot height follows page \`density\` (300 default, 220 compact); pass \`height\` to override. |
 | \`FieldInput\`, \`FieldTextarea\`, \`FieldSelect\`, \`FieldSwitch\` | Settings-style forms with labels and hints. |
 | \`FormSection\` | Grouped form block. |
 | \`AppConfirmDialog\` | Confirm/cancel modal: \`open\`, \`onOpenChange\`, \`title\`, \`description\`, \`onConfirm\`. |
@@ -326,14 +328,14 @@ Charts run on **recharts** with shadcn \`ChartContainer\` / \`ChartTooltipConten
 
 | Component | Use for |
 |-----------|---------|
-| \`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\`. |
+| \`LineAreaChart\` | Cartesian engine (shadcn-style chrome). Bar fills use theme gradients automatically. Props: \`data\`, \`xKey\`, \`series: [{ dataKey, label?, color? }]\`, \`variant\` (\`area\`\\|\`line\`\\|\`bar\`), \`orientation\` (\`horizontal\` for horizontal bars), \`stacked\`, \`curve\`, \`dots\`, \`gridLines\`, \`tooltipIndicator\`, \`layout\` (\`flush\` \u2014 hides axes by default; category + values on hover tooltip), \`showXAxis\` / \`showYAxis\` to opt back in, \`clipTicks\` (truncates long axis labels when axes are on), \`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?, 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. |
+| \`MetricChartCard\` | KPI strip + flush chart; tile click swaps series. Same metrics shape + \`data\` per metric. Default chart height follows page \`density\` (300 / 220); pass \`height\` to override. \`loading\` renders skeleton tiles + chart. |
 
 #### Settings
 
@@ -396,7 +398,7 @@ Ready-made **section patterns** assembled from the components above. Each is a c
 **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).
+- **Theme presets** \u2014 apply a brand preset programmatically (\`applyThemePreset\` / \`applyTimbalTheme\`); never hand-author OKLCH and don't expose a theme picker to end users.
 
 ### Typical compositions
 
@@ -1281,8 +1283,7 @@ Each preset is a **full personality** (color + radius + shadows + font), not jus
 | \`folio\` | Editorial serif (Fraunces), near-sharp corners \u2014 content / docs |
 | \`carbon\` | Terminal monospace (JetBrains Mono), green accent \u2014 dev / infra |
 
-- To present options visually, render \`<ThemePresetGallery value={id} onSelect={setId} />\` \u2014 each swatch previews real components (Button + metric tile) scoped via \`data-timbal-theme\`, so the live app doesn't change until the user picks.
-- On selection, call \`applyThemePreset(id)\` (persists to \`localStorage\` and restores on reload).
+- Pick a preset at build/config time and apply it with \`applyThemePreset(id)\` (persists to \`localStorage\` and restores on reload). Theme selection is a **developer/config** choice \u2014 do **not** surface an end-user theme picker in generated apps.
 
 ### Rules
 
@@ -1316,17 +1317,142 @@ var TimbalThemeStyle = ({
   ] });
 };
 
+// src/design/app-classes.ts
+var appPageColumnClass = "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
+var appShellTopbarInsetClass = "w-full px-4 md:px-6";
+var appShellInsetTopClass = "pt-4 md:pt-6";
+var appShellInsetBottomClass = "pb-8 md:pb-10";
+var appShellTopbarRowClass = cn(
+  studioTopbarPillHeightClass,
+  "flex w-full items-center justify-between gap-2"
+);
+var appShellTopbarStickyClass = cn(
+  "shrink-0 bg-background pb-2",
+  appShellInsetTopClass
+);
+var appPageHeaderClass = cn(
+  "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+  "pb-4 pt-2"
+);
+var appSectionClass = "flex flex-col gap-4 py-4";
+var appSectionTitleClass = "text-lg font-semibold text-foreground";
+var appSectionDescriptionClass = "text-sm text-muted-foreground";
+var appSurfaceCardClass = cn(
+  studioIntegrationCardClass,
+  "p-4 md:p-5"
+);
+var appStatTileClass = cn(
+  appSurfaceCardClass,
+  "flex flex-col gap-1 px-4 py-3 shadow-none"
+);
+var appStatValueClass = "text-2xl font-normal tracking-tight text-foreground tabular-nums";
+var appStatLabelClass = "text-xs font-normal text-muted-foreground";
+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 = controlClass({}, "w-full");
+var appEmptyStateClass = cn(
+  appSurfaceCardClass,
+  "flex flex-col items-center justify-center gap-2 py-12 text-center"
+);
+var appEmptyStateTitleClass = "text-base font-medium text-foreground";
+var appEmptyStateDescriptionClass = "max-w-sm text-sm text-muted-foreground";
+var appChartPanelClass = cn(appSurfaceCardClass, "flex flex-col gap-3");
+
+// src/design/app-density.ts
+var APP_DENSITY_CHART_HEIGHT = {
+  default: 300,
+  compact: 220
+};
+var compactSurfaceCardClass = cn(studioIntegrationCardClass, "p-3");
+var compactStatTileClass = cn(
+  compactSurfaceCardClass,
+  "flex flex-col gap-1 px-3 py-2 shadow-none"
+);
+var compactEmptyStateClass = cn(
+  compactSurfaceCardClass,
+  "flex flex-col items-center justify-center gap-2 py-8 text-center"
+);
+var APP_DENSITY_CLASSES = {
+  pageColumn: {
+    default: appPageColumnClass,
+    compact: "mx-auto w-full max-w-none px-3 md:px-4"
+  },
+  pageHeader: {
+    default: appPageHeaderClass,
+    compact: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between pb-2 pt-1"
+  },
+  section: {
+    default: appSectionClass,
+    compact: "flex flex-col gap-2 py-2"
+  },
+  surfaceCard: {
+    default: appSurfaceCardClass,
+    compact: compactSurfaceCardClass
+  },
+  statTile: {
+    default: appStatTileClass,
+    compact: compactStatTileClass
+  },
+  emptyState: {
+    default: appEmptyStateClass,
+    compact: compactEmptyStateClass
+  },
+  metricCardHeader: {
+    default: "flex items-start justify-between gap-3 px-4 pb-1 pt-3",
+    compact: "flex items-start justify-between gap-2 px-3 pb-0.5 pt-2"
+  },
+  metricTile: {
+    default: "relative flex min-w-0 flex-1 flex-col gap-1 px-4 py-3 text-left font-normal",
+    compact: "relative flex min-w-0 flex-1 flex-col gap-1 px-3 py-2 text-left font-normal"
+  },
+  metricChartRegion: {
+    default: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 pt-2",
+    compact: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 pt-1"
+  },
+  metricChartPlotRegion: {
+    default: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 px-0 pt-5 pb-3",
+    compact: "relative min-h-0 w-full overflow-x-hidden border-t border-border/40 px-0 pt-3 pb-2"
+  },
+  chartPanelBody: {
+    default: "pt-2 pb-3",
+    compact: "pt-1 pb-2"
+  }
+};
+function appDensityClass(key, density = "default") {
+  return APP_DENSITY_CLASSES[key][density];
+}
+
+// src/app/layout/app-density-context.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AppDensityContext = createContext("default");
+var AppDensityProvider = ({
+  density = "default",
+  children
+}) => {
+  return /* @__PURE__ */ jsx2(AppDensityContext.Provider, { value: density, children });
+};
+function useAppDensity() {
+  return useContext(AppDensityContext);
+}
+function useAppDensityClass(key, override) {
+  const inherited = useAppDensity();
+  return appDensityClass(key, override ?? inherited);
+}
+
 // src/app/data/metrics-shared.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var metricCardShellClass = cn(
   studioIntegrationCardClass,
   "aui-app-metric-card shadow-none",
   "flex flex-col overflow-hidden"
 );
-var metricCardHeaderClass = "flex items-start justify-between gap-3 px-4 pb-1 pt-3";
 var metricTilesRowClass = "grid w-full min-w-0";
-var metricChartRegionClass = "relative min-h-0 w-full border-t border-border/40 pt-2";
-var metricChartPlotRegionClass = "relative min-h-0 w-full border-t border-border/40 px-0 pt-5 pb-3";
 var metricCellDividerClass = "border-r border-border/40";
 var MetricCardHeader = ({
   title,
@@ -1334,13 +1460,14 @@ var MetricCardHeader = ({
   description,
   actions
 }) => {
+  const headerClass = useAppDensityClass("metricCardHeader");
   if (!title && !description && !actions) return null;
-  return /* @__PURE__ */ jsxs2("header", { className: metricCardHeaderClass, children: [
+  return /* @__PURE__ */ jsxs2("header", { className: headerClass, children: [
     /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
-      title ? /* @__PURE__ */ jsx2("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }) : null,
-      description ? /* @__PURE__ */ jsx2("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
+      title ? /* @__PURE__ */ jsx3("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }) : null,
+      description ? /* @__PURE__ */ jsx3("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
     ] }),
-    actions ? /* @__PURE__ */ jsx2("div", { className: "shrink-0", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx3("div", { className: "shrink-0", children: actions }) : null
   ] });
 };
 function metricTilesGridColsClass(n) {
@@ -1361,15 +1488,13 @@ function metricTilesGridColsClass(n) {
 }
 
 // src/app/data/MetricTile.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var trendToneClass = {
   up: "border-border/80 bg-muted/40 text-muted-foreground",
   down: "border-border/80 bg-muted/40 text-muted-foreground",
   neutral: "border-border/80 bg-muted/30 text-muted-foreground"
 };
-var metricTileBaseClass = "relative flex min-w-0 flex-1 flex-col gap-1 px-4 py-3 text-left font-normal";
-var metricTileInteractiveClass = cn(
-  metricTileBaseClass,
+var metricTileInteractiveExtraClass = cn(
   "bg-transparent hover:bg-transparent active:bg-transparent",
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/10"
 );
@@ -1385,21 +1510,22 @@ var MetricTile = ({
   ariaLabel,
   className
 }) => {
+  const metricTileBaseClass = useAppDensityClass("metricTile");
   const content = /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    active ? /* @__PURE__ */ jsx3(
+    active ? /* @__PURE__ */ jsx4(
       "span",
       {
         "aria-hidden": true,
         className: "absolute inset-x-0 bottom-0 h-0.5 bg-foreground dark:bg-white"
       }
     ) : null,
-    /* @__PURE__ */ jsx3("span", { className: "text-xs font-normal text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx4("span", { className: "text-xs font-normal text-muted-foreground", children: label }),
     /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxs3("span", { className: "flex items-baseline gap-1", children: [
-        /* @__PURE__ */ jsx3("span", { className: "text-2xl font-normal tracking-tight text-foreground tabular-nums", children: value }),
-        unit ? /* @__PURE__ */ jsx3("span", { className: "text-xs font-normal text-muted-foreground", children: unit }) : null
+        /* @__PURE__ */ jsx4("span", { className: "text-2xl font-normal tracking-tight text-foreground tabular-nums", children: value }),
+        unit ? /* @__PURE__ */ jsx4("span", { className: "text-xs font-normal text-muted-foreground", children: unit }) : null
       ] }),
-      trend ? /* @__PURE__ */ jsx3(
+      trend ? /* @__PURE__ */ jsx4(
         "span",
         {
           className: cn(
@@ -1413,159 +1539,38 @@ var MetricTile = ({
   ] });
   const divider = showDivider ? metricCellDividerClass : void 0;
   if (onSelect) {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
         onClick: onSelect,
         "aria-pressed": active,
         "aria-label": ariaLabel,
-        className: cn(metricTileInteractiveClass, divider, className),
+        className: cn(metricTileBaseClass, metricTileInteractiveExtraClass, divider, className),
         children: content
       }
     );
   }
-  return /* @__PURE__ */ jsx3("div", { className: cn(metricTileBaseClass, divider, className), children: content });
+  return /* @__PURE__ */ jsx4("div", { className: cn(metricTileBaseClass, divider, className), children: content });
 };
 
 // src/app/theme/ThemePresetGallery.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var ThemePresetGallery = ({
-  value,
-  onSelect,
-  presets,
-  className
-}) => {
-  const items = presets ? TIMBAL_THEME_PRESETS.filter((p) => presets.includes(p.id)) : TIMBAL_THEME_PRESETS;
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      role: "radiogroup",
-      "aria-label": "Theme presets",
-      className: cn(
-        "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
-        className
-      ),
-      children: items.map((preset) => {
-        const selected = value === preset.id;
-        return /* @__PURE__ */ jsxs4("div", { "data-timbal-theme": preset.id, children: [
-          /* @__PURE__ */ jsx4(TimbalThemeStyle, { preset: preset.id, scope: preset.id }),
-          /* @__PURE__ */ jsxs4(
-            "button",
-            {
-              type: "button",
-              role: "radio",
-              "aria-checked": selected,
-              "aria-label": `${preset.label} theme`,
-              onClick: () => onSelect?.(preset.id),
-              className: cn(
-                "group flex w-full flex-col gap-3 rounded-xl border bg-card p-3 text-left transition-colors",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                selected ? "border-primary ring-2 ring-primary/30" : "border-border hover:border-foreground/30"
-              ),
-              children: [
-                /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx4(
-                      "span",
-                      {
-                        "aria-hidden": true,
-                        className: "size-4 shrink-0 rounded-full ring-1 ring-black/10",
-                        style: { background: preset.swatch }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium text-foreground", children: preset.label })
-                  ] }),
-                  selected ? /* @__PURE__ */ jsx4("span", { className: "text-xs font-medium text-primary", children: "Selected" }) : null
-                ] }),
-                /* @__PURE__ */ jsx4("p", { className: "text-xs leading-snug text-muted-foreground", children: preset.description }),
-                preset.font ? /* @__PURE__ */ jsxs4("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: [
-                  "Aa \xB7 ",
-                  preset.font
-                ] }) : null,
-                /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2 rounded-lg border border-border bg-background p-2", children: [
-                  /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx4(Button, { size: "xs", className: "pointer-events-none", children: "Primary" }),
-                    /* @__PURE__ */ jsx4("span", { className: "size-5 rounded-md bg-primary", "aria-hidden": true }),
-                    /* @__PURE__ */ jsx4("span", { className: "size-5 rounded-md bg-muted", "aria-hidden": true }),
-                    /* @__PURE__ */ jsx4(
-                      "span",
-                      {
-                        className: "size-5 rounded-md border border-border bg-accent",
-                        "aria-hidden": true
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx4(MetricTile, { label: "Active users", value: "1,248", trend: "+8%" })
-                ] })
-              ]
-            }
-          )
-        ] }, preset.id);
-      })
-    }
-  );
-};
-
-// src/design/app-classes.ts
-var appPageColumnClass = "mx-auto w-full max-w-6xl px-4 md:px-6";
-var appShellTopbarInsetClass = "w-full px-4 md:px-6";
-var appShellInsetTopClass = "pt-4 md:pt-6";
-var appShellTopbarRowClass = cn(
-  studioTopbarPillHeightClass,
-  "flex w-full items-center justify-between gap-2"
-);
-var appShellTopbarStickyClass = cn(
-  "sticky top-0 z-20 shrink-0 bg-background pb-2",
-  appShellInsetTopClass
-);
-var appPageHeaderClass = cn(
-  "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
-  "pb-4 pt-2"
-);
-var appSectionClass = "flex flex-col gap-4 py-4";
-var appSectionTitleClass = "text-lg font-semibold text-foreground";
-var appSectionDescriptionClass = "text-sm text-muted-foreground";
-var appSurfaceCardClass = cn(
-  studioIntegrationCardClass,
-  "p-4 md:p-5"
-);
-var appStatTileClass = cn(
-  appSurfaceCardClass,
-  "flex flex-col gap-1 px-4 py-3 shadow-none"
-);
-var appStatValueClass = "text-2xl font-normal tracking-tight text-foreground tabular-nums";
-var appStatLabelClass = "text-xs font-normal text-muted-foreground";
-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 = controlClass({}, "w-full");
-var appEmptyStateClass = cn(
-  appSurfaceCardClass,
-  "flex flex-col items-center justify-center gap-2 py-12 text-center"
-);
-var appEmptyStateTitleClass = "text-base font-medium text-foreground";
-var appEmptyStateDescriptionClass = "max-w-sm text-sm text-muted-foreground";
-var appChartPanelClass = cn(appSurfaceCardClass, "flex flex-col gap-3");
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 
 // src/app/layout/app-shell-chat-context.tsx
-import { createContext, useContext } from "react";
-var AppShellChatContext = createContext(null);
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var AppShellChatContext = createContext2(null);
 var AppShellChatProvider = AppShellChatContext.Provider;
 function useAppShellChat() {
-  return useContext(AppShellChatContext);
+  return useContext2(AppShellChatContext);
 }
 
 // src/app/layout/app-shell-nav-context.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var AppShellNavContext = createContext2(null);
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var AppShellNavContext = createContext3(null);
 var AppShellNavProvider = AppShellNavContext.Provider;
 function useAppShellNav() {
-  return useContext2(AppShellNavContext) ?? {
+  return useContext3(AppShellNavContext) ?? {
     open: false,
     setOpen: () => {
     },
@@ -1577,7 +1582,7 @@ function useAppShellNav() {
 // src/app/layout/AppShell.tsx
 import { motion, useReducedMotion } from "motion/react";
 import { useCallback, useMemo, useState } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, 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",
   "bg-primary text-primary-foreground transition-colors hover:bg-primary/90",
@@ -1606,7 +1611,7 @@ var AppShellBody = ({
     layoutDirection
   );
   const insetPadding = sidebar ? insetPaddingPx : 0;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     motion.div,
     {
       className: "aui-app-shell-body relative z-10 flex min-h-0 min-w-0 flex-1 flex-col",
@@ -1621,8 +1626,18 @@ var AppShellBody = ({
             !topbarContent && appShellInsetTopClass
           ),
           children: [
-            topbarContent ? /* @__PURE__ */ jsx5("header", { className: cn("aui-app-shell-topbar-region", appShellTopbarStickyClass), children: /* @__PURE__ */ jsx5("div", { className: appShellTopbarInsetClass, children: topbarContent }) }) : null,
-            /* @__PURE__ */ jsx5("main", { className: cn("aui-app-shell-main min-w-0 flex-1", mainClassName), children })
+            topbarContent ? /* @__PURE__ */ jsx6("header", { className: cn("aui-app-shell-topbar-region", appShellTopbarStickyClass), children: /* @__PURE__ */ jsx6("div", { className: appShellTopbarInsetClass, children: topbarContent }) }) : null,
+            /* @__PURE__ */ jsx6(
+              "main",
+              {
+                className: cn(
+                  "aui-app-shell-main min-w-0 flex-1",
+                  appShellInsetBottomClass,
+                  mainClassName
+                ),
+                children
+              }
+            )
           ]
         }
       )
@@ -1688,7 +1703,7 @@ var AppShell = ({
     setInsetPaddingPx(insetPx);
   }, []);
   const insetExpanded = insetPaddingPx >= SIDEBAR_INSET_PX_EXPANDED;
-  const shellBody = /* @__PURE__ */ jsx5(
+  const shellBody = /* @__PURE__ */ jsx6(
     AppShellBody,
     {
       sidebar,
@@ -1699,7 +1714,7 @@ var AppShell = ({
       children
     }
   );
-  const tree = /* @__PURE__ */ jsx5(ShellInsetProvider, { value: sidebar ? reportShellInset : null, children: /* @__PURE__ */ jsxs5(
+  const tree = /* @__PURE__ */ jsx6(ShellInsetProvider, { value: sidebar ? reportShellInset : null, children: /* @__PURE__ */ jsxs5(
     "div",
     {
       className: cn(
@@ -1709,7 +1724,7 @@ var AppShell = ({
       style: studioChromeShellStyle,
       children: [
         sidebar,
-        sidebar && navOpen ? /* @__PURE__ */ jsx5(
+        sidebar && navOpen ? /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -1719,7 +1734,7 @@ var AppShell = ({
           }
         ) : null,
         shellBody,
-        hasChat && chatOpen ? /* @__PURE__ */ jsx5(
+        hasChat && chatOpen ? /* @__PURE__ */ jsx6(
           "div",
           {
             className: floatingPanelClass,
@@ -1732,7 +1747,7 @@ var AppShell = ({
             children: chat
           }
         ) : null,
-        hasChat && chatCollapsible && !chatOpen && !hideChatTrigger ? /* @__PURE__ */ jsx5(
+        hasChat && chatCollapsible && !chatOpen && !hideChatTrigger ? /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -1745,11 +1760,11 @@ var AppShell = ({
       ]
     }
   ) });
-  const withNav = /* @__PURE__ */ jsx5(AppShellNavProvider, { value: navControls, children: tree });
+  const withNav = /* @__PURE__ */ jsx6(AppShellNavProvider, { value: navControls, children: tree });
   if (!hasChat) {
     return withNav;
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     AppShellChatProvider,
     {
       value: {
@@ -1764,7 +1779,7 @@ var AppShell = ({
 };
 
 // src/app/layout/AppShellTopbar.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var AppShellTopbar = ({
   start,
   actions,
@@ -1776,12 +1791,12 @@ var AppShellTopbar = ({
       start,
       children
     ] }),
-    actions ? /* @__PURE__ */ jsx6("div", { className: "aui-app-shell-topbar-actions flex shrink-0 items-center gap-2", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx7("div", { className: "aui-app-shell-topbar-actions flex shrink-0 items-center gap-2", children: actions }) : null
   ] });
 };
 
 // src/app/layout/AppShellChatTrigger.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var floatingPositionClass = "fixed bottom-6 right-6 z-50 max-sm:bottom-4 max-sm:right-4";
 var AppShellChatTrigger = ({
   className,
@@ -1790,7 +1805,7 @@ var AppShellChatTrigger = ({
 }) => {
   const shellChat = useAppShellChat();
   if (!shellChat || shellChat.open) return null;
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     TimbalV2Button,
     {
       type: "button",
@@ -1811,13 +1826,13 @@ var AppShellChatTrigger = ({
 
 // src/app/layout/AppShellSidebarTrigger.tsx
 import { MenuIcon } from "lucide-react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var AppShellSidebarTrigger = ({
   label = "Open navigation",
   className
 }) => {
   const nav = useAppShellNav();
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       type: "button",
@@ -1829,75 +1844,96 @@ var AppShellSidebarTrigger = ({
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10",
         className
       ),
-      children: /* @__PURE__ */ jsx8(MenuIcon, { className: "size-5", "aria-hidden": true })
+      children: /* @__PURE__ */ jsx9(MenuIcon, { className: "size-5", "aria-hidden": true })
     }
   );
 };
 
 // src/app/layout/PageHeader.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var PageHeader = ({
   title,
   description,
   actions,
   className
 }) => {
-  return /* @__PURE__ */ jsxs7("header", { className: cn("aui-app-page-header", appPageHeaderClass, className), children: [
+  const pageHeaderClass = useAppDensityClass("pageHeader");
+  return /* @__PURE__ */ jsxs7("header", { className: cn("aui-app-page-header", pageHeaderClass, className), children: [
     /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
-      /* @__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
+      /* @__PURE__ */ jsx10("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: title }),
+      description ? /* @__PURE__ */ jsx10("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
     ] }),
-    actions ? /* @__PURE__ */ jsx9("div", { className: "aui-app-page-header-actions flex shrink-0 flex-wrap items-center gap-2", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx10("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 jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var PageFrame = ({
+  children,
+  breadcrumbs,
+  className,
+  ...headerProps
+}) => {
+  const density = useAppDensity();
+  const pageColumnClass = useAppDensityClass("pageColumn");
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cn("aui-app-page", pageColumnClass, className),
+      "data-density": density,
+      children: [
+        breadcrumbs,
+        /* @__PURE__ */ jsx11(PageHeader, { ...headerProps }),
+        children
+      ]
+    }
+  );
+};
 var Page = ({
+  density = "default",
   children,
   breadcrumbs,
   className,
   ...headerProps
 }) => {
-  return /* @__PURE__ */ jsxs8("div", { className: cn("aui-app-page", appPageColumnClass, className), children: [
-    breadcrumbs,
-    /* @__PURE__ */ jsx10(PageHeader, { ...headerProps }),
-    children
-  ] });
+  return /* @__PURE__ */ jsx11(AppDensityProvider, { density, children: /* @__PURE__ */ jsx11(PageFrame, { breadcrumbs, className, ...headerProps, children }) });
 };
 
 // src/app/layout/Section.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var Section = ({
   title,
   description,
   children,
+  density,
   className
 }) => {
-  return /* @__PURE__ */ jsxs9("section", { className: cn("aui-app-section", appSectionClass, className), children: [
-    title ? /* @__PURE__ */ jsx11("h2", { className: appSectionTitleClass, children: title }) : null,
-    description ? /* @__PURE__ */ jsx11("p", { className: appSectionDescriptionClass, children: description }) : null,
+  const sectionClass = useAppDensityClass("section", density);
+  return /* @__PURE__ */ jsxs9("section", { className: cn("aui-app-section", sectionClass, className), children: [
+    title ? /* @__PURE__ */ jsx12("h2", { className: appSectionTitleClass, children: title }) : null,
+    description ? /* @__PURE__ */ jsx12("p", { className: appSectionDescriptionClass, children: description }) : null,
     children
   ] });
 };
 
 // src/app/copilot/app-copilot-context.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var AppCopilotContext = createContext3(null);
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var AppCopilotContext = createContext4(null);
 var AppCopilotProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ jsx12(AppCopilotContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx13(AppCopilotContext.Provider, { value, children });
 };
 function useAppCopilotContext() {
-  return useContext3(AppCopilotContext) ?? {};
+  return useContext4(AppCopilotContext) ?? {};
 }
 
 // src/app/chat/AppChatPanel.tsx
 import { XIcon } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, 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"
@@ -1943,17 +1979,17 @@ var AppChatPanel = ({
 }) => {
   const shellChat = useAppShellChat();
   return /* @__PURE__ */ jsxs10("div", { className: cn(shellClass, className), children: [
-    shellChat?.collapsible ? /* @__PURE__ */ jsx13("div", { className: chromeClass, children: /* @__PURE__ */ jsx13(
+    shellChat?.collapsible ? /* @__PURE__ */ jsx14("div", { className: chromeClass, children: /* @__PURE__ */ jsx14(
       "button",
       {
         type: "button",
         className: closeButtonClass,
         onClick: () => shellChat.setOpen(false),
         "aria-label": "Close assistant",
-        children: /* @__PURE__ */ jsx13(XIcon, { className: "size-4", "aria-hidden": true })
+        children: /* @__PURE__ */ jsx14(XIcon, { className: "size-4", "aria-hidden": true })
       }
     ) }) : null,
-    /* @__PURE__ */ jsx13("div", { className: bodyClass, children: /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14("div", { className: bodyClass, children: /* @__PURE__ */ jsx14(
       TimbalRuntimeProvider,
       {
         workforceId,
@@ -1963,7 +1999,7 @@ var AppChatPanel = ({
         attachmentsUploadUrl,
         attachmentsAccept,
         debug,
-        children: /* @__PURE__ */ jsx13(
+        children: /* @__PURE__ */ jsx14(
           Thread,
           {
             variant: "panel",
@@ -1984,66 +2020,91 @@ var AppChatPanel = ({
 };
 
 // src/app/surfaces/SurfaceCard.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var SurfaceCard = ({ children, className }) => {
-  return /* @__PURE__ */ jsx14("div", { className: cn("aui-app-surface-card", appSurfaceCardClass, className), children });
+  const surfaceCardClass = useAppDensityClass("surfaceCard");
+  return /* @__PURE__ */ jsx15("div", { className: cn("aui-app-surface-card", surfaceCardClass, className), children });
 };
 
 // src/app/surfaces/StatTile.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, 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__ */ 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
+  const statTileClass = useAppDensityClass("statTile");
+  return /* @__PURE__ */ jsxs11("div", { className: cn("aui-app-stat-tile", statTileClass, className), children: [
+    /* @__PURE__ */ jsx16("span", { className: appStatLabelClass, children: label }),
+    /* @__PURE__ */ jsx16("span", { className: appStatValueClass, children: value }),
+    hint ? /* @__PURE__ */ jsx16("span", { className: "text-xs text-muted-foreground", children: hint }) : null
   ] });
 };
 
 // src/app/surfaces/EmptyState.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var EmptyState = ({
   title,
   description,
   action,
   className
 }) => {
-  return /* @__PURE__ */ jsxs12("div", { className: cn("aui-app-empty-state", appEmptyStateClass, className), children: [
-    /* @__PURE__ */ jsx16("p", { className: appEmptyStateTitleClass, children: title }),
-    description ? /* @__PURE__ */ jsx16("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
+  const emptyStateClass = useAppDensityClass("emptyState");
+  return /* @__PURE__ */ jsxs12("div", { className: cn("aui-app-empty-state", emptyStateClass, className), children: [
+    /* @__PURE__ */ jsx17("p", { className: appEmptyStateTitleClass, children: title }),
+    description ? /* @__PURE__ */ jsx17("p", { className: appEmptyStateDescriptionClass, children: description }) : null,
     action
   ] });
 };
 
 // src/app/surfaces/StatusBadge.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } 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"
+  default: "bg-muted text-foreground ring-border",
+  primary: "bg-primary/10 text-primary ring-primary/20",
+  success: "bg-emerald-500/10 text-emerald-700 ring-emerald-500/20 dark:text-emerald-400",
+  warn: "bg-amber-500/10 text-amber-700 ring-amber-500/25 dark:text-amber-400",
+  danger: "bg-destructive/10 text-destructive ring-destructive/20",
+  muted: "bg-muted/70 text-muted-foreground ring-border/60"
+};
+var statusBadgeDotClass = {
+  default: "bg-foreground/40",
+  primary: "bg-primary",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500",
+  danger: "bg-destructive",
+  muted: "bg-muted-foreground/60"
 };
 var StatusBadge = ({
   children,
   tone = "default",
+  dot = false,
   className
 }) => {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs13(
     "span",
     {
       className: cn(
-        "aui-app-status-badge inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
+        "aui-app-status-badge inline-flex items-center gap-1.5 rounded-full px-2 py-0.5",
+        "text-xs font-medium leading-none ring-1 ring-inset",
         statusBadgeToneClass[tone],
         className
       ),
-      children
+      children: [
+        dot ? /* @__PURE__ */ jsx18(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "size-1.5 shrink-0 rounded-full",
+              statusBadgeDotClass[tone]
+            )
+          }
+        ) : null,
+        children
+      ]
     }
   );
 };
 
 // src/app/surfaces/AppConfirmDialog.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var bodyClass2 = "flex flex-col gap-4 p-6";
 var titleClass = "pr-8";
 var actionsClass = "flex flex-wrap justify-end gap-2";
@@ -2058,15 +2119,15 @@ var AppConfirmDialog = ({
   destructive = false,
   className
 }) => {
-  return /* @__PURE__ */ jsx18(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx19(
     DialogContent,
     {
       className: cn("gap-0 p-0 sm:max-w-md", className),
-      children: /* @__PURE__ */ jsxs13("div", { className: bodyClass2, children: [
-        /* @__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__ */ jsx18(
+      children: /* @__PURE__ */ jsxs14("div", { className: bodyClass2, children: [
+        /* @__PURE__ */ jsx19(DialogTitle, { className: titleClass, children: title }),
+        description ? /* @__PURE__ */ jsx19("p", { className: "text-sm text-muted-foreground", children: description }) : null,
+        /* @__PURE__ */ jsxs14("div", { className: actionsClass, children: [
+          /* @__PURE__ */ jsx19(
             TimbalV2Button,
             {
               type: "button",
@@ -2076,7 +2137,7 @@ var AppConfirmDialog = ({
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             TimbalV2Button,
             {
               type: "button",
@@ -2096,7 +2157,7 @@ var AppConfirmDialog = ({
 };
 
 // src/app/surfaces/InfoCard.tsx
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var toneClass = {
   neutral: "border-border bg-muted/40",
   info: "border-primary/25 bg-primary/5",
@@ -2111,7 +2172,7 @@ var InfoCard = ({
   action,
   tone = "neutral",
   className
-}) => /* @__PURE__ */ jsxs14(
+}) => /* @__PURE__ */ jsxs15(
   "div",
   {
     className: cn(
@@ -2120,18 +2181,18 @@ var InfoCard = ({
       className
     ),
     children: [
-      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__ */ 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
+      icon ? /* @__PURE__ */ jsx20("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: icon }) : null,
+      /* @__PURE__ */ jsxs15("div", { className: "min-w-0 flex-1", children: [
+        title ? /* @__PURE__ */ jsx20("p", { className: "text-sm font-medium text-foreground", children: title }) : null,
+        children ? /* @__PURE__ */ jsx20("div", { className: cn("text-sm text-muted-foreground", title && "mt-1"), children }) : null
       ] }),
-      action ? /* @__PURE__ */ jsx19("div", { className: "shrink-0", children: action }) : null
+      action ? /* @__PURE__ */ jsx20("div", { className: "shrink-0", children: action }) : null
     ]
   }
 );
 
 // src/app/surfaces/StatusDot.tsx
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var dotClass = {
   online: "bg-emerald-500",
   busy: "bg-amber-500",
@@ -2144,9 +2205,9 @@ var StatusDot = ({
   label,
   pulse = false,
   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__ */ jsx20(
+}) => /* @__PURE__ */ jsxs16("span", { className: cn("inline-flex items-center gap-1.5", className), children: [
+  /* @__PURE__ */ jsxs16("span", { className: "relative flex size-2", children: [
+    pulse ? /* @__PURE__ */ jsx21(
       "span",
       {
         className: cn(
@@ -2155,25 +2216,25 @@ var StatusDot = ({
         )
       }
     ) : null,
-    /* @__PURE__ */ jsx20("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
+    /* @__PURE__ */ jsx21("span", { className: cn("relative inline-flex size-2 rounded-full", dotClass[tone]) })
   ] }),
-  label ? /* @__PURE__ */ jsx20("span", { className: "text-xs text-muted-foreground", children: label }) : null
+  label ? /* @__PURE__ */ jsx21("span", { className: "text-xs text-muted-foreground", children: label }) : null
 ] });
 
 // src/app/surfaces/DescriptionList.tsx
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var DescriptionList = ({
   items,
   stacked = false,
   className
-}) => /* @__PURE__ */ jsx21(
+}) => /* @__PURE__ */ jsx22(
   "dl",
   {
     className: cn(
       "divide-y divide-border rounded-xl border border-border bg-card",
       className
     ),
-    children: items.map((item, i) => /* @__PURE__ */ jsxs16(
+    children: items.map((item, i) => /* @__PURE__ */ jsxs17(
       "div",
       {
         className: cn(
@@ -2181,8 +2242,8 @@ var DescriptionList = ({
           stacked ? "flex flex-col gap-0.5" : "flex items-center justify-between gap-4"
         ),
         children: [
-          /* @__PURE__ */ jsx21("dt", { className: "text-sm text-muted-foreground", children: item.label }),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22("dt", { className: "text-sm text-muted-foreground", children: item.label }),
+          /* @__PURE__ */ jsx22(
             "dd",
             {
               className: cn(
@@ -2202,8 +2263,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 jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
-var Chevron = ({ open }) => /* @__PURE__ */ jsx22(
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+var Chevron = ({ open }) => /* @__PURE__ */ jsx23(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -2217,7 +2278,7 @@ var Chevron = ({ open }) => /* @__PURE__ */ jsx22(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     "aria-hidden": true,
-    children: /* @__PURE__ */ jsx22("path", { d: "m6 9 6 6 6-6" })
+    children: /* @__PURE__ */ jsx23("path", { d: "m6 9 6 6 6-6" })
   }
 );
 var ExpandableSection = ({
@@ -2238,8 +2299,8 @@ var ExpandableSection = ({
     if (openProp == null) setInternalOpen((o) => !o);
     onOpenChange?.(!open);
   };
-  return /* @__PURE__ */ jsxs17("div", { className: cn("border-b border-border last:border-0", className), children: [
-    /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18("div", { className: cn("border-b border-border last:border-0", className), children: [
+    /* @__PURE__ */ jsxs18(
       "button",
       {
         type: "button",
@@ -2248,16 +2309,16 @@ var ExpandableSection = ({
         "aria-controls": panelId,
         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__ */ 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__ */ jsxs18("span", { className: "flex min-w-0 items-center gap-3", children: [
+            icon ? /* @__PURE__ */ jsx23("span", { className: "flex size-8 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground", children: icon }) : null,
+            /* @__PURE__ */ jsx23("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
+            count != null ? /* @__PURE__ */ jsx23("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: count }) : null
           ] }),
-          /* @__PURE__ */ jsx22(Chevron, { open })
+          /* @__PURE__ */ jsx23(Chevron, { open })
         ]
       }
     ),
-    /* @__PURE__ */ jsx22(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(AnimatePresence, { initial: false, children: open ? /* @__PURE__ */ jsx23(
       motion2.div,
       {
         id: panelId,
@@ -2266,7 +2327,7 @@ var ExpandableSection = ({
         exit: reduceMotion ? void 0 : { height: 0, opacity: 0 },
         transition: { duration: 0.2, ease: "easeOut" },
         className: "overflow-hidden",
-        children: /* @__PURE__ */ jsx22("div", { className: "bg-muted/20", children })
+        children: /* @__PURE__ */ jsx23("div", { className: "bg-muted/20", children })
       },
       "body"
     ) : null })
@@ -2274,7 +2335,7 @@ var ExpandableSection = ({
 };
 
 // src/app/surfaces/ResourceCard.tsx
-import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var resourceCardShellClass = cn(
   "flex min-h-[8.5rem] flex-col rounded-2xl p-4 text-left font-normal",
   TIMBAL_V2_ELEVATED_SURFACE
@@ -2299,35 +2360,35 @@ var ResourceCard = ({
   ariaLabel,
   className
 }) => {
-  const body = /* @__PURE__ */ jsxs18(Fragment3, { children: [
-    /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-3", children: [
-      media ? /* @__PURE__ */ jsx23("span", { className: mediaShellClass, children: media }) : null,
-      /* @__PURE__ */ jsxs18("div", { className: "min-w-0 flex-1 pt-0.5", children: [
-        /* @__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
+  const body = /* @__PURE__ */ jsxs19(Fragment3, { children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex items-start gap-3", children: [
+      media ? /* @__PURE__ */ jsx24("span", { className: mediaShellClass, children: media }) : null,
+      /* @__PURE__ */ jsxs19("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+        /* @__PURE__ */ jsx24("p", { className: "truncate text-sm font-normal leading-snug text-foreground", children: title }),
+        subtitle ? /* @__PURE__ */ jsx24("p", { className: "mt-1 line-clamp-2 text-xs font-normal text-muted-foreground", children: subtitle }) : null
       ] }),
-      badge ? /* @__PURE__ */ jsx23("span", { className: "shrink-0 pt-0.5", children: badge }) : null
+      badge ? /* @__PURE__ */ jsx24("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__ */ jsx23("span", { className: "min-w-0 truncate", children: footer }),
-      action ? /* @__PURE__ */ jsx23("span", { className: "shrink-0 opacity-80", children: action }) : null
+    footer || action ? /* @__PURE__ */ jsxs19("div", { className: "mt-auto flex items-center justify-between gap-3 border-t border-border/40 pt-3 text-xs font-normal text-muted-foreground", children: [
+      /* @__PURE__ */ jsx24("span", { className: "min-w-0 truncate", children: footer }),
+      action ? /* @__PURE__ */ jsx24("span", { className: "shrink-0 opacity-80", children: action }) : null
     ] }) : null
   ] });
   if (onClick) {
-    return /* @__PURE__ */ jsx23("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
+    return /* @__PURE__ */ jsx24("button", { type: "button", onClick, "aria-label": ariaLabel, className: cn(resourceCardInteractiveClass, className), children: body });
   }
-  return /* @__PURE__ */ jsx23("article", { className: cn(resourceCardShellClass, className), children: body });
+  return /* @__PURE__ */ jsx24("article", { className: cn(resourceCardShellClass, className), children: body });
 };
 
 // src/app/settings/SettingsSection.tsx
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 var SettingsSectionHeader = ({
   title,
   description,
   className
-}) => /* @__PURE__ */ jsxs19("div", { className: cn("flex flex-col", className), children: [
-  /* @__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
+}) => /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-col", className), children: [
+  /* @__PURE__ */ jsx25("h3", { className: "text-[17px] font-medium leading-tight text-foreground", children: title }),
+  description ? /* @__PURE__ */ jsx25("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
 ] });
 var SettingsSection = ({
   title,
@@ -2336,7 +2397,7 @@ var SettingsSection = ({
   children,
   noBorderTop = false,
   className
-}) => /* @__PURE__ */ jsxs19(
+}) => /* @__PURE__ */ jsxs20(
   "section",
   {
     className: cn(
@@ -2345,18 +2406,18 @@ var SettingsSection = ({
       className
     ),
     children: [
-      /* @__PURE__ */ jsxs19("div", { className: "min-w-0", children: [
-        /* @__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__ */ jsxs20("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx25("h2", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx25("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null,
+        descriptionFooter ? /* @__PURE__ */ jsx25("div", { className: "mt-3 min-w-0", children: descriptionFooter }) : null
       ] }),
-      /* @__PURE__ */ jsx24("div", { className: "min-w-0 space-y-3", children })
+      /* @__PURE__ */ jsx25("div", { className: "min-w-0 space-y-3", children })
     ]
   }
 );
 
 // src/app/settings/FieldRow.tsx
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 var FieldRow = ({
   label,
   children,
@@ -2366,7 +2427,7 @@ var FieldRow = ({
   className
 }) => {
   if (inline) {
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs21(
       "div",
       {
         className: cn(
@@ -2374,8 +2435,8 @@ var FieldRow = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs20("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsxs21("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx26(
               "label",
               {
                 htmlFor,
@@ -2383,17 +2444,17 @@ var FieldRow = ({
                 children: label
               }
             ),
-            description ? /* @__PURE__ */ jsx25("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
+            description ? /* @__PURE__ */ jsx26("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
           ] }),
-          /* @__PURE__ */ jsx25("div", { className: "shrink-0", children })
+          /* @__PURE__ */ jsx26("div", { className: "shrink-0", children })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-col gap-1.5", className), children: [
-    /* @__PURE__ */ jsx25("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
+  return /* @__PURE__ */ jsxs21("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsx26("label", { htmlFor, className: "text-sm font-medium text-foreground", children: label }),
     children,
-    description ? /* @__PURE__ */ jsx25("p", { className: "text-xs text-muted-foreground", children: description }) : null
+    description ? /* @__PURE__ */ jsx26("p", { className: "text-xs text-muted-foreground", children: description }) : null
   ] });
 };
 
@@ -2401,7 +2462,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 jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 var FloatingUnsavedChangesBar = ({
   visible,
   message = "Unsaved changes",
@@ -2419,7 +2480,7 @@ var FloatingUnsavedChangesBar = ({
   useEffect(() => setMounted(true), []);
   if (!mounted || typeof document === "undefined") return null;
   return createPortal(
-    /* @__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(
+    /* @__PURE__ */ jsx27(AnimatePresence2, { children: visible ? /* @__PURE__ */ jsx27("div", { className: "pointer-events-none fixed inset-x-0 bottom-5 z-50 flex justify-center px-4", children: /* @__PURE__ */ jsxs22(
       motion3.div,
       {
         role: "region",
@@ -2433,10 +2494,10 @@ var FloatingUnsavedChangesBar = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx26("span", { className: "text-sm text-muted-foreground", children: message }),
-          /* @__PURE__ */ jsxs21("span", { className: "flex items-center gap-1.5", children: [
-            /* @__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 })
+          /* @__PURE__ */ jsx27("span", { className: "text-sm text-muted-foreground", children: message }),
+          /* @__PURE__ */ jsxs22("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx27(Button, { variant: "ghost", size: "sm", onClick: onDiscard, disabled: isSaving, children: discardLabel }),
+            /* @__PURE__ */ jsx27(Button, { size: "sm", onClick: onSave, disabled: saveDisabled || isSaving, children: isSaving ? "Saving\u2026" : saveLabel })
           ] })
         ]
       }
@@ -2446,13 +2507,13 @@ var FloatingUnsavedChangesBar = ({
 };
 
 // src/app/settings/DangerZone.tsx
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 var DangerZoneAction = ({
   title,
   description,
   action,
   className
-}) => /* @__PURE__ */ jsxs22(
+}) => /* @__PURE__ */ jsxs23(
   "div",
   {
     className: cn(
@@ -2460,11 +2521,11 @@ var DangerZoneAction = ({
       className
     ),
     children: [
-      /* @__PURE__ */ jsxs22("div", { className: "min-w-0", children: [
-        /* @__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__ */ jsxs23("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx28("p", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx28("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ jsx27("div", { className: "shrink-0", children: action })
+      /* @__PURE__ */ jsx28("div", { className: "shrink-0", children: action })
     ]
   }
 );
@@ -2473,7 +2534,7 @@ var DangerZone = ({
   description,
   children,
   className
-}) => /* @__PURE__ */ jsxs22(
+}) => /* @__PURE__ */ jsxs23(
   "section",
   {
     className: cn(
@@ -2481,18 +2542,18 @@ var DangerZone = ({
       className
     ),
     children: [
-      (title || description) && /* @__PURE__ */ jsxs22("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
-        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
+      (title || description) && /* @__PURE__ */ jsxs23("header", { className: "border-b border-destructive/20 bg-destructive/5 px-4 py-3", children: [
+        title ? /* @__PURE__ */ jsx28("h3", { className: "text-sm font-semibold text-destructive", children: title }) : null,
+        description ? /* @__PURE__ */ jsx28("p", { className: "mt-0.5 text-sm text-muted-foreground", children: description }) : null
       ] }),
-      /* @__PURE__ */ jsx27("div", { className: "divide-y divide-border bg-card", children })
+      /* @__PURE__ */ jsx28("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 jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs24 } 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,
@@ -2533,12 +2594,12 @@ var IntegrationCard = ({
   const titleId = useId2();
   const locked = status === "locked";
   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__ */ 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__ */ jsx28(
+  const body = /* @__PURE__ */ jsxs24("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxs24("div", { className: "flex shrink-0 items-start gap-3 pr-2", children: [
+      logo ? /* @__PURE__ */ jsx29("span", { className: logoShellClass, "aria-hidden": Boolean(ariaLabel), children: logo }) : null,
+      /* @__PURE__ */ jsx29("div", { className: "min-w-0 flex-1 pt-0.5", children: /* @__PURE__ */ jsxs24("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs24("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx29(
             "h4",
             {
               id: onClick && !action ? void 0 : titleId,
@@ -2546,12 +2607,12 @@ var IntegrationCard = ({
               children: name
             }
           ),
-          statusLabel[status] ? /* @__PURE__ */ jsx28("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
+          statusLabel[status] ? /* @__PURE__ */ jsx29("p", { className: "mt-0.5 text-xs text-muted-foreground", children: statusLabel[status] }) : null
         ] }),
-        badge ? /* @__PURE__ */ jsx28("span", { className: "shrink-0", children: badge }) : null
+        badge ? /* @__PURE__ */ jsx29("span", { className: "shrink-0", children: badge }) : null
       ] }) })
     ] }),
-    description ? /* @__PURE__ */ jsx28(
+    description ? /* @__PURE__ */ jsx29(
       "p",
       {
         className: cn(
@@ -2561,9 +2622,9 @@ var IntegrationCard = ({
         children: description
       }
     ) : null,
-    action ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
-      /* @__PURE__ */ jsx28("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
-      /* @__PURE__ */ jsx28("div", { className: "relative mt-3 shrink-0", children: action })
+    action ? /* @__PURE__ */ jsxs24(Fragment4, { children: [
+      /* @__PURE__ */ jsx29("div", { className: "min-h-0 flex-1", "aria-hidden": true }),
+      /* @__PURE__ */ jsx29("div", { className: "relative mt-3 shrink-0", children: action })
     ] }) : null
   ] });
   const shellClass3 = cn(
@@ -2573,7 +2634,7 @@ var IntegrationCard = ({
     className
   );
   if (onClick && !action) {
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx29(
       "button",
       {
         type: "button",
@@ -2590,12 +2651,12 @@ var IntegrationCard = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx28("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
+  return /* @__PURE__ */ jsx29("article", { className: shellClass3, "aria-labelledby": titleId, children: body });
 };
 
 // src/app/integrations/IntegrationsEmptyState.tsx
 import { useId as useId3 } from "react";
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var IntegrationsEmptyState = ({
   title = "No integrations yet",
   description = "Connect a provider to start syncing data and powering your workforce.",
@@ -2604,7 +2665,7 @@ var IntegrationsEmptyState = ({
   className
 }) => {
   const titleId = useId3();
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "section",
     {
       className: cn(
@@ -2614,7 +2675,7 @@ var IntegrationsEmptyState = ({
       ),
       "aria-labelledby": titleId,
       children: [
-        icon ? /* @__PURE__ */ jsx29(
+        icon ? /* @__PURE__ */ jsx30(
           "span",
           {
             className: cn(
@@ -2626,21 +2687,21 @@ var IntegrationsEmptyState = ({
             children: icon
           }
         ) : 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
+        /* @__PURE__ */ jsx30("h3", { id: titleId, className: "text-base font-normal text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx30("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }) : null,
+        action ? /* @__PURE__ */ jsx30("div", { className: "mt-1", children: action }) : null
       ]
     }
   );
 };
 
 // src/app/integrations/PlanBadge.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } 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__ */ jsx30("span", { className: cn(planBadgeClass, className), children });
+var PlanBadge = ({ children, className }) => /* @__PURE__ */ jsx31("span", { className: cn(planBadgeClass, className), children });
 
 // src/app/integrations/ConnectionRow.tsx
-import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 var logoShellClass2 = cn(
   "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg",
   TIMBAL_V2_LOGO_TILE
@@ -2655,14 +2716,14 @@ var ConnectionRow = ({
   ariaLabel,
   className
 }) => {
-  const inner = /* @__PURE__ */ jsxs25(Fragment5, { children: [
-    logo ? /* @__PURE__ */ jsx31("span", { className: logoShellClass2, children: logo }) : null,
-    /* @__PURE__ */ jsxs25("div", { className: "min-w-0 flex-1", children: [
-      /* @__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
+  const inner = /* @__PURE__ */ jsxs26(Fragment5, { children: [
+    logo ? /* @__PURE__ */ jsx32("span", { className: logoShellClass2, children: logo }) : null,
+    /* @__PURE__ */ jsxs26("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx32("p", { className: "truncate text-sm font-normal text-foreground", children: name }),
+      meta ? /* @__PURE__ */ jsx32("p", { className: "truncate text-xs text-muted-foreground", children: meta }) : null
     ] }),
-    badge ? /* @__PURE__ */ jsx31("span", { className: "shrink-0", children: badge }) : null,
-    action ? /* @__PURE__ */ jsx31("span", { className: "shrink-0", children: action }) : null
+    badge ? /* @__PURE__ */ jsx32("span", { className: "shrink-0", children: badge }) : null,
+    action ? /* @__PURE__ */ jsx32("span", { className: "shrink-0", children: action }) : null
   ] });
   const rowClass2 = cn(
     "flex w-full items-center gap-3 px-4 py-3 text-left",
@@ -2670,7 +2731,7 @@ var ConnectionRow = ({
     className
   );
   if (onClick) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx32(
       "button",
       {
         type: "button",
@@ -2682,7 +2743,7 @@ var ConnectionRow = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx31("div", { role: "listitem", className: rowClass2, children: inner });
+  return /* @__PURE__ */ jsx32("div", { role: "listitem", className: rowClass2, children: inner });
 };
 var connectionRowListClass = cn(
   "overflow-hidden rounded-2xl",
@@ -2690,12 +2751,12 @@ var connectionRowListClass = cn(
 );
 
 // src/app/integrations/ConnectionRowList.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var ConnectionRowList = ({
   children,
   "aria-label": ariaLabel = "Connected integrations",
   className
-}) => /* @__PURE__ */ jsx32(
+}) => /* @__PURE__ */ jsx33(
   "div",
   {
     role: "list",
@@ -2706,7 +2767,7 @@ var ConnectionRowList = ({
 );
 
 // src/app/navigation/SubNav.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var SubNav = ({
   items,
   activeId,
@@ -2715,7 +2776,7 @@ var SubNav = ({
   "aria-label": ariaLabel = "Section navigation",
   layoutId
 }) => {
-  return /* @__PURE__ */ jsx33("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34("nav", { className: cn("aui-app-sub-nav", className), "aria-label": ariaLabel, children: /* @__PURE__ */ jsx34(
     PillSegmentedTabs,
     {
       value: activeId,
@@ -2729,13 +2790,13 @@ var SubNav = ({
 };
 
 // src/app/navigation/Breadcrumbs.tsx
-import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 var Breadcrumbs = ({ items, className }) => {
-  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) => {
+  return /* @__PURE__ */ jsx35("nav", { className: cn("aui-app-breadcrumbs", appBreadcrumbsClass, className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx35("ol", { className: "flex flex-wrap items-center gap-1.5", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ jsxs26("li", { className: "inline-flex items-center gap-1.5", children: [
-      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(
+    return /* @__PURE__ */ jsxs27("li", { className: "inline-flex items-center gap-1.5", children: [
+      index > 0 ? /* @__PURE__ */ jsx35("span", { className: "text-muted-foreground/50", "aria-hidden": true, children: "/" }) : null,
+      isLast ? /* @__PURE__ */ jsx35("span", { className: "text-foreground", "aria-current": "page", children: item.label }) : item.href ? /* @__PURE__ */ jsx35("a", { href: item.href, className: appBreadcrumbLinkClass, children: item.label }) : /* @__PURE__ */ jsx35(
         "button",
         {
           type: "button",
@@ -2749,7 +2810,7 @@ var Breadcrumbs = ({ items, className }) => {
 };
 
 // src/app/forms/Field.tsx
-import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
 var Field = ({
   label,
   hint,
@@ -2758,11 +2819,11 @@ var Field = ({
   className,
   htmlFor
 }) => {
-  return /* @__PURE__ */ jsxs27("div", { className: cn("aui-app-field", appFieldClass, className), children: [
-    /* @__PURE__ */ jsx35("label", { className: appFieldLabelClass, htmlFor, children: label }),
+  return /* @__PURE__ */ jsxs28("div", { className: cn("aui-app-field", appFieldClass, className), children: [
+    /* @__PURE__ */ jsx36("label", { className: appFieldLabelClass, htmlFor, children: label }),
     children,
-    hint && !error ? /* @__PURE__ */ jsx35("p", { className: appFieldHintClass, children: hint }) : null,
-    error ? /* @__PURE__ */ jsx35("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
+    hint && !error ? /* @__PURE__ */ jsx36("p", { className: appFieldHintClass, children: hint }) : null,
+    error ? /* @__PURE__ */ jsx36("p", { className: "text-xs text-destructive", role: "alert", children: error }) : null
   ] });
 };
 var FieldInput = ({
@@ -2775,7 +2836,7 @@ var FieldInput = ({
   ...inputProps
 }) => {
   const inputId = id ?? inputProps.name;
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     Field,
     {
       label,
@@ -2783,7 +2844,7 @@ var FieldInput = ({
       error,
       htmlFor: inputId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsx36(
         "input",
         {
           id: inputId,
@@ -2797,7 +2858,7 @@ var FieldInput = ({
 };
 
 // src/app/forms/FieldTextarea.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var textareaClass = cn(
   appInputClass,
   "min-h-[5.5rem] resize-y py-2.5 leading-relaxed"
@@ -2812,7 +2873,7 @@ var FieldTextarea = ({
   ...props
 }) => {
   const textareaId = id ?? props.name;
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Field,
     {
       label,
@@ -2820,7 +2881,7 @@ var FieldTextarea = ({
       error,
       htmlFor: textareaId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsx36(
+      children: /* @__PURE__ */ jsx37(
         "textarea",
         {
           id: textareaId,
@@ -2835,7 +2896,7 @@ var FieldTextarea = ({
 
 // src/app/forms/FieldSelect.tsx
 import { ChevronDownIcon } from "lucide-react";
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
 var selectWrapClass = "relative";
 var selectClass = cn(
   appInputClass,
@@ -2852,7 +2913,7 @@ var FieldSelect = ({
   ...props
 }) => {
   const selectId = id ?? props.name;
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     Field,
     {
       label,
@@ -2860,8 +2921,8 @@ var FieldSelect = ({
       error,
       htmlFor: selectId,
       className: fieldClassName,
-      children: /* @__PURE__ */ jsxs28("div", { className: selectWrapClass, children: [
-        /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsxs29("div", { className: selectWrapClass, children: [
+        /* @__PURE__ */ jsx38(
           "select",
           {
             id: selectId,
@@ -2871,7 +2932,7 @@ var FieldSelect = ({
             children
           }
         ),
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           ChevronDownIcon,
           {
             className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground",
@@ -2884,7 +2945,7 @@ var FieldSelect = ({
 };
 
 // src/app/forms/FieldSwitch.tsx
-import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs30 } 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",
@@ -2905,7 +2966,7 @@ var FieldSwitch = ({
   ...props
 }) => {
   const inputId = id ?? props.name ?? "switch";
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "label",
     {
       className: cn(
@@ -2914,8 +2975,8 @@ var FieldSwitch = ({
       ),
       htmlFor: inputId,
       children: [
-        /* @__PURE__ */ jsxs29("span", { className: "relative mt-0.5", children: [
-          /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsxs30("span", { className: "relative mt-0.5", children: [
+          /* @__PURE__ */ jsx39(
             "input",
             {
               id: inputId,
@@ -2925,11 +2986,11 @@ var FieldSwitch = ({
               ...props
             }
           ),
-          /* @__PURE__ */ jsx38("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ jsx38("span", { className: thumbClass }) })
+          /* @__PURE__ */ jsx39("span", { className: trackClass, "aria-hidden": true, children: /* @__PURE__ */ jsx39("span", { className: thumbClass }) })
         ] }),
-        /* @__PURE__ */ jsxs29("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
-          /* @__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
+        /* @__PURE__ */ jsxs30("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx39("span", { className: "text-sm font-medium text-foreground", children: label }),
+          description ? /* @__PURE__ */ jsx39("span", { className: "text-xs text-muted-foreground", children: description }) : null
         ] })
       ]
     }
@@ -2938,13 +2999,13 @@ var FieldSwitch = ({
 
 // src/app/forms/SearchInput.tsx
 import { SearchIcon } from "lucide-react";
-import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
 var SearchInput = ({
   className,
   placeholder = "Search\u2026",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "label",
     {
       className: cn(
@@ -2953,8 +3014,8 @@ var SearchInput = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx39(SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(SearchIcon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx40(
           "input",
           {
             type: "search",
@@ -2969,18 +3030,26 @@ var SearchInput = ({
 };
 
 // src/app/forms/FormSection.tsx
-import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs32 } 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__ */ jsx40("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
-    /* @__PURE__ */ jsx40("div", { className: "flex flex-col gap-4", children })
-  ] });
+  const density = useAppDensity();
+  const sectionClass = useAppDensityClass("section");
+  return /* @__PURE__ */ jsxs32(
+    "fieldset",
+    {
+      className: cn("aui-app-form-section", sectionClass, "border-0 p-0", className),
+      children: [
+        title ? /* @__PURE__ */ jsx41("legend", { className: cn(appSectionTitleClass, "mb-3 px-0"), children: title }) : null,
+        /* @__PURE__ */ jsx41("div", { className: cn("flex flex-col", density === "compact" ? "gap-2" : "gap-4"), children })
+      ]
+    }
+  );
 };
 
 // src/app/data/FilterBar.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var FilterBar = ({ children, className }) => {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       className: cn("aui-app-filter-bar", appFilterBarClass, className),
@@ -2992,14 +3061,14 @@ var FilterBar = ({ children, className }) => {
 };
 
 // src/app/data/FilterField.tsx
-import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs33 } 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,
+  return /* @__PURE__ */ jsxs33("div", { className: cn("aui-app-filter-field", appFieldClass, className), children: [
+    label ? /* @__PURE__ */ jsx43("span", { className: appFieldLabelClass, children: label }) : null,
     children
   ] });
 };
@@ -3013,19 +3082,20 @@ import {
   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";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+var shellClass2 = "overflow-hidden rounded-xl border border-border bg-gradient-to-b from-elevated-from to-elevated-to shadow-card";
 var tableClass = "w-full border-collapse bg-transparent text-sm";
-var 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 headRowClass = "bg-muted/40";
+var headCellClass = "border-b border-border/70 px-4 py-2.5 text-left text-[11px] font-semibold uppercase tracking-[0.04em] text-muted-foreground/90";
 var bodyCellClass = "border-b border-border/40 bg-transparent px-4 py-2.5 text-foreground";
-var rowClass = "bg-transparent transition-colors hover:bg-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 rowClass = "bg-transparent transition-colors hover:bg-muted/40 data-[clickable=true]:cursor-pointer data-[selected=true]:bg-primary/[0.06]";
+var footCellClass = "border-t border-border/60 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground";
 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 sortButtonClass = "group inline-flex min-w-0 items-center gap-1.5 rounded-md -mx-1 px-1 py-0.5 text-left font-semibold text-muted-foreground/90 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10";
+var stickyHeadClass = "sticky top-0 z-[1] bg-muted/95 shadow-[0_1px_0_0_hsl(var(--border)/0.6)] backdrop-blur-sm";
 var selectCellClass = "w-10 px-4 py-2.5 align-middle";
-var pagerButtonClass = "inline-flex size-7 items-center justify-center rounded-md border border-border bg-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 pagerButtonClass = "inline-flex size-7 items-center justify-center rounded-md border border-border bg-gradient-to-b from-elevated-from to-elevated-to text-muted-foreground shadow-card transition-colors hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to hover:text-foreground disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/10";
 var alignClass = {
   left: "text-left",
   center: "text-center",
@@ -3055,12 +3125,12 @@ function SortIndicator({
 }) {
   const iconClass = "size-3.5 shrink-0 opacity-60 group-hover:opacity-100";
   if (!active) {
-    return /* @__PURE__ */ jsx43(ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ jsx44(ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
   }
   if (direction === "desc") {
-    return /* @__PURE__ */ jsx43(ArrowDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ jsx44(ArrowDownIcon, { className: iconClass, "aria-hidden": true });
   }
-  return /* @__PURE__ */ jsx43(ArrowUpIcon, { className: iconClass, "aria-hidden": true });
+  return /* @__PURE__ */ jsx44(ArrowUpIcon, { className: iconClass, "aria-hidden": true });
 }
 function DataTable({
   columns,
@@ -3158,7 +3228,7 @@ function DataTable({
   const headPad = dense ? "px-3 py-2" : void 0;
   const colSpan = columns.length + (selectable ? 1 : 0);
   if (!loading && rows.length === 0 && emptyMode === "replace") {
-    return /* @__PURE__ */ jsx43(EmptyState, { title: emptyTitle, description: emptyDescription, className });
+    return /* @__PURE__ */ jsx44(EmptyState, { title: emptyTitle, description: emptyDescription, className });
   }
   const allKeys = sortedRows.map(getRowKey);
   const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));
@@ -3183,10 +3253,10 @@ function DataTable({
   const hasPager = paginated && !loading && sortedRows.length > 0;
   const hasFoot = (showRowCount || footer || hasPager) && (loading || sortedRows.length > 0);
   const skeletonCount = loadingRows ?? pageSize ?? 5;
-  return /* @__PURE__ */ 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(
+  return /* @__PURE__ */ jsx44("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ jsx44("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs34("table", { className: tableClass, children: [
+    caption ? /* @__PURE__ */ jsx44("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ jsx44("thead", { className: cn(headRowClass, stickyHeader && stickyHeadClass), children: /* @__PURE__ */ jsxs34("tr", { children: [
+      selectable ? /* @__PURE__ */ jsx44("th", { scope: "col", className: cn(selectCellClass, headPad), children: /* @__PURE__ */ jsx44(
         Checkbox,
         {
           checked: headerCheckedState,
@@ -3198,19 +3268,19 @@ function DataTable({
       columns.map((col) => {
         const isSorted = sort?.columnId === col.id;
         const ariaSort = col.sortable ? isSorted ? sort.direction === "asc" ? "ascending" : "descending" : "none" : void 0;
-        const headerContent = col.sortable ? /* @__PURE__ */ jsxs33(
+        const headerContent = col.sortable ? /* @__PURE__ */ jsxs34(
           "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 })
+              /* @__PURE__ */ jsx44("span", { className: "truncate", children: col.header }),
+              /* @__PURE__ */ jsx44(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
             ]
           }
         ) : col.header;
-        return /* @__PURE__ */ jsx43(
+        return /* @__PURE__ */ jsx44(
           "th",
           {
             scope: "col",
@@ -3227,9 +3297,9 @@ function DataTable({
         );
       })
     ] }) }),
-    /* @__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(
+    /* @__PURE__ */ jsx44("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: loading ? Array.from({ length: skeletonCount }).map((_, rowIdx) => /* @__PURE__ */ jsxs34("tr", { className: rowClass, "aria-hidden": true, children: [
+      selectable ? /* @__PURE__ */ jsx44("td", { className: cn(selectCellClass, cellPad), children: /* @__PURE__ */ jsx44(Skeleton, { className: "size-4 rounded-[4px]" }) }) : null,
+      columns.map((col) => /* @__PURE__ */ jsx44(
         "td",
         {
           className: cn(
@@ -3238,17 +3308,17 @@ function DataTable({
             col.align && alignClass[col.align],
             col.className
           ),
-          children: /* @__PURE__ */ jsx43(Skeleton, { className: "h-4 w-[60%]" })
+          children: /* @__PURE__ */ jsx44(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
+    ] }, `skeleton-${rowIdx}`)) : visibleRows.length === 0 ? /* @__PURE__ */ jsx44("tr", { children: /* @__PURE__ */ jsx44("td", { colSpan, className: emptyCellClass, children: /* @__PURE__ */ jsxs34("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx44("p", { className: "font-medium text-foreground", children: emptyTitle }),
+      emptyDescription ? /* @__PURE__ */ jsx44("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
     ] }) }) }) : visibleRows.map((row) => {
       const key = getRowKey(row);
       const isSelected = selectedSet.has(key);
-      return /* @__PURE__ */ jsxs33(
+      return /* @__PURE__ */ jsxs34(
         "tr",
         {
           className: rowClass,
@@ -3264,12 +3334,12 @@ function DataTable({
           tabIndex: onRowClick ? 0 : void 0,
           role: onRowClick ? "button" : void 0,
           children: [
-            selectable ? /* @__PURE__ */ jsx43(
+            selectable ? /* @__PURE__ */ jsx44(
               "td",
               {
                 className: cn(selectCellClass, cellPad),
                 onClick: (event) => event.stopPropagation(),
-                children: /* @__PURE__ */ jsx43(
+                children: /* @__PURE__ */ jsx44(
                   Checkbox,
                   {
                     checked: isSelected,
@@ -3279,16 +3349,17 @@ function DataTable({
                 )
               }
             ) : null,
-            columns.map((col) => /* @__PURE__ */ jsx43(
+            columns.map((col) => /* @__PURE__ */ jsx44(
               "td",
               {
                 className: cn(
                   bodyCellClass,
                   cellPad,
+                  col.truncate && "max-w-0",
                   col.align && alignClass[col.align],
                   col.className
                 ),
-                children: col.cell(row)
+                children: col.truncate ? /* @__PURE__ */ jsx44("div", { className: "truncate", children: col.cell(row) }) : col.cell(row)
               },
               col.id
             ))
@@ -3297,7 +3368,7 @@ function DataTable({
         key
       );
     }) }),
-    hasFoot ? /* @__PURE__ */ jsx43("tfoot", { children: /* @__PURE__ */ jsx43("tr", { children: /* @__PURE__ */ jsx43("td", { colSpan, className: footCellClass, children: /* @__PURE__ */ jsxs33(
+    hasFoot ? /* @__PURE__ */ jsx44("tfoot", { children: /* @__PURE__ */ jsx44("tr", { children: /* @__PURE__ */ jsx44("td", { colSpan, className: footCellClass, children: /* @__PURE__ */ jsxs34(
       "div",
       {
         className: cn(
@@ -3305,18 +3376,18 @@ function DataTable({
           (showRowCount || footer || hasPager) && "justify-between"
         ),
         children: [
-          /* @__PURE__ */ jsxs33("div", { className: footInnerClass, children: [
-            showRowCount ? /* @__PURE__ */ jsxs33("span", { children: [
+          /* @__PURE__ */ jsxs34("div", { className: footInnerClass, children: [
+            showRowCount ? /* @__PURE__ */ jsxs34("span", { children: [
               rowCountText,
               selectable && selectedSet.size > 0 ? ` \xB7 ${selectedSet.size} selected` : null
-            ] }) : selectable && selectedSet.size > 0 ? /* @__PURE__ */ jsxs33("span", { children: [
+            ] }) : selectable && selectedSet.size > 0 ? /* @__PURE__ */ jsxs34("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: [
+          hasPager ? /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs34("span", { className: "tabular-nums", children: [
               pageIndex * pageSize + 1,
               "\u2013",
               Math.min(
@@ -3327,8 +3398,8 @@ function DataTable({
               "of ",
               sortedRows.length
             ] }),
-            /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx43(
+            /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx44(
                 "button",
                 {
                   type: "button",
@@ -3336,10 +3407,10 @@ function DataTable({
                   onClick: () => setPage(pageIndex - 1),
                   disabled: pageIndex <= 0,
                   "aria-label": "Previous page",
-                  children: /* @__PURE__ */ jsx43(ChevronLeftIcon, { className: "size-4", "aria-hidden": true })
+                  children: /* @__PURE__ */ jsx44(ChevronLeftIcon, { className: "size-4", "aria-hidden": true })
                 }
               ),
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx44(
                 "button",
                 {
                   type: "button",
@@ -3347,7 +3418,7 @@ function DataTable({
                   onClick: () => setPage(pageIndex + 1),
                   disabled: pageIndex >= pageCount - 1,
                   "aria-label": "Next page",
-                  children: /* @__PURE__ */ jsx43(ChevronRightIcon, { className: "size-4", "aria-hidden": true })
+                  children: /* @__PURE__ */ jsx44(ChevronRightIcon, { className: "size-4", "aria-hidden": true })
                 }
               )
             ] })
@@ -3360,28 +3431,32 @@ function DataTable({
 
 // src/app/data/ChartPanel.tsx
 import { useId as useId4 } from "react";
-import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var ChartPanel = ({
   title,
   description,
   artifact,
   children,
   actions,
-  height = 300,
+  height: heightProp,
   loading = false,
   className
 }) => {
+  const density = useAppDensity();
+  const height = heightProp ?? APP_DENSITY_CHART_HEIGHT[density];
+  const metricChartPlotRegionClass = useAppDensityClass("metricChartPlotRegion");
+  const chartPanelBodyClass = useAppDensityClass("chartPanelBody");
   const titleId = useId4();
   const resolvedTitle = title ?? artifact?.title;
   const hasHeader = Boolean(resolvedTitle || description || actions);
-  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(
+  const body = loading ? /* @__PURE__ */ jsx45(Skeleton, { className: "w-full rounded-lg", style: { height }, "aria-hidden": true }) : children ?? (artifact ? /* @__PURE__ */ jsx45(ChartArtifactView, { artifact, embedded: true, height }) : null);
+  return /* @__PURE__ */ jsxs35(
     "section",
     {
       className: cn(metricCardShellClass, "aui-app-chart-panel", className),
       "aria-labelledby": resolvedTitle ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           MetricCardHeader,
           {
             title: resolvedTitle,
@@ -3390,14 +3465,14 @@ var ChartPanel = ({
             actions
           }
         ),
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx45(
           "div",
           {
             className: cn(
               "relative min-h-0 w-full",
-              hasHeader ? metricChartPlotRegionClass : "pt-2 pb-3"
+              hasHeader ? metricChartPlotRegionClass : chartPanelBodyClass
             ),
-            children: body ?? /* @__PURE__ */ jsx44(
+            children: body ?? /* @__PURE__ */ jsx45(
               "div",
               {
                 className: "flex items-center justify-center text-sm font-normal text-muted-foreground",
@@ -3415,7 +3490,7 @@ var ChartPanel = ({
 
 // src/app/data/MetricRow.tsx
 import { useId as useId5, useState as useState5 } from "react";
-import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
 var MetricRow = ({
   title,
   description,
@@ -3428,6 +3503,7 @@ var MetricRow = ({
   loading = false,
   className
 }) => {
+  const metricTileClass = useAppDensityClass("metricTile");
   const titleId = useId5();
   const selectable = onMetricChange != null || activeMetricId != null;
   const [internalId, setInternalId] = useState5(
@@ -3438,13 +3514,13 @@ var MetricRow = ({
     if (activeMetricId == null) setInternalId(id);
     onMetricChange?.(id);
   };
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           MetricCardHeader,
           {
             title,
@@ -3453,7 +3529,7 @@ var MetricRow = ({
             actions
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           "div",
           {
             role: selectable ? "group" : void 0,
@@ -3464,18 +3540,18 @@ var MetricRow = ({
               metricTilesGridColsClass(loading ? metrics.length || 4 : metrics.length),
               (title || description || actions) && "mt-3"
             ),
-            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ jsxs35(
+            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",
+                className: cn("flex min-w-0 flex-1 flex-col gap-2", metricTileClass),
                 "aria-hidden": true,
                 children: [
-                  /* @__PURE__ */ jsx45(Skeleton, { className: "h-3 w-20" }),
-                  /* @__PURE__ */ jsx45(Skeleton, { className: "h-7 w-24" })
+                  /* @__PURE__ */ jsx46(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ jsx46(Skeleton, { className: "h-7 w-24" })
                 ]
               },
               `skeleton-${index}`
-            )) : metrics.map((m, index) => /* @__PURE__ */ jsx45(
+            )) : metrics.map((m, index) => /* @__PURE__ */ jsx46(
               MetricTile,
               {
                 label: m.label,
@@ -3498,7 +3574,7 @@ var MetricRow = ({
 
 // src/app/data/MetricChartCard.tsx
 import { useId as useId6, useState as useState6 } from "react";
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 var MetricChartCard = ({
   title,
   description,
@@ -3509,7 +3585,7 @@ var MetricChartCard = ({
   onMetricChange,
   xKey = "date",
   variant = "area",
-  height = 300,
+  height: heightProp,
   formatX,
   formatValue,
   emptyLabel = "No data yet",
@@ -3517,6 +3593,10 @@ var MetricChartCard = ({
   loading = false,
   className
 }) => {
+  const density = useAppDensity();
+  const height = heightProp ?? APP_DENSITY_CHART_HEIGHT[density];
+  const metricChartRegionClass = useAppDensityClass("metricChartRegion");
+  const metricTileClass = useAppDensityClass("metricTile");
   const titleId = useId6();
   const [internalId, setInternalId] = useState6(
     defaultActiveMetricId ?? metrics[0]?.id
@@ -3529,13 +3609,13 @@ var MetricChartCard = ({
   };
   const hasHeader = Boolean(title || description || actions);
   const chartAriaLabel = typeof active?.label === "string" ? `${active.label} over time` : "Metric chart";
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(
           MetricCardHeader,
           {
             title,
@@ -3544,7 +3624,7 @@ var MetricChartCard = ({
             actions
           }
         ),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47(
           "div",
           {
             role: "group",
@@ -3555,18 +3635,18 @@ var MetricChartCard = ({
               metricTilesGridColsClass(loading ? metrics.length || 4 : metrics.length),
               hasHeader && "mt-3"
             ),
-            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ jsxs36(
+            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ jsxs37(
               "div",
               {
-                className: "flex min-w-0 flex-1 flex-col gap-2 px-4 py-3",
+                className: cn("flex min-w-0 flex-1 flex-col gap-2", metricTileClass),
                 "aria-hidden": true,
                 children: [
-                  /* @__PURE__ */ jsx46(Skeleton, { className: "h-3 w-20" }),
-                  /* @__PURE__ */ jsx46(Skeleton, { className: "h-7 w-24" })
+                  /* @__PURE__ */ jsx47(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ jsx47(Skeleton, { className: "h-7 w-24" })
                 ]
               },
               `skeleton-${index}`
-            )) : metrics.map((m, index) => /* @__PURE__ */ jsx46(
+            )) : metrics.map((m, index) => /* @__PURE__ */ jsx47(
               MetricTile,
               {
                 label: m.label,
@@ -3582,14 +3662,14 @@ var MetricChartCard = ({
             ))
           }
         ),
-        /* @__PURE__ */ jsx46("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: loading ? /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx47("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: loading ? /* @__PURE__ */ jsx47(
           Skeleton,
           {
             className: "w-full rounded-lg",
             style: { height },
             "aria-hidden": true
           }
-        ) : active?.data && active.data.length > 0 ? /* @__PURE__ */ jsx46(
+        ) : active?.data && active.data.length > 0 ? /* @__PURE__ */ jsx47(
           LineAreaChart,
           {
             data: active.data,
@@ -3609,7 +3689,7 @@ var MetricChartCard = ({
             ariaLabel: chartAriaLabel
           },
           active.id
-        ) : /* @__PURE__ */ jsx46(
+        ) : /* @__PURE__ */ jsx47(
           "div",
           {
             className: "flex w-full items-center justify-center text-sm font-normal text-muted-foreground",
@@ -3715,7 +3795,7 @@ function useLiveQuery(fetcher, options = {}) {
 
 // src/charts/sparkline.tsx
 import { useId as useId7 } from "react";
-import { Fragment as Fragment6, jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 var Sparkline = ({
   data,
   dataKey = "value",
@@ -3730,7 +3810,7 @@ var Sparkline = ({
   const uid = useId7();
   const values = data.map((d) => typeof d === "number" ? d : toNum(d[dataKey]));
   if (values.length === 0) {
-    return /* @__PURE__ */ jsx47("span", { className: cn("inline-block", className), style: { width, height } });
+    return /* @__PURE__ */ jsx48("span", { className: cn("inline-block", className), style: { width, height } });
   }
   const pad = strokeWidth + 1;
   const min = Math.min(...values);
@@ -3742,7 +3822,7 @@ var Sparkline = ({
     x: pad + (values.length > 1 ? i / (values.length - 1) * innerW : innerW / 2),
     y: pad + innerH - (v - min) / range * innerH
   }));
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     "svg",
     {
       width,
@@ -3753,14 +3833,14 @@ var Sparkline = ({
       "aria-label": ariaLabel,
       preserveAspectRatio: "none",
       children: [
-        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 } })
+        area && /* @__PURE__ */ jsxs38(Fragment6, { children: [
+          /* @__PURE__ */ jsx48("defs", { children: /* @__PURE__ */ jsxs38("linearGradient", { id: `${uid}-spark`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx48("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
+            /* @__PURE__ */ jsx48("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
           ] }) }),
-          /* @__PURE__ */ jsx47("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
+          /* @__PURE__ */ jsx48("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
         ] }),
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(
           "path",
           {
             d: monotoneLinePath(points),
@@ -3799,8 +3879,6 @@ export {
   getStoredThemePreset,
   THEME_AGENT_INSTRUCTIONS,
   TimbalThemeStyle,
-  MetricTile,
-  ThemePresetGallery,
   appPageColumnClass,
   appShellTopbarInsetClass,
   appShellInsetTopClass,
@@ -3808,6 +3886,13 @@ export {
   appStatTileClass,
   appFilterBarClass,
   appSearchInputClass,
+  APP_DENSITY_CHART_HEIGHT,
+  APP_DENSITY_CLASSES,
+  appDensityClass,
+  AppDensityProvider,
+  useAppDensity,
+  useAppDensityClass,
+  MetricTile,
   useAppShellChat,
   useAppShellNav,
   AppShell,