@jxsuite/studio 0.10.2 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/runtime": "^0.10.1",
+    "@jxsuite/runtime": "^0.10.2",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",
@@ -58,6 +58,7 @@
     "@spectrum-web-components/tabs": "^1.12.1",
     "@spectrum-web-components/textfield": "^1.12.1",
     "@spectrum-web-components/theme": "^1.12.1",
+    "@spectrum-web-components/toast": "^1.12.1",
     "@spectrum-web-components/tooltip": "^1.12.1",
     "lit-html": "^3.3.3",
     "monaco-editor": "^0.55.1",

package/src/browse/browse.js

@@ -95,11 +95,14 @@ async function collectFiles(dir, platform) {
         results.push(...sub);
       } else {
         const ext = extOf(entry.name);
+        const category = categoryFor(entry.path, ext);
+        const type =
+          category === "Content" ? contentTypeFor(entry.path) || ext || "file" : ext || "file";
         results.push({
           name: entry.name,
           path: entry.path,
-          type: ext || "file",
-          category: categoryFor(entry.path, ext),
+          type,
+          category,
           ext,
         });
       }
@@ -110,6 +113,27 @@ async function collectFiles(dir, platform) {
   return results;
 }
 
+/**
+ * Match a file path against project contentTypes source globs to find its content type name.
+ * Returns the content type name (capitalized) or null if no match.
+ *
+ * @param {string} filePath
+ * @returns {string | null}
+ */
+function contentTypeFor(filePath) {
+  const config = projectState?.projectConfig;
+  if (!config?.contentTypes) return null;
+  for (const [name, def] of Object.entries(config.contentTypes)) {
+    const d = /** @type {any} */ (def);
+    if (!d.source) continue;
+    const prefix = d.source.replace(/^\.\//, "").split("/**")[0].split("/*")[0];
+    if (filePath.startsWith(prefix + "/") || filePath === prefix) {
+      return name.charAt(0).toUpperCase() + name.slice(1);
+    }
+  }
+  return null;
+}
+
 // ─── Data loading ────────────────────────────────────────────────────────────
 
 async function loadFiles() {
@@ -376,7 +400,7 @@ export async function renderBrowse(container, ctx) {
                 >
                   <sp-table-cell class="browse-name-cell">${f.name}</sp-table-cell>
                   <sp-table-cell>${f.category}</sp-table-cell>
-                  <sp-table-cell>${f.ext || "—"}</sp-table-cell>
+                  <sp-table-cell>${f.type}</sp-table-cell>
                   <sp-table-cell class="browse-path-cell">${f.path}</sp-table-cell>
                 </sp-table-row>
               `,

package/src/canvas/canvas-live-render.js

@@ -6,12 +6,20 @@
 
 import { elToPath, stripEventHandlers, projectState } from "../store.js";
 import { view } from "../view.js";
-import { renderNode as runtimeRenderNode, buildScope, defineElement } from "@jxsuite/runtime";
+import {
+  renderNode as runtimeRenderNode,
+  buildScope,
+  defineElement,
+  setSkipServerFunctions,
+} from "@jxsuite/runtime";
 import {
   getEffectiveElements,
   getEffectiveImports,
   getEffectiveMedia,
   getEffectiveHead,
+  getEffectiveLayoutPath,
+  resolveLayoutDoc,
+  distributePageIntoLayout,
 } from "../site-context.js";
 import { componentRegistry, computeRelativePath } from "../files/components.js";
 import { prepareForEditMode } from "../utils/edit-display.js";
@@ -20,6 +28,56 @@ import { getActiveElement } from "../editor/inline-edit.js";
 /** @type {any} */
 let _ctx = null;
 
+/** Set of DOM elements that originated from the layout (not page content). */
+export const layoutElements = new WeakSet();
+
+/**
+ * Walk the merged document tree to find the path prefix where page children were distributed into
+ * the layout slot. Returns the path to the container whose children are the page content (first
+ * non-$__layout children array).
+ *
+ * @param {any} node
+ * @param {any[]} [path]
+ * @returns {any[] | null}
+ */
+function findPageContentPrefix(node, path = []) {
+  if (!node || typeof node !== "object") return null;
+  if (Array.isArray(node.children)) {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      if (child && typeof child === "object" && !child.$__layout) {
+        return [...path, "children"];
+      }
+    }
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      if (child && typeof child === "object" && child.$__layout) {
+        const found = findPageContentPrefix(child, [...path, "children", i]);
+        if (found) return found;
+      }
+    }
+  }
+  return null;
+}
+
+/** The path of the currently active layout file, or null. */
+export let activeLayoutPath = /** @type {string | null} */ (null);
+
+/**
+ * Recursively mark all nodes in a layout doc tree with $__layout: true so we can identify which
+ * rendered DOM elements came from the layout vs page content.
+ */
+function markLayoutNodes(/** @type {any} */ node) {
+  if (!node || typeof node !== "object") return;
+  node.$__layout = true;
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) markLayoutNodes(child);
+  }
+  if (node.$elements) {
+    for (const el of node.$elements) markLayoutNodes(el);
+  }
+}
+
 /**
  * Initialize the canvas live render module.
  *
@@ -45,9 +103,46 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
   const S = _ctx.getState();
   const canvasMode = _ctx.getCanvasMode();
 
-  const renderDoc =
+  // Suppress server function resolution in non-preview modes to avoid
+  // failed proxy calls and infinite reactive retries (also covers
+  // async custom element connectedCallbacks that run after this function returns)
+  setSkipServerFunctions(canvasMode !== "preview");
+
+  let renderDoc =
     canvasMode === "preview" ? structuredClone(doc) : prepareForEditMode(stripEventHandlers(doc));
 
+  // ─── Layout wrapping ────────────────────────────────────────────────────
+  // For page documents, resolve the layout and wrap content in the layout shell.
+  // Layout-originated nodes are marked with $__layout so we can distinguish them.
+  let layoutWrapped = false;
+  activeLayoutPath = null;
+
+  const isPage =
+    S.documentPath &&
+    projectState?.isSiteProject &&
+    (S.documentPath.startsWith("pages/") || S.documentPath.startsWith("./pages/"));
+
+  /** @type {any[] | null} Path prefix in merged doc where page children live */
+  let pageContentPrefix = null;
+
+  if (isPage) {
+    const layoutPath = getEffectiveLayoutPath(doc.$layout);
+    if (layoutPath) {
+      const layoutDoc = await resolveLayoutDoc(layoutPath);
+      if (layoutDoc) {
+        if (gen !== view.renderGeneration) return null;
+        activeLayoutPath = layoutPath.replace(/^\.\//, "");
+        markLayoutNodes(layoutDoc);
+        const pageForSlots = canvasMode === "preview" ? structuredClone(doc) : renderDoc;
+        const merged = distributePageIntoLayout(layoutDoc, pageForSlots);
+        renderDoc =
+          canvasMode === "preview" ? merged : prepareForEditMode(stripEventHandlers(merged));
+        layoutWrapped = true;
+        pageContentPrefix = findPageContentPrefix(merged);
+      }
+    }
+  }
+
   // In edit mode, collect paths where $map templates were inlined as children[0]
   // so we can remap runtime paths (children,0,...) → (children,map,...)
   const mapParentPaths = new Set();
@@ -224,26 +319,49 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     if (gen !== view.renderGeneration) return null;
     const el = /** @type {HTMLElement} */ (
       runtimeRenderNode(renderDoc, $defs, {
-        onNodeCreated(/** @type {any} */ el, /** @type {any} */ path) {
+        onNodeCreated(/** @type {any} */ el, /** @type {any} */ path, /** @type {any} */ def) {
+          // Track layout-originated elements — don't store in elToPath to avoid
+          // path collisions with remapped page content paths
+          if (layoutWrapped && def?.$__layout) {
+            layoutElements.add(el);
+            if (el.setAttribute) el.setAttribute("data-jx-layout", "");
+            return;
+          }
+
+          // Remap layout-wrapped paths: strip the layout prefix so paths are
+          // relative to the original page document (which is what S.document holds)
+          let mappedPath = path;
+          if (layoutWrapped && pageContentPrefix) {
+            const pfx = pageContentPrefix;
+            if (
+              path.length >= pfx.length &&
+              pfx.every((/** @type {any} */ seg, /** @type {number} */ i) => path[i] === seg)
+            ) {
+              mappedPath = ["children", ...path.slice(pfx.length)];
+            }
+          }
+
           // Remap $map paths: wrapper and template children → real document paths
           // prepareForEditMode wraps $map template in: children[0] (wrapper) > children[0] (template)
           // Real paths: wrapper → ['children'] ($map container), template → ['children', 'map']
-          let mappedPath = path;
           if ((canvasMode === "design" || canvasMode === "edit") && mapParentPaths.size > 0) {
-            for (let i = 0; i < path.length - 1; i++) {
-              if (path[i] === "children" && path[i + 1] === 0) {
-                const parentKey = path.slice(0, i).join("/");
+            for (let i = 0; i < mappedPath.length - 1; i++) {
+              if (mappedPath[i] === "children" && mappedPath[i + 1] === 0) {
+                const parentKey = mappedPath.slice(0, i).join("/");
                 if (mapParentPaths.has(parentKey)) {
-                  if (path.length === i + 2) {
-                    // Wrapper div itself → $map container path
-                    mappedPath = path.slice(0, i + 1);
+                  if (mappedPath.length === i + 2) {
+                    mappedPath = mappedPath.slice(0, i + 1);
                   } else if (
-                    path.length >= i + 4 &&
-                    path[i + 2] === "children" &&
-                    path[i + 3] === 0
+                    mappedPath.length >= i + 4 &&
+                    mappedPath[i + 2] === "children" &&
+                    mappedPath[i + 3] === 0
                   ) {
-                    // Template or its descendants → children/map/...rest
-                    mappedPath = [...path.slice(0, i), "children", "map", ...path.slice(i + 4)];
+                    mappedPath = [
+                      ...mappedPath.slice(0, i),
+                      "children",
+                      "map",
+                      ...mappedPath.slice(i + 4),
+                    ];
                   }
                   break;
                 }

package/src/canvas/canvas-render.js

@@ -249,10 +249,11 @@ export function renderCanvas() {
       resetZoomIndicator();
     }
 
+    const { baseWidth } = parseMediaEntries(getEffectiveMedia(S.document.$media));
     const { tpl: panelTpl, panel } = canvasPanelTemplate(null, null, true);
     const editTpl = html`
       <div class="content-edit-canvas">
-        <div class="content-edit-column">${panelTpl}</div>
+        <div class="content-edit-column" style="max-width:${baseWidth}px">${panelTpl}</div>
       </div>
     `;
     litRender(editTpl, canvasWrap);

package/src/panels/canvas-dnd.js

@@ -20,19 +20,39 @@ import { view } from "../view.js";
 import { applyDropInstruction } from "../panels/dnd.js";
 import { effectiveZoom } from "../canvas/canvas-helpers.js";
 
+/**
+ * @typedef {{
+ *   canvas: HTMLElement;
+ *   overlayClk: HTMLElement;
+ *   overlay: HTMLElement;
+ *   viewport: HTMLElement;
+ *   dropLine: HTMLElement;
+ * }} CanvasPanel
+ *
+ * @typedef {(string | number)[]} JxPath
+ *
+ * @typedef {{ type: "reorder-above" | "reorder-below" | "make-child" }} DropInstruction
+ *
+ * @typedef {{ instruction: DropInstruction; referenceEl: HTMLElement; targetPath: JxPath }} DropResult
+ */
+
+/** @type {HTMLElement | null} */
+let _activeDropEl = null;
+
 /**
  * Register all canvas elements in a panel as DnD drop targets.
  *
- * @param {any} panel
+ * @param {CanvasPanel} panel
  */
 export function registerPanelDnD(panel) {
   const { canvas, dropLine } = panel;
   const allEls = canvas.querySelectorAll("*");
 
   const monitorCleanup = monitorForElements({
-    onDragStart() {
+    onDragStart({ location }) {
+      view.lastDragInput = location.current.input;
       for (const el of canvas.querySelectorAll("*")) {
-        /** @type {any} */ (el).style.pointerEvents = "auto";
+        /** @type {HTMLElement} */ (el).style.pointerEvents = "auto";
       }
       for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "none";
     },
@@ -40,10 +60,12 @@ export function registerPanelDnD(panel) {
       view.lastDragInput = location.current.input;
     },
     onDrop() {
+      _activeDropEl?.classList.remove("canvas-drop-target");
+      _activeDropEl = null;
       for (const p of canvasPanels) p.dropLine.style.display = "none";
       view.lastDragInput = null;
       for (const el of canvas.querySelectorAll("*")) {
-        /** @type {any} */ (el).style.pointerEvents = "none";
+        /** @type {HTMLElement} */ (el).style.pointerEvents = "none";
       }
       for (const p of canvasPanels) p.overlayClk.style.pointerEvents = "";
     },
@@ -56,34 +78,45 @@ export function registerPanelDnD(panel) {
     if (!elPath) continue;
 
     const node = getNodeAtPath(S.document, elPath);
-    const isVoid = VOID_ELEMENTS.has((node?.tagName || "div").toLowerCase());
+    const tag = (node?.tagName || "div").toLowerCase();
+    const hasElementChildren = node?.children?.some(
+      (/** @type {unknown} */ c) => c != null && typeof c === "object",
+    );
+    const isLeaf = VOID_ELEMENTS.has(tag) || !hasElementChildren;
 
     const cleanup = dropTargetForElements({
-      element: el,
+      element: /** @type {HTMLElement} */ (el),
       canDrop({ source }) {
-        const srcPath = source.data.path;
-        if (srcPath && isAncestor(/** @type {any} */ (srcPath), elPath)) return false;
+        const srcPath = /** @type {JxPath | undefined} */ (source.data.path);
+        if (srcPath && isAncestor(srcPath, elPath)) return false;
         return true;
       },
       getData() {
-        return { path: elPath, _isVoid: isVoid };
-      },
-      onDragEnter() {
-        showCanvasDropIndicator(el, elPath, isVoid, panel);
+        return { path: elPath, _isVoid: isLeaf };
       },
-      onDrag() {
-        showCanvasDropIndicator(el, elPath, isVoid, panel);
+      onDragEnter({ location }) {
+        view.lastDragInput = location.current.input;
+        if (_activeDropEl && _activeDropEl !== el) {
+          _activeDropEl.classList.remove("canvas-drop-target");
+        }
+        _activeDropEl = /** @type {HTMLElement} */ (el);
+        showCanvasDropIndicator(/** @type {HTMLElement} */ (el), elPath, isLeaf, panel);
       },
-      onDragLeave() {
-        dropLine.style.display = "none";
-        el.classList.remove("canvas-drop-target");
+      onDrag({ location }) {
+        view.lastDragInput = location.current.input;
+        showCanvasDropIndicator(/** @type {HTMLElement} */ (el), elPath, isLeaf, panel);
       },
+      onDragLeave() {},
       onDrop({ source }) {
         dropLine.style.display = "none";
-        el.classList.remove("canvas-drop-target");
-        const instruction = getCanvasDropInstruction(el, elPath, isVoid);
-        if (!instruction) return;
-        applyDropInstruction(instruction, source.data, elPath);
+        /** @type {HTMLElement} */ (el).classList.remove("canvas-drop-target");
+        _activeDropEl = null;
+        const { instruction, targetPath } = getCanvasDropResult(
+          /** @type {HTMLElement} */ (el),
+          elPath,
+          isLeaf,
+        );
+        applyDropInstruction(instruction, source.data, targetPath);
       },
     });
     view.canvasDndCleanups.push(cleanup);
@@ -91,49 +124,98 @@ export function registerPanelDnD(panel) {
 }
 
 /**
- * @param {any} el
- * @param {any} elPath
- * @param {any} isVoid
+ * @param {HTMLElement} el
+ * @param {JxPath} elPath
+ * @param {boolean} isLeaf
+ * @returns {DropResult}
  */
-function getCanvasDropInstruction(el, elPath, isVoid) {
-  const rect = el.getBoundingClientRect();
-  if (!view.lastDragInput) return null;
+function getCanvasDropResult(el, elPath, isLeaf) {
+  if (!view.lastDragInput)
+    return { instruction: { type: "make-child" }, referenceEl: el, targetPath: elPath };
   const y = view.lastDragInput.clientY;
+
+  if (elPath.length === 0) {
+    const children = /** @type {HTMLElement[]} */ (Array.from(el.children));
+    if (children.length === 0)
+      return { instruction: { type: "make-child" }, referenceEl: el, targetPath: elPath };
+    return nearestChildEdge(children, y, elPath);
+  }
+
+  const rect = el.getBoundingClientRect();
   const relY = (y - rect.top) / rect.height;
 
-  if (elPath.length === 0) return { type: "make-child" };
-  if (isVoid) return relY < 0.5 ? { type: "reorder-above" } : { type: "reorder-below" };
-  if (relY < 0.25) return { type: "reorder-above" };
-  if (relY > 0.75) return { type: "reorder-below" };
-  return { type: "make-child" };
+  if (isLeaf) {
+    const instruction =
+      relY < 0.5
+        ? { type: /** @type {const} */ ("reorder-above") }
+        : { type: /** @type {const} */ ("reorder-below") };
+    return { instruction, referenceEl: el, targetPath: elPath };
+  }
+
+  if (relY < 0.25)
+    return { instruction: { type: "reorder-above" }, referenceEl: el, targetPath: elPath };
+  if (relY > 0.75)
+    return { instruction: { type: "reorder-below" }, referenceEl: el, targetPath: elPath };
+  return { instruction: { type: "make-child" }, referenceEl: el, targetPath: elPath };
 }
 
 /**
- * @param {any} el
- * @param {any} elPath
- * @param {any} isVoid
- * @param {any} panel
+ * Find the nearest child edge to the cursor and return the appropriate instruction along with the
+ * reference child element and its path.
+ *
+ * @param {HTMLElement[]} children
+ * @param {number} cursorY
+ * @param {JxPath} parentPath
+ * @returns {DropResult}
  */
-function showCanvasDropIndicator(el, elPath, isVoid, panel) {
-  const instruction = getCanvasDropInstruction(el, elPath, isVoid);
-  const { dropLine, viewport } = panel;
-  if (!instruction) {
-    dropLine.style.display = "none";
-    return;
+function nearestChildEdge(children, cursorY, parentPath) {
+  let closestDist = Infinity;
+  let instruction = /** @type {DropInstruction} */ ({ type: "reorder-below" });
+  let closestIdx = children.length - 1;
+
+  for (let i = 0; i < children.length; i++) {
+    const rect = children[i].getBoundingClientRect();
+    const topDist = Math.abs(cursorY - rect.top);
+    const bottomDist = Math.abs(cursorY - rect.bottom);
+
+    if (topDist < closestDist) {
+      closestDist = topDist;
+      instruction = { type: "reorder-above" };
+      closestIdx = i;
+    }
+    if (bottomDist < closestDist) {
+      closestDist = bottomDist;
+      instruction = { type: "reorder-below" };
+      closestIdx = i;
+    }
   }
 
+  const childPath = [...parentPath, "children", closestIdx];
+  return { instruction, referenceEl: children[closestIdx], targetPath: childPath };
+}
+
+/**
+ * @param {HTMLElement} el
+ * @param {JxPath} elPath
+ * @param {boolean} isLeaf
+ * @param {CanvasPanel} panel
+ */
+function showCanvasDropIndicator(el, elPath, isLeaf, panel) {
+  const { instruction, referenceEl } = getCanvasDropResult(el, elPath, isLeaf);
+  const { dropLine, viewport } = panel;
+
   const scale = effectiveZoom();
   const wrapRect = viewport.getBoundingClientRect();
-  const elRect = el.getBoundingClientRect();
-  const left = (elRect.left - wrapRect.left + viewport.scrollLeft) / scale;
-  const width = elRect.width / scale;
+  const refRect = referenceEl.getBoundingClientRect();
+  const left = (refRect.left - wrapRect.left + viewport.scrollLeft) / scale;
+  const width = refRect.width / scale;
 
   if (instruction.type === "make-child") {
     dropLine.style.display = "block";
-    dropLine.style.top = `${(elRect.top - wrapRect.top + viewport.scrollTop) / scale}px`;
+    dropLine.style.top = `${(refRect.top - wrapRect.top + viewport.scrollTop) / scale}px`;
     dropLine.style.left = `${left}px`;
     dropLine.style.width = `${width}px`;
-    dropLine.style.height = `${elRect.height / scale}px`;
+    dropLine.style.height = `${refRect.height / scale}px`;
     dropLine.className = "canvas-drop-indicator inside";
     el.classList.add("canvas-drop-target");
     return;
@@ -142,13 +224,13 @@ function showCanvasDropIndicator(el, elPath, isVoid, panel) {
   el.classList.remove("canvas-drop-target");
   const top =
     instruction.type === "reorder-above"
-      ? (elRect.top - wrapRect.top + viewport.scrollTop) / scale
-      : (elRect.bottom - wrapRect.top + viewport.scrollTop) / scale;
+      ? (refRect.top - wrapRect.top + viewport.scrollTop) / scale
+      : (refRect.bottom - wrapRect.top + viewport.scrollTop) / scale;
 
   dropLine.style.display = "block";
   dropLine.style.top = `${top}px`;
   dropLine.style.left = `${left}px`;
   dropLine.style.width = `${width}px`;
-  dropLine.style.height = "2px";
+  dropLine.style.height = "";
   dropLine.className = "canvas-drop-indicator line";
 }

package/src/panels/overlays.js

@@ -11,6 +11,7 @@ import {
   getActivePanel,
   overlayBoxDescriptor,
 } from "../canvas/canvas-helpers.js";
+import { layoutElements } from "../canvas/canvas-live-render.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -85,7 +86,11 @@ export function render() {
 
     if (S.hover && !pathsEqual(S.hover, S.selection)) {
       const el = findCanvasElement(S.hover, p.canvas);
-      if (el) boxes.push(overlayBoxDescriptor(el, "hover", p));
+      if (el) {
+        const desc = overlayBoxDescriptor(el, "hover", p);
+        if (layoutElements.has(el)) /** @type {any} */ (desc).isLayout = true;
+        boxes.push(desc);
+      }
     }
 
     if (S.selection && p === getActivePanel()) {
@@ -93,6 +98,7 @@ export function render() {
       if (el) {
         const desc = overlayBoxDescriptor(el, "selection", p);
         if (view.componentInlineEdit || _ctx.isEditing()) /** @type {any} */ (desc).border = "none";
+        if (layoutElements.has(el)) /** @type {any} */ (desc).isLayout = true;
         boxes.push(desc);
       }
     }
@@ -103,11 +109,17 @@ export function render() {
         ${boxes.map(
           (b) => html`
             <div
-              class=${b.cls}
+              class="${b.cls}${/** @type {any} */ (b).isLayout ? " overlay-layout" : ""}"
               style="top:${b.top};left:${b.left};width:${b.width};height:${b.height}${b.border
                 ? `;border:${b.border}`
                 : ""}"
-            ></div>
+            >
+              ${
+                /** @type {any} */ (b).isLayout
+                  ? html`<span class="overlay-layout-badge">Layout</span>`
+                  : nothing
+              }
+            </div>
           `,
         )}
       `,

package/src/panels/panel-events.js

@@ -23,6 +23,7 @@ import { showContextMenu } from "../editor/context-menu.js";
 import * as insertionHelper from "../editor/insertion-helper.js";
 import { defaultDef } from "../panels/shared.js";
 import { bubbleInlinePath, findCanvasElement, effectiveZoom } from "../canvas/canvas-helpers.js";
+import { layoutElements, activeLayoutPath } from "../canvas/canvas-live-render.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -87,6 +88,15 @@ export function registerPanelEvents(panel) {
 
       for (const el of elements) {
         if (canvas.contains(el) && el !== canvas) {
+          // Layout element clicked — show layout info instead of selecting in page doc
+          if (layoutElements.has(el)) {
+            view.layoutSelection = { el, layoutPath: activeLayoutPath };
+            update(selectNode(S, null));
+            renderOnly("rightPanel");
+            return;
+          }
+          view.layoutSelection = null;
+
           const originalPath = elToPath.get(el);
           if (originalPath) {
             let path = bubbleInlinePath(S.document, originalPath);