elements-kit 0.27.4 → 0.27.6

package/dist/ui/overlay/index.mjs

@@ -1,1598 +1,724 @@
-import { _ as onCleanup, u as effect } from "../../lib-DYypKhxk.mjs";
-import "../../signals/index.mjs";
+import { t as __exportAll } from "../../chunk-CfYAbeIz.mjs";
+import { c as batch, u as effect, x as signal } from "../../lib-Dw0g-vex.mjs";
+import { reactive } from "../../signals/index.mjs";
+import { t as scope } from "../../scope-B1kDu4YX.mjs";
+import { direction } from "../../utilities/direction.mjs";
 import { createElementRect } from "../../utilities/element-rect.mjs";
-import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
-//#region src/ui/overlay/constraint.ts
+import { windowSize } from "../../utilities/window-size.mjs";
+//#region src/ui/overlay/area.ts
+/** One axis of a {@link Region.place}: where a box `n` long, currently at
+* `own`, starts once `pin` is honoured. */
+function placeAxis(pin, own, n) {
+	if (!pin) return own;
+	if (pin.align === "start") return pin.at;
+	if (pin.align === "end") return pin.at - n;
+	return pin.at - n / 2;
+}
+/** The inset a pin yields on one edge: its coordinate if it pins that edge. */
+function inset(pin, edge) {
+	return pin?.align === edge ? pin.at : null;
+}
 /**
-* Builds a {@link Region}: from an `Element` (observed via
-* `ResizeObserver` through `createElementRect`; cleanup routes through
-* the current scope), from a plain rect (static), or with no argument —
-* the live viewport (read at call time, not observed).
+* A {@link Region} driven by writes — for gestures, where the box grows away
+* from the edge the user is not dragging. Assigning an inset pins that edge
+* and releases its opposite; assigning `null` frees the axis.
 */
-function constraint(source) {
-	if (source === void 0) return {
-		top: () => 0,
-		left: () => 0,
-		width: () => window.innerWidth,
-		height: () => window.innerHeight
-	};
-	if (source instanceof Element) {
-		const rect = createElementRect(source);
-		onCleanup(() => rect[Symbol.dispose]());
+var MutableRegion = class {
+	#x = signal(null);
+	#y = signal(null);
+	constructor(boundary) {
+		const { left, right, top, bottom } = boundary;
+		if (left !== void 0) this.left = left;
+		if (right !== void 0) this.right = right;
+		if (top !== void 0) this.top = top;
+		if (bottom !== void 0) this.bottom = bottom;
+	}
+	get left() {
+		return inset(this.#x(), "start");
+	}
+	get right() {
+		return inset(this.#x(), "end");
+	}
+	get top() {
+		return inset(this.#y(), "start");
+	}
+	get bottom() {
+		return inset(this.#y(), "end");
+	}
+	set left(v) {
+		this.#x(v === null ? null : {
+			align: "start",
+			at: v
+		});
+	}
+	set right(v) {
+		this.#x(v === null ? null : {
+			align: "end",
+			at: v
+		});
+	}
+	set top(v) {
+		this.#y(v === null ? null : {
+			align: "start",
+			at: v
+		});
+	}
+	set bottom(v) {
+		this.#y(v === null ? null : {
+			align: "end",
+			at: v
+		});
+	}
+	place(box) {
 		return {
-			top: () => rect().top,
-			left: () => rect().left,
-			width: () => rect().width,
-			height: () => rect().height
+			x: placeAxis(this.#x(), box.x, box.w),
+			y: placeAxis(this.#y(), box.y, box.h),
+			w: box.w,
+			h: box.h
 		};
 	}
-	return {
-		top: () => source.top,
-		left: () => source.left,
-		width: () => source.width,
-		height: () => source.height
-	};
-}
-/**
-* Resolves a custom property holding a length to pixels. Plain `px` values
-* parse directly; anything else (`svh` / `calc()` / fractions of the
-* constraint) resolves natively by measuring a hidden probe. `fallback` is
-* a CSS length expression used when the property is unset.
-*/
-function resolveVarPx(overlay, name, axis, fallback) {
-	const raw = getComputedStyle(overlay).getPropertyValue(name).trim();
-	if (/^-?\d+(\.\d+)?px$/.test(raw)) return parseFloat(raw);
-	const probe = document.createElement("div");
-	probe.style.position = "absolute";
-	probe.style.visibility = "hidden";
-	probe.style[axis] = fallback ? `var(${name}, ${fallback})` : `var(${name})`;
-	overlay.appendChild(probe);
-	const px = probe.getBoundingClientRect()[axis];
-	probe.remove();
-	return px;
-}
-/** Resolves the constraint rect every gesture bound derives from. */
-function resolveConstraint(overlay) {
-	return {
-		top: resolveVarPx(overlay, "--overlay-constraint-top", "height"),
-		left: resolveVarPx(overlay, "--overlay-constraint-left", "width"),
-		width: resolveVarPx(overlay, "--overlay-constraint-width", "width"),
-		height: resolveVarPx(overlay, "--overlay-constraint-height", "height")
-	};
-}
-/**
-* Confines an overlay to a {@link Region} by syncing it into the
-* `--overlay-constraint-*` variables. Every location clamp and gesture
-* bound derives from those variables, so the overlay re-clamps when the
-* region changes.
-*
-* Caveat: an element region observes size changes (`ResizeObserver`) — a
-* container that moves without resizing (e.g. page scroll) does not
-* retrigger the sync.
-*
-* Registers its cleanup with the current scope (`onCleanup`) and also
-* returns it as `dispose` / `Symbol.dispose`; disposing removes the
-* variables, restoring the viewport constraint.
-*
-* @example
-* ```ts
-* import { constraint, confine } from "elements-kit/ui/overlay";
-*
-* const panel = document.querySelector("dialog.x-overlay")!;
-* confine(panel, constraint(document.querySelector("main")!));
-* ```
-*/
-function confine(overlay, region) {
-	const stop = effect(() => {
-		overlay.style.setProperty("--overlay-constraint-top", `${region.top()}px`);
-		overlay.style.setProperty("--overlay-constraint-left", `${region.left()}px`);
-		overlay.style.setProperty("--overlay-constraint-width", `${region.width()}px`);
-		overlay.style.setProperty("--overlay-constraint-height", `${region.height()}px`);
-	});
-	const dispose = () => {
-		stop();
-		overlay.style.removeProperty("--overlay-constraint-top");
-		overlay.style.removeProperty("--overlay-constraint-left");
-		overlay.style.removeProperty("--overlay-constraint-width");
-		overlay.style.removeProperty("--overlay-constraint-height");
-	};
-	onCleanup(dispose);
-	return {
-		dispose,
-		[Symbol.dispose]: dispose
-	};
-}
+};
 //#endregion
-//#region src/ui/overlay/anchor.ts
-/** The same compound gate as the index.css ANCHORED MODE block — both
-* halves or neither, so the CSS and JS tiers can never disagree. */
-const nativeAnchorSupport = () => typeof CSS !== "undefined" && CSS.supports("anchor-name: --x") && CSS.supports("position-area: block-end");
-/** Measure whether the chain rule actually lands on the anchor's VISUAL
-* box — `CSS.supports` is a parser check, and Firefox 151 passes it
-* while resolving `anchor()` against the pre-transform layout box (a
-* `translate`d trigger pins half a box off). The probe host is
-* deliberately translated to catch exactly that. Inconclusive without a
-* layout engine (tests) — then trust the declared support. */
-let chainMeasured;
-function probeChain() {
-	const host = document.createElement("div");
-	host.style.cssText = "position:fixed;top:80px;left:60px;width:40px;height:20px;translate:10px 5px;visibility:hidden;pointer-events:none;anchor-name:--ek-chain-probe";
-	const pin = document.createElement("div");
-	pin.style.cssText = "position:fixed;visibility:hidden;pointer-events:none;position-anchor:--ek-chain-probe;top:anchor(top);left:anchor(left);width:anchor-size(width);height:anchor-size(height)";
-	document.body.append(host, pin);
-	const hostRect = host.getBoundingClientRect();
-	const rect = pin.getBoundingClientRect();
-	host.remove();
-	pin.remove();
-	if (Math.abs(hostRect.top - 85) > 1) return true;
-	return Math.abs(rect.top - 85) < 1 && Math.abs(rect.left - 70) < 1 && Math.abs(rect.width - 40) < 1;
-}
-/** The follow pin needs more than the placement gate — the chain rule
-* mirrors the followed box with `anchor()`/`anchor-size()`. A browser
-* that places but can't chain falls back to the JS rect copy. */
-const chainSupport = () => {
-	if (!nativeAnchorSupport() || !CSS.supports("top: anchor(top)") || !CSS.supports("width: anchor-size(width)")) return false;
-	chainMeasured ??= probeChain();
-	return chainMeasured;
+//#region src/ui/overlay/box.ts
+var WindowBox = class {
+	get x() {
+		return 0;
+	}
+	get y() {
+		return 0;
+	}
+	get w() {
+		return windowSize.width();
+	}
+	get h() {
+		return windowSize.height();
+	}
+	get direction() {
+		return direction();
+	}
 };
-/** While the Floating UI loop tracks, geometry writes must land
-* instantly — but ONLY geometry. Enter/exit (opacity, scale) and
-* close (display) keep transitioning, so `@starting-style` still plays. */
-const TRACKING_TRANSITIONS = "opacity, scale, display";
-let anchorNames = 0;
-/**
-* Maps a `position-area` value to the Floating UI placement. Spanning
-* toward an edge leaves the box flush with the *opposite* edge, so
-* `span-*-end` is a `-start` alignment (and vice versa) — Floating UI
-* resolves `-start`/`-end` logically, so the span tokens need no dir
-* check; only the physical inline sides do. Unknown values fall back to
-* `bottom` (the CSS default, `block-end`).
-*/
-function areaToPlacement(area, rtl = false) {
-	const tokens = area.trim().split(/\s+/);
-	const main = tokens.find((t) => !t.startsWith("span-"));
-	const span = tokens.find((t) => t.startsWith("span-")) ?? "";
-	return `${main === "block-start" ? "top" : main === "inline-start" ? rtl ? "right" : "left" : main === "inline-end" ? rtl ? "left" : "right" : "bottom"}${span.endsWith("-end") ? "-start" : span.endsWith("-start") ? "-end" : ""}`;
-}
-/**
-* Gives `overlay` its anchor element and returns it. The overlay follows
-* the anchor for life; the anchor follows `follow` (element or rect)
-* until something moves it. Pass the returned element to `draggable()`
-* to make the composition tearable — dragging moves the anchor.
-*
-* `follow` may be a getter reading a signal — re-pinning on change is
-* how a shared popover slides between nav triggers: the native chain
-* glides there on the anchor element's CSS transition; the channel
-* engine lets that one write animate.
-*
-* Registers all cleanup with the current scope (`onCleanup`): the anchor
-* element, the wiring, and the stamped attributes are removed together.
-*
-* @example
-* ```ts
-* import { anchor, draggable, rubber } from "elements-kit/ui/overlay";
-*
-* const a = anchor(panel, trigger);
-* draggable(a, undefined, rubber()).attach(panel);
-*
-* // shared nav popover — re-anchors (and glides) when the signal changes
-* const active = signal(firstTrigger);
-* anchor(menu, () => active(), { arrow: true });
-* ```
-*/
-function anchor(overlay, follow, opts = {}) {
-	const native = nativeAnchorSupport() && !opts.within && !opts.arrow;
-	let disposed = false;
-	const resolveFollow = () => (typeof follow === "function" ? follow() : follow) ?? void 0;
-	const el = document.createElement("span");
-	el.className = "x-overlay-anchor";
-	el.setAttribute("aria-hidden", "true");
-	if (!native) el.style.transitionProperty = "none";
-	document.body.append(el);
-	const proxyName = `--overlay-anchor-${anchorNames++}`;
-	const followName = `--overlay-follow-${anchorNames++}`;
-	const placeAtRect = (rect) => {
-		el.style.top = `${rect.top}px`;
-		el.style.left = `${rect.left}px`;
-		el.style.width = `${rect.width}px`;
-		el.style.height = `${rect.height}px`;
-	};
-	/** Pin the anchor element to a follow target (the `data-follow`
-	* contract — `draggable()` tears it on the first pointer-down).
-	* Re-pinning to another element keeps the SAME `position-anchor` name,
-	* so under the native chain the proxy's `anchor()` insets resolve to
-	* the new box and its CSS transition GLIDES there — the nav slide. */
-	let pinnedEl;
-	let hasPinned = false;
-	let stopFollowSync;
-	const releasePinMachinery = () => {
-		stopFollowSync?.();
-		stopFollowSync = void 0;
-		pinnedEl?.style.removeProperty("anchor-name");
-		pinnedEl = void 0;
-	};
-	const pin = (target) => {
-		const repositioning = hasPinned;
-		const flip = repositioning && target instanceof Element && chainSupport();
-		if (flip) placeAtRect(el.getBoundingClientRect());
-		releasePinMachinery();
-		if (!target) {
-			el.style.top = "50vh";
-			el.style.left = "50vw";
-			return;
-		}
-		hasPinned = true;
-		if (!(target instanceof Element)) {
-			el.removeAttribute("data-follow");
-			placeAtRect(target);
-			return;
-		}
-		el.setAttribute("data-follow", "");
-		if (chainSupport()) {
-			target.style?.setProperty("anchor-name", followName);
-			pinnedEl = target;
-			el.style.setProperty("position-anchor", followName);
-			if (flip) el.offsetTop;
-			el.style.removeProperty("top");
-			el.style.removeProperty("left");
-			el.style.removeProperty("width");
-			el.style.removeProperty("height");
-		} else {
-			let first = !repositioning;
-			const sync = () => {
-				if (first) {
-					first = false;
-					const prev = el.style.transitionProperty;
-					el.style.transitionProperty = "none";
-					placeAtRect(target.getBoundingClientRect());
-					el.offsetTop;
-					if (prev) el.style.transitionProperty = prev;
-					else el.style.removeProperty("transition-property");
-					return;
-				}
-				placeAtRect(target.getBoundingClientRect());
-			};
-			stopFollowSync = autoUpdate(target, el, sync);
-		}
-	};
-	const unpinCleanup = () => releasePinMachinery();
-	const followObserver = new MutationObserver(() => {
-		if (!el.hasAttribute("data-follow")) unpinCleanup();
-	});
-	followObserver.observe(el, {
-		attributes: true,
-		attributeFilter: ["data-follow"]
-	});
-	const stampPlacedHint = () => {
-		const style = getComputedStyle(overlay);
-		const hint = areaToPlacement(style.getPropertyValue("--overlay-area"), style.direction === "rtl");
-		overlay.setAttribute("data-placed", hint.split("-")[0]);
-	};
-	const isOpen = () => {
-		if (overlay.hasAttribute("open")) return true;
-		try {
-			return overlay.matches(":popover-open");
-		} catch {
-			return false;
-		}
-	};
-	let haltLoop;
-	let engineDispose;
-	/** Channel engine only: reposition against a re-pinned target, letting
-	* that one write animate (the morph to the new anchor). */
-	let onRepoint;
-	if (native) {
-		overlay.setAttribute("data-anchor", "element");
-		el.style.setProperty("anchor-name", proxyName);
-		overlay.style.setProperty("position-anchor", proxyName);
-		engineDispose = () => {
-			const rect = overlay.getBoundingClientRect();
-			if (isOpen() && rect.width > 0) {
-				const c = resolveConstraint(overlay);
-				overlay.style.setProperty("--overlay-x", `${rect.left + rect.width / 2 - c.left}px`);
-				overlay.style.setProperty("--overlay-y", `${rect.top + rect.height / 2 - c.top}px`);
-			}
-			overlay.style.removeProperty("position-anchor");
-			overlay.removeAttribute("data-anchor");
-		};
-	} else {
-		let arrowEl = null;
-		let arrowOwned = false;
-		if (opts.arrow) {
-			arrowEl = overlay.querySelector(":scope > .x-overlay-arrow");
-			if (!arrowEl) {
-				arrowEl = document.createElement("span");
-				arrowEl.className = "x-overlay-arrow";
-				arrowEl.setAttribute("aria-hidden", "true");
-				overlay.append(arrowEl);
-				arrowOwned = true;
-			}
-			if (typeof opts.arrow === "number") overlay.style.setProperty("--overlay-arrow-size", `${opts.arrow}px`);
-		}
-		const boundaryRect = () => {
-			const w = opts.within;
-			if (!w) return void 0;
-			return {
-				x: w.left(),
-				y: w.top(),
-				width: w.width(),
-				height: w.height()
-			};
-		};
-		const update = async () => {
-			const style = getComputedStyle(overlay);
-			const placementHint = areaToPlacement(style.getPropertyValue("--overlay-area"), style.direction === "rtl");
-			const gapPx = resolveVarPx(overlay, "--overlay-gap", "width", "var(--space-2, 8px)");
-			const boundary = boundaryRect();
-			const middleware = [
-				offset(gapPx),
-				flip(boundary ? { boundary } : void 0),
-				shift(boundary ? { boundary } : void 0)
-			];
-			if (arrowEl) middleware.push(arrow({ element: arrowEl }));
-			const { x, y, placement, middlewareData } = await computePosition(el, overlay, {
-				strategy: "fixed",
-				placement: placementHint,
-				middleware
-			});
-			if (disposed) return;
-			const constraint = resolveConstraint(overlay);
-			overlay.style.setProperty("--overlay-x", `${x + overlay.offsetWidth / 2 - constraint.left}px`);
-			overlay.style.setProperty("--overlay-y", `${y + overlay.offsetHeight / 2 - constraint.top}px`);
-			if (placement) overlay.setAttribute("data-placed", placement.split("-")[0]);
-			const a = middlewareData.arrow;
-			if (a) {
-				if (a.x !== void 0) overlay.style.setProperty("--overlay-arrow-x", `${a.x}px`);
-				if (a.y !== void 0) overlay.style.setProperty("--overlay-arrow-y", `${a.y}px`);
-			}
-		};
-		let stop;
-		let morphIn = isOpen();
-		const suppress = () => overlay.style.setProperty("transition-property", TRACKING_TRANSITIONS);
-		const release = () => overlay.style.removeProperty("transition-property");
-		const startLoop = () => {
-			if (stop) return;
-			const instant = !morphIn;
-			morphIn = false;
-			if (instant) suppress();
-			else if (!overlay.style.getPropertyValue("--overlay-x")) {
-				const rect = overlay.getBoundingClientRect();
-				const c = resolveConstraint(overlay);
-				overlay.style.setProperty("--overlay-x", `${rect.left + rect.width / 2 - c.left}px`);
-				overlay.style.setProperty("--overlay-y", `${rect.top + rect.height / 2 - c.top}px`);
-			}
-			let pending = instant;
-			stop = autoUpdate(el, overlay, () => update().then(() => {
-				if (pending && !disposed) {
-					pending = false;
-					release();
-				}
-			}));
-		};
-		haltLoop = () => {
-			stop?.();
-			stop = void 0;
-			release();
-		};
-		onRepoint = () => {
-			if (stop) update();
-		};
-		const sync = () => {
-			if (disposed) return;
-			if (isOpen()) startLoop();
-			else haltLoop?.();
-		};
-		const onDragMove = () => {
-			suppress();
-			update();
-		};
-		const onDragEnd = () => {
-			if (disposed || !stop) return;
-			release();
-			update();
-		};
-		overlay.addEventListener("toggle", sync);
-		overlay.addEventListener("close", sync);
-		el.addEventListener("dragmove", onDragMove);
-		el.addEventListener("dragend", onDragEnd);
-		const openObserver = new MutationObserver(sync);
-		openObserver.observe(overlay, {
-			attributes: true,
-			attributeFilter: ["open"]
-		});
-		sync();
-		engineDispose = () => {
-			haltLoop?.();
-			openObserver.disconnect();
-			overlay.removeEventListener("toggle", sync);
-			overlay.removeEventListener("close", sync);
-			el.removeEventListener("dragmove", onDragMove);
-			el.removeEventListener("dragend", onDragEnd);
-			overlay.style.removeProperty("--overlay-arrow-x");
-			overlay.style.removeProperty("--overlay-arrow-y");
-			if (typeof opts.arrow === "number") overlay.style.removeProperty("--overlay-arrow-size");
-			if (arrowOwned) arrowEl?.remove();
-		};
+const WINDOW_BOX = new WindowBox();
+var ElementBox = class {
+	#rect;
+	constructor(el) {
+		this.#rect = createElementRect(el);
 	}
-	const repin = (event) => {
-		if (disposed) return;
-		const target = resolveFollow();
-		if (!target) return;
-		if ((event.newState === "open" || event.type !== "toggle" && isOpen()) && !el.hasAttribute("data-follow")) {
-			el.style.removeProperty("top");
-			el.style.removeProperty("left");
-			el.style.removeProperty("width");
-			el.style.removeProperty("height");
-			pin(target);
-		}
-	};
-	overlay.addEventListener("toggle", repin);
-	const repinObserver = new MutationObserver((mutations) => {
-		if (mutations.some((m) => m.attributeName === "open")) repin(new Event("open"));
-	});
-	repinObserver.observe(overlay, {
-		attributes: true,
-		attributeFilter: ["open"]
-	});
-	stampPlacedHint();
-	let stopFollowEffect;
-	if (typeof follow === "function") {
-		let first = true;
-		stopFollowEffect = effect(() => {
-			pin(resolveFollow());
-			if (!first) onRepoint?.();
-			first = false;
-		});
-	} else pin(resolveFollow());
-	const dispose = () => {
-		disposed = true;
-		stopFollowEffect?.();
-		engineDispose?.();
-		unpinCleanup();
-		followObserver.disconnect();
-		repinObserver.disconnect();
-		overlay.removeEventListener("toggle", repin);
-		overlay.removeAttribute("data-placed");
-		el.remove();
-	};
-	onCleanup(dispose);
-	return el;
-}
-//#endregion
-//#region src/ui/overlay/resize-strategy.ts
-/**
-* Resize strategies — pluggable policy for a resize drag's live bounds
-* and resting size. Pure (no DOM); the gesture injects the context.
-* Built-in: `freeResize` (default). `detents()` (detents.ts) quantizes a
-* constraint region and doubles as a strategy.
-*/
-/** How far (ms) a release velocity is projected when picking a rest. */
-const PROJECTION_MS = 160;
-/** Clamp `value` into `[min, max]`. */
-function clamp(value, min, max) {
-	return Math.min(Math.max(value, min), max);
-}
-/**
-* Picks the index of the detent closest to the released size, projected
-* along the release velocity (px/ms, positive = shrinking). Returns `-1`
-* when the gesture should dismiss instead.
-*/
-function closestDetent(sizePx, detentsPx, velocityPxPerMs = 0, dismissible = false, velocityThreshold = .5) {
-	const projected = sizePx - velocityPxPerMs * 160;
-	if (dismissible) {
-		const smallest = detentsPx[0] ?? 0;
-		if (projected < smallest / 2) return -1;
-		if (sizePx < smallest && velocityPxPerMs > velocityThreshold) return -1;
-	}
-	let best = 0;
-	for (let i = 1; i < detentsPx.length; i++) if (Math.abs(detentsPx[i] - projected) < Math.abs(detentsPx[best] - projected)) best = i;
-	return best;
-}
-/**
-* Free resize: drag to any size within the room; a flick or shrink past
-* the minimum dismisses. The default strategy.
-*/
-function freeResize(opts) {
-	return {
-		bounds: (ctx) => [opts?.min ?? ctx.min, ctx.max],
-		rest: (ctx) => {
-			const lo = opts?.min ?? ctx.min;
-			const projected = ctx.size - ctx.velocity * 160;
-			if (ctx.dismissible && (projected < lo / 2 || ctx.size < lo && ctx.velocity > ctx.velocityThreshold)) return null;
-			return clamp(ctx.size, lo, ctx.max);
-		}
-	};
-}
+	[Symbol.dispose]() {
+		this.#rect[Symbol.dispose]();
+	}
+	get x() {
+		return this.#rect().left;
+	}
+	get y() {
+		return this.#rect().top;
+	}
+	get w() {
+		return this.#rect().width;
+	}
+	get h() {
+		return this.#rect().height;
+	}
+};
 //#endregion
-//#region src/ui/overlay/detents.ts
-/**
-* Quantizes a region: each stop is a fraction of the region along the
-* axis (number `0–1`) or a CSS length (string, resize-only). Flick-aware
-* on release; shrinking past the smallest stop dismisses (when the
-* consumer allows dismissal).
-*
-* @example
-* ```ts
-* import { constraint, detents } from "elements-kit/ui/overlay";
-*
-* const d = detents(constraint(), [0.25, 0.6, 0.9]); // of the viewport
-* ```
-*/
-function detents(region, stops) {
-	const resolved = (ctx) => stops.map((s) => clamp(ctx.resolve(s), ctx.min, ctx.max)).sort((a, b) => a - b);
-	return {
-		region,
-		stops,
-		positions(axis) {
-			const size = axis === "width" ? region.width() : region.height();
-			return stops.filter((s) => typeof s === "number").map((s) => s * size).sort((a, b) => a - b);
-		},
-		bounds(ctx) {
-			const s = resolved(ctx);
-			return [s[0] ?? ctx.min, s[s.length - 1] ?? ctx.max];
-		},
-		rest(ctx) {
-			const s = resolved(ctx);
-			const i = closestDetent(ctx.size, s, ctx.velocity, ctx.dismissible, ctx.velocityThreshold);
-			return i === -1 ? null : s[i];
-		}
-	};
-}
-/** Clamp with rubber-band resistance past either bound. */
-function resist(value, min, max, resistance = 3) {
-	if (value > max) return max + (value - max) / resistance;
-	if (value < min) return min - (min - value) / resistance;
-	return value;
-}
+//#region src/ui/overlay/anchor.ts
 /**
-* The block / inline handle sides a `data-resize` value encodes. Edges
-* name one axis (`block-start`, `inline-end` → the other side `null`);
-* corners name both as a `start`/`end` pair, block side first
-* (`end-end`, `start-end`).
+* The reactive `anchor()` function: the viewport coordinate of an anchor line
+* on `box`, in the context of the inset property being computed. Reads the
+* box's reactive geometry, so calling it inside an `effect` tracks the anchor.
 */
-function parseResize(resize) {
-	const value = resize.trim();
-	const corner = /^(start|end)-(start|end)$/.exec(value);
-	if (corner) return {
-		block: corner[1],
-		inline: corner[2]
-	};
-	const block = /^block-(start|end)$/.exec(value);
-	if (block) return {
-		block: block[1],
-		inline: null
-	};
-	const inline = /^inline-(start|end)$/.exec(value);
-	if (inline) return {
-		block: null,
-		inline: inline[1]
-	};
-	return {
-		block: null,
-		inline: null
-	};
+function anchor_length(box, inset, side) {
+	const physical = resolveInset(inset);
+	const block = physical === "top" || physical === "bottom";
+	const lo = block ? box.y : box.x;
+	const size = block ? box.h : box.w;
+	return lo + fraction(box, block, physical, side) * size;
+}
+/** A side, as a fraction of the axis measured from its top/left edge. */
+function fraction(box, block, inset, side) {
+	switch (side) {
+		case "top":
+		case "left": return 0;
+		case "bottom":
+		case "right": return 1;
+		case "inside": return inset === "top" || inset === "left" ? 0 : 1;
+		case "outside": return inset === "top" || inset === "left" ? 1 : 0;
+		case "center": return .5;
+	}
+	const logical = typeof side === "number" ? side : side.endsWith("end") ? 1 : 0;
+	const rtl = side === "self-start" || side === "self-end" ? (box.direction ?? rootDirection()) === "rtl" : rootDirection() === "rtl";
+	return !block && rtl ? 1 - logical : logical;
+}
+/** The document root's direction — the fallback when a box has no own. */
+function rootDirection() {
+	return getComputedStyle(document.documentElement).direction === "rtl" ? "rtl" : "ltr";
+}
+/** A logical inset longhand → its physical side, through the containing
+* block's direction (horizontal writing modes — only inline flips). */
+function resolveInset(inset) {
+	switch (inset) {
+		case "inset-block-start": return "top";
+		case "inset-block-end": return "bottom";
+		case "inset-inline-start": return getComputedStyle(document.documentElement).direction === "rtl" ? "right" : "left";
+		case "inset-inline-end": return getComputedStyle(document.documentElement).direction === "rtl" ? "left" : "right";
+		default: return inset;
+	}
 }
-/** New per-axis velocity (px/ms) from a move; keeps the prior value when
-* the timestamp doesn't advance (synthetic events). */
-function updateVelocity(prev, client, timeStamp) {
-	const dt = timeStamp - prev.lastTime;
-	if (dt > 0) return {
-		x: (client.x - prev.prev.x) / dt,
-		y: (client.y - prev.prev.y) / dt
-	};
-	return prev.velocity;
+const B = (region, physical = false) => ({
+	axis: "block",
+	region,
+	physical,
+	self: false
+});
+const I = (region, physical = false) => ({
+	axis: "inline",
+	region,
+	physical,
+	self: false
+});
+const A = (region, self = false) => ({
+	axis: "ambiguous",
+	region,
+	physical: false,
+	self
+});
+/** The full `position-area` keyword grammar → axis + physical region. */
+const KEYWORDS = {
+	top: B("start", true),
+	bottom: B("end", true),
+	"span-top": B("span-start", true),
+	"span-bottom": B("span-end", true),
+	left: I("start", true),
+	right: I("end", true),
+	"span-left": I("span-start", true),
+	"span-right": I("span-end", true),
+	center: {
+		axis: "ambiguous",
+		region: "center",
+		physical: true,
+		self: false
+	},
+	"span-all": {
+		axis: "ambiguous",
+		region: "span-all",
+		physical: true,
+		self: false
+	},
+	"block-start": B("start"),
+	"block-end": B("end"),
+	"span-block-start": B("span-start"),
+	"span-block-end": B("span-end"),
+	"y-start": B("start"),
+	"y-end": B("end"),
+	"span-y-start": B("span-start"),
+	"span-y-end": B("span-end"),
+	"inline-start": I("start"),
+	"inline-end": I("end"),
+	"span-inline-start": I("span-start"),
+	"span-inline-end": I("span-end"),
+	"x-start": I("start"),
+	"x-end": I("end"),
+	"span-x-start": I("span-start"),
+	"span-x-end": I("span-end"),
+	start: A("start"),
+	end: A("end"),
+	"span-start": A("span-start"),
+	"span-end": A("span-end"),
+	"self-start": A("start", true),
+	"self-end": A("end", true),
+	"span-self-start": A("span-start", true),
+	"span-self-end": A("span-end", true)
+};
+const SPAN_ALL = KEYWORDS["span-all"];
+function flipRegion(r) {
+	return r === "start" ? "end" : r === "end" ? "start" : r === "span-start" ? "span-end" : r === "span-end" ? "span-start" : r;
 }
-/**
-* Which gesture a pointerdown engages, by zone priority: corner grip →
-* move strip → whole-surface edge drag. Returns `null` when the pointer
-* misses every zone.
-*/
-function detectEngagement(args) {
-	const { block, inline, draggable, rect, pointer, dir } = args;
-	const corner = block !== null && inline !== null;
-	const handleRight = inline === "end" === (dir === 1);
-	if (corner && Math.abs(pointer.x - (handleRight ? rect.right : rect.left)) <= 28 && Math.abs(pointer.y - (block === "end" ? rect.bottom : rect.top)) <= 28) return "resize";
-	const topCenterResize = block === "start" && inline === null;
-	if (draggable && pointer.y - rect.top >= 0 && pointer.y - rect.top <= 28 && (!topCenterResize || Math.abs(pointer.x - (dir === 1 ? rect.left : rect.right)) <= 28)) return "move";
-	if (block !== null && inline === null) return "block";
-	if (inline !== null && block === null) return "inline";
-	return null;
+/** Resolve a keyword to a physical region: block never flips; inline flips
+* in RTL unless the keyword is physical. */
+function toPhysical(kw, axis, dir, selfDir) {
+	const r = kw.region;
+	if (r === "center" || r === "span-all" || axis === "block" || kw.physical) return r;
+	return (kw.self ? selfDir : dir) === "rtl" ? flipRegion(r) : r;
 }
 /**
-* Edge-drag setup: the growth `sign` (handle grows toward the pointer),
-* the `anchorSign` for the location shift, and whether the handle-less
-* edge already sits flush against the constraint (`docked` → the CSS clamp
-* holds it, skip the shift).
+* Parse a `position-area` value into a physical {@link Area}. One or two
+* keywords, order-independent; an axis-specific single keyword spans the
+* other axis, an ambiguous one applies to both. Unknown/empty → `block-end`.
 */
-function edgeSetup(args) {
-	const { axis, side, rect, constraint, dir } = args;
-	if (axis === "block") {
-		const sign = side === "end" ? 1 : -1;
-		const anchorEdge = side === "start" ? rect.bottom : rect.top;
-		const constraintEdge = side === "start" ? constraint.top + constraint.height : constraint.top;
-		return {
-			sign,
-			anchorSign: sign,
-			docked: Math.abs(anchorEdge - constraintEdge) < 1
-		};
+function resolveArea(area, dir = "ltr", selfDir = dir) {
+	const tokens = area.trim().toLowerCase().split(/\s+/).filter(Boolean);
+	const fallback = () => ({
+		block: "end",
+		inline: "center"
+	});
+	if (tokens.length === 0 || tokens.length > 2) return fallback();
+	const kws = [];
+	for (const token of tokens) {
+		const keyword = KEYWORDS[token];
+		if (!keyword) return fallback();
+		kws.push(keyword);
+	}
+	const [first, second] = kws;
+	if (first && second && first.axis !== "ambiguous" && first.axis === second.axis) return fallback();
+	let block;
+	let inline;
+	if (kws.length === 1) {
+		const k = kws[0];
+		if (k.axis === "block") block = k, inline = SPAN_ALL;
+		else if (k.axis === "inline") inline = k, block = SPAN_ALL;
+		else block = k, inline = k;
+	} else if (kws.length === 2) {
+		for (const k of kws) if (k.axis === "block") block = k;
+		else if (k.axis === "inline") inline = k;
+		const ambs = kws.filter((k) => k.axis === "ambiguous");
+		if (!block && !inline) block = ambs[0], inline = ambs[1] ?? ambs[0];
+		else if (!block) block = ambs[0];
+		else if (!inline) inline = ambs[0];
 	}
-	const handleRight = side === "end" === (dir === 1);
-	const anchorEdge = handleRight ? rect.left : rect.right;
-	const constraintEdge = handleRight ? constraint.left : constraint.left + constraint.width;
 	return {
-		sign: (side === "end" ? 1 : -1) * dir,
-		anchorSign: handleRight ? 1 : -1,
-		docked: Math.abs(anchorEdge - constraintEdge) < 1
-	};
+		block: block ? toPhysical(block, "block", dir, selfDir) : "end",
+		inline: inline ? toPhysical(inline, "inline", dir, selfDir) : "center"
+	};
+}
+/** One axis of the position-area containing block, as `[lo, hi]` viewport
+* coordinates. The anchor's two edges cut `[bLo, bHi]` into before/over/after. */
+function axisSpan(lo, hi, bLo, bHi, region) {
+	switch (region) {
+		case "start": return [bLo, lo];
+		case "end": return [hi, bHi];
+		case "center": return [lo, hi];
+		case "span-start": return [bLo, hi];
+		case "span-end": return [lo, bHi];
+		default: return [bLo, bHi];
+	}
 }
 /**
-* Edge-drag resolution: from a target size + soft bounds, the rendered
-* size and the slide offset (the value to write to `--overlay-dx/-dy`, or
-* `null` to remove it). Both bounds rubber-band, but in different channels:
+* The reactive `position-area` property: the region of the viewport an
+* overlay anchored to `anchor` may occupy, with the region's default
+* self-alignment as {@link Region.place} — outward regions hug the anchor,
+* spans go flush against its far edge, center is `anchor-center`. Nothing is
+* written; the caller takes what it wants from `place`:
 *
-* - Above `hi` the size grows with resistance, but only up to the hard `max`
-*   (the room from the anchored edge to the constraint). Past the room the
-*   box cannot grow — `max-width`/`-height` caps it and the location clamp
-*   would shove the *anchored* edge inward — so the size pins to `max` and
-*   the resisted overshoot rides the unclamped slide instead, translating
-*   the whole surface past the edge (handle-side rubber-band). On release the
-*   strategy rests at the room and the slide clears, snapping it back in.
-* - Below `lo` the size pins to `lo` and the surface slides toward its edge
-*   (the dismiss preview).
+*   const area = new PositionArea(a, "top span-left");
+*   effect(() => { overlay.x = area.place(overlay).x; });
 *
-* With a soft `hi` below the room (e.g. a `detents` max) the size-band
-* between `hi` and `max` renders normally before the slide takes over.
-*/
-function edgeDrag(args) {
-	const { target, lo, hi, sign, max = Infinity } = args;
-	if (target > hi) return slidePastRoom(hi + (target - hi) / 3, max, sign);
-	if (target < lo) return {
-		size: lo,
-		slide: -sign * (lo - Math.max(target, 0))
-	};
-	return {
-		size: target,
-		slide: null
-	};
-}
-/**
-* Cap a resisted size at the room `max`; route the resisted overshoot beyond
-* it to the slide channel (translating the surface past the edge instead of
-* letting the CSS clamp shove the anchored edge). `null` slide within the room.
-* The handle-side rubber-band shared by the edge ({@link edgeDrag}) and corner
-* resizes — both can only grow until the handle reaches the constraint.
-*/
-function slidePastRoom(resisted, max, sign) {
-	if (resisted <= max) return {
-		size: resisted,
-		slide: null
-	};
-	return {
-		size: max,
-		slide: sign * (resisted - max)
-	};
-}
-/**
-* Pin the opposite edge along one axis: shift the center-anchored location
-* by half the size change. Returns the rect-relative center coordinate, or
-* `null` when docked (the CSS clamp already holds that edge). The single
-* source of anchoring truth for block, inline, and corner resizes.
+* The value is parsed once, at construction; the geometry reads the anchor
+* and window on every access, so reading it inside an `effect` tracks both.
+*
+* Bounded by the window. A tighter bound (a `Constraint`, a scroll container)
+* is an intersection with the region, so it composes afterwards rather than
+* being a parameter here.
+*
+* There is no gap parameter, for the same reason CSS has none: the offset off
+* the anchor is the overlay's own `margin`.
 */
-function anchor$1(args) {
-	const { axis, center0, constraint, anchorSign, startSize, size, docked } = args;
-	if (docked) return null;
-	const origin = axis === "width" ? constraint.left : constraint.top;
-	return (axis === "width" ? center0.x : center0.y) - origin + anchorSign * (size - startSize) / 2;
-}
-//#endregion
-//#region src/ui/overlay/draggable.ts
-const isSpace = (s) => "positions" in s;
-function draggable(target, space, ...effects) {
-	const region = space && isSpace(space) ? space.region : space;
-	const boundsFor = (axis) => {
-		if (!region) return axis === "x" ? [0, window.innerWidth] : [0, window.innerHeight];
-		return axis === "x" ? [region.left(), region.left() + region.width()] : [region.top(), region.top() + region.height()];
-	};
-	const during = (value, axis) => {
-		const bounds = boundsFor(axis);
-		let v = value;
-		for (const e of effects) if (e.during) v = e.during(v, bounds);
-		return v;
-	};
-	const write = (x, y) => {
-		target.style.left = `${x}px`;
-		target.style.top = `${y}px`;
-	};
-	const emit = (type, detail) => target.dispatchEvent(new CustomEvent(type, {
-		detail,
-		bubbles: true
-	}));
-	/** Tear a `data-follow` pin: freeze the current rect inline (inline
-	* wins over the pin rule — no jump), then drop the pin machinery. */
-	const takeOver = () => {
-		const rect = target.getBoundingClientRect();
-		write(rect.left, rect.top);
-		if (target.hasAttribute("data-follow")) {
-			target.style.width = `${rect.width}px`;
-			target.style.height = `${rect.height}px`;
-			target.removeAttribute("data-follow");
-			target.style.removeProperty("position-anchor");
-		}
+var PositionArea = class {
+	anchor;
+	#area;
+	constructor(anchor, area) {
+		this.anchor = anchor;
+		this.#area = resolveArea(area, rootDirection());
+	}
+	/** The inline axis as `[lo, hi]`, re-read from the anchor and window. */
+	get #ix() {
+		const a = this.anchor;
+		const w = WINDOW_BOX;
+		return axisSpan(a.x, a.x + a.w, w.x, w.x + w.w, this.#area.inline);
+	}
+	/** The block axis as `[lo, hi]`. */
+	get #iy() {
+		const a = this.anchor;
+		const w = WINDOW_BOX;
+		return axisSpan(a.y, a.y + a.h, w.y, w.y + w.h, this.#area.block);
+	}
+	get #px() {
+		const a = this.anchor;
+		return pinOf(this.#area.inline, a.x, a.x + a.w);
+	}
+	get #py() {
+		const a = this.anchor;
+		return pinOf(this.#area.block, a.y, a.y + a.h);
+	}
+	get x() {
+		return this.#ix[0];
+	}
+	get y() {
+		return this.#iy[0];
+	}
+	get w() {
+		const [lo, hi] = this.#ix;
+		return hi - lo;
+	}
+	get h() {
+		const [lo, hi] = this.#iy;
+		return hi - lo;
+	}
+	get left() {
+		return inset(this.#px, "start");
+	}
+	get right() {
+		return inset(this.#px, "end");
+	}
+	get top() {
+		return inset(this.#py, "start");
+	}
+	get bottom() {
+		return inset(this.#py, "end");
+	}
+	place(box) {
 		return {
-			left: rect.left,
-			top: rect.top
+			x: placeAxis(this.#px, box.x, box.w),
+			y: placeAxis(this.#py, box.y, box.h),
+			w: box.w,
+			h: box.h
 		};
-	};
-	const settleAxis = (value, velocity, axis) => {
-		const bounds = boundsFor(axis);
-		let v = value;
-		for (const e of effects) {
-			if (!e.settle) continue;
-			const s = e.settle(v, velocity, bounds);
-			if (s === null) return null;
-			v = s;
-		}
-		if (space && isSpace(space)) {
-			const stops = space.positions(axis === "x" ? "width" : "height");
-			if (stops.length && region) {
-				const origin = axis === "x" ? region.left() : region.top();
-				const projected = v + velocity * 160;
-				let best = origin + stops[0];
-				for (const stop of stops) {
-					const candidate = origin + stop;
-					if (Math.abs(candidate - projected) < Math.abs(best - projected)) best = candidate;
-				}
-				v = best;
-			}
-		}
-		return v;
-	};
-	const attachments = [];
-	const attach = (handle) => {
-		let engaged = null;
-		const onDown = (event) => {
-			if (engaged || event.button !== 0) return;
-			if (event.target?.closest("button, a, label, input, select, textarea, [contenteditable]")) return;
-			engaged = {
-				start: takeOver(),
-				down: {
-					x: event.clientX,
-					y: event.clientY
-				},
-				tracker: {
-					prev: {
-						x: event.clientX,
-						y: event.clientY
-					},
-					lastTime: event.timeStamp,
-					velocity: {
-						x: 0,
-						y: 0
-					}
-				},
-				transition: target.style.transitionProperty
-			};
-			target.style.transitionProperty = "none";
-			handle.setPointerCapture(event.pointerId);
+	}
+};
+/** A region's default self-alignment as a pin on the anchor's `[lo, hi]` —
+* outward regions hug the anchor's near edge, spans its far edge; `center`
+* and `span-all` are `anchor-center`, which may overflow the rect. */
+function pinOf(region, lo, hi) {
+	switch (region) {
+		case "start": return {
+			align: "end",
+			at: lo
 		};
-		const onMove = (event) => {
-			if (!engaged) return;
-			const client = {
-				x: event.clientX,
-				y: event.clientY
-			};
-			engaged.tracker.velocity = updateVelocity(engaged.tracker, client, event.timeStamp);
-			engaged.tracker.prev = client;
-			engaged.tracker.lastTime = event.timeStamp;
-			const x = during(engaged.start.left + (client.x - engaged.down.x), "x");
-			const y = during(engaged.start.top + (client.y - engaged.down.y), "y");
-			write(x, y);
-			emit("dragmove", {
-				x,
-				y
-			});
+		case "span-start": return {
+			align: "end",
+			at: hi
 		};
-		const onUp = (event) => {
-			if (!engaged) return;
-			const { start, down, tracker, transition } = engaged;
-			engaged = null;
-			target.style.transitionProperty = transition;
-			const raw = {
-				x: start.left + (event.clientX - down.x),
-				y: start.top + (event.clientY - down.y)
-			};
-			const x = settleAxis(raw.x, tracker.velocity.x, "x");
-			const y = settleAxis(raw.y, tracker.velocity.y, "y");
-			const rest = x === null || y === null ? null : {
-				x,
-				y
-			};
-			if (rest) write(rest.x, rest.y);
-			emit("dragend", {
-				...raw,
-				velocity: tracker.velocity,
-				rest
-			});
+		case "end": return {
+			align: "start",
+			at: hi
 		};
-		handle.addEventListener("pointerdown", onDown);
-		handle.addEventListener("pointermove", onMove);
-		handle.addEventListener("pointerup", onUp);
-		handle.addEventListener("pointercancel", onUp);
-		const dispose = () => {
-			handle.removeEventListener("pointerdown", onDown);
-			handle.removeEventListener("pointermove", onMove);
-			handle.removeEventListener("pointerup", onUp);
-			handle.removeEventListener("pointercancel", onUp);
+		case "span-end": return {
+			align: "start",
+			at: lo
 		};
-		attachments.push(dispose);
-		return { dispose };
-	};
-	const update = (point) => {
-		takeOver();
-		const x = during(point.x, "x");
-		const y = during(point.y, "y");
-		write(x, y);
-		emit("dragmove", {
-			x,
-			y
-		});
-	};
-	const dispose = () => {
-		for (const detach of attachments.splice(0)) detach();
-	};
-	onCleanup(dispose);
-	return {
-		update,
-		attach,
-		dispose,
-		[Symbol.dispose]: dispose
-	};
-}
-//#endregion
-//#region src/ui/overlay/move-session.ts
-/** Move bounds on the box center — the same clamp the stylesheet applies to
-* the persisted location point (center floor = half the box). */
-function moveBounds(args) {
-	const { rect, constraint } = args;
-	const minX = constraint.left + rect.width / 2;
-	const minY = constraint.top + rect.height / 2;
-	return {
-		minX,
-		minY,
-		maxX: Math.max(constraint.left + constraint.width - rect.width / 2, minX),
-		maxY: Math.max(constraint.top + constraint.height - rect.height / 2, minY)
-	};
-}
-/** Live move offset (`--overlay-dx/-dy`): 1:1 inside the bounds, rubber-band
-* resistance beyond them. */
-function moveOffset(args) {
-	const { center0, client, start, bounds } = args;
-	return {
-		dx: resist(center0.x + (client.x - start.x), bounds.minX, bounds.maxX) - center0.x,
-		dy: resist(center0.y + (client.y - start.y), bounds.minY, bounds.maxY) - center0.y
-	};
-}
-/** Rested move location (rect-relative), clamped inside the bounds. */
-function moveRest(args) {
-	const { center0, client, start, bounds, constraint } = args;
-	const cx = clamp(center0.x + (client.x - start.x), bounds.minX, bounds.maxX);
-	const cy = clamp(center0.y + (client.y - start.y), bounds.minY, bounds.maxY);
-	return {
-		x: cx - constraint.left,
-		y: cy - constraint.top
-	};
-}
-/** Whether a flicked move's projected center leaves the constraint (close). */
-function projectedOutOfBounds(args) {
-	const { rect, velocity, constraint } = args;
-	const px = rect.left + rect.width / 2 + velocity.x * 160;
-	const py = rect.top + rect.height / 2 + velocity.y * 160;
-	return px < constraint.left || px > constraint.left + constraint.width || py < constraint.top || py > constraint.top + constraint.height;
-}
-/**
-* Window move — x/y drag from the top strip, flick off the constraint to
-* dismiss. Doesn't resize: writes only `offset` live and the rested x/y on
-* release (so the I/O layer fires no `resizechange`).
-*/
-function moveSession(snap, deps, io) {
-	const bounds = moveBounds({
-		rect: snap.rect,
-		constraint: snap.constraint
-	});
-	return {
-		move(p) {
-			const { dx, dy } = moveOffset({
-				center0: snap.center0,
-				client: p.current,
-				start: p.start,
-				bounds
-			});
-			io.sync({ offset: {
-				dx,
-				dy
-			} });
-		},
-		release(p) {
-			if (deps.dismissible && projectedOutOfBounds({
-				rect: deps.liveRect(),
-				velocity: p.velocity,
-				constraint: snap.constraint
-			})) return io.dismiss();
-			const r = moveRest({
-				center0: snap.center0,
-				client: p.current,
-				start: p.start,
-				bounds,
-				constraint: snap.constraint
-			});
-			io.commit({
-				x: r.x,
-				y: r.y
-			});
-		},
-		cancel() {
-			io.revert([]);
-		}
-	};
+		default: return {
+			align: "center",
+			at: (lo + hi) / 2
+		};
+	}
 }
 //#endregion
-//#region src/ui/overlay/overlay-dom.ts
-/**
-* Overlay DOM — the only element-touching code. Two halves:
-*
-* - `createFrameIO`: reads the engage-time environment off the element
-*   (`engage`, turning layout into the plain-number {@link Snapshot} /
-*   {@link Resizer} / {@link MoveDeps} the pure modes consume) and renders
-*   their output back to the `--overlay-*` channels (`sync` / `commit`) or
-*   reverts/dismisses.
-* - `createGestureRecognizer`: generic single-pointer drag plumbing
-*   (capture, velocity, the touch-scroll block) that drives a {@link Session}.
-*
-* Everything between — the mode reducers and their math — stays pure and
-* element-free (`gesture-model` + the mode files).
-*/
-const CHANNEL = {
-	x: "--overlay-x",
-	y: "--overlay-y",
-	w: "--overlay-w",
-	h: "--overlay-h"
+//#region src/ui/overlay/overlay.ts
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+	throw TypeError(msg);
 };
-function createFrameIO(overlay, options) {
-	const { strategy, dismissible, velocityThreshold } = options;
-	const getProp = (name) => overlay.style.getPropertyValue(name);
-	const setLen = (name, px) => overlay.style.setProperty(name, `${px}px`);
-	/** Channels at engage — `revert`/`dismiss` restore these. */
-	let prev = {
-		x: "",
-		y: "",
-		w: "",
-		h: ""
-	};
-	const restoreChannel = (name, value) => {
-		if (value) overlay.style.setProperty(name, value);
-		else overlay.style.removeProperty(name);
-	};
-	const clearDrag = () => {
-		overlay.style.removeProperty("height");
-		overlay.style.removeProperty("width");
-		overlay.style.removeProperty("--overlay-dy");
-		overlay.style.removeProperty("--overlay-dx");
-		overlay.style.removeProperty("transition");
-		overlay.style.removeProperty("user-select");
-		overlay.style.removeProperty("-webkit-user-select");
-	};
-	const emitResize = () => {
-		overlay.dispatchEvent(new CustomEvent("resizechange", {
-			bubbles: true,
-			composed: true,
-			detail: {
-				width: getProp("--overlay-w") || void 0,
-				height: getProp("--overlay-h") || void 0
-			}
-		}));
-	};
-	/** Resolves a CSS length to px in the overlay's context (strategy steps). */
-	const probeLength = (value, axis) => {
-		const probe = document.createElement("div");
-		probe.style.position = "absolute";
-		probe.style.visibility = "hidden";
-		probe.style[axis] = value;
-		overlay.appendChild(probe);
-		const px = probe.getBoundingClientRect()[axis];
-		probe.remove();
-		return px;
-	};
-	const writeFrame = (frame) => {
-		for (const k of [
-			"x",
-			"y",
-			"w",
-			"h"
-		]) {
-			const v = frame[k];
-			if (v !== void 0) setLen(CHANNEL[k], v);
-		}
-	};
-	const applyOffset = (name, v) => {
-		if (v === void 0) return;
-		if (v === null) overlay.style.removeProperty(name);
-		else setLen(name, v);
-	};
-	return {
-		engage() {
-			const constraint = resolveConstraint(overlay);
-			const rect = overlay.getBoundingClientRect();
-			prev = {
-				x: getProp("--overlay-x"),
-				y: getProp("--overlay-y"),
-				w: getProp("--overlay-w"),
-				h: getProp("--overlay-h")
-			};
-			const dir = getComputedStyle(overlay).direction === "rtl" ? -1 : 1;
-			const ctx = (q) => ({
-				...q,
-				dismissible,
-				velocityThreshold,
-				resolve: (value) => typeof value === "number" ? value * (q.axis === "width" ? constraint.width : constraint.height) : probeLength(value, q.axis)
-			});
-			return {
-				snapshot: {
-					constraint,
-					rect,
-					center0: {
-						x: rect.left + rect.width / 2,
-						y: rect.top + rect.height / 2
-					},
-					dir
-				},
-				resizer: {
-					bounds: (a) => strategy.bounds ? strategy.bounds(ctx({
-						...a,
-						size: a.startSize,
-						velocity: 0
-					})) : [a.min, a.max],
-					rest: (a, drag) => strategy.rest(ctx({
-						...a,
-						...drag
-					}))
-				},
-				move: {
-					dismissible,
-					liveRect: () => overlay.getBoundingClientRect()
-				}
-			};
-		},
-		sync(patch) {
-			overlay.style.transition = "none";
-			if (patch.frame) {
-				const f = patch.frame;
-				if (f.w !== void 0) overlay.style.width = `${f.w}px`;
-				if (f.h !== void 0) overlay.style.height = `${f.h}px`;
-				if (f.x !== void 0) setLen("--overlay-x", f.x);
-				if (f.y !== void 0) setLen("--overlay-y", f.y);
-			}
-			if (patch.offset) {
-				applyOffset("--overlay-dx", patch.offset.dx);
-				applyOffset("--overlay-dy", patch.offset.dy);
-			}
-		},
-		commit(frame) {
-			clearDrag();
-			writeFrame(frame);
-			if (frame.w !== void 0 || frame.h !== void 0) emitResize();
-		},
-		dismiss() {
-			clearDrag();
-			restoreChannel("--overlay-x", prev.x);
-			restoreChannel("--overlay-y", prev.y);
-			restoreChannel("--overlay-w", prev.w);
-			restoreChannel("--overlay-h", prev.h);
-			if (overlay instanceof HTMLDialogElement && overlay.open) overlay.close();
-			else overlay.hidePopover?.();
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+	enumerable: true,
+	configurable: true,
+	writable: true,
+	value
+}) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", {
+	value,
+	configurable: true
+});
+var __decoratorStart = (base) => [
+	,
+	,
+	,
+	__create(base?.[__knownSymbol("metadata")] ?? null)
+];
+var __decoratorStrings = [
+	"class",
+	"method",
+	"getter",
+	"setter",
+	"accessor",
+	"field",
+	"value",
+	"get",
+	"set"
+];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({
+	kind: __decoratorStrings[kind],
+	name,
+	metadata,
+	addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null))
+});
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+	for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+	return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+	var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+	var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+	var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+	var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : {
+		get [name]() {
+			return __privateGet(this, extra);
 		},
-		revert(keys) {
-			clearDrag();
-			for (const k of keys) restoreChannel(CHANNEL[k], prev[k]);
+		set [name](x) {
+			return __privateSet(this, extra, x);
 		}
-	};
-}
-/**
-* The pointer loop for `target`: single-pointer capture, velocity tracking,
-* text-selection suppression, and a non-passive `touchmove` block while a
-* drag is live. It owns the "is a drag active" state and drives the engaged
-* {@link Session} — `move`/`release`/`cancel` on pointermove/up/cancel. The
-* session owns the DOM writes (through the `io` it closed over); the
-* recognizer knows nothing about channels.
-*/
-function createGestureRecognizer(target, { canEngage, engage }) {
-	let active = null;
-	let pointer = null;
-	const onPointerDown = (event) => {
-		if (active) return;
-		if (!canEngage(event)) return;
-		const session = engage(event);
-		if (!session) return;
-		active = session;
-		const c = {
-			x: event.clientX,
-			y: event.clientY
-		};
-		pointer = {
-			start: { ...c },
-			prev: { ...c },
-			current: { ...c },
-			lastTime: event.timeStamp,
-			velocity: {
-				x: 0,
-				y: 0
-			}
-		};
-		target.style.userSelect = "none";
-		target.style.setProperty("-webkit-user-select", "none");
-		target.setPointerCapture?.(event.pointerId);
-	};
-	const onPointerMove = (event) => {
-		if (!active || !pointer) return;
-		const c = {
-			x: event.clientX,
-			y: event.clientY
-		};
-		pointer.velocity = updateVelocity(pointer, c, event.timeStamp);
-		pointer.prev = c;
-		pointer.lastTime = event.timeStamp;
-		pointer.current = c;
-		active.move(pointer);
-	};
-	const onPointerUp = (event) => {
-		if (!active || !pointer) return;
-		pointer.current = {
-			x: event.clientX,
-			y: event.clientY
-		};
-		const session = active;
-		active = null;
-		target.releasePointerCapture?.(event.pointerId);
-		session.release(pointer);
-		pointer = null;
-	};
-	const onPointerCancel = () => {
-		if (!active) return;
-		const session = active;
-		active = null;
-		pointer = null;
-		session.cancel();
-	};
-	const blockScroll = (event) => {
-		if (active) event.preventDefault();
-	};
-	target.addEventListener("pointerdown", onPointerDown);
-	target.addEventListener("pointermove", onPointerMove);
-	target.addEventListener("pointerup", onPointerUp);
-	target.addEventListener("pointercancel", onPointerCancel);
-	target.addEventListener("touchmove", blockScroll, { passive: false });
-	return { dispose() {
-		target.removeEventListener("pointerdown", onPointerDown);
-		target.removeEventListener("pointermove", onPointerMove);
-		target.removeEventListener("pointerup", onPointerUp);
-		target.removeEventListener("pointercancel", onPointerCancel);
-		target.removeEventListener("touchmove", blockScroll);
-	} };
-}
-//#endregion
-//#region src/ui/overlay/resize-height-session.ts
-/**
-* Height resize — the block-axis edge handle (sheets). One edge moves toward
-* the pointer; the opposite edge is pinned by the location shift, or held by
-* the CSS clamp when docked. Below the lower bound the surface slides away via
-* `--overlay-dy`. Self-contained: the height-axis wiring lives here.
-*/
-function resizeHeightSession(snap, resizer, io, side) {
-	const startSize = snap.rect.height;
-	const { sign, anchorSign, docked } = edgeSetup({
-		axis: "block",
-		side,
-		rect: snap.rect,
-		constraint: snap.constraint,
-		dir: snap.dir
-	});
-	const hardMax = anchorSign > 0 ? snap.constraint.top + snap.constraint.height - snap.rect.top : snap.rect.bottom - snap.constraint.top;
-	const ax = {
-		axis: "height",
-		startSize,
-		min: 0,
-		max: hardMax
-	};
-	const anchorAt = (size) => anchor$1({
-		axis: "height",
-		center0: snap.center0,
-		constraint: snap.constraint,
-		anchorSign,
-		startSize,
-		size,
-		docked
-	});
-	return {
-		move(p) {
-			const target = startSize + sign * (p.current.y - p.start.y);
-			const [lo, hi] = resizer.bounds(ax);
-			const { size, slide } = edgeDrag({
-				target,
-				lo,
-				hi,
-				sign,
-				max: hardMax
-			});
-			const a = anchorAt(size);
-			io.sync({
-				frame: {
-					h: size,
-					...a !== null ? { y: a } : {}
-				},
-				offset: { dy: slide }
-			});
-		},
-		release(p) {
-			const target = startSize + sign * (p.current.y - p.start.y);
-			const r = resizer.rest(ax, {
-				size: target,
-				velocity: -sign * p.velocity.y
-			});
-			if (r === null) return io.dismiss();
-			const a = anchorAt(r);
-			io.commit({
-				h: r,
-				...a !== null ? { y: a } : {}
-			});
-		},
-		cancel() {
-			io.revert(["x", "y"]);
+	}, name));
+	k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+	for (var i = decorators.length - 1; i >= 0; i--) {
+		ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+		if (k) {
+			ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+			if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+			if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
 		}
-	};
-}
-//#endregion
-//#region src/ui/overlay/resize-session.ts
-/** Corner resize: minimum width / height (free mode). */
-const MIN_RESIZE_W = 240;
-const MIN_RESIZE_H = 160;
-/** Corner-resize signs + which physical corner the handle is on. */
-function cornerSetup(args) {
-	const { block, inline, dir } = args;
-	return {
-		signX: (inline === "end" ? 1 : -1) * dir,
-		signY: block === "end" ? 1 : -1,
-		handleRight: inline === "end" === (dir === 1)
-	};
-}
-/**
-* Corner-resize bounds: the opposite corner stays anchored, so the room
-* toward the handle-side constraint edges caps the size (the grip never
-* leaves the constraint). The strategy bounds the width; the height is a
-* free clamp.
-*/
-function cornerBounds(args) {
-	const { rect, constraint, block, handleRight } = args;
-	const maxW = handleRight ? constraint.left + constraint.width - rect.left : rect.right - constraint.left;
-	return {
-		maxW,
-		maxH: block === "end" ? constraint.top + constraint.height - rect.top : rect.bottom - constraint.top,
-		hardMin: MIN_RESIZE_W,
-		hardMax: maxW
-	};
-}
-/**
-* Corner grip — free 2D resize, opposite corner anchored. The two axes are
-* asymmetric: the width follows the strategy (and alone decides dismissal),
-* the height is a free clamp `[MIN_RESIZE_H, maxH]` that never dismisses.
-*/
-function resizeSession(snap, resizer, io, block, inline) {
-	const { signX, signY, handleRight } = cornerSetup({
-		block,
-		inline,
-		dir: snap.dir
-	});
-	const { maxH, hardMin, hardMax } = cornerBounds({
-		rect: snap.rect,
-		constraint: snap.constraint,
-		block,
-		handleRight
-	});
-	const startW = snap.rect.width;
-	const startH = snap.rect.height;
-	const ax = {
-		axis: "width",
-		startSize: startW,
-		min: hardMin,
-		max: hardMax
-	};
-	const frameFor = (w, h) => ({
-		w,
-		h,
-		x: anchor$1({
-			axis: "width",
-			center0: snap.center0,
-			constraint: snap.constraint,
-			anchorSign: signX,
-			startSize: startW,
-			size: w,
-			docked: false
-		}),
-		y: anchor$1({
-			axis: "height",
-			center0: snap.center0,
-			constraint: snap.constraint,
-			anchorSign: signY,
-			startSize: startH,
-			size: h,
-			docked: false
-		})
-	});
-	return {
-		move(p) {
-			const [lo, hi] = resizer.bounds(ax);
-			const { size: w, slide: dx } = slidePastRoom(resist(startW + signX * (p.current.x - p.start.x), lo, hi), hardMax, signX);
-			const { size: h, slide: dy } = slidePastRoom(resist(startH + signY * (p.current.y - p.start.y), MIN_RESIZE_H, maxH), maxH, signY);
-			io.sync({
-				frame: frameFor(w, h),
-				offset: {
-					dx,
-					dy
-				}
+		it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : {
+			get: desc.get,
+			set: desc.set
+		} : target, ctx), done._ = 1;
+		if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+		else if (typeof it !== "object" || it === null) __typeError("Object expected");
+		else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+	}
+	return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError("Cannot use the \"in\" operator on this value") : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _h_dec, _w_dec, _y_dec, _x_dec = [reactive()], _init;
+_y_dec = [reactive()], _w_dec = [reactive()], _h_dec = [reactive()];
+var PartialBox = class {
+	constructor(x = void 0, y = void 0, w = void 0, h = void 0) {
+		__publicField(this, "x", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+		__publicField(this, "y", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+		__publicField(this, "w", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+		__publicField(this, "h", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+		this.x = x;
+		this.y = y;
+		this.w = w;
+		this.h = h;
+	}
+};
+_init = __decoratorStart(null);
+__decorateElement(_init, 5, "x", _x_dec, PartialBox);
+__decorateElement(_init, 5, "y", _y_dec, PartialBox);
+__decorateElement(_init, 5, "w", _w_dec, PartialBox);
+__decorateElement(_init, 5, "h", _h_dec, PartialBox);
+__decoratorMetadata(_init, PartialBox);
+var TransformableBox = class {
+	transform;
+	displacement;
+	constructor(transform = new PartialBox()) {
+		this.transform = transform;
+		this.displacement = new Displacement(this);
+	}
+	get x() {
+		return (this.transform.x ?? 0) + (this.displacement.x ?? 0);
+	}
+	set x(value) {
+		this.transform.x = value;
+	}
+	get y() {
+		return (this.transform.y ?? 0) + (this.displacement.y ?? 0);
+	}
+	set y(value) {
+		this.transform.y = value;
+	}
+	get w() {
+		return (this.transform.w ?? 0) + (this.displacement.w ?? 0);
+	}
+	set w(value) {
+		this.transform.w = value;
+	}
+	get h() {
+		return (this.transform.h ?? 0) + (this.displacement.h ?? 0);
+	}
+	set h(value) {
+		this.transform.h = value;
+	}
+};
+var Displacement = class extends PartialBox {
+	box;
+	constructor(box) {
+		super();
+		this.box = box;
+	}
+	apply() {
+		batch(() => {
+			this.box.transform.x = (this.box.transform.x ?? 0) + (this.x ?? 0);
+			this.box.transform.y = (this.box.transform.y ?? 0) + (this.y ?? 0);
+			this.box.transform.w = (this.box.transform.w ?? 0) + (this.w ?? 0);
+			this.box.transform.h = (this.box.transform.h ?? 0) + (this.h ?? 0);
+			this.clear();
+		});
+	}
+	clear() {
+		batch(() => {
+			this.x = void 0;
+			this.y = void 0;
+			this.w = void 0;
+			this.h = void 0;
+		});
+	}
+};
+var OverlayBox = class extends TransformableBox {
+	element;
+	#rect;
+	constructor(element) {
+		super();
+		this.element = element;
+		this.#rect = createElementRect(element);
+		element.style.setProperty("top", "0");
+		element.style.setProperty("left", "0");
+		element.style.setProperty("translate", "calc(var(--x, 0px) + var(--dx, 0px) + var(--_ex, 0px)) calc(var(--y, 0px) + var(--dy, 0px) + var(--_ey, 0px))");
+		const [, stop] = scope(() => {
+			effect(() => {
+				this.#project("--x", this.transform.x);
 			});
-		},
-		release(p) {
-			const w = resizer.rest(ax, {
-				size: startW + signX * (p.current.x - p.start.x),
-				velocity: -p.velocity.x * signX
+			effect(() => {
+				this.#project("--y", this.transform.y);
 			});
-			if (w === null) return io.dismiss();
-			const h = clamp(startH + signY * (p.current.y - p.start.y), MIN_RESIZE_H, maxH);
-			io.commit(frameFor(w, h));
-		},
-		cancel() {
-			io.revert([
-				"x",
-				"y",
-				"w",
-				"h"
-			]);
-		}
-	};
-}
-//#endregion
-//#region src/ui/overlay/resize-width-session.ts
-/**
-* Width resize — the inline-axis edge handle (drawers). Mirror of
-* `resizeHeightSession` on the width axis (the RTL sign flip is folded into
-* `edgeSetup`); the opposite edge is pinned, and below the lower bound the
-* surface slides via `--overlay-dx`. Self-contained: the width-axis wiring.
-*/
-function resizeWidthSession(snap, resizer, io, side) {
-	const startSize = snap.rect.width;
-	const { sign, anchorSign, docked } = edgeSetup({
-		axis: "inline",
-		side,
-		rect: snap.rect,
-		constraint: snap.constraint,
-		dir: snap.dir
-	});
-	const hardMax = anchorSign > 0 ? snap.constraint.left + snap.constraint.width - snap.rect.left : snap.rect.right - snap.constraint.left;
-	const ax = {
-		axis: "width",
-		startSize,
-		min: 0,
-		max: hardMax
-	};
-	const anchorAt = (size) => anchor$1({
-		axis: "width",
-		center0: snap.center0,
-		constraint: snap.constraint,
-		anchorSign,
-		startSize,
-		size,
-		docked
-	});
-	return {
-		move(p) {
-			const target = startSize + sign * (p.current.x - p.start.x);
-			const [lo, hi] = resizer.bounds(ax);
-			const { size, slide } = edgeDrag({
-				target,
-				lo,
-				hi,
-				sign,
-				max: hardMax
+			effect(() => {
+				this.#project("--w", this.transform.w, this.displacement.w);
 			});
-			const a = anchorAt(size);
-			io.sync({
-				frame: {
-					w: size,
-					...a !== null ? { x: a } : {}
-				},
-				offset: { dx: slide }
+			effect(() => {
+				this.#project("--h", this.transform.h, this.displacement.h);
 			});
-		},
-		release(p) {
-			const target = startSize + sign * (p.current.x - p.start.x);
-			const r = resizer.rest(ax, {
-				size: target,
-				velocity: -sign * p.velocity.x
+			effect(() => {
+				this.#project("--dx", this.displacement.x);
 			});
-			if (r === null) return io.dismiss();
-			const a = anchorAt(r);
-			io.commit({
-				w: r,
-				...a !== null ? { x: a } : {}
+			effect(() => {
+				this.#project("--dy", this.displacement.y);
 			});
-		},
-		cancel() {
-			io.revert(["x", "y"]);
+		});
+		this.dispose = () => {
+			stop();
+			this.#rect[Symbol.dispose]();
+		};
+	}
+	/** Write a size channel, or unset it when the axis is AUTO (NaN) so the
+	* element falls back to content sizing (`var(--w, auto)`). */
+	#project(name, ...value) {
+		if (value.every((v) => v === void 0 || Number.isNaN(v))) {
+			this.element.style.removeProperty(name);
+			return;
 		}
-	};
-}
+		const sum = value.reduce((a, b) => a + (b ?? 0), 0);
+		this.element.style.setProperty(name, `${sum}px`);
+	}
+	get w() {
+		return this.#rect().width;
+	}
+	set w(value) {
+		this.transform.w = value;
+	}
+	get h() {
+		return this.#rect().height;
+	}
+	set h(value) {
+		this.transform.h = value;
+	}
+	get x() {
+		return this.#rect().left;
+	}
+	set x(value) {
+		this.transform.x = value;
+	}
+	get y() {
+		return this.#rect().top;
+	}
+	set y(value) {
+		this.transform.y = value;
+	}
+	/** The element's computed direction, read at call time. */
+	get direction() {
+		return getComputedStyle(this.element).direction === "rtl" ? "rtl" : "ltr";
+	}
+	dispose;
+	[Symbol.dispose]() {
+		this.dispose();
+	}
+};
 //#endregion
 //#region src/ui/overlay/gestures.ts
-/** The size a `data-resize` value persists: block edges drive the height,
-* everything else (inline edges, corners) the width. */
-const resizeKey = (parsed) => parsed.block !== null && parsed.inline === null ? "h" : "w";
-/** Build the drag session for an engaged zone. */
-function selectSession(key, parsed, snapshot, resizer, move, io) {
-	if (key === "block") return resizeHeightSession(snapshot, resizer, io, parsed.block);
-	if (key === "inline") return resizeWidthSession(snapshot, resizer, io, parsed.inline);
-	if (key === "resize") return resizeSession(snapshot, resizer, io, parsed.block, parsed.inline);
-	return moveSession(snapshot, move, io);
-}
-/**
-* Opt-in pointer gestures for `.x-overlay`, dispatched by the gesture
-* attributes (structure stays in markup; policy is options):
-*
-* - An edge word (`block-*` / `inline-*`) is a whole-surface size drag
-*   along that axis — block drags the height (sheets), inline the width
-*   (drawers), `:dir(rtl)` flips the inline sign. The side names the
-*   handle; the opposite edge stays put.
-* - A corner word (`start-start` / … — block side first) is a desktop-
-*   window resize from a square zone at that corner, anchored at the
-*   opposite corner so the surface never grows past the constraint. The
-*   width follows the `resize` strategy; the height is a free clamp.
-* - `data-draggable` moves the surface in x/y from the top strip,
-*   rubber-banding at the edges; flinging it off the constraint dismisses
-*   (when `dismissible`).
-*
-* Layered for testability: `gesture-model` owns the pure mode reducers +
-* math, and `overlay-dom` owns all DOM contact (pointer plumbing + channel
-* I/O). This function is the wiring — it picks a pure `Session` from
-* `detectEngagement` and adapts it to the recognizer through the io.
-* The `resize` strategy (`freeResize` by default, or `detents`) decides the
-* rested size, written to the public `--overlay-w`/`--overlay-h` channels;
-* CSS renders and animates them. JS never touches `translate`/`top`/`left`.
-*
-* Registers its cleanup with the current scope (`onCleanup`) and also
-* returns it as `dispose` / `Symbol.dispose`.
-*
-* @example
-* ```ts
-* import { constraint, createOverlayGestures, detents } from "elements-kit/ui/overlay";
-*
-* const el = document.querySelector("dialog.x-overlay")!;
-* createOverlayGestures(el, { resize: detents(constraint(), [0.25, 0.6, 0.9]) });
-* el.addEventListener("resizechange", (e) => console.log(e.detail));
-* ```
-*/
-function createOverlayGestures(overlay, options) {
-	const io = createFrameIO(overlay, {
-		strategy: options?.resize ?? freeResize(),
-		dismissible: options?.dismissible ?? true,
-		velocityThreshold: options?.velocityThreshold ?? .5
-	});
-	const canEngage = (event) => {
-		const resize = overlay.getAttribute("data-resize") ?? "";
-		const draggable = overlay.hasAttribute("data-draggable");
-		if (!resize && !draggable) return false;
-		if (overlay.getAttribute("data-anchor") === "element") return false;
-		const target = event.target;
-		if (target?.closest("button, a, label, input, select, textarea, [contenteditable]")) return false;
-		for (let el = target; el !== null && el !== overlay; el = el.parentElement) if (el.scrollTop > 0) return false;
-		return true;
-	};
-	const engage = (event) => {
-		const parsed = parseResize(overlay.getAttribute("data-resize") ?? "");
-		const draggable = overlay.hasAttribute("data-draggable");
-		const { snapshot, resizer, move } = io.engage();
-		const key = detectEngagement({
-			...parsed,
-			draggable,
-			rect: snapshot.rect,
-			pointer: {
-				x: event.clientX,
-				y: event.clientY
-			},
-			dir: snapshot.dir
-		});
-		if (!key) return null;
-		return selectSession(key, parsed, snapshot, resizer, move, io);
-	};
-	const recognizer = createGestureRecognizer(overlay, {
-		canEngage,
-		engage
-	});
-	const dispose = () => recognizer.dispose();
-	onCleanup(dispose);
-	return {
-		resize(size) {
-			const key = resizeKey(parseResize(overlay.getAttribute("data-resize") ?? ""));
-			io.commit({ [key]: size });
-		},
-		dispose,
-		[Symbol.dispose]: dispose
-	};
+var gestures_exports = /* @__PURE__ */ __exportAll({
+	detent: () => detent,
+	nearest: () => nearest,
+	rubber: () => rubber,
+	snap: () => snap
+});
+/** iOS rubber-band curve: sub-linear overshoot, asymptotes to
+* `dimension * constant` — pull but never escape. */
+function resist(overshoot, dimension, constant) {
+	return overshoot * dimension * constant / (dimension + constant * overshoot);
+}
+/** Elastic resistance past `[min, max]`. The true value stays in `Motion`, so
+* release settles back cleanly. `dimension` = axis extent; `constant` = iOS
+* tension (higher = looser). */
+function rubber(min, max, dimension, constant = .55) {
+	return (x) => x < min ? min - resist(min - x, dimension, constant) : x > max ? max + resist(x - max, dimension, constant) : x;
+}
+/** The nearest detent to `value`. */
+function nearest(value, points) {
+	return points.reduce((a, b) => Math.abs(b - value) < Math.abs(a - value) ? b : a);
+}
+/** Magnetic pull toward the nearest detent during a drag (0 = free, 1 = snap). */
+function detent(points, strength = 0) {
+	return (x) => x + (nearest(x, points) - x) * strength;
+}
+/** Release target: project by velocity (`reach` ms of carry), then nearest detent. */
+function snap(value, velocity, points, reach = 150) {
+	return nearest(value + velocity * reach, points);
 }
 //#endregion
-//#region src/ui/overlay/resize.ts
-/** Chain settle effects after the strategy's rest. */
-function withEffects(base, effects) {
-	if (!effects.length) return base;
-	return {
-		bounds: base.bounds?.bind(base),
-		rest(ctx) {
-			let rested = base.rest(ctx);
-			if (rested === null) return null;
-			for (const e of effects) {
-				if (!e.settle) continue;
-				const s = e.settle(rested, ctx.velocity, [ctx.min, ctx.max]);
-				if (s === null) return null;
-				rested = s;
-			}
-			return rested;
-		}
-	};
-}
-function resize(target, space, ...effects) {
-	const io = createFrameIO(target, {
-		strategy: withEffects(space ?? freeResize(), effects),
-		dismissible: true,
-		velocityThreshold: .5
-	});
-	const buildSession = () => {
-		const parsed = parseResize(target.getAttribute("data-resize") ?? "");
-		const { snapshot, resizer } = io.engage();
-		if (parsed.block !== null && parsed.inline !== null) return resizeSession(snapshot, resizer, io, parsed.block, parsed.inline);
-		if (parsed.block !== null) return resizeHeightSession(snapshot, resizer, io, parsed.block);
-		if (parsed.inline !== null) return resizeWidthSession(snapshot, resizer, io, parsed.inline);
-		return null;
-	};
-	const attachments = [];
-	const attach = (handle) => {
-		const recognizer = createGestureRecognizer(handle, {
-			canEngage: () => true,
-			engage: () => buildSession()
-		});
-		attachments.push(recognizer.dispose);
-		return { dispose: recognizer.dispose };
-	};
-	const update = (size) => {
-		const parsed = parseResize(target.getAttribute("data-resize") ?? "");
-		const key = parsed.block !== null && parsed.inline === null ? "h" : "w";
-		io.commit({ [key]: size });
-	};
-	const dispose = () => {
-		for (const detach of attachments.splice(0)) detach();
-	};
-	onCleanup(dispose);
-	return {
-		update,
-		attach,
-		dispose,
-		[Symbol.dispose]: dispose
-	};
-}
-//#endregion
-//#region src/ui/overlay/rubber.ts
-/**
-* Edge resistance — values past the bounds move at a fraction of the
-* pointer (the iOS rubber band). Pure `resist()` under the hood; no
-* channels involved, so it applies to anything a service moves.
-*/
-function rubber() {
-	return { during: (value, [lo, hi]) => resist(value, lo, hi) };
-}
+//#region src/ui/overlay/motion.ts
+var Motion = class {
+	#initial;
+	#time;
+	#value;
+	#delta;
+	#velocity;
+	constructor(value = 0) {
+		this.#initial = value;
+		this.#time = performance.now();
+		this.#value = signal(value);
+		this.#delta = signal(0);
+		this.#velocity = signal(0);
+	}
+	get value() {
+		return this.#value();
+	}
+	set value(value) {
+		const now = performance.now();
+		const prev = this.#value();
+		const dt = now - this.#time;
+		const delta = value - prev;
+		this.#delta(delta);
+		if (dt > 0) this.#velocity(delta / dt);
+		this.#value(value);
+		this.#time = now;
+	}
+	get delta() {
+		return this.#delta();
+	}
+	get velocity() {
+		return this.#velocity();
+	}
+	/** How far the value has moved from its initial (seed) — reactive.
+	* The displacement column: `value − initial`, starts at 0. */
+	get displacement() {
+		return this.#value() - this.#initial;
+	}
+	/** Nudge the value by a displacement — delta/velocity fall out of the setter. */
+	move(delta) {
+		this.value = this.#value() + delta;
+	}
+	abort(initial) {
+		if (initial !== void 0) this.#initial = initial;
+		this.#time = performance.now();
+		this.#value(this.#initial);
+		this.#delta(0);
+		this.#velocity(0);
+	}
+};
 //#endregion
-export { PROJECTION_MS, anchor, areaToPlacement, clamp, closestDetent, confine, constraint, createOverlayGestures, detents, draggable, freeResize, resize, resolveConstraint, resolveVarPx, rubber };
+export { ElementBox, gestures_exports as Gestures, Motion, MutableRegion, OverlayBox, PositionArea, WINDOW_BOX, WindowBox, anchor_length, inset, placeAxis };