@arronqzy/react-view 1.0.20 → 1.0.22

package/dist/styles.css

@@ -616,6 +616,10 @@ video {
   inset: 0px;
 }
 
+.inset-1\.5 {
+  inset: 0.375rem;
+}
+
 .inset-2 {
   inset: 0.5rem;
 }
@@ -645,6 +649,10 @@ video {
   left: 0.125rem;
 }
 
+.left-1 {
+  left: 0.25rem;
+}
+
 .left-1\/2 {
   left: 50%;
 }
@@ -653,6 +661,10 @@ video {
   left: 0.5rem;
 }
 
+.left-6 {
+  left: 1.5rem;
+}
+
 .left-\[var\(--rv-ruler-size\)\] {
   left: var(--rv-ruler-size);
 }
@@ -677,10 +689,18 @@ video {
   top: 0.125rem;
 }
 
+.top-1 {
+  top: 0.25rem;
+}
+
 .top-2 {
   top: 0.5rem;
 }
 
+.top-4 {
+  top: 1rem;
+}
+
 .top-\[calc\(100\%\+6px\)\] {
   top: calc(100% + 6px);
 }
@@ -1513,6 +1533,10 @@ video {
   border-radius: 1rem;
 }
 
+.rounded-\[2px\] {
+  border-radius: 2px;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1533,6 +1557,15 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded-l {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
+.rounded-tl {
+  border-top-left-radius: 0.25rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1890,10 +1923,22 @@ video {
   background-color: hsl(var(--primary) / 0.15);
 }
 
+.bg-primary\/30 {
+  background-color: hsl(var(--primary) / 0.3);
+}
+
 .bg-primary\/35 {
   background-color: hsl(var(--primary) / 0.35);
 }
 
+.bg-primary\/40 {
+  background-color: hsl(var(--primary) / 0.4);
+}
+
+.bg-primary\/45 {
+  background-color: hsl(var(--primary) / 0.45);
+}
+
 .bg-primary\/5 {
   background-color: hsl(var(--primary) / 0.05);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "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/i18n": "0.1.7",
-    "@arronqzy/blueprint-dsl": "1.0.9",
+    "@arronqzy/i18n": "0.1.8",
     "@arronqzy/ui": "1.0.6",
     "@arronqzy/rx-store": "1.0.5",
-    "@arronqzy/react-blueprint": "1.0.11",
+    "@arronqzy/react-blueprint": "1.0.13",
+    "@arronqzy/blueprint-dsl": "1.0.11",
     "@arronqzy/view-scene3d": "0.1.2",
     "@arronqzy/view-table": "0.1.5",
-    "@arronqzy/webllm-assistant": "0.1.9"
+    "@arronqzy/webllm-assistant": "0.1.10"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",

package/readme.md

@@ -147,7 +147,12 @@ const dataUrl = await getPreviewSnapshot({
 | `parseOnlinePreviewSearchParams` | 解析预览 URL 参数 |
 | `addEventSubscription` | 订阅工作区事件，返回 `{ unsubscribe }` |
 | `AbuilderEvents` | 工作区事件名常量 |
-| `getPreviewSnapshot` | 获取预览画面 base64 缩略图 |
+| `getPreviewSnapshot` | 获取预览画面 base64 缩略图（仅本包 / `@arronqzy/abuilder`） |
+| `parseWorkspaceData` / `validateWorkspaceData` | 解析或校验完整工作区；`parse` 的 `value` 可作 `initialWorkspace` |
+| `parseViewData` / `validateViewData` | 解析或校验视图 `panelState` |
+| `parseBlueprintData` / `validateBlueprintData` | 解析或校验蓝图文档 |
+| `createEmptyWorkspace` | 构造空工作区记录 |
+| `createWorkspaceProjectId` | 生成工作区 ID |
 | `WorkspaceData` / `WorkspaceProjectRecord` | 完整工作区数据类型 |
 | `createView` / `createAction` 等 | 视图 DSL 与指令扩展（`src/core`） |
 

package/src/panel/I18nRoot.tsx

@@ -1,4 +1,6 @@
 import { I18nProvider } from "@arronqzy/i18n/react";
+import { LOCALE_STORAGE_KEY } from "@arronqzy/i18n";
+import { appStorageKey } from "@arronqzy/blueprint-dsl";
 import type { Locale } from "@arronqzy/i18n";
 import type { ReactNode } from "react";
 
@@ -6,12 +8,22 @@ export type I18nRootProps = {
   children: ReactNode;
   locale?: Locale | null;
   onLocaleChange?: (locale: Locale) => void;
+  nameSpace?: string | null;
 };
 
 /** Ensures panel / preview subtree always has i18n context (host apps, duplicate package graphs). */
-export function I18nRoot({ children, locale, onLocaleChange }: I18nRootProps) {
+export function I18nRoot({
+  children,
+  locale,
+  onLocaleChange,
+  nameSpace,
+}: I18nRootProps) {
   return (
-    <I18nProvider locale={locale} onLocaleChange={onLocaleChange}>
+    <I18nProvider
+      locale={locale}
+      onLocaleChange={onLocaleChange}
+      storageKey={appStorageKey(LOCALE_STORAGE_KEY, nameSpace)}
+    >
       {children}
     </I18nProvider>
   );

package/src/panel/ReactViewOnlinePreview.tsx

@@ -54,6 +54,7 @@ export type ReactViewOnlinePreviewProps = {
   workspace?: WorkspaceProjectRecord | null;
   locale?: Locale | null;
   onLocaleChange?: (locale: Locale) => void;
+  nameSpace?: string | null;
 };
 
 function applyTitleIcon(titleIconDataUrl?: string) {
@@ -68,20 +69,24 @@ function applyTitleIcon(titleIconDataUrl?: string) {
   }
 }
 
-async function loadWorkspaceRecord(projectId: string): Promise<WorkspaceProjectRecord | null> {
-  const fromDb = await getWorkspaceProject(projectId);
+async function loadWorkspaceRecord(
+  projectId: string,
+  nameSpace?: string | null
+): Promise<WorkspaceProjectRecord | null> {
+  const fromDb = await getWorkspaceProject(projectId, nameSpace);
   if (fromDb) return fromDb;
-  return readWorkspacePreviewCache(projectId);
+  return readWorkspacePreviewCache(projectId, nameSpace);
 }
 
 export function ReactViewOnlinePreview({
   locale,
   onLocaleChange,
+  nameSpace,
   ...rest
 }: ReactViewOnlinePreviewProps) {
   return (
-    <I18nRoot locale={locale} onLocaleChange={onLocaleChange}>
-      <ReactViewOnlinePreviewInner {...rest} />
+    <I18nRoot locale={locale} onLocaleChange={onLocaleChange} nameSpace={nameSpace}>
+      <ReactViewOnlinePreviewInner nameSpace={nameSpace} {...rest} />
     </I18nRoot>
   );
 }
@@ -90,6 +95,7 @@ function ReactViewOnlinePreviewInner({
   projectId,
   previewInstanceId,
   workspace = null,
+  nameSpace = null,
 }: ReactViewOnlinePreviewProps) {
   const { t } = useI18n();
 
@@ -102,7 +108,7 @@ function ReactViewOnlinePreviewInner({
   >([]);
   const [layoutRevision, setLayoutRevision] = useState(0);
   const [layoutReady, setLayoutReady] = useState(false);
-  const [outputScale, setOutputScale] = useState(() => readOutputScale());
+  const [outputScale, setOutputScale] = useState(() => readOutputScale(nameSpace));
   const [fillScale, setFillScale] = useState({ scaleX: 1, scaleY: 1 });
 
   const sceneRef = useRef<HTMLDivElement | null>(null);
@@ -122,7 +128,9 @@ function ReactViewOnlinePreviewInner({
       setPanelState(normalized);
       setBlueprintGraph(BlueprintGraph.fromDocument(record.blueprintDocument));
       document.title =
-        record.productName.trim() || record.name || t("panel.workspace.previewDocTitle");
+        (typeof record.productName === "string" ? record.productName : "").trim() ||
+        record.name ||
+        t("panel.workspace.previewDocTitle");
       applyTitleIcon(record.titleIconDataUrl);
       setProjectRevision((v) => v + 1);
       return true;
@@ -141,7 +149,7 @@ function ReactViewOnlinePreviewInner({
       return;
     }
 
-    const record = await loadWorkspaceRecord(projectId);
+    const record = await loadWorkspaceRecord(projectId, nameSpace);
     if (!record) {
       setLoadError(t("panel.messages.workspaceNotFound"));
       setPanelState(null);
@@ -149,7 +157,7 @@ function ReactViewOnlinePreviewInner({
     }
 
     applyWorkspaceRecord(record);
-  }, [applyWorkspaceRecord, projectId, t, workspace]);
+  }, [applyWorkspaceRecord, nameSpace, projectId, t, workspace]);
 
   useEffect(() => {
     void loadProject();
@@ -159,8 +167,8 @@ function ReactViewOnlinePreviewInner({
     if (workspace || !projectId) return;
     return subscribeWorkspaceProjectUpdates(projectId, () => {
       void loadProject();
-    });
-  }, [loadProject, projectId, workspace]);
+    }, nameSpace);
+  }, [loadProject, nameSpace, projectId, workspace]);
 
   const layers = useMemo(
     () => (panelState ? parsePanelLayers(panelState) : []),
@@ -177,13 +185,13 @@ function ReactViewOnlinePreviewInner({
 
   useEffect(() => {
     let cancelled = false;
-    void listBlueprintLibrary().then((items) => {
+    void listBlueprintLibrary(nameSpace).then((items) => {
       if (!cancelled) setBlueprintLibraryItems(items);
     });
     return () => {
       cancelled = true;
     };
-  }, [projectRevision]);
+  }, [nameSpace, projectRevision]);
 
   const blueprintLibraryNameById = useMemo(
     () => new Map(blueprintLibraryItems.map((item) => [item.id, item.name])),
@@ -192,13 +200,13 @@ function ReactViewOnlinePreviewInner({
 
   const resolveLibraryBlueprint = useCallback<LibraryBlueprintResolver>(
     async (libraryBlueprintId) => {
-      const record = await getBlueprintLibraryRecord(libraryBlueprintId);
+      const record = await getBlueprintLibraryRecord(libraryBlueprintId, nameSpace);
       if (!record) return null;
-      const items = await listBlueprintLibrary();
+      const items = await listBlueprintLibrary(nameSpace);
       const nameById = new Map(items.map((item) => [item.id, item.name]));
       return documentToRunnableGraph(record.document, { libraryNameById: nameById });
     },
-    []
+    [nameSpace]
   );
 
   const handleViewScopeUpdate = useCallback(
@@ -251,7 +259,7 @@ function ReactViewOnlinePreviewInner({
   );
 
   const applySceneFit = useCallback(() => {
-    const enabled = readOutputScale();
+    const enabled = readOutputScale(nameSpace);
     setOutputScale(enabled);
     const fill = applyPreviewSceneFill(
       sceneRef.current,
@@ -262,7 +270,7 @@ function ReactViewOnlinePreviewInner({
     setFillScale({ scaleX: fill.scaleX, scaleY: fill.scaleY });
     setLayoutRevision((v) => v + 1);
     notifyPreviewLayoutChanged();
-  }, [sceneBounds.height, sceneBounds.width]);
+  }, [nameSpace, sceneBounds.height, sceneBounds.width]);
 
   useLayoutEffect(() => {
     if (!panelState || layerElements.length === 0) return;
@@ -451,13 +459,16 @@ function ReactViewOnlinePreviewInner({
 export function parseOnlinePreviewSearchParams(search: string): {
   projectId: string;
   previewInstanceId?: string;
+  nameSpace?: string;
 } | null {
   const params = new URLSearchParams(search);
   if (params.get("preview") !== "online") return null;
   const projectId = params.get("projectId") ?? params.get("id");
   if (!projectId) return null;
+  const nameSpace = (params.get("ns") ?? params.get("nameSpace") ?? "").trim();
   return {
     projectId,
     previewInstanceId: params.get("pid") ?? undefined,
+    nameSpace: nameSpace || undefined,
   };
 }

package/src/panel/ReactViewPanel.tsx

@@ -65,7 +65,7 @@ import {
   type BlueprintMetaDraft,
 } from "@arronqzy/react-blueprint";
 import type { LibraryBlueprintResolver } from "@arronqzy/blueprint-dsl";
-import { abortClockNode, collectArmedViewEventBindings, EVENT_NODE_TYPE, LIFECYCLE_NODE_TYPE } from "@arronqzy/blueprint-dsl";
+import { abortClockNode, appStorageKey, collectArmedViewEventBindings, EVENT_NODE_TYPE, LIFECYCLE_NODE_TYPE } from "@arronqzy/blueprint-dsl";
 import { WorkspaceStageSplit } from "./components/WorkspaceStageSplit";
 import {
   WorkspaceConfigSidebar,
@@ -362,22 +362,30 @@ function shouldClearSelectionOnBlank(target: HTMLElement | null) {
 export type ReactViewPanelProps = {
   initialZoom?: number;
   className?: string;
-  /** 外部传入的完整工作区数据，挂载后自动渲染 */
+  /** 外部传入的完整工作区数据，挂载后按这份数据完整渲染；空则显示空白，不自动打开 IndexedDB 记录 */
   initialWorkspace?: WorkspaceProjectRecord | null;
   /** 界面语言；省略时按 localStorage / 浏览器语言解析 */
   locale?: Locale | null;
   onLocaleChange?: (locale: Locale) => void;
+  /**
+   * 隔离本实例的 IndexedDB / localStorage / BroadcastChannel。
+   * 同一页面挂多个 App 时传入不同值，避免工作区、蓝图库、预览缓存互相覆盖。
+   * 省略或空字符串保持历史全局库名。
+   */
+  nameSpace?: string | null;
 };
 
 function ReactViewPanelInner({
   initialZoom = 1,
   className,
   initialWorkspace = null,
+  nameSpace = null,
 }: ReactViewPanelProps) {
   const { t, locale, setLocale } = useI18n();
   const messages = useMemo(() => getPanelMessages(t), [t]);
-  const THEME_STORAGE_KEY = "panel:theme";
-  const TITLE_ICON_STORAGE_KEY = "panel:titleIconDataUrl";
+  const THEME_STORAGE_KEY = appStorageKey("panel:theme", nameSpace);
+  const TITLE_ICON_STORAGE_KEY = appStorageKey("panel:titleIconDataUrl", nameSpace);
+  const FONT_SIZE_STORAGE_KEY = appStorageKey("panel:fontSize", nameSpace);
   const { setTheme } = useTheme();
   const themedScrollbarClass =
     "scrollbar-thin [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-muted/40 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/80 [&::-webkit-scrollbar-thumb]:hover:bg-border";
@@ -483,7 +491,7 @@ function ReactViewPanelInner({
   const [titleIconZoom, setTitleIconZoom] = useState(1.6);
   const [pendingPreviewLayerId, setPendingPreviewLayerId] = useState<string | null>(null);
   const [panelFontSize, setPanelFontSize] = useState<"sm" | "md" | "lg">("md");
-  const [outputScale, setOutputScale] = useState(() => readOutputScale());
+  const [outputScale, setOutputScale] = useState(() => readOutputScale(nameSpace));
   const [blueprintOpen, setBlueprintOpen] = useState(false);
   const [assistantOpen, setAssistantOpen] = useState(false);
   const [blueprintGraph, setBlueprintGraph] = useState(() => BlueprintGraph.empty());
@@ -577,35 +585,26 @@ function ReactViewPanelInner({
 
   useEffect(() => {
     try {
-      const stored = localStorage.getItem("panel:fontSize");
+      const stored = localStorage.getItem(FONT_SIZE_STORAGE_KEY);
       if (stored === "sm" || stored === "md" || stored === "lg") {
         setPanelFontSize(stored);
       }
     } catch {
       // ignore storage errors
     }
-  }, []);
+  }, [FONT_SIZE_STORAGE_KEY]);
 
   useEffect(() => {
     try {
-      localStorage.setItem("panel:fontSize", panelFontSize);
+      localStorage.setItem(FONT_SIZE_STORAGE_KEY, panelFontSize);
     } catch {
       // ignore storage errors
     }
-  }, [panelFontSize]);
-
-  useEffect(() => {
-    writeOutputScale(outputScale);
-  }, [outputScale]);
+  }, [FONT_SIZE_STORAGE_KEY, panelFontSize]);
 
   useEffect(() => {
-    try {
-      const stored = localStorage.getItem(TITLE_ICON_STORAGE_KEY) ?? "";
-      if (stored) setTitleIconDataUrl(stored);
-    } catch {
-      // ignore storage errors
-    }
-  }, [TITLE_ICON_STORAGE_KEY]);
+    writeOutputScale(outputScale, nameSpace);
+  }, [nameSpace, outputScale]);
 
   useEffect(() => {
     try {
@@ -755,6 +754,7 @@ function ReactViewPanelInner({
           | "lifecyclePhase"
           | "fetchConfig"
           | "jsonConfig"
+          | "storageConfig"
           | "logicConfig"
           | "clockConfig"
           | "eventConfig"
@@ -864,13 +864,13 @@ function ReactViewPanelInner({
 
   const resolveLibraryBlueprint = useCallback<LibraryBlueprintResolver>(
     async (libraryBlueprintId) => {
-      const record = await getBlueprintLibraryRecord(libraryBlueprintId);
+      const record = await getBlueprintLibraryRecord(libraryBlueprintId, nameSpace);
       if (!record) return null;
-      const items = await listBlueprintLibrary();
+      const items = await listBlueprintLibrary(nameSpace);
       const nameById = new Map(items.map((item) => [item.id, item.name]));
       return documentToRunnableGraph(record.document, { libraryNameById: nameById });
     },
-    []
+    [nameSpace]
   );
 
   const handleBlueprintExecutionBlocked = useCallback((message: string) => {
@@ -892,6 +892,7 @@ function ReactViewPanelInner({
     libraryNameById: blueprintLibraryNameById,
     onExecutionBlocked: handleBlueprintExecutionBlocked,
     onViewScopeUpdate: handleViewScopeUpdate,
+    nameSpace,
   });
 
   const { selectLifecycleNode, selectedLifecycleNodeId: debugLifecycleNodeId } =
@@ -993,9 +994,9 @@ function ReactViewPanelInner({
   );
 
   const refreshBlueprintLibrary = useCallback(async () => {
-    const items = await listBlueprintLibrary();
+    const items = await listBlueprintLibrary(nameSpace);
     setBlueprintLibraryItems(items);
-  }, []);
+  }, [nameSpace]);
 
   useEffect(() => {
     void refreshBlueprintLibrary();
@@ -1003,7 +1004,7 @@ function ReactViewPanelInner({
 
   const loadBlueprintFromLibrary = useCallback(
     async (id: string) => {
-      const record = await getBlueprintLibraryRecord(id);
+      const record = await getBlueprintLibraryRecord(id, nameSpace);
       if (!record) {
         toast({ title: t("panel.messages.blueprintNotFound") });
         void refreshBlueprintLibrary();
@@ -1022,7 +1023,7 @@ function ReactViewPanelInner({
         setBlueprintOpen(true);
       });
     },
-    [refreshBlueprintLibrary, t]
+    [nameSpace, refreshBlueprintLibrary, t]
   );
 
   const snapshotWorkspaceBlueprint = useCallback(() => {
@@ -1077,7 +1078,7 @@ function ReactViewPanelInner({
   const syncBlueprintToLibrary = useCallback(async () => {
     if (!activeBlueprintLibraryId) return;
     await runBusyTask(t("common.syncingBlueprint"), async () => {
-      const existing = await getBlueprintLibraryRecord(activeBlueprintLibraryId);
+      const existing = await getBlueprintLibraryRecord(activeBlueprintLibraryId, nameSpace);
       if (!existing) {
         toast({ title: t("panel.messages.blueprintNotFound") });
         void refreshBlueprintLibrary();
@@ -1093,7 +1094,7 @@ function ReactViewPanelInner({
         meta: blueprintMeta,
         source: existing.source,
       });
-      await putBlueprintLibraryRecord(record);
+      await putBlueprintLibraryRecord(record, nameSpace);
       setBlueprintSyncedDocument(blueprintGraph.document);
       await refreshBlueprintLibrary();
       toast({ title: messages.blueprintSynced(record.name) });
@@ -1104,6 +1105,7 @@ function ReactViewPanelInner({
     blueprintMeta,
     refreshBlueprintLibrary,
     t,
+    nameSpace,
   ]);
 
   const saveBlueprintToLibrary = useCallback(
@@ -1114,7 +1116,7 @@ function ReactViewPanelInner({
         let recordId = activeBlueprintLibraryId ?? undefined;
         let createdAt: number | undefined;
         if (activeBlueprintLibraryId) {
-          const existing = await getBlueprintLibraryRecord(activeBlueprintLibraryId);
+          const existing = await getBlueprintLibraryRecord(activeBlueprintLibraryId, nameSpace);
           if (existing?.source === "saved") {
             recordId = existing.id;
             createdAt = existing.createdAt;
@@ -1132,14 +1134,14 @@ function ReactViewPanelInner({
           meta,
           source: "saved",
         });
-        await putBlueprintLibraryRecord(record);
+        await putBlueprintLibraryRecord(record, nameSpace);
         setActiveBlueprintLibraryId(record.id);
         setBlueprintSyncedDocument(blueprintGraph.document);
         await refreshBlueprintLibrary();
         toast({ title: t("panel.messages.blueprintSavedLocal") });
       });
     },
-    [activeBlueprintLibraryId, blueprintGraph.document, refreshBlueprintLibrary, t]
+    [activeBlueprintLibraryId, blueprintGraph.document, nameSpace, refreshBlueprintLibrary, t]
   );
 
   const openBlueprintMetaDialog = useCallback((mode: "export" | "save") => {
@@ -1166,7 +1168,7 @@ function ReactViewPanelInner({
 
   const handleRenameBlueprintLibraryItem = useCallback(
     async (id: string, name: string) => {
-      const updated = await updateBlueprintLibraryMeta(id, { name });
+      const updated = await updateBlueprintLibraryMeta(id, { name }, nameSpace);
       if (!updated) {
         toast({ title: t("panel.messages.renameFailed") });
         void refreshBlueprintLibrary();
@@ -1178,12 +1180,12 @@ function ReactViewPanelInner({
       }
       toast({ title: t("panel.messages.blueprintRenamed") });
     },
-    [activeBlueprintLibraryId, refreshBlueprintLibrary]
+    [activeBlueprintLibraryId, nameSpace, refreshBlueprintLibrary]
   );
 
   const handleDeleteBlueprintLibraryItem = useCallback(
     async (id: string) => {
-      await deleteBlueprintLibraryRecord(id);
+      await deleteBlueprintLibraryRecord(id, nameSpace);
       await refreshBlueprintLibrary();
       if (activeBlueprintLibraryId === id) {
         setActiveBlueprintLibraryId(null);
@@ -1191,7 +1193,7 @@ function ReactViewPanelInner({
       }
       toast({ title: t("panel.messages.blueprintDeletedFromLibrary") });
     },
-    [activeBlueprintLibraryId, refreshBlueprintLibrary]
+    [activeBlueprintLibraryId, nameSpace, refreshBlueprintLibrary]
   );
 
   const openBlueprintExportDialog = useCallback(() => {
@@ -1206,7 +1208,7 @@ function ReactViewPanelInner({
           const text = await file.text();
           const payload = parseBlueprintImportFile(await parseJsonText(text));
           const record = libraryRecordFromImport(payload);
-          await putBlueprintLibraryRecord(record);
+          await putBlueprintLibraryRecord(record, nameSpace);
           await refreshBlueprintLibrary();
           if (!activeBlueprintLibraryId) {
             snapshotWorkspaceBlueprint();
@@ -1223,6 +1225,7 @@ function ReactViewPanelInner({
     [
       activeBlueprintLibraryId,
       loadBlueprintFromLibrary,
+      nameSpace,
       refreshBlueprintLibrary,
       snapshotWorkspaceBlueprint,
       t,
@@ -1266,6 +1269,7 @@ function ReactViewPanelInner({
     panelRevision: `${historyCursor}|${allElements.length}`,
     onProjectApplied: handleWorkspaceProjectApplied,
     initialWorkspace,
+    nameSpace,
   });
 
   useEffect(() => {
@@ -1275,11 +1279,11 @@ function ReactViewPanelInner({
         allElements,
         layers,
         activeLayerId,
-        outputScale: readOutputScale(),
+        outputScale: readOutputScale(nameSpace),
       });
     });
     return () => registerPreviewSnapshotProvider(null);
-  }, [activeLayerId, allElements, canvasEl, layers]);
+  }, [activeLayerId, allElements, canvasEl, layers, nameSpace]);
 
   const { triggerBlueprintNode, emitViewEvent, firedLifecyclePhases } = useBlueprintPageLifecycle({
     graph: blueprintGraph,
@@ -1602,7 +1606,7 @@ function ReactViewPanelInner({
       if (targetLayer.isMapping) return null;
       const hasBlockingRef = allElements.some((el) => {
         if (el.layerId === layerId) return false;
-        if (el.materialType !== "reference") return false;
+        if (el.materialType !== "reference" && el.materialType !== "viewport") return false;
         if (el.refLayerId !== layerId) return false;
         return (el.refCopyMode ?? "shallow") !== "deep";
       });
@@ -1875,6 +1879,13 @@ function ReactViewPanelInner({
           node.dataset.origWidth = String(parseFloat(node.style.width) || node.offsetWidth || 0);
           node.dataset.origHeight = String(parseFloat(node.style.height) || node.offsetHeight || 0);
         }
+        function applyBoxScale(node, sx, sy) {
+          rememberBox(node);
+          node.style.left = (Number(node.dataset.origLeft) * sx) + "px";
+          node.style.top = (Number(node.dataset.origTop) * sy) + "px";
+          node.style.width = (Number(node.dataset.origWidth) * sx) + "px";
+          node.style.height = (Number(node.dataset.origHeight) * sy) + "px";
+        }
         function fitScene() {
           if (!scene) return;
           var vw = window.innerWidth || 1;
@@ -1885,29 +1896,23 @@ function ReactViewPanelInner({
           var scaleY = vh / sh;
           if (root) root.style.overflow = "hidden";
           var nodes = scene.querySelectorAll("[data-element-id]");
+          var sx = outputScale ? 1 : scaleX;
+          var sy = outputScale ? 1 : scaleY;
           if (outputScale) {
             scene.style.width = sw + "px";
             scene.style.height = sh + "px";
             scene.style.transform = "translate(0px,0px) scale(" + scaleX + "," + scaleY + ")";
-            nodes.forEach(function (node) {
-              rememberBox(node);
-              node.style.left = node.dataset.origLeft + "px";
-              node.style.top = node.dataset.origTop + "px";
-              node.style.width = node.dataset.origWidth + "px";
-              node.style.height = node.dataset.origHeight + "px";
-            });
-            return;
+          } else {
+            scene.style.width = vw + "px";
+            scene.style.height = vh + "px";
+            scene.style.transform = "none";
           }
-          // 块仍按视口撑满，但不对整棵内容做 transform，字体保持原尺寸
-          scene.style.width = vw + "px";
-          scene.style.height = vh + "px";
-          scene.style.transform = "none";
           nodes.forEach(function (node) {
-            rememberBox(node);
-            node.style.left = (Number(node.dataset.origLeft) * scaleX) + "px";
-            node.style.top = (Number(node.dataset.origTop) * scaleY) + "px";
-            node.style.width = (Number(node.dataset.origWidth) * scaleX) + "px";
-            node.style.height = (Number(node.dataset.origHeight) * scaleY) + "px";
+            applyBoxScale(node, sx, sy);
+            var inner = node.querySelectorAll("[data-viewport-sizer], [data-viewport-item]");
+            inner.forEach(function (el) {
+              applyBoxScale(el, sx, sy);
+            });
           });
         }
         fitScene();
@@ -3587,11 +3592,12 @@ function ReactViewPanelInner({
 export function ReactViewPanel({
   locale,
   onLocaleChange,
+  nameSpace,
   ...rest
 }: ReactViewPanelProps) {
   return (
-    <I18nRoot locale={locale} onLocaleChange={onLocaleChange}>
-      <ReactViewPanelInner {...rest} />
+    <I18nRoot locale={locale} onLocaleChange={onLocaleChange} nameSpace={nameSpace}>
+      <ReactViewPanelInner nameSpace={nameSpace} {...rest} />
     </I18nRoot>
   );
 }