dishui 0.0.81 → 0.0.83

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-2xl", l = o ? "[&>svg]:h-5 [&>svg]:w-5" : "[&>svg]:h-6 [&>svg]:w-6";
-	return /* @__PURE__ */ t("div", {
-		className: `flex flex-wrap items-start justify-between gap-3 ${o ? "mb-5" : "mb-8"} ${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-primary ${l}`,
-					children: i
-				}), /* @__PURE__ */ e("h1", {
-					className: `truncate font-bold text-base-content ${c}`,
-					children: n
-				})]
-			}), r && /* @__PURE__ */ e("p", {
-				className: "mt-0.5 text-xs text-base-content/60",
-				children: r
-			})]
-		}), a && /* @__PURE__ */ e("div", {
-			className: "flex shrink-0 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-2xl';\n    const iconSize = compact ? '[&>svg]:h-5 [&>svg]:w-5' : '[&>svg]:h-6 [&>svg]:w-6';\n    const spacing = compact ? 'mb-5' : 'mb-8';\n\n    return (\n        <div className={`flex flex-wrap items-start justify-between gap-3 ${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-primary ${iconSize}`}>{icon}</span>\n                    )}\n                    <h1 className={`truncate font-bold text-base-content ${titleSize}`}>{title}</h1>\n                </div>\n                {description && (\n                    <p className=\"mt-0.5 text-xs text-base-content/60\">{description}</p>\n                )}\n            </div>\n            {actions && <div className=\"flex shrink-0 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,YAClC,IAAW,IAAU,4BAA4B;CAGvD,OACI,kBAAC,OAAD;EAAK,WAAW,oDAHJ,IAAU,SAAS,OAG6C,GAAG,IAAY,KAAK;EAAhG,UAAA,CACI,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACI,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACK,KACG,kBAAC,QAAD;KAAM,WAAW,yBAAyB;KAAa,UAAA;IAAW,CAAA,GAEtE,kBAAC,MAAD;KAAI,WAAW,wCAAwC;KAAc,UAAA;IAAU,CAAA,CAC9E;GACJ,CAAA,GAAA,KACG,kBAAC,KAAD;IAAG,WAAU;IAAuC,UAAA;GAAe,CAAA,CAEtE;EACJ,CAAA,GAAA,KAAW,kBAAC,OAAD;GAAK,WAAU;GAAoC,UAAA;EAAa,CAAA,CAC3E;;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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Resizable/index.tsx"],"sourcesContent":["import React, { Children, createContext, isValidElement, useContext, useId, useLayoutEffect, useRef, useState } from 'react';\nimport { useResize } from './useResize';\nimport './Resizable.css';\nexport { useResize } from './useResize';\nexport type { UseResizeOptions } from './useResize';\n\nexport interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  minSize?: number;\n  maxSize?: number;\n}\nexport interface ResizableHandleProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: 'line' | 'pill';\n  disabled?: boolean;\n  step?: number;\n}\nexport interface ResizableProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical';\n  sizes?: number[];\n  defaultSizes?: number[];\n  onSizesChange?: (sizes: number[]) => void;\n  onSizesCommit?: (sizes: number[]) => void;\n  disabled?: boolean;\n}\ninterface GroupContext {\n  orientation: 'horizontal' | 'vertical';\n  disabled: boolean;\n  sizes: number[];\n  bounds: { min: number; max: number }[];\n  ids: string[];\n  root: React.RefObject<HTMLDivElement | null>;\n  change: (index: number, value: number, commit?: boolean) => void;\n}\nconst Group = createContext<GroupContext | null>(null);\nconst Position = createContext(0);\n\nexport function ResizablePanel({ minSize: _min, maxSize: _max, className = '', style, ...props }: ResizablePanelProps) {\n  const group = useContext(Group);\n  const index = useContext(Position);\n  if (!group) throw new Error('Resizable.Panel must be inside Resizable');\n  return <div {...props} id={group.ids[index]} className={`dishui-resizable-panel ${className}`} style={{ ...style, flex: `${group.sizes[index]} 1 0px` }} />;\n}\n\nexport function ResizableHandle({ variant = 'line', disabled = false, step = 1, className = '', onPointerDown, onKeyDown, onClickCapture, children, ...props }: ResizableHandleProps) {\n  const group = useContext(Group);\n  const index = useContext(Position);\n  if (!group) throw new Error('Resizable.Handle must be inside Resizable');\n  const total = group.sizes[index] + group.sizes[index + 1];\n  const min = Math.max(group.bounds[index].min, total - group.bounds[index + 1].max);\n  const max = Math.min(group.bounds[index].max, total - group.bounds[index + 1].min);\n  const locked = disabled || group.disabled || min >= max;\n  const resize = useResize({\n    orientation: group.orientation, value: group.sizes[index], min, max, disabled: locked, step,\n    getScale: () => {\n      const root = group.root.current;\n      if (!root) return 0;\n      const dimension = group.orientation === 'horizontal' ? 'width' : 'height';\n      const available = Array.from(root.children).filter(el => el.classList.contains('dishui-resizable-panel')).reduce((sum, el) => sum + el.getBoundingClientRect()[dimension], 0);\n      const rtl = group.orientation === 'horizontal' && getComputedStyle(root).direction === 'rtl';\n      return available > 0 ? (rtl ? -100 : 100) / available : 0;\n    },\n    onChange: value => group.change(index, value),\n    onCommit: value => group.change(index, value, true),\n  });\n  return <div {...props} role=\"separator\" tabIndex={locked ? -1 : 0}\n    aria-label={props['aria-label'] ?? 'Resize panels'} aria-orientation={group.orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n    aria-controls={group.ids[index]} aria-valuemin={min} aria-valuemax={max} aria-valuenow={group.sizes[index]} aria-valuetext={`${Number(group.sizes[index].toFixed(2))}%`} aria-disabled={locked}\n    data-orientation={group.orientation} data-variant={variant} data-dragging={resize.dragging || undefined}\n    className={`dishui-resizable-handle ${className}`}\n    onPointerDown={event => { onPointerDown?.(event); if (!event.defaultPrevented) resize.onPointerDown(event); }}\n    onKeyDown={event => { onKeyDown?.(event); if (!event.defaultPrevented) resize.onKeyDown(event); }}\n    onClickCapture={event => { resize.onClickCapture(event); if (!event.defaultPrevented) onClickCapture?.(event); }}>\n    {children ?? (variant === 'pill' ? <span className=\"dishui-resizable-grip\" aria-hidden=\"true\" /> : null)}\n  </div>;\n}\n\nfunction ResizableRoot({ orientation = 'horizontal', sizes: controlled, defaultSizes, onSizesChange, onSizesCommit, disabled = false, children, className = '', style, ...props }: ResizableProps) {\n  const root = useRef<HTMLDivElement>(null);\n  const id = useId();\n  const nodes = Children.toArray(children);\n  if (!nodes.length || nodes.some((node, i) => !isValidElement(node) || node.type !== (i % 2 === 0 ? ResizablePanel : ResizableHandle)) || nodes.length % 2 === 0) {\n    throw new Error('Resizable requires alternating Panel / Handle children, starting and ending with Panel. Nest groups inside a Panel.');\n  }\n  const panels = nodes.filter((_, i) => i % 2 === 0) as React.ReactElement<ResizablePanelProps>[];\n  const bounds = panels.map(panel => ({ min: panel.props.minSize ?? 0, max: panel.props.maxSize ?? 100 }));\n  if (bounds.some(b => !Number.isFinite(b.min) || !Number.isFinite(b.max) || b.min < 0 || b.max > 100 || b.min > b.max) || bounds.reduce((s, b) => s + b.min, 0) > 100 || bounds.reduce((s, b) => s + b.max, 0) < 100) throw new Error('Resizable panel constraints must be feasible percentages between 0 and 100');\n  const normalize = (input?: number[]) => {\n    if (input && (input.length !== panels.length || input.some(v => !Number.isFinite(v) || v < 0) || Math.abs(input.reduce((s, v) => s + v, 0) - 100) > 0.001)) throw new Error('Resizable sizes must match the panel count and sum to 100');\n    const values = bounds.map((b, i) => Math.max(b.min, Math.min(b.max, input?.[i] ?? 100 / panels.length)));\n    let remaining = 100 - values.reduce((s, v) => s + v, 0);\n    for (let i = 0; i < values.length && Math.abs(remaining) > 1e-8; i++) {\n      const delta = Math.max(bounds[i].min - values[i], Math.min(bounds[i].max - values[i], remaining));\n      values[i] += delta;\n      remaining -= delta;\n    }\n    return values;\n  };\n  const [internal, setInternal] = useState(() => normalize(defaultSizes));\n  const sizes = normalize(controlled ?? (internal.length === panels.length ? internal : undefined));\n  const current = useRef(sizes);\n  useLayoutEffect(() => { current.current = sizes; });\n  const change = (index: number, value: number, commit = false) => {\n    const next = [...current.current];\n    const total = next[index] + next[index + 1];\n    next[index] = value;\n    next[index + 1] = total - value;\n    if (commit) { onSizesCommit?.(next); return; }\n    if (!controlled) { current.current = next; setInternal(next); }\n    onSizesChange?.(next);\n  };\n  const ids = panels.map((panel, i) => panel.props.id ?? `${id}-panel-${i}`);\n  return <Group.Provider value={{ orientation, disabled, sizes, bounds, ids, root, change }}>\n    <div {...props} ref={root} className={`dishui-resizable ${className}`} data-orientation={orientation} style={style}>\n      {nodes.map((node, i) => <Position.Provider key={(node as React.ReactElement).key ?? i} value={Math.floor(i / 2)}>{node}</Position.Provider>)}\n    </div>\n  </Group.Provider>;\n}\n\nexport const Resizable = Object.assign(ResizableRoot, { Panel: ResizablePanel, Handle: ResizableHandle });\nexport default Resizable;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Resizable/index.tsx"],"sourcesContent":["import React, { Children, createContext, isValidElement, useContext, useId, useLayoutEffect, useRef, useState } from 'react';\nimport { useResize } from './useResize';\nimport { ResizeGrip } from './ResizeGrip';\nimport './Resizable.css';\nexport { useResize } from './useResize';\nexport type { UseResizeOptions } from './useResize';\n\nexport interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  minSize?: number;\n  maxSize?: number;\n}\nexport interface ResizableHandleProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: 'line' | 'pill';\n  disabled?: boolean;\n  step?: number;\n}\nexport interface ResizableProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical';\n  sizes?: number[];\n  defaultSizes?: number[];\n  onSizesChange?: (sizes: number[]) => void;\n  onSizesCommit?: (sizes: number[]) => void;\n  disabled?: boolean;\n}\ninterface GroupContext {\n  orientation: 'horizontal' | 'vertical';\n  disabled: boolean;\n  sizes: number[];\n  bounds: { min: number; max: number }[];\n  ids: string[];\n  root: React.RefObject<HTMLDivElement | null>;\n  change: (index: number, value: number, commit?: boolean) => void;\n}\nconst Group = createContext<GroupContext | null>(null);\nconst Position = createContext(0);\n\nexport function ResizablePanel({ minSize: _min, maxSize: _max, className = '', style, ...props }: ResizablePanelProps) {\n  const group = useContext(Group);\n  const index = useContext(Position);\n  if (!group) throw new Error('Resizable.Panel must be inside Resizable');\n  return <div {...props} id={group.ids[index]} className={`dishui-resizable-panel ${className}`} style={{ ...style, flex: `${group.sizes[index]} 1 0px` }} />;\n}\n\nexport function ResizableHandle({ variant = 'pill', disabled = false, step = 1, className = '', onPointerDown, onKeyDown, onClickCapture, children, ...props }: ResizableHandleProps) {\n  const group = useContext(Group);\n  const index = useContext(Position);\n  if (!group) throw new Error('Resizable.Handle must be inside Resizable');\n  const total = group.sizes[index] + group.sizes[index + 1];\n  const min = Math.max(group.bounds[index].min, total - group.bounds[index + 1].max);\n  const max = Math.min(group.bounds[index].max, total - group.bounds[index + 1].min);\n  const locked = disabled || group.disabled || min >= max;\n  const resize = useResize({\n    orientation: group.orientation, value: group.sizes[index], min, max, disabled: locked, step,\n    getScale: () => {\n      const root = group.root.current;\n      if (!root) return 0;\n      const dimension = group.orientation === 'horizontal' ? 'width' : 'height';\n      const available = Array.from(root.children).filter(el => el.classList.contains('dishui-resizable-panel')).reduce((sum, el) => sum + el.getBoundingClientRect()[dimension], 0);\n      const rtl = group.orientation === 'horizontal' && getComputedStyle(root).direction === 'rtl';\n      return available > 0 ? (rtl ? -100 : 100) / available : 0;\n    },\n    onChange: value => group.change(index, value),\n    onCommit: value => group.change(index, value, true),\n  });\n  return <div {...props} role=\"separator\" tabIndex={locked ? -1 : 0}\n    aria-label={props['aria-label'] ?? 'Resize panels'} aria-orientation={group.orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n    aria-controls={group.ids[index]} aria-valuemin={min} aria-valuemax={max} aria-valuenow={group.sizes[index]} aria-valuetext={`${Number(group.sizes[index].toFixed(2))}%`} aria-disabled={locked}\n    data-orientation={group.orientation} data-variant={variant} data-dragging={resize.dragging || undefined}\n    className={`dishui-resize-handle dishui-resizable-handle ${className}`}\n    onPointerDown={event => { onPointerDown?.(event); if (!event.defaultPrevented) resize.onPointerDown(event); }}\n    onKeyDown={event => { onKeyDown?.(event); if (!event.defaultPrevented) resize.onKeyDown(event); }}\n    onClickCapture={event => { resize.onClickCapture(event); if (!event.defaultPrevented) onClickCapture?.(event); }}>\n    {children ?? <ResizeGrip variant={variant} />}\n  </div>;\n}\n\nfunction ResizableRoot({ orientation = 'horizontal', sizes: controlled, defaultSizes, onSizesChange, onSizesCommit, disabled = false, children, className = '', style, ...props }: ResizableProps) {\n  const root = useRef<HTMLDivElement>(null);\n  const id = useId();\n  const nodes = Children.toArray(children);\n  if (!nodes.length || nodes.some((node, i) => !isValidElement(node) || node.type !== (i % 2 === 0 ? ResizablePanel : ResizableHandle)) || nodes.length % 2 === 0) {\n    throw new Error('Resizable requires alternating Panel / Handle children, starting and ending with Panel. Nest groups inside a Panel.');\n  }\n  const panels = nodes.filter((_, i) => i % 2 === 0) as React.ReactElement<ResizablePanelProps>[];\n  const bounds = panels.map(panel => ({ min: panel.props.minSize ?? 0, max: panel.props.maxSize ?? 100 }));\n  if (bounds.some(b => !Number.isFinite(b.min) || !Number.isFinite(b.max) || b.min < 0 || b.max > 100 || b.min > b.max) || bounds.reduce((s, b) => s + b.min, 0) > 100 || bounds.reduce((s, b) => s + b.max, 0) < 100) throw new Error('Resizable panel constraints must be feasible percentages between 0 and 100');\n  const normalize = (input?: number[]) => {\n    if (input && (input.length !== panels.length || input.some(v => !Number.isFinite(v) || v < 0) || Math.abs(input.reduce((s, v) => s + v, 0) - 100) > 0.001)) throw new Error('Resizable sizes must match the panel count and sum to 100');\n    const values = bounds.map((b, i) => Math.max(b.min, Math.min(b.max, input?.[i] ?? 100 / panels.length)));\n    let remaining = 100 - values.reduce((s, v) => s + v, 0);\n    for (let i = 0; i < values.length && Math.abs(remaining) > 1e-8; i++) {\n      const delta = Math.max(bounds[i].min - values[i], Math.min(bounds[i].max - values[i], remaining));\n      values[i] += delta;\n      remaining -= delta;\n    }\n    return values;\n  };\n  const [internal, setInternal] = useState(() => normalize(defaultSizes));\n  const sizes = normalize(controlled ?? (internal.length === panels.length ? internal : undefined));\n  const current = useRef(sizes);\n  useLayoutEffect(() => { current.current = sizes; });\n  const change = (index: number, value: number, commit = false) => {\n    const next = [...current.current];\n    const total = next[index] + next[index + 1];\n    next[index] = value;\n    next[index + 1] = total - value;\n    if (commit) { onSizesCommit?.(next); return; }\n    if (!controlled) { current.current = next; setInternal(next); }\n    onSizesChange?.(next);\n  };\n  const ids = panels.map((panel, i) => panel.props.id ?? `${id}-panel-${i}`);\n  return <Group.Provider value={{ orientation, disabled, sizes, bounds, ids, root, change }}>\n    <div {...props} ref={root} className={`dishui-resizable ${className}`} data-orientation={orientation} style={style}>\n      {nodes.map((node, i) => <Position.Provider key={(node as React.ReactElement).key ?? i} value={Math.floor(i / 2)}>{node}</Position.Provider>)}\n    </div>\n  </Group.Provider>;\n}\n\nexport const Resizable = Object.assign(ResizableRoot, { Panel: ResizablePanel, Handle: ResizableHandle });\nexport default Resizable;\n"],"mappings":"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"}

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

@@ -6,6 +6,11 @@ export interface UseResizeOptions {
     max?: number;
     disabled?: boolean;
     step?: number;
+    /** Arrow-key direction; independent of pointer scaling. Defaults to 1. */
+    keyboardDirection?: 1 | -1;
+    shiftMultiplier?: number;
+    /** Read the actual size at pointer down / key down (e.g. CSS-sized edges). */
+    getValue?: () => number;
     /** Value units per CSS pixel; evaluated at pointer down. */
     getScale?: () => number;
     threshold?: number;
@@ -15,6 +20,7 @@ export interface UseResizeOptions {
 /** Shared pointer/keyboard engine. Does not mutate document/body styles. */
 export declare function useResize(options: UseResizeOptions): {
     dragging: boolean;
+    cancel: () => void | undefined;
     onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     onClickCapture: (event: React.MouseEvent<HTMLElement>) => void;