@juv/codego-react-ui 1.1.2 → 1.1.5

package/dist/index.cjs

@@ -34,6 +34,7 @@ __export(index_exports, {
   Badge: () => Badge,
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
+  COLOR_PALETTE: () => COLOR_PALETTE,
   Calendar: () => Calendar,
   Card: () => Card,
   CardContent: () => CardContent,
@@ -103,6 +104,7 @@ __export(index_exports, {
   Tabs: () => Tabs,
   TagInput: () => TagInput,
   Textarea: () => Textarea,
+  ThemeProvider: () => ThemeProvider,
   Timeline: () => Timeline,
   ToastProvider: () => ToastProvider,
   ToggleSwitch: () => ToggleSwitch,
@@ -111,6 +113,7 @@ __export(index_exports, {
   TreeView: () => TreeView,
   Widget: () => Widget,
   Wizard: () => Wizard,
+  useTheme: () => useTheme,
   useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
@@ -122,9 +125,25 @@ var import_lucide_react = require("lucide-react");
 // src/lib/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
+var ReactDOM = __toESM(require("react-dom"), 1);
 function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
+function getPortalPosition(triggerEl, dropdownHeight = 300, preferredPlacement = "bottom") {
+  const r = triggerEl.getBoundingClientRect();
+  const spaceBelow = window.innerHeight - r.bottom;
+  const spaceAbove = r.top;
+  const placement = preferredPlacement === "bottom" && spaceBelow < dropdownHeight && spaceAbove > spaceBelow ? "top" : preferredPlacement;
+  return {
+    top: placement === "bottom" ? r.bottom + 4 : r.top - 4,
+    left: r.left,
+    width: r.width,
+    placement
+  };
+}
+function FloatingPortal({ children }) {
+  return ReactDOM.createPortal(children, document.body);
+}
 
 // src/components/ui/accordion.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -917,6 +936,8 @@ function ColorPicker({
   const [opacity, setOpacity] = React7.useState(100);
   const [recent, setRecent] = React7.useState([]);
   const ref = React7.useRef(null);
+  const triggerRef = React7.useRef(null);
+  const [dropStyle, setDropStyle] = React7.useState({});
   const color = controlled ?? internal;
   React7.useEffect(() => {
     setHex(color);
@@ -928,6 +949,19 @@ function ColorPicker({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, []);
+  function openPicker() {
+    if (triggerRef.current) {
+      const pos = getPortalPosition(triggerRef.current, 280);
+      setDropStyle({
+        position: "fixed",
+        top: pos.placement === "bottom" ? pos.top : void 0,
+        bottom: pos.placement === "top" ? window.innerHeight - pos.top : void 0,
+        left: pos.left,
+        zIndex: 9999
+      });
+    }
+    setOpen(true);
+  }
   function apply(c) {
     if (!controlled) setInternal(c);
     onChange?.(c);
@@ -942,9 +976,10 @@ function ColorPicker({
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         disabled,
-        onClick: () => setOpen((v) => !v),
+        onClick: () => open ? setOpen(false) : openPicker(),
         className: cn(
           "flex items-center gap-2 h-9 px-3 rounded-xl border border-border bg-background text-sm transition-colors hover:border-primary/40 focus:outline-none focus:ring-2 focus:ring-ring",
           disabled && "opacity-50 cursor-not-allowed pointer-events-none"
@@ -955,7 +990,7 @@ function ColorPicker({
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "absolute z-50 mt-1 w-56 rounded-xl border border-border glass shadow-2xl p-3 space-y-3", children: [
+    open && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "w-56 rounded-xl border border-border glass shadow-2xl p-3 space-y-3", style: dropStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "input",
@@ -1010,10 +1045,7 @@ function ColorPicker({
               apply(s);
               setHex(s);
             },
-            className: cn(
-              "h-6 w-6 rounded-md border transition-transform hover:scale-110",
-              color === s ? "border-primary ring-1 ring-primary" : "border-border/60"
-            ),
+            className: cn("h-6 w-6 rounded-md border transition-transform hover:scale-110", color === s ? "border-primary ring-1 ring-primary" : "border-border/60"),
             style: { backgroundColor: s },
             title: s
           },
@@ -1037,7 +1069,7 @@ function ColorPicker({
           s
         )) })
       ] })
-    ] })
+    ] }) })
   ] });
 }
 
@@ -1064,7 +1096,9 @@ function Combobox({
   const [open, setOpen] = React8.useState(false);
   const [query, setQuery] = React8.useState("");
   const ref = React8.useRef(null);
+  const triggerRef = React8.useRef(null);
   const inputRef = React8.useRef(null);
+  const [dropStyle, setDropStyle] = React8.useState({});
   const selected = controlled ?? internal;
   function update(val) {
     if (!controlled) setInternal(val);
@@ -1088,6 +1122,20 @@ function Combobox({
     e.stopPropagation();
     update(multiple ? [] : "");
   }
+  const openDropdown = () => {
+    if (triggerRef.current) {
+      const pos = getPortalPosition(triggerRef.current, 300);
+      setDropStyle({
+        position: "fixed",
+        top: pos.placement === "bottom" ? pos.top : void 0,
+        bottom: pos.placement === "top" ? window.innerHeight - pos.top : void 0,
+        left: pos.left,
+        width: pos.width,
+        zIndex: 9999
+      });
+    }
+    setOpen(true);
+  };
   React8.useEffect(() => {
     function handler(e) {
       if (ref.current && !ref.current.contains(e.target)) {
@@ -1101,13 +1149,10 @@ function Combobox({
   React8.useEffect(() => {
     if (open) setTimeout(() => inputRef.current?.focus(), 50);
   }, [open]);
-  const filtered = options.filter(
-    (o) => o.label.toLowerCase().includes(query.toLowerCase())
-  );
+  const filtered = options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()));
   const groups = Array.from(new Set(filtered.map((o) => o.group ?? ""))).filter(Boolean);
   const ungrouped = filtered.filter((o) => !o.group);
   const showCreate = creatable && query && !options.find((o) => o.label.toLowerCase() === query.toLowerCase());
-  const selectedLabels = multiple ? selected.map((v) => options.find((o) => o.value === v)?.label ?? v) : options.find((o) => o.value === selected)?.label;
   const hasValue = multiple ? selected.length > 0 : !!selected;
   function renderOptions(opts) {
     return opts.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -1135,9 +1180,10 @@ function Combobox({
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         disabled,
-        onClick: () => setOpen((v) => !v),
+        onClick: () => open ? setOpen(false) : openDropdown(),
         className: cn(
           "flex w-full items-center justify-between gap-2 rounded-xl border border-border bg-background px-3 py-2 text-sm transition-colors",
           "hover:border-primary/40 focus:outline-none focus:ring-2 focus:ring-ring",
@@ -1145,7 +1191,7 @@ function Combobox({
           disabled && "opacity-50 cursor-not-allowed pointer-events-none"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("flex-1 truncate text-left", !hasValue && "text-muted-foreground"), children: multiple ? selected.length > 0 ? `${selected.length} selected` : placeholder : selectedLabels || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("flex-1 truncate text-left", !hasValue && "text-muted-foreground"), children: multiple ? selected.length > 0 ? `${selected.length} selected` : placeholder : options.find((o) => o.value === selected)?.label || placeholder }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-1 shrink-0", children: [
             clearable && hasValue && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { onClick: clear, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.X, { className: "h-3.5 w-3.5" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.ChevronDown, { className: cn("h-4 w-4 text-muted-foreground transition-transform", open && "rotate-180") })
@@ -1153,50 +1199,57 @@ function Combobox({
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "absolute z-50 mt-1 w-full rounded-xl border border-border glass shadow-2xl overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          "input",
-          {
-            ref: inputRef,
-            value: query,
-            onChange: (e) => setQuery(e.target.value),
-            placeholder: searchPlaceholder,
-            className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "overflow-y-auto p-1", style: { maxHeight }, children: [
-        showCreate && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              toggle(query);
-              setQuery("");
-            },
-            className: "flex w-full items-center gap-2 px-3 py-2 text-sm rounded-lg hover:bg-accent text-primary",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Plus, { className: "h-3.5 w-3.5" }),
-              'Create "',
-              query,
-              '"'
-            ]
-          }
-        ),
-        groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group }),
-          renderOptions(filtered.filter((o) => o.group === group))
-        ] }, group)),
-        renderOptions(ungrouped),
-        filtered.length === 0 && !showCreate && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No results" })
-      ] }),
-      multiple && selected.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "border-t border-border px-3 py-2 flex flex-wrap gap-1", children: selected.map((v) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary/15 text-primary text-xs px-2 py-0.5", children: [
-        options.find((o) => o.value === v)?.label ?? v,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: () => toggle(v), className: "opacity-60 hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.X, { className: "h-3 w-3" }) })
-      ] }, v)) })
-    ] })
+    open && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        className: "rounded-xl border border-border glass shadow-2xl overflow-hidden",
+        style: dropStyle,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "input",
+              {
+                ref: inputRef,
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                placeholder: searchPlaceholder,
+                className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "overflow-y-auto p-1", style: { maxHeight }, children: [
+            showCreate && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  toggle(query);
+                  setQuery("");
+                },
+                className: "flex w-full items-center gap-2 px-3 py-2 text-sm rounded-lg hover:bg-accent text-primary",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Plus, { className: "h-3.5 w-3.5" }),
+                  'Create "',
+                  query,
+                  '"'
+                ]
+              }
+            ),
+            groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: group }),
+              renderOptions(filtered.filter((o) => o.group === group))
+            ] }, group)),
+            renderOptions(ungrouped),
+            filtered.length === 0 && !showCreate && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No results" })
+          ] }),
+          multiple && selected.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "border-t border-border px-3 py-2 flex flex-wrap gap-1", children: selected.map((v) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary/15 text-primary text-xs px-2 py-0.5", children: [
+            options.find((o) => o.value === v)?.label ?? v,
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", onClick: () => toggle(v), className: "opacity-60 hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.X, { className: "h-3 w-3" }) })
+          ] }, v)) })
+        ]
+      }
+    ) })
   ] });
 }
 
@@ -1656,12 +1709,12 @@ function DonutChart({ data, color, height, showValues, unit }) {
   const total = data.reduce((s, d) => s + d.value, 0) || 1;
   const cx = 80, cy = height / 2, r = Math.min(cx, cy) - 10, inner = r * 0.58;
   let angle = -Math.PI / 2;
-  const defaultColors2 = ["primary", "info", "success", "warning", "danger"];
+  const defaultColors = ["primary", "info", "success", "warning", "danger"];
   const slices = data.map((d, i) => {
     const sweep = d.value / total * 2 * Math.PI;
     const start = angle;
     angle += sweep;
-    const c = d.color ?? defaultColors2[i % defaultColors2.length];
+    const c = d.color ?? defaultColors[i % defaultColors.length];
     return { ...d, start, sweep, color: c };
   });
   const arc = (cx2, cy2, r2, start, end) => {
@@ -2153,6 +2206,20 @@ function parseValue(value, mode) {
     return null;
   }
 }
+function getAnchorStyle(anchorEl, wide = false) {
+  if (!anchorEl) return { position: "fixed", top: 0, left: 0, zIndex: 9999 };
+  const r = anchorEl.getBoundingClientRect();
+  const spaceBelow = window.innerHeight - r.bottom;
+  const dropH = wide ? 320 : 300;
+  const placement = spaceBelow < dropH && r.top > spaceBelow ? "top" : "bottom";
+  return {
+    position: "fixed",
+    top: placement === "bottom" ? r.bottom + 4 : void 0,
+    bottom: placement === "top" ? window.innerHeight - r.top + 4 : void 0,
+    left: r.left,
+    zIndex: 9999
+  };
+}
 function TimePicker({
   selected,
   disabledDateTimes,
@@ -2220,25 +2287,9 @@ function Calendar2({
   const isDisabled = (d) => disabledDates?.includes((0, import_date_fns.format)(d, "yyyy-MM-dd")) ?? false;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "p-3 select-none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: onPrevMonth,
-          className: "p-1 rounded hover:bg-white/10 text-muted-foreground hover:text-foreground transition-colors",
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react10.ChevronLeft, { size: 16 })
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", onClick: onPrevMonth, className: "p-1 rounded hover:bg-white/10 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react10.ChevronLeft, { size: 16 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm font-semibold text-foreground", children: (0, import_date_fns.format)(month, "MMMM yyyy") }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: onNextMonth,
-          className: "p-1 rounded hover:bg-white/10 text-muted-foreground hover:text-foreground transition-colors",
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react10.ChevronRight, { size: 16 })
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", onClick: onNextMonth, className: "p-1 rounded hover:bg-white/10 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react10.ChevronRight, { size: 16 }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "grid grid-cols-7 mb-1", children: DAYS2.map((d) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-center text-xs text-muted-foreground py-1", children: d }, d)) }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "grid grid-cols-7 gap-y-1", children: days.map((d, i) => {
@@ -2273,136 +2324,44 @@ function DatePickerPopup({
   disabledDates,
   disabledDateTimes,
   onChange,
-  onClose
+  onClose,
+  anchorEl
 }) {
   const parsed = parseValue(value, mode);
   const [month, setMonth] = React13.useState(parsed ?? /* @__PURE__ */ new Date());
   const [selected, setSelected] = React13.useState(parsed);
-  const ref = React13.useRef(null);
+  const anchorStyle = getAnchorStyle(anchorEl ?? null, mode === "dateTime");
   const commit = (d) => {
-    if (mode === "date") {
-      onChange((0, import_date_fns.format)(d, "yyyy-MM-dd"));
-    } else if (mode === "dateTime") {
-      onChange((0, import_date_fns.format)(d, "yyyy-MM-dd'T'HH:mm"));
-    } else {
-      onChange((0, import_date_fns.format)(d, "HH:mm"));
-    }
+    if (mode === "date") onChange((0, import_date_fns.format)(d, "yyyy-MM-dd"));
+    else if (mode === "dateTime") onChange((0, import_date_fns.format)(d, "yyyy-MM-dd'T'HH:mm"));
+    else onChange((0, import_date_fns.format)(d, "HH:mm"));
     setSelected(d);
   };
   const handleDayClick = (d) => {
     const base = selected ?? /* @__PURE__ */ new Date();
-    const merged = (0, import_date_fns.setMinutes)((0, import_date_fns.setHours)(d, (0, import_date_fns.getHours)(base)), (0, import_date_fns.getMinutes)(base));
-    commit(merged);
+    commit((0, import_date_fns.setMinutes)((0, import_date_fns.setHours)(d, (0, import_date_fns.getHours)(base)), (0, import_date_fns.getMinutes)(base)));
   };
   const handleTimeChange = (h, m) => {
-    const base = selected ?? /* @__PURE__ */ new Date();
-    const merged = (0, import_date_fns.setMinutes)((0, import_date_fns.setHours)(base, h), m);
-    commit(merged);
+    commit((0, import_date_fns.setMinutes)((0, import_date_fns.setHours)(selected ?? /* @__PURE__ */ new Date(), h), m));
   };
   const datePrefix = selected ? (0, import_date_fns.format)(selected, "yyyy-MM-dd") : void 0;
-  if (mode === "dateTime") {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-      "div",
+  const footer = (label) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "border-t border-white/10 px-3 py-2 flex items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "button",
       {
-        ref,
-        className: "absolute z-50 mt-1 rounded-xl border border-white/10 bg-card shadow-xl backdrop-blur-sm",
-        style: { top: "100%", left: 0 },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1 min-w-[240px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs font-medium text-muted-foreground px-3 pt-3 pb-1", children: "Date" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                Calendar2,
-                {
-                  selected,
-                  month,
-                  disabledDates,
-                  onDayClick: handleDayClick,
-                  onPrevMonth: () => setMonth((m) => (0, import_date_fns.subMonths)(m, 1)),
-                  onNextMonth: () => setMonth((m) => (0, import_date_fns.addMonths)(m, 1))
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-px bg-white/10 my-3" }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1 min-w-[140px] flex flex-col", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs font-medium text-muted-foreground px-3 pt-3 pb-1", children: "Time" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex gap-2 px-3 pb-3 flex-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs text-muted-foreground mb-1 text-center", children: "HH" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "grid grid-cols-1 gap-1 max-h-52 overflow-y-auto", children: HOURS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    "button",
-                    {
-                      type: "button",
-                      disabled: MINUTES.every((m) => {
-                        if (!disabledDateTimes || !datePrefix) return false;
-                        return disabledDateTimes.includes(`${datePrefix}T${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`);
-                      }),
-                      onClick: () => handleTimeChange(h, selected ? (0, import_date_fns.getMinutes)(selected) : 0),
-                      className: cn(
-                        "text-xs rounded py-1 transition-colors",
-                        selected && (0, import_date_fns.getHours)(selected) === h ? "bg-primary text-primary-foreground" : "hover:bg-white/10 text-foreground",
-                        MINUTES.every((m) => {
-                          if (!disabledDateTimes || !datePrefix) return false;
-                          return disabledDateTimes.includes(`${datePrefix}T${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`);
-                        }) && "opacity-30 cursor-not-allowed line-through"
-                      ),
-                      children: String(h).padStart(2, "0")
-                    },
-                    h
-                  )) })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "w-12", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs text-muted-foreground mb-1 text-center", children: "MM" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "grid grid-cols-1 gap-1 max-h-52 overflow-y-auto", children: MINUTES.map((m) => {
-                    const h = selected ? (0, import_date_fns.getHours)(selected) : 0;
-                    const isDisabled = disabledDateTimes && datePrefix ? disabledDateTimes.includes(`${datePrefix}T${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`) : false;
-                    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-                      "button",
-                      {
-                        type: "button",
-                        disabled: isDisabled,
-                        onClick: () => handleTimeChange(h, m),
-                        className: cn(
-                          "text-xs rounded py-1 transition-colors",
-                          selected && (0, import_date_fns.getMinutes)(selected) === m ? "bg-primary text-primary-foreground" : "hover:bg-white/10 text-foreground",
-                          isDisabled && "opacity-30 cursor-not-allowed line-through"
-                        ),
-                        children: [
-                          ":",
-                          String(m).padStart(2, "0")
-                        ]
-                      },
-                      m
-                    );
-                  }) })
-                ] })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "border-t border-white/10 px-3 py-2 flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-muted-foreground", children: selected ? (0, import_date_fns.format)(selected, "MMM d, yyyy HH:mm") : "No date selected" }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: onClose,
-                className: "text-xs rounded-lg bg-primary text-primary-foreground px-3 py-1 hover:opacity-90 transition-opacity",
-                children: "Done"
-              }
-            )
-          ] })
-        ]
+        type: "button",
+        onClick: onClose,
+        className: "text-xs rounded-lg bg-primary text-primary-foreground px-3 py-1 hover:opacity-90 transition-opacity",
+        children: "Done"
       }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-    "div",
-    {
-      ref,
-      className: "absolute z-50 mt-1 rounded-xl border border-white/10 bg-card shadow-xl backdrop-blur-sm min-w-[260px]",
-      style: { top: "100%", left: 0 },
-      children: [
-        mode === "date" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    )
+  ] });
+  if (mode === "dateTime") {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "rounded-xl border border-white/10 bg-card shadow-xl backdrop-blur-sm", style: anchorStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1 min-w-[240px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs font-medium text-muted-foreground px-3 pt-3 pb-1", children: "Date" }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             Calendar2,
             {
@@ -2413,46 +2372,91 @@ function DatePickerPopup({
               onPrevMonth: () => setMonth((m) => (0, import_date_fns.subMonths)(m, 1)),
               onNextMonth: () => setMonth((m) => (0, import_date_fns.addMonths)(m, 1))
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "border-t border-white/10 px-3 py-2 flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-muted-foreground", children: selected ? (0, import_date_fns.format)(selected, "MMM d, yyyy") : "No date selected" }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: onClose,
-                className: "text-xs rounded-lg bg-primary text-primary-foreground px-3 py-1 hover:opacity-90 transition-opacity",
-                children: "Done"
-              }
-            )
-          ] })
+          )
         ] }),
-        mode === "time" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            TimePicker,
-            {
-              selected,
-              disabledDateTimes,
-              datePrefix,
-              onChange: handleTimeChange
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "border-t border-white/10 px-3 py-2 flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-muted-foreground", children: selected ? (0, import_date_fns.format)(selected, "HH:mm") : "No time selected" }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: onClose,
-                className: "text-xs rounded-lg bg-primary text-primary-foreground px-3 py-1 hover:opacity-90 transition-opacity",
-                children: "Done"
-              }
-            )
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-px bg-white/10 my-3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1 min-w-[140px] flex flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs font-medium text-muted-foreground px-3 pt-3 pb-1", children: "Time" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex gap-2 px-3 pb-3 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs text-muted-foreground mb-1 text-center", children: "HH" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "grid grid-cols-1 gap-1 max-h-52 overflow-y-auto", children: HOURS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                "button",
+                {
+                  type: "button",
+                  disabled: MINUTES.every((m) => {
+                    if (!disabledDateTimes || !datePrefix) return false;
+                    return disabledDateTimes.includes(`${datePrefix}T${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`);
+                  }),
+                  onClick: () => handleTimeChange(h, selected ? (0, import_date_fns.getMinutes)(selected) : 0),
+                  className: cn(
+                    "text-xs rounded py-1 transition-colors",
+                    selected && (0, import_date_fns.getHours)(selected) === h ? "bg-primary text-primary-foreground" : "hover:bg-white/10 text-foreground"
+                  ),
+                  children: String(h).padStart(2, "0")
+                },
+                h
+              )) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "w-12", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs text-muted-foreground mb-1 text-center", children: "MM" }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "grid grid-cols-1 gap-1 max-h-52 overflow-y-auto", children: MINUTES.map((m) => {
+                const h = selected ? (0, import_date_fns.getHours)(selected) : 0;
+                const dis = disabledDateTimes && datePrefix ? disabledDateTimes.includes(`${datePrefix}T${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`) : false;
+                return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: dis,
+                    onClick: () => handleTimeChange(h, m),
+                    className: cn(
+                      "text-xs rounded py-1 transition-colors",
+                      selected && (0, import_date_fns.getMinutes)(selected) === m ? "bg-primary text-primary-foreground" : "hover:bg-white/10 text-foreground",
+                      dis && "opacity-30 cursor-not-allowed line-through"
+                    ),
+                    children: [
+                      ":",
+                      String(m).padStart(2, "0")
+                    ]
+                  },
+                  m
+                );
+              }) })
+            ] })
           ] })
         ] })
-      ]
-    }
-  );
+      ] }),
+      footer(selected ? (0, import_date_fns.format)(selected, "MMM d, yyyy HH:mm") : "No date selected")
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "rounded-xl border border-white/10 bg-card shadow-xl backdrop-blur-sm min-w-[260px]", style: anchorStyle, children: [
+    mode === "date" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        Calendar2,
+        {
+          selected,
+          month,
+          disabledDates,
+          onDayClick: handleDayClick,
+          onPrevMonth: () => setMonth((m) => (0, import_date_fns.subMonths)(m, 1)),
+          onNextMonth: () => setMonth((m) => (0, import_date_fns.addMonths)(m, 1))
+        }
+      ),
+      footer(selected ? (0, import_date_fns.format)(selected, "MMM d, yyyy") : "No date selected")
+    ] }),
+    mode === "time" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        TimePicker,
+        {
+          selected,
+          disabledDateTimes,
+          datePrefix,
+          onChange: handleTimeChange
+        }
+      ),
+      footer(selected ? (0, import_date_fns.format)(selected, "HH:mm") : "No time selected")
+    ] })
+  ] }) });
 }
 
 // src/components/ui/date-range-picker.tsx
@@ -2490,6 +2494,8 @@ function DateRangePicker({
   const [viewMonth, setViewMonth] = React14.useState(today.getMonth());
   const [viewYear, setViewYear] = React14.useState(today.getFullYear());
   const ref = React14.useRef(null);
+  const triggerRef = React14.useRef(null);
+  const [dropStyle, setDropStyle] = React14.useState({});
   const range2 = controlled ?? internal;
   React14.useEffect(() => {
     function handler(e) {
@@ -2502,6 +2508,19 @@ function DateRangePicker({
     if (!controlled) setInternal(r);
     onChange?.(r);
   }
+  function openPicker() {
+    if (triggerRef.current) {
+      const pos = getPortalPosition(triggerRef.current, 340);
+      setDropStyle({
+        position: "fixed",
+        top: pos.placement === "bottom" ? pos.top : void 0,
+        bottom: pos.placement === "top" ? window.innerHeight - pos.top : void 0,
+        left: pos.left,
+        zIndex: 9999
+      });
+    }
+    setOpen(true);
+  }
   function selectDay(d) {
     if (selecting === "from") {
       update({ from: d, to: null });
@@ -2536,9 +2555,10 @@ function DateRangePicker({
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         disabled,
-        onClick: () => setOpen((v) => !v),
+        onClick: () => open ? setOpen(false) : openPicker(),
         className: cn(
           "flex w-full items-center gap-2 rounded-xl border border-border bg-background px-3 py-2 text-sm transition-colors",
           "hover:border-primary/40 focus:outline-none focus:ring-2 focus:ring-ring",
@@ -2564,25 +2584,41 @@ function DateRangePicker({
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "absolute z-50 mt-1 rounded-xl border border-border glass shadow-2xl p-4 w-72", children: [
+    open && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "rounded-xl border border-border glass shadow-2xl p-4 w-72", style: dropStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: () => {
-          if (viewMonth === 0) {
-            setViewMonth(11);
-            setViewYear((y) => y - 1);
-          } else setViewMonth((m) => m - 1);
-        }, className: "p-1 rounded-md hover:bg-accent transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react11.ChevronLeft, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              if (viewMonth === 0) {
+                setViewMonth(11);
+                setViewYear((y) => y - 1);
+              } else setViewMonth((m) => m - 1);
+            },
+            className: "p-1 rounded-md hover:bg-accent transition-colors",
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react11.ChevronLeft, { className: "h-4 w-4" })
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-sm font-semibold", children: [
           MONTHS2[viewMonth],
           " ",
           viewYear
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: () => {
-          if (viewMonth === 11) {
-            setViewMonth(0);
-            setViewYear((y) => y + 1);
-          } else setViewMonth((m) => m + 1);
-        }, className: "p-1 rounded-md hover:bg-accent transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react11.ChevronRight, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              if (viewMonth === 11) {
+                setViewMonth(0);
+                setViewYear((y) => y + 1);
+              } else setViewMonth((m) => m + 1);
+            },
+            className: "p-1 rounded-md hover:bg-accent transition-colors",
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react11.ChevronRight, { className: "h-4 w-4" })
+          }
+        )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "grid grid-cols-7 mb-1", children: DAYS3.map((d) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-center text-[10px] font-semibold text-muted-foreground py-1", children: d }, d)) }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "grid grid-cols-7 gap-y-0.5", children: days.map((d, i) => {
@@ -2617,7 +2653,7 @@ function DateRangePicker({
         );
       }) }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "mt-3 text-center text-xs text-muted-foreground", children: selecting === "from" ? "Select start date" : "Select end date" })
-    ] })
+    ] }) })
   ] });
 }
 
@@ -2719,10 +2755,10 @@ function Drawer({
 var React16 = __toESM(require("react"), 1);
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var widthMap = {
-  sm: "w-40",
-  md: "w-56",
-  lg: "w-72",
-  auto: "w-auto min-w-[10rem]"
+  sm: 160,
+  md: 224,
+  lg: 288,
+  auto: void 0
 };
 function Dropdown({
   trigger,
@@ -2736,25 +2772,40 @@ function Dropdown({
   className
 }) {
   const [isOpen, setIsOpen] = React16.useState(false);
-  const containerRef = React16.useRef(null);
-  const toggle = () => {
+  const triggerRef = React16.useRef(null);
+  const [dropStyle, setDropStyle] = React16.useState({});
+  const open = () => {
     if (disabled) return;
-    const next = !isOpen;
-    setIsOpen(next);
-    onOpenChange?.(next);
+    if (triggerRef.current) {
+      const r = triggerRef.current.getBoundingClientRect();
+      const pos = getPortalPosition(triggerRef.current, 320, placement);
+      const w = widthMap[width];
+      let left = r.left;
+      if (align === "right") left = r.right - (w ?? r.width);
+      if (align === "center") left = r.left + r.width / 2 - (w ?? r.width) / 2;
+      setDropStyle({
+        position: "fixed",
+        top: pos.placement === "bottom" ? pos.top : void 0,
+        bottom: pos.placement === "top" ? window.innerHeight - r.top + 4 : void 0,
+        left,
+        width: w,
+        minWidth: w ? void 0 : "10rem",
+        zIndex: 9999
+      });
+    }
+    setIsOpen(true);
+    onOpenChange?.(true);
   };
   const close = () => {
     setIsOpen(false);
     onOpenChange?.(false);
   };
   React16.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
-        close();
-      }
+    const handleClickOutside = (e) => {
+      if (triggerRef.current && !triggerRef.current.contains(e.target)) close();
     };
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") close();
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") close();
     };
     document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("keydown", handleKeyDown);
@@ -2763,39 +2814,30 @@ function Dropdown({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative inline-block text-left", ref: containerRef, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative inline-block text-left", ref: triggerRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
-        onClick: toggle,
+        onClick: () => isOpen ? close() : open(),
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
         className: cn(disabled && "opacity-50 cursor-not-allowed pointer-events-none"),
         children: trigger
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         className: cn(
-          "absolute z-50 rounded-xl border border-white/10 bg-background/90 backdrop-blur-2xl text-popover-foreground",
+          "rounded-xl border border-white/10 bg-background/90 backdrop-blur-2xl text-popover-foreground",
           "shadow-[0_8px_32px_rgba(0,0,0,0.35)] ring-1 ring-white/5",
           "animate-in fade-in-0 zoom-in-95 duration-150",
-          widthMap[width],
-          placement === "top" ? "bottom-full mb-2" : "top-full mt-2",
-          align === "right" ? "right-0" : align === "center" ? "left-1/2 -translate-x-1/2" : "left-0",
           className
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          "div",
-          {
-            className: "py-1.5",
-            onClick: closeOnSelect ? close : void 0,
-            children
-          }
-        )
+        style: dropStyle,
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "py-1.5", onClick: closeOnSelect ? close : void 0, children })
       }
-    )
+    ) })
   ] });
 }
 function DropdownItem({
@@ -2828,10 +2870,7 @@ function DropdownItem({
 function DropdownSeparator({ className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("my-1.5 h-px bg-white/8", className) });
 }
-function DropdownLabel({
-  children,
-  className
-}) {
+function DropdownLabel({ children, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: cn("px-3.5 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground/60", className), children });
 }
 
@@ -3693,6 +3732,7 @@ var Input = React18.forwardRef(
             value: internalValue,
             disabledDates,
             disabledDateTimes,
+            anchorEl: containerRef.current,
             onChange: (v) => {
               setInternalValue(v);
               setValidationError(null);
@@ -4084,30 +4124,43 @@ function Select({
   const [search, setSearch] = React23.useState("");
   const [isSearching, setIsSearching] = React23.useState(false);
   const containerRef = React23.useRef(null);
+  const triggerRef = React23.useRef(null);
+  const [dropStyle, setDropStyle] = React23.useState({});
   const getKey = (opt) => String(Object.keys(opt)[0]);
   const getLabel = (opt) => Object.values(opt)[0];
   const selectedValues = React23.useMemo(() => {
-    if (multiple && Array.isArray(value)) {
-      return value;
-    } else if (typeof value === "string") {
-      return [value];
-    }
+    if (multiple && Array.isArray(value)) return value;
+    if (typeof value === "string") return [value];
     return [];
   }, [value, multiple]);
-  const selectedOptions = React23.useMemo(() => {
-    return options.filter((opt) => selectedValues.includes(getKey(opt)));
-  }, [options, selectedValues]);
-  const filteredOptions = searchable ? options.filter(
-    (opt) => getLabel(opt).toLowerCase().includes(search.toLowerCase())
-  ) : options;
+  const selectedOptions = React23.useMemo(
+    () => options.filter((opt) => selectedValues.includes(getKey(opt))),
+    [options, selectedValues]
+  );
+  const filteredOptions = searchable ? options.filter((opt) => getLabel(opt).toLowerCase().includes(search.toLowerCase())) : options;
+  const openDropdown = () => {
+    if (disabled) return;
+    if (triggerRef.current) {
+      const pos = getPortalPosition(triggerRef.current, 260);
+      setDropStyle({
+        position: "fixed",
+        top: pos.placement === "bottom" ? pos.top : void 0,
+        bottom: pos.placement === "top" ? window.innerHeight - pos.top : void 0,
+        left: pos.left,
+        width: pos.width,
+        zIndex: 9999
+      });
+    }
+    setIsOpen(true);
+  };
   React23.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
         setIsOpen(false);
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
   }, []);
   const handleSelect = (optionValue) => {
     if (multiple) {
@@ -4121,10 +4174,7 @@ function Select({
   };
   const handleRemove = (optionValue, e) => {
     e.stopPropagation();
-    if (multiple) {
-      const newValues = selectedValues.filter((v) => v !== optionValue);
-      onChange?.(newValues);
-    }
+    if (multiple) onChange?.(selectedValues.filter((v) => v !== optionValue));
   };
   const handleReorder = (fromIndex, toIndex) => {
     if (!multiple || !reorderable || !Array.isArray(value)) return;
@@ -4138,16 +4188,13 @@ function Select({
     e.dataTransfer.setData("text/plain", index.toString());
   };
   const handleDragOver = (e) => {
-    if (!reorderable) return;
-    e.preventDefault();
+    if (reorderable) e.preventDefault();
   };
   const handleDrop = (e, toIndex) => {
     if (!reorderable) return;
     e.preventDefault();
     const fromIndex = parseInt(e.dataTransfer.getData("text/plain"));
-    if (fromIndex !== toIndex) {
-      handleReorder(fromIndex, toIndex);
-    }
+    if (fromIndex !== toIndex) handleReorder(fromIndex, toIndex);
   };
   if (native) {
     if (multiple) {
@@ -4157,58 +4204,29 @@ function Select({
           "w-full rounded-xl border border-slate-900/30 bg-background/50 backdrop-blur-sm overflow-hidden ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
           disabled && "opacity-50 pointer-events-none"
         ), children: [
-          selectedValues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-wrap gap-1 px-3 pt-2 pb-1 border-b border-slate-900/10", children: selectedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-            "span",
-            {
-              className: "inline-flex items-center gap-1 rounded-sm bg-primary/15 text-primary px-2 py-0.5 text-xs",
-              children: [
-                getLabel(opt),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    disabled,
-                    onClick: () => onChange?.(selectedValues.filter((v) => v !== getKey(opt))),
-                    className: "hover:text-destructive",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.X, { className: "h-3 w-3" })
-                  }
-                )
-              ]
-            },
-            getKey(opt)
-          )) }),
+          selectedValues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-wrap gap-1 px-3 pt-2 pb-1 border-b border-slate-900/10", children: selectedOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "inline-flex items-center gap-1 rounded-sm bg-primary/15 text-primary px-2 py-0.5 text-xs", children: [
+            getLabel(opt),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { type: "button", disabled, onClick: () => onChange?.(selectedValues.filter((v) => v !== getKey(opt))), className: "hover:text-destructive", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.X, { className: "h-3 w-3" }) })
+          ] }, getKey(opt))) }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "max-h-48 overflow-y-auto p-1", children: options.map((option) => {
             const checked = selectedValues.includes(getKey(option));
-            return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-              "label",
-              {
-                className: cn(
-                  "flex items-center gap-3 rounded-lg px-3 py-2 text-sm cursor-pointer transition-colors hover:bg-accent",
-                  checked && "bg-primary/8 text-primary"
-                ),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: cn(
-                    "flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors",
-                    checked ? "bg-primary border-primary text-primary-foreground" : "border-slate-900/30 bg-background/50"
-                  ), children: checked && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.Check, { className: "h-3 w-3" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                    "input",
-                    {
-                      type: "checkbox",
-                      className: "sr-only",
-                      checked,
-                      disabled,
-                      onChange: () => {
-                        const newValues = checked ? selectedValues.filter((v) => v !== getKey(option)) : [...selectedValues, getKey(option)];
-                        onChange?.(newValues);
-                      }
-                    }
-                  ),
-                  getLabel(option)
-                ]
-              },
-              getKey(option)
-            );
+            return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { className: cn("flex items-center gap-3 rounded-lg px-3 py-2 text-sm cursor-pointer transition-colors hover:bg-accent", checked && "bg-primary/8 text-primary"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: cn("flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors", checked ? "bg-primary border-primary text-primary-foreground" : "border-slate-900/30 bg-background/50"), children: checked && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.Check, { className: "h-3 w-3" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  className: "sr-only",
+                  checked,
+                  disabled,
+                  onChange: () => {
+                    const newValues = checked ? selectedValues.filter((v) => v !== getKey(option)) : [...selectedValues, getKey(option)];
+                    onChange?.(newValues);
+                  }
+                }
+              ),
+              getLabel(option)
+            ] }, getKey(option));
           }) })
         ] })
       ] });
@@ -4239,14 +4257,15 @@ function Select({
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "button",
         {
+          ref: triggerRef,
           type: "button",
           className: cn(
             "relative flex w-full items-center min-h-[2.5rem] rounded-xl border border-slate-900/30 bg-background/50 backdrop-blur-sm px-4 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-colors hover:bg-background/80",
             multiple && selectedValues.length > 0 && "flex-wrap gap-1",
-            (suffixIcon || !suffixIcon) && "pr-10",
+            "pr-10",
             disabled && "cursor-not-allowed opacity-50"
           ),
-          onClick: () => !disabled && setIsOpen(!isOpen),
+          onClick: () => isOpen ? setIsOpen(false) : openDropdown(),
           disabled,
           children: multiple && selectedOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex flex-wrap gap-1 flex-1 min-w-0", children: selectedOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
             "span",
@@ -4255,22 +4274,11 @@ function Select({
               onDragStart: (e) => handleDragStart(e, index),
               onDragOver: handleDragOver,
               onDrop: (e) => handleDrop(e, index),
-              className: cn(
-                "inline-flex items-center gap-1 rounded-sm bg-primary/15 text-primary px-2 py-1 text-xs",
-                reorderable && "cursor-move"
-              ),
+              className: cn("inline-flex items-center gap-1 rounded-sm bg-primary/15 text-primary px-2 py-1 text-xs", reorderable && "cursor-move"),
               children: [
                 reorderable && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.GripVertical, { className: "h-3 w-3 opacity-50" }),
                 getLabel(option),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: (e) => handleRemove(getKey(option), e),
-                    className: "ml-1 hover:text-destructive",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.X, { className: "h-3 w-3" })
-                  }
-                )
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { type: "button", onClick: (e) => handleRemove(getKey(option), e), className: "ml-1 hover:text-destructive", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.X, { className: "h-3 w-3" }) })
               ]
             },
             getKey(option)
@@ -4283,50 +4291,56 @@ function Select({
         {
           type: "button",
           disabled,
-          onClick: () => !disabled && setIsOpen(!isOpen),
+          onClick: () => isOpen ? setIsOpen(false) : openDropdown(),
           className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors z-10 disabled:opacity-50",
-          "aria-label": "Open options",
           style: iconColor ? { color: iconColor } : void 0,
           children: suffixIcon
         }
       ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-white/10 bg-background/80 backdrop-blur-xl text-popover-foreground shadow-lg animate-in fade-in-80", children: [
-        searchable && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "sticky top-0 z-10 flex items-center border-b border-white/10 bg-background/90 px-3 py-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            "input",
-            {
-              className: "flex h-8 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-              placeholder: searchingMessage,
-              value: search,
-              onChange: (e) => {
-                setSearch(e.target.value);
-                setIsSearching(true);
-                setTimeout(() => setIsSearching(false), 300);
-              },
-              onClick: (e) => e.stopPropagation()
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "p-1", children: isSearching ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "py-6 text-center text-sm text-muted-foreground", children: loadingMessage }) : filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "py-6 text-center text-sm text-muted-foreground", children: search ? noSearchResultsMessage : "No options available." }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-          filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-            "div",
-            {
-              className: cn(
-                "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-                (multiple ? selectedValues.includes(getKey(option)) : value === getKey(option)) && "bg-accent text-accent-foreground"
-              ),
-              onClick: () => handleSelect(getKey(option)),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: (multiple ? selectedValues.includes(getKey(option)) : value === getKey(option)) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.Check, { className: "h-4 w-4" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "truncate", children: getLabel(option) })
-              ]
-            },
-            getKey(option)
-          )),
-          createOptionForm && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-t border-white/10 mt-1 pt-1", children: createOptionForm })
-        ] }) })
-      ] })
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        "div",
+        {
+          className: "max-h-60 overflow-auto rounded-md border border-white/10 bg-background/80 backdrop-blur-xl text-popover-foreground shadow-lg animate-in fade-in-80",
+          style: dropStyle,
+          children: [
+            searchable && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "sticky top-0 z-10 flex items-center border-b border-white/10 bg-background/90 px-3 py-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                "input",
+                {
+                  className: "flex h-8 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground",
+                  placeholder: searchingMessage,
+                  value: search,
+                  onChange: (e) => {
+                    setSearch(e.target.value);
+                    setIsSearching(true);
+                    setTimeout(() => setIsSearching(false), 300);
+                  },
+                  onClick: (e) => e.stopPropagation()
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "p-1", children: isSearching ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "py-6 text-center text-sm text-muted-foreground", children: loadingMessage }) : filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "py-6 text-center text-sm text-muted-foreground", children: search ? noSearchResultsMessage : "No options available." }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+              filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+                "div",
+                {
+                  className: cn(
+                    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground",
+                    (multiple ? selectedValues.includes(getKey(option)) : value === getKey(option)) && "bg-accent text-accent-foreground"
+                  ),
+                  onClick: () => handleSelect(getKey(option)),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: (multiple ? selectedValues.includes(getKey(option)) : value === getKey(option)) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react16.Check, { className: "h-4 w-4" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "truncate", children: getLabel(option) })
+                  ]
+                },
+                getKey(option)
+              )),
+              createOptionForm && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "border-t border-white/10 mt-1 pt-1", children: createOptionForm })
+            ] }) })
+          ]
+        }
+      ) })
     ] })
   ] });
 }
@@ -5169,7 +5183,7 @@ var import_lucide_react20 = require("lucide-react");
 
 // src/components/ui/tooltip.tsx
 var React28 = __toESM(require("react"), 1);
-var ReactDOM = __toESM(require("react-dom"), 1);
+var ReactDOM2 = __toESM(require("react-dom"), 1);
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function Tooltip({
   content,
@@ -5224,7 +5238,7 @@ function Tooltip({
       onBlur: () => setVisible(false),
       children: [
         children,
-        visible && ReactDOM.createPortal(
+        visible && ReactDOM2.createPortal(
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "div",
             {
@@ -5247,24 +5261,36 @@ function Tooltip({
 
 // src/components/theme-provider.tsx
 var import_react = require("react");
+
+// src/components/conf/settingConfig.json
+var settingConfig_default = {
+  theme: "dark",
+  fontSize: "16px",
+  fontFamily: '"Space Grotesk", "Inter", sans-serif',
+  colors: {
+    primary: "#8b5cf6",
+    primaryHover: "#7c3aed",
+    secondary: "#171717",
+    secondaryHover: "#262626",
+    info: "#3b82f6",
+    infoHover: "#2563eb",
+    warning: "#f59e0b",
+    warningHover: "#d97706",
+    danger: "#ef4444",
+    dangerHover: "#dc2626"
+  }
+};
+
+// src/components/theme-provider.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var defaultColors = {
-  primary: "#8b5cf6",
-  primaryHover: "#7c3aed",
-  secondary: "#171717",
-  secondaryHover: "#262626",
-  info: "#3b82f6",
-  infoHover: "#2563eb",
-  warning: "#f59e0b",
-  warningHover: "#d97706",
-  danger: "#ef4444",
-  dangerHover: "#dc2626"
+var configDefaults = {
+  theme: settingConfig_default.theme,
+  fontSize: settingConfig_default.fontSize,
+  fontFamily: settingConfig_default.fontFamily,
+  colors: settingConfig_default.colors
 };
 var initialState = {
-  theme: "system",
-  colors: defaultColors,
-  fontSize: "16px",
-  fontFamily: '"Space Grotesk", "Inter", sans-serif',
+  ...configDefaults,
   setTheme: () => null,
   setColors: () => null,
   setFontSize: () => null,
@@ -5274,26 +5300,60 @@ var initialState = {
 var ThemeProviderContext = (0, import_react.createContext)(initialState);
 var COLOR_PALETTE = [
   { base: "#6366f1", hover: "#4f46e5" },
-  // Indigo
   { base: "#8b5cf6", hover: "#7c3aed" },
-  // Violet
   { base: "#3b82f6", hover: "#2563eb" },
-  // Blue
   { base: "#10b981", hover: "#059669" },
-  // Emerald
   { base: "#22c55e", hover: "#16a34a" },
-  // Green
   { base: "#eab308", hover: "#ca8a04" },
-  // Yellow
   { base: "#f59e0b", hover: "#d97706" },
-  // Amber
   { base: "#f97316", hover: "#ea580c" },
-  // Orange
   { base: "#ef4444", hover: "#dc2626" },
-  // Red
   { base: "#ec4899", hover: "#db2777" }
-  // Pink
 ];
+function ThemeProvider({
+  children,
+  storageKey = "codego-ui-theme-settings",
+  ...props
+}) {
+  const [settings, setSettings] = (0, import_react.useState)(() => {
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) return { ...configDefaults, ...JSON.parse(stored) };
+    } catch {
+    }
+    return configDefaults;
+  });
+  (0, import_react.useEffect)(() => {
+    localStorage.setItem(storageKey, JSON.stringify(settings));
+  }, [settings, storageKey]);
+  (0, import_react.useEffect)(() => {
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
+    const resolved = settings.theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : settings.theme;
+    root.classList.add(resolved);
+    root.style.setProperty("--primary", settings.colors.primary);
+    root.style.setProperty("--primary-hover", settings.colors.primaryHover);
+    root.style.setProperty("--secondary", settings.colors.secondary);
+    root.style.setProperty("--secondary-hover", settings.colors.secondaryHover);
+    root.style.setProperty("--info", settings.colors.info);
+    root.style.setProperty("--info-hover", settings.colors.infoHover);
+    root.style.setProperty("--warning", settings.colors.warning);
+    root.style.setProperty("--warning-hover", settings.colors.warningHover);
+    root.style.setProperty("--danger", settings.colors.danger);
+    root.style.setProperty("--danger-hover", settings.colors.dangerHover);
+    root.style.setProperty("font-size", settings.fontSize);
+    root.style.setProperty("--font-sans", settings.fontFamily);
+  }, [settings]);
+  const value = {
+    ...settings,
+    setTheme: (theme) => setSettings((s) => ({ ...s, theme })),
+    setColors: (colors) => setSettings((s) => ({ ...s, colors: { ...s.colors, ...colors } })),
+    setFontSize: (fontSize) => setSettings((s) => ({ ...s, fontSize })),
+    setFontFamily: (fontFamily) => setSettings((s) => ({ ...s, fontFamily })),
+    resetSettings: () => setSettings(configDefaults)
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ThemeProviderContext.Provider, { ...props, value, children });
+}
 var useTheme = () => {
   const context = (0, import_react.useContext)(ThemeProviderContext);
   if (context === void 0)
@@ -5453,16 +5513,28 @@ function PanelSidebarGroup({
 // src/components/ui/popover.tsx
 var React31 = __toESM(require("react"), 1);
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var PLACEMENT_CLASSES = {
-  "top": "bottom-full left-1/2 -translate-x-1/2 mb-2",
-  "bottom": "top-full left-1/2 -translate-x-1/2 mt-2",
-  "left": "right-full top-1/2 -translate-y-1/2 mr-2",
-  "right": "left-full top-1/2 -translate-y-1/2 ml-2",
-  "top-start": "bottom-full left-0 mb-2",
-  "top-end": "bottom-full right-0 mb-2",
-  "bottom-start": "top-full left-0 mt-2",
-  "bottom-end": "top-full right-0 mt-2"
-};
+function calcStyle(triggerEl, placement) {
+  const r = triggerEl.getBoundingClientRect();
+  const GAP = 8;
+  switch (placement) {
+    case "bottom":
+      return { top: r.bottom + GAP, left: r.left + r.width / 2, transform: "translateX(-50%)" };
+    case "bottom-start":
+      return { top: r.bottom + GAP, left: r.left };
+    case "bottom-end":
+      return { top: r.bottom + GAP, left: r.right, transform: "translateX(-100%)" };
+    case "top":
+      return { top: r.top - GAP, left: r.left + r.width / 2, transform: "translate(-50%, -100%)" };
+    case "top-start":
+      return { top: r.top - GAP, left: r.left, transform: "translateY(-100%)" };
+    case "top-end":
+      return { top: r.top - GAP, left: r.right, transform: "translate(-100%, -100%)" };
+    case "left":
+      return { top: r.top + r.height / 2, left: r.left - GAP, transform: "translate(-100%, -50%)" };
+    case "right":
+      return { top: r.top + r.height / 2, left: r.right + GAP, transform: "translateY(-50%)" };
+  }
+}
 function Popover({
   trigger,
   content,
@@ -5474,11 +5546,18 @@ function Popover({
 }) {
   const [internal, setInternal] = React31.useState(false);
   const ref = React31.useRef(null);
+  const [popStyle, setPopStyle] = React31.useState({});
   const open = controlled ?? internal;
   function setOpen(v) {
     if (controlled === void 0) setInternal(v);
     onOpenChange?.(v);
   }
+  function openPopover() {
+    if (ref.current) {
+      setPopStyle({ position: "fixed", zIndex: 9999, ...calcStyle(ref.current, placement) });
+    }
+    setOpen(true);
+  }
   React31.useEffect(() => {
     if (triggerOn !== "click") return;
     function handler(e) {
@@ -5487,14 +5566,17 @@ function Popover({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [triggerOn]);
-  const hoverProps = triggerOn === "hover" ? { onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false) } : {};
+  const hoverProps = triggerOn === "hover" ? { onMouseEnter: openPopover, onMouseLeave: () => setOpen(false) } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ref, className: "relative inline-block", ...hoverProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { onClick: () => triggerOn === "click" && setOpen(!open), children: trigger }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn(
-      "absolute z-50 min-w-max rounded-xl border border-border glass shadow-2xl",
-      PLACEMENT_CLASSES[placement],
-      className
-    ), children: content })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { onClick: () => triggerOn === "click" && (open ? setOpen(false) : openPopover()), children: trigger }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "div",
+      {
+        className: cn("min-w-max rounded-xl border border-border glass shadow-2xl", className),
+        style: popStyle,
+        children: content
+      }
+    ) })
   ] });
 }
 
@@ -7956,6 +8038,7 @@ function Wizard({
   Badge,
   Breadcrumb,
   Button,
+  COLOR_PALETTE,
   Calendar,
   Card,
   CardContent,
@@ -8025,6 +8108,7 @@ function Wizard({
   Tabs,
   TagInput,
   Textarea,
+  ThemeProvider,
   Timeline,
   ToastProvider,
   ToggleSwitch,
@@ -8033,5 +8117,6 @@ function Wizard({
   TreeView,
   Widget,
   Wizard,
+  useTheme,
   useToast
 });