@neut/ui 0.0.16 → 0.0.18

package/dist/components/resizable/resizable.resize.js

@@ -0,0 +1,28 @@
+//#region src/components/resizable/resizable.resize.ts
+var e = .001;
+function t(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function n(e, t) {
+	return {
+		lo: Math.max(e.prevMin, t - e.nextMax),
+		hi: Math.min(e.prevMax, t - e.nextMin)
+	};
+}
+function r(e, t, n) {
+	return e - t < n - e ? t : n;
+}
+function i(e, i, a) {
+	let { lo: o, hi: s } = n(e, a), c = t(i, o, s);
+	e.prevCollapsible && c < e.prevFloor - .001 && c > e.prevCollapsedSize + .001 && (c = r(c, e.prevCollapsedSize, e.prevFloor));
+	let l = a - c;
+	return e.nextCollapsible && l < e.nextFloor - .001 && l > e.nextCollapsedSize + .001 && (c = a - r(l, e.nextCollapsedSize, e.nextFloor)), t(c, o, s);
+}
+function a(e, t, n) {
+	let r = e.map((e, r) => t?.[e] ?? n[r]), i = r.filter((e) => e !== void 0), a = r.length - i.length, o = i.reduce((e, t) => e + t, 0), s = Math.max(0, 100 - o), c = a > 0 ? s / a : 0;
+	return r.map((e) => e ?? c);
+}
+//#endregion
+export { e as EPSILON, a as distributeInitialSizes, n as pairBounds, i as resolvePairSize };
+
+//# sourceMappingURL=resizable.resize.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.resize.js","names":["EPSILON","clamp","value","min","max","pairBounds","constraints","total","snapToNearest","size","collapsedSize","minSize","resolvePairSize","targetPrev","lo","hi","rest","distributeInitialSizes","raw","ids","saved","id","defaults","index","defined","unknown","used","acc","remaining","fill"],"sources":["../../../src/components/resizable/resizable.resize.ts"],"sourcesContent":["/**\n * Resizable 的相邻面板尺寸算法。\n *\n * 单一职责：给定「一对相邻面板」的约束，算出拖动后的两个尺寸。\n * 不碰 store、不读 DOM，因此 min / max / collapsible 吸附的每个分支都可独立单测。\n */\n\n/** 浮点比较容差（对齐上游语义） */\nexport const EPSILON = 0.001;\n\n/** 一对相邻面板的约束 */\nexport interface PairConstraints {\n  /** 前一个面板拖动能到的最小值（可折叠时是 collapsedSize） */\n  prevMin: number;\n  prevMax: number;\n  prevCollapsible: boolean;\n  /** 折叠态尺寸（仅 `prevCollapsible` 时有意义） */\n  prevCollapsedSize: number;\n  /** 非折叠时拖动能到的最小值 */\n  prevFloor: number;\n  nextMin: number;\n  nextMax: number;\n  nextCollapsible: boolean;\n  nextCollapsedSize: number;\n  nextFloor: number;\n}\n\n/** 夹取 */\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\n/**\n * 把目标尺寸夹到「两个面板的可行区间」内。\n * 下界取「prev 自己的最小值」与「total 减去 next 最大值」的较大者；\n * 上界取「prev 最大值」与「total 减去 next 最小值」的较小者。\n */\nexport function pairBounds(\n  constraints: PairConstraints,\n  total: number,\n): { lo: number; hi: number } {\n  return {\n    lo: Math.max(constraints.prevMin, total - constraints.nextMax),\n    hi: Math.min(constraints.prevMax, total - constraints.nextMin),\n  };\n}\n\n/**\n * 折叠吸附：落在 `(collapsedSize, minSize)` 之间时贴向较近的一端。\n * 这是「拖到接近折叠位置时自动吸入折叠/展开」的体验来源。\n */\nfunction snapToNearest(\n  size: number,\n  collapsedSize: number,\n  minSize: number,\n): number {\n  const distanceToCollapsed = size - collapsedSize;\n  const distanceToMin = minSize - size;\n  return distanceToCollapsed < distanceToMin ? collapsedSize : minSize;\n}\n\n/**\n * 计算拖动后「前一个面板」的最终尺寸。\n *\n * 步骤：夹到可行区间 → 对 prev 做折叠吸附 → 对 next 做折叠吸附 → 再夹一次\n * （吸附可能让尺寸越界）。返回的 `next` 永远等于 `total - prev`，因此两者之和守恒。\n */\nexport function resolvePairSize(\n  constraints: PairConstraints,\n  targetPrev: number,\n  total: number,\n): number {\n  const { lo, hi } = pairBounds(constraints, total);\n  let size = clamp(targetPrev, lo, hi);\n\n  if (\n    constraints.prevCollapsible &&\n    size < constraints.prevFloor - EPSILON &&\n    size > constraints.prevCollapsedSize + EPSILON\n  ) {\n    size = snapToNearest(\n      size,\n      constraints.prevCollapsedSize,\n      constraints.prevFloor,\n    );\n  }\n\n  const rest = total - size;\n  if (\n    constraints.nextCollapsible &&\n    rest < constraints.nextFloor - EPSILON &&\n    rest > constraints.nextCollapsedSize + EPSILON\n  ) {\n    size =\n      total -\n      snapToNearest(rest, constraints.nextCollapsedSize, constraints.nextFloor);\n  }\n\n  return clamp(size, lo, hi);\n}\n\n/**\n * 计算面板的初始尺寸。\n *\n * 规则：优先用 `saved[id]`，否则用面板自己的 `defaultSize`；\n * 没有指定尺寸的面板平分剩余空间（剩余为负时按 0 分）。\n */\nexport function distributeInitialSizes(\n  ids: string[],\n  saved: Record<string, number> | undefined,\n  defaults: Array<number | undefined>,\n): number[] {\n  const raw = ids.map((id, index) => saved?.[id] ?? defaults[index]);\n  const defined = raw.filter((value): value is number => value !== undefined);\n  const unknown = raw.length - defined.length;\n  const used = defined.reduce((acc, value) => acc + value, 0);\n  const remaining = Math.max(0, 100 - used);\n  const fill = unknown > 0 ? remaining / unknown : 0;\n  return raw.map((value) => value ?? fill);\n}\n"],"mappings":";AAQA,IAAaA,IAAU;AAoBvB,SAASC,EAAM,GAAe,GAAa,GAAqB;CAC9D,OAAO,KAAK,IAAI,KAAK,IAAIC,GAAOC,CAAG,GAAGC,CAAG;AAC3C;AAOA,SAAgBC,EACd,GACA,GAC4B;CAC5B,OAAO;EACL,IAAI,KAAK,IAAIC,EAAY,SAASC,IAAQD,EAAY,OAAO;EAC7D,IAAI,KAAK,IAAIA,EAAY,SAASC,IAAQD,EAAY,OAAO;CAC/D;AACF;AAMA,SAASE,EACP,GACA,GACA,GACQ;CAGR,OAF4BC,IAAOC,IACbC,IAAUF,IACaC,IAAgBC;AAC/D;AAQA,SAAgBC,EACd,GACA,GACA,GACQ;CACR,IAAM,EAAE,OAAI,UAAOP,EAAWC,GAAaC,CAAK,GAC5CE,IAAOR,EAAMY,GAAYC,GAAIC,CAAE;CAEnC,AACET,EAAY,mBACZG,IAAOH,EAAY,YAAA,QACnBG,IAAOH,EAAY,oBAAA,SAEnB,IAAOE,EACLC,GACAH,EAAY,mBACZA,EAAY,SACd;CAGF,IAAMU,IAAOT,IAAQE;CAWrB,OATEH,EAAY,mBACZU,IAAOV,EAAY,YAAA,QACnBU,IAAOV,EAAY,oBAAA,SAEnB,IACEC,IACAC,EAAcQ,GAAMV,EAAY,mBAAmBA,EAAY,SAAS,IAGrEL,EAAMQ,GAAMK,GAAIC,CAAE;AAC3B;AAQA,SAAgBE,EACd,GACA,GACA,GACU;CACV,IAAMC,IAAMC,EAAI,KAAK,GAAI,MAAUC,IAAQC,MAAOC,EAASC,EAAM,GAC3DC,IAAUN,EAAI,QAAQ,MAA2BhB,MAAU,KAAA,CAAS,GACpEuB,IAAUP,EAAI,SAASM,EAAQ,QAC/BE,IAAOF,EAAQ,QAAQ,GAAK,MAAUG,IAAMzB,GAAO,CAAC,GACpD0B,IAAY,KAAK,IAAI,GAAG,MAAMF,CAAI,GAClCG,IAAOJ,IAAU,IAAIG,IAAYH,IAAU;CACjD,OAAOP,EAAI,KAAK,MAAUhB,KAAS2B,CAAI;AACzC"}

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

@@ -0,0 +1,31 @@
+import { PanelRegistry } from './resizable.registry';
+import { ResizablePanelMeta } from './resizable.types';
+export interface PanelSizesContext {
+    /** 按 DOM 顺序排列的面板（写入时要与值的顺序对齐） */
+    metas: () => ResizablePanelMeta[];
+    registry: PanelRegistry;
+    /** 单个面板尺寸变化的上报（onResize / onCollapse / onExpand） */
+    reportSizeChange: (meta: ResizablePanelMeta, oldSize: number, newSize: number) => void;
+}
+export interface PanelSizes {
+    /** 细粒度的百分比 store：只更新涉及的键，子节点不重渲染 */
+    store: Record<string, number>;
+    sizeOf: (id: string) => number;
+    /** 按面板顺序批量写入；`report` 为 false 时（初始化）不上报 */
+    applyAll: (values: number[], report?: boolean) => void;
+    /** 把一对相邻面板的总量按目标值重新切分，并上报两侧变化 */
+    applyPair: (prev: ResizablePanelMeta, next: ResizablePanelMeta, targetPrev: number, total: number) => void;
+    /** 命令式设置单个面板，把它与相邻面板之间重新分配 */
+    applyPanelTarget: (meta: ResizablePanelMeta, targetSize: number) => void;
+    /** 面板卸载时删掉它的尺寸 */
+    remove: (id: string) => void;
+}
+/**
+ * 面板尺寸的账目。
+ *
+ * 单一职责：持有百分比 store 并承担**所有**写入——批量套用、相邻对重分配、
+ * 单面板命令式调整、以及卸载清理。约束求解委托给 `resizable.resize` /
+ * `resizable.constraints`，上报委托给传入的 `reportSizeChange`，
+ * 读与不读 store 的判断都收在这里，调用方不再直接碰 `setStore`。
+ */
+export declare function createPanelSizes(ctx: PanelSizesContext): PanelSizes;

package/dist/components/resizable/resizable.sizes.js

@@ -0,0 +1,46 @@
+import { resolvePairSize as e } from "./resizable.resize.js";
+import { pairConstraintsOf as t } from "./resizable.constraints.js";
+import { createStore as n, produce as r } from "solid-js/store";
+//#region src/components/resizable/resizable.sizes.ts
+function i(i) {
+	let [a, o] = n({}), s = (e) => a[e] ?? 0, c = (e, t = !0) => {
+		let n = i.metas(), a = n.map((e) => s(e.id));
+		o(r((t) => {
+			n.forEach((n, r) => {
+				let i = e[r];
+				i !== void 0 && (t[n.id] = i);
+			});
+		})), t && n.forEach((t, n) => {
+			let r = e[n];
+			r !== void 0 && i.reportSizeChange(t, a[n], r);
+		});
+	}, l = (n, a, c, l) => {
+		let u = e(t(n, a), c, l), d = s(n.id), f = s(a.id);
+		o(r((e) => {
+			e[n.id] = u, e[a.id] = l - u;
+		})), i.reportSizeChange(n, d, u), i.reportSizeChange(a, f, l - u);
+	};
+	return {
+		store: a,
+		sizeOf: s,
+		applyAll: c,
+		applyPair: l,
+		applyPanelTarget: (e, t) => {
+			let { prev: n, next: r } = i.registry.neighbors(e);
+			if (r) l(e, r, t, s(e.id) + s(r.id));
+			else if (n) {
+				let r = s(n.id) + s(e.id);
+				l(n, e, r - t, r);
+			} else o(e.id, 100);
+		},
+		remove: (e) => {
+			o(r((t) => {
+				delete t[e];
+			}));
+		}
+	};
+}
+//#endregion
+export { i as createPanelSizes };
+
+//# sourceMappingURL=resizable.sizes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.sizes.js","names":["createPanelSizes","store","setStore","createStore","sizeOf","id","applyAll","list","ctx","before","meta","produce","value","values","index","report","applyPair","size","resolvePairSize","pairConstraintsOf","prev","next","targetPrev","total","prevOld","nextOld","targetSize","draft"],"sources":["../../../src/components/resizable/resizable.sizes.ts"],"sourcesContent":["import { createStore, produce } from \"solid-js/store\";\nimport { pairConstraintsOf } from \"./resizable.constraints\";\nimport type { PanelRegistry } from \"./resizable.registry\";\nimport { resolvePairSize } from \"./resizable.resize\";\nimport type { ResizablePanelMeta } from \"./resizable.types\";\n\nexport interface PanelSizesContext {\n  /** 按 DOM 顺序排列的面板（写入时要与值的顺序对齐） */\n  metas: () => ResizablePanelMeta[];\n  registry: PanelRegistry;\n  /** 单个面板尺寸变化的上报（onResize / onCollapse / onExpand） */\n  reportSizeChange: (\n    meta: ResizablePanelMeta,\n    oldSize: number,\n    newSize: number,\n  ) => void;\n}\n\nexport interface PanelSizes {\n  /** 细粒度的百分比 store：只更新涉及的键，子节点不重渲染 */\n  store: Record<string, number>;\n  sizeOf: (id: string) => number;\n  /** 按面板顺序批量写入；`report` 为 false 时（初始化）不上报 */\n  applyAll: (values: number[], report?: boolean) => void;\n  /** 把一对相邻面板的总量按目标值重新切分，并上报两侧变化 */\n  applyPair: (\n    prev: ResizablePanelMeta,\n    next: ResizablePanelMeta,\n    targetPrev: number,\n    total: number,\n  ) => void;\n  /** 命令式设置单个面板，把它与相邻面板之间重新分配 */\n  applyPanelTarget: (meta: ResizablePanelMeta, targetSize: number) => void;\n  /** 面板卸载时删掉它的尺寸 */\n  remove: (id: string) => void;\n}\n\n/**\n * 面板尺寸的账目。\n *\n * 单一职责：持有百分比 store 并承担**所有**写入——批量套用、相邻对重分配、\n * 单面板命令式调整、以及卸载清理。约束求解委托给 `resizable.resize` /\n * `resizable.constraints`，上报委托给传入的 `reportSizeChange`，\n * 读与不读 store 的判断都收在这里，调用方不再直接碰 `setStore`。\n */\nexport function createPanelSizes(ctx: PanelSizesContext): PanelSizes {\n  const [store, setStore] = createStore<Record<string, number>>({});\n\n  const sizeOf = (id: string) => store[id] ?? 0;\n\n  const applyAll = (values: number[], report = true) => {\n    const list = ctx.metas();\n    const before = list.map((meta) => sizeOf(meta.id));\n    setStore(\n      produce((draft) => {\n        list.forEach((meta, index) => {\n          const value = values[index];\n          if (value !== undefined) draft[meta.id] = value;\n        });\n      }),\n    );\n    if (!report) return;\n\n    list.forEach((meta, index) => {\n      const value = values[index];\n      if (value !== undefined) {\n        ctx.reportSizeChange(meta, before[index]!, value);\n      }\n    });\n  };\n\n  const applyPair: PanelSizes[\"applyPair\"] = (\n    prev,\n    next,\n    targetPrev,\n    total,\n  ) => {\n    const size = resolvePairSize(\n      pairConstraintsOf(prev, next),\n      targetPrev,\n      total,\n    );\n    const prevOld = sizeOf(prev.id);\n    const nextOld = sizeOf(next.id);\n\n    setStore(\n      produce((draft) => {\n        draft[prev.id] = size;\n        draft[next.id] = total - size;\n      }),\n    );\n    ctx.reportSizeChange(prev, prevOld, size);\n    ctx.reportSizeChange(next, nextOld, total - size);\n  };\n\n  const applyPanelTarget: PanelSizes[\"applyPanelTarget\"] = (\n    meta,\n    targetSize,\n  ) => {\n    const { prev, next } = ctx.registry.neighbors(meta);\n    if (next) {\n      applyPair(meta, next, targetSize, sizeOf(meta.id) + sizeOf(next.id));\n    } else if (prev) {\n      const total = sizeOf(prev.id) + sizeOf(meta.id);\n      applyPair(prev, meta, total - targetSize, total);\n    } else {\n      // 独苗面板：没有可重分配的对象，直接占满\n      setStore(meta.id, 100);\n    }\n  };\n\n  const remove = (id: string) => {\n    setStore(\n      produce((draft) => {\n        delete draft[id];\n      }),\n    );\n  };\n\n  return { store, sizeOf, applyAll, applyPair, applyPanelTarget, remove };\n}\n"],"mappings":";;;;AA6CA,SAAgBA,EAAiB,GAAoC;CACnE,IAAM,CAACC,GAAOC,KAAYC,EAAoC,CAAC,CAAC,GAE1DC,KAAU,MAAeH,EAAMI,MAAO,GAEtCC,KAAY,GAAkB,IAAS,OAAS;EACpD,IAAMC,IAAOC,EAAI,MAAM,GACjBC,IAASF,EAAK,KAAK,MAASH,EAAOM,EAAK,EAAE,CAAC;EASjD,AARAR,EACES,GAAS,MAAU;GACjB,EAAK,SAAS,GAAM,MAAU;IAC5B,IAAMC,IAAQC,EAAOC;IACrB,AAAIF,MAAU,KAAA,MAAW,EAAMF,EAAK,MAAME;GAC5C,CAAC;EACH,CAAC,CACH,GACKG,KAELR,EAAK,SAAS,GAAM,MAAU;GAC5B,IAAMK,IAAQC,EAAOC;GACrB,AAAIF,MAAU,KAAA,KACZJ,EAAI,iBAAiBE,GAAMD,EAAOK,IAASF,CAAK;EAEpD,CAAC;CACH,GAEMI,KACJ,GACA,GACA,GACA,MACG;EACH,IAAMC,IAAOC,EACXC,EAAkBC,GAAMC,CAAI,GAC5BC,GACAC,CACF,GACMC,IAAUpB,EAAOgB,EAAK,EAAE,GACxBK,IAAUrB,EAAOiB,EAAK,EAAE;EAS9B,AAPAnB,EACES,GAAS,MAAU;GAEjB,AADA,EAAMS,EAAK,MAAMH,GACjB,EAAMI,EAAK,MAAME,IAAQN;EAC3B,CAAC,CACH,GACAT,EAAI,iBAAiBY,GAAMI,GAASP,CAAI,GACxCT,EAAI,iBAAiBa,GAAMI,GAASF,IAAQN,CAAI;CAClD;CA0BA,OAAO;EAAE;EAAO;EAAQ;EAAU;EAAW,mBAvB3C,GACA,MACG;GACH,IAAM,EAAE,SAAM,YAAST,EAAI,SAAS,UAAUE,CAAI;GAClD,IAAIW,GACF,EAAUX,GAAMW,GAAMK,GAAYtB,EAAOM,EAAK,EAAE,IAAIN,EAAOiB,EAAK,EAAE,CAAC;QAC9D,IAAID,GAAM;IACf,IAAMG,IAAQnB,EAAOgB,EAAK,EAAE,IAAIhB,EAAOM,EAAK,EAAE;IAC9C,EAAUU,GAAMV,GAAMa,IAAQG,GAAYH,CAAK;GACjD,OAEE,EAASb,EAAK,IAAI,GAAG;EAEzB;EAU+D,SAR/C,MAAe;GAC7B,EACEC,GAAS,MAAU;IACjB,OAAOgB,EAAMtB;GACf,CAAC,CACH;EACF;CAEsE;AACxE"}

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

@@ -0,0 +1,17 @@
+import { ResizableLayout } from './resizable.types';
+export declare const STORAGE_PREFIX = "neut-resizable:";
+/** 由 `autoSaveId` 得到 storage key；未配置时返回 undefined（表示不持久化） */
+export declare function storageKey(autoSaveId: string | undefined): string | undefined;
+/** 解析显式传入的 storage，缺省回退到 localStorage（SSR 下为 undefined） */
+export declare function resolveStorage(explicit: Storage | undefined): Storage | undefined;
+export interface PersistContext {
+    autoSaveId: string | undefined;
+    storage: Storage | undefined;
+}
+/** 写入布局；失败时静默忽略 */
+export declare function persistLayout(context: PersistContext, layout: ResizableLayout): void;
+/**
+ * 读取已保存的布局。
+ * 只有「非 null 的对象」才被接受（防止 JSON 里存了 `null` / 数字 / 字符串）。
+ */
+export declare function readSavedLayout(context: PersistContext): ResizableLayout | undefined;

package/dist/components/resizable/resizable.storage.js

@@ -0,0 +1,29 @@
+//#region src/components/resizable/resizable.storage.ts
+var e = "neut-resizable:";
+function t(t) {
+	return t ? `${e}${t}` : void 0;
+}
+function n(e) {
+	return e || (typeof localStorage < "u" ? localStorage : void 0);
+}
+function r(e, r) {
+	let i = t(e.autoSaveId), a = n(e.storage);
+	if (i && a) try {
+		a.setItem(i, JSON.stringify(r));
+	} catch {}
+}
+function i(e) {
+	let r = t(e.autoSaveId), i = n(e.storage);
+	if (r && i) try {
+		let e = i.getItem(r);
+		if (!e) return;
+		let t = JSON.parse(e);
+		return typeof t == "object" && t ? t : void 0;
+	} catch {
+		return;
+	}
+}
+//#endregion
+export { e as STORAGE_PREFIX, r as persistLayout, i as readSavedLayout, n as resolveStorage, t as storageKey };
+
+//# sourceMappingURL=resizable.storage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.storage.js","names":["STORAGE_PREFIX","storageKey","autoSaveId","resolveStorage","explicit","persistLayout","key","context","storage","layout","readSavedLayout","raw","parsed"],"sources":["../../../src/components/resizable/resizable.storage.ts"],"sourcesContent":["/**\n * Resizable 的布局持久化。\n *\n * 单一职责：把布局读写到 `Storage`（默认 localStorage）。\n * 所有异常都被吞掉——隐私模式、配额超限、损坏的 JSON 都不应让组件崩溃。\n */\n\nimport type { ResizableLayout } from \"./resizable.types\";\n\nexport const STORAGE_PREFIX = \"neut-resizable:\";\n\n/** 由 `autoSaveId` 得到 storage key；未配置时返回 undefined（表示不持久化） */\nexport function storageKey(autoSaveId: string | undefined): string | undefined {\n  return autoSaveId ? `${STORAGE_PREFIX}${autoSaveId}` : undefined;\n}\n\n/** 解析显式传入的 storage，缺省回退到 localStorage（SSR 下为 undefined） */\nexport function resolveStorage(\n  explicit: Storage | undefined,\n): Storage | undefined {\n  if (explicit) return explicit;\n  return typeof localStorage !== \"undefined\" ? localStorage : undefined;\n}\n\nexport interface PersistContext {\n  autoSaveId: string | undefined;\n  storage: Storage | undefined;\n}\n\n/** 写入布局；失败时静默忽略 */\nexport function persistLayout(\n  context: PersistContext,\n  layout: ResizableLayout,\n): void {\n  const key = storageKey(context.autoSaveId);\n  const storage = resolveStorage(context.storage);\n  if (!key || !storage) return;\n  try {\n    storage.setItem(key, JSON.stringify(layout));\n  } catch {\n    // 隐私模式等场景下忽略持久化失败\n  }\n}\n\n/**\n * 读取已保存的布局。\n * 只有「非 null 的对象」才被接受（防止 JSON 里存了 `null` / 数字 / 字符串）。\n */\nexport function readSavedLayout(\n  context: PersistContext,\n): ResizableLayout | undefined {\n  const key = storageKey(context.autoSaveId);\n  const storage = resolveStorage(context.storage);\n  if (!key || !storage) return undefined;\n  try {\n    const raw = storage.getItem(key);\n    if (!raw) return undefined;\n    const parsed = JSON.parse(raw) as unknown;\n    return typeof parsed === \"object\" && parsed !== null\n      ? (parsed as ResizableLayout)\n      : undefined;\n  } catch {\n    return undefined;\n  }\n}\n"],"mappings":";AASA,IAAaA,IAAiB;AAG9B,SAAgBC,EAAW,GAAoD;CAC7E,OAAOC,IAAa,GAAGF,IAAiBE,MAAe,KAAA;AACzD;AAGA,SAAgBC,EACd,GACqB;CAErB,OADIC,MACG,OAAO,eAAiB,MAAc,eAAe,KAAA;AAC9D;AAQA,SAAgBC,EACd,GACA,GACM;CACN,IAAMC,IAAML,EAAWM,EAAQ,UAAU,GACnCC,IAAUL,EAAeI,EAAQ,OAAO;CAC9C,IAAKD,KAAQE,GACb,IAAI;EACF,EAAQ,QAAQF,GAAK,KAAK,UAAUG,CAAM,CAAC;CAC7C,QAAQ,CAER;AACF;AAMA,SAAgBC,EACd,GAC6B;CAC7B,IAAMJ,IAAML,EAAWM,EAAQ,UAAU,GACnCC,IAAUL,EAAeI,EAAQ,OAAO;CAC9C,IAAKD,KAAQE,GACb,IAAI;EACF,IAAMG,IAAMH,EAAQ,QAAQF,CAAG;EAC/B,IAAI,CAACK,GAAK;EACV,IAAMC,IAAS,KAAK,MAAMD,CAAG;EAC7B,OAAO,OAAOC,KAAW,YAAYA,IAChCA,IACD,KAAA;CACN,QAAQ;EACN;CACF;AACF"}

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,23 @@
+import { JSX } from 'solid-js';
+/** 解析尺寸:number/`"25%"`/`"25"` 都按百分比处理(不支持 px,按需再扩展) */
+export declare function parseSize(value: number | string | undefined, fallback: 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[];
+/**
+ * 面板的 `style` 文本：`flex-grow` 承载百分比尺寸，配 `flex-shrink/basis`
+ * 保证面板只按权重分配主轴空间。
+ *
+ * 用字符串而非对象声明 style，是因为模板字面量会被 Solid 包进 effect，
+ * 尺寸变化时能可靠更新；对象形式里的 getter 不保证被编译器识别为动态。
+ * 调用方传入的 style 支持字符串原样拼接或对象（键转 kebab-case，空值跳过）。
+ */
+export declare function buildPanelStyleText(size: number, style?: string | JSX.CSSProperties): string;

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

@@ -0,0 +1,51 @@
+import { toKebabCase as e } from "../../utils/string.js";
+import { clamp as t } from "../../utils/number.js";
+//#region src/components/resizable/resizable.utils.ts
+function n(e, t) {
+	if (e == null) return t;
+	if (typeof e == "number") return Number.isFinite(e) ? e : t;
+	let n = e.trim(), r = Number.parseFloat(n);
+	return Number.isFinite(r) ? r : t;
+}
+function r(e) {
+	return Math.round(e * 100) / 100;
+}
+function i(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 a(t, n) {
+	let r = [
+		`flex-grow:${t}`,
+		"flex-shrink:1",
+		"flex-basis:0%"
+	];
+	if (typeof n == "string") return r.push(n), r.join(";");
+	if (n && typeof n == "object") for (let [t, i] of Object.entries(n)) i != null && r.push(`${e(t)}:${i}`);
+	return r.join(";");
+}
+//#endregion
+export { a as buildPanelStyleText, i as normalizeSizes, n as parseSize, r as roundPercent };
+
+//# 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","roundPercent","normalizeSizes","raw","result","clamp","bounds","index","sum","acc","equal","iteration","fixedSum","free","bound","target","freeSum","buildPanelStyleText","parts","size","style","key","toKebabCase"],"sources":["../../../src/components/resizable/resizable.utils.ts"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { clamp, toKebabCase } from \"~/utils\";\n\n/** 解析尺寸: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 = Number.parseFloat(trimmed);\n  return Number.isFinite(numeric) ? numeric : fallback;\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/**\n * 面板的 `style` 文本：`flex-grow` 承载百分比尺寸，配 `flex-shrink/basis`\n * 保证面板只按权重分配主轴空间。\n *\n * 用字符串而非对象声明 style，是因为模板字面量会被 Solid 包进 effect，\n * 尺寸变化时能可靠更新；对象形式里的 getter 不保证被编译器识别为动态。\n * 调用方传入的 style 支持字符串原样拼接或对象（键转 kebab-case，空值跳过）。\n */\nexport function buildPanelStyleText(\n  size: number,\n  style?: string | JSX.CSSProperties,\n): string {\n  const parts = [`flex-grow:${size}`, \"flex-shrink:1\", \"flex-basis:0%\"];\n  if (typeof style === \"string\") {\n    parts.push(style);\n    return parts.join(\";\");\n  }\n  if (style && typeof style === \"object\") {\n    for (const [key, value] of Object.entries(style)) {\n      if (value === null || value === undefined) continue;\n      parts.push(`${toKebabCase(key)}:${value}`);\n    }\n  }\n  return parts.join(\";\");\n}\n"],"mappings":";;;AAIA,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,IAAU,OAAO,WAAWD,CAAO;CACzC,OAAO,OAAO,SAASC,CAAO,IAAIA,IAAUF;AAC9C;AAGA,SAAgBG,EAAa,GAAuB;CAClD,OAAO,KAAK,MAAMJ,IAAQ,GAAG,IAAI;AACnC;AAOA,SAAgBK,EACd,GACA,GACU;CACV,IAAIC,EAAI,WAAW,GAAG,OAAO,CAAC;CAC9B,IAAMC,IAASD,EAAI,KAAK,GAAO,MAC7BE,EAAMR,GAAOS,EAAOC,EAAM,CAAE,KAAKD,EAAOC,EAAM,CAAE,GAAG,CACrD,GACMC,IAAMJ,EAAO,QAAQ,GAAK,MAAUK,IAAMZ,GAAO,CAAC;CACxD,IAAIW,KAAO,GAAG;EACZ,IAAME,IAAQ,MAAMP,EAAI;EACxB,OAAOA,EAAI,UAAUO,CAAK;CAC5B;CACA,KAAK,IAAIH,IAAQ,GAAGA,IAAQH,EAAO,QAAQ,KAAS,GAClD,EAAOG,KAAUH,EAAOG,KAAU,MAAOC;CAG3C,KAAK,IAAIG,IAAY,GAAGA,IAAY,GAAG,KAAa,GAAG;EACrD,IAAIC,IAAW,GACTC,IAAiB,CAAC;EACxB,KAAK,IAAIN,IAAQ,GAAGA,IAAQH,EAAO,QAAQ,KAAS,GAAG;GACrD,IAAMU,IAAQR,EAAOC;GACrB,AAAIH,EAAOG,KAAUO,EAAM,OACzB,EAAOP,KAASO,EAAM,KACtB,KAAYA,EAAM,OACTV,EAAOG,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,IAAML,EAAOG,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,KAAUH,EAAOG,KAAUQ,IAAUC;CAEhD;CACA,OAAOZ;AACT;AAUA,SAAgBa,EACd,GACA,GACQ;CACR,IAAMC,IAAQ;EAAC,aAAaC;EAAQ;EAAiB;CAAe;CACpE,IAAI,OAAOC,KAAU,UAEnB,OADAF,EAAM,KAAKE,CAAK,GACTF,EAAM,KAAK,GAAG;CAEvB,IAAIE,KAAS,OAAOA,KAAU,UAC5B,KAAK,IAAM,CAACC,GAAKxB,MAAU,OAAO,QAAQuB,CAAK,GAC7C,AAAIvB,KAAU,QACdqB,EAAM,KAAK,GAAGI,EAAYD,CAAG,EAAE,GAAGxB,GAAO;CAG7C,OAAOqB,EAAM,KAAK,GAAG;AACvB"}

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 {};

package/dist/components/resizable/useResizablePanelGroup.js

@@ -0,0 +1,74 @@
+import { createPanelCommands as e } from "./resizable.commands.js";
+import { createPanelLifecycle as t } from "./resizable.lifecycle.js";
+import { createPanelRegistry as n } from "./resizable.registry.js";
+import { createLayoutReporting as r } from "./resizable.reporting.js";
+import { createPanelSizes as i } from "./resizable.sizes.js";
+import { createSignal as a } from "solid-js";
+//#region src/components/resizable/useResizablePanelGroup.ts
+function o(o) {
+	let [s, c] = a(), [l, u] = a(!1), d = n(), [f, p] = a(0), m = () => d.ordered(), h = i({
+		metas: m,
+		registry: d,
+		reportSizeChange: (e, t, n) => y.reportSizeChange(e, t, n)
+	}), { store: g, sizeOf: _, applyPair: v } = h, y = r({
+		metas: m,
+		sizeOf: _,
+		onLayoutChange: o.onLayoutChange,
+		persist: () => ({
+			autoSaveId: o.autoSaveId(),
+			storage: o.storage()
+		})
+	}), { notify: b, commit: x, readSaved: S } = y, C = t({
+		metas: m,
+		registry: d,
+		sizes: h,
+		readSaved: S,
+		defaultLayout: o.defaultLayout,
+		commit: x,
+		onRegistryChange: () => p((e) => e + 1)
+	}).registerPanel, w = (e) => d.adjacent(e, _), T = (e, t) => {
+		let n = w(e);
+		n && (v(n.prev, n.next, t, n.total), b());
+	}, E = (e, t) => {
+		let n = w(e);
+		n && (v(n.prev, n.next, n.prevSize + t, n.total), x());
+	}, { collapsePanel: D, expandPanel: O, setPanelSize: k, isPanelCollapsed: A, toggleHandleCollapse: j } = e({
+		metas: m,
+		registry: d,
+		sizes: h,
+		commit: x
+	});
+	return {
+		orientation: o.orientation,
+		sizes: () => g,
+		groupElement: s,
+		setGroupElement: c,
+		dragging: l,
+		keyboardResizeBy: o.keyboardResizeBy,
+		registerPanel: C,
+		resolveAdjacent: (e) => (f(), w(e)),
+		setAdjacentSize: T,
+		nudgeAdjacent: E,
+		toggleHandleCollapse: j,
+		groupSizePx: () => {
+			let e = s();
+			return e ? o.orientation() === "horizontal" ? e.clientWidth : e.clientHeight : 0;
+		},
+		isRtl: () => {
+			let e = s();
+			return e ? window.getComputedStyle(e).direction === "rtl" : !1;
+		},
+		beginDrag: () => u(!0),
+		endDrag: () => u(!1),
+		commitLayout: x,
+		setPanelSize: k,
+		collapsePanel: D,
+		expandPanel: O,
+		isPanelCollapsed: A,
+		getPanelSize: _
+	};
+}
+//#endregion
+export { o as useResizablePanelGroup };
+
+//# sourceMappingURL=useResizablePanelGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResizablePanelGroup.js","names":["useResizablePanelGroup","groupElement","setGroupElement","createSignal","dragging","setDragging","registry","createPanelRegistry","registryVersion","setRegistryVersion","orderedMetas","sizes","createPanelSizes","reporting","meta","oldSize","newSize","createLayoutReporting","options","registerPanel","createPanelLifecycle","version","adjacentOf","handleEl","sizeOf","setAdjacentSize","adjacent","applyPair","targetPrevSize","notify","nudgeAdjacent","deltaPercent","commit","createPanelCommands","store","element"],"sources":["../../../src/components/resizable/useResizablePanelGroup.ts"],"sourcesContent":["import { createSignal, type Accessor } from \"solid-js\";\nimport type { ResizablePanelGroupContextValue } from \"./resizable.context\";\nimport type {\n  ResizableLayout,\n  ResizableOrientation,\n  ResizablePanelMeta,\n} from \"./resizable.types\";\nimport { createPanelCommands } from \"./resizable.commands\";\nimport { createPanelLifecycle } from \"./resizable.lifecycle\";\nimport { createPanelRegistry } from \"./resizable.registry\";\nimport { createLayoutReporting } from \"./resizable.reporting\";\nimport { createPanelSizes } from \"./resizable.sizes\";\n\ninterface Options {\n  orientation: Accessor<ResizableOrientation>;\n  defaultLayout: Accessor<ResizableLayout | undefined>;\n  onLayoutChange: (layout: ResizableLayout) => void;\n  autoSaveId: Accessor<string | undefined>;\n  storage: Accessor<Storage | undefined>;\n  keyboardResizeBy: Accessor<number>;\n}\n\n/**\n * Resizable 的布局引擎(对齐 react-resizable-panels v4 的核心语义,但按 Solid 重写):\n * - 尺寸用**百分比权重**存在 store 里,渲染时映射为 `flex-grow`,拖拽只更新相邻两个\n *   panel 的两个键,子节点不重渲染(细粒度更新);\n * - panel 在挂载时注册(顺序即 DOM 顺序),handle 通过相邻兄弟节点解析前后 panel;\n * - 约束/min/max/collapsible 吸附、归一化到 100、以及命令式 collapse/expand;\n * - 拖拽用 pointer capture,pointermove 由调用方用 rAF 合并,避免高频写 store;\n * - autoSaveId + storage 做布局持久化。\n */\nexport function useResizablePanelGroup(\n  options: Options,\n): ResizablePanelGroupContextValue {\n  const [groupElement, setGroupElement] = createSignal<HTMLElement>();\n  const [dragging, setDragging] = createSignal(false);\n  const registry = createPanelRegistry();\n  // 注册表变化本身不是响应式的，但 resolveAdjacent 的消费方（Handle 的 aria 值）\n  // 需要「面板挂载/卸载后重算」。这个版本号就是那条依赖边。\n  const [registryVersion, setRegistryVersion] = createSignal(0);\n\n  const orderedMetas = (): ResizablePanelMeta[] => registry.ordered();\n\n  const sizes = createPanelSizes({\n    metas: orderedMetas,\n    registry,\n    reportSizeChange: (meta, oldSize, newSize) =>\n      reporting.reportSizeChange(meta, oldSize, newSize),\n  });\n  const { store, sizeOf, applyPair } = sizes;\n\n  const reporting = createLayoutReporting({\n    metas: orderedMetas,\n    sizeOf,\n    onLayoutChange: options.onLayoutChange,\n    persist: () => ({\n      autoSaveId: options.autoSaveId(),\n      storage: options.storage(),\n    }),\n  });\n  const { notify, commit, readSaved } = reporting;\n\n  const lifecycle = createPanelLifecycle({\n    metas: orderedMetas,\n    registry,\n    sizes,\n    readSaved,\n    defaultLayout: options.defaultLayout,\n    commit,\n    onRegistryChange: () => setRegistryVersion((version) => version + 1),\n  });\n  const registerPanel = lifecycle.registerPanel;\n\n  const adjacentOf = (handleEl: HTMLElement) =>\n    registry.adjacent(handleEl, sizeOf);\n\n  const setAdjacentSize = (handleEl: HTMLElement, targetPrevSize: number) => {\n    const adjacent = adjacentOf(handleEl);\n    if (!adjacent) return;\n    applyPair(adjacent.prev, adjacent.next, targetPrevSize, adjacent.total);\n    // 拖拽帧只通知,持久化留到 pointerup 的 commitLayout\n    notify();\n  };\n\n  const nudgeAdjacent = (handleEl: HTMLElement, deltaPercent: number) => {\n    const adjacent = adjacentOf(handleEl);\n    if (!adjacent) return;\n    applyPair(\n      adjacent.prev,\n      adjacent.next,\n      adjacent.prevSize + deltaPercent,\n      adjacent.total,\n    );\n    commit();\n  };\n\n  const commands = createPanelCommands({\n    metas: orderedMetas,\n    registry,\n    sizes,\n    commit,\n  });\n  const {\n    collapsePanel,\n    expandPanel,\n    setPanelSize,\n    isPanelCollapsed,\n    toggleHandleCollapse,\n  } = commands;\n\n  const groupSizePx = () => {\n    const element = groupElement();\n    if (!element) return 0;\n    return options.orientation() === \"horizontal\"\n      ? element.clientWidth\n      : element.clientHeight;\n  };\n\n  const isRtl = () => {\n    const element = groupElement();\n    if (!element) return false;\n    return window.getComputedStyle(element).direction === \"rtl\";\n  };\n\n  return {\n    orientation: options.orientation,\n    sizes: () => store,\n    groupElement,\n    setGroupElement,\n    dragging,\n    keyboardResizeBy: options.keyboardResizeBy,\n    registerPanel,\n    resolveAdjacent: (handleEl) => {\n      // 读取版本号：面板挂载/卸载后让消费方（如 aria-valuenow）重算\n      registryVersion();\n      return adjacentOf(handleEl);\n    },\n    setAdjacentSize,\n    nudgeAdjacent,\n    toggleHandleCollapse,\n    groupSizePx,\n    isRtl,\n    beginDrag: () => setDragging(true),\n    endDrag: () => setDragging(false),\n    commitLayout: commit,\n    setPanelSize,\n    collapsePanel,\n    expandPanel,\n    isPanelCollapsed,\n    getPanelSize: sizeOf,\n  };\n}\n"],"mappings":";;;;;;;AA+BA,SAAgBA,EACd,GACiC;CACjC,IAAM,CAACC,GAAcC,KAAmBC,EAA0B,GAC5D,CAACC,GAAUC,KAAeF,EAAa,EAAK,GAC5CG,IAAWC,EAAoB,GAG/B,CAACC,GAAiBC,KAAsBN,EAAa,CAAC,GAEtDO,UAA2CJ,EAAS,QAAQ,GAE5DK,IAAQC,EAAiB;EAC7B,OAAOF;EACP;EACA,mBAAmB,GAAM,GAAS,MAChCG,EAAU,iBAAiBC,GAAMC,GAASC,CAAO;CACrD,CAAC,GACK,EAAE,UAAO,WAAQ,iBAAcL,GAE/BE,IAAYI,EAAsB;EACtC,OAAOP;EACP;EACA,gBAAgBQ,EAAQ;EACxB,gBAAgB;GACd,YAAYA,EAAQ,WAAW;GAC/B,SAASA,EAAQ,QAAQ;EAC3B;CACF,CAAC,GACK,EAAE,WAAQ,WAAQ,iBAAcL,GAWhCM,IATYC,EAAqB;EACrC,OAAOV;EACP;EACA;EACA;EACA,eAAeQ,EAAQ;EACvB;EACA,wBAAwBT,GAAoB,MAAYY,IAAU,CAAC;CACrE,CACsB,CAAA,CAAU,eAE1BC,KAAc,MAClBhB,EAAS,SAASiB,GAAUC,CAAM,GAE9BC,KAAmB,GAAuB,MAA2B;EACzE,IAAMC,IAAWJ,EAAWC,CAAQ;EACpC,AAAKG,MACLC,EAAUD,EAAS,MAAMA,EAAS,MAAME,GAAgBF,EAAS,KAAK,GAEtEG,EAAO;CACT,GAEMC,KAAiB,GAAuB,MAAyB;EACrE,IAAMJ,IAAWJ,EAAWC,CAAQ;EACpC,AAAKG,MACLC,EACED,EAAS,MACTA,EAAS,MACTA,EAAS,WAAWK,GACpBL,EAAS,KACX,GACAM,EAAO;CACT,GAQM,EACJ,kBACA,gBACA,iBACA,qBACA,4BAXeC,EAAoB;EACnC,OAAOvB;EACP;EACA;EACA;CACF,CAOI;CAgBJ,OAAO;EACL,aAAaQ,EAAQ;EACrB,aAAagB;EACb;EACA;EACA;EACA,kBAAkBhB,EAAQ;EAC1B;EACA,kBAAkB,OAEhBV,EAAgB,GACTc,EAAWC,CAAQ;EAE5B;EACA;EACA;EACA,mBA9BwB;GACxB,IAAMY,IAAUlC,EAAa;GAE7B,OADKkC,IACEjB,EAAQ,YAAY,MAAM,eAC7BiB,EAAQ,cACRA,EAAQ,eAHS;EAIvB;EAyBE,aAvBkB;GAClB,IAAMA,IAAUlC,EAAa;GAE7B,OADKkC,IACE,OAAO,iBAAiBA,CAAO,CAAC,CAAC,cAAc,QADjC;EAEvB;EAoBE,iBAAiB9B,EAAY,EAAI;EACjC,eAAeA,EAAY,EAAK;EAChC,cAAc2B;EACd;EACA;EACA;EACA;EACA,cAAcR;CAChB;AACF"}

package/dist/components/scroll-area/ScrollArea/ScrollArea.context.js

@@ -2,7 +2,7 @@ import { createContext as e, useContext as t } from "solid-js";
 //#region src/components/scroll-area/ScrollArea/ScrollArea.context.ts
 var n = e(), r = () => {
 	let e = t(n);
-	if (!e) throw Error("useScrollAreaContext must be used within a ScrollAreaProvider");
+	if (!e) throw Error("useScrollAreaContext 必须用在 <ScrollArea> 内部");
 	return e;
 };
 //#endregion

package/dist/components/scroll-area/ScrollArea/ScrollArea.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.context.js","names":["ScrollAreaContext","createContext","useScrollAreaContext","context","useContext"],"sources":["../../../../src/components/scroll-area/ScrollArea/ScrollArea.context.ts"],"sourcesContent":["import {\n  type Accessor,\n  createContext,\n  type Setter,\n  useContext,\n} from \"solid-js\";\nimport type { ScrollMetrics } from \"./ScrollArea.types\";\n\ninterface ScrollAreaContextValue {\n  hovering: Accessor<boolean>;\n  viewportRef: () => HTMLDivElement | undefined;\n  dragging: Accessor<\"vertical\" | \"horizontal\" | null>;\n  setDragging: Setter<\"vertical\" | \"horizontal\" | null>;\n  vertical: Accessor<ScrollMetrics>;\n  horizontal: Accessor<ScrollMetrics>;\n}\n\nexport const ScrollAreaContext = createContext<ScrollAreaContextValue>();\n\nexport const useScrollAreaContext = () => {\n  const context = useContext(ScrollAreaContext);\n  if (!context) {\n    throw new Error(\n      \"useScrollAreaContext must be used within a ScrollAreaProvider\",\n    );\n  }\n  return context;\n};\n"],"mappings":";;AAiBA,IAAaA,IAAoBC,EAAsC,GAE1DC,UAA6B;CACxC,IAAMC,IAAUC,EAAWJ,CAAiB;CAC5C,IAAI,CAACG,GACH,MAAU,MACR,+DACF;CAEF,OAAOA;AACT"}
+{"version":3,"file":"ScrollArea.context.js","names":["ScrollAreaContext","createContext","useScrollAreaContext","context","useContext"],"sources":["../../../../src/components/scroll-area/ScrollArea/ScrollArea.context.ts"],"sourcesContent":["import {\n  type Accessor,\n  createContext,\n  type Setter,\n  useContext,\n} from \"solid-js\";\nimport type { ScrollMetrics } from \"./ScrollArea.types\";\n\ninterface ScrollAreaContextValue {\n  hovering: Accessor<boolean>;\n  viewportRef: () => HTMLDivElement | undefined;\n  dragging: Accessor<\"vertical\" | \"horizontal\" | null>;\n  setDragging: Setter<\"vertical\" | \"horizontal\" | null>;\n  vertical: Accessor<ScrollMetrics>;\n  horizontal: Accessor<ScrollMetrics>;\n}\n\nexport const ScrollAreaContext = createContext<ScrollAreaContextValue>();\n\nexport const useScrollAreaContext = () => {\n  const context = useContext(ScrollAreaContext);\n  if (!context) {\n    throw new Error(\"useScrollAreaContext 必须用在 <ScrollArea> 内部\");\n  }\n  return context;\n};\n"],"mappings":";;AAiBA,IAAaA,IAAoBC,EAAsC,GAE1DC,UAA6B;CACxC,IAAMC,IAAUC,EAAWJ,CAAiB;CAC5C,IAAI,CAACG,GACH,MAAU,MAAM,2CAA2C;CAE7D,OAAOA;AACT"}

package/dist/components/scroll-area/ScrollArea/ScrollArea.d.ts

@@ -1,2 +1,11 @@
 import { ScrollAreaProps } from './ScrollArea.types';
+/**
+ * 自定义滚动容器。
+ *
+ * 职责边界（SRP）：
+ * - 指标采集（scroll / resize）→ `useScrollAreaMetrics.ts`
+ * - 尺寸换算 → `ScrollArea.utils.ts`
+ * - 滚动条交互 → `ScrollBar/`
+ * - 本文件只负责：组合 Provider、渲染视口 DOM 与样式
+ */
 export declare const ScrollArea: (props: ScrollAreaProps) => import('solid-js').JSX.Element;

package/dist/components/scroll-area/ScrollArea/ScrollArea.js

@@ -1,67 +1,56 @@
 import { clsx as e } from "../../../utils/clsx.js";
 import { ScrollBar as t } from "../ScrollBar/ScrollBar.js";
 import { ScrollAreaContext as n } from "./ScrollArea.context.js";
-import { computeMetrics as r } from "./ScrollArea.utils.js";
+import { useScrollAreaMetrics as r } from "./useScrollAreaMetrics.js";
 import { className as i, createComponent as a, effect as o, insert as s, mergeProps as c, setAttribute as l, spread as u, template as d, use as f } from "solid-js/web";
-import { createSignal as p, onCleanup as m, splitProps as h } from "solid-js";
+import { createSignal as p, splitProps as m } from "solid-js";
 //#region src/components/scroll-area/ScrollArea/ScrollArea.tsx
-var g = /*#__PURE__*/ d("<div data-slot=scroll-area-viewport role=region>"), _ = /*#__PURE__*/ d("<div data-slot=scroll-area>"), v = (d) => {
-	let v, [y, b] = h(d, [
+var h = /*#__PURE__*/ d("<div data-slot=scroll-area-viewport role=region>"), g = /*#__PURE__*/ d("<div data-slot=scroll-area>"), _ = (d) => {
+	let [_, v] = m(d, [
 		"orientation",
 		"class",
 		"classList",
 		"children",
 		"aria-label"
-	]), [x, S] = p(!1), [C, w] = p(null), [T, E] = p({
-		thumbRatio: 1,
-		thumbOffset: 0,
-		scrollable: !1
-	}), [D, O] = p({
-		thumbRatio: 1,
-		thumbOffset: 0,
-		scrollable: !1
-	});
-	function k(e) {
-		E(r(e.clientHeight, e.scrollTop, e.scrollHeight)), O(r(e.clientWidth, e.scrollLeft, e.scrollWidth));
-	}
-	function A(e) {
-		v = e, k(e);
-		let t = () => k(e), n = new ResizeObserver(t);
-		n.observe(e), e.firstElementChild && n.observe(e.firstElementChild), e.addEventListener("scroll", t, { passive: !0 }), m(() => {
-			n.disconnect(), e.removeEventListener("scroll", t);
-		});
-	}
+	]), [y, b] = p(!1), [x, S] = p(null), C = r(), w = () => _.orientation === "vertical" ? "overflow-y-scroll overflow-x-hidden" : _.orientation === "horizontal" ? "overflow-x-scroll overflow-y-hidden" : "overflow-scroll";
 	return (() => {
-		var r = _();
-		return r.addEventListener("mouseleave", () => S(!1)), r.addEventListener("mouseenter", () => S(!0)), u(r, c({ get class() {
-			return e("relative", y.class);
-		} }, b), !1, !0), s(r, a(n.Provider, {
-			value: {
-				hovering: x,
-				viewportRef: () => v,
-				dragging: C,
-				setDragging: w,
-				vertical: T,
-				horizontal: D
+		var r = g();
+		return r.addEventListener("mouseleave", () => b(!1)), r.addEventListener("mouseenter", () => b(!0)), u(r, c({
+			get class() {
+				return e("relative", _.class, _.classList);
+			},
+			get classList() {
+				return _.classList;
+			}
+		}, v), !1, !0), s(r, a(n.Provider, {
+			get value() {
+				return {
+					hovering: y,
+					viewportRef: C.viewportRef,
+					dragging: x,
+					setDragging: S,
+					vertical: C.vertical,
+					horizontal: C.horizontal
+				};
 			},
 			get children() {
 				return [(() => {
-					var t = g(), n = A;
-					return typeof n == "function" ? f(n, t) : A = t, s(t, () => y.children), o((n) => {
-						var r = y["aria-label"] ?? "Scrollable content", a = e("size-full rounded-[inherit] transition-[color,box-shadow] outline-none", "scrollbar-none [&::-webkit-scrollbar]:hidden", "focus-visible:ring-2 focus-visible:ring-offset-1", "focus-visible:ring-ring/50", y.orientation === "vertical" ? "overflow-y-scroll overflow-x-hidden" : y.orientation === "horizontal" ? "overflow-x-scroll overflow-y-hidden" : "overflow-scroll");
+					var t = h(), n = C.setup;
+					return typeof n == "function" ? f(n, t) : C.setup = t, s(t, () => _.children), o((n) => {
+						var r = _["aria-label"] ?? "Scrollable content", a = e("size-full rounded-[inherit] transition-[color,box-shadow] outline-none", "scrollbar-none [&::-webkit-scrollbar]:hidden", "focus-visible:ring-2 focus-visible:ring-offset-1", "focus-visible:ring-ring/50", w());
 						return r !== n.e && l(t, "aria-label", n.e = r), a !== n.t && i(t, n.t = a), n;
 					}, {
 						e: void 0,
 						t: void 0
 					}), t;
 				})(), a(t, { get orientation() {
-					return y.orientation;
+					return _.orientation;
 				} })];
 			}
 		})), r;
 	})();
 };
 //#endregion
-export { v as ScrollArea };
+export { _ as ScrollArea };
 
 //# sourceMappingURL=ScrollArea.js.map