tera-system-ui 0.1.75 → 0.2.1

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

@@ -0,0 +1,847 @@
+<script lang="ts">import { onDestroy, onMount } from 'svelte';
+import { bottomSheetStore } from './bottomSheetStore.svelte.js';
+import { bottomSheetRecipe } from './BottomSheet.recipe';
+import { IconX } from "../../internal/icons";
+// ============================================
+// CONFIGURABLE CONSTANTS
+// Adjust these values to customize the bottom sheet behavior
+// ============================================
+const CONFIG = {
+    // Scale effect for background container
+    scale: {
+        factor: 0.06, // How much to scale down (6%)
+        borderRadius: 16, // Border radius when scaled (px)
+        translateY: 20, // Vertical offset when scaled (px)
+        origin: 'top center' // Transform origin
+    },
+    // Backdrop
+    backdrop: {
+        maxOpacity: 0.5 // Maximum opacity when fully open
+    },
+    // Animation timing
+    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
+    },
+    // 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)
+        lockedDragResistance: 0.3, // Resistance when dragToClose disabled
+        // Two-phase gesture recognition for interactive elements (iOS-style)
+        dragActivationThreshold: 10, // Vertical px to commit to drag from interactive element
+        horizontalDeadZone: 1.2, // If abs(dx)/abs(dy) > this, abort drag (let native horizontal win)
+        tapDistanceThreshold: 6 // Max total movement (px) to still count as a tap
+    }
+};
+// ============================================
+// 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();
+// ============================================
+// INTERNAL STATE
+// ============================================
+// DOM references
+let sheetRef = $state(null);
+let contentRef = $state(null);
+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);
+let sheetHeight = $state(0);
+let transitionDuration = $state(`${CONFIG.animation.defaultDuration}s`);
+// Drag tracking
+let dragState = {
+    startY: 0,
+    startX: 0,
+    lastY: 0,
+    currentY: 0,
+    deltaY: 0,
+    startSnapPoint: 0,
+    activePointerId: null,
+    isTouchActive: false,
+    shouldPreventScroll: false,
+    history: [],
+    // Two-phase gesture recognition for interactive elements
+    isPending: false, // Tracking started but not yet committed to drag
+    isInteractiveStart: false, // Gesture began on an interactive element
+    committed: false, // Gesture has been resolved as a drag
+    inScrollable: false // Gesture began inside a [data-bottom-sheet-scroll] area
+};
+// Scroll state
+let scrollableElement = null;
+let isScrolledToTop = true;
+// Dimensions
+let windowHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 800);
+let containerHeight = $state(0);
+let containerResizeObserver = null;
+let prevOpen = null;
+// ============================================
+// COMPUTED VALUES
+// ============================================
+const r = $derived(bottomSheetRecipe({ constrained: constrainToContainer, dragging: isDragging }));
+const scaleTarget = $derived(scaleTargetRef ?? containerRef);
+const effectiveHeight = $derived(constrainToContainer && containerRef ? containerHeight : windowHeight);
+const maxSnapPoint = $derived(Math.max(...snapPoints));
+const maxSheetHeight = $derived(maxSnapPoint * effectiveHeight);
+const zIndex = $derived(bottomSheetStore.getZIndex(id));
+const currentSnapPoint = $derived(snapPoints[defaultSnapPoint] ?? 0.5);
+const allSnapPoints = $derived([0, ...snapPoints].sort((a, b) => a - b));
+// ============================================
+// LIFECYCLE
+// ============================================
+onMount(() => {
+    bottomSheetStore.register(id, { snapPoints, defaultSnapPoint, closeOnBackdrop });
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+        bottomSheetStore.unregister(id);
+        window.removeEventListener('resize', handleWindowResize);
+    };
+});
+onDestroy(() => {
+    containerResizeObserver?.disconnect();
+});
+// Watch containerRef for constrained mode
+$effect(() => {
+    if (!containerRef || !constrainToContainer)
+        return;
+    containerHeight = containerRef.clientHeight;
+    containerResizeObserver?.disconnect();
+    containerResizeObserver = new ResizeObserver(() => {
+        containerHeight = containerRef.clientHeight;
+        if (isVisible && !isDragging && sheetRef) {
+            sheetHeight = sheetRef.offsetHeight;
+        }
+    });
+    containerResizeObserver.observe(containerRef);
+    return () => {
+        containerResizeObserver?.disconnect();
+        containerResizeObserver = null;
+    };
+});
+// Watch open prop changes
+$effect(() => {
+    const shouldOpen = open;
+    if (prevOpen === null) {
+        prevOpen = shouldOpen;
+        if (shouldOpen)
+            doOpen();
+        return;
+    }
+    if (shouldOpen && !prevOpen && !isVisible) {
+        prevOpen = true;
+        doOpen();
+    }
+    else if (!shouldOpen && prevOpen && isVisible && !isClosing) {
+        prevOpen = false;
+        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;
+});
+// ============================================
+// CORE FUNCTIONS
+// ============================================
+function handleWindowResize() {
+    if (isVisible && !isDragging) {
+        windowHeight = window.innerHeight;
+        if (sheetRef)
+            sheetHeight = sheetRef.offsetHeight;
+    }
+}
+function recalculateDimensions() {
+    if (typeof window !== 'undefined')
+        windowHeight = window.innerHeight;
+    if (containerRef && constrainToContainer)
+        containerHeight = containerRef.clientHeight;
+    if (sheetRef)
+        sheetHeight = sheetRef.offsetHeight;
+}
+function doOpen() {
+    isVisible = true;
+    isClosing = false;
+    isAnimating = true;
+    bottomSheetStore.open(id);
+    requestAnimationFrame(() => {
+        // sheetRef is bound by this rAF tick.
+        recalculateDimensions();
+        requestAnimationFrame(() => snapTo(currentSnapPoint, () => {
+            isAnimating = false;
+        }));
+    });
+}
+function doClose() {
+    if (isClosing)
+        return;
+    isClosing = true;
+    isAnimating = true;
+    snapTo(0, () => {
+        isVisible = false;
+        isClosing = false;
+        isAnimating = false;
+        bottomSheetStore.close(id);
+        prevOpen = false;
+        open = false;
+        resetScaleTarget();
+        onClose?.();
+        onOpenChange?.(false);
+    });
+}
+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);
+    }
+}
+// ============================================
+// VISUAL UPDATES
+// ============================================
+function updateBackdrop(progress) {
+    if (!backdropRef)
+        return;
+    const opacity = Math.max(0, Math.min(CONFIG.backdrop.maxOpacity, progress * CONFIG.backdrop.maxOpacity));
+    backdropRef.style.opacity = String(opacity);
+}
+function updateScaleTarget(progress, withTransition = true) {
+    if (!scaleTarget || !scaleBackground)
+        return;
+    const p = Math.max(0, Math.min(1, progress));
+    const { factor, borderRadius, translateY, origin } = CONFIG.scale;
+    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}`;
+    }
+}
+function resetScaleTarget() {
+    if (!scaleTarget || !scaleBackground)
+        return;
+    scaleTarget.style.scale = '';
+    scaleTarget.style.translate = '';
+    scaleTarget.style.borderRadius = '';
+    scaleTarget.style.transformOrigin = '';
+    scaleTarget.style.overflow = '';
+    scaleTarget.style.transition = '';
+    scaleTarget.style.willChange = '';
+}
+// ============================================
+// GESTURE UTILITIES
+// ============================================
+function pushHistory(y) {
+    const now = performance.now();
+    dragState.history = dragState.history.filter(p => now - p.time <= 100);
+    dragState.history.push({ y, time: now });
+}
+function clearHistory() {
+    dragState.history = [];
+}
+function calculateVelocity() {
+    const now = performance.now();
+    const recent = dragState.history.filter(p => now - p.time <= 100);
+    if (recent.length < 2)
+        return 0;
+    const first = recent[0];
+    const last = recent[recent.length - 1];
+    if (!first || !last)
+        return 0;
+    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 applyLockedDragResistance(rawTranslateY) {
+    // Base translateY when at start snap point: sheetHeight - (startSnapPoint * effectiveHeight)
+    const baseTranslateY = sheetHeight - (dragState.startSnapPoint * effectiveHeight);
+    const dragDistance = rawTranslateY - baseTranslateY;
+    if (dragDistance > 0) {
+        const { lockedDragResistance, maxLockedDrag } = CONFIG.gesture;
+        const resistedDrag = Math.min(dragDistance * lockedDragResistance, maxLockedDrag);
+        return baseTranslateY + resistedDrag;
+    }
+    return rawTranslateY;
+}
+function findNearestSnapPoint(translateY, velocityInfluence = 0) {
+    // Calculate progress: translateY = sheetHeight - (progress * effectiveHeight)
+    // So: progress = (sheetHeight - translateY) / effectiveHeight
+    const currentProgress = (sheetHeight - translateY) / effectiveHeight;
+    const targetProgress = currentProgress + velocityInfluence;
+    return allSnapPoints.reduce((nearest, sp) => Math.abs(targetProgress - sp) < Math.abs(targetProgress - nearest) ? sp : nearest, allSnapPoints[0] ?? 0);
+}
+function determineSnapPoint() {
+    // Calculate progress: translateY = sheetHeight - (progress * effectiveHeight)
+    // So: progress = (sheetHeight - translateY) / effectiveHeight
+    const currentProgress = (sheetHeight - currentTranslateY) / effectiveHeight;
+    const velocity = calculateVelocity();
+    if (!dragToClose) {
+        return dragState.startSnapPoint;
+    }
+    const { closeVelocityThreshold, closeProgressThreshold, velocityInfluence } = CONFIG.gesture;
+    // Fast swipe handling
+    if (Math.abs(velocity) > closeVelocityThreshold) {
+        if (velocity > 0) {
+            // Swipe down - close or go to lower snap
+            const lowerSnaps = allSnapPoints.filter(sp => sp < dragState.startSnapPoint);
+            const lowest = lowerSnaps[lowerSnaps.length - 1];
+            if (lowest !== undefined && currentProgress >= lowest * 0.5) {
+                return lowest;
+            }
+            return 0;
+        }
+        else {
+            // Swipe up - go to higher snap
+            const higherSnaps = allSnapPoints.filter(sp => sp > currentProgress);
+            return higherSnaps[0] ?? Math.max(...snapPoints);
+        }
+    }
+    // Check close threshold
+    const progressDrop = dragState.startSnapPoint - currentProgress;
+    if (progressDrop > closeProgressThreshold) {
+        return 0;
+    }
+    // Velocity is in px/ms, convert to progress units (divide by effectiveHeight, multiply by 1000 for scale)
+    const velocityInProgressUnits = -velocity / effectiveHeight * 1000;
+    return findNearestSnapPoint(currentTranslateY, velocityInProgressUnits * velocityInfluence);
+}
+// ============================================
+// TOUCH EVENT HANDLERS
+// ============================================
+function isInDraggableArea(target) {
+    return !!(target.closest('[data-bottom-sheet-handle]'));
+}
+function isInteractive(target) {
+    return !!target.closest('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])');
+}
+function shouldIgnoreDrag(target) {
+    return !!target.closest('[data-bottom-sheet-no-drag]');
+}
+/**
+ * Install a one-shot capture-phase click listener to suppress the ghost click
+ * that fires after a committed drag from an interactive element.
+ */
+function suppressNextClick() {
+    if (!sheetRef)
+        return;
+    const handler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        sheetRef?.removeEventListener('click', handler, true);
+    };
+    sheetRef.addEventListener('click', handler, true);
+    // Safety: auto-remove after a short delay if click never fires
+    setTimeout(() => sheetRef?.removeEventListener('click', handler, true), 300);
+}
+/**
+ * Reset all pending/two-phase gesture state fields.
+ */
+function resetPendingState() {
+    dragState.isPending = false;
+    dragState.isInteractiveStart = false;
+    dragState.committed = false;
+    dragState.inScrollable = false;
+}
+/**
+ * Initialize common drag tracking fields shared by both touch and pointer paths.
+ */
+function initDragTracking(clientX, clientY) {
+    dragState.startX = clientX;
+    dragState.startY = clientY;
+    dragState.lastY = clientY;
+    dragState.currentY = currentTranslateY;
+    dragState.deltaY = 0;
+    dragState.startSnapPoint = Math.round((sheetHeight - currentTranslateY) / effectiveHeight * 100) / 100;
+    clearHistory();
+    pushHistory(clientY);
+}
+/**
+ * Commit to dragging: transition from pending state to active drag.
+ * Re-anchors startY/currentY to the current position to prevent visual jump.
+ */
+function commitToDrag(clientY) {
+    dragState.isPending = false;
+    dragState.committed = true;
+    // Re-anchor to current position so sheet doesn't jump
+    dragState.startY = clientY;
+    dragState.currentY = currentTranslateY;
+    clearHistory();
+    pushHistory(clientY);
+    transitionDuration = '0s';
+    if (scaleTarget)
+        scaleTarget.style.transition = 'none';
+    isDragging = true;
+}
+/**
+ * Check if the pending gesture should be resolved.
+ * Returns: 'drag' if vertical threshold exceeded and should drag sheet,
+ *          'abort' if horizontal wins or user wants to scroll content,
+ *          'pending' if undecided.
+ */
+function resolvePendingGesture(clientX, clientY) {
+    const { dragActivationThreshold, horizontalDeadZone } = CONFIG.gesture;
+    const absX = Math.abs(clientX - dragState.startX);
+    const absY = Math.abs(clientY - dragState.startY);
+    const deltaY = clientY - dragState.startY; // positive = finger moving down
+    // Horizontal threshold exceeded — let native behavior handle it (slider, scroll, etc.)
+    if (absX >= dragActivationThreshold) {
+        return 'abort';
+    }
+    // Vertical threshold exceeded and angle is more vertical than horizontal
+    if (absY >= dragActivationThreshold && absY > absX * horizontalDeadZone) {
+        // Inside a scrollable area: only commit to drag if pulling DOWN from top (dismiss gesture).
+        // If swiping UP (to scroll content down), abort and let native scroll work.
+        if (dragState.inScrollable) {
+            if (scrollableElement)
+                isScrolledToTop = scrollableElement.scrollTop <= 1;
+            if (deltaY > 0 && isScrolledToTop) {
+                // Pulling down from top → drag sheet (dismiss)
+                return 'drag';
+            }
+            // Swiping up, or not at top → let native scroll handle it
+            return 'abort';
+        }
+        return 'drag';
+    }
+    return 'pending';
+}
+function handleTouchStart(e) {
+    if (dragState.isTouchActive)
+        return;
+    const target = e.target;
+    const inDraggableArea = isInDraggableArea(target);
+    const inScrollable = !!target.closest('[data-bottom-sheet-scroll]');
+    const isInteractiveTarget = isInteractive(target);
+    // data-bottom-sheet-no-drag: treat as fully default element — no tracking at all
+    if (shouldIgnoreDrag(target) && !inDraggableArea) {
+        return;
+    }
+    if (scrollableElement)
+        isScrolledToTop = scrollableElement.scrollTop <= 1;
+    if (inScrollable && !isScrolledToTop && !inDraggableArea) {
+        dragState.shouldPreventScroll = false;
+        return;
+    }
+    // Initialize tracking for all cases
+    const touch = e.touches[0];
+    if (!touch)
+        return;
+    dragState.isTouchActive = true;
+    initDragTracking(touch.clientX, touch.clientY);
+    // Interactive element (button, input, slider, etc.) NOT in draggable area:
+    // Enter pending state — don't commit to drag yet, let threshold decide
+    if (isInteractiveTarget && !inDraggableArea) {
+        dragState.isPending = true;
+        dragState.isInteractiveStart = true;
+        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
+        return;
+    }
+    // Non-interactive element: immediately commit to dragging (existing behavior)
+    dragState.isPending = false;
+    dragState.isInteractiveStart = false;
+    dragState.committed = true;
+    dragState.shouldPreventScroll = !(inScrollable && isScrolledToTop && !inDraggableArea);
+    transitionDuration = '0s';
+    if (scaleTarget)
+        scaleTarget.style.transition = 'none';
+    isDragging = true;
+}
+function handleTouchMove(e) {
+    if (!dragState.isTouchActive)
+        return;
+    const touch = e.touches[0];
+    if (!touch)
+        return;
+    const clientY = touch.clientY;
+    const clientX = touch.clientX;
+    // ── Two-phase: resolve pending gesture from interactive element ──
+    if (dragState.isPending) {
+        pushHistory(clientY);
+        const result = resolvePendingGesture(clientX, clientY);
+        if (result === 'drag') {
+            // Vertical intent wins → commit to drag
+            commitToDrag(clientY);
+            dragState.shouldPreventScroll = true;
+            e.preventDefault();
+            return; // First real drag frame happens on next move
+        }
+        if (result === 'abort') {
+            // Horizontal intent wins → abort, let native behavior (slider, etc.)
+            dragState.isPending = false;
+            dragState.committed = false;
+            dragState.isTouchActive = false;
+            dragState.isInteractiveStart = false;
+            return;
+        }
+        // Still pending — do nothing, let native behavior continue
+        return;
+    }
+    // ── Normal drag logic (committed) ──
+    const moveDelta = clientY - dragState.startY;
+    dragState.deltaY = clientY - dragState.lastY;
+    dragState.lastY = clientY;
+    pushHistory(clientY);
+    if (scrollableElement)
+        isScrolledToTop = scrollableElement.scrollTop <= 1;
+    if (isScrolledToTop && moveDelta > 0)
+        dragState.shouldPreventScroll = true;
+    if (!dragState.shouldPreventScroll)
+        return;
+    e.preventDefault();
+    let translateY = dragState.currentY + moveDelta;
+    if (translateY < 0)
+        translateY = overdragResistance(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);
+}
+function handleTouchEnd(e) {
+    if (e.touches.length > 0 || !dragState.isTouchActive)
+        return;
+    dragState.isTouchActive = false;
+    // ── Two-phase: pending never resolved (tap) → let native click fire ──
+    if (dragState.isPending) {
+        resetPendingState();
+        return;
+    }
+    // ── Committed drag from interactive element → suppress ghost click ──
+    if (dragState.committed && dragState.isInteractiveStart) {
+        suppressNextClick();
+    }
+    resetPendingState();
+    if (!dragState.shouldPreventScroll) {
+        isDragging = false;
+        return;
+    }
+    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);
+            }
+        });
+    }
+}
+// ============================================
+// POINTER EVENT HANDLERS (Desktop)
+// ============================================
+function handlePointerDown(e) {
+    if (e.pointerType === 'touch' || e.button !== 0 || dragState.activePointerId !== null)
+        return;
+    const target = e.target;
+    const inDraggableArea = isInDraggableArea(target);
+    const inScrollable = !!target.closest('[data-bottom-sheet-scroll]');
+    const isInteractiveTarget = isInteractive(target);
+    const shouldIgnoreDragTarget = shouldIgnoreDrag(target);
+    // data-bottom-sheet-no-drag: treat as fully default element — no tracking at all
+    if (shouldIgnoreDragTarget && !inDraggableArea)
+        return;
+    if (scrollableElement)
+        isScrolledToTop = scrollableElement.scrollTop <= 1;
+    if (inScrollable && !isScrolledToTop && !inDraggableArea)
+        return;
+    dragState.activePointerId = e.pointerId;
+    initDragTracking(e.clientX, e.clientY);
+    // Interactive element NOT in draggable area:
+    // Enter pending state — don't commit yet, preserve native focus/click
+    if (isInteractiveTarget && !inDraggableArea) {
+        dragState.isPending = true;
+        dragState.isInteractiveStart = true;
+        dragState.committed = false;
+        dragState.inScrollable = inScrollable;
+        // Do NOT call e.preventDefault() — preserve focus for inputs
+        // Do NOT call setPointerCapture — allow native hover/click behavior
+        // Do NOT set isDragging or disable transitions
+        return;
+    }
+    // Non-interactive element: immediately commit to dragging
+    dragState.isPending = false;
+    dragState.isInteractiveStart = false;
+    dragState.committed = true;
+    transitionDuration = '0s';
+    if (scaleTarget)
+        scaleTarget.style.transition = 'none';
+    sheetRef?.setPointerCapture(e.pointerId);
+    isDragging = true;
+    e.preventDefault();
+}
+function handlePointerMove(e) {
+    if (e.pointerType === 'touch' || dragState.activePointerId !== e.pointerId)
+        return;
+    if (!isDragging && !dragState.isPending)
+        return;
+    const clientY = e.clientY;
+    const clientX = e.clientX;
+    // ── Two-phase: resolve pending gesture from interactive element ──
+    if (dragState.isPending) {
+        pushHistory(clientY);
+        const result = resolvePendingGesture(clientX, clientY);
+        if (result === 'drag') {
+            // Vertical intent wins → commit to drag
+            commitToDrag(clientY);
+            sheetRef?.setPointerCapture(e.pointerId);
+            e.preventDefault();
+            return; // First real drag frame happens on next move
+        }
+        if (result === 'abort') {
+            // Horizontal intent wins → abort, let native behavior
+            dragState.isPending = false;
+            dragState.committed = false;
+            dragState.activePointerId = null;
+            dragState.isInteractiveStart = false;
+            return;
+        }
+        // Still pending — do nothing
+        return;
+    }
+    // ── Normal drag logic (committed) ──
+    dragState.deltaY = clientY - dragState.lastY;
+    dragState.lastY = clientY;
+    pushHistory(clientY);
+    let translateY = dragState.currentY + clientY - dragState.startY;
+    if (translateY < 0)
+        translateY = overdragResistance(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);
+    e.preventDefault();
+}
+function handlePointerUp(e) {
+    if (e.pointerType === 'touch' || dragState.activePointerId !== e.pointerId)
+        return;
+    try {
+        sheetRef?.releasePointerCapture(e.pointerId);
+    }
+    catch {
+    }
+    dragState.activePointerId = null;
+    // ── Two-phase: pending never resolved (tap) → let native click fire ──
+    if (dragState.isPending) {
+        resetPendingState();
+        return;
+    }
+    // ── Committed drag from interactive element → suppress ghost click ──
+    if (dragState.committed && dragState.isInteractiveStart) {
+        suppressNextClick();
+    }
+    resetPendingState();
+    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);
+            }
+        });
+    }
+}
+function handlePointerCancel(e) {
+    if (e.pointerType === 'touch' || dragState.activePointerId !== e.pointerId)
+        return;
+    try {
+        sheetRef?.releasePointerCapture(e.pointerId);
+    }
+    catch {
+    }
+    dragState.activePointerId = null;
+    // If pending, just reset — nothing visual happened
+    if (dragState.isPending) {
+        resetPendingState();
+        return;
+    }
+    resetPendingState();
+    if (!isDragging)
+        return;
+    isDragging = false;
+    snapTo(findNearestSnapPoint(currentTranslateY, 0));
+}
+function handleCloseButtonClick(e) {
+    e.stopPropagation();
+    doClose();
+}
+function handleBackdropClick(e) {
+    if (!closeOnBackdrop || e.target !== backdropRef || isDragging || isAnimating)
+        return;
+    doClose();
+}
+function handleKeydown(e) {
+    if (e.key === 'Escape' && isVisible && bottomSheetStore.isTopmost(id)) {
+        e.preventDefault();
+        doClose();
+    }
+}
+// Svelte action for touch events
+function touchEvents(node) {
+    node.addEventListener('touchstart', handleTouchStart, { passive: false });
+    node.addEventListener('touchmove', handleTouchMove, { passive: false });
+    node.addEventListener('touchend', handleTouchEnd, { passive: true });
+    return {
+        destroy() {
+            node.removeEventListener('touchstart', handleTouchStart);
+            node.removeEventListener('touchmove', handleTouchMove);
+            node.removeEventListener('touchend', handleTouchEnd);
+        }
+    };
+}
+</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>