@timbal-ai/timbal-react 1.5.0 → 1.6.1

package/dist/index.cjs

@@ -38,7 +38,7 @@ __export(index_exports, {
   AccordionContent: () => AccordionContent,
   AccordionItem: () => AccordionItem,
   AccordionTrigger: () => AccordionTrigger,
-  ActionBarPrimitive: () => import_react79.ActionBarPrimitive,
+  ActionBarPrimitive: () => import_react84.ActionBarPrimitive,
   Alert: () => Alert,
   AlertDescription: () => AlertDescription,
   AlertDialog: () => AlertDialog,
@@ -63,8 +63,8 @@ __export(index_exports, {
   ArtifactRegistryProvider: () => ArtifactRegistryProvider,
   ArtifactView: () => ArtifactView,
   AspectRatio: () => AspectRatio,
-  AssistantRuntimeProvider: () => import_react79.AssistantRuntimeProvider,
-  AuiIf: () => import_react79.AuiIf,
+  AssistantRuntimeProvider: () => import_react84.AssistantRuntimeProvider,
+  AuiIf: () => import_react84.AuiIf,
   AuthGuard: () => AuthGuard,
   Avatar: () => Avatar,
   AvatarFallback: () => AvatarFallback,
@@ -121,7 +121,7 @@ __export(index_exports, {
   CommandSeparator: () => CommandSeparator,
   CommandShortcut: () => CommandShortcut,
   Composer: () => Composer,
-  ComposerPrimitive: () => import_react79.ComposerPrimitive,
+  ComposerPrimitive: () => import_react84.ComposerPrimitive,
   ConnectionRow: () => ConnectionRow,
   ConnectionRowList: () => ConnectionRowList,
   ContextMenu: () => ContextMenu,
@@ -140,6 +140,7 @@ __export(index_exports, {
   ContextMenuTrigger: () => ContextMenuTrigger,
   CopyButton: () => CopyButton,
   DEFAULT_UPLOAD_ACCEPT: () => DEFAULT_UPLOAD_ACCEPT,
+  DURATION: () => DURATION,
   DangerZone: () => DangerZone,
   DangerZoneAction: () => DangerZoneAction,
   DataTable: () => DataTable,
@@ -173,6 +174,7 @@ __export(index_exports, {
   DropdownMenuSubContent: () => DropdownMenuSubContent,
   DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
+  EASE: () => EASE,
   EmptyState: () => EmptyState,
   ExpandableSection: () => ExpandableSection,
   Field: () => Field,
@@ -218,7 +220,9 @@ __export(index_exports, {
   KbdGroup: () => KbdGroup,
   Label: () => Label3,
   LineAreaChart: () => LineAreaChart,
+  Magnetic: () => Magnetic,
   MarkdownText: () => MarkdownText,
+  Marquee: () => Marquee,
   MemoPillSegmentedTabs: () => MemoPillSegmentedTabs,
   Menubar: () => Menubar,
   MenubarCheckboxItem: () => MenubarCheckboxItem,
@@ -234,7 +238,7 @@ __export(index_exports, {
   MenubarSubContent: () => MenubarSubContent,
   MenubarSubTrigger: () => MenubarSubTrigger,
   MenubarTrigger: () => MenubarTrigger,
-  MessagePrimitive: () => import_react79.MessagePrimitive,
+  MessagePrimitive: () => import_react84.MessagePrimitive,
   MetricChartCard: () => MetricChartCard,
   MetricRow: () => MetricRow,
   MetricTile: () => MetricTile,
@@ -257,6 +261,7 @@ __export(index_exports, {
   PaginationLink: () => PaginationLink,
   PaginationNext: () => PaginationNext,
   PaginationPrevious: () => PaginationPrevious,
+  Parallax: () => Parallax,
   PieChart: () => PieChart,
   PillSegmentedTabs: () => PillSegmentedTabs,
   PlanBadge: () => PlanBadge,
@@ -273,8 +278,11 @@ __export(index_exports, {
   RadioGroupItem: () => RadioGroupItem,
   Rating: () => Rating,
   ResourceCard: () => ResourceCard,
+  Reveal: () => Reveal,
   SEMANTIC_COLOR_TOKENS: () => SEMANTIC_COLOR_TOKENS,
+  SITE_AGENT_INSTRUCTIONS: () => SITE_AGENT_INSTRUCTIONS,
   SLOP_BUDGETS: () => SLOP_BUDGETS,
+  SPRING: () => SPRING,
   STUDIO_NAV_MODE: () => STUDIO_NAV_MODE,
   ScrollArea: () => ScrollArea,
   ScrollBar: () => ScrollBar,
@@ -334,9 +342,10 @@ __export(index_exports, {
   TableHeader: () => TableHeader,
   TableRow: () => TableRow,
   TagInput: () => TagInput,
+  TextReveal: () => TextReveal,
   Textarea: () => Textarea,
   Thread: () => Thread,
-  ThreadPrimitive: () => import_react79.ThreadPrimitive,
+  ThreadPrimitive: () => import_react84.ThreadPrimitive,
   TimbalChat: () => TimbalChat,
   TimbalChatShell: () => TimbalChatShell,
   TimbalMark: () => TimbalMark,
@@ -435,15 +444,15 @@ __export(index_exports, {
   useAppShellChat: () => useAppShellChat,
   useAppShellNav: () => useAppShellNav,
   useArtifactRegistry: () => useArtifactRegistry,
-  useComposerRuntime: () => import_react79.useComposerRuntime,
+  useComposerRuntime: () => import_react84.useComposerRuntime,
   useInterval: () => useInterval,
   useLiveQuery: () => useLiveQuery,
-  useMessageRuntime: () => import_react79.useMessageRuntime,
+  useMessageRuntime: () => import_react84.useMessageRuntime,
   useOptionalSession: () => useOptionalSession,
   useResolvedSuggestions: () => useResolvedSuggestions,
   useSession: () => useSession,
-  useThread: () => import_react79.useThread,
-  useThreadRuntime: () => import_react79.useThreadRuntime,
+  useThread: () => import_react84.useThread,
+  useThreadRuntime: () => import_react84.useThreadRuntime,
   useTimbalRuntime: () => useTimbalRuntime,
   useTimbalStream: () => useTimbalStream,
   useToast: () => useToast,
@@ -1413,22 +1422,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: [
@@ -1595,7 +1604,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,
@@ -1692,9 +1701,9 @@ function avatarChartVariantClass(_seed) {
   return AVATAR_PRIMARY_FALLBACK_CLASS;
 }
 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,
@@ -3875,16 +3884,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!",
@@ -4141,7 +4150,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
       ),
@@ -5790,8 +5799,8 @@ var import_lucide_react9 = require("lucide-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",
@@ -5819,7 +5828,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.5 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";
+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/chat/workforce-selector.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -5944,8 +5953,8 @@ var SIDEBAR_MOBILE_PX = 272;
 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`;
@@ -6526,7 +6535,7 @@ function DropdownMenuCheckboxItem({
     import_radix_ui6.DropdownMenu.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
-      className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
+      className: cn(overlayItemClass, "py-1 pr-2 pl-8", className),
       checked,
       ...props,
       children: [
@@ -6556,7 +6565,7 @@ function DropdownMenuRadioItem({
     import_radix_ui6.DropdownMenu.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
-      className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
+      className: cn(overlayItemClass, "py-1 pr-2 pl-8", className),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_radix_ui6.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react10.CircleIcon, { className: "size-2 fill-current" }) }) }),
@@ -7810,10 +7819,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(
@@ -8123,7 +8132,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",
@@ -8204,7 +8217,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>
@@ -8224,7 +8237,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\` |
@@ -8293,6 +8306,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\`. |
@@ -8307,6 +8321,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\`. |
@@ -8351,6 +8367,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)
@@ -8417,6 +8448,7 @@ import {
   DataTable,
   FilterBar,
   FilterField,
+  FilterDropdown,
   AlertCard,
   CatalogCard,
 } from "@timbal-ai/timbal-react/app";
@@ -8471,6 +8503,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-]+:)*/, "");
@@ -8514,6 +8548,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 });
       }
     }
@@ -8586,6 +8630,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",
@@ -9612,30 +9665,36 @@ var Sparkline = ({
   height = 28,
   strokeWidth = 1.5,
   className,
-  ariaLabel = "Trend"
+  ariaLabel = "Trend",
+  interactive = false,
+  labels,
+  formatValue
 }) => {
   const uid = (0, import_react57.useId)();
+  const containerRef = (0, import_react57.useRef)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react57.useState)(null);
   const values = data.map((d) => typeof d === "number" ? d : toNum(d[dataKey]));
   if (values.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime60.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_runtime60.jsxs)(
+  const svg = /* @__PURE__ */ (0, import_jsx_runtime60.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",
@@ -9645,7 +9704,7 @@ var Sparkline = ({
             /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("stop", { offset: "0%", style: { stopColor: color, stopOpacity: 0.25 } }),
             /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("stop", { offset: "100%", style: { stopColor: color, stopOpacity: 0 } })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("path", { d: monotoneAreaPath(points, height - pad), fill: `url(#${uid}-spark)` })
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("path", { d: monotoneAreaPath(points, height - padY), fill: `url(#${uid}-spark)` })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "path",
@@ -9657,7 +9716,81 @@ var Sparkline = ({
             strokeLinecap: "round",
             strokeLinejoin: "round"
           }
-        )
+        ),
+        interactive && activeIndex != null && points[activeIndex] ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.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_runtime60.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_runtime60.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_runtime60.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_runtime60.jsx)("span", { className: "mr-1.5 text-neutral-300 dark:text-neutral-500", children: labels[activeIndex] }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: formattedValue })
+            ]
+          }
+        ) : null
       ]
     }
   );
@@ -9675,6 +9808,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",
@@ -9704,8 +9846,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_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
     active ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "span",
@@ -9717,17 +9861,6 @@ var MetricTile = ({
         )
       }
     ) : null,
-    hasSparkline ? /* @__PURE__ */ (0, import_jsx_runtime61.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_runtime61.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_runtime61.jsxs)("div", { className: "relative z-10 flex flex-col gap-1 w-full text-left", children: [
       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-xs font-semibold text-muted-foreground/80 tracking-tight", children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { className: "flex items-center gap-2", children: [
@@ -9746,7 +9879,28 @@ var MetricTile = ({
           }
         ) : null
       ] })
-    ] })
+    ] }),
+    hasSparkline ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      "div",
+      {
+        className: cn(
+          "relative z-10 mt-2",
+          bandBleed
+        ),
+        children: sparkline ?? /* @__PURE__ */ (0, import_jsx_runtime61.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) {
@@ -10447,7 +10601,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
@@ -10861,7 +11015,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,
@@ -11592,7 +11746,7 @@ var FilterField = ({
 
 // src/app/data/FilterDropdown.tsx
 var import_react73 = require("react");
-var import_lucide_react24 = require("lucide-react");
+var import_lucide_react25 = require("lucide-react");
 
 // src/ui/checkbox.tsx
 var import_radix_ui7 = require("radix-ui");
@@ -11625,23 +11779,178 @@ function Checkbox({
   );
 }
 
-// src/ui/popover.tsx
+// src/ui/select.tsx
 var import_radix_ui8 = require("radix-ui");
+var import_lucide_react24 = require("lucide-react");
 var import_jsx_runtime105 = require("react/jsx-runtime");
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_radix_ui8.Select.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_radix_ui8.Select.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_radix_ui8.Select.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+    import_radix_ui8.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_runtime105.jsx)(import_radix_ui8.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_lucide_react24.ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_radix_ui8.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+    import_radix_ui8.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_runtime105.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+          import_radix_ui8.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_runtime105.jsx)(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    import_radix_ui8.Select.Label,
+    {
+      "data-slot": "select-label",
+      className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+    import_radix_ui8.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_runtime105.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_radix_ui8.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_lucide_react24.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_radix_ui8.Select.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    import_radix_ui8.Select.Separator,
+    {
+      "data-slot": "select-separator",
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    import_radix_ui8.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_runtime105.jsx)(import_lucide_react24.ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+    import_radix_ui8.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_runtime105.jsx)(import_lucide_react24.ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+
+// src/ui/popover.tsx
+var import_radix_ui9 = require("radix-ui");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_radix_ui8.Popover.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_radix_ui9.Popover.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_radix_ui8.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_radix_ui9.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverAnchor({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_radix_ui8.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_radix_ui9.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 function PopoverContent({
   className,
@@ -11650,8 +11959,8 @@ function PopoverContent({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_radix_ui8.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-    import_radix_ui8.Popover.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_radix_ui9.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    import_radix_ui9.Popover.Content,
     {
       "data-slot": "popover-content",
       "data-variant": variant,
@@ -11663,7 +11972,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
       ),
@@ -11673,499 +11982,471 @@ function PopoverContent({
 }
 
 // src/app/data/FilterDropdown.tsx
-var import_jsx_runtime106 = 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_runtime107 = 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_react73.useState)(false);
-  const [activeMenu, setActiveMenu] = (0, import_react73.useState)("contact");
+  const [activeId, setActiveId] = (0, import_react73.useState)(fields[0]?.id ?? null);
   const [isMobile, setIsMobile] = (0, import_react73.useState)(false);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = (0, import_react73.useState)(defaultValue ?? {});
+  const values = isControlled ? value : internal;
   (0, import_react73.useEffect)(() => {
     const checkMobile = () => setIsMobile(window.innerWidth < 768);
     checkMobile();
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
-  const [selectedContacts, setSelectedContacts] = (0, import_react73.useState)(
-    filters?.contacts ?? initialFilters?.contacts ?? []
-  );
-  const [walletInput, setWalletInput] = (0, import_react73.useState)(filters?.walletAddress ?? initialFilters?.walletAddress ?? "");
-  const [appliedWallet, setAppliedWallet] = (0, import_react73.useState)(filters?.walletAddress ?? initialFilters?.walletAddress ?? "");
-  const [selectedDatePreset, setSelectedDatePreset] = (0, import_react73.useState)(
-    filters?.lastInvoiceDate ?? initialFilters?.lastInvoiceDate ?? null
-  );
-  const [customDateFrom, setCustomDateFrom] = (0, import_react73.useState)(
-    filters?.customDateRange?.from ?? initialFilters?.customDateRange?.from ?? ""
-  );
-  const [customDateTo, setCustomDateTo] = (0, import_react73.useState)(
-    filters?.customDateRange?.to ?? initialFilters?.customDateRange?.to ?? ""
-  );
-  const [ltvOperator, setLtvOperator] = (0, import_react73.useState)(
-    filters?.lifetimeValue?.operator ?? initialFilters?.lifetimeValue?.operator ?? "greater_than"
-  );
-  const [ltvValue, setLtvValue] = (0, import_react73.useState)(filters?.lifetimeValue?.value ?? initialFilters?.lifetimeValue?.value ?? "");
-  const [isLtvOperatorOpen, setLtvOperatorOpen] = (0, import_react73.useState)(false);
-  const [outstandingOperator, setOutstandingOperator] = (0, import_react73.useState)(
-    filters?.outstanding?.operator ?? initialFilters?.outstanding?.operator ?? "greater_than"
-  );
-  const [outstandingValue, setOutstandingValue] = (0, import_react73.useState)(filters?.outstanding?.value ?? initialFilters?.outstanding?.value ?? "");
-  const [isOutstandingOperatorOpen, setOutstandingOperatorOpen] = (0, import_react73.useState)(false);
   (0, import_react73.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_react73.useState)("");
-  const [walletSearch, setWalletSearch] = (0, import_react73.useState)("");
-  const refDate = (0, import_react73.useMemo)(() => new Date(2026, 5, 26), []);
-  const presets = (0, import_react73.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_react73.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);
-  };
-  const handleWalletClear = () => {
-    setWalletInput("");
-    setAppliedWallet("");
-    notifyChanges({ walletAddress: "" });
-    setIsOpen(false);
-  };
-  const handleDatePresetSelect = (presetId) => {
-    setSelectedDatePreset(presetId);
-    if (presetId !== "custom") {
-      notifyChanges({ lastInvoiceDate: presetId, customDateRange: void 0 });
-      setIsOpen(false);
-    }
-  };
-  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);
+    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 handleOutstandingClear = () => {
-    setOutstandingValue("");
-    notifyChanges({ outstanding: null });
-    setIsOpen(false);
+  const clearAll = () => {
+    if (!isControlled) setInternal({});
+    onChange?.({});
   };
-  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_runtime106.jsx)(import_lucide_react24.UserIcon, { className: "size-4" }) },
-    { id: "wallet", label: "Wallet address", icon: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react24.WalletIcon, { className: "size-4" }) },
-    { id: "date", label: "Last invoice date", icon: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react24.CalendarIcon, { className: "size-4" }) },
-    { id: "ltv", label: "Lifetime value", icon: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react24.TrendingUpIcon, { className: "size-4" }) },
-    { id: "outstanding", label: "Outstanding", icon: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react24.CircleDollarSignIcon, { className: "size-4" }) }
-  ];
-  const activeIdx = menuItems.findIndex((item) => item.id === activeMenu);
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: cn("inline-block", className), children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
-      Button,
-      {
-        variant: "outline",
-        size: "sm",
-        shape: "pill",
-        className: "border-dashed font-medium text-muted-foreground hover:text-foreground",
-        iconLeading: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react24.ListFilterIcon, { className: "size-4" }),
-        children: "Filter"
+  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))
+        });
       }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
-      PopoverContent,
-      {
-        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_runtime106.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_runtime106.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_runtime106.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_runtime106.jsxs)("span", { className: "flex items-center gap-2", children: [
-                    item.icon,
-                    /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { children: item.label })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react24.ChevronRightIcon, { className: "size-4 text-muted-foreground/50" })
-                ]
-              },
-              item.id
-            );
-          }) }),
-          activeMenu && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
-            "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: [
-                activeMenu === "contact" && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "relative flex items-center", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react24.SearchIcon, { className: "absolute left-2.5 size-4 text-muted-foreground/60" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.jsx)("div", { className: "max-h-48 overflow-y-auto flex flex-col gap-1 pr-1", children: filteredContacts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.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_runtime106.jsx)(
-                            Checkbox,
-                            {
-                              checked: isChecked,
-                              onCheckedChange: () => handleContactToggle(contact.name)
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Avatar, { variant: "secondary", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(AvatarFallback, { children: contact.initials }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-sm font-medium text-foreground", children: contact.name })
-                        ]
-                      },
-                      contact.id
-                    );
-                  }) })
-                ] }),
-                activeMenu === "wallet" && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "relative flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.jsxs)("div", { className: "flex items-center justify-end gap-2 pt-1 border-t border-border/40", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.jsx)(
-                      Button,
-                      {
-                        color: "primary",
-                        size: "sm",
-                        onClick: handleWalletApply,
-                        className: "h-8 px-3",
-                        children: "Apply"
-                      }
-                    )
-                  ] })
-                ] }),
-                activeMenu === "date" && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                  presets.map((preset) => {
-                    const isSelected = selectedDatePreset === preset.id;
-                    return /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.jsx)("span", { children: preset.label }),
-                          preset.date && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-xs text-muted-foreground/70", children: preset.date })
-                        ]
-                      },
-                      preset.id
-                    );
-                  }),
-                  selectedDatePreset === "custom" && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex flex-col gap-2 mt-2 pt-2 border-t border-border/40", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.jsx)("span", { className: "text-xs text-muted-foreground", children: "to" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.jsx)("div", { className: "flex justify-end gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
-                      Button,
-                      {
-                        color: "primary",
-                        size: "sm",
-                        onClick: handleCustomDateApply,
-                        className: "h-7 text-xs px-2.5",
-                        children: "Apply"
-                      }
-                    ) })
-                  ] })
-                ] }),
-                activeMenu === "ltv" && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "relative shrink-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.jsx)("span", { children: OPERATORS.find((op) => op.id === ltvOperator)?.label.replace("...", "") }),
-                            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react24.ChevronDownIcon, { className: "size-3" })
-                          ]
-                        }
-                      ),
-                      isLtvOperatorOpen && /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.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_runtime106.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_runtime106.jsxs)("div", { className: "flex items-center justify-end gap-2 pt-1 border-t border-border/40", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.jsx)(
-                      Button,
-                      {
-                        color: "primary",
-                        size: "sm",
-                        onClick: handleLtvApply,
-                        className: "h-8 px-3",
-                        children: "Apply"
-                      }
-                    )
-                  ] })
-                ] }),
-                activeMenu === "outstanding" && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "relative shrink-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.jsx)("span", { children: OPERATORS.find((op) => op.id === outstandingOperator)?.label.replace("...", "") }),
-                            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react24.ChevronDownIcon, { className: "size-3" })
-                          ]
-                        }
-                      ),
-                      isOutstandingOperatorOpen && /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.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
-                      )) })
+    } 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_runtime107.jsxs)("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "border-dashed font-medium text-muted-foreground hover:text-foreground",
+          iconLeading: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react25.ListFilterIcon, { className: "size-4" }),
+          children: label
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime107.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_runtime107.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_runtime107.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_runtime107.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_runtime107.jsxs)("span", { className: "flex items-center gap-2", children: [
+                      field.icon,
+                      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { children: field.label })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.jsxs)("div", { className: "flex items-center justify-end gap-2 pt-1 border-t border-border/40", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime106.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_runtime106.jsx)(
-                      Button,
-                      {
-                        color: "primary",
-                        size: "sm",
-                        onClick: handleOutstandingApply,
-                        className: "h-8 px-3",
-                        children: "Apply"
-                      }
-                    )
-                  ] })
-                ] })
-              ]
+                    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react25.ChevronRightIcon, { className: "size-4 text-muted-foreground/50" })
+                  ]
+                },
+                field.id
+              );
+            }) }),
+            activeField && /* @__PURE__ */ (0, import_jsx_runtime107.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_runtime107.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_runtime107.jsx)(FilterChip, { label: chip.label, onRemove: chip.remove }, chip.id)),
+    showActiveChips && chips.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime107.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_runtime107.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_runtime107.jsx)("span", { className: "truncate", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime107.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_runtime107.jsx)(import_lucide_react25.XIcon, { className: "size-3.5" })
+      }
+    )
+  ] });
+}
+function FilterFieldControl({
+  field,
+  value,
+  onChange,
+  onClose
+}) {
+  switch (field.type) {
+    case "multiselect":
+      return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(MultiSelectControl, { field, value: asArray(value), onChange });
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(TextControl, { field, value: asText(value), onChange, onClose });
+    case "daterange":
+      return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(DateRangeControl, { field, value: asDate(value), onChange, onClose });
+    case "numeric":
+      return /* @__PURE__ */ (0, import_jsx_runtime107.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_react73.useState)("");
+  const searchable = field.searchable ?? options.length > 8;
+  const filtered = (0, import_react73.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]
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
+    searchable && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+      SearchInput,
+      {
+        placeholder: field.searchPlaceholder ?? "Search\u2026",
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        className: "w-full min-w-0"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "flex max-h-48 flex-col gap-1 overflow-y-auto pr-1", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("p", { className: "py-4 text-center text-xs text-muted-foreground", children: "No options found" }) : filtered.map((option) => /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+      "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__ */ (0, import_jsx_runtime107.jsx)(
+            Checkbox,
+            {
+              checked: value.includes(option.value),
+              onCheckedChange: () => toggle(option.value)
             }
-          )
-        ] })
+          ),
+          option.icon,
+          /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("span", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "truncate text-sm font-medium text-foreground", children: option.label }),
+            option.hint && /* @__PURE__ */ (0, import_jsx_runtime107.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_react73.useState)(value);
+  (0, import_react73.useEffect)(() => setDraft(value), [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime107.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_runtime107.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_react73.useState)(value.from ?? "");
+  const [to, setTo] = (0, import_react73.useState)(value.to ?? "");
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex flex-col gap-1", children: [
+    presets.map((preset) => {
+      const isSelected = value.preset === preset.id;
+      return /* @__PURE__ */ (0, import_jsx_runtime107.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_runtime107.jsx)("span", { children: preset.label }),
+            preset.hint && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "text-xs text-muted-foreground/70", children: preset.hint })
+          ]
+        },
+        preset.id
+      );
+    }),
+    value.preset === "custom" && /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "mt-2 flex flex-col gap-2 border-t border-border/40 pt-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+          "input",
+          {
+            type: "date",
+            value: from,
+            onChange: (e) => setFrom(e.target.value),
+            className: controlClass({ size: "sm" }, "w-full text-xs")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "text-xs text-muted-foreground", children: "to" }),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+          "input",
+          {
+            type: "date",
+            value: to,
+            onChange: (e) => setTo(e.target.value),
+            className: controlClass({ size: "sm" }, "w-full text-xs")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime107.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_react73.useState)(value.operator);
+  const [draft, setDraft] = (0, import_react73.useState)(value.value);
+  (0, import_react73.useEffect)(() => {
+    setOperator(value.operator);
+    setDraft(value.value);
+  }, [value.operator, value.value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(Select, { value: operator, onValueChange: (v) => setOperator(v), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(SelectTrigger, { size: "sm", className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(SelectValue, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(SelectContent, { children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(SelectItem, { value: op.id, children: op.label }, op.id)) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime107.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_runtime107.jsx)(
+      ApplyClear,
+      {
+        onClear: () => {
+          setDraft("");
+          onChange(null);
+          onClose();
+        },
+        onApply: () => {
+          onChange(draft ? { operator, value: draft } : null);
+          onClose();
+        }
+      }
+    )
+  ] });
+}
+function ApplyClear({ onClear, onApply }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex items-center justify-end gap-2 border-t border-border/40 pt-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime107.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_runtime107.jsx)(Button, { color: "primary", size: "sm", onClick: onApply, className: "h-8 px-3", children: "Apply" })
+  ] });
 }
 
 // src/app/data/DataTable.tsx
 var import_react74 = require("react");
-var import_lucide_react25 = require("lucide-react");
+var import_lucide_react26 = require("lucide-react");
 
 // src/ui/skeleton.tsx
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
     "div",
     {
       "data-slot": "skeleton",
@@ -12176,7 +12457,7 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/app/data/DataTable.tsx
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_jsx_runtime109 = require("react/jsx-runtime");
 var shellClass2 = "w-full";
 var tableClass = "w-full border-separate border-spacing-0 bg-transparent text-sm";
 var headRowClass = "";
@@ -12219,12 +12500,12 @@ function SortIndicator({
 }) {
   const iconClass = "size-3.5 shrink-0 opacity-60 group-hover:opacity-100";
   if (!active) {
-    return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react25.ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react26.ArrowUpDownIcon, { className: iconClass, "aria-hidden": true });
   }
   if (direction === "desc") {
-    return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react25.ArrowDownIcon, { className: iconClass, "aria-hidden": true });
+    return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react26.ArrowDownIcon, { className: iconClass, "aria-hidden": true });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react25.ArrowUpIcon, { className: iconClass, "aria-hidden": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react26.ArrowUpIcon, { className: iconClass, "aria-hidden": true });
 }
 function DataTable({
   columns,
@@ -12322,7 +12603,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_runtime108.jsx)(EmptyState, { title: emptyTitle, description: emptyDescription, className });
+    return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(EmptyState, { title: emptyTitle, description: emptyDescription, className });
   }
   const allKeys = sortedRows.map(getRowKey);
   const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));
@@ -12347,10 +12628,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_runtime108.jsx)("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("table", { className: tableClass, children: [
-    caption ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("caption", { className: "sr-only", children: caption }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("thead", { className: cn(headRowClass, stickyHeader && stickyHeadClass), children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("tr", { children: [
-      selectable ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("th", { scope: "col", className: cn(selectCellClass, headPad), children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: cn("aui-app-data-table", shellClass2, className), children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("table", { className: tableClass, children: [
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("caption", { className: "sr-only", children: caption }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("thead", { className: cn(headRowClass, stickyHeader && stickyHeadClass), children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("tr", { children: [
+      selectable ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("th", { scope: "col", className: cn(selectCellClass, headPad), children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
         Checkbox,
         {
           checked: headerCheckedState,
@@ -12362,19 +12643,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_runtime108.jsxs)(
+        const headerContent = col.sortable ? /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
           "button",
           {
             type: "button",
             className: sortButtonClass,
             onClick: () => setSort(nextSort(sort, col.id)),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "truncate", children: col.header }),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "truncate", children: col.header }),
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(SortIndicator, { active: Boolean(isSorted), direction: sort?.direction })
             ]
           }
         ) : col.header;
-        return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
           "th",
           {
             scope: "col",
@@ -12391,9 +12672,9 @@ function DataTable({
         );
       })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: loading ? Array.from({ length: skeletonCount }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("tr", { className: rowClass, "aria-hidden": true, children: [
-      selectable ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("td", { className: cn(selectCellClass, cellPad), children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Skeleton, { className: "size-4 rounded-[4px]" }) }) : null,
-      columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("tbody", { className: cn(!hasFoot && "[&_tr:last-child_td]:border-b-0"), children: loading ? Array.from({ length: skeletonCount }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("tr", { className: rowClass, "aria-hidden": true, children: [
+      selectable ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("td", { className: cn(selectCellClass, cellPad), children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Skeleton, { className: "size-4 rounded-[4px]" }) }) : null,
+      columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
         "td",
         {
           className: cn(
@@ -12402,17 +12683,17 @@ function DataTable({
             col.align && alignClass[col.align],
             col.className
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Skeleton, { className: "h-4 w-[60%]" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Skeleton, { className: "h-4 w-[60%]" })
         },
         col.id
       ))
-    ] }, `skeleton-${rowIdx}`)) : visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("td", { colSpan, className: emptyCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("p", { className: "font-medium text-foreground", children: emptyTitle }),
-      emptyDescription ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("p", { className: "max-w-sm text-muted-foreground", children: emptyDescription }) : null
+    ] }, `skeleton-${rowIdx}`)) : visibleRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("td", { colSpan, className: emptyCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("p", { className: "font-medium text-foreground", children: emptyTitle }),
+      emptyDescription ? /* @__PURE__ */ (0, import_jsx_runtime109.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_runtime108.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
         "tr",
         {
           className: rowClass,
@@ -12428,12 +12709,12 @@ function DataTable({
           tabIndex: onRowClick ? 0 : void 0,
           role: onRowClick ? "button" : void 0,
           children: [
-            selectable ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+            selectable ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
               "td",
               {
                 className: cn(selectCellClass, cellPad),
                 onClick: (event) => event.stopPropagation(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                   Checkbox,
                   {
                     checked: isSelected,
@@ -12443,7 +12724,7 @@ function DataTable({
                 )
               }
             ) : null,
-            columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+            columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
               "td",
               {
                 className: cn(
@@ -12453,7 +12734,7 @@ function DataTable({
                   col.align && alignClass[col.align],
                   col.className
                 ),
-                children: col.truncate ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "truncate", children: col.cell(row) }) : col.cell(row)
+                children: col.truncate ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "truncate", children: col.cell(row) }) : col.cell(row)
               },
               col.id
             ))
@@ -12462,7 +12743,7 @@ function DataTable({
         key
       );
     }) }),
-    hasFoot ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("td", { colSpan, className: footCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+    hasFoot ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("td", { colSpan, className: footCellClass, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
       "div",
       {
         className: cn(
@@ -12470,18 +12751,18 @@ function DataTable({
           (showRowCount || footer || hasPager) && "justify-between"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: footInnerClass, children: [
-            showRowCount ? /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: footInnerClass, children: [
+            showRowCount ? /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("span", { children: [
               rowCountText,
               selectable && selectedSet.size > 0 ? ` \xB7 ${selectedSet.size} selected` : null
-            ] }) : selectable && selectedSet.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("span", { children: [
+            ] }) : selectable && selectedSet.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("span", { children: [
               selectedSet.size,
               " selected"
             ] }) : null,
             footer
           ] }),
-          hasPager ? /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("span", { className: "tabular-nums", children: [
+          hasPager ? /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("span", { className: "tabular-nums", children: [
               pageIndex * pageSize + 1,
               "\u2013",
               Math.min(
@@ -12492,8 +12773,8 @@ function DataTable({
               "of ",
               sortedRows.length
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 "button",
                 {
                   type: "button",
@@ -12501,10 +12782,10 @@ function DataTable({
                   onClick: () => setPage(pageIndex - 1),
                   disabled: pageIndex <= 0,
                   "aria-label": "Previous page",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react25.ChevronLeftIcon, { className: "size-4", "aria-hidden": true })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react26.ChevronLeftIcon, { className: "size-4", "aria-hidden": true })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
                 "button",
                 {
                   type: "button",
@@ -12512,7 +12793,7 @@ function DataTable({
                   onClick: () => setPage(pageIndex + 1),
                   disabled: pageIndex >= pageCount - 1,
                   "aria-label": "Next page",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_lucide_react25.ChevronRightIcon, { className: "size-4", "aria-hidden": true })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react26.ChevronRightIcon, { className: "size-4", "aria-hidden": true })
                 }
               )
             ] })
@@ -12525,7 +12806,7 @@ function DataTable({
 
 // src/app/data/ChartPanel.tsx
 var import_react75 = require("react");
-var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_jsx_runtime110 = require("react/jsx-runtime");
 var ChartPanel = ({
   title,
   description,
@@ -12543,14 +12824,14 @@ var ChartPanel = ({
   const titleId = (0, import_react75.useId)();
   const resolvedTitle = title ?? artifact?.title;
   const hasHeader = Boolean(resolvedTitle || description || actions);
-  const body = loading ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Skeleton, { className: "w-full rounded-lg", style: { height }, "aria-hidden": true }) : children ?? (artifact ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ChartArtifactView, { artifact, embedded: true, height }) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+  const body = loading ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Skeleton, { className: "w-full rounded-lg", style: { height }, "aria-hidden": true }) : children ?? (artifact ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(ChartArtifactView, { artifact, embedded: true, height }) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
     "section",
     {
       className: cn(metricCardShellClass, "aui-app-chart-panel", className),
       "aria-labelledby": resolvedTitle ? titleId : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
           MetricCardHeader,
           {
             title: resolvedTitle,
@@ -12559,14 +12840,14 @@ var ChartPanel = ({
             actions
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
           "div",
           {
             className: cn(
               "relative min-h-0 w-full",
               hasHeader ? metricChartPlotRegionClass : chartPanelBodyClass
             ),
-            children: body ?? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+            children: body ?? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
               "div",
               {
                 className: "flex items-center justify-center text-sm font-normal text-muted-foreground",
@@ -12584,7 +12865,7 @@ var ChartPanel = ({
 
 // src/app/data/MetricRow.tsx
 var import_react76 = require("react");
-var import_jsx_runtime110 = require("react/jsx-runtime");
+var import_jsx_runtime111 = require("react/jsx-runtime");
 var MetricRow = ({
   title,
   titleTag,
@@ -12610,13 +12891,13 @@ var MetricRow = ({
     onMetricChange?.(id);
   };
   const hasHeader = Boolean(title || titleTag || description || actions);
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
           MetricCardHeader,
           {
             title,
@@ -12626,7 +12907,7 @@ var MetricRow = ({
             actions
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
           "div",
           {
             role: selectable ? "group" : void 0,
@@ -12637,18 +12918,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_runtime110.jsxs)(
+            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
               "div",
               {
                 className: cn("flex min-w-0 flex-1 flex-col gap-2", metricTileClass),
                 "aria-hidden": true,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Skeleton, { className: "h-3 w-20" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Skeleton, { className: "h-7 w-24" })
+                  /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Skeleton, { className: "h-7 w-24" })
                 ]
               },
               `skeleton-${index}`
-            )) : metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+            )) : metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
               MetricTile,
               {
                 label: m.label,
@@ -12676,7 +12957,7 @@ var MetricRow = ({
 
 // src/app/data/MetricChartCard.tsx
 var import_react77 = require("react");
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_jsx_runtime112 = require("react/jsx-runtime");
 var MetricChartCard = ({
   title,
   titleTag,
@@ -12712,13 +12993,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_runtime111.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
     "section",
     {
       className: cn(metricCardShellClass, className),
       "aria-labelledby": title ? titleId : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           MetricCardHeader,
           {
             title,
@@ -12728,7 +13009,7 @@ var MetricChartCard = ({
             titleId
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           "div",
           {
             role: "group",
@@ -12739,18 +13020,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_runtime111.jsxs)(
+            children: loading ? Array.from({ length: metrics.length || 4 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
               "div",
               {
                 className: cn("flex min-w-0 flex-1 flex-col gap-2", metricTileClass),
                 "aria-hidden": true,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Skeleton, { className: "h-3 w-20" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(Skeleton, { className: "h-7 w-24" })
+                  /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Skeleton, { className: "h-3 w-20" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Skeleton, { className: "h-7 w-24" })
                 ]
               },
               `skeleton-${index}`
-            )) : metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+            )) : metrics.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
               MetricTile,
               {
                 label: m.label,
@@ -12771,14 +13052,14 @@ var MetricChartCard = ({
             ))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: metricChartRegionClass, "aria-live": "polite", "aria-atomic": "true", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           Skeleton,
           {
             className: "w-full rounded-lg",
             style: { height },
             "aria-hidden": true
           }
-        ) : active?.data && active.data.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+        ) : active?.data && active.data.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           LineAreaChart,
           {
             data: active.data,
@@ -12798,7 +13079,7 @@ var MetricChartCard = ({
             ariaLabel: chartAriaLabel
           },
           active.id
-        ) : /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           "div",
           {
             className: "flex w-full items-center justify-center text-sm font-normal text-muted-foreground",
@@ -12904,8 +13185,8 @@ function useLiveQuery(fetcher, options = {}) {
 
 // src/ui/untitled-button.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_radix_ui9 = require("radix-ui");
-var import_jsx_runtime112 = require("react/jsx-runtime");
+var import_radix_ui10 = require("radix-ui");
+var import_jsx_runtime113 = 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)(
@@ -12988,10 +13269,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: {
@@ -13016,8 +13297,8 @@ function UntitledButton({
   const isDisabled = disabled || isLoading;
   const classes = cn(untitledButtonVariants({ color, size }), className);
   if (asChild) {
-    return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
-      import_radix_ui9.Slot.Root,
+    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+      import_radix_ui10.Slot.Root,
       {
         className: classes,
         "aria-disabled": isDisabled ? true : void 0,
@@ -13027,7 +13308,7 @@ function UntitledButton({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
     "button",
     {
       type,
@@ -13036,7 +13317,7 @@ function UntitledButton({
       className: classes,
       ...props,
       children: [
-        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
           "span",
           {
             "aria-hidden": true,
@@ -13051,8 +13332,8 @@ function UntitledButton({
 }
 
 // src/ui/banner.tsx
-var import_lucide_react26 = require("lucide-react");
-var import_jsx_runtime113 = require("react/jsx-runtime");
+var import_lucide_react27 = require("lucide-react");
+var import_jsx_runtime114 = 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",
@@ -13097,7 +13378,7 @@ function Banner({
 }) {
   const isSolid = variant === "solid";
   const isSingleLine = !title;
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
     "div",
     {
       "data-slot": "banner",
@@ -13112,7 +13393,7 @@ function Banner({
       ),
       ...props,
       children: [
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
           "span",
           {
             "data-banner-icon": true,
@@ -13123,9 +13404,9 @@ function Banner({
             children: icon
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("p", { className: "font-medium tracking-tight", children: title }) : null,
-          children ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("p", { className: "font-medium tracking-tight", children: title }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
             "div",
             {
               className: cn(
@@ -13136,8 +13417,8 @@ function Banner({
             }
           ) : null
         ] }),
-        actions ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null,
-        onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+        actions ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null,
+        onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
           "button",
           {
             type: "button",
@@ -13148,7 +13429,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_runtime113.jsx)(import_lucide_react26.XIcon, { className: "size-4", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_lucide_react27.XIcon, { className: "size-4", "aria-hidden": true })
           }
         ) : null
       ]
@@ -13157,7 +13438,7 @@ function Banner({
 }
 
 // src/ui/timeline.tsx
-var import_jsx_runtime114 = require("react/jsx-runtime");
+var import_jsx_runtime115 = require("react/jsx-runtime");
 var timelineRowGap = {
   sm: "pb-4",
   default: "pb-6"
@@ -13190,16 +13471,16 @@ var toneStyles = {
   }
 };
 function Timeline({ items, size = "default", className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("ol", { "data-slot": "timeline", className: cn("flex flex-col", className), ...props, children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime115.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_runtime114.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
       "li",
       {
         className: cn("relative flex gap-3.5 last:pb-0", timelineRowGap[size]),
         children: [
-          !last ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+          !last ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
             "span",
             {
               "aria-hidden": true,
@@ -13209,7 +13490,7 @@ function Timeline({ items, size = "default", className, ...props }) {
               )
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: "relative flex w-5 shrink-0 justify-center pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { className: "relative flex w-5 shrink-0 justify-center pt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
             "span",
             {
               className: cn(
@@ -13217,7 +13498,7 @@ function Timeline({ items, size = "default", className, ...props }) {
                 styles.border,
                 item.icon ? "size-6" : "size-4"
               ),
-              children: item.icon ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: cn("text-xs", styles.icon), children: item.icon }) : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+              children: item.icon ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { className: cn("text-xs", styles.icon), children: item.icon }) : /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
                 "span",
                 {
                   className: cn(
@@ -13228,12 +13509,12 @@ function Timeline({ items, size = "default", className, ...props }) {
               )
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "min-w-0 flex-1 pb-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("p", { className: "text-sm font-normal text-foreground", children: item.title }),
-              item.meta ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: item.meta }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "min-w-0 flex-1 pb-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "text-sm font-normal text-foreground", children: item.title }),
+              item.meta ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: item.meta }) : null
             ] }),
-            item.description ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("p", { className: "mt-0.5 text-[13px] leading-relaxed text-muted-foreground", children: item.description }) : null
+            item.description ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "mt-0.5 text-[13px] leading-relaxed text-muted-foreground", children: item.description }) : null
           ] })
         ]
       },
@@ -13247,8 +13528,8 @@ var React6 = __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_react27 = require("lucide-react");
-var import_jsx_runtime115 = require("react/jsx-runtime");
+var import_lucide_react28 = require("lucide-react");
+var import_jsx_runtime116 = require("react/jsx-runtime");
 var columnTitleToneClass = {
   default: "text-foreground",
   primary: "text-blue-600 dark:text-blue-400",
@@ -13310,7 +13591,7 @@ function SortableCard({
     transition
   };
   const dragHandleProps = disabled ? void 0 : { ...attributes, ...listeners2 };
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
     "div",
     {
       ref: setNodeRef,
@@ -13325,7 +13606,7 @@ function SortableCard({
         className
       ),
       children: [
-        !disabled && dragHandle === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+        !disabled && dragHandle === "auto" ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
           "button",
           {
             type: "button",
@@ -13333,7 +13614,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,
             ...listeners2,
-            children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_lucide_react27.GripVerticalIcon, { className: "size-4", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_lucide_react28.GripVerticalIcon, { className: "size-4", "aria-hidden": true })
           }
         ) : null,
         renderCard(card, { column, isDragging, isOverlay: false, dragHandleProps })
@@ -13357,7 +13638,7 @@ function KanbanColumnView({
 }) {
   const tone = column.tone ?? "default";
   const { setNodeRef, isOver } = (0, import_core2.useDroppable)({ id: column.id, disabled });
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
     "div",
     {
       "data-slot": "kanban-column",
@@ -13367,9 +13648,9 @@ function KanbanColumnView({
         className
       ),
       children: [
-        renderColumnHeader ? renderColumnHeader(column) : /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex flex-col gap-0.5 px-1 pb-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+        renderColumnHeader ? renderColumnHeader(column) : /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex flex-col gap-0.5 px-1 pb-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
               "h3",
               {
                 className: cn(
@@ -13379,12 +13660,12 @@ function KanbanColumnView({
                 children: column.title
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime115.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_runtime115.jsx)("div", { className: "shrink-0", children: column.action }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime116.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_runtime116.jsx)("div", { className: "shrink-0", children: column.action }) : null
           ] }),
-          column.description ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: column.description }) : null
+          column.description ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("p", { className: "truncate text-xs text-muted-foreground", children: column.description }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_sortable.SortableContext, { items: cardIds, strategy: import_sortable.verticalListSortingStrategy, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_sortable.SortableContext, { items: cardIds, strategy: import_sortable.verticalListSortingStrategy, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
           "div",
           {
             ref: setNodeRef,
@@ -13394,9 +13675,9 @@ function KanbanColumnView({
               densityListClass[density],
               isOver && "bg-muted/50"
             ),
-            children: column.cards.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime115.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_runtime116.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_runtime115.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
                 SortableCard,
                 {
                   card,
@@ -13414,7 +13695,7 @@ function KanbanColumnView({
             })
           }
         ) }),
-        column.footer ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("div", { className: "px-0.5 pt-0.5", children: column.footer }) : null
+        column.footer ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { className: "px-0.5 pt-0.5", children: column.footer }) : null
       ]
     }
   );
@@ -13553,7 +13834,7 @@ function Kanban({
       onColumnsChange?.(next);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
     import_core2.DndContext,
     {
       sensors,
@@ -13567,7 +13848,7 @@ function Kanban({
         if (isControlled) setInternal(cloneColumns(columnsProp));
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
           "div",
           {
             "data-slot": "kanban",
@@ -13578,7 +13859,7 @@ function Kanban({
               density === "compact" ? "gap-3" : "gap-4",
               className
             ),
-            children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+            children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
               KanbanColumnView,
               {
                 column,
@@ -13598,7 +13879,7 @@ function Kanban({
             ))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_core2.DragOverlay, { children: activeCard ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_core2.DragOverlay, { children: activeCard ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
           "div",
           {
             "data-slot": "kanban-card-overlay",
@@ -13747,8 +14028,8 @@ When you call a tool that returns an artifact (\`make_chart\`, \`ask_question\`,
 `.trim();
 
 // src/auth/guard.tsx
-var import_lucide_react28 = require("lucide-react");
-var import_jsx_runtime116 = require("react/jsx-runtime");
+var import_lucide_react29 = require("lucide-react");
+var import_jsx_runtime117 = require("react/jsx-runtime");
 var AuthGuard = ({
   children,
   requireAuth = false,
@@ -13759,7 +14040,7 @@ var AuthGuard = ({
     return children;
   }
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_lucide_react28.Loader2, { className: "w-8 h-8 animate-spin" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: "flex items-center justify-center h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_lucide_react29.Loader2, { className: "w-8 h-8 animate-spin" }) });
   }
   if (requireAuth && !isAuthenticated && !isEmbedded) {
     const returnTo = encodeURIComponent(
@@ -13772,162 +14053,7 @@ var AuthGuard = ({
 };
 
 // src/index.ts
-var import_react79 = require("@assistant-ui/react");
-
-// src/ui/select.tsx
-var import_radix_ui10 = require("radix-ui");
-var import_lucide_react29 = require("lucide-react");
-var import_jsx_runtime117 = require("react/jsx-runtime");
-function Select({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_radix_ui10.Select.Root, { "data-slot": "select", ...props });
-}
-function SelectGroup({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_radix_ui10.Select.Group, { "data-slot": "select-group", ...props });
-}
-function SelectValue({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_radix_ui10.Select.Value, { "data-slot": "select-value", ...props });
-}
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
-    import_radix_ui10.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_runtime117.jsx)(import_radix_ui10.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_lucide_react29.ChevronDownIcon, { className: "size-4 opacity-50" }) })
-      ]
-    }
-  );
-}
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_radix_ui10.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
-    import_radix_ui10.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_runtime117.jsx)(SelectScrollUpButton, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
-          import_radix_ui10.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_runtime117.jsx)(SelectScrollDownButton, {})
-      ]
-    }
-  ) });
-}
-function SelectLabel({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
-    import_radix_ui10.Select.Label,
-    {
-      "data-slot": "select-label",
-      className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className),
-      ...props
-    }
-  );
-}
-function SelectItem({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
-    import_radix_ui10.Select.Item,
-    {
-      "data-slot": "select-item",
-      className: cn(
-        overlayItemClass,
-        "w-full py-1.5 pr-8 pl-2 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_radix_ui10.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_lucide_react29.CheckIcon, { className: "size-4" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_radix_ui10.Select.ItemText, { children })
-      ]
-    }
-  );
-}
-function SelectSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
-    import_radix_ui10.Select.Separator,
-    {
-      "data-slot": "select-separator",
-      className: cn("-mx-1 my-1 h-px bg-border", className),
-      ...props
-    }
-  );
-}
-function SelectScrollUpButton({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
-    import_radix_ui10.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_runtime117.jsx)(import_lucide_react29.ChevronUpIcon, { className: "size-4" })
-    }
-  );
-}
-function SelectScrollDownButton({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
-    import_radix_ui10.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_runtime117.jsx)(import_lucide_react29.ChevronDownIcon, { className: "size-4" })
-    }
-  );
-}
+var import_react84 = require("@assistant-ui/react");
 
 // src/ui/input.tsx
 var import_jsx_runtime118 = require("react/jsx-runtime");
@@ -13961,7 +14087,7 @@ function Textarea({ className, ...props }) {
       "data-slot": "textarea",
       className: cn(
         controlSurfaceClass,
-        "min-h-16 w-full resize-y rounded-lg px-3 py-2 leading-relaxed",
+        "min-h-16 w-full resize-y rounded-lg px-2.5 py-1.5 leading-relaxed",
         className
       ),
       ...props
@@ -14220,7 +14346,7 @@ function BreadcrumbEllipsis({
       "data-slot": "breadcrumb-ellipsis",
       role: "presentation",
       "aria-hidden": "true",
-      className: cn("flex size-9 items-center justify-center", className),
+      className: cn("flex size-8 items-center justify-center", className),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_lucide_react31.MoreHorizontalIcon, { className: "size-4" }),
@@ -14356,7 +14482,7 @@ function ToolbarButton({
     {
       "data-slot": "toolbar-button",
       className: cn(
-        "inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 text-sm font-medium text-foreground outline-none transition-colors",
+        "inline-flex h-7 min-w-7 items-center justify-center rounded-md px-1.5 text-sm font-medium text-foreground outline-none transition-colors",
         "hover:bg-muted focus-visible:ring-2 focus-visible:ring-foreground/10 disabled:pointer-events-none disabled:opacity-50",
         className
       ),
@@ -14399,7 +14525,7 @@ function ToolbarToggleItem({
     {
       "data-slot": "toolbar-toggle-item",
       className: cn(
-        "inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 text-sm outline-none transition-colors",
+        "inline-flex h-7 min-w-7 items-center justify-center rounded-md px-1.5 text-sm outline-none transition-colors",
         "hover:bg-muted focus-visible:ring-2 focus-visible:ring-foreground/10",
         "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
         className
@@ -14417,7 +14543,7 @@ function ToolbarLink({
     {
       "data-slot": "toolbar-link",
       className: cn(
-        "inline-flex h-8 items-center rounded-md px-2 text-sm text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-foreground/10",
+        "inline-flex h-7 items-center rounded-md px-1.5 text-sm text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-foreground/10",
         className
       ),
       ...props
@@ -14438,7 +14564,7 @@ function Menubar({
     {
       "data-slot": "menubar",
       className: cn(
-        "flex h-9 items-center gap-1 rounded-lg border border-border bg-gradient-to-b from-elevated-from to-elevated-to p-1 shadow-card",
+        "flex h-8 items-center gap-1 rounded-lg border border-border bg-gradient-to-b from-elevated-from to-elevated-to p-1 shadow-card",
         className
       ),
       ...props
@@ -14459,7 +14585,7 @@ function MenubarTrigger({
     {
       "data-slot": "menubar-trigger",
       className: cn(
-        "flex cursor-default items-center rounded-md px-2 py-1 text-sm font-medium outline-none select-none",
+        "flex cursor-default items-center rounded-md px-2 py-0.5 text-sm font-medium outline-none select-none",
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
         className
       ),
@@ -14521,7 +14647,7 @@ function MenubarCheckboxItem({
     import_radix_ui18.Menubar.CheckboxItem,
     {
       "data-slot": "menubar-checkbox-item",
-      className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
+      className: cn(overlayItemClass, "py-1 pr-2 pl-8", className),
       checked,
       ...props,
       children: [
@@ -14545,7 +14671,7 @@ function MenubarRadioItem({
     import_radix_ui18.Menubar.RadioItem,
     {
       "data-slot": "menubar-radio-item",
-      className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
+      className: cn(overlayItemClass, "py-1 pr-2 pl-8", className),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_radix_ui18.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_lucide_react33.CircleIcon, { className: "size-2 fill-current" }) }) }),
@@ -14831,7 +14957,7 @@ function CommandDialog({
       {
         className: cn("overflow-hidden p-0", className),
         showCloseButton,
-        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-4 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:size-4", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-4 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-1.5 [&_[cmdk-item]_svg]:size-4", children })
       }
     )
   ] });
@@ -14844,7 +14970,7 @@ function CommandInput({
     "div",
     {
       "data-slot": "command-input-wrapper",
-      className: "flex h-10 items-center gap-2 border-b border-border px-3",
+      className: "flex h-9 items-center gap-2 border-b border-border px-2.5",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_lucide_react35.SearchIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
         /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
@@ -14852,7 +14978,7 @@ function CommandInput({
           {
             "data-slot": "command-input",
             className: cn(
-              "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground/70 disabled:cursor-not-allowed disabled:opacity-50",
+              "flex h-9 w-full rounded-md bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground/70 disabled:cursor-not-allowed disabled:opacity-50",
               className
             ),
             ...props
@@ -14882,7 +15008,7 @@ function CommandEmpty({
     import_cmdk.Command.Empty,
     {
       "data-slot": "command-empty",
-      className: "py-6 text-center text-sm text-muted-foreground",
+      className: "py-4 text-center text-sm text-muted-foreground",
       ...props
     }
   );
@@ -14896,7 +15022,7 @@ function CommandGroup({
     {
       "data-slot": "command-group",
       className: cn(
-        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
         className
       ),
       ...props
@@ -14978,12 +15104,12 @@ function Calendar({
         button_previous: cn(navButtonClass, defaults.button_previous),
         button_next: cn(navButtonClass, defaults.button_next),
         month_caption: cn(
-          "flex h-10 items-center justify-center",
+          "flex h-9 items-center justify-center",
           defaults.month_caption
         ),
         caption_label: cn("text-sm font-semibold", defaults.caption_label),
         dropdowns: cn(
-          "flex h-10 items-center justify-center gap-1.5 text-sm font-semibold",
+          "flex h-9 items-center justify-center gap-1.5 text-sm font-semibold",
           defaults.dropdowns
         ),
         dropdown_root: cn(
@@ -14994,17 +15120,17 @@ function Calendar({
         month_grid: cn("border-separate border-spacing-y-1", defaults.month_grid),
         weekdays: cn(defaults.weekdays),
         weekday: cn(
-          "size-10 pb-2 text-xs font-medium text-muted-foreground",
+          "size-9 pb-2 text-xs font-medium text-muted-foreground",
           defaults.weekday
         ),
         week: cn(defaults.week),
-        week_number_header: cn("size-10", defaults.week_number_header),
+        week_number_header: cn("size-9", defaults.week_number_header),
         week_number: cn(
           "text-xs text-muted-foreground",
           defaults.week_number
         ),
         day: cn(
-          "relative size-10 p-0 text-center text-sm focus-within:relative focus-within:z-10",
+          "relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-10",
           defaults.day
         ),
         range_start: cn("rounded-l-md", defaults.range_start),
@@ -15302,7 +15428,7 @@ function InputOTPSlot({
       "data-slot": "input-otp-slot",
       className: cn(
         controlSurfaceClass,
-        "relative size-9 rounded-none text-center text-sm tabular-nums",
+        "relative size-8 rounded-none text-center text-sm tabular-nums",
         "-ms-px first:ms-0 first:rounded-s-lg last:rounded-e-lg",
         "focus-visible:z-10",
         className
@@ -15503,7 +15629,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none transition-all",
+        "flex flex-1 items-center justify-between gap-4 rounded-md py-3 text-left text-sm font-medium outline-none transition-all",
         "focus-visible:ring-2 focus-visible:ring-foreground/10 disabled:pointer-events-none disabled:opacity-50",
         "hover:underline [&[data-state=open]>svg]:rotate-180",
         className
@@ -15527,7 +15653,7 @@ function AccordionContent({
       "data-slot": "accordion-content",
       className: "overflow-hidden text-sm text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: cn("pt-0 pb-4", className), children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: cn("pt-0 pb-3", className), children })
     }
   );
 }
@@ -15728,10 +15854,10 @@ var sheetContentVariants = (0, import_class_variance_authority5.cva)(
   {
     variants: {
       side: {
-        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top fixed top-4 inset-x-4 mx-auto w-[calc(100vw-2rem)] sm:max-w-lg rounded-2xl p-6",
-        bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom fixed bottom-4 inset-x-4 mx-auto w-[calc(100vw-2rem)] sm:max-w-lg rounded-2xl p-6",
-        left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left fixed top-4 bottom-4 left-4 w-[calc(100vw-2rem)] rounded-2xl p-6",
-        right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right fixed top-4 bottom-4 right-4 w-[calc(100vw-2rem)] rounded-2xl p-6"
+        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top fixed top-4 inset-x-4 mx-auto w-[calc(100vw-2rem)] sm:max-w-lg rounded-2xl p-5",
+        bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom fixed bottom-4 inset-x-4 mx-auto w-[calc(100vw-2rem)] sm:max-w-lg rounded-2xl p-5",
+        left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left fixed top-4 bottom-4 left-4 w-[calc(100vw-2rem)] rounded-2xl p-5",
+        right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right fixed top-4 bottom-4 right-4 w-[calc(100vw-2rem)] rounded-2xl p-5"
       },
       size: {
         default: "",
@@ -16375,7 +16501,7 @@ function ContextMenuSubContent({
 var import_class_variance_authority7 = require("class-variance-authority");
 var import_jsx_runtime151 = require("react/jsx-runtime");
 var alertVariants = (0, import_class_variance_authority7.cva)(
-  "relative grid w-full gap-1 rounded-xl border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:top-3.5 [&>svg]:left-4 [&>svg]:size-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+  "relative grid w-full gap-1 rounded-xl border px-3.5 py-2.5 text-sm [&>svg]:absolute [&>svg]:top-3 [&>svg]:left-3.5 [&>svg]:size-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-10",
   {
     variants: {
       variant: {
@@ -16433,7 +16559,7 @@ function Card({ className, ...props }) {
       "data-slot": "card",
       className: cn(
         TIMBAL_V2_ELEVATED_SURFACE,
-        "flex flex-col gap-4 rounded-xl py-4 text-card-foreground",
+        "flex flex-col gap-3 rounded-xl py-3 text-card-foreground",
         className
       ),
       ...props
@@ -16445,7 +16571,7 @@ function CardHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "card-header",
-      className: cn("flex flex-col gap-1.5 px-4", className),
+      className: cn("flex flex-col gap-1.5 px-3.5", className),
       ...props
     }
   );
@@ -16471,14 +16597,14 @@ function CardDescription({ className, ...props }) {
   );
 }
 function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { "data-slot": "card-content", className: cn("px-4", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { "data-slot": "card-content", className: cn("px-3.5", className), ...props });
 }
 function CardFooter({ className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
     "div",
     {
       "data-slot": "card-footer",
-      className: cn("flex items-center px-4", className),
+      className: cn("flex items-center px-3.5", className),
       ...props
     }
   );
@@ -16548,7 +16674,7 @@ function TableHead({ className, ...props }) {
     {
       "data-slot": "table-head",
       className: cn(
-        "h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        "h-8 px-2.5 text-left align-middle text-xs font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
         className
       ),
       ...props
@@ -16561,7 +16687,7 @@ function TableCell({ className, ...props }) {
     {
       "data-slot": "table-cell",
       className: cn(
-        "p-3 align-middle text-sm [&:has([role=checkbox])]:pr-0",
+        "py-2 px-2.5 align-middle text-sm [&:has([role=checkbox])]:pr-0",
         className
       ),
       ...props
@@ -16615,7 +16741,7 @@ function Toast({
       "data-slot": "toast",
       className: cn(
         TIMBAL_V2_ELEVATED_SURFACE,
-        "group pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-xl p-4 pr-8 shadow-card-elevated transition-all",
+        "group pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-xl p-3 pr-7 shadow-card-elevated transition-all",
         "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full",
         variant === "destructive" && "border-destructive/45 bg-destructive/10 text-destructive",
         className
@@ -16936,7 +17062,7 @@ function Rating({
   const value = isControlled ? valueProp : uncontrolled;
   const [hover, setHover] = React11.useState(null);
   const interactive = !readOnly && !disabled;
-  const shown = hover ?? value;
+  const shown2 = hover ?? value;
   const set = (next) => {
     if (!interactive) return;
     if (!isControlled) setUncontrolled(next);
@@ -16974,7 +17100,7 @@ function Rating({
       onMouseLeave: () => setHover(null),
       children: Array.from({ length: max }, (_, i) => {
         const unit = i + 1;
-        const filled = unit <= shown;
+        const filled = unit <= shown2;
         return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
           "button",
           {
@@ -17107,8 +17233,8 @@ var React13 = __toESM(require("react"), 1);
 var import_lucide_react47 = require("lucide-react");
 var import_jsx_runtime160 = require("react/jsx-runtime");
 var tagInputSizeClass = {
-  sm: "min-h-9 gap-1 px-1.5 py-1",
-  default: "min-h-10 gap-1.5 px-2 py-1.5"
+  sm: "min-h-8 gap-1 px-1.5 py-0.5",
+  default: "min-h-9 gap-1 px-2 py-1"
 };
 function TagInput({
   value: valueProp,
@@ -17216,8 +17342,8 @@ var snippetVariantClass = {
   ghost: "border-transparent bg-foreground/[0.04]"
 };
 var snippetSizeClass = {
-  sm: "gap-1.5 py-1 pl-2.5 pr-1 text-xs",
-  default: "gap-2 py-1.5 pl-3 pr-1.5 text-sm"
+  sm: "gap-1.5 py-0.5 pl-2 pr-0.5 text-xs",
+  default: "gap-2 py-1 pl-2.5 pr-1 text-sm"
 };
 function Snippet({
   children,
@@ -17333,6 +17459,373 @@ function CircularProgress({
     }
   );
 }
+
+// src/site/Reveal.tsx
+var React14 = __toESM(require("react"), 1);
+var import_react79 = require("motion/react");
+
+// src/site/easing.ts
+var EASE = {
+  /** Strong slow-out — the workhorse for entrances and reveals. */
+  out: [0.16, 1, 0.3, 1],
+  /** Symmetric in-out for loops and continuous motion. */
+  inOut: [0.65, 0, 0.35, 1],
+  /** Gentle in-out, good for parallax / large translations. */
+  soft: [0.4, 0, 0.2, 1]
+};
+var DURATION = {
+  fast: 0.4,
+  base: 0.7,
+  slow: 1.1
+};
+var SPRING = {
+  /** Tight, responsive follow. */
+  snappy: { stiffness: 350, damping: 30, mass: 0.4 },
+  /** Looser, more elastic follow. */
+  smooth: { stiffness: 150, damping: 20, mass: 0.6 }
+};
+
+// src/site/Reveal.tsx
+var import_jsx_runtime163 = require("react/jsx-runtime");
+function hidden(variant, distance) {
+  switch (variant) {
+    case "fade":
+      return { opacity: 0 };
+    case "fade-up":
+      return { opacity: 0, y: distance };
+    case "fade-down":
+      return { opacity: 0, y: -distance };
+    case "fade-left":
+      return { opacity: 0, x: distance };
+    case "fade-right":
+      return { opacity: 0, x: -distance };
+    case "blur":
+      return { opacity: 0, filter: "blur(12px)" };
+    case "scale":
+      return { opacity: 0, scale: 0.94 };
+    case "mask-up":
+      return { y: "110%" };
+  }
+}
+function shown(variant) {
+  if (variant === "mask-up") return { y: "0%" };
+  if (variant === "blur") return { opacity: 1, filter: "blur(0px)" };
+  if (variant === "scale") return { opacity: 1, scale: 1 };
+  return { opacity: 1, x: 0, y: 0 };
+}
+var Reveal = React14.forwardRef(function Reveal2({
+  variant = "fade-up",
+  delay = 0,
+  duration = DURATION.base,
+  distance = 28,
+  amount = 0.3,
+  repeat = false,
+  as = "div",
+  className,
+  children,
+  ...rest
+}, ref) {
+  const reduce = (0, import_react79.useReducedMotion)();
+  const isMask = variant === "mask-up";
+  if (reduce) {
+    const Tag = as;
+    return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Tag, { ref, className: cn(isMask && "overflow-hidden", className), ...rest, children });
+  }
+  const variants = {
+    hidden: hidden(variant, distance),
+    shown: shown(variant)
+  };
+  const MotionTag = import_react79.motion[as] ?? import_react79.motion.div;
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+    MotionTag,
+    {
+      ref,
+      className,
+      variants,
+      initial: "hidden",
+      whileInView: "shown",
+      viewport: { once: !repeat, amount },
+      transition: { duration, delay, ease: EASE.out },
+      ...rest,
+      children
+    }
+  );
+  if (isMask) {
+    return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "block overflow-hidden", children: inner });
+  }
+  return inner;
+});
+
+// src/site/TextReveal.tsx
+var React15 = __toESM(require("react"), 1);
+var import_react80 = require("motion/react");
+var import_jsx_runtime164 = require("react/jsx-runtime");
+var tokenVariants = {
+  hidden: { y: "115%" },
+  shown: { y: "0%" }
+};
+function TextReveal({
+  children,
+  splitBy = "words",
+  stagger = 0.06,
+  delay = 0,
+  duration = DURATION.base,
+  repeat = false,
+  amount = 0.4,
+  as = "span",
+  className,
+  ...rest
+}) {
+  const reduce = (0, import_react80.useReducedMotion)();
+  const Tag = as;
+  const tokens = React15.useMemo(() => {
+    if (splitBy === "lines") return children.split("\n");
+    return children.split(/(\s+)/).filter((t) => t.length > 0);
+  }, [children, splitBy]);
+  if (reduce) {
+    return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(Tag, { className, ...rest, children });
+  }
+  const containerVariants = {
+    hidden: {},
+    shown: { transition: { staggerChildren: stagger, delayChildren: delay } }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+    import_react80.motion.span,
+    {
+      variants: containerVariants,
+      initial: "hidden",
+      whileInView: "shown",
+      viewport: { once: !repeat, amount },
+      className: cn(as === "span" ? "inline" : "block", className),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(Tag, { className: as === "span" ? "inline" : "block", children: tokens.map(
+        (token, i) => /^\s+$/.test(token) && splitBy === "words" ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("span", { children: " " }, i) : /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+          "span",
+          {
+            className: cn(
+              "overflow-hidden",
+              splitBy === "lines" ? "block" : "inline-block align-bottom"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+              import_react80.motion.span,
+              {
+                className: "inline-block",
+                variants: tokenVariants,
+                transition: { duration, ease: EASE.out },
+                children: token
+              }
+            )
+          },
+          i
+        )
+      ) })
+    }
+  );
+}
+
+// src/site/Parallax.tsx
+var React16 = __toESM(require("react"), 1);
+var import_react81 = require("motion/react");
+var import_jsx_runtime165 = require("react/jsx-runtime");
+var Parallax = React16.forwardRef(function Parallax2({ speed = 0.2, axis = "y", smooth = true, className, children, style, ...rest }, forwardedRef) {
+  const reduce = (0, import_react81.useReducedMotion)();
+  const innerRef = React16.useRef(null);
+  React16.useImperativeHandle(forwardedRef, () => innerRef.current);
+  const { scrollYProgress } = (0, import_react81.useScroll)({
+    target: innerRef,
+    offset: ["start end", "end start"]
+  });
+  const range = 100 * speed;
+  const raw = (0, import_react81.useTransform)(scrollYProgress, [0, 1], [range, -range]);
+  const smoothed = (0, import_react81.useSpring)(raw, { stiffness: 120, damping: 30, mass: 0.4 });
+  const value = smooth ? smoothed : raw;
+  if (reduce) {
+    return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("div", { ref: innerRef, className, style, ...rest, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+    import_react81.motion.div,
+    {
+      ref: innerRef,
+      className: cn("will-change-transform", className),
+      style: { ...style, [axis]: value },
+      ...rest,
+      children
+    }
+  );
+});
+
+// src/site/Marquee.tsx
+var React17 = __toESM(require("react"), 1);
+var import_react82 = require("motion/react");
+var import_jsx_runtime166 = require("react/jsx-runtime");
+var Marquee = React17.forwardRef(function Marquee2({ speed = 60, direction = "left", pauseOnHover = true, gap = "3rem", className, children, ...rest }, ref) {
+  const reduce = (0, import_react82.useReducedMotion)();
+  const x = (0, import_react82.useMotionValue)(0);
+  const setWidthRef = React17.useRef(0);
+  const groupRef = React17.useRef(null);
+  const [paused, setPaused] = React17.useState(false);
+  React17.useEffect(() => {
+    const el = groupRef.current;
+    if (!el) return;
+    const measure = () => {
+      const gapPx = parseFloat(getComputedStyle(el.parentElement).columnGap || "0") || 0;
+      setWidthRef.current = el.offsetWidth + gapPx;
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  (0, import_react82.useAnimationFrame)((_, delta) => {
+    if (reduce || paused || setWidthRef.current === 0) return;
+    const dir = direction === "left" ? -1 : 1;
+    const moveBy = speed * delta / 1e3;
+    let next = x.get() + dir * moveBy;
+    const w = setWidthRef.current;
+    if (next <= -w) next += w;
+    else if (next >= w) next -= w;
+    x.set(next);
+  });
+  if (reduce) {
+    return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+      "div",
+      {
+        ref,
+        className: cn("flex w-full items-center overflow-x-auto", className),
+        style: { columnGap: gap },
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("w-full overflow-hidden", className),
+      onMouseEnter: pauseOnHover ? () => setPaused(true) : void 0,
+      onMouseLeave: pauseOnHover ? () => setPaused(false) : void 0,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(import_react82.motion.div, { className: "flex w-max flex-nowrap items-center", style: { x, columnGap: gap }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("div", { ref: groupRef, className: "flex flex-nowrap items-center", style: { columnGap: gap }, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("div", { className: "flex flex-nowrap items-center", style: { columnGap: gap }, "aria-hidden": true, children })
+      ] })
+    }
+  );
+});
+
+// src/site/Magnetic.tsx
+var React18 = __toESM(require("react"), 1);
+var import_react83 = require("motion/react");
+var import_jsx_runtime167 = require("react/jsx-runtime");
+var Magnetic = React18.forwardRef(function Magnetic2({ strength = 0.35, max = 24, spring = "snappy", className, children, ...rest }, forwardedRef) {
+  const reduce = (0, import_react83.useReducedMotion)();
+  const innerRef = React18.useRef(null);
+  React18.useImperativeHandle(forwardedRef, () => innerRef.current);
+  const mvx = (0, import_react83.useMotionValue)(0);
+  const mvy = (0, import_react83.useMotionValue)(0);
+  const x = (0, import_react83.useSpring)(mvx, SPRING[spring]);
+  const y = (0, import_react83.useSpring)(mvy, SPRING[spring]);
+  const clamp3 = (v) => Math.max(-max, Math.min(max, v));
+  function handleMove(e) {
+    if (reduce) return;
+    const el = innerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const cx = rect.left + rect.width / 2;
+    const cy = rect.top + rect.height / 2;
+    mvx.set(clamp3((e.clientX - cx) * strength));
+    mvy.set(clamp3((e.clientY - cy) * strength));
+  }
+  function reset() {
+    mvx.set(0);
+    mvy.set(0);
+  }
+  if (reduce) {
+    return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { ref: innerRef, className: cn("inline-block", className), ...rest, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+    import_react83.motion.div,
+    {
+      ref: innerRef,
+      className: cn("inline-block", className),
+      style: { x, y },
+      onMouseMove: handleMove,
+      onMouseLeave: reset,
+      ...rest,
+      children
+    }
+  );
+});
+
+// src/site/agent-instructions.ts
+var SITE_AGENT_INSTRUCTIONS = `
+## Site kit (@timbal-ai/timbal-react/site)
+
+Expressive **motion & interaction primitives** for marketing, brand, landing, and editorial pages \u2014 the counterpart to \`/app\` (which is for dashboards and operations UIs). Import from \`@timbal-ai/timbal-react/site\` (or the package root).
+
+These are **mechanics, not art direction**: they animate whatever you put inside them. Compose them under a chosen aesthetic; they do not impose colors, type, or layout.
+
+### When to use \`/site\` (and when not to)
+
+- **Do** use \`/site\` for landing pages, hero sections, feature walkthroughs, logo walls, pricing pages, and editorial/brand storytelling.
+- **Do not** use \`/site\` inside dashboards, settings, tables, or in-thread chat artifacts \u2014 those stay on \`/app\` and \`/artifacts\`. Animated dashboard chrome reads as slop.
+- Every primitive is **reduced-motion-aware** (collapses to static, no-transform output under \`prefers-reduced-motion\`) and **SSR-safe** (no layout shift \u2014 elements occupy their space from first paint). You never need to guard them yourself.
+- Built on the \`motion\` engine the package already bundles \u2014 **no extra dependencies**.
+
+### Dosing (anti-overuse \u2014 read this)
+
+The failure mode is animating *everything*. Restraint is the brand signal.
+
+- Pick **one** signature motion per section (e.g. a \`TextReveal\` headline **or** a \`Parallax\` hero image, not both stacked).
+- Stagger entrances down the page; do not fire ten reveals at once on first paint.
+- Reserve \`Magnetic\` for **primary** CTAs / nav, not every button.
+- Keep \`Parallax\` \`speed\` subtle (\`0.15\`\u2013\`0.35\`); large values look gimmicky.
+- Default durations are intentionally slow and weighted (\`DURATION.base\` = 0.7s) \u2014 that confident pacing is the point. Don't speed everything up to app-kit's 150ms.
+
+### Component menu
+
+| Component | Use for | Key props |
+|-----------|---------|-----------|
+| \`Reveal\` | Fade/slide a block in as it scrolls into view (headings, cards, images, list items). | \`variant\` (\`fade\` \\| \`fade-up\` \\| \`fade-down\` \\| \`fade-left\` \\| \`fade-right\` \\| \`blur\` \\| \`scale\` \\| \`mask-up\`, default \`fade-up\`), \`delay\`, \`duration\`, \`distance\` (px, default 28), \`amount\` (visibility fraction 0\u20131 / \`"some"\` / \`"all"\`, default 0.3), \`repeat\` (replay on re-enter), \`as\` (render element, e.g. \`"section"\`/\`"li"\`). |
+| \`TextReveal\` | Signature editorial headline entrance \u2014 text rides up token-by-token from a clip on a stagger. | \`children\` (**plain string only**), \`splitBy\` (\`words\` default \\| \`lines\`), \`stagger\` (default 0.06), \`delay\`, \`duration\`, \`amount\` (default 0.4), \`repeat\`, \`as\` (\`span\` default \\| \`h1\`\u2013\`h4\` \\| \`p\`). |
+| \`Parallax\` | Depth \u2014 translate a layer relative to scroll (hero images, background art). | \`speed\` (-0.6\u20260.6, positive = lags behind scroll, default 0.2), \`axis\` (\`y\` default \\| \`x\`), \`smooth\` (spring-damped, default true). |
+| \`Marquee\` | Seamless infinite scrolling row (logo walls, testimonials, ticker). Duplicates children internally \u2014 no visible seam. | \`speed\` (px/s, default 60), \`direction\` (\`left\` default \\| \`right\`), \`pauseOnHover\` (default true), \`gap\` (CSS length, default \`"3rem"\`). |
+| \`Magnetic\` | Pointer-following "magnetic" affordance for a **single** interactive child (primary CTA, nav link). | \`strength\` (fraction of cursor offset, default 0.35), \`max\` (px clamp, default 24), \`spring\` (\`"snappy"\` default \\| \`"smooth"\`). Wrap one button/link. |
+
+### Motion tokens
+
+\`EASE\` (cubic-bezier tuples: \`out\` / \`inOut\` / \`soft\`), \`DURATION\` (\`fast\` 0.4s / \`base\` 0.7s / \`slow\` 1.1s), and \`SPRING\` (\`snappy\` / \`smooth\`) are exported for custom \`motion\` work that should match the kit's feel. Prefer the component defaults; reach for tokens only when hand-rolling a bespoke animation.
+
+### Example imports
+
+\`\`\`tsx
+import { Reveal, TextReveal, Parallax, Marquee, Magnetic } from "@timbal-ai/timbal-react/site";
+\`\`\`
+
+\`\`\`tsx
+<Reveal variant="fade-up" delay={0.1}>
+  <TextReveal as="h1" className="text-6xl font-semibold">
+    Built for the long run
+  </TextReveal>
+</Reveal>
+
+<Parallax speed={0.3}>
+  <img src={hero} alt="" className="h-full w-full object-cover" />
+</Parallax>
+
+<Magnetic strength={0.4}>
+  <Button>Get started</Button>
+</Magnetic>
+\`\`\`
+
+### Rules
+
+- \`/site\` is for the **marketing/brand surface**, not the product app shell (\`/app\`) or in-chat widgets (\`/artifacts\`).
+- \`TextReveal\` takes a **string** child only \u2014 it splits internally; do not pass JSX.
+- \`Magnetic\` wraps a **single** interactive child; don't wrap whole layouts.
+- Trust the reduced-motion / SSR handling \u2014 never add your own \`prefers-reduced-motion\` guards around these.
+`.trim();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   APP_KIT_AGENT_INSTRUCTIONS,
@@ -17445,6 +17938,7 @@ function CircularProgress({
   ContextMenuTrigger,
   CopyButton,
   DEFAULT_UPLOAD_ACCEPT,
+  DURATION,
   DangerZone,
   DangerZoneAction,
   DataTable,
@@ -17478,6 +17972,7 @@ function CircularProgress({
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  EASE,
   EmptyState,
   ExpandableSection,
   Field,
@@ -17523,7 +18018,9 @@ function CircularProgress({
   KbdGroup,
   Label,
   LineAreaChart,
+  Magnetic,
   MarkdownText,
+  Marquee,
   MemoPillSegmentedTabs,
   Menubar,
   MenubarCheckboxItem,
@@ -17562,6 +18059,7 @@ function CircularProgress({
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  Parallax,
   PieChart,
   PillSegmentedTabs,
   PlanBadge,
@@ -17578,8 +18076,11 @@ function CircularProgress({
   RadioGroupItem,
   Rating,
   ResourceCard,
+  Reveal,
   SEMANTIC_COLOR_TOKENS,
+  SITE_AGENT_INSTRUCTIONS,
   SLOP_BUDGETS,
+  SPRING,
   STUDIO_NAV_MODE,
   ScrollArea,
   ScrollBar,
@@ -17639,6 +18140,7 @@ function CircularProgress({
   TableHeader,
   TableRow,
   TagInput,
+  TextReveal,
   Textarea,
   Thread,
   ThreadPrimitive,