@xbeeant/form-engine-designer 0.0.2 → 0.0.4

package/dist/es/property-panel.js

@@ -0,0 +1,294 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { useForm as W, NexusForm as E } from "@xbeeant/form-engine-react";
+import { registerAntdUI as T } from "@xbeeant/form-engine-ui";
+import { Input as A } from "antd";
+import { useMemo as P, useCallback as b, useState as D, useRef as C, useEffect as K } from "react";
+import { useDesigner as B } from "./designer-context.js";
+import { dependencyPropertyFields as I, reactionPropertyFields as M, validationPropertyFields as $, commonPropertyFields as z } from "./property/basic-property.js";
+import { getNodeAtProperties as U, extractFormLevelConfig as q, flattenNodeForPropertyEditor as j, diffPropertyPatch as G } from "./schema-utils.js";
+import { propertyWidgets as H } from "./widgets/index.js";
+function J({
+  schema: o,
+  initialValues: e,
+  onValuesChange: r
+}) {
+  const [s] = W(), a = s._getEngine();
+  T(a);
+  const i = C(/* @__PURE__ */ new Set()), d = b(
+    (t, l, u) => {
+      u && i.current.add(u), r(
+        t,
+        i.current
+      );
+    },
+    [r]
+  );
+  return /* @__PURE__ */ n(
+    E,
+    {
+      footer: !1,
+      form: s,
+      schema: o,
+      initialValues: e,
+      watch: { "#": d },
+      widgets: H
+    }
+  );
+}
+const F = {
+  displayType: {
+    widget: "select",
+    type: "string",
+    title: "表单布局方向（displayType）",
+    props: {
+      options: [
+        { label: "水平（row）", value: "row" },
+        { label: "垂直（column）", value: "column" },
+        { label: "行内（inline）", value: "inline" }
+      ]
+    }
+  },
+  labelWidth: {
+    widget: "input",
+    type: "string",
+    title: "label 宽度（labelWidth）",
+    placeholder: "如 120 或 20%"
+  },
+  colon: {
+    widget: "switch",
+    type: "boolean",
+    title: "显示冒号（colon）",
+    default: !0
+  },
+  label: {
+    widget: "switch",
+    type: "boolean",
+    title: "显示 label（label）",
+    default: !0
+  },
+  readOnly: {
+    widget: "switch",
+    type: "boolean",
+    title: "整个表单只读（readOnly）",
+    default: !1
+  },
+  column: {
+    widget: "number",
+    type: "number",
+    title: "每行显示列数（column）",
+    default: 1
+  }
+}, Q = {
+  column: { widget: "number", type: "number", title: "列数（column）" },
+  gap: { widget: "number", type: "number", title: "间距（gap）" },
+  direction: {
+    widget: "select",
+    type: "string",
+    title: "方向（direction）",
+    props: {
+      options: [
+        { label: "水平", value: "row" },
+        { label: "垂直", value: "column" }
+      ]
+    }
+  }
+};
+function m(o, e, r) {
+  return {
+    [o]: {
+      type: "collapsePanel",
+      title: e,
+      properties: r
+    }
+  };
+}
+function X({ oldKey: o, locked: e, onRename: r }) {
+  const [s, a] = D(o), i = C(o);
+  if (K(() => {
+    o !== i.current && (i.current = o, a(o));
+  }, [o]), e)
+    return /* @__PURE__ */ c("div", { className: "mb-3 flex items-center justify-between gap-2 rounded-lg border border-[#f0f0f0] bg-[#fafafa] px-3 py-2", children: [
+      /* @__PURE__ */ c("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ n("div", { className: "mb-0.5 text-[11px] text-[#999]", children: "字段标识（key）" }),
+        /* @__PURE__ */ n("code", { className: "break-all font-mono text-[13px] text-[#333]", children: o })
+      ] }),
+      /* @__PURE__ */ n("span", { className: "shrink-0 rounded bg-[#f0f0f0] px-1.5 py-0.5 text-[11px] text-[#999]", children: "🔒 锁定" })
+    ] });
+  const d = (t) => {
+    i.current = t, a(t), r(t);
+  };
+  return /* @__PURE__ */ c("div", { className: "mb-3", children: [
+    /* @__PURE__ */ n("div", { className: "mb-1.5 text-[11px] text-[#999]", children: "字段标识（key）" }),
+    /* @__PURE__ */ n(
+      A,
+      {
+        size: "small",
+        value: s,
+        onChange: (t) => {
+          const l = (t.target.value || "").trim();
+          d(l);
+        },
+        className: "nexus-key-input"
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: "mt-1 text-[11px] text-[#c0c4cc]", children: "用于数据路径与联动引用，修改后自动迁移子节点" })
+  ] });
+}
+function ce() {
+  const {
+    schema: o,
+    selectedPath: e,
+    updateNode: r,
+    renameNode: s,
+    selectNode: a,
+    setSchema: i,
+    propertySchemaMap: d
+  } = B(), t = e && e.length > 0 ? U(o.properties, e) : void 0, l = !e || e.length === 0, u = `node_${(e || []).join("_")}_${t?.type || "root"}`, g = e?.[e.length - 1] ?? "", L = t?._lockedKey === !0, x = t ? t.widget || t.type : null, R = P(() => {
+    if (l)
+      return {
+        type: "object",
+        properties: F,
+        displayType: "column"
+      };
+    const p = d[x] || Q;
+    return {
+      type: "object",
+      properties: {
+        sectionProperty: {
+          widget: "collapse",
+          props: {
+            defaultActiveKey: [
+              "sectionCommon",
+              "sectionFieldProps",
+              "sectionValidation",
+              "sectionReaction",
+              "sectionDependency"
+            ]
+          },
+          type: "collapse",
+          properties: {
+            ...m(
+              "sectionCommon",
+              "通用属性",
+              z
+            ),
+            ...m(
+              "sectionFieldProps",
+              "组件属性",
+              p
+            ),
+            ...m(
+              "sectionValidation",
+              "校验配置",
+              $
+            ),
+            ...m(
+              "sectionReaction",
+              "联动配置",
+              M
+            ),
+            ...m(
+              "sectionDependency",
+              "依赖配置",
+              I
+            )
+          }
+        }
+      },
+      displayType: "column"
+    };
+  }, [l, x, d]), f = P(
+    () => q(
+      o,
+      Object.keys(F)
+    ),
+    [o]
+  ), _ = b(
+    (p, S) => {
+      const V = t ? j(
+        t
+      ) : f, y = G(V, p, S);
+      if (Object.keys(y).length === 0)
+        return;
+      if (!e || e.length === 0) {
+        const h = { ...o };
+        for (const [k, N] of Object.entries(y))
+          N === void 0 ? delete h[k] : h[k] = N;
+        i(h);
+        return;
+      }
+      const { key: Y, ...v } = y;
+      Object.keys(v).length > 0 && r(e, v);
+    },
+    [
+      e,
+      r,
+      i,
+      o,
+      t,
+      f
+    ]
+  ), O = b(
+    (p) => {
+      !e || e.length === 0 || s(e, p);
+    },
+    [e, s]
+  ), w = t ? (t.widget || t.type || "").toLowerCase() : "";
+  return /* @__PURE__ */ c("div", { className: "flex h-full flex-col border-l border-[#f0f0f0] bg-white", children: [
+    /* @__PURE__ */ c("div", { className: "flex items-center justify-between border-b border-[#f0f0f0] px-4 py-2.5", children: [
+      /* @__PURE__ */ c("div", { className: "pl-5 flex min-w-0 items-center gap-1 h-6", children: [
+        !l && /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: () => a(null),
+            className: "-ml-1 mr-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-[#999] transition-colors hover:bg-[#f0f0f0] hover:text-[#333]",
+            title: "返回表单属性",
+            children: /* @__PURE__ */ n(
+              "svg",
+              {
+                width: "12",
+                height: "12",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ n("polyline", { points: "15 18 9 12 15 6" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ n("span", { className: "truncate text-[13px] font-semibold text-[#333]", children: l ? "表单属性" : "节点属性" })
+      ] }),
+      !l && w && /* @__PURE__ */ n("span", { className: "ml-2 shrink-0 rounded-md bg-[#e8f1ff] px-1.5 py-0.5 text-[11px] text-[#1677ff]", children: w })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "nexus-property-body flex-1 overflow-y-auto px-4 py-3", children: [
+      !l && g && /* @__PURE__ */ n(
+        X,
+        {
+          oldKey: g,
+          locked: L,
+          onRename: O
+        }
+      ),
+      /* @__PURE__ */ n(
+        J,
+        {
+          schema: R,
+          initialValues: t ? j(
+            t
+          ) : f,
+          onValuesChange: _
+        },
+        u
+      )
+    ] })
+  ] });
+}
+export {
+  ce as PropertyPanel
+};
+//# sourceMappingURL=property-panel.js.map

package/dist/es/property-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"property-panel.js","sources":["../../src/property-panel.tsx"],"sourcesContent":["// ============================================================================\n// @xbeeant/form-engine-designer — 右侧属性配置面板\n// 属性定义采用「描述符驱动」：\n//   - 组件（widget）属性来自外部传入的 propertySchemaMap（key 为 widget 名，\n//     值为该组件的属性字段定义，示例见 @xbeeant/form-engine-ui/src/schema/*-schema.ts）\n//   - 通用 / 校验 / 依赖分区在 ./property/basic-property.ts 中定义\n//   - 布局节点与表单级属性在下方 formLevelProps / layoutBasicProps 内联定义\n//\n// 编辑流程（与 schemaUtils 的读/写通路对应）：\n//   flattenNodeForPropertyEditor  → 节点 → 扁平 initialValues（读）\n//   updateNodeWithNesting         → 扁平 patch → 节点（写，split schema级/props级）\n//   PropertyForm 通过 NexusForm 渲染 propertySchema 描述符驱动的表单\n// ============================================================================\n\nimport type { NexusSchema, SchemaNode } from '@xbeeant/form-engine';\nimport { NexusForm, useForm } from '@xbeeant/form-engine-react';\nimport { registerAntdUI } from '@xbeeant/form-engine-ui';\nimport { Input } from 'antd';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useDesigner } from './designer-context';\nimport {\n  commonPropertyFields,\n  dependencyPropertyFields,\n  reactionPropertyFields,\n  validationPropertyFields,\n} from './property/basic-property.ts';\nimport {\n  diffPropertyPatch,\n  extractFormLevelConfig,\n  flattenNodeForPropertyEditor,\n  getNodeAtProperties,\n} from './schema-utils';\nimport { propertyWidgets } from './widgets';\n\n// ────────────────────────────────────────────────────────────────────────────\n// PropertyForm — 属性表单容器\n// Designer 的自定义属性编辑器独立于 form-engine 的渲染系统\n// ────────────────────────────────────────────────────────────────────────────\n\ninterface PropertyFormProps {\n  schema: NexusSchema;\n  initialValues: Record<string, unknown>;\n  onValuesChange: (\n    allValues: Record<string, unknown>,\n    changedFields: ReadonlySet<string>,\n  ) => void;\n}\n\nfunction PropertyForm({\n  schema,\n  initialValues,\n  onValuesChange,\n}: PropertyFormProps) {\n  const [form] = useForm();\n  const engine = form._getEngine();\n\n  // 注册 antd 基础 widget（select/input/switch/number/textarea/collapse/collapsePanel）\n  registerAntdUI(engine);\n  // 记录本表单实例中用户实际改动过的字段（组件随 formKey 重建，节点切换时自动重置）。\n  // 用于区分「未触碰的字符串默认值 ''」与「用户主动清空」——\n  // 后者需要回写 schema（删除属性），前者写回会污染 schema（如 bind:'' 导致数据 key 丢失）。\n  const changedFieldsRef = useRef<Set<string>>(new Set());\n  // '#' 全局 watcher 由 FormController._onFieldValueChange 调用，\n  // 前两个参数为 (globalData, globalData)，第三参为本次实际变更的字段路径\n  const handleWatch = useCallback(\n    (value: unknown, _allValues: unknown, changedPath?: string) => {\n      if (changedPath) {\n        changedFieldsRef.current.add(changedPath);\n      }\n      onValuesChange(\n        value as Record<string, unknown>,\n        changedFieldsRef.current,\n      );\n    },\n    [onValuesChange],\n  );\n\n  return (\n    <NexusForm\n      footer={false}\n      form={form}\n      schema={schema}\n      initialValues={initialValues}\n      watch={{ '#': handleWatch }}\n      widgets={propertyWidgets}\n    />\n  );\n}\n\n// ────────────────────────────────────────────────────────────────────────────\n// 表单级属性（未选中节点时编辑 NexusSchema 顶层配置）\n// ────────────────────────────────────────────────────────────────────────────\n\nconst formLevelProps: Record<string, SchemaNode> = {\n  displayType: {\n    widget: 'select',\n    type: 'string',\n    title: '表单布局方向（displayType）',\n    props: {\n      options: [\n        { label: '水平（row）', value: 'row' },\n        { label: '垂直（column）', value: 'column' },\n        { label: '行内（inline）', value: 'inline' },\n      ],\n    },\n  },\n  labelWidth: {\n    widget: 'input',\n    type: 'string',\n    title: 'label 宽度（labelWidth）',\n    placeholder: '如 120 或 20%',\n  },\n  colon: {\n    widget: 'switch',\n    type: 'boolean',\n    title: '显示冒号（colon）',\n    default: true,\n  },\n  label: {\n    widget: 'switch',\n    type: 'boolean',\n    title: '显示 label（label）',\n    default: true,\n  },\n  readOnly: {\n    widget: 'switch',\n    type: 'boolean',\n    title: '整个表单只读（readOnly）',\n    default: false,\n  },\n  column: {\n    widget: 'number',\n    type: 'number',\n    title: '每行显示列数（column）',\n    default: 1,\n  },\n};\n\n// ────────────────────────────────────────────────────────────────────────────\n// 布局节点基础属性（layout nodes 不在 propertySchemaMap 中，单独定义）\n// ────────────────────────────────────────────────────────────────────────────\n\nconst layoutBasicProps: Record<string, SchemaNode> = {\n  column: { widget: 'number', type: 'number', title: '列数（column）' },\n  gap: { widget: 'number', type: 'number', title: '间距（gap）' },\n  direction: {\n    widget: 'select',\n    type: 'string',\n    title: '方向（direction）',\n    props: {\n      options: [\n        { label: '水平', value: 'row' },\n        { label: '垂直', value: 'column' },\n      ],\n    },\n  },\n};\n\n// ────────────────────────────────────────────────────────────────────────────\n// collapseSection — 将一组扁平字段包裹成单个 collapse 分区\n// collapse / collapsePanel 均为布局节点，key 不进入数据路径，\n// 因此其内部字段（title / validate / bind 等）会被扁平地暴露给属性表单。\n// ────────────────────────────────────────────────────────────────────────────\n\nfunction collapseSection(\n  key: string,\n  title: string,\n  fields: Record<string, SchemaNode>,\n): Record<string, SchemaNode> {\n  // @ts-expect-error\n  return {\n    [key]: {\n      type: 'collapsePanel',\n      title,\n      properties: fields,\n    },\n  } as unknown as SchemaNode;\n}\n\n// ────────────────────────────────────────────────────────────────────────────\n// KeyEditor — 单独处理 key 的编辑器\n// key 不是 SchemaNode 的属性，而是 properties 的索引键\n// 修改 key = schema 结构级操作：删除旧 key + 添加新 key + 更新选中路径\n// ────────────────────────────────────────────────────────────────────────────\n\ninterface KeyEditorProps {\n  oldKey: string;\n  locked?: boolean;\n  onRename: (newKey: string) => void;\n}\n\nfunction KeyEditor({ oldKey, locked, onRename }: KeyEditorProps) {\n  const [value, setValue] = useState(oldKey);\n  // 记录已同步到本地 state 的外部 key：仅当外部 oldKey 发生「非本次编辑产生」的\n  // 变化（如切换选中节点）时才重置输入框，避免用 key 重建组件导致失焦\n  const syncedKeyRef = useRef(oldKey);\n\n  useEffect(() => {\n    if (oldKey !== syncedKeyRef.current) {\n      syncedKeyRef.current = oldKey;\n      setValue(oldKey);\n    }\n  }, [oldKey]);\n\n  if (locked) {\n    return (\n      <div className='mb-3 flex items-center justify-between gap-2 rounded-lg border border-[#f0f0f0] bg-[#fafafa] px-3 py-2'>\n        <div className='min-w-0'>\n          <div className='mb-0.5 text-[11px] text-[#999]'>字段标识（key）</div>\n          <code className='break-all font-mono text-[13px] text-[#333]'>\n            {oldKey}\n          </code>\n        </div>\n        <span className='shrink-0 rounded bg-[#f0f0f0] px-1.5 py-0.5 text-[11px] text-[#999]'>\n          🔒 锁定\n        </span>\n      </div>\n    );\n  }\n\n  const onChange = (v: string) => {\n    syncedKeyRef.current = v;\n    setValue(v);\n    onRename(v);\n  };\n\n  return (\n    <div className='mb-3'>\n      <div className='mb-1.5 text-[11px] text-[#999]'>字段标识（key）</div>\n      <Input\n        size='small'\n        value={value}\n        onChange={(e) => {\n          const trimmed = (e.target.value || '').trim();\n          onChange(trimmed);\n        }}\n        className='nexus-key-input'\n      />\n      <div className='mt-1 text-[11px] text-[#c0c4cc]'>\n        用于数据路径与联动引用，修改后自动迁移子节点\n      </div>\n    </div>\n  );\n}\n\n// ────────────────────────────────────────────────────────────────────────────\n// PropertyPanel — 主组件\n// ────────────────────────────────────────────────────────────────────────────\n\nexport function PropertyPanel() {\n  const {\n    schema,\n    selectedPath,\n    updateNode,\n    renameNode,\n    selectNode,\n    setSchema,\n    propertySchemaMap,\n  } = useDesigner();\n\n  const selectedNode =\n    selectedPath && selectedPath.length > 0\n      ? getNodeAtProperties(schema.properties, selectedPath)\n      : undefined;\n\n  const isFormLevel = !selectedPath || selectedPath.length === 0;\n\n  // 选择变化时强制重建引擎（nodeVersion bump）\n  const formKey = `node_${(selectedPath || []).join('_')}_${(selectedNode as { type?: string } | undefined)?.type || 'root'}`;\n\n  // key 的特殊性：从 path 最后一段提取，不通过 NexusForm 管理\n  const currentKey = selectedPath?.[selectedPath.length - 1] ?? '';\n  const keyLocked =\n    (selectedNode as unknown as Record<string, unknown> | undefined)\n      ?._lockedKey === true;\n\n  // 选中节点的 widget/type：决定属性面板使用哪组组件属性；\n  // 仅在切换节点（widget/type 改变）时重新计算，避免每次输入都重建 schema\n  // （selectedNode 的 object identity 会随每次 edit 变化，不能直接依赖）\n  const selectedWidgetKey = selectedNode\n    ? (selectedNode.widget as string | undefined) ||\n      (selectedNode.type as string)\n    : null;\n\n  // 构建属性表单 schema：\n  // - 未选中节点（form-level）：formLevelProps（NexusSchema 顶层配置）\n  // - 选中节点：4 个 collapse 分区（通用属性 / 组件属性 / 校验配置 / 依赖配置）\n  //   collapse 与 collapsePanel 均为布局节点，key 不进入数据路径，\n  //   各分区内部字段会被扁平暴露给属性表单。\n  // 注意：不依赖 selectedNode 对象本身（每次 edit 都是新引用），\n  // 只依赖 isFormLevel 和 selectedWidgetKey，避免无谓 re-init。\n  const formSchema = useMemo<NexusSchema>(() => {\n    if (isFormLevel) {\n      return {\n        type: 'object',\n        properties: formLevelProps,\n        displayType: 'column',\n      } as NexusSchema;\n    }\n\n    const widgetProps =\n      propertySchemaMap[selectedWidgetKey as string] || layoutBasicProps;\n\n    return {\n      type: 'object',\n      properties: {\n        sectionProperty: {\n          widget: 'collapse',\n          props: {\n            defaultActiveKey: [\n              'sectionCommon',\n              'sectionFieldProps',\n              'sectionValidation',\n              'sectionReaction',\n              'sectionDependency',\n            ],\n          },\n          type: 'collapse',\n          properties: {\n            ...collapseSection(\n              'sectionCommon',\n              '通用属性',\n              commonPropertyFields,\n            ),\n            ...collapseSection(\n              'sectionFieldProps',\n              '组件属性',\n              widgetProps as Record<string, SchemaNode>,\n            ),\n            ...collapseSection(\n              'sectionValidation',\n              '校验配置',\n              validationPropertyFields,\n            ),\n            ...collapseSection(\n              'sectionReaction',\n              '联动配置',\n              reactionPropertyFields,\n            ),\n            ...collapseSection(\n              'sectionDependency',\n              '依赖配置',\n              dependencyPropertyFields,\n            ),\n          },\n        },\n      },\n      displayType: 'column',\n    } as NexusSchema;\n  }, [isFormLevel, selectedWidgetKey, propertySchemaMap]);\n\n  // 表单级属性面板的取值来源：只提取 NexusSchema 顶层的表单配置键，\n  // 而非整个 schema 对象（schema 含 properties 与嵌套字段，不是表单级配置）\n  const formLevelConfig = useMemo<Record<string, unknown>>(\n    () =>\n      extractFormLevelConfig(\n        schema as unknown as Record<string, unknown>,\n        Object.keys(formLevelProps),\n      ),\n    [schema],\n  );\n\n  const handleValuesChange = useCallback(\n    (\n      allValues: Record<string, unknown>,\n      changedFields: ReadonlySet<string>,\n    ) => {\n      // 只写回「真正变化」的值：未触碰的空字符串（''/undefined/null）视为未赋值，\n      // 不写回 Schema（否则 bind:'' / hidden:'' / required:'' 会导致 key 丢失 / 空联动）；\n      // 用户主动清空的字段（changedFields 命中）以 undefined 回写，由\n      // updateNodeWithNesting 从节点删除对应属性（详见 diffPropertyPatch）\n      const initial = selectedNode\n        ? flattenNodeForPropertyEditor(\n            selectedNode as unknown as Record<string, any>,\n          )\n        : formLevelConfig;\n\n      const patch = diffPropertyPatch(initial, allValues, changedFields);\n      if (Object.keys(patch).length === 0) {\n        return;\n      }\n\n      if (!selectedPath || selectedPath.length === 0) {\n        // form-level：修改 NexusSchema 顶层属性（undefined 表示清空，删除该键）\n        const next = { ...(schema as unknown as Record<string, unknown>) };\n        for (const [key, value] of Object.entries(patch)) {\n          if (value === undefined) {\n            delete next[key];\n          } else {\n            next[key] = value;\n          }\n        }\n        setSchema(next as unknown as NexusSchema);\n        return;\n      }\n\n      // 节点级：key 已由 KeyEditor 单独处理，此处跳过\n      const { key: _key, ...rest } = patch;\n      if (Object.keys(rest).length > 0) {\n        updateNode(selectedPath, rest);\n      }\n    },\n    [\n      selectedPath,\n      updateNode,\n      setSchema,\n      schema,\n      selectedNode,\n      formLevelConfig,\n    ],\n  );\n\n  const handleRename = useCallback(\n    (newKey: string) => {\n      if (!selectedPath || selectedPath.length === 0) {\n        return;\n      }\n      renameNode(selectedPath, newKey);\n    },\n    [selectedPath, renameNode],\n  );\n\n  // 节点类型徽标：字段取 widget，布局/对象取 type\n  const nodeKind = selectedNode\n    ? (\n        (selectedNode.widget as string) ||\n        (selectedNode.type as string) ||\n        ''\n      ).toLowerCase()\n    : '';\n\n  return (\n    <div className='flex h-full flex-col border-l border-[#f0f0f0] bg-white'>\n      {/* 导航头 */}\n      <div className='flex items-center justify-between border-b border-[#f0f0f0] px-4 py-2.5'>\n        <div className='pl-5 flex min-w-0 items-center gap-1 h-6'>\n          {!isFormLevel && (\n            <button\n              type='button'\n              onClick={() => selectNode(null)}\n              className='-ml-1 mr-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-[#999] transition-colors hover:bg-[#f0f0f0] hover:text-[#333]'\n              title='返回表单属性'\n            >\n              <svg\n                width='12'\n                height='12'\n                viewBox='0 0 24 24'\n                fill='none'\n                stroke='currentColor'\n                strokeWidth='2.5'\n                strokeLinecap='round'\n                strokeLinejoin='round'\n                aria-hidden='true'\n              >\n                <polyline points='15 18 9 12 15 6' />\n              </svg>\n            </button>\n          )}\n          <span className='truncate text-[13px] font-semibold text-[#333]'>\n            {isFormLevel ? '表单属性' : '节点属性'}\n          </span>\n        </div>\n        {!isFormLevel && nodeKind && (\n          <span className='ml-2 shrink-0 rounded-md bg-[#e8f1ff] px-1.5 py-0.5 text-[11px] text-[#1677ff]'>\n            {nodeKind}\n          </span>\n        )}\n      </div>\n\n      <div className='nexus-property-body flex-1 overflow-y-auto px-4 py-3'>\n        {/* key 特殊性处理：key 不是 SchemaNode 属性，而是 properties 索引键 */}\n        {!isFormLevel && currentKey && (\n          <KeyEditor\n            oldKey={currentKey}\n            locked={keyLocked}\n            onRename={handleRename}\n          />\n        )}\n\n        {/* 属性表单：完全基于 descriptor 驱动 */}\n        <PropertyForm\n          key={formKey}\n          schema={formSchema}\n          initialValues={\n            selectedNode\n              ? flattenNodeForPropertyEditor(\n                  selectedNode as unknown as Record<string, any>,\n                )\n              : formLevelConfig\n          }\n          onValuesChange={handleValuesChange}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["PropertyForm","schema","initialValues","onValuesChange","form","useForm","engine","registerAntdUI","changedFieldsRef","useRef","handleWatch","useCallback","value","_allValues","changedPath","jsx","NexusForm","propertyWidgets","formLevelProps","layoutBasicProps","collapseSection","key","title","fields","KeyEditor","oldKey","locked","onRename","setValue","useState","syncedKeyRef","useEffect","jsxs","onChange","v","Input","e","trimmed","PropertyPanel","selectedPath","updateNode","renameNode","selectNode","setSchema","propertySchemaMap","useDesigner","selectedNode","getNodeAtProperties","isFormLevel","formKey","currentKey","keyLocked","selectedWidgetKey","formSchema","useMemo","widgetProps","commonPropertyFields","validationPropertyFields","reactionPropertyFields","dependencyPropertyFields","formLevelConfig","extractFormLevelConfig","handleValuesChange","allValues","changedFields","initial","flattenNodeForPropertyEditor","patch","diffPropertyPatch","next","_key","rest","handleRename","newKey","nodeKind"],"mappings":";;;;;;;;;AAgDA,SAASA,EAAa;AAAA,EACpB,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AACF,GAAsB;AACpB,QAAM,CAACC,CAAI,IAAIC,EAAA,GACTC,IAASF,EAAK,WAAA;AAGpB,EAAAG,EAAeD,CAAM;AAIrB,QAAME,IAAmBC,EAAoB,oBAAI,KAAK,GAGhDC,IAAcC;AAAA,IAClB,CAACC,GAAgBC,GAAqBC,MAAyB;AAC7D,MAAIA,KACFN,EAAiB,QAAQ,IAAIM,CAAW,GAE1CX;AAAA,QACES;AAAA,QACAJ,EAAiB;AAAA,MAAA;AAAA,IAErB;AAAA,IACA,CAACL,CAAc;AAAA,EAAA;AAGjB,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,MAAAZ;AAAA,MACA,QAAAH;AAAA,MACA,eAAAC;AAAA,MACA,OAAO,EAAE,KAAKQ,EAAA;AAAA,MACd,SAASO;AAAA,IAAA;AAAA,EAAA;AAGf;AAMA,MAAMC,IAA6C;AAAA,EACjD,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,MACL,SAAS;AAAA,QACP,EAAE,OAAO,WAAW,OAAO,MAAA;AAAA,QAC3B,EAAE,OAAO,cAAc,OAAO,SAAA;AAAA,QAC9B,EAAE,OAAO,cAAc,OAAO,SAAA;AAAA,MAAS;AAAA,IACzC;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA,EAEf,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb,GAMMC,IAA+C;AAAA,EACnD,QAAQ,EAAE,QAAQ,UAAU,MAAM,UAAU,OAAO,aAAA;AAAA,EACnD,KAAK,EAAE,QAAQ,UAAU,MAAM,UAAU,OAAO,UAAA;AAAA,EAChD,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,MACL,SAAS;AAAA,QACP,EAAE,OAAO,MAAM,OAAO,MAAA;AAAA,QACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,MAAS;AAAA,IACjC;AAAA,EACF;AAEJ;AAQA,SAASC,EACPC,GACAC,GACAC,GAC4B;AAE5B,SAAO;AAAA,IACL,CAACF,CAAG,GAAG;AAAA,MACL,MAAM;AAAA,MACN,OAAAC;AAAA,MACA,YAAYC;AAAA,IAAA;AAAA,EACd;AAEJ;AAcA,SAASC,EAAU,EAAE,QAAAC,GAAQ,QAAAC,GAAQ,UAAAC,KAA4B;AAC/D,QAAM,CAACf,GAAOgB,CAAQ,IAAIC,EAASJ,CAAM,GAGnCK,IAAerB,EAAOgB,CAAM;AASlC,MAPAM,EAAU,MAAM;AACd,IAAIN,MAAWK,EAAa,YAC1BA,EAAa,UAAUL,GACvBG,EAASH,CAAM;AAAA,EAEnB,GAAG,CAACA,CAAM,CAAC,GAEPC;AACF,WACE,gBAAAM,EAAC,OAAA,EAAI,WAAU,0GACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,QAAA,gBAAAjB,EAAC,OAAA,EAAI,WAAU,kCAAiC,UAAA,aAAS;AAAA,QACzD,gBAAAA,EAAC,QAAA,EAAK,WAAU,+CACb,UAAAU,EAAA,CACH;AAAA,MAAA,GACF;AAAA,MACA,gBAAAV,EAAC,QAAA,EAAK,WAAU,uEAAsE,UAAA,QAAA,CAEtF;AAAA,IAAA,GACF;AAIJ,QAAMkB,IAAW,CAACC,MAAc;AAC9B,IAAAJ,EAAa,UAAUI,GACvBN,EAASM,CAAC,GACVP,EAASO,CAAC;AAAA,EACZ;AAEA,SACE,gBAAAF,EAAC,OAAA,EAAI,WAAU,QACb,UAAA;AAAA,IAAA,gBAAAjB,EAAC,OAAA,EAAI,WAAU,kCAAiC,UAAA,aAAS;AAAA,IACzD,gBAAAA;AAAA,MAACoB;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAAvB;AAAA,QACA,UAAU,CAACwB,MAAM;AACf,gBAAMC,KAAWD,EAAE,OAAO,SAAS,IAAI,KAAA;AACvC,UAAAH,EAASI,CAAO;AAAA,QAClB;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAtB,EAAC,OAAA,EAAI,WAAU,mCAAkC,UAAA,yBAAA,CAEjD;AAAA,EAAA,GACF;AAEJ;AAMO,SAASuB,KAAgB;AAC9B,QAAM;AAAA,IACJ,QAAArC;AAAA,IACA,cAAAsC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IACJP,KAAgBA,EAAa,SAAS,IAClCQ,EAAoB9C,EAAO,YAAYsC,CAAY,IACnD,QAEAS,IAAc,CAACT,KAAgBA,EAAa,WAAW,GAGvDU,IAAU,SAASV,KAAgB,CAAA,GAAI,KAAK,GAAG,CAAC,IAAKO,GAAgD,QAAQ,MAAM,IAGnHI,IAAaX,IAAeA,EAAa,SAAS,CAAC,KAAK,IACxDY,IACHL,GACG,eAAe,IAKfM,IAAoBN,IACrBA,EAAa,UACbA,EAAa,OACd,MASEO,IAAaC,EAAqB,MAAM;AAC5C,QAAIN;AACF,aAAO;AAAA,QACL,MAAM;AAAA,QACN,YAAY9B;AAAA,QACZ,aAAa;AAAA,MAAA;AAIjB,UAAMqC,IACJX,EAAkBQ,CAA2B,KAAKjC;AAEpD,WAAO;AAAA,MACL,MAAM;AAAA,MACN,YAAY;AAAA,QACV,iBAAiB;AAAA,UACf,QAAQ;AAAA,UACR,OAAO;AAAA,YACL,kBAAkB;AAAA,cAChB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,MAAM;AAAA,UACN,YAAY;AAAA,YACV,GAAGC;AAAA,cACD;AAAA,cACA;AAAA,cACAoC;AAAA,YAAA;AAAA,YAEF,GAAGpC;AAAA,cACD;AAAA,cACA;AAAA,cACAmC;AAAA,YAAA;AAAA,YAEF,GAAGnC;AAAA,cACD;AAAA,cACA;AAAA,cACAqC;AAAA,YAAA;AAAA,YAEF,GAAGrC;AAAA,cACD;AAAA,cACA;AAAA,cACAsC;AAAA,YAAA;AAAA,YAEF,GAAGtC;AAAA,cACD;AAAA,cACA;AAAA,cACAuC;AAAA,YAAA;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MAEF,aAAa;AAAA,IAAA;AAAA,EAEjB,GAAG,CAACX,GAAaI,GAAmBR,CAAiB,CAAC,GAIhDgB,IAAkBN;AAAA,IACtB,MACEO;AAAA,MACE5D;AAAA,MACA,OAAO,KAAKiB,CAAc;AAAA,IAAA;AAAA,IAE9B,CAACjB,CAAM;AAAA,EAAA,GAGH6D,IAAqBnD;AAAA,IACzB,CACEoD,GACAC,MACG;AAKH,YAAMC,IAAUnB,IACZoB;AAAA,QACEpB;AAAA,MAAA,IAEFc,GAEEO,IAAQC,EAAkBH,GAASF,GAAWC,CAAa;AACjE,UAAI,OAAO,KAAKG,CAAK,EAAE,WAAW;AAChC;AAGF,UAAI,CAAC5B,KAAgBA,EAAa,WAAW,GAAG;AAE9C,cAAM8B,IAAO,EAAE,GAAIpE,EAAA;AACnB,mBAAW,CAACoB,GAAKT,CAAK,KAAK,OAAO,QAAQuD,CAAK;AAC7C,UAAIvD,MAAU,SACZ,OAAOyD,EAAKhD,CAAG,IAEfgD,EAAKhD,CAAG,IAAIT;AAGhB,QAAA+B,EAAU0B,CAA8B;AACxC;AAAA,MACF;AAGA,YAAM,EAAE,KAAKC,GAAM,GAAGC,MAASJ;AAC/B,MAAI,OAAO,KAAKI,CAAI,EAAE,SAAS,KAC7B/B,EAAWD,GAAcgC,CAAI;AAAA,IAEjC;AAAA,IACA;AAAA,MACEhC;AAAA,MACAC;AAAA,MACAG;AAAA,MACA1C;AAAA,MACA6C;AAAA,MACAc;AAAA,IAAA;AAAA,EACF,GAGIY,IAAe7D;AAAA,IACnB,CAAC8D,MAAmB;AAClB,MAAI,CAAClC,KAAgBA,EAAa,WAAW,KAG7CE,EAAWF,GAAckC,CAAM;AAAA,IACjC;AAAA,IACA,CAAClC,GAAcE,CAAU;AAAA,EAAA,GAIrBiC,IAAW5B,KAEVA,EAAa,UACbA,EAAa,QACd,IACA,gBACF;AAEJ,SACE,gBAAAd,EAAC,OAAA,EAAI,WAAU,2DAEb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2EACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,4CACZ,UAAA;AAAA,QAAA,CAACgB,KACA,gBAAAjC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM2B,EAAW,IAAI;AAAA,YAC9B,WAAU;AAAA,YACV,OAAM;AAAA,YAEN,UAAA,gBAAA3B;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,aAAY;AAAA,gBACZ,eAAc;AAAA,gBACd,gBAAe;AAAA,gBACf,eAAY;AAAA,gBAEZ,UAAA,gBAAAA,EAAC,YAAA,EAAS,QAAO,kBAAA,CAAkB;AAAA,cAAA;AAAA,YAAA;AAAA,UACrC;AAAA,QAAA;AAAA,0BAGH,QAAA,EAAK,WAAU,kDACb,UAAAiC,IAAc,SAAS,OAAA,CAC1B;AAAA,MAAA,GACF;AAAA,MACC,CAACA,KAAe0B,uBACd,QAAA,EAAK,WAAU,kFACb,UAAAA,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IAEA,gBAAA1C,EAAC,OAAA,EAAI,WAAU,wDAEZ,UAAA;AAAA,MAAA,CAACgB,KAAeE,KACf,gBAAAnC;AAAA,QAACS;AAAA,QAAA;AAAA,UACC,QAAQ0B;AAAA,UACR,QAAQC;AAAA,UACR,UAAUqB;AAAA,QAAA;AAAA,MAAA;AAAA,MAKd,gBAAAzD;AAAA,QAACf;AAAA,QAAA;AAAA,UAEC,QAAQqD;AAAA,UACR,eACEP,IACIoB;AAAA,YACEpB;AAAA,UAAA,IAEFc;AAAA,UAEN,gBAAgBE;AAAA,QAAA;AAAA,QATXb;AAAA,MAAA;AAAA,IAUP,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/es/resizable-panel.js

@@ -0,0 +1,103 @@
+import { jsxs as b, Fragment as D, jsx as n } from "react/jsx-runtime";
+import { useRef as w, useState as d, useCallback as k, useEffect as $ } from "react";
+function F({
+  side: r,
+  defaultWidth: u,
+  minWidth: f,
+  maxWidth: m,
+  children: M,
+  collapsedTitle: o
+}) {
+  const h = w(null), [l, g] = d(u), [e, L] = d(!1), [s, p] = d(!1), v = w(u), z = k(() => {
+    L((t) => (t ? g(v.current) : v.current = l, !t));
+  }, [l]), C = k((t) => {
+    t.preventDefault(), t.stopPropagation(), p(!0);
+  }, []);
+  $(() => {
+    if (!s)
+      return;
+    const t = (x) => {
+      const c = h.current?.getBoundingClientRect();
+      if (!c)
+        return;
+      const B = r === "left" ? x.clientX - c.left : c.right - x.clientX;
+      g(Math.max(f, Math.min(m, Math.round(B))));
+    }, y = () => p(!1);
+    return document.addEventListener("mousemove", t), document.addEventListener("mouseup", y), document.body.style.userSelect = "none", document.body.style.cursor = "col-resize", () => {
+      document.removeEventListener("mousemove", t), document.removeEventListener("mouseup", y), document.body.style.userSelect = "", document.body.style.cursor = "";
+    };
+  }, [s, f, m, r]);
+  const a = r === "left", S = {
+    width: e ? 36 : l,
+    flexShrink: 0,
+    overflow: "hidden",
+    transition: s ? "none" : "width 180ms ease",
+    position: "relative",
+    background: e ? "#fafafa" : void 0
+  }, R = [
+    "nexus-resize-handle",
+    s ? "nexus-resize-active" : ""
+  ].filter(Boolean).join(" "), j = a ? { right: -2 } : { left: -2 }, i = {
+    position: "absolute",
+    top: 8,
+    zIndex: 20
+  };
+  a ? i.right = e ? 7 : 8 : i.left = e ? 7 : 8;
+  const E = a ? e ? "rotate(0deg)" : "rotate(180deg)" : e ? "rotate(180deg)" : "rotate(0deg)", N = e && o ? /* @__PURE__ */ n("div", { className: "flex h-full items-center justify-center bg-[#fafafa] select-none", children: /* @__PURE__ */ n(
+    "span",
+    {
+      className: "text-[11px] font-medium text-[#999] whitespace-nowrap tracking-[3px]",
+      style: { writingMode: "vertical-lr" },
+      children: o
+    }
+  ) }) : null;
+  return /* @__PURE__ */ b(D, { children: [
+    s ? /* @__PURE__ */ n("div", { className: "fixed inset-0 z-[9999]", style: { cursor: "col-resize" } }) : null,
+    /* @__PURE__ */ b("div", { ref: h, style: S, children: [
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: R,
+          style: j,
+          onMouseDown: C
+        }
+      ),
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: "nexus-panel-toggle",
+          style: i,
+          onClick: z,
+          title: e ? `展开${o}` : `折叠${o}`,
+          "aria-expanded": !e,
+          "aria-label": e ? `展开${o}` : `折叠${o}`,
+          children: /* @__PURE__ */ n(
+            "svg",
+            {
+              width: "10",
+              height: "10",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              style: {
+                transform: E,
+                transition: "transform 180ms ease"
+              },
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ n("polyline", { points: "9 18 15 12 9 6" })
+            }
+          )
+        }
+      ),
+      e ? N : M
+    ] })
+  ] });
+}
+export {
+  F as ResizablePanel
+};
+//# sourceMappingURL=resizable-panel.js.map

package/dist/es/resizable-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-panel.js","sources":["../../src/resizable-panel.tsx"],"sourcesContent":["// ============================================================================\n// @xbeeant/form-engine-designer — 可拖拽调整宽度 / 可折叠面板\n// ============================================================================\n\nimport type { CSSProperties } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nexport interface ResizablePanelProps {\n  /** 面板位于左侧还是右侧（决定拖拽手柄位置） */\n  side: 'left' | 'right';\n  /** 默认展开宽度（px） */\n  defaultWidth: number;\n  /** 最小宽度 */\n  minWidth: number;\n  /** 最大宽度 */\n  maxWidth: number;\n  /** 面板内容 */\n  children: React.ReactNode;\n  /** 折叠状态时的竖排标题 */\n  collapsedTitle: string;\n}\n\n/**\n * 可拖拽调整宽度的侧边面板，支持折叠/展开。\n *\n * - 拖拽手柄位于面板内侧边缘（左面板：右边缘，右面板：左边缘）\n * - 折叠按钮位于手柄附近的一角\n * - 拖拽时全局禁用文本选中，防止误操作\n */\nexport function ResizablePanel({\n  side,\n  defaultWidth,\n  minWidth,\n  maxWidth,\n  children,\n  collapsedTitle,\n}: ResizablePanelProps) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(defaultWidth);\n  const [collapsed, setCollapsed] = useState(false);\n  const [dragging, setDragging] = useState(false);\n\n  // 折叠前记忆宽度，展开时恢复\n  const preCollapseWidthRef = useRef(defaultWidth);\n\n  const toggle = useCallback(() => {\n    setCollapsed((prev) => {\n      if (prev) {\n        // 展开：恢复之前宽度\n        setWidth(preCollapseWidthRef.current);\n      } else {\n        // 折叠：记忆当前宽度\n        preCollapseWidthRef.current = width;\n      }\n      return !prev;\n    });\n  }, [width]);\n\n  // ─── 拖拽调整宽度 ─────────────────────────────────────────────\n  const handleMouseDown = useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setDragging(true);\n  }, []);\n\n  useEffect(() => {\n    if (!dragging) {\n      return;\n    }\n\n    const handleMouseMove = (e: MouseEvent) => {\n      const rect = panelRef.current?.getBoundingClientRect();\n      if (!rect) {\n        return;\n      }\n\n      const next =\n        side === 'left'\n          ? e.clientX - rect.left // 左面板：拖右边缘 = 距左边界距离\n          : rect.right - e.clientX; // 右面板：拖左边缘 = 距右边界距离\n\n      setWidth(Math.max(minWidth, Math.min(maxWidth, Math.round(next))));\n    };\n\n    const handleMouseUp = () => setDragging(false);\n\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n\n    // 拖拽时禁用文本选中 & 全局 col-resize 光标\n    document.body.style.userSelect = 'none';\n    document.body.style.cursor = 'col-resize';\n\n    return () => {\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n      document.body.style.userSelect = '';\n      document.body.style.cursor = '';\n    };\n  }, [dragging, minWidth, maxWidth, side]);\n\n  // ─── 渲染 ─────────────────────────────────────────────────────\n  const isLeft = side === 'left';\n  const collapsedWidth = 36;\n\n  const containerStyle: CSSProperties = {\n    width: collapsed ? collapsedWidth : width,\n    flexShrink: 0,\n    overflow: 'hidden',\n    transition: dragging ? 'none' : 'width 180ms ease',\n    position: 'relative',\n    background: collapsed ? '#fafafa' : undefined,\n  };\n\n  const handleClass = [\n    'nexus-resize-handle',\n    dragging ? 'nexus-resize-active' : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const handleStyle: CSSProperties = isLeft ? { right: -2 } : { left: -2 };\n\n  // 折叠按钮跟随面板侧\n  const toggleBtnStyle: CSSProperties = {\n    position: 'absolute',\n    top: 8,\n    zIndex: 20,\n  };\n  if (isLeft) {\n    toggleBtnStyle.right = collapsed ? 7 : 8;\n  } else {\n    toggleBtnStyle.left = collapsed ? 7 : 8;\n  }\n\n  // chevron-right 基准图标，按面板侧/折叠态旋转\n  const chevronRotation = isLeft\n    ? collapsed\n      ? 'rotate(0deg)'\n      : 'rotate(180deg)'\n    : collapsed\n      ? 'rotate(180deg)'\n      : 'rotate(0deg)';\n\n  // 折叠态竖排标题\n  const collapsedLabel =\n    collapsed && collapsedTitle ? (\n      <div className='flex h-full items-center justify-center bg-[#fafafa] select-none'>\n        <span\n          className='text-[11px] font-medium text-[#999] whitespace-nowrap tracking-[3px]'\n          style={{ writingMode: 'vertical-lr' }}\n        >\n          {collapsedTitle}\n        </span>\n      </div>\n    ) : null;\n\n  // 拖拽蒙层：防止 iframe / canvas 内容吞掉 mousemove 事件\n  const dragOverlay = dragging ? (\n    <div className='fixed inset-0 z-[9999]' style={{ cursor: 'col-resize' }} />\n  ) : null;\n\n  return (\n    <>\n      {dragOverlay}\n      <div ref={panelRef} style={containerStyle}>\n        {/* 拖拽手柄 */}\n        <div\n          className={handleClass}\n          style={handleStyle}\n          onMouseDown={handleMouseDown}\n        />\n\n        {/* 折叠/展开按钮 */}\n        <button\n          type='button'\n          className='nexus-panel-toggle'\n          style={toggleBtnStyle}\n          onClick={toggle}\n          title={collapsed ? `展开${collapsedTitle}` : `折叠${collapsedTitle}`}\n          aria-expanded={!collapsed}\n          aria-label={\n            collapsed ? `展开${collapsedTitle}` : `折叠${collapsedTitle}`\n          }\n        >\n          <svg\n            width='10'\n            height='10'\n            viewBox='0 0 24 24'\n            fill='none'\n            stroke='currentColor'\n            strokeWidth='2.5'\n            strokeLinecap='round'\n            strokeLinejoin='round'\n            style={{\n              transform: chevronRotation,\n              transition: 'transform 180ms ease',\n            }}\n            aria-hidden='true'\n          >\n            <polyline points='9 18 15 12 9 6' />\n          </svg>\n        </button>\n\n        {/* 折叠时仅显示竖排标题，展开时渲染完整内容 */}\n        {collapsed ? collapsedLabel : children}\n      </div>\n    </>\n  );\n}\n"],"names":["ResizablePanel","side","defaultWidth","minWidth","maxWidth","children","collapsedTitle","panelRef","useRef","width","setWidth","useState","collapsed","setCollapsed","dragging","setDragging","preCollapseWidthRef","toggle","useCallback","prev","handleMouseDown","e","useEffect","handleMouseMove","rect","next","handleMouseUp","isLeft","containerStyle","handleClass","handleStyle","toggleBtnStyle","chevronRotation","collapsedLabel","jsx","jsxs","Fragment"],"mappings":"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"}