@juo/blocks 1.13.0 → 1.15.0

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;
@@ -16,6 +17,16 @@ export default class ExtensionRoot extends HTMLElement {
      */
     private unresolvedNames;
     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.
@@ -26,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":"AAmBA,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;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;CAkBrB;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":"AAkBA,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;IAWvB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,sBAAsB;IAM9B,iBAAiB;IA8JjB,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;IAqBlB,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,CAmd1D"}

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,57 @@
+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>;
+    /**
+     * The breakpoint the grid was rendering when the gesture committed. Threaded
+     * to the parent so the edit persists to that breakpoint's layout (the
+     * mobile/desktop orders are independent).
+     */
+    breakpoint: string;
+};
+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;IAChC;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,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,103 @@
 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 { i as injectContext, T as TranslationContext, C as ContextRoot } from "./css-runtime-ClH0MEYr.js";
+import { V as ViewLayoutController, E as ExtensionRoot, B as Block } from "./ExtensionRoot-C3lVJEBl.js";
+import { canvasMode, getActiveSurfaceContext, emitLayoutSetRects, effect } from "@juo/blocks";
+import { getLayoutModeAdapter } from "./layout-mode-adapter-BBd4JRQd.js";
+import { a as createEditorBridge, m as createFocusInlineTextMessage, J as createUpdateBlockTranslationMessage } from "./bridge-xiKEzCGR.js";
+import { i as initMorphController } from "./morph-n4LMxOYo.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,
+          breakpoint: event.breakpoint
+        });
+      };
+    }
+    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 +111,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 +158,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 +181,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 +286,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 +294,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-CDWbSpbt.js"),
+      import("./layout-mode-adapter-BBd4JRQd.js")
+    ]);
+    registerLayoutModeAdapter(createGridStackAdapter());
+  } catch (error) {
+    console.error("[blocks] failed to register GridStack adapter:", error);
+  }
+})();