@juo/orion-core 0.12.0 → 0.14.0

package/dist/{ExtensionRoot-BuoY5H2A.js → ExtensionRoot-BFk-vt2J.js}

@@ -4,9 +4,9 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { signal, effect, createBlockInstance, subscribeContext, untracked } from "@juo/orion-core";
-import { P as PageContext } from "./page-DFFhF7j8.js";
-import { j as withWrapper } from "./block-CFJIpH_9.js";
+import { signal, effect, createBlockInstance } from "@juo/orion-core";
+import { d, j as withWrapper, q as subscribeContext, T as ThemeStateContext, E, t as n } from "./theme-state-TW-9hD7e.js";
+import "./juo-workflow-CoWvwYTn.js";
 class Block extends HTMLElement {
   constructor() {
     super();
@@ -55,36 +55,58 @@ class Block extends HTMLElement {
 class ExtensionRoot extends HTMLElement {
   constructor() {
     super();
-    __publicField(this, "state", signal(null));
-    __publicField(this, "unsubscribeContext");
+    __publicField(this, "state", d(null));
+    __publicField(this, "themeState", null);
+    __publicField(this, "unsubscribeThemeContext");
     __publicField(this, "disposeEffect");
+    /**
+     * Optional function to wrap each rendered block element.
+     * Called with the rendered block HTMLElement, must return an HTMLElement.
+     * When set, the wrapper sits between the editor wrapper (outer) and the actual block (inner).
+     * Must be set before blocks are first rendered; changing it afterwards has no effect
+     * on already-cached block wrappers.
+     */
+    __publicField(this, "blockWrapper", null);
     __publicField(this, "wrapperCache", /* @__PURE__ */ new WeakMap());
   }
   static get observedAttributes() {
-    return ["name"];
+    return ["name", "surface"];
   }
   withWrapper(block) {
     if (!this.wrapperCache.has(block)) {
-      const wrapper = withWrapper((block2) => block2.definition.render(block2));
+      const blockWrapper = this.blockWrapper;
+      const wrapper = withWrapper((block2) => {
+        const rendered = block2.definition.render(block2);
+        return blockWrapper ? blockWrapper(rendered) : rendered;
+      });
       this.wrapperCache.set(block, wrapper);
     }
     return this.wrapperCache.get(block)(block);
   }
+  getSurface() {
+    return this.getAttribute("surface") === "overlay" ? "overlay" : "page";
+  }
+  setStateFromThemeState(themeState) {
+    const surface = this.getSurface();
+    this.state.value = surface === "overlay" ? themeState.overlay : themeState.page;
+  }
   connectedCallback() {
     this.state.value = null;
+    this.themeState = null;
     this.style.display = "flex";
     this.style.flexDirection = "column";
     this.style.gap = "16px";
     this.style.width = "fit-content";
     this.style.justifySelf = "center";
-    this.unsubscribeContext = subscribeContext(
+    this.unsubscribeThemeContext = subscribeContext(
       this,
-      PageContext,
+      ThemeStateContext,
       (contextValue) => {
-        this.state.value = contextValue;
+        this.themeState = contextValue;
+        this.setStateFromThemeState(contextValue);
       }
     );
-    this.disposeEffect = effect(() => {
+    this.disposeEffect = E(() => {
       const state = this.state.value;
       if (state == null) {
         this.replaceChildren();
@@ -97,7 +119,7 @@ class ExtensionRoot extends HTMLElement {
         return;
       }
       const blocks = state.blocks.value;
-      untracked(() => {
+      n(() => {
         var _a;
         try {
           const extensionBlocks = (((_a = blocks.at(0)) == null ? void 0 : _a.slots) ?? {})[name] ?? [];
@@ -113,14 +135,20 @@ class ExtensionRoot extends HTMLElement {
     });
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "name" && oldValue !== newValue && this.state.value) {
+    if ((name === "name" || name === "surface") && oldValue !== newValue && this.state.value) {
+      if (name === "surface") {
+        if (this.themeState) {
+          this.setStateFromThemeState(this.themeState);
+          return;
+        }
+      }
       this.state.value = { ...this.state.value };
     }
   }
   disconnectedCallback() {
-    if (this.unsubscribeContext) {
-      this.unsubscribeContext();
-      this.unsubscribeContext = void 0;
+    if (this.unsubscribeThemeContext) {
+      this.unsubscribeThemeContext();
+      this.unsubscribeThemeContext = void 0;
     }
     if (this.disposeEffect) {
       this.disposeEffect();

package/dist/block.d.ts

@@ -11,13 +11,20 @@ export interface BlockPreset<TState = unknown, TContext extends Record<string, u
 }
 export type BlockPresets = Record<string, BlockPreset<unknown, Record<string, unknown>>>;
 export type BlockRenderer = (block: BlockInstance) => HTMLElement;
+export type BlockLocaleFile = {
+    overrides?: Record<string, string>;
+    [key: string]: string | Record<string, string> | undefined;
+};
 export type BlockDefinition<T = unknown> = {
     name: string;
-    group: "internal" | "juo" | "theme" | "integration" | "page";
+    group: "internal" | "juo" | "theme" | "integration" | "page" | "workflow" | "action";
     schema: Schema;
     initialValue: T | (() => T);
     render: BlockRenderer;
     presets?: BlockPresets;
+    locales?: {
+        load: (locale: string) => Promise<BlockLocaleFile>;
+    };
 };
 export type Block = {
     id: string;
@@ -28,6 +35,7 @@ export type Block = {
 export type BlockInstance = Block & {
     readonly definition: BlockDefinition;
 };
+export declare function serializeBlocks(blocks: (Block | BlockInstance)[]): Block[];
 export declare function createSelectedBlock(): {
     selected: import('@preact/signals-core').Signal<BlockInstance | null>;
     setSelection: (block: BlockInstance) => void;
@@ -57,15 +65,19 @@ declare global {
 }
 export declare function withWrapper(fn: (block: BlockInstance) => HTMLElement): (block: BlockInstance) => HTMLElement;
 export declare function registerBlock<T>(block: BlockDefinition<T>): void;
+export declare function onRegisterBlock(cb: (name: string, block: BlockDefinition) => void): void;
 export declare function defineBlock<T>(name: string, opts: {
-    group: "internal" | "juo" | "theme" | "integration" | "page";
+    group: "internal" | "juo" | "theme" | "integration" | "page" | "workflow" | "action";
     schema: JSONSchema;
     initialValue: T | (() => T);
     renderer: (block: BlockInstance) => HTMLElement;
     presets?: BlockPresets;
+    locales?: {
+        load: (locale: string) => Promise<BlockLocaleFile>;
+    };
 }): BlockDefinition<T>;
 export declare function defineBlockRuntime<T = never>(name: string, opts: {
-    group: "internal" | "juo" | "theme" | "integration" | "page";
+    group: "internal" | "juo" | "theme" | "integration" | "page" | "workflow" | "action";
     renderer: (block: BlockInstance) => HTMLElement;
 }): BlockDefinition<T>;
 export declare function getDefinedBlocks(): BlockDefinition[];

package/dist/bridge-fHXg0b-e.js

@@ -0,0 +1,421 @@
+function isEditorMessage(message) {
+  return message.type === "PROVIDE_THEME_STATE" || message.type === "PROVIDE_TRANSLATION_OVERRIDES" || message.type === "SELECT_BLOCK" || message.type === "UPDATE_BLOCK_PROPS" || message.type === "ADD_BLOCK" || message.type === "REMOVE_BLOCK" || message.type === "MOVE_BLOCK" || message.type === "SET_BLOCK_PRESET" || message.type === "SET_LOCALE" || message.type === "SET_GLOBAL_STYLES" || message.type === "PROVIDE_GLOBAL_STYLES";
+}
+function isIframeMessage(message) {
+  return message.type === "SELECT_BLOCK" || message.type === "IFRAME_READY" || message.type === "REGISTER_BLOCKS" || message.type === "REGISTER_ROUTES" || message.type === "REMOVE_BLOCK" || message.type === "UPDATE_BLOCK_PROPS" || message.type === "REQUEST_THEME_STATE" || message.type === "REQUEST_TRANSLATION_OVERRIDES" || message.type === "UPDATE_BLOCK_TRANSLATION" || message.type === "FOCUS_INLINE_TEXT" || message.type === "REQUEST_GLOBAL_STYLES";
+}
+function createProvideThemeStateMessage(payload) {
+  return {
+    type: "PROVIDE_THEME_STATE",
+    payload,
+    timestamp: Date.now()
+  };
+}
+function createRequestThemeStateMessage(payload) {
+  return {
+    type: "REQUEST_THEME_STATE",
+    payload,
+    timestamp: Date.now()
+  };
+}
+function createRequestTranslationOverridesMessage(payload) {
+  return {
+    type: "REQUEST_TRANSLATION_OVERRIDES",
+    payload,
+    timestamp: Date.now()
+  };
+}
+function createProvideTranslationOverridesMessage(payload) {
+  return {
+    type: "PROVIDE_TRANSLATION_OVERRIDES",
+    payload,
+    timestamp: Date.now()
+  };
+}
+function createSelectBlockMessage(payload, blockId) {
+  return {
+    type: "SELECT_BLOCK",
+    payload,
+    blockId,
+    timestamp: Date.now()
+  };
+}
+function createUpdateBlockPropsMessage(payload, blockId) {
+  return {
+    type: "UPDATE_BLOCK_PROPS",
+    payload,
+    blockId,
+    timestamp: Date.now()
+  };
+}
+function createUpdateBlockTranslationMessage(payload, blockId) {
+  return {
+    type: "UPDATE_BLOCK_TRANSLATION",
+    payload,
+    blockId,
+    timestamp: Date.now()
+  };
+}
+function createAddBlockMessage(payload, blockId) {
+  return {
+    type: "ADD_BLOCK",
+    payload,
+    blockId,
+    timestamp: Date.now()
+  };
+}
+function createRemoveBlockMessage(payload, blockId) {
+  return {
+    type: "REMOVE_BLOCK",
+    payload,
+    blockId,
+    timestamp: Date.now()
+  };
+}
+function createMoveBlockMessage(payload, blockId) {
+  return {
+    type: "MOVE_BLOCK",
+    payload,
+    blockId,
+    timestamp: Date.now()
+  };
+}
+function createRegisterBlocksMessage(payload) {
+  const serializedBlocks = payload.blocks.map((block) => ({
+    name: block.name,
+    group: block.group,
+    schema: block.schema == null ? block.schema : JSON.parse(JSON.stringify(block.schema)),
+    initialValue: block.initialValue == null ? block.initialValue : JSON.parse(JSON.stringify(block.initialValue)),
+    presets: block.presets == null ? block.presets : JSON.parse(JSON.stringify(block.presets))
+  }));
+  return {
+    type: "REGISTER_BLOCKS",
+    payload: {
+      blocks: serializedBlocks
+    },
+    timestamp: Date.now()
+  };
+}
+function createSetBlockPresetMessage(payload) {
+  return {
+    type: "SET_BLOCK_PRESET",
+    payload,
+    timestamp: Date.now()
+  };
+}
+function createSetLocaleMessage(payload) {
+  return {
+    type: "SET_LOCALE",
+    payload,
+    timestamp: Date.now()
+  };
+}
+function createFocusInlineTextMessage(payload, blockId) {
+  return {
+    type: "FOCUS_INLINE_TEXT",
+    payload,
+    blockId,
+    timestamp: Date.now()
+  };
+}
+function createRegisterRoutesMessage(payload) {
+  return {
+    type: "REGISTER_ROUTES",
+    payload,
+    timestamp: Date.now()
+  };
+}
+function createSetGlobalStylesMessage(payload) {
+  return {
+    type: "SET_GLOBAL_STYLES",
+    payload,
+    timestamp: Date.now()
+  };
+}
+function createRequestGlobalStylesMessage(payload) {
+  return {
+    type: "REQUEST_GLOBAL_STYLES",
+    payload,
+    timestamp: Date.now()
+  };
+}
+function createProvideGlobalStylesMessage(payload) {
+  return {
+    type: "PROVIDE_GLOBAL_STYLES",
+    payload,
+    timestamp: Date.now()
+  };
+}
+let bridgeInstance = null;
+function getEditorBridge() {
+  return bridgeInstance;
+}
+function createEditorBridge() {
+  if (bridgeInstance !== null) {
+    return bridgeInstance;
+  }
+  const messageHandlers = [];
+  const selectedBlockId = { value: null };
+  const pendingRequests = /* @__PURE__ */ new Map();
+  const pendingTranslationRequests = /* @__PURE__ */ new Map();
+  const pendingGlobalStylesRequests = /* @__PURE__ */ new Map();
+  let parentOrigin = "*";
+  const frame = window.parent || window;
+  if (window.parent !== window) {
+    try {
+      parentOrigin = window.parent.location.origin;
+    } catch {
+      parentOrigin = "*";
+    }
+  }
+  function sendMessage(message) {
+    frame.postMessage(message, parentOrigin);
+  }
+  function onMessage(handler) {
+    messageHandlers.push(handler);
+    return {
+      unsubscribe: () => {
+        const index = messageHandlers.indexOf(handler);
+        if (index !== -1) {
+          messageHandlers.splice(index, 1);
+        }
+      }
+    };
+  }
+  function updateBlockSelection(blockId) {
+    selectedBlockId.value = blockId;
+  }
+  function handleGlobalClick(event) {
+    const path = event.composedPath();
+    if (!path.some(
+      (node) => node instanceof HTMLElement && node.tagName !== "HTML"
+    )) {
+      return;
+    }
+    const isOverlay = path.some((node) => {
+      if (!(node instanceof HTMLElement))
+        return false;
+      let current = node;
+      while (current) {
+        const computedStyle = window.getComputedStyle(current);
+        const zIndex = parseInt(computedStyle.zIndex, 10);
+        if (!isNaN(zIndex) && zIndex >= 50 || ["listbox", "menu", "dialog"].includes(
+          current.getAttribute("role") || ""
+        )) {
+          return true;
+        }
+        current = current.parentElement;
+      }
+      return false;
+    });
+    const isEditorUI = path.some((node) => {
+      if (!(node instanceof HTMLElement))
+        return false;
+      let current = node;
+      const root = node.getRootNode();
+      while (current && current !== root) {
+        const classList = current.classList;
+        if (classList.contains("block-wrapper__name") || classList.contains("block-wrapper__actions") || classList.contains("block-wrapper__icon") || classList.contains("block-wrapper__remove-icon") || current.hasAttribute("data-block-editor")) {
+          return true;
+        }
+        current = current.parentElement;
+      }
+      return false;
+    });
+    let blockWrapper = null;
+    for (const node of path) {
+      if (node instanceof HTMLElement && node.tagName === "JUO-EDITOR-BLOCK-WRAPPER") {
+        blockWrapper = node;
+        break;
+      }
+    }
+    if (isOverlay && !blockWrapper) {
+      return;
+    }
+    if (!blockWrapper && isEditorUI) {
+      return;
+    }
+    const clickedBlockId = (blockWrapper == null ? void 0 : blockWrapper.getAttribute("data-block-id")) || null;
+    if (clickedBlockId && clickedBlockId === selectedBlockId.value) {
+      return;
+    }
+    const newBlockId = clickedBlockId || null;
+    if (newBlockId !== selectedBlockId.value) {
+      const message = createSelectBlockMessage(
+        { blockId: newBlockId },
+        newBlockId || void 0
+      );
+      updateBlockSelection(newBlockId);
+      messageHandlers.forEach((handler) => handler(message));
+      sendMessage(message);
+    }
+  }
+  document.addEventListener("click", handleGlobalClick, true);
+  function requestThemeState(surface, id, defaultBlock) {
+    const requestId = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        pendingRequests.delete(requestId);
+        reject(
+          new Error(`REQUEST_THEME_STATE timed out for (${surface}, ${id})`)
+        );
+      }, 5e3);
+      pendingRequests.set(requestId, { resolve, timer });
+      sendMessage(
+        createRequestThemeStateMessage({
+          requestId,
+          surface,
+          id,
+          defaultBlock
+        })
+      );
+    });
+  }
+  function requestTranslationOverrides(locale) {
+    const requestId = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        pendingTranslationRequests.delete(requestId);
+        reject(
+          new Error(
+            `REQUEST_TRANSLATION_OVERRIDES timed out for locale ${locale}`
+          )
+        );
+      }, 5e3);
+      pendingTranslationRequests.set(requestId, { resolve, timer });
+      sendMessage(
+        createRequestTranslationOverridesMessage({
+          requestId,
+          locale
+        })
+      );
+    });
+  }
+  function requestGlobalStyles() {
+    const requestId = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        pendingGlobalStylesRequests.delete(requestId);
+        reject(new Error("REQUEST_GLOBAL_STYLES timed out"));
+      }, 5e3);
+      pendingGlobalStylesRequests.set(requestId, { resolve, timer });
+      sendMessage(createRequestGlobalStylesMessage({ requestId }));
+    });
+  }
+  function handleWindowMessage(event) {
+    if (parentOrigin !== "*" && event.origin !== parentOrigin) {
+      return;
+    }
+    const { data } = event;
+    if (isEditorMessage(data)) {
+      if (data.type === "PROVIDE_THEME_STATE" && data.payload.requestId) {
+        const pending = pendingRequests.get(data.payload.requestId);
+        if (pending) {
+          clearTimeout(pending.timer);
+          pendingRequests.delete(data.payload.requestId);
+          pending.resolve({ blocks: data.payload.blocks });
+        }
+      } else if (data.type === "PROVIDE_TRANSLATION_OVERRIDES" && data.payload.requestId) {
+        const pending = pendingTranslationRequests.get(data.payload.requestId);
+        if (pending) {
+          clearTimeout(pending.timer);
+          pendingTranslationRequests.delete(data.payload.requestId);
+          pending.resolve(data.payload.overrides);
+        }
+      } else if (data.type === "PROVIDE_GLOBAL_STYLES" && data.payload.requestId) {
+        const pending = pendingGlobalStylesRequests.get(data.payload.requestId);
+        if (pending) {
+          clearTimeout(pending.timer);
+          pendingGlobalStylesRequests.delete(data.payload.requestId);
+          pending.resolve(data.payload.styles);
+        }
+      } else if (data.type === "SELECT_BLOCK") {
+        updateBlockSelection(data.payload.blockId);
+      }
+      messageHandlers.forEach((handler) => handler(data));
+    }
+  }
+  window.addEventListener("message", handleWindowMessage);
+  if (document.readyState === "complete") {
+    sendMessage({
+      type: "IFRAME_READY",
+      payload: {},
+      timestamp: Date.now()
+    });
+  } else {
+    window.addEventListener("load", () => {
+      sendMessage({
+        type: "IFRAME_READY",
+        payload: {},
+        timestamp: Date.now()
+      });
+    });
+  }
+  const isEditorMode = window.parent !== window;
+  function onBlockPresetChange(blockId, callback) {
+    return onMessage((message) => {
+      if (message.type !== "SET_BLOCK_PRESET")
+        return;
+      const presetMessage = message;
+      if (presetMessage.payload.blockId !== blockId)
+        return;
+      const preset = presetMessage.payload.preset;
+      callback(
+        preset
+      );
+    });
+  }
+  function destroy() {
+    window.removeEventListener("message", handleWindowMessage);
+    document.removeEventListener("click", handleGlobalClick, true);
+    for (const [, { timer }] of pendingRequests) {
+      clearTimeout(timer);
+    }
+    pendingRequests.clear();
+    for (const [, { timer }] of pendingTranslationRequests) {
+      clearTimeout(timer);
+    }
+    pendingTranslationRequests.clear();
+    for (const [, { timer }] of pendingGlobalStylesRequests) {
+      clearTimeout(timer);
+    }
+    pendingGlobalStylesRequests.clear();
+    messageHandlers.length = 0;
+    bridgeInstance = null;
+  }
+  bridgeInstance = {
+    isEditorMode,
+    sendMessage,
+    onMessage,
+    onBlockPresetChange,
+    requestThemeState,
+    requestTranslationOverrides,
+    requestGlobalStyles,
+    destroy
+  };
+  return bridgeInstance;
+}
+export {
+  createFocusInlineTextMessage as a,
+  createUpdateBlockTranslationMessage as b,
+  createEditorBridge as c,
+  createRemoveBlockMessage as d,
+  createRegisterBlocksMessage as e,
+  createRegisterRoutesMessage as f,
+  isIframeMessage as g,
+  createProvideThemeStateMessage as h,
+  isEditorMessage as i,
+  createRequestThemeStateMessage as j,
+  createRequestTranslationOverridesMessage as k,
+  createProvideTranslationOverridesMessage as l,
+  createSelectBlockMessage as m,
+  createUpdateBlockPropsMessage as n,
+  createAddBlockMessage as o,
+  createMoveBlockMessage as p,
+  createSetBlockPresetMessage as q,
+  createSetLocaleMessage as r,
+  createSetGlobalStylesMessage as s,
+  createRequestGlobalStylesMessage as t,
+  createProvideGlobalStylesMessage as u,
+  getEditorBridge as v
+};