themelia-react-ui 2.0.6 → 3.0.0

package/dist/app-shell-CPN30Nb1.js

@@ -0,0 +1,372 @@
+"use client";
+import { i as e, o as t } from "./ui-provider-Bu1S-o96.js";
+import { t as n } from "./utils-BVbAG2J6.js";
+import { n as r } from "./focus-recipes-DSkiUvUp.js";
+import { n as i } from "./buttons-pZVgPTZn.js";
+import { t as a } from "./structure-DElaQwwN.js";
+import { t as o } from "./composition.recipes-COdiFhxB.js";
+import { t as s } from "./layer-recipes-CCpklYME.js";
+import { S as c } from "./sidebar-C-iQ_TJP.js";
+import { t as l } from "./container.recipes-D9t8MHR3.js";
+import { i as u, r as d } from "./containers-BdfLTP4w.js";
+import { n as f } from "./main-landmark-context-BAsyqp2I.js";
+import { n as p } from "./header.recipes-BigdJjw1.js";
+import { t as m } from "./inline-gutter-context-CSqmrMFZ.js";
+import { useId as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/layout/app-shell/shell-regions.tsx
+var y = {
+	plain: "bg-background text-foreground",
+	inset: "bg-card text-card-foreground md:m-space-md md:overflow-hidden md:rounded-surface md:border md:border-border md:shadow-sm"
+};
+function b({ children: e, sidebar: t, secondarySidebar: r, aside: i, side: a = "left", primaryWidth: o, secondaryWidth: l, asideWidth: u, presentation: d = "panel", inlinePrimary: f = !1, className: p, mainClassName: m, sidebarClassName: h, secondarySidebarClassName: y, asideClassName: b }) {
+	let x = !!t, S = !!r, C = !!i, w = x || S || C, T = a === "right", E = f && d !== "rail", D = f && d === "rail" && S, O = w ? D ? T ? "grid-cols-[auto_minmax(20rem,1fr)_auto_auto]" : "grid-cols-[auto_auto_minmax(20rem,1fr)_auto]" : T ? "grid-cols-[auto_minmax(0,1fr)_auto_auto]" : "grid-cols-[auto_auto_minmax(0,1fr)_auto]" : "grid-cols-1", k = x && /* @__PURE__ */ _(c, {
+		panelId: "primary",
+		dockAt: f || d === "rail" ? 0 : 768,
+		presentation: d,
+		side: a,
+		width: o,
+		className: n("row-start-1", T ? "col-start-4" : "col-start-1", D && [
+			"sticky",
+			T ? "right-0" : "left-0",
+			s.sticky
+		], E && (T ? "max-md:col-start-1 max-md:row-start-2" : "max-md:col-start-1"), h),
+		children: t
+	}), A = S && /* @__PURE__ */ _(c, {
+		panelId: "secondary",
+		dockAt: f ? 0 : x && d === "rail" ? 768 : 1024,
+		side: a,
+		width: l,
+		className: n("row-start-1", T ? "col-start-3" : "col-start-2", y),
+		children: r
+	}), j = C && /* @__PURE__ */ _(c, {
+		panelId: "aside",
+		dockAt: 1440,
+		side: T ? "left" : "right",
+		width: u,
+		className: n("row-start-1", T ? "col-start-1" : "col-start-4", b),
+		children: i
+	}), M = /* @__PURE__ */ _("div", {
+		className: n("shell-regions--main row-start-1 flex min-h-0 min-w-0 flex-col", w && (T ? "col-start-2" : "col-start-3"), E && (T ? "max-md:col-start-1" : "max-md:col-start-1 max-md:row-start-2"), m),
+		children: e
+	});
+	return /* @__PURE__ */ _("div", {
+		"data-shell-regions": "",
+		className: n("shell-regions--component grid min-h-0 min-w-0 flex-1 [direction:ltr] ltr:[&>*]:[direction:ltr] rtl:[&>*]:[direction:rtl]", D && "overflow-x-auto overflow-y-hidden overscroll-x-contain", O, E && "max-md:grid-cols-1", p),
+		children: T ? /* @__PURE__ */ v(g, { children: [
+			j,
+			M,
+			A,
+			k
+		] }) : /* @__PURE__ */ v(g, { children: [
+			k,
+			A,
+			M,
+			j
+		] })
+	});
+}
+function x() {
+	return /* @__PURE__ */ _("div", {
+		"aria-hidden": "true",
+		"data-slot": "shell-scrollbar-spacer",
+		className: "shell-scrollbar-spacer--component invisible h-0 shrink-0 self-start overflow-hidden [scrollbar-gutter:stable]"
+	});
+}
+//#endregion
+//#region src/components/layout/app-shell/shell-skip-link.tsx
+function S({ targetId: e, label: t }) {
+	return /* @__PURE__ */ _("div", {
+		className: "shell-skip-link--component relative size-0 shrink-0",
+		children: /* @__PURE__ */ _(i, {
+			href: `#${e}`,
+			tone: "secondary",
+			buttonStyle: "outline",
+			onClick: (t) => {
+				t.preventDefault(), document.getElementById(e)?.focus();
+			},
+			className: n("shell-skip-link--link absolute start-space-md top-space-md w-max max-w-none bg-background", r, s.overlay),
+			children: t
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/app-shell/topbar-sidebar-layout.tsx
+var C = {
+	light: "light",
+	dark: "dark"
+};
+function w({ children: r, headerTheme: i, contentSurface: s = "plain", sidebarSide: c = "left", mobileSidebarMode: l = "drawer", secondarySidebarWidth: u, asideWidth: m, sidebarPresentation: w, secondarySidebarClassName: T, asideClassName: E, sidebarTrigger: D, logo: O, headerActions: k, sidebar: A, slots: j, contentAs: M, skipToContentLabel: N, className: P, headerClassName: F, headerInnerClassName: I, bodyClassName: L, sidebarClassName: R, contentClassName: z, style: B, ...V }) {
+	let H = h(), U = f(), W = M ?? (U ? "div" : "main"), G = t(), K = s === "inset", q = j?.aside != null && j.aside !== !1, J = c === "left", Y = q ? w === "rail" ? "px-surface-xs" : "px-surface-lg @3xl/app-shell:px-surface-xs" : w === "rail" ? J ? "ps-surface-xs pe-surface-lg" : "ps-surface-lg pe-surface-xs" : n("px-surface-lg", J ? "@3xl/app-shell:ps-surface-xs" : "@3xl/app-shell:pe-surface-xs"), X = J && !q, Z = /* @__PURE__ */ _(d, {
+		render: /* @__PURE__ */ _(W, {}),
+		id: N ? H : void 0,
+		className: n("topbar-sidebar-layout--content", !K && "bg-background", z),
+		children: r
+	});
+	return /* @__PURE__ */ v("div", {
+		className: n("topbar-sidebar-layout--component @container/app-shell box-border isolate flex min-h-svh min-w-0 w-full flex-col overflow-hidden bg-background font-sans text-foreground", "shell-sidebar-vars", K && "bg-sidebar", P),
+		style: B,
+		"data-header-theme": i ?? "inherit",
+		"data-sidebar-side": c,
+		"data-mobile-sidebar-mode": l,
+		"data-content-surface": s,
+		...V,
+		children: [
+			!!N && /* @__PURE__ */ _(S, {
+				targetId: H,
+				label: N
+			}),
+			/* @__PURE__ */ _(e, {
+				value: G.context,
+				children: /* @__PURE__ */ v("header", {
+					ref: G.attachHost,
+					"data-theme-scope": "",
+					className: n("topbar-sidebar-layout--header box-border z-40 flex min-h-shell-header shrink-0 items-center border-b border-border bg-background py-space-sm text-foreground", Y, p, i && C[i], F),
+					children: [/* @__PURE__ */ _(a, {
+						direction: "horizontal",
+						align: "center",
+						gap: "md",
+						wrap: !0,
+						className: n("topbar-sidebar-layout--header-inner min-h-action w-full min-w-0", I),
+						children: j?.header ?? /* @__PURE__ */ v(g, { children: [
+							!!D && /* @__PURE__ */ _("div", {
+								className: "topbar-sidebar-layout--sidebar-trigger flex shrink-0 items-center",
+								children: D
+							}),
+							!!O && /* @__PURE__ */ _("div", {
+								className: "topbar-sidebar-layout--logo flex min-w-0 shrink-0 items-center",
+								children: O
+							}),
+							!!j?.headerStart && /* @__PURE__ */ _("div", {
+								className: "topbar-sidebar-layout--header-start flex min-w-0 items-center",
+								children: j.headerStart
+							}),
+							!!j?.headerCenter && /* @__PURE__ */ _("div", {
+								className: "topbar-sidebar-layout--header-center hidden min-w-0 flex-1 items-center @3xl/app-shell:flex",
+								children: j.headerCenter
+							}),
+							!!(k || j?.headerEnd) && /* @__PURE__ */ v("div", {
+								className: "topbar-sidebar-layout--header-trailing ms-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-space-sm @3xl/app-shell:gap-space-md [&>*]:max-w-full",
+								children: [!!k && /* @__PURE__ */ _("div", {
+									className: n("topbar-sidebar-layout--header-actions flex min-w-0 max-w-full flex-wrap items-center [&>*]:max-w-full", o.commands),
+									children: k
+								}), !!j?.headerEnd && /* @__PURE__ */ _("div", {
+									className: "topbar-sidebar-layout--header-end flex min-w-0 max-w-full flex-wrap items-center gap-space-sm @3xl/app-shell:gap-space-md [&>*]:max-w-full",
+									children: j.headerEnd
+								})]
+							})
+						] })
+					}), X && /* @__PURE__ */ _(x, {})]
+				})
+			}),
+			/* @__PURE__ */ _(b, {
+				side: c,
+				sidebar: A,
+				secondarySidebar: j?.secondarySidebar,
+				aside: j?.aside,
+				secondaryWidth: u,
+				asideWidth: m,
+				presentation: w,
+				inlinePrimary: l === "inline",
+				className: n("topbar-sidebar-layout--body", L),
+				mainClassName: n("topbar-sidebar-layout--main", y[s]),
+				sidebarClassName: n("topbar-sidebar-layout--sidebar min-h-0 min-w-0 overflow-hidden text-sidebar-foreground", K ? "bg-transparent" : "bg-sidebar", R),
+				secondarySidebarClassName: n("topbar-sidebar-layout--secondary-sidebar min-h-0 min-w-0 overflow-hidden text-sidebar-foreground", T),
+				asideClassName: n("topbar-sidebar-layout--aside min-h-0 min-w-0 overflow-hidden text-sidebar-foreground", E),
+				children: Z
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/layout/app-shell/sidebar-inset-layout.tsx
+function T({ children: e, sidebarSide: t = "left", surface: r = "inset", mobileSidebarMode: i = "drawer", toolbar: o = !0, secondarySidebarWidth: s, asideWidth: c, sidebarPresentation: l, secondarySidebarClassName: u, asideClassName: m, sidebar: g, sidebarTrigger: C, slots: w, contentAs: T, skipToContentLabel: E, className: D, sidebarClassName: O, toolbarClassName: k, contentClassName: A, style: j, ...M }) {
+	let N = h(), P = f(), F = T ?? (P ? "div" : "main"), I = r === "inset", L = I && "md:border-t md:border-transparent md:pt-space-md md:has-[[data-variant=floating]]:border-t-0 md:has-[[data-variant=floating]]:pt-0", R = o ? /* @__PURE__ */ v("header", {
+		className: n("sidebar-inset-layout--toolbar @container/toolbar box-border flex min-h-shell-header shrink-0 items-center px-surface-lg py-space-sm", p, "border-b border-border", k),
+		children: [/* @__PURE__ */ _("div", {
+			className: "sidebar-inset-layout--toolbar-row flex min-w-0 flex-1 items-center gap-space-md",
+			children: w?.toolbar ?? /* @__PURE__ */ v(a, {
+				direction: "horizontal",
+				align: "center",
+				gap: "md",
+				wrap: !0,
+				className: "sidebar-inset-layout--toolbar-inner min-h-action w-full min-w-0",
+				children: [
+					!!C && /* @__PURE__ */ _("div", {
+						className: "sidebar-inset-layout--sidebar-trigger flex shrink-0 items-center",
+						children: C
+					}),
+					!!w?.toolbarStart && /* @__PURE__ */ _("div", {
+						className: "sidebar-inset-layout--toolbar-start flex min-w-0 flex-1 basis-24 items-center [&>*]:min-w-0 [&>*]:max-w-full",
+						children: w.toolbarStart
+					}),
+					!!w?.toolbarEnd && /* @__PURE__ */ _("div", {
+						className: "sidebar-inset-layout--toolbar-end ms-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-space-sm [&>*]:max-w-full",
+						children: w.toolbarEnd
+					})
+				]
+			})
+		}), /* @__PURE__ */ _(x, {})]
+	}) : null, z = /* @__PURE__ */ v("div", {
+		className: n("sidebar-inset-layout--main flex min-h-0 min-w-0 flex-1 flex-col", y[I ? "inset" : "plain"]),
+		children: [R, /* @__PURE__ */ _(d, {
+			render: /* @__PURE__ */ _(F, {}),
+			id: E ? N : void 0,
+			className: n("sidebar-inset-layout--content", A),
+			children: e
+		})]
+	});
+	return /* @__PURE__ */ v("div", {
+		className: n("sidebar-inset-layout--component box-border isolate flex min-h-svh min-w-0 w-full overflow-hidden font-sans text-foreground shell-sidebar-vars", I ? "bg-sidebar" : "bg-background", D),
+		style: j,
+		"data-sidebar-side": t,
+		"data-surface": r,
+		"data-mobile-sidebar-mode": i,
+		...M,
+		children: [!!E && /* @__PURE__ */ _(S, {
+			targetId: N,
+			label: E
+		}), /* @__PURE__ */ _(b, {
+			side: t,
+			sidebar: g,
+			secondarySidebar: w?.secondarySidebar,
+			aside: w?.aside,
+			secondaryWidth: s,
+			asideWidth: c,
+			presentation: l,
+			inlinePrimary: i === "inline",
+			sidebarClassName: n("sidebar-inset-layout--sidebar min-h-0 min-w-0 overflow-hidden text-sidebar-foreground", I ? "bg-transparent" : "bg-sidebar", L, O),
+			secondarySidebarClassName: n("sidebar-inset-layout--secondary-sidebar min-h-0 min-w-0 overflow-hidden text-sidebar-foreground", L, u),
+			asideClassName: n("sidebar-inset-layout--aside min-h-0 min-w-0 overflow-hidden text-sidebar-foreground", m),
+			children: z
+		})]
+	});
+}
+//#endregion
+//#region src/components/layout/app-shell/stacked-layout.tsx
+var E = {
+	light: "light",
+	dark: "dark"
+};
+function D({ children: r, headerTheme: i, contentWidth: o = "contained", asideWidth: s, asideClassName: c, logo: y, nav: C, navLabel: w = "Primary navigation", navAs: T = "nav", slots: D, contentAs: O, skipToContentLabel: k, className: A, headerClassName: j, subheaderClassName: M, contentClassName: N, style: P, ...F }) {
+	let I = h(), L = f(), R = O ?? (L ? "div" : "main"), z = t(), B = n("min-w-0 flex-1", l({
+		maxWidth: o === "contained" ? "2xl" : "full",
+		gutter: "lg"
+	})), V = !D?.aside;
+	return /* @__PURE__ */ v("div", {
+		className: n("stacked-layout--component @container/stacked-shell box-border isolate flex min-h-svh min-w-0 w-full flex-col bg-background font-sans text-foreground", A),
+		style: P,
+		"data-header-theme": i ?? "inherit",
+		"data-content-width": o,
+		...F,
+		children: [
+			!!k && /* @__PURE__ */ _(S, {
+				targetId: I,
+				label: k
+			}),
+			/* @__PURE__ */ _(e, {
+				value: z.context,
+				children: /* @__PURE__ */ v("header", {
+					ref: z.attachHost,
+					"data-theme-scope": "",
+					className: n("stacked-layout--header box-border z-40 flex shrink-0 items-center border-b border-border bg-background py-space-sm text-foreground @5xl/stacked-shell:min-h-shell-header @5xl/stacked-shell:py-0", p, i && E[i], j),
+					children: [/* @__PURE__ */ _("div", {
+						className: n("stacked-layout--header-measure", B),
+						children: /* @__PURE__ */ _(a, {
+							direction: "horizontal",
+							align: "center",
+							gap: "lg",
+							wrap: !0,
+							className: "stacked-layout--header-inner min-h-action w-full min-w-0 @5xl/stacked-shell:flex-nowrap @5xl/stacked-shell:gap-space-2xl",
+							children: D?.header ?? /* @__PURE__ */ v(g, { children: [
+								!!y && /* @__PURE__ */ _("div", {
+									className: "stacked-layout--logo flex min-w-0 shrink-0 items-center @5xl/stacked-shell:order-1",
+									children: y
+								}),
+								!!C && /* @__PURE__ */ _(T, {
+									"aria-label": T === "nav" ? w : void 0,
+									onFocusCapture: (e) => {
+										let t = e.currentTarget;
+										if (!t.contains(e.target)) return;
+										let n = t.getBoundingClientRect(), r = e.target.getBoundingClientRect(), i = getComputedStyle(t), a = n.left + (parseFloat(i.paddingLeft) || 0), o = n.right - (parseFloat(i.paddingRight) || 0);
+										r.left < a ? t.scrollLeft += r.left - a : r.right > o && (t.scrollLeft += r.right - o);
+									},
+									className: "stacked-layout--nav order-last flex w-full min-w-0 flex-nowrap items-center overflow-x-auto p-space-sm @5xl/stacked-shell:order-2 @5xl/stacked-shell:w-auto @5xl/stacked-shell:flex-1 [&>*]:shrink-0 [&>*]:flex-nowrap",
+									children: C
+								}),
+								!!D?.headerEnd && /* @__PURE__ */ _("div", {
+									className: "stacked-layout--header-end ms-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-space-sm @5xl/stacked-shell:order-3 @5xl/stacked-shell:gap-space-md [&>*]:max-w-full",
+									children: D.headerEnd
+								})
+							] })
+						})
+					}), V && /* @__PURE__ */ _(x, {})]
+				})
+			}),
+			!!D?.subheader && /* @__PURE__ */ v("div", {
+				className: n("stacked-layout--subheader flex shrink-0 border-b border-border bg-background", M),
+				children: [/* @__PURE__ */ _("div", {
+					className: n("stacked-layout--subheader-measure", B),
+					children: D.subheader
+				}), V && /* @__PURE__ */ _(x, {})]
+			}),
+			/* @__PURE__ */ _(b, {
+				aside: D?.aside,
+				asideWidth: s,
+				asideClassName: n("stacked-layout--aside min-h-0 min-w-0 overflow-hidden text-sidebar-foreground", c),
+				children: /* @__PURE__ */ _(d, {
+					render: /* @__PURE__ */ _(R, {}),
+					id: k ? I : void 0,
+					className: n("stacked-layout--content bg-background", N),
+					children: o === "contained" ? /* @__PURE__ */ _(u, {
+						maxWidth: "2xl",
+						gutter: "lg",
+						className: "stacked-layout--measure",
+						children: /* @__PURE__ */ _(m.Provider, {
+							value: !0,
+							children: r
+						})
+					}) : r
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/layout/app-shell/app-layout.tsx
+function O(e) {
+	let t = {
+		"data-app-layout": e.variant ?? "light-header",
+		className: n("app-layout--component", e.className)
+	};
+	switch (e.variant) {
+		case "stacked": {
+			let { variant: n, ...r } = e;
+			return /* @__PURE__ */ _(D, {
+				...r,
+				...t
+			});
+		}
+		case "sidebar":
+		case "inset": {
+			let { variant: n, ...r } = e;
+			return /* @__PURE__ */ _(T, {
+				...r,
+				...t,
+				surface: n === "sidebar" ? "flush" : "inset"
+			});
+		}
+		default: {
+			let { variant: n, ...r } = e;
+			return /* @__PURE__ */ _(w, {
+				...r,
+				...t,
+				headerTheme: n === "dark-header" ? "dark" : n === "light-header" ? "light" : void 0
+			});
+		}
+	}
+}
+//#endregion
+export { w as i, D as n, T as r, O as t };
+
+//# sourceMappingURL=app-shell-CPN30Nb1.js.map

package/dist/app-shell-CPN30Nb1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell-CPN30Nb1.js","names":["_Fragment","HEADER_THEME_CLASS","_Fragment","_Fragment","ThemeScopeHostProvider","useThemeScopeHost","cn","visuallyHiddenUntilFocusedRecipe","Button","Stack","compositionClasses","layerRecipes","SidebarRegion","containerRecipe","Container","PageViewport","useInsideMainLandmark","headerInlineDividerAlignment","InlineGutterContext","Fragment$1","shellContentSurface","ShellRegionGrid","hasPrimary","sidebar","hasSecondary","secondarySidebar","hasAside","aside","hasRegions","right","side","stackedPrimary","inlinePrimary","presentation","inlineCluster","columns","primary","primaryWidth","sidebarClassName","secondary","secondaryWidth","secondarySidebarClassName","supporting","asideWidth","asideClassName","main","mainClassName","className","ShellScrollbarSpacer","ShellSkipLink","targetId","event","label","HEADER_THEME_CLASS$1","TopbarSidebarLayout","props","contentId","useId","insideMain","Content","contentAs","headerScope","isInset","contentSurface","slots","sidebarOnStart","sidebarSide","headerInset","sidebarPresentation","endsWithViewport","contentNode","skipToContentLabel","contentClassName","headerTheme","mobileSidebarMode","headerClassName","headerInnerClassName","sidebarTrigger","logo","headerActions","secondarySidebarWidth","bodyClassName","SidebarInsetLayout","surface","frameAlignedRegion","toolbarNode","toolbar","toolbarClassName","mainNode","HEADER_THEME_CLASS","StackedLayout","Nav","chromeMeasure","contentWidth","alignsWithViewport","nav","navLabel","viewport","action","insets","left","subheaderClassName","children","AppLayout","_variant","shell","variant"],"sources":["../src/components/layout/app-shell/shell-regions.tsx","../src/components/layout/app-shell/shell-skip-link.tsx","../src/components/layout/app-shell/topbar-sidebar-layout.tsx","../src/components/layout/app-shell/sidebar-inset-layout.tsx","../src/components/layout/app-shell/stacked-layout.tsx","../src/components/layout/app-shell/app-layout.tsx"],"sourcesContent":["import type {ReactNode} from 'react';\nimport {SidebarRegion} from '../../base/sidebar';\nimport {cn} from '../../../lib/utils';\nimport {layerRecipes} from '../../../lib/layer-recipes';\nimport type {AppShellSidebarPresentation} from './app-shell.types';\n\n/** One surface recipe; the shell frames the page while Page owns its insets. */\nexport const shellContentSurface = {\n plain: 'bg-background text-foreground',\n inset: 'bg-card text-card-foreground md:m-space-md md:overflow-hidden md:rounded-surface md:border md:border-border md:shadow-sm',\n} as const;\n\ninterface ShellRegionGridProps {\n children: ReactNode;\n sidebar?: ReactNode;\n secondarySidebar?: ReactNode;\n aside?: ReactNode;\n side?: 'left' | 'right';\n primaryWidth?: string;\n secondaryWidth?: string;\n asideWidth?: string;\n presentation?: AppShellSidebarPresentation;\n inlinePrimary?: boolean;\n className?: string;\n mainClassName?: string;\n sidebarClassName?: string;\n secondarySidebarClassName?: string;\n asideClassName?: string;\n}\n\n/** Optional auto tracks collapse independently; the page always owns the flexible track. */\nexport function ShellRegionGrid({children,sidebar,secondarySidebar,aside,side='left',primaryWidth,secondaryWidth,asideWidth,presentation='panel',inlinePrimary=false,className,mainClassName,sidebarClassName,secondarySidebarClassName,asideClassName}: ShellRegionGridProps) {\n const hasPrimary = Boolean(sidebar), hasSecondary = Boolean(secondarySidebar), hasAside = Boolean(aside);\n const hasRegions = hasPrimary || hasSecondary || hasAside;\n const right = side === 'right';\n const stackedPrimary = inlinePrimary && presentation !== 'rail';\n // Inline dual navigation retains a usable page canvas. On narrow hosts the\n // body pans horizontally beneath the persistent rail instead of crushing text.\n const inlineCluster = inlinePrimary && presentation === 'rail' && hasSecondary;\n const columns = !hasRegions ? 'grid-cols-1'\n  : inlineCluster ? right ? 'grid-cols-[auto_minmax(20rem,1fr)_auto_auto]' : 'grid-cols-[auto_auto_minmax(20rem,1fr)_auto]'\n  : right ? 'grid-cols-[auto_minmax(0,1fr)_auto_auto]' : 'grid-cols-[auto_auto_minmax(0,1fr)_auto]';\n const primary = hasPrimary && <SidebarRegion panelId=\"primary\" dockAt={inlinePrimary || presentation === 'rail' ? 0 : 768} presentation={presentation} side={side} width={primaryWidth}\n  className={cn('row-start-1', right ? 'col-start-4' : 'col-start-1', inlineCluster && ['sticky', right ? 'right-0' : 'left-0', layerRecipes.sticky], stackedPrimary && (right ? 'max-md:col-start-1 max-md:row-start-2' : 'max-md:col-start-1'),sidebarClassName)}>{sidebar}</SidebarRegion>;\n // Beside a persistent area rail the contextual sidebar is the full navigation\n // panel, so it docks, and becomes a drawer, at the primary panel's threshold.\n const secondaryDockAt = inlinePrimary ? 0 : hasPrimary && presentation === 'rail' ? 768 : 1024;\n const secondary = hasSecondary && <SidebarRegion panelId=\"secondary\" dockAt={secondaryDockAt} side={side} width={secondaryWidth} className={cn('row-start-1',right ? 'col-start-3' : 'col-start-2',secondarySidebarClassName)}>{secondarySidebar}</SidebarRegion>;\n const supporting = hasAside && <SidebarRegion panelId=\"aside\" dockAt={1440} side={right ? 'left' : 'right'} width={asideWidth} className={cn('row-start-1',right ? 'col-start-1' : 'col-start-4',asideClassName)}>{aside}</SidebarRegion>;\n const main = <div className={cn('shell-regions--main row-start-1 flex min-h-0 min-w-0 flex-col', hasRegions && (right ? 'col-start-2' : 'col-start-3'),stackedPrimary && (right ? 'max-md:col-start-1' : 'max-md:col-start-1 max-md:row-start-2'),mainClassName)}>{children}</div>;\n return <div data-shell-regions=\"\" className={cn('shell-regions--component grid min-h-0 min-w-0 flex-1 [direction:ltr] ltr:[&>*]:[direction:ltr] rtl:[&>*]:[direction:rtl]', inlineCluster && 'overflow-x-auto overflow-y-hidden overscroll-x-contain', columns,stackedPrimary && 'max-md:grid-cols-1',className)}>\n  {right ? <>{supporting}{main}{secondary}{primary}</> : <>{primary}{secondary}{main}{supporting}</>}\n </div>;\n}\n\n/**\n * Reserves the page viewport's scrollbar gutter in a row above it. The viewport\n * keeps a stable gutter, so with classic scrollbars its content box ends that\n * much before its edge. This empty element reserves the same gutter, so it is\n * exactly one scrollbar wide (zero with overlay scrollbars) and a header beside\n * it ends where the page does. It clips rather than scrolls: the page viewport\n * stays the shell's only scroller.\n */\nexport function ShellScrollbarSpacer() {\n return <div aria-hidden=\"true\" data-slot=\"shell-scrollbar-spacer\" className=\"shell-scrollbar-spacer--component invisible h-0 shrink-0 self-start overflow-hidden [scrollbar-gutter:stable]\" />;\n}\n","import type { MouseEvent } from 'react';\n\nimport { Button } from '../../base/buttons';\nimport { visuallyHiddenUntilFocusedRecipe } from '../../../lib/focus-recipes';\nimport { layerRecipes } from '../../../lib/layer-recipes';\nimport { cn } from '../../../lib/utils';\n\n/**\n * The first tab stop of a shell: jumps over the header and navigation to the\n * page viewport. It stays out of sight until it takes keyboard focus, and it\n * moves focus without rewriting the URL hash, so hash routes survive.\n */\nexport function ShellSkipLink({ targetId, label }: { targetId: string; label: string }) {\n\tconst skip = (event: MouseEvent<HTMLAnchorElement>) => {\n\t\tevent.preventDefault();\n\t\tdocument.getElementById(targetId)?.focus();\n\t};\n\n\treturn (\n\t\t// A zero-size anchor keeps the link out of the shell's flow in either axis.\n\t\t<div className=\"shell-skip-link--component relative size-0 shrink-0\">\n\t\t\t<Button\n\t\t\t\thref={`#${targetId}`}\n\t\t\t\ttone=\"secondary\"\n\t\t\t\tbuttonStyle=\"outline\"\n\t\t\t\tonClick={skip}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t// The anchor is zero-size, so Button's max-w-full would clamp the link to nothing.\n\t\t\t\t\t'shell-skip-link--link absolute start-space-md top-space-md w-max max-w-none bg-background',\n\t\t\t\t\tvisuallyHiddenUntilFocusedRecipe,\n\t\t\t\t\tlayerRecipes.overlay,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{label}\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n","/**\n * TopbarSidebarLayout — header-first app shell with a two-column body.\n *\n * This shell is intentionally separate from the default shadcn sidebar layout:\n * the logo belongs in the header, while the sidebar and content occupy the\n * remaining page height below the header.\n */\nimport { useId } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport { ThemeScopeHostProvider, useThemeScopeHost } from '../../../lib/theme-scope';\n\nimport { Stack } from '../../base/structure';\nimport {compositionClasses} from '../../base/structure/composition.recipes';\nimport { PageViewport } from '../containers';\nimport { headerInlineDividerAlignment } from '../header/header.recipes';\nimport { useInsideMainLandmark } from '../containers/main-landmark-context';\nimport {ShellRegionGrid, ShellScrollbarSpacer, shellContentSurface} from './shell-regions';\nimport { ShellSkipLink } from './shell-skip-link';\n\nimport type {\n\tTopbarSidebarLayoutProps,\n} from './app-shell.types';\n\n/**\n * Header theme is just a token scope. `.light` / `.dark` remap the shadcn\n * palette for the header subtree (see css/themes/shadcn.default.css), so header\n * partials use ordinary tokens (`bg-background`, `text-foreground`, `bg-accent`\n * …) and invert against the header surface automatically — no header-specific\n * color variables required. Omitted, the header follows the active theme;\n * `light` keeps the header light even on a dark page; `dark` gives a dark topbar\n * on a light page.\n */\nconst HEADER_THEME_CLASS: Record<NonNullable<TopbarSidebarLayoutProps['headerTheme']>, string> = {\n\tlight: 'light',\n\tdark: 'dark',\n};\n\nexport function TopbarSidebarLayout({\n\tchildren,\n\theaderTheme,\n\tcontentSurface = 'plain',\n\tsidebarSide = 'left',\n\tmobileSidebarMode = 'drawer',\n\tsecondarySidebarWidth, asideWidth, sidebarPresentation, secondarySidebarClassName, asideClassName,\n\tsidebarTrigger,\n\tlogo,\n\theaderActions,\n\tsidebar,\n\tslots,\n\tcontentAs,\n\tskipToContentLabel,\n\tclassName,\n\theaderClassName,\n\theaderInnerClassName,\n\tbodyClassName,\n\tsidebarClassName,\n\tcontentClassName,\n\tstyle,\n\t...props\n}: TopbarSidebarLayoutProps) {\n\tconst contentId = useId();\n\t// One main landmark per page: embedded in an existing main, the content region is a plain element.\n\tconst insideMain = useInsideMainLandmark();\n\tconst Content = contentAs ?? (insideMain ? 'div' : 'main');\n\tconst headerScope = useThemeScopeHost<HTMLElement>();\n\tconst isInset = contentSurface === 'inset';\n\t// The header spans the sidebar and the page. Over docked navigation it starts\n\t// at the sidebar's inset; over the page it keeps the page gutter, so its far\n\t// end lines up with the page content beneath. Once the panel becomes a drawer\n\t// both ends take the page gutter; a persistent rail stays docked. With a\n\t// supporting panel on the far edge, that end sits over a panel too.\n\tconst hasAside = slots?.aside != null && slots.aside !== false;\n\tconst sidebarOnStart = sidebarSide === 'left';\n\tconst headerInset = hasAside\n\t\t? (sidebarPresentation === 'rail' ? 'px-surface-xs' : 'px-surface-lg @3xl/app-shell:px-surface-xs')\n\t\t: sidebarPresentation === 'rail'\n\t\t\t? (sidebarOnStart ? 'ps-surface-xs pe-surface-lg' : 'ps-surface-lg pe-surface-xs')\n\t\t\t: cn('px-surface-lg', sidebarOnStart ? '@3xl/app-shell:ps-surface-xs' : '@3xl/app-shell:pe-surface-xs');\n\t// The page viewport, and its scrollbar gutter, end with the shell only when nothing docks after it.\n\tconst endsWithViewport = sidebarOnStart && !hasAside;\n\tconst contentNode = (\n\t\t<PageViewport\n\t\t\trender={<Content />}\n\t\t\tid={skipToContentLabel ? contentId : undefined}\n\t\t\tclassName={cn(\n\t\t\t\t'topbar-sidebar-layout--content', !isInset && 'bg-background',\n\t\t\t\tcontentClassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</PageViewport>\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t'topbar-sidebar-layout--component @container/app-shell box-border isolate flex min-h-svh min-w-0 w-full flex-col overflow-hidden bg-background font-sans text-foreground',\n\t\t\t\t'shell-sidebar-vars', isInset && 'bg-sidebar',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={style}\n\t\t\tdata-header-theme={headerTheme ?? 'inherit'}\n\t\t\tdata-sidebar-side={sidebarSide}\n\t\t\tdata-mobile-sidebar-mode={mobileSidebarMode}\n\t\t\tdata-content-surface={contentSurface}\n\t\t\t{...props}\n\t\t>\n\t\t\t{!!skipToContentLabel && <ShellSkipLink targetId={contentId} label={skipToContentLabel} />}\n\t\t\t<ThemeScopeHostProvider value={headerScope.context}>\n\t\t\t<header\n\t\t\t\tref={headerScope.attachHost}\n\t\t\t\tdata-theme-scope=\"\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'topbar-sidebar-layout--header box-border z-40 flex min-h-shell-header shrink-0 items-center border-b border-border bg-background py-space-sm text-foreground',\n\t\t\t\t\theaderInset,\n\t\t\t\t\theaderInlineDividerAlignment,\n\t\t\t\t\theaderTheme && HEADER_THEME_CLASS[headerTheme],\n\t\t\t\t\theaderClassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<Stack direction=\"horizontal\" align=\"center\" gap=\"md\" wrap\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t'topbar-sidebar-layout--header-inner min-h-action w-full min-w-0',\n\t\t\t\t\t\theaderInnerClassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{slots?.header ?? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{!!sidebarTrigger && (\n\t\t\t\t\t\t\t\t<div className=\"topbar-sidebar-layout--sidebar-trigger flex shrink-0 items-center\">\n\t\t\t\t\t\t\t\t\t{sidebarTrigger}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{!!logo && (\n\t\t\t\t\t\t\t\t<div className=\"topbar-sidebar-layout--logo flex min-w-0 shrink-0 items-center\">\n\t\t\t\t\t\t\t\t\t{logo}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{!!slots?.headerStart && (\n\t\t\t\t\t\t\t\t<div className=\"topbar-sidebar-layout--header-start flex min-w-0 items-center\">\n\t\t\t\t\t\t\t\t\t{slots.headerStart}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{!!slots?.headerCenter && (\n\t\t\t\t\t\t\t\t// Hidden below 48rem of shell width; see the slot's documentation.\n\t\t\t\t\t\t\t\t<div className=\"topbar-sidebar-layout--header-center hidden min-w-0 flex-1 items-center @3xl/app-shell:flex\">\n\t\t\t\t\t\t\t\t\t{slots.headerCenter}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{!!(headerActions || slots?.headerEnd) && (\n\t\t\t\t\t\t\t\t<div className=\"topbar-sidebar-layout--header-trailing ms-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-space-sm @3xl/app-shell:gap-space-md [&>*]:max-w-full\">\n\t\t\t\t\t\t\t\t\t{!!headerActions && (\n\t\t\t\t\t\t\t\t\t\t<div className={cn('topbar-sidebar-layout--header-actions flex min-w-0 max-w-full flex-wrap items-center [&>*]:max-w-full', compositionClasses.commands)}>\n\t\t\t\t\t\t\t\t\t\t\t{headerActions}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{!!slots?.headerEnd && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"topbar-sidebar-layout--header-end flex min-w-0 max-w-full flex-wrap items-center gap-space-sm @3xl/app-shell:gap-space-md [&>*]:max-w-full\">\n\t\t\t\t\t\t\t\t\t\t\t{slots.headerEnd}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</Stack>\n\t\t\t\t{endsWithViewport && <ShellScrollbarSpacer />}\n\t\t\t</header>\n\t\t\t</ThemeScopeHostProvider>\n\n\t\t\t<ShellRegionGrid side={sidebarSide} sidebar={sidebar} secondarySidebar={slots?.secondarySidebar} aside={slots?.aside}\n\t\t\t\tsecondaryWidth={secondarySidebarWidth} asideWidth={asideWidth} presentation={sidebarPresentation}\n\t\t\t\tinlinePrimary={mobileSidebarMode === 'inline'}\n\t\t\t\tclassName={cn('topbar-sidebar-layout--body', bodyClassName)}\n\t\t\t\tmainClassName={cn('topbar-sidebar-layout--main', shellContentSurface[contentSurface])}\n\t\t\t\tsidebarClassName={cn('topbar-sidebar-layout--sidebar min-h-0 min-w-0 overflow-hidden text-sidebar-foreground', isInset ? 'bg-transparent' : 'bg-sidebar', sidebarClassName)}\n\t\t\t\tsecondarySidebarClassName={cn('topbar-sidebar-layout--secondary-sidebar min-h-0 min-w-0 overflow-hidden text-sidebar-foreground', secondarySidebarClassName)}\n\t\t\t\tasideClassName={cn('topbar-sidebar-layout--aside min-h-0 min-w-0 overflow-hidden text-sidebar-foreground', asideClassName)}>\n\t\t\t\t{contentNode}\n\t\t\t</ShellRegionGrid>\n\t\t</div>\n\t);\n}\n","/**\n * SidebarInsetLayout — sidebar-first app shell with no global header.\n *\n * The counterpart to `TopbarSidebarLayout`. There the header spans the page and\n * owns the logo, with the sidebar below it; here the sidebar owns the full page\n * height and the logo sits inside it, so the content column carries only a slim\n * toolbar of its own. This is the shape shadcn's dashboard uses, and it is the\n * one to reach for when navigation should read as the primary frame.\n *\n * `toolbar={false}` removes even that row, for a shell with no header chrome.\n */\nimport { useId } from 'react';\n\nimport { cn } from '../../../lib/utils';\n\nimport { Stack } from '../../base/structure';\nimport { PageViewport } from '../containers';\nimport { headerInlineDividerAlignment } from '../header/header.recipes';\nimport { useInsideMainLandmark } from '../containers/main-landmark-context';\nimport {ShellRegionGrid, ShellScrollbarSpacer, shellContentSurface} from './shell-regions';\nimport { ShellSkipLink } from './shell-skip-link';\n\nimport type {\n\tSidebarInsetLayoutProps,\n} from './app-shell.types';\n\nexport function SidebarInsetLayout({\n\tchildren,\n\tsidebarSide = 'left',\n\tsurface = 'inset',\n\tmobileSidebarMode = 'drawer',\n\ttoolbar = true,\n\tsecondarySidebarWidth, asideWidth, sidebarPresentation, secondarySidebarClassName, asideClassName,\n\tsidebar,\n\tsidebarTrigger,\n\tslots,\n\tcontentAs,\n\tskipToContentLabel,\n\tclassName,\n\tsidebarClassName,\n\ttoolbarClassName,\n\tcontentClassName,\n\tstyle,\n\t...props\n}: SidebarInsetLayoutProps) {\n\tconst contentId = useId();\n\t// One main landmark per page: embedded in an existing main, the content region is a plain element.\n\tconst insideMain = useInsideMainLandmark();\n\tconst Content = contentAs ?? (insideMain ? 'div' : 'main');\n\tconst isInset = surface === 'inset';\n\t// Docked navigation beside the inset frame starts where the frame does (its\n\t// margin plus edge), so the sidebar's header rule lines up with the toolbar's.\n\t// A floating sidebar already insets itself by the same amount.\n\tconst frameAlignedRegion = isInset && 'md:border-t md:border-transparent md:pt-space-md md:has-[[data-variant=floating]]:border-t-0 md:has-[[data-variant=floating]]:pt-0';\n\n\n\tconst toolbarNode = toolbar ? (\n\t\t<header\n\t\t\tclassName={cn(\n\t\t\t\t'sidebar-inset-layout--toolbar @container/toolbar box-border flex min-h-shell-header shrink-0 items-center px-surface-lg py-space-sm',\n\t\t\t\theaderInlineDividerAlignment,\n\t\t\t\t// The toolbar and scrolling body share one surface boundary.\n\t\t\t\t'border-b border-border',\n\t\t\t\ttoolbarClassName,\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"sidebar-inset-layout--toolbar-row flex min-w-0 flex-1 items-center gap-space-md\">\n\t\t\t{slots?.toolbar ?? (\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"horizontal\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap=\"md\" wrap\n\t\t\t\t\tclassName=\"sidebar-inset-layout--toolbar-inner min-h-action w-full min-w-0\"\n\t\t\t\t>\n\t\t\t\t\t{!!sidebarTrigger && (\n\t\t\t\t\t\t<div className=\"sidebar-inset-layout--sidebar-trigger flex shrink-0 items-center\">\n\t\t\t\t\t\t\t{sidebarTrigger}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!slots?.toolbarStart && (\n\t\t\t\t\t\t<div className=\"sidebar-inset-layout--toolbar-start flex min-w-0 flex-1 basis-24 items-center [&>*]:min-w-0 [&>*]:max-w-full\">\n\t\t\t\t\t\t\t{slots.toolbarStart}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!slots?.toolbarEnd && (\n\t\t\t\t\t\t<div className=\"sidebar-inset-layout--toolbar-end ms-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-space-sm [&>*]:max-w-full\">\n\t\t\t\t\t\t\t{slots.toolbarEnd}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</Stack>\n\t\t\t)}\n\t\t\t</div>\n\t\t\t{/* The toolbar sits directly above the page viewport, so it ends where the page's content box does. */}\n\t\t\t<ShellScrollbarSpacer />\n\t\t</header>\n\t) : null;\n\n\tconst mainNode = (\n\t\t<div className={cn('sidebar-inset-layout--main flex min-h-0 min-w-0 flex-1 flex-col', shellContentSurface[isInset ? 'inset' : 'plain'])}>\n\t\t\t{toolbarNode}\n\t\t\t<PageViewport\n\t\t\t\trender={<Content />}\n\t\t\t\tid={skipToContentLabel ? contentId : undefined}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'sidebar-inset-layout--content',\n\t\t\t\t\tcontentClassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</PageViewport>\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<div className={cn('sidebar-inset-layout--component box-border isolate flex min-h-svh min-w-0 w-full overflow-hidden font-sans text-foreground shell-sidebar-vars', isInset ? 'bg-sidebar' : 'bg-background', className)}\n\t\t\tstyle={style} data-sidebar-side={sidebarSide} data-surface={surface} data-mobile-sidebar-mode={mobileSidebarMode} {...props}>\n\t\t\t{!!skipToContentLabel && <ShellSkipLink targetId={contentId} label={skipToContentLabel} />}\n\t\t\t<ShellRegionGrid side={sidebarSide} sidebar={sidebar} secondarySidebar={slots?.secondarySidebar} aside={slots?.aside}\n\t\t\t\tsecondaryWidth={secondarySidebarWidth} asideWidth={asideWidth} presentation={sidebarPresentation}\n\t\t\t\tinlinePrimary={mobileSidebarMode === 'inline'}\n\t\t\t\tsidebarClassName={cn('sidebar-inset-layout--sidebar min-h-0 min-w-0 overflow-hidden text-sidebar-foreground', isInset ? 'bg-transparent' : 'bg-sidebar', frameAlignedRegion, sidebarClassName)}\n\t\t\t\tsecondarySidebarClassName={cn('sidebar-inset-layout--secondary-sidebar min-h-0 min-w-0 overflow-hidden text-sidebar-foreground', frameAlignedRegion, secondarySidebarClassName)}\n\t\t\t\tasideClassName={cn('sidebar-inset-layout--aside min-h-0 min-w-0 overflow-hidden text-sidebar-foreground', asideClassName)}>\n\t\t\t\t{mainNode}\n\t\t\t</ShellRegionGrid>\n\t\t</div>\n\t);\n}\n","/**\n * StackedLayout — header-only app shell with horizontal navigation.\n *\n * The third shape alongside `TopbarSidebarLayout` (header over sidebar) and\n * `SidebarInsetLayout` (sidebar owns the page). Here there is no sidebar at all:\n * primary navigation runs across the header and the page stacks beneath it.\n *\n * Reach for this when the navigation is shallow enough to fit a row — settings,\n * marketing consoles, single-resource tools — where a sidebar would be mostly\n * empty. `contentWidth=\"contained\"` holds the page to a reading measure;\n * `\"full\"` lets dashboards span. Header flow follows the shell width: below\n * 64rem navigation owns a full row; wider shells, with room for logo, links\n * and account controls together, place it beside the logo.\n */\nimport { useId } from 'react';\n\nimport { cn } from '../../../lib/utils';\nimport { ThemeScopeHostProvider, useThemeScopeHost } from '../../../lib/theme-scope';\n\nimport { Stack } from '../../base/structure';\nimport { Container, PageViewport } from '../containers';\nimport { containerRecipe } from '../containers/container.recipes';\nimport { InlineGutterContext } from '../containers/inline-gutter-context';\nimport { useInsideMainLandmark } from '../containers/main-landmark-context';\nimport { headerInlineDividerAlignment } from '../header/header.recipes';\nimport {ShellRegionGrid, ShellScrollbarSpacer} from './shell-regions';\nimport { ShellSkipLink } from './shell-skip-link';\n\nimport type {\n\tStackedLayoutProps,\n} from './app-shell.types';\n\n/** Same token-scope trick as `TopbarSidebarLayout` — see its note. Omitted, the header follows the active theme. */\nconst HEADER_THEME_CLASS: Record<NonNullable<StackedLayoutProps['headerTheme']>, string> = {\n\tlight: 'light',\n\tdark: 'dark',\n};\n\nexport function StackedLayout({\n\tchildren,\n\theaderTheme,\n\tcontentWidth = 'contained',\n\tasideWidth, asideClassName,\n\tlogo,\n\tnav,\n\tnavLabel = 'Primary navigation',\n\tnavAs: Nav = 'nav',\n\tslots,\n\tcontentAs,\n\tskipToContentLabel,\n\tclassName,\n\theaderClassName,\n\tsubheaderClassName,\n\tcontentClassName,\n\tstyle,\n\t...props\n}: StackedLayoutProps) {\n\tconst contentId = useId();\n\t// One main landmark per page: embedded in an existing main, the content region is a plain element.\n\tconst insideMain = useInsideMainLandmark();\n\tconst Content = contentAs ?? (insideMain ? 'div' : 'main');\n\tconst headerScope = useThemeScopeHost<HTMLElement>();\n\t// The header and subheader share the page's measure and gutter: their surfaces\n\t// and rules stay full-bleed while their content starts and ends with the page.\n\t// A full-width shell keeps full-width chrome at the same gutter.\n\tconst chromeMeasure = cn('min-w-0 flex-1', containerRecipe({ maxWidth: contentWidth === 'contained' ? '2xl' : 'full', gutter: 'lg' }));\n\t// With the page viewport directly beneath, the chrome also ends where the page's content box does.\n\tconst alignsWithViewport = !slots?.aside;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t'stacked-layout--component @container/stacked-shell box-border isolate flex min-h-svh min-w-0 w-full flex-col bg-background font-sans text-foreground',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={style}\n\t\t\tdata-header-theme={headerTheme ?? 'inherit'}\n\t\t\tdata-content-width={contentWidth}\n\t\t\t{...props}\n\t\t>\n\t\t\t{!!skipToContentLabel && <ShellSkipLink targetId={contentId} label={skipToContentLabel} />}\n\t\t\t<ThemeScopeHostProvider value={headerScope.context}>\n\t\t\t<header\n\t\t\t\tref={headerScope.attachHost}\n\t\t\t\tdata-theme-scope=\"\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'stacked-layout--header box-border z-40 flex shrink-0 items-center border-b border-border bg-background py-space-sm text-foreground @5xl/stacked-shell:min-h-shell-header @5xl/stacked-shell:py-0',\n\t\t\t\t\theaderInlineDividerAlignment,\n\t\t\t\t\theaderTheme && HEADER_THEME_CLASS[headerTheme],\n\t\t\t\t\theaderClassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<div className={cn('stacked-layout--header-measure', chromeMeasure)}>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"horizontal\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap=\"lg\"\n\t\t\t\t\twrap\n\t\t\t\t\t// The shell width owns header adaptation, including narrow parents\n\t\t\t\t\t// on wide viewports. Children keep their identity across both flows.\n\t\t\t\t\tclassName=\"stacked-layout--header-inner min-h-action w-full min-w-0 @5xl/stacked-shell:flex-nowrap @5xl/stacked-shell:gap-space-2xl\"\n\t\t\t\t>\n\t\t\t\t\t{slots?.header ?? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{!!logo && (\n\t\t\t\t\t\t\t\t<div className=\"stacked-layout--logo flex min-w-0 shrink-0 items-center @5xl/stacked-shell:order-1\">\n\t\t\t\t\t\t\t\t\t{logo}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{!!nav && (\n\t\t\t\t\t\t\t\t// This shell has no sidebar, so hiding the nav in narrow shells left\n\t\t\t\t\t\t\t\t// the app with no navigation at all — logo and account menu\n\t\t\t\t\t\t\t\t// only. Instead it drops to its own full-width row and scrolls\n\t\t\t\t\t\t\t\t// horizontally, and returns inline when its parent is wide enough.\n\t\t\t\t\t\t\t\t//\n\t\t\t\t\t\t\t\t// Rendered once, not duplicated per breakpoint: a second copy\n\t\t\t\t\t\t\t\t// would put every nav link in the accessibility tree twice.\n\t\t\t\t\t\t\t\t//\n\t\t\t\t\t\t\t\t// Keep navigation intrinsic and single-line inside its scroller.\n\t\t\t\t\t\t\t\t// The shared inset reserves room for outer focus rings on every side.\n\t\t\t\t\t\t\t\t<Nav\n\t\t\t\t\t\t\t\t\taria-label={Nav === 'nav' ? navLabel : undefined}\n\t\t\t\t\t\t\t\t\tonFocusCapture={(event) => {\n\t\t\t\t\t\t\t\t\t\t// Native focus can leave a partially visible action clipped.\n\t\t\t\t\t\t\t\t\t\t// Reveal only within this horizontal owner; preserve page scroll.\n\t\t\t\t\t\t\t\t\t\tconst nav = event.currentTarget;\n\t\t\t\t\t\t\t\t\t\t// React portal focus bubbles through its logical nav ancestry.\n\t\t\t\t\t\t\t\t\t\tif (!nav.contains(event.target)) return;\n\t\t\t\t\t\t\t\t\t\tconst viewport = nav.getBoundingClientRect();\n\t\t\t\t\t\t\t\t\t\tconst action = event.target.getBoundingClientRect();\n\t\t\t\t\t\t\t\t\t\tconst insets = getComputedStyle(nav);\n\t\t\t\t\t\t\t\t\t\tconst left = viewport.left + (parseFloat(insets.paddingLeft) || 0);\n\t\t\t\t\t\t\t\t\t\tconst right = viewport.right - (parseFloat(insets.paddingRight) || 0);\n\t\t\t\t\t\t\t\t\t\tif (action.left < left) nav.scrollLeft += action.left - left;\n\t\t\t\t\t\t\t\t\t\telse if (action.right > right) nav.scrollLeft += action.right - right;\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tclassName=\"stacked-layout--nav order-last flex w-full min-w-0 flex-nowrap items-center overflow-x-auto p-space-sm @5xl/stacked-shell:order-2 @5xl/stacked-shell:w-auto @5xl/stacked-shell:flex-1 [&>*]:shrink-0 [&>*]:flex-nowrap\">\n\t\t\t\t\t\t\t\t\t{nav}\n\t\t\t\t\t\t\t\t</Nav>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{!!slots?.headerEnd && (\n\t\t\t\t\t\t\t\t<div className=\"stacked-layout--header-end ms-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-space-sm @5xl/stacked-shell:order-3 @5xl/stacked-shell:gap-space-md [&>*]:max-w-full\">\n\t\t\t\t\t\t\t\t\t{slots.headerEnd}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</Stack>\n\t\t\t\t</div>\n\t\t\t\t{alignsWithViewport && <ShellScrollbarSpacer />}\n\t\t\t</header>\n\t\t\t</ThemeScopeHostProvider>\n\n\t\t\t{!!slots?.subheader && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t'stacked-layout--subheader flex shrink-0 border-b border-border bg-background',\n\t\t\t\t\t\tsubheaderClassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<div className={cn('stacked-layout--subheader-measure', chromeMeasure)}>{slots.subheader}</div>\n\t\t\t\t\t{alignsWithViewport && <ShellScrollbarSpacer />}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<ShellRegionGrid aside={slots?.aside} asideWidth={asideWidth} asideClassName={cn('stacked-layout--aside min-h-0 min-w-0 overflow-hidden text-sidebar-foreground',asideClassName)}>\n\t\t\t<PageViewport\n\t\t\t\trender={<Content />}\n\t\t\t\tid={skipToContentLabel ? contentId : undefined}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'stacked-layout--content bg-background',\n\t\t\t\t\tcontentClassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{contentWidth === 'contained' ? (\n\t\t\t\t\t// The measure owns the inline gutter; a Page inside adds none by default.\n\t\t\t\t\t<Container maxWidth=\"2xl\" gutter=\"lg\" className=\"stacked-layout--measure\">\n\t\t\t\t\t\t<InlineGutterContext.Provider value>{children}</InlineGutterContext.Provider>\n\t\t\t\t\t</Container>\n\t\t\t\t) : (\n\t\t\t\t\tchildren\n\t\t\t\t)}\n\t\t\t</PageViewport>\n\t\t\t</ShellRegionGrid>\n\t\t</div>\n\t);\n}\n","import { cn } from '../../../lib/utils';\nimport { SidebarInsetLayout } from './sidebar-inset-layout';\nimport { StackedLayout } from './stacked-layout';\nimport { TopbarSidebarLayout } from './topbar-sidebar-layout';\nimport type { SidebarInsetLayoutProps, StackedLayoutProps, TopbarSidebarLayoutProps } from './app-shell.types';\n\n/** Presets select chrome; each underlying shell retains its own typed slots and behavior. */\nexport type AppLayoutProps =\n | (Omit<TopbarSidebarLayoutProps, 'headerTheme'> & {variant?: 'light-header' | 'dark-header'})\n | (Omit<SidebarInsetLayoutProps, 'surface'> & {variant: 'sidebar' | 'inset'})\n | (StackedLayoutProps & {variant: 'stacked'});\n\nexport type AppLayoutVariant = NonNullable<AppLayoutProps['variant']>;\n\n/** Five ready compositions using three shell owners, with one page viewport. */\nexport function AppLayout(props: AppLayoutProps) {\n const presentation = {'data-app-layout': props.variant ?? 'light-header', className: cn('app-layout--component', props.className)};\n switch (props.variant) {\n  case 'stacked': {\n   const {variant: _variant, ...shell} = props;\n   return <StackedLayout {...shell} {...presentation} />;\n  }\n  case 'sidebar':\n  case 'inset': {\n   const {variant, ...shell} = props;\n   return <SidebarInsetLayout {...shell} {...presentation} surface={variant === 'sidebar' ? 'flush' : 'inset'} />;\n  }\n  default: {\n   // An omitted variant keeps the header on the active theme; light/dark scope it on request.\n   const {variant, ...shell} = props;\n   return <TopbarSidebarLayout {...shell} {...presentation} headerTheme={variant === 'dark-header' ? 'dark' : variant === 'light-header' ? 'light' : undefined} />;\n  }\n }\n}\n"],"mappings":"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"}

package/dist/{attachment-BCpA4e7i.js → attachment-D2-fpfmv.js}

@@ -1,13 +1,13 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-DhuoqFy4.js";
-import { n } from "./buttons-DeW0bQeK.js";
-import { c as r } from "./typography-C7-YMW1S.js";
-import { t as i } from "./focus-recipes-B653VaLq.js";
-import { t as a } from "./progress-DZFXXzPs.js";
-import { t as o } from "./interaction-recipes-4wZ2tvfb.js";
-import { i as s } from "./primitives-BkkQjYl7.js";
-import { c, i as l, n as u, r as d, t as f, u as p } from "./item-FfWnaYST.js";
+import { t } from "./utils-BVbAG2J6.js";
+import { c as n } from "./typography-C0dELqYV.js";
+import { t as r } from "./focus-recipes-DSkiUvUp.js";
+import { n as i } from "./buttons-pZVgPTZn.js";
+import { t as a } from "./progress-RARK8AjB.js";
+import { t as o } from "./interaction-recipes-DmuS1ase.js";
+import { i as s } from "./primitives-BlC1lXBr.js";
+import { c, i as l, n as u, r as d, t as f, u as p } from "./item-GJ9mvCcg.js";
 import { forwardRef as m } from "react";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 import { Archive as v, AudioLines as y, Download as b, Eye as x, FileCode as S, FileText as C, ImageIcon as w, Video as T, X as E } from "lucide-react";
@@ -165,12 +165,12 @@ var R = m(function({ name: a = "", meta: c, bytes: l, locale: u, kind: d, media:
 				}),
 				(C !== void 0 || $) && /* @__PURE__ */ _(F, {
 					clamp: "none",
-					children: [C === void 0 ? /* @__PURE__ */ g(r, {
+					children: [C === void 0 ? /* @__PURE__ */ g(n, {
 						tag: "span",
 						size: "xs",
 						type: v === "error" ? "error" : "secondary",
 						children: $
-					}) : C, v === "error" && S ? /* @__PURE__ */ _(h, { children: [" — ", /* @__PURE__ */ g(r, {
+					}) : C, v === "error" && S ? /* @__PURE__ */ _(h, { children: [" — ", /* @__PURE__ */ g(n, {
 						tag: "span",
 						role: "alert",
 						size: "xs",
@@ -186,7 +186,7 @@ var R = m(function({ name: a = "", meta: c, bytes: l, locale: u, kind: d, media:
 				})
 			] }),
 			(w || k || A || R) && /* @__PURE__ */ _(I, { children: [
-				k && /* @__PURE__ */ g(n, {
+				k && /* @__PURE__ */ g(i, {
 					type: "button",
 					tone: "secondary",
 					buttonStyle: "ghost",
@@ -200,7 +200,7 @@ var R = m(function({ name: a = "", meta: c, bytes: l, locale: u, kind: d, media:
 						className: "size-icon-sm"
 					})
 				}),
-				A && /* @__PURE__ */ g(n, {
+				A && /* @__PURE__ */ g(i, {
 					type: "button",
 					tone: "secondary",
 					buttonStyle: "ghost",
@@ -214,7 +214,7 @@ var R = m(function({ name: a = "", meta: c, bytes: l, locale: u, kind: d, media:
 						className: "size-icon-sm"
 					})
 				}),
-				R && /* @__PURE__ */ g(n, {
+				R && /* @__PURE__ */ g(i, {
 					type: "button",
 					tone: "secondary",
 					buttonStyle: "ghost",
@@ -235,7 +235,7 @@ var R = m(function({ name: a = "", meta: c, bytes: l, locale: u, kind: d, media:
 			disabled: z,
 			"aria-label": X.preview(a),
 			onClick: T,
-			className: `attachment--trigger ${o.nativeButtonReset} absolute inset-0 z-0 cursor-pointer rounded-radius outline-none ${i.inset} disabled:cursor-not-allowed`
+			className: `attachment--trigger ${o.nativeButtonReset} absolute inset-0 z-0 cursor-pointer rounded-radius outline-none ${r.inset} disabled:cursor-not-allowed`
 		})]
 	});
 });
@@ -243,4 +243,4 @@ R.displayName = "Attachment";
 //#endregion
 export { j as a, P as c, F as i, A as l, I as n, M as o, N as r, L as s, R as t, O as u };
 
-//# sourceMappingURL=attachment-BCpA4e7i.js.map
+//# sourceMappingURL=attachment-D2-fpfmv.js.map