@juo/blocks 1.13.0 → 1.14.0

package/dist/web-components/layout/view-layout-controller.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-layout-controller.test.d.ts","sourceRoot":"","sources":["../../../src/web-components/layout/view-layout-controller.test.ts"],"names":[],"mappings":""}

package/dist/web-components/layout-grid.d.ts

@@ -0,0 +1,47 @@
+export type GridLayoutItem = {
+    blockId: string;
+    element: HTMLElement;
+};
+/** Per-item boolean-attribute tags derived from the runtime layout. */
+export type GridLayoutTags = {
+    /**
+     * Leader block ids (leftmost block of each divider row). Tagged with
+     * `data-juo-divider` so the surface stylesheet draws the full-width divider
+     * line above them.
+     */
+    dividerBlockIds?: ReadonlySet<string>;
+    /**
+     * Every block on a divider row. Tagged with `data-juo-divider-row` so the
+     * surface stylesheet adds the extra divider-row spacing (top margin) — only
+     * boundaries that actually show a divider grow; others keep the base row-gap.
+     */
+    dividerRowBlockIds?: ReadonlySet<string>;
+    /**
+     * Blocks currently spanning the full row width. Tagged with
+     * `data-juo-grid-full-width` so the block wrapper chrome can show the "fill"
+     * toggle as active.
+     */
+    fullWidthBlockIds?: ReadonlySet<string>;
+};
+export type GridLayoutInputs = GridLayoutTags & {
+    scopeId: string;
+    css: string;
+    items: GridLayoutItem[];
+};
+/**
+ * Assemble a CSS-Grid layout inside `host`:
+ *  - host becomes the container-query container (container-type: inline-size)
+ *  - a <style> child carries the scoped stylesheet
+ *  - an inner [data-juo-layout] grid element holds the block items
+ *  - each item element is tagged with data-block-id so projectToCss's
+ *    `${scope} > [data-block-id]` rules match
+ *
+ * Replaces the host's children with [styleEl, gridEl]. The host/grid split is
+ * required because an element cannot be matched by its own @container query:
+ * the host hosts the container-query context; the inner grid (a descendant)
+ * is what the @container rules target.
+ */
+export declare function applyGridLayout(host: HTMLElement, inputs: GridLayoutInputs): void;
+/** Revert the container-query containment applied by applyGridLayout. */
+export declare function clearGridLayout(host: HTMLElement): void;
+//# sourceMappingURL=layout-grid.d.ts.map

package/dist/web-components/layout-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-grid.d.ts","sourceRoot":"","sources":["../../src/web-components/layout-grid.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,WAAW,CAAA;CAAE,CAAC;AAEvE,uEAAuE;AACvE,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;OAIG;IACH,eAAe,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACzC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,CAAC;AAqBF;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAgBjF;AAED,yEAAyE;AACzE,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAEvD"}

package/dist/web-components/layout-grid.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=layout-grid.test.d.ts.map

package/dist/web-components/layout-grid.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-grid.test.d.ts","sourceRoot":"","sources":["../../src/web-components/layout-grid.test.ts"],"names":[],"mappings":""}

package/dist/web-components/layout-mode-adapter.d.ts

@@ -0,0 +1,51 @@
+import { GridRect, LayoutDocument } from '../layout';
+/**
+ * Bubbling, composed DOM CustomEvents an adapter fires on its host while the
+ * user is actively manipulating the layout (drag/resize). The morph controller
+ * listens for these to drive the idle-settle timer that morphs back to view
+ * mode. They are interaction-lifecycle signals only — NOT commit events
+ * (commits flow through `onChange`). Programmatic updates must NOT emit them.
+ */
+export declare const LAYOUT_INTERACTION_START = "juo-layout-interaction-start";
+export declare const LAYOUT_INTERACTION_END = "juo-layout-interaction-end";
+/**
+ * Class the morph controller toggles on a `.grid-stack-item` to play a one-shot
+ * "pop toward the operator" animation when layout mode is entered from that
+ * block. The keyframes live in the adapter's injected stylesheet (same DOM root
+ * as the grid), so the class is shared between the two modules here.
+ */
+export declare const LAYOUT_POP_CLASS = "juo-layout-pop";
+/**
+ * Final rects emitted by a LayoutModeAdapter at gesture commit (drop /
+ * resize-stop). Commit-time ingestion only — no streaming positions.
+ */
+export type LayoutModeRectsChange = {
+    rects: Record<string, GridRect>;
+};
+export type LayoutModeMountInputs = {
+    layout: LayoutDocument;
+    /** Render-ordered block ids that the host currently governs. */
+    blockIds: string[];
+    /**
+     * For each blockId, the HTMLElement ExtensionRoot already created for
+     * that block (in render order). Adapters MAY reuse / wrap / replace
+     * these. The spike GridStack adapter replaces them with simplified
+     * placeholder widgets and ignores these elements.
+     */
+    blockElements: Record<string, HTMLElement>;
+    /** Stable scope id for the host (same value Phase 3 uses for the CSS-grid scope). */
+    scopeId: string;
+    /** Called by the adapter on gesture completion. */
+    onChange: (event: LayoutModeRectsChange) => void;
+};
+export interface LayoutModeAdapter {
+    readonly id: string;
+    mount(host: HTMLElement, inputs: LayoutModeMountInputs): void;
+    unmount(host: HTMLElement): void;
+    /** Optional in-place update when the adapter is already mounted on `host`. */
+    update?(host: HTMLElement, inputs: LayoutModeMountInputs): void;
+}
+export declare function registerLayoutModeAdapter(adapter: LayoutModeAdapter): void;
+export declare function getLayoutModeAdapter(): LayoutModeAdapter | null;
+export declare function clearLayoutModeAdapter(): void;
+//# sourceMappingURL=layout-mode-adapter.d.ts.map

package/dist/web-components/layout-mode-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-mode-adapter.d.ts","sourceRoot":"","sources":["../../src/web-components/layout-mode-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAE1D;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,iCAAiC,CAAC;AACvE,eAAO,MAAM,sBAAsB,+BAA+B,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,mBAAmB,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,cAAc,CAAC;IACvB,gEAAgE;IAChE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB;;;;;OAKG;IACH,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAC3C,qFAAqF;IACrF,OAAO,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,qBAAqB,GAAG,IAAI,CAAC;IAC9D,OAAO,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,8EAA8E;IAC9E,MAAM,CAAC,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,qBAAqB,GAAG,IAAI,CAAC;CACjE;AAID,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,CAE1E;AAED,wBAAgB,oBAAoB,IAAI,iBAAiB,GAAG,IAAI,CAE/D;AAED,wBAAgB,sBAAsB,IAAI,IAAI,CAE7C"}

package/dist/web-components/layout-mode-adapter.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=layout-mode-adapter.test.d.ts.map

package/dist/web-components/layout-mode-adapter.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-mode-adapter.test.d.ts","sourceRoot":"","sources":["../../src/web-components/layout-mode-adapter.test.ts"],"names":[],"mappings":""}

package/dist/web-components-editor.js

@@ -1,9 +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 { z as injectContext, E, b as TranslationContext, M as ContextRoot } from "./juo-workflow-BlG9CcAG.js";
-import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-2xTGTu3K.js";
-import { a as createEditorBridge, b as createFocusInlineTextMessage, d as createUpdateBlockTranslationMessage } from "./bridge-w5KQ-czl.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();
@@ -17,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"];
@@ -60,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);
@@ -80,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;
@@ -185,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);
@@ -193,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,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 { 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);
@@ -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.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-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
-};