@slotted/react 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/app-shell-Cb_kDBeV.js

@@ -0,0 +1,904 @@
+import { r as e } from "./i18n-D7xXDd8-.js";
+import { n as t, t as n } from "./icon-DjqSEQ-o.js";
+import { i as r, n as i, o as a } from "./progress-indicator-D0acshNn.js";
+import { keyedProps as o } from "@slotted/core/selector-key";
+import { createFocusScope as s, focusTarget as c } from "@slotted/core/focus";
+import { createControllable as l } from "@slotted/core/state";
+import { createContext as u, isValidElement as d, useCallback as f, useContext as p, useEffect as m, useId as h, useImperativeHandle as g, useLayoutEffect as _, useMemo as v, useRef as y, useState as b } from "react";
+import { Fragment as ee, jsx as x, jsxs as te } from "react/jsx-runtime";
+import { createPresence as ne } from "@slotted/core/presence";
+import { appShellMessages as re } from "@slotted/core/i18n";
+import { setPortalContainer as ie } from "@slotted/core/portal";
+import { createDismissableLayer as ae } from "@slotted/core/dismissable-layer";
+import { EXTENT_LARGE_STEP_PX as oe, EXTENT_STEP_PX as se, anchorsAtStart as ce, extentAtPoint as le, holdResizeGesture as ue, stepAmountFromPixels as de, stepExtent as fe } from "@slotted/core/extent";
+import { COMPACT_BELOW as pe, clamp as S, createWidthGate as me } from "@slotted/core/measure";
+//#region src/app-shell/app-shell-defaults.tsx
+var he = u({
+	asideMode: "auto",
+	asideSize: "md",
+	canvas: "inset",
+	closeOnNavigate: !0,
+	collapsedTo: "rail",
+	escape: "close",
+	back: "close",
+	modal: !0,
+	navMode: "auto",
+	navSide: "start",
+	navSize: "md",
+	outsidePress: "close",
+	primary: "banner",
+	scroll: "content",
+	separation: "rule"
+});
+function C() {
+	return p(he);
+}
+function ge({ children: e, ...t }) {
+	let n = C();
+	return /* @__PURE__ */ x(he.Provider, {
+		value: {
+			asideMode: t.asideMode ?? n.asideMode,
+			asideSize: t.asideSize ?? n.asideSize,
+			canvas: t.canvas ?? n.canvas,
+			closeOnNavigate: t.closeOnNavigate ?? n.closeOnNavigate,
+			collapsedTo: t.collapsedTo ?? n.collapsedTo,
+			escape: t.escape ?? n.escape,
+			back: t.back ?? n.back,
+			modal: t.modal ?? n.modal,
+			navMode: t.navMode ?? n.navMode,
+			navSide: t.navSide ?? n.navSide,
+			navSize: t.navSize ?? n.navSize,
+			outsidePress: t.outsidePress ?? n.outsidePress,
+			primary: t.primary ?? n.primary,
+			scroll: t.scroll ?? n.scroll,
+			separation: t.separation ?? n.separation
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/app-shell/app-shell-parts.tsx
+function w(e, t) {
+	let n = L();
+	return f((r) => {
+		n.nodes[e] = r, typeof t == "function" ? t(r) : t != null && (t.current = r);
+	}, [
+		t,
+		n.nodes,
+		e
+	]);
+}
+function T(e) {
+	return f((t) => {
+		typeof e == "function" ? e(t) : e != null && (e.current = t);
+	}, [e]);
+}
+function E(e) {
+	let t = L();
+	m(() => t.register(e), [e, t]);
+}
+function D(e, t) {
+	return t === void 0 ? null : t(e);
+}
+function _e({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let s = w("banner", n), c = o({
+		...a,
+		children: e,
+		className: t,
+		"data-part": "banner",
+		style: i
+	});
+	return D({
+		...c,
+		ref: s
+	}, r) ?? /* @__PURE__ */ x("header", {
+		...c,
+		ref: s
+	});
+}
+function ve({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let s = o({
+		...a,
+		children: e,
+		className: t,
+		"data-part": "brand",
+		style: i
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
+		...s,
+		ref: c
+	});
+}
+function ye({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let s = o({
+		...a,
+		children: e,
+		className: t,
+		"data-part": "centre",
+		style: i
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
+		...s,
+		ref: c
+	});
+}
+function be({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let s = o({
+		...a,
+		children: e,
+		className: t,
+		"data-part": "actions",
+		style: i
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
+		...s,
+		ref: c
+	});
+}
+function xe({ "aria-label": e, children: t, className: n, id: r, ref: i, render: a, style: s, ...c }) {
+	let l = L(), u = w("nav", i);
+	E("nav");
+	let d = o({
+		...c,
+		"aria-label": e ?? l.t("nav"),
+		children: t,
+		className: n,
+		"data-part": "nav",
+		id: r ?? l.navId,
+		style: s
+	});
+	return D({
+		...d,
+		ref: u
+	}, a) ?? /* @__PURE__ */ x("nav", {
+		...d,
+		ref: u
+	});
+}
+function Se({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let s = o({
+		...a,
+		children: e,
+		className: t,
+		"data-part": "nav-rail",
+		style: i
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
+		...s,
+		ref: c
+	});
+}
+function Ce({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let s = o({
+		...a,
+		children: e,
+		className: t,
+		"data-part": "nav-header",
+		style: i
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
+		...s,
+		ref: c
+	});
+}
+function we({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let s = o({
+		...a,
+		children: e,
+		className: t,
+		"data-part": "nav-body",
+		style: i
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
+		...s,
+		ref: c
+	});
+}
+function Te({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let s = o({
+		...a,
+		children: e,
+		className: t,
+		"data-part": "nav-footer",
+		style: i
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
+		...s,
+		ref: c
+	});
+}
+function O({ children: e, className: t, id: n, ref: r, render: i, style: a, ...s }) {
+	let c = L(), l = w("main", r);
+	E("main");
+	let u = o({
+		...c.busy ? { "aria-busy": !0 } : {},
+		...s,
+		children: e,
+		className: t,
+		"data-part": "main",
+		id: n ?? c.mainId,
+		style: a
+	});
+	return D({
+		...u,
+		ref: l
+	}, i) ?? /* @__PURE__ */ x("main", {
+		...u,
+		ref: l
+	});
+}
+function k({ delay: e, label: t, loading: n = !0, minDuration: o, onWithdraw: s, size: c, ...l }) {
+	let u = L(), d = a(), f = r({
+		delay: e ?? d.delay ?? 200,
+		loading: n,
+		minDuration: o ?? d.minDuration ?? 400,
+		onWithdraw: s
+	}), { setBusy: p } = u;
+	return m(() => {
+		p(f);
+	}, [f, p]), m(() => () => p(!1), [p]), /* @__PURE__ */ x("div", {
+		"data-part": "progress",
+		"data-part-progress": "",
+		children: /* @__PURE__ */ x(i, {
+			...l,
+			delay: 0,
+			label: t ?? u.t("progress"),
+			loading: f,
+			minDuration: 0,
+			placement: "edge-start",
+			size: c ?? "sm"
+		})
+	});
+}
+function A({ "aria-label": e, children: t, className: n, id: r, ref: i, render: a, style: s, ...c }) {
+	let l = L(), u = w("aside", i);
+	E("aside");
+	let d = l.asideExtent, f = o({
+		...c,
+		"aria-label": e ?? l.t("aside"),
+		children: t,
+		className: n,
+		...l.asideOpen ? { "data-open": "" } : {},
+		"data-part": "aside",
+		id: r ?? l.asideId,
+		style: d === void 0 ? s : {
+			...s,
+			"--slotted-app-shell-aside-extent": `${Math.round(d * 1e4) / 100}cqi`
+		}
+	});
+	return D({
+		...f,
+		ref: u
+	}, a) ?? /* @__PURE__ */ x("aside", {
+		...f,
+		ref: u
+	});
+}
+function Ee({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let s = o({
+		...a,
+		children: e,
+		className: t,
+		"data-part": "aside-header",
+		style: i
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
+		...s,
+		ref: c
+	});
+}
+function De({ children: e, className: t, inset: n, ref: r, render: i, style: a, ...s }) {
+	let c = o({
+		...s,
+		children: e,
+		className: t,
+		...n === void 0 ? {} : { "data-inset": n },
+		"data-part": "aside-body",
+		style: a
+	}), l = T(r);
+	return D({
+		...c,
+		ref: l
+	}, i) ?? /* @__PURE__ */ x("div", {
+		...c,
+		ref: l
+	});
+}
+var j = typeof document > "u" ? m : _;
+function Oe(e) {
+	return e !== null && getComputedStyle(e).direction === "rtl";
+}
+function M(e) {
+	if (e === null) return null;
+	let t = e.getBoundingClientRect(), n = getComputedStyle(e), r = (e, t) => e === "none" || e === "hidden" ? 0 : parseFloat(t) || 0, i = (parseFloat(n.paddingLeft) || 0) + r(n.borderLeftStyle, n.borderLeftWidth), a = (parseFloat(n.paddingRight) || 0) + r(n.borderRightStyle, n.borderRightWidth);
+	return {
+		height: t.height,
+		width: Math.max(0, t.width - i - a),
+		x: t.x + i,
+		y: t.y
+	};
+}
+var N = 3;
+function ke({ "aria-label": e, className: t, onKeyDown: n, onPointerDown: r, ref: i, render: a, style: s, ...c }) {
+	let l = L(), u = y(null), d = y(null), f = y(null), [p, h] = b(void 0), g = l.navSide === "end" ? "start" : "end", _ = l.asideMode === "inline" && l.asideOpen, { asideExtent: v, nodes: ee, root: te } = l;
+	if (j(() => {
+		let e = ee.aside;
+		if (!_ || v !== void 0 || e === null) return;
+		let t = () => {
+			let t = M(te);
+			if (t === null || t.width <= 0) return h(void 0);
+			h(e.getBoundingClientRect().width / t.width);
+		};
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [
+		v,
+		ee,
+		te,
+		_
+	]), m(() => () => f.current?.(), []), !_) return null;
+	let ne = S(l.asideExtent ?? p ?? l.minAsideExtent, l.minAsideExtent, l.maxAsideExtent), re = (e) => Math.round(S(e, 0, 1) * 100), ie = (e, t) => le({
+		point: {
+			x: e.clientX,
+			y: e.clientY
+		},
+		rect: t,
+		rtl: Oe(u.current),
+		side: g
+	}), ae = (e) => {
+		if (r?.(e), e.defaultPrevented || e.button !== 0) return;
+		let t = M(l.root);
+		t === null || t.width <= 0 || (e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), e.currentTarget.focus(), d.current = {
+			moved: !1,
+			offset: ne - ie(e, t),
+			x: e.clientX
+		});
+	}, pe = (e) => {
+		let t = d.current;
+		if (t === null) return;
+		let n = M(l.root);
+		if (!(n === null || n.width <= 0)) {
+			if (!t.moved) {
+				if (Math.abs(e.clientX - t.x) < N) return;
+				t.moved = !0, f.current?.(), f.current = ue(u.current?.ownerDocument, "col-resize"), l.setAsideDragging(!0);
+			}
+			l.setAsideExtent(ie(e, n) + t.offset, "pointer", e);
+		}
+	}, me = (e) => {
+		let t = d.current;
+		t !== null && (d.current = null, e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), t.moved && (f.current?.(), f.current = null, l.setAsideDragging(!1)));
+	}, he = (e) => {
+		if (n?.(e), e.defaultPrevented) return;
+		let t = ce(g, Oe(u.current)), r = (t) => {
+			e.preventDefault();
+			let n = M(l.root), r = n === null ? 0 : de({
+				pixels: e.shiftKey ? oe : se,
+				rect: n,
+				side: g
+			});
+			l.setAsideExtent(fe({
+				amount: r,
+				direction: t,
+				fraction: ne,
+				max: l.maxAsideExtent,
+				min: l.minAsideExtent
+			}), "keyboard", e);
+		};
+		switch (e.key) {
+			case "ArrowLeft": return r(t ? -1 : 1);
+			case "ArrowRight": return r(t ? 1 : -1);
+			case "Home": return e.preventDefault(), l.setAsideExtent(l.minAsideExtent, "keyboard", e);
+			case "End": return e.preventDefault(), l.setAsideExtent(l.maxAsideExtent, "keyboard", e);
+			default: return;
+		}
+	}, C = (e) => {
+		u.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
+	}, ge = o({
+		...c,
+		"aria-controls": l.asideId,
+		"aria-label": e ?? l.t("resizeAside"),
+		"aria-orientation": "vertical",
+		"aria-valuemax": re(l.maxAsideExtent),
+		"aria-valuemin": re(l.minAsideExtent),
+		"aria-valuenow": re(ne),
+		className: t,
+		"data-part": "aside-resizer",
+		onKeyDown: he,
+		onLostPointerCapture: me,
+		onPointerDown: ae,
+		onPointerMove: pe,
+		onPointerUp: me,
+		role: "separator",
+		style: s,
+		tabIndex: 0
+	});
+	return a === void 0 ? /* @__PURE__ */ x("div", {
+		...ge,
+		ref: C
+	}) : a({
+		...ge,
+		ref: C
+	});
+}
+function Ae({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let s = o({
+		...a,
+		children: e,
+		className: t,
+		"data-part": "aside-footer",
+		style: i
+	}), c = T(n);
+	return D({
+		...s,
+		ref: c
+	}, r) ?? /* @__PURE__ */ x("div", {
+		...s,
+		ref: c
+	});
+}
+function P({ children: e, className: t, ref: n, render: r, style: i, ...a }) {
+	let s = w("footer", n), c = o({
+		...a,
+		children: e,
+		className: t,
+		"data-part": "footer",
+		style: i
+	});
+	return D({
+		...c,
+		ref: s
+	}, r) ?? /* @__PURE__ */ x("footer", {
+		...c,
+		ref: s
+	});
+}
+function F({ "aria-controls": e, "aria-label": r, children: i, className: a, id: s, onClick: c, ref: l, render: u, style: d, type: p, ...m }) {
+	let h = L(), g = w("toggle", l), _ = f((e) => {
+		if (c?.(e), e.defaultPrevented) return;
+		let t = e.detail === 0 ? "keyboard" : "pointer";
+		h.setOpen(!h.open, t, e.nativeEvent);
+	}, [c, h]), v = o({
+		...m,
+		"aria-controls": e ?? h.navId,
+		"aria-expanded": h.open,
+		"aria-label": r ?? (h.open ? h.t("close") : h.t("open")),
+		children: i ?? /* @__PURE__ */ x(n, { children: /* @__PURE__ */ x(t, { name: h.open ? "panel-close" : "panel-open" }) }),
+		className: a,
+		"data-part": "nav-toggle",
+		id: s ?? h.toggleId,
+		onClick: _,
+		style: d,
+		type: p ?? "button"
+	});
+	return D({
+		...v,
+		ref: g
+	}, u) ?? /* @__PURE__ */ x("button", {
+		...v,
+		ref: g
+	});
+}
+function I({ "aria-controls": e, "aria-label": r, children: i, className: a, id: s, onClick: c, ref: l, render: u, style: d, type: p, ...m }) {
+	let h = L(), g = w("asideToggle", l), _ = f((e) => {
+		if (c?.(e), e.defaultPrevented) return;
+		let t = e.detail === 0 ? "keyboard" : "pointer";
+		h.setAsideOpen(!h.asideOpen, t, e.nativeEvent);
+	}, [c, h]), v = o({
+		...m,
+		"aria-controls": e ?? h.asideId,
+		"aria-expanded": h.asideOpen,
+		"aria-label": r ?? (h.asideOpen ? h.t("closeAside") : h.t("openAside")),
+		children: i ?? /* @__PURE__ */ x(n, { children: /* @__PURE__ */ x(t, { name: h.asideOpen ? "panel-close" : "panel-open" }) }),
+		className: a,
+		"data-part": "aside-toggle",
+		id: s ?? h.asideToggleId,
+		onClick: _,
+		style: d,
+		type: p ?? "button"
+	});
+	return D({
+		...v,
+		ref: g
+	}, u) ?? /* @__PURE__ */ x("button", {
+		...v,
+		ref: g
+	});
+}
+//#endregion
+//#region src/app-shell/app-shell.tsx
+var je = pe, Me = u(void 0);
+function Ne(e, t) {
+	if (Array.isArray(e)) {
+		for (let n of e) Ne(n, t);
+		return t;
+	}
+	return !d(e) || e.type === R || (e.type === O ? t.main = !0 : e.type === xe ? t.nav = !0 : e.type === A ? t.aside = !0 : Ne(e.props.children, t)), t;
+}
+function L() {
+	let e = p(Me);
+	if (e === void 0) throw Error("Every app-shell part must be rendered inside AppShell.");
+	return e;
+}
+function Pe() {
+	return p(Me);
+}
+function R({ asideExtent: t, asideMode: n, asideOpen: r, asideSize: i, canvas: a, children: u, className: d, closeOnNavigate: p, collapsedTo: _, defaultAsideExtent: oe, defaultAsideOpen: se, defaultNavOpen: ce, escape: le, back: ue, maxAsideExtent: de, messages: fe, minAsideExtent: pe, modal: he, navMode: ge, navOpen: w, navSide: T, navSize: E, onAsideExtentChange: D, onAsideOpenChange: _e, onNavOpenChange: ve, outsidePress: ye, primary: be, ref: xe, render: Se, scroll: Ce, separation: we, style: Te, ...O }) {
+	let k = C(), A = h(), [Ee, De] = b(ce ?? !0), j = w ?? Ee, [Oe, M] = b(se ?? !0), N = r ?? Oe, [ke, Ae] = b(oe), P = t ?? ke, F = S(pe ?? .16, 0, 1), I = S(de ?? .6, F, 1), [L, Pe] = b(!1), R = i ?? k.asideSize, Fe = n ?? k.asideMode, Ie = a ?? k.canvas, z = p ?? k.closeOnNavigate, Le = _ ?? k.collapsedTo, Re = we ?? k.separation, ze = le ?? k.escape, Be = ue ?? k.back, B = he ?? k.modal, Ve = T ?? k.navSide, He = E ?? k.navSize, V = ye ?? k.outsidePress, Ue = be ?? k.primary, We = Ce ?? k.scroll, Ge = ge ?? k.navMode, H = e(re, fe), [U, Ke] = b(null), [W, qe] = b(void 0), G = Ge === "auto" ? W === void 0 ? void 0 : W ? "overlay" : "inline" : Ge, K = Fe === "auto" ? W === void 0 ? void 0 : W ? "overlay" : "inline" : Fe, q = y({
+		aside: null,
+		asideToggle: null,
+		banner: null,
+		footer: null,
+		main: null,
+		nav: null,
+		toggle: null
+	}), [Je, Ye] = b({
+		nav: !1,
+		main: !1,
+		aside: !1
+	}), [Xe, Ze] = b(!1);
+	m(() => Ze(!0), []);
+	let J = Xe ? Je : Ne(u, {
+		nav: !1,
+		main: !1,
+		aside: !1
+	}), [Qe, $e] = b(!1), et = f((e) => (Ye((t) => ({
+		...t,
+		[e]: !0
+	})), () => Ye((t) => ({
+		...t,
+		[e]: !1
+	}))), []), Y = f((e, t, n) => {
+		if (e === j) return;
+		let r = !1, i = l({
+			controlled: w,
+			initial: j,
+			onRequest: (e) => {
+				r = e.cancelled, ve?.(e.value, {
+					get cancelled() {
+						return e.cancelled;
+					},
+					cancel: () => e.cancel(),
+					previous: e.previous,
+					reason: t,
+					source: e.source,
+					value: e.value
+				});
+			}
+		}).request(e, t, n);
+		r || i && De(e);
+	}, [
+		j,
+		w,
+		ve
+	]), X = f((e, t, n) => {
+		if (e === N) return;
+		let i = !1, a = l({
+			controlled: r,
+			initial: N,
+			onRequest: (e) => {
+				i = e.cancelled, _e?.(e.value, {
+					get cancelled() {
+						return e.cancelled;
+					},
+					cancel: () => e.cancel(),
+					previous: e.previous,
+					reason: t,
+					source: e.source,
+					value: e.value
+				});
+			}
+		}).request(e, t, n);
+		i || a && M(e);
+	}, [
+		r,
+		N,
+		_e
+	]), tt = f((e, n, r) => {
+		let i = e === void 0 ? void 0 : S(e, F, I);
+		if (i === P) return;
+		let a = !1, o = l({
+			controlled: t,
+			initial: P,
+			onRequest: (e) => {
+				a = e.cancelled, D?.(e.value, {
+					get cancelled() {
+						return e.cancelled;
+					},
+					cancel: () => e.cancel(),
+					previous: e.previous,
+					reason: n,
+					source: e.source,
+					value: e.value
+				});
+			}
+		}).request(i, n, r);
+		a || o && Ae(i);
+	}, [
+		t,
+		P,
+		D,
+		I,
+		F
+	]), nt = Ge === "auto" || Fe === "auto";
+	m(() => {
+		if (U === null || !nt) {
+			nt || qe(void 0);
+			return;
+		}
+		let e = me(U, {
+			at: je,
+			onChange: qe
+		});
+		return qe(e.narrow()), () => e.destroy();
+	}, [U, nt]);
+	let rt = y(G === "overlay"), it = y(!1);
+	m(() => {
+		let e = G === "overlay", t = e && !rt.current, n = !e && rt.current;
+		rt.current = e, G !== void 0 && (e && j && (t || W === !0) ? (it.current = !0, Y(!1, "resize")) : n && it.current && (it.current = !1, j || Y(!0, "resize")));
+	}, [G]);
+	let at = y(K === "overlay"), ot = y(!1);
+	m(() => {
+		let e = K === "overlay", t = e && !at.current, n = !e && at.current;
+		at.current = e, K !== void 0 && (e && N && (t || W === !0) ? (ot.current = !0, X(!1, "resize")) : n && ot.current && (ot.current = !1, N || X(!0, "resize")));
+	}, [K]);
+	let st = j && (!Xe || Je.nav), Z = G === "overlay" && j && J.nav, ct = K === "overlay" && N && J.aside, lt = (Z || ct) && B, [ut, dt] = b(lt ? "open" : "unmounted"), Q = y(null);
+	Q.current === null && (Q.current = ne({
+		present: lt,
+		onStatusChange: dt
+	})), m(() => {
+		Q.current?.sync(lt);
+	}, [lt]), m(() => {
+		let e = Q.current;
+		return () => e?.stop();
+	}, []);
+	let ft = f((e) => {
+		Q.current?.setNode(e);
+	}, []), pt = f((e, t, n, r) => {
+		let i = ae(e, {
+			...t === null ? {} : { branches: [t] },
+			back: B && Be === "close",
+			content: e,
+			escape: ze === "close",
+			modal: B,
+			onDismiss: (e) => {
+				if (e.reason === "outsidePress" && V === "none") return e.cancel();
+				r(e.reason, e.source);
+			},
+			outsidePress: V === "close",
+			outsidePressEvent: "click"
+		}), a = s(e, {
+			contain: B,
+			initial: "first",
+			...t === null ? {} : { restore: () => t }
+		});
+		a.enter();
+		let o = B ? n.filter((e) => e !== null) : [];
+		for (let e of o) t !== null && e.contains(t) || e.setAttribute("inert", "");
+		return () => {
+			for (let e of o) e.removeAttribute("inert");
+			a.destroy(), i.destroy();
+		};
+	}, [
+		Be,
+		ze,
+		B,
+		V
+	]);
+	m(() => {
+		let e = q.current.nav;
+		if (!Z || e === null) return;
+		let { aside: t, banner: n, footer: r, main: i, toggle: a } = q.current;
+		return pt(e, a, [
+			n,
+			i,
+			t,
+			r
+		], (e, t) => Y(!1, e, t));
+	}, [
+		Z,
+		pt,
+		Y
+	]), m(() => {
+		let e = q.current.aside;
+		if (!ct || e === null) return;
+		let { asideToggle: t, banner: n, footer: r, main: i, nav: a } = q.current;
+		return pt(e, t, [
+			n,
+			i,
+			a,
+			r
+		], (e, t) => X(!1, e, t));
+	}, [
+		ct,
+		pt,
+		X
+	]);
+	let mt = f((e) => {
+		if (O.onClick?.(e), !Z || !z) return;
+		let t = e.target?.closest?.("a[href]");
+		t != null && q.current.nav?.contains(t) === !0 && t.getAttribute("aria-disabled") !== "true" && Y(!1, "select", e.nativeEvent);
+	}, [
+		O,
+		Z,
+		z,
+		Y
+	]), [ht, gt] = b(null);
+	m(() => {
+		if (ht !== null) return ie(ht), () => ie(null, ht.ownerDocument);
+	}, [ht]), g(xe, () => ({
+		openNav: () => Y(!0, "programmatic"),
+		closeNav: () => Y(!1, "programmatic"),
+		openAside: () => X(!0, "programmatic"),
+		closeAside: () => X(!1, "programmatic"),
+		focusMain: () => {
+			q.current.main && c(q.current.main);
+		},
+		get root() {
+			return U;
+		}
+	}), [
+		U,
+		X,
+		Y
+	]);
+	let _t = `${A}main`, vt = `${A}nav`, yt = `${A}aside`, bt = v(() => ({
+		asideDragging: L,
+		asideExtent: P,
+		asideId: yt,
+		asideMode: K,
+		asideOpen: N,
+		asideSize: R,
+		asideToggleId: `${A}aside-toggle`,
+		canvas: Ie,
+		closeOnNavigate: z,
+		collapsedTo: Le,
+		escape: ze,
+		back: Be,
+		busy: Qe,
+		mainId: _t,
+		maxAsideExtent: I,
+		minAsideExtent: F,
+		modal: B,
+		navId: vt,
+		navMode: G,
+		navSide: Ve,
+		navSize: He,
+		nodes: q.current,
+		open: j,
+		outsidePress: V,
+		primary: Ue,
+		register: et,
+		root: U,
+		scroll: We,
+		separation: Re,
+		setAsideDragging: Pe,
+		setBusy: $e,
+		setAsideExtent: tt,
+		setAsideOpen: X,
+		setOpen: Y,
+		t: H,
+		toggleId: `${A}toggle`
+	}), [
+		L,
+		yt,
+		A,
+		Qe,
+		P,
+		N,
+		j,
+		_t,
+		vt,
+		et,
+		K,
+		R,
+		Ie,
+		z,
+		Le,
+		Be,
+		ze,
+		G,
+		B,
+		Ve,
+		He,
+		V,
+		Ue,
+		We,
+		Re,
+		I,
+		F,
+		U,
+		tt,
+		X,
+		Y,
+		H
+	]), $ = [];
+	J.main && $.push(/* @__PURE__ */ x("a", {
+		href: `#${_t}`,
+		onClick: () => {
+			q.current.main && c(q.current.main);
+		},
+		children: H("skipToMain")
+	}, "main")), J.nav && $.push(/* @__PURE__ */ x("a", {
+		href: `#${vt}`,
+		children: H("skipToNav")
+	}, "nav")), J.aside && N && $.push(/* @__PURE__ */ x("a", {
+		href: `#${yt}`,
+		children: H("skipToAside")
+	}, "aside"));
+	let xt = o({
+		...O,
+		children: /* @__PURE__ */ te(ee, { children: [
+			$.length > 0 ? /* @__PURE__ */ x("div", {
+				"data-part": "skip",
+				"data-part-skip": "",
+				children: $
+			}) : null,
+			u,
+			ut === "unmounted" ? null : /* @__PURE__ */ x("div", {
+				"data-part": "scrim",
+				"data-part-scrim": "",
+				"data-status": ut,
+				ref: ft
+			}),
+			/* @__PURE__ */ x("div", {
+				"data-part": "layer",
+				"data-part-layer": "",
+				ref: gt
+			})
+		] }),
+		className: d,
+		...K === void 0 ? {} : { "data-aside-mode": K },
+		"data-aside-size": R,
+		"data-canvas": Ie,
+		"data-collapsed-to": Le,
+		...L ? { "data-dragging": "" } : {},
+		...G === void 0 ? {} : { "data-nav-mode": G },
+		"data-nav-side": Ve,
+		"data-nav-size": He,
+		...st ? { "data-open": "" } : {},
+		"data-part": "root",
+		"data-primary": Ue,
+		"data-scroll": We,
+		"data-separation": Re,
+		"data-ui": "app-shell",
+		onClick: mt,
+		style: Te
+	});
+	return /* @__PURE__ */ x(Me.Provider, {
+		value: bt,
+		children: Se === void 0 ? /* @__PURE__ */ x("div", {
+			...xt,
+			ref: Ke
+		}) : Se({
+			...xt,
+			ref: Ke
+		})
+	});
+}
+//#endregion
+export { k as C, F as S, C as T, xe as _, be as a, Ce as b, Ae as c, I as d, _e as f, O as g, P as h, Pe as i, Ee as l, ye as m, R as n, A as o, ve as p, L as r, De as s, je as t, ke as u, we as v, ge as w, Se as x, Te as y };