@zerodep-dev/vue-tsx-pro-ui 0.1.0 → 0.3.0

package/dist/patterns/AppShell.js

@@ -17,10 +17,10 @@ import { NavCompactContext } from "../navigation/NavList.js";
 import { SkipLink } from "../navigation/SkipLink.js";
 import { useMessages } from "../config/lang/messages.js";
 import { patternsMessages } from "./messages.js";
-import { createVNode, mergeProps, shallowRef, unref, useId, watch } from "vue";
-import { _component, bindable, childrenProp, createContext, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, shallowRef, unref, useId, watch } from "vue";
+import { _component, bindable, childrenProp, createContext, mergeJsxProps, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
-import { Menu, PanelLeftClose, PanelLeftOpen } from "@lucide/icons";
+import { Menu, PanelBottomClose, PanelBottomOpen, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, PanelTopClose, PanelTopOpen } from "@lucide/icons";
 //#region src/patterns/AppShell.tsx
 /**
 * 应用外壳：粘性顶栏、左侧栏（导航）、正文、右侧栏（本页目录），文档站与后台的整页骨架。
@@ -49,6 +49,11 @@ import { Menu, PanelLeftClose, PanelLeftOpen } from "@lucide/icons";
 * 抽屉结束边可以拖动调整宽度（ResizeHandle，也能聚焦后用 ← / →，双击回到初始宽度），父级写 _sidebarWidth={x} 记住；
 * 顶栏的品牌格按初始宽度，拖动时不变。焦点在抽屉里时按 Esc 收起、焦点回到“菜单”；窄屏时点了链接也收起。
 * 拖到比 160px 窄时侧栏变紧凑：里面的 NavList 只显示图标（名称在提示里），小节标题只剩图标（NavCompactContext）。
+* sidebarSide 选抽屉从哪一边滑出：start（默认）、end、top、bottom。start / end 是左右两侧抽屉（随排版方向，从右到左时互换），
+* end 时“菜单”在顶栏结束边；top / bottom 是盖满宽度的上下抽屉，导航的小节排成多列，拖动贴着正文的那条边调整高度
+* （_sidebarHeight 记住）。上下抽屉盖住的正文范围大，点了链接就收起（左右抽屉在宽屏时不收）。
+* 想让用户自己选，用 layout：createLayoutPreference 的结果，侧栏的形式、方向、开关与尺寸都从它读、写回它并存盘，
+* 配合顶栏里的 LayoutSwitcher；写了 layout 时 sidebarMode、sidebarSide、_sidebarOpen 等不再起作用。
 *
 * 品牌格里一般放 AppShellBrand：品牌色的标志与产品名，点了回首页；自己的标志图写在它的 logo 里。
 *
@@ -70,9 +75,13 @@ var RAIL_WIDTH = "3.5rem";
 var OVERLAY_WIDTH = 256;
 var OVERLAY_MIN_WIDTH = 16;
 var OVERLAY_MAX_WIDTH = 480;
+var OVERLAY_HEIGHT = 320;
+var OVERLAY_MIN_HEIGHT = 96;
+var OVERLAY_MAX_HEIGHT = 640;
 var OVERLAY_COMPACT_WIDTH = 160;
 var WIDE_QUERY = breakpoints.lg.replace("@media ", "");
 /** 左侧栏的形式 */
+/** 抽屉式侧栏从哪一边滑出（sidebarMode="overlay"） */
 /** 未声明的属性落到外层 div 上 */
 /** AppShell 交给里面的部件的状态：侧栏收起时品牌只剩标志 */
 /** AppShell 的上下文：AppShellBrand 据此在侧栏收起时只显示标志；不在 AppShell 里时为 null */
@@ -220,26 +229,61 @@ var appShellStyles = css.create({
 	},
 	overlay: {
 		position: "fixed",
-		top: HEADER_HEIGHT,
-		bottom: 0,
-		insetInlineStart: 0,
 		zIndex: 9,
 		boxSizing: "border-box",
 		display: "flex",
 		flexDirection: "column",
-		maxWidth: "calc(100vw - 3rem)",
 		overflow: "hidden",
 		backgroundColor: "_surface",
+		boxShadow: "_lg",
+		visibility: "hidden",
+		transition: `translate ${t.durations.md} ${t.easings.exit}, visibility 0s linear ${t.durations.md}`
+	},
+	overlayStart: {
+		top: HEADER_HEIGHT,
+		bottom: 0,
+		insetInlineStart: 0,
+		maxWidth: "calc(100vw - 3rem)",
 		borderInlineEndWidth: "_xs",
 		borderInlineEndStyle: "solid",
 		borderInlineEndColor: "_border",
-		boxShadow: "_lg",
-		visibility: "hidden",
 		translate: {
 			default: "-100% 0",
 			":dir(rtl)": "100% 0"
-		},
-		transition: `translate ${t.durations.md} ${t.easings.exit}, visibility 0s linear ${t.durations.md}`
+		}
+	},
+	overlayEnd: {
+		top: HEADER_HEIGHT,
+		bottom: 0,
+		insetInlineEnd: 0,
+		maxWidth: "calc(100vw - 3rem)",
+		borderInlineStartWidth: "_xs",
+		borderInlineStartStyle: "solid",
+		borderInlineStartColor: "_border",
+		translate: {
+			default: "100% 0",
+			":dir(rtl)": "-100% 0"
+		}
+	},
+	overlayTop: {
+		top: HEADER_HEIGHT,
+		insetInlineStart: 0,
+		insetInlineEnd: 0,
+		maxHeight: `calc(100dvh - ${HEADER_HEIGHT} - 3rem)`,
+		borderBlockEndWidth: "_xs",
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: "_border",
+		translate: "0 -100%"
+	},
+	overlayBottom: {
+		bottom: 0,
+		insetInlineStart: 0,
+		insetInlineEnd: 0,
+		maxHeight: `calc(100dvh - ${HEADER_HEIGHT} - 3rem)`,
+		borderBlockStartWidth: "_xs",
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_border",
+		translate: "0 100%"
 	},
 	overlayOpen: {
 		visibility: "visible",
@@ -250,6 +294,10 @@ var appShellStyles = css.create({
 		flexGrow: 1,
 		minHeight: 0
 	},
+	sidebarContentColumns: {
+		columnWidth: "14rem",
+		columnGap: "_xl"
+	},
 	brandOverlay: {
 		alignSelf: {
 			default: null,
@@ -355,9 +403,10 @@ var appShellStyles = css.create({
 		fontSize: "_sm"
 	}
 });
-/** AppShell 的动态样式：抽屉的宽度、宽屏时品牌格的宽度（px） */
+/** AppShell 的动态样式：抽屉的宽度与高度、宽屏时品牌格的宽度（px） */
 var appShellDynamicStyles = css.create({
 	width: (px) => ({ width: px }),
+	height: (px) => ({ height: px }),
 	brandWidth: (px) => ({ width: {
 		default: null,
 		[breakpoints.lg]: px
@@ -365,7 +414,6 @@ var appShellDynamicStyles = css.create({
 });
 /** 应用外壳：粘性顶栏、左侧栏、正文、右侧栏；窄屏时左侧栏收进抽屉 */
 var AppShell = /*#__PURE__*/ _component((_props, _ctx) => {
-	const _cache = [];
 	const brand = readonlyProp(_props, "brand");
 	const header = readonlyProp(_props, "header");
 	const sidebar = readonlyProp(_props, "sidebar");
@@ -374,8 +422,11 @@ var AppShell = /*#__PURE__*/ _component((_props, _ctx) => {
 	const tabs = readonlyProp(_props, "tabs");
 	const footer = readonlyProp(_props, "footer");
 	const sidebarMode = readonlyProp(_props, "sidebarMode", "docked");
+	const sidebarSide = readonlyProp(_props, "sidebarSide", "start");
+	const layout = readonlyProp(_props, "layout");
 	const sidebarOpen = bindable(_props, "_sidebarOpen", () => false, _ctx.emit);
 	const sidebarWidth = bindable(_props, "_sidebarWidth", () => OVERLAY_WIDTH, _ctx.emit);
+	const sidebarHeight = bindable(_props, "_sidebarHeight", () => OVERLAY_HEIGHT, _ctx.emit);
 	const sidebarCollapsible = readonlyProp(_props, "sidebarCollapsible", false);
 	const sidebarCollapsed = bindable(_props, "_sidebarCollapsed", () => false, _ctx.emit);
 	const skipLink = readonlyProp(_props, "skipLink", true);
@@ -403,42 +454,75 @@ var AppShell = /*#__PURE__*/ _component((_props, _ctx) => {
 	const id = useId();
 	const mainId = `${id}-main`;
 	const sidebarId = `${id}-sidebar`;
-	const overlay = () => sidebarMode.value === "overlay";
+	const mode = () => layout.value ? layout.value.mode : sidebarMode.value;
+	const side = () => layout.value ? layout.value.side : sidebarSide.value;
+	const isOpen = () => layout.value ? layout.value.open : sidebarOpen.value;
+	const setOpen = (value) => {
+		if (layout.value) layout.value.open = value;
+		else sidebarOpen.value = value;
+	};
+	const widthOf = () => layout.value ? layout.value.width : sidebarWidth.value;
+	const setWidth = (px) => {
+		if (layout.value) layout.value.width = px;
+		else sidebarWidth.value = px;
+	};
+	const heightOf = () => layout.value ? layout.value.height : sidebarHeight.value;
+	const setHeight = (px) => {
+		if (layout.value) layout.value.height = px;
+		else sidebarHeight.value = px;
+	};
+	const isCollapsed = () => layout.value ? layout.value.collapsed : sidebarCollapsed.value;
+	const setCollapsed = (value) => {
+		if (layout.value) layout.value.collapsed = value;
+		else sidebarCollapsed.value = value;
+	};
+	const overlay = () => mode() === "overlay";
 	const docked = () => hasContent(sidebar.value) && !overlay();
+	const lateral = () => side() === "start" || side() === "end";
 	const wide = useMediaQuery(WIDE_QUERY);
-	const collapsed = () => docked() && sidebarCollapsible.value && sidebarCollapsed.value && wide.value;
-	const compact = () => overlay() && sidebarWidth.value < OVERLAY_COMPACT_WIDTH || collapsed();
+	const collapsed = () => docked() && sidebarCollapsible.value && isCollapsed() && wide.value;
+	const compact = () => overlay() && lateral() && widthOf() < OVERLAY_COMPACT_WIDTH || collapsed();
 	NavCompactContext.provide(compact);
 	AppShellContext.provide({ collapsed });
 	watch(wide, (isWide) => {
-		if (isWide && !overlay()) sidebarOpen.value = false;
+		if (isWide && !overlay()) setOpen(false);
 	});
 	function closeOnNavigate(event) {
-		if (overlay() && wide.value) return;
-		if (event.target instanceof Element && event.target.closest("a[href]")) sidebarOpen.value = false;
+		if (overlay() && lateral() && wide.value) return;
+		if (event.target instanceof Element && event.target.closest("a[href]")) setOpen(false);
 	}
-	const remembered = untrack(() => sidebarWidth.value);
+	const remembered = untrack(() => widthOf());
 	const initialWidth = remembered < OVERLAY_COMPACT_WIDTH ? OVERLAY_WIDTH : remembered;
 	let toggleButton = shallowRef(null);
 	function onOverlayKeydown(event) {
 		if (event.key !== "Escape" || event.defaultPrevented) return;
 		event.preventDefault();
-		sidebarOpen.value = false;
+		setOpen(false);
 		toggleButton.value?.focus();
 	}
-	/** overlay 的“菜单”：开关抽屉，图标随开关切换 */
-	const sidebarToggle = () => createVNode(Button, mergePartProps({
+	const toggleAtEnd = () => overlay() && side() === "end";
+	const toggleIcon = () => {
+		const open = isOpen();
+		switch (side()) {
+			case "end": return open ? PanelRightClose : PanelRightOpen;
+			case "top": return open ? PanelTopClose : PanelTopOpen;
+			case "bottom": return open ? PanelBottomClose : PanelBottomOpen;
+			default: return open ? PanelLeftClose : PanelLeftOpen;
+		}
+	};
+	/** overlay 的“菜单”：开关抽屉，图标随开关和方向切换 */
+	const sidebarToggle = () => createVNode(Button, mergeJsxProps(mergePartProps({
 		variant: "ghost",
 		tone: "neutral",
 		size: "sm",
-		icon: sidebarOpen.value ? PanelLeftClose : PanelLeftOpen,
+		icon: toggleIcon(),
 		sx: appShellStyles.toggle
 	}, propsSidebarToggle.value, {
 		ref: (element) => toggleButton.value = toElement(element),
-		"aria-expanded": sidebarOpen.value,
+		"aria-expanded": isOpen(),
 		"aria-controls": sidebarId,
-		onClick: () => sidebarOpen.value = !sidebarOpen.value
-	}), {
+		onClick: () => setOpen(!isOpen())
+	}), { "key": "__site0" }), {
 		default: () => [messages.navigationMenu],
 		$stable: true
 	});
@@ -451,33 +535,34 @@ var AppShell = /*#__PURE__*/ _component((_props, _ctx) => {
 				icon: Menu,
 				"aria-label": messages.navigationOpen
 			}, propsMenuButton.value, {
-				"aria-expanded": sidebarOpen.value,
-				onClick: () => sidebarOpen.value = true
+				"aria-expanded": isOpen(),
+				onClick: () => setOpen(true)
 			}), null),
-			hasContent(brand.value) && createVNode("div", mergeAttrs({ sx: [appShellStyles.brand, hasContent(sidebar.value) && (overlay() ? [appShellStyles.brandOverlay, css.bind(appShellDynamicStyles.brandWidth, () => [initialWidth], true)] : [appShellStyles.brandRail, collapsed() && appShellStyles.brandRailCollapsed])] }, propsBrand.value), [brand.value, hasContent(sidebar.value) && overlay() && sidebarToggle()]),
-			!hasContent(brand.value) && hasContent(sidebar.value) && overlay() && sidebarToggle(),
+			hasContent(brand.value) && createVNode("div", mergeAttrs({ sx: [appShellStyles.brand, hasContent(sidebar.value) && (overlay() ? side() === "start" && [appShellStyles.brandOverlay, css.bind(appShellDynamicStyles.brandWidth, () => [initialWidth], true)] : [appShellStyles.brandRail, collapsed() && appShellStyles.brandRailCollapsed])] }, propsBrand.value), [brand.value, hasContent(sidebar.value) && overlay() && !toggleAtEnd() && sidebarToggle()]),
+			!hasContent(brand.value) && hasContent(sidebar.value) && overlay() && !toggleAtEnd() && sidebarToggle(),
 			hasContent(nav.value) && createVNode("div", mergeAttrs({ sx: appShellStyles.nav }, propsNav.value), [nav.value]),
-			createVNode("div", mergeAttrs({ sx: [appShellStyles.headerContent, hasContent(nav.value) && appShellStyles.headerContentAfterNav] }, propsHeaderContent.value), [header.value])
+			createVNode("div", mergeAttrs({ sx: [appShellStyles.headerContent, hasContent(nav.value) && appShellStyles.headerContentAfterNav] }, propsHeaderContent.value), [header.value]),
+			hasContent(sidebar.value) && toggleAtEnd() && sidebarToggle()
 		]),
 		createVNode("div", mergeAttrs({ sx: [appShellStyles.body, docked() && hasContent(aside.value) ? collapsed() ? appShellStyles.withBothCollapsed : appShellStyles.withBoth : docked() ? collapsed() ? appShellStyles.withSidebarCollapsed : appShellStyles.withSidebar : hasContent(aside.value) && appShellStyles.withAside] }, propsBody.value), [
 			docked() && createVNode("div", mergeAttrs({ sx: [
 				appShellStyles.rail,
 				appShellStyles.sidebar,
 				sidebarCollapsible.value && appShellStyles.sidebarColumn
-			] }, propsSidebar.value), [createVNode(ScrollArea, mergeProps(mergePartProps({
+			] }, propsSidebar.value), [createVNode(ScrollArea, mergeJsxProps(mergePartProps({
 				sx: [appShellStyles.railScroll, sidebarCollapsible.value && appShellStyles.sidebarScroll],
 				propsViewport: { sx: appShellStyles.railViewport },
 				propsContent: { sx: [appShellStyles.sidebarContent, css.select(() => collapsed() && appShellStyles.sidebarContentCompact, true)] }
-			}, propsSidebarScroll.value), { "key": "__site0" }), {
+			}, propsSidebarScroll.value), { "key": "__site1" }), {
 				default: () => [unref(sidebar)],
 				$stable: true
 			}), sidebarCollapsible.value && createVNode("div", css.attrs(appShellStyles.collapseBar, css.select(() => collapsed() && appShellStyles.collapseBarCollapsed, true)), [createVNode(IconButton, mergePartProps({
-				icon: sidebarCollapsed.value ? PanelLeftOpen : PanelLeftClose,
+				icon: isCollapsed() ? PanelLeftOpen : PanelLeftClose,
 				size: "sm",
 				variant: "ghost",
 				propsIcon: { flipInRtl: true },
-				"aria-label": sidebarCollapsed.value ? messages.sidebarExpand : messages.sidebarCollapse
-			}, propsCollapse.value, { onClick: () => sidebarCollapsed.value = !sidebarCollapsed.value }), null)])]),
+				"aria-label": isCollapsed() ? messages.sidebarExpand : messages.sidebarCollapse
+			}, propsCollapse.value, { onClick: () => setCollapsed(!isCollapsed()) }), null)])]),
 			createVNode("div", css.attrs(appShellStyles.column), [
 				hasContent(tabs.value) && createVNode("div", mergeAttrs({ sx: appShellStyles.tabs }, propsTabs.value), [tabs.value]),
 				createVNode("main", mergeAttrs({ sx: [appShellStyles.main, appShellStyles.mainGrow] }, propsMain.value, {
@@ -486,45 +571,62 @@ var AppShell = /*#__PURE__*/ _component((_props, _ctx) => {
 				}), [children.value]),
 				hasContent(footer.value) && createVNode("footer", mergeAttrs({ sx: appShellStyles.footer }, propsFooter.value), [footer.value])
 			]),
-			hasContent(aside.value) && createVNode("aside", mergeAttrs({ sx: [appShellStyles.rail, appShellStyles.aside] }, propsAside.value), [createVNode(ScrollArea, mergeProps(mergePartProps({
+			hasContent(aside.value) && createVNode("aside", mergeAttrs({ sx: [appShellStyles.rail, appShellStyles.aside] }, propsAside.value), [createVNode(ScrollArea, mergeJsxProps(mergePartProps({
 				sx: appShellStyles.railScroll,
 				propsViewport: { sx: appShellStyles.railViewport },
 				propsContent: { sx: appShellStyles.asideContent }
-			}, propsAsideScroll.value), { "key": "__site1" }), {
+			}, propsAsideScroll.value), { "key": "__site2" }), {
 				default: () => [unref(aside)],
 				$stable: true
 			})])
 		]),
 		hasContent(sidebar.value) && overlay() && createVNode("div", mergeAttrs({ sx: [
 			appShellStyles.overlay,
-			sidebarOpen.value && appShellStyles.overlayOpen,
-			css.bind(appShellDynamicStyles.width, () => [sidebarWidth.value], true)
+			side() === "start" && appShellStyles.overlayStart,
+			side() === "end" && appShellStyles.overlayEnd,
+			side() === "top" && appShellStyles.overlayTop,
+			side() === "bottom" && appShellStyles.overlayBottom,
+			isOpen() && appShellStyles.overlayOpen,
+			lateral() ? css.bind(appShellDynamicStyles.width, () => [widthOf()], true) : css.bind(appShellDynamicStyles.height, () => [heightOf()], true)
 		] }, propsSidebar.value, {
 			id: sidebarId,
-			inert: !sidebarOpen.value,
+			inert: !isOpen(),
 			onKeydown: onOverlayKeydown,
 			onClick: closeOnNavigate
-		}), [createVNode(ScrollArea, mergeProps(mergePartProps({
+		}), [createVNode(ScrollArea, mergeJsxProps(mergePartProps({
 			sx: appShellStyles.overlayScroll,
 			propsViewport: { sx: appShellStyles.railViewport },
-			propsContent: { sx: [appShellStyles.sidebarContent, css.select(() => compact() && appShellStyles.sidebarContentCompact, true)] }
-		}, propsSidebarScroll.value), { "key": "__site2" }), {
+			propsContent: { sx: [
+				appShellStyles.sidebarContent,
+				css.select(() => compact() && appShellStyles.sidebarContentCompact, true),
+				!lateral() && appShellStyles.sidebarContentColumns
+			] }
+		}, propsSidebarScroll.value), { "key": "__site3" }), {
 			default: () => [unref(sidebar)],
 			$stable: true
-		}), createVNode(ResizeHandle, mergeProps({ "aria-label": messages.navigationResize }, propsResizeHandle.value, {
-			"width": sidebarWidth.value,
+		}), lateral() ? createVNode(ResizeHandle, mergeJsxProps({ "aria-label": messages.navigationResize }, propsResizeHandle.value, {
+			"edge": side() === "end" ? "start" : "end",
+			"width": widthOf(),
 			"minWidth": OVERLAY_MIN_WIDTH,
 			"maxWidth": OVERLAY_MAX_WIDTH,
 			"defaultWidth": initialWidth,
-			"onWidthChange": _cache[0] || (_cache[0] = (px) => sidebarWidth.value = px)
+			"onWidthChange": setWidth
+		}), null) : createVNode(ResizeHandle, mergeJsxProps({ "aria-label": messages.navigationResizeHeight }, propsResizeHandle.value, {
+			"orientation": "horizontal",
+			"edge": side() === "top" ? "end" : "start",
+			"width": heightOf(),
+			"minWidth": OVERLAY_MIN_HEIGHT,
+			"maxWidth": OVERLAY_MAX_HEIGHT,
+			"defaultWidth": OVERLAY_HEIGHT,
+			"onWidthChange": setHeight
 		}), null)]),
-		docked() && createVNode(Drawer, mergeProps(mergePartProps({
+		docked() && createVNode(Drawer, mergeJsxProps(mergePartProps({
 			title: messages.navigation,
 			side: "start"
 		}, propsDrawer.value, { onClick: closeOnNavigate }), {
-			"_open": sidebarOpen.value,
-			"onUpdate:_open": _cache[1] || (_cache[1] = ($event) => sidebarOpen.value = $event),
-			"key": "__site3"
+			"_open": isOpen(),
+			"onUpdate:_open": setOpen,
+			"key": "__site4"
 		}), {
 			default: () => [unref(sidebar)],
 			$stable: true
@@ -541,10 +643,14 @@ var AppShell = /*#__PURE__*/ _component((_props, _ctx) => {
 		"tabs",
 		"footer",
 		"sidebarMode",
+		"sidebarSide",
+		"layout",
 		"_sidebarOpen",
 		"onUpdate:_sidebarOpen",
 		"_sidebarWidth",
 		"onUpdate:_sidebarWidth",
+		"_sidebarHeight",
+		"onUpdate:_sidebarHeight",
 		"sidebarCollapsible",
 		"_sidebarCollapsed",
 		"onUpdate:_sidebarCollapsed",

package/dist/patterns/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vtp_untrack","_vue_shallowRef","_createVNode","MenuIcon","_mergeProps","_vue_unref"],"sources":["../../src/patterns/AppShell.tsx"],"sourcesContent":["/**\n * 应用外壳：粘性顶栏、左侧栏（导航）、正文、右侧栏（本页目录），文档站与后台的整页骨架。\n *\n *   <AppShell\n *     brand={<AppShellBrand href=\"/\" icon={Boxes}>采购管理平台</AppShellBrand>}\n *     header={<><CommandPalette … /><ThemeSwitcher preference={preference} /></>}\n *     sidebar={<NavList aria-label=\"文档\">…</NavList>}\n *     aside={<TableOfContents items={headings} />}\n *   >\n *     <Prose>…</Prose>\n *   </AppShell>\n *\n * 响应式（宽度按容器档位 sizes.lg / sizes.xl）：\n * - 64rem 以上显示左侧栏；更窄时收进从起始边滑出的 Drawer，顶栏最前面出现打开它的按钮。\n *   抽屉里点了链接（换页）、或窗口变宽时自动关闭。\n * - 80rem 以上显示右侧栏；更窄时不显示（目录这类辅助内容）。\n * 两侧栏粘在顶栏下面，内容多时各自滚动（ScrollArea）。顶栏半透明，滚动的正文从下面透出（backdrop-filter）。\n * 整页与两侧栏都是浮层滚动条（PageScrollbar、ScrollArea）：不占宽度，滚动时出现。\n *\n * 写了 brand 时，侧栏常驻的宽度下品牌这一格与侧栏同宽，侧栏的竖线一直延伸到顶栏顶端，\n * header 的内容从竖线之后开始、与正文的起始边对齐（本页的页签放在这里）。\n *\n * sidebarMode=\"overlay\"：侧栏改为盖在页面上面的抽屉，开不开都不占正文的位置（正文总是整宽，布局不随侧栏变化）。\n * “菜单”按钮固定在顶栏品牌格的结束边，开关都是它（aria-expanded）；抽屉从顶栏下面弹出、盖在正文上。\n * 抽屉结束边可以拖动调整宽度（ResizeHandle，也能聚焦后用 ← / →，双击回到初始宽度），父级写 _sidebarWidth={x} 记住；\n * 顶栏的品牌格按初始宽度，拖动时不变。焦点在抽屉里时按 Esc 收起、焦点回到“菜单”；窄屏时点了链接也收起。\n * 拖到比 160px 窄时侧栏变紧凑：里面的 NavList 只显示图标（名称在提示里），小节标题只剩图标（NavCompactContext）。\n *\n * 品牌格里一般放 AppShellBrand：品牌色的标志与产品名，点了回首页；自己的标志图写在它的 logo 里。\n *\n * 几种布局与区域：\n * - nav：顶栏里品牌后面的导航（NavBar）。只有 nav 时是顶部导航布局，和 sidebar 一起时是混合布局（顶栏一级、侧栏二级）。\n * - tabs：正文上面的页签区（PageTabs，和路由同步用 useRouteTabs）；footer：正文下面的页脚，内容少时也贴着底部。\n * - sidebarCollapsible：docked 侧栏底部有“收起侧栏”，收起后只剩图标栏（宽屏时；导航变紧凑、分组悬停弹出，\n *   品牌格只剩标志），父级写 _sidebarCollapsed={x} 记住。\n *\n * 自带 SkipLink（跳到正文）；顶栏的高度经 layoutVars.stickyOffset 交给里面的标题，锚点跳转后不被顶栏挡住。\n */\nimport { Menu as MenuIcon, PanelLeftClose, PanelLeftOpen } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, watch, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { useMessages } from '../config/lang/messages';\nimport { patternsMessages } from './messages';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { NavCompactContext } from '../navigation/NavList';\nimport { SkipLink } from '../navigation/SkipLink';\nimport { PageScrollbar } from '../layout/PageScrollbar';\nimport { ResizeHandle, type ResizeHandleProps } from '../layout/ResizeHandle';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { Drawer, type DrawerProps } from '../overlay/Drawer';\nimport { useMediaQuery } from '../utils/dom/media-query';\nimport { toElement } from '../utils/dom/element';\nimport { useRouterLink } from '../utils/dom/link';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { breakpoints, t } from '../config/theme/tokens';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { layoutVars } from '../utils/style/vars';\n\n/** 顶栏高度：也是两侧栏粘住的位置、标题跳转时让开的距离 */\nconst HEADER_HEIGHT = '3rem';\n/** 左侧栏的宽度：顶栏的品牌格与它同宽 */\nconst SIDEBAR_WIDTH = '16rem';\n/** 侧栏收起成图标栏时的宽度 */\nconst RAIL_WIDTH = '3.5rem';\n/** 抽屉式侧栏的默认宽度与可以拖动的范围（px） */\nconst OVERLAY_WIDTH = 256;\n// 最窄可以收到只剩滚动条那么宽\nconst OVERLAY_MIN_WIDTH = 16;\nconst OVERLAY_MAX_WIDTH = 480;\n// 比它窄时侧栏只放得下图标：导航变紧凑\nconst OVERLAY_COMPACT_WIDTH = 160;\n// 运行时判断侧栏是否常驻（useMediaQuery 要的是不带 @media 的查询）\nconst WIDE_QUERY = breakpoints.lg.replace('@media ', '');\n\n/** 左侧栏的形式 */\nexport interface AppShellSidebarModes {\n  /** 宽屏时占一列、窄屏时收进抽屉（默认） */\n  docked: unknown;\n  /** 各宽度都是盖在页面上面的抽屉，不占正文的位置，可以收起、拖动宽度 */\n  overlay: unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface AppShellProps extends PartProps<'div'> {\n  /** 顶栏起始边的品牌（标志与产品名）：有侧栏时这一格与侧栏同宽，侧栏的竖线延伸到顶 */\n  brand?: VNodeChild;\n  /** 顶栏的内容：搜索、本页的页签、主题切换…（没写 brand 时标志也放这里） */\n  header?: VNodeChild;\n  /** 左侧栏：站点导航；窄屏时收进抽屉 */\n  sidebar?: VNodeChild;\n  /** 右侧栏：本页目录等辅助内容；较窄时不显示 */\n  aside?: VNodeChild;\n  /** 顶栏里品牌后面的导航（NavBar）：只有它时是顶部导航布局，和 sidebar 一起时是混合布局（顶栏一级、侧栏二级） */\n  nav?: VNodeChild;\n  /** 正文上面的页签区（PageTabs：打开过的页面） */\n  tabs?: VNodeChild;\n  /** 正文下面的页脚（版权、备案号、版本） */\n  footer?: VNodeChild;\n  /** docked 侧栏底部有“收起侧栏”按钮：收起后只剩图标栏（导航变紧凑，分组的子项悬停弹出） */\n  sidebarCollapsible?: boolean;\n  /** docked 侧栏收起了：父级可以写 _sidebarCollapsed={x} 记住 */\n  _sidebarCollapsed?: boolean;\n  /** 左侧栏的形式，默认 docked */\n  sidebarMode?: keyof AppShellSidebarModes;\n  /** 侧栏抽屉是否打开（docked 时只在窄屏有抽屉）：父级可以写 _sidebarOpen={x} */\n  _sidebarOpen?: boolean;\n  /**\n   * overlay 抽屉的宽度（px），默认 256，范围 16–480（窄到几乎只剩滚动条；比 160 窄时导航只显示图标）：\n   * 父级写 _sidebarWidth={x} 记住拖动后的宽度\n   */\n  _sidebarWidth?: number;\n  /** 页面最前面的“跳到正文”链接，默认 true */\n  skipLink?: boolean;\n  /** 整页用浮层滚动条（PageScrollbar：不占宽度，滚动时出现），默认 true */\n  pageScrollbar?: boolean;\n  /** 顶栏（header）的部件属性 */\n  propsHeader?: PartProps<'header'>;\n  /** 品牌格（div）的部件属性 */\n  propsBrand?: PartProps<'div'>;\n  /** 顶栏里 header 内容那一格（div）的部件属性 */\n  propsHeaderContent?: PartProps<'div'>;\n  /** 顶栏下面的主体（侧栏、正文、右栏的栅格）的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 左侧栏（div）的部件属性 */\n  propsSidebar?: PartProps<'div'>;\n  /** 左侧栏里的滚动区域的部件属性（docked 的侧栏与 overlay 的抽屉共用） */\n  propsSidebarScroll?: Partial<ScrollAreaProps>;\n  /** 正文（main）的部件属性 */\n  propsMain?: PartProps<'main'>;\n  /** 顶栏里导航那一格的部件属性 */\n  propsNav?: PartProps<'div'>;\n  /** 页签区的部件属性 */\n  propsTabs?: PartProps<'div'>;\n  /** 页脚（footer）的部件属性 */\n  propsFooter?: PartProps<'footer'>;\n  /** “收起侧栏”按钮的部件属性 */\n  propsCollapse?: Partial<IconButtonProps>;\n  /** 右侧栏（aside）的部件属性 */\n  propsAside?: PartProps<'aside'>;\n  /** 右侧栏里的滚动区域的部件属性 */\n  propsAsideScroll?: Partial<ScrollAreaProps>;\n  /** docked 时窄屏打开侧栏的按钮的部件属性 */\n  propsMenuButton?: Partial<IconButtonProps>;\n  /** overlay 时品牌格里开关抽屉的“菜单”按钮的部件属性 */\n  propsSidebarToggle?: Partial<ButtonProps>;\n  /** overlay 抽屉宽度调整手柄的部件属性 */\n  propsResizeHandle?: Partial<ResizeHandleProps>;\n  /** 窄屏时的侧栏抽屉的部件属性 */\n  propsDrawer?: Partial<DrawerProps>;\n  /** 正文 */\n  children?: VNodeChild;\n}\n\n/** AppShell 交给里面的部件的状态：侧栏收起时品牌只剩标志 */\nexport interface AppShellState {\n  /** docked 侧栏收起成了图标栏（宽屏时） */\n  collapsed: () => boolean;\n}\n\n/** AppShell 的上下文：AppShellBrand 据此在侧栏收起时只显示标志；不在 AppShell 里时为 null */\nexport const AppShellContext = createContext<AppShellState | null>('AppShell');\n\n/** 外壳把顶栏高度交给里面的标题与粘性侧栏 */\nexport const appShellOffset = css.createTheme(layoutVars, { stickyOffset: HEADER_HEIGHT });\n\n/** AppShell 的样式：root、header、menuButton、body、sidebar、main、aside 等 */\nexport const appShellStyles = css.create({\n  // 整页的界面基准文字（同 Provider）：没有 Provider 时页面是浏览器默认的 16px，与组件的 md 档位对不上\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: '100dvh',\n    color: '_text',\n    fontSize: '_md',\n    lineHeight: '_normal',\n  },\n  header: {\n    position: 'sticky',\n    top: 0,\n    // 盖住滚动的正文与粘性侧栏；低于浮层（顶层渲染）与 SkipLink\n    zIndex: 10,\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_md',\n    height: HEADER_HEIGHT,\n    flexShrink: 0,\n    paddingInline: '_lg',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_border',\n    backgroundColor: '_surfaceTranslucent',\n    backdropFilter: 'blur(12px) saturate(1.5)',\n  },\n  menuButton: { display: { default: 'inline-flex', [breakpoints.lg]: 'none' }, flexShrink: 0 },\n  // 有品牌格与侧栏：宽屏时品牌格贴着起始边；品牌格与内容之间隔开正文的内边距，内容与正文的起始边对齐\n  headerWithBrand: {\n    paddingInlineStart: { default: null, [breakpoints.lg]: 0 },\n    columnGap: { default: null, [breakpoints.lg]: '_xl' },\n  },\n  brand: { display: 'flex', alignItems: 'center', gap: '_sm', flexShrink: 0, minWidth: 0 },\n  // 宽屏时与侧栏同宽，结束边的竖线与侧栏的竖线接上\n  brandRail: {\n    alignSelf: { default: null, [breakpoints.lg]: 'stretch' },\n    boxSizing: 'border-box',\n    width: { default: null, [breakpoints.lg]: SIDEBAR_WIDTH },\n    paddingInline: { default: null, [breakpoints.lg]: '_lg' },\n    borderInlineEndWidth: { default: null, [breakpoints.lg]: '_xs' },\n    borderInlineEndStyle: { default: null, [breakpoints.lg]: 'solid' },\n    borderInlineEndColor: { default: null, [breakpoints.lg]: '_border' },\n  },\n  headerContent: { display: 'flex', alignItems: 'center', gap: '_md', flexGrow: 1, minWidth: 0 },\n  body: { display: 'grid', flexGrow: 1, gridTemplateColumns: 'minmax(0, 1fr)' },\n  withSidebar: {\n    gridTemplateColumns: { default: null, [breakpoints.lg]: `${SIDEBAR_WIDTH} minmax(0, 1fr)` },\n  },\n  withAside: { gridTemplateColumns: { default: null, [breakpoints.xl]: 'minmax(0, 1fr) 14rem' } },\n  // 一个属性上两个断点：窄的一档用 lgOnly，不和 xl 重叠（见 breakpoints 的说明）\n  withBoth: {\n    gridTemplateColumns: {\n      default: null,\n      [breakpoints.lgOnly]: `${SIDEBAR_WIDTH} minmax(0, 1fr)`,\n      [breakpoints.xl]: `${SIDEBAR_WIDTH} minmax(0, 1fr) 14rem`,\n    },\n  },\n  // 两侧栏：粘在顶栏下面、占满剩下的视口高度，内容多时各自滚动，滚到头不带动页面\n  rail: {\n    position: 'sticky',\n    top: layoutVars.stickyOffset,\n    boxSizing: 'border-box',\n    height: `calc(100dvh - ${layoutVars.stickyOffset})`,\n  },\n  // 侧栏里的滚动区域：浮层滚动条，滚到头不带动页面；内边距放在内容层上，滚动条贴着侧栏边缘\n  railScroll: { height: '_full' },\n  railViewport: { overscrollBehavior: 'contain' },\n  sidebar: {\n    display: { default: 'none', [breakpoints.lg]: 'block' },\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_border',\n  },\n  sidebarContent: { paddingBlock: '_xl', paddingInline: '_md' },\n  // 紧凑的侧栏：两边只留一点，图标居中\n  sidebarContentCompact: { paddingInline: '_xs' },\n  aside: { display: { default: 'none', [breakpoints.xl]: 'block' } },\n  asideContent: { paddingBlock: '_xl', paddingInline: '_lg' },\n  // 正文由 SkipLink 聚焦（tabindex=-1）：不显示焦点框\n  main: { minWidth: 0, paddingBlock: '_xl', paddingInline: '_xl', outlineStyle: 'none' },\n  // overlay：从顶栏下面弹出、盖在正文上（低于顶栏与顶层渲染的浮层）；从起始边滑入，收起后不显示（inert，不能聚焦）。\n  // 打开时 translate 是 none：否则抽屉会成为里面 fixed 元素的包含块（同 Drawer）\n  overlay: {\n    position: 'fixed',\n    top: HEADER_HEIGHT,\n    bottom: 0,\n    insetInlineStart: 0,\n    zIndex: 9,\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    maxWidth: 'calc(100vw - 3rem)',\n    // 拖得很窄时内容裁在抽屉里，不溢出到正文上\n    overflow: 'hidden',\n    backgroundColor: '_surface',\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_border',\n    boxShadow: '_lg',\n    // 收起：滑出去之后再隐藏（visibility 延迟到滑完）\n    visibility: 'hidden',\n    translate: { default: '-100% 0', ':dir(rtl)': '100% 0' },\n    transition: `translate ${t.durations.md} ${t.easings.exit}, visibility 0s linear ${t.durations.md}`,\n  },\n  // 打开：立刻可见，再滑进来\n  overlayOpen: {\n    visibility: 'visible',\n    translate: 'none',\n    transition: `translate ${t.durations.lg} ${t.easings.enter}, visibility 0s`,\n  },\n  overlayScroll: { flexGrow: 1, minHeight: 0 },\n  // overlay 时顶栏的品牌格：宽屏时按抽屉的初始宽度，“菜单”在它的结束边\n  brandOverlay: {\n    alignSelf: { default: null, [breakpoints.lg]: 'stretch' },\n    justifyContent: 'space-between',\n    boxSizing: 'border-box',\n    paddingInlineStart: { default: null, [breakpoints.lg]: '_lg' },\n    paddingInlineEnd: { default: null, [breakpoints.lg]: '_sm' },\n    borderInlineEndWidth: { default: null, [breakpoints.lg]: '_xs' },\n    borderInlineEndStyle: { default: null, [breakpoints.lg]: 'solid' },\n    borderInlineEndColor: { default: null, [breakpoints.lg]: '_border' },\n  },\n  toggle: { flexShrink: 0 },\n  // 侧栏收起成图标栏：栅格的第一列、品牌格都变窄，品牌只剩标志\n  withSidebarCollapsed: {\n    gridTemplateColumns: { default: null, [breakpoints.lg]: `${RAIL_WIDTH} minmax(0, 1fr)` },\n  },\n  withBothCollapsed: {\n    gridTemplateColumns: {\n      default: null,\n      [breakpoints.lgOnly]: `${RAIL_WIDTH} minmax(0, 1fr)`,\n      [breakpoints.xl]: `${RAIL_WIDTH} minmax(0, 1fr) 14rem`,\n    },\n  },\n  brandRailCollapsed: {\n    width: { default: null, [breakpoints.lg]: RAIL_WIDTH },\n    justifyContent: { default: null, [breakpoints.lg]: 'center' },\n    paddingInline: { default: null, [breakpoints.lg]: '_xs' },\n  },\n  // 有收起按钮的侧栏：滚动区域占满剩下的高度，按钮在最下面\n  sidebarColumn: {\n    display: { default: 'none', [breakpoints.lg]: 'flex' },\n    flexDirection: 'column',\n  },\n  sidebarScroll: { flexGrow: 1, minHeight: 0, height: 'auto' },\n  collapseBar: {\n    display: 'flex',\n    justifyContent: 'flex-end',\n    flexShrink: 0,\n    padding: '_sm',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n  },\n  collapseBarCollapsed: { justifyContent: 'center' },\n  // 顶栏的导航：占品牌与右边工具之间的位置；有导航时右边的工具按内容宽、靠结束边\n  nav: { display: 'flex', alignItems: 'center', alignSelf: 'stretch', flexGrow: 1, minWidth: 0 },\n  headerContentAfterNav: { flexGrow: 0, justifyContent: 'flex-end' },\n  // 正文那一列：页签区、正文、页脚上下排，页脚在内容少时也贴着底部\n  column: { display: 'flex', flexDirection: 'column', minWidth: 0 },\n  mainGrow: { flexGrow: 1 },\n  tabs: { paddingBlockStart: '_sm', paddingInline: '_xl' },\n  footer: {\n    paddingBlock: '_lg',\n    paddingInline: '_xl',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n    color: '_textMuted',\n    fontSize: '_sm',\n  },\n});\n\n/** AppShell 的动态样式：抽屉的宽度、宽屏时品牌格的宽度（px） */\nexport const appShellDynamicStyles = css.create({\n  width: (px: number) => ({ width: px }),\n  brandWidth: (px: number) => ({ width: { default: null, [breakpoints.lg]: px } }),\n});\n\n/** 应用外壳：粘性顶栏、左侧栏、正文、右侧栏；窄屏时左侧栏收进抽屉 */\nexport const AppShell = _component(\n  ({\n    brand,\n    header,\n    sidebar,\n    aside,\n    nav,\n    tabs,\n    footer,\n    sidebarMode = 'docked',\n    _sidebarOpen: sidebarOpen = _bindable(false),\n    _sidebarWidth: sidebarWidth = _bindable(OVERLAY_WIDTH),\n    sidebarCollapsible = false,\n    _sidebarCollapsed: sidebarCollapsed = _bindable(false),\n    skipLink = true,\n    pageScrollbar = true,\n    propsHeader,\n    propsBrand,\n    propsSidebar,\n    propsMain,\n    propsAside,\n    propsMenuButton,\n    propsSidebarToggle,\n    propsResizeHandle,\n    propsDrawer,\n    propsHeaderContent,\n    propsBody,\n    propsSidebarScroll,\n    propsAsideScroll,\n    propsNav,\n    propsTabs,\n    propsFooter,\n    propsCollapse,\n    children,\n    ...rest\n  }: AppShellProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const id = useId();\n    const mainId = `${id}-main`;\n    const sidebarId = `${id}-sidebar`;\n    const overlay = () => sidebarMode === 'overlay';\n    const docked = () => hasContent(sidebar) && !overlay();\n    const wide = useMediaQuery(WIDE_QUERY);\n    // docked 的侧栏收起成图标栏：只在宽屏（窄屏时侧栏在抽屉里，抽屉总是完整的）\n    const collapsed = () => docked() && sidebarCollapsible && sidebarCollapsed && wide.value;\n    const compact = () => (overlay() && sidebarWidth < OVERLAY_COMPACT_WIDTH) || collapsed();\n    NavCompactContext.provide(compact);\n    AppShellContext.provide({ collapsed });\n    // docked：变宽后侧栏已经显示出来，抽屉没必要再开着\n    watch(wide, (isWide) => {\n      if (isWide && !overlay()) sidebarOpen = false;\n    });\n    // 抽屉里点了链接（通常是换页）：关闭抽屉；overlay 在宽屏时不关（挡不住正文的主要部分，常要连着换几页）\n    function closeOnNavigate(event: MouseEvent) {\n      if (overlay() && wide.value) return;\n      if (event.target instanceof Element && event.target.closest('a[href]')) sidebarOpen = false;\n    }\n\n    // overlay：品牌格按初始宽度，拖动抽屉时不变；双击手柄回到它\n    // 记住的宽度是拖窄后的紧凑宽度时，品牌格与双击回到的宽度按默认宽度（品牌格太窄会和顶栏的内容叠在一起）\n    const remembered = _untrack(sidebarWidth);\n    const initialWidth = remembered < OVERLAY_COMPACT_WIDTH ? OVERLAY_WIDTH : remembered;\n    // Esc 收起：焦点在抽屉里，收起后它不能聚焦了，回到“菜单”\n    let toggleButton = _state.raw<HTMLElement | null>(null);\n    function onOverlayKeydown(event: KeyboardEvent) {\n      if (event.key !== 'Escape' || event.defaultPrevented) return;\n      event.preventDefault();\n      sidebarOpen = false;\n      toggleButton?.focus();\n    }\n\n    /** overlay 的“菜单”：开关抽屉，图标随开关切换 */\n    const sidebarToggle = () => (\n      <Button\n        {...mergePartProps<ButtonProps>(\n          {\n            variant: 'ghost',\n            tone: 'neutral',\n            size: 'sm',\n            icon: sidebarOpen ? PanelLeftClose : PanelLeftOpen,\n            sx: appShellStyles.toggle,\n          },\n          propsSidebarToggle,\n          {\n            ref: (element: unknown) => (toggleButton = toElement(element)),\n            'aria-expanded': sidebarOpen,\n            'aria-controls': sidebarId,\n            onClick: () => (sidebarOpen = !sidebarOpen),\n          },\n        )}\n      >\n        {messages.navigationMenu}\n      </Button>\n    );\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: [appShellStyles.root, appShellOffset] }, rest)}>\n        {skipLink && <SkipLink href={`#${mainId}`} />}\n        {pageScrollbar && <PageScrollbar />}\n        <header\n          {...mergeAttrs<'header'>(\n            {\n              sx: [\n                appShellStyles.header,\n                hasContent(brand) && hasContent(sidebar) && appShellStyles.headerWithBrand,\n              ],\n            },\n            propsHeader,\n          )}\n        >\n          {hasContent(sidebar) && !overlay() && (\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                {\n                  sx: appShellStyles.menuButton,\n                  icon: MenuIcon,\n                  'aria-label': messages.navigationOpen,\n                },\n                propsMenuButton,\n                { 'aria-expanded': sidebarOpen, onClick: () => (sidebarOpen = true) },\n              )}\n            />\n          )}\n          {hasContent(brand) && (\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    appShellStyles.brand,\n                    hasContent(sidebar) &&\n                      (overlay()\n                        ? [\n                            appShellStyles.brandOverlay,\n                            appShellDynamicStyles.brandWidth(initialWidth),\n                          ]\n                        : [\n                            appShellStyles.brandRail,\n                            collapsed() && appShellStyles.brandRailCollapsed,\n                          ]),\n                  ],\n                },\n                propsBrand,\n              )}\n            >\n              {brand}\n              {hasContent(sidebar) && overlay() && sidebarToggle()}\n            </div>\n          )}\n          {!hasContent(brand) && hasContent(sidebar) && overlay() && sidebarToggle()}\n          {hasContent(nav) && (\n            <div {...mergeAttrs<'div'>({ sx: appShellStyles.nav }, propsNav)}>{nav}</div>\n          )}\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  appShellStyles.headerContent,\n                  hasContent(nav) && appShellStyles.headerContentAfterNav,\n                ],\n              },\n              propsHeaderContent,\n            )}\n          >\n            {header}\n          </div>\n        </header>\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                appShellStyles.body,\n                docked() && hasContent(aside)\n                  ? collapsed()\n                    ? appShellStyles.withBothCollapsed\n                    : appShellStyles.withBoth\n                  : docked()\n                    ? collapsed()\n                      ? appShellStyles.withSidebarCollapsed\n                      : appShellStyles.withSidebar\n                    : hasContent(aside) && appShellStyles.withAside,\n              ],\n            },\n            propsBody,\n          )}\n        >\n          {docked() && (\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    appShellStyles.rail,\n                    appShellStyles.sidebar,\n                    sidebarCollapsible && appShellStyles.sidebarColumn,\n                  ],\n                },\n                propsSidebar,\n              )}\n            >\n              <ScrollArea\n                {...mergePartProps<ScrollAreaProps>(\n                  {\n                    sx: [\n                      appShellStyles.railScroll,\n                      sidebarCollapsible && appShellStyles.sidebarScroll,\n                    ],\n                    propsViewport: { sx: appShellStyles.railViewport },\n                    propsContent: {\n                      sx: [\n                        appShellStyles.sidebarContent,\n                        collapsed() && appShellStyles.sidebarContentCompact,\n                      ],\n                    },\n                  },\n                  propsSidebarScroll,\n                )}\n              >\n                {sidebar}\n              </ScrollArea>\n              {sidebarCollapsible && (\n                <div\n                  {...css.attrs(\n                    appShellStyles.collapseBar,\n                    collapsed() && appShellStyles.collapseBarCollapsed,\n                  )}\n                >\n                  <IconButton\n                    {...mergePartProps<IconButtonProps>(\n                      {\n                        icon: sidebarCollapsed ? PanelLeftOpen : PanelLeftClose,\n                        size: 'sm',\n                        variant: 'ghost',\n                        propsIcon: { flipInRtl: true },\n                        'aria-label': sidebarCollapsed\n                          ? messages.sidebarExpand\n                          : messages.sidebarCollapse,\n                      },\n                      propsCollapse,\n                      { onClick: () => (sidebarCollapsed = !sidebarCollapsed) },\n                    )}\n                  />\n                </div>\n              )}\n            </div>\n          )}\n          <div {...css.attrs(appShellStyles.column)}>\n            {hasContent(tabs) && (\n              <div {...mergeAttrs<'div'>({ sx: appShellStyles.tabs }, propsTabs)}>{tabs}</div>\n            )}\n            <main\n              {...mergeAttrs<'main'>(\n                { sx: [appShellStyles.main, appShellStyles.mainGrow] },\n                propsMain,\n                {\n                  id: mainId,\n                  tabindex: -1,\n                },\n              )}\n            >\n              {children}\n            </main>\n            {hasContent(footer) && (\n              <footer {...mergeAttrs<'footer'>({ sx: appShellStyles.footer }, propsFooter)}>\n                {footer}\n              </footer>\n            )}\n          </div>\n          {hasContent(aside) && (\n            <aside\n              {...mergeAttrs<'aside'>(\n                { sx: [appShellStyles.rail, appShellStyles.aside] },\n                propsAside,\n              )}\n            >\n              <ScrollArea\n                {...mergePartProps<ScrollAreaProps>(\n                  {\n                    sx: appShellStyles.railScroll,\n                    propsViewport: { sx: appShellStyles.railViewport },\n                    propsContent: { sx: appShellStyles.asideContent },\n                  },\n                  propsAsideScroll,\n                )}\n              >\n                {aside}\n              </ScrollArea>\n            </aside>\n          )}\n        </div>\n        {hasContent(sidebar) && overlay() && (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  appShellStyles.overlay,\n                  sidebarOpen && appShellStyles.overlayOpen,\n                  appShellDynamicStyles.width(sidebarWidth),\n                ],\n              },\n              propsSidebar,\n              {\n                id: sidebarId,\n                inert: !sidebarOpen,\n                onKeydown: onOverlayKeydown,\n                onClick: closeOnNavigate,\n              },\n            )}\n          >\n            <ScrollArea\n              {...mergePartProps<ScrollAreaProps>(\n                {\n                  sx: appShellStyles.overlayScroll,\n                  propsViewport: { sx: appShellStyles.railViewport },\n                  propsContent: {\n                    sx: [\n                      appShellStyles.sidebarContent,\n                      compact() && appShellStyles.sidebarContentCompact,\n                    ],\n                  },\n                },\n                propsSidebarScroll,\n              )}\n            >\n              {sidebar}\n            </ScrollArea>\n            <ResizeHandle\n              aria-label={messages.navigationResize}\n              {...propsResizeHandle}\n              width={sidebarWidth}\n              minWidth={OVERLAY_MIN_WIDTH}\n              maxWidth={OVERLAY_MAX_WIDTH}\n              defaultWidth={initialWidth}\n              onWidthChange={(px: number) => (sidebarWidth = px)}\n            />\n          </div>\n        )}\n        {docked() && (\n          <Drawer\n            {...mergePartProps<DrawerProps>(\n              { title: messages.navigation, side: 'start' },\n              propsDrawer,\n              {\n                onClick: closeOnNavigate,\n              },\n            )}\n            _open={sidebarOpen}\n          >\n            {sidebar}\n          </Drawer>\n        )}\n      </div>\n    );\n  },\n);\n\n/** 未声明的属性落到链接（a）上 */\nexport interface AppShellBrandProps extends PartProps<'a', 'href'> {\n  /** 点了去哪儿，一般是首页 */\n  href: string;\n  /** 标志的图标（品牌色） */\n  icon?: IconData;\n  /** 标志的图片等，写了时不画 icon */\n  logo?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 产品名 */\n  children?: VNodeChild;\n}\n\n/** AppShellBrand 的样式：root、mark */\nexport const appShellBrandStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_sm',\n    flexShrink: 0,\n    color: '_text',\n    textDecoration: 'none',\n    fontWeight: '_semibold',\n    fontSize: '_lg',\n    borderRadius: '_sm',\n  },\n  mark: { color: '_accentText' },\n});\n\n/**\n * 外壳顶栏的品牌：品牌色的标志（装饰，对读屏隐藏）与产品名，名字就是链接的名称，点了回首页（走路由适配）。\n * 放在 AppShell 的 brand 里\n */\nexport const AppShellBrand = _component(\n  ({ href, icon, logo, propsIcon, children, ...rest }: AppShellBrandProps) => {\n    const router = useRouterLink();\n    const shell = AppShellContext.inject(null);\n    return () => (\n      <a\n        {...mergeAttrs<'a'>({ sx: [appShellBrandStyles.root, focusRingStyles.visible] }, rest, {\n          href: router.href(href),\n          onClick: (event: MouseEvent) => router.onClick(event, href),\n        })}\n      >\n        {logo ??\n          (icon && (\n            <Icon\n              {...mergePartProps<IconProps>({ icon, sx: appShellBrandStyles.mark }, propsIcon)}\n            />\n          ))}\n        {/* 侧栏收起成图标栏时品牌格只放得下标志：产品名留给读屏（仍是链接的名称） */}\n        <span {...css.attrs(shell?.collapsed() && visuallyHiddenStyles.hidden)}>{children}</span>\n      </a>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,IAAM,gBAAgB;;AAEtB,IAAM,gBAAgB;;AAEtB,IAAM,aAAa;;AAEnB,IAAM,gBAAgB;AAEtB,IAAM,oBAAoB;AAC1B,IAAM,oBAAoB;AAE1B,IAAM,wBAAwB;AAE9B,IAAM,aAAa,YAAY,GAAG,QAAQ,WAAW,EAAE;;;;;AAwFvD,IAAa,kBAAkB,cAAoC,UAAU;;AAG7E,IAAa,iBAAiB,IAAI,YAAY,YAAY,EAAE,cAAc,cAAc,CAAC;;AAGzF,IAAa,iBAAiB,IAAI,OAAO;CAEvC,MAAM;EACJ,SAAS;EACT,eAAe;EACf,WAAW;EACX,OAAO;EACP,UAAU;EACV,YAAY;CACd;CACA,QAAQ;EACN,UAAU;EACV,KAAK;EAEL,QAAQ;EACR,WAAW;EACX,SAAS;EACT,YAAY;EACZ,KAAK;EACL,QAAQ;EACR,YAAY;EACZ,eAAe;EACf,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;EACrB,iBAAiB;EACjB,gBAAgB;CAClB;CACA,YAAY;EAAE,SAAS;GAAE,SAAS;IAAgB,YAAY,KAAK;EAAO;EAAG,YAAY;CAAE;CAE3F,iBAAiB;EACf,oBAAoB;GAAE,SAAS;IAAO,YAAY,KAAK;EAAE;EACzD,WAAW;GAAE,SAAS;IAAO,YAAY,KAAK;EAAM;CACtD;CACA,OAAO;EAAE,SAAS;EAAQ,YAAY;EAAU,KAAK;EAAO,YAAY;EAAG,UAAU;CAAE;CAEvF,WAAW;EACT,WAAW;GAAE,SAAS;IAAO,YAAY,KAAK;EAAU;EACxD,WAAW;EACX,OAAO;GAAE,SAAS;IAAO,YAAY,KAAK;EAAc;EACxD,eAAe;GAAE,SAAS;IAAO,YAAY,KAAK;EAAM;EACxD,sBAAsB;GAAE,SAAS;IAAO,YAAY,KAAK;EAAM;EAC/D,sBAAsB;GAAE,SAAS;IAAO,YAAY,KAAK;EAAQ;EACjE,sBAAsB;GAAE,SAAS;IAAO,YAAY,KAAK;EAAU;CACrE;CACA,eAAe;EAAE,SAAS;EAAQ,YAAY;EAAU,KAAK;EAAO,UAAU;EAAG,UAAU;CAAE;CAC7F,MAAM;EAAE,SAAS;EAAQ,UAAU;EAAG,qBAAqB;CAAiB;CAC5E,aAAa,EACX,qBAAqB;EAAE,SAAS;GAAO,YAAY,KAAK,GAAG,cAAa;CAAkB,EAC5F;CACA,WAAW,EAAE,qBAAqB;EAAE,SAAS;GAAO,YAAY,KAAK;CAAuB,EAAE;CAE9F,UAAU,EACR,qBAAqB;EACnB,SAAS;GACR,YAAY,SAAS,GAAG,cAAa;GACrC,YAAY,KAAK,GAAG,cAAa;CACpC,EACF;CAEA,MAAM;EACJ,UAAU;EACV,KAAK,WAAW;EAChB,WAAW;EACX,QAAQ,iBAAiB,WAAW,aAAY;CAClD;CAEA,YAAY,EAAE,QAAQ,QAAQ;CAC9B,cAAc,EAAE,oBAAoB,UAAU;CAC9C,SAAS;EACP,SAAS;GAAE,SAAS;IAAS,YAAY,KAAK;EAAQ;EACtD,sBAAsB;EACtB,sBAAsB;EACtB,sBAAsB;CACxB;CACA,gBAAgB;EAAE,cAAc;EAAO,eAAe;CAAM;CAE5D,uBAAuB,EAAE,eAAe,MAAM;CAC9C,OAAO,EAAE,SAAS;EAAE,SAAS;GAAS,YAAY,KAAK;CAAQ,EAAE;CACjE,cAAc;EAAE,cAAc;EAAO,eAAe;CAAM;CAE1D,MAAM;EAAE,UAAU;EAAG,cAAc;EAAO,eAAe;EAAO,cAAc;CAAO;CAGrF,SAAS;EACP,UAAU;EACV,KAAK;EACL,QAAQ;EACR,kBAAkB;EAClB,QAAQ;EACR,WAAW;EACX,SAAS;EACT,eAAe;EACf,UAAU;EAEV,UAAU;EACV,iBAAiB;EACjB,sBAAsB;EACtB,sBAAsB;EACtB,sBAAsB;EACtB,WAAW;EAEX,YAAY;EACZ,WAAW;GAAE,SAAS;GAAW,aAAa;EAAS;EACvD,YAAY,aAAa,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,KAAI,yBAA0B,EAAE,UAAU;CACjG;CAEA,aAAa;EACX,YAAY;EACZ,WAAW;EACX,YAAY,aAAa,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ,MAAK;CAC5D;CACA,eAAe;EAAE,UAAU;EAAG,WAAW;CAAE;CAE3C,cAAc;EACZ,WAAW;GAAE,SAAS;IAAO,YAAY,KAAK;EAAU;EACxD,gBAAgB;EAChB,WAAW;EACX,oBAAoB;GAAE,SAAS;IAAO,YAAY,KAAK;EAAM;EAC7D,kBAAkB;GAAE,SAAS;IAAO,YAAY,KAAK;EAAM;EAC3D,sBAAsB;GAAE,SAAS;IAAO,YAAY,KAAK;EAAM;EAC/D,sBAAsB;GAAE,SAAS;IAAO,YAAY,KAAK;EAAQ;EACjE,sBAAsB;GAAE,SAAS;IAAO,YAAY,KAAK;EAAU;CACrE;CACA,QAAQ,EAAE,YAAY,EAAE;CAExB,sBAAsB,EACpB,qBAAqB;EAAE,SAAS;GAAO,YAAY,KAAK,GAAG,WAAU;CAAkB,EACzF;CACA,mBAAmB,EACjB,qBAAqB;EACnB,SAAS;GACR,YAAY,SAAS,GAAG,WAAU;GAClC,YAAY,KAAK,GAAG,WAAU;CACjC,EACF;CACA,oBAAoB;EAClB,OAAO;GAAE,SAAS;IAAO,YAAY,KAAK;EAAW;EACrD,gBAAgB;GAAE,SAAS;IAAO,YAAY,KAAK;EAAS;EAC5D,eAAe;GAAE,SAAS;IAAO,YAAY,KAAK;EAAM;CAC1D;CAEA,eAAe;EACb,SAAS;GAAE,SAAS;IAAS,YAAY,KAAK;EAAO;EACrD,eAAe;CACjB;CACA,eAAe;EAAE,UAAU;EAAG,WAAW;EAAG,QAAQ;CAAO;CAC3D,aAAa;EACX,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,SAAS;EACT,uBAAuB;EACvB,uBAAuB;EACvB,uBAAuB;CACzB;CACA,sBAAsB,EAAE,gBAAgB,SAAS;CAEjD,KAAK;EAAE,SAAS;EAAQ,YAAY;EAAU,WAAW;EAAW,UAAU;EAAG,UAAU;CAAE;CAC7F,uBAAuB;EAAE,UAAU;EAAG,gBAAgB;CAAW;CAEjE,QAAQ;EAAE,SAAS;EAAQ,eAAe;EAAU,UAAU;CAAE;CAChE,UAAU,EAAE,UAAU,EAAE;CACxB,MAAM;EAAE,mBAAmB;EAAO,eAAe;CAAM;CACvD,QAAQ;EACN,cAAc;EACd,eAAe;EACf,uBAAuB;EACvB,uBAAuB;EACvB,uBAAuB;EACvB,OAAO;EACP,UAAU;CACZ;AACF,CAAC;;AAGD,IAAa,wBAAwB,IAAI,OAAO;CAC9C,QAAQ,QAAgB,EAAE,OAAO,GAAG;CACpC,aAAa,QAAgB,EAAE,OAAO;EAAE,SAAS;GAAO,YAAY,KAAK;CAAG,EAAE;AAChF,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SAkCqB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,eA1BL,QAAQ;CAAA,MAAA,cAAAC,SAAA,QAAA,sBACgB,OAAK,KAAA,IAAA;CAAA,MAAA,eAAAA,SAAA,QAAA,uBACH,eAAa,KAAA,IAAA;CAAA,MAAA,qBAAAD,aAAA,QAAA,sBAChC,KAAK;CAAA,MAAA,mBAAAC,SAAA,QAAA,2BACsB,OAAK,KAAA,IAAA;CAAA,MAAA,WAAAD,aAAA,QAAA,YAC1C,IAAI;CAAA,MAAA,gBAAAA,aAAA,QAAA,iBACC,IAAI;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,kBAAAA,aAAA,QAAA,iBAAA;CAAA,MAAA,qBAAAA,aAAA,QAAA,oBAAA;CAAA,MAAA,oBAAAA,aAAA,QAAA,mBAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,qBAAAA,aAAA,QAAA,oBAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,qBAAAA,aAAA,QAAA,oBAAA;CAAA,MAAA,mBAAAA,aAAA,QAAA,kBAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAAA,WAAAE,aAAA,MAAA;CAAA,MAmBjB,OAAIC,UAAA,QAAA,MAAA,KAAA;CAEP,MAAM,WAAW,YAAY,YAAY,gBAAgB;CACzD,MAAM,KAAK,MAAM;CACjB,MAAM,SAAS,GAAG,GAAE;CACpB,MAAM,YAAY,GAAG,GAAE;CACvB,MAAM,gBAAgB,YAAA,UAAgB;CACtC,MAAM,eAAe,WAAU,QAAA,KAAQ,KAAK,CAAC,QAAQ;CACrD,MAAM,OAAO,cAAc,UAAU;CAErC,MAAM,kBAAkB,OAAO,KAAC,mBAAA,SAAsB,iBAAA,SAAwB,KAAK;CACnF,MAAM,gBAAiB,QAAQ,KAAK,aAAA,QAAe,yBAA0B,UAAU;CACvF,kBAAkB,QAAQ,OAAO;CACjC,gBAAgB,QAAQ,EAAE,UAAU,CAAC;CAErC,MAAM,OAAO,WAAW;EACtB,IAAI,UAAU,CAAC,QAAQ,GAAG,YAAA,QAAc;CAC1C,CAAC;CAED,SAAS,gBAAgB,OAAmB;EAC1C,IAAI,QAAQ,KAAK,KAAK,OAAO;EAC7B,IAAI,MAAM,kBAAkB,WAAW,MAAM,OAAO,QAAQ,SAAS,GAAG,YAAA,QAAc;CACxF;CAIA,MAAM,aAAUC,cAAA,aAAA,KAAA;CAChB,MAAM,eAAe,aAAa,wBAAwB,gBAAgB;CAE1E,IAAI,eAAYC,WAAkC,IAAI;CACtD,SAAS,iBAAiB,OAAsB;EAC9C,IAAI,MAAM,QAAQ,YAAY,MAAM,kBAAkB;EACtD,MAAM,eAAe;EACrB,YAAA,QAAc;EACd,aAAA,OAAc,MAAM;CACtB;;CAGA,MAAM,sBAAgBC,YAAA,QAEd,eACF;EACE,SAAS;EACT,MAAM;EACN,MAAM;EACN,MAAM,YAAA,QAAc,iBAAiB;EACrC,IAAI,eAAe;CACrB,GAAC,mBAAA,OAED;EACE,MAAM,YAAsB,aAAA,QAAe,UAAU,OAAO;EAC5D,iBAAe,YAAA;EACf,iBAAiB;EACjB,eAAgB,YAAA,QAAc,CAAA,YAAA;CAChC,CACF,GAAC;EAAA,eAAA,CAEA,SAAS,cAAc;EAAA,SAAA;CAAA,CAAA;CAI5B,aAAOA,YAAA,OACI,WAAkB,EAAE,IAAI,CAAC,eAAe,MAAM,cAAc,EAAE,GAAG,IAAI,GAAC;EAC5E,SAAA,SAAAA,YAAA,UAAA,EAAA,QAA4B,IAAI,SAAQ,GAAA,IAAA;EACxC,cAAA,SAAAA,YAAA,eAAA,MAAA,IAAA;EAAkCA,YAAA,UAE7B,WACF,EACE,IAAI,CACF,eAAe,QACf,WAAU,MAAA,KAAM,KAAK,WAAU,QAAA,KAAQ,KAAK,eAAe,eAAe,EAE9E,GAAC,YAAA,KAEH,GAAC;GAEA,WAAU,QAAA,KAAQ,KAAK,CAAC,QAAQ,KAACA,YAAA,YAE1B,eACF;IACE,IAAI,eAAe;IACnB,MAAMC;IACN,cAAc,SAAS;GACzB,GAAC,gBAAA,OAED;IAAE,iBAAe,YAAA;IAAe,eAAgB,YAAA,QAAc;GAAM,CACtE,GAAC,IAAA;GAGJ,WAAU,MAAA,KAAM,KAACD,YAAA,OAEV,WACF,EACE,IAAI,CACF,eAAe,OACf,WAAU,QAAA,KAAQ,MACf,QAAQ,IACL,CACE,eAAe,cAAY,IAAA,KAC3B,sBAAsB,kBAAU,CAAC,YAAY,GAAA,IAAA,CAAA,IAE/C,CACE,eAAe,WACf,UAAU,KAAK,eAAe,kBAAkB,EAChD,EAEZ,GAAC,WAAA,KAEH,GAAC,CAAA,MAAA,OAGA,WAAU,QAAA,KAAQ,KAAK,QAAQ,KAAK,cAAc,CAAC,CAAA;GAGvD,CAAC,WAAU,MAAA,KAAM,KAAK,WAAU,QAAA,KAAQ,KAAK,QAAQ,KAAK,cAAc;GACxE,WAAU,IAAA,KAAI,KAACA,YAAA,OACL,WAAkB,EAAE,IAAI,eAAe,IAAI,GAAC,SAAA,KAAU,GAAC,CAAA,IAAA,KAAA,CAAA;GACjEA,YAAA,OAEK,WACF,EACE,IAAI,CACF,eAAe,eACf,WAAU,IAAA,KAAI,KAAK,eAAe,qBAAqB,EAE3D,GAAC,mBAAA,KAEH,GAAC,CAAA,OAAA,KAAA,CAAA;EAAA,CAAA;EAAAA,YAAA,OAMC,WACF,EACE,IAAI,CACF,eAAe,MACf,OAAO,KAAK,WAAU,MAAA,KAAM,IACxB,UAAU,IACR,eAAe,oBACf,eAAe,WACjB,OAAO,IACL,UAAU,IACR,eAAe,uBACf,eAAe,cACjB,WAAU,MAAA,KAAM,KAAK,eAAe,SAAS,EAEvD,GAAC,UAAA,KAEH,GAAC;GAEA,OAAO,KAACA,YAAA,OAED,WACF,EACE,IAAI;IACF,eAAe;IACf,eAAe;IACf,mBAAA,SAAsB,eAAe;GAAa,EAEtD,GAAC,aAAA,KAEH,GAAC,CAAAA,YAAA,YAAAE,WAGK,eACF;IACE,IAAI,CACF,eAAe,YACf,mBAAA,SAAsB,eAAe,aAAa;IAEpD,eAAe,EAAE,IAAI,eAAe,aAAa;IACjD,cAAc,EACZ,IAAI,CACF,eAAe,gBAAc,IAAA,aAC7B,UAAU,KAAK,eAAe,uBAAqB,IAAA,CAAA,EAEvD;GACF,GAAC,mBAAA,KAEH,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAAAC,MAAA,OAAA,CAAA;IAAA,SAAA;GAAA,CAAA,GAIF,mBAAA,SAAAH,YAAA,OAEO,IAAI,MACN,eAAe,aAAW,IAAA,aAC1B,UAAU,KAAK,eAAe,sBAAoB,IAAA,CACpD,GAAC,CAAAA,YAAA,YAGK,eACF;IACE,MAAM,iBAAA,QAAmB,gBAAgB;IACzC,MAAM;IACN,SAAS;IACT,WAAW,EAAE,WAAW,KAAK;IAC7B,cAAc,iBAAA,QACV,SAAS,gBACT,SAAS;GACf,GAAC,cAAA,OAED,EAAE,eAAgB,iBAAA,QAAmB,CAAA,iBAAA,MAAmB,CAC1D,GAAC,IAAA,CAAA,CAAA,CAGN,CAAA;GAEJA,YAAA,OACQ,IAAI,MAAM,eAAe,MAAM,GAAC;IACtC,WAAU,KAAA,KAAK,KAACA,YAAA,OACN,WAAkB,EAAE,IAAI,eAAe,KAAK,GAAC,UAAA,KAAW,GAAC,CAAA,KAAA,KAAA,CAAA;IACnEA,YAAA,QAEK,WACF,EAAE,IAAI,CAAC,eAAe,MAAM,eAAe,QAAQ,EAAE,GAAC,UAAA,OAEtD;KACE,IAAI;KACJ,UAAU;IACZ,CACF,GAAC,CAAA,SAAA,KAAA,CAAA;IAIF,WAAU,OAAA,KAAO,KAACA,YAAA,UACL,WAAqB,EAAE,IAAI,eAAe,OAAO,GAAC,YAAA,KAAa,GAAC,CAAA,OAAA,KAAA,CAAA;GAG7E,CAAA;GAEF,WAAU,MAAA,KAAM,KAACA,YAAA,SAEV,WACF,EAAE,IAAI,CAAC,eAAe,MAAM,eAAe,KAAK,EAAE,GAAC,WAAA,KAErD,GAAC,CAAAA,YAAA,YAAAE,WAGK,eACF;IACE,IAAI,eAAe;IACnB,eAAe,EAAE,IAAI,eAAe,aAAa;IACjD,cAAc,EAAE,IAAI,eAAe,aAAa;GAClD,GAAC,iBAAA,KAEH,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;IAAA,eAAA,CAAAC,MAAA,KAAA,CAAA;IAAA,SAAA;GAAA,CAAA,CAAA,CAAA;EAKN,CAAA;EAEF,WAAU,QAAA,KAAQ,KAAK,QAAQ,KAACH,YAAA,OAEzB,WACF,EACE,IAAI;GACF,eAAe;GACf,YAAA,SAAe,eAAe;GAAW,IAAA,KACzC,sBAAsB,aAAK,CAAA,aAAA,KAAA,GAAA,IAAA;EAAA,EAE/B,GAAC,aAAA,OAED;GACE,IAAI;GACJ,OAAO,CAAA,YAAA;GACP,WAAW;GACX,SAAS;EACX,CACF,GAAC,CAAAA,YAAA,YAAAE,WAGK,eACF;GACE,IAAI,eAAe;GACnB,eAAe,EAAE,IAAI,eAAe,aAAa;GACjD,cAAc,EACZ,IAAI,CACF,eAAe,gBAAc,IAAA,aAC7B,QAAQ,KAAK,eAAe,uBAAqB,IAAA,CAAA,EAErD;EACF,GAAC,mBAAA,KAEH,GAAC,EAAA,OAAA,UAAA,CAAA,GAAA;GAAA,eAAA,CAAAC,MAAA,OAAA,CAAA;GAAA,SAAA;EAAA,CAAA,GAAAH,YAAA,cAAAE,WAAA,EAAA,cAKW,SAAS,iBAAgB,GAAA,kBAAA,OAAA;GAAA,SAAA,aAAA;GAAA,YAG3B;GAAiB,YACjB;GAAiB,gBACb;GAAY,iBAAA,OAAA,OAAA,OAAA,MACV,OAAgB,aAAA,QAAe;EAAG,CAAA,GAAA,IAAA,CAAA,CAAA;EAIvD,OAAO,KAACF,YAAA,QAAAE,WAED,eACF;GAAE,OAAO,SAAS;GAAY,MAAM;EAAQ,GAAC,YAAA,OAE7C,EACE,SAAS,gBACX,CACF,GAAC;GAAA,SAAA,YAAA;GAAA,kBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,YAAA,QAAA;GAAA,OAAA;EAAA,CAAA,GAAA;GAAA,eAAA,CAAAC,MAAA,OAAA,CAAA;GAAA,SAAA;EAAA,CAAA;CAKJ,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;AAiBA,IAAa,sBAAsB,IAAI,OAAO;CAC5C,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,YAAY;EACZ,OAAO;EACP,gBAAgB;EAChB,YAAY;EACZ,UAAU;EACV,cAAc;CAChB;CACA,MAAM,EAAE,OAAO,cAAc;AAC/B,CAAC;;;;;AAMD,IAAa,gBAAgB,0BAC3B,SAAA,UAA4E;CAAA,MAAA,OAAAT,aAAA,SAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,SAAA,MAAA;CAAA,MAAA,OAAAA,aAAA,SAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,SAAA,WAAA;CAAA,MAAA,WAAAE,aAAA,OAAA;CAAA,MAA/B,OAAIC,UAAA,SAAA,OAAA,KAAA;CAC/C,MAAM,SAAS,cAAc;CAC7B,MAAM,QAAQ,gBAAgB,OAAO,IAAI;CACzC,aAAOG,YAAA,KAEC,WAAgB,EAAE,IAAI,CAAC,oBAAoB,MAAM,gBAAgB,OAAO,EAAE,GAAG,MAAM;EACrF,MAAM,OAAO,KAAI,KAAA,KAAK;EACtB,UAAU,UAAsB,OAAO,QAAQ,OAAK,KAAA,KAAM;CAC5D,CAAC,GAAC,CAED,KAAA,UACE,KAAA,SAAAA,YAAA,MAEO,eAA0B;EAAE,MAAI,KAAA;EAAE,IAAI,oBAAoB;CAAK,GAAC,UAAA,KAAW,GAAC,IAAA,IAElFA,YAAA,QAEM,IAAI,MAAM,OAAO,UAAU,KAAK,qBAAqB,MAAM,GAAC,CAAA,SAAA,KAAA,CAAA,CAAA,CAAA;AAG5E,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"AppShell.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_childrenProp","_vtp_restProps","_vtp_untrack","_vue_shallowRef","_createVNode","_mergeProps","MenuIcon","_vue_unref"],"sources":["../../src/patterns/AppShell.tsx"],"sourcesContent":["/**\n * 应用外壳：粘性顶栏、左侧栏（导航）、正文、右侧栏（本页目录），文档站与后台的整页骨架。\n *\n *   <AppShell\n *     brand={<AppShellBrand href=\"/\" icon={Boxes}>采购管理平台</AppShellBrand>}\n *     header={<><CommandPalette … /><ThemeSwitcher preference={preference} /></>}\n *     sidebar={<NavList aria-label=\"文档\">…</NavList>}\n *     aside={<TableOfContents items={headings} />}\n *   >\n *     <Prose>…</Prose>\n *   </AppShell>\n *\n * 响应式（宽度按容器档位 sizes.lg / sizes.xl）：\n * - 64rem 以上显示左侧栏；更窄时收进从起始边滑出的 Drawer，顶栏最前面出现打开它的按钮。\n *   抽屉里点了链接（换页）、或窗口变宽时自动关闭。\n * - 80rem 以上显示右侧栏；更窄时不显示（目录这类辅助内容）。\n * 两侧栏粘在顶栏下面，内容多时各自滚动（ScrollArea）。顶栏半透明，滚动的正文从下面透出（backdrop-filter）。\n * 整页与两侧栏都是浮层滚动条（PageScrollbar、ScrollArea）：不占宽度，滚动时出现。\n *\n * 写了 brand 时，侧栏常驻的宽度下品牌这一格与侧栏同宽，侧栏的竖线一直延伸到顶栏顶端，\n * header 的内容从竖线之后开始、与正文的起始边对齐（本页的页签放在这里）。\n *\n * sidebarMode=\"overlay\"：侧栏改为盖在页面上面的抽屉，开不开都不占正文的位置（正文总是整宽，布局不随侧栏变化）。\n * “菜单”按钮固定在顶栏品牌格的结束边，开关都是它（aria-expanded）；抽屉从顶栏下面弹出、盖在正文上。\n * 抽屉结束边可以拖动调整宽度（ResizeHandle，也能聚焦后用 ← / →，双击回到初始宽度），父级写 _sidebarWidth={x} 记住；\n * 顶栏的品牌格按初始宽度，拖动时不变。焦点在抽屉里时按 Esc 收起、焦点回到“菜单”；窄屏时点了链接也收起。\n * 拖到比 160px 窄时侧栏变紧凑：里面的 NavList 只显示图标（名称在提示里），小节标题只剩图标（NavCompactContext）。\n * sidebarSide 选抽屉从哪一边滑出：start（默认）、end、top、bottom。start / end 是左右两侧抽屉（随排版方向，从右到左时互换），\n * end 时“菜单”在顶栏结束边；top / bottom 是盖满宽度的上下抽屉，导航的小节排成多列，拖动贴着正文的那条边调整高度\n * （_sidebarHeight 记住）。上下抽屉盖住的正文范围大，点了链接就收起（左右抽屉在宽屏时不收）。\n * 想让用户自己选，用 layout：createLayoutPreference 的结果，侧栏的形式、方向、开关与尺寸都从它读、写回它并存盘，\n * 配合顶栏里的 LayoutSwitcher；写了 layout 时 sidebarMode、sidebarSide、_sidebarOpen 等不再起作用。\n *\n * 品牌格里一般放 AppShellBrand：品牌色的标志与产品名，点了回首页；自己的标志图写在它的 logo 里。\n *\n * 几种布局与区域：\n * - nav：顶栏里品牌后面的导航（NavBar）。只有 nav 时是顶部导航布局，和 sidebar 一起时是混合布局（顶栏一级、侧栏二级）。\n * - tabs：正文上面的页签区（PageTabs，和路由同步用 useRouteTabs）；footer：正文下面的页脚，内容少时也贴着底部。\n * - sidebarCollapsible：docked 侧栏底部有“收起侧栏”，收起后只剩图标栏（宽屏时；导航变紧凑、分组悬停弹出，\n *   品牌格只剩标志），父级写 _sidebarCollapsed={x} 记住。\n *\n * 自带 SkipLink（跳到正文）；顶栏的高度经 layoutVars.stickyOffset 交给里面的标题，锚点跳转后不被顶栏挡住。\n */\nimport {\n  Menu as MenuIcon,\n  PanelBottomClose,\n  PanelBottomOpen,\n  PanelLeftClose,\n  PanelLeftOpen,\n  PanelRightClose,\n  PanelRightOpen,\n  PanelTopClose,\n  PanelTopOpen,\n} from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, watch, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { useMessages } from '../config/lang/messages';\nimport { patternsMessages } from './messages';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { NavCompactContext } from '../navigation/NavList';\nimport { SkipLink } from '../navigation/SkipLink';\nimport { PageScrollbar } from '../layout/PageScrollbar';\nimport { ResizeHandle, type ResizeHandleProps } from '../layout/ResizeHandle';\nimport { ScrollArea, type ScrollAreaProps } from '../layout/ScrollArea';\nimport { Drawer, type DrawerProps } from '../overlay/Drawer';\nimport { useMediaQuery } from '../utils/dom/media-query';\nimport { toElement } from '../utils/dom/element';\nimport { useRouterLink } from '../utils/dom/link';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport type { LayoutPreference } from '../config/layout/preference';\nimport { breakpoints, t } from '../config/theme/tokens';\nimport { focusRingStyles } from '../utils/style/styles';\nimport { layoutVars } from '../utils/style/vars';\n\n/** 顶栏高度：也是两侧栏粘住的位置、标题跳转时让开的距离 */\nconst HEADER_HEIGHT = '3rem';\n/** 左侧栏的宽度：顶栏的品牌格与它同宽 */\nconst SIDEBAR_WIDTH = '16rem';\n/** 侧栏收起成图标栏时的宽度 */\nconst RAIL_WIDTH = '3.5rem';\n/** 抽屉式侧栏的默认宽度与可以拖动的范围（px） */\nconst OVERLAY_WIDTH = 256;\n// 最窄可以收到只剩滚动条那么宽\nconst OVERLAY_MIN_WIDTH = 16;\nconst OVERLAY_MAX_WIDTH = 480;\n// 上下两侧抽屉的默认高度与可以拖动的范围（px）\nconst OVERLAY_HEIGHT = 320;\nconst OVERLAY_MIN_HEIGHT = 96;\nconst OVERLAY_MAX_HEIGHT = 640;\n// 比它窄时侧栏只放得下图标：导航变紧凑\nconst OVERLAY_COMPACT_WIDTH = 160;\n// 运行时判断侧栏是否常驻（useMediaQuery 要的是不带 @media 的查询）\nconst WIDE_QUERY = breakpoints.lg.replace('@media ', '');\n\n/** 左侧栏的形式 */\nexport interface AppShellSidebarModes {\n  /** 宽屏时占一列、窄屏时收进抽屉（默认） */\n  docked: unknown;\n  /** 各宽度都是盖在页面上面的抽屉，不占正文的位置，可以收起、拖动宽度 */\n  overlay: unknown;\n}\n\n/** 抽屉式侧栏从哪一边滑出（sidebarMode=\"overlay\"） */\nexport interface AppShellSidebarSides {\n  /** 起始边（左，从右到左排版时是右）：默认 */\n  start: unknown;\n  /** 结束边（右，从右到左排版时是左）：“菜单”在顶栏结束边 */\n  end: unknown;\n  /** 顶栏下面，盖满宽度，导航的小节排成多列 */\n  top: unknown;\n  /** 窗口底部，盖满宽度，导航的小节排成多列 */\n  bottom: unknown;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface AppShellProps extends PartProps<'div'> {\n  /** 顶栏起始边的品牌（标志与产品名）：有侧栏时这一格与侧栏同宽，侧栏的竖线延伸到顶 */\n  brand?: VNodeChild;\n  /** 顶栏的内容：搜索、本页的页签、主题切换…（没写 brand 时标志也放这里） */\n  header?: VNodeChild;\n  /** 左侧栏：站点导航；窄屏时收进抽屉 */\n  sidebar?: VNodeChild;\n  /** 右侧栏：本页目录等辅助内容；较窄时不显示 */\n  aside?: VNodeChild;\n  /** 顶栏里品牌后面的导航（NavBar）：只有它时是顶部导航布局，和 sidebar 一起时是混合布局（顶栏一级、侧栏二级） */\n  nav?: VNodeChild;\n  /** 正文上面的页签区（PageTabs：打开过的页面） */\n  tabs?: VNodeChild;\n  /** 正文下面的页脚（版权、备案号、版本） */\n  footer?: VNodeChild;\n  /** docked 侧栏底部有“收起侧栏”按钮：收起后只剩图标栏（导航变紧凑，分组的子项悬停弹出） */\n  sidebarCollapsible?: boolean;\n  /** docked 侧栏收起了：父级可以写 _sidebarCollapsed={x} 记住 */\n  _sidebarCollapsed?: boolean;\n  /** 左侧栏的形式，默认 docked */\n  sidebarMode?: keyof AppShellSidebarModes;\n  /** 抽屉式侧栏从哪一边滑出，默认 start；只在 overlay 时有效 */\n  sidebarSide?: keyof AppShellSidebarSides;\n  /**\n   * 用户选的布局（createLayoutPreference 的结果）：侧栏的形式、方向、开关与尺寸从它读、写回它并存盘，\n   * 写了它，sidebarMode、sidebarSide、_sidebarOpen、_sidebarWidth、_sidebarHeight、_sidebarCollapsed 就不再起作用\n   */\n  layout?: LayoutPreference;\n  /** 侧栏抽屉是否打开（docked 时只在窄屏有抽屉）：父级可以写 _sidebarOpen={x} */\n  _sidebarOpen?: boolean;\n  /**\n   * overlay 抽屉的宽度（px），默认 256，范围 16–480（窄到几乎只剩滚动条；比 160 窄时导航只显示图标）：\n   * 父级写 _sidebarWidth={x} 记住拖动后的宽度\n   */\n  _sidebarWidth?: number;\n  /** 上下两侧抽屉的高度（px），默认 320，范围 96–640：父级写 _sidebarHeight={x} 记住拖动后的高度 */\n  _sidebarHeight?: number;\n  /** 页面最前面的“跳到正文”链接，默认 true */\n  skipLink?: boolean;\n  /** 整页用浮层滚动条（PageScrollbar：不占宽度，滚动时出现），默认 true */\n  pageScrollbar?: boolean;\n  /** 顶栏（header）的部件属性 */\n  propsHeader?: PartProps<'header'>;\n  /** 品牌格（div）的部件属性 */\n  propsBrand?: PartProps<'div'>;\n  /** 顶栏里 header 内容那一格（div）的部件属性 */\n  propsHeaderContent?: PartProps<'div'>;\n  /** 顶栏下面的主体（侧栏、正文、右栏的栅格）的部件属性 */\n  propsBody?: PartProps<'div'>;\n  /** 左侧栏（div）的部件属性 */\n  propsSidebar?: PartProps<'div'>;\n  /** 左侧栏里的滚动区域的部件属性（docked 的侧栏与 overlay 的抽屉共用） */\n  propsSidebarScroll?: Partial<ScrollAreaProps>;\n  /** 正文（main）的部件属性 */\n  propsMain?: PartProps<'main'>;\n  /** 顶栏里导航那一格的部件属性 */\n  propsNav?: PartProps<'div'>;\n  /** 页签区的部件属性 */\n  propsTabs?: PartProps<'div'>;\n  /** 页脚（footer）的部件属性 */\n  propsFooter?: PartProps<'footer'>;\n  /** “收起侧栏”按钮的部件属性 */\n  propsCollapse?: Partial<IconButtonProps>;\n  /** 右侧栏（aside）的部件属性 */\n  propsAside?: PartProps<'aside'>;\n  /** 右侧栏里的滚动区域的部件属性 */\n  propsAsideScroll?: Partial<ScrollAreaProps>;\n  /** docked 时窄屏打开侧栏的按钮的部件属性 */\n  propsMenuButton?: Partial<IconButtonProps>;\n  /** overlay 时品牌格里开关抽屉的“菜单”按钮的部件属性 */\n  propsSidebarToggle?: Partial<ButtonProps>;\n  /** overlay 抽屉宽度调整手柄的部件属性 */\n  propsResizeHandle?: Partial<ResizeHandleProps>;\n  /** 窄屏时的侧栏抽屉的部件属性 */\n  propsDrawer?: Partial<DrawerProps>;\n  /** 正文 */\n  children?: VNodeChild;\n}\n\n/** AppShell 交给里面的部件的状态：侧栏收起时品牌只剩标志 */\nexport interface AppShellState {\n  /** docked 侧栏收起成了图标栏（宽屏时） */\n  collapsed: () => boolean;\n}\n\n/** AppShell 的上下文：AppShellBrand 据此在侧栏收起时只显示标志；不在 AppShell 里时为 null */\nexport const AppShellContext = createContext<AppShellState | null>('AppShell');\n\n/** 外壳把顶栏高度交给里面的标题与粘性侧栏 */\nexport const appShellOffset = css.createTheme(layoutVars, { stickyOffset: HEADER_HEIGHT });\n\n/** AppShell 的样式：root、header、menuButton、body、sidebar、main、aside 等 */\nexport const appShellStyles = css.create({\n  // 整页的界面基准文字（同 Provider）：没有 Provider 时页面是浏览器默认的 16px，与组件的 md 档位对不上\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: '100dvh',\n    color: '_text',\n    fontSize: '_md',\n    lineHeight: '_normal',\n  },\n  header: {\n    position: 'sticky',\n    top: 0,\n    // 盖住滚动的正文与粘性侧栏；低于浮层（顶层渲染）与 SkipLink\n    zIndex: 10,\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_md',\n    height: HEADER_HEIGHT,\n    flexShrink: 0,\n    paddingInline: '_lg',\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_border',\n    backgroundColor: '_surfaceTranslucent',\n    backdropFilter: 'blur(12px) saturate(1.5)',\n  },\n  menuButton: { display: { default: 'inline-flex', [breakpoints.lg]: 'none' }, flexShrink: 0 },\n  // 有品牌格与侧栏：宽屏时品牌格贴着起始边；品牌格与内容之间隔开正文的内边距，内容与正文的起始边对齐\n  headerWithBrand: {\n    paddingInlineStart: { default: null, [breakpoints.lg]: 0 },\n    columnGap: { default: null, [breakpoints.lg]: '_xl' },\n  },\n  brand: { display: 'flex', alignItems: 'center', gap: '_sm', flexShrink: 0, minWidth: 0 },\n  // 宽屏时与侧栏同宽，结束边的竖线与侧栏的竖线接上\n  brandRail: {\n    alignSelf: { default: null, [breakpoints.lg]: 'stretch' },\n    boxSizing: 'border-box',\n    width: { default: null, [breakpoints.lg]: SIDEBAR_WIDTH },\n    paddingInline: { default: null, [breakpoints.lg]: '_lg' },\n    borderInlineEndWidth: { default: null, [breakpoints.lg]: '_xs' },\n    borderInlineEndStyle: { default: null, [breakpoints.lg]: 'solid' },\n    borderInlineEndColor: { default: null, [breakpoints.lg]: '_border' },\n  },\n  headerContent: { display: 'flex', alignItems: 'center', gap: '_md', flexGrow: 1, minWidth: 0 },\n  body: { display: 'grid', flexGrow: 1, gridTemplateColumns: 'minmax(0, 1fr)' },\n  withSidebar: {\n    gridTemplateColumns: { default: null, [breakpoints.lg]: `${SIDEBAR_WIDTH} minmax(0, 1fr)` },\n  },\n  withAside: { gridTemplateColumns: { default: null, [breakpoints.xl]: 'minmax(0, 1fr) 14rem' } },\n  // 一个属性上两个断点：窄的一档用 lgOnly，不和 xl 重叠（见 breakpoints 的说明）\n  withBoth: {\n    gridTemplateColumns: {\n      default: null,\n      [breakpoints.lgOnly]: `${SIDEBAR_WIDTH} minmax(0, 1fr)`,\n      [breakpoints.xl]: `${SIDEBAR_WIDTH} minmax(0, 1fr) 14rem`,\n    },\n  },\n  // 两侧栏：粘在顶栏下面、占满剩下的视口高度，内容多时各自滚动，滚到头不带动页面\n  rail: {\n    position: 'sticky',\n    top: layoutVars.stickyOffset,\n    boxSizing: 'border-box',\n    height: `calc(100dvh - ${layoutVars.stickyOffset})`,\n  },\n  // 侧栏里的滚动区域：浮层滚动条，滚到头不带动页面；内边距放在内容层上，滚动条贴着侧栏边缘\n  railScroll: { height: '_full' },\n  railViewport: { overscrollBehavior: 'contain' },\n  sidebar: {\n    display: { default: 'none', [breakpoints.lg]: 'block' },\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_border',\n  },\n  sidebarContent: { paddingBlock: '_xl', paddingInline: '_md' },\n  // 紧凑的侧栏：两边只留一点，图标居中\n  sidebarContentCompact: { paddingInline: '_xs' },\n  aside: { display: { default: 'none', [breakpoints.xl]: 'block' } },\n  asideContent: { paddingBlock: '_xl', paddingInline: '_lg' },\n  // 正文由 SkipLink 聚焦（tabindex=-1）：不显示焦点框\n  main: { minWidth: 0, paddingBlock: '_xl', paddingInline: '_xl', outlineStyle: 'none' },\n  // overlay：从顶栏下面弹出、盖在正文上（低于顶栏与顶层渲染的浮层）；各方向的位置见 overlayStart 等，收起后不显示（inert，不能聚焦）。\n  // 打开时 translate 是 none：否则抽屉会成为里面 fixed 元素的包含块（同 Drawer）\n  overlay: {\n    position: 'fixed',\n    zIndex: 9,\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    // 拖得很窄时内容裁在抽屉里，不溢出到正文上\n    overflow: 'hidden',\n    backgroundColor: '_surface',\n    boxShadow: '_lg',\n    // 收起：滑出去之后再隐藏（visibility 延迟到滑完）\n    visibility: 'hidden',\n    transition: `translate ${t.durations.md} ${t.easings.exit}, visibility 0s linear ${t.durations.md}`,\n  },\n  // 左右两侧：顶栏下面到窗口底部；位置用逻辑属性，translate 是物理方向，用 :dir() 区分\n  overlayStart: {\n    top: HEADER_HEIGHT,\n    bottom: 0,\n    insetInlineStart: 0,\n    maxWidth: 'calc(100vw - 3rem)',\n    borderInlineEndWidth: '_xs',\n    borderInlineEndStyle: 'solid',\n    borderInlineEndColor: '_border',\n    translate: { default: '-100% 0', ':dir(rtl)': '100% 0' },\n  },\n  overlayEnd: {\n    top: HEADER_HEIGHT,\n    bottom: 0,\n    insetInlineEnd: 0,\n    maxWidth: 'calc(100vw - 3rem)',\n    borderInlineStartWidth: '_xs',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_border',\n    translate: { default: '100% 0', ':dir(rtl)': '-100% 0' },\n  },\n  // 上下两侧：盖满宽度，高度由 _sidebarHeight 定，最高留出一截正文\n  overlayTop: {\n    top: HEADER_HEIGHT,\n    insetInlineStart: 0,\n    insetInlineEnd: 0,\n    maxHeight: `calc(100dvh - ${HEADER_HEIGHT} - 3rem)`,\n    borderBlockEndWidth: '_xs',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_border',\n    translate: '0 -100%',\n  },\n  overlayBottom: {\n    bottom: 0,\n    insetInlineStart: 0,\n    insetInlineEnd: 0,\n    maxHeight: `calc(100dvh - ${HEADER_HEIGHT} - 3rem)`,\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_border',\n    translate: '0 100%',\n  },\n  // 打开：立刻可见，再滑进来\n  overlayOpen: {\n    visibility: 'visible',\n    translate: 'none',\n    transition: `translate ${t.durations.lg} ${t.easings.enter}, visibility 0s`,\n  },\n  overlayScroll: { flexGrow: 1, minHeight: 0 },\n  // 上下抽屉：导航的小节排成多列（CSS 多栏，每个小节不被拆开，见 NavSection）\n  sidebarContentColumns: { columnWidth: '14rem', columnGap: '_xl' },\n  // overlay 时顶栏的品牌格：宽屏时按抽屉的初始宽度，“菜单”在它的结束边（只有抽屉在起始边时；其他方向品牌格不变）\n  brandOverlay: {\n    alignSelf: { default: null, [breakpoints.lg]: 'stretch' },\n    justifyContent: 'space-between',\n    boxSizing: 'border-box',\n    paddingInlineStart: { default: null, [breakpoints.lg]: '_lg' },\n    paddingInlineEnd: { default: null, [breakpoints.lg]: '_sm' },\n    borderInlineEndWidth: { default: null, [breakpoints.lg]: '_xs' },\n    borderInlineEndStyle: { default: null, [breakpoints.lg]: 'solid' },\n    borderInlineEndColor: { default: null, [breakpoints.lg]: '_border' },\n  },\n  toggle: { flexShrink: 0 },\n  // 侧栏收起成图标栏：栅格的第一列、品牌格都变窄，品牌只剩标志\n  withSidebarCollapsed: {\n    gridTemplateColumns: { default: null, [breakpoints.lg]: `${RAIL_WIDTH} minmax(0, 1fr)` },\n  },\n  withBothCollapsed: {\n    gridTemplateColumns: {\n      default: null,\n      [breakpoints.lgOnly]: `${RAIL_WIDTH} minmax(0, 1fr)`,\n      [breakpoints.xl]: `${RAIL_WIDTH} minmax(0, 1fr) 14rem`,\n    },\n  },\n  brandRailCollapsed: {\n    width: { default: null, [breakpoints.lg]: RAIL_WIDTH },\n    justifyContent: { default: null, [breakpoints.lg]: 'center' },\n    paddingInline: { default: null, [breakpoints.lg]: '_xs' },\n  },\n  // 有收起按钮的侧栏：滚动区域占满剩下的高度，按钮在最下面\n  sidebarColumn: {\n    display: { default: 'none', [breakpoints.lg]: 'flex' },\n    flexDirection: 'column',\n  },\n  sidebarScroll: { flexGrow: 1, minHeight: 0, height: 'auto' },\n  collapseBar: {\n    display: 'flex',\n    justifyContent: 'flex-end',\n    flexShrink: 0,\n    padding: '_sm',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n  },\n  collapseBarCollapsed: { justifyContent: 'center' },\n  // 顶栏的导航：占品牌与右边工具之间的位置；有导航时右边的工具按内容宽、靠结束边\n  nav: { display: 'flex', alignItems: 'center', alignSelf: 'stretch', flexGrow: 1, minWidth: 0 },\n  headerContentAfterNav: { flexGrow: 0, justifyContent: 'flex-end' },\n  // 正文那一列：页签区、正文、页脚上下排，页脚在内容少时也贴着底部\n  column: { display: 'flex', flexDirection: 'column', minWidth: 0 },\n  mainGrow: { flexGrow: 1 },\n  tabs: { paddingBlockStart: '_sm', paddingInline: '_xl' },\n  footer: {\n    paddingBlock: '_lg',\n    paddingInline: '_xl',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n    color: '_textMuted',\n    fontSize: '_sm',\n  },\n});\n\n/** AppShell 的动态样式：抽屉的宽度与高度、宽屏时品牌格的宽度（px） */\nexport const appShellDynamicStyles = css.create({\n  width: (px: number) => ({ width: px }),\n  height: (px: number) => ({ height: px }),\n  brandWidth: (px: number) => ({ width: { default: null, [breakpoints.lg]: px } }),\n});\n\n/** 应用外壳：粘性顶栏、左侧栏、正文、右侧栏；窄屏时左侧栏收进抽屉 */\nexport const AppShell = _component(\n  ({\n    brand,\n    header,\n    sidebar,\n    aside,\n    nav,\n    tabs,\n    footer,\n    sidebarMode = 'docked',\n    sidebarSide = 'start',\n    layout,\n    _sidebarOpen: sidebarOpen = _bindable(false),\n    _sidebarWidth: sidebarWidth = _bindable(OVERLAY_WIDTH),\n    _sidebarHeight: sidebarHeight = _bindable(OVERLAY_HEIGHT),\n    sidebarCollapsible = false,\n    _sidebarCollapsed: sidebarCollapsed = _bindable(false),\n    skipLink = true,\n    pageScrollbar = true,\n    propsHeader,\n    propsBrand,\n    propsSidebar,\n    propsMain,\n    propsAside,\n    propsMenuButton,\n    propsSidebarToggle,\n    propsResizeHandle,\n    propsDrawer,\n    propsHeaderContent,\n    propsBody,\n    propsSidebarScroll,\n    propsAsideScroll,\n    propsNav,\n    propsTabs,\n    propsFooter,\n    propsCollapse,\n    children,\n    ...rest\n  }: AppShellProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const id = useId();\n    const mainId = `${id}-main`;\n    const sidebarId = `${id}-sidebar`;\n    // 写了 layout 时各项从它读、写回它；没写时读、写自己的绑定\n    const mode = () => (layout ? layout.mode : sidebarMode);\n    const side = () => (layout ? layout.side : sidebarSide);\n    const isOpen = () => (layout ? layout.open : sidebarOpen);\n    const setOpen = (value: boolean) => {\n      if (layout) layout.open = value;\n      else sidebarOpen = value;\n    };\n    const widthOf = () => (layout ? layout.width : sidebarWidth);\n    const setWidth = (px: number) => {\n      if (layout) layout.width = px;\n      else sidebarWidth = px;\n    };\n    const heightOf = () => (layout ? layout.height : sidebarHeight);\n    const setHeight = (px: number) => {\n      if (layout) layout.height = px;\n      else sidebarHeight = px;\n    };\n    const isCollapsed = () => (layout ? layout.collapsed : sidebarCollapsed);\n    const setCollapsed = (value: boolean) => {\n      if (layout) layout.collapsed = value;\n      else sidebarCollapsed = value;\n    };\n\n    const overlay = () => mode() === 'overlay';\n    const docked = () => hasContent(sidebar) && !overlay();\n    // 左右两侧的抽屉调宽度，上下两侧的调高度\n    const lateral = () => side() === 'start' || side() === 'end';\n    const wide = useMediaQuery(WIDE_QUERY);\n    // docked 的侧栏收起成图标栏：只在宽屏（窄屏时侧栏在抽屉里，抽屉总是完整的）\n    const collapsed = () => docked() && sidebarCollapsible && isCollapsed() && wide.value;\n    const compact = () =>\n      (overlay() && lateral() && widthOf() < OVERLAY_COMPACT_WIDTH) || collapsed();\n    NavCompactContext.provide(compact);\n    AppShellContext.provide({ collapsed });\n    // docked：变宽后侧栏已经显示出来，抽屉没必要再开着\n    watch(wide, (isWide) => {\n      if (isWide && !overlay()) setOpen(false);\n    });\n    // 抽屉里点了链接（通常是换页）：关闭抽屉；左右抽屉在宽屏时不关（挡不住正文的主要部分，常要连着换几页），上下抽屉盖住的多，总是关\n    function closeOnNavigate(event: MouseEvent) {\n      if (overlay() && lateral() && wide.value) return;\n      if (event.target instanceof Element && event.target.closest('a[href]')) setOpen(false);\n    }\n\n    // overlay：品牌格按初始宽度，拖动抽屉时不变；双击手柄回到它\n    // 记住的宽度是拖窄后的紧凑宽度时，品牌格与双击回到的宽度按默认宽度（品牌格太窄会和顶栏的内容叠在一起）\n    const remembered = _untrack(widthOf());\n    const initialWidth = remembered < OVERLAY_COMPACT_WIDTH ? OVERLAY_WIDTH : remembered;\n    // Esc 收起：焦点在抽屉里，收起后它不能聚焦了，回到“菜单”\n    let toggleButton = _state.raw<HTMLElement | null>(null);\n    function onOverlayKeydown(event: KeyboardEvent) {\n      if (event.key !== 'Escape' || event.defaultPrevented) return;\n      event.preventDefault();\n      setOpen(false);\n      toggleButton?.focus();\n    }\n\n    // 抽屉在结束边时，“菜单”放在顶栏的结束边；其他方向在品牌格里\n    const toggleAtEnd = () => overlay() && side() === 'end';\n    const toggleIcon = () => {\n      const open = isOpen();\n      switch (side()) {\n        case 'end':\n          return open ? PanelRightClose : PanelRightOpen;\n        case 'top':\n          return open ? PanelTopClose : PanelTopOpen;\n        case 'bottom':\n          return open ? PanelBottomClose : PanelBottomOpen;\n        default:\n          return open ? PanelLeftClose : PanelLeftOpen;\n      }\n    };\n\n    /** overlay 的“菜单”：开关抽屉，图标随开关和方向切换 */\n    const sidebarToggle = () => (\n      <Button\n        {...mergePartProps<ButtonProps>(\n          {\n            variant: 'ghost',\n            tone: 'neutral',\n            size: 'sm',\n            icon: toggleIcon(),\n            sx: appShellStyles.toggle,\n          },\n          propsSidebarToggle,\n          {\n            ref: (element: unknown) => (toggleButton = toElement(element)),\n            'aria-expanded': isOpen(),\n            'aria-controls': sidebarId,\n            onClick: () => setOpen(!isOpen()),\n          },\n        )}\n      >\n        {messages.navigationMenu}\n      </Button>\n    );\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: [appShellStyles.root, appShellOffset] }, rest)}>\n        {skipLink && <SkipLink href={`#${mainId}`} />}\n        {pageScrollbar && <PageScrollbar />}\n        <header\n          {...mergeAttrs<'header'>(\n            {\n              sx: [\n                appShellStyles.header,\n                hasContent(brand) && hasContent(sidebar) && appShellStyles.headerWithBrand,\n              ],\n            },\n            propsHeader,\n          )}\n        >\n          {hasContent(sidebar) && !overlay() && (\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                {\n                  sx: appShellStyles.menuButton,\n                  icon: MenuIcon,\n                  'aria-label': messages.navigationOpen,\n                },\n                propsMenuButton,\n                { 'aria-expanded': isOpen(), onClick: () => setOpen(true) },\n              )}\n            />\n          )}\n          {hasContent(brand) && (\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    appShellStyles.brand,\n                    hasContent(sidebar) &&\n                      (overlay()\n                        ? side() === 'start' && [\n                            appShellStyles.brandOverlay,\n                            appShellDynamicStyles.brandWidth(initialWidth),\n                          ]\n                        : [\n                            appShellStyles.brandRail,\n                            collapsed() && appShellStyles.brandRailCollapsed,\n                          ]),\n                  ],\n                },\n                propsBrand,\n              )}\n            >\n              {brand}\n              {hasContent(sidebar) && overlay() && !toggleAtEnd() && sidebarToggle()}\n            </div>\n          )}\n          {!hasContent(brand) &&\n            hasContent(sidebar) &&\n            overlay() &&\n            !toggleAtEnd() &&\n            sidebarToggle()}\n          {hasContent(nav) && (\n            <div {...mergeAttrs<'div'>({ sx: appShellStyles.nav }, propsNav)}>{nav}</div>\n          )}\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  appShellStyles.headerContent,\n                  hasContent(nav) && appShellStyles.headerContentAfterNav,\n                ],\n              },\n              propsHeaderContent,\n            )}\n          >\n            {header}\n          </div>\n          {hasContent(sidebar) && toggleAtEnd() && sidebarToggle()}\n        </header>\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              sx: [\n                appShellStyles.body,\n                docked() && hasContent(aside)\n                  ? collapsed()\n                    ? appShellStyles.withBothCollapsed\n                    : appShellStyles.withBoth\n                  : docked()\n                    ? collapsed()\n                      ? appShellStyles.withSidebarCollapsed\n                      : appShellStyles.withSidebar\n                    : hasContent(aside) && appShellStyles.withAside,\n              ],\n            },\n            propsBody,\n          )}\n        >\n          {docked() && (\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    appShellStyles.rail,\n                    appShellStyles.sidebar,\n                    sidebarCollapsible && appShellStyles.sidebarColumn,\n                  ],\n                },\n                propsSidebar,\n              )}\n            >\n              <ScrollArea\n                {...mergePartProps<ScrollAreaProps>(\n                  {\n                    sx: [\n                      appShellStyles.railScroll,\n                      sidebarCollapsible && appShellStyles.sidebarScroll,\n                    ],\n                    propsViewport: { sx: appShellStyles.railViewport },\n                    propsContent: {\n                      sx: [\n                        appShellStyles.sidebarContent,\n                        collapsed() && appShellStyles.sidebarContentCompact,\n                      ],\n                    },\n                  },\n                  propsSidebarScroll,\n                )}\n              >\n                {sidebar}\n              </ScrollArea>\n              {sidebarCollapsible && (\n                <div\n                  {...css.attrs(\n                    appShellStyles.collapseBar,\n                    collapsed() && appShellStyles.collapseBarCollapsed,\n                  )}\n                >\n                  <IconButton\n                    {...mergePartProps<IconButtonProps>(\n                      {\n                        icon: isCollapsed() ? PanelLeftOpen : PanelLeftClose,\n                        size: 'sm',\n                        variant: 'ghost',\n                        propsIcon: { flipInRtl: true },\n                        'aria-label': isCollapsed()\n                          ? messages.sidebarExpand\n                          : messages.sidebarCollapse,\n                      },\n                      propsCollapse,\n                      { onClick: () => setCollapsed(!isCollapsed()) },\n                    )}\n                  />\n                </div>\n              )}\n            </div>\n          )}\n          <div {...css.attrs(appShellStyles.column)}>\n            {hasContent(tabs) && (\n              <div {...mergeAttrs<'div'>({ sx: appShellStyles.tabs }, propsTabs)}>{tabs}</div>\n            )}\n            <main\n              {...mergeAttrs<'main'>(\n                { sx: [appShellStyles.main, appShellStyles.mainGrow] },\n                propsMain,\n                {\n                  id: mainId,\n                  tabindex: -1,\n                },\n              )}\n            >\n              {children}\n            </main>\n            {hasContent(footer) && (\n              <footer {...mergeAttrs<'footer'>({ sx: appShellStyles.footer }, propsFooter)}>\n                {footer}\n              </footer>\n            )}\n          </div>\n          {hasContent(aside) && (\n            <aside\n              {...mergeAttrs<'aside'>(\n                { sx: [appShellStyles.rail, appShellStyles.aside] },\n                propsAside,\n              )}\n            >\n              <ScrollArea\n                {...mergePartProps<ScrollAreaProps>(\n                  {\n                    sx: appShellStyles.railScroll,\n                    propsViewport: { sx: appShellStyles.railViewport },\n                    propsContent: { sx: appShellStyles.asideContent },\n                  },\n                  propsAsideScroll,\n                )}\n              >\n                {aside}\n              </ScrollArea>\n            </aside>\n          )}\n        </div>\n        {hasContent(sidebar) && overlay() && (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                sx: [\n                  appShellStyles.overlay,\n                  side() === 'start' && appShellStyles.overlayStart,\n                  side() === 'end' && appShellStyles.overlayEnd,\n                  side() === 'top' && appShellStyles.overlayTop,\n                  side() === 'bottom' && appShellStyles.overlayBottom,\n                  isOpen() && appShellStyles.overlayOpen,\n                  lateral()\n                    ? appShellDynamicStyles.width(widthOf())\n                    : appShellDynamicStyles.height(heightOf()),\n                ],\n              },\n              propsSidebar,\n              {\n                id: sidebarId,\n                inert: !isOpen(),\n                onKeydown: onOverlayKeydown,\n                onClick: closeOnNavigate,\n              },\n            )}\n          >\n            <ScrollArea\n              {...mergePartProps<ScrollAreaProps>(\n                {\n                  sx: appShellStyles.overlayScroll,\n                  propsViewport: { sx: appShellStyles.railViewport },\n                  propsContent: {\n                    sx: [\n                      appShellStyles.sidebarContent,\n                      compact() && appShellStyles.sidebarContentCompact,\n                      !lateral() && appShellStyles.sidebarContentColumns,\n                    ],\n                  },\n                },\n                propsSidebarScroll,\n              )}\n            >\n              {sidebar}\n            </ScrollArea>\n            {lateral() ? (\n              <ResizeHandle\n                aria-label={messages.navigationResize}\n                {...propsResizeHandle}\n                edge={side() === 'end' ? 'start' : 'end'}\n                width={widthOf()}\n                minWidth={OVERLAY_MIN_WIDTH}\n                maxWidth={OVERLAY_MAX_WIDTH}\n                defaultWidth={initialWidth}\n                onWidthChange={setWidth}\n              />\n            ) : (\n              <ResizeHandle\n                aria-label={messages.navigationResizeHeight}\n                {...propsResizeHandle}\n                orientation=\"horizontal\"\n                edge={side() === 'top' ? 'end' : 'start'}\n                width={heightOf()}\n                minWidth={OVERLAY_MIN_HEIGHT}\n                maxWidth={OVERLAY_MAX_HEIGHT}\n                defaultWidth={OVERLAY_HEIGHT}\n                onWidthChange={setHeight}\n              />\n            )}\n          </div>\n        )}\n        {docked() && (\n          <Drawer\n            {...mergePartProps<DrawerProps>(\n              { title: messages.navigation, side: 'start' },\n              propsDrawer,\n              {\n                onClick: closeOnNavigate,\n              },\n            )}\n            _open={isOpen()}\n            onUpdate:_open={setOpen}\n          >\n            {sidebar}\n          </Drawer>\n        )}\n      </div>\n    );\n  },\n);\n\n/** 未声明的属性落到链接（a）上 */\nexport interface AppShellBrandProps extends PartProps<'a', 'href'> {\n  /** 点了去哪儿，一般是首页 */\n  href: string;\n  /** 标志的图标（品牌色） */\n  icon?: IconData;\n  /** 标志的图片等，写了时不画 icon */\n  logo?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 产品名 */\n  children?: VNodeChild;\n}\n\n/** AppShellBrand 的样式：root、mark */\nexport const appShellBrandStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '_sm',\n    flexShrink: 0,\n    color: '_text',\n    textDecoration: 'none',\n    fontWeight: '_semibold',\n    fontSize: '_lg',\n    borderRadius: '_sm',\n  },\n  mark: { color: '_accentText' },\n});\n\n/**\n * 外壳顶栏的品牌：品牌色的标志（装饰，对读屏隐藏）与产品名，名字就是链接的名称，点了回首页（走路由适配）。\n * 放在 AppShell 的 brand 里\n */\nexport const AppShellBrand = _component(\n  ({ href, icon, logo, propsIcon, children, ...rest }: AppShellBrandProps) => {\n    const router = useRouterLink();\n    const shell = AppShellContext.inject(null);\n    return () => (\n      <a\n        {...mergeAttrs<'a'>({ sx: [appShellBrandStyles.root, focusRingStyles.visible] }, rest, {\n          href: router.href(href),\n          onClick: (event: MouseEvent) => router.onClick(event, href),\n        })}\n      >\n        {logo ??\n          (icon && (\n            <Icon\n              {...mergePartProps<IconProps>({ icon, sx: appShellBrandStyles.mark }, propsIcon)}\n            />\n          ))}\n        {/* 侧栏收起成图标栏时品牌格只放得下标志：产品名留给读屏（仍是链接的名称） */}\n        <span {...css.attrs(shell?.collapsed() && visuallyHiddenStyles.hidden)}>{children}</span>\n      </a>\n    );\n  },\n);\n"],"mappings":"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"}