@juo/orion-core 0.11.0 → 0.12.0

package/dist/{web-components.js → ExtensionRoot-BuoY5H2A.js}

@@ -4,9 +4,9 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { j as withWrapper, o as ContextRoot } from "./block-CFJIpH_9.js";
 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";
 class Block extends HTMLElement {
   constructor() {
     super();
@@ -72,6 +72,11 @@ class ExtensionRoot extends HTMLElement {
   }
   connectedCallback() {
     this.state.value = 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,
       PageContext,
@@ -123,12 +128,7 @@ class ExtensionRoot extends HTMLElement {
     }
   }
 }
-if (customElements.get("juo-context-root") == null) {
-  customElements.define("juo-context-root", ContextRoot);
-}
-if (customElements.get("juo-extension-root") == null) {
-  customElements.define("juo-extension-root", ExtensionRoot);
-}
-if (customElements.get("juo-block") == null) {
-  customElements.define("juo-block", Block);
-}
+export {
+  Block as B,
+  ExtensionRoot as E
+};

package/dist/{bridge-eS7Tvd4V.js → bridge-BPfBHSPI.js}

@@ -230,14 +230,14 @@ function createEditorBridge() {
   return bridgeInstance;
 }
 export {
-  createRemoveBlockMessage as a,
-  createRegisterBlocksMessage as b,
+  createUpdateBlockPropsMessage as a,
+  createRemoveBlockMessage as b,
   createEditorBridge as c,
-  createRegisterRoutesMessage as d,
-  isIframeMessage as e,
-  createSyncPageStateMessage as f,
-  createSelectBlockMessage as g,
-  createUpdateBlockPropsMessage as h,
+  createRegisterBlocksMessage as d,
+  createRegisterRoutesMessage as e,
+  isIframeMessage as f,
+  createSyncPageStateMessage as g,
+  createSelectBlockMessage as h,
   isEditorMessage as i,
   createAddBlockMessage as j,
   createMoveBlockMessage as k,

package/dist/editor.js

@@ -4,8 +4,8 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { c as createEditorBridge, a as createRemoveBlockMessage, b as createRegisterBlocksMessage, d as createRegisterRoutesMessage } from "./bridge-eS7Tvd4V.js";
-import { j, k, g, l, f, h, i, e } from "./bridge-eS7Tvd4V.js";
+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";
 function createEditorHandler(options) {
   const { page, onBlockSelection } = options;
@@ -211,17 +211,17 @@ function createEditorHandler(options) {
 const styles = `
 <style>
   .block-wrapper {
-    margin: 1rem 0;
-    position: relative;
     padding: 12px;
     background-color: white;
     border: 1px solid #B5B5B5;
     border-radius: 8px;
+    width: fit-content;
+    justify-self: center;
   }
 
   .block-wrapper:hover,
   .block-wrapper.active {
-    border-color: #2400FF;
+    border-color: #000000;
   }
 
   .block-wrapper__name {
@@ -230,21 +230,26 @@ const styles = `
     align-items: center;
     gap: 6.82px;
     margin-bottom: 12px;
-    font-size: 10px;
+    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;
@@ -254,10 +259,6 @@ const styles = `
     cursor: pointer;
   }
 
-  .block-wrapper__icon {
-    width: 17px;
-    height: 15px;
-  }
 
   .block-wrapper__remove-icon {
     width: 10px;
@@ -266,19 +267,16 @@ const styles = `
 </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 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 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 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>
+
 `;
 class BlockWrapper extends HTMLElement {
   constructor() {
@@ -304,6 +302,7 @@ class BlockWrapper extends HTMLElement {
     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");
@@ -313,8 +312,8 @@ class BlockWrapper extends HTMLElement {
     const removeBtn = document.createElement("button");
     removeBtn.type = "button";
     removeBtn.innerHTML = removeIconSvg;
-    removeBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
+    removeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
       this.handleRemoveBlock();
     });
     actionsDiv.appendChild(removeBtn);
@@ -334,8 +333,6 @@ class BlockWrapper extends HTMLElement {
     });
   }
   connectedCallback() {
-    this.getAttribute("data-block-id");
-    this.setAttribute("draggable", "true");
   }
   disconnectedCallback() {
   }
@@ -443,11 +440,11 @@ export {
   createRegisterBlocksMessage,
   createRegisterRoutesMessage,
   createRemoveBlockMessage,
-  g as createSelectBlockMessage,
+  h as createSelectBlockMessage,
   l as createSetBlockPresetMessage,
-  f as createSyncPageStateMessage,
-  h as createUpdateBlockPropsMessage,
+  g as createSyncPageStateMessage,
+  a as createUpdateBlockPropsMessage,
   i as isEditorMessage,
-  e as isIframeMessage,
+  f as isIframeMessage,
   setupEditorMode
 };

package/dist/preact.js

@@ -9,7 +9,7 @@ import { useState, useRef, useEffect, useContext as useContext$1, useMemo } from
 import { g as getSignalValue, s as setSignalValue, w as wrapContext, c as createSlotChildren } from "./block-DPjf_G7G.js";
 import { t } from "./block-DPjf_G7G.js";
 import { createContext, h, render } from "preact";
-import { c as createEditorBridge } from "./bridge-eS7Tvd4V.js";
+import { c as createEditorBridge } from "./bridge-BPfBHSPI.js";
 function toState(signal) {
   const [value, setValue] = useState(() => getSignalValue(signal));
   const disposeRef = useRef(null);

package/dist/react.js

@@ -9,7 +9,7 @@ import React, { useSyncExternalStore, createContext, useState, useContext as use
 import { g as getSignalValue, s as setSignalValue, w as wrapContext, c as createSlotChildren } from "./block-DPjf_G7G.js";
 import { t } from "./block-DPjf_G7G.js";
 import { createRoot } from "react-dom/client";
-import { c as createEditorBridge } from "./bridge-eS7Tvd4V.js";
+import { c as createEditorBridge } from "./bridge-BPfBHSPI.js";
 function toState(signal) {
   const subscribe = (callback) => {
     const dispose = effect(() => {

package/dist/vue.js

@@ -1,6 +1,6 @@
 import { toValue, watchEffect, customRef, defineComponent, ref, getCurrentInstance, onMounted, provide, h, renderSlot, inject, computed, createApp, useHost, defineCustomElement } from "vue";
 import { signal, effect, injectContext, provideContext, createCeRenderer } from "@juo/orion-core";
-import { c as createEditorBridge } from "./bridge-eS7Tvd4V.js";
+import { c as createEditorBridge } from "./bridge-BPfBHSPI.js";
 const signalsMap = /* @__PURE__ */ new WeakMap();
 function toSignal(ref2) {
   if (!signalsMap.has(ref2)) {

package/dist/web-components/editor/InlineText.d.ts

@@ -0,0 +1,24 @@
+export default class InlineText extends HTMLElement {
+    private editorBridge;
+    private propName;
+    private blockId;
+    private boundHandleBlur;
+    private boundHandlePointerDown;
+    private lastValue;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    private initializeEditorMode;
+    private handlePointerDown;
+    private handleBlur;
+    private static injectedRoots;
+    private injectStyles;
+    private sendUpdate;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "juo-text": InlineText;
+    }
+}

package/dist/web-components/runtime/InlineText.d.ts

@@ -0,0 +1,4 @@
+export default class InlineText extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+}

package/dist/web-components/runtime/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/web-components-editor.js

@@ -0,0 +1,140 @@
+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 { o as ContextRoot } from "./block-CFJIpH_9.js";
+import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-BuoY5H2A.js";
+import { c as createEditorBridge, a as createUpdateBlockPropsMessage } from "./bridge-BPfBHSPI.js";
+const _InlineText = class _InlineText extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "editorBridge", null);
+    __publicField(this, "propName", null);
+    __publicField(this, "blockId", null);
+    __publicField(this, "boundHandleBlur", this.handleBlur.bind(this));
+    __publicField(this, "boundHandlePointerDown", this.handlePointerDown.bind(this));
+    __publicField(this, "lastValue", null);
+  }
+  static get observedAttributes() {
+    return ["prop"];
+  }
+  connectedCallback() {
+    this.style.display = "inline-block";
+    this.propName = this.getAttribute("prop");
+    if (!this.propName) {
+      console.warn("juo-text: 'prop' attribute is required");
+      return;
+    }
+    let blockWrapper = this.closest("[data-block-id]");
+    if (!blockWrapper) {
+      const rootNode = this.getRootNode();
+      if (rootNode instanceof ShadowRoot && rootNode.host) {
+        blockWrapper = rootNode.host.closest("[data-block-id]");
+      }
+    }
+    if (!blockWrapper) {
+      console.warn("juo-text: Could not find parent block with data-block-id");
+      return;
+    }
+    this.blockId = blockWrapper.getAttribute("data-block-id");
+    if (!this.blockId) {
+      console.warn("juo-text: Parent block has no data-block-id attribute");
+      return;
+    }
+    this.initializeEditorMode();
+  }
+  initializeEditorMode() {
+    this.editorBridge = createEditorBridge();
+    this.contentEditable = "false";
+    this.style.cursor = "text";
+    this.style.width = "100%";
+    this.style.borderRadius = "2px";
+    this.style.outline = "0.5px solid transparent";
+    this.style.outlineOffset = "2px";
+    this.style.overflowWrap = "anywhere";
+    this.style.whiteSpace = "pre-wrap";
+    this.injectStyles();
+    this.addEventListener("blur", this.boundHandleBlur);
+    this.addEventListener("pointerdown", this.boundHandlePointerDown);
+    this.lastValue = this.textContent || "";
+  }
+  handlePointerDown() {
+    this.contentEditable = "plaintext-only";
+  }
+  handleBlur() {
+    this.contentEditable = "false";
+    this.sendUpdate();
+  }
+  injectStyles() {
+    const rootNode = this.getRootNode();
+    const root = rootNode instanceof ShadowRoot ? rootNode : document;
+    if (_InlineText.injectedRoots.has(root)) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.textContent = `
+      juo-text:hover {
+        outline-color: #CACACA !important;
+      }
+      juo-text:focus {
+        outline-color: #717171 !important;
+      }
+    `;
+    if (root instanceof ShadowRoot) {
+      root.appendChild(style);
+    } else {
+      document.head.appendChild(style);
+    }
+    _InlineText.injectedRoots.add(root);
+  }
+  sendUpdate() {
+    if (!this.editorBridge || !this.blockId || !this.propName) {
+      return;
+    }
+    const newValue = this.textContent ?? "";
+    if (newValue.trim() === "" && this.lastValue !== null && this.lastValue !== "") {
+      this.textContent = this.lastValue;
+      return;
+    }
+    if (this.lastValue === newValue) {
+      return;
+    }
+    const message = createUpdateBlockPropsMessage(
+      {
+        blockId: this.blockId,
+        props: {
+          [this.propName]: newValue
+        }
+      },
+      this.blockId
+    );
+    this.editorBridge.sendMessage(message);
+    this.lastValue = newValue;
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "prop" && oldValue !== newValue) {
+      this.propName = newValue;
+    }
+  }
+  disconnectedCallback() {
+    this.removeEventListener("blur", this.boundHandleBlur);
+    this.removeEventListener("pointerdown", this.boundHandlePointerDown);
+    this.editorBridge = null;
+  }
+};
+__publicField(_InlineText, "injectedRoots", /* @__PURE__ */ new WeakSet());
+let InlineText = _InlineText;
+if (customElements.get("juo-context-root") == null) {
+  customElements.define("juo-context-root", ContextRoot);
+}
+if (customElements.get("juo-extension-root") == null) {
+  customElements.define("juo-extension-root", ExtensionRoot);
+}
+if (customElements.get("juo-block") == null) {
+  customElements.define("juo-block", Block);
+}
+if (customElements.get("juo-text") == null) {
+  customElements.define("juo-text", InlineText);
+}

package/dist/web-components-runtime.js

@@ -0,0 +1,23 @@
+import { o as ContextRoot } from "./block-CFJIpH_9.js";
+import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-BuoY5H2A.js";
+class InlineText extends HTMLElement {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    this.style.display = "inline-block";
+    this.style.overflowWrap = "anywhere";
+  }
+}
+if (customElements.get("juo-context-root") == null) {
+  customElements.define("juo-context-root", ContextRoot);
+}
+if (customElements.get("juo-extension-root") == null) {
+  customElements.define("juo-extension-root", ExtensionRoot);
+}
+if (customElements.get("juo-block") == null) {
+  customElements.define("juo-block", Block);
+}
+if (customElements.get("juo-text") == null) {
+  customElements.define("juo-text", InlineText);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@juo/orion-core",
   "private": false,
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "files": [
     "dist"
@@ -41,9 +41,13 @@
       "types": "./dist/editor/main.d.ts",
       "default": "./dist/editor.js"
     },
-    "./web-components": {
-      "types": "./dist/web-components/main.d.ts",
-      "node": "./dist/web-components.js"
+    "./web-components/editor": {
+      "types": "./dist/web-components/editor/main.d.ts",
+      "default": "./dist/web-components-editor.js"
+    },
+    "./web-components/runtime": {
+      "types": "./dist/web-components/runtime/main.d.ts",
+      "default": "./dist/web-components-runtime.js"
     }
   },
   "dependencies": {