@underverse-ui/underverse 0.2.107 → 0.2.109

package/dist/index.js

@@ -3795,7 +3795,7 @@ var Popover = ({
               "div",
               {
                 className: cn(
-                  "rounded-2xl border bg-popover text-popover-foreground shadow-md",
+                  "rounded-2xl md:rounded-3xl border bg-popover text-popover-foreground shadow-md",
                   "backdrop-blur-sm bg-popover/95 border-border/60 p-4",
                   contentClassName
                 ),
@@ -4930,98 +4930,108 @@ var Combobox = ({
       `${itemValue}-${index}`
     );
   };
-  const dropdownBody = /* @__PURE__ */ jsxs22("div", { "data-combobox-dropdown": true, "data-state": open ? "open" : "closed", role: "listbox", id: `${resolvedId}-listbox`, className: "w-full", children: [
-    enableSearch && /* @__PURE__ */ jsx25("div", { className: "relative p-2.5 border-b border-border/30", children: /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx25(Search3, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 transition-colors peer-focus:text-primary" }),
-      /* @__PURE__ */ jsx25(
-        "input",
-        {
-          ref: inputRef,
-          value: query,
-          onChange: (e) => {
-            setQuery(e.target.value);
-            setActiveIndex(null);
-          },
-          onKeyDown: (e) => {
-            if (e.key === "ArrowDown") {
-              e.preventDefault();
-              setActiveIndex((prev) => {
-                const next = prev === null ? 0 : prev + 1;
-                return next >= filteredOptions.length ? 0 : next;
-              });
-            } else if (e.key === "ArrowUp") {
-              e.preventDefault();
-              setActiveIndex((prev) => {
-                const next = prev === null ? filteredOptions.length - 1 : prev - 1;
-                return next < 0 ? filteredOptions.length - 1 : next;
-              });
-            } else if (e.key === "Enter") {
-              e.preventDefault();
-              if (activeIndex !== null && filteredOptions[activeIndex] && !getOptionDisabled(filteredOptions[activeIndex])) {
-                handleSelect(filteredOptions[activeIndex]);
-              }
-            } else if (e.key === "Escape") {
-              e.preventDefault();
-              setOpen(false);
+  const dropdownBody = /* @__PURE__ */ jsxs22(
+    "div",
+    {
+      "data-combobox-dropdown": true,
+      "data-state": open ? "open" : "closed",
+      role: "listbox",
+      id: `${resolvedId}-listbox`,
+      className: "w-full rounded-2xl md:rounded-3xl overflow-hidden",
+      children: [
+        enableSearch && /* @__PURE__ */ jsx25("div", { className: "relative p-2.5 border-b border-border/30", children: /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx25(Search3, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 transition-colors peer-focus:text-primary" }),
+          /* @__PURE__ */ jsx25(
+            "input",
+            {
+              ref: inputRef,
+              value: query,
+              onChange: (e) => {
+                setQuery(e.target.value);
+                setActiveIndex(null);
+              },
+              onKeyDown: (e) => {
+                if (e.key === "ArrowDown") {
+                  e.preventDefault();
+                  setActiveIndex((prev) => {
+                    const next = prev === null ? 0 : prev + 1;
+                    return next >= filteredOptions.length ? 0 : next;
+                  });
+                } else if (e.key === "ArrowUp") {
+                  e.preventDefault();
+                  setActiveIndex((prev) => {
+                    const next = prev === null ? filteredOptions.length - 1 : prev - 1;
+                    return next < 0 ? filteredOptions.length - 1 : next;
+                  });
+                } else if (e.key === "Enter") {
+                  e.preventDefault();
+                  if (activeIndex !== null && filteredOptions[activeIndex] && !getOptionDisabled(filteredOptions[activeIndex])) {
+                    handleSelect(filteredOptions[activeIndex]);
+                  }
+                } else if (e.key === "Escape") {
+                  e.preventDefault();
+                  setOpen(false);
+                }
+              },
+              placeholder: searchPlaceholder,
+              className: cn(
+                "peer w-full rounded-xl bg-muted/40 py-2.5 pl-9 pr-3 text-sm",
+                "border border-transparent",
+                "focus:outline-none focus:bg-background focus:border-primary/30 focus:ring-2 focus:ring-primary/10",
+                "transition-all duration-200",
+                "placeholder:text-muted-foreground/50"
+              ),
+              "aria-autocomplete": "list",
+              "aria-activedescendant": activeIndex != null ? `combobox-item-${activeIndex}` : void 0
             }
-          },
-          placeholder: searchPlaceholder,
-          className: cn(
-            "peer w-full rounded-xl bg-muted/40 py-2.5 pl-9 pr-3 text-sm",
-            "border border-transparent",
-            "focus:outline-none focus:bg-background focus:border-primary/30 focus:ring-2 focus:ring-primary/10",
-            "transition-all duration-200",
-            "placeholder:text-muted-foreground/50"
           ),
-          "aria-autocomplete": "list",
-          "aria-activedescendant": activeIndex != null ? `combobox-item-${activeIndex}` : void 0
-        }
-      ),
-      query && /* @__PURE__ */ jsx25(
-        "button",
-        {
-          type: "button",
-          onClick: () => setQuery(""),
-          className: "absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors",
-          children: /* @__PURE__ */ jsx25(X8, { className: "h-3.5 w-3.5" })
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx25("div", { className: "overflow-y-auto overscroll-contain", style: { maxHeight }, children: /* @__PURE__ */ jsx25("div", { className: "p-1.5", children: loading2 ? /* @__PURE__ */ jsx25("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-      /* @__PURE__ */ jsx25("div", { className: "relative", children: /* @__PURE__ */ jsx25("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
-      /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: loadingText })
-    ] }) }) : filteredOptions.length > 0 ? groupedOptions ? (
-      // Render grouped options with global index tracking
-      (() => {
-        let globalIndex = 0;
-        return Object.entries(groupedOptions).map(([group, items]) => /* @__PURE__ */ jsxs22("div", { className: cn(globalIndex > 0 && "mt-2 pt-2 border-t border-border/30"), children: [
-          /* @__PURE__ */ jsx25("div", { className: "px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: group }),
-          /* @__PURE__ */ jsx25("ul", { className: "space-y-0.5", children: items.map((item) => {
-            const index = globalIndex++;
-            return renderOptionItem(item, index);
-          }) })
-        ] }, group));
-      })()
-    ) : (
-      // Render flat options
-      /* @__PURE__ */ jsx25("ul", { className: "space-y-0.5", children: filteredOptions.map((item, index) => renderOptionItem(item, index)) })
-    ) : /* @__PURE__ */ jsx25("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-      /* @__PURE__ */ jsx25("div", { className: "w-12 h-12 rounded-full bg-muted/50 flex items-center justify-center", children: /* @__PURE__ */ jsx25(SearchX, { className: "h-6 w-6 text-muted-foreground/60" }) }),
-      /* @__PURE__ */ jsxs22("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx25("span", { className: "block text-sm font-medium text-foreground", children: emptyText }),
-        query && /* @__PURE__ */ jsx25("span", { className: "block text-xs text-muted-foreground", children: "Try a different search term" })
-      ] }),
-      query && /* @__PURE__ */ jsx25(
-        "button",
-        {
-          type: "button",
-          onClick: () => setQuery(""),
-          className: "px-3 py-1.5 text-xs font-medium text-primary bg-primary/10 rounded-full hover:bg-primary/20 transition-colors",
-          children: "Clear search"
-        }
-      )
-    ] }) }) }) })
-  ] });
+          query && /* @__PURE__ */ jsx25(
+            "button",
+            {
+              type: "button",
+              onClick: () => setQuery(""),
+              className: "absolute right-3 top-1/2 -translate-y-1/2 p-0.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors",
+              children: /* @__PURE__ */ jsx25(X8, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx25("div", { className: "overflow-y-auto overscroll-contain", style: { maxHeight }, children: /* @__PURE__ */ jsx25("div", { className: "p-1.5", children: loading2 ? /* @__PURE__ */ jsx25("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ jsx25("div", { className: "relative", children: /* @__PURE__ */ jsx25("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
+          /* @__PURE__ */ jsx25("span", { className: "text-sm text-muted-foreground", children: loadingText })
+        ] }) }) : filteredOptions.length > 0 ? groupedOptions ? (
+          // Render grouped options with global index tracking
+          (() => {
+            let globalIndex = 0;
+            return Object.entries(groupedOptions).map(([group, items]) => /* @__PURE__ */ jsxs22("div", { className: cn(globalIndex > 0 && "mt-2 pt-2 border-t border-border/30"), children: [
+              /* @__PURE__ */ jsx25("div", { className: "px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: group }),
+              /* @__PURE__ */ jsx25("ul", { className: "space-y-0.5", children: items.map((item) => {
+                const index = globalIndex++;
+                return renderOptionItem(item, index);
+              }) })
+            ] }, group));
+          })()
+        ) : (
+          // Render flat options
+          /* @__PURE__ */ jsx25("ul", { className: "space-y-0.5", children: filteredOptions.map((item, index) => renderOptionItem(item, index)) })
+        ) : /* @__PURE__ */ jsx25("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+          /* @__PURE__ */ jsx25("div", { className: "w-12 h-12 rounded-full bg-muted/50 flex items-center justify-center", children: /* @__PURE__ */ jsx25(SearchX, { className: "h-6 w-6 text-muted-foreground/60" }) }),
+          /* @__PURE__ */ jsxs22("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx25("span", { className: "block text-sm font-medium text-foreground", children: emptyText }),
+            query && /* @__PURE__ */ jsx25("span", { className: "block text-xs text-muted-foreground", children: "Try a different search term" })
+          ] }),
+          query && /* @__PURE__ */ jsx25(
+            "button",
+            {
+              type: "button",
+              onClick: () => setQuery(""),
+              className: "px-3 py-1.5 text-xs font-medium text-primary bg-primary/10 rounded-full hover:bg-primary/20 transition-colors",
+              children: "Clear search"
+            }
+          )
+        ] }) }) }) })
+      ]
+    }
+  );
   const sizeStyles8 = {
     sm: "h-8 py-1.5 text-sm md:h-7 md:text-xs",
     md: "h-10 py-2 text-sm",
@@ -5034,7 +5044,7 @@ var Combobox = ({
     filled: "border-0 bg-muted/50 hover:bg-muted/80"
   };
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
-  const radiusClass = size === "sm" ? "rounded-lg" : "rounded-xl";
+  const radiusClass = "rounded-full";
   const verticalGap = size === "sm" ? "space-y-1.5" : "space-y-2";
   const triggerButtonBaseProps = {
     ref: triggerRef,
@@ -5139,12 +5149,12 @@ var Combobox = ({
         placement: "bottom-start",
         matchTriggerWidth: true,
         className: "z-9999",
-        contentClassName: "p-0",
+        contentClassName: "p-0 overflow-hidden rounded-2xl md:rounded-3xl",
         children: dropdownBody
       }
     ) : /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
       triggerButtonInline,
-      open && /* @__PURE__ */ jsx25("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ jsx25("div", { className: "rounded-2xl border text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", children: dropdownBody }) })
+      open && /* @__PURE__ */ jsx25("div", { className: "absolute left-0 top-full mt-1 z-50 w-full", children: /* @__PURE__ */ jsx25("div", { className: "rounded-2xl md:rounded-3xl overflow-hidden border text-popover-foreground shadow-md backdrop-blur-sm bg-popover/95 border-border/60", children: dropdownBody }) })
     ] }),
     (helperText || error) && /* @__PURE__ */ jsxs22("p", { className: cn("text-xs transition-colors duration-200 flex items-center gap-1.5", error ? "text-destructive" : "text-muted-foreground"), children: [
       error && /* @__PURE__ */ jsx25("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "w-3.5 h-3.5 shrink-0", children: /* @__PURE__ */ jsx25(
@@ -5979,7 +5989,7 @@ var DatePicker = ({
         contentClassName: cn(
           "p-0",
           "backdrop-blur-xl bg-popover/95 border-border/40 shadow-2xl",
-          "rounded-2xl",
+          "rounded-2xl md:rounded-3xl",
           // Keep usable on small viewports (wheel scroll should stay within the popover if it overflows)
           "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto overscroll-contain",
           size === "sm" ? "p-4" : "p-5",
@@ -6282,7 +6292,7 @@ var DateRangePicker = ({ startDate, endDate, onChange, placeholder = "Select dat
       contentClassName: cn(
         "p-0",
         "backdrop-blur-xl bg-popover/95 border-border/40 shadow-2xl",
-        "rounded-2xl",
+        "rounded-2xl md:rounded-3xl",
         "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto overscroll-contain",
         size === "sm" ? "p-3" : "p-5",
         "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
@@ -6935,6 +6945,14 @@ function WheelColumn({
   const wheelDeltaRef = React25.useRef(0);
   const scrollEndTimeoutRef = React25.useRef(null);
   const suppressScrollSelectUntilRef = React25.useRef(0);
+  const suppressItemClickUntilRef = React25.useRef(0);
+  const dragRef = React25.useRef(null);
+  const draggingRef = React25.useRef(false);
+  const inertialRef = React25.useRef(false);
+  const inertiaRafRef = React25.useRef(null);
+  const inertiaVelocityRef = React25.useRef(0);
+  const inertiaLastTimeRef = React25.useRef(0);
+  const moveSamplesRef = React25.useRef([]);
   const loop = true;
   const ui = React25.useMemo(() => {
     if (size === "sm") {
@@ -7005,6 +7023,10 @@ function WheelColumn({
         window.clearTimeout(scrollEndTimeoutRef.current);
         scrollEndTimeoutRef.current = null;
       }
+      if (inertiaRafRef.current != null) {
+        cancelAnimationFrame(inertiaRafRef.current);
+        inertiaRafRef.current = null;
+      }
       cancelAnimationFrame(rafRef.current);
     };
   }, [animate, baseOffset, extendedItems.length, getNearestVirtualIndex, itemHeight, loop, scrollRef, valueIndex]);
@@ -7102,6 +7124,138 @@ function WheelColumn({
     const from = lastVirtualIndexRef.current ?? fallback;
     return getNearestVirtualIndex(valueIndex, from);
   }, [baseOffset, getNearestVirtualIndex, items.length, loop, valueIndex]);
+  const commitFromScrollTop = React25.useCallback(
+    (behavior) => {
+      const el = scrollRef.current;
+      if (!el) return;
+      if (items.length <= 0) return;
+      const len = items.length;
+      const maxVirtual = Math.max(0, extendedItems.length - 1);
+      const idxVirtual = clamp3(Math.round(el.scrollTop / itemHeight), 0, maxVirtual);
+      const realIndex = (idxVirtual % len + len) % len;
+      const snappedVirtual = loop ? getNearestVirtualIndex(realIndex, idxVirtual) : realIndex;
+      lastVirtualIndexRef.current = snappedVirtual;
+      suppressScrollSelectUntilRef.current = Date.now() + 350;
+      if (behavior === "auto") el.scrollTop = snappedVirtual * itemHeight;
+      else el.scrollTo({ top: snappedVirtual * itemHeight, behavior });
+      onSelect(items[realIndex]);
+      if (loop) {
+        const min = len;
+        const max = len * 2 - 1;
+        let centered = snappedVirtual;
+        if (centered < min) centered += len;
+        if (centered > max) centered -= len;
+        if (centered !== snappedVirtual) {
+          lastVirtualIndexRef.current = centered;
+          el.scrollTop = centered * itemHeight;
+        }
+      }
+    },
+    [extendedItems.length, getNearestVirtualIndex, itemHeight, items, loop, onSelect, scrollRef]
+  );
+  const onPointerDown = (e) => {
+    if (e.pointerType !== "mouse") return;
+    if (e.button !== 0) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    e.preventDefault();
+    setFocusedColumn(column);
+    draggingRef.current = true;
+    inertialRef.current = false;
+    if (inertiaRafRef.current != null) {
+      cancelAnimationFrame(inertiaRafRef.current);
+      inertiaRafRef.current = null;
+    }
+    if (scrollEndTimeoutRef.current != null) {
+      window.clearTimeout(scrollEndTimeoutRef.current);
+      scrollEndTimeoutRef.current = null;
+    }
+    dragRef.current = { pointerId: e.pointerId, startY: e.clientY, startScrollTop: el.scrollTop, moved: false };
+    moveSamplesRef.current = [{ t: performance.now(), top: el.scrollTop }];
+    try {
+      el.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  };
+  const onPointerMove = (e) => {
+    const el = scrollRef.current;
+    const drag = dragRef.current;
+    if (!el || !drag) return;
+    if (e.pointerId !== drag.pointerId) return;
+    e.preventDefault();
+    const dy = e.clientY - drag.startY;
+    if (!drag.moved && Math.abs(dy) < 4) return;
+    if (!drag.moved) {
+      drag.moved = true;
+      suppressItemClickUntilRef.current = Date.now() + 400;
+    }
+    suppressScrollSelectUntilRef.current = Date.now() + 500;
+    el.scrollTop = drag.startScrollTop - dy;
+    const now = performance.now();
+    const samples = moveSamplesRef.current;
+    samples.push({ t: now, top: el.scrollTop });
+    while (samples.length > 6 && samples[0] && now - samples[0].t > 120) samples.shift();
+    while (samples.length > 8) samples.shift();
+    if (samples.length >= 2) {
+      const oldest = samples[0];
+      const dt = now - oldest.t;
+      if (dt > 0) inertiaVelocityRef.current = (el.scrollTop - oldest.top) / dt;
+    }
+  };
+  const startInertia = React25.useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    if (items.length <= 0) return;
+    inertialRef.current = true;
+    suppressItemClickUntilRef.current = Date.now() + 600;
+    inertiaLastTimeRef.current = performance.now();
+    const len = items.length;
+    const cycle = len * itemHeight;
+    const frictionPerFrame = 0.92;
+    const tick = () => {
+      const now = performance.now();
+      const last = inertiaLastTimeRef.current || now;
+      const dt = Math.min(48, Math.max(0, now - last));
+      inertiaLastTimeRef.current = now;
+      let v = inertiaVelocityRef.current;
+      el.scrollTop += v * dt;
+      if (loop && cycle > 0) {
+        if (el.scrollTop < cycle * 0.5) el.scrollTop += cycle;
+        else if (el.scrollTop > cycle * 2.5) el.scrollTop -= cycle;
+      }
+      const decay = Math.pow(frictionPerFrame, dt / 16);
+      v *= decay;
+      inertiaVelocityRef.current = v;
+      if (Math.abs(v) < 0.03) {
+        inertialRef.current = false;
+        inertiaRafRef.current = null;
+        commitFromScrollTop("smooth");
+        return;
+      }
+      inertiaRafRef.current = requestAnimationFrame(tick);
+    };
+    inertiaRafRef.current = requestAnimationFrame(tick);
+  }, [commitFromScrollTop, itemHeight, items.length, loop, scrollRef]);
+  const endDrag = (pointerId) => {
+    const el = scrollRef.current;
+    const drag = dragRef.current;
+    if (!el || !drag) return;
+    if (pointerId !== drag.pointerId) return;
+    dragRef.current = null;
+    draggingRef.current = false;
+    try {
+      el.releasePointerCapture(pointerId);
+    } catch {
+    }
+    const v = inertiaVelocityRef.current;
+    const shouldFlick = drag.moved && Math.abs(v) >= 0.35;
+    if (shouldFlick) {
+      startInertia();
+    } else {
+      inertialRef.current = false;
+      commitFromScrollTop("smooth");
+    }
+  };
   return /* @__PURE__ */ jsxs26("div", { className: cn("flex-1", ui.columnWidth), children: [
     /* @__PURE__ */ jsx31("div", { className: cn(ui.label, "font-bold uppercase tracking-wider text-muted-foreground/70 text-center"), children: labelText }),
     /* @__PURE__ */ jsxs26("div", { className: "relative rounded-xl bg-muted/30 overflow-hidden", style: { height }, children: [
@@ -7121,6 +7275,7 @@ function WheelColumn({
           className: cn(
             "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory",
             "scrollbar-none",
+            "select-none cursor-grab active:cursor-grabbing",
             "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-xl"
           ),
           style: { paddingTop: paddingY, paddingBottom: paddingY },
@@ -7129,7 +7284,15 @@ function WheelColumn({
           tabIndex: focused ? 0 : -1,
           onKeyDown: (e) => onKeyDown(e, column),
           onFocus: () => setFocusedColumn(column),
-          onScroll: handleScroll,
+          onScroll: () => {
+            if (draggingRef.current) return;
+            if (inertialRef.current) return;
+            handleScroll();
+          },
+          onPointerDown,
+          onPointerMove,
+          onPointerUp: (e) => endDrag(e.pointerId),
+          onPointerCancel: (e) => endDrag(e.pointerId),
           children: /* @__PURE__ */ jsx31("div", { children: extendedItems.map((n, index) => {
             const dist = Math.abs(index - currentVirtual);
             const distForVisual = Math.min(dist, 2);
@@ -7154,6 +7317,7 @@ function WheelColumn({
                   opacity
                 },
                 onClick: () => {
+                  if (Date.now() < suppressItemClickUntilRef.current) return;
                   const el = scrollRef.current;
                   if (!el) return;
                   suppressScrollSelectUntilRef.current = Date.now() + 350;
@@ -7775,7 +7939,13 @@ function TimePicker({
         label,
         required && /* @__PURE__ */ jsx31("span", { className: "text-destructive ml-1", children: "*" })
       ] }) }),
-      /* @__PURE__ */ jsx31("div", { className: cn(panelSz.contentPadding, "rounded-2xl border border-border/60 bg-card/95 backdrop-blur-sm shadow-xl", className), children: timePickerContent })
+      /* @__PURE__ */ jsx31(
+        "div",
+        {
+          className: cn(panelSz.contentPadding, "rounded-2xl md:rounded-3xl border border-border/60 bg-card/95 backdrop-blur-sm shadow-xl", className),
+          children: timePickerContent
+        }
+      )
     ] });
   }
   return /* @__PURE__ */ jsxs26("div", { className: "w-full", ...rest, children: [
@@ -7806,7 +7976,7 @@ function TimePicker({
         contentWidth: matchTriggerWidth ? void 0 : contentWidth,
         contentClassName: cn(
           panelSz.contentPadding,
-          "rounded-2xl border bg-popover/98 backdrop-blur-md shadow-2xl",
+          "rounded-2xl md:rounded-3xl border bg-popover/98 backdrop-blur-md shadow-2xl",
           error && "border-destructive/40",
           success && "border-success/40",
           !error && !success && "border-border/60",
@@ -7987,7 +8157,7 @@ var DateTimePicker = ({
           }
         ),
         contentClassName: cn(
-          "w-auto p-0 rounded-2xl",
+          "w-auto p-0 rounded-2xl md:rounded-3xl",
           // Keep the popover usable on small viewports
           "max-w-[calc(100vw-1rem)] max-h-[calc(100vh-6rem)] overflow-auto"
         ),
@@ -10597,7 +10767,7 @@ var MultiCombobox = ({
       item.value
     );
   };
-  const dropdownBody = /* @__PURE__ */ jsxs34("div", { "data-combobox-dropdown": true, "data-state": open ? "open" : "closed", className: "w-full", children: [
+  const dropdownBody = /* @__PURE__ */ jsxs34("div", { "data-combobox-dropdown": true, "data-state": open ? "open" : "closed", className: "w-full rounded-2xl md:rounded-3xl overflow-hidden", children: [
     value.length > 0 && /* @__PURE__ */ jsxs34("div", { className: "px-3 py-2 border-b border-border/40 flex items-center justify-between bg-muted/30", children: [
       /* @__PURE__ */ jsxs34("span", { className: "text-xs font-medium text-muted-foreground", children: [
         value.length,
@@ -10701,7 +10871,7 @@ var MultiCombobox = ({
       "aria-controls": listboxId,
       "aria-invalid": !!error,
       className: cn(
-        "group flex w-full items-center gap-2 rounded-2xl min-h-10 transition-all duration-200",
+        "group flex w-full items-center gap-2 rounded-full min-h-10 transition-all duration-200",
         "px-3 py-2",
         variantStyles6[variant],
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
@@ -10835,7 +11005,7 @@ var MultiCombobox = ({
         placement: "bottom-start",
         matchTriggerWidth: true,
         className: "z-9999",
-        contentClassName: "p-0",
+        contentClassName: "p-0 overflow-hidden rounded-2xl md:rounded-3xl",
         children: dropdownBody
       }
     ),
@@ -11127,7 +11297,7 @@ RadioGroupItem.displayName = "RadioGroupItem";
 
 // ../../components/ui/Slider.tsx
 import * as React34 from "react";
-import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 var SIZE_STYLES = {
   sm: {
     track: "h-1",
@@ -11145,16 +11315,22 @@ var SIZE_STYLES = {
     container: "py-3"
   }
 };
+var clamp5 = (n, min, max) => Math.min(max, Math.max(min, n));
 var Slider = React34.forwardRef(
   ({
     className,
+    mode = "single",
     value,
     defaultValue = 0,
+    rangeValue,
+    defaultRangeValue,
     min = 0,
     max = 100,
     step = 1,
     onChange,
     onValueChange,
+    onRangeChange,
+    onRangeValueChange,
     onMouseUp,
     onTouchEnd,
     label,
@@ -11171,20 +11347,125 @@ var Slider = React34.forwardRef(
     noFocus = true,
     ...props
   }, ref) => {
+    const isRange = mode === "range";
+    const trackRef = React34.useRef(null);
     const [internalValue, setInternalValue] = React34.useState(defaultValue);
+    const [internalRange, setInternalRange] = React34.useState(() => {
+      if (defaultRangeValue) return defaultRangeValue;
+      const v = clamp5(defaultValue, min, max);
+      return [min, v];
+    });
+    const [activeThumb, setActiveThumb] = React34.useState(null);
+    const dragRef = React34.useRef(null);
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
-    const handleChange = (e) => {
-      const newValue = Number(e.target.value);
-      if (!isControlled) {
-        setInternalValue(newValue);
+    const isRangeControlled = rangeValue !== void 0;
+    const currentRange = isRangeControlled ? rangeValue : internalRange;
+    const rangeMin = clamp5(currentRange[0] ?? min, min, max);
+    const rangeMax = clamp5(currentRange[1] ?? max, min, max);
+    const normalizedRange = rangeMin <= rangeMax ? [rangeMin, rangeMax] : [rangeMax, rangeMin];
+    const handleSingleChange = React34.useCallback(
+      (e) => {
+        const newValue = Number(e.target.value);
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+        onValueChange?.(newValue);
+      },
+      [isControlled, onChange, onValueChange]
+    );
+    const emitRange = React34.useCallback(
+      (next) => {
+        onRangeChange?.(next);
+        onRangeValueChange?.(next);
+      },
+      [onRangeChange, onRangeValueChange]
+    );
+    const handleRangeChange = React34.useCallback(
+      (thumb) => (e) => {
+        const nextVal = Number(e.target.value);
+        const [curMin, curMax] = normalizedRange;
+        const next = thumb === "min" ? [Math.min(nextVal, curMax), curMax] : [curMin, Math.max(nextVal, curMin)];
+        if (!isRangeControlled) setInternalRange(next);
+        emitRange(next);
+      },
+      [emitRange, isRangeControlled, normalizedRange]
+    );
+    const denom = Math.max(1e-9, max - min);
+    const percentage = (currentValue - min) / denom * 100;
+    const rangeStartPct = (normalizedRange[0] - min) / denom * 100;
+    const rangeEndPct = (normalizedRange[1] - min) / denom * 100;
+    const sizeStyles8 = SIZE_STYLES[size];
+    const displayValue = React34.useMemo(() => {
+      if (isRange) {
+        const a = formatValue ? formatValue(normalizedRange[0]) : normalizedRange[0].toString();
+        const b = formatValue ? formatValue(normalizedRange[1]) : normalizedRange[1].toString();
+        return `${a} \u2013 ${b}`;
+      }
+      return formatValue ? formatValue(currentValue) : currentValue.toString();
+    }, [currentValue, formatValue, isRange, normalizedRange]);
+    const quantize = React34.useCallback(
+      (v) => {
+        const stepped = Math.round((v - min) / step) * step + min;
+        const fixed = Number(stepped.toFixed(10));
+        return clamp5(fixed, min, max);
+      },
+      [max, min, step]
+    );
+    const valueFromClientX = React34.useCallback(
+      (clientX) => {
+        const el = trackRef.current;
+        if (!el) return min;
+        const rect = el.getBoundingClientRect();
+        const x = clamp5(clientX - rect.left, 0, rect.width);
+        const ratio = rect.width <= 0 ? 0 : x / rect.width;
+        return quantize(min + ratio * (max - min));
+      },
+      [max, min, quantize]
+    );
+    const startRangeDrag = (e) => {
+      if (!isRange) return;
+      if (disabled) return;
+      if (orientation !== "horizontal") return;
+      if (e.button !== 0) return;
+      const nextValue = valueFromClientX(e.clientX);
+      const [curMin, curMax] = normalizedRange;
+      const distToMin = Math.abs(nextValue - curMin);
+      const distToMax = Math.abs(nextValue - curMax);
+      const thumb = distToMin <= distToMax ? "min" : "max";
+      setActiveThumb(thumb);
+      dragRef.current = { pointerId: e.pointerId, thumb };
+      try {
+        e.currentTarget.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      const next = thumb === "min" ? [Math.min(nextValue, curMax), curMax] : [curMin, Math.max(nextValue, curMin)];
+      if (!isRangeControlled) setInternalRange(next);
+      emitRange(next);
+    };
+    const moveRangeDrag = (e) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      if (e.pointerId !== drag.pointerId) return;
+      const nextValue = valueFromClientX(e.clientX);
+      const [curMin, curMax] = normalizedRange;
+      const next = drag.thumb === "min" ? [Math.min(nextValue, curMax), curMax] : [curMin, Math.max(nextValue, curMin)];
+      if (!isRangeControlled) setInternalRange(next);
+      emitRange(next);
+    };
+    const endRangeDrag = (e) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      if (e.pointerId !== drag.pointerId) return;
+      dragRef.current = null;
+      onMouseUp?.();
+      onTouchEnd?.();
+      try {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      } catch {
       }
-      onChange?.(newValue);
-      onValueChange?.(newValue);
     };
-    const percentage = (currentValue - min) / (max - min) * 100;
-    const sizeStyles8 = SIZE_STYLES[size];
-    const displayValue = formatValue ? formatValue(currentValue) : currentValue.toString();
     if (orientation === "vertical") {
     }
     return /* @__PURE__ */ jsxs36("div", { className: cn("w-full space-y-2", containerClassName), children: [
@@ -11192,65 +11473,129 @@ var Slider = React34.forwardRef(
         label && /* @__PURE__ */ jsx41("label", { className: cn("text-sm font-medium text-foreground", labelClassName), children: label }),
         showValue && /* @__PURE__ */ jsx41("span", { className: cn("text-xs font-mono text-muted-foreground min-w-8 text-right", valueClassName), children: displayValue })
       ] }),
-      /* @__PURE__ */ jsxs36("div", { className: cn("relative flex items-center", sizeStyles8.container), children: [
-        /* @__PURE__ */ jsx41("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: /* @__PURE__ */ jsx41("div", { className: "absolute left-0 top-0 h-full bg-primary rounded-full", style: { width: `${percentage}%` } }) }),
-        /* @__PURE__ */ jsx41(
-          "input",
+      /* @__PURE__ */ jsxs36("div", { ref: trackRef, className: cn("relative flex items-center", sizeStyles8.container), children: [
+        /* @__PURE__ */ jsx41("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: isRange ? /* @__PURE__ */ jsx41(
+          "div",
           {
-            ref,
-            type: "range",
-            min,
-            max,
-            step,
-            value: currentValue,
-            onChange: handleChange,
-            onMouseUp,
-            onTouchEnd,
-            disabled,
-            className: cn(
-              // Base styles
-              "absolute w-full h-full appearance-none bg-transparent cursor-pointer",
-              !noFocus && "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background rounded-full",
-              noFocus && "outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none",
-              // Webkit styles for thumb
-              "[&::-webkit-slider-thumb]:appearance-none",
-              "[&::-webkit-slider-thumb]:bg-primary",
-              "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-background",
-              "[&::-webkit-slider-thumb]:rounded-full",
-              "[&::-webkit-slider-thumb]:shadow-md",
-              "[&::-webkit-slider-thumb]:cursor-pointer",
-              "[&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-150",
-              size === "sm" && "[&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3",
-              size === "md" && "[&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4",
-              size === "lg" && "[&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5",
-              // Firefox styles for thumb
-              "[&::-moz-range-thumb]:bg-primary",
-              "[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-background",
-              "[&::-moz-range-thumb]:rounded-full",
-              "[&::-moz-range-thumb]:shadow-md",
-              "[&::-moz-range-thumb]:cursor-pointer",
-              "[&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:duration-150",
-              size === "sm" && "[&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3",
-              size === "md" && "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4",
-              size === "lg" && "[&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5",
-              // Remove default track in Firefox
-              "[&::-moz-range-track]:bg-transparent",
-              "[&::-moz-range-track]:border-transparent",
-              // Hover effects
-              "hover:[&::-webkit-slider-thumb]:scale-110 hover:[&::-webkit-slider-thumb]:shadow-lg",
-              "hover:[&::-moz-range-thumb]:scale-110 hover:[&::-moz-range-thumb]:shadow-lg",
-              // Disabled styles
-              disabled && [
-                "cursor-not-allowed opacity-50",
-                "[&::-webkit-slider-thumb]:cursor-not-allowed [&::-webkit-slider-thumb]:opacity-50",
-                "[&::-moz-range-thumb]:cursor-not-allowed [&::-moz-range-thumb]:opacity-50"
-              ],
-              className,
-              thumbClassName
-            ),
-            ...props
+            className: "absolute top-0 h-full bg-primary rounded-full",
+            style: { left: `${rangeStartPct}%`, width: `${Math.max(0, rangeEndPct - rangeStartPct)}%` }
           }
-        )
+        ) : /* @__PURE__ */ jsx41("div", { className: "absolute left-0 top-0 h-full bg-primary rounded-full", style: { width: `${percentage}%` } }) }),
+        (() => {
+          const baseInputClassName = cn(
+            // Base styles
+            "absolute w-full h-full appearance-none bg-transparent cursor-pointer",
+            !noFocus && "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background rounded-full",
+            noFocus && "outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none",
+            // Webkit styles for thumb
+            "[&::-webkit-slider-thumb]:appearance-none",
+            "[&::-webkit-slider-thumb]:bg-primary",
+            "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-background",
+            "[&::-webkit-slider-thumb]:rounded-full",
+            "[&::-webkit-slider-thumb]:shadow-md",
+            "[&::-webkit-slider-thumb]:cursor-pointer",
+            "[&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-150",
+            size === "sm" && "[&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3",
+            size === "md" && "[&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4",
+            size === "lg" && "[&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5",
+            // Firefox styles for thumb
+            "[&::-moz-range-thumb]:bg-primary",
+            "[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-background",
+            "[&::-moz-range-thumb]:rounded-full",
+            "[&::-moz-range-thumb]:shadow-md",
+            "[&::-moz-range-thumb]:cursor-pointer",
+            "[&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:duration-150",
+            size === "sm" && "[&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3",
+            size === "md" && "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4",
+            size === "lg" && "[&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5",
+            // Remove default track in Firefox
+            "[&::-moz-range-track]:bg-transparent",
+            "[&::-moz-range-track]:border-transparent",
+            // Hover effects
+            "hover:[&::-webkit-slider-thumb]:scale-110 hover:[&::-webkit-slider-thumb]:shadow-lg",
+            "hover:[&::-moz-range-thumb]:scale-110 hover:[&::-moz-range-thumb]:shadow-lg",
+            // Disabled styles
+            disabled && [
+              "cursor-not-allowed opacity-50",
+              "[&::-webkit-slider-thumb]:cursor-not-allowed [&::-webkit-slider-thumb]:opacity-50",
+              "[&::-moz-range-thumb]:cursor-not-allowed [&::-moz-range-thumb]:opacity-50"
+            ],
+            className,
+            thumbClassName
+          );
+          if (!isRange) {
+            return /* @__PURE__ */ jsx41(
+              "input",
+              {
+                ref,
+                type: "range",
+                min,
+                max,
+                step,
+                value: currentValue,
+                onChange: handleSingleChange,
+                onMouseUp,
+                onTouchEnd,
+                disabled,
+                className: baseInputClassName,
+                ...props
+              }
+            );
+          }
+          const minZ = activeThumb === "min" ? "z-20" : "z-10";
+          const maxZ = activeThumb === "max" ? "z-20" : "z-10";
+          return /* @__PURE__ */ jsxs36(Fragment14, { children: [
+            /* @__PURE__ */ jsx41(
+              "div",
+              {
+                className: cn("absolute inset-0 z-30", disabled ? "cursor-not-allowed" : "cursor-pointer"),
+                onPointerDown: startRangeDrag,
+                onPointerMove: moveRangeDrag,
+                onPointerUp: endRangeDrag,
+                onPointerCancel: endRangeDrag
+              }
+            ),
+            /* @__PURE__ */ jsx41(
+              "input",
+              {
+                ref,
+                type: "range",
+                min,
+                max,
+                step,
+                value: normalizedRange[0],
+                onChange: handleRangeChange("min"),
+                onMouseUp,
+                onTouchEnd,
+                disabled,
+                "aria-label": "Minimum value",
+                onPointerDown: () => setActiveThumb("min"),
+                onFocus: () => setActiveThumb("min"),
+                className: cn(baseInputClassName, minZ, "pointer-events-none"),
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx41(
+              "input",
+              {
+                type: "range",
+                min,
+                max,
+                step,
+                value: normalizedRange[1],
+                onChange: handleRangeChange("max"),
+                onMouseUp,
+                onTouchEnd,
+                disabled,
+                "aria-label": "Maximum value",
+                onPointerDown: () => setActiveThumb("max"),
+                onFocus: () => setActiveThumb("max"),
+                className: cn(baseInputClassName, maxZ, "pointer-events-none"),
+                ...props
+              }
+            )
+          ] });
+        })()
       ] })
     ] });
   }
@@ -11260,7 +11605,7 @@ Slider.displayName = "Slider";
 // ../../components/ui/OverlayControls.tsx
 import { Dot as Dot2, Maximize2, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from "lucide-react";
 import React35 from "react";
-import { Fragment as Fragment14, jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx42, jsxs as jsxs37 } from "react/jsx-runtime";
 function OverlayControls({
   mode,
   value,
@@ -11483,7 +11828,7 @@ function OverlayControls({
   const handleSliderMouseLeave = () => {
     setPreviewData(null);
   };
-  return /* @__PURE__ */ jsxs37(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs37(Fragment15, { children: [
     keyboardFeedback && /* @__PURE__ */ jsx42(
       "div",
       {
@@ -11693,7 +12038,7 @@ function OverlayControls({
 // ../../components/ui/CategoryTreeSelect.tsx
 import { useState as useState29, useEffect as useEffect19 } from "react";
 import { ChevronRight as ChevronRight6, ChevronDown as ChevronDown4, Check as Check6, FolderTree, Layers } from "lucide-react";
-import { Fragment as Fragment15, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
 var defaultLabels = {
   emptyText: "No categories",
   selectedText: (count) => `${count} selected`
@@ -11904,7 +12249,7 @@ function CategoryTreeSelect(props) {
           // Modern trigger button styling
           "group flex w-full items-center justify-between px-3 py-2.5",
           "bg-background/80 backdrop-blur-sm border border-border/60",
-          "rounded-2xl h-11 text-sm",
+          "rounded-full h-11 text-sm",
           "hover:bg-accent/10 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
           "transition-all duration-300 ease-out",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
@@ -11930,14 +12275,14 @@ function CategoryTreeSelect(props) {
         ]
       }
     ),
-    isOpen && !disabled && /* @__PURE__ */ jsxs38(Fragment15, { children: [
+    isOpen && !disabled && /* @__PURE__ */ jsxs38(Fragment16, { children: [
       /* @__PURE__ */ jsx43("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
       /* @__PURE__ */ jsx43(
         "div",
         {
           className: cn(
             "absolute z-20 mt-2 w-full max-h-80 overflow-auto",
-            "rounded-2xl border border-border/40 bg-popover/95 text-popover-foreground",
+            "rounded-2xl md:rounded-3xl overflow-hidden border border-border/40 bg-popover/95 text-popover-foreground",
             "shadow-2xl backdrop-blur-xl",
             "p-2",
             "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
@@ -11950,7 +12295,7 @@ function CategoryTreeSelect(props) {
 }
 
 // ../../components/ui/ImageUpload.tsx
-import { useState as useState30, useRef as useRef13, useCallback as useCallback10 } from "react";
+import { useState as useState30, useRef as useRef14, useCallback as useCallback11 } from "react";
 import { Upload, X as X12, Image as ImageIcon, Loader2 as Loader25, Check as Check7 } from "lucide-react";
 import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
 function ImageUpload({
@@ -11971,7 +12316,7 @@ function ImageUpload({
   const [isDragging, setIsDragging] = useState30(false);
   const [uploading, setUploading] = useState30(false);
   const [uploadedImages, setUploadedImages] = useState30([]);
-  const fileInputRef = useRef13(null);
+  const fileInputRef = useRef14(null);
   const { addToast } = useToast();
   const t = useTranslations("OCR.imageUpload");
   const previewSizes = {
@@ -11979,7 +12324,7 @@ function ImageUpload({
     md: "w-24 h-24",
     lg: "w-32 h-32"
   };
-  const handleDragOver = useCallback10(
+  const handleDragOver = useCallback11(
     (e) => {
       e.preventDefault();
       if (!disabled) {
@@ -11988,11 +12333,11 @@ function ImageUpload({
     },
     [disabled]
   );
-  const handleDragLeave = useCallback10((e) => {
+  const handleDragLeave = useCallback11((e) => {
     e.preventDefault();
     setIsDragging(false);
   }, []);
-  const handleFiles = useCallback10(
+  const handleFiles = useCallback11(
     async (files) => {
       if (files.length === 0) return;
       const validFiles = files.filter((file) => {
@@ -12059,7 +12404,7 @@ function ImageUpload({
     },
     [maxSize, addToast, onUpload]
   );
-  const handleDrop = useCallback10(
+  const handleDrop = useCallback11(
     (e) => {
       e.preventDefault();
       setIsDragging(false);
@@ -12069,7 +12414,7 @@ function ImageUpload({
     },
     [disabled, handleFiles]
   );
-  const handleFileSelect = useCallback10(
+  const handleFileSelect = useCallback11(
     (e) => {
       const files = Array.from(e.target.files || []);
       handleFiles(files);
@@ -12174,7 +12519,7 @@ function ImageUpload({
 // ../../components/ui/Carousel.tsx
 import * as React37 from "react";
 import { ChevronLeft as ChevronLeft5, ChevronRight as ChevronRight7 } from "lucide-react";
-import { Fragment as Fragment16, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
 function Carousel({
   children,
   autoScroll = true,
@@ -12386,7 +12731,7 @@ function Carousel({
             ))
           }
         ),
-        showArrows && totalSlides > slidesToShow && /* @__PURE__ */ jsxs40(Fragment16, { children: [
+        showArrows && totalSlides > slidesToShow && /* @__PURE__ */ jsxs40(Fragment17, { children: [
           /* @__PURE__ */ jsx45(
             Button_default,
             {
@@ -12748,7 +13093,7 @@ function FallingIcons({
 // ../../components/ui/List.tsx
 import * as React39 from "react";
 import { ChevronRight as ChevronRight8 } from "lucide-react";
-import { Fragment as Fragment17, jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
 var SIZE_STYLES2 = {
   xs: { label: "text-xs", desc: "text-[11px]", icon: "h-3.5 w-3.5", avatar: "h-6 w-6" },
   sm: { label: "text-[13px]", desc: "text-[12px]", icon: "h-4 w-4", avatar: "h-8 w-8" },
@@ -12900,7 +13245,7 @@ var ListItem = React39.forwardRef(
         }
       }
     } : {};
-    const inner = /* @__PURE__ */ jsxs42(Fragment17, { children: [
+    const inner = /* @__PURE__ */ jsxs42(Fragment18, { children: [
       /* @__PURE__ */ jsxs42("div", { className: cn("flex items-center gap-3", contentClassName, "group/item relative"), ...headerProps, children: [
         avatar && /* @__PURE__ */ jsx47("div", { className: cn("shrink-0", sz.avatar), children: typeof avatar === "string" ? /* @__PURE__ */ jsx47("img", { src: avatar, alt: "", className: cn("rounded-full object-cover", sz.avatar) }) : avatar }),
         Left && !avatar && /* @__PURE__ */ jsx47("span", { className: cn("text-muted-foreground shrink-0", sz.icon), children: /* @__PURE__ */ jsx47(Left, { className: cn(sz.icon) }) }),
@@ -12945,7 +13290,7 @@ var List_default = List;
 // ../../components/ui/Watermark.tsx
 import * as React40 from "react";
 import { createPortal as createPortal5 } from "react-dom";
-import { Fragment as Fragment18, jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
 var PRESETS2 = {
   confidential: { text: "CONFIDENTIAL", color: "rgba(220, 38, 38, 0.15)", rotate: -22, fontSize: 16, fontWeight: "bold" },
   draft: { text: "DRAFT", color: "rgba(59, 130, 246, 0.15)", rotate: -22, fontSize: 18, fontWeight: "bold" },
@@ -13224,7 +13569,7 @@ var Watermark = ({
     }
   );
   if (fullPage) {
-    return /* @__PURE__ */ jsxs43(Fragment18, { children: [
+    return /* @__PURE__ */ jsxs43(Fragment19, { children: [
       children,
       typeof window !== "undefined" ? createPortal5(overlay, document.body) : null
     ] });
@@ -13516,7 +13861,7 @@ var Timeline_default = Timeline;
 import * as React42 from "react";
 import { Pipette, X as X13, Copy, Check as Check8, Palette, History } from "lucide-react";
 import { jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
-var clamp5 = (n, min, max) => Math.max(min, Math.min(max, n));
+var clamp6 = (n, min, max) => Math.max(min, Math.min(max, n));
 function hexToRgb(hex) {
   const str = hex.replace(/^#/, "").trim();
   if (str.length === 3) {
@@ -13534,7 +13879,7 @@ function hexToRgb(hex) {
   return null;
 }
 function rgbToHex(r, g, b) {
-  return `#${[r, g, b].map((v) => clamp5(Math.round(v), 0, 255).toString(16).padStart(2, "0")).join("")}`;
+  return `#${[r, g, b].map((v) => clamp6(Math.round(v), 0, 255).toString(16).padStart(2, "0")).join("")}`;
 }
 function rgbToHsl(r, g, b) {
   r /= 255;
@@ -13595,10 +13940,10 @@ function parseAnyColor(input) {
   }
   const rgbaMatch = s.match(/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(\d*\.?\d+))?\s*\)/i);
   if (rgbaMatch) {
-    const r = clamp5(parseInt(rgbaMatch[1], 10), 0, 255);
-    const g = clamp5(parseInt(rgbaMatch[2], 10), 0, 255);
-    const b = clamp5(parseInt(rgbaMatch[3], 10), 0, 255);
-    const a = rgbaMatch[4] != null ? clamp5(parseFloat(rgbaMatch[4]), 0, 1) : 1;
+    const r = clamp6(parseInt(rgbaMatch[1], 10), 0, 255);
+    const g = clamp6(parseInt(rgbaMatch[2], 10), 0, 255);
+    const b = clamp6(parseInt(rgbaMatch[3], 10), 0, 255);
+    const a = rgbaMatch[4] != null ? clamp6(parseFloat(rgbaMatch[4]), 0, 1) : 1;
     return { r, g, b, a };
   }
   const hslaMatch = s.match(/hsla?\(\s*(\d{1,3}(?:\.\d+)?)\s*,?\s*(\d{1,3}(?:\.\d+)?)%?\s*,?\s*(\d{1,3}(?:\.\d+)?)%?(?:\s*,?\s*(\d*\.?\d+))?\s*\)/i);
@@ -13606,7 +13951,7 @@ function parseAnyColor(input) {
     const h = parseFloat(hslaMatch[1]);
     const sl = parseFloat(hslaMatch[2]);
     const l = parseFloat(hslaMatch[3]);
-    const a = hslaMatch[4] != null ? clamp5(parseFloat(hslaMatch[4]), 0, 1) : 1;
+    const a = hslaMatch[4] != null ? clamp6(parseFloat(hslaMatch[4]), 0, 1) : 1;
     const rgb = hslToRgb(h, sl, l);
     return { ...rgb, a };
   }
@@ -13619,12 +13964,12 @@ function formatOutput({ r, g, b, a }, withAlpha, format) {
   if (format === "hsl" || format === "hsla") {
     const hsl = rgbToHsl(r, g, b);
     if (format === "hsla" || withAlpha) {
-      return `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${clamp5(a, 0, 1)})`;
+      return `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${clamp6(a, 0, 1)})`;
     }
     return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`;
   }
   if (withAlpha || a !== 1) {
-    return `rgba(${clamp5(r, 0, 255)}, ${clamp5(g, 0, 255)}, ${clamp5(b, 0, 255)}, ${clamp5(a, 0, 1)})`;
+    return `rgba(${clamp6(r, 0, 255)}, ${clamp6(g, 0, 255)}, ${clamp6(b, 0, 255)}, ${clamp6(a, 0, 1)})`;
   }
   return rgbToHex(r, g, b);
 }
@@ -13758,7 +14103,7 @@ function ColorPicker({
     emit(next);
   };
   const setAlpha = (aPct) => {
-    const a = clamp5(aPct / 100, 0, 1);
+    const a = clamp6(aPct / 100, 0, 1);
     const next = { ...rgba, a };
     setRgba(next);
     emit(next);
@@ -13837,7 +14182,7 @@ function ColorPicker({
       placement: "bottom-start",
       matchTriggerWidth: variant === "minimal",
       contentWidth: contentWidthByVariant[variant],
-      contentClassName: cn("p-3 rounded-xl border border-border bg-card shadow-lg", contentClassName),
+      contentClassName: cn("p-3 rounded-2xl md:rounded-3xl border border-border bg-card shadow-lg", contentClassName),
       children: /* @__PURE__ */ jsxs45("div", { className: "space-y-3", children: [
         variant !== "minimal" && /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx50(
@@ -14036,7 +14381,7 @@ function ColorPicker({
 
 // ../../components/ui/Grid.tsx
 import React43, { useId as useId7 } from "react";
-import { Fragment as Fragment19, jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
   md: 768,
@@ -14193,7 +14538,7 @@ var GridItem = React43.forwardRef(
       st.opacity = 0;
       st.animation = `uvGridItemFadeIn 0.5s ease-out forwards`;
     }
-    return /* @__PURE__ */ jsxs46(Fragment19, { children: [
+    return /* @__PURE__ */ jsxs46(Fragment20, { children: [
       animationDelay != null && /* @__PURE__ */ jsx51(
         "style",
         {
@@ -14223,12 +14568,12 @@ var Grid = Object.assign(GridRoot, { Item: GridItem });
 var Grid_default = Grid;
 
 // ../../components/ui/LineChart.tsx
-import { useMemo as useMemo13, useState as useState37, useRef as useRef15 } from "react";
+import { useMemo as useMemo14, useState as useState37, useRef as useRef16 } from "react";
 
 // ../../components/ui/ChartTooltip.tsx
 import { useEffect as useEffect23, useState as useState36 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
-import { Fragment as Fragment20, jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
 function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, secondaryValue, items, containerRef }) {
   const [isMounted, setIsMounted] = useState36(false);
   const [position, setPosition] = useState36(null);
@@ -14275,7 +14620,7 @@ function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, seco
                   ":"
                 ] }),
                 /* @__PURE__ */ jsx52("span", { className: "font-semibold ml-auto", children: item.value })
-              ] }, i)) }) : /* @__PURE__ */ jsxs47(Fragment20, { children: [
+              ] }, i)) }) : /* @__PURE__ */ jsxs47(Fragment21, { children: [
                 /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-2", children: [
                   color && /* @__PURE__ */ jsx52("div", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: color } }),
                   /* @__PURE__ */ jsx52("span", { className: "font-semibold", children: value })
@@ -14302,7 +14647,7 @@ function ChartTooltip({ x, y, visible, label, value, color, secondaryLabel, seco
 }
 
 // ../../components/ui/LineChart.tsx
-import { Fragment as Fragment21, jsx as jsx53, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx53, jsxs as jsxs48 } from "react/jsx-runtime";
 function LineChart({
   data,
   width = 400,
@@ -14317,12 +14662,12 @@ function LineChart({
   curved = true,
   className = ""
 }) {
-  const svgRef = useRef15(null);
+  const svgRef = useRef16(null);
   const padding = { top: 20, right: 20, bottom: 40, left: 40 };
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
   const [hoveredPoint, setHoveredPoint] = useState37(null);
-  const { minValue, maxValue, points, linePath, areaPath } = useMemo13(() => {
+  const { minValue, maxValue, points, linePath, areaPath } = useMemo14(() => {
     if (!data.length) return { minValue: 0, maxValue: 0, points: [], linePath: "", areaPath: "" };
     const values = data.map((d) => d.value);
     const min = Math.min(...values);
@@ -14357,7 +14702,7 @@ function LineChart({
     }
     return { minValue: min, maxValue: max, points: pts, linePath: path, areaPath: area };
   }, [data, chartWidth, chartHeight, curved, padding.left, padding.top]);
-  const gridLines = useMemo13(() => {
+  const gridLines = useMemo14(() => {
     const lines = [];
     const steps = 5;
     for (let i = 0; i <= steps; i++) {
@@ -14367,7 +14712,7 @@ function LineChart({
     }
     return lines;
   }, [minValue, maxValue, chartHeight, padding.top]);
-  return /* @__PURE__ */ jsxs48(Fragment21, { children: [
+  return /* @__PURE__ */ jsxs48(Fragment22, { children: [
     /* @__PURE__ */ jsxs48("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
       showGrid && /* @__PURE__ */ jsx53("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsxs48("g", { children: [
         /* @__PURE__ */ jsx53("line", { x1: padding.left, y1: line.y, x2: width - padding.right, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
@@ -14475,8 +14820,8 @@ function LineChart({
 }
 
 // ../../components/ui/BarChart.tsx
-import { useMemo as useMemo14, useState as useState38, useRef as useRef16 } from "react";
-import { Fragment as Fragment22, jsx as jsx54, jsxs as jsxs49 } from "react/jsx-runtime";
+import { useMemo as useMemo15, useState as useState38, useRef as useRef17 } from "react";
+import { Fragment as Fragment23, jsx as jsx54, jsxs as jsxs49 } from "react/jsx-runtime";
 function BarChart({
   data,
   width = 400,
@@ -14491,12 +14836,12 @@ function BarChart({
   barGap = 0.3,
   className = ""
 }) {
-  const svgRef = useRef16(null);
+  const svgRef = useRef17(null);
   const padding = horizontal ? { top: 20, right: 40, bottom: 20, left: 80 } : { top: 20, right: 20, bottom: 40, left: 40 };
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
   const [hoveredBar, setHoveredBar] = useState38(null);
-  const { maxValue, bars, gridLines } = useMemo14(() => {
+  const { maxValue, bars, gridLines } = useMemo15(() => {
     if (!data.length) return { maxValue: 0, bars: [], gridLines: [] };
     const max = Math.max(...data.map((d) => d.value));
     const barCount = data.length;
@@ -14545,12 +14890,12 @@ function BarChart({
     }
     return { maxValue: max, bars: barsData, gridLines: lines };
   }, [data, chartWidth, chartHeight, horizontal, barGap, padding, width, height]);
-  return /* @__PURE__ */ jsxs49(Fragment22, { children: [
+  return /* @__PURE__ */ jsxs49(Fragment23, { children: [
     /* @__PURE__ */ jsxs49("svg", { ref: svgRef, width, height, className: `overflow-visible ${className}`, style: { fontFamily: "inherit" }, children: [
-      showGrid && /* @__PURE__ */ jsx54("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsx54("g", { children: horizontal ? /* @__PURE__ */ jsxs49(Fragment22, { children: [
+      showGrid && /* @__PURE__ */ jsx54("g", { className: "text-muted-foreground/20", children: gridLines.map((line, i) => /* @__PURE__ */ jsx54("g", { children: horizontal ? /* @__PURE__ */ jsxs49(Fragment23, { children: [
         /* @__PURE__ */ jsx54("line", { x1: line.x, y1: line.y1, x2: line.x, y2: line.y2, stroke: "currentColor", strokeDasharray: "4 4" }),
         /* @__PURE__ */ jsx54("text", { x: line.x, y: height - 8, textAnchor: "middle", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: line.value.toFixed(0) })
-      ] }) : /* @__PURE__ */ jsxs49(Fragment22, { children: [
+      ] }) : /* @__PURE__ */ jsxs49(Fragment23, { children: [
         /* @__PURE__ */ jsx54("line", { x1: line.x1, y1: line.y, x2: line.x2, y2: line.y, stroke: "currentColor", strokeDasharray: "4 4" }),
         /* @__PURE__ */ jsx54("text", { x: padding.left - 8, y: line.y + 4, textAnchor: "end", fontSize: "10", className: "text-muted-foreground", fill: "currentColor", children: line.value.toFixed(0) })
       ] }) }, i)) }),
@@ -14657,7 +15002,7 @@ function BarChart({
 }
 
 // ../../components/ui/PieChart.tsx
-import { useMemo as useMemo15, useState as useState39, useRef as useRef17 } from "react";
+import { useMemo as useMemo16, useState as useState39, useRef as useRef18 } from "react";
 import { jsx as jsx55, jsxs as jsxs50 } from "react/jsx-runtime";
 function PieChart({
   data,
@@ -14671,11 +15016,11 @@ function PieChart({
   startAngle = -90,
   className = ""
 }) {
-  const containerRef = useRef17(null);
+  const containerRef = useRef18(null);
   const center = size / 2;
   const radius = size / 2 - 10;
   const innerRadius = donut ? radius - donutWidth : 0;
-  const { segments, total } = useMemo15(() => {
+  const { segments, total } = useMemo16(() => {
     if (!data.length) return { segments: [], total: 0 };
     const sum = data.reduce((acc, d) => acc + d.value, 0);
     let currentAngle = startAngle;
@@ -14822,7 +15167,7 @@ function PieChart({
 }
 
 // ../../components/ui/AreaChart.tsx
-import { useMemo as useMemo16, useState as useState40, useRef as useRef18 } from "react";
+import { useMemo as useMemo17, useState as useState40, useRef as useRef19 } from "react";
 import { jsx as jsx56, jsxs as jsxs51 } from "react/jsx-runtime";
 function getCatmullRomSpline(points) {
   if (points.length < 2) return "";
@@ -14857,12 +15202,12 @@ function AreaChart({
   curved = true,
   className = ""
 }) {
-  const containerRef = useRef18(null);
+  const containerRef = useRef19(null);
   const padding = { top: 20, right: 20, bottom: 40, left: 50 };
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
   const [hoveredPoint, setHoveredPoint] = useState40(null);
-  const { processedSeries, gridLines, maxValue, labels } = useMemo16(() => {
+  const { processedSeries, gridLines, maxValue, labels } = useMemo17(() => {
     if (!series.length || !series[0]?.data?.length) {
       return { processedSeries: [], gridLines: [], maxValue: 0, labels: [] };
     }
@@ -15076,7 +15421,7 @@ function AreaChart({
 }
 
 // ../../components/ui/Sparkline.tsx
-import { useMemo as useMemo17 } from "react";
+import { useMemo as useMemo18 } from "react";
 import { jsx as jsx57, jsxs as jsxs52 } from "react/jsx-runtime";
 function getCatmullRomSpline2(points) {
   if (points.length < 2) return "";
@@ -15115,7 +15460,7 @@ function Sparkline({
   const padding = 4;
   const chartWidth = width - padding * 2;
   const chartHeight = height - padding * 2;
-  const { points, linePath, areaPath, lineLength, trend } = useMemo17(() => {
+  const { points, linePath, areaPath, lineLength, trend } = useMemo18(() => {
     const normalizedData = data.map((d) => typeof d === "number" ? d : d.value);
     if (!normalizedData.length) {
       return { points: [], linePath: "", areaPath: "", lineLength: 0, trend: 0 };
@@ -15219,7 +15564,7 @@ function Sparkline({
 }
 
 // ../../components/ui/RadarChart.tsx
-import { useMemo as useMemo18, useState as useState41, useRef as useRef19 } from "react";
+import { useMemo as useMemo19, useState as useState41, useRef as useRef20 } from "react";
 import { jsx as jsx58, jsxs as jsxs53 } from "react/jsx-runtime";
 function RadarChart({
   series,
@@ -15231,11 +15576,11 @@ function RadarChart({
   animated = true,
   className = ""
 }) {
-  const containerRef = useRef19(null);
+  const containerRef = useRef20(null);
   const center = size / 2;
   const radius = size / 2 - 40;
   const [hoveredPoint, setHoveredPoint] = useState41(null);
-  const { axes, processedSeries, levelPaths } = useMemo18(() => {
+  const { axes, processedSeries, levelPaths } = useMemo19(() => {
     if (!series.length || !series[0]?.data?.length) {
       return { axes: [], processedSeries: [], levelPaths: [] };
     }
@@ -15419,7 +15764,7 @@ function RadarChart({
 }
 
 // ../../components/ui/GaugeChart.tsx
-import { useMemo as useMemo19 } from "react";
+import { useMemo as useMemo20 } from "react";
 import { jsx as jsx59, jsxs as jsxs54 } from "react/jsx-runtime";
 function GaugeChart({
   value,
@@ -15439,7 +15784,7 @@ function GaugeChart({
 }) {
   const center = size / 2;
   const radius = center - thickness / 2 - 10;
-  const { backgroundPath, valuePath, percentage, needleAngle } = useMemo19(() => {
+  const { backgroundPath, valuePath, percentage, needleAngle } = useMemo20(() => {
     const normalizedValue = Math.min(Math.max(value, min), max);
     const pct = (normalizedValue - min) / (max - min);
     const totalAngle = endAngle - startAngle;
@@ -15588,16 +15933,16 @@ function GaugeChart({
 
 // ../../components/ui/ClientOnly.tsx
 import { useEffect as useEffect24, useState as useState42 } from "react";
-import { Fragment as Fragment23, jsx as jsx60 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx60 } from "react/jsx-runtime";
 function ClientOnly({ children, fallback = null }) {
   const [hasMounted, setHasMounted] = useState42(false);
   useEffect24(() => {
     setHasMounted(true);
   }, []);
   if (!hasMounted) {
-    return /* @__PURE__ */ jsx60(Fragment23, { children: fallback });
+    return /* @__PURE__ */ jsx60(Fragment24, { children: fallback });
   }
-  return /* @__PURE__ */ jsx60(Fragment23, { children });
+  return /* @__PURE__ */ jsx60(Fragment24, { children });
 }
 
 // ../../components/ui/Loading.tsx
@@ -16239,7 +16584,7 @@ function validateColumns(columns) {
 }
 
 // ../../components/ui/DataTable/DataTable.tsx
-import { Fragment as Fragment24, jsx as jsx65, jsxs as jsxs59 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx65, jsxs as jsxs59 } from "react/jsx-runtime";
 function DataTable({
   columns,
   data,
@@ -16477,17 +16822,17 @@ function DataTable({
           isCenterAlign && "justify-center",
           !isRightAlign && !isCenterAlign && "justify-start"
         ),
-        children: isRightAlign ? /* @__PURE__ */ jsxs59(Fragment24, { children: [
+        children: isRightAlign ? /* @__PURE__ */ jsxs59(Fragment25, { children: [
           filterContent,
           titleContent
-        ] }) : /* @__PURE__ */ jsxs59(Fragment24, { children: [
+        ] }) : /* @__PURE__ */ jsxs59(Fragment25, { children: [
           titleContent,
           filterContent
         ] })
       }
     );
   };
-  const renderHeader = /* @__PURE__ */ jsx65(Fragment24, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsx65(TableRow, { children: row.map((headerCell, cellIndex) => {
+  const renderHeader = /* @__PURE__ */ jsx65(Fragment25, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ jsx65(TableRow, { children: row.map((headerCell, cellIndex) => {
     const { column: col, colSpan, rowSpan, isLeaf } = headerCell;
     const prevCell = cellIndex > 0 ? row[cellIndex - 1] : null;
     const prevCol = prevCell?.column;
@@ -16976,9 +17321,9 @@ function AccessDenied({
 
 // ../../components/ui/ThemeToggleHeadless.tsx
 import { Moon as Moon2, Sun as Sun2, Monitor } from "lucide-react";
-import { useEffect as useEffect26, useRef as useRef20, useState as useState43 } from "react";
+import { useEffect as useEffect26, useRef as useRef21, useState as useState43 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
-import { Fragment as Fragment25, jsx as jsx70, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx70, jsxs as jsxs64 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
   theme,
   onChange,
@@ -16987,7 +17332,7 @@ function ThemeToggleHeadless({
 }) {
   const [isOpen, setIsOpen] = useState43(false);
   const [mounted, setMounted] = useState43(false);
-  const triggerRef = useRef20(null);
+  const triggerRef = useRef21(null);
   const [dropdownPosition, setDropdownPosition] = useState43(null);
   useEffect26(() => setMounted(true), []);
   const themes = [
@@ -17029,7 +17374,7 @@ function ThemeToggleHeadless({
         children: /* @__PURE__ */ jsx70(CurrentIcon, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs64(Fragment25, { children: [
+    isOpen && /* @__PURE__ */ jsxs64(Fragment26, { children: [
       typeof window !== "undefined" && createPortal7(/* @__PURE__ */ jsx70("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal7(
         /* @__PURE__ */ jsx70(
@@ -17078,10 +17423,10 @@ function ThemeToggleHeadless({
 }
 
 // ../../components/ui/LanguageSwitcherHeadless.tsx
-import { useRef as useRef21, useState as useState44 } from "react";
+import { useRef as useRef22, useState as useState44 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { Globe } from "lucide-react";
-import { Fragment as Fragment26, jsx as jsx71, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx71, jsxs as jsxs65 } from "react/jsx-runtime";
 function LanguageSwitcherHeadless({
   locales,
   currentLocale,
@@ -17091,7 +17436,7 @@ function LanguageSwitcherHeadless({
 }) {
   const [isOpen, setIsOpen] = useState44(false);
   const [dropdownPosition, setDropdownPosition] = useState44(null);
-  const triggerButtonRef = useRef21(null);
+  const triggerButtonRef = useRef22(null);
   const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
   const calculatePosition = () => {
     const rect = triggerButtonRef.current?.getBoundingClientRect();
@@ -17126,7 +17471,7 @@ function LanguageSwitcherHeadless({
         children: /* @__PURE__ */ jsx71(Globe, { className: "h-5 w-5" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs65(Fragment26, { children: [
+    isOpen && /* @__PURE__ */ jsxs65(Fragment27, { children: [
       typeof window !== "undefined" && createPortal8(/* @__PURE__ */ jsx71("div", { className: "fixed inset-0 z-9998", onClick: () => setIsOpen(false) }), document.body),
       typeof window !== "undefined" && dropdownPosition && createPortal8(
         /* @__PURE__ */ jsx71(
@@ -18042,7 +18387,7 @@ function useSmartLocale() {
 }
 
 // ../../components/ui/UEditor/UEditor.tsx
-import { useEffect as useEffect31, useMemo as useMemo22 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo23 } from "react";
 import { useTranslations as useTranslations7 } from "next-intl";
 import { useEditor, EditorContent } from "@tiptap/react";
 
@@ -18085,7 +18430,7 @@ import { common, createLowlight } from "lowlight";
 import { Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
-import { forwardRef as forwardRef13, useEffect as useEffect27, useImperativeHandle, useRef as useRef22, useState as useState45 } from "react";
+import { forwardRef as forwardRef13, useEffect as useEffect27, useImperativeHandle, useRef as useRef23, useState as useState45 } from "react";
 import {
   FileCode,
   Heading1,
@@ -18103,7 +18448,7 @@ import tippy from "tippy.js";
 import { jsx as jsx74, jsxs as jsxs66 } from "react/jsx-runtime";
 var CommandList = forwardRef13((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useState45(0);
-  const listRef = useRef22(null);
+  const listRef = useRef23(null);
   useEffect27(() => {
     setSelectedIndex(0);
   }, [props.items]);
@@ -18416,7 +18761,7 @@ var ClipboardImages = Extension2.create({
 });
 
 // ../../components/ui/UEditor/resizable-image.tsx
-import { useEffect as useEffect28, useRef as useRef23, useState as useState46 } from "react";
+import { useEffect as useEffect28, useRef as useRef24, useState as useState46 } from "react";
 import Image3 from "@tiptap/extension-image";
 import { mergeAttributes } from "@tiptap/core";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
@@ -18431,19 +18776,19 @@ function toNullableNumber(value) {
   }
   return null;
 }
-function clamp6(value, min, max) {
+function clamp7(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
 function ResizableImageNodeView(props) {
   const { node, selected, updateAttributes, editor, getPos } = props;
-  const wrapperRef = useRef23(null);
-  const imgRef = useRef23(null);
+  const wrapperRef = useRef24(null);
+  const imgRef = useRef24(null);
   const [isHovered, setIsHovered] = useState46(false);
   const [isResizing, setIsResizing] = useState46(false);
   const widthAttr = toNullableNumber(node.attrs["width"]);
   const heightAttr = toNullableNumber(node.attrs["height"]);
   const textAlign = String(node.attrs["textAlign"] ?? "");
-  const dragStateRef = useRef23(null);
+  const dragStateRef = useRef24(null);
   useEffect28(() => {
     const img = imgRef.current;
     if (!img) return;
@@ -18493,18 +18838,18 @@ function ResizableImageNodeView(props) {
     let nextH = drag.startH;
     if (event.ctrlKey) {
       if (Math.abs(dx) >= Math.abs(dy)) {
-        nextW = clamp6(drag.startW + dx, MIN_IMAGE_SIZE_PX, drag.maxW);
-        nextH = clamp6(nextW / drag.aspect, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
+        nextW = clamp7(drag.startW + dx, MIN_IMAGE_SIZE_PX, drag.maxW);
+        nextH = clamp7(nextW / drag.aspect, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
       } else {
-        nextH = clamp6(drag.startH + dy, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
-        nextW = clamp6(nextH * drag.aspect, MIN_IMAGE_SIZE_PX, drag.maxW);
+        nextH = clamp7(drag.startH + dy, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
+        nextW = clamp7(nextH * drag.aspect, MIN_IMAGE_SIZE_PX, drag.maxW);
       }
     } else {
       if (!drag.axis && (Math.abs(dx) > AXIS_LOCK_THRESHOLD_PX || Math.abs(dy) > AXIS_LOCK_THRESHOLD_PX)) {
         drag.axis = Math.abs(dx) >= Math.abs(dy) ? "x" : "y";
       }
-      if (drag.axis === "x") nextW = clamp6(drag.startW + dx, MIN_IMAGE_SIZE_PX, drag.maxW);
-      if (drag.axis === "y") nextH = clamp6(drag.startH + dy, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
+      if (drag.axis === "x") nextW = clamp7(drag.startW + dx, MIN_IMAGE_SIZE_PX, drag.maxW);
+      if (drag.axis === "y") nextH = clamp7(drag.startH + dy, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
     }
     drag.lastW = nextW;
     drag.lastH = nextH;
@@ -18736,7 +19081,7 @@ function buildUEditorExtensions({
 }
 
 // ../../components/ui/UEditor/toolbar.tsx
-import React65, { useRef as useRef25, useState as useState48 } from "react";
+import React65, { useRef as useRef26, useState as useState48 } from "react";
 import { useTranslations as useTranslations4 } from "next-intl";
 import {
   AlignCenter,
@@ -18774,13 +19119,13 @@ import {
 } from "lucide-react";
 
 // ../../components/ui/UEditor/colors.tsx
-import { useMemo as useMemo20 } from "react";
+import { useMemo as useMemo21 } from "react";
 import { useTranslations as useTranslations2 } from "next-intl";
 import { X as X14 } from "lucide-react";
 import { jsx as jsx76, jsxs as jsxs68 } from "react/jsx-runtime";
 var useEditorColors = () => {
   const t = useTranslations2("UEditor");
-  const textColors = useMemo20(
+  const textColors = useMemo21(
     () => [
       { name: t("colors.default"), color: "inherit", cssClass: "text-foreground" },
       { name: t("colors.muted"), color: "var(--muted-foreground)", cssClass: "text-muted-foreground" },
@@ -18793,7 +19138,7 @@ var useEditorColors = () => {
     ],
     [t]
   );
-  const highlightColors = useMemo20(
+  const highlightColors = useMemo21(
     () => [
       { name: t("colors.default"), color: "", cssClass: "" },
       { name: t("colors.muted"), color: "var(--muted)", cssClass: "bg-muted" },
@@ -18838,7 +19183,7 @@ var EditorColorPalette = ({
 ] });
 
 // ../../components/ui/UEditor/inputs.tsx
-import { useEffect as useEffect29, useRef as useRef24, useState as useState47 } from "react";
+import { useEffect as useEffect29, useRef as useRef25, useState as useState47 } from "react";
 import { useTranslations as useTranslations3 } from "next-intl";
 import { Check as Check9, X as X15 } from "lucide-react";
 import { jsx as jsx77, jsxs as jsxs69 } from "react/jsx-runtime";
@@ -18856,7 +19201,7 @@ var LinkInput = ({
 }) => {
   const t = useTranslations3("UEditor");
   const [url, setUrl] = useState47(initialUrl);
-  const inputRef = useRef24(null);
+  const inputRef = useRef25(null);
   useEffect29(() => {
     inputRef.current?.focus();
     inputRef.current?.select();
@@ -18886,7 +19231,7 @@ var ImageInput = ({ onSubmit, onCancel }) => {
   const t = useTranslations3("UEditor");
   const [url, setUrl] = useState47("");
   const [alt, setAlt] = useState47("");
-  const inputRef = useRef24(null);
+  const inputRef = useRef25(null);
   useEffect29(() => {
     inputRef.current?.focus();
   }, []);
@@ -18940,7 +19285,7 @@ var ImageInput = ({ onSubmit, onCancel }) => {
 };
 
 // ../../components/ui/UEditor/toolbar.tsx
-import { Fragment as Fragment27, jsx as jsx78, jsxs as jsxs70 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx78, jsxs as jsxs70 } from "react/jsx-runtime";
 function fileToDataUrl2(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -18988,7 +19333,7 @@ var EditorToolbar = ({
   const t = useTranslations4("UEditor");
   const { textColors, highlightColors } = useEditorColors();
   const [showImageInput, setShowImageInput] = useState48(false);
-  const fileInputRef = useRef25(null);
+  const fileInputRef = useRef26(null);
   const [isUploadingImage, setIsUploadingImage] = useState48(false);
   const [imageUploadError, setImageUploadError] = useState48(null);
   const insertImageFiles = async (files) => {
@@ -19297,7 +19642,7 @@ var EditorToolbar = ({
             },
             onCancel: () => setShowImageInput(false)
           }
-        ) : /* @__PURE__ */ jsxs70(Fragment27, { children: [
+        ) : /* @__PURE__ */ jsxs70(Fragment28, { children: [
           /* @__PURE__ */ jsx78(DropdownMenuItem, { icon: LinkIcon, label: t("imageInput.addFromUrl"), onClick: () => setShowImageInput(true) }),
           /* @__PURE__ */ jsx78(
             DropdownMenuItem,
@@ -19407,7 +19752,7 @@ var EditorToolbar = ({
 };
 
 // ../../components/ui/UEditor/menus.tsx
-import { useCallback as useCallback13, useEffect as useEffect30, useMemo as useMemo21, useRef as useRef26, useState as useState49 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect30, useMemo as useMemo22, useRef as useRef27, useState as useState49 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
 import { useTranslations as useTranslations5 } from "next-intl";
 import {
@@ -19437,8 +19782,8 @@ import { jsx as jsx79, jsxs as jsxs71 } from "react/jsx-runtime";
 var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
   const t = useTranslations5("UEditor");
   const [selectedIndex, setSelectedIndex] = useState49(0);
-  const menuRef = useRef26(null);
-  const allCommands = useMemo21(
+  const menuRef = useRef27(null);
+  const allCommands = useMemo22(
     () => [
       {
         icon: Type3,
@@ -19509,7 +19854,7 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
     ],
     [editor, t]
   );
-  const commands = useMemo21(() => {
+  const commands = useMemo22(() => {
     if (!filterText) return allCommands;
     const lowerFilter = filterText.toLowerCase();
     return allCommands.filter((cmd) => cmd.label.toLowerCase().includes(lowerFilter) || cmd.description.toLowerCase().includes(lowerFilter));
@@ -19521,7 +19866,7 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
     const selectedElement = menuRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
     selectedElement?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
-  const selectCommand = useCallback13(
+  const selectCommand = useCallback14(
     (index) => {
       const command = commands[index];
       if (command) {
@@ -19744,9 +20089,9 @@ var BubbleMenuContent = ({
 var CustomBubbleMenu = ({ editor }) => {
   const [isVisible, setIsVisible] = useState49(false);
   const [position, setPosition] = useState49({ top: 0, left: 0 });
-  const menuRef = useRef26(null);
-  const keepOpenRef = useRef26(false);
-  const setKeepOpen = useCallback13((next) => {
+  const menuRef = useRef27(null);
+  const keepOpenRef = useRef27(false);
+  const setKeepOpen = useCallback14((next) => {
     keepOpenRef.current = next;
     if (next) setIsVisible(true);
   }, []);
@@ -19901,7 +20246,7 @@ var UEditor = ({
 }) => {
   const t = useTranslations7("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
-  const extensions = useMemo22(
+  const extensions = useMemo23(
     () => buildUEditorExtensions({ placeholder: effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode, editable }),
     [effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode, editable]
   );