@yourrealm/bottom-sheet 0.0.0-stage → 0.2.0

package/dist/sheet-C1fUpy71.js

@@ -0,0 +1,1448 @@
+'use client';
+import { t as __exportAll } from "./rolldown-runtime-DODCFbG6.js";
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/core/math.ts
+/** UIScrollView.DecelerationRate.normal. Used to project where a release would come to rest. */
+const DECELERATION = .998;
+/**
+* WWDC18 "Designing Fluid Interfaces": where would motion end if it just decelerated?
+* @param position current scrollTop (px)
+* @param velocity px/s, positive = towards larger scrollTop
+*/
+function project(position, velocity, d = DECELERATION) {
+	return position + velocity / 1e3 * (d / (1 - d));
+}
+/**
+* All resting positions for this layout, ascending: [closed], usable partials..., full.
+* A partial is usable when it is above 0 and well below full (MIN_DETENT_GAP); duplicates by position are dropped.
+* @param partials requested partial detents with their resolved positions
+* @param full scrollTop of the full detent = min(H, sheet height)
+* @param closable include `closed` (false for a sheet that can't be dismissed)
+*/
+function buildStops(partials, full, closable = true) {
+	const usable = partials.filter((s) => s.detent !== "closed" && s.detent !== "full" && s.top > 0 && s.top < full * .85).sort((a, b) => a.top - b.top).filter((s, i, all) => i === 0 || Math.abs(s.top - all[i - 1].top) >= 1);
+	return [
+		...closable ? [{
+			detent: "closed",
+			top: 0
+		}] : [],
+		...usable,
+		{
+			detent: "full",
+			top: full
+		}
+	];
+}
+/** The stop nearest to `top`. */
+function nearestStop(top, stops) {
+	let best = stops[0];
+	for (const s of stops) if (Math.abs(s.top - top) < Math.abs(best.top - top)) best = s;
+	return best;
+}
+/** The stop resting exactly at `top` (±tolerance), or null when between stops / inside content. */
+function stopAt(top, stops, tolerance = 2) {
+	return stops.find((s) => Math.abs(s.top - top) < tolerance) ?? null;
+}
+/**
+* The stop for a requested detent: itself when usable, otherwise the stop nearest to where it would have been.
+* @param rawTop where the requested detent would sit (px), used when it isn't a usable stop
+*/
+function resolveStop(d, rawTop, stops) {
+	return stops.find((s) => s.detent === d) ?? nearestStop(rawTop, stops);
+}
+/**
+* CSS-style cubic-bezier easing (x1, y1, x2, y2 within 0..1 on x): returns progress -> eased progress.
+* Solves x(t) = k by Newton's method with a bisection fallback.
+*/
+function cubicBezier(x1, y1, x2, y2) {
+	const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx;
+	const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by;
+	const x = (t) => ((ax * t + bx) * t + cx) * t;
+	const dx = (t) => (3 * ax * t + 2 * bx) * t + cx;
+	const y = (t) => ((ay * t + by) * t + cy) * t;
+	return (k) => {
+		if (k <= 0) return 0;
+		if (k >= 1) return 1;
+		let t = k;
+		for (let i = 0; i < 8; i++) {
+			const err = x(t) - k;
+			if (Math.abs(err) < 1e-6) return y(t);
+			const d = dx(t);
+			if (Math.abs(d) < 1e-6) break;
+			t -= err / d;
+		}
+		let lo = 0, hi = 1;
+		t = k;
+		for (let i = 0; i < 40; i++) {
+			const v = x(t);
+			if (Math.abs(v - k) < 1e-6) break;
+			if (v < k) lo = t;
+			else hi = t;
+			t = (lo + hi) / 2;
+		}
+		return y(t);
+	};
+}
+/** Material 3 "emphasized decelerate": for things arriving (a sheet opening or moving up). */
+const easeDecelerate = cubicBezier(.05, .7, .1, 1);
+/** Material 3 "emphasized accelerate": for things leaving (a sheet closing or moving down). */
+const easeAccelerate = cubicBezier(.3, 0, .8, .15);
+// src/core/controller.ts
+/** scrollTop at or below this counts as closed (browsers settle on sub-pixel values, e.g. 1.02 in Firefox). */
+const CLOSED_TOLERANCE = 2;
+const LOCK_QUIET_MS = 150;
+/** A fling can outlive a short quiet window and resume when overflow is restored (seen on Chrome and Firefox Android). */
+const LOCK_MIN_MS = 800;
+const WHEEL_GESTURE_GAP_MS = 250;
+const KEYBOARD_THRESHOLD = 120;
+const MAX_RETARGETS = 3;
+/** A resize this soon after a user scroll event is mid-gesture or mid-momentum: don't re-target. */
+const USER_SCROLL_QUIET = 100;
+const VELOCITY_WINDOW_MS = 80;
+/** A touch that starts this soon after a scroll event lands on moving content: it only stops the scroll. */
+const MOVING_MS = 100;
+/** A press is a tap while it moves less than this (px) and, on touch, ends within TAP_MS. */
+const TAP_SLOP = 10;
+const TAP_MS = 500;
+/** The click a dropped press would produce follows within this. */
+const CLICK_AFTER_MS = 1e3;
+/**
+* Arriving at closed closes the sheet only if we moved it there or the user touched, wheeled, dragged or pressed a
+* key within this long. Any other scroll (the browser scrolling a focused element into view, an app's
+* scrollIntoView, a test runner) that snaps to closed is undone. Long enough for a fling to finish.
+*/
+const STRAY_MS = 3e3;
+const INPUT_EVENTS = [
+	"touchstart",
+	"touchend",
+	"wheel",
+	"pointerdown",
+	"pointerup",
+	"keydown"
+];
+/**
+* Programmatic moves (open, close, snapTo, wheel steps, keyboard) are animated here, not by the browser's smooth
+* scroll: that took 660-770ms on a phone (Chrome/Firefox Android, measured 2026-11-01) and varies by browser.
+* Platform guidance for a sheet: ~400ms decelerating in, ~30% faster accelerating out.
+*/
+const GLIDE_UP_MS = 400;
+const GLIDE_DOWN_MS = 280;
+let htmlLocks = 0;
+let htmlPrev = {
+	overflow: "",
+	gutter: ""
+};
+function lockHtml() {
+	if (htmlLocks++ === 0) {
+		const html = document.documentElement;
+		htmlPrev = {
+			overflow: html.style.overflow,
+			gutter: html.style.scrollbarGutter
+		};
+		if (window.innerWidth - html.clientWidth > 0) html.style.scrollbarGutter = "stable";
+		html.style.overflow = "hidden";
+	}
+}
+function unlockHtml() {
+	if (htmlLocks > 0 && --htmlLocks === 0) {
+		const html = document.documentElement;
+		html.style.overflow = htmlPrev.overflow;
+		html.style.scrollbarGutter = htmlPrev.gutter;
+	}
+}
+function createSheetController(els, options) {
+	const { root, scroller, sheet } = els;
+	const markerHost = els.markers;
+	const dbg = (m) => options.debug?.(m);
+	const modal = options.modal ?? true;
+	let requested = [...options.detents];
+	let dismissible = options.dismissible ?? true;
+	let closing = false;
+	const closable = () => dismissible || closing;
+	let H = 0;
+	let full = 0;
+	let sheetH = 0;
+	let stops = [];
+	const markers = /* @__PURE__ */ new Map();
+	const closedMarker = makeMarker();
+	closedMarker.style.top = "0px";
+	markerHost.append(closedMarker);
+	const probe = document.createElement("div");
+	probe.setAttribute("aria-hidden", "true");
+	probe.style.cssText = "position:absolute;top:0;left:0;width:0;visibility:hidden;pointer-events:none";
+	markerHost.append(probe);
+	let isOpen = false;
+	let destroyed = false;
+	let touching = false;
+	let anchor = null;
+	let programmatic = false;
+	let target = null;
+	let current = null;
+	/** Last scroll event the user caused (finger, momentum, wheel): not ours, not the momentum lock's pin. */
+	let lastUserScroll = -Infinity;
+	let emitted = null;
+	let retries = 0;
+	let lock = null;
+	let unlockTimer;
+	let scrollEndTimer;
+	let lastWheel = 0;
+	let pageY = 0;
+	let keyboard = false;
+	let htmlLocked = false;
+	const releaseHtml = () => {
+		if (htmlLocked) unlockHtml();
+		htmlLocked = false;
+	};
+	const reducedMotion = () => matchMedia("(prefers-reduced-motion: reduce)").matches;
+	/** Where a detent would sit (px), whether or not it is usable in this layout. */
+	function rawTop(d) {
+		if (d === "closed") return 0;
+		if (d === "full") return full;
+		if (typeof d === "number") return H * d;
+		probe.style.height = d === "header" ? `calc(${headerBottom()}px + var(--ybs-header-detent-offset, 0px))` : d;
+		return probe.getBoundingClientRect().height;
+	}
+	/**
+	* The `'header'` detent: how far the header reaches into the sheet (its bottom edge), so the peek shows exactly
+	* the header. Measured only while the header isn't stuck (content scrolled moves a sticky header down the sheet);
+	* otherwise the last measurement is kept. Styles can add to it with --ybs-header-detent-offset (/styled's floating
+	* adds its bottom gap).
+	*/
+	let headerPx = 0;
+	function headerBottom() {
+		const header = sheet.querySelector("[data-ybs-header]");
+		if (!header) return 0;
+		if (scroller.scrollTop <= full + 1) {
+			const box = sheet.getBoundingClientRect();
+			const scale = sheet.offsetHeight > 0 ? box.height / sheet.offsetHeight : 1;
+			headerPx = (header.getBoundingClientRect().bottom - box.top) / (scale || 1);
+		}
+		return headerPx;
+	}
+	const resolve = (d) => resolveStop(d, rawTop(d), stops);
+	const pos = (d) => resolve(d).top;
+	/** The lowest resting detent that isn't closed; also where open() goes by default. */
+	const floor = () => stops.find((s) => s.detent !== "closed").detent;
+	function makeMarker() {
+		const m = document.createElement("div");
+		m.setAttribute("data-ybs-marker", "");
+		m.setAttribute("aria-hidden", "true");
+		return m;
+	}
+	function layout() {
+		H = scroller.clientHeight;
+		sheetH = sheet.offsetHeight;
+		full = Math.min(H, sheetH);
+		const partials = requested.filter((d) => d !== "closed" && d !== "full").map((d) => ({
+			detent: d,
+			top: rawTop(d)
+		}));
+		stops = buildStops(partials, full, closable());
+		root.style.setProperty("--ybs-h", `${H}px`);
+		root.style.setProperty("--ybs-header-h", `${headerBottom()}px`);
+		const bleed = root.querySelector("[data-ybs-bleed]");
+		if (bleed) bleed.style.colorScheme = getComputedStyle(sheet).colorScheme;
+		root.toggleAttribute("data-ybs-fit", sheetH < H);
+		closedMarker.hidden = !closable();
+		for (const [d, m] of markers) if (!requested.includes(d)) {
+			m.remove();
+			markers.delete(d);
+		}
+		for (const p of partials) {
+			let m = markers.get(p.detent);
+			if (!m) {
+				m = makeMarker();
+				closedMarker.after(m);
+				markers.set(p.detent, m);
+			}
+			m.style.top = `${p.top}px`;
+			m.toggleAttribute("data-ybs-catch", p.detent === "header");
+			m.hidden = !stops.some((s) => s.detent === p.detent);
+		}
+	}
+	function scrollToDetent(d) {
+		target = resolve(d).detent;
+		dbg(`scrollTo ${String(target)} (${Math.round(pos(target))})`);
+		programmatic = true;
+		anchor = null;
+		retries = 0;
+		unlock();
+		if (Math.abs(scroller.scrollTop - pos(target)) < 1) {
+			stopGlide();
+			requestAnimationFrame(onScrollEnd);
+			return;
+		}
+		glide();
+	}
+	let gliding = false;
+	let glideRaf = 0;
+	function glide() {
+		stopGlide();
+		if (target == null) return;
+		const from = scroller.scrollTop;
+		const up = pos(target) > from;
+		const ms = reducedMotion() ? 0 : up ? GLIDE_UP_MS : GLIDE_DOWN_MS;
+		if (ms === 0) {
+			scroller.scrollTop = pos(target);
+			requestAnimationFrame(onScrollEnd);
+			return;
+		}
+		const ease = up ? easeDecelerate : easeAccelerate;
+		gliding = true;
+		root.setAttribute("data-ybs-glide", "");
+		let t0 = null;
+		const step = (now) => {
+			if (destroyed || !gliding || target == null) return;
+			t0 ??= now;
+			const k = Math.min((now - t0) / ms, 1);
+			scroller.scrollTop = from + (pos(target) - from) * ease(k);
+			if (k < 1) glideRaf = requestAnimationFrame(step);
+			else {
+				stopGlide();
+				onScrollEnd();
+			}
+		};
+		glideRaf = requestAnimationFrame(step);
+	}
+	function stopGlide() {
+		if (!gliding) return;
+		gliding = false;
+		cancelAnimationFrame(glideRaf);
+		root.removeAttribute("data-ybs-glide");
+	}
+	let lockedAt = 0;
+	function clamp(top) {
+		dbg(`clamp @${Math.round(scroller.scrollTop)} -> ${Math.round(top)} (anchor ${anchor == null ? "-" : Math.round(anchor)})`);
+		lock = top;
+		lockedAt = performance.now();
+		scroller.style.overflowY = "hidden";
+		scroller.scrollTop = top;
+		armUnlock();
+		anchor = top;
+	}
+	function armUnlock() {
+		clearTimeout(unlockTimer);
+		const minLeft = LOCK_MIN_MS - (performance.now() - lockedAt);
+		unlockTimer = setTimeout(unlock, Math.max(LOCK_QUIET_MS, minLeft));
+	}
+	function unlock() {
+		if (lock == null) return;
+		const pinned = lock;
+		lock = null;
+		scroller.style.overflowY = "";
+		scroller.scrollTop = pinned;
+		dbg(`unlock @${Math.round(scroller.scrollTop)}`);
+		requestAnimationFrame(() => {
+			if (lock != null || touching || programmatic) return;
+			const st = scroller.scrollTop;
+			if (Math.abs(st - pinned) > 2) dbg(`drift after unlock: ${Math.round(pinned)} -> ${Math.round(st)}`);
+			onScrollEnd();
+		});
+	}
+	/**
+	* Paint the position vars. `drop` is how far a header drag has pulled the whole sheet down while its content
+	* stays scrolled (see detachedDrag).
+	*/
+	let scrolled = false;
+	let more = false;
+	function paint(st, drop = 0) {
+		const shown = Math.max(Math.min(st, full) - drop, 0);
+		const progress = full > 0 ? Math.min(Math.max(shown / full, 0), 1) : 0;
+		root.style.setProperty("--ybs-progress", String(progress));
+		root.style.setProperty("--ybs-visible", `${drop > 0 ? st : Math.min(st, full)}px`);
+		options.onProgress?.(progress, H > 0 ? shown / H : 0);
+		root.style.setProperty("--ybs-bleed", st > 4 && drop === 0 ? "1" : "0");
+		const s = st > full + 1;
+		if (s !== scrolled) {
+			scrolled = s;
+			root.toggleAttribute("data-ybs-scrolled", s);
+		}
+		const m = sheetH > H + 1 && st < scroller.scrollHeight - scroller.clientHeight - 2;
+		if (m !== more) {
+			more = m;
+			root.toggleAttribute("data-ybs-more", m);
+		}
+	}
+	function onScroll() {
+		const st = scroller.scrollTop;
+		lastScrollAt = performance.now();
+		if (!programmatic && lock == null) lastUserScroll = performance.now();
+		if (!detached) paint(st);
+		if (lock != null && !touching) {
+			if (Math.abs(st - lock) > .5) scroller.scrollTop = lock;
+			armUnlock();
+		} else if (!touching && !programmatic && anchor != null) {
+			if (anchor > full + 2 && st < full - 2 || anchor < full - 2 && st > full + 2) clamp(full);
+		}
+		if (!("onscrollend" in window)) {
+			clearTimeout(scrollEndTimer);
+			scrollEndTimer = setTimeout(onScrollEnd, 120);
+		}
+	}
+	function onScrollEnd() {
+		if (destroyed || gliding) return;
+		if (isOpen && !closing && full < 1 && programmatic) return;
+		const st = scroller.scrollTop;
+		dbg(`scrollend @${Math.round(st)} prog=${programmatic} target=${String(target)} lock=${String(lock)}`);
+		if (programmatic && target != null && !touching) {
+			const to = pos(target);
+			if (Math.abs(st - to) > 2 && retries++ < MAX_RETARGETS) {
+				glide();
+				return;
+			}
+		}
+		retries = 0;
+		if (root.getAttribute("data-ybs-drag") === "settle") root.removeAttribute("data-ybs-drag");
+		if (closing && isOpen && !belowFloor(st)) {
+			if (touching) dbg("closing: waiting for the finger to lift");
+			else scrollToDetent("closed");
+			return;
+		}
+		if (isOpen && !closing && !programmatic && !touching && belowFloor(st) && performance.now() - lastInputAt > STRAY_MS) {
+			const back = current && current !== "closed" ? current : floor();
+			dbg(`scrolled to closed without user input: back to ${String(back)}`);
+			scrollToDetent(back);
+			return;
+		}
+		const now = stopAt(st, stops)?.detent ?? null;
+		programmatic = false;
+		target = null;
+		current = now;
+		if (now != null && now !== "closed" && now !== emitted && isOpen) {
+			emitted = now;
+			options.onDetentChange?.(now);
+		}
+		if (isOpen && belowFloor(st)) {
+			if (touching) dbg(`at closed, waiting for the finger to lift (st=${st.toFixed(2)})`);
+			else settleAtClosed();
+		}
+	}
+	/**
+	* Resting where only closing makes sense: at 0, or, for a sheet that can't be dismissed, anywhere below its
+	* lowest detent. Firefox Android leaves a swipe there (46px under a 76px floor) instead of snapping up to it.
+	*/
+	function belowFloor(st) {
+		return st <= CLOSED_TOLERANCE || !closable() && st < pos(floor()) - CLOSED_TOLERANCE;
+	}
+	/** Resting at 0: close, or for a sheet that can't be dismissed, go back up to its floor. */
+	function settleAtClosed() {
+		if (closable()) finishClose();
+		else {
+			dbg("not dismissible: back to the lowest detent");
+			scrollToDetent(floor());
+		}
+	}
+	let lastScrollAt = -Infinity;
+	/** Last touch, wheel, pointer or key input on the sheet: scrolls after it are the user's (see STRAY_MS). */
+	let lastInputAt = -Infinity;
+	const onInput = () => lastInputAt = performance.now();
+	let press = null;
+	let dropClickUntil = 0;
+	const isOutside = (el) => el instanceof Element && !el.closest("[data-ybs-sheet]");
+	function onPressStart(e) {
+		dropClickUntil = 0;
+		const touch = e.pointerType !== "mouse";
+		if (!touch) endDrag?.();
+		if (!touch && e.button !== 0) return void (press = null);
+		const now = performance.now();
+		press = {
+			id: e.pointerId,
+			x: e.clientX,
+			y: e.clientY,
+			t: now,
+			touch,
+			moving: touch && now - lastScrollAt < MOVING_MS,
+			outside: isOutside(e.target),
+			dragged: false
+		};
+	}
+	function onPressMove(e) {
+		if (press?.id === e.pointerId && Math.hypot(e.clientX - press.x, e.clientY - press.y) > TAP_SLOP) press.dragged = true;
+	}
+	/** For drags that start below TAP_SLOP (the header drag starts at 4px). */
+	const markDragged = () => {
+		if (press) press.dragged = true;
+	};
+	function onPressEnd(e) {
+		const p = press;
+		press = null;
+		if (!p || p.id !== e.pointerId) return;
+		const now = performance.now();
+		if (p.moving || p.dragged) {
+			if (p.moving) dbg("tap stopped the scroll: click dropped");
+			dropClickUntil = now + CLICK_AFTER_MS;
+			return;
+		}
+		if (p.outside && (!p.touch || now - p.t < TAP_MS)) {
+			dropClickUntil = now + CLICK_AFTER_MS;
+			options.onOutsideTap?.();
+		}
+	}
+	const onPressCancel = () => press = null;
+	function onClickCapture(e) {
+		if (performance.now() > dropClickUntil) return;
+		dropClickUntil = 0;
+		e.preventDefault();
+		e.stopPropagation();
+	}
+	function onTouchStart() {
+		touching = true;
+		anchor = null;
+		if (closing) return;
+		stopGlide();
+		programmatic = false;
+		unlock();
+	}
+	function onTouchEnd(e) {
+		if (e.touches.length) return;
+		touching = false;
+		anchor = scroller.scrollTop;
+		dbg(`release @${Math.round(anchor)}`);
+		requestAnimationFrame(() => {
+			if (touching || !isOpen || destroyed) return;
+			if (closing && !gliding && !belowFloor(scroller.scrollTop)) {
+				dbg("finger lifted while closing: carry on");
+				scrollToDetent("closed");
+			} else if (!programmatic && belowFloor(scroller.scrollTop)) {
+				dbg("finger lifted at closed");
+				settleAtClosed();
+			}
+		});
+	}
+	let wheelStepped = false;
+	function onWheel(e) {
+		if (e.ctrlKey) return;
+		if (closing) return void e.preventDefault();
+		const t = performance.now();
+		const newGesture = t - lastWheel > WHEEL_GESTURE_GAP_MS;
+		lastWheel = t;
+		const st = scroller.scrollTop;
+		const dy = e.deltaY;
+		const inSheetTravel = st < full - 1 || st <= full + 1 && dy < 0;
+		if (newGesture) {
+			stopGlide();
+			unlock();
+			anchor = st;
+			programmatic = false;
+			wheelStepped = false;
+		}
+		const startedInContent = anchor != null && anchor > full + 1;
+		if (!inSheetTravel || dy === 0 || Math.abs(e.deltaX) > Math.abs(dy)) return;
+		e.preventDefault();
+		if (startedInContent) return;
+		if (wheelStepped) return;
+		wheelStepped = true;
+		const here = nearestStop(target != null ? pos(target) : st, stops);
+		const i = stops.indexOf(here);
+		const next = stops[Math.min(Math.max(i + (dy > 0 ? 1 : -1), 0), stops.length - 1)].detent;
+		dbg(`wheel step ${String(here.detent)} -> ${String(next)}`);
+		if (next !== here.detent) scrollToDetent(next);
+	}
+	let detached = false;
+	let dropAnim = 0;
+	/** Ends a running header drag without a release (a new press arrived first, or destroy). */
+	let endDrag = null;
+	function detachedDrag(e, handle) {
+		stopGlide();
+		unlock();
+		cancelAnimationFrame(dropAnim);
+		const st0 = scroller.scrollTop;
+		const y0 = e.clientY;
+		const samples = [{
+			t: e.timeStamp,
+			y: e.clientY
+		}];
+		let drop = 0;
+		let started = false;
+		touching = true;
+		programmatic = false;
+		anchor = null;
+		dbg(`detached drag start @${Math.round(st0)}`);
+		const setDrop = (d) => {
+			drop = d;
+			scroller.style.transform = d > 0 ? `translate3d(0, ${d}px, 0)` : "";
+			paint(st0, d);
+		};
+		const id = e.pointerId;
+		const move = (ev) => {
+			if (ev.pointerId !== id) return;
+			const dy = ev.clientY - y0;
+			if (!started && Math.abs(dy) < 4) return;
+			started = true;
+			detached = true;
+			markDragged();
+			if (handle.isConnected) handle.setPointerCapture(ev.pointerId);
+			root.setAttribute("data-ybs-drag", "active");
+			if (scroller.scrollTop !== st0) scroller.scrollTop = st0;
+			setDrop(Math.max(dy, 0));
+			samples.push({
+				t: ev.timeStamp,
+				y: ev.clientY
+			});
+			while (samples.length > 2 && ev.timeStamp - samples[0].t > VELOCITY_WINDOW_MS) samples.shift();
+		};
+		const stop = () => {
+			window.removeEventListener("pointermove", move, true);
+			window.removeEventListener("pointerup", up, true);
+			window.removeEventListener("pointercancel", up, true);
+			endDrag = null;
+			touching = false;
+			root.removeAttribute("data-ybs-drag");
+		};
+		const up = (ev) => {
+			if (ev.pointerId !== id) return;
+			stop();
+			if (!started) return;
+			const a = samples[0];
+			const b = samples[samples.length - 1];
+			const dt = b.t - a.t;
+			const down = dt > 0 && ev.timeStamp - b.t < 50 ? (b.y - a.y) / dt * 1e3 : 0;
+			const to = nearestStop(project(full - drop, -down), stops).detent;
+			dbg(`detached drag release drop=${Math.round(drop)} v=${Math.round(down)} -> ${String(to)}`);
+			const end = to === "full" ? 0 : full - pos(to);
+			animateDrop(drop, end, setDrop, () => {
+				scroller.style.transform = "";
+				detached = false;
+				if (closing) return scrollToDetent("closed");
+				if (to === "full") {
+					paint(scroller.scrollTop);
+					return;
+				}
+				target = to;
+				programmatic = true;
+				scroller.scrollTop = pos(to);
+				paint(scroller.scrollTop);
+				if (to === "closed" || belowFloor(scroller.scrollTop)) settleAtClosed();
+				else requestAnimationFrame(onScrollEnd);
+			});
+		};
+		window.addEventListener("pointermove", move, true);
+		window.addEventListener("pointerup", up, true);
+		window.addEventListener("pointercancel", up, true);
+		endDrag = () => {
+			stop();
+			if (!started) return;
+			scroller.style.transform = "";
+			detached = false;
+			paint(scroller.scrollTop);
+		};
+	}
+	function animateDrop(from, to, set, done) {
+		const ms = reducedMotion() ? 0 : Math.min(380, 180 + Math.abs(to - from) * .4);
+		const t0 = performance.now();
+		const step = () => {
+			if (destroyed) return;
+			const k = ms === 0 ? 1 : Math.min((performance.now() - t0) / ms, 1);
+			const eased = 1 - (1 - k) ** 3;
+			set(from + (to - from) * eased);
+			if (k < 1) dropAnim = requestAnimationFrame(step);
+			else done();
+		};
+		dropAnim = requestAnimationFrame(step);
+	}
+	function onPointerDown(e) {
+		if (e.button !== 0 || !isOpen || detached || closing) return;
+		const el = e.target;
+		const handle = el?.closest("[data-ybs-drag]");
+		if (!handle) return;
+		if (scroller.scrollTop > full + 1) return detachedDrag(e, handle);
+		if (el?.closest("input, textarea, select, button, a, [contenteditable]")) return;
+		if (e.pointerType !== "mouse") return;
+		e.preventDefault();
+		handle.setPointerCapture(e.pointerId);
+		stopGlide();
+		unlock();
+		const startTop = scroller.scrollTop;
+		const y0 = e.clientY;
+		const maxTop = scroller.scrollHeight - scroller.clientHeight;
+		const samples = [{
+			t: e.timeStamp,
+			y: e.clientY
+		}];
+		root.setAttribute("data-ybs-drag", "active");
+		touching = true;
+		programmatic = false;
+		anchor = null;
+		const stop = () => {
+			handle.removeEventListener("pointermove", move);
+			handle.removeEventListener("pointerup", up);
+			handle.removeEventListener("pointercancel", up);
+			handle.removeEventListener("lostpointercapture", up);
+			endDrag = null;
+			touching = false;
+		};
+		const move = (ev) => {
+			scroller.scrollTop = Math.min(Math.max(startTop - (ev.clientY - y0), 0), maxTop);
+			samples.push({
+				t: ev.timeStamp,
+				y: ev.clientY
+			});
+			while (samples.length > 2 && ev.timeStamp - samples[0].t > VELOCITY_WINDOW_MS) samples.shift();
+		};
+		const up = (ev) => {
+			stop();
+			const top = scroller.scrollTop;
+			if (closing) return scrollToDetent("closed");
+			if (Math.abs(ev.clientY - y0) < 3 || top > full + 1) {
+				root.removeAttribute("data-ybs-drag");
+				return;
+			}
+			const a = samples[0];
+			const b = samples[samples.length - 1];
+			const dt = b.t - a.t;
+			const v = dt > 0 && ev.timeStamp - b.t < 50 ? -(b.y - a.y) / dt * 1e3 : 0;
+			root.setAttribute("data-ybs-drag", "settle");
+			scrollToDetent(nearestStop(project(top, v), stops).detent);
+		};
+		handle.addEventListener("pointermove", move);
+		handle.addEventListener("pointerup", up);
+		handle.addEventListener("pointercancel", up);
+		handle.addEventListener("lostpointercapture", up);
+		endDrag = () => {
+			stop();
+			root.removeAttribute("data-ybs-drag");
+		};
+	}
+	const KEYS_UP = /* @__PURE__ */ new Set([
+		"ArrowUp",
+		"PageUp",
+		"Home"
+	]);
+	function onKeyDown(e) {
+		if (!(KEYS_UP.has(e.key) || e.key === " " && e.shiftKey) || e.defaultPrevented || scroller.scrollTop > full + 1) return;
+		const el = e.target;
+		if (el?.closest("input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"]")) return;
+		if (e.key === " " && el?.closest("button, a, [role=\"button\"]")) return;
+		e.preventDefault();
+	}
+	function syncViewport() {
+		const vv = window.visualViewport;
+		if (!vv || !isOpen) return;
+		root.style.setProperty("--ybs-vv-top", `${vv.offsetTop}px`);
+		root.style.setProperty("--ybs-vv-h", `${vv.height}px`);
+		if (modal && Math.abs(window.scrollY - pageY) > .5) window.scrollTo(0, pageY);
+		const kb = window.innerHeight - vv.height * vv.scale > KEYBOARD_THRESHOLD;
+		if (kb !== keyboard) {
+			keyboard = kb;
+			root.toggleAttribute("data-ybs-keyboard", kb);
+			if (kb && !closing && (options.isActive?.() ?? true) && scroller.scrollTop < full - 1 && target !== "full") requestAnimationFrame(() => {
+				if (destroyed || !isOpen || closing) return;
+				layout();
+				if (scroller.scrollTop < full - 1) scrollToDetent("full");
+			});
+		}
+	}
+	function onWindowScroll() {
+		if (isOpen) syncViewport();
+	}
+	const ro = new ResizeObserver(() => {
+		if (!isOpen) return;
+		const wasEmpty = full < 1;
+		layout();
+		if (wasEmpty && full >= 1 && programmatic && target != null && !gliding) return glide();
+		dbg(`resize H=${H} full=${full}`);
+		if (touching) return;
+		if (!programmatic && performance.now() - lastUserScroll < USER_SCROLL_QUIET) return;
+		const d = programmatic ? target : current;
+		if (d == null) return;
+		if (gliding) return;
+		scroller.scrollTop = pos(d);
+	});
+	function finishClose() {
+		dbg("finishClose");
+		isOpen = false;
+		current = null;
+		emitted = null;
+		closing = false;
+		releaseHtml();
+		options.onClosed?.();
+	}
+	const passive = { passive: true };
+	scroller.addEventListener("scroll", onScroll, passive);
+	scroller.addEventListener("scrollend", onScrollEnd);
+	scroller.addEventListener("touchstart", onTouchStart, passive);
+	scroller.addEventListener("pointerdown", onPressStart, true);
+	for (const t of INPUT_EVENTS) scroller.addEventListener(t, onInput, {
+		capture: true,
+		passive: true
+	});
+	scroller.addEventListener("pointermove", onPressMove, true);
+	scroller.addEventListener("pointerup", onPressEnd, true);
+	scroller.addEventListener("pointercancel", onPressCancel, true);
+	scroller.addEventListener("click", onClickCapture, true);
+	scroller.addEventListener("touchend", onTouchEnd, passive);
+	scroller.addEventListener("touchcancel", onTouchEnd, passive);
+	scroller.addEventListener("wheel", onWheel, { passive: false });
+	scroller.addEventListener("keydown", onKeyDown);
+	sheet.addEventListener("pointerdown", onPointerDown);
+	window.visualViewport?.addEventListener("resize", syncViewport);
+	window.visualViewport?.addEventListener("scroll", syncViewport);
+	window.addEventListener("scroll", onWindowScroll, passive);
+	ro.observe(scroller);
+	ro.observe(sheet);
+	return {
+		get detent() {
+			return current;
+		},
+		open(detent) {
+			if (detent === "closed") detent = void 0;
+			if (isOpen) {
+				if (closing) {
+					closing = false;
+					layout();
+				}
+				scrollToDetent(detent ?? floor());
+				return;
+			}
+			isOpen = true;
+			closing = false;
+			pageY = window.scrollY;
+			keyboard = false;
+			if (modal && !htmlLocked) {
+				lockHtml();
+				htmlLocked = true;
+			}
+			syncViewport();
+			layout();
+			scroller.scrollTop = 0;
+			target = resolve(detent ?? floor()).detent;
+			programmatic = true;
+			scrollToDetent(target);
+		},
+		snapTo(detent) {
+			if (isOpen && !closing) scrollToDetent(detent);
+		},
+		close() {
+			if (!isOpen) return;
+			if (!closing) {
+				closing = true;
+				if (!dismissible) layout();
+			}
+			if (scroller.scrollTop <= CLOSED_TOLERANCE) finishClose();
+			else scrollToDetent("closed");
+		},
+		collapse() {
+			if (isOpen && !closing) scrollToDetent(floor());
+		},
+		setDetents(next) {
+			requested = [...next];
+			if (!isOpen) return;
+			layout();
+			if (!closing && current != null && !stops.some((s) => s.detent === current)) scrollToDetent(current);
+		},
+		setDismissible(next) {
+			dismissible = next;
+			if (isOpen) layout();
+		},
+		destroy() {
+			destroyed = true;
+			isOpen = false;
+			endDrag?.();
+			releaseHtml();
+			clearTimeout(unlockTimer);
+			clearTimeout(scrollEndTimer);
+			stopGlide();
+			cancelAnimationFrame(dropAnim);
+			scroller.style.transform = "";
+			ro.disconnect();
+			scroller.removeEventListener("scroll", onScroll);
+			scroller.removeEventListener("scrollend", onScrollEnd);
+			scroller.removeEventListener("touchstart", onTouchStart);
+			scroller.removeEventListener("pointerdown", onPressStart, true);
+			for (const t of INPUT_EVENTS) scroller.removeEventListener(t, onInput, true);
+			scroller.removeEventListener("pointermove", onPressMove, true);
+			scroller.removeEventListener("pointerup", onPressEnd, true);
+			scroller.removeEventListener("pointercancel", onPressCancel, true);
+			scroller.removeEventListener("click", onClickCapture, true);
+			scroller.removeEventListener("touchend", onTouchEnd);
+			scroller.removeEventListener("touchcancel", onTouchEnd);
+			scroller.removeEventListener("wheel", onWheel);
+			scroller.removeEventListener("keydown", onKeyDown);
+			sheet.removeEventListener("pointerdown", onPointerDown);
+			window.visualViewport?.removeEventListener("resize", syncViewport);
+			window.visualViewport?.removeEventListener("scroll", syncViewport);
+			window.removeEventListener("scroll", onWindowScroll);
+			closedMarker.remove();
+			probe.remove();
+			for (const m of markers.values()) m.remove();
+			markers.clear();
+		}
+	};
+}
+// src/react/stack.ts
+/** Whether Escape (or a close request it caused) is for this sheet: always for a modal one, else only with focus in it. */
+function takesEscape(entry) {
+	return entry.modal !== false || entry.root.contains(document.activeElement);
+}
+/** The CloseWatcher constructor, or null where the browser doesn't have it. */
+function closeWatcher() {
+	return typeof window !== "undefined" ? window.CloseWatcher ?? null : null;
+}
+/** True during the task in which Escape was pressed, so a watcher's close can report 'escape' instead of 'back'. */
+let escapePressed = false;
+const closedByEscape = () => escapePressed;
+const stack = [];
+let escapeListening = false;
+function onKeyDown(e) {
+	if (e.key !== "Escape" || e.defaultPrevented || e.isComposing || e.keyCode === 229) return;
+	escapePressed = true;
+	setTimeout(() => escapePressed = false);
+	const top = escapeTarget();
+	if (!top || top.watcher) return;
+	e.preventDefault();
+	top.close();
+}
+/** The sheet Escape is for: the topmost one that's open and takes it (a non-modal sheet only with focus inside). */
+function escapeTarget() {
+	return stack.findLast((s) => !s.closing && takesEscape(s));
+}
+function pushSheet(entry) {
+	stack.push(entry);
+	if (!escapeListening) {
+		document.addEventListener("keydown", onKeyDown);
+		escapeListening = true;
+	}
+}
+function removeSheet(entry) {
+	const i = stack.indexOf(entry);
+	if (i === -1) return;
+	stack.splice(i, 1);
+	if (entry.recede && !stack.some((e) => e.recede)) setRecede(0);
+	const below = stack[i - 1];
+	if (below && !stack[i]) setCovered(below.root, 0);
+	if (!stack.length && escapeListening) {
+		document.removeEventListener("keydown", onKeyDown);
+		escapeListening = false;
+	}
+}
+/** Apply changed props to an open sheet's entry (it keeps its place in the stack and its watcher). */
+function updateSheet(entry, next) {
+	entry.modal = next.modal;
+	if (entry.recede === next.recede) return;
+	entry.recede = next.recede;
+	if (!next.recede && !stack.some((e) => e.recede)) setRecede(0);
+}
+/**
+* `inert` on everything outside the open modal sheets, counted per element: two stacked modal sheets both hold the
+* page, so it stays inert until the last one lets go, whichever closes first. An element the app made inert itself
+* is left alone. Covers the siblings of the sheet's root and of each of its ancestors up to <body>, so a sheet
+* portalled into a container still blocks the whole page.
+*/
+const inertHolds = /* @__PURE__ */ new Map();
+function holdInert(root) {
+	const held = [];
+	for (let node = root; node.parentElement && node !== document.body; node = node.parentElement) for (const el of Array.from(node.parentElement.children)) {
+		if (el === node || el.tagName === "SCRIPT" || el.tagName === "STYLE") continue;
+		const n = inertHolds.get(el);
+		if (n === void 0 && el.hasAttribute("inert")) continue;
+		inertHolds.set(el, (n ?? 0) + 1);
+		el.setAttribute("inert", "");
+		held.push(el);
+	}
+	return held;
+}
+function releaseInert(held) {
+	for (const el of held) {
+		const n = (inertHolds.get(el) ?? 1) - 1;
+		if (n > 0) inertHolds.set(el, n);
+		else {
+			inertHolds.delete(el);
+			el.removeAttribute("inert");
+		}
+	}
+}
+function isTopSheet(root) {
+	return stack[stack.length - 1]?.root === root;
+}
+/** Called with the sheet's own progress (0 closed .. 1 full); updates the sheet underneath it. */
+function reportProgress(root, progress, cover = progress) {
+	const i = stack.findIndex((e) => e.root === root);
+	const below = i > 0 ? stack[i - 1] : void 0;
+	if (below) setCovered(below.root, progress);
+	if (i !== -1 && stack[i] === stack.find((e) => e.recede)) setRecede(cover);
+}
+/**
+* The page behind recedes (`data-ybs-recede` + `--ybs-recede` on <html>) while a sheet with `recede` is open.
+* `--ybs-recede` is the share of the screen the sheet covers (0..1), so a short sheet barely recedes the page.
+* `--ybs-scroll-y` lets the page scale from the top of the screen rather than the top of the document.
+* The attribute is only present while receding: a transform on the page wrapper changes what its fixed
+* elements are positioned against, so it must not linger.
+*/
+function setRecede(progress) {
+	const html = document.documentElement;
+	if (progress > 0 && !html.hasAttribute("data-ybs-recede")) {
+		html.style.setProperty("--ybs-scroll-y", `${window.scrollY}px`);
+		html.setAttribute("data-ybs-recede", "");
+	}
+	if (progress <= 0) {
+		html.removeAttribute("data-ybs-recede");
+		html.style.removeProperty("--ybs-recede");
+		return;
+	}
+	html.style.setProperty("--ybs-recede", String(progress));
+}
+function setCovered(root, progress) {
+	root.style.setProperty("--ybs-covered", String(progress));
+	root.toggleAttribute("data-ybs-covered", progress > 0);
+}
+// src/react/css-check.ts
+/**
+* The CSS is a file the app imports (`@yourrealm/bottom-sheet/styles.css` or `styled.css`). A sheet without it can't
+* work (the overlay, scroller and snapping are CSS), so say so loudly, once, when one opens. Each file sets a marker
+* variable on :root that this reads.
+*/
+const reported = /* @__PURE__ */ new Set();
+function checkCss(id, file) {
+	if (reported.has(id) || typeof document === "undefined") return;
+	if (getComputedStyle(document.documentElement).getPropertyValue(`--ybs-css-${id}`).trim() === "1") return;
+	reported.add(id);
+	console.error(`@yourrealm/bottom-sheet: ${file} isn't loaded, so the sheet can't work. Import it once, before Tailwind:\n  @import "@yourrealm/bottom-sheet/${file}";`);
+}
+// src/react/sheet.tsx
+var sheet_exports = /* @__PURE__ */ __exportAll({
+	Backdrop: () => Backdrop,
+	Close: () => Close,
+	Content: () => Content,
+	Description: () => Description,
+	Footer: () => Footer,
+	Handle: () => Handle,
+	Header: () => Header,
+	Portal: () => Portal,
+	Root: () => Root,
+	Title: () => Title,
+	Trigger: () => Trigger,
+	View: () => View
+});
+const SheetContext = createContext(null);
+function useSheet(part) {
+	const ctx = useContext(SheetContext);
+	if (!ctx) throw new Error(`<Sheet.${part}> must be used inside <Sheet.Root>`);
+	return ctx;
+}
+/**
+* One stable callback ref for the user's ref and ours (a new callback each render would detach and re-attach
+* them every render). Forwards a callback ref's React 19 cleanup.
+*/
+function useMergedRef(user, own) {
+	return useCallback((node) => {
+		own.current = node;
+		const cleanup = typeof user === "function" ? user(node) : user ? (user.current = node, void 0) : void 0;
+		return () => {
+			own.current = null;
+			if (typeof user === "function") typeof cleanup === "function" ? cleanup() : user(null);
+			else if (user) user.current = null;
+		};
+	}, [user, own]);
+}
+let lastInteraction = "mouse";
+let tracking = false;
+function trackInteraction() {
+	if (tracking || typeof document === "undefined") return;
+	tracking = true;
+	document.addEventListener("pointerdown", (e) => lastInteraction = e.pointerType || "mouse", true);
+	document.addEventListener("keydown", () => lastInteraction = "keyboard", true);
+}
+/** Resolve `initialFocus` to the element to focus, or null to leave focus where it is. */
+function initialFocusTarget(pref, modal, sheet) {
+	const fallback = modal ? sheet : null;
+	const v = typeof pref === "function" ? pref(lastInteraction) : pref ?? modal;
+	if (v === true) return typeof pref === "function" || pref === true ? sheet : fallback;
+	if (v === null) return fallback;
+	if (v === false || v === void 0) return null;
+	if (v instanceof HTMLElement) return v;
+	return v.current ?? fallback;
+}
+/** Full only, like iOS (`[.large()]`), Base UI and Vaul. Partial detents are opt-in. */
+const DEFAULT_DETENTS = [];
+function Root(props) {
+	const { children, open: openProp, defaultOpen = false, onOpenChange, detents = DEFAULT_DETENTS, initialDetent, detent, onDetentChange, modal: modalProp = true, dismissible = true, fullscreen = false, recede = false, debug, onExitComplete } = props;
+	const [openState, setOpenState] = useState(defaultOpen);
+	const open = openProp ?? openState;
+	const [mounted, setMounted] = useState(open);
+	const [modalAtOpen, setModalAtOpen] = useState(modalProp);
+	const modal = mounted ? modalAtOpen : modalProp;
+	const closeOnBack = props.closeOnBack ?? modal;
+	const controller = useRef(null);
+	const rootEl = useRef(null);
+	const sheetEl = useRef(null);
+	const initialFocus = useRef(void 0);
+	useEffect(trackInteraction, []);
+	const id = useId();
+	const [hasTitle, setHasTitle] = useState(false);
+	const [hasDescription, setHasDescription] = useState(false);
+	const setOpen = useCallback((next, reason) => {
+		if (openProp === void 0) setOpenState(next);
+		onOpenChange?.(next, { reason });
+	}, [openProp, onOpenChange]);
+	const requestDismiss = useCallback((reason) => {
+		if (dismissible) setOpen(false, reason);
+		else controller.current?.collapse();
+	}, [dismissible, setOpen]);
+	const closing = useRef(false);
+	const debugRef = useRef(debug);
+	debugRef.current = debug;
+	const returnFocus = useRef(null);
+	useEffect(() => {
+		if (open && !mounted) {
+			returnFocus.current = document.activeElement;
+			setModalAtOpen(modalProp);
+			setMounted(true);
+		}
+		if (open && mounted && closing.current) {
+			closing.current = false;
+			controller.current?.open(detent ?? initialDetent);
+			const sheet = sheetEl.current;
+			if (sheet && !sheet.contains(document.activeElement)) initialFocusTarget(initialFocus.current, modal, sheet)?.focus({ preventScroll: true });
+		}
+		if (!open && mounted) {
+			closing.current = true;
+			if (controller.current) controller.current.close();
+			else setMounted(false);
+		}
+	}, [open, mounted]);
+	const exitRef = useRef(onExitComplete);
+	exitRef.current = onExitComplete;
+	const wasMounted = useRef(mounted);
+	useEffect(() => {
+		if (wasMounted.current && !mounted) exitRef.current?.();
+		wasMounted.current = mounted;
+	}, [mounted]);
+	const onClosed = useCallback(() => {
+		debugRef.current?.(`onClosed (open=${open}, mounted=${mounted})`);
+		closing.current = false;
+		setMounted(false);
+		if (open) setOpen(false, "swipe");
+	}, [
+		open,
+		mounted,
+		setOpen
+	]);
+	const value = useMemo(() => ({
+		open,
+		mounted,
+		setOpen,
+		requestDismiss,
+		modal,
+		dismissible,
+		closeOnBack,
+		fullscreen,
+		recede,
+		detents,
+		initialDetent,
+		detent,
+		onDetentChange,
+		debug,
+		onClosed,
+		controller,
+		returnFocus,
+		rootEl,
+		sheetEl,
+		initialFocus,
+		titleId: `${id}-title`,
+		descriptionId: `${id}-description`,
+		hasTitle,
+		setHasTitle,
+		hasDescription,
+		setHasDescription
+	}), [
+		open,
+		mounted,
+		setOpen,
+		requestDismiss,
+		modal,
+		dismissible,
+		closeOnBack,
+		fullscreen,
+		recede,
+		detents,
+		initialDetent,
+		detent,
+		onDetentChange,
+		debug,
+		onClosed,
+		id,
+		hasTitle,
+		hasDescription
+	]);
+	return /* @__PURE__ */ jsx(SheetContext.Provider, {
+		value,
+		children
+	});
+}
+function Trigger({ render, ...props }) {
+	const ctx = useSheet("Trigger");
+	const onClick = (e) => {
+		props.onClick?.(e);
+		if (!e.defaultPrevented) ctx.setOpen(true, "trigger");
+	};
+	if (render) return render({
+		type: "button",
+		"aria-haspopup": "dialog",
+		"aria-expanded": ctx.open,
+		onClick
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-haspopup": "dialog",
+		"aria-expanded": ctx.open,
+		...props,
+		onClick
+	});
+}
+function Close(props) {
+	const ctx = useSheet("Close");
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...props,
+		onClick: (e) => {
+			props.onClick?.(e);
+			if (!e.defaultPrevented) ctx.setOpen(false, "close-button");
+		}
+	});
+}
+/** Fixed layer. Mounted while open or animating closed. A modal sheet makes the rest of the page inert. */
+function Portal({ children, container }) {
+	const ctx = useSheet("Portal");
+	useEffect(() => {
+		if (ctx.mounted) checkCss("core", "styles.css");
+	}, [ctx.mounted]);
+	const dismissRef = useRef(ctx.requestDismiss);
+	dismissRef.current = ctx.requestDismiss;
+	const ctxRef = useRef(ctx);
+	ctxRef.current = ctx;
+	const entryRef = useRef(null);
+	useEffect(() => {
+		const root = ctx.rootEl.current;
+		if (!ctx.mounted || !root) return;
+		const { recede, modal } = ctxRef.current;
+		const entry = {
+			root,
+			close: () => dismissRef.current("escape"),
+			recede: recede && modal,
+			modal
+		};
+		entryRef.current = entry;
+		pushSheet(entry);
+		return () => {
+			removeSheet(entry);
+			entryRef.current = null;
+		};
+	}, [ctx.mounted, ctx.rootEl]);
+	useEffect(() => {
+		if (entryRef.current) updateSheet(entryRef.current, {
+			recede: ctx.recede && ctx.modal,
+			modal: ctx.modal
+		});
+	}, [ctx.recede, ctx.modal]);
+	const blocking = ctx.mounted && ctx.open && ctx.modal;
+	useEffect(() => {
+		const root = ctx.rootEl.current;
+		if (!blocking || !root) return;
+		const held = holdInert(root);
+		const dbg = (m) => ctxRef.current.debug?.(m);
+		dbg(`portal mount: inert ${held.length} elements`);
+		return () => {
+			releaseInert(held);
+			dbg(`portal unmount: released ${held.length}`);
+			const back = ctx.returnFocus.current;
+			if (back?.isConnected) back.focus({ preventScroll: true });
+		};
+	}, [
+		blocking,
+		ctx.rootEl,
+		ctx.returnFocus
+	]);
+	const [rearm, setRearm] = useState(0);
+	const listenForBack = ctx.mounted && ctx.open && ctx.closeOnBack;
+	useEffect(() => {
+		if (entryRef.current) entryRef.current.closing = !ctx.open;
+	}, [ctx.open, ctx.mounted]);
+	useEffect(() => {
+		const Watcher = closeWatcher();
+		const entry = entryRef.current;
+		if (!listenForBack || !Watcher || !entry) return;
+		const watcher = new Watcher();
+		watcher.onclose = () => {
+			entry.watcher = null;
+			const escape = closedByEscape();
+			ctxRef.current.debug?.(`close watcher: ${escape ? "escape" : "back"}`);
+			if (!escape) dismissRef.current("back");
+			else if (takesEscape(entry)) dismissRef.current("escape");
+			else escapeTarget()?.close();
+			setRearm((n) => n + 1);
+		};
+		entry.watcher = watcher;
+		return () => {
+			if (entry.watcher === watcher) entry.watcher = null;
+			watcher.destroy();
+		};
+	}, [listenForBack, rearm]);
+	if (!ctx.mounted || typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		"data-ybs-root": "",
+		"data-ybs-modeless": ctx.modal ? void 0 : "",
+		"data-ybs-fullscreen": ctx.fullscreen ? "" : void 0,
+		ref: ctx.rootEl,
+		children
+	}), container ?? document.body);
+}
+function Backdrop(props) {
+	const ctx = useSheet("Backdrop");
+	return /* @__PURE__ */ jsx("div", {
+		"data-ybs-backdrop": "",
+		"aria-hidden": "true",
+		...props,
+		onClick: (e) => {
+			props.onClick?.(e);
+			if (!e.defaultPrevented) ctx.requestDismiss("outside-press");
+		}
+	});
+}
+/** The single native scroller: spacer (closed area), detent markers, and the sheet (Sheet.Content). */
+function View({ children, bleedClassName, ref, ...props }) {
+	const ctx = useSheet("View");
+	const scroller = useRef(null);
+	const scrollerRef = useMergedRef(ref, scroller);
+	const markers = useRef(null);
+	const ctxRef = useRef(ctx);
+	ctxRef.current = ctx;
+	useLayoutEffect(() => {
+		const root = scroller.current?.closest("[data-ybs-root]") ?? null;
+		const sheet = ctx.sheetEl.current;
+		if (!root || !scroller.current || !markers.current || !sheet) throw new Error("<Sheet.View> needs <Sheet.Content> inside it, inside <Sheet.Portal>");
+		const c = createSheetController({
+			root,
+			scroller: scroller.current,
+			markers: markers.current,
+			sheet
+		}, {
+			detents: ctx.detents,
+			modal: ctx.modal,
+			dismissible: ctx.dismissible,
+			onDetentChange: (d) => ctxRef.current.onDetentChange?.(d),
+			onClosed: () => ctxRef.current.onClosed(),
+			onProgress: (p, cover) => reportProgress(root, p, cover),
+			onOutsideTap: () => ctxRef.current.requestDismiss("outside-press"),
+			isActive: () => isTopSheet(root),
+			debug: (m) => ctxRef.current.debug?.(m)
+		});
+		ctx.controller.current = c;
+		c.open(ctx.detent ?? ctx.initialDetent);
+		for (const [attr, id] of [["aria-labelledby", ctx.titleId], ["aria-describedby", ctx.descriptionId]]) if (!sheet.hasAttribute(attr) && sheet.querySelector(`[id="${id}"]`)) sheet.setAttribute(attr, id);
+		initialFocusTarget(ctx.initialFocus.current, ctx.modal, sheet)?.focus({ preventScroll: true });
+		return () => {
+			if (!ctx.modal && sheet.contains(document.activeElement)) {
+				const back = ctx.returnFocus.current;
+				if (back?.isConnected) back.focus({ preventScroll: true });
+			}
+			c.destroy();
+			ctx.controller.current = null;
+		};
+	}, []);
+	const detentsKey = ctx.detents.join("|");
+	useEffect(() => {
+		ctx.controller.current?.setDetents(ctxRef.current.detents);
+	}, [detentsKey, ctx.controller]);
+	useEffect(() => {
+		ctx.controller.current?.setDismissible(ctx.dismissible);
+	}, [ctx.dismissible, ctx.controller]);
+	useEffect(() => {
+		const c = ctx.controller.current;
+		if (c && ctx.detent !== void 0 && ctx.open && c.detent !== ctx.detent) c.snapTo(ctx.detent);
+	}, [
+		ctx.detent,
+		ctx.open,
+		ctx.controller
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		"data-ybs-bleed": "",
+		"aria-hidden": "true",
+		className: bleedClassName
+	}), /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-ybs-scroller": "",
+		ref: scrollerRef,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-ybs-track": "",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					"data-ybs-spacer": "",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-ybs-markers": "",
+					ref: markers
+				}),
+				children
+			]
+		})
+	})] });
+}
+function Content({ ref, initialFocus, ...props }) {
+	const ctx = useSheet("Content");
+	const sheetRef = useMergedRef(ref, ctx.sheetEl);
+	ctx.initialFocus.current = initialFocus;
+	return /* @__PURE__ */ jsx("section", {
+		"data-ybs-sheet": "",
+		role: "dialog",
+		"aria-modal": ctx.modal,
+		"aria-labelledby": ctx.hasTitle ? ctx.titleId : void 0,
+		"aria-describedby": ctx.hasDescription ? ctx.descriptionId : void 0,
+		tabIndex: -1,
+		...props,
+		ref: sheetRef
+	});
+}
+/** Sticky top part of the sheet. Mouse-draggable on desktop. */
+function Header(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-ybs-header": "",
+		"data-ybs-drag": "",
+		...props
+	});
+}
+/**
+* Sticky bottom part of the sheet, for actions. It stays at the bottom of the screen while the content scrolls, and at
+* partial detents too. The controller sets `data-ybs-more` on the root while content is hidden behind it.
+*/
+function Footer(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-ybs-footer": "",
+		...props
+	});
+}
+/** Visual grabber. Decorative; dragging works on the whole Header. */
+function Handle(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-ybs-handle": "",
+		"aria-hidden": "true",
+		...props
+	});
+}
+function Title(props) {
+	const ctx = useSheet("Title");
+	const { setHasTitle } = ctx;
+	useLayoutEffect(() => {
+		setHasTitle(true);
+		return () => setHasTitle(false);
+	}, [setHasTitle]);
+	return /* @__PURE__ */ jsx("h2", {
+		id: ctx.titleId,
+		...props
+	});
+}
+function Description(props) {
+	const ctx = useSheet("Description");
+	const { setHasDescription } = ctx;
+	useLayoutEffect(() => {
+		setHasDescription(true);
+		return () => setHasDescription(false);
+	}, [setHasDescription]);
+	return /* @__PURE__ */ jsx("p", {
+		id: ctx.descriptionId,
+		...props
+	});
+}
+export { Footer as a, Portal as c, Trigger as d, View as f, Description as i, Root as l, checkCss as m, Close as n, Handle as o, sheet_exports as p, Content as r, Header as s, Backdrop as t, Title as u };