@juo/blocks 1.13.0-alpha.2 → 1.14.0

package/dist/vue.js

@@ -1,9 +1,7 @@
 import { customRef, toValue, watchEffect, defineComponent, ref, getCurrentInstance, onMounted, provide, h, renderSlot, inject, computed, useHost, defineCustomElement, triggerRef, render, shallowRef } from "vue";
-import { getHook } from "./devtools.js";
-import { c as applyDevtoolsPropOverride, _ as __recordDevtoolsPropSetter } from "./block-B6s9jL7l.js";
 import { effect, signal, injectContext, provideContext, createCeRenderer, attachEmptyTracking } from "@juo/blocks";
 import { hasRenderedContent } from "@juo/blocks";
-import { p as createRegisterBlockTranslationKeysMessage, c as createEditorBridge } from "./bridge-r7Yk8fjY.js";
+import { b as createRegisterBlockTranslationKeysMessage, c as createEditorBridge } from "./bridge-D838SWmN.js";
 const signalsMap = /* @__PURE__ */ new WeakMap();
 function toSignal(ref2) {
   if (!signalsMap.has(ref2)) {
@@ -181,11 +179,7 @@ function createVueRenderer(component, options) {
     const parentInstance = block.__vueInstance;
     const existing = cache.get(block.id);
     if (existing && existing.parentInstance === parentInstance) {
-      existing.baseProps = block.props;
-      existing.propsRef.value = applyDevtoolsPropOverride(
-        block.id,
-        block.props
-      );
+      existing.propsRef.value = block.props;
       existing.slotsRef.value = block.slots;
       triggerRef(existing.slotsRef);
       return existing.wrapper;
@@ -193,19 +187,10 @@ function createVueRenderer(component, options) {
     if (existing) {
       render(null, existing.wrapper);
     }
-    const propsRef = shallowRef(
-      applyDevtoolsPropOverride(block.id, block.props)
-    );
+    const propsRef = shallowRef(block.props);
     const slotsRef = shallowRef(
       block.slots
     );
-    if (getHook()) {
-      __recordDevtoolsPropSetter(block.id, () => {
-        var _a;
-        const base = ((_a = cache.get(block.id)) == null ? void 0 : _a.baseProps) ?? block.props;
-        propsRef.value = applyDevtoolsPropOverride(block.id, base);
-      });
-    }
     const parentProvides = parentInstance == null ? void 0 : parentInstance.provides;
     const Root = defineComponent({
       setup() {
@@ -233,13 +218,7 @@ function createVueRenderer(component, options) {
     if (!existing) {
       attachEmptyTracking(wrapper);
     }
-    cache.set(block.id, {
-      wrapper,
-      propsRef,
-      slotsRef,
-      parentInstance,
-      baseProps: block.props
-    });
+    cache.set(block.id, { wrapper, propsRef, slotsRef, parentInstance });
     return wrapper;
   };
 }

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

@@ -1,3 +1,4 @@
+import { LayoutController } from './layout/layout-controller';
 export default class ExtensionRoot extends HTMLElement {
     private state;
     private themeState;
@@ -15,8 +16,17 @@ export default class ExtensionRoot extends HTMLElement {
      * if it shows up).
      */
     private unresolvedNames;
-    private renderedIds;
     private unregisterListener?;
+    private static scopeCounter;
+    private scopeId;
+    /**
+     * Pluggable layout strategy. Runtime default renders the settled CSS-Grid/flex
+     * view; the editor subclass swaps in a controller that adds the drag/resize
+     * adapter path. ExtensionRoot owns block rendering — the controller owns all
+     * layout side-effects on this host.
+     */
+    protected layout: LayoutController;
+    private getScopeId;
     /**
      * Optional function to wrap each rendered block element.
      * Called with the rendered block HTMLElement, must return an HTMLElement.
@@ -27,8 +37,45 @@ export default class ExtensionRoot extends HTMLElement {
     blockWrapper: ((rendered: HTMLElement) => HTMLElement) | null;
     static get observedAttributes(): string[];
     constructor();
-    private wrapperCache;
-    private withWrapper;
+    /**
+     * Rendered top-level children cached by stable block id.
+     *
+     * Keying on id (not BlockInstance identity) is what keeps entering layout
+     * mode cheap: a PROVIDE_THEME_STATE that re-materialises the same blocks
+     * into fresh instance objects reuses the existing wrapper element instead of
+     * recreating the whole subtree — which would otherwise tear down and
+     * re-request context for every nested `juo-text` and rip GridStack's managed
+     * elements out from under it.
+     *
+     * `render` is the memoised withWrapper closure (owns a stable outer wrapper
+     * element). `signature` is a content hash of the last-rendered block; when
+     * it is unchanged (e.g. only `canvasMode`/layout changed) we return the
+     * cached element without re-rendering at all. Any real content change —
+     * props/slots edited in place, a stub upgrading to its real definition at
+     * any depth — flips the signature and forces a re-render.
+     */
+    private childCache;
+    /**
+     * The layout engine the cached wrappers were built under. `withWrapper`
+     * (block.ts) picks the wrapper *element* (legacy chrome vs. minimal layout
+     * wrapper) once, at creation, from `layoutSystemEnabled`. The child cache
+     * keys on block id and reuses that memoised closure, so a live engine switch
+     * would otherwise keep the stale wrapper tag until a full refresh. Tracking
+     * the engine here lets us drop the cache when it flips, forcing fresh
+     * closures (and thus the correct wrapper element) on the next render.
+     */
+    private childCacheEngine;
+    /**
+     * Content hash of a block subtree: type, props, slot structure and the
+     * stub/real state of every node. Identity is deliberately excluded so a
+     * re-materialised-but-identical tree reuses its element; stub flags are
+     * included so a late-registered definition still re-renders even when its
+     * serialised props are unchanged.
+     */
+    private static signatureOf;
+    private renderChild;
+    /** Drop cached children whose ids are no longer rendered to avoid leaks. */
+    private pruneChildCache;
     private getSurface;
     private setStateFromThemeState;
     connectedCallback(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"ExtensionRoot.d.ts","sourceRoot":"","sources":["../../src/web-components/ExtensionRoot.ts"],"names":[],"mappings":"AAoBA,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,WAAW;IACpD,OAAO,CAAC,KAAK,CAA8B;IAC3C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,uBAAuB,CAAC,CAAa;IAC7C,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,aAAa,CAA0C;IAE/D;;;;;;;;;OASG;IACH,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,WAAW,CAAqB;IACxC,OAAO,CAAC,kBAAkB,CAAC,CAAa;IAExC;;;;;;OAMG;IACI,YAAY,EAAE,CAAC,CAAC,QAAQ,EAAE,WAAW,KAAK,WAAW,CAAC,GAAG,IAAI,CAAQ;IAE5E,MAAM,KAAK,kBAAkB,aAE5B;;IAMD,OAAO,CAAC,YAAY,CAGhB;IAEJ,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,sBAAsB;IAM9B,iBAAiB;IAuHjB,wBAAwB,CACtB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,QAAQ,EAAE,MAAM,GAAG,IAAI;IAiBzB,oBAAoB;CAuBrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}
+{"version":3,"file":"ExtensionRoot.d.ts","sourceRoot":"","sources":["../../src/web-components/ExtensionRoot.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAKnE,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,WAAW;IACpD,OAAO,CAAC,KAAK,CAA8B;IAC3C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,uBAAuB,CAAC,CAAa;IAC7C,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,aAAa,CAA0C;IAE/D;;;;;;;;;OASG;IACH,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,kBAAkB,CAAC,CAAa;IACxC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAK;IAChC,OAAO,CAAC,OAAO,CAAuB;IAEtC;;;;;OAKG;IACH,SAAS,CAAC,MAAM,EAAE,gBAAgB,CAA8B;IAEhE,OAAO,CAAC,UAAU;IAOlB;;;;;;OAMG;IACI,YAAY,EAAE,CAAC,CAAC,QAAQ,EAAE,WAAW,KAAK,WAAW,CAAC,GAAG,IAAI,CAAQ;IAE5E,MAAM,KAAK,kBAAkB,aAE5B;;IAMD;;;;;;;;;;;;;;;;OAgBG;IACH,OAAO,CAAC,UAAU,CAOd;IAEJ;;;;;;;;OAQG;IACH,OAAO,CAAC,gBAAgB,CAAwB;IAEhD;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,WAAW;IAiB1B,OAAO,CAAC,WAAW;IAsBnB,4EAA4E;IAC5E,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,sBAAsB;IAM9B,iBAAiB;IAuJjB,wBAAwB,CACtB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,QAAQ,EAAE,MAAM,GAAG,IAAI;IAiBzB,oBAAoB;CAoBrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,aAAa,CAAC;KACrC;CACF"}

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

@@ -0,0 +1,11 @@
+import { default as ExtensionRoot } from '../ExtensionRoot';
+/**
+ * Editor build of `juo-extension-root`. Identical to the runtime base except it
+ * swaps in the EditorLayoutController, which adds the drag/resize adapter path
+ * (and its `canvasMode` dependency). Keeping this in the editor bundle only is
+ * what keeps the editor layout-mode modules out of the storefront runtime.
+ */
+export default class EditorExtensionRoot extends ExtensionRoot {
+    constructor();
+}
+//# sourceMappingURL=ExtensionRoot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExtensionRoot.d.ts","sourceRoot":"","sources":["../../../src/web-components/editor/ExtensionRoot.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAG7C;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,aAAa;;CAK7D"}

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

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

package/dist/web-components/editor/ExtensionRoot.test.d.ts.map

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

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

@@ -9,6 +9,7 @@ export default class InlineText extends HTMLElement {
     private boundHandleClick;
     private lastValue;
     private dispose?;
+    private domInitialized;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"InlineText.d.ts","sourceRoot":"","sources":["../../../src/web-components/editor/InlineText.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,WAAW;IACjD,OAAO,CAAC,YAAY,CAAsD;IAC1E,OAAO,CAAC,kBAAkB,CAAmC;IAC7D,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,eAAe,CAA8B;IACrD,OAAO,CAAC,sBAAsB,CAAqC;IACnE,OAAO,CAAC,gBAAgB,CAA+B;IACvD,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,OAAO,CAAC,CAAa;IAE7B,MAAM,KAAK,kBAAkB,aAE5B;;IAMD,iBAAiB;IA0CjB,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,oBAAoB;IAiD5B,OAAO,CAAC,iBAAiB;IAoBzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,MAAM,CAAC,aAAa,CAAwC;IAEpE,OAAO,CAAC,YAAY;IA8BpB,OAAO,CAAC,UAAU;IA+BlB,wBAAwB,CACtB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,QAAQ,EAAE,MAAM,GAAG,IAAI;IAOzB,oBAAoB;CASrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,UAAU,CAAC;KACxB;CACF"}
+{"version":3,"file":"InlineText.d.ts","sourceRoot":"","sources":["../../../src/web-components/editor/InlineText.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,WAAW;IACjD,OAAO,CAAC,YAAY,CAAsD;IAC1E,OAAO,CAAC,kBAAkB,CAAmC;IAC7D,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,eAAe,CAA8B;IACrD,OAAO,CAAC,sBAAsB,CAAqC;IACnE,OAAO,CAAC,gBAAgB,CAA+B;IACvD,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,OAAO,CAAC,CAAa;IAI7B,OAAO,CAAC,cAAc,CAAS;IAE/B,MAAM,KAAK,kBAAkB,aAE5B;;IAMD,iBAAiB;IA0CjB,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,oBAAoB;IA2D5B,OAAO,CAAC,iBAAiB;IAoBzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,MAAM,CAAC,aAAa,CAAwC;IAEpE,OAAO,CAAC,YAAY;IA8BpB,OAAO,CAAC,UAAU;IA+BlB,wBAAwB,CACtB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,QAAQ,EAAE,MAAM,GAAG,IAAI;IAOzB,oBAAoB;CASrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,UAAU,CAAC;KACxB;CACF"}

package/dist/web-components/editor/editor-layout-controller.d.ts

@@ -0,0 +1,28 @@
+import { LayoutApplyInputs, LayoutController, LayoutReactiveState } from '../layout/layout-controller';
+/**
+ * Editor layout strategy: while layout (drag/resize) mode is active and a
+ * LayoutModeAdapter (GridStack) is registered, delegates layout to the adapter;
+ * otherwise falls back to the settled CSS-Grid/flex view via ViewLayoutController.
+ * Only ever loaded into the editor bundle — never the storefront runtime.
+ */
+export declare class EditorLayoutController implements LayoutController {
+    private currentAdapter;
+    private readonly view;
+    private changeHandler;
+    readReactiveState(): LayoutReactiveState;
+    apply(host: HTMLElement, inputs: LayoutApplyInputs): void;
+    teardown(host: HTMLElement): void;
+    /**
+     * Idempotently unmount the currently-mounted LayoutModeAdapter. Swallows
+     * secondary teardown errors so a broken adapter can't wedge rendering.
+     */
+    private unmountAdapter;
+    /**
+     * 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).
+     */
+    private handlerFor;
+    private surfaceOf;
+}
+//# sourceMappingURL=editor-layout-controller.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"editor-layout-controller.d.ts","sourceRoot":"","sources":["../../../src/web-components/editor/editor-layout-controller.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,6BAA6B,CAAC;AAQrC;;;;;GAKG;AACH,qBAAa,sBAAuB,YAAW,gBAAgB;IAC7D,OAAO,CAAC,cAAc,CAAkC;IACxD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAA8B;IACnD,OAAO,CAAC,aAAa,CAAyD;IAE9E,iBAAiB,IAAI,mBAAmB;IAIxC,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IA2DzD,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAKjC;;;OAGG;IACH,OAAO,CAAC,cAAc;IAUtB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,SAAS;CAGlB"}

package/dist/web-components/editor/gridstack-adapter.d.ts

@@ -0,0 +1,3 @@
+import { LayoutModeAdapter } from '../layout-mode-adapter';
+export declare function createGridStackAdapter(): LayoutModeAdapter;
+//# sourceMappingURL=gridstack-adapter.d.ts.map

package/dist/web-components/editor/gridstack-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridstack-adapter.d.ts","sourceRoot":"","sources":["../../../src/web-components/editor/gridstack-adapter.ts"],"names":[],"mappings":"AAkBA,OAAO,EAIL,KAAK,iBAAiB,EAGvB,MAAM,wBAAwB,CAAC;AAuehC,wBAAgB,sBAAsB,IAAI,iBAAiB,CA8c1D"}

package/dist/web-components/editor/gridstack-adapter.test.d.ts

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

package/dist/web-components/editor/gridstack-adapter.test.d.ts.map

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

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

@@ -0,0 +1,32 @@
+/**
+ * Run `fn` (a mode swap) inside a View Transition when supported and motion is
+ * allowed; otherwise apply it instantly. Assigns per-block `view-transition-name`s
+ * so each block morphs from its old rect to its new rect, clearing them once the
+ * transition finishes. Used for EXIT/settle and the button toggle — entry-from-grab
+ * deliberately bypasses this for instant continuity.
+ */
+export declare function withMorphTransition(fn: () => void): Promise<void>;
+/**
+ * Enter layout mode from a click on a block's arrange handle ("click to arm").
+ * The mode swap is a smooth View Transition morph; the user then drags/resizes
+ * the block natively in GridStack. When `block` is given (the exact wrapper the
+ * operator grabbed), it is scrolled into view as part of the morph and then
+ * plays a one-shot "pop" so it doesn't get lost across the reflow. Passing the
+ * element — not an id — avoids targeting the wrong node when blocks share an id.
+ * Layout mode persists until an explicit exit (click-away / Escape / button);
+ * exit listeners are bound reactively from `canvasMode` in `initMorphController`.
+ */
+export declare function enterLayout(block?: HTMLElement): void;
+/** Smoothly morph back to view mode (click-away / Escape / button toggle off). */
+export declare function exitToView(): void;
+/**
+ * Wire the controller's lifecycle. Idempotent — safe to call on every load.
+ *
+ * - Binds/unbinds the click-away + Escape exit listeners from `canvasMode`, so
+ *   exit works regardless of how layout mode was entered (click-to-arm or the
+ *   "Edit layout" button).
+ * - Tracks an "interacting" flag from the adapter's drag/resize lifecycle so a
+ *   pointerdown that ends a gesture can't be mistaken for click-away.
+ */
+export declare function initMorphController(): void;
+//# sourceMappingURL=morph.d.ts.map

package/dist/web-components/editor/morph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"morph.d.ts","sourceRoot":"","sources":["../../../src/web-components/editor/morph.ts"],"names":[],"mappings":"AAuKA;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAmCjE;AAyCD;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAkBrD;AAED,kFAAkF;AAClF,wBAAgB,UAAU,IAAI,IAAI,CAMjC;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAa1C"}

package/dist/web-components/editor/morph.test.d.ts

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

package/dist/web-components/editor/morph.test.d.ts.map

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

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

@@ -0,0 +1,55 @@
+import { BlockInstance } from '../../block';
+import { LayoutDocument } from '../../layout';
+/**
+ * Reactive inputs a LayoutController reads inside the ExtensionRoot effect's
+ * TRACKED scope. Keeping these behind `readReactiveState()` is what lets the
+ * editor controller subscribe the effect to `canvasMode` while the runtime
+ * controller subscribes to nothing.
+ */
+export type LayoutReactiveState = {
+    /** Whether the editor layout (drag/resize) mode is active. Always false at runtime. */
+    mode: boolean;
+};
+/**
+ * Everything a LayoutController needs to lay out a host's children. Assembled
+ * by ExtensionRoot each render pass; `children` are the already-rendered,
+ * cached block elements in render order (parallel to `extensionBlocks`).
+ */
+export type LayoutApplyInputs = {
+    extensionBlocks: BlockInstance[];
+    children: HTMLElement[];
+    layoutDoc: LayoutDocument | null;
+    /** Stable per-host scope id for the generated grid stylesheet. */
+    scopeId: string;
+    reactive: LayoutReactiveState;
+    /**
+     * Whether the active theme opts into the grid layout engine
+     * (`GlobalStyles.layoutEngine === "grid-v1"`). The `grid-layout` attribute is
+     * a per-surface CAPABILITY flag; this is the theme-level ON switch. Both must
+     * be true for the grid path to run — legacy themes render the flex/stacked
+     * view even on grid-capable surfaces.
+     */
+    layoutEngineEnabled: boolean;
+};
+/**
+ * Pluggable layout strategy for ExtensionRoot. The runtime variant applies a
+ * CSS-Grid/flex view; the editor variant additionally delegates to a
+ * LayoutModeAdapter (GridStack) while in layout mode. ExtensionRoot owns block
+ * rendering; the controller owns all layout/geometry side-effects on the host.
+ */
+export interface LayoutController {
+    /**
+     * Called in the effect's TRACKED scope so any signal reads register as
+     * effect dependencies (e.g. the editor controller reads `canvasMode` here so
+     * entering/exiting layout mode re-runs the effect).
+     */
+    readReactiveState(): LayoutReactiveState;
+    /** Called in untracked scope: apply layout to `host`. */
+    apply(host: HTMLElement, inputs: LayoutApplyInputs): void;
+    /**
+     * Idempotent: undo any persistent layout side-effect (adapter mount, grid
+     * containment). Called on empty/error render branches and on disconnect.
+     */
+    teardown(host: HTMLElement): void;
+}
+//# sourceMappingURL=layout-controller.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout-controller.d.ts","sourceRoot":"","sources":["../../../src/web-components/layout/layout-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,uFAAuF;IACvF,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,eAAe,EAAE,aAAa,EAAE,CAAC;IACjC,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;IACjC,kEAAkE;IAClE,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B;;;;;;OAMG;IACH,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,iBAAiB,IAAI,mBAAmB,CAAC;IACzC,yDAAyD;IACzD,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC1D;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;CACnC"}

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

@@ -0,0 +1,17 @@
+import { LayoutApplyInputs, LayoutController, LayoutReactiveState } from './layout-controller';
+/**
+ * Runtime layout strategy: renders the settled CSS-Grid view (or a flex column
+ * when no grid layout applies). No editor/canvas dependencies — this is the
+ * only layout code the storefront runtime bundle pulls in.
+ *
+ * Stateless: empty-block collapse is handled entirely in the generated CSS (an
+ * empty block sets `display:none` and row spacing is a per-item margin, so its
+ * row closes with no ghost gap), so there is nothing to observe or recompute at
+ * runtime.
+ */
+export declare class ViewLayoutController implements LayoutController {
+    readReactiveState(): LayoutReactiveState;
+    apply(host: HTMLElement, inputs: LayoutApplyInputs): void;
+    teardown(host: HTMLElement): void;
+}
+//# sourceMappingURL=view-layout-controller.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"view-layout-controller.d.ts","sourceRoot":"","sources":["../../../src/web-components/layout/view-layout-controller.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,qBAAqB,CAAC;AAE7B;;;;;;;;;GASG;AACH,qBAAa,oBAAqB,YAAW,gBAAgB;IAC3D,iBAAiB,IAAI,mBAAmB;IAIxC,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAyBzD,QAAQ,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;CAGlC"}

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

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

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":""}