dishui 0.0.82 → 0.0.84

package/dist/components/Modal/index.js

@@ -1,65 +1,70 @@
-import { useEffect as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { mountFocusScope as e } from "./focusScope.js";
+import { useId as t, useLayoutEffect as n, useRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { createPortal as o } from "react-dom";
 //#region src/components/Modal/index.tsx
-var r = {
+var s = {
 	sm: "max-w-sm",
 	md: "max-w-lg",
 	lg: "max-w-2xl",
 	xl: "max-w-5xl",
 	full: "max-w-[95vw]"
-}, i = (e) => typeof e == "number" ? `${e}px` : e, a = ({ open: a, onClose: o, title: s, description: c, children: l, footer: u, size: d = "md", width: f, height: p, closeOnOverlay: m = !0, showClose: h = !0, className: g = "" }) => {
-	if (e(() => {
-		if (!a) return;
-		let e = (e) => {
-			e.key === "Escape" && o();
-		};
-		window.addEventListener("keydown", e);
-		let t = document.body.style.overflow;
-		return document.body.style.overflow = "hidden", () => {
-			window.removeEventListener("keydown", e), document.body.style.overflow = t;
-		};
-	}, [a, o]), !a) return null;
-	let _ = f !== void 0, v = {
-		width: _ ? i(f) : void 0,
-		maxWidth: _ ? "95vw" : void 0,
-		height: i(p),
+}, c = (e) => typeof e == "number" ? `${e}px` : e, l = ({ open: l, onClose: u, title: d, description: f, children: p, footer: m, size: h = "md", width: g, height: _, closeOnOverlay: v = !0, showClose: y = !0, className: b = "", "aria-label": x, "aria-labelledby": S, "aria-describedby": C }) => {
+	let w = t(), T = t(), E = r(null), D = r(null), O = r(null), k = r(!1), A = r(u);
+	if (l && !k.current && typeof document < "u" && (O.current = document.activeElement), k.current = l, n(() => {
+		A.current = u;
+	}), n(() => {
+		if (l && E.current && D.current) return e(E.current, D.current, O.current, () => A.current());
+	}, [l]), !l || typeof document > "u") return null;
+	let j = g !== void 0, M = {
+		width: j ? c(g) : void 0,
+		maxWidth: j ? "95vw" : void 0,
+		height: c(_),
 		maxHeight: "92vh"
-	}, y = _ ? "" : r[d], b = p === void 0 ? "max-h-[70vh] overflow-y-auto px-5 py-4" : "min-h-0 flex-1 overflow-y-auto px-5 py-4";
-	return /* @__PURE__ */ n("div", {
+	}, N = j ? "" : s[h], P = _ === void 0 ? "max-h-[70vh] overflow-y-auto px-5 py-4" : "min-h-0 flex-1 overflow-y-auto px-5 py-4";
+	return o(/* @__PURE__ */ a("div", {
+		ref: D,
 		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-		children: [/* @__PURE__ */ t("div", {
+		children: [/* @__PURE__ */ i("div", {
 			className: "absolute inset-0",
-			onClick: m ? o : void 0,
+			onClick: v ? u : void 0,
 			"aria-hidden": !0
-		}), /* @__PURE__ */ n("div", {
+		}), /* @__PURE__ */ a("div", {
+			ref: E,
 			role: "dialog",
+			tabIndex: -1,
 			"aria-modal": "true",
-			className: `dishui-modal card relative flex w-full min-w-0 flex-col rounded-xl border border-base-300 bg-base-100 text-body leading-5 text-base-content shadow-md ${y} ${g}`.trim(),
-			style: v,
+			"aria-label": x,
+			"aria-labelledby": S ?? (d && !x ? w : void 0),
+			"aria-describedby": C ?? (f ? T : void 0),
+			className: `dishui-modal card relative flex w-full min-w-0 flex-col rounded-xl border border-base-300 bg-base-100 text-body leading-5 text-base-content shadow-md ${N} ${b}`.trim(),
+			style: M,
 			children: [
-				(s || h) && /* @__PURE__ */ n("div", {
+				(d || f || y) && /* @__PURE__ */ a("div", {
 					className: "flex shrink-0 items-start justify-between gap-3 border-b border-base-300 px-5 py-3",
-					children: [/* @__PURE__ */ n("div", {
+					children: [/* @__PURE__ */ a("div", {
 						className: "min-w-0",
-						children: [s && /* @__PURE__ */ t("h3", {
+						children: [d && /* @__PURE__ */ i("h3", {
+							id: w,
 							className: "break-words text-body font-semibold text-base-content",
-							children: s
-						}), c && /* @__PURE__ */ t("p", {
+							children: d
+						}), f && /* @__PURE__ */ i("p", {
+							id: T,
 							className: "mt-1 text-body-sm leading-5 text-base-content/70",
-							children: c
+							children: f
 						})]
-					}), h && /* @__PURE__ */ t("button", {
+					}), y && /* @__PURE__ */ i("button", {
 						type: "button",
-						onClick: o,
+						onClick: u,
 						"aria-label": "Close",
 						className: "shrink-0 rounded-md p-1 text-base-content/70 transition-colors duration-150 motion-reduce:transition-none hover:bg-base-200 hover:text-base-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current",
-						children: /* @__PURE__ */ t("svg", {
+						children: /* @__PURE__ */ i("svg", {
 							className: "h-4 w-4",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
 							strokeWidth: 2,
-							children: /* @__PURE__ */ t("path", {
+							children: /* @__PURE__ */ i("path", {
 								strokeLinecap: "round",
 								strokeLinejoin: "round",
 								d: "M6 18L18 6M6 6l12 12"
@@ -67,19 +72,19 @@ var r = {
 						})
 					})]
 				}),
-				/* @__PURE__ */ t("div", {
-					className: b,
-					children: l
+				/* @__PURE__ */ i("div", {
+					className: P,
+					children: p
 				}),
-				u && /* @__PURE__ */ t("div", {
+				m && /* @__PURE__ */ i("div", {
 					className: "flex shrink-0 flex-wrap justify-end gap-2 border-t border-base-300 px-5 py-3",
-					children: u
+					children: m
 				})
 			]
 		})]
-	});
+	}), document.body);
 };
 //#endregion
-export { a as default };
+export { l as default };
 
 //# sourceMappingURL=index.js.map

package/dist/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nexport type ModalProps = {\n    /** 是否打开 */\n    open: boolean;\n    /** 关闭回调（遮罩点击 / Esc / 关闭按钮触发） */\n    onClose: () => void;\n    /** 标题 */\n    title?: React.ReactNode;\n    /** 标题下的说明文字 */\n    description?: React.ReactNode;\n    /** 正文内容 */\n    children?: React.ReactNode;\n    /** 底部操作区（默认右对齐） */\n    footer?: React.ReactNode;\n    /** 尺寸（预设）：sm / md / lg / xl / full */\n    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n    /** 自定义宽度：支持百分比/像素等 CSS 长度（如 \"80%\"、640）。优先于 size。 */\n    width?: number | string;\n    /** 自定义高度：支持百分比/像素等 CSS 长度（如 \"80%\"、480）。 */\n    height?: number | string;\n    /** 点击遮罩是否关闭（默认 true） */\n    closeOnOverlay?: boolean;\n    /** 是否显示右上角关闭按钮（默认 true） */\n    showClose?: boolean;\n    className?: string;\n};\n\nconst SIZE_CLASS: Record<NonNullable<ModalProps['size']>, string> = {\n    sm: 'max-w-sm',\n    md: 'max-w-lg',\n    lg: 'max-w-2xl',\n    xl: 'max-w-5xl',\n    full: 'max-w-[95vw]',\n};\n\nconst toCssSize = (value: number | string | undefined): string | undefined =>\n    typeof value === 'number' ? `${value}px` : value;\n\n/**\n * 轻量模态框：遮罩 + 居中面板，支持 Esc 关闭、遮罩点击关闭与滚动锁定。\n */\nconst Modal = ({\n    open,\n    onClose,\n    title,\n    description,\n    children,\n    footer,\n    size = 'md',\n    width,\n    height,\n    closeOnOverlay = true,\n    showClose = true,\n    className = '',\n}: ModalProps) => {\n    useEffect(() => {\n        if (!open) return;\n        const onKey = (e: KeyboardEvent) => {\n            if (e.key === 'Escape') onClose();\n        };\n        window.addEventListener('keydown', onKey);\n        const prevOverflow = document.body.style.overflow;\n        document.body.style.overflow = 'hidden';\n        return () => {\n            window.removeEventListener('keydown', onKey);\n            document.body.style.overflow = prevOverflow;\n        };\n    }, [open, onClose]);\n\n    if (!open) return null;\n\n    // 自定义宽高：传入时优先于 size 预设；支持百分比。\n    const hasCustomWidth = width !== undefined;\n    const panelStyle: React.CSSProperties = {\n        width: hasCustomWidth ? toCssSize(width) : undefined,\n        maxWidth: hasCustomWidth ? '95vw' : undefined,\n        height: toCssSize(height),\n        maxHeight: '92vh',\n    };\n    // 面板尺寸类：未自定义宽度时才应用 max-w-* 预设。\n    const sizeClass = hasCustomWidth ? '' : SIZE_CLASS[size];\n    // 正文区：固定高度时自适应充满并内部滚动；否则限制最大高度。\n    const bodyClass = height !== undefined\n        ? 'min-h-0 flex-1 overflow-y-auto px-5 py-4'\n        : 'max-h-[70vh] overflow-y-auto px-5 py-4';\n\n    return (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\">\n            <div\n                className=\"absolute inset-0\"\n                onClick={closeOnOverlay ? onClose : undefined}\n                aria-hidden\n            />\n            <div\n                role=\"dialog\"\n                aria-modal=\"true\"\n                className={`dishui-modal card relative flex w-full min-w-0 flex-col rounded-xl border border-base-300 bg-base-100 text-body leading-5 text-base-content shadow-md ${sizeClass} ${className}`.trim()}\n                style={panelStyle}\n            >\n                {(title || showClose) && (\n                    <div className=\"flex shrink-0 items-start justify-between gap-3 border-b border-base-300 px-5 py-3\">\n                        <div className=\"min-w-0\">\n                            {title && (\n                                <h3 className=\"break-words text-body font-semibold text-base-content\">\n                                    {title}\n                                </h3>\n                            )}\n                            {description && (\n                                <p className=\"mt-1 text-body-sm leading-5 text-base-content/70\">{description}</p>\n                            )}\n                        </div>\n                        {showClose && (\n                            <button\n                                type=\"button\"\n                                onClick={onClose}\n                                aria-label=\"Close\"\n                                className=\"shrink-0 rounded-md p-1 text-base-content/70 transition-colors duration-150 motion-reduce:transition-none hover:bg-base-200 hover:text-base-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current\"\n                            >\n                                <svg\n                                    className=\"h-4 w-4\"\n                                    fill=\"none\"\n                                    viewBox=\"0 0 24 24\"\n                                    stroke=\"currentColor\"\n                                    strokeWidth={2}\n                                >\n                                    <path\n                                        strokeLinecap=\"round\"\n                                        strokeLinejoin=\"round\"\n                                        d=\"M6 18L18 6M6 6l12 12\"\n                                    />\n                                </svg>\n                            </button>\n                        )}\n                    </div>\n                )}\n                <div className={bodyClass}>{children}</div>\n                {footer && (\n                    <div className=\"flex shrink-0 flex-wrap justify-end gap-2 border-t border-base-300 px-5 py-3\">\n                        {footer}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default Modal;\n"],"mappings":";;;AA4BA,IAAM,IAA8D;CAChE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACV,GAEM,KAAa,MACf,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM,GAKzC,KAAS,EACX,SACA,YACA,UACA,gBACA,aACA,WACA,UAAO,MACP,UACA,WACA,oBAAiB,IACjB,eAAY,IACZ,eAAY,SACE;CAed,IAdA,QAAgB;EACZ,IAAI,CAAC,GAAM;EACX,IAAM,KAAS,MAAqB;GAChC,AAAI,EAAE,QAAQ,YAAU,EAAQ;EACpC;EACA,OAAO,iBAAiB,WAAW,CAAK;EACxC,IAAM,IAAe,SAAS,KAAK,MAAM;EAEzC,OADA,SAAS,KAAK,MAAM,WAAW,gBAClB;GAET,AADA,OAAO,oBAAoB,WAAW,CAAK,GAC3C,SAAS,KAAK,MAAM,WAAW;EACnC;CACJ,GAAG,CAAC,GAAM,CAAO,CAAC,GAEd,CAAC,GAAM,OAAO;CAGlB,IAAM,IAAiB,MAAU,KAAA,GAC3B,IAAkC;EACpC,OAAO,IAAiB,EAAU,CAAK,IAAI,KAAA;EAC3C,UAAU,IAAiB,SAAS,KAAA;EACpC,QAAQ,EAAU,CAAM;EACxB,WAAW;CACf,GAEM,IAAY,IAAiB,KAAK,EAAW,IAE7C,IAAY,MAAW,KAAA,IAEvB,2CADA;CAGN,OACI,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,kBAAC,OAAD;GACI,WAAU;GACV,SAAS,IAAiB,IAAU,KAAA;GACpC,eAAA;EACH,CAAA,GACD,kBAAC,OAAD;GACI,MAAK;GACL,cAAW;GACX,WAAW,yJAAyJ,EAAU,GAAG,IAAY,KAAK;GAClM,OAAO;GAJX,UAAA;KAMM,KAAS,MACP,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACI,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACK,KACG,kBAAC,MAAD;OAAI,WAAU;OACT,UAAA;MACD,CAAA,GAEP,KACG,kBAAC,KAAD;OAAG,WAAU;OAAoD,UAAA;MAAe,CAAA,CAEnF;KACJ,CAAA,GAAA,KACG,kBAAC,UAAD;MACI,MAAK;MACL,SAAS;MACT,cAAW;MACX,WAAU;MAEV,UAAA,kBAAC,OAAD;OACI,WAAU;OACV,MAAK;OACL,SAAQ;OACR,QAAO;OACP,aAAa;OAEb,UAAA,kBAAC,QAAD;QACI,eAAc;QACd,gBAAe;QACf,GAAE;OACL,CAAA;MACA,CAAA;KACD,CAAA,CAEX;;IAET,kBAAC,OAAD;KAAK,WAAW;KAAY;IAAc,CAAA;IACzC,KACG,kBAAC,OAAD;KAAK,WAAU;KACV,UAAA;IACA,CAAA;GAER;EACJ,CAAA,CAAA;;AAEb"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import React, { useId, useLayoutEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { mountFocusScope } from './focusScope';\n\nexport type ModalProps = {\n    /** 是否打开 */\n    open: boolean;\n    /** 关闭回调（遮罩点击 / Esc / 关闭按钮触发） */\n    onClose: () => void;\n    /** 标题 */\n    title?: React.ReactNode;\n    /** 标题下的说明文字 */\n    description?: React.ReactNode;\n    /** 正文内容 */\n    children?: React.ReactNode;\n    /** 底部操作区（默认右对齐） */\n    footer?: React.ReactNode;\n    /** 尺寸（预设）：sm / md / lg / xl / full */\n    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n    /** 自定义宽度：支持百分比/像素等 CSS 长度（如 \"80%\"、640）。优先于 size。 */\n    width?: number | string;\n    /** 自定义高度：支持百分比/像素等 CSS 长度（如 \"80%\"、480）。 */\n    height?: number | string;\n    /** 点击遮罩是否关闭（默认 true） */\n    closeOnOverlay?: boolean;\n    /** 是否显示右上角关闭按钮（默认 true） */\n    showClose?: boolean;\n    className?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n};\n\nconst SIZE_CLASS: Record<NonNullable<ModalProps['size']>, string> = {\n    sm: 'max-w-sm',\n    md: 'max-w-lg',\n    lg: 'max-w-2xl',\n    xl: 'max-w-5xl',\n    full: 'max-w-[95vw]',\n};\n\nconst toCssSize = (value: number | string | undefined): string | undefined =>\n    typeof value === 'number' ? `${value}px` : value;\n\n/**\n * 轻量模态框：遮罩 + 居中面板，支持 Esc 关闭、遮罩点击关闭与滚动锁定。\n */\nconst Modal = ({\n    open,\n    onClose,\n    title,\n    description,\n    children,\n    footer,\n    size = 'md',\n    width,\n    height,\n    closeOnOverlay = true,\n    showClose = true,\n    className = '',\n    'aria-label': ariaLabel,\n    'aria-labelledby': labelledBy,\n    'aria-describedby': describedBy,\n}: ModalProps) => {\n    const titleId = useId();\n    const descriptionId = useId();\n    const panel = useRef<HTMLDivElement>(null);\n    const overlay = useRef<HTMLDivElement>(null);\n    const trigger = useRef<HTMLElement | null>(null);\n    const wasOpen = useRef(false);\n    const close = useRef(onClose);\n    // Capture before React commits autoFocus inside the newly opened portal.\n    if (open && !wasOpen.current && typeof document !== 'undefined') trigger.current = document.activeElement as HTMLElement | null;\n    wasOpen.current = open;\n    useLayoutEffect(() => { close.current = onClose; });\n    useLayoutEffect(() => {\n        if (!open || !panel.current || !overlay.current) return;\n        return mountFocusScope(panel.current, overlay.current, trigger.current, () => close.current());\n    }, [open]);\n\n    if (!open || typeof document === 'undefined') return null;\n\n    // 自定义宽高：传入时优先于 size 预设；支持百分比。\n    const hasCustomWidth = width !== undefined;\n    const panelStyle: React.CSSProperties = {\n        width: hasCustomWidth ? toCssSize(width) : undefined,\n        maxWidth: hasCustomWidth ? '95vw' : undefined,\n        height: toCssSize(height),\n        maxHeight: '92vh',\n    };\n    // 面板尺寸类：未自定义宽度时才应用 max-w-* 预设。\n    const sizeClass = hasCustomWidth ? '' : SIZE_CLASS[size];\n    // 正文区：固定高度时自适应充满并内部滚动；否则限制最大高度。\n    const bodyClass = height !== undefined\n        ? 'min-h-0 flex-1 overflow-y-auto px-5 py-4'\n        : 'max-h-[70vh] overflow-y-auto px-5 py-4';\n\n    return createPortal(\n        <div ref={overlay} className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4\">\n            <div\n                className=\"absolute inset-0\"\n                onClick={closeOnOverlay ? onClose : undefined}\n                aria-hidden\n            />\n            <div\n                ref={panel}\n                role=\"dialog\"\n                tabIndex={-1}\n                aria-modal=\"true\"\n                aria-label={ariaLabel}\n                aria-labelledby={labelledBy ?? (title && !ariaLabel ? titleId : undefined)}\n                aria-describedby={describedBy ?? (description ? descriptionId : undefined)}\n                className={`dishui-modal card relative flex w-full min-w-0 flex-col rounded-xl border border-base-300 bg-base-100 text-body leading-5 text-base-content shadow-md ${sizeClass} ${className}`.trim()}\n                style={panelStyle}\n            >\n                {(title || description || showClose) && (\n                    <div className=\"flex shrink-0 items-start justify-between gap-3 border-b border-base-300 px-5 py-3\">\n                        <div className=\"min-w-0\">\n                            {title && (\n                                <h3 id={titleId} className=\"break-words text-body font-semibold text-base-content\">\n                                    {title}\n                                </h3>\n                            )}\n                            {description && (\n                                <p id={descriptionId} className=\"mt-1 text-body-sm leading-5 text-base-content/70\">{description}</p>\n                            )}\n                        </div>\n                        {showClose && (\n                            <button\n                                type=\"button\"\n                                onClick={onClose}\n                                aria-label=\"Close\"\n                                className=\"shrink-0 rounded-md p-1 text-base-content/70 transition-colors duration-150 motion-reduce:transition-none hover:bg-base-200 hover:text-base-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current\"\n                            >\n                                <svg\n                                    className=\"h-4 w-4\"\n                                    fill=\"none\"\n                                    viewBox=\"0 0 24 24\"\n                                    stroke=\"currentColor\"\n                                    strokeWidth={2}\n                                >\n                                    <path\n                                        strokeLinecap=\"round\"\n                                        strokeLinejoin=\"round\"\n                                        d=\"M6 18L18 6M6 6l12 12\"\n                                    />\n                                </svg>\n                            </button>\n                        )}\n                    </div>\n                )}\n                <div className={bodyClass}>{children}</div>\n                {footer && (\n                    <div className=\"flex shrink-0 flex-wrap justify-end gap-2 border-t border-base-300 px-5 py-3\">\n                        {footer}\n                    </div>\n                )}\n            </div>\n        </div>,\n        document.body,\n    );\n};\n\nexport default Modal;\n"],"mappings":";;;;;AAiCA,IAAM,IAA8D;CAChE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACV,GAEM,KAAa,MACf,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM,GAKzC,KAAS,EACX,SACA,YACA,UACA,gBACA,aACA,WACA,UAAO,MACP,UACA,WACA,oBAAiB,IACjB,eAAY,IACZ,eAAY,IACZ,cAAc,GACd,mBAAmB,GACnB,oBAAoB,QACN;CACd,IAAM,IAAU,EAAM,GAChB,IAAgB,EAAM,GACtB,IAAQ,EAAuB,IAAI,GACnC,IAAU,EAAuB,IAAI,GACrC,IAAU,EAA2B,IAAI,GACzC,IAAU,EAAO,EAAK,GACtB,IAAQ,EAAO,CAAO;CAU5B,IARI,KAAQ,CAAC,EAAQ,WAAW,OAAO,WAAa,QAAa,EAAQ,UAAU,SAAS,gBAC5F,EAAQ,UAAU,GAClB,QAAsB;EAAE,EAAM,UAAU;CAAS,CAAC,GAClD,QAAsB;EACd,IAAC,KAAS,EAAM,WAAY,EAAQ,SACxC,OAAO,EAAgB,EAAM,SAAS,EAAQ,SAAS,EAAQ,eAAe,EAAM,QAAQ,CAAC;CACjG,GAAG,CAAC,CAAI,CAAC,GAEL,CAAC,KAAQ,OAAO,WAAa,KAAa,OAAO;CAGrD,IAAM,IAAiB,MAAU,KAAA,GAC3B,IAAkC;EACpC,OAAO,IAAiB,EAAU,CAAK,IAAI,KAAA;EAC3C,UAAU,IAAiB,SAAS,KAAA;EACpC,QAAQ,EAAU,CAAM;EACxB,WAAW;CACf,GAEM,IAAY,IAAiB,KAAK,EAAW,IAE7C,IAAY,MAAW,KAAA,IAEvB,2CADA;CAGN,OAAO,EACH,kBAAC,OAAD;EAAK,KAAK;EAAS,WAAU;EAA7B,UAAA,CACI,kBAAC,OAAD;GACI,WAAU;GACV,SAAS,IAAiB,IAAU,KAAA;GACpC,eAAA;EACH,CAAA,GACD,kBAAC,OAAD;GACI,KAAK;GACL,MAAK;GACL,UAAU;GACV,cAAW;GACX,cAAY;GACZ,mBAAiB,MAAe,KAAS,CAAC,IAAY,IAAU,KAAA;GAChE,oBAAkB,MAAgB,IAAc,IAAgB,KAAA;GAChE,WAAW,yJAAyJ,EAAU,GAAG,IAAY,KAAK;GAClM,OAAO;GATX,UAAA;KAWM,KAAS,KAAe,MACtB,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACI,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACK,KACG,kBAAC,MAAD;OAAI,IAAI;OAAS,WAAU;OACtB,UAAA;MACD,CAAA,GAEP,KACG,kBAAC,KAAD;OAAG,IAAI;OAAe,WAAU;OAAoD,UAAA;MAAe,CAAA,CAEtG;KACJ,CAAA,GAAA,KACG,kBAAC,UAAD;MACI,MAAK;MACL,SAAS;MACT,cAAW;MACX,WAAU;MAEV,UAAA,kBAAC,OAAD;OACI,WAAU;OACV,MAAK;OACL,SAAQ;OACR,QAAO;OACP,aAAa;OAEb,UAAA,kBAAC,QAAD;QACI,eAAc;QACd,gBAAe;QACf,GAAE;OACL,CAAA;MACA,CAAA;KACD,CAAA,CAEX;;IAET,kBAAC,OAAD;KAAK,WAAW;KAAY;IAAc,CAAA;IACzC,KACG,kBAAC,OAAD;KAAK,WAAU;KACV,UAAA;IACA,CAAA;GAER;EACJ,CAAA,CAAA;CACL,CAAA,GAAA,SAAS,IACb;AACJ"}

package/dist/components/Page/Float.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type PageFloatProps = React.HTMLAttributes<HTMLDivElement> & {
+    title?: string;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    defaultPosition?: {
+        x: number;
+        y: number;
+    };
+    draggable?: boolean;
+};
+/** Coordinates are relative to the containing Page; dragging is confined to it. */
+export default function PageFloat({ title, collapsed, defaultCollapsed, onCollapsedChange, defaultPosition, draggable, className, style, children, ...rest }: PageFloatProps): React.JSX.Element;

package/dist/components/Page/Float2.js

@@ -0,0 +1,154 @@
+import { cn as e } from "../../utils/cn.js";
+/* empty css      */
+import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/Page/Float.tsx
+function c({ title: c = "Float", collapsed: l, defaultCollapsed: u = !1, onCollapsedChange: d, defaultPosition: f = {
+	x: 16,
+	y: 16
+}, draggable: p = !0, className: m, style: h, children: g, ..._ }) {
+	let [v, y] = i(u), b = l ?? v, [x, S] = i(f), C = r(null), w = r(null), T = r(null), E = r(!1), D = t((e) => {
+		let t = C.current, n = t?.offsetParent;
+		return !t || !n ? e : {
+			x: Math.max(0, Math.min(e.x, n.clientWidth - t.offsetWidth)),
+			y: Math.max(0, Math.min(e.y, n.clientHeight - t.offsetHeight))
+		};
+	}, []);
+	n(() => {
+		let e = () => S((e) => {
+			let t = D(e);
+			return t.x === e.x && t.y === e.y ? e : t;
+		});
+		e();
+		let t = new ResizeObserver(e);
+		return C.current && t.observe(C.current), C.current?.offsetParent && t.observe(C.current.offsetParent), () => t.disconnect();
+	}, [D, b]);
+	let O = () => {
+		y(!b), d?.(!b), w.current?.focus();
+	}, k = {
+		onPointerDown: (e) => {
+			E.current = !1, p && e.button === 0 && (T.current = {
+				id: e.pointerId,
+				x: e.clientX,
+				y: e.clientY,
+				origin: x,
+				moved: !1
+			}, e.currentTarget.setPointerCapture(e.pointerId));
+		},
+		onPointerMove: (e) => {
+			let t = T.current;
+			if (!t || t.id !== e.pointerId) return;
+			let n = e.clientX - t.x, r = e.clientY - t.y;
+			Math.abs(n) + Math.abs(r) > 4 && (t.moved = !0), t.moved && S(D({
+				x: t.origin.x + n,
+				y: t.origin.y + r
+			}));
+		},
+		onPointerUp: (e) => {
+			E.current = T.current?.moved ?? !1, T.current = null, e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId);
+		},
+		onPointerCancel: () => {
+			T.current = null;
+		},
+		onLostPointerCapture: () => {
+			T.current = null;
+		},
+		onKeyDown: (e) => {
+			if (!p) return;
+			let t = e.shiftKey ? 32 : 8, n = {
+				ArrowLeft: [-t, 0],
+				ArrowRight: [t, 0],
+				ArrowUp: [0, -t],
+				ArrowDown: [0, t]
+			}[e.key];
+			n && (e.preventDefault(), S((e) => D({
+				x: e.x + n[0],
+				y: e.y + n[1]
+			})));
+		}
+	};
+	return /* @__PURE__ */ s("div", {
+		..._,
+		ref: C,
+		className: e("dishui-page-float absolute z-30 overflow-hidden border border-base-300 bg-base-100 text-base-content shadow-sm", b ? "rounded-full" : "rounded-lg", m),
+		"data-collapsed": b,
+		style: {
+			width: 288,
+			maxWidth: "100%",
+			maxHeight: "100%",
+			...h,
+			...b ? {
+				boxSizing: "border-box",
+				width: 48,
+				height: 48,
+				minWidth: 48,
+				minHeight: 48,
+				maxWidth: 48,
+				maxHeight: 48,
+				padding: 0,
+				borderRadius: "50%"
+			} : {},
+			left: x.x,
+			top: x.y
+		},
+		children: [/* @__PURE__ */ s("div", {
+			className: e("flex items-center border-base-300", b && "h-full w-full"),
+			children: [!b && /* @__PURE__ */ o("button", {
+				type: "button",
+				...k,
+				onClick: () => {
+					E.current = !1;
+				},
+				"aria-label": `${c}: move with arrow keys`,
+				className: "min-w-0 flex-1 truncate px-3 py-2 text-left text-sm font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary",
+				style: {
+					touchAction: p ? "none" : void 0,
+					cursor: p ? "grab" : void 0
+				},
+				children: c
+			}), /* @__PURE__ */ o("button", {
+				ref: w,
+				type: "button",
+				...b ? k : {},
+				"aria-label": `${b ? "Expand" : "Collapse"} ${c}`,
+				"aria-expanded": !b,
+				title: `${b ? "Expand" : "Collapse"} ${c}`,
+				className: e("dishui-page-float-toggle flex shrink-0 items-center justify-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary", b ? "h-full w-full rounded-full" : "h-9 w-9 rounded-md"),
+				style: {
+					touchAction: b && p ? "none" : void 0,
+					cursor: b && p ? "grab" : "pointer"
+				},
+				onClick: () => {
+					E.current || O(), E.current = !1;
+				},
+				children: /* @__PURE__ */ o("svg", {
+					"aria-hidden": "true",
+					width: "20",
+					height: "20",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.75",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					children: b ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("rect", {
+						x: "4",
+						y: "4",
+						width: "16",
+						height: "16",
+						rx: "3"
+					}), /* @__PURE__ */ o("path", { d: "M4 10h16M9 4v6" })] }) : /* @__PURE__ */ o("path", { d: "M6 12h12" })
+				})
+			})]
+		}), /* @__PURE__ */ o("div", {
+			hidden: b,
+			className: "overflow-auto border-t border-base-300 p-3 text-sm",
+			style: { maxHeight: "min(60vh, 360px)" },
+			children: g
+		})]
+	});
+}
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=Float2.js.map

package/dist/components/Page/Float2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Float2.js","names":[],"sources":["../../../src/components/Page/Float.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport './Float.css';\n\nexport type PageFloatProps = React.HTMLAttributes<HTMLDivElement> & {\n    title?: string;\n    collapsed?: boolean;\n    defaultCollapsed?: boolean;\n    onCollapsedChange?: (collapsed: boolean) => void;\n    defaultPosition?: { x: number; y: number };\n    draggable?: boolean;\n};\n\n/** Coordinates are relative to the containing Page; dragging is confined to it. */\nexport default function PageFloat({\n    title = 'Float', collapsed, defaultCollapsed = false, onCollapsedChange,\n    defaultPosition = { x: 16, y: 16 }, draggable = true,\n    className, style, children, ...rest\n}: PageFloatProps) {\n    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);\n    const isCollapsed = collapsed ?? internalCollapsed;\n    const [position, setPosition] = useState(defaultPosition);\n    const root = useRef<HTMLDivElement>(null);\n    const toggle = useRef<HTMLButtonElement>(null);\n    const drag = useRef<{ id: number; x: number; y: number; origin: typeof position; moved: boolean } | null>(null);\n    const suppressClick = useRef(false);\n    const clamp = useCallback((next: typeof position) => {\n        const element = root.current;\n        const parent = element?.offsetParent as HTMLElement | null;\n        if (!element || !parent) return next;\n        return {\n            x: Math.max(0, Math.min(next.x, parent.clientWidth - element.offsetWidth)),\n            y: Math.max(0, Math.min(next.y, parent.clientHeight - element.offsetHeight)),\n        };\n    }, []);\n    useEffect(() => {\n        const update = () => setPosition(current => {\n            const next = clamp(current);\n            return next.x === current.x && next.y === current.y ? current : next;\n        });\n        update();\n        const observer = new ResizeObserver(update);\n        if (root.current) observer.observe(root.current);\n        if (root.current?.offsetParent) observer.observe(root.current.offsetParent);\n        return () => observer.disconnect();\n    }, [clamp, isCollapsed]);\n    const changeCollapsed = () => {\n        setInternalCollapsed(!isCollapsed);\n        onCollapsedChange?.(!isCollapsed);\n        toggle.current?.focus();\n    };\n    const dragEvents = {\n        onPointerDown: (event: React.PointerEvent<HTMLButtonElement>) => {\n            suppressClick.current = false;\n            if (!draggable || event.button !== 0) return;\n            drag.current = { id: event.pointerId, x: event.clientX, y: event.clientY, origin: position, moved: false };\n            event.currentTarget.setPointerCapture(event.pointerId);\n        },\n        onPointerMove: (event: React.PointerEvent<HTMLButtonElement>) => {\n            const current = drag.current;\n            if (!current || current.id !== event.pointerId) return;\n            const dx = event.clientX - current.x;\n            const dy = event.clientY - current.y;\n            if (Math.abs(dx) + Math.abs(dy) > 4) current.moved = true;\n            if (current.moved) setPosition(clamp({ x: current.origin.x + dx, y: current.origin.y + dy }));\n        },\n        onPointerUp: (event: React.PointerEvent<HTMLButtonElement>) => {\n            suppressClick.current = drag.current?.moved ?? false;\n            drag.current = null;\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);\n        },\n        onPointerCancel: () => { drag.current = null; },\n        onLostPointerCapture: () => { drag.current = null; },\n        onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (!draggable) return;\n            const delta = event.shiftKey ? 32 : 8;\n            const offsets: Record<string, [number, number]> = { ArrowLeft: [-delta, 0], ArrowRight: [delta, 0], ArrowUp: [0, -delta], ArrowDown: [0, delta] };\n            const offset = offsets[event.key];\n            if (!offset) return;\n            event.preventDefault();\n            setPosition(current => clamp({ x: current.x + offset[0], y: current.y + offset[1] }));\n        },\n    };\n    return (\n        <div {...rest} ref={root} className={cn('dishui-page-float absolute z-30 overflow-hidden border border-base-300 bg-base-100 text-base-content shadow-sm', isCollapsed ? 'rounded-full' : 'rounded-lg', className)}\n            data-collapsed={isCollapsed}\n                        style={{ width: 288, maxWidth: '100%', maxHeight: '100%', ...style,\n                            ...(isCollapsed ? { boxSizing: 'border-box', width: 48, height: 48, minWidth: 48, minHeight: 48, maxWidth: 48, maxHeight: 48, padding: 0, borderRadius: '50%' } as React.CSSProperties : {}),\n                            left: position.x, top: position.y }}>\n            <div className={cn('flex items-center border-base-300', isCollapsed && 'h-full w-full')}>\n                {!isCollapsed && <button type=\"button\" {...dragEvents} onClick={() => { suppressClick.current = false; }} aria-label={`${title}: move with arrow keys`} className=\"min-w-0 flex-1 truncate px-3 py-2 text-left text-sm font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary\" style={{ touchAction: draggable ? 'none' : undefined, cursor: draggable ? 'grab' : undefined }}>{title}</button>}\n                <button ref={toggle} type=\"button\" {...(isCollapsed ? dragEvents : {})} aria-label={`${isCollapsed ? 'Expand' : 'Collapse'} ${title}`} aria-expanded={!isCollapsed}\n                    title={`${isCollapsed ? 'Expand' : 'Collapse'} ${title}`}\n                    className={cn('dishui-page-float-toggle flex shrink-0 items-center justify-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary', isCollapsed ? 'h-full w-full rounded-full' : 'h-9 w-9 rounded-md')}\n                    style={{ touchAction: isCollapsed && draggable ? 'none' : undefined, cursor: isCollapsed && draggable ? 'grab' : 'pointer' }}\n                    onClick={() => { if (!suppressClick.current) changeCollapsed(); suppressClick.current = false; }}>\n                    <svg aria-hidden=\"true\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                                            {isCollapsed ? <><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"3\" /><path d=\"M4 10h16M9 4v6\" /></> : <path d=\"M6 12h12\" />}\n                                        </svg>\n                </button>\n            </div>\n            <div hidden={isCollapsed} className=\"overflow-auto border-t border-base-300 p-3 text-sm\" style={{ maxHeight: 'min(60vh, 360px)' }}>{children}</div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Page/index.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
+import PageFloat from './Float';
+import { type PageResizeProps } from './resize';
+export type { PageFloatProps } from './Float';
 import { PageHeaderProps } from '../PageHeader';
+import { type PagePanelProps, type PageAutoHideProps } from '../PagePanel';
+export type { PagePanelProps } from '../PagePanel';
 /**
  * Page 布局脚手架
  * ----------------------------------------------------------------------------
@@ -26,8 +31,22 @@ export type PageBodyProps = React.HTMLAttributes<HTMLDivElement> & {
     /** 是否让主体区在剩余空间内滚动（配合 Page fullHeight 使用） */
     scroll?: boolean;
 };
-export type PageAsideProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** 侧栏宽度，数字按 px 处理，默认 260 */
+export type PageHeaderLevel = PageHeaderProps & {
+    key: React.Key;
+};
+export type PageHeaderSlotProps = PageHeaderProps & {
+    /** 按顺序从上到下渲染；每级覆盖公共属性。空数组不渲染页头。 */
+    levels?: readonly PageHeaderLevel[];
+};
+export type PageAsideLevel = PageAsideProps & {
+    key: React.Key;
+};
+export type PageAsideSlotProps = PageAsideProps & {
+    /** 按 DOM 顺序从左到右渲染（小屏纵向堆叠）；每级覆盖公共属性。 */
+    levels?: readonly PageAsideLevel[];
+};
+export type PageAsideProps = React.HTMLAttributes<HTMLDivElement> & PagePanelProps & PageResizeProps & {
+    /** 侧栏宽度，数字按 px 处理；Left 默认 260，Right 默认 320。外部变化会同步到拖动宽度。 */
     width?: number | string;
     /** 是否显示分隔边框 */
     bordered?: boolean;
@@ -40,19 +59,27 @@ export type PageMainProps = React.HTMLAttributes<HTMLDivElement> & {
     /** 主内容区是否在剩余空间内纵向滚动 */
     scroll?: boolean;
 };
-/** 页头：直接复用 PageHeader，作为 Page.Header 使用 */
-declare const PageHeaderSlot: (props: PageHeaderProps) => React.JSX.Element;
+/** 不增加包装节点，保持 Page / Body 的布局、间距及面板开关语义。 */
+declare const PageHeaderSlot: ({ levels, ...props }: PageHeaderSlotProps) => React.JSX.Element;
 declare const PageBody: ({ gap, scroll, className, style, children, ...rest }: PageBodyProps) => React.JSX.Element;
-declare const PageLeft: ({ width, bordered, scroll, hideOnMobile, className, style, children, ...rest }: PageAsideProps) => React.JSX.Element;
-declare const PageRight: ({ width, bordered, scroll, hideOnMobile, className, style, children, ...rest }: PageAsideProps) => React.JSX.Element;
+declare const PageLeft: ({ levels, ...props }: PageAsideSlotProps) => React.ReactElement;
+declare const PageRight: ({ levels, ...props }: PageAsideSlotProps) => React.ReactElement;
+export type PageFooterProps = React.HTMLAttributes<HTMLElement> & PagePanelProps & PageAutoHideProps & {
+    left?: React.ReactNode;
+    center?: React.ReactNode;
+    right?: React.ReactNode;
+};
+declare const PageFooter: ({ open, mode, animated, duration, autoHide, className, children, left, center, right, ...rest }: PageFooterProps) => React.JSX.Element;
 declare const PageMain: ({ scroll, className, children, ...rest }: PageMainProps) => React.JSX.Element;
 interface PageCompound extends React.FC<PageProps> {
     Header: typeof PageHeaderSlot;
+    Footer: typeof PageFooter;
+    Float: typeof PageFloat;
     Body: typeof PageBody;
     Left: typeof PageLeft;
     Right: typeof PageRight;
     Main: typeof PageMain;
 }
 declare const PageWithCompounds: PageCompound;
-export { PageBody, PageLeft, PageRight, PageMain };
+export { PageBody, PageLeft, PageRight, PageMain, PageFooter, PageFloat };
 export default PageWithCompounds;

package/dist/components/Page/index.js

@@ -1,43 +1,124 @@
 import { cn as e } from "../../utils/cn.js";
-import t from "../PageHeader/index.js";
-import "react";
-import { jsx as n } from "react/jsx-runtime";
+import t from "../PagePanel/index.js";
+import n from "../PageHeader/index.js";
+import r from "./Float2.js";
+import i from "./resize2.js";
+import { createElement as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/Page/index.tsx
-var r = (e) => typeof e == "number" ? `${e}px` : e, i = ({ fullHeight: t = !1, className: r = "", children: i, ...a }) => /* @__PURE__ */ n("div", {
-	className: e("dishui-page flex w-full min-w-0 flex-col text-body leading-5 text-base-content", t && "h-full min-h-0", r),
-	...a,
-	children: i
-}), a = (e) => /* @__PURE__ */ n(t, { ...e }), o = ({ gap: t = 16, scroll: i = !1, className: a = "", style: o, children: s, ...c }) => /* @__PURE__ */ n("div", {
-	className: e("dishui-page-body flex w-full flex-col md:flex-row", i && "min-h-0 flex-1", a),
+var l = (e) => typeof e == "number" ? `${e}px` : e, u = ({ fullHeight: t = !1, className: n = "", children: r, ...i }) => /* @__PURE__ */ s("div", {
+	className: e("dishui-page flex w-full min-w-0 flex-col text-body leading-5 text-base-content", t && "h-full min-h-0", n),
+	...i,
+	children: r
+}), d = ({ levels: e, ...t }) => e === void 0 ? /* @__PURE__ */ s(n, { ...t }) : /* @__PURE__ */ s(o, { children: e.map(({ key: e, ...r }) => /* @__PURE__ */ a(n, {
+	...t,
+	...r,
+	key: e
+})) }), f = ({ gap: t = 16, scroll: n = !1, className: r = "", style: i, children: a, ...o }) => /* @__PURE__ */ s("div", {
+	className: e("dishui-page-body flex w-full flex-col md:flex-row", n && "min-h-0 flex-1", r),
 	style: {
-		gap: r(t),
-		...o
+		...i,
+		gap: 0,
+		"--dishui-page-gap": l(i?.gap ?? t)
 	},
-	...c,
-	children: s
-}), s = ({ width: t = 260, bordered: i = !0, scroll: a = !0, hideOnMobile: o = !1, className: s = "", style: c, children: l, ...u }) => /* @__PURE__ */ n("aside", {
-	className: e("dishui-page-left w-full shrink-0 md:w-(--dishui-aside-w)", i && "md:border-r md:border-base-300 md:pr-4", a && "md:min-h-0 md:overflow-y-auto", o && "hidden md:block", s),
-	style: {
-		"--dishui-aside-w": r(t),
-		...c
-	},
-	...u,
-	children: l
-}), c = ({ width: t = 320, bordered: i = !0, scroll: a = !0, hideOnMobile: o = !1, className: s = "", style: c, children: l, ...u }) => /* @__PURE__ */ n("aside", {
-	className: e("dishui-page-right w-full shrink-0 md:w-(--dishui-aside-w)", i && "md:border-l md:border-base-300 md:pl-4", a && "md:min-h-0 md:overflow-y-auto", o && "hidden md:block", s),
-	style: {
-		"--dishui-aside-w": r(t),
-		...c
-	},
-	...u,
-	children: l
-}), l = ({ scroll: t = !1, className: r = "", children: i, ...a }) => /* @__PURE__ */ n("main", {
-	className: e("dishui-page-main min-w-0 flex-1", t && "min-h-0 overflow-y-auto", r),
-	...a,
-	children: i
-}), u = i;
-u.Header = a, u.Body = o, u.Left = s, u.Right = c, u.Main = l;
+	...o,
+	children: a
+}), p = ({ levels: e, ...t }) => e === void 0 ? m(t) : /* @__PURE__ */ s(o, { children: e.map(({ key: e, ...n }) => /* @__PURE__ */ a(m, {
+	...t,
+	...n,
+	key: e
+})) }), m = ({ resizeVariant: n = "pill", resizable: r = !1, minWidth: a = 160, maxWidth: o = 600, onWidthChange: c, open: u, mode: d, animated: f, duration: p, width: m = 260, bordered: h = !0, scroll: g = !0, hideOnMobile: _ = !1, className: v = "", style: y, children: b, ...x }) => {
+	let S = /* @__PURE__ */ s(t, {
+		edge: "left",
+		width: y?.width ?? m,
+		hideOnMobile: _,
+		open: u,
+		mode: d,
+		animated: f,
+		duration: p,
+		children: /* @__PURE__ */ s("aside", {
+			className: e("dishui-page-left w-full shrink-0 md:w-(--dishui-aside-w)", h && "md:border-r md:border-base-300 md:pr-4", g && "md:min-h-0 md:overflow-y-auto", _ && "hidden md:block", v),
+			style: {
+				"--dishui-aside-w": l(m),
+				...y
+			},
+			...x,
+			children: b
+		})
+	});
+	return r ? /* @__PURE__ */ s(i, {
+		panel: S,
+		resizeVariant: n,
+		minWidth: a,
+		maxWidth: o,
+		onWidthChange: c
+	}) : S;
+}, h = ({ levels: e, ...t }) => e === void 0 ? g(t) : /* @__PURE__ */ s(o, { children: e.map(({ key: e, ...n }) => /* @__PURE__ */ a(g, {
+	...t,
+	...n,
+	key: e
+})) }), g = ({ resizeVariant: n = "pill", resizable: r = !1, minWidth: a = 160, maxWidth: o = 600, onWidthChange: c, open: u, mode: d, animated: f, duration: p, width: m = 320, bordered: h = !0, scroll: g = !0, hideOnMobile: _ = !1, className: v = "", style: y, children: b, ...x }) => {
+	let S = /* @__PURE__ */ s(t, {
+		edge: "right",
+		width: y?.width ?? m,
+		hideOnMobile: _,
+		open: u,
+		mode: d,
+		animated: f,
+		duration: p,
+		children: /* @__PURE__ */ s("aside", {
+			className: e("dishui-page-right w-full shrink-0 md:w-(--dishui-aside-w)", h && "md:border-l md:border-base-300 md:pl-4", g && "md:min-h-0 md:overflow-y-auto", _ && "hidden md:block", v),
+			style: {
+				"--dishui-aside-w": l(m),
+				...y
+			},
+			...x,
+			children: b
+		})
+	});
+	return r ? /* @__PURE__ */ s(i, {
+		panel: S,
+		resizeVariant: n,
+		minWidth: a,
+		maxWidth: o,
+		onWidthChange: c
+	}) : S;
+}, _ = ({ open: n, mode: r, animated: i, duration: a, autoHide: o, className: l, children: u, left: d, center: f, right: p, ...m }) => /* @__PURE__ */ s(t, {
+	edge: "footer",
+	autoHide: o,
+	open: n,
+	mode: r,
+	animated: i,
+	duration: a,
+	children: /* @__PURE__ */ s("footer", {
+		className: e("dishui-page-footer", l),
+		...m,
+		children: u === void 0 ? /* @__PURE__ */ c("div", {
+			className: "dishui-page-header-layout",
+			"data-centered": f != null && f !== !1 || void 0,
+			children: [
+				d != null && /* @__PURE__ */ s("div", {
+					className: "dishui-page-header-left",
+					children: d
+				}),
+				f != null && /* @__PURE__ */ s("div", {
+					className: "dishui-page-header-center",
+					children: f
+				}),
+				p != null && /* @__PURE__ */ s("div", {
+					className: "dishui-page-header-right",
+					children: p
+				})
+			]
+		}) : u
+	})
+}), v = ({ scroll: t = !1, className: n = "", children: r, ...i }) => /* @__PURE__ */ s("main", {
+	className: e("dishui-page-main min-w-0 flex-1", t && "min-h-0 overflow-y-auto", n),
+	...i,
+	children: r
+}), y = u;
+y.Header = d, y.Footer = _, y.Float = r, y.Body = f, y.Left = p, y.Right = h, y.Main = v;
 //#endregion
-export { o as PageBody, s as PageLeft, l as PageMain, c as PageRight, u as default };
+export { f as PageBody, r as PageFloat, _ as PageFooter, p as PageLeft, v as PageMain, h as PageRight, y as default };
 
 //# sourceMappingURL=index.js.map