@thewhatmatters/wmds 0.4.36 → 0.4.37

package/CHANGELOG.md

@@ -7,6 +7,19 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.4.37
+
+**AppShell: a docked aside you can use while watching the page, a labelled phone menu button, and titles that end in an ellipsis.**
+
+- **AppShell** `asideMode` (new): `overlay` (default, unchanged) or `docked`. Docked, from `lg`, the aside is a raised column beside the page (320px), and the page narrows to make room instead of being covered: for controls you use while watching the page change, like a font panel. It's a `complementary` landmark named by its title; Close or Escape from inside returns focus to the button that opened it. Below `lg` it's the overlay **Panel** either way. New exports `appShellAsideModes`, `AppShellAsideMode`.
+- **AppShell** `menuButton` (new): `icon` (default, unchanged) or `label`, the icon plus `labels.menu` as visible text on the phone menu button (Header rule N7), for when the glyph alone doesn't say what the menu holds. New exports `appShellMenuButtons`, `AppShellMenuButton`.
+- **PageHeader** `variant="app"`: a long title ends in an ellipsis on one line instead of wrapping out of the 56px band.
+- Stories **AppShell → State — aside docked** and **State — phone, labelled menu**, with interaction tests (the page narrows, no dialog, focus returns on Close and Escape; the labelled button opens the menu).
+
+### Consumer actions
+
+- None.
+
 ## 0.4.36
 
 **Colour fixes from building every component in light and dark: fills that vanished, the navy on the dark body, invalid hovers, and a primary Button on a band.**

package/dist/components/molecules/PageHeader/pageHeaderStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pageHeaderStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PageHeader/pageHeaderStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,qCAAsC,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,4FAA4F;AAC5F,eAAO,MAAM,8BAA8B,uCAAuC,CAAC;AAEnF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAWpE,CAAC;AAEF,eAAO,MAAM,sBAAsB,oCAAoC,CAAC;AAExE,eAAO,MAAM,oBAAoB,qCAAqC,CAAC;AAEvE,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAIpE,CAAC"}
+{"version":3,"file":"pageHeaderStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/PageHeader/pageHeaderStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,qCAAsC,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpE,4FAA4F;AAC5F,eAAO,MAAM,8BAA8B,uCAAuC,CAAC;AAEnF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAWpE,CAAC;AAEF,eAAO,MAAM,sBAAsB,oCAAoC,CAAC;AAExE,eAAO,MAAM,oBAAoB,qCAAqC,CAAC;AAEvE,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAKpE,CAAC"}

package/dist/components/molecules/PageHeader/pageHeaderStyles.js

@@ -12,7 +12,7 @@ var r = [
 	page: "flex items-center justify-between gap-4",
 	toolbar: e("flex items-center justify-between gap-2", n.md)
 }, o = "flex min-w-0 items-center gap-3", s = "flex shrink-0 items-center gap-2", c = {
-	app: e(t("section-heading"), "text-fg"),
+	app: e(t("section-heading"), "min-w-0 truncate text-fg"),
 	page: e(t("section-heading"), "text-fg"),
 	toolbar: e(t("ui-label"), "font-medium text-fg")
 };

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

@@ -13,6 +13,10 @@ export interface AppShellLabels {
     /** The skip link, the first tab stop, which moves focus to the page content. */
     skipToContent: string;
 }
+export declare const appShellAsideModes: readonly ["overlay", "docked"];
+export type AppShellAsideMode = (typeof appShellAsideModes)[number];
+export declare const appShellMenuButtons: readonly ["icon", "label"];
+export type AppShellMenuButton = (typeof appShellMenuButtons)[number];
 export interface AppShellProps {
     /** Page title — the `h1` in the title bar. */
     title: string;
@@ -33,11 +37,22 @@ export interface AppShellProps {
     sidebarOpen?: boolean;
     defaultSidebarOpen?: boolean;
     onSidebarOpenChange?: (open: boolean) => void;
+    /**
+     * `overlay` (default): the aside is a non-blocking **Panel** over the page.
+     * `docked`: from `lg` it sits beside the page, which narrows to make room, for controls you use while
+     * watching the page change (a font panel). Below `lg` it's the overlay **Panel** either way.
+     */
+    asideMode?: AppShellAsideMode;
     /** Aside open — controlled. */
     asideOpen?: boolean;
     defaultAsideOpen?: boolean;
     onAsideOpenChange?: (open: boolean) => void;
     labels?: Partial<AppShellLabels>;
+    /**
+     * The phone menu button (below `lg`): `icon` (default) or `label`, the icon plus `labels.menu` as visible
+     * text ("Patterns"), when the glyph alone wouldn't say what the menu holds.
+     */
+    menuButton?: AppShellMenuButton;
     /** Page content. **AppShell.Brand**, **Sidebar**, **Header**, and **Aside** children fill their slots instead. */
     children?: ReactNode;
     className?: AppShellLayoutClassName;
@@ -68,10 +83,11 @@ export interface AppShellContextValue {
 }
 /** State of the nearest **AppShell** — for a header button that opens the aside. */
 export declare function useAppShell(): AppShellContextValue;
-declare function AppShellRoot({ title, brand: brandProp, sidebar: sidebarProp, sidebarFooter: sidebarFooterProp, header: headerProp, aside: asideProp, asideTitle, asideDescription, sidebarOpen: sidebarOpenProp, defaultSidebarOpen, onSidebarOpenChange, asideOpen: asideOpenProp, defaultAsideOpen, onAsideOpenChange, labels: labelsProp, children, className, }: AppShellProps): import("react").JSX.Element;
+declare function AppShellRoot({ title, brand: brandProp, sidebar: sidebarProp, sidebarFooter: sidebarFooterProp, header: headerProp, aside: asideProp, asideTitle, asideDescription, sidebarOpen: sidebarOpenProp, defaultSidebarOpen, onSidebarOpenChange, asideOpen: asideOpenProp, defaultAsideOpen, onAsideOpenChange, asideMode, menuButton, labels: labelsProp, children, className, }: AppShellProps): import("react").JSX.Element;
 /**
  * App chrome — a sidebar on the page background and the page as an inset, raised surface with a
- * title bar. Below `lg` the sidebar is a start **Sheet**; the optional aside is a non-blocking **Panel**.
+ * title bar. Below `lg` the sidebar is a start **Sheet**; the optional aside is a non-blocking **Panel**,
+ * or with `asideMode="docked"`, from `lg`, a column beside the page.
  */
 export declare const AppShell: typeof AppShellRoot & {
     Brand: typeof AppShellBrand;

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/AppShell/AppShell.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/AppShell/AppShell.tsx"],"names":[],"mappings":"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"}

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

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

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

@@ -7,8 +7,13 @@ export declare const appShellBrandClasses: string;
 export declare const appShellSidebarBodyClasses = "min-h-0 flex-1 overflow-y-auto";
 /** Pinned under the scrolling nav — the same 16px inset as the brand row. */
 export declare const appShellSidebarFooterClasses = "box-border shrink-0 px-4 py-3";
-/** 8px inset around the raised surface. */
-export declare const appShellCanvasClasses = "flex min-h-0 min-w-0 flex-1 p-2";
+/** 8px inset around the raised surface (and a docked aside beside it, 8px apart). */
+export declare const appShellCanvasClasses = "flex min-h-0 min-w-0 flex-1 gap-2 p-2";
+/**
+ * `asideMode="docked"` from `lg`: a second raised surface beside the page, which narrows to make room,
+ * so the page stays visible and usable while the aside is open (live controls, a font panel).
+ */
+export declare const appShellAsideDockedClasses: string;
 /** Raised surface — the Card shell radius and the soft card shadow. */
 export declare const appShellSurfaceClasses: string;
 /** First tab stop: hidden until focused, then pinned over the top-start corner. */

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,2CAA2C;AAC3C,eAAO,MAAM,qBAAqB,oCAAoC,CAAC;AAEvE,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"}

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 p-2", l = e("flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-surface shadow-soft-card", t.rounded), u = "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", d = "min-h-0 flex-1 overflow-y-auto px-[var(--grid-margin)] py-6 focus-visible:outline-none", f = "max-lg:!hidden", p = "lg:!hidden", m = "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";
 //#endregion
-export { a as appShellBrandClasses, c as appShellCanvasClasses, d as appShellMainClasses, r as appShellRootClasses, m as appShellSheetBodyClasses, o as appShellSidebarBodyClasses, i as appShellSidebarClasses, s as appShellSidebarFooterClasses, u as appShellSkipLinkClasses, l as appShellSurfaceClasses, f as appShellToggleDesktopClasses, p as appShellToggleMobileClasses };
+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 };