@sunny-base-web/effects 0.8.43 → 0.8.45

package/dist/Design-Bryr-rNU.mjs

@@ -0,0 +1,4079 @@
+import { reactive as ne, nextTick as we, defineComponent as _, h as W, ref as A, computed as x, watch as Ce, onUpdated as Se, onUnmounted as he, onMounted as se, provide as ae, openBlock as a, createElementBlock as m, createVNode as N, withCtx as P, renderSlot as E, createElementVNode as p, inject as F, resolveComponent as R, Fragment as T, renderList as z, normalizeClass as q, toDisplayString as D, createCommentVNode as S, createBlock as w, resolveDynamicComponent as $, markRaw as V, normalizeStyle as j, KeepAlive as Ne, shallowRef as le, onBeforeUnmount as pe, createApp as _e, unref as H, getCurrentInstance as Ie } from "vue";
+import { ChevronUp as Be, ChevronDown as Oe, Trash2 as Re } from "@sunny-base-web/icons";
+import { SunnyForm as Ae, SunnySelect as Pe } from "@sunny-base-web/ui";
+import { Button as Ee, Input as De, Textarea as Te } from "@arco-design/web-vue";
+function ze(s) {
+  return { all: s = s || /* @__PURE__ */ new Map(), on: function(e, t) {
+    var n = s.get(e);
+    n ? n.push(t) : s.set(e, [t]);
+  }, off: function(e, t) {
+    var n = s.get(e);
+    n && (t ? n.splice(n.indexOf(t) >>> 0, 1) : s.set(e, []));
+  }, emit: function(e, t) {
+    var n = s.get(e);
+    n && n.slice().map(function(i) {
+      i(t);
+    }), (n = s.get("*")) && n.slice().map(function(i) {
+      i(e, t);
+    });
+  } };
+}
+let K = (s = 21) => crypto.getRandomValues(new Uint8Array(s)).reduce((e, t) => (t &= 63, t < 36 ? e += t.toString(36) : t < 62 ? e += (t - 26).toString(36).toUpperCase() : t > 62 ? e += "-" : e += "_", e), "");
+var k = "node:change", U = "block:change", J = "page:switch", G = "project:load", je = "history:change", L = "history:restore", u = ze(), me = class M {
+  /** 节点唯一标识（自动生成，可通过 options.id 指定） */
+  id;
+  /**
+   * 组件名称
+   *
+   * 对应 Vue 模板中的标签名，如 `'SunnyButton'`、`'a-input'`、`'div'`。
+   * 用于在 ComponentRegistry 中查找组件定义和元信息。
+   */
+  name;
+  /**
+   * 组件属性（props）
+   *
+   * 键值对结构，key 为属性名，value 为属性值。
+   * 值可以是静态值（字符串、数字、布尔值）或表达式字符串（运行时求值）。
+   *
+   * @example `{ type: 'primary', size: 'large', disabled: false }`
+   */
+  props;
+  /**
+   * 事件绑定
+   *
+   * 键值对结构，key 为事件名，value 为处理函数名称或表达式字符串。
+   *
+   * @example `{ click: 'handleClick', change: 'onValueChange' }`
+   */
+  events;
+  /**
+   * Vue 指令列表
+   *
+   * 支持常用指令如 v-show、v-if、v-for、v-model 等。
+   */
+  directives;
+  /**
+   * 默认插槽子节点列表
+   *
+   * 对应 Vue 模板中标签内部的子元素。
+   * 只有 isContainer=true 的节点才应该有 children。
+   */
+  children;
+  /**
+   * 具名插槽
+   *
+   * key 为插槽名，value 为该插槽内的子节点列表。
+   *
+   * @example `{ header: [NodeModel], footer: [NodeModel] }`
+   */
+  slots;
+  /**
+   * 父节点 ID
+   *
+   * 根节点的 parentId 为 null。
+   * 添加到 BlockModel.rootNode 时设置为 null。
+   * 从父节点移除时重置为 null。
+   */
+  parentId;
+  /**
+   * 是否为容器节点
+   *
+   * 容器节点可以接受子节点拖入（如 Layout、Card）。
+   * 非容器节点拒绝子节点拖入（如 Button、Input）。
+   * 拖拽投放时通过此字段判断 canDrop。
+   */
+  isContainer;
+  /**
+   * 组件来源标识（可选）
+   *
+   * 用于渲染器区分组件查找策略：
+   * - `undefined` / 普通字符串 → 从 ComponentRegistry 查找
+   * - `'schema:<id>'` → 异步加载 BlockSchema 并递归渲染
+   */
+  from;
+  /**
+   * 创建 NodeModel 实例
+   *
+   * @param name - 组件名称（如 'SunnyButton'、'div'）
+   * @param options - 可选配置
+   * @param options.id - 指定 ID（用于反序列化），默认自动生成
+   * @param options.props - 初始属性
+   * @param options.events - 初始事件绑定
+   * @param options.directives - 初始指令列表
+   * @param options.isContainer - 是否为容器节点，默认 false
+   */
+  constructor(e, t) {
+    this.id = t?.id ?? K(), this.name = e, this.props = t?.props ? { ...t.props } : {}, this.events = t?.events ? { ...t.events } : {}, this.directives = t?.directives ? [...t.directives] : [], this.children = [], this.slots = {}, this.parentId = null, this.isContainer = t?.isContainer ?? !1;
+  }
+  // ── Props ──────────────────────────────────────────────
+  /**
+   * 获取单个属性值
+   *
+   * @param key - 属性名
+   * @returns 属性值，不存在时返回 undefined
+   */
+  getProp(e) {
+    return this.props[e];
+  }
+  /**
+   * 设置单个属性值
+   *
+   * 广播 EVENT_NODE_CHANGE { action: 'props' }
+   *
+   * @param key - 属性名
+   * @param value - 属性值（任意类型）
+   */
+  setProp(e, t) {
+    this.props[e] = t, u.emit(k, {
+      nodeId: this.id,
+      action: "props",
+      parentId: this.parentId
+    });
+  }
+  /**
+   * 批量设置属性
+   *
+   * 遍历传入的 props 对象，逐个调用 setProp。
+   * 每次调用都会广播一个 props 事件。
+   *
+   * @param props - 属性键值对
+   */
+  setProps(e) {
+    for (const [t, n] of Object.entries(e))
+      this.setProp(t, n);
+  }
+  /**
+   * 移除单个属性
+   *
+   * 广播 EVENT_NODE_CHANGE { action: 'props' }
+   *
+   * @param key - 要移除的属性名
+   */
+  removeProp(e) {
+    delete this.props[e], u.emit(k, {
+      nodeId: this.id,
+      action: "props",
+      parentId: this.parentId
+    });
+  }
+  // ── Events ─────────────────────────────────────────────
+  /**
+   * 设置事件绑定
+   *
+   * 广播 EVENT_NODE_CHANGE { action: 'events' }
+   *
+   * @param eventName - 事件名（如 'click'、'change'）
+   * @param handler - 处理函数名称或表达式字符串
+   */
+  setEvent(e, t) {
+    this.events[e] = t, u.emit(k, {
+      nodeId: this.id,
+      action: "events",
+      parentId: this.parentId
+    });
+  }
+  /**
+   * 移除事件绑定
+   *
+   * 广播 EVENT_NODE_CHANGE { action: 'events' }
+   *
+   * @param eventName - 要移除的事件名
+   */
+  removeEvent(e) {
+    delete this.events[e], u.emit(k, {
+      nodeId: this.id,
+      action: "events",
+      parentId: this.parentId
+    });
+  }
+  // ── Directives ─────────────────────────────────────────
+  /**
+   * 添加指令
+   *
+   * 广播 EVENT_NODE_CHANGE { action: 'directive' }
+   *
+   * @param directive - 指令绑定对象
+   */
+  addDirective(e) {
+    this.directives.push(e), u.emit(k, {
+      nodeId: this.id,
+      action: "directive",
+      parentId: this.parentId
+    });
+  }
+  /**
+   * 移除指令
+   *
+   * 广播 EVENT_NODE_CHANGE { action: 'directive' }
+   *
+   * @param name - 指令名（如 'show'、'if'）
+   */
+  removeDirective(e) {
+    const t = this.directives.findIndex((n) => n.name === e);
+    t !== -1 && (this.directives.splice(t, 1), u.emit(k, {
+      nodeId: this.id,
+      action: "directive",
+      parentId: this.parentId
+    }));
+  }
+  /**
+   * 更新指令的表达式值
+   *
+   * 广播 EVENT_NODE_CHANGE { action: 'directive' }
+   *
+   * @param name - 指令名
+   * @param value - 新的表达式字符串
+   */
+  updateDirective(e, t) {
+    const n = this.directives.find((i) => i.name === e);
+    n && (n.value = t, u.emit(k, {
+      nodeId: this.id,
+      action: "directive",
+      parentId: this.parentId
+    }));
+  }
+  // ── Children ───────────────────────────────────────────
+  /**
+   * 添加子节点到默认插槽
+   *
+   * 自动设置 child.parentId 为当前节点 ID。
+   * 广播 EVENT_NODE_CHANGE { action: 'add' }
+   *
+   * @param child - 要添加的子节点
+   * @param index - 插入位置，默认追加到末尾
+   */
+  addChild(e, t) {
+    e.parentId = this.id;
+    const n = t ?? this.children.length;
+    this.children.splice(n, 0, e), u.emit(k, {
+      nodeId: e.id,
+      action: "add",
+      parentId: this.id,
+      index: n
+    });
+  }
+  /**
+   * 移除子节点
+   *
+   * 自动将 child.parentId 重置为 null。
+   * 广播 EVENT_NODE_CHANGE { action: 'remove' }
+   *
+   * @param childId - 要移除的子节点 ID
+   * @returns 被移除的 NodeModel，不存在时返回 null
+   */
+  removeChild(e) {
+    const t = this.children.findIndex((i) => i.id === e);
+    if (t === -1) return null;
+    const [n] = this.children.splice(t, 1);
+    return n.parentId = null, u.emit(k, {
+      nodeId: e,
+      action: "remove",
+      parentId: this.id
+    }), n;
+  }
+  /**
+   * 移动子节点在 children 中的位置
+   *
+   * 广播 EVENT_NODE_CHANGE { action: 'move' }
+   *
+   * @param childId - 要移动的子节点 ID
+   * @param toIndex - 目标位置索引
+   */
+  moveChild(e, t) {
+    const n = this.children.findIndex((r) => r.id === e);
+    if (n === -1) return;
+    const [i] = this.children.splice(n, 1);
+    this.children.splice(t, 0, i), u.emit(k, {
+      nodeId: e,
+      action: "move",
+      parentId: this.id
+    });
+  }
+  // ── Slots ──────────────────────────────────────────────
+  /**
+   * 添加子节点到具名插槽
+   *
+   * 如果插槽不存在，自动创建。
+   * 广播 EVENT_NODE_CHANGE { action: 'add' }
+   *
+   * @param slotName - 插槽名（如 'header'、'footer'）
+   * @param child - 要添加的子节点
+   * @param index - 插入位置，默认追加到末尾
+   */
+  addToSlot(e, t, n) {
+    t.parentId = this.id, this.slots[e] || (this.slots[e] = []);
+    const i = n ?? this.slots[e].length;
+    this.slots[e].splice(i, 0, t), u.emit(k, {
+      nodeId: t.id,
+      action: "add",
+      parentId: this.id,
+      index: i
+    });
+  }
+  /**
+   * 从具名插槽中移除子节点
+   *
+   * 如果插槽变为空，自动删除该插槽键。
+   * 广播 EVENT_NODE_CHANGE { action: 'remove' }
+   *
+   * @param slotName - 插槽名
+   * @param childId - 要移除的子节点 ID
+   * @returns 被移除的 NodeModel，不存在时返回 null
+   */
+  removeFromSlot(e, t) {
+    const n = this.slots[e];
+    if (!n) return null;
+    const i = n.findIndex((o) => o.id === t);
+    if (i === -1) return null;
+    const [r] = n.splice(i, 1);
+    return r.parentId = null, n.length === 0 && delete this.slots[e], u.emit(k, {
+      nodeId: t,
+      action: "remove",
+      parentId: this.id
+    }), r;
+  }
+  /**
+   * 获取指定具名插槽的子节点列表
+   *
+   * @param slotName - 插槽名
+   * @returns 子节点数组，插槽不存在时返回空数组
+   */
+  getSlotChildren(e) {
+    return this.slots[e] ?? [];
+  }
+  // ── 序列化 ─────────────────────────────────────────────
+  /**
+   * 序列化为 JSON 对象
+   *
+   * 递归序列化所有子节点和插槽子节点。
+   * 用于持久化存储、跨进程传输、History 快照等。
+   *
+   * @returns 可 JSON.stringify 的 NodeModelJSON 对象
+   */
+  toJSON() {
+    return {
+      id: this.id,
+      name: this.name,
+      props: { ...this.props },
+      events: { ...this.events },
+      directives: this.directives.map((e) => ({ ...e })),
+      children: this.children.map((e) => e.toJSON()),
+      slots: Object.fromEntries(
+        Object.entries(this.slots).map(([e, t]) => [e, t.map((n) => n.toJSON())])
+      ),
+      isContainer: this.isContainer,
+      ...this.from ? { from: this.from } : {}
+    };
+  }
+  /**
+   * 从 JSON 对象反序列化为 NodeModel 实例
+   *
+   * 递归还原所有子节点和插槽子节点，自动设置 parentId。
+   *
+   * @param json - 序列化的 NodeModelJSON 对象
+   * @returns 还原的 NodeModel 实例
+   */
+  static fromJSON(e) {
+    const t = new M(e.name, {
+      id: e.id,
+      props: e.props,
+      events: e.events,
+      directives: e.directives,
+      isContainer: e.isContainer
+    });
+    e.from && (t.from = e.from);
+    for (const n of e.children) {
+      const i = M.fromJSON(n);
+      t.children.push(i), i.parentId = t.id;
+    }
+    for (const [n, i] of Object.entries(e.slots ?? {}))
+      t.slots[n] = i.map((r) => {
+        const o = M.fromJSON(r);
+        return o.parentId = t.id, o;
+      });
+    return t;
+  }
+  /**
+   * 深拷贝当前节点
+   *
+   * 通过 toJSON → fromJSON 实现，生成完全独立的副本（新 ID）。
+   *
+   * @returns 深拷贝的 NodeModel 实例
+   */
+  clone() {
+    return M.fromJSON(this.toJSON());
+  }
+}, fe = class ge {
+  /** Block 唯一标识（自动生成，可通过 options.id 指定用于反序列化） */
+  id;
+  /**
+   * 页面/组件名称
+   *
+   * 在 ProjectModel 的 pages 列表中作为显示名称。
+   * 代码生成时作为 Vue 组件的 name 属性。
+   */
+  name;
+  /**
+   * 页面路由路径
+   *
+   * 仅对「页面」类型有意义，用于 URL 映射。
+   * 如 '/'、'/dashboard'、'/settings'。
+   * 对「组件」类型通常为 '/'（不使用）。
+   */
+  route;
+  /**
+   * 根节点
+   *
+   * 页面组件树的入口，通常是一个容器节点（如 div、SunnyLayout）。
+   * 初始为 null，需要通过 setRootNode() 设置。
+   */
+  rootNode;
+  /**
+   * 响应式状态声明列表
+   *
+   * 对应 Vue `<script setup>` 中的 `ref()` / `reactive()`。
+   */
+  state;
+  /**
+   * 计算属性声明列表
+   *
+   * 对应 Vue `<script setup>` 中的 `computed()`。
+   */
+  computed;
+  /**
+   * 方法声明列表
+   *
+   * 对应 Vue `<script setup>` 中的普通函数。
+   */
+  methods;
+  /**
+   * 侦听器声明列表
+   *
+   * 对应 Vue `<script setup>` 中的 `watch()`。
+   */
+  watch;
+  /**
+   * CSS 样式块列表
+   *
+   * 每个块包含 selector（选择器）和 properties（属性键值对）。
+   * 代码生成时合并到 `<style scoped>` 中。
+   */
+  css;
+  /**
+   * 组件 props 定义列表
+   *
+   * 对应 `defineProps()` 宏。
+   */
+  props;
+  /**
+   * 组件 emits 定义列表
+   *
+   * 对应 `defineEmits()` 宏。
+   */
+  emits;
+  /**
+   * 组件 expose 定义列表
+   *
+   * 对应 `defineExpose()` 宏。
+   */
+  expose;
+  /**
+   * 组件插槽定义列表
+   *
+   * 对应 `defineSlots()` 宏。
+   */
+  slots;
+  /**
+   * 生命周期钩子列表
+   *
+   * 对应 `onMounted()` / `onUnmounted()` 等生命周期 API。
+   */
+  lifecycleHooks;
+  /**
+   * 依赖注入声明列表
+   *
+   * 对应 `inject()` API。
+   */
+  inject;
+  /**
+   * 创建 BlockModel 实例
+   *
+   * @param name - 页面/组件名称
+   * @param options - 可选配置
+   * @param options.id - 指定 ID（用于反序列化），默认自动生成
+   * @param options.route - 页面路由，默认 '/'
+   */
+  constructor(e, t) {
+    this.id = t?.id ?? K(), this.name = e, this.route = t?.route ?? "/", this.rootNode = null, this.state = [], this.computed = [], this.methods = [], this.watch = [], this.css = [], this.props = [], this.emits = [], this.expose = [], this.slots = [], this.lifecycleHooks = [], this.inject = [];
+  }
+  // ── 页面基础信息 ────────────────────────────────────
+  /**
+   * 修改页面名称
+   *
+   * 广播 EVENT_BLOCK_CHANGE { action: 'update' }
+   */
+  setName(e) {
+    this.name = e, this._emitBlockChange("update");
+  }
+  /**
+   * 修改页面路由
+   *
+   * 广播 EVENT_BLOCK_CHANGE { action: 'update' }
+   */
+  setRoute(e) {
+    this.route = e, this._emitBlockChange("update");
+  }
+  // ── 节点树操作 ─────────────────────────────────────
+  /**
+   * 设置根节点
+   *
+   * 将 node.parentId 设为 null，并广播变更事件。
+   */
+  setRootNode(e) {
+    e.parentId = null, this.rootNode = e, this._emitBlockChange("update");
+  }
+  /**
+   * 在节点树中查找指定 ID 的节点
+   *
+   * 深度优先递归搜索整个组件树。
+   *
+   * @param nodeId - 目标节点 ID
+   * @returns 找到的 NodeModel，不存在时返回 null
+   */
+  findNode(e) {
+    return this.rootNode ? this._findNodeRecursive(this.rootNode, e) : null;
+  }
+  /** 深度优先递归查找节点 */
+  _findNodeRecursive(e, t) {
+    if (e.id === t) return e;
+    for (const n of e.children) {
+      const i = this._findNodeRecursive(n, t);
+      if (i) return i;
+    }
+    return null;
+  }
+  /**
+   * 查找指定节点的父节点
+   *
+   * @param nodeId - 目标节点 ID
+   * @returns 父节点 NodeModel，不存在时返回 null（可能是根节点）
+   */
+  findParent(e) {
+    return this.rootNode ? this._findParentRecursive(this.rootNode, e) : null;
+  }
+  /** 递归查找父节点 */
+  _findParentRecursive(e, t) {
+    for (const n of e.children) {
+      if (n.id === t) return e;
+      const i = this._findParentRecursive(n, t);
+      if (i) return i;
+    }
+    return null;
+  }
+  /**
+   * 在指定父节点下添加子节点
+   *
+   * 如果 parentId 是 rootNode 的 ID，直接调用 rootNode.addChild。
+   * 广播由 NodeModel.addChild 触发 EVENT_NODE_CHANGE。
+   *
+   * @param parentId - 父节点 ID
+   * @param node - 要添加的节点
+   * @param index - 插入位置，默认追加到末尾
+   */
+  addNode(e, t, n) {
+    if (e === this.rootNode?.id) {
+      this.rootNode.addChild(t, n);
+      return;
+    }
+    const i = this.findNode(e);
+    i && i.addChild(t, n);
+  }
+  /**
+   * 从节点树中移除指定节点
+   *
+   * @param nodeId - 要移除的节点 ID
+   * @returns 被移除的 NodeModel，不存在时返回 null
+   */
+  removeNode(e) {
+    if (!this.rootNode) return null;
+    const t = this.findParent(e);
+    return t ? t.removeChild(e) : null;
+  }
+  /**
+   * 将节点从一个父节点移动到另一个父节点
+   *
+   * 先从原父节点移除，再添加到目标父节点。
+   * 广播由 NodeModel 的 removeChild 和 addChild 触发。
+   *
+   * @param nodeId - 要移动的节点 ID
+   * @param targetParentId - 目标父节点 ID
+   * @param index - 插入位置，默认追加到末尾
+   */
+  moveNode(e, t, n) {
+    const i = this.findNode(e);
+    if (!i) return;
+    const r = this.findParent(e);
+    r && r.removeChild(e);
+    const o = this.findNode(t);
+    o && o.addChild(i, n);
+  }
+  // ── 拖拽投放 ───────────────────────────────────────
+  /**
+   * 判断是否可以将源节点拖放到目标节点的指定位置
+   *
+   * 规则：
+   * - 不能拖放到自身
+   * - 源和目标节点必须都存在
+   * - position=inside 时，目标必须是容器
+   * - position=inside 时，不能将祖先拖入自己的后代（防止循环）
+   * - position=before/after 时，不能拖到根节点前后
+   *
+   * @param sourceNodeId - 被拖拽的节点 ID
+   * @param targetNodeId - 目标节点 ID
+   * @param position - 投放位置（before/after/inside）
+   * @returns 是否允许投放
+   */
+  canDrop(e, t, n) {
+    if (e === t) return !1;
+    const i = this.findNode(e), r = this.findNode(t);
+    return !(!i || !r || n === "inside" && !r.isContainer || n === "inside" && this._isDescendant(e, t) || (n === "before" || n === "after") && this.rootNode?.id === t);
+  }
+  /**
+   * 执行拖拽投放操作
+   *
+   * 先通过 canDrop 校验，校验不通过则静默返回。
+   * 从原父节点移除源节点，插入到目标位置。
+   *
+   * @param sourceNodeId - 被拖拽的节点 ID
+   * @param targetNodeId - 目标节点 ID
+   * @param position - 投放位置
+   */
+  dropTo(e, t, n) {
+    if (!this.canDrop(e, t, n)) return;
+    const i = this.findNode(e), r = this.findNode(t);
+    if (!i || !r) return;
+    const o = this.findParent(e);
+    if (o && o.removeChild(e), n === "inside")
+      r.addChild(i);
+    else {
+      const c = this.findParent(t);
+      if (c) {
+        const l = c.children.findIndex((h) => h.id === t), d = n === "before" ? l : l + 1;
+        c.addChild(i, d);
+      }
+    }
+  }
+  /**
+   * 检查 targetNodeId 是否是 sourceNodeId 的后代节点
+   *
+   * 用于防止将父节点拖入子节点导致循环引用。
+   */
+  _isDescendant(e, t) {
+    const n = this.findNode(e);
+    return n ? this._checkDescendantRecursive(n, t) : !1;
+  }
+  /** 递归检查 targetId 是否在 node 的后代中 */
+  _checkDescendantRecursive(e, t) {
+    for (const n of e.children)
+      if (n.id === t || this._checkDescendantRecursive(n, t)) return !0;
+    return !1;
+  }
+  // ── JS 声明操作 ────────────────────────────────────
+  /**
+   * 添加响应式状态声明
+   *
+   * 自动设置 decl.type = 'state'。
+   * 广播 EVENT_BLOCK_CHANGE { action: 'state' }
+   */
+  addState(e) {
+    e.type = "state", this.state.push(e), this._emitBlockChange("state");
+  }
+  /**
+   * 移除响应式状态声明
+   *
+   * @param name - 状态变量名
+   */
+  removeState(e) {
+    const t = this.state.findIndex((n) => n.name === e);
+    t > -1 && (this.state.splice(t, 1), this._emitBlockChange("state"));
+  }
+  /**
+   * 更新响应式状态的表达式值
+   *
+   * @param name - 状态变量名
+   * @param value - 新的表达式字符串
+   */
+  updateState(e, t) {
+    const n = this.state.find((i) => i.name === e);
+    n && (n.value = t, this._emitBlockChange("state"));
+  }
+  /**
+   * 添加计算属性声明
+   *
+   * 自动设置 decl.type = 'computed'。
+   * 广播 EVENT_BLOCK_CHANGE { action: 'computed' }
+   */
+  addComputed(e) {
+    e.type = "computed", this.computed.push(e), this._emitBlockChange("computed");
+  }
+  /**
+   * 移除计算属性声明
+   *
+   * @param name - 计算属性名
+   */
+  removeComputed(e) {
+    const t = this.computed.findIndex((n) => n.name === e);
+    t > -1 && (this.computed.splice(t, 1), this._emitBlockChange("computed"));
+  }
+  /**
+   * 添加方法声明
+   *
+   * 自动设置 decl.type = 'method'。
+   * 广播 EVENT_BLOCK_CHANGE { action: 'method' }
+   */
+  addMethod(e) {
+    e.type = "method", this.methods.push(e), this._emitBlockChange("method");
+  }
+  /**
+   * 移除方法声明
+   *
+   * @param name - 方法名
+   */
+  removeMethod(e) {
+    const t = this.methods.findIndex((n) => n.name === e);
+    t > -1 && (this.methods.splice(t, 1), this._emitBlockChange("method"));
+  }
+  /**
+   * 添加侦听器声明
+   *
+   * 自动设置 decl.type = 'watch'。
+   * 广播 EVENT_BLOCK_CHANGE { action: 'watch' }
+   */
+  addWatch(e) {
+    e.type = "watch", this.watch.push(e), this._emitBlockChange("watch");
+  }
+  /**
+   * 移除侦听器声明
+   *
+   * @param name - 侦听器名
+   */
+  removeWatch(e) {
+    const t = this.watch.findIndex((n) => n.name === e);
+    t > -1 && (this.watch.splice(t, 1), this._emitBlockChange("watch"));
+  }
+  // ── CSS 样式操作 ───────────────────────────────────
+  /**
+   * 添加 CSS 样式块
+   *
+   * 广播 EVENT_BLOCK_CHANGE { action: 'css' }
+   */
+  addCssBlock(e) {
+    this.css.push(e), this._emitBlockChange("css");
+  }
+  /**
+   * 移除 CSS 样式块
+   *
+   * @param id - 样式块 ID
+   */
+  removeCssBlock(e) {
+    const t = this.css.findIndex((n) => n.id === e);
+    t > -1 && (this.css.splice(t, 1), this._emitBlockChange("css"));
+  }
+  /**
+   * 更新 CSS 样式块的属性（合并更新）
+   *
+   * @param id - 样式块 ID
+   * @param properties - 要更新的 CSS 属性键值对
+   */
+  updateCssBlock(e, t) {
+    const n = this.css.find((i) => i.id === e);
+    n && (n.properties = { ...n.properties, ...t }, this._emitBlockChange("css"));
+  }
+  // ── Vue SFC 编译宏操作 ─────────────────────────────
+  /** 添加 defineProps 属性定义，广播 EVENT_BLOCK_CHANGE { action: 'update' } */
+  addProp(e) {
+    this.props.push(e), this._emitBlockChange("update");
+  }
+  /** 移除 defineProps 属性定义 */
+  removeProp(e) {
+    const t = this.props.findIndex((n) => n.name === e);
+    t > -1 && (this.props.splice(t, 1), this._emitBlockChange("update"));
+  }
+  /**
+   * 更新 defineProps 属性定义（部分更新）
+   *
+   * @param name - 属性名
+   * @param updates - 要更新的字段
+   */
+  updateProp(e, t) {
+    const n = this.props.find((i) => i.name === e);
+    n && (Object.assign(n, t), this._emitBlockChange("update"));
+  }
+  /** 添加 defineEmits 事件定义 */
+  addEmit(e) {
+    this.emits.push(e), this._emitBlockChange("update");
+  }
+  /** 移除 defineEmits 事件定义 */
+  removeEmit(e) {
+    const t = this.emits.findIndex((n) => n.name === e);
+    t > -1 && (this.emits.splice(t, 1), this._emitBlockChange("update"));
+  }
+  /** 更新 defineEmits 事件定义（部分更新） */
+  updateEmit(e, t) {
+    const n = this.emits.find((i) => i.name === e);
+    n && (Object.assign(n, t), this._emitBlockChange("update"));
+  }
+  /** 添加 defineExpose 暴露定义 */
+  addExpose(e) {
+    this.expose.push(e), this._emitBlockChange("update");
+  }
+  /** 移除 defineExpose 暴露定义 */
+  removeExpose(e) {
+    const t = this.expose.findIndex((n) => n.name === e);
+    t > -1 && (this.expose.splice(t, 1), this._emitBlockChange("update"));
+  }
+  /** 添加 defineSlots 插槽定义 */
+  addSlot(e) {
+    this.slots.push(e), this._emitBlockChange("update");
+  }
+  /** 移除 defineSlots 插槽定义 */
+  removeSlot(e) {
+    const t = this.slots.findIndex((n) => n.name === e);
+    t > -1 && (this.slots.splice(t, 1), this._emitBlockChange("update"));
+  }
+  /** 更新 defineSlots 插槽定义（部分更新） */
+  updateSlot(e, t) {
+    const n = this.slots.find((i) => i.name === e);
+    n && (Object.assign(n, t), this._emitBlockChange("update"));
+  }
+  /** 添加生命周期钩子 */
+  addLifecycleHook(e) {
+    this.lifecycleHooks.push(e), this._emitBlockChange("update");
+  }
+  /** 移除生命周期钩子 */
+  removeLifecycleHook(e) {
+    const t = this.lifecycleHooks.findIndex((n) => n.name === e);
+    t > -1 && (this.lifecycleHooks.splice(t, 1), this._emitBlockChange("update"));
+  }
+  /** 更新生命周期钩子的函数体 */
+  updateLifecycleHook(e, t) {
+    const n = this.lifecycleHooks.find((i) => i.name === e);
+    n && (n.value = t, this._emitBlockChange("update"));
+  }
+  /** 添加 inject 依赖注入声明 */
+  addInject(e) {
+    this.inject.push(e), this._emitBlockChange("update");
+  }
+  /** 移除 inject 依赖注入声明 */
+  removeInject(e) {
+    const t = this.inject.findIndex((n) => n.name === e);
+    t > -1 && (this.inject.splice(t, 1), this._emitBlockChange("update"));
+  }
+  /** 更新 inject 依赖注入声明（部分更新） */
+  updateInject(e, t) {
+    const n = this.inject.find((i) => i.name === e);
+    n && (Object.assign(n, t), this._emitBlockChange("update"));
+  }
+  // ── 序列化 ─────────────────────────────────────────
+  /**
+   * 序列化为 JSON 对象
+   *
+   * 递归序列化根节点，浅拷贝所有声明数组。
+   * 用于持久化存储、History 快照、跨进程传输。
+   *
+   * @returns 可 JSON.stringify 的 BlockModelJSON 对象
+   */
+  toJSON() {
+    return {
+      id: this.id,
+      name: this.name,
+      route: this.route,
+      rootNode: this.rootNode?.toJSON() ?? null,
+      state: [...this.state],
+      computed: [...this.computed],
+      methods: [...this.methods],
+      watch: [...this.watch],
+      css: this.css.map((e) => ({ ...e })),
+      props: [...this.props],
+      emits: [...this.emits],
+      expose: [...this.expose],
+      slots: [...this.slots],
+      lifecycleHooks: [...this.lifecycleHooks],
+      inject: [...this.inject]
+    };
+  }
+  /**
+   * 从 JSON 对象反序列化为 BlockModel 实例
+   *
+   * 递归还原根节点树，浅拷贝所有声明数组。
+   *
+   * @param json - 序列化的 BlockModelJSON 对象
+   * @returns 还原的 BlockModel 实例
+   */
+  static fromJSON(e) {
+    const t = new ge(e.name, {
+      id: e.id,
+      route: e.route
+    });
+    return e.rootNode && (t.rootNode = me.fromJSON(e.rootNode)), t.state = [...e.state], t.computed = [...e.computed], t.methods = [...e.methods], t.watch = [...e.watch], t.css = [...e.css], t.props = [...e.props], t.emits = [...e.emits], t.expose = [...e.expose], t.slots = [...e.slots], t.lifecycleHooks = [...e.lifecycleHooks], t.inject = [...e.inject], t;
+  }
+  // ── 内部 ────────────────────────────────────────────
+  /**
+   * 广播 Block 变更事件
+   *
+   * @param action - 变更动作类型
+   */
+  _emitBlockChange(e) {
+    u.emit(U, { blockId: this.id, action: e });
+  }
+}, Le = class {
+  /**
+   * 快照栈
+   *
+   * 按时间顺序排列的快照数组，cursor 指向当前状态。
+   * undo 后 redo 栈仍然存在，直到新操作截断。
+   */
+  snapshots = [];
+  /**
+   * 当前游标
+   *
+   * 指向当前状态在 snapshots 中的索引。
+   * - 初始值 -1（空栈）
+   * - 新增快照后指向最后一个元素
+   * - undo 后向左移动
+   * - redo 后向右移动
+   */
+  cursor = -1;
+  /** 最大快照数 */
+  maxSize;
+  /** 批处理窗口（ms） */
+  batchWindow;
+  /**
+   * 获取当前活跃 Block 的函数
+   *
+   * 由 Engine 注入，返回当前激活页面对应的 BlockModel。
+   * History 不持有 BlockModel 引用，避免循环依赖。
+   */
+  getActiveBlock;
+  /** 批处理定时器 */
+  batchTimer = null;
+  /** 批处理中积攒的标签 */
+  pendingLabel = "";
+  /**
+   * 是否正在恢复中
+   *
+   * 恢复期间设为 true，防止恢复过程中的事件触发新的快照录制。
+   * 恢复完成后重置为 false。
+   */
+  isRestoring = !1;
+  /** 取消订阅函数列表 */
+  unsubscribers = [];
+  /**
+   * 创建 History 实例
+   *
+   * @param getActiveBlock - 获取当前活跃 Block 的函数（由 Engine 注入）
+   * @param options - 构造选项
+   */
+  constructor(s, e) {
+    this.getActiveBlock = s, this.maxSize = e?.maxSize ?? 50, this.batchWindow = e?.batchWindow ?? 50, this.setupListeners();
+  }
+  // ── 公共 API ──────────────────────────────────────
+  /**
+   * 撤销
+   *
+   * 将游标左移一位，恢复到上一个快照。
+   * 触发 EVENT_HISTORY_RESTORE（恢复开始 + 恢复完成）和 EVENT_HISTORY_CHANGE。
+   */
+  undo() {
+    if (!this.canUndo()) return;
+    const s = this.snapshots[this.cursor - 1];
+    this.restore(s);
+  }
+  /**
+   * 重做
+   *
+   * 将游标右移一位，恢复到下一个快照。
+   */
+  redo() {
+    if (!this.canRedo()) return;
+    const s = this.snapshots[this.cursor + 1];
+    this.restore(s);
+  }
+  /**
+   * 是否可以撤销
+   *
+   * cursor > 0 时表示还有更早的快照可恢复。
+   */
+  canUndo() {
+    return this.cursor > 0;
+  }
+  /**
+   * 是否可以重做
+   *
+   * cursor < snapshots.length - 1 时表示有更新的快照可恢复。
+   */
+  canRedo() {
+    return this.cursor < this.snapshots.length - 1;
+  }
+  /** 当前游标位置 */
+  getCursor() {
+    return this.cursor;
+  }
+  /** 快照总数 */
+  getSnapshotCount() {
+    return this.snapshots.length;
+  }
+  /**
+   * 获取所有快照（只读）
+   *
+   * 用于 UI 展示历史记录列表。
+   */
+  getSnapshots() {
+    return this.snapshots;
+  }
+  // ── 手动快照 ──────────────────────────────────────
+  /**
+   * 立即拍一个快照（不经过批处理）
+   *
+   * Engine 可在关键时刻（如 loadProject 后）主动调用。
+   *
+   * @param label - 操作标签
+   */
+  takeSnapshot(s) {
+    const e = this.getActiveBlock();
+    if (!e) return;
+    const t = {
+      id: K(),
+      timestamp: Date.now(),
+      label: s,
+      blockId: e.id,
+      data: e.toJSON()
+    };
+    this.pushSnapshot(t);
+  }
+  // ── 内部 ──────────────────────────────────────────
+  /**
+   * 设置事件监听
+   *
+   * 监听 EVENT_NODE_CHANGE 和 EVENT_BLOCK_CHANGE，
+   * 触发批处理快照。恢复期间（isRestoring=true）不录制。
+   */
+  setupListeners() {
+    const s = () => {
+      this.isRestoring || this.scheduleSnapshot("node:change");
+    };
+    u.on(k, s), this.unsubscribers.push(() => u.off(k, s));
+    const e = () => {
+      this.isRestoring || this.scheduleSnapshot("block:change");
+    };
+    u.on(U, e), this.unsubscribers.push(() => u.off(U, e));
+  }
+  /**
+   * 调度快照（批处理）
+   *
+   * 首次调用时记录标签，启动定时器。
+   * 定时器到期前的新调用会重置定时器（延迟拍照）。
+   * 定时器到期后执行一次 takeSnapshot。
+   */
+  scheduleSnapshot(s) {
+    this.pendingLabel || (this.pendingLabel = s), this.batchTimer && clearTimeout(this.batchTimer), this.batchTimer = setTimeout(() => {
+      this.batchTimer = null, this.takeSnapshot(this.pendingLabel), this.pendingLabel = "";
+    }, this.batchWindow);
+  }
+  /**
+   * 压入快照
+   *
+   * 截断当前位置之后的所有快照（undo 后的新操作会覆盖 redo 栈）。
+   * 超出上限时移除最旧的快照。
+   * 广播 EVENT_HISTORY_CHANGE。
+   */
+  pushSnapshot(s) {
+    this.cursor < this.snapshots.length - 1 && (this.snapshots = this.snapshots.slice(0, this.cursor + 1)), this.snapshots.push(s), this.snapshots.length > this.maxSize && this.snapshots.shift(), this.cursor = this.snapshots.length - 1, this.emitChange();
+  }
+  /**
+   * 恢复到指定快照
+   *
+   * 1. 标记 isRestoring（防止恢复事件触发新快照）
+   * 2. 广播 EVENT_HISTORY_RESTORE（恢复开始）
+   * 3. 用快照数据 fromJSON 还原 BlockModel
+   * 4. 将还原的数据逐字段写回当前 Block
+   * 5. 更新游标位置
+   * 6. 广播 EVENT_HISTORY_RESTORE（恢复完成）
+   * 7. 重置 isRestoring
+   *
+   * @param snapshot - 目标快照
+   */
+  restore(s) {
+    const e = this.getActiveBlock();
+    if (!e) return;
+    this.isRestoring = !0, u.emit(L, {
+      snapshotId: s.id,
+      blockId: s.blockId
+    });
+    const t = fe.fromJSON(s.data);
+    e.rootNode = t.rootNode, e.state = t.state, e.computed = t.computed, e.methods = t.methods, e.watch = t.watch, e.css = t.css, e.props = t.props, e.emits = t.emits, e.expose = t.expose, e.slots = t.slots, e.lifecycleHooks = t.lifecycleHooks, e.inject = t.inject, this.cursor = this.snapshots.indexOf(s), u.emit(L, {
+      snapshotId: s.id,
+      blockId: s.blockId
+    }), this.isRestoring = !1, this.emitChange();
+  }
+  /**
+   * 广播 EVENT_HISTORY_CHANGE
+   *
+   * 通知 UI 层更新撤销/重做按钮状态。
+   */
+  emitChange() {
+    u.emit(je, {
+      cursor: this.cursor,
+      total: this.snapshots.length,
+      canUndo: this.canUndo(),
+      canRedo: this.canRedo()
+    });
+  }
+  /**
+   * 销毁 History，释放所有资源
+   *
+   * 取消事件订阅，清除定时器，清空快照栈。
+   */
+  dispose() {
+    for (const s of this.unsubscribers)
+      s();
+    this.unsubscribers = [], this.batchTimer && (clearTimeout(this.batchTimer), this.batchTimer = null), this.snapshots = [], this.cursor = -1;
+  }
+}, ce = class ve {
+  /** 项目唯一标识（自动生成，可通过 options.id 指定用于反序列化） */
+  id;
+  /**
+   * 项目名称
+   *
+   * 用于显示项目标题，代码生成时作为项目标识。
+   */
+  name;
+  /**
+   * 页面/组件列表
+   *
+   * 每个 BlockModel 代表一个独立的页面或可复用组件。
+   * 页面通过 route 关联到 URL 路径。
+   */
+  pages;
+  /**
+   * 当前激活页面的 ID
+   *
+   * 画布渲染器根据此字段决定展示哪个页面。
+   * 初始为空字符串，添加第一个页面时自动设置。
+   * 切换页面时由 switchPage() 更新。
+   */
+  activePageId;
+  /**
+   * 外部依赖声明列表
+   *
+   * 声明项目运行时需要的 npm 包，代码生成时转换为 import 语句。
+   * 同一个包名只会保留一个版本（后注册的覆盖先注册的）。
+   *
+   * @example `[{ package: 'lodash-es', version: '^4.17.21' }]`
+   */
+  dependencies;
+  /**
+   * API 接口定义列表
+   *
+   * 定义项目中使用的 HTTP 接口，供页面内方法调用。
+   * 代码生成时可根据这些定义生成 API 请求函数。
+   */
+  apis;
+  /**
+   * 创建 ProjectModel 实例
+   *
+   * @param name - 项目名称
+   * @param options - 可选配置
+   * @param options.id - 指定 ID（用于反序列化），默认自动生成
+   */
+  constructor(e, t) {
+    this.id = t?.id ?? K(), this.name = e, this.pages = [], this.activePageId = "", this.dependencies = [], this.apis = [];
+  }
+  // ── 页面管理 ───────────────────────────────────────────
+  /**
+   * 添加页面到项目
+   *
+   * 将页面追加到 pages 列表末尾。如果是第一个页面，自动设为激活页面。
+   * 广播 EVENT_PROJECT_LOAD 事件。
+   *
+   * @param page - 要添加的 BlockModel 实例
+   */
+  addPage(e) {
+    this.pages.push(e), this.pages.length === 1 && (this.activePageId = e.id), this._emitChanged();
+  }
+  /**
+   * 从项目中移除指定页面
+   *
+   * 如果移除的是当前激活页面，自动切换到剩余的第一个页面。
+   * 广播 EVENT_PROJECT_LOAD 事件。
+   *
+   * @param pageId - 要移除的页面 ID
+   */
+  removePage(e) {
+    const t = this.pages.findIndex((n) => n.id === e);
+    t !== -1 && (this.pages.splice(t, 1), this.activePageId === e && (this.activePageId = this.pages.length > 0 ? this.pages[0].id : ""), this._emitChanged());
+  }
+  /**
+   * 切换当前激活页面
+   *
+   * 画布渲染器会根据 activePageId 展示对应的页面。
+   * 广播 EVENT_PAGE_SWITCH 事件（含 fromPageId / toPageId）。
+   *
+   * @param pageId - 目标页面 ID（必须存在于 pages 中）
+   */
+  switchPage(e) {
+    if (!this.pages.find((i) => i.id === e)) return;
+    const n = this.activePageId;
+    this.activePageId = e, u.emit(J, {
+      fromPageId: n,
+      toPageId: e
+    });
+  }
+  /**
+   * 获取当前激活的页面
+   *
+   * @returns 当前激活的 BlockModel 实例，无激活页面时返回 null
+   */
+  getActivePage() {
+    return this.pages.find((e) => e.id === this.activePageId) ?? null;
+  }
+  /**
+   * 根据 ID 获取指定页面
+   *
+   * @param pageId - 页面 ID
+   * @returns 对应的 BlockModel 实例，不存在时返回 null
+   */
+  getPage(e) {
+    return this.pages.find((t) => t.id === e) ?? null;
+  }
+  // ── 依赖管理 ───────────────────────────────────────────
+  /**
+   * 添加或更新外部依赖
+   *
+   * 如果同名包已存在，更新其版本号；否则添加新依赖。
+   * 广播 EVENT_PROJECT_LOAD 事件。
+   *
+   * @param dep - 依赖声明（包名 + 版本）
+   *
+   * @example
+   * ```ts
+   * project.addDependency({ package: 'dayjs', version: '^1.11.10' })
+   * ```
+   */
+  addDependency(e) {
+    const t = this.dependencies.find((n) => n.package === e.package);
+    t ? t.version = e.version : this.dependencies.push({ ...e }), this._emitChanged();
+  }
+  /**
+   * 移除指定外部依赖
+   *
+   * @param packageName - 要移除的包名
+   */
+  removeDependency(e) {
+    const t = this.dependencies.findIndex((n) => n.package === e);
+    t > -1 && (this.dependencies.splice(t, 1), this._emitChanged());
+  }
+  // ── API 管理 ───────────────────────────────────────────
+  /**
+   * 添加 API 接口定义
+   *
+   * @param api - API 定义对象（会浅拷贝存储）
+   */
+  addApi(e) {
+    this.apis.push({ ...e }), this._emitChanged();
+  }
+  /**
+   * 移除指定 API 接口定义
+   *
+   * @param apiId - 要移除的 API ID
+   */
+  removeApi(e) {
+    const t = this.apis.findIndex((n) => n.id === e);
+    t > -1 && (this.apis.splice(t, 1), this._emitChanged());
+  }
+  /**
+   * 更新指定 API 接口定义（部分更新）
+   *
+   * @param apiId - 要更新的 API ID
+   * @param updates - 要更新的字段
+   */
+  updateApi(e, t) {
+    const n = this.apis.find((i) => i.id === e);
+    n && (Object.assign(n, t), this._emitChanged());
+  }
+  // ── 序列化 ─────────────────────────────────────────────
+  /**
+   * 序列化为 JSON 对象
+   *
+   * 递归序列化所有页面。用于持久化存储、项目导出、跨进程传输。
+   *
+   * @returns 可 JSON.stringify 的 ProjectModelJSON 对象
+   */
+  toJSON() {
+    return {
+      id: this.id,
+      name: this.name,
+      pages: this.pages.map((e) => e.toJSON()),
+      activePageId: this.activePageId,
+      dependencies: this.dependencies.map((e) => ({ ...e })),
+      apis: this.apis.map((e) => ({ ...e }))
+    };
+  }
+  /**
+   * 从 JSON 对象反序列化为 ProjectModel 实例
+   *
+   * 递归还原所有页面及其节点树。
+   *
+   * @param json - 序列化的 ProjectModelJSON 对象
+   * @returns 还原的 ProjectModel 实例
+   */
+  static fromJSON(e) {
+    const t = new ve(e.name, { id: e.id });
+    return t.pages = e.pages.map((n) => fe.fromJSON(n)), t.activePageId = e.activePageId, t.dependencies = e.dependencies.map((n) => ({ ...n })), t.apis = e.apis.map((n) => ({ ...n })), t;
+  }
+  // ── 内部 ────────────────────────────────────────────────
+  /** 广播项目变更事件 */
+  _emitChanged() {
+    u.emit(G, { projectId: this.id });
+  }
+};
+function Ve(s) {
+  if (s !== "undefined") {
+    if (s === "null") return null;
+    if (s === "true") return !0;
+    if (s === "false") return !1;
+    if (s === "") return "";
+    if (/^-?\d+(\.\d+)?$/.test(s)) return Number(s);
+    if (s.startsWith("'") && s.endsWith("'") || s.startsWith('"') && s.endsWith('"'))
+      return s.slice(1, -1);
+    if (s.startsWith("{") || s.startsWith("[")) {
+      try {
+        return JSON.parse(s);
+      } catch {
+      }
+      try {
+        return new Function(`return (${s})`)();
+      } catch {
+      }
+    }
+    return s;
+  }
+}
+class Y {
+  /**
+   * 响应式状态对象
+   *
+   * 所有的 state 声明都会挂载在此对象上。
+   * 由 block.ts 在 setup() 中初始化，通过 provide/inject 传递给子组件。
+   */
+  state;
+  /**
+   * DOM 引用存储（设计态使用）
+   *
+   * key 为节点 ID，value 为 DOM 元素。
+   * 通过 ref() 方法绑定，设计态用于选中、拖拽、高亮等交互。
+   */
+  refs;
+  constructor() {
+    this.state = ne({}), this.refs = {};
+  }
+  // ── 表达式求值 ─────────────────────────────────────
+  /**
+   * 求值表达式
+   *
+   * 在 state 上下文中执行任意表达式字符串。
+   * 用于 props 求值、指令表达式（v-if/v-show）、模板插值等。
+   *
+   * @param expression - 表达式字符串（如 'count > 5', 'form.name'）
+   * @returns 求值结果，失败返回 undefined
+   */
+  evaluate(e) {
+    try {
+      return new Function("__ctx__", `with(__ctx__) { return (${e}) }`)(this.state);
+    } catch {
+      return;
+    }
+  }
+  /**
+   * 解析函数
+   *
+   * 将函数体字符串解析为可执行函数。
+   * 函数体内的 this 指向 state，可以访问所有状态变量。
+   *
+   * @param body - 函数体字符串（如 'count.value++'）
+   * @param params - 参数名列表（如 ['newVal', 'oldVal']）
+   * @returns 解析后的函数，解析失败返回空函数
+   */
+  parseFunction(e, t = []) {
+    try {
+      const n = new Function("__ctx__", ...t, `with(__ctx__) { ${e} }`);
+      return (...i) => n(this.state, ...i);
+    } catch {
+      return console.warn(`[RenderContext] Failed to parse function: ${e}`), () => {
+      };
+    }
+  }
+  // ── 赋值（v-model 用） ────────────────────────────
+  /**
+   * 赋值表达式
+   *
+   * 支持 dotted path 赋值，用于 v-model 双向绑定。
+   *
+   * @param path - 赋值目标（如 'form.name', 'count'）
+   * @param value - 新值
+   */
+  assign(e, t) {
+    if (!e.includes(".")) {
+      this.state[e] = t;
+      return;
+    }
+    const n = e.split("."), i = n.pop(), r = n.join(".");
+    try {
+      const o = this.evaluate(r);
+      o && typeof o == "object" && (o[i] = t);
+    } catch {
+    }
+  }
+  // ── 作用域克隆（v-for 用） ────────────────────────
+  /**
+   * 克隆当前上下文（用于 v-for 迭代）
+   *
+   * 继承父作用域的所有状态，并注入局部变量（循环变量 item/index）。
+   *
+   * @param locals - 要注入的局部变量
+   * @returns 新的 RenderContext 实例
+   */
+  clone(e) {
+    const t = new Y();
+    if (t.state = this.state, e)
+      for (const [n, i] of Object.entries(e))
+        t.state[n] = i;
+    return t;
+  }
+  // ── DOM 引用（设计态用） ───────────────────────────
+  /**
+   * 创建 DOM ref 绑定函数
+   *
+   * 返回一个函数，Vue 会将 DOM 元素传入。
+   * 设计态通过此函数获取每个节点的 DOM 元素，用于选中/高亮/拖拽。
+   *
+   * @param nodeId - 节点 ID
+   * @returns ref 回调函数
+   */
+  ref(e) {
+    return (t) => {
+      if (!t) return;
+      const n = () => {
+        if (t instanceof HTMLElement) return t;
+        if (t.$el instanceof HTMLElement) return t.$el;
+        if (t.$?.subTree?.el instanceof HTMLElement) return t.$.subTree.el;
+        const r = t.$?.subTree;
+        if (r) {
+          const o = ee(r);
+          if (o) return o;
+        }
+        return null;
+      }, i = () => {
+        const r = n();
+        return r ? (this.refs[e] = r, this.markElement(r, e), !0) : !1;
+      };
+      i() || we(() => i());
+    };
+  }
+  // ── 设计态 DOM 标记 ────────────────────────────────
+  /**
+   * 给 DOM 元素打设计态标记
+   *
+   * 在设计态模式下，给每个渲染出的 DOM 元素注入：
+   * - `__nodeId__` dataset：节点 ID，用于事件定位
+   * - `draggable`：允许拖拽
+   * - CSS class：设计态样式（可选）
+   *
+   * @param el - DOM 元素
+   * @param nodeId - 节点 ID
+   */
+  markElement(e, t) {
+    e && (e.dataset.__nodeId__ = t, e.draggable = !0);
+  }
+  /**
+   * 清理所有引用
+   */
+  dispose() {
+    this.refs = {};
+  }
+}
+function ee(s) {
+  if (!s) return null;
+  if (s.el instanceof HTMLElement) return s.el;
+  const e = s.children ?? s.dynamicChildren;
+  if (Array.isArray(e))
+    for (const t of e) {
+      const n = ee(t);
+      if (n) return n;
+    }
+  return s.component?.subTree ? ee(s.component.subTree) : null;
+}
+function Me(s) {
+  const { materialStore: e, schemaLoader: t } = s;
+  return {
+    load(n, i) {
+      if (i?.startsWith("schema:")) {
+        const o = i.slice(7);
+        return t ? $e(o, t) : (console.warn(`[Loader] schemaLoader not configured, cannot load: ${i}`), te(n));
+      }
+      return e.getComponent(n) || (console.warn(`[Loader] Component not found: ${n}`), te(n));
+    }
+  };
+}
+async function $e(s, e) {
+  try {
+    const t = await e(s), { createRenderer: n } = await Promise.resolve().then(() => Ke);
+    return n(t);
+  } catch (t) {
+    return console.warn(`[Loader] Failed to load schema: ${s}`, t), te(`Schema:${s}`);
+  }
+}
+function te(s) {
+  return _({
+    name: "PlaceholderComponent",
+    setup() {
+      return () => W("div", {
+        class: "sunny-renderer-placeholder",
+        style: {
+          padding: "8px 12px",
+          border: "1px dashed #ccc",
+          borderRadius: "4px",
+          color: "#999",
+          fontSize: "12px"
+        }
+      }, [`未注册组件: ${s}`]);
+    }
+  });
+}
+function He(s) {
+  const e = s.match(/^\(?\s*(\w+)\s*(?:,\s*(\w+))?\s*\)?\s+in\s+(.+)$/);
+  return e ? {
+    itemName: e[1],
+    indexName: e[2] || void 0,
+    listExpr: e[3].trim()
+  } : null;
+}
+function We(s, e) {
+  if (!e) return { ...s };
+  const t = {};
+  for (const [n, i] of Object.entries(s))
+    if (typeof i == "string" && e.state[i] !== void 0) {
+      const r = e.state[i];
+      t[n] = r?.__v_isRef ? r.value : r;
+    } else
+      t[n] = i;
+  return t;
+}
+function Ue(s, e) {
+  if (!e || !Object.keys(s).length) return {};
+  const t = {};
+  for (const [n, i] of Object.entries(s)) {
+    const r = `on${n.charAt(0).toUpperCase()}${n.slice(1)}`, o = e.state[i];
+    if (o && typeof o == "function")
+      t[r] = o;
+    else {
+      const c = e.parseFunction(`return (${i})`, ["__event__"]);
+      t[r] = (...l) => {
+        try {
+          const d = c(l[0]);
+          typeof d == "function" && d(...l);
+        } catch {
+        }
+      };
+    }
+  }
+  return t;
+}
+function Je(s, e) {
+  if (!e) return {};
+  const t = {};
+  for (const n of s) {
+    if (n.name !== "model") continue;
+    const i = n.arg || "modelValue", r = `onUpdate:${i}`;
+    t[i] = e.evaluate(n.value), t[r] = (o) => {
+      e.assign(n.value, o);
+    };
+  }
+  return t;
+}
+function ie(s, e, t, n) {
+  const i = n === "preview", r = s.directives, o = r.find((l) => l.name === "if");
+  if (o && !(!i || e.evaluate(o.value)))
+    return null;
+  const c = r.find((l) => l.name === "for");
+  if (c && i) {
+    const l = He(c.value);
+    if (l) {
+      const d = e.evaluate(l.listExpr);
+      if (Array.isArray(d))
+        return d.map((h, y) => (e.clone({
+          [l.itemName]: h,
+          ...l.indexName ? { [l.indexName]: y } : {}
+        }), Z(s, e, t, n)));
+    }
+    return Z(s, e, t, n);
+  }
+  return Z(s, e, t, n);
+}
+function Z(s, e, t, n) {
+  const i = n === "preview", r = s.directives, o = t.load(s.name, s.from);
+  !o || typeof o == "string" && o === s.name && t.load(s.name);
+  const c = i ? e : null, l = {
+    ...We(s.props, c),
+    ...Ue(s.events, c),
+    ...Je(r, c)
+  }, d = r.find((b) => b.name === "show");
+  d && i && (e.evaluate(d.value) || (l.style = { ...l.style, display: "none" })), n === "design" && (l.ref = e.ref(s.id));
+  const h = s.children?.length > 0, y = Object.keys(s.slots ?? {}).length > 0;
+  if (!h && !y)
+    return W(o, l);
+  const f = {};
+  if (h && (f.default = () => s.children.map(
+    (b) => de(b, e, t, n)
+  )), y)
+    for (const [b, v] of Object.entries(s.slots))
+      v?.length && (f[b] = () => v.map(
+        (C) => de(C, e, t, n)
+      ));
+  return W(o, l, f);
+}
+function de(s, e, t, n) {
+  const i = ie(s, e, t, n);
+  return i === null ? W("template") : Array.isArray(i) ? W("div", { class: "sunny-renderer-fragment" }, i) : i;
+}
+const Fe = {
+  onMounted: se,
+  onUnmounted: he,
+  onUpdated: Se
+};
+function qe(s, e, t) {
+  const n = t?.mode ?? "preview";
+  return _({
+    name: s.name || "BlockRenderer",
+    setup() {
+      const i = new Y();
+      for (const o of s.state) {
+        const c = Ve(o.value);
+        i.state[o.name] = Ge(c) ? A(c) : ne(c);
+      }
+      for (const o of s.methods)
+        i.state[o.name] = i.parseFunction(o.value, o.params);
+      for (const o of s.computed) {
+        i.evaluate.bind(i);
+        const c = o.value;
+        i.state[o.name] = x(() => {
+          try {
+            return new Function("__ctx__", `with(__ctx__) { return (${c}) }`)(i.state);
+          } catch {
+            return;
+          }
+        });
+      }
+      const r = [];
+      for (const o of s.watch) {
+        const c = i.state[o.name];
+        if (!c) continue;
+        const l = o.params ?? ["newVal", "oldVal"], d = Ce(
+          c,
+          (...h) => {
+            i.parseFunction(o.value, l)(...h);
+          }
+        );
+        r.push(d);
+      }
+      for (const o of s.lifecycleHooks) {
+        const c = Fe[o.name];
+        if (!c) {
+          console.warn(`[createRenderer] Unknown lifecycle hook: ${o.name}`);
+          continue;
+        }
+        c(() => {
+          i.parseFunction(o.value)();
+        });
+      }
+      return he(() => {
+        r.forEach((o) => o()), i.dispose();
+      }), { ctx: i };
+    },
+    render() {
+      return s.rootNode ? e ? ie(s.rootNode, this.ctx, e, n) : (console.warn("[createRenderer] No loader provided, using fallback"), null) : null;
+    }
+  });
+}
+function Ge(s) {
+  return typeof s == "number" || typeof s == "string" || typeof s == "boolean" || s === null || s === void 0;
+}
+const Ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  createRenderer: qe
+}, Symbol.toStringTag, { value: "Module" }));
+class Ye {
+  /** 组件元数据映射（name → ComponentMeta） */
+  metas = /* @__PURE__ */ new Map();
+  // ── 注册 ──────────────────────────────────────────
+  /**
+   * 注册一个组件物料
+   *
+   * @param meta - 组件元数据
+   */
+  register(e) {
+    this.metas.has(e.name) && console.warn(`[MaterialStore] Overwriting existing material: ${e.name}`), this.metas.set(e.name, e);
+  }
+  /**
+   * 批量注册组件物料
+   */
+  registerAll(e) {
+    for (const t of e)
+      this.register(t);
+  }
+  // ── 查询（渲染器用） ────────────────────────────────
+  /**
+   * 获取组件元数据
+   */
+  getMeta(e) {
+    return this.metas.get(e) ?? null;
+  }
+  /**
+   * 获取 Vue 组件引用
+   *
+   * 替代原 ComponentRegistry.get()。
+   */
+  getComponent(e) {
+    return this.metas.get(e)?.component ?? null;
+  }
+  /**
+   * 检查组件是否已注册
+   */
+  has(e) {
+    return this.metas.has(e);
+  }
+  /**
+   * 获取所有组件名 → Vue 组件映射
+   *
+   * 用于将物料中的组件批量注册到 Vue App。
+   */
+  getAllComponents() {
+    return Array.from(this.metas.entries()).map(([e, t]) => [e, t.component]);
+  }
+  /**
+   * 获取嵌套规则
+   */
+  getNestingRules(e) {
+    return this.metas.get(e)?.nestingRules ?? null;
+  }
+  /**
+   * 获取拖入片段
+   */
+  getSnippets(e) {
+    return this.metas.get(e)?.snippets ?? [];
+  }
+  // ── 查询（设计器面板用） ────────────────────────────
+  /**
+   * 获取所有分组名（去重、排序）
+   *
+   * 用于左侧面板渲染分组标题。
+   */
+  getGroups() {
+    const e = /* @__PURE__ */ new Set();
+    let t = 0;
+    const n = /* @__PURE__ */ new Map();
+    for (const i of this.metas.values())
+      i.hidden || e.has(i.group) || (e.add(i.group), n.set(i.group, t++));
+    return Array.from(e);
+  }
+  /**
+   * 按分组获取组件列表
+   *
+   * 用于左侧面板渲染各组下的组件。
+   */
+  getByGroup(e) {
+    return this.filterVisible().filter((t) => t.group === e);
+  }
+  /**
+   * 按分类获取组件列表
+   */
+  getByCategory(e) {
+    return this.filterVisible().filter((t) => t.category === e);
+  }
+  /**
+   * 获取所有可见组件（非隐藏）
+   */
+  getAllVisible() {
+    return this.filterVisible();
+  }
+  /**
+   * 搜索组件（按 name / title / description 匹配）
+   */
+  search(e) {
+    const t = e.toLowerCase();
+    return this.filterVisible().filter(
+      (n) => n.name.toLowerCase().includes(t) || n.title.toLowerCase().includes(t) || (n.description?.toLowerCase().includes(t) ?? !1)
+    );
+  }
+  // ── 嵌套判断（拖拽引擎用） ──────────────────────────
+  /**
+   * 判断能否将子组件放入目标容器
+   */
+  canAcceptChild(e, t) {
+    const n = this.metas.get(e);
+    if (!n) return !1;
+    const i = n.nestingRules;
+    return !(!i.isContainer || i.deniedChildren?.includes(t) || i.allowedChildren && !i.allowedChildren.includes(t));
+  }
+  /**
+   * 判断组件能否作为某父组件的子节点
+   */
+  canBeChildOf(e, t) {
+    const n = this.metas.get(e);
+    if (!n) return !1;
+    const i = n.nestingRules;
+    return i.allowedParents && !i.allowedParents.includes(t) ? !1 : this.canAcceptChild(t, e);
+  }
+  // ── 管理 ──────────────────────────────────────────
+  /**
+   * 取消注册
+   */
+  unregister(e) {
+    this.metas.delete(e);
+  }
+  /**
+   * 清空所有物料
+   */
+  clear() {
+    this.metas.clear();
+  }
+  /**
+   * 获取已注册组件数量
+   */
+  get size() {
+    return this.metas.size;
+  }
+  // ── 内部 ──────────────────────────────────────────
+  /** 过滤隐藏组件 */
+  filterVisible() {
+    return Array.from(this.metas.values()).filter((e) => !e.hidden);
+  }
+}
+class Ze {
+  /** 项目模型（持有所有页面和依赖） */
+  project;
+  /** 历史记录管理器（快照式撤销/重做） */
+  history;
+  /** 物料存储（组件元数据 + 运行时组件注册） */
+  materialStore;
+  /**
+   * 当前选中的节点 ID
+   *
+   * 简单的字符串引用，不持有 NodeModel 实例。
+   * 通过 getSelected() 查询实际的 NodeModel。
+   */
+  _selectedNodeId = null;
+  /**
+   * 选中变更回调
+   *
+   * UI 层（SetterPanel、Designer）注册此回调以响应选中变化。
+   * 替代了之前基于事件的 Selection 通知机制，更简单直接。
+   */
+  onSelectionChange = null;
+  /** 是否已初始化（loadProject 后为 true） */
+  initialized = !1;
+  /** 全局事件取消订阅函数列表 */
+  unsubscribers = [];
+  /**
+   * 创建 Engine 实例
+   *
+   * @param options - 构造选项（必须提供 materialStore）
+   */
+  constructor(e) {
+    this.materialStore = e.materialStore, this.project = new ce("未命名项目"), this.history = new Le(
+      () => this.project.getActivePage(),
+      {
+        maxSize: e.historyMaxSize,
+        batchWindow: e.historyBatchWindow
+      }
+    );
+    const t = () => {
+      this._selectedNodeId = null, this.onSelectionChange?.();
+    };
+    u.on(J, t), this.unsubscribers.push(() => u.off(J, t));
+    const n = (r) => {
+      r.action === "remove" && this._selectedNodeId === r.nodeId && (this._selectedNodeId = null, this.onSelectionChange?.());
+    };
+    u.on(k, n), this.unsubscribers.push(() => u.off(k, n));
+    const i = () => {
+    };
+    u.on(L, i), this.unsubscribers.push(() => u.off(L, i));
+  }
+  // ── 项目管理 ────────────────────────────────────────
+  /**
+   * 加载项目数据
+   *
+   * 从 ProjectModelJSON 反序列化并覆盖当前 project 的字段。
+   * 不替换 project 引用本身（保持 Engine 其他子系统持有的一致性）。
+   * 清空选中状态，广播 EVENT_PROJECT_LOAD。
+   *
+   * @param json - 项目序列化数据
+   */
+  loadProject(e) {
+    const t = ce.fromJSON(e);
+    this.project.pages = t.pages, this.project.name = t.name, this.project.activePageId = t.activePageId, this.project.dependencies = t.dependencies, this.project.apis = t.apis, this._selectedNodeId = null, this.initialized = !0, u.emit(G, { projectId: this.project.id });
+  }
+  /**
+   * 获取当前激活页面的 BlockModel
+   *
+   * @returns 当前激活的 BlockModel，无页面时返回 null
+   */
+  getActiveBlock() {
+    return this.project.getActivePage();
+  }
+  /**
+   * 获取当前激活页面的序列化数据
+   *
+   * @returns BlockModelJSON，无页面时返回 null
+   */
+  getActiveBlockJSON() {
+    return this.getActiveBlock()?.toJSON() ?? null;
+  }
+  /**
+   * 切换当前激活页面
+   *
+   * 委托给 ProjectModel.switchPage()，广播 EVENT_PAGE_SWITCH。
+   * 构造函数中已监听此事件，自动清空选中。
+   *
+   * @param pageId - 目标页面 ID
+   */
+  switchPage(e) {
+    this.project.switchPage(e);
+  }
+  // ── 节点操作 ────────────────────────────────────────
+  /**
+   * 在指定父节点下添加子节点
+   *
+   * 委托给当前活跃 BlockModel 的 addNode()。
+   * 触发 EVENT_NODE_CHANGE（action=add）。
+   *
+   * @param parentId - 父节点 ID
+   * @param node - 要添加的 NodeModel 实例
+   * @param index - 插入位置，默认追加到末尾
+   */
+  addNode(e, t, n) {
+    const i = this.getActiveBlock();
+    i && i.addNode(e, t, n);
+  }
+  /**
+   * 从节点树中移除指定节点
+   *
+   * 委托给当前活跃 BlockModel 的 removeNode()。
+   * 触发 EVENT_NODE_CHANGE（action=remove）。
+   * 构造函数中已监听此事件，自动清空选中。
+   *
+   * @param nodeId - 要移除的节点 ID
+   * @returns 被移除的 NodeModel，不存在时返回 null
+   */
+  removeNode(e) {
+    const t = this.getActiveBlock();
+    return t ? t.removeNode(e) : null;
+  }
+  /**
+   * 将节点从一个父节点移动到另一个父节点
+   *
+   * 委托给 BlockModel.moveNode()。
+   *
+   * @param nodeId - 要移动的节点 ID
+   * @param targetParentId - 目标父节点 ID
+   * @param index - 插入位置，默认追加到末尾
+   */
+  moveNode(e, t, n) {
+    const i = this.getActiveBlock();
+    i && i.moveNode(e, t, n);
+  }
+  /**
+   * 将节点在同级中上移一位
+   *
+   * 找到父节点后调用 NodeModel.moveChild(idx-1)。
+   * 如果已是第一个子节点则不操作。
+   *
+   * @param nodeId - 要移动的节点 ID
+   */
+  moveNodeUp(e) {
+    const t = this.getActiveBlock();
+    if (!t) return;
+    const n = t.findParent(e);
+    if (!n) return;
+    const i = n.children.findIndex((r) => r.id === e);
+    i <= 0 || n.moveChild(e, i - 1);
+  }
+  /**
+   * 将节点在同级中下移一位
+   *
+   * 找到父节点后调用 NodeModel.moveChild(idx+1)。
+   * 如果已是最后一个子节点则不操作。
+   *
+   * @param nodeId - 要移动的节点 ID
+   */
+  moveNodeDown(e) {
+    const t = this.getActiveBlock();
+    if (!t) return;
+    const n = t.findParent(e);
+    if (!n) return;
+    const i = n.children.findIndex((r) => r.id === e);
+    i === -1 || i >= n.children.length - 1 || n.moveChild(e, i + 1);
+  }
+  // ── 选中状态 ────────────────────────────────────────
+  /**
+   * 设置当前选中节点
+   *
+   * 更新 _selectedNodeId 并触发 onSelectionChange 回调。
+   * 传入 null 清空选中。
+   *
+   * @param nodeId - 节点 ID，传入 null 清空选中
+   */
+  select(e) {
+    this._selectedNodeId = e, this.onSelectionChange?.();
+  }
+  /**
+   * 获取当前选中的 NodeModel 实例
+   *
+   * 通过 _selectedNodeId 查询 BlockModel 中的节点。
+   *
+   * @returns 选中的 NodeModel，未选中时返回 null
+   */
+  getSelected() {
+    return this._selectedNodeId ? this.getActiveBlock()?.findNode(this._selectedNodeId) ?? null : null;
+  }
+  /**
+   * 获取当前选中的节点 ID
+   *
+   * @returns 节点 ID 字符串，未选中时返回 null
+   */
+  getSelectedNodeId() {
+    return this._selectedNodeId;
+  }
+  // ── History 快捷方法 ────────────────────────────────
+  /** 撤销（委托给 History.undo()） */
+  undo() {
+    this.history.undo();
+  }
+  /** 重做（委托给 History.redo()） */
+  redo() {
+    this.history.redo();
+  }
+  /** 是否可以撤销 */
+  canUndo() {
+    return this.history.canUndo();
+  }
+  /** 是否可以重做 */
+  canRedo() {
+    return this.history.canRedo();
+  }
+  // ── 序列化 ──────────────────────────────────────────
+  /**
+   * 序列化项目数据
+   *
+   * 委托给 ProjectModel.toJSON()。
+   *
+   * @returns 可 JSON.stringify 的 ProjectModelJSON
+   */
+  toJSON() {
+    return this.project.toJSON();
+  }
+  // ── 生命周期 ────────────────────────────────────────
+  /**
+   * 销毁 Engine，释放所有资源
+   *
+   * 取消事件订阅，销毁 History，清空选中状态。
+   */
+  destroy() {
+    for (const e of this.unsubscribers)
+      e();
+    this.unsubscribers = [], this.history.dispose(), this._selectedNodeId = null, this.initialized = !1;
+  }
+}
+const Xe = { class: "flex items-center justify-between h-[48px] px-4 border-b border-[var(--color-border-2)] bg-[var(--color-bg-2)] shrink-0" }, Qe = { class: "flex items-center gap-2" }, et = { class: "text-sm font-semibold text-[var(--color-text-1)]" }, tt = { class: "flex items-center gap-2" }, nt = { class: "flex items-center gap-2" }, st = /* @__PURE__ */ _({
+  name: "DesignerHeader",
+  __name: "Header",
+  props: {
+    title: {},
+    logo: {}
+  },
+  emits: ["togglePreview"],
+  setup(s) {
+    return (e, t) => (a(), m("header", Xe, [
+      p("div", Qe, [
+        s.logo ? (a(), w($(s.logo), {
+          key: 0,
+          size: 24
+        })) : S("", !0),
+        p("span", et, D(s.title), 1)
+      ]),
+      p("div", tt, [
+        E(e.$slots, "toolbar")
+      ]),
+      p("div", nt, [
+        E(e.$slots, "actions")
+      ])
+    ]));
+  }
+}), it = { class: "flex h-full shrink-0" }, rt = { class: "w-[48px] flex flex-col items-center py-2 gap-1 border-r border-[var(--color-border-2)] bg-[var(--color-bg-2)] shrink-0" }, ot = ["onClick"], at = {
+  key: 0,
+  class: "w-[24px] h-[1px] bg-[var(--color-border-2)] my-1"
+}, lt = ["onClick"], ct = {
+  key: 0,
+  class: "w-[352px] h-full flex flex-col"
+}, dt = { class: "flex items-center justify-between h-[40px] px-3 border-b border-[var(--color-border-2)] shrink-0" }, ut = { class: "text-sm font-medium text-[var(--color-text-1)]" }, ht = { class: "flex-1 overflow-y-auto" }, pt = /* @__PURE__ */ _({
+  name: "DesignerApps",
+  __name: "Apps",
+  props: {
+    widgetRegistry: {}
+  },
+  setup(s) {
+    const e = s, t = A(null), n = A(!1), i = x(() => e.widgetRegistry.getPanelWidgets("apps")), r = x(() => e.widgetRegistry.getOtherWidgets("apps")), o = x(() => t.value ? e.widgetRegistry.get(t.value) : null), c = x(() => i.value.filter((h) => h.component).map((h) => h.name));
+    function l(h) {
+      h.openType === "panel" ? d(h) : h.openType === "dialog" ? h.handler?.() : h.openType === "link" && h.link && window.open(h.link, "_blank");
+    }
+    function d(h) {
+      t.value === h.name ? (n.value = !1, t.value = null) : (t.value = h.name, n.value = !0);
+    }
+    return (h, y) => {
+      const f = R("a-tooltip"), b = R("icon-close");
+      return a(), m("div", it, [
+        p("div", rt, [
+          (a(!0), m(T, null, z(i.value, (v) => (a(), w(f, {
+            key: v.name,
+            content: v.title,
+            position: "right"
+          }, {
+            default: P(() => [
+              p("span", {
+                class: q(["flex items-center justify-center w-[36px] h-[36px] rounded cursor-pointer transition-colors", [
+                  t.value === v.name ? "bg-[rgba(var(--primary-6),0.1)] text-[rgb(var(--primary-6))]" : "text-[var(--color-text-2)] hover:bg-[var(--color-fill-2)] hover:text-[var(--color-text-1)]"
+                ]]),
+                onClick: (C) => l(v)
+              }, [
+                (a(), w($(v.icon), { size: 20 }))
+              ], 10, ot)
+            ]),
+            _: 2
+          }, 1032, ["content"]))), 128)),
+          i.value.length && r.value.length ? (a(), m("div", at)) : S("", !0),
+          (a(!0), m(T, null, z(r.value, (v) => (a(), w(f, {
+            key: v.name,
+            content: v.title,
+            position: "right"
+          }, {
+            default: P(() => [
+              p("span", {
+                class: "flex items-center justify-center w-[36px] h-[36px] rounded cursor-pointer text-[var(--color-text-2)] hover:bg-[var(--color-fill-2)] hover:text-[var(--color-text-1)] transition-colors",
+                onClick: (C) => l(v)
+              }, [
+                (a(), w($(v.icon), { size: 20 }))
+              ], 8, lt)
+            ]),
+            _: 2
+          }, 1032, ["content"]))), 128))
+        ]),
+        p("div", {
+          class: "border-r border-[var(--color-border-2)] bg-[var(--color-bg-2)] overflow-hidden transition-[width] duration-200",
+          style: j({ width: n.value ? "352px" : "0px" })
+        }, [
+          n.value && o.value ? (a(), m("div", ct, [
+            p("div", dt, [
+              p("span", ut, D(o.value.title), 1),
+              p("span", {
+                class: "flex items-center justify-center w-6 h-6 rounded cursor-pointer text-[var(--color-text-3)] hover:bg-[var(--color-fill-2)] hover:text-[var(--color-text-1)] transition-colors",
+                onClick: y[0] || (y[0] = (v) => {
+                  n.value = !1, t.value = null;
+                })
+              }, [
+                N(b, { size: 14 })
+              ])
+            ]),
+            p("div", ht, [
+              (a(), w(Ne, { include: c.value }, [
+                (a(), w($(o.value.component), {
+                  key: o.value.name
+                }))
+              ], 1032, ["include"]))
+            ])
+          ])) : S("", !0)
+        ], 4)
+      ]);
+    };
+  }
+});
+class mt {
+  /** 物料存储 */
+  materialStore;
+  /** 组件加载器（从 MaterialStore 创建） */
+  loader = null;
+  /** 渲染上下文（设计态，包含节点标记和 refs） */
+  renderCtx = null;
+  /** iframe DOM 元素 */
+  iframe = null;
+  /** iframe 内的 Vue 应用实例 */
+  innerApp = null;
+  /** 响应式 schema（变更触发重渲染） */
+  schemaRef = { value: null };
+  /** 父文档样式变化监听器 */
+  styleObserver = null;
+  /** 是否已挂载（iframe load 完成） */
+  mounted = !1;
+  /** 就绪回调队列（iframe load 后依次调用） */
+  readyCallbacks = [];
+  /**
+   * 创建 Simulator 实例
+   *
+   * @param options - 构造选项
+   */
+  constructor(e) {
+    this.materialStore = e.materialStore;
+  }
+  // ── 生命周期 ──────────────────────────────────────────
+  /**
+   * 挂载模拟器到指定容器
+   *
+   * 创建 iframe，添加到 host 容器，等待 iframe load 事件。
+   * load 完成后自动写入骨架、注入样式、启动 Vue 应用。
+   *
+   * @param host - 挂载容器 DOM 元素
+   */
+  mount(e) {
+    this.mounted || (this.iframe = document.createElement("iframe"), this.iframe.setAttribute("sandbox", "allow-same-origin allow-scripts"), this.iframe.style.width = "100%", this.iframe.style.height = "100%", this.iframe.style.border = "none", this.iframe.style.display = "block", e.appendChild(this.iframe), this.iframe.addEventListener("load", this.onIframeLoad));
+  }
+  /**
+   * 销毁模拟器
+   *
+   * 卸载 Vue 应用，断开样式监听，移除 iframe。
+   */
+  destroy() {
+    this.innerApp && (this.innerApp.unmount(), this.innerApp = null), this.styleObserver && (this.styleObserver.disconnect(), this.styleObserver = null), this.iframe && (this.iframe.removeEventListener("load", this.onIframeLoad), this.iframe.remove(), this.iframe = null), this.renderCtx?.dispose(), this.renderCtx = null, this.loader = null, this.mounted = !1;
+  }
+  // ── 渲染控制 ──────────────────────────────────────────
+  /**
+   * 全量渲染 Block
+   *
+   * 更新 reactive schemaRef，触发 RootComponent 重渲染。
+   * 在页面切换、History 恢复、结构变更后调用。
+   *
+   * @param blockJSON - 根节点的序列化数据，传 null 清空画布
+   */
+  renderBlock(e) {
+    this.schemaRef.value = e;
+  }
+  /**
+   * 增量更新节点（预留）
+   *
+   * 当前仍走全量渲染（structuredClone 触发 reactive 变更检测）。
+   * 后续可通过 renderCtx.refs[nodeId] 获取组件实例，直接更新 props。
+   *
+   * @param _nodeId - 节点 ID
+   * @param _nodeJSON - 节点序列化数据
+   */
+  renderNodeUpdate(e, t) {
+    const n = this.schemaRef.value;
+    n && (this.schemaRef.value = structuredClone(n));
+  }
+  // ── DOM 查询 ──────────────────────────────────────────
+  /**
+   * 获取 iframe 的 Document
+   *
+   * 供 EventBridge 绑定事件使用。
+   *
+   * @returns iframe Document，iframe 不存在时返回 null
+   */
+  getDocument() {
+    return this.iframe?.contentDocument ?? null;
+  }
+  /**
+   * 获取 iframe 的 Window
+   *
+   * @returns iframe Window，iframe 不存在时返回 null
+   */
+  getWindow() {
+    return this.iframe?.contentWindow ?? null;
+  }
+  /**
+   * 获取 iframe 在主窗口中的偏移矩形
+   *
+   * 供 Designer 计算 Overlay 位置使用。
+   *
+   * @returns DOMRect，iframe 不存在时返回 null
+   */
+  getIframeRect() {
+    return this.iframe?.getBoundingClientRect() ?? null;
+  }
+  /**
+   * 通过节点 ID 获取对应的 DOM 元素
+   *
+   * 在 iframe document 中查询 `data-__node-id__` 属性。
+   * 由 @designer/render 的 RenderContext.markElement() 注入。
+   *
+   * @param nodeId - 节点 ID
+   * @returns DOM 元素，不存在时返回 null
+   */
+  getNodeElement(e) {
+    const t = this.getDocument();
+    return t ? t.querySelector(`[data-__node-id__="${e}"]`) : null;
+  }
+  /**
+   * 获取渲染上下文
+   *
+   * @returns RenderContext 实例，未初始化时返回 null
+   */
+  getRenderContext() {
+    return this.renderCtx;
+  }
+  /**
+   * 是否已挂载（iframe load 完成）
+   */
+  isMounted() {
+    return this.mounted;
+  }
+  /**
+   * 注册就绪回调
+   *
+   * 如果 iframe 已加载则立即调用，否则等 load 后调用。
+   * 供 Designer 等子系统等待 Simulator 初始化完成。
+   *
+   * @param cb - 就绪回调
+   */
+  onReady(e) {
+    this.mounted ? e() : this.readyCallbacks.push(e);
+  }
+  // ── 内部 ──────────────────────────────────────────────
+  /**
+   * iframe 加载完成回调
+   *
+   * 依次：写入骨架 → 注入样式 → 挂载渲染器 → 监听样式变化 → 通知就绪
+   */
+  onIframeLoad = () => {
+    const e = this.iframe?.contentDocument;
+    if (!e) return;
+    this.writeSkeleton(e), this.injectStyles(e), this.mountRenderer(e), this.observeStyleChanges(e), this.mounted = !0;
+    const t = this.readyCallbacks;
+    this.readyCallbacks = [];
+    for (const n of t) n();
+  };
+  /**
+   * 写入 HTML 骨架
+   *
+   * 在 iframe 中创建最小化的 HTML 文档，包含基础重置样式和渲染根节点。
+   *
+   * @param doc - iframe Document
+   */
+  writeSkeleton(e) {
+    e.open(), e.write(`<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    /* 基础重置 */
+    *, *::before, *::after { box-sizing: border-box; }
+    body { margin: 0; padding: 0; font-family: inherit; }
+  </style>
+</head>
+<body>
+  <div id="renderer-root"></div>
+</body>
+</html>`), e.close();
+  }
+  /**
+   * 注入父文档样式
+   *
+   * 遍历主文档的所有样式表，将 CSS 规则复制到 iframe 中。
+   * 确保画布内的组件与主文档使用相同的样式（Arco Design、Tailwind 等）。
+   * 跨域样式表无法读取，静默忽略。
+   *
+   * @param doc - iframe Document
+   */
+  injectStyles(e) {
+    const t = e.createElement("style");
+    t.setAttribute("data-source", "designer-parent");
+    let n = "";
+    try {
+      const i = Array.from(document.styleSheets);
+      for (const r of i)
+        try {
+          const o = Array.from(r.cssRules);
+          for (const c of o)
+            n += c.cssText + `
+`;
+        } catch {
+        }
+    } catch {
+    }
+    t.textContent = n, e.head.appendChild(t);
+  }
+  /**
+   * 在 iframe 中创建 Vue 应用
+   *
+   * 1. 创建 reactive schema（响应式数据驱动渲染）
+   * 2. 创建 ComponentLoader（物料组件加载）
+   * 3. 创建 RenderContext（设计态渲染上下文）
+   * 4. 创建 RootComponent（setup 返回 render 函数）
+   * 5. 注册所有物料组件到 Vue 应用
+   * 6. 挂载到 iframe 的 #renderer-root
+   *
+   * @param doc - iframe Document
+   */
+  mountRenderer(e) {
+    const t = e.getElementById("renderer-root");
+    if (!t) return;
+    this.schemaRef = ne({ value: null }), this.loader = Me({ materialStore: this.materialStore }), this.renderCtx = new Y();
+    const n = this, i = {
+      setup() {
+        return () => {
+          if (!n.schemaRef.value) return null;
+          try {
+            return ie(
+              n.schemaRef.value,
+              n.renderCtx,
+              n.loader,
+              "design"
+            );
+          } catch (r) {
+            return console.warn("[Simulator] render error:", r), null;
+          }
+        };
+      }
+    };
+    this.innerApp = _e(i), this.innerApp.config.errorHandler = (r) => {
+      console.warn("[Simulator] component error:", r);
+    };
+    for (const [r, o] of this.materialStore.getAllComponents())
+      typeof o != "string" && this.innerApp.component(r, o);
+    this.innerApp.mount(t);
+  }
+  /**
+   * 监听父文档样式变化
+   *
+   * 通过 MutationObserver 监听 document.head 的变化（样式热更新等），
+   * 变化时重新注入样式到 iframe。
+   *
+   * @param doc - iframe Document
+   */
+  observeStyleChanges(e) {
+    this.styleObserver = new MutationObserver(() => {
+      const t = e.querySelector('[data-source="designer-parent"]');
+      t && t.remove(), this.injectStyles(e);
+    }), this.styleObserver.observe(document.head, {
+      childList: !0,
+      subtree: !0
+    });
+  }
+}
+class ft {
+  /** 监听的 document（iframe 内） */
+  doc;
+  /** 事件处理器映射（每种事件类型对应一个 Set） */
+  handlers = /* @__PURE__ */ new Map();
+  /** DOM 事件清理函数列表 */
+  cleanupFns = [];
+  /**
+   * 创建 EventBridge
+   *
+   * @param doc - iframe 的 Document 对象（可为 null，后续通过 setDocument 设置）
+   */
+  constructor(e) {
+    this.doc = e;
+  }
+  /**
+   * 启动事件监听
+   *
+   * 在 iframe document 上绑定 click/mouseover/mouseout 事件（capture 阶段）。
+   * 必须在 doc 可用后调用。
+   */
+  setup() {
+    this.doc && (this.bindDOMEvent("click", "nodeClick"), this.bindDOMEvent("mouseover", "nodeHover"), this.bindDOMEvent("mouseout", "nodeMouseLeave"));
+  }
+  /**
+   * 停止事件监听
+   *
+   * 移除所有 DOM 事件监听，清空处理器。
+   */
+  teardown() {
+    for (const e of this.cleanupFns)
+      e();
+    this.cleanupFns = [], this.handlers.clear();
+  }
+  /**
+   * 更新 document 引用
+   *
+   * iframe 重建时调用（如页面刷新），先 teardown 再重新绑定。
+   *
+   * @param doc - 新的 Document 对象
+   */
+  setDocument(e) {
+    this.teardown(), this.doc = e;
+  }
+  // ── 事件订阅 ──────────────────────────────────────────
+  /**
+   * 注册事件处理器
+   *
+   * @param event - Bridge 事件类型
+   * @param handler - 处理函数
+   * @returns 取消注册函数
+   */
+  on(e, t) {
+    let n = this.handlers.get(e);
+    return n || (n = /* @__PURE__ */ new Set(), this.handlers.set(e, n)), n.add(t), () => {
+      n.delete(t);
+    };
+  }
+  // ── 内部 ──────────────────────────────────────────────
+  /**
+   * 绑定 DOM 事件到 Bridge 事件
+   *
+   * 在 iframe document 上以 capture 模式监听 DOM 事件，
+   * 通过 findNodeId() 定位节点后发射对应的 Bridge 事件。
+   *
+   * @param domEvent - DOM 事件名（如 'click'）
+   * @param bridgeEvent - Bridge 事件名（如 'nodeClick'）
+   */
+  bindDOMEvent(e, t) {
+    const n = this.doc;
+    if (!n) return;
+    const i = (r) => {
+      const o = this.findNodeId(r.target);
+      o && this.emit(t, {
+        nodeId: o,
+        originalEvent: r
+      });
+    };
+    n.addEventListener(e, i, !0), this.cleanupFns.push(() => {
+      n.removeEventListener(e, i, !0);
+    });
+  }
+  /**
+   * 从 DOM 元素向上查找 data-__node-id__
+   *
+   * 沿 parentElement 向上遍历，找到第一个标记了节点 ID 的元素。
+   * 这个属性由 @designer/render 的 RenderContext.markElement() 注入。
+   *
+   * @param el - 起始 DOM 元素
+   * @returns 节点 ID，未找到时返回 null
+   */
+  findNodeId(e) {
+    let t = e;
+    for (; t && t.parentElement !== null; ) {
+      const n = t.getAttribute?.("data-__node-id__");
+      if (n) return n;
+      t = t.parentElement;
+    }
+    return null;
+  }
+  /**
+   * 发射 Bridge 事件
+   *
+   * 通知所有注册了该事件类型的处理器。
+   *
+   * @param event - Bridge 事件类型
+   * @param payload - 事件载荷
+   */
+  emit(e, t) {
+    const n = this.handlers.get(e);
+    if (n)
+      for (const i of n)
+        i(t);
+  }
+}
+class gt {
+  /** Simulator 实例 */
+  simulator;
+  /** Engine 实例 */
+  engine;
+  /** 物料存储 */
+  materialStore;
+  /** 节点操作回调 */
+  actions;
+  /** 当前悬浮的节点 ID（响应式，供 useDesigner 消费） */
+  hoveredNodeId = A(null);
+  /** 当前选中的节点 ID（响应式，从 engine 同步） */
+  selectedNodeId = A(null);
+  /** iframe 事件桥梁 */
+  bridge = null;
+  /** EventBridge 取消订阅函数列表 */
+  unsubscribers = [];
+  /** 是否已激活 */
+  active = !1;
+  /** 悬浮框隐藏延迟定时器（30ms 防闪烁） */
+  hoverHideTimer = null;
+  /** engine.onSelectionChange 的前一个回调（deactivate 时恢复） */
+  prevOnSelectionChange = null;
+  /**
+   * 创建 Designer 实例
+   *
+   * @param options - 构造选项
+   */
+  constructor(e) {
+    this.simulator = e.simulator, this.engine = e.engine, this.materialStore = e.materialStore, this.actions = e.actions ?? {};
+  }
+  // ── 生命周期 ──────────────────────────────────────────
+  /**
+   * 激活 Designer
+   *
+   * 等 Simulator 就绪后设置 EventBridge。
+   * 调用多次安全（幂等）。
+   */
+  activate() {
+    this.active || (this.simulator.onReady(() => {
+      this.setupBridge();
+    }), this.prevOnSelectionChange = this.engine.onSelectionChange, this.engine.onSelectionChange = () => {
+      this.prevOnSelectionChange?.(), this.selectedNodeId.value = this.engine.getSelectedNodeId();
+    }, this.active = !0);
+  }
+  /**
+   * 停用 Designer
+   *
+   * 清理 EventBridge、定时器、订阅。
+   */
+  deactivate() {
+    if (this.active) {
+      this.teardownBridge(), this.engine.onSelectionChange = this.prevOnSelectionChange, this.prevOnSelectionChange = null, this.hoverHideTimer && (clearTimeout(this.hoverHideTimer), this.hoverHideTimer = null);
+      for (const e of this.unsubscribers)
+        e();
+      this.unsubscribers = [], this.hoveredNodeId.value = null, this.selectedNodeId.value = null, this.active = !1;
+    }
+  }
+  /** 是否已激活 */
+  isActive() {
+    return this.active;
+  }
+  // ── EventBridge ──────────────────────────────────────
+  /**
+   * 设置 EventBridge
+   *
+   * 在 iframe document 上监听 click/mouseover/mouseout。
+   */
+  setupBridge() {
+    const e = this.simulator.getDocument();
+    if (!e) return;
+    this.bridge = new ft(e), this.bridge.setup();
+    const t = this.bridge.on("nodeClick", this.handleNodeClick), n = this.bridge.on("nodeHover", this.handleNodeHover), i = this.bridge.on("nodeMouseLeave", this.handleNodeMouseLeave);
+    this.unsubscribers.push(t, n, i);
+  }
+  /** 拆除 EventBridge */
+  teardownBridge() {
+    this.bridge?.teardown(), this.bridge = null;
+  }
+  // ── 拖拽（预留）──────────────────────────────────────
+  /** 开始拖拽（预留接口） */
+  startDrag(e) {
+  }
+  /** 取消拖拽（预留接口） */
+  cancelDrag() {
+  }
+  // ── 事件处理器 ──────────────────────────────────────
+  /** 节点点击：清空悬浮，选中节点 */
+  handleNodeClick = (e) => {
+    this.hoveredNodeId.value = null, this.engine.select(e.nodeId);
+  };
+  /** 节点悬浮：更新 hoveredNodeId（已选中节点不显示悬浮框，同一节点不重复） */
+  handleNodeHover = (e) => {
+    if (this.hoverHideTimer && (clearTimeout(this.hoverHideTimer), this.hoverHideTimer = null), this.engine.getSelectedNodeId() === e.nodeId) {
+      this.hoveredNodeId.value = null;
+      return;
+    }
+    this.hoveredNodeId.value !== e.nodeId && (this.hoveredNodeId.value = e.nodeId);
+  };
+  /** 鼠标离开：30ms 延迟清空悬浮（防闪烁） */
+  handleNodeMouseLeave = () => {
+    this.hoverHideTimer = setTimeout(() => {
+      this.hoveredNodeId.value = null;
+    }, 30);
+  };
+}
+function vt(s) {
+  const e = s.simulator, t = A(0);
+  function n() {
+    t.value++;
+  }
+  const i = x(() => {
+    t.value;
+    const d = s.hoveredNodeId.value;
+    return d ? ue(e, d) : null;
+  }), r = x(() => {
+    t.value;
+    const d = s.selectedNodeId.value;
+    return d ? ue(e, d) : null;
+  }), o = x(() => {
+    t.value;
+    const d = s.selectedNodeId.value;
+    return d ? yt(e, d) : null;
+  }), c = x(() => {
+    const d = s.selectedNodeId.value;
+    if (!d) return null;
+    const h = s.engine.getActiveBlock();
+    return h ? h.findNode(d)?.name ?? null : null;
+  }), l = x(() => {
+    const d = s.hoveredNodeId.value;
+    if (!d) return null;
+    const h = s.engine.getActiveBlock();
+    return h ? h.findNode(d)?.name ?? null : null;
+  });
+  return {
+    hoverStyle: i,
+    selectStyle: r,
+    toolbarStyle: o,
+    selectedNodeName: c,
+    hoveredNodeName: l,
+    designer: s,
+    refresh: n
+  };
+}
+function ye(s, e) {
+  const t = s.getIframeRect();
+  if (!t) return null;
+  const n = s.getNodeElement(e);
+  if (!n) return null;
+  const i = n.getBoundingClientRect();
+  return {
+    left: t.left + i.left,
+    top: t.top + i.top,
+    width: i.width,
+    height: i.height
+  };
+}
+function ue(s, e) {
+  const t = ye(s, e);
+  return t ? {
+    left: `${t.left}px`,
+    top: `${t.top}px`,
+    width: `${t.width}px`,
+    height: `${t.height}px`
+  } : null;
+}
+function yt(s, e) {
+  const t = ye(s, e);
+  return t ? {
+    left: `${t.left + t.width - 100}px`,
+    top: `${t.top - 28}px`,
+    width: "100px",
+    height: "28px"
+  } : null;
+}
+const bt = {
+  key: 0,
+  class: "absolute left-0 -top-5 px-1.5 text-[10px] leading-4 text-white bg-[rgb(var(--primary-6))] rounded-sm whitespace-nowrap"
+}, xt = ["title"], kt = {
+  key: 1,
+  class: "w-px h-3 bg-[var(--color-border-2)]"
+}, wt = /* @__PURE__ */ _({
+  name: "DesignerOverlay",
+  __name: "DesignerOverlay",
+  props: {
+    hoverStyle: {},
+    selectStyle: {},
+    toolbarStyle: {},
+    selectedNodeName: {},
+    hoveredNodeName: {},
+    designer: {},
+    dragging: { type: Boolean }
+  },
+  setup(s) {
+    const e = s;
+    function t() {
+      const r = e.designer.selectedNodeId.value;
+      r && e.designer.actions.onNodeMoveUp?.(r);
+    }
+    function n() {
+      const r = e.designer.selectedNodeId.value;
+      r && e.designer.actions.onNodeMoveDown?.(r);
+    }
+    function i() {
+      const r = e.designer.selectedNodeId.value;
+      r && e.designer.actions.onNodeDelete?.(r);
+    }
+    return (r, o) => (a(), m(T, null, [
+      s.hoverStyle ? (a(), m("div", {
+        key: 0,
+        class: "fixed pointer-events-none z-[999]",
+        style: j(s.hoverStyle)
+      }, [
+        s.hoveredNodeName ? (a(), m("span", bt, D(s.hoveredNodeName), 1)) : S("", !0),
+        o[0] || (o[0] = p("div", { class: "w-full h-full border-[2px] border-dashed border-[rgba(var(--primary-6),0.6)] bg-[rgba(var(--primary-6),0.04)]" }, null, -1))
+      ], 4)) : S("", !0),
+      s.selectStyle ? (a(), m("div", {
+        key: 1,
+        class: "fixed pointer-events-none z-[999] border-[2px] border-solid border-[rgb(var(--primary-6))] bg-[rgba(var(--primary-6),0.06)]",
+        style: j(s.selectStyle)
+      }, null, 4)) : S("", !0),
+      s.toolbarStyle ? (a(), m("div", {
+        key: 2,
+        class: "fixed pointer-events-none z-[1000]",
+        style: j(s.toolbarStyle)
+      }, [
+        p("div", {
+          class: q([s.dragging ? "pointer-events-none" : "pointer-events-auto", "flex items-center h-full bg-[var(--color-bg-5)] rounded shadow-sm border border-[var(--color-border-2)]"])
+        }, [
+          s.selectedNodeName ? (a(), m("span", {
+            key: 0,
+            class: "px-2 text-xs text-[var(--color-text-2)] truncate max-w-[60px]",
+            title: s.selectedNodeName
+          }, D(s.selectedNodeName), 9, xt)) : S("", !0),
+          s.selectedNodeName ? (a(), m("div", kt)) : S("", !0),
+          p("button", {
+            class: "flex items-center justify-center w-6 h-6 text-[var(--color-text-2)] hover:text-[rgb(var(--primary-6))] hover:bg-[rgba(var(--primary-6),0.1)] rounded transition-colors",
+            title: "上移",
+            onClick: t
+          }, [
+            N(H(Be), { size: 14 })
+          ]),
+          p("button", {
+            class: "flex items-center justify-center w-6 h-6 text-[var(--color-text-2)] hover:text-[rgb(var(--primary-6))] hover:bg-[rgba(var(--primary-6),0.1)] rounded transition-colors",
+            title: "下移",
+            onClick: n
+          }, [
+            N(H(Oe), { size: 14 })
+          ]),
+          p("button", {
+            class: "flex items-center justify-center w-6 h-6 text-[var(--color-text-3)] hover:text-[rgb(var(--danger-6))] hover:bg-[rgba(var(--danger-6),0.1)] rounded transition-colors",
+            title: "删除",
+            onClick: i
+          }, [
+            N(H(Re), { size: 14 })
+          ])
+        ], 2)
+      ], 4)) : S("", !0)
+    ], 64));
+  }
+}), Ct = /* @__PURE__ */ _({
+  name: "DesignerWorkspace",
+  __name: "Workspace",
+  emits: ["nodeClick", "nodeHover"],
+  setup(s, { emit: e }) {
+    const t = F("designer-engine"), n = A();
+    let i = null, r = [];
+    const o = le(), c = le(null), l = A(!1);
+    se(() => {
+      if (!n.value) return;
+      i = new mt({ materialStore: t.materialStore }), i.mount(n.value);
+      const f = n.value.querySelector("iframe");
+      document.addEventListener("dragstart", () => {
+        f && (f.style.pointerEvents = "none"), l.value = !0;
+      }), document.addEventListener("dragend", () => {
+        f && (f.style.pointerEvents = ""), l.value = !1;
+      });
+      const b = new gt({
+        simulator: i,
+        engine: t,
+        materialStore: t.materialStore,
+        actions: {
+          onNodeDelete: (O) => {
+            t.select(null), t.removeNode(O);
+          },
+          onNodeMoveUp: (O) => t.moveNodeUp(O),
+          onNodeMoveDown: (O) => t.moveNodeDown(O)
+        }
+      });
+      b.activate(), o.value = b, c.value = vt(b), i.onReady(() => {
+        d();
+      });
+      const v = () => {
+        d();
+      };
+      u.on(G, v), r.push(() => u.off(G, v));
+      const C = () => {
+        t.select(null), d();
+      };
+      u.on(J, C), r.push(() => u.off(J, C));
+      const B = (O) => {
+        if (O.action === "props" || O.action === "events" || O.action === "directive") {
+          if (i?.isMounted() && O.nodeId) {
+            const re = t.getActiveBlock();
+            if (re) {
+              const oe = re.findNode(O.nodeId);
+              oe && i.renderNodeUpdate(O.nodeId, oe.toJSON());
+            }
+          }
+        } else
+          d();
+      };
+      u.on(k, B), r.push(() => u.off(k, B));
+      const g = () => {
+        d();
+      };
+      u.on(U, g), r.push(() => u.off(U, g));
+      const I = () => {
+        d();
+      };
+      u.on(L, I), r.push(() => u.off(L, I));
+    }), pe(() => {
+      for (const f of r) f();
+      r = [], o.value?.deactivate(), i?.destroy(), o.value = void 0, c.value = null, i = null;
+    });
+    function d() {
+      if (!i?.isMounted()) return;
+      const f = t.getActiveBlockJSON()?.rootNode ?? null;
+      i.renderBlock(f);
+    }
+    function h(f) {
+      f.preventDefault(), f.dataTransfer && (f.dataTransfer.dropEffect = "copy");
+    }
+    function y(f) {
+      f.preventDefault();
+      const b = f.dataTransfer?.getData("component-name");
+      if (!b) return;
+      const v = t.materialStore.getMeta(b);
+      if (!v?.snippets?.length) return;
+      const C = v.snippets[0], B = t.getActiveBlock();
+      if (!B?.rootNode) return;
+      const g = new me(b, {
+        props: C.props
+      });
+      t.addNode(B.rootNode.id, g), t.select(g.id);
+    }
+    return (f, b) => (a(), m("div", {
+      ref_key: "containerRef",
+      ref: n,
+      class: "flex-1 overflow-hidden bg-[var(--color-fill-1)] relative",
+      onDragover: h,
+      onDrop: y
+    }, [
+      c.value ? (a(), w(wt, {
+        key: 0,
+        "hover-style": c.value.hoverStyle.value,
+        "select-style": c.value.selectStyle.value,
+        "toolbar-style": c.value.toolbarStyle.value,
+        "selected-node-name": c.value.selectedNodeName.value,
+        "hovered-node-name": c.value.hoveredNodeName.value,
+        designer: c.value.designer,
+        dragging: l.value
+      }, null, 8, ["hover-style", "select-style", "toolbar-style", "selected-node-name", "hovered-node-name", "designer", "dragging"])) : S("", !0)
+    ], 544));
+  }
+});
+class St {
+  /** Engine 引用（提供选中节点和物料查询） */
+  engine;
+  /**
+   * 创建 Setter 实例
+   *
+   * @param engine - Engine 实例
+   */
+  constructor(e) {
+    this.engine = e;
+  }
+  // ── 读取 ──────────────────────────────────────────────
+  /**
+   * 获取当前选中节点的属性面板字段列表
+   *
+   * 合并 ComponentMeta 的属性 schema 与节点的实际 props 值。
+   * 没有选中节点或找不到 ComponentMeta 时返回空数组。
+   *
+   * @returns SetterField 数组
+   */
+  getFields() {
+    const e = this.engine.getSelected();
+    if (!e) return [];
+    const t = this.engine.materialStore.getMeta(e.name);
+    return t ? t.props.map((n) => ({
+      name: n.name,
+      title: n.title,
+      type: n.type,
+      group: n.group,
+      value: e.props[n.name] ?? n.defaultValue,
+      defaultValue: n.defaultValue,
+      description: n.description,
+      required: n.required,
+      options: n.options,
+      order: n.order
+    })) : [];
+  }
+  /**
+   * 获取当前选中节点的事件列表
+   *
+   * 来自 ComponentMeta.events，定义组件支持哪些事件。
+   *
+   * @returns EventMeta 数组
+   */
+  getEvents() {
+    const e = this.engine.getSelected();
+    return e ? this.engine.materialStore.getMeta(e.name)?.events ?? [] : [];
+  }
+  /**
+   * 获取当前选中节点的插槽列表
+   *
+   * 来自 ComponentMeta.slots，定义组件支持哪些插槽。
+   *
+   * @returns SlotMeta 数组
+   */
+  getSlots() {
+    const e = this.engine.getSelected();
+    return e ? this.engine.materialStore.getMeta(e.name)?.slots ?? [] : [];
+  }
+  /**
+   * 获取当前选中节点的 ComponentMeta
+   *
+   * @returns ComponentMeta，未选中时返回 null
+   */
+  getSelectedNodeMeta() {
+    const e = this.engine.getSelected();
+    return e ? this.engine.materialStore.getMeta(e.name) : null;
+  }
+  /**
+   * 获取当前选中节点的组件名称
+   *
+   * @returns 组件名称，未选中时返回 null
+   */
+  getSelectedNodeName() {
+    return this.engine.getSelected()?.name ?? null;
+  }
+  // ── 写入 ──────────────────────────────────────────────
+  /**
+   * 设置属性值
+   *
+   * 直接委托给 NodeModel.setProp()，触发 EVENT_NODE_CHANGE。
+   *
+   * @param name - 属性名
+   * @param value - 属性值
+   */
+  setProp(e, t) {
+    const n = this.engine.getSelected();
+    n && n.setProp(e, t);
+  }
+  /**
+   * 设置事件处理函数
+   *
+   * 委托给 NodeModel.setEvent()，触发 EVENT_NODE_CHANGE。
+   *
+   * @param name - 事件名
+   * @param handler - 处理函数名称或表达式
+   */
+  setEvent(e, t) {
+    const n = this.engine.getSelected();
+    n && n.setEvent(e, t);
+  }
+  /**
+   * 添加指令
+   *
+   * 委托给 NodeModel.addDirective()，触发 EVENT_NODE_CHANGE。
+   *
+   * @param directive - 指令绑定对象
+   */
+  addDirective(e) {
+    const t = this.engine.getSelected();
+    t && t.addDirective(e);
+  }
+  /**
+   * 移除指令
+   *
+   * 委托给 NodeModel.removeDirective()，触发 EVENT_NODE_CHANGE。
+   *
+   * @param name - 指令名
+   */
+  removeDirective(e) {
+    const t = this.engine.getSelected();
+    t && t.removeDirective(e);
+  }
+}
+const Nt = { class: "p-3" }, _t = {
+  key: 0,
+  class: "text-center text-[var(--color-text-3)] text-sm py-8"
+}, It = { class: "mb-4 pb-3 border-b border-[var(--color-border-2)]" }, Bt = { class: "text-sm font-medium text-[var(--color-text-1)]" }, Ot = {
+  key: 0,
+  class: "space-y-3"
+}, Rt = { class: "text-xs text-[var(--color-text-2)]" }, At = {
+  key: 1,
+  class: "space-y-3 mt-4 pt-3 border-t border-[var(--color-border-2)]"
+}, Pt = { class: "text-xs text-[var(--color-text-2)]" }, Et = /* @__PURE__ */ _({
+  name: "SetterPanel",
+  __name: "SetterPanel",
+  setup(s) {
+    const e = F("designer-engine"), t = new St(e), n = A(0);
+    e.onSelectionChange = () => {
+      n.value++;
+    };
+    const i = (y) => {
+      (y.action === "props" || y.action === "events" || y.action === "directive") && n.value++;
+    };
+    u.on(k, i);
+    const r = x(() => (n.value, t.getSelectedNodeName())), o = x(() => (n.value, t.getFields())), c = x(() => (n.value, t.getEvents()));
+    function l(y, f) {
+      t.setProp(y, f);
+    }
+    const d = x(() => (n.value, e.getSelected()?.events ?? {}));
+    function h(y, f) {
+      t.setEvent(y, f);
+    }
+    return (y, f) => {
+      const b = R("a-input"), v = R("a-input-number"), C = R("a-switch"), B = R("a-select");
+      return a(), m("div", Nt, [
+        r.value ? (a(), m(T, { key: 1 }, [
+          p("div", It, [
+            p("span", Bt, D(r.value), 1)
+          ]),
+          o.value.length ? (a(), m("div", Ot, [
+            f[0] || (f[0] = p("div", { class: "text-xs font-medium text-[var(--color-text-3)] uppercase tracking-wider mb-2" }, "属性", -1)),
+            (a(!0), m(T, null, z(o.value, (g) => (a(), m("div", {
+              key: g.name,
+              class: "flex flex-col gap-1"
+            }, [
+              p("label", Rt, D(g.title), 1),
+              g.type === "string" ? (a(), w(b, {
+                key: 0,
+                "model-value": g.value,
+                size: "small",
+                "onUpdate:modelValue": (I) => l(g.name, I)
+              }, null, 8, ["model-value", "onUpdate:modelValue"])) : g.type === "number" ? (a(), w(v, {
+                key: 1,
+                "model-value": g.value,
+                size: "small",
+                "onUpdate:modelValue": (I) => l(g.name, I)
+              }, null, 8, ["model-value", "onUpdate:modelValue"])) : g.type === "boolean" ? (a(), w(C, {
+                key: 2,
+                "model-value": g.value,
+                size: "small",
+                onChange: (I) => l(g.name, I)
+              }, null, 8, ["model-value", "onChange"])) : g.type === "select" && g.options ? (a(), w(B, {
+                key: 3,
+                "model-value": g.value,
+                size: "small",
+                options: g.options,
+                onChange: (I) => l(g.name, I)
+              }, null, 8, ["model-value", "options", "onChange"])) : (a(), w(b, {
+                key: 4,
+                "model-value": String(g.value ?? ""),
+                size: "small",
+                "onUpdate:modelValue": (I) => l(g.name, I)
+              }, null, 8, ["model-value", "onUpdate:modelValue"]))
+            ]))), 128))
+          ])) : S("", !0),
+          c.value.length ? (a(), m("div", At, [
+            f[1] || (f[1] = p("div", { class: "text-xs font-medium text-[var(--color-text-3)] uppercase tracking-wider mb-2" }, "事件", -1)),
+            (a(!0), m(T, null, z(c.value, (g) => (a(), m("div", {
+              key: g.name,
+              class: "flex flex-col gap-1"
+            }, [
+              p("label", Pt, D(g.name), 1),
+              N(b, {
+                "model-value": d.value[g.name] ?? "",
+                size: "small",
+                placeholder: g.description ?? "事件处理函数",
+                "onUpdate:modelValue": (I) => h(g.name, I)
+              }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"])
+            ]))), 128))
+          ])) : S("", !0)
+        ], 64)) : (a(), m("div", _t, " 请选中画布中的组件 "))
+      ]);
+    };
+  }
+}), Dt = { class: "w-[350px] border-l border-[var(--color-border-2)] bg-[var(--color-bg-2)] shrink-0 flex flex-col overflow-hidden" }, Tt = { class: "flex-1 overflow-y-auto" }, zt = /* @__PURE__ */ _({
+  name: "DesignerSettings",
+  __name: "Settings",
+  setup(s) {
+    return (e, t) => (a(), m("div", Dt, [
+      t[0] || (t[0] = p("div", { class: "flex items-center h-[40px] px-4 border-b border-[var(--color-border-2)] shrink-0" }, [
+        p("span", { class: "text-sm font-medium text-[var(--color-text-1)]" }, "属性设置")
+      ], -1)),
+      p("div", Tt, [
+        N(Et)
+      ])
+    ]));
+  }
+}), jt = { class: "flex items-center justify-between h-[28px] px-4 border-t border-[var(--color-border-2)] bg-[var(--color-bg-2)] text-xs text-[var(--color-text-3)] shrink-0" }, Lt = { class: "flex items-center gap-1" }, Vt = { class: "flex items-center gap-3" }, Mt = /* @__PURE__ */ _({
+  name: "DesignerFooter",
+  __name: "Footer",
+  setup(s) {
+    return (e, t) => (a(), m("footer", jt, [
+      p("div", Lt, [
+        E(e.$slots, "node-path")
+      ]),
+      p("div", Vt, [
+        E(e.$slots, "devtools")
+      ])
+    ]));
+  }
+}), $t = { class: "h-screen w-screen flex flex-col overflow-hidden bg-[var(--color-bg-1)]" }, Ht = { class: "flex-1 flex min-h-0" }, Wt = /* @__PURE__ */ _({
+  name: "SunnyDesignerLayout",
+  inheritAttrs: !1,
+  __name: "SunnyDesignerLayout",
+  props: {
+    title: { default: "Designer" },
+    logo: {},
+    widgetRegistry: {},
+    engine: {}
+  },
+  setup(s) {
+    const e = s;
+    return ae("designer-engine", e.engine), ae("designer-material-store", e.engine.materialStore), (t, n) => (a(), m("div", $t, [
+      N(st, {
+        title: s.title,
+        logo: s.logo
+      }, {
+        toolbar: P(() => [
+          E(t.$slots, "toolbar")
+        ]),
+        actions: P(() => [
+          E(t.$slots, "actions")
+        ]),
+        _: 3
+      }, 8, ["title", "logo"]),
+      p("div", Ht, [
+        N(pt, { "widget-registry": s.widgetRegistry }, null, 8, ["widget-registry"]),
+        N(Ct, null, {
+          default: P(() => [
+            E(t.$slots, "workspace")
+          ]),
+          _: 3
+        }),
+        N(zt, null, {
+          default: P(() => [
+            E(t.$slots, "settings")
+          ]),
+          _: 3
+        })
+      ]),
+      N(Mt, null, {
+        "node-path": P(() => [
+          E(t.$slots, "node-path")
+        ]),
+        devtools: P(() => [
+          E(t.$slots, "devtools")
+        ]),
+        _: 3
+      })
+    ]));
+  }
+});
+class Ut {
+  /** Widget 存储（name → Widget） */
+  widgets = /* @__PURE__ */ new Map();
+  /**
+   * 注册 Widget
+   *
+   * 同名 Widget 会覆盖并打印警告。
+   *
+   * @param widget - Widget 定义
+   */
+  register(e) {
+    this.widgets.has(e.name) && console.warn(`[WidgetRegistry] Overwriting existing widget: ${e.name}`), this.widgets.set(e.name, e);
+  }
+  /**
+   * 批量注册
+   *
+   * @param widgets - Widget 定义数组
+   */
+  registerAll(e) {
+    for (const t of e)
+      this.register(t);
+  }
+  /**
+   * 取消注册
+   *
+   * @param name - Widget 名称
+   */
+  unregister(e) {
+    this.widgets.delete(e);
+  }
+  /**
+   * 获取指定 Widget
+   *
+   * @param name - Widget 名称
+   * @returns Widget 定义，不存在时返回 null
+   */
+  get(e) {
+    return this.widgets.get(e) ?? null;
+  }
+  /**
+   * 获取指定区域的所有 Widget（按 order 排序）
+   *
+   * @param region - 区域名（如 'apps'）
+   * @returns 排序后的 Widget 数组
+   */
+  getByRegion(e) {
+    return this.sorted().filter((t) => t.region === e);
+  }
+  /**
+   * 按 openType 过滤（在指定区域内）
+   *
+   * @param region - 区域名
+   * @param openType - 打开方式
+   * @returns 匹配的 Widget 数组
+   */
+  getByOpenType(e, t) {
+    return this.getByRegion(e).filter((n) => n.openType === t);
+  }
+  /**
+   * 获取所有 panel 类型 Widget（用于渲染面板）
+   *
+   * @param region - 区域名
+   * @returns panel 类型的 Widget 数组
+   */
+  getPanelWidgets(e) {
+    return this.getByOpenType(e, "panel");
+  }
+  /**
+   * 获取所有非 panel 类型 Widget（dialog/link）
+   *
+   * @param region - 区域名
+   * @returns 非 panel 类型的 Widget 数组
+   */
+  getOtherWidgets(e) {
+    return this.getByRegion(e).filter((t) => t.openType !== "panel");
+  }
+  /**
+   * 清空所有 Widget
+   */
+  clear() {
+    this.widgets.clear();
+  }
+  /**
+   * 已注册数量
+   */
+  get size() {
+    return this.widgets.size;
+  }
+  /** 按 order 字段升序排序 */
+  sorted() {
+    return Array.from(this.widgets.values()).sort(
+      (e, t) => (e.order ?? 100) - (t.order ?? 100)
+    );
+  }
+}
+const Jt = /* @__PURE__ */ Symbol("ArcoConfigProvider"), Ft = "arco", qt = "$arco", be = (s) => {
+  var e, t, n;
+  const i = Ie();
+  return `${(n = (t = F(Jt, void 0)?.prefixCls) != null ? t : (e = i?.appContext.config.globalProperties[qt]) == null ? void 0 : e.classPrefix) != null ? n : Ft}-${s}`;
+}, Gt = Object.prototype.toString;
+function xe(s) {
+  return Gt.call(s) === "[object Number]" && s === s;
+}
+var ke = (s, e) => {
+  for (const [t, n] of e)
+    s[t] = n;
+  return s;
+};
+const Kt = _({
+  name: "IconFile",
+  props: {
+    size: {
+      type: [Number, String]
+    },
+    strokeWidth: {
+      type: Number,
+      default: 4
+    },
+    strokeLinecap: {
+      type: String,
+      default: "butt",
+      validator: (s) => ["butt", "round", "square"].includes(s)
+    },
+    strokeLinejoin: {
+      type: String,
+      default: "miter",
+      validator: (s) => ["arcs", "bevel", "miter", "miter-clip", "round"].includes(s)
+    },
+    rotate: Number,
+    spin: Boolean
+  },
+  emits: {
+    click: (s) => !0
+  },
+  setup(s, { emit: e }) {
+    const t = be("icon"), n = x(() => [t, `${t}-file`, { [`${t}-spin`]: s.spin }]), i = x(() => {
+      const r = {};
+      return s.size && (r.fontSize = xe(s.size) ? `${s.size}px` : s.size), s.rotate && (r.transform = `rotate(${s.rotate}deg)`), r;
+    });
+    return {
+      cls: n,
+      innerStyle: i,
+      onClick: (r) => {
+        e("click", r);
+      }
+    };
+  }
+}), Yt = ["stroke-width", "stroke-linecap", "stroke-linejoin"];
+function Zt(s, e, t, n, i, r) {
+  return a(), m("svg", {
+    viewBox: "0 0 48 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    stroke: "currentColor",
+    class: q(s.cls),
+    style: j(s.innerStyle),
+    "stroke-width": s.strokeWidth,
+    "stroke-linecap": s.strokeLinecap,
+    "stroke-linejoin": s.strokeLinejoin,
+    onClick: e[0] || (e[0] = (...o) => s.onClick && s.onClick(...o))
+  }, e[1] || (e[1] = [
+    p("path", { d: "M16 21h16m-16 8h10m11 13H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h21l7 7v27a2 2 0 0 1-2 2Z" }, null, -1)
+  ]), 14, Yt);
+}
+var X = /* @__PURE__ */ ke(Kt, [["render", Zt]]);
+const Xt = Object.assign(X, {
+  install: (s, e) => {
+    var t;
+    const n = (t = e?.iconPrefix) != null ? t : "";
+    s.component(n + X.name, X);
+  }
+}), Qt = _({
+  name: "IconApps",
+  props: {
+    size: {
+      type: [Number, String]
+    },
+    strokeWidth: {
+      type: Number,
+      default: 4
+    },
+    strokeLinecap: {
+      type: String,
+      default: "butt",
+      validator: (s) => ["butt", "round", "square"].includes(s)
+    },
+    strokeLinejoin: {
+      type: String,
+      default: "miter",
+      validator: (s) => ["arcs", "bevel", "miter", "miter-clip", "round"].includes(s)
+    },
+    rotate: Number,
+    spin: Boolean
+  },
+  emits: {
+    click: (s) => !0
+  },
+  setup(s, { emit: e }) {
+    const t = be("icon"), n = x(() => [t, `${t}-apps`, { [`${t}-spin`]: s.spin }]), i = x(() => {
+      const r = {};
+      return s.size && (r.fontSize = xe(s.size) ? `${s.size}px` : s.size), s.rotate && (r.transform = `rotate(${s.rotate}deg)`), r;
+    });
+    return {
+      cls: n,
+      innerStyle: i,
+      onClick: (r) => {
+        e("click", r);
+      }
+    };
+  }
+}), en = ["stroke-width", "stroke-linecap", "stroke-linejoin"];
+function tn(s, e, t, n, i, r) {
+  return a(), m("svg", {
+    viewBox: "0 0 48 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    stroke: "currentColor",
+    class: q(s.cls),
+    style: j(s.innerStyle),
+    "stroke-width": s.strokeWidth,
+    "stroke-linecap": s.strokeLinecap,
+    "stroke-linejoin": s.strokeLinejoin,
+    onClick: e[0] || (e[0] = (...o) => s.onClick && s.onClick(...o))
+  }, e[1] || (e[1] = [
+    p("path", { d: "M7 7h13v13H7zM28 7h13v13H28zM7 28h13v13H7zM28 28h13v13H28z" }, null, -1)
+  ]), 14, en);
+}
+var Q = /* @__PURE__ */ ke(Qt, [["render", tn]]);
+const nn = Object.assign(Q, {
+  install: (s, e) => {
+    var t;
+    const n = (t = e?.iconPrefix) != null ? t : "";
+    s.component(n + Q.name, Q);
+  }
+}), sn = { class: "p-3" }, rn = { class: "space-y-1" }, on = ["onClick"], an = { class: "text-sm truncate" }, ln = {
+  key: 0,
+  class: "text-center text-[var(--color-text-3)] text-sm py-8"
+}, cn = /* @__PURE__ */ _({
+  name: "PagesWidget",
+  __name: "PagesWidget",
+  setup(s) {
+    const e = F("designer-engine"), t = x(() => e.project.pages ?? []), n = x(() => e.project.activePageId ?? "");
+    function i(r) {
+      e.switchPage(r);
+    }
+    return (r, o) => {
+      const c = R("icon-file");
+      return a(), m("div", sn, [
+        p("div", rn, [
+          (a(!0), m(T, null, z(t.value, (l) => (a(), m("div", {
+            key: l.id,
+            class: q(["flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer transition-colors", [
+              l.id === n.value ? "bg-[rgba(var(--primary-6),0.1)] text-[rgb(var(--primary-6))]" : "text-[var(--color-text-2)] hover:bg-[var(--color-fill-2)] hover:text-[var(--color-text-1)]"
+            ]]),
+            onClick: (d) => i(l.id)
+          }, [
+            N(c, { size: 16 }),
+            p("span", an, D(l.name), 1)
+          ], 10, on))), 128))
+        ]),
+        t.value.length === 0 ? (a(), m("div", ln, " 暂无页面 ")) : S("", !0)
+      ]);
+    };
+  }
+}), dn = { class: "flex flex-col h-full" }, un = { class: "px-3 py-2 border-b border-[var(--color-border-2)] shrink-0" }, hn = { class: "flex-1 overflow-y-auto p-3" }, pn = { class: "grid grid-cols-2 gap-2" }, mn = ["onDragstart"], fn = { class: "flex items-center justify-center w-8 h-8 rounded bg-[var(--color-fill-2)]" }, gn = { class: "text-xs text-[var(--color-text-2)] text-center truncate w-full" }, vn = {
+  key: 0,
+  class: "text-center text-[var(--color-text-3)] text-sm py-8"
+}, yn = /* @__PURE__ */ _({
+  name: "ComponentsWidget",
+  __name: "ComponentsWidget",
+  setup(s) {
+    const e = F("designer-material-store"), t = A(""), n = x(() => e?.getGroups() ?? []), i = A(n.value);
+    function r(l) {
+      const d = e?.getByGroup(l) ?? [];
+      if (!t.value) return d;
+      const h = t.value.toLowerCase();
+      return d.filter(
+        (y) => y.name.toLowerCase().includes(h) || y.title.toLowerCase().includes(h)
+      );
+    }
+    const o = x(() => t.value ? n.value.filter((l) => r(l).length > 0) : n.value);
+    function c(l, d) {
+      l.dataTransfer?.setData("component-name", d.name), l.dataTransfer.effectAllowed = "copy";
+    }
+    return (l, d) => {
+      const h = R("icon-search"), y = R("a-input"), f = R("icon-apps"), b = R("a-collapse-item"), v = R("a-collapse");
+      return a(), m("div", dn, [
+        p("div", un, [
+          N(y, {
+            modelValue: t.value,
+            "onUpdate:modelValue": d[0] || (d[0] = (C) => t.value = C),
+            placeholder: "搜索组件",
+            "allow-clear": "",
+            size: "small"
+          }, {
+            prefix: P(() => [
+              N(h, { size: 14 })
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ]),
+        p("div", hn, [
+          N(v, {
+            "default-active-key": i.value,
+            bordered: !1,
+            "expand-icon-position": "right"
+          }, {
+            default: P(() => [
+              (a(!0), m(T, null, z(o.value, (C) => (a(), w(b, {
+                key: C,
+                header: C
+              }, {
+                default: P(() => [
+                  p("div", pn, [
+                    (a(!0), m(T, null, z(r(C), (B) => (a(), m("div", {
+                      key: B.name,
+                      class: "flex flex-col items-center gap-1 p-2 rounded cursor-grab border border-[var(--color-border-1)] hover:border-[rgb(var(--primary-6))] hover:bg-[rgba(var(--primary-6),0.04)] transition-colors active:cursor-grabbing",
+                      draggable: "true",
+                      onDragstart: (g) => c(g, B)
+                    }, [
+                      p("div", fn, [
+                        B.icon ? (a(), w($(B.icon), {
+                          key: 0,
+                          size: 18
+                        })) : (a(), w(f, {
+                          key: 1,
+                          size: 18
+                        }))
+                      ]),
+                      p("span", gn, D(B.title), 1)
+                    ], 40, mn))), 128))
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["header"]))), 128))
+            ]),
+            _: 1
+          }, 8, ["default-active-key"]),
+          o.value.length === 0 ? (a(), m("div", vn, D(t.value ? "未找到匹配的组件" : "暂无注册组件"), 1)) : S("", !0)
+        ])
+      ]);
+    };
+  }
+});
+function bn() {
+  return [
+    {
+      name: "pages",
+      icon: Xt,
+      title: "页面管理",
+      component: cn,
+      openType: "panel",
+      order: 1,
+      region: "apps"
+    },
+    {
+      name: "components",
+      icon: nn,
+      title: "组件库",
+      component: yn,
+      openType: "panel",
+      order: 2,
+      region: "apps"
+    }
+  ];
+}
+const xn = [
+  { name: "event", type: "MouseEvent", description: "鼠标事件" }
+], kn = [
+  { tag: "div", title: "容器", isContainer: !0 },
+  { tag: "span", title: "行内文本", isContainer: !0 },
+  { tag: "p", title: "段落", isContainer: !0 },
+  { tag: "h1", title: "标题 1", isContainer: !1 },
+  { tag: "h2", title: "标题 2", isContainer: !1 },
+  { tag: "h3", title: "标题 3", isContainer: !1 },
+  { tag: "h4", title: "标题 4", isContainer: !1 },
+  { tag: "h5", title: "标题 5", isContainer: !1 },
+  { tag: "h6", title: "标题 6", isContainer: !1 }
+];
+function wn() {
+  return kn.map(({ tag: s, title: e, isContainer: t }) => ({
+    name: s,
+    title: e,
+    component: V(s),
+    isNativeElement: !0,
+    category: "layout",
+    group: "原生元素",
+    order: 100,
+    props: [
+      { name: "class", title: "类名", type: "string", group: "基础属性" },
+      { name: "style", title: "样式", type: "json", group: "基础属性" }
+    ],
+    events: [
+      { name: "click", title: "点击", params: xn }
+    ],
+    slots: [
+      { name: "default", title: "默认插槽" }
+    ],
+    nestingRules: { isContainer: t },
+    snippets: [
+      { title: e, props: {} }
+    ]
+  }));
+}
+function Cn() {
+  return {
+    name: "SunnyForm",
+    title: "表单",
+    component: V(Ae),
+    category: "entry",
+    group: "表单组件",
+    order: 1,
+    props: [
+      {
+        name: "layout",
+        title: "布局",
+        type: "select",
+        options: [
+          { label: "水平", value: "horizontal" },
+          { label: "垂直", value: "vertical" },
+          { label: "行内", value: "inline" }
+        ],
+        defaultValue: "horizontal",
+        group: "基础属性"
+      },
+      {
+        name: "size",
+        title: "尺寸",
+        type: "select",
+        options: [
+          { label: "迷你", value: "mini" },
+          { label: "小", value: "small" },
+          { label: "中", value: "medium" },
+          { label: "大", value: "large" }
+        ],
+        defaultValue: "small",
+        group: "基础属性"
+      },
+      {
+        name: "showDefaultActions",
+        title: "显示操作按钮",
+        type: "boolean",
+        defaultValue: !1,
+        group: "基础属性"
+      },
+      {
+        name: "labelWidth",
+        title: "标签宽度",
+        type: "string",
+        group: "基础属性",
+        description: '表单标签宽度，如 "100px"'
+      },
+      {
+        name: "schema",
+        title: "表单配置",
+        type: "json",
+        group: "高级属性",
+        description: "FormSchema[] JSON 配置"
+      }
+    ],
+    events: [
+      { name: "handleSubmit", title: "提交", description: "表单提交时触发", params: [
+        { name: "values", type: "Record<string, any>", description: "表单数据" }
+      ] },
+      { name: "handleReset", title: "重置", description: "表单重置时触发", params: [
+        { name: "values", type: "Record<string, any>", description: "重置后的表单数据" }
+      ] }
+    ],
+    slots: [
+      { name: "default", title: "默认插槽", description: "表单内容" }
+    ],
+    nestingRules: { isContainer: !0 },
+    snippets: [
+      {
+        title: "基础表单",
+        description: "包含默认配置的空表单",
+        props: { layout: "vertical", showDefaultActions: !0 }
+      }
+    ]
+  };
+}
+function Sn() {
+  return {
+    name: "SunnySelect",
+    title: "选择器",
+    component: V(Pe),
+    category: "entry",
+    group: "表单组件",
+    order: 2,
+    props: [
+      {
+        name: "modelValue",
+        title: "值",
+        type: "string",
+        group: "基础属性"
+      },
+      {
+        name: "placeholder",
+        title: "占位文本",
+        type: "string",
+        defaultValue: "请选择",
+        group: "基础属性"
+      },
+      {
+        name: "disabled",
+        title: "禁用",
+        type: "boolean",
+        defaultValue: !1,
+        group: "基础属性"
+      },
+      {
+        name: "allowClear",
+        title: "允许清除",
+        type: "boolean",
+        defaultValue: !1,
+        group: "基础属性"
+      },
+      {
+        name: "multiple",
+        title: "多选",
+        type: "boolean",
+        defaultValue: !1,
+        group: "基础属性"
+      },
+      {
+        name: "options",
+        title: "选项列表",
+        type: "json",
+        group: "高级属性",
+        description: "下拉选项数据"
+      }
+    ],
+    events: [
+      { name: "change", title: "变化", description: "选中值变化时触发", params: [
+        { name: "value", type: "string | number | array", description: "当前选中值" }
+      ] }
+    ],
+    slots: [],
+    nestingRules: { isContainer: !1 },
+    snippets: [
+      { title: "基础选择器", props: { placeholder: "请选择" } }
+    ]
+  };
+}
+function Nn() {
+  return {
+    name: "a-button",
+    title: "Arco 按钮",
+    component: V(Ee),
+    category: "basic",
+    group: "Arco 组件",
+    order: 10,
+    props: [
+      {
+        name: "type",
+        title: "类型",
+        type: "select",
+        options: [
+          { label: "主要", value: "primary" },
+          { label: "次要", value: "secondary" },
+          { label: "轮廓", value: "outline" },
+          { label: "虚线", value: "dashed" },
+          { label: "文字", value: "text" }
+        ],
+        defaultValue: "primary",
+        group: "基础属性"
+      },
+      {
+        name: "size",
+        title: "尺寸",
+        type: "select",
+        options: [
+          { label: "迷你", value: "mini" },
+          { label: "小", value: "small" },
+          { label: "中", value: "medium" },
+          { label: "大", value: "large" }
+        ],
+        defaultValue: "medium",
+        group: "基础属性"
+      },
+      {
+        name: "status",
+        title: "状态",
+        type: "select",
+        options: [
+          { label: "正常", value: "normal" },
+          { label: "警告", value: "warning" },
+          { label: "危险", value: "danger" },
+          { label: "成功", value: "success" }
+        ],
+        group: "基础属性"
+      },
+      {
+        name: "disabled",
+        title: "禁用",
+        type: "boolean",
+        defaultValue: !1,
+        group: "基础属性"
+      },
+      {
+        name: "long",
+        title: "撑满父容器",
+        type: "boolean",
+        defaultValue: !1,
+        group: "基础属性"
+      }
+    ],
+    events: [
+      { name: "click", title: "点击", params: [
+        { name: "event", type: "MouseEvent", description: "鼠标事件" }
+      ] }
+    ],
+    slots: [
+      { name: "default", title: "默认插槽", description: "按钮内容" },
+      { name: "icon", title: "图标插槽", description: "按钮图标" }
+    ],
+    nestingRules: { isContainer: !1 },
+    snippets: [
+      { title: "主要按钮", props: { type: "primary" }, children: [{ name: "span", props: {} }] },
+      { title: "危险按钮", props: { type: "primary", status: "danger" }, children: [{ name: "span", props: {} }] }
+    ]
+  };
+}
+function _n() {
+  return {
+    name: "a-input",
+    title: "Arco 输入框",
+    component: V(De),
+    category: "entry",
+    group: "Arco 组件",
+    order: 11,
+    props: [
+      {
+        name: "modelValue",
+        title: "值",
+        type: "string",
+        group: "基础属性"
+      },
+      {
+        name: "placeholder",
+        title: "占位文本",
+        type: "string",
+        defaultValue: "请输入",
+        group: "基础属性"
+      },
+      {
+        name: "disabled",
+        title: "禁用",
+        type: "boolean",
+        defaultValue: !1,
+        group: "基础属性"
+      },
+      {
+        name: "allowClear",
+        title: "允许清除",
+        type: "boolean",
+        defaultValue: !1,
+        group: "基础属性"
+      },
+      {
+        name: "maxLength",
+        title: "最大长度",
+        type: "number",
+        group: "基础属性"
+      },
+      {
+        name: "size",
+        title: "尺寸",
+        type: "select",
+        options: [
+          { label: "迷你", value: "mini" },
+          { label: "小", value: "small" },
+          { label: "中", value: "medium" },
+          { label: "大", value: "large" }
+        ],
+        defaultValue: "medium",
+        group: "基础属性"
+      }
+    ],
+    events: [
+      { name: "input", title: "输入", params: [
+        { name: "value", type: "string", description: "输入值" },
+        { name: "event", type: "Event", description: "原生事件" }
+      ] },
+      { name: "change", title: "变化", params: [
+        { name: "value", type: "string", description: "当前值" }
+      ] }
+    ],
+    slots: [
+      { name: "prepend", title: "前缀", description: "输入框前缀内容" },
+      { name: "append", title: "后缀", description: "输入框后缀内容" }
+    ],
+    nestingRules: { isContainer: !1 },
+    snippets: [
+      { title: "基础输入框", props: { placeholder: "请输入" } }
+    ]
+  };
+}
+function In() {
+  return {
+    name: "a-textarea",
+    title: "Arco 文本域",
+    component: V(Te),
+    category: "entry",
+    group: "Arco 组件",
+    order: 12,
+    props: [
+      {
+        name: "modelValue",
+        title: "值",
+        type: "string",
+        group: "基础属性"
+      },
+      {
+        name: "placeholder",
+        title: "占位文本",
+        type: "string",
+        defaultValue: "请输入",
+        group: "基础属性"
+      },
+      {
+        name: "disabled",
+        title: "禁用",
+        type: "boolean",
+        defaultValue: !1,
+        group: "基础属性"
+      },
+      {
+        name: "autoSize",
+        title: "自适应高度",
+        type: "boolean",
+        defaultValue: !1,
+        group: "基础属性"
+      },
+      {
+        name: "maxLength",
+        title: "最大长度",
+        type: "number",
+        group: "基础属性"
+      },
+      {
+        name: "showWordLimit",
+        title: "显示字数",
+        type: "boolean",
+        defaultValue: !1,
+        group: "基础属性"
+      }
+    ],
+    events: [
+      { name: "input", title: "输入", params: [
+        { name: "value", type: "string", description: "输入值" }
+      ] },
+      { name: "change", title: "变化", params: [
+        { name: "value", type: "string", description: "当前值" }
+      ] }
+    ],
+    slots: [],
+    nestingRules: { isContainer: !1 },
+    snippets: [
+      { title: "基础文本域", props: { placeholder: "请输入", autoSize: !0 } }
+    ]
+  };
+}
+function Bn() {
+  return [
+    // Sunny 表单组件
+    Cn(),
+    Sn(),
+    // Arco Design 组件
+    Nn(),
+    _n(),
+    In(),
+    // 原生 HTML 元素
+    ...wn()
+  ];
+}
+const En = /* @__PURE__ */ _({
+  name: "DesignPage",
+  __name: "Design",
+  setup(s) {
+    const e = new Ut();
+    e.registerAll(bn());
+    const t = new Ye();
+    t.registerAll(Bn());
+    const n = A(null);
+    return se(() => {
+      const i = new Ze({ materialStore: t });
+      n.value = i;
+      const r = {
+        id: "project-1",
+        name: "示例项目",
+        activePageId: "page-1",
+        dependencies: [],
+        apis: [],
+        pages: [
+          {
+            id: "page-1",
+            name: "首页",
+            route: "/home",
+            rootNode: {
+              id: "root-1",
+              name: "div",
+              props: {},
+              events: {},
+              directives: [],
+              children: [],
+              slots: {}
+            },
+            state: [],
+            computed: [],
+            methods: [],
+            watch: [],
+            css: [],
+            props: [],
+            emits: [],
+            expose: [],
+            slots: [],
+            lifecycleHooks: [],
+            inject: []
+          }
+        ]
+      };
+      i.loadProject(r);
+    }), pe(() => {
+      n.value?.destroy(), n.value = null;
+    }), (i, r) => n.value ? (a(), w(H(Wt), {
+      key: 0,
+      title: "Sunny Designer",
+      "widget-registry": H(e),
+      engine: n.value
+    }, null, 8, ["widget-registry", "engine"])) : S("", !0);
+  }
+});
+export {
+  En as default
+};