@arronqzy/react-view 1.0.29 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.29",
+  "version": "1.0.30",
   "files": [
     "src",
     "dist",
@@ -33,10 +33,10 @@
     "@arronqzy/ui": "1.0.9",
     "@arronqzy/blueprint-dsl": "1.0.14",
     "@arronqzy/i18n": "0.1.12",
-    "@arronqzy/react-blueprint": "1.0.16",
+    "@arronqzy/react-blueprint": "1.0.17",
     "@arronqzy/rx-store": "1.0.8",
-    "@arronqzy/view-table": "0.1.8",
     "@arronqzy/view-scene3d": "0.1.5",
+    "@arronqzy/view-table": "0.1.8",
     "@arronqzy/webllm-assistant": "0.1.16"
   },
   "devDependencies": {

package/src/panel/ReactViewPanel.tsx

@@ -15,7 +15,14 @@ import { type ViewportZoom } from "./viewportZoom";
 import { ElementsLayer } from "./components/ElementsLayer";
 import { SelectLayer } from "./components/SelectLayer";
 import { MoveableLayer } from "./components/MoveableLayer";
-import { buildChartOption, CHART_TYPES } from "./utils/chartOptionBuilder";
+import {
+  isCanvasInteractionBusy,
+  subscribeCanvasInteractionBusy,
+} from "./utils/canvas-interaction-busy";
+import {
+  buildChartOption,
+  CHART_TYPES,
+} from "./utils/chartOptionBuilder";
 import { readOutputScale, writeOutputScale } from "./utils/outputScale";
 import {
   captureEditorPreviewSnapshot,
@@ -391,9 +398,11 @@ function ReactViewPanelInner({
     if (!root) return;
     let rafId = 0;
     const schedule = () => {
+      if (isCanvasInteractionBusy()) return;
       if (rafId) return;
       rafId = window.requestAnimationFrame(() => {
         rafId = 0;
+        if (isCanvasInteractionBusy()) return;
         const candidates = root.querySelectorAll<HTMLElement>(
           ".truncate, .line-clamp-1, .line-clamp-2, .line-clamp-3"
         );
@@ -429,11 +438,15 @@ function ReactViewPanelInner({
     const resizeObserver = new ResizeObserver(schedule);
     resizeObserver.observe(root);
     window.addEventListener("resize", schedule);
+    const unsubscribeBusy = subscribeCanvasInteractionBusy(() => {
+      if (!isCanvasInteractionBusy()) schedule();
+    });
     return () => {
       if (rafId) window.cancelAnimationFrame(rafId);
       mutationObserver.disconnect();
       resizeObserver.disconnect();
       window.removeEventListener("resize", schedule);
+      unsubscribeBusy();
     };
   }, []);
 
@@ -1048,11 +1061,27 @@ function ReactViewPanelInner({
     return () => registerPreviewSnapshotProvider(null);
   }, [activeLayerId, allElements, canvasEl, layers, nameSpace]);
 
+  const blueprintDocument = blueprintGraph.document;
+  const blueprintLifecycleToken = useMemo(() => {
+    // Only blueprint / layer changes — panel history (drag/resize) must not re-run
+    // the full `updated` lifecycle (cycle detect + runner).
+    const nodes = blueprintDocument.nodes;
+    const edges = blueprintDocument.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;
+  }, [blueprintDocument]);
+
   const { triggerBlueprintNode, emitViewEvent, firedLifecyclePhases } = useBlueprintPageLifecycle({
     graph: blueprintGraph,
     active: blueprintOpen,
     bootKey: workspaceProjects.activeProjectId ?? undefined,
-    onUpdated: `${activeLayerId}|${historyCursor}`,
+    onUpdated: `${activeLayerId}|${blueprintLifecycleToken}`,
     resolveLibraryBlueprint,
     libraryNameById: blueprintLibraryNameById,
     rootLibraryBlueprintId: activeBlueprintLibraryId,

package/src/panel/components/ElementsLayer.tsx

@@ -587,7 +587,7 @@ function GeometryNodeContent({ element }: { element: PanelElement }) {
   return <canvas ref={canvasRef} className="h-full w-full" />;
 }
 
-function ChartNodeContent({
+const ChartNodeContent = React.memo(function ChartNodeContent({
   element,
   previewLayoutKey,
   previewMode = false,
@@ -654,7 +654,7 @@ function ChartNodeContent({
       }
     />
   );
-}
+});
 
 function getNodeVisualStyle(element: PanelElement): React.CSSProperties {
   const style = element.style ?? {};
@@ -884,6 +884,7 @@ export const ElementsLayer = React.memo(function ElementsLayer({
     },
     [boundViewEventTypes, onViewUiEvent]
   );
+  const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
   const sortedElements = useMemo(() => {
     const byId = new Map<string, PanelElement>();
     for (const el of allElements) byId.set(el.id, el);
@@ -891,111 +892,182 @@ export const ElementsLayer = React.memo(function ElementsLayer({
   }, [allElements, elements]);
   return (
     <>
-      {sortedElements.map((el) => {
-        const isSelected = selectedIds.includes(el.id);
-        const boundTypes = boundViewEventTypes?.get(el.id);
-        const hasViewEvent = Boolean(boundTypes && boundTypes.size > 0 && onViewUiEvent);
-        return (
-          <div
-            key={el.id}
-            className={[
-              "absolute select-none",
-              previewMode ? "" : "rv-selectable",
-              !previewMode && isSelected ? "ring-2 ring-blue-500/90 ring-offset-0" : "",
-              hasViewEvent ? "cursor-pointer" : "",
-            ].join(" ")}
-            data-element-id={el.id}
-            onMouseDown={(e) => {
-              if (previewMode) return;
-              const target = e.target as HTMLElement | null;
-              if (target?.closest("[data-scene3d-orbit-active='true']")) {
-                e.stopPropagation();
-                return;
-              }
-              if (e.button !== 0) return;
-              // 单击选中（与 Selecto 的框选互补）
-              if (e.shiftKey) {
-                onSelectIds(
-                  isSelected
-                    ? selectedIds.filter((id) => id !== el.id)
-                    : [...selectedIds, el.id]
-                );
-              } else {
-                onSelectIds([el.id]);
-              }
-            }}
-            onClick={(e) => emitViewUiEvent(el, "click", e)}
-            onDoubleClick={(e) => emitViewUiEvent(el, "dblclick", e)}
-            onContextMenu={(e) => emitViewUiEvent(el, "contextmenu", e)}
-            onMouseEnter={(e) => emitViewUiEvent(el, "mouseenter", e)}
-            onMouseLeave={(e) => emitViewUiEvent(el, "mouseleave", e)}
-            style={{
-              left: el.x,
-              top: el.y,
-              width: Math.max(1, el.width),
-              height: Math.max(1, el.height),
-              zIndex: el.zIndex ?? 1,
-              transform: `rotate(${el.rotate ?? 0}deg)`,
-              transformOrigin: "center center",
-              overflow: el.materialType === "viewport" ? "hidden" : undefined,
-              boxSizing: "border-box",
-              ...getNodeVisualStyle(el),
-            }}
-          >
-            {CHART_TYPES.has(el.materialType ?? "") ? (
-              <ChartNodeContent
-                element={el}
-                previewLayoutKey={previewLayoutKey}
-                previewMode={previewMode}
-              />
-            ) : el.materialType === "reference" || el.materialType === "viewport" ? (
-              <ReferenceNodeContent element={el} allElements={allElements} />
-            ) : el.materialType === "grid" ? (
-              <GridNodeContent
-                element={el}
-                allElements={allElements}
-                previewMode={previewMode}
-              />
-            ) : el.materialType === "text" ? (
-              <TextNodeContent
-                element={el}
-                editable={(el.textAllowInput ?? true) && !el.locked && !layerLocked}
-                onChange={(nextHtml) => {
-                  updateElement(el.id, { textHtml: nextHtml });
-                }}
-              />
-            ) : el.materialType === "audio" ? (
-              <AudioNodeContent element={el} selected={isSelected} />
-            ) : el.materialType === "video" ? (
-              <VideoNodeContent element={el} selected={isSelected} />
-            ) : el.materialType === "geometry" ? (
-              <GeometryNodeContent element={el} />
-            ) : el.materialType === "scene3d" ? (
-              <Scene3dNodeContent
-                config={el.scene3d}
-                previewMode={previewMode}
-                selected={isSelected}
-                updateConfig={(patch) =>
-                  updateElement(el.id, {
-                    scene3d: mergeScene3dConfig({ ...el.scene3d, ...patch }),
-                  })
-                }
-              />
-            ) : el.materialType === "image" ? (
-              <ImageNodeContent element={el} />
-            ) : el.materialType === "table" ? (
-              <TableNodeContent
-                element={el}
-                interactive={previewMode || Boolean(onTableCellAction)}
-                onCellAction={onTableCellAction}
-              />
-            ) : (
-              <EmptyNodePlaceholder element={el} />
-            )}
-          </div>
-        );
-      })}
+      {sortedElements.map((el) => (
+        <PanelElementNode
+          key={el.id}
+          el={el}
+          allElements={allElements}
+          isSelected={selectedIdSet.has(el.id)}
+          selectedIds={selectedIds}
+          onSelectIds={onSelectIds}
+          updateElement={updateElement}
+          layerLocked={layerLocked}
+          previewMode={previewMode}
+          previewLayoutKey={previewLayoutKey}
+          onTableCellAction={onTableCellAction}
+          hasViewEvent={Boolean(boundViewEventTypes?.get(el.id)?.size && onViewUiEvent)}
+          emitViewUiEvent={emitViewUiEvent}
+        />
+      ))}
     </>
   );
 });
 
+function needsSharedElementIndex(el: PanelElement): boolean {
+  const type = el.materialType ?? "";
+  return type === "reference" || type === "viewport" || type === "grid";
+}
+
+type PanelElementNodeProps = {
+  el: PanelElement;
+  allElements: PanelElement[];
+  isSelected: boolean;
+  selectedIds: string[];
+  onSelectIds: (ids: string[]) => void;
+  updateElement: ElementsLayerProps["updateElement"];
+  layerLocked: boolean;
+  previewMode: boolean;
+  previewLayoutKey?: number;
+  onTableCellAction?: TableCellActionHandler;
+  hasViewEvent: boolean;
+  emitViewUiEvent: (
+    el: PanelElement,
+    eventType: ViewEventType,
+    domEvent: React.MouseEvent | MouseEvent
+  ) => void;
+};
+
+const PanelElementNode = React.memo(function PanelElementNode({
+  el,
+  allElements,
+  isSelected,
+  selectedIds,
+  onSelectIds,
+  updateElement,
+  layerLocked,
+  previewMode,
+  previewLayoutKey,
+  onTableCellAction,
+  hasViewEvent,
+  emitViewUiEvent,
+}: PanelElementNodeProps) {
+  return (
+    <div
+      className={[
+        "absolute select-none",
+        previewMode ? "" : "rv-selectable",
+        !previewMode && isSelected ? "ring-2 ring-blue-500/90 ring-offset-0" : "",
+        hasViewEvent ? "cursor-pointer" : "",
+      ].join(" ")}
+      data-element-id={el.id}
+      onMouseDown={(e) => {
+        if (previewMode) return;
+        const target = e.target as HTMLElement | null;
+        if (target?.closest("[data-scene3d-orbit-active='true']")) {
+          e.stopPropagation();
+          return;
+        }
+        if (e.button !== 0) return;
+        if (e.shiftKey) {
+          onSelectIds(
+            isSelected
+              ? selectedIds.filter((id) => id !== el.id)
+              : [...selectedIds, el.id]
+          );
+        } else {
+          onSelectIds([el.id]);
+        }
+      }}
+      onClick={(e) => emitViewUiEvent(el, "click", e)}
+      onDoubleClick={(e) => emitViewUiEvent(el, "dblclick", e)}
+      onContextMenu={(e) => emitViewUiEvent(el, "contextmenu", e)}
+      onMouseEnter={(e) => emitViewUiEvent(el, "mouseenter", e)}
+      onMouseLeave={(e) => emitViewUiEvent(el, "mouseleave", e)}
+      style={{
+        left: el.x,
+        top: el.y,
+        width: Math.max(1, el.width),
+        height: Math.max(1, el.height),
+        zIndex: el.zIndex ?? 1,
+        transform: `rotate(${el.rotate ?? 0}deg)`,
+        transformOrigin: "center center",
+        overflow: el.materialType === "viewport" ? "hidden" : undefined,
+        boxSizing: "border-box",
+        contentVisibility: "auto",
+        containIntrinsicSize: `${Math.max(1, el.width)}px ${Math.max(1, el.height)}px`,
+        ...getNodeVisualStyle(el),
+      }}
+    >
+      {CHART_TYPES.has(el.materialType ?? "") ? (
+        <ChartNodeContent
+          element={el}
+          previewLayoutKey={previewLayoutKey}
+          previewMode={previewMode}
+        />
+      ) : el.materialType === "reference" || el.materialType === "viewport" ? (
+        <ReferenceNodeContent element={el} allElements={allElements} />
+      ) : el.materialType === "grid" ? (
+        <GridNodeContent
+          element={el}
+          allElements={allElements}
+          previewMode={previewMode}
+        />
+      ) : el.materialType === "text" ? (
+        <TextNodeContent
+          element={el}
+          editable={(el.textAllowInput ?? true) && !el.locked && !layerLocked}
+          onChange={(nextHtml) => {
+            updateElement(el.id, { textHtml: nextHtml });
+          }}
+        />
+      ) : el.materialType === "audio" ? (
+        <AudioNodeContent element={el} selected={isSelected} />
+      ) : el.materialType === "video" ? (
+        <VideoNodeContent element={el} selected={isSelected} />
+      ) : el.materialType === "geometry" ? (
+        <GeometryNodeContent element={el} />
+      ) : el.materialType === "scene3d" ? (
+        <Scene3dNodeContent
+          config={el.scene3d}
+          previewMode={previewMode}
+          selected={isSelected}
+          updateConfig={(patch) =>
+            updateElement(el.id, {
+              scene3d: mergeScene3dConfig({ ...el.scene3d, ...patch }),
+            })
+          }
+        />
+      ) : el.materialType === "image" ? (
+        <ImageNodeContent element={el} />
+      ) : el.materialType === "table" ? (
+        <TableNodeContent
+          element={el}
+          interactive={previewMode || Boolean(onTableCellAction)}
+          onCellAction={onTableCellAction}
+        />
+      ) : (
+        <EmptyNodePlaceholder element={el} />
+      )}
+    </div>
+  );
+}, (prev, next) => {
+  if (prev.el !== next.el) return false;
+  if (prev.isSelected !== next.isSelected) return false;
+  if (prev.previewMode !== next.previewMode) return false;
+  if (prev.layerLocked !== next.layerLocked) return false;
+  if (prev.previewLayoutKey !== next.previewLayoutKey) return false;
+  if (prev.hasViewEvent !== next.hasViewEvent) return false;
+  if (prev.updateElement !== next.updateElement) return false;
+  if (prev.onSelectIds !== next.onSelectIds) return false;
+  if (prev.onTableCellAction !== next.onTableCellAction) return false;
+  if (prev.emitViewUiEvent !== next.emitViewUiEvent) return false;
+  if (prev.selectedIds !== next.selectedIds && (prev.isSelected || next.isSelected)) {
+    // shift-toggle path reads selectedIds; only matters while selected
+    return false;
+  }
+  if (needsSharedElementIndex(next.el) && prev.allElements !== next.allElements) {
+    return false;
+  }
+  return true;
+});
+

package/src/panel/components/MoveableLayer.tsx

@@ -5,7 +5,7 @@ import Moveable from "react-moveable";
 
 import type { PanelElement } from "../types";
 import { uniformViewportZoom } from "../viewportZoom";
-import { notifyPreviewLayoutChanged } from "../utils/panelStateIO";
+import { setCanvasInteractionBusy } from "../utils/canvas-interaction-busy";
 
 function LockGlyph({ className = "h-3.5 w-3.5" }: { className?: string }) {
   return (
@@ -511,6 +511,7 @@ export function MoveableLayer({
         const point = readClientPoint(e);
         e.datas.__startClientX = point?.x ?? null;
         e.datas.__startClientY = point?.y ?? null;
+        setCanvasInteractionBusy(true);
       }}
       onDrag={(e: any) => {
         if (!e?.target?.style) return;
@@ -548,6 +549,7 @@ export function MoveableLayer({
           ev.datas.__startClientX = point?.x ?? null;
           ev.datas.__startClientY = point?.y ?? null;
         });
+        setCanvasInteractionBusy(true);
       }}
       onDragGroup={(e: any) => {
         e.events.forEach((ev: any) => {
@@ -580,6 +582,7 @@ export function MoveableLayer({
         e.datas.__startY = data.y;
         e.datas.__startClientX = e.inputEvent?.clientX ?? null;
         e.datas.__startClientY = e.inputEvent?.clientY ?? null;
+        setCanvasInteractionBusy(true);
       }}
       onResize={(e: any) => {
         if (!e?.target?.style) return;
@@ -593,7 +596,6 @@ export function MoveableLayer({
         const ty = toCanvasDeltaY(e.drag.beforeTranslate?.[1] ?? 0);
         e.target.style.left = `${sx + tx}px`;
         e.target.style.top = `${sy + ty}px`;
-        notifyPreviewLayoutChanged();
       }}
       onResizeGroupStart={(e: any) => {
         e.events.forEach((ev: any) => {
@@ -609,6 +611,7 @@ export function MoveableLayer({
           ev.datas.__startClientX = input?.clientX ?? null;
           ev.datas.__startClientY = input?.clientY ?? null;
         });
+        setCanvasInteractionBusy(true);
       }}
       onResizeGroup={(e: any) => {
         e.events.forEach((ev: any) => {
@@ -622,7 +625,6 @@ export function MoveableLayer({
           ev.target.style.left = `${sx + tx}px`;
           ev.target.style.top = `${sy + ty}px`;
         });
-        notifyPreviewLayoutChanged();
       }}
       onRotateStart={(e: any) => {
         const id = resolveSingleEventId(e.target as HTMLElement | null);
@@ -630,11 +632,22 @@ export function MoveableLayer({
         const data = elementsById.get(id);
         if (!data) return;
         e.set(data.rotate ?? 0);
+        setCanvasInteractionBusy(true);
       }}
       onRotate={(e: any) => {
         if (!e?.target?.style) return;
         e.target.style.transform = `rotate(${e.beforeRotate}deg)`;
       }}
+      onRotateGroupStart={(e: any) => {
+        e.events.forEach((ev: any) => {
+          const id = ev.target ? getId(ev.target) : null;
+          if (!id) return;
+          const data = elementsById.get(id);
+          if (!data) return;
+          ev.set(data.rotate ?? 0);
+        });
+        setCanvasInteractionBusy(true);
+      }}
       onRotateGroup={(e: any) => {
         e.events.forEach((ev: any) => {
           if (!ev?.target?.style) return;
@@ -642,6 +655,7 @@ export function MoveableLayer({
         });
       }}
       onDragEnd={(e: any) => {
+        try {
         const id = resolveSingleEventId(e.target as HTMLElement | null);
         if (!id) return;
         const data = elementsById.get(id);
@@ -683,8 +697,12 @@ export function MoveableLayer({
           }
         }
         updateRectNextFrame();
+        } finally {
+          setCanvasInteractionBusy(false);
+        }
       }}
       onDragGroupEnd={(e: any) => {
+        try {
         const batchId = `move-group-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
         const selectedSet = new Set(
           e.events
@@ -742,8 +760,12 @@ export function MoveableLayer({
           });
         }
         updateRectNextFrame();
+        } finally {
+          setCanvasInteractionBusy(false);
+        }
       }}
       onResizeEnd={(e: any) => {
+        try {
         const id = resolveSingleEventId(e.target as HTMLElement | null);
         if (!id) return;
         const data = elementsById.get(id);
@@ -760,8 +782,12 @@ export function MoveableLayer({
         const snapPatch = getSnapPatch(id, nextX, nextY, size.width, size.height);
         updateElement(id, { width, height, x: nextX, y: nextY, ...snapPatch });
         updateRectNextFrame();
+        } finally {
+          setCanvasInteractionBusy(false);
+        }
       }}
       onResizeGroupEnd={(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;
@@ -785,8 +811,12 @@ export function MoveableLayer({
           );
         });
         updateRectNextFrame();
+        } finally {
+          setCanvasInteractionBusy(false);
+        }
       }}
       onRotateEnd={(e: any) => {
+        try {
         const id = resolveSingleEventId(e.target as HTMLElement | null);
         if (!id) return;
         const data = elementsById.get(id);
@@ -794,8 +824,12 @@ export function MoveableLayer({
         const rotate = e.lastEvent?.beforeRotate ?? data.rotate ?? 0;
         updateElement(id, { rotate });
         updateRectNextFrame();
+        } finally {
+          setCanvasInteractionBusy(false);
+        }
       }}
       onRotateGroupEnd={(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;
@@ -806,6 +840,9 @@ export function MoveableLayer({
           updateElement(id, { rotate }, { batchId, meta: { type: "node.group-rotate" } });
         });
         updateRectNextFrame();
+        } finally {
+          setCanvasInteractionBusy(false);
+        }
       }}
       />
       {hasLockedSelected && lockBadgeScreen ? (

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>();

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;
+}

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));
+  });
 }