@arronqzy/react-view 1.0.18 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "files": [
     "src",
     "dist",
@@ -30,14 +30,14 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.36.2",
-    "@arronqzy/ui": "1.0.6",
-    "@arronqzy/blueprint-dsl": "1.0.9",
     "@arronqzy/i18n": "0.1.7",
+    "@arronqzy/blueprint-dsl": "1.0.9",
+    "@arronqzy/ui": "1.0.6",
     "@arronqzy/rx-store": "1.0.5",
+    "@arronqzy/react-blueprint": "1.0.11",
     "@arronqzy/view-scene3d": "0.1.2",
     "@arronqzy/view-table": "0.1.5",
-    "@arronqzy/webllm-assistant": "0.1.9",
-    "@arronqzy/react-blueprint": "1.0.11"
+    "@arronqzy/webllm-assistant": "0.1.9"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",

package/src/panel/I18nRoot.tsx

@@ -0,0 +1,21 @@
+import { I18nProvider } from "@arronqzy/i18n/react";
+import type { Locale } from "@arronqzy/i18n";
+import type { ReactNode } from "react";
+
+export type I18nRootProps = {
+  children: ReactNode;
+  locale?: Locale | null;
+  onLocaleChange?: (locale: Locale) => void;
+};
+
+/** Ensures panel / preview subtree always has i18n context (host apps, duplicate package graphs). */
+export function I18nRoot({ children, locale, onLocaleChange }: I18nRootProps) {
+  return (
+    <I18nProvider locale={locale} onLocaleChange={onLocaleChange}>
+      {children}
+    </I18nProvider>
+  );
+}
+
+export { I18nProvider } from "@arronqzy/i18n/react";
+export type { Locale } from "@arronqzy/i18n";

package/src/panel/ReactViewOnlinePreview.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useI18n } from "@arronqzy/i18n/react";
+import type { Locale } from "@arronqzy/i18n";
 import {
   BlueprintGraph,
   documentToRunnableGraph,
@@ -41,6 +42,7 @@ import {
 import { applyPreviewSceneFill, readOutputScale } from "./utils/outputScale";
 import { capturePreviewSceneElement } from "./library/capture-preview-snapshot";
 import { registerPreviewSnapshotProvider } from "./library/preview-snapshot";
+import { I18nRoot } from "./I18nRoot";
 
 const PREVIEW_BOOT_PHASES: PageLifecyclePhase[] = ["mounted"];
 
@@ -50,6 +52,8 @@ export type ReactViewOnlinePreviewProps = {
   previewInstanceId?: string;
   /** 直接传入完整工作区数据，用于外部持久化后预览 */
   workspace?: WorkspaceProjectRecord | null;
+  locale?: Locale | null;
+  onLocaleChange?: (locale: Locale) => void;
 };
 
 function applyTitleIcon(titleIconDataUrl?: string) {
@@ -71,6 +75,18 @@ async function loadWorkspaceRecord(projectId: string): Promise<WorkspaceProjectR
 }
 
 export function ReactViewOnlinePreview({
+  locale,
+  onLocaleChange,
+  ...rest
+}: ReactViewOnlinePreviewProps) {
+  return (
+    <I18nRoot locale={locale} onLocaleChange={onLocaleChange}>
+      <ReactViewOnlinePreviewInner {...rest} />
+    </I18nRoot>
+  );
+}
+
+function ReactViewOnlinePreviewInner({
   projectId,
   previewInstanceId,
   workspace = null,

package/src/panel/ReactViewPanel.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useI18n } from "@arronqzy/i18n/react";
+import type { Locale } from "@arronqzy/i18n";
 import type { State } from "@arronqzy/rx-store";
 import type { PanelElement } from "./types";
 
@@ -78,6 +79,7 @@ import {
   useViewScopeStoreVersion,
 } from "./scope/view-scope-store";
 import { resolvePanelElementScope } from "./utils/scope-template";
+import { I18nRoot } from "./I18nRoot";
 import { getPanelMessages } from "./constants/messages";
 import { PANEL_Z_INDEX } from "./constants/zIndex";
 import { useRafThrottledScroll } from "./hooks/useRafThrottledScroll";
@@ -362,9 +364,12 @@ export type ReactViewPanelProps = {
   className?: string;
   /** 外部传入的完整工作区数据，挂载后自动渲染 */
   initialWorkspace?: WorkspaceProjectRecord | null;
+  /** 界面语言；省略时按 localStorage / 浏览器语言解析 */
+  locale?: Locale | null;
+  onLocaleChange?: (locale: Locale) => void;
 };
 
-export function ReactViewPanel({
+function ReactViewPanelInner({
   initialZoom = 1,
   className,
   initialWorkspace = null,
@@ -3578,3 +3583,15 @@ export function ReactViewPanel({
     </div>
   );
 }
+
+export function ReactViewPanel({
+  locale,
+  onLocaleChange,
+  ...rest
+}: ReactViewPanelProps) {
+  return (
+    <I18nRoot locale={locale} onLocaleChange={onLocaleChange}>
+      <ReactViewPanelInner {...rest} />
+    </I18nRoot>
+  );
+}

package/src/panel/index.tsx

@@ -1,3 +1,5 @@
 export * from "./ReactViewPanel";
 export * from "./ReactViewOnlinePreview";
+export { I18nRoot, I18nProvider } from "./I18nRoot";
+export type { I18nRootProps, Locale } from "./I18nRoot";
 export type * from "./types";

package/src/panel/library/capture-preview-snapshot.ts

@@ -1,3 +1,5 @@
+import type { PanelElement } from "../types";
+
 const STYLE_PROPS = [
   "display",
   "position",
@@ -42,15 +44,187 @@ const STYLE_PROPS = [
   "zIndex",
 ] as const;
 
-function loadImage(src: string): Promise<HTMLImageElement> {
+function loadImage(
+  src: string,
+  crossOrigin?: "anonymous" | "use-credentials"
+): Promise<HTMLImageElement> {
   return new Promise((resolve, reject) => {
     const img = new Image();
+    if (crossOrigin && !src.startsWith("data:") && !src.startsWith("blob:")) {
+      img.crossOrigin = crossOrigin;
+    }
     img.onload = () => resolve(img);
     img.onerror = () => reject(new Error("image-load-failed"));
     img.src = src;
   });
 }
 
+function canvasToDataUrl(
+  canvas: HTMLCanvasElement,
+  mimeType = "image/png",
+  quality?: number
+): string | null {
+  try {
+    return canvas.toDataURL(mimeType, quality);
+  } catch {
+    return null;
+  }
+}
+
+function blobToDataUrl(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result ?? ""));
+    reader.onerror = () => reject(new Error("file-read-failed"));
+    reader.readAsDataURL(blob);
+  });
+}
+
+function absoluteUrl(src: string): string {
+  try {
+    return new URL(src, document.baseURI).href;
+  } catch {
+    return src;
+  }
+}
+
+async function urlToDataUrl(src: string): Promise<string | null> {
+  if (!src || src === "none") return null;
+  if (src.startsWith("data:")) return src;
+
+  const href = absoluteUrl(src);
+  const controller = new AbortController();
+  const timer = window.setTimeout(() => controller.abort(), 5000);
+  try {
+    const res = await fetch(href, { signal: controller.signal });
+    if (res.ok) {
+      return blobToDataUrl(await res.blob());
+    }
+  } catch {
+    // CORS / network: fall through to image + anonymous canvas
+  } finally {
+    window.clearTimeout(timer);
+  }
+
+  try {
+    const img = await loadImage(href, "anonymous");
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, img.naturalWidth || img.width);
+    canvas.height = Math.max(1, img.naturalHeight || img.height);
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    ctx.drawImage(img, 0, 0);
+    return canvasToDataUrl(canvas);
+  } catch {
+    return null;
+  }
+}
+
+function parseCssUrl(value: string | undefined | null): string | null {
+  if (!value) return null;
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === "none") return null;
+  const start = trimmed.indexOf("url(");
+  if (start < 0) return null;
+  let i = start + 4;
+  while (i < trimmed.length && /\s/.test(trimmed[i]!)) i += 1;
+  const quote = trimmed[i] === '"' || trimmed[i] === "'" ? trimmed[i]! : "";
+  if (quote) i += 1;
+  const end = quote ? trimmed.lastIndexOf(quote) : trimmed.lastIndexOf(")");
+  if (end <= i) return null;
+  const url = trimmed.slice(i, end).trim();
+  return url && url !== "none" ? url : null;
+}
+
+async function replaceCssUrls(value: string): Promise<string> {
+  const url = parseCssUrl(value);
+  if (!url || url.startsWith("data:")) return value;
+  const dataUrl = await urlToDataUrl(url);
+  if (!dataUrl) return value.replace(/url\(([\s\S]*?)\)/, "none");
+  return value.replace(/url\(([\s\S]*?)\)/, `url("${dataUrl}")`);
+}
+
+async function inlineStyleUrls(el: HTMLElement) {
+  const updates: Array<[string, string]> = [];
+  for (let i = 0; i < el.style.length; i += 1) {
+    const prop = el.style.item(i);
+    const value = el.style.getPropertyValue(prop);
+    if (value.includes("url(")) {
+      updates.push([prop, await replaceCssUrls(value)]);
+    }
+  }
+  for (const [prop, value] of updates) {
+    el.style.setProperty(prop, value);
+  }
+}
+
+async function inlineCloneResources(root: HTMLElement) {
+  const images = Array.from(root.querySelectorAll("img"));
+  await Promise.all(
+    images.map(async (img) => {
+      const src = img.currentSrc || img.getAttribute("src") || "";
+      const dataUrl = await urlToDataUrl(src);
+      if (dataUrl) {
+        img.setAttribute("src", dataUrl);
+        img.removeAttribute("srcset");
+        img.removeAttribute("crossorigin");
+      } else {
+        img.removeAttribute("src");
+        img.removeAttribute("srcset");
+      }
+    })
+  );
+
+  const elements = [root, ...Array.from(root.querySelectorAll<HTMLElement>("*"))];
+  await Promise.all(elements.map((el) => inlineStyleUrls(el)));
+}
+
+function fallbackNodeDataUrl(node: HTMLElement, width: number, height: number): string {
+  const emptyPng =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==";
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, width);
+  canvas.height = Math.max(1, height);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return emptyPng;
+  const bg = window.getComputedStyle(node).backgroundColor;
+  ctx.fillStyle = bg && bg !== "rgba(0, 0, 0, 0)" ? bg : "#ffffff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  return canvasToDataUrl(canvas) ?? emptyPng;
+}
+
+async function sourceToSafeImage(source: CanvasImageSource): Promise<HTMLImageElement | null> {
+  try {
+    if (source instanceof HTMLCanvasElement) {
+      const dataUrl = canvasToDataUrl(source);
+      return dataUrl ? loadImage(dataUrl) : null;
+    }
+    if (!(source instanceof HTMLImageElement)) return null;
+    const src = source.currentSrc || source.src;
+    if (!src) return null;
+    if (src.startsWith("data:")) {
+      return source.complete ? source : loadImage(src);
+    }
+    try {
+      const canvas = document.createElement("canvas");
+      canvas.width = Math.max(1, source.naturalWidth || source.width);
+      canvas.height = Math.max(1, source.naturalHeight || source.height);
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.drawImage(source, 0, 0);
+        const dataUrl = canvasToDataUrl(canvas);
+        if (dataUrl) return loadImage(dataUrl);
+      }
+    } catch {
+      // image is cross-origin without CORS; refetch below
+    }
+    const fetched = await urlToDataUrl(src);
+    return fetched ? loadImage(fetched) : null;
+  } catch {
+    return null;
+  }
+}
+
 function inlineComputedStyles(source: Element, target: Element) {
   if (!(source instanceof HTMLElement) || !(target instanceof HTMLElement)) return;
   const computed = window.getComputedStyle(source);
@@ -79,17 +253,51 @@ function replaceCanvasesInClone(source: Element, clone: Element) {
   sourceCanvases.forEach((srcCanvas, index) => {
     const clonedCanvas = cloneCanvases[index];
     if (!clonedCanvas) return;
+    const dataUrl = canvasToDataUrl(srcCanvas);
+    if (!dataUrl) {
+      clonedCanvas.remove();
+      return;
+    }
+    const img = document.createElement("img");
+    img.src = dataUrl;
+    img.style.width = "100%";
+    img.style.height = "100%";
+    img.style.objectFit = "fill";
+    img.style.display = "block";
+    clonedCanvas.replaceWith(img);
+  });
+}
+
+function replaceVideosInClone(source: Element, clone: Element) {
+  const sourceVideos = Array.from(source.querySelectorAll("video"));
+  const cloneVideos = Array.from(clone.querySelectorAll("video"));
+  sourceVideos.forEach((video, index) => {
+    const clonedVideo = cloneVideos[index];
+    if (!clonedVideo) return;
     try {
-      const dataUrl = srcCanvas.toDataURL("image/png");
+      const canvas = document.createElement("canvas");
+      canvas.width = Math.max(1, video.videoWidth || video.clientWidth);
+      canvas.height = Math.max(1, video.videoHeight || video.clientHeight);
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        clonedVideo.remove();
+        return;
+      }
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      const dataUrl = canvasToDataUrl(canvas);
+      if (!dataUrl) {
+        clonedVideo.remove();
+        return;
+      }
       const img = document.createElement("img");
       img.src = dataUrl;
       img.style.width = "100%";
       img.style.height = "100%";
-      img.style.objectFit = "fill";
+      img.style.objectFit = "contain";
       img.style.display = "block";
-      clonedCanvas.replaceWith(img);
+      clonedVideo.replaceWith(img);
     } catch {
-      clonedCanvas.remove();
+      clonedVideo.remove();
     }
   });
 }
@@ -98,6 +306,8 @@ async function nodeToDataUrlViaSvg(node: HTMLElement, width: number, height: num
   const clone = node.cloneNode(true) as HTMLElement;
   inlineComputedStyles(node, clone);
   replaceCanvasesInClone(node, clone);
+  replaceVideosInClone(node, clone);
+  await inlineCloneResources(clone);
   clone.style.width = `${width}px`;
   clone.style.height = `${height}px`;
   clone.style.margin = "0";
@@ -130,12 +340,69 @@ async function nodeToDataUrlViaSvg(node: HTMLElement, width: number, height: num
     const ctx = canvas.getContext("2d");
     if (!ctx) throw new Error("canvas-context-failed");
     ctx.drawImage(img, 0, 0);
-    return canvas.toDataURL("image/png");
+    return canvasToDataUrl(canvas) ?? fallbackNodeDataUrl(node, width, height);
+  } catch {
+    return fallbackNodeDataUrl(node, width, height);
   } finally {
     URL.revokeObjectURL(url);
   }
 }
 
+function drawFittedImage(
+  ctx: CanvasRenderingContext2D,
+  img: HTMLImageElement,
+  width: number,
+  height: number,
+  backgroundSize: string
+) {
+  const iw = Math.max(1, img.naturalWidth || img.width);
+  const ih = Math.max(1, img.naturalHeight || img.height);
+  if (backgroundSize === "cover" || backgroundSize === "contain") {
+    const scale =
+      backgroundSize === "cover"
+        ? Math.max(width / iw, height / ih)
+        : Math.min(width / iw, height / ih);
+    const dw = iw * scale;
+    const dh = ih * scale;
+    ctx.drawImage(img, (width - dw) / 2, (height - dh) / 2, dw, dh);
+    return;
+  }
+  ctx.drawImage(img, 0, 0, width, height);
+}
+
+async function paintCssBackgroundToImage(
+  node: HTMLElement,
+  width: number,
+  height: number
+): Promise<HTMLImageElement | null> {
+  const style = window.getComputedStyle(node);
+  const url =
+    parseCssUrl(node.style.backgroundImage) ??
+    parseCssUrl(style.backgroundImage);
+  if (!url) return null;
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  const bgColor = style.backgroundColor;
+  if (bgColor && bgColor !== "rgba(0, 0, 0, 0)") {
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, width, height);
+  }
+  const dataUrl = url.startsWith("data:") ? url : await urlToDataUrl(url);
+  if (!dataUrl) return null;
+  try {
+    const img = await loadImage(dataUrl);
+    drawFittedImage(ctx, img, width, height, style.backgroundSize || "");
+  } catch {
+    return null;
+  }
+  const out = canvasToDataUrl(canvas);
+  return out ? loadImage(out) : null;
+}
+
 async function drawNodeOntoCanvas(
   ctx: CanvasRenderingContext2D,
   node: HTMLElement,
@@ -147,11 +414,11 @@ async function drawNodeOntoCanvas(
 ) {
   const w = Math.max(1, width);
   const h = Math.max(1, height);
-  let source: CanvasImageSource | null = null;
+  let image: HTMLImageElement | null = null;
 
   const canvases = Array.from(node.querySelectorAll("canvas"));
   if (canvases.length === 1) {
-    source = canvases[0]!;
+    image = await sourceToSafeImage(canvases[0]!);
   } else if (canvases.length > 1) {
     const merged = document.createElement("canvas");
     merged.width = w;
@@ -159,18 +426,16 @@ async function drawNodeOntoCanvas(
     const mctx = merged.getContext("2d");
     if (mctx) {
       for (const canvas of canvases) {
-        try {
-          mctx.drawImage(canvas, 0, 0, w, h);
-        } catch {
-          // ignore tainted canvas
-        }
+        const safe = await sourceToSafeImage(canvas);
+        if (!safe) continue;
+        mctx.drawImage(safe, 0, 0, w, h);
       }
-      source = merged;
+      image = await sourceToSafeImage(merged);
     }
   } else {
     const imgs = Array.from(node.querySelectorAll("img"));
     if (imgs.length === 1) {
-      source = imgs[0]!;
+      image = await sourceToSafeImage(imgs[0]!);
     } else if (imgs.length > 1) {
       const merged = document.createElement("canvas");
       merged.width = w;
@@ -178,30 +443,20 @@ async function drawNodeOntoCanvas(
       const mctx = merged.getContext("2d");
       if (mctx) {
         for (const img of imgs) {
-          try {
-            mctx.drawImage(img, 0, 0, w, h);
-          } catch {
-            // ignore
-          }
+          const safe = await sourceToSafeImage(img);
+          if (!safe) continue;
+          mctx.drawImage(safe, 0, 0, w, h);
         }
-        source = merged;
+        image = await sourceToSafeImage(merged);
       }
     }
   }
 
-  let image: HTMLImageElement;
-  if (source) {
-    if (source instanceof HTMLImageElement) {
-      image = source;
-      if (!image.complete) await loadImage(image.src);
-    } else {
-      const dataUrl =
-        source instanceof HTMLCanvasElement
-          ? source.toDataURL("image/png")
-          : "";
-      image = await loadImage(dataUrl);
-    }
-  } else {
+  if (!image) {
+    image = await paintCssBackgroundToImage(node, w, h);
+  }
+
+  if (!image) {
     const dataUrl = await nodeToDataUrlViaSvg(node, w, h);
     image = await loadImage(dataUrl);
   }
@@ -213,6 +468,170 @@ async function drawNodeOntoCanvas(
   ctx.restore();
 }
 
+async function loadUrlAsImage(url: string): Promise<HTMLImageElement | null> {
+  try {
+    if (url.startsWith("data:") || url.startsWith("blob:")) {
+      return await loadImage(url);
+    }
+    const dataUrl = await urlToDataUrl(url);
+    return dataUrl ? loadImage(dataUrl) : null;
+  } catch {
+    return null;
+  }
+}
+
+function htmlToPlainText(html: string): string {
+  const box = document.createElement("div");
+  box.innerHTML = html;
+  return (box.innerText || box.textContent || "").trim();
+}
+
+function drawWrappedText(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  width: number,
+  height: number,
+  options: {
+    fontSize: number;
+    fontFamily: string;
+    fontWeight: string;
+    color: string;
+    align: CanvasTextAlign;
+    lineHeight: number;
+  }
+) {
+  const padding = 8;
+  const maxWidth = Math.max(1, width - padding * 2);
+  ctx.fillStyle = options.color;
+  ctx.font = `${options.fontWeight} ${options.fontSize}px ${options.fontFamily}`;
+  ctx.textAlign = options.align || "left";
+  ctx.textBaseline = "top";
+  const x =
+    options.align === "center" ? width / 2 : options.align === "right" ? width - padding : padding;
+  let y = padding;
+  for (const paragraph of text.split("\n")) {
+    const words = paragraph.length ? paragraph.split(/(\s+)/) : [""];
+    let line = "";
+    for (const word of words) {
+      const next = line + word;
+      if (ctx.measureText(next).width > maxWidth && line) {
+        ctx.fillText(line, x, y, maxWidth);
+        y += options.lineHeight;
+        if (y > height - padding) return;
+        line = word.trimStart();
+      } else {
+        line = next;
+      }
+    }
+    ctx.fillText(line, x, y, maxWidth);
+    y += options.lineHeight;
+    if (y > height - padding) return;
+  }
+}
+
+async function paintPanelElementOntoCanvas(
+  ctx: CanvasRenderingContext2D,
+  el: PanelElement,
+  liveNode: HTMLElement | null,
+  originX: number,
+  originY: number
+) {
+  const w = Math.max(1, el.width);
+  const h = Math.max(1, el.height);
+  const x = el.x - originX;
+  const y = el.y - originY;
+
+  ctx.save();
+  ctx.translate(x + w / 2, y + h / 2);
+  ctx.rotate(((el.rotate ?? 0) * Math.PI) / 180);
+  ctx.beginPath();
+  ctx.rect(-w / 2, -h / 2, w, h);
+  ctx.clip();
+  ctx.translate(-w / 2, -h / 2);
+
+  const computed = liveNode ? window.getComputedStyle(liveNode) : null;
+  const bgColor =
+    el.style?.backgroundColor ||
+    (computed && computed.backgroundColor !== "rgba(0, 0, 0, 0)"
+      ? computed.backgroundColor
+      : "");
+  if (bgColor) {
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, w, h);
+  }
+
+  const bgUrl =
+    parseCssUrl(el.style?.backgroundImage) ??
+    parseCssUrl(liveNode?.style.backgroundImage) ??
+    parseCssUrl(computed?.backgroundImage);
+  if (bgUrl) {
+    const img = await loadUrlAsImage(bgUrl);
+    if (img) {
+      drawFittedImage(
+        ctx,
+        img,
+        w,
+        h,
+        el.style?.backgroundSize || computed?.backgroundSize || ""
+      );
+    }
+  }
+
+  if (liveNode) {
+    for (const canvas of Array.from(liveNode.querySelectorAll("canvas"))) {
+      const safe = await sourceToSafeImage(canvas);
+      if (safe) ctx.drawImage(safe, 0, 0, w, h);
+    }
+    for (const img of Array.from(liveNode.querySelectorAll("img"))) {
+      const safe = await sourceToSafeImage(img);
+      if (safe) ctx.drawImage(safe, 0, 0, w, h);
+    }
+    const video = liveNode.querySelector("video");
+    if (video) {
+      try {
+        ctx.drawImage(video, 0, 0, w, h);
+      } catch {
+        // tainted video frame
+      }
+    }
+  }
+
+  if (el.materialType === "text") {
+    const textNode = liveNode?.querySelector<HTMLElement>("[data-panel-user-text]");
+    const text = htmlToPlainText(el.textHtml || textNode?.innerHTML || "");
+    if (text) {
+      const fontSize = el.textFontSize ?? 14;
+      drawWrappedText(ctx, text, w, h, {
+        fontSize,
+        fontFamily: el.textFontFamily || "sans-serif",
+        fontWeight: String(el.textFontWeight || "400"),
+        color: el.textColor || computed?.color || "#111827",
+        align:
+          el.textAlign === "center" || el.textAlign === "right" || el.textAlign === "left"
+            ? el.textAlign
+            : "left",
+        lineHeight:
+          typeof el.textLineHeight === "number" ? el.textLineHeight : fontSize * 1.4,
+      });
+    }
+  }
+
+  if (
+    liveNode &&
+    (el.materialType === "reference" ||
+      el.materialType === "table" ||
+      el.materialType === "grid")
+  ) {
+    try {
+      await drawNodeOntoCanvas(ctx, liveNode, 0, 0, w, h, 0);
+    } catch {
+      // keep painted background / children
+    }
+  }
+
+  ctx.restore();
+}
+
 export type CapturePreviewSceneOptions = {
   backgroundColor?: string;
   maxWidth?: number;
@@ -221,6 +640,76 @@ export type CapturePreviewSceneOptions = {
   quality?: number;
 };
 
+export type CapturePreviewLayerOptions = CapturePreviewSceneOptions & {
+  canvasRoot: HTMLElement | null;
+  elements: PanelElement[];
+};
+
+export async function capturePreviewLayerSnapshot(
+  options: CapturePreviewLayerOptions
+): Promise<string | null> {
+  const elements = options.elements;
+  if (!elements.length) return null;
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const el of elements) {
+    const w = Math.max(1, el.width);
+    const h = Math.max(1, el.height);
+    const rad = ((el.rotate ?? 0) * Math.PI) / 180;
+    const absCos = Math.abs(Math.cos(rad));
+    const absSin = Math.abs(Math.sin(rad));
+    const bw = w * absCos + h * absSin;
+    const bh = w * absSin + h * absCos;
+    const cx = el.x + w / 2;
+    const cy = el.y + h / 2;
+    minX = Math.min(minX, cx - bw / 2);
+    minY = Math.min(minY, cy - bh / 2);
+    maxX = Math.max(maxX, cx + bw / 2);
+    maxY = Math.max(maxY, cy + bh / 2);
+  }
+  const width = Math.max(1, Math.round(maxX - minX));
+  const height = Math.max(1, Math.round(maxY - minY));
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("canvas-context-failed");
+  ctx.fillStyle = options.backgroundColor ?? "#ffffff";
+  ctx.fillRect(0, 0, width, height);
+
+  const sorted = [...elements].sort((a, b) => (a.zIndex ?? 1) - (b.zIndex ?? 1));
+  for (const el of sorted) {
+    const liveNode =
+      options.canvasRoot?.querySelector<HTMLElement>(
+        `[data-element-id="${el.id.replace(/"/g, '\\"')}"]`
+      ) ?? null;
+    try {
+      await paintPanelElementOntoCanvas(ctx, el, liveNode, minX, minY);
+    } catch {
+      // keep remaining nodes
+    }
+  }
+
+  const mimeType = options.mimeType ?? "image/png";
+  const quality = options.quality ?? 0.92;
+  let dataUrl = canvasToDataUrl(canvas, mimeType, quality);
+  if (!dataUrl) return null;
+  if (options.maxWidth || options.maxHeight) {
+    dataUrl = await scaleDataUrl(
+      dataUrl,
+      options.maxWidth,
+      options.maxHeight,
+      mimeType,
+      quality
+    );
+  }
+  return dataUrl;
+}
+
 export async function capturePreviewSceneElement(
   scene: HTMLElement,
   sceneWidth: number,
@@ -238,7 +727,9 @@ export async function capturePreviewSceneElement(
   ctx.fillStyle = options?.backgroundColor ?? "#ffffff";
   ctx.fillRect(0, 0, width, height);
 
-  const nodes = Array.from(scene.querySelectorAll<HTMLElement>("[data-element-id]"));
+  const nodes = Array.from(scene.querySelectorAll<HTMLElement>("[data-element-id]")).filter(
+    (node) => !node.parentElement?.closest("[data-element-id]")
+  );
   const sorted = nodes
     .map((node) => {
       const zIndex = Number.parseInt(window.getComputedStyle(node).zIndex || "1", 10);
@@ -254,12 +745,19 @@ export async function capturePreviewSceneElement(
     const transform = node.style.transform || "";
     const rotateMatch = /rotate\(([-\d.]+)deg\)/.exec(transform);
     const rotateDeg = rotateMatch ? Number.parseFloat(rotateMatch[1]!) : 0;
-    await drawNodeOntoCanvas(ctx, node, left, top, nodeWidth, nodeHeight, rotateDeg);
+    try {
+      await drawNodeOntoCanvas(ctx, node, left, top, nodeWidth, nodeHeight, rotateDeg);
+    } catch {
+      // skip nodes that cannot be snapshotted (tainted canvas / CORS)
+    }
   }
 
   const mimeType = options?.mimeType ?? "image/png";
   const quality = options?.quality ?? 0.92;
-  let dataUrl = canvas.toDataURL(mimeType, quality);
+  let dataUrl = canvasToDataUrl(canvas, mimeType, quality);
+  if (!dataUrl) {
+    throw new Error("preview-snapshot-tainted");
+  }
 
   const maxWidth = options?.maxWidth;
   const maxHeight = options?.maxHeight;
@@ -296,5 +794,5 @@ export async function scaleDataUrl(
   const ctx = canvas.getContext("2d");
   if (!ctx) return dataUrl;
   ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
-  return canvas.toDataURL(mimeType, quality);
+  return canvasToDataUrl(canvas, mimeType, quality) ?? dataUrl;
 }

package/src/panel/library/preview-snapshot.ts

@@ -5,6 +5,7 @@ import {
   resolvePreviewLayerElements,
 } from "../utils/panelStateIO";
 import {
+  capturePreviewLayerSnapshot,
   capturePreviewSceneElement,
   scaleDataUrl,
   type CapturePreviewSceneOptions,
@@ -223,16 +224,29 @@ export async function getPreviewSnapshot(
 export async function captureEditorPreviewSnapshot(
   options: BuildEditorPreviewSnapshotSceneOptions & GetPreviewSnapshotOptions
 ): Promise<string | null> {
-  const built = await buildEditorPreviewSnapshotScene(options);
-  if (!built) return null;
-  try {
-    return await capturePreviewSceneElement(
-      built.scene,
-      built.width,
-      built.height,
-      options
-    );
-  } finally {
-    disposePreviewSnapshotScene(built.scene);
+  const retryCount = options.retryCount ?? 0;
+  const layerElements = resolvePreviewLayerElements(
+    options.allElements,
+    options.layers,
+    options.activeLayerId
+  );
+  if (!layerElements.length) return null;
+
+  const mountedCount = layerElements.filter((el) =>
+    Boolean(options.canvasRoot?.querySelector(`[data-element-id="${el.id}"]`))
+  ).length;
+  if (mountedCount < layerElements.length && retryCount < 20) {
+    await new Promise((resolve) => window.setTimeout(resolve, 80));
+    return captureEditorPreviewSnapshot({ ...options, retryCount: retryCount + 1 });
   }
+
+  return capturePreviewLayerSnapshot({
+    canvasRoot: options.canvasRoot,
+    elements: layerElements,
+    backgroundColor: options.backgroundColor,
+    maxWidth: options.maxWidth,
+    maxHeight: options.maxHeight,
+    mimeType: options.mimeType,
+    quality: options.quality,
+  });
 }