@juo/orion-core 0.9.0 → 0.10.0

package/dist/{page-eBHITwro.js → block-CUUJl9_y.js}

@@ -542,15 +542,35 @@ class BlockWrapperEvent extends Event {
     this.callback = callback;
   }
 }
+function isInEditorIframe() {
+  if (typeof window === "undefined")
+    return false;
+  const params = new URLSearchParams(window.location.search);
+  return params.get("editor") === "true";
+}
 function withWrapper(fn) {
+  let wrapper = null;
   return (block) => {
+    var _a;
     let rendered = fn(block);
-    const evt = new BlockWrapperEvent(block, (wrapper) => {
-      wrapper.replaceChildren(fn(block));
-      rendered = wrapper;
-    });
-    document.dispatchEvent(evt);
-    return rendered;
+    if (wrapper === null) {
+      if (isInEditorIframe()) {
+        wrapper = document.createElement("juo-editor-block-wrapper");
+        wrapper.setAttribute("data-block-id", block.id);
+        (_a = wrapper.setBlock) == null ? void 0 : _a.call(wrapper, block);
+        wrapper.appendChild(rendered);
+      } else {
+        const evt = new BlockWrapperEvent(block, (evtWrapper) => {
+          wrapper = evtWrapper;
+        });
+        document.dispatchEvent(evt);
+      }
+    }
+    if (!wrapper) {
+      return rendered;
+    }
+    wrapper.replaceChildren(rendered);
+    return wrapper;
   };
 }
 function registerBlock(block) {
@@ -681,18 +701,10 @@ function createBlockInstanceFromObject(input) {
 function createBlockInstanceFromJSON(input) {
   return createBlockInstanceFromObject(JSON.parse(input));
 }
-function createPage() {
-  const blocks = d([]);
-  return {
-    blocks
-  };
-}
-const PageContext = createContext("page");
 export {
   BlockWrapperEvent as B,
   ContextRequestEvent as C,
   E,
-  PageContext as P,
   SelectedBlockContext as S,
   createBlockInstance as a,
   createBlockInstanceFromJSON as b,
@@ -705,9 +717,9 @@ export {
   getDefinedBlocks as i,
   withWrapper as j,
   createSelectedBlock as k,
-  createPage as l,
-  ContextProvideEvent as m,
-  injectContext as n,
+  ContextProvideEvent as l,
+  injectContext as m,
+  n,
   ContextRoot as o,
   provideContext as p,
   registerBlock as r,

package/dist/core.js

@@ -4,8 +4,9 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { c as createContext, d, w, E, u } from "./page-eBHITwro.js";
-import { B, m, C, P, S, a, b, e, f, l, k, g, h, i, n, p, r, s, j } from "./page-eBHITwro.js";
+import { c as createContext, d, w, E, u } from "./block-CUUJl9_y.js";
+import { B, l, C, S, a, b, e, f, k, g, h, i, m, p, r, s, n, j } from "./block-CUUJl9_y.js";
+import { P, c } from "./page-DuW859eK.js";
 function createState() {
   const discountCode = d(null);
   const products = d([]);
@@ -87,7 +88,7 @@ const PARAMS = {
 function uuid() {
   return ("10000000-1000-4000-8000" + -1e11).replace(
     /[018]/g,
-    (c) => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+    (c2) => (c2 ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c2 / 4).toString(16)
   );
 }
 var define_import_meta_env_default = {};
@@ -834,7 +835,7 @@ export {
   AuthenticationError,
   AuthenticationErrorReason,
   B as BlockWrapperEvent,
-  m as ContextProvideEvent,
+  l as ContextProvideEvent,
   C as ContextRequestEvent,
   LoginServiceContext,
   P as PageContext,
@@ -851,7 +852,7 @@ export {
   createContext,
   createMockProductAdapter,
   createMockSubscriptionAdapter,
-  l as createPage,
+  c as createPage,
   createProductService,
   k as createSelectedBlock,
   createState,
@@ -860,11 +861,12 @@ export {
   h as defineBlockRuntime,
   E as effect,
   i as getDefinedBlocks,
-  n as injectContext,
+  m as injectContext,
   loginService,
   p as provideContext,
   r as registerBlock,
   d as signal,
   s as subscribeContext,
+  n as untracked,
   j as withWrapper
 };

package/dist/editor/bridge.d.ts

@@ -0,0 +1,6 @@
+import { EditorMessage, IframeMessage } from './messages';
+export interface EditorBridge {
+    sendMessage: (message: IframeMessage) => void;
+    onMessage: (handler: (message: EditorMessage) => void) => void;
+}
+export declare function createEditorBridge(): EditorBridge;

package/dist/editor/components.d.ts

@@ -0,0 +1,23 @@
+import { BlockInstance } from '../block';
+export declare class BlockWrapper extends HTMLElement {
+    private block;
+    private editorBridge;
+    private nameElement;
+    static get observedAttributes(): string[];
+    constructor();
+    private setupStyles;
+    private setupTemplate;
+    connectedCallback(): void;
+    setBlock(block: BlockInstance): void;
+    private updateActiveState;
+    /**
+     * Traverses up the DOM tree to find the parent element, crossing shadow root boundaries
+     */
+    private getParentElement;
+    private handleRemoveBlock;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "juo-editor-block-wrapper": BlockWrapper;
+    }
+}

package/dist/editor/handler.d.ts

@@ -0,0 +1,10 @@
+import { EditorMessage } from './messages';
+import { PageContext } from '../page';
+import { ContextType } from '../context';
+export interface EditorHandlerOptions {
+    page: ContextType<typeof PageContext>;
+    onBlockSelection?: (blockId: string | null) => void;
+}
+export declare function createEditorHandler(options: EditorHandlerOptions): {
+    handleMessage: (message: EditorMessage) => void;
+};

package/dist/editor/main.d.ts

@@ -0,0 +1,13 @@
+import { ContextType, PageContext, BlockDefinition } from '../main.ts';
+export * from './messages';
+export * from './bridge';
+export * from './handler';
+export * from './components';
+/**
+ * Sets up editor mode integration for the theme.
+ * Should be called when a page context is available and editor mode is detected.
+ */
+export declare function setupEditorMode(page: ContextType<typeof PageContext>, blocks: Record<string, BlockDefinition>, routes: Record<string, {
+    name: string;
+    pageComponent: string;
+}>): Promise<void>;

package/dist/editor/messages.d.ts

@@ -0,0 +1,102 @@
+import { Block } from '../block';
+export type MessageType = "SYNC_PAGE_STATE" | "SELECT_BLOCK" | "UPDATE_BLOCK_PROPS" | "ADD_BLOCK" | "REMOVE_BLOCK" | "MOVE_BLOCK" | "IFRAME_READY" | "REGISTER_BLOCKS" | "REGISTER_ROUTES";
+export interface BaseMessage {
+    type: MessageType;
+    timestamp: number;
+}
+export interface SyncPageStateMessage extends BaseMessage {
+    type: "SYNC_PAGE_STATE";
+    payload: {
+        blocks: Block[];
+    };
+}
+export interface SelectBlockMessage extends BaseMessage {
+    type: "SELECT_BLOCK";
+    payload: {
+        blockId: string | null;
+    };
+    blockId?: string;
+}
+export interface UpdateBlockPropsMessage extends BaseMessage {
+    type: "UPDATE_BLOCK_PROPS";
+    payload: {
+        blockId: string;
+        props: unknown;
+    };
+    blockId: string;
+}
+export interface AddBlockMessage extends BaseMessage {
+    type: "ADD_BLOCK";
+    payload: {
+        block: Block;
+        location: {
+            type: "before" | "after";
+            targetId: string;
+        } | {
+            type: "append";
+            slot: string;
+            parentId: string;
+        };
+    };
+    blockId: string;
+}
+export interface RemoveBlockMessage extends BaseMessage {
+    type: "REMOVE_BLOCK";
+    payload: {
+        blockId: string;
+        location: {
+            slot: string;
+            parentId: string;
+        };
+    };
+    blockId: string;
+}
+export interface MoveBlockMessage extends BaseMessage {
+    type: "MOVE_BLOCK";
+    payload: {
+        blockId: string;
+        location: {
+            index: number;
+            slot: string;
+            parentId: string;
+        };
+    };
+    blockId: string;
+}
+export interface IframeReadyMessage extends BaseMessage {
+    type: "IFRAME_READY";
+    payload: {};
+}
+export interface RegisterBlocksMessage extends BaseMessage {
+    type: "REGISTER_BLOCKS";
+    payload: {
+        blocks: Array<{
+            name: string;
+            group: string;
+            schema: unknown;
+            initialValue: unknown;
+        }>;
+    };
+}
+export interface RegisterRoutesMessage extends BaseMessage {
+    type: "REGISTER_ROUTES";
+    payload: {
+        routes: Record<string, {
+            name: string;
+            pageComponent: string;
+        }>;
+    };
+}
+export type EditorMessage = SyncPageStateMessage | SelectBlockMessage | UpdateBlockPropsMessage | AddBlockMessage | RemoveBlockMessage | MoveBlockMessage;
+export type IframeMessage = SelectBlockMessage | IframeReadyMessage | RegisterBlocksMessage | RegisterRoutesMessage | RemoveBlockMessage | UpdateBlockPropsMessage;
+export type AnyMessage = EditorMessage | IframeMessage;
+export declare function isEditorMessage(message: AnyMessage): message is EditorMessage;
+export declare function isIframeMessage(message: AnyMessage): message is IframeMessage;
+export declare function createSyncPageStateMessage(payload: SyncPageStateMessage["payload"]): SyncPageStateMessage;
+export declare function createSelectBlockMessage(payload: SelectBlockMessage["payload"], blockId?: string): SelectBlockMessage;
+export declare function createUpdateBlockPropsMessage(payload: UpdateBlockPropsMessage["payload"], blockId: string): UpdateBlockPropsMessage;
+export declare function createAddBlockMessage(payload: AddBlockMessage["payload"], blockId: string): AddBlockMessage;
+export declare function createRemoveBlockMessage(payload: RemoveBlockMessage["payload"], blockId: string): RemoveBlockMessage;
+export declare function createMoveBlockMessage(payload: MoveBlockMessage["payload"], blockId: string): MoveBlockMessage;
+export declare function createRegisterBlocksMessage(payload: RegisterBlocksMessage["payload"]): RegisterBlocksMessage;
+export declare function createRegisterRoutesMessage(payload: RegisterRoutesMessage["payload"]): RegisterRoutesMessage;

package/dist/editor.js

@@ -0,0 +1,646 @@
+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);
+  return value;
+};
+import { e as createBlockInstanceFromObject } from "./block-CUUJl9_y.js";
+function isEditorMessage(message) {
+  return message.type === "SYNC_PAGE_STATE" || message.type === "SELECT_BLOCK" || message.type === "UPDATE_BLOCK_PROPS" || message.type === "ADD_BLOCK" || message.type === "REMOVE_BLOCK" || message.type === "MOVE_BLOCK";
+}
+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";
+}
+function createSyncPageStateMessage(payload) {
+  return {
+    type: "SYNC_PAGE_STATE",
+    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 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))
+  }));
+  return {
+    type: "REGISTER_BLOCKS",
+    payload: {
+      blocks: serializedBlocks
+    },
+    timestamp: Date.now()
+  };
+}
+function createRegisterRoutesMessage(payload) {
+  return {
+    type: "REGISTER_ROUTES",
+    payload,
+    timestamp: Date.now()
+  };
+}
+let bridgeInstance = null;
+function createEditorBridge() {
+  if (bridgeInstance !== null) {
+    return bridgeInstance;
+  }
+  const messageHandlers = [];
+  const selectedBlockId = { value: null };
+  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);
+  }
+  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;
+    });
+    if (isOverlay) {
+      return;
+    }
+    let blockWrapper = null;
+    for (const node of path) {
+      if (node instanceof HTMLElement && node.tagName === "JUO-EDITOR-BLOCK-WRAPPER") {
+        blockWrapper = node;
+        break;
+      }
+    }
+    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);
+  window.addEventListener("message", (event) => {
+    if (parentOrigin !== "*" && event.origin !== parentOrigin) {
+      return;
+    }
+    const { data } = event;
+    if (isEditorMessage(data)) {
+      if (data.type === "SELECT_BLOCK") {
+        updateBlockSelection(data.payload.blockId);
+      }
+      messageHandlers.forEach((handler) => handler(data));
+    }
+  });
+  if (document.readyState === "complete") {
+    sendMessage({
+      type: "IFRAME_READY",
+      payload: {},
+      timestamp: Date.now()
+    });
+  } else {
+    window.addEventListener("load", () => {
+      sendMessage({
+        type: "IFRAME_READY",
+        payload: {},
+        timestamp: Date.now()
+      });
+    });
+  }
+  bridgeInstance = {
+    sendMessage,
+    onMessage
+  };
+  return bridgeInstance;
+}
+function createEditorHandler(options) {
+  const { page, onBlockSelection } = options;
+  function handleMessage(message) {
+    var _a;
+    if (message.type === "SYNC_PAGE_STATE") {
+      const blocks = message.payload.blocks.map(
+        (block) => createBlockInstanceFromObject(block)
+      ) || [];
+      page.blocks.value = blocks;
+    } else if (message.type === "SELECT_BLOCK") {
+      const blockId = message.payload.blockId;
+      if (onBlockSelection) {
+        onBlockSelection(blockId);
+      }
+    } 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;
+      };
+      findAndUpdateBlock(
+        page.blocks.value,
+        message.payload.blockId,
+        message.payload.props
+      );
+      page.blocks.value = [...page.blocks.value];
+    } else if (message.type === "ADD_BLOCK") {
+      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 i = 0; i < blocks.length; i++) {
+            if (blocks[i].id === targetId) {
+              if (position === "before") {
+                blocks.splice(i, 0, newBlock2);
+              } else {
+                blocks.splice(i + 1, 0, newBlock2);
+              }
+              return true;
+            }
+            for (const slotKey of Object.keys(blocks[i].slots || {})) {
+              const slotBlocks = blocks[i].slots[slotKey];
+              const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
+              for (let j = 0; j < slotArray.length; j++) {
+                if (typeof slotArray[j] !== "string" && ((_a2 = slotArray[j]) == null ? void 0 : _a2.id) === targetId) {
+                  if (position === "before") {
+                    slotArray.splice(j, 0, newBlock2);
+                  } else {
+                    slotArray.splice(j + 1, 0, newBlock2);
+                  }
+                  blocks[i].slots[slotKey] = slotArray;
+                  return true;
+                }
+              }
+            }
+          }
+          return false;
+        };
+        findAndInsertBlock(
+          page.blocks.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(
+          page.blocks.value,
+          location.parentId,
+          location.slot,
+          newBlock
+        );
+      }
+      page.blocks.value = [...page.blocks.value];
+    } else if (message.type === "REMOVE_BLOCK") {
+      let findAndRemoveBlock = function(blocks, blockId, slot, parentId) {
+        var _a2;
+        for (let i = 0; i < blocks.length; i++) {
+          if (blocks[i].id === parentId && ((_a2 = blocks[i].slots) == null ? void 0 : _a2[slot])) {
+            const slotBlocks = blocks[i].slots[slot];
+            const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
+            const index = slotArray.findIndex(
+              (b) => typeof b !== "string" && (b == null ? void 0 : b.id) === blockId
+            );
+            if (index !== -1) {
+              slotArray.splice(index, 1);
+              blocks[i].slots[slot] = slotArray;
+              return true;
+            }
+          }
+          for (const slotKey of Object.keys(blocks[i].slots || {})) {
+            const slotBlocks = blocks[i].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;
+      };
+      let resolvedParentId = message.payload.location.parentId;
+      if (resolvedParentId === "root") {
+        resolvedParentId = ((_a = page.blocks.value[0]) == null ? void 0 : _a.id) ?? "root";
+      }
+      findAndRemoveBlock(
+        page.blocks.value,
+        message.payload.blockId,
+        message.payload.location.slot,
+        resolvedParentId
+      );
+      page.blocks.value = [...page.blocks.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(
+              (b) => typeof b !== "string" && (b == null ? void 0 : b.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;
+      };
+      findAndMoveBlock(
+        page.blocks.value,
+        message.payload.blockId,
+        message.payload.location.slot,
+        message.payload.location.parentId,
+        message.payload.location.index
+      );
+      page.blocks.value = [...page.blocks.value];
+    }
+  }
+  return {
+    handleMessage
+  };
+}
+const styles = `
+<style>
+  .block-wrapper {
+    margin: 1rem 0;
+    position: relative;
+    padding: 12px;
+    background-color: white;
+    border: 1px solid #B5B5B5;
+    border-radius: 8px;
+  }
+
+  .block-wrapper:hover,
+  .block-wrapper.active {
+    border-color: #2400FF;
+  }
+
+  .block-wrapper__name {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 6.82px;
+    margin-bottom: 12px;
+    font-size: 10px;
+    font-weight: 500;
+    color: #8A8A8A;
+  }
+
+  .block-wrapper__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-grow: 1;
+  }
+
+  .block-wrapper__actions button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    appearance: none;
+    border: none;
+    text-inherit: inherit;
+    padding: 0;
+    background: none;
+    cursor: pointer;
+  }
+
+  .block-wrapper__icon {
+    width: 17px;
+    height: 15px;
+  }
+
+  .block-wrapper__remove-icon {
+    width: 10px;
+    height: 3px;
+  }
+</style>
+`;
+const blockIconSvg = `
+<svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.41064 10.7254H2.5477V11.8625C2.5477 12.4905 3.05678 12.9996 3.68476 12.9996H4.82181V14.1366H3.68476C2.4288 14.1366 1.41064 13.1185 1.41064 11.8625V10.7254ZM1.41064 3.90311H2.5477V2.76606C2.5477 2.13808 3.05678 1.629 3.68476 1.629H4.82181V0.491943H3.68476C2.4288 0.491943 1.41064 1.5101 1.41064 2.76606V3.90311ZM11.6441 0.491943V1.629H12.7812C13.4092 1.629 13.9183 2.13808 13.9183 2.76606V3.90311H15.0553V2.76606C15.0553 1.5101 14.0372 0.491943 12.7812 0.491943H11.6441ZM15.0553 10.7254H13.9183V11.8625C13.9183 12.4905 13.4092 12.9996 12.7812 12.9996H11.6441V14.1366H12.7812C14.0372 14.1366 15.0553 13.1185 15.0553 11.8625V10.7254Z" fill="#8A8A8A"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.0554 6.17734H1.41074V8.45145H15.0554V6.17734ZM1.41074 5.04028C0.782759 5.04028 0.273682 5.54936 0.273682 6.17734V8.45145C0.273682 9.07943 0.782759 9.58851 1.41074 9.58851H15.0554C15.6834 9.58851 16.1925 9.07943 16.1925 8.45145V6.17734C16.1925 5.54936 15.6834 5.04028 15.0554 5.04028H1.41074Z" fill="#8A8A8A"/>
+  <rect x="6.52747" y="0.491943" width="3.41117" height="1.13706" fill="#8A8A8A"/>
+  <rect x="6.52747" y="12.9998" width="3.41117" height="1.13706" fill="#8A8A8A"/>
+</svg>
+`;
+const removeIconSvg = `
+<svg width="10" height="3" viewBox="0 0 10 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1.4001 2.11865C0.925912 2.11865 0.541504 1.74162 0.541504 1.27652C0.541504 0.811427 0.925912 0.434393 1.4001 0.434393C1.87429 0.434393 2.2587 0.811427 2.2587 1.27652C2.2587 1.74162 1.87429 2.11865 1.4001 2.11865Z" fill="black"/>
+  <path d="M4.8345 2.11865C4.36031 2.11865 3.9759 1.74162 3.9759 1.27652C3.9759 0.811427 4.36031 0.434393 4.8345 0.434393C5.30869 0.434393 5.69309 0.811427 5.69309 1.27652C5.69309 1.74162 5.30869 2.11865 4.8345 2.11865Z" fill="black"/>
+  <path d="M8.26915 2.11865C7.79496 2.11865 7.41055 1.74162 7.41055 1.27652C7.41055 0.811427 7.79496 0.434393 8.26915 0.434393C8.74334 0.434393 9.12774 0.811427 9.12774 1.27652C9.12774 1.74162 8.74334 2.11865 8.26915 2.11865Z" fill="black"/>
+</svg>
+`;
+class BlockWrapper extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "block", null);
+    __publicField(this, "editorBridge", createEditorBridge());
+    __publicField(this, "nameElement", 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.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 removeBtn = document.createElement("button");
+    removeBtn.type = "button";
+    removeBtn.innerHTML = removeIconSvg;
+    removeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.handleRemoveBlock();
+    });
+    actionsDiv.appendChild(removeBtn);
+    nameDiv.appendChild(iconContainer);
+    nameDiv.appendChild(nameSpan);
+    nameDiv.appendChild(actionsDiv);
+    wrapper.appendChild(nameDiv);
+    const slot = document.createElement("slot");
+    wrapper.appendChild(slot);
+    this.shadowRoot.appendChild(wrapper);
+    this.nameElement = nameSpan;
+    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() {
+    this.getAttribute("data-block-id");
+    this.setAttribute("draggable", "true");
+  }
+  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 setupEditorMode(page, blocks, routes) {
+  const editor = createEditorBridge();
+  const handler = createEditorHandler({
+    page
+  });
+  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
+    };
+  });
+  editor.sendMessage(createRegisterBlocksMessage({ blocks: blocksArray }));
+  editor.sendMessage(createRegisterRoutesMessage({ routes }));
+}
+export {
+  BlockWrapper,
+  createAddBlockMessage,
+  createEditorBridge,
+  createEditorHandler,
+  createMoveBlockMessage,
+  createRegisterBlocksMessage,
+  createRegisterRoutesMessage,
+  createRemoveBlockMessage,
+  createSelectBlockMessage,
+  createSyncPageStateMessage,
+  createUpdateBlockPropsMessage,
+  isEditorMessage,
+  isIframeMessage,
+  setupEditorMode
+};

package/dist/main.d.ts

@@ -5,4 +5,4 @@ export { ContextRequestEvent, ContextProvideEvent, type ContextCallback, createC
 export { StateContext, createState } from './state';
 export * from './utils';
 export * from './services';
-export { Signal, signal, effect, computed } from '@preact/signals-core';
+export { Signal, signal, effect, computed, untracked } from '@preact/signals-core';

package/dist/page-DuW859eK.js

@@ -0,0 +1,12 @@
+import { c as createContext, d } from "./block-CUUJl9_y.js";
+function createPage() {
+  const blocks = d([]);
+  return {
+    blocks
+  };
+}
+const PageContext = createContext("page");
+export {
+  PageContext as P,
+  createPage as c
+};

package/dist/state.d.ts

@@ -47,6 +47,7 @@ export declare function createState(): {
     addItemToUpcomingOrder(item: Omit<Item, "price">): void;
     addSubscription(subscription: Subscription): void;
 };
+/** @deprecated Use sepcialized services instead */
 export declare const StateContext: {
     __context__: {
         discountCode: import('@preact/signals-core').Signal<string | null>;

package/dist/web-components/ExtensionRoot.d.ts

@@ -4,6 +4,8 @@ export default class ExtensionRoot extends HTMLElement {
     private disposeEffect?;
     static get observedAttributes(): string[];
     constructor();
+    private wrapperCache;
+    private withWrapper;
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;

package/dist/web-components.js

@@ -4,8 +4,9 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { a as createBlockInstance, P as PageContext, j as withWrapper, o as ContextRoot } from "./page-eBHITwro.js";
-import { signal, effect, subscribeContext } from "@juo/orion-core";
+import { a as createBlockInstance, j as withWrapper, o as ContextRoot } from "./block-CUUJl9_y.js";
+import { signal, effect, subscribeContext, untracked } from "@juo/orion-core";
+import { P as PageContext } from "./page-DuW859eK.js";
 class Block extends HTMLElement {
   constructor() {
     super();
@@ -57,10 +58,18 @@ class ExtensionRoot extends HTMLElement {
     __publicField(this, "state", signal(null));
     __publicField(this, "unsubscribeContext");
     __publicField(this, "disposeEffect");
+    __publicField(this, "wrapperCache", /* @__PURE__ */ new WeakMap());
   }
   static get observedAttributes() {
     return ["name"];
   }
+  withWrapper(block) {
+    if (!this.wrapperCache.has(block)) {
+      const wrapper = withWrapper((block2) => block2.definition.render(block2));
+      this.wrapperCache.set(block, wrapper);
+    }
+    return this.wrapperCache.get(block)(block);
+  }
   connectedCallback() {
     this.state.value = null;
     this.unsubscribeContext = subscribeContext(
@@ -71,7 +80,6 @@ class ExtensionRoot extends HTMLElement {
       }
     );
     this.disposeEffect = effect(() => {
-      var _a;
       const state = this.state.value;
       if (state == null) {
         this.replaceChildren();
@@ -83,17 +91,20 @@ class ExtensionRoot extends HTMLElement {
         this.replaceChildren();
         return;
       }
-      try {
-        const extensionBlocks = (((_a = state == null ? void 0 : state.blocks.value.at(0)) == null ? void 0 : _a.slots) ?? {})[name] ?? [];
-        const children = extensionBlocks.map(
-          (block) => withWrapper((block2) => block2.definition.render(block2))(block)
-        ) ?? [];
-        console.log("extension-root:host", this);
-        this.replaceChildren(...children);
-      } catch (error) {
-        console.error(error);
-        this.replaceChildren();
-      }
+      const blocks = state.blocks.value;
+      untracked(() => {
+        var _a;
+        try {
+          const extensionBlocks = (((_a = blocks.at(0)) == null ? void 0 : _a.slots) ?? {})[name] ?? [];
+          const children = extensionBlocks.map(
+            (block) => this.withWrapper(block)
+          ) ?? [];
+          this.replaceChildren(...children);
+        } catch (error) {
+          console.error(error);
+          this.replaceChildren();
+        }
+      });
     });
   }
   attributeChangedCallback(name, oldValue, newValue) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@juo/orion-core",
   "private": false,
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "files": [
     "dist"
@@ -22,24 +22,28 @@
   },
   "exports": {
     ".": {
-      "node": "./dist/core.js",
-      "types": "./dist/main.d.ts"
+      "types": "./dist/main.d.ts",
+      "default": "./dist/core.js"
     },
     "./vue": {
-      "node": "./dist/vue.js",
-      "types": "./dist/vue/main.d.ts"
+      "types": "./dist/vue/main.d.ts",
+      "default": "./dist/vue.js"
     },
     "./react": {
-      "node": "./dist/react.js",
-      "types": "./dist/react/main.d.ts"
+      "types": "./dist/react/main.d.ts",
+      "default": "./dist/react.js"
     },
     "./preact": {
-      "node": "./dist/preact.js",
-      "types": "./dist/preact/main.d.ts"
+      "types": "./dist/preact/main.d.ts",
+      "default": "./dist/preact.js"
+    },
+    "./editor": {
+      "types": "./dist/editor/main.d.ts",
+      "default": "./dist/editor.js"
     },
     "./web-components": {
-      "node": "./dist/webComponents.js",
-      "types": "./dist/web-components/main.d.ts"
+      "types": "./dist/web-components/main.d.ts",
+      "node": "./dist/web-components.js"
     }
   },
   "dependencies": {