@juo/blocks 1.13.0 → 1.15.0

package/dist/editor.js

@@ -1,9 +1,12 @@
 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 { createBlockInstanceFromObject, indexOverrides, DEFAULT_GLOBAL_STYLES, effect, onRegisterBlock, getDefinedBlocks } from "@juo/blocks";
-import { a as createEditorBridge, f as createOpenAddBlockMenuMessage, g as createRemoveBlockMessage, h as createRegisterBlocksMessage, i as createRegisterRoutesMessage } from "./bridge-w5KQ-czl.js";
-import { j, k, b, l, m, n, o, p, c, q, r, s, t, u, e, v, w, x, y, d, z, A, B, C } from "./bridge-w5KQ-czl.js";
+import { serializeBlocks, createBlockInstanceFromObject, setActiveSurfaceContext, indexOverrides, canvasMode, getActiveSurfaceContext, emitLayoutCommand, DEFAULT_GLOBAL_STYLES, effect, setLayoutCommandEmitter, setLayoutCommandDispatcher, onRegisterBlock, getDefinedBlocks, clearAllSurfaceContexts } from "@juo/blocks";
+import { canvasMode as canvasMode2 } from "@juo/blocks";
+import { L as LAYOUT_BLOCK_WRAPPER_TAG, a as createEditorBridge, b as createOpenAddBlockMenuMessage, d as createRemoveBlockMessage, i as isBlockWrapperTag, r as resolveOutlineTarget, e as getBlockLabel, f as createLayoutCommandMessage, h as createRegisterBlocksMessage, j as createRegisterRoutesMessage } from "./bridge-xiKEzCGR.js";
+import { k, l, m, c, n, o, p, q, s, t, u, v, w, x, y, z, A, B, C, D, E, F, G, H, I, J, K, g, M, N } from "./bridge-xiKEzCGR.js";
+import { s as setCanvasMode, e as enterLayout } from "./morph-n4LMxOYo.js";
+import { r } from "./morph-n4LMxOYo.js";
 function createEditorHandler(options) {
   const { themeState, onBlockSelection } = options;
   const blockSurfaceIndex = /* @__PURE__ */ new Map();
@@ -53,19 +56,23 @@ function createEditorHandler(options) {
     return "page";
   }
   function handleMessage(message) {
-    var _a, _b;
+    var _a;
     if (message.type === "SET_GLOBAL_STYLES") {
       themeState.setGlobalStyles(message.payload.styles);
       return;
     }
     if (message.type === "PROVIDE_THEME_STATE") {
       const surface = message.payload.surface ?? "page";
-      const blocks = ((_a = message.payload.blocks) == null ? void 0 : _a.map(
-        (block) => createBlockInstanceFromObject(block)
-      )) || [];
       const target = getBlocks(surface);
-      target.value = blocks;
-      indexSurface(surface, target.value);
+      const incoming = message.payload.blocks ?? [];
+      const unchanged = JSON.stringify(serializeBlocks(target.value)) === JSON.stringify(incoming);
+      if (!unchanged) {
+        target.value = incoming.map(
+          (block) => createBlockInstanceFromObject(block)
+        );
+        indexSurface(surface, target.value);
+      }
+      setActiveSurfaceContext(surface, message.payload.id);
     } else if (message.type === "SELECT_BLOCK") {
       const blockId = message.payload.blockId;
       if (onBlockSelection) {
@@ -138,12 +145,12 @@ function createEditorHandler(options) {
             for (const slotKey of Object.keys(blocks[i].slots || {})) {
               const slotBlocks = blocks[i].slots[slotKey];
               const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
-              for (let j2 = 0; j2 < slotArray.length; j2++) {
-                if (typeof slotArray[j2] !== "string" && ((_a2 = slotArray[j2]) == null ? void 0 : _a2.id) === targetId) {
+              for (let j = 0; j < slotArray.length; j++) {
+                if (typeof slotArray[j] !== "string" && ((_a2 = slotArray[j]) == null ? void 0 : _a2.id) === targetId) {
                   if (position === "before") {
-                    slotArray.splice(j2, 0, newBlock2);
+                    slotArray.splice(j, 0, newBlock2);
                   } else {
-                    slotArray.splice(j2 + 1, 0, newBlock2);
+                    slotArray.splice(j + 1, 0, newBlock2);
                   }
                   blocks[i].slots[slotKey] = slotArray;
                   return true;
@@ -204,7 +211,7 @@ function createEditorHandler(options) {
             const slotBlocks = blocks[i].slots[slot];
             const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
             const index = slotArray.findIndex(
-              (b2) => typeof b2 !== "string" && (b2 == null ? void 0 : b2.id) === blockId
+              (b) => typeof b !== "string" && (b == null ? void 0 : b.id) === blockId
             );
             if (index !== -1) {
               slotArray.splice(index, 1);
@@ -230,7 +237,7 @@ function createEditorHandler(options) {
       const target = getBlocks(surface);
       let resolvedParentId = message.payload.location.parentId;
       if (resolvedParentId === "root") {
-        resolvedParentId = ((_b = target.value[0]) == null ? void 0 : _b.id) ?? "root";
+        resolvedParentId = ((_a = target.value[0]) == null ? void 0 : _a.id) ?? "root";
       }
       findAndRemoveBlock(
         target.value,
@@ -248,7 +255,7 @@ function createEditorHandler(options) {
             const slotBlocks = block.slots[slot];
             const slotArray = Array.isArray(slotBlocks) ? slotBlocks : [slotBlocks];
             const oldIndex = slotArray.findIndex(
-              (b2) => typeof b2 !== "string" && (b2 == null ? void 0 : b2.id) === blockId
+              (b) => typeof b !== "string" && (b == null ? void 0 : b.id) === blockId
             );
             if (oldIndex !== -1) {
               const [moved] = slotArray.splice(oldIndex, 1);
@@ -282,6 +289,17 @@ function createEditorHandler(options) {
       );
       target.value = [...target.value];
       indexSurface(surface, target.value);
+    } else if (message.type === "SET_LAYOUTING_MODE") {
+      setCanvasMode(message.payload.enabled);
+    } else if (message.type === "PROVIDE_LAYOUT_DOCUMENT") {
+      const surface = message.payload.surface;
+      const target = surface === "overlay" ? themeState.overlay : themeState.page;
+      setActiveSurfaceContext(surface, message.payload.id);
+      const incoming = message.payload.layout;
+      const changed = JSON.stringify(target.layout.value) !== JSON.stringify(incoming);
+      if (changed) {
+        target.layout.value = incoming;
+      }
     }
   }
   indexSurface("page", themeState.page.blocks.value);
@@ -789,14 +807,39 @@ const addBlockIconSvg = `
   <path d="M7 4.77V9.23M4.77 7H9.23" stroke="white" stroke-width="1.14" stroke-linecap="round"/>
 </svg>
 `;
-const trashIconSvg = `
+const layoutToggleSvg = `
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 4H12" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
-<path d="M5 4V2.5C5 2.22386 5.22386 2 5.5 2H8.5C8.77614 2 9 2.22386 9 2.5V4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
-<path d="M10.5 4L10 11.5C10 11.7761 9.77614 12 9.5 12H4.5C4.22386 12 4 11.7761 4 11.5L3.5 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-<line x1="7" y1="6.5" x2="7" y2="9.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
-<line x1="5.5" y1="6.5" x2="5.5" y2="9.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
-<line x1="8.5" y1="6.5" x2="8.5" y2="9.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+  <rect x="8.5" y="0.5" width="5" height="7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="8.5" y="9.5" width="5" height="4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="0.5" y="0.5" width="5" height="13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+const dragGripSvg = `
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="5" cy="3.5" r="1" fill="currentColor"/>
+  <circle cx="9" cy="3.5" r="1" fill="currentColor"/>
+  <circle cx="5" cy="7" r="1" fill="currentColor"/>
+  <circle cx="9" cy="7" r="1" fill="currentColor"/>
+  <circle cx="5" cy="10.5" r="1" fill="currentColor"/>
+  <circle cx="9" cy="10.5" r="1" fill="currentColor"/>
+</svg>
+`;
+const addCircleOutlineSvg = `
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <rect x="0.5" y="0.5" width="13" height="13" rx="6.5" stroke="currentColor"/>
+  <path d="M4.17133 7.0003L9.82818 7.0003" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M7.00006 9.82843L7.00006 4.17157" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+const fillHorizontalSvg = `
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <path d="M4.50013 4.11285L1.50013 7.00174L4.50013 9.89062M1.50013 7.00174L12.3647 7.00174" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9.50024 4.11328L12.5002 7.00217L9.50024 9.89106" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+const trashIconSvg = `
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <path d="M11.375 2.39649V11.5C11.375 12.6046 10.4796 13.5 9.375 13.5H4.375C3.27043 13.5 2.375 12.6046 2.375 11.5V2.39649H4.375M11.375 2.39649H9.375M11.375 2.39649H13.125M9.375 2.39649V0.5H4.375V2.39649M9.375 2.39649H4.375M4.375 2.39649H0.875M5 4.06653V11.0665M7 4.06653V11.0665M9 4.06653V11.0665" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
 class BlockWrapper extends HTMLElement {
@@ -857,8 +900,8 @@ class BlockWrapper extends HTMLElement {
     const moreBtn = document.createElement("button");
     moreBtn.type = "button";
     moreBtn.innerHTML = moreIconSvg;
-    moreBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
+    moreBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
       this.toggleMenu();
     });
     const menuEl = document.createElement("div");
@@ -874,8 +917,8 @@ class BlockWrapper extends HTMLElement {
     deleteBtn.className = "block-wrapper__menu-item block-wrapper__menu-item--danger";
     deleteBtn.setAttribute("role", "menuitem");
     deleteBtn.innerHTML = `${trashIconSvg}<span>Delete</span>`;
-    deleteBtn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
+    deleteBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
       this.closeMenu();
       this.handleRemoveBlock();
     });
@@ -943,9 +986,9 @@ class BlockWrapper extends HTMLElement {
     surface.appendChild(text);
     inner.appendChild(surface);
     btn.appendChild(inner);
-    btn.addEventListener("click", (e2) => {
-      e2.stopPropagation();
-      e2.preventDefault();
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
       this.handleAddBlock(position, btn);
     });
     return btn;
@@ -1051,8 +1094,8 @@ class BlockWrapper extends HTMLElement {
     if (!this.menuElement) return;
     this.menuElement.classList.add("open");
     this.isMenuOpen = true;
-    this.closeMenuOnOutsideClick = (e2) => {
-      if (!this.shadowRoot.contains(e2.composedPath()[0])) {
+    this.closeMenuOnOutsideClick = (e) => {
+      if (!this.shadowRoot.contains(e.composedPath()[0])) {
         this.closeMenu();
       }
     };
@@ -1130,6 +1173,761 @@ class BlockWrapper extends HTMLElement {
 if (customElements.get("juo-editor-block-wrapper") == null) {
   customElements.define("juo-editor-block-wrapper", BlockWrapper);
 }
+const layoutStyles = `
+<style>
+  :host {
+    display: block;
+    box-sizing: border-box;
+    /* Re-enable hit-testing (mirrors the legacy wrapper). */
+    pointer-events: auto;
+  }
+
+  .layout-block-wrapper {
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  /*
+   * Grid-cell fill chain. The GridStack adapter tags the host with
+   * data-juo-grid-cell; that gates an unbroken height:100% chain from the cell
+   * down to the slotted block root so short blocks fill the cell the merchant
+   * sized instead of top-aligning. In grid mode the slotted content is hidden
+   * and the hardcoded skeleton (below) fills the cell instead.
+   */
+  :host([data-juo-grid-cell]),
+  :host([data-juo-grid-cell]) .layout-block-wrapper,
+  :host([data-juo-grid-cell]) .layout-block-wrapper__slot-host {
+    height: 100%;
+  }
+
+  :host([data-juo-grid-cell]) ::slotted([data-block-id]) {
+    /* display:block so inline CE block hosts honour height:100% and fill the cell. */
+    display: block;
+    height: 100%;
+  }
+
+  /*
+   * Bare row divider in the SETTLED grid view (mirrors the customer portal).
+   * Paints a hairline centred in the gap above each row leader; the divider gap
+   * top margin grows only boundaries that show a divider. Both are driven by the
+   * breakpoint-aware flags projectToCss sets on the light-DOM grid item
+   * (--juo-divider-row / --juo-divider-line), which inherit across the shadow
+   * boundary the same way --juo-layout-c / --juo-layout-cols already do — so the
+   * divider follows the active breakpoint's row structure with no static
+   * attribute. The unitless flag multiplies into the length: 0 collapses to 0px
+   * (spacing) / a 0-height unpainted box (line). Gated with
+   * :not([data-juo-grid-cell]) so nothing paints while dragging in layout mode
+   * (where the projectToCss stylesheet is absent and the flags are unset anyway).
+   */
+  :host(:not([data-juo-grid-cell])) {
+    margin-top: calc(var(--juo-layout-divider-gap, 0px) * var(--juo-divider-row, 0));
+  }
+
+  :host(:not([data-juo-grid-cell])) .layout-block-wrapper::before {
+    content: "";
+    position: absolute;
+    top: calc(-0.5 * (var(--juo-layout-gap, var(--card-divider-margin, 20px)) + var(--juo-layout-divider-gap, 0px)) - var(--card-divider-height, 1px) / 2);
+    left: calc(-1 * var(--juo-layout-c, 0) * (100cqw + var(--juo-layout-gap, 0px)) / var(--juo-layout-cols, 12));
+    width: 100cqw;
+    height: calc(var(--card-divider-height, 1px) * var(--juo-divider-line, 0));
+    background: var(--card-divider-background, #e5e5e5);
+    pointer-events: none;
+  }
+
+  /*
+   * Layout-mode skeleton. Hidden while the settled view shows real content; in
+   * grid (drag) mode the slot host is hidden and this shimmer placeholder fills
+   * the cell so the canvas stays uniform while the merchant arranges blocks. The
+   * block name is retained so each cell stays identifiable.
+   */
+  .layout-block-wrapper__skeleton {
+    display: none;
+  }
+
+  :host([data-juo-grid-cell]) .layout-block-wrapper__slot-host {
+    display: none !important;
+  }
+
+  :host([data-juo-grid-cell]) .layout-block-wrapper__skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    box-sizing: border-box;
+    height: 100%;
+    padding: 16px 18px;
+    background: #ffffff;
+    border: 1px solid #ececf1;
+    border-radius: 10px;
+    overflow: hidden;
+    /* Ease the placeholder in when entering layout mode instead of snapping.
+     * Long, gentle fade so the card doesn't appear aggressively. */
+    animation: juo-skeleton-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  @keyframes juo-skeleton-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  /* Opacity-only (no translate) so bars breathe in softly rather than jumping. */
+  @keyframes juo-skeleton-bar-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .layout-block-wrapper__skeleton-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .layout-block-wrapper__skeleton-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #9a9aa6;
+  }
+
+  .layout-block-wrapper__skeleton-title {
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: -0.04px;
+    color: #6b6b76;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /*
+   * Placeholder bars sit directly under the header with a fixed height and a
+   * uniform gap, so every block's skeleton reads identically. The region grows
+   * to the skeleton's padding box (flex: 1) but the bars stay top-aligned — the
+   * count is intentionally sparse (recomputeSkeletonLines caps it) so the
+   * skeleton reads as a light "block placeholder" rather than a wall of noise.
+   * Per-bar widths are assigned in JS from a block-type-seeded sequence so
+   * adjacent blocks don't share the same width rhythm.
+   */
+  .layout-block-wrapper__skeleton-lines {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 12px;
+    overflow: hidden;
+  }
+
+  /* Flat placeholder bars — no shimmer so the layout-mode skeleton reads as a
+     static "block placeholder" rather than a loading state. Width is set in JS
+     (block-type-seeded); the value here is only a pre-measurement default. */
+  .layout-block-wrapper__skeleton-line {
+    width: 82%;
+    height: 12px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    background-color: #ededf2;
+    /* Newly added bars (first measure / resize) fade in softly, lightly
+     * staggered (see nth-child delays) so they don't all snap in together. */
+    animation: juo-skeleton-bar-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  .layout-block-wrapper__skeleton-line:nth-child(2) { animation-delay: 60ms; }
+  .layout-block-wrapper__skeleton-line:nth-child(3) { animation-delay: 120ms; }
+  .layout-block-wrapper__skeleton-line:nth-child(4) { animation-delay: 180ms; }
+
+  /*
+   * Center hover toolbar — the block's affordances: layout toggle (leading grip
+   * = morph trigger), add-below, fill, and delete. Shown on hover in BOTH view
+   * mode and grid/layout mode (data-juo-grid-cell). Its vertical position is set
+   * by JS (positionToolbar) to the midpoint of the block's VISIBLE portion so it
+   * stays reachable on tall / partially-scrolled blocks; top:50% is the
+   * fully-on-screen default before JS runs.
+   */
+  .layout-block-wrapper__toolbar {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 104;
+    display: none;
+    align-items: center;
+    gap: 6px;
+    box-sizing: border-box;
+    padding: 6px;
+    border-radius: 10px;
+    background: #f5f5f5;
+    border: 1px solid #ffffff;
+    box-shadow: 0 2px 3.5px rgba(0, 0, 0, 0.15);
+    backdrop-filter: blur(17px);
+    -webkit-backdrop-filter: blur(17px);
+    opacity: 0;
+    pointer-events: auto;
+    transition: opacity 140ms ease;
+  }
+
+  :host(:hover) .layout-block-wrapper__toolbar {
+    display: inline-flex;
+    opacity: 1;
+  }
+
+  /* While GridStack is actively dragging / resizing this block, hide the toolbar
+     so it doesn't overlap or interfere with the block being moved. The grid
+     adapter toggles data-juo-grid-interacting on the wrapper under interaction. */
+  :host([data-juo-grid-interacting]) .layout-block-wrapper__toolbar {
+    display: none !important;
+  }
+
+  .layout-block-wrapper__tool-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: #121212;
+    cursor: pointer;
+    transition: background 120ms ease;
+  }
+
+  .layout-block-wrapper__tool-btn:hover {
+    background: rgba(0, 0, 0, 0.06);
+  }
+
+  .layout-block-wrapper__tool-btn:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  .layout-block-wrapper__tool-btn:disabled:hover {
+    background: transparent;
+  }
+
+  .layout-block-wrapper__tool-btn svg {
+    display: block;
+  }
+
+  /* Leading position swaps between two buttons: the layout toggle in preview
+     mode and the drag grip in layout mode (host tagged data-juo-grid-cell by the
+     GridStack adapter). They are mutually exclusive so only one shows at a time. */
+  .layout-block-wrapper__tool-btn--toggle {
+    display: inline-flex;
+  }
+
+  :host([data-juo-grid-cell]) .layout-block-wrapper__tool-btn--toggle {
+    display: none;
+  }
+
+  .layout-block-wrapper__tool-btn--grip {
+    display: none;
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .layout-block-wrapper__tool-btn--grip:active {
+    cursor: grabbing;
+  }
+
+  :host([data-juo-grid-cell]) .layout-block-wrapper__tool-btn--grip {
+    display: inline-flex;
+  }
+
+  /* The fill toggle only makes sense while arranging, so it is hidden in the
+     settled view and revealed only in layout mode (host tagged data-juo-grid-cell
+     by the GridStack adapter). Add / delete stay visible in both modes. */
+  .layout-block-wrapper__tool-btn--fill-h {
+    display: none;
+  }
+
+  :host([data-juo-grid-cell]) .layout-block-wrapper__tool-btn--fill-h {
+    display: inline-flex;
+  }
+
+  /* Single-column breakpoints (e.g. mobile, cols:1) support reordering but not
+     width fill — there is only one lane — so hide the fill toggle while keeping
+     the drag grip so blocks can still be reordered. Add/delete (tree edits)
+     remain in both modes. */
+  :host([data-juo-grid-single-col]) .layout-block-wrapper__tool-btn--fill-h {
+    display: none;
+  }
+
+  /* Active (pressed) state for the fill toggle — shown while the block spans the
+     full row (data-juo-grid-full-width set on the host by the layout runtime). */
+  :host([data-juo-grid-full-width]) .layout-block-wrapper__tool-btn--fill-h {
+    background: #121212;
+    color: #ffffff;
+  }
+
+  :host([data-juo-grid-full-width]) .layout-block-wrapper__tool-btn--fill-h:hover {
+    background: #121212;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .layout-block-wrapper__toolbar,
+    .layout-block-wrapper__tool-btn {
+      transition: none;
+    }
+
+    .layout-block-wrapper__skeleton,
+    .layout-block-wrapper__skeleton-line {
+      animation: none;
+    }
+  }
+</style>
+`;
+const _LayoutBlockWrapper = class _LayoutBlockWrapper extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "block", null);
+    __publicField(this, "editorBridge", createEditorBridge());
+    __publicField(this, "skeletonTitle", null);
+    __publicField(this, "skeletonLines", null);
+    __publicField(this, "skeletonResizeObserver", null);
+    __publicField(this, "toolbar", null);
+    __publicField(this, "toolbarRafId", 0);
+    __publicField(this, "toolbarScrollListening", false);
+    __publicField(this, "hoverOutlineTarget", null);
+    __publicField(this, "selectionOutlineTarget", null);
+    __publicField(this, "skeletonRafId", 0);
+    __publicField(this, "scheduleSkeletonRecompute", () => {
+      if (typeof requestAnimationFrame !== "function") {
+        this.recomputeSkeletonLines();
+        return;
+      }
+      if (this.skeletonRafId) return;
+      this.skeletonRafId = requestAnimationFrame(() => {
+        this.skeletonRafId = 0;
+        this.recomputeSkeletonLines();
+      });
+    });
+    /**
+     * Pointerdown on the layout toggle grip.
+     *
+     * - View mode: "arm" layout mode — the canvas morphs into GridStack, after
+     *   which the merchant drags/resizes natively. Passing THIS element (not its
+     *   id) lets the morph controller scroll + pop the exact block grabbed.
+     *   stopPropagation keeps the bridge's global-click selection — and the morph
+     *   controller's click-away exit — from also firing.
+     * - Layout mode: the grip IS GridStack's drag handle, so we do nothing here and
+     *   let the event fall through. GridStack starts the drag off `mousedown` (a
+     *   separate event from this `pointerdown`), so it is unaffected by the
+     *   toolbar's pointerdown stop; toggling back to view would abort the drag
+     *   before it begins.
+     */
+    __publicField(this, "handleMorphGrab", (e) => {
+      if (e.button !== 0) return;
+      if (canvasMode.value) return;
+      e.stopPropagation();
+      enterLayout(this);
+    });
+    __publicField(this, "handleHoverEnter", () => {
+      this.startToolbarTracking();
+      if (this.classList.contains("active")) return;
+      if (this.hasAttribute("data-juo-grid-cell")) return;
+      const target = this.paintTarget();
+      if (!target) return;
+      this.hoverOutlineTarget = target;
+      target.style.outline = "1px solid #060606";
+      target.style.outlineOffset = "0";
+    });
+    __publicField(this, "handleHoverLeave", () => {
+      this.stopToolbarTracking();
+      if (!this.hoverOutlineTarget) return;
+      this.hoverOutlineTarget.style.outline = "";
+      this.hoverOutlineTarget.style.outlineOffset = "";
+      this.hoverOutlineTarget = null;
+    });
+    /**
+     * Center the toolbar on the block's VISIBLE portion so it stays reachable when
+     * the block is taller than / partially scrolled out of the viewport. When the
+     * block is fully on screen this equals its geometric center.
+     */
+    __publicField(this, "positionToolbar", () => {
+      if (!this.toolbar) return;
+      const rect = this.getBoundingClientRect();
+      if (rect.height <= 0) return;
+      const viewportH = typeof window !== "undefined" && window.innerHeight ? window.innerHeight : rect.bottom;
+      const visibleTop = Math.max(rect.top, 0);
+      const visibleBottom = Math.min(rect.bottom, viewportH);
+      const midpoint = visibleBottom > visibleTop ? (visibleTop + visibleBottom) / 2 : rect.top + rect.height / 2;
+      const relative = Math.min(Math.max(midpoint - rect.top, 0), rect.height);
+      this.toolbar.style.top = `${relative}px`;
+    });
+    __publicField(this, "scheduleToolbarReposition", () => {
+      if (typeof requestAnimationFrame !== "function") {
+        this.positionToolbar();
+        return;
+      }
+      if (this.toolbarRafId) return;
+      this.toolbarRafId = requestAnimationFrame(() => {
+        this.toolbarRafId = 0;
+        this.positionToolbar();
+      });
+    });
+    this.attachShadow({ mode: "open" });
+    const styleElement = document.createElement("style");
+    styleElement.textContent = layoutStyles.replace(/<style>|<\/style>/g, "").trim();
+    this.shadowRoot.appendChild(styleElement);
+    this.setupTemplate();
+  }
+  static get observedAttributes() {
+    return ["data-block-id", "data-juo-grid-cell"];
+  }
+  attributeChangedCallback(name) {
+    if (name === "data-juo-grid-cell") this.scheduleSkeletonRecompute();
+  }
+  setupTemplate() {
+    const wrapper = document.createElement("div");
+    wrapper.className = "layout-block-wrapper";
+    const slotHost = document.createElement("div");
+    slotHost.className = "layout-block-wrapper__slot-host";
+    slotHost.appendChild(document.createElement("slot"));
+    wrapper.appendChild(slotHost);
+    const skeleton = document.createElement("div");
+    skeleton.className = "layout-block-wrapper__skeleton";
+    skeleton.setAttribute("aria-hidden", "true");
+    const skeletonHead = document.createElement("div");
+    skeletonHead.className = "layout-block-wrapper__skeleton-head";
+    const skeletonIcon = document.createElement("span");
+    skeletonIcon.className = "layout-block-wrapper__skeleton-icon";
+    skeletonIcon.innerHTML = blockIconSvg;
+    const skeletonTitle = document.createElement("span");
+    skeletonTitle.className = "layout-block-wrapper__skeleton-title";
+    skeletonHead.appendChild(skeletonIcon);
+    skeletonHead.appendChild(skeletonTitle);
+    const skeletonLines = document.createElement("div");
+    skeletonLines.className = "layout-block-wrapper__skeleton-lines";
+    for (let i = 0; i < 3; i++) {
+      const line = document.createElement("span");
+      line.className = "layout-block-wrapper__skeleton-line";
+      skeletonLines.appendChild(line);
+    }
+    skeleton.appendChild(skeletonHead);
+    skeleton.appendChild(skeletonLines);
+    wrapper.appendChild(skeleton);
+    this.skeletonTitle = skeletonTitle;
+    this.skeletonLines = skeletonLines;
+    const toolbar = this.buildToolbar();
+    wrapper.appendChild(toolbar);
+    this.toolbar = toolbar;
+    this.shadowRoot.appendChild(wrapper);
+    this.editorBridge.onMessage((message) => {
+      var _a;
+      if (message.type === "SELECT_BLOCK") {
+        this.updateActiveState(message.payload.blockId === ((_a = this.block) == null ? void 0 : _a.id));
+      }
+    });
+  }
+  /**
+   * Build the center hover toolbar. Buttons (left→right): layout toggle (grip,
+   * leading), add-below, delete, fill-horizontal.
+   * pointerdown/click are stopped at the container so selecting a tool never
+   * bubbles to the bridge's global-click selection.
+   */
+  buildToolbar() {
+    const toolbar = document.createElement("div");
+    toolbar.className = "layout-block-wrapper__toolbar";
+    toolbar.setAttribute("role", "toolbar");
+    toolbar.setAttribute("aria-label", "Block actions");
+    toolbar.addEventListener("pointerdown", (e) => e.stopPropagation());
+    toolbar.addEventListener("click", (e) => e.stopPropagation());
+    const toggle = this.createToolButton(
+      layoutToggleSvg,
+      "Edit layout",
+      "layout-block-wrapper__tool-btn--toggle"
+    );
+    toggle.addEventListener(
+      "pointerdown",
+      (e) => this.handleMorphGrab(e)
+    );
+    const grip = this.createToolButton(
+      dragGripSvg,
+      "Drag to reposition",
+      "layout-block-wrapper__tool-btn--grip"
+    );
+    grip.addEventListener(
+      "pointerdown",
+      (e) => this.handleMorphGrab(e)
+    );
+    const addBtn = this.createToolButton(
+      addCircleOutlineSvg,
+      "Add block below",
+      "layout-block-wrapper__tool-btn--add"
+    );
+    addBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.handleAddBelow(addBtn);
+    });
+    const deleteBtn = this.createToolButton(trashIconSvg, "Delete block");
+    deleteBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.handleRemoveBlock();
+    });
+    const fillH = this.createToolButton(
+      fillHorizontalSvg,
+      "Fill horizontally",
+      "layout-block-wrapper__tool-btn--fill-h"
+    );
+    fillH.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.handleFillWidth();
+    });
+    toolbar.append(toggle, grip, addBtn, fillH, deleteBtn);
+    return toolbar;
+  }
+  createToolButton(svg, label, extraClass) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "layout-block-wrapper__tool-btn";
+    if (extraClass) btn.classList.add(extraClass);
+    btn.setAttribute("aria-label", label);
+    btn.setAttribute("title", label);
+    btn.innerHTML = svg;
+    return btn;
+  }
+  /** Open the add-block menu anchored to the toolbar button, inserting AFTER. */
+  handleAddBelow(button) {
+    if (!this.block) return;
+    const rect = button.getBoundingClientRect();
+    this.editorBridge.sendMessage(
+      createOpenAddBlockMenuMessage({
+        targetBlockId: this.block.id,
+        position: "after",
+        anchor: { x: rect.right, y: rect.top }
+      })
+    );
+  }
+  /**
+   * Traverse up the DOM (crossing shadow-root boundaries) to resolve the
+   * containing block wrapper's id, then send REMOVE_BLOCK. Mirrors the legacy
+   * wrapper's removal, but recognizes either wrapper tag (grid nesting uses the
+   * layout wrapper).
+   */
+  handleRemoveBlock() {
+    if (!this.block) return;
+    const extensionRoot = this.closest("juo-extension-root");
+    const slotName = (extensionRoot == null ? void 0 : extensionRoot.getAttribute("name")) || "default";
+    let parentId = "root";
+    let current = this;
+    while (current) {
+      const parent = this.getParentElement(current);
+      if (!parent) break;
+      if (parent !== this && isBlockWrapperTag(parent.tagName)) {
+        const parentBlockId = parent.getAttribute("data-block-id");
+        if (parentBlockId) {
+          parentId = parentBlockId;
+          break;
+        }
+      }
+      current = parent;
+    }
+    this.editorBridge.sendMessage(
+      createRemoveBlockMessage(
+        { blockId: this.block.id, location: { slot: slotName, parentId } },
+        this.block.id
+      )
+    );
+  }
+  /** Resolve the parent element, crossing shadow-root boundaries. */
+  getParentElement(element) {
+    const root = element.getRootNode();
+    if (root instanceof ShadowRoot) return root.host;
+    return element.parentElement;
+  }
+  /**
+   * Toggle the block's sticky fill flag. Emitted as a layout command; the parent
+   * engine flips the flag, expands the block into its free row-band space, pushes
+   * the change to history + re-syncs the iframe.
+   */
+  handleFillWidth() {
+    if (!this.block) return;
+    const surface = this.closest(
+      'juo-extension-root[surface="overlay"]'
+    ) ? "overlay" : "page";
+    const ctx = getActiveSurfaceContext(surface);
+    if (!ctx) return;
+    emitLayoutCommand({
+      surface,
+      id: ctx.id,
+      command: { kind: "fillWidth", blockId: this.block.id }
+    });
+  }
+  connectedCallback() {
+    const isInOverlay = this.closest('juo-extension-root[surface="overlay"]') !== null;
+    if (isInOverlay && this.toolbar) {
+      this.toolbar.style.display = "none";
+    }
+    const isWorkflowPreview = (() => {
+      try {
+        const params = new URLSearchParams(window.location.search);
+        return params.get("workflow-mode") === "true";
+      } catch {
+        return false;
+      }
+    })();
+    if (isWorkflowPreview && !isInOverlay) {
+      this.style.pointerEvents = "none";
+    }
+    this.addEventListener("mouseenter", this.handleHoverEnter);
+    this.addEventListener("mouseleave", this.handleHoverLeave);
+    if (typeof ResizeObserver !== "undefined" && this.skeletonLines) {
+      this.skeletonResizeObserver = new ResizeObserver(
+        this.scheduleSkeletonRecompute
+      );
+      this.skeletonResizeObserver.observe(this.skeletonLines);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    this.stopToolbarTracking();
+    (_a = this.skeletonResizeObserver) == null ? void 0 : _a.disconnect();
+    this.skeletonResizeObserver = null;
+    if (this.skeletonRafId) {
+      cancelAnimationFrame(this.skeletonRafId);
+      this.skeletonRafId = 0;
+    }
+  }
+  startToolbarTracking() {
+    this.positionToolbar();
+    if (this.toolbarScrollListening || typeof window === "undefined") return;
+    this.toolbarScrollListening = true;
+    window.addEventListener("scroll", this.scheduleToolbarReposition, true);
+    window.addEventListener("resize", this.scheduleToolbarReposition);
+  }
+  stopToolbarTracking() {
+    if (this.toolbarScrollListening && typeof window !== "undefined") {
+      this.toolbarScrollListening = false;
+      window.removeEventListener("scroll", this.scheduleToolbarReposition, true);
+      window.removeEventListener("resize", this.scheduleToolbarReposition);
+    }
+    if (this.toolbarRafId) {
+      cancelAnimationFrame(this.toolbarRafId);
+      this.toolbarRafId = 0;
+    }
+  }
+  paintTarget() {
+    const slotted = this.firstElementChild;
+    if (!slotted || slotted.hasAttribute("data-empty")) return null;
+    return resolveOutlineTarget(slotted);
+  }
+  updateActiveState(isActive) {
+    if (isActive) {
+      this.classList.add("active");
+      this.handleHoverLeave();
+      if (this.hasAttribute("data-juo-grid-cell")) return;
+      const target = this.paintTarget();
+      if (!target) return;
+      this.selectionOutlineTarget = target;
+      target.style.outline = "2px solid #060606";
+      target.style.outlineOffset = "0";
+    } else {
+      this.classList.remove("active");
+      if (this.selectionOutlineTarget) {
+        this.selectionOutlineTarget.style.outline = "";
+        this.selectionOutlineTarget.style.outlineOffset = "";
+        this.selectionOutlineTarget = null;
+      }
+    }
+  }
+  /**
+   * Match the placeholder bars to the (dynamic) cell height. Bars are a fixed
+   * height with a uniform gap and stay top-aligned under the header, so every
+   * skeleton reads identically. The count scales gently with height but is
+   * halved and capped so tall cells don't fill with noise; very short cells
+   * (< 2 bars) drop the bars entirely and show just the header. Count depends
+   * only on the cell height (not on the bars), so there is no measure→mutate
+   * feedback loop.
+   */
+  recomputeSkeletonLines() {
+    var _a;
+    if (!this.skeletonLines) return;
+    if (!this.hasAttribute("data-juo-grid-cell")) return;
+    const avail = this.skeletonLines.clientHeight;
+    if (avail <= 0) return;
+    const { SKELETON_LINE_H: LINE_H, SKELETON_GAP: GAP, SKELETON_MAX_BARS: MAX } = _LayoutBlockWrapper;
+    const fit = Math.floor((avail + GAP) / (LINE_H + GAP));
+    const count = fit < 2 ? 0 : Math.min(MAX, Math.max(2, Math.round(fit / 2)));
+    const current = this.skeletonLines.childElementCount;
+    if (count > current) {
+      for (let i = current; i < count; i++) {
+        const line = document.createElement("span");
+        line.className = "layout-block-wrapper__skeleton-line";
+        this.skeletonLines.appendChild(line);
+      }
+    } else if (count < current) {
+      for (let i = current; i > count; i--) {
+        (_a = this.skeletonLines.lastElementChild) == null ? void 0 : _a.remove();
+      }
+    }
+    this.applyBarWidths();
+  }
+  /**
+   * Stable offset into {@link LayoutBlockWrapper.SKELETON_BAR_WIDTHS} derived
+   * from the block type, so each block type has its own width rhythm and
+   * adjacent (differently-typed) blocks don't line up.
+   */
+  skeletonWidthOffset() {
+    var _a;
+    const key = ((_a = this.block) == null ? void 0 : _a.definition.name) ?? "";
+    let hash = 0;
+    for (let i = 0; i < key.length; i++) {
+      hash = hash * 31 + key.charCodeAt(i) >>> 0;
+    }
+    return hash % _LayoutBlockWrapper.SKELETON_BAR_WIDTHS.length;
+  }
+  /** Assign each bar its width from the block-type-seeded sequence. */
+  applyBarWidths() {
+    if (!this.skeletonLines) return;
+    const widths = _LayoutBlockWrapper.SKELETON_BAR_WIDTHS;
+    const offset = this.skeletonWidthOffset();
+    const bars = this.skeletonLines.children;
+    for (let i = 0; i < bars.length; i++) {
+      bars[i].style.width = `${widths[(offset + i) % widths.length]}%`;
+    }
+  }
+  setBlock(block) {
+    this.block = block;
+    this.setAttribute("data-block-id", block.id);
+    if (this.skeletonTitle) {
+      this.skeletonTitle.textContent = getBlockLabel(block);
+    }
+    this.applyBarWidths();
+  }
+};
+/**
+ * Height-tiers for the placeholder bar count. Deliberately sparse: the bars
+ * are a hint at "a block lives here", not a faithful line count, so we show
+ * few and cap hard to avoid a noisy wall of identical bars on tall blocks.
+ * Cells too short for >= 2 bars render header-only (no lonely single bar).
+ */
+__publicField(_LayoutBlockWrapper, "SKELETON_LINE_H", 12);
+__publicField(_LayoutBlockWrapper, "SKELETON_GAP", 12);
+__publicField(_LayoutBlockWrapper, "SKELETON_MAX_BARS", 4);
+/**
+ * Per-block width sequence. Widths are read from this palette starting at a
+ * block-type-seeded offset so neighbouring blocks of different types get a
+ * different width rhythm (deterministic — the same block type always renders
+ * the same sequence). Chosen to look like varied text lines, none too short.
+ */
+__publicField(_LayoutBlockWrapper, "SKELETON_BAR_WIDTHS", [
+  92,
+  68,
+  84,
+  58,
+  96,
+  74,
+  88,
+  62
+]);
+let LayoutBlockWrapper = _LayoutBlockWrapper;
+if (customElements.get(LAYOUT_BLOCK_WRAPPER_TAG) == null) {
+  customElements.define(LAYOUT_BLOCK_WRAPPER_TAG, LayoutBlockWrapper);
+}
 async function serializeBlock(block) {
   let initialValue = block.initialValue;
   if (typeof initialValue === "function") {
@@ -1157,7 +1955,7 @@ async function serializeBlock(block) {
         }
       })
     );
-    const loaded = entries.filter((e2) => e2 !== null);
+    const loaded = entries.filter((e) => e !== null);
     if (loaded.length > 0) {
       locales = Object.fromEntries(loaded);
     }
@@ -1194,6 +1992,19 @@ async function setupEditorMode(deps) {
   const handler = createEditorHandler({
     themeState
   });
+  setLayoutCommandEmitter(({ surface, id, rects, breakpoint }) => {
+    editor.sendMessage(
+      createLayoutCommandMessage({
+        surface,
+        id,
+        command: { kind: "setRects", rects },
+        breakpoint
+      })
+    );
+  });
+  setLayoutCommandDispatcher(({ surface, id, command }) => {
+    editor.sendMessage(createLayoutCommandMessage({ surface, id, command }));
+  });
   const { unsubscribe } = editor.onMessage((message) => {
     handler.handleMessage(message);
   });
@@ -1218,42 +2029,56 @@ async function setupEditorMode(deps) {
     unsubscribeRegister();
     unsubscribe();
     editor.destroy();
+    setLayoutCommandEmitter(null);
+    setLayoutCommandDispatcher(null);
+    clearAllSurfaceContexts();
   };
 }
 export {
   BlockWrapper,
   EDITOR_BODY_BOTTOM_PADDING_PX,
   EDITOR_BODY_TOP_PADDING_PX,
+  LayoutBlockWrapper,
   buildEditorCanvasStyleContent,
-  j as createAddBlockMenuClosedMessage,
-  k as createAddBlockMessage,
+  canvasMode2 as canvasMode,
+  k as createAddBlockMenuClosedMessage,
+  l as createAddBlockMessage,
   createEditorBridge,
   createEditorHandler,
-  b as createFocusInlineTextMessage,
-  l as createMoveBlockMessage,
+  m as createFocusInlineTextMessage,
+  createLayoutCommandMessage,
+  c as createLayoutingModeChangedMessage,
+  n as createMoveBlockMessage,
   createOpenAddBlockMenuMessage,
-  m as createProvideGlobalStylesMessage,
-  n as createProvideInitialGlobalStylesMessage,
-  o as createProvideThemeStateMessage,
-  p as createProvideTranslationOverridesMessage,
-  c as createRegisterBlockTranslationKeysMessage,
+  o as createProvideGlobalStylesMessage,
+  p as createProvideInitialGlobalStylesMessage,
+  q as createProvideLayoutDocumentMessage,
+  s as createProvideLayoutMessage,
+  t as createProvideThemeStateMessage,
+  u as createProvideTranslationOverridesMessage,
+  v as createRegisterBlockTranslationKeysMessage,
   createRegisterBlocksMessage,
   createRegisterRoutesMessage,
   createRemoveBlockMessage,
-  q as createReportContentHeightMessage,
-  r as createRequestGlobalStylesMessage,
-  s as createRequestThemeStateMessage,
-  t as createRequestTranslationOverridesMessage,
-  u as createScrollSyncMessage,
-  e as createSelectBlockMessage,
-  v as createSetBlockPresetMessage,
-  w as createSetGlobalStylesMessage,
-  x as createSetLocaleMessage,
-  y as createUpdateBlockPropsMessage,
-  d as createUpdateBlockTranslationMessage,
-  z as createUpsertThemeStateMessage,
-  A as getEditorBridge,
-  B as isEditorMessage,
-  C as isIframeMessage,
+  w as createReportBlockContentSizeMessage,
+  x as createReportContentHeightMessage,
+  y as createRequestCloseAddBlockMenuMessage,
+  z as createRequestGlobalStylesMessage,
+  A as createRequestThemeStateMessage,
+  B as createRequestTranslationOverridesMessage,
+  C as createScrollSyncMessage,
+  D as createSelectBlockMessage,
+  E as createSetBlockPresetMessage,
+  F as createSetGlobalStylesMessage,
+  G as createSetLayoutingModeMessage,
+  H as createSetLocaleMessage,
+  I as createUpdateBlockPropsMessage,
+  J as createUpdateBlockTranslationMessage,
+  K as createUpsertThemeStateMessage,
+  g as getEditorBridge,
+  M as isEditorMessage,
+  N as isIframeMessage,
+  r as resetCanvasMode,
+  setCanvasMode,
   setupEditorMode
 };