@underverse-ui/underverse 0.2.106 → 0.2.108

package/dist/index.cjs

@@ -7110,6 +7110,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") {
@@ -7159,17 +7167,20 @@ function WheelColumn({
     },
     [items.length, loop]
   );
-  React25.useEffect(() => {
+  React25.useLayoutEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
     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 desiredVirtual = loop && lastVirtualIndexRef.current == null ? baseOffset + valueIndex : 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 });
+      if (animate && delta <= itemHeight * 1.5) {
+        el.scrollTo({ top: nextTop, behavior: "smooth" });
+      } else {
+        el.scrollTop = nextTop;
+      }
     }
     lastVirtualIndexRef.current = desiredVirtual;
     return () => {
@@ -7177,9 +7188,13 @@ function WheelColumn({
         window.clearTimeout(scrollEndTimeoutRef.current);
         scrollEndTimeoutRef.current = null;
       }
+      if (inertiaRafRef.current != null) {
+        cancelAnimationFrame(inertiaRafRef.current);
+        inertiaRafRef.current = null;
+      }
       cancelAnimationFrame(rafRef.current);
     };
-  }, [animate, extendedItems.length, getNearestVirtualIndex, itemHeight, loop, scrollRef, valueIndex]);
+  }, [animate, baseOffset, extendedItems.length, getNearestVirtualIndex, itemHeight, loop, scrollRef, valueIndex]);
   React25.useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -7262,7 +7277,7 @@ function WheelColumn({
           if (centered > max) centered -= len;
           if (centered !== snappedVirtual) {
             lastVirtualIndexRef.current = centered;
-            el.scrollTo({ top: centered * itemHeight, behavior: "auto" });
+            el.scrollTop = centered * itemHeight;
           }
         }
       }, 120);
@@ -7274,6 +7289,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__ */ (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: [
@@ -7291,8 +7438,9 @@ function WheelColumn({
         {
           ref: scrollRef,
           className: cn(
-            "h-full overflow-y-auto overscroll-contain snap-y snap-mandatory scroll-smooth",
+            "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 },
@@ -7301,7 +7449,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__ */ (0, import_jsx_runtime31.jsx)("div", { children: extendedItems.map((n, index) => {
             const dist = Math.abs(index - currentVirtual);
             const distForVisual = Math.min(dist, 2);
@@ -7326,6 +7482,7 @@ function WheelColumn({
                   opacity
                 },
                 onClick: () => {
+                  if (Date.now() < suppressItemClickUntilRef.current) return;
                   const el = scrollRef.current;
                   if (!el) return;
                   suppressScrollSelectUntilRef.current = Date.now() + 350;
@@ -7686,7 +7843,7 @@ function TimePicker({
     emit(next);
   };
   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 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn(panelSz.timeText, "font-bold tabular-nums tracking-wide text-foreground underline underline-offset-8 decoration-primary/60"), children: display }) }),
     allowManualInput && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         Input_default,
@@ -11317,16 +11474,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,
@@ -11343,20 +11506,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__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("w-full space-y-2", containerClassName), children: [
@@ -11364,65 +11632,129 @@ var Slider = React34.forwardRef(
         label && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { className: cn("text-sm font-medium text-foreground", labelClassName), children: label }),
         showValue && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: cn("text-xs font-mono text-muted-foreground min-w-8 text-right", valueClassName), children: displayValue })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("relative flex items-center", sizeStyles8.container), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute left-0 top-0 h-full bg-primary rounded-full", style: { width: `${percentage}%` } }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          "input",
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref: trackRef, className: cn("relative flex items-center", sizeStyles8.container), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: isRange ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "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__ */ (0, import_jsx_runtime41.jsx)("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__ */ (0, import_jsx_runtime41.jsx)(
+              "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__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              "div",
+              {
+                className: cn("absolute inset-0 z-30", disabled ? "cursor-not-allowed" : "cursor-pointer"),
+                onPointerDown: startRangeDrag,
+                onPointerMove: moveRangeDrag,
+                onPointerUp: endRangeDrag,
+                onPointerCancel: endRangeDrag
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              "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__ */ (0, import_jsx_runtime41.jsx)(
+              "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
+              }
+            )
+          ] });
+        })()
       ] })
     ] });
   }
@@ -13688,7 +14020,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 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) {
@@ -13706,7 +14038,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;
@@ -13767,10 +14099,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);
@@ -13778,7 +14110,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 };
   }
@@ -13791,12 +14123,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);
 }
@@ -13930,7 +14262,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);
@@ -18591,7 +18923,7 @@ 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) {
@@ -18653,18 +18985,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;