tekiyo-physics 1.0.0 → 1.1.0

package/dist/index.js

@@ -1,8 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback, forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 class Vector2 {
   constructor(x = 0, y = 0) {
     this.x = x;
@@ -1873,39 +1873,2342 @@ const cardBaseStyles = {
   background: "white",
   boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)"
 };
+function PhysicsSlider({
+  label,
+  description,
+  value,
+  min,
+  max,
+  step,
+  config,
+  onChange,
+  decimals = 3,
+  forceDrag = false,
+  className = ""
+}) {
+  const trackRef = useRef(null);
+  const thumbRef = useRef(null);
+  const state = useRef({
+    isDragging: false,
+    displayPercent: (value - min) / (max - min) * 100,
+    thumbScale: 1,
+    verticalOffset: 0,
+    stretchX: 1,
+    stretchY: 1,
+    stretchOriginPercent: 50,
+    targetOriginPercent: 50,
+    shadowY: 2,
+    shadowBlur: 6,
+    shadowOpacity: 0.12,
+    lastPercent: (value - min) / (max - min) * 100,
+    currentVelocity: 0,
+    pointerStart: null
+  });
+  const [, forceRender] = React.useState(0);
+  const rerender = useCallback(() => forceRender((n) => n + 1), []);
+  const springRef = useRef(null);
+  const momentumRef = useRef(null);
+  const scaleSpringRef = useRef(null);
+  const verticalSpringRef = useRef(null);
+  const stretchXSpringRef = useRef(null);
+  const stretchYSpringRef = useRef(null);
+  const stretchOriginSpringRef = useRef(null);
+  const shadowSpringRef = useRef(null);
+  const velocityTracker = useRef(new VelocityTracker1D());
+  const physicsIdRef = useRef(generatePhysicsId("slider"));
+  const scaleIdRef = useRef(generatePhysicsId("scale"));
+  const verticalIdRef = useRef(generatePhysicsId("sliderVertical"));
+  const stretchXIdRef = useRef(generatePhysicsId("stretchX"));
+  const stretchYIdRef = useRef(generatePhysicsId("stretchY"));
+  const stretchOriginIdRef = useRef(generatePhysicsId("stretchOrigin"));
+  const shadowIdRef = useRef(generatePhysicsId("shadow"));
+  const dragDecayIdRef = useRef(generatePhysicsId("dragDecay"));
+  useEffect(() => {
+    if (!state.current.isDragging && !forceDrag) {
+      const targetPercent = (value - min) / (max - min) * 100;
+      animateToPercent(targetPercent);
+    }
+  }, [value, min, max]);
+  const lastValueRef = useRef(value);
+  useEffect(() => {
+    if (!forceDrag) {
+      lastValueRef.current = value;
+      return;
+    }
+    const s2 = state.current;
+    const targetPercent = (value - min) / (max - min) * 100;
+    const lastPercent = (lastValueRef.current - min) / (max - min) * 100;
+    const velocity = targetPercent - lastPercent;
+    lastValueRef.current = value;
+    s2.thumbScale = config.liftScale;
+    const absVelocity = Math.abs(velocity);
+    const velStretch = Math.min(absVelocity * config.velocityStretch * 15, 1.2);
+    s2.stretchX = 1 + velStretch;
+    s2.stretchY = 1 - velStretch * 0.4;
+    if (Math.abs(velocity) > 0.1) {
+      s2.stretchOriginPercent = velocity > 0 ? 100 : 0;
+    }
+    s2.shadowY = 2 + absVelocity * 0.4;
+    s2.shadowBlur = 6 + absVelocity * 0.6;
+    s2.shadowOpacity = 0.12 + absVelocity * 0.015;
+    s2.displayPercent = targetPercent;
+    s2.isDragging = true;
+    rerender();
+  }, [forceDrag, value, min, max, config.liftScale, config.velocityStretch, rerender]);
+  const animateToPercent = useCallback((targetPercent) => {
+    const s2 = state.current;
+    PhysicsEngine.unregister(physicsIdRef.current);
+    springRef.current = new Spring1D(s2.displayPercent, {
+      tension: config.springTension * 400,
+      friction: 26,
+      mass: 1,
+      precision: 0.01
+    });
+    springRef.current.setTarget(targetPercent);
+    PhysicsEngine.register(physicsIdRef.current, (dt) => {
+      if (!springRef.current) return;
+      const result = springRef.current.step(dt);
+      s2.displayPercent = result.value;
+      rerender();
+      if (result.isSettled) {
+        PhysicsEngine.unregister(physicsIdRef.current);
+      }
+    });
+  }, [config.springTension, rerender]);
+  const percentToValue = useCallback((percent) => {
+    const raw = min + percent / 100 * (max - min);
+    return Math.round(raw / step) * step;
+  }, [min, max, step]);
+  const animateScaleTo = useCallback((targetScale) => {
+    const s2 = state.current;
+    PhysicsEngine.unregister(scaleIdRef.current);
+    scaleSpringRef.current = new Spring1D(s2.thumbScale, {
+      tension: 400,
+      friction: 20,
+      mass: 0.6,
+      precision: 1e-3
+    });
+    scaleSpringRef.current.setTarget(targetScale);
+    PhysicsEngine.register(scaleIdRef.current, (dt) => {
+      if (!scaleSpringRef.current) return;
+      const result = scaleSpringRef.current.step(dt);
+      s2.thumbScale = result.value;
+      rerender();
+      if (result.isSettled) {
+        PhysicsEngine.unregister(scaleIdRef.current);
+      }
+    });
+  }, [rerender]);
+  const getMomentumDecay = useCallback((flickMs) => {
+    const clamped = Math.max(100, Math.min(2e3, flickMs));
+    const seconds = clamped / 1e3;
+    const targetRatio = 0.05;
+    return Math.exp(Math.log(targetRatio) / (seconds * 60));
+  }, []);
+  const animateStretchRelax = useCallback(() => {
+    const s2 = state.current;
+    PhysicsEngine.unregister(stretchXIdRef.current);
+    stretchXSpringRef.current = new Spring1D(s2.stretchX, {
+      tension: 300,
+      friction: 14,
+      mass: 0.5,
+      precision: 1e-3
+    });
+    stretchXSpringRef.current.setTarget(1);
+    PhysicsEngine.register(stretchXIdRef.current, (dt) => {
+      if (!stretchXSpringRef.current) return;
+      const result = stretchXSpringRef.current.step(dt);
+      s2.stretchX = result.value;
+      rerender();
+      if (result.isSettled) {
+        s2.stretchX = 1;
+        PhysicsEngine.unregister(stretchXIdRef.current);
+      }
+    });
+    PhysicsEngine.unregister(stretchYIdRef.current);
+    stretchYSpringRef.current = new Spring1D(s2.stretchY, {
+      tension: 300,
+      friction: 14,
+      mass: 0.5,
+      precision: 1e-3
+    });
+    stretchYSpringRef.current.setTarget(1);
+    PhysicsEngine.register(stretchYIdRef.current, (dt) => {
+      if (!stretchYSpringRef.current) return;
+      const result = stretchYSpringRef.current.step(dt);
+      s2.stretchY = result.value;
+      rerender();
+      if (result.isSettled) {
+        s2.stretchY = 1;
+        PhysicsEngine.unregister(stretchYIdRef.current);
+      }
+    });
+    PhysicsEngine.unregister(shadowIdRef.current);
+    shadowSpringRef.current = new Spring1D(s2.shadowY, {
+      tension: 250,
+      friction: 20,
+      mass: 0.5,
+      precision: 0.01
+    });
+    shadowSpringRef.current.setTarget(2);
+    PhysicsEngine.register(shadowIdRef.current, (dt) => {
+      if (!shadowSpringRef.current) return;
+      const result = shadowSpringRef.current.step(dt);
+      const t = (result.value - 2) / 10;
+      s2.shadowY = result.value;
+      s2.shadowBlur = 6 + t * 4;
+      s2.shadowOpacity = 0.12 + t * 0.03;
+      rerender();
+      if (result.isSettled) {
+        s2.shadowY = 2;
+        s2.shadowBlur = 6;
+        s2.shadowOpacity = 0.12;
+        PhysicsEngine.unregister(shadowIdRef.current);
+      }
+    });
+    PhysicsEngine.unregister(stretchOriginIdRef.current);
+    stretchOriginSpringRef.current = new Spring1D(s2.stretchOriginPercent, {
+      tension: 300,
+      friction: 18,
+      mass: 0.5,
+      precision: 0.1
+    });
+    stretchOriginSpringRef.current.setTarget(50);
+    PhysicsEngine.register(stretchOriginIdRef.current, (dt) => {
+      if (!stretchOriginSpringRef.current) return;
+      const result = stretchOriginSpringRef.current.step(dt);
+      s2.stretchOriginPercent = result.value;
+      s2.targetOriginPercent = 50;
+      rerender();
+      if (result.isSettled) {
+        s2.stretchOriginPercent = 50;
+        s2.targetOriginPercent = 50;
+        PhysicsEngine.unregister(stretchOriginIdRef.current);
+      }
+    });
+  }, [rerender]);
+  const handlePointerDown = useCallback((e) => {
+    if (!trackRef.current) return;
+    const s2 = state.current;
+    e.preventDefault();
+    e.target.setPointerCapture(e.pointerId);
+    s2.pointerStart = { x: e.clientX, y: e.clientY };
+    s2.isDragging = true;
+    PhysicsEngine.unregister(physicsIdRef.current);
+    PhysicsEngine.unregister(verticalIdRef.current);
+    PhysicsEngine.unregister(stretchXIdRef.current);
+    PhysicsEngine.unregister(stretchYIdRef.current);
+    PhysicsEngine.unregister(stretchOriginIdRef.current);
+    PhysicsEngine.unregister(shadowIdRef.current);
+    velocityTracker.current.reset();
+    animateScaleTo(config.liftScale);
+    const rect = trackRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(rect.width, e.clientX - rect.left));
+    const percent = x / rect.width * 100;
+    s2.displayPercent = percent;
+    s2.lastPercent = percent;
+    velocityTracker.current.addSample(percent);
+    onChange(percentToValue(percent));
+    PhysicsEngine.register(dragDecayIdRef.current, () => {
+      if (!s2.isDragging) return;
+      const decayLerp = 0.08;
+      const threshold = 1e-3;
+      if (Math.abs(s2.stretchX - 1) > threshold) {
+        s2.stretchX += (1 - s2.stretchX) * decayLerp;
+      }
+      if (Math.abs(s2.stretchY - 1) > threshold) {
+        s2.stretchY += (1 - s2.stretchY) * decayLerp;
+      }
+      if (Math.abs(s2.stretchOriginPercent - 50) > threshold) {
+        s2.stretchOriginPercent += (50 - s2.stretchOriginPercent) * decayLerp;
+      }
+      s2.shadowY += (2 - s2.shadowY) * decayLerp;
+      s2.shadowBlur += (6 - s2.shadowBlur) * decayLerp;
+      s2.shadowOpacity += (0.12 - s2.shadowOpacity) * decayLerp;
+      rerender();
+    });
+    rerender();
+  }, [onChange, percentToValue, animateScaleTo, config.liftScale, rerender]);
+  const handlePointerMove = useCallback((e) => {
+    const s2 = state.current;
+    if (!s2.isDragging || !trackRef.current || !s2.pointerStart) return;
+    const rect = trackRef.current.getBoundingClientRect();
+    const rawX = e.clientX - rect.left;
+    const rawPercent = rawX / rect.width * 100;
+    let percent = rawPercent;
+    let edgeStretchH = 0;
+    if (rawPercent < 0) {
+      edgeStretchH = -rawPercent / 100;
+      percent = rawPercent * 0.15;
+      s2.targetOriginPercent = 100;
+    } else if (rawPercent > 100) {
+      edgeStretchH = (rawPercent - 100) / 100;
+      percent = 100 + (rawPercent - 100) * 0.15;
+      s2.targetOriginPercent = 0;
+    }
+    const velocity = percent - s2.lastPercent;
+    s2.lastPercent = percent;
+    s2.currentVelocity = velocity;
+    if (Math.abs(velocity) > 0.3 && edgeStretchH === 0) {
+      s2.targetOriginPercent = velocity > 0 ? 100 : 0;
+    }
+    const originLerpSpeed = 0.15;
+    s2.stretchOriginPercent += (s2.targetOriginPercent - s2.stretchOriginPercent) * originLerpSpeed;
+    const rawVerticalOffset = e.clientY - s2.pointerStart.y;
+    const rubberBandedOffset = rawVerticalOffset * 0.06;
+    s2.verticalOffset = Math.max(-5, Math.min(5, rubberBandedOffset));
+    const absVelocity = Math.abs(velocity);
+    const velStretch = Math.min(absVelocity * config.velocityStretch * 15, 1.2);
+    const edgeStretchFactorH = Math.min(Math.abs(edgeStretchH) * 0.6, 0.12);
+    const edgeStretchFactorV = Math.abs(s2.verticalOffset) / 5 * 0.06;
+    const targetStretchX = 1 + velStretch + edgeStretchFactorH;
+    const targetStretchY = 1 - velStretch * 0.4 + edgeStretchFactorV;
+    const baseLerp = 0.35;
+    const decayLerp = 0.15;
+    const velocityThreshold = 0.5;
+    if (absVelocity < velocityThreshold) {
+      const decayFactor = 1 - absVelocity / velocityThreshold;
+      s2.stretchX += (1 - s2.stretchX) * decayLerp * decayFactor;
+      s2.stretchY += (1 - s2.stretchY) * decayLerp * decayFactor;
+      s2.stretchOriginPercent += (50 - s2.stretchOriginPercent) * decayLerp * decayFactor;
+    }
+    s2.stretchX += (targetStretchX - s2.stretchX) * baseLerp;
+    s2.stretchY += (targetStretchY - s2.stretchY) * baseLerp;
+    const targetShadowY = 2 + absVelocity * 0.4;
+    const targetShadowBlur = 6 + absVelocity * 0.6;
+    const targetShadowOpacity = 0.12 + absVelocity * 0.015;
+    const shadowLerp = 0.3;
+    s2.shadowY += (targetShadowY - s2.shadowY) * shadowLerp;
+    s2.shadowBlur += (targetShadowBlur - s2.shadowBlur) * shadowLerp;
+    s2.shadowOpacity += (targetShadowOpacity - s2.shadowOpacity) * shadowLerp;
+    s2.displayPercent = Math.max(0, Math.min(100, percent));
+    velocityTracker.current.addSample(percent);
+    onChange(percentToValue(Math.max(0, Math.min(100, percent))));
+    rerender();
+  }, [onChange, percentToValue, config.velocityStretch, rerender]);
+  const handlePointerUp = useCallback(() => {
+    const s2 = state.current;
+    if (!s2.isDragging) return;
+    s2.isDragging = false;
+    s2.pointerStart = null;
+    PhysicsEngine.unregister(dragDecayIdRef.current);
+    animateScaleTo(1);
+    animateStretchRelax();
+    if (s2.verticalOffset !== 0) {
+      PhysicsEngine.unregister(verticalIdRef.current);
+      verticalSpringRef.current = new Spring1D(s2.verticalOffset, {
+        tension: 400,
+        friction: 18,
+        mass: 0.5,
+        precision: 0.1
+      });
+      verticalSpringRef.current.setTarget(0);
+      PhysicsEngine.register(verticalIdRef.current, (dt) => {
+        if (!verticalSpringRef.current) return;
+        const result = verticalSpringRef.current.step(dt);
+        s2.verticalOffset = result.value;
+        rerender();
+        if (result.isSettled) {
+          s2.verticalOffset = 0;
+          PhysicsEngine.unregister(verticalIdRef.current);
+        }
+      });
+    }
+    const velocity = velocityTracker.current.getVelocity();
+    velocityTracker.current.reset();
+    if (Math.abs(velocity) > 30) {
+      const decay = getMomentumDecay(config.flickMomentum);
+      momentumRef.current = new Momentum1D(s2.displayPercent, {
+        decay,
+        stopThreshold: 0.3,
+        maxVelocity: config.maxVelocity * 100
+      });
+      momentumRef.current.start(s2.displayPercent, velocity * 0.4);
+      PhysicsEngine.register(physicsIdRef.current, (dt) => {
+        if (!momentumRef.current) return;
+        const result = momentumRef.current.step(dt);
+        const momentumVel = Math.abs(result.velocity || 0) / 100;
+        if (momentumVel > 0.1) {
+          const stretch = Math.min(momentumVel * config.velocityStretch * 5, 0.8);
+          s2.stretchX = 1 + stretch;
+          s2.stretchY = 1 - stretch * 0.5;
+          s2.targetOriginPercent = (result.velocity || 0) > 0 ? 100 : 0;
+          s2.stretchOriginPercent += (s2.targetOriginPercent - s2.stretchOriginPercent) * 0.1;
+        }
+        let newPercent = Math.max(0, Math.min(100, result.position));
+        if (result.position < 0 || result.position > 100) {
+          momentumRef.current.stop();
+          const targetPercent = result.position < 0 ? 0 : 100;
+          animateStretchRelax();
+          springRef.current = new Spring1D(newPercent, {
+            tension: config.springTension * 400,
+            friction: 26
+          });
+          springRef.current.setTarget(targetPercent);
+          PhysicsEngine.register(physicsIdRef.current, (dt2) => {
+            if (!springRef.current) return;
+            const springResult = springRef.current.step(dt2);
+            s2.displayPercent = springResult.value;
+            onChange(percentToValue(springResult.value));
+            rerender();
+            if (springResult.isSettled) {
+              PhysicsEngine.unregister(physicsIdRef.current);
+            }
+          });
+          return;
+        }
+        s2.displayPercent = newPercent;
+        onChange(percentToValue(newPercent));
+        rerender();
+        if (!result.isActive) {
+          animateStretchRelax();
+          PhysicsEngine.unregister(physicsIdRef.current);
+        }
+      });
+    }
+    rerender();
+  }, [config, onChange, percentToValue, animateScaleTo, animateStretchRelax, getMomentumDecay, rerender]);
+  const handleTrackClick = useCallback((e) => {
+    const s2 = state.current;
+    if (!trackRef.current || s2.isDragging) return;
+    const rect = trackRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const percent = Math.max(0, Math.min(100, x / rect.width * 100));
+    onChange(percentToValue(percent));
+    animateToPercent(percent);
+  }, [onChange, percentToValue, animateToPercent]);
+  useEffect(() => {
+    return () => {
+      PhysicsEngine.unregister(physicsIdRef.current);
+      PhysicsEngine.unregister(scaleIdRef.current);
+      PhysicsEngine.unregister(verticalIdRef.current);
+      PhysicsEngine.unregister(stretchXIdRef.current);
+      PhysicsEngine.unregister(stretchYIdRef.current);
+      PhysicsEngine.unregister(stretchOriginIdRef.current);
+      PhysicsEngine.unregister(shadowIdRef.current);
+      PhysicsEngine.unregister(dragDecayIdRef.current);
+    };
+  }, []);
+  const s = state.current;
+  return /* @__PURE__ */ jsxs("div", { className: `tekiyo-slider-container ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "tekiyo-slider-header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "tekiyo-slider-label-group", children: [
+        /* @__PURE__ */ jsx("span", { className: "tekiyo-slider-label", children: label }),
+        description && /* @__PURE__ */ jsx("span", { className: "tekiyo-slider-description", children: description })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "tekiyo-slider-value", children: value.toFixed(decimals) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "tekiyo-slider-track",
+        ref: trackRef,
+        onClick: handleTrackClick,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "tekiyo-slider-fill",
+              style: { width: `${s.displayPercent}%` }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: thumbRef,
+              className: `tekiyo-slider-thumb ${s.isDragging ? "active" : ""}`,
+              style: {
+                left: `${s.displayPercent}%`,
+                transform: `translate(-50%, calc(-50% + ${s.verticalOffset}px)) scale(${s.thumbScale}) scaleX(${s.stretchX}) scaleY(${s.stretchY})`,
+                transformOrigin: `${s.stretchOriginPercent}% center`,
+                boxShadow: `0 ${s.shadowY}px ${s.shadowBlur}px rgba(0, 0, 0, ${s.shadowOpacity})`
+              },
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              onPointerCancel: handlePointerUp
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function createThumbState(percent) {
+  return {
+    displayPercent: percent,
+    thumbScale: 1,
+    verticalOffset: 0,
+    stretchX: 1,
+    stretchY: 1,
+    stretchOriginPercent: 50,
+    targetOriginPercent: 50,
+    shadowY: 2,
+    shadowBlur: 6,
+    shadowOpacity: 0.12,
+    lastPercent: percent,
+    isDragging: false
+  };
+}
+function PhysicsRangeSlider({
+  label,
+  description,
+  minValue,
+  maxValue,
+  min,
+  max,
+  step,
+  config,
+  onChange,
+  formatValue = (v) => v.toFixed(0),
+  className = ""
+}) {
+  const trackRef = useRef(null);
+  const minPercent = (minValue - min) / (max - min) * 100;
+  const maxPercent = (maxValue - min) / (max - min) * 100;
+  const minThumb = useRef(createThumbState(minPercent));
+  const maxThumb = useRef(createThumbState(maxPercent));
+  const activeThumb = useRef(null);
+  const pointerStart = useRef(null);
+  const [, forceRender] = React.useState(0);
+  const rerender = useCallback(() => forceRender((n) => n + 1), []);
+  const minScaleId = useRef(generatePhysicsId("rangeMinScale"));
+  const maxScaleId = useRef(generatePhysicsId("rangeMaxScale"));
+  const minDecayId = useRef(generatePhysicsId("rangeMinDecay"));
+  const maxDecayId = useRef(generatePhysicsId("rangeMaxDecay"));
+  const minRelaxId = useRef(generatePhysicsId("rangeMinRelax"));
+  const maxRelaxId = useRef(generatePhysicsId("rangeMaxRelax"));
+  const minScaleSpring = useRef(null);
+  const maxScaleSpring = useRef(null);
+  useEffect(() => {
+    if (!minThumb.current.isDragging) {
+      minThumb.current.displayPercent = (minValue - min) / (max - min) * 100;
+    }
+    if (!maxThumb.current.isDragging) {
+      maxThumb.current.displayPercent = (maxValue - min) / (max - min) * 100;
+    }
+    rerender();
+  }, [minValue, maxValue, min, max, rerender]);
+  const percentToValue = useCallback(
+    (percent) => {
+      const raw = min + percent / 100 * (max - min);
+      return Math.round(raw / step) * step;
+    },
+    [min, max, step]
+  );
+  const animateScaleTo = useCallback(
+    (thumb, targetScale) => {
+      const state = thumb === "min" ? minThumb.current : maxThumb.current;
+      const springRef = thumb === "min" ? minScaleSpring : maxScaleSpring;
+      const scaleId = thumb === "min" ? minScaleId : maxScaleId;
+      PhysicsEngine.unregister(scaleId.current);
+      springRef.current = new Spring1D(state.thumbScale, {
+        tension: 400,
+        friction: 20,
+        mass: 0.6,
+        precision: 1e-3
+      });
+      springRef.current.setTarget(targetScale);
+      PhysicsEngine.register(scaleId.current, (dt) => {
+        if (!springRef.current) return;
+        const result = springRef.current.step(dt);
+        state.thumbScale = result.value;
+        rerender();
+        if (result.isSettled) {
+          PhysicsEngine.unregister(scaleId.current);
+        }
+      });
+    },
+    [rerender]
+  );
+  const animateStretchRelax = useCallback(
+    (thumb) => {
+      const state = thumb === "min" ? minThumb.current : maxThumb.current;
+      const relaxId = thumb === "min" ? minRelaxId : maxRelaxId;
+      PhysicsEngine.unregister(relaxId.current);
+      const spring = new Spring1D(state.stretchX, {
+        tension: 300,
+        friction: 14,
+        mass: 0.5,
+        precision: 1e-3
+      });
+      spring.setTarget(1);
+      PhysicsEngine.register(relaxId.current, (dt) => {
+        const result = spring.step(dt);
+        state.stretchX = result.value;
+        state.stretchY = 1 - (result.value - 1) * 0.4;
+        state.stretchOriginPercent += (50 - state.stretchOriginPercent) * 0.15;
+        state.shadowY += (2 - state.shadowY) * 0.15;
+        state.shadowBlur += (6 - state.shadowBlur) * 0.15;
+        state.shadowOpacity += (0.12 - state.shadowOpacity) * 0.15;
+        rerender();
+        if (result.isSettled) {
+          state.stretchX = 1;
+          state.stretchY = 1;
+          state.stretchOriginPercent = 50;
+          PhysicsEngine.unregister(relaxId.current);
+        }
+      });
+    },
+    [rerender]
+  );
+  const handlePointerDown = useCallback(
+    (e, thumb) => {
+      if (!trackRef.current) return;
+      const state = thumb === "min" ? minThumb.current : maxThumb.current;
+      const decayId = thumb === "min" ? minDecayId : maxDecayId;
+      e.preventDefault();
+      e.stopPropagation();
+      e.target.setPointerCapture(e.pointerId);
+      pointerStart.current = { x: e.clientX, y: e.clientY };
+      activeThumb.current = thumb;
+      state.isDragging = true;
+      animateScaleTo(thumb, config.liftScale);
+      PhysicsEngine.register(decayId.current, () => {
+        if (!state.isDragging) return;
+        const decayLerp = 0.08;
+        const threshold = 1e-3;
+        if (Math.abs(state.stretchX - 1) > threshold) {
+          state.stretchX += (1 - state.stretchX) * decayLerp;
+        }
+        if (Math.abs(state.stretchY - 1) > threshold) {
+          state.stretchY += (1 - state.stretchY) * decayLerp;
+        }
+        if (Math.abs(state.stretchOriginPercent - 50) > threshold) {
+          state.stretchOriginPercent += (50 - state.stretchOriginPercent) * decayLerp;
+        }
+        state.shadowY += (2 - state.shadowY) * decayLerp;
+        state.shadowBlur += (6 - state.shadowBlur) * decayLerp;
+        state.shadowOpacity += (0.12 - state.shadowOpacity) * decayLerp;
+        rerender();
+      });
+      rerender();
+    },
+    [config.liftScale, animateScaleTo, rerender]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!activeThumb.current || !trackRef.current || !pointerStart.current) return;
+      const thumb = activeThumb.current;
+      const state = thumb === "min" ? minThumb.current : maxThumb.current;
+      const rect = trackRef.current.getBoundingClientRect();
+      const rawX = e.clientX - rect.left;
+      let percent = rawX / rect.width * 100;
+      if (thumb === "min") {
+        percent = Math.max(0, Math.min(maxThumb.current.displayPercent - 5, percent));
+      } else {
+        percent = Math.min(100, Math.max(minThumb.current.displayPercent + 5, percent));
+      }
+      const velocity = percent - state.lastPercent;
+      state.lastPercent = percent;
+      if (Math.abs(velocity) > 0.3) {
+        state.targetOriginPercent = velocity > 0 ? 100 : 0;
+      }
+      state.stretchOriginPercent += (state.targetOriginPercent - state.stretchOriginPercent) * 0.15;
+      const absVelocity = Math.abs(velocity);
+      const velStretch = Math.min(absVelocity * config.velocityStretch * 15, 1.2);
+      const targetStretchX = 1 + velStretch;
+      const targetStretchY = 1 - velStretch * 0.4;
+      const baseLerp = 0.35;
+      const decayLerp = 0.15;
+      const velocityThreshold = 0.5;
+      if (absVelocity < velocityThreshold) {
+        const decayFactor = 1 - absVelocity / velocityThreshold;
+        state.stretchX += (1 - state.stretchX) * decayLerp * decayFactor;
+        state.stretchY += (1 - state.stretchY) * decayLerp * decayFactor;
+        state.stretchOriginPercent += (50 - state.stretchOriginPercent) * decayLerp * decayFactor;
+      }
+      state.stretchX += (targetStretchX - state.stretchX) * baseLerp;
+      state.stretchY += (targetStretchY - state.stretchY) * baseLerp;
+      const targetShadowY = 2 + absVelocity * 0.4;
+      const targetShadowBlur = 6 + absVelocity * 0.6;
+      const targetShadowOpacity = 0.12 + absVelocity * 0.015;
+      state.shadowY += (targetShadowY - state.shadowY) * 0.3;
+      state.shadowBlur += (targetShadowBlur - state.shadowBlur) * 0.3;
+      state.shadowOpacity += (targetShadowOpacity - state.shadowOpacity) * 0.3;
+      state.displayPercent = percent;
+      const newMin = thumb === "min" ? percentToValue(percent) : minValue;
+      const newMax = thumb === "max" ? percentToValue(percent) : maxValue;
+      onChange(newMin, newMax);
+      rerender();
+    },
+    [config.velocityStretch, minValue, maxValue, percentToValue, onChange, rerender]
+  );
+  const handlePointerUp = useCallback(() => {
+    if (!activeThumb.current) return;
+    const thumb = activeThumb.current;
+    const state = thumb === "min" ? minThumb.current : maxThumb.current;
+    const decayId = thumb === "min" ? minDecayId : maxDecayId;
+    state.isDragging = false;
+    pointerStart.current = null;
+    activeThumb.current = null;
+    PhysicsEngine.unregister(decayId.current);
+    animateScaleTo(thumb, 1);
+    animateStretchRelax(thumb);
+    rerender();
+  }, [animateScaleTo, animateStretchRelax, rerender]);
+  useEffect(() => {
+    return () => {
+      PhysicsEngine.unregister(minScaleId.current);
+      PhysicsEngine.unregister(maxScaleId.current);
+      PhysicsEngine.unregister(minDecayId.current);
+      PhysicsEngine.unregister(maxDecayId.current);
+      PhysicsEngine.unregister(minRelaxId.current);
+      PhysicsEngine.unregister(maxRelaxId.current);
+    };
+  }, []);
+  const minS = minThumb.current;
+  const maxS = maxThumb.current;
+  return /* @__PURE__ */ jsxs("div", { className: `tekiyo-range-slider ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "tekiyo-slider-header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "tekiyo-slider-label-group", children: [
+        /* @__PURE__ */ jsx("span", { className: "tekiyo-slider-label", children: label }),
+        description && /* @__PURE__ */ jsx("span", { className: "tekiyo-slider-description", children: description })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "tekiyo-slider-value", children: [
+        formatValue(minValue),
+        " - ",
+        formatValue(maxValue)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "tekiyo-slider-track",
+        ref: trackRef,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "tekiyo-slider-track-bg" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "tekiyo-range-fill",
+              style: {
+                left: `${minS.displayPercent}%`,
+                width: `${maxS.displayPercent - minS.displayPercent}%`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `tekiyo-slider-thumb tekiyo-range-thumb-min ${minS.isDragging ? "active" : ""}`,
+              style: {
+                left: `${minS.displayPercent}%`,
+                transform: `translate(-50%, calc(-50% + ${minS.verticalOffset}px)) scale(${minS.thumbScale}) scaleX(${minS.stretchX}) scaleY(${minS.stretchY})`,
+                transformOrigin: `${minS.stretchOriginPercent}% center`,
+                boxShadow: `0 ${minS.shadowY}px ${minS.shadowBlur}px rgba(0, 0, 0, ${minS.shadowOpacity})`
+              },
+              onPointerDown: (e) => handlePointerDown(e, "min")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `tekiyo-slider-thumb tekiyo-range-thumb-max ${maxS.isDragging ? "active" : ""}`,
+              style: {
+                left: `${maxS.displayPercent}%`,
+                transform: `translate(-50%, calc(-50% + ${maxS.verticalOffset}px)) scale(${maxS.thumbScale}) scaleX(${maxS.stretchX}) scaleY(${maxS.stretchY})`,
+                transformOrigin: `${maxS.stretchOriginPercent}% center`,
+                boxShadow: `0 ${maxS.shadowY}px ${maxS.shadowBlur}px rgba(0, 0, 0, ${maxS.shadowOpacity})`
+              },
+              onPointerDown: (e) => handlePointerDown(e, "max")
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function PhysicsStepSlider({
+  label,
+  description,
+  options,
+  value,
+  config,
+  onChange,
+  className = ""
+}) {
+  const trackRef = useRef(null);
+  const currentIndex = options.findIndex((opt) => opt.value === value);
+  const stepPercent = 100 / (options.length - 1);
+  const targetPercent = currentIndex * stepPercent;
+  const state = useRef({
+    isDragging: false,
+    displayPercent: targetPercent,
+    thumbScale: 1,
+    verticalOffset: 0,
+    stretchX: 1,
+    stretchY: 1,
+    stretchOriginPercent: 50,
+    targetOriginPercent: 50,
+    shadowY: 2,
+    shadowBlur: 6,
+    shadowOpacity: 0.12,
+    lastPercent: targetPercent,
+    pointerStart: null
+  });
+  const [, forceRender] = React.useState(0);
+  const rerender = useCallback(() => forceRender((n) => n + 1), []);
+  const scaleIdRef = useRef(generatePhysicsId("stepScale"));
+  const snapIdRef = useRef(generatePhysicsId("stepSnap"));
+  const decayIdRef = useRef(generatePhysicsId("stepDecay"));
+  const relaxIdRef = useRef(generatePhysicsId("stepRelax"));
+  const scaleSpring = useRef(null);
+  const snapSpring = useRef(null);
+  useEffect(() => {
+    if (!state.current.isDragging) {
+      const idx = options.findIndex((opt) => opt.value === value);
+      const percent = idx * stepPercent;
+      animateToPercent(percent);
+    }
+  }, [value, options, stepPercent]);
+  const animateToPercent = useCallback(
+    (targetPercent2) => {
+      const s2 = state.current;
+      PhysicsEngine.unregister(snapIdRef.current);
+      snapSpring.current = new Spring1D(s2.displayPercent, {
+        tension: config.springTension * 500,
+        friction: 22,
+        mass: 0.8,
+        precision: 0.01
+      });
+      snapSpring.current.setTarget(targetPercent2);
+      PhysicsEngine.register(snapIdRef.current, (dt) => {
+        if (!snapSpring.current) return;
+        const result = snapSpring.current.step(dt);
+        s2.displayPercent = result.value;
+        rerender();
+        if (result.isSettled) {
+          PhysicsEngine.unregister(snapIdRef.current);
+        }
+      });
+    },
+    [config.springTension, rerender]
+  );
+  const animateScaleTo = useCallback(
+    (targetScale) => {
+      const s2 = state.current;
+      PhysicsEngine.unregister(scaleIdRef.current);
+      scaleSpring.current = new Spring1D(s2.thumbScale, {
+        tension: 400,
+        friction: 20,
+        mass: 0.6,
+        precision: 1e-3
+      });
+      scaleSpring.current.setTarget(targetScale);
+      PhysicsEngine.register(scaleIdRef.current, (dt) => {
+        if (!scaleSpring.current) return;
+        const result = scaleSpring.current.step(dt);
+        s2.thumbScale = result.value;
+        rerender();
+        if (result.isSettled) {
+          PhysicsEngine.unregister(scaleIdRef.current);
+        }
+      });
+    },
+    [rerender]
+  );
+  const animateStretchRelax = useCallback(() => {
+    const s2 = state.current;
+    PhysicsEngine.unregister(relaxIdRef.current);
+    const spring = new Spring1D(s2.stretchX, {
+      tension: 300,
+      friction: 14,
+      mass: 0.5,
+      precision: 1e-3
+    });
+    spring.setTarget(1);
+    PhysicsEngine.register(relaxIdRef.current, (dt) => {
+      const result = spring.step(dt);
+      s2.stretchX = result.value;
+      s2.stretchY = 1 - (result.value - 1) * 0.4;
+      s2.stretchOriginPercent += (50 - s2.stretchOriginPercent) * 0.15;
+      s2.shadowY += (2 - s2.shadowY) * 0.15;
+      s2.shadowBlur += (6 - s2.shadowBlur) * 0.15;
+      s2.shadowOpacity += (0.12 - s2.shadowOpacity) * 0.15;
+      rerender();
+      if (result.isSettled) {
+        s2.stretchX = 1;
+        s2.stretchY = 1;
+        s2.stretchOriginPercent = 50;
+        PhysicsEngine.unregister(relaxIdRef.current);
+      }
+    });
+  }, [rerender]);
+  const getClosestStepIndex = useCallback(
+    (percent) => {
+      const stepSize = 100 / (options.length - 1);
+      return Math.round(percent / stepSize);
+    },
+    [options.length]
+  );
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (!trackRef.current) return;
+      const s2 = state.current;
+      e.preventDefault();
+      e.target.setPointerCapture(e.pointerId);
+      s2.pointerStart = { x: e.clientX, y: e.clientY };
+      s2.isDragging = true;
+      PhysicsEngine.unregister(snapIdRef.current);
+      animateScaleTo(config.liftScale);
+      PhysicsEngine.register(decayIdRef.current, () => {
+        if (!s2.isDragging) return;
+        const decayLerp = 0.08;
+        const threshold = 1e-3;
+        if (Math.abs(s2.stretchX - 1) > threshold) {
+          s2.stretchX += (1 - s2.stretchX) * decayLerp;
+        }
+        if (Math.abs(s2.stretchY - 1) > threshold) {
+          s2.stretchY += (1 - s2.stretchY) * decayLerp;
+        }
+        if (Math.abs(s2.stretchOriginPercent - 50) > threshold) {
+          s2.stretchOriginPercent += (50 - s2.stretchOriginPercent) * decayLerp;
+        }
+        s2.shadowY += (2 - s2.shadowY) * decayLerp;
+        s2.shadowBlur += (6 - s2.shadowBlur) * decayLerp;
+        s2.shadowOpacity += (0.12 - s2.shadowOpacity) * decayLerp;
+        rerender();
+      });
+      const rect = trackRef.current.getBoundingClientRect();
+      const x = Math.max(0, Math.min(rect.width, e.clientX - rect.left));
+      const percent = x / rect.width * 100;
+      s2.displayPercent = percent;
+      s2.lastPercent = percent;
+      rerender();
+    },
+    [config.liftScale, animateScaleTo, rerender]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      const s2 = state.current;
+      if (!s2.isDragging || !trackRef.current || !s2.pointerStart) return;
+      const rect = trackRef.current.getBoundingClientRect();
+      const rawX = e.clientX - rect.left;
+      const percent = Math.max(0, Math.min(100, rawX / rect.width * 100));
+      const velocity = percent - s2.lastPercent;
+      s2.lastPercent = percent;
+      if (Math.abs(velocity) > 0.3) {
+        s2.targetOriginPercent = velocity > 0 ? 100 : 0;
+      }
+      s2.stretchOriginPercent += (s2.targetOriginPercent - s2.stretchOriginPercent) * 0.15;
+      const absVelocity = Math.abs(velocity);
+      const velStretch = Math.min(absVelocity * config.velocityStretch * 15, 1.2);
+      const targetStretchX = 1 + velStretch;
+      const targetStretchY = 1 - velStretch * 0.4;
+      const baseLerp = 0.35;
+      const decayLerp = 0.15;
+      const velocityThreshold = 0.5;
+      if (absVelocity < velocityThreshold) {
+        const decayFactor = 1 - absVelocity / velocityThreshold;
+        s2.stretchX += (1 - s2.stretchX) * decayLerp * decayFactor;
+        s2.stretchY += (1 - s2.stretchY) * decayLerp * decayFactor;
+      }
+      s2.stretchX += (targetStretchX - s2.stretchX) * baseLerp;
+      s2.stretchY += (targetStretchY - s2.stretchY) * baseLerp;
+      const targetShadowY = 2 + absVelocity * 0.4;
+      const targetShadowBlur = 6 + absVelocity * 0.6;
+      const targetShadowOpacity = 0.12 + absVelocity * 0.015;
+      s2.shadowY += (targetShadowY - s2.shadowY) * 0.3;
+      s2.shadowBlur += (targetShadowBlur - s2.shadowBlur) * 0.3;
+      s2.shadowOpacity += (targetShadowOpacity - s2.shadowOpacity) * 0.3;
+      s2.displayPercent = percent;
+      rerender();
+    },
+    [config.velocityStretch, rerender]
+  );
+  const handlePointerUp = useCallback(() => {
+    var _a;
+    const s2 = state.current;
+    if (!s2.isDragging) return;
+    s2.isDragging = false;
+    s2.pointerStart = null;
+    PhysicsEngine.unregister(decayIdRef.current);
+    animateScaleTo(1);
+    animateStretchRelax();
+    const closestIndex = getClosestStepIndex(s2.displayPercent);
+    const snapPercent = closestIndex * stepPercent;
+    animateToPercent(snapPercent);
+    const newValue = (_a = options[closestIndex]) == null ? void 0 : _a.value;
+    if (newValue !== void 0 && newValue !== value) {
+      onChange(newValue);
+    }
+    rerender();
+  }, [animateScaleTo, animateStretchRelax, animateToPercent, getClosestStepIndex, stepPercent, options, value, onChange, rerender]);
+  const handleStepClick = useCallback(
+    (index) => {
+      if (state.current.isDragging) return;
+      const newValue = options[index].value;
+      if (newValue !== value) {
+        onChange(newValue);
+      }
+    },
+    [options, value, onChange]
+  );
+  useEffect(() => {
+    return () => {
+      PhysicsEngine.unregister(scaleIdRef.current);
+      PhysicsEngine.unregister(snapIdRef.current);
+      PhysicsEngine.unregister(decayIdRef.current);
+      PhysicsEngine.unregister(relaxIdRef.current);
+    };
+  }, []);
+  const s = state.current;
+  const currentOption = options[currentIndex];
+  return /* @__PURE__ */ jsxs("div", { className: `tekiyo-step-slider ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "tekiyo-slider-header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "tekiyo-slider-label-group", children: [
+        /* @__PURE__ */ jsx("span", { className: "tekiyo-slider-label", children: label }),
+        description && /* @__PURE__ */ jsx("span", { className: "tekiyo-slider-description", children: description })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "tekiyo-step-value",
+          style: { color: currentOption == null ? void 0 : currentOption.color },
+          children: currentOption == null ? void 0 : currentOption.label
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "tekiyo-step-track",
+        ref: trackRef,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "tekiyo-step-track-bg" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "tekiyo-step-track-fill",
+              style: {
+                width: `${s.displayPercent}%`,
+                background: (currentOption == null ? void 0 : currentOption.color) || "#007aff"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "tekiyo-step-dots", children: options.map((option, index) => {
+            const dotPercent = index * stepPercent;
+            const isActive = s.displayPercent >= dotPercent - 1;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `tekiyo-step-dot ${isActive ? "active" : ""}`,
+                style: {
+                  left: `${dotPercent}%`,
+                  background: isActive ? option.color || "#007aff" : void 0
+                },
+                onClick: () => handleStepClick(index)
+              },
+              option.value
+            );
+          }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `tekiyo-slider-thumb tekiyo-step-thumb ${s.isDragging ? "active" : ""}`,
+              style: {
+                left: `${s.displayPercent}%`,
+                transform: `translate(-50%, calc(-50% + ${s.verticalOffset}px)) scale(${s.thumbScale}) scaleX(${s.stretchX}) scaleY(${s.stretchY})`,
+                transformOrigin: `${s.stretchOriginPercent}% center`,
+                boxShadow: `0 ${s.shadowY}px ${s.shadowBlur}px rgba(0, 0, 0, ${s.shadowOpacity})`
+              },
+              onPointerDown: handlePointerDown
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "tekiyo-step-labels", children: options.map((option, index) => {
+      const labelPercent = index * stepPercent;
+      const isSelected = currentIndex === index;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `tekiyo-step-label ${isSelected ? "selected" : ""}`,
+          style: {
+            left: `${labelPercent}%`,
+            color: isSelected ? option.color || "#007aff" : void 0
+          },
+          onClick: () => handleStepClick(index),
+          children: option.label
+        },
+        option.value
+      );
+    }) })
+  ] });
+}
+function PhysicsVerticalSlider({
+  label,
+  icon,
+  value,
+  min,
+  max,
+  step,
+  config,
+  onChange,
+  height = 160,
+  color = "#007aff",
+  className = ""
+}) {
+  const trackRef = useRef(null);
+  const state = useRef({
+    isDragging: false,
+    displayPercent: (value - min) / (max - min) * 100,
+    thumbScale: 1,
+    horizontalOffset: 0,
+    stretchX: 1,
+    stretchY: 1,
+    stretchOriginPercent: 50,
+    targetOriginPercent: 50,
+    shadowX: 0,
+    shadowY: 2,
+    shadowBlur: 6,
+    shadowOpacity: 0.12,
+    lastPercent: (value - min) / (max - min) * 100,
+    pointerStart: null
+  });
+  const [, forceRender] = React.useState(0);
+  const rerender = useCallback(() => forceRender((n) => n + 1), []);
+  const physicsIdRef = useRef(generatePhysicsId("vslider"));
+  const scaleIdRef = useRef(generatePhysicsId("vscale"));
+  const decayIdRef = useRef(generatePhysicsId("vdecay"));
+  const relaxIdRef = useRef(generatePhysicsId("vrelax"));
+  const horizontalIdRef = useRef(generatePhysicsId("vhorizontal"));
+  const springRef = useRef(null);
+  const scaleSpringRef = useRef(null);
+  const horizontalSpringRef = useRef(null);
+  useEffect(() => {
+    if (!state.current.isDragging) {
+      const targetPercent = (value - min) / (max - min) * 100;
+      animateToPercent(targetPercent);
+    }
+  }, [value, min, max]);
+  const animateToPercent = useCallback(
+    (targetPercent) => {
+      const s2 = state.current;
+      PhysicsEngine.unregister(physicsIdRef.current);
+      springRef.current = new Spring1D(s2.displayPercent, {
+        tension: config.springTension * 400,
+        friction: 26,
+        mass: 1,
+        precision: 0.01
+      });
+      springRef.current.setTarget(targetPercent);
+      PhysicsEngine.register(physicsIdRef.current, (dt) => {
+        if (!springRef.current) return;
+        const result = springRef.current.step(dt);
+        s2.displayPercent = result.value;
+        rerender();
+        if (result.isSettled) {
+          PhysicsEngine.unregister(physicsIdRef.current);
+        }
+      });
+    },
+    [config.springTension, rerender]
+  );
+  const percentToValue = useCallback(
+    (percent) => {
+      const raw = min + percent / 100 * (max - min);
+      return Math.round(raw / step) * step;
+    },
+    [min, max, step]
+  );
+  const animateScaleTo = useCallback(
+    (targetScale) => {
+      const s2 = state.current;
+      PhysicsEngine.unregister(scaleIdRef.current);
+      scaleSpringRef.current = new Spring1D(s2.thumbScale, {
+        tension: 400,
+        friction: 20,
+        mass: 0.6,
+        precision: 1e-3
+      });
+      scaleSpringRef.current.setTarget(targetScale);
+      PhysicsEngine.register(scaleIdRef.current, (dt) => {
+        if (!scaleSpringRef.current) return;
+        const result = scaleSpringRef.current.step(dt);
+        s2.thumbScale = result.value;
+        rerender();
+        if (result.isSettled) {
+          PhysicsEngine.unregister(scaleIdRef.current);
+        }
+      });
+    },
+    [rerender]
+  );
+  const animateStretchRelax = useCallback(() => {
+    const s2 = state.current;
+    PhysicsEngine.unregister(relaxIdRef.current);
+    const spring = new Spring1D(s2.stretchY, {
+      tension: 300,
+      friction: 14,
+      mass: 0.5,
+      precision: 1e-3
+    });
+    spring.setTarget(1);
+    PhysicsEngine.register(relaxIdRef.current, (dt) => {
+      const result = spring.step(dt);
+      s2.stretchY = result.value;
+      s2.stretchX = 1 - (result.value - 1) * 0.4;
+      s2.stretchOriginPercent += (50 - s2.stretchOriginPercent) * 0.15;
+      s2.shadowY += (2 - s2.shadowY) * 0.15;
+      s2.shadowBlur += (6 - s2.shadowBlur) * 0.15;
+      s2.shadowOpacity += (0.12 - s2.shadowOpacity) * 0.15;
+      rerender();
+      if (result.isSettled) {
+        s2.stretchX = 1;
+        s2.stretchY = 1;
+        s2.stretchOriginPercent = 50;
+        PhysicsEngine.unregister(relaxIdRef.current);
+      }
+    });
+  }, [rerender]);
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (!trackRef.current) return;
+      const s2 = state.current;
+      e.preventDefault();
+      e.target.setPointerCapture(e.pointerId);
+      s2.pointerStart = { x: e.clientX, y: e.clientY };
+      s2.isDragging = true;
+      PhysicsEngine.unregister(physicsIdRef.current);
+      PhysicsEngine.unregister(horizontalIdRef.current);
+      PhysicsEngine.unregister(relaxIdRef.current);
+      animateScaleTo(config.liftScale);
+      PhysicsEngine.register(decayIdRef.current, () => {
+        if (!s2.isDragging) return;
+        const decayLerp = 0.08;
+        const threshold = 1e-3;
+        if (Math.abs(s2.stretchY - 1) > threshold) {
+          s2.stretchY += (1 - s2.stretchY) * decayLerp;
+        }
+        if (Math.abs(s2.stretchX - 1) > threshold) {
+          s2.stretchX += (1 - s2.stretchX) * decayLerp;
+        }
+        if (Math.abs(s2.stretchOriginPercent - 50) > threshold) {
+          s2.stretchOriginPercent += (50 - s2.stretchOriginPercent) * decayLerp;
+        }
+        s2.shadowY += (2 - s2.shadowY) * decayLerp;
+        s2.shadowBlur += (6 - s2.shadowBlur) * decayLerp;
+        s2.shadowOpacity += (0.12 - s2.shadowOpacity) * decayLerp;
+        rerender();
+      });
+      const rect = trackRef.current.getBoundingClientRect();
+      const y = Math.max(0, Math.min(rect.height, e.clientY - rect.top));
+      const percent = 100 - y / rect.height * 100;
+      s2.displayPercent = percent;
+      s2.lastPercent = percent;
+      onChange(percentToValue(percent));
+      rerender();
+    },
+    [config.liftScale, animateScaleTo, percentToValue, onChange, rerender]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      const s2 = state.current;
+      if (!s2.isDragging || !trackRef.current || !s2.pointerStart) return;
+      const rect = trackRef.current.getBoundingClientRect();
+      const rawY = e.clientY - rect.top;
+      const rawPercent = 100 - rawY / rect.height * 100;
+      let percent = rawPercent;
+      let edgeStretchV = 0;
+      if (rawPercent < 0) {
+        edgeStretchV = -rawPercent / 100;
+        percent = rawPercent * 0.15;
+        s2.targetOriginPercent = 0;
+      } else if (rawPercent > 100) {
+        edgeStretchV = (rawPercent - 100) / 100;
+        percent = 100 + (rawPercent - 100) * 0.15;
+        s2.targetOriginPercent = 100;
+      }
+      const velocity = percent - s2.lastPercent;
+      s2.lastPercent = percent;
+      if (Math.abs(velocity) > 0.3 && edgeStretchV === 0) {
+        s2.targetOriginPercent = velocity > 0 ? 0 : 100;
+      }
+      s2.stretchOriginPercent += (s2.targetOriginPercent - s2.stretchOriginPercent) * 0.15;
+      const rawHorizontalOffset = e.clientX - s2.pointerStart.x;
+      const rubberBandedOffset = rawHorizontalOffset * 0.06;
+      s2.horizontalOffset = Math.max(-5, Math.min(5, rubberBandedOffset));
+      const absVelocity = Math.abs(velocity);
+      const velStretch = Math.min(absVelocity * config.velocityStretch * 15, 1.2);
+      const edgeStretchFactorV = Math.min(Math.abs(edgeStretchV) * 0.6, 0.12);
+      const edgeStretchFactorH = Math.abs(s2.horizontalOffset) / 5 * 0.06;
+      const targetStretchY = 1 + velStretch + edgeStretchFactorV;
+      const targetStretchX = 1 - velStretch * 0.4 + edgeStretchFactorH;
+      const baseLerp = 0.35;
+      const decayLerp = 0.15;
+      const velocityThreshold = 0.5;
+      if (absVelocity < velocityThreshold) {
+        const decayFactor = 1 - absVelocity / velocityThreshold;
+        s2.stretchY += (1 - s2.stretchY) * decayLerp * decayFactor;
+        s2.stretchX += (1 - s2.stretchX) * decayLerp * decayFactor;
+        s2.stretchOriginPercent += (50 - s2.stretchOriginPercent) * decayLerp * decayFactor;
+      }
+      s2.stretchY += (targetStretchY - s2.stretchY) * baseLerp;
+      s2.stretchX += (targetStretchX - s2.stretchX) * baseLerp;
+      const targetShadowY = 2 + absVelocity * 0.4;
+      const targetShadowBlur = 6 + absVelocity * 0.6;
+      const targetShadowOpacity = 0.12 + absVelocity * 0.015;
+      s2.shadowY += (targetShadowY - s2.shadowY) * 0.3;
+      s2.shadowBlur += (targetShadowBlur - s2.shadowBlur) * 0.3;
+      s2.shadowOpacity += (targetShadowOpacity - s2.shadowOpacity) * 0.3;
+      s2.displayPercent = Math.max(0, Math.min(100, percent));
+      onChange(percentToValue(Math.max(0, Math.min(100, percent))));
+      rerender();
+    },
+    [config.velocityStretch, percentToValue, onChange, rerender]
+  );
+  const handlePointerUp = useCallback(() => {
+    const s2 = state.current;
+    if (!s2.isDragging) return;
+    s2.isDragging = false;
+    s2.pointerStart = null;
+    PhysicsEngine.unregister(decayIdRef.current);
+    animateScaleTo(1);
+    animateStretchRelax();
+    if (s2.horizontalOffset !== 0) {
+      PhysicsEngine.unregister(horizontalIdRef.current);
+      horizontalSpringRef.current = new Spring1D(s2.horizontalOffset, {
+        tension: 400,
+        friction: 18,
+        mass: 0.5,
+        precision: 0.1
+      });
+      horizontalSpringRef.current.setTarget(0);
+      PhysicsEngine.register(horizontalIdRef.current, (dt) => {
+        if (!horizontalSpringRef.current) return;
+        const result = horizontalSpringRef.current.step(dt);
+        s2.horizontalOffset = result.value;
+        rerender();
+        if (result.isSettled) {
+          s2.horizontalOffset = 0;
+          PhysicsEngine.unregister(horizontalIdRef.current);
+        }
+      });
+    }
+    rerender();
+  }, [animateScaleTo, animateStretchRelax, rerender]);
+  const handleTrackClick = useCallback(
+    (e) => {
+      const s2 = state.current;
+      if (!trackRef.current || s2.isDragging) return;
+      const rect = trackRef.current.getBoundingClientRect();
+      const y = e.clientY - rect.top;
+      const percent = 100 - Math.max(0, Math.min(100, y / rect.height * 100));
+      onChange(percentToValue(percent));
+      animateToPercent(percent);
+    },
+    [percentToValue, onChange, animateToPercent]
+  );
+  useEffect(() => {
+    return () => {
+      PhysicsEngine.unregister(physicsIdRef.current);
+      PhysicsEngine.unregister(scaleIdRef.current);
+      PhysicsEngine.unregister(decayIdRef.current);
+      PhysicsEngine.unregister(relaxIdRef.current);
+      PhysicsEngine.unregister(horizontalIdRef.current);
+    };
+  }, []);
+  const s = state.current;
+  const displayValue = Math.round(value);
+  return /* @__PURE__ */ jsxs("div", { className: `tekiyo-vertical-slider ${className}`, style: { height }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "tekiyo-vertical-track",
+        ref: trackRef,
+        onClick: handleTrackClick,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        style: { height },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "tekiyo-vertical-track-bg" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "tekiyo-vertical-track-fill",
+              style: {
+                height: `${s.displayPercent}%`,
+                background: color
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `tekiyo-slider-thumb tekiyo-vertical-thumb ${s.isDragging ? "active" : ""}`,
+              style: {
+                bottom: `${s.displayPercent}%`,
+                transform: `translate(calc(-50% + ${s.horizontalOffset}px), 50%) scale(${s.thumbScale}) scaleX(${s.stretchX}) scaleY(${s.stretchY})`,
+                transformOrigin: `center ${s.stretchOriginPercent}%`,
+                boxShadow: `0 ${s.shadowY}px ${s.shadowBlur}px rgba(0, 0, 0, ${s.shadowOpacity})`
+              },
+              onPointerDown: handlePointerDown
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "tekiyo-vertical-slider-info", children: [
+      icon && /* @__PURE__ */ jsx("div", { className: "tekiyo-vertical-slider-icon", style: { color }, children: icon }),
+      /* @__PURE__ */ jsxs("span", { className: "tekiyo-vertical-slider-value", style: { color }, children: [
+        displayValue,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "tekiyo-vertical-slider-label", children: label })
+    ] })
+  ] });
+}
+const sliderPresets = [
+  {
+    name: "Buttery Smooth",
+    description: "iOS classic feel",
+    config: {
+      springTension: 0.8,
+      velocityStretch: 0.02,
+      liftScale: 1.5,
+      flickMomentum: 800,
+      maxVelocity: 3
+    }
+  },
+  {
+    name: "Snappy",
+    description: "Responsive & precise",
+    config: {
+      springTension: 1.4,
+      velocityStretch: 0.01,
+      liftScale: 1.05,
+      flickMomentum: 400,
+      maxVelocity: 5
+    }
+  },
+  {
+    name: "Playful",
+    description: "Fun & elastic",
+    config: {
+      springTension: 0.5,
+      velocityStretch: 0.08,
+      liftScale: 1.5,
+      flickMomentum: 1500,
+      maxVelocity: 6
+    }
+  }
+];
+const defaultSliderConfig = sliderPresets[0].config;
+function SegmentedControl({
+  options,
+  defaultIndex = 0,
+  value,
+  config,
+  showIndicator,
+  onChange,
+  className = ""
+}) {
+  const [, forceRender] = useState(0);
+  const rerender = useCallback(() => forceRender((n) => n + 1), []);
+  const initialIndex = value !== void 0 ? value : defaultIndex;
+  const state = useRef({
+    selected: initialIndex,
+    indicatorPos: initialIndex,
+    stretchX: 1,
+    stretchY: 1,
+    pressScale: 1,
+    verticalOffset: 0,
+    isDragging: false,
+    isPressed: false,
+    stretchOriginPercent: 50,
+    targetOriginPercent: 50,
+    velocity: 0,
+    shadowY: 4,
+    shadowBlur: 12,
+    shadowOpacity: 0.15
+  });
+  const containerRef = useRef(null);
+  const springRef = useRef(null);
+  const pressSpringRef = useRef(null);
+  const verticalSpringRef = useRef(null);
+  const stretchOriginSpringRef = useRef(null);
+  const physicsId = useRef(generatePhysicsId("seg"));
+  const pressId = useRef(generatePhysicsId("press"));
+  const verticalId = useRef(generatePhysicsId("vert"));
+  const stretchOriginId = useRef(generatePhysicsId("segOrigin"));
+  const pointerStart = useRef(null);
+  const lastPos = useRef(initialIndex);
+  const hasDragged = useRef(false);
+  const velocitySamples = useRef([]);
+  useEffect(() => {
+    if (value !== void 0 && value !== state.current.selected && !state.current.isDragging) {
+      animateTo(value);
+    }
+  }, [value]);
+  const getIndexFromX = useCallback((clientX) => {
+    if (!containerRef.current) return state.current.selected;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(rect.width, clientX - rect.left));
+    return Math.min(options.length - 1, Math.floor(x / rect.width * options.length));
+  }, [options.length]);
+  const getPosFromX = useCallback((clientX, allowOverdrag = false) => {
+    if (!containerRef.current) return state.current.indicatorPos;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const rel = allowOverdrag ? x / rect.width : Math.max(0, Math.min(1, x / rect.width));
+    return rel * (options.length - 1);
+  }, [options.length]);
+  const animateTo = useCallback((target, initialVelocity = 0) => {
+    const s2 = state.current;
+    s2.targetOriginPercent = target > s2.indicatorPos ? 0 : 100;
+    s2.selected = target;
+    PhysicsEngine.unregister(physicsId.current);
+    PhysicsEngine.unregister(stretchOriginId.current);
+    if (s2.pressScale !== 1) {
+      PhysicsEngine.unregister(pressId.current);
+      const releaseSpring = new Spring1D(s2.pressScale, {
+        tension: 200,
+        friction: 18,
+        mass: 0.8,
+        precision: 0.01
+      });
+      releaseSpring.setTarget(1);
+      PhysicsEngine.register(pressId.current, (dt2) => {
+        const pr = releaseSpring.step(dt2);
+        s2.pressScale = pr.value;
+        rerender();
+        if (pr.isSettled) {
+          s2.pressScale = 1;
+          PhysicsEngine.unregister(pressId.current);
+        }
+      });
+    }
+    springRef.current = new Spring1D(s2.indicatorPos, {
+      tension: config.springTension * 280,
+      friction: 18,
+      mass: 0.8,
+      precision: 1e-3
+    });
+    springRef.current.setTarget(target);
+    if (initialVelocity) springRef.current.setVelocity(initialVelocity);
+    PhysicsEngine.register(physicsId.current, (dt) => {
+      if (!springRef.current) return;
+      const r = springRef.current.step(dt);
+      const vel = Math.abs(r.velocity || 0);
+      const stretch = Math.min(vel * config.velocityStretch * 6, 0.25);
+      s2.indicatorPos = r.value;
+      s2.velocity = vel;
+      s2.stretchX = 1 + stretch;
+      s2.stretchY = 1 - stretch * 0.5;
+      s2.stretchOriginPercent += (s2.targetOriginPercent - s2.stretchOriginPercent) * 0.12;
+      s2.shadowY = 4 + vel * 2;
+      s2.shadowBlur = 12 + vel * 4;
+      s2.shadowOpacity = 0.15 + vel * 0.05;
+      rerender();
+      if (r.isSettled) {
+        s2.stretchX = 1;
+        s2.stretchY = 1;
+        s2.velocity = 0;
+        s2.shadowY = 4;
+        s2.shadowBlur = 12;
+        s2.shadowOpacity = 0.15;
+        PhysicsEngine.unregister(physicsId.current);
+        stretchOriginSpringRef.current = new Spring1D(s2.stretchOriginPercent, {
+          tension: 300,
+          friction: 18,
+          mass: 0.5,
+          precision: 0.1
+        });
+        stretchOriginSpringRef.current.setTarget(50);
+        PhysicsEngine.register(stretchOriginId.current, (dt2) => {
+          if (!stretchOriginSpringRef.current) return;
+          const or = stretchOriginSpringRef.current.step(dt2);
+          s2.stretchOriginPercent = or.value;
+          s2.targetOriginPercent = 50;
+          rerender();
+          if (or.isSettled) {
+            s2.stretchOriginPercent = 50;
+            s2.targetOriginPercent = 50;
+            PhysicsEngine.unregister(stretchOriginId.current);
+          }
+        });
+        rerender();
+      }
+    });
+    onChange == null ? void 0 : onChange(target);
+  }, [config.springTension, config.velocityStretch, onChange, rerender]);
+  const animatePress = useCallback((pressed) => {
+    const s2 = state.current;
+    PhysicsEngine.unregister(pressId.current);
+    pressSpringRef.current = new Spring1D(s2.pressScale, {
+      tension: 400,
+      friction: 22,
+      mass: 0.6,
+      precision: 0.01
+    });
+    pressSpringRef.current.setTarget(pressed ? 1.4 : 1);
+    PhysicsEngine.register(pressId.current, (dt) => {
+      if (!pressSpringRef.current) return;
+      const r = pressSpringRef.current.step(dt);
+      s2.pressScale = r.value;
+      rerender();
+      if (r.isSettled) PhysicsEngine.unregister(pressId.current);
+    });
+  }, [rerender]);
+  const animateVerticalBack = useCallback(() => {
+    const s2 = state.current;
+    if (Math.abs(s2.verticalOffset) < 0.5) {
+      s2.verticalOffset = 0;
+      return;
+    }
+    PhysicsEngine.unregister(verticalId.current);
+    verticalSpringRef.current = new Spring1D(s2.verticalOffset, {
+      tension: 400,
+      friction: 20,
+      mass: 0.5,
+      precision: 0.1
+    });
+    verticalSpringRef.current.setTarget(0);
+    PhysicsEngine.register(verticalId.current, (dt) => {
+      if (!verticalSpringRef.current) return;
+      const r = verticalSpringRef.current.step(dt);
+      s2.verticalOffset = r.value;
+      rerender();
+      if (r.isSettled) {
+        s2.verticalOffset = 0;
+        PhysicsEngine.unregister(verticalId.current);
+      }
+    });
+  }, [rerender]);
+  const animateOriginBack = useCallback(() => {
+    const s2 = state.current;
+    if (Math.abs(s2.stretchOriginPercent - 50) < 1) {
+      s2.stretchOriginPercent = 50;
+      s2.targetOriginPercent = 50;
+      return;
+    }
+    PhysicsEngine.unregister(stretchOriginId.current);
+    stretchOriginSpringRef.current = new Spring1D(s2.stretchOriginPercent, {
+      tension: 300,
+      friction: 18,
+      mass: 0.5,
+      precision: 0.1
+    });
+    stretchOriginSpringRef.current.setTarget(50);
+    PhysicsEngine.register(stretchOriginId.current, (dt) => {
+      if (!stretchOriginSpringRef.current) return;
+      const r = stretchOriginSpringRef.current.step(dt);
+      s2.stretchOriginPercent = r.value;
+      s2.targetOriginPercent = 50;
+      rerender();
+      if (r.isSettled) {
+        s2.stretchOriginPercent = 50;
+        s2.targetOriginPercent = 50;
+        PhysicsEngine.unregister(stretchOriginId.current);
+      }
+    });
+  }, [rerender]);
+  const onPointerDown = useCallback((e) => {
+    const s2 = state.current;
+    pointerStart.current = { x: e.clientX, y: e.clientY };
+    hasDragged.current = false;
+    velocitySamples.current = [];
+    e.currentTarget.setPointerCapture(e.pointerId);
+    PhysicsEngine.unregister(stretchOriginId.current);
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const segW = rect.width / options.length;
+      const indLeft = rect.left + s2.indicatorPos * segW;
+      const grabX = e.clientX - indLeft;
+      const pct = Math.max(0, Math.min(100, grabX / segW * 100));
+      s2.targetOriginPercent = pct;
+      s2.stretchOriginPercent = pct;
+    }
+    s2.isPressed = true;
+    animatePress(true);
+    lastPos.current = getPosFromX(e.clientX);
+    rerender();
+  }, [options.length, getPosFromX, animatePress, rerender]);
+  const onPointerMove = useCallback((e) => {
+    if (!pointerStart.current) return;
+    const s2 = state.current;
+    const dx = e.clientX - pointerStart.current.x;
+    const dy = e.clientY - pointerStart.current.y;
+    if (!hasDragged.current && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) {
+      hasDragged.current = true;
+      s2.isDragging = true;
+      PhysicsEngine.unregister(physicsId.current);
+    }
+    if (!hasDragged.current) return;
+    let pos = getPosFromX(e.clientX, true);
+    const minPos = 0;
+    const maxPos = options.length - 1;
+    let edgeStretch = 0;
+    if (pos < minPos) {
+      const over = minPos - pos;
+      edgeStretch = -over;
+      pos = minPos - over * 0.15;
+      s2.targetOriginPercent = 100;
+    } else if (pos > maxPos) {
+      const over = pos - maxPos;
+      edgeStretch = over;
+      pos = maxPos + over * 0.15;
+      s2.targetOriginPercent = 0;
+    }
+    const vel = pos - lastPos.current;
+    if (Math.abs(vel) > 0.01 && edgeStretch === 0) {
+      s2.targetOriginPercent = vel > 0 ? 100 : 0;
+    }
+    s2.stretchOriginPercent += (s2.targetOriginPercent - s2.stretchOriginPercent) * 0.15;
+    velocitySamples.current.push(vel);
+    if (velocitySamples.current.length > 5) velocitySamples.current.shift();
+    lastPos.current = pos;
+    const vOff = Math.max(-12, Math.min(12, dy * 0.12));
+    s2.verticalOffset = vOff;
+    const vFactor = Math.min(Math.abs(vel) * config.velocityStretch * 80, 0.6);
+    const edgeFactor = Math.min(Math.abs(edgeStretch) * 0.2, 0.2);
+    s2.stretchX = 1 + vFactor + edgeFactor;
+    s2.stretchY = 1 - vFactor * 0.5 - edgeFactor * 0.4;
+    s2.indicatorPos = pos;
+    const idx = getIndexFromX(e.clientX);
+    if (idx !== s2.selected) s2.selected = idx;
+    rerender();
+  }, [getPosFromX, getIndexFromX, options.length, config.velocityStretch, rerender]);
+  const onPointerUp = useCallback((e) => {
+    const s2 = state.current;
+    pointerStart.current = null;
+    s2.isPressed = false;
+    if (!hasDragged.current) {
+      const idx = getIndexFromX(e.clientX);
+      if (idx !== s2.selected) {
+        const dir = idx > s2.indicatorPos ? 1 : -1;
+        animateTo(idx, dir * 3);
+      } else {
+        animatePress(false);
+        animateOriginBack();
+      }
+      rerender();
+      return;
+    }
+    s2.isDragging = false;
+    hasDragged.current = false;
+    animatePress(false);
+    const avgVel = velocitySamples.current.length > 0 ? velocitySamples.current.reduce((a, b) => a + b, 0) / velocitySamples.current.length : 0;
+    velocitySamples.current = [];
+    animateVerticalBack();
+    animateTo(s2.selected, avgVel * 0.5);
+  }, [getIndexFromX, animateTo, animatePress, animateVerticalBack, animateOriginBack, rerender]);
+  const onPointerLeave = useCallback(() => {
+    if (pointerStart.current) {
+      const s2 = state.current;
+      pointerStart.current = null;
+      s2.isPressed = false;
+      s2.isDragging = false;
+      hasDragged.current = false;
+      velocitySamples.current = [];
+      animatePress(false);
+      animateVerticalBack();
+      animateTo(s2.selected);
+    }
+  }, [animatePress, animateVerticalBack, animateTo]);
+  useEffect(() => {
+    return () => {
+      PhysicsEngine.unregister(physicsId.current);
+      PhysicsEngine.unregister(pressId.current);
+      PhysicsEngine.unregister(verticalId.current);
+      PhysicsEngine.unregister(stretchOriginId.current);
+    };
+  }, []);
+  const s = state.current;
+  const dragClass = s.isPressed || s.isDragging ? "dragging" : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `tekiyo-segmented-control ${s.isDragging ? "dragging" : ""} ${className}`,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp,
+      onPointerLeave,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `tekiyo-segmented-indicator ${s.isPressed ? "active" : ""} ${dragClass}`,
+            style: {
+              width: `calc((100% - 6px) / ${options.length})`,
+              left: `calc(${s.indicatorPos} * (100% - 6px) / ${options.length} + 3px)`,
+              transform: `translateY(${s.verticalOffset}px) scaleX(${s.stretchX * s.pressScale}) scaleY(${s.stretchY * s.pressScale})`,
+              transformOrigin: `${s.stretchOriginPercent}% center`
+            }
+          }
+        ),
+        options.map((option, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `tekiyo-segmented-option ${s.selected === index ? "active" : ""} ${dragClass}`,
+            children: [
+              option,
+              showIndicator && s.selected === index && /* @__PURE__ */ jsx("span", { className: `tekiyo-option-dot ${dragClass}` })
+            ]
+          },
+          option
+        ))
+      ]
+    }
+  );
+}
+const segmentedControlPresets = [
+  {
+    name: "Buttery Smooth",
+    description: "iOS classic feel",
+    config: {
+      springTension: 0.8,
+      velocityStretch: 0.02,
+      liftScale: 1.5,
+      flickMomentum: 800,
+      maxVelocity: 3
+    }
+  },
+  {
+    name: "Snappy",
+    description: "Responsive & precise",
+    config: {
+      springTension: 1.4,
+      velocityStretch: 0.01,
+      liftScale: 1.05,
+      flickMomentum: 400,
+      maxVelocity: 5
+    }
+  },
+  {
+    name: "Playful",
+    description: "Fun & elastic",
+    config: {
+      springTension: 0.5,
+      velocityStretch: 0.08,
+      liftScale: 1.5,
+      flickMomentum: 1500,
+      maxVelocity: 6
+    }
+  }
+];
+const defaultSegmentedControlConfig = segmentedControlPresets[0].config;
+const DEFAULT_LIQUID_GLASS_CONFIG = {
+  width: 200,
+  height: 60,
+  bezelWidth: 20,
+  glassThickness: 0.5,
+  refractiveIndex: 1.5,
+  profile: "squircle",
+  scale: 70
+};
+const mapCache = /* @__PURE__ */ new Map();
+function getCacheKey(config) {
+  return `${config.width}-${config.height}-${config.bezelWidth}-${config.glassThickness}-${config.refractiveIndex}-${config.profile}`;
+}
+function preloadMaps(width, height, bezelWidth = 20, glassThickness = 0.5, refractiveIndex = 1.5) {
+  const profiles = ["convex", "squircle", "concave", "lip"];
+  profiles.forEach((profile) => {
+    const config = {
+      width,
+      height,
+      bezelWidth,
+      glassThickness,
+      refractiveIndex,
+      profile
+    };
+    const key = getCacheKey(config);
+    if (!mapCache.has(key)) {
+      mapCache.set(key, {
+        displacement: generateDisplacementMapUncached(config),
+        specular: generateSpecularMapUncached(config)
+      });
+    }
+  });
+}
+function getCachedMaps(config) {
+  const key = getCacheKey(config);
+  if (mapCache.has(key)) {
+    return mapCache.get(key);
+  }
+  const maps = {
+    displacement: generateDisplacementMapUncached(config),
+    specular: generateSpecularMapUncached(config)
+  };
+  mapCache.set(key, maps);
+  return maps;
+}
+function clearMapCache() {
+  mapCache.clear();
+}
+function smootherstep(x) {
+  const t = Math.max(0, Math.min(1, x));
+  return t * t * t * (t * (t * 6 - 15) + 10);
+}
+function getProfileFunction(profile) {
+  switch (profile) {
+    case "convex":
+      return (x) => Math.sqrt(Math.max(0, 1 - Math.pow(1 - x, 2)));
+    case "squircle":
+      return (x) => Math.pow(Math.max(0, 1 - Math.pow(1 - x, 4)), 0.25);
+    case "concave":
+      return (x) => 1 - Math.sqrt(Math.max(0, 1 - Math.pow(1 - x, 2)));
+    case "lip":
+      return (x) => {
+        const convex = Math.sqrt(Math.max(0, 1 - Math.pow(1 - x, 2)));
+        const concave = 1 - convex;
+        const t = smootherstep(x);
+        return convex * (1 - t) + concave * t;
+      };
+    default:
+      return (x) => x;
+  }
+}
+function calculateNormal(f, x) {
+  const delta = 1e-3;
+  const x1 = Math.max(0, x - delta);
+  const x2 = Math.min(1, x + delta);
+  const y1 = f(x1);
+  const y2 = f(x2);
+  const derivative = (y2 - y1) / (x2 - x1);
+  const length = Math.sqrt(derivative * derivative + 1);
+  return {
+    nx: -derivative / length,
+    ny: 1 / length
+  };
+}
+function applySnellLaw(incidentAngle, n1, n2) {
+  const sinTheta1 = Math.sin(incidentAngle);
+  const sinTheta2 = n1 / n2 * sinTheta1;
+  if (Math.abs(sinTheta2) > 1) {
+    return incidentAngle;
+  }
+  return Math.asin(sinTheta2);
+}
+function calculateDisplacement(normalizedDist, angle, profile, glassThickness, refractiveIndex) {
+  if (normalizedDist >= 1) {
+    return { dx: 0, dy: 0 };
+  }
+  const height = profile(normalizedDist) * glassThickness;
+  const normal = calculateNormal(profile, normalizedDist);
+  const incidentAngle = Math.atan2(normal.nx, normal.ny);
+  const refractedAngle = applySnellLaw(incidentAngle, 1, refractiveIndex);
+  const angleDiff = refractedAngle - incidentAngle;
+  const magnitude = Math.sin(angleDiff) * height;
+  const dx = magnitude * Math.cos(angle);
+  const dy = magnitude * Math.sin(angle);
+  return { dx, dy };
+}
+function vectorToRGB(dx, dy) {
+  return {
+    r: Math.round(128 + dx * 127),
+    g: Math.round(128 + dy * 127),
+    b: 128
+    // Unused channel
+  };
+}
+function distanceToRoundedRectEdge(x, y, width, height, cornerRadius) {
+  const halfW = width / 2;
+  const halfH = height / 2;
+  const cx = x - halfW;
+  const cy = y - halfH;
+  const r = Math.min(cornerRadius, halfW, halfH);
+  const absX = Math.abs(cx);
+  const absY = Math.abs(cy);
+  const cornerX = halfW - r;
+  const cornerY = halfH - r;
+  if (absX > cornerX && absY > cornerY) {
+    const cornerCenterX = cornerX * Math.sign(cx);
+    const cornerCenterY = cornerY * Math.sign(cy);
+    const dx = cx - cornerCenterX;
+    const dy = cy - cornerCenterY;
+    const distFromCorner = Math.sqrt(dx * dx + dy * dy);
+    const distToEdge = r - distFromCorner;
+    const angle = Math.atan2(dy, dx);
+    return { distance: Math.max(0, distToEdge), angle };
+  }
+  if (absX > absY * (halfW / halfH)) {
+    const distToEdge = halfW - absX;
+    const angle = cx > 0 ? 0 : Math.PI;
+    return { distance: Math.max(0, distToEdge), angle };
+  } else {
+    const distToEdge = halfH - absY;
+    const angle = cy > 0 ? Math.PI / 2 : -Math.PI / 2;
+    return { distance: Math.max(0, distToEdge), angle };
+  }
+}
+function generateDisplacementMapUncached(config) {
+  const { width, height, bezelWidth, glassThickness, refractiveIndex, profile } = config;
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    console.error("Failed to get canvas context");
+    return "";
+  }
+  const profileFn = getProfileFunction(profile);
+  const imageData = ctx.createImageData(width, height);
+  const data = imageData.data;
+  const cornerRadius = Math.min(width, height) / 2;
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const { distance, angle } = distanceToRoundedRectEdge(
+        x,
+        y,
+        width,
+        height,
+        cornerRadius
+      );
+      const normalizedDist = Math.min(1, distance / bezelWidth);
+      const { dx, dy } = calculateDisplacement(
+        normalizedDist,
+        angle,
+        profileFn,
+        glassThickness,
+        refractiveIndex
+      );
+      const { r, g, b } = vectorToRGB(dx, dy);
+      const idx = (y * width + x) * 4;
+      data[idx] = r;
+      data[idx + 1] = g;
+      data[idx + 2] = b;
+      data[idx + 3] = 255;
+    }
+  }
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL("image/png");
+}
+function generateSpecularMapUncached(config) {
+  const { width, height, bezelWidth, glassThickness, profile } = config;
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    console.error("Failed to get canvas context");
+    return "";
+  }
+  const profileFn = getProfileFunction(profile);
+  const imageData = ctx.createImageData(width, height);
+  const data = imageData.data;
+  const cornerRadius = Math.min(width, height) / 2;
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const { distance } = distanceToRoundedRectEdge(
+        x,
+        y,
+        width,
+        height,
+        cornerRadius
+      );
+      const normalizedDist = Math.min(1, distance / bezelWidth);
+      let specularIntensity = 0;
+      if (normalizedDist < 1) {
+        const delta = 0.02;
+        const h1 = profileFn(Math.max(0, normalizedDist - delta));
+        const h2 = profileFn(Math.min(1, normalizedDist + delta));
+        const gradient = Math.abs((h2 - h1) / (2 * delta));
+        specularIntensity = Math.pow(gradient, 0.7) * glassThickness * 0.6;
+        const rimStart = 0.25;
+        if (normalizedDist < rimStart) {
+          const rimT = 1 - normalizedDist / rimStart;
+          const smoothRim = rimT * rimT * (3 - 2 * rimT);
+          specularIntensity += smoothRim * 0.3;
+        }
+        specularIntensity = Math.min(1, specularIntensity);
+      }
+      const value = Math.round(specularIntensity * 255);
+      const idx = (y * width + x) * 4;
+      data[idx] = value;
+      data[idx + 1] = value;
+      data[idx + 2] = value;
+      data[idx + 3] = 255;
+    }
+  }
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL("image/png");
+}
+function generateDisplacementMap(config) {
+  return getCachedMaps(config).displacement;
+}
+function generateSpecularMap(config) {
+  return getCachedMaps(config).specular;
+}
+function supportsBackdropSvgFilter() {
+  if (typeof window === "undefined" || typeof navigator === "undefined") {
+    return false;
+  }
+  const ua = navigator.userAgent;
+  const isSafari = /Safari\//.test(ua) && !/Chrome\//.test(ua);
+  const isFirefox = /Firefox\//.test(ua);
+  const isChrome = /Chrome\//.test(ua) && !isSafari && !isFirefox;
+  return isChrome;
+}
+const LiquidGlassFilter = ({
+  filterId,
+  displacementMapUrl,
+  specularMapUrl,
+  width,
+  height,
+  scale,
+  saturation = 1.2,
+  blurAmount = 1,
+  specularIntensity = 0.25
+}) => {
+  const filterSvg = useMemo(
+    () => /* @__PURE__ */ jsx(
+      "svg",
+      {
+        style: {
+          position: "absolute",
+          width: 0,
+          height: 0,
+          overflow: "hidden",
+          pointerEvents: "none"
+        },
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "filter",
+          {
+            id: filterId,
+            x: "-50%",
+            y: "-50%",
+            width: "200%",
+            height: "200%",
+            colorInterpolationFilters: "sRGB",
+            children: [
+              /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: blurAmount, result: "blurred" }),
+              /* @__PURE__ */ jsx(
+                "feImage",
+                {
+                  href: displacementMapUrl,
+                  x: "0",
+                  y: "0",
+                  width,
+                  height,
+                  result: "displacement_map",
+                  preserveAspectRatio: "none"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "feDisplacementMap",
+                {
+                  in: "blurred",
+                  in2: "displacement_map",
+                  scale,
+                  xChannelSelector: "R",
+                  yChannelSelector: "G",
+                  result: "displaced"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "feColorMatrix",
+                {
+                  in: "displaced",
+                  type: "saturate",
+                  values: String(saturation),
+                  result: "saturated"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "feImage",
+                {
+                  href: specularMapUrl,
+                  x: "0",
+                  y: "0",
+                  width,
+                  height,
+                  result: "specular_map_raw",
+                  preserveAspectRatio: "none"
+                }
+              ),
+              /* @__PURE__ */ jsx("feGaussianBlur", { in: "specular_map_raw", stdDeviation: "3", result: "specular_map" }),
+              /* @__PURE__ */ jsx("feFlood", { floodColor: "white", floodOpacity: specularIntensity * 0.5, result: "white" }),
+              /* @__PURE__ */ jsx("feComposite", { in: "white", in2: "specular_map", operator: "in", result: "highlight" }),
+              /* @__PURE__ */ jsx("feBlend", { in: "highlight", in2: "saturated", mode: "screen", result: "final" })
+            ]
+          }
+        ) })
+      }
+    ),
+    [filterId, displacementMapUrl, specularMapUrl, width, height, scale, saturation, blurAmount, specularIntensity]
+  );
+  return filterSvg;
+};
+function generateFilterId(prefix = "liquid-glass") {
+  return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function useLiquidGlass(options) {
+  const {
+    width,
+    height,
+    profile = DEFAULT_LIQUID_GLASS_CONFIG.profile,
+    bezelWidth = DEFAULT_LIQUID_GLASS_CONFIG.bezelWidth,
+    glassThickness = DEFAULT_LIQUID_GLASS_CONFIG.glassThickness,
+    refractiveIndex = DEFAULT_LIQUID_GLASS_CONFIG.refractiveIndex,
+    animated = true,
+    saturation = 1.3,
+    blurAmount = 1,
+    specularIntensity = 0.3
+  } = options;
+  const [scale, setScaleState] = useState(DEFAULT_LIQUID_GLASS_CONFIG.scale);
+  const [displacementMapUrl, setDisplacementMapUrl] = useState("");
+  const [specularMapUrl, setSpecularMapUrl] = useState("");
+  const scaleSpringRef = useRef(null);
+  const physicsIdRef = useRef(generatePhysicsId("liquid-glass"));
+  const filterIdRef = useRef(generateFilterId());
+  const isSupported = useMemo(() => supportsBackdropSvgFilter(), []);
+  useEffect(() => {
+    const config = {
+      width,
+      height,
+      bezelWidth,
+      glassThickness,
+      refractiveIndex,
+      profile
+    };
+    const dispMapUrl = generateDisplacementMap(config);
+    const specMapUrl = generateSpecularMap(config);
+    setDisplacementMapUrl(dispMapUrl);
+    setSpecularMapUrl(specMapUrl);
+  }, [width, height, bezelWidth, glassThickness, refractiveIndex, profile]);
+  useEffect(() => {
+    scaleSpringRef.current = new Spring1D(scale, {
+      tension: 200,
+      friction: 20,
+      mass: 1,
+      precision: 0.5
+    });
+    return () => {
+      PhysicsEngine.unregister(physicsIdRef.current);
+    };
+  }, []);
+  const setScale = useCallback(
+    (targetScale) => {
+      if (!animated) {
+        setScaleState(targetScale);
+        return;
+      }
+      if (!scaleSpringRef.current) {
+        scaleSpringRef.current = new Spring1D(scale, {
+          tension: 200,
+          friction: 20,
+          mass: 1,
+          precision: 0.5
+        });
+      }
+      scaleSpringRef.current.setTarget(targetScale);
+      if (!PhysicsEngine.has(physicsIdRef.current)) {
+        PhysicsEngine.register(physicsIdRef.current, (dt) => {
+          if (!scaleSpringRef.current) return;
+          const result = scaleSpringRef.current.step(dt);
+          setScaleState(result.value);
+          if (result.isSettled) {
+            PhysicsEngine.unregister(physicsIdRef.current);
+          }
+        });
+      }
+    },
+    [animated, scale]
+  );
+  const filterComponent = useMemo(() => {
+    if (!displacementMapUrl || !specularMapUrl || !isSupported) {
+      return null;
+    }
+    return React.createElement(LiquidGlassFilter, {
+      filterId: filterIdRef.current,
+      displacementMapUrl,
+      specularMapUrl,
+      width,
+      height,
+      scale,
+      saturation,
+      blurAmount,
+      specularIntensity
+    });
+  }, [displacementMapUrl, specularMapUrl, width, height, scale, isSupported, saturation, blurAmount, specularIntensity]);
+  const style = useMemo(() => {
+    if (!isSupported) {
+      return {
+        backdropFilter: "blur(12px) saturate(1.2)",
+        WebkitBackdropFilter: "blur(12px) saturate(1.2)"
+      };
+    }
+    return {
+      backdropFilter: `url(#${filterIdRef.current})`,
+      WebkitBackdropFilter: `url(#${filterIdRef.current})`
+    };
+  }, [isSupported]);
+  return {
+    filterComponent,
+    style,
+    setScale,
+    scale,
+    isSupported
+  };
+}
 export {
   Card,
   DEFAULT_FRICTION_CONFIG,
+  DEFAULT_LIQUID_GLASS_CONFIG,
   DEFAULT_SPRING_CONFIG,
   Draggable,
+  LiquidGlassFilter,
   Momentum,
   Momentum1D,
   PhysicsEngine,
   PhysicsProvider,
+  PhysicsRangeSlider,
+  PhysicsSlider,
+  PhysicsStepSlider,
+  PhysicsVerticalSlider,
+  SegmentedControl,
   Spring,
   Spring1D,
   Vector2,
   VelocityTracker,
   VelocityTracker1D,
   cardBaseStyles,
+  clearMapCache,
   combineLiftStyle,
   combineStretchStyle,
+  defaultSegmentedControlConfig,
+  defaultSliderConfig,
+  generateDisplacementMap,
+  generateFilterId,
   generatePhysicsId,
+  generateSpecularMap,
   gentle,
+  getCachedMaps,
   getFrictionConfig,
   getPreset,
+  getProfileFunction,
   getSpringConfig,
   ios,
+  preloadMaps,
   presets,
+  segmentedControlPresets,
+  sliderPresets,
   smooth,
+  smootherstep,
   snappy,
   stiff,
+  supportsBackdropSvgFilter,
   useDrag,
   useFlick,
   useFrictionConfig,
   useGesture,
   useLift,
   useLiftConfig,
+  useLiquidGlass,
   usePhysicsConfig,
   usePhysicsContext,
   useSpring,