@neut/ui 0.0.16 → 0.0.17

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

@@ -0,0 +1,92 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { useResizablePanelGroupContext as t } from "../resizable.context.js";
+import { gripClasses as n, handleClasses as r } from "./ResizableHandle.styles.js";
+import { useResizableHandle as i } from "./useResizableHandle.js";
+import { className as a, createComponent as o, insert as s, mergeProps as c, spread as l, template as u, use as d } from "solid-js/web";
+import { Show as f, createSignal as p, mergeProps as m, onCleanup as h, splitProps as g } from "solid-js";
+//#region src/components/resizable/ResizableHandle/ResizableHandle.tsx
+var _ = /*#__PURE__*/ u("<div>");
+function v(u) {
+	let v = t("ResizableHandle"), y = m({
+		disabled: !1,
+		withHandle: !1
+	}, u), [b, x] = g(y, [
+		"class",
+		"classList",
+		"id",
+		"disabled",
+		"withHandle",
+		"onDragging",
+		"children"
+	]), [S, C] = p(), w = () => {
+		let e = S();
+		return e ? v.resolveAdjacent(e) : void 0;
+	}, T = i({
+		disabled: () => b.disabled,
+		onDragging: (e) => b.onDragging?.(e)
+	}), E = () => v.orientation() === "horizontal" ? "vertical" : "horizontal";
+	return (() => {
+		var t = _();
+		return d((e) => {
+			C(e), h(() => C(void 0));
+		}, t), l(t, c(x, {
+			get id() {
+				return b.id;
+			},
+			role: "separator",
+			get "aria-orientation"() {
+				return E();
+			},
+			get "aria-valuenow"() {
+				return Math.round(w()?.prevSize ?? 0);
+			},
+			"aria-valuemin": 0,
+			get "aria-valuemax"() {
+				return Math.round(w()?.total ?? 100);
+			},
+			get tabIndex() {
+				return b.disabled ? -1 : 0;
+			},
+			"data-slot": "resizable-handle",
+			get "data-orientation"() {
+				return v.orientation();
+			},
+			get "data-disabled"() {
+				return b.disabled ? "" : void 0;
+			},
+			get "data-dragging"() {
+				return v.dragging() ? "" : void 0;
+			},
+			get onPointerDown() {
+				return T.onPointerDown;
+			},
+			get onPointerMove() {
+				return T.onPointerMove;
+			},
+			get onPointerUp() {
+				return T.onPointerUp;
+			},
+			get onKeyDown() {
+				return T.onKeyDown;
+			},
+			get class() {
+				return e(r, b.class);
+			},
+			get classList() {
+				return b.classList;
+			}
+		}), !1, !0), s(t, o(f, {
+			get when() {
+				return b.withHandle;
+			},
+			get children() {
+				var e = _();
+				return a(e, n), e;
+			}
+		}), null), s(t, () => b.children, null), t;
+	})();
+}
+//#endregion
+export { v as ResizableHandle };
+
+//# sourceMappingURL=ResizableHandle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableHandle.js","names":["Show","createSignal","mergeProps","onCleanup","splitProps","clsx","useResizablePanelGroupContext","gripClasses","handleClasses","useResizableHandle","ResizableHandleProps","ResizableHandle","props","ctx","merged","disabled","withHandle","local","rest","element","setElement","HTMLElement","adjacent","el","resolveAdjacent","undefined","handlers","onDragging","dragging","separatorOrientation","orientation","_el$","_tmpl$","_$use","_$spread","_$mergeProps","id","aria-orientation","aria-valuenow","Math","round","prevSize","aria-valuemax","total","tabIndex","data-orientation","data-disabled","data-dragging","onPointerDown","onPointerMove","onPointerUp","onKeyDown","class","classList","_$insert","_$createComponent","when","children","_el$2","_$className","mergeProps","_$mergeProps","_$createComponent","mergeProps$1","_tmpl$","ResizableHandle","ctx","useResizablePanelGroupContext","merged","props","local","rest","splitProps","element","setElement","createSignal","adjacent","el","handlers","useResizableHandle","dragging","separatorOrientation","_el$","use","onCleanup","spread","mergeProps","\"role\"","\"class\"","clsx","handleClasses","insert","createComponent","Show","_el$2","className","gripClasses"],"sources":["../../../../src/components/resizable/ResizableHandle/ResizableHandle.tsx"],"sourcesContent":["import {\n  Show,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { useResizablePanelGroupContext } from \"../resizable.context\";\nimport { gripClasses, handleClasses } from \"./ResizableHandle.styles\";\nimport { useResizableHandle } from \"./useResizableHandle\";\nimport type { ResizableHandleProps } from \"../resizable.types\";\n\n/**\n * 两个面板之间的分隔条:支持拖拽、方向键、Home/End、Enter/Space 折叠。\n * 默认只有 1px 可见线,靠 `::after` 扩大命中区域;`withHandle` 时显示抓手。\n */\nexport function ResizableHandle(props: ResizableHandleProps) {\n  const ctx = useResizablePanelGroupContext(\"ResizableHandle\");\n  const merged = mergeProps({ disabled: false, withHandle: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"classList\",\n    \"id\",\n    \"disabled\",\n    \"withHandle\",\n    \"onDragging\",\n    \"children\",\n  ]);\n\n  const [element, setElement] = createSignal<HTMLElement>();\n  const adjacent = () => {\n    const el = element();\n    return el ? ctx.resolveAdjacent(el) : undefined;\n  };\n\n  const handlers = useResizableHandle({\n    disabled: () => local.disabled,\n    onDragging: (dragging) => local.onDragging?.(dragging),\n  });\n\n  // 分隔条方向与 group 垂直:group 横向时是一条竖线\n  const separatorOrientation = () =>\n    ctx.orientation() === \"horizontal\" ? \"vertical\" : \"horizontal\";\n\n  return (\n    <div\n      {...rest}\n      ref={(el) => {\n        setElement(el);\n        onCleanup(() => setElement(undefined));\n      }}\n      id={local.id}\n      role=\"separator\"\n      aria-orientation={separatorOrientation()}\n      aria-valuenow={Math.round(adjacent()?.prevSize ?? 0)}\n      aria-valuemin={0}\n      aria-valuemax={Math.round(adjacent()?.total ?? 100)}\n      tabIndex={local.disabled ? -1 : 0}\n      data-slot=\"resizable-handle\"\n      data-orientation={ctx.orientation()}\n      data-disabled={local.disabled ? \"\" : undefined}\n      data-dragging={ctx.dragging() ? \"\" : undefined}\n      onPointerDown={handlers.onPointerDown}\n      onPointerMove={handlers.onPointerMove}\n      onPointerUp={handlers.onPointerUp}\n      onKeyDown={handlers.onKeyDown}\n      class={clsx(handleClasses, local.class)}\n      classList={local.classList}\n    >\n      <Show when={local.withHandle}>\n        <div class={gripClasses} />\n      </Show>\n      {local.children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgBW,EAAgBC,GAA6B;CAC3D,IAAMC,IAAMP,EAA8B,iBAAiB,GACrDQ,IAASZ,EAAW;EAAEa,UAAU;EAAOC,YAAY;CAAM,GAAGJ,CAAK,GACjE,CAACK,GAAOC,KAAQd,EAAWU,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEK,CAACK,GAASC,KAAcnB,EAA0B,GAClDqB,UAAiB;EACrB,IAAMC,IAAKJ,EAAQ;EACnB,OAAOI,IAAKV,EAAIW,gBAAgBD,CAAE,IAAIE,KAAAA;CACxC,GAEMC,IAAWjB,EAAmB;EAClCM,gBAAgBE,EAAMF;EACtBY,aAAaC,MAAaX,EAAMU,aAAaC,CAAQ;CACvD,CAAC,GAGKC,UACJhB,EAAIiB,YAAY,MAAM,eAAe,aAAa;CAEpD,cAAA;EAAA,IAAAC,IAAAC,EAAA;EA4BmB,OA5BnBC,GAGUV,MAAO;GAEXpB,AADAiB,EAAWG,CAAE,GACbpB,QAAgBiB,EAAWK,KAAAA,CAAS,CAAC;EACvC,GAACM,CAAA,GAAAG,EAAAH,GAAAI,EAJGjB,GAAI;GAAA,IAKRkB,KAAE;IAAA,OAAEnB,EAAMmB;GAAE;GAAAmD,MACP;GAAW,IAAA,qBAAA;IAAA,OACE1D,EAAqB;GAAC;GAAA,IAAA,kBAAA;IAAA,OACzBU,KAAKC,MAAMlB,EAAS,CAAC,EAAEmB,YAAY,CAAC;GAAC;GAAA,iBACrC;GAAC,IAAA,kBAAA;IAAA,OACDF,KAAKC,MAAMlB,EAAS,CAAC,EAAEqB,SAAS,GAAG;GAAC;GAAA,IACnDC,WAAQ;IAAA,OAAE3B,EAAMF,WAAW,KAAK;GAAC;GAAA,aACvB;GAAkB,IAAA,qBAAA;IAAA,OACVF,EAAIiB,YAAY;GAAC;GAAA,IAAA,kBAAA;IAAA,OACpBb,EAAMF,WAAW,KAAKU,KAAAA;GAAS;GAAA,IAAA,kBAAA;IAAA,OAC/BZ,EAAIe,SAAS,IAAI,KAAKH,KAAAA;GAAS;GAAA,IAC9CuB,gBAAa;IAAA,OAAEtB,EAASsB;GAAa;GAAA,IACrCC,gBAAa;IAAA,OAAEvB,EAASuB;GAAa;GAAA,IACrCC,cAAW;IAAA,OAAExB,EAASwB;GAAW;GAAA,IACjCC,YAAS;IAAA,OAAEzB,EAASyB;GAAS;GAAA,IAAAqC,QAAA;IAAA,OACtBnF,EAAKG,GAAeS,EAAMmC,KAAK;GAAC;GAAA,IACvCC,YAAS;IAAA,OAAEpC,EAAMoC;GAAS;EAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAvB,GAAAwB,EAEzBvD,GAAI;GAAA,IAACwD,OAAI;IAAA,OAAEvC,EAAMD;GAAU;GAAA,IAAAyC,WAAA;IAAA,IAAAC,IAAA1B,EAAA;IACH,OADG2B,EAAAD,GACdnD,CAAW,GAAAmD;GAAA;EAAA,CAAA,GAAA,IAAA,GAAAJ,EAAAvB,SAExBd,EAAMwC,UAAQ,IAAA,GAAA1B;CAAA,EAAA,CAAA;AAGrB"}

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

@@ -0,0 +1,3 @@
+/** 对齐 shadcn base 版 resizable handle 的类名(去掉 cn-* 主题 token) */
+export declare const handleClasses = "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90 touch-none data-[orientation=horizontal]:cursor-ew-resize data-[orientation=vertical]:cursor-ns-resize data-[disabled]:cursor-default";
+export declare const gripClasses = "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border";

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

@@ -0,0 +1,6 @@
+//#region src/components/resizable/ResizableHandle/ResizableHandle.styles.ts
+var e = "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90 touch-none data-[orientation=horizontal]:cursor-ew-resize data-[orientation=vertical]:cursor-ns-resize data-[disabled]:cursor-default", t = "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border";
+//#endregion
+export { t as gripClasses, e as handleClasses };
+
+//# sourceMappingURL=ResizableHandle.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableHandle.styles.js","names":["handleClasses","gripClasses"],"sources":["../../../../src/components/resizable/ResizableHandle/ResizableHandle.styles.ts"],"sourcesContent":["/** 对齐 shadcn base 版 resizable handle 的类名(去掉 cn-* 主题 token) */\nexport const handleClasses =\n  \"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90 touch-none data-[orientation=horizontal]:cursor-ew-resize data-[orientation=vertical]:cursor-ns-resize data-[disabled]:cursor-default\";\n\nexport const gripClasses = \"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\";\n"],"mappings":";AACA,IAAaA,IACX,8sBAEWC,IAAc"}

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

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

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;