tekiyo-physics 1.0.0 → 1.1.0

package/dist/index.cjs

@@ -3,7 +3,7 @@ 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);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
+const React = require("react");
 const jsxRuntime = require("react/jsx-runtime");
 class Vector2 {
   constructor(x = 0, y = 0) {
@@ -696,7 +696,7 @@ const defaultContext = {
     shadowIntensity: 1
   }
 };
-const PhysicsContext = react.createContext(defaultContext);
+const PhysicsContext = React.createContext(defaultContext);
 function PhysicsProvider({
   children,
   preset = "ios",
@@ -705,7 +705,7 @@ function PhysicsProvider({
   stretch,
   lift
 }) {
-  const value = react.useMemo(() => {
+  const value = React.useMemo(() => {
     const basePreset = typeof preset === "string" ? presets[preset] ?? ios : preset;
     return {
       spring: { ...basePreset.spring, ...spring },
@@ -717,45 +717,45 @@ function PhysicsProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(PhysicsContext.Provider, { value, children });
 }
 function usePhysicsContext() {
-  return react.useContext(PhysicsContext);
+  return React.useContext(PhysicsContext);
 }
 function usePhysicsConfig() {
-  const context = react.useContext(PhysicsContext);
+  const context = React.useContext(PhysicsContext);
   return context.spring;
 }
 function useFrictionConfig() {
-  const context = react.useContext(PhysicsContext);
+  const context = React.useContext(PhysicsContext);
   return context.friction;
 }
 function useStretchConfig() {
-  const context = react.useContext(PhysicsContext);
+  const context = React.useContext(PhysicsContext);
   return context.stretch;
 }
 function useLiftConfig() {
-  const context = react.useContext(PhysicsContext);
+  const context = React.useContext(PhysicsContext);
   return context.lift;
 }
 function useSpring(options) {
   const { to, from, config, onRest, immediate = true } = options;
   const globalConfig = usePhysicsConfig();
-  const resolvedConfig = react.useMemo(() => {
+  const resolvedConfig = React.useMemo(() => {
     if (!config) return { ...DEFAULT_SPRING_CONFIG, ...globalConfig };
     if (typeof config === "string") {
       return { ...DEFAULT_SPRING_CONFIG, ...globalConfig };
     }
     return { ...DEFAULT_SPRING_CONFIG, ...globalConfig, ...config };
   }, [config, globalConfig]);
-  const springRef = react.useRef(null);
-  const idRef = react.useRef(generatePhysicsId("spring"));
-  const onRestRef = react.useRef(onRest);
+  const springRef = React.useRef(null);
+  const idRef = React.useRef(generatePhysicsId("spring"));
+  const onRestRef = React.useRef(onRest);
   onRestRef.current = onRest;
-  const [state, setState] = react.useState({
+  const [state, setState] = React.useState({
     x: (from == null ? void 0 : from.x) ?? to.x,
     y: (from == null ? void 0 : from.y) ?? to.y,
     isAnimating: false,
     isSettled: true
   });
-  react.useEffect(() => {
+  React.useEffect(() => {
     const initialPos = from ? Vector2.from(from.x, from.y) : Vector2.from(to.x, to.y);
     springRef.current = new Spring(initialPos, resolvedConfig);
     if (immediate) {
@@ -765,7 +765,7 @@ function useSpring(options) {
       PhysicsEngine.unregister(idRef.current);
     };
   }, []);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (springRef.current && immediate) {
       springRef.current.setTarget(Vector2.from(to.x, to.y));
       if (!PhysicsEngine.has(idRef.current)) {
@@ -787,11 +787,11 @@ function useSpring(options) {
       }
     }
   }, [to.x, to.y, immediate]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     var _a;
     (_a = springRef.current) == null ? void 0 : _a.updateConfig(resolvedConfig);
   }, [resolvedConfig]);
-  const setTarget = react.useCallback((target) => {
+  const setTarget = React.useCallback((target) => {
     if (!springRef.current) return;
     springRef.current.setTarget(Vector2.from(target.x, target.y));
     if (!PhysicsEngine.has(idRef.current)) {
@@ -812,7 +812,7 @@ function useSpring(options) {
       });
     }
   }, []);
-  const snapTo = react.useCallback((position) => {
+  const snapTo = React.useCallback((position) => {
     if (!springRef.current) return;
     springRef.current.setPosition(Vector2.from(position.x, position.y));
     springRef.current.setTarget(Vector2.from(position.x, position.y));
@@ -825,7 +825,7 @@ function useSpring(options) {
     });
     PhysicsEngine.unregister(idRef.current);
   }, []);
-  const impulse = react.useCallback((velocity) => {
+  const impulse = React.useCallback((velocity) => {
     if (!springRef.current) return;
     const currentState = springRef.current.getState();
     springRef.current.setVelocity(
@@ -849,7 +849,7 @@ function useSpring(options) {
       });
     }
   }, []);
-  const style = react.useMemo(
+  const style = React.useMemo(
     () => ({
       transform: `translate3d(${state.x}px, ${state.y}px, 0)`,
       willChange: state.isAnimating ? "transform" : "auto"
@@ -870,20 +870,20 @@ function useSpring(options) {
 function useSpring1D(options) {
   const { to, from, config, onRest, immediate = true } = options;
   const globalConfig = usePhysicsConfig();
-  const resolvedConfig = react.useMemo(
+  const resolvedConfig = React.useMemo(
     () => ({ ...DEFAULT_SPRING_CONFIG, ...globalConfig, ...config }),
     [config, globalConfig]
   );
-  const springRef = react.useRef(null);
-  const idRef = react.useRef(generatePhysicsId("spring1d"));
-  const onRestRef = react.useRef(onRest);
+  const springRef = React.useRef(null);
+  const idRef = React.useRef(generatePhysicsId("spring1d"));
+  const onRestRef = React.useRef(onRest);
   onRestRef.current = onRest;
-  const [state, setState] = react.useState({
+  const [state, setState] = React.useState({
     value: from ?? to,
     isAnimating: false,
     isSettled: true
   });
-  react.useEffect(() => {
+  React.useEffect(() => {
     springRef.current = new Spring1D(from ?? to, resolvedConfig);
     if (immediate) {
       springRef.current.setTarget(to);
@@ -892,7 +892,7 @@ function useSpring1D(options) {
       PhysicsEngine.unregister(idRef.current);
     };
   }, []);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (springRef.current && immediate) {
       springRef.current.setTarget(to);
       if (!PhysicsEngine.has(idRef.current)) {
@@ -913,7 +913,7 @@ function useSpring1D(options) {
       }
     }
   }, [to, immediate]);
-  const setTarget = react.useCallback((target) => {
+  const setTarget = React.useCallback((target) => {
     if (!springRef.current) return;
     springRef.current.setTarget(target);
     if (!PhysicsEngine.has(idRef.current)) {
@@ -952,16 +952,16 @@ function useGesture(options) {
     flickThreshold = 500,
     preventTouch = true
   } = options;
-  const velocityTracker = react.useRef(new VelocityTracker());
-  const startPosition = react.useRef(Vector2.zero());
-  const lastPosition = react.useRef(Vector2.zero());
-  const isDragging = react.useRef(false);
-  const hasExceededThreshold = react.useRef(false);
-  const pointerId = react.useRef(null);
-  const elementRef = react.useRef(null);
-  const handlersRef = react.useRef({ onDragStart, onDrag, onDragEnd, onFlick });
+  const velocityTracker = React.useRef(new VelocityTracker());
+  const startPosition = React.useRef(Vector2.zero());
+  const lastPosition = React.useRef(Vector2.zero());
+  const isDragging = React.useRef(false);
+  const hasExceededThreshold = React.useRef(false);
+  const pointerId = React.useRef(null);
+  const elementRef = React.useRef(null);
+  const handlersRef = React.useRef({ onDragStart, onDrag, onDragEnd, onFlick });
   handlersRef.current = { onDragStart, onDrag, onDragEnd, onFlick };
-  const createGestureState = react.useCallback(
+  const createGestureState = React.useCallback(
     (event, first, last) => {
       const position = Vector2.from(event.clientX, event.clientY);
       const delta = position.subtract(lastPosition.current);
@@ -982,7 +982,7 @@ function useGesture(options) {
     },
     []
   );
-  const handlePointerMove = react.useCallback(
+  const handlePointerMove = React.useCallback(
     (event) => {
       var _a, _b, _c, _d;
       if (!isDragging.current || pointerId.current !== event.pointerId) return;
@@ -1001,7 +1001,7 @@ function useGesture(options) {
     },
     [threshold, createGestureState]
   );
-  const handlePointerUp = react.useCallback(
+  const handlePointerUp = React.useCallback(
     (event) => {
       var _a, _b, _c, _d;
       if (!isDragging.current || pointerId.current !== event.pointerId) return;
@@ -1023,7 +1023,7 @@ function useGesture(options) {
     },
     [handlePointerMove, createGestureState, flickThreshold]
   );
-  const onPointerDown = react.useCallback(
+  const onPointerDown = React.useCallback(
     (e) => {
       if (isDragging.current) return;
       const element = e.currentTarget;
@@ -1043,19 +1043,19 @@ function useGesture(options) {
     },
     [handlePointerMove, handlePointerUp]
   );
-  const onPointerEnter = react.useCallback(() => {
+  const onPointerEnter = React.useCallback(() => {
     onHover == null ? void 0 : onHover(true);
   }, [onHover]);
-  const onPointerLeave = react.useCallback(() => {
+  const onPointerLeave = React.useCallback(() => {
     onHover == null ? void 0 : onHover(false);
   }, [onHover]);
-  const handleFocus = react.useCallback(() => {
+  const handleFocus = React.useCallback(() => {
     onFocus == null ? void 0 : onFocus(true);
   }, [onFocus]);
-  const handleBlur = react.useCallback(() => {
+  const handleBlur = React.useCallback(() => {
     onFocus == null ? void 0 : onFocus(false);
   }, [onFocus]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
@@ -1089,38 +1089,38 @@ function useDrag(options = {}) {
     onRest
   } = options;
   const globalConfig = usePhysicsConfig();
-  const resolvedSpringConfig = react.useMemo(
+  const resolvedSpringConfig = React.useMemo(
     () => ({ ...DEFAULT_SPRING_CONFIG, ...globalConfig, ...springConfig }),
     [globalConfig, springConfig]
   );
-  const resolvedFrictionConfig = react.useMemo(
+  const resolvedFrictionConfig = React.useMemo(
     () => ({ ...DEFAULT_FRICTION_CONFIG, ...frictionConfig }),
     [frictionConfig]
   );
-  const [state, setState] = react.useState({
+  const [state, setState] = React.useState({
     x: initial.x,
     y: initial.y,
     isDragging: false,
     isMomentum: false
   });
-  const positionRef = react.useRef(Vector2.from(initial.x, initial.y));
-  const startPositionRef = react.useRef(Vector2.zero());
-  const dragOffsetRef = react.useRef(Vector2.zero());
-  const velocityTracker = react.useRef(new VelocityTracker());
-  const springRef = react.useRef(null);
-  const momentumRef = react.useRef(null);
-  const idRef = react.useRef(generatePhysicsId("drag"));
-  const pointerIdRef = react.useRef(null);
-  const handlersRef = react.useRef({ onDragStart, onDrag, onDragEnd, onRest });
+  const positionRef = React.useRef(Vector2.from(initial.x, initial.y));
+  const startPositionRef = React.useRef(Vector2.zero());
+  const dragOffsetRef = React.useRef(Vector2.zero());
+  const velocityTracker = React.useRef(new VelocityTracker());
+  const springRef = React.useRef(null);
+  const momentumRef = React.useRef(null);
+  const idRef = React.useRef(generatePhysicsId("drag"));
+  const pointerIdRef = React.useRef(null);
+  const handlersRef = React.useRef({ onDragStart, onDrag, onDragEnd, onRest });
   handlersRef.current = { onDragStart, onDrag, onDragEnd, onRest };
-  const boundsVec = react.useMemo(() => {
+  const boundsVec = React.useMemo(() => {
     if (!bounds) return null;
     return {
       min: Vector2.from(bounds.left ?? -Infinity, bounds.top ?? -Infinity),
       max: Vector2.from(bounds.right ?? Infinity, bounds.bottom ?? Infinity)
     };
   }, [bounds]);
-  const applyRubberBand = react.useCallback(
+  const applyRubberBand = React.useCallback(
     (pos) => {
       if (!boundsVec || !rubberBand) return pos;
       let x = pos.x;
@@ -1143,14 +1143,14 @@ function useDrag(options = {}) {
     },
     [boundsVec, rubberBand, rubberBandFactor]
   );
-  const clampToBounds = react.useCallback(
+  const clampToBounds = React.useCallback(
     (pos) => {
       if (!boundsVec) return pos;
       return pos.clampComponents(boundsVec.min, boundsVec.max);
     },
     [boundsVec]
   );
-  const findSnapPoint = react.useCallback(
+  const findSnapPoint = React.useCallback(
     (pos, velocity) => {
       if (!snapTo || snapTo.length === 0) return null;
       const projectedPos = pos.add(velocity.multiply(0.1));
@@ -1168,7 +1168,7 @@ function useDrag(options = {}) {
     },
     [snapTo, snapThreshold]
   );
-  const animateToTarget = react.useCallback(
+  const animateToTarget = React.useCallback(
     (target) => {
       springRef.current = new Spring(positionRef.current, resolvedSpringConfig);
       springRef.current.setTarget(target);
@@ -1191,7 +1191,7 @@ function useDrag(options = {}) {
     },
     [resolvedSpringConfig]
   );
-  const handlePointerMove = react.useCallback(
+  const handlePointerMove = React.useCallback(
     (e) => {
       var _a, _b;
       if (pointerIdRef.current !== e.pointerId) return;
@@ -1214,7 +1214,7 @@ function useDrag(options = {}) {
     },
     [axis, applyRubberBand]
   );
-  const handlePointerUp = react.useCallback(
+  const handlePointerUp = React.useCallback(
     (e) => {
       var _a, _b, _c, _d;
       if (pointerIdRef.current !== e.pointerId) return;
@@ -1283,7 +1283,7 @@ function useDrag(options = {}) {
       resolvedFrictionConfig
     ]
   );
-  const onPointerDown = react.useCallback(
+  const onPointerDown = React.useCallback(
     (e) => {
       var _a, _b;
       if (pointerIdRef.current !== null) return;
@@ -1304,7 +1304,7 @@ function useDrag(options = {}) {
     },
     [handlePointerMove, handlePointerUp]
   );
-  const setPosition = react.useCallback((position) => {
+  const setPosition = React.useCallback((position) => {
     PhysicsEngine.unregister(idRef.current);
     positionRef.current = Vector2.from(position.x, position.y);
     setState((prev) => ({
@@ -1315,13 +1315,13 @@ function useDrag(options = {}) {
       isMomentum: false
     }));
   }, []);
-  const snapToPosition = react.useCallback(
+  const snapToPosition = React.useCallback(
     (position) => {
       animateToTarget(Vector2.from(position.x, position.y));
     },
     [animateToTarget]
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       PhysicsEngine.unregister(idRef.current);
       document.removeEventListener("pointermove", handlePointerMove);
@@ -1329,7 +1329,7 @@ function useDrag(options = {}) {
       document.removeEventListener("pointercancel", handlePointerUp);
     };
   }, [handlePointerMove, handlePointerUp]);
-  const style = react.useMemo(
+  const style = React.useMemo(
     () => ({
       transform: `translate3d(${state.x}px, ${state.y}px, 0)`,
       willChange: state.isDragging || state.isMomentum ? "transform" : "auto",
@@ -1358,7 +1358,7 @@ function useStretch(options) {
     intensity = 0.12,
     maxVelocity = 2e3
   } = options;
-  return react.useMemo(() => {
+  return React.useMemo(() => {
     const vel = velocity instanceof Vector2 ? velocity : Vector2.from(velocity.x, velocity.y);
     const normalizedX = Math.min(Math.abs(vel.x) / maxVelocity, 1);
     const normalizedY = Math.min(Math.abs(vel.y) / maxVelocity, 1);
@@ -1428,7 +1428,7 @@ function useLift(options = {}) {
     springConfig,
     onLift
   } = options;
-  const [isLifted, setIsLifted] = react.useState(false);
+  const [isLifted, setIsLifted] = React.useState(false);
   const { value: scale } = useSpring1D({
     to: isLifted ? targetScale : 1,
     config: {
@@ -1437,14 +1437,14 @@ function useLift(options = {}) {
       ...springConfig
     }
   });
-  const handleLift = react.useCallback(
+  const handleLift = React.useCallback(
     (lifted) => {
       setIsLifted(lifted);
       onLift == null ? void 0 : onLift(lifted);
     },
     [onLift]
   );
-  const bind = react.useMemo(() => {
+  const bind = React.useMemo(() => {
     switch (trigger) {
       case "hover":
         return {
@@ -1471,7 +1471,7 @@ function useLift(options = {}) {
         return {};
     }
   }, [trigger, handleLift]);
-  const shadowStyle = react.useMemo(() => {
+  const shadowStyle = React.useMemo(() => {
     if (!shadow) return {};
     const liftAmount = (scale - 1) / (targetScale - 1);
     const clampedLift = Math.max(0, Math.min(1, liftAmount));
@@ -1483,7 +1483,7 @@ function useLift(options = {}) {
       boxShadow: `0 ${yOffset}px ${blur}px ${spread}px rgba(0, 0, 0, ${opacity})`
     };
   }, [scale, targetScale, shadow, shadowIntensity]);
-  const style = react.useMemo(
+  const style = React.useMemo(
     () => ({
       transform: `scale3d(${scale}, ${scale}, 1)`,
       transformOrigin: "center center",
@@ -1519,23 +1519,23 @@ function useFlick(options = {}) {
     onFlick,
     onFlickEnd
   } = options;
-  const resolvedFriction = react.useMemo(
+  const resolvedFriction = React.useMemo(
     () => ({ ...DEFAULT_FRICTION_CONFIG, ...friction }),
     [friction]
   );
-  const [state, setState] = react.useState({
+  const [state, setState] = React.useState({
     x: initial.x,
     y: initial.y,
     isFlicking: false,
     velocity: Vector2.zero()
   });
-  const positionRef = react.useRef(Vector2.from(initial.x, initial.y));
-  const momentumRef = react.useRef(null);
-  const velocityTracker = react.useRef(new VelocityTracker());
-  const idRef = react.useRef(generatePhysicsId("flick"));
-  const handlersRef = react.useRef({ onFlickStart, onFlick, onFlickEnd });
+  const positionRef = React.useRef(Vector2.from(initial.x, initial.y));
+  const momentumRef = React.useRef(null);
+  const velocityTracker = React.useRef(new VelocityTracker());
+  const idRef = React.useRef(generatePhysicsId("flick"));
+  const handlersRef = React.useRef({ onFlickStart, onFlick, onFlickEnd });
   handlersRef.current = { onFlickStart, onFlick, onFlickEnd };
-  const startMomentum = react.useCallback(
+  const startMomentum = React.useCallback(
     (velocity) => {
       var _a, _b;
       let constrainedVelocity = velocity;
@@ -1578,7 +1578,7 @@ function useFlick(options = {}) {
     },
     [axis, resolvedFriction]
   );
-  const flick = react.useCallback(
+  const flick = React.useCallback(
     (velocity) => {
       PhysicsEngine.unregister(idRef.current);
       velocityTracker.current.reset();
@@ -1586,7 +1586,7 @@ function useFlick(options = {}) {
     },
     [startMomentum]
   );
-  const stop = react.useCallback(() => {
+  const stop = React.useCallback(() => {
     var _a;
     PhysicsEngine.unregister(idRef.current);
     (_a = momentumRef.current) == null ? void 0 : _a.stop();
@@ -1597,7 +1597,7 @@ function useFlick(options = {}) {
       velocity: Vector2.zero()
     }));
   }, []);
-  const setPosition = react.useCallback(
+  const setPosition = React.useCallback(
     (position) => {
       stop();
       positionRef.current = Vector2.from(position.x, position.y);
@@ -1610,7 +1610,7 @@ function useFlick(options = {}) {
     },
     [stop]
   );
-  const recordSample = react.useCallback((position) => {
+  const recordSample = React.useCallback((position) => {
     velocityTracker.current.addSample(Vector2.from(position.x, position.y));
     positionRef.current = Vector2.from(position.x, position.y);
     setState((prev) => ({
@@ -1619,10 +1619,10 @@ function useFlick(options = {}) {
       y: position.y
     }));
   }, []);
-  const getCurrentVelocity = react.useCallback(() => {
+  const getCurrentVelocity = React.useCallback(() => {
     return velocityTracker.current.getVelocity();
   }, []);
-  const release = react.useCallback(
+  const release = React.useCallback(
     (position) => {
       positionRef.current = Vector2.from(position.x, position.y);
       const velocity = velocityTracker.current.getVelocity();
@@ -1642,12 +1642,12 @@ function useFlick(options = {}) {
     },
     [threshold, startMomentum]
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       PhysicsEngine.unregister(idRef.current);
     };
   }, []);
-  const style = react.useMemo(
+  const style = React.useMemo(
     () => ({
       transform: `translate3d(${state.x}px, ${state.y}px, 0)`,
       willChange: state.isFlicking ? "transform" : "auto"
@@ -1668,7 +1668,7 @@ function useFlick(options = {}) {
     release
   };
 }
-const Draggable = react.forwardRef(
+const Draggable = React.forwardRef(
   ({
     children,
     initial = { x: 0, y: 0 },
@@ -1711,7 +1711,7 @@ const Draggable = react.forwardRef(
       scale: physicsContext.lift.scale,
       shadowIntensity: physicsContext.lift.shadowIntensity
     });
-    const velocity = react.useMemo(() => {
+    const velocity = React.useMemo(() => {
       if (!isDragging && !isMomentum) return Vector2.zero();
       return Vector2.from(0, 0);
     }, [isDragging, isMomentum]);
@@ -1720,7 +1720,7 @@ const Draggable = react.forwardRef(
       intensity: physicsContext.stretch.intensity,
       maxVelocity: physicsContext.stretch.maxVelocity
     });
-    const combinedStyle = react.useMemo(() => {
+    const combinedStyle = React.useMemo(() => {
       let result = { ...dragStyle };
       if (enableLift && isDragging) {
         result = combineLiftStyle(result, liftStyle);
@@ -1735,7 +1735,7 @@ const Draggable = react.forwardRef(
         userSelect: "none"
       };
     }, [dragStyle, liftStyle, stretchStyle, enableLift, enableStretch, isDragging, customStyle]);
-    const combinedBind = react.useMemo(() => {
+    const combinedBind = React.useMemo(() => {
       return {
         ...bind,
         onPointerDown: (e) => {
@@ -1766,7 +1766,7 @@ const Draggable = react.forwardRef(
   }
 );
 Draggable.displayName = "Draggable";
-const Card = react.forwardRef(
+const Card = React.forwardRef(
   ({
     children,
     lift: enableLift = true,
@@ -1783,7 +1783,7 @@ const Card = react.forwardRef(
     onPress
   }, ref) => {
     const physicsContext = usePhysicsContext();
-    const [isPressed, setIsPressed] = react.useState(false);
+    const [isPressed, setIsPressed] = React.useState(false);
     const resolvedLiftScale = liftScale ?? physicsContext.lift.scale;
     const { style: liftStyle, bind: liftBind, isLifted } = useLift({
       trigger: "hover",
@@ -1800,19 +1800,19 @@ const Card = react.forwardRef(
         ...springConfig
       }
     });
-    const handlePointerDown = react.useCallback(() => {
+    const handlePointerDown = React.useCallback(() => {
       if (pressable) {
         setIsPressed(true);
         onPress == null ? void 0 : onPress(true);
       }
     }, [pressable, onPress]);
-    const handlePointerUp = react.useCallback(() => {
+    const handlePointerUp = React.useCallback(() => {
       if (pressable) {
         setIsPressed(false);
         onPress == null ? void 0 : onPress(false);
       }
     }, [pressable, onPress]);
-    const handlePointerLeave = react.useCallback(() => {
+    const handlePointerLeave = React.useCallback(() => {
       if (isPressed) {
         setIsPressed(false);
         onPress == null ? void 0 : onPress(false);
@@ -1824,7 +1824,7 @@ const Card = react.forwardRef(
       WebkitBackdropFilter: `blur(${glassBlur}px)`,
       border: "1px solid rgba(255, 255, 255, 0.18)"
     } : {};
-    const combinedStyle = react.useMemo(() => {
+    const combinedStyle = React.useMemo(() => {
       const liftTransform = enableLift ? liftStyle.transform || "" : "";
       const pressTransform = pressable ? `scale(${pressScaleValue})` : "";
       const transform = `${liftTransform} ${pressTransform}`.trim() || void 0;
@@ -1875,38 +1875,2341 @@ 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 = React.useRef(null);
+  const thumbRef = React.useRef(null);
+  const state = React.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 = React.useCallback(() => forceRender((n) => n + 1), []);
+  const springRef = React.useRef(null);
+  const momentumRef = React.useRef(null);
+  const scaleSpringRef = React.useRef(null);
+  const verticalSpringRef = React.useRef(null);
+  const stretchXSpringRef = React.useRef(null);
+  const stretchYSpringRef = React.useRef(null);
+  const stretchOriginSpringRef = React.useRef(null);
+  const shadowSpringRef = React.useRef(null);
+  const velocityTracker = React.useRef(new VelocityTracker1D());
+  const physicsIdRef = React.useRef(generatePhysicsId("slider"));
+  const scaleIdRef = React.useRef(generatePhysicsId("scale"));
+  const verticalIdRef = React.useRef(generatePhysicsId("sliderVertical"));
+  const stretchXIdRef = React.useRef(generatePhysicsId("stretchX"));
+  const stretchYIdRef = React.useRef(generatePhysicsId("stretchY"));
+  const stretchOriginIdRef = React.useRef(generatePhysicsId("stretchOrigin"));
+  const shadowIdRef = React.useRef(generatePhysicsId("shadow"));
+  const dragDecayIdRef = React.useRef(generatePhysicsId("dragDecay"));
+  React.useEffect(() => {
+    if (!state.current.isDragging && !forceDrag) {
+      const targetPercent = (value - min) / (max - min) * 100;
+      animateToPercent(targetPercent);
+    }
+  }, [value, min, max]);
+  const lastValueRef = React.useRef(value);
+  React.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 = React.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 = React.useCallback((percent) => {
+    const raw = min + percent / 100 * (max - min);
+    return Math.round(raw / step) * step;
+  }, [min, max, step]);
+  const animateScaleTo = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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]);
+  React.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__ */ jsxRuntime.jsxs("div", { className: `tekiyo-slider-container ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tekiyo-slider-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tekiyo-slider-label-group", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tekiyo-slider-label", children: label }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tekiyo-slider-description", children: description })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tekiyo-slider-value", children: value.toFixed(decimals) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "tekiyo-slider-track",
+        ref: trackRef,
+        onClick: handleTrackClick,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "tekiyo-slider-fill",
+              style: { width: `${s.displayPercent}%` }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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 = React.useRef(null);
+  const minPercent = (minValue - min) / (max - min) * 100;
+  const maxPercent = (maxValue - min) / (max - min) * 100;
+  const minThumb = React.useRef(createThumbState(minPercent));
+  const maxThumb = React.useRef(createThumbState(maxPercent));
+  const activeThumb = React.useRef(null);
+  const pointerStart = React.useRef(null);
+  const [, forceRender] = React.useState(0);
+  const rerender = React.useCallback(() => forceRender((n) => n + 1), []);
+  const minScaleId = React.useRef(generatePhysicsId("rangeMinScale"));
+  const maxScaleId = React.useRef(generatePhysicsId("rangeMaxScale"));
+  const minDecayId = React.useRef(generatePhysicsId("rangeMinDecay"));
+  const maxDecayId = React.useRef(generatePhysicsId("rangeMaxDecay"));
+  const minRelaxId = React.useRef(generatePhysicsId("rangeMinRelax"));
+  const maxRelaxId = React.useRef(generatePhysicsId("rangeMaxRelax"));
+  const minScaleSpring = React.useRef(null);
+  const maxScaleSpring = React.useRef(null);
+  React.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 = React.useCallback(
+    (percent) => {
+      const raw = min + percent / 100 * (max - min);
+      return Math.round(raw / step) * step;
+    },
+    [min, max, step]
+  );
+  const animateScaleTo = React.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 = React.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 = React.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 = React.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 = React.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]);
+  React.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__ */ jsxRuntime.jsxs("div", { className: `tekiyo-range-slider ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tekiyo-slider-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tekiyo-slider-label-group", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tekiyo-slider-label", children: label }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tekiyo-slider-description", children: description })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tekiyo-slider-value", children: [
+        formatValue(minValue),
+        " - ",
+        formatValue(maxValue)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "tekiyo-slider-track",
+        ref: trackRef,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tekiyo-slider-track-bg" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "tekiyo-range-fill",
+              style: {
+                left: `${minS.displayPercent}%`,
+                width: `${maxS.displayPercent - minS.displayPercent}%`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = React.useRef(null);
+  const currentIndex = options.findIndex((opt) => opt.value === value);
+  const stepPercent = 100 / (options.length - 1);
+  const targetPercent = currentIndex * stepPercent;
+  const state = React.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 = React.useCallback(() => forceRender((n) => n + 1), []);
+  const scaleIdRef = React.useRef(generatePhysicsId("stepScale"));
+  const snapIdRef = React.useRef(generatePhysicsId("stepSnap"));
+  const decayIdRef = React.useRef(generatePhysicsId("stepDecay"));
+  const relaxIdRef = React.useRef(generatePhysicsId("stepRelax"));
+  const scaleSpring = React.useRef(null);
+  const snapSpring = React.useRef(null);
+  React.useEffect(() => {
+    if (!state.current.isDragging) {
+      const idx = options.findIndex((opt) => opt.value === value);
+      const percent = idx * stepPercent;
+      animateToPercent(percent);
+    }
+  }, [value, options, stepPercent]);
+  const animateToPercent = React.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 = React.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 = React.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 = React.useCallback(
+    (percent) => {
+      const stepSize = 100 / (options.length - 1);
+      return Math.round(percent / stepSize);
+    },
+    [options.length]
+  );
+  const handlePointerDown = React.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 = React.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 = React.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 = React.useCallback(
+    (index) => {
+      if (state.current.isDragging) return;
+      const newValue = options[index].value;
+      if (newValue !== value) {
+        onChange(newValue);
+      }
+    },
+    [options, value, onChange]
+  );
+  React.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__ */ jsxRuntime.jsxs("div", { className: `tekiyo-step-slider ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tekiyo-slider-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tekiyo-slider-label-group", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tekiyo-slider-label", children: label }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tekiyo-slider-description", children: description })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "tekiyo-step-value",
+          style: { color: currentOption == null ? void 0 : currentOption.color },
+          children: currentOption == null ? void 0 : currentOption.label
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "tekiyo-step-track",
+        ref: trackRef,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tekiyo-step-track-bg" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "tekiyo-step-track-fill",
+              style: {
+                width: `${s.displayPercent}%`,
+                background: (currentOption == null ? void 0 : currentOption.color) || "#007aff"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tekiyo-step-dots", children: options.map((option, index) => {
+            const dotPercent = index * stepPercent;
+            const isActive = s.displayPercent >= dotPercent - 1;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `tekiyo-step-dot ${isActive ? "active" : ""}`,
+                style: {
+                  left: `${dotPercent}%`,
+                  background: isActive ? option.color || "#007aff" : void 0
+                },
+                onClick: () => handleStepClick(index)
+              },
+              option.value
+            );
+          }) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "tekiyo-step-labels", children: options.map((option, index) => {
+      const labelPercent = index * stepPercent;
+      const isSelected = currentIndex === index;
+      return /* @__PURE__ */ jsxRuntime.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 = React.useRef(null);
+  const state = React.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 = React.useCallback(() => forceRender((n) => n + 1), []);
+  const physicsIdRef = React.useRef(generatePhysicsId("vslider"));
+  const scaleIdRef = React.useRef(generatePhysicsId("vscale"));
+  const decayIdRef = React.useRef(generatePhysicsId("vdecay"));
+  const relaxIdRef = React.useRef(generatePhysicsId("vrelax"));
+  const horizontalIdRef = React.useRef(generatePhysicsId("vhorizontal"));
+  const springRef = React.useRef(null);
+  const scaleSpringRef = React.useRef(null);
+  const horizontalSpringRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!state.current.isDragging) {
+      const targetPercent = (value - min) / (max - min) * 100;
+      animateToPercent(targetPercent);
+    }
+  }, [value, min, max]);
+  const animateToPercent = React.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 = React.useCallback(
+    (percent) => {
+      const raw = min + percent / 100 * (max - min);
+      return Math.round(raw / step) * step;
+    },
+    [min, max, step]
+  );
+  const animateScaleTo = React.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 = React.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 = React.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 = React.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 = React.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 = React.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]
+  );
+  React.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__ */ jsxRuntime.jsxs("div", { className: `tekiyo-vertical-slider ${className}`, style: { height }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "tekiyo-vertical-track",
+        ref: trackRef,
+        onClick: handleTrackClick,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
+        style: { height },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tekiyo-vertical-track-bg" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "tekiyo-vertical-track-fill",
+              style: {
+                height: `${s.displayPercent}%`,
+                background: color
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "tekiyo-vertical-slider-info", children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tekiyo-vertical-slider-icon", style: { color }, children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tekiyo-vertical-slider-value", style: { color }, children: [
+        displayValue,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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] = React.useState(0);
+  const rerender = React.useCallback(() => forceRender((n) => n + 1), []);
+  const initialIndex = value !== void 0 ? value : defaultIndex;
+  const state = React.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 = React.useRef(null);
+  const springRef = React.useRef(null);
+  const pressSpringRef = React.useRef(null);
+  const verticalSpringRef = React.useRef(null);
+  const stretchOriginSpringRef = React.useRef(null);
+  const physicsId = React.useRef(generatePhysicsId("seg"));
+  const pressId = React.useRef(generatePhysicsId("press"));
+  const verticalId = React.useRef(generatePhysicsId("vert"));
+  const stretchOriginId = React.useRef(generatePhysicsId("segOrigin"));
+  const pointerStart = React.useRef(null);
+  const lastPos = React.useRef(initialIndex);
+  const hasDragged = React.useRef(false);
+  const velocitySamples = React.useRef([]);
+  React.useEffect(() => {
+    if (value !== void 0 && value !== state.current.selected && !state.current.isDragging) {
+      animateTo(value);
+    }
+  }, [value]);
+  const getIndexFromX = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.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]);
+  React.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `tekiyo-segmented-control ${s.isDragging ? "dragging" : ""} ${className}`,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp,
+      onPointerLeave,
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `tekiyo-segmented-option ${s.selected === index ? "active" : ""} ${dragClass}`,
+            children: [
+              option,
+              showIndicator && s.selected === index && /* @__PURE__ */ jsxRuntime.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 = React.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        style: {
+          position: "absolute",
+          width: 0,
+          height: 0,
+          overflow: "hidden",
+          pointerEvents: "none"
+        },
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "filter",
+          {
+            id: filterId,
+            x: "-50%",
+            y: "-50%",
+            width: "200%",
+            height: "200%",
+            colorInterpolationFilters: "sRGB",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: blurAmount, result: "blurred" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "feImage",
+                {
+                  href: displacementMapUrl,
+                  x: "0",
+                  y: "0",
+                  width,
+                  height,
+                  result: "displacement_map",
+                  preserveAspectRatio: "none"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "feDisplacementMap",
+                {
+                  in: "blurred",
+                  in2: "displacement_map",
+                  scale,
+                  xChannelSelector: "R",
+                  yChannelSelector: "G",
+                  result: "displaced"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "feColorMatrix",
+                {
+                  in: "displaced",
+                  type: "saturate",
+                  values: String(saturation),
+                  result: "saturated"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "feImage",
+                {
+                  href: specularMapUrl,
+                  x: "0",
+                  y: "0",
+                  width,
+                  height,
+                  result: "specular_map_raw",
+                  preserveAspectRatio: "none"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "specular_map_raw", stdDeviation: "3", result: "specular_map" }),
+              /* @__PURE__ */ jsxRuntime.jsx("feFlood", { floodColor: "white", floodOpacity: specularIntensity * 0.5, result: "white" }),
+              /* @__PURE__ */ jsxRuntime.jsx("feComposite", { in: "white", in2: "specular_map", operator: "in", result: "highlight" }),
+              /* @__PURE__ */ jsxRuntime.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] = React.useState(DEFAULT_LIQUID_GLASS_CONFIG.scale);
+  const [displacementMapUrl, setDisplacementMapUrl] = React.useState("");
+  const [specularMapUrl, setSpecularMapUrl] = React.useState("");
+  const scaleSpringRef = React.useRef(null);
+  const physicsIdRef = React.useRef(generatePhysicsId("liquid-glass"));
+  const filterIdRef = React.useRef(generateFilterId());
+  const isSupported = React.useMemo(() => supportsBackdropSvgFilter(), []);
+  React.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]);
+  React.useEffect(() => {
+    scaleSpringRef.current = new Spring1D(scale, {
+      tension: 200,
+      friction: 20,
+      mass: 1,
+      precision: 0.5
+    });
+    return () => {
+      PhysicsEngine.unregister(physicsIdRef.current);
+    };
+  }, []);
+  const setScale = React.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 = React.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 = React.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
+  };
+}
 exports.Card = Card;
 exports.DEFAULT_FRICTION_CONFIG = DEFAULT_FRICTION_CONFIG;
+exports.DEFAULT_LIQUID_GLASS_CONFIG = DEFAULT_LIQUID_GLASS_CONFIG;
 exports.DEFAULT_SPRING_CONFIG = DEFAULT_SPRING_CONFIG;
 exports.Draggable = Draggable;
+exports.LiquidGlassFilter = LiquidGlassFilter;
 exports.Momentum = Momentum;
 exports.Momentum1D = Momentum1D;
 exports.PhysicsEngine = PhysicsEngine;
 exports.PhysicsProvider = PhysicsProvider;
+exports.PhysicsRangeSlider = PhysicsRangeSlider;
+exports.PhysicsSlider = PhysicsSlider;
+exports.PhysicsStepSlider = PhysicsStepSlider;
+exports.PhysicsVerticalSlider = PhysicsVerticalSlider;
+exports.SegmentedControl = SegmentedControl;
 exports.Spring = Spring;
 exports.Spring1D = Spring1D;
 exports.Vector2 = Vector2;
 exports.VelocityTracker = VelocityTracker;
 exports.VelocityTracker1D = VelocityTracker1D;
 exports.cardBaseStyles = cardBaseStyles;
+exports.clearMapCache = clearMapCache;
 exports.combineLiftStyle = combineLiftStyle;
 exports.combineStretchStyle = combineStretchStyle;
+exports.defaultSegmentedControlConfig = defaultSegmentedControlConfig;
+exports.defaultSliderConfig = defaultSliderConfig;
+exports.generateDisplacementMap = generateDisplacementMap;
+exports.generateFilterId = generateFilterId;
 exports.generatePhysicsId = generatePhysicsId;
+exports.generateSpecularMap = generateSpecularMap;
 exports.gentle = gentle;
+exports.getCachedMaps = getCachedMaps;
 exports.getFrictionConfig = getFrictionConfig;
 exports.getPreset = getPreset;
+exports.getProfileFunction = getProfileFunction;
 exports.getSpringConfig = getSpringConfig;
 exports.ios = ios;
+exports.preloadMaps = preloadMaps;
 exports.presets = presets;
+exports.segmentedControlPresets = segmentedControlPresets;
+exports.sliderPresets = sliderPresets;
 exports.smooth = smooth;
+exports.smootherstep = smootherstep;
 exports.snappy = snappy;
 exports.stiff = stiff;
+exports.supportsBackdropSvgFilter = supportsBackdropSvgFilter;
 exports.useDrag = useDrag;
 exports.useFlick = useFlick;
 exports.useFrictionConfig = useFrictionConfig;
 exports.useGesture = useGesture;
 exports.useLift = useLift;
 exports.useLiftConfig = useLiftConfig;
+exports.useLiquidGlass = useLiquidGlass;
 exports.usePhysicsConfig = usePhysicsConfig;
 exports.usePhysicsContext = usePhysicsContext;
 exports.useSpring = useSpring;