@jxsuite/studio 0.28.2 → 0.28.4

package/src/utils/canvas-media.ts

@@ -1,4 +1,5 @@
 /// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
 /** Canvas media/breakpoint utilities — pure functions extracted for testability. */
 
 import type { JxStyle } from "@jxsuite/schema/types";
@@ -14,25 +15,31 @@ import type { JxStyle } from "@jxsuite/schema/types";
  *   baseWidth: number;
  * }}
  */
-export function parseMediaEntries(mediaDef: Record<string, string> | null | undefined) {
-  if (!mediaDef) return { sizeBreakpoints: [], featureQueries: [], baseWidth: 320 };
-  const sizes = [],
-    features = [];
+export function parseMediaEntries(mediaDef?: Record<string, string> | null) {
+  if (!mediaDef) {
+    return { baseWidth: 320, featureQueries: [], sizeBreakpoints: [] };
+  }
+  const features = [];
+  const sizes = [];
   let baseWidth = 320;
   for (const [name, query] of Object.entries(mediaDef)) {
     if (name === "--") {
       const wm = String(query).match(/^(\d+)\s*px$/);
-      baseWidth = wm ? parseFloat(wm[1]) : 320;
+      baseWidth = wm ? Number.parseFloat(wm[1]) : 320;
       continue;
     }
     const minMatch = query.match(/min-width:\s*([\d.]+)px/);
     const maxMatch = query.match(/max-width:\s*([\d.]+)px/);
-    if (minMatch) sizes.push({ name, query, width: parseFloat(minMatch[1]), type: "min" });
-    else if (maxMatch) sizes.push({ name, query, width: parseFloat(maxMatch[1]), type: "max" });
-    else features.push({ name, query });
+    if (minMatch) {
+      sizes.push({ name, query, type: "min", width: Number.parseFloat(minMatch[1]) });
+    } else if (maxMatch) {
+      sizes.push({ name, query, type: "max", width: Number.parseFloat(maxMatch[1]) });
+    } else {
+      features.push({ name, query });
+    }
   }
   sizes.sort((a, b) => (a.type === "min" ? a.width - b.width : b.width - a.width));
-  return { sizeBreakpoints: sizes, featureQueries: features, baseWidth };
+  return { baseWidth, featureQueries: features, sizeBreakpoints: sizes };
 }
 
 /**
@@ -48,8 +55,11 @@ export function activeBreakpointsForWidth(
 ) {
   const active = new Set<string>();
   for (const bp of sizeBreakpoints) {
-    if (bp.type === "min" && canvasWidth >= bp.width) active.add(bp.name);
-    else if (bp.type === "max" && canvasWidth <= bp.width) active.add(bp.name);
+    if (bp.type === "min" && canvasWidth >= bp.width) {
+      active.add(bp.name);
+    } else if (bp.type === "max" && canvasWidth <= bp.width) {
+      active.add(bp.name);
+    }
   }
   return active;
 }
@@ -69,25 +79,37 @@ export function applyCanvasStyle(
   activeBreakpoints: Set<string>,
   featureToggles: Record<string, boolean>,
 ) {
-  if (!styleDef || typeof styleDef !== "object") return;
+  if (!styleDef || typeof styleDef !== "object") {
+    return;
+  }
   for (const [prop, val] of Object.entries(styleDef)) {
     if (typeof val === "string" || typeof val === "number") {
       try {
-        if (prop.startsWith("--")) el.style.setProperty(prop, String(val));
-        else (el.style as unknown as Record<string, unknown>)[prop] = val;
+        if (prop.startsWith("--")) {
+          el.style.setProperty(prop, String(val));
+        } else {
+          (el.style as unknown as Record<string, unknown>)[prop] = val;
+        }
       } catch {}
     }
   }
   for (const [key, val] of Object.entries(styleDef)) {
-    if (!key.startsWith("@") || typeof val !== "object" || val === null) continue;
+    if (!key.startsWith("@") || typeof val !== "object" || val === null) {
+      continue;
+    }
     const mediaName = key.slice(1);
-    if (mediaName === "--") continue;
+    if (mediaName === "--") {
+      continue;
+    }
     if (activeBreakpoints.has(mediaName) || featureToggles[mediaName]) {
       for (const [prop, v] of Object.entries(/** @type {Record<string, unknown>} */ val)) {
         if (typeof v === "string" || typeof v === "number") {
           try {
-            if (prop.startsWith("--")) el.style.setProperty(prop, String(v));
-            else (el.style as unknown as Record<string, unknown>)[prop] = v;
+            if (prop.startsWith("--")) {
+              el.style.setProperty(prop, String(v));
+            } else {
+              (el.style as unknown as Record<string, unknown>)[prop] = v;
+            }
           } catch {}
         }
       }
@@ -109,8 +131,10 @@ export function collectMediaOverrides(
   styleSheets: Iterable<CSSStyleSheet>,
   activeBreakpoints: Set<string>,
 ) {
-  const overrides: Map<string, Map<string, string>> = new Map();
-  if (!activeBreakpoints.size) return overrides;
+  const overrides = new Map<string, Map<string, string>>();
+  if (activeBreakpoints.size === 0) {
+    return overrides;
+  }
 
   for (const sheet of styleSheets) {
     /** @type {CSSRuleList | null} */
@@ -120,22 +144,31 @@ export function collectMediaOverrides(
     } catch {
       continue;
     }
-    if (!rules) continue;
-    for (let ri = 0; ri < rules.length; ri++) {
-      const rule = rules[ri];
-      if (!(rule instanceof CSSMediaRule)) continue;
-      if (!activeBreakpoints.has(rule.conditionText)) continue;
-      for (let mi = 0; mi < rule.cssRules.length; mi++) {
-        const mediaRule = rule.cssRules[mi];
-        if (!(mediaRule instanceof CSSStyleRule)) continue;
+    if (!rules) {
+      continue;
+    }
+    for (const rule of rules) {
+      if (!(rule instanceof CSSMediaRule)) {
+        continue;
+      }
+      if (!activeBreakpoints.has(rule.conditionText)) {
+        continue;
+      }
+      for (const mediaRule of rule.cssRules) {
+        if (!(mediaRule instanceof CSSStyleRule)) {
+          continue;
+        }
         const selector = mediaRule.selectorText;
         const jxMatch = selector.match(/\[data-jx="([^"]+)"\]/);
-        if (!jxMatch) continue;
-        const uid = jxMatch[1];
-        if (!overrides.has(uid)) overrides.set(uid, new Map());
+        if (!jxMatch) {
+          continue;
+        }
+        const [, uid] = jxMatch;
+        if (!overrides.has(uid)) {
+          overrides.set(uid, new Map());
+        }
         const props = overrides.get(uid) as Map<string, string>;
-        for (let i = 0; i < mediaRule.style.length; i++) {
-          const prop = mediaRule.style[i];
+        for (const prop of mediaRule.style) {
           props.set(prop, mediaRule.style.getPropertyValue(prop));
         }
       }

package/src/utils/edit-display.ts

@@ -18,7 +18,7 @@ const TRANSPARENT_PX =
  * @param {string} str
  */
 export function templateToEditDisplay(str: string) {
-  return str.replace(/\$\{([^}]+)\}/g, "\u276A $1 \u276B");
+  return str.replaceAll(/\$\{([^}]+)\}/g, "\u276A $1 \u276B");
 }
 
 /**
@@ -32,7 +32,7 @@ export function restoreTemplateExpressions(el: HTMLElement) {
   while (walker.nextNode()) {
     const node = walker.currentNode as Text;
     if (node.data.includes("\u276A")) {
-      node.data = node.data.replace(/\u276A\s*(.*?)\s*\u276B/g, "${$1}");
+      node.data = node.data.replaceAll(/\u276A\s*(.*?)\s*\u276B/g, "${$1}");
     }
   }
 }
@@ -46,8 +46,13 @@ export function restoreTemplateExpressions(el: HTMLElement) {
  * @returns {JxMutableNode}
  */
 export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
-  if (!node || typeof node !== "object") return node;
-  if (Array.isArray(node)) return node.map(prepareForEditMode);
+  if (!node || typeof node !== "object") {
+    return node;
+  }
+  if (Array.isArray(node)) {
+    // Arrays of nodes round-trip element-wise; the array itself is not a node.
+    return node.map((n) => prepareForEditMode(n)) as unknown as JxMutableNode;
+  }
 
   const /** @type {Record<string, unknown>} */ obj = node as Record<string, unknown>;
 
@@ -71,7 +76,7 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
 
   for (const [k, v] of Object.entries(obj)) {
     if (k === "state" || k === "$media" || k === "$elements") {
-      out[k] = v; // preserve as-is for runtime resolution
+      out[k] = v; // Preserve as-is for runtime resolution
     } else if (k === "$props" && v && typeof v === "object") {
       // Process $props values: convert template strings to display format
       const propsOut: Record<string, unknown> = {};
@@ -90,7 +95,7 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
       out[k] = propsOut;
     } else if (k === "children") {
       if (Array.isArray(v)) {
-        out.children = v.map(prepareForEditMode);
+        out.children = v.map((c) => prepareForEditMode(c));
       } else if (
         v &&
         typeof v === "object" &&
@@ -99,17 +104,16 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
         // Wrap the map template in a visual repeater perimeter
         const vObj = v as Record<string, unknown>;
         const template = vObj.map;
-        if (template && typeof template === "object") {
-          out.children = [
-            {
-              tagName: "div",
-              className: "repeater-perimeter",
-              children: [prepareForEditMode(template as JxMutableNode)],
-            },
-          ];
-        } else {
-          out.children = [];
-        }
+        out.children =
+          template && typeof template === "object"
+            ? [
+                {
+                  children: [prepareForEditMode(template as JxMutableNode)],
+                  className: "repeater-perimeter",
+                  tagName: "div",
+                },
+              ]
+            : [];
       } else {
         out.children = prepareForEditMode(v as JxMutableNode);
       }
@@ -118,30 +122,25 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
       const caseKeys = Object.keys(v);
       if (caseKeys.length > 0) {
         const firstCase = (v as Record<string, unknown>)[caseKeys[0]];
-        if (
-          firstCase &&
-          typeof firstCase === "object" &&
-          !(firstCase as Record<string, unknown>).$ref
-        ) {
-          out.children = [prepareForEditMode(firstCase)];
-        } else {
-          out.children = [
-            {
-              tagName: "div",
-              textContent: `[$switch: ${caseKeys.join(" | ")}]`,
-              style: {
-                fontFamily: "'SF Mono', 'Fira Code', monospace",
-                fontSize: "11px",
-                padding: "6px 10px",
-                background: "color-mix(in srgb, var(--danger) 8%, transparent)",
-                border: "1px dashed color-mix(in srgb, var(--danger) 40%, transparent)",
-                borderRadius: "4px",
-                color: "var(--danger)",
-                fontStyle: "italic",
-              },
-            },
-          ];
-        }
+        out.children =
+          firstCase && typeof firstCase === "object" && !(firstCase as Record<string, unknown>).$ref
+            ? [prepareForEditMode(firstCase as JxMutableNode)]
+            : [
+                {
+                  style: {
+                    background: "color-mix(in srgb, var(--danger) 8%, transparent)",
+                    border: "1px dashed color-mix(in srgb, var(--danger) 40%, transparent)",
+                    borderRadius: "4px",
+                    color: "var(--danger)",
+                    fontFamily: "'SF Mono', 'Fira Code', monospace",
+                    fontSize: "11px",
+                    fontStyle: "italic",
+                    padding: "6px 10px",
+                  },
+                  tagName: "div",
+                  textContent: `[$switch: ${caseKeys.join(" | ")}]`,
+                },
+              ];
       }
     } else if (k === "attributes" && isMediaElement && v && typeof v === "object") {
       // Process attributes for media elements: replace src/poster with transparent pixel
@@ -276,11 +275,11 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
       ]);
       if (textTags.has(tag)) {
         out.className = out.className
-          ? out.className + " empty-text-placeholder"
+          ? `${out.className} empty-text-placeholder`
           : "empty-text-placeholder";
       } else if (containerTags.has(tag)) {
         out.className = out.className
-          ? out.className + " empty-container-placeholder"
+          ? `${out.className} empty-container-placeholder`
           : "empty-container-placeholder";
       }
     }
@@ -290,7 +289,7 @@ export function prepareForEditMode(node: JxMutableNode): JxMutableNode {
   if (needsMediaPlaceholder) {
     const cls = (out.className as string) || "";
     if (!cls.includes("empty-media-placeholder")) {
-      out.className = cls ? cls + " empty-media-placeholder" : "empty-media-placeholder";
+      out.className = cls ? `${cls} empty-media-placeholder` : "empty-media-placeholder";
     }
   }
 

package/src/utils/google-fonts.ts

@@ -45,8 +45,10 @@ export function isGoogleFontPreconnect(entry: JxHeadEntry) {
  */
 export function extractFontFamily(href: string) {
   const match = href.match(/family=([^&:]+)/);
-  if (!match) return "";
-  return decodeURIComponent(match[1].replace(/\+/g, " "));
+  if (!match) {
+    return "";
+  }
+  return decodeURIComponent(match[1].replaceAll("+", " "));
 }
 
 /**
@@ -56,7 +58,7 @@ export function extractFontFamily(href: string) {
  * @returns {string}
  */
 export function buildGoogleFontUrl(family: string) {
-  return `${GFONTS_CSS_PREFIX}family=${encodeURIComponent(family).replace(/%20/g, "+")}&display=swap`;
+  return `${GFONTS_CSS_PREFIX}family=${encodeURIComponent(family).replaceAll("%20", "+")}&display=swap`;
 }
 
 /**
@@ -74,11 +76,13 @@ export function ensureGoogleFontPreconnects(head: JxHeadEntry[]) {
     );
     if (!exists) {
       const attrs: Record<string, string | boolean> = {
-        rel: "preconnect",
         href: origin,
+        rel: "preconnect",
       };
-      if (origin === "https://fonts.gstatic.com") attrs.crossorigin = "";
-      head.push({ tagName: "link", attributes: attrs });
+      if (origin === "https://fonts.gstatic.com") {
+        attrs.crossorigin = "";
+      }
+      head.push({ attributes: attrs, tagName: "link" });
     }
   }
 }

package/src/utils/inherited-style.ts

@@ -24,34 +24,48 @@ export function computeInheritedStyle(
   activeTab: string | null,
   activeSelector: string | null = null,
 ) {
-  if (activeTab === null || mediaNames.length === 0) return {};
+  if (activeTab === null || mediaNames.length === 0) {
+    return {};
+  }
 
-  let inherited: Record<string, string | number> = {};
+  const inherited: Record<string, string | number> = {};
 
   if (!activeSelector) {
     // Start with base flat props
     for (const [p, v] of Object.entries(style)) {
-      if (typeof v !== "object") inherited[p] = (v as string | number) ?? "";
+      if (typeof v !== "object") {
+        inherited[p] = (v as string | number) ?? "";
+      }
     }
     // Layer each media block in order until current tab
     for (const name of mediaNames) {
-      if (name === activeTab) break;
+      if (name === activeTab) {
+        break;
+      }
       const block = (style[`@${name}`] || {}) as JxStyle;
       for (const [p, v] of Object.entries(block)) {
-        if (typeof v !== "object") inherited[p] = (v as string | number) ?? "";
+        if (typeof v !== "object") {
+          inherited[p] = (v as string | number) ?? "";
+        }
       }
     }
   } else {
     // Selector inheritance: base selector → each media's selector block in order
     const baseSel = (style[activeSelector] || {}) as JxStyle;
     for (const [p, v] of Object.entries(baseSel)) {
-      if (typeof v !== "object") inherited[p] = (v as string | number) ?? "";
+      if (typeof v !== "object") {
+        inherited[p] = (v as string | number) ?? "";
+      }
     }
     for (const name of mediaNames) {
-      if (name === activeTab) break;
+      if (name === activeTab) {
+        break;
+      }
       const selBlock = ((style[`@${name}`] || {}) as Record<string, unknown>)[activeSelector] || {};
       for (const [p, v] of Object.entries(selBlock)) {
-        if (typeof v !== "object") inherited[p] = v ?? "";
+        if (typeof v !== "object") {
+          inherited[p] = v ?? "";
+        }
       }
     }
   }

package/src/utils/studio-utils.ts

@@ -4,8 +4,8 @@
  * These are all side-effect-free functions used by style/properties/events panels.
  */
 
-import { formatByName, defaultContentFormat } from "../format/format-host";
-import type { ProjectConfig, ContentTypeDef } from "@jxsuite/schema/types";
+import { defaultContentFormat, formatByName } from "../format/format-host";
+import type { ContentTypeDef, ProjectConfig } from "@jxsuite/schema/types";
 
 /**
  * CamelCase → kebab-case for inline style attributes
@@ -14,7 +14,7 @@ import type { ProjectConfig, ContentTypeDef } from "@jxsuite/schema/types";
  * @returns {string}
  */
 export function camelToKebab(str: string) {
-  return str.replace(/[A-Z]/g, (c: string) => "-" + c.toLowerCase());
+  return str.replaceAll(/[A-Z]/g, (c: string) => `-${c.toLowerCase()}`);
 }
 
 /**
@@ -25,12 +25,12 @@ export function camelToKebab(str: string) {
  * @returns {string}
  */
 export function camelToLabel(prop: string) {
-  return prop.replace(/([A-Z])/g, " $1").replace(/^./, (c: string) => c.toUpperCase());
+  return prop.replaceAll(/([A-Z])/g, " $1").replace(/^./, (c: string) => c.toUpperCase());
 }
 
 export function toCamelCase(str: string): string {
   return str
-    .replace(/[^a-zA-Z0-9]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ""))
+    .replaceAll(/[^a-zA-Z0-9]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ""))
     .replace(/^[A-Z]/, (c) => c.toLowerCase());
 }
 
@@ -42,7 +42,7 @@ export function toCamelCase(str: string): string {
  * @returns {string}
  */
 export function kebabToLabel(val: string) {
-  return val.replace(
+  return val.replaceAll(
     /(^|-)(\w)/g,
     (_: string, sep: string, c: string) => (sep ? " " : "") + c.toUpperCase(),
   );
@@ -73,12 +73,15 @@ export function attrLabel(
   entry: { $label?: string; [key: string]: unknown } | null | undefined,
   attr: string,
 ) {
-  if (entry?.$label) return entry.$label;
-  if (attr.includes("-"))
-    return attr.replace(
+  if (entry?.$label) {
+    return entry.$label;
+  }
+  if (attr.includes("-")) {
+    return attr.replaceAll(
       /(^|-)(\w)/g,
       (_: string, sep: string, c: string) => (sep ? " " : "") + c.toUpperCase(),
     );
+  }
   return camelToLabel(attr);
 }
 
@@ -90,25 +93,25 @@ export function attrLabel(
  */
 export function abbreviateValue(val: string) {
   const map: Record<string, string> = {
+    baseline: "base",
+    column: "col",
+    "column-reverse": "col-r",
+    contents: "cnt",
+    "flex-end": "end",
+    "flex-start": "start",
+    "flow-root": "flow",
     inline: "inl",
     "inline-block": "i-blk",
     "inline-flex": "i-flx",
     "inline-grid": "i-grd",
-    contents: "cnt",
-    "flow-root": "flow",
+    normal: "norm",
     nowrap: "no-wr",
-    "wrap-reverse": "wr-rev",
-    "flex-start": "start",
-    "flex-end": "end",
-    "space-between": "betw",
+    "row-reverse": "row-r",
     "space-around": "arnd",
+    "space-between": "betw",
     "space-evenly": "even",
     stretch: "str",
-    baseline: "base",
-    normal: "norm",
-    "row-reverse": "row-r",
-    "column-reverse": "col-r",
-    column: "col",
+    "wrap-reverse": "wr-rev",
   };
   return map[val] || val;
 }
@@ -120,15 +123,33 @@ export function abbreviateValue(val: string) {
  * @returns {string}
  */
 export function inferInputType(entry: Record<string, unknown>) {
-  if (entry.$shorthand === true) return "shorthand";
-  if (entry.$input === "button-group") return "button-group";
-  if (entry.$input === "media") return "media";
-  if (entry.format === "color") return "color";
-  if (entry.format === "uri-reference") return "media";
-  if (entry.$units !== undefined) return "number-unit";
-  if (entry.type === "number") return "number";
-  if (Array.isArray(entry.enum)) return "select";
-  if (Array.isArray(entry.examples) || Array.isArray(entry.presets)) return "combobox";
+  if (entry.$shorthand === true) {
+    return "shorthand";
+  }
+  if (entry.$input === "button-group") {
+    return "button-group";
+  }
+  if (entry.$input === "media") {
+    return "media";
+  }
+  if (entry.format === "color") {
+    return "color";
+  }
+  if (entry.format === "uri-reference") {
+    return "media";
+  }
+  if (entry.$units !== undefined) {
+    return "number-unit";
+  }
+  if (entry.type === "number") {
+    return "number";
+  }
+  if (Array.isArray(entry.enum)) {
+    return "select";
+  }
+  if (Array.isArray(entry.examples) || Array.isArray(entry.presets)) {
+    return "combobox";
+  }
   return "text";
 }
 
@@ -144,15 +165,19 @@ export function findContentTypeSchema(
   documentPath: string | null,
   projectConfig: ProjectConfig | null | undefined,
 ) {
-  if (!documentPath || !projectConfig?.contentTypes) return null;
+  if (!documentPath || !projectConfig?.contentTypes) {
+    return null;
+  }
   for (const [name, def] of Object.entries(
     projectConfig.contentTypes as Record<string, ContentTypeDef>,
   )) {
-    if (!def.source || !def.schema) continue;
+    if (!def.source || !def.schema) {
+      continue;
+    }
     const src = def.source.replace(/^\.\//, "").replace(/\/$/, "");
     const hasExt = src.includes(".") && !src.endsWith("/");
     if (hasExt) {
-      if (documentPath === src || documentPath.endsWith("/" + src)) {
+      if (documentPath === src || documentPath.endsWith(`/${src}`)) {
         return { name, schema: def.schema };
       }
     } else {
@@ -162,7 +187,7 @@ export function findContentTypeSchema(
           : (formatByName(def.format)?.extensions[0] ??
             defaultContentFormat()?.extensions[0] ??
             ".json");
-      if (documentPath.startsWith(src + "/") && documentPath.endsWith(ext)) {
+      if (documentPath.startsWith(`${src}/`) && documentPath.endsWith(ext)) {
         return { name, schema: def.schema };
       }
     }
@@ -182,11 +207,13 @@ export function friendlyNameToVar(name: string, prefix: string) {
   const slug = name
     .trim()
     .toLowerCase()
-    .replace(/[^a-z0-9\s-]/g, "")
-    .replace(/\s+/g, "-")
-    .replace(/-+/g, "-")
-    .replace(/^-|-$/g, "");
-  if (!slug) return "";
+    .replaceAll(/[^a-z0-9\s-]/g, "")
+    .replaceAll(/\s+/g, "-")
+    .replaceAll(/-+/g, "-")
+    .replaceAll(/^-|-$/g, "");
+  if (!slug) {
+    return "";
+  }
   return `${prefix}${slug}`;
 }
 
@@ -201,10 +228,10 @@ export function friendlyNameToVar(name: string, prefix: string) {
 export function varDisplayName(varName: string, prefix: string) {
   return (
     varName
-      .replace(new RegExp(`^${prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`), "")
+      .replace(new RegExp(`^${prefix.replaceAll(/[.*+?^${}()|[\]\\]/g, String.raw`\$&`)}`), "")
       .replace(/^--/, "")
-      .replace(/-/g, " ")
-      .replace(/\b\w/g, (c: string) => c.toUpperCase()) || varName
+      .replaceAll("-", " ")
+      .replaceAll(/\b\w/g, (c: string) => c.toUpperCase()) || varName
   );
 }
 
@@ -218,13 +245,19 @@ export function varDisplayName(varName: string, prefix: string) {
  *   | { kind: "text" }}
  */
 export function parseCemType(typeText: string | undefined | null) {
-  if (!typeText) return { kind: "text" };
+  if (!typeText) {
+    return { kind: "text" };
+  }
   const t = typeText
     .trim()
-    .replace(/\s*\|\s*undefined\b/g, "")
+    .replaceAll(/\s*\|\s*undefined\b/g, "")
     .trim();
-  if (t === "boolean") return { kind: "boolean" };
-  if (t === "number") return { kind: "number" };
+  if (t === "boolean") {
+    return { kind: "boolean" };
+  }
+  if (t === "number") {
+    return { kind: "number" };
+  }
   // Detect enum: "'a' | 'b' | 'c'" — pipe-separated quoted literals
   const enumMatch = t.match(/^'[^']*'(\s*\|\s*'[^']*')+$/);
   if (enumMatch) {
@@ -233,3 +266,13 @@ export function parseCemType(typeText: string | undefined | null) {
   }
   return { kind: "text" };
 }
+
+/**
+ * Clone a (possibly reactive) document tree via JSON round-trip. Unlike structuredClone, this works
+ * on Vue reactive proxies and JSON-normalizes the tree (drops undefined values and functions) —
+ * both required for document snapshots and clipboard payloads.
+ */
+export function jsonClone<T>(value: T): T {
+  // oxlint-disable-next-line unicorn/prefer-structured-clone -- structuredClone throws on reactive proxies; JSON normalization is the point
+  return JSON.parse(JSON.stringify(value)) as T;
+}