@arronqzy/vue-view 0.1.16 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-view",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "Vue 3 visual view editor for Abuilder (Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -23,13 +23,13 @@
     "selecto": "^1.26.3",
     "uuid": "^13.0.0",
     "vue": "^3.5.13",
-    "@arronqzy/blueprint-dsl": "1.0.14",
+    "@arronqzy/rx-store": "1.0.8",
+    "@arronqzy/i18n": "0.1.12",
     "@arronqzy/view-scene3d": "0.1.5",
-    "@arronqzy/i18n": "0.1.11",
+    "@arronqzy/vue-blueprint": "0.1.13",
     "@arronqzy/view-table": "0.1.8",
-    "@arronqzy/vue-blueprint": "0.1.12",
     "@arronqzy/vue-rx-store": "0.1.6",
-    "@arronqzy/rx-store": "1.0.8"
+    "@arronqzy/blueprint-dsl": "1.0.14"
   },
   "peerDependencies": {
     "vue": "^3.4.0"

package/src/panel/VueViewPanel.vue

@@ -409,11 +409,25 @@ const workspaceProjects = useWorkspaceProjects({
   nameSpace: () => props.nameSpace,
 });
 
+const blueprintLifecycleToken = computed(() => {
+  const doc = blueprintGraph.value.document;
+  const nodes = doc.nodes;
+  const edges = doc.edges;
+  let sig = `${nodes.length}:${edges.length}`;
+  for (const node of nodes) {
+    sig += `|${node.id}:${resolveRunnableNodeType(node)}:${node.lifecyclePhase ?? ""}`;
+  }
+  for (const edge of edges) {
+    sig += `>${edge.id}:${edge.source}:${edge.target}`;
+  }
+  return sig;
+});
+
 const { triggerBlueprintNode, emitViewEvent, firedLifecyclePhases } = useBlueprintPageLifecycle({
   graph: blueprintGraph,
   active: blueprintOpen,
   bootKey: computed(() => workspaceProjects.activeProjectId.value ?? undefined),
-  onUpdated: computed(() => `${activeLayerId.value}|${historyCursor.value}`),
+  onUpdated: computed(() => `${activeLayerId.value}|${blueprintLifecycleToken.value}`),
   resolveLibraryBlueprint,
   libraryNameById: blueprintLibraryNameById,
   rootLibraryBlueprintId: activeBlueprintLibraryId,
@@ -583,8 +597,14 @@ async function handleBlueprintImportFile(file: File) {
 }
 
 async function handleWorkspaceCreateProject() {
-  const result = await workspaceProjects.handleCreateProject();
-  if (result?.name) message.success(panelMessages().workspaceCreated(result.name));
+  try {
+    const result = await workspaceProjects.handleCreateProject();
+    if (result?.name) message.success(panelMessages().workspaceCreated(result.name));
+  } catch (error) {
+    message.error(
+      error instanceof Error ? error.message : panelMessages().createWorkspaceFailed
+    );
+  }
 }
 
 async function handleWorkspaceOpenProject(id: string) {
@@ -609,8 +629,14 @@ async function handleWorkspaceSyncProject() {
 }
 
 async function handleWorkspaceDeleteProject(id: string) {
-  await workspaceProjects.handleDeleteProject(id);
-  message.success(panelMessages().workspaceDeleted);
+  try {
+    await workspaceProjects.handleDeleteProject(id);
+    message.success(panelMessages().workspaceDeleted);
+  } catch (error) {
+    message.error(
+      error instanceof Error ? error.message : panelMessages().deleteWorkspaceFailed
+    );
+  }
 }
 
 async function openOnlinePreviewForProject(

package/src/panel/components/ElementsLayer.vue

@@ -185,6 +185,7 @@ function hasViewEvent(el: PanelElement) {
   <div
     v-for="el in sortedElements"
     :key="el.id"
+    v-memo="[el, selectedIds.includes(el.id), previewMode, layerLocked, hasViewEvent(el), previewLayoutKey]"
     :class="[
       'absolute select-none',
       previewMode ? '' : 'rv-selectable',
@@ -202,6 +203,8 @@ function hasViewEvent(el: PanelElement) {
       transformOrigin: 'center center',
       boxSizing: 'border-box',
       overflow: el.materialType === 'viewport' ? 'hidden' : undefined,
+      contentVisibility: 'auto',
+      containIntrinsicSize: `${Math.max(1, el.width)}px ${Math.max(1, el.height)}px`,
       ...getNodeVisualStyle(el),
     }"
     @mousedown="onSelect(el.id, $event)"

package/src/panel/components/MoveableLayer.vue

@@ -11,7 +11,7 @@ import {
 import Moveable from "moveable";
 import type { PanelElement } from "../types";
 import { uniformViewportZoom } from "../viewportZoom";
-import { notifyPreviewLayoutChanged } from "../utils/panelStateIO";
+import { setCanvasInteractionBusy } from "../utils/canvas-interaction-busy";
 
 const { t, locale } = useI18n();
 
@@ -444,6 +444,7 @@ function createMoveable() {
     const point = readClientPoint(e);
     e.datas.__startClientX = point?.x ?? null;
     e.datas.__startClientY = point?.y ?? null;
+    setCanvasInteractionBusy(true);
   });
 
   moveable.on("drag", (e: any) => {
@@ -479,6 +480,7 @@ function createMoveable() {
       ev.datas.__startClientX = point?.x ?? null;
       ev.datas.__startClientY = point?.y ?? null;
     });
+    setCanvasInteractionBusy(true);
   });
 
   moveable.on("dragGroup", (e: any) => {
@@ -513,6 +515,7 @@ function createMoveable() {
     e.datas.__startY = data.y;
     e.datas.__startClientX = e.inputEvent?.clientX ?? null;
     e.datas.__startClientY = e.inputEvent?.clientY ?? null;
+    setCanvasInteractionBusy(true);
   });
 
   moveable.on("resize", (e: any) => {
@@ -526,7 +529,6 @@ function createMoveable() {
     const ty = toCanvasDeltaY(e.drag.beforeTranslate?.[1] ?? 0);
     e.target.style.left = `${sx + tx}px`;
     e.target.style.top = `${sy + ty}px`;
-    notifyPreviewLayoutChanged();
   });
 
   moveable.on("resizeGroupStart", (e: any) => {
@@ -543,6 +545,7 @@ function createMoveable() {
       ev.datas.__startClientX = input?.clientX ?? null;
       ev.datas.__startClientY = input?.clientY ?? null;
     });
+    setCanvasInteractionBusy(true);
   });
 
   moveable.on("resizeGroup", (e: any) => {
@@ -557,7 +560,6 @@ function createMoveable() {
       ev.target.style.left = `${sx + tx}px`;
       ev.target.style.top = `${sy + ty}px`;
     });
-    notifyPreviewLayoutChanged();
   });
 
   moveable.on("rotateStart", (e: any) => {
@@ -566,6 +568,7 @@ function createMoveable() {
     const data = props.elementsById.get(id);
     if (!data) return;
     e.set(data.rotate ?? 0);
+    setCanvasInteractionBusy(true);
   });
 
   moveable.on("rotate", (e: any) => {
@@ -573,6 +576,17 @@ function createMoveable() {
     e.target.style.transform = `rotate(${e.beforeRotate}deg)`;
   });
 
+  moveable.on("rotateGroupStart", (e: any) => {
+    e.events.forEach((ev: any) => {
+      const id = ev.target ? getId(ev.target) : null;
+      if (!id) return;
+      const data = props.elementsById.get(id);
+      if (!data) return;
+      ev.set(data.rotate ?? 0);
+    });
+    setCanvasInteractionBusy(true);
+  });
+
   moveable.on("rotateGroup", (e: any) => {
     e.events.forEach((ev: any) => {
       if (!ev?.target?.style) return;
@@ -581,175 +595,199 @@ function createMoveable() {
   });
 
   moveable.on("dragEnd", (e: any) => {
-    const id = resolveSingleEventId(e.target as HTMLElement | null);
-    if (!id) return;
-    const data = props.elementsById.get(id);
-    if (!data) return;
-    const sx = e.datas.__startX ?? data.x;
-    const sy = e.datas.__startY ?? data.y;
-    const point = readClientPoint(e);
-    const hasClient =
-      typeof e.datas.__startClientX === "number" &&
-      typeof e.datas.__startClientY === "number" &&
-      !!point;
-    const tx = hasClient
-      ? toCanvasDeltaX(point.x - e.datas.__startClientX)
-      : toCanvasDeltaX(e.lastEvent?.beforeTranslate?.[0] ?? 0);
-    const ty = hasClient
-      ? toCanvasDeltaY(point.y - e.datas.__startClientY)
-      : toCanvasDeltaY(e.lastEvent?.beforeTranslate?.[1] ?? 0);
-    const nextX = sx + tx;
-    const nextY = sy + ty;
-    const size = readTargetCanvasSize(e.target as HTMLElement | null, {
-      width: data.width,
-      height: data.height,
-    });
-    const patch = getSnapPatch(id, nextX, nextY, size.width, size.height);
-    props.updateElement(id, { x: nextX, y: nextY, ...patch });
-    if (data.materialType === "grid") {
-      const dx = nextX - data.x;
-      const dy = nextY - data.y;
-      if (Math.abs(dx) > 0.001 || Math.abs(dy) > 0.001) {
-        const children = getGridDirectChildren(id);
-        const batchId = `move-grid-children-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-        children.forEach((child) => {
-          props.updateElement(
-            child.id,
-            { x: child.x + dx, y: child.y + dy },
-            { batchId, meta: { type: "node.group-drag" } }
-          );
-        });
-      }
-    }
-    scheduleViewportSync();
-  });
-
-  moveable.on("dragGroupEnd", (e: any) => {
-    const batchId = `move-group-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-    const selectedSet = new Set(
-      e.events
-        .map((ev: any) => (ev.target ? getId(ev.target) : null))
-        .filter((id: string | null): id is string => !!id)
-    );
-    const gridDeltaMap = new Map<string, { dx: number; dy: number }>();
-    e.events.forEach((ev: any) => {
-      const id = ev.target ? getId(ev.target) : null;
+    try {
+      const id = resolveSingleEventId(e.target as HTMLElement | null);
       if (!id) return;
       const data = props.elementsById.get(id);
       if (!data) return;
-      const sx = ev.datas.__startX ?? data.x;
-      const sy = ev.datas.__startY ?? data.y;
-      const point = readClientPoint(ev) ?? readClientPoint(e);
+      const sx = e.datas.__startX ?? data.x;
+      const sy = e.datas.__startY ?? data.y;
+      const point = readClientPoint(e);
       const hasClient =
-        typeof ev.datas.__startClientX === "number" &&
-        typeof ev.datas.__startClientY === "number" &&
+        typeof e.datas.__startClientX === "number" &&
+        typeof e.datas.__startClientY === "number" &&
         !!point;
       const tx = hasClient
-        ? toCanvasDeltaX(point.x - ev.datas.__startClientX)
-        : toCanvasDeltaX(ev.lastEvent?.beforeTranslate?.[0] ?? 0);
+        ? toCanvasDeltaX(point.x - e.datas.__startClientX)
+        : toCanvasDeltaX(e.lastEvent?.beforeTranslate?.[0] ?? 0);
       const ty = hasClient
-        ? toCanvasDeltaY(point.y - ev.datas.__startClientY)
-        : toCanvasDeltaY(ev.lastEvent?.beforeTranslate?.[1] ?? 0);
+        ? toCanvasDeltaY(point.y - e.datas.__startClientY)
+        : toCanvasDeltaY(e.lastEvent?.beforeTranslate?.[1] ?? 0);
       const nextX = sx + tx;
       const nextY = sy + ty;
-      const size = readTargetCanvasSize(ev.target as HTMLElement | null, {
+      const size = readTargetCanvasSize(e.target as HTMLElement | null, {
         width: data.width,
         height: data.height,
       });
       const patch = getSnapPatch(id, nextX, nextY, size.width, size.height);
-      props.updateElement(
-        id,
-        { x: nextX, y: nextY, ...patch },
-        { batchId, meta: { type: "node.group-drag" } }
-      );
+      props.updateElement(id, { x: nextX, y: nextY, ...patch });
       if (data.materialType === "grid") {
         const dx = nextX - data.x;
         const dy = nextY - data.y;
         if (Math.abs(dx) > 0.001 || Math.abs(dy) > 0.001) {
-          gridDeltaMap.set(id, { dx, dy });
+          const children = getGridDirectChildren(id);
+          const batchId = `move-grid-children-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+          children.forEach((child) => {
+            props.updateElement(
+              child.id,
+              { x: child.x + dx, y: child.y + dy },
+              { batchId, meta: { type: "node.group-drag" } }
+            );
+          });
         }
       }
-    });
-    for (const [gridId, delta] of gridDeltaMap.entries()) {
-      const children = getGridDirectChildren(gridId);
-      children.forEach((child) => {
-        if (selectedSet.has(child.id)) return;
+      scheduleViewportSync();
+    } finally {
+      setCanvasInteractionBusy(false);
+    }
+  });
+
+  moveable.on("dragGroupEnd", (e: any) => {
+    try {
+      const batchId = `move-group-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+      const selectedSet = new Set(
+        e.events
+          .map((ev: any) => (ev.target ? getId(ev.target) : null))
+          .filter((id: string | null): id is string => !!id)
+      );
+      const gridDeltaMap = new Map<string, { dx: number; dy: number }>();
+      e.events.forEach((ev: any) => {
+        const id = ev.target ? getId(ev.target) : null;
+        if (!id) return;
+        const data = props.elementsById.get(id);
+        if (!data) return;
+        const sx = ev.datas.__startX ?? data.x;
+        const sy = ev.datas.__startY ?? data.y;
+        const point = readClientPoint(ev) ?? readClientPoint(e);
+        const hasClient =
+          typeof ev.datas.__startClientX === "number" &&
+          typeof ev.datas.__startClientY === "number" &&
+          !!point;
+        const tx = hasClient
+          ? toCanvasDeltaX(point.x - ev.datas.__startClientX)
+          : toCanvasDeltaX(ev.lastEvent?.beforeTranslate?.[0] ?? 0);
+        const ty = hasClient
+          ? toCanvasDeltaY(point.y - ev.datas.__startClientY)
+          : toCanvasDeltaY(ev.lastEvent?.beforeTranslate?.[1] ?? 0);
+        const nextX = sx + tx;
+        const nextY = sy + ty;
+        const size = readTargetCanvasSize(ev.target as HTMLElement | null, {
+          width: data.width,
+          height: data.height,
+        });
+        const patch = getSnapPatch(id, nextX, nextY, size.width, size.height);
         props.updateElement(
-          child.id,
-          { x: child.x + delta.dx, y: child.y + delta.dy },
+          id,
+          { x: nextX, y: nextY, ...patch },
           { batchId, meta: { type: "node.group-drag" } }
         );
+        if (data.materialType === "grid") {
+          const dx = nextX - data.x;
+          const dy = nextY - data.y;
+          if (Math.abs(dx) > 0.001 || Math.abs(dy) > 0.001) {
+            gridDeltaMap.set(id, { dx, dy });
+          }
+        }
       });
+      for (const [gridId, delta] of gridDeltaMap.entries()) {
+        const children = getGridDirectChildren(gridId);
+        children.forEach((child) => {
+          if (selectedSet.has(child.id)) return;
+          props.updateElement(
+            child.id,
+            { x: child.x + delta.dx, y: child.y + delta.dy },
+            { batchId, meta: { type: "node.group-drag" } }
+          );
+        });
+      }
+      scheduleViewportSync();
+    } finally {
+      setCanvasInteractionBusy(false);
     }
-    scheduleViewportSync();
   });
 
   moveable.on("resizeEnd", (e: any) => {
-    const id = resolveSingleEventId(e.target as HTMLElement | null);
-    if (!id) return;
-    const data = props.elementsById.get(id);
-    if (!data) return;
-    const width = e.lastEvent?.width ?? data.width;
-    const height = e.lastEvent?.height ?? data.height;
-    const tx = toCanvasDeltaX(e.lastEvent?.drag?.beforeTranslate?.[0] ?? 0);
-    const ty = toCanvasDeltaY(e.lastEvent?.drag?.beforeTranslate?.[1] ?? 0);
-    const sx = e.datas.__startX ?? data.x;
-    const sy = e.datas.__startY ?? data.y;
-    const nextX = sx + tx;
-    const nextY = sy + ty;
-    const size = readTargetCanvasSize(e.target as HTMLElement | null, { width, height });
-    const snapPatch = getSnapPatch(id, nextX, nextY, size.width, size.height);
-    props.updateElement(id, { width, height, x: nextX, y: nextY, ...snapPatch });
-    scheduleViewportSync();
-  });
-
-  moveable.on("resizeGroupEnd", (e: any) => {
-    const batchId = `resize-group-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-    e.events.forEach((ev: any) => {
-      const id = ev.target ? getId(ev.target) : null;
+    try {
+      const id = resolveSingleEventId(e.target as HTMLElement | null);
       if (!id) return;
       const data = props.elementsById.get(id);
       if (!data) return;
-      const width = ev.lastEvent?.width ?? data.width;
-      const height = ev.lastEvent?.height ?? data.height;
-      const tx = toCanvasDeltaX(ev.lastEvent?.drag?.beforeTranslate?.[0] ?? 0);
-      const ty = toCanvasDeltaY(ev.lastEvent?.drag?.beforeTranslate?.[1] ?? 0);
-      const sx = ev.datas.__startX ?? data.x;
-      const sy = ev.datas.__startY ?? data.y;
+      const width = e.lastEvent?.width ?? data.width;
+      const height = e.lastEvent?.height ?? data.height;
+      const tx = toCanvasDeltaX(e.lastEvent?.drag?.beforeTranslate?.[0] ?? 0);
+      const ty = toCanvasDeltaY(e.lastEvent?.drag?.beforeTranslate?.[1] ?? 0);
+      const sx = e.datas.__startX ?? data.x;
+      const sy = e.datas.__startY ?? data.y;
       const nextX = sx + tx;
       const nextY = sy + ty;
-      const size = readTargetCanvasSize(ev.target as HTMLElement | null, { width, height });
+      const size = readTargetCanvasSize(e.target as HTMLElement | null, { width, height });
       const snapPatch = getSnapPatch(id, nextX, nextY, size.width, size.height);
-      props.updateElement(
-        id,
-        { width, height, x: nextX, y: nextY, ...snapPatch },
-        { batchId, meta: { type: "node.group-resize" } }
-      );
-    });
-    scheduleViewportSync();
+      props.updateElement(id, { width, height, x: nextX, y: nextY, ...snapPatch });
+      scheduleViewportSync();
+    } finally {
+      setCanvasInteractionBusy(false);
+    }
   });
 
-  moveable.on("rotateEnd", (e: any) => {
-    const id = resolveSingleEventId(e.target as HTMLElement | null);
-    if (!id) return;
-    const data = props.elementsById.get(id);
-    if (!data) return;
-    const rotate = e.lastEvent?.beforeRotate ?? data.rotate ?? 0;
-    props.updateElement(id, { rotate });
-    scheduleViewportSync();
+  moveable.on("resizeGroupEnd", (e: any) => {
+    try {
+      const batchId = `resize-group-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+      e.events.forEach((ev: any) => {
+        const id = ev.target ? getId(ev.target) : null;
+        if (!id) return;
+        const data = props.elementsById.get(id);
+        if (!data) return;
+        const width = ev.lastEvent?.width ?? data.width;
+        const height = ev.lastEvent?.height ?? data.height;
+        const tx = toCanvasDeltaX(ev.lastEvent?.drag?.beforeTranslate?.[0] ?? 0);
+        const ty = toCanvasDeltaY(ev.lastEvent?.drag?.beforeTranslate?.[1] ?? 0);
+        const sx = ev.datas.__startX ?? data.x;
+        const sy = ev.datas.__startY ?? data.y;
+        const nextX = sx + tx;
+        const nextY = sy + ty;
+        const size = readTargetCanvasSize(ev.target as HTMLElement | null, { width, height });
+        const snapPatch = getSnapPatch(id, nextX, nextY, size.width, size.height);
+        props.updateElement(
+          id,
+          { width, height, x: nextX, y: nextY, ...snapPatch },
+          { batchId, meta: { type: "node.group-resize" } }
+        );
+      });
+      scheduleViewportSync();
+    } finally {
+      setCanvasInteractionBusy(false);
+    }
   });
 
-  moveable.on("rotateGroupEnd", (e: any) => {
-    const batchId = `rotate-group-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-    e.events.forEach((ev: any) => {
-      const id = ev.target ? getId(ev.target) : null;
+  moveable.on("rotateEnd", (e: any) => {
+    try {
+      const id = resolveSingleEventId(e.target as HTMLElement | null);
       if (!id) return;
       const data = props.elementsById.get(id);
       if (!data) return;
-      const rotate = ev.lastEvent?.beforeRotate ?? data.rotate ?? 0;
-      props.updateElement(id, { rotate }, { batchId, meta: { type: "node.group-rotate" } });
-    });
-    scheduleViewportSync();
+      const rotate = e.lastEvent?.beforeRotate ?? data.rotate ?? 0;
+      props.updateElement(id, { rotate });
+      scheduleViewportSync();
+    } finally {
+      setCanvasInteractionBusy(false);
+    }
+  });
+
+  moveable.on("rotateGroupEnd", (e: any) => {
+    try {
+      const batchId = `rotate-group-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+      e.events.forEach((ev: any) => {
+        const id = ev.target ? getId(ev.target) : null;
+        if (!id) return;
+        const data = props.elementsById.get(id);
+        if (!data) return;
+        const rotate = ev.lastEvent?.beforeRotate ?? data.rotate ?? 0;
+        props.updateElement(id, { rotate }, { batchId, meta: { type: "node.group-rotate" } });
+      });
+      scheduleViewportSync();
+    } finally {
+      setCanvasInteractionBusy(false);
+    }
   });
 
   moveableRef.value = moveable;

package/src/panel/components/PanelConfigSidebar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from "@arronqzy/i18n/vue";
-import { computed, onMounted, provide, ref, watch } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, provide, ref, watch } from "vue";
 import { Empty, Input } from "ant-design-vue";
 import type { PanelElement, PanelLayer, ReferenceCopyMode } from "../types";
 import { CHART_TYPES } from "../utils/chartOptionBuilder";
@@ -60,6 +60,8 @@ const props = withDefaults(
 const configSearch = ref("");
 const isSearchCollapsed = ref(false);
 const sidebarScrollRef = ref<HTMLElement | null>(null);
+const configScrollPosById = new Map<string, number>();
+const activeConfigScrollKey = ref<string | null>(null);
 
 const expandedSections = ref<Record<string, boolean>>({
   nodeInfo: true,
@@ -88,6 +90,49 @@ const effectiveSelectedElements = computed(() => {
 
 const isMultiSelectMode = computed(() => effectiveSelectedElements.value.length > 1);
 
+const configScrollKey = computed(() => {
+  if (isMultiSelectMode.value || !props.selectedElement) return null;
+  return props.selectedElement.id;
+});
+
+function onConfigSidebarScroll() {
+  const el = sidebarScrollRef.value;
+  const key = activeConfigScrollKey.value;
+  if (!el || !key) return;
+  configScrollPosById.set(key, el.scrollTop);
+}
+
+function restoreConfigScroll(key: string | null) {
+  const el = sidebarScrollRef.value;
+  if (!el) return;
+  const top = key != null ? (configScrollPosById.get(key) ?? 0) : 0;
+  el.scrollTop = top;
+}
+
+watch(
+  configScrollKey,
+  (nextKey, prevKey) => {
+    const el = sidebarScrollRef.value;
+    if (el && prevKey && prevKey !== nextKey) {
+      configScrollPosById.set(prevKey, el.scrollTop);
+    }
+    activeConfigScrollKey.value = nextKey;
+    void nextTick(() => restoreConfigScroll(nextKey));
+  },
+  { flush: "post" }
+);
+
+onMounted(() => {
+  activeConfigScrollKey.value = configScrollKey.value;
+  const el = sidebarScrollRef.value;
+  el?.addEventListener("scroll", onConfigSidebarScroll, { passive: true });
+  restoreConfigScroll(configScrollKey.value);
+});
+
+onUnmounted(() => {
+  sidebarScrollRef.value?.removeEventListener("scroll", onConfigSidebarScroll);
+});
+
 const selectedLayer = computed(() => {
   if (!props.selectedElement) return null;
   return props.layers.find((l) => l.id === props.selectedElement?.layerId) ?? null;

package/src/panel/constants/messages.ts

@@ -52,7 +52,9 @@ export function getPanelMessages(t: TranslateFn) {
     workspaceLoaded: t("panel.messages.workspaceLoaded"),
     workspaceLoadedDesc: t("panel.messages.workspaceLoadedDesc"),
     openWorkspaceFailed: t("panel.messages.openWorkspaceFailed"),
+    createWorkspaceFailed: t("panel.messages.createWorkspaceFailed"),
     syncFailed: t("panel.messages.syncFailed"),
+    deleteWorkspaceFailed: t("panel.messages.deleteWorkspaceFailed"),
     workspaceDeleted: t("panel.messages.workspaceDeleted"),
     openPreviewFailed: t("panel.messages.openPreviewFailed"),
     clearedBlueprintLogs: (removed: number) =>

package/src/panel/hooks/usePanelElements.ts

@@ -1,4 +1,4 @@
-import { computed, onMounted } from "vue";
+import { computed, onMounted, shallowRef } from "vue";
 import { store, type Node, type State } from "@arronqzy/rx-store";
 import { useStoreRef } from "@arronqzy/vue-rx-store";
 import { useI18nOptional } from "@arronqzy/i18n/vue";
@@ -47,6 +47,10 @@ import {
   applyGridLayoutPatchAcrossMappingFamily,
   applyMappingFamilySyncPatch,
 } from "../utils/updateElementDraft";
+import {
+  materializePanelElements,
+  stabilizeElementList,
+} from "../utils/materializePanelElements";
 
 export type { PanelActionResult, PanelHistoryItem, PanelLayer } from "../types";
 
@@ -126,19 +130,24 @@ export function usePanelElements() {
       (stateRef.value.variables?.activeLayerId as string | undefined) ?? DEFAULT_LAYER_ID
   );
 
+  const allElementsCache = shallowRef<PanelElement[]>([]);
+  const elementsCache = shallowRef<PanelElement[]>([]);
+
   const allElements = computed(() => {
-    const nodes = stateRef.value.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(
+      stateRef.value.root.children,
+      allElementsCache.value
+    );
+    allElementsCache.value = next;
+    return next;
   });
 
-  const elements = computed(() =>
-    allElements.value.filter((el) => el.layerId === activeLayerId.value)
-  );
+  const elements = computed(() => {
+    const next = allElements.value.filter((el) => el.layerId === activeLayerId.value);
+    const stable = stabilizeElementList(next, elementsCache.value);
+    elementsCache.value = stable;
+    return stable;
+  });
 
   const byId = computed(() => {
     const map = new Map<string, PanelElement>();
@@ -1047,7 +1056,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,
+      });
+    }
   }
 
   function importPanelData(nextState: State) {

package/src/panel/hooks/useWorkspaceProjects.ts

@@ -23,6 +23,7 @@ import {
   workspaceSnapshotsEqual,
   type WorkspaceSnapshot,
 } from "../library/workspace-snapshot";
+import { mapWorkspaceStorageError } from "../library/workspace-storage-error";
 import { runBusyTask } from "../utils/async-work";
 import { createEmptyPanelState, normalizeImportedPanelState } from "../utils/panelStateIO";
 import { AbuilderEvents, emitAbuilderEvent } from "../library/event-subscription";
@@ -125,7 +126,11 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
   }
 
   async function refreshProjects() {
-    projects.value = await listWorkspaceProjects(nameSpace());
+    try {
+      projects.value = await listWorkspaceProjects(nameSpace());
+    } catch (error) {
+      console.warn("[abuilder] listWorkspaceProjects failed", error);
+    }
   }
 
   watch(
@@ -262,35 +267,48 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
     name: string;
     createdAt?: number;
   }) {
-    const snapshot = cloneWorkspaceSnapshot(buildCurrentSnapshot());
-    const now = Date.now();
-    const id = persistOptions.id ?? createWorkspaceProjectId();
-    const createdAt = persistOptions.createdAt ?? now;
-    const name = (persistOptions.name ?? "").trim() || resolveProjectName();
-
-    const record: WorkspaceProjectRecord = {
-      id,
-      name,
-      createdAt,
-      updatedAt: now,
-      panelState: options.exportPanelData(),
-      blueprintDocument: snapshot.blueprintDocument,
-      blueprintMeta: snapshot.blueprintMeta,
-      productName:
-        typeof snapshot.productName === "string" ? snapshot.productName : resolveProjectName(),
-      titleIconDataUrl: snapshot.titleIconDataUrl || undefined,
-    };
+    try {
+      const snapshot = cloneWorkspaceSnapshot(buildCurrentSnapshot());
+      const now = Date.now();
+      const id = persistOptions.id ?? createWorkspaceProjectId();
+      const createdAt = persistOptions.createdAt ?? now;
+      const name = (persistOptions.name ?? "").trim() || resolveProjectName();
 
-    await putWorkspaceProject(record, nameSpace());
-    writeWorkspacePreviewCache(record, nameSpace());
-    broadcastWorkspaceProjectUpdate(id, now, nameSpace());
-    activeProjectId.value = id;
-    activeProjectName.value = name;
-    syncedSnapshotRef.value = snapshot;
-    syncedPanelRevision = toValue(options.panelRevision);
-    pendingRevisionSync = false;
-    await refreshProjects();
-    return record;
+      let panelState: State;
+      try {
+        panelState = options.exportPanelData();
+      } catch (error) {
+        throw mapWorkspaceStorageError(error, t);
+      }
+
+      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());
+      activeProjectId.value = id;
+      activeProjectName.value = name;
+      syncedSnapshotRef.value = snapshot;
+      syncedPanelRevision = toValue(options.panelRevision);
+      pendingRevisionSync = false;
+      await refreshProjects();
+      return record;
+    } catch (error) {
+      throw mapWorkspaceStorageError(error, t);
+    }
   }
 
   async function handleCreateProject() {
@@ -320,14 +338,18 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
   }
 
   async function handleOpenProject(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);
+    }
   }
 
   async function handleSyncProject() {
@@ -355,17 +377,21 @@ export function useWorkspaceProjects(options: UseWorkspaceProjectsOptions) {
   }
 
   async function handleDeleteProject(id: string) {
-    await runBusyTask(t("common.deletingWorkspace"), async () => {
-      await deleteWorkspaceProject(id, nameSpace());
-      if (activeProjectId.value === id) {
-        activeProjectId.value = null;
-        activeProjectName.value = null;
-        syncedSnapshotRef.value = null;
-      }
-      previewWindows.delete(id);
-      refreshPreviewing();
-      await refreshProjects();
-    });
+    try {
+      await runBusyTask(t("common.deletingWorkspace"), async () => {
+        await deleteWorkspaceProject(id, nameSpace());
+        if (activeProjectId.value === id) {
+          activeProjectId.value = null;
+          activeProjectName.value = null;
+          syncedSnapshotRef.value = null;
+        }
+        previewWindows.delete(id);
+        refreshPreviewing();
+        await refreshProjects();
+      });
+    } catch (error) {
+      throw mapWorkspaceStorageError(error, t);
+    }
   }
 
   async function handlePreviewProject(id: string, previewOptions?: { syncFirst?: boolean }) {

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

@@ -5,6 +5,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;
@@ -25,10 +26,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)) {
@@ -36,8 +104,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>(
@@ -48,27 +143,74 @@ 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) {
+          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) => {
+    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 {
@@ -102,11 +244,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"));
     };
   });
@@ -128,8 +268,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,26 @@
+/**
+ * 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);
+  };
+}

package/src/panel/utils/materializePanelElements.ts

@@ -0,0 +1,96 @@
+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);
+    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;
+}

package/src/panel/utils/panelStateIO.ts

@@ -137,6 +137,26 @@ export function computePanelSceneBounds(elements: PanelElement[]): PanelSceneBou
 
 export const PREVIEW_LAYOUT_EVENT = "arronqzy-preview-layout";
 
-export function notifyPreviewLayoutChanged() {
-  window.dispatchEvent(new Event(PREVIEW_LAYOUT_EVENT));
+let previewLayoutRaf = 0;
+
+/**
+ * Notify chart/preview hosts that layout changed.
+ * Default path is rAF-coalesced (safe during Moveable resize).
+ * Pass `{ flush: true }` after resize ends so charts catch the final size.
+ */
+export function notifyPreviewLayoutChanged(options?: { flush?: boolean }) {
+  if (typeof window === "undefined") return;
+  if (options?.flush) {
+    if (previewLayoutRaf) {
+      window.cancelAnimationFrame(previewLayoutRaf);
+      previewLayoutRaf = 0;
+    }
+    window.dispatchEvent(new Event(PREVIEW_LAYOUT_EVENT));
+    return;
+  }
+  if (previewLayoutRaf) return;
+  previewLayoutRaf = window.requestAnimationFrame(() => {
+    previewLayoutRaf = 0;
+    window.dispatchEvent(new Event(PREVIEW_LAYOUT_EVENT));
+  });
 }