@juo/blocks 1.13.0-alpha.2 → 1.14.0

package/dist/web-components-editor.js

@@ -1,10 +1,98 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { i as injectContext, E, C as ContextRoot } from "./block-B6s9jL7l.js";
-import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-peABLAZZ.js";
-import { c as createEditorBridge, a as createFocusInlineTextMessage, b as createUpdateBlockTranslationMessage } from "./bridge-r7Yk8fjY.js";
-import { T as TranslationContext } from "./juo-workflow-DY4rd256.js";
+import { Q as injectContext, m as TranslationContext, a6 as ContextRoot } from "./css-runtime-DWytAzZ5.js";
+import { V as ViewLayoutController, E as ExtensionRoot, B as Block } from "./ExtensionRoot-CRJx0Dtr.js";
+import { canvasMode, getActiveSurfaceContext, emitLayoutSetRects, effect } from "@juo/blocks";
+import { getLayoutModeAdapter } from "./layout-mode-adapter-BBd4JRQd.js";
+import { c as createEditorBridge, d as createFocusInlineTextMessage, e as createUpdateBlockTranslationMessage } from "./bridge-D838SWmN.js";
+import { i as initMorphController } from "./morph-Dj-xvrwt.js";
+class EditorLayoutController {
+  constructor() {
+    __publicField(this, "currentAdapter", null);
+    __publicField(this, "view", new ViewLayoutController());
+    __publicField(this, "changeHandler", null);
+  }
+  readReactiveState() {
+    return { mode: canvasMode.value };
+  }
+  apply(host, inputs) {
+    const { extensionBlocks, children, layoutDoc, scopeId, reactive } = inputs;
+    const adapter = getLayoutModeAdapter();
+    const wantsAdapter = inputs.layoutEngineEnabled && host.hasAttribute("grid-layout") && layoutDoc != null && reactive.mode && adapter != null;
+    if (this.currentAdapter && this.currentAdapter !== adapter) {
+      this.unmountAdapter(host);
+    }
+    if (wantsAdapter) {
+      this.view.teardown(host);
+      const blockIds = extensionBlocks.map((block) => block.id);
+      const blockElements = {};
+      extensionBlocks.forEach((block, index) => {
+        blockElements[block.id] = children[index];
+      });
+      const adapterInputs = {
+        layout: layoutDoc,
+        blockIds,
+        blockElements,
+        scopeId,
+        onChange: this.handlerFor(host)
+      };
+      if (this.currentAdapter === adapter && adapter.update) {
+        adapter.update(host, adapterInputs);
+      } else {
+        this.unmountAdapter(host);
+        adapter.mount(host, adapterInputs);
+        this.currentAdapter = adapter;
+      }
+      return;
+    }
+    this.unmountAdapter(host);
+    this.view.apply(host, inputs);
+  }
+  teardown(host) {
+    this.unmountAdapter(host);
+    this.view.teardown(host);
+  }
+  /**
+   * Idempotently unmount the currently-mounted LayoutModeAdapter. Swallows
+   * secondary teardown errors so a broken adapter can't wedge rendering.
+   */
+  unmountAdapter(host) {
+    if (this.currentAdapter == null) return;
+    try {
+      this.currentAdapter.unmount(host);
+    } catch {
+    }
+    this.currentAdapter = null;
+  }
+  /**
+   * Stable commit-time rects handler bound to `host`'s surface. Cached so the
+   * adapter always receives the same callback reference (created once per
+   * controller/host, mirroring the previous per-element handler).
+   */
+  handlerFor(host) {
+    if (this.changeHandler == null) {
+      this.changeHandler = (event) => {
+        const surface = this.surfaceOf(host);
+        const ctx = getActiveSurfaceContext(surface);
+        if (ctx == null) {
+          return;
+        }
+        emitLayoutSetRects({ surface, id: ctx.id, rects: event.rects });
+      };
+    }
+    return this.changeHandler;
+  }
+  surfaceOf(host) {
+    return host.getAttribute("surface") === "overlay" ? "overlay" : "page";
+  }
+}
+class EditorExtensionRoot extends ExtensionRoot {
+  constructor() {
+    super();
+    this.layout = new EditorLayoutController();
+  }
+}
 const _InlineText = class _InlineText extends HTMLElement {
   constructor() {
     super();
@@ -18,6 +106,10 @@ const _InlineText = class _InlineText extends HTMLElement {
     __publicField(this, "boundHandleClick", this.handleClick.bind(this));
     __publicField(this, "lastValue", null);
     __publicField(this, "dispose");
+    // One-time DOM/style setup guard — see initializeEditorMode. Persists across
+    // DOM moves so reconnecting (e.g. exiting layout mode) skips redundant,
+    // recalc-forcing style writes.
+    __publicField(this, "domInitialized", false);
   }
   static get observedAttributes() {
     return ["prop", "readonly"];
@@ -61,18 +153,21 @@ const _InlineText = class _InlineText extends HTMLElement {
   }
   initializeEditorMode() {
     this.editorBridge = createEditorBridge();
-    this.contentEditable = "false";
-    if (!this.isReadonly) {
-      this.style.cursor = "text";
-      this.style.borderRadius = "2px";
-      this.style.outline = "0.5px solid transparent";
-      this.style.outlineOffset = "2px";
-    }
-    if (!this.style.width) this.style.width = "100%";
-    if (!this.style.overflowWrap) this.style.overflowWrap = "anywhere";
-    if (!this.style.whiteSpace) this.style.whiteSpace = "pre-wrap";
-    if (!this.isReadonly) {
-      this.injectStyles();
+    if (!this.domInitialized) {
+      this.domInitialized = true;
+      this.contentEditable = "false";
+      if (!this.isReadonly) {
+        this.style.cursor = "text";
+        this.style.borderRadius = "2px";
+        this.style.outline = "0.5px solid transparent";
+        this.style.outlineOffset = "2px";
+      }
+      if (!this.style.width) this.style.width = "100%";
+      if (!this.style.overflowWrap) this.style.overflowWrap = "anywhere";
+      if (!this.style.whiteSpace) this.style.whiteSpace = "pre-wrap";
+      if (!this.isReadonly) {
+        this.injectStyles();
+      }
     }
     this.addEventListener("blur", this.boundHandleBlur);
     this.addEventListener("pointerdown", this.boundHandlePointerDown);
@@ -81,7 +176,7 @@ const _InlineText = class _InlineText extends HTMLElement {
     if (this.translationService && this.propName && this.blockType && this.blockId) {
       const key = this.propName;
       const fallbackText = this.textContent ?? "";
-      this.dispose = E(() => {
+      this.dispose = effect(() => {
         const service = this.translationService;
         if (!service) return;
         void service.locale.value;
@@ -186,7 +281,7 @@ 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);
+  customElements.define("juo-extension-root", EditorExtensionRoot);
 }
 if (customElements.get("juo-block") == null) {
   customElements.define("juo-block", Block);
@@ -194,3 +289,15 @@ if (customElements.get("juo-block") == null) {
 if (customElements.get("juo-text") == null) {
   customElements.define("juo-text", InlineText);
 }
+initMorphController();
+void (async () => {
+  try {
+    const [{ createGridStackAdapter }, { registerLayoutModeAdapter }] = await Promise.all([
+      import("./gridstack-adapter-DreG3XnB.js"),
+      import("./layout-mode-adapter-BBd4JRQd.js")
+    ]);
+    registerLayoutModeAdapter(createGridStackAdapter());
+  } catch (error) {
+    console.error("[blocks] failed to register GridStack adapter:", error);
+  }
+})();

package/dist/web-components-runtime.js

@@ -1,9 +1,9 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { i as injectContext, E, C as ContextRoot } from "./block-B6s9jL7l.js";
-import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-peABLAZZ.js";
-import { T as TranslationContext } from "./juo-workflow-DY4rd256.js";
+import { Q as injectContext, m as TranslationContext, a6 as ContextRoot } from "./css-runtime-DWytAzZ5.js";
+import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-CRJx0Dtr.js";
+import { effect } from "@juo/blocks";
 class InlineText extends HTMLElement {
   constructor() {
     super(...arguments);
@@ -25,7 +25,7 @@ class InlineText extends HTMLElement {
     const blockId = (blockEl == null ? void 0 : blockEl.getAttribute("data-block-id")) ?? null;
     const service = injectContext(this, TranslationContext);
     const fallbackText = this.textContent ?? "";
-    this.dispose = E(() => {
+    this.dispose = effect(() => {
       void service.locale.value;
       const resolved = service.resolve(blockType, blockId, key);
       const isMissing = resolved === key || this.hasAttribute("fallback-on-empty") && resolved.trim() === "";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@juo/blocks",
   "private": false,
-  "version": "1.13.0-alpha.2",
+  "version": "1.14.0",
   "type": "module",
   "files": [
     "dist"
@@ -18,7 +18,8 @@
     "vite": "5.4.21",
     "vite-plugin-dts": "4.5.4",
     "vitest": "3.2.4",
-    "vue": "3.5.13"
+    "vue": "3.5.13",
+    "gridstack": "^11.5.1"
   },
   "exports": {
     ".": {

package/dist/ExtensionRoot-peABLAZZ.js

@@ -1,231 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { signal, effect, createBlockInstance } from "@juo/blocks";
-import { reportBlockWarning, reportBlockError } from "./observability.js";
-import { d, s as subscribeContext, E, w as withWrapper, n, b as backfillInstanceDefaults, a as isStubDefinition, o as onRegisterBlock } from "./block-B6s9jL7l.js";
-import { a as ThemeStateContext } from "./juo-workflow-DY4rd256.js";
-import { getHook } from "./devtools.js";
-class Block extends HTMLElement {
-  constructor() {
-    super();
-    /** @description The block name to render */
-    __publicField(this, "name", signal(null));
-    __publicField(this, "disposeEffect");
-  }
-  static get observedAttributes() {
-    return ["name"];
-  }
-  connectedCallback() {
-    this.name.value = this.getAttribute("name") ?? null;
-    this.disposeEffect = effect(() => {
-      this.renderBlock(this.name.value);
-    });
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "name" && oldValue !== newValue) {
-      this.name.value = newValue ?? null;
-    }
-  }
-  disconnectedCallback() {
-    if (this.disposeEffect) {
-      this.disposeEffect();
-      this.disposeEffect = void 0;
-    }
-  }
-  renderBlock(name) {
-    if (name == null) {
-      reportBlockWarning("'name' attribute is required on <juo-block>", {
-        site: "web-components.Block.renderBlock"
-      });
-      this.replaceChildren();
-      return;
-    }
-    const props = Object.fromEntries(
-      Array.from(this.attributes).map((attr) => [attr.name, attr.value])
-    );
-    try {
-      const block = createBlockInstance(name, { props });
-      this.replaceChildren(block.definition.render(block));
-    } catch (error) {
-      reportBlockError(error, {
-        site: "web-components.Block.renderBlock",
-        block: { id: "(none)", type: name },
-        keys: { props: Object.keys(props) }
-      });
-      this.replaceChildren();
-    }
-  }
-}
-class ExtensionRoot extends HTMLElement {
-  constructor() {
-    super();
-    __publicField(this, "state", d(null));
-    __publicField(this, "themeState", null);
-    __publicField(this, "unsubscribeThemeContext");
-    __publicField(this, "disposeEffect");
-    __publicField(this, "__vueInstance", null);
-    /**
-     * Names of top-level slot children that resolved to a stub on the last
-     * render pass — i.e. blocks whose definition hasn't been registered yet.
-     * Rebuilt on each render and consulted from the registration listener so
-     * we only retrigger when a block we're actually waiting on lands.
-     *
-     * Only top-level children are tracked — nested stubs inside a registered
-     * parent's renderer aren't currently handled (rare in practice; revisit
-     * if it shows up).
-     */
-    __publicField(this, "unresolvedNames", /* @__PURE__ */ new Set());
-    __publicField(this, "renderedIds", /* @__PURE__ */ new Set());
-    __publicField(this, "unregisterListener");
-    /**
-     * 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", "surface"];
-  }
-  withWrapper(block) {
-    if (!this.wrapperCache.has(block)) {
-      const blockWrapper = this.blockWrapper;
-      const wrapper = withWrapper((block2) => {
-        const rendered = block2.definition.render({ ...block2, __vueInstance: this.__vueInstance });
-        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.maxWidth = "100%";
-    this.unsubscribeThemeContext = subscribeContext(
-      this,
-      ThemeStateContext,
-      (contextValue) => {
-        this.themeState = contextValue;
-        this.setStateFromThemeState(contextValue);
-      }
-    );
-    this.disposeEffect = E(() => {
-      const state = this.state.value;
-      if (state == null) {
-        this.replaceChildren();
-        return;
-      }
-      const name = this.getAttribute("name");
-      if (name == null) {
-        console.error("'name' attribute is required");
-        this.replaceChildren();
-        return;
-      }
-      const blocks = state.blocks.value;
-      n(() => {
-        var _a;
-        let extensionBlocks = [];
-        try {
-          extensionBlocks = (((_a = blocks.at(0)) == null ? void 0 : _a.slots) ?? {})[name] ?? [];
-          for (const block of extensionBlocks) {
-            if (block != null && typeof block === "object") {
-              backfillInstanceDefaults(block);
-            }
-          }
-          const children = extensionBlocks.map(
-            (block) => this.withWrapper(block)
-          );
-          this.replaceChildren(...children);
-        } catch (error) {
-          reportBlockError(error, {
-            site: "web-components.ExtensionRoot.effect",
-            extra: {
-              surface: this.getSurface(),
-              name: this.getAttribute("name") ?? "(none)"
-            }
-          });
-          this.replaceChildren();
-          extensionBlocks = [];
-        }
-        this.unresolvedNames.clear();
-        this.renderedIds.clear();
-        for (const block of extensionBlocks) {
-          if (block != null && typeof block === "object") {
-            this.renderedIds.add(block.id);
-            if (isStubDefinition(block.definition)) {
-              this.unresolvedNames.add(block.type);
-            }
-          }
-        }
-        if (this.unresolvedNames.size > 0 && !this.unregisterListener) {
-          this.unregisterListener = onRegisterBlock((name2) => {
-            var _a2;
-            if (!this.unresolvedNames.has(name2)) return;
-            const stateRef = this.state.value;
-            if (stateRef == null) return;
-            const surfaceBlocks = stateRef.blocks.value;
-            const slotName = this.getAttribute("name");
-            if (slotName != null) {
-              const children = (((_a2 = surfaceBlocks.at(0)) == null ? void 0 : _a2.slots) ?? {})[slotName] ?? [];
-              for (const child of children) {
-                if (child != null && typeof child === "object" && child.type === name2) {
-                  backfillInstanceDefaults(child);
-                }
-              }
-            }
-            this.state.value = { ...stateRef };
-          });
-        }
-      });
-    });
-  }
-  attributeChangedCallback(name, oldValue, newValue) {
-    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.unsubscribeThemeContext) {
-      this.unsubscribeThemeContext();
-      this.unsubscribeThemeContext = void 0;
-    }
-    if (this.disposeEffect) {
-      this.disposeEffect();
-      this.disposeEffect = void 0;
-    }
-    if (this.unregisterListener) {
-      this.unregisterListener();
-      this.unregisterListener = void 0;
-    }
-    const hook = getHook();
-    if (hook) {
-      for (const id of this.renderedIds) hook.emit("block:unmounted", { id });
-    }
-    this.renderedIds.clear();
-    this.unresolvedNames.clear();
-  }
-}
-export {
-  Block as B,
-  ExtensionRoot as E
-};