@neut/ui 0.0.15 → 0.0.17

package/dist/components/resizable/ResizableHandle/useResizableHandle.d.ts

@@ -0,0 +1,17 @@
+interface Options {
+    disabled: () => boolean;
+    onDragging?: (dragging: boolean) => void;
+}
+/**
+ * Handle 的拖拽与键盘交互:
+ * - pointer capture 保证指针移出元素后仍能继续拖拽;
+ * - pointermove 用 rAF 合并,避免每个事件都写一次 store(布局抖动);
+ * - px -> % 用 group 主轴尺寸换算,横向在 RTL 下取反。
+ */
+export declare function useResizableHandle(options: Options): {
+    onPointerDown: (event: PointerEvent) => void;
+    onPointerMove: (event: PointerEvent) => void;
+    onPointerUp: (event: PointerEvent) => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+};
+export {};

package/dist/components/resizable/ResizableHandle/useResizableHandle.js

@@ -0,0 +1,72 @@
+import { useResizablePanelGroupContext as e } from "../resizable.context.js";
+import { onCleanup as t } from "solid-js";
+//#region src/components/resizable/ResizableHandle/useResizableHandle.ts
+function n(n) {
+	let r = e("ResizableHandle"), i;
+	t(() => {
+		i?.frame != null && cancelAnimationFrame(i.frame), i = void 0;
+	});
+	let a = (e) => r.orientation() === "horizontal" ? e.clientX : e.clientY, o = () => r.orientation() === "horizontal" && r.isRtl() ? -1 : 1, s = () => {
+		i && (i.frame = null, i.pending !== null && r.setAdjacentSize(i.handle, i.pending));
+	};
+	return {
+		onPointerDown: (e) => {
+			if (n.disabled() || e.button !== 0) return;
+			let t = e.currentTarget, o = r.resolveAdjacent(t);
+			o && (e.preventDefault(), t.setPointerCapture(e.pointerId), i = {
+				pointerId: e.pointerId,
+				handle: t,
+				startCoordinate: a(e),
+				startPrevSize: o.prevSize,
+				frame: null,
+				pending: null
+			}, r.beginDrag(), n.onDragging?.(!0));
+		},
+		onPointerMove: (e) => {
+			if (!i || i.pointerId !== e.pointerId || !e.currentTarget.hasPointerCapture(e.pointerId)) return;
+			let t = r.groupSizePx() || 1, n = (a(e) - i.startCoordinate) * o();
+			i.pending = i.startPrevSize + n / t * 100, i.frame === null && (i.frame = requestAnimationFrame(s));
+		},
+		onPointerUp: (e) => {
+			if (!i || i.pointerId !== e.pointerId) return;
+			let t = e.currentTarget;
+			i.frame !== null && (cancelAnimationFrame(i.frame), i.frame = null, i.pending !== null && r.setAdjacentSize(i.handle, i.pending)), t.hasPointerCapture(e.pointerId) && t.releasePointerCapture(e.pointerId), i = void 0, r.endDrag(), n.onDragging?.(!1), r.commitLayout();
+		},
+		onKeyDown: (e) => {
+			if (n.disabled()) return;
+			let t = e.currentTarget, i = r.keyboardResizeBy() / (r.groupSizePx() || 1) * 100, a = r.orientation() === "horizontal" && r.isRtl(), o = !0;
+			switch (e.key) {
+				case "ArrowLeft":
+					r.nudgeAdjacent(t, a ? i : -i);
+					break;
+				case "ArrowRight":
+					r.nudgeAdjacent(t, a ? -i : i);
+					break;
+				case "ArrowUp":
+					r.nudgeAdjacent(t, -i);
+					break;
+				case "ArrowDown":
+					r.nudgeAdjacent(t, i);
+					break;
+				case "Home":
+					r.resolveAdjacent(t) && (r.setAdjacentSize(t, 0), r.commitLayout());
+					break;
+				case "End": {
+					let e = r.resolveAdjacent(t);
+					e && (r.setAdjacentSize(t, e.total), r.commitLayout());
+					break;
+				}
+				case "Enter":
+				case " ":
+					r.toggleHandleCollapse(t);
+					break;
+				default: o = !1;
+			}
+			o && e.preventDefault();
+		}
+	};
+}
+//#endregion
+export { n as useResizableHandle };
+
+//# sourceMappingURL=useResizableHandle.js.map

package/dist/components/resizable/ResizableHandle/useResizableHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizableHandle.js","names":["useResizableHandle","ctx","useResizablePanelGroupContext","drag","axisCoordinate","event","dragSign","flush","options","handle","adjacent","sizePx","deltaPx","step","rtl","handled"],"sources":["../../../../src/components/resizable/ResizableHandle/useResizableHandle.ts"],"sourcesContent":["import { onCleanup } from \"solid-js\";\nimport { useResizablePanelGroupContext } from \"../resizable.context\";\n\ninterface DragState {\n  pointerId: number;\n  handle: HTMLElement;\n  startCoordinate: number;\n  startPrevSize: number;\n  frame: number | null;\n  pending: number | null;\n}\n\ninterface Options {\n  disabled: () => boolean;\n  onDragging?: (dragging: boolean) => void;\n}\n\n/**\n * Handle 的拖拽与键盘交互:\n * - pointer capture 保证指针移出元素后仍能继续拖拽;\n * - pointermove 用 rAF 合并,避免每个事件都写一次 store(布局抖动);\n * - px -> % 用 group 主轴尺寸换算,横向在 RTL 下取反。\n */\nexport function useResizableHandle(options: Options) {\n  const ctx = useResizablePanelGroupContext(\"ResizableHandle\");\n  let drag: DragState | undefined;\n\n  onCleanup(() => {\n    if (drag?.frame != null) cancelAnimationFrame(drag.frame);\n    drag = undefined;\n  });\n\n  const axisCoordinate = (event: PointerEvent) =>\n    ctx.orientation() === \"horizontal\" ? event.clientX : event.clientY;\n\n  const dragSign = () => {\n    if (ctx.orientation() !== \"horizontal\") return 1;\n    return ctx.isRtl() ? -1 : 1;\n  };\n\n  const flush = () => {\n    if (!drag) return;\n    drag.frame = null;\n    if (drag.pending !== null) ctx.setAdjacentSize(drag.handle, drag.pending);\n  };\n\n  const onPointerDown = (event: PointerEvent) => {\n    if (options.disabled() || event.button !== 0) return;\n    const handle = event.currentTarget as HTMLElement;\n    const adjacent = ctx.resolveAdjacent(handle);\n    if (!adjacent) return;\n    event.preventDefault();\n    handle.setPointerCapture(event.pointerId);\n    drag = {\n      pointerId: event.pointerId,\n      handle,\n      startCoordinate: axisCoordinate(event),\n      startPrevSize: adjacent.prevSize,\n      frame: null,\n      pending: null,\n    };\n    ctx.beginDrag();\n    options.onDragging?.(true);\n  };\n\n  const onPointerMove = (event: PointerEvent) => {\n    if (!drag || drag.pointerId !== event.pointerId) return;\n    const handle = event.currentTarget as HTMLElement;\n    if (!handle.hasPointerCapture(event.pointerId)) return;\n    const sizePx = ctx.groupSizePx() || 1;\n    const deltaPx = (axisCoordinate(event) - drag.startCoordinate) * dragSign();\n    drag.pending = drag.startPrevSize + (deltaPx / sizePx) * 100;\n    if (drag.frame === null) {\n      drag.frame = requestAnimationFrame(flush);\n    }\n  };\n\n  const endDrag = (event: PointerEvent) => {\n    if (!drag || drag.pointerId !== event.pointerId) return;\n    const handle = event.currentTarget as HTMLElement;\n    if (drag.frame !== null) {\n      cancelAnimationFrame(drag.frame);\n      drag.frame = null;\n      if (drag.pending !== null) ctx.setAdjacentSize(drag.handle, drag.pending);\n    }\n    if (handle.hasPointerCapture(event.pointerId)) {\n      handle.releasePointerCapture(event.pointerId);\n    }\n    drag = undefined;\n    ctx.endDrag();\n    options.onDragging?.(false);\n    ctx.commitLayout();\n  };\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (options.disabled()) return;\n    const handle = event.currentTarget as HTMLElement;\n    const step = (ctx.keyboardResizeBy() / (ctx.groupSizePx() || 1)) * 100;\n    const rtl = ctx.orientation() === \"horizontal\" && ctx.isRtl();\n    let handled = true;\n    switch (event.key) {\n      case \"ArrowLeft\":\n        ctx.nudgeAdjacent(handle, rtl ? step : -step);\n        break;\n      case \"ArrowRight\":\n        ctx.nudgeAdjacent(handle, rtl ? -step : step);\n        break;\n      case \"ArrowUp\":\n        ctx.nudgeAdjacent(handle, -step);\n        break;\n      case \"ArrowDown\":\n        ctx.nudgeAdjacent(handle, step);\n        break;\n      case \"Home\": {\n        const adjacent = ctx.resolveAdjacent(handle);\n        if (adjacent) {\n          ctx.setAdjacentSize(handle, 0);\n          ctx.commitLayout();\n        }\n        break;\n      }\n      case \"End\": {\n        const adjacent = ctx.resolveAdjacent(handle);\n        if (adjacent) {\n          ctx.setAdjacentSize(handle, adjacent.total);\n          ctx.commitLayout();\n        }\n        break;\n      }\n      case \"Enter\":\n      case \" \":\n        ctx.toggleHandleCollapse(handle);\n        break;\n      default:\n        handled = false;\n    }\n    if (handled) event.preventDefault();\n  };\n\n  return { onPointerDown, onPointerMove, onPointerUp: endDrag, onKeyDown };\n}\n"],"mappings":"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"}

package/dist/components/resizable/ResizablePanel/ResizablePanel.d.ts

@@ -0,0 +1,6 @@
+import { ResizablePanelProps } from '../resizable.types';
+/**
+ * 一个可调整的面板。尺寸以百分比权重存在引擎里,这里只把它映射成 `flex-grow`,
+ * 所以拖拽只会改两个面板的 style,内容不会重渲染。
+ */
+export declare function ResizablePanel(props: ResizablePanelProps): import('solid-js').JSX.Element;

package/dist/components/resizable/ResizablePanel/ResizablePanel.js

@@ -0,0 +1,91 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { useResizablePanelGroupContext as t } from "../resizable.context.js";
+import { parseSize as n, roundPercent as r, toKebabCase as i } from "../resizable.utils.js";
+import { insert as a, mergeProps as o, spread as s, template as c, use as l } from "solid-js/web";
+import { createUniqueId as u, mergeProps as d, onCleanup as f, splitProps as p } from "solid-js";
+//#region src/components/resizable/ResizablePanel/ResizablePanel.tsx
+var m = /*#__PURE__*/ c("<div>");
+function h(c) {
+	let h = t("ResizablePanel"), g = d({
+		minSize: 0,
+		maxSize: 100,
+		collapsible: !1,
+		collapsedSize: 0
+	}, c), [_, v] = p(g, [
+		"id",
+		"defaultSize",
+		"minSize",
+		"maxSize",
+		"collapsible",
+		"collapsedSize",
+		"onResize",
+		"onCollapse",
+		"onExpand",
+		"panelRef",
+		"class",
+		"classList",
+		"style",
+		"children"
+	]), y = _.id ?? u(), b = _.defaultSize === void 0 ? 1 : n(_.defaultSize, 1), x = () => h.sizes()[y] ?? b, S = () => {
+		let e = [
+			`flex-grow:${x()}`,
+			"flex-shrink:1",
+			"flex-basis:0%"
+		], t = _.style;
+		if (typeof t == "string") e.push(t);
+		else if (t && typeof t == "object") for (let [n, r] of Object.entries(t)) r != null && e.push(`${i(n)}:${r}`);
+		return e.join(";");
+	};
+	return (() => {
+		var t = m();
+		return l((e) => {
+			let t = {
+				id: y,
+				element: e,
+				minSize: () => n(_.minSize, 0),
+				maxSize: () => n(_.maxSize, 100),
+				collapsible: () => _.collapsible,
+				collapsedSize: () => n(_.collapsedSize, 0),
+				defaultSize: _.defaultSize === void 0 ? void 0 : n(_.defaultSize, 0),
+				onResize: (e) => _.onResize?.(e),
+				onCollapse: () => _.onCollapse?.(),
+				onExpand: () => _.onExpand?.()
+			}, r = h.registerPanel(t);
+			_.panelRef?.({
+				collapse: () => h.collapsePanel(y),
+				expand: () => h.expandPanel(y),
+				resize: (e) => h.setPanelSize(y, e),
+				getSize: () => h.getPanelSize(y),
+				isCollapsed: () => h.isPanelCollapsed(y),
+				isExpanded: () => !h.isPanelCollapsed(y)
+			}), f(() => {
+				r(), _.panelRef?.(void 0);
+			});
+		}, t), s(t, o(v, {
+			get id() {
+				return _.id;
+			},
+			"data-slot": "resizable-panel",
+			"data-panel-id": y,
+			get "data-panel-size"() {
+				return r(x());
+			},
+			get "data-panel-collapsed"() {
+				return h.isPanelCollapsed(y) ? "" : void 0;
+			},
+			get style() {
+				return S();
+			},
+			get class() {
+				return e("relative min-h-0 min-w-0 overflow-hidden", _.class);
+			},
+			get classList() {
+				return _.classList;
+			}
+		}), !1, !0), a(t, () => _.children), t;
+	})();
+}
+//#endregion
+export { h as ResizablePanel };
+
+//# sourceMappingURL=ResizablePanel.js.map

package/dist/components/resizable/ResizablePanel/ResizablePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizablePanel.js","names":["createUniqueId","mergeProps","onCleanup","splitProps","clsx","useResizablePanelGroupContext","parseSize","roundPercent","toKebabCase","ResizablePanelMeta","ResizablePanelProps","ResizablePanel","props","ctx","merged","minSize","maxSize","collapsible","collapsedSize","const","local","rest","id","fallbackSize","defaultSize","undefined","size","sizes","styleText","parts","extra","style","push","key","value","Object","entries","join","_el$","_tmpl$","_$use","el","meta","element","onResize","onCollapse","onExpand","unregister","registerPanel","panelRef","collapse","collapsePanel","expand","expandPanel","resize","setPanelSize","getSize","getPanelSize","isCollapsed","isPanelCollapsed","isExpanded","_$spread","_$mergeProps","data-panel-size","data-panel-collapsed","class","classList","_$insert","children","mergeProps","_$mergeProps","mergeProps$1","_tmpl$","ResizablePanel","ctx","useResizablePanelGroupContext","merged","props","local","rest","splitProps","id","createUniqueId","fallbackSize","parseSize","size","styleText","parts","extra","key","value","toKebabCase","_el$","use","meta","el","unregister","onCleanup","spread","mergeProps","roundPercent","\"class\"","clsx","insert"],"sources":["../../../../src/components/resizable/ResizablePanel/ResizablePanel.tsx"],"sourcesContent":["import { createUniqueId, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { useResizablePanelGroupContext } from \"../resizable.context\";\nimport { parseSize, roundPercent, toKebabCase } from \"../resizable.utils\";\nimport type {\n  ResizablePanelMeta,\n  ResizablePanelProps,\n} from \"../resizable.types\";\n\n/**\n * 一个可调整的面板。尺寸以百分比权重存在引擎里,这里只把它映射成 `flex-grow`,\n * 所以拖拽只会改两个面板的 style,内容不会重渲染。\n */\nexport function ResizablePanel(props: ResizablePanelProps) {\n  const ctx = useResizablePanelGroupContext(\"ResizablePanel\");\n  const merged = mergeProps(\n    { minSize: 0, maxSize: 100, collapsible: false, collapsedSize: 0 } as const,\n    props,\n  );\n  const [local, rest] = splitProps(merged, [\n    \"id\",\n    \"defaultSize\",\n    \"minSize\",\n    \"maxSize\",\n    \"collapsible\",\n    \"collapsedSize\",\n    \"onResize\",\n    \"onCollapse\",\n    \"onExpand\",\n    \"panelRef\",\n    \"class\",\n    \"classList\",\n    \"style\",\n    \"children\",\n  ]);\n\n  const id = local.id ?? createUniqueId();\n  // 引擎初始化前的 fallback(例如 SSR 首屏):按 defaultSize 比例,未指定则等分。\n  // 初始化后 store 里就是归一化到 100 的百分比。\n  const fallbackSize =\n    local.defaultSize === undefined ? 1 : parseSize(local.defaultSize, 1);\n  const size = () => ctx.sizes()[id] ?? fallbackSize;\n\n  // 用字符串形式声明 style:模板字面量会被 Solid 包进 effect,尺寸变化时能可靠更新;\n  // 对象形式里的 getter 不保证被编译器识别为动态。\n  const styleText = () => {\n    const parts = [`flex-grow:${size()}`, \"flex-shrink:1\", \"flex-basis:0%\"];\n    const extra = local.style;\n    if (typeof extra === \"string\") parts.push(extra);\n    else if (extra && typeof extra === \"object\") {\n      for (const [key, value] of Object.entries(extra)) {\n        if (value === null || value === undefined) continue;\n        parts.push(`${toKebabCase(key)}:${value}`);\n      }\n    }\n    return parts.join(\";\");\n  };\n\n  return (\n    <div\n      {...rest}\n      id={local.id}\n      ref={(el) => {\n        const meta: ResizablePanelMeta = {\n          id,\n          element: el,\n          minSize: () => parseSize(local.minSize, 0),\n          maxSize: () => parseSize(local.maxSize, 100),\n          collapsible: () => local.collapsible,\n          collapsedSize: () => parseSize(local.collapsedSize, 0),\n          defaultSize:\n            local.defaultSize === undefined\n              ? undefined\n              : parseSize(local.defaultSize, 0),\n          onResize: (value) => local.onResize?.(value),\n          onCollapse: () => local.onCollapse?.(),\n          onExpand: () => local.onExpand?.(),\n        };\n        const unregister = ctx.registerPanel(meta);\n        local.panelRef?.({\n          collapse: () => ctx.collapsePanel(id),\n          expand: () => ctx.expandPanel(id),\n          resize: (value) => ctx.setPanelSize(id, value),\n          getSize: () => ctx.getPanelSize(id),\n          isCollapsed: () => ctx.isPanelCollapsed(id),\n          isExpanded: () => !ctx.isPanelCollapsed(id),\n        });\n        onCleanup(() => {\n          unregister();\n          local.panelRef?.(undefined);\n        });\n      }}\n      data-slot=\"resizable-panel\"\n      data-panel-id={id}\n      data-panel-size={roundPercent(size())}\n      data-panel-collapsed={ctx.isPanelCollapsed(id) ? \"\" : undefined}\n      style={styleText()}\n      class={clsx(\"relative min-h-0 min-w-0 overflow-hidden\", local.class)}\n      classList={local.classList}\n    >\n      {local.children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAaA,SAAgBW,EAAeC,GAA4B;CACzD,IAAMC,IAAMR,EAA8B,gBAAgB,GACpDS,IAASb,EACb;EAAEc,SAAS;EAAGC,SAAS;EAAKC,aAAa;EAAOC,eAAe;CAAE,GACjEN,CACF,GACM,CAACQ,GAAOC,KAAQlB,EAAWW,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEKQ,IAAKF,EAAME,MAAMtB,EAAe,GAGhCuB,IACJH,EAAMI,gBAAgBC,KAAAA,IAAY,IAAInB,EAAUc,EAAMI,aAAa,CAAC,GAChEE,UAAab,EAAIc,MAAM,CAAC,CAACL,MAAOC,GAIhCK,UAAkB;EACtB,IAAMC,IAAQ;GAAC,aAAaH,EAAK;GAAK;GAAiB;EAAe,GAChEI,IAAQV,EAAMW;EACpB,IAAI,OAAOD,KAAU,UAAUD,EAAMG,KAAKF,CAAK;OAC1C,IAAIA,KAAS,OAAOA,KAAU,UACjC,KAAK,IAAM,CAACG,GAAKC,MAAUC,OAAOC,QAAQN,CAAK,GAC7C,AAAII,KAAU,QACdL,EAAMG,KAAK,GAAGxB,EAAYyB,CAAG,EAAC,GAAIC,GAAO;EAG7C,OAAOL,EAAMQ,KAAK,GAAG;CACvB;CAEA,cAAA;EAAA,IAAAC,IAAAC,EAAA;EA0CmB,OA1CnBC,GAIUC,MAAO;GACX,IAAMC,IAA2B;IAC/BpB;IACAqB,SAASF;IACT1B,eAAeT,EAAUc,EAAML,SAAS,CAAC;IACzCC,eAAeV,EAAUc,EAAMJ,SAAS,GAAG;IAC3CC,mBAAmBG,EAAMH;IACzBC,qBAAqBZ,EAAUc,EAAMF,eAAe,CAAC;IACrDM,aACEJ,EAAMI,gBAAgBC,KAAAA,IAClBA,KAAAA,IACAnB,EAAUc,EAAMI,aAAa,CAAC;IACpCoB,WAAWV,MAAUd,EAAMwB,WAAWV,CAAK;IAC3CW,kBAAkBzB,EAAMyB,aAAa;IACrCC,gBAAgB1B,EAAM0B,WAAW;GACnC,GACMC,IAAalC,EAAImC,cAAcN,CAAI;GASzCxC,AARAkB,EAAM6B,WAAW;IACfC,gBAAgBrC,EAAIsC,cAAc7B,CAAE;IACpC8B,cAAcvC,EAAIwC,YAAY/B,CAAE;IAChCgC,SAASpB,MAAUrB,EAAI0C,aAAajC,GAAIY,CAAK;IAC7CsB,eAAe3C,EAAI4C,aAAanC,CAAE;IAClCoC,mBAAmB7C,EAAI8C,iBAAiBrC,CAAE;IAC1CsC,kBAAkB,CAAC/C,EAAI8C,iBAAiBrC,CAAE;GAC5C,CAAC,GACDpB,QAAgB;IAEdkB,AADA2B,EAAW,GACX3B,EAAM6B,WAAWxB,KAAAA,CAAS;GAC5B,CAAC;EACH,GAACa,CAAA,GAAAuB,EAAAvB,GAAAwB,EA/BGzC,GAAI;GAAA,IACRC,KAAE;IAAA,OAAEF,EAAME;GAAE;GAAA,aA+BF;GAAiB,iBACZA;GAAE,IAAA,oBAAA;IAAA,OACAf,EAAamB,EAAK,CAAC;GAAC;GAAA,IAAA,yBAAA;IAAA,OACfb,EAAI8C,iBAAiBrC,CAAE,IAAI,KAAKG,KAAAA;GAAS;GAAA,IAC/DM,QAAK;IAAA,OAAEH,EAAU;GAAC;GAAA,IAAAyE,QAAA;IAAA,OACXjG,EAAK,4CAA4CgB,EAAM6C,KAAK;GAAC;GAAA,IACpEC,YAAS;IAAA,OAAE9C,EAAM8C;GAAS;EAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAA7B,SAEzBlB,EAAMgD,QAAQ,GAAA9B;CAAA,EAAA,CAAA;AAGrB"}

package/dist/components/resizable/ResizablePanel/index.d.ts

@@ -0,0 +1 @@
+export { ResizablePanel } from './ResizablePanel';

package/dist/components/resizable/ResizablePanelGroup/ResizablePanelGroup.d.ts

@@ -0,0 +1,6 @@
+import { ResizablePanelGroupProps } from '../resizable.types';
+/**
+ * 可调整布局的根:声明排列方向与初始/持久化布局,向下提供 context。
+ * 子节点按 `Panel / Handle / Panel ...` 交替组合。
+ */
+export declare function ResizablePanelGroup(props: ResizablePanelGroupProps): import('solid-js').JSX.Element;

package/dist/components/resizable/ResizablePanelGroup/ResizablePanelGroup.js

@@ -0,0 +1,66 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { ResizablePanelGroupContext as t } from "../resizable.context.js";
+import { useResizablePanelGroup as n } from "../useResizablePanelGroup.js";
+import { createComponent as r, insert as i, mergeProps as a, spread as o, template as s, use as c } from "solid-js/web";
+import { createEffect as l, mergeProps as u, onCleanup as d, splitProps as f } from "solid-js";
+//#region src/components/resizable/ResizablePanelGroup/ResizablePanelGroup.tsx
+var p = /*#__PURE__*/ s("<div>");
+function m(s) {
+	let m = u({
+		orientation: "horizontal",
+		keyboardResizeBy: 10
+	}, s), [h, g] = f(m, [
+		"class",
+		"classList",
+		"orientation",
+		"defaultLayout",
+		"onLayoutChange",
+		"autoSaveId",
+		"storage",
+		"keyboardResizeBy",
+		"children"
+	]), _ = n({
+		orientation: () => h.orientation,
+		defaultLayout: () => h.defaultLayout,
+		onLayoutChange: (e) => h.onLayoutChange?.(e),
+		autoSaveId: () => h.autoSaveId,
+		storage: () => h.storage,
+		keyboardResizeBy: () => h.keyboardResizeBy
+	});
+	return l(() => {
+		if (!_.dragging()) return;
+		let e = h.orientation === "horizontal" ? "ew-resize" : "ns-resize", t = document.createElement("style");
+		t.setAttribute("data-resizable-drag", ""), t.textContent = `*, *:hover { cursor: ${e} !important; }`, document.head.appendChild(t);
+		let n = document.body.style.userSelect;
+		document.body.style.userSelect = "none", d(() => {
+			t.remove(), document.body.style.userSelect = n;
+		});
+	}), r(t.Provider, {
+		value: _,
+		get children() {
+			var t = p();
+			return c((e) => {
+				_.setGroupElement(e), d(() => _.setGroupElement(void 0));
+			}, t), o(t, a(g, {
+				"data-slot": "resizable-panel-group",
+				role: "group",
+				get "data-orientation"() {
+					return h.orientation;
+				},
+				get "data-dragging"() {
+					return _.dragging() ? "" : void 0;
+				},
+				get class() {
+					return e("flex h-full w-full data-[orientation=vertical]:flex-col", h.class);
+				},
+				get classList() {
+					return h.classList;
+				}
+			}), !1, !0), i(t, () => h.children), t;
+		}
+	});
+}
+//#endregion
+export { m as ResizablePanelGroup };
+
+//# sourceMappingURL=ResizablePanelGroup.js.map

package/dist/components/resizable/ResizablePanelGroup/ResizablePanelGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizablePanelGroup.js","names":["createEffect","mergeProps","onCleanup","splitProps","clsx","ResizablePanelGroupContext","useResizablePanelGroup","ResizablePanelGroupProps","ResizablePanelGroup","props","merged","orientation","const","keyboardResizeBy","local","rest","ctx","defaultLayout","onLayoutChange","next","autoSaveId","storage","dragging","cursor","sheet","document","createElement","setAttribute","textContent","head","appendChild","previousUserSelect","body","style","userSelect","remove","_$createComponent","Provider","value","children","_el$","_tmpl$","_$use","el","setGroupElement","undefined","_$spread","_$mergeProps","data-orientation","data-dragging","class","classList","_$insert","mergeProps","_$createComponent","_$mergeProps","mergeProps$1","_tmpl$","ResizablePanelGroup","merged","props","local","rest","splitProps","ctx","useResizablePanelGroup","next","createEffect","cursor","sheet","previousUserSelect","onCleanup","createComponent","ResizablePanelGroupContext","_el$","use","el","spread","mergeProps","\"role\"","\"class\"","clsx","insert"],"sources":["../../../../src/components/resizable/ResizablePanelGroup/ResizablePanelGroup.tsx"],"sourcesContent":["import { createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { ResizablePanelGroupContext } from \"../resizable.context\";\nimport { useResizablePanelGroup } from \"../useResizablePanelGroup\";\nimport type { ResizablePanelGroupProps } from \"../resizable.types\";\n\n/**\n * 可调整布局的根:声明排列方向与初始/持久化布局,向下提供 context。\n * 子节点按 `Panel / Handle / Panel ...` 交替组合。\n */\nexport function ResizablePanelGroup(props: ResizablePanelGroupProps) {\n  const merged = mergeProps(\n    { orientation: \"horizontal\" as const, keyboardResizeBy: 10 },\n    props,\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"classList\",\n    \"orientation\",\n    \"defaultLayout\",\n    \"onLayoutChange\",\n    \"autoSaveId\",\n    \"storage\",\n    \"keyboardResizeBy\",\n    \"children\",\n  ]);\n\n  const ctx = useResizablePanelGroup({\n    orientation: () => local.orientation,\n    defaultLayout: () => local.defaultLayout,\n    onLayoutChange: (next) => local.onLayoutChange?.(next),\n    autoSaveId: () => local.autoSaveId,\n    storage: () => local.storage,\n    keyboardResizeBy: () => local.keyboardResizeBy,\n  });\n\n  // 拖拽期间强制全局双箭头光标:与 react-resizable-panels 一样注入一条\n  // `*, *:hover { cursor: … !important }`,这样指针经过面板/文字/链接时也不会变回默认光标;\n  // 顺带禁用文本选择,避免拖拽中选中内容。\n  createEffect(() => {\n    if (!ctx.dragging()) return;\n    const cursor =\n      local.orientation === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n    const sheet = document.createElement(\"style\");\n    sheet.setAttribute(\"data-resizable-drag\", \"\");\n    sheet.textContent = `*, *:hover { cursor: ${cursor} !important; }`;\n    document.head.appendChild(sheet);\n    const previousUserSelect = document.body.style.userSelect;\n    document.body.style.userSelect = \"none\";\n    onCleanup(() => {\n      sheet.remove();\n      document.body.style.userSelect = previousUserSelect;\n    });\n  });\n\n  return (\n    <ResizablePanelGroupContext.Provider value={ctx}>\n      <div\n        {...rest}\n        ref={(el) => {\n          ctx.setGroupElement(el);\n          onCleanup(() => ctx.setGroupElement(undefined));\n        }}\n        data-slot=\"resizable-panel-group\"\n        role=\"group\"\n        data-orientation={local.orientation}\n        data-dragging={ctx.dragging() ? \"\" : undefined}\n        class={clsx(\n          \"flex h-full w-full data-[orientation=vertical]:flex-col\",\n          local.class,\n        )}\n        classList={local.classList}\n      >\n        {local.children}\n      </div>\n    </ResizablePanelGroupContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;AAUA,SAAgBQ,EAAoBC,GAAiC;CACnE,IAAMC,IAAST,EACb;EAAEU,aAAa;EAAuBE,kBAAkB;CAAG,GAC3DJ,CACF,GACM,CAACK,GAAOC,KAAQZ,EAAWO,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEKM,IAAMV,EAAuB;EACjCK,mBAAmBG,EAAMH;EACzBM,qBAAqBH,EAAMG;EAC3BC,iBAAiBC,MAASL,EAAMI,iBAAiBC,CAAI;EACrDC,kBAAkBN,EAAMM;EACxBC,eAAeP,EAAMO;EACrBR,wBAAwBC,EAAMD;CAChC,CAAC;CAqBD,OAhBAb,QAAmB;EACjB,IAAI,CAACgB,EAAIM,SAAS,GAAG;EACrB,IAAMC,IACJT,EAAMH,gBAAgB,eAAe,cAAc,aAC/Ca,IAAQC,SAASC,cAAc,OAAO;EAG5CD,AAFAD,EAAMG,aAAa,uBAAuB,EAAE,GAC5CH,EAAMI,cAAc,wBAAwBL,EAAM,iBAClDE,SAASI,KAAKC,YAAYN,CAAK;EAC/B,IAAMO,IAAqBN,SAASO,KAAKC,MAAMC;EAE/ChC,AADAuB,SAASO,KAAKC,MAAMC,aAAa,QACjChC,QAAgB;GAEduB,AADAD,EAAMW,OAAO,GACbV,SAASO,KAAKC,MAAMC,aAAaH;EACnC,CAAC;CACH,CAAC,GAEDK,EACG/B,EAA2BgC,UAAQ;EAACC,OAAOtB;EAAG,IAAAuB,WAAA;GAAA,IAAAC,IAAAC,EAAA;GAiB5B,OAjB4BC,GAGrCC,MAAO;IAEXzC,AADAc,EAAI4B,gBAAgBD,CAAE,GACtBzC,QAAgBc,EAAI4B,gBAAgBC,KAAAA,CAAS,CAAC;GAChD,GAACL,CAAA,GAAAM,EAAAN,GAAAO,EAJGhC,GAAI;IAAA,aAKE;IAAuBgE,MAC5B;IAAO,IAAA,qBAAA;KAAA,OACMjE,EAAMH;IAAW;IAAA,IAAA,kBAAA;KAAA,OACpBK,EAAIM,SAAS,IAAI,KAAKuB,KAAAA;IAAS;IAAA,IAAAmC,QAAA;KAAA,OACvC5E,EACL,2DACAU,EAAMoC,KACR;IAAC;IAAA,IACDC,YAAS;KAAA,OAAErC,EAAMqC;IAAS;GAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAZ,SAEzB1B,EAAMyB,QAAQ,GAAAC;EAAA;CAAA,CAAA;AAIvB"}

package/dist/components/resizable/ResizablePanelGroup/index.d.ts

@@ -0,0 +1 @@
+export { ResizablePanelGroup } from './ResizablePanelGroup';

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

@@ -0,0 +1,4 @@
+export { ResizablePanelGroup } from './ResizablePanelGroup';
+export { ResizablePanel } from './ResizablePanel';
+export { ResizableHandle } from './ResizableHandle';
+export type { ResizableOrientation, ResizableSize, ResizableLayout, ResizablePanelHandle, ResizablePanelGroupProps, ResizablePanelProps, ResizableHandleProps, } from './resizable.types';

package/dist/components/resizable/index.js

@@ -0,0 +1,4 @@
+import { ResizablePanelGroup as e } from "./ResizablePanelGroup/ResizablePanelGroup.js";
+import { ResizablePanel as t } from "./ResizablePanel/ResizablePanel.js";
+import { ResizableHandle as n } from "./ResizableHandle/ResizableHandle.js";
+export { n as ResizableHandle, t as ResizablePanel, e as ResizablePanelGroup };

package/dist/components/resizable/resizable.context.d.ts

@@ -0,0 +1,38 @@
+import { Accessor } from 'solid-js';
+import { ResizableOrientation, ResizablePanelMeta } from './resizable.types';
+interface AdjacentPanels {
+    prev: ResizablePanelMeta;
+    next: ResizablePanelMeta;
+    prevSize: number;
+    total: number;
+}
+export interface ResizablePanelGroupContextValue {
+    orientation: Accessor<ResizableOrientation>;
+    /** id -> 百分比;store 代理,按 id 读取可精确追踪 */
+    sizes: () => Record<string, number>;
+    groupElement: Accessor<HTMLElement | undefined>;
+    setGroupElement: (el: HTMLElement | undefined) => void;
+    dragging: Accessor<boolean>;
+    keyboardResizeBy: Accessor<number>;
+    registerPanel: (meta: ResizablePanelMeta) => () => void;
+    /** 拖拽/键盘:根据 handle 的相邻兄弟解析出前后两个 panel */
+    resolveAdjacent: (handleEl: HTMLElement) => AdjacentPanels | undefined;
+    setAdjacentSize: (handleEl: HTMLElement, targetPrevSize: number) => void;
+    nudgeAdjacent: (handleEl: HTMLElement, deltaPercent: number) => void;
+    toggleHandleCollapse: (handleEl: HTMLElement) => void;
+    /** 沿主轴的可拖拽长度(px),用于 px -> % 换算 */
+    groupSizePx: () => number;
+    isRtl: () => boolean;
+    beginDrag: () => void;
+    endDrag: () => void;
+    commitLayout: () => void;
+    /** 命令式 panel 操作 */
+    setPanelSize: (id: string, size: number) => void;
+    collapsePanel: (id: string) => boolean;
+    expandPanel: (id: string) => boolean;
+    isPanelCollapsed: (id: string) => boolean;
+    getPanelSize: (id: string) => number;
+}
+export declare const ResizablePanelGroupContext: import('solid-js').Context<ResizablePanelGroupContextValue | undefined>;
+export declare function useResizablePanelGroupContext(component: string): ResizablePanelGroupContextValue;
+export {};

package/dist/components/resizable/resizable.context.js

@@ -0,0 +1,12 @@
+import { createContext as e, useContext as t } from "solid-js";
+//#region src/components/resizable/resizable.context.ts
+var n = e();
+function r(e) {
+	let r = t(n);
+	if (!r) throw Error(`<${e}> 必须渲染在 <ResizablePanelGroup> 内部`);
+	return r;
+}
+//#endregion
+export { n as ResizablePanelGroupContext, r as useResizablePanelGroupContext };
+
+//# sourceMappingURL=resizable.context.js.map

package/dist/components/resizable/resizable.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.context.js","names":["ResizablePanelGroupContext","createContext","useResizablePanelGroupContext","ctx","useContext","component"],"sources":["../../../src/components/resizable/resizable.context.ts"],"sourcesContent":["import { createContext, useContext, type Accessor } from \"solid-js\";\nimport type {\n  ResizableOrientation,\n  ResizablePanelMeta,\n} from \"./resizable.types\";\n\ninterface AdjacentPanels {\n  prev: ResizablePanelMeta;\n  next: ResizablePanelMeta;\n  prevSize: number;\n  total: number;\n}\n\nexport interface ResizablePanelGroupContextValue {\n  orientation: Accessor<ResizableOrientation>;\n  /** id -> 百分比;store 代理,按 id 读取可精确追踪 */\n  sizes: () => Record<string, number>;\n  groupElement: Accessor<HTMLElement | undefined>;\n  setGroupElement: (el: HTMLElement | undefined) => void;\n  dragging: Accessor<boolean>;\n  keyboardResizeBy: Accessor<number>;\n  registerPanel: (meta: ResizablePanelMeta) => () => void;\n\n  /** 拖拽/键盘:根据 handle 的相邻兄弟解析出前后两个 panel */\n  resolveAdjacent: (handleEl: HTMLElement) => AdjacentPanels | undefined;\n  setAdjacentSize: (handleEl: HTMLElement, targetPrevSize: number) => void;\n  nudgeAdjacent: (handleEl: HTMLElement, deltaPercent: number) => void;\n  toggleHandleCollapse: (handleEl: HTMLElement) => void;\n  /** 沿主轴的可拖拽长度(px),用于 px -> % 换算 */\n  groupSizePx: () => number;\n  isRtl: () => boolean;\n  beginDrag: () => void;\n  endDrag: () => void;\n  commitLayout: () => void;\n\n  /** 命令式 panel 操作 */\n  setPanelSize: (id: string, size: number) => void;\n  collapsePanel: (id: string) => boolean;\n  expandPanel: (id: string) => boolean;\n  isPanelCollapsed: (id: string) => boolean;\n  getPanelSize: (id: string) => number;\n}\n\nexport const ResizablePanelGroupContext =\n  createContext<ResizablePanelGroupContextValue>();\n\nexport function useResizablePanelGroupContext(\n  component: string,\n): ResizablePanelGroupContextValue {\n  const ctx = useContext(ResizablePanelGroupContext);\n  if (!ctx) {\n    throw new Error(`<${component}> 必须渲染在 <ResizablePanelGroup> 内部`);\n  }\n  return ctx;\n}\n"],"mappings":";;AA2CA,IAAaA,IACXC,EAA+C;AAEjD,SAAgBC,EACd,GACiC;CACjC,IAAMC,IAAMC,EAAWJ,CAA0B;CACjD,IAAI,CAACG,GACH,MAAU,MAAM,IAAIE,EAAU,iCAAiC;CAEjE,OAAOF;AACT"}

package/dist/components/resizable/resizable.types.d.ts

@@ -0,0 +1,76 @@
+import { Accessor } from 'solid-js';
+import { BaseProps, PolymorphicProps } from '../../types';
+export type ResizableOrientation = "horizontal" | "vertical";
+/** 尺寸:number 视为百分比;字符串支持 "25%" 或 "25"(仅百分比,不支持 px) */
+export type ResizableSize = number | `${number}%` | `${number}`;
+/** 布局:id -> 百分比(0-100),对齐 react-resizable-panels 的 Layout */
+export type ResizableLayout = Record<string, number>;
+export interface ResizablePanelGroupProps extends PolymorphicProps<"div", BaseProps & {
+    /** 排列方向,默认 "horizontal" */
+    orientation?: ResizableOrientation;
+    /** 初始布局(按 panel id),仅在首次挂载时使用 */
+    defaultLayout?: ResizableLayout;
+    /** 布局变化回调(拖拽、键盘、命令都会触发) */
+    onLayoutChange?: (layout: ResizableLayout) => void;
+    /** 自动持久化到 storage 的 key */
+    autoSaveId?: string;
+    /** 持久化介质,默认 localStorage(不可用时关闭持久化) */
+    storage?: Storage;
+    /** 键盘方向键一次移动的像素,默认 10 */
+    keyboardResizeBy?: number;
+}, false> {
+}
+export interface ResizablePanelHandle {
+    /** 折叠;不可折叠或已折叠时返回 false */
+    collapse: () => boolean;
+    /** 展开;不可折叠或未折叠时返回 false */
+    expand: () => boolean;
+    /** 直接设置该 panel 的百分比尺寸 */
+    resize: (size: number) => void;
+    getSize: () => number;
+    isCollapsed: () => boolean;
+    isExpanded: () => boolean;
+}
+export interface ResizablePanelProps extends PolymorphicProps<"div", BaseProps & {
+    /** 布局持久化/onLayoutChange 里的键;缺省用自动 id */
+    id?: string;
+    /** 初始尺寸,默认均分剩余空间 */
+    defaultSize?: ResizableSize;
+    /** 最小尺寸,默认 0 */
+    minSize?: ResizableSize;
+    /** 最大尺寸,默认 100 */
+    maxSize?: ResizableSize;
+    /** 是否可在拖拽到 minSize 以下时折叠 */
+    collapsible?: boolean;
+    /** 折叠后的尺寸,默认 0 */
+    collapsedSize?: ResizableSize;
+    onResize?: (size: number) => void;
+    onCollapse?: () => void;
+    onExpand?: () => void;
+    /** 暴露命令式句柄 */
+    panelRef?: (handle: ResizablePanelHandle | undefined) => void;
+}, false> {
+}
+export interface ResizableHandleProps extends PolymorphicProps<"div", BaseProps & {
+    id?: string;
+    /** 禁用拖拽与键盘调整 */
+    disabled?: boolean;
+    /** 显示可见的抓手 */
+    withHandle?: boolean;
+    /** 拖拽开始/结束 */
+    onDragging?: (dragging: boolean) => void;
+}, false> {
+}
+/** 引擎内部使用的 panel 元数据(constraints 用 accessor 保持响应式) */
+export interface ResizablePanelMeta {
+    id: string;
+    element: HTMLElement;
+    minSize: Accessor<number>;
+    maxSize: Accessor<number>;
+    collapsible: Accessor<boolean>;
+    collapsedSize: Accessor<number>;
+    defaultSize: number | undefined;
+    onResize?: (size: number) => void;
+    onCollapse?: () => void;
+    onExpand?: () => void;
+}

package/dist/components/resizable/resizable.utils.d.ts

@@ -0,0 +1,16 @@
+/** 解析尺寸:number/`"25%"`/`"25"` 都按百分比处理(不支持 px,按需再扩展) */
+export declare function parseSize(value: number | string | undefined, fallback: number): number;
+export declare function clamp(value: number, min: number, max: number): number;
+/** 百分比保留 2 位小数,避免 onLayoutChange/layout 输出出现长尾浮点 */
+export declare function roundPercent(value: number): number;
+/**
+ * 把一组原始权重归一化到总和 100,并在迭代中尊重每个面板的上下界。
+ * 之所以不用简单的按比例缩放:min/max 会在缩放后再次越界,需要固定越界项、
+ * 把剩余空间按权重分给其余项(最多 4 轮即可收敛)。
+ */
+export declare function normalizeSizes(raw: number[], bounds: Array<{
+    min: number;
+    max: number;
+}>): number[];
+/** camelCase -> kebab-case;CSS 自定义属性(--x)原样保留 */
+export declare function toKebabCase(key: string): string;

package/dist/components/resizable/resizable.utils.js

@@ -0,0 +1,45 @@
+//#region src/components/resizable/resizable.utils.ts
+function e(e, t) {
+	if (e == null) return t;
+	if (typeof e == "number") return Number.isFinite(e) ? e : t;
+	let n = e.trim(), r = (n.endsWith("%"), Number.parseFloat(n));
+	return Number.isFinite(r) ? r : t;
+}
+function t(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function n(e) {
+	return Math.round(e * 100) / 100;
+}
+function r(e, n) {
+	if (e.length === 0) return [];
+	let r = e.map((e, r) => t(e, n[r].min, n[r].max)), i = r.reduce((e, t) => e + t, 0);
+	if (i <= 0) {
+		let t = 100 / e.length;
+		return e.map(() => t);
+	}
+	for (let e = 0; e < r.length; e += 1) r[e] = r[e] * 100 / i;
+	for (let e = 0; e < 4; e += 1) {
+		let e = 0, t = [];
+		for (let i = 0; i < r.length; i += 1) {
+			let a = n[i];
+			r[i] > a.max ? (r[i] = a.max, e += a.max) : r[i] < a.min ? (r[i] = a.min, e += a.min) : t.push(i);
+		}
+		if (t.length === 0) break;
+		let i = 100 - e, a = t.reduce((e, t) => e + r[t], 0);
+		if (a <= 0) {
+			let e = i / t.length;
+			for (let n of t) r[n] = e;
+			break;
+		}
+		for (let e of t) r[e] = r[e] * i / a;
+	}
+	return r;
+}
+function i(e) {
+	return e.startsWith("--") ? e : e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+}
+//#endregion
+export { t as clamp, r as normalizeSizes, e as parseSize, n as roundPercent, i as toKebabCase };
+
+//# sourceMappingURL=resizable.utils.js.map

package/dist/components/resizable/resizable.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.utils.js","names":["parseSize","value","fallback","trimmed","numeric","clamp","max","min","roundPercent","normalizeSizes","raw","result","bounds","index","sum","acc","equal","iteration","fixedSum","free","bound","target","freeSum","toKebabCase","key","char"],"sources":["../../../src/components/resizable/resizable.utils.ts"],"sourcesContent":["/** 解析尺寸:number/`\"25%\"`/`\"25\"` 都按百分比处理(不支持 px,按需再扩展) */\nexport function parseSize(\n  value: number | string | undefined,\n  fallback: number,\n): number {\n  if (value === undefined || value === null) return fallback;\n  if (typeof value === \"number\") {\n    return Number.isFinite(value) ? value : fallback;\n  }\n  const trimmed = value.trim();\n  const numeric = trimmed.endsWith(\"%\")\n    ? Number.parseFloat(trimmed)\n    : Number.parseFloat(trimmed);\n  return Number.isFinite(numeric) ? numeric : fallback;\n}\n\nexport function clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\n/** 百分比保留 2 位小数,避免 onLayoutChange/layout 输出出现长尾浮点 */\nexport function roundPercent(value: number): number {\n  return Math.round(value * 100) / 100;\n}\n\n/**\n * 把一组原始权重归一化到总和 100,并在迭代中尊重每个面板的上下界。\n * 之所以不用简单的按比例缩放:min/max 会在缩放后再次越界,需要固定越界项、\n * 把剩余空间按权重分给其余项(最多 4 轮即可收敛)。\n */\nexport function normalizeSizes(\n  raw: number[],\n  bounds: Array<{ min: number; max: number }>,\n): number[] {\n  if (raw.length === 0) return [];\n  const result = raw.map((value, index) =>\n    clamp(value, bounds[index]!.min, bounds[index]!.max),\n  );\n  const sum = result.reduce((acc, value) => acc + value, 0);\n  if (sum <= 0) {\n    const equal = 100 / raw.length;\n    return raw.map(() => equal);\n  }\n  for (let index = 0; index < result.length; index += 1) {\n    result[index] = (result[index]! * 100) / sum;\n  }\n\n  for (let iteration = 0; iteration < 4; iteration += 1) {\n    let fixedSum = 0;\n    const free: number[] = [];\n    for (let index = 0; index < result.length; index += 1) {\n      const bound = bounds[index]!;\n      if (result[index]! > bound.max) {\n        result[index] = bound.max;\n        fixedSum += bound.max;\n      } else if (result[index]! < bound.min) {\n        result[index] = bound.min;\n        fixedSum += bound.min;\n      } else {\n        free.push(index);\n      }\n    }\n    if (free.length === 0) break;\n    const target = 100 - fixedSum;\n    const freeSum = free.reduce((acc, index) => acc + result[index]!, 0);\n    if (freeSum <= 0) {\n      const equal = target / free.length;\n      for (const index of free) result[index] = equal;\n      break;\n    }\n    for (const index of free) {\n      result[index] = (result[index]! * target) / freeSum;\n    }\n  }\n  return result;\n}\n\n/** camelCase -> kebab-case;CSS 自定义属性(--x)原样保留 */\nexport function toKebabCase(key: string): string {\n  if (key.startsWith(\"--\")) return key;\n  return key.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);\n}\n"],"mappings":";AACA,SAAgBA,EACd,GACA,GACQ;CACR,IAAIC,KAAiC,MAAM,OAAOC;CAClD,IAAI,OAAOD,KAAU,UACnB,OAAO,OAAO,SAASA,CAAK,IAAIA,IAAQC;CAE1C,IAAMC,IAAUF,EAAM,KAAK,GACrBG,KAAUD,EAAQ,SAAS,GAAG,GAChC,OAAO,WAAWA,CAAO;CAE7B,OAAO,OAAO,SAASC,CAAO,IAAIA,IAAUF;AAC9C;AAEA,SAAgBG,EAAM,GAAe,GAAa,GAAqB;CACrE,OAAO,KAAK,IAAIC,GAAK,KAAK,IAAIC,GAAKN,CAAK,CAAC;AAC3C;AAGA,SAAgBO,EAAa,GAAuB;CAClD,OAAO,KAAK,MAAMP,IAAQ,GAAG,IAAI;AACnC;AAOA,SAAgBQ,EACd,GACA,GACU;CACV,IAAIC,EAAI,WAAW,GAAG,OAAO,CAAC;CAC9B,IAAMC,IAASD,EAAI,KAAK,GAAO,MAC7BL,EAAMJ,GAAOW,EAAOC,EAAM,CAAE,KAAKD,EAAOC,EAAM,CAAE,GAAG,CACrD,GACMC,IAAMH,EAAO,QAAQ,GAAK,MAAUI,IAAMd,GAAO,CAAC;CACxD,IAAIa,KAAO,GAAG;EACZ,IAAME,IAAQ,MAAMN,EAAI;EACxB,OAAOA,EAAI,UAAUM,CAAK;CAC5B;CACA,KAAK,IAAIH,IAAQ,GAAGA,IAAQF,EAAO,QAAQ,KAAS,GAClD,EAAOE,KAAUF,EAAOE,KAAU,MAAOC;CAG3C,KAAK,IAAIG,IAAY,GAAGA,IAAY,GAAG,KAAa,GAAG;EACrD,IAAIC,IAAW,GACTC,IAAiB,CAAC;EACxB,KAAK,IAAIN,IAAQ,GAAGA,IAAQF,EAAO,QAAQ,KAAS,GAAG;GACrD,IAAMS,IAAQR,EAAOC;GACrB,AAAIF,EAAOE,KAAUO,EAAM,OACzB,EAAOP,KAASO,EAAM,KACtB,KAAYA,EAAM,OACTT,EAAOE,KAAUO,EAAM,OAChC,EAAOP,KAASO,EAAM,KACtB,KAAYA,EAAM,OAElBD,EAAK,KAAKN,CAAK;EAEnB;EACA,IAAIM,EAAK,WAAW,GAAG;EACvB,IAAME,IAAS,MAAMH,GACfI,IAAUH,EAAK,QAAQ,GAAK,MAAUJ,IAAMJ,EAAOE,IAAS,CAAC;EACnE,IAAIS,KAAW,GAAG;GAChB,IAAMN,IAAQK,IAASF,EAAK;GAC5B,KAAK,IAAMN,KAASM,GAAM,EAAON,KAASG;GAC1C;EACF;EACA,KAAK,IAAMH,KAASM,GAClB,EAAON,KAAUF,EAAOE,KAAUQ,IAAUC;CAEhD;CACA,OAAOX;AACT;AAGA,SAAgBY,EAAY,GAAqB;CAE/C,OADIC,EAAI,WAAW,IAAI,IAAUA,IAC1BA,EAAI,QAAQ,WAAW,MAAS,IAAIC,EAAK,YAAY,GAAG;AACjE"}

package/dist/components/resizable/useResizablePanelGroup.d.ts

@@ -0,0 +1,22 @@
+import { Accessor } from 'solid-js';
+import { ResizablePanelGroupContextValue } from './resizable.context';
+import { ResizableLayout, ResizableOrientation } from './resizable.types';
+interface Options {
+    orientation: Accessor<ResizableOrientation>;
+    defaultLayout: Accessor<ResizableLayout | undefined>;
+    onLayoutChange: (layout: ResizableLayout) => void;
+    autoSaveId: Accessor<string | undefined>;
+    storage: Accessor<Storage | undefined>;
+    keyboardResizeBy: Accessor<number>;
+}
+/**
+ * Resizable 的布局引擎(对齐 react-resizable-panels v4 的核心语义,但按 Solid 重写):
+ * - 尺寸用**百分比权重**存在 store 里,渲染时映射为 `flex-grow`,拖拽只更新相邻两个
+ *   panel 的两个键,子节点不重渲染(细粒度更新);
+ * - panel 在挂载时注册(顺序即 DOM 顺序),handle 通过相邻兄弟节点解析前后 panel;
+ * - 约束/min/max/collapsible 吸附、归一化到 100、以及命令式 collapse/expand;
+ * - 拖拽用 pointer capture,pointermove 由调用方用 rAF 合并,避免高频写 store;
+ * - autoSaveId + storage 做布局持久化。
+ */
+export declare function useResizablePanelGroup(options: Options): ResizablePanelGroupContextValue;
+export {};