dishui 0.0.82 → 0.0.83

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import PagePanel from '../PagePanel';
+export type PageResizeProps = {
+    /** 启用侧栏宽度调整，默认 false。 */
+    resizable?: boolean;
+    /** 调宽手柄外观，默认 pill；line 仅显示分隔线。 */
+    resizeVariant?: 'pill' | 'line';
+    /** 可调整的最小像素宽度，默认 160。 */
+    minWidth?: number;
+    /** 可调整的最大像素宽度，默认 600。 */
+    maxWidth?: number;
+    /** 用户调整宽度时触发，参数为像素宽度。 */
+    onWidthChange?: (width: number) => void;
+};
+export declare function resizeLimits(min?: number, max?: number): readonly [number, number];
+export declare const clampWidth: (width: number, min: number, max: number) => number;
+type Props = Omit<PageResizeProps, 'resizable'> & {
+    panel: React.ReactElement<React.ComponentProps<typeof PagePanel>>;
+};
+/** Keep the legacy aside markup/scroll owner; the separator belongs to the shell. */
+export default function ResizableAside({ panel, minWidth, maxWidth, onWidthChange, resizeVariant }: Props): React.ReactElement<import(".").PagePanelProps & import("../PagePanel").PageAutoHideProps & {
+    edge: 'header' | 'footer' | 'left' | 'right';
+    width?: number | string;
+    hideOnMobile?: boolean;
+    children: React.ReactNode;
+    resizeHandle?: React.ReactNode;
+}, string | React.JSXElementConstructor<any>>;
+export {};

package/dist/components/Page/resize2.js

@@ -0,0 +1,95 @@
+import { useResize as e } from "../Resizable/useResize.js";
+import { ResizeGrip as t } from "../Resizable/ResizeGrip.js";
+/* empty css       */
+import n, { useEffect as r, useId as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/Page/resize.tsx
+function l(e = 160, t = 600) {
+	let n = Number.isFinite(e) ? Math.max(0, e) : 160;
+	return [n, Number.isFinite(t) ? Math.max(n, t) : Math.max(n, 600)];
+}
+var u = (e, t, n) => Math.min(n, Math.max(t, e));
+function d({ panel: d, minWidth: f, maxWidth: p, onWidthChange: m, resizeVariant: h = "pill" }) {
+	let { width: g = 260, open: _ = !0, edge: v } = d.props, [y, b] = l(f, p), [x, S] = s({ source: g });
+	x.source !== g && S({ source: g });
+	let C = o(void 0), [w, T] = s(typeof g == "number" ? u(g, y, b) : y), E = o(null), D = i(), O = d.props.children, k = O.props.id ?? D, A = x.source === g && x.value !== void 0 ? u(x.value, y, b) : typeof g == "number" ? u(g, y, b) : g, j = v === "right" ? -1 : 1, M = e({
+		value: typeof A == "number" ? A : w,
+		getValue: () => E.current?.getBoundingClientRect().width ?? w,
+		min: y,
+		max: b,
+		disabled: !_,
+		getScale: () => j,
+		keyboardDirection: j,
+		step: 8,
+		shiftMultiplier: 4,
+		threshold: 0,
+		onChange: (e) => P(e)
+	}), N = M.cancel;
+	a(() => {
+		g !== C.current && N();
+	}, [g, N]), r(() => {
+		let e = window.matchMedia("(min-width: 768px)"), t = () => N();
+		return e.addEventListener("change", t), () => {
+			e.removeEventListener("change", t), N();
+		};
+	}, [N]), r(() => {
+		_ || N();
+	}, [_, N]), a(() => {
+		let e = E.current;
+		if (!e) return;
+		let t = () => {
+			window.matchMedia("(min-width: 768px)").matches && _ && T(u(e.getBoundingClientRect().width, y, b));
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [
+		y,
+		b,
+		_
+	]);
+	let P = (e) => {
+		let t = u(e, y, b);
+		t !== (E.current?.getBoundingClientRect().width ?? w) && (C.current = t, S({
+			source: g,
+			value: t
+		}), T(t), m?.(t));
+	}, F = () => _ && window.matchMedia("(min-width: 768px)").matches, I = /* @__PURE__ */ c("div", {
+		className: "dishui-resize-handle dishui-page-resize-handle",
+		"data-orientation": "horizontal",
+		"data-variant": h,
+		"data-dragging": M.dragging || void 0,
+		role: "separator",
+		tabIndex: _ ? 0 : -1,
+		"aria-label": v === "right" ? "Resize right panel" : "Resize left panel",
+		"aria-orientation": "vertical",
+		"aria-controls": k,
+		"aria-valuemin": y,
+		"aria-valuemax": b,
+		"aria-valuenow": typeof A == "number" ? A : w,
+		onPointerDown: (e) => {
+			F() && (e.preventDefault(), M.onPointerDown(e));
+		},
+		onClickCapture: M.onClickCapture,
+		onKeyDown: (e) => {
+			F() && M.onKeyDown(e);
+		},
+		children: /* @__PURE__ */ c(t, { variant: h })
+	});
+	return n.cloneElement(d, {
+		width: typeof A == "string" ? `clamp(${y}px, ${A}, ${b}px)` : A,
+		resizeHandle: I
+	}, n.cloneElement(O, {
+		ref: E,
+		id: k,
+		style: {
+			...O.props.style,
+			width: void 0,
+			"--dishui-aside-w": typeof A == "number" ? `${A}px` : A
+		}
+	}));
+}
+//#endregion
+export { u as clampWidth, d as default, l as resizeLimits };
+
+//# sourceMappingURL=resize2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resize2.js","names":[],"sources":["../../../src/components/Page/resize.tsx"],"sourcesContent":["import React, { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\nimport PagePanel from '../PagePanel';\nimport { useResize } from '../Resizable/useResize';\nimport { ResizeGrip } from '../Resizable/ResizeGrip';\nimport './resize.css';\n\nexport type PageResizeProps = {\n    /** 启用侧栏宽度调整，默认 false。 */\n    resizable?: boolean;\n    /** 调宽手柄外观，默认 pill；line 仅显示分隔线。 */\n    resizeVariant?: 'pill' | 'line';\n    /** 可调整的最小像素宽度，默认 160。 */\n    minWidth?: number;\n    /** 可调整的最大像素宽度，默认 600。 */\n    maxWidth?: number;\n    /** 用户调整宽度时触发，参数为像素宽度。 */\n    onWidthChange?: (width: number) => void;\n};\n\nexport function resizeLimits(min = 160, max = 600) {\n    const lower = Number.isFinite(min) ? Math.max(0, min) : 160;\n    return [lower, Number.isFinite(max) ? Math.max(lower, max) : Math.max(lower, 600)] as const;\n}\n\nexport const clampWidth = (width: number, min: number, max: number) => Math.min(max, Math.max(min, width));\n\ntype Props = Omit<PageResizeProps, 'resizable'> & {\n    panel: React.ReactElement<React.ComponentProps<typeof PagePanel>>;\n};\n\n/** Keep the legacy aside markup/scroll owner; the separator belongs to the shell. */\nexport default function ResizableAside({ panel, minWidth, maxWidth, onWidthChange, resizeVariant = 'pill' }: Props) {\n    const { width = 260, open = true, edge } = panel.props;\n    const [min, max] = resizeLimits(minWidth, maxWidth);\n    const [local, setLocal] = useState<{ source: number | string; value?: number }>({ source: width });\n    // Reset on prop changes, not on every parent render or callback notification.\n    if (local.source !== width) setLocal({ source: width });\n    const lastRequestedWidth = useRef<number | undefined>(undefined);\n    const [measured, setMeasured] = useState(typeof width === 'number' ? clampWidth(width, min, max) : min);\n    const asideRef = useRef<HTMLElement>(null);\n\n    const generatedId = useId();\n    const aside = panel.props.children as React.ReactElement<React.HTMLAttributes<HTMLElement>>;\n    const id = aside.props.id ?? generatedId;\n    const effective = local.source === width && local.value !== undefined ? clampWidth(local.value, min, max)\n        : typeof width === 'number' ? clampWidth(width, min, max) : width;\n    const direction = edge === 'right' ? -1 : 1;\n\n    const resize = useResize({\n        value: typeof effective === 'number' ? effective : measured,\n        getValue: () => asideRef.current?.getBoundingClientRect().width ?? measured,\n        min, max, disabled: !open,\n        getScale: () => direction,\n        keyboardDirection: direction,\n        step: 8, shiftMultiplier: 4, threshold: 0,\n        onChange: value => change(value),\n    });\n    const stop = resize.cancel;\n\n    // Parent feedback acknowledges the drag; unrelated external changes cancel it.\n    useLayoutEffect(() => {\n        if (width !== lastRequestedWidth.current) stop();\n    }, [width, stop]);\n    useEffect(() => {\n        const media = window.matchMedia('(min-width: 768px)');\n        const cancel = () => stop();\n        media.addEventListener('change', cancel);\n        return () => { media.removeEventListener('change', cancel); stop(); };\n    }, [stop]);\n    useEffect(() => { if (!open) stop(); }, [open, stop]);\n    useLayoutEffect(() => {\n        const element = asideRef.current;\n        if (!element) return;\n        const measure = () => {\n            if (window.matchMedia('(min-width: 768px)').matches && open) {\n                setMeasured(clampWidth(element.getBoundingClientRect().width, min, max));\n            }\n        };\n        measure();\n        const observer = new ResizeObserver(measure);\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [min, max, open]);\n\n    const change = (value: number) => {\n        const next = clampWidth(value, min, max);\n        const current = asideRef.current?.getBoundingClientRect().width ?? measured;\n        if (next === current) return;\n        lastRequestedWidth.current = next;\n        setLocal({ source: width, value: next });\n        setMeasured(next);\n        onWidthChange?.(next);\n    };\n    const enabled = () => open && window.matchMedia('(min-width: 768px)').matches;\n    const handle = <div\n        className=\"dishui-resize-handle dishui-page-resize-handle\"\n        data-orientation=\"horizontal\"\n        data-variant={resizeVariant}\n        data-dragging={resize.dragging || undefined}\n        role=\"separator\"\n        tabIndex={open ? 0 : -1}\n        aria-label={edge === 'right' ? 'Resize right panel' : 'Resize left panel'}\n        aria-orientation=\"vertical\"\n        aria-controls={id}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={typeof effective === 'number' ? effective : measured}\n        onPointerDown={event => {\n            if (!enabled()) return;\n            event.preventDefault();\n            resize.onPointerDown(event);\n        }}\n        onClickCapture={resize.onClickCapture}\n        onKeyDown={event => {\n            if (!enabled()) return;\n            resize.onKeyDown(event);\n        }}\n    ><ResizeGrip variant={resizeVariant} /></div>;\n    return React.cloneElement(panel, {\n            width: typeof effective === 'string' ? `clamp(${min}px, ${effective}, ${max}px)` : effective,\n            resizeHandle: handle,\n        },\n        React.cloneElement(aside as React.ReactElement<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>, {\n            ref: asideRef,\n            id,\n            style: { ...aside.props.style, width: undefined, '--dishui-aside-w': typeof effective === 'number' ? `${effective}px` : effective } as React.CSSProperties,\n        }));\n}\n"],"mappings":"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"}

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

@@ -1,7 +1,14 @@
 import React from 'react';
-export type PageHeaderProps = {
+import { type PagePanelProps, type PageAutoHideProps } from '../PagePanel';
+export type PageHeaderProps = PagePanelProps & PageAutoHideProps & {
     /** 页面标题 */
-    title: React.ReactNode;
+    title?: React.ReactNode;
+    /** 覆盖默认图标、标题和描述；null 清空，undefined 使用旧 API。 */
+    left?: React.ReactNode;
+    /** 相对整个 header 水平居中的内容。 */
+    center?: React.ReactNode;
+    /** 覆盖 actions；null 清空，undefined 使用 actions。 */
+    right?: React.ReactNode;
     /** 标题下方的描述文字 */
     description?: React.ReactNode;
     /** 标题左侧的图标（通常为 lucide 图标） */
@@ -16,5 +23,5 @@ export type PageHeaderProps = {
  * 页面头部：统一管理后台等页面的标题 / 描述 / 操作区排版。
  * 相比页面内手写的 `text-3xl` 标题，默认字号更精致（text-lg）。
  */
-declare const PageHeader: ({ title, description, icon, actions, compact, className, }: PageHeaderProps) => React.JSX.Element;
+declare const PageHeader: ({ open, mode, animated, duration, autoHide, title, description, icon, actions, left, center, right, compact, className, }: PageHeaderProps) => React.JSX.Element;
 export default PageHeader;

package/dist/components/PageHeader/index.js

@@ -1,32 +1,53 @@
-import "react";
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import e from "../PagePanel/index.js";
+/* empty css      */
+import t from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/PageHeader/index.tsx
-var n = ({ title: n, description: r, icon: i, actions: a, compact: o = !0, className: s = "" }) => {
-	let c = o ? "text-lg" : "text-xl", l = o ? "[&>svg]:h-5 [&>svg]:w-5" : "[&>svg]:h-6 [&>svg]:w-6";
-	return /* @__PURE__ */ t("div", {
-		className: `dishui-page-header flex flex-wrap items-start justify-between gap-3 text-body ${o ? "mb-4" : "mb-6"} ${s}`.trim(),
-		children: [/* @__PURE__ */ t("div", {
-			className: "min-w-0",
-			children: [/* @__PURE__ */ t("div", {
-				className: "flex items-center gap-2.5",
-				children: [i && /* @__PURE__ */ e("span", {
-					className: `shrink-0 text-base-content/70 ${l}`,
-					children: i
-				}), /* @__PURE__ */ e("h1", {
-					className: `truncate font-semibold text-base-content ${c}`,
-					children: n
-				})]
-			}), r && /* @__PURE__ */ e("p", {
-				className: "mt-1 text-body-sm leading-5 text-base-content/70",
-				children: r
-			})]
-		}), a && /* @__PURE__ */ e("div", {
-			className: "flex flex-wrap items-center gap-2",
-			children: a
+var a = (e) => t.Children.toArray(e).some((e) => t.isValidElement(e) && e.type === t.Fragment ? a(e.props.children) : typeof e != "string" || e.trim().length > 0), o = ({ open: t, mode: o, animated: s, duration: c, autoHide: l, title: u, description: d, icon: f, actions: p, left: m, center: h, right: g, compact: _ = !0, className: v = "" }) => {
+	let y = _ ? "text-lg" : "text-xl", b = _ ? "[&>svg]:h-5 [&>svg]:w-5" : "[&>svg]:h-6 [&>svg]:w-6", x = _ ? "mb-4" : "mb-6", S = /* @__PURE__ */ i(n, { children: [(a(f) || a(u)) && /* @__PURE__ */ i("div", {
+		className: "flex min-w-0 items-center gap-2.5",
+		children: [a(f) && /* @__PURE__ */ r("span", {
+			className: `shrink-0 text-base-content/70 ${b}`,
+			children: f
+		}), a(u) && /* @__PURE__ */ r("h1", {
+			className: `min-w-0 truncate font-semibold text-base-content ${y}`,
+			children: u
 		})]
+	}), a(d) && /* @__PURE__ */ r("p", {
+		className: "mt-1 text-body-sm leading-5 text-base-content/70",
+		children: d
+	})] }), C = m === void 0 ? S : m, w = g === void 0 ? p : g;
+	return /* @__PURE__ */ r(e, {
+		edge: "header",
+		autoHide: l,
+		open: t,
+		mode: o,
+		animated: s,
+		duration: c,
+		children: /* @__PURE__ */ r("header", {
+			className: `dishui-page-header text-body ${x} ${v}`.trim(),
+			children: /* @__PURE__ */ i("div", {
+				className: "dishui-page-header-layout",
+				"data-centered": a(h) || void 0,
+				children: [
+					a(C) && /* @__PURE__ */ r("div", {
+						className: "dishui-page-header-left",
+						children: C
+					}),
+					a(h) && /* @__PURE__ */ r("div", {
+						className: "dishui-page-header-center",
+						children: h
+					}),
+					a(w) && /* @__PURE__ */ r("div", {
+						className: "dishui-page-header-right",
+						children: w
+					})
+				]
+			})
+		})
 	});
 };
 //#endregion
-export { n as default };
+export { o as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PageHeader/index.tsx"],"sourcesContent":["import React from 'react';\n\nexport type PageHeaderProps = {\n    /** 页面标题 */\n    title: React.ReactNode;\n    /** 标题下方的描述文字 */\n    description?: React.ReactNode;\n    /** 标题左侧的图标（通常为 lucide 图标） */\n    icon?: React.ReactNode;\n    /** 右侧操作区（按钮组等） */\n    actions?: React.ReactNode;\n    /** 紧凑模式：标题与间距更小 */\n    compact?: boolean;\n    className?: string;\n};\n\n/**\n * 页面头部：统一管理后台等页面的标题 / 描述 / 操作区排版。\n * 相比页面内手写的 `text-3xl` 标题，默认字号更精致（text-lg）。\n */\nconst PageHeader = ({\n    title,\n    description,\n    icon,\n    actions,\n    compact = true,\n    className = '',\n}: PageHeaderProps) => {\n    const titleSize = compact ? 'text-lg' : 'text-xl';\n    const iconSize = compact ? '[&>svg]:h-5 [&>svg]:w-5' : '[&>svg]:h-6 [&>svg]:w-6';\n    const spacing = compact ? 'mb-4' : 'mb-6';\n\n    return (\n        <div className={`dishui-page-header flex flex-wrap items-start justify-between gap-3 text-body ${spacing} ${className}`.trim()}>\n            <div className=\"min-w-0\">\n                <div className=\"flex items-center gap-2.5\">\n                    {icon && (\n                        <span className={`shrink-0 text-base-content/70 ${iconSize}`}>{icon}</span>\n                    )}\n                    <h1 className={`truncate font-semibold text-base-content ${titleSize}`}>{title}</h1>\n                </div>\n                {description && (\n                    <p className=\"mt-1 text-body-sm leading-5 text-base-content/70\">{description}</p>\n                )}\n            </div>\n            {actions && <div className=\"flex flex-wrap items-center gap-2\">{actions}</div>}\n        </div>\n    );\n};\n\nexport default PageHeader;\n"],"mappings":";;;AAoBA,IAAM,KAAc,EAChB,UACA,gBACA,SACA,YACA,aAAU,IACV,eAAY,SACO;CACnB,IAAM,IAAY,IAAU,YAAY,WAClC,IAAW,IAAU,4BAA4B;CAGvD,OACI,kBAAC,OAAD;EAAK,WAAW,iFAHJ,IAAU,SAAS,OAG0E,GAAG,IAAY,KAAK;EAA7H,UAAA,CACI,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACI,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACK,KACG,kBAAC,QAAD;KAAM,WAAW,iCAAiC;KAAa,UAAA;IAAW,CAAA,GAE9E,kBAAC,MAAD;KAAI,WAAW,4CAA4C;KAAc,UAAA;IAAU,CAAA,CAClF;GACJ,CAAA,GAAA,KACG,kBAAC,KAAD;IAAG,WAAU;IAAoD,UAAA;GAAe,CAAA,CAEnF;EACJ,CAAA,GAAA,KAAW,kBAAC,OAAD;GAAK,WAAU;GAAqC,UAAA;EAAa,CAAA,CAC5E;;AAEb"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PageHeader/index.tsx"],"sourcesContent":["import React from 'react';\nimport PagePanel, { type PagePanelProps, type PageAutoHideProps } from '../PagePanel';\nimport './style.css';\n\nexport type PageHeaderProps = PagePanelProps & PageAutoHideProps & {\n    /** 页面标题 */\n    title?: React.ReactNode;\n    /** 覆盖默认图标、标题和描述；null 清空，undefined 使用旧 API。 */\n    left?: React.ReactNode;\n    /** 相对整个 header 水平居中的内容。 */\n    center?: React.ReactNode;\n    /** 覆盖 actions；null 清空，undefined 使用 actions。 */\n    right?: React.ReactNode;\n    /** 标题下方的描述文字 */\n    description?: React.ReactNode;\n    /** 标题左侧的图标（通常为 lucide 图标） */\n    icon?: React.ReactNode;\n    /** 右侧操作区（按钮组等） */\n    actions?: React.ReactNode;\n    /** 紧凑模式：标题与间距更小 */\n    compact?: boolean;\n    className?: string;\n};\n\nconst hasContent = (node: React.ReactNode): boolean =>\n    React.Children.toArray(node).some(child =>\n        React.isValidElement<{ children?: React.ReactNode }>(child) && child.type === React.Fragment\n            ? hasContent(child.props.children)\n            : typeof child !== 'string' || child.trim().length > 0,\n    );\n\n/**\n * 页面头部：统一管理后台等页面的标题 / 描述 / 操作区排版。\n * 相比页面内手写的 `text-3xl` 标题，默认字号更精致（text-lg）。\n */\nconst PageHeader = ({\n    open, mode, animated, duration, autoHide,\n    title,\n    description,\n    icon,\n    actions,\n    left,\n    center,\n    right,\n    compact = true,\n    className = '',\n}: PageHeaderProps) => {\n    const titleSize = compact ? 'text-lg' : 'text-xl';\n    const iconSize = compact ? '[&>svg]:h-5 [&>svg]:w-5' : '[&>svg]:h-6 [&>svg]:w-6';\n    const spacing = compact ? 'mb-4' : 'mb-6';\n\n\n    const defaultLeft = (\n        <>\n            {(hasContent(icon) || hasContent(title)) && (\n                <div className=\"flex min-w-0 items-center gap-2.5\">\n                    {hasContent(icon) && (\n                        <span className={`shrink-0 text-base-content/70 ${iconSize}`}>{icon}</span>\n                    )}\n                    {hasContent(title) && (\n                        <h1 className={`min-w-0 truncate font-semibold text-base-content ${titleSize}`}>{title}</h1>\n                    )}\n                </div>\n            )}\n            {hasContent(description) && (\n                <p className=\"mt-1 text-body-sm leading-5 text-base-content/70\">{description}</p>\n            )}\n        </>\n    );\n    const leftContent = left !== undefined ? left : defaultLeft;\n    const rightContent = right !== undefined ? right : actions;\n\n    return (\n        <PagePanel edge=\"header\" autoHide={autoHide} open={open} mode={mode} animated={animated} duration={duration}>\n            <header className={`dishui-page-header text-body ${spacing} ${className}`.trim()}>\n                <div className=\"dishui-page-header-layout\" data-centered={hasContent(center) || undefined}>\n                    {hasContent(leftContent) && <div className=\"dishui-page-header-left\">{leftContent}</div>}\n                    {hasContent(center) && <div className=\"dishui-page-header-center\">{center}</div>}\n                    {hasContent(rightContent) && <div className=\"dishui-page-header-right\">{rightContent}</div>}\n                </div>\n            </header>\n        </PagePanel>\n    );\n};\n\nexport default PageHeader;\n"],"mappings":";;;;;AAwBA,IAAM,KAAc,MAChB,EAAM,SAAS,QAAQ,CAAI,CAAC,CAAC,MAAK,MAC9B,EAAM,eAA+C,CAAK,KAAK,EAAM,SAAS,EAAM,WAC9E,EAAW,EAAM,MAAM,QAAQ,IAC/B,OAAO,KAAU,YAAY,EAAM,KAAK,CAAC,CAAC,SAAS,CAC7D,GAME,KAAc,EAChB,SAAM,SAAM,aAAU,aAAU,aAChC,UACA,gBACA,SACA,YACA,SACA,WACA,UACA,aAAU,IACV,eAAY,SACO;CACnB,IAAM,IAAY,IAAU,YAAY,WAClC,IAAW,IAAU,4BAA4B,2BACjD,IAAU,IAAU,SAAS,QAG7B,IACF,kBAAA,GAAA,EAAA,UAAA,EACM,EAAW,CAAI,KAAK,EAAW,CAAK,MAClC,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACK,EAAW,CAAI,KACZ,kBAAC,QAAD;GAAM,WAAW,iCAAiC;GAAa,UAAA;EAAW,CAAA,GAE7E,EAAW,CAAK,KACb,kBAAC,MAAD;GAAI,WAAW,oDAAoD;GAAc,UAAA;EAAU,CAAA,CAE9F;CAER,CAAA,GAAA,EAAW,CAAW,KACnB,kBAAC,KAAD;EAAG,WAAU;EAAoD,UAAA;CAAe,CAAA,CAEtF,EAAA,CAAA,GAEA,IAAc,MAAS,KAAA,IAAmB,IAAP,GACnC,IAAe,MAAU,KAAA,IAAoB,IAAR;CAE3C,OACI,kBAAC,GAAD;EAAW,MAAK;EAAmB;EAAgB;EAAY;EAAgB;EAAoB;EAC/F,UAAA,kBAAC,UAAD;GAAQ,WAAW,gCAAgC,EAAQ,GAAG,IAAY,KAAK;GAC3E,UAAA,kBAAC,OAAD;IAAK,WAAU;IAA4B,iBAAe,EAAW,CAAM,KAAK,KAAA;IAAhF,UAAA;KACK,EAAW,CAAW,KAAK,kBAAC,OAAD;MAAK,WAAU;MAA2B,UAAA;KAAiB,CAAA;KACtF,EAAW,CAAM,KAAK,kBAAC,OAAD;MAAK,WAAU;MAA6B,UAAA;KAAY,CAAA;KAC9E,EAAW,CAAY,KAAK,kBAAC,OAAD;MAAK,WAAU;MAA4B,UAAA;KAAkB,CAAA;IACzF;;EACD,CAAA;CACD,CAAA;AAEnB"}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+export type PagePanelProps = {
+    /** 是否展开，默认 true。折叠时保留内容挂载，但禁用交互。 */
+    open?: boolean;
+    /** push 占用布局空间；overlay 覆盖 Page / Body，默认 push。 */
+    mode?: 'push' | 'overlay';
+    /** 是否启用动画，默认 true；遵循 prefers-reduced-motion。 */
+    animated?: boolean;
+    /** 动画时长（毫秒），默认 200。 */
+    duration?: number;
+};
+export type PageAutoHideProps = {
+    /** 正文下滚隐藏、上滚或到顶显示。默认 false；阈值默认 24px。显式 open 优先。 */
+    autoHide?: boolean | {
+        threshold?: number;
+        /** 达到下滚阈值后等待的毫秒数，默认 0；与动画 duration 独立。 */
+        delay?: number;
+    };
+};
+type PanelProps = PagePanelProps & PageAutoHideProps & {
+    edge: 'header' | 'footer' | 'left' | 'right';
+    width?: number | string;
+    hideOnMobile?: boolean;
+    children: React.ReactNode;
+    /** Internal resize control, outside the clipping/scrolling content. */
+    resizeHandle?: React.ReactNode;
+};
+declare const PagePanel: (props: PanelProps) => React.JSX.Element;
+export default PagePanel;

package/dist/components/PagePanel/index.js

@@ -0,0 +1,99 @@
+/* empty css      */
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/PagePanel/index.tsx
+var a = ({ open: e = !0, mode: t = "push", animated: n = !0, duration: a = 200, edge: o, width: s, hideOnMobile: c = !1, children: l, resizeHandle: u }, d) => /* @__PURE__ */ i("div", {
+	ref: d,
+	className: "dishui-page-panel",
+	"data-edge": o,
+	"data-resizable": u ? !0 : void 0,
+	"data-mode": t,
+	"data-open": e,
+	"data-hide-mobile": c || void 0,
+	inert: !e,
+	"aria-hidden": !e || void 0,
+	style: {
+		"--dishui-panel-duration": `${n && Number.isFinite(a) ? Math.max(0, a) : 0}ms`,
+		"--dishui-panel-width": typeof s == "number" ? `${s}px` : s
+	},
+	children: [/* @__PURE__ */ r("div", {
+		className: "dishui-page-panel-clip",
+		children: l
+	}), u]
+}), o = (r) => {
+	let i = t(null), [o, s] = n(!0), c = !!r.autoHide && r.open === void 0, l = typeof r.autoHide == "object" ? r.autoHide.threshold : void 0, u = typeof l == "number" && Number.isFinite(l) && l > 0 ? l : 24, d = typeof r.autoHide == "object" ? r.autoHide.delay : void 0, f = typeof d == "number" && Number.isFinite(d) && d >= 0 ? Math.min(d, 2147483647) : 0;
+	return e(() => {
+		if (!c) {
+			s(!0);
+			return;
+		}
+		let e = i.current, t = e?.closest(".dishui-page");
+		if (!e || !t) return;
+		let n = e.ownerDocument, r = n.defaultView;
+		if (!r) return;
+		let a = Array.from(t.querySelectorAll(".dishui-page-main")).find((e) => e.closest(".dishui-page") === t);
+		if (!a) return;
+		let o = () => /auto|scroll|overlay/.test(r.getComputedStyle(a).overflowY), l = () => {
+			let e = o(), t = e ? a : n.scrollingElement;
+			return {
+				local: e,
+				top: Math.max(0, t.scrollTop),
+				max: Math.max(0, t.scrollHeight - t.clientHeight),
+				origin: e ? 0 : a.getBoundingClientRect().top + r.scrollY
+			};
+		}, d = l(), p = 0, m = 0, h, g = () => {
+			h !== void 0 && r.clearTimeout(h), h = void 0;
+		}, _ = () => {
+			let e = t.getBoundingClientRect();
+			return e.bottom > 0 && e.top < r.innerHeight && e.right > 0 && e.left < r.innerWidth;
+		}, v = () => {
+			if (h !== void 0) return;
+			let t = () => {
+				h = void 0, !e.contains(n.activeElement) && _() && l().top > 0 && s(!1);
+			};
+			f === 0 ? t() : h = r.setTimeout(t, f);
+		}, y = () => {
+			m = 0;
+			let i = l(), a = t.getBoundingClientRect(), o = Math.abs(i.max - d.max) + Math.abs(i.origin - d.origin), c = i.local !== d.local, f = i.top - d.top;
+			d = i;
+			let h = o > .5 && Math.abs(f) <= o + 1;
+			if (c || h || a.bottom <= 0 || a.top >= r.innerHeight || a.right <= 0 || a.left >= r.innerWidth) {
+				p = 0, (c || !_()) && g();
+				return;
+			}
+			if (f) {
+				if (f < 0 && g(), i.top <= 0) {
+					g(), p = 0, s(!0);
+					return;
+				}
+				if (e.contains(n.activeElement)) {
+					g(), p = 0;
+					return;
+				}
+				p = Math.sign(f) === Math.sign(p) ? p + f : f, Math.abs(p) >= u && (p < 0 ? s(!0) : v(), p = 0);
+			}
+		}, b = () => {
+			m ||= r.requestAnimationFrame(y);
+		}, x = (e) => {
+			(o() ? e.target === a : e.target === n || e.target === r) && b();
+		}, S = () => {
+			g(), p = 0, s(!0);
+		};
+		a.addEventListener("scroll", x, { passive: !0 }), r.addEventListener("scroll", x, { passive: !0 }), e.addEventListener("focusin", S);
+		let C = new ResizeObserver(b);
+		return C.observe(a), C.observe(t), C.observe(n.documentElement), () => {
+			a.removeEventListener("scroll", x), r.removeEventListener("scroll", x), e.removeEventListener("focusin", S), C.disconnect(), g(), r.cancelAnimationFrame(m);
+		};
+	}, [
+		c,
+		u,
+		f
+	]), a({
+		...r,
+		open: r.open ?? (!c || o)
+	}, i);
+}, s = (e) => e.edge === "header" || e.edge === "footer" ? /* @__PURE__ */ r(o, { ...e }) : a(e);
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PagePanel/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport './style.css';\n\nexport type PagePanelProps = {\n    /** 是否展开，默认 true。折叠时保留内容挂载，但禁用交互。 */\n    open?: boolean;\n    /** push 占用布局空间；overlay 覆盖 Page / Body，默认 push。 */\n    mode?: 'push' | 'overlay';\n    /** 是否启用动画，默认 true；遵循 prefers-reduced-motion。 */\n    animated?: boolean;\n    /** 动画时长（毫秒），默认 200。 */\n    duration?: number;\n};\n\nexport type PageAutoHideProps = {\n    /** 正文下滚隐藏、上滚或到顶显示。默认 false；阈值默认 24px。显式 open 优先。 */\n    autoHide?: boolean | {\n            threshold?: number;\n            /** 达到下滚阈值后等待的毫秒数，默认 0；与动画 duration 独立。 */\n            delay?: number;\n        };\n};\n\ntype PanelProps = PagePanelProps & PageAutoHideProps & {\n    edge: 'header' | 'footer' | 'left' | 'right';\n    width?: number | string;\n    hideOnMobile?: boolean;\n    children: React.ReactNode;\n    /** Internal resize control, outside the clipping/scrolling content. */\n    resizeHandle?: React.ReactNode;\n};\n\n/** Layout-only shell: consumer classes and HTML attributes stay on the semantic content. */\nconst renderPanel = ({\n    open = true,\n    mode = 'push',\n    animated = true,\n    duration = 200,\n    edge,\n    width,\n    hideOnMobile = false,\n    children,\n    resizeHandle,\n}: PanelProps, ref?: React.Ref<HTMLDivElement>) => (\n    <div\n        ref={ref}\n        className=\"dishui-page-panel\"\n        data-edge={edge}\n        data-resizable={resizeHandle ? true : undefined}\n        data-mode={mode}\n        data-open={open}\n        data-hide-mobile={hideOnMobile || undefined}\n        inert={!open}\n        aria-hidden={!open || undefined}\n        style={{\n            '--dishui-panel-duration': `${animated && Number.isFinite(duration) ? Math.max(0, duration) : 0}ms`,\n            '--dishui-panel-width': typeof width === 'number' ? `${width}px` : width,\n        } as React.CSSProperties}\n    >\n        <div className=\"dishui-page-panel-clip\">{children}</div>\n        {resizeHandle}\n    </div>\n);\n\nconst AutoHidePanel = (props: PanelProps) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const [open, setOpen] = useState(true);\n    const enabled = Boolean(props.autoHide) && props.open === undefined;\n    const value = typeof props.autoHide === 'object' ? props.autoHide.threshold : undefined;\n    const threshold = typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : 24;\n\n    const requestedDelay = typeof props.autoHide === 'object' ? props.autoHide.delay : undefined;\n    const delay = typeof requestedDelay === 'number' && Number.isFinite(requestedDelay) && requestedDelay >= 0\n        ? Math.min(requestedDelay, 2147483647) : 0;\n\n    useEffect(() => {\n        if (!enabled) {\n            setOpen(true);\n            return;\n        }\n        const panel = ref.current;\n        const page = panel?.closest<HTMLElement>('.dishui-page');\n        if (!panel || !page) return;\n        const doc = panel.ownerDocument;\n        const win = doc.defaultView;\n        if (!win) return;\n        const main = Array.from(page.querySelectorAll<HTMLElement>('.dishui-page-main'))\n            .find(node => node.closest('.dishui-page') === page);\n        if (!main) return;\n        const internal = () => /auto|scroll|overlay/.test(win.getComputedStyle(main).overflowY);\n        const measure = () => {\n            const local = internal();\n            const scroller = local ? main : doc.scrollingElement!;\n            return {\n                local,\n                top: Math.max(0, scroller.scrollTop),\n                max: Math.max(0, scroller.scrollHeight - scroller.clientHeight),\n                origin: local ? 0 : main.getBoundingClientRect().top + win.scrollY,\n            };\n        };\n        let previous = measure();\n        let travel = 0;\n        let frame = 0;\n        let hideTimer: number | undefined;\n        const cancelHide = () => {\n            if (hideTimer !== undefined) win.clearTimeout(hideTimer);\n            hideTimer = undefined;\n        };\n        const visible = () => {\n            const rect = page.getBoundingClientRect();\n            return rect.bottom > 0 && rect.top < win.innerHeight && rect.right > 0 && rect.left < win.innerWidth;\n        };\n        const hide = () => {\n            if (hideTimer !== undefined) return;\n            const commit = () => {\n                hideTimer = undefined;\n                if (!panel.contains(doc.activeElement) && visible() && measure().top > 0) setOpen(false);\n            };\n            if (delay === 0) commit();\n            else hideTimer = win.setTimeout(commit, delay);\n        };\n        const sample = () => {\n            frame = 0;\n            const next = measure();\n            const rect = page.getBoundingClientRect();\n            // Grid collapse, scroll anchoring and bottom clamping are layout, not intent.\n            const layoutMovement = Math.abs(next.max - previous.max) + Math.abs(next.origin - previous.origin);\n            const sourceChanged = next.local !== previous.local;\n            const delta = next.top - previous.top;\n            previous = next;\n            // A larger movement cannot be explained by anchoring/clamping alone;\n            // keep responding to deliberate scrolling during an animation.\n            const layoutOnly = layoutMovement > 0.5 && Math.abs(delta) <= layoutMovement + 1;\n            if (sourceChanged || layoutOnly || rect.bottom <= 0 || rect.top >= win.innerHeight\n                || rect.right <= 0 || rect.left >= win.innerWidth) {\n                travel = 0;\n                if (sourceChanged || !visible()) cancelHide();\n                return;\n            }\n            if (!delta) return;\n            if (delta < 0) cancelHide();\n            if (next.top <= 0) {\n                cancelHide();\n                travel = 0;\n                setOpen(true);\n                return;\n            }\n            if (panel.contains(doc.activeElement)) {\n                cancelHide();\n                travel = 0;\n                return;\n            }\n            travel = Math.sign(delta) === Math.sign(travel) ? travel + delta : delta;\n            if (Math.abs(travel) >= threshold) {\n                if (travel < 0) setOpen(true);\n                else hide();\n                travel = 0;\n            }\n        };\n        const schedule = () => { if (!frame) frame = win.requestAnimationFrame(sample); };\n        const onScroll = (event: Event) => {\n            if (internal() ? event.target === main : event.target === doc || event.target === win) schedule();\n        };\n        const onFocus = () => { cancelHide(); travel = 0; setOpen(true); };\n        main.addEventListener('scroll', onScroll, { passive: true });\n        win.addEventListener('scroll', onScroll, { passive: true });\n        panel.addEventListener('focusin', onFocus);\n        const observer = new ResizeObserver(schedule);\n        observer.observe(main);\n        observer.observe(page);\n        observer.observe(doc.documentElement);\n        return () => {\n            main.removeEventListener('scroll', onScroll);\n            win.removeEventListener('scroll', onScroll);\n            panel.removeEventListener('focusin', onFocus);\n            observer.disconnect();\n            cancelHide();\n            win.cancelAnimationFrame(frame);\n        };\n    }, [enabled, threshold, delay]);\n\n    return renderPanel({ ...props, open: props.open ?? (enabled ? open : true) }, ref);\n};\n\nconst PagePanel = (props: PanelProps) => props.edge === 'header' || props.edge === 'footer'\n    ? <AutoHidePanel {...props} />\n    : renderPanel(props);\n\nexport default PagePanel;\n"],"mappings":"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"}

package/dist/components/Resizable/ResizeGrip.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/** Visual-only primitive; consumers own layout, semantics and interaction. */
+export declare function ResizeGrip({ variant }: {
+    variant?: 'pill' | 'line';
+}): React.JSX.Element | null;

package/dist/components/Resizable/ResizeGrip.js

@@ -0,0 +1,14 @@
+/* empty css             */
+import "react";
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/Resizable/ResizeGrip.tsx
+function t({ variant: t = "pill" }) {
+	return t === "pill" ? /* @__PURE__ */ e("span", {
+		className: "dishui-resizable-grip",
+		"aria-hidden": "true"
+	}) : null;
+}
+//#endregion
+export { t as ResizeGrip };
+
+//# sourceMappingURL=ResizeGrip.js.map

package/dist/components/Resizable/ResizeGrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeGrip.js","names":[],"sources":["../../../src/components/Resizable/ResizeGrip.tsx"],"sourcesContent":["import React from 'react';\nimport './ResizeHandle.css';\n\n/** Visual-only primitive; consumers own layout, semantics and interaction. */\nexport function ResizeGrip({ variant = 'pill' }: { variant?: 'pill' | 'line' }) {\n  return variant === 'pill' ? <span className=\"dishui-resizable-grip\" aria-hidden=\"true\" /> : null;\n}\n"],"mappings":";;;;AAIA,SAAgB,EAAW,EAAE,aAAU,UAAyC;CAC9E,OAAO,MAAY,SAAS,kBAAC,QAAD;EAAM,WAAU;EAAwB,eAAY;CAAQ,CAAA,IAAI;AAC9F"}

package/dist/components/Resizable/index.js

@@ -1,14 +1,15 @@
 import { useResize as e } from "./useResize.js";
+import { ResizeGrip as t } from "./ResizeGrip.js";
 /* empty css          */
-import { Children as t, createContext as n, isValidElement as r, useContext as i, useId as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
-import { jsx as l } from "react/jsx-runtime";
+import { Children as n, createContext as r, isValidElement as i, useContext as a, useId as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
 //#region src/components/Resizable/index.tsx
-var u = n(null), d = n(0);
-function f({ minSize: e, maxSize: t, className: n = "", style: r, ...a }) {
-	let o = i(u), s = i(d);
+var d = r(null), f = r(0);
+function p({ minSize: e, maxSize: t, className: n = "", style: r, ...i }) {
+	let o = a(d), s = a(f);
 	if (!o) throw Error("Resizable.Panel must be inside Resizable");
-	return /* @__PURE__ */ l("div", {
-		...a,
+	return /* @__PURE__ */ u("div", {
+		...i,
 		id: o.ids[s],
 		className: `dishui-resizable-panel ${n}`,
 		style: {
@@ -17,59 +18,56 @@ function f({ minSize: e, maxSize: t, className: n = "", style: r, ...a }) {
 		}
 	});
 }
-function p({ variant: t = "line", disabled: n = !1, step: r = 1, className: a = "", onPointerDown: o, onKeyDown: s, onClickCapture: c, children: f, ...p }) {
-	let m = i(u), h = i(d);
-	if (!m) throw Error("Resizable.Handle must be inside Resizable");
-	let g = m.sizes[h] + m.sizes[h + 1], _ = Math.max(m.bounds[h].min, g - m.bounds[h + 1].max), v = Math.min(m.bounds[h].max, g - m.bounds[h + 1].min), y = n || m.disabled || _ >= v, b = e({
-		orientation: m.orientation,
-		value: m.sizes[h],
-		min: _,
-		max: v,
-		disabled: y,
-		step: r,
+function m({ variant: n = "pill", disabled: r = !1, step: i = 1, className: o = "", onPointerDown: s, onKeyDown: c, onClickCapture: l, children: p, ...m }) {
+	let h = a(d), g = a(f);
+	if (!h) throw Error("Resizable.Handle must be inside Resizable");
+	let _ = h.sizes[g] + h.sizes[g + 1], v = Math.max(h.bounds[g].min, _ - h.bounds[g + 1].max), y = Math.min(h.bounds[g].max, _ - h.bounds[g + 1].min), b = r || h.disabled || v >= y, x = e({
+		orientation: h.orientation,
+		value: h.sizes[g],
+		min: v,
+		max: y,
+		disabled: b,
+		step: i,
 		getScale: () => {
-			let e = m.root.current;
+			let e = h.root.current;
 			if (!e) return 0;
-			let t = m.orientation === "horizontal" ? "width" : "height", n = Array.from(e.children).filter((e) => e.classList.contains("dishui-resizable-panel")).reduce((e, n) => e + n.getBoundingClientRect()[t], 0), r = m.orientation === "horizontal" && getComputedStyle(e).direction === "rtl";
+			let t = h.orientation === "horizontal" ? "width" : "height", n = Array.from(e.children).filter((e) => e.classList.contains("dishui-resizable-panel")).reduce((e, n) => e + n.getBoundingClientRect()[t], 0), r = h.orientation === "horizontal" && getComputedStyle(e).direction === "rtl";
 			return n > 0 ? (r ? -100 : 100) / n : 0;
 		},
-		onChange: (e) => m.change(h, e),
-		onCommit: (e) => m.change(h, e, !0)
+		onChange: (e) => h.change(g, e),
+		onCommit: (e) => h.change(g, e, !0)
 	});
-	return /* @__PURE__ */ l("div", {
-		...p,
+	return /* @__PURE__ */ u("div", {
+		...m,
 		role: "separator",
-		tabIndex: y ? -1 : 0,
-		"aria-label": p["aria-label"] ?? "Resize panels",
-		"aria-orientation": m.orientation === "horizontal" ? "vertical" : "horizontal",
-		"aria-controls": m.ids[h],
-		"aria-valuemin": _,
-		"aria-valuemax": v,
-		"aria-valuenow": m.sizes[h],
-		"aria-valuetext": `${Number(m.sizes[h].toFixed(2))}%`,
-		"aria-disabled": y,
-		"data-orientation": m.orientation,
-		"data-variant": t,
-		"data-dragging": b.dragging || void 0,
-		className: `dishui-resizable-handle ${a}`,
+		tabIndex: b ? -1 : 0,
+		"aria-label": m["aria-label"] ?? "Resize panels",
+		"aria-orientation": h.orientation === "horizontal" ? "vertical" : "horizontal",
+		"aria-controls": h.ids[g],
+		"aria-valuemin": v,
+		"aria-valuemax": y,
+		"aria-valuenow": h.sizes[g],
+		"aria-valuetext": `${Number(h.sizes[g].toFixed(2))}%`,
+		"aria-disabled": b,
+		"data-orientation": h.orientation,
+		"data-variant": n,
+		"data-dragging": x.dragging || void 0,
+		className: `dishui-resize-handle dishui-resizable-handle ${o}`,
 		onPointerDown: (e) => {
-			o?.(e), e.defaultPrevented || b.onPointerDown(e);
+			s?.(e), e.defaultPrevented || x.onPointerDown(e);
 		},
 		onKeyDown: (e) => {
-			s?.(e), e.defaultPrevented || b.onKeyDown(e);
+			c?.(e), e.defaultPrevented || x.onKeyDown(e);
 		},
 		onClickCapture: (e) => {
-			b.onClickCapture(e), e.defaultPrevented || c?.(e);
+			x.onClickCapture(e), e.defaultPrevented || l?.(e);
 		},
-		children: f ?? (t === "pill" ? /* @__PURE__ */ l("span", {
-			className: "dishui-resizable-grip",
-			"aria-hidden": "true"
-		}) : null)
+		children: p ?? /* @__PURE__ */ u(t, { variant: n })
 	});
 }
-function m({ orientation: e = "horizontal", sizes: n, defaultSizes: i, onSizesChange: m, onSizesCommit: h, disabled: g = !1, children: _, className: v = "", style: y, ...b }) {
-	let x = s(null), S = a(), C = t.toArray(_);
-	if (!C.length || C.some((e, t) => !r(e) || e.type !== (t % 2 == 0 ? f : p)) || C.length % 2 == 0) throw Error("Resizable requires alternating Panel / Handle children, starting and ending with Panel. Nest groups inside a Panel.");
+function h({ orientation: e = "horizontal", sizes: t, defaultSizes: r, onSizesChange: a, onSizesCommit: h, disabled: g = !1, children: _, className: v = "", style: y, ...b }) {
+	let x = c(null), S = o(), C = n.toArray(_);
+	if (!C.length || C.some((e, t) => !i(e) || e.type !== (t % 2 == 0 ? p : m)) || C.length % 2 == 0) throw Error("Resizable requires alternating Panel / Handle children, starting and ending with Panel. Nest groups inside a Panel.");
 	let w = C.filter((e, t) => t % 2 == 0), T = w.map((e) => ({
 		min: e.props.minSize ?? 0,
 		max: e.props.maxSize ?? 100
@@ -83,19 +81,19 @@ function m({ orientation: e = "horizontal", sizes: n, defaultSizes: i, onSizesCh
 			t[e] += r, n -= r;
 		}
 		return t;
-	}, [D, O] = c(() => E(i)), k = E(n ?? (D.length === w.length ? D : void 0)), A = s(k);
-	o(() => {
+	}, [D, O] = l(() => E(r)), k = E(t ?? (D.length === w.length ? D : void 0)), A = c(k);
+	s(() => {
 		A.current = k;
 	});
-	let j = (e, t, r = !1) => {
-		let i = [...A.current], a = i[e] + i[e + 1];
-		if (i[e] = t, i[e + 1] = a - t, r) {
+	let j = (e, n, r = !1) => {
+		let i = [...A.current], o = i[e] + i[e + 1];
+		if (i[e] = n, i[e + 1] = o - n, r) {
 			h?.(i);
 			return;
 		}
-		n || (A.current = i, O(i)), m?.(i);
+		t || (A.current = i, O(i)), a?.(i);
 	}, M = w.map((e, t) => e.props.id ?? `${S}-panel-${t}`);
-	return /* @__PURE__ */ l(u.Provider, {
+	return /* @__PURE__ */ u(d.Provider, {
 		value: {
 			orientation: e,
 			disabled: g,
@@ -105,24 +103,24 @@ function m({ orientation: e = "horizontal", sizes: n, defaultSizes: i, onSizesCh
 			root: x,
 			change: j
 		},
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ u("div", {
 			...b,
 			ref: x,
 			className: `dishui-resizable ${v}`,
 			"data-orientation": e,
 			style: y,
-			children: C.map((e, t) => /* @__PURE__ */ l(d.Provider, {
+			children: C.map((e, t) => /* @__PURE__ */ u(f.Provider, {
 				value: Math.floor(t / 2),
 				children: e
 			}, e.key ?? t))
 		})
 	});
 }
-var h = Object.assign(m, {
-	Panel: f,
-	Handle: p
+var g = Object.assign(h, {
+	Panel: p,
+	Handle: m
 });
 //#endregion
-export { h as Resizable, h as default, p as ResizableHandle, f as ResizablePanel, e as useResize };
+export { g as Resizable, g as default, m as ResizableHandle, p as ResizablePanel, e as useResize };
 
 //# sourceMappingURL=index.js.map