@underverse-ui/underverse 0.2.104 → 0.2.106

package/dist/index.cjs

@@ -7082,6 +7082,7 @@ var React25 = __toESM(require("react"), 1);
 var import_lucide_react16 = require("lucide-react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var pad = (n) => n.toString().padStart(2, "0");
+var clamp3 = (n, min, max) => Math.min(max, Math.max(min, n));
 var WHEEL_ITEM_HEIGHT = {
   sm: 30,
   md: 34,
@@ -7096,6 +7097,7 @@ function WheelColumn({
   onSelect,
   scrollRef,
   itemHeight,
+  size,
   animate,
   focused,
   setFocusedColumn,
@@ -7104,18 +7106,72 @@ function WheelColumn({
   const height = itemHeight * WHEEL_VISIBLE_ITEMS;
   const paddingY = (height - itemHeight) / 2;
   const rafRef = React25.useRef(0);
-  const lastIndexRef = React25.useRef(null);
+  const lastVirtualIndexRef = React25.useRef(null);
   const wheelDeltaRef = React25.useRef(0);
   const scrollEndTimeoutRef = React25.useRef(null);
   const suppressScrollSelectUntilRef = React25.useRef(0);
+  const loop = true;
+  const ui = React25.useMemo(() => {
+    if (size === "sm") {
+      return {
+        columnWidth: "min-w-[64px] max-w-[84px]",
+        label: "text-[9px] mb-2",
+        selectedText: "text-base",
+        unselectedText: "text-sm",
+        fadeHeight: "h-10"
+      };
+    }
+    if (size === "lg") {
+      return {
+        columnWidth: "min-w-[80px] max-w-[110px]",
+        label: "text-[11px] mb-3",
+        selectedText: "text-xl",
+        unselectedText: "text-lg",
+        fadeHeight: "h-14"
+      };
+    }
+    return {
+      columnWidth: "min-w-[70px] max-w-[90px]",
+      label: "text-[10px] mb-3",
+      selectedText: "text-lg",
+      unselectedText: "text-base",
+      fadeHeight: "h-12"
+    };
+  }, [size]);
+  const baseOffset = React25.useMemo(() => loop ? items.length : 0, [items.length, loop]);
+  const extendedItems = React25.useMemo(() => loop ? [...items, ...items, ...items] : items, [items, loop]);
+  const getNearestVirtualIndex = React25.useCallback(
+    (realIndex, fromVirtual) => {
+      const len = items.length;
+      if (len <= 0) return 0;
+      if (!loop) return clamp3(realIndex, 0, Math.max(0, len - 1));
+      const candidates = [realIndex, realIndex + len, realIndex + 2 * len];
+      let best = candidates[0];
+      let bestDist = Math.abs(best - fromVirtual);
+      for (const c of candidates) {
+        const dist = Math.abs(c - fromVirtual);
+        if (dist < bestDist) {
+          best = c;
+          bestDist = dist;
+        }
+      }
+      return best;
+    },
+    [items.length, loop]
+  );
   React25.useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
-    const nextTop = Math.max(0, valueIndex) * itemHeight;
-    if (Math.abs(el.scrollTop - nextTop) > 1) {
-      el.scrollTo({ top: nextTop, behavior: animate ? "smooth" : "auto" });
-    }
-    lastIndexRef.current = valueIndex;
+    const maxVirtual = Math.max(0, extendedItems.length - 1);
+    const currentVirtual2 = clamp3(Math.round(el.scrollTop / itemHeight), 0, maxVirtual);
+    const desiredVirtual = loop ? getNearestVirtualIndex(valueIndex, currentVirtual2) : valueIndex;
+    const nextTop = desiredVirtual * itemHeight;
+    const delta = Math.abs(el.scrollTop - nextTop);
+    if (delta > 1) {
+      const behavior = animate && delta <= itemHeight * 1.5 ? "smooth" : "auto";
+      el.scrollTo({ top: nextTop, behavior });
+    }
+    lastVirtualIndexRef.current = desiredVirtual;
     return () => {
       if (scrollEndTimeoutRef.current != null) {
         window.clearTimeout(scrollEndTimeoutRef.current);
@@ -7123,7 +7179,7 @@ function WheelColumn({
       }
       cancelAnimationFrame(rafRef.current);
     };
-  }, [animate, itemHeight, scrollRef, valueIndex]);
+  }, [animate, extendedItems.length, getNearestVirtualIndex, itemHeight, loop, scrollRef, valueIndex]);
   React25.useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -7155,19 +7211,29 @@ function WheelColumn({
         step = Math.sign(wheelDeltaRef.current);
         wheelDeltaRef.current = 0;
       }
-      const fromIndex = lastIndexRef.current ?? valueIndex;
-      const nextIndex = Math.max(0, Math.min(items.length - 1, fromIndex + step));
-      if (nextIndex === fromIndex) return;
+      if (items.length <= 0) return;
+      const fromVirtual = lastVirtualIndexRef.current ?? (loop ? baseOffset + valueIndex : valueIndex);
+      let nextVirtual = fromVirtual + step;
+      if (!loop) {
+        nextVirtual = clamp3(nextVirtual, 0, Math.max(0, items.length - 1));
+      } else {
+        const len = items.length;
+        const maxVirtual = Math.max(0, len * 3 - 1);
+        if (nextVirtual < 0) nextVirtual += len;
+        if (nextVirtual > maxVirtual) nextVirtual -= len;
+      }
+      if (nextVirtual === fromVirtual) return;
       lastStepAtRef.current = Date.now();
       lastStepSignRef.current = step;
-      lastIndexRef.current = nextIndex;
+      lastVirtualIndexRef.current = nextVirtual;
       suppressScrollSelectUntilRef.current = Date.now() + 350;
-      el.scrollTo({ top: nextIndex * itemHeight, behavior: animate ? "smooth" : "auto" });
-      onSelect(items[nextIndex]);
+      el.scrollTo({ top: nextVirtual * itemHeight, behavior: animate ? "smooth" : "auto" });
+      const realIndex = (nextVirtual % items.length + items.length) % items.length;
+      onSelect(items[realIndex]);
     };
     el.addEventListener("wheel", onWheel, { passive: false });
     return () => el.removeEventListener("wheel", onWheel);
-  }, [animate, column, itemHeight, items, onSelect, scrollRef, setFocusedColumn, valueIndex]);
+  }, [animate, baseOffset, column, itemHeight, items, loop, onSelect, scrollRef, setFocusedColumn, valueIndex]);
   const handleScroll = () => {
     const el = scrollRef.current;
     if (!el) return;
@@ -7178,17 +7244,38 @@ function WheelColumn({
         window.clearTimeout(scrollEndTimeoutRef.current);
       }
       scrollEndTimeoutRef.current = window.setTimeout(() => {
-        const idx = Math.max(0, Math.min(items.length - 1, Math.round(el.scrollTop / itemHeight)));
-        if (lastIndexRef.current === idx) return;
-        lastIndexRef.current = idx;
+        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;
+        if (lastVirtualIndexRef.current !== snappedVirtual) lastVirtualIndexRef.current = snappedVirtual;
         suppressScrollSelectUntilRef.current = Date.now() + 350;
-        el.scrollTo({ top: idx * itemHeight, behavior: animate ? "smooth" : "auto" });
-        onSelect(items[idx]);
+        el.scrollTo({ top: snappedVirtual * itemHeight, behavior: animate ? "smooth" : "auto" });
+        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.scrollTo({ top: centered * itemHeight, behavior: "auto" });
+          }
+        }
       }, 120);
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex-1 min-w-[70px] max-w-[90px]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 mb-3 text-center", children: labelText }),
+  const currentVirtual = React25.useMemo(() => {
+    if (!loop || items.length <= 0) return valueIndex;
+    const fallback = baseOffset + valueIndex;
+    const from = lastVirtualIndexRef.current ?? fallback;
+    return getNearestVirtualIndex(valueIndex, from);
+  }, [baseOffset, getNearestVirtualIndex, items.length, loop, valueIndex]);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("flex-1", ui.columnWidth), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn(ui.label, "font-bold uppercase tracking-wider text-muted-foreground/70 text-center"), children: labelText }),
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative rounded-xl bg-muted/30 overflow-hidden", style: { height }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
@@ -7197,8 +7284,8 @@ function WheelColumn({
           style: { height: itemHeight }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-12 bg-linear-to-b from-background/95 via-background/60 to-transparent z-10" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-12 bg-linear-to-t from-background/95 via-background/60 to-transparent z-10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("pointer-events-none absolute inset-x-0 top-0 bg-linear-to-b from-muted/20 via-muted/5 to-transparent z-10", ui.fadeHeight) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("pointer-events-none absolute inset-x-0 bottom-0 bg-linear-to-t from-muted/20 via-muted/5 to-transparent z-10", ui.fadeHeight) }),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
@@ -7215,11 +7302,14 @@ function WheelColumn({
           onKeyDown: (e) => onKeyDown(e, column),
           onFocus: () => setFocusedColumn(column),
           onScroll: handleScroll,
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: items.map((n, index) => {
-            const dist = Math.abs(index - valueIndex);
-            const scale = 1 - Math.min(dist * 0.12, 0.36);
-            const opacity = 1 - Math.min(dist * 0.22, 0.75);
-            const isSelected = index === valueIndex;
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: extendedItems.map((n, index) => {
+            const dist = Math.abs(index - currentVirtual);
+            const distForVisual = Math.min(dist, 2);
+            const t = distForVisual / 2;
+            const ease = t * t;
+            const scale = 1 - ease * 0.18;
+            const opacity = 1 - ease * 0.55;
+            const isSelected = index === currentVirtual;
             return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "button",
               {
@@ -7228,7 +7318,7 @@ function WheelColumn({
                 "aria-selected": isSelected,
                 className: cn(
                   "w-full snap-center flex items-center justify-center rounded-lg transition-all duration-200 font-bold tabular-nums",
-                  isSelected ? "text-primary text-lg" : "text-muted-foreground hover:text-foreground/70"
+                  isSelected ? cn("text-primary", ui.selectedText) : cn("text-muted-foreground hover:text-foreground/70", ui.unselectedText)
                 ),
                 style: {
                   height: itemHeight,
@@ -7237,13 +7327,16 @@ function WheelColumn({
                 },
                 onClick: () => {
                   const el = scrollRef.current;
+                  if (!el) return;
                   suppressScrollSelectUntilRef.current = Date.now() + 350;
-                  el?.scrollTo({ top: index * itemHeight, behavior: animate ? "smooth" : "auto" });
-                  onSelect(n);
+                  lastVirtualIndexRef.current = index;
+                  el.scrollTo({ top: index * itemHeight, behavior: animate ? "smooth" : "auto" });
+                  const realIndex = (index % items.length + items.length) % items.length;
+                  onSelect(items[realIndex]);
                 },
                 children: pad(n)
               },
-              n
+              `${column}_${index}`
             );
           }) })
         }
@@ -7303,6 +7396,7 @@ function TimePicker({
   secondStep = 1,
   clearable = true,
   variant = "default",
+  matchTriggerWidth = true,
   showNow = false,
   showPresets = false,
   allowManualInput = false,
@@ -7473,12 +7567,60 @@ function TimePicker({
   const hours = format === "24" ? Array.from({ length: 24 }, (_, i) => i) : Array.from({ length: 12 }, (_, i) => i + 1);
   const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => Math.min(59, i * minuteStep));
   const seconds = Array.from({ length: Math.ceil(60 / secondStep) }, (_, i) => Math.min(59, i * secondStep));
+  const panelSizeClasses = {
+    sm: {
+      contentPadding: "p-4",
+      stackGap: "space-y-3",
+      timeText: "text-xl",
+      inputSize: "sm",
+      icon: "w-3 h-3",
+      separatorPad: "pt-6",
+      presetText: "text-[11px]",
+      presetPadding: "px-3 py-2",
+      actionText: "text-[11px]",
+      actionPadding: "px-3 py-2",
+      periodLabel: "text-[9px] mb-2",
+      periodGap: "gap-1.5",
+      periodButton: "px-3 py-2 text-xs"
+    },
+    md: {
+      contentPadding: "p-5",
+      stackGap: "space-y-4",
+      timeText: "text-2xl",
+      inputSize: "sm",
+      icon: "w-3.5 h-3.5",
+      separatorPad: "pt-8",
+      presetText: "text-xs",
+      presetPadding: "px-3 py-2.5",
+      actionText: "text-xs",
+      actionPadding: "px-4 py-2.5",
+      periodLabel: "text-[10px] mb-3",
+      periodGap: "gap-2",
+      periodButton: "px-4 py-3 text-sm"
+    },
+    lg: {
+      contentPadding: "p-6",
+      stackGap: "space-y-5",
+      timeText: "text-3xl",
+      inputSize: "md",
+      icon: "w-4 h-4",
+      separatorPad: "pt-9",
+      presetText: "text-sm",
+      presetPadding: "px-4 py-3",
+      actionText: "text-sm",
+      actionPadding: "px-5 py-3",
+      periodLabel: "text-[11px] mb-3",
+      periodGap: "gap-2",
+      periodButton: "px-5 py-3.5 text-base"
+    }
+  };
   const sizeClasses2 = {
     sm: { label: "text-xs", height: "h-8", padding: "px-2.5 py-1.5", text: "text-xs", icon: "w-3.5 h-3.5" },
     md: { label: "text-sm", height: "h-10", padding: "px-3 py-2", text: "text-sm", icon: "w-4 h-4" },
     lg: { label: "text-base", height: "h-12", padding: "px-4 py-3", text: "text-base", icon: "w-5 h-5" }
   };
   const sz = sizeClasses2[size];
+  const panelSz = panelSizeClasses[size];
   const display = formatTime(parts, format, includeSeconds);
   const trigger = variant === "inline" ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "button",
@@ -7509,8 +7651,8 @@ function TimePicker({
             "div",
             {
               className: cn(
-                "flex items-center justify-center rounded-md p-1.5 transition-all duration-300",
-                error ? "bg-destructive/10 text-destructive" : success ? "bg-success/10 text-success" : open ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
+                "flex items-center justify-center transition-colors duration-300",
+                error ? "text-destructive" : success ? "text-success" : open ? "text-primary" : "text-muted-foreground group-hover:text-primary"
               ),
               children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Clock, { className: cn(sz.icon, "transition-transform duration-300", open && "rotate-12") })
             }
@@ -7543,8 +7685,8 @@ function TimePicker({
     setParts(next);
     emit(next);
   };
-  const timePickerContent = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center py-2 px-3 rounded-xl bg-linear-to-r from-primary/10 via-primary/5 to-primary/10 border border-primary/20", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-2xl font-bold tabular-nums tracking-wide text-foreground", children: display }) }),
+  const timePickerContent = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: panelSz.stackGap, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center py-2 px-3 rounded-xl bg-linear-to-r from-primary/10 via-primary/5 to-primary/10 border border-primary/20", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn(panelSz.timeText, "font-bold tabular-nums tracking-wide text-foreground"), children: display }) }),
     allowManualInput && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         Input_default,
@@ -7552,12 +7694,12 @@ function TimePicker({
           placeholder: format === "12" ? "02:30 PM" : "14:30",
           value: manualInput || display,
           onChange: (e) => handleManualInput(e.target.value),
-          size: "sm",
+          size: panelSz.inputSize,
           variant: "outlined",
           className: "pl-9"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Clock, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Clock, { className: cn("absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", panelSz.icon) })
     ] }),
     showPresets && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "grid grid-cols-2 gap-2", children: Object.keys(PRESETS).map((preset) => {
       const { icon: Icon, label: label2, color } = PRESETS[preset];
@@ -7566,7 +7708,9 @@ function TimePicker({
         {
           type: "button",
           className: cn(
-            "group relative px-3 py-2.5 text-xs font-medium rounded-xl border border-border/50 overflow-hidden",
+            "group relative font-medium rounded-xl border border-border/50 overflow-hidden",
+            panelSz.presetPadding,
+            panelSz.presetText,
             "bg-linear-to-br from-background to-muted/30",
             "hover:border-primary/40 hover:shadow-md transition-all duration-300",
             animate && "hover:scale-[1.02] active:scale-[0.98]"
@@ -7582,7 +7726,7 @@ function TimePicker({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { className: "w-3.5 h-3.5 text-muted-foreground group-hover:text-primary transition-colors" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { className: cn("text-muted-foreground group-hover:text-primary transition-colors", panelSz.icon) }),
               /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-foreground/80 group-hover:text-foreground transition-colors", children: label2 })
             ] })
           ]
@@ -7595,7 +7739,9 @@ function TimePicker({
       {
         type: "button",
         className: cn(
-          "px-3 py-2.5 text-xs font-medium rounded-xl border border-border/50",
+          "font-medium rounded-xl border border-border/50",
+          panelSz.presetPadding,
+          panelSz.presetText,
           "bg-linear-to-br from-background to-muted/30",
           "hover:border-primary/40 hover:bg-primary/5 hover:shadow-md transition-all duration-300",
           animate && "hover:scale-[1.02] active:scale-[0.98]"
@@ -7620,6 +7766,7 @@ function TimePicker({
             onSelect: setHourFromDisplay,
             scrollRef: hourScrollRef,
             itemHeight,
+            size,
             animate,
             focused: focusedColumn === "hour",
             setFocusedColumn: (col) => setFocusedColumn(col),
@@ -7627,7 +7774,7 @@ function TimePicker({
           }
         );
       })(),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center pt-8", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("flex flex-col items-center justify-center", panelSz.separatorPad), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" })
       ] }) }),
@@ -7647,6 +7794,7 @@ function TimePicker({
             },
             scrollRef: minuteScrollRef,
             itemHeight,
+            size,
             animate,
             focused: focusedColumn === "minute",
             setFocusedColumn: (col) => setFocusedColumn(col),
@@ -7655,7 +7803,7 @@ function TimePicker({
         );
       })(),
       includeSeconds && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col items-center justify-center pt-8", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("flex flex-col items-center justify-center", panelSz.separatorPad), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" }),
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-primary/60" })
         ] }) }),
@@ -7675,6 +7823,7 @@ function TimePicker({
               },
               scrollRef: secondScrollRef,
               itemHeight,
+              size,
               animate,
               focused: focusedColumn === "second",
               setFocusedColumn: (col) => setFocusedColumn(col),
@@ -7683,52 +7832,62 @@ function TimePicker({
           );
         })()
       ] }),
-      format === "12" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex-1 min-w-[70px] max-w-[90px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 mb-3 text-center", children: "Period" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "div",
-          {
-            className: "flex flex-col gap-2 p-1 rounded-xl bg-muted/30",
-            role: "radiogroup",
-            "aria-label": "Select AM or PM",
-            tabIndex: focusedColumn === "period" ? 0 : -1,
-            onKeyDown: (e) => handleKeyDown(e, "period"),
-            onFocus: () => setFocusedColumn("period"),
-            children: ["AM", "PM"].map((p) => {
-              const isSelected = parts.p === p;
-              return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-                "button",
-                {
-                  type: "button",
-                  role: "radio",
-                  "aria-checked": isSelected,
-                  className: cn(
-                    "relative px-4 py-3 rounded-lg transition-all duration-300 text-sm font-bold overflow-hidden",
-                    "focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1",
-                    isSelected && "bg-linear-to-r from-primary to-primary/80 text-primary-foreground shadow-lg shadow-primary/25",
-                    !isSelected && "text-muted-foreground hover:text-foreground hover:bg-muted/50",
-                    animate && "hover:scale-[1.02] active:scale-[0.98]"
-                  ),
-                  onClick: () => {
-                    const pVal = p;
-                    let hour = parts.h;
-                    if (pVal === "AM" && hour >= 12) hour -= 12;
-                    if (pVal === "PM" && hour < 12) hour += 12;
-                    const next = { ...parts, p: pVal, h: hour };
-                    setParts(next);
-                    emit(next);
-                  },
-                  children: [
-                    isSelected && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute inset-0 bg-linear-to-tr from-white/20 to-transparent" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "relative", children: p })
-                  ]
-                },
-                p
-              );
-            })
-          }
-        )
-      ] })
+      format === "12" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        "div",
+        {
+          className: cn(
+            "flex-1",
+            size === "sm" ? "min-w-[64px] max-w-[84px]" : size === "lg" ? "min-w-[80px] max-w-[110px]" : "min-w-[70px] max-w-[90px]"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn(panelSz.periodLabel, "font-bold uppercase tracking-wider text-muted-foreground/70 text-center"), children: "Period" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              "div",
+              {
+                className: cn("flex flex-col p-1 rounded-xl bg-muted/30", panelSz.periodGap),
+                role: "radiogroup",
+                "aria-label": "Select AM or PM",
+                tabIndex: focusedColumn === "period" ? 0 : -1,
+                onKeyDown: (e) => handleKeyDown(e, "period"),
+                onFocus: () => setFocusedColumn("period"),
+                children: ["AM", "PM"].map((p) => {
+                  const isSelected = parts.p === p;
+                  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      role: "radio",
+                      "aria-checked": isSelected,
+                      className: cn(
+                        "relative rounded-lg transition-all duration-300 font-bold overflow-hidden",
+                        panelSz.periodButton,
+                        "focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1",
+                        isSelected && "bg-linear-to-r from-primary to-primary/80 text-primary-foreground shadow-lg shadow-primary/25",
+                        !isSelected && "text-muted-foreground hover:text-foreground hover:bg-muted/50",
+                        animate && "hover:scale-[1.02] active:scale-[0.98]"
+                      ),
+                      onClick: () => {
+                        const pVal = p;
+                        let hour = parts.h;
+                        if (pVal === "AM" && hour >= 12) hour -= 12;
+                        if (pVal === "PM" && hour < 12) hour += 12;
+                        const next = { ...parts, p: pVal, h: hour };
+                        setParts(next);
+                        emit(next);
+                      },
+                      children: [
+                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute inset-0 bg-linear-to-tr from-white/20 to-transparent" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "relative", children: p })
+                      ]
+                    },
+                    p
+                  );
+                })
+              }
+            )
+          ]
+        }
+      )
     ] }),
     (showNow || clearable) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 pt-3 border-t border-border/50", children: [
       showNow && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
@@ -7736,7 +7895,9 @@ function TimePicker({
         {
           type: "button",
           className: cn(
-            "flex-1 px-4 py-2.5 text-xs font-semibold rounded-xl",
+            "flex-1 font-semibold rounded-xl",
+            panelSz.actionPadding,
+            panelSz.actionText,
             "bg-linear-to-r from-primary/10 to-primary/5 border border-primary/30",
             "text-primary hover:from-primary/20 hover:to-primary/10 hover:border-primary/50",
             "transition-all duration-300 flex items-center justify-center gap-2",
@@ -7748,7 +7909,7 @@ function TimePicker({
           },
           "aria-label": "Set current time",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Clock, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.Clock, { className: panelSz.icon }),
             "Now"
           ]
         }
@@ -7758,7 +7919,9 @@ function TimePicker({
         {
           type: "button",
           className: cn(
-            "flex-1 px-4 py-2.5 text-xs font-semibold rounded-xl",
+            "flex-1 font-semibold rounded-xl",
+            panelSz.actionPadding,
+            panelSz.actionText,
             "bg-linear-to-r from-destructive/10 to-destructive/5 border border-destructive/30",
             "text-destructive hover:from-destructive/20 hover:to-destructive/10 hover:border-destructive/50",
             "transition-all duration-300 flex items-center justify-center gap-2",
@@ -7771,7 +7934,7 @@ function TimePicker({
           },
           "aria-label": "Clear selected time",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.X, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.X, { className: panelSz.icon }),
             "Clear"
           ]
         }
@@ -7784,7 +7947,7 @@ function TimePicker({
         label,
         required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-destructive ml-1", children: "*" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("p-5 rounded-2xl border border-border/60 bg-card/95 backdrop-blur-sm shadow-xl", className), children: timePickerContent })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn(panelSz.contentPadding, "rounded-2xl border border-border/60 bg-card/95 backdrop-blur-sm shadow-xl", className), children: timePickerContent })
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "w-full", ...rest, children: [
@@ -7811,9 +7974,11 @@ function TimePicker({
         open,
         onOpenChange: handleOpenChange,
         placement: "bottom-start",
-        contentWidth,
+        matchTriggerWidth,
+        contentWidth: matchTriggerWidth ? void 0 : contentWidth,
         contentClassName: cn(
-          "p-5 rounded-2xl border bg-popover/95 backdrop-blur-xl shadow-2xl",
+          panelSz.contentPadding,
+          "rounded-2xl border bg-popover/98 backdrop-blur-md shadow-2xl",
           error && "border-destructive/40",
           success && "border-success/40",
           !error && !success && "border-border/60",
@@ -8165,7 +8330,7 @@ function getZonedWeekday(date, timeZone) {
 }
 
 // ../../components/ui/CalendarTimeline/layout.ts
-function clamp3(n, min, max) {
+function clamp4(n, min, max) {
   return Math.max(min, Math.min(max, n));
 }
 function binarySearchFirstGE(arr, target) {
@@ -8304,7 +8469,7 @@ function useVirtualVariableRows(args) {
     const endPos = Math.max(0, Math.min(scrollTop + viewportHeight, total));
     let startIndex = Math.max(0, lowerBound(prefix, startPos) - 1);
     let endIndex = Math.min(itemCount, lowerBound(prefix, endPos) + overscan);
-    startIndex = clamp3(startIndex - overscan, 0, itemCount);
+    startIndex = clamp4(startIndex - overscan, 0, itemCount);
     const topSpacer = prefix[startIndex] ?? 0;
     const bottomSpacer = total - (prefix[endIndex] ?? total);
     return { startIndex, endIndex, topSpacer, bottomSpacer, totalHeight: total };
@@ -8456,11 +8621,11 @@ function computeSlotStarts(args) {
     const step = Math.max(5, Math.min(240, Math.trunc(dayTimeStepMinutes)));
     const stepMs = step * 6e4;
     const hours = workHours ?? { startHour: 8, endHour: 17 };
-    const boundedStartHour = clamp3(Math.trunc(hours.startHour), 0, 23);
-    const boundedEndHour = clamp3(Math.trunc(hours.endHour), 1, 24);
+    const boundedStartHour = clamp4(Math.trunc(hours.startHour), 0, 23);
+    const boundedEndHour = clamp4(Math.trunc(hours.endHour), 1, 24);
     const isWork = dayRangeMode === "work";
     const start2 = isWork ? zonedDateAtTime(baseDayStart, timeZone, { hour: boundedStartHour }) : start;
-    const end2 = isWork ? boundedEndHour === 24 ? addZonedDays(baseDayStart, 1, timeZone) : zonedDateAtTime(baseDayStart, timeZone, { hour: clamp3(boundedEndHour, 0, 23) }) : addZonedDays(start, 1, timeZone);
+    const end2 = isWork ? boundedEndHour === 24 ? addZonedDays(baseDayStart, 1, timeZone) : zonedDateAtTime(baseDayStart, timeZone, { hour: clamp4(boundedEndHour, 0, 23) }) : addZonedDays(start, 1, timeZone);
     const end3 = end2.getTime() > start2.getTime() ? end2 : addZonedDays(start2, 1, timeZone);
     const slotStarts2 = [];
     for (let cur2 = start2.getTime(), guard2 = 0; cur2 < end3.getTime() && guard2++ < 2e3; cur2 += stepMs) {
@@ -8489,8 +8654,8 @@ function normalizeEvents(args) {
     const ns = view === "day" ? start : startOfZonedDay(start, timeZone);
     let ne = view === "day" ? end : startOfZonedDay(end, timeZone);
     if (ne.getTime() <= ns.getTime()) ne = view === "day" ? new Date(ns.getTime() + 6e4) : addZonedDays(ns, 1, timeZone);
-    const cs = new Date(clamp3(ns.getTime(), rangeStart, rangeEnd));
-    const ce = new Date(clamp3(ne.getTime(), rangeStart, rangeEnd));
+    const cs = new Date(clamp4(ns.getTime(), rangeStart, rangeEnd));
+    const ce = new Date(clamp4(ne.getTime(), rangeStart, rangeEnd));
     if (ce.getTime() <= rangeStart || cs.getTime() >= rangeEnd) return null;
     return { ...e, _start: cs, _end: ce };
   }).filter(Boolean);
@@ -8852,12 +9017,12 @@ function useDayHeaderMarks(args) {
     for (const ev of normalizedEvents) {
       const startIdx = binarySearchLastLE(slotStarts, ev._start);
       const endIdxRaw = binarySearchFirstGE(slotStarts, ev._end);
-      const endIdx = clamp3(endIdxRaw, 0, n - 1);
+      const endIdx = clamp4(endIdxRaw, 0, n - 1);
       if (startIdx >= 0 && startIdx < n) showTime[startIdx] = true;
       if (endIdx >= 0 && endIdx < n) showTime[endIdx] = true;
       const span = endIdx - startIdx;
       if (span >= 3) {
-        const mid = clamp3(Math.floor((startIdx + endIdx) / 2), 0, n - 1);
+        const mid = clamp4(Math.floor((startIdx + endIdx) / 2), 0, n - 1);
         if (!showTime[mid]) showEllipsis[mid] = true;
       }
     }
@@ -8896,7 +9061,7 @@ function useSlotMetrics(args) {
       lefts2[0] = 0;
       for (let i = 0; i < n; i++) lefts2[i + 1] = lefts2[i] + widths[i];
       const gridWidth2 = lefts2[n] ?? 0;
-      const xToSlotIdx2 = (x) => clamp3(Math.floor(x / Math.max(1, fixedSlotWidth)), 0, Math.max(0, n - 1));
+      const xToSlotIdx2 = (x) => clamp4(Math.floor(x / Math.max(1, fixedSlotWidth)), 0, Math.max(0, n - 1));
       return { slotWidths: widths, slotLefts: lefts2, slotHasEvent: null, gridWidth: gridWidth2, xToSlotIdx: xToSlotIdx2 };
     }
     const cfg = typeof adaptiveCfg === "object" ? adaptiveCfg : {};
@@ -8922,7 +9087,7 @@ function useSlotMetrics(args) {
     };
     if (dayAnchorCompression) {
       const hasEvent2 = dayHeaderMarks.anchor.slice(0, n);
-      const compressedEmptySlotWidth = clamp3(emptySlotWidth, 12, 20);
+      const compressedEmptySlotWidth = clamp4(emptySlotWidth, 12, 20);
       for (let i = 0; i < n; i++) widths[i] = hasEvent2[i] ? fixedSlotWidth : compressedEmptySlotWidth;
       maybeFillToContainer(hasEvent2);
       const lefts2 = new Array(n + 1);
@@ -8930,7 +9095,7 @@ function useSlotMetrics(args) {
       for (let i = 0; i < n; i++) lefts2[i + 1] = lefts2[i] + widths[i];
       const gridWidth2 = lefts2[n] ?? 0;
       const xToSlotIdx2 = (x) => {
-        const xc = clamp3(x, 0, Math.max(0, gridWidth2 - 1e-3));
+        const xc = clamp4(x, 0, Math.max(0, gridWidth2 - 1e-3));
         let lo = 0;
         let hi = n - 1;
         while (lo <= hi) {
@@ -8941,14 +9106,14 @@ function useSlotMetrics(args) {
           else if (xc >= right) lo = mid + 1;
           else return mid;
         }
-        return clamp3(lo, 0, Math.max(0, n - 1));
+        return clamp4(lo, 0, Math.max(0, n - 1));
       };
       return { slotWidths: widths, slotLefts: lefts2, slotHasEvent: hasEvent2, gridWidth: gridWidth2, xToSlotIdx: xToSlotIdx2 };
     }
     const diff = new Array(n + 1).fill(0);
     for (const ev of normalizedEvents) {
       const startIdx = binarySearchLastLE(slotStarts, ev._start);
-      const endIdx = clamp3(binarySearchFirstGE(slotStarts, ev._end), startIdx + 1, n);
+      const endIdx = clamp4(binarySearchFirstGE(slotStarts, ev._end), startIdx + 1, n);
       diff[startIdx] = (diff[startIdx] ?? 0) + 1;
       diff[endIdx] = (diff[endIdx] ?? 0) - 1;
     }
@@ -8966,7 +9131,7 @@ function useSlotMetrics(args) {
       lefts2[0] = 0;
       for (let i = 0; i < n; i++) lefts2[i + 1] = lefts2[i] + widths[i];
       const gridWidth2 = lefts2[n] ?? 0;
-      const xToSlotIdx2 = (x) => clamp3(Math.floor(x / Math.max(1, fixedSlotWidth)), 0, Math.max(0, n - 1));
+      const xToSlotIdx2 = (x) => clamp4(Math.floor(x / Math.max(1, fixedSlotWidth)), 0, Math.max(0, n - 1));
       return { slotWidths: widths, slotLefts: lefts2, slotHasEvent: null, gridWidth: gridWidth2, xToSlotIdx: xToSlotIdx2 };
     }
     const emptyCount = n - eventCount;
@@ -8976,7 +9141,7 @@ function useSlotMetrics(args) {
       const remaining = Math.max(0, targetTotal - emptyCount * emptySlotWidth);
       const raw = remaining / Math.max(1, eventCount);
       const maxEventSlotWidth = cfg.maxEventSlotWidth ?? fixedSlotWidth * 2.5;
-      eventSlotWidth = clamp3(raw, fixedSlotWidth, Math.max(fixedSlotWidth, maxEventSlotWidth));
+      eventSlotWidth = clamp4(raw, fixedSlotWidth, Math.max(fixedSlotWidth, maxEventSlotWidth));
     }
     for (let i = 0; i < n; i++) widths[i] = hasEvent[i] ? eventSlotWidth : emptySlotWidth;
     maybeFillToContainer(hasEvent);
@@ -8985,7 +9150,7 @@ function useSlotMetrics(args) {
     for (let i = 0; i < n; i++) lefts[i + 1] = lefts[i] + widths[i];
     const gridWidth = lefts[n] ?? 0;
     const xToSlotIdx = (x) => {
-      const xc = clamp3(x, 0, Math.max(0, gridWidth - 1e-3));
+      const xc = clamp4(x, 0, Math.max(0, gridWidth - 1e-3));
       let lo = 0;
       let hi = n - 1;
       while (lo <= hi) {
@@ -8996,7 +9161,7 @@ function useSlotMetrics(args) {
         else if (xc >= right) lo = mid + 1;
         else return mid;
       }
-      return clamp3(lo, 0, Math.max(0, n - 1));
+      return clamp4(lo, 0, Math.max(0, n - 1));
     };
     return { slotWidths: widths, slotLefts: lefts, slotHasEvent: hasEvent, gridWidth, xToSlotIdx };
   }, [
@@ -9023,7 +9188,7 @@ function useLayoutsByResource(args) {
         const s = isPreview ? preview.start : ev._start;
         const e = isPreview ? preview.end : ev._end;
         const startIdx = binarySearchLastLE(slotStarts, s);
-        const endIdx = clamp3(binarySearchFirstGE(slotStarts, e), startIdx + 1, slotsLength);
+        const endIdx = clamp4(binarySearchFirstGE(slotStarts, e), startIdx + 1, slotsLength);
         return { ev: { ...ev, _start: s, _end: e }, startIdx, endIdx };
       });
       const { packed, laneCount } = intervalPack(mapped);
@@ -9087,8 +9252,8 @@ function useVisibleSlotRange(args) {
     const endPos = Math.max(0, scrollLeft + viewportWidth);
     let startIdx = Math.max(0, lowerBound2(slotLefts, startPos) - 1);
     let endIdx = Math.min(slotCount, lowerBound2(slotLefts, endPos) + 1);
-    startIdx = clamp3(startIdx - overscan, 0, slotCount);
-    endIdx = clamp3(endIdx + overscan, 0, slotCount);
+    startIdx = clamp4(startIdx - overscan, 0, slotCount);
+    endIdx = clamp4(endIdx + overscan, 0, slotCount);
     if (endIdx <= startIdx) endIdx = Math.min(slotCount, startIdx + 1);
     return { startIdx, endIdx };
   }, [enabled, overscan, scrollLeft, slotCount, slotLefts, viewportWidth]);
@@ -9411,7 +9576,7 @@ function CalendarTimeline({
     for (const [resourceId, list] of eventsByResource.entries()) {
       const mapped = list.map((ev) => {
         const startIdx = binarySearchLastLE(slotStarts, ev._start);
-        const endIdx = clamp3(binarySearchFirstGE(slotStarts, ev._end), startIdx + 1, slots.length);
+        const endIdx = clamp4(binarySearchFirstGE(slotStarts, ev._end), startIdx + 1, slots.length);
         return { startIdx, endIdx };
       });
       const { laneCount } = intervalPack(mapped);
@@ -9434,7 +9599,7 @@ function CalendarTimeline({
   );
   const setRowHeightForResource = React31.useCallback(
     (resourceId, height) => {
-      const clamped = clamp3(Math.round(height), rowMin, rowMax);
+      const clamped = clamp4(Math.round(height), rowMin, rowMax);
       onRowHeightChange?.(clamped);
       if (isControlledRowHeights) {
         const next = { ...activeRowHeights ?? {}, [resourceId]: clamped };
@@ -9473,7 +9638,7 @@ function CalendarTimeline({
   const resizeRef = React31.useRef(null);
   const setResourceColumnWidth = React31.useCallback(
     (next) => {
-      const clamped = clamp3(Math.round(next), colMin, colMax);
+      const clamped = clamp4(Math.round(next), colMin, colMax);
       if (!isControlledResourceColumnWidth) setInternalResourceColumnWidth(clamped);
       onResourceColumnWidthChange?.(clamped);
     },
@@ -9596,10 +9761,10 @@ function CalendarTimeline({
     if (slots.length > 0) {
       if (activeView === "day") {
         const inRange = resolvedNow.getTime() >= range.start.getTime() && resolvedNow.getTime() < range.end.getTime();
-        startIdx = clamp3(inRange ? binarySearchFirstGE(slotStarts, resolvedNow) : 0, 0, slots.length - 1);
+        startIdx = clamp4(inRange ? binarySearchFirstGE(slotStarts, resolvedNow) : 0, 0, slots.length - 1);
       } else {
         const dayStart = startOfZonedDay(activeDate, resolvedTimeZone);
-        startIdx = clamp3(binarySearchLastLE(slotStarts, dayStart), 0, slots.length - 1);
+        startIdx = clamp4(binarySearchLastLE(slotStarts, dayStart), 0, slots.length - 1);
       }
     }
     setCreateStartIdx(startIdx);
@@ -9636,7 +9801,7 @@ function CalendarTimeline({
   const commitCreate = React31.useCallback(() => {
     if (!onCreateEvent) return;
     if (!createResourceId) return;
-    const start = slotStarts[clamp3(createStartIdx, 0, Math.max(0, slotStarts.length - 1))];
+    const start = slotStarts[clamp4(createStartIdx, 0, Math.max(0, slotStarts.length - 1))];
     if (!start) return;
     const endBoundary = createEndIdx >= slotStarts.length ? range.end : slotStarts[createEndIdx];
     if (!endBoundary) return;
@@ -9666,8 +9831,8 @@ function CalendarTimeline({
       const body = bodyRef.current;
       if (!body) return null;
       const bodyRect = body.getBoundingClientRect();
-      const probeX = clamp3(clientX, bodyRect.left + 1, bodyRect.right - 1);
-      const probeY = clamp3(clientY, bodyRect.top + 1, bodyRect.bottom - 1);
+      const probeX = clamp4(clientX, bodyRect.left + 1, bodyRect.right - 1);
+      const probeY = clamp4(clientY, bodyRect.top + 1, bodyRect.bottom - 1);
       const el = document.elementFromPoint(probeX, probeY);
       const x = probeX - bodyRect.left + body.scrollLeft;
       const epsilon = opts?.biasLeft ? 0.01 : 0;
@@ -9681,7 +9846,7 @@ function CalendarTimeline({
   );
   const slotToDate = React31.useCallback(
     (slotIdx) => {
-      const start = slotStarts[clamp3(slotIdx, 0, slotStarts.length - 1)];
+      const start = slotStarts[clamp4(slotIdx, 0, slotStarts.length - 1)];
       if (activeView === "day") {
         const stepMs = Math.trunc(Math.max(5, Math.min(240, Math.trunc(dayTimeStepMinutes))) * 6e4);
         return { start, end: new Date(start.getTime() + stepMs) };
@@ -9722,12 +9887,12 @@ function CalendarTimeline({
         return;
       }
       if (drag.mode === "resize-start") {
-        const nextStart = new Date(clamp3(targetSlotStart.getTime(), range.start.getTime(), drag.originEnd.getTime() - 6e4));
+        const nextStart = new Date(clamp4(targetSlotStart.getTime(), range.start.getTime(), drag.originEnd.getTime() - 6e4));
         setPreview({ eventId: drag.eventId, resourceId: drag.resourceId, start: nextStart, end: drag.originEnd });
         return;
       }
       if (drag.mode === "resize-end") {
-        const nextEnd = new Date(clamp3(targetSlotStart.getTime(), drag.originStart.getTime() + 6e4, range.end.getTime()));
+        const nextEnd = new Date(clamp4(targetSlotStart.getTime(), drag.originStart.getTime() + 6e4, range.end.getTime()));
         setPreview({ eventId: drag.eventId, resourceId: drag.resourceId, start: drag.originStart, end: nextEnd });
         return;
       }
@@ -9744,7 +9909,7 @@ function CalendarTimeline({
     }
     const maxScrollLeft = Math.max(0, body.scrollWidth - body.clientWidth);
     const prevLeft = body.scrollLeft;
-    const nextLeft = clamp3(prevLeft + st.dir * st.speed, 0, maxScrollLeft);
+    const nextLeft = clamp4(prevLeft + st.dir * st.speed, 0, maxScrollLeft);
     if (nextLeft === prevLeft) {
       stopAutoScroll();
       return;
@@ -9764,12 +9929,12 @@ function CalendarTimeline({
       if (clientX < rect.left + edge) {
         dir = -1;
         const dist = clientX - rect.left;
-        const t2 = clamp3(1 - dist / edge, 0, 1);
+        const t2 = clamp4(1 - dist / edge, 0, 1);
         speed = 8 + t2 * 28;
       } else if (clientX > rect.right - edge) {
         dir = 1;
         const dist = rect.right - clientX;
-        const t2 = clamp3(1 - dist / edge, 0, 1);
+        const t2 = clamp4(1 - dist / edge, 0, 1);
         speed = 8 + t2 * 28;
       }
       autoScrollStateRef.current.lastClientX = clientX;
@@ -9880,7 +10045,7 @@ function CalendarTimeline({
         return;
       }
       const rect = rowEl.getBoundingClientRect();
-      const y = clamp3(e.clientY - rect.top, 0, rect.height);
+      const y = clamp4(e.clientY - rect.top, 0, rect.height);
       if (!hoverCell || hoverCell.resourceId !== ctx.resourceId || hoverCell.slotIdx !== ctx.slotIdx || Math.abs(hoverCell.y - y) > 0.5) {
         setHoverCell({ resourceId: ctx.resourceId, slotIdx: ctx.slotIdx, y });
       }
@@ -10173,8 +10338,8 @@ function CalendarTimeline({
                           const resource = resourceById.get(ev.resourceId);
                           const tooltipTitle = ev.title || ev.id;
                           const shouldCompact = activeView === "day" && dayEventStyle === "compact";
-                          const defaultMaxVisual = clamp3(Math.round(fixedSlotWidth * 1.2), 160, 360);
-                          const maxVisual = clamp3(Math.round(dayEventMaxWidth ?? defaultMaxVisual), 80, 1200);
+                          const defaultMaxVisual = clamp4(Math.round(fixedSlotWidth * 1.2), 160, 360);
+                          const maxVisual = clamp4(Math.round(dayEventMaxWidth ?? defaultMaxVisual), 80, 1200);
                           const visualWidth = shouldCompact ? Math.min(width, maxVisual) : width;
                           const isClipped = shouldCompact && width > visualWidth + 1;
                           const block = /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
@@ -10264,7 +10429,7 @@ function CalendarTimeline({
                         }),
                         preview && preview.resourceId === r.id && !preview.eventId ? (() => {
                           const startIdx = binarySearchLastLE(slotStarts, preview.start);
-                          const endIdx = clamp3(binarySearchFirstGE(slotStarts, preview.end), startIdx + 1, slots.length);
+                          const endIdx = clamp4(binarySearchFirstGE(slotStarts, preview.end), startIdx + 1, slots.length);
                           const left = slotLefts[startIdx] ?? 0;
                           const width = Math.max(1, (slotLefts[endIdx] ?? 0) - (slotLefts[startIdx] ?? 0));
                           return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -10287,7 +10452,7 @@ function CalendarTimeline({
                             ),
                             style: {
                               left: (slotLefts[hoverCell.slotIdx] ?? 0) + (slotWidths[hoverCell.slotIdx] ?? fixedSlotWidth) / 2 - 10,
-                              top: clamp3(Math.round(hoverCell.y - 10), 6, Math.max(6, h - 26))
+                              top: clamp4(Math.round(hoverCell.y - 10), 6, Math.max(6, h - 26))
                             },
                             "aria-hidden": true,
                             children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react21.Plus, { className: "h-3.5 w-3.5 text-muted-foreground" })
@@ -13523,7 +13688,7 @@ var Timeline_default = Timeline;
 var React42 = __toESM(require("react"), 1);
 var import_lucide_react29 = require("lucide-react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var clamp4 = (n, min, max) => Math.max(min, Math.min(max, n));
+var clamp5 = (n, min, max) => Math.max(min, Math.min(max, n));
 function hexToRgb(hex) {
   const str = hex.replace(/^#/, "").trim();
   if (str.length === 3) {
@@ -13541,7 +13706,7 @@ function hexToRgb(hex) {
   return null;
 }
 function rgbToHex(r, g, b) {
-  return `#${[r, g, b].map((v) => clamp4(Math.round(v), 0, 255).toString(16).padStart(2, "0")).join("")}`;
+  return `#${[r, g, b].map((v) => clamp5(Math.round(v), 0, 255).toString(16).padStart(2, "0")).join("")}`;
 }
 function rgbToHsl(r, g, b) {
   r /= 255;
@@ -13602,10 +13767,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 = clamp4(parseInt(rgbaMatch[1], 10), 0, 255);
-    const g = clamp4(parseInt(rgbaMatch[2], 10), 0, 255);
-    const b = clamp4(parseInt(rgbaMatch[3], 10), 0, 255);
-    const a = rgbaMatch[4] != null ? clamp4(parseFloat(rgbaMatch[4]), 0, 1) : 1;
+    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;
     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);
@@ -13613,7 +13778,7 @@ function parseAnyColor(input) {
     const h = parseFloat(hslaMatch[1]);
     const sl = parseFloat(hslaMatch[2]);
     const l = parseFloat(hslaMatch[3]);
-    const a = hslaMatch[4] != null ? clamp4(parseFloat(hslaMatch[4]), 0, 1) : 1;
+    const a = hslaMatch[4] != null ? clamp5(parseFloat(hslaMatch[4]), 0, 1) : 1;
     const rgb = hslToRgb(h, sl, l);
     return { ...rgb, a };
   }
@@ -13626,12 +13791,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)}%, ${clamp4(a, 0, 1)})`;
+      return `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${clamp5(a, 0, 1)})`;
     }
     return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`;
   }
   if (withAlpha || a !== 1) {
-    return `rgba(${clamp4(r, 0, 255)}, ${clamp4(g, 0, 255)}, ${clamp4(b, 0, 255)}, ${clamp4(a, 0, 1)})`;
+    return `rgba(${clamp5(r, 0, 255)}, ${clamp5(g, 0, 255)}, ${clamp5(b, 0, 255)}, ${clamp5(a, 0, 1)})`;
   }
   return rgbToHex(r, g, b);
 }
@@ -13765,7 +13930,7 @@ function ColorPicker({
     emit(next);
   };
   const setAlpha = (aPct) => {
-    const a = clamp4(aPct / 100, 0, 1);
+    const a = clamp5(aPct / 100, 0, 1);
     const next = { ...rgba, a };
     setRgba(next);
     emit(next);
@@ -18426,7 +18591,7 @@ function toNullableNumber(value) {
   }
   return null;
 }
-function clamp5(value, min, max) {
+function clamp6(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
 function ResizableImageNodeView(props) {
@@ -18488,18 +18653,18 @@ function ResizableImageNodeView(props) {
     let nextH = drag.startH;
     if (event.ctrlKey) {
       if (Math.abs(dx) >= Math.abs(dy)) {
-        nextW = clamp5(drag.startW + dx, MIN_IMAGE_SIZE_PX, drag.maxW);
-        nextH = clamp5(nextW / drag.aspect, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
+        nextW = clamp6(drag.startW + dx, MIN_IMAGE_SIZE_PX, drag.maxW);
+        nextH = clamp6(nextW / drag.aspect, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
       } else {
-        nextH = clamp5(drag.startH + dy, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
-        nextW = clamp5(nextH * drag.aspect, MIN_IMAGE_SIZE_PX, drag.maxW);
+        nextH = clamp6(drag.startH + dy, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
+        nextW = clamp6(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 = clamp5(drag.startW + dx, MIN_IMAGE_SIZE_PX, drag.maxW);
-      if (drag.axis === "y") nextH = clamp5(drag.startH + dy, MIN_IMAGE_SIZE_PX, Number.POSITIVE_INFINITY);
+      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);
     }
     drag.lastW = nextW;
     drag.lastH = nextH;