@djvlc/sandbox 1.0.1 → 1.0.2

package/dist/index.cjs

@@ -1,917 +1 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  MessageType: () => MessageType,
-  SandboxClient: () => SandboxClient,
-  SandboxHost: () => SandboxHost,
-  createMessage: () => createMessage,
-  createResponse: () => createResponse,
-  generateMessageId: () => generateMessageId,
-  isDjvlcMessage: () => isDjvlcMessage
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/protocol.ts
-var MessageType = /* @__PURE__ */ ((MessageType2) => {
-  MessageType2["READY"] = "ready";
-  MessageType2["INIT"] = "init";
-  MessageType2["DESTROY"] = "destroy";
-  MessageType2["LOAD_PAGE"] = "load_page";
-  MessageType2["UPDATE_SCHEMA"] = "update_schema";
-  MessageType2["REFRESH"] = "refresh";
-  MessageType2["SELECT_COMPONENT"] = "select_component";
-  MessageType2["HOVER_COMPONENT"] = "hover_component";
-  MessageType2["UPDATE_COMPONENT"] = "update_component";
-  MessageType2["DELETE_COMPONENT"] = "delete_component";
-  MessageType2["ADD_COMPONENT"] = "add_component";
-  MessageType2["MOVE_COMPONENT"] = "move_component";
-  MessageType2["SYNC_STATE"] = "sync_state";
-  MessageType2["SYNC_VARIABLES"] = "sync_variables";
-  MessageType2["COMPONENT_CLICK"] = "component_click";
-  MessageType2["COMPONENT_HOVER"] = "component_hover";
-  MessageType2["COMPONENT_CONTEXT_MENU"] = "component_context_menu";
-  MessageType2["COMPONENT_DRAG_START"] = "component_drag_start";
-  MessageType2["COMPONENT_DRAG_END"] = "component_drag_end";
-  MessageType2["COMPONENT_DROP"] = "component_drop";
-  MessageType2["ERROR"] = "error";
-  MessageType2["LOG"] = "log";
-  return MessageType2;
-})(MessageType || {});
-function generateMessageId() {
-  return `msg_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
-}
-function createMessage(type, data) {
-  return {
-    type,
-    id: generateMessageId(),
-    data,
-    timestamp: Date.now()
-  };
-}
-function createResponse(requestId, type, success, data, error) {
-  return {
-    type,
-    id: generateMessageId(),
-    requestId,
-    success,
-    data,
-    error,
-    timestamp: Date.now()
-  };
-}
-function isDjvlcMessage(data) {
-  if (!data || typeof data !== "object") return false;
-  const msg = data;
-  return typeof msg.type === "string" && typeof msg.id === "string" && typeof msg.timestamp === "number";
-}
-
-// src/sandbox-host.ts
-var SandboxHost = class {
-  constructor(options) {
-    this.pendingRequests = /* @__PURE__ */ new Map();
-    this.isReady = false;
-    // ==================== 私有方法 ====================
-    this.handleMessage = (event) => {
-      if (event.source !== this.options.iframe.contentWindow) {
-        return;
-      }
-      if (this.options.targetOrigin !== "*" && event.origin !== this.options.targetOrigin) {
-        return;
-      }
-      const message = event.data;
-      if (!isDjvlcMessage(message)) {
-        return;
-      }
-      this.log("debug", "Received message:", message.type, message);
-      if ("requestId" in message) {
-        const pending = this.pendingRequests.get(message.requestId);
-        if (pending) {
-          clearTimeout(pending.timer);
-          this.pendingRequests.delete(message.requestId);
-          if (message.success) {
-            pending.resolve(message.data);
-          } else {
-            pending.reject(new Error(message.error || "Unknown error"));
-          }
-          return;
-        }
-      }
-      switch (message.type) {
-        case "ready" /* READY */:
-          this.isReady = true;
-          this.readyResolve();
-          this.options.onReady?.();
-          break;
-        case "component_click" /* COMPONENT_CLICK */:
-          this.options.onComponentClick?.(
-            message.data.componentId,
-            message.data
-          );
-          break;
-        case "component_hover" /* COMPONENT_HOVER */:
-          this.options.onComponentHover?.(
-            message.data.componentId,
-            message.data
-          );
-          break;
-        case "component_context_menu" /* COMPONENT_CONTEXT_MENU */:
-          this.options.onComponentContextMenu?.(
-            message.data.componentId,
-            message.data
-          );
-          break;
-        case "sync_state" /* SYNC_STATE */:
-          this.options.onSyncState?.(message.data);
-          break;
-        case "error" /* ERROR */:
-          this.options.onError?.(message.data);
-          break;
-        case "log" /* LOG */: {
-          const logData = message.data;
-          this.options.onLog?.(logData.level, logData.message, ...logData.args || []);
-          break;
-        }
-      }
-    };
-    this.options = {
-      timeout: 3e4,
-      debug: false,
-      ...options
-    };
-    this.readyPromise = new Promise((resolve) => {
-      this.readyResolve = resolve;
-    });
-  }
-  /**
-   * 连接到 iframe
-   */
-  connect() {
-    window.addEventListener("message", this.handleMessage);
-    this.log("debug", "SandboxHost connected");
-  }
-  /**
-   * 断开连接
-   */
-  disconnect() {
-    window.removeEventListener("message", this.handleMessage);
-    this.pendingRequests.forEach(({ timer }) => clearTimeout(timer));
-    this.pendingRequests.clear();
-    this.isReady = false;
-    this.log("debug", "SandboxHost disconnected");
-  }
-  /**
-   * 等待就绪
-   */
-  async waitReady() {
-    return this.readyPromise;
-  }
-  /**
-   * 检查是否就绪
-   */
-  get ready() {
-    return this.isReady;
-  }
-  // ==================== 页面操作 ====================
-  /**
-   * 初始化
-   */
-  async init(data) {
-    await this.send("init" /* INIT */, data);
-  }
-  /**
-   * 加载页面
-   */
-  async loadPage(data) {
-    await this.send("load_page" /* LOAD_PAGE */, data);
-  }
-  /**
-   * 更新 Schema
-   */
-  async updateSchema(data) {
-    await this.send("update_schema" /* UPDATE_SCHEMA */, data);
-  }
-  /**
-   * 刷新
-   */
-  async refresh() {
-    await this.send("refresh" /* REFRESH */, {});
-  }
-  // ==================== 组件操作 ====================
-  /**
-   * 选择组件
-   */
-  async selectComponent(componentId, multi = false) {
-    await this.send("select_component" /* SELECT_COMPONENT */, {
-      componentId,
-      multi
-    });
-  }
-  /**
-   * 悬停组件
-   */
-  async hoverComponent(componentId) {
-    await this.send("hover_component" /* HOVER_COMPONENT */, {
-      componentId
-    });
-  }
-  /**
-   * 更新组件
-   */
-  async updateComponent(data) {
-    await this.send("update_component" /* UPDATE_COMPONENT */, data);
-  }
-  /**
-   * 添加组件
-   */
-  async addComponent(data) {
-    await this.send("add_component" /* ADD_COMPONENT */, data);
-  }
-  /**
-   * 移动组件
-   */
-  async moveComponent(data) {
-    await this.send("move_component" /* MOVE_COMPONENT */, data);
-  }
-  /**
-   * 删除组件
-   */
-  async deleteComponent(componentId) {
-    await this.send("delete_component" /* DELETE_COMPONENT */, {
-      componentId
-    });
-  }
-  // ==================== 状态同步 ====================
-  /**
-   * 同步变量
-   */
-  async syncVariables(variables) {
-    await this.send("sync_variables" /* SYNC_VARIABLES */, { variables });
-  }
-  send(type, data) {
-    return new Promise((resolve, reject) => {
-      const message = createMessage(type, data);
-      const timer = setTimeout(() => {
-        this.pendingRequests.delete(message.id);
-        reject(new Error(`Request timeout: ${type}`));
-      }, this.options.timeout);
-      this.pendingRequests.set(message.id, { resolve, reject, timer });
-      this.log("debug", "Sending message:", type, message);
-      this.options.iframe.contentWindow?.postMessage(message, this.options.targetOrigin);
-    });
-  }
-  log(level, message, ...args) {
-    if (this.options.debug || level !== "debug") {
-      console[level](`[SandboxHost] ${message}`, ...args);
-    }
-  }
-};
-
-// src/sandbox-client.ts
-var SandboxClient = class {
-  constructor(options = {}) {
-    this.runtime = null;
-    this.selectedComponents = /* @__PURE__ */ new Set();
-    this.hoveredComponent = null;
-    this.dragState = {
-      isDragging: false,
-      draggedComponentId: null,
-      draggedElement: null,
-      dropTarget: null,
-      dropPosition: null,
-      dropIndicator: null
-    };
-    // ==================== 私有方法 ====================
-    this.handleMessage = async (event) => {
-      const message = event.data;
-      if (!isDjvlcMessage(message)) {
-        return;
-      }
-      this.log("debug", "Received message:", message.type, message);
-      try {
-        let responseData;
-        switch (message.type) {
-          case "init" /* INIT */:
-            responseData = await this.handleInit(message.data);
-            break;
-          case "load_page" /* LOAD_PAGE */:
-            responseData = await this.handleLoadPage(message.data);
-            break;
-          case "update_schema" /* UPDATE_SCHEMA */:
-            responseData = await this.handleUpdateSchema(message.data);
-            break;
-          case "refresh" /* REFRESH */:
-            responseData = await this.handleRefresh();
-            break;
-          case "select_component" /* SELECT_COMPONENT */:
-            responseData = this.handleSelectComponent(message.data);
-            break;
-          case "hover_component" /* HOVER_COMPONENT */:
-            responseData = this.handleHoverComponent(message.data);
-            break;
-          case "update_component" /* UPDATE_COMPONENT */:
-            responseData = this.handleUpdateComponent(message.data);
-            break;
-          case "add_component" /* ADD_COMPONENT */:
-            responseData = this.handleAddComponent(message.data);
-            break;
-          case "move_component" /* MOVE_COMPONENT */:
-            responseData = this.handleMoveComponent(message.data);
-            break;
-          case "delete_component" /* DELETE_COMPONENT */:
-            responseData = this.handleDeleteComponent(message.data);
-            break;
-          case "sync_variables" /* SYNC_VARIABLES */:
-            responseData = this.handleSyncVariables(message.data);
-            break;
-          default:
-            this.log("warn", "Unknown message type:", message.type);
-            return;
-        }
-        this.sendResponse(message.id, message.type, true, responseData);
-      } catch (error) {
-        this.sendResponse(
-          message.id,
-          message.type,
-          false,
-          void 0,
-          error instanceof Error ? error.message : "Unknown error"
-        );
-      }
-    };
-    this.options = {
-      targetOrigin: "*",
-      debug: false,
-      enableDrag: true,
-      dragOptions: {
-        dragOpacity: 0.5,
-        showDropIndicator: true,
-        dropIndicatorColor: "#1890ff"
-      },
-      ...options
-    };
-  }
-  /**
-   * 设置运行时实例
-   */
-  setRuntime(runtime) {
-    this.runtime = runtime;
-  }
-  /**
-   * 连接到父窗口
-   */
-  connect() {
-    window.addEventListener("message", this.handleMessage);
-    this.log("debug", "SandboxClient connected");
-    this.sendReady();
-  }
-  /**
-   * 断开连接
-   */
-  disconnect() {
-    window.removeEventListener("message", this.handleMessage);
-    this.log("debug", "SandboxClient disconnected");
-  }
-  /**
-   * 初始化组件事件监听
-   */
-  initComponentEventListeners() {
-    document.addEventListener("click", (e) => {
-      const target = e.target;
-      const componentEl = this.findComponentElement(target);
-      if (componentEl) {
-        e.preventDefault();
-        e.stopPropagation();
-        const componentId = componentEl.getAttribute("data-component-id");
-        const componentType = componentEl.getAttribute("data-component-type");
-        if (componentId) {
-          this.sendComponentEvent("component_click" /* COMPONENT_CLICK */, {
-            componentId,
-            componentType: componentType || "unknown",
-            bounds: componentEl.getBoundingClientRect(),
-            position: { x: e.clientX, y: e.clientY }
-          });
-        }
-      }
-    }, true);
-    document.addEventListener("mouseover", (e) => {
-      const target = e.target;
-      const componentEl = this.findComponentElement(target);
-      if (componentEl) {
-        const componentId = componentEl.getAttribute("data-component-id");
-        const componentType = componentEl.getAttribute("data-component-type");
-        if (componentId && componentId !== this.hoveredComponent) {
-          this.hoveredComponent = componentId;
-          this.sendComponentEvent("component_hover" /* COMPONENT_HOVER */, {
-            componentId,
-            componentType: componentType || "unknown",
-            bounds: componentEl.getBoundingClientRect()
-          });
-        }
-      }
-    });
-    document.addEventListener("mouseout", (e) => {
-      const relatedTarget = e.relatedTarget;
-      if (!relatedTarget || !this.findComponentElement(relatedTarget)) {
-        if (this.hoveredComponent) {
-          this.hoveredComponent = null;
-          this.sendComponentEvent("component_hover" /* COMPONENT_HOVER */, {
-            componentId: "",
-            componentType: ""
-          });
-        }
-      }
-    });
-    document.addEventListener("contextmenu", (e) => {
-      const target = e.target;
-      const componentEl = this.findComponentElement(target);
-      if (componentEl) {
-        e.preventDefault();
-        const componentId = componentEl.getAttribute("data-component-id");
-        const componentType = componentEl.getAttribute("data-component-type");
-        if (componentId) {
-          this.sendComponentEvent("component_context_menu" /* COMPONENT_CONTEXT_MENU */, {
-            componentId,
-            componentType: componentType || "unknown",
-            bounds: componentEl.getBoundingClientRect(),
-            position: { x: e.clientX, y: e.clientY }
-          });
-        }
-      }
-    });
-  }
-  /**
-   * 注入编辑器样式
-   */
-  injectEditorStyles() {
-    const indicatorColor = this.options.dragOptions?.dropIndicatorColor || "#1890ff";
-    const style = document.createElement("style");
-    style.id = "djvlc-editor-styles";
-    style.textContent = `
-      /* \u9009\u4E2D\u72B6\u6001 */
-      [data-component-id].djvlc-selected {
-        outline: 2px solid ${indicatorColor} !important;
-        outline-offset: 2px;
-      }
-
-      /* \u60AC\u505C\u72B6\u6001 */
-      [data-component-id].djvlc-hovered {
-        outline: 1px dashed ${indicatorColor} !important;
-        outline-offset: 1px;
-      }
-
-      /* \u7981\u7528\u4EA4\u4E92 */
-      [data-component-id] * {
-        pointer-events: none;
-      }
-
-      [data-component-id] {
-        cursor: pointer;
-        pointer-events: auto;
-      }
-
-      /* \u53EF\u62D6\u62FD\u72B6\u6001 */
-      [data-component-id][draggable="true"] {
-        cursor: grab;
-      }
-
-      [data-component-id][draggable="true"]:active {
-        cursor: grabbing;
-      }
-
-      /* \u62D6\u62FD\u4E2D\u72B6\u6001 */
-      [data-component-id].djvlc-dragging {
-        opacity: ${this.options.dragOptions?.dragOpacity || 0.5};
-      }
-
-      /* \u653E\u7F6E\u76EE\u6807\u72B6\u6001 */
-      [data-component-id].djvlc-drop-target {
-        outline: 2px dashed ${indicatorColor} !important;
-        outline-offset: 4px;
-      }
-
-      /* \u62D6\u62FD\u5360\u4F4D\u7B26 */
-      .djvlc-drop-indicator {
-        position: absolute;
-        background: ${indicatorColor};
-        opacity: 0.8;
-        pointer-events: none;
-        z-index: 10000;
-        transition: all 0.1s ease;
-      }
-
-      .djvlc-drop-indicator.horizontal {
-        height: 4px;
-        width: 100%;
-        border-radius: 2px;
-      }
-
-      .djvlc-drop-indicator.vertical {
-        width: 4px;
-        height: 100%;
-        border-radius: 2px;
-      }
-
-      /* \u653E\u7F6E\u63D0\u793A\u7BAD\u5934 */
-      .djvlc-drop-indicator::before {
-        content: '';
-        position: absolute;
-        width: 8px;
-        height: 8px;
-        background: ${indicatorColor};
-        border-radius: 50%;
-        left: -4px;
-        top: -2px;
-      }
-
-      .djvlc-drop-indicator::after {
-        content: '';
-        position: absolute;
-        width: 8px;
-        height: 8px;
-        background: ${indicatorColor};
-        border-radius: 50%;
-        right: -4px;
-        top: -2px;
-      }
-    `;
-    document.head.appendChild(style);
-  }
-  /**
-   * 初始化拖拽事件监听
-   */
-  initDragEventListeners() {
-    if (!this.options.enableDrag) return;
-    this.makeComponentsDraggable();
-    document.addEventListener("dragstart", (e) => {
-      const target = e.target;
-      const componentEl = this.findComponentElement(target);
-      if (!componentEl) return;
-      const componentId = componentEl.getAttribute("data-component-id");
-      if (!componentId) return;
-      this.dragState.isDragging = true;
-      this.dragState.draggedComponentId = componentId;
-      this.dragState.draggedElement = componentEl;
-      componentEl.classList.add("djvlc-dragging");
-      e.dataTransfer?.setData("text/plain", componentId);
-      e.dataTransfer?.setData("application/json", JSON.stringify({
-        componentId,
-        componentType: componentEl.getAttribute("data-component-type")
-      }));
-      if (e.dataTransfer) {
-        e.dataTransfer.effectAllowed = "move";
-      }
-      this.log("debug", "Drag start:", componentId);
-    });
-    document.addEventListener("dragover", (e) => {
-      if (!this.dragState.isDragging) return;
-      e.preventDefault();
-      const target = e.target;
-      const componentEl = this.findComponentElement(target);
-      if (!componentEl || componentEl === this.dragState.draggedElement) {
-        this.hideDropIndicator();
-        return;
-      }
-      const componentId = componentEl.getAttribute("data-component-id");
-      if (!componentId) return;
-      const rect = componentEl.getBoundingClientRect();
-      const y = e.clientY;
-      const threshold = rect.height / 3;
-      let position;
-      if (y < rect.top + threshold) {
-        position = "before";
-      } else if (y > rect.bottom - threshold) {
-        position = "after";
-      } else {
-        position = "inside";
-      }
-      if (this.dragState.dropTarget !== componentEl || this.dragState.dropPosition !== position) {
-        this.dragState.dropTarget?.classList.remove("djvlc-drop-target");
-        this.dragState.dropTarget = componentEl;
-        this.dragState.dropPosition = position;
-        if (position === "inside") {
-          componentEl.classList.add("djvlc-drop-target");
-          this.hideDropIndicator();
-        } else {
-          componentEl.classList.remove("djvlc-drop-target");
-          this.showDropIndicator(componentEl, position);
-        }
-      }
-    });
-    document.addEventListener("dragleave", (e) => {
-      const target = e.target;
-      const componentEl = this.findComponentElement(target);
-      if (componentEl && componentEl === this.dragState.dropTarget) {
-        const relatedTarget = e.relatedTarget;
-        if (!relatedTarget || !componentEl.contains(relatedTarget)) {
-          componentEl.classList.remove("djvlc-drop-target");
-        }
-      }
-    });
-    document.addEventListener("drop", (e) => {
-      if (!this.dragState.isDragging) return;
-      e.preventDefault();
-      const { draggedComponentId, dropTarget, dropPosition } = this.dragState;
-      if (draggedComponentId && dropTarget && dropPosition) {
-        const targetComponentId = dropTarget.getAttribute("data-component-id");
-        if (targetComponentId && targetComponentId !== draggedComponentId) {
-          this.log("info", "Drop:", draggedComponentId, dropPosition, targetComponentId);
-          this.send("component_drop" /* COMPONENT_DROP */, {
-            componentId: draggedComponentId,
-            targetComponentId,
-            position: dropPosition
-          });
-        }
-      }
-      this.endDrag();
-    });
-    document.addEventListener("dragend", () => {
-      this.endDrag();
-    });
-  }
-  /**
-   * 使组件可拖拽
-   */
-  makeComponentsDraggable() {
-    const components = document.querySelectorAll("[data-component-id]");
-    components.forEach((el) => {
-      el.draggable = true;
-    });
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        mutation.addedNodes.forEach((node) => {
-          if (node instanceof HTMLElement) {
-            if (node.hasAttribute("data-component-id")) {
-              node.draggable = true;
-            }
-            node.querySelectorAll("[data-component-id]").forEach((el) => {
-              el.draggable = true;
-            });
-          }
-        });
-      });
-    });
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true
-    });
-  }
-  /**
-   * 显示放置指示器
-   */
-  showDropIndicator(target, position) {
-    if (!this.options.dragOptions?.showDropIndicator) return;
-    let indicator = this.dragState.dropIndicator;
-    if (!indicator) {
-      indicator = document.createElement("div");
-      indicator.className = "djvlc-drop-indicator horizontal";
-      document.body.appendChild(indicator);
-      this.dragState.dropIndicator = indicator;
-    }
-    const rect = target.getBoundingClientRect();
-    const scrollTop = window.scrollY || document.documentElement.scrollTop;
-    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
-    indicator.style.left = `${rect.left + scrollLeft}px`;
-    indicator.style.width = `${rect.width}px`;
-    if (position === "before") {
-      indicator.style.top = `${rect.top + scrollTop - 2}px`;
-    } else {
-      indicator.style.top = `${rect.bottom + scrollTop - 2}px`;
-    }
-    indicator.style.display = "block";
-  }
-  /**
-   * 隐藏放置指示器
-   */
-  hideDropIndicator() {
-    if (this.dragState.dropIndicator) {
-      this.dragState.dropIndicator.style.display = "none";
-    }
-  }
-  /**
-   * 结束拖拽
-   */
-  endDrag() {
-    this.dragState.draggedElement?.classList.remove("djvlc-dragging");
-    this.dragState.dropTarget?.classList.remove("djvlc-drop-target");
-    this.hideDropIndicator();
-    this.dragState = {
-      isDragging: false,
-      draggedComponentId: null,
-      draggedElement: null,
-      dropTarget: null,
-      dropPosition: null,
-      dropIndicator: this.dragState.dropIndicator
-      // 保留 indicator 元素
-    };
-  }
-  async handleInit(data) {
-    this.log("info", "Init with config:", data);
-    void data;
-    if (this.runtime) {
-      try {
-        await this.runtime.init();
-      } catch (error) {
-        this.log("error", "Failed to init runtime:", error);
-        throw error;
-      }
-    }
-  }
-  async handleLoadPage(data) {
-    this.log("info", "Load page:", data.pageUid);
-    if (!this.runtime) {
-      throw new Error("Runtime not set");
-    }
-    try {
-      await this.runtime.load();
-      await this.runtime.render();
-      this.syncState();
-    } catch (error) {
-      this.log("error", "Failed to load page:", error);
-      throw error;
-    }
-  }
-  async handleUpdateSchema(data) {
-    this.log("info", "Update schema", data.fullUpdate ? "(full)" : "(partial)");
-    if (!this.runtime) {
-      throw new Error("Runtime not set");
-    }
-    try {
-      if (data.fullUpdate) {
-        await this.runtime.load();
-        await this.runtime.render();
-      } else {
-        await this.runtime.load();
-        await this.runtime.render();
-      }
-      this.syncState();
-    } catch (error) {
-      this.log("error", "Failed to update schema:", error);
-      throw error;
-    }
-  }
-  async handleRefresh() {
-    this.log("info", "Refresh page");
-    if (this.runtime) {
-      try {
-        await this.runtime.load();
-        await this.runtime.render();
-        this.syncState();
-      } catch (error) {
-        this.log("error", "Failed to refresh:", error);
-        window.location.reload();
-      }
-    } else {
-      window.location.reload();
-    }
-  }
-  handleSelectComponent(data) {
-    if (data.componentId) {
-      if (data.multi) {
-        if (this.selectedComponents.has(data.componentId)) {
-          this.selectedComponents.delete(data.componentId);
-        } else {
-          this.selectedComponents.add(data.componentId);
-        }
-      } else {
-        this.selectedComponents.clear();
-        this.selectedComponents.add(data.componentId);
-      }
-    } else {
-      this.selectedComponents.clear();
-    }
-    this.updateSelectionStyles();
-    this.syncState();
-  }
-  handleHoverComponent(data) {
-    document.querySelectorAll(".djvlc-hovered").forEach((el) => {
-      el.classList.remove("djvlc-hovered");
-    });
-    if (data.componentId) {
-      const el = document.querySelector(`[data-component-id="${data.componentId}"]`);
-      if (el && !this.selectedComponents.has(data.componentId)) {
-        el.classList.add("djvlc-hovered");
-      }
-    }
-  }
-  handleUpdateComponent(data) {
-    this.log("info", "Update component:", data.componentId);
-    this.runtime?.updateComponent(data.componentId, data.props || {});
-  }
-  handleAddComponent(data) {
-    this.log("info", "Add component:", data.component.componentType);
-    this.log("warn", "addComponent not supported, need to reload page");
-  }
-  handleMoveComponent(data) {
-    this.log("info", "Move component:", data.componentId, "to", data.targetIndex);
-    this.log("warn", "moveComponent not supported, need to reload page");
-  }
-  handleDeleteComponent(data) {
-    this.log("info", "Delete component:", data.componentId);
-    this.log("warn", "deleteComponent not supported, need to reload page");
-    this.selectedComponents.delete(data.componentId);
-    if (this.hoveredComponent === data.componentId) {
-      this.hoveredComponent = null;
-    }
-  }
-  handleSyncVariables(data) {
-    Object.entries(data.variables).forEach(([key, value]) => {
-      this.runtime?.setVariable(key, value);
-    });
-  }
-  updateSelectionStyles() {
-    document.querySelectorAll(".djvlc-selected").forEach((el) => {
-      el.classList.remove("djvlc-selected");
-    });
-    this.selectedComponents.forEach((id) => {
-      const el = document.querySelector(`[data-component-id="${id}"]`);
-      if (el) {
-        el.classList.add("djvlc-selected");
-      }
-    });
-  }
-  syncState() {
-    const runtimeState = this.runtime?.getState();
-    const state = {
-      phase: runtimeState?.phase || "idle",
-      page: runtimeState?.page ? {
-        pageUid: runtimeState.page.pageUid,
-        pageVersionId: runtimeState.page.pageVersionId
-      } : void 0,
-      selectedComponents: Array.from(this.selectedComponents),
-      hoveredComponent: this.hoveredComponent
-    };
-    this.send("sync_state" /* SYNC_STATE */, state);
-  }
-  sendReady() {
-    const data = {
-      runtimeVersion: "0.1.0",
-      capabilities: [
-        "select",
-        "hover",
-        "update",
-        "add",
-        "move",
-        "delete",
-        "drag"
-      ]
-    };
-    this.send("ready" /* READY */, data);
-  }
-  sendComponentEvent(type, data) {
-    this.send(type, data);
-  }
-  send(type, data) {
-    const message = createMessage(type, data);
-    this.log("debug", "Sending message:", type, message);
-    window.parent.postMessage(message, this.options.targetOrigin || "*");
-  }
-  sendResponse(requestId, type, success, data, error) {
-    const response = createResponse(requestId, type, success, data, error);
-    this.log("debug", "Sending response:", type, response);
-    window.parent.postMessage(response, this.options.targetOrigin || "*");
-  }
-  findComponentElement(target) {
-    let current = target;
-    while (current) {
-      if (current.hasAttribute("data-component-id")) {
-        return current;
-      }
-      current = current.parentElement;
-    }
-    return null;
-  }
-  log(level, message, ...args) {
-    if (this.options.debug || level !== "debug") {
-      console[level](`[SandboxClient] ${message}`, ...args);
-    }
-  }
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  MessageType,
-  SandboxClient,
-  SandboxHost,
-  createMessage,
-  createResponse,
-  generateMessageId,
-  isDjvlcMessage
-});
+var t=(t=>(t.READY="ready",t.INIT="init",t.DESTROY="destroy",t.LOAD_PAGE="load_page",t.UPDATE_SCHEMA="update_schema",t.REFRESH="refresh",t.SELECT_COMPONENT="select_component",t.HOVER_COMPONENT="hover_component",t.UPDATE_COMPONENT="update_component",t.DELETE_COMPONENT="delete_component",t.ADD_COMPONENT="add_component",t.MOVE_COMPONENT="move_component",t.SYNC_STATE="sync_state",t.SYNC_VARIABLES="sync_variables",t.COMPONENT_CLICK="component_click",t.COMPONENT_HOVER="component_hover",t.COMPONENT_CONTEXT_MENU="component_context_menu",t.COMPONENT_DRAG_START="component_drag_start",t.COMPONENT_DRAG_END="component_drag_end",t.COMPONENT_DROP="component_drop",t.ERROR="error",t.LOG="log",t))(t||{});function e(){return`msg_${Date.now()}_${Math.random().toString(36).slice(2,9)}`}function n(t,n){return{type:t,id:e(),data:n,timestamp:Date.now()}}function o(t,n,o,i,s){return{type:n,id:e(),requestId:t,success:o,data:i,error:s,timestamp:Date.now()}}function i(t){if(!t||"object"!=typeof t)return!1;const e=t;return"string"==typeof e.type&&"string"==typeof e.id&&"number"==typeof e.timestamp}exports.MessageType=t,exports.SandboxClient=class{constructor(t={}){this.runtime=null,this.selectedComponents=new Set,this.hoveredComponent=null,this.dragState={isDragging:!1,draggedComponentId:null,draggedElement:null,dropTarget:null,dropPosition:null,dropIndicator:null},this.handleMessage=async t=>{const e=t.data;if(i(e)){this.log("debug","Received message:",e.type,e);try{let t;switch(e.type){case"init":t=await this.handleInit(e.data);break;case"load_page":t=await this.handleLoadPage(e.data);break;case"update_schema":t=await this.handleUpdateSchema(e.data);break;case"refresh":t=await this.handleRefresh();break;case"select_component":t=this.handleSelectComponent(e.data);break;case"hover_component":t=this.handleHoverComponent(e.data);break;case"update_component":t=this.handleUpdateComponent(e.data);break;case"add_component":t=this.handleAddComponent(e.data);break;case"move_component":t=this.handleMoveComponent(e.data);break;case"delete_component":t=this.handleDeleteComponent(e.data);break;case"sync_variables":t=this.handleSyncVariables(e.data);break;default:return void this.log("warn","Unknown message type:",e.type)}this.sendResponse(e.id,e.type,!0,t)}catch(t){this.sendResponse(e.id,e.type,!1,void 0,t instanceof Error?t.message:"Unknown error")}}},this.options={targetOrigin:"*",debug:!1,enableDrag:!0,dragOptions:{dragOpacity:.5,showDropIndicator:!0,dropIndicatorColor:"#1890ff"},...t}}setRuntime(t){this.runtime=t}connect(){window.addEventListener("message",this.handleMessage),this.log("debug","SandboxClient connected"),this.sendReady()}disconnect(){window.removeEventListener("message",this.handleMessage),this.log("debug","SandboxClient disconnected")}initComponentEventListeners(){document.addEventListener("click",t=>{const e=t.target,n=this.findComponentElement(e);if(n){t.preventDefault(),t.stopPropagation();const e=n.getAttribute("data-component-id"),o=n.getAttribute("data-component-type");e&&this.sendComponentEvent("component_click",{componentId:e,componentType:o||"unknown",bounds:n.getBoundingClientRect(),position:{x:t.clientX,y:t.clientY}})}},!0),document.addEventListener("mouseover",t=>{const e=t.target,n=this.findComponentElement(e);if(n){const t=n.getAttribute("data-component-id"),e=n.getAttribute("data-component-type");t&&t!==this.hoveredComponent&&(this.hoveredComponent=t,this.sendComponentEvent("component_hover",{componentId:t,componentType:e||"unknown",bounds:n.getBoundingClientRect()}))}}),document.addEventListener("mouseout",t=>{const e=t.relatedTarget;e&&this.findComponentElement(e)||this.hoveredComponent&&(this.hoveredComponent=null,this.sendComponentEvent("component_hover",{componentId:"",componentType:""}))}),document.addEventListener("contextmenu",t=>{const e=t.target,n=this.findComponentElement(e);if(n){t.preventDefault();const e=n.getAttribute("data-component-id"),o=n.getAttribute("data-component-type");e&&this.sendComponentEvent("component_context_menu",{componentId:e,componentType:o||"unknown",bounds:n.getBoundingClientRect(),position:{x:t.clientX,y:t.clientY}})}})}injectEditorStyles(){const t=this.options.dragOptions?.dropIndicatorColor||"#1890ff",e=document.createElement("style");e.id="djvlc-editor-styles",e.textContent=`\n      /* 选中状态 */\n      [data-component-id].djvlc-selected {\n        outline: 2px solid ${t} !important;\n        outline-offset: 2px;\n      }\n\n      /* 悬停状态 */\n      [data-component-id].djvlc-hovered {\n        outline: 1px dashed ${t} !important;\n        outline-offset: 1px;\n      }\n\n      /* 禁用交互 */\n      [data-component-id] * {\n        pointer-events: none;\n      }\n\n      [data-component-id] {\n        cursor: pointer;\n        pointer-events: auto;\n      }\n\n      /* 可拖拽状态 */\n      [data-component-id][draggable="true"] {\n        cursor: grab;\n      }\n\n      [data-component-id][draggable="true"]:active {\n        cursor: grabbing;\n      }\n\n      /* 拖拽中状态 */\n      [data-component-id].djvlc-dragging {\n        opacity: ${this.options.dragOptions?.dragOpacity||.5};\n      }\n\n      /* 放置目标状态 */\n      [data-component-id].djvlc-drop-target {\n        outline: 2px dashed ${t} !important;\n        outline-offset: 4px;\n      }\n\n      /* 拖拽占位符 */\n      .djvlc-drop-indicator {\n        position: absolute;\n        background: ${t};\n        opacity: 0.8;\n        pointer-events: none;\n        z-index: 10000;\n        transition: all 0.1s ease;\n      }\n\n      .djvlc-drop-indicator.horizontal {\n        height: 4px;\n        width: 100%;\n        border-radius: 2px;\n      }\n\n      .djvlc-drop-indicator.vertical {\n        width: 4px;\n        height: 100%;\n        border-radius: 2px;\n      }\n\n      /* 放置提示箭头 */\n      .djvlc-drop-indicator::before {\n        content: '';\n        position: absolute;\n        width: 8px;\n        height: 8px;\n        background: ${t};\n        border-radius: 50%;\n        left: -4px;\n        top: -2px;\n      }\n\n      .djvlc-drop-indicator::after {\n        content: '';\n        position: absolute;\n        width: 8px;\n        height: 8px;\n        background: ${t};\n        border-radius: 50%;\n        right: -4px;\n        top: -2px;\n      }\n    `,document.head.appendChild(e)}initDragEventListeners(){this.options.enableDrag&&(this.makeComponentsDraggable(),document.addEventListener("dragstart",t=>{const e=t.target,n=this.findComponentElement(e);if(!n)return;const o=n.getAttribute("data-component-id");o&&(this.dragState.isDragging=!0,this.dragState.draggedComponentId=o,this.dragState.draggedElement=n,n.classList.add("djvlc-dragging"),t.dataTransfer?.setData("text/plain",o),t.dataTransfer?.setData("application/json",JSON.stringify({componentId:o,componentType:n.getAttribute("data-component-type")})),t.dataTransfer&&(t.dataTransfer.effectAllowed="move"),this.log("debug","Drag start:",o))}),document.addEventListener("dragover",t=>{if(!this.dragState.isDragging)return;t.preventDefault();const e=t.target,n=this.findComponentElement(e);if(!n||n===this.dragState.draggedElement)return void this.hideDropIndicator();if(!n.getAttribute("data-component-id"))return;const o=n.getBoundingClientRect(),i=t.clientY,s=o.height/3;let a;a=i<o.top+s?"before":i>o.bottom-s?"after":"inside",this.dragState.dropTarget===n&&this.dragState.dropPosition===a||(this.dragState.dropTarget?.classList.remove("djvlc-drop-target"),this.dragState.dropTarget=n,this.dragState.dropPosition=a,"inside"===a?(n.classList.add("djvlc-drop-target"),this.hideDropIndicator()):(n.classList.remove("djvlc-drop-target"),this.showDropIndicator(n,a)))}),document.addEventListener("dragleave",t=>{const e=t.target,n=this.findComponentElement(e);if(n&&n===this.dragState.dropTarget){const e=t.relatedTarget;e&&n.contains(e)||n.classList.remove("djvlc-drop-target")}}),document.addEventListener("drop",t=>{if(!this.dragState.isDragging)return;t.preventDefault();const{draggedComponentId:e,dropTarget:n,dropPosition:o}=this.dragState;if(e&&n&&o){const t=n.getAttribute("data-component-id");t&&t!==e&&(this.log("info","Drop:",e,o,t),this.send("component_drop",{componentId:e,targetComponentId:t,position:o}))}this.endDrag()}),document.addEventListener("dragend",()=>{this.endDrag()}))}makeComponentsDraggable(){document.querySelectorAll("[data-component-id]").forEach(t=>{t.draggable=!0}),new MutationObserver(t=>{t.forEach(t=>{t.addedNodes.forEach(t=>{t instanceof HTMLElement&&(t.hasAttribute("data-component-id")&&(t.draggable=!0),t.querySelectorAll("[data-component-id]").forEach(t=>{t.draggable=!0}))})})}).observe(document.body,{childList:!0,subtree:!0})}showDropIndicator(t,e){if(!this.options.dragOptions?.showDropIndicator)return;let n=this.dragState.dropIndicator;n||(n=document.createElement("div"),n.className="djvlc-drop-indicator horizontal",document.body.appendChild(n),this.dragState.dropIndicator=n);const o=t.getBoundingClientRect(),i=window.scrollY||document.documentElement.scrollTop,s=window.scrollX||document.documentElement.scrollLeft;n.style.left=`${o.left+s}px`,n.style.width=`${o.width}px`,n.style.top="before"===e?o.top+i-2+"px":o.bottom+i-2+"px",n.style.display="block"}hideDropIndicator(){this.dragState.dropIndicator&&(this.dragState.dropIndicator.style.display="none")}endDrag(){this.dragState.draggedElement?.classList.remove("djvlc-dragging"),this.dragState.dropTarget?.classList.remove("djvlc-drop-target"),this.hideDropIndicator(),this.dragState={isDragging:!1,draggedComponentId:null,draggedElement:null,dropTarget:null,dropPosition:null,dropIndicator:this.dragState.dropIndicator}}async handleInit(t){if(this.log("info","Init with config:",t),this.runtime)try{await this.runtime.init()}catch(t){throw this.log("error","Failed to init runtime:",t),t}}async handleLoadPage(t){if(this.log("info","Load page:",t.pageUid),!this.runtime)throw new Error("Runtime not set");try{await this.runtime.load(),await this.runtime.render(),this.syncState()}catch(t){throw this.log("error","Failed to load page:",t),t}}async handleUpdateSchema(t){if(this.log("info","Update schema",t.fullUpdate?"(full)":"(partial)"),!this.runtime)throw new Error("Runtime not set");try{t.fullUpdate,await this.runtime.load(),await this.runtime.render(),this.syncState()}catch(t){throw this.log("error","Failed to update schema:",t),t}}async handleRefresh(){if(this.log("info","Refresh page"),this.runtime)try{await this.runtime.load(),await this.runtime.render(),this.syncState()}catch(t){this.log("error","Failed to refresh:",t),window.location.reload()}else window.location.reload()}handleSelectComponent(t){t.componentId?t.multi?this.selectedComponents.has(t.componentId)?this.selectedComponents.delete(t.componentId):this.selectedComponents.add(t.componentId):(this.selectedComponents.clear(),this.selectedComponents.add(t.componentId)):this.selectedComponents.clear(),this.updateSelectionStyles(),this.syncState()}handleHoverComponent(t){if(document.querySelectorAll(".djvlc-hovered").forEach(t=>{t.classList.remove("djvlc-hovered")}),t.componentId){const e=document.querySelector(`[data-component-id="${t.componentId}"]`);e&&!this.selectedComponents.has(t.componentId)&&e.classList.add("djvlc-hovered")}}handleUpdateComponent(t){this.log("info","Update component:",t.componentId),this.runtime?.updateComponent(t.componentId,t.props||{})}handleAddComponent(t){this.log("info","Add component:",t.component.componentType),this.log("warn","addComponent not supported, need to reload page")}handleMoveComponent(t){this.log("info","Move component:",t.componentId,"to",t.targetIndex),this.log("warn","moveComponent not supported, need to reload page")}handleDeleteComponent(t){this.log("info","Delete component:",t.componentId),this.log("warn","deleteComponent not supported, need to reload page"),this.selectedComponents.delete(t.componentId),this.hoveredComponent===t.componentId&&(this.hoveredComponent=null)}handleSyncVariables(t){Object.entries(t.variables).forEach(([t,e])=>{this.runtime?.setVariable(t,e)})}updateSelectionStyles(){document.querySelectorAll(".djvlc-selected").forEach(t=>{t.classList.remove("djvlc-selected")}),this.selectedComponents.forEach(t=>{const e=document.querySelector(`[data-component-id="${t}"]`);e&&e.classList.add("djvlc-selected")})}syncState(){const t=this.runtime?.getState(),e={phase:t?.phase||"idle",page:t?.page?{pageUid:t.page.pageUid,pageVersionId:t.page.pageVersionId}:void 0,selectedComponents:Array.from(this.selectedComponents),hoveredComponent:this.hoveredComponent};this.send("sync_state",e)}sendReady(){this.send("ready",{runtimeVersion:"0.1.0",capabilities:["select","hover","update","add","move","delete","drag"]})}sendComponentEvent(t,e){this.send(t,e)}send(t,e){const o=n(t,e);this.log("debug","Sending message:",t,o),window.parent.postMessage(o,this.options.targetOrigin||"*")}sendResponse(t,e,n,i,s){const a=o(t,e,n,i,s);this.log("debug","Sending response:",e,a),window.parent.postMessage(a,this.options.targetOrigin||"*")}findComponentElement(t){let e=t;for(;e;){if(e.hasAttribute("data-component-id"))return e;e=e.parentElement}return null}log(t,e,...n){this.options.debug}},exports.SandboxHost=class{constructor(t){this.pendingRequests=new Map,this.isReady=!1,this.handleMessage=t=>{if(t.source!==this.options.iframe.contentWindow)return;if("*"!==this.options.targetOrigin&&t.origin!==this.options.targetOrigin)return;const e=t.data;if(i(e)){if(this.log("debug","Received message:",e.type,e),"requestId"in e){const t=this.pendingRequests.get(e.requestId);if(t)return clearTimeout(t.timer),this.pendingRequests.delete(e.requestId),void(e.success?t.resolve(e.data):t.reject(new Error(e.error||"Unknown error")))}switch(e.type){case"ready":this.isReady=!0,this.readyResolve(),this.options.onReady?.();break;case"component_click":this.options.onComponentClick?.(e.data.componentId,e.data);break;case"component_hover":this.options.onComponentHover?.(e.data.componentId,e.data);break;case"component_context_menu":this.options.onComponentContextMenu?.(e.data.componentId,e.data);break;case"sync_state":this.options.onSyncState?.(e.data);break;case"error":this.options.onError?.(e.data);break;case"log":{const t=e.data;this.options.onLog?.(t.level,t.message,...t.args||[]);break}}}},this.options={timeout:3e4,debug:!1,...t},this.readyPromise=new Promise(t=>{this.readyResolve=t})}connect(){window.addEventListener("message",this.handleMessage),this.log("debug","SandboxHost connected")}disconnect(){window.removeEventListener("message",this.handleMessage),this.pendingRequests.forEach(({timer:t})=>clearTimeout(t)),this.pendingRequests.clear(),this.isReady=!1,this.log("debug","SandboxHost disconnected")}async waitReady(){return this.readyPromise}get ready(){return this.isReady}async init(t){await this.send("init",t)}async loadPage(t){await this.send("load_page",t)}async updateSchema(t){await this.send("update_schema",t)}async refresh(){await this.send("refresh",{})}async selectComponent(t,e=!1){await this.send("select_component",{componentId:t,multi:e})}async hoverComponent(t){await this.send("hover_component",{componentId:t})}async updateComponent(t){await this.send("update_component",t)}async addComponent(t){await this.send("add_component",t)}async moveComponent(t){await this.send("move_component",t)}async deleteComponent(t){await this.send("delete_component",{componentId:t})}async syncVariables(t){await this.send("sync_variables",{variables:t})}send(t,e){return new Promise((o,i)=>{const s=n(t,e),a=setTimeout(()=>{this.pendingRequests.delete(s.id),i(new Error(`Request timeout: ${t}`))},this.options.timeout);this.pendingRequests.set(s.id,{resolve:o,reject:i,timer:a}),this.log("debug","Sending message:",t,s),this.options.iframe.contentWindow?.postMessage(s,this.options.targetOrigin)})}log(t,e,...n){this.options.debug}},exports.createMessage=n,exports.createResponse=o,exports.generateMessageId=e,exports.isDjvlcMessage=i;