@arronqzy/react-view 1.0.28 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "files": [
     "src",
     "dist",
@@ -31,13 +31,13 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.36.2",
     "@arronqzy/ui": "1.0.9",
-    "@arronqzy/react-blueprint": "1.0.16",
     "@arronqzy/blueprint-dsl": "1.0.14",
-    "@arronqzy/i18n": "0.1.11",
+    "@arronqzy/i18n": "0.1.12",
+    "@arronqzy/react-blueprint": "1.0.17",
     "@arronqzy/rx-store": "1.0.8",
     "@arronqzy/view-scene3d": "0.1.5",
-    "@arronqzy/webllm-assistant": "0.1.16",
-    "@arronqzy/view-table": "0.1.8"
+    "@arronqzy/view-table": "0.1.8",
+    "@arronqzy/webllm-assistant": "0.1.16"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",
@@ -46,8 +46,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/tailwind": "1.0.2",
-    "@arronqzy/typescript-config": "1.0.0"
+    "@arronqzy/typescript-config": "1.0.0",
+    "@arronqzy/tailwind": "1.0.2"
   },
   "scripts": {
     "lint": "eslint \"src/**/*.{ts,tsx}\"",

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,
@@ -1079,11 +1108,18 @@ function ReactViewPanelInner({
   );
 
   const handleWorkspaceCreateProject = useCallback(async () => {
-    const result = await workspaceProjects.handleCreateProject();
-    if (result?.name) {
-      toast({ title: messages.workspaceCreated(result.name) });
+    try {
+      const result = await workspaceProjects.handleCreateProject();
+      if (result?.name) {
+        toast({ title: messages.workspaceCreated(result.name) });
+      }
+      return result;
+    } catch (error) {
+      toast({
+        title: error instanceof Error ? error.message : t("panel.messages.createWorkspaceFailed"),
+      });
+      throw error;
     }
-    return result;
   }, [workspaceProjects]);
 
   const handleWorkspaceOpenProject = useCallback(
@@ -1121,8 +1157,16 @@ function ReactViewPanelInner({
 
   const handleWorkspaceDeleteProject = useCallback(
     async (id: string) => {
-      await workspaceProjects.handleDeleteProject(id);
-      toast({ title: t("panel.messages.workspaceDeleted") });
+      try {
+        await workspaceProjects.handleDeleteProject(id);
+        toast({ title: t("panel.messages.workspaceDeleted") });
+      } catch (error) {
+        toast({
+          title:
+            error instanceof Error ? error.message : t("panel.messages.deleteWorkspaceFailed"),
+        });
+        throw error;
+      }
     },
     [workspaceProjects]
   );

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/components/PanelConfigSidebar.tsx

@@ -1,5 +1,6 @@
 import React, {
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -146,6 +147,37 @@ export function PanelConfigSidebar({
     return selectedElement ? [selectedElement] : [];
   }, [selectedElement, selectedElements]);
   const isMultiSelectMode = effectiveSelectedElements.length > 1;
+  const configScrollKey =
+    !isMultiSelectMode && selectedElement ? selectedElement.id : null;
+  const configScrollPosByIdRef = useRef(new Map<string, number>());
+  const activeConfigScrollKeyRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const el = sidebarScrollRef.current;
+    if (!el) return;
+    const onScroll = () => {
+      const key = activeConfigScrollKeyRef.current;
+      if (!key) return;
+      configScrollPosByIdRef.current.set(key, el.scrollTop);
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onScroll);
+  }, []);
+
+  useLayoutEffect(() => {
+    const el = sidebarScrollRef.current;
+    const prevKey = activeConfigScrollKeyRef.current;
+    if (el && prevKey && prevKey !== configScrollKey) {
+      configScrollPosByIdRef.current.set(prevKey, el.scrollTop);
+    }
+    activeConfigScrollKeyRef.current = configScrollKey;
+    if (!el) return;
+    const top =
+      configScrollKey != null
+        ? (configScrollPosByIdRef.current.get(configScrollKey) ?? 0)
+        : 0;
+    el.scrollTop = top;
+  }, [configScrollKey]);
 
   useEffect(() => {
     if (!selectedElement) return;

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) =>