@juo/blocks 1.0.0

package/dist/editor.js

@@ -0,0 +1,711 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { getDefinedBlocks, onRegisterBlock } from "@juo/blocks";
+import { a as createEditorBridge, f as createRemoveBlockMessage, g as createRegisterBlocksMessage, h as createRegisterRoutesMessage } from "./bridge-DQsM97cH.js";
+import { p, b, q, v, w, k, n, c, y, u, l, m, x, e, r, t, s, o, d, z, i, j } from "./bridge-DQsM97cH.js";
+import { e as createBlockInstanceFromObject, m as indexOverrides } from "./theme-state-BZplRS92.js";
+function createEditorHandler(options) {
+  const { themeState, onBlockSelection } = options;
+  const blockSurfaceIndex = /* @__PURE__ */ new Map();
+  function getBlocks(surface) {
+    return surface === "overlay" ? themeState.overlay.blocks : themeState.page.blocks;
+  }
+  function indexSurface(surface, blocks) {
+    for (const [id, value] of blockSurfaceIndex) {
+      if (value === surface) {
+        blockSurfaceIndex.delete(id);
+      }
+    }
+    const visit = (block) => {
+      if (!(block == null ? void 0 : block.id)) return;
+      blockSurfaceIndex.set(block.id, surface);
+      for (const slotBlocks of Object.values(block.slots || {})) {
+        const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
+        for (const child of slotArray) {
+          if (typeof child !== "string") {
+            visit(child);
+          }
+        }
+      }
+    };
+    for (const block of blocks) {
+      visit(block);
+    }
+  }
+  function resolveSurfaceForMessage(message) {
+    const lookup = (id) => id ? blockSurfaceIndex.get(id) : void 0;
+    if (message.type === "UPDATE_BLOCK_PROPS") {
+      return lookup(message.payload.blockId) ?? "page";
+    }
+    if (message.type === "REMOVE_BLOCK") {
+      return lookup(message.payload.blockId) ?? lookup(message.payload.location.parentId) ?? "page";
+    }
+    if (message.type === "MOVE_BLOCK") {
+      return lookup(message.payload.blockId) ?? lookup(message.payload.location.parentId) ?? "page";
+    }
+    if (message.type === "ADD_BLOCK") {
+      const location = message.payload.location;
+      if (location.type === "append") {
+        return lookup(location.parentId) ?? "page";
+      }
+      return lookup(location.targetId) ?? "page";
+    }
+    return "page";
+  }
+  function handleMessage(message) {
+    var _a, _b;
+    if (message.type === "SET_GLOBAL_STYLES") {
+      themeState.setGlobalStyles(message.payload.styles);
+      return;
+    }
+    if (message.type === "PROVIDE_THEME_STATE") {
+      const surface = message.payload.surface ?? "page";
+      const blocks = ((_a = message.payload.blocks) == null ? void 0 : _a.map(
+        (block) => createBlockInstanceFromObject(block)
+      )) || [];
+      const target = getBlocks(surface);
+      target.value = blocks;
+      indexSurface(surface, target.value);
+    } else if (message.type === "SELECT_BLOCK") {
+      const blockId = message.payload.blockId;
+      if (onBlockSelection) {
+        onBlockSelection(blockId);
+      }
+    } else if (message.type === "PROVIDE_TRANSLATION_OVERRIDES" && message.payload.requestId == null) {
+      const catalogs = themeState.locales.catalogs;
+      const current = catalogs.value;
+      if (current == null) return;
+      const indexed = indexOverrides(message.payload.overrides);
+      catalogs.value = {
+        ...current,
+        theme: {
+          ...current.theme,
+          overrides: indexed.theme
+        },
+        blocks: {
+          ...current.blocks,
+          overrides: indexed.blocks
+        }
+      };
+    } else if (message.type === "SET_LOCALE") {
+      void themeState.locales.setLocale(message.payload.locale);
+    } else if (message.type === "UPDATE_BLOCK_PROPS") {
+      let findAndUpdateBlock = function(blocks, blockId, props) {
+        for (const block of blocks) {
+          if (block.id === blockId) {
+            block.props = { ...block.props, ...props };
+            return true;
+          }
+          for (const slotBlocks of Object.values(block.slots || {})) {
+            const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
+            for (const child of slotArray) {
+              if (typeof child !== "string" && (child == null ? void 0 : child.id)) {
+                if (findAndUpdateBlock([child], blockId, props)) {
+                  return true;
+                }
+              }
+            }
+          }
+        }
+        return false;
+      };
+      const surface = resolveSurfaceForMessage(message);
+      const target = getBlocks(surface);
+      findAndUpdateBlock(
+        target.value,
+        message.payload.blockId,
+        message.payload.props
+      );
+      target.value = [...target.value];
+      indexSurface(surface, target.value);
+    } else if (message.type === "ADD_BLOCK") {
+      const surface = resolveSurfaceForMessage(message);
+      const target = getBlocks(surface);
+      const { block: blockData, location } = message.payload;
+      const newBlock = createBlockInstanceFromObject(blockData);
+      if (location.type === "before" || location.type === "after") {
+        let findAndInsertBlock = function(blocks, targetId, newBlock2, position) {
+          var _a2;
+          for (let i2 = 0; i2 < blocks.length; i2++) {
+            if (blocks[i2].id === targetId) {
+              if (position === "before") {
+                blocks.splice(i2, 0, newBlock2);
+              } else {
+                blocks.splice(i2 + 1, 0, newBlock2);
+              }
+              return true;
+            }
+            for (const slotKey of Object.keys(blocks[i2].slots || {})) {
+              const slotBlocks = blocks[i2].slots[slotKey];
+              const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
+              for (let j2 = 0; j2 < slotArray.length; j2++) {
+                if (typeof slotArray[j2] !== "string" && ((_a2 = slotArray[j2]) == null ? void 0 : _a2.id) === targetId) {
+                  if (position === "before") {
+                    slotArray.splice(j2, 0, newBlock2);
+                  } else {
+                    slotArray.splice(j2 + 1, 0, newBlock2);
+                  }
+                  blocks[i2].slots[slotKey] = slotArray;
+                  return true;
+                }
+              }
+            }
+          }
+          return false;
+        };
+        findAndInsertBlock(
+          target.value,
+          location.targetId,
+          newBlock,
+          location.type
+        );
+      } else if (location.type === "append") {
+        let findAndAppendBlock = function(blocks, parentId, slot, newBlock2) {
+          for (const block of blocks) {
+            if (block.id === parentId) {
+              if (!block.slots[slot]) {
+                block.slots[slot] = [];
+              }
+              if (Array.isArray(block.slots[slot])) {
+                block.slots[slot].push(newBlock2);
+              } else {
+                block.slots[slot] = [block.slots[slot], newBlock2];
+              }
+              return true;
+            }
+            for (const slotKey of Object.keys(block.slots || {})) {
+              const slotBlocks = block.slots[slotKey];
+              const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
+              for (const child of slotArray) {
+                if (typeof child !== "string" && (child == null ? void 0 : child.id)) {
+                  if (findAndAppendBlock([child], parentId, slot, newBlock2)) {
+                    return true;
+                  }
+                }
+              }
+            }
+          }
+          return false;
+        };
+        findAndAppendBlock(
+          target.value,
+          location.parentId,
+          location.slot,
+          newBlock
+        );
+      }
+      target.value = [...target.value];
+      indexSurface(surface, target.value);
+    } else if (message.type === "REMOVE_BLOCK") {
+      let findAndRemoveBlock = function(blocks, blockId, slot, parentId) {
+        var _a2;
+        for (let i2 = 0; i2 < blocks.length; i2++) {
+          if (blocks[i2].id === parentId && ((_a2 = blocks[i2].slots) == null ? void 0 : _a2[slot])) {
+            const slotBlocks = blocks[i2].slots[slot];
+            const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
+            const index = slotArray.findIndex(
+              (b2) => typeof b2 !== "string" && (b2 == null ? void 0 : b2.id) === blockId
+            );
+            if (index !== -1) {
+              slotArray.splice(index, 1);
+              blocks[i2].slots[slot] = slotArray;
+              return true;
+            }
+          }
+          for (const slotKey of Object.keys(blocks[i2].slots || {})) {
+            const slotBlocks = blocks[i2].slots[slotKey];
+            const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
+            for (const child of slotArray) {
+              if (typeof child !== "string" && (child == null ? void 0 : child.id)) {
+                if (findAndRemoveBlock([child], blockId, slot, parentId)) {
+                  return true;
+                }
+              }
+            }
+          }
+        }
+        return false;
+      };
+      const surface = resolveSurfaceForMessage(message);
+      const target = getBlocks(surface);
+      let resolvedParentId = message.payload.location.parentId;
+      if (resolvedParentId === "root") {
+        resolvedParentId = ((_b = target.value[0]) == null ? void 0 : _b.id) ?? "root";
+      }
+      findAndRemoveBlock(
+        target.value,
+        message.payload.blockId,
+        message.payload.location.slot,
+        resolvedParentId
+      );
+      target.value = [...target.value];
+      indexSurface(surface, target.value);
+    } else if (message.type === "MOVE_BLOCK") {
+      let findAndMoveBlock = function(blocks, blockId, slot, parentId, newIndex) {
+        var _a2;
+        for (const block of blocks) {
+          if (block.id === parentId && ((_a2 = block.slots) == null ? void 0 : _a2[slot])) {
+            const slotBlocks = block.slots[slot];
+            const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
+            const oldIndex = slotArray.findIndex(
+              (b2) => typeof b2 !== "string" && (b2 == null ? void 0 : b2.id) === blockId
+            );
+            if (oldIndex !== -1) {
+              const [moved] = slotArray.splice(oldIndex, 1);
+              slotArray.splice(newIndex, 0, moved);
+              block.slots[slot] = slotArray;
+              return true;
+            }
+          }
+          for (const slotKey of Object.keys(block.slots || {})) {
+            const slotBlocks = block.slots[slotKey];
+            const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
+            for (const child of slotArray) {
+              if (typeof child !== "string" && (child == null ? void 0 : child.id)) {
+                if (findAndMoveBlock([child], blockId, slot, parentId, newIndex)) {
+                  return true;
+                }
+              }
+            }
+          }
+        }
+        return false;
+      };
+      const surface = resolveSurfaceForMessage(message);
+      const target = getBlocks(surface);
+      findAndMoveBlock(
+        target.value,
+        message.payload.blockId,
+        message.payload.location.slot,
+        message.payload.location.parentId,
+        message.payload.location.index
+      );
+      target.value = [...target.value];
+      indexSurface(surface, target.value);
+    }
+  }
+  indexSurface("page", themeState.page.blocks.value);
+  indexSurface("overlay", themeState.overlay.blocks.value);
+  return {
+    handleMessage
+  };
+}
+const styles = `
+<style>
+  .block-wrapper {
+    position: relative;
+    padding: 12px;
+    background-color: white;
+    border: 1px solid #B5B5B5;
+    border-radius: 8px;
+    justify-self: center;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  .block-wrapper:hover,
+  .block-wrapper.active {
+    border-color: #000000;
+  }
+
+  .block-wrapper__name {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 6.82px;
+    margin-bottom: 12px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #8A8A8A;
+    line-height: 100%;
+    height: 15px
+  }
+
+  .block-wrapper__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 100%;
+    flex-grow: 1;
+  }
+
+  .block-wrapper__actions button {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color: #C4C4C4;
+    justify-content: center;
+    appearance: none;
+    border: none;
+    text-inherit: inherit;
+    padding: 0;
+    background: none;
+    cursor: pointer;
+  }
+
+  .block-wrapper__actions button:hover {
+    color: #8A8A8A;
+  }
+
+
+  .block-wrapper__menu {
+    display: none;
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    z-index: 1000;
+    background: white;
+    border: 1px solid #e9e9e9;
+    border-radius: 6px;
+    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.04);
+    padding: 4px 0;
+    min-width: 148px;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .block-wrapper__menu.open {
+    display: flex;
+  }
+
+  .block-wrapper__menu-section {
+    padding: 0 4px;
+  }
+
+  .block-wrapper__menu-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 24px;
+    padding: 0 8px;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: inherit;
+    border-radius: 4px;
+    border: none;
+    background: none;
+    width: 100%;
+    text-align: left;
+    color: #111;
+    box-sizing: border-box;
+  }
+
+  .block-wrapper__menu-item:hover {
+    background: #f5f5f5;
+  }
+
+  .block-wrapper__menu-item--danger {
+    color: #f12323;
+  }
+
+  .block-wrapper__menu-divider {
+    height: 1px;
+    background: #e9e9e9;
+    flex-shrink: 0;
+  }
+</style>
+`;
+const blockIconSvg = `
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.36328 6.5459C4.96626 6.5459 5.4541 7.03374 5.4541 7.63672V10.9092C5.45405 11.5121 4.96623 12 4.36328 12H1.09082C0.96088 12 0.834934 11.9772 0.717773 11.9346C0.626296 11.9016 0.540642 11.8561 0.461914 11.8008C0.182984 11.6037 3.23667e-05 11.2776 0 10.9092V7.63672C0 7.03377 0.487878 6.54595 1.09082 6.5459H4.36328ZM10.9092 6.5459C11.5122 6.5459 12 7.03374 12 7.63672V10.9092C11.9999 11.5121 11.5121 12 10.9092 12H7.63672C7.50675 12 7.38086 11.9772 7.26367 11.9346C7.17215 11.9016 7.08658 11.8561 7.00781 11.8008C6.72883 11.6037 6.54593 11.2777 6.5459 10.9092V7.63672C6.5459 7.03374 7.03374 6.5459 7.63672 6.5459H10.9092ZM1.09082 7.63672V10.9092H4.36328V7.63672H1.09082ZM7.63672 10.9092H10.9092V7.63672H7.63672V10.9092ZM4.36328 0C4.96623 0 5.45405 0.487878 5.4541 1.09082V4.36328C5.4541 4.96626 4.96626 5.4541 4.36328 5.4541H1.09082C0.96088 5.45409 0.834934 5.43225 0.717773 5.38965C0.626233 5.35663 0.54069 5.31024 0.461914 5.25488C0.183079 5.05776 0 4.73167 0 4.36328V1.09082C4.77994e-05 0.487908 0.487908 4.79046e-05 1.09082 0H4.36328ZM10.9092 0C11.5121 0 12 0.487878 12 1.09082V4.36328C12 4.96626 11.5122 5.4541 10.9092 5.4541H7.63672C7.50675 5.4541 7.38086 5.43226 7.26367 5.38965C7.17208 5.35663 7.08662 5.31026 7.00781 5.25488C6.72893 5.05777 6.5459 4.73171 6.5459 4.36328V1.09082C6.54595 0.487878 7.03377 0 7.63672 0H10.9092ZM1.09082 4.36328H4.36328V1.09082H1.09082V4.36328ZM7.63672 4.36328H10.9092V1.09082H7.63672V4.36328Z" fill="currentColor"/>
+</svg>
+
+`;
+const moreIconSvg = `
+<svg width="13" height="3" viewBox="0 0 13 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 0C2.32843 2.0934e-07 3 0.671573 3 1.5C3 2.32843 2.32843 3 1.5 3C0.671573 3 3.62117e-08 2.32843 0 1.5C6.04266e-08 0.671573 0.671573 3.62117e-08 1.5 0ZM6.5 0C7.32843 2.0934e-07 8 0.671573 8 1.5C8 2.32843 7.32843 3 6.5 3C5.67157 3 5 2.32843 5 1.5C5 0.671573 5.67157 3.62117e-08 6.5 0ZM11.5 0C12.3284 2.0934e-07 13 0.671573 13 1.5C13 2.32843 12.3284 3 11.5 3C10.6716 3 10 2.32843 10 1.5C10 0.671573 10.6716 3.62117e-08 11.5 0Z" fill="currentColor"/>
+</svg>
+`;
+const trashIconSvg = `
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 4H12" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+<path d="M5 4V2.5C5 2.22386 5.22386 2 5.5 2H8.5C8.77614 2 9 2.22386 9 2.5V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+<path d="M10.5 4L10 11.5C10 11.7761 9.77614 12 9.5 12H4.5C4.22386 12 4 11.7761 4 11.5L3.5 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="7" y1="6.5" x2="7" y2="9.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+<line x1="5.5" y1="6.5" x2="5.5" y2="9.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+<line x1="8.5" y1="6.5" x2="8.5" y2="9.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
+`;
+class BlockWrapper extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "block", null);
+    __publicField(this, "editorBridge", createEditorBridge());
+    __publicField(this, "nameElement", null);
+    __publicField(this, "menuElement", null);
+    __publicField(this, "isMenuOpen", false);
+    __publicField(this, "closeMenuOnOutsideClick", null);
+    this.attachShadow({ mode: "open" });
+    this.setupStyles();
+    this.setupTemplate();
+  }
+  static get observedAttributes() {
+    return ["data-block-id"];
+  }
+  setupStyles() {
+    const styleElement = document.createElement("style");
+    styleElement.textContent = styles.replace(/<style>|<\/style>/g, "").trim();
+    this.shadowRoot.appendChild(styleElement);
+  }
+  setupTemplate() {
+    const wrapper = document.createElement("div");
+    wrapper.className = "block-wrapper";
+    const nameDiv = document.createElement("div");
+    nameDiv.className = "block-wrapper__name";
+    const iconContainer = document.createElement("div");
+    iconContainer.style.display = "flex";
+    iconContainer.className = "block-wrapper__icon";
+    iconContainer.innerHTML = blockIconSvg;
+    const nameSpan = document.createElement("span");
+    nameSpan.textContent = "";
+    const actionsDiv = document.createElement("div");
+    actionsDiv.className = "block-wrapper__actions";
+    const moreBtn = document.createElement("button");
+    moreBtn.type = "button";
+    moreBtn.innerHTML = moreIconSvg;
+    moreBtn.addEventListener("click", (e2) => {
+      e2.stopPropagation();
+      this.toggleMenu();
+    });
+    const menuEl = document.createElement("div");
+    menuEl.className = "block-wrapper__menu";
+    menuEl.setAttribute("role", "menu");
+    const divider = document.createElement("div");
+    divider.className = "block-wrapper__menu-divider";
+    divider.setAttribute("role", "separator");
+    const deleteSection = document.createElement("div");
+    deleteSection.className = "block-wrapper__menu-section";
+    const deleteBtn = document.createElement("button");
+    deleteBtn.type = "button";
+    deleteBtn.className = "block-wrapper__menu-item block-wrapper__menu-item--danger";
+    deleteBtn.setAttribute("role", "menuitem");
+    deleteBtn.innerHTML = `${trashIconSvg}<span>Delete</span>`;
+    deleteBtn.addEventListener("click", (e2) => {
+      e2.stopPropagation();
+      this.closeMenu();
+      this.handleRemoveBlock();
+    });
+    deleteSection.appendChild(deleteBtn);
+    menuEl.appendChild(deleteSection);
+    actionsDiv.appendChild(moreBtn);
+    nameDiv.appendChild(iconContainer);
+    nameDiv.appendChild(nameSpan);
+    nameDiv.appendChild(actionsDiv);
+    nameDiv.appendChild(menuEl);
+    wrapper.appendChild(nameDiv);
+    const slot = document.createElement("slot");
+    wrapper.appendChild(slot);
+    this.shadowRoot.appendChild(wrapper);
+    this.nameElement = nameSpan;
+    this.menuElement = menuEl;
+    this.editorBridge.onMessage((message) => {
+      var _a;
+      if (message.type === "SELECT_BLOCK") {
+        this.updateActiveState(message.payload.blockId === ((_a = this.block) == null ? void 0 : _a.id));
+      }
+    });
+  }
+  connectedCallback() {
+    const isInOverlay = this.closest('juo-extension-root[surface="overlay"]') !== null;
+    if (isInOverlay) {
+      const actions = this.shadowRoot.querySelector(
+        ".block-wrapper__actions"
+      );
+      if (actions) actions.style.visibility = "hidden";
+    }
+  }
+  disconnectedCallback() {
+    this.closeMenu();
+  }
+  toggleMenu() {
+    if (this.isMenuOpen) {
+      this.closeMenu();
+    } else {
+      this.openMenu();
+    }
+  }
+  openMenu() {
+    if (!this.menuElement) return;
+    this.menuElement.classList.add("open");
+    this.isMenuOpen = true;
+    this.closeMenuOnOutsideClick = (e2) => {
+      if (!this.shadowRoot.contains(e2.composedPath()[0])) {
+        this.closeMenu();
+      }
+    };
+    document.addEventListener("click", this.closeMenuOnOutsideClick);
+  }
+  closeMenu() {
+    if (!this.menuElement) return;
+    this.menuElement.classList.remove("open");
+    this.isMenuOpen = false;
+    if (this.closeMenuOnOutsideClick) {
+      document.removeEventListener("click", this.closeMenuOnOutsideClick);
+      this.closeMenuOnOutsideClick = null;
+    }
+  }
+  setBlock(block) {
+    this.block = block;
+    this.setAttribute("data-block-id", block.id);
+    if (this.nameElement) {
+      this.nameElement.textContent = block.definition.name;
+    }
+  }
+  updateActiveState(isActive) {
+    const wrapper = this.shadowRoot.querySelector(
+      ".block-wrapper"
+    );
+    if (!wrapper) return;
+    if (isActive) {
+      wrapper.classList.add("active");
+    } else {
+      wrapper.classList.remove("active");
+    }
+  }
+  /**
+   * Traverses up the DOM tree to find the parent element, crossing shadow root boundaries
+   */
+  getParentElement(element) {
+    const root = element.getRootNode();
+    if (root instanceof ShadowRoot) {
+      return root.host;
+    }
+    return element.parentElement;
+  }
+  handleRemoveBlock() {
+    if (!this.block) return;
+    const extensionRoot = this.closest("juo-extension-root");
+    const slotName = (extensionRoot == null ? void 0 : extensionRoot.getAttribute("name")) || "default";
+    let parentId = "root";
+    let current = this;
+    while (current) {
+      const parent = this.getParentElement(current);
+      if (!parent) {
+        break;
+      }
+      if (parent !== this && parent.tagName === "JUO-EDITOR-BLOCK-WRAPPER") {
+        const parentBlockId = parent.getAttribute("data-block-id");
+        if (parentBlockId) {
+          parentId = parentBlockId;
+          break;
+        }
+      }
+      current = parent;
+    }
+    const location = {
+      slot: slotName,
+      parentId
+    };
+    const message = createRemoveBlockMessage(
+      {
+        blockId: this.block.id,
+        location
+      },
+      this.block.id
+    );
+    this.editorBridge.sendMessage(message);
+  }
+}
+if (customElements.get("juo-editor-block-wrapper") == null) {
+  customElements.define("juo-editor-block-wrapper", BlockWrapper);
+}
+async function serializeBlock(block) {
+  let initialValue = block.initialValue;
+  if (typeof initialValue === "function") {
+    try {
+      initialValue = initialValue();
+    } catch {
+      initialValue = void 0;
+    }
+  }
+  let locales;
+  if (block.locales) {
+    const supported = block.locales.supported ?? ["en"];
+    const entries = await Promise.all(
+      supported.map(async (code) => {
+        try {
+          const localeFile = await block.locales.load(code);
+          const topLevel = Object.fromEntries(
+            Object.entries(localeFile).filter(
+              ([key, value]) => key !== "overrides" && typeof value === "string"
+            )
+          );
+          return [code, { ...topLevel, ...localeFile.overrides ?? {} }];
+        } catch {
+          return null;
+        }
+      })
+    );
+    const loaded = entries.filter((e2) => e2 !== null);
+    if (loaded.length > 0) {
+      locales = Object.fromEntries(loaded);
+    }
+  }
+  return {
+    name: block.name,
+    group: block.group,
+    schema: block.schema,
+    initialValue,
+    presets: block.presets,
+    locales
+  };
+}
+async function setupEditorMode(routes, themeState) {
+  const editor = createEditorBridge();
+  const handler = createEditorHandler({
+    themeState
+  });
+  const { unsubscribe } = editor.onMessage((message) => {
+    handler.handleMessage(message);
+  });
+  const blocks = await Promise.all(getDefinedBlocks().map(serializeBlock));
+  editor.sendMessage(createRegisterBlocksMessage({ blocks }));
+  editor.sendMessage(createRegisterRoutesMessage({ routes }));
+  onRegisterBlock((_, block) => {
+    void serializeBlock(block).then(
+      (serialized) => editor.sendMessage(
+        createRegisterBlocksMessage({
+          blocks: [serialized]
+        })
+      )
+    );
+  });
+  return () => {
+    unsubscribe();
+    editor.destroy();
+  };
+}
+export {
+  BlockWrapper,
+  p as createAddBlockMessage,
+  createEditorBridge,
+  createEditorHandler,
+  b as createFocusInlineTextMessage,
+  q as createMoveBlockMessage,
+  v as createProvideGlobalStylesMessage,
+  w as createProvideInitialGlobalStylesMessage,
+  k as createProvideThemeStateMessage,
+  n as createProvideTranslationOverridesMessage,
+  c as createRegisterBlockTranslationKeysMessage,
+  createRegisterBlocksMessage,
+  createRegisterRoutesMessage,
+  createRemoveBlockMessage,
+  y as createReportContentHeightMessage,
+  u as createRequestGlobalStylesMessage,
+  l as createRequestThemeStateMessage,
+  m as createRequestTranslationOverridesMessage,
+  x as createScrollSyncMessage,
+  e as createSelectBlockMessage,
+  r as createSetBlockPresetMessage,
+  t as createSetGlobalStylesMessage,
+  s as createSetLocaleMessage,
+  o as createUpdateBlockPropsMessage,
+  d as createUpdateBlockTranslationMessage,
+  z as getEditorBridge,
+  i as isEditorMessage,
+  j as isIframeMessage,
+  setupEditorMode
+};