@jxsuite/studio 0.28.5 → 0.30.1

package/src/panels/ai-panel.ts

@@ -43,6 +43,14 @@ interface QuikChatInstance {
   historyImport: (history: unknown[]) => void;
 }
 
+type QuikChatCtor = new (
+  container: HTMLElement,
+  onSend: (chat: unknown, msg: string) => void,
+  opts: Record<string, unknown>,
+) => QuikChatInstance;
+
+const QuikChat = quikchat as unknown as QuikChatCtor;
+
 let chatInstance: QuikChatInstance | null = null;
 let chatContainerEl: Element | null = null;
 let _quikChatEl: HTMLElement | null = null;
@@ -57,7 +65,7 @@ export function mountAiPanel() {
     return;
   }
   mounted = true;
-  checkAuth();
+  void checkAuth();
 }
 
 const _g = globalThis as unknown as {
@@ -87,10 +95,10 @@ export function mountQuikChat() {
     return;
   }
 
-  chatInstance = new quikchat(
+  chatInstance = new QuikChat(
     container,
     (_chat: unknown, msg: string) => {
-      handleUserSend(msg);
+      void handleUserSend(msg);
     },
     {
       messagesArea: { alternating: false },
@@ -197,14 +205,14 @@ function stop() {
     return;
   }
   const plat = getPlatform();
-  plat.aiStopSession(sessionId);
+  void plat.aiStopSession(sessionId);
   finishStream();
 }
 
 function newChat() {
   if (sessionId) {
     const plat = getPlatform();
-    plat.aiDeleteSession(sessionId);
+    void plat.aiDeleteSession(sessionId);
   }
   disconnectStream();
   messages = [];
@@ -223,6 +231,31 @@ function newChat() {
 
 // ─── SSE Stream ─────────────────────────────────────────────────────────────
 
+/** SSE `stream_event` payload (subset used here). */
+interface StreamEventData {
+  event?: { type?: string; delta?: { type?: string; text?: string } };
+}
+
+/** SSE `result` payload (subset used here). */
+interface ResultData {
+  result?: string;
+  is_error?: boolean;
+}
+
+/** SSE `error` payload (subset used here). */
+interface ErrorData {
+  error?: string;
+}
+
+/** Parse SSE JSON into the expected shape. Returns null on malformed input. */
+function parseSse<T>(raw: unknown): T | null {
+  try {
+    return JSON.parse(String(raw)) as T;
+  } catch {
+    return null;
+  }
+}
+
 async function connectStream(id: string) {
   disconnectStream();
   const plat = getPlatform();
@@ -230,40 +263,37 @@ async function connectStream(id: string) {
   eventSource = new EventSource(url);
 
   eventSource.addEventListener("stream_event", (e) => {
-    try {
-      const data = JSON.parse(e.data);
-      const evt = data.event;
-      if (evt?.type === "content_block_delta" && evt.delta?.type === "text_delta") {
-        const token = evt.delta.text;
-        currentAssistantText += token;
-        if (chatInstance && currentStreamMsgId != null) {
-          if (!streamStarted) {
-            chatInstance.messageReplaceContent(currentStreamMsgId, currentAssistantText);
-            streamStarted = true;
-          } else {
-            chatInstance.messageAppendContent(currentStreamMsgId, token);
-          }
+    const data = parseSse<StreamEventData>((e as MessageEvent).data);
+    const evt = data?.event;
+    if (evt?.type === "content_block_delta" && evt.delta?.type === "text_delta") {
+      const token = evt.delta.text ?? "";
+      currentAssistantText += token;
+      if (chatInstance && currentStreamMsgId != null) {
+        if (!streamStarted) {
+          chatInstance.messageReplaceContent(currentStreamMsgId, currentAssistantText);
+          streamStarted = true;
+        } else {
+          chatInstance.messageAppendContent(currentStreamMsgId, token);
         }
       }
-    } catch {}
+    }
   });
 
   eventSource.addEventListener("assistant", (e) => {
-    try {
-      handleAssistantMessage(JSON.parse(e.data));
-    } catch {}
+    const data = parseSse<AssistantMessageData>((e as MessageEvent).data);
+    if (data) {
+      handleAssistantMessage(data);
+    }
   });
 
   eventSource.addEventListener("result", (e) => {
-    try {
-      const data = JSON.parse(e.data);
-      if (data.result && data.is_error) {
-        if (chatInstance && currentStreamMsgId != null) {
-          chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${data.result}`);
-        }
-        currentAssistantText = `Error: ${data.result}`;
+    const data = parseSse<ResultData>((e as MessageEvent).data);
+    if (data?.result && data.is_error) {
+      if (chatInstance && currentStreamMsgId != null) {
+        chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${data.result}`);
       }
-    } catch {}
+      currentAssistantText = `Error: ${data.result}`;
+    }
     finishStream();
   });
 
@@ -272,15 +302,13 @@ async function connectStream(id: string) {
   });
 
   eventSource.addEventListener("error", (e) => {
-    try {
-      const data = JSON.parse((e as MessageEvent).data);
-      if (data.error) {
-        if (chatInstance && currentStreamMsgId != null) {
-          chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${data.error}`);
-        }
-        currentAssistantText = `Error: ${data.error}`;
+    const data = parseSse<ErrorData>((e as MessageEvent).data);
+    if (data?.error) {
+      if (chatInstance && currentStreamMsgId != null) {
+        chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${data.error}`);
       }
-    } catch {}
+      currentAssistantText = `Error: ${data.error}`;
+    }
     finishStream();
   });
 
@@ -306,7 +334,7 @@ function finishStream() {
 
   if (pendingFileReloads.size > 0) {
     for (const fp of pendingFileReloads) {
-      reloadFileInTab(fp);
+      void reloadFileInTab(fp);
     }
     pendingFileReloads.clear();
   }

package/src/panels/block-action-bar.ts

@@ -9,13 +9,21 @@ import { styleMap } from "lit-html/directives/style-map.js";
 import { ref } from "lit-html/directives/ref.js";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 
-import { childIndex, childList, getNodeAtPath, nodeLabel, parentElementPath } from "../store";
+import {
+  childIndex,
+  childList,
+  elToScope,
+  getNodeAtPath,
+  nodeLabel,
+  parentElementPath,
+} from "../store";
 import { activeTab } from "../workspace/workspace";
 import { mutateMoveNode, mutateUpdateProperty, transactDoc } from "../tabs/transact";
 import { view } from "../view";
 import { getActiveElement, getInlineActions, isEditing } from "../editor/inline-edit";
 import type { InlineAction } from "../editor/inline-edit";
 import { isTagActiveInSelection, toggleInlineFormat } from "../editor/inline-format";
+import { buildMergeTags } from "../editor/merge-tags";
 import { componentRegistry } from "../files/components";
 import { convertToComponent } from "../editor/convert-to-component";
 import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers";
@@ -224,6 +232,60 @@ function applyInlineFormat(action: InlineAction) {
   requestAnimationFrame(() => renderBlockActionBar());
 }
 
+/**
+ * Open the merge-tag menu — a searchable list of `${…}` template tokens for the data available in
+ * the current state. Reuses the shared slash-menu popover (filter + keyboard nav + dismiss).
+ *
+ * @param {MouseEvent} e
+ */
+function onMergeTagClick(e: MouseEvent) {
+  e.stopPropagation();
+  const anchorEl = e.currentTarget as HTMLElement;
+  const tab = activeTab.value;
+  const editable = getActiveElement();
+  const state = (tab?.doc.document.state ?? {}) as Record<string, unknown>;
+  const scope = getActivePanel()?.liveCtx?.scope ?? null;
+  const localScope = editable ? (elToScope.get(editable) ?? null) : null;
+
+  const commands = buildMergeTags(state, scope, localScope).map((t) => ({
+    description: t.hint,
+    label: t.label,
+    tag: t.token,
+  }));
+
+  showSlashMenu(anchorEl, "", {
+    commands,
+    onSelect: (cmd) => insertMergeTag(cmd.tag),
+    showFilter: true,
+  });
+}
+
+/**
+ * Insert a `${token}` template expression at the saved selection inside the active contenteditable.
+ * Mirrors onFormatClick's range-restore flow and inserts via execCommand so it joins the
+ * contenteditable's native undo stack (like paste).
+ *
+ * @param {string} token
+ */
+function insertMergeTag(token: string) {
+  if (!view.savedRange) {
+    return;
+  }
+  const anchor = view.savedRange.startContainer;
+  const editableRoot = (
+    anchor?.nodeType === Node.ELEMENT_NODE ? (anchor as Element) : anchor?.parentElement
+  )?.closest("[contenteditable]");
+  if (!editableRoot) {
+    return;
+  }
+  const sel = window.getSelection();
+  (editableRoot as HTMLElement).focus();
+  sel?.removeAllRanges();
+  sel?.addRange(view.savedRange);
+  document.execCommand("insertText", false, `\${${token}}`);
+  requestAnimationFrame(() => renderBlockActionBar());
+}
+
 /** Dismiss the link popover if open. */
 export function dismissLinkPopover() {
   const host = getLayerSlot("popover", "link-popover");
@@ -515,6 +577,15 @@ export function renderBlockActionBar() {
                   `,
                 )}
               </sp-action-group>
+              <sp-action-button
+                size="xs"
+                quiet
+                title="Insert data"
+                @mousedown=${captureSelectionRange}
+                @click=${onMergeTagClick}
+              >
+                <sp-icon-data slot="icon"></sp-icon-data>
+              </sp-action-button>
             `
           : nothing}
       </div>

package/src/panels/canvas-dnd.ts

@@ -20,7 +20,7 @@ import type { CanvasPanel } from "../types";
 
 import type { JxPath } from "../state";
 
-export type { CanvasPanel };
+export type { CanvasPanel } from "../types";
 
 interface DropInstruction {
   type: "reorder-above" | "reorder-below" | "make-child";
@@ -125,34 +125,63 @@ export function registerPanelDnD(panel: CanvasPanel) {
   });
   view.canvasDndCleanups.push(monitorCleanup);
 
-  const document = activeTab.value?.doc.document;
   for (const el of allEls) {
-    const elPath = elToPath.get(el);
-    if (!elPath) {
+    if (!elToPath.get(el)) {
       continue;
     }
+    registerElementDropTarget(el);
+  }
+}
 
-    const node = getNodeAtPath(document!, elPath);
-    const tag = (node?.tagName || "div").toLowerCase();
-    const hasElementChildren =
-      Array.isArray(node?.children) &&
-      node.children.some((c: unknown) => c != null && typeof c === "object");
-    const isLeaf = VOID_ELEMENTS.has(tag) || !hasElementChildren;
+/**
+ * Register one canvas element as a drop target. Path and leaf-ness are read live from elToPath and
+ * the current document at drag time, so surgical patches that remap sibling paths never leave stale
+ * closures behind.
+ *
+ * @param {Element} el
+ */
+function registerElementDropTarget(el: Element) {
+  const cleanup = dropTargetForElements({
+    canDrop({ source }) {
+      const elPath = elToPath.get(el);
+      if (!elPath) {
+        return false;
+      }
+      const srcPath = source.data.path as JxPath | undefined;
+      if (srcPath && isAncestor(srcPath, elPath)) {
+        return false;
+      }
+      return true;
+    },
+    element: /** @type {HTMLElement} */ el,
+    getData() {
+      const elPath = elToPath.get(el) ?? [];
+      const document = activeTab.value?.doc.document;
+      const node = document ? getNodeAtPath(document, elPath) : undefined;
+      const tag = (node?.tagName || "div").toLowerCase();
+      const hasElementChildren =
+        Array.isArray(node?.children) &&
+        node.children.some((c: unknown) => c != null && typeof c === "object");
+      return { _isVoid: VOID_ELEMENTS.has(tag) || !hasElementChildren, path: elPath };
+    },
+  });
+  view.canvasDndCleanups.push(cleanup);
+}
 
-    const cleanup = dropTargetForElements({
-      canDrop({ source }) {
-        const srcPath = source.data.path as JxPath | undefined;
-        if (srcPath && isAncestor(srcPath, elPath)) {
-          return false;
-        }
-        return true;
-      },
-      element: /** @type {HTMLElement} */ el,
-      getData() {
-        return { _isVoid: isLeaf, path: elPath };
-      },
-    });
-    view.canvasDndCleanups.push(cleanup);
+/**
+ * Register drop targets for a freshly patched-in subtree (root plus descendants). Cleanups join
+ * view.canvasDndCleanups and are released by the next full render like all canvas DnD handlers.
+ *
+ * @param {HTMLElement} rootEl
+ */
+export function registerSubtreeDnD(rootEl: HTMLElement) {
+  if (elToPath.get(rootEl)) {
+    registerElementDropTarget(rootEl);
+  }
+  for (const el of rootEl.querySelectorAll("*")) {
+    if (elToPath.get(el)) {
+      registerElementDropTarget(el);
+    }
   }
 }
 
@@ -229,7 +258,7 @@ function nearestChildEdge(children: HTMLElement[], cursorY: number, parentPath:
   let closestIdx = children.length - 1;
 
   for (let i = 0; i < children.length; i++) {
-    const rect = children[i].getBoundingClientRect();
+    const rect = children[i]!.getBoundingClientRect();
     const topDist = Math.abs(cursorY - rect.top);
     const bottomDist = Math.abs(cursorY - rect.bottom);
 
@@ -248,7 +277,7 @@ function nearestChildEdge(children: HTMLElement[], cursorY: number, parentPath:
   const childPath = [...parentPath, "children", closestIdx];
   return {
     instruction,
-    referenceEl: children[closestIdx],
+    referenceEl: children[closestIdx]!,
     targetPath: childPath,
   };
 }

package/src/panels/data-explorer.ts

@@ -9,7 +9,7 @@ import type { TemplateResult } from "lit-html";
 const expandedDataKeys = new Set();
 
 /** Unwrap a Vue ref (has .value and .__v_isRef) to get the underlying value. */
-function unwrapSignal(value: unknown) {
+export function unwrapSignal(value: unknown) {
   if (value && typeof value === "object" && (value as Record<string, unknown>).__v_isRef) {
     return (value as Record<string, unknown>).value;
   }
@@ -17,7 +17,7 @@ function unwrapSignal(value: unknown) {
 }
 
 /** Type label for a signal value in the data explorer. */
-function dataTypeLabel(value: unknown) {
+export function dataTypeLabel(value: unknown) {
   const v = unwrapSignal(value);
   if (v === null) {
     return "null";
@@ -164,7 +164,9 @@ export function renderDataTreeTemplate(
           ><span class="data-value data-${item === null ? "null" : typeof item}">${valText}</span>
         </div>`;
       }
-      const label = Array.isArray(item) ? `Array(${item.length})` : `{${Object.keys(item).length}}`;
+      const label = Array.isArray(item)
+        ? `Array(${item.length})`
+        : `{${Object.keys(item as object).length}}`;
       return html`
         <div class="data-branch" style="padding-left:${indent}">
           <span class="data-key">[${i}] </span

package/src/panels/dnd.ts

@@ -27,7 +27,11 @@ import {
 import { mutateInsertNode, mutateMoveNode, transact, transactDoc } from "../tabs/transact";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
-import { componentRegistry, computeRelativePath } from "../files/components";
+import {
+  buildComponentInstance,
+  componentRegistry,
+  computeRelativePath,
+} from "../files/components";
 import { renderComponentPreview } from "./stylebook-panel";
 import { defaultDef, unsafeTags } from "./shared";
 import type { JxPath } from "../state";
@@ -63,8 +67,8 @@ export function registerLayersDnD() {
     for (const row of container.querySelectorAll("[data-dnd-row]") as NodeListOf<HTMLElement>) {
       const rowPath = (row.dataset.path as string)
         .split("/")
-        .map((s: string) => (/^\d+$/.test(s) ? Number.parseInt(s, 10) : s)) as JxPath;
-      const rowDepth = Number.parseInt(row.dataset.dndDepth as string, 10) || 0;
+        .map((s: string) => (/^\d+$/.test(s) ? Math.trunc(Number(s)) : s)) as JxPath;
+      const rowDepth = Math.trunc(Number(row.dataset.dndDepth as string)) || 0;
       const isVoid = Object.hasOwn(row.dataset, "dndVoid");
       const isExpanded = Object.hasOwn(row.dataset, "dndExpanded");
 
@@ -205,25 +209,13 @@ export function registerComponentsDnD() {
       // Fill preview with live rendered component
       const preview = row.querySelector(".element-card-preview");
       if (preview && !preview.querySelector(tagName)) {
-        renderComponentPreview(comp).then((el: HTMLElement) => {
+        void renderComponentPreview(comp).then((el: HTMLElement) => {
           preview.textContent = "";
           preview.append(el);
         });
       }
 
-      const instanceDef = {
-        $props: comp.props
-          ? Object.fromEntries(
-              comp.props.map(
-                (/** @type {{ name: string; default?: unknown; [k: string]: unknown }} */ p) => [
-                  p.name,
-                  p.default !== undefined ? p.default : "",
-                ],
-              ),
-            )
-          : {},
-        tagName: comp.tagName,
-      };
+      const instanceDef = buildComponentInstance(comp);
       const cleanup = draggable({
         element: row,
         getInitialData() {
@@ -336,6 +328,11 @@ export function clearLayerDropGap(container: HTMLElement) {
   const rows = container.querySelectorAll(".layers-tree .layer-row");
   for (const r of rows) {
     (r as HTMLElement).style.transform = "";
+    // Also clear `display:none` left by hideDescendantRows. The `.layer-row` div has no `style`
+    // Lit binding and rows aren't keyed, so lit reuses these DOM nodes positionally on the
+    // Post-drop re-render — a stale `display:none` would otherwise hide whichever row lands on the
+    // Reused node (e.g. a sibling of the moved subtree).
+    (r as HTMLElement).style.display = "";
   }
 }
 

package/src/panels/editors.ts

@@ -38,8 +38,7 @@ function getFunctionBody(editing: EditingTarget | null | undefined) {
   return "";
 }
 
-/** @param {() => void} closeFunctionEditor */
-export function renderFunctionEditor(closeFunctionEditor: () => void) {
+export function renderFunctionEditor() {
   const editing = activeTab.value?.session.ui.editingFunction as EditingTarget | null | undefined;
 
   // If editor already exists and matches current target, just sync value
@@ -79,27 +78,10 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
   canvasWrap.style.flexDirection = "column";
   canvasWrap.style.alignItems = "stretch";
 
-  // Toolbar breadcrumb handles context display — re-render it
-  renderOnly("toolbar");
-
-  const tab = activeTab.value;
-  const docName = tab?.documentPath?.split("/").pop() || tab?.doc.document?.tagName || "document";
-  const ed = editing as EditingTarget;
-  const funcLabel = ed.type === "def" ? `ƒ ${ed.defName}` : `ƒ ${ed.eventKey}`;
-
-  // Editor container
+  // The tab bar renders the Back button + breadcrumb context for the function editor.
   let editorContainer: HTMLDivElement | null = null;
   litRender(
     html`<div class="source-wrap">
-      <div class="source-toolbar">
-        <sp-action-button size="s" @click=${closeFunctionEditor}>
-          <sp-icon-back slot="icon"></sp-icon-back>
-          Back
-        </sp-action-button>
-        <span class="breadcrumb-item">${docName}</span>
-        <span class="breadcrumb-sep"> › </span>
-        <span class="breadcrumb-item current">${funcLabel}</span>
-      </div>
       <div
         class="source-editor"
         ${ref((el) => {
@@ -135,13 +117,13 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
   const editor = view.functionEditor;
 
   // Format on open — show pretty-printed code, then run initial lint
-  codeService("format", { args, code: body }).then((result) => {
+  void codeService("format", { args, code: body }).then((result) => {
     if (result?.code != null && view.functionEditor) {
       view.functionEditor._ignoreNextChange = true;
       view.functionEditor.setValue(result.code);
     }
   });
-  codeService("lint", { args, code: body }).then((result) => {
+  void codeService("lint", { args, code: body }).then((result) => {
     if (result?.diagnostics && view.functionEditor) {
       setLintMarkers(view.functionEditor, result.diagnostics as OxLintDiagnostic[]);
     }
@@ -183,7 +165,7 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
     lintDebounce = setTimeout(() => {
       const gen = (lintGen += 1);
       const currentCode = editor.getValue();
-      codeService("lint", { args, code: currentCode }).then((result) => {
+      void codeService("lint", { args, code: currentCode }).then((result) => {
         if (gen !== lintGen) {
           return;
         }

package/src/panels/elements-panel.ts

@@ -7,7 +7,7 @@ import { activeTab } from "../workspace/workspace";
 import { mutateInsertNode, transactDoc } from "../tabs/transact";
 import { view } from "../view";
 import { getEffectiveElements } from "../site-context";
-import { componentRegistry } from "../files/components";
+import { buildComponentInstance, componentRegistry } from "../files/components";
 
 import type { ComponentEntry } from "../files/components";
 import type { JxElement, JxMutableNode } from "@jxsuite/schema/types";
@@ -134,17 +134,7 @@ export function renderElementsTemplate(ctx: {
                       const parentPath = t?.session.selection || [];
                       const parent = getNodeAtPath(t!.doc.document, parentPath);
                       const idx = childList(parent).length;
-                      const instanceDef = {
-                        $props: Object.fromEntries(
-                          (comp.props || []).map(
-                            (/** @type {{ name: string; default?: unknown }} */ p) => [
-                              p.name,
-                              p.default !== undefined ? p.default : "",
-                            ],
-                          ),
-                        ),
-                        tagName: comp.tagName,
-                      };
+                      const instanceDef = buildComponentInstance(comp);
                       transactDoc(t!, (tr) =>
                         mutateInsertNode(tr, parentPath, idx, structuredClone(instanceDef)),
                       );

package/src/panels/events-panel.ts

@@ -266,7 +266,7 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
             if (functionDefs.length > 0) {
               transactDoc(activeTab.value, (t) =>
                 mutateUpdateProperty(t, selection, evName, {
-                  $ref: `#/state/${functionDefs[0][0]}`,
+                  $ref: `#/state/${functionDefs[0]![0]}`,
                 }),
               );
             } else {

package/src/panels/git-panel.ts

@@ -132,7 +132,7 @@ async function gitAction(action: string, body?: unknown) {
   updateUi("gitLoading", true);
   updateUi("gitError", null);
   try {
-    await plat[action](body);
+    await plat[action]!(body);
     await refreshGitStatus();
   } catch (error) {
     updateUi("gitError", errorMessage(error));
@@ -191,7 +191,7 @@ export function renderGitPanel(
   const loading = S.ui.gitLoading;
 
   if (!status && !loading) {
-    refreshGitStatus();
+    void refreshGitStatus();
     return html`<div class="git-panel">
       <div class="git-loading">Loading...</div>
     </div>`;
@@ -232,7 +232,7 @@ export function renderGitPanel(
   if (!_pollTimer) {
     _pollTimer = setInterval(() => {
       if (view.leftTab === "git" && !S.ui.gitLoading) {
-        refreshGitStatus();
+        void refreshGitStatus();
       }
     }, 30_000);
   }
@@ -417,7 +417,7 @@ export function renderGitPanel(
   const switchTab = (tab: string) => {
     _gitSubTab = tab;
     if (tab === "history" && !S.ui.gitLogEntries) {
-      fetchGitLog();
+      void fetchGitLog();
     }
     renderOnly("leftPanel");
   };
@@ -453,7 +453,7 @@ export function renderGitPanel(
         @keydown=${(e: KeyboardEvent) => {
           if (e.ctrlKey && e.key === "Enter") {
             e.preventDefault();
-            doCommit();
+            void doCommit();
           }
         }}
       ></sp-textfield>
@@ -489,7 +489,7 @@ export function renderGitPanel(
                   "hidden",
                   "",
                 );
-                doCommit();
+                void doCommit();
               }}
             >
               Commit (don't sync)

package/src/panels/head-panel.ts

@@ -334,7 +334,7 @@ export function renderHeadTemplate({
   let layoutSection: TemplateResult | symbol = nothing;
   if (isPage) {
     if (layoutEntries === null) {
-      loadLayoutEntries();
+      void loadLayoutEntries();
     } else {
       const currentLayout = doc.$layout;
       const defaultLayout = projectState?.projectConfig?.defaults?.layout;