@juo/orion-core 0.12.0 → 0.14.0

package/dist/editor.js

@@ -4,23 +4,97 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { c as createEditorBridge, b as createRemoveBlockMessage, d as createRegisterBlocksMessage, e as createRegisterRoutesMessage } from "./bridge-BPfBHSPI.js";
-import { j, k, h, l, g, a, i, f } from "./bridge-BPfBHSPI.js";
-import { e as createBlockInstanceFromObject } from "./block-CFJIpH_9.js";
+import { getDefinedBlocks } from "@juo/orion-core";
+import { c as createEditorBridge, d as createRemoveBlockMessage, e as createRegisterBlocksMessage, f as createRegisterRoutesMessage } from "./bridge-fHXg0b-e.js";
+import { o, a, p, u, h, l, t, j, k, m, q, s, r, n, b, v, i, g } from "./bridge-fHXg0b-e.js";
+import { e as createBlockInstanceFromObject, m as indexOverrides, x as onRegisterBlock } from "./theme-state-TW-9hD7e.js";
 function createEditorHandler(options) {
-  const { page, onBlockSelection } = 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;
-    if (message.type === "SYNC_PAGE_STATE") {
-      const blocks = message.payload.blocks.map(
+    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)
-      ) || [];
-      page.blocks.value = blocks;
+      )) || [];
+      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) {
@@ -41,13 +115,18 @@ function createEditorHandler(options) {
         }
         return false;
       };
+      const surface = resolveSurfaceForMessage(message);
+      const target = getBlocks(surface);
       findAndUpdateBlock(
-        page.blocks.value,
+        target.value,
         message.payload.blockId,
         message.payload.props
       );
-      page.blocks.value = [...page.blocks.value];
+      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") {
@@ -81,7 +160,7 @@ function createEditorHandler(options) {
           return false;
         };
         findAndInsertBlock(
-          page.blocks.value,
+          target.value,
           location.targetId,
           newBlock,
           location.type
@@ -115,13 +194,14 @@ function createEditorHandler(options) {
           return false;
         };
         findAndAppendBlock(
-          page.blocks.value,
+          target.value,
           location.parentId,
           location.slot,
           newBlock
         );
       }
-      page.blocks.value = [...page.blocks.value];
+      target.value = [...target.value];
+      indexSurface(surface, target.value);
     } else if (message.type === "REMOVE_BLOCK") {
       let findAndRemoveBlock = function(blocks, blockId, slot, parentId) {
         var _a2;
@@ -130,7 +210,7 @@ function createEditorHandler(options) {
             const slotBlocks = blocks[i2].slots[slot];
             const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
             const index = slotArray.findIndex(
-              (b) => typeof b !== "string" && (b == null ? void 0 : b.id) === blockId
+              (b2) => typeof b2 !== "string" && (b2 == null ? void 0 : b2.id) === blockId
             );
             if (index !== -1) {
               slotArray.splice(index, 1);
@@ -152,17 +232,20 @@ function createEditorHandler(options) {
         }
         return false;
       };
+      const surface = resolveSurfaceForMessage(message);
+      const target = getBlocks(surface);
       let resolvedParentId = message.payload.location.parentId;
       if (resolvedParentId === "root") {
-        resolvedParentId = ((_a = page.blocks.value[0]) == null ? void 0 : _a.id) ?? "root";
+        resolvedParentId = ((_b = target.value[0]) == null ? void 0 : _b.id) ?? "root";
       }
       findAndRemoveBlock(
-        page.blocks.value,
+        target.value,
         message.payload.blockId,
         message.payload.location.slot,
         resolvedParentId
       );
-      page.blocks.value = [...page.blocks.value];
+      target.value = [...target.value];
+      indexSurface(surface, target.value);
     } else if (message.type === "MOVE_BLOCK") {
       let findAndMoveBlock = function(blocks, blockId, slot, parentId, newIndex) {
         var _a2;
@@ -171,7 +254,7 @@ function createEditorHandler(options) {
             const slotBlocks = block.slots[slot];
             const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
             const oldIndex = slotArray.findIndex(
-              (b) => typeof b !== "string" && (b == null ? void 0 : b.id) === blockId
+              (b2) => typeof b2 !== "string" && (b2 == null ? void 0 : b2.id) === blockId
             );
             if (oldIndex !== -1) {
               const [moved] = slotArray.splice(oldIndex, 1);
@@ -194,16 +277,21 @@ function createEditorHandler(options) {
         }
         return false;
       };
+      const surface = resolveSurfaceForMessage(message);
+      const target = getBlocks(surface);
       findAndMoveBlock(
-        page.blocks.value,
+        target.value,
         message.payload.blockId,
         message.payload.location.slot,
         message.payload.location.parentId,
         message.payload.location.index
       );
-      page.blocks.value = [...page.blocks.value];
+      target.value = [...target.value];
+      indexSurface(surface, target.value);
     }
   }
+  indexSurface("page", themeState.page.blocks.value);
+  indexSurface("overlay", themeState.overlay.blocks.value);
   return {
     handleMessage
   };
@@ -211,6 +299,7 @@ function createEditorHandler(options) {
 const styles = `
 <style>
   .block-wrapper {
+    position: relative;
     padding: 12px;
     background-color: white;
     border: 1px solid #B5B5B5;
@@ -225,6 +314,7 @@ const styles = `
   }
 
   .block-wrapper__name {
+    position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -259,10 +349,66 @@ const styles = `
     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__remove-icon {
-    width: 10px;
-    height: 3px;
+  .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>
 `;
@@ -272,11 +418,20 @@ const blockIconSvg = `
 </svg>
 
 `;
-const removeIconSvg = `
+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() {
@@ -284,6 +439,9 @@ class BlockWrapper extends HTMLElement {
     __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();
@@ -309,22 +467,44 @@ class BlockWrapper extends HTMLElement {
     nameSpan.textContent = "";
     const actionsDiv = document.createElement("div");
     actionsDiv.className = "block-wrapper__actions";
-    const removeBtn = document.createElement("button");
-    removeBtn.type = "button";
-    removeBtn.innerHTML = removeIconSvg;
-    removeBtn.addEventListener("click", (e) => {
+    const moreBtn = document.createElement("button");
+    moreBtn.type = "button";
+    moreBtn.innerHTML = moreIconSvg;
+    moreBtn.addEventListener("click", (e) => {
+      e.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", (e) => {
       e.stopPropagation();
+      this.closeMenu();
       this.handleRemoveBlock();
     });
-    actionsDiv.appendChild(removeBtn);
+    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") {
@@ -333,8 +513,46 @@ class BlockWrapper extends HTMLElement {
     });
   }
   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 = (e) => {
+      if (!this.shadowRoot.contains(e.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;
@@ -403,48 +621,70 @@ class BlockWrapper extends HTMLElement {
 if (customElements.get("juo-editor-block-wrapper") == null) {
   customElements.define("juo-editor-block-wrapper", BlockWrapper);
 }
-async function setupEditorMode(page, blocks, routes) {
+function serializeBlock(block) {
+  let initialValue = block.initialValue;
+  if (typeof initialValue === "function") {
+    try {
+      initialValue = initialValue();
+    } catch {
+      initialValue = void 0;
+    }
+  }
+  return {
+    name: block.name,
+    group: block.group,
+    schema: block.schema,
+    initialValue,
+    presets: block.presets
+  };
+}
+async function setupEditorMode(routes, themeState) {
   const editor = createEditorBridge();
   const handler = createEditorHandler({
-    page
+    themeState
   });
-  editor.onMessage((message) => {
+  const { unsubscribe } = editor.onMessage((message) => {
     handler.handleMessage(message);
   });
-  const blocksArray = Object.values(blocks).map((block) => {
-    let initialValue = block.initialValue;
-    if (typeof initialValue === "function") {
-      try {
-        initialValue = initialValue();
-      } catch {
-        initialValue = void 0;
-      }
-    }
-    return {
-      name: block.name,
-      group: block.group,
-      schema: block.schema,
-      initialValue,
-      presets: block.presets
-    };
-  });
-  editor.sendMessage(createRegisterBlocksMessage({ blocks: blocksArray }));
+  const blocks = getDefinedBlocks().map(serializeBlock);
+  editor.sendMessage(createRegisterBlocksMessage({ blocks }));
   editor.sendMessage(createRegisterRoutesMessage({ routes }));
+  onRegisterBlock(
+    (_, block) => editor.sendMessage(
+      createRegisterBlocksMessage({
+        blocks: [serializeBlock(block)]
+      })
+    )
+  );
+  return () => {
+    unsubscribe();
+    editor.destroy();
+  };
 }
 export {
   BlockWrapper,
-  j as createAddBlockMessage,
+  o as createAddBlockMessage,
   createEditorBridge,
   createEditorHandler,
-  k as createMoveBlockMessage,
+  a as createFocusInlineTextMessage,
+  p as createMoveBlockMessage,
+  u as createProvideGlobalStylesMessage,
+  h as createProvideThemeStateMessage,
+  l as createProvideTranslationOverridesMessage,
   createRegisterBlocksMessage,
   createRegisterRoutesMessage,
   createRemoveBlockMessage,
-  h as createSelectBlockMessage,
-  l as createSetBlockPresetMessage,
-  g as createSyncPageStateMessage,
-  a as createUpdateBlockPropsMessage,
+  t as createRequestGlobalStylesMessage,
+  j as createRequestThemeStateMessage,
+  k as createRequestTranslationOverridesMessage,
+  m as createSelectBlockMessage,
+  q as createSetBlockPresetMessage,
+  s as createSetGlobalStylesMessage,
+  r as createSetLocaleMessage,
+  n as createUpdateBlockPropsMessage,
+  b as createUpdateBlockTranslationMessage,
+  v as getEditorBridge,
   i as isEditorMessage,
-  f as isIframeMessage,
+  g as isIframeMessage,
   setupEditorMode
 };

package/dist/flows/MockWorkflowApiAdapter.d.ts

@@ -0,0 +1,12 @@
+import { WorkflowApiAdapter } from './WorkflowService';
+/**
+ * Creates a mock WorkflowApiAdapter that simulates the full workflow lifecycle.
+ *
+ * - `start()` begins a flow using predefined step sequences
+ * - `respond()` advances to the next step or completes the flow
+ * - `cancel()` cancels the flow
+ * - `getState()` returns the current state
+ *
+ * Useful for development/testing when Stream 4 (backend) is not yet implemented.
+ */
+export declare function createMockWorkflowApiAdapter(): WorkflowApiAdapter;