@octane-xplat/ui 0.2.1 → 0.4.0

package/dist/web/ui26.js

@@ -0,0 +1,45 @@
+import { __s, bag5, clone, createElement, delegateEvents, hookSlots, queueRefAttach, queueRefDetach, setEventHandler, template, useEffect, useMemo, useRef } from "octane";
+import { bindSignalChild, enableSignalBindings, replaceRef, setClassNameIfChanged } from "octane/internal/client";
+//#region src/Modal.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["close"]);
+var _t$0 = /* @__PURE__ */ template("<dialog></dialog>");
+var _hs$ = /* @__PURE__ */ hookSlots(3);
+var _rm$1 = [
+	"r",
+	"b",
+	"a"
+];
+var Modal = /* @__PURE__ */ __s(function Modal(props, __s, __extra) {
+	const el = useRef(null, _hs$ + 0);
+	const content = useMemo(() => props.component ? createElement(props.component, props.params ?? {}) : props.children, [props], _hs$ + 1);
+	const presentation = props.presentation;
+	const className = presentation === "sheet" ? "vx-modal vx-modal--sheet" : presentation === "dialog" ? "vx-modal vx-modal--dialog" : presentation === "fullscreen" || !presentation && props.fullscreen ? "vx-modal vx-modal--fullscreen" : "vx-modal";
+	useEffect(() => {
+		const d = el.current;
+		if (!d) return;
+		if (props.open && !d.open) d.showModal();
+		else if (!props.open && d.open) d.close();
+	}, [props.open], _hs$ + 2);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		queueRefAttach(__s, _m1 = el, _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		setEventHandler(_root, "$$close", () => props.onClose?.());
+		_b = bag5(__s, _root, _m0, _m1, void 0, null, void 0);
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _r = el;
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		setEventHandler(_b.a, "$$close", () => props.onClose?.());
+	}
+	_b.c = setClassNameIfChanged(className, _b.c, _b.a);
+	_b.f = bindSignalChild(__s, _b.f, 1, _b.a, content, "b:44cec141", null, void 0, void 0, void 0, true);
+});
+//#endregion
+export { Modal };

package/dist/web/ui27.js

@@ -0,0 +1,16 @@
+import { hookSlots, useSyncExternalStore } from "octane";
+//#region src/theme/colorScheme.web.ts
+function getColorScheme() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function subscribeSystemScheme(cb) {
+	const mq = matchMedia("(prefers-color-scheme: dark)");
+	mq.addEventListener("change", cb);
+	return () => mq.removeEventListener("change", cb);
+}
+function useColorScheme() {
+	return useSyncExternalStore(subscribeSystemScheme, getColorScheme, _h$0);
+}
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+//#endregion
+export { getColorScheme, subscribeSystemScheme, useColorScheme };

package/dist/web/ui28.js

@@ -0,0 +1,11 @@
+//#region src/cx.ts
+/** NS `className` splits on ' ' only, and the universal driver applies the
+*  prop via `String(value)` — an array would arrive comma-joined and match
+*  no class at all. Native leaves normalize through cx() before handing
+*  className to an intrinsic. (The DOM renderer already flattens arrays,
+*  so web leaves don't need this.) */
+function cx(...parts) {
+	return parts.flat(Infinity).filter(Boolean).join(" ");
+}
+//#endregion
+export { cx };

package/dist/web/ui29.js

@@ -0,0 +1,58 @@
+import { getColorScheme, subscribeSystemScheme } from "./ui27.js";
+import { cx } from "./ui28.js";
+import { hookSlots, useSyncExternalStore } from "octane";
+//#region src/theme/theme-scheme.ts
+var preference = "system";
+var listeners = /* @__PURE__ */ new Set();
+var emit = () => listeners.forEach((l) => l());
+/** App-level theme override. 'system' clears the override and follows the OS. */
+function setThemePreference(p) {
+	if (p !== preference) {
+		preference = p;
+		emit();
+	}
+}
+function getThemePreference() {
+	return preference;
+}
+/** The effective scheme: explicit override if set, else system appearance. */
+function getThemeScheme() {
+	return preference === "system" ? getColorScheme() : preference;
+}
+function subscribe(cb) {
+	listeners.add(cb);
+	const offSystem = subscribeSystemScheme(cb);
+	return () => {
+		listeners.delete(cb);
+		offSystem();
+	};
+}
+/** Reactive effective scheme — re-renders on override or OS change. */
+function useThemeScheme() {
+	return useSyncExternalStore(subscribe, getThemeScheme, _h$0);
+}
+/** Class string to stamp on independently-mounted roots (portal hosts,
+*  overlay/sheet/modal/toast containers): 'ns-dark dark' when effective
+*  dark, '' otherwise. Both names because tokens.css publishes both
+*  selectors and hosts may render either vocabulary. */
+function themeSchemeClasses() {
+	return getThemeScheme() === "dark" ? "ns-dark dark" : "";
+}
+/** Subscribe imperative hosts to effective-scheme changes; returns an
+*  unsubscribe. Use for hosts that live outside any render cycle. */
+function onThemeSchemeChange(cb) {
+	return subscribe(cb);
+}
+/** Stamp `base + themeSchemeClasses()` onto an imperative host (NS view or
+*  DOM element) and keep it live — returns an unsubscribe to call when the
+*  host closes. Works on both leaves since both honor `.className`. */
+function applyThemeClasses(view, base) {
+	const apply = () => {
+		view.className = cx(base, themeSchemeClasses());
+	};
+	apply();
+	return onThemeSchemeChange(apply);
+}
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+//#endregion
+export { applyThemeClasses, getThemePreference, getThemeScheme, onThemeSchemeChange, setThemePreference, themeSchemeClasses, useThemeScheme };

package/dist/web/ui3.js

@@ -1,28 +1,31 @@
-import { __s, bag5, clone, setStyle, template } from "octane";
-import { childTextHoleUpdate, updateFreshClassName } from "octane/internal/client";
-//#region src/Row.web.tsrx
-var _t$0 = /* @__PURE__ */ template("<div></div>");
-var Row = /* @__PURE__ */ __s(function Row(props, __s, __extra) {
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1;
-		const _root = clone(_t$0);
-		_m1 = _root;
-		_b = bag5(__s, _root, void 0, _m1, void 0, null, void 0);
-	}
-	_b.a = updateFreshClassName(["vx-row", props.className], _b.a, _b.b);
-	{
-		const _v = props.style;
-		if (_b.c !== _v) {
-			setStyle(_b.b, _v, _b.c);
-			_b.c = _v;
-		}
-	}
-	{
-		const _v = props.children;
-		_b.d = childTextHoleUpdate(__s, 1, _b.b, _v, _b.d, _b.e);
-		_b.e = _v;
-	}
-});
+//#region src/glass.ts
+/** Normalize the `glass` surface prop into the config object handed to
+*  `iosGlassEffect` on native. Always returns an object — the upstream
+*  string shorthand silently drops `interactive` on the layout's update
+*  path, and an empty config defaults the variant to 'regular' here rather
+*  than upstream's own fallback. `false`/'none'/'identity' → no glass. */
+function glassConfigOf(glass) {
+	if (!glass || glass === "none" || glass === "identity") return;
+	const c = typeof glass === "string" ? { variant: glass } : glass === true ? {} : glass;
+	if (c.variant === "none" || c.variant === "identity") return;
+	return {
+		variant: "regular",
+		...c
+	};
+}
+/** `vx-glass` classes shared by web (real styling) and native (hook for
+*  app-supplied fallback CSS on non-glass OSes). */
+function glassClassOf(glass) {
+	const c = glassConfigOf(glass);
+	if (!c) return;
+	return c.variant === "clear" ? "vx-glass vx-glass--clear" : "vx-glass";
+}
+/** Style merge for the web approximation — `tint` becomes the surface
+*  color (the class's translucent fallback is a weaker claim than an
+*  explicit inline value). Caller spreads result into its style object. */
+function glassStyleOf(glass) {
+	const c = glassConfigOf(glass);
+	return c?.tint ? { backgroundColor: c.tint } : {};
+}
 //#endregion
-export { Row };
+export { glassClassOf, glassConfigOf, glassStyleOf };

package/dist/web/ui30.js

@@ -0,0 +1,34 @@
+import { applyThemeClasses } from "./ui29.js";
+import { createRoot } from "octane";
+//#region src/modal-service.web.ts
+/** Open a component in a document-level dialog and resolve with close(value). */
+var openModal = (Component, params, options = {}) => new Promise((resolve) => {
+	const dialog = document.createElement("dialog");
+	dialog.className = options.presentation === "sheet" ? "vx-modal vx-modal--sheet" : options.presentation === "dialog" ? "vx-modal vx-modal--dialog" : options.presentation === "fullscreen" || !options.presentation && options.fullscreen ? "vx-modal vx-modal--fullscreen" : "vx-modal";
+	const unbindTheme = applyThemeClasses(dialog, dialog.className);
+	document.body.appendChild(dialog);
+	const root = createRoot(dialog);
+	let finished = false;
+	const finish = (result) => {
+		if (finished) return;
+		finished = true;
+		unbindTheme();
+		root.unmount();
+		dialog.remove();
+		resolve(result);
+	};
+	const close = (result) => {
+		if (finished) return;
+		if (dialog.open) dialog.close();
+		finish(result);
+	};
+	dialog.addEventListener("close", () => finish());
+	dialog.addEventListener("cancel", () => finish());
+	root.render(Component, {
+		params,
+		close
+	});
+	dialog.showModal();
+});
+//#endregion
+export { openModal };

package/dist/web/ui31.js

@@ -0,0 +1,123 @@
+import { cx } from "./ui28.js";
+import { useThemeScheme } from "./ui29.js";
+import { bag1, bag2, bag9, child, clone, delegateEvents, drainFrag, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, portal, setEventHandler, sibling, snapshotSpread, template, withSlot } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings } from "octane/internal/client";
+//#region src/Overlay.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["click"]);
+var _t$0 = /* @__PURE__ */ template("<div class=\"vx-overlay-shade\"></div>");
+var _t$1 = /* @__PURE__ */ template("<div><!><div class=\"vx-overlay-content\"></div></div>");
+var _t$2 = /* @__PURE__ */ template("<!>", 0, 1);
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(4));
+function __then$2(__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;
+		setEventHandler(_root, "$$click", props.onDismiss);
+		_b = bag1(__s, _root, _m0);
+	} else setEventHandler(_b.a, "$$click", props.onDismiss);
+}
+var _rm$5 = [
+	"s",
+	"e",
+	"d"
+];
+function __portal$1(__props, __s, __extra) {
+	const dark = __extra[0];
+	const props = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6;
+		const _root = clone(_t$1);
+		_m0 = cx("vx-overlay", dark && "dark", props.className);
+		_m1 = {
+			...props.style,
+			position: "fixed",
+			inset: 0
+		};
+		_m2 = snapshotSpread(props.web);
+		_m3 = _root;
+		_m4 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"className",
+				_m0
+			],
+			[
+				false,
+				"style",
+				_m1
+			],
+			[true, _m2]
+		], "b:843a5624", true);
+		const _el0 = sibling(child(_root), 1);
+		_m5 = _el0;
+		setEventHandler(_el0, "$$click", (event) => event.stopPropagation());
+		markDangerouslySetInnerHTMLChildren(_root);
+		_m6 = child(_root);
+		_b = bag9(__s, _root, _m0, _m1, _m2, _m3, _m4, _m5, _m6, null, void 0);
+		__s.refFields = _rm$5;
+	} else {
+		{
+			const _v = cx("vx-overlay", dark && "dark", props.className);
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = {
+				...props.style,
+				position: "fixed",
+				inset: 0
+			};
+			if (_b.b !== _v) _b.b = _v;
+		}
+		_b.c = snapshotSpread(props.web);
+		_b.e = bindSignalHostPropSources(__s, _b.e, _b.d, [
+			[
+				false,
+				"className",
+				_b.a
+			],
+			[
+				false,
+				"style",
+				_b.b
+			],
+			[true, _b.c]
+		], "b:843a5624", true);
+		setEventHandler(_b.f, "$$click", (event) => event.stopPropagation());
+	}
+	{
+		const __ifCondition = props.shadeCover;
+		ifBlock(__s, 1, _b.d, __ifCondition, __then$2, null, _b.g, __ifCondition ? [props] : void 0);
+	}
+	_b.j = bindSignalChild(__s, _b.j, 2, _b.f, props.children, "b:f597242e", null, void 0, void 0, void 0, true);
+}
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const dark = __extra[0];
+	const props = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$2);
+		_m0 = __block.parentNode;
+		_m1 = child(_root);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag2(__s, null, _m0, _m1);
+	}
+	portal(__s, 1, document.body, __portal$1, void 0, _b.a, [dark, props], void 0, _b.b);
+}
+var Overlay = function Overlay(props, __s, __extra) {
+	const __block = __s.block;
+	const dark = withSlot(_h$0, useThemeScheme) === "dark";
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	{
+		const __ifCondition$ = props.open;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition$, __then$0, null, __block.endMarker, __ifCondition$ ? [dark, props] : void 0);
+	}
+};
+//#endregion
+export { Overlay };

package/dist/web/ui32.js

@@ -0,0 +1,44 @@
+//#region src/popover-position.ts
+var opposite = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+/** Place beside the anchor, flip once when the requested side overflows, then clamp. */
+function positionPopover(anchor, panel, viewport, requested = "bottom", gap = 8) {
+	const at = (placement) => {
+		switch (placement) {
+			case "top": return {
+				left: anchor.left,
+				top: anchor.top - panel.height - gap
+			};
+			case "bottom": return {
+				left: anchor.left,
+				top: anchor.top + anchor.height + gap
+			};
+			case "left": return {
+				left: anchor.left - panel.width - gap,
+				top: anchor.top
+			};
+			case "right": return {
+				left: anchor.left + anchor.width + gap,
+				top: anchor.top
+			};
+		}
+		throw new Error(`Unknown popover placement: ${placement}`);
+	};
+	const fits = (position) => position.left >= viewport.left && position.top >= viewport.top && position.left + panel.width <= viewport.left + viewport.width && position.top + panel.height <= viewport.top + viewport.height;
+	const preferred = at(requested);
+	const placement = fits(preferred) ? requested : opposite[requested];
+	const raw = placement === requested ? preferred : at(placement);
+	const maxLeft = Math.max(viewport.left, viewport.left + viewport.width - panel.width);
+	const maxTop = Math.max(viewport.top, viewport.top + viewport.height - panel.height);
+	return {
+		left: Math.min(maxLeft, Math.max(viewport.left, raw.left)),
+		top: Math.min(maxTop, Math.max(viewport.top, raw.top)),
+		placement
+	};
+}
+//#endregion
+export { positionPopover };

package/dist/web/ui33.js

@@ -0,0 +1,159 @@
+import { cx } from "./ui28.js";
+import { useThemeScheme } from "./ui29.js";
+import { positionPopover } from "./ui32.js";
+import { bag4, child, clone, componentSlotVoid, createElement, createPortal, createScopedElement, createScopedValue, drainFrag, hookSlots, ifBlock, positionalChildren, template, useEffect, useRef, useState, withSlot } from "octane";
+import { compilerMemoRegion, hookMemoCreate, hookMemoPublishInvariant, textHoleUpdate } from "octane/internal/client";
+//#region src/Popover.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(6);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const dark = __extra[0];
+	const dismiss = __extra[1];
+	const panelRef = __extra[2];
+	const position = __extra[3];
+	const props = __extra[4];
+	const stopPointer = __extra[5];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		_m0 = __block.parentNode;
+		_m1 = child(_root);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag4(__s, null, _m0, _m1, null, void 0);
+	}
+	{
+		const _v = /* @__PURE__ */ createPortal(createScopedValue(() => createScopedElement("div", {
+			className: cx("vx-popover-layer", dark && "dark"),
+			style: {
+				position: "fixed",
+				inset: 0,
+				zIndex: 1e3,
+				pointerEvents: "none"
+			}
+		}, () => positionalChildren([(props.dismissOnOutsideTap ?? true) && createScopedValue(() => createElement("div", {
+			className: "vx-popover-backdrop",
+			style: {
+				position: "fixed",
+				inset: 0,
+				zIndex: 0,
+				pointerEvents: "auto"
+			},
+			onPointerDown: stopPointer,
+			onClick: dismiss
+		})), createScopedValue(() => createScopedElement("div", {
+			ref: panelRef,
+			className: cx("vx-popover", props.className),
+			style: {
+				...props.style,
+				position: "fixed",
+				top: position.top,
+				left: position.left,
+				zIndex: 1,
+				pointerEvents: "auto"
+			},
+			...props.web
+		}, () => props.children))]))), document.body);
+		_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+		_b.d = _v;
+	}
+}
+function __then$3(__props, __s, __extra) {
+	const __block = __s.block;
+	const anchorElement = __extra[0];
+	const props = __extra[1];
+	componentSlotVoid(__s, 0, __block.parentNode, PopoverLayer, {
+		...props,
+		"anchorElement": anchorElement
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:541a23d1");
+}
+var PopoverLayer = function PopoverLayer(props, __s, __extra) {
+	const __block = __s.block;
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(1);
+	const dark = withSlot(_h$0, useThemeScheme) === "dark";
+	const panelRef = useRef(null, _hs$ + 1);
+	const [position, setPosition] = useState(null, _hs$ + 2);
+	const update = () => {
+		const anchor = props.anchorElement;
+		if (!anchor?.getBoundingClientRect) return;
+		const anchorRect = anchor.getBoundingClientRect();
+		const panelRect = panelRef.current?.getBoundingClientRect?.();
+		const placed = positionPopover({
+			left: anchorRect.left,
+			top: anchorRect.top,
+			width: anchorRect.width,
+			height: anchorRect.height
+		}, {
+			width: panelRect?.width ?? 0,
+			height: panelRect?.height ?? 0
+		}, {
+			left: 0,
+			top: 0,
+			width: window.innerWidth,
+			height: window.innerHeight
+		}, props.placement ?? "bottom");
+		setPosition((current) => current?.left === placed.left && current?.top === placed.top ? current : placed);
+	};
+	useEffect(() => {
+		if (!props.open || !props.anchorElement?.getBoundingClientRect) {
+			setPosition(null);
+			return;
+		}
+		update();
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		const observer = typeof ResizeObserver === "undefined" || !panelRef.current ? null : new ResizeObserver(update);
+		if (observer && panelRef.current) observer.observe(panelRef.current);
+		return () => {
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+			observer?.disconnect();
+		};
+	}, [
+		props.open,
+		props.anchorElement,
+		props.placement,
+		props.children,
+		position === null
+	], _hs$ + 3);
+	const stopPointer = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, (event) => event.stopPropagation());
+	const dismiss = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		props.onDismiss?.();
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	{
+		const __ifCondition = props.open && position;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [
+			dark,
+			dismiss,
+			panelRef,
+			position,
+			props,
+			stopPointer
+		] : void 0);
+	}
+};
+var Popover = function Popover(props, __s, __extra) {
+	const __block = __s.block;
+	const [anchorElement, setAnchorElement] = useState(null, _hs$ + 4);
+	useEffect(() => {
+		const next = props.anchor?.current ?? null;
+		if (next !== anchorElement) setAnchorElement(next);
+	}, [
+		props.anchor,
+		props.open,
+		anchorElement
+	], _hs$ + 5);
+	{
+		const __ifCondition$ = props.open && anchorElement;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition$, __then$3, null, __block.endMarker, __ifCondition$ ? [anchorElement, props] : void 0);
+	}
+};
+//#endregion
+export { Popover };

package/dist/web/ui34.js

@@ -0,0 +1,70 @@
+import { cx } from "./ui28.js";
+import { applyThemeClasses } from "./ui29.js";
+import { __s, bag1, bag3, clone, componentSlot, createRoot, ifBlock, template } from "octane";
+import { childTextHoleUpdate } from "octane/internal/client";
+//#region src/toast.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<div class=\"vx-toast\"></div>");
+function __then$0(__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$2(__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:1641d101");
+}
+var queue = [];
+var active = false;
+var ToastBody = /* @__PURE__ */ __s(function ToastBody(props, __s, __extra) {
+	const __block = __s.block;
+	ifBlock(__s, 0, __block.parentNode, typeof props.content === "string", __then$0, __else$2, __block.endMarker, [props]);
+});
+function applyWebProps(host, props) {
+	if (!props) return;
+	for (const [key, value] of Object.entries(props)) if (key.includes("-")) host.setAttribute(key, String(value));
+	else host[key] = value;
+}
+function showNext() {
+	if (active || queue.length === 0) return;
+	active = true;
+	const entry = queue.shift();
+	const host = document.createElement("div");
+	const unbindTheme = applyThemeClasses(host, cx("vx-toast-host", entry.options.position === "top" ? "vx-toast-top" : "vx-toast-bottom"));
+	applyWebProps(host, entry.options.web);
+	document.body.appendChild(host);
+	const root = createRoot(host);
+	root.render(ToastBody, { content: entry.content });
+	setTimeout(() => {
+		unbindTheme();
+		root.unmount();
+		host.remove();
+		active = false;
+		showNext();
+	}, Math.max(0, entry.options.duration ?? 3e3));
+}
+function showToast(content, options = {}) {
+	queue.push({
+		content,
+		options
+	});
+	showNext();
+}
+//#endregion
+export { showToast };

package/dist/web/ui35.js

@@ -0,0 +1,57 @@
+import { hookSlots, useRef } from "octane";
+//#region src/anim.web.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function createAnimated(initial, prop) {
+	let el = null;
+	let current = initial;
+	let raf = 0;
+	const apply = (v) => {
+		current = v;
+		if (el) el.style.transform = `translateX(${v}px)`;
+	};
+	const run = (step) => {
+		cancelAnimationFrame(raf);
+		const start = Date.now();
+		const tick = () => {
+			const v = step(Date.now() - start);
+			if (v === null) return;
+			apply(v);
+			raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+	};
+	return {
+		get value() {
+			return current;
+		},
+		bind(e) {
+			el = e;
+			if (el) el.style.transform = `translateX(${current}px)`;
+		},
+		to(target, opts) {
+			const dur = opts?.duration ?? 300;
+			const from = current;
+			run((t) => t >= dur ? (apply(target), null) : from + (target - from) * (t / dur));
+		},
+		spring(target, opts) {
+			const damping = opts?.damping ?? 14, stiffness = opts?.stiffness ?? 120;
+			let v = 0, x = current;
+			run(() => {
+				const dt = 1 / 60;
+				v += (-stiffness * (x - target) - damping * v) * dt;
+				x += v * dt;
+				return Math.abs(v) < .5 && Math.abs(x - target) < .5 ? (apply(target), null) : x;
+			});
+		},
+		stop() {
+			cancelAnimationFrame(raf);
+		}
+	};
+}
+function useAnimation(initial = 0, prop = "translateX") {
+	const c = useRef(null, _h$0);
+	if (!c.current) c.current = createAnimated(initial, prop);
+	return c.current;
+}
+//#endregion
+export { useAnimation };