@arronqzy/react-view 1.0.28 → 1.0.30

package/src/panel/hooks/usePanelElements.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
 import { store, type Node, type State } from "@arronqzy/rx-store";
 import { useI18nOptional } from "@arronqzy/i18n/react";
 import type {
@@ -47,6 +47,7 @@ import {
   applyGridLayoutPatchAcrossMappingFamily,
   applyMappingFamilySyncPatch,
 } from "../utils/updateElementDraft";
+import { materializePanelElements, stabilizeElementList } from "../utils/materializePanelElements";
 
 export type { PanelActionResult, PanelHistoryItem, PanelLayer } from "../types";
 
@@ -54,6 +55,8 @@ export function usePanelElements() {
   const { t } = useI18nOptional();
   const messages = useMemo(() => getPanelMessages(t), [t]);
   const defaultLayer = useMemo(() => getDefaultLayer(t), [t]);
+  const allElementsCacheRef = useRef<PanelElement[]>([]);
+  const elementsCacheRef = useRef<PanelElement[]>([]);
 
   const state = useSyncExternalStore(
     (cb) => {
@@ -135,19 +138,20 @@ export function usePanelElements() {
   }, []);
 
   const allElements = useMemo(() => {
-    const nodes = state.root.children ?? [];
-    return nodes
-      .filter((n) => isPanelElementNode(n) && n.props)
-      .map((n) => {
-        const props = n.props as PanelElement;
-        return { ...props, zIndex: typeof props.zIndex === "number" ? props.zIndex : 1 };
-      });
+    const next = materializePanelElements(
+      state.root.children,
+      allElementsCacheRef.current
+    );
+    allElementsCacheRef.current = next;
+    return next;
   }, [state.root.children]);
 
-  const elements = useMemo(
-    () => allElements.filter((el) => el.layerId === activeLayerId),
-    [activeLayerId, allElements]
-  );
+  const elements = useMemo(() => {
+    const next = allElements.filter((el) => el.layerId === activeLayerId);
+    const stable = stabilizeElementList(next, elementsCacheRef.current);
+    elementsCacheRef.current = stable;
+    return stable;
+  }, [activeLayerId, allElements]);
 
   const byId = useMemo(() => {
     const map = new Map<string, PanelElement>();
@@ -1077,7 +1081,14 @@ export function usePanelElements() {
         /* fall through */
       }
     }
-    return JSON.parse(JSON.stringify(current)) as State;
+    try {
+      return JSON.parse(JSON.stringify(current)) as State;
+    } catch (error) {
+      throw Object.assign(new Error("indexeddb-serialize-failed"), {
+        name: "DataCloneError",
+        cause: error,
+      });
+    }
   }, []);
 
   const importPanelData = useCallback((nextState: State) => {

package/src/panel/hooks/useWorkspaceProjects.ts

@@ -19,6 +19,7 @@ import {
   workspaceSnapshotsEqual,
   type WorkspaceSnapshot,
 } from "../library/workspace-snapshot";
+import { mapWorkspaceStorageError } from "../library/workspace-storage-error";
 import { runBusyTask } from "../utils/async-work";
 import { AbuilderEvents, emitAbuilderEvent } from "../library/event-subscription";
 import { parseBlueprintData } from "@arronqzy/react-blueprint";
@@ -145,8 +146,13 @@ export function useWorkspaceProjects({
   }, [blueprintDocument, blueprintMeta, productName, titleIconDataUrl]);
 
   const refreshProjects = useCallback(async () => {
-    const items = await listWorkspaceProjects(nameSpace);
-    setProjects(items);
+    try {
+      const items = await listWorkspaceProjects(nameSpace);
+      setProjects(items);
+    } catch (error) {
+      // Listing failure should not brick the editor; create/sync still surface errors.
+      console.warn("[abuilder] listWorkspaceProjects failed", error);
+    }
   }, [nameSpace]);
 
   useEffect(() => {
@@ -272,37 +278,58 @@ export function useWorkspaceProjects({
 
   const persistProject = useCallback(
     async (options: { id?: string; name: string; createdAt?: number }) => {
-      const snapshot = cloneWorkspaceSnapshot(buildCurrentSnapshot());
-      const now = Date.now();
-      const id = options.id ?? createWorkspaceProjectId();
-      const createdAt = options.createdAt ?? now;
-      const name = (options.name ?? "").trim() || resolveProjectName();
+      try {
+        const snapshot = cloneWorkspaceSnapshot(buildCurrentSnapshot());
+        const now = Date.now();
+        const id = options.id ?? createWorkspaceProjectId();
+        const createdAt = options.createdAt ?? now;
+        const name = (options.name ?? "").trim() || resolveProjectName();
 
-      const record: WorkspaceProjectRecord = {
-        id,
-        name,
-        createdAt,
-        updatedAt: now,
-        panelState: exportPanelData(),
-        blueprintDocument: snapshot.blueprintDocument,
-        blueprintMeta: snapshot.blueprintMeta,
-        productName:
-          typeof snapshot.productName === "string" ? snapshot.productName : resolveProjectName(),
-        titleIconDataUrl: snapshot.titleIconDataUrl || undefined,
-      };
+        let panelState: State;
+        try {
+          panelState = exportPanelData();
+        } catch (error) {
+          throw mapWorkspaceStorageError(error, t);
+        }
 
-      await putWorkspaceProject(record, nameSpace);
-      writeWorkspacePreviewCache(record, nameSpace);
-      broadcastWorkspaceProjectUpdate(id, now, nameSpace);
-      setActiveProjectId(id);
-      setActiveProjectName(name);
-      syncedSnapshotRef.current = snapshot;
-      syncedPanelRevisionRef.current = panelRevision;
-      pendingRevisionSyncRef.current = false;
-      await refreshProjects();
-      return record;
+        const record: WorkspaceProjectRecord = {
+          id,
+          name,
+          createdAt,
+          updatedAt: now,
+          panelState,
+          blueprintDocument: snapshot.blueprintDocument,
+          blueprintMeta: snapshot.blueprintMeta,
+          productName:
+            typeof snapshot.productName === "string"
+              ? snapshot.productName
+              : resolveProjectName(),
+          titleIconDataUrl: snapshot.titleIconDataUrl || undefined,
+        };
+
+        await putWorkspaceProject(record, nameSpace);
+        writeWorkspacePreviewCache(record, nameSpace);
+        broadcastWorkspaceProjectUpdate(id, now, nameSpace);
+        setActiveProjectId(id);
+        setActiveProjectName(name);
+        syncedSnapshotRef.current = snapshot;
+        syncedPanelRevisionRef.current = panelRevision;
+        pendingRevisionSyncRef.current = false;
+        await refreshProjects();
+        return record;
+      } catch (error) {
+        throw mapWorkspaceStorageError(error, t);
+      }
     },
-    [buildCurrentSnapshot, exportPanelData, nameSpace, panelRevision, resolveProjectName, refreshProjects]
+    [
+      buildCurrentSnapshot,
+      exportPanelData,
+      nameSpace,
+      panelRevision,
+      resolveProjectName,
+      refreshProjects,
+      t,
+    ]
   );
 
   const handleCreateProject = useCallback(async () => {
@@ -332,14 +359,18 @@ export function useWorkspaceProjects({
 
   const handleOpenProject = useCallback(
     async (id: string) => {
-      await runBusyTask(t("common.loadingWorkspace"), async () => {
-        const record = await getWorkspaceProject(id, nameSpace);
-        if (!record) {
-          await refreshProjects();
-          throw new Error(t("panel.messages.workspaceNotFound"));
-        }
-        applyProjectRecord(record);
-      });
+      try {
+        await runBusyTask(t("common.loadingWorkspace"), async () => {
+          const record = await getWorkspaceProject(id, nameSpace);
+          if (!record) {
+            await refreshProjects();
+            throw new Error(t("panel.messages.workspaceNotFound"));
+          }
+          applyProjectRecord(record);
+        });
+      } catch (error) {
+        throw mapWorkspaceStorageError(error, t);
+      }
     },
     [applyProjectRecord, nameSpace, refreshProjects, t]
   );
@@ -370,17 +401,21 @@ export function useWorkspaceProjects({
 
   const handleDeleteProject = useCallback(
     async (id: string) => {
-      await runBusyTask(t("common.deletingWorkspace"), async () => {
-        await deleteWorkspaceProject(id, nameSpace);
-        if (activeProjectId === id) {
-          setActiveProjectId(null);
-          setActiveProjectName(null);
-          syncedSnapshotRef.current = null;
-        }
-        previewWindowsRef.current.delete(id);
-        refreshPreviewing();
-        await refreshProjects();
-      });
+      try {
+        await runBusyTask(t("common.deletingWorkspace"), async () => {
+          await deleteWorkspaceProject(id, nameSpace);
+          if (activeProjectId === id) {
+            setActiveProjectId(null);
+            setActiveProjectName(null);
+            syncedSnapshotRef.current = null;
+          }
+          previewWindowsRef.current.delete(id);
+          refreshPreviewing();
+          await refreshProjects();
+        });
+      } catch (error) {
+        throw mapWorkspaceStorageError(error, t);
+      }
     },
     [activeProjectId, nameSpace, refreshPreviewing, refreshProjects, t]
   );

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

@@ -6,6 +6,7 @@ import { appStorageKey } from "@arronqzy/blueprint-dsl";
 const DB_NAME = "arronqzy-workspace-projects";
 const DB_VERSION = 1;
 const STORE_NAME = "projects";
+const OPEN_TIMEOUT_MS = 10_000;
 
 export type WorkspaceProjectListItem = {
   id: string;
@@ -26,10 +27,77 @@ export type WorkspaceProjectRecord = {
   titleIconDataUrl?: string;
 };
 
+const dbPromises = new Map<string, Promise<IDBDatabase>>();
+
+function getIndexedDb(): IDBFactory {
+  if (typeof indexedDB === "undefined" || !indexedDB) {
+    throw Object.assign(new Error("indexeddb-unavailable"), {
+      name: "IndexedDbUnavailable",
+    });
+  }
+  return indexedDB;
+}
+
+/** Make a value safe for IndexedDB structured clone (drops non-cloneable fields). */
+export function cloneForIndexedDb<T>(value: T): T {
+  if (typeof structuredClone === "function") {
+    try {
+      return structuredClone(value);
+    } catch {
+      /* fall through to JSON */
+    }
+  }
+  try {
+    return JSON.parse(JSON.stringify(value)) as T;
+  } catch (error) {
+    throw Object.assign(new Error("indexeddb-serialize-failed"), {
+      name: "DataCloneError",
+      cause: error,
+    });
+  }
+}
+
 function openDb(nameSpace?: string | null): Promise<IDBDatabase> {
-  return new Promise((resolve, reject) => {
-    const request = indexedDB.open(appStorageKey(DB_NAME, nameSpace), DB_VERSION);
-    request.onerror = () => reject(request.error ?? new Error("indexeddb-open-failed"));
+  const key = appStorageKey(DB_NAME, nameSpace);
+  const cached = dbPromises.get(key);
+  if (cached) return cached;
+
+  const promise = new Promise<IDBDatabase>((resolve, reject) => {
+    let settled = false;
+    const fail = (error: unknown) => {
+      if (settled) return;
+      settled = true;
+      dbPromises.delete(key);
+      reject(
+        error instanceof Error
+          ? error
+          : Object.assign(new Error("indexeddb-open-failed"), { cause: error })
+      );
+    };
+
+    let request: IDBOpenDBRequest;
+    try {
+      request = getIndexedDb().open(key, DB_VERSION);
+    } catch (error) {
+      fail(error);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      fail(
+        Object.assign(new Error("indexeddb-open-timeout"), {
+          name: "TimeoutError",
+        })
+      );
+    }, OPEN_TIMEOUT_MS);
+
+    request.onerror = () => {
+      clearTimeout(timer);
+      fail(request.error ?? new Error("indexeddb-open-failed"));
+    };
+    request.onblocked = () => {
+      // Wait for onsuccess / timeout; another tab may be holding an older connection.
+    };
     request.onupgradeneeded = () => {
       const db = request.result;
       if (!db.objectStoreNames.contains(STORE_NAME)) {
@@ -37,8 +105,35 @@ function openDb(nameSpace?: string | null): Promise<IDBDatabase> {
         store.createIndex("updatedAt", "updatedAt", { unique: false });
       }
     };
-    request.onsuccess = () => resolve(request.result);
+    request.onsuccess = () => {
+      clearTimeout(timer);
+      if (settled) {
+        try {
+          request.result.close();
+        } catch {
+          /* ignore */
+        }
+        return;
+      }
+      settled = true;
+      const db = request.result;
+      db.onversionchange = () => {
+        try {
+          db.close();
+        } catch {
+          /* ignore */
+        }
+        dbPromises.delete(key);
+      };
+      db.onclose = () => {
+        dbPromises.delete(key);
+      };
+      resolve(db);
+    };
   });
+
+  dbPromises.set(key, promise);
+  return promise;
 }
 
 function runTransaction<T>(
@@ -49,27 +144,76 @@ function runTransaction<T>(
   return openDb(nameSpace).then(
     (db) =>
       new Promise<T>((resolve, reject) => {
-        const tx = db.transaction(STORE_NAME, mode);
+        let tx: IDBTransaction;
+        try {
+          tx = db.transaction(STORE_NAME, mode);
+        } catch (error) {
+          // Stale connection (e.g. Safari closed it); reopen once.
+          dbPromises.delete(appStorageKey(DB_NAME, nameSpace));
+          reject(error);
+          return;
+        }
         const store = tx.objectStore(STORE_NAME);
         const request = runner(store);
         let result!: T;
+        let settled = false;
+
+        const fail = (error: unknown) => {
+          if (settled) return;
+          settled = true;
+          reject(
+            error instanceof Error
+              ? error
+              : Object.assign(new Error("indexeddb-transaction-failed"), {
+                  cause: error,
+                })
+          );
+        };
 
         request.onerror = () =>
-          reject(request.error ?? new Error("indexeddb-request-failed"));
+          fail(request.error ?? new Error("indexeddb-request-failed"));
         request.onsuccess = () => {
           result = request.result as T;
         };
 
         tx.oncomplete = () => {
-          db.close();
+          if (settled) return;
+          settled = true;
           resolve(result);
         };
-        tx.onerror = () => {
-          db.close();
-          reject(tx.error ?? new Error("indexeddb-transaction-failed"));
-        };
+        tx.onerror = () => fail(tx.error ?? new Error("indexeddb-transaction-failed"));
+        tx.onabort = () => fail(tx.error ?? new Error("indexeddb-transaction-aborted"));
       })
-  );
+  ).catch(async (error) => {
+    // One retry after connection reset (common on iOS/Safari when DB was closed).
+    const message = error instanceof Error ? error.message : String(error);
+    const name = error instanceof DOMException ? error.name : "";
+    if (
+      name === "InvalidStateError" ||
+      message.includes("InvalidStateError") ||
+      message.includes("closing")
+    ) {
+      dbPromises.delete(appStorageKey(DB_NAME, nameSpace));
+      const db = await openDb(nameSpace);
+      return new Promise<T>((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, mode);
+        const store = tx.objectStore(STORE_NAME);
+        const request = runner(store);
+        let result!: T;
+        request.onerror = () =>
+          reject(request.error ?? new Error("indexeddb-request-failed"));
+        request.onsuccess = () => {
+          result = request.result as T;
+        };
+        tx.oncomplete = () => resolve(result);
+        tx.onerror = () =>
+          reject(tx.error ?? new Error("indexeddb-transaction-failed"));
+        tx.onabort = () =>
+          reject(tx.error ?? new Error("indexeddb-transaction-aborted"));
+      });
+    }
+    throw error;
+  });
 }
 
 export function createWorkspaceProjectId(): string {
@@ -103,11 +247,9 @@ export async function listWorkspaceProjects(
       cursor.continue();
     };
     tx.oncomplete = () => {
-      db.close();
       resolve(items.sort((a, b) => b.updatedAt - a.updatedAt));
     };
     tx.onerror = () => {
-      db.close();
       reject(tx.error ?? new Error("indexeddb-transaction-failed"));
     };
   });
@@ -129,8 +271,13 @@ export async function putWorkspaceProject(
   record: WorkspaceProjectRecord,
   nameSpace?: string | null
 ): Promise<WorkspaceProjectRecord> {
-  await runTransaction<IDBValidKey>("readwrite", (store) => store.put(record), nameSpace);
-  return record;
+  const safeRecord = cloneForIndexedDb(record);
+  await runTransaction<IDBValidKey>(
+    "readwrite",
+    (store) => store.put(safeRecord),
+    nameSpace
+  );
+  return safeRecord;
 }
 
 export async function deleteWorkspaceProject(

package/src/panel/library/workspace-storage-error.ts

@@ -0,0 +1,60 @@
+/**
+ * Map IndexedDB / clone failures to localized workspace messages.
+ * Used by create / sync / open / delete so device-specific DOMExceptions
+ * show actionable copy instead of opaque browser English.
+ */
+export function mapWorkspaceStorageError(
+  error: unknown,
+  t: (key: string) => string
+): Error {
+  const raw = error instanceof Error ? error : new Error(String(error));
+  const name =
+    (error as { name?: string } | null)?.name ||
+    (raw as { name?: string }).name ||
+    "";
+  const message = raw.message || "";
+
+  if (
+    name === "IndexedDbUnavailable" ||
+    name === "SecurityError" ||
+    message.includes("indexeddb-unavailable") ||
+    /indexedDB is not available|Access is denied|The operation is insecure/i.test(
+      message
+    )
+  ) {
+    return new Error(t("panel.messages.workspaceStorageUnavailable"));
+  }
+
+  if (
+    name === "TimeoutError" ||
+    message.includes("indexeddb-open-timeout")
+  ) {
+    return new Error(t("panel.messages.workspaceStorageTimeout"));
+  }
+
+  if (
+    name === "QuotaExceededError" ||
+    /QuotaExceeded|quota|storage.*full|exceeded the quota/i.test(message)
+  ) {
+    return new Error(t("panel.messages.workspaceStorageQuotaExceeded"));
+  }
+
+  if (
+    name === "DataCloneError" ||
+    message.includes("indexeddb-serialize-failed") ||
+    /could not be cloned|DataCloneError|circular/i.test(message)
+  ) {
+    return new Error(t("panel.messages.workspaceStorageSerializeFailed"));
+  }
+
+  if (
+    message.includes("indexeddb-open-failed") ||
+    message.includes("indexeddb-transaction-failed") ||
+    message.includes("indexeddb-request-failed") ||
+    message.includes("indexeddb-transaction-aborted")
+  ) {
+    return new Error(t("panel.messages.workspaceStorageFailed"));
+  }
+
+  return raw;
+}

package/src/panel/utils/canvas-interaction-busy.ts

@@ -0,0 +1,36 @@
+/**
+ * While Moveable is actively dragging/resizing/rotating, pause expensive
+ * canvas-wide work (e.g. ellipsis overflow measurement via MutationObserver).
+ */
+let busyDepth = 0;
+const listeners = new Set<() => void>();
+
+export function isCanvasInteractionBusy(): boolean {
+  return busyDepth > 0;
+}
+
+export function setCanvasInteractionBusy(busy: boolean): void {
+  const prev = busyDepth > 0;
+  if (busy) busyDepth += 1;
+  else busyDepth = Math.max(0, busyDepth - 1);
+  const next = busyDepth > 0;
+  if (prev === next) return;
+  listeners.forEach((listener) => listener());
+}
+
+export function subscribeCanvasInteractionBusy(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/** Run `fn` with busy=true; always clears one busy level afterward. */
+export function withCanvasInteractionBusy<T>(fn: () => T): T {
+  setCanvasInteractionBusy(true);
+  try {
+    return fn();
+  } finally {
+    setCanvasInteractionBusy(false);
+  }
+}

package/src/panel/utils/materializePanelElements.ts

@@ -0,0 +1,97 @@
+import type { PanelElement } from "../types";
+import { isPanelElementNode } from "./panelElementNodes";
+import type { Node } from "@arronqzy/rx-store";
+
+/**
+ * Preserve Immer structural sharing: unchanged nodes keep the same props
+ * object reference so React.memo / Vue can skip re-rendering them.
+ */
+export function materializePanelElements(
+  nodes: Node[] | undefined,
+  previous?: readonly PanelElement[] | null
+): PanelElement[] {
+  const list = nodes ?? [];
+  const prevById = previous?.length
+    ? new Map(previous.map((el) => [el.id, el] as const))
+    : null;
+  const next: PanelElement[] = [];
+
+  for (const n of list) {
+    if (!isPanelElementNode(n) || !n.props) continue;
+    const props = n.props as PanelElement;
+    const normalized: PanelElement =
+      typeof props.zIndex === "number" ? props : { ...props, zIndex: 1 };
+
+    const prev = prevById?.get(normalized.id);
+    // Same Immer props reference → reuse previous materialized element.
+    if (prev && prev === normalized) {
+      next.push(prev);
+      continue;
+    }
+    if (
+      prev &&
+      prev.id === normalized.id &&
+      prev.x === normalized.x &&
+      prev.y === normalized.y &&
+      prev.width === normalized.width &&
+      prev.height === normalized.height &&
+      prev.rotate === normalized.rotate &&
+      prev.zIndex === normalized.zIndex &&
+      prev.layerId === normalized.layerId &&
+      prev.locked === normalized.locked &&
+      prev.materialType === normalized.materialType &&
+      prev.name === normalized.name &&
+      prev.chart === normalized.chart &&
+      prev.table === normalized.table &&
+      prev.style === normalized.style &&
+      prev.textHtml === normalized.textHtml &&
+      prev.textAllowInput === normalized.textAllowInput &&
+      prev.gridRows === normalized.gridRows &&
+      prev.gridCols === normalized.gridCols &&
+      prev.gridGap === normalized.gridGap &&
+      prev.gridPadding === normalized.gridPadding &&
+      prev.parentGridId === normalized.parentGridId &&
+      prev.gridSlotIndex === normalized.gridSlotIndex &&
+      prev.gridColSpan === normalized.gridColSpan &&
+      prev.gridRowSpan === normalized.gridRowSpan &&
+      prev.viewportOverflow === normalized.viewportOverflow &&
+      prev.scene3d === normalized.scene3d &&
+      prev.refLayerId === normalized.refLayerId &&
+      prev.refCopyMode === normalized.refCopyMode &&
+      prev.refSnapshot === normalized.refSnapshot &&
+      prev.audioSrc === normalized.audioSrc &&
+      prev.videoSrc === normalized.videoSrc &&
+      prev.geometryShape === normalized.geometryShape &&
+      prev.geometryColor === normalized.geometryColor &&
+      prev.geometrySketchDataUrl === normalized.geometrySketchDataUrl
+    ) {
+      next.push(prev);
+      continue;
+    }
+    next.push(normalized);
+  }
+
+  if (
+    previous &&
+    previous.length === next.length &&
+    previous.every((el, i) => el === next[i])
+  ) {
+    return previous as PanelElement[];
+  }
+  return next;
+}
+
+/** Keep previous array identity when item references are unchanged (order-sensitive). */
+export function stabilizeElementList(
+  next: PanelElement[],
+  previous?: readonly PanelElement[] | null
+): PanelElement[] {
+  if (
+    previous &&
+    previous.length === next.length &&
+    previous.every((el, i) => el === next[i])
+  ) {
+    return previous as PanelElement[];
+  }
+  return next;
+}