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

package/dist/patterns/AppShell.d.ts

@@ -7,6 +7,7 @@ import { type ResizeHandleProps } from '../layout/ResizeHandle';
 import { type ScrollAreaProps } from '../layout/ScrollArea';
 import { type DrawerProps } from '../overlay/Drawer';
 import { type PartProps } from '../utils/props';
+import type { LayoutPreference } from '../config/layout/preference';
 /** 左侧栏的形式 */
 export interface AppShellSidebarModes {
     /** 宽屏时占一列、窄屏时收进抽屉（默认） */
@@ -14,6 +15,17 @@ export interface AppShellSidebarModes {
     /** 各宽度都是盖在页面上面的抽屉，不占正文的位置，可以收起、拖动宽度 */
     overlay: unknown;
 }
+/** 抽屉式侧栏从哪一边滑出（sidebarMode="overlay"） */
+export interface AppShellSidebarSides {
+    /** 起始边（左，从右到左排版时是右）：默认 */
+    start: unknown;
+    /** 结束边（右，从右到左排版时是左）：“菜单”在顶栏结束边 */
+    end: unknown;
+    /** 顶栏下面，盖满宽度，导航的小节排成多列 */
+    top: unknown;
+    /** 窗口底部，盖满宽度，导航的小节排成多列 */
+    bottom: unknown;
+}
 /** 未声明的属性落到外层 div 上 */
 export interface AppShellProps extends PartProps<'div'> {
     /** 顶栏起始边的品牌（标志与产品名）：有侧栏时这一格与侧栏同宽，侧栏的竖线延伸到顶 */
@@ -36,6 +48,13 @@ export interface AppShellProps extends PartProps<'div'> {
     _sidebarCollapsed?: boolean;
     /** 左侧栏的形式，默认 docked */
     sidebarMode?: keyof AppShellSidebarModes;
+    /** 抽屉式侧栏从哪一边滑出，默认 start；只在 overlay 时有效 */
+    sidebarSide?: keyof AppShellSidebarSides;
+    /**
+     * 用户选的布局（createLayoutPreference 的结果）：侧栏的形式、方向、开关与尺寸从它读、写回它并存盘，
+     * 写了它，sidebarMode、sidebarSide、_sidebarOpen、_sidebarWidth、_sidebarHeight、_sidebarCollapsed 就不再起作用
+     */
+    layout?: LayoutPreference;
     /** 侧栏抽屉是否打开（docked 时只在窄屏有抽屉）：父级可以写 _sidebarOpen={x} */
     _sidebarOpen?: boolean;
     /**
@@ -43,6 +62,8 @@ export interface AppShellProps extends PartProps<'div'> {
      * 父级写 _sidebarWidth={x} 记住拖动后的宽度
      */
     _sidebarWidth?: number;
+    /** 上下两侧抽屉的高度（px），默认 320，范围 96–640：父级写 _sidebarHeight={x} 记住拖动后的高度 */
+    _sidebarHeight?: number;
     /** 页面最前面的“跳到正文”链接，默认 true */
     skipLink?: boolean;
     /** 整页用浮层滚动条（PageScrollbar：不占宽度，滚动时出现），默认 true */
@@ -117,8 +138,12 @@ export declare const appShellStyles: Readonly<{
     menuButton: css.CompiledStyles;
     nav: css.CompiledStyles;
     overlay: css.CompiledStyles;
+    overlayBottom: css.CompiledStyles;
+    overlayEnd: css.CompiledStyles;
     overlayOpen: css.CompiledStyles;
     overlayScroll: css.CompiledStyles;
+    overlayStart: css.CompiledStyles;
+    overlayTop: css.CompiledStyles;
     rail: css.CompiledStyles;
     railScroll: css.CompiledStyles;
     railViewport: css.CompiledStyles;
@@ -126,6 +151,7 @@ export declare const appShellStyles: Readonly<{
     sidebar: css.CompiledStyles;
     sidebarColumn: css.CompiledStyles;
     sidebarContent: css.CompiledStyles;
+    sidebarContentColumns: css.CompiledStyles;
     sidebarContentCompact: css.CompiledStyles;
     sidebarScroll: css.CompiledStyles;
     tabs: css.CompiledStyles;
@@ -136,9 +162,10 @@ export declare const appShellStyles: Readonly<{
     withSidebar: css.CompiledStyles;
     withSidebarCollapsed: css.CompiledStyles;
 }>;
-/** AppShell 的动态样式：抽屉的宽度、宽屏时品牌格的宽度（px） */
+/** AppShell 的动态样式：抽屉的宽度与高度、宽屏时品牌格的宽度（px） */
 export declare const appShellDynamicStyles: Readonly<{
     readonly width: (px: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly height: (px: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
     readonly brandWidth: (px: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
 }>;
 /** 应用外壳：粘性顶栏、左侧栏、正文、右侧栏；窄屏时左侧栏收进抽屉 */

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",