@agent-native/core 0.130.2 → 0.131.3

package/corpus/templates/design/app/components/design/bridge/embedded-wheel.bridge.ts

@@ -56,9 +56,26 @@ declare var __EDITING_SAFETY_ENABLED__: boolean;
   var lastMetaKey = false;
   var lastShiftKey = false;
   var lastAltKey = false;
+  var freezeStyle: HTMLStyleElement | null = null;
 
-  if (editingSafetyEnabled) {
-    var freezeStyle = document.createElement("style");
+  function syncEditingSafetyStyle(): void {
+    var currentStyle =
+      freezeStyle ||
+      (document.querySelector(
+        "style[data-agent-native-editing-safety-style]",
+      ) as HTMLStyleElement | null);
+    if (!editingSafetyEnabled) {
+      if (currentStyle && currentStyle.parentNode) {
+        currentStyle.parentNode.removeChild(currentStyle);
+      }
+      freezeStyle = null;
+      return;
+    }
+    if (currentStyle && currentStyle.isConnected) {
+      freezeStyle = currentStyle;
+      return;
+    }
+    freezeStyle = document.createElement("style");
     freezeStyle.setAttribute("data-agent-native-editing-safety-style", "");
     freezeStyle.textContent =
       "html,body{animation:none!important;transition:none!important;scroll-behavior:auto!important}" +
@@ -69,6 +86,7 @@ declare var __EDITING_SAFETY_ENABLED__: boolean;
       "animation:none!important;transition:none!important}";
     (document.head || document.documentElement).appendChild(freezeStyle);
   }
+  syncEditingSafetyStyle();
 
   function clamp(value: number, limit: number): number {
     var number = Number(value) || 0;
@@ -287,6 +305,7 @@ declare var __EDITING_SAFETY_ENABLED__: boolean;
       // preview..." until that round trip finished.
       if (typeof e.data.editingSafetyEnabled === "boolean") {
         editingSafetyEnabled = e.data.editingSafetyEnabled;
+        syncEditingSafetyStyle();
       }
     }
   }

package/corpus/templates/design/app/components/design/code-workbench/CodeWorkbench.tsx

@@ -19,6 +19,7 @@ import {
   readCodeWorkbenchTheme,
   type CodeWorkbenchTheme,
 } from "../code-workbench-theme";
+import { CODE_WORKBENCH_SHELL_CLASSNAME } from "./code-workbench-shell";
 import {
   createCoreCommands,
   dispatchKeybinding,
@@ -373,7 +374,10 @@ function CodeWorkbenchInner({
       data-testid="design-code-workbench"
       tabIndex={-1}
       onKeyDownCapture={handleKeyDownCapture}
-      className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-[var(--workbench-bg)] text-[var(--workbench-fg)] outline-none"
+      className={cn(
+        CODE_WORKBENCH_SHELL_CLASSNAME,
+        "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-[var(--workbench-bg)] text-[var(--workbench-fg)] outline-none",
+      )}
       style={theme.values as CSSProperties}
     >
       <div className="flex min-h-0 flex-1">

package/corpus/templates/design/app/components/design/code-workbench/CodeWorkbenchLoader.tsx

@@ -15,7 +15,9 @@ import {
 
 import { Spinner } from "@/components/ui/spinner";
 import { prettyScreenName } from "@/lib/screen-names";
+import { cn } from "@/lib/utils";
 
+import { CODE_WORKBENCH_SHELL_CLASSNAME } from "./code-workbench-shell";
 import type { CodeWorkbenchProps } from "./CodeWorkbench";
 import { baseName } from "./workspace/types";
 
@@ -101,7 +103,10 @@ function CodeWorkbenchLoading({
     <div
       role="status"
       data-testid="design-code-workbench-loading"
-      className="flex min-h-0 flex-1 bg-[var(--design-editor-panel-bg)] text-muted-foreground"
+      className={cn(
+        CODE_WORKBENCH_SHELL_CLASSNAME,
+        "flex min-h-0 flex-1 bg-[var(--design-editor-panel-bg)] text-muted-foreground",
+      )}
     >
       <div className="flex w-60 shrink-0 flex-col border-r border-border">
         <div className="flex h-9 shrink-0 items-center border-b border-border px-3 text-[11px] font-medium uppercase tracking-wide">
@@ -221,7 +226,10 @@ function CodeWorkbenchLoadFailure({
     <div
       role="alert"
       data-testid="design-code-workbench-load-error"
-      className="grid min-h-0 flex-1 place-items-center bg-[var(--design-editor-panel-bg)] p-6 text-muted-foreground"
+      className={cn(
+        CODE_WORKBENCH_SHELL_CLASSNAME,
+        "grid min-h-0 flex-1 place-items-center bg-[var(--design-editor-panel-bg)] p-6 text-muted-foreground",
+      )}
     >
       <div className="max-w-sm text-center text-[12px]">
         <p>{message}</p>

package/corpus/templates/design/app/components/design/code-workbench/code-workbench-shell.ts

@@ -0,0 +1,2 @@
+export const CODE_WORKBENCH_SHELL_CLASSNAME =
+  "relative z-10 border-r border-[var(--workbench-border,var(--design-editor-control-border))] shadow-[4px_0_12px_-9px_hsl(var(--foreground)/0.45)]";

package/corpus/templates/design/app/components/design/code-workbench/explorer/ExplorerView.tsx

@@ -63,6 +63,15 @@ export function ExplorerView({
   const localhostProviders = providers.filter(
     (provider) => provider.kind === "localhost",
   );
+  const localhostProviderKeys = localhostProviders
+    .map((provider) => provider.key)
+    .join(",");
+  const providersRef = useRef(providers);
+  providersRef.current = providers;
+  const translateRef = useRef(t);
+  translateRef.current = t;
+  const refetchSourceFilesRef = useRef(sourceFilesQuery.refetch);
+  refetchSourceFilesRef.current = sourceFilesQuery.refetch;
   const [localhostFileLists, setLocalhostFileLists] = useState<
     Record<string, LocalhostFileListState>
   >({});
@@ -77,76 +86,72 @@ export function ExplorerView({
     };
   }, []);
 
-  const loadLocalhostFiles = useCallback(
-    async (providerKey: string) => {
-      const provider = providers.find((entry) => entry.key === providerKey);
-      if (!provider || !mountedRef.current) return;
-      const requestId = (requestIdsRef.current[providerKey] ?? 0) + 1;
-      requestIdsRef.current[providerKey] = requestId;
+  const loadLocalhostFiles = useCallback(async (providerKey: string) => {
+    const provider = providersRef.current.find(
+      (entry) => entry.key === providerKey,
+    );
+    if (!provider || !mountedRef.current) return;
+    const requestId = (requestIdsRef.current[providerKey] ?? 0) + 1;
+    requestIdsRef.current[providerKey] = requestId;
+    setLocalhostFileLists((current) => ({
+      ...current,
+      [providerKey]: {
+        files: current[providerKey]?.files ?? [],
+        loading: true,
+      },
+    }));
+    try {
+      const files = await provider.listFiles();
+      if (
+        !mountedRef.current ||
+        requestIdsRef.current[providerKey] !== requestId
+      ) {
+        return;
+      }
+      setLocalhostFileLists((current) => ({
+        ...current,
+        [providerKey]: { files, loading: false },
+      }));
+    } catch (error) {
+      if (
+        !mountedRef.current ||
+        requestIdsRef.current[providerKey] !== requestId
+      ) {
+        return;
+      }
       setLocalhostFileLists((current) => ({
         ...current,
         [providerKey]: {
           files: current[providerKey]?.files ?? [],
-          loading: true,
+          loading: false,
+          error:
+            error instanceof Error
+              ? error.message
+              : translateRef.current("common.genericError"),
         },
       }));
-      try {
-        const files = await provider.listFiles();
-        if (
-          !mountedRef.current ||
-          requestIdsRef.current[providerKey] !== requestId
-        ) {
-          return;
-        }
-        setLocalhostFileLists((current) => ({
-          ...current,
-          [providerKey]: { files, loading: false },
-        }));
-      } catch (error) {
-        if (
-          !mountedRef.current ||
-          requestIdsRef.current[providerKey] !== requestId
-        ) {
-          return;
-        }
-        setLocalhostFileLists((current) => ({
-          ...current,
-          [providerKey]: {
-            files: current[providerKey]?.files ?? [],
-            loading: false,
-            error:
-              error instanceof Error ? error.message : t("common.genericError"),
-          },
-        }));
-      }
-    },
-    [providers, t],
-  );
+    }
+  }, []);
 
   useEffect(() => {
-    for (const provider of localhostProviders) {
-      void loadLocalhostFiles(provider.key);
+    for (const providerKey of localhostProviderKeys
+      .split(",")
+      .filter(Boolean)) {
+      void loadLocalhostFiles(providerKey);
     }
     // Re-run when the set of localhost providers changes (connections added).
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    localhostProviders.map((provider) => provider.key).join(","),
-    loadLocalhostFiles,
-  ]);
+  }, [localhostProviderKeys, loadLocalhostFiles]);
 
   useEffect(() => {
     return api.onFilesChanged(() => {
-      sourceFilesQuery.refetch();
-      for (const provider of localhostProviders) {
-        void loadLocalhostFiles(provider.key);
+      refetchSourceFilesRef.current();
+      for (const providerKey of localhostProviderKeys
+        .split(",")
+        .filter(Boolean)) {
+        void loadLocalhostFiles(providerKey);
       }
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    api,
-    loadLocalhostFiles,
-    localhostProviders.map((provider) => provider.key).join(","),
-  ]);
+  }, [api, loadLocalhostFiles, localhostProviderKeys]);
 
   const activeUri = state.activeUri;
   const dirtyUris = useMemo(() => {

package/corpus/templates/design/app/components/design/design-canvas/content-size-report.ts

@@ -8,7 +8,8 @@ import { injectDocumentMarkup } from "@agent-native/core/shared";
  * scrollHeight inside the frame and posts { type, width, height } out, keyed by
  * event.source. It first pins full-height utilities to a fixed per-frame
  * --agent-native-device-vh so a min-h-screen hero can't chase the growing frame
- * (runaway); raw inline 100vh is not remapped.
+ * (runaway), then remaps raw viewport-height units in authored CSS to the same
+ * fixed device viewport.
  */
 
 const CONTENT_SIZE_REPORT_BRIDGE = `
@@ -43,6 +44,53 @@ const CONTENT_SIZE_REPORT_BRIDGE = `
     document.documentElement.style.setProperty("--agent-native-device-vh", vh);
   }
 
+  function remapViewportHeightUnits(value) {
+    return value.replace(
+      /-?(?:\\d+\\.?\\d*|\\.\\d+)(?:d|s|l)?vh\\b/gi,
+      function (match) {
+        return "calc(var(--agent-native-device-vh, 900px) * " +
+          Number.parseFloat(match) + " / 100)";
+      },
+    );
+  }
+
+  function remapStyleDeclaration(style) {
+    var properties = [];
+    for (var i = 0; i < style.length; i++) properties.push(style[i]);
+    properties.forEach(function (property) {
+      var value = style.getPropertyValue(property);
+      var remapped = remapViewportHeightUnits(value);
+      if (remapped === value) return;
+      style.setProperty(
+        property,
+        remapped,
+        style.getPropertyPriority(property),
+      );
+    });
+  }
+
+  function remapRuleList(rules) {
+    for (var i = 0; i < rules.length; i++) {
+      var rule = rules[i];
+      if (rule.style) remapStyleDeclaration(rule.style);
+      if (rule.cssRules) remapRuleList(rule.cssRules);
+    }
+  }
+
+  function applyViewportHeightGuard() {
+    for (var i = 0; i < document.styleSheets.length; i++) {
+      try {
+        remapRuleList(document.styleSheets[i].cssRules);
+      } catch (err) {
+        /* Cross-origin stylesheet - the parent-side feedback guard remains. */
+      }
+    }
+    var inlineStyles = document.querySelectorAll("[style]");
+    for (var j = 0; j < inlineStyles.length; j++) {
+      remapStyleDeclaration(inlineStyles[j].style);
+    }
+  }
+
   function measure() {
     var doc = document.documentElement;
     var body = document.body;
@@ -59,14 +107,21 @@ const CONTENT_SIZE_REPORT_BRIDGE = `
   function report() {
     frame = 0;
     applyDeviceVh();
+    applyViewportHeightGuard();
     var height = measure();
     var width = window.innerWidth || 0;
+    var viewportHeight = window.innerHeight || 0;
     if (height === lastHeight && width === lastWidth) return;
     lastHeight = height;
     lastWidth = width;
     try {
       window.parent.postMessage(
-        { type: "agent-native:content-size", width: width, height: height },
+        {
+          type: "agent-native:content-size",
+          width: width,
+          height: height,
+          viewportHeight: viewportHeight,
+        },
         "*",
       );
     } catch (err) {
@@ -107,6 +162,37 @@ const CONTENT_SIZE_REPORT_BRIDGE = `
 
 export const CONTENT_SIZE_REPORT_MESSAGE_TYPE = "agent-native:content-size";
 
+export type ContentSizeSample = {
+  acceptedHeight: number;
+  height: number;
+  viewportHeight: number;
+  width: number;
+};
+
+/**
+ * A document using raw viewport-height CSS can report a larger scrollHeight
+ * every time its iframe grows. Keep the first useful height when subsequent
+ * growth tracks the viewport growth; later content changes at a stable
+ * viewport are still accepted.
+ */
+export function resolveStableContentSizeSample(
+  previous: ContentSizeSample | undefined,
+  next: Omit<ContentSizeSample, "acceptedHeight">,
+): ContentSizeSample {
+  if (!previous) return { ...next, acceptedHeight: next.height };
+  const sameWidth = Math.abs(next.width - previous.width) <= 1;
+  const viewportGrowth = next.viewportHeight - previous.viewportHeight;
+  const contentGrowth = next.height - previous.height;
+  const viewportCoupledGrowth =
+    sameWidth && viewportGrowth > 1 && contentGrowth > 1;
+  return {
+    ...next,
+    acceptedHeight: viewportCoupledGrowth
+      ? previous.acceptedHeight
+      : next.height,
+  };
+}
+
 /** Appends the reporter + full-height guard, mirroring appendHitTestResponder's
  * marker handling so it runs regardless of document structure. */
 export function appendContentSizeReporter(html: string): string {

package/corpus/templates/design/app/components/design/multi-screen/board-surface-html.ts

@@ -10,7 +10,8 @@ export function hasBoardSurfaceContent(html: string | undefined) {
 }
 
 const BOARD_SURFACE_RENDER_STYLE = `<style data-agent-native-board-surface-render>html,body{background:transparent!important;background-color:transparent!important;background-image:none!important;}body{margin:0!important;position:relative;overflow:visible;}body>:not([data-agent-native-node-id]):not(style):not(script),body>[data-agent-native-node-id]:not([data-an-primitive]):not([data-agent-native-preserve-styles="true"]):has([data-agent-native-node-id]),body>[data-agent-native-node-id="body"],body>[data-agent-native-node-id="Body"],body>[data-agent-native-layer-name="body"],body>[data-agent-native-layer-name="Body"],body>[data-agent-native-layer-name="<body>"]{background:transparent!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;}[data-agent-native-board-backdrop-candidate="true"]{display:none!important;pointer-events:none!important;}</style>`;
-export const BOARD_SURFACE_BACKGROUND = "hsl(0 0% 10%)";
+// The comma syntax also works in the lightweight DOM used by canvas tests.
+export const BOARD_SURFACE_BACKGROUND = "hsl(0, 0%, 10%)";
 
 const BOARD_SURFACE_BACKDROP_MIN_EDGE_PX = 2400;
 const BOARD_SURFACE_BACKDROP_MIN_AREA_PX = 8_000_000;
@@ -323,7 +324,7 @@ export function getBoardSurfaceStaticPreviewContent(args: {
   const scale = Math.min(viewportWidth / width, viewportHeight / height);
   const offsetX = -args.logicalGeometry.x;
   const offsetY = -args.logicalGeometry.y;
-  const style = `<style data-agent-native-board-static-preview>*,*::before,*::after{animation:none!important;animation-delay:0s!important;transition:none!important;caret-color:transparent!important;}html{width:${viewportWidth}px!important;height:${viewportHeight}px!important;overflow:hidden!important;}body{margin:0!important;width:${width}px!important;height:${height}px!important;overflow:visible!important;transform:scale(${scale})!important;transform-origin:0 0!important;}body>[data-agent-native-node-id]{translate:${offsetX}px ${offsetY}px!important;}</style>`;
+  const style = `<style data-agent-native-board-static-preview>*,*::before,*::after{animation:none!important;animation-delay:0s!important;transition:none!important;caret-color:transparent!important;}html{width:${viewportWidth}px!important;height:${viewportHeight}px!important;overflow:hidden!important;}html,body{background:${BOARD_SURFACE_BACKGROUND}!important;background-color:${BOARD_SURFACE_BACKGROUND}!important;background-image:none!important;}body{margin:0!important;width:${width}px!important;height:${height}px!important;overflow:visible!important;transform:scale(${scale})!important;transform-origin:0 0!important;}body>[data-agent-native-node-id]{translate:${offsetX}px ${offsetY}px!important;}</style>`;
   if (/<\/head\s*>/i.test(renderHtml)) {
     return injectDocumentMarkup(renderHtml, style, { target: "head" });
   }

package/corpus/templates/design/app/components/design/types.ts

@@ -27,6 +27,10 @@ export interface RuntimeStructureMoveRequest {
 export interface RuntimeStructureInsertRequest {
   requestId: number;
   html: string;
+  /** Additional clipboard roots inserted by the same paste gesture. */
+  additionalHtml?: string[];
+  /** Replace the resolved anchor instead of inserting beside/inside it. */
+  replaceAnchor?: boolean;
   anchor: {
     selector: string;
     sourceId?: string | null;

package/corpus/templates/design/app/components/layout/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { appPath } from "@agent-native/core/client/api-path";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
-import { LanguagePicker, useT } from "@agent-native/core/client/i18n";
+import { useT } from "@agent-native/core/client/i18n";
 import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import { FeedbackButton } from "@agent-native/core/client/ui";
@@ -103,9 +103,6 @@ export function Sidebar() {
       <TooltipContent side="right">{t("root.commandSearch")}</TooltipContent>
     </Tooltip>
   );
-  const translateButton = (
-    <LanguagePicker variant="ghost-icon" label={t("settings.languageLabel")} />
-  );
   const feedbackButton = (
     <FeedbackButton
       variant={collapsed ? "icon" : "sidebar"}
@@ -240,7 +237,6 @@ export function Sidebar() {
         <SidebarFooterActions
           collapsed={collapsed}
           feedback={feedbackButton}
-          translate={translateButton}
           search={searchButton}
           collapse={collapseButton}
         />

package/corpus/templates/design/app/pages/design-editor/clipboard-layer-source.ts

@@ -0,0 +1,28 @@
+export interface ClipboardRuntimeLayerSnapshot {
+  html: string;
+  nodeCount: number;
+}
+
+/**
+ * Resolve the document Copy should project for one screen.
+ *
+ * A localhost `/snapshot` can be only the server/source shell while the user
+ * is selecting a hydrated runtime node. In that case the rendered layer
+ * snapshot owns the selection id namespace. Inline screens continue using the
+ * editable document so Alpine templates and authored markup round-trip.
+ */
+export function resolveClipboardLayerSourceHtml(args: {
+  runtimeProjectionEligible: boolean;
+  runtimeSnapshot?: ClipboardRuntimeLayerSnapshot;
+  liveSnapshotHtml?: string;
+  storedContent?: string;
+}): string {
+  if (
+    args.runtimeProjectionEligible &&
+    args.runtimeSnapshot &&
+    args.runtimeSnapshot.nodeCount > 0
+  ) {
+    return args.runtimeSnapshot.html;
+  }
+  return args.liveSnapshotHtml ?? args.storedContent ?? "";
+}

package/corpus/templates/design/app/pages/design-editor/clone-and-pen-edit.ts

@@ -145,6 +145,28 @@ function clearRootLayerPosition(element: Element) {
   host.style.bottom = "";
 }
 
+export function preserveClipboardLayerName(
+  layerHtml: string,
+  layerName: string | null | undefined,
+): string {
+  const normalizedName = layerName?.trim();
+  if (typeof window === "undefined" || !normalizedName) return layerHtml;
+  try {
+    const doc = new DOMParser().parseFromString(
+      `<template>${layerHtml}</template>`,
+      "text/html",
+    );
+    const root = doc.querySelector("template")?.content.firstElementChild;
+    if (!root) return layerHtml;
+    if (!root.hasAttribute("data-agent-native-layer-name")) {
+      root.setAttribute("data-agent-native-layer-name", normalizedName);
+    }
+    return root.outerHTML;
+  } catch {
+    return layerHtml;
+  }
+}
+
 function setRootLayerPosition(
   element: Element,
   position: { x: number; y: number },
@@ -215,6 +237,101 @@ function prepareClonedHtmlLayer(
   return { element: clone, rootNodeId, nodeIdMap };
 }
 
+const ACTIVE_CLONED_LAYER_ELEMENTS =
+  "script,style,template,noscript,link,meta,title,iframe,object,embed,base,foreignObject,video,audio,source,track,animate,set";
+
+function sanitizeClonedHtmlLayer(element: Element): boolean {
+  if (
+    /^(?:body|head|html)$/i.test(element.tagName) ||
+    element.matches(ACTIVE_CLONED_LAYER_ELEMENTS)
+  ) {
+    return false;
+  }
+  element
+    .querySelectorAll(ACTIVE_CLONED_LAYER_ELEMENTS)
+    .forEach((node) => node.remove());
+  [element, ...Array.from(element.querySelectorAll("*"))].forEach((node) => {
+    Array.from(node.attributes).forEach((attribute) => {
+      const name = attribute.name.toLowerCase();
+      const value = attribute.value;
+      if (
+        name.startsWith("on") ||
+        name === "srcdoc" ||
+        name === "autofocus" ||
+        name === "action" ||
+        name === "formaction" ||
+        /(?:javascript|vbscript)\s*:/i.test(value) ||
+        /data\s*:\s*text\/html/i.test(value)
+      ) {
+        node.removeAttribute(attribute.name);
+      }
+    });
+  });
+  return true;
+}
+
+/**
+ * Prepare clipboard subtrees for RuntimeStructureInsertRequest without ever
+ * parsing the URL-backed destination as a document. Runtime snapshots already
+ * contain sanitized provenance and resolved inline styles; those inert
+ * attributes survive while active markup is stripped again at this boundary.
+ */
+export function prepareClonedHtmlLayersForLiveInsert(
+  destinationContent: string,
+  layerHtmls: string[],
+  options: {
+    stripRootPosition?: boolean;
+    positions?: Array<{ x: number; y: number } | null | undefined>;
+    styleSnapshots?: Array<PortableStyleSnapshot | null | undefined>;
+  } = {},
+): {
+  destinationContent: string;
+  htmlFragments: string[];
+  rootNodeIds: string[];
+  nodeIdMap: Map<string, string>;
+} | null {
+  if (
+    typeof window === "undefined" ||
+    layerHtmls.length === 0 ||
+    !isStandaloneHttpUrl(destinationContent)
+  ) {
+    return null;
+  }
+  try {
+    const doc = document.implementation.createHTMLDocument("");
+    const htmlFragments: string[] = [];
+    const rootNodeIds: string[] = [];
+    const nodeIdMap = new Map<string, string>();
+    layerHtmls.forEach((layerHtml, index) => {
+      const prepared = prepareClonedHtmlLayer(
+        doc,
+        layerHtml,
+        options.styleSnapshots?.[index] ?? undefined,
+      );
+      if (!prepared) return;
+      const position = options.positions?.[index];
+      if (position) {
+        setRootLayerPosition(prepared.element, position);
+      } else if (options.stripRootPosition) {
+        clearRootLayerPosition(prepared.element);
+      }
+      if (!sanitizeClonedHtmlLayer(prepared.element)) return;
+      rootNodeIds.push(prepared.rootNodeId);
+      prepared.nodeIdMap.forEach((value, key) => nodeIdMap.set(key, value));
+      htmlFragments.push(prepared.element.outerHTML);
+    });
+    if (htmlFragments.length !== layerHtmls.length) return null;
+    return {
+      destinationContent,
+      htmlFragments,
+      rootNodeIds,
+      nodeIdMap,
+    };
+  } catch {
+    return null;
+  }
+}
+
 export function insertClonedHtmlLayers(
   content: string,
   layerHtmls: string[],

package/corpus/templates/design/app/pages/design-editor/code-layer-state.ts

@@ -400,7 +400,9 @@ function provenanceForCodeLayerNode(
     declaredFramework === "html" ||
     declaredFramework === "react" ||
     declaredFramework === "vue" ||
-    declaredFramework === "svelte"
+    declaredFramework === "svelte" ||
+    declaredFramework === "angular" ||
+    declaredFramework === "lwc"
       ? (declaredFramework as ElementProvenanceFramework)
       : undefined;
   const ownerSourceFile = node.dataAttributes["data-source-owner-file"]?.trim();