@arronqzy/react-view 1.0.21 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.21",
+  "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/ui": "1.0.6",
-    "@arronqzy/blueprint-dsl": "1.0.10",
     "@arronqzy/i18n": "0.1.8",
-    "@arronqzy/react-blueprint": "1.0.12",
+    "@arronqzy/ui": "1.0.6",
     "@arronqzy/rx-store": "1.0.5",
-    "@arronqzy/webllm-assistant": "0.1.10",
+    "@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/view-scene3d": "0.1.2"
+    "@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]);
+  }, [FONT_SIZE_STORAGE_KEY, panelFontSize]);
 
   useEffect(() => {
-    writeOutputScale(outputScale);
-  }, [outputScale]);
-
-  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 {
@@ -865,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) => {
@@ -893,6 +892,7 @@ function ReactViewPanelInner({
     libraryNameById: blueprintLibraryNameById,
     onExecutionBlocked: handleBlueprintExecutionBlocked,
     onViewScopeUpdate: handleViewScopeUpdate,
+    nameSpace,
   });
 
   const { selectLifecycleNode, selectedLifecycleNodeId: debugLifecycleNodeId } =
@@ -994,9 +994,9 @@ function ReactViewPanelInner({
   );
 
   const refreshBlueprintLibrary = useCallback(async () => {
-    const items = await listBlueprintLibrary();
+    const items = await listBlueprintLibrary(nameSpace);
     setBlueprintLibraryItems(items);
-  }, []);
+  }, [nameSpace]);
 
   useEffect(() => {
     void refreshBlueprintLibrary();
@@ -1004,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();
@@ -1023,7 +1023,7 @@ function ReactViewPanelInner({
         setBlueprintOpen(true);
       });
     },
-    [refreshBlueprintLibrary, t]
+    [nameSpace, refreshBlueprintLibrary, t]
   );
 
   const snapshotWorkspaceBlueprint = useCallback(() => {
@@ -1078,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();
@@ -1094,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) });
@@ -1105,6 +1105,7 @@ function ReactViewPanelInner({
     blueprintMeta,
     refreshBlueprintLibrary,
     t,
+    nameSpace,
   ]);
 
   const saveBlueprintToLibrary = useCallback(
@@ -1115,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;
@@ -1133,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") => {
@@ -1167,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();
@@ -1179,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);
@@ -1192,7 +1193,7 @@ function ReactViewPanelInner({
       }
       toast({ title: t("panel.messages.blueprintDeletedFromLibrary") });
     },
-    [activeBlueprintLibraryId, refreshBlueprintLibrary]
+    [activeBlueprintLibraryId, nameSpace, refreshBlueprintLibrary]
   );
 
   const openBlueprintExportDialog = useCallback(() => {
@@ -1207,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();
@@ -1224,6 +1225,7 @@ function ReactViewPanelInner({
     [
       activeBlueprintLibraryId,
       loadBlueprintFromLibrary,
+      nameSpace,
       refreshBlueprintLibrary,
       snapshotWorkspaceBlueprint,
       t,
@@ -1267,6 +1269,7 @@ function ReactViewPanelInner({
     panelRevision: `${historyCursor}|${allElements.length}`,
     onProjectApplied: handleWorkspaceProjectApplied,
     initialWorkspace,
+    nameSpace,
   });
 
   useEffect(() => {
@@ -1276,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,
@@ -3589,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>
   );
 }

package/src/panel/hooks/useWorkspaceProjects.ts

@@ -21,6 +21,8 @@ import {
 } from "../library/workspace-snapshot";
 import { runBusyTask } from "../utils/async-work";
 import { AbuilderEvents, emitAbuilderEvent } from "../library/event-subscription";
+import { parseBlueprintData } from "@arronqzy/react-blueprint";
+import { createEmptyPanelState, normalizeImportedPanelState } from "../utils/panelStateIO";
 
 export type UseWorkspaceProjectsOptions = {
   exportPanelData: () => State;
@@ -39,13 +41,20 @@ export type UseWorkspaceProjectsOptions = {
   onProjectApplied?: (record: WorkspaceProjectRecord) => void;
   /** 外部传入的初始工作区，挂载后自动加载（不触发 onProjectApplied） */
   initialWorkspace?: WorkspaceProjectRecord | null;
+  /** 隔离 IndexedDB / 预览缓存 / 同步频道 */
+  nameSpace?: string | null;
 };
 
-export function buildOnlinePreviewUrl(projectId: string): string {
+export function buildOnlinePreviewUrl(
+  projectId: string,
+  nameSpace?: string | null
+): string {
   const url = new URL(window.location.href);
   url.search = "";
   url.searchParams.set("preview", "online");
   url.searchParams.set("projectId", projectId);
+  const ns = (nameSpace ?? "").trim();
+  if (ns) url.searchParams.set("ns", ns);
   const previewInstanceId =
     typeof crypto !== "undefined" && "randomUUID" in crypto
       ? crypto.randomUUID()
@@ -54,6 +63,28 @@ export function buildOnlinePreviewUrl(projectId: string): string {
   return url.toString();
 }
 
+function previewWindowName(projectId: string, nameSpace?: string | null): string {
+  const ns = (nameSpace ?? "").trim();
+  return ns ? `abuilder-preview-${ns}-${projectId}` : `abuilder-preview-${projectId}`;
+}
+
+function hasWorkspacePayload(
+  record?: WorkspaceProjectRecord | null
+): record is WorkspaceProjectRecord {
+  if (!record || typeof record !== "object") return false;
+  return Boolean(
+    record.panelState ||
+      record.blueprintDocument ||
+      record.id ||
+      record.productName ||
+      record.titleIconDataUrl
+  );
+}
+
+function workspaceApplyKey(record: WorkspaceProjectRecord): string {
+  return `${record.id ?? "anon"}:${record.updatedAt ?? 0}`;
+}
+
 export function useWorkspaceProjects({
   exportPanelData,
   importPanelData,
@@ -68,6 +99,7 @@ export function useWorkspaceProjects({
   panelRevision,
   onProjectApplied,
   initialWorkspace,
+  nameSpace = null,
 }: UseWorkspaceProjectsOptions) {
   const { t } = useI18nOptional();
   const [projects, setProjects] = useState<WorkspaceProjectListItem[]>([]);
@@ -99,7 +131,8 @@ export function useWorkspaceProjects({
   }, [refreshPreviewing]);
 
   const resolveProjectName = useCallback(() => {
-    return productName.trim() || t("panel.defaults.unnamedProduct");
+    return (typeof productName === "string" ? productName : "").trim() ||
+      t("panel.defaults.unnamedProduct");
   }, [productName, t]);
 
   const buildCurrentSnapshot = useCallback((): WorkspaceSnapshot => {
@@ -112,9 +145,9 @@ export function useWorkspaceProjects({
   }, [blueprintDocument, blueprintMeta, productName, titleIconDataUrl]);
 
   const refreshProjects = useCallback(async () => {
-    const items = await listWorkspaceProjects();
+    const items = await listWorkspaceProjects(nameSpace);
     setProjects(items);
-  }, []);
+  }, [nameSpace]);
 
   useEffect(() => {
     void refreshProjects();
@@ -143,25 +176,33 @@ export function useWorkspaceProjects({
 
   const applyProjectRecord = useCallback(
     (record: WorkspaceProjectRecord, options?: { notifyApplied?: boolean }) => {
+      const parsedBlueprint = parseBlueprintData(record.blueprintDocument);
       const blueprintDocument =
-        record.blueprintDocument ?? BlueprintGraph.empty().document;
+        parsedBlueprint.value ?? BlueprintGraph.empty().document;
       const blueprintMeta: BlueprintMetaDraft = {
         name: record.blueprintMeta?.name ?? t("panel.defaults.unnamedBlueprint"),
         remark: record.blueprintMeta?.remark ?? "",
       };
+      const panelState =
+        normalizeImportedPanelState(record.panelState) ?? createEmptyPanelState();
+      const productName =
+        typeof record.productName === "string" && record.productName.trim()
+          ? record.productName
+          : t("panel.defaults.unnamedProduct");
+      const titleIconDataUrl = record.titleIconDataUrl ?? "";
 
-      importPanelData(record.panelState);
+      importPanelData(panelState);
       setBlueprintGraph(BlueprintGraph.fromDocument(blueprintDocument));
       setBlueprintMeta(blueprintMeta);
-      setProductName(record.productName);
-      setTitleIconDataUrl(record.titleIconDataUrl ?? "");
-      setActiveProjectId(record.id);
-      setActiveProjectName(record.name);
+      setProductName(productName);
+      setTitleIconDataUrl(titleIconDataUrl);
+      setActiveProjectId(record.id || null);
+      setActiveProjectName(record.name ?? null);
       syncedSnapshotRef.current = cloneWorkspaceSnapshot({
         blueprintDocument,
         blueprintMeta,
-        productName: record.productName,
-        titleIconDataUrl: record.titleIconDataUrl ?? "",
+        productName,
+        titleIconDataUrl,
       });
       syncedPanelRevisionRef.current = panelRevision;
       pendingRevisionSyncRef.current = true;
@@ -170,6 +211,9 @@ export function useWorkspaceProjects({
           ...record,
           blueprintDocument,
           blueprintMeta,
+          panelState,
+          productName,
+          titleIconDataUrl: titleIconDataUrl || undefined,
         });
       }
     },
@@ -185,14 +229,46 @@ export function useWorkspaceProjects({
     ]
   );
 
+  const applyEmptyWorkspace = useCallback(() => {
+    importPanelData(createEmptyPanelState());
+    setBlueprintGraph(BlueprintGraph.empty());
+    setBlueprintMeta({
+      name: t("panel.defaults.unnamedBlueprint"),
+      remark: "",
+    });
+    setProductName(t("panel.defaults.unnamedProduct"));
+    setTitleIconDataUrl("");
+    setActiveProjectId(null);
+    setActiveProjectName(null);
+    syncedSnapshotRef.current = null;
+  }, [
+    importPanelData,
+    setBlueprintGraph,
+    setBlueprintMeta,
+    setProductName,
+    setTitleIconDataUrl,
+    t,
+  ]);
+
   const initialWorkspaceAppliedKeyRef = useRef<string | null>(null);
+  const bootstrappedRef = useRef(false);
   useEffect(() => {
-    if (!initialWorkspace?.id) return;
-    const key = `${initialWorkspace.id}:${initialWorkspace.updatedAt}`;
+    if (!bootstrappedRef.current) {
+      bootstrappedRef.current = true;
+      if (hasWorkspacePayload(initialWorkspace)) {
+        applyProjectRecord(initialWorkspace, { notifyApplied: false });
+        initialWorkspaceAppliedKeyRef.current = workspaceApplyKey(initialWorkspace);
+      } else {
+        applyEmptyWorkspace();
+      }
+      return;
+    }
+    if (!hasWorkspacePayload(initialWorkspace)) return;
+    const key = workspaceApplyKey(initialWorkspace);
     if (initialWorkspaceAppliedKeyRef.current === key) return;
     initialWorkspaceAppliedKeyRef.current = key;
     applyProjectRecord(initialWorkspace, { notifyApplied: false });
-  }, [applyProjectRecord, initialWorkspace]);
+  }, [applyEmptyWorkspace, applyProjectRecord, initialWorkspace]);
 
   const persistProject = useCallback(
     async (options: { id?: string; name: string; createdAt?: number }) => {
@@ -200,7 +276,7 @@ export function useWorkspaceProjects({
       const now = Date.now();
       const id = options.id ?? createWorkspaceProjectId();
       const createdAt = options.createdAt ?? now;
-      const name = options.name.trim() || resolveProjectName();
+      const name = (options.name ?? "").trim() || resolveProjectName();
 
       const record: WorkspaceProjectRecord = {
         id,
@@ -210,13 +286,14 @@ export function useWorkspaceProjects({
         panelState: exportPanelData(),
         blueprintDocument: snapshot.blueprintDocument,
         blueprintMeta: snapshot.blueprintMeta,
-        productName: snapshot.productName,
+        productName:
+          typeof snapshot.productName === "string" ? snapshot.productName : resolveProjectName(),
         titleIconDataUrl: snapshot.titleIconDataUrl || undefined,
       };
 
-      await putWorkspaceProject(record);
-      writeWorkspacePreviewCache(record);
-      broadcastWorkspaceProjectUpdate(id, now);
+      await putWorkspaceProject(record, nameSpace);
+      writeWorkspacePreviewCache(record, nameSpace);
+      broadcastWorkspaceProjectUpdate(id, now, nameSpace);
       setActiveProjectId(id);
       setActiveProjectName(name);
       syncedSnapshotRef.current = snapshot;
@@ -225,7 +302,7 @@ export function useWorkspaceProjects({
       await refreshProjects();
       return record;
     },
-    [buildCurrentSnapshot, exportPanelData, panelRevision, resolveProjectName, refreshProjects]
+    [buildCurrentSnapshot, exportPanelData, nameSpace, panelRevision, resolveProjectName, refreshProjects]
   );
 
   const handleCreateProject = useCallback(async () => {
@@ -242,7 +319,7 @@ export function useWorkspaceProjects({
       return handleCreateProject();
     }
     return runBusyTask(t("common.savingWorkspace"), async () => {
-      const existing = await getWorkspaceProject(activeProjectId);
+      const existing = await getWorkspaceProject(activeProjectId, nameSpace);
       const name = resolveProjectName();
       const record = await persistProject({
         id: activeProjectId,
@@ -251,12 +328,12 @@ export function useWorkspaceProjects({
       });
       return { name, id: record.id };
     });
-  }, [activeProjectId, handleCreateProject, persistProject, resolveProjectName, t]);
+  }, [activeProjectId, handleCreateProject, nameSpace, persistProject, resolveProjectName, t]);
 
   const handleOpenProject = useCallback(
     async (id: string) => {
       await runBusyTask(t("common.loadingWorkspace"), async () => {
-        const record = await getWorkspaceProject(id);
+        const record = await getWorkspaceProject(id, nameSpace);
         if (!record) {
           await refreshProjects();
           throw new Error(t("panel.messages.workspaceNotFound"));
@@ -264,7 +341,7 @@ export function useWorkspaceProjects({
         applyProjectRecord(record);
       });
     },
-    [applyProjectRecord, refreshProjects, t]
+    [applyProjectRecord, nameSpace, refreshProjects, t]
   );
 
   const handleSyncProject = useCallback(async () => {
@@ -272,7 +349,7 @@ export function useWorkspaceProjects({
       if (!activeProjectId) {
         throw new Error(t("panel.messages.saveWorkspaceFirst"));
       }
-      const existing = await getWorkspaceProject(activeProjectId);
+      const existing = await getWorkspaceProject(activeProjectId, nameSpace);
       if (!existing) {
         setActiveProjectId(null);
         setActiveProjectName(null);
@@ -289,12 +366,12 @@ export function useWorkspaceProjects({
       emitAbuilderEvent(AbuilderEvents.workspaceSync, record);
       return name;
     });
-  }, [activeProjectId, persistProject, refreshProjects, resolveProjectName, t]);
+  }, [activeProjectId, nameSpace, persistProject, refreshProjects, resolveProjectName, t]);
 
   const handleDeleteProject = useCallback(
     async (id: string) => {
       await runBusyTask(t("common.deletingWorkspace"), async () => {
-        await deleteWorkspaceProject(id);
+        await deleteWorkspaceProject(id, nameSpace);
         if (activeProjectId === id) {
           setActiveProjectId(null);
           setActiveProjectName(null);
@@ -305,7 +382,7 @@ export function useWorkspaceProjects({
         await refreshProjects();
       });
     },
-    [activeProjectId, refreshPreviewing, refreshProjects, t]
+    [activeProjectId, nameSpace, refreshPreviewing, refreshProjects, t]
   );
 
   const handlePreviewProject = useCallback(
@@ -315,9 +392,10 @@ export function useWorkspaceProjects({
           await handleSyncProject();
         }
         const record =
-          (await getWorkspaceProject(id)) ?? readWorkspacePreviewCache(id);
+          (await getWorkspaceProject(id, nameSpace)) ??
+          readWorkspacePreviewCache(id, nameSpace);
         if (record) {
-          writeWorkspacePreviewCache(record);
+          writeWorkspacePreviewCache(record, nameSpace);
         }
         const existing = previewWindowsRef.current.get(id);
         if (existing && !existing.closed) {
@@ -330,8 +408,8 @@ export function useWorkspaceProjects({
           return;
         }
         const win = window.open(
-          buildOnlinePreviewUrl(id),
-          `abuilder-preview-${id}`
+          buildOnlinePreviewUrl(id, nameSpace),
+          previewWindowName(id, nameSpace)
         );
         if (win) {
           previewWindowsRef.current.set(id, win);
@@ -345,7 +423,7 @@ export function useWorkspaceProjects({
         refreshPreviewing();
       });
     },
-    [activeProjectId, dirty, handleSyncProject, refreshPreviewing, t]
+    [activeProjectId, dirty, handleSyncProject, nameSpace, refreshPreviewing, t]
   );
 
   return {

package/src/panel/index.tsx

@@ -2,4 +2,18 @@ export * from "./ReactViewPanel";
 export * from "./ReactViewOnlinePreview";
 export { I18nRoot, I18nProvider } from "./I18nRoot";
 export type { I18nRootProps, Locale } from "./I18nRoot";
-export type * from "./types";
+export type * from "./types";
+export {
+  parseViewData,
+  validateViewData,
+  parseBlueprintData,
+  validateBlueprintData,
+  validateWorkspaceData,
+  parseWorkspaceData,
+  createEmptyWorkspace,
+} from "./library/parse-workspace-data";
+export { createWorkspaceProjectId } from "./library/workspace-project-db";
+export type {
+  ParseCheckResult,
+  WorkspaceParseCheckResult,
+} from "./library/parse-workspace-data";

package/src/panel/library/parse-workspace-data.ts

@@ -0,0 +1,142 @@
+import {
+  BlueprintGraph,
+  parseBlueprintData,
+  validateBlueprintData,
+  type BlueprintDocument,
+  type BlueprintMetaDraft,
+  type ParseCheckResult,
+} from "@arronqzy/react-blueprint";
+import type { State } from "@arronqzy/rx-store";
+import { createEmptyPanelState, normalizeImportedPanelState } from "../utils/panelStateIO";
+import {
+  createWorkspaceProjectId,
+  type WorkspaceProjectRecord,
+} from "./workspace-project-db";
+
+export type { ParseCheckResult };
+
+export type WorkspaceParseCheckResult = ParseCheckResult & {
+  view: ParseCheckResult;
+  blueprint: ParseCheckResult;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+
+function extractPanelState(data: unknown): unknown {
+  if (isRecord(data) && data.panelState !== undefined) return data.panelState;
+  return data;
+}
+
+function readBlueprintMeta(raw: unknown): BlueprintMetaDraft {
+  if (!isRecord(raw)) return { name: "", remark: "" };
+  return {
+    name: typeof raw.name === "string" ? raw.name : "",
+    remark: typeof raw.remark === "string" ? raw.remark : "",
+  };
+}
+
+/**
+ * 校验数据能否被视图解析（工作区 `panelState` 或裸面板状态均可）。
+ */
+export function parseViewData(
+  data: unknown
+): ParseCheckResult & { value?: State } {
+  if (data == null) {
+    return { ok: false, error: "empty" };
+  }
+  const normalized = normalizeImportedPanelState(extractPanelState(data));
+  if (!normalized) {
+    return { ok: false, error: "invalid-view-data" };
+  }
+  return { ok: true, value: normalized };
+}
+
+export function validateViewData(data: unknown): ParseCheckResult {
+  const parsed = parseViewData(data);
+  return parsed.ok ? { ok: true } : { ok: false, error: parsed.error };
+}
+
+export { parseBlueprintData, validateBlueprintData };
+
+/**
+ * 构造一份可交给 `initialWorkspace` 的空工作区。
+ */
+export function createEmptyWorkspace(
+  init?: Partial<WorkspaceProjectRecord>
+): WorkspaceProjectRecord {
+  const now = Date.now();
+  return {
+    id: init?.id || createWorkspaceProjectId(),
+    name: init?.name ?? "",
+    createdAt: init?.createdAt ?? now,
+    updatedAt: init?.updatedAt ?? now,
+    panelState: init?.panelState ?? createEmptyPanelState(),
+    blueprintDocument: init?.blueprintDocument ?? BlueprintGraph.empty().document,
+    blueprintMeta: init?.blueprintMeta ?? { name: "", remark: "" },
+    productName: init?.productName ?? "",
+    titleIconDataUrl: init?.titleIconDataUrl,
+  };
+}
+
+/**
+ * 校验完整工作区数据：视图 `panelState` 与蓝图 `blueprintDocument` 都要能解析。
+ */
+export function validateWorkspaceData(data: unknown): WorkspaceParseCheckResult {
+  if (data == null) {
+    const empty = { ok: false, error: "empty" } satisfies ParseCheckResult;
+    return { ok: false, error: "empty", view: empty, blueprint: empty };
+  }
+  if (!isRecord(data)) {
+    const invalid = { ok: false, error: "invalid-workspace-data" } satisfies ParseCheckResult;
+    return {
+      ok: false,
+      error: "invalid-workspace-data",
+      view: invalid,
+      blueprint: invalid,
+    };
+  }
+  const view = validateViewData(data);
+  const blueprint = validateBlueprintData(data);
+  const ok = view.ok && blueprint.ok;
+  return {
+    ok,
+    error: ok ? undefined : "invalid-workspace-data",
+    view,
+    blueprint,
+  };
+}
+
+/**
+ * 解析并规范化工作区。成功时 `value` 可直接作为 `initialWorkspace`。
+ */
+export function parseWorkspaceData(
+  data: unknown
+): WorkspaceParseCheckResult & { value?: WorkspaceProjectRecord } {
+  const check = validateWorkspaceData(data);
+  if (!check.ok || !isRecord(data)) {
+    return check;
+  }
+  const view = parseViewData(data);
+  const blueprint = parseBlueprintData(data);
+  if (!view.value || !blueprint.value) {
+    return check;
+  }
+  const now = Date.now();
+  return {
+    ...check,
+    value: {
+      id: typeof data.id === "string" && data.id ? data.id : createWorkspaceProjectId(),
+      name: typeof data.name === "string" ? data.name : "",
+      createdAt: typeof data.createdAt === "number" ? data.createdAt : now,
+      updatedAt: typeof data.updatedAt === "number" ? data.updatedAt : now,
+      panelState: view.value,
+      blueprintDocument: blueprint.value as BlueprintDocument,
+      blueprintMeta: readBlueprintMeta(data.blueprintMeta),
+      productName: typeof data.productName === "string" ? data.productName : "",
+      titleIconDataUrl:
+        typeof data.titleIconDataUrl === "string" ? data.titleIconDataUrl : undefined,
+    },
+  };
+}

package/src/panel/library/workspace-project-cache.ts

@@ -1,12 +1,20 @@
+import { appStorageKey } from "@arronqzy/blueprint-dsl";
 import type { WorkspaceProjectRecord } from "./workspace-project-db";
 
 const CACHE_PREFIX = "arronqzy-workspace-preview:";
 
-export function writeWorkspacePreviewCache(record: WorkspaceProjectRecord): void {
+function previewCacheKey(projectId: string, nameSpace?: string | null): string {
+  return appStorageKey(CACHE_PREFIX + projectId, nameSpace);
+}
+
+export function writeWorkspacePreviewCache(
+  record: WorkspaceProjectRecord,
+  nameSpace?: string | null
+): void {
   try {
     // 只写轻量标记，避免把含 data URL 的整包再塞进 localStorage（配额小、内存翻倍）
     localStorage.setItem(
-      CACHE_PREFIX + record.id,
+      previewCacheKey(record.id, nameSpace),
       JSON.stringify({ id: record.id, updatedAt: record.updatedAt })
     );
   } catch {
@@ -15,10 +23,11 @@ export function writeWorkspacePreviewCache(record: WorkspaceProjectRecord): void
 }
 
 export function readWorkspacePreviewCache(
-  projectId: string
+  projectId: string,
+  nameSpace?: string | null
 ): WorkspaceProjectRecord | null {
   try {
-    const raw = localStorage.getItem(CACHE_PREFIX + projectId);
+    const raw = localStorage.getItem(previewCacheKey(projectId, nameSpace));
     if (!raw) return null;
     const parsed = JSON.parse(raw) as Partial<WorkspaceProjectRecord> | null;
     if (!parsed || typeof parsed !== "object" || !parsed.panelState) return null;

package/src/panel/library/workspace-project-db.ts

@@ -1,6 +1,7 @@
 import type { BlueprintDocument } from "@arronqzy/react-blueprint";
 import type { BlueprintMetaDraft } from "@arronqzy/react-blueprint";
 import type { State } from "@arronqzy/rx-store";
+import { appStorageKey } from "@arronqzy/blueprint-dsl";
 
 const DB_NAME = "arronqzy-workspace-projects";
 const DB_VERSION = 1;
@@ -25,9 +26,9 @@ export type WorkspaceProjectRecord = {
   titleIconDataUrl?: string;
 };
 
-function openDb(): Promise<IDBDatabase> {
+function openDb(nameSpace?: string | null): Promise<IDBDatabase> {
   return new Promise((resolve, reject) => {
-    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    const request = indexedDB.open(appStorageKey(DB_NAME, nameSpace), DB_VERSION);
     request.onerror = () => reject(request.error ?? new Error("indexeddb-open-failed"));
     request.onupgradeneeded = () => {
       const db = request.result;
@@ -42,9 +43,10 @@ function openDb(): Promise<IDBDatabase> {
 
 function runTransaction<T>(
   mode: IDBTransactionMode,
-  runner: (store: IDBObjectStore) => IDBRequest<T>
+  runner: (store: IDBObjectStore) => IDBRequest<T>,
+  nameSpace?: string | null
 ): Promise<T> {
-  return openDb().then(
+  return openDb(nameSpace).then(
     (db) =>
       new Promise<T>((resolve, reject) => {
         const tx = db.transaction(STORE_NAME, mode);
@@ -77,8 +79,10 @@ export function createWorkspaceProjectId(): string {
   return `ws-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
 }
 
-export async function listWorkspaceProjects(): Promise<WorkspaceProjectListItem[]> {
-  const db = await openDb();
+export async function listWorkspaceProjects(
+  nameSpace?: string | null
+): Promise<WorkspaceProjectListItem[]> {
+  const db = await openDb(nameSpace);
   return new Promise((resolve, reject) => {
     const tx = db.transaction(STORE_NAME, "readonly");
     const store = tx.objectStore(STORE_NAME);
@@ -110,21 +114,28 @@ export async function listWorkspaceProjects(): Promise<WorkspaceProjectListItem[
 }
 
 export async function getWorkspaceProject(
-  id: string
+  id: string,
+  nameSpace?: string | null
 ): Promise<WorkspaceProjectRecord | null> {
-  const record = await runTransaction<WorkspaceProjectRecord | undefined>("readonly", (store) =>
-    store.get(id)
+  const record = await runTransaction<WorkspaceProjectRecord | undefined>(
+    "readonly",
+    (store) => store.get(id),
+    nameSpace
   );
   return record ?? null;
 }
 
 export async function putWorkspaceProject(
-  record: WorkspaceProjectRecord
+  record: WorkspaceProjectRecord,
+  nameSpace?: string | null
 ): Promise<WorkspaceProjectRecord> {
-  await runTransaction<IDBValidKey>("readwrite", (store) => store.put(record));
+  await runTransaction<IDBValidKey>("readwrite", (store) => store.put(record), nameSpace);
   return record;
 }
 
-export async function deleteWorkspaceProject(id: string): Promise<void> {
-  await runTransaction<undefined>("readwrite", (store) => store.delete(id));
+export async function deleteWorkspaceProject(
+  id: string,
+  nameSpace?: string | null
+): Promise<void> {
+  await runTransaction<undefined>("readwrite", (store) => store.delete(id), nameSpace);
 }

package/src/panel/library/workspace-project-sync.ts

@@ -1,3 +1,5 @@
+import { appStorageKey } from "@arronqzy/blueprint-dsl";
+
 const CHANNEL_PREFIX = "arronqzy-workspace-project";
 
 export type WorkspaceProjectSyncMessage = {
@@ -6,16 +8,22 @@ export type WorkspaceProjectSyncMessage = {
   updatedAt: number;
 };
 
-export function getWorkspaceProjectChannelName(projectId: string): string {
-  return `${CHANNEL_PREFIX}:${projectId}`;
+export function getWorkspaceProjectChannelName(
+  projectId: string,
+  nameSpace?: string | null
+): string {
+  return appStorageKey(`${CHANNEL_PREFIX}:${projectId}`, nameSpace);
 }
 
 export function broadcastWorkspaceProjectUpdate(
   projectId: string,
-  updatedAt: number
+  updatedAt: number,
+  nameSpace?: string | null
 ): void {
   if (typeof BroadcastChannel === "undefined") return;
-  const channel = new BroadcastChannel(getWorkspaceProjectChannelName(projectId));
+  const channel = new BroadcastChannel(
+    getWorkspaceProjectChannelName(projectId, nameSpace)
+  );
   channel.postMessage({
     type: "updated",
     projectId,
@@ -26,12 +34,15 @@ export function broadcastWorkspaceProjectUpdate(
 
 export function subscribeWorkspaceProjectUpdates(
   projectId: string,
-  onUpdate: (message: WorkspaceProjectSyncMessage) => void
+  onUpdate: (message: WorkspaceProjectSyncMessage) => void,
+  nameSpace?: string | null
 ): () => void {
   if (typeof BroadcastChannel === "undefined") {
     return () => {};
   }
-  const channel = new BroadcastChannel(getWorkspaceProjectChannelName(projectId));
+  const channel = new BroadcastChannel(
+    getWorkspaceProjectChannelName(projectId, nameSpace)
+  );
   channel.onmessage = (event: MessageEvent<WorkspaceProjectSyncMessage>) => {
     const data = event.data;
     if (!data || data.type !== "updated" || data.projectId !== projectId) return;

package/src/panel/utils/outputScale.ts

@@ -1,17 +1,22 @@
 /** 产物预览是否缩放内部内容（字体等）。默认 false：块仍按视口撑满，内容保持原尺寸以免失真。 */
+import { appStorageKey } from "@arronqzy/blueprint-dsl";
+
 export const OUTPUT_SCALE_STORAGE_KEY = "panel:outputScale";
 
-export function readOutputScale(): boolean {
+export function readOutputScale(nameSpace?: string | null): boolean {
   try {
-    return localStorage.getItem(OUTPUT_SCALE_STORAGE_KEY) === "1";
+    return localStorage.getItem(appStorageKey(OUTPUT_SCALE_STORAGE_KEY, nameSpace)) === "1";
   } catch {
     return false;
   }
 }
 
-export function writeOutputScale(enabled: boolean) {
+export function writeOutputScale(enabled: boolean, nameSpace?: string | null) {
   try {
-    localStorage.setItem(OUTPUT_SCALE_STORAGE_KEY, enabled ? "1" : "0");
+    localStorage.setItem(
+      appStorageKey(OUTPUT_SCALE_STORAGE_KEY, nameSpace),
+      enabled ? "1" : "0"
+    );
   } catch {
     // ignore storage errors
   }

package/src/panel/utils/panelStateIO.ts

@@ -26,6 +26,24 @@ export function normalizeImportedPanelState(state: unknown): State | null {
   return next;
 }
 
+export function createEmptyPanelState(): State {
+  return {
+    root: {
+      id: "root",
+      type: "root",
+      props: {},
+      children: [],
+    },
+    selectedIds: [],
+    variables: {
+      counter: 0,
+      isOpen: false,
+      layers: [DEFAULT_LAYER],
+      activeLayerId: DEFAULT_LAYER_ID,
+    },
+  };
+}
+
 export function parseAllPanelElements(state: State): PanelElement[] {
   return (state.root.children ?? [])
     .filter((node) => {