@juo/blocks 1.13.0 → 1.15.0

package/dist/web-components-runtime.js

@@ -1,8 +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 { z as injectContext, b as TranslationContext, E, M as ContextRoot } from "./juo-workflow-BlG9CcAG.js";
-import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-2xTGTu3K.js";
+import { i as injectContext, T as TranslationContext, C as ContextRoot } from "./css-runtime-ClH0MEYr.js";
+import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-C3lVJEBl.js";
+import { effect } from "@juo/blocks";
 class InlineText extends HTMLElement {
   constructor() {
     super(...arguments);
@@ -24,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",
+  "version": "1.15.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": {
     ".": {
@@ -52,6 +53,10 @@
     "./observability": {
       "types": "./dist/observability.d.ts",
       "default": "./dist/observability.js"
+    },
+    "./devtools": {
+      "types": "./dist/devtools.d.ts",
+      "default": "./dist/devtools.js"
     }
   },
   "dependencies": {

package/dist/ExtensionRoot-2xTGTu3K.js

@@ -1,219 +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, J as subscribeContext, T as ThemeStateContext, E, L as withWrapper, K as n, f as backfillInstanceDefaults, F as isStubDefinition, G as onRegisterBlock } from "./juo-workflow-BlG9CcAG.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, "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();
-        for (const block of extensionBlocks) {
-          if (block != null && typeof block === "object" && 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;
-    }
-    this.unresolvedNames.clear();
-  }
-}
-export {
-  Block as B,
-  ExtensionRoot as E
-};