@thewhatmatters/wmds 0.4.9 → 0.4.28

package/dist/components/molecules/TextSequence/TextSequence.js

@@ -12,19 +12,19 @@ import { SplitText as g } from "gsap/SplitText";
 import { useGSAP as _ } from "@gsap/react";
 //#region src/components/molecules/TextSequence/TextSequence.tsx
 h.registerPlugin(g, _);
-var v = ["mount", "inView"], y = ["alternate", "none"], b = .07, x = 0, S = .72, C = .55, w = 8, T = 1.4;
-function E(e) {
+var v = ["mount", "inView"], y = ["alternate", "none"], b = .07, x = 0, S = .72, C = .55, w = 8, T = 1.4, E = "0.08em";
+function D(e) {
 	return d(e) && e.type === a;
 }
-function D(e) {
+function O(e) {
 	if (!d(e) || e.type !== "span") return !1;
 	let t = e.props.className;
 	return typeof t == "string" && t.split(/\s+/).includes("whitespace-nowrap");
 }
-function O(e) {
-	return k(e, "none").plain;
+function k(e) {
+	return A(e, "none").plain;
 }
-function k(e, t) {
+function A(e, t) {
 	let n = [], r = [], i = 0, o = (e) => {
 		let a = t === "alternate" ? i % 2 == 1 ? s : c : void 0;
 		n.push(/* @__PURE__ */ m("span", {
@@ -48,7 +48,7 @@ function k(e, t) {
 					f(e.props.children);
 					return;
 				}
-				if (D(e)) {
+				if (O(e)) {
 					let t = n.length;
 					f(e.props.children);
 					let r = n.splice(t);
@@ -58,7 +58,7 @@ function k(e, t) {
 					}, `keep-${i}`));
 					return;
 				}
-				if (E(e)) {
+				if (D(e)) {
 					n.push(e.key == null ? /* @__PURE__ */ m(a, { ...e.props }, `s-${n.length}`) : e);
 					return;
 				}
@@ -72,37 +72,37 @@ function k(e, t) {
 		signature: `${t}:${r.join("
")}:${n.length}`
 	};
 }
-function A() {
+function j() {
 	return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function j(e, t) {
+function M(e, t) {
 	let n = 0;
 	for (let r of t) if (e.compareDocumentPosition(r) & Node.DOCUMENT_POSITION_PRECEDING) n += 1;
 	else break;
 	return n;
 }
-function M(e, t) {
+function N(e, t) {
 	return e <= 0 ? 0 : (e - .5) * t;
 }
-var N = "data-text-sequence-hand-anchor";
-function P(e) {
+var P = "data-text-sequence-hand-anchor";
+function F(e) {
 	let t = [...e.querySelectorAll("[data-rive-hand-slot]")];
 	for (let e of t) {
 		let t = document.createElement("span");
-		t.setAttribute(N, e.getAttribute("data-rive-hand-slot") ?? ""), t.setAttribute("aria-hidden", "true"), t.className = e.className, t.style.width = e.style.width, e.replaceWith(t);
+		t.setAttribute(P, e.getAttribute("data-rive-hand-slot") ?? ""), t.setAttribute("aria-hidden", "true"), t.className = e.className, t.style.width = e.style.width, e.replaceWith(t);
 	}
 	return t;
 }
-function F(e, t) {
-	[...e.querySelectorAll(`[${N}]`)].forEach((e, n) => {
+function I(e, t) {
+	[...e.querySelectorAll(`[${P}]`)].forEach((e, n) => {
 		let r = t[n];
 		r && e.replaceWith(r);
 	});
 }
-function I(e) {
+function L(e) {
 	for (let n of e) n.removeAttribute(t);
 }
-function L(e, r) {
+function R(e, r) {
 	let { stagger: i, delay: a, idle: o, lines: s, plain: c, hands: l } = r;
 	return g.create(e, {
 		type: s ? "words,lines" : "words",
@@ -111,9 +111,9 @@ function L(e, r) {
 		autoSplit: s,
 		aria: "auto",
 		reduceWhiteSpace: !0,
-		ignore: `[${N}]`,
+		ignore: `[${P}]`,
 		onSplit(r) {
-			F(e, l), r.elements.forEach((e) => {
+			I(e, l), r.elements.forEach((e) => {
 				let t = e.closest("h1, h2, h3, h4, h5, h6");
 				if (t instanceof HTMLElement && t !== e) {
 					let n = [...t.querySelectorAll("[data-text-sequence]")].map((e) => e.getAttribute("data-plain")).filter((e) => !!e);
@@ -129,7 +129,7 @@ function L(e, r) {
 			}
 			for (let e of r.masks) {
 				let t = e;
-				t.style.display = "inline-block", t.style.position = "relative", t.style.verticalAlign = "baseline";
+				t.style.display = "inline-block", t.style.position = "relative", t.style.verticalAlign = "baseline", t.style.padding = `${E} ${E} 0`, t.style.margin = `-${E} -${E} 0`;
 			}
 			let s = [...e.querySelectorAll("[data-text-sequence-shape]")], u = h.timeline({ delay: a });
 			if (r.words.forEach((e, t) => {
@@ -140,7 +140,7 @@ function L(e, r) {
 					immediateRender: !0
 				}, t * i);
 			}), s.forEach((e) => {
-				let t = j(e, r.words), n = e.dataset.variant === "asterisk";
+				let t = M(e, r.words), n = e.dataset.variant === "asterisk";
 				u.from(e, {
 					scale: 0,
 					rotation: n ? -80 : -16,
@@ -148,11 +148,11 @@ function L(e, r) {
 					ease: "back.out(1.8)",
 					transformOrigin: "50% 50%",
 					immediateRender: !0
-				}, M(t, i));
+				}, N(t, i));
 			}), [...e.querySelectorAll("[data-rive-hand-pop]")].forEach((e) => {
 				let a = e.closest("[data-rive-hand-slot]") ?? e;
 				a.removeAttribute(t);
-				let o = j(a, r.words);
+				let o = M(a, r.words);
 				u.from(e, {
 					scale: 0,
 					rotation: -16,
@@ -163,7 +163,7 @@ function L(e, r) {
 					onComplete() {
 						Number(h.getProperty(e, "scale")) > .99 && a.setAttribute(t, "true");
 					}
-				}, M(o, i));
+				}, N(o, i));
 			}), o && s.length > 0) {
 				let e = u.duration(), t = s.filter((e) => e.dataset.variant === "asterisk"), n = s.filter((e) => e.dataset.variant === "pill" || e.dataset.variant === "double-pill");
 				t.length > 0 && u.to(t, {
@@ -185,20 +185,20 @@ function L(e, r) {
 		}
 	});
 }
-function R({ children: t, stagger: n = b, delay: r = 0, trigger: i = "mount", idle: a = !1, lines: s = !0, emphasis: c = "alternate", className: l }) {
-	let u = f(null), [d] = p(() => k(t, c)), h = Math.max(0, n), g = Math.max(0, r);
+function z({ children: t, stagger: n = b, delay: r = 0, trigger: i = "mount", idle: a = !1, lines: s = !0, emphasis: c = "alternate", className: l }) {
+	let u = f(null), [d] = p(() => A(t, c)), h = Math.max(0, n), g = Math.max(0, r);
 	return _(() => {
 		let e = u.current;
 		if (!e) return;
 		let t = window.matchMedia("(prefers-reduced-motion: reduce)"), n, r, o = [], c = () => {
-			r?.disconnect(), r = void 0, n?.revert(), n = void 0, F(e, o), I(o), delete e.dataset.textSequenceState, e.dataset.textSequenceState = "rest";
+			r?.disconnect(), r = void 0, n?.revert(), n = void 0, I(e, o), L(o), delete e.dataset.textSequenceState, e.dataset.textSequenceState = "rest";
 		}, l = () => {
-			if (n || A()) {
+			if (n || j()) {
 				e.dataset.textSequenceState = "rest";
 				return;
 			}
-			let t = P(e);
-			t.length > 0 && (o = t), n = L(e, {
+			let t = F(e);
+			t.length > 0 && (o = t), n = R(e, {
 				stagger: h,
 				delay: g,
 				idle: a,
@@ -213,10 +213,10 @@ function R({ children: t, stagger: n = b, delay: r = 0, trigger: i = "mount", id
 			}
 			i === "mount" && l();
 		};
-		return A() ? e.dataset.textSequenceState = "rest" : i === "inView" ? (e.dataset.textSequenceState = "rest", typeof IntersectionObserver == "function" && (r = new IntersectionObserver((e) => {
+		return j() ? e.dataset.textSequenceState = "rest" : i === "inView" ? (e.dataset.textSequenceState = "rest", typeof IntersectionObserver == "function" && (r = new IntersectionObserver((e) => {
 			e.some((e) => e.isIntersecting) && (r?.disconnect(), r = void 0, l());
 		}, { threshold: .35 }), r.observe(e))) : l(), t.addEventListener("change", f), () => {
-			t.removeEventListener("change", f), r?.disconnect(), n?.revert(), F(e, o), I(o);
+			t.removeEventListener("change", f), r?.disconnect(), n?.revert(), I(e, o), L(o);
 		};
 	}, {
 		scope: u,
@@ -237,6 +237,6 @@ function R({ children: t, stagger: n = b, delay: r = 0, trigger: i = "mount", id
 		children: d.nodes
 	});
 }
-var z = Object.assign(R, { Shape: a });
+var B = Object.assign(z, { Shape: a });
 //#endregion
-export { z as TextSequence, O as sequencePlainText, x as textSequenceDefaultDelay, b as textSequenceDefaultStagger, y as textSequenceEmphases, r as textSequenceShapeTones, i as textSequenceShapeVariants, v as textSequenceTriggers };
+export { B as TextSequence, k as sequencePlainText, x as textSequenceDefaultDelay, b as textSequenceDefaultStagger, y as textSequenceEmphases, r as textSequenceShapeTones, i as textSequenceShapeVariants, v as textSequenceTriggers };

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

@@ -0,0 +1,84 @@
+import { type ReactNode } from "react";
+/** Layout-only — height and placement of the shell. */
+export type AppShellLayoutClassName = string;
+export interface AppShellLabels {
+    /** Accessible name and tooltip of the collapse toggle while the sidebar is open. */
+    collapse: string;
+    /** Accessible name and tooltip of the collapse toggle while the sidebar is collapsed. */
+    expand: string;
+    /** Name of the phone menu button and the **Sheet** title. */
+    menu: string;
+    /** Default title of the aside **Panel**. */
+    aside: string;
+    /** The skip link, the first tab stop, which moves focus to the page content. */
+    skipToContent: string;
+}
+export interface AppShellProps {
+    /** Page title — the `h1` in the title bar. */
+    title: string;
+    /** Brand row at the top of the sidebar — wordmark or **Avatar** + name. Same 56px band as the title bar. */
+    brand?: ReactNode;
+    /** Sidebar body — a **NavList**. Omit it for a shell with no sidebar. */
+    sidebar?: ReactNode;
+    /** Pinned to the bottom of the sidebar and the phone menu while the **NavList** above it scrolls — a **DisplayControls** `controls="theme"` switch, an account row. */
+    sidebarFooter?: ReactNode;
+    /** Trailing title-bar controls — **Button**, **Avatar**, **MoreMenu** at one cluster tier. */
+    header?: ReactNode;
+    /** Right slide-out content, in a non-blocking **Panel**. Omit it for no aside. */
+    aside?: ReactNode;
+    /** Title of the aside **Panel**. Defaults to `labels.aside`. */
+    asideTitle?: ReactNode;
+    asideDescription?: ReactNode;
+    /** Desktop sidebar expanded — controlled. */
+    sidebarOpen?: boolean;
+    defaultSidebarOpen?: boolean;
+    onSidebarOpenChange?: (open: boolean) => void;
+    /** Aside open — controlled. */
+    asideOpen?: boolean;
+    defaultAsideOpen?: boolean;
+    onAsideOpenChange?: (open: boolean) => void;
+    labels?: Partial<AppShellLabels>;
+    /** Page content. **AppShell.Brand**, **Sidebar**, **Header**, and **Aside** children fill their slots instead. */
+    children?: ReactNode;
+    className?: AppShellLayoutClassName;
+}
+interface AppShellSlotProps {
+    children?: ReactNode;
+}
+interface AppShellAsideSlotProps extends AppShellSlotProps {
+    title?: ReactNode;
+    description?: ReactNode;
+}
+declare function AppShellBrand({ children }: AppShellSlotProps): import("react").JSX.Element;
+declare function AppShellSidebar({ children }: AppShellSlotProps): import("react").JSX.Element;
+declare function AppShellSidebarFooter({ children }: AppShellSlotProps): import("react").JSX.Element;
+declare function AppShellHeader({ children }: AppShellSlotProps): import("react").JSX.Element;
+declare function AppShellAside({ children }: AppShellAsideSlotProps): import("react").JSX.Element;
+export interface AppShellContextValue {
+    /** Desktop sidebar is expanded. */
+    sidebarOpen: boolean;
+    setSidebarOpen: (open: boolean) => void;
+    /** Phone menu **Sheet** is open. */
+    menuOpen: boolean;
+    setMenuOpen: (open: boolean) => void;
+    asideOpen: boolean;
+    setAsideOpen: (open: boolean) => void;
+    /** Collapses or expands the sidebar from `lg`; opens or closes the menu below it. */
+    toggleSidebar: () => void;
+}
+/** 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;
+/**
+ * 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**.
+ */
+export declare const AppShell: typeof AppShellRoot & {
+    Brand: typeof AppShellBrand;
+    Sidebar: typeof AppShellSidebar;
+    SidebarFooter: typeof AppShellSidebarFooter;
+    Header: typeof AppShellHeader;
+    Aside: typeof AppShellAside;
+};
+export {};
+//# sourceMappingURL=AppShell.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,231 @@
+"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";
+//#region src/components/organisms/AppShell/AppShell.tsx
+var fe = {
+	collapse: "Collapse sidebar",
+	expand: "Expand sidebar",
+	menu: "Menu",
+	aside: "Details",
+	skipToContent: "Skip to content"
+};
+function x({ children: e }) {
+	return /* @__PURE__ */ y(v, { children: e });
+}
+function S({ children: e }) {
+	return /* @__PURE__ */ y(v, { children: e });
+}
+function C({ children: e }) {
+	return /* @__PURE__ */ y(v, { children: e });
+}
+function w({ children: e }) {
+	return /* @__PURE__ */ y(v, { children: e });
+}
+function T({ children: e }) {
+	return /* @__PURE__ */ y(v, { children: e });
+}
+var E = l(null);
+function D() {
+	let e = f(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) => {
+		e ?? i(t), n?.(t);
+	}, [e, n])];
+}
+var k = "(min-width: 1024px)";
+function pe(e) {
+	return e instanceof HTMLElement && e.isContentEditable;
+}
+function me(e) {
+	let t = { content: [] };
+	return c.forEach(e, (e) => {
+		if (!u(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 }) {
+	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(() => {
+		let e = window.matchMedia(k);
+		function t(e) {
+			e.matches && W(!1);
+		}
+		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []), p(() => {
+		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());
+		}
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [R, Y]);
+	let xe = m(() => ({
+		sidebarOpen: z,
+		setSidebarOpen: J,
+		menuOpen: U,
+		setMenuOpen: W,
+		asideOpen: V,
+		setAsideOpen: H,
+		toggleSidebar: Y
+	}), [
+		V,
+		U,
+		H,
+		J,
+		z,
+		Y
+	]);
+	function Se(e) {
+		e.target.closest("nav a[href], nav button") != null && W(!1);
+	}
+	let X = z ? M.collapse : M.expand, Z = `${G}-main`, Q = P == null ? null : /* @__PURE__ */ y("div", {
+		className: ee,
+		children: P
+	}), $ = I == null ? null : /* @__PURE__ */ y("div", {
+		className: oe,
+		children: I
+	}), Ce = R ? /* @__PURE__ */ b(r.Provider, { children: [/* @__PURE__ */ b(r, { children: [/* @__PURE__ */ y(r.Trigger, { render: /* @__PURE__ */ y(t, {
+		ref: q,
+		role: "ghost",
+		size: "sm",
+		title: "",
+		icon: /* @__PURE__ */ y(_, { strokeWidth: 2 }),
+		"aria-label": X,
+		"aria-expanded": z,
+		"aria-controls": G,
+		"aria-keyshortcuts": "Control+B Meta+B",
+		className: le,
+		onClick: () => J(!z)
+	}) }), /* @__PURE__ */ y(r.Content, { children: /* @__PURE__ */ b("span", {
+		className: "inline-flex items-center gap-2",
+		children: [
+			X,
+			/* @__PURE__ */ y(n, {
+				size: "sm",
+				children: "Ctrl"
+			}),
+			/* @__PURE__ */ y(n, {
+				size: "sm",
+				children: "B"
+			})
+		]
+	}) })] }), /* @__PURE__ */ y(t, {
+		role: "ghost",
+		size: "sm",
+		icon: /* @__PURE__ */ y(_, { strokeWidth: 2 }),
+		"aria-label": M.menu,
+		"aria-expanded": U,
+		"aria-haspopup": "dialog",
+		"aria-keyshortcuts": "Control+B Meta+B",
+		className: ue,
+		onClick: () => W(!0)
+	})] }) : null;
+	return /* @__PURE__ */ y(E.Provider, {
+		value: xe,
+		children: /* @__PURE__ */ b("div", {
+			className: e(re, ve),
+			children: [
+				/* @__PURE__ */ y("a", {
+					href: `#${Z}`,
+					className: se,
+					onClick: (e) => {
+						e.preventDefault(), document.getElementById(Z)?.focus();
+					},
+					children: M.skipToContent
+				}),
+				R ? /* @__PURE__ */ b("div", {
+					ref: K,
+					id: G,
+					className: e(ae, !z && "lg:!hidden"),
+					children: [
+						Q,
+						/* @__PURE__ */ y("div", {
+							className: s,
+							children: F
+						}),
+						$
+					]
+				}) : null,
+				/* @__PURE__ */ y("div", {
+					className: te,
+					children: /* @__PURE__ */ b("div", {
+						className: ce,
+						children: [/* @__PURE__ */ y(i, {
+							variant: "app",
+							title: c,
+							"aria-label": c,
+							start: Ce,
+							end: ye
+						}), /* @__PURE__ */ y("main", {
+							id: Z,
+							tabIndex: -1,
+							className: ne,
+							children: N.content
+						})]
+					})
+				}),
+				R ? /* @__PURE__ */ y(o, {
+					open: U,
+					onOpenChange: W,
+					children: /* @__PURE__ */ y(o.Content, {
+						side: "start",
+						title: M.menu,
+						children: /* @__PURE__ */ b("div", {
+							className: ie,
+							onClick: Se,
+							children: [
+								Q,
+								/* @__PURE__ */ y("div", {
+									className: s,
+									children: F
+								}),
+								$
+							]
+						})
+					})
+				}) : null,
+				be ? /* @__PURE__ */ y(a, {
+					open: V,
+					onOpenChange: H,
+					children: /* @__PURE__ */ y(a.Content, {
+						side: "end",
+						title: S ?? N.aside?.title ?? M.aside,
+						description: C ?? N.aside?.description,
+						children: L
+					})
+				}) : null
+			]
+		})
+	});
+}
+var j = Object.assign(A, {
+	Brand: x,
+	Sidebar: S,
+	SidebarFooter: C,
+	Header: w,
+	Aside: T
+});
+//#endregion
+export { j as AppShell, D as useAppShell };

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

@@ -0,0 +1,20 @@
+/** Page canvas — the sidebar sits directly on `bg-body`. */
+export declare const appShellRootClasses = "flex h-full min-h-0 w-full bg-body font-sans text-fg";
+/** Sidebar column from `lg`; below it the same content opens in a start **Sheet**. */
+export declare const appShellSidebarClasses = "flex h-full min-h-0 w-60 shrink-0 flex-col pt-2 max-lg:!hidden";
+/** Same 56px band token as the title bar — their bottom edges align. */
+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";
+/** 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. */
+export declare const appShellSkipLinkClasses: string;
+export declare const appShellMainClasses = "min-h-0 flex-1 overflow-y-auto px-[var(--grid-margin)] py-6 focus-visible:outline-none";
+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";
+//# sourceMappingURL=appShellStyles.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,8 @@
+"use client";
+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";
+//#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 };

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

@@ -6,6 +6,8 @@ export type CarouselLayoutClassName = string;
 export interface CarouselLabels {
     /** Names each item by its place. Default: "2 of 4". */
     item: (position: number, count: number) => string;
+    /** The visible counter under the row. Default: "1 of 6". */
+    counter: (position: number, count: number) => string;
 }
 /** The row is a labelled region: name it, or point at the heading that does. */
 type CarouselName = {
@@ -33,6 +35,12 @@ interface CarouselBaseProps {
      * `full` row width, or `none`. It hides itself while every item fits.
      */
     progress?: CarouselProgressPlacement;
+    /** Show "1 of 6" under the row, announced politely as it changes. Hidden while every item fits. Default: `false`. */
+    counter?: boolean;
+    /** Fires with the 0-based index and the item count when the item the row rests on changes. */
+    onIndexChange?: (index: number, count: number) => void;
+    /** Controlled: the row moves to this item (0-based) when it changes. */
+    activeIndex?: number;
     labels?: Partial<CarouselLabels>;
     /** **Carousel.Item** children, one per item. */
     children?: ReactNode;
@@ -50,7 +58,7 @@ export interface CarouselItemProps {
  * shift-wheel scrolling come from the browser; the pointer drag, the glide, and the scrubber are
  * built on it.
  */
-declare function CarouselRoot({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, itemWidth, snap, bleed, fade, progress, labels, children, className, }: CarouselProps): import("react").JSX.Element;
+declare function CarouselRoot({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, itemWidth, snap, bleed, fade, progress, counter, onIndexChange, activeIndex, labels, children, className, }: CarouselProps): import("react").JSX.Element;
 declare function CarouselItem({ children, className }: CarouselItemProps): import("react").JSX.Element;
 export declare const Carousel: typeof CarouselRoot & {
     Item: typeof CarouselItem;

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAeL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAwBf,OAAO,EAeL,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,EAC/B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,GAC/B,MAAM,kBAAkB,CAAC;AAE1B,sDAAsD;AACtD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,cAAc;IAC7B,uDAAuD;IACvD,IAAI,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACnD;AAED,gFAAgF;AAChF,KAAK,YAAY,GACb;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExD,UAAU,iBAAiB;IACzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,iGAAiG;IACjG,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0FAA0F;IAC1F,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACjC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,YAAY,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAkED;;;;;GAKG;AACH,iBAAS,YAAY,CAAC,EACpB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAoC,EACpC,IAAW,EACX,KAAa,EACb,IAAW,EACX,QAAmB,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,aAAa,+BA0Yf;AAOD,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAO/D;AAED,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAeL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAyBf,OAAO,EAgBL,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,EAC/B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,GAC/B,MAAM,kBAAkB,CAAC;AAE1B,sDAAsD;AACtD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,cAAc;IAC7B,uDAAuD;IACvD,IAAI,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD,4DAA4D;IAC5D,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACtD;AAED,gFAAgF;AAChF,KAAK,YAAY,GACb;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExD,UAAU,iBAAiB;IACzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,iGAAiG;IACjG,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0FAA0F;IAC1F,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,qHAAqH;IACrH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8FAA8F;IAC9F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACjC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,YAAY,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAwED;;;;;GAKG;AACH,iBAAS,YAAY,CAAC,EACpB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAoC,EACpC,IAAW,EACX,KAAa,EACb,IAAW,EACX,QAAmB,EACnB,OAAe,EACf,aAAa,EACb,WAAW,EACX,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,aAAa,+BAkcf;AAOD,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAO/D;AAED,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}