@neut/ui 0.0.16 → 0.0.18

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/resizable.handle-drag.d.ts

@@ -0,0 +1,37 @@
+import { ResizableOrientation } from '../resizable.types';
+export interface HandleDragContext {
+    orientation: () => ResizableOrientation;
+    isRtl: () => boolean;
+    /** 沿主轴的可拖拽长度（px），用于 px → % 换算 */
+    groupSizePx: () => number;
+    resolveAdjacent: (handle: HTMLElement) => {
+        prevSize: number;
+        total: number;
+    } | undefined;
+    setAdjacentSize: (handle: HTMLElement, targetPrevSize: number) => void;
+    beginDrag: () => void;
+    endDrag: () => void;
+    commitLayout: () => void;
+}
+export interface HandleDragOptions {
+    disabled: () => boolean;
+    onDragging?: (dragging: boolean) => void;
+}
+export interface HandleDragHandlers {
+    onPointerDown: (event: PointerEvent) => void;
+    onPointerMove: (event: PointerEvent) => void;
+    onPointerUp: (event: PointerEvent) => void;
+    /** 卸载时调用：取消尚未落地的帧 */
+    dispose: () => void;
+}
+/**
+ * 分隔条的一次拖拽生命周期。
+ *
+ * 单一职责：从 pointerdown 建立拖拽会话，pointermove 把位移换算成百分比、
+ * 用 `requestAnimationFrame` 合并成每帧一次写入，pointerup 结算并提交布局。
+ *
+ * - pointer capture 保证指针移出元素后仍能继续拖拽；
+ * - px → % 用 group 主轴尺寸换算（为 0 时按 1px 兜底），横向在 RTL 下取反；
+ * - 与布局引擎的交互全部通过 `ctx` 注入，因此可以脱离引擎单独驱动。
+ */
+export declare function createHandleDrag(ctx: HandleDragContext, options: HandleDragOptions): HandleDragHandlers;

package/dist/components/resizable/ResizableHandle/resizable.handle-drag.js

@@ -0,0 +1,37 @@
+//#region src/components/resizable/ResizableHandle/resizable.handle-drag.ts
+function e(e, t) {
+	let n, r = (t) => e.orientation() === "horizontal" ? t.clientX : t.clientY, i = () => e.orientation() === "horizontal" && e.isRtl() ? -1 : 1, a = () => {
+		n && (n.frame = null, n.pending !== null && e.setAdjacentSize(n.handle, n.pending));
+	};
+	return {
+		onPointerDown: (i) => {
+			if (t.disabled() || i.button !== 0) return;
+			let a = i.currentTarget, o = e.resolveAdjacent(a);
+			o && (i.preventDefault(), a.setPointerCapture(i.pointerId), n = {
+				pointerId: i.pointerId,
+				handle: a,
+				startCoordinate: r(i),
+				startPrevSize: o.prevSize,
+				frame: null,
+				pending: null
+			}, e.beginDrag(), t.onDragging?.(!0));
+		},
+		onPointerMove: (t) => {
+			if (!n || n.pointerId !== t.pointerId || !t.currentTarget.hasPointerCapture(t.pointerId)) return;
+			let o = e.groupSizePx() || 1, s = (r(t) - n.startCoordinate) * i();
+			n.pending = n.startPrevSize + s / o * 100, n.frame === null && (n.frame = requestAnimationFrame(a));
+		},
+		onPointerUp: (r) => {
+			if (!n || n.pointerId !== r.pointerId) return;
+			let i = r.currentTarget;
+			n.frame !== null && (cancelAnimationFrame(n.frame), n.frame = null, n.pending !== null && e.setAdjacentSize(n.handle, n.pending)), i.hasPointerCapture(r.pointerId) && i.releasePointerCapture(r.pointerId), n = void 0, e.endDrag(), t.onDragging?.(!1), e.commitLayout();
+		},
+		dispose() {
+			n?.frame != null && cancelAnimationFrame(n.frame), n = void 0;
+		}
+	};
+}
+//#endregion
+export { e as createHandleDrag };
+
+//# sourceMappingURL=resizable.handle-drag.js.map

package/dist/components/resizable/ResizableHandle/resizable.handle-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.handle-drag.js","names":["createHandleDrag","drag","axisCoordinate","ctx","event","dragSign","flush","options","handle","adjacent","sizePx","deltaPx"],"sources":["../../../../src/components/resizable/ResizableHandle/resizable.handle-drag.ts"],"sourcesContent":["import type { ResizableOrientation } from \"../resizable.types\";\n\nexport interface HandleDragContext {\n  orientation: () => ResizableOrientation;\n  isRtl: () => boolean;\n  /** 沿主轴的可拖拽长度（px），用于 px → % 换算 */\n  groupSizePx: () => number;\n  resolveAdjacent: (\n    handle: HTMLElement,\n  ) => { prevSize: number; total: number } | undefined;\n  setAdjacentSize: (handle: HTMLElement, targetPrevSize: number) => void;\n  beginDrag: () => void;\n  endDrag: () => void;\n  commitLayout: () => void;\n}\n\nexport interface HandleDragOptions {\n  disabled: () => boolean;\n  onDragging?: (dragging: boolean) => void;\n}\n\nexport interface HandleDragHandlers {\n  onPointerDown: (event: PointerEvent) => void;\n  onPointerMove: (event: PointerEvent) => void;\n  onPointerUp: (event: PointerEvent) => void;\n  /** 卸载时调用：取消尚未落地的帧 */\n  dispose: () => void;\n}\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\n/**\n * 分隔条的一次拖拽生命周期。\n *\n * 单一职责：从 pointerdown 建立拖拽会话，pointermove 把位移换算成百分比、\n * 用 `requestAnimationFrame` 合并成每帧一次写入，pointerup 结算并提交布局。\n *\n * - pointer capture 保证指针移出元素后仍能继续拖拽；\n * - px → % 用 group 主轴尺寸换算（为 0 时按 1px 兜底），横向在 RTL 下取反；\n * - 与布局引擎的交互全部通过 `ctx` 注入，因此可以脱离引擎单独驱动。\n */\nexport function createHandleDrag(\n  ctx: HandleDragContext,\n  options: HandleDragOptions,\n): HandleDragHandlers {\n  let drag: DragState | undefined;\n\n  const axisCoordinate = (event: PointerEvent) =>\n    ctx.orientation() === \"horizontal\" ? event.clientX : event.clientY;\n\n  /** 横向 RTL 时位移方向取反（纵向始终正向） */\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\n    const handle = event.currentTarget as HTMLElement;\n    const adjacent = ctx.resolveAdjacent(handle);\n    if (!adjacent) return;\n\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\n    const handle = event.currentTarget as HTMLElement;\n    if (!handle.hasPointerCapture(event.pointerId)) return;\n\n    const sizePx = ctx.groupSizePx() || 1;\n    const deltaPx = (axisCoordinate(event) - drag.startCoordinate) * dragSign();\n    drag.pending = drag.startPrevSize + (deltaPx / sizePx) * 100;\n\n    // 每帧最多写一次 store，避免高频 pointermove 造成布局抖动\n    if (drag.frame === null) {\n      drag.frame = requestAnimationFrame(flush);\n    }\n  };\n\n  const onPointerUp = (event: PointerEvent) => {\n    if (!drag || drag.pointerId !== event.pointerId) return;\n\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\n    drag = undefined;\n    ctx.endDrag();\n    options.onDragging?.(false);\n    ctx.commitLayout();\n  };\n\n  return {\n    onPointerDown,\n    onPointerMove,\n    onPointerUp,\n    dispose() {\n      if (drag?.frame != null) cancelAnimationFrame(drag.frame);\n      drag = undefined;\n    },\n  };\n}\n"],"mappings":";AAgDA,SAAgBA,EACd,GACA,GACoB;CACpB,IAAIC,GAEEC,KAAkB,MACtBC,EAAI,YAAY,MAAM,eAAeC,EAAM,UAAUA,EAAM,SAGvDC,UACAF,EAAI,YAAY,MAAM,gBACnBA,EAAI,MAAM,IAAI,KAAK,GAGtBG,UAAc;EAClB,AAAKL,MACL,EAAK,QAAQ,MACTA,EAAK,YAAY,QAAME,EAAI,gBAAgBF,EAAK,QAAQA,EAAK,OAAO;CAC1E;CA0DA,OAAO;EACL,gBAzDqB,MAAwB;GAC7C,IAAIM,EAAQ,SAAS,KAAKH,EAAM,WAAW,GAAG;GAE9C,IAAMI,IAASJ,EAAM,eACfK,IAAWN,EAAI,gBAAgBK,CAAM;GAC3C,AAAKC,MAELL,EAAM,eAAe,GACrBI,EAAO,kBAAkBJ,EAAM,SAAS,GACxC,IAAO;IACL,WAAWA,EAAM;IACjB;IACA,iBAAiBF,EAAeE,CAAK;IACrC,eAAeK,EAAS;IACxB,OAAO;IACP,SAAS;GACX,GACAN,EAAI,UAAU,GACdI,EAAQ,aAAa,EAAI;EAC3B;EAuCE,gBArCqB,MAAwB;GAI7C,IAHI,CAACN,KAAQA,EAAK,cAAcG,EAAM,aAGlC,CADWA,EAAM,cACT,kBAAkBA,EAAM,SAAS,GAAG;GAEhD,IAAMM,IAASP,EAAI,YAAY,KAAK,GAC9BQ,KAAWT,EAAeE,CAAK,IAAIH,EAAK,mBAAmBI,EAAS;GAI1E,AAHA,EAAK,UAAUJ,EAAK,gBAAiBU,IAAUD,IAAU,KAGrDT,EAAK,UAAU,SACjB,EAAK,QAAQ,sBAAsBK,CAAK;EAE5C;EAwBE,cAtBmB,MAAwB;GAC3C,IAAI,CAACL,KAAQA,EAAK,cAAcG,EAAM,WAAW;GAEjD,IAAMI,IAASJ,EAAM;GAarB,AAZIH,EAAK,UAAU,SACjB,qBAAqBA,EAAK,KAAK,GAC/B,EAAK,QAAQ,MACTA,EAAK,YAAY,QAAME,EAAI,gBAAgBF,EAAK,QAAQA,EAAK,OAAO,IAEtEO,EAAO,kBAAkBJ,EAAM,SAAS,KAC1CI,EAAO,sBAAsBJ,EAAM,SAAS,GAG9C,IAAO,KAAA,GACPD,EAAI,QAAQ,GACZI,EAAQ,aAAa,EAAK,GAC1BJ,EAAI,aAAa;EACnB;EAME,UAAU;GAER,AADIF,GAAM,SAAS,QAAM,qBAAqBA,EAAK,KAAK,GACxD,IAAO,KAAA;EACT;CACF;AACF"}

package/dist/components/resizable/ResizableHandle/resizable.handle-keys.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Resizable 分隔条的键盘调整。
+ *
+ * 单一职责：把按键翻译成"调整相邻面板"的动作。方向键按 `stepPercent` 微调，
+ * Home/End 推到两端，Enter/Space 切换相邻可折叠面板；其余按键原样放行。
+ *
+ * 不持有拖拽状态、不读 DOM 尺寸——`stepPercent`（一次按键移动多少百分比）
+ * 与 `rtl`（横向且书写方向为 RTL 时方向取反）都由调用方先算好。
+ */
+export interface ResizableHandleKeysContext {
+    /** 一次按键移动的百分比（已按 keyboardResizeBy / 主轴尺寸换算） */
+    stepPercent: number;
+    /** 横向且 RTL：左右方向语义取反 */
+    rtl: boolean;
+    /** 解析句柄两侧的面板（没有相邻对时 Home/End 不动作） */
+    resolveAdjacent: (handle: HTMLElement) => {
+        total: number;
+    } | undefined;
+    nudgeAdjacent: (handle: HTMLElement, deltaPercent: number) => void;
+    setAdjacentSize: (handle: HTMLElement, targetPrevSize: number) => void;
+    commitLayout: () => void;
+    toggleHandleCollapse: (handle: HTMLElement) => void;
+}
+export declare function handleResizableHandleKeyDown(event: KeyboardEvent, handle: HTMLElement, ctx: ResizableHandleKeysContext): void;

package/dist/components/resizable/ResizableHandle/resizable.handle-keys.js

@@ -0,0 +1,36 @@
+//#region src/components/resizable/ResizableHandle/resizable.handle-keys.ts
+function e(e, t, n) {
+	let { stepPercent: r, rtl: i } = n, a = !0;
+	switch (e.key) {
+		case "ArrowLeft":
+			n.nudgeAdjacent(t, i ? r : -r);
+			break;
+		case "ArrowRight":
+			n.nudgeAdjacent(t, i ? -r : r);
+			break;
+		case "ArrowUp":
+			n.nudgeAdjacent(t, -r);
+			break;
+		case "ArrowDown":
+			n.nudgeAdjacent(t, r);
+			break;
+		case "Home":
+			n.resolveAdjacent(t) && (n.setAdjacentSize(t, 0), n.commitLayout());
+			break;
+		case "End": {
+			let e = n.resolveAdjacent(t);
+			e && (n.setAdjacentSize(t, e.total), n.commitLayout());
+			break;
+		}
+		case "Enter":
+		case " ":
+			n.toggleHandleCollapse(t);
+			break;
+		default: a = !1;
+	}
+	a && e.preventDefault();
+}
+//#endregion
+export { e as handleResizableHandleKeyDown };
+
+//# sourceMappingURL=resizable.handle-keys.js.map

package/dist/components/resizable/ResizableHandle/resizable.handle-keys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.handle-keys.js","names":["handleResizableHandleKeyDown","step","ctx","handled","event","handle","rtl","adjacent"],"sources":["../../../../src/components/resizable/ResizableHandle/resizable.handle-keys.ts"],"sourcesContent":["/**\n * Resizable 分隔条的键盘调整。\n *\n * 单一职责：把按键翻译成\"调整相邻面板\"的动作。方向键按 `stepPercent` 微调，\n * Home/End 推到两端，Enter/Space 切换相邻可折叠面板；其余按键原样放行。\n *\n * 不持有拖拽状态、不读 DOM 尺寸——`stepPercent`（一次按键移动多少百分比）\n * 与 `rtl`（横向且书写方向为 RTL 时方向取反）都由调用方先算好。\n */\nexport interface ResizableHandleKeysContext {\n  /** 一次按键移动的百分比（已按 keyboardResizeBy / 主轴尺寸换算） */\n  stepPercent: number;\n  /** 横向且 RTL：左右方向语义取反 */\n  rtl: boolean;\n  /** 解析句柄两侧的面板（没有相邻对时 Home/End 不动作） */\n  resolveAdjacent: (handle: HTMLElement) => { total: number } | undefined;\n  nudgeAdjacent: (handle: HTMLElement, deltaPercent: number) => void;\n  setAdjacentSize: (handle: HTMLElement, targetPrevSize: number) => void;\n  commitLayout: () => void;\n  toggleHandleCollapse: (handle: HTMLElement) => void;\n}\n\nexport function handleResizableHandleKeyDown(\n  event: KeyboardEvent,\n  handle: HTMLElement,\n  ctx: ResizableHandleKeysContext,\n): void {\n  const { stepPercent: step, rtl } = ctx;\n  let handled = true;\n\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\n  if (handled) event.preventDefault();\n}\n"],"mappings":";AAsBA,SAAgBA,EACd,GACA,GACA,GACM;CACN,IAAM,EAAE,aAAaC,GAAM,WAAQC,GAC/BC,IAAU;CAEd,QAAQC,EAAM,KAAd;EACE,KAAK;GACH,EAAI,cAAcC,GAAQC,IAAML,IAAO,CAACA,CAAI;GAC5C;EACF,KAAK;GACH,EAAI,cAAcI,GAAQC,IAAM,CAACL,IAAOA,CAAI;GAC5C;EACF,KAAK;GACH,EAAI,cAAcI,GAAQ,CAACJ,CAAI;GAC/B;EACF,KAAK;GACH,EAAI,cAAcI,GAAQJ,CAAI;GAC9B;EACF,KAAK;GAEH,AADiBC,EAAI,gBAAgBG,CACjC,MACFH,EAAI,gBAAgBG,GAAQ,CAAC,GAC7BH,EAAI,aAAa;GAEnB;EAEF,KAAK,OAAO;GACV,IAAMK,IAAWL,EAAI,gBAAgBG,CAAM;GAC3C,AAAIE,MACFL,EAAI,gBAAgBG,GAAQE,EAAS,KAAK,GAC1CL,EAAI,aAAa;GAEnB;EACF;EACA,KAAK;EACL,KAAK;GACH,EAAI,qBAAqBG,CAAM;GAC/B;EACF,SACE,IAAU;CACd;CAEA,AAAIF,KAASC,EAAM,eAAe;AACpC"}

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

@@ -0,0 +1,16 @@
+interface Options {
+    disabled: () => boolean;
+    onDragging?: (dragging: boolean) => void;
+}
+/**
+ * Handle 的交互接线：指针拖拽交给 `createHandleDrag`（capture + rAF 合并），
+ * 键盘调整交给 `handleResizableHandleKeyDown`；本 hook 只负责把
+ * panel group 的 context 与自身 props 转接过去。
+ */
+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,39 @@
+import { useResizablePanelGroupContext as e } from "../resizable.context.js";
+import { createHandleDrag as t } from "./resizable.handle-drag.js";
+import { handleResizableHandleKeyDown as n } from "./resizable.handle-keys.js";
+import { onCleanup as r } from "solid-js";
+//#region src/components/resizable/ResizableHandle/useResizableHandle.ts
+function i(i) {
+	let a = e("ResizableHandle"), o = t({
+		orientation: () => a.orientation(),
+		isRtl: () => a.isRtl(),
+		groupSizePx: () => a.groupSizePx(),
+		resolveAdjacent: (e) => a.resolveAdjacent(e),
+		setAdjacentSize: (e, t) => a.setAdjacentSize(e, t),
+		beginDrag: () => a.beginDrag(),
+		endDrag: () => a.endDrag(),
+		commitLayout: () => a.commitLayout()
+	}, i);
+	return r(o.dispose), {
+		onPointerDown: o.onPointerDown,
+		onPointerMove: o.onPointerMove,
+		onPointerUp: o.onPointerUp,
+		onKeyDown: (e) => {
+			if (i.disabled()) return;
+			let t = e.currentTarget;
+			n(e, t, {
+				stepPercent: a.keyboardResizeBy() / (a.groupSizePx() || 1) * 100,
+				rtl: a.orientation() === "horizontal" && a.isRtl(),
+				resolveAdjacent: (e) => a.resolveAdjacent(e),
+				nudgeAdjacent: (e, t) => a.nudgeAdjacent(e, t),
+				setAdjacentSize: (e, t) => a.setAdjacentSize(e, t),
+				commitLayout: () => a.commitLayout(),
+				toggleHandleCollapse: (e) => a.toggleHandleCollapse(e)
+			});
+		}
+	};
+}
+//#endregion
+export { i 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","createHandleDrag","handle","size","options","onCleanup","event","target","delta"],"sources":["../../../../src/components/resizable/ResizableHandle/useResizableHandle.ts"],"sourcesContent":["import { onCleanup } from \"solid-js\";\nimport { useResizablePanelGroupContext } from \"../resizable.context\";\nimport { createHandleDrag } from \"./resizable.handle-drag\";\nimport { handleResizableHandleKeyDown } from \"./resizable.handle-keys\";\n\ninterface Options {\n  disabled: () => boolean;\n  onDragging?: (dragging: boolean) => void;\n}\n\n/**\n * Handle 的交互接线：指针拖拽交给 `createHandleDrag`（capture + rAF 合并），\n * 键盘调整交给 `handleResizableHandleKeyDown`；本 hook 只负责把\n * panel group 的 context 与自身 props 转接过去。\n */\nexport function useResizableHandle(options: Options) {\n  const ctx = useResizablePanelGroupContext(\"ResizableHandle\");\n\n  const drag = createHandleDrag(\n    {\n      orientation: () => ctx.orientation(),\n      isRtl: () => ctx.isRtl(),\n      groupSizePx: () => ctx.groupSizePx(),\n      resolveAdjacent: (handle) => ctx.resolveAdjacent(handle),\n      setAdjacentSize: (handle, size) => ctx.setAdjacentSize(handle, size),\n      beginDrag: () => ctx.beginDrag(),\n      endDrag: () => ctx.endDrag(),\n      commitLayout: () => ctx.commitLayout(),\n    },\n    options,\n  );\n\n  onCleanup(drag.dispose);\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (options.disabled()) return;\n\n    const handle = event.currentTarget as HTMLElement;\n    handleResizableHandleKeyDown(event, handle, {\n      stepPercent: (ctx.keyboardResizeBy() / (ctx.groupSizePx() || 1)) * 100,\n      rtl: ctx.orientation() === \"horizontal\" && ctx.isRtl(),\n      resolveAdjacent: (target) => ctx.resolveAdjacent(target),\n      nudgeAdjacent: (target, delta) => ctx.nudgeAdjacent(target, delta),\n      setAdjacentSize: (target, size) => ctx.setAdjacentSize(target, size),\n      commitLayout: () => ctx.commitLayout(),\n      toggleHandleCollapse: (target) => ctx.toggleHandleCollapse(target),\n    });\n  };\n\n  return {\n    onPointerDown: drag.onPointerDown,\n    onPointerMove: drag.onPointerMove,\n    onPointerUp: drag.onPointerUp,\n    onKeyDown,\n  };\n}\n"],"mappings":";;;;;AAeA,SAAgBA,EAAmB,GAAkB;CACnD,IAAMC,IAAMC,EAA8B,iBAAiB,GAErDC,IAAOC,EACX;EACE,mBAAmBH,EAAI,YAAY;EACnC,aAAaA,EAAI,MAAM;EACvB,mBAAmBA,EAAI,YAAY;EACnC,kBAAkB,MAAWA,EAAI,gBAAgBI,CAAM;EACvD,kBAAkB,GAAQ,MAASJ,EAAI,gBAAgBI,GAAQC,CAAI;EACnE,iBAAiBL,EAAI,UAAU;EAC/B,eAAeA,EAAI,QAAQ;EAC3B,oBAAoBA,EAAI,aAAa;CACvC,GACAM,CACF;CAmBA,OAjBAC,EAAUL,EAAK,OAAO,GAiBf;EACL,eAAeA,EAAK;EACpB,eAAeA,EAAK;EACpB,aAAaA,EAAK;EAClB,YAnBiB,MAAyB;GAC1C,IAAII,EAAQ,SAAS,GAAG;GAExB,IAAMF,IAASI,EAAM;GACrB,EAA6BA,GAAOJ,GAAQ;IAC1C,aAAcJ,EAAI,iBAAiB,KAAKA,EAAI,YAAY,KAAK,KAAM;IACnE,KAAKA,EAAI,YAAY,MAAM,gBAAgBA,EAAI,MAAM;IACrD,kBAAkB,MAAWA,EAAI,gBAAgBS,CAAM;IACvD,gBAAgB,GAAQ,MAAUT,EAAI,cAAcS,GAAQC,CAAK;IACjE,kBAAkB,GAAQ,MAASV,EAAI,gBAAgBS,GAAQJ,CAAI;IACnE,oBAAoBL,EAAI,aAAa;IACrC,uBAAuB,MAAWA,EAAI,qBAAqBS,CAAM;GACnE,CAAC;EACH;CAOA;AACF"}

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

@@ -0,0 +1,8 @@
+import { ResizablePanelProps } from '../resizable.types';
+/**
+ * 一个可调整的面板。尺寸以百分比权重存在引擎里，这里只把它映射成 `flex-grow`，
+ * 所以拖拽只会改两个面板的 style，内容不会重渲染。
+ *
+ * 注册与命令式句柄逻辑在 `useResizablePanel`，本文件只负责渲染与属性透传。
+ */
+export declare function ResizablePanel(props: ResizablePanelProps): import('solid-js').JSX.Element;

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

@@ -0,0 +1,64 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { useResizablePanelGroupContext as t } from "../resizable.context.js";
+import { buildPanelStyleText as n, roundPercent as r } from "../resizable.utils.js";
+import { useResizablePanel as i } from "./useResizablePanel.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, splitProps as f } from "solid-js";
+//#region src/components/resizable/ResizablePanel/ResizablePanel.tsx
+var p = /*#__PURE__*/ c("<div>");
+function m(c) {
+	let m = t("ResizablePanel"), h = d({
+		minSize: 0,
+		maxSize: 100,
+		collapsible: !1,
+		collapsedSize: 0
+	}, c), [g, _] = f(h, [
+		"id",
+		"defaultSize",
+		"minSize",
+		"maxSize",
+		"collapsible",
+		"collapsedSize",
+		"onResize",
+		"onCollapse",
+		"onExpand",
+		"panelRef",
+		"class",
+		"classList",
+		"style",
+		"children"
+	]), v = g.id ?? u(), { size: y, register: b } = i({
+		ctx: m,
+		id: v,
+		local: g
+	});
+	return (() => {
+		var t = p();
+		return l(b, t), s(t, o(_, {
+			get id() {
+				return g.id;
+			},
+			"data-slot": "resizable-panel",
+			"data-panel-id": v,
+			get "data-panel-size"() {
+				return r(y());
+			},
+			get "data-panel-collapsed"() {
+				return m.isPanelCollapsed(v) ? "" : void 0;
+			},
+			get style() {
+				return n(y(), g.style);
+			},
+			get class() {
+				return e("relative min-h-0 min-w-0 overflow-hidden", g.class);
+			},
+			get classList() {
+				return g.classList;
+			}
+		}), !1, !0), a(t, () => g.children), t;
+	})();
+}
+//#endregion
+export { m 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","splitProps","clsx","useResizablePanelGroupContext","buildPanelStyleText","roundPercent","ResizablePanelProps","useResizablePanel","ResizablePanel","props","ctx","merged","minSize","maxSize","collapsible","collapsedSize","const","local","rest","id","size","register","_el$","_tmpl$","_$use","_$spread","_$mergeProps","data-panel-size","data-panel-collapsed","isPanelCollapsed","undefined","style","class","classList","_$insert","children","mergeProps","_$mergeProps","mergeProps$1","_tmpl$","ResizablePanel","ctx","useResizablePanelGroupContext","merged","props","local","rest","splitProps","id","createUniqueId","useResizablePanel","_el$","use","register","spread","mergeProps","roundPercent","size","buildPanelStyleText","\"class\"","clsx","insert"],"sources":["../../../../src/components/resizable/ResizablePanel/ResizablePanel.tsx"],"sourcesContent":["import { createUniqueId, mergeProps, splitProps } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { useResizablePanelGroupContext } from \"../resizable.context\";\nimport { buildPanelStyleText, roundPercent } from \"../resizable.utils\";\nimport type { ResizablePanelProps } from \"../resizable.types\";\nimport { useResizablePanel } from \"./useResizablePanel\";\n\n/**\n * 一个可调整的面板。尺寸以百分比权重存在引擎里，这里只把它映射成 `flex-grow`，\n * 所以拖拽只会改两个面板的 style，内容不会重渲染。\n *\n * 注册与命令式句柄逻辑在 `useResizablePanel`，本文件只负责渲染与属性透传。\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  // 自动 id 只用于引擎/持久化，不回写到 DOM 的 id 属性（只有显式传入才透传）\n  const id = local.id ?? createUniqueId();\n  const { size, register } = useResizablePanel({ ctx, id, local });\n\n  return (\n    <div\n      {...rest}\n      id={local.id}\n      ref={register}\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={buildPanelStyleText(size(), local.style)}\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,SAAgBS,EAAeC,GAA4B;CACzD,IAAMC,IAAMP,EAA8B,gBAAgB,GACpDQ,IAASX,EACb;EAAEY,SAAS;EAAGC,SAAS;EAAKC,aAAa;EAAOC,eAAe;CAAE,GACjEN,CACF,GACM,CAACQ,GAAOC,KAAQjB,EAAWU,GAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAGKQ,IAAKF,EAAME,MAAMpB,EAAe,GAChC,EAAEqB,SAAMC,gBAAad,EAAkB;EAAEG;EAAKS;EAAIF;CAAM,CAAC;CAE/D,cAAA;EAAA,IAAAK,IAAAC,EAAA;EAamB,OAbnBC,EAISH,GAAQC,CAAA,GAAAG,EAAAH,GAAAI,EAFTR,GAAI;GAAA,IACRC,KAAE;IAAA,OAAEF,EAAME;GAAE;GAAA,aAEF;GAAiB,iBACZA;GAAE,IAAA,oBAAA;IAAA,OACAd,EAAae,EAAK,CAAC;GAAC;GAAA,IAAA,yBAAA;IAAA,OACfV,EAAImB,iBAAiBV,CAAE,IAAI,KAAKW,KAAAA;GAAS;GAAA,IAC/DC,QAAK;IAAA,OAAE3B,EAAoBgB,EAAK,GAAGH,EAAMc,KAAK;GAAC;GAAA,IAAA4B,QAAA;IAAA,OACxCzD,EAAK,4CAA4Ce,EAAMe,KAAK;GAAC;GAAA,IACpEC,YAAS;IAAA,OAAEhB,EAAMgB;GAAS;EAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAZ,SAEzBL,EAAMkB,QAAQ,GAAAb;CAAA,EAAA,CAAA;AAGrB"}

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

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

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

@@ -0,0 +1,30 @@
+import { ResizablePanelGroupContextValue } from '../resizable.context';
+import { ResizablePanelHandle, ResizableSize } from '../resizable.types';
+/** 面板自己的配置（由 splitProps 得到，属性保持响应式读取） */
+export interface ResizablePanelLocal {
+    defaultSize?: ResizableSize;
+    minSize: ResizableSize;
+    maxSize: ResizableSize;
+    collapsible: boolean;
+    collapsedSize: ResizableSize;
+    onResize?: (size: number) => void;
+    onCollapse?: () => void;
+    onExpand?: () => void;
+    panelRef?: (handle: ResizablePanelHandle | undefined) => void;
+}
+export interface UseResizablePanelOptions {
+    ctx: ResizablePanelGroupContextValue;
+    id: string;
+    local: ResizablePanelLocal;
+}
+/**
+ * 面板的"注册与尺寸"逻辑：把 props 里的约束摊成引擎需要的 `ResizablePanelMeta`，
+ * 在 ref 回调里注册/注销，并把命令式句柄交给 `panelRef`。
+ *
+ * 渲染层因此只需要消费 `size()` 与 `ref={register}`，
+ * 不再关心 meta 的形状、注册时机与句柄方法。
+ */
+export declare function useResizablePanel(options: UseResizablePanelOptions): {
+    size: () => number;
+    register: (element: HTMLElement) => void;
+};

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

@@ -0,0 +1,37 @@
+import { parseSize as e } from "../resizable.utils.js";
+import { onCleanup as t } from "solid-js";
+//#region src/components/resizable/ResizablePanel/useResizablePanel.ts
+function n(n) {
+	let { ctx: r, id: i, local: a } = n, o = a.defaultSize === void 0 ? 1 : e(a.defaultSize, 1), s = () => r.sizes()[i] ?? o, c = (t) => ({
+		id: i,
+		element: t,
+		minSize: () => e(a.minSize, 0),
+		maxSize: () => e(a.maxSize, 100),
+		collapsible: () => a.collapsible,
+		collapsedSize: () => e(a.collapsedSize, 0),
+		defaultSize: a.defaultSize === void 0 ? void 0 : e(a.defaultSize, 0),
+		onResize: (e) => a.onResize?.(e),
+		onCollapse: () => a.onCollapse?.(),
+		onExpand: () => a.onExpand?.()
+	}), l = {
+		collapse: () => r.collapsePanel(i),
+		expand: () => r.expandPanel(i),
+		resize: (e) => r.setPanelSize(i, e),
+		getSize: () => r.getPanelSize(i),
+		isCollapsed: () => r.isPanelCollapsed(i),
+		isExpanded: () => !r.isPanelCollapsed(i)
+	};
+	return {
+		size: s,
+		register: (e) => {
+			let n = r.registerPanel(c(e));
+			a.panelRef?.(l), t(() => {
+				n(), a.panelRef?.(void 0);
+			});
+		}
+	};
+}
+//#endregion
+export { n as useResizablePanel };
+
+//# sourceMappingURL=useResizablePanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResizablePanel.js","names":["useResizablePanel","options","fallbackSize","local","parseSize","size","ctx","id","buildMeta","value","handle","unregister","element","onCleanup"],"sources":["../../../../src/components/resizable/ResizablePanel/useResizablePanel.ts"],"sourcesContent":["import { onCleanup } from \"solid-js\";\nimport type { ResizablePanelGroupContextValue } from \"../resizable.context\";\nimport type {\n  ResizablePanelHandle,\n  ResizablePanelMeta,\n  ResizableSize,\n} from \"../resizable.types\";\nimport { parseSize } from \"../resizable.utils\";\n\n/** 面板自己的配置（由 splitProps 得到，属性保持响应式读取） */\nexport interface ResizablePanelLocal {\n  defaultSize?: ResizableSize;\n  minSize: ResizableSize;\n  maxSize: ResizableSize;\n  collapsible: boolean;\n  collapsedSize: ResizableSize;\n  onResize?: (size: number) => void;\n  onCollapse?: () => void;\n  onExpand?: () => void;\n  panelRef?: (handle: ResizablePanelHandle | undefined) => void;\n}\n\nexport interface UseResizablePanelOptions {\n  ctx: ResizablePanelGroupContextValue;\n  id: string;\n  local: ResizablePanelLocal;\n}\n\n/**\n * 面板的\"注册与尺寸\"逻辑：把 props 里的约束摊成引擎需要的 `ResizablePanelMeta`，\n * 在 ref 回调里注册/注销，并把命令式句柄交给 `panelRef`。\n *\n * 渲染层因此只需要消费 `size()` 与 `ref={register}`，\n * 不再关心 meta 的形状、注册时机与句柄方法。\n */\nexport function useResizablePanel(options: UseResizablePanelOptions) {\n  const { ctx, id, local } = options;\n\n  // 引擎初始化前的 fallback（例如 SSR 首屏）：按 defaultSize 比例，未指定则等分。\n  // 初始化后 store 里就是归一化到 100 的百分比。\n  const fallbackSize =\n    local.defaultSize === undefined ? 1 : parseSize(local.defaultSize, 1);\n\n  const size = () => ctx.sizes()[id] ?? fallbackSize;\n\n  const buildMeta = (element: HTMLElement): ResizablePanelMeta => ({\n    id,\n    element,\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\n  const handle: ResizablePanelHandle = {\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\n  /** 供 `ref` 使用：注册 meta、暴露句柄，卸载时按相反顺序回收 */\n  const register = (element: HTMLElement) => {\n    const unregister = ctx.registerPanel(buildMeta(element));\n    local.panelRef?.(handle);\n    onCleanup(() => {\n      unregister();\n      local.panelRef?.(undefined);\n    });\n  };\n\n  return { size, register };\n}\n"],"mappings":";;;AAmCA,SAAgBA,EAAkB,GAAmC;CACnE,IAAM,EAAE,QAAK,OAAI,aAAUC,GAIrBC,IACJC,EAAM,gBAAgB,KAAA,IAAY,IAAIC,EAAUD,EAAM,aAAa,CAAC,GAEhEE,UAAaC,EAAI,MAAM,CAAC,CAACC,MAAOL,GAEhCM,KAAa,OAA8C;EAC/D;EACA;EACA,eAAeJ,EAAUD,EAAM,SAAS,CAAC;EACzC,eAAeC,EAAUD,EAAM,SAAS,GAAG;EAC3C,mBAAmBA,EAAM;EACzB,qBAAqBC,EAAUD,EAAM,eAAe,CAAC;EACrD,aACEA,EAAM,gBAAgB,KAAA,IAClB,KAAA,IACAC,EAAUD,EAAM,aAAa,CAAC;EACpC,WAAW,MAAUA,EAAM,WAAWM,CAAK;EAC3C,kBAAkBN,EAAM,aAAa;EACrC,gBAAgBA,EAAM,WAAW;CACnC,IAEMO,IAA+B;EACnC,gBAAgBJ,EAAI,cAAcC,CAAE;EACpC,cAAcD,EAAI,YAAYC,CAAE;EAChC,SAAS,MAAUD,EAAI,aAAaC,GAAIE,CAAK;EAC7C,eAAeH,EAAI,aAAaC,CAAE;EAClC,mBAAmBD,EAAI,iBAAiBC,CAAE;EAC1C,kBAAkB,CAACD,EAAI,iBAAiBC,CAAE;CAC5C;CAYA,OAAO;EAAE;EAAM,WATG,MAAyB;GACzC,IAAMI,IAAaL,EAAI,cAAcE,EAAUI,CAAO,CAAC;GAEvD,AADAT,EAAM,WAAWO,CAAM,GACvBG,QAAgB;IAEd,AADAF,EAAW,GACXR,EAAM,WAAW,KAAA,CAAS;GAC5B,CAAC;EACH;CAEwB;AAC1B"}

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

@@ -0,0 +1,9 @@
+import { ResizablePanelGroupProps } from '../resizable.types';
+/**
+ * 可调整布局的根：声明排列方向与初始/持久化布局，向下提供 context。
+ * 子节点按 `Panel / Handle / Panel ...` 交替组合。
+ *
+ * 布局引擎在 `useResizablePanelGroup`，拖拽光标在 `useDragCursor`，
+ * 本文件只负责默认值合并与框架渲染。
+ */
+export declare function ResizablePanelGroup(props: ResizablePanelGroupProps): import('solid-js').JSX.Element;

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

@@ -0,0 +1,59 @@
+import { clsx as e } from "../../../utils/clsx.js";
+import { ResizablePanelGroupContext as t } from "../resizable.context.js";
+import { useResizablePanelGroup as n } from "../useResizablePanelGroup.js";
+import { useDragCursor as r } from "./useDragCursor.js";
+import { createComponent as i, insert as a, mergeProps as o, spread as s, template as c, use as l } from "solid-js/web";
+import { mergeProps as u, onCleanup as d, splitProps as f } from "solid-js";
+//#region src/components/resizable/ResizablePanelGroup/ResizablePanelGroup.tsx
+var p = /*#__PURE__*/ c("<div>");
+function m(c) {
+	let m = u({
+		orientation: "horizontal",
+		keyboardResizeBy: 10
+	}, c), [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 r(_.dragging, () => h.orientation), i(t.Provider, {
+		value: _,
+		get children() {
+			var t = p();
+			return l((e) => {
+				_.setGroupElement(e), d(() => _.setGroupElement(void 0));
+			}, t), s(t, o(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), a(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":["mergeProps","onCleanup","splitProps","clsx","ResizablePanelGroupContext","ResizablePanelGroupProps","useResizablePanelGroup","useDragCursor","ResizablePanelGroup","props","merged","orientation","const","keyboardResizeBy","local","rest","ctx","defaultLayout","onLayoutChange","next","autoSaveId","storage","dragging","_$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","useDragCursor","createComponent","ResizablePanelGroupContext","_el$","use","el","onCleanup","spread","mergeProps","\"role\"","\"class\"","clsx","insert"],"sources":["../../../../src/components/resizable/ResizablePanelGroup/ResizablePanelGroup.tsx"],"sourcesContent":["import { mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { ResizablePanelGroupContext } from \"../resizable.context\";\nimport type { ResizablePanelGroupProps } from \"../resizable.types\";\nimport { useResizablePanelGroup } from \"../useResizablePanelGroup\";\nimport { useDragCursor } from \"./useDragCursor\";\n\n/**\n * 可调整布局的根：声明排列方向与初始/持久化布局，向下提供 context。\n * 子节点按 `Panel / Handle / Panel ...` 交替组合。\n *\n * 布局引擎在 `useResizablePanelGroup`，拖拽光标在 `useDragCursor`，\n * 本文件只负责默认值合并与框架渲染。\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  useDragCursor(ctx.dragging, () => local.orientation);\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":";;;;;;;;AAcA,SAAgBQ,EAAoBC,GAAiC;CACnE,IAAMC,IAASV,EACb;EAAEW,aAAa;EAAuBE,kBAAkB;CAAG,GAC3DJ,CACF,GACM,CAACK,GAAOC,KAAQb,EAAWQ,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;CAID,OAFAN,EAAcS,EAAIM,gBAAgBR,EAAMH,WAAW,GAEnDY,EACGnB,EAA2BoB,UAAQ;EAACC,OAAOT;EAAG,IAAAU,WAAA;GAAA,IAAAC,IAAAC,EAAA;GAiB5B,OAjB4BC,GAGrCC,MAAO;IAEX7B,AADAe,EAAIe,gBAAgBD,CAAE,GACtB7B,QAAgBe,EAAIe,gBAAgBC,KAAAA,CAAS,CAAC;GAChD,GAACL,CAAA,GAAAM,EAAAN,GAAAO,EAJGnB,GAAI;IAAA,aAKE;IAAuBgD,MAC5B;IAAO,IAAA,qBAAA;KAAA,OACMjD,EAAMH;IAAW;IAAA,IAAA,kBAAA;KAAA,OACpBK,EAAIM,SAAS,IAAI,KAAKU,KAAAA;IAAS;IAAA,IAAAgC,QAAA;KAAA,OACvC7D,EACL,2DACAW,EAAMuB,KACR;IAAC;IAAA,IACDC,YAAS;KAAA,OAAExB,EAAMwB;IAAS;GAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAZ,SAEzBb,EAAMY,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/ResizablePanelGroup/useDragCursor.d.ts

@@ -0,0 +1,11 @@
+import { Accessor } from 'solid-js';
+import { ResizableOrientation } from '../resizable.types';
+/**
+ * 拖拽期间强制全局双箭头光标：注入一条 `*, *:hover { cursor: … !important }`，
+ * 这样指针经过面板/文字/链接时也不会变回默认光标；顺带禁用文本选择，
+ * 避免拖拽中选中内容。拖拽结束（或组件卸载）时还原。
+ *
+ * 与 react-resizable-panels 的行为一致，因此单独成 hook——
+ * 它只依赖"是否拖拽中"与方向，跟布局引擎、渲染都无关。
+ */
+export declare function useDragCursor(dragging: Accessor<boolean>, orientation: Accessor<ResizableOrientation>): void;