@thewhatmatters/wmds 0.4.42 → 0.4.45

package/dist/components/organisms/AppShell/AppShell.js

@@ -5,293 +5,331 @@ import { IconButton as n } from "../../atoms/IconButton/IconButton.js";
 import { Kbd as r } from "../../atoms/Kbd/Kbd.js";
 import { Tooltip as i } from "../../atoms/Tooltip/Tooltip.js";
 import { pageHeaderTitleClasses as ee } from "../../molecules/PageHeader/pageHeaderStyles.js";
-import { PageHeader as a } from "../../molecules/PageHeader/PageHeader.js";
-import { overlayPanelBodyScrollClasses as te, overlayPanelSectionStackClasses as ne } from "../Dialog/dialogStyles.js";
-import { OverlayPanelHeader as re } from "../Dialog/OverlayPanelHeader.js";
-import { Panel as ie } from "../Panel/Panel.js";
-import { Sheet as ae } from "../Sheet/Sheet.js";
-import { appShellAsideDockedClasses as oe, appShellBrandClasses as se, appShellCanvasClasses as ce, appShellMainClasses as le, appShellRootClasses as ue, appShellSheetBodyClasses as de, appShellSidebarBodyClasses as o, appShellSidebarClasses as fe, appShellSidebarFooterClasses as pe, appShellSkipLinkClasses as me, appShellSurfaceClasses as he, appShellToggleDesktopClasses as ge, appShellToggleMobileClasses as s } from "./appShellStyles.js";
-import { Children as c, createContext as _e, isValidElement as ve, useCallback as l, useContext as ye, useEffect as u, useId as be, useMemo as xe, useRef as d, useState as f } from "react";
-import { ChevronDown as Se, PanelLeft as p } from "lucide-react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { PageHeader as te } from "../../molecules/PageHeader/PageHeader.js";
+import { overlayPanelBodyScrollClasses as ne, overlayPanelFooterDelineatedInnerClasses as re, overlayPanelFooterDelineatedShellClasses as ie, overlayPanelFooterHairlineClasses as ae, overlayPanelSectionStackClasses as oe } from "../Dialog/dialogStyles.js";
+import { OverlayPanelHeader as se } from "../Dialog/OverlayPanelHeader.js";
+import { Panel as a } from "../Panel/Panel.js";
+import { Sheet as ce } from "../Sheet/Sheet.js";
+import { appShellAsideDockedClasses as le, appShellAsideInsetClasses as ue, appShellAsideInsetHeaderClasses as de, appShellBrandClasses as fe, appShellCanvasClasses as pe, appShellInsetRowClasses as me, appShellMainClasses as o, appShellRootClasses as he, appShellSheetBodyClasses as ge, appShellSidebarBodyClasses as s, appShellSidebarClasses as _e, appShellSidebarFooterClasses as ve, appShellSkipLinkClasses as ye, appShellSurfaceClasses as be, appShellToggleDesktopClasses as xe, appShellToggleMobileClasses as c, appShellToolbarClasses as Se } from "./appShellStyles.js";
+import { Children as l, createContext as Ce, isValidElement as we, useCallback as u, useContext as Te, useEffect as d, useId as Ee, useMemo as De, useRef as f, useState as p } from "react";
+import { ChevronDown as Oe, PanelLeft as m } from "lucide-react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/organisms/AppShell/AppShell.tsx
-var Ce = {
+var ke = {
 	collapse: "Collapse sidebar",
 	expand: "Expand sidebar",
 	menu: "Menu",
 	aside: "Details",
 	skipToContent: "Skip to content"
-}, _ = ["overlay", "docked"], v = [
+}, v = [
+	"overlay",
+	"docked",
+	"inset"
+], y = [
 	"icon",
 	"label",
 	"picker"
 ];
-function y({ children: e }) {
-	return /* @__PURE__ */ h(m, { children: e });
-}
 function b({ children: e }) {
-	return /* @__PURE__ */ h(m, { children: e });
+	return /* @__PURE__ */ g(h, { children: e });
 }
 function x({ children: e }) {
-	return /* @__PURE__ */ h(m, { children: e });
+	return /* @__PURE__ */ g(h, { children: e });
 }
 function S({ children: e }) {
-	return /* @__PURE__ */ h(m, { children: e });
+	return /* @__PURE__ */ g(h, { children: e });
 }
 function C({ children: e }) {
-	return /* @__PURE__ */ h(m, { children: e });
+	return /* @__PURE__ */ g(h, { children: e });
+}
+function w({ children: e }) {
+	return /* @__PURE__ */ g(h, { children: e });
+}
+function T({ children: e }) {
+	return /* @__PURE__ */ g(h, { children: e });
 }
-var w = _e(null);
-function T() {
-	let e = ye(w);
+var E = Ce(null);
+function D() {
+	let e = Te(E);
 	if (e == null) throw Error("useAppShell must be used inside <AppShell>.");
 	return e;
 }
-function E(e, t, n) {
-	let [r, i] = f(t);
-	return [e ?? r, l((t) => {
+function O(e, t, n) {
+	let [r, i] = p(t);
+	return [e ?? r, u((t) => {
 		e ?? i(t), n?.(t);
 	}, [e, n])];
 }
-var D = "(min-width: 1024px)";
-function we(e) {
+var k = "(min-width: 1024px)";
+function Ae(e) {
 	return e instanceof HTMLElement && e.isContentEditable;
 }
-function Te(e) {
+function je(e) {
 	let t = { content: [] };
-	return c.forEach(e, (e) => {
-		if (!ve(e)) {
+	return l.forEach(e, (e) => {
+		if (!we(e)) {
 			e != null && e !== !1 && t.content.push(e);
 			return;
 		}
-		e.type === y ? t.brand = e.props.children : e.type === b ? t.sidebar = e.props.children : e.type === x ? t.sidebarFooter = e.props.children : e.type === S ? t.header = e.props.children : e.type === C ? t.aside = e.props : t.content.push(e);
+		e.type === b ? t.brand = e.props.children : e.type === x ? t.sidebar = e.props.children : e.type === S ? t.sidebarFooter = e.props.children : e.type === C ? t.header = e.props.children : e.type === w ? t.toolbar = e.props.children : e.type === T ? t.aside = e.props : t.content.push(e);
 	}), t;
 }
-function O({ title: c, brand: _e, sidebar: ve, sidebarFooter: ye, header: _, aside: v, asideTitle: y, asideDescription: b, sidebarOpen: x, defaultSidebarOpen: S = !0, onSidebarOpenChange: C, asideOpen: T, defaultAsideOpen: O = !1, onAsideOpenChange: k, asideMode: Ee = "overlay", menuButton: A = "icon", labels: De, children: Oe, className: ke }) {
-	let j = {
-		...Ce,
-		...De
-	}, M = Te(Oe), N = _e ?? M.brand, P = ve ?? M.sidebar, F = ye ?? M.sidebarFooter, I = _ ?? M.header, L = v ?? M.aside?.children, R = P != null, z = L != null, [B, Ae] = E(x, S, C), [V, H] = E(T, O, k), [U, W] = f(!1), [je, G] = f(!1), K = be(), Me = d(null), Ne = d(null), q = l((e) => {
-		!e && Me.current?.contains(document.activeElement) && Ne.current?.focus(), Ae(e);
-	}, [Ae]), J = l(() => {
-		window.matchMedia(D).matches ? q(!B) : W((e) => !e);
-	}, [q, B]);
-	u(() => {
-		let e = window.matchMedia(D);
-		G(e.matches);
+function A({ title: l, brand: Ce, sidebar: we, sidebarFooter: Te, header: v, toolbar: y, aside: b, asideTitle: x, asideDescription: S, asideFooter: C, sidebarOpen: w, defaultSidebarOpen: T = !0, onSidebarOpenChange: D, asideOpen: A, defaultAsideOpen: j = !1, onAsideOpenChange: Me, asideMode: M = "overlay", menuButton: N = "icon", labels: Ne, children: Pe, className: Fe }) {
+	let P = {
+		...ke,
+		...Ne
+	}, F = je(Pe), Ie = Ce ?? F.brand, I = we ?? F.sidebar, Le = Te ?? F.sidebarFooter, Re = v ?? F.header, ze = y ?? F.toolbar, L = b ?? F.aside?.children, R = I != null, Be = L != null, [z, Ve] = O(w, T, D), [B, V] = O(A, j, Me), [H, U] = p(!1), [He, Ue] = p(!1), [We, Ge] = p(!1), W = Ee(), G = f(null), Ke = f(null), K = u((e) => {
+		!e && G.current?.contains(document.activeElement) && Ke.current?.focus(), Ve(e);
+	}, [Ve]), q = u(() => {
+		window.matchMedia(k).matches ? K(!z) : U((e) => !e);
+	}, [K, z]);
+	d(() => {
+		let e = window.matchMedia(k);
+		Ue(e.matches), Ge(!0);
 		function t(e) {
-			G(e.matches), e.matches && W(!1);
+			Ue(e.matches), e.matches && U(!1);
 		}
 		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
-	}, []), u(() => {
+	}, []), d(() => {
 		if (!R) return;
 		function e(e) {
-			e.defaultPrevented || e.altKey || e.shiftKey || !(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== "b" || we(e.target) || (e.preventDefault(), J());
+			e.defaultPrevented || e.altKey || e.shiftKey || !(e.metaKey || e.ctrlKey) || e.key.toLowerCase() !== "b" || Ae(e.target) || (e.preventDefault(), q());
 		}
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [R, J]);
-	let Pe = xe(() => ({
-		sidebarOpen: B,
-		setSidebarOpen: q,
-		menuOpen: U,
-		setMenuOpen: W,
-		asideOpen: V,
-		setAsideOpen: H,
-		toggleSidebar: J
+	}, [R, q]);
+	let qe = De(() => ({
+		sidebarOpen: z,
+		setSidebarOpen: K,
+		menuOpen: H,
+		setMenuOpen: U,
+		asideOpen: B,
+		setAsideOpen: V,
+		toggleSidebar: q
 	}), [
-		V,
-		U,
-		H,
-		q,
 		B,
-		J
+		H,
+		V,
+		K,
+		z,
+		q
 	]);
-	function Fe(e) {
-		e.target.closest("nav a[href], nav button") != null && W(!1);
+	function Je(e) {
+		e.target.closest("nav a[href], nav button") != null && U(!1);
 	}
-	let Y = z && Ee === "docked" && je, X = `${K}-aside`, Ie = d(null), Z = d(null);
-	u(() => {
-		Y && (V ? Z.current = document.activeElement : Z.current = null);
-	}, [V, Y]);
-	function Le() {
-		let e = Z.current, t = Ie.current?.contains(document.activeElement) ?? !1;
-		H(!1), t && (e?.isConnected ? e.focus() : document.getElementById(`${K}-main`)?.focus());
+	let J = Be && (M === "docked" || M === "inset") && He, Y = J && M === "inset", X = `${W}-aside`, Ye = f(null), Z = f(null);
+	d(() => {
+		J && (B ? Z.current = document.activeElement : Z.current = null);
+	}, [B, J]);
+	let Xe = J && B ? /* @__PURE__ */ g("aside", {
+		ref: Ye,
+		id: X,
+		"aria-labelledby": `${X}-title`,
+		className: Y ? ue : le,
+		onKeyDown: (e) => {
+			e.key === "Escape" && !e.defaultPrevented && (e.preventDefault(), Ze());
+		},
+		children: /* @__PURE__ */ _("div", {
+			className: oe,
+			children: [
+				/* @__PURE__ */ g(se, {
+					titleId: `${X}-title`,
+					descriptionId: `${X}-description`,
+					title: x ?? F.aside?.title ?? P.aside,
+					description: S ?? F.aside?.description,
+					closeLabel: "Close panel",
+					onClose: Ze,
+					delineated: !Y,
+					className: Y ? de : void 0
+				}),
+				/* @__PURE__ */ g("div", {
+					className: e(ne, C == null && "pb-4"),
+					children: L
+				}),
+				C == null ? null : /* @__PURE__ */ _("footer", {
+					className: ie,
+					children: [/* @__PURE__ */ g("hr", {
+						className: ae,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ g("div", {
+						className: re,
+						children: C
+					})]
+				})
+			]
+		})
+	}) : null;
+	function Ze() {
+		let e = Z.current, t = Ye.current?.contains(document.activeElement) ?? !1;
+		V(!1), t && (e?.isConnected ? e.focus() : document.getElementById(`${W}-main`)?.focus());
 	}
-	let Re = B ? j.collapse : j.expand, Q = `${K}-main`, ze = N == null ? null : /* @__PURE__ */ h("div", {
-		className: se,
-		children: N
-	}), Be = F == null ? null : /* @__PURE__ */ h("div", {
-		className: pe,
-		children: F
-	}), $ = R ? /* @__PURE__ */ g(i.Provider, { children: [/* @__PURE__ */ g(i, { children: [/* @__PURE__ */ h(i.Trigger, { render: /* @__PURE__ */ h(n, {
-		ref: Ne,
+	let Qe = z ? P.collapse : P.expand, Q = `${W}-main`, $e = Ie == null ? null : /* @__PURE__ */ g("div", {
+		className: fe,
+		children: Ie
+	}), et = Le == null ? null : /* @__PURE__ */ g("div", {
+		className: ve,
+		children: Le
+	}), $ = R ? /* @__PURE__ */ _(i.Provider, { children: [/* @__PURE__ */ _(i, { children: [/* @__PURE__ */ g(i.Trigger, { render: /* @__PURE__ */ g(n, {
+		ref: Ke,
 		role: "ghost",
 		size: "sm",
 		title: "",
-		icon: /* @__PURE__ */ h(p, { strokeWidth: 2 }),
-		"aria-label": Re,
-		"aria-expanded": B,
-		"aria-controls": K,
+		icon: /* @__PURE__ */ g(m, { strokeWidth: 2 }),
+		"aria-label": Qe,
+		"aria-expanded": z,
+		"aria-controls": W,
 		"aria-keyshortcuts": "Control+B Meta+B",
-		className: ge,
-		onClick: () => q(!B)
-	}) }), /* @__PURE__ */ h(i.Content, { children: /* @__PURE__ */ g("span", {
+		className: xe,
+		onClick: () => K(!z)
+	}) }), /* @__PURE__ */ g(i.Content, { children: /* @__PURE__ */ _("span", {
 		className: "inline-flex items-center gap-2",
 		children: [
-			Re,
-			/* @__PURE__ */ h(r, {
+			Qe,
+			/* @__PURE__ */ g(r, {
 				size: "sm",
 				children: "Ctrl"
 			}),
-			/* @__PURE__ */ h(r, {
+			/* @__PURE__ */ g(r, {
 				size: "sm",
 				children: "B"
 			})
 		]
-	}) })] }), A === "picker" ? /* @__PURE__ */ h(t, {
+	}) })] }), N === "picker" ? /* @__PURE__ */ g(t, {
 		role: "ghost",
 		size: "sm",
-		icon: /* @__PURE__ */ h(p, { strokeWidth: 2 }),
-		"aria-label": `${j.menu}: ${c}`,
-		"aria-expanded": U,
+		icon: /* @__PURE__ */ g(m, { strokeWidth: 2 }),
+		"aria-label": `${P.menu}: ${l}`,
+		"aria-expanded": H,
 		"aria-haspopup": "dialog",
 		"aria-keyshortcuts": "Control+B Meta+B",
-		className: e(s, "min-w-0 max-w-full [&>span:last-child]:min-w-0"),
-		onClick: () => W(!0),
-		children: /* @__PURE__ */ g("span", {
+		className: e(c, "min-w-0 max-w-full [&>span:last-child]:min-w-0"),
+		onClick: () => U(!0),
+		children: /* @__PURE__ */ _("span", {
 			className: "flex min-w-0 items-center gap-1",
-			children: [/* @__PURE__ */ h("span", {
+			children: [/* @__PURE__ */ g("span", {
 				className: "min-w-0 truncate",
-				children: c
-			}), /* @__PURE__ */ h(Se, {
+				children: l
+			}), /* @__PURE__ */ g(Oe, {
 				strokeWidth: 2,
 				"aria-hidden": "true",
 				className: "size-4 shrink-0 text-muted"
 			})]
 		})
-	}) : A === "label" ? /* @__PURE__ */ h(t, {
+	}) : N === "label" ? /* @__PURE__ */ g(t, {
 		role: "ghost",
 		size: "sm",
-		icon: /* @__PURE__ */ h(p, { strokeWidth: 2 }),
-		"aria-expanded": U,
+		icon: /* @__PURE__ */ g(m, { strokeWidth: 2 }),
+		"aria-expanded": H,
 		"aria-haspopup": "dialog",
 		"aria-keyshortcuts": "Control+B Meta+B",
-		className: e(s, "shrink-0"),
-		onClick: () => W(!0),
-		children: j.menu
-	}) : /* @__PURE__ */ h(n, {
+		className: e(c, "shrink-0"),
+		onClick: () => U(!0),
+		children: P.menu
+	}) : /* @__PURE__ */ g(n, {
 		role: "ghost",
 		size: "sm",
-		icon: /* @__PURE__ */ h(p, { strokeWidth: 2 }),
-		"aria-label": j.menu,
-		"aria-expanded": U,
+		icon: /* @__PURE__ */ g(m, { strokeWidth: 2 }),
+		"aria-label": P.menu,
+		"aria-expanded": H,
 		"aria-haspopup": "dialog",
 		"aria-keyshortcuts": "Control+B Meta+B",
-		className: s,
-		onClick: () => W(!0)
+		className: c,
+		onClick: () => U(!0)
 	})] }) : null;
-	return /* @__PURE__ */ h(w.Provider, {
-		value: Pe,
-		children: /* @__PURE__ */ g("div", {
-			className: e(ue, ke),
+	return /* @__PURE__ */ g(E.Provider, {
+		value: qe,
+		children: /* @__PURE__ */ _("div", {
+			className: e(he, Fe),
 			children: [
-				/* @__PURE__ */ h("a", {
+				/* @__PURE__ */ g("a", {
 					href: `#${Q}`,
-					className: me,
+					className: ye,
 					onClick: (e) => {
 						e.preventDefault(), document.getElementById(Q)?.focus();
 					},
-					children: j.skipToContent
+					children: P.skipToContent
 				}),
-				R ? /* @__PURE__ */ g("div", {
-					ref: Me,
-					id: K,
-					className: e(fe, !B && "lg:!hidden"),
+				R ? /* @__PURE__ */ _("div", {
+					ref: G,
+					id: W,
+					className: e(_e, !z && "lg:!hidden"),
 					children: [
-						ze,
-						/* @__PURE__ */ h("div", {
-							className: o,
-							children: P
+						$e,
+						/* @__PURE__ */ g("div", {
+							className: s,
+							children: I
 						}),
-						Be
+						et
 					]
 				}) : null,
-				/* @__PURE__ */ g("div", {
-					className: ce,
-					children: [/* @__PURE__ */ g("div", {
-						className: he,
-						children: [A === "picker" ? /* @__PURE__ */ h(a, {
-							variant: "app",
-							"aria-label": c,
-							start: /* @__PURE__ */ g(m, { children: [$, /* @__PURE__ */ h("h1", {
-								className: e(ee.app, "max-lg:sr-only"),
-								children: c
-							})] }),
-							end: I
-						}) : /* @__PURE__ */ h(a, {
-							variant: "app",
-							title: c,
-							"aria-label": c,
-							start: $,
-							end: I
-						}), /* @__PURE__ */ h("main", {
-							id: Q,
-							tabIndex: -1,
-							className: le,
-							children: M.content
-						})]
-					}), Y && V ? /* @__PURE__ */ h("aside", {
-						ref: Ie,
-						id: X,
-						"aria-labelledby": `${X}-title`,
-						className: oe,
-						onKeyDown: (e) => {
-							e.key === "Escape" && !e.defaultPrevented && (e.preventDefault(), Le());
-						},
-						children: /* @__PURE__ */ g("div", {
-							className: ne,
-							children: [/* @__PURE__ */ h(re, {
-								titleId: `${X}-title`,
-								descriptionId: `${X}-description`,
-								title: y ?? M.aside?.title ?? j.aside,
-								description: b ?? M.aside?.description,
-								closeLabel: "Close panel",
-								onClose: Le,
-								delineated: !0
-							}), /* @__PURE__ */ h("div", {
-								className: e(te, "pb-4"),
-								children: L
-							})]
-						})
-					}) : null]
+				/* @__PURE__ */ _("div", {
+					className: pe,
+					children: [/* @__PURE__ */ _("div", {
+						className: be,
+						children: [
+							N === "picker" ? /* @__PURE__ */ g(te, {
+								variant: "app",
+								"aria-label": l,
+								start: /* @__PURE__ */ _(h, { children: [$, /* @__PURE__ */ g("h1", {
+									className: e(ee.app, "max-lg:sr-only"),
+									children: l
+								})] }),
+								end: Re
+							}) : /* @__PURE__ */ g(te, {
+								variant: "app",
+								title: l,
+								"aria-label": l,
+								start: $,
+								end: Re
+							}),
+							ze == null ? null : /* @__PURE__ */ g("div", {
+								className: Se,
+								children: ze
+							}),
+							Y ? /* @__PURE__ */ _("div", {
+								className: me,
+								children: [/* @__PURE__ */ g("main", {
+									id: Q,
+									tabIndex: -1,
+									className: o,
+									children: F.content
+								}), Xe]
+							}) : /* @__PURE__ */ g("main", {
+								id: Q,
+								tabIndex: -1,
+								className: o,
+								children: F.content
+							})
+						]
+					}), J && !Y ? Xe : null]
 				}),
-				R ? /* @__PURE__ */ h(ae, {
-					open: U,
-					onOpenChange: W,
-					children: /* @__PURE__ */ h(ae.Content, {
+				R ? /* @__PURE__ */ g(ce, {
+					open: H,
+					onOpenChange: U,
+					children: /* @__PURE__ */ g(ce.Content, {
 						side: "start",
-						title: j.menu,
-						children: /* @__PURE__ */ g("div", {
-							className: de,
-							onClick: Fe,
+						title: P.menu,
+						children: /* @__PURE__ */ _("div", {
+							className: ge,
+							onClick: Je,
 							children: [
-								ze,
-								/* @__PURE__ */ h("div", {
-									className: o,
-									children: P
+								$e,
+								/* @__PURE__ */ g("div", {
+									className: s,
+									children: I
 								}),
-								Be
+								et
 							]
 						})
 					})
 				}) : null,
-				z && !Y ? /* @__PURE__ */ h(ie, {
-					open: V,
-					onOpenChange: H,
-					children: /* @__PURE__ */ h(ie.Content, {
+				Be && !J && (M === "overlay" || We) ? /* @__PURE__ */ g(a, {
+					open: B,
+					onOpenChange: V,
+					children: /* @__PURE__ */ g(a.Content, {
 						side: "end",
-						title: y ?? M.aside?.title ?? j.aside,
-						description: b ?? M.aside?.description,
+						title: x ?? F.aside?.title ?? P.aside,
+						description: S ?? F.aside?.description,
+						footer: C,
 						children: L
 					})
 				}) : null
@@ -299,12 +337,13 @@ function O({ title: c, brand: _e, sidebar: ve, sidebarFooter: ye, header: _, asi
 		})
 	});
 }
-var k = Object.assign(O, {
-	Brand: y,
-	Sidebar: b,
-	SidebarFooter: x,
-	Header: S,
-	Aside: C
+var j = Object.assign(A, {
+	Brand: b,
+	Sidebar: x,
+	SidebarFooter: S,
+	Header: C,
+	Toolbar: w,
+	Aside: T
 });
 //#endregion
-export { k as AppShell, _ as appShellAsideModes, v as appShellMenuButtons, T as useAppShell };
+export { j as AppShell, v as appShellAsideModes, y as appShellMenuButtons, D as useAppShell };

package/dist/components/organisms/AppShell/appShellStyles.d.ts

@@ -22,4 +22,15 @@ export declare const appShellMainClasses = "min-h-0 flex-1 overflow-y-auto px-[v
 export declare const appShellToggleDesktopClasses = "max-lg:!hidden";
 export declare const appShellToggleMobileClasses = "lg:!hidden";
 export declare const appShellSheetBodyClasses = "flex h-full min-h-0 flex-col";
+/** Full-width band under the title bar: a view toolbar for the page (and an inset aside below it). */
+export declare const appShellToolbarClasses = "shrink-0 border-b border-border";
+/** `asideMode="inset"`: the page body and the floating aside side by side, under the toolbar. */
+export declare const appShellInsetRowClasses = "flex min-h-0 flex-1";
+/**
+ * `asideMode="inset"` from `lg`: a raised card floating inside the page surface, 12px from its end and
+ * bottom edges; the page body narrows beside it, never covered.
+ */
+export declare const appShellAsideInsetClasses = "mb-3 me-3 mt-3 flex min-h-0 w-80 shrink-0 flex-col overflow-hidden rounded-[var(--radius-surface-md)] border border-border bg-surface shadow-lg";
+/** Inset aside header: the title bar's 56px band, title and description centred in it. */
+export declare const appShellAsideInsetHeaderClasses: string;
 //# sourceMappingURL=appShellStyles.d.ts.map

package/dist/components/organisms/AppShell/appShellStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appShellStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/AppShell/appShellStyles.ts"],"names":[],"mappings":"AAIA,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,yDAAyD,CAAC;AAE1F,sFAAsF;AACtF,eAAO,MAAM,sBAAsB,mEAAmE,CAAC;AAEvG,wEAAwE;AACxE,eAAO,MAAM,oBAAoB,QAGhC,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAAmC,CAAC;AAE3E,6EAA6E;AAC7E,eAAO,MAAM,4BAA4B,kCAAkC,CAAC;AAE5E,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,0CAA0C,CAAC;AAE7E;;;GAGG;AACH,eAAO,MAAM,0BAA0B,QAGtC,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,sBAAsB,QAGlC,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,uBAAuB,QAGqB,CAAC;AAE1D,eAAO,MAAM,mBAAmB,2FAC0D,CAAC;AAE3F,eAAO,MAAM,4BAA4B,mBAAmB,CAAC;AAE7D,eAAO,MAAM,2BAA2B,eAAe,CAAC;AAExD,eAAO,MAAM,wBAAwB,iCAAiC,CAAC"}
+{"version":3,"file":"appShellStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/AppShell/appShellStyles.ts"],"names":[],"mappings":"AAIA,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,yDAAyD,CAAC;AAE1F,sFAAsF;AACtF,eAAO,MAAM,sBAAsB,mEAAmE,CAAC;AAEvG,wEAAwE;AACxE,eAAO,MAAM,oBAAoB,QAGhC,CAAC;AAEF,eAAO,MAAM,0BAA0B,mCAAmC,CAAC;AAE3E,6EAA6E;AAC7E,eAAO,MAAM,4BAA4B,kCAAkC,CAAC;AAE5E,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,0CAA0C,CAAC;AAE7E;;;GAGG;AACH,eAAO,MAAM,0BAA0B,QAGtC,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,sBAAsB,QAGlC,CAAC;AAEF,mFAAmF;AACnF,eAAO,MAAM,uBAAuB,QAGqB,CAAC;AAE1D,eAAO,MAAM,mBAAmB,2FAC0D,CAAC;AAE3F,eAAO,MAAM,4BAA4B,mBAAmB,CAAC;AAE7D,eAAO,MAAM,2BAA2B,eAAe,CAAC;AAExD,eAAO,MAAM,wBAAwB,iCAAiC,CAAC;AAEvE,sGAAsG;AACtG,eAAO,MAAM,sBAAsB,oCAAoC,CAAC;AAExE,iGAAiG;AACjG,eAAO,MAAM,uBAAuB,wBAAwB,CAAC;AAE7D;;;GAGG;AACH,eAAO,MAAM,yBAAyB,oJAC6G,CAAC;AAEpJ,0FAA0F;AAC1F,eAAO,MAAM,+BAA+B,QAA8F,CAAC"}

package/dist/components/organisms/AppShell/appShellStyles.js

@@ -3,6 +3,6 @@ import { cn as e } from "../../../lib/cn.js";
 import { cardLayoutShellShapeClasses as t } from "../../molecules/Card/cardStyles.js";
 import { pageHeaderAppBandHeightClasses as n } from "../../molecules/PageHeader/pageHeaderStyles.js";
 //#region src/components/organisms/AppShell/appShellStyles.ts
-var r = "flex h-full min-h-0 w-full bg-body font-sans text-fg", i = "flex h-full min-h-0 w-60 shrink-0 flex-col pt-2 max-lg:!hidden", a = e("box-border flex shrink-0 items-center gap-2 px-4", n), o = "min-h-0 flex-1 overflow-y-auto", s = "box-border shrink-0 px-4 py-3", c = "flex min-h-0 min-w-0 flex-1 gap-2 p-2", l = e("flex min-h-0 w-80 shrink-0 flex-col overflow-hidden bg-surface shadow-soft-card", t.rounded), u = e("flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-surface shadow-soft-card", t.rounded), d = "sr-only focus:not-sr-only focus:fixed focus:start-4 focus:top-4 focus:z-50 focus:rounded-[var(--radius-control)] focus:bg-body focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-fg focus:outline-none focus:ring-2 focus:ring-focus-ring", f = "min-h-0 flex-1 overflow-y-auto px-[var(--grid-margin)] py-6 focus-visible:outline-none", p = "max-lg:!hidden", m = "lg:!hidden", h = "flex h-full min-h-0 flex-col";
+var r = "flex h-full min-h-0 w-full bg-body font-sans text-fg", i = "flex h-full min-h-0 w-60 shrink-0 flex-col pt-2 max-lg:!hidden", a = e("box-border flex shrink-0 items-center gap-2 px-4", n), o = "min-h-0 flex-1 overflow-y-auto", s = "box-border shrink-0 px-4 py-3", c = "flex min-h-0 min-w-0 flex-1 gap-2 p-2", l = e("flex min-h-0 w-80 shrink-0 flex-col overflow-hidden bg-surface shadow-soft-card", t.rounded), u = e("flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-surface shadow-soft-card", t.rounded), d = "sr-only focus:not-sr-only focus:fixed focus:start-4 focus:top-4 focus:z-50 focus:rounded-[var(--radius-control)] focus:bg-body focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-fg focus:outline-none focus:ring-2 focus:ring-focus-ring", f = "min-h-0 flex-1 overflow-y-auto px-[var(--grid-margin)] py-6 focus-visible:outline-none", p = "max-lg:!hidden", m = "lg:!hidden", h = "flex h-full min-h-0 flex-col", g = "shrink-0 border-b border-border", _ = "flex min-h-0 flex-1", v = "mb-3 me-3 mt-3 flex min-h-0 w-80 shrink-0 flex-col overflow-hidden rounded-[var(--radius-surface-md)] border border-border bg-surface shadow-lg", y = e("box-border !items-center !py-0 border-b border-border", n);
 //#endregion
-export { l as appShellAsideDockedClasses, a as appShellBrandClasses, c as appShellCanvasClasses, f as appShellMainClasses, r as appShellRootClasses, h as appShellSheetBodyClasses, o as appShellSidebarBodyClasses, i as appShellSidebarClasses, s as appShellSidebarFooterClasses, d as appShellSkipLinkClasses, u as appShellSurfaceClasses, p as appShellToggleDesktopClasses, m as appShellToggleMobileClasses };
+export { l as appShellAsideDockedClasses, v as appShellAsideInsetClasses, y as appShellAsideInsetHeaderClasses, a as appShellBrandClasses, c as appShellCanvasClasses, _ as appShellInsetRowClasses, f as appShellMainClasses, r as appShellRootClasses, h as appShellSheetBodyClasses, o as appShellSidebarBodyClasses, i as appShellSidebarClasses, s as appShellSidebarFooterClasses, d as appShellSkipLinkClasses, u as appShellSurfaceClasses, p as appShellToggleDesktopClasses, m as appShellToggleMobileClasses, g as appShellToolbarClasses };

package/dist/components/organisms/Chart/ChartSegmentedRing.d.ts

@@ -3,7 +3,7 @@ import { type ChartTone } from "../../../lib/chartTheme";
 import { type ChartSegmentedBarAnimate } from "./chartSegmentedBarMotion";
 /** Discrete ticks around the ring. Channels uses a fine meter; 72 keeps the gaps visible. */
 export declare const chartSegmentedRingSegmentDefault = 72;
-export declare const chartSegmentedRingSizes: readonly ["sm", "md", "lg"];
+export declare const chartSegmentedRingSizes: readonly ["sm", "md", "lg", "fluid"];
 export type ChartSegmentedRingSize = (typeof chartSegmentedRingSizes)[number];
 /** Replaces the center figure when the source is unwired. The track stays empty. */
 export interface ChartSegmentedRingUnavailable {
@@ -24,10 +24,16 @@ export interface ChartSegmentedRingProps {
     centerValue?: ReactNode;
     /** Caption under `centerValue`. */
     centerLabel?: ReactNode;
-    /** sm 96px, md 160px, lg 192px. */
+    /**
+     * sm 96px, md 160px, lg 192px. `fluid` fills its container's width (square, so give the container a height
+     * cap such as `max-h-[70svh]` with `aspect-square`) and sizes the centre figure to the ring.
+     */
     size?: ChartSegmentedRingSize;
-    /** `initial` sweeps from empty on mount. Reduced motion stays on the final fill. */
-    animate?: ChartSegmentedBarAnimate;
+    /**
+     * `initial` sweeps from empty on mount, then jumps to new values. `always` also sweeps from the current fill
+     * to each new value (one gauge stepping through figures). Reduced motion stays on the final fill.
+     */
+    animate?: ChartSegmentedBarAnimate | "always";
     /** Accessible name. Defaults to the percent of capacity. */
     label?: string;
     /** Source not wired — empty track, muted label and reason in the hole. */

package/dist/components/organisms/Chart/ChartSegmentedRing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSegmentedRing.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/ChartSegmentedRing.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAYnC,6FAA6F;AAC7F,eAAO,MAAM,gCAAgC,KAAK,CAAC;AAEnD,eAAO,MAAM,uBAAuB,6BAA8B,CAAC;AAEnE,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9E,oFAAoF;AACpF,MAAM,WAAW,6BAA6B;IAC5C,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gEAAgE;IAChE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mCAAmC;IACnC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mCAAmC;IACnC,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,oFAAoF;IACpF,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,WAAW,CAAC,EAAE,6BAA6B,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;;;;;;;EAQnF;AAED,sFAAsF;AACtF,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAgB/E;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,GAAG,EACH,QAA2C,EAC3C,IAAgB,EAChB,WAAW,EACX,WAAW,EACX,IAAW,EACX,OAAmB,EACnB,KAAK,EACL,WAAW,EACX,SAAS,GACV,EAAE,uBAAuB,+BA6FzB"}
+{"version":3,"file":"ChartSegmentedRing.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Chart/ChartSegmentedRing.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnF,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,2BAA2B,CAAC;AAYnC,6FAA6F;AAC7F,eAAO,MAAM,gCAAgC,KAAK,CAAC;AAEnD,eAAO,MAAM,uBAAuB,sCAAuC,CAAC;AAE5E,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9E,oFAAoF;AACpF,MAAM,WAAW,6BAA6B;IAC5C,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,uBAAuB;IACtC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gEAAgE;IAChE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mCAAmC;IACnC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,wBAAwB,GAAG,QAAQ,CAAC;IAC9C,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,WAAW,CAAC,EAAE,6BAA6B,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;;;;;;;EAQnF;AAED,sFAAsF;AACtF,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAgB/E;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,GAAG,EACH,QAA2C,EAC3C,IAAgB,EAChB,WAAW,EACX,WAAW,EACX,IAAW,EACX,OAAmB,EACnB,KAAK,EACL,WAAW,EACX,SAAS,GACV,EAAE,uBAAuB,+BAiGzB"}