tera-system-ui 0.2.1 → 0.2.2

package/dist/components/bottom-sheet/BottomSheet.recipe.d.ts

@@ -110,6 +110,15 @@ export interface BottomSheetProps {
     closeOnBackdrop?: boolean;
     /** Show a close (X) button in the header (requires the `header` snippet). */
     showCloseButton?: boolean;
+    /**
+     * Keep the browser UI tint (iOS Safari status bar / Android address bar) matching the page
+     * while the sheet is open. The full-screen backdrop darkens the area behind the status bar;
+     * iOS Safari, when the page declares no `<meta name="theme-color">`, re-samples that area and
+     * flips the status bar dark — losing the immersive look. When true (the default) the sheet,
+     * only if the page has no `theme-color` of its own, adds one pinned to the page background for
+     * its open lifetime and removes it on close. A page that sets its own tint is left untouched.
+     */
+    syncThemeColor?: boolean;
     /** Called after the sheet finishes closing. */
     onClose?: () => void;
     /** Called whenever the open state changes. */

package/dist/components/bottom-sheet/BottomSheet.recipe.js

@@ -21,7 +21,7 @@ import { tv } from "tailwind-variants";
 export const bottomSheetRecipe = tv({
     slots: {
         backdrop: 'fixed inset-0 bg-black opacity-0 touch-none [will-change:opacity] [-webkit-tap-highlight-color:transparent] transition-opacity duration-[var(--transition-duration,0.35s)] ease-out',
-        sheet: 'fixed bottom-0 left-0 right-0 flex flex-col overflow-visible bg-surface-raised rounded-t-[var(--tera-bottom-sheet-radius,12px)] shadow-[0_-1px_0_rgb(255_255_255/0.05),0_-4px_20px_rgb(0_0_0/0.3)] [will-change:translate] [translate:0_100%] [transform:translateZ(0)] [backface-visibility:hidden] transition-[translate] duration-[var(--transition-duration,0.35s)] ease-[cubic-bezier(0.2,0.9,0.36,1)]',
+        sheet: 'fixed bottom-0 left-0 right-0 flex flex-col overflow-visible bg-surface-raised rounded-t-[var(--tera-bottom-sheet-radius,12px)] [will-change:translate] [translate:0_100%] [transform:translateZ(0)] [backface-visibility:hidden] transition-[translate] duration-[var(--transition-duration,0.35s)] ease-[cubic-bezier(0.2,0.9,0.36,1)]',
         handle: 'flex shrink-0 items-center justify-center px-4 pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing',
         handleBar: 'h-[5px] w-9 rounded-[2.5px] bg-text-tertiary',
         header: 'relative shrink-0 cursor-grab touch-none select-none border-b border-border-default px-4 pt-1 pb-3 active:cursor-grabbing',

package/dist/components/bottom-sheet/BottomSheet.svelte

@@ -18,17 +18,24 @@ const CONFIG = {
     backdrop: {
         maxOpacity: 0.5 // Maximum opacity when fully open
     },
-    // Animation timing
+    // Spring physics for open / close / settle, PLAYED ON THE COMPOSITOR via the Web
+    // Animations API (see animateTo) so motion holds the display's native refresh rate
+    // (e.g. 120Hz) even under main-thread load. `response` is the approximate settle
+    // time (s); `damping` is the damping ratio (1 = critical/no bounce, <1 adds a little
+    // life). The spring is simulated ONCE per gesture — seeded with the finger's release
+    // velocity so motion continues instead of restarting — and emitted as compositor
+    // keyframes; there is no per-frame JavaScript. `close` finalizes the instant it
+    // reaches offscreen (simulateSpring hideOnArrival) so there is no lingering tail.
     animation: {
-        defaultDuration: 0.35, // Default duration (seconds)
-        minDuration: 0.15, // Min duration for fast swipes
-        maxDuration: 0.4, // Max duration for slow gestures
-        easing: 'cubic-bezier(0.2, 0.9, 0.36, 1)' // iOS-style spring curve
+        open: { response: 0.4, damping: 0.86 }, // present — quick, no bounce
+        close: { response: 0.26, damping: 0.85 }, // dismiss — fast, finalizes on arrival
+        snap: { response: 0.32, damping: 0.84 }, // moving between snap points
+        restDistance: 0.5, // px from target at which the simulated spring is "settled"
+        restVelocity: 40 // px/s below which the simulated spring is "at rest"
     },
     // Gesture handling
     gesture: {
         velocityInfluence: 0.01, // How much velocity affects snap selection
-        overdragExponent: 0.55, // Overdrag resistance (lower = more resistance)
         closeVelocityThreshold: 0.35, // Velocity to trigger close (px/ms)
         closeProgressThreshold: 0.35, // Progress to trigger close (0-1)
         maxLockedDrag: 60, // Max drag when dragToClose disabled (px)
@@ -42,7 +49,7 @@ const CONFIG = {
 // ============================================
 // COMPONENT PROPS
 // ============================================
-let { id, open = $bindable(false), snapPoints = [0.9], defaultSnapPoint = 0, containerRef = null, scaleTargetRef = null, constrainToContainer = false, scaleBackground = true, dragToClose = true, closeOnBackdrop = true, showCloseButton = false, onClose, onOpenChange, children, header } = $props();
+let { id, open = $bindable(false), snapPoints = [0.9], defaultSnapPoint = 0, containerRef = null, scaleTargetRef = null, constrainToContainer = false, scaleBackground = true, dragToClose = true, closeOnBackdrop = true, showCloseButton = false, syncThemeColor = true, onClose, onOpenChange, children, header } = $props();
 // ============================================
 // INTERNAL STATE
 // ============================================
@@ -53,11 +60,28 @@ let backdropRef = $state(null);
 // Sheet state
 let isVisible = $state(false);
 let isClosing = $state(false);
-let isAnimating = $state(false);
 let isDragging = $state(false);
-let currentTranslateY = $state(0);
+// Plain (NOT $state): written on every drag move (can be ~120/s) but never read
+// reactively (no template / $derived / $effect depends on it). Keeping it out of the
+// reactivity graph avoids a signal write per pointer event on high-refresh displays.
+// During a compositor animation it holds the resting target; the true on-screen value
+// is read from the compositor when a gesture interrupts (readLiveTranslateY).
+let currentTranslateY = 0;
 let sheetHeight = $state(0);
-let transitionDuration = $state(`${CONFIG.animation.defaultDuration}s`);
+// Compositor spring engine — programmatic motion (open/close/snap/settle) plays as Web
+// Animations on the compositor thread (see animateTo). currentTranslateY holds the live
+// RESTING position; while an animation runs we read the true on-screen value straight
+// from the compositor (readLiveTranslateY), so grabbing the sheet mid-flight never jumps.
+let sheetAnim = null; // sheet translate
+let backdropAnim = null; // backdrop opacity (kept in sync)
+let scaleAnim = null; // scale-target scale/translate/radius (in sync)
+let scaleTargetPrimed = false; // static scale-target styles set once per open cycle
+// iOS Safari status-bar tint. The full-screen backdrop darkens the area behind the status
+// bar; with no page-level <meta name="theme-color"> Safari re-samples it and flips the bar
+// dark (losing the immersive look). When the page declares none we add one (= page
+// background) for the sheet's open lifetime and remove it on close; a page that sets its own
+// theme-color is left alone — Safari honors it, so the backdrop can't flip it.
+let themeColorMeta = null;
 // Drag tracking
 let dragState = {
     startY: 0,
@@ -79,6 +103,11 @@ let dragState = {
 // Scroll state
 let scrollableElement = null;
 let isScrolledToTop = true;
+// Backdrop dismiss: the pointerId of a press that STARTED on the backdrop. A genuine
+// dismiss is a full press+release on the backdrop; tracking the origin lets us ignore
+// the stray pointerup that lands on a freshly-mounted backdrop when a press begun
+// elsewhere (e.g. a long-press on a button that opened the sheet) is released over it.
+let backdropPressPointerId = null;
 // Dimensions
 let windowHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 800);
 let containerHeight = $state(0);
@@ -108,6 +137,18 @@ onMount(() => {
 });
 onDestroy(() => {
     containerResizeObserver?.disconnect();
+    cancelAnimations();
+    restoreThemeColor();
+});
+// Motion is driven by direct writes (drag) and Web Animations (open/close/snap), so keep
+// the recipe's CSS `transition` OFF on these elements — otherwise the CSS transition would
+// fight each per-move drag write and smear it. (WAAPI animations are independent of the
+// `transition` property, so turning it off here does not affect them.)
+$effect(() => {
+    if (sheetRef)
+        sheetRef.style.transition = 'none';
+    if (backdropRef)
+        backdropRef.style.transition = 'none';
 });
 // Watch containerRef for constrained mode
 $effect(() => {
@@ -145,19 +186,11 @@ $effect(() => {
         doClose();
     }
 });
-// Setup scrollable element detection
-$effect(() => {
-    if (!contentRef || !isVisible)
-        return;
-    scrollableElement = contentRef.querySelector('[data-bottom-sheet-scroll]');
-    if (!scrollableElement)
-        return;
-    const handleScroll = () => {
-        isScrolledToTop = scrollableElement.scrollTop <= 1;
-    };
-    scrollableElement.addEventListener('scroll', handleScroll, { passive: true });
-    isScrolledToTop = scrollableElement.scrollTop <= 1;
-});
+// NOTE: The scrollable region ([data-bottom-sheet-scroll]) is resolved lazily
+// at gesture-start from the event target (see getScrollableFromTarget), NOT via
+// a one-shot querySelector here. A single querySelector at open-time cannot see
+// content that is mounted lazily AFTER the sheet opens (e.g. async-loaded lists),
+// which left scrollableElement null and broke drag/scroll arbitration inside it.
 // ============================================
 // CORE FUNCTIONS
 // ============================================
@@ -176,52 +209,254 @@ function recalculateDimensions() {
     if (sheetRef)
         sheetHeight = sheetRef.offsetHeight;
 }
+// ============================================
+// COMPOSITOR SPRING ENGINE (Web Animations API)
+// ============================================
+// Open / close / snap / settle play as Web Animations on the COMPOSITOR thread, so they
+// hold the display's native refresh rate (e.g. 120Hz) even when the main thread is busy —
+// the failure mode of a per-frame rAF loop, which must be scheduled on main every frame
+// and drops frames under contention. We simulate the damped spring ONCE per gesture
+// (seeded with the finger's release velocity) to get a position trajectory, then hand it
+// to the compositor as keyframes: NO per-frame JavaScript, store write, or layout during
+// the animation. Drag stays on direct per-input writes (renderPosition) — it must track
+// the finger 1:1, which no pre-baked animation can do.
+const prefersReducedMotion = () => typeof window !== 'undefined' &&
+    !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+/** Convert (response, dampingRatio) to spring stiffness/damping (unit mass). */
+function springConstants(response, damping) {
+    const omega = (2 * Math.PI) / response; // natural angular frequency
+    return { k: omega * omega, c: 2 * damping * omega };
+}
+// ── Position → visual mappings. Shared by immediate drag writes (renderPosition) and by
+//    keyframe generation, so a compositor animation and a live drag paint identically. ──
+function backdropOpacityFor(translateY) {
+    const progress = Math.max(0, Math.min(maxSnapPoint, (sheetHeight - translateY) / effectiveHeight));
+    return Math.max(0, Math.min(CONFIG.backdrop.maxOpacity, progress * CONFIG.backdrop.maxOpacity));
+}
+function scalePropsFor(translateY) {
+    const p = Math.max(0, Math.min(1, (sheetHeight - translateY) / effectiveHeight));
+    const { factor, borderRadius, translateY: ty } = CONFIG.scale;
+    return {
+        scale: String(1 - factor * p),
+        translate: `0 ${(ty * p).toFixed(2)}px`,
+        borderRadius: `${(borderRadius * p).toFixed(2)}px`
+    };
+}
+/** Set the scale target's static (non-animated) styles once per open cycle. */
+function primeScaleTarget() {
+    if (scaleTargetPrimed || !scaleTarget || !scaleBackground)
+        return;
+    scaleTarget.style.transition = 'none';
+    scaleTarget.style.transformOrigin = CONFIG.scale.origin;
+    scaleTarget.style.overflow = 'hidden';
+    scaleTarget.style.willChange = 'scale, translate, border-radius';
+    scaleTargetPrimed = true;
+}
+/** Write the whole visual state for a given translateY. Used by DRAG and immediate sets. */
+function renderPosition(translateY) {
+    if (sheetRef)
+        sheetRef.style.translate = `0 ${translateY}px`;
+    const rawProgress = (sheetHeight - translateY) / effectiveHeight;
+    const progress = Math.max(0, Math.min(maxSnapPoint, rawProgress));
+    updateBackdrop(progress);
+    updateScaleTarget(progress);
+    bottomSheetStore.updateProgress(id, Math.max(0, Math.min(1, rawProgress)));
+}
+/** Read the sheet's LIVE translateY — reflects a running compositor animation. */
+function readLiveTranslateY() {
+    if (!sheetRef)
+        return null;
+    const t = getComputedStyle(sheetRef).getPropertyValue('translate');
+    if (!t || t === 'none')
+        return null;
+    const parts = t.trim().split(/\s+/);
+    const y = parts.length > 1 ? parseFloat(parts[1]) : 0;
+    return Number.isFinite(y) ? y : null;
+}
+/** Cancel any in-flight compositor animations (sheet + backdrop + scale). */
+function cancelAnimations() {
+    sheetAnim?.cancel();
+    backdropAnim?.cancel();
+    scaleAnim?.cancel();
+    sheetAnim = backdropAnim = scaleAnim = null;
+}
+/**
+ * Freeze the sheet at its LIVE on-screen position and stop the animation, so a fresh
+ * gesture anchors to exactly what's rendered — no jump. Called when the user grabs the
+ * sheet mid-flight. (.cancel() reverts fill:none animations to their base, which is the
+ * settled target — so we pin the live value to inline styles FIRST, then cancel.)
+ */
+function interruptAnimation() {
+    if (sheetAnim || backdropAnim || scaleAnim) {
+        const liveY = readLiveTranslateY();
+        if (liveY !== null) {
+            currentTranslateY = liveY;
+            renderPosition(liveY); // pin translate + backdrop + scale to the live value
+        }
+        cancelAnimations();
+    }
+    isClosing = false;
+}
+/** Snap all visuals to a resting target — the base the fill:none animations settle onto. */
+function applyFinal(target) {
+    currentTranslateY = target;
+    renderPosition(target);
+}
+/**
+ * Simulate a damped spring from startY → targetY seeded with v0 (px/s), returning the
+ * position trajectory (evenly spaced in time) and its duration (ms). For close/hide we
+ * stop at the FIRST arrival at the target (on the way offscreen) so there is no tail.
+ */
+function simulateSpring(startY, targetY, v0, spring, hideOnArrival) {
+    const { restDistance, restVelocity } = CONFIG.animation;
+    const { k, c } = springConstants(spring.response, spring.damping);
+    const dt = 1 / 90; // keyframe sampling step; compositor interpolates between
+    const subSteps = 2; // physics sub-steps per sample (stability at high stiffness)
+    const h = dt / subSteps;
+    const maxSteps = Math.ceil(1.5 / dt); // safety cap (~1.5s)
+    let x = startY;
+    let v = v0;
+    const ys = [x];
+    for (let i = 0; i < maxSteps; i++) {
+        for (let s = 0; s < subSteps; s++) {
+            const a = -k * (x - targetY) - c * v;
+            v += a * h;
+            x += v * h;
+        }
+        if (hideOnArrival && x >= targetY) {
+            ys.push(targetY); // reached offscreen — stop before any rebound
+            break;
+        }
+        ys.push(x);
+        if (!hideOnArrival && Math.abs(x - targetY) < restDistance && Math.abs(v) < restVelocity) {
+            ys[ys.length - 1] = targetY;
+            break;
+        }
+    }
+    return { ys, duration: (ys.length - 1) * dt * 1000 };
+}
+/**
+ * Spring the sheet toward `target`, seeded with `initialVelocity` (px/s) so a flick
+ * continues seamlessly. Plays on the COMPOSITOR via the Web Animations API. If a spring
+ * is already in flight we read its LIVE position and re-simulate from there, so retargets
+ * (and mid-flight direction changes) never jump. The sheet's translate, the backdrop's
+ * opacity, and the scale target all animate from ONE simulation with identical timing, so
+ * they stay locked together on the compositor with zero per-frame JS.
+ */
+function animateTo(target, spring, initialVelocity = 0, onComplete, hideOnArrival = false) {
+    const running = !!(sheetAnim || backdropAnim || scaleAnim);
+    const start = running ? (readLiveTranslateY() ?? currentTranslateY) : currentTranslateY;
+    cancelAnimations();
+    // Reduced motion, or a move too small to be worth animating → jump straight there.
+    if (prefersReducedMotion()) {
+        applyFinal(target);
+        onComplete?.();
+        return;
+    }
+    const { ys, duration } = simulateSpring(start, target, initialVelocity, spring, hideOnArrival);
+    if (duration < 8 || ys.length < 2) {
+        applyFinal(target);
+        onComplete?.();
+        return;
+    }
+    if (scaleTarget && scaleBackground)
+        primeScaleTarget();
+    // Bases = final values, so when the fill:none animations end the elements hold `target`
+    // (no revert-to-start flash). The animations override this from t=0 with keyframe[0]=start.
+    applyFinal(target);
+    const N = ys.length;
+    const opts = { duration, easing: 'linear', fill: 'none' };
+    const sheetKf = ys.map((y, i) => ({ translate: `0 ${y.toFixed(2)}px`, offset: i / (N - 1) }));
+    sheetAnim = sheetRef ? sheetRef.animate(sheetKf, opts) : null;
+    if (backdropRef) {
+        const kf = ys.map((y, i) => ({ opacity: String(backdropOpacityFor(y)), offset: i / (N - 1) }));
+        backdropAnim = backdropRef.animate(kf, opts);
+    }
+    if (scaleTarget && scaleBackground) {
+        const kf = ys.map((y, i) => ({ ...scalePropsFor(y), offset: i / (N - 1) }));
+        scaleAnim = scaleTarget.animate(kf, opts);
+    }
+    // Finalize on natural completion only. .cancel() (retarget / grab) fires oncancel, not
+    // onfinish, so a superseded animation never runs the callback.
+    if (sheetAnim) {
+        sheetAnim.onfinish = () => {
+            sheetAnim = backdropAnim = scaleAnim = null;
+            onComplete?.();
+        };
+    }
+    else {
+        applyFinal(target);
+        onComplete?.();
+    }
+}
 function doOpen() {
+    // Refresh viewport/container dimensions BEFORE the sheet renders, so its
+    // height (maxSheetHeight) is derived from current values. While the sheet is
+    // closed, windowHeight is not tracked (handleWindowResize is gated on
+    // isVisible), so a resize between opens would otherwise leave the first
+    // render using a stale height — measured sheetHeight then mismatches the
+    // fresh effectiveHeight, shifting the sheet off the bottom edge until the
+    // next open. Doing this before isVisible keeps them in sync.
+    if (typeof window !== 'undefined')
+        windowHeight = window.innerHeight;
+    if (containerRef && constrainToContainer)
+        containerHeight = containerRef.clientHeight;
     isVisible = true;
     isClosing = false;
-    isAnimating = true;
+    backdropPressPointerId = null; // fresh open — ignore any stale backdrop press id
+    applyThemeColor(); // hold the iOS status bar at the page color before the backdrop darkens it
     bottomSheetStore.open(id);
     requestAnimationFrame(() => {
         // sheetRef is bound by this rAF tick.
         recalculateDimensions();
-        requestAnimationFrame(() => snapTo(currentSnapPoint, () => {
-            isAnimating = false;
-        }));
+        // Start fully hidden (matches the sheet's initial CSS translate of 100%),
+        // then spring up to the target snap point.
+        currentTranslateY = sheetHeight;
+        renderPosition(sheetHeight);
+        const target = sheetHeight - currentSnapPoint * effectiveHeight;
+        animateTo(target, CONFIG.animation.open, 0);
     });
 }
 function doClose() {
     if (isClosing)
         return;
+    animateSheetClose(0);
+}
+/** Spring the sheet fully down and finalize. `initialVelocity` (px/s) carries a flick-to-dismiss. */
+function animateSheetClose(initialVelocity) {
     isClosing = true;
-    isAnimating = true;
-    snapTo(0, () => {
+    animateTo(sheetHeight, CONFIG.animation.close, initialVelocity, () => {
         isVisible = false;
         isClosing = false;
-        isAnimating = false;
         bottomSheetStore.close(id);
         prevOpen = false;
         open = false;
         resetScaleTarget();
+        restoreThemeColor();
         onClose?.();
         onOpenChange?.(false);
-    });
+    }, true); // hideOnArrival — finalize as soon as it's offscreen, no spring tail
 }
-function snapTo(progress, onComplete) {
-    transitionDuration = calcDynamicDuration();
-    // Calculate translateY: sheet height is maxSnapPoint * effectiveHeight
-    // When progress = maxSnapPoint, translateY = 0 (fully visible)
-    // When progress = 0, translateY = sheetHeight (hidden)
-    const targetTranslateY = sheetHeight - (progress * effectiveHeight);
-    currentTranslateY = targetTranslateY;
-    if (sheetRef) {
-        sheetRef.style.translate = `0 ${targetTranslateY}px`;
-    }
-    updateBackdrop(progress);
-    updateScaleTarget(progress);
-    bottomSheetStore.updateProgress(id, Math.max(0, Math.min(1, progress)));
-    if (onComplete) {
-        setTimeout(onComplete, parseFloat(transitionDuration) * 1000);
+/**
+ * Settle after a drag release: resolve the target snap point, then spring to it
+ * carrying the finger's release velocity so the hand-off is seamless.
+ */
+function settleFromRelease() {
+    const nearestSnap = determineSnapPoint();
+    const releaseVelocity = calculateVelocity() * 1000; // px/ms → px/s (down = positive)
+    if (nearestSnap === 0 && dragToClose) {
+        animateSheetClose(releaseVelocity);
+        return;
     }
+    const snap = nearestSnap > 0 ? nearestSnap : dragState.startSnapPoint;
+    const target = sheetHeight - snap * effectiveHeight;
+    animateTo(target, CONFIG.animation.snap, releaseVelocity, () => {
+        if (!open) {
+            prevOpen = true;
+            open = true;
+            onOpenChange?.(true);
+        }
+    });
 }
 // ============================================
 // VISUAL UPDATES
@@ -232,23 +467,23 @@ function updateBackdrop(progress) {
     const opacity = Math.max(0, Math.min(CONFIG.backdrop.maxOpacity, progress * CONFIG.backdrop.maxOpacity));
     backdropRef.style.opacity = String(opacity);
 }
-function updateScaleTarget(progress, withTransition = true) {
+function updateScaleTarget(progress) {
     if (!scaleTarget || !scaleBackground)
         return;
+    // Static props are set ONCE per open cycle (see primeScaleTarget) — re-writing
+    // transition / transform-origin / overflow / will-change every frame churns the
+    // compositor layer and blows the frame budget on 120Hz displays.
+    primeScaleTarget();
     const p = Math.max(0, Math.min(1, progress));
-    const { factor, borderRadius, translateY, origin } = CONFIG.scale;
+    const { factor, borderRadius, translateY } = CONFIG.scale;
+    // Per-frame: scale + translate are GPU-composited (cheap). Quantize border-radius to
+    // whole px so it only actually repaints ~a dozen times across the gesture, not 120×/s.
     scaleTarget.style.scale = String(1 - factor * p);
-    scaleTarget.style.translate = `0 ${translateY * p}px`;
-    scaleTarget.style.borderRadius = `${borderRadius * p}px`;
-    scaleTarget.style.transformOrigin = origin;
-    scaleTarget.style.overflow = 'hidden';
-    scaleTarget.style.willChange = 'scale, translate, border-radius';
-    if (withTransition) {
-        const { easing } = CONFIG.animation;
-        scaleTarget.style.transition = `scale ${transitionDuration} ${easing}, translate ${transitionDuration} ${easing}, border-radius ${transitionDuration} ${easing}`;
-    }
+    scaleTarget.style.translate = `0 ${(translateY * p).toFixed(2)}px`;
+    scaleTarget.style.borderRadius = `${Math.round(borderRadius * p)}px`;
 }
 function resetScaleTarget() {
+    scaleTargetPrimed = false;
     if (!scaleTarget || !scaleBackground)
         return;
     scaleTarget.style.scale = '';
@@ -260,6 +495,48 @@ function resetScaleTarget() {
     scaleTarget.style.willChange = '';
 }
 // ============================================
+// BROWSER CHROME (iOS status-bar tint)
+// ============================================
+function isTransparentColor(color) {
+    return !color || color === 'transparent' || color === 'rgba(0, 0, 0, 0)';
+}
+/** First opaque background up the page root — what iOS Safari samples for the status bar. */
+function resolvePageBackgroundColor() {
+    if (typeof document === 'undefined')
+        return '#ffffff';
+    for (const el of [document.body, document.documentElement]) {
+        if (!el)
+            continue;
+        const bg = getComputedStyle(el).backgroundColor;
+        if (!isTransparentColor(bg))
+            return bg;
+    }
+    return '#ffffff';
+}
+/**
+ * Keep the iOS Safari status bar immersive while the sheet is open. Acts ONLY when the page
+ * declares no <meta name="theme-color"> — the case Safari resolves by sampling the now-darkened
+ * backdrop and flipping the bar dark: we add one pinned to the page background (theme-aware,
+ * so it also tracks dark mode). A page that sets its own theme-color owns its status bar and
+ * is left untouched. restoreThemeColor removes ours on close.
+ */
+function applyThemeColor() {
+    if (!syncThemeColor || typeof document === 'undefined' || themeColorMeta)
+        return;
+    if (document.querySelector('meta[name="theme-color"]'))
+        return;
+    const meta = document.createElement('meta');
+    meta.name = 'theme-color';
+    meta.setAttribute('content', resolvePageBackgroundColor());
+    document.head.appendChild(meta);
+    themeColorMeta = meta;
+}
+/** Remove the theme-color tag we added on open (no-op if we never added one). */
+function restoreThemeColor() {
+    themeColorMeta?.remove();
+    themeColorMeta = null;
+}
+// ============================================
 // GESTURE UTILITIES
 // ============================================
 function pushHistory(y) {
@@ -282,23 +559,15 @@ function calculateVelocity() {
     const dt = last.time - first.time;
     return dt > 0 ? (last.y - first.y) / dt : 0;
 }
-function calcDynamicDuration() {
-    const now = performance.now();
-    const recent = dragState.history.filter(p => now - p.time <= 100);
-    if (recent.length < 2)
-        return `${CONFIG.animation.defaultDuration}s`;
-    const first = recent[0];
-    const last = recent[recent.length - 1];
-    if (!first || !last)
-        return `${CONFIG.animation.defaultDuration}s`;
-    const speed = Math.abs((last.y - first.y) / (last.time - first.time));
-    const { minDuration, maxDuration } = CONFIG.animation;
-    let duration = maxDuration - (speed / 2) * (maxDuration - minDuration);
-    duration = Math.max(minDuration, Math.min(maxDuration, duration));
-    return `${duration}s`;
-}
-function overdragResistance(value) {
-    return value < 0 ? -Math.pow(Math.abs(value), CONFIG.gesture.overdragExponent) : value;
+function clampAboveMaxSnap(translateY) {
+    // The sheet is only as tall as its MAX snap point, with its bottom pinned to the
+    // screen bottom (translateY 0 == fully open to max). Letting translateY go below
+    // that (negative) would lift the sheet's bottom edge off the screen and reveal the
+    // background in the gap beneath it — which looks broken. So pin it: you cannot drag
+    // the sheet frame above its largest detent. This is also what native iOS does — the
+    // frame is firm at the top detent; only inner scroll content overscrolls.
+    const topLimit = sheetHeight - maxSnapPoint * effectiveHeight;
+    return translateY < topLimit ? topLimit : translateY;
 }
 function applyLockedDragResistance(rawTranslateY) {
     // Base translateY when at start snap point: sheetHeight - (startSnapPoint * effectiveHeight)
@@ -365,6 +634,15 @@ function isInteractive(target) {
 function shouldIgnoreDrag(target) {
     return !!target.closest('[data-bottom-sheet-no-drag]');
 }
+/**
+ * Resolve the scrollable region ([data-bottom-sheet-scroll]) that contains the
+ * gesture target. Resolved per-gesture (not once at open-time) so that content
+ * mounted lazily after the sheet opened — and nested/multiple scroll regions —
+ * are detected correctly. Returns the nearest scrollable ancestor, or null.
+ */
+function getScrollableFromTarget(target) {
+    return target.closest('[data-bottom-sheet-scroll]');
+}
 /**
  * Install a one-shot capture-phase click listener to suppress the ghost click
  * that fires after a committed drag from an interactive element.
@@ -415,7 +693,7 @@ function commitToDrag(clientY) {
     dragState.currentY = currentTranslateY;
     clearHistory();
     pushHistory(clientY);
-    transitionDuration = '0s';
+    interruptAnimation();
     if (scaleTarget)
         scaleTarget.style.transition = 'none';
     isDragging = true;
@@ -458,7 +736,9 @@ function handleTouchStart(e) {
         return;
     const target = e.target;
     const inDraggableArea = isInDraggableArea(target);
-    const inScrollable = !!target.closest('[data-bottom-sheet-scroll]');
+    // Resolve scrollable region from the actual target so lazily-mounted content is detected.
+    scrollableElement = getScrollableFromTarget(target);
+    const inScrollable = !!scrollableElement;
     const isInteractiveTarget = isInteractive(target);
     // data-bottom-sheet-no-drag: treat as fully default element — no tracking at all
     if (shouldIgnoreDrag(target) && !inDraggableArea) {
@@ -484,8 +764,8 @@ function handleTouchStart(e) {
         dragState.committed = false;
         dragState.inScrollable = inScrollable;
         dragState.shouldPreventScroll = true; // Will be used if we commit
-        // Do NOT set isDragging, transitionDuration, or disable transitions
-        // Do NOT call e.preventDefault() — allow native touch behavior until committed
+        // Do NOT set isDragging or interrupt the animation yet — allow native
+        // touch behavior until the gesture commits, and don't call e.preventDefault().
         return;
     }
     // Non-interactive element: immediately commit to dragging (existing behavior)
@@ -493,7 +773,7 @@ function handleTouchStart(e) {
     dragState.isInteractiveStart = false;
     dragState.committed = true;
     dragState.shouldPreventScroll = !(inScrollable && isScrolledToTop && !inDraggableArea);
-    transitionDuration = '0s';
+    interruptAnimation();
     if (scaleTarget)
         scaleTarget.style.transition = 'none';
     isDragging = true;
@@ -541,18 +821,12 @@ function handleTouchMove(e) {
         return;
     e.preventDefault();
     let translateY = dragState.currentY + moveDelta;
-    if (translateY < 0)
-        translateY = overdragResistance(translateY);
+    translateY = clampAboveMaxSnap(translateY);
     if (!dragToClose)
         translateY = applyLockedDragResistance(translateY);
     translateY = Math.min(translateY, sheetHeight);
     currentTranslateY = translateY;
-    if (sheetRef)
-        sheetRef.style.translate = `0 ${translateY}px`;
-    const progress = Math.max(0, Math.min(maxSnapPoint, (sheetHeight - translateY) / effectiveHeight));
-    updateBackdrop(progress);
-    updateScaleTarget(progress, false);
-    bottomSheetStore.updateProgress(id, progress);
+    renderPosition(translateY);
 }
 function handleTouchEnd(e) {
     if (e.touches.length > 0 || !dragState.isTouchActive)
@@ -574,19 +848,7 @@ function handleTouchEnd(e) {
     }
     isDragging = false;
     dragState.shouldPreventScroll = false;
-    const nearestSnap = determineSnapPoint();
-    if (nearestSnap === 0 && dragToClose) {
-        doClose();
-    }
-    else {
-        snapTo(nearestSnap > 0 ? nearestSnap : dragState.startSnapPoint, () => {
-            if (!open) {
-                prevOpen = true;
-                open = true;
-                onOpenChange?.(true);
-            }
-        });
-    }
+    settleFromRelease();
 }
 // ============================================
 // POINTER EVENT HANDLERS (Desktop)
@@ -596,7 +858,9 @@ function handlePointerDown(e) {
         return;
     const target = e.target;
     const inDraggableArea = isInDraggableArea(target);
-    const inScrollable = !!target.closest('[data-bottom-sheet-scroll]');
+    // Resolve scrollable region from the actual target so lazily-mounted content is detected.
+    scrollableElement = getScrollableFromTarget(target);
+    const inScrollable = !!scrollableElement;
     const isInteractiveTarget = isInteractive(target);
     const shouldIgnoreDragTarget = shouldIgnoreDrag(target);
     // data-bottom-sheet-no-drag: treat as fully default element — no tracking at all
@@ -624,7 +888,7 @@ function handlePointerDown(e) {
     dragState.isPending = false;
     dragState.isInteractiveStart = false;
     dragState.committed = true;
-    transitionDuration = '0s';
+    interruptAnimation();
     if (scaleTarget)
         scaleTarget.style.transition = 'none';
     sheetRef?.setPointerCapture(e.pointerId);
@@ -665,18 +929,12 @@ function handlePointerMove(e) {
     dragState.lastY = clientY;
     pushHistory(clientY);
     let translateY = dragState.currentY + clientY - dragState.startY;
-    if (translateY < 0)
-        translateY = overdragResistance(translateY);
+    translateY = clampAboveMaxSnap(translateY);
     if (!dragToClose)
         translateY = applyLockedDragResistance(translateY);
     translateY = Math.min(translateY, sheetHeight);
     currentTranslateY = translateY;
-    if (sheetRef)
-        sheetRef.style.translate = `0 ${translateY}px`;
-    const progress = Math.max(0, Math.min(maxSnapPoint, (sheetHeight - translateY) / effectiveHeight));
-    updateBackdrop(progress);
-    updateScaleTarget(progress, false);
-    bottomSheetStore.updateProgress(id, progress);
+    renderPosition(translateY);
     e.preventDefault();
 }
 function handlePointerUp(e) {
@@ -701,19 +959,7 @@ function handlePointerUp(e) {
     if (!isDragging)
         return;
     isDragging = false;
-    const nearestSnap = determineSnapPoint();
-    if (nearestSnap === 0 && dragToClose) {
-        doClose();
-    }
-    else {
-        snapTo(nearestSnap > 0 ? nearestSnap : dragState.startSnapPoint, () => {
-            if (!open) {
-                prevOpen = true;
-                open = true;
-                onOpenChange?.(true);
-            }
-        });
-    }
+    settleFromRelease();
 }
 function handlePointerCancel(e) {
     if (e.pointerType === 'touch' || dragState.activePointerId !== e.pointerId)
@@ -733,14 +979,28 @@ function handlePointerCancel(e) {
     if (!isDragging)
         return;
     isDragging = false;
-    snapTo(findNearestSnapPoint(currentTranslateY, 0));
+    // No velocity on cancel — settle to the nearest snap point at rest.
+    const target = sheetHeight - findNearestSnapPoint(currentTranslateY, 0) * effectiveHeight;
+    animateTo(target, CONFIG.animation.snap, 0);
 }
 function handleCloseButtonClick(e) {
     e.stopPropagation();
     doClose();
 }
+function handleBackdropPointerDown(e) {
+    // Record a press that begins ON the backdrop (and only the backdrop). Used to tell
+    // a deliberate backdrop tap apart from the ghost pointerup described below.
+    backdropPressPointerId = e.target === backdropRef ? e.pointerId : null;
+}
 function handleBackdropClick(e) {
-    if (!closeOnBackdrop || e.target !== backdropRef || isDragging || isAnimating)
+    // Dismiss only when THIS press both started and ended on the backdrop. Gating on the
+    // press origin (not an isAnimating timer) keeps a deliberate tap instant — even mid
+    // open-animation — while ignoring the stray release that fires when a press begun
+    // elsewhere lifts over a just-mounted backdrop (e.g. long-press a button to open the
+    // sheet, then release: that pointerup lands on the backdrop but never pressed it).
+    const startedOnBackdrop = backdropPressPointerId === e.pointerId;
+    backdropPressPointerId = null;
+    if (!closeOnBackdrop || e.target !== backdropRef || isDragging || !startedOnBackdrop)
         return;
     doClose();
 }
@@ -763,85 +1023,101 @@ function touchEvents(node) {
         }
     };
 }
-</script>
-
-<svelte:window onkeydown={handleKeydown}/>
-
-{#if isVisible}
-    <!-- Backdrop -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-            bind:this={backdropRef}
-            class={r.backdrop()}
-            style:z-index={zIndex}
-            style:--transition-duration={transitionDuration}
-            onpointerup={handleBackdropClick}
-    ></div>
-
-    <!-- Sheet -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-            bind:this={sheetRef}
-            class={r.sheet()}
-            style:z-index={zIndex + 1}
-            style:height="{maxSheetHeight}px"
-            style:--transition-duration={transitionDuration}
-            role="dialog"
-            aria-modal="true"
-            tabindex={-1}
-            use:touchEvents
-            onpointerdown={handlePointerDown}
-            onpointermove={handlePointerMove}
-            onpointerup={handlePointerUp}
-            onpointercancel={handlePointerCancel}
-    >
-        <!-- Drag Handle -->
-        <div class={r.handle()} data-bottom-sheet-handle>
-            <div class={r.handleBar()}></div>
-        </div>
-
-        <!-- Header -->
-        {#if header}
-            <div class={r.header()} data-bottom-sheet-header>
-                {@render header()}
-                {#if showCloseButton}
-                    <button
-                            class={r.closeButton()}
-                            data-bottom-sheet-close
-                            onclick={handleCloseButtonClick}
-                            aria-label="Close"
-                            type="button"
-                    >
-                        <IconX class="size-4"/>
-                    </button>
-                {/if}
-            </div>
-        {/if}
-
-        <!-- Content -->
-        <div bind:this={contentRef} class={r.content()} data-bottom-sheet-content>
-            {#if children}
-                {@render children()}
-            {/if}
-        </div>
-    </div>
-{/if}
-
-<style>
-    /* Consumer-marked scroll region inside the sheet body. */
-    [data-bottom-sheet-content] :global([data-bottom-sheet-scroll]) {
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: hidden;
-        overscroll-behavior: contain;
-        -webkit-overflow-scrolling: touch;
-        min-height: 0;
-        touch-action: pan-y;
-    }
-
-    /* Suppress native gestures on header children so the drag is captured. */
-    [data-bottom-sheet-header] :global(*) {
-        touch-action: none;
-        user-select: none;
-    }
-</style>
+</script>
+
+<svelte:window onkeydown={handleKeydown}/>
+
+{#if isVisible}
+    <!-- Backdrop -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+            bind:this={backdropRef}
+            class={r.backdrop()}
+            style:z-index={zIndex}
+            onpointerdown={handleBackdropPointerDown}
+            onpointerup={handleBackdropClick}
+    ></div>
+
+    <!-- Sheet -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+            bind:this={sheetRef}
+            class={r.sheet()}
+            style:z-index={zIndex + 1}
+            style:height="{maxSheetHeight}px"
+            data-bottom-sheet-surface
+            role="dialog"
+            aria-modal="true"
+            tabindex={-1}
+            use:touchEvents
+            onpointerdown={handlePointerDown}
+            onpointermove={handlePointerMove}
+            onpointerup={handlePointerUp}
+            onpointercancel={handlePointerCancel}
+    >
+        <!-- Drag Handle -->
+        <div class={r.handle()} data-bottom-sheet-handle>
+            <div class={r.handleBar()}></div>
+        </div>
+
+        <!-- Header -->
+        {#if header}
+            <div class={r.header()} data-bottom-sheet-header>
+                {@render header()}
+                {#if showCloseButton}
+                    <button
+                            class={r.closeButton()}
+                            data-bottom-sheet-close
+                            onclick={handleCloseButtonClick}
+                            aria-label="Close"
+                            type="button"
+                    >
+                        <IconX class="size-4"/>
+                    </button>
+                {/if}
+            </div>
+        {/if}
+
+        <!-- Content -->
+        <div bind:this={contentRef} class={r.content()} data-bottom-sheet-content>
+            {#if children}
+                {@render children()}
+            {/if}
+        </div>
+    </div>
+{/if}
+
+<style>
+    /* Consumer-marked scroll region inside the sheet body. */
+    [data-bottom-sheet-content] :global([data-bottom-sheet-scroll]) {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        overscroll-behavior: contain;
+        -webkit-overflow-scrolling: touch;
+        min-height: 0;
+        touch-action: pan-y;
+    }
+
+    /* Suppress native gestures on header children so the drag is captured. */
+    [data-bottom-sheet-header] :global(*) {
+        touch-action: none;
+        user-select: none;
+    }
+
+    /* Extend the sheet's own surface below its bottom edge. The sheet is only as tall as
+       its max snap point; if it ever sits a hair above the screen bottom — the open spring's
+       slight overshoot, or sub-pixel rounding — this keeps the sliver beneath it sheet-colored
+       instead of letting the background show through. The sheet is overflow-visible so this is
+       not clipped, and it rides along with the sheet's transform. */
+    :global([data-bottom-sheet-surface]::after) {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        height: 100%;
+        background-color: inherit;
+        pointer-events: none;
+    }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tera-system-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run customPrepublish && npm run generate-index && npm run generate-registry && npm run generate-llms && vite build && npm run package && npm run copy-docs && npm run copy-llms && npm run postpublish",

package/registry/bottom-sheet.json

@@ -1,50 +1,50 @@
-{
-  "$schema": "https://tera-system-ui/registry-item.schema.json",
-  "name": "bottom-sheet",
-  "type": "registry:component",
-  "description": "Draggable iOS-style bottom sheet with snap points, container-scale effect, and stacking.",
-  "recipe": "src/lib/components/bottom-sheet/BottomSheet.recipe.ts",
-  "files": [
-    {
-      "path": "src/lib/components/bottom-sheet/BottomSheet.recipe.ts",
-      "target": "BottomSheet.recipe.ts",
-      "type": "recipe",
-      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\n/**\n * BottomSheet recipe — the canonical styled layer for the draggable sheet.\n *\n * An iOS-style bottom sheet with snap points, gesture dragging, container-scale\n * effect, and stacking (custom behavior — not bits-ui). The recipe is slotted by\n * role — backdrop / sheet / handle / handleBar / header / closeButton / content —\n * so an app can restyle any part independently. Only the *themeable, static*\n * surface lives here; the per-frame transforms (translate / scale / opacity) are\n * driven imperatively from the component and the runtime transition duration is\n * passed through the `--transition-duration` CSS var.\n *\n * The `constrained` variant switches fixed → absolute positioning when the sheet\n * is bounded inside a container; `dragging` carries the grabbing cursor.\n *\n * Primary customization surface: extend with `tv({ extend: bottomSheetRecipe, ... })`\n * in typed code. Lighter rung: the per-component CSS var (--tera-bottom-sheet-radius)\n * retunes the top corner radius with no code change; it defaults to the prior\n * literal value inline.\n */\nexport const bottomSheetRecipe = tv({\n    slots: {\n        backdrop: 'fixed inset-0 bg-black opacity-0 touch-none [will-change:opacity] [-webkit-tap-highlight-color:transparent] transition-opacity duration-[var(--transition-duration,0.35s)] ease-out',\n        sheet: 'fixed bottom-0 left-0 right-0 flex flex-col overflow-visible bg-surface-raised rounded-t-[var(--tera-bottom-sheet-radius,12px)] shadow-[0_-1px_0_rgb(255_255_255/0.05),0_-4px_20px_rgb(0_0_0/0.3)] [will-change:translate] [translate:0_100%] [transform:translateZ(0)] [backface-visibility:hidden] transition-[translate] duration-[var(--transition-duration,0.35s)] ease-[cubic-bezier(0.2,0.9,0.36,1)]',\n        handle: 'flex shrink-0 items-center justify-center px-4 pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing',\n        handleBar: 'h-[5px] w-9 rounded-[2.5px] bg-text-tertiary',\n        header: 'relative shrink-0 cursor-grab touch-none select-none border-b border-border-default px-4 pt-1 pb-3 active:cursor-grabbing',\n        closeButton: 'absolute right-2 top-[calc(50%-4px)] flex h-8 w-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0 text-text-tertiary [touch-action:manipulation] [-webkit-tap-highlight-color:transparent] transition-colors hover:bg-surface-hover hover:text-text-primary active:bg-surface-hover',\n        content: 'flex min-h-0 flex-1 flex-col overflow-hidden [touch-action:pan-y]',\n    },\n    variants: {\n        // Sheet bounded inside a container (vs. the viewport): switch fixed → absolute.\n        constrained: {\n            true: {backdrop: 'absolute', sheet: 'absolute'},\n            false: {},\n        },\n        // Active drag: grabbing cursor + suppress selection.\n        dragging: {\n            true: {sheet: 'cursor-grabbing select-none'},\n            false: {},\n        },\n    },\n    defaultVariants: {\n        constrained: false,\n        dragging: false,\n    },\n});\n\nexport type BottomSheetRecipeProps = VariantProps<typeof bottomSheetRecipe>;\n\nexport interface BottomSheetProps {\n    /** Unique identifier for this sheet (drives stacking/z-index registry). */\n    id: string;\n    /** Whether the sheet is open. Bindable. */\n    open?: boolean;\n    /** Snap positions as viewport fractions (0–1), e.g. [0.25, 0.5, 0.9]. */\n    snapPoints?: number[];\n    /** Index into `snapPoints` to settle at when opening. */\n    defaultSnapPoint?: number;\n    /** Container element to constrain the sheet within (constrained mode). */\n    containerRef?: HTMLElement | null;\n    /** Element to apply the background scale effect to (defaults to containerRef). */\n    scaleTargetRef?: HTMLElement | null;\n    /** Constrain the sheet inside `containerRef` (absolute positioning). */\n    constrainToContainer?: boolean;\n    /** Scale/round the background target as the sheet opens (iOS effect). */\n    scaleBackground?: boolean;\n    /** Allow dragging down past the lowest snap point to close. */\n    dragToClose?: boolean;\n    /** Close when the backdrop is tapped. */\n    closeOnBackdrop?: boolean;\n    /** Show a close (X) button in the header (requires the `header` snippet). */\n    showCloseButton?: boolean;\n    /** Called after the sheet finishes closing. */\n    onClose?: () => void;\n    /** Called whenever the open state changes. */\n    onOpenChange?: (open: boolean) => void;\n    /** Main body content. */\n    children?: Snippet;\n    /** Header content; renders the header bar when set. */\n    header?: Snippet;\n}\n"
-    },
-    {
-      "path": "src/lib/components/bottom-sheet/BottomSheet.svelte",
-      "target": "BottomSheet.svelte",
-      "type": "svelte",
-      "content": "<script lang=\"ts\">\n    import {onDestroy, onMount} from 'svelte';\n    import {bottomSheetStore} from './bottomSheetStore.svelte.js';\n    import {bottomSheetRecipe, type BottomSheetProps} from './BottomSheet.recipe';\n    import {IconX} from \"$lib/internal/icons\";\n\n    // ============================================\n    // CONFIGURABLE CONSTANTS\n    // Adjust these values to customize the bottom sheet behavior\n    // ============================================\n\n    const CONFIG = {\n        // Scale effect for background container\n        scale: {\n            factor: 0.06,           // How much to scale down (6%)\n            borderRadius: 16,       // Border radius when scaled (px)\n            translateY: 20,         // Vertical offset when scaled (px)\n            origin: 'top center'    // Transform origin\n        },\n\n        // Backdrop\n        backdrop: {\n            maxOpacity: 0.5         // Maximum opacity when fully open\n        },\n\n        // Animation timing\n        animation: {\n            defaultDuration: 0.35,  // Default duration (seconds)\n            minDuration: 0.15,      // Min duration for fast swipes\n            maxDuration: 0.4,       // Max duration for slow gestures\n            easing: 'cubic-bezier(0.2, 0.9, 0.36, 1)' // iOS-style spring curve\n        },\n\n        // Gesture handling\n        gesture: {\n            velocityInfluence: 0.01,        // How much velocity affects snap selection\n            overdragExponent: 0.55,         // Overdrag resistance (lower = more resistance)\n            closeVelocityThreshold: 0.35,   // Velocity to trigger close (px/ms)\n            closeProgressThreshold: 0.35,   // Progress to trigger close (0-1)\n            maxLockedDrag: 60,              // Max drag when dragToClose disabled (px)\n            lockedDragResistance: 0.3,      // Resistance when dragToClose disabled\n            // Two-phase gesture recognition for interactive elements (iOS-style)\n            dragActivationThreshold: 10,    // Vertical px to commit to drag from interactive element\n            horizontalDeadZone: 1.2,        // If abs(dx)/abs(dy) > this, abort drag (let native horizontal win)\n            tapDistanceThreshold: 6         // Max total movement (px) to still count as a tap\n        }\n    } as const;\n\n    // ============================================\n    // COMPONENT PROPS\n    // ============================================\n\n    let {\n        id,\n        open = $bindable(false),\n        snapPoints = [0.9],\n        defaultSnapPoint = 0,\n        containerRef = null,\n        scaleTargetRef = null,\n        constrainToContainer = false,\n        scaleBackground = true,\n        dragToClose = true,\n        closeOnBackdrop = true,\n        showCloseButton = false,\n        onClose,\n        onOpenChange,\n        children,\n        header\n    }: BottomSheetProps = $props();\n\n    // ============================================\n    // INTERNAL STATE\n    // ============================================\n\n    // DOM references\n    let sheetRef = $state<HTMLElement | null>(null);\n    let contentRef = $state<HTMLElement | null>(null);\n    let backdropRef = $state<HTMLElement | null>(null);\n\n    // Sheet state\n    let isVisible = $state(false);\n    let isClosing = $state(false);\n    let isAnimating = $state(false);\n    let isDragging = $state(false);\n    let currentTranslateY = $state(0);\n    let sheetHeight = $state(0);\n    let transitionDuration = $state(`${CONFIG.animation.defaultDuration}s`);\n\n    // Drag tracking\n    let dragState = {\n        startY: 0,\n        startX: 0,\n        lastY: 0,\n        currentY: 0,\n        deltaY: 0,\n        startSnapPoint: 0,\n        activePointerId: null as number | null,\n        isTouchActive: false,\n        shouldPreventScroll: false,\n        history: [] as { y: number; time: number }[],\n        // Two-phase gesture recognition for interactive elements\n        isPending: false,           // Tracking started but not yet committed to drag\n        isInteractiveStart: false,  // Gesture began on an interactive element\n        committed: false,           // Gesture has been resolved as a drag\n        inScrollable: false         // Gesture began inside a [data-bottom-sheet-scroll] area\n    };\n\n    // Scroll state\n    let scrollableElement: HTMLElement | null = null;\n    let isScrolledToTop = true;\n\n    // Dimensions\n    let windowHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 800);\n    let containerHeight = $state(0);\n    let containerResizeObserver: ResizeObserver | null = null;\n    let prevOpen: boolean | null = null;\n\n    // ============================================\n    // COMPUTED VALUES\n    // ============================================\n\n    const r = $derived(bottomSheetRecipe({constrained: constrainToContainer, dragging: isDragging}));\n\n    const scaleTarget = $derived(scaleTargetRef ?? containerRef);\n    const effectiveHeight = $derived(\n        constrainToContainer && containerRef ? containerHeight : windowHeight\n    );\n    const maxSnapPoint = $derived(Math.max(...snapPoints));\n    const maxSheetHeight = $derived(maxSnapPoint * effectiveHeight);\n    const zIndex = $derived(bottomSheetStore.getZIndex(id));\n    const currentSnapPoint = $derived(snapPoints[defaultSnapPoint] ?? 0.5);\n    const allSnapPoints = $derived([0, ...snapPoints].sort((a, b) => a - b));\n\n    // ============================================\n    // LIFECYCLE\n    // ============================================\n\n    onMount(() => {\n        bottomSheetStore.register(id, {snapPoints, defaultSnapPoint, closeOnBackdrop});\n        window.addEventListener('resize', handleWindowResize);\n\n        return () => {\n            bottomSheetStore.unregister(id);\n            window.removeEventListener('resize', handleWindowResize);\n        };\n    });\n\n    onDestroy(() => {\n        containerResizeObserver?.disconnect();\n    });\n\n    // Watch containerRef for constrained mode\n    $effect(() => {\n        if (!containerRef || !constrainToContainer) return;\n\n        containerHeight = containerRef.clientHeight;\n        containerResizeObserver?.disconnect();\n\n        containerResizeObserver = new ResizeObserver(() => {\n            containerHeight = containerRef!.clientHeight;\n            if (isVisible && !isDragging && sheetRef) {\n                sheetHeight = sheetRef.offsetHeight;\n            }\n        });\n        containerResizeObserver.observe(containerRef);\n\n        return () => {\n            containerResizeObserver?.disconnect();\n            containerResizeObserver = null;\n        };\n    });\n\n    // Watch open prop changes\n    $effect(() => {\n        const shouldOpen = open;\n\n        if (prevOpen === null) {\n            prevOpen = shouldOpen;\n            if (shouldOpen) doOpen();\n            return;\n        }\n\n        if (shouldOpen && !prevOpen && !isVisible) {\n            prevOpen = true;\n            doOpen();\n        } else if (!shouldOpen && prevOpen && isVisible && !isClosing) {\n            prevOpen = false;\n            doClose();\n        }\n    });\n\n    // Setup scrollable element detection\n    $effect(() => {\n        if (!contentRef || !isVisible) return;\n\n        scrollableElement = contentRef.querySelector<HTMLElement>('[data-bottom-sheet-scroll]');\n        if (!scrollableElement) return;\n\n        const handleScroll = () => {\n            isScrolledToTop = scrollableElement!.scrollTop <= 1;\n        };\n        scrollableElement.addEventListener('scroll', handleScroll, {passive: true});\n        isScrolledToTop = scrollableElement.scrollTop <= 1;\n    });\n\n    // ============================================\n    // CORE FUNCTIONS\n    // ============================================\n\n    function handleWindowResize() {\n        if (isVisible && !isDragging) {\n            windowHeight = window.innerHeight;\n            if (sheetRef) sheetHeight = sheetRef.offsetHeight;\n        }\n    }\n\n    function recalculateDimensions() {\n        if (typeof window !== 'undefined') windowHeight = window.innerHeight;\n        if (containerRef && constrainToContainer) containerHeight = containerRef.clientHeight;\n        if (sheetRef) sheetHeight = sheetRef.offsetHeight;\n    }\n\n    function doOpen() {\n        isVisible = true;\n        isClosing = false;\n        isAnimating = true;\n        bottomSheetStore.open(id);\n\n        requestAnimationFrame(() => {\n            // sheetRef is bound by this rAF tick.\n            recalculateDimensions();\n            requestAnimationFrame(() => snapTo(currentSnapPoint, () => {\n                isAnimating = false;\n            }));\n        });\n    }\n\n    function doClose() {\n        if (isClosing) return;\n        isClosing = true;\n        isAnimating = true;\n\n        snapTo(0, () => {\n            isVisible = false;\n            isClosing = false;\n            isAnimating = false;\n            bottomSheetStore.close(id);\n            prevOpen = false;\n            open = false;\n            resetScaleTarget();\n            onClose?.();\n            onOpenChange?.(false);\n        });\n    }\n\n    function snapTo(progress: number, onComplete?: () => void) {\n        transitionDuration = calcDynamicDuration();\n        // Calculate translateY: sheet height is maxSnapPoint * effectiveHeight\n        // When progress = maxSnapPoint, translateY = 0 (fully visible)\n        // When progress = 0, translateY = sheetHeight (hidden)\n        const targetTranslateY = sheetHeight - (progress * effectiveHeight);\n        currentTranslateY = targetTranslateY;\n\n        if (sheetRef) {\n            sheetRef.style.translate = `0 ${targetTranslateY}px`;\n        }\n\n        updateBackdrop(progress);\n        updateScaleTarget(progress);\n        bottomSheetStore.updateProgress(id, Math.max(0, Math.min(1, progress)));\n\n        if (onComplete) {\n            setTimeout(onComplete, parseFloat(transitionDuration) * 1000);\n        }\n    }\n\n    // ============================================\n    // VISUAL UPDATES\n    // ============================================\n\n    function updateBackdrop(progress: number) {\n        if (!backdropRef) return;\n        const opacity = Math.max(0, Math.min(CONFIG.backdrop.maxOpacity, progress * CONFIG.backdrop.maxOpacity));\n        backdropRef.style.opacity = String(opacity);\n    }\n\n    function updateScaleTarget(progress: number, withTransition = true) {\n        if (!scaleTarget || !scaleBackground) return;\n\n        const p = Math.max(0, Math.min(1, progress));\n        const {factor, borderRadius, translateY, origin} = CONFIG.scale;\n\n        scaleTarget.style.scale = String(1 - factor * p);\n        scaleTarget.style.translate = `0 ${translateY * p}px`;\n        scaleTarget.style.borderRadius = `${borderRadius * p}px`;\n        scaleTarget.style.transformOrigin = origin;\n        scaleTarget.style.overflow = 'hidden';\n        scaleTarget.style.willChange = 'scale, translate, border-radius';\n\n        if (withTransition) {\n            const {easing} = CONFIG.animation;\n            scaleTarget.style.transition = `scale ${transitionDuration} ${easing}, translate ${transitionDuration} ${easing}, border-radius ${transitionDuration} ${easing}`;\n        }\n    }\n\n    function resetScaleTarget() {\n        if (!scaleTarget || !scaleBackground) return;\n\n        scaleTarget.style.scale = '';\n        scaleTarget.style.translate = '';\n        scaleTarget.style.borderRadius = '';\n        scaleTarget.style.transformOrigin = '';\n        scaleTarget.style.overflow = '';\n        scaleTarget.style.transition = '';\n        scaleTarget.style.willChange = '';\n    }\n\n    // ============================================\n    // GESTURE UTILITIES\n    // ============================================\n\n    function pushHistory(y: number) {\n        const now = performance.now();\n        dragState.history = dragState.history.filter(p => now - p.time <= 100);\n        dragState.history.push({y, time: now});\n    }\n\n    function clearHistory() {\n        dragState.history = [];\n    }\n\n    function calculateVelocity(): number {\n        const now = performance.now();\n        const recent = dragState.history.filter(p => now - p.time <= 100);\n\n        if (recent.length < 2) return 0;\n\n        const first = recent[0];\n        const last = recent[recent.length - 1];\n        if (!first || !last) return 0;\n        const dt = last.time - first.time;\n\n        return dt > 0 ? (last.y - first.y) / dt : 0;\n    }\n\n    function calcDynamicDuration(): string {\n        const now = performance.now();\n        const recent = dragState.history.filter(p => now - p.time <= 100);\n\n        if (recent.length < 2) return `${CONFIG.animation.defaultDuration}s`;\n\n        const first = recent[0];\n        const last = recent[recent.length - 1];\n        if (!first || !last) return `${CONFIG.animation.defaultDuration}s`;\n        const speed = Math.abs((last.y - first.y) / (last.time - first.time));\n        const {minDuration, maxDuration} = CONFIG.animation;\n\n        let duration = maxDuration - (speed / 2) * (maxDuration - minDuration);\n        duration = Math.max(minDuration, Math.min(maxDuration, duration));\n\n        return `${duration}s`;\n    }\n\n    function overdragResistance(value: number): number {\n        return value < 0 ? -Math.pow(Math.abs(value), CONFIG.gesture.overdragExponent) : value;\n    }\n\n    function applyLockedDragResistance(rawTranslateY: number): number {\n        // Base translateY when at start snap point: sheetHeight - (startSnapPoint * effectiveHeight)\n        const baseTranslateY = sheetHeight - (dragState.startSnapPoint * effectiveHeight);\n        const dragDistance = rawTranslateY - baseTranslateY;\n\n        if (dragDistance > 0) {\n            const {lockedDragResistance, maxLockedDrag} = CONFIG.gesture;\n            const resistedDrag = Math.min(dragDistance * lockedDragResistance, maxLockedDrag);\n            return baseTranslateY + resistedDrag;\n        }\n        return rawTranslateY;\n    }\n\n    function findNearestSnapPoint(translateY: number, velocityInfluence = 0): number {\n        // Calculate progress: translateY = sheetHeight - (progress * effectiveHeight)\n        // So: progress = (sheetHeight - translateY) / effectiveHeight\n        const currentProgress = (sheetHeight - translateY) / effectiveHeight;\n        const targetProgress = currentProgress + velocityInfluence;\n\n        return allSnapPoints.reduce((nearest, sp) =>\n                Math.abs(targetProgress - sp) < Math.abs(targetProgress - nearest) ? sp : nearest\n            , allSnapPoints[0] ?? 0);\n    }\n\n    function determineSnapPoint(): number {\n        // Calculate progress: translateY = sheetHeight - (progress * effectiveHeight)\n        // So: progress = (sheetHeight - translateY) / effectiveHeight\n        const currentProgress = (sheetHeight - currentTranslateY) / effectiveHeight;\n        const velocity = calculateVelocity();\n\n        if (!dragToClose) {\n            return dragState.startSnapPoint;\n        }\n\n        const {closeVelocityThreshold, closeProgressThreshold, velocityInfluence} = CONFIG.gesture;\n\n        // Fast swipe handling\n        if (Math.abs(velocity) > closeVelocityThreshold) {\n            if (velocity > 0) {\n                // Swipe down - close or go to lower snap\n                const lowerSnaps = allSnapPoints.filter(sp => sp < dragState.startSnapPoint);\n                const lowest = lowerSnaps[lowerSnaps.length - 1];\n                if (lowest !== undefined && currentProgress >= lowest * 0.5) {\n                    return lowest;\n                }\n                return 0;\n            } else {\n                // Swipe up - go to higher snap\n                const higherSnaps = allSnapPoints.filter(sp => sp > currentProgress);\n                return higherSnaps[0] ?? Math.max(...snapPoints);\n            }\n        }\n\n        // Check close threshold\n        const progressDrop = dragState.startSnapPoint - currentProgress;\n        if (progressDrop > closeProgressThreshold) {\n            return 0;\n        }\n\n        // Velocity is in px/ms, convert to progress units (divide by effectiveHeight, multiply by 1000 for scale)\n        const velocityInProgressUnits = -velocity / effectiveHeight * 1000;\n        return findNearestSnapPoint(currentTranslateY, velocityInProgressUnits * velocityInfluence);\n    }\n\n    // ============================================\n    // TOUCH EVENT HANDLERS\n    // ============================================\n\n    function isInDraggableArea(target: HTMLElement): boolean {\n        return !!(target.closest('[data-bottom-sheet-handle]'));\n    }\n\n    function isInteractive(target: HTMLElement): boolean {\n        return !!target.closest('button, a, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])');\n    }\n\n    function shouldIgnoreDrag(target: HTMLElement): boolean {\n        return !!target.closest('[data-bottom-sheet-no-drag]');\n    }\n\n    /**\n     * Install a one-shot capture-phase click listener to suppress the ghost click\n     * that fires after a committed drag from an interactive element.\n     */\n    function suppressNextClick() {\n        if (!sheetRef) return;\n        const handler = (e: Event) => {\n            e.preventDefault();\n            e.stopPropagation();\n            sheetRef?.removeEventListener('click', handler, true);\n        };\n        sheetRef.addEventListener('click', handler, true);\n        // Safety: auto-remove after a short delay if click never fires\n        setTimeout(() => sheetRef?.removeEventListener('click', handler, true), 300);\n    }\n\n    /**\n     * Reset all pending/two-phase gesture state fields.\n     */\n    function resetPendingState() {\n        dragState.isPending = false;\n        dragState.isInteractiveStart = false;\n        dragState.committed = false;\n        dragState.inScrollable = false;\n    }\n\n    /**\n     * Initialize common drag tracking fields shared by both touch and pointer paths.\n     */\n    function initDragTracking(clientX: number, clientY: number) {\n        dragState.startX = clientX;\n        dragState.startY = clientY;\n        dragState.lastY = clientY;\n        dragState.currentY = currentTranslateY;\n        dragState.deltaY = 0;\n        dragState.startSnapPoint = Math.round((sheetHeight - currentTranslateY) / effectiveHeight * 100) / 100;\n        clearHistory();\n        pushHistory(clientY);\n    }\n\n    /**\n     * Commit to dragging: transition from pending state to active drag.\n     * Re-anchors startY/currentY to the current position to prevent visual jump.\n     */\n    function commitToDrag(clientY: number) {\n        dragState.isPending = false;\n        dragState.committed = true;\n        // Re-anchor to current position so sheet doesn't jump\n        dragState.startY = clientY;\n        dragState.currentY = currentTranslateY;\n        clearHistory();\n        pushHistory(clientY);\n\n        transitionDuration = '0s';\n        if (scaleTarget) scaleTarget.style.transition = 'none';\n        isDragging = true;\n    }\n\n    /**\n     * Check if the pending gesture should be resolved.\n     * Returns: 'drag' if vertical threshold exceeded and should drag sheet,\n     *          'abort' if horizontal wins or user wants to scroll content,\n     *          'pending' if undecided.\n     */\n    function resolvePendingGesture(clientX: number, clientY: number): 'drag' | 'abort' | 'pending' {\n        const {dragActivationThreshold, horizontalDeadZone} = CONFIG.gesture;\n        const absX = Math.abs(clientX - dragState.startX);\n        const absY = Math.abs(clientY - dragState.startY);\n        const deltaY = clientY - dragState.startY; // positive = finger moving down\n\n        // Horizontal threshold exceeded — let native behavior handle it (slider, scroll, etc.)\n        if (absX >= dragActivationThreshold) {\n            return 'abort';\n        }\n\n        // Vertical threshold exceeded and angle is more vertical than horizontal\n        if (absY >= dragActivationThreshold && absY > absX * horizontalDeadZone) {\n            // Inside a scrollable area: only commit to drag if pulling DOWN from top (dismiss gesture).\n            // If swiping UP (to scroll content down), abort and let native scroll work.\n            if (dragState.inScrollable) {\n                if (scrollableElement) isScrolledToTop = scrollableElement.scrollTop <= 1;\n                if (deltaY > 0 && isScrolledToTop) {\n                    // Pulling down from top → drag sheet (dismiss)\n                    return 'drag';\n                }\n                // Swiping up, or not at top → let native scroll handle it\n                return 'abort';\n            }\n            return 'drag';\n        }\n\n        return 'pending';\n    }\n\n    function handleTouchStart(e: TouchEvent) {\n        if (dragState.isTouchActive) return;\n\n        const target = e.target as HTMLElement;\n        const inDraggableArea = isInDraggableArea(target);\n        const inScrollable = !!target.closest('[data-bottom-sheet-scroll]');\n        const isInteractiveTarget = isInteractive(target);\n\n        // data-bottom-sheet-no-drag: treat as fully default element — no tracking at all\n        if (shouldIgnoreDrag(target) && !inDraggableArea) {\n            return;\n        }\n\n        if (scrollableElement) isScrolledToTop = scrollableElement.scrollTop <= 1;\n\n        if (inScrollable && !isScrolledToTop && !inDraggableArea) {\n            dragState.shouldPreventScroll = false;\n            return;\n        }\n\n        // Initialize tracking for all cases\n        const touch = e.touches[0];\n        if (!touch) return;\n        dragState.isTouchActive = true;\n        initDragTracking(touch.clientX, touch.clientY);\n\n        // Interactive element (button, input, slider, etc.) NOT in draggable area:\n        // Enter pending state — don't commit to drag yet, let threshold decide\n        if (isInteractiveTarget && !inDraggableArea) {\n            dragState.isPending = true;\n            dragState.isInteractiveStart = true;\n            dragState.committed = false;\n            dragState.inScrollable = inScrollable;\n            dragState.shouldPreventScroll = true; // Will be used if we commit\n\n            // Do NOT set isDragging, transitionDuration, or disable transitions\n            // Do NOT call e.preventDefault() — allow native touch behavior until committed\n            return;\n        }\n\n        // Non-interactive element: immediately commit to dragging (existing behavior)\n        dragState.isPending = false;\n        dragState.isInteractiveStart = false;\n        dragState.committed = true;\n        dragState.shouldPreventScroll = !(inScrollable && isScrolledToTop && !inDraggableArea);\n\n        transitionDuration = '0s';\n        if (scaleTarget) scaleTarget.style.transition = 'none';\n        isDragging = true;\n    }\n\n    function handleTouchMove(e: TouchEvent) {\n        if (!dragState.isTouchActive) return;\n\n        const touch = e.touches[0];\n        if (!touch) return;\n        const clientY = touch.clientY;\n        const clientX = touch.clientX;\n\n        // ── Two-phase: resolve pending gesture from interactive element ──\n        if (dragState.isPending) {\n            pushHistory(clientY);\n            const result = resolvePendingGesture(clientX, clientY);\n\n            if (result === 'drag') {\n                // Vertical intent wins → commit to drag\n                commitToDrag(clientY);\n                dragState.shouldPreventScroll = true;\n                e.preventDefault();\n                return; // First real drag frame happens on next move\n            }\n            if (result === 'abort') {\n                // Horizontal intent wins → abort, let native behavior (slider, etc.)\n                dragState.isPending = false;\n                dragState.committed = false;\n                dragState.isTouchActive = false;\n                dragState.isInteractiveStart = false;\n                return;\n            }\n            // Still pending — do nothing, let native behavior continue\n            return;\n        }\n\n        // ── Normal drag logic (committed) ──\n        const moveDelta = clientY - dragState.startY;\n        dragState.deltaY = clientY - dragState.lastY;\n        dragState.lastY = clientY;\n        pushHistory(clientY);\n\n        if (scrollableElement) isScrolledToTop = scrollableElement.scrollTop <= 1;\n        if (isScrolledToTop && moveDelta > 0) dragState.shouldPreventScroll = true;\n        if (!dragState.shouldPreventScroll) return;\n\n        e.preventDefault();\n\n        let translateY = dragState.currentY + moveDelta;\n        if (translateY < 0) translateY = overdragResistance(translateY);\n        if (!dragToClose) translateY = applyLockedDragResistance(translateY);\n        translateY = Math.min(translateY, sheetHeight);\n\n        currentTranslateY = translateY;\n        if (sheetRef) sheetRef.style.translate = `0 ${translateY}px`;\n\n        const progress = Math.max(0, Math.min(maxSnapPoint, (sheetHeight - translateY) / effectiveHeight));\n        updateBackdrop(progress);\n        updateScaleTarget(progress, false);\n        bottomSheetStore.updateProgress(id, progress);\n    }\n\n    function handleTouchEnd(e: TouchEvent) {\n        if (e.touches.length > 0 || !dragState.isTouchActive) return;\n\n        dragState.isTouchActive = false;\n\n        // ── Two-phase: pending never resolved (tap) → let native click fire ──\n        if (dragState.isPending) {\n            resetPendingState();\n            return;\n        }\n\n        // ── Committed drag from interactive element → suppress ghost click ──\n        if (dragState.committed && dragState.isInteractiveStart) {\n            suppressNextClick();\n        }\n        resetPendingState();\n\n        if (!dragState.shouldPreventScroll) {\n            isDragging = false;\n            return;\n        }\n\n        isDragging = false;\n        dragState.shouldPreventScroll = false;\n\n        const nearestSnap = determineSnapPoint();\n\n        if (nearestSnap === 0 && dragToClose) {\n            doClose();\n        } else {\n            snapTo(nearestSnap > 0 ? nearestSnap : dragState.startSnapPoint, () => {\n                if (!open) {\n                    prevOpen = true;\n                    open = true;\n                    onOpenChange?.(true);\n                }\n            });\n        }\n    }\n\n    // ============================================\n    // POINTER EVENT HANDLERS (Desktop)\n    // ============================================\n\n    function handlePointerDown(e: PointerEvent) {\n        if (e.pointerType === 'touch' || e.button !== 0 || dragState.activePointerId !== null) return;\n\n        const target = e.target as HTMLElement;\n        const inDraggableArea = isInDraggableArea(target);\n        const inScrollable = !!target.closest('[data-bottom-sheet-scroll]');\n        const isInteractiveTarget = isInteractive(target);\n        const shouldIgnoreDragTarget = shouldIgnoreDrag(target);\n\n        // data-bottom-sheet-no-drag: treat as fully default element — no tracking at all\n        if (shouldIgnoreDragTarget && !inDraggableArea) return;\n\n        if (scrollableElement) isScrolledToTop = scrollableElement.scrollTop <= 1;\n        if (inScrollable && !isScrolledToTop && !inDraggableArea) return;\n\n        dragState.activePointerId = e.pointerId;\n        initDragTracking(e.clientX, e.clientY);\n\n        // Interactive element NOT in draggable area:\n        // Enter pending state — don't commit yet, preserve native focus/click\n        if (isInteractiveTarget && !inDraggableArea) {\n            dragState.isPending = true;\n            dragState.isInteractiveStart = true;\n            dragState.committed = false;\n            dragState.inScrollable = inScrollable;\n\n            // Do NOT call e.preventDefault() — preserve focus for inputs\n            // Do NOT call setPointerCapture — allow native hover/click behavior\n            // Do NOT set isDragging or disable transitions\n            return;\n        }\n\n        // Non-interactive element: immediately commit to dragging\n        dragState.isPending = false;\n        dragState.isInteractiveStart = false;\n        dragState.committed = true;\n\n        transitionDuration = '0s';\n        if (scaleTarget) scaleTarget.style.transition = 'none';\n        sheetRef?.setPointerCapture(e.pointerId);\n        isDragging = true;\n        e.preventDefault();\n    }\n\n    function handlePointerMove(e: PointerEvent) {\n        if (e.pointerType === 'touch' || dragState.activePointerId !== e.pointerId) return;\n        if (!isDragging && !dragState.isPending) return;\n\n        const clientY = e.clientY;\n        const clientX = e.clientX;\n\n        // ── Two-phase: resolve pending gesture from interactive element ──\n        if (dragState.isPending) {\n            pushHistory(clientY);\n            const result = resolvePendingGesture(clientX, clientY);\n\n            if (result === 'drag') {\n                // Vertical intent wins → commit to drag\n                commitToDrag(clientY);\n                sheetRef?.setPointerCapture(e.pointerId);\n                e.preventDefault();\n                return; // First real drag frame happens on next move\n            }\n            if (result === 'abort') {\n                // Horizontal intent wins → abort, let native behavior\n                dragState.isPending = false;\n                dragState.committed = false;\n                dragState.activePointerId = null;\n                dragState.isInteractiveStart = false;\n                return;\n            }\n            // Still pending — do nothing\n            return;\n        }\n\n        // ── Normal drag logic (committed) ──\n        dragState.deltaY = clientY - dragState.lastY;\n        dragState.lastY = clientY;\n        pushHistory(clientY);\n\n        let translateY = dragState.currentY + clientY - dragState.startY;\n        if (translateY < 0) translateY = overdragResistance(translateY);\n        if (!dragToClose) translateY = applyLockedDragResistance(translateY);\n        translateY = Math.min(translateY, sheetHeight);\n\n        currentTranslateY = translateY;\n        if (sheetRef) sheetRef.style.translate = `0 ${translateY}px`;\n\n        const progress = Math.max(0, Math.min(maxSnapPoint, (sheetHeight - translateY) / effectiveHeight));\n        updateBackdrop(progress);\n        updateScaleTarget(progress, false);\n        bottomSheetStore.updateProgress(id, progress);\n\n        e.preventDefault();\n    }\n\n    function handlePointerUp(e: PointerEvent) {\n        if (e.pointerType === 'touch' || dragState.activePointerId !== e.pointerId) return;\n\n        try {\n            sheetRef?.releasePointerCapture(e.pointerId);\n        } catch {\n        }\n        dragState.activePointerId = null;\n\n        // ── Two-phase: pending never resolved (tap) → let native click fire ──\n        if (dragState.isPending) {\n            resetPendingState();\n            return;\n        }\n\n        // ── Committed drag from interactive element → suppress ghost click ──\n        if (dragState.committed && dragState.isInteractiveStart) {\n            suppressNextClick();\n        }\n        resetPendingState();\n\n        if (!isDragging) return;\n        isDragging = false;\n\n        const nearestSnap = determineSnapPoint();\n\n        if (nearestSnap === 0 && dragToClose) {\n            doClose();\n        } else {\n            snapTo(nearestSnap > 0 ? nearestSnap : dragState.startSnapPoint, () => {\n                if (!open) {\n                    prevOpen = true;\n                    open = true;\n                    onOpenChange?.(true);\n                }\n            });\n        }\n    }\n\n    function handlePointerCancel(e: PointerEvent) {\n        if (e.pointerType === 'touch' || dragState.activePointerId !== e.pointerId) return;\n\n        try {\n            sheetRef?.releasePointerCapture(e.pointerId);\n        } catch {\n        }\n        dragState.activePointerId = null;\n\n        // If pending, just reset — nothing visual happened\n        if (dragState.isPending) {\n            resetPendingState();\n            return;\n        }\n        resetPendingState();\n\n        if (!isDragging) return;\n        isDragging = false;\n\n        snapTo(findNearestSnapPoint(currentTranslateY, 0));\n    }\n\n    function handleCloseButtonClick(e: MouseEvent) {\n        e.stopPropagation();\n        doClose();\n    }\n\n    function handleBackdropClick(e: PointerEvent) {\n        if (!closeOnBackdrop || e.target !== backdropRef || isDragging || isAnimating) return;\n        doClose();\n    }\n\n    function handleKeydown(e: KeyboardEvent) {\n        if (e.key === 'Escape' && isVisible && bottomSheetStore.isTopmost(id)) {\n            e.preventDefault();\n            doClose();\n        }\n    }\n\n    // Svelte action for touch events\n    function touchEvents(node: HTMLElement) {\n        node.addEventListener('touchstart', handleTouchStart, {passive: false});\n        node.addEventListener('touchmove', handleTouchMove, {passive: false});\n        node.addEventListener('touchend', handleTouchEnd, {passive: true});\n\n        return {\n            destroy() {\n                node.removeEventListener('touchstart', handleTouchStart);\n                node.removeEventListener('touchmove', handleTouchMove);\n                node.removeEventListener('touchend', handleTouchEnd);\n            }\n        };\n    }\n</script>\n\n<svelte:window onkeydown={handleKeydown}/>\n\n{#if isVisible}\n    <!-- Backdrop -->\n    <!-- svelte-ignore a11y_no_static_element_interactions -->\n    <div\n            bind:this={backdropRef}\n            class={r.backdrop()}\n            style:z-index={zIndex}\n            style:--transition-duration={transitionDuration}\n            onpointerup={handleBackdropClick}\n    ></div>\n\n    <!-- Sheet -->\n    <!-- svelte-ignore a11y_no_static_element_interactions -->\n    <div\n            bind:this={sheetRef}\n            class={r.sheet()}\n            style:z-index={zIndex + 1}\n            style:height=\"{maxSheetHeight}px\"\n            style:--transition-duration={transitionDuration}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabindex={-1}\n            use:touchEvents\n            onpointerdown={handlePointerDown}\n            onpointermove={handlePointerMove}\n            onpointerup={handlePointerUp}\n            onpointercancel={handlePointerCancel}\n    >\n        <!-- Drag Handle -->\n        <div class={r.handle()} data-bottom-sheet-handle>\n            <div class={r.handleBar()}></div>\n        </div>\n\n        <!-- Header -->\n        {#if header}\n            <div class={r.header()} data-bottom-sheet-header>\n                {@render header()}\n                {#if showCloseButton}\n                    <button\n                            class={r.closeButton()}\n                            data-bottom-sheet-close\n                            onclick={handleCloseButtonClick}\n                            aria-label=\"Close\"\n                            type=\"button\"\n                    >\n                        <IconX class=\"size-4\"/>\n                    </button>\n                {/if}\n            </div>\n        {/if}\n\n        <!-- Content -->\n        <div bind:this={contentRef} class={r.content()} data-bottom-sheet-content>\n            {#if children}\n                {@render children()}\n            {/if}\n        </div>\n    </div>\n{/if}\n\n<style>\n    /* Consumer-marked scroll region inside the sheet body. */\n    [data-bottom-sheet-content] :global([data-bottom-sheet-scroll]) {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        overscroll-behavior: contain;\n        -webkit-overflow-scrolling: touch;\n        min-height: 0;\n        touch-action: pan-y;\n    }\n\n    /* Suppress native gestures on header children so the drag is captured. */\n    [data-bottom-sheet-header] :global(*) {\n        touch-action: none;\n        user-select: none;\n    }\n</style>\n"
-    },
-    {
-      "path": "src/lib/components/bottom-sheet/bottomSheetStore.svelte.ts",
-      "target": "bottomSheetStore.svelte.ts",
-      "type": "ts",
-      "content": "/**\n * Bottom Sheet store — Svelte 5 runes.\n *\n * A small singleton that tracks the stack of open bottom sheets so multiple\n * sheets can layer correctly (z-index), report drag progress, and resolve which\n * sheet is topmost (for Escape handling). Sheets register on mount and push/pop\n * themselves from the stack as they open/close. Exposed publicly so apps can\n * drive sheets programmatically (open/close/closeTop) in addition to `bind:open`.\n */\n\nexport interface BottomSheetConfig {\n    id: string;\n    snapPoints: number[];\n    defaultSnapPoint: number;\n    closeOnBackdrop: boolean;\n}\n\nexport interface SheetStackItem {\n    id: string;\n    zIndex: number;\n    progress: number;\n    config: BottomSheetConfig;\n}\n\nconst BASE_Z_INDEX = 1000;\nconst Z_INDEX_INCREMENT = 10;\n\nfunction createBottomSheetStore() {\n    // Stack of active sheets (bottom to top)\n    let sheetStack = $state<SheetStackItem[]>([]);\n\n    // Registry of all sheet configs\n    let registry = $state<Map<string, BottomSheetConfig>>(new Map());\n\n    // Container refs for scale effect\n    let containerRefs = $state<Map<string, HTMLElement>>(new Map());\n\n    /**\n     * Register a sheet with its config\n     */\n    function register(id: string, config: Omit<BottomSheetConfig, 'id'>): void {\n        registry.set(id, {id, ...config});\n    }\n\n    /**\n     * Unregister a sheet\n     */\n    function unregister(id: string): void {\n        registry.delete(id);\n        containerRefs.delete(id);\n        // Remove from stack if present\n        sheetStack = sheetStack.filter(s => s.id !== id);\n    }\n\n    /**\n     * Open a sheet by ID\n     */\n    function open(id: string): void {\n        const config = registry.get(id);\n        if (!config) {\n            // Sheet was not registered (component not mounted yet) — ignore.\n            return;\n        }\n\n        // Check if already in stack\n        if (sheetStack.some(s => s.id === id)) {\n            return;\n        }\n\n        // Calculate z-index based on stack position\n        const zIndex = BASE_Z_INDEX + (sheetStack.length * Z_INDEX_INCREMENT);\n\n        sheetStack = [...sheetStack, {\n            id,\n            zIndex,\n            progress: 0,\n            config\n        }];\n    }\n\n    /**\n     * Close a sheet by ID\n     */\n    function close(id: string): void {\n        sheetStack = sheetStack.filter(s => s.id !== id);\n        // Recalculate z-indices for remaining sheets\n        sheetStack = sheetStack.map((sheet, index) => ({\n            ...sheet,\n            zIndex: BASE_Z_INDEX + (index * Z_INDEX_INCREMENT)\n        }));\n    }\n\n    /**\n     * Close the topmost sheet\n     */\n    function closeTop(): void {\n        const top = sheetStack[sheetStack.length - 1];\n        if (top) {\n            close(top.id);\n        }\n    }\n\n    /**\n     * Update progress for a sheet (0-1)\n     */\n    function updateProgress(id: string, progress: number): void {\n        const index = sheetStack.findIndex(s => s.id === id);\n        const sheet = sheetStack[index];\n        if (sheet) {\n            sheet.progress = Math.max(0, Math.min(1, progress));\n        }\n    }\n\n    /**\n     * Get z-index for a sheet\n     */\n    function getZIndex(id: string): number {\n        const sheet = sheetStack.find(s => s.id === id);\n        return sheet?.zIndex ?? BASE_Z_INDEX;\n    }\n\n    /**\n     * Check if a sheet is open\n     */\n    function isOpen(id: string): boolean {\n        return sheetStack.some(s => s.id === id);\n    }\n\n    /**\n     * Check if a sheet is the topmost\n     */\n    function isTopmost(id: string): boolean {\n        return sheetStack[sheetStack.length - 1]?.id === id;\n    }\n\n    /**\n     * Get progress for a sheet\n     */\n    function getProgress(id: string): number {\n        const sheet = sheetStack.find(s => s.id === id);\n        return sheet?.progress ?? 0;\n    }\n\n    /**\n     * Attach container ref for scale effect\n     */\n    function attachContainer(sheetId: string, ref: HTMLElement): void {\n        containerRefs.set(sheetId, ref);\n    }\n\n    /**\n     * Get container ref for a sheet\n     */\n    function getContainer(sheetId: string): HTMLElement | undefined {\n        return containerRefs.get(sheetId);\n    }\n\n    /**\n     * Get combined backdrop opacity from all sheets\n     */\n    function getCombinedBackdropOpacity(): number {\n        // Use the topmost sheet's progress for backdrop\n        const top = sheetStack[sheetStack.length - 1];\n        return top ? top.progress * 0.5 : 0;\n    }\n\n    /**\n     * Get the current stack\n     */\n    function getStack(): SheetStackItem[] {\n        return sheetStack;\n    }\n\n    return {\n        get stack() { return sheetStack; },\n        get hasOpenSheets() { return sheetStack.length > 0; },\n\n        register,\n        unregister,\n        open,\n        close,\n        closeTop,\n        updateProgress,\n        getZIndex,\n        isOpen,\n        isTopmost,\n        getProgress,\n        attachContainer,\n        getContainer,\n        getCombinedBackdropOpacity,\n        getStack\n    };\n}\n\n// Export singleton instance\nexport const bottomSheetStore = createBottomSheetStore();\n"
-    },
-    {
-      "path": "src/lib/components/bottom-sheet/index.ts",
-      "target": "index.ts",
-      "type": "ts",
-      "content": "export {default as BottomSheet} from './BottomSheet.svelte'\nexport {bottomSheetStore} from './bottomSheetStore.svelte.js'\nexport {bottomSheetRecipe} from './BottomSheet.recipe'\nexport type {BottomSheetRecipeProps, BottomSheetProps} from './BottomSheet.recipe'\nexport type {BottomSheetConfig, SheetStackItem} from './bottomSheetStore.svelte.js'\n"
-    }
-  ],
-  "dependencies": [
-    "tailwind-variants"
-  ],
-  "peerDependencies": [
-    "svelte"
-  ],
-  "registryDependencies": [],
-  "sharedModules": {
-    "utils": false,
-    "icons": true,
-    "hooks": false
-  },
-  "exports": [
-    "BottomSheet",
-    "bottomSheetStore",
-    "bottomSheetRecipe"
-  ]
-}
+{
+  "$schema": "https://tera-system-ui/registry-item.schema.json",
+  "name": "bottom-sheet",
+  "type": "registry:component",
+  "description": "Draggable iOS-style bottom sheet with snap points, container-scale effect, and stacking.",
+  "recipe": "src/lib/components/bottom-sheet/BottomSheet.recipe.ts",
+  "files": [
+    {
+      "path": "src/lib/components/bottom-sheet/BottomSheet.recipe.ts",
+      "target": "BottomSheet.recipe.ts",
+      "type": "recipe",
+      "content": "import {tv, type VariantProps} from \"tailwind-variants\";\nimport type {Snippet} from \"svelte\";\n\n/**\n * BottomSheet recipe — the canonical styled layer for the draggable sheet.\n *\n * An iOS-style bottom sheet with snap points, gesture dragging, container-scale\n * effect, and stacking (custom behavior — not bits-ui). The recipe is slotted by\n * role — backdrop / sheet / handle / handleBar / header / closeButton / content —\n * so an app can restyle any part independently. Only the *themeable, static*\n * surface lives here; the per-frame transforms (translate / scale / opacity) are\n * driven imperatively from the component and the runtime transition duration is\n * passed through the `--transition-duration` CSS var.\n *\n * The `constrained` variant switches fixed → absolute positioning when the sheet\n * is bounded inside a container; `dragging` carries the grabbing cursor.\n *\n * Primary customization surface: extend with `tv({ extend: bottomSheetRecipe, ... })`\n * in typed code. Lighter rung: the per-component CSS var (--tera-bottom-sheet-radius)\n * retunes the top corner radius with no code change; it defaults to the prior\n * literal value inline.\n */\nexport const bottomSheetRecipe = tv({\n    slots: {\n        backdrop: 'fixed inset-0 bg-black opacity-0 touch-none [will-change:opacity] [-webkit-tap-highlight-color:transparent] transition-opacity duration-[var(--transition-duration,0.35s)] ease-out',\n        sheet: 'fixed bottom-0 left-0 right-0 flex flex-col overflow-visible bg-surface-raised rounded-t-[var(--tera-bottom-sheet-radius,12px)] [will-change:translate] [translate:0_100%] [transform:translateZ(0)] [backface-visibility:hidden] transition-[translate] duration-[var(--transition-duration,0.35s)] ease-[cubic-bezier(0.2,0.9,0.36,1)]',\n        handle: 'flex shrink-0 items-center justify-center px-4 pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing',\n        handleBar: 'h-[5px] w-9 rounded-[2.5px] bg-text-tertiary',\n        header: 'relative shrink-0 cursor-grab touch-none select-none border-b border-border-default px-4 pt-1 pb-3 active:cursor-grabbing',\n        closeButton: 'absolute right-2 top-[calc(50%-4px)] flex h-8 w-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0 text-text-tertiary [touch-action:manipulation] [-webkit-tap-highlight-color:transparent] transition-colors hover:bg-surface-hover hover:text-text-primary active:bg-surface-hover',\n        content: 'flex min-h-0 flex-1 flex-col overflow-hidden [touch-action:pan-y]',\n    },\n    variants: {\n        // Sheet bounded inside a container (vs. the viewport): switch fixed → absolute.\n        constrained: {\n            true: {backdrop: 'absolute', sheet: 'absolute'},\n            false: {},\n        },\n        // Active drag: grabbing cursor + suppress selection.\n        dragging: {\n            true: {sheet: 'cursor-grabbing select-none'},\n            false: {},\n        },\n    },\n    defaultVariants: {\n        constrained: false,\n        dragging: false,\n    },\n});\n\nexport type BottomSheetRecipeProps = VariantProps<typeof bottomSheetRecipe>;\n\nexport interface BottomSheetProps {\n    /** Unique identifier for this sheet (drives stacking/z-index registry). */\n    id: string;\n    /** Whether the sheet is open. Bindable. */\n    open?: boolean;\n    /** Snap positions as viewport fractions (0–1), e.g. [0.25, 0.5, 0.9]. */\n    snapPoints?: number[];\n    /** Index into `snapPoints` to settle at when opening. */\n    defaultSnapPoint?: number;\n    /** Container element to constrain the sheet within (constrained mode). */\n    containerRef?: HTMLElement | null;\n    /** Element to apply the background scale effect to (defaults to containerRef). */\n    scaleTargetRef?: HTMLElement | null;\n    /** Constrain the sheet inside `containerRef` (absolute positioning). */\n    constrainToContainer?: boolean;\n    /** Scale/round the background target as the sheet opens (iOS effect). */\n    scaleBackground?: boolean;\n    /** Allow dragging down past the lowest snap point to close. */\n    dragToClose?: boolean;\n    /** Close when the backdrop is tapped. */\n    closeOnBackdrop?: boolean;\n    /** Show a close (X) button in the header (requires the `header` snippet). */\n    showCloseButton?: boolean;\n    /** Called after the sheet finishes closing. */\n    onClose?: () => void;\n    /** Called whenever the open state changes. */\n    onOpenChange?: (open: boolean) => void;\n    /** Main body content. */\n    children?: Snippet;\n    /** Header content; renders the header bar when set. */\n    header?: Snippet;\n}\n"
+    },
+    {
+      "path": "src/lib/components/bottom-sheet/BottomSheet.svelte",
+      "target": "BottomSheet.svelte",
+      "type": "svelte",
+      "content": "<script lang=\"ts\">\n    import {onDestroy, onMount} from 'svelte';\n    import {bottomSheetStore} from './bottomSheetStore.svelte.js';\n    import {bottomSheetRecipe, type BottomSheetProps} from './BottomSheet.recipe';\n    import {IconX} from \"$lib/internal/icons\";\n\n    // ============================================\n    // CONFIGURABLE CONSTANTS\n    // Adjust these values to customize the bottom sheet behavior\n    // ============================================\n\n    const CONFIG = {\n        // Scale effect for background container\n        scale: {\n            factor: 0.06,           // How much to scale down (6%)\n            borderRadius: 16,       // Border radius when scaled (px)\n            translateY: 20,         // Vertical offset when scaled (px)\n            origin: 'top center'    // Transform origin\n        },\n\n        // Backdrop\n        backdrop: {\n            maxOpacity: 0.5         // Maximum opacity when fully open\n        },\n\n        // Spring physics for open / close / settle. iOS-style motion is spring-based,\n        // not fixed-duration easing: `response` is the approximate settle time (s) and\n        // `damping` is the damping ratio (1 = critical/no bounce, <1 adds a little life).\n        // Duration is emergent, and — crucially — the spring is seeded with the finger's\n        // release velocity so the motion continues seamlessly instead of restarting.\n        // Tuned snappy to match native iOS; `close` is underdamped and finalizes the\n        // instant it reaches offscreen (see animationFrame) so there is no lingering tail.\n        animation: {\n            open: {response: 0.4, damping: 0.86},   // present — quick, no bounce\n            close: {response: 0.26, damping: 0.85}, // dismiss — fast, finalizes on arrival\n            snap: {response: 0.32, damping: 0.84},  // moving between snap points\n            restDistance: 0.5,    // px from target to consider a visible spring settled\n            restVelocity: 40,     // px/s below which a visible spring is considered at rest\n            maxFrameDt: 0.064     // clamp per-frame dt after tab-switch stalls (s)\n        },\n\n        // Gesture handling\n        gesture: {\n            velocityInfluence: 0.01,        // How much velocity affects snap selection\n            closeVelocityThreshold: 0.35,   // Velocity to trigger close (px/ms)\n            closeProgressThreshold: 0.35,   // Progress to trigger close (0-1)\n            maxLockedDrag: 60,              // Max drag when dragToClose disabled (px)\n            lockedDragResistance: 0.3,      // Resistance when dragToClose disabled\n            // Two-phase gesture recognition for interactive elements (iOS-style)\n            dragActivationThreshold: 10,    // Vertical px to commit to drag from interactive element\n            horizontalDeadZone: 1.2,        // If abs(dx)/abs(dy) > this, abort drag (let native horizontal win)\n            tapDistanceThreshold: 6         // Max total movement (px) to still count as a tap\n        }\n    } as const;\n\n    // ============================================\n    // COMPONENT PROPS\n    // ============================================\n\n    let {\n        id,\n        open = $bindable(false),\n        snapPoints = [0.9],\n        defaultSnapPoint = 0,\n        containerRef = null,\n        scaleTargetRef = null,\n        constrainToContainer = false,\n        scaleBackground = true,\n        dragToClose = true,\n        closeOnBackdrop = true,\n        showCloseButton = false,\n        onClose,\n        onOpenChange,\n        children,\n        header\n    }: BottomSheetProps = $props();\n\n    // ============================================\n    // INTERNAL STATE\n    // ============================================\n\n    // DOM references\n    let sheetRef = $state<HTMLElement | null>(null);\n    let contentRef = $state<HTMLElement | null>(null);\n    let backdropRef = $state<HTMLElement | null>(null);\n\n    // Sheet state\n    let isVisible = $state(false);\n    let isClosing = $state(false);\n    let isDragging = $state(false);\n    // Plain (NOT $state): written on every animation frame and drag move, but never read\n    // reactively (no template / $derived / $effect depends on it). Keeping it out of the\n    // reactivity graph avoids ~120 signal writes/sec on high-refresh displays.\n    let currentTranslateY = 0;\n    let sheetHeight = $state(0);\n\n    // Spring animation engine — a single interruptible rAF loop owns the sheet's\n    // position. currentTranslateY always reflects the LIVE on-screen value (written\n    // every frame), so grabbing the sheet mid-animation never jumps.\n    let rafId: number | null = null;\n    let animTarget = 0;                          // px, translateY the spring settles toward\n    let animVelocity = 0;                        // px/s, live spring velocity (carries flicks)\n    let springK = 0;                             // stiffness\n    let springC = 0;                             // damping coefficient\n    let animOnComplete: (() => void) | null = null;\n    let animHideOnArrival = false;               // close: finalize the moment the sheet is offscreen\n    let lastFrameTime = 0;\n    let scaleTargetPrimed = false;               // static scale-target styles set once per open cycle\n\n    // Drag tracking\n    let dragState = {\n        startY: 0,\n        startX: 0,\n        lastY: 0,\n        currentY: 0,\n        deltaY: 0,\n        startSnapPoint: 0,\n        activePointerId: null as number | null,\n        isTouchActive: false,\n        shouldPreventScroll: false,\n        history: [] as { y: number; time: number }[],\n        // Two-phase gesture recognition for interactive elements\n        isPending: false,           // Tracking started but not yet committed to drag\n        isInteractiveStart: false,  // Gesture began on an interactive element\n        committed: false,           // Gesture has been resolved as a drag\n        inScrollable: false         // Gesture began inside a [data-bottom-sheet-scroll] area\n    };\n\n    // Scroll state\n    let scrollableElement: HTMLElement | null = null;\n    let isScrolledToTop = true;\n\n    // Backdrop dismiss: the pointerId of a press that STARTED on the backdrop. A genuine\n    // dismiss is a full press+release on the backdrop; tracking the origin lets us ignore\n    // the stray pointerup that lands on a freshly-mounted backdrop when a press begun\n    // elsewhere (e.g. a long-press on a button that opened the sheet) is released over it.\n    let backdropPressPointerId: number | null = null;\n\n    // Dimensions\n    let windowHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 800);\n    let containerHeight = $state(0);\n    let containerResizeObserver: ResizeObserver | null = null;\n    let prevOpen: boolean | null = null;\n\n    // ============================================\n    // COMPUTED VALUES\n    // ============================================\n\n    const r = $derived(bottomSheetRecipe({constrained: constrainToContainer, dragging: isDragging}));\n\n    const scaleTarget = $derived(scaleTargetRef ?? containerRef);\n    const effectiveHeight = $derived(\n        constrainToContainer && containerRef ? containerHeight : windowHeight\n    );\n    const maxSnapPoint = $derived(Math.max(...snapPoints));\n    const maxSheetHeight = $derived(maxSnapPoint * effectiveHeight);\n    const zIndex = $derived(bottomSheetStore.getZIndex(id));\n    const currentSnapPoint = $derived(snapPoints[defaultSnapPoint] ?? 0.5);\n    const allSnapPoints = $derived([0, ...snapPoints].sort((a, b) => a - b));\n\n    // ============================================\n    // LIFECYCLE\n    // ============================================\n\n    onMount(() => {\n        bottomSheetStore.register(id, {snapPoints, defaultSnapPoint, closeOnBackdrop});\n        window.addEventListener('resize', handleWindowResize);\n\n        return () => {\n            bottomSheetStore.unregister(id);\n            window.removeEventListener('resize', handleWindowResize);\n        };\n    });\n\n    onDestroy(() => {\n        containerResizeObserver?.disconnect();\n        cancelAnim();\n    });\n\n    // The spring loop drives every visual imperatively (translate / opacity / scale),\n    // so keep the recipe's CSS transitions OFF on these elements — otherwise a CSS\n    // transition would try to animate between each per-frame write and smear the motion.\n    $effect(() => {\n        if (sheetRef) sheetRef.style.transition = 'none';\n        if (backdropRef) backdropRef.style.transition = 'none';\n    });\n\n    // Watch containerRef for constrained mode\n    $effect(() => {\n        if (!containerRef || !constrainToContainer) return;\n\n        containerHeight = containerRef.clientHeight;\n        containerResizeObserver?.disconnect();\n\n        containerResizeObserver = new ResizeObserver(() => {\n            containerHeight = containerRef!.clientHeight;\n            if (isVisible && !isDragging && sheetRef) {\n                sheetHeight = sheetRef.offsetHeight;\n            }\n        });\n        containerResizeObserver.observe(containerRef);\n\n        return () => {\n            containerResizeObserver?.disconnect();\n            containerResizeObserver = null;\n        };\n    });\n\n    // Watch open prop changes\n    $effect(() => {\n        const shouldOpen = open;\n\n        if (prevOpen === null) {\n            prevOpen = shouldOpen;\n            if (shouldOpen) doOpen();\n            return;\n        }\n\n        if (shouldOpen && !prevOpen && !isVisible) {\n            prevOpen = true;\n            doOpen();\n        } else if (!shouldOpen && prevOpen && isVisible && !isClosing) {\n            prevOpen = false;\n            doClose();\n        }\n    });\n\n    // NOTE: The scrollable region ([data-bottom-sheet-scroll]) is resolved lazily\n    // at gesture-start from the event target (see getScrollableFromTarget), NOT via\n    // a one-shot querySelector here. A single querySelector at open-time cannot see\n    // content that is mounted lazily AFTER the sheet opens (e.g. async-loaded lists),\n    // which left scrollableElement null and broke drag/scroll arbitration inside it.\n\n    // ============================================\n    // CORE FUNCTIONS\n    // ============================================\n\n    function handleWindowResize() {\n        if (isVisible && !isDragging) {\n            windowHeight = window.innerHeight;\n            if (sheetRef) sheetHeight = sheetRef.offsetHeight;\n        }\n    }\n\n    function recalculateDimensions() {\n        if (typeof window !== 'undefined') windowHeight = window.innerHeight;\n        if (containerRef && constrainToContainer) containerHeight = containerRef.clientHeight;\n        if (sheetRef) sheetHeight = sheetRef.offsetHeight;\n    }\n\n    // ============================================\n    // SPRING ANIMATION ENGINE\n    // ============================================\n    // Settle, open and close all run through one interruptible rAF loop as damped\n    // springs seeded with the finger's release velocity, so the motion CONTINUES from\n    // the drag rather than restarting as a fresh CSS tween. The loop writes the live\n    // position every frame, which is what makes catching the sheet mid-flight feel\n    // native — there is no destination-vs-live mismatch to jump across.\n\n    const prefersReducedMotion = () =>\n        typeof window !== 'undefined' &&\n        !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n\n    /** Convert (response, dampingRatio) to spring stiffness/damping (unit mass). */\n    function springConstants(response: number, damping: number) {\n        const omega = (2 * Math.PI) / response; // natural angular frequency\n        return {k: omega * omega, c: 2 * damping * omega};\n    }\n\n    /** Write the whole visual state for a given translateY (transform + backdrop + scale + progress). */\n    function renderPosition(translateY: number) {\n        if (sheetRef) sheetRef.style.translate = `0 ${translateY}px`;\n        const rawProgress = (sheetHeight - translateY) / effectiveHeight;\n        const progress = Math.max(0, Math.min(maxSnapPoint, rawProgress));\n        updateBackdrop(progress);\n        updateScaleTarget(progress);\n        bottomSheetStore.updateProgress(id, Math.max(0, Math.min(1, rawProgress)));\n    }\n\n    function cancelAnim() {\n        if (rafId !== null) {\n            cancelAnimationFrame(rafId);\n            rafId = null;\n        }\n        animOnComplete = null;\n    }\n\n    /** Stop any in-flight settle so a fresh gesture anchors to the true live position. */\n    function interruptAnimation() {\n        cancelAnim();\n        isClosing = false;\n    }\n\n    /**\n     * Spring toward a target translateY, optionally seeded with an initial velocity\n     * (px/s — e.g. the finger's flick at release). Retargets a running loop in place,\n     * so successive calls (or a mid-flight direction change) stay continuous.\n     */\n    function animateTo(\n        target: number,\n        spring: {response: number; damping: number},\n        initialVelocity = 0,\n        onComplete?: () => void,\n        hideOnArrival = false\n    ) {\n        animTarget = target;\n        animOnComplete = onComplete ?? null;\n        animHideOnArrival = hideOnArrival;\n        const {k, c} = springConstants(spring.response, spring.damping);\n        springK = k;\n        springC = c;\n\n        // Respect reduced-motion: jump straight to the target, no spring.\n        if (prefersReducedMotion()) {\n            cancelAnim();\n            animVelocity = 0;\n            currentTranslateY = target;\n            renderPosition(target);\n            onComplete?.();\n            return;\n        }\n\n        animVelocity = initialVelocity;\n        if (rafId === null) {\n            lastFrameTime = performance.now();\n            rafId = requestAnimationFrame(animationFrame);\n        }\n    }\n\n    function animationFrame(now: number) {\n        const {restDistance, restVelocity, maxFrameDt} = CONFIG.animation;\n        let dt = (now - lastFrameTime) / 1000;\n        lastFrameTime = now;\n        if (dt > maxFrameDt) dt = maxFrameDt; // clamp after tab-switch stalls\n\n        // Sub-step with semi-implicit (symplectic) Euler for stability at high stiffness.\n        let x = currentTranslateY;\n        let v = animVelocity;\n        const steps = Math.max(1, Math.ceil(dt / 0.004));\n        const h = dt / steps;\n        for (let i = 0; i < steps; i++) {\n            const a = -springK * (x - animTarget) - springC * v;\n            v += a * h;\n            x += v * h;\n        }\n\n        let settled = Math.abs(x - animTarget) < restDistance && Math.abs(v) < restVelocity;\n        // Close/hide: finalize the instant the sheet reaches offscreen — on the way down,\n        // BEFORE any underdamped rebound. This removes the long asymptotic spring \"tail\"\n        // that used to keep isVisible/open true (and the backdrop swallowing taps) for a\n        // few hundred ms after the sheet already looked closed.\n        if (animHideOnArrival && x >= animTarget - 0.5) settled = true;\n        if (settled) {\n            x = animTarget;\n            v = 0;\n        }\n\n        animVelocity = v;\n        currentTranslateY = x;\n        renderPosition(x);\n\n        if (settled) {\n            rafId = null;\n            const cb = animOnComplete;\n            animOnComplete = null;\n            cb?.();\n        } else {\n            rafId = requestAnimationFrame(animationFrame);\n        }\n    }\n\n    function doOpen() {\n        // Refresh viewport/container dimensions BEFORE the sheet renders, so its\n        // height (maxSheetHeight) is derived from current values. While the sheet is\n        // closed, windowHeight is not tracked (handleWindowResize is gated on\n        // isVisible), so a resize between opens would otherwise leave the first\n        // render using a stale height — measured sheetHeight then mismatches the\n        // fresh effectiveHeight, shifting the sheet off the bottom edge until the\n        // next open. Doing this before isVisible keeps them in sync.\n        if (typeof window !== 'undefined') windowHeight = window.innerHeight;\n        if (containerRef && constrainToContainer) containerHeight = containerRef.clientHeight;\n\n        isVisible = true;\n        isClosing = false;\n        backdropPressPointerId = null; // fresh open — ignore any stale backdrop press id\n        bottomSheetStore.open(id);\n\n        requestAnimationFrame(() => {\n            // sheetRef is bound by this rAF tick.\n            recalculateDimensions();\n            // Start fully hidden (matches the sheet's initial CSS translate of 100%),\n            // then spring up to the target snap point.\n            currentTranslateY = sheetHeight;\n            renderPosition(sheetHeight);\n            const target = sheetHeight - currentSnapPoint * effectiveHeight;\n            animateTo(target, CONFIG.animation.open, 0);\n        });\n    }\n\n    function doClose() {\n        if (isClosing) return;\n        animateSheetClose(0);\n    }\n\n    /** Spring the sheet fully down and finalize. `initialVelocity` (px/s) carries a flick-to-dismiss. */\n    function animateSheetClose(initialVelocity: number) {\n        isClosing = true;\n        animateTo(sheetHeight, CONFIG.animation.close, initialVelocity, () => {\n            isVisible = false;\n            isClosing = false;\n            bottomSheetStore.close(id);\n            prevOpen = false;\n            open = false;\n            resetScaleTarget();\n            onClose?.();\n            onOpenChange?.(false);\n        }, true); // hideOnArrival — finalize as soon as it's offscreen, no spring tail\n    }\n\n    /**\n     * Settle after a drag release: resolve the target snap point, then spring to it\n     * carrying the finger's release velocity so the hand-off is seamless.\n     */\n    function settleFromRelease() {\n        const nearestSnap = determineSnapPoint();\n        const releaseVelocity = calculateVelocity() * 1000; // px/ms → px/s (down = positive)\n\n        if (nearestSnap === 0 && dragToClose) {\n            animateSheetClose(releaseVelocity);\n            return;\n        }\n\n        const snap = nearestSnap > 0 ? nearestSnap : dragState.startSnapPoint;\n        const target = sheetHeight - snap * effectiveHeight;\n        animateTo(target, CONFIG.animation.snap, releaseVelocity, () => {\n            if (!open) {\n                prevOpen = true;\n                open = true;\n                onOpenChange?.(true);\n            }\n        });\n    }\n\n    // ============================================\n    // VISUAL UPDATES\n    // ============================================\n\n    function updateBackdrop(progress: number) {\n        if (!backdropRef) return;\n        const opacity = Math.max(0, Math.min(CONFIG.backdrop.maxOpacity, progress * CONFIG.backdrop.maxOpacity));\n        backdropRef.style.opacity = String(opacity);\n    }\n\n    function updateScaleTarget(progress: number) {\n        if (!scaleTarget || !scaleBackground) return;\n\n        // Set the STATIC props ONCE per open cycle. Re-writing transition / transformOrigin /\n        // overflow / will-change every frame churned the compositor layer (will-change\n        // especially) and, together with a per-frame border-radius repaint of this\n        // full-screen element, blew the frame budget on 120Hz displays. Priming once fixes it.\n        if (!scaleTargetPrimed) {\n            scaleTarget.style.transition = 'none';\n            scaleTarget.style.transformOrigin = CONFIG.scale.origin;\n            scaleTarget.style.overflow = 'hidden';\n            scaleTarget.style.willChange = 'scale, translate, border-radius';\n            scaleTargetPrimed = true;\n        }\n\n        const p = Math.max(0, Math.min(1, progress));\n        const {factor, borderRadius, translateY} = CONFIG.scale;\n\n        // Per-frame: scale + translate are GPU-composited (cheap). Quantize border-radius to\n        // whole px so it only actually repaints ~a dozen times across the gesture, not 120×/s.\n        scaleTarget.style.scale = String(1 - factor * p);\n        scaleTarget.style.translate = `0 ${(translateY * p).toFixed(2)}px`;\n        scaleTarget.style.borderRadius = `${Math.round(borderRadius * p)}px`;\n    }\n\n    function resetScaleTarget() {\n        scaleTargetPrimed = false;\n        if (!scaleTarget || !scaleBackground) return;\n\n        scaleTarget.style.scale = '';\n        scaleTarget.style.translate = '';\n        scaleTarget.style.borderRadius = '';\n        scaleTarget.style.transformOrigin = '';\n        scaleTarget.style.overflow = '';\n        scaleTarget.style.transition = '';\n        scaleTarget.style.willChange = '';\n    }\n\n    // ============================================\n    // GESTURE UTILITIES\n    // ============================================\n\n    function pushHistory(y: number) {\n        const now = performance.now();\n        dragState.history = dragState.history.filter(p => now - p.time <= 100);\n        dragState.history.push({y, time: now});\n    }\n\n    function clearHistory() {\n        dragState.history = [];\n    }\n\n    function calculateVelocity(): number {\n        const now = performance.now();\n        const recent = dragState.history.filter(p => now - p.time <= 100);\n\n        if (recent.length < 2) return 0;\n\n        const first = recent[0];\n        const last = recent[recent.length - 1];\n        if (!first || !last) return 0;\n        const dt = last.time - first.time;\n\n        return dt > 0 ? (last.y - first.y) / dt : 0;\n    }\n\n    function clampAboveMaxSnap(translateY: number): number {\n        // The sheet is only as tall as its MAX snap point, with its bottom pinned to the\n        // screen bottom (translateY 0 == fully open to max). Letting translateY go below\n        // that (negative) would lift the sheet's bottom edge off the screen and reveal the\n        // background in the gap beneath it — which looks broken. So pin it: you cannot drag\n        // the sheet frame above its largest detent. This is also what native iOS does — the\n        // frame is firm at the top detent; only inner scroll content overscrolls.\n        const topLimit = sheetHeight - maxSnapPoint * effectiveHeight;\n        return translateY < topLimit ? topLimit : translateY;\n    }\n\n    function applyLockedDragResistance(rawTranslateY: number): number {\n        // Base translateY when at start snap point: sheetHeight - (startSnapPoint * effectiveHeight)\n        const baseTranslateY = sheetHeight - (dragState.startSnapPoint * effectiveHeight);\n        const dragDistance = rawTranslateY - baseTranslateY;\n\n        if (dragDistance > 0) {\n            const {lockedDragResistance, maxLockedDrag} = CONFIG.gesture;\n            const resistedDrag = Math.min(dragDistance * lockedDragResistance, maxLockedDrag);\n            return baseTranslateY + resistedDrag;\n        }\n        return rawTranslateY;\n    }\n\n    function findNearestSnapPoint(translateY: number, velocityInfluence = 0): number {\n        // Calculate progress: translateY = sheetHeight - (progress * effectiveHeight)\n        // So: progress = (sheetHeight - translateY) / effectiveHeight\n        const currentProgress = (sheetHeight - translateY) / effectiveHeight;\n        const targetProgress = currentProgress + velocityInfluence;\n\n        return allSnapPoints.reduce((nearest, sp) =>\n                Math.abs(targetProgress - sp) < Math.abs(targetProgress - nearest) ? sp : nearest\n            , allSnapPoints[0] ?? 0);\n    }\n\n    function determineSnapPoint(): number {\n        // Calculate progress: translateY = sheetHeight - (progress * effectiveHeight)\n        // So: progress = (sheetHeight - translateY) / effectiveHeight\n        const currentProgress = (sheetHeight - currentTranslateY) / effectiveHeight;\n        const velocity = calculateVelocity();\n\n        if (!dragToClose) {\n            return dragState.startSnapPoint;\n        }\n\n        const {closeVelocityThreshold, closeProgressThreshold, velocityInfluence} = CONFIG.gesture;\n\n        // Fast swipe handling\n        if (Math.abs(velocity) > closeVelocityThreshold) {\n            if (velocity > 0) {\n                // Swipe down - close or go to lower snap\n                const lowerSnaps = allSnapPoints.filter(sp => sp < dragState.startSnapPoint);\n                const lowest = lowerSnaps[lowerSnaps.length - 1];\n                if (lowest !== undefined && currentProgress >= lowest * 0.5) {\n                    return lowest;\n                }\n                return 0;\n            } else {\n                // Swipe up - go to higher snap\n                const higherSnaps = allSnapPoints.filter(sp => sp > currentProgress);\n                return higherSnaps[0] ?? Math.max(...snapPoints);\n            }\n        }\n\n        // Check close threshold\n        const progressDrop = dragState.startSnapPoint - currentProgress;\n        if (progressDrop > closeProgressThreshold) {\n            return 0;\n        }\n\n        // Velocity is in px/ms, convert to progress units (divide by effectiveHeight, multiply by 1000 for scale)\n        const velocityInProgressUnits = -velocity / effectiveHeight * 1000;\n        return findNearestSnapPoint(currentTranslateY, velocityInProgressUnits * velocityInfluence);\n    }\n\n    // ============================================\n    // TOUCH EVENT HANDLERS\n    // ============================================\n\n    function isInDraggableArea(target: HTMLElement): boolean {\n        return !!(target.closest('[data-bottom-sheet-handle]'));\n    }\n\n    function isInteractive(target: HTMLElement): boolean {\n        return !!target.closest('button, a, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])');\n    }\n\n    function shouldIgnoreDrag(target: HTMLElement): boolean {\n        return !!target.closest('[data-bottom-sheet-no-drag]');\n    }\n\n    /**\n     * Resolve the scrollable region ([data-bottom-sheet-scroll]) that contains the\n     * gesture target. Resolved per-gesture (not once at open-time) so that content\n     * mounted lazily after the sheet opened — and nested/multiple scroll regions —\n     * are detected correctly. Returns the nearest scrollable ancestor, or null.\n     */\n    function getScrollableFromTarget(target: HTMLElement): HTMLElement | null {\n        return target.closest<HTMLElement>('[data-bottom-sheet-scroll]');\n    }\n\n    /**\n     * Install a one-shot capture-phase click listener to suppress the ghost click\n     * that fires after a committed drag from an interactive element.\n     */\n    function suppressNextClick() {\n        if (!sheetRef) return;\n        const handler = (e: Event) => {\n            e.preventDefault();\n            e.stopPropagation();\n            sheetRef?.removeEventListener('click', handler, true);\n        };\n        sheetRef.addEventListener('click', handler, true);\n        // Safety: auto-remove after a short delay if click never fires\n        setTimeout(() => sheetRef?.removeEventListener('click', handler, true), 300);\n    }\n\n    /**\n     * Reset all pending/two-phase gesture state fields.\n     */\n    function resetPendingState() {\n        dragState.isPending = false;\n        dragState.isInteractiveStart = false;\n        dragState.committed = false;\n        dragState.inScrollable = false;\n    }\n\n    /**\n     * Initialize common drag tracking fields shared by both touch and pointer paths.\n     */\n    function initDragTracking(clientX: number, clientY: number) {\n        dragState.startX = clientX;\n        dragState.startY = clientY;\n        dragState.lastY = clientY;\n        dragState.currentY = currentTranslateY;\n        dragState.deltaY = 0;\n        dragState.startSnapPoint = Math.round((sheetHeight - currentTranslateY) / effectiveHeight * 100) / 100;\n        clearHistory();\n        pushHistory(clientY);\n    }\n\n    /**\n     * Commit to dragging: transition from pending state to active drag.\n     * Re-anchors startY/currentY to the current position to prevent visual jump.\n     */\n    function commitToDrag(clientY: number) {\n        dragState.isPending = false;\n        dragState.committed = true;\n        // Re-anchor to current position so sheet doesn't jump\n        dragState.startY = clientY;\n        dragState.currentY = currentTranslateY;\n        clearHistory();\n        pushHistory(clientY);\n\n        interruptAnimation();\n        if (scaleTarget) scaleTarget.style.transition = 'none';\n        isDragging = true;\n    }\n\n    /**\n     * Check if the pending gesture should be resolved.\n     * Returns: 'drag' if vertical threshold exceeded and should drag sheet,\n     *          'abort' if horizontal wins or user wants to scroll content,\n     *          'pending' if undecided.\n     */\n    function resolvePendingGesture(clientX: number, clientY: number): 'drag' | 'abort' | 'pending' {\n        const {dragActivationThreshold, horizontalDeadZone} = CONFIG.gesture;\n        const absX = Math.abs(clientX - dragState.startX);\n        const absY = Math.abs(clientY - dragState.startY);\n        const deltaY = clientY - dragState.startY; // positive = finger moving down\n\n        // Horizontal threshold exceeded — let native behavior handle it (slider, scroll, etc.)\n        if (absX >= dragActivationThreshold) {\n            return 'abort';\n        }\n\n        // Vertical threshold exceeded and angle is more vertical than horizontal\n        if (absY >= dragActivationThreshold && absY > absX * horizontalDeadZone) {\n            // Inside a scrollable area: only commit to drag if pulling DOWN from top (dismiss gesture).\n            // If swiping UP (to scroll content down), abort and let native scroll work.\n            if (dragState.inScrollable) {\n                if (scrollableElement) isScrolledToTop = scrollableElement.scrollTop <= 1;\n                if (deltaY > 0 && isScrolledToTop) {\n                    // Pulling down from top → drag sheet (dismiss)\n                    return 'drag';\n                }\n                // Swiping up, or not at top → let native scroll handle it\n                return 'abort';\n            }\n            return 'drag';\n        }\n\n        return 'pending';\n    }\n\n    function handleTouchStart(e: TouchEvent) {\n        if (dragState.isTouchActive) return;\n\n        const target = e.target as HTMLElement;\n        const inDraggableArea = isInDraggableArea(target);\n        // Resolve scrollable region from the actual target so lazily-mounted content is detected.\n        scrollableElement = getScrollableFromTarget(target);\n        const inScrollable = !!scrollableElement;\n        const isInteractiveTarget = isInteractive(target);\n\n        // data-bottom-sheet-no-drag: treat as fully default element — no tracking at all\n        if (shouldIgnoreDrag(target) && !inDraggableArea) {\n            return;\n        }\n\n        if (scrollableElement) isScrolledToTop = scrollableElement.scrollTop <= 1;\n\n        if (inScrollable && !isScrolledToTop && !inDraggableArea) {\n            dragState.shouldPreventScroll = false;\n            return;\n        }\n\n        // Initialize tracking for all cases\n        const touch = e.touches[0];\n        if (!touch) return;\n        dragState.isTouchActive = true;\n        initDragTracking(touch.clientX, touch.clientY);\n\n        // Interactive element (button, input, slider, etc.) NOT in draggable area:\n        // Enter pending state — don't commit to drag yet, let threshold decide\n        if (isInteractiveTarget && !inDraggableArea) {\n            dragState.isPending = true;\n            dragState.isInteractiveStart = true;\n            dragState.committed = false;\n            dragState.inScrollable = inScrollable;\n            dragState.shouldPreventScroll = true; // Will be used if we commit\n\n            // Do NOT set isDragging or interrupt the animation yet — allow native\n            // touch behavior until the gesture commits, and don't call e.preventDefault().\n            return;\n        }\n\n        // Non-interactive element: immediately commit to dragging (existing behavior)\n        dragState.isPending = false;\n        dragState.isInteractiveStart = false;\n        dragState.committed = true;\n        dragState.shouldPreventScroll = !(inScrollable && isScrolledToTop && !inDraggableArea);\n\n        interruptAnimation();\n        if (scaleTarget) scaleTarget.style.transition = 'none';\n        isDragging = true;\n    }\n\n    function handleTouchMove(e: TouchEvent) {\n        if (!dragState.isTouchActive) return;\n\n        const touch = e.touches[0];\n        if (!touch) return;\n        const clientY = touch.clientY;\n        const clientX = touch.clientX;\n\n        // ── Two-phase: resolve pending gesture from interactive element ──\n        if (dragState.isPending) {\n            pushHistory(clientY);\n            const result = resolvePendingGesture(clientX, clientY);\n\n            if (result === 'drag') {\n                // Vertical intent wins → commit to drag\n                commitToDrag(clientY);\n                dragState.shouldPreventScroll = true;\n                e.preventDefault();\n                return; // First real drag frame happens on next move\n            }\n            if (result === 'abort') {\n                // Horizontal intent wins → abort, let native behavior (slider, etc.)\n                dragState.isPending = false;\n                dragState.committed = false;\n                dragState.isTouchActive = false;\n                dragState.isInteractiveStart = false;\n                return;\n            }\n            // Still pending — do nothing, let native behavior continue\n            return;\n        }\n\n        // ── Normal drag logic (committed) ──\n        const moveDelta = clientY - dragState.startY;\n        dragState.deltaY = clientY - dragState.lastY;\n        dragState.lastY = clientY;\n        pushHistory(clientY);\n\n        if (scrollableElement) isScrolledToTop = scrollableElement.scrollTop <= 1;\n        if (isScrolledToTop && moveDelta > 0) dragState.shouldPreventScroll = true;\n        if (!dragState.shouldPreventScroll) return;\n\n        e.preventDefault();\n\n        let translateY = dragState.currentY + moveDelta;\n        translateY = clampAboveMaxSnap(translateY);\n        if (!dragToClose) translateY = applyLockedDragResistance(translateY);\n        translateY = Math.min(translateY, sheetHeight);\n\n        currentTranslateY = translateY;\n        renderPosition(translateY);\n    }\n\n    function handleTouchEnd(e: TouchEvent) {\n        if (e.touches.length > 0 || !dragState.isTouchActive) return;\n\n        dragState.isTouchActive = false;\n\n        // ── Two-phase: pending never resolved (tap) → let native click fire ──\n        if (dragState.isPending) {\n            resetPendingState();\n            return;\n        }\n\n        // ── Committed drag from interactive element → suppress ghost click ──\n        if (dragState.committed && dragState.isInteractiveStart) {\n            suppressNextClick();\n        }\n        resetPendingState();\n\n        if (!dragState.shouldPreventScroll) {\n            isDragging = false;\n            return;\n        }\n\n        isDragging = false;\n        dragState.shouldPreventScroll = false;\n\n        settleFromRelease();\n    }\n\n    // ============================================\n    // POINTER EVENT HANDLERS (Desktop)\n    // ============================================\n\n    function handlePointerDown(e: PointerEvent) {\n        if (e.pointerType === 'touch' || e.button !== 0 || dragState.activePointerId !== null) return;\n\n        const target = e.target as HTMLElement;\n        const inDraggableArea = isInDraggableArea(target);\n        // Resolve scrollable region from the actual target so lazily-mounted content is detected.\n        scrollableElement = getScrollableFromTarget(target);\n        const inScrollable = !!scrollableElement;\n        const isInteractiveTarget = isInteractive(target);\n        const shouldIgnoreDragTarget = shouldIgnoreDrag(target);\n\n        // data-bottom-sheet-no-drag: treat as fully default element — no tracking at all\n        if (shouldIgnoreDragTarget && !inDraggableArea) return;\n\n        if (scrollableElement) isScrolledToTop = scrollableElement.scrollTop <= 1;\n        if (inScrollable && !isScrolledToTop && !inDraggableArea) return;\n\n        dragState.activePointerId = e.pointerId;\n        initDragTracking(e.clientX, e.clientY);\n\n        // Interactive element NOT in draggable area:\n        // Enter pending state — don't commit yet, preserve native focus/click\n        if (isInteractiveTarget && !inDraggableArea) {\n            dragState.isPending = true;\n            dragState.isInteractiveStart = true;\n            dragState.committed = false;\n            dragState.inScrollable = inScrollable;\n\n            // Do NOT call e.preventDefault() — preserve focus for inputs\n            // Do NOT call setPointerCapture — allow native hover/click behavior\n            // Do NOT set isDragging or disable transitions\n            return;\n        }\n\n        // Non-interactive element: immediately commit to dragging\n        dragState.isPending = false;\n        dragState.isInteractiveStart = false;\n        dragState.committed = true;\n\n        interruptAnimation();\n        if (scaleTarget) scaleTarget.style.transition = 'none';\n        sheetRef?.setPointerCapture(e.pointerId);\n        isDragging = true;\n        e.preventDefault();\n    }\n\n    function handlePointerMove(e: PointerEvent) {\n        if (e.pointerType === 'touch' || dragState.activePointerId !== e.pointerId) return;\n        if (!isDragging && !dragState.isPending) return;\n\n        const clientY = e.clientY;\n        const clientX = e.clientX;\n\n        // ── Two-phase: resolve pending gesture from interactive element ──\n        if (dragState.isPending) {\n            pushHistory(clientY);\n            const result = resolvePendingGesture(clientX, clientY);\n\n            if (result === 'drag') {\n                // Vertical intent wins → commit to drag\n                commitToDrag(clientY);\n                sheetRef?.setPointerCapture(e.pointerId);\n                e.preventDefault();\n                return; // First real drag frame happens on next move\n            }\n            if (result === 'abort') {\n                // Horizontal intent wins → abort, let native behavior\n                dragState.isPending = false;\n                dragState.committed = false;\n                dragState.activePointerId = null;\n                dragState.isInteractiveStart = false;\n                return;\n            }\n            // Still pending — do nothing\n            return;\n        }\n\n        // ── Normal drag logic (committed) ──\n        dragState.deltaY = clientY - dragState.lastY;\n        dragState.lastY = clientY;\n        pushHistory(clientY);\n\n        let translateY = dragState.currentY + clientY - dragState.startY;\n        translateY = clampAboveMaxSnap(translateY);\n        if (!dragToClose) translateY = applyLockedDragResistance(translateY);\n        translateY = Math.min(translateY, sheetHeight);\n\n        currentTranslateY = translateY;\n        renderPosition(translateY);\n\n        e.preventDefault();\n    }\n\n    function handlePointerUp(e: PointerEvent) {\n        if (e.pointerType === 'touch' || dragState.activePointerId !== e.pointerId) return;\n\n        try {\n            sheetRef?.releasePointerCapture(e.pointerId);\n        } catch {\n        }\n        dragState.activePointerId = null;\n\n        // ── Two-phase: pending never resolved (tap) → let native click fire ──\n        if (dragState.isPending) {\n            resetPendingState();\n            return;\n        }\n\n        // ── Committed drag from interactive element → suppress ghost click ──\n        if (dragState.committed && dragState.isInteractiveStart) {\n            suppressNextClick();\n        }\n        resetPendingState();\n\n        if (!isDragging) return;\n        isDragging = false;\n\n        settleFromRelease();\n    }\n\n    function handlePointerCancel(e: PointerEvent) {\n        if (e.pointerType === 'touch' || dragState.activePointerId !== e.pointerId) return;\n\n        try {\n            sheetRef?.releasePointerCapture(e.pointerId);\n        } catch {\n        }\n        dragState.activePointerId = null;\n\n        // If pending, just reset — nothing visual happened\n        if (dragState.isPending) {\n            resetPendingState();\n            return;\n        }\n        resetPendingState();\n\n        if (!isDragging) return;\n        isDragging = false;\n\n        // No velocity on cancel — settle to the nearest snap point at rest.\n        const target = sheetHeight - findNearestSnapPoint(currentTranslateY, 0) * effectiveHeight;\n        animateTo(target, CONFIG.animation.snap, 0);\n    }\n\n    function handleCloseButtonClick(e: MouseEvent) {\n        e.stopPropagation();\n        doClose();\n    }\n\n    function handleBackdropPointerDown(e: PointerEvent) {\n        // Record a press that begins ON the backdrop (and only the backdrop). Used to tell\n        // a deliberate backdrop tap apart from the ghost pointerup described below.\n        backdropPressPointerId = e.target === backdropRef ? e.pointerId : null;\n    }\n\n    function handleBackdropClick(e: PointerEvent) {\n        // Dismiss only when THIS press both started and ended on the backdrop. Gating on the\n        // press origin (not an isAnimating timer) keeps a deliberate tap instant — even mid\n        // open-animation — while ignoring the stray release that fires when a press begun\n        // elsewhere lifts over a just-mounted backdrop (e.g. long-press a button to open the\n        // sheet, then release: that pointerup lands on the backdrop but never pressed it).\n        const startedOnBackdrop = backdropPressPointerId === e.pointerId;\n        backdropPressPointerId = null;\n        if (!closeOnBackdrop || e.target !== backdropRef || isDragging || !startedOnBackdrop) return;\n        doClose();\n    }\n\n    function handleKeydown(e: KeyboardEvent) {\n        if (e.key === 'Escape' && isVisible && bottomSheetStore.isTopmost(id)) {\n            e.preventDefault();\n            doClose();\n        }\n    }\n\n    // Svelte action for touch events\n    function touchEvents(node: HTMLElement) {\n        node.addEventListener('touchstart', handleTouchStart, {passive: false});\n        node.addEventListener('touchmove', handleTouchMove, {passive: false});\n        node.addEventListener('touchend', handleTouchEnd, {passive: true});\n\n        return {\n            destroy() {\n                node.removeEventListener('touchstart', handleTouchStart);\n                node.removeEventListener('touchmove', handleTouchMove);\n                node.removeEventListener('touchend', handleTouchEnd);\n            }\n        };\n    }\n</script>\n\n<svelte:window onkeydown={handleKeydown}/>\n\n{#if isVisible}\n    <!-- Backdrop -->\n    <!-- svelte-ignore a11y_no_static_element_interactions -->\n    <div\n            bind:this={backdropRef}\n            class={r.backdrop()}\n            style:z-index={zIndex}\n            onpointerdown={handleBackdropPointerDown}\n            onpointerup={handleBackdropClick}\n    ></div>\n\n    <!-- Sheet -->\n    <!-- svelte-ignore a11y_no_static_element_interactions -->\n    <div\n            bind:this={sheetRef}\n            class={r.sheet()}\n            style:z-index={zIndex + 1}\n            style:height=\"{maxSheetHeight}px\"\n            data-bottom-sheet-surface\n            role=\"dialog\"\n            aria-modal=\"true\"\n            tabindex={-1}\n            use:touchEvents\n            onpointerdown={handlePointerDown}\n            onpointermove={handlePointerMove}\n            onpointerup={handlePointerUp}\n            onpointercancel={handlePointerCancel}\n    >\n        <!-- Drag Handle -->\n        <div class={r.handle()} data-bottom-sheet-handle>\n            <div class={r.handleBar()}></div>\n        </div>\n\n        <!-- Header -->\n        {#if header}\n            <div class={r.header()} data-bottom-sheet-header>\n                {@render header()}\n                {#if showCloseButton}\n                    <button\n                            class={r.closeButton()}\n                            data-bottom-sheet-close\n                            onclick={handleCloseButtonClick}\n                            aria-label=\"Close\"\n                            type=\"button\"\n                    >\n                        <IconX class=\"size-4\"/>\n                    </button>\n                {/if}\n            </div>\n        {/if}\n\n        <!-- Content -->\n        <div bind:this={contentRef} class={r.content()} data-bottom-sheet-content>\n            {#if children}\n                {@render children()}\n            {/if}\n        </div>\n    </div>\n{/if}\n\n<style>\n    /* Consumer-marked scroll region inside the sheet body. */\n    [data-bottom-sheet-content] :global([data-bottom-sheet-scroll]) {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        overscroll-behavior: contain;\n        -webkit-overflow-scrolling: touch;\n        min-height: 0;\n        touch-action: pan-y;\n    }\n\n    /* Suppress native gestures on header children so the drag is captured. */\n    [data-bottom-sheet-header] :global(*) {\n        touch-action: none;\n        user-select: none;\n    }\n\n    /* Extend the sheet's own surface below its bottom edge. The sheet is only as tall as\n       its max snap point; if it ever sits a hair above the screen bottom — the open spring's\n       slight overshoot, or sub-pixel rounding — this keeps the sliver beneath it sheet-colored\n       instead of letting the background show through. The sheet is overflow-visible so this is\n       not clipped, and it rides along with the sheet's transform. */\n    :global([data-bottom-sheet-surface]::after) {\n        content: '';\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        height: 100%;\n        background-color: inherit;\n        pointer-events: none;\n    }\n</style>\n"
+    },
+    {
+      "path": "src/lib/components/bottom-sheet/bottomSheetStore.svelte.ts",
+      "target": "bottomSheetStore.svelte.ts",
+      "type": "ts",
+      "content": "/**\n * Bottom Sheet store — Svelte 5 runes.\n *\n * A small singleton that tracks the stack of open bottom sheets so multiple\n * sheets can layer correctly (z-index), report drag progress, and resolve which\n * sheet is topmost (for Escape handling). Sheets register on mount and push/pop\n * themselves from the stack as they open/close. Exposed publicly so apps can\n * drive sheets programmatically (open/close/closeTop) in addition to `bind:open`.\n */\n\nexport interface BottomSheetConfig {\n    id: string;\n    snapPoints: number[];\n    defaultSnapPoint: number;\n    closeOnBackdrop: boolean;\n}\n\nexport interface SheetStackItem {\n    id: string;\n    zIndex: number;\n    progress: number;\n    config: BottomSheetConfig;\n}\n\nconst BASE_Z_INDEX = 1000;\nconst Z_INDEX_INCREMENT = 10;\n\nfunction createBottomSheetStore() {\n    // Stack of active sheets (bottom to top)\n    let sheetStack = $state<SheetStackItem[]>([]);\n\n    // Registry of all sheet configs\n    let registry = $state<Map<string, BottomSheetConfig>>(new Map());\n\n    // Container refs for scale effect\n    let containerRefs = $state<Map<string, HTMLElement>>(new Map());\n\n    /**\n     * Register a sheet with its config\n     */\n    function register(id: string, config: Omit<BottomSheetConfig, 'id'>): void {\n        registry.set(id, {id, ...config});\n    }\n\n    /**\n     * Unregister a sheet\n     */\n    function unregister(id: string): void {\n        registry.delete(id);\n        containerRefs.delete(id);\n        // Remove from stack if present\n        sheetStack = sheetStack.filter(s => s.id !== id);\n    }\n\n    /**\n     * Open a sheet by ID\n     */\n    function open(id: string): void {\n        const config = registry.get(id);\n        if (!config) {\n            // Sheet was not registered (component not mounted yet) — ignore.\n            return;\n        }\n\n        // Check if already in stack\n        if (sheetStack.some(s => s.id === id)) {\n            return;\n        }\n\n        // Calculate z-index based on stack position\n        const zIndex = BASE_Z_INDEX + (sheetStack.length * Z_INDEX_INCREMENT);\n\n        sheetStack = [...sheetStack, {\n            id,\n            zIndex,\n            progress: 0,\n            config\n        }];\n    }\n\n    /**\n     * Close a sheet by ID\n     */\n    function close(id: string): void {\n        sheetStack = sheetStack.filter(s => s.id !== id);\n        // Recalculate z-indices for remaining sheets\n        sheetStack = sheetStack.map((sheet, index) => ({\n            ...sheet,\n            zIndex: BASE_Z_INDEX + (index * Z_INDEX_INCREMENT)\n        }));\n    }\n\n    /**\n     * Close the topmost sheet\n     */\n    function closeTop(): void {\n        const top = sheetStack[sheetStack.length - 1];\n        if (top) {\n            close(top.id);\n        }\n    }\n\n    /**\n     * Update progress for a sheet (0-1)\n     */\n    function updateProgress(id: string, progress: number): void {\n        const index = sheetStack.findIndex(s => s.id === id);\n        const sheet = sheetStack[index];\n        if (sheet) {\n            sheet.progress = Math.max(0, Math.min(1, progress));\n        }\n    }\n\n    /**\n     * Get z-index for a sheet\n     */\n    function getZIndex(id: string): number {\n        const sheet = sheetStack.find(s => s.id === id);\n        return sheet?.zIndex ?? BASE_Z_INDEX;\n    }\n\n    /**\n     * Check if a sheet is open\n     */\n    function isOpen(id: string): boolean {\n        return sheetStack.some(s => s.id === id);\n    }\n\n    /**\n     * Check if a sheet is the topmost\n     */\n    function isTopmost(id: string): boolean {\n        return sheetStack[sheetStack.length - 1]?.id === id;\n    }\n\n    /**\n     * Get progress for a sheet\n     */\n    function getProgress(id: string): number {\n        const sheet = sheetStack.find(s => s.id === id);\n        return sheet?.progress ?? 0;\n    }\n\n    /**\n     * Attach container ref for scale effect\n     */\n    function attachContainer(sheetId: string, ref: HTMLElement): void {\n        containerRefs.set(sheetId, ref);\n    }\n\n    /**\n     * Get container ref for a sheet\n     */\n    function getContainer(sheetId: string): HTMLElement | undefined {\n        return containerRefs.get(sheetId);\n    }\n\n    /**\n     * Get combined backdrop opacity from all sheets\n     */\n    function getCombinedBackdropOpacity(): number {\n        // Use the topmost sheet's progress for backdrop\n        const top = sheetStack[sheetStack.length - 1];\n        return top ? top.progress * 0.5 : 0;\n    }\n\n    /**\n     * Get the current stack\n     */\n    function getStack(): SheetStackItem[] {\n        return sheetStack;\n    }\n\n    return {\n        get stack() { return sheetStack; },\n        get hasOpenSheets() { return sheetStack.length > 0; },\n\n        register,\n        unregister,\n        open,\n        close,\n        closeTop,\n        updateProgress,\n        getZIndex,\n        isOpen,\n        isTopmost,\n        getProgress,\n        attachContainer,\n        getContainer,\n        getCombinedBackdropOpacity,\n        getStack\n    };\n}\n\n// Export singleton instance\nexport const bottomSheetStore = createBottomSheetStore();\n"
+    },
+    {
+      "path": "src/lib/components/bottom-sheet/index.ts",
+      "target": "index.ts",
+      "type": "ts",
+      "content": "export {default as BottomSheet} from './BottomSheet.svelte'\nexport {bottomSheetStore} from './bottomSheetStore.svelte.js'\nexport {bottomSheetRecipe} from './BottomSheet.recipe'\nexport type {BottomSheetRecipeProps, BottomSheetProps} from './BottomSheet.recipe'\nexport type {BottomSheetConfig, SheetStackItem} from './bottomSheetStore.svelte.js'\n"
+    }
+  ],
+  "dependencies": [
+    "tailwind-variants"
+  ],
+  "peerDependencies": [
+    "svelte"
+  ],
+  "registryDependencies": [],
+  "sharedModules": {
+    "utils": false,
+    "icons": true,
+    "hooks": false
+  },
+  "exports": [
+    "BottomSheet",
+    "bottomSheetStore",
+    "bottomSheetRecipe"
+  ]
+}