@neut/ui 0.0.17 → 0.0.18

package/dist/components/radio-group/RadioGroupItem/RadioGroupItem.js

@@ -63,6 +63,9 @@ function m(o) {
 			},
 			get class() {
 				return e("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border border-input outline-none transition-colors", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary", "dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", "data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", h.class);
+			},
+			get classList() {
+				return h.classList;
 			}
 		}, g), !1, !0), r(t, n(c, {
 			get when() {

package/dist/components/radio-group/RadioGroupItem/RadioGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupItem.js","names":["Show","createMemo","onCleanup","splitProps","clsx","useRadioGroupContext","RadioGroupItemProps","RadioGroupItem","props","ctx","local","rest","checked","value","isDisabled","disabled","select","setValue","unregister","attachListeners","el","HTMLButtonElement","onClick","onKeyDown","e","KeyboardEvent","key","preventDefault","includes","group","closest","HTMLElement","values","Array","from","querySelectorAll","map","item","dataset","filter","undefined","length","currentIndex","indexOf","direction","nextIndex","nextValue","focusItem","addEventListener","registerItem","removeEventListener","_el$","_tmpl$2","_$use","_$spread","_$mergeProps","aria-checked","data-value","data-checked","style","dir","class","_$insert","_$createComponent","when","children","_tmpl$","_$mergeProps","_$createComponent","_tmpl$","_tmpl$2","RadioGroupItem","ctx","useRadioGroupContext","local","rest","splitProps","props","checked","createMemo","isDisabled","select","unregister","attachListeners","onClick","onKeyDown","e","group","el","values","item","value","nextValue","onCleanup","_el$","use","spread","mergeProps","\"class\"","clsx","insert","createComponent","Show"],"sources":["../../../../src/components/radio-group/RadioGroupItem/RadioGroupItem.tsx"],"sourcesContent":["import { Show, createMemo, onCleanup, splitProps } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { useRadioGroupContext } from \"../RadioGroup\";\nimport type { RadioGroupItemProps } from \"./RadioGroupItem.types\";\n\n/**\n * RadioGroupItem：一个 role=\"radio\" 的按钮。选中时内部渲染指示圆点。\n * 通过 context 读取 RadioGroup 的选中值和禁用状态，支持受控/非受控。\n */\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n  const ctx = useRadioGroupContext(\"RadioGroupItem\");\n\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"disabled\",\n    \"class\",\n    \"classList\",\n    \"style\",\n    \"dir\",\n    \"children\",\n  ]);\n\n  const checked = createMemo(() => ctx.value() === local.value);\n  const isDisabled = () => ctx.disabled() || !!local.disabled;\n\n  const select = () => {\n    if (isDisabled()) return;\n    ctx.setValue(local.value);\n  };\n\n  let unregister: (() => void) | undefined;\n\n  const attachListeners = (el: HTMLButtonElement) => {\n    const onClick = () => select();\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (isDisabled()) return;\n      if (e.key === \"Enter\" || e.key === \" \") {\n        e.preventDefault();\n        select();\n        return;\n      }\n\n      if ([\"ArrowDown\", \"ArrowRight\", \"ArrowUp\", \"ArrowLeft\"].includes(e.key)) {\n        e.preventDefault();\n        const group = el.closest<HTMLElement>('[data-slot=\"radio-group\"]');\n        const values = Array.from(\n          group?.querySelectorAll<HTMLElement>(\n            '[data-slot=\"radio-group-item\"]',\n          ) ?? [],\n        )\n          .map((item) => item.dataset.value)\n          .filter((value): value is string => value !== undefined);\n        if (values.length === 0) return;\n        const currentIndex = values.indexOf(local.value);\n        const direction =\n          e.key === \"ArrowDown\" || e.key === \"ArrowRight\" ? 1 : -1;\n        const nextIndex =\n          (currentIndex + direction + values.length) % values.length;\n        const nextValue = values[nextIndex];\n        ctx.setValue(nextValue);\n        ctx.focusItem(nextValue);\n      }\n    };\n\n    el.addEventListener(\"click\", onClick);\n    el.addEventListener(\"keydown\", onKeyDown);\n    unregister = ctx.registerItem(local.value, el);\n\n    onCleanup(() => {\n      el.removeEventListener(\"click\", onClick);\n      el.removeEventListener(\"keydown\", onKeyDown);\n      unregister?.();\n    });\n  };\n\n  return (\n    <button\n      ref={attachListeners}\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={checked()}\n      data-slot=\"radio-group-item\"\n      data-value={local.value}\n      data-checked={checked() ? \"\" : undefined}\n      disabled={isDisabled()}\n      style={local.style}\n      dir={local.dir}\n      class={clsx(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border border-input outline-none transition-colors\",\n        \"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary\",\n        \"dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        \"data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        local.class,\n      )}\n      {...rest}\n    >\n      <Show when={checked()}>\n        <span\n          data-slot=\"radio-group-indicator\"\n          class=\"size-2 rounded-full bg-primary-foreground\"\n        />\n      </Show>\n    </button>\n  );\n}\n"],"mappings":";;;;;;AASA,SAAgBO,EAAeC,GAA4B;CACzD,IAAMC,IAAMJ,EAAqB,gBAAgB,GAE3C,CAACK,GAAOC,KAAQR,EAAWK,GAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEKI,IAAUX,QAAiBQ,EAAII,MAAM,MAAMH,EAAMG,KAAK,GACtDC,UAAmBL,EAAIM,SAAS,KAAK,CAAC,CAACL,EAAMK,UAE7CC,UAAe;EACnB,AAAIF,EAAW,KACfL,EAAIQ,SAASP,EAAMG,KAAK;CAC1B,GAEIK,GAEEC,KAAmBC,MAA0B;EACjD,IAAME,UAAgBN,EAAO,GACvBO,KAAaC,MAAqB;GACtC,IAAIV,GAAW,GACf;QAAIU,EAAEE,QAAQ,WAAWF,EAAEE,QAAQ,KAAK;KAEtCV,AADAQ,EAAEG,eAAe,GACjBX,EAAO;KACP;IACF;IAEA,IAAI;KAAC;KAAa;KAAc;KAAW;IAAW,CAAC,CAACY,SAASJ,EAAEE,GAAG,GAAG;KACvEF,EAAEG,eAAe;KACjB,IAAME,IAAQT,EAAGU,QAAqB,6BAA2B,GAC3DE,IAASC,MAAMC,KACnBL,GAAOM,iBACL,kCACF,KAAK,CAAA,CACP,CAAC,CACEC,KAAKC,MAASA,EAAKC,QAAQzB,KAAK,CAAC,CACjC0B,QAAQ1B,MAA2BA,MAAU2B,KAAAA,CAAS;KACzD,IAAIR,EAAOS,WAAW,GAAG;KAMzB,IAAMK,IAAYd,GALGA,EAAOW,QAAQjC,EAAMG,KAIvC6B,KAFDlB,EAAEE,QAAQ,eAAeF,EAAEE,QAAQ,eAAe,IAAI,MAE1BM,EAAOS,UAAUT,EAAOS;KAGtDhC,AADAA,EAAIQ,SAAS6B,CAAS,GACtBrC,EAAIsC,UAAUD,CAAS;IACzB;GArBA;EAsBF;EAMA5C,AAJAkB,EAAG4B,iBAAiB,SAAS1B,CAAO,GACpCF,EAAG4B,iBAAiB,WAAWzB,CAAS,GACxCL,IAAaT,EAAIwC,aAAavC,EAAMG,OAAOO,CAAE,GAE7ClB,QAAgB;GAGdgB,AAFAE,EAAG8B,oBAAoB,SAAS5B,CAAO,GACvCF,EAAG8B,oBAAoB,WAAW3B,CAAS,GAC3CL,IAAa;EACf,CAAC;CACH;CAEA,cAAA;EAAA,IAAAiC,IAAAC,EAAA;EAuByB,OAvBzBC,EAESlC,GAAegC,CAAA,GAAAG,EAAAH,GAAAI,EAAA;GAAA,IAAA,iBAAA;IAAA,OAGN3C,EAAQ;GAAC;GAAA,IAAA,eAAA;IAAA,OAEXF,EAAMG;GAAK;GAAA,IAAA,iBAAA;IAAA,OACTD,EAAQ,IAAI,KAAK4B,KAAAA;GAAS;GAAA,IACxCzB,WAAQ;IAAA,OAAED,EAAW;GAAC;GAAA,IACtB6C,QAAK;IAAA,OAAEjD,EAAMiD;GAAK;GAAA,IAClBC,MAAG;IAAA,OAAElD,EAAMkD;GAAG;GAAA,IAAAsC,QAAA;IAAA,OACP9F,EACL,uKACA,6EACA,mDACA,iIACA,kGACA,yHACAM,EAAMmD,KACR;GAAC;EAAA,GACGlD,CAAI,GAAA,IAAA,EAAA,GAAAmD,EAAAX,GAAAY,EAEP/D,GAAI;GAAA,IAACgE,OAAI;IAAA,OAAEpD,EAAQ;GAAC;GAAA,IAAAqD,WAAA;IAAA,OAAAC,EAAA;GAAA;EAAA,CAAA,CAAA,GAAAf;CAAA,EAAA,CAAA;AAQ3B"}
+{"version":3,"file":"RadioGroupItem.js","names":["Show","createMemo","onCleanup","splitProps","clsx","useRadioGroupContext","RadioGroupItemProps","RadioGroupItem","props","ctx","local","rest","checked","value","isDisabled","disabled","select","setValue","unregister","attachListeners","el","HTMLButtonElement","onClick","onKeyDown","e","KeyboardEvent","key","preventDefault","includes","group","closest","HTMLElement","values","Array","from","querySelectorAll","map","item","dataset","filter","undefined","length","currentIndex","indexOf","direction","nextIndex","nextValue","focusItem","addEventListener","registerItem","removeEventListener","_el$","_tmpl$2","_$use","_$spread","_$mergeProps","aria-checked","data-value","data-checked","style","dir","class","classList","_$insert","_$createComponent","when","children","_tmpl$","_$mergeProps","_$createComponent","_tmpl$","_tmpl$2","RadioGroupItem","ctx","useRadioGroupContext","local","rest","splitProps","props","checked","createMemo","isDisabled","select","unregister","attachListeners","onClick","onKeyDown","e","group","el","values","item","value","nextValue","onCleanup","_el$","use","spread","mergeProps","\"class\"","clsx","insert","createComponent","Show"],"sources":["../../../../src/components/radio-group/RadioGroupItem/RadioGroupItem.tsx"],"sourcesContent":["import { Show, createMemo, onCleanup, splitProps } from \"solid-js\";\nimport { clsx } from \"~/utils\";\nimport { useRadioGroupContext } from \"../RadioGroup\";\nimport type { RadioGroupItemProps } from \"./RadioGroupItem.types\";\n\n/**\n * RadioGroupItem：一个 role=\"radio\" 的按钮。选中时内部渲染指示圆点。\n * 通过 context 读取 RadioGroup 的选中值和禁用状态，支持受控/非受控。\n */\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n  const ctx = useRadioGroupContext(\"RadioGroupItem\");\n\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"disabled\",\n    \"class\",\n    \"classList\",\n    \"style\",\n    \"dir\",\n    \"children\",\n  ]);\n\n  const checked = createMemo(() => ctx.value() === local.value);\n  const isDisabled = () => ctx.disabled() || !!local.disabled;\n\n  const select = () => {\n    if (isDisabled()) return;\n    ctx.setValue(local.value);\n  };\n\n  let unregister: (() => void) | undefined;\n\n  const attachListeners = (el: HTMLButtonElement) => {\n    const onClick = () => select();\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (isDisabled()) return;\n      if (e.key === \"Enter\" || e.key === \" \") {\n        e.preventDefault();\n        select();\n        return;\n      }\n\n      if ([\"ArrowDown\", \"ArrowRight\", \"ArrowUp\", \"ArrowLeft\"].includes(e.key)) {\n        e.preventDefault();\n        const group = el.closest<HTMLElement>('[data-slot=\"radio-group\"]');\n        const values = Array.from(\n          group?.querySelectorAll<HTMLElement>(\n            '[data-slot=\"radio-group-item\"]',\n          ) ?? [],\n        )\n          .map((item) => item.dataset.value)\n          .filter((value): value is string => value !== undefined);\n        if (values.length === 0) return;\n        const currentIndex = values.indexOf(local.value);\n        const direction =\n          e.key === \"ArrowDown\" || e.key === \"ArrowRight\" ? 1 : -1;\n        const nextIndex =\n          (currentIndex + direction + values.length) % values.length;\n        const nextValue = values[nextIndex];\n        ctx.setValue(nextValue);\n        ctx.focusItem(nextValue);\n      }\n    };\n\n    el.addEventListener(\"click\", onClick);\n    el.addEventListener(\"keydown\", onKeyDown);\n    unregister = ctx.registerItem(local.value, el);\n\n    onCleanup(() => {\n      el.removeEventListener(\"click\", onClick);\n      el.removeEventListener(\"keydown\", onKeyDown);\n      unregister?.();\n    });\n  };\n\n  return (\n    <button\n      ref={attachListeners}\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={checked()}\n      data-slot=\"radio-group-item\"\n      data-value={local.value}\n      data-checked={checked() ? \"\" : undefined}\n      disabled={isDisabled()}\n      style={local.style}\n      dir={local.dir}\n      class={clsx(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border border-input outline-none transition-colors\",\n        \"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary\",\n        \"dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        \"data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        local.class,\n      )}\n      classList={local.classList}\n      {...rest}\n    >\n      <Show when={checked()}>\n        <span\n          data-slot=\"radio-group-indicator\"\n          class=\"size-2 rounded-full bg-primary-foreground\"\n        />\n      </Show>\n    </button>\n  );\n}\n"],"mappings":";;;;;;AASA,SAAgBO,EAAeC,GAA4B;CACzD,IAAMC,IAAMJ,EAAqB,gBAAgB,GAE3C,CAACK,GAAOC,KAAQR,EAAWK,GAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX,GAEKI,IAAUX,QAAiBQ,EAAII,MAAM,MAAMH,EAAMG,KAAK,GACtDC,UAAmBL,EAAIM,SAAS,KAAK,CAAC,CAACL,EAAMK,UAE7CC,UAAe;EACnB,AAAIF,EAAW,KACfL,EAAIQ,SAASP,EAAMG,KAAK;CAC1B,GAEIK,GAEEC,KAAmBC,MAA0B;EACjD,IAAME,UAAgBN,EAAO,GACvBO,KAAaC,MAAqB;GACtC,IAAIV,GAAW,GACf;QAAIU,EAAEE,QAAQ,WAAWF,EAAEE,QAAQ,KAAK;KAEtCV,AADAQ,EAAEG,eAAe,GACjBX,EAAO;KACP;IACF;IAEA,IAAI;KAAC;KAAa;KAAc;KAAW;IAAW,CAAC,CAACY,SAASJ,EAAEE,GAAG,GAAG;KACvEF,EAAEG,eAAe;KACjB,IAAME,IAAQT,EAAGU,QAAqB,6BAA2B,GAC3DE,IAASC,MAAMC,KACnBL,GAAOM,iBACL,kCACF,KAAK,CAAA,CACP,CAAC,CACEC,KAAKC,MAASA,EAAKC,QAAQzB,KAAK,CAAC,CACjC0B,QAAQ1B,MAA2BA,MAAU2B,KAAAA,CAAS;KACzD,IAAIR,EAAOS,WAAW,GAAG;KAMzB,IAAMK,IAAYd,GALGA,EAAOW,QAAQjC,EAAMG,KAIvC6B,KAFDlB,EAAEE,QAAQ,eAAeF,EAAEE,QAAQ,eAAe,IAAI,MAE1BM,EAAOS,UAAUT,EAAOS;KAGtDhC,AADAA,EAAIQ,SAAS6B,CAAS,GACtBrC,EAAIsC,UAAUD,CAAS;IACzB;GArBA;EAsBF;EAMA5C,AAJAkB,EAAG4B,iBAAiB,SAAS1B,CAAO,GACpCF,EAAG4B,iBAAiB,WAAWzB,CAAS,GACxCL,IAAaT,EAAIwC,aAAavC,EAAMG,OAAOO,CAAE,GAE7ClB,QAAgB;GAGdgB,AAFAE,EAAG8B,oBAAoB,SAAS5B,CAAO,GACvCF,EAAG8B,oBAAoB,WAAW3B,CAAS,GAC3CL,IAAa;EACf,CAAC;CACH;CAEA,cAAA;EAAA,IAAAiC,IAAAC,EAAA;EAwByB,OAxBzBC,EAESlC,GAAegC,CAAA,GAAAG,EAAAH,GAAAI,EAAA;GAAA,IAAA,iBAAA;IAAA,OAGN3C,EAAQ;GAAC;GAAA,IAAA,eAAA;IAAA,OAEXF,EAAMG;GAAK;GAAA,IAAA,iBAAA;IAAA,OACTD,EAAQ,IAAI,KAAK4B,KAAAA;GAAS;GAAA,IACxCzB,WAAQ;IAAA,OAAED,EAAW;GAAC;GAAA,IACtB6C,QAAK;IAAA,OAAEjD,EAAMiD;GAAK;GAAA,IAClBC,MAAG;IAAA,OAAElD,EAAMkD;GAAG;GAAA,IAAAuC,QAAA;IAAA,OACP/F,EACL,uKACA,6EACA,mDACA,iIACA,kGACA,yHACAM,EAAMmD,KACR;GAAC;GAAA,IACDC,YAAS;IAAA,OAAEpD,EAAMoD;GAAS;EAAA,GACtBnD,CAAI,GAAA,IAAA,EAAA,GAAAoD,EAAAZ,GAAAa,EAEPhE,GAAI;GAAA,IAACiE,OAAI;IAAA,OAAErD,EAAQ;GAAC;GAAA,IAAAsD,WAAA;IAAA,OAAAC,EAAA;GAAA;EAAA,CAAA,CAAA,GAAAhB;CAAA,EAAA,CAAA;AAQ3B"}

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

@@ -3,10 +3,9 @@ interface Options {
     onDragging?: (dragging: boolean) => void;
 }
 /**
- * Handle 的拖拽与键盘交互:
- * - pointer capture 保证指针移出元素后仍能继续拖拽;
- * - pointermove 用 rAF 合并,避免每个事件都写一次 store(布局抖动);
- * - px -> % 用 group 主轴尺寸换算,横向在 RTL 下取反。
+ * Handle 的交互接线：指针拖拽交给 `createHandleDrag`（capture + rAF 合并），
+ * 键盘调整交给 `handleResizableHandleKeyDown`；本 hook 只负责把
+ * panel group 的 context 与自身 props 转接过去。
  */
 export declare function useResizableHandle(options: Options): {
     onPointerDown: (event: PointerEvent) => void;

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

@@ -1,72 +1,39 @@
 import { useResizablePanelGroupContext as e } from "../resizable.context.js";
-import { onCleanup as t } from "solid-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 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();
-		},
+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 (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();
+			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 { n as useResizableHandle };
+export { i as useResizableHandle };
 
 //# sourceMappingURL=useResizableHandle.js.map

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

@@ -1 +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":";;;AAuBA,SAAgBA,EAAmB,GAAkB;CACnD,IAAMC,IAAMC,EAA8B,iBAAiB,GACvDC;CAEJ,QAAgB;EAEd,AADIA,GAAM,SAAS,QAAM,qBAAqBA,EAAK,KAAK,GACxD,IAAO,KAAA;CACT,CAAC;CAED,IAAMC,KAAkB,MACtBH,EAAI,YAAY,MAAM,eAAeI,EAAM,UAAUA,EAAM,SAEvDC,UACAL,EAAI,YAAY,MAAM,gBACnBA,EAAI,MAAM,IAAI,KAAK,GAGtBM,UAAc;EAClB,AAAKJ,MACL,EAAK,QAAQ,MACTA,EAAK,YAAY,QAAMF,EAAI,gBAAgBE,EAAK,QAAQA,EAAK,OAAO;CAC1E;CA+FA,OAAO;EAAE,gBA7Fc,MAAwB;GAC7C,IAAIK,EAAQ,SAAS,KAAKH,EAAM,WAAW,GAAG;GAC9C,IAAMI,IAASJ,EAAM,eACfK,IAAWT,EAAI,gBAAgBQ,CAAM;GAC3C,AAAKC,MACLL,EAAM,eAAe,GACrBI,EAAO,kBAAkBJ,EAAM,SAAS,GACxC,IAAO;IACL,WAAWA,EAAM;IACjB;IACA,iBAAiBD,EAAeC,CAAK;IACrC,eAAeK,EAAS;IACxB,OAAO;IACP,SAAS;GACX,GACAT,EAAI,UAAU,GACdO,EAAQ,aAAa,EAAI;EAC3B;EA4EwB,gBA1ED,MAAwB;GAG7C,IAFI,CAACL,KAAQA,EAAK,cAAcE,EAAM,aAElC,CADWA,EAAM,cACT,kBAAkBA,EAAM,SAAS,GAAG;GAChD,IAAMM,IAASV,EAAI,YAAY,KAAK,GAC9BW,KAAWR,EAAeC,CAAK,IAAIF,EAAK,mBAAmBG,EAAS;GAE1E,AADA,EAAK,UAAUH,EAAK,gBAAiBS,IAAUD,IAAU,KACrDR,EAAK,UAAU,SACjB,EAAK,QAAQ,sBAAsBI,CAAK;EAE5C;EAgEuC,cA9DtB,MAAwB;GACvC,IAAI,CAACJ,KAAQA,EAAK,cAAcE,EAAM,WAAW;GACjD,IAAMI,IAASJ,EAAM;GAYrB,AAXIF,EAAK,UAAU,SACjB,qBAAqBA,EAAK,KAAK,GAC/B,EAAK,QAAQ,MACTA,EAAK,YAAY,QAAMF,EAAI,gBAAgBE,EAAK,QAAQA,EAAK,OAAO,IAEtEM,EAAO,kBAAkBJ,EAAM,SAAS,KAC1CI,EAAO,sBAAsBJ,EAAM,SAAS,GAE9C,IAAO,KAAA,GACPJ,EAAI,QAAQ,GACZO,EAAQ,aAAa,EAAK,GAC1BP,EAAI,aAAa;EACnB;EA+C6D,YA7C1C,MAAyB;GAC1C,IAAIO,EAAQ,SAAS,GAAG;GACxB,IAAMC,IAASJ,EAAM,eACfQ,IAAQZ,EAAI,iBAAiB,KAAKA,EAAI,YAAY,KAAK,KAAM,KAC7Da,IAAMb,EAAI,YAAY,MAAM,gBAAgBA,EAAI,MAAM,GACxDc,IAAU;GACd,QAAQV,EAAM,KAAd;IACE,KAAK;KACH,EAAI,cAAcI,GAAQK,IAAMD,IAAO,CAACA,CAAI;KAC5C;IACF,KAAK;KACH,EAAI,cAAcJ,GAAQK,IAAM,CAACD,IAAOA,CAAI;KAC5C;IACF,KAAK;KACH,EAAI,cAAcJ,GAAQ,CAACI,CAAI;KAC/B;IACF,KAAK;KACH,EAAI,cAAcJ,GAAQI,CAAI;KAC9B;IACF,KAAK;KAEH,AADiBZ,EAAI,gBAAgBQ,CACjC,MACFR,EAAI,gBAAgBQ,GAAQ,CAAC,GAC7BR,EAAI,aAAa;KAEnB;IAEF,KAAK,OAAO;KACV,IAAMS,IAAWT,EAAI,gBAAgBQ,CAAM;KAC3C,AAAIC,MACFT,EAAI,gBAAgBQ,GAAQC,EAAS,KAAK,GAC1CT,EAAI,aAAa;KAEnB;IACF;IACA,KAAK;IACL,KAAK;KACH,EAAI,qBAAqBQ,CAAM;KAC/B;IACF,SACE,IAAU;GACd;GACA,AAAIM,KAASV,EAAM,eAAe;EACpC;CAEuE;AACzE"}
+{"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

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

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

@@ -1,17 +1,18 @@
 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 { 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, onCleanup as f, splitProps as p } from "solid-js";
+import { createUniqueId as u, mergeProps as d, splitProps as f } from "solid-js";
 //#region src/components/resizable/ResizablePanel/ResizablePanel.tsx
-var m = /*#__PURE__*/ c("<div>");
-function h(c) {
-	let h = t("ResizablePanel"), g = d({
+var p = /*#__PURE__*/ c("<div>");
+function m(c) {
+	let m = t("ResizablePanel"), h = d({
 		minSize: 0,
 		maxSize: 100,
 		collapsible: !1,
 		collapsedSize: 0
-	}, c), [_, v] = p(g, [
+	}, c), [g, _] = f(h, [
 		"id",
 		"defaultSize",
 		"minSize",
@@ -26,66 +27,38 @@ function h(c) {
 		"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(";");
-	};
+	]), v = g.id ?? u(), { size: y, register: b } = i({
+		ctx: m,
+		id: v,
+		local: g
+	});
 	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, {
+		var t = p();
+		return l(b, t), s(t, o(_, {
 			get id() {
-				return _.id;
+				return g.id;
 			},
 			"data-slot": "resizable-panel",
-			"data-panel-id": y,
+			"data-panel-id": v,
 			get "data-panel-size"() {
-				return r(x());
+				return r(y());
 			},
 			get "data-panel-collapsed"() {
-				return h.isPanelCollapsed(y) ? "" : void 0;
+				return m.isPanelCollapsed(v) ? "" : void 0;
 			},
 			get style() {
-				return S();
+				return n(y(), g.style);
 			},
 			get class() {
-				return e("relative min-h-0 min-w-0 overflow-hidden", _.class);
+				return e("relative min-h-0 min-w-0 overflow-hidden", g.class);
 			},
 			get classList() {
-				return _.classList;
+				return g.classList;
 			}
-		}), !1, !0), a(t, () => _.children), t;
+		}), !1, !0), a(t, () => g.children), t;
 	})();
 }
 //#endregion
-export { h as ResizablePanel };
+export { m as ResizablePanel };
 
 //# sourceMappingURL=ResizablePanel.js.map

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

@@ -1 +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"}
+{"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/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

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