@timbal-ai/timbal-react 1.5.0 → 1.6.1

package/dist/app.cjs

@@ -318,7 +318,11 @@ var HOUSE_RULES = [
   {
     id: "compose-from-blocks",
     rule: "Build from premade blocks (MetricRow, MetricChartCard, DataTable, IntegrationCard). Drop to raw primitives only when no block fits.",
-    why: "Slop appears the moment generation falls below the curated block layer."
+    why: "Slop appears the moment generation falls below the curated block layer.",
+    // "Should have used a block" is a judgement about absence, not a textual
+    // pattern — no high-precision deterministic check exists, so this stays
+    // prompt-only rather than risk false-positives blocking valid UIs.
+    enforcement: "prompt-only"
   },
   {
     id: "use-kit-controls",
@@ -399,7 +403,7 @@ The content region is a **padded scroll area** by default \u2014 great for stack
 - Give the filling child **\`min-h-0 flex-1\`** (or \`h-full\`) so its own scroll/footer resolves \u2014 e.g. \`<TimbalChat className="min-h-0 flex-1" />\`, or a two-pane row where each pane is \`min-h-0 overflow-y-auto\`.
 
 \`\`\`tsx
-<AppShell contentFill topbar={<div className="flex justify-end p-4"><ModeToggle /></div>}>
+<AppShell contentFill>                          {/* no global topbar / theme switch */}
   <Page fill>                                  {/* headerless: omit title */}
     <TimbalChat workforceId="\u2026" className="min-h-0 flex-1" />
   </Page>
@@ -419,7 +423,7 @@ Presentational groups \u2014 import from the package root, not from these paths:
 
 | Folder | Components |
 |--------|------------|
-| \`data/\` | \`MetricRow\`, \`MetricChartCard\`, \`MetricTile\`, \`DataTable\`, \`FilterBar\`, \`FilterField\`, \`ChartPanel\` |
+| \`data/\` | \`MetricRow\`, \`MetricChartCard\`, \`MetricTile\`, \`DataTable\`, \`FilterBar\`, \`FilterField\`, \`FilterDropdown\`, \`ChartPanel\` |
 | \`integrations/\` | \`IntegrationCard\`, \`ConnectionRow\`, \`ConnectionRowList\`, \`IntegrationsEmptyState\`, \`PlanBadge\` |
 | \`settings/\` | \`SettingsSection\`, \`FieldRow\`, \`DangerZone\`, \`FloatingUnsavedChangesBar\` |
 | \`surfaces/\` | \`StatTile\`, \`InfoCard\`, \`AlertCard\`, \`CatalogCard\`, \`ResourceCard\`, \`DescriptionList\`, \`ExpandableSection\`, \`StatusDot\`, \`StatusBadge\`, \`EmptyState\` |
@@ -488,6 +492,7 @@ The cause of slop is dropping **below** the curated block layer into raw primiti
 | \`StatusBadge\` | Status pill: \`tone\` (\`default\`\\|\`primary\`\\|\`success\`\\|\`warn\`\\|\`danger\`\\|\`muted\`), children. Use \`danger\` for critical/error severity. |
 | \`FilterBar\` | Horizontal filter row \u2014 bottom-aligns controls. Mix \`SearchInput\` with labeled \`FilterField\` + \`Select\` (or \`Field\` + \`Select\`); labels sit above, control baselines match. |
 | \`FilterField\` | Optional label wrapper for a filter control inside \`FilterBar\` (severity, status, \u2026). Omit \`label\` for search-only fields. |
+| \`FilterDropdown\` | Single-button **multi-facet** filter popover for dense list/table views \u2014 **data-driven**: pass \`fields\` describing your **actual columns** (each \`{ id, label, type }\` where \`type\` is \`multiselect\` \\| \`text\` \\| \`daterange\` \\| \`numeric\`; \`multiselect\` takes \`options: [{ value, label, hint?, icon? }]\`). State is keyed by field \`id\` \u2014 controlled (\`value\` + \`onChange\`) or uncontrolled (\`defaultValue\`). Renders **removable active-filter pills** next to the trigger by default (\`showActiveChips\`); wire \`onChange\` to actually filter your rows. **Always derive \`fields\` from the table's columns/data; never ship the default example facets.** Use when one \`FilterBar\` row isn't enough. |
 | \`SearchInput\` | Filter field with consistent app styling. |
 | \`DataTable\` | Sortable table: \`columns\`, \`rows\`, \`getRowKey\`, optional \`sort\` / \`onSortChange\`, \`emptyTitle\`, \`showRowCount\`, \`caption\`, \`truncate: true\` on columns with long text. **Scales:** \`pageSize\` (built-in client pager), \`selectable\` + \`onSelectionChange\` (checkbox column for bulk actions), \`loading\` (skeleton rows). \`onRowClick\` for row \u2192 detail (open a \`Sheet\`). |
 | \`Avatar\` / \`AvatarFallback\` | User initials: \`variant="secondary"\` (or \`primary\` / \`chart\` alias) on **both** \`Avatar\` and \`AvatarFallback\` \u2014 same chrome as catalog **Action** buttons (\`Button variant="secondary"\`: elevated gradient, \`border-border\`, \`shadow-card\`, \`text-foreground\`). Never dark primary CTA fill or raw \`bg-blue-600\`. |
@@ -502,6 +507,8 @@ The cause of slop is dropping **below** the curated block layer into raw primiti
 
 Charts run on **recharts** with shadcn \`ChartContainer\` / \`ChartTooltipContent\` chrome (see \`src/ui/chart.tsx\`). Series colors default to \`--chart-1..6\`; override those CSS tokens to rebrand every chart.
 
+> **React 19 requirement \u2014 do not hand-roll SVG charts to work around this.** recharts under React 19 crashes (\`Cannot assign to read only property 'lanes'\`, blank route) when \`immer\` resolves to **11.0.0**. The fix is a dependency override in the app's \`package.json\` \u2014 \`"overrides": { "immer": ">=11.0.1" }\` (Yarn: \`"resolutions"\`) \u2014 **not** a code change. Always keep using \`LineAreaChart\` / \`PieChart\` / \`ChartPanel\`; never replace them with raw SVG/CSS charts.
+
 | Component | Use for |
 |-----------|---------|
 | \`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\`. |
@@ -546,6 +553,21 @@ Charts run on **recharts** with shadcn \`ChartContainer\` / \`ChartTooltipConten
 | \`Banner\` | Page-level announcement bar: \`tone\` (\`default\`\\|\`primary\`\\|\`success\`\\|\`warn\`\\|\`danger\`), \`icon\`, \`title\`, body as children, right-aligned \`actions\`, \`onDismiss\` (renders the dismiss X). For in-form/field messages use \`InfoCard\` or \`Alert\` instead. |
 | \`Timeline\` | Vertical event log: \`items: [{ id, title, description?, meta?, tone?, icon? }]\`. Presentational \u2014 pass already-formatted timestamps in \`meta\`. |
 
+#### More \`/ui\` primitives (import from \`/ui\` or the package root)
+
+These ship in the same design system but aren't re-exported from \`/app\`. Reach for them before hand-rolling \u2014 they're all dependency-free and on the shared tokens / control surface.
+
+| Component | Use for |
+|-----------|---------|
+| \`Stepper\` | Ordered step indicator for wizards / onboarding (horizontal or vertical; complete / active / upcoming states). |
+| \`Rating\` | Star rating \u2014 interactive (keyboard + hover preview) or \`readOnly\`; controlled or uncontrolled. |
+| \`NumberField\` | Numeric input with \u2212/+ steppers on the control surface; clamps to \`min\`/\`max\`, steps by \`step\`. |
+| \`TagInput\` | Chips / token input; commits on Enter/comma, removes on Backspace, optional \`dedupe\`/\`max\`. |
+| \`AvatarGroup\` | Overlapping avatar stack with an optional \`+N\` overflow chip (\`max\`, \`spacing\`). |
+| \`CircularProgress\` | Lightweight SVG progress ring \u2014 determinate (optional center label) or indeterminate. |
+| \`CopyButton\` | Click-to-copy with a transient check confirmation; icon-only or with a label. |
+| \`Snippet\` | Single-line code / command on the elevated surface with a built-in copy button. |
+
 Studio chrome (\`StudioSidebar\`, \`ModeToggle\`, \u2026) lives in \`@timbal-ai/timbal-react/studio\` \u2014 optional, not required for every dashboard.
 
 ### Block recipes \u2014 compose these (don't clone wholesale)
@@ -612,6 +634,7 @@ import {
   DataTable,
   FilterBar,
   FilterField,
+  FilterDropdown,
   AlertCard,
   CatalogCard,
 } from "@timbal-ai/timbal-react/app";
@@ -666,6 +689,8 @@ var GRADIENT_DIRECTIONS = /* @__PURE__ */ new Set([
 var ICON_IMPORT_RE = /from\s+["']lucide-react["']/;
 var RAW_CONTROL_SURFACE_RE = /\bborder-input\b/;
 var COLORED_HOVER_RE = /\bhover:(?:bg|from|to|via)-(?:primary|destructive|success|warn|danger|blue|emerald|green|amber|red|indigo|violet|purple|pink|rose|sky|cyan|teal|lime|yellow|orange|fuchsia)\b/;
+var TREND_CONTEXT_RE = /\b(?:trend|delta|TrendingUp|TrendingDown|ArrowUp|ArrowDown|ArrowUpRight|ArrowDownRight|MoveUp|MoveDown)\b|[+\-]\d+(?:\.\d+)?\s*%/;
+var TREND_COLOR_RE = /\b(?:text|bg|border)-(?:success|destructive|emerald|green|lime|teal|red|rose|orange|amber)(?:-\d{2,3})?(?:\/\d{1,3})?\b/;
 var RESERVED_GRADIENT_SET = new Set(RESERVED_GRADIENT_TOKENS);
 function stripVariants(util) {
   return util.replace(/^(?:[a-z-]+:)*/, "");
@@ -709,6 +734,16 @@ function lintGeneratedUi(source, options = {}) {
     if (cardMatch) {
       const isSelfClosing = /\/>/.test(line) && line.indexOf(cardMatch[0]) < line.indexOf("/>");
       if (!isSelfClosing) {
+        if (openCards.length > 0) {
+          const parentCard = openCards[openCards.length - 1];
+          findings.push({
+            rule: "no-card-in-card",
+            severity: "warn",
+            line: lineNo,
+            message: `Card inside card. A <${cardMatch[1]}> is nested inside the <${parentCard.type}> opened on L${parentCard.line}. Double borders/shadows add no information \u2014 group with spacing or a <Section> instead.`,
+            snippet: line.trim().slice(0, 120)
+          });
+        }
         openCards.push({ type: cardMatch[1], line: lineNo });
       }
     }
@@ -781,6 +816,15 @@ function lintGeneratedUi(source, options = {}) {
         snippet: line.trim().slice(0, 120)
       });
     }
+    if (TREND_CONTEXT_RE.test(line) && TREND_COLOR_RE.test(line)) {
+      findings.push({
+        rule: "neutral-trend",
+        severity: "warn",
+        line: lineNo,
+        message: "Colored trend indicator. House style: don't tint deltas green/red on every metric \u2014 show a trend only when the change is the point, and keep it muted (text-muted-foreground).",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
     if (BOLD_VALUE_RE.test(line)) {
       findings.push({
         rule: "bold-metric",
@@ -1357,8 +1401,8 @@ var SIDEBAR_WIDTH_COLLAPSED_PX = 52;
 var SIDEBAR_GAP_PX = 12;
 var SIDEBAR_CONTENT_GAP_PX = 8;
 var TOPBAR_GAP_PX = 8;
-var TOPBAR_HEIGHT_PX = 48;
-var PILL_HEIGHT_PX = 40;
+var TOPBAR_HEIGHT_PX = 44;
+var PILL_HEIGHT_PX = 36;
 var SIDEBAR_INSET_PX_EXPANDED = SIDEBAR_GAP_PX + SIDEBAR_WIDTH_PX + SIDEBAR_CONTENT_GAP_PX;
 var SIDEBAR_INSET_PX_COLLAPSED = SIDEBAR_GAP_PX + SIDEBAR_WIDTH_COLLAPSED_PX + SIDEBAR_CONTENT_GAP_PX;
 var px = (n) => `${n / 16}rem`;
@@ -1728,16 +1772,16 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         )
       },
       size: {
-        xs: "h-8 gap-1 rounded-md px-2.5 text-xs",
-        sm: "h-9 gap-1.5 rounded-lg px-3 text-sm",
-        md: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
-        lg: "h-11 gap-2 rounded-lg px-4 text-base",
-        xl: "h-12 gap-2 rounded-lg px-5 text-base",
-        default: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
-        icon: "h-10 w-10 rounded-lg",
-        "icon-xs": "h-8 w-8 rounded-md",
-        "icon-sm": "h-9 w-9 rounded-lg",
-        "icon-lg": "h-11 w-11 rounded-lg"
+        xs: "h-7 gap-1 rounded-md px-2 text-xs",
+        sm: "h-8 gap-1 rounded-md px-2.5 text-xs",
+        md: "h-9 gap-1.5 rounded-lg px-3 text-sm",
+        lg: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
+        xl: "h-11 gap-2 rounded-lg px-4 text-base",
+        default: "h-9 gap-1.5 rounded-lg px-3 text-sm",
+        icon: "h-9 w-9 rounded-lg",
+        "icon-xs": "h-7 w-7 rounded-md",
+        "icon-sm": "h-8 w-8 rounded-md",
+        "icon-lg": "h-10 w-10 rounded-lg"
       },
       shape: {
         pill: "rounded-full!",
@@ -1831,22 +1875,22 @@ var TIMBAL_V2_MODAL_SURFACE = cn(
 );
 var TIMBAL_V2_PRIMARY_GRADIENT = "bg-gradient-to-b from-primary-fill-from to-primary-fill-to";
 var TIMBAL_V2_SIZE_HEIGHT = {
-  xs: "min-h-8 h-8",
-  sm: "min-h-9 h-9",
-  md: "min-h-10 h-10",
-  lg: "min-h-11 h-11"
+  xs: "min-h-7 h-7",
+  sm: "min-h-8 h-8",
+  md: "min-h-9 h-9",
+  lg: "min-h-10 h-10"
 };
 var TIMBAL_V2_SIZE_ICON = {
-  xs: "min-h-8 min-w-8 size-8",
+  xs: "min-h-7 min-w-7 size-7",
   sm: "min-h-8 min-w-8 size-8",
-  md: "min-h-10 min-w-10 size-10",
-  lg: "min-h-11 min-w-11 size-11"
+  md: "min-h-9 min-w-9 size-9",
+  lg: "min-h-10 min-w-10 size-10"
 };
 var TIMBAL_V2_SIZE_LABEL_PX = {
-  xs: "px-3",
-  sm: "px-4",
-  md: "px-5",
-  lg: "px-6"
+  xs: "px-2.5",
+  sm: "px-3",
+  md: "px-3.5",
+  lg: "px-4.5"
 };
 var TIMBAL_V2_FILL = {
   primary: [
@@ -2071,8 +2115,8 @@ var import_react = require("react");
 
 // src/design/control-surface.ts
 var CONTROL_SIZE = {
-  sm: "h-9 px-3",
-  default: "h-10 px-3"
+  sm: "h-8 px-2.5",
+  default: "h-9 px-3"
 };
 var CONTROL_SHAPE = {
   field: "rounded-lg",
@@ -2100,6 +2144,7 @@ var overlayListPanelClass = cn(
   overlaySurfaceClass,
   "overflow-hidden rounded-lg p-0 outline-hidden"
 );
+var overlayItemClass = "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
 
 // src/design/app-classes.ts
 var appPageColumnClass = "mx-auto w-full max-w-[100rem] px-4 md:px-6 lg:px-8";
@@ -2394,30 +2439,36 @@ var Sparkline = ({
   height = 28,
   strokeWidth = 1.5,
   className,
-  ariaLabel = "Trend"
+  ariaLabel = "Trend",
+  interactive = false,
+  labels,
+  formatValue
 }) => {
   const uid = (0, import_react2.useId)();
+  const containerRef = (0, import_react2.useRef)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react2.useState)(null);
   const values = data.map((d) => typeof d === "number" ? d : toNum(d[dataKey]));
   if (values.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn("inline-block", className), style: { width, height } });
   }
-  const pad = strokeWidth + 1;
+  const padX = 0;
+  const padY = strokeWidth + 1;
   const min = Math.min(...values);
   const max = Math.max(...values);
   const range = max - min || 1;
-  const innerW = width - pad * 2;
-  const innerH = height - pad * 2;
+  const innerW = width - padX * 2;
+  const innerH = height - padY * 2;
   const points = values.map((v, i) => ({
-    x: pad + (values.length > 1 ? i / (values.length - 1) * innerW : innerW / 2),
-    y: pad + innerH - (v - min) / range * innerH
+    x: padX + (values.length > 1 ? i / (values.length - 1) * innerW : innerW / 2),
+    y: padY + innerH - (v - min) / range * innerH
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  const svg = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "svg",
     {
       width,
       height,
       viewBox: `0 0 ${width} ${height}`,
-      className: cn("block", className),
+      className: cn("block", interactive ? "h-full w-full" : className),
       role: "img",
       "aria-label": ariaLabel,
       preserveAspectRatio: "none",
@@ -2427,7 +2478,7 @@ var Sparkline = ({
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: monotoneAreaPath(points, height - padY), fill: `url(#${uid}-spark)` })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "path",
@@ -2439,7 +2490,81 @@ var Sparkline = ({
             strokeLinecap: "round",
             strokeLinejoin: "round"
           }
-        )
+        ),
+        interactive && activeIndex != null && points[activeIndex] ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "line",
+            {
+              x1: points[activeIndex].x,
+              x2: points[activeIndex].x,
+              y1: 0,
+              y2: height,
+              stroke: color,
+              strokeWidth: 1,
+              strokeOpacity: 0.3,
+              vectorEffect: "non-scaling-stroke"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "circle",
+            {
+              cx: points[activeIndex].x,
+              cy: points[activeIndex].y,
+              r: 2.75,
+              fill: color,
+              stroke: "var(--background, #fff)",
+              strokeWidth: 1.5,
+              vectorEffect: "non-scaling-stroke"
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+  if (!interactive) return svg;
+  const onMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    if (rect.width === 0) return;
+    const fraction = (e.clientX - rect.left) / rect.width;
+    const index = Math.max(
+      0,
+      Math.min(values.length - 1, Math.round(fraction * (values.length - 1)))
+    );
+    setActiveIndex(index);
+  };
+  const active = activeIndex != null ? points[activeIndex] : null;
+  const formattedValue = activeIndex != null ? formatValue ? formatValue(values[activeIndex], activeIndex) : formatCompact(values[activeIndex]) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "span",
+    {
+      ref: containerRef,
+      className: cn("relative block touch-none", className),
+      style: { width: "100%", height: "100%" },
+      onPointerMove: onMove,
+      onPointerLeave: () => setActiveIndex(null),
+      children: [
+        svg,
+        active ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute z-30 -translate-x-1/2 -translate-y-full whitespace-nowrap",
+              "rounded-xl border px-3 py-2 text-[11px] font-medium leading-none tabular-nums shadow-[0_12px_40px_-10px_rgba(0,0,0,0.55)]",
+              "border-white/10 bg-gradient-to-b from-neutral-800 to-neutral-950 text-white",
+              "dark:border-black/10 dark:from-white dark:to-neutral-100 dark:text-neutral-900"
+            ),
+            style: {
+              left: `${active.x / width * 100}%`,
+              top: `${active.y / height * 100}%`,
+              marginTop: -8
+            },
+            children: [
+              labels?.[activeIndex] != null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mr-1.5 text-neutral-300 dark:text-neutral-500", children: labels[activeIndex] }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: formattedValue })
+            ]
+          }
+        ) : null
       ]
     }
   );
@@ -2457,6 +2582,15 @@ var inlineTrendToneClass = {
   down: "text-rose-500/90 dark:text-rose-400/95 font-medium",
   neutral: "text-muted-foreground/80"
 };
+var sparklineToneColor = {
+  up: "var(--primary, #3b82f6)",
+  down: "var(--destructive, #f43f5e)",
+  neutral: "var(--muted-foreground, #64748b)"
+};
+var sparklineBandBleed = {
+  default: "-mx-4 -mb-3 h-10",
+  compact: "-mx-3 -mb-2 h-8"
+};
 var activeToneClass = {
   default: "bg-foreground dark:bg-white",
   primary: "bg-primary",
@@ -2486,8 +2620,10 @@ var MetricTile = ({
   ariaLabel,
   className
 }) => {
+  const density = useAppDensity();
   const metricTileBaseClass = useAppDensityClass("metricTile");
   const hasSparkline = Boolean(sparkline || sparklineData);
+  const bandBleed = sparklineBandBleed[density === "compact" ? "compact" : "default"];
   const content = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
     active ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "span",
@@ -2499,17 +2635,6 @@ var MetricTile = ({
         )
       }
     ) : null,
-    hasSparkline ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute inset-x-0 bottom-0.5 h-9 w-full overflow-hidden pointer-events-none z-0 opacity-45 dark:opacity-35 select-none", children: sparkline ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      Sparkline,
-      {
-        data: sparklineData,
-        width: 160,
-        height: 36,
-        className: "w-full h-full",
-        color: trendTone === "up" ? "var(--primary, #3b82f6)" : trendTone === "down" ? "var(--destructive, #f43f5e)" : "var(--muted-foreground, #64748b)",
-        ...sparklineConfig
-      }
-    ) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative z-10 flex flex-col gap-1 w-full text-left", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-xs font-semibold text-muted-foreground/80 tracking-tight", children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex items-center gap-2", children: [
@@ -2528,7 +2653,28 @@ var MetricTile = ({
           }
         ) : null
       ] })
-    ] })
+    ] }),
+    hasSparkline ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        className: cn(
+          "relative z-10 mt-2",
+          bandBleed
+        ),
+        children: sparkline ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Sparkline,
+          {
+            data: sparklineData,
+            width: 160,
+            height: 40,
+            interactive: true,
+            className: "h-full w-full opacity-90",
+            color: sparklineToneColor[trendTone],
+            ...sparklineConfig
+          }
+        )
+      }
+    ) : null
   ] });
   const divider = showDivider ? metricCellDividerClass : void 0;
   if (onSelect) {
@@ -3277,7 +3423,7 @@ function DialogContent({
         "data-slot": "dialog-content",
         className: cn(
           TIMBAL_V2_MODAL_SURFACE,
-          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[70] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl p-6 duration-200 outline-none sm:max-w-lg",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[70] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl p-5 duration-200 outline-none sm:max-w-lg",
           className
         ),
         ...props,
@@ -3335,9 +3481,9 @@ function isBrandedVariant(variant) {
   return variant === "secondary" || variant === "primary" || variant === "chart";
 }
 var AVATAR_SIZE_CLASS = {
-  default: "size-8",
-  sm: "size-6",
-  lg: "size-10"
+  default: "size-7",
+  sm: "size-5",
+  lg: "size-9"
 };
 function Avatar({
   className,
@@ -5274,7 +5420,7 @@ var BadgeNode = ({ node }) => {
     "span",
     {
       className: cn(
-        "aui-ui-badge inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
+        "aui-ui-badge inline-flex w-fit shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium",
         BADGE_TONE[node.tone ?? "default"],
         node.className
       ),
@@ -7935,7 +8081,7 @@ var StatusBadge = ({
     "span",
     {
       className: cn(
-        "aui-app-status-badge inline-flex items-center gap-1.5 rounded-full px-2 py-0.5",
+        "aui-app-status-badge inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5",
         "text-xs font-medium leading-none ring-1 ring-inset",
         statusBadgeToneClass[tone],
         className
@@ -8394,7 +8540,7 @@ function CopyButton({
         "inline-flex items-center justify-center gap-1.5 rounded-md text-sm font-medium text-muted-foreground transition-colors",
         "hover:bg-accent hover:text-foreground data-[copied=true]:text-emerald-600 dark:data-[copied=true]:text-emerald-400",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15",
-        children ? "h-8 px-2" : "size-8",
+        children ? "h-7 px-1.5" : "size-7",
         className
       ),
       ...props,
@@ -8925,10 +9071,10 @@ var pillSegmentedTrackFlushClass = cn(
   "h-[var(--studio-chrome-pill-height)] items-center gap-0.5 overflow-visible p-0.5"
 );
 var pillSegmentedSegmentClass = cn(
-  "relative flex items-center gap-1.5 rounded-full px-4 py-1.5 text-xs font-normal transition-colors"
+  "relative flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-normal transition-colors"
 );
 var pillSegmentedFlushSegmentClass = cn(
-  "relative box-border inline-flex h-9 min-h-9 items-center justify-center gap-1.5 rounded-full px-3.5 py-0",
+  "relative box-border inline-flex h-8 min-h-8 items-center justify-center gap-1.5 rounded-full px-3 py-0",
   "text-sm font-normal leading-tight transition-colors"
 );
 var pillSegmentedActiveIndicatorClass = cn(
@@ -9328,7 +9474,7 @@ var FilterField = ({
 
 // src/app/data/FilterDropdown.tsx
 var import_react53 = require("react");
-var import_lucide_react17 = require("lucide-react");
+var import_lucide_react18 = require("lucide-react");
 
 // src/ui/checkbox.tsx
 var import_radix_ui6 = require("radix-ui");
@@ -9361,18 +9507,142 @@ function Checkbox({
   );
 }
 
-// src/ui/popover.tsx
+// src/ui/select.tsx
 var import_radix_ui7 = require("radix-ui");
+var import_lucide_react17 = require("lucide-react");
 var import_jsx_runtime86 = require("react/jsx-runtime");
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_radix_ui7.Select.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_radix_ui7.Select.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+    import_radix_ui7.Select.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        controlClass({ size }),
+        "flex w-fit items-center justify-between gap-2 whitespace-nowrap *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_radix_ui7.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react17.ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_radix_ui7.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+    import_radix_ui7.Select.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        overlayListPanelClass,
+        "relative max-h-[var(--radix-select-content-available-height)] min-w-[8rem] origin-[var(--radix-select-content-transform-origin)] overflow-x-hidden overflow-y-auto",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          import_radix_ui7.Select.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+    import_radix_ui7.Select.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        overlayItemClass,
+        "w-full py-1 pr-8 pl-2 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_radix_ui7.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react17.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_radix_ui7.Select.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    import_radix_ui7.Select.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react17.ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    import_radix_ui7.Select.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react17.ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+
+// src/ui/popover.tsx
+var import_radix_ui8 = require("radix-ui");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_radix_ui7.Popover.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_radix_ui8.Popover.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_radix_ui7.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_radix_ui8.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -9381,8 +9651,8 @@ function PopoverContent({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_radix_ui7.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-    import_radix_ui7.Popover.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_radix_ui8.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    import_radix_ui8.Popover.Content,
     {
       "data-slot": "popover-content",
       "data-variant": variant,
@@ -9394,7 +9664,7 @@ function PopoverContent({
           "min-w-[8rem] origin-[var(--radix-popover-content-transform-origin)]"
         ) : cn(
           overlaySurfaceClass,
-          "w-72 origin-[var(--radix-popover-content-transform-origin)] rounded-xl p-4 outline-hidden"
+          "w-72 origin-[var(--radix-popover-content-transform-origin)] rounded-xl p-3 outline-hidden"
         ),
         className
       ),
@@ -9404,499 +9674,471 @@ function PopoverContent({
 }
 
 // src/app/data/FilterDropdown.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
-var DEFAULT_CONTACTS = [
-  { id: "1", name: "Pedro Olivares Sanchez", email: "polivares@timbal.ai", initials: "PE" },
-  { id: "2", name: "John Doe", email: "john@example.com", initials: "JD" },
-  { id: "3", name: "Sarah Smith", email: "sarah@example.com", initials: "SS" }
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var DEFAULT_PRESETS = [
+  { id: "last_7_days", label: "Last 7 days" },
+  { id: "last_30_days", label: "Last 30 days" },
+  { id: "last_90_days", label: "Last 90 days" },
+  { id: "this_month", label: "This month" },
+  { id: "this_year", label: "This year" },
+  { id: "custom", label: "Custom range" }
 ];
-var OPERATORS = [
-  { id: "greater_than", label: "Greater than..." },
-  { id: "less_than", label: "Less than..." },
-  { id: "equals", label: "Equals..." }
+var DEFAULT_OPERATORS = [
+  { id: "gt", label: "Greater than" },
+  { id: "lt", label: "Less than" },
+  { id: "eq", label: "Equals" }
 ];
+function asArray(v) {
+  return Array.isArray(v) ? v : [];
+}
+function asText(v) {
+  return typeof v === "string" ? v : "";
+}
+function asDate(v) {
+  return v && !Array.isArray(v) && typeof v === "object" && "preset" in v ? v : { preset: null };
+}
+function asNumeric(v) {
+  return v && !Array.isArray(v) && typeof v === "object" && "operator" in v ? v : { operator: "gt", value: "" };
+}
+var OPERATOR_SYMBOL = {
+  gt: ">",
+  lt: "<",
+  eq: "="
+};
 function FilterDropdown({
-  filters,
-  onFiltersChange,
-  initialFilters,
-  contacts = DEFAULT_CONTACTS,
+  fields,
+  value,
+  defaultValue,
+  onChange,
+  label = "Filter",
+  align = "start",
+  showActiveChips = true,
   className
 }) {
   const [isOpen, setIsOpen] = (0, import_react53.useState)(false);
-  const [activeMenu, setActiveMenu] = (0, import_react53.useState)("contact");
+  const [activeId, setActiveId] = (0, import_react53.useState)(fields[0]?.id ?? null);
   const [isMobile, setIsMobile] = (0, import_react53.useState)(false);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = (0, import_react53.useState)(defaultValue ?? {});
+  const values = isControlled ? value : internal;
   (0, import_react53.useEffect)(() => {
     const checkMobile = () => setIsMobile(window.innerWidth < 768);
     checkMobile();
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
-  const [selectedContacts, setSelectedContacts] = (0, import_react53.useState)(
-    filters?.contacts ?? initialFilters?.contacts ?? []
-  );
-  const [walletInput, setWalletInput] = (0, import_react53.useState)(filters?.walletAddress ?? initialFilters?.walletAddress ?? "");
-  const [appliedWallet, setAppliedWallet] = (0, import_react53.useState)(filters?.walletAddress ?? initialFilters?.walletAddress ?? "");
-  const [selectedDatePreset, setSelectedDatePreset] = (0, import_react53.useState)(
-    filters?.lastInvoiceDate ?? initialFilters?.lastInvoiceDate ?? null
-  );
-  const [customDateFrom, setCustomDateFrom] = (0, import_react53.useState)(
-    filters?.customDateRange?.from ?? initialFilters?.customDateRange?.from ?? ""
-  );
-  const [customDateTo, setCustomDateTo] = (0, import_react53.useState)(
-    filters?.customDateRange?.to ?? initialFilters?.customDateRange?.to ?? ""
-  );
-  const [ltvOperator, setLtvOperator] = (0, import_react53.useState)(
-    filters?.lifetimeValue?.operator ?? initialFilters?.lifetimeValue?.operator ?? "greater_than"
-  );
-  const [ltvValue, setLtvValue] = (0, import_react53.useState)(filters?.lifetimeValue?.value ?? initialFilters?.lifetimeValue?.value ?? "");
-  const [isLtvOperatorOpen, setLtvOperatorOpen] = (0, import_react53.useState)(false);
-  const [outstandingOperator, setOutstandingOperator] = (0, import_react53.useState)(
-    filters?.outstanding?.operator ?? initialFilters?.outstanding?.operator ?? "greater_than"
-  );
-  const [outstandingValue, setOutstandingValue] = (0, import_react53.useState)(filters?.outstanding?.value ?? initialFilters?.outstanding?.value ?? "");
-  const [isOutstandingOperatorOpen, setOutstandingOperatorOpen] = (0, import_react53.useState)(false);
   (0, import_react53.useEffect)(() => {
-    if (filters) {
-      setSelectedContacts(filters.contacts ?? []);
-      setWalletInput(filters.walletAddress ?? "");
-      setAppliedWallet(filters.walletAddress ?? "");
-      setSelectedDatePreset(filters.lastInvoiceDate ?? null);
-      setCustomDateFrom(filters.customDateRange?.from ?? "");
-      setCustomDateTo(filters.customDateRange?.to ?? "");
-      setLtvOperator(filters.lifetimeValue?.operator ?? "greater_than");
-      setLtvValue(filters.lifetimeValue?.value ?? "");
-      setOutstandingOperator(filters.outstanding?.operator ?? "greater_than");
-      setOutstandingValue(filters.outstanding?.value ?? "");
-    }
-  }, [filters]);
-  const [contactSearch, setContactSearch] = (0, import_react53.useState)("");
-  const [walletSearch, setWalletSearch] = (0, import_react53.useState)("");
-  const refDate = (0, import_react53.useMemo)(() => new Date(2026, 5, 26), []);
-  const presets = (0, import_react53.useMemo)(() => {
-    const year = refDate.getFullYear();
-    const month = refDate.getMonth();
-    const lastMonthDate = new Date(year, month - 1, 1);
-    const lastMonthLabel = lastMonthDate.toLocaleDateString("en-US", { month: "short", year: "numeric" });
-    const thisMonthLabel = refDate.toLocaleDateString("en-US", { month: "short", year: "numeric" });
-    const thisQuarter = Math.floor(month / 3) + 1;
-    const thisQuarterLabel = `Q${thisQuarter} ${year}`;
-    const lastQuarter = thisQuarter === 1 ? 4 : thisQuarter - 1;
-    const lastQuarterYear = thisQuarter === 1 ? year - 1 : year;
-    const lastQuarterLabel = `Q${lastQuarter} ${lastQuarterYear}`;
-    const thisYearLabel = `${year}`;
-    const last30 = new Date(refDate);
-    last30.setDate(refDate.getDate() - 30);
-    const formatDate = (d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
-    const last30Label = `${formatDate(last30)} - ${formatDate(refDate)}`;
-    const last90 = new Date(refDate);
-    last90.setDate(refDate.getDate() - 90);
-    const last90Label = `${formatDate(last90)} - ${formatDate(refDate)}`;
-    return [
-      { id: "last_month", label: "Last month", date: lastMonthLabel },
-      { id: "this_month", label: "This month", date: thisMonthLabel },
-      { id: "this_quarter", label: "This quarter", date: thisQuarterLabel },
-      { id: "last_quarter", label: "Last quarter", date: lastQuarterLabel },
-      { id: "this_year", label: "This year", date: thisYearLabel },
-      { id: "last_30_days", label: "Last 30 days", date: last30Label },
-      { id: "last_90_days", label: "Last 90 days", date: last90Label },
-      { id: "custom", label: "Custom range", date: "" }
-    ];
-  }, [refDate]);
-  const filteredContacts = (0, import_react53.useMemo)(() => {
-    if (!contactSearch) return contacts;
-    const query = contactSearch.toLowerCase();
-    return contacts.filter(
-      (c) => c.name.toLowerCase().includes(query) || c.email.toLowerCase().includes(query)
-    );
-  }, [contacts, contactSearch]);
-  const handleContactToggle = (contactName) => {
-    const next = selectedContacts.includes(contactName) ? selectedContacts.filter((name) => name !== contactName) : [...selectedContacts, contactName];
-    setSelectedContacts(next);
-    notifyChanges({ contacts: next });
-    setIsOpen(false);
-  };
-  const handleWalletApply = () => {
-    setAppliedWallet(walletInput);
-    notifyChanges({ walletAddress: walletInput });
-    setIsOpen(false);
+    if (!fields.some((f) => f.id === activeId)) {
+      setActiveId(fields[0]?.id ?? null);
+    }
+  }, [fields, activeId]);
+  const commit = (id, next) => {
+    const merged = { ...values, [id]: next };
+    if (!isControlled) setInternal(merged);
+    onChange?.(merged);
   };
-  const handleWalletClear = () => {
-    setWalletInput("");
-    setAppliedWallet("");
-    notifyChanges({ walletAddress: "" });
-    setIsOpen(false);
+  const clearAll = () => {
+    if (!isControlled) setInternal({});
+    onChange?.({});
   };
-  const handleDatePresetSelect = (presetId) => {
-    setSelectedDatePreset(presetId);
-    if (presetId !== "custom") {
-      notifyChanges({ lastInvoiceDate: presetId, customDateRange: void 0 });
-      setIsOpen(false);
+  const activeIdx = fields.findIndex((f) => f.id === activeId);
+  const activeField = activeIdx >= 0 ? fields[activeIdx] : void 0;
+  const chips = [];
+  for (const field of fields) {
+    const v = values[field.id];
+    if (field.type === "multiselect") {
+      const selected = asArray(v);
+      for (const optionValue of selected) {
+        const opt = field.options?.find((o) => o.value === optionValue);
+        chips.push({
+          id: `${field.id}:${optionValue}`,
+          label: `${field.label}: ${opt?.label ?? optionValue}`,
+          remove: () => commit(field.id, selected.filter((x) => x !== optionValue))
+        });
+      }
+    } else if (field.type === "text") {
+      const text = asText(v);
+      if (text) {
+        chips.push({
+          id: field.id,
+          label: `${field.label}: ${text}`,
+          remove: () => commit(field.id, "")
+        });
+      }
+    } else if (field.type === "numeric") {
+      const n = asNumeric(v);
+      if (n.value) {
+        chips.push({
+          id: field.id,
+          label: `${field.label} ${OPERATOR_SYMBOL[n.operator]} ${n.value}`,
+          remove: () => commit(field.id, null)
+        });
+      }
+    } else if (field.type === "daterange") {
+      const d = asDate(v);
+      if (d.preset) {
+        const presetLabel = d.preset === "custom" ? `${d.from || "\u2026"} \u2013 ${d.to || "\u2026"}` : (field.presets ?? DEFAULT_PRESETS).find((p) => p.id === d.preset)?.label ?? d.preset;
+        chips.push({
+          id: field.id,
+          label: `${field.label}: ${presetLabel}`,
+          remove: () => commit(field.id, { preset: null })
+        });
+      }
     }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "border-dashed font-medium text-muted-foreground hover:text-foreground",
+          iconLeading: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_lucide_react18.ListFilterIcon, { className: "size-4" }),
+          children: label
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        PopoverContent,
+        {
+          variant: "list",
+          align,
+          className: "overflow-visible border-none bg-transparent p-0 shadow-none max-w-[calc(100vw-32px)] md:max-w-none",
+          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "relative flex flex-col md:flex-row items-stretch md:items-start w-[calc(100vw-32px)] max-w-[340px] md:w-auto md:max-w-none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "w-full md:w-56 rounded-xl border border-border bg-popover p-1.5 shadow-lg", children: fields.map((field) => {
+              const isActive = activeId === field.id;
+              return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm text-left transition-colors outline-none",
+                    isActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                  ),
+                  onMouseEnter: () => !isMobile && setActiveId(field.id),
+                  onClick: () => setActiveId(field.id),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("span", { className: "flex items-center gap-2", children: [
+                      field.icon,
+                      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { children: field.label })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_lucide_react18.ChevronRightIcon, { className: "size-4 text-muted-foreground/50" })
+                  ]
+                },
+                field.id
+              );
+            }) }),
+            activeField && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              "div",
+              {
+                className: "relative left-0 mt-2 w-full md:absolute md:left-[calc(100%+6px)] md:w-80 rounded-xl border border-border bg-popover p-3 shadow-lg transition-all duration-150 md:mt-0",
+                style: isMobile ? {} : { top: `${activeIdx * 36 + 6}px` },
+                children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+                  FilterFieldControl,
+                  {
+                    field: activeField,
+                    value: values[activeField.id],
+                    onChange: (next) => commit(activeField.id, next),
+                    onClose: () => setIsOpen(false)
+                  }
+                )
+              }
+            )
+          ] })
+        }
+      )
+    ] }),
+    showActiveChips && chips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(FilterChip, { label: chip.label, onRemove: chip.remove }, chip.id)),
+    showActiveChips && chips.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: clearAll,
+        className: "rounded-full px-3 py-1 text-sm font-medium text-muted-foreground outline-none transition-colors hover:text-foreground",
+        children: "Clear all"
+      }
+    )
+  ] });
+}
+function FilterChip({ label, onRemove }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("span", { className: "inline-flex h-9 items-center gap-1.5 rounded-full border border-border bg-muted/40 pl-3 pr-1.5 text-sm font-medium text-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "truncate", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onRemove,
+        "aria-label": `Remove ${label}`,
+        className: "flex size-5 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground",
+        children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_lucide_react18.XIcon, { className: "size-3.5" })
+      }
+    )
+  ] });
+}
+function FilterFieldControl({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  switch (field.type) {
+    case "multiselect":
+      return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(MultiSelectControl, { field, value: asArray(value), onChange });
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(TextControl, { field, value: asText(value), onChange, onClose });
+    case "daterange":
+      return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(DateRangeControl, { field, value: asDate(value), onChange, onClose });
+    case "numeric":
+      return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(NumericControl, { field, value: asNumeric(value), onChange, onClose });
+    default:
+      return null;
+  }
+}
+function MultiSelectControl({
+  field,
+  value,
+  onChange
+}) {
+  const options = field.options ?? [];
+  const [search, setSearch] = (0, import_react53.useState)("");
+  const searchable = field.searchable ?? options.length > 8;
+  const filtered = (0, import_react53.useMemo)(() => {
+    if (!search) return options;
+    const q = search.toLowerCase();
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || o.hint?.toLowerCase().includes(q)
+    );
+  }, [options, search]);
+  const toggle = (optionValue) => {
+    onChange(
+      value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
+    );
   };
-  const handleCustomDateApply = () => {
-    notifyChanges({
-      lastInvoiceDate: "custom",
-      customDateRange: { from: customDateFrom, to: customDateTo }
-    });
-    setIsOpen(false);
-  };
-  const handleLtvApply = () => {
-    notifyChanges({
-      lifetimeValue: ltvValue ? { operator: ltvOperator, value: ltvValue } : null
-    });
-    setIsOpen(false);
-  };
-  const handleLtvClear = () => {
-    setLtvValue("");
-    notifyChanges({ lifetimeValue: null });
-    setIsOpen(false);
-  };
-  const handleOutstandingApply = () => {
-    notifyChanges({
-      outstanding: outstandingValue ? { operator: outstandingOperator, value: outstandingValue } : null
-    });
-    setIsOpen(false);
-  };
-  const handleOutstandingClear = () => {
-    setOutstandingValue("");
-    notifyChanges({ outstanding: null });
-    setIsOpen(false);
-  };
-  const notifyChanges = (overrides) => {
-    const current = {
-      contacts: selectedContacts,
-      walletAddress: appliedWallet,
-      lastInvoiceDate: selectedDatePreset,
-      customDateRange: customDateFrom || customDateTo ? { from: customDateFrom, to: customDateTo } : void 0,
-      lifetimeValue: ltvValue ? { operator: ltvOperator, value: ltvValue } : null,
-      outstanding: outstandingValue ? { operator: outstandingOperator, value: outstandingValue } : null,
-      ...overrides
-    };
-    onFiltersChange?.(current);
-  };
-  const menuItems = [
-    { id: "contact", label: "Contact", icon: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react17.UserIcon, { className: "size-4" }) },
-    { id: "wallet", label: "Wallet address", icon: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react17.WalletIcon, { className: "size-4" }) },
-    { id: "date", label: "Last invoice date", icon: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react17.CalendarIcon, { className: "size-4" }) },
-    { id: "ltv", label: "Lifetime value", icon: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react17.TrendingUpIcon, { className: "size-4" }) },
-    { id: "outstanding", label: "Outstanding", icon: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react17.CircleDollarSignIcon, { className: "size-4" }) }
-  ];
-  const activeIdx = menuItems.findIndex((item) => item.id === activeMenu);
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: cn("inline-block", className), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-      Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
+    searchable && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      SearchInput,
       {
-        variant: "outline",
-        size: "sm",
-        shape: "pill",
-        className: "border-dashed font-medium text-muted-foreground hover:text-foreground",
-        iconLeading: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react17.ListFilterIcon, { className: "size-4" }),
-        children: "Filter"
+        placeholder: field.searchPlaceholder ?? "Search\u2026",
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        className: "w-full min-w-0"
       }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-      PopoverContent,
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "flex max-h-48 flex-col gap-1 overflow-y-auto pr-1", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "py-4 text-center text-xs text-muted-foreground", children: "No options found" }) : filtered.map((option) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+      "label",
       {
-        variant: "list",
-        align: "start",
-        className: "overflow-visible border-none bg-transparent p-0 shadow-none max-w-[calc(100vw-32px)] md:max-w-none",
-        children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "relative flex flex-col md:flex-row items-stretch md:items-start w-[calc(100vw-32px)] max-w-[340px] md:w-auto md:max-w-none", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "w-full md:w-56 rounded-xl border border-border bg-popover p-1.5 shadow-lg", children: menuItems.map((item) => {
-            const isActive = activeMenu === item.id;
-            return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
-              "button",
-              {
-                type: "button",
-                className: cn(
-                  "flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm text-left transition-colors outline-none",
-                  isActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
-                ),
-                onMouseEnter: () => !isMobile && setActiveMenu(item.id),
-                onClick: () => setActiveMenu(item.id),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "flex items-center gap-2", children: [
-                    item.icon,
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: item.label })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react17.ChevronRightIcon, { className: "size-4 text-muted-foreground/50" })
-                ]
-              },
-              item.id
-            );
-          }) }),
-          activeMenu && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
-            "div",
+        className: "flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 transition-colors hover:bg-muted/50",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            Checkbox,
             {
-              className: "relative left-0 mt-2 w-full md:absolute md:left-[calc(100%+6px)] md:w-80 rounded-xl border border-border bg-popover p-3 shadow-lg transition-all duration-150 md:mt-0",
-              style: isMobile ? {} : { top: `${activeIdx * 36 + 6}px` },
-              children: [
-                activeMenu === "contact" && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "relative flex items-center", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react17.SearchIcon, { className: "absolute left-2.5 size-4 text-muted-foreground/60" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                      "input",
-                      {
-                        type: "text",
-                        placeholder: "Search by name or email...",
-                        value: contactSearch,
-                        onChange: (e) => setContactSearch(e.target.value),
-                        className: "w-full rounded-lg border border-border bg-background py-1.5 pl-8 pr-3 text-sm outline-none placeholder:text-muted-foreground/60 focus:border-border"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "max-h-48 overflow-y-auto flex flex-col gap-1 pr-1", children: filteredContacts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: "py-4 text-center text-xs text-muted-foreground", children: "No contacts found" }) : filteredContacts.map((contact) => {
-                    const isChecked = selectedContacts.includes(contact.name);
-                    return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
-                      "label",
-                      {
-                        className: "flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 hover:bg-muted/50 transition-colors",
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                            Checkbox,
-                            {
-                              checked: isChecked,
-                              onCheckedChange: () => handleContactToggle(contact.name)
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Avatar, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(AvatarFallback, { children: contact.initials }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "text-sm font-medium text-foreground", children: contact.name })
-                        ]
-                      },
-                      contact.id
-                    );
-                  }) })
-                ] }),
-                activeMenu === "wallet" && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "relative flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                    "input",
-                    {
-                      type: "text",
-                      placeholder: "Search by wallet...",
-                      value: walletInput,
-                      onChange: (e) => setWalletInput(e.target.value),
-                      className: "w-full rounded-lg border border-border bg-background px-3 py-1.5 text-sm outline-none placeholder:text-muted-foreground/60"
-                    }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex items-center justify-end gap-2 pt-1 border-t border-border/40", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                      Button,
-                      {
-                        variant: "ghost",
-                        size: "sm",
-                        onClick: handleWalletClear,
-                        className: "text-muted-foreground hover:text-foreground h-8 px-3",
-                        children: "Clear"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                      Button,
-                      {
-                        color: "primary",
-                        size: "sm",
-                        onClick: handleWalletApply,
-                        className: "h-8 px-3",
-                        children: "Apply"
-                      }
-                    )
-                  ] })
-                ] }),
-                activeMenu === "date" && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                  presets.map((preset) => {
-                    const isSelected = selectedDatePreset === preset.id;
-                    return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => handleDatePresetSelect(preset.id),
-                        className: cn(
-                          "flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-sm text-left transition-colors outline-none",
-                          isSelected ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
-                        ),
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: preset.label }),
-                          preset.date && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "text-xs text-muted-foreground/70", children: preset.date })
-                        ]
-                      },
-                      preset.id
-                    );
-                  }),
-                  selectedDatePreset === "custom" && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex flex-col gap-2 mt-2 pt-2 border-t border-border/40", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                        "input",
-                        {
-                          type: "date",
-                          value: customDateFrom,
-                          onChange: (e) => setCustomDateFrom(e.target.value),
-                          className: "w-full rounded-lg border border-border bg-background px-2 py-1 text-xs outline-none"
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "text-xs text-muted-foreground", children: "to" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                        "input",
-                        {
-                          type: "date",
-                          value: customDateTo,
-                          onChange: (e) => setCustomDateTo(e.target.value),
-                          className: "w-full rounded-lg border border-border bg-background px-2 py-1 text-xs outline-none"
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "flex justify-end gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                      Button,
-                      {
-                        color: "primary",
-                        size: "sm",
-                        onClick: handleCustomDateApply,
-                        className: "h-7 text-xs px-2.5",
-                        children: "Apply"
-                      }
-                    ) })
-                  ] })
-                ] }),
-                activeMenu === "ltv" && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "relative shrink-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => setLtvOperatorOpen(!isLtvOperatorOpen),
-                          className: "flex h-9 items-center gap-1 rounded-lg border border-border bg-background px-2.5 text-xs font-normal text-muted-foreground hover:bg-muted/50 hover:text-foreground outline-none whitespace-nowrap",
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: OPERATORS.find((op) => op.id === ltvOperator)?.label.replace("...", "") }),
-                            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react17.ChevronDownIcon, { className: "size-3" })
-                          ]
-                        }
-                      ),
-                      isLtvOperatorOpen && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "absolute left-0 top-full z-50 mt-1 w-32 rounded-lg border border-border bg-popover p-1 shadow-md", children: OPERATORS.map((op) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            setLtvOperator(op.id);
-                            setLtvOperatorOpen(false);
-                          },
-                          className: "w-full rounded-md px-2 py-1 text-left text-xs text-foreground hover:bg-muted outline-none",
-                          children: op.label
-                        },
-                        op.id
-                      )) })
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                      "input",
-                      {
-                        type: "text",
-                        placeholder: "0.00",
-                        value: ltvValue,
-                        onChange: (e) => setLtvValue(e.target.value),
-                        className: "h-9 flex-1 min-w-0 rounded-lg border border-border bg-background px-3 py-1 text-sm outline-none placeholder:text-muted-foreground/60"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex items-center justify-end gap-2 pt-1 border-t border-border/40", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                      Button,
-                      {
-                        variant: "ghost",
-                        size: "sm",
-                        onClick: handleLtvClear,
-                        className: "text-muted-foreground hover:text-foreground h-8 px-3",
-                        children: "Clear"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                      Button,
-                      {
-                        color: "primary",
-                        size: "sm",
-                        onClick: handleLtvApply,
-                        className: "h-8 px-3",
-                        children: "Apply"
-                      }
-                    )
-                  ] })
-                ] }),
-                activeMenu === "outstanding" && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "relative shrink-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => setOutstandingOperatorOpen(!isOutstandingOperatorOpen),
-                          className: "flex h-9 items-center gap-1 rounded-lg border border-border bg-background px-2.5 text-xs font-normal text-muted-foreground hover:bg-muted/50 hover:text-foreground outline-none whitespace-nowrap",
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: OPERATORS.find((op) => op.id === outstandingOperator)?.label.replace("...", "") }),
-                            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react17.ChevronDownIcon, { className: "size-3" })
-                          ]
-                        }
-                      ),
-                      isOutstandingOperatorOpen && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "absolute left-0 top-full z-50 mt-1 w-32 rounded-lg border border-border bg-popover p-1 shadow-md", children: OPERATORS.map((op) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            setOutstandingOperator(op.id);
-                            setOutstandingOperatorOpen(false);
-                          },
-                          className: "w-full rounded-md px-2 py-1 text-left text-xs text-foreground hover:bg-muted outline-none",
-                          children: op.label
-                        },
-                        op.id
-                      )) })
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                      "input",
-                      {
-                        type: "text",
-                        placeholder: "0.00",
-                        value: outstandingValue,
-                        onChange: (e) => setOutstandingValue(e.target.value),
-                        className: "h-9 flex-1 min-w-0 rounded-lg border border-border bg-background px-3 py-1 text-sm outline-none placeholder:text-muted-foreground/60"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex items-center justify-end gap-2 pt-1 border-t border-border/40", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                      Button,
-                      {
-                        variant: "ghost",
-                        size: "sm",
-                        onClick: handleOutstandingClear,
-                        className: "text-muted-foreground hover:text-foreground h-8 px-3",
-                        children: "Clear"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-                      Button,
-                      {
-                        color: "primary",
-                        size: "sm",
-                        onClick: handleOutstandingApply,
-                        className: "h-8 px-3",
-                        children: "Apply"
-                      }
-                    )
-                  ] })
-                ] })
-              ]
+              checked: value.includes(option.value),
+              onCheckedChange: () => toggle(option.value)
             }
-          )
-        ] })
+          ),
+          option.icon,
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("span", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "truncate text-sm font-medium text-foreground", children: option.label }),
+            option.hint && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: option.hint })
+          ] })
+        ]
+      },
+      option.value
+    )) })
+  ] });
+}
+function TextControl({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  const [draft, setDraft] = (0, import_react53.useState)(value);
+  (0, import_react53.useEffect)(() => setDraft(value), [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      "input",
+      {
+        type: "text",
+        placeholder: field.placeholder ?? "Type a value\u2026",
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            onChange(draft);
+            onClose();
+          }
+        },
+        className: controlClass({ size: "sm" }, "w-full")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      ApplyClear,
+      {
+        onClear: () => {
+          setDraft("");
+          onChange("");
+          onClose();
+        },
+        onApply: () => {
+          onChange(draft);
+          onClose();
+        }
       }
     )
-  ] }) });
+  ] });
+}
+function DateRangeControl({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  const presets = field.presets ?? DEFAULT_PRESETS;
+  const [from, setFrom] = (0, import_react53.useState)(value.from ?? "");
+  const [to, setTo] = (0, import_react53.useState)(value.to ?? "");
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex flex-col gap-1", children: [
+    presets.map((preset) => {
+      const isSelected = value.preset === preset.id;
+      return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if (preset.id === "custom") {
+              onChange({ preset: "custom", from, to });
+            } else {
+              onChange({ preset: preset.id });
+              onClose();
+            }
+          },
+          className: cn(
+            "flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors outline-none",
+            isSelected ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { children: preset.label }),
+            preset.hint && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "text-xs text-muted-foreground/70", children: preset.hint })
+          ]
+        },
+        preset.id
+      );
+    }),
+    value.preset === "custom" && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "mt-2 flex flex-col gap-2 border-t border-border/40 pt-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+          "input",
+          {
+            type: "date",
+            value: from,
+            onChange: (e) => setFrom(e.target.value),
+            className: controlClass({ size: "sm" }, "w-full text-xs")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "text-xs text-muted-foreground", children: "to" }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+          "input",
+          {
+            type: "date",
+            value: to,
+            onChange: (e) => setTo(e.target.value),
+            className: controlClass({ size: "sm" }, "w-full text-xs")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        Button,
+        {
+          color: "primary",
+          size: "sm",
+          className: "h-8 px-3",
+          onClick: () => {
+            onChange({ preset: "custom", from, to });
+            onClose();
+          },
+          children: "Apply"
+        }
+      ) })
+    ] })
+  ] });
+}
+function NumericControl({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  const operators = field.operators ?? DEFAULT_OPERATORS;
+  const [operator, setOperator] = (0, import_react53.useState)(value.operator);
+  const [draft, setDraft] = (0, import_react53.useState)(value.value);
+  (0, import_react53.useEffect)(() => {
+    setOperator(value.operator);
+    setDraft(value.value);
+  }, [value.operator, value.value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Select, { value: operator, onValueChange: (v) => setOperator(v), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(SelectTrigger, { size: "sm", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(SelectValue, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(SelectContent, { children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(SelectItem, { value: op.id, children: op.label }, op.id)) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        "input",
+        {
+          type: "text",
+          inputMode: "decimal",
+          placeholder: field.placeholder ?? "0.00",
+          value: draft,
+          onChange: (e) => setDraft(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              onChange(draft ? { operator, value: draft } : null);
+              onClose();
+            }
+          },
+          className: controlClass({ size: "sm" }, "min-w-0 flex-1")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      ApplyClear,
+      {
+        onClear: () => {
+          setDraft("");
+          onChange(null);
+          onClose();
+        },
+        onApply: () => {
+          onChange(draft ? { operator, value: draft } : null);
+          onClose();
+        }
+      }
+    )
+  ] });
+}
+function ApplyClear({ onClear, onApply }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex items-center justify-end gap-2 border-t border-border/40 pt-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: onClear,
+        className: "h-8 px-3 text-muted-foreground hover:text-foreground",
+        children: "Clear"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button, { color: "primary", size: "sm", onClick: onApply, className: "h-8 px-3", children: "Apply" })
+  ] });
 }
 
 // src/app/data/DataTable.tsx
 var import_react54 = require("react");
-var import_lucide_react18 = require("lucide-react");
+var import_lucide_react19 = require("lucide-react");
 
 // src/ui/skeleton.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     "div",
     {
       "data-slot": "skeleton",
@@ -9907,7 +10149,7 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/app/data/DataTable.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var shellClass2 = "w-full";
 var tableClass = "w-full border-separate border-spacing-0 bg-transparent text-sm";
 var headRowClass = "";
@@ -9950,12 +10192,12 @@ function SortIndicator({
 }) {
   const iconClass = "size-3.5 shrink-0 opacity-60 group-hover:opacity-100";
   if (!active) {
-    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react18.ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react19.ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
   }
   if (direction === "desc") {
-    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react18.ArrowDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react19.ArrowDownIcon, { className: iconClass, "aria-hidden": true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react18.ArrowUpIcon, { className: iconClass, "aria-hidden": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react19.ArrowUpIcon, { className: iconClass, "aria-hidden": true });
 }
 function DataTable({
   columns,
@@ -10053,7 +10295,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__ */ (0, import_jsx_runtime89.jsx)(EmptyState, { title: emptyTitle, description: emptyDescription, className });
+    return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(EmptyState, { title: emptyTitle, description: emptyDescription, className });
   }
   const allKeys = sortedRows.map(getRowKey);
   const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));
@@ -10078,10 +10320,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__ */ (0, import_jsx_runtime89.jsx)("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("table", { className: tableClass, children: [
-    caption ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("caption", { className: "sr-only", children: caption }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("thead", { className: cn(headRowClass, stickyHeader && stickyHeadClass), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("tr", { children: [
-      selectable ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("th", { scope: "col", className: cn(selectCellClass, headPad), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("table", { className: tableClass, children: [
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("thead", { className: cn(headRowClass, stickyHeader && stickyHeadClass), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("tr", { children: [
+      selectable ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("th", { scope: "col", className: cn(selectCellClass, headPad), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         Checkbox,
         {
           checked: headerCheckedState,
@@ -10093,19 +10335,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__ */ (0, import_jsx_runtime89.jsxs)(
+        const headerContent = col.sortable ? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
           "button",
           {
             type: "button",
             className: sortButtonClass,
             onClick: () => setSort(nextSort(sort, col.id)),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "truncate", children: col.header }),
-              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
+              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "truncate", children: col.header }),
+              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
             ]
           }
         ) : col.header;
-        return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           "th",
           {
             scope: "col",
@@ -10122,9 +10364,9 @@ function DataTable({
         );
       })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: loading ? Array.from({ length: skeletonCount }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("tr", { className: rowClass, "aria-hidden": true, children: [
-      selectable ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("td", { className: cn(selectCellClass, cellPad), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Skeleton, { className: "size-4 rounded-[4px]" }) }) : null,
-      columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: loading ? Array.from({ length: skeletonCount }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("tr", { className: rowClass, "aria-hidden": true, children: [
+      selectable ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("td", { className: cn(selectCellClass, cellPad), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Skeleton, { className: "size-4 rounded-[4px]" }) }) : null,
+      columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "td",
         {
           className: cn(
@@ -10133,17 +10375,17 @@ function DataTable({
             col.align && alignClass[col.align],
             col.className
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Skeleton, { className: "h-4 w-[60%]" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Skeleton, { className: "h-4 w-[60%]" })
         },
         col.id
       ))
-    ] }, `skeleton-${rowIdx}`)) : visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("td", { colSpan, className: emptyCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "font-medium text-foreground", children: emptyTitle }),
-      emptyDescription ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
+    ] }, `skeleton-${rowIdx}`)) : visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("td", { colSpan, className: emptyCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "font-medium text-foreground", children: emptyTitle }),
+      emptyDescription ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("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__ */ (0, import_jsx_runtime89.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
         "tr",
         {
           className: rowClass,
@@ -10159,12 +10401,12 @@ function DataTable({
           tabIndex: onRowClick ? 0 : void 0,
           role: onRowClick ? "button" : void 0,
           children: [
-            selectable ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+            selectable ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               "td",
               {
                 className: cn(selectCellClass, cellPad),
                 onClick: (event) => event.stopPropagation(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
                   Checkbox,
                   {
                     checked: isSelected,
@@ -10174,7 +10416,7 @@ function DataTable({
                 )
               }
             ) : null,
-            columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+            columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               "td",
               {
                 className: cn(
@@ -10184,7 +10426,7 @@ function DataTable({
                   col.align && alignClass[col.align],
                   col.className
                 ),
-                children: col.truncate ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "truncate", children: col.cell(row) }) : col.cell(row)
+                children: col.truncate ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "truncate", children: col.cell(row) }) : col.cell(row)
               },
               col.id
             ))
@@ -10193,7 +10435,7 @@ function DataTable({
         key
       );
     }) }),
-    hasFoot ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("td", { colSpan, className: footCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+    hasFoot ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("td", { colSpan, className: footCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
       "div",
       {
         className: cn(
@@ -10201,18 +10443,18 @@ function DataTable({
           (showRowCount || footer || hasPager) && "justify-between"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: footInnerClass, children: [
-            showRowCount ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: footInnerClass, children: [
+            showRowCount ? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("span", { children: [
               rowCountText,
               selectable && selectedSet.size > 0 ? ` \xB7 ${selectedSet.size} selected` : null
-            ] }) : selectable && selectedSet.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("span", { children: [
+            ] }) : selectable && selectedSet.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("span", { children: [
               selectedSet.size,
               " selected"
             ] }) : null,
             footer
           ] }),
-          hasPager ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("span", { className: "tabular-nums", children: [
+          hasPager ? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("span", { className: "tabular-nums", children: [
               pageIndex * pageSize + 1,
               "\u2013",
               Math.min(
@@ -10223,8 +10465,8 @@ function DataTable({
               "of ",
               sortedRows.length
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
                 "button",
                 {
                   type: "button",
@@ -10232,10 +10474,10 @@ function DataTable({
                   onClick: () => setPage(pageIndex - 1),
                   disabled: pageIndex <= 0,
                   "aria-label": "Previous page",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react18.ChevronLeftIcon, { className: "size-4", "aria-hidden": true })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react19.ChevronLeftIcon, { className: "size-4", "aria-hidden": true })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
                 "button",
                 {
                   type: "button",
@@ -10243,7 +10485,7 @@ function DataTable({
                   onClick: () => setPage(pageIndex + 1),
                   disabled: pageIndex >= pageCount - 1,
                   "aria-label": "Next page",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_lucide_react18.ChevronRightIcon, { className: "size-4", "aria-hidden": true })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_lucide_react19.ChevronRightIcon, { className: "size-4", "aria-hidden": true })
                 }
               )
             ] })
@@ -10256,7 +10498,7 @@ function DataTable({
 
 // src/app/data/ChartPanel.tsx
 var import_react55 = require("react");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var ChartPanel = ({
   title,
   description,
@@ -10274,14 +10516,14 @@ var ChartPanel = ({
   const titleId = (0, import_react55.useId)();
   const resolvedTitle = title ?? artifact?.title;
   const hasHeader = Boolean(resolvedTitle || description || actions);
-  const body = loading ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Skeleton, { className: "w-full rounded-lg", style: { height }, "aria-hidden": true }) : children ?? (artifact ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ChartArtifactView, { artifact, embedded: true, height }) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+  const body = loading ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Skeleton, { className: "w-full rounded-lg", style: { height }, "aria-hidden": true }) : children ?? (artifact ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ChartArtifactView, { artifact, embedded: true, height }) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
     "section",
     {
       className: cn(metricCardShellClass, "aui-app-chart-panel", className),
       "aria-labelledby": resolvedTitle ? titleId : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           MetricCardHeader,
           {
             title: resolvedTitle,
@@ -10290,14 +10532,14 @@ var ChartPanel = ({
             actions
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           "div",
           {
             className: cn(
               "relative min-h-0 w-full",
               hasHeader ? metricChartPlotRegionClass : chartPanelBodyClass
             ),
-            children: body ?? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            children: body ?? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
               "div",
               {
                 className: "flex items-center justify-center text-sm font-normal text-muted-foreground",
@@ -10315,7 +10557,7 @@ var ChartPanel = ({
 
 // src/app/data/MetricRow.tsx
 var import_react56 = require("react");
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var MetricRow = ({
   title,
   titleTag,
@@ -10341,13 +10583,13 @@ var MetricRow = ({
     onMetricChange?.(id);
   };
   const hasHeader = Boolean(title || titleTag || description || actions);
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           MetricCardHeader,
           {
             title,
@@ -10357,7 +10599,7 @@ var MetricRow = ({
             actions
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           "div",
           {
             role: selectable ? "group" : void 0,
@@ -10368,18 +10610,18 @@ var MetricRow = ({
               metricTilesGridColsClass(loading ? metrics.length || 4 : metrics.length),
               hasHeader && "mt-3.5 border-t border-border/40"
             ),
-            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
               "div",
               {
                 className: cn("flex min-w-0 flex-1 flex-col gap-2", metricTileClass),
                 "aria-hidden": true,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Skeleton, { className: "h-3 w-20" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Skeleton, { className: "h-7 w-24" })
+                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Skeleton, { className: "h-7 w-24" })
                 ]
               },
               `skeleton-${index}`
-            )) : metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+            )) : metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
               MetricTile,
               {
                 label: m.label,
@@ -10407,7 +10649,7 @@ var MetricRow = ({
 
 // src/app/data/MetricChartCard.tsx
 var import_react57 = require("react");
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var MetricChartCard = ({
   title,
   titleTag,
@@ -10443,13 +10685,13 @@ var MetricChartCard = ({
   };
   const hasHeader = Boolean(title || titleTag || description || actions);
   const chartAriaLabel = typeof active?.label === "string" ? `${active.label} over time` : "Metric chart";
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           MetricCardHeader,
           {
             title,
@@ -10459,7 +10701,7 @@ var MetricChartCard = ({
             titleId
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           "div",
           {
             role: "group",
@@ -10470,18 +10712,18 @@ var MetricChartCard = ({
               metricTilesGridColsClass(loading ? metrics.length || 4 : metrics.length),
               hasHeader && "mt-3.5 border-t border-border/40"
             ),
-            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
               "div",
               {
                 className: cn("flex min-w-0 flex-1 flex-col gap-2", metricTileClass),
                 "aria-hidden": true,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Skeleton, { className: "h-3 w-20" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Skeleton, { className: "h-7 w-24" })
+                  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Skeleton, { className: "h-7 w-24" })
                 ]
               },
               `skeleton-${index}`
-            )) : metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+            )) : metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
               MetricTile,
               {
                 label: m.label,
@@ -10502,14 +10744,14 @@ var MetricChartCard = ({
             ))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           Skeleton,
           {
             className: "w-full rounded-lg",
             style: { height },
             "aria-hidden": true
           }
-        ) : active?.data && active.data.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        ) : active?.data && active.data.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           LineAreaChart,
           {
             data: active.data,
@@ -10529,7 +10771,7 @@ var MetricChartCard = ({
             ariaLabel: chartAriaLabel
           },
           active.id
-        ) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           "div",
           {
             className: "flex w-full items-center justify-center text-sm font-normal text-muted-foreground",
@@ -10635,8 +10877,8 @@ function useLiveQuery(fetcher, options = {}) {
 
 // src/ui/untitled-button.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_radix_ui8 = require("radix-ui");
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_radix_ui9 = require("radix-ui");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var SOLID_SKEUOMORPHIC_SHADOW2 = "shadow-skeuomorphic-solid";
 var BORDERED_SKEUOMORPHIC_SHADOW2 = "shadow-skeuomorphic-bordered";
 var untitledButtonVariants = (0, import_class_variance_authority2.cva)(
@@ -10719,10 +10961,10 @@ var untitledButtonVariants = (0, import_class_variance_authority2.cva)(
         )
       },
       size: {
-        sm: "h-9 gap-1.5 rounded-lg px-3 text-sm",
-        md: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
-        lg: "h-11 gap-2 rounded-lg px-4 text-base",
-        xl: "h-12 gap-2 rounded-lg px-5 text-base"
+        sm: "h-8 gap-1 rounded-md px-2.5 text-xs",
+        md: "h-9 gap-1.5 rounded-lg px-3 text-sm",
+        lg: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
+        xl: "h-11 gap-2 rounded-lg px-4 text-base"
       }
     },
     defaultVariants: {
@@ -10747,8 +10989,8 @@ function UntitledButton({
   const isDisabled = disabled || isLoading;
   const classes = cn(untitledButtonVariants({ color, size }), className);
   if (asChild) {
-    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
-      import_radix_ui8.Slot.Root,
+    return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      import_radix_ui9.Slot.Root,
       {
         className: classes,
         "aria-disabled": isDisabled ? true : void 0,
@@ -10758,7 +11000,7 @@ function UntitledButton({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
     "button",
     {
       type,
@@ -10767,7 +11009,7 @@ function UntitledButton({
       className: classes,
       ...props,
       children: [
-        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -10782,8 +11024,8 @@ function UntitledButton({
 }
 
 // src/ui/banner.tsx
-var import_lucide_react19 = require("lucide-react");
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_lucide_react20 = require("lucide-react");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var bannerSoftClass = {
   default: "border-border/50 bg-muted/30 text-foreground/90 dark:bg-muted/15",
   primary: "border-primary/15 bg-primary/5 text-primary-800 dark:text-primary-200 [&_[data-banner-icon]]:text-primary",
@@ -10828,7 +11070,7 @@ function Banner({
 }) {
   const isSolid = variant === "solid";
   const isSingleLine = !title;
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
     "div",
     {
       "data-slot": "banner",
@@ -10843,7 +11085,7 @@ function Banner({
       ),
       ...props,
       children: [
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           "span",
           {
             "data-banner-icon": true,
@@ -10854,9 +11096,9 @@ function Banner({
             children: icon
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { className: "font-medium tracking-tight", children: title }) : null,
-          children ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("p", { className: "font-medium tracking-tight", children: title }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
             "div",
             {
               className: cn(
@@ -10867,8 +11109,8 @@ function Banner({
             }
           ) : null
         ] }),
-        actions ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null,
-        onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        actions ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null,
+        onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           "button",
           {
             type: "button",
@@ -10879,7 +11121,7 @@ function Banner({
               isSingleLine ? "self-center" : "-mt-0.5",
               isSolid ? "opacity-80 hover:bg-background/15 hover:opacity-100" : "text-muted-foreground hover:bg-foreground/10 hover:text-foreground"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_lucide_react19.XIcon, { className: "size-4", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_lucide_react20.XIcon, { className: "size-4", "aria-hidden": true })
           }
         ) : null
       ]
@@ -10888,7 +11130,7 @@ function Banner({
 }
 
 // src/ui/timeline.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 var timelineRowGap = {
   sm: "pb-4",
   default: "pb-6"
@@ -10921,16 +11163,16 @@ var toneStyles = {
   }
 };
 function Timeline({ items, size = "default", className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("ol", { "data-slot": "timeline", className: cn("flex flex-col", className), ...props, children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("ol", { "data-slot": "timeline", className: cn("flex flex-col", className), ...props, children: items.map((item, index) => {
     const last = index === items.length - 1;
     const tone = item.tone ?? "default";
     const styles = toneStyles[tone];
-    return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
       "li",
       {
         className: cn("relative flex gap-3.5 last:pb-0", timelineRowGap[size]),
         children: [
-          !last ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+          !last ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "span",
             {
               "aria-hidden": true,
@@ -10940,7 +11182,7 @@ function Timeline({ items, size = "default", className, ...props }) {
               )
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "relative flex w-5 shrink-0 justify-center pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "relative flex w-5 shrink-0 justify-center pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "span",
             {
               className: cn(
@@ -10948,7 +11190,7 @@ function Timeline({ items, size = "default", className, ...props }) {
                 styles.border,
                 item.icon ? "size-6" : "size-4"
               ),
-              children: item.icon ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: cn("text-xs", styles.icon), children: item.icon }) : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+              children: item.icon ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: cn("text-xs", styles.icon), children: item.icon }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
                 "span",
                 {
                   className: cn(
@@ -10959,12 +11201,12 @@ function Timeline({ items, size = "default", className, ...props }) {
               )
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "min-w-0 flex-1 pb-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("p", { className: "text-sm font-normal text-foreground", children: item.title }),
-              item.meta ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: item.meta }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "min-w-0 flex-1 pb-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "text-sm font-normal text-foreground", children: item.title }),
+              item.meta ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: item.meta }) : null
             ] }),
-            item.description ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("p", { className: "mt-0.5 text-[13px] leading-relaxed text-muted-foreground", children: item.description }) : null
+            item.description ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "mt-0.5 text-[13px] leading-relaxed text-muted-foreground", children: item.description }) : null
           ] })
         ]
       },
@@ -10978,8 +11220,8 @@ var React5 = __toESM(require("react"), 1);
 var import_core2 = require("@dnd-kit/core");
 var import_sortable = require("@dnd-kit/sortable");
 var import_utilities = require("@dnd-kit/utilities");
-var import_lucide_react20 = require("lucide-react");
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_lucide_react21 = require("lucide-react");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var columnTitleToneClass = {
   default: "text-foreground",
   primary: "text-blue-600 dark:text-blue-400",
@@ -11041,7 +11283,7 @@ function SortableCard({
     transition
   };
   const dragHandleProps = disabled ? void 0 : { ...attributes, ...listeners };
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
     "div",
     {
       ref: setNodeRef,
@@ -11056,7 +11298,7 @@ function SortableCard({
         className
       ),
       children: [
-        !disabled && dragHandle === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        !disabled && dragHandle === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           "button",
           {
             type: "button",
@@ -11064,7 +11306,7 @@ function SortableCard({
             className: "absolute right-1.5 top-1.5 z-10 grid size-6 cursor-grab touch-none place-items-center rounded-md text-muted-foreground/40 opacity-0 transition hover:bg-foreground/5 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 group-hover/kanban-card:opacity-100 active:cursor-grabbing",
             ...attributes,
             ...listeners,
-            children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_lucide_react20.GripVerticalIcon, { className: "size-4", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_lucide_react21.GripVerticalIcon, { className: "size-4", "aria-hidden": true })
           }
         ) : null,
         renderCard(card, { column, isDragging, isOverlay: false, dragHandleProps })
@@ -11088,7 +11330,7 @@ function KanbanColumnView({
 }) {
   const tone = column.tone ?? "default";
   const { setNodeRef, isOver } = (0, import_core2.useDroppable)({ id: column.id, disabled });
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
     "div",
     {
       "data-slot": "kanban-column",
@@ -11098,9 +11340,9 @@ function KanbanColumnView({
         className
       ),
       children: [
-        renderColumnHeader ? renderColumnHeader(column) : /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "flex flex-col gap-0.5 px-1 pb-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        renderColumnHeader ? renderColumnHeader(column) : /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex flex-col gap-0.5 px-1 pb-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
               "h3",
               {
                 className: cn(
@@ -11110,12 +11352,12 @@ function KanbanColumnView({
                 children: column.title
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "shrink-0 text-xs font-normal tabular-nums text-muted-foreground/60", children: column.cards.length }),
-            column.action ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "shrink-0", children: column.action }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "shrink-0 text-xs font-normal tabular-nums text-muted-foreground/60", children: column.cards.length }),
+            column.action ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "shrink-0", children: column.action }) : null
           ] }),
-          column.description ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: column.description }) : null
+          column.description ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: column.description }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_sortable.SortableContext, { items: cardIds, strategy: import_sortable.verticalListSortingStrategy, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_sortable.SortableContext, { items: cardIds, strategy: import_sortable.verticalListSortingStrategy, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           "div",
           {
             ref: setNodeRef,
@@ -11125,9 +11367,9 @@ function KanbanColumnView({
               densityListClass[density],
               isOver && "bg-muted/50"
             ),
-            children: column.cards.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "flex flex-1 items-center justify-center rounded-xl border border-dashed border-border/60 px-2 py-8 text-center text-xs text-muted-foreground/70", children: emptyColumnLabel ?? "Drop here" }) : column.cards.map((card) => {
+            children: column.cards.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "flex flex-1 items-center justify-center rounded-xl border border-dashed border-border/60 px-2 py-8 text-center text-xs text-muted-foreground/70", children: emptyColumnLabel ?? "Drop here" }) : column.cards.map((card) => {
               const id = getCardId(card);
-              return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
                 SortableCard,
                 {
                   card,
@@ -11145,7 +11387,7 @@ function KanbanColumnView({
             })
           }
         ) }),
-        column.footer ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "px-0.5 pt-0.5", children: column.footer }) : null
+        column.footer ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "px-0.5 pt-0.5", children: column.footer }) : null
       ]
     }
   );
@@ -11284,7 +11526,7 @@ function Kanban({
       onColumnsChange?.(next);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
     import_core2.DndContext,
     {
       sensors,
@@ -11298,7 +11540,7 @@ function Kanban({
         if (isControlled) setInternal(cloneColumns(columnsProp));
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           "div",
           {
             "data-slot": "kanban",
@@ -11309,7 +11551,7 @@ function Kanban({
               density === "compact" ? "gap-3" : "gap-4",
               className
             ),
-            children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+            children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
               KanbanColumnView,
               {
                 column,
@@ -11329,7 +11571,7 @@ function Kanban({
             ))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_core2.DragOverlay, { children: activeCard ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_core2.DragOverlay, { children: activeCard ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           "div",
           {
             "data-slot": "kanban-card-overlay",
@@ -11352,7 +11594,7 @@ function Kanban({
 }
 
 // src/chat/chat.tsx
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 function TimbalChat({
   workforceId,
   baseUrl,
@@ -11363,7 +11605,7 @@ function TimbalChat({
   debug,
   ...threadProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
     TimbalRuntimeProvider,
     {
       workforceId,
@@ -11373,7 +11615,7 @@ function TimbalChat({
       attachmentsUploadUrl,
       attachmentsAccept,
       debug,
-      children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Thread, { ...threadProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Thread, { ...threadProps })
     }
   );
 }