@octane-xplat/ui 0.4.0 → 0.6.0

package/dist/web/refresh.web.js

@@ -0,0 +1,133 @@
+import { setTranslate } from "./translate.web.js";
+import { dampenPull } from "./refresh-metrics.js";
+//#region src/refresh.web.ts
+var DOCK_ANIM_MS = 180;
+/** Pointer/touch-driven pull-to-refresh for the DOM leaf — the web has no
+*  native overscroll, so drag distance translates the scroller inside the
+*  clipped wrapper while the self-drawn indicator slides into the gap.
+*  `touchmove` must be non-passive: `preventDefault` is what keeps the
+*  browser from taking the gesture as a scroll (or Chrome's own
+*  pull-to-refresh on Android). Mouse drags ride the pointer events. */
+function createPullToRefresh(host) {
+	const { scroller, indicator, cfg } = host;
+	if (!scroller || !indicator) return {
+		sync: () => {},
+		detach: () => {}
+	};
+	let pulling = false;
+	let y0 = 0;
+	let pull = 0;
+	let docked = false;
+	let grace = null;
+	const threshold = () => cfg.current.threshold ?? 64;
+	/** Resting gap: the strip stays docked while the gesture docked it OR
+	*  the controlled `refreshing` prop holds it open. */
+	const held = () => docked || !!cfg.current.refreshing;
+	const applyReveal = (reveal) => {
+		setTranslate(indicator, 0, reveal - 64);
+		setTranslate(scroller, 0, reveal);
+	};
+	const settle = (reveal) => {
+		for (const el of [scroller, indicator]) el.style.transition = `transform ${DOCK_ANIM_MS}ms ease-out`;
+		applyReveal(reveal);
+		setTimeout(() => {
+			for (const el of [scroller, indicator]) el.style.transition = "";
+		}, DOCK_ANIM_MS);
+	};
+	const dock = () => {
+		docked = true;
+		pull = 0;
+		settle(64);
+	};
+	const collapse = () => {
+		docked = false;
+		pull = 0;
+		settle(0);
+	};
+	/** `pull` is drag distance beyond the held baseline — a release only
+	*  fires `onRefresh` when the user actually pulled (a resting release
+	*  inside the dock re-fires nothing). */
+	const release = () => {
+		pulling = false;
+		const reveal = pull + (held() ? 64 : 0);
+		if (pull > 0 && reveal >= threshold()) {
+			cfg.current.onRefresh?.();
+			dock();
+			if (grace) clearTimeout(grace);
+			grace = setTimeout(() => {
+				if (!cfg.current.refreshing) collapse();
+			}, 350);
+		} else if (held()) {
+			docked = true;
+			pull = 0;
+			settle(64);
+		} else collapse();
+	};
+	const begin = (y, prevent) => {
+		if (scroller.scrollTop > 0) return;
+		pulling = true;
+		y0 = y;
+		pull = 0;
+		prevent?.();
+	};
+	const move = (y, prevent) => {
+		if (!pulling) return;
+		const dy = y - y0;
+		if (dy <= 0 || scroller.scrollTop > 0) {
+			pulling = false;
+			pull = 0;
+			applyReveal(held() ? 64 : 0);
+			return;
+		}
+		prevent();
+		pull = dampenPull(dy);
+		applyReveal(pull + (held() ? 64 : 0));
+	};
+	const end = () => {
+		if (pulling) release();
+	};
+	const touchStart = (e) => begin(e.touches[0].clientY);
+	const touchMove = (e) => move(e.touches[0].clientY, () => e.preventDefault());
+	const touchEnd = () => end();
+	const pointerDown = (e) => {
+		if (e.pointerType === "mouse" && e.button === 0) begin(e.clientY, () => e.preventDefault());
+	};
+	const pointerMove = (e) => {
+		if (e.pointerType === "mouse") move(e.clientY, () => e.preventDefault());
+	};
+	const pointerUp = (e) => {
+		if (e.pointerType === "mouse") end();
+	};
+	scroller.addEventListener("touchstart", touchStart, { passive: true });
+	scroller.addEventListener("touchmove", touchMove, { passive: false });
+	scroller.addEventListener("touchend", touchEnd);
+	scroller.addEventListener("touchcancel", touchEnd);
+	scroller.addEventListener("pointerdown", pointerDown);
+	scroller.addEventListener("pointermove", pointerMove);
+	scroller.addEventListener("pointerup", pointerUp);
+	scroller.addEventListener("pointercancel", pointerUp);
+	return {
+		sync: () => {
+			if (cfg.current.refreshing) {
+				if (grace) clearTimeout(grace);
+				if (!docked && !pulling) dock();
+			} else if (docked && !pulling) collapse();
+		},
+		detach: () => {
+			if (grace) clearTimeout(grace);
+			scroller.removeEventListener("touchstart", touchStart);
+			scroller.removeEventListener("touchmove", touchMove);
+			scroller.removeEventListener("touchend", touchEnd);
+			scroller.removeEventListener("touchcancel", touchEnd);
+			scroller.removeEventListener("pointerdown", pointerDown);
+			scroller.removeEventListener("pointermove", pointerMove);
+			scroller.removeEventListener("pointerup", pointerUp);
+			scroller.removeEventListener("pointercancel", pointerUp);
+			scroller.style.transition = "";
+			indicator.style.transition = "";
+			applyReveal(0);
+		}
+	};
+}
+//#endregion
+export { createPullToRefresh };

package/dist/web/{ui18.js → route.web.js}

@@ -1,4 +1,4 @@
-import { RouteRedirect, buildRoutePath, layoutChain, linkPath, matchUrl } from "./ui17.js";
+import { RouteRedirect, buildRoutePath, layoutChain, linkPath, matchUrl } from "./route-table.js";
 import { hookSlots, useSyncExternalStore } from "octane";
 //#region src/route.web.ts
 var screens = {};
@@ -162,6 +162,18 @@ function presentationFor(name) {
 function popRoute(_stack = "root") {
 	history.back();
 }
+var backInterceptorWarned = false;
+/** No-op twin of the native leaf. Browser back is already real history —
+*  there is no hardware-back event to intercept on web, so registered
+*  interceptors never fire. Warns once so a mistaken call site isn't
+*  silently absent. */
+function addBackInterceptor(_fn) {
+	if (!backInterceptorWarned) {
+		backInterceptorWarned = true;
+		console.warn("[octane-xplat] addBackInterceptor is a no-op on web — browser back is URL history, not an interceptable event.");
+	}
+	return () => {};
+}
 window.addEventListener("popstate", () => {
 	saveScroll();
 	historyDepth = history.state?.__octaneXplatDepth ?? 0;
@@ -237,4 +249,4 @@ var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
 //#endregion
-export { canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute };
+export { addBackInterceptor, canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute };

package/dist/web/sheet-detents.web.js

@@ -0,0 +1,103 @@
+import { setTranslate } from "./translate.web.js";
+import { detentOffset, normalizeDetents, snapDetentIndex } from "./sheet-snap.js";
+//#region src/sheet-detents.web.ts
+var SNAP_MS = 200;
+/** Drag-to-snap detents on a `.vx-sheet` panel: a self-drawn grabber strip
+*  (the only drag target — it never fights inner scrolling) drives the
+*  panel's translateY; the panel is sized to the largest detent and parked
+*  at the offset for the current one. `closeNow` fires after the dismiss
+*  slide-out — the caller decides what closing means (declarative
+*  `onDismiss` or the `openSheet` resolution). In-window on every target —
+*  the OS detent presentations (UISheetPresentationController /
+*  BottomSheetDialog) host a modal VC/dialog window, not a RootLayout
+*  child, so the snap mechanics stay self-drawn for pixel parity. */
+function attachSheetDetents(panel, detents, closeNow) {
+	const sorted = normalizeDetents(detents);
+	if (!sorted.length) return { detach: () => {} };
+	const vh = () => panel.parentElement?.clientHeight || window.innerHeight || 1;
+	const max = sorted[sorted.length - 1];
+	panel.classList.add("vx-sheet-detents");
+	panel.style.height = `${max * 100}%`;
+	const grabber = document.createElement("div");
+	grabber.className = "vx-sheet-grabber";
+	const grip = document.createElement("div");
+	grip.className = "vx-sheet-grip";
+	grabber.appendChild(grip);
+	panel.appendChild(grabber);
+	let cur = 0;
+	let ty = 0;
+	let dragging = false;
+	let y0 = 0;
+	let ty0 = 0;
+	let vy = 0;
+	let lastY = 0;
+	let lastT = 0;
+	const applyTy = (value) => {
+		ty = value;
+		setTranslate(panel, 0, value);
+	};
+	const animateTo = (value, then) => {
+		panel.style.transition = `transform ${SNAP_MS}ms ease-out`;
+		applyTy(value);
+		setTimeout(() => {
+			panel.style.transition = "";
+			then?.();
+		}, SNAP_MS);
+	};
+	const down = (e) => {
+		if (e.pointerType === "mouse" && e.button !== 0) return;
+		dragging = true;
+		grabber.setPointerCapture?.(e.pointerId);
+		y0 = e.clientY;
+		lastY = e.clientY;
+		lastT = Date.now();
+		ty0 = ty;
+		vy = 0;
+		panel.style.transition = "";
+		e.preventDefault();
+	};
+	const move = (e) => {
+		if (!dragging) return;
+		const now = Date.now();
+		const dt = (now - lastT) / 1e3;
+		if (dt > 0) vy = vy * .7 + (e.clientY - lastY) / dt * .3;
+		lastY = e.clientY;
+		lastT = now;
+		applyTy(Math.min(Math.max(ty0 + (e.clientY - y0), 0), vh()));
+		e.preventDefault();
+	};
+	const up = () => {
+		if (!dragging) return;
+		dragging = false;
+		const next = snapDetentIndex(ty, vy, sorted, vh());
+		if (next < 0) animateTo(vh(), closeNow);
+		else {
+			cur = next;
+			animateTo(detentOffset(sorted, cur, vh()));
+		}
+	};
+	const pinGrabber = () => {
+		grabber.style.top = `${panel.scrollTop}px`;
+	};
+	panel.addEventListener("scroll", pinGrabber);
+	grabber.addEventListener("pointerdown", down);
+	grabber.addEventListener("pointermove", move);
+	grabber.addEventListener("pointerup", up);
+	grabber.addEventListener("pointercancel", up);
+	applyTy(vh());
+	const raf = requestAnimationFrame(() => animateTo(detentOffset(sorted, cur, vh())));
+	return { detach: () => {
+		cancelAnimationFrame(raf);
+		panel.removeEventListener("scroll", pinGrabber);
+		grabber.removeEventListener("pointerdown", down);
+		grabber.removeEventListener("pointermove", move);
+		grabber.removeEventListener("pointerup", up);
+		grabber.removeEventListener("pointercancel", up);
+		grabber.remove();
+		panel.classList.remove("vx-sheet-detents");
+		panel.style.height = "";
+		panel.style.transition = "";
+	} };
+}
+//#endregion
+export { attachSheetDetents };

package/dist/web/{ui58.js → sheet-service.web.js}

@@ -1,4 +1,5 @@
-import { applyThemeClasses } from "./ui29.js";
+import { applyThemeClasses } from "./theme/theme-scheme.js";
+import { attachSheetDetents } from "./sheet-detents.web.js";
 import { createRoot } from "octane";
 //#region src/sheet-service.web.ts
 var active = /* @__PURE__ */ new Set();
@@ -13,12 +14,14 @@ var openSheet = (Component, params, options = {}) => new Promise((resolve) => {
 	const unbindTheme = applyThemeClasses(layer, "vx-sheet-layer");
 	const panel = document.createElement("div");
 	panel.className = "vx-sheet";
+	if (options.detents?.length) panel.classList.add("vx-sheet-detents");
 	let finished = false;
 	const finish = (result) => {
 		if (finished) return;
 		finished = true;
 		active.delete(entry);
 		unbindTheme();
+		detents?.detach();
 		root.unmount();
 		layer.remove();
 		resolve(result);
@@ -35,6 +38,7 @@ var openSheet = (Component, params, options = {}) => new Promise((resolve) => {
 	}
 	layer.appendChild(panel);
 	document.body.appendChild(layer);
+	const detents = options.detents?.length ? attachSheetDetents(panel, options.detents, () => finish()) : null;
 	const root = createRoot(panel);
 	root.render(Component, {
 		params,

package/dist/web/sheet-snap.js

@@ -0,0 +1,35 @@
+/** Sorted, filtered, deduped detent fractions. Empty → the caller keeps
+*  the content-sized sheet behavior (detents off). */
+function normalizeDetents(input) {
+	if (!input?.length) return [];
+	return [...new Set(input.filter((d) => d > 0 && d <= 1))].sort((a, b) => a - b);
+}
+/** Resting translateY for a detent: the panel is `max * vh` tall, so the
+*  portion below the screen edge is `(max - detent) * vh`. */
+function detentOffset(detents, index, vh) {
+	return (detents[detents.length - 1] - detents[index]) * vh;
+}
+/** Snap target for a release at translateY `ty` with vertical velocity
+*  `vy` (positive = dragging down). Returns the detent index, or -1 to
+*  dismiss: released below half of the smallest detent, or a downward
+*  fling while at/below it. */
+function snapDetentIndex(ty, vy, detents, vh) {
+	const max = detents[detents.length - 1];
+	const frac = Math.min(Math.max(max - ty / vh, 0), 1);
+	if (vy > 500) {
+		let i = -1;
+		while (i + 1 < detents.length && detents[i + 1] < frac - 1e-6) i++;
+		return i;
+	}
+	if (vy < -500) {
+		let i = detents.length - 1;
+		while (i - 1 >= 0 && detents[i - 1] > frac + 1e-6) i--;
+		return i;
+	}
+	if (frac < detents[0] * .5) return -1;
+	let best = 0;
+	for (let i = 1; i < detents.length; i++) if (Math.abs(detents[i] - frac) < Math.abs(detents[best] - frac)) best = i;
+	return best;
+}
+//#endregion
+export { detentOffset, normalizeDetents, snapDetentIndex };

package/dist/{native/ui31.js → web/theme/theme-scheme.js}

@@ -1,5 +1,5 @@
-import { cx } from "./ui2.js";
-import { getColorScheme, subscribeSystemScheme } from "./ui30.js";
+import { getColorScheme, subscribeSystemScheme } from "./colorScheme.web.js";
+import { cx } from "../cx.js";
 import { hookSlots, useSyncExternalStore } from "octane";
 //#region src/theme/theme-scheme.ts
 var preference = "system";

package/dist/web/toast-anchor.web.tsrx.js

@@ -0,0 +1,142 @@
+import { cx } from "./cx.js";
+import { applyThemeClasses } from "./theme/theme-scheme.js";
+import { Popover } from "./Popover.web.tsrx.js";
+import { bag1, bag3, clone, componentSlot, componentSlotVoid, createRoot, ifBlock, markChildrenBlock, template } from "octane";
+import { childTextHoleUpdate } from "octane/internal/client";
+//#region src/toast-anchor.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<div class=\"vx-toast\"></div>");
+function __then$3(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	{
+		const _v = props.content;
+		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
+		_b.c = _v;
+	}
+}
+function __else$5(__props, __s, __extra) {
+	const Component = __extra[0].content;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		_b = bag1(__s, _root, _m0);
+	}
+	componentSlot(__s, 1, _b.a, Component, {}, void 0, void 0, void 0, void 0, void 0, "c:46bd91a2");
+}
+var __childrenBody = {};
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$2(__props, __s, __extra) {
+		const __block = __s.block;
+		ifBlock(__s, 0, __block.parentNode, typeof props.content === "string", __then$3, __else$5, __block.endMarker, [props]);
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Popover, {
+		"open": props.open,
+		"anchor": props.options.anchor,
+		"placement": props.options.placement ?? placementFor(props.options.position),
+		"dismissOnOutsideTap": false,
+		"children": markChildrenBlock(__children$2, __childrenBody)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:fb0a2e5d");
+}
+function __then$9(__props, __s, __extra) {
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		_b = bag3(__s, _root, _m0, null, void 0);
+	}
+	{
+		const _v = props.content;
+		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
+		_b.c = _v;
+	}
+}
+function __else$11(__props, __s, __extra) {
+	const Component = __extra[0].content;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		_b = bag1(__s, _root, _m0);
+	}
+	componentSlot(__s, 1, _b.a, Component, {}, void 0, void 0, void 0, void 0, void 0, "c:75cbf224");
+}
+function __else$8(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	ifBlock(__s, 0, __block.parentNode, typeof props.content === "string", __then$9, __else$11, __block.endMarker, __extra);
+}
+var queue = [];
+var active = false;
+var ToastBody = function ToastBody(props, __s, __extra) {
+	const __block = __s.block;
+	ifBlock(__s, 0, __block.parentNode, props.options.anchor, __then$0, __else$8, __block.endMarker, [props]);
+};
+function placementFor(position = "bottom") {
+	return position.startsWith("top") ? "top" : "bottom";
+}
+function applyWebProps(host, props) {
+	for (const [key, value] of Object.entries(props ?? {})) if (key.includes("-")) host.setAttribute(key, String(value));
+	else host[key] = value;
+}
+function alignmentFor(position = "bottom") {
+	if (position.endsWith("-start")) return "flex-start";
+	if (position.endsWith("-end")) return "flex-end";
+	return "center";
+}
+function showNext() {
+	if (active || queue.length === 0) return;
+	active = true;
+	const entry = queue.shift();
+	const anchored = Boolean(entry.options.anchor);
+	const host = document.createElement("div");
+	const position = entry.options.position ?? "bottom";
+	const unbindTheme = applyThemeClasses(host, cx("vx-toast-host", placementFor(position) === "top" ? "vx-toast-top" : "vx-toast-bottom"));
+	applyWebProps(host, entry.options.web);
+	if (anchored) host.style.display = "none";
+	else host.style.justifyContent = alignmentFor(position);
+	document.body.appendChild(host);
+	const root = createRoot(host);
+	root.render(ToastBody, {
+		...entry,
+		open: true
+	});
+	const finish = () => {
+		const cleanup = () => {
+			unbindTheme();
+			root.unmount();
+			host.remove();
+			active = false;
+			showNext();
+		};
+		if (anchored) {
+			root.render(ToastBody, {
+				...entry,
+				open: false
+			});
+			setTimeout(cleanup, 0);
+		} else cleanup();
+	};
+	setTimeout(finish, Math.max(0, entry.options.duration ?? 3e3));
+}
+function showToast(content, options = {}) {
+	queue.push({
+		content,
+		options
+	});
+	showNext();
+}
+//#endregion
+export { showToast };

package/dist/web/transform.web.js

@@ -0,0 +1,43 @@
+//#region src/transform.web.ts
+/** Per-element transform composition for imperative writes. The DOM has a
+*  single `transform` string where native has discrete view props, so web
+*  keeps the last-written value per transform prop and re-joins them —
+*  an AnimatedValue on `rotate` and a setTranslate drag on the same
+*  element don't clobber each other. */
+var transformProps = {
+	translateX: (v) => `translateX(${v}px)`,
+	translateY: (v) => `translateY(${v}px)`,
+	translateZ: (v) => `translateZ(${v}px)`,
+	scale: (v) => `scale(${v})`,
+	scaleX: (v) => `scaleX(${v})`,
+	scaleY: (v) => `scaleY(${v})`,
+	rotate: (v) => `rotate(${v}deg)`,
+	rotateX: (v) => `rotateX(${v}deg)`,
+	rotateY: (v) => `rotateY(${v}deg)`,
+	skewX: (v) => `skewX(${v}deg)`,
+	skewY: (v) => `skewY(${v}deg)`
+};
+var transformStates = /* @__PURE__ */ new WeakMap();
+/** Write one transform prop without disturbing the element's other
+*  transform components (or its stylesheet/base transform). */
+function writeTransformProp(el, prop, value) {
+	if (Object.prototype.hasOwnProperty.call(transformProps, prop)) {
+		const transformProp = prop;
+		let state = transformStates.get(el);
+		if (!state) {
+			const computed = getComputedStyle(el).transform;
+			state = {
+				base: computed === "none" ? "" : computed,
+				values: /* @__PURE__ */ new Map()
+			};
+			transformStates.set(el, state);
+		}
+		state.values.set(transformProp, value);
+		const transforms = Object.entries(transformProps).filter(([name]) => state.values.has(name)).map(([name, toTransform]) => toTransform(state.values.get(name)));
+		el.style.transform = [state.base, ...transforms].filter(Boolean).join(" ");
+		return;
+	}
+	el.style[prop] = value;
+}
+//#endregion
+export { writeTransformProp };

package/dist/web/translate.web.js

@@ -0,0 +1,13 @@
+import { writeTransformProp } from "./transform.web.js";
+//#region src/translate.web.ts
+/** Imperative translate write on a bound view — the gesture seam. Called
+*  per frame from pan handlers (docs/animation-gestures.md: animation
+*  writes imperative, state stays declarative). Composes with other
+*  transform writes on the same element via ./transform.web. */
+var setTranslate = (el, x = 0, y = 0) => {
+	if (!el) return;
+	writeTransformProp(el, "translateX", x);
+	writeTransformProp(el, "translateY", y);
+};
+//#endregion
+export { setTranslate };