@timbal-ai/timbal-react 0.8.1 → 1.0.0

package/dist/index.cjs

@@ -33,7 +33,25 @@ __export(index_exports, {
   APP_KIT_AGENT_INSTRUCTIONS: () => APP_KIT_AGENT_INSTRUCTIONS,
   ARTIFACT_AGENT_INSTRUCTIONS: () => ARTIFACT_AGENT_INSTRUCTIONS,
   ARTIFACT_FENCE_LANGUAGES: () => ARTIFACT_FENCE_LANGUAGES,
+  Accordion: () => Accordion,
+  AccordionContent: () => AccordionContent,
+  AccordionItem: () => AccordionItem,
+  AccordionTrigger: () => AccordionTrigger,
   ActionBarPrimitive: () => import_react69.ActionBarPrimitive,
+  Alert: () => Alert,
+  AlertDescription: () => AlertDescription,
+  AlertDialog: () => AlertDialog,
+  AlertDialogAction: () => AlertDialogAction,
+  AlertDialogCancel: () => AlertDialogCancel,
+  AlertDialogContent: () => AlertDialogContent,
+  AlertDialogDescription: () => AlertDialogDescription,
+  AlertDialogFooter: () => AlertDialogFooter,
+  AlertDialogHeader: () => AlertDialogHeader,
+  AlertDialogOverlay: () => AlertDialogOverlay,
+  AlertDialogPortal: () => AlertDialogPortal,
+  AlertDialogTitle: () => AlertDialogTitle,
+  AlertDialogTrigger: () => AlertDialogTrigger,
+  AlertTitle: () => AlertTitle,
   AppChatPanel: () => AppChatPanel,
   AppConfirmDialog: () => AppConfirmDialog,
   AppCopilotProvider: () => AppCopilotProvider,
@@ -43,25 +61,88 @@ __export(index_exports, {
   ArtifactCard: () => ArtifactCard,
   ArtifactRegistryProvider: () => ArtifactRegistryProvider,
   ArtifactView: () => ArtifactView,
+  AspectRatio: () => AspectRatio,
   AssistantRuntimeProvider: () => import_react69.AssistantRuntimeProvider,
   AuiIf: () => import_react69.AuiIf,
   AuthGuard: () => AuthGuard,
   Avatar: () => Avatar,
   AvatarFallback: () => AvatarFallback,
   AvatarImage: () => AvatarImage,
+  Badge: () => Badge,
+  Breadcrumb: () => Breadcrumb,
+  BreadcrumbEllipsis: () => BreadcrumbEllipsis,
+  BreadcrumbItem: () => BreadcrumbItem,
+  BreadcrumbLink: () => BreadcrumbLink,
+  BreadcrumbList: () => BreadcrumbList,
+  BreadcrumbPage: () => BreadcrumbPage,
+  BreadcrumbSeparator: () => BreadcrumbSeparator,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   CHART_PALETTE: () => CHART_PALETTE,
+  COLOR_UTILITY_PREFIXES: () => COLOR_UTILITY_PREFIXES,
+  CONTROL_SIZE: () => CONTROL_SIZE,
+  Calendar: () => Calendar,
+  CalendarDayButton: () => CalendarDayButton,
+  Card: () => Card,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
   ChartArtifactView: () => ChartArtifactView,
   ChartPanel: () => ChartPanel,
+  Checkbox: () => Checkbox,
+  Collapsible: () => Collapsible,
+  CollapsibleContent: () => CollapsibleContent,
+  CollapsibleTrigger: () => CollapsibleTrigger,
+  Combobox: () => Combobox,
+  ComboboxAnchor: () => ComboboxAnchor,
+  ComboboxCommand: () => ComboboxCommand,
+  ComboboxContent: () => ComboboxContent,
+  ComboboxEmpty: () => ComboboxEmpty,
+  ComboboxGroup: () => ComboboxGroup,
+  ComboboxInput: () => ComboboxInput,
+  ComboboxItem: () => ComboboxItem,
+  ComboboxList: () => ComboboxList,
+  ComboboxSeparator: () => ComboboxSeparator,
+  ComboboxShortcut: () => ComboboxShortcut,
+  ComboboxTrigger: () => ComboboxTrigger,
+  Command: () => Command,
+  CommandDialog: () => CommandDialog,
+  CommandEmpty: () => CommandEmpty,
+  CommandGroup: () => CommandGroup,
+  CommandInput: () => CommandInput,
+  CommandItem: () => CommandItem,
+  CommandList: () => CommandList,
+  CommandSeparator: () => CommandSeparator,
+  CommandShortcut: () => CommandShortcut,
   Composer: () => Composer,
   ComposerPrimitive: () => import_react69.ComposerPrimitive,
   ConnectionRow: () => ConnectionRow,
   ConnectionRowList: () => ConnectionRowList,
+  ContextMenu: () => ContextMenu,
+  ContextMenuCheckboxItem: () => ContextMenuCheckboxItem,
+  ContextMenuContent: () => ContextMenuContent,
+  ContextMenuGroup: () => ContextMenuGroup,
+  ContextMenuItem: () => ContextMenuItem,
+  ContextMenuLabel: () => ContextMenuLabel,
+  ContextMenuRadioGroup: () => ContextMenuRadioGroup,
+  ContextMenuRadioItem: () => ContextMenuRadioItem,
+  ContextMenuSeparator: () => ContextMenuSeparator,
+  ContextMenuShortcut: () => ContextMenuShortcut,
+  ContextMenuSub: () => ContextMenuSub,
+  ContextMenuSubContent: () => ContextMenuSubContent,
+  ContextMenuSubTrigger: () => ContextMenuSubTrigger,
+  ContextMenuTrigger: () => ContextMenuTrigger,
   DEFAULT_UPLOAD_ACCEPT: () => DEFAULT_UPLOAD_ACCEPT,
   DangerZone: () => DangerZone,
   DangerZoneAction: () => DangerZoneAction,
   DataTable: () => DataTable,
+  DatePicker: () => DatePicker,
+  DatePickerButton: () => DatePickerButton,
+  DatePickerCalendar: () => DatePickerCalendar,
+  DatePickerContent: () => DatePickerContent,
+  DatePickerTrigger: () => DatePickerTrigger,
   DescriptionList: () => DescriptionList,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
@@ -97,32 +178,93 @@ __export(index_exports, {
   FieldTextarea: () => FieldTextarea,
   FilterBar: () => FilterBar,
   FloatingUnsavedChangesBar: () => FloatingUnsavedChangesBar,
+  Form: () => Form,
+  FormControl: () => FormControl,
+  FormField: () => FormField,
+  FormItem: () => FormItem,
+  FormLabel: () => FormLabel,
+  FormMessage: () => FormMessage,
   FormSection: () => FormSection,
+  FormSubmit: () => FormSubmit,
+  HOUSE_RULES: () => HOUSE_RULES,
+  HoverCard: () => HoverCard,
+  HoverCardContent: () => HoverCardContent,
+  HoverCardTrigger: () => HoverCardTrigger,
   HtmlArtifactView: () => HtmlArtifactView,
   INTEGRATION_CATALOG_CARD_HEIGHT_CLASS: () => INTEGRATION_CATALOG_CARD_HEIGHT_CLASS,
   InfoCard: () => InfoCard,
+  Input: () => Input,
+  InputGroup: () => InputGroup,
+  InputGroupAddon: () => InputGroupAddon,
+  InputGroupInput: () => InputGroupInput,
+  InputGroupText: () => InputGroupText,
+  InputOTP: () => InputOTP,
+  InputOTPGroup: () => InputOTPGroup,
+  InputOTPHiddenInput: () => InputOTPHiddenInput,
+  InputOTPSeparator: () => InputOTPSeparator,
+  InputOTPSlot: () => InputOTPSlot,
   IntegrationCard: () => IntegrationCard,
   IntegrationsEmptyState: () => IntegrationsEmptyState,
   JsonArtifactView: () => JsonArtifactView,
+  Kbd: () => Kbd,
+  KbdGroup: () => KbdGroup,
+  Label: () => Label,
   LineAreaChart: () => LineAreaChart,
   MarkdownText: () => MarkdownText,
   MemoPillSegmentedTabs: () => MemoPillSegmentedTabs,
+  Menubar: () => Menubar,
+  MenubarCheckboxItem: () => MenubarCheckboxItem,
+  MenubarContent: () => MenubarContent,
+  MenubarItem: () => MenubarItem,
+  MenubarLabel: () => MenubarLabel,
+  MenubarMenu: () => MenubarMenu,
+  MenubarRadioGroup: () => MenubarRadioGroup,
+  MenubarRadioItem: () => MenubarRadioItem,
+  MenubarSeparator: () => MenubarSeparator,
+  MenubarShortcut: () => MenubarShortcut,
+  MenubarSub: () => MenubarSub,
+  MenubarSubContent: () => MenubarSubContent,
+  MenubarSubTrigger: () => MenubarSubTrigger,
+  MenubarTrigger: () => MenubarTrigger,
   MessagePrimitive: () => import_react69.MessagePrimitive,
   MetricChartCard: () => MetricChartCard,
   MetricRow: () => MetricRow,
   MetricTile: () => MetricTile,
   ModeToggle: () => ModeToggle,
+  NavigationMenu: () => NavigationMenu,
+  NavigationMenuContent: () => NavigationMenuContent,
+  NavigationMenuIndicator: () => NavigationMenuIndicator,
+  NavigationMenuItem: () => NavigationMenuItem,
+  NavigationMenuLink: () => NavigationMenuLink,
+  NavigationMenuList: () => NavigationMenuList,
+  NavigationMenuTrigger: () => NavigationMenuTrigger,
+  NavigationMenuViewport: () => NavigationMenuViewport,
   Page: () => Page,
   PageHeader: () => PageHeader,
+  Pagination: () => Pagination,
+  PaginationContent: () => PaginationContent,
+  PaginationEllipsis: () => PaginationEllipsis,
+  PaginationItem: () => PaginationItem,
+  PaginationLink: () => PaginationLink,
+  PaginationNext: () => PaginationNext,
+  PaginationPrevious: () => PaginationPrevious,
   PillSegmentedTabs: () => PillSegmentedTabs,
   PlanBadge: () => PlanBadge,
   Popover: () => Popover,
   PopoverAnchor: () => PopoverAnchor,
   PopoverContent: () => PopoverContent,
   PopoverTrigger: () => PopoverTrigger,
+  Progress: () => Progress,
   QuestionArtifactView: () => QuestionArtifactView,
+  RESERVED_GRADIENT_TOKENS: () => RESERVED_GRADIENT_TOKENS,
+  RadioGroup: () => RadioGroup,
+  RadioGroupItem: () => RadioGroupItem,
   ResourceCard: () => ResourceCard,
+  SEMANTIC_COLOR_TOKENS: () => SEMANTIC_COLOR_TOKENS,
+  SLOP_BUDGETS: () => SLOP_BUDGETS,
   STUDIO_NAV_MODE: () => STUDIO_NAV_MODE,
+  ScrollArea: () => ScrollArea,
+  ScrollBar: () => ScrollBar,
   SearchInput: () => SearchInput,
   Section: () => Section,
   Select: () => Select,
@@ -135,11 +277,23 @@ __export(index_exports, {
   SelectSeparator: () => SelectSeparator,
   SelectTrigger: () => SelectTrigger,
   SelectValue: () => SelectValue,
+  Separator: () => Separator,
   SessionProvider: () => SessionProvider,
   SettingsSection: () => SettingsSection,
   SettingsSectionHeader: () => SettingsSectionHeader,
+  Sheet: () => Sheet,
+  SheetClose: () => SheetClose,
+  SheetContent: () => SheetContent,
+  SheetDescription: () => SheetDescription,
+  SheetFooter: () => SheetFooter,
+  SheetHeader: () => SheetHeader,
+  SheetTitle: () => SheetTitle,
+  SheetTrigger: () => SheetTrigger,
   Shimmer: () => Shimmer,
+  Skeleton: () => Skeleton,
+  Slider: () => Slider,
   Sparkline: () => Sparkline,
+  Spinner: () => Spinner,
   StatTile: () => StatTile,
   StatusBadge: () => StatusBadge,
   StatusDot: () => StatusDot,
@@ -149,10 +303,21 @@ __export(index_exports, {
   SubNav: () => SubNav,
   Suggestions: () => Suggestions,
   SurfaceCard: () => SurfaceCard,
+  Switch: () => Switch,
+  TAILWIND_PALETTE_COLORS: () => TAILWIND_PALETTE_COLORS,
   THEME_AGENT_INSTRUCTIONS: () => THEME_AGENT_INSTRUCTIONS,
   THREAD_DEFAULT_MAX_WIDTH: () => THREAD_DEFAULT_MAX_WIDTH,
   TIMBAL_THEME_PRESETS: () => TIMBAL_THEME_PRESETS,
+  Table: () => Table,
   TableArtifactView: () => TableArtifactView,
+  TableBody: () => TableBody,
+  TableCaption: () => TableCaption,
+  TableCell: () => TableCell,
+  TableFooter: () => TableFooter,
+  TableHead: () => TableHead,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow,
+  Textarea: () => Textarea,
   ThemePresetGallery: () => ThemePresetGallery,
   Thread: () => Thread,
   ThreadPrimitive: () => import_react69.ThreadPrimitive,
@@ -162,33 +327,58 @@ __export(index_exports, {
   TimbalRuntimeProvider: () => TimbalRuntimeProvider,
   TimbalStudioShell: () => TimbalStudioShell,
   TimbalThemeStyle: () => TimbalThemeStyle,
+  Toast: () => Toast,
+  ToastAction: () => ToastAction,
+  ToastClose: () => ToastClose,
+  ToastDescription: () => ToastDescription,
+  ToastProvider: () => ToastProvider,
+  ToastTitle: () => ToastTitle,
+  ToastViewport: () => ToastViewport,
+  Toaster: () => Toaster,
+  Toggle: () => Toggle,
+  ToggleGroup: () => ToggleGroup,
+  ToggleGroupItem: () => ToggleGroupItem,
   ToolArtifactFallback: () => ToolArtifactFallback,
   ToolFallback: () => ToolFallback,
+  Toolbar: () => Toolbar,
+  ToolbarButton: () => ToolbarButton,
+  ToolbarLink: () => ToolbarLink,
+  ToolbarSeparator: () => ToolbarSeparator,
+  ToolbarToggleGroup: () => ToolbarToggleGroup,
+  ToolbarToggleItem: () => ToolbarToggleItem,
   Tooltip: () => Tooltip,
   TooltipContent: () => TooltipContent,
   TooltipIconButton: () => TooltipIconButton,
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
+  UI_REVIEW_AGENT_INSTRUCTIONS: () => UI_REVIEW_AGENT_INSTRUCTIONS,
   UiArtifactView: () => UiArtifactView,
   UiCustomNodeRegistryProvider: () => UiCustomNodeRegistryProvider,
   UiEventProvider: () => UiEventProvider,
   UiNodeView: () => UiNodeView,
   WorkforceSelector: () => WorkforceSelector,
+  alertVariants: () => alertVariants,
   applyThemePreset: () => applyThemePreset,
   applyTimbalTheme: () => applyTimbalTheme,
   assistantMessageContentClass: () => assistantMessageContentClass,
   assistantMessageRootClass: () => assistantMessageRootClass,
   authFetch: () => authFetch,
+  badgeVariants: () => badgeVariants,
   clearTimbalTheme: () => clearTimbalTheme,
   clearTokens: () => clearTokens,
   cn: () => cn,
   connectionRowListClass: () => connectionRowListClass,
+  controlClass: () => controlClass,
+  controlSurfaceClass: () => controlSurfaceClass,
   createDefaultAttachmentAdapter: () => createDefaultAttachmentAdapter,
   createTimbalTheme: () => createTimbalTheme,
   createUploadAttachmentAdapter: () => createUploadAttachmentAdapter,
   defaultArtifactRenderers: () => defaultArtifactRenderers,
+  ensureThemeFontLink: () => ensureThemeFontLink,
   fetchCurrentUser: () => fetchCurrentUser,
   findMarkdownArtifacts: () => findMarkdownArtifacts,
+  formatLintReport: () => formatLintReport,
+  formatPickerDate: () => formatPickerDate,
   getAccessToken: () => getAccessToken,
   getPath: () => getPath,
   getRefreshToken: () => getRefreshToken,
@@ -197,17 +387,26 @@ __export(index_exports, {
   isArtifact: () => isArtifact,
   isArtifactFenceLanguage: () => isArtifactFenceLanguage,
   isUiBinding: () => isUiBinding,
+  lintGeneratedUi: () => lintGeneratedUi,
+  navigationMenuTriggerStyle: () => navigationMenuTriggerStyle,
+  overlayAnimationClass: () => overlayAnimationClass,
+  overlayItemClass: () => overlayItemClass,
+  overlayListPanelClass: () => overlayListPanelClass,
+  overlaySurfaceClass: () => overlaySurfaceClass,
   parseArtifactFromToolResult: () => parseArtifactFromToolResult,
   parseSSELine: () => import_timbal_sdk2.parseSSELine,
   refreshAccessToken: () => refreshAccessToken,
   resolveAttachmentAdapter: () => resolveAttachmentAdapter,
   resolveBindable: () => resolveBindable,
+  reviewGeneratedUi: () => reviewGeneratedUi,
   setAccessToken: () => setAccessToken,
   setPath: () => setPath,
   setRefreshToken: () => setRefreshToken,
   splitMarkdownByArtifacts: () => splitMarkdownByArtifacts,
   themeToCss: () => themeToCss,
   threadMessageColumnClass: () => threadMessageColumnClass,
+  toast: () => toast,
+  toggleVariants: () => toggleVariants,
   useAppCopilotContext: () => useAppCopilotContext,
   useAppShellChat: () => useAppShellChat,
   useArtifactRegistry: () => useArtifactRegistry,
@@ -220,6 +419,7 @@ __export(index_exports, {
   useThreadRuntime: () => import_react69.useThreadRuntime,
   useTimbalRuntime: () => useTimbalRuntime,
   useTimbalStream: () => useTimbalStream,
+  useToast: () => useToast,
   useToolRunning: () => useToolRunning,
   useUiCustomNodeRegistry: () => useUiCustomNodeRegistry,
   useUiDispatch: () => useUiDispatch,
@@ -2754,7 +2954,7 @@ var import_jsx_runtime16 = require("react/jsx-runtime");
 var UiStateContext = (0, import_react12.createContext)({});
 var UiDispatchContext = (0, import_react12.createContext)(() => {
 });
-var UiStateProvider = ({ state, dispatch, children }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiStateContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiDispatchContext.Provider, { value: dispatch, children }) });
+var UiStateProvider = ({ state, dispatch: dispatch2, children }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiStateContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UiDispatchContext.Provider, { value: dispatch2, children }) });
 function useUiState() {
   return (0, import_react12.useContext)(UiStateContext);
 }
@@ -2878,7 +3078,7 @@ var UiNodeView = ({ node }) => {
 };
 function useActionRunner() {
   const state = useUiState();
-  const dispatch = useUiDispatch();
+  const dispatch2 = useUiDispatch();
   const runtime = (0, import_react15.useThreadRuntime)();
   const emit = useUiEventEmitter();
   return (0, import_react13.useCallback)(
@@ -2899,11 +3099,11 @@ function useActionRunner() {
           }
           case "set": {
             const value = resolveBindable(action.value, state);
-            dispatch({ type: "set", path: action.path, value });
+            dispatch2({ type: "set", path: action.path, value });
             break;
           }
           case "toggle": {
-            dispatch({ type: "toggle", path: action.path });
+            dispatch2({ type: "toggle", path: action.path });
             break;
           }
           case "emit": {
@@ -2913,7 +3113,7 @@ function useActionRunner() {
         }
       }
     },
-    [state, dispatch, runtime, emit]
+    [state, dispatch2, runtime, emit]
   );
 }
 var ALIGN_CLS = {
@@ -3046,12 +3246,12 @@ var ButtonNode = ({ node }) => {
 };
 var ToggleNode = ({ node }) => {
   const state = useUiState();
-  const dispatch = useUiDispatch();
+  const dispatch2 = useUiDispatch();
   const run = useActionRunner();
   const value = Boolean(getPath(state, node.binding));
   const label = node.label ? String(resolveBindable(node.label, state) ?? "") : null;
   const onToggle = () => {
-    dispatch({ type: "toggle", path: node.binding });
+    dispatch2({ type: "toggle", path: node.binding });
     run(node.onChange);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
@@ -3093,7 +3293,7 @@ var ToggleNode = ({ node }) => {
 };
 var SliderNode = ({ node }) => {
   const state = useUiState();
-  const dispatch = useUiDispatch();
+  const dispatch2 = useUiDispatch();
   const run = useActionRunner();
   const min = node.min ?? 0;
   const max = node.max ?? 100;
@@ -3104,7 +3304,7 @@ var SliderNode = ({ node }) => {
   const label = node.label ? String(resolveBindable(node.label, state) ?? "") : null;
   const onChange = (e) => {
     const next = Number(e.target.value);
-    dispatch({ type: "set", path: node.binding, value: next });
+    dispatch2({ type: "set", path: node.binding, value: next });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("aui-ui-slider flex flex-col gap-1", node.className), children: [
     (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
@@ -3179,11 +3379,11 @@ function resolveProps(props, state) {
 // src/artifacts/ui/ui-artifact.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var UiArtifactView = ({ artifact }) => {
-  const [state, dispatch] = (0, import_react16.useReducer)(
+  const [state, dispatch2] = (0, import_react16.useReducer)(
     uiStateReducer,
     artifact.initialState ?? {}
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(UiStateProvider, { state, dispatch, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(UiNodeView, { node: artifact.root }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ArtifactCard, { title: artifact.title, kind: "ui", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(UiStateProvider, { state, dispatch: dispatch2, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "aui-ui-root p-3", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(UiNodeView, { node: artifact.root }) }) }) });
 };
 
 // src/artifacts/registry.tsx
@@ -4665,6 +4865,41 @@ function TimbalChat({
 
 // src/chat/workforce-selector.tsx
 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"
+};
+var CONTROL_SHAPE = {
+  field: "rounded-lg",
+  pill: "rounded-full"
+};
+var controlSurfaceClass = cn(
+  TIMBAL_V2_SECONDARY_CHROME,
+  "text-sm text-foreground outline-none",
+  "placeholder:text-muted-foreground/70",
+  "focus-visible:ring-2 focus-visible:ring-foreground/10",
+  "focus-within:ring-2 focus-within:ring-foreground/10",
+  "disabled:cursor-not-allowed disabled:opacity-50",
+  "data-[placeholder]:text-muted-foreground"
+);
+function controlClass(options = {}, className) {
+  const { size = "default", shape = "field" } = options;
+  return cn(controlSurfaceClass, CONTROL_SIZE[size], CONTROL_SHAPE[shape], className);
+}
+var overlayAnimationClass = "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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+var overlaySurfaceClass = cn(
+  "z-[80] border border-border bg-popover text-popover-foreground shadow-card",
+  overlayAnimationClass
+);
+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";
+
+// src/chat/workforce-selector.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var WorkforceSelector = ({
   workforces,
@@ -4681,8 +4916,8 @@ var WorkforceSelector = ({
     {
       className: cn(
         "aui-workforce-selector relative inline-flex items-center",
+        controlSurfaceClass,
         studioTopbarPillHeightClass,
-        studioSecondaryChromeClass,
         "rounded-full",
         className
       ),
@@ -6475,7 +6710,191 @@ var StudioModeSwitch = (0, import_react53.memo)(
   }
 );
 
+// src/design/ui-vocabulary.ts
+var SEMANTIC_COLOR_TOKENS = [
+  // shadcn-style base tokens
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring",
+  // sidebar scope
+  "sidebar",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring",
+  // timbal chrome extensions
+  "elevated-from",
+  "elevated-to",
+  "modal-from",
+  "modal-to",
+  "playground-from",
+  "playground-via",
+  "playground-to",
+  "composer-bg",
+  "composer-border",
+  "composer-border-focus",
+  "bubble-user",
+  "bubble-user-foreground",
+  "code-block-bg",
+  "code-header-bg"
+];
+var RESERVED_GRADIENT_TOKENS = [
+  "primary-fill-from",
+  "primary-fill-to",
+  "primary-fill-hover-from",
+  "primary-fill-hover-to",
+  "primary-fill-active-from",
+  "primary-fill-active-to",
+  "secondary-fill-hover-from",
+  "secondary-fill-hover-to",
+  "secondary-fill-active-from",
+  "secondary-fill-active-to",
+  "destructive-fill-hover-from",
+  "destructive-fill-hover-to",
+  "destructive-fill-active-from",
+  "destructive-fill-active-to",
+  "ghost-fill-hover",
+  "ghost-fill-active",
+  "elevated-from",
+  "elevated-to",
+  "modal-from",
+  "modal-to",
+  "playground-from",
+  "playground-via",
+  "playground-to"
+];
+var TAILWIND_PALETTE_COLORS = [
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
+];
+var COLOR_UTILITY_PREFIXES = [
+  "bg",
+  "text",
+  "border",
+  "ring",
+  "from",
+  "via",
+  "to",
+  "fill",
+  "stroke",
+  "decoration",
+  "outline",
+  "shadow",
+  "divide",
+  "accent",
+  "caret"
+];
+var SLOP_BUDGETS = {
+  /** Max decorative/standalone icons rendered in a single generated file. */
+  maxIconsPerView: 6,
+  /** Max consecutive list rows separated by an explicit border/divider before
+   *  it reads as a "ruled table" — prefer spacing or zebra instead. */
+  maxRowDividers: 2
+};
+var HOUSE_RULES = [
+  {
+    id: "semantic-color",
+    rule: "Color only through semantic tokens \u2014 never a raw palette color, hex, or oklch literal.",
+    why: "The theme generator owns every color; hardcoding breaks dark mode and rebranding.",
+    slop: `<span className="text-blue-600 bg-green-50">`,
+    good: `<span className="text-primary bg-muted">`
+  },
+  {
+    id: "no-decorative-icons",
+    rule: "Icons must earn their place (action, nav, or status). Never add an icon beside a label that already says the thing.",
+    why: "An icon on every tile/card is the #1 tell of generated slop.",
+    slop: `<StatTile label={<><BarChart2 /> Revenue</>} value="$95k" />`,
+    good: `<StatTile label="Revenue" value="$95k" />`
+  },
+  {
+    id: "neutral-trend",
+    rule: "Don't put a colored trend pill on every metric. Use a trend only when the delta is the point, and keep it muted.",
+    why: "Loud green/red pills everywhere are noise, not signal.",
+    slop: `<MetricTile trend="+8%" className="text-green-500" />`,
+    good: `<MetricTile label="Win rate" value="50%" />`
+  },
+  {
+    id: "values-normal-weight",
+    rule: "Metric values use normal font weight, not bold.",
+    why: "Giant bold numbers read as a template; normal weight reads as a product.",
+    slop: `<span className="text-3xl font-bold tabular-nums">$322k</span>`,
+    good: `<span className="text-2xl font-normal tabular-nums">$322k</span>`
+  },
+  {
+    id: "no-card-in-card",
+    rule: "Don't nest a bordered card inside another bordered card. Group with spacing or a Section instead.",
+    why: "Card-in-card doubles borders and shadows for no information gain."
+  },
+  {
+    id: "no-row-dividers",
+    rule: "Don't put a divider between every list row. Use spacing or zebra striping.",
+    why: "A rule under every row turns a clean list into a dense ledger."
+  },
+  {
+    id: "no-data-gradient",
+    rule: "Gradients are reserved for chrome (composer, elevated surface, playground). Never on a data card, tile, or table.",
+    why: "Gradient stat cards are the canonical 'AI dashboard' look."
+  },
+  {
+    id: "compose-from-blocks",
+    rule: "Build from premade blocks (MetricRow, MetricChartCard, DataTable, IntegrationCard). Drop to raw primitives only when no block fits.",
+    why: "Slop appears the moment generation falls below the curated block layer."
+  },
+  {
+    id: "use-kit-controls",
+    rule: "Use the kit's controls (SearchInput, Select, DropdownMenu, FieldInput, FieldSelect) \u2014 never hand-roll an input/trigger surface (`border-input rounded-* bg-\u2026`).",
+    why: "Hand-rolled controls drift from the shared control-surface skin and look foreign next to kit controls.",
+    slop: `<button className="rounded-lg border border-input bg-transparent px-3 h-9">`,
+    good: `<SelectTrigger><SelectValue /></SelectTrigger>`
+  }
+];
+
 // src/app/agent-instructions.ts
+var ANTI_SLOP_CHECKLIST = HOUSE_RULES.map((r) => {
+  const pair = r.slop && r.good ? `
+  - slop: \`${r.slop}\`
+  - good: \`${r.good}\`` : "";
+  return `- **${r.id}** \u2014 ${r.rule} (${r.why})${pair}`;
+}).join("\n");
 var APP_KIT_AGENT_INSTRUCTIONS = `
 ## App kit (@timbal-ai/timbal-react/app)
 
@@ -6523,7 +6942,15 @@ Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\
 | **Modals** | Use \`AppConfirmDialog\` for destructive/export confirmations. |
 | **Metrics** | Overview KPIs \u2192 \`MetricRow\` or \`MetricChartCard\` (not four separate heavy cards). Values use **normal** font weight, not bold. |
 | **Integrations** | Catalog \u2192 \`IntegrationCard\` grid; connected list \u2192 \`ConnectionRow\` inside \`ConnectionRowList\`. Footer CTAs: \`Button variant="secondary"\`. |
-| **Anti-slop** | No loud green/red trend pills on every tile; no \`bg-card\` flat grids when platform chrome exists; avoid recycling demo names ("Operations", mock workforce lists). |
+| **Anti-slop** | Follow the **anti-slop checklist** below. No loud green/red trend pills on every tile; no \`bg-card\` flat grids when platform chrome exists; avoid recycling demo names ("Operations", mock workforce lists). |
+
+### Anti-slop checklist (required \u2014 output is linted against this)
+
+Generated UIs are checked by \`lintGeneratedUi\` and rejected on any error. Self-review against these before returning code (icon budget: ${SLOP_BUDGETS.maxIconsPerView} per view; at most ${SLOP_BUDGETS.maxRowDividers} ruled rows before it reads as a ledger):
+
+${ANTI_SLOP_CHECKLIST}
+
+The cause of slop is dropping **below** the curated block layer into raw primitives + free Tailwind. Stay on the blocks; reach for primitives only when no block fits, and even then keep colors on semantic tokens.
 
 ### Accessibility (required)
 
@@ -6549,7 +6976,8 @@ Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\
 | \`useAppShellChat\` | Custom open/close trigger when \`hideChatTrigger\` on shell. |
 | \`Page\` | Page title, description, \`breadcrumbs\`, \`actions\`, children. |
 | \`Section\` | Titled block inside a page. |
-| \`SubNav\` | In-page tabs: \`items\`, \`activeId\`, \`onChange\`. |
+| \`SubNav\` | **Section switcher** (Overview / Reports pill bar): \`items\`, \`activeId\`, \`onChange\`. Never use Radix/shadcn \`Tabs\` \u2014 it is not in this package. Switch panels with state or the router. |
+| **Menus** | **Select** = short list, no search. **Combobox** = searchable (same trigger as Select). **Command** only inside \`PopoverContent variant="list"\` or Combobox \u2014 never padded default Popover. See \`examples/app-kit/src/recipes/primitives-catalog.ts\`. |
 | \`Breadcrumbs\` | Trail: \`items: [{ label, href? }]\`. |
 | \`Button\` | Actions \u2014 \`variant="secondary"\` for catalog/secondary CTAs; \`variant="default"\` for primary. |
 | \`StatTile\` | Single KPI in its own card (grid of scattered stats). Prefer \`MetricRow\` for a unified overview strip. |
@@ -6605,19 +7033,36 @@ Theming helpers (import from the package root or \`/app\`): \`createTimbalTheme\
 
 Studio chrome (\`StudioSidebar\`, \`ModeToggle\`, \u2026) lives in \`@timbal-ai/timbal-react/studio\` \u2014 optional, not required for every dashboard.
 
-### Recipe index (\`examples/app-kit/recipes/\`)
+### Block recipes \u2014 compose these (don't clone wholesale)
+
+Ready-made **section patterns** assembled from the components above. Each is a composition to rebuild in your own domain with your data \u2014 **not** an importable component. Reach for a block before dropping to raw primitives.
+
+**Settings**
+- **Project settings** \u2014 General / Usage / Danger sections; the floating save bar appears on first edit. Compose \`SettingsSection\` + \`FieldInput\`/\`FieldSwitch\` + \`FieldRow\` + \`InfoCard\` + \`DangerZone\` + \`FloatingUnsavedChangesBar\`.
+- **Settings form** \u2014 compact stacked form for one concern (profile, billing). Compose \`FormSection\` + \`FieldInput\`/\`FieldSelect\`/\`FieldTextarea\`.
+
+**Data & metrics**
+- **Metrics row** \u2014 KPI strip in one elevated card. Compose \`MetricRow\` + \`MetricTile\`.
+- **Analytics card** \u2014 selectable KPI tiles driving a shared chart. Compose \`MetricChartCard\` + \`LineAreaChart\`.
+- **Charts panel** \u2014 embedded chart artifact. Compose \`ChartPanel\` + \`ChartArtifactView\`.
+- **Table + filters** \u2014 \`FilterBar\` above a sortable \`DataTable\` (+ \`StatusBadge\` in cells).
 
-| Recipe file | Components to study |
-|-------------|---------------------|
-| \`metrics-row.tsx\` | \`Page\`, \`MetricRow\` |
-| \`analytics-card.tsx\` | \`MetricChartCard\`, \`Button\` |
-| \`integrations-grid.tsx\` | \`IntegrationCard\`, \`ConnectionRowList\`, \`PlanBadge\` |
-| \`table-with-filters.tsx\` | \`FilterBar\`, \`DataTable\` |
-| \`settings-page.tsx\` | \`SettingsSection\`, \`DangerZone\`, \`FloatingUnsavedChangesBar\` |
-| \`resource-gallery.tsx\` | \`ResourceCard\`, \`StatusDot\`, \`Sparkline\` |
-| \`charts-panel.tsx\` | \`ChartPanel\`, \`ChartArtifact\` |
-| \`copilot-overlay.tsx\` | \`AppShell\`, \`AppChatPanel\` |
-| \`theme-presets.tsx\` | \`ThemePresetGallery\`, \`applyTimbalTheme\` |
+**Collections**
+- **Integrations grid** \u2014 connector catalog + connected list. Compose \`IntegrationCard\` + \`PlanBadge\` + \`ConnectionRowList\` (\`IntegrationsEmptyState\` when empty).
+- **Resource gallery** \u2014 project / agent / dataset cards. Compose \`ResourceCard\` + \`StatusDot\` + \`Sparkline\`.
+
+**Overlays & flows** (animate automatically)
+- **Confirm & destructive** \u2014 confirm/cancel modal or destructive alert. Compose \`AppConfirmDialog\` (or \`AlertDialog\`) + \`Button\`; never hand-roll a \`Dialog\` for confirms.
+- **Detail sheet** \u2014 slide-over edit panel without leaving the list. Compose \`Sheet\` + \`Field*\` + \`Button\` + \`Separator\`.
+
+**States & auth**
+- **Empty states** \u2014 no-data / no-results / first-run. Compose \`EmptyState\` + \`Card\` + \`Button\`.
+- **Sign-in card** \u2014 centered auth entry. Compose \`Card\` + \`Input\` + \`Label\` + \`Button\`.
+
+**Shells & theming**
+- **Minimal shell** \u2014 \`AppShell\` + \`Page\` (no sidebar/chat).
+- **Copilot overlay** \u2014 \`AppShell\` + floating \`AppChatPanel\`.
+- **Theme presets** \u2014 \`ThemePresetGallery\` + \`applyTimbalTheme\` (never hand-author OKLCH).
 
 ### Typical compositions
 
@@ -6628,6 +7073,7 @@ Studio chrome (\`StudioSidebar\`, \`ModeToggle\`, \u2026) lives in \`@timbal-ai/
 - **Integrations** \u2014 grid of \`IntegrationCard\`; \`ConnectionRowList\` for connected providers; \`IntegrationsEmptyState\` when empty.
 - **Resource gallery** \u2014 grid of \`ResourceCard\`.
 - **Copilot-assisted app** \u2014 \`AppCopilotProvider\` + \`AppShell\` with \`chat={<AppChatPanel workforceId="\u2026" />}\`.
+- **Motion is automatic** \u2014 Dialog, AlertDialog, Sheet, Popover, DropdownMenu, Select, Tooltip, Toast, and Accordion/Collapsible animate out of the box (fade/zoom/slide/height) via the engine inlined in \`styles.css\`. Do not add a separate animation library or hand-write \`@keyframes\`.
 
 ### Example imports
 
@@ -6663,6 +7109,211 @@ import {
 - For rich in-chat widgets, use **artifacts** (\`ARTIFACT_AGENT_INSTRUCTIONS\`) \u2014 app kit is for the **host application shell**.
 `.trim();
 
+// src/design/ui-lint.ts
+var PALETTE_GROUP = TAILWIND_PALETTE_COLORS.join("|");
+var PREFIX_GROUP = COLOR_UTILITY_PREFIXES.join("|");
+var RAW_COLOR_RE = new RegExp(
+  `(?:^|[\\s"'\`:])(?:[a-z-]+:)*(?:${PREFIX_GROUP})-(?:${PALETTE_GROUP})-\\d{2,3}(?:/\\d{1,3})?`,
+  "g"
+);
+var COLOR_LITERAL_RE = /#[0-9a-fA-F]{3,8}\b|\b(?:oklch|rgba?|hsla?)\s*\(/g;
+var INLINE_STYLE_COLOR_RE = /style=\{\{[^}]*\b(?:color|background|backgroundColor|borderColor|fill|stroke)\b/;
+var BOLD_VALUE_RE = /text-(?:xl|2xl|3xl|4xl|5xl|6xl)[^"'`]*\bfont-(?:bold|extrabold|black|semibold)|font-(?:bold|extrabold|black|semibold)[^"'`]*text-(?:xl|2xl|3xl|4xl|5xl|6xl)/;
+var GRADIENT_RE = /\bbg-(?:gradient|linear|radial|conic)-/;
+var GRADIENT_DIRECTIONS = /* @__PURE__ */ new Set([
+  "t",
+  "tr",
+  "r",
+  "br",
+  "b",
+  "bl",
+  "l",
+  "tl"
+]);
+var ICON_IMPORT_RE = /from\s+["']lucide-react["']/;
+var RAW_CONTROL_SURFACE_RE = /\bborder-input\b/;
+var RESERVED_GRADIENT_SET = new Set(RESERVED_GRADIENT_TOKENS);
+function stripVariants(util) {
+  return util.replace(/^(?:[a-z-]+:)*/, "");
+}
+function isCommentOrImport(line) {
+  const t = line.trim();
+  return t.startsWith("//") || t.startsWith("*") || t.startsWith("/*") || t.startsWith("import ") || t.startsWith("export ");
+}
+function lintGeneratedUi(source, options = {}) {
+  const maxIcons = options.maxIconsPerView ?? SLOP_BUDGETS.maxIconsPerView;
+  const maxRowDividers = options.maxRowDividers ?? SLOP_BUDGETS.maxRowDividers;
+  const findings = [];
+  const lines = source.split("\n");
+  let usesLucide = false;
+  let iconUsageCount = 0;
+  let dividerRunCount = 0;
+  const lucideNames = /* @__PURE__ */ new Set();
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const lineNo = i + 1;
+    if (ICON_IMPORT_RE.test(line)) {
+      usesLucide = true;
+      const named = line.match(/\{([^}]*)\}/);
+      if (named) {
+        for (const raw of named[1].split(",")) {
+          const name = raw.trim().split(/\s+as\s+/)[0].trim();
+          if (name) lucideNames.add(name);
+        }
+      }
+      continue;
+    }
+    if (isCommentOrImport(line)) continue;
+    const rawColors = line.match(RAW_COLOR_RE);
+    if (rawColors) {
+      for (const m of rawColors) {
+        findings.push({
+          rule: "raw-color",
+          severity: "error",
+          line: lineNo,
+          message: "Hardcoded palette color. Use a semantic token (text-primary, bg-muted, border-border, text-muted-foreground, \u2026) so dark mode and rebranding work.",
+          snippet: m.trim().replace(/^["'`:\s]+/, "")
+        });
+      }
+    }
+    const literals = line.match(COLOR_LITERAL_RE);
+    if (literals) {
+      findings.push({
+        rule: "color-literal",
+        severity: "error",
+        line: lineNo,
+        message: "Hardcoded color literal. Colors must come from the theme generator (createTimbalTheme) and semantic tokens \u2014 never inline hex/oklch/rgb.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
+    if (INLINE_STYLE_COLOR_RE.test(line)) {
+      findings.push({
+        rule: "inline-style-color",
+        severity: "error",
+        line: lineNo,
+        message: "Inline style color. Move color to a semantic Tailwind token on className.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
+    if (RAW_CONTROL_SURFACE_RE.test(line)) {
+      findings.push({
+        rule: "raw-control-surface",
+        severity: "warn",
+        line: lineNo,
+        message: "Hand-rolled control surface (border-input). Use a kit control \u2014 SearchInput, Select, DropdownMenu, FieldInput, FieldSelect \u2014 so it matches every other control.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
+    if (BOLD_VALUE_RE.test(line)) {
+      findings.push({
+        rule: "bold-metric",
+        severity: "warn",
+        line: lineNo,
+        message: "Bold large value. House style: metric values use font-normal, not bold \u2014 bold giant numbers read as a template.",
+        snippet: line.trim().slice(0, 120)
+      });
+    }
+    if (GRADIENT_RE.test(line)) {
+      const fromTo = line.match(
+        new RegExp(`(?:from|via|to)-([a-z-]+)`, "g")
+      );
+      const colorStops = (fromTo ?? []).map((u) => stripVariants(u).replace(/^(?:from|via|to)-/, "")).filter((token) => !GRADIENT_DIRECTIONS.has(token));
+      const allReserved = colorStops.length > 0 && colorStops.every((token) => RESERVED_GRADIENT_SET.has(token));
+      if (!allReserved) {
+        findings.push({
+          rule: "data-gradient",
+          severity: "warn",
+          line: lineNo,
+          message: "Gradient outside chrome. Gradients are reserved for buttons / elevated / modal / playground \u2014 never a data card, tile, or table.",
+          snippet: line.trim().slice(0, 120)
+        });
+      }
+    }
+    if (/\b(?:border-t|border-b|divide-y)\b/.test(line)) {
+      dividerRunCount++;
+      if (dividerRunCount === maxRowDividers + 1) {
+        findings.push({
+          rule: "row-divider",
+          severity: "warn",
+          line: lineNo,
+          message: "Divider on every row. Prefer spacing (gap-*) or zebra striping over a rule under each list item.",
+          snippet: line.trim().slice(0, 120)
+        });
+      }
+    } else if (line.trim() !== "" && !line.includes("className")) {
+      if (!/^\s*[)>}/]/.test(line)) dividerRunCount = 0;
+    }
+    if (usesLucide && lucideNames.size > 0) {
+      for (const name of lucideNames) {
+        const usage = new RegExp(`<${name}\\b`, "g");
+        const hits = line.match(usage);
+        if (hits) iconUsageCount += hits.length;
+      }
+    }
+  }
+  if (usesLucide && iconUsageCount > maxIcons) {
+    findings.push({
+      rule: "icon-spam",
+      severity: "warn",
+      line: 1,
+      message: `Too many icons (${iconUsageCount} > ${maxIcons}). Icons should mark actions/nav/status \u2014 not decorate every label, tile, and card.`,
+      snippet: `${iconUsageCount} lucide-react icon usages`
+    });
+  }
+  const effectiveErrors = findings.filter(
+    (f) => f.severity === "error" || options.strict && f.severity === "warn"
+  ).length;
+  return {
+    findings,
+    errorCount: findings.filter((f) => f.severity === "error").length,
+    warnCount: findings.filter((f) => f.severity === "warn").length,
+    ok: effectiveErrors === 0
+  };
+}
+function formatLintReport(findings) {
+  if (findings.length === 0) return "";
+  const lines = findings.slice().sort((a, b) => a.line - b.line).map((f) => {
+    const tag = f.severity === "error" ? "ERROR" : "warn ";
+    return `  ${tag} L${f.line} [${f.rule}] ${f.message}
+        \u2192 ${f.snippet}`;
+  });
+  const errs = findings.filter((f) => f.severity === "error").length;
+  const warns = findings.filter((f) => f.severity === "warn").length;
+  return `Anti-slop review: ${errs} error(s), ${warns} warning(s)
+${lines.join("\n")}`;
+}
+
+// src/design/ui-review.ts
+function reviewGeneratedUi(source, options = {}) {
+  const lint = lintGeneratedUi(source, options);
+  const report = formatLintReport(lint.findings);
+  if (lint.ok) {
+    return { lint, passed: true, report, revisionPrompt: null };
+  }
+  const revisionPrompt = [
+    "The generated UI failed the Timbal anti-slop review. Fix every issue below, then return the corrected code only.",
+    "",
+    report,
+    "",
+    "Rules: colors come only from semantic tokens (text-primary, bg-muted, border-border, text-muted-foreground, \u2026) \u2014 never palette colors, hex, or oklch. Icons mark actions/nav/status, not decoration. Metric values use font-normal. No gradients on data surfaces. No divider under every row. Do not change anything that already passed."
+  ].join("\n");
+  return { lint, passed: false, report, revisionPrompt };
+}
+var UI_REVIEW_AGENT_INSTRUCTIONS = `
+## Self-review before returning UI (anti-slop)
+
+Before you output any generated UI code, silently re-read it and fix anything that matches the slop checklist \u2014 this is the same rubric an automated linter applies, so output that fails it will be rejected and sent back:
+
+- **No hardcoded colors.** Every color is a semantic token (\`text-primary\`, \`bg-muted\`, \`border-border\`, \`text-muted-foreground\`, \`bg-destructive\`, \u2026). No \`text-blue-600\`, no \`#hex\`, no \`oklch(...)\`, no \`style={{ color }}\`.
+- **No decorative icons.** An icon must mark an action, nav target, or status. Remove icons that sit beside a label that already says the thing. Aim for very few icons per view.
+- **Muted, sparse trends.** No colored up/down pill on every metric. Show a trend only when the change is the point.
+- **Normal-weight values.** Metric numbers use \`font-normal\`, never \`font-bold\` at large sizes.
+- **No card-in-card, no per-row dividers, no gradients on data surfaces.** Group with spacing/Sections; reserve gradients for chrome.
+- **Compose from blocks.** Prefer \`MetricRow\` / \`MetricChartCard\` / \`DataTable\` / \`IntegrationCard\` over hand-assembled primitives.
+
+If a check fails, fix it and re-read once more. Only return code that would pass clean.
+`.trim();
+
 // src/design/oklch.ts
 var clamp = (n, min, max) => Math.min(max, Math.max(min, n));
 var round2 = (n, digits) => {
@@ -6800,6 +7451,38 @@ function relativeLuminance(color) {
 }
 
 // src/design/theme.ts
+var SHADOW_PRESETS = {
+  none: {
+    lightCard: "none",
+    lightElevated: "none",
+    darkCard: "none",
+    darkElevated: "none"
+  },
+  hairline: {
+    lightCard: "0 0 0 1px rgba(15, 23, 42, 0.06)",
+    lightElevated: "0 1px 2px rgba(15, 23, 42, 0.06)",
+    darkCard: "0 0 0 1px rgba(255, 255, 255, 0.06)",
+    darkElevated: "0 2px 8px rgba(0, 0, 0, 0.4)"
+  },
+  soft: {
+    lightCard: "0 1px 2px rgba(15, 23, 42, 0.04)",
+    lightElevated: "0 8px 30px rgba(15, 23, 42, 0.07)",
+    darkCard: "0 1px 2px rgba(0, 0, 0, 0.3)",
+    darkElevated: "0 10px 34px rgba(0, 0, 0, 0.45)"
+  },
+  medium: {
+    lightCard: "0 1px 2px -0.5px rgba(0, 0, 0, 0.05)",
+    lightElevated: "0 4px 24px rgba(0, 0, 0, 0.06)",
+    darkCard: "0 1px 3px rgba(0, 0, 0, 0.22)",
+    darkElevated: "0 4px 24px rgba(0, 0, 0, 0.35)"
+  },
+  strong: {
+    lightCard: "0 2px 6px rgba(15, 23, 42, 0.10)",
+    lightElevated: "0 16px 48px rgba(15, 23, 42, 0.16)",
+    darkCard: "0 2px 6px rgba(0, 0, 0, 0.4)",
+    darkElevated: "0 18px 50px rgba(0, 0, 0, 0.6)"
+  }
+};
 function primaryForMode(brand, mode) {
   if (mode === "light") {
     return { ...brand, l: Math.min(Math.max(brand.l, 0.42), 0.68) };
@@ -6835,8 +7518,26 @@ function createTimbalTheme(intent) {
   const light = {};
   const dark = {};
   const root = {};
+  let fontFamily;
+  let fontImportUrl;
   if (typeof intent.radius === "number") {
     root["--radius"] = `${intent.radius}rem`;
+    root["--radius-2xl"] = `${Math.max(intent.radius + 0.25, 0)}rem`;
+  }
+  if (intent.typography) {
+    const { sans, display, mono, importUrl } = intent.typography;
+    root["--font-sans"] = sans;
+    if (display) root["--font-display"] = display;
+    if (mono) root["--font-mono"] = mono;
+    fontFamily = sans;
+    fontImportUrl = importUrl;
+  }
+  if (intent.shadow) {
+    const s = SHADOW_PRESETS[intent.shadow];
+    light["--shadow-card-value"] = s.lightCard;
+    light["--shadow-card-elevated-value"] = s.lightElevated;
+    dark["--shadow-card-value"] = s.darkCard;
+    dark["--shadow-card-elevated-value"] = s.darkElevated;
   }
   const primaryLight = primaryForMode(brand, "light");
   const primaryDark = primaryForMode(brand, "dark");
@@ -6934,7 +7635,7 @@ function createTimbalTheme(intent) {
       );
     }
   }
-  return { light, dark, root };
+  return { light, dark, root, fontFamily, fontImportUrl };
 }
 function declarations(map, indent) {
   return Object.entries(map).map(([name, value]) => `${indent}${name}: ${value};`).join("\n");
@@ -6957,6 +7658,11 @@ ${declarations(theme.dark, indent)}
 }`
       );
     }
+    if (theme.fontFamily) {
+      blocks.push(`${sel} {
+${indent}font-family: var(--font-sans);
+}`);
+    }
   } else {
     if (Object.keys(lightVars).length) {
       blocks.push(`:root {
@@ -6966,15 +7672,45 @@ ${declarations(lightVars, indent)}
     if (Object.keys(theme.dark).length) {
       blocks.push(`.dark {
 ${declarations(theme.dark, indent)}
+}`);
+    }
+    if (theme.fontFamily) {
+      blocks.push(`:root,
+body {
+${indent}font-family: var(--font-sans);
 }`);
     }
   }
-  return blocks.join("\n\n");
+  const css = blocks.join("\n\n");
+  if (options.includeFontImport && theme.fontImportUrl) {
+    return `@import url("${theme.fontImportUrl}");
+
+${css}`;
+  }
+  return css;
 }
 var RUNTIME_STYLE_ID = "timbal-theme-runtime";
+var FONT_LINK_ATTR = "data-timbal-theme-font";
+function ensureThemeFontLink(url) {
+  if (typeof document === "undefined") return;
+  const existing = document.head.querySelector(
+    `link[${FONT_LINK_ATTR}]`
+  );
+  if (!url) {
+    existing?.remove();
+    return;
+  }
+  if (existing?.getAttribute("href") === url) return;
+  const link = existing ?? document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = url;
+  link.setAttribute(FONT_LINK_ATTR, "");
+  if (!existing) document.head.appendChild(link);
+}
 function applyTimbalTheme(theme) {
   if (typeof document === "undefined") return () => {
   };
+  ensureThemeFontLink(theme.fontImportUrl);
   let el = document.getElementById(RUNTIME_STYLE_ID);
   if (!el) {
     el = document.createElement("style");
@@ -6985,11 +7721,13 @@ function applyTimbalTheme(theme) {
   el.textContent = themeToCss(theme);
   return () => {
     el?.parentNode?.removeChild(el);
+    ensureThemeFontLink(void 0);
   };
 }
 function clearTimbalTheme() {
   if (typeof document === "undefined") return;
   document.getElementById(RUNTIME_STYLE_ID)?.remove();
+  ensureThemeFontLink(void 0);
 }
 function isDev2() {
   if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") {
@@ -7000,48 +7738,122 @@ function isDev2() {
 
 // src/design/theme-presets.ts
 var EMPTY_TOKENS = { light: {}, dark: {}, root: {} };
+var FONT_URL = {
+  geist: "https://fonts.googleapis.com/css2?family=Geist:wght@400..600&display=swap",
+  sora: "https://fonts.googleapis.com/css2?family=Sora:wght@400..600&display=swap",
+  lexend: "https://fonts.googleapis.com/css2?family=Lexend:wght@400..600&display=swap",
+  inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400..600&display=swap",
+  fraunces: "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..600&display=swap",
+  jetbrains: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400..600&display=swap"
+};
+var STACK = {
+  geist: '"Geist", ui-sans-serif, system-ui, sans-serif',
+  sora: '"Sora", ui-sans-serif, system-ui, sans-serif',
+  lexend: '"Lexend", ui-sans-serif, system-ui, sans-serif',
+  inter: '"Inter", ui-sans-serif, system-ui, sans-serif',
+  fraunces: '"Fraunces", ui-serif, Georgia, "Times New Roman", serif',
+  jetbrains: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace'
+};
 var TIMBAL_THEME_PRESETS = [
   {
     id: "platform",
     label: "Platform",
-    description: "Shipped neutral monochrome \u2014 the Timbal Platform default. Calm, brand-agnostic.",
+    description: "Shipped neutral monochrome \u2014 the Timbal Platform default. Calm, brand-agnostic, system font.",
     swatch: "oklch(0.205 0 0)",
+    font: null,
     tokens: EMPTY_TOKENS
   },
   {
     id: "indigo",
     label: "Indigo",
-    description: "Cool, trustworthy blue-violet \u2014 good for analytics & ops dashboards.",
+    description: "Cool, trustworthy blue-violet, Geist type, generous radius, soft shadows \u2014 analytics & ops dashboards.",
     swatch: "#4f46e5",
-    tokens: createTimbalTheme({ brand: "#4f46e5" })
+    font: "Geist",
+    tokens: createTimbalTheme({
+      brand: "#4f46e5",
+      radius: 0.875,
+      shadow: "soft",
+      typography: { sans: STACK.geist, importUrl: FONT_URL.geist }
+    })
   },
   {
     id: "violet",
     label: "Violet",
-    description: "Vivid purple \u2014 expressive, product/marketing-leaning surfaces.",
+    description: "Vivid purple, Sora type, rounded, soft shadows \u2014 expressive product / marketing surfaces.",
     swatch: "#7c3aed",
-    tokens: createTimbalTheme({ brand: "#7c3aed" })
+    font: "Sora",
+    tokens: createTimbalTheme({
+      brand: "#7c3aed",
+      radius: 1,
+      shadow: "soft",
+      typography: { sans: STACK.sora, importUrl: FONT_URL.sora }
+    })
   },
   {
     id: "forest",
     label: "Forest",
-    description: "Grounded green \u2014 finance, sustainability, status-positive apps.",
+    description: "Grounded green, Lexend type, compact radius \u2014 finance, sustainability, status-positive apps.",
     swatch: "#16a34a",
-    tokens: createTimbalTheme({ brand: "#16a34a" })
+    font: "Lexend",
+    tokens: createTimbalTheme({
+      brand: "#16a34a",
+      radius: 0.625,
+      shadow: "soft",
+      typography: { sans: STACK.lexend, importUrl: FONT_URL.lexend }
+    })
   },
   {
     id: "warm",
     label: "Warm",
-    description: "Energetic orange \u2014 consumer, creative, high-engagement tools.",
+    description: "Energetic orange, Lexend type, friendly radius \u2014 consumer, creative, high-engagement tools.",
     swatch: "#ea580c",
-    tokens: createTimbalTheme({ brand: "#ea580c" })
+    font: "Lexend",
+    tokens: createTimbalTheme({
+      brand: "#ea580c",
+      radius: 0.875,
+      shadow: "soft",
+      typography: { sans: STACK.lexend, importUrl: FONT_URL.lexend }
+    })
   },
   {
     id: "slate",
     label: "Slate",
-    description: "Muted cool gray-blue with a subtle tint \u2014 understated enterprise.",
+    description: "Muted enterprise gray-blue, Inter type, tight radius, hairline shadows, tinted neutrals.",
     swatch: "#475569",
-    tokens: createTimbalTheme({ brand: "#475569", tintNeutrals: true })
+    font: "Inter",
+    tokens: createTimbalTheme({
+      brand: "#475569",
+      radius: 0.5,
+      shadow: "hairline",
+      tintNeutrals: true,
+      typography: { sans: STACK.inter, importUrl: FONT_URL.inter }
+    })
+  },
+  {
+    id: "folio",
+    label: "Folio",
+    description: "Editorial serif (Fraunces), near-sharp corners, hairline shadows \u2014 content / docs / reports.",
+    swatch: "#9a3412",
+    font: "Fraunces",
+    tokens: createTimbalTheme({
+      brand: "#9a3412",
+      radius: 0.25,
+      shadow: "hairline",
+      typography: { sans: STACK.fraunces, importUrl: FONT_URL.fraunces }
+    })
+  },
+  {
+    id: "carbon",
+    label: "Carbon",
+    description: "Terminal monospace (JetBrains Mono), crisp corners, green accent \u2014 developer / infra tools.",
+    swatch: "#15803d",
+    font: "JetBrains Mono",
+    tokens: createTimbalTheme({
+      brand: "#15803d",
+      radius: 0.375,
+      shadow: "hairline",
+      typography: { sans: STACK.jetbrains, importUrl: FONT_URL.jetbrains }
+    })
   }
 ];
 var PRESET_BY_ID = new Map(
@@ -7082,18 +7894,29 @@ The package ships a complete light + dark token system (\`styles.css\`). Compone
 
 **Never write \`oklch(...)\` / hex literals or hand-author paired \`:root\` + \`.dark\` blocks.** Express intent and let the package derive a complete, contrast-correct, paired palette.
 
-### Pick a brand color (rebrand)
+### Generate a full personality (color + roundness + fonts + shadows)
 
 \`\`\`ts
 import { createTimbalTheme, themeToCss } from "@timbal-ai/timbal-react";
 
-const theme = createTimbalTheme({ brand: "#4f46e5" /* accent?, radius?, tintNeutrals? */ });
-// Build-time: write once into your app CSS (paired light + dark, guaranteed in sync):
-const css = themeToCss(theme);
+const theme = createTimbalTheme({
+  brand: "#4f46e5",
+  radius: 0.875,          // corner roundness in rem (sets --radius + --radius-2xl)
+  shadow: "soft",         // "none" | "hairline" | "soft" | "medium" | "strong"
+  tintNeutrals: false,    // tint background/border toward the brand hue
+  accent: "#10b981",      // optional secondary accent
+  typography: {           // optional \u2014 re-skins every component's font
+    sans: '"Geist", ui-sans-serif, system-ui, sans-serif',
+    importUrl: "https://fonts.googleapis.com/css2?family=Geist:wght@400..600&display=swap",
+    // display?, mono? also supported
+  },
+});
+const css = themeToCss(theme); // paired light + dark, guaranteed in sync
 \`\`\`
 
-- For a real company, look up the actual brand hex first (brandfetch / "<company> brand color hex"), then pass it as \`brand\`.
-- \`createTimbalTheme\` derives \`--primary\`, its foreground, ring, the full button gradient, and a soft playground tint. You only supply intent.
+- \`createTimbalTheme\` derives \`--primary\`, its foreground, ring, the full button gradient, and a soft playground tint from \`brand\`. \`radius\` sets roundness, \`shadow\` sets card depth, \`typography\` sets fonts. You only supply intent \u2014 never raw OKLCH.
+- For a real company, look up the actual brand hex first (brandfetch / "<company> brand color hex").
+- **Web fonts must be loaded.** \`applyTimbalTheme\` / \`TimbalThemeStyle\` inject the \`<link>\` for \`typography.importUrl\` automatically. For build-time \`themeToCss\`, add the \`<link rel="stylesheet" href="\u2026">\` to your \`index.html\` yourself (or pass \`themeToCss(theme, { includeFontImport: true })\` when the result is a standalone stylesheet).
 
 ### Apply a theme
 
@@ -7110,14 +7933,18 @@ import { TIMBAL_THEME_PRESETS, applyThemePreset } from "@timbal-ai/timbal-react"
 // TIMBAL_THEME_PRESETS: { id, label, description, swatch, tokens }[]
 \`\`\`
 
-| Preset id | Use when |
-|-----------|----------|
-| \`platform\` | Neutral monochrome default (no brand) |
-| \`indigo\` | Cool, trustworthy \u2014 analytics / ops dashboards |
-| \`violet\` | Expressive purple \u2014 product / marketing |
-| \`forest\` | Green \u2014 finance, sustainability, positive status |
-| \`warm\` | Orange \u2014 consumer / creative / high-engagement |
-| \`slate\` | Muted enterprise gray-blue (tinted neutrals) |
+Each preset is a **full personality** (color + radius + shadows + font), not just a color:
+
+| Preset id | Personality |
+|-----------|-------------|
+| \`platform\` | Neutral monochrome, system font (the default \u2014 no brand) |
+| \`indigo\` | Blue-violet, Geist, generous radius, soft shadows \u2014 analytics / ops |
+| \`violet\` | Purple, Sora, rounded \u2014 product / marketing |
+| \`forest\` | Green, Lexend, compact \u2014 finance / sustainability |
+| \`warm\` | Orange, Lexend, friendly \u2014 consumer / creative |
+| \`slate\` | Enterprise gray-blue, Inter, tight radius, hairline shadows |
+| \`folio\` | Editorial serif (Fraunces), near-sharp corners \u2014 content / docs |
+| \`carbon\` | Terminal monospace (JetBrains Mono), green accent \u2014 dev / infra |
 
 - To present options visually, render \`<ThemePresetGallery value={id} onSelect={setId} />\` \u2014 each swatch previews real components (Button + metric tile) scoped via \`data-timbal-theme\`, so the live app doesn't change until the user picks.
 - On selection, call \`applyThemePreset(id)\` (persists to \`localStorage\` and restores on reload).
@@ -7141,14 +7968,17 @@ var TimbalThemeStyle = ({
   if (!tokens) return null;
   const css = themeToCss(tokens, scope ? { scope } : void 0);
   if (!css) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-    "style",
-    {
-      "data-timbal-theme-style": scope ?? "root",
-      nonce,
-      dangerouslySetInnerHTML: { __html: css }
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+    tokens.fontImportUrl ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("link", { rel: "stylesheet", href: tokens.fontImportUrl }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "style",
+      {
+        "data-timbal-theme-style": scope ?? "root",
+        nonce,
+        dangerouslySetInnerHTML: { __html: css }
+      }
+    )
+  ] });
 };
 
 // src/app/data/metrics-shared.tsx
@@ -7314,6 +8144,10 @@ var ThemePresetGallery = ({
                   selected ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "text-xs font-medium text-primary", children: "Selected" }) : null
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "text-xs leading-snug text-muted-foreground", children: preset.description }),
+                preset.font ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: [
+                  "Aa \xB7 ",
+                  preset.font
+                ] }) : null,
                 /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col gap-2 rounded-lg border border-border bg-background p-2", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button, { size: "xs", className: "pointer-events-none", children: "Primary" }),
@@ -7375,18 +8209,13 @@ var appFilterBarClass = cn(
   "flex flex-wrap items-center gap-2",
   studioTopbarPillHeightClass
 );
-var appSearchInputClass = cn(studioSearchChromeClass, "text-sm");
+var appSearchInputClass = controlClass({}, "inline-flex items-center gap-2");
 var appBreadcrumbsClass = "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground";
 var appBreadcrumbLinkClass = "transition-colors hover:text-foreground";
 var appFieldClass = "flex flex-col gap-1.5";
 var appFieldLabelClass = "text-sm font-medium text-foreground";
 var appFieldHintClass = "text-xs text-muted-foreground";
-var appInputClass = cn(
-  studioSecondaryChromeClass,
-  "h-10 w-full rounded-lg px-3 text-sm text-foreground outline-none",
-  "placeholder:text-muted-foreground/70",
-  "focus-visible:ring-2 focus-visible:ring-foreground/10"
-);
+var appInputClass = controlClass({}, "w-full");
 var appEmptyStateClass = cn(
   appSurfaceCardClass,
   "flex flex-col items-center justify-center gap-2 py-12 text-center"
@@ -9433,7 +10262,8 @@ function DropdownMenuContent({
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[80] max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-lg border border-border p-1 shadow-card",
+        overlayListPanelClass,
+        "max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-x-hidden overflow-y-auto p-1",
         className
       ),
       ...props
@@ -9453,7 +10283,8 @@ function DropdownMenuItem({
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "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 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        overlayItemClass,
+        "data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10",
         className
       ),
       ...props
@@ -9470,10 +10301,7 @@ function DropdownMenuCheckboxItem({
     import_radix_ui5.DropdownMenu.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
-      className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 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",
-        className
-      ),
+      className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
       checked,
       ...props,
       children: [
@@ -9503,10 +10331,7 @@ function DropdownMenuRadioItem({
     import_radix_ui5.DropdownMenu.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
-      className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 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",
-        className
-      ),
+      className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_radix_ui5.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_lucide_react20.CircleIcon, { className: "size-2 fill-current" }) }) }),
@@ -9579,7 +10404,8 @@ function DropdownMenuSubTrigger({
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "flex cursor-default items-center rounded-md px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[inset]:pl-8",
+        overlayItemClass,
+        "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[inset]:pl-8",
         className
       ),
       ...props,
@@ -9599,7 +10425,8 @@ function DropdownMenuSubContent({
     {
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
-        "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[80] min-w-[8rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-hidden rounded-lg border border-border p-1 shadow-card",
+        overlayListPanelClass,
+        "min-w-[8rem] origin-[var(--radix-dropdown-menu-content-transform-origin)] overflow-hidden p-1",
         className
       ),
       ...props
@@ -9629,16 +10456,24 @@ function PopoverContent({
   className,
   align = "center",
   sideOffset = 4,
+  variant = "default",
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_radix_ui6.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     import_radix_ui6.Popover.Content,
     {
       "data-slot": "popover-content",
+      "data-variant": variant,
       align,
       sideOffset,
       className: cn(
-        "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[80] w-72 origin-[var(--radix-popover-content-transform-origin)] rounded-xl border border-border p-4 shadow-card outline-hidden",
+        variant === "list" ? cn(
+          overlayListPanelClass,
+          "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"
+        ),
         className
       ),
       ...props
@@ -9677,7 +10512,8 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size,
       className: cn(
-        "flex w-fit items-center justify-between gap-2 rounded-lg border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *: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",
+        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,
@@ -9699,7 +10535,8 @@ function SelectContent({
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-[80] max-h-[var(--radix-select-content-available-height)] min-w-[8rem] origin-[var(--radix-select-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-lg border border-border shadow-card",
+        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
       ),
@@ -9745,7 +10582,8 @@ function SelectItem({
     {
       "data-slot": "select-item",
       className: cn(
-        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        overlayItemClass,
+        "w-full py-1.5 pr-8 pl-2 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       ),
       ...props,
@@ -9797,12 +10635,2873 @@ function SelectScrollDownButton({
     }
   );
 }
+
+// src/ui/input.tsx
+var import_jsx_runtime98 = require("react/jsx-runtime");
+function Input({
+  className,
+  type,
+  controlSize,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        controlClass({ size: controlSize }),
+        "w-full file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/textarea.tsx
+var import_jsx_runtime99 = require("react/jsx-runtime");
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        controlSurfaceClass,
+        "min-h-16 w-full resize-y rounded-lg px-3 py-2 leading-relaxed",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/label.tsx
+var import_radix_ui8 = require("radix-ui");
+var import_jsx_runtime100 = require("react/jsx-runtime");
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+    import_radix_ui8.Label.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex select-none items-center gap-2 text-sm font-medium text-foreground",
+        "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/checkbox.tsx
+var import_radix_ui9 = require("radix-ui");
+var import_lucide_react22 = require("lucide-react");
+var import_jsx_runtime101 = require("react/jsx-runtime");
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+    import_radix_ui9.Checkbox.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer size-4 shrink-0 rounded-[4px] border border-border bg-gradient-to-b from-elevated-from to-elevated-to shadow-card outline-none transition-[box-shadow,background-color,border-color]",
+        "focus-visible:ring-2 focus-visible:ring-foreground/10 disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:border-foreground/15 data-[state=checked]:from-primary-fill-from data-[state=checked]:to-primary-fill-to data-[state=checked]:text-primary-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+        import_radix_ui9.Checkbox.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "flex items-center justify-center text-current transition-none",
+          children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(import_lucide_react22.CheckIcon, { className: "size-3.5" })
+        }
+      )
+    }
+  );
+}
+
+// src/ui/switch.tsx
+var import_radix_ui10 = require("radix-ui");
+var import_jsx_runtime102 = require("react/jsx-runtime");
+function Switch({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+    import_radix_ui10.Switch.Root,
+    {
+      "data-slot": "switch",
+      className: cn(
+        "peer inline-flex h-5 w-9 shrink-0 items-center rounded-full outline-none transition-[background,box-shadow,border-color] duration-200",
+        TIMBAL_V2_SWITCH_TRACK_OFF,
+        "focus-visible:ring-2 focus-visible:ring-foreground/10 disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:border-foreground/15 data-[state=checked]:from-primary-fill-from data-[state=checked]:to-primary-fill-to data-[state=checked]:shadow-card",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+        import_radix_ui10.Switch.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: cn(
+            TIMBAL_V2_SWITCH_THUMB,
+            "pointer-events-none block size-4 translate-x-0.5 rounded-full transition-transform data-[state=checked]:translate-x-4"
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/ui/radio-group.tsx
+var import_radix_ui11 = require("radix-ui");
+var import_lucide_react23 = require("lucide-react");
+var import_jsx_runtime103 = require("react/jsx-runtime");
+function RadioGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+    import_radix_ui11.RadioGroup.Root,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid gap-2.5", className),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+    import_radix_ui11.RadioGroup.Item,
+    {
+      "data-slot": "radio-group-item",
+      className: cn(
+        "aspect-square size-4 shrink-0 rounded-full border border-border bg-gradient-to-b from-elevated-from to-elevated-to shadow-card outline-none transition-[box-shadow,border-color]",
+        "focus-visible:ring-2 focus-visible:ring-foreground/10 disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:border-foreground/30",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+        import_radix_ui11.RadioGroup.Indicator,
+        {
+          "data-slot": "radio-group-indicator",
+          className: "flex items-center justify-center",
+          children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_lucide_react23.CircleIcon, { className: "size-2 fill-foreground text-foreground" })
+        }
+      )
+    }
+  );
+}
+
+// src/ui/form.tsx
+var import_radix_ui12 = require("radix-ui");
+var import_jsx_runtime104 = require("react/jsx-runtime");
+function Form({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_radix_ui12.Form.Root, { "data-slot": "form", ...props });
+}
+function FormField({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_radix_ui12.Form.Field, { "data-slot": "form-field", ...props });
+}
+function FormItem({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+    "div",
+    {
+      "data-slot": "form-item",
+      className: cn("grid gap-1.5", className),
+      ...props
+    }
+  );
+}
+function FormLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_radix_ui12.Form.Label, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Label, { "data-slot": "form-label", className, ...props }) });
+}
+function FormControl({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_radix_ui12.Form.Control, { "data-slot": "form-control", ...props });
+}
+function FormMessage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+    import_radix_ui12.Form.Message,
+    {
+      "data-slot": "form-message",
+      className: cn("text-xs text-destructive", className),
+      ...props
+    }
+  );
+}
+function FormSubmit({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+    import_radix_ui12.Form.Submit,
+    {
+      "data-slot": "form-submit",
+      className,
+      ...props
+    }
+  );
+}
+
+// src/ui/aspect-ratio.tsx
+var import_radix_ui13 = require("radix-ui");
+var import_jsx_runtime105 = require("react/jsx-runtime");
+function AspectRatio({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_radix_ui13.AspectRatio.Root, { "data-slot": "aspect-ratio", ...props });
+}
+
+// src/ui/breadcrumb.tsx
+var import_lucide_react24 = require("lucide-react");
+var import_radix_ui14 = require("radix-ui");
+var import_jsx_runtime106 = require("react/jsx-runtime");
+function Breadcrumb({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("nav", { "data-slot": "breadcrumb", "aria-label": "Breadcrumb", ...props });
+}
+function BreadcrumbList({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: cn(
+        "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbItem({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: cn("inline-flex items-center gap-1.5", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbLink({
+  className,
+  asChild,
+  ...props
+}) {
+  const Comp = asChild ? import_radix_ui14.Slot.Root : "a";
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    Comp,
+    {
+      "data-slot": "breadcrumb-link",
+      className: cn("transition-colors hover:text-foreground", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbPage({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("font-normal text-foreground", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("[&>svg]:size-3.5", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react24.ChevronRightIcon, {})
+    }
+  );
+}
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("flex size-9 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_lucide_react24.MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
+
+// src/ui/pagination.tsx
+var import_lucide_react25 = require("lucide-react");
+var import_jsx_runtime107 = require("react/jsx-runtime");
+function Pagination({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+    "nav",
+    {
+      "data-slot": "pagination",
+      role: "navigation",
+      "aria-label": "pagination",
+      className: cn("mx-auto flex w-full justify-center", className),
+      ...props
+    }
+  );
+}
+function PaginationContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+    "ul",
+    {
+      "data-slot": "pagination-content",
+      className: cn("flex flex-row items-center gap-1", className),
+      ...props
+    }
+  );
+}
+function PaginationItem({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Button, { asChild: true, variant: isActive ? "outline" : "ghost", size, className, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+    "a",
+    {
+      "data-slot": "pagination-link",
+      "aria-current": isActive ? "page" : void 0,
+      ...props
+    }
+  ) });
+}
+function PaginationPrevious({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+    PaginationLink,
+    {
+      "aria-label": "Go to previous page",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pl-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react25.ChevronLeftIcon, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "hidden sm:block", children: "Previous" })
+      ]
+    }
+  );
+}
+function PaginationNext({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+    PaginationLink,
+    {
+      "aria-label": "Go to next page",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pr-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react25.ChevronRightIcon, { className: "size-4" })
+      ]
+    }
+  );
+}
+function PaginationEllipsis({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
+    "span",
+    {
+      "data-slot": "pagination-ellipsis",
+      "aria-hidden": true,
+      className: cn("flex size-9 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react25.MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "sr-only", children: "More pages" })
+      ]
+    }
+  );
+}
+
+// src/ui/toolbar.tsx
+var import_radix_ui15 = require("radix-ui");
+var import_jsx_runtime108 = require("react/jsx-runtime");
+function Toolbar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+    import_radix_ui15.Toolbar.Root,
+    {
+      "data-slot": "toolbar",
+      className: cn(
+        "flex 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
+    }
+  );
+}
+function ToolbarButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+    import_radix_ui15.Toolbar.Button,
+    {
+      "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",
+        "hover:bg-muted focus-visible:ring-2 focus-visible:ring-foreground/10 disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ToolbarSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+    import_radix_ui15.Toolbar.Separator,
+    {
+      "data-slot": "toolbar-separator",
+      className: cn("mx-1 h-6 w-px bg-border", className),
+      ...props
+    }
+  );
+}
+function ToolbarToggleGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+    import_radix_ui15.Toolbar.ToggleGroup,
+    {
+      "data-slot": "toolbar-toggle-group",
+      className: cn("flex items-center gap-0.5", className),
+      ...props
+    }
+  );
+}
+function ToolbarToggleItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+    import_radix_ui15.Toolbar.ToggleItem,
+    {
+      "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",
+        "hover:bg-muted focus-visible:ring-2 focus-visible:ring-foreground/10",
+        "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ToolbarLink({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+    import_radix_ui15.Toolbar.Link,
+    {
+      "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/menubar.tsx
+var import_radix_ui16 = require("radix-ui");
+var import_lucide_react26 = require("lucide-react");
+var import_jsx_runtime109 = require("react/jsx-runtime");
+function Menubar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    import_radix_ui16.Menubar.Root,
+    {
+      "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MenubarMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_radix_ui16.Menubar.Menu, { "data-slot": "menubar-menu", ...props });
+}
+function MenubarTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    import_radix_ui16.Menubar.Trigger,
+    {
+      "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",
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_radix_ui16.Menubar.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    import_radix_ui16.Menubar.Content,
+    {
+      "data-slot": "menubar-content",
+      align,
+      alignOffset,
+      sideOffset,
+      className: cn(
+        overlaySurfaceClass,
+        "min-w-[12rem] origin-[var(--radix-menubar-content-transform-origin)] overflow-hidden rounded-lg p-1",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    import_radix_ui16.Menubar.Item,
+    {
+      "data-slot": "menubar-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        overlayItemClass,
+        "data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+    import_radix_ui16.Menubar.CheckboxItem,
+    {
+      "data-slot": "menubar-checkbox-item",
+      className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_radix_ui16.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react26.CheckIcon, { className: "size-4" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function MenubarRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_radix_ui16.Menubar.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
+}
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+    import_radix_ui16.Menubar.RadioItem,
+    {
+      "data-slot": "menubar-radio-item",
+      className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_radix_ui16.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react26.CircleIcon, { className: "size-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    import_radix_ui16.Menubar.Label,
+    {
+      "data-slot": "menubar-label",
+      "data-inset": inset,
+      className: cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground data-[inset]:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MenubarSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    import_radix_ui16.Menubar.Separator,
+    {
+      "data-slot": "menubar-separator",
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function MenubarShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    "span",
+    {
+      "data-slot": "menubar-shortcut",
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MenubarSub({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_radix_ui16.Menubar.Sub, { "data-slot": "menubar-sub", ...props });
+}
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+    import_radix_ui16.Menubar.SubTrigger,
+    {
+      "data-slot": "menubar-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        overlayItemClass,
+        "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[inset]:pl-8",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_lucide_react26.ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    }
+  );
+}
+function MenubarSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    import_radix_ui16.Menubar.SubContent,
+    {
+      "data-slot": "menubar-sub-content",
+      className: cn(
+        overlaySurfaceClass,
+        "min-w-[8rem] origin-[var(--radix-menubar-content-transform-origin)] overflow-hidden rounded-lg p-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/navigation-menu.tsx
+var import_radix_ui17 = require("radix-ui");
+var import_lucide_react27 = require("lucide-react");
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime110 = require("react/jsx-runtime");
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+    import_radix_ui17.NavigationMenu.Root,
+    {
+      "data-slot": "navigation-menu",
+      "data-viewport": viewport,
+      className: cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        viewport ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(NavigationMenuViewport, {}) : null
+      ]
+    }
+  );
+}
+function NavigationMenuList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    import_radix_ui17.NavigationMenu.List,
+    {
+      "data-slot": "navigation-menu-list",
+      className: cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function NavigationMenuItem({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_radix_ui17.NavigationMenu.Item, { "data-slot": "navigation-menu-item", ...props });
+}
+var navigationMenuTriggerStyle = (0, import_class_variance_authority2.cva)(
+  "group inline-flex h-9 w-max items-center justify-center rounded-lg bg-transparent px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-muted/80 data-[state=open]:text-foreground"
+);
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+    import_radix_ui17.NavigationMenu.Trigger,
+    {
+      "data-slot": "navigation-menu-trigger",
+      className: cn(navigationMenuTriggerStyle(), "group", className),
+      ...props,
+      children: [
+        children,
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+          import_lucide_react27.ChevronDownIcon,
+          {
+            className: "relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function NavigationMenuContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    import_radix_ui17.NavigationMenu.Content,
+    {
+      "data-slot": "navigation-menu-content",
+      className: cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:border-border group-data-[viewport=false]/navigation-menu:shadow-card",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function NavigationMenuViewport({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: cn("absolute top-full left-0 isolate z-[80] flex justify-center"), children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    import_radix_ui17.NavigationMenu.Viewport,
+    {
+      "data-slot": "navigation-menu-viewport",
+      className: cn(
+        overlaySurfaceClass,
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-lg md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function NavigationMenuLink({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    import_radix_ui17.NavigationMenu.Link,
+    {
+      "data-slot": "navigation-menu-link",
+      className: cn(
+        "flex flex-col gap-1 rounded-md p-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function NavigationMenuIndicator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    import_radix_ui17.NavigationMenu.Indicator,
+    {
+      "data-slot": "navigation-menu-indicator",
+      className: cn(
+        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+    }
+  );
+}
+
+// src/ui/command.tsx
+var import_cmdk = require("cmdk");
+var import_lucide_react28 = require("lucide-react");
+var import_jsx_runtime111 = require("react/jsx-runtime");
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+    import_cmdk.Command,
+    {
+      "data-slot": "command",
+      className: cn(
+        "flex h-full w-full flex-col overflow-hidden bg-popover text-popover-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandDialog({
+  title = "Command palette",
+  description = "Search for a command to run\u2026",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(Dialog, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(DialogTitle, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+      DialogContent,
+      {
+        className: cn("overflow-hidden p-0", className),
+        showCloseButton,
+        children: /* @__PURE__ */ (0, import_jsx_runtime111.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 })
+      }
+    )
+  ] });
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
+    "div",
+    {
+      "data-slot": "command-input-wrapper",
+      className: "flex h-10 items-center gap-2 border-b border-border px-3",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_lucide_react28.SearchIcon, { className: "size-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+          import_cmdk.Command.Input,
+          {
+            "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",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
+    }
+  );
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+    import_cmdk.Command.List,
+    {
+      "data-slot": "command-list",
+      className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+    import_cmdk.Command.Empty,
+    {
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm text-muted-foreground",
+      ...props
+    }
+  );
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+    import_cmdk.Command.Group,
+    {
+      "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+    import_cmdk.Command.Separator,
+    {
+      "data-slot": "command-separator",
+      className: cn("-mx-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+    import_cmdk.Command.Item,
+    {
+      "data-slot": "command-item",
+      className: cn(
+        overlayItemClass,
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+    "span",
+    {
+      "data-slot": "command-shortcut",
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/calendar.tsx
+var React3 = __toESM(require("react"), 1);
+var import_lucide_react29 = require("lucide-react");
+var import_react_day_picker = require("react-day-picker");
+var import_jsx_runtime112 = require("react/jsx-runtime");
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+    import_react_day_picker.DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col gap-4 sm:flex-row sm:gap-4",
+        month: "flex flex-col gap-4",
+        month_caption: "relative flex items-center justify-center pt-1",
+        caption_label: "text-sm font-medium",
+        nav: "flex items-center gap-1",
+        button_previous: cn(
+          buttonVariants({ variant: "outline" }),
+          "absolute left-1 size-7 bg-transparent p-0 opacity-70 hover:opacity-100"
+        ),
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "absolute right-1 size-7 bg-transparent p-0 opacity-70 hover:opacity-100"
+        ),
+        month_grid: "w-full border-collapse",
+        weekdays: "flex",
+        weekday: "w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground",
+        week: "mt-2 flex w-full",
+        day: cn(
+          "relative size-9 p-0 text-center text-sm",
+          "[&:has([aria-selected].day-range-end)]:rounded-r-md",
+          "[&:has([aria-selected].day-outside)]:bg-accent/50",
+          "[&:has([aria-selected])]:bg-accent",
+          "first:[&:has([aria-selected])]:rounded-l-md",
+          "last:[&:has([aria-selected])]:rounded-r-md",
+          "focus-within:relative focus-within:z-10"
+        ),
+        day_button: cn(
+          buttonVariants({ variant: "ghost" }),
+          "size-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        range_start: "day-range-start rounded-l-md",
+        range_middle: "day-range-middle aria-selected:bg-accent",
+        range_end: "day-range-end rounded-r-md",
+        selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        today: "bg-accent text-accent-foreground",
+        outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        disabled: "text-muted-foreground opacity-50",
+        hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        Chevron: ({ orientation, className: className2, ...chevronProps }) => {
+          const Icon = orientation === "left" ? import_lucide_react29.ChevronLeftIcon : import_lucide_react29.ChevronRightIcon;
+          return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Icon, { className: cn("size-4", className2), ...chevronProps });
+        },
+        DayButton: CalendarDayButton
+      },
+      ...props
+    }
+  );
+}
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}) {
+  const ref = React3.useRef(null);
+  React3.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      "data-day": day.date.toLocaleDateString(),
+      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+      "data-range-start": modifiers.range_start,
+      "data-range-end": modifiers.range_end,
+      "data-range-middle": modifiers.range_middle,
+      className: cn(
+        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors",
+        "hover:bg-accent hover:text-accent-foreground",
+        "focus-visible:ring-2 focus-visible:ring-foreground/10 focus-visible:outline-none",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground",
+        "data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground",
+        "data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground",
+        "data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/combobox.tsx
+var import_lucide_react30 = require("lucide-react");
+var import_jsx_runtime113 = require("react/jsx-runtime");
+function Combobox({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(Popover, { "data-slot": "combobox", ...props });
+}
+function ComboboxTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+    PopoverTrigger,
+    {
+      "data-slot": "combobox-trigger",
+      className: cn(
+        controlClass({ size }),
+        "flex w-full items-center justify-between gap-2 whitespace-nowrap font-normal",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: "truncate", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(import_lucide_react30.ChevronDownIcon, { className: "size-4 shrink-0 opacity-50" })
+      ]
+    }
+  );
+}
+function ComboboxAnchor({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(PopoverAnchor, { "data-slot": "combobox-anchor", ...props });
+}
+function ComboboxContent({
+  className,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+    PopoverContent,
+    {
+      "data-slot": "combobox-content",
+      variant: "list",
+      align,
+      className: cn(
+        "w-[var(--radix-popover-trigger-width)] min-w-[8rem] p-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ComboboxCommand({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+    Command,
+    {
+      "data-slot": "combobox-command",
+      className,
+      ...props
+    }
+  );
+}
+function ComboboxInput({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(CommandInput, { "data-slot": "combobox-input", ...props });
+}
+function ComboboxList({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(CommandList, { "data-slot": "combobox-list", ...props });
+}
+function ComboboxEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(CommandEmpty, { "data-slot": "combobox-empty", ...props });
+}
+function ComboboxGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(CommandGroup, { "data-slot": "combobox-group", ...props });
+}
+function ComboboxItem({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(CommandItem, { "data-slot": "combobox-item", ...props });
+}
+function ComboboxSeparator({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(CommandSeparator, { "data-slot": "combobox-separator", ...props });
+}
+function ComboboxShortcut({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(CommandShortcut, { "data-slot": "combobox-shortcut", ...props });
+}
+
+// src/ui/date-picker.tsx
+var import_lucide_react31 = require("lucide-react");
+var import_jsx_runtime114 = require("react/jsx-runtime");
+function DatePicker({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Popover, { "data-slot": "date-picker", ...props });
+}
+function DatePickerTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(PopoverTrigger, { "data-slot": "date-picker-trigger", ...props });
+}
+function DatePickerContent({
+  className,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+    PopoverContent,
+    {
+      "data-slot": "date-picker-content",
+      align,
+      className: cn("w-auto p-0", className),
+      ...props
+    }
+  );
+}
+function DatePickerCalendar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+    Calendar,
+    {
+      "data-slot": "date-picker-calendar",
+      className: cn("rounded-lg border-0", className),
+      ...props
+    }
+  );
+}
+function formatPickerDate(date) {
+  return date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function DatePickerButton({
+  date,
+  placeholder = "Pick a date",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
+    "button",
+    {
+      type: "button",
+      "data-slot": "date-picker-button",
+      className: cn(
+        controlClass(),
+        "flex w-full items-center justify-start gap-2 text-left font-normal",
+        !date && "text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_lucide_react31.CalendarIcon, { className: "size-4 shrink-0 opacity-70" }),
+        date ? formatPickerDate(date) : placeholder
+      ]
+    }
+  );
+}
+
+// src/ui/input-otp.tsx
+var import_lucide_react32 = require("lucide-react");
+var import_radix_ui18 = require("radix-ui");
+var import_jsx_runtime115 = require("react/jsx-runtime");
+function InputOTP({
+  className,
+  containerClassName,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+    import_radix_ui18.unstable_OneTimePasswordField.Root,
+    {
+      "data-slot": "input-otp",
+      className: cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName,
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function InputOTPGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+    "div",
+    {
+      "data-slot": "input-otp-group",
+      className: cn("flex items-center", className),
+      ...props
+    }
+  );
+}
+function InputOTPSlot({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+    import_radix_ui18.unstable_OneTimePasswordField.Input,
+    {
+      "data-slot": "input-otp-slot",
+      className: cn(
+        controlSurfaceClass,
+        "relative size-9 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
+      ),
+      ...props
+    }
+  );
+}
+function InputOTPHiddenInput({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_radix_ui18.unstable_OneTimePasswordField.HiddenInput, { "data-slot": "input-otp-hidden-input", ...props });
+}
+function InputOTPSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+    "div",
+    {
+      role: "separator",
+      "data-slot": "input-otp-separator",
+      "aria-hidden": true,
+      className: cn("text-muted-foreground", className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_lucide_react32.MinusIcon, { className: "size-4" })
+    }
+  );
+}
+
+// src/ui/kbd.tsx
+var import_jsx_runtime116 = require("react/jsx-runtime");
+function Kbd({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+    "kbd",
+    {
+      "data-slot": "kbd",
+      className: cn(
+        "pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[0.625rem] font-medium text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function KbdGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+    "div",
+    {
+      "data-slot": "kbd-group",
+      className: cn("inline-flex items-center gap-1", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/spinner.tsx
+var import_jsx_runtime117 = require("react/jsx-runtime");
+function Spinner({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+    "svg",
+    {
+      "data-slot": "spinner",
+      role: "status",
+      "aria-label": "Loading",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      className: cn("size-4 animate-spin text-muted-foreground", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "3"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/ui/input-group.tsx
+var import_jsx_runtime118 = require("react/jsx-runtime");
+function InputGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+    "div",
+    {
+      "data-slot": "input-group",
+      className: cn(
+        controlClass(),
+        "flex w-full items-stretch overflow-hidden p-0",
+        "has-[[data-slot=input-group-control]:disabled]:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+    "div",
+    {
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(
+        "flex shrink-0 items-center bg-transparent px-3 text-sm text-muted-foreground",
+        align === "inline-start" && "border-r border-border",
+        align === "inline-end" && "border-l border-border",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+    "input",
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "min-w-0 flex-1 border-0 bg-transparent px-3 py-2 text-sm text-foreground shadow-none outline-none",
+        "placeholder:text-muted-foreground/70 focus-visible:ring-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupText({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+    "span",
+    {
+      "data-slot": "input-group-text",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/accordion.tsx
+var import_radix_ui19 = require("radix-ui");
+var import_lucide_react33 = require("lucide-react");
+var import_jsx_runtime119 = require("react/jsx-runtime");
+function Accordion({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_radix_ui19.Accordion.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    import_radix_ui19.Accordion.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b border-border last:border-b-0", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_radix_ui19.Accordion.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
+    import_radix_ui19.Accordion.Trigger,
+    {
+      "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",
+        "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
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_lucide_react33.ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" })
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    import_radix_ui19.Accordion.Content,
+    {
+      "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_runtime119.jsx)("div", { className: cn("pt-0 pb-4", className), children })
+    }
+  );
+}
+
+// src/ui/separator.tsx
+var import_radix_ui20 = require("radix-ui");
+var import_jsx_runtime120 = require("react/jsx-runtime");
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+    import_radix_ui20.Separator.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/slider.tsx
+var React4 = __toESM(require("react"), 1);
+var import_radix_ui21 = require("radix-ui");
+var import_jsx_runtime121 = require("react/jsx-runtime");
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const thumbs = React4.useMemo(() => {
+    if (Array.isArray(value)) return value;
+    if (Array.isArray(defaultValue)) return defaultValue;
+    return [min];
+  }, [value, defaultValue, min]);
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
+    import_radix_ui21.Slider.Root,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50",
+        "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+          import_radix_ui21.Slider.Track,
+          {
+            "data-slot": "slider-track",
+            className: "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+            children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+              import_radix_ui21.Slider.Range,
+              {
+                "data-slot": "slider-range",
+                className: "absolute bg-gradient-to-b from-primary-fill-from to-primary-fill-to data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+              }
+            )
+          }
+        ),
+        Array.from({ length: thumbs.length }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+          import_radix_ui21.Slider.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "block size-4 shrink-0 rounded-full border border-border bg-gradient-to-b from-elevated-from to-elevated-to shadow-card outline-none transition-[box-shadow] focus-visible:ring-2 focus-visible:ring-foreground/10 disabled:pointer-events-none disabled:opacity-50"
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+
+// src/ui/progress.tsx
+var import_radix_ui22 = require("radix-ui");
+var import_jsx_runtime122 = require("react/jsx-runtime");
+function Progress({
+  className,
+  value,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+    import_radix_ui22.Progress.Root,
+    {
+      "data-slot": "progress",
+      className: cn(
+        "relative h-2 w-full overflow-hidden rounded-full bg-muted",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+        import_radix_ui22.Progress.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: "h-full w-full flex-1 bg-gradient-to-b from-primary-fill-from to-primary-fill-to transition-transform",
+          style: { transform: `translateX(-${100 - (value ?? 0)}%)` }
+        }
+      )
+    }
+  );
+}
+
+// src/ui/badge.tsx
+var import_radix_ui23 = require("radix-ui");
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime123 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority3.cva)(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-gradient-to-b from-primary-fill-from to-primary-fill-to text-primary-foreground",
+        secondary: "border-border bg-gradient-to-b from-elevated-from to-elevated-to text-foreground shadow-card",
+        destructive: "border-destructive/45 bg-destructive/10 text-destructive",
+        outline: "border-border text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_radix_ui23.Slot.Root : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+// src/ui/sheet.tsx
+var import_lucide_react34 = require("lucide-react");
+var import_radix_ui24 = require("radix-ui");
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_jsx_runtime124 = require("react/jsx-runtime");
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_radix_ui24.Dialog.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_radix_ui24.Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_radix_ui24.Dialog.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_radix_ui24.Dialog.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    import_radix_ui24.Dialog.Overlay,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[70] bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var sheetContentVariants = (0, import_class_variance_authority4.cva)(
+  cn(
+    TIMBAL_V2_MODAL_SURFACE,
+    "data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-[70] flex flex-col gap-4 shadow-card-elevated transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500"
+  ),
+  {
+    variants: {
+      side: {
+        top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b p-6",
+        bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t p-6",
+        left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r p-6 sm:max-w-sm",
+        right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l p-6 sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(SheetPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(SheetOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+      import_radix_ui24.Dialog.Content,
+      {
+        "data-slot": "sheet-content",
+        className: cn(sheetContentVariants({ side }), className),
+        ...props,
+        children: [
+          children,
+          showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_radix_ui24.Dialog.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 transition-[opacity,background-color] hover:bg-ghost-fill-hover hover:opacity-100 focus:ring-2 focus:ring-foreground/10 focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_lucide_react34.XIcon, { className: "size-4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { className: "sr-only", children: "Close" })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-0", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    import_radix_ui24.Dialog.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-lg font-semibold text-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    import_radix_ui24.Dialog.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/alert-dialog.tsx
+var import_radix_ui25 = require("radix-ui");
+var import_jsx_runtime125 = require("react/jsx-runtime");
+function AlertDialog({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_radix_ui25.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_radix_ui25.AlertDialog.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_radix_ui25.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    import_radix_ui25.AlertDialog.Overlay,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[70] bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(AlertDialogPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(AlertDialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+      import_radix_ui25.AlertDialog.Content,
+      {
+        "data-slot": "alert-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",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    import_radix_ui25.AlertDialog.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn("text-lg font-semibold", className),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    import_radix_ui25.AlertDialog.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Button, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    import_radix_ui25.AlertDialog.Action,
+    {
+      "data-slot": "alert-dialog-action",
+      className,
+      ...props
+    }
+  ) });
+}
+function AlertDialogCancel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Button, { asChild: true, variant: "outline", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    import_radix_ui25.AlertDialog.Cancel,
+    {
+      "data-slot": "alert-dialog-cancel",
+      className,
+      ...props
+    }
+  ) });
+}
+
+// src/ui/collapsible.tsx
+var import_radix_ui26 = require("radix-ui");
+var import_jsx_runtime126 = require("react/jsx-runtime");
+function Collapsible({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_radix_ui26.Collapsible.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_radix_ui26.Collapsible.Trigger, { "data-slot": "collapsible-trigger", ...props });
+}
+function CollapsibleContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+    import_radix_ui26.Collapsible.Content,
+    {
+      "data-slot": "collapsible-content",
+      className: cn(
+        "overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/scroll-area.tsx
+var import_radix_ui27 = require("radix-ui");
+var import_jsx_runtime127 = require("react/jsx-runtime");
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+    import_radix_ui27.ScrollArea.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+          import_radix_ui27.ScrollArea.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:ring-2 focus-visible:ring-foreground/10",
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(ScrollBar, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_radix_ui27.ScrollArea.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+    import_radix_ui27.ScrollArea.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+        import_radix_ui27.ScrollArea.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "relative flex-1 rounded-full bg-border"
+        }
+      )
+    }
+  );
+}
+
+// src/ui/toggle.tsx
+var import_radix_ui28 = require("radix-ui");
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime128 = require("react/jsx-runtime");
+var toggleVariants = (0, import_class_variance_authority5.cva)(
+  "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium whitespace-nowrap outline-none transition-[color,box-shadow,background-color,border-color] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: cn(
+          "border border-border bg-gradient-to-b from-elevated-from to-elevated-to shadow-card",
+          "hover:from-secondary-fill-hover-from hover:to-secondary-fill-hover-to",
+          "data-[state=on]:border-foreground/15 data-[state=on]:from-primary-fill-from data-[state=on]:to-primary-fill-to data-[state=on]:text-primary-foreground",
+          "focus-visible:ring-2 focus-visible:ring-foreground/10"
+        ),
+        outline: cn(
+          "border border-border bg-transparent",
+          "hover:bg-muted hover:text-foreground",
+          "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+          "focus-visible:ring-2 focus-visible:ring-foreground/10"
+        )
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    import_radix_ui28.Toggle.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/ui/toggle-group.tsx
+var import_radix_ui29 = require("radix-ui");
+var import_jsx_runtime129 = require("react/jsx-runtime");
+function ToggleGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    import_radix_ui29.ToggleGroup.Root,
+    {
+      "data-slot": "toggle-group",
+      className: cn("flex items-center gap-1", className),
+      ...props
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    import_radix_ui29.ToggleGroup.Item,
+    {
+      "data-slot": "toggle-group-item",
+      className: cn(toggleVariants({ variant: "default", size: "default" }), className),
+      ...props
+    }
+  );
+}
+
+// src/ui/hover-card.tsx
+var import_radix_ui30 = require("radix-ui");
+var import_jsx_runtime130 = require("react/jsx-runtime");
+function HoverCard({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_radix_ui30.HoverCard.Root, { "data-slot": "hover-card", ...props });
+}
+function HoverCardTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_radix_ui30.HoverCard.Trigger, { "data-slot": "hover-card-trigger", ...props });
+}
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_radix_ui30.HoverCard.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    import_radix_ui30.HoverCard.Content,
+    {
+      "data-slot": "hover-card-content",
+      align,
+      sideOffset,
+      className: cn(
+        overlaySurfaceClass,
+        "w-64 origin-[var(--radix-hover-card-content-transform-origin)] rounded-xl p-4 outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+// src/ui/context-menu.tsx
+var import_radix_ui31 = require("radix-ui");
+var import_lucide_react35 = require("lucide-react");
+var import_jsx_runtime131 = require("react/jsx-runtime");
+function ContextMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_radix_ui31.ContextMenu.Root, { "data-slot": "context-menu", ...props });
+}
+function ContextMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_radix_ui31.ContextMenu.Trigger, { "data-slot": "context-menu-trigger", ...props });
+}
+function ContextMenuGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_radix_ui31.ContextMenu.Group, { "data-slot": "context-menu-group", ...props });
+}
+function ContextMenuContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_radix_ui31.ContextMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    import_radix_ui31.ContextMenu.Content,
+    {
+      "data-slot": "context-menu-content",
+      className: cn(
+        overlaySurfaceClass,
+        "max-h-[var(--radix-context-menu-content-available-height)] min-w-[8rem] origin-[var(--radix-context-menu-content-transform-origin)] overflow-x-hidden overflow-y-auto rounded-lg p-1",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    import_radix_ui31.ContextMenu.Item,
+    {
+      "data-slot": "context-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        overlayItemClass,
+        "data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+    import_radix_ui31.ContextMenu.CheckboxItem,
+    {
+      "data-slot": "context-menu-checkbox-item",
+      className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_radix_ui31.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react35.CheckIcon, { className: "size-4" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function ContextMenuRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    import_radix_ui31.ContextMenu.RadioGroup,
+    {
+      "data-slot": "context-menu-radio-group",
+      ...props
+    }
+  );
+}
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+    import_radix_ui31.ContextMenu.RadioItem,
+    {
+      "data-slot": "context-menu-radio-item",
+      className: cn(overlayItemClass, "py-1.5 pr-2 pl-8", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_radix_ui31.ContextMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react35.CircleIcon, { className: "size-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  );
+}
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    import_radix_ui31.ContextMenu.Label,
+    {
+      "data-slot": "context-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground data-[inset]:pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ContextMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    import_radix_ui31.ContextMenu.Separator,
+    {
+      "data-slot": "context-menu-separator",
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function ContextMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    "span",
+    {
+      "data-slot": "context-menu-shortcut",
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ContextMenuSub({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_radix_ui31.ContextMenu.Sub, { "data-slot": "context-menu-sub", ...props });
+}
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+    import_radix_ui31.ContextMenu.SubTrigger,
+    {
+      "data-slot": "context-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        overlayItemClass,
+        "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[inset]:pl-8",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_lucide_react35.ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    }
+  );
+}
+function ContextMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+    import_radix_ui31.ContextMenu.SubContent,
+    {
+      "data-slot": "context-menu-sub-content",
+      className: cn(
+        overlaySurfaceClass,
+        "min-w-[8rem] origin-[var(--radix-context-menu-content-transform-origin)] overflow-hidden rounded-lg p-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/alert.tsx
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_jsx_runtime132 = require("react/jsx-runtime");
+var alertVariants = (0, import_class_variance_authority6.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",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-gradient-to-b from-elevated-from to-elevated-to text-foreground shadow-card",
+        destructive: "border-destructive/45 bg-destructive/10 text-destructive [&>svg]:text-destructive"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Alert({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn("font-medium tracking-tight", className),
+      ...props
+    }
+  );
+}
+function AlertDescription({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn("text-sm text-muted-foreground [&_p]:leading-relaxed", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/card.tsx
+var import_jsx_runtime133 = require("react/jsx-runtime");
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        TIMBAL_V2_ELEVATED_SURFACE,
+        "flex flex-col gap-4 rounded-xl py-4 text-card-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn("flex flex-col gap-1.5 px-4", className),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("text-base font-semibold leading-none", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { "data-slot": "card-content", className: cn("px-4", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-4", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/skeleton.tsx
+var import_jsx_runtime134 = require("react/jsx-runtime");
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("animate-pulse rounded-lg bg-muted", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/table.tsx
+var import_jsx_runtime135 = require("react/jsx-runtime");
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    "table",
+    {
+      "data-slot": "table",
+      className: cn("w-full caption-bottom text-sm", className),
+      ...props
+    }
+  ) });
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("[&_tr]:border-b [&_tr]:border-border", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: cn(
+        "border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "border-b border-border transition-colors hover:bg-muted/40 data-[state=selected]:bg-muted",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    "th",
+    {
+      "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-3 align-middle text-sm [&:has([role=checkbox])]:pr-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCaption({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: cn("mt-4 text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/toast.tsx
+var import_radix_ui32 = require("radix-ui");
+var import_lucide_react36 = require("lucide-react");
+var import_jsx_runtime136 = require("react/jsx-runtime");
+function ToastProvider({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_radix_ui32.Toast.Provider, { "data-slot": "toast-provider", ...props });
+}
+function ToastViewport({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+    import_radix_ui32.Toast.Viewport,
+    {
+      "data-slot": "toast-viewport",
+      className: cn(
+        "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:max-w-[420px] sm:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Toast({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+    import_radix_ui32.Toast.Root,
+    {
+      "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",
+        "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
+      ),
+      ...props
+    }
+  );
+}
+function ToastAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+    import_radix_ui32.Toast.Action,
+    {
+      "data-slot": "toast-action",
+      className: cn(
+        "inline-flex h-8 shrink-0 items-center justify-center rounded-lg border border-border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-muted focus:ring-2 focus:ring-foreground/10 focus:outline-hidden disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ToastClose({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+    import_radix_ui32.Toast.Close,
+    {
+      "data-slot": "toast-close",
+      className: cn(
+        "absolute top-3 right-3 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-foreground/10 focus:outline-hidden",
+        className
+      ),
+      "toast-close": "",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_lucide_react36.XIcon, { className: "size-4" })
+    }
+  );
+}
+function ToastTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+    import_radix_ui32.Toast.Title,
+    {
+      "data-slot": "toast-title",
+      className: cn("text-sm font-medium", className),
+      ...props
+    }
+  );
+}
+function ToastDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+    import_radix_ui32.Toast.Description,
+    {
+      "data-slot": "toast-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/use-toast.ts
+var React5 = __toESM(require("react"), 1);
+var TOAST_LIMIT = 3;
+var TOAST_REMOVE_DELAY = 5e3;
+var listeners = /* @__PURE__ */ new Set();
+var memoryState = {
+  toasts: [],
+  add: () => "",
+  dismiss: () => {
+  },
+  remove: () => {
+  }
+};
+function dispatch(partial) {
+  memoryState = { ...memoryState, ...partial };
+  for (const listener of listeners) listener(memoryState);
+}
+function genId() {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+var removeTimeouts = /* @__PURE__ */ new Map();
+function scheduleRemove(id, delay = TOAST_REMOVE_DELAY) {
+  if (removeTimeouts.has(id)) return;
+  const timeout = setTimeout(() => {
+    removeTimeouts.delete(id);
+    dispatch({
+      toasts: memoryState.toasts.filter((t) => t.id !== id)
+    });
+  }, delay);
+  removeTimeouts.set(id, timeout);
+}
+function addToast(toastInput) {
+  const id = genId();
+  dispatch({
+    toasts: [{ ...toastInput, id }, ...memoryState.toasts].slice(0, TOAST_LIMIT)
+  });
+  scheduleRemove(id, toastInput.duration ?? TOAST_REMOVE_DELAY);
+  return id;
+}
+function dismissToast(id) {
+  scheduleRemove(id, 300);
+}
+memoryState = {
+  toasts: [],
+  add: addToast,
+  dismiss: dismissToast,
+  remove: (id) => {
+    dispatch({ toasts: memoryState.toasts.filter((t) => t.id !== id) });
+  }
+};
+function toast(input) {
+  return memoryState.add(input);
+}
+function useToast() {
+  const [state, setState] = React5.useState(memoryState);
+  React5.useEffect(() => {
+    listeners.add(setState);
+    return () => {
+      listeners.delete(setState);
+    };
+  }, []);
+  return {
+    toasts: state.toasts,
+    toast,
+    dismiss: state.dismiss
+  };
+}
+
+// src/ui/toaster.tsx
+var import_jsx_runtime137 = require("react/jsx-runtime");
+function Toaster() {
+  const { toasts, dismiss } = useToast();
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(ToastProvider, { children: [
+    toasts.map(({ id, title, description, variant }) => /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)(
+      Toast,
+      {
+        variant,
+        onOpenChange: (open) => !open && dismiss(id),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsxs)("div", { className: "grid gap-1", children: [
+            title ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToastTitle, { children: title }) : null,
+            description ? /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToastDescription, { children: description }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToastClose, {})
+        ]
+      },
+      id
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(ToastViewport, {})
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   APP_KIT_AGENT_INSTRUCTIONS,
   ARTIFACT_AGENT_INSTRUCTIONS,
   ARTIFACT_FENCE_LANGUAGES,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   ActionBarPrimitive,
+  Alert,
+  AlertDescription,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertTitle,
   AppChatPanel,
   AppConfirmDialog,
   AppCopilotProvider,
@@ -9812,25 +13511,88 @@ function SelectScrollDownButton({
   ArtifactCard,
   ArtifactRegistryProvider,
   ArtifactView,
+  AspectRatio,
   AssistantRuntimeProvider,
   AuiIf,
   AuthGuard,
   Avatar,
   AvatarFallback,
   AvatarImage,
+  Badge,
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
   Breadcrumbs,
   Button,
   CHART_PALETTE,
+  COLOR_UTILITY_PREFIXES,
+  CONTROL_SIZE,
+  Calendar,
+  CalendarDayButton,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
   ChartArtifactView,
   ChartPanel,
+  Checkbox,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Combobox,
+  ComboboxAnchor,
+  ComboboxCommand,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxSeparator,
+  ComboboxShortcut,
+  ComboboxTrigger,
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
   Composer,
   ComposerPrimitive,
   ConnectionRow,
   ConnectionRowList,
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
   DEFAULT_UPLOAD_ACCEPT,
   DangerZone,
   DangerZoneAction,
   DataTable,
+  DatePicker,
+  DatePickerButton,
+  DatePickerCalendar,
+  DatePickerContent,
+  DatePickerTrigger,
   DescriptionList,
   Dialog,
   DialogClose,
@@ -9866,32 +13628,93 @@ function SelectScrollDownButton({
   FieldTextarea,
   FilterBar,
   FloatingUnsavedChangesBar,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   FormSection,
+  FormSubmit,
+  HOUSE_RULES,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
   HtmlArtifactView,
   INTEGRATION_CATALOG_CARD_HEIGHT_CLASS,
   InfoCard,
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPHiddenInput,
+  InputOTPSeparator,
+  InputOTPSlot,
   IntegrationCard,
   IntegrationsEmptyState,
   JsonArtifactView,
+  Kbd,
+  KbdGroup,
+  Label,
   LineAreaChart,
   MarkdownText,
   MemoPillSegmentedTabs,
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
   MessagePrimitive,
   MetricChartCard,
   MetricRow,
   MetricTile,
   ModeToggle,
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
   Page,
   PageHeader,
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
   PillSegmentedTabs,
   PlanBadge,
   Popover,
   PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
+  Progress,
   QuestionArtifactView,
+  RESERVED_GRADIENT_TOKENS,
+  RadioGroup,
+  RadioGroupItem,
   ResourceCard,
+  SEMANTIC_COLOR_TOKENS,
+  SLOP_BUDGETS,
   STUDIO_NAV_MODE,
+  ScrollArea,
+  ScrollBar,
   SearchInput,
   Section,
   Select,
@@ -9904,11 +13727,23 @@ function SelectScrollDownButton({
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  Separator,
   SessionProvider,
   SettingsSection,
   SettingsSectionHeader,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
   Shimmer,
+  Skeleton,
+  Slider,
   Sparkline,
+  Spinner,
   StatTile,
   StatusBadge,
   StatusDot,
@@ -9918,10 +13753,21 @@ function SelectScrollDownButton({
   SubNav,
   Suggestions,
   SurfaceCard,
+  Switch,
+  TAILWIND_PALETTE_COLORS,
   THEME_AGENT_INSTRUCTIONS,
   THREAD_DEFAULT_MAX_WIDTH,
   TIMBAL_THEME_PRESETS,
+  Table,
   TableArtifactView,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Textarea,
   ThemePresetGallery,
   Thread,
   ThreadPrimitive,
@@ -9931,33 +13777,58 @@ function SelectScrollDownButton({
   TimbalRuntimeProvider,
   TimbalStudioShell,
   TimbalThemeStyle,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  Toaster,
+  Toggle,
+  ToggleGroup,
+  ToggleGroupItem,
   ToolArtifactFallback,
   ToolFallback,
+  Toolbar,
+  ToolbarButton,
+  ToolbarLink,
+  ToolbarSeparator,
+  ToolbarToggleGroup,
+  ToolbarToggleItem,
   Tooltip,
   TooltipContent,
   TooltipIconButton,
   TooltipProvider,
   TooltipTrigger,
+  UI_REVIEW_AGENT_INSTRUCTIONS,
   UiArtifactView,
   UiCustomNodeRegistryProvider,
   UiEventProvider,
   UiNodeView,
   WorkforceSelector,
+  alertVariants,
   applyThemePreset,
   applyTimbalTheme,
   assistantMessageContentClass,
   assistantMessageRootClass,
   authFetch,
+  badgeVariants,
   clearTimbalTheme,
   clearTokens,
   cn,
   connectionRowListClass,
+  controlClass,
+  controlSurfaceClass,
   createDefaultAttachmentAdapter,
   createTimbalTheme,
   createUploadAttachmentAdapter,
   defaultArtifactRenderers,
+  ensureThemeFontLink,
   fetchCurrentUser,
   findMarkdownArtifacts,
+  formatLintReport,
+  formatPickerDate,
   getAccessToken,
   getPath,
   getRefreshToken,
@@ -9966,17 +13837,26 @@ function SelectScrollDownButton({
   isArtifact,
   isArtifactFenceLanguage,
   isUiBinding,
+  lintGeneratedUi,
+  navigationMenuTriggerStyle,
+  overlayAnimationClass,
+  overlayItemClass,
+  overlayListPanelClass,
+  overlaySurfaceClass,
   parseArtifactFromToolResult,
   parseSSELine,
   refreshAccessToken,
   resolveAttachmentAdapter,
   resolveBindable,
+  reviewGeneratedUi,
   setAccessToken,
   setPath,
   setRefreshToken,
   splitMarkdownByArtifacts,
   themeToCss,
   threadMessageColumnClass,
+  toast,
+  toggleVariants,
   useAppCopilotContext,
   useAppShellChat,
   useArtifactRegistry,
@@ -9989,6 +13869,7 @@ function SelectScrollDownButton({
   useThreadRuntime,
   useTimbalRuntime,
   useTimbalStream,
+  useToast,
   useToolRunning,
   useUiCustomNodeRegistry,
   useUiDispatch,