sheer-ui 0.4.2 → 0.5.0

package/dist/internal/vaul/use-position-fixed.svelte.js

@@ -0,0 +1,111 @@
+import { needsIOSFixedBodyScrollLock } from './browser.js';
+import { untrack } from 'svelte';
+import { scrollY } from 'svelte/reactivity/window';
+let previousBodyPosition = null;
+/**
+ * This hook is necessary to prevent buggy behavior on iOS devices (need to test on Android).
+ * I won't get into too much detail about what bugs it solves, but so far I've found that setting the body to `position: fixed` is the most reliable way to prevent those bugs.
+ * Issues that this hook solves:
+ * https://github.com/emilkowalski/vaul/issues/435
+ * https://github.com/emilkowalski/vaul/issues/433
+ * And more that I discovered, but were just not reported.
+ */
+export function usePositionFixed({ open, modal, nested, hasBeenOpened, preventScrollRestoration, noBodyStyles, }) {
+    let activeUrl = $state(typeof window !== 'undefined' ? window.location.href : '');
+    function setPositionFixed() {
+        // All browsers on iOS will return true here.
+        if (!needsIOSFixedBodyScrollLock())
+            return;
+        // If previousBodyPosition is already set, don't set it again.
+        if (previousBodyPosition === null && open.current && !noBodyStyles.current) {
+            previousBodyPosition = {
+                position: document.body.style.position,
+                top: document.body.style.top,
+                left: document.body.style.left,
+                height: document.body.style.height,
+                right: 'unset',
+            };
+            // Update the dom inside an animation frame
+            const { scrollX, innerHeight } = window;
+            const scrollPos = scrollY.current ?? 0;
+            document.body.style.setProperty('position', 'fixed', 'important');
+            Object.assign(document.body.style, {
+                top: `${-scrollPos}px`,
+                left: `${-scrollX}px`,
+                right: '0px',
+                height: 'auto',
+            });
+            window.setTimeout(() => window.requestAnimationFrame(() => {
+                // Attempt to check if the bottom bar appeared due to the position change
+                const bottomBarHeight = innerHeight - window.innerHeight;
+                if (bottomBarHeight && scrollPos >= innerHeight) {
+                    // Move the content further up so that the bottom bar doesn't hide it
+                    document.body.style.top = `${-(scrollPos + bottomBarHeight)}px`;
+                }
+            }), 300);
+        }
+    }
+    function restorePositionSetting() {
+        // All browsers on iOS will return true here.
+        if (!needsIOSFixedBodyScrollLock())
+            return;
+        if (previousBodyPosition !== null && !noBodyStyles.current) {
+            // Convert the position from "px" to Int
+            const y = -parseInt(document.body.style.top, 10);
+            const x = -parseInt(document.body.style.left, 10);
+            // Restore styles
+            Object.assign(document.body.style, previousBodyPosition);
+            window.requestAnimationFrame(() => {
+                if (preventScrollRestoration.current && activeUrl !== window.location.href) {
+                    activeUrl = window.location.href;
+                    return;
+                }
+                window.scrollTo(x, y);
+            });
+            previousBodyPosition = null;
+        }
+    }
+    $effect(() => {
+        const _modal = modal.current;
+        const _activeUrl = activeUrl;
+        return untrack(() => {
+            if (!modal.current)
+                return;
+            return () => {
+                if (typeof document === 'undefined')
+                    return;
+                // Another drawer is opened, safe to ignore the execution
+                const hasDrawerOpened = !!document.querySelector('[data-vaul-drawer]');
+                if (hasDrawerOpened)
+                    return;
+                restorePositionSetting();
+            };
+        });
+    });
+    $effect(() => {
+        const _open = open.current;
+        const _hasBeenOpened = hasBeenOpened();
+        const _activeUrl = activeUrl;
+        const _modal = modal.current;
+        const _nested = nested.current;
+        untrack(() => {
+            if (nested.current || !hasBeenOpened())
+                return;
+            // This is needed to force Safari toolbar to show **before** the drawer starts animating to prevent a gnarly shift from happening
+            if (open.current) {
+                // avoid for standalone mode (PWA)
+                const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+                !isStandalone && setPositionFixed();
+                if (!modal.current) {
+                    window.setTimeout(() => {
+                        restorePositionSetting();
+                    }, 500);
+                }
+            }
+            else {
+                restorePositionSetting();
+            }
+        });
+    });
+    return { restorePositionSetting };
+}

package/dist/internal/vaul/use-prevent-scroll.svelte.d.ts

@@ -0,0 +1,23 @@
+interface PreventScrollOptions {
+    /** Whether the scroll lock is disabled. */
+    isDisabled: () => boolean;
+}
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ *
+ * The actual body-style lock (overflow/scrollbar-compensation/pointer-events) is delegated to
+ * `BodyScrollLock` — the same shared, refcounted lock Dialog/Sheet/Select/Popover use — so a
+ * Drawer opened over (or under) one of those doesn't run two uncoordinated scroll-lock strategies
+ * at once. The lock is constructed inside this effect and released by the effect's cleanup, so
+ * register/unregister follow *this* effect's re-run/teardown — "acquire while enabled, release
+ * the moment it's disabled". The iOS touch/focus/scroll workaround above stays Drawer-specific.
+ *
+ * Both are constructed inside `untrack` — their own internal reads/writes (lockMap bookkeeping,
+ * refcounting) must not become dependencies of *this* effect, or a write during construction can
+ * retrigger the very effect that's constructing it.
+ */
+export declare const usePreventScroll: (opts: PreventScrollOptions) => void;
+export declare function isInput(target: Element): boolean;
+export {};

package/dist/internal/vaul/use-prevent-scroll.svelte.js

@@ -0,0 +1,232 @@
+// This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/overlays/usePreventScroll.ts
+import { isIOS, selfAndAncestors } from '../tools/utils/dom.js';
+import { BROWSER } from 'esm-env';
+import { isWebKit } from './browser.js';
+import { SharedState } from '../shared-state.svelte.js';
+import { BodyScrollLock } from '../body-scroll-lock.svelte.js';
+import { on } from 'svelte/events';
+import { getAbortSignal, untrack } from 'svelte';
+const visualViewport = BROWSER && window.visualViewport;
+const isScrollable = (node, checkForOverflow) => {
+    if (!node)
+        return false;
+    const style = window.getComputedStyle(node);
+    const root = document.scrollingElement || document.documentElement;
+    let scrollable = /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+    // Root element has `visible` overflow by default, but is scrollable nonetheless.
+    if (node === root && style.overflow !== 'hidden') {
+        scrollable = true;
+    }
+    if (scrollable && checkForOverflow) {
+        scrollable = node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
+    }
+    return scrollable;
+};
+// `node` itself is never the answer: callers want the *enclosing* scroller, and both branches of
+// the upstream `isScrollable(node) ? node.parentElement : node` seed skipped it either way.
+const getScrollParent = (node, checkForOverflow) => {
+    for (const el of selfAndAncestors(node.parentElement)) {
+        if (isScrollable(el, checkForOverflow))
+            return el;
+    }
+    return document.scrollingElement || document.documentElement;
+};
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set(['checkbox', 'radio', 'range', 'color', 'file', 'image', 'button', 'submit', 'reset']);
+// Shared across every usePreventScroll consumer: the iOS WebKit touch/focus/scroll workaround
+// attaches on the first active caller and tears down when the last one releases. This is separate
+// from body-lock coordination below — it's Drawer-specific (dragging a sheet on iOS), not
+// something Dialog/Popover/Select need.
+const preventScroll = new SharedState(() => {
+    // Setup runs inside the effect (matching upstream react-spectrum's useEffect timing) so the
+    // workaround can ride the effect's abort signal; the signal aborts when the shared root is
+    // disposed, i.e. when the last consumer releases.
+    $effect(() => {
+        // Upstream gates on isIOS() && isWebKit(): iOS 17.4+ allows non-WebKit engines in the EU,
+        // and those don't have WebKit's scroll-lock quirks.
+        if (!isIOS || !isWebKit())
+            return;
+        preventScrollMobileWebKit(getAbortSignal());
+    });
+});
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ *
+ * The actual body-style lock (overflow/scrollbar-compensation/pointer-events) is delegated to
+ * `BodyScrollLock` — the same shared, refcounted lock Dialog/Sheet/Select/Popover use — so a
+ * Drawer opened over (or under) one of those doesn't run two uncoordinated scroll-lock strategies
+ * at once. The lock is constructed inside this effect and released by the effect's cleanup, so
+ * register/unregister follow *this* effect's re-run/teardown — "acquire while enabled, release
+ * the moment it's disabled". The iOS touch/focus/scroll workaround above stays Drawer-specific.
+ *
+ * Both are constructed inside `untrack` — their own internal reads/writes (lockMap bookkeeping,
+ * refcounting) must not become dependencies of *this* effect, or a write during construction can
+ * retrigger the very effect that's constructing it.
+ */
+export const usePreventScroll = (opts) => {
+    $effect(() => {
+        if (opts.isDisabled())
+            return;
+        const lock = untrack(() => {
+            const lock = new BodyScrollLock(true);
+            preventScroll.get();
+            return lock;
+        });
+        return () => lock.release();
+    });
+};
+// Mobile Safari is a whole different beast. Even with overflow: hidden,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Set `overscroll-behavior: contain` on nested scrollable regions so they do not scroll the page when at
+//    the top or bottom. Work around a bug where this does not work when the element does not actually overflow
+//    by preventing default in a `touchmove` event. This is best effort: we can't prevent default when pinch
+//    zooming or when an element contains text selection, which may allow scrolling in some cases.
+// 3. Override focus to prevent WebKit's native page scroll toward the focused input, then scroll it into
+//    view ourselves within its scroll parents.
+function preventScrollMobileWebKit(signal) {
+    let scrollable;
+    let allowTouchMove = false;
+    const onTouchStart = (e) => {
+        // Store the nearest scrollable parent element from the element that the user touched.
+        const target = e.target;
+        scrollable = isScrollable(target) ? target : getScrollParent(target, true);
+        allowTouchMove = false;
+        // If the target is selected, don't preventDefault in touchmove to allow the user to adjust the selection.
+        const selection = target.ownerDocument.defaultView?.getSelection();
+        if (selection && !selection.isCollapsed && selection.containsNode(target, true)) {
+            allowTouchMove = true;
+        }
+        // If this is a range input, allow touch move to allow the user to adjust the slider value.
+        if (e.composedPath().some((el) => el instanceof HTMLInputElement && el.type === 'range')) {
+            allowTouchMove = true;
+        }
+        // If this is a focused input element with a selected range, allow the user to drag the selection handles.
+        if ('selectionStart' in target &&
+            'selectionEnd' in target &&
+            target.selectionStart < target.selectionEnd &&
+            target.ownerDocument.activeElement === target) {
+            allowTouchMove = true;
+        }
+    };
+    // Prevent scrolling up when at the top and scrolling down when at the bottom
+    // of a nested scrollable area, otherwise mobile Safari will start scrolling
+    // the window instead.
+    // This must be applied before the touchstart event as of iOS 26, so inject it as a <style> element.
+    const style = document.createElement('style');
+    style.textContent = '@layer { * { overscroll-behavior: contain; } }';
+    document.head.prepend(style);
+    const onTouchMove = (e) => {
+        // Allow pinch-zooming.
+        if (e.touches.length === 2 || allowTouchMove) {
+            return;
+        }
+        // Prevent scrolling the window.
+        if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
+            e.preventDefault();
+            return;
+        }
+        // overscroll-behavior should prevent scroll chaining, but currently does not
+        // if the element doesn't actually overflow. https://bugs.webkit.org/show_bug.cgi?id=243452
+        // This checks that both the width and height do not overflow, otherwise we might
+        // block horizontal scrolling too. In that case, adding `touch-action: pan-x` to
+        // the element will prevent vertical page scrolling. We can't add that automatically
+        // because it must be set before the touchstart event.
+        if (scrollable.scrollHeight === scrollable.clientHeight && scrollable.scrollWidth === scrollable.clientWidth) {
+            e.preventDefault();
+        }
+    };
+    const onBlur = (e) => {
+        const target = e.target;
+        const relatedTarget = e.relatedTarget;
+        if (relatedTarget && isInput(relatedTarget)) {
+            // Focus without scrolling the whole page, and then scroll into view manually.
+            relatedTarget.focus({ preventScroll: true });
+            scrollIntoViewWhenReady(relatedTarget, isInput(target));
+        }
+        else if (!relatedTarget) {
+            // When tapping the Done button on the keyboard, focus moves to the body.
+            // FocusScope will then restore focus back to the input. Later when tapping
+            // the same input again, it is already focused, so no blur event will fire,
+            // resulting in the flow above never running and Safari's native scrolling occurring.
+            // Instead, move focus to the parent focusable element (e.g. the dialog).
+            const focusable = target.parentElement?.closest('[tabindex]');
+            focusable?.focus({ preventScroll: true });
+        }
+    };
+    // Override programmatic focus to scroll into view without scrolling the whole page.
+    const focus = HTMLElement.prototype.focus;
+    HTMLElement.prototype.focus = function (options) {
+        // Track whether the keyboard was already visible before.
+        const activeElement = document.activeElement;
+        const wasKeyboardVisible = activeElement != null && isInput(activeElement);
+        // Focus the element without scrolling the page.
+        focus.call(this, { ...options, preventScroll: true });
+        if (!options || !options.preventScroll) {
+            scrollIntoViewWhenReady(this, wasKeyboardVisible);
+        }
+    };
+    on(document, 'touchstart', onTouchStart, { passive: false, capture: true, signal });
+    on(document, 'touchmove', onTouchMove, { passive: false, capture: true, signal });
+    on(document, 'blur', onBlur, { capture: true, signal });
+    signal.addEventListener('abort', () => {
+        style.remove();
+        HTMLElement.prototype.focus = focus;
+    });
+}
+function scrollIntoViewWhenReady(target, wasKeyboardVisible) {
+    if (wasKeyboardVisible || !visualViewport) {
+        // If the keyboard was already visible, scroll the target into view immediately.
+        scrollIntoView(target);
+    }
+    else {
+        // Otherwise, wait for the visual viewport to resize before scrolling so we can
+        // measure the correct position to scroll to.
+        visualViewport.addEventListener('resize', () => scrollIntoView(target), { once: true });
+    }
+}
+function scrollIntoView(target) {
+    const root = document.scrollingElement || document.documentElement;
+    let nextTarget = target;
+    while (nextTarget && nextTarget !== root) {
+        // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
+        const scrollable = getScrollParent(nextTarget);
+        if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) {
+            const scrollableRect = scrollable.getBoundingClientRect();
+            const targetRect = nextTarget.getBoundingClientRect();
+            if (targetRect.top < scrollableRect.top || targetRect.bottom > scrollableRect.top + nextTarget.clientHeight) {
+                let bottom = scrollableRect.bottom;
+                if (visualViewport) {
+                    bottom = Math.min(bottom, visualViewport.offsetTop + visualViewport.height);
+                }
+                // Center within the viewport.
+                const adjustment = targetRect.top - scrollableRect.top - ((bottom - scrollableRect.top) / 2 - targetRect.height / 2);
+                scrollable.scrollTo({
+                    // Clamp to the valid range to prevent over-scrolling.
+                    top: Math.max(0, Math.min(scrollable.scrollHeight - scrollable.clientHeight, scrollable.scrollTop + adjustment)),
+                    behavior: 'smooth',
+                });
+            }
+        }
+        nextTarget = scrollable.parentElement;
+    }
+}
+export function isInput(target) {
+    return ((target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+        target instanceof HTMLTextAreaElement ||
+        (target instanceof HTMLElement && target.isContentEditable));
+}

package/dist/internal/vaul/use-snap-points.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { ReadableBoxedValues, WritableBoxedValues } from '../tools/index.js';
+import type { DrawerDirection, Getters } from './types.js';
+export declare function useSnapPoints({ snapPoints, drawerNode: drawerNode, overlayNode: overlayNode, fadeFromIndex, setOpenTime, direction, container, snapToSequentialPoint, activeSnapPoint, open, isReleasing, }: Getters<{
+    drawerNode: HTMLElement | null;
+    overlayNode: HTMLElement | null;
+    isReleasing: boolean;
+}> & {
+    setOpenTime: (time: number) => void;
+} & WritableBoxedValues<{
+    activeSnapPoint: number | string | null | undefined;
+    open: boolean;
+}> & ReadableBoxedValues<{
+    direction: DrawerDirection;
+    container: HTMLElement | null | undefined;
+    snapToSequentialPoint: boolean;
+    fadeFromIndex: number | undefined;
+    snapPoints: (number | string)[] | undefined;
+}>): {
+    readonly isLastSnapPoint: true | null;
+    readonly shouldFade: boolean;
+    readonly activeSnapPointIndex: number | undefined;
+    readonly snapPointsOffset: number[];
+    getPercentageDragged: (absDraggedDistance: number, isDraggingDown: boolean) => number | null;
+    onRelease: ({ draggedDistance, closeDrawer, velocity, dismissible, }: {
+        draggedDistance: number;
+        closeDrawer: () => void;
+        velocity: number;
+        dismissible: boolean;
+    }) => void;
+    onDrag: ({ draggedDistance }: {
+        draggedDistance: number;
+    }) => void;
+};

package/dist/internal/vaul/use-snap-points.svelte.js

@@ -0,0 +1,180 @@
+import { applyStyle, isVertical } from './helpers.js';
+import { VELOCITY_THRESHOLD } from './constants.js';
+import { untrack } from 'svelte';
+import { innerWidth, innerHeight } from 'svelte/reactivity/window';
+export function useSnapPoints({ snapPoints, drawerNode: drawerNode, overlayNode: overlayNode, fadeFromIndex, setOpenTime, direction, container, snapToSequentialPoint, activeSnapPoint, open, isReleasing, }) {
+    const isLastSnapPoint = $derived(activeSnapPoint.current === snapPoints.current?.[snapPoints.current.length - 1] || null);
+    const activeSnapPointIndex = $derived(snapPoints.current?.findIndex((snapPoint) => snapPoint === activeSnapPoint.current));
+    // At-or-above fadeFromIndex (upstream's snapToPoint fades the overlay for any
+    // target >= fadeFromIndex, not just the exact point); drives the overlay's
+    // data-vaul-snap-points-overlay attribute, whose stylesheet rules own the fade.
+    const shouldFade = $derived((snapPoints.current &&
+        snapPoints.current.length > 0 &&
+        (fadeFromIndex.current || fadeFromIndex.current === 0) &&
+        !Number.isNaN(fadeFromIndex.current) &&
+        activeSnapPointIndex !== undefined &&
+        activeSnapPointIndex >= fadeFromIndex.current) ||
+        !snapPoints.current);
+    const snapPointsOffset = $derived.by(() => {
+        open.current;
+        const winWidth = innerWidth.current;
+        const winHeight = innerHeight.current;
+        const windowDimensions = winWidth !== undefined && winHeight !== undefined ? { innerWidth: winWidth, innerHeight: winHeight } : undefined;
+        const containerSize = container.current
+            ? {
+                width: container.current.getBoundingClientRect().width,
+                height: container.current.getBoundingClientRect().height,
+            }
+            : windowDimensions
+                ? { width: windowDimensions.innerWidth, height: windowDimensions.innerHeight }
+                : { width: 0, height: 0 };
+        return (snapPoints.current?.map((snapPoint) => {
+            const isPx = typeof snapPoint === 'string';
+            let snapPointAsNumber = 0;
+            if (isPx) {
+                snapPointAsNumber = parseInt(snapPoint, 10);
+            }
+            if (isVertical(direction.current)) {
+                const height = isPx ? snapPointAsNumber : windowDimensions ? snapPoint * containerSize.height : 0;
+                if (windowDimensions) {
+                    return direction.current === 'bottom' ? containerSize.height - height : -containerSize.height + height;
+                }
+                return height;
+            }
+            const width = isPx ? snapPointAsNumber : windowDimensions ? snapPoint * containerSize.width : 0;
+            if (windowDimensions) {
+                return direction.current === 'right' ? containerSize.width - width : -containerSize.width + width;
+            }
+            return width;
+        }) ?? []);
+    });
+    const activeSnapPointOffset = $derived(activeSnapPointIndex != null ? snapPointsOffset[activeSnapPointIndex] : null);
+    const onSnapPointChange = (activeSnapPointIndex) => snapPoints.current && activeSnapPointIndex === snapPointsOffset.length - 1 && setOpenTime(performance.now());
+    function snapToPoint(dimension) {
+        const newSnapPointIndex = snapPointsOffset?.findIndex((snapPointDim) => snapPointDim === dimension) ?? null;
+        onSnapPointChange(newSnapPointIndex);
+        applyStyle(drawerNode(), {
+            transform: isVertical(direction.current) ? `translate3d(0, ${dimension}px, 0)` : `translate3d(${dimension}px, 0, 0)`,
+        });
+        // Hand the fade back to the data-vaul-snap-points-overlay stylesheet rules:
+        // clear the drag-time inline opacity and let the activeSnapPoint write below
+        // flip the attribute (via shouldFade); stylesheet transitions animate both nodes.
+        drawerNode()?.style.removeProperty('transition');
+        overlayNode()?.style.removeProperty('opacity');
+        activeSnapPoint.current = snapPoints.current?.[Math.max(newSnapPointIndex, 0)];
+    }
+    $effect(() => {
+        const _activeSnapPoint = activeSnapPoint.current;
+        const _open = open.current;
+        untrack(() => {
+            // we only want to snap to the next point if we are closing via a
+            // means other than release, otherwise a race condition can occur
+            // where the drawer snaps to the previous point and then closes,
+            // rather than continuing to close from the current point
+            const releasing = isReleasing();
+            if (!activeSnapPoint.current || releasing)
+                return;
+            const newIndex = snapPoints.current?.findIndex((snapPoint) => snapPoint === activeSnapPoint.current) ?? -1;
+            if (snapPointsOffset && newIndex !== -1 && typeof snapPointsOffset[newIndex] === 'number') {
+                if (snapPointsOffset[newIndex] === activeSnapPoint.current)
+                    return;
+                snapToPoint(snapPointsOffset[newIndex]);
+            }
+        });
+    });
+    function onRelease({ draggedDistance, closeDrawer, velocity, dismissible, }) {
+        if (fadeFromIndex.current === undefined)
+            return;
+        const dir = direction.current;
+        const currentPosition = dir === 'bottom' || dir === 'right' ? (activeSnapPointOffset ?? 0) - draggedDistance : (activeSnapPointOffset ?? 0) + draggedDistance;
+        const isFirst = activeSnapPointIndex === 0;
+        const hasDraggedUp = draggedDistance > 0;
+        if (!snapToSequentialPoint.current && velocity > 2 && !hasDraggedUp) {
+            if (dismissible) {
+                closeDrawer();
+            }
+            else {
+                snapToPoint(snapPointsOffset[0]);
+            }
+            return;
+        }
+        if (!snapToSequentialPoint.current && velocity > 2 && hasDraggedUp && snapPointsOffset && snapPoints.current) {
+            snapToPoint(snapPointsOffset[snapPoints.current.length - 1]);
+            return;
+        }
+        // Find the closest snap point to the current position
+        const closestSnapPoint = snapPointsOffset?.reduce((prev, curr) => {
+            if (typeof prev !== 'number' || typeof curr !== 'number')
+                return prev;
+            return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
+        });
+        const dim = isVertical(dir) ? (innerHeight.current ?? 0) : (innerWidth.current ?? 0);
+        if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < dim * 0.4) {
+            const dragDirection = hasDraggedUp ? 1 : -1; // 1 = up, -1 = down
+            // Don't do anything if we swipe upwards while being on the last snap point
+            if (dragDirection > 0 && isLastSnapPoint && snapPoints.current) {
+                snapToPoint(snapPointsOffset[snapPoints.current.length - 1]);
+                return;
+            }
+            if (isFirst && dragDirection < 0 && dismissible) {
+                closeDrawer();
+            }
+            if (activeSnapPointIndex === null)
+                return;
+            snapToPoint(snapPointsOffset[activeSnapPointIndex + dragDirection]);
+            return;
+        }
+        snapToPoint(closestSnapPoint);
+    }
+    const onDrag = ({ draggedDistance }) => {
+        if (activeSnapPointOffset == null)
+            return;
+        const dir = direction.current;
+        const bottomOrRight = dir === 'bottom' || dir === 'right';
+        const newValue = bottomOrRight ? activeSnapPointOffset - draggedDistance : activeSnapPointOffset + draggedDistance;
+        const lastSnapPoint = snapPointsOffset[snapPointsOffset.length - 1];
+        // Don't do anything if we exceed the last (biggest) snap point
+        if (bottomOrRight && newValue < lastSnapPoint)
+            return;
+        if (!bottomOrRight && newValue > lastSnapPoint)
+            return;
+        applyStyle(drawerNode(), {
+            transform: isVertical(dir) ? `translate3d(0, ${newValue}px, 0)` : `translate3d(${newValue}px, 0, 0)`,
+        });
+    };
+    const getPercentageDragged = (absDraggedDistance, isDraggingDown) => {
+        if (!snapPoints.current || typeof activeSnapPointIndex !== 'number' || !snapPointsOffset || fadeFromIndex.current === undefined)
+            return null;
+        const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex.current - 1;
+        const isOverlaySnapPointOrHigher = activeSnapPointIndex >= fadeFromIndex.current;
+        if (isOverlaySnapPointOrHigher && isDraggingDown)
+            return 0;
+        if (isOverlaySnapPoint && !isDraggingDown)
+            return 1;
+        if (!shouldFade && !isOverlaySnapPoint)
+            return null;
+        const targetSnapPointIndex = isOverlaySnapPoint ? activeSnapPointIndex + 1 : activeSnapPointIndex - 1;
+        const snapPointDistance = isOverlaySnapPoint
+            ? snapPointsOffset[targetSnapPointIndex] - snapPointsOffset[targetSnapPointIndex - 1]
+            : snapPointsOffset[targetSnapPointIndex + 1] - snapPointsOffset[targetSnapPointIndex];
+        const percentageDragged = absDraggedDistance / Math.abs(snapPointDistance);
+        return isOverlaySnapPoint ? 1 - percentageDragged : percentageDragged;
+    };
+    return {
+        get isLastSnapPoint() {
+            return isLastSnapPoint;
+        },
+        get shouldFade() {
+            return shouldFade;
+        },
+        get activeSnapPointIndex() {
+            return activeSnapPointIndex;
+        },
+        get snapPointsOffset() {
+            return snapPointsOffset;
+        },
+        getPercentageDragged,
+        onRelease,
+        onDrag,
+    };
+}

package/dist/time.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Wall-clock time helpers + duration display over plain ISO 8601 "HH:MM" strings. Pure, zone-free minute math.
+ * The time-picker block's currency, and the display door every consumer renders wall-clock through.
+ */
+/** "HH:MM" → minutes since midnight. Extra `:SS` is ignored rather than rejected — the booking grid is whole minutes. */
+export declare const timeToMinutes: (time: string) => number;
+/** Non-throwing {@link timeToMinutes}: `null` unless `time` is "HH:MM" (with the same tolerated `:SS`) — the
+ *  lenient seam for free-form strings that were never decoded through the `TimeString` brand. */
+export declare const tryTimeToMinutes: (time: string) => number | null;
+/** Minutes since midnight → "HH:MM", wrapping at midnight in either direction (1440 → "00:00", -30 → "23:30"). */
+export declare const minutesToTime: (minutes: number) => string;
+/** Wall-clock time ("HH:MM" or minutes) → "9:30 AM", or "09:30" with 24-hour display enabled. */
+export declare const formatTimeDisplay: (time: string | number, options?: {
+    use24Hour?: boolean;
+}) => string;
+/** Wall-clock pair ("HH:MM" or minutes) → "9:30 – 10:15 AM", or "09:30 – 10:15" with 24-hour display enabled.
+ *  `Intl.formatRange` only earns its keep compacting a shared AM/PM, so 24-hour display always joins individually
+ *  formatted endpoints — as do equal endpoints (`formatRange(x, x)` collapses to a single time where the caller
+ *  laid out a range) and ranges crossing or ending at midnight (an end of 1440 lands on the next epoch day, and
+ *  `Intl.formatRange` would add calendar dates). */
+export declare const formatTimeRange: (start: string | number, end: string | number, options?: {
+    use24Hour?: boolean;
+}) => string;
+/**
+ * The three duration styles, and where each belongs — the style is required so a call site states which
+ * register it is writing in rather than inheriting whichever helper it happened to import:
+ *
+ * - `compact` — "45m" / "1h 30m". Dense UI chrome where the unit is obvious from context (the time picker).
+ * - `short` — "30 min" / "1 hr 30 min". Every domain length: service duration, booking length, buffer.
+ * - `long` — "5 minutes" / "2 hours". Prose, where the duration sits inside a sentence.
+ */
+export type DurationStyle = 'compact' | 'short' | 'long';
+/** A length in whole minutes, rendered in one of the {@link DurationStyle}s. */
+export declare const formatDuration: (minutes: number, style: DurationStyle) => string;