@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/patterns/AppShell.js

@@ -0,0 +1,620 @@
+import { breakpoints, t } from "../config/theme/tokens.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { Icon } from "../base/Icon.js";
+import { visuallyHiddenStyles } from "../base/VisuallyHidden.js";
+import { Button } from "../base/Button.js";
+import { IconButton } from "../base/IconButton.js";
+import { ScrollArea } from "../layout/ScrollArea.js";
+import { layoutVars } from "../utils/style/vars.js";
+import { useRouterLink } from "../utils/dom/link.js";
+import { toElement } from "../utils/dom/element.js";
+import { useMediaQuery } from "../utils/dom/media-query.js";
+import { PageScrollbar } from "../layout/PageScrollbar.js";
+import { ResizeHandle } from "../layout/ResizeHandle.js";
+import { Drawer } from "../overlay/Drawer.js";
+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 * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Menu, PanelLeftClose, PanelLeftOpen } from "@lucide/icons";
+//#region src/patterns/AppShell.tsx
+/**
+* 应用外壳：粘性顶栏、左侧栏（导航）、正文、右侧栏（本页目录），文档站与后台的整页骨架。
+*
+*   <AppShell
+*     brand={<AppShellBrand href="/" icon={Boxes}>采购管理平台</AppShellBrand>}
+*     header={<><CommandPalette … /><ThemeSwitcher preference={preference} /></>}
+*     sidebar={<NavList aria-label="文档">…</NavList>}
+*     aside={<TableOfContents items={headings} />}
+*   >
+*     <Prose>…</Prose>
+*   </AppShell>
+*
+* 响应式（宽度按容器档位 sizes.lg / sizes.xl）：
+* - 64rem 以上显示左侧栏；更窄时收进从起始边滑出的 Drawer，顶栏最前面出现打开它的按钮。
+*   抽屉里点了链接（换页）、或窗口变宽时自动关闭。
+* - 80rem 以上显示右侧栏；更窄时不显示（目录这类辅助内容）。
+* 两侧栏粘在顶栏下面，内容多时各自滚动（ScrollArea）。顶栏半透明，滚动的正文从下面透出（backdrop-filter）。
+* 整页与两侧栏都是浮层滚动条（PageScrollbar、ScrollArea）：不占宽度，滚动时出现。
+*
+* 写了 brand 时，侧栏常驻的宽度下品牌这一格与侧栏同宽，侧栏的竖线一直延伸到顶栏顶端，
+* header 的内容从竖线之后开始、与正文的起始边对齐（本页的页签放在这里）。
+*
+* sidebarMode="overlay"：侧栏改为盖在页面上面的抽屉，开不开都不占正文的位置（正文总是整宽，布局不随侧栏变化）。
+* “菜单”按钮固定在顶栏品牌格的结束边，开关都是它（aria-expanded）；抽屉从顶栏下面弹出、盖在正文上。
+* 抽屉结束边可以拖动调整宽度（ResizeHandle，也能聚焦后用 ← / →，双击回到初始宽度），父级写 _sidebarWidth={x} 记住；
+* 顶栏的品牌格按初始宽度，拖动时不变。焦点在抽屉里时按 Esc 收起、焦点回到“菜单”；窄屏时点了链接也收起。
+* 拖到比 160px 窄时侧栏变紧凑：里面的 NavList 只显示图标（名称在提示里），小节标题只剩图标（NavCompactContext）。
+*
+* 品牌格里一般放 AppShellBrand：品牌色的标志与产品名，点了回首页；自己的标志图写在它的 logo 里。
+*
+* 几种布局与区域：
+* - nav：顶栏里品牌后面的导航（NavBar）。只有 nav 时是顶部导航布局，和 sidebar 一起时是混合布局（顶栏一级、侧栏二级）。
+* - tabs：正文上面的页签区（PageTabs，和路由同步用 useRouteTabs）；footer：正文下面的页脚，内容少时也贴着底部。
+* - sidebarCollapsible：docked 侧栏底部有“收起侧栏”，收起后只剩图标栏（宽屏时；导航变紧凑、分组悬停弹出，
+*   品牌格只剩标志），父级写 _sidebarCollapsed={x} 记住。
+*
+* 自带 SkipLink（跳到正文）；顶栏的高度经 layoutVars.stickyOffset 交给里面的标题，锚点跳转后不被顶栏挡住。
+*/
+/** 顶栏高度：也是两侧栏粘住的位置、标题跳转时让开的距离 */
+var HEADER_HEIGHT = "3rem";
+/** 左侧栏的宽度：顶栏的品牌格与它同宽 */
+var SIDEBAR_WIDTH = "16rem";
+/** 侧栏收起成图标栏时的宽度 */
+var RAIL_WIDTH = "3.5rem";
+/** 抽屉式侧栏的默认宽度与可以拖动的范围（px） */
+var OVERLAY_WIDTH = 256;
+var OVERLAY_MIN_WIDTH = 16;
+var OVERLAY_MAX_WIDTH = 480;
+var OVERLAY_COMPACT_WIDTH = 160;
+var WIDE_QUERY = breakpoints.lg.replace("@media ", "");
+/** 左侧栏的形式 */
+/** 未声明的属性落到外层 div 上 */
+/** AppShell 交给里面的部件的状态：侧栏收起时品牌只剩标志 */
+/** AppShell 的上下文：AppShellBrand 据此在侧栏收起时只显示标志；不在 AppShell 里时为 null */
+var AppShellContext = createContext("AppShell");
+/** 外壳把顶栏高度交给里面的标题与粘性侧栏 */
+var appShellOffset = css.createTheme(layoutVars, { stickyOffset: HEADER_HEIGHT });
+/** AppShell 的样式：root、header、menuButton、body、sidebar、main、aside 等 */
+var appShellStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		minHeight: "100dvh",
+		color: "_text",
+		fontSize: "_md",
+		lineHeight: "_normal"
+	},
+	header: {
+		position: "sticky",
+		top: 0,
+		zIndex: 10,
+		boxSizing: "border-box",
+		display: "flex",
+		alignItems: "center",
+		gap: "_md",
+		height: HEADER_HEIGHT,
+		flexShrink: 0,
+		paddingInline: "_lg",
+		borderBlockEndWidth: "_xs",
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: "_border",
+		backgroundColor: "_surfaceTranslucent",
+		backdropFilter: "blur(12px) saturate(1.5)"
+	},
+	menuButton: {
+		display: {
+			default: "inline-flex",
+			[breakpoints.lg]: "none"
+		},
+		flexShrink: 0
+	},
+	headerWithBrand: {
+		paddingInlineStart: {
+			default: null,
+			[breakpoints.lg]: 0
+		},
+		columnGap: {
+			default: null,
+			[breakpoints.lg]: "_xl"
+		}
+	},
+	brand: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_sm",
+		flexShrink: 0,
+		minWidth: 0
+	},
+	brandRail: {
+		alignSelf: {
+			default: null,
+			[breakpoints.lg]: "stretch"
+		},
+		boxSizing: "border-box",
+		width: {
+			default: null,
+			[breakpoints.lg]: SIDEBAR_WIDTH
+		},
+		paddingInline: {
+			default: null,
+			[breakpoints.lg]: "_lg"
+		},
+		borderInlineEndWidth: {
+			default: null,
+			[breakpoints.lg]: "_xs"
+		},
+		borderInlineEndStyle: {
+			default: null,
+			[breakpoints.lg]: "solid"
+		},
+		borderInlineEndColor: {
+			default: null,
+			[breakpoints.lg]: "_border"
+		}
+	},
+	headerContent: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_md",
+		flexGrow: 1,
+		minWidth: 0
+	},
+	body: {
+		display: "grid",
+		flexGrow: 1,
+		gridTemplateColumns: "minmax(0, 1fr)"
+	},
+	withSidebar: { gridTemplateColumns: {
+		default: null,
+		[breakpoints.lg]: `${SIDEBAR_WIDTH} minmax(0, 1fr)`
+	} },
+	withAside: { gridTemplateColumns: {
+		default: null,
+		[breakpoints.xl]: "minmax(0, 1fr) 14rem"
+	} },
+	withBoth: { gridTemplateColumns: {
+		default: null,
+		[breakpoints.lgOnly]: `${SIDEBAR_WIDTH} minmax(0, 1fr)`,
+		[breakpoints.xl]: `${SIDEBAR_WIDTH} minmax(0, 1fr) 14rem`
+	} },
+	rail: {
+		position: "sticky",
+		top: layoutVars.stickyOffset,
+		boxSizing: "border-box",
+		height: `calc(100dvh - ${layoutVars.stickyOffset})`
+	},
+	railScroll: { height: "_full" },
+	railViewport: { overscrollBehavior: "contain" },
+	sidebar: {
+		display: {
+			default: "none",
+			[breakpoints.lg]: "block"
+		},
+		borderInlineEndWidth: "_xs",
+		borderInlineEndStyle: "solid",
+		borderInlineEndColor: "_border"
+	},
+	sidebarContent: {
+		paddingBlock: "_xl",
+		paddingInline: "_md"
+	},
+	sidebarContentCompact: { paddingInline: "_xs" },
+	aside: { display: {
+		default: "none",
+		[breakpoints.xl]: "block"
+	} },
+	asideContent: {
+		paddingBlock: "_xl",
+		paddingInline: "_lg"
+	},
+	main: {
+		minWidth: 0,
+		paddingBlock: "_xl",
+		paddingInline: "_xl",
+		outlineStyle: "none"
+	},
+	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",
+		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}`
+	},
+	overlayOpen: {
+		visibility: "visible",
+		translate: "none",
+		transition: `translate ${t.durations.lg} ${t.easings.enter}, visibility 0s`
+	},
+	overlayScroll: {
+		flexGrow: 1,
+		minHeight: 0
+	},
+	brandOverlay: {
+		alignSelf: {
+			default: null,
+			[breakpoints.lg]: "stretch"
+		},
+		justifyContent: "space-between",
+		boxSizing: "border-box",
+		paddingInlineStart: {
+			default: null,
+			[breakpoints.lg]: "_lg"
+		},
+		paddingInlineEnd: {
+			default: null,
+			[breakpoints.lg]: "_sm"
+		},
+		borderInlineEndWidth: {
+			default: null,
+			[breakpoints.lg]: "_xs"
+		},
+		borderInlineEndStyle: {
+			default: null,
+			[breakpoints.lg]: "solid"
+		},
+		borderInlineEndColor: {
+			default: null,
+			[breakpoints.lg]: "_border"
+		}
+	},
+	toggle: { flexShrink: 0 },
+	withSidebarCollapsed: { gridTemplateColumns: {
+		default: null,
+		[breakpoints.lg]: `${RAIL_WIDTH} minmax(0, 1fr)`
+	} },
+	withBothCollapsed: { gridTemplateColumns: {
+		default: null,
+		[breakpoints.lgOnly]: `${RAIL_WIDTH} minmax(0, 1fr)`,
+		[breakpoints.xl]: `${RAIL_WIDTH} minmax(0, 1fr) 14rem`
+	} },
+	brandRailCollapsed: {
+		width: {
+			default: null,
+			[breakpoints.lg]: RAIL_WIDTH
+		},
+		justifyContent: {
+			default: null,
+			[breakpoints.lg]: "center"
+		},
+		paddingInline: {
+			default: null,
+			[breakpoints.lg]: "_xs"
+		}
+	},
+	sidebarColumn: {
+		display: {
+			default: "none",
+			[breakpoints.lg]: "flex"
+		},
+		flexDirection: "column"
+	},
+	sidebarScroll: {
+		flexGrow: 1,
+		minHeight: 0,
+		height: "auto"
+	},
+	collapseBar: {
+		display: "flex",
+		justifyContent: "flex-end",
+		flexShrink: 0,
+		padding: "_sm",
+		borderBlockStartWidth: "_xs",
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_borderMuted"
+	},
+	collapseBarCollapsed: { justifyContent: "center" },
+	nav: {
+		display: "flex",
+		alignItems: "center",
+		alignSelf: "stretch",
+		flexGrow: 1,
+		minWidth: 0
+	},
+	headerContentAfterNav: {
+		flexGrow: 0,
+		justifyContent: "flex-end"
+	},
+	column: {
+		display: "flex",
+		flexDirection: "column",
+		minWidth: 0
+	},
+	mainGrow: { flexGrow: 1 },
+	tabs: {
+		paddingBlockStart: "_sm",
+		paddingInline: "_xl"
+	},
+	footer: {
+		paddingBlock: "_lg",
+		paddingInline: "_xl",
+		borderBlockStartWidth: "_xs",
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_borderMuted",
+		color: "_textMuted",
+		fontSize: "_sm"
+	}
+});
+/** AppShell 的动态样式：抽屉的宽度、宽屏时品牌格的宽度（px） */
+var appShellDynamicStyles = css.create({
+	width: (px) => ({ width: px }),
+	brandWidth: (px) => ({ width: {
+		default: null,
+		[breakpoints.lg]: px
+	} })
+});
+/** 应用外壳：粘性顶栏、左侧栏、正文、右侧栏；窄屏时左侧栏收进抽屉 */
+var AppShell = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const brand = readonlyProp(_props, "brand");
+	const header = readonlyProp(_props, "header");
+	const sidebar = readonlyProp(_props, "sidebar");
+	const aside = readonlyProp(_props, "aside");
+	const nav = readonlyProp(_props, "nav");
+	const tabs = readonlyProp(_props, "tabs");
+	const footer = readonlyProp(_props, "footer");
+	const sidebarMode = readonlyProp(_props, "sidebarMode", "docked");
+	const sidebarOpen = bindable(_props, "_sidebarOpen", () => false, _ctx.emit);
+	const sidebarWidth = bindable(_props, "_sidebarWidth", () => OVERLAY_WIDTH, _ctx.emit);
+	const sidebarCollapsible = readonlyProp(_props, "sidebarCollapsible", false);
+	const sidebarCollapsed = bindable(_props, "_sidebarCollapsed", () => false, _ctx.emit);
+	const skipLink = readonlyProp(_props, "skipLink", true);
+	const pageScrollbar = readonlyProp(_props, "pageScrollbar", true);
+	const propsHeader = readonlyProp(_props, "propsHeader");
+	const propsBrand = readonlyProp(_props, "propsBrand");
+	const propsSidebar = readonlyProp(_props, "propsSidebar");
+	const propsMain = readonlyProp(_props, "propsMain");
+	const propsAside = readonlyProp(_props, "propsAside");
+	const propsMenuButton = readonlyProp(_props, "propsMenuButton");
+	const propsSidebarToggle = readonlyProp(_props, "propsSidebarToggle");
+	const propsResizeHandle = readonlyProp(_props, "propsResizeHandle");
+	const propsDrawer = readonlyProp(_props, "propsDrawer");
+	const propsHeaderContent = readonlyProp(_props, "propsHeaderContent");
+	const propsBody = readonlyProp(_props, "propsBody");
+	const propsSidebarScroll = readonlyProp(_props, "propsSidebarScroll");
+	const propsAsideScroll = readonlyProp(_props, "propsAsideScroll");
+	const propsNav = readonlyProp(_props, "propsNav");
+	const propsTabs = readonlyProp(_props, "propsTabs");
+	const propsFooter = readonlyProp(_props, "propsFooter");
+	const propsCollapse = readonlyProp(_props, "propsCollapse");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const messages = useMessages("patterns", patternsMessages);
+	const id = useId();
+	const mainId = `${id}-main`;
+	const sidebarId = `${id}-sidebar`;
+	const overlay = () => sidebarMode.value === "overlay";
+	const docked = () => hasContent(sidebar.value) && !overlay();
+	const wide = useMediaQuery(WIDE_QUERY);
+	const collapsed = () => docked() && sidebarCollapsible.value && sidebarCollapsed.value && wide.value;
+	const compact = () => overlay() && sidebarWidth.value < OVERLAY_COMPACT_WIDTH || collapsed();
+	NavCompactContext.provide(compact);
+	AppShellContext.provide({ collapsed });
+	watch(wide, (isWide) => {
+		if (isWide && !overlay()) sidebarOpen.value = false;
+	});
+	function closeOnNavigate(event) {
+		if (overlay() && wide.value) return;
+		if (event.target instanceof Element && event.target.closest("a[href]")) sidebarOpen.value = false;
+	}
+	const remembered = untrack(() => sidebarWidth.value);
+	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;
+		toggleButton.value?.focus();
+	}
+	/** overlay 的“菜单”：开关抽屉，图标随开关切换 */
+	const sidebarToggle = () => createVNode(Button, mergePartProps({
+		variant: "ghost",
+		tone: "neutral",
+		size: "sm",
+		icon: sidebarOpen.value ? PanelLeftClose : PanelLeftOpen,
+		sx: appShellStyles.toggle
+	}, propsSidebarToggle.value, {
+		ref: (element) => toggleButton.value = toElement(element),
+		"aria-expanded": sidebarOpen.value,
+		"aria-controls": sidebarId,
+		onClick: () => sidebarOpen.value = !sidebarOpen.value
+	}), {
+		default: () => [messages.navigationMenu],
+		$stable: true
+	});
+	return () => createVNode("div", mergeAttrs({ sx: [appShellStyles.root, appShellOffset] }, rest), [
+		skipLink.value && createVNode(SkipLink, { "href": `#${mainId}` }, null),
+		pageScrollbar.value && createVNode(PageScrollbar, null, null),
+		createVNode("header", mergeAttrs({ sx: [appShellStyles.header, hasContent(brand.value) && hasContent(sidebar.value) && appShellStyles.headerWithBrand] }, propsHeader.value), [
+			hasContent(sidebar.value) && !overlay() && createVNode(IconButton, mergePartProps({
+				sx: appShellStyles.menuButton,
+				icon: Menu,
+				"aria-label": messages.navigationOpen
+			}, propsMenuButton.value, {
+				"aria-expanded": sidebarOpen.value,
+				onClick: () => sidebarOpen.value = 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(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.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({
+				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" }), {
+				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,
+				size: "sm",
+				variant: "ghost",
+				propsIcon: { flipInRtl: true },
+				"aria-label": sidebarCollapsed.value ? messages.sidebarExpand : messages.sidebarCollapse
+			}, propsCollapse.value, { onClick: () => sidebarCollapsed.value = !sidebarCollapsed.value }), 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, {
+					id: mainId,
+					tabindex: -1
+				}), [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({
+				sx: appShellStyles.railScroll,
+				propsViewport: { sx: appShellStyles.railViewport },
+				propsContent: { sx: appShellStyles.asideContent }
+			}, propsAsideScroll.value), { "key": "__site1" }), {
+				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)
+		] }, propsSidebar.value, {
+			id: sidebarId,
+			inert: !sidebarOpen.value,
+			onKeydown: onOverlayKeydown,
+			onClick: closeOnNavigate
+		}), [createVNode(ScrollArea, mergeProps(mergePartProps({
+			sx: appShellStyles.overlayScroll,
+			propsViewport: { sx: appShellStyles.railViewport },
+			propsContent: { sx: [appShellStyles.sidebarContent, css.select(() => compact() && appShellStyles.sidebarContentCompact, true)] }
+		}, propsSidebarScroll.value), { "key": "__site2" }), {
+			default: () => [unref(sidebar)],
+			$stable: true
+		}), createVNode(ResizeHandle, mergeProps({ "aria-label": messages.navigationResize }, propsResizeHandle.value, {
+			"width": sidebarWidth.value,
+			"minWidth": OVERLAY_MIN_WIDTH,
+			"maxWidth": OVERLAY_MAX_WIDTH,
+			"defaultWidth": initialWidth,
+			"onWidthChange": _cache[0] || (_cache[0] = (px) => sidebarWidth.value = px)
+		}), null)]),
+		docked() && createVNode(Drawer, mergeProps(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"
+		}), {
+			default: () => [unref(sidebar)],
+			$stable: true
+		})
+	]);
+}, {
+	name: "AppShell",
+	props: [
+		"brand",
+		"header",
+		"sidebar",
+		"aside",
+		"nav",
+		"tabs",
+		"footer",
+		"sidebarMode",
+		"_sidebarOpen",
+		"onUpdate:_sidebarOpen",
+		"_sidebarWidth",
+		"onUpdate:_sidebarWidth",
+		"sidebarCollapsible",
+		"_sidebarCollapsed",
+		"onUpdate:_sidebarCollapsed",
+		"skipLink",
+		"pageScrollbar",
+		"propsHeader",
+		"propsBrand",
+		"propsSidebar",
+		"propsMain",
+		"propsAside",
+		"propsMenuButton",
+		"propsSidebarToggle",
+		"propsResizeHandle",
+		"propsDrawer",
+		"propsHeaderContent",
+		"propsBody",
+		"propsSidebarScroll",
+		"propsAsideScroll",
+		"propsNav",
+		"propsTabs",
+		"propsFooter",
+		"propsCollapse"
+	]
+});
+/** 未声明的属性落到链接（a）上 */
+/** AppShellBrand 的样式：root、mark */
+var appShellBrandStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "_sm",
+		flexShrink: 0,
+		color: "_text",
+		textDecoration: "none",
+		fontWeight: "_semibold",
+		fontSize: "_lg",
+		borderRadius: "_sm"
+	},
+	mark: { color: "_accentText" }
+});
+/**
+* 外壳顶栏的品牌：品牌色的标志（装饰，对读屏隐藏）与产品名，名字就是链接的名称，点了回首页（走路由适配）。
+* 放在 AppShell 的 brand 里
+*/
+var AppShellBrand = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const href = readonlyProp(_props2, "href");
+	const icon = readonlyProp(_props2, "icon");
+	const logo = readonlyProp(_props2, "logo");
+	const propsIcon = readonlyProp(_props2, "propsIcon");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const router = useRouterLink();
+	const shell = AppShellContext.inject(null);
+	return () => createVNode("a", mergeAttrs({ sx: [appShellBrandStyles.root, focusRingStyles.visible] }, rest, {
+		href: router.href(href.value),
+		onClick: (event) => router.onClick(event, href.value)
+	}), [logo.value ?? (icon.value && createVNode(Icon, mergePartProps({
+		icon: icon.value,
+		sx: appShellBrandStyles.mark
+	}, propsIcon.value), null)), createVNode("span", css.attrs(shell?.collapsed() && visuallyHiddenStyles.hidden), [children.value])]);
+}, {
+	name: "AppShellBrand",
+	props: [
+		"href",
+		"icon",
+		"logo",
+		"propsIcon"
+	]
+});
+//#endregion
+export { AppShell, AppShellBrand, AppShellContext, appShellBrandStyles, appShellDynamicStyles, appShellOffset, appShellStyles };
+
+//# sourceMappingURL=AppShell.js.map