@timbal-ai/timbal-react 1.5.0 → 1.6.1

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

@@ -4,32 +4,36 @@ import {
   ShellInsetProvider,
   studioChromeShellStyle,
   studioSidebarWidthTransition
-} from "./chunk-QIABF4KB.esm.js";
+} from "./chunk-ELEY66OH.esm.js";
 import {
   ChartArtifactView,
   LineAreaChart,
   Thread,
   TimbalRuntimeProvider,
+  formatCompact,
   monotoneAreaPath,
   monotoneLinePath,
   studioIntegrationCardClass,
   studioTopbarPillHeightClass,
   toNum
-} from "./chunk-IGHBLJV3.esm.js";
+} from "./chunk-WQIQW7EM.esm.js";
 import {
   Checkbox,
   CopyButton,
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
   Skeleton
-} from "./chunk-5ECRZ5O7.esm.js";
+} from "./chunk-NO5AWNWT.esm.js";
 import {
   PillSegmentedTabs
-} from "./chunk-ZNYAETFD.esm.js";
+} from "./chunk-R4RQT2XQ.esm.js";
 import {
-  Avatar,
-  AvatarFallback,
   Button,
   Dialog,
   DialogContent,
@@ -41,7 +45,7 @@ import {
   TIMBAL_V2_SWITCH_TRACK_OFF,
   TimbalV2Button,
   controlClass
-} from "./chunk-AZL2WANO.esm.js";
+} from "./chunk-MBS7XHV2.esm.js";
 import {
   cn
 } from "./chunk-EDEKQYSU.esm.js";
@@ -220,7 +224,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",
@@ -301,7 +309,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>
@@ -321,7 +329,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\` |
@@ -390,6 +398,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\`. |
@@ -404,6 +413,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\`. |
@@ -448,6 +459,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)
@@ -514,6 +540,7 @@ import {
   DataTable,
   FilterBar,
   FilterField,
+  FilterDropdown,
   AlertCard,
   CatalogCard,
 } from "@timbal-ai/timbal-react/app";
@@ -568,6 +595,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-]+:)*/, "");
@@ -611,6 +640,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 });
       }
     }
@@ -683,6 +722,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",
@@ -1648,7 +1696,11 @@ function useAppDensityClass(key, override) {
 }
 
 // src/charts/sparkline.tsx
-import { useId } from "react";
+import {
+  useId,
+  useRef,
+  useState
+} from "react";
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Sparkline = ({
   data,
@@ -1659,30 +1711,36 @@ var Sparkline = ({
   height = 28,
   strokeWidth = 1.5,
   className,
-  ariaLabel = "Trend"
+  ariaLabel = "Trend",
+  interactive = false,
+  labels,
+  formatValue
 }) => {
   const uid = useId();
+  const containerRef = useRef(null);
+  const [activeIndex, setActiveIndex] = useState(null);
   const values = data.map((d) => typeof d === "number" ? d : toNum(d[dataKey]));
   if (values.length === 0) {
     return /* @__PURE__ */ jsx3("span", { className: cn("inline-block", className), style: { width, height } });
   }
-  const 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__ */ jsxs2(
+  const svg = /* @__PURE__ */ jsxs2(
     "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",
@@ -1692,7 +1750,7 @@ var Sparkline = ({
             /* @__PURE__ */ jsx3("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
             /* @__PURE__ */ jsx3("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
           ] }) }),
-          /* @__PURE__ */ jsx3("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
+          /* @__PURE__ */ jsx3("path", { d: monotoneAreaPath(points, height - padY), fill: `url(#${uid}-spark)` })
         ] }),
         /* @__PURE__ */ jsx3(
           "path",
@@ -1704,7 +1762,81 @@ var Sparkline = ({
             strokeLinecap: "round",
             strokeLinejoin: "round"
           }
-        )
+        ),
+        interactive && activeIndex != null && points[activeIndex] ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx3(
+            "line",
+            {
+              x1: points[activeIndex].x,
+              x2: points[activeIndex].x,
+              y1: 0,
+              y2: height,
+              stroke: color,
+              strokeWidth: 1,
+              strokeOpacity: 0.3,
+              vectorEffect: "non-scaling-stroke"
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "circle",
+            {
+              cx: points[activeIndex].x,
+              cy: points[activeIndex].y,
+              r: 2.75,
+              fill: color,
+              stroke: "var(--background, #fff)",
+              strokeWidth: 1.5,
+              vectorEffect: "non-scaling-stroke"
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+  if (!interactive) return svg;
+  const onMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    if (rect.width === 0) return;
+    const fraction = (e.clientX - rect.left) / rect.width;
+    const index = Math.max(
+      0,
+      Math.min(values.length - 1, Math.round(fraction * (values.length - 1)))
+    );
+    setActiveIndex(index);
+  };
+  const active = activeIndex != null ? points[activeIndex] : null;
+  const formattedValue = activeIndex != null ? formatValue ? formatValue(values[activeIndex], activeIndex) : formatCompact(values[activeIndex]) : null;
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      ref: containerRef,
+      className: cn("relative block touch-none", className),
+      style: { width: "100%", height: "100%" },
+      onPointerMove: onMove,
+      onPointerLeave: () => setActiveIndex(null),
+      children: [
+        svg,
+        active ? /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "pointer-events-none absolute z-30 -translate-x-1/2 -translate-y-full whitespace-nowrap",
+              "rounded-xl border px-3 py-2 text-[11px] font-medium leading-none tabular-nums shadow-[0_12px_40px_-10px_rgba(0,0,0,0.55)]",
+              "border-white/10 bg-gradient-to-b from-neutral-800 to-neutral-950 text-white",
+              "dark:border-black/10 dark:from-white dark:to-neutral-100 dark:text-neutral-900"
+            ),
+            style: {
+              left: `${active.x / width * 100}%`,
+              top: `${active.y / height * 100}%`,
+              marginTop: -8
+            },
+            children: [
+              labels?.[activeIndex] != null ? /* @__PURE__ */ jsx3("span", { className: "mr-1.5 text-neutral-300 dark:text-neutral-500", children: labels[activeIndex] }) : null,
+              /* @__PURE__ */ jsx3("span", { children: formattedValue })
+            ]
+          }
+        ) : null
       ]
     }
   );
@@ -1770,6 +1902,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",
@@ -1799,8 +1940,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__ */ jsxs4(Fragment3, { children: [
     active ? /* @__PURE__ */ jsx5(
       "span",
@@ -1812,17 +1955,6 @@ var MetricTile = ({
         )
       }
     ) : null,
-    hasSparkline ? /* @__PURE__ */ jsx5("div", { className: "absolute inset-x-0 bottom-0.5 h-9 w-full overflow-hidden pointer-events-none z-0 opacity-45 dark:opacity-35 select-none", children: sparkline ?? /* @__PURE__ */ jsx5(
-      Sparkline,
-      {
-        data: sparklineData,
-        width: 160,
-        height: 36,
-        className: "w-full h-full",
-        color: trendTone === "up" ? "var(--primary, #3b82f6)" : trendTone === "down" ? "var(--destructive, #f43f5e)" : "var(--muted-foreground, #64748b)",
-        ...sparklineConfig
-      }
-    ) }) : null,
     /* @__PURE__ */ jsxs4("div", { className: "relative z-10 flex flex-col gap-1 w-full text-left", children: [
       /* @__PURE__ */ jsx5("span", { className: "text-xs font-semibold text-muted-foreground/80 tracking-tight", children: label }),
       /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-2", children: [
@@ -1841,7 +1973,28 @@ var MetricTile = ({
           }
         ) : null
       ] })
-    ] })
+    ] }),
+    hasSparkline ? /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: cn(
+          "relative z-10 mt-2",
+          bandBleed
+        ),
+        children: sparkline ?? /* @__PURE__ */ jsx5(
+          Sparkline,
+          {
+            data: sparklineData,
+            width: 160,
+            height: 40,
+            interactive: true,
+            className: "h-full w-full opacity-90",
+            color: sparklineToneColor[trendTone],
+            ...sparklineConfig
+          }
+        )
+      }
+    ) : null
   ] });
   const divider = showDivider ? metricCellDividerClass : void 0;
   if (onSelect) {
@@ -1893,7 +2046,7 @@ function useAppShellNav() {
 
 // src/app/layout/AppShell.tsx
 import { motion, useReducedMotion } from "motion/react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState as useState2 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var floatingTriggerClass = cn(
   "aui-app-shell-chat-trigger-fixed fixed z-50 rounded-full px-5 py-2.5 text-sm font-medium shadow-card-elevated",
@@ -1917,7 +2070,7 @@ var AppShellBody = ({
   insetExpanded,
   children
 }) => {
-  const [isMobile, setIsMobile] = useState(() => {
+  const [isMobile, setIsMobile] = useState2(() => {
     if (typeof window === "undefined") return false;
     return window.innerWidth < 768;
   });
@@ -1997,7 +2150,7 @@ var AppShell = ({
 }) => {
   const topbarContent = topbar ?? header;
   const hasChat = Boolean(chat);
-  const [uncontrolledNavOpen, setUncontrolledNavOpen] = useState(defaultNavOpen);
+  const [uncontrolledNavOpen, setUncontrolledNavOpen] = useState2(defaultNavOpen);
   const isNavControlled = navOpenProp !== void 0;
   const navOpen = isNavControlled ? navOpenProp : uncontrolledNavOpen;
   const setNavOpen = useCallback(
@@ -2012,7 +2165,7 @@ var AppShell = ({
     () => ({ open: navOpen, setOpen: setNavOpen, toggle: toggleNav }),
     [navOpen, setNavOpen, toggleNav]
   );
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultChatOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState2(defaultChatOpen);
   const isChatControlled = chatOpenProp !== void 0;
   const chatOpen = isChatControlled ? chatOpenProp : uncontrolledOpen;
   const setChatOpen = useCallback(
@@ -2027,7 +2180,7 @@ var AppShell = ({
   const toggleChat = useCallback(() => {
     setChatOpen(!chatOpen);
   }, [chatOpen, setChatOpen]);
-  const [insetPaddingPx, setInsetPaddingPx] = useState(
+  const [insetPaddingPx, setInsetPaddingPx] = useState2(
     sidebar ? SIDEBAR_INSET_PX_EXPANDED : 0
   );
   const reportShellInset = useCallback((insetPx) => {
@@ -2540,7 +2693,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
@@ -2755,7 +2908,7 @@ var DescriptionList = ({
 );
 
 // src/app/surfaces/ExpandableSection.tsx
-import { useId as useId2, useState as useState2 } from "react";
+import { useId as useId2, useState as useState3 } from "react";
 import { AnimatePresence, motion as motion2, useReducedMotion as useReducedMotion2 } from "motion/react";
 import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var Chevron = ({ open }) => /* @__PURE__ */ jsx24(
@@ -2787,7 +2940,7 @@ var ExpandableSection = ({
 }) => {
   const reduceMotion = useReducedMotion2();
   const panelId = useId2();
-  const [internalOpen, setInternalOpen] = useState2(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState3(defaultOpen);
   const open = openProp ?? internalOpen;
   const toggle = () => {
     if (openProp == null) setInternalOpen((o) => !o);
@@ -3147,7 +3300,7 @@ var FieldRow = ({
 };
 
 // src/app/settings/FloatingUnsavedChangesBar.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import { AnimatePresence as AnimatePresence2, motion as motion3, useReducedMotion as useReducedMotion3 } from "motion/react";
 import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -3164,7 +3317,7 @@ var FloatingUnsavedChangesBar = ({
   className
 }) => {
   const reduceMotion = useReducedMotion3();
-  const [mounted, setMounted] = useState3(false);
+  const [mounted, setMounted] = useState4(false);
   useEffect2(() => setMounted(true), []);
   if (!mounted || typeof document === "undefined") return null;
   return createPortal(
@@ -3770,505 +3923,467 @@ var FilterField = ({
 };
 
 // src/app/data/FilterDropdown.tsx
-import { useState as useState4, useMemo as useMemo2, useEffect as useEffect3 } from "react";
-import {
-  CalendarIcon,
-  ChevronDownIcon as ChevronDownIcon2,
-  ChevronRightIcon,
-  CircleDollarSignIcon,
-  ListFilterIcon,
-  SearchIcon as SearchIcon2,
-  TrendingUpIcon,
-  UserIcon,
-  WalletIcon
-} from "lucide-react";
+import { useEffect as useEffect3, useMemo as useMemo2, useState as useState5 } from "react";
+import { ChevronRightIcon, ListFilterIcon, XIcon as XIcon2 } from "lucide-react";
 import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
-var DEFAULT_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 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] = useState4(false);
-  const [activeMenu, setActiveMenu] = useState4("contact");
-  const [isMobile, setIsMobile] = useState4(false);
+  const [isOpen, setIsOpen] = useState5(false);
+  const [activeId, setActiveId] = useState5(fields[0]?.id ?? null);
+  const [isMobile, setIsMobile] = useState5(false);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState5(defaultValue ?? {});
+  const values = isControlled ? value : internal;
   useEffect3(() => {
     const checkMobile = () => setIsMobile(window.innerWidth < 768);
     checkMobile();
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
-  const [selectedContacts, setSelectedContacts] = useState4(
-    filters?.contacts ?? initialFilters?.contacts ?? []
-  );
-  const [walletInput, setWalletInput] = useState4(filters?.walletAddress ?? initialFilters?.walletAddress ?? "");
-  const [appliedWallet, setAppliedWallet] = useState4(filters?.walletAddress ?? initialFilters?.walletAddress ?? "");
-  const [selectedDatePreset, setSelectedDatePreset] = useState4(
-    filters?.lastInvoiceDate ?? initialFilters?.lastInvoiceDate ?? null
-  );
-  const [customDateFrom, setCustomDateFrom] = useState4(
-    filters?.customDateRange?.from ?? initialFilters?.customDateRange?.from ?? ""
-  );
-  const [customDateTo, setCustomDateTo] = useState4(
-    filters?.customDateRange?.to ?? initialFilters?.customDateRange?.to ?? ""
-  );
-  const [ltvOperator, setLtvOperator] = useState4(
-    filters?.lifetimeValue?.operator ?? initialFilters?.lifetimeValue?.operator ?? "greater_than"
-  );
-  const [ltvValue, setLtvValue] = useState4(filters?.lifetimeValue?.value ?? initialFilters?.lifetimeValue?.value ?? "");
-  const [isLtvOperatorOpen, setLtvOperatorOpen] = useState4(false);
-  const [outstandingOperator, setOutstandingOperator] = useState4(
-    filters?.outstanding?.operator ?? initialFilters?.outstanding?.operator ?? "greater_than"
-  );
-  const [outstandingValue, setOutstandingValue] = useState4(filters?.outstanding?.value ?? initialFilters?.outstanding?.value ?? "");
-  const [isOutstandingOperatorOpen, setOutstandingOperatorOpen] = useState4(false);
   useEffect3(() => {
-    if (filters) {
-      setSelectedContacts(filters.contacts ?? []);
-      setWalletInput(filters.walletAddress ?? "");
-      setAppliedWallet(filters.walletAddress ?? "");
-      setSelectedDatePreset(filters.lastInvoiceDate ?? null);
-      setCustomDateFrom(filters.customDateRange?.from ?? "");
-      setCustomDateTo(filters.customDateRange?.to ?? "");
-      setLtvOperator(filters.lifetimeValue?.operator ?? "greater_than");
-      setLtvValue(filters.lifetimeValue?.value ?? "");
-      setOutstandingOperator(filters.outstanding?.operator ?? "greater_than");
-      setOutstandingValue(filters.outstanding?.value ?? "");
+    if (!fields.some((f) => f.id === activeId)) {
+      setActiveId(fields[0]?.id ?? null);
     }
-  }, [filters]);
-  const [contactSearch, setContactSearch] = useState4("");
-  const [walletSearch, setWalletSearch] = useState4("");
-  const refDate = useMemo2(() => new Date(2026, 5, 26), []);
-  const presets = useMemo2(() => {
-    const year = refDate.getFullYear();
-    const month = refDate.getMonth();
-    const lastMonthDate = new Date(year, month - 1, 1);
-    const lastMonthLabel = lastMonthDate.toLocaleDateString("en-US", { month: "short", year: "numeric" });
-    const thisMonthLabel = refDate.toLocaleDateString("en-US", { month: "short", year: "numeric" });
-    const thisQuarter = Math.floor(month / 3) + 1;
-    const thisQuarterLabel = `Q${thisQuarter} ${year}`;
-    const lastQuarter = thisQuarter === 1 ? 4 : thisQuarter - 1;
-    const lastQuarterYear = thisQuarter === 1 ? year - 1 : year;
-    const lastQuarterLabel = `Q${lastQuarter} ${lastQuarterYear}`;
-    const thisYearLabel = `${year}`;
-    const last30 = new Date(refDate);
-    last30.setDate(refDate.getDate() - 30);
-    const formatDate = (d) => d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
-    const last30Label = `${formatDate(last30)} - ${formatDate(refDate)}`;
-    const last90 = new Date(refDate);
-    last90.setDate(refDate.getDate() - 90);
-    const last90Label = `${formatDate(last90)} - ${formatDate(refDate)}`;
-    return [
-      { id: "last_month", label: "Last month", date: lastMonthLabel },
-      { id: "this_month", label: "This month", date: thisMonthLabel },
-      { id: "this_quarter", label: "This quarter", date: thisQuarterLabel },
-      { id: "last_quarter", label: "Last quarter", date: lastQuarterLabel },
-      { id: "this_year", label: "This year", date: thisYearLabel },
-      { id: "last_30_days", label: "Last 30 days", date: last30Label },
-      { id: "last_90_days", label: "Last 90 days", date: last90Label },
-      { id: "custom", label: "Custom range", date: "" }
-    ];
-  }, [refDate]);
-  const filteredContacts = useMemo2(() => {
-    if (!contactSearch) return contacts;
-    const query = contactSearch.toLowerCase();
-    return contacts.filter(
-      (c) => c.name.toLowerCase().includes(query) || c.email.toLowerCase().includes(query)
-    );
-  }, [contacts, contactSearch]);
-  const handleContactToggle = (contactName) => {
-    const next = selectedContacts.includes(contactName) ? selectedContacts.filter((name) => name !== contactName) : [...selectedContacts, contactName];
-    setSelectedContacts(next);
-    notifyChanges({ contacts: next });
-    setIsOpen(false);
-  };
-  const handleWalletApply = () => {
-    setAppliedWallet(walletInput);
-    notifyChanges({ walletAddress: walletInput });
-    setIsOpen(false);
+  }, [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 })
+        });
+      }
     }
-  };
-  const handleCustomDateApply = () => {
-    notifyChanges({
-      lastInvoiceDate: "custom",
-      customDateRange: { from: customDateFrom, to: customDateTo }
-    });
-    setIsOpen(false);
-  };
-  const handleLtvApply = () => {
-    notifyChanges({
-      lifetimeValue: ltvValue ? { operator: ltvOperator, value: ltvValue } : null
-    });
-    setIsOpen(false);
-  };
-  const handleLtvClear = () => {
-    setLtvValue("");
-    notifyChanges({ lifetimeValue: null });
-    setIsOpen(false);
-  };
-  const handleOutstandingApply = () => {
-    notifyChanges({
-      outstanding: outstandingValue ? { operator: outstandingOperator, value: outstandingValue } : null
-    });
-    setIsOpen(false);
-  };
-  const handleOutstandingClear = () => {
-    setOutstandingValue("");
-    notifyChanges({ outstanding: null });
-    setIsOpen(false);
-  };
-  const notifyChanges = (overrides) => {
-    const current = {
-      contacts: selectedContacts,
-      walletAddress: appliedWallet,
-      lastInvoiceDate: selectedDatePreset,
-      customDateRange: customDateFrom || customDateTo ? { from: customDateFrom, to: customDateTo } : void 0,
-      lifetimeValue: ltvValue ? { operator: ltvOperator, value: ltvValue } : null,
-      outstanding: outstandingValue ? { operator: outstandingOperator, value: outstandingValue } : null,
-      ...overrides
-    };
-    onFiltersChange?.(current);
-  };
-  const menuItems = [
-    { id: "contact", label: "Contact", icon: /* @__PURE__ */ jsx47(UserIcon, { className: "size-4" }) },
-    { id: "wallet", label: "Wallet address", icon: /* @__PURE__ */ jsx47(WalletIcon, { className: "size-4" }) },
-    { id: "date", label: "Last invoice date", icon: /* @__PURE__ */ jsx47(CalendarIcon, { className: "size-4" }) },
-    { id: "ltv", label: "Lifetime value", icon: /* @__PURE__ */ jsx47(TrendingUpIcon, { className: "size-4" }) },
-    { id: "outstanding", label: "Outstanding", icon: /* @__PURE__ */ jsx47(CircleDollarSignIcon, { className: "size-4" }) }
-  ];
-  const activeIdx = menuItems.findIndex((item) => item.id === activeMenu);
-  return /* @__PURE__ */ jsx47("div", { className: cn("inline-block", className), children: /* @__PURE__ */ jsxs36(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsx47(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
-      Button,
+  }
+  return /* @__PURE__ */ jsxs36("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs36(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ jsx47(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx47(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "border-dashed font-medium text-muted-foreground hover:text-foreground",
+          iconLeading: /* @__PURE__ */ jsx47(ListFilterIcon, { className: "size-4" }),
+          children: label
+        }
+      ) }),
+      /* @__PURE__ */ jsx47(
+        PopoverContent,
+        {
+          variant: "list",
+          align,
+          className: "overflow-visible border-none bg-transparent p-0 shadow-none max-w-[calc(100vw-32px)] md:max-w-none",
+          children: /* @__PURE__ */ jsxs36("div", { className: "relative flex flex-col md:flex-row items-stretch md:items-start w-[calc(100vw-32px)] max-w-[340px] md:w-auto md:max-w-none", children: [
+            /* @__PURE__ */ jsx47("div", { className: "w-full md:w-56 rounded-xl border border-border bg-popover p-1.5 shadow-lg", children: fields.map((field) => {
+              const isActive = activeId === field.id;
+              return /* @__PURE__ */ jsxs36(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm text-left transition-colors outline-none",
+                    isActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+                  ),
+                  onMouseEnter: () => !isMobile && setActiveId(field.id),
+                  onClick: () => setActiveId(field.id),
+                  children: [
+                    /* @__PURE__ */ jsxs36("span", { className: "flex items-center gap-2", children: [
+                      field.icon,
+                      /* @__PURE__ */ jsx47("span", { children: field.label })
+                    ] }),
+                    /* @__PURE__ */ jsx47(ChevronRightIcon, { className: "size-4 text-muted-foreground/50" })
+                  ]
+                },
+                field.id
+              );
+            }) }),
+            activeField && /* @__PURE__ */ jsx47(
+              "div",
+              {
+                className: "relative left-0 mt-2 w-full md:absolute md:left-[calc(100%+6px)] md:w-80 rounded-xl border border-border bg-popover p-3 shadow-lg transition-all duration-150 md:mt-0",
+                style: isMobile ? {} : { top: `${activeIdx * 36 + 6}px` },
+                children: /* @__PURE__ */ jsx47(
+                  FilterFieldControl,
+                  {
+                    field: activeField,
+                    value: values[activeField.id],
+                    onChange: (next) => commit(activeField.id, next),
+                    onClose: () => setIsOpen(false)
+                  }
+                )
+              }
+            )
+          ] })
+        }
+      )
+    ] }),
+    showActiveChips && chips.map((chip) => /* @__PURE__ */ jsx47(FilterChip, { label: chip.label, onRemove: chip.remove }, chip.id)),
+    showActiveChips && chips.length > 0 && /* @__PURE__ */ jsx47(
+      "button",
       {
-        variant: "outline",
-        size: "sm",
-        shape: "pill",
-        className: "border-dashed font-medium text-muted-foreground hover:text-foreground",
-        iconLeading: /* @__PURE__ */ jsx47(ListFilterIcon, { className: "size-4" }),
-        children: "Filter"
+        type: "button",
+        onClick: clearAll,
+        className: "rounded-full px-3 py-1 text-sm font-medium text-muted-foreground outline-none transition-colors hover:text-foreground",
+        children: "Clear all"
       }
-    ) }),
+    )
+  ] });
+}
+function FilterChip({ label, onRemove }) {
+  return /* @__PURE__ */ jsxs36("span", { className: "inline-flex h-9 items-center gap-1.5 rounded-full border border-border bg-muted/40 pl-3 pr-1.5 text-sm font-medium text-foreground", children: [
+    /* @__PURE__ */ jsx47("span", { className: "truncate", children: label }),
     /* @__PURE__ */ jsx47(
-      PopoverContent,
+      "button",
       {
-        variant: "list",
-        align: "start",
-        className: "overflow-visible border-none bg-transparent p-0 shadow-none max-w-[calc(100vw-32px)] md:max-w-none",
-        children: /* @__PURE__ */ jsxs36("div", { className: "relative flex flex-col md:flex-row items-stretch md:items-start w-[calc(100vw-32px)] max-w-[340px] md:w-auto md:max-w-none", children: [
-          /* @__PURE__ */ jsx47("div", { className: "w-full md:w-56 rounded-xl border border-border bg-popover p-1.5 shadow-lg", children: menuItems.map((item) => {
-            const isActive = activeMenu === item.id;
-            return /* @__PURE__ */ jsxs36(
-              "button",
-              {
-                type: "button",
-                className: cn(
-                  "flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm text-left transition-colors outline-none",
-                  isActive ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
-                ),
-                onMouseEnter: () => !isMobile && setActiveMenu(item.id),
-                onClick: () => setActiveMenu(item.id),
-                children: [
-                  /* @__PURE__ */ jsxs36("span", { className: "flex items-center gap-2", children: [
-                    item.icon,
-                    /* @__PURE__ */ jsx47("span", { children: item.label })
-                  ] }),
-                  /* @__PURE__ */ jsx47(ChevronRightIcon, { className: "size-4 text-muted-foreground/50" })
-                ]
-              },
-              item.id
-            );
-          }) }),
-          activeMenu && /* @__PURE__ */ jsxs36(
-            "div",
+        type: "button",
+        onClick: onRemove,
+        "aria-label": `Remove ${label}`,
+        className: "flex size-5 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground",
+        children: /* @__PURE__ */ jsx47(XIcon2, { className: "size-3.5" })
+      }
+    )
+  ] });
+}
+function FilterFieldControl({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  switch (field.type) {
+    case "multiselect":
+      return /* @__PURE__ */ jsx47(MultiSelectControl, { field, value: asArray(value), onChange });
+    case "text":
+      return /* @__PURE__ */ jsx47(TextControl, { field, value: asText(value), onChange, onClose });
+    case "daterange":
+      return /* @__PURE__ */ jsx47(DateRangeControl, { field, value: asDate(value), onChange, onClose });
+    case "numeric":
+      return /* @__PURE__ */ jsx47(NumericControl, { field, value: asNumeric(value), onChange, onClose });
+    default:
+      return null;
+  }
+}
+function MultiSelectControl({
+  field,
+  value,
+  onChange
+}) {
+  const options = field.options ?? [];
+  const [search, setSearch] = useState5("");
+  const searchable = field.searchable ?? options.length > 8;
+  const filtered = useMemo2(() => {
+    if (!search) return options;
+    const q = search.toLowerCase();
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || o.hint?.toLowerCase().includes(q)
+    );
+  }, [options, search]);
+  const toggle = (optionValue) => {
+    onChange(
+      value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
+    );
+  };
+  return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
+    searchable && /* @__PURE__ */ jsx47(
+      SearchInput,
+      {
+        placeholder: field.searchPlaceholder ?? "Search\u2026",
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        className: "w-full min-w-0"
+      }
+    ),
+    /* @__PURE__ */ jsx47("div", { className: "flex max-h-48 flex-col gap-1 overflow-y-auto pr-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx47("p", { className: "py-4 text-center text-xs text-muted-foreground", children: "No options found" }) : filtered.map((option) => /* @__PURE__ */ jsxs36(
+      "label",
+      {
+        className: "flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 transition-colors hover:bg-muted/50",
+        children: [
+          /* @__PURE__ */ jsx47(
+            Checkbox,
             {
-              className: "relative left-0 mt-2 w-full md:absolute md:left-[calc(100%+6px)] md:w-80 rounded-xl border border-border bg-popover p-3 shadow-lg transition-all duration-150 md:mt-0",
-              style: isMobile ? {} : { top: `${activeIdx * 36 + 6}px` },
-              children: [
-                activeMenu === "contact" && /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
-                  /* @__PURE__ */ jsxs36("div", { className: "relative flex items-center", children: [
-                    /* @__PURE__ */ jsx47(SearchIcon2, { className: "absolute left-2.5 size-4 text-muted-foreground/60" }),
-                    /* @__PURE__ */ jsx47(
-                      "input",
-                      {
-                        type: "text",
-                        placeholder: "Search by name or email...",
-                        value: contactSearch,
-                        onChange: (e) => setContactSearch(e.target.value),
-                        className: "w-full rounded-lg border border-border bg-background py-1.5 pl-8 pr-3 text-sm outline-none placeholder:text-muted-foreground/60 focus:border-border"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx47("div", { className: "max-h-48 overflow-y-auto flex flex-col gap-1 pr-1", children: filteredContacts.length === 0 ? /* @__PURE__ */ jsx47("p", { className: "py-4 text-center text-xs text-muted-foreground", children: "No contacts found" }) : filteredContacts.map((contact) => {
-                    const isChecked = selectedContacts.includes(contact.name);
-                    return /* @__PURE__ */ jsxs36(
-                      "label",
-                      {
-                        className: "flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-1.5 hover:bg-muted/50 transition-colors",
-                        children: [
-                          /* @__PURE__ */ jsx47(
-                            Checkbox,
-                            {
-                              checked: isChecked,
-                              onCheckedChange: () => handleContactToggle(contact.name)
-                            }
-                          ),
-                          /* @__PURE__ */ jsx47(Avatar, { variant: "secondary", children: /* @__PURE__ */ jsx47(AvatarFallback, { children: contact.initials }) }),
-                          /* @__PURE__ */ jsx47("span", { className: "text-sm font-medium text-foreground", children: contact.name })
-                        ]
-                      },
-                      contact.id
-                    );
-                  }) })
-                ] }),
-                activeMenu === "wallet" && /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
-                  /* @__PURE__ */ jsx47("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsx47(
-                    "input",
-                    {
-                      type: "text",
-                      placeholder: "Search by wallet...",
-                      value: walletInput,
-                      onChange: (e) => setWalletInput(e.target.value),
-                      className: "w-full rounded-lg border border-border bg-background px-3 py-1.5 text-sm outline-none placeholder:text-muted-foreground/60"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-end gap-2 pt-1 border-t border-border/40", children: [
-                    /* @__PURE__ */ jsx47(
-                      Button,
-                      {
-                        variant: "ghost",
-                        size: "sm",
-                        onClick: handleWalletClear,
-                        className: "text-muted-foreground hover:text-foreground h-8 px-3",
-                        children: "Clear"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx47(
-                      Button,
-                      {
-                        color: "primary",
-                        size: "sm",
-                        onClick: handleWalletApply,
-                        className: "h-8 px-3",
-                        children: "Apply"
-                      }
-                    )
-                  ] })
-                ] }),
-                activeMenu === "date" && /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-1", children: [
-                  presets.map((preset) => {
-                    const isSelected = selectedDatePreset === preset.id;
-                    return /* @__PURE__ */ jsxs36(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => handleDatePresetSelect(preset.id),
-                        className: cn(
-                          "flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-sm text-left transition-colors outline-none",
-                          isSelected ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
-                        ),
-                        children: [
-                          /* @__PURE__ */ jsx47("span", { children: preset.label }),
-                          preset.date && /* @__PURE__ */ jsx47("span", { className: "text-xs text-muted-foreground/70", children: preset.date })
-                        ]
-                      },
-                      preset.id
-                    );
-                  }),
-                  selectedDatePreset === "custom" && /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2 mt-2 pt-2 border-t border-border/40", children: [
-                    /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx47(
-                        "input",
-                        {
-                          type: "date",
-                          value: customDateFrom,
-                          onChange: (e) => setCustomDateFrom(e.target.value),
-                          className: "w-full rounded-lg border border-border bg-background px-2 py-1 text-xs outline-none"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx47("span", { className: "text-xs text-muted-foreground", children: "to" }),
-                      /* @__PURE__ */ jsx47(
-                        "input",
-                        {
-                          type: "date",
-                          value: customDateTo,
-                          onChange: (e) => setCustomDateTo(e.target.value),
-                          className: "w-full rounded-lg border border-border bg-background px-2 py-1 text-xs outline-none"
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx47("div", { className: "flex justify-end gap-2", children: /* @__PURE__ */ jsx47(
-                      Button,
-                      {
-                        color: "primary",
-                        size: "sm",
-                        onClick: handleCustomDateApply,
-                        className: "h-7 text-xs px-2.5",
-                        children: "Apply"
-                      }
-                    ) })
-                  ] })
-                ] }),
-                activeMenu === "ltv" && /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
-                  /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxs36("div", { className: "relative shrink-0", children: [
-                      /* @__PURE__ */ jsxs36(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => setLtvOperatorOpen(!isLtvOperatorOpen),
-                          className: "flex h-9 items-center gap-1 rounded-lg border border-border bg-background px-2.5 text-xs font-normal text-muted-foreground hover:bg-muted/50 hover:text-foreground outline-none whitespace-nowrap",
-                          children: [
-                            /* @__PURE__ */ jsx47("span", { children: OPERATORS.find((op) => op.id === ltvOperator)?.label.replace("...", "") }),
-                            /* @__PURE__ */ jsx47(ChevronDownIcon2, { className: "size-3" })
-                          ]
-                        }
-                      ),
-                      isLtvOperatorOpen && /* @__PURE__ */ jsx47("div", { className: "absolute left-0 top-full z-50 mt-1 w-32 rounded-lg border border-border bg-popover p-1 shadow-md", children: OPERATORS.map((op) => /* @__PURE__ */ jsx47(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            setLtvOperator(op.id);
-                            setLtvOperatorOpen(false);
-                          },
-                          className: "w-full rounded-md px-2 py-1 text-left text-xs text-foreground hover:bg-muted outline-none",
-                          children: op.label
-                        },
-                        op.id
-                      )) })
-                    ] }),
-                    /* @__PURE__ */ jsx47(
-                      "input",
-                      {
-                        type: "text",
-                        placeholder: "0.00",
-                        value: ltvValue,
-                        onChange: (e) => setLtvValue(e.target.value),
-                        className: "h-9 flex-1 min-w-0 rounded-lg border border-border bg-background px-3 py-1 text-sm outline-none placeholder:text-muted-foreground/60"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-end gap-2 pt-1 border-t border-border/40", children: [
-                    /* @__PURE__ */ jsx47(
-                      Button,
-                      {
-                        variant: "ghost",
-                        size: "sm",
-                        onClick: handleLtvClear,
-                        className: "text-muted-foreground hover:text-foreground h-8 px-3",
-                        children: "Clear"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx47(
-                      Button,
-                      {
-                        color: "primary",
-                        size: "sm",
-                        onClick: handleLtvApply,
-                        className: "h-8 px-3",
-                        children: "Apply"
-                      }
-                    )
-                  ] })
-                ] }),
-                activeMenu === "outstanding" && /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
-                  /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxs36("div", { className: "relative shrink-0", children: [
-                      /* @__PURE__ */ jsxs36(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => setOutstandingOperatorOpen(!isOutstandingOperatorOpen),
-                          className: "flex h-9 items-center gap-1 rounded-lg border border-border bg-background px-2.5 text-xs font-normal text-muted-foreground hover:bg-muted/50 hover:text-foreground outline-none whitespace-nowrap",
-                          children: [
-                            /* @__PURE__ */ jsx47("span", { children: OPERATORS.find((op) => op.id === outstandingOperator)?.label.replace("...", "") }),
-                            /* @__PURE__ */ jsx47(ChevronDownIcon2, { className: "size-3" })
-                          ]
-                        }
-                      ),
-                      isOutstandingOperatorOpen && /* @__PURE__ */ jsx47("div", { className: "absolute left-0 top-full z-50 mt-1 w-32 rounded-lg border border-border bg-popover p-1 shadow-md", children: OPERATORS.map((op) => /* @__PURE__ */ jsx47(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            setOutstandingOperator(op.id);
-                            setOutstandingOperatorOpen(false);
-                          },
-                          className: "w-full rounded-md px-2 py-1 text-left text-xs text-foreground hover:bg-muted outline-none",
-                          children: op.label
-                        },
-                        op.id
-                      )) })
-                    ] }),
-                    /* @__PURE__ */ jsx47(
-                      "input",
-                      {
-                        type: "text",
-                        placeholder: "0.00",
-                        value: outstandingValue,
-                        onChange: (e) => setOutstandingValue(e.target.value),
-                        className: "h-9 flex-1 min-w-0 rounded-lg border border-border bg-background px-3 py-1 text-sm outline-none placeholder:text-muted-foreground/60"
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-end gap-2 pt-1 border-t border-border/40", children: [
-                    /* @__PURE__ */ jsx47(
-                      Button,
-                      {
-                        variant: "ghost",
-                        size: "sm",
-                        onClick: handleOutstandingClear,
-                        className: "text-muted-foreground hover:text-foreground h-8 px-3",
-                        children: "Clear"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx47(
-                      Button,
-                      {
-                        color: "primary",
-                        size: "sm",
-                        onClick: handleOutstandingApply,
-                        className: "h-8 px-3",
-                        children: "Apply"
-                      }
-                    )
-                  ] })
-                ] })
-              ]
+              checked: value.includes(option.value),
+              onCheckedChange: () => toggle(option.value)
             }
-          )
-        ] })
+          ),
+          option.icon,
+          /* @__PURE__ */ jsxs36("span", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ jsx47("span", { className: "truncate text-sm font-medium text-foreground", children: option.label }),
+            option.hint && /* @__PURE__ */ jsx47("span", { className: "truncate text-xs text-muted-foreground", children: option.hint })
+          ] })
+        ]
+      },
+      option.value
+    )) })
+  ] });
+}
+function TextControl({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  const [draft, setDraft] = useState5(value);
+  useEffect3(() => setDraft(value), [value]);
+  return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
+    /* @__PURE__ */ jsx47(
+      "input",
+      {
+        type: "text",
+        placeholder: field.placeholder ?? "Type a value\u2026",
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            onChange(draft);
+            onClose();
+          }
+        },
+        className: controlClass({ size: "sm" }, "w-full")
+      }
+    ),
+    /* @__PURE__ */ jsx47(
+      ApplyClear,
+      {
+        onClear: () => {
+          setDraft("");
+          onChange("");
+          onClose();
+        },
+        onApply: () => {
+          onChange(draft);
+          onClose();
+        }
       }
     )
-  ] }) });
+  ] });
+}
+function DateRangeControl({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  const presets = field.presets ?? DEFAULT_PRESETS;
+  const [from, setFrom] = useState5(value.from ?? "");
+  const [to, setTo] = useState5(value.to ?? "");
+  return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-1", children: [
+    presets.map((preset) => {
+      const isSelected = value.preset === preset.id;
+      return /* @__PURE__ */ jsxs36(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if (preset.id === "custom") {
+              onChange({ preset: "custom", from, to });
+            } else {
+              onChange({ preset: preset.id });
+              onClose();
+            }
+          },
+          className: cn(
+            "flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors outline-none",
+            isSelected ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx47("span", { children: preset.label }),
+            preset.hint && /* @__PURE__ */ jsx47("span", { className: "text-xs text-muted-foreground/70", children: preset.hint })
+          ]
+        },
+        preset.id
+      );
+    }),
+    value.preset === "custom" && /* @__PURE__ */ jsxs36("div", { className: "mt-2 flex flex-col gap-2 border-t border-border/40 pt-2", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx47(
+          "input",
+          {
+            type: "date",
+            value: from,
+            onChange: (e) => setFrom(e.target.value),
+            className: controlClass({ size: "sm" }, "w-full text-xs")
+          }
+        ),
+        /* @__PURE__ */ jsx47("span", { className: "text-xs text-muted-foreground", children: "to" }),
+        /* @__PURE__ */ jsx47(
+          "input",
+          {
+            type: "date",
+            value: to,
+            onChange: (e) => setTo(e.target.value),
+            className: controlClass({ size: "sm" }, "w-full text-xs")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx47("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx47(
+        Button,
+        {
+          color: "primary",
+          size: "sm",
+          className: "h-8 px-3",
+          onClick: () => {
+            onChange({ preset: "custom", from, to });
+            onClose();
+          },
+          children: "Apply"
+        }
+      ) })
+    ] })
+  ] });
+}
+function NumericControl({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  const operators = field.operators ?? DEFAULT_OPERATORS;
+  const [operator, setOperator] = useState5(value.operator);
+  const [draft, setDraft] = useState5(value.value);
+  useEffect3(() => {
+    setOperator(value.operator);
+    setDraft(value.value);
+  }, [value.operator, value.value]);
+  return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-2.5", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs36(Select, { value: operator, onValueChange: (v) => setOperator(v), children: [
+        /* @__PURE__ */ jsx47(SelectTrigger, { size: "sm", className: "shrink-0", children: /* @__PURE__ */ jsx47(SelectValue, {}) }),
+        /* @__PURE__ */ jsx47(SelectContent, { children: operators.map((op) => /* @__PURE__ */ jsx47(SelectItem, { value: op.id, children: op.label }, op.id)) })
+      ] }),
+      /* @__PURE__ */ jsx47(
+        "input",
+        {
+          type: "text",
+          inputMode: "decimal",
+          placeholder: field.placeholder ?? "0.00",
+          value: draft,
+          onChange: (e) => setDraft(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              onChange(draft ? { operator, value: draft } : null);
+              onClose();
+            }
+          },
+          className: controlClass({ size: "sm" }, "min-w-0 flex-1")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx47(
+      ApplyClear,
+      {
+        onClear: () => {
+          setDraft("");
+          onChange(null);
+          onClose();
+        },
+        onApply: () => {
+          onChange(draft ? { operator, value: draft } : null);
+          onClose();
+        }
+      }
+    )
+  ] });
+}
+function ApplyClear({ onClear, onApply }) {
+  return /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-end gap-2 border-t border-border/40 pt-1", children: [
+    /* @__PURE__ */ jsx47(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: onClear,
+        className: "h-8 px-3 text-muted-foreground hover:text-foreground",
+        children: "Clear"
+      }
+    ),
+    /* @__PURE__ */ jsx47(Button, { color: "primary", size: "sm", onClick: onApply, className: "h-8 px-3", children: "Apply" })
+  ] });
 }
 
 // src/app/data/DataTable.tsx
-import { useEffect as useEffect4, useMemo as useMemo3, useState as useState5 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useState as useState6 } from "react";
 import {
   ArrowDownIcon,
   ArrowUpDownIcon,
@@ -4356,7 +4471,7 @@ function DataTable({
   defaultPageIndex = 0,
   onPageChange
 }) {
-  const [uncontrolledSort, setUncontrolledSort] = useState5(
+  const [uncontrolledSort, setUncontrolledSort] = useState6(
     defaultSort
   );
   const isSortControlled = sortProp !== void 0;
@@ -4367,7 +4482,7 @@ function DataTable({
     }
     onSortChange?.(next);
   };
-  const [uncontrolledSelected, setUncontrolledSelected] = useState5(
+  const [uncontrolledSelected, setUncontrolledSelected] = useState6(
     defaultSelectedKeys ?? []
   );
   const isSelectionControlled = selectedKeysProp !== void 0;
@@ -4379,7 +4494,7 @@ function DataTable({
     }
     onSelectionChange?.(next);
   };
-  const [uncontrolledPage, setUncontrolledPage] = useState5(defaultPageIndex);
+  const [uncontrolledPage, setUncontrolledPage] = useState6(defaultPageIndex);
   const isPageControlled = pageIndexProp !== void 0;
   const rawPageIndex = isPageControlled ? pageIndexProp : uncontrolledPage;
   const setPage = (next) => {
@@ -4683,7 +4798,7 @@ var ChartPanel = ({
 };
 
 // src/app/data/MetricRow.tsx
-import { useId as useId10, useState as useState6 } from "react";
+import { useId as useId10, useState as useState7 } from "react";
 import { jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 var MetricRow = ({
   title,
@@ -4701,7 +4816,7 @@ var MetricRow = ({
   const metricTileClass = useAppDensityClass("metricTile");
   const titleId = useId10();
   const selectable = onMetricChange != null || activeMetricId != null;
-  const [internalId, setInternalId] = useState6(
+  const [internalId, setInternalId] = useState7(
     defaultActiveMetricId ?? metrics[0]?.id
   );
   const activeId = activeMetricId ?? internalId;
@@ -4775,7 +4890,7 @@ var MetricRow = ({
 };
 
 // src/app/data/MetricChartCard.tsx
-import { useId as useId11, useState as useState7 } from "react";
+import { useId as useId11, useState as useState8 } from "react";
 import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 var MetricChartCard = ({
   title,
@@ -4801,7 +4916,7 @@ var MetricChartCard = ({
   const metricChartRegionClass = useAppDensityClass("metricChartRegion");
   const metricTileClass = useAppDensityClass("metricTile");
   const titleId = useId11();
-  const [internalId, setInternalId] = useState7(
+  const [internalId, setInternalId] = useState8(
     defaultActiveMetricId ?? metrics[0]?.id
   );
   const activeId = activeMetricId ?? internalId;
@@ -4913,9 +5028,9 @@ var MetricChartCard = ({
 };
 
 // src/hooks/use-live-query.ts
-import { useCallback as useCallback2, useEffect as useEffect5, useRef, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef2, useState as useState9 } from "react";
 function useInterval(callback, delayMs) {
-  const saved = useRef(callback);
+  const saved = useRef2(callback);
   useEffect5(() => {
     saved.current = callback;
   }, [callback]);
@@ -4932,18 +5047,18 @@ function useLiveQuery(fetcher, options = {}) {
     immediate = true,
     refetchOnFocus = true
   } = options;
-  const [data, setData] = useState8(void 0);
-  const [error, setError] = useState8(void 0);
-  const [loading, setLoading] = useState8(enabled);
-  const [refreshing, setRefreshing] = useState8(false);
-  const [lastUpdated, setLastUpdated] = useState8(null);
-  const fetcherRef = useRef(fetcher);
+  const [data, setData] = useState9(void 0);
+  const [error, setError] = useState9(void 0);
+  const [loading, setLoading] = useState9(enabled);
+  const [refreshing, setRefreshing] = useState9(false);
+  const [lastUpdated, setLastUpdated] = useState9(null);
+  const fetcherRef = useRef2(fetcher);
   useEffect5(() => {
     fetcherRef.current = fetcher;
   }, [fetcher]);
-  const mounted = useRef(true);
-  const requestId = useRef(0);
-  const hasData = useRef(false);
+  const mounted = useRef2(true);
+  const requestId = useRef2(0);
+  const hasData = useRef2(false);
   useEffect5(() => {
     mounted.current = true;
     return () => {