elements-kit 0.20.0 → 0.22.0

package/dist/ui/overlay/index.mjs

@@ -1,19 +1,46 @@
 import { _ as onCleanup, u as effect } from "../../lib-DYypKhxk.mjs";
 import "../../signals/index.mjs";
 import { createElementRect } from "../../utilities/element-rect.mjs";
-//#region src/ui/overlay/constrain.ts
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+//#region src/ui/overlay/constraint.ts
+/**
+* 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).
+*/
+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]());
+		return rect;
+	}
+	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.
+* 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) {
+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] = `var(${name})`;
+	probe.style[axis] = fallback ? `var(${name}, ${fallback})` : `var(${name})`;
 	overlay.appendChild(probe);
 	const px = probe.getBoundingClientRect()[axis];
 	probe.remove();
@@ -29,14 +56,14 @@ function resolveConstraint(overlay) {
 	};
 }
 /**
-* Confines an overlay to a rect source by syncing it into the
-* `--overlay-constraint-*` variables. Pass an `Element` (observed via
-* `ResizeObserver` through `createElementRect`) or a custom
-* {@link ConstraintRect}. Every location clamp and gesture bound derives
-* from those variables, so the overlay re-clamps when the rect changes.
+* 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: `ResizeObserver` fires on size changes — a container that moves
-* without resizing (e.g. page scroll) does not retrigger the sync.
+* 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
@@ -44,24 +71,21 @@ function resolveConstraint(overlay) {
 *
 * @example
 * ```ts
-* import { constrainOverlay } from "elements-kit/ui/overlay";
+* import { constraint, confine } from "elements-kit/ui/overlay";
 *
 * const panel = document.querySelector("dialog.x-overlay")!;
-* constrainOverlay(panel, document.querySelector("main")!);
+* confine(panel, constraint(document.querySelector("main")!));
 * ```
 */
-function constrainOverlay(overlay, source) {
-	const owned = source instanceof Element;
-	const rect = owned ? createElementRect(source) : source;
+function confine(overlay, region) {
 	const stop = effect(() => {
-		overlay.style.setProperty("--overlay-constraint-top", `${rect.top()}px`);
-		overlay.style.setProperty("--overlay-constraint-left", `${rect.left()}px`);
-		overlay.style.setProperty("--overlay-constraint-width", `${rect.width()}px`);
-		overlay.style.setProperty("--overlay-constraint-height", `${rect.height()}px`);
+		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();
-		if (owned) rect[Symbol.dispose]();
 		overlay.style.removeProperty("--overlay-constraint-top");
 		overlay.style.removeProperty("--overlay-constraint-left");
 		overlay.style.removeProperty("--overlay-constraint-width");
@@ -74,11 +98,368 @@ function constrainOverlay(overlay, source) {
 	};
 }
 //#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;
+};
+/** 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 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-ins: `freeResize` (default), `detents`.
+* 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;
@@ -117,19 +498,35 @@ function freeResize(opts) {
 		}
 	};
 }
+//#endregion
+//#region src/ui/overlay/detents.ts
 /**
-* Snap to discrete steps — each a fraction of the constraint along the
-* axis (number `0–1`) or a CSS length (string). Flick-aware; shrinking
-* past the smallest step dismisses.
+* 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(steps) {
-	const resolved = (ctx) => steps.map((s) => clamp(ctx.resolve(s), ctx.min, ctx.max)).sort((a, b) => a - b);
+function detents(region, stops) {
+	const resolved = (ctx) => stops.map((s) => clamp(ctx.resolve(s), ctx.min, ctx.max)).sort((a, b) => a - b);
 	return {
-		bounds: (ctx) => {
+		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) => {
+		rest(ctx) {
 			const s = resolved(ctx);
 			const i = closestDetent(ctx.size, s, ctx.velocity, ctx.dismissible, ctx.velocityThreshold);
 			return i === -1 ? null : s[i];
@@ -276,13 +673,177 @@ function slidePastRoom(resisted, max, sign) {
 * `null` when docked (the CSS clamp already holds that edge). The single
 * source of anchoring truth for block, inline, and corner resizes.
 */
-function anchor(args) {
+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");
+		}
+		return {
+			left: rect.left,
+			top: rect.top
+		};
+	};
+	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);
+		};
+		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
+			});
+		};
+		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
+			});
+		};
+		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);
+		};
+		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). */
@@ -636,7 +1197,7 @@ function resizeHeightSession(snap, resizer, io, side) {
 		min: 0,
 		max: hardMax
 	};
-	const anchorAt = (size) => anchor({
+	const anchorAt = (size) => anchor$1({
 		axis: "height",
 		center0: snap.center0,
 		constraint: snap.constraint,
@@ -741,7 +1302,7 @@ function resizeSession(snap, resizer, io, block, inline) {
 	const frameFor = (w, h) => ({
 		w,
 		h,
-		x: anchor({
+		x: anchor$1({
 			axis: "width",
 			center0: snap.center0,
 			constraint: snap.constraint,
@@ -750,7 +1311,7 @@ function resizeSession(snap, resizer, io, block, inline) {
 			size: w,
 			docked: false
 		}),
-		y: anchor({
+		y: anchor$1({
 			axis: "height",
 			center0: snap.center0,
 			constraint: snap.constraint,
@@ -816,7 +1377,7 @@ function resizeWidthSession(snap, resizer, io, side) {
 		min: 0,
 		max: hardMax
 	};
-	const anchorAt = (size) => anchor({
+	const anchorAt = (size) => anchor$1({
 		axis: "width",
 		center0: snap.center0,
 		constraint: snap.constraint,
@@ -904,10 +1465,10 @@ function selectSession(key, parsed, snapshot, resizer, move, io) {
 *
 * @example
 * ```ts
-* import { createOverlayGestures, detents } from "elements-kit/ui/overlay";
+* import { constraint, createOverlayGestures, detents } from "elements-kit/ui/overlay";
 *
 * const el = document.querySelector("dialog.x-overlay")!;
-* createOverlayGestures(el, { resize: detents([0.25, 0.6, 0.9]) });
+* createOverlayGestures(el, { resize: detents(constraint(), [0.25, 0.6, 0.9]) });
 * el.addEventListener("resizechange", (e) => console.log(e.detail));
 * ```
 */
@@ -960,42 +1521,73 @@ function createOverlayGestures(overlay, options) {
 	};
 }
 //#endregion
-//#region src/ui/overlay/overlay.ts
-/**
-* One-call wiring for an interactive `.x-overlay`: optional constraint
-* sync + pointer gestures, under a single disposable. Structure stays in
-* markup (`data-resize` / `data-draggable`); policy is config.
-*
-* Registers its cleanup with the current scope (`onCleanup`) and also
-* returns it as `dispose` / `Symbol.dispose`.
-*
-* @example
-* ```ts
-* import { overlay, detents } from "elements-kit/ui/overlay";
-*
-* const el = document.querySelector("dialog.x-overlay")!;
-* const o = overlay(el, {
-*   constrain: document.querySelector("main")!,
-*   resize: detents([0.25, 0.6, 0.9]),
-*   onResize: (size) => console.log(size),
-* });
-* ```
-*/
-function overlay(el, config) {
-	const { constrain, ...gestureOptions } = config ?? {};
-	let constraint = null;
-	if (constrain) constraint = constrainOverlay(el, constrain);
-	const gestures = createOverlayGestures(el, gestureOptions);
+//#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 = () => {
-		gestures.dispose();
-		constraint?.dispose();
+		for (const detach of attachments.splice(0)) detach();
 	};
 	onCleanup(dispose);
 	return {
-		resize: (size) => gestures.resize(size),
+		update,
+		attach,
 		dispose,
 		[Symbol.dispose]: dispose
 	};
 }
 //#endregion
-export { PROJECTION_MS, clamp, closestDetent, constrainOverlay, createOverlayGestures, detents, freeResize, overlay, resolveConstraint };
+//#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) };
+}
+//#endregion
+export { PROJECTION_MS, anchor, areaToPlacement, clamp, closestDetent, confine, constraint, createOverlayGestures, detents, draggable, freeResize, resize, resolveConstraint, resolveVarPx, rubber };