@hilum/ui 3.2.3 → 3.2.5

package/dist/index.js

@@ -1,14 +1,14 @@
 import { tokens } from './chunk-MAHPAP65.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React17 from 'react';
-import { DropdownMenu, Avatar as Avatar$1, Accordion, AlertDialog, AspectRatio, Checkbox, Collapsible, Dialog, ContextMenu, Popover, Label as Label$1, HoverCard, Menubar, NavigationMenu, Progress, RadioGroup, ScrollArea, Select, Separator, Tooltip, Slider, Switch, Tabs, Toggle, ToggleGroup, Slot } from 'radix-ui';
-import { Check, Circle, ChevronRight, ChevronDown, Minus, X, Search, AlertCircle, ChevronUp, MoreHorizontal, ChevronLeft, ArrowLeft, ArrowRight, ChevronsUpDown, CalendarIcon, Info, AlertTriangle, CheckCircle, GripVertical, PanelLeft, TrendingDown, TrendingUp } from 'lucide-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React19 from 'react';
+import { DropdownMenu, Avatar as Avatar$1, Accordion, AlertDialog, AspectRatio, Checkbox, Collapsible, Popover, Dialog, ContextMenu, Select, Label as Label$1, Tooltip, HoverCard, Menubar, NavigationMenu, Progress, RadioGroup, Separator, ScrollArea, Slider, Switch, Tabs, Toggle, ToggleGroup, Slot } from 'radix-ui';
+import { Check, Circle, ChevronRight, ChevronDown, Minus, X, Search, ChevronUp, AlertCircle, MoreHorizontal, ChevronLeft, ArrowLeft, ArrowRight, ChevronsUpDown, CalendarIcon, Upload, File, CircleHelp, Info, AlertTriangle, CheckCircle, GripVertical, Bold, Italic, Underline, Strikethrough, Heading1, Heading2, Heading3, List, ListOrdered, AlignLeft, FileText, Link, Image, Filter, ArrowUp, ArrowDown, PanelLeft, TrendingDown, TrendingUp, Plus, Download, XCircle, Loader2 } from 'lucide-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import { DayPicker } from 'react-day-picker';
 import useEmblaCarousel from 'embla-carousel-react';
-import { ResponsiveContainer } from 'recharts';
+import * as RechartsPrimitive from 'recharts';
 export { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Legend, Line, LineChart, Pie, PieChart, Tooltip as RechartsTooltip, XAxis, YAxis } from 'recharts';
 import { useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
@@ -20,31 +20,111 @@ import { Toaster as Toaster$1 } from 'sonner';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+
+// src/lib/mobile-popper-sheet.ts
+var mobileDialogSheetContentClassName = [
+  "fixed inset-x-0 bottom-0 z-50 max-h-[calc(100dvh-1rem)] w-full overflow-y-auto",
+  "rounded-t-2xl border border-border bg-card p-6 shadow-elevated",
+  "max-sm:pb-[calc(1.5rem+env(safe-area-inset-bottom))] max-sm:pt-8",
+  "max-sm:before:absolute max-sm:before:left-1/2 max-sm:before:top-3 max-sm:before:h-1 max-sm:before:w-9",
+  "max-sm:before:-translate-x-1/2 max-sm:before:rounded-full max-sm:before:bg-muted-foreground/35"
+].join(" ");
+var desktopDialogContentClassName = "sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:max-h-[calc(100dvh-2rem)] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-2xl";
+var dialogSheetMotionClassName = [
+  "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]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+  "sm:data-[state=closed]:zoom-out-95 sm:data-[state=open]:zoom-in-95"
+].join(" ");
+var mobilePopperSheetPositionClassName = [
+  "max-sm:!fixed max-sm:!inset-x-3 max-sm:!bottom-3 max-sm:!top-auto max-sm:!left-3 max-sm:!right-3",
+  "max-sm:!w-auto max-sm:!min-w-0 max-sm:!max-w-none max-sm:!transform-none"
+].join(" ");
+var mobilePopperSheetSurfaceClassName = "max-sm:max-h-[min(70dvh,28rem)] max-sm:rounded-2xl max-sm:border max-sm:border-border max-sm:shadow-elevated";
+var mobilePopperSheetMotionClassName = [
+  "max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=open]:slide-in-from-bottom"
+].join(" ");
+var mobilePopperSheetStyle = `
+@media (max-width: 639px) {
+  [data-radix-popper-content-wrapper]:has([data-hilum-mobile-sheet="true"]) {
+    position: fixed !important;
+    inset: 0 !important;
+    min-width: 0 !important;
+    transform: none !important;
+    pointer-events: none;
+    z-index: 50 !important;
+  }
+
+  [data-radix-popper-content-wrapper]:has([data-hilum-mobile-sheet="true"][data-state="open"])::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background: rgb(0 0 0 / 0.3);
+    backdrop-filter: blur(4px);
+    pointer-events: auto;
+  }
+
+  [data-hilum-mobile-sheet="true"] {
+    position: fixed !important;
+    left: 0.75rem !important;
+    right: 0.75rem !important;
+    bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
+    top: auto !important;
+    width: calc(100dvw - 1.5rem) !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    transform: none !important;
+    pointer-events: auto;
+    transform-origin: bottom center !important;
+    overscroll-behavior: contain;
+  }
+
+  [data-hilum-mobile-sheet="true"]::before {
+    content: "";
+    position: absolute;
+    top: 0.5rem;
+    left: 50%;
+    width: 2.25rem;
+    height: 0.25rem;
+    border-radius: 999px;
+    background: hsl(var(--muted-foreground) / 0.35);
+    transform: translateX(-50%);
+  }
+}
+`;
 var DropdownMenuRoot = DropdownMenu.Root;
 var DropdownMenuTrigger = DropdownMenu.Trigger;
 var DropdownMenuGroup = DropdownMenu.Group;
 var DropdownMenuPortal = DropdownMenu.Portal;
 var DropdownMenuSub = DropdownMenu.Sub;
 var DropdownMenuRadioGroup = DropdownMenu.RadioGroup;
-var DropdownMenuContent = React17.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
-  DropdownMenu.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 min-w-[8rem] bg-card rounded-xl shadow-natural p-1",
-      "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=top]:slide-in-from-bottom-2",
-      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-      className
-    ),
-    ...props
-  }
-) }));
+var DropdownMenuContent = React19.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("style", { children: mobilePopperSheetStyle }),
+  /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenu.Content,
+    {
+      ref,
+      "data-hilum-mobile-sheet": "true",
+      sideOffset,
+      className: cn(
+        "z-50 min-w-[8rem] bg-card rounded-xl shadow-natural p-1",
+        mobilePopperSheetPositionClassName,
+        mobilePopperSheetSurfaceClassName,
+        "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+        "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",
+        mobilePopperSheetMotionClassName,
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  ) })
+] }));
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = React17.forwardRef(({ className, inset, destructive, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuItem = React19.forwardRef(({ className, inset, destructive, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenu.Item,
   {
     ref,
@@ -60,7 +140,7 @@ var DropdownMenuItem = React17.forwardRef(({ className, inset, destructive, ...p
   }
 ));
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuCheckboxItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuCheckboxItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenu.CheckboxItem,
   {
     ref,
@@ -79,7 +159,7 @@ var DropdownMenuCheckboxItem = React17.forwardRef(({ className, children, ...pro
   }
 ));
 DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
-var DropdownMenuRadioItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuRadioItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenu.RadioItem,
   {
     ref,
@@ -98,7 +178,7 @@ var DropdownMenuRadioItem = React17.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
-var DropdownMenuLabel = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuLabel = React19.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenu.Label,
   {
     ref,
@@ -107,7 +187,7 @@ var DropdownMenuLabel = React17.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
-var DropdownMenuSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenu.Separator,
   {
     ref,
@@ -116,7 +196,7 @@ var DropdownMenuSeparator = React17.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-var DropdownMenuSubTrigger = React17.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuSubTrigger = React19.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenu.SubTrigger,
   {
     ref,
@@ -135,21 +215,29 @@ var DropdownMenuSubTrigger = React17.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
-var DropdownMenuSubContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DropdownMenu.SubContent,
-  {
-    ref,
-    className: cn(
-      "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
-      "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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-      className
-    ),
-    ...props
-  }
-));
+var DropdownMenuSubContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("style", { children: mobilePopperSheetStyle }),
+  /* @__PURE__ */ jsx(
+    DropdownMenu.SubContent,
+    {
+      ref,
+      "data-hilum-mobile-sheet": "true",
+      className: cn(
+        "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
+        mobilePopperSheetPositionClassName,
+        mobilePopperSheetSurfaceClassName,
+        "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+        "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",
+        mobilePopperSheetMotionClassName,
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
 DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
 function DropdownMenuShortcut({ className, ...props }) {
   return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-muted-foreground", className), ...props });
@@ -162,7 +250,7 @@ var sizeMap = {
   lg: "size-10 body-lg",
   xl: "size-12 subheading"
 };
-var Avatar = React17.forwardRef(
+var Avatar = React19.forwardRef(
   ({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx(
     Avatar$1.Root,
     {
@@ -177,7 +265,7 @@ var Avatar = React17.forwardRef(
   )
 );
 Avatar.displayName = "Avatar";
-var AvatarImage = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarImage = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Avatar$1.Image,
   {
     ref,
@@ -189,7 +277,7 @@ var AvatarImage = React17.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = "AvatarImage";
-var AvatarFallback = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarFallback = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Avatar$1.Fallback,
   {
     ref,
@@ -214,7 +302,7 @@ var statusSizeMap = {
   lg: "size-3 ring-2",
   xl: "size-3.5 ring-2"
 };
-var AvatarWithStatus = React17.forwardRef(({ status, size = "md", className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "relative inline-flex shrink-0", children: [
+var AvatarWithStatus = React19.forwardRef(({ status, size = "md", className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "relative inline-flex shrink-0", children: [
   /* @__PURE__ */ jsx(Avatar, { ref, size, className, ...props, children }),
   status && /* @__PURE__ */ jsx(
     "span",
@@ -228,7 +316,7 @@ var AvatarWithStatus = React17.forwardRef(({ status, size = "md", className, chi
   )
 ] }));
 AvatarWithStatus.displayName = "AvatarWithStatus";
-var AccountMenuContent = React17.forwardRef(({ className, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccountMenuContent = React19.forwardRef(({ className, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuContent,
   {
     ref,
@@ -241,7 +329,7 @@ var AccountMenuContent = React17.forwardRef(({ className, sideOffset = 8, ...pro
   }
 ));
 AccountMenuContent.displayName = "AccountMenuContent";
-var AccountMenuHeader = React17.forwardRef(
+var AccountMenuHeader = React19.forwardRef(
   ({ name, email, avatarSrc, avatarAlt, fallback, className, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
     {
@@ -260,11 +348,11 @@ var AccountMenuHeader = React17.forwardRef(
   )
 );
 AccountMenuHeader.displayName = "AccountMenuHeader";
-var AccountMenuSection = React17.forwardRef(
+var AccountMenuSection = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-2", className), ...props })
 );
 AccountMenuSection.displayName = "AccountMenuSection";
-var AccountMenuItem = React17.forwardRef(({ icon, trailing, description, destructive, children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+var AccountMenuItem = React19.forwardRef(({ icon, trailing, description, destructive, children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuItem,
   {
     ref,
@@ -288,13 +376,13 @@ var AccountMenuItem = React17.forwardRef(({ icon, trailing, description, destruc
   }
 ));
 AccountMenuItem.displayName = "AccountMenuItem";
-var AccountMenuSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuSeparator, { ref, className: cn("m-0 bg-border", className), ...props }));
+var AccountMenuSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuSeparator, { ref, className: cn("m-0 bg-border", className), ...props }));
 AccountMenuSeparator.displayName = "AccountMenuSeparator";
-var AccordionRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Root, { ref, className: cn("divide-y divide-border", className), ...props }));
+var AccordionRoot = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Root, { ref, className: cn("divide-y divide-border", className), ...props }));
 AccordionRoot.displayName = "Accordion";
-var AccordionItem = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Item, { ref, className: cn("", className), ...props }));
+var AccordionItem = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Item, { ref, className: cn("", className), ...props }));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+var AccordionTrigger = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
   Accordion.Trigger,
   {
     ref,
@@ -319,7 +407,7 @@ var AccordionTrigger = React17.forwardRef(({ className, children, ...props }, re
   }
 ) }));
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionContent = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   Accordion.Content,
   {
     ref,
@@ -500,7 +588,7 @@ ActivityFeed.displayName = "ActivityFeed";
 var AlertDialogRoot = AlertDialog.Root;
 var AlertDialogTrigger = AlertDialog.Trigger;
 var AlertDialogPortal = AlertDialog.Portal;
-var AlertDialogOverlay = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialog.Overlay,
   {
     ref,
@@ -514,18 +602,17 @@ var AlertDialogOverlay = React17.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = "AlertDialogOverlay";
-var AlertDialogContent = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [
+var AlertDialogContent = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     AlertDialog.Content,
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
-        "w-full max-w-md bg-card rounded-2xl shadow-elevated p-6",
-        "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",
+        mobileDialogSheetContentClassName,
+        desktopDialogContentClassName,
+        "sm:max-w-md",
+        dialogSheetMotionClassName,
         className
       ),
       ...props,
@@ -539,10 +626,20 @@ function AlertDialogHeader({ className, ...props }) {
 }
 AlertDialogHeader.displayName = "AlertDialogHeader";
 function AlertDialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-end gap-2 mt-6", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end",
+        "[&>*]:w-full sm:[&>*]:w-auto",
+        className
+      ),
+      ...props
+    }
+  );
 }
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialog.Title,
   {
     ref,
@@ -551,7 +648,7 @@ var AlertDialogTitle = React17.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = "AlertDialogTitle";
-var AlertDialogDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialog.Description,
   {
     ref,
@@ -560,7 +657,7 @@ var AlertDialogDescription = React17.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = "AlertDialogDescription";
-var AlertDialogAction = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogAction = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialog.Action,
   {
     ref,
@@ -576,7 +673,7 @@ var AlertDialogAction = React17.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogAction.displayName = "AlertDialogAction";
-var AlertDialogCancel = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogCancel = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialog.Cancel,
   {
     ref,
@@ -607,11 +704,11 @@ var alertVariants = cva(
     defaultVariants: { variant: "default" }
   }
 );
-var Alert = React17.forwardRef(
+var Alert = React19.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props })
 );
 Alert.displayName = "Alert";
-var AlertTitle = React17.forwardRef(
+var AlertTitle = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "p",
     {
@@ -622,11 +719,11 @@ var AlertTitle = React17.forwardRef(
   )
 );
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React17.forwardRef(
+var AlertDescription = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("body text-pretty opacity-90", className), ...props })
 );
 AlertDescription.displayName = "AlertDescription";
-var AspectRatioRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AspectRatioRoot = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AspectRatio.Root,
   {
     ref,
@@ -714,9 +811,9 @@ function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsx("span", { "data-slot": "badge", className: cn(badgeVariants({ variant, className })), ...props });
 }
 Badge.displayName = "Badge";
-var Breadcrumb = React17.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
+var Breadcrumb = React19.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React17.forwardRef(
+var BreadcrumbList = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "ol",
     {
@@ -727,15 +824,15 @@ var BreadcrumbList = React17.forwardRef(
   )
 );
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React17.forwardRef(
+var BreadcrumbItem = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("inline-flex items-center gap-1.5", className), ...props })
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React17.forwardRef(
+var BreadcrumbLink = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("a", { ref, className: cn("transition-colors hover:text-foreground", className), ...props })
 );
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React17.forwardRef(
+var BreadcrumbPage = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "span",
     {
@@ -848,6 +945,79 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
   );
 }
 Calendar.displayName = "Calendar";
+var calloutVariants = cva(
+  "flex w-full min-w-0 gap-3 rounded-xl border px-4 py-3.5 shadow-natural",
+  {
+    variants: {
+      tone: {
+        default: "border-border bg-card text-foreground",
+        info: "border-brand-secondary/50 bg-brand-secondary/15 text-foreground",
+        success: "border-success/25 bg-success/10 text-foreground",
+        warning: "border-warning/35 bg-warning/15 text-foreground",
+        destructive: "border-destructive/25 bg-destructive/10 text-foreground"
+      },
+      compact: {
+        true: "px-3 py-2.5",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      tone: "default",
+      compact: false
+    }
+  }
+);
+var calloutIconVariants = cva(
+  "mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg [&_svg]:size-4",
+  {
+    variants: {
+      tone: {
+        default: "bg-muted text-muted-foreground",
+        info: "bg-brand-secondary/35 text-muted-foreground",
+        success: "bg-success/15 text-success",
+        warning: "bg-warning/20 text-warning",
+        destructive: "bg-destructive/15 text-destructive"
+      }
+    },
+    defaultVariants: {
+      tone: "default"
+    }
+  }
+);
+function Callout({
+  title,
+  description,
+  icon,
+  actions,
+  tone = "default",
+  compact = false,
+  className,
+  children,
+  role,
+  ...props
+}) {
+  const resolvedRole = role ?? (tone === "destructive" ? "alert" : "status");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: resolvedRole,
+      className: cn(calloutVariants({ tone, compact }), className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: cn(calloutIconVariants({ tone })), children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            title && /* @__PURE__ */ jsx("p", { className: "body font-semibold text-balance", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: cn("body text-pretty text-muted-foreground", title && "mt-1"), children: description }),
+            children && /* @__PURE__ */ jsx("div", { className: cn(title || description ? "mt-2" : ""), children })
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2 max-sm:w-full max-sm:flex-col max-sm:items-stretch", children: actions })
+        ] })
+      ]
+    }
+  );
+}
+Callout.displayName = "Callout";
 function CardHeading({ title, description, actions, children, className }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -892,7 +1062,7 @@ var cardVariants = cva("rounded-xl", {
     variant: "default"
   }
 });
-var Card = React17.forwardRef(
+var Card = React19.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -904,7 +1074,7 @@ var Card = React17.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React17.forwardRef(
+var CardHeader = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -916,7 +1086,7 @@ var CardHeader = React17.forwardRef(
   )
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React17.forwardRef(
+var CardTitle = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "h3",
     {
@@ -928,7 +1098,7 @@ var CardTitle = React17.forwardRef(
   )
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React17.forwardRef(
+var CardDescription = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "p",
     {
@@ -940,11 +1110,11 @@ var CardDescription = React17.forwardRef(
   )
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React17.forwardRef(
+var CardContent = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "card-content", className: cn("p-5 pt-0", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React17.forwardRef(
+var CardFooter = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -956,7 +1126,19 @@ var CardFooter = React17.forwardRef(
   )
 );
 CardFooter.displayName = "CardFooter";
-var CardMedia = React17.forwardRef(
+var CardAction = React19.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-action",
+      className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+      ...props
+    }
+  )
+);
+CardAction.displayName = "CardAction";
+var CardMedia = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -968,9 +1150,9 @@ var CardMedia = React17.forwardRef(
   )
 );
 CardMedia.displayName = "CardMedia";
-var CarouselContext = React17.createContext(null);
+var CarouselContext = React19.createContext(null);
 function useCarousel() {
-  const context = React17.useContext(CarouselContext);
+  const context = React19.useContext(CarouselContext);
   if (!context) throw new Error("useCarousel must be used within a <Carousel />");
   return context;
 }
@@ -990,20 +1172,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React17.useState(false);
-  const [canScrollNext, setCanScrollNext] = React17.useState(false);
-  const onSelect = React17.useCallback((api) => {
+  const [canScrollPrev, setCanScrollPrev] = React19.useState(false);
+  const [canScrollNext, setCanScrollNext] = React19.useState(false);
+  const onSelect = React19.useCallback((api) => {
     if (!api) return;
     setCanScrollPrev(api.canScrollPrev());
     setCanScrollNext(api.canScrollNext());
   }, []);
-  const scrollPrev = React17.useCallback(() => {
+  const scrollPrev = React19.useCallback(() => {
     emblaApi?.scrollPrev();
   }, [emblaApi]);
-  const scrollNext = React17.useCallback(() => {
+  const scrollNext = React19.useCallback(() => {
     emblaApi?.scrollNext();
   }, [emblaApi]);
-  const handleKeyDown = React17.useCallback(
+  const handleKeyDown = React19.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -1015,7 +1197,7 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     if (!emblaApi) return;
     onSelect(emblaApi);
     emblaApi.on("reInit", onSelect);
@@ -1025,7 +1207,7 @@ function Carousel({
       emblaApi.off("select", onSelect);
     };
   }, [emblaApi, onSelect]);
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     if (!emblaApi || !setApi) return;
     setApi(emblaApi);
   }, [emblaApi, setApi]);
@@ -1144,32 +1326,268 @@ var CHART_COLORS = {
   subtle: tokens.semantic.light.border,
   dark: tokens.semantic.light.foreground
 };
-function ChartContainer({ children, className, height = 300 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children }) });
+var THEMES = { light: "", dark: ".dark" };
+var ChartContext = React19.createContext(null);
+function useChart() {
+  const context = React19.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
 }
-ChartContainer.displayName = "ChartContainer";
-function ChartTooltip({ active, payload, label, labelClassName }) {
-  if (!active || !payload?.length) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-card px-3 py-2 shadow-elevated", children: [
-    label && /* @__PURE__ */ jsx("p", { className: cn("mb-1 label text-muted-foreground", labelClassName), children: label }),
-    payload.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "inline-block h-2 w-2 rounded-full",
-          style: { backgroundColor: entry.color }
-        }
+function ChartContainer({
+  id,
+  className,
+  children,
+  config = {},
+  height,
+  style,
+  ...props
+}) {
+  const uniqueId = React19.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  const resolvedStyle = height === void 0 ? style : { ...style, height };
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn(
+        "flex aspect-video justify-center text-xs",
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground",
+        "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50",
+        "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border",
+        "[&_.recharts-dot[stroke='#fff']]:stroke-transparent",
+        "[&_.recharts-layer]:outline-hidden",
+        "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border",
+        "[&_.recharts-radial-bar-background-sector]:fill-muted",
+        "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted",
+        "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border",
+        "[&_.recharts-sector]:outline-hidden",
+        "[&_.recharts-sector[stroke='#fff']]:stroke-transparent",
+        "[&_.recharts-surface]:outline-hidden",
+        className
       ),
-      /* @__PURE__ */ jsxs("span", { className: "caption text-muted-foreground", children: [
-        entry.name,
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "caption font-medium text-foreground", children: entry.value })
-    ] }, i))
-  ] });
+      style: resolvedStyle,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })
+      ]
+    }
+  ) });
+}
+ChartContainer.displayName = "ChartContainer";
+var ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, itemConfig]) => itemConfig.theme || itemConfig.color
+  );
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            const color = itemConfig.theme?.[theme] || itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+function ChartTooltip(props) {
+  const hasDirectTooltipPayload = "active" in props || "payload" in props;
+  if (hasDirectTooltipPayload) {
+    return /* @__PURE__ */ jsx(ChartTooltipContent, { ...props });
+  }
+  return /* @__PURE__ */ jsx(
+    RechartsPrimitive.Tooltip,
+    {
+      ...props
+    }
+  );
 }
 ChartTooltip.displayName = "ChartTooltip";
-var CheckboxRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}) {
+  const chartContext = React19.useContext(ChartContext);
+  const config = chartContext?.config ?? {};
+  const tooltipLabel = React19.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+    if (labelFormatter) {
+      return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+    }
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey
+  ]);
+  if (!active || !payload?.length) {
+    return null;
+  }
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      ),
+      children: [
+        !nestLabel ? tooltipLabel : null,
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const itemPayload = item.payload;
+          const indicatorColor = color || (typeof itemPayload?.fill === "string" ? itemPayload.fill : void 0) || item.color;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                indicator === "dot" && "items-center"
+              ),
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                      {
+                        "h-2.5 w-2.5": indicator === "dot",
+                        "w-1": indicator === "line",
+                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                        "my-0.5": nestLabel && indicator === "dashed"
+                      }
+                    ),
+                    style: {
+                      "--color-bg": indicatorColor,
+                      "--color-border": indicatorColor
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                      ] }),
+                      item.value !== void 0 && item.value !== null && /* @__PURE__ */ jsx("span", { className: "font-mono font-medium tabular-nums text-foreground", children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
+                    ]
+                  }
+                )
+              ] })
+            },
+            `${item.dataKey || item.name || index}`
+          );
+        }) })
+      ]
+    }
+  );
+}
+ChartTooltipContent.displayName = "ChartTooltipContent";
+var ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey
+}) {
+  const { config } = useChart();
+  if (!payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      ),
+      children: payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+            children: [
+              itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
+                  style: {
+                    backgroundColor: item.color
+                  }
+                }
+              ),
+              itemConfig?.label
+            ]
+          },
+          `${item.value}`
+        );
+      })
+    }
+  );
+}
+ChartLegendContent.displayName = "ChartLegendContent";
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+var CheckboxRoot = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Checkbox.Root,
   {
     ref,
@@ -1190,6 +1608,36 @@ CheckboxRoot.displayName = "Checkbox";
 var CollapsibleRoot = Collapsible.Root;
 var CollapsibleTrigger = Collapsible.Trigger;
 var CollapsibleContent = Collapsible.Content;
+var PopoverRoot = Popover.Root;
+var PopoverTrigger = Popover.Trigger;
+var PopoverClose = Popover.Close;
+var PopoverContent = React19.forwardRef(({ className, align = "center", sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("style", { children: mobilePopperSheetStyle }),
+  /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      ref,
+      "data-hilum-mobile-sheet": "true",
+      align,
+      sideOffset,
+      className: cn(
+        "relative z-50 w-72 rounded-xl bg-card p-4 shadow-natural outline-none",
+        mobilePopperSheetPositionClassName,
+        mobilePopperSheetSurfaceClassName,
+        "max-sm:overflow-y-auto max-sm:px-4 max-sm:pb-4 max-sm:pt-6",
+        "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",
+        mobilePopperSheetMotionClassName,
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  ) })
+] }));
+PopoverContent.displayName = "PopoverContent";
 function isValidHex(s) {
   return /^#([0-9a-fA-F]{3}){1,2}$/.test(s);
 }
@@ -1201,15 +1649,15 @@ function ColorPicker({
   presets,
   ariaLabel = "Color"
 }) {
-  const [hex, setHex] = React17.useState(value);
-  React17.useEffect(() => {
+  const [hex, setHex] = React19.useState(value);
+  React19.useEffect(() => {
     setHex(value);
   }, [value]);
   const commit = (next) => {
     if (isValidHex(next)) onChange(next);
   };
-  return /* @__PURE__ */ jsxs(Popover.Root, { children: [
-    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(PopoverRoot, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -1232,60 +1680,52 @@ function ColorPicker({
         )
       }
     ) }),
-    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
-      Popover.Content,
-      {
-        align: "start",
-        sideOffset: 6,
-        className: "z-50 w-56 rounded-xl bg-card p-3 shadow-natural outline-none",
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "color",
-              value: isValidHex(hex) ? hex : "#000000",
-              onChange: (e) => {
-                setHex(e.target.value);
-                onChange(e.target.value);
-              },
-              className: "h-10 w-full cursor-pointer rounded-md border border-border bg-card p-0.5"
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "caption text-muted-foreground", children: "Hex" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                value: hex,
-                onChange: (e) => setHex(e.target.value),
-                onBlur: (e) => commit(e.target.value),
-                onKeyDown: (e) => {
-                  if (e.key === "Enter") commit(e.target.value);
-                },
-                className: "h-10 flex-1 rounded-md border border-border bg-card px-2 caption text-foreground focus:outline-none focus:border-brand-primary"
-              }
-            )
-          ] }),
-          presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 grid grid-cols-4 gap-2", children: presets.map((p) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onChange(p),
-              "aria-label": p,
-              className: "size-10 rounded-md border border-black/10 transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
-              style: { backgroundColor: p }
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", sideOffset: 6, className: "w-56 p-3 max-sm:px-3", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          value: isValidHex(hex) ? hex : "#000000",
+          onChange: (e) => {
+            setHex(e.target.value);
+            onChange(e.target.value);
+          },
+          className: "h-10 w-full cursor-pointer rounded-md border border-border bg-card p-0.5"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "caption text-muted-foreground", children: "Hex" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: hex,
+            onChange: (e) => setHex(e.target.value),
+            onBlur: (e) => commit(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") commit(e.target.value);
             },
-            p
-          )) })
-        ]
-      }
-    ) })
-  ] });
-}
-ColorPicker.displayName = "ColorPicker";
-function ColorInput({
-  value,
+            className: "h-10 flex-1 rounded-md border border-border bg-card px-2 caption text-foreground focus:outline-none focus:border-brand-primary"
+          }
+        )
+      ] }),
+      presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 grid grid-cols-4 gap-2", children: presets.map((p) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange(p),
+          "aria-label": p,
+          className: "size-10 rounded-md border border-black/10 transition-transform hover:scale-105 active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+          style: { backgroundColor: p }
+        },
+        p
+      )) })
+    ] })
+  ] });
+}
+ColorPicker.displayName = "ColorPicker";
+function ColorInput({
+  value,
   onChange,
   opacity,
   onOpacityChange,
@@ -1293,8 +1733,8 @@ function ColorInput({
   disabled,
   presets
 }) {
-  const [hex, setHex] = React17.useState(value);
-  React17.useEffect(() => {
+  const [hex, setHex] = React19.useState(value);
+  React19.useEffect(() => {
     setHex(value);
   }, [value]);
   const commitHex = (next) => {
@@ -1364,20 +1804,20 @@ function Combobox({
   emptyText = "No results found.",
   className
 }) {
-  const [open, setOpen] = React17.useState(false);
-  const [query, setQuery] = React17.useState("");
-  const [activeIndex, setActiveIndex] = React17.useState(-1);
-  const containerRef = React17.useRef(null);
-  const inputRef = React17.useRef(null);
-  const listboxId = React17.useId();
+  const [open, setOpen] = React19.useState(false);
+  const [query, setQuery] = React19.useState("");
+  const [activeIndex, setActiveIndex] = React19.useState(-1);
+  const containerRef = React19.useRef(null);
+  const inputRef = React19.useRef(null);
+  const listboxId = React19.useId();
   const selectedOption = options.find((o) => o.value === value);
   const filtered = query === "" ? options : options.filter(
     (o) => o.label.toLowerCase().includes(query.toLowerCase()) || o.description?.toLowerCase().includes(query.toLowerCase())
   );
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     setActiveIndex(-1);
   }, [filtered.length, open]);
-  React17.useEffect(() => {
+  React19.useEffect(() => {
     function onMouseDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
@@ -1483,66 +1923,96 @@ function Combobox({
         }
       )
     ] }),
-    open && /* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-border bg-card shadow-elevated", children: /* @__PURE__ */ jsx("ul", { id: listboxId, role: "listbox", className: "max-h-60 overflow-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 body text-muted-foreground", children: emptyText }) : filtered.map((option, idx) => {
-      const isSelected = option.value === value;
-      const isActive = idx === activeIndex;
-      return /* @__PURE__ */ jsxs(
-        "li",
+    open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Close options",
+          className: "fixed inset-0 z-40 hidden bg-black/30 backdrop-blur-sm max-sm:block",
+          onClick: closeDropdown
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
         {
-          id: `${listboxId}-option-${idx}`,
-          role: "option",
-          "aria-selected": isSelected,
           className: cn(
-            "flex min-h-10 cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
-            isSelected ? "bg-brand-primary text-background" : isActive ? "bg-muted text-foreground" : "text-foreground hover:bg-muted"
+            "absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-border bg-card shadow-elevated",
+            "max-sm:fixed max-sm:inset-x-3 max-sm:bottom-3 max-sm:[bottom:max(0.75rem,env(safe-area-inset-bottom))] max-sm:top-auto max-sm:mt-0 max-sm:w-auto",
+            "max-sm:max-h-[min(70dvh,28rem)] max-sm:rounded-2xl max-sm:p-2 max-sm:pt-5",
+            "max-sm:before:absolute max-sm:before:left-1/2 max-sm:before:top-2 max-sm:before:h-1 max-sm:before:w-9 max-sm:before:-translate-x-1/2 max-sm:before:rounded-full max-sm:before:bg-muted-foreground/35"
           ),
-          onMouseDown: (e) => e.preventDefault(),
-          onMouseEnter: () => setActiveIndex(idx),
-          onClick: () => selectOption(option),
-          children: [
-            option.avatar && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "flex size-6 shrink-0 items-center justify-center rounded-full caption-xs font-semibold",
-                  isSelected ? "bg-card/20 text-background" : "bg-muted text-muted-foreground"
-                ),
-                children: option.avatar
-              }
-            ),
-            option.statusColor && !option.avatar && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "size-2 shrink-0 rounded-full",
-                style: { backgroundColor: option.statusColor }
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("p", { className: cn("truncate", isSelected && "font-semibold"), children: option.label }),
-              option.description && /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "caption truncate",
-                    isSelected ? "text-background/70" : "text-muted-foreground"
-                  ),
-                  children: option.description
-                }
-              )
-            ] }),
-            isSelected && /* @__PURE__ */ jsx(Check, { size: 14, className: "shrink-0" })
-          ]
-        },
-        option.value
-      );
-    }) }) })
+          children: /* @__PURE__ */ jsx(
+            "ul",
+            {
+              id: listboxId,
+              role: "listbox",
+              className: "max-h-60 overflow-auto py-1 max-sm:max-h-[calc(min(70dvh,28rem)-3rem)]",
+              children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 body text-muted-foreground", children: emptyText }) : filtered.map((option, idx) => {
+                const isSelected = option.value === value;
+                const isActive = idx === activeIndex;
+                return /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    id: `${listboxId}-option-${idx}`,
+                    role: "option",
+                    "aria-selected": isSelected,
+                    className: cn(
+                      "flex min-h-10 cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
+                      isSelected ? "bg-brand-primary text-background" : isActive ? "bg-muted text-foreground" : "text-foreground hover:bg-muted"
+                    ),
+                    onMouseDown: (e) => e.preventDefault(),
+                    onMouseEnter: () => setActiveIndex(idx),
+                    onClick: () => selectOption(option),
+                    children: [
+                      option.avatar && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "flex size-6 shrink-0 items-center justify-center rounded-full caption-xs font-semibold",
+                            isSelected ? "bg-card/20 text-background" : "bg-muted text-muted-foreground"
+                          ),
+                          children: option.avatar
+                        }
+                      ),
+                      option.statusColor && !option.avatar && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "size-2 shrink-0 rounded-full",
+                          style: { backgroundColor: option.statusColor }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx("p", { className: cn("truncate", isSelected && "font-semibold"), children: option.label }),
+                        option.description && /* @__PURE__ */ jsx(
+                          "p",
+                          {
+                            className: cn(
+                              "caption truncate",
+                              isSelected ? "text-background/70" : "text-muted-foreground"
+                            ),
+                            children: option.description
+                          }
+                        )
+                      ] }),
+                      isSelected && /* @__PURE__ */ jsx(Check, { size: 14, className: "shrink-0" })
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        }
+      )
+    ] })
   ] });
 }
 Combobox.displayName = "Combobox";
 var DialogRoot = Dialog.Root;
 var DialogTrigger = Dialog.Trigger;
 var DialogClose = Dialog.Close;
-var DialogOverlay = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Dialog.Overlay,
   {
     ref,
@@ -1556,18 +2026,17 @@ var DialogOverlay = React17.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+var DialogContent = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxs(
     Dialog.Content,
     {
       ref,
       className: cn(
-        "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
-        "w-full max-w-lg bg-card rounded-2xl shadow-elevated p-6",
-        "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",
+        mobileDialogSheetContentClassName,
+        desktopDialogContentClassName,
+        "sm:max-w-lg",
+        dialogSheetMotionClassName,
         className
       ),
       ...props,
@@ -1587,10 +2056,20 @@ function DialogHeader({ className, ...props }) {
 }
 DialogHeader.displayName = "DialogHeader";
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-end gap-2 mt-6", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end",
+        "[&>*]:w-full sm:[&>*]:w-auto",
+        className
+      ),
+      ...props
+    }
+  );
 }
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Dialog.Title,
   {
     ref,
@@ -1599,7 +2078,7 @@ var DialogTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Dialog.Description,
   {
     ref,
@@ -1615,9 +2094,9 @@ function CommandPalette({
   placeholder = "Search...",
   emptyText = "No results found."
 }) {
-  const [query, setQuery] = React17.useState("");
-  const inputRef = React17.useRef(null);
-  React17.useEffect(() => {
+  const [query, setQuery] = React19.useState("");
+  const inputRef = React19.useRef(null);
+  React19.useEffect(() => {
     if (open) {
       setTimeout(() => inputRef.current?.focus(), 50);
       setQuery("");
@@ -1684,19 +2163,19 @@ function CommandPalette({
   ] }) });
 }
 CommandPalette.displayName = "CommandPalette";
-var CommandCtx = React17.createContext({
+var CommandCtx = React19.createContext({
   query: "",
   setQuery: () => {
   },
   reportVisible: () => {
   }
 });
-var CommandVisibleCtx = React17.createContext(0);
+var CommandVisibleCtx = React19.createContext(0);
 function Command({ className, children, onSelect, ...props }) {
-  const [query, setQuery] = React17.useState("");
-  const visibleIds = React17.useRef(/* @__PURE__ */ new Set());
-  const [visibleCount, setVisibleCount] = React17.useState(0);
-  const reportVisible = React17.useCallback((id, visible) => {
+  const [query, setQuery] = React19.useState("");
+  const visibleIds = React19.useRef(/* @__PURE__ */ new Set());
+  const [visibleCount, setVisibleCount] = React19.useState(0);
+  const reportVisible = React19.useCallback((id, visible) => {
     const had = visibleIds.current.has(id);
     if (visible && !had) {
       visibleIds.current.add(id);
@@ -1724,8 +2203,8 @@ function Command({ className, children, onSelect, ...props }) {
     }
   );
 }
-var CommandInput = React17.forwardRef(({ className, ...props }, ref) => {
-  const { query, setQuery } = React17.useContext(CommandCtx);
+var CommandInput = React19.forwardRef(({ className, ...props }, ref) => {
+  const { query, setQuery } = React19.useContext(CommandCtx);
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3", children: [
     /* @__PURE__ */ jsx(Search, { size: 14, className: "shrink-0 text-muted-foreground" }),
     /* @__PURE__ */ jsx(
@@ -1749,10 +2228,10 @@ var CommandInput = React17.forwardRef(({ className, ...props }, ref) => {
   ] });
 });
 CommandInput.displayName = "CommandInput";
-var CommandList = React17.forwardRef(
+var CommandList = React19.forwardRef(
   ({ className, ...props }, ref) => {
-    const listRef = React17.useRef(null);
-    const combinedRef = React17.useCallback(
+    const listRef = React19.useRef(null);
+    const combinedRef = React19.useCallback(
       (el) => {
         listRef.current = el;
         if (typeof ref === "function") ref(el);
@@ -1787,9 +2266,9 @@ var CommandList = React17.forwardRef(
   }
 );
 CommandList.displayName = "CommandList";
-var CommandEmpty = React17.forwardRef(
+var CommandEmpty = React19.forwardRef(
   ({ className, children = "No results found.", ...props }, ref) => {
-    const visibleCount = React17.useContext(CommandVisibleCtx);
+    const visibleCount = React19.useContext(CommandVisibleCtx);
     if (visibleCount > 0) return null;
     return /* @__PURE__ */ jsx(
       "div",
@@ -1803,20 +2282,20 @@ var CommandEmpty = React17.forwardRef(
   }
 );
 CommandEmpty.displayName = "CommandEmpty";
-var CommandGroup = React17.forwardRef(
+var CommandGroup = React19.forwardRef(
   ({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, role: "group", className: cn("py-1", className), ...props, children: [
     heading && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 pt-0.5 label text-muted-foreground", children: heading }),
     children
   ] })
 );
 CommandGroup.displayName = "CommandGroup";
-var CommandItem = React17.forwardRef(
+var CommandItem = React19.forwardRef(
   ({ className, value = "", keywords, disabled, onSelect, children, ...props }, ref) => {
-    const { query, onSelect: ctxOnSelect, reportVisible } = React17.useContext(CommandCtx);
-    const id = React17.useId();
+    const { query, onSelect: ctxOnSelect, reportVisible } = React19.useContext(CommandCtx);
+    const id = React19.useId();
     const searchText = (keywords ?? [value]).join(" ").toLowerCase();
     const isVisible = !query || searchText.includes(query.toLowerCase());
-    React17.useLayoutEffect(() => {
+    React19.useLayoutEffect(() => {
       reportVisible(id, isVisible && !disabled);
       return () => reportVisible(id, false);
     }, [id, isVisible, disabled, reportVisible]);
@@ -1857,7 +2336,7 @@ var CommandItem = React17.forwardRef(
   }
 );
 CommandItem.displayName = "CommandItem";
-var CommandSeparator = React17.forwardRef(
+var CommandSeparator = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("my-1 h-px bg-muted", className), ...props })
 );
 CommandSeparator.displayName = "CommandSeparator";
@@ -1871,6 +2350,22 @@ function CommandShortcut({ className, ...props }) {
   );
 }
 CommandShortcut.displayName = "CommandShortcut";
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogRoot, { ...props, children: /* @__PURE__ */ jsxs(DialogContent, { className: cn("gap-0 overflow-hidden p-0 sm:max-w-xl", className), children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx(Command, { className: "rounded-none border-0 shadow-none", children })
+  ] }) });
+}
+CommandDialog.displayName = "CommandDialog";
 Command.displayName = "Command";
 var ContextMenuRoot = ContextMenu.Root;
 var ContextMenuTrigger = ContextMenu.Trigger;
@@ -1878,24 +2373,32 @@ var ContextMenuGroup = ContextMenu.Group;
 var ContextMenuPortal = ContextMenu.Portal;
 var ContextMenuSub = ContextMenu.Sub;
 var ContextMenuRadioGroup = ContextMenu.RadioGroup;
-var ContextMenuContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(
-  ContextMenu.Content,
-  {
-    ref,
-    className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated outline-none",
-      "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=top]:slide-in-from-bottom-2",
-      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-      className
-    ),
-    ...props
-  }
-) }));
+var ContextMenuContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("style", { children: mobilePopperSheetStyle }),
+  /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(
+    ContextMenu.Content,
+    {
+      ref,
+      "data-hilum-mobile-sheet": "true",
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated outline-none",
+        mobilePopperSheetPositionClassName,
+        mobilePopperSheetSurfaceClassName,
+        "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+        "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",
+        mobilePopperSheetMotionClassName,
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  ) })
+] }));
 ContextMenuContent.displayName = "ContextMenuContent";
-var ContextMenuItem = React17.forwardRef(({ className, inset, destructive, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuItem = React19.forwardRef(({ className, inset, destructive, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenu.Item,
   {
     ref,
@@ -1911,7 +2414,7 @@ var ContextMenuItem = React17.forwardRef(({ className, inset, destructive, ...pr
   }
 ));
 ContextMenuItem.displayName = "ContextMenuItem";
-var ContextMenuCheckboxItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuCheckboxItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenu.CheckboxItem,
   {
     ref,
@@ -1930,7 +2433,7 @@ var ContextMenuCheckboxItem = React17.forwardRef(({ className, children, ...prop
   }
 ));
 ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
-var ContextMenuRadioItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuRadioItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenu.RadioItem,
   {
     ref,
@@ -1949,7 +2452,7 @@ var ContextMenuRadioItem = React17.forwardRef(({ className, children, ...props }
   }
 ));
 ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
-var ContextMenuLabel = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuLabel = React19.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenu.Label,
   {
     ref,
@@ -1958,7 +2461,7 @@ var ContextMenuLabel = React17.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = "ContextMenuLabel";
-var ContextMenuSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenu.Separator,
   {
     ref,
@@ -1967,7 +2470,7 @@ var ContextMenuSeparator = React17.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 ContextMenuSeparator.displayName = "ContextMenuSeparator";
-var ContextMenuSubTrigger = React17.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuSubTrigger = React19.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenu.SubTrigger,
   {
     ref,
@@ -1986,27 +2489,35 @@ var ContextMenuSubTrigger = React17.forwardRef(({ className, inset, children, ..
   }
 ));
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
-var ContextMenuSubContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  ContextMenu.SubContent,
-  {
-    ref,
-    className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated outline-none",
-      "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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-      className
-    ),
-    ...props
-  }
-));
+var ContextMenuSubContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("style", { children: mobilePopperSheetStyle }),
+  /* @__PURE__ */ jsx(
+    ContextMenu.SubContent,
+    {
+      ref,
+      "data-hilum-mobile-sheet": "true",
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-card-foreground shadow-elevated outline-none",
+        mobilePopperSheetPositionClassName,
+        mobilePopperSheetSurfaceClassName,
+        "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+        "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",
+        mobilePopperSheetMotionClassName,
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
 ContextMenuSubContent.displayName = "ContextMenuSubContent";
 function ContextMenuShortcut({ className, ...props }) {
   return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-muted-foreground", className), ...props });
 }
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
-var Table = React17.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+var Table = React19.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
@@ -2024,13 +2535,13 @@ var Table = React17.forwardRef(({ className, containerClassName, ...props }, ref
   }
 ));
 Table.displayName = "Table";
-var TableHeader = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("bg-muted", className), ...props }));
+var TableHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("bg-muted", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("divide-y divide-border bg-card", className), ...props }));
+var TableBody = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("divide-y divide-border bg-card", className), ...props }));
 TableBody.displayName = "TableBody";
-var TableFooter = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", { ref, className: cn("bg-muted font-medium", className), ...props }));
+var TableFooter = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", { ref, className: cn("bg-muted font-medium", className), ...props }));
 TableFooter.displayName = "TableFooter";
-var TableRow = React17.forwardRef(
+var TableRow = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "tr",
     {
@@ -2044,7 +2555,7 @@ var TableRow = React17.forwardRef(
   )
 );
 TableRow.displayName = "TableRow";
-var TableHead = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHead = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -2057,7 +2568,7 @@ var TableHead = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCell = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -2070,7 +2581,7 @@ var TableCell = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 caption text-muted-foreground", className), ...props }));
+var TableCaption = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 caption text-muted-foreground", className), ...props }));
 TableCaption.displayName = "TableCaption";
 function Input({ className, type, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -2100,8 +2611,8 @@ function DataTable({
   pageSize = 10,
   showPagination = true
 }) {
-  const [sorting, setSorting] = React17.useState([]);
-  const [columnFilters, setColumnFilters] = React17.useState([]);
+  const [sorting, setSorting] = React19.useState([]);
+  const [columnFilters, setColumnFilters] = React19.useState([]);
   const table = useReactTable({
     data,
     columns,
@@ -2192,28 +2703,188 @@ function DataTable({
     ] })
   ] });
 }
-var PopoverRoot = Popover.Root;
-var PopoverTrigger = Popover.Trigger;
-var PopoverClose = Popover.Close;
-var PopoverContent = React17.forwardRef(({ className, align = "center", sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
-  Popover.Content,
+var SelectRoot = Select.Root;
+var SelectGroup = Select.Group;
+var SelectValue = Select.Value;
+var SelectTrigger = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Select.Trigger,
   {
     ref,
-    align,
-    sideOffset,
     className: cn(
-      "z-50 w-72 rounded-xl bg-card p-4 shadow-natural outline-none",
-      "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=top]:slide-in-from-bottom-2",
-      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      "flex h-10 w-full items-center justify-between rounded-xl bg-card px-3 py-2",
+      "body text-foreground shadow-natural",
+      "focus:outline-none focus:ring-2 focus:ring-ring/20",
+      "disabled:opacity-50 disabled:cursor-not-allowed",
+      "data-[placeholder]:text-muted-foreground",
+      "[&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: 15, className: "text-muted-foreground shrink-0" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = React19.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("style", { children: mobilePopperSheetStyle }),
+  /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(
+    Select.Content,
+    {
+      ref,
+      "data-hilum-mobile-sheet": "true",
+      className: cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden",
+        "bg-card rounded-xl shadow-natural p-1",
+        mobilePopperSheetPositionClassName,
+        mobilePopperSheetSurfaceClassName,
+        "max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+        "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",
+        mobilePopperSheetMotionClassName,
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Select.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronUp, { size: 14, className: "text-muted-foreground" }) }),
+        /* @__PURE__ */ jsx(
+          Select.Viewport,
+          {
+            className: cn(
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+              "max-sm:!h-auto max-sm:max-h-[calc(min(70dvh,28rem)-3rem)] max-sm:!w-full max-sm:!min-w-0"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(Select.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: "text-muted-foreground" }) })
+      ]
+    }
+  ) })
+] }));
+SelectContent.displayName = "SelectContent";
+var SelectItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Select.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex min-h-10 w-full cursor-default select-none items-center rounded-md px-2.5 py-2",
+      "body text-muted-foreground outline-none",
+      "focus:bg-muted focus:text-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-foreground" }) }) }),
+      /* @__PURE__ */ jsx(Select.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = "SelectItem";
+var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Select.Label,
+  {
+    ref,
+    className: cn("px-2.5 py-1 label text-muted-foreground", className),
     ...props
   }
-) }));
-PopoverContent.displayName = "PopoverContent";
+));
+SelectLabel.displayName = "SelectLabel";
+var SelectSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.Separator, { ref, className: cn("mx-1 my-1 h-px bg-muted", className), ...props }));
+SelectSeparator.displayName = "SelectSeparator";
+function normalizeIcon(icon, fallback, loading) {
+  if (loading) return /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" });
+  return icon ?? fallback;
+}
+function DataTransferControls({
+  scopeValue,
+  onScopeChange,
+  scopeOptions = [],
+  scopePlaceholder = "Scope",
+  actions,
+  compact = false,
+  compactLabel = "Import and export actions",
+  className,
+  selectClassName,
+  actionGroupClassName
+}) {
+  const hasScope = scopeOptions.length > 0 && scopeValue !== void 0 && onScopeChange;
+  const renderScopeSelect = () => {
+    if (!hasScope) return null;
+    return /* @__PURE__ */ jsxs(SelectRoot, { value: scopeValue, onValueChange: onScopeChange, children: [
+      /* @__PURE__ */ jsx(
+        SelectTrigger,
+        {
+          "aria-label": scopePlaceholder,
+          className: cn("min-h-10 w-full max-w-full bg-background sm:w-[180px]", selectClassName),
+          children: /* @__PURE__ */ jsx(SelectValue, { placeholder: scopePlaceholder })
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectContent, { children: scopeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+    ] });
+  };
+  const defaultActionIcon = (index) => index === 0 ? /* @__PURE__ */ jsx(Upload, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Download, { className: "size-4", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        compact ? "grid w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2" : "grid w-full min-w-0 gap-2 sm:flex sm:w-auto sm:flex-wrap sm:items-center",
+        className
+      ),
+      children: [
+        renderScopeSelect(),
+        compact ? /* @__PURE__ */ jsxs(DropdownMenuRoot, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "icon",
+              className: "size-9",
+              "aria-label": compactLabel,
+              children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4", "aria-hidden": "true" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "w-56", children: actions.map((action, index) => {
+            const disabled = Boolean(action.disabled || action.loading);
+            return /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                disabled,
+                onClick: action.onSelect,
+                children: [
+                  normalizeIcon(action.icon, defaultActionIcon(index), action.loading),
+                  action.label
+                ]
+              },
+              `${action.label}-${index}`
+            );
+          }) })
+        ] }) : /* @__PURE__ */ jsx(ButtonGroup, { className: cn("grid w-full grid-cols-3 sm:inline-flex sm:w-auto", actionGroupClassName), children: actions.map((action, index) => /* @__PURE__ */ jsxs(
+          ButtonGroupItem,
+          {
+            className: "min-h-10 justify-center px-3 disabled:pointer-events-none disabled:opacity-50",
+            onClick: action.onSelect,
+            disabled: action.disabled || action.loading,
+            "aria-label": action.ariaLabel ?? action.label,
+            children: [
+              normalizeIcon(action.icon, defaultActionIcon(index), action.loading),
+              action.shortLabel ?? action.label
+            ]
+          },
+          `${action.label}-${index}`
+        )) })
+      ]
+    }
+  );
+}
+DataTransferControls.displayName = "DataTransferControls";
 var formatDate = (date) => date.toLocaleDateString("en-US", {
   month: "long",
   day: "numeric",
@@ -2294,7 +2965,7 @@ var DrawerRoot = Drawer.Root;
 var DrawerTrigger = Drawer.Trigger;
 var DrawerPortal = Drawer.Portal;
 var DrawerClose = Drawer.Close;
-var DrawerOverlay = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer.Overlay,
   {
     ref,
@@ -2303,7 +2974,7 @@ var DrawerOverlay = React17.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DrawerOverlay.displayName = "DrawerOverlay";
-var DrawerContent = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+var DrawerContent = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
   /* @__PURE__ */ jsx(DrawerOverlay, {}),
   /* @__PURE__ */ jsxs(
     Drawer.Content,
@@ -2326,7 +2997,7 @@ var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { cla
 DrawerHeader.displayName = "DrawerHeader";
 var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("mt-auto flex flex-col gap-2 px-6 pb-6", className), ...props });
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer.Title,
   {
     ref,
@@ -2335,7 +3006,7 @@ var DrawerTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer.Description,
   {
     ref,
@@ -2355,7 +3026,7 @@ function EmptyState({ icon, title, description, action, className }) {
   ] });
 }
 EmptyState.displayName = "EmptyState";
-var Label = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Label$1.Root,
   {
     ref,
@@ -2393,39 +3064,198 @@ function Field({
   ] });
 }
 Field.displayName = "Field";
-var colMap = {
-  2: "grid-cols-1 sm:grid-cols-2",
-  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
-};
-var gapMap = {
-  sm: "gap-3",
-  md: "gap-4",
-  lg: "gap-6"
-};
-function GridList({ children, columns = 3, gap = "md", className }) {
-  return /* @__PURE__ */ jsx("ul", { role: "list", className: cn("grid", colMap[columns], gapMap[gap], className), children });
-}
-function GridListCard({
-  title,
-  description,
-  meta,
-  href,
-  accent,
-  trailing,
-  className
-}) {
-  const inner = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex h-full flex-col gap-1 rounded-xl border border-border bg-card p-4 shadow-natural transition-shadow",
-        href && "hover:shadow-elevated",
-        className
-      ),
-      children: [
-        accent && /* @__PURE__ */ jsx("div", { className: "mb-2", children: accent }),
-        /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground text-balance", children: title }),
+var spinnerVariants = cva(
+  "inline-block animate-spin rounded-full border-2 border-current border-t-transparent",
+  {
+    variants: {
+      size: {
+        xs: "size-3",
+        sm: "size-4",
+        default: "size-5",
+        lg: "size-6",
+        xl: "size-8"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function Spinner({ className, size, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn(spinnerVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function formatFileSize(bytes) {
+  if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const unitIndex = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const value = bytes / Math.pow(1024, unitIndex);
+  return `${value.toFixed(value >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
+}
+function getFileSummary(files) {
+  if (files.length === 0) return null;
+  if (files.length === 1) return `${files[0].name} (${formatFileSize(files[0].size)})`;
+  const totalSize = files.reduce((sum, file) => sum + file.size, 0);
+  return `${files.length} files selected (${formatFileSize(totalSize)})`;
+}
+function FileDropzone({
+  accept,
+  multiple,
+  disabled,
+  loading,
+  loadingText = "Uploading...",
+  label = "Drag files here or click to upload",
+  activeLabel = "Drop files to upload",
+  description,
+  icon,
+  selectedFiles,
+  inputRef,
+  inputClassName,
+  inputName,
+  onFilesSelected,
+  className,
+  id,
+  tabIndex,
+  onKeyDown,
+  onClick,
+  ...props
+}) {
+  const [isDragging, setIsDragging] = React19.useState(false);
+  const inputId = React19.useId();
+  const resolvedId = id ?? inputId;
+  const fileSummary = getFileSummary(selectedFiles ?? []);
+  const isUnavailable = Boolean(disabled || loading);
+  const emitFiles = React19.useCallback(
+    (fileList) => {
+      if (!fileList || isUnavailable) return;
+      onFilesSelected?.(Array.from(fileList));
+    },
+    [isUnavailable, onFilesSelected]
+  );
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: resolvedId,
+      role: "button",
+      tabIndex: isUnavailable ? -1 : tabIndex ?? 0,
+      "aria-disabled": isUnavailable || void 0,
+      "data-dragging": isDragging ? "true" : "false",
+      className: cn(
+        "group flex min-h-36 cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed border-border bg-card p-6 text-center shadow-natural",
+        "transition-[background-color,border-color,box-shadow,scale] duration-150",
+        "hover:border-brand-primary/50 hover:bg-muted/40 active:scale-[0.96]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        "data-[dragging=true]:border-brand-primary data-[dragging=true]:bg-brand-secondary/25",
+        isUnavailable && "pointer-events-none cursor-not-allowed opacity-60 active:scale-100",
+        className
+      ),
+      onDragOver: (event) => {
+        event.preventDefault();
+        if (!isUnavailable) setIsDragging(true);
+      },
+      onDragLeave: (event) => {
+        event.preventDefault();
+        setIsDragging(false);
+      },
+      onDrop: (event) => {
+        event.preventDefault();
+        setIsDragging(false);
+        emitFiles(event.dataTransfer.files);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || isUnavailable) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          document.getElementById(resolvedId)?.click();
+        }
+      },
+      onClick: (event) => {
+        if (isUnavailable) {
+          event.preventDefault();
+          return;
+        }
+        onClick?.(event);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            id: resolvedId,
+            name: inputName,
+            type: "file",
+            accept,
+            multiple,
+            disabled: isUnavailable,
+            className: cn("sr-only", inputClassName),
+            onChange: (event) => emitFiles(event.currentTarget.files)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "mb-3 flex size-12 items-center justify-center rounded-xl bg-muted text-muted-foreground",
+              "transition-[background-color,color,scale] duration-150 group-hover:bg-brand-secondary/35 group-hover:text-foreground",
+              "group-data-[dragging=true]:bg-brand-secondary group-data-[dragging=true]:text-foreground"
+            ),
+            "aria-hidden": "true",
+            children: loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : icon ?? /* @__PURE__ */ jsx(Upload, { className: "size-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "body-sm font-medium text-foreground text-balance", children: loading ? loadingText : isDragging ? activeLabel : fileSummary ? fileSummary : label }),
+        description && /* @__PURE__ */ jsx("span", { className: "caption mt-1 max-w-md text-pretty text-muted-foreground", children: description }),
+        fileSummary && !loading && /* @__PURE__ */ jsxs("span", { className: "caption mt-2 inline-flex min-h-7 max-w-full items-center gap-1 rounded-full bg-muted px-2.5 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(File, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: multiple ? "Ready to upload" : "Selected" })
+        ] })
+      ]
+    }
+  );
+}
+FileDropzone.displayName = "FileDropzone";
+var colMap = {
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+var gapMap = {
+  sm: "gap-3",
+  md: "gap-4",
+  lg: "gap-6"
+};
+function GridList({ children, columns = 3, gap = "md", className }) {
+  return /* @__PURE__ */ jsx("ul", { role: "list", className: cn("grid", colMap[columns], gapMap[gap], className), children });
+}
+function GridListCard({
+  title,
+  description,
+  meta,
+  href,
+  accent,
+  trailing,
+  className
+}) {
+  const inner = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full flex-col gap-1 rounded-xl border border-border bg-card p-4 shadow-natural transition-shadow",
+        href && "hover:shadow-elevated",
+        className
+      ),
+      children: [
+        accent && /* @__PURE__ */ jsx("div", { className: "mb-2", children: accent }),
+        /* @__PURE__ */ jsx("p", { className: "body font-semibold text-foreground text-balance", children: title }),
         description && /* @__PURE__ */ jsx("p", { className: "caption text-muted-foreground text-pretty", children: description }),
         (meta || trailing) && /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between pt-3", children: [
           meta && /* @__PURE__ */ jsx("span", { className: "caption text-muted-foreground", children: meta }),
@@ -2493,9 +3323,99 @@ function GridListAccentCard({
 GridList.displayName = "GridList";
 GridListCard.displayName = "GridListCard";
 GridListAccentCard.displayName = "GridListAccentCard";
+function TooltipProvider({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip.Provider, { delayDuration: 300, ...props, children });
+}
+var TooltipRoot = Tooltip.Root;
+var TooltipTrigger = Tooltip.Trigger;
+var TooltipContent = React19.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(
+  Tooltip.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 rounded-lg bg-foreground px-2.5 py-1.5 caption text-background",
+      "animate-in fade-in-0 zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1",
+      "data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = "TooltipContent";
+function HelpTooltip({
+  text,
+  learnMoreUrl,
+  learnMoreURL,
+  placement = "top",
+  className,
+  contentClassName
+}) {
+  const [open, setOpen] = React19.useState(false);
+  const rootRef = React19.useRef(null);
+  const url = learnMoreUrl ?? learnMoreURL;
+  const body = text.length > 120 ? `${text.slice(0, 117)}...` : text;
+  React19.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsx(TooltipRoot, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs("span", { ref: rootRef, className: cn("inline-flex align-middle", className), children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "relative ml-1 inline-flex size-5 items-center justify-center rounded-full text-muted-foreground",
+          "transition-[color,scale] duration-150 hover:text-foreground active:scale-[0.96]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+          "before:absolute before:-inset-2.5 before:content-['']"
+        ),
+        "aria-label": "Help",
+        onClick: (event) => {
+          event.preventDefault();
+          setOpen((current) => !current);
+        },
+        children: /* @__PURE__ */ jsx(CircleHelp, { className: "size-4", "aria-hidden": "true" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      TooltipContent,
+      {
+        side: placement,
+        collisionPadding: 12,
+        className: cn("max-w-xs text-sm", contentClassName),
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-pretty", children: body }),
+          url && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "mt-1 block text-xs font-medium text-brand-primary underline-offset-4 hover:underline",
+              children: "Learn more"
+            }
+          )
+        ]
+      }
+    )
+  ] }) }) });
+}
+HelpTooltip.displayName = "HelpTooltip";
 var HoverCardRoot = HoverCard.Root;
 var HoverCardTrigger = HoverCard.Trigger;
-var HoverCardContent = React17.forwardRef(({ className, align = "center", sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(HoverCard.Portal, { children: /* @__PURE__ */ jsx(
+var HoverCardContent = React19.forwardRef(({ className, align = "center", sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(HoverCard.Portal, { children: /* @__PURE__ */ jsx(
   HoverCard.Content,
   {
     ref,
@@ -2514,7 +3434,7 @@ var HoverCardContent = React17.forwardRef(({ className, align = "center", sideOf
   }
 ) }));
 HoverCardContent.displayName = "HoverCardContent";
-var InputGroup = React17.forwardRef(
+var InputGroup = React19.forwardRef(
   ({
     leadingAddon,
     trailingAddon,
@@ -2597,7 +3517,7 @@ var InputGroup = React17.forwardRef(
   }
 );
 InputGroup.displayName = "InputGroup";
-var InputNumber = React17.forwardRef(
+var InputNumber = React19.forwardRef(
   ({
     value,
     onChange,
@@ -2611,11 +3531,11 @@ var InputNumber = React17.forwardRef(
     disabled,
     ...rest
   }, ref) => {
-    const [text, setText] = React17.useState(value.toFixed(precision));
-    React17.useEffect(() => {
+    const [text, setText] = React19.useState(value.toFixed(precision));
+    React19.useEffect(() => {
       setText(value.toFixed(precision));
     }, [value, precision]);
-    const clamp = React17.useCallback((n) => Math.min(max, Math.max(min, n)), [min, max]);
+    const clamp = React19.useCallback((n) => Math.min(max, Math.max(min, n)), [min, max]);
     const commit = (raw) => {
       const n = parseFloat(raw);
       if (Number.isFinite(n)) {
@@ -2707,7 +3627,7 @@ var InputNumber = React17.forwardRef(
   }
 );
 InputNumber.displayName = "InputNumber";
-var InputOTP = React17.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+var InputOTP = React19.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
   OTPInput,
   {
     ref,
@@ -2717,12 +3637,12 @@ var InputOTP = React17.forwardRef(({ className, containerClassName, ...props },
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React17.forwardRef(
+var InputOTPGroup = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props })
 );
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React17.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React17.useContext(OTPInputContext);
+var InputOTPSlot = React19.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React19.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
   return /* @__PURE__ */ jsxs(
     "div",
@@ -2745,11 +3665,11 @@ var InputOTPSlot = React17.forwardRef(({ index, className, ...props }, ref) => {
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React17.forwardRef(
+var InputOTPSeparator = React19.forwardRef(
   ({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Minus, { size: 14, className: "text-muted-foreground" }) })
 );
 InputOTPSeparator.displayName = "InputOTPSeparator";
-var Kbd = React17.forwardRef(
+var Kbd = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "kbd",
     {
@@ -2763,6 +3683,95 @@ var Kbd = React17.forwardRef(
   )
 );
 Kbd.displayName = "Kbd";
+function MediaAssetCard({
+  name,
+  src,
+  alt = "",
+  meta,
+  details,
+  actions,
+  selected,
+  mediaType = src ? "image" : "file",
+  orientation = "responsive",
+  onSelect,
+  className,
+  onClick,
+  ...props
+}) {
+  const isInteractive = Boolean(onSelect || onClick);
+  const Wrapper = isInteractive ? "button" : "div";
+  const isList = orientation === "list";
+  const isGrid = orientation === "grid";
+  const showImage = Boolean(src && mediaType === "image");
+  const fallbackIcon = mediaType === "image" ? /* @__PURE__ */ jsx(Image, { className: "size-6 text-muted-foreground", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(File, { className: "size-6 text-muted-foreground", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group min-w-0",
+        isGrid && "overflow-hidden rounded-xl border border-border bg-card shadow-natural",
+        isList && "flex gap-3 border-b border-border py-3 last:border-b-0",
+        orientation === "responsive" && "flex gap-3 border-b border-border py-3 last:border-b-0 sm:block sm:overflow-hidden sm:rounded-xl sm:border sm:bg-card sm:py-0 sm:shadow-natural",
+        selected && "ring-2 ring-brand-primary/35",
+        className
+      ),
+      "data-slot": "media-asset-card",
+      "data-selected": selected ? "true" : "false",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          Wrapper,
+          {
+            type: Wrapper === "button" ? "button" : void 0,
+            className: cn(
+              "relative flex shrink-0 items-center justify-center overflow-hidden bg-muted text-left",
+              "transition-[background-color,box-shadow,scale] duration-150",
+              isInteractive && "cursor-pointer active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+              isList && "size-16 rounded-lg",
+              isGrid && "aspect-square w-full",
+              orientation === "responsive" && "size-16 rounded-lg sm:aspect-square sm:size-auto sm:w-full sm:rounded-none"
+            ),
+            onClick: (event) => {
+              onClick?.(event);
+              if (!event.defaultPrevented) onSelect?.();
+            },
+            "aria-label": isInteractive && typeof name === "string" ? name : void 0,
+            children: showImage ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: src ?? void 0,
+                alt,
+                className: "size-full object-cover shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)] dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]"
+              }
+            ) : fallbackIcon
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "min-w-0 flex-1",
+              isGrid && "p-3",
+              isList && "py-0.5",
+              orientation === "responsive" && "py-0.5 sm:p-3"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start justify-between gap-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "line-clamp-2 break-words text-sm font-medium leading-5 text-foreground sm:truncate", children: name }),
+                  meta && /* @__PURE__ */ jsx("p", { className: "caption mt-0.5 truncate text-muted-foreground", children: meta })
+                ] }),
+                actions && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actions })
+              ] }),
+              details && /* @__PURE__ */ jsx("div", { className: "caption mt-2 text-pretty text-muted-foreground", children: details })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+MediaAssetCard.displayName = "MediaAssetCard";
 var alignMap = {
   top: "items-start",
   center: "items-center",
@@ -2799,7 +3808,7 @@ function MediaObject({
   );
 }
 MediaObject.displayName = "MediaObject";
-var MenubarRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarRoot = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Menubar.Root,
   {
     ref,
@@ -2815,7 +3824,7 @@ var MenubarMenu = Menubar.Menu;
 var MenubarGroup = Menubar.Group;
 var MenubarSub = Menubar.Sub;
 var MenubarRadioGroup = Menubar.RadioGroup;
-var MenubarTrigger = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarTrigger = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Menubar.Trigger,
   {
     ref,
@@ -2830,27 +3839,35 @@ var MenubarTrigger = React17.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 MenubarTrigger.displayName = "MenubarTrigger";
-var MenubarContent = React17.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(Menubar.Portal, { children: /* @__PURE__ */ jsx(
-  Menubar.Content,
-  {
-    ref,
-    align,
-    alignOffset,
-    sideOffset,
-    className: cn(
-      "z-50 min-w-[12rem] bg-card rounded-xl shadow-natural p-1",
-      "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=top]:slide-in-from-bottom-2",
-      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-      className
-    ),
-    ...props
-  }
-) }));
+var MenubarContent = React19.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("style", { children: mobilePopperSheetStyle }),
+  /* @__PURE__ */ jsx(Menubar.Portal, { children: /* @__PURE__ */ jsx(
+    Menubar.Content,
+    {
+      ref,
+      "data-hilum-mobile-sheet": "true",
+      align,
+      alignOffset,
+      sideOffset,
+      className: cn(
+        "z-50 min-w-[12rem] bg-card rounded-xl shadow-natural p-1",
+        mobilePopperSheetPositionClassName,
+        mobilePopperSheetSurfaceClassName,
+        "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+        "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",
+        mobilePopperSheetMotionClassName,
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  ) })
+] }));
 MenubarContent.displayName = "MenubarContent";
-var MenubarItem = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarItem = React19.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   Menubar.Item,
   {
     ref,
@@ -2866,7 +3883,7 @@ var MenubarItem = React17.forwardRef(({ className, inset, ...props }, ref) => /*
   }
 ));
 MenubarItem.displayName = "MenubarItem";
-var MenubarCheckboxItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MenubarCheckboxItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   Menubar.CheckboxItem,
   {
     ref,
@@ -2885,7 +3902,7 @@ var MenubarCheckboxItem = React17.forwardRef(({ className, children, ...props },
   }
 ));
 MenubarCheckboxItem.displayName = "MenubarCheckboxItem";
-var MenubarRadioItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MenubarRadioItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   Menubar.RadioItem,
   {
     ref,
@@ -2904,7 +3921,7 @@ var MenubarRadioItem = React17.forwardRef(({ className, children, ...props }, re
   }
 ));
 MenubarRadioItem.displayName = "MenubarRadioItem";
-var MenubarLabel = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarLabel = React19.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   Menubar.Label,
   {
     ref,
@@ -2913,9 +3930,9 @@ var MenubarLabel = React17.forwardRef(({ className, inset, ...props }, ref) => /
   }
 ));
 MenubarLabel.displayName = "MenubarLabel";
-var MenubarSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Menubar.Separator, { ref, className: cn("mx-1 my-1 h-px bg-muted", className), ...props }));
+var MenubarSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Menubar.Separator, { ref, className: cn("mx-1 my-1 h-px bg-muted", className), ...props }));
 MenubarSeparator.displayName = "MenubarSeparator";
-var MenubarSubTrigger = React17.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MenubarSubTrigger = React19.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   Menubar.SubTrigger,
   {
     ref,
@@ -2934,27 +3951,35 @@ var MenubarSubTrigger = React17.forwardRef(({ className, inset, children, ...pro
   }
 ));
 MenubarSubTrigger.displayName = "MenubarSubTrigger";
-var MenubarSubContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Menubar.SubContent,
-  {
-    ref,
-    className: cn(
-      "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
-      "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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-      className
-    ),
-    ...props
-  }
-));
+var MenubarSubContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("style", { children: mobilePopperSheetStyle }),
+  /* @__PURE__ */ jsx(
+    Menubar.SubContent,
+    {
+      ref,
+      "data-hilum-mobile-sheet": "true",
+      className: cn(
+        "z-50 min-w-[8rem] bg-card rounded-xl border border-border shadow-natural p-1",
+        mobilePopperSheetPositionClassName,
+        mobilePopperSheetSurfaceClassName,
+        "max-sm:overflow-y-auto max-sm:px-2 max-sm:pb-2 max-sm:pt-5",
+        "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",
+        mobilePopperSheetMotionClassName,
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
 MenubarSubContent.displayName = "MenubarSubContent";
 function MenubarShortcut({ className, ...props }) {
   return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-muted-foreground", className), ...props });
 }
 MenubarShortcut.displayName = "MenubarShortcut";
-var NativeSelect = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+var NativeSelect = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
   /* @__PURE__ */ jsx(
     "select",
     {
@@ -2980,11 +4005,11 @@ var NativeSelect = React17.forwardRef(({ className, children, ...props }, ref) =
   )
 ] }));
 NativeSelect.displayName = "NativeSelect";
-var NativeSelectOption = React17.forwardRef((props, ref) => /* @__PURE__ */ jsx("option", { ref, ...props }));
+var NativeSelectOption = React19.forwardRef((props, ref) => /* @__PURE__ */ jsx("option", { ref, ...props }));
 NativeSelectOption.displayName = "NativeSelectOption";
-var NativeSelectOptGroup = React17.forwardRef((props, ref) => /* @__PURE__ */ jsx("optgroup", { ref, ...props }));
+var NativeSelectOptGroup = React19.forwardRef((props, ref) => /* @__PURE__ */ jsx("optgroup", { ref, ...props }));
 NativeSelectOptGroup.displayName = "NativeSelectOptGroup";
-var NavigationMenuRoot = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuRoot = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenu.Root,
   {
     ref,
@@ -2994,7 +4019,7 @@ var NavigationMenuRoot = React17.forwardRef(({ className, children, ...props },
   }
 ));
 NavigationMenuRoot.displayName = "NavigationMenu";
-var NavigationMenuList = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuList = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenu.List,
   {
     ref,
@@ -3004,7 +4029,7 @@ var NavigationMenuList = React17.forwardRef(({ className, ...props }, ref) => /*
 ));
 NavigationMenuList.displayName = "NavigationMenuList";
 var NavigationMenuItem = NavigationMenu.Item;
-var NavigationMenuTrigger = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var NavigationMenuTrigger = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   NavigationMenu.Trigger,
   {
     ref,
@@ -3031,7 +4056,7 @@ var NavigationMenuTrigger = React17.forwardRef(({ className, children, ...props
   }
 ));
 NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
-var NavigationMenuContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenu.Content,
   {
     ref,
@@ -3048,7 +4073,7 @@ var NavigationMenuContent = React17.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 NavigationMenuContent.displayName = "NavigationMenuContent";
-var NavigationMenuLink = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuLink = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenu.Link,
   {
     ref,
@@ -3062,7 +4087,7 @@ var NavigationMenuLink = React17.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 NavigationMenuLink.displayName = "NavigationMenuLink";
-var NavigationMenuViewport = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-full flex justify-center", children: /* @__PURE__ */ jsx(
+var NavigationMenuViewport = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-full flex justify-center", children: /* @__PURE__ */ jsx(
   NavigationMenu.Viewport,
   {
     ref,
@@ -3077,7 +4102,7 @@ var NavigationMenuViewport = React17.forwardRef(({ className, ...props }, ref) =
   }
 ) }));
 NavigationMenuViewport.displayName = "NavigationMenuViewport";
-var NavigationMenuIndicator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuIndicator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenu.Indicator,
   {
     ref,
@@ -3179,7 +4204,7 @@ function PageHeading({
   className
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("border-b border-border pb-6", className), children: [
-    breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("nav", { className: "mb-3 flex items-center gap-1.5", "aria-label": "Breadcrumb", children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React17.Fragment, { children: [
+    breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("nav", { className: "mb-3 flex items-center gap-1.5", "aria-label": "Breadcrumb", children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React19.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsx(ChevronRight, { size: 12, className: "text-muted-foreground shrink-0" }),
       crumb.href ? /* @__PURE__ */ jsx(
         "a",
@@ -3236,11 +4261,11 @@ var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React17.forwardRef(
+var PaginationContent = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("ul", { ref, className: cn("flex flex-row items-center gap-1", className), ...props })
 );
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React17.forwardRef(
+var PaginationItem = React19.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props })
 );
 PaginationItem.displayName = "PaginationItem";
@@ -3296,7 +4321,7 @@ var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
   }
 );
 PaginationEllipsis.displayName = "PaginationEllipsis";
-var ProgressRoot = React17.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
+var ProgressRoot = React19.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
   Progress.Root,
   {
     ref,
@@ -3425,9 +4450,9 @@ function RadioCards({ options, value, onValueChange, columns = 3, className }) {
   }) });
 }
 RadioCards.displayName = "RadioCards";
-var RadioGroupRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadioGroup.Root, { ref, className: cn("grid gap-2", className), ...props }));
+var RadioGroupRoot = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadioGroup.Root, { ref, className: cn("grid gap-2", className), ...props }));
 RadioGroupRoot.displayName = "RadioGroup";
-var RadioGroupItem = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var RadioGroupItem = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   RadioGroup.Item,
   {
     ref,
@@ -3491,26 +4516,407 @@ function ResizableHandle({ className, withHandle = true, ...props }) {
   );
 }
 ResizableHandle.displayName = "ResizableHandle";
-var ScrollAreaRoot = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(ScrollArea.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
-  /* @__PURE__ */ jsx(ScrollArea.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
-  /* @__PURE__ */ jsx(ScrollAreaScrollbar, { orientation: "vertical" }),
-  /* @__PURE__ */ jsx(ScrollAreaScrollbar, { orientation: "horizontal" }),
-  /* @__PURE__ */ jsx(ScrollArea.Corner, {})
-] }));
-ScrollAreaRoot.displayName = "ScrollArea";
-var ScrollAreaScrollbar = React17.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
-  ScrollArea.Scrollbar,
+var Separator2 = React19.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+  Separator.Root,
   {
     ref,
+    decorative,
     orientation,
     className: cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2 border-l border-l-transparent p-px",
-      orientation === "horizontal" && "h-2 flex-col border-t border-t-transparent p-px",
+      "shrink-0 bg-muted",
+      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
       className
     ),
-    ...props,
-    children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-muted hover:bg-muted transition-colors" })
+    ...props
+  }
+));
+Separator2.displayName = "Separator";
+function wrapSelectionInline(tag, attrs) {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;
+  const range = selection.getRangeAt(0);
+  const wrapper = document.createElement(tag);
+  Object.entries(attrs ?? {}).forEach(([key, value]) => {
+    wrapper.setAttribute(key, value);
+  });
+  wrapper.appendChild(range.extractContents());
+  range.insertNode(wrapper);
+  selection.removeAllRanges();
+  const nextRange = document.createRange();
+  nextRange.selectNodeContents(wrapper);
+  selection.addRange(nextRange);
+}
+function formatBlock(tag) {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+  const range = selection.getRangeAt(0);
+  let block = range.startContainer;
+  if (block.nodeType === Node.TEXT_NODE) block = block.parentElement;
+  while (block && block.isContentEditable !== true) {
+    const parent = block.parentElement;
+    if (!parent || parent.getAttribute("contenteditable") === "true") break;
+    block = parent;
+  }
+  const nextBlock = document.createElement(tag);
+  if (block && block.getAttribute("contenteditable") !== "true") {
+    nextBlock.innerHTML = block.innerHTML;
+    block.replaceWith(nextBlock);
+  } else {
+    nextBlock.appendChild(range.extractContents());
+    range.insertNode(nextBlock);
+  }
+  selection.removeAllRanges();
+  const nextRange = document.createRange();
+  nextRange.selectNodeContents(nextBlock);
+  selection.addRange(nextRange);
+}
+function insertList(ordered) {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+  const range = selection.getRangeAt(0);
+  const fragment = range.extractContents();
+  const list = document.createElement(ordered ? "ol" : "ul");
+  const children = Array.from(fragment.childNodes);
+  if (children.length === 0) {
+    const item = document.createElement("li");
+    item.innerHTML = "\u200B";
+    list.appendChild(item);
+  } else {
+    children.forEach((child) => {
+      const item = document.createElement("li");
+      item.appendChild(child);
+      list.appendChild(item);
+    });
+  }
+  range.insertNode(list);
+  selection.removeAllRanges();
+  const nextRange = document.createRange();
+  nextRange.selectNodeContents(list);
+  selection.addRange(nextRange);
+}
+function insertElement(element) {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+  const range = selection.getRangeAt(0);
+  range.deleteContents();
+  range.insertNode(element);
+  const nextRange = document.createRange();
+  nextRange.setStartAfter(element);
+  nextRange.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(nextRange);
+}
+function removeFormat() {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;
+  const range = selection.getRangeAt(0);
+  const fragment = range.extractContents();
+  const cleaned = document.createDocumentFragment();
+  Array.from(fragment.childNodes).forEach((child) => {
+    cleaned.appendChild(document.createTextNode(child.textContent ?? ""));
+  });
+  range.insertNode(cleaned);
+}
+function RichTextEditor({
+  value,
+  onChange,
+  placeholder = "Start writing...",
+  minHeight = "200px",
+  id,
+  "aria-label": ariaLabel,
+  className,
+  editorClassName,
+  toolbarClassName,
+  onRequestImageUrl
+}) {
+  const editorRef = React19.useRef(null);
+  const savedRangeRef = React19.useRef(null);
+  const [showLinkInput, setShowLinkInput] = React19.useState(false);
+  const [linkUrl, setLinkUrl] = React19.useState("");
+  React19.useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor || document.activeElement === editor || editor.innerHTML === value) return;
+    editor.innerHTML = value;
+  }, [value]);
+  const emitChange = React19.useCallback(() => {
+    if (editorRef.current) onChange(editorRef.current.innerHTML);
+  }, [onChange]);
+  const saveSelection = React19.useCallback(() => {
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      savedRangeRef.current = selection.getRangeAt(0).cloneRange();
+    }
+  }, []);
+  const restoreSelection = React19.useCallback(() => {
+    const range = savedRangeRef.current;
+    const selection = window.getSelection();
+    if (!range || !selection) return;
+    selection.removeAllRanges();
+    selection.addRange(range);
+    savedRangeRef.current = null;
+  }, []);
+  const runCommand = React19.useCallback(
+    (command, commandValue) => {
+      editorRef.current?.focus();
+      switch (command) {
+        case "bold":
+          wrapSelectionInline("strong");
+          break;
+        case "italic":
+          wrapSelectionInline("em");
+          break;
+        case "underline":
+          wrapSelectionInline("u");
+          break;
+        case "strikeThrough":
+          wrapSelectionInline("s");
+          break;
+        case "formatBlock":
+          if (commandValue) formatBlock(commandValue);
+          break;
+        case "insertUnorderedList":
+          insertList(false);
+          break;
+        case "insertOrderedList":
+          insertList(true);
+          break;
+        case "insertHorizontalRule":
+          insertElement(document.createElement("hr"));
+          break;
+        case "removeFormat":
+          removeFormat();
+          break;
+      }
+      emitChange();
+    },
+    [emitChange]
+  );
+  const insertLink = React19.useCallback(() => {
+    const url = linkUrl.trim();
+    if (!url) return;
+    restoreSelection();
+    wrapSelectionInline("a", { href: url });
+    editorRef.current?.focus();
+    setLinkUrl("");
+    setShowLinkInput(false);
+    emitChange();
+  }, [emitChange, linkUrl, restoreSelection]);
+  const insertImage = React19.useCallback(async () => {
+    const url = await onRequestImageUrl?.() ?? (typeof window !== "undefined" ? window.prompt("Image URL:") : null);
+    if (!url) return;
+    const image = document.createElement("img");
+    image.src = url;
+    image.alt = "";
+    editorRef.current?.focus();
+    insertElement(image);
+    emitChange();
+  }, [emitChange, onRequestImageUrl]);
+  const toolbarGroups = [
+    [
+      { icon: Bold, command: "bold", title: "Bold (Ctrl+B)" },
+      { icon: Italic, command: "italic", title: "Italic (Ctrl+I)" },
+      { icon: Underline, command: "underline", title: "Underline (Ctrl+U)" },
+      { icon: Strikethrough, command: "strikeThrough", title: "Strikethrough" }
+    ],
+    [
+      { icon: Heading1, command: "formatBlock", title: "Heading 1", value: "h1" },
+      { icon: Heading2, command: "formatBlock", title: "Heading 2", value: "h2" },
+      { icon: Heading3, command: "formatBlock", title: "Heading 3", value: "h3" }
+    ],
+    [
+      { icon: List, command: "insertUnorderedList", title: "Bullet list" },
+      { icon: ListOrdered, command: "insertOrderedList", title: "Numbered list" },
+      { icon: AlignLeft, command: "formatBlock", title: "Blockquote", value: "blockquote" },
+      { icon: FileText, command: "formatBlock", title: "Code block", value: "pre" }
+    ]
+  ];
+  const renderToolbarButton = ({
+    icon: Icon,
+    command,
+    title,
+    value: commandValue
+  }) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon",
+      className: "size-10 text-muted-foreground hover:text-foreground",
+      title,
+      "aria-label": title,
+      onMouseDown: (event) => {
+        event.preventDefault();
+        runCommand(command, commandValue);
+      },
+      children: /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": "true" })
+    },
+    `${command}-${title}`
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-xl border border-border bg-card shadow-natural",
+        "focus-within:border-brand-primary/50 focus-within:ring-2 focus-within:ring-brand-primary/25",
+        className
+      ),
+      "data-slot": "rich-text-editor",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-wrap items-center gap-1 border-b border-border bg-muted/40 p-1.5",
+              toolbarClassName
+            ),
+            role: "toolbar",
+            "aria-label": "Text formatting",
+            children: [
+              toolbarGroups.map((group, index) => /* @__PURE__ */ jsxs(React19.Fragment, { children: [
+                index > 0 && /* @__PURE__ */ jsx(Separator2, { orientation: "vertical", className: "mx-1 h-6" }),
+                group.map(renderToolbarButton)
+              ] }, `toolbar-group-${index}`)),
+              /* @__PURE__ */ jsx(Separator2, { orientation: "vertical", className: "mx-1 h-6" }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  className: "size-10 text-muted-foreground hover:text-foreground",
+                  title: "Insert link",
+                  "aria-label": "Insert link",
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    saveSelection();
+                    setShowLinkInput((current) => !current);
+                  },
+                  children: /* @__PURE__ */ jsx(Link, { className: "size-4", "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  className: "size-10 text-muted-foreground hover:text-foreground",
+                  title: "Insert image",
+                  "aria-label": "Insert image",
+                  onMouseDown: (event) => {
+                    event.preventDefault();
+                    void insertImage();
+                  },
+                  children: /* @__PURE__ */ jsx(Image, { className: "size-4", "aria-hidden": "true" })
+                }
+              ),
+              renderToolbarButton({
+                icon: Minus,
+                command: "insertHorizontalRule",
+                title: "Horizontal rule"
+              }),
+              renderToolbarButton({
+                icon: XCircle,
+                command: "removeFormat",
+                title: "Clear formatting"
+              })
+            ]
+          }
+        ),
+        showLinkInput && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-2 border-b border-border bg-muted/60 p-2 sm:flex-row", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "url",
+              value: linkUrl,
+              onChange: (event) => setLinkUrl(event.target.value),
+              placeholder: "https://...",
+              className: "h-10 flex-1 bg-background",
+              onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  insertLink();
+                }
+              },
+              autoFocus: true,
+              "aria-label": "Link URL"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 sm:flex sm:shrink-0", children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", className: "h-10", onClick: insertLink, children: "Insert" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                className: "h-10",
+                onClick: () => setShowLinkInput(false),
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: editorRef,
+            id,
+            contentEditable: true,
+            role: "textbox",
+            "aria-multiline": "true",
+            "aria-label": ariaLabel ?? "Content editor",
+            className: cn(
+              "rich-text-editor-content min-w-0 px-4 py-3 text-sm leading-6 text-foreground outline-none",
+              "empty:before:pointer-events-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]",
+              editorClassName
+            ),
+            style: { minHeight },
+            dangerouslySetInnerHTML: { __html: value },
+            onInput: emitChange,
+            onBlur: emitChange,
+            "data-placeholder": placeholder,
+            suppressContentEditableWarning: true
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+        .rich-text-editor-content h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 0.75rem 0 0.5rem; text-wrap: balance; }
+        .rich-text-editor-content h2 { font-size: 1.25rem; font-weight: 650; line-height: 1.25; margin: 0.75rem 0 0.5rem; text-wrap: balance; }
+        .rich-text-editor-content h3 { font-size: 1.1rem; font-weight: 650; line-height: 1.3; margin: 0.5rem 0 0.25rem; text-wrap: balance; }
+        .rich-text-editor-content blockquote { border-left: 3px solid var(--border); color: var(--muted-foreground); margin: 0.75rem 0; padding-left: 1rem; text-wrap: pretty; }
+        .rich-text-editor-content pre { background: var(--muted); border-radius: 0.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.85rem; margin: 0.75rem 0; overflow-x: auto; padding: 0.75rem; }
+        .rich-text-editor-content a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
+        .rich-text-editor-content img { border-radius: 0.5rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); height: auto; margin: 0.5rem 0; max-width: 100%; }
+        .dark .rich-text-editor-content img { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
+        .rich-text-editor-content hr { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
+        .rich-text-editor-content ul, .rich-text-editor-content ol { margin: 0.5rem 0; padding-left: 1.5rem; }
+        .rich-text-editor-content li { margin: 0.25rem 0; }
+      ` })
+      ]
+    }
+  );
+}
+RichTextEditor.displayName = "RichTextEditor";
+var ScrollAreaRoot = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(ScrollArea.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
+  /* @__PURE__ */ jsx(ScrollArea.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+  /* @__PURE__ */ jsx(ScrollAreaScrollbar, { orientation: "vertical" }),
+  /* @__PURE__ */ jsx(ScrollAreaScrollbar, { orientation: "horizontal" }),
+  /* @__PURE__ */ jsx(ScrollArea.Corner, {})
+] }));
+ScrollAreaRoot.displayName = "ScrollArea";
+var ScrollAreaScrollbar = React19.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollArea.Scrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2 border-l border-l-transparent p-px",
+      orientation === "horizontal" && "h-2 flex-col border-t border-t-transparent p-px",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-muted hover:bg-muted transition-colors" })
   }
 ));
 ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar";
@@ -3550,111 +4956,264 @@ function SectionHeading({
     }
   );
 }
-var SelectRoot = Select.Root;
-var SelectGroup = Select.Group;
-var SelectValue = Select.Value;
-var SelectTrigger = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  Select.Trigger,
-  {
-    ref,
-    className: cn(
-      "flex h-10 w-full items-center justify-between rounded-xl bg-card px-3 py-2",
-      "body text-foreground shadow-natural",
-      "focus:outline-none focus:ring-2 focus:ring-ring/20",
-      "disabled:opacity-50 disabled:cursor-not-allowed",
-      "data-[placeholder]:text-muted-foreground",
-      "[&>span]:line-clamp-1",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: 15, className: "text-muted-foreground shrink-0" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = "SelectTrigger";
-var SelectContent = React17.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(
-  Select.Content,
-  {
-    ref,
-    className: cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden",
-      "bg-card rounded-xl shadow-natural p-1",
-      "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=top]:slide-in-from-bottom-2",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
-      className
-    ),
-    position,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(Select.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronUp, { size: 14, className: "text-muted-foreground" }) }),
-      /* @__PURE__ */ jsx(
-        Select.Viewport,
-        {
-          className: cn(
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
+function StackedList({ children, divided = true, bordered = true, className }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      role: "list",
+      className: cn(
+        "overflow-hidden rounded-xl bg-card",
+        bordered && "border border-border shadow-natural",
+        divided && "divide-y divide-border",
+        className
       ),
-      /* @__PURE__ */ jsx(Select.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: "text-muted-foreground" }) })
-    ]
+      children
+    }
+  );
+}
+function StackedListItem({ children, href, onClick, className }) {
+  const inner = /* @__PURE__ */ jsx("div", { className: cn("px-4 py-3.5", className), children });
+  if (href) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href, className: "block hover:bg-muted transition-colors", children: inner }) });
   }
-) }));
-SelectContent.displayName = "SelectContent";
-var SelectItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  Select.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex min-h-10 w-full cursor-default select-none items-center rounded-md px-2.5 py-2",
-      "body text-muted-foreground outline-none",
-      "focus:bg-muted focus:text-foreground",
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-foreground" }) }) }),
-      /* @__PURE__ */ jsx(Select.ItemText, { children })
-    ]
+  if (onClick) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "w-full text-left hover:bg-muted transition-colors",
+        onClick,
+        children: inner
+      }
+    ) });
   }
-));
-SelectItem.displayName = "SelectItem";
-var SelectLabel = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Select.Label,
-  {
-    ref,
-    className: cn("px-2.5 py-1 label text-muted-foreground", className),
-    ...props
+  return /* @__PURE__ */ jsx("li", { children: inner });
+}
+function appendSearchableValue(value, parts, depth = 0) {
+  if (value == null || depth > 2) return;
+  if (value instanceof Date) {
+    parts.push(value.toISOString());
+    return;
   }
-));
-SelectLabel.displayName = "SelectLabel";
-var SelectSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.Separator, { ref, className: cn("mx-1 my-1 h-px bg-muted", className), ...props }));
-SelectSeparator.displayName = "SelectSeparator";
-var Separator2 = React17.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
-  Separator.Root,
-  {
-    ref,
-    decorative,
-    orientation,
-    className: cn(
-      "shrink-0 bg-muted",
-      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-      className
-    ),
-    ...props
+  if (["string", "number", "boolean"].includes(typeof value)) {
+    parts.push(String(value));
+    return;
   }
-));
-Separator2.displayName = "Separator";
+  if (Array.isArray(value)) {
+    value.forEach((entry) => appendSearchableValue(entry, parts, depth + 1));
+    return;
+  }
+  if (typeof value === "object") {
+    Object.values(value).forEach(
+      (entry) => appendSearchableValue(entry, parts, depth + 1)
+    );
+  }
+}
+function getSearchableText(item) {
+  const parts = [];
+  appendSearchableValue(item, parts);
+  return parts.join(" ").toLowerCase();
+}
+function normalizeEmptyStateIcon(icon) {
+  return icon ? /* @__PURE__ */ jsx("span", { className: "flex [&_svg]:size-5", children: icon }) : void 0;
+}
+function SearchableTable({
+  data,
+  columns,
+  searchPlaceholder = "Search...",
+  searchTerm,
+  onSearchChange,
+  filters = {},
+  emptyState,
+  actions,
+  mobileCard,
+  tableClassName,
+  pagination
+}) {
+  const [sort, setSort] = React19.useState(null);
+  const rows = React19.useMemo(() => Array.isArray(data) ? data : [], [data]);
+  const normalizedSearchTerm = searchTerm.trim().toLowerCase();
+  const filteredRows = React19.useMemo(() => {
+    if (!normalizedSearchTerm) return rows;
+    return rows.filter((item) => getSearchableText(item).includes(normalizedSearchTerm));
+  }, [normalizedSearchTerm, rows]);
+  const sortedData = React19.useMemo(() => {
+    if (!sort) return filteredRows;
+    const column = columns.find((candidate) => candidate.key === sort.key);
+    if (!column || !column.sortable && !column.sortAccessor) return filteredRows;
+    const directionMultiplier = sort.direction === "asc" ? 1 : -1;
+    const getSortValue = (item) => column.sortAccessor?.(item) ?? item[column.key];
+    return [...filteredRows].sort((left, right) => {
+      const leftValue = getSortValue(left);
+      const rightValue = getSortValue(right);
+      if (leftValue == null && rightValue == null) return 0;
+      if (leftValue == null) return 1;
+      if (rightValue == null) return -1;
+      const leftComparable = leftValue instanceof Date ? leftValue.getTime() : leftValue;
+      const rightComparable = rightValue instanceof Date ? rightValue.getTime() : rightValue;
+      if (typeof leftComparable === "number" && typeof rightComparable === "number") {
+        return (leftComparable - rightComparable) * directionMultiplier;
+      }
+      return String(leftComparable).localeCompare(String(rightComparable), void 0, {
+        numeric: true,
+        sensitivity: "base"
+      }) * directionMultiplier;
+    });
+  }, [columns, filteredRows, sort]);
+  const pageSize = pagination?.pageSize ?? 10;
+  const currentPage = pagination?.currentPage ?? 1;
+  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
+  const startIndex = (currentPage - 1) * pageSize;
+  const displayData = pagination ? sortedData.slice(startIndex, startIndex + pageSize) : sortedData;
+  const toggleSort = (column) => {
+    if (!column.sortable && !column.sortAccessor) return;
+    setSort(
+      (current) => current?.key === column.key ? { key: column.key, direction: current.direction === "asc" ? "desc" : "asc" } : { key: column.key, direction: "asc" }
+    );
+  };
+  const renderEmptyState = (className) => /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      title: emptyState?.title ?? "No results found",
+      description: emptyState?.description ?? "Try changing the search or filters.",
+      ...className ? { className } : {},
+      ...emptyState?.icon ? { icon: normalizeEmptyStateIcon(emptyState.icon) } : {},
+      ...emptyState?.action ? { action: emptyState.action } : {}
+    }
+  );
+  const renderPagination = () => {
+    if (!pagination || totalPages <= 1) return null;
+    const pages = [];
+    const showEllipsis = totalPages > 7;
+    if (showEllipsis) {
+      pages.push(1);
+      if (currentPage > 4) pages.push("ellipsis-start");
+      for (let page = Math.max(2, currentPage - 1); page <= Math.min(totalPages - 1, currentPage + 1); page++) {
+        pages.push(page);
+      }
+      if (currentPage < totalPages - 3) pages.push("ellipsis-end");
+      pages.push(totalPages);
+    } else {
+      for (let page = 1; page <= totalPages; page++) pages.push(page);
+    }
+    return /* @__PURE__ */ jsx("div", { className: "mt-6 flex justify-center", children: /* @__PURE__ */ jsx(Pagination, { children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+        PaginationPrevious,
+        {
+          onClick: () => pagination.onPageChange(Math.max(1, currentPage - 1)),
+          className: currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"
+        }
+      ) }),
+      pages.map((page, index) => /* @__PURE__ */ jsx(PaginationItem, { children: page === "ellipsis-start" || page === "ellipsis-end" ? /* @__PURE__ */ jsx(PaginationEllipsis, {}) : /* @__PURE__ */ jsx(
+        PaginationLink,
+        {
+          onClick: () => pagination.onPageChange(page),
+          isActive: currentPage === page,
+          className: "cursor-pointer",
+          children: page
+        }
+      ) }, `${page}-${index}`)),
+      /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+        PaginationNext,
+        {
+          onClick: () => pagination.onPageChange(Math.min(totalPages, currentPage + 1)),
+          className: currentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"
+        }
+      ) })
+    ] }) }) });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "md:rounded-lg md:border md:border-border md:bg-muted/30 md:p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 md:flex-row md:flex-wrap md:items-center md:justify-start md:gap-3", children: [
+      /* @__PURE__ */ jsx(
+        InputGroup,
+        {
+          placeholder: searchPlaceholder,
+          value: searchTerm,
+          onChange: (event) => onSearchChange(event.target.value),
+          leadingIcon: /* @__PURE__ */ jsx(Search, { className: "size-4" }),
+          wrapperClassName: "w-full min-w-0 md:min-w-[280px] md:max-w-[520px] md:flex-1 md:basis-[340px]",
+          className: "h-9 bg-background"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 flex-col gap-2 sm:flex-row sm:flex-wrap md:w-auto md:justify-end", children: Object.entries(filters).map(([key, filter]) => /* @__PURE__ */ jsxs(SelectRoot, { value: filter.value, onValueChange: filter.onChange, children: [
+        /* @__PURE__ */ jsxs(SelectTrigger, { className: "h-9 w-full bg-background sm:w-[180px]", children: [
+          /* @__PURE__ */ jsx(Filter, { className: "mr-2 size-4" }),
+          /* @__PURE__ */ jsx(SelectValue, { placeholder: filter.placeholder })
+        ] }),
+        /* @__PURE__ */ jsx(SelectContent, { children: filter.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+      ] }, key)) })
+    ] }) }),
+    /* @__PURE__ */ jsx(StackedList, { bordered: false, className: "rounded-none bg-transparent md:hidden", children: displayData.length === 0 ? renderEmptyState("px-0 py-9") : displayData.map((item) => {
+      if (mobileCard) {
+        return /* @__PURE__ */ jsx(StackedListItem, { className: "px-0 py-0", children: mobileCard(item) }, item.id);
+      }
+      const primaryColumn = columns.find((column) => column.label.trim()) ?? columns[0];
+      const secondaryColumns = columns.filter((column) => column.key !== primaryColumn?.key && column.label).slice(0, 5);
+      return /* @__PURE__ */ jsxs(StackedListItem, { className: "px-0 py-2.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: primaryColumn && /* @__PURE__ */ jsx("div", { className: "min-w-0 text-sm font-semibold text-foreground [&_*]:min-w-0", children: primaryColumn.render ? primaryColumn.render(item) : item[primaryColumn.key] }) }),
+          actions && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actions(item) })
+        ] }),
+        secondaryColumns.length > 0 && /* @__PURE__ */ jsx("dl", { className: "mt-2 divide-y divide-border/70 border-y border-border/70 text-xs", children: secondaryColumns.map((column) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "grid min-w-0 grid-cols-[6.25rem_minmax(0,1fr)] gap-2 py-1.5",
+            children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: column.label }),
+              /* @__PURE__ */ jsx("dd", { className: "min-w-0 break-words text-foreground", children: column.render ? column.render(item) : item[column.key] })
+            ]
+          },
+          column.key
+        )) })
+      ] }, item.id);
+    }) }),
+    displayData.length === 0 ? /* @__PURE__ */ jsx("div", { className: "hidden min-h-[18rem] items-center justify-center border-t border-border/60 md:flex", children: renderEmptyState("px-6 py-12") }) : /* @__PURE__ */ jsxs(Table, { containerClassName: "hidden overflow-x-auto md:block", className: cn("min-w-full", tableClassName), children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { className: "relative border-b-0 bg-muted/80 transition-colors hover:bg-muted/80", children: [
+        columns.map((column) => {
+          const isSortable = Boolean(column.sortable || column.sortAccessor);
+          const isSorted = sort?.key === column.key;
+          const SortIcon = !isSorted ? ChevronsUpDown : sort.direction === "asc" ? ArrowUp : ArrowDown;
+          return /* @__PURE__ */ jsx(
+            TableHead,
+            {
+              className: cn(
+                "cursor-default select-none whitespace-nowrap px-4 py-3 text-xs font-medium text-muted-foreground transition-colors",
+                column.className
+              ),
+              "aria-sort": isSortable ? isSorted ? sort.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
+              children: isSortable ? /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: "-ml-2 h-auto px-2 py-1 text-xs font-medium",
+                  onClick: () => toggleSort(column),
+                  "aria-label": `Sort by ${column.label}`,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: column.label }),
+                    /* @__PURE__ */ jsx(SortIcon, { className: "size-3.5" })
+                  ]
+                }
+              ) : column.label
+            },
+            column.key
+          );
+        }),
+        actions && /* @__PURE__ */ jsx(TableHead, { className: "w-32 cursor-default select-none whitespace-nowrap px-4 py-3 text-xs font-medium text-muted-foreground", children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: displayData.map((item, index) => /* @__PURE__ */ jsxs(TableRow, { className: cn(index === 0 && "border-t-0"), children: [
+        columns.map((column) => /* @__PURE__ */ jsx(TableCell, { className: cn("py-3", column.className), children: column.render ? column.render(item) : item[column.key] }, column.key)),
+        actions && /* @__PURE__ */ jsx(TableCell, { className: "w-32 whitespace-nowrap py-3", children: actions(item) })
+      ] }, item.id)) })
+    ] }),
+    renderPagination()
+  ] });
+}
 var SheetRoot = Dialog.Root;
 var SheetTrigger = Dialog.Trigger;
 var SheetClose = Dialog.Close;
-var SheetOverlay = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Dialog.Overlay,
   {
     ref,
@@ -3688,7 +5247,7 @@ var sheetContentVariants = cva(
     }
   }
 );
-var SheetContent = React17.forwardRef(
+var SheetContent = React19.forwardRef(
   ({ className, children, side = "right", ...props }, ref) => /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
     /* @__PURE__ */ jsxs(
@@ -3717,7 +5276,7 @@ function SheetFooter({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-end gap-2 mt-6", className), ...props });
 }
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Dialog.Title,
   {
     ref,
@@ -3726,7 +5285,7 @@ var SheetTitle = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = "SheetTitle";
-var SheetDescription = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Dialog.Description,
   {
     ref,
@@ -3735,37 +5294,27 @@ var SheetDescription = React17.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 SheetDescription.displayName = "SheetDescription";
-function TooltipProvider({
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Tooltip.Provider, { delayDuration: 300, ...props, children });
-}
-var TooltipRoot = Tooltip.Root;
-var TooltipTrigger = Tooltip.Trigger;
-var TooltipContent = React17.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(
-  Tooltip.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 rounded-lg bg-foreground px-2.5 py-1.5 caption text-background",
-      "animate-in fade-in-0 zoom-in-95",
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-      "data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1",
-      "data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1",
-      className
-    ),
-    ...props
-  }
-) }));
-TooltipContent.displayName = "TooltipContent";
 var SIDEBAR_COOKIE_NAME = "sidebar:state";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
+var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3.5rem";
-var SidebarContext = React17.createContext(null);
+var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React19.useState(false);
+  React19.useEffect(() => {
+    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => setIsMobile(mediaQuery.matches);
+    onChange();
+    mediaQuery.addEventListener("change", onChange);
+    return () => mediaQuery.removeEventListener("change", onChange);
+  }, []);
+  return isMobile;
+}
+var SidebarContext = React19.createContext(null);
 function useSidebar() {
-  const ctx = React17.useContext(SidebarContext);
+  const ctx = React19.useContext(SidebarContext);
   if (!ctx) throw new Error("useSidebar must be used inside SidebarProvider");
   return ctx;
 }
@@ -3778,26 +5327,51 @@ function SidebarProvider({
   children,
   ...props
 }) {
-  const [_open, _setOpen] = React17.useState(defaultOpen);
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React19.useState(false);
+  const [_open, _setOpen] = React19.useState(defaultOpen);
   const open = openProp !== void 0 ? openProp : _open;
-  const setOpen = React17.useCallback(
+  const setOpen = React19.useCallback(
     (value) => {
+      const nextOpen = typeof value === "function" ? value(open) : value;
       if (onOpenChange) {
-        onOpenChange(value);
+        onOpenChange(nextOpen);
       } else {
-        _setOpen(value);
+        _setOpen(nextOpen);
       }
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${60 * 60 * 24 * 7}`;
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${nextOpen}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
-    [onOpenChange]
+    [onOpenChange, open]
   );
-  const toggleSidebar = React17.useCallback(() => {
-    setOpen(!open);
-  }, [open, setOpen]);
+  const toggleSidebar = React19.useCallback(() => {
+    if (isMobile) {
+      setOpenMobile((currentOpen) => !currentOpen);
+      return;
+    }
+    setOpen((currentOpen) => !currentOpen);
+  }, [isMobile, setOpen]);
+  React19.useEffect(() => {
+    function handleKeyDown(event) {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React17.useMemo(
-    () => ({ state, open, setOpen, toggleSidebar }),
-    [state, open, setOpen, toggleSidebar]
+  const contextValue = React19.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      openMobile,
+      setOpenMobile,
+      isMobile,
+      toggleSidebar
+    }),
+    [state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar]
   );
   return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
     "div",
@@ -3807,6 +5381,7 @@ function SidebarProvider({
       className: cn("group/sidebar-wrapper flex min-h-svh w-full", className),
       style: {
         "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-mobile": SIDEBAR_WIDTH_MOBILE,
         "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
         ...style
       },
@@ -3823,7 +5398,7 @@ function Sidebar({
   children,
   ...props
 }) {
-  const { state } = useSidebar();
+  const { state, isMobile, openMobile, setOpenMobile } = useSidebar();
   if (collapsible === "none") {
     return /* @__PURE__ */ jsx(
       "aside",
@@ -3841,6 +5416,27 @@ function Sidebar({
       }
     );
   }
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(SheetRoot, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs(
+      SheetContent,
+      {
+        "data-sidebar": "sidebar",
+        "data-mobile": "true",
+        side,
+        className: cn(
+          "w-(--sidebar-width-mobile) max-w-[85dvw] bg-card p-0 text-foreground [&>button]:hidden",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) });
+  }
   if (collapsible === "offcanvas") {
     return /* @__PURE__ */ jsx(
       "aside",
@@ -3930,7 +5526,7 @@ function SidebarInset({ className, ...props }) {
     "main",
     {
       "data-sidebar": "inset",
-      className: cn("relative flex min-h-svh flex-1 flex-col bg-card overflow-hidden", className),
+      className: cn("relative flex min-h-svh flex-1 flex-col overflow-hidden bg-background", className),
       ...props
     }
   );
@@ -3975,6 +5571,16 @@ function SidebarSeparator({ className, ...props }) {
     }
   );
 }
+function SidebarInput({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-sidebar": "input",
+      className: cn("h-8 w-full bg-background shadow-none", className),
+      ...props
+    }
+  );
+}
 function SidebarGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -4154,7 +5760,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React17.useMemo(() => {
+  const width = React19.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -4237,7 +5843,7 @@ function Skeleton({ className, ...props }) {
     }
   );
 }
-var SliderRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SliderRoot = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
   Slider.Root,
   {
     ref,
@@ -4272,94 +5878,205 @@ function Toaster({ ...props }) {
     }
   );
 }
-var spinnerVariants = cva(
-  "inline-block animate-spin rounded-full border-2 border-current border-t-transparent",
-  {
-    variants: {
-      size: {
-        xs: "size-3",
-        sm: "size-4",
-        default: "size-5",
-        lg: "size-6",
-        xl: "size-8"
-      }
-    },
-    defaultVariants: {
-      size: "default"
+function StatCard({
+  label,
+  title,
+  value,
+  trend,
+  icon,
+  children,
+  actionButtons,
+  className,
+  containerClassName,
+  titleClassName,
+  valueClassName
+}) {
+  const displayLabel = title ?? label;
+  const trendColor = {
+    up: "text-muted-foreground bg-brand-secondary/30 rounded-full px-2 py-0.5 w-fit",
+    down: "text-destructive",
+    neutral: "text-muted-foreground"
+  };
+  const TrendIcon = {
+    up: TrendingUp,
+    down: TrendingDown,
+    neutral: Minus
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "min-w-0 rounded-xl border border-border bg-card p-4 shadow-natural sm:p-5",
+        containerClassName,
+        className
+      ),
+      "data-slot": "stat-card",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          displayLabel && /* @__PURE__ */ jsx("p", { className: cn("label min-w-0 text-muted-foreground", titleClassName), children: displayLabel }),
+          icon && /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: icon }),
+          actionButtons && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actionButtons })
+        ] }),
+        value !== void 0 ? /* @__PURE__ */ jsx("p", { className: cn("heading-xl mt-2 tabular-nums text-foreground", valueClassName), children: value }) : children ? /* @__PURE__ */ jsx("div", { className: "mt-2", children }) : null,
+        trend && (() => {
+          const Icon = TrendIcon[trend.direction];
+          return /* @__PURE__ */ jsxs("div", { className: cn("mt-2 flex items-center gap-1", trendColor[trend.direction]), children: [
+            /* @__PURE__ */ jsx(Icon, { size: 12 }),
+            /* @__PURE__ */ jsx("span", { className: "caption tabular-nums font-medium", children: trend.value })
+          ] });
+        })()
+      ]
     }
-  }
-);
-function Spinner({ className, size, ...props }) {
+  );
+}
+StatCard.displayName = "StatCard";
+function StatCardSlot({ onAddCard, className, label = "Add card" }) {
   return /* @__PURE__ */ jsx(
-    "span",
+    "button",
     {
-      role: "status",
-      "aria-label": "Loading",
-      className: cn(spinnerVariants({ size }), className),
-      ...props
+      type: "button",
+      className: cn(
+        "flex min-h-28 w-full min-w-0 items-center justify-center rounded-xl border border-dashed border-border bg-card p-4 text-muted-foreground shadow-natural",
+        "transition-[background-color,border-color,color,scale] duration-150 hover:border-ground-300 hover:bg-muted hover:text-foreground active:scale-[0.96]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        className
+      ),
+      onClick: onAddCard,
+      children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(Plus, { className: "size-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "caption font-medium", children: label })
+      ] })
     }
   );
 }
-function StackedList({ children, divided = true, bordered = true, className }) {
-  return /* @__PURE__ */ jsx(
-    "ul",
+StatCardSlot.displayName = "StatCardSlot";
+function StatCardGrid({
+  children,
+  maxSlots = 6,
+  onAddCard,
+  className,
+  showEmptySlots = false
+}) {
+  const childrenArray = React19.Children.toArray(children);
+  const emptySlots = showEmptySlots ? Math.max(0, maxSlots - childrenArray.length) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      role: "list",
       className: cn(
-        "overflow-hidden rounded-xl bg-card",
-        bordered && "border border-border shadow-natural",
-        divided && "divide-y divide-border",
+        "grid min-w-0 grid-cols-2 items-stretch gap-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6",
         className
       ),
-      children
+      "data-slot": "stat-card-grid",
+      children: [
+        childrenArray.map((child, index) => /* @__PURE__ */ jsx("div", { className: "min-w-0", children: child }, `filled-${index}`)),
+        Array.from({ length: emptySlots }, (_, index) => /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(StatCardSlot, { ...onAddCard ? { onAddCard } : {} }) }, `empty-${index}`))
+      ]
     }
   );
 }
-function StackedListItem({ children, href, onClick, className }) {
-  const inner = /* @__PURE__ */ jsx("div", { className: cn("px-4 py-3.5", className), children });
-  if (href) {
-    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href, className: "block hover:bg-muted transition-colors", children: inner }) });
-  }
-  if (onClick) {
-    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "w-full text-left hover:bg-muted transition-colors",
-        onClick,
-        children: inner
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsx("li", { children: inner });
+StatCardGrid.displayName = "StatCardGrid";
+var DEFAULT_STATUS_VARIANT = {
+  active: "success",
+  approved: "success",
+  complete: "success",
+  completed: "success",
+  confirmed: "success",
+  delivered: "success",
+  enabled: "success",
+  healthy: "success",
+  optimized: "success",
+  paid: "success",
+  published: "success",
+  resolved: "success",
+  translated: "success",
+  verified: "success",
+  degraded: "warning",
+  flagged: "warning",
+  held_for_review: "warning",
+  pending: "warning",
+  processing: "warning",
+  retrying: "warning",
+  scheduled: "warning",
+  trial: "warning",
+  warning: "warning",
+  archived: "secondary",
+  disabled: "secondary",
+  draft: "secondary",
+  inactive: "secondary",
+  missing: "secondary",
+  neutral: "secondary",
+  skipped: "secondary",
+  blocked: "destructive",
+  cancelled: "destructive",
+  critical: "destructive",
+  dead_letter: "destructive",
+  deleted: "destructive",
+  error: "destructive",
+  failed: "destructive",
+  rejected: "destructive",
+  suspended: "destructive",
+  unpaid: "destructive",
+  outdated: "destructive"
+};
+var DEFAULT_DOT_CLASS = {
+  default: "bg-background",
+  secondary: "bg-muted-foreground",
+  outline: "bg-muted-foreground",
+  brand: "bg-background",
+  success: "bg-emerald-500",
+  warning: "bg-amber-500",
+  destructive: "bg-destructive"
+};
+function normalizeStatus(status) {
+  return String(status ?? "unknown").trim().toLowerCase().replace(/[\s-]+/g, "_");
 }
-function StatCard({ label, value, trend, icon, className }) {
-  const trendColor = {
-    up: "text-muted-foreground bg-brand-secondary/30 rounded-full px-2 py-0.5 w-fit",
-    down: "text-destructive",
-    neutral: "text-muted-foreground"
-  };
-  const TrendIcon = {
-    up: TrendingUp,
-    down: TrendingDown,
-    neutral: Minus
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border border-border bg-card p-5", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "label text-muted-foreground", children: label }),
-      icon && /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: icon })
-    ] }),
-    /* @__PURE__ */ jsx("p", { className: "heading-xl mt-2 tabular-nums text-foreground", children: value }),
-    trend && (() => {
-      const Icon = TrendIcon[trend.direction];
-      return /* @__PURE__ */ jsxs("div", { className: cn("mt-2 flex items-center gap-1", trendColor[trend.direction]), children: [
-        /* @__PURE__ */ jsx(Icon, { size: 12 }),
-        /* @__PURE__ */ jsx("span", { className: "caption tabular-nums font-medium", children: trend.value })
-      ] });
-    })()
-  ] });
+function statusLabel(status) {
+  const normalized = normalizeStatus(status);
+  if (normalized === "unknown") return "Unknown";
+  return normalized.split("_").filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
 }
-StatCard.displayName = "StatCard";
+function statusBadgeVariantFor(status, variantMap) {
+  const normalized = normalizeStatus(status);
+  return variantMap?.[normalized] ?? DEFAULT_STATUS_VARIANT[normalized] ?? "outline";
+}
+function StatusBadge({
+  status,
+  label,
+  variant,
+  variantMap,
+  labelMap,
+  showDot = false,
+  dotClassName,
+  className,
+  ...props
+}) {
+  const normalized = normalizeStatus(status);
+  const resolvedVariant = variant ?? statusBadgeVariantFor(normalized, variantMap);
+  const resolvedLabel = label ?? labelMap?.[normalized] ?? statusLabel(normalized);
+  return /* @__PURE__ */ jsxs(
+    Badge,
+    {
+      variant: resolvedVariant,
+      className: cn("max-w-full whitespace-nowrap", showDot && "pl-2", className),
+      ...props,
+      children: [
+        showDot && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "size-1.5 shrink-0 rounded-full",
+              DEFAULT_DOT_CLASS[resolvedVariant],
+              dotClassName
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: resolvedLabel })
+      ]
+    }
+  );
+}
+StatusBadge.displayName = "StatusBadge";
 function CirclesSteps({ steps, className }) {
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Progress", className, children: /* @__PURE__ */ jsx("ol", { role: "list", className: "flex items-center", children: steps.map((step, i) => {
     const isLast = i === steps.length - 1;
@@ -4490,7 +6207,7 @@ function Steps({ steps, variant = "circles", className }) {
   return /* @__PURE__ */ jsx(CirclesSteps, { steps, ...classNameProp });
 }
 Steps.displayName = "Steps";
-var SwitchRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SwitchRoot = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Switch.Root,
   {
     ref,
@@ -4515,9 +6232,9 @@ var SwitchRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SwitchRoot.displayName = "Switch";
-var TabsRoot = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Tabs.Root, { ref, className: cn("w-full", className), ...props }));
+var TabsRoot = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Tabs.Root, { ref, className: cn("w-full", className), ...props }));
 TabsRoot.displayName = "Tabs";
-var TabsList = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsList = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Tabs.List,
   {
     ref,
@@ -4526,7 +6243,7 @@ var TabsList = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = "TabsList";
-var TabsTrigger = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsTrigger = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Tabs.Trigger,
   {
     ref,
@@ -4543,7 +6260,7 @@ var TabsTrigger = React17.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Tabs.Content, { ref, className: cn("mt-4", className), ...props }));
+var TabsContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Tabs.Content, { ref, className: cn("mt-4", className), ...props }));
 TabsContent.displayName = "TabsContent";
 function Textarea({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -4562,6 +6279,73 @@ function Textarea({ className, ...props }) {
     }
   );
 }
+function TitledCard({
+  title,
+  subtitle,
+  children,
+  actionButtons,
+  icon: Icon,
+  className,
+  contentClassName,
+  containerClassName,
+  titleClassName
+}) {
+  const hasHeader = Boolean(title || subtitle || actionButtons);
+  const canUseCardHeading = Boolean(title) && !actionButtons && !titleClassName;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "min-w-0 overflow-hidden border border-border bg-card shadow-natural",
+        "max-sm:rounded-none max-sm:border-0 max-sm:bg-transparent max-sm:shadow-none",
+        containerClassName,
+        className
+      ),
+      "data-slot": "titled-card",
+      children: [
+        canUseCardHeading ? /* @__PURE__ */ jsx(
+          CardHeading,
+          {
+            title,
+            ...subtitle ? { description: subtitle } : {},
+            className: "max-sm:border-b-0 max-sm:px-0 max-sm:pb-3",
+            children: Icon && /* @__PURE__ */ jsx(Icon, { className: "size-5 shrink-0 text-muted-foreground" })
+          }
+        ) : hasHeader ? /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-col gap-3 border-b border-border p-4 max-sm:border-b-0 max-sm:px-0 max-sm:pb-3 sm:flex-row sm:items-start sm:justify-between sm:p-5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ jsxs(
+              CardTitle,
+              {
+                className: cn(
+                  "flex min-w-0 items-center gap-2 text-base leading-tight sm:text-lg",
+                  titleClassName
+                ),
+                children: [
+                  Icon && /* @__PURE__ */ jsx(Icon, { className: "size-5 shrink-0 text-muted-foreground" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: title })
+                ]
+              }
+            ),
+            subtitle && /* @__PURE__ */ jsx(CardDescription, { className: "mt-1 max-w-3xl text-sm leading-5", children: subtitle })
+          ] }),
+          actionButtons && /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 flex-wrap items-center gap-2 sm:w-auto sm:justify-end", children: actionButtons })
+        ] }) : null,
+        children && /* @__PURE__ */ jsx(
+          CardContent,
+          {
+            className: cn(
+              hasHeader ? "p-4 sm:p-5" : "p-0 sm:p-5",
+              "min-w-0 max-sm:px-0",
+              contentClassName
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+TitledCard.displayName = "TitledCard";
 var toggleVariants = cva(
   [
     "inline-flex shrink-0 items-center justify-center gap-2",
@@ -4605,7 +6389,7 @@ var toggleVariants = cva(
     }
   }
 );
-var ToggleRoot = React17.forwardRef(
+var ToggleRoot = React19.forwardRef(
   ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
     Toggle.Root,
     {
@@ -4616,11 +6400,11 @@ var ToggleRoot = React17.forwardRef(
   )
 );
 ToggleRoot.displayName = "Toggle";
-var ToggleGroupContext = React17.createContext({
+var ToggleGroupContext = React19.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroupRoot = React17.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var ToggleGroupRoot = React19.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
   ToggleGroup.Root,
   {
     ref,
@@ -4630,8 +6414,8 @@ var ToggleGroupRoot = React17.forwardRef(({ className, variant, size, children,
   }
 ));
 ToggleGroupRoot.displayName = "ToggleGroup";
-var ToggleGroupItem = React17.forwardRef(({ className, variant, size, ...props }, ref) => {
-  const context = React17.useContext(ToggleGroupContext);
+var ToggleGroupItem = React19.forwardRef(({ className, variant, size, ...props }, ref) => {
+  const context = React19.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroup.Item,
     {
@@ -4648,7 +6432,58 @@ var ToggleGroupItem = React17.forwardRef(({ className, variant, size, ...props }
   );
 });
 ToggleGroupItem.displayName = "ToggleGroupItem";
+function normalizeUrlHandle(value) {
+  return String(value || "").trim().replace(/^\/+|\/+$/g, "");
+}
+function urlResourcePath(prefix, handle) {
+  const cleanPrefix = normalizeUrlHandle(prefix);
+  const cleanHandle = normalizeUrlHandle(handle);
+  if (!cleanPrefix || !cleanHandle) return "";
+  return `/${cleanPrefix}/${cleanHandle}`;
+}
+function hasUrlHandleChanged(originalHandle, nextHandle) {
+  const original = normalizeUrlHandle(originalHandle || "");
+  const next = normalizeUrlHandle(nextHandle || "");
+  return Boolean(original && next && original !== next);
+}
+function UrlRedirectPrompt({
+  originalHandle,
+  nextHandle,
+  pathPrefix,
+  checked,
+  onCheckedChange,
+  title = "Create URL redirect",
+  description,
+  switchLabel = "Create URL redirect",
+  className
+}) {
+  if (!hasUrlHandleChanged(originalHandle, nextHandle)) return null;
+  const fromPath = urlResourcePath(pathPrefix, originalHandle || "");
+  const toPath = urlResourcePath(pathPrefix, nextHandle || "");
+  const calloutProps = className ? { className } : {};
+  return /* @__PURE__ */ jsx(
+    Callout,
+    {
+      tone: "warning",
+      compact: true,
+      icon: /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": "true" }),
+      title,
+      actions: /* @__PURE__ */ jsx(SwitchRoot, { checked, onCheckedChange, "aria-label": switchLabel }),
+      ...calloutProps,
+      children: description || /* @__PURE__ */ jsxs("p", { className: "body-sm text-pretty text-muted-foreground", children: [
+        "Preserve search rankings and old links by redirecting",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground", children: fromPath }),
+        " to",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground", children: toPath }),
+        "."
+      ] })
+    }
+  );
+}
+UrlRedirectPrompt.displayName = "UrlRedirectPrompt";
 
-export { AccordionRoot as Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenuContent, AccountMenuHeader, AccountMenuItem, AccountMenuSection, AccountMenuSeparator, ActionPanel, ActivityFeed, Alert, AlertDescription, AlertDialogRoot as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatioRoot as AspectRatio, Avatar, AvatarFallback, AvatarImage, AvatarStack, AvatarWithStatus, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupItem, CHART_COLORS, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardHeading, CardMedia, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartTooltip, CheckboxRoot as Checkbox, CollapsibleRoot as Collapsible, CollapsibleContent, CollapsibleTrigger, ColorInput, ColorPicker, Combobox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandSeparator, CommandShortcut, ContextMenuRoot as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, DescriptionList, DialogRoot as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DrawerRoot as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenuRoot as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Field, GridList, GridListAccentCard, GridListCard, HoverCardRoot as HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputNumber, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label, MediaObject, MenubarRoot as Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenuRoot as NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Notification, PageHeading, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PopoverRoot as Popover, PopoverClose, PopoverContent, PopoverTrigger, ProgressRoot as Progress, PropertyRow, RadioCards, RadioGroupRoot as RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollAreaRoot as ScrollArea, SectionHeading, SelectRoot as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, SheetRoot as Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SliderRoot as Slider, Spinner, StackedList, StackedListItem, StatCard, Steps, SwitchRoot as Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TabsRoot as Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, ToggleRoot as Toggle, ToggleGroupRoot as ToggleGroup, ToggleGroupItem, TooltipRoot as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, formatDate, navigationMenuTriggerStyle, spinnerVariants, toggleVariants, useSidebar };
+export { AccordionRoot as Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenuContent, AccountMenuHeader, AccountMenuItem, AccountMenuSection, AccountMenuSeparator, ActionPanel, ActivityFeed, Alert, AlertDescription, AlertDialogRoot as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatioRoot as AspectRatio, Avatar, AvatarFallback, AvatarImage, AvatarStack, AvatarWithStatus, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupItem, CHART_COLORS, Calendar, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardHeading, CardMedia, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CheckboxRoot as Checkbox, CollapsibleRoot as Collapsible, CollapsibleContent, CollapsibleTrigger, ColorInput, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandSeparator, CommandShortcut, ContextMenuRoot as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DataTransferControls, DatePicker, DescriptionList, DialogRoot as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DrawerRoot as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenuRoot as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Field, FileDropzone, GridList, GridListAccentCard, GridListCard, HelpTooltip, HoverCardRoot as HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputNumber, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label, MediaAssetCard, MediaObject, MenubarRoot as Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenuRoot as NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Notification, PageHeading, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PopoverRoot as Popover, PopoverClose, PopoverContent, PopoverTrigger, ProgressRoot as Progress, PropertyRow, RadioCards, RadioGroupRoot as RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTextEditor, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, ScrollAreaRoot as ScrollArea, SearchableTable, SectionHeading, SelectRoot as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, SheetRoot as Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SliderRoot as Slider, Spinner, StackedList, StackedListItem, StatCard, StatCardGrid, StatCardSlot, StatusBadge, Steps, SwitchRoot as Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TabsRoot as Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TitledCard, Toaster, ToggleRoot as Toggle, ToggleGroupRoot as ToggleGroup, ToggleGroupItem, TooltipRoot as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UrlRedirectPrompt, badgeVariants, buttonVariants, cardVariants, cn, formatDate, formatFileSize, hasUrlHandleChanged, navigationMenuTriggerStyle, normalizeUrlHandle, spinnerVariants, statusBadgeVariantFor, statusLabel, toggleVariants, urlResourcePath, useSidebar };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map