@arronqzy/react-view 1.0.29 → 1.0.31

package/dist/styles.css

@@ -3026,6 +3026,16 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:ring-1:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:ring-primary:focus-visible {
+  --tw-ring-color: hsl(var(--primary));
+}
+
 .focus-visible\:ring-offset-0:focus-visible {
   --tw-ring-offset-width: 0px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "files": [
     "src",
     "dist",
@@ -30,14 +30,14 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.36.2",
+    "@arronqzy/i18n": "0.1.13",
     "@arronqzy/ui": "1.0.9",
-    "@arronqzy/blueprint-dsl": "1.0.14",
-    "@arronqzy/i18n": "0.1.12",
-    "@arronqzy/react-blueprint": "1.0.16",
-    "@arronqzy/rx-store": "1.0.8",
-    "@arronqzy/view-table": "0.1.8",
+    "@arronqzy/blueprint-dsl": "1.0.15",
+    "@arronqzy/react-blueprint": "1.0.18",
     "@arronqzy/view-scene3d": "0.1.5",
-    "@arronqzy/webllm-assistant": "0.1.16"
+    "@arronqzy/rx-store": "1.0.8",
+    "@arronqzy/webllm-assistant": "0.1.16",
+    "@arronqzy/view-table": "0.1.8"
   },
   "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/typescript-config": "1.0.0",
-    "@arronqzy/tailwind": "1.0.2"
+    "@arronqzy/tailwind": "1.0.2",
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "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,

package/src/panel/components/ElementsLayer.tsx

@@ -13,6 +13,7 @@ import {
   viewportWindowContentScale,
 } from "../utils/viewportPlacement";
 import { cssTextLineHeight, cssTextAlignStyle } from "../utils/panelElementDefaults";
+import { resolveBackgroundImageStyle } from "../utils/background-image-style";
 import { mergeScene3dConfig } from "@arronqzy/view-scene3d";
 import { Scene3dNodeContent } from "@arronqzy/view-scene3d/react";
 import {
@@ -587,7 +588,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,13 +655,13 @@ function ChartNodeContent({
       }
     />
   );
-}
+});
 
 function getNodeVisualStyle(element: PanelElement): React.CSSProperties {
   const style = element.style ?? {};
   return {
     backgroundColor: style.backgroundColor,
-    backgroundImage: style.backgroundImage,
+    backgroundImage: resolveBackgroundImageStyle(style),
     backgroundSize: style.backgroundSize,
     backgroundPosition: style.backgroundPosition,
     borderWidth: style.borderWidth,
@@ -884,6 +885,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 +893,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/config/PanelConfigAudioSection.tsx

@@ -151,7 +151,7 @@ export function PanelConfigAudioSection({
                 {renderFieldGroup(
                   t("panel.config.groupAudioSource"),
                   <>
-                    <label className="block space-y-1">
+                    <label className="block space-y-1" data-config-field="audioRemoteUrl">
                       <div>{t("panel.config.audioUrl")}</div>
                       <Input
                         value={selectedElement.audioRemoteUrl ?? ""}
@@ -161,9 +161,12 @@ export function PanelConfigAudioSection({
                             audioSrc: e.target.value || selectedElement.audioSrc,
                           })
                         }
-                        placeholder="https://example.com/audio.mp3"
-                        className="h-7"
+                        placeholder={t("panel.config.urlScopePlaceholder")}
+                        className="h-7 font-mono text-[11px]"
                       />
+                      <p className="text-[10px] text-muted-foreground">
+                        {t("panel.config.urlScopeHint")}
+                      </p>
                     </label>
                     <div className="flex items-center gap-2">
                       <label className="inline-flex cursor-pointer items-center rounded border border-border px-2 py-1 text-[11px] hover:bg-accent">

package/src/panel/components/config/PanelConfigChartSection.tsx

@@ -117,7 +117,7 @@ export function PanelConfigChartSection({
                   {renderFieldGroup(
                     t("panel.config.groupData"),
                     <>
-                      <label className="block space-y-1">
+                      <label className="block space-y-1" data-config-field="chart.labelsText">
                         <div>{t("panel.config.labelsCsv")}</div>
                         <Input
                           value={getChartLabelsDisplayText(selectedElement.chart)}
@@ -126,11 +126,15 @@ export function PanelConfigChartSection({
                               labelsText: e.target.value,
                             })
                           }
+                          placeholder={t("panel.config.labelsCsvPlaceholder")}
                           className="h-7"
                         />
+                        <p className="text-[10px] text-muted-foreground">
+                          {t("panel.config.scopeTemplateHint")}
+                        </p>
                       </label>
 
-                      <label className="block space-y-1">
+                      <label className="block space-y-1" data-config-field="chart.valuesText">
                         <div>{t("panel.config.valuesCsv")}</div>
                         <Input
                           value={getChartValuesDisplayText(selectedElement.chart)}
@@ -139,8 +143,12 @@ export function PanelConfigChartSection({
                               valuesText: e.target.value,
                             })
                           }
+                          placeholder={t("panel.config.valuesCsvPlaceholder")}
                           className="h-7"
                         />
+                        <p className="text-[10px] text-muted-foreground">
+                          {t("panel.config.scopeTemplateHint")}
+                        </p>
                       </label>
                     </>
                   )}

package/src/panel/components/config/PanelConfigMultiSelect.tsx

@@ -1113,12 +1113,18 @@ export function PanelConfigMultiSelect({
                       ) : null}
                       {el.materialType === "audio" ? (
                     <div className="grid grid-cols-2 gap-2">
-                      <label className="block space-y-1 col-span-2">
+                      <label className="block space-y-1 col-span-2" data-config-field="audioRemoteUrl">
                         <div>{t("panel.config.audioUrl")}</div>
                         <Input
-                          className="h-7"
+                          className="h-7 font-mono text-[11px]"
                           value={el.audioRemoteUrl ?? ""}
-                          onChange={(e) => updateElement(el.id, { audioRemoteUrl: e.target.value || undefined })}
+                          placeholder={t("panel.config.urlScopePlaceholder")}
+                          onChange={(e) =>
+                            updateElement(el.id, {
+                              audioRemoteUrl: e.target.value || undefined,
+                              audioSrc: e.target.value || el.audioSrc,
+                            })
+                          }
                         />
                       </label>
                       <label className="block space-y-1">
@@ -1156,12 +1162,18 @@ export function PanelConfigMultiSelect({
                     </div>
                       ) : null}
                       {el.materialType === "video" ? (
-                    <label className="block space-y-1">
+                    <label className="block space-y-1" data-config-field="videoRemoteUrl">
                       <div>{t("panel.config.videoUrl")}</div>
                       <Input
-                        className="h-7"
+                        className="h-7 font-mono text-[11px]"
                         value={el.videoRemoteUrl ?? ""}
-                        onChange={(e) => updateElement(el.id, { videoRemoteUrl: e.target.value || undefined })}
+                        placeholder={t("panel.config.urlScopePlaceholder")}
+                        onChange={(e) =>
+                          updateElement(el.id, {
+                            videoRemoteUrl: e.target.value || undefined,
+                            videoSrc: e.target.value || el.videoSrc,
+                          })
+                        }
                       />
                     </label>
                       ) : null}

package/src/panel/components/config/PanelConfigScene3dSection.tsx

@@ -69,6 +69,7 @@ export function PanelConfigScene3dSection({
     [element.scene3d]
   );
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [modelUrlDraft, setModelUrlDraft] = useState("");
   const [nameQuery, setNameQuery] = useState<Record<string, string>>({});
   const [openTagKeys, setOpenTagKeys] = useState<Record<string, boolean>>({});
   const patch = useCallback(
@@ -96,6 +97,25 @@ export function PanelConfigScene3dSection({
     patch({ models: nextModels });
   };
 
+  const handleAddModelByUrl = () => {
+    const url = modelUrlDraft.trim();
+    if (!url) return;
+    const fileName = url.split(/[/?#]/).filter(Boolean).pop() || "model";
+    patch({
+      models: [
+        ...config.models,
+        {
+          id: randomId("mdl"),
+          label: fileName.replace(/\.[^.]+$/, "") || fileName,
+          url,
+          fileName,
+          format: inferModelFormat(fileName),
+        },
+      ],
+    });
+    setModelUrlDraft("");
+  };
+
   const updateModelAnimation = (
     id: string,
     next: Partial<Scene3dModelAnimationRule>
@@ -382,6 +402,30 @@ export function PanelConfigScene3dSection({
           }}
         />
       </div>
+      <label className="block space-y-1" data-config-field="scene3d.modelUrl">
+        <div className="text-[10px] text-muted-foreground">
+          {t("panel.config.scene3dModelUrl")}
+        </div>
+        <div className="flex gap-1.5">
+          <Input
+            value={modelUrlDraft}
+            onChange={(e) => setModelUrlDraft(e.target.value)}
+            placeholder={t("panel.config.urlScopePlaceholder")}
+            className="h-7 flex-1 font-mono text-[11px]"
+          />
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            className="h-7 shrink-0 text-[11px]"
+            disabled={!modelUrlDraft.trim()}
+            onClick={handleAddModelByUrl}
+          >
+            {t("common.add")}
+          </Button>
+        </div>
+        <p className="text-[10px] text-muted-foreground">{t("panel.config.urlScopeHint")}</p>
+      </label>
 
       {config.models.length === 0 ? (
         <div className="rounded border border-dashed border-border/70 px-2 py-3 text-[11px] text-muted-foreground">
@@ -432,6 +476,34 @@ export function PanelConfigScene3dSection({
                 </Button>
               </div>
               <div className="text-[10px] text-muted-foreground">{model.fileName ?? model.url.slice(0, 48)}</div>
+              <label className="block space-y-0.5">
+                <span className="text-[10px] text-muted-foreground">
+                  {t("panel.config.scene3dModelUrl")}
+                </span>
+                <Input
+                  value={model.url}
+                  data-config-field="scene3d.models.url"
+                  className="h-7 font-mono text-[10px]"
+                  placeholder={t("panel.config.urlScopePlaceholder")}
+                  onChange={(e) => {
+                    const nextUrl = e.target.value;
+                    const fileName =
+                      nextUrl.split(/[/?#]/).filter(Boolean).pop() || model.fileName || "model";
+                    patch({
+                      models: config.models.map((m) =>
+                        m.id === model.id
+                          ? {
+                              ...m,
+                              url: nextUrl,
+                              fileName,
+                              format: inferModelFormat(fileName),
+                            }
+                          : m
+                      ),
+                    });
+                  }}
+                />
+              </label>
               <div className="grid grid-cols-3 gap-1">
                 {(["x", "y", "z"] as const).map((axis, index) => (
                   <Input

package/src/panel/components/config/PanelConfigStyleSections.tsx

@@ -10,6 +10,7 @@ import {
 } from "@arronqzy/ui";
 import type { PanelElement, PanelElementStyle } from "../../types";
 import { readFileAsDataUrl, runBusyTask } from "../../utils/async-work";
+import { patchBackgroundImageFromInput } from "../../utils/background-image-style";
 import { getPanelMessages } from "../../constants/messages";
 import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
 
@@ -88,14 +89,23 @@ export function PanelConfigStyleSections({
               {renderFieldGroup(
                 t("panel.config.groupBgLayout"),
                 <>
-                  <label className="block space-y-1">
+                  <label className="block space-y-1" data-config-field="style.backgroundImage">
                     <div>{t("panel.config.backgroundImage")}</div>
                     <Input
-                      value={selectedElement.style?.backgroundImage ?? ""}
-                      onChange={(e) => updateSelectedStyle({ backgroundImage: e.target.value || undefined })}
-                      placeholder='url("https://...") / linear-gradient(...)'
-                      className="h-7"
+                      value={
+                        selectedElement.style?.backgroundImageRemoteUrl ??
+                        selectedElement.style?.backgroundImage ??
+                        ""
+                      }
+                      onChange={(e) =>
+                        updateSelectedStyle(patchBackgroundImageFromInput(e.target.value))
+                      }
+                      placeholder={t("panel.config.urlScopePlaceholder")}
+                      className="h-7 font-mono text-[11px]"
                     />
+                    <p className="text-[10px] text-muted-foreground">
+                      {t("panel.config.urlScopeHint")}
+                    </p>
                   </label>
                   <div className="flex items-center gap-2">
                     <label className="inline-flex cursor-pointer items-center rounded border border-border px-2 py-1 text-[11px] hover:bg-accent">

package/src/panel/components/config/PanelConfigTextSection.tsx

@@ -110,6 +110,25 @@ export function PanelConfigTextSection({
                         });
                       }}
                     />
+                    <label className="block space-y-1">
+                      <div>{t("panel.config.textHtmlSource")}</div>
+                      <textarea
+                        data-config-field="textHtml"
+                        value={selectedElement.textHtml ?? ""}
+                        onChange={(e) =>
+                          updateSelectedText({
+                            textHtml: e.target.value || "<p><br/></p>",
+                          })
+                        }
+                        rows={4}
+                        spellCheck={false}
+                        placeholder={t("panel.config.textHtmlSourcePlaceholder")}
+                        className="w-full rounded border border-border bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed outline-none focus-visible:ring-1 focus-visible:ring-primary"
+                      />
+                      <p className="text-[10px] text-muted-foreground">
+                        {t("panel.config.scopeTemplateHint")}
+                      </p>
+                    </label>
                   </>
                 )}
                 {renderFieldGroup(

package/src/panel/components/config/PanelConfigVideoSection.tsx

@@ -69,7 +69,7 @@ export function PanelConfigVideoSection({
                 {renderFieldGroup(
                   t("panel.config.groupVideoSource"),
                   <>
-                    <label className="block space-y-1">
+                    <label className="block space-y-1" data-config-field="videoRemoteUrl">
                       <div>{t("panel.config.videoUrl")}</div>
                       <Input
                         value={selectedElement.videoRemoteUrl ?? ""}
@@ -79,9 +79,12 @@ export function PanelConfigVideoSection({
                             videoSrc: e.target.value || selectedElement.videoSrc,
                           })
                         }
-                        placeholder="https://example.com/video.mp4"
-                        className="h-7"
+                        placeholder={t("panel.config.urlScopePlaceholder")}
+                        className="h-7 font-mono text-[11px]"
                       />
+                      <p className="text-[10px] text-muted-foreground">
+                        {t("panel.config.urlScopeHint")}
+                      </p>
                     </label>
                     <div className="flex items-center gap-2">
                       <label className="inline-flex cursor-pointer items-center rounded border border-border px-2 py-1 text-[11px] hover:bg-accent">

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/background-image-style.ts

@@ -0,0 +1,39 @@
+import type { PanelElementStyle } from "../types";
+
+/** Build a CSS `url('...')` value from a plain URL / template string. */
+export function cssUrlFromValue(value: string): string {
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  if (/^url\(/i.test(trimmed) || /gradient\(/i.test(trimmed)) return trimmed;
+  const escaped = trimmed.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  return `url('${escaped}')`;
+}
+
+/** Prefer explicit backgroundImage; fall back to remote URL (supports scope templates after resolve). */
+export function resolveBackgroundImageStyle(
+  style?: PanelElementStyle | null
+): string | undefined {
+  if (!style) return undefined;
+  if (style.backgroundImage?.trim()) return style.backgroundImage;
+  if (style.backgroundImageRemoteUrl?.trim()) {
+    return cssUrlFromValue(style.backgroundImageRemoteUrl);
+  }
+  return undefined;
+}
+
+/** Normalize config input: plain URL/template → both css + remote; css/gradient → backgroundImage only. */
+export function patchBackgroundImageFromInput(
+  value: string
+): Partial<PanelElementStyle> {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return { backgroundImage: undefined, backgroundImageRemoteUrl: undefined };
+  }
+  if (/^url\(/i.test(trimmed) || /gradient\(/i.test(trimmed)) {
+    return { backgroundImage: trimmed, backgroundImageRemoteUrl: undefined };
+  }
+  return {
+    backgroundImage: cssUrlFromValue(trimmed),
+    backgroundImageRemoteUrl: trimmed,
+  };
+}

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

package/src/panel/utils/scope-template-chart.ts

@@ -90,3 +90,15 @@ export function materializeChartLabelsFromScope(
   }
   return undefined;
 }
+
+/** Prefer valuesText templates; expand [...{scope}] / {scope} into number[]. */
+export function materializeChartValuesFromScope(
+  chart: PanelChartConfig | undefined,
+  scope: unknown
+): number[] | undefined {
+  if (!chart) return undefined;
+  if (chart.valuesText !== undefined) {
+    return materializeChartValuesText(chart.valuesText, scope);
+  }
+  return undefined;
+}

package/src/panel/utils/scope-template.ts

@@ -1,7 +1,7 @@
 import type { PanelElement } from "../types";
 import type { PanelTableConfig } from "@arronqzy/view-table";
 import { isUsableTableRawData } from "@arronqzy/view-table";
-import { materializeChartLabelsFromScope } from "./scope-template-chart";
+import { materializeChartLabelsFromScope, materializeChartValuesFromScope } from "./scope-template-chart";
 import {
   SCOPE_SPREAD_TEMPLATE_RE,
   evaluateSpreadScopeExpression,
@@ -11,10 +11,12 @@ import {
   resolveSpreadScopePath,
 } from "./scope-template-spread";
 
-const SCOPE_TEMPLATE_RE = /\{[^}]+\}|\[\.\.\.\{[^}]+\}\]/;
+const SCOPE_TOKEN_RE = /\{(scope[^}]*)\}/g;
 
 export function hasScopeTemplate(value: string): boolean {
-  return SCOPE_TEMPLATE_RE.test(value);
+  SCOPE_TOKEN_RE.lastIndex = 0;
+  SCOPE_SPREAD_TEMPLATE_RE.lastIndex = 0;
+  return SCOPE_TOKEN_RE.test(value) || SCOPE_SPREAD_TEMPLATE_RE.test(value);
 }
 
 export function evaluateScopeExpression(
@@ -31,6 +33,19 @@ export function evaluateScopeExpression(
   }
 }
 
+function stringifyScopeValue(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
 export function evaluateScopeTemplate(
   template: string,
   scope: unknown
@@ -45,19 +60,10 @@ export function evaluateScopeTemplate(
     }
   );
 
-  return withSpread.replace(/\{([^}]+)\}/g, (_: string, rawExpr: string) => {
-    const value = evaluateScopeExpression(rawExpr, scope);
-    if (value === null || value === undefined) return "";
-    if (typeof value === "string") return value;
-    if (typeof value === "number" || typeof value === "boolean") {
-      return String(value);
-    }
-    try {
-      return JSON.stringify(value);
-    } catch {
-      return String(value);
-    }
-  });
+  // Only `{scope...}` tokens — keep ECharts / CSS braces like `{b}` intact.
+  return withSpread.replace(SCOPE_TOKEN_RE, (_: string, rawExpr: string) =>
+    stringifyScopeValue(evaluateScopeExpression(rawExpr, scope))
+  );
 }
 
 function tryParseJson(text: string): unknown | undefined {
@@ -85,7 +91,7 @@ function materializeTemplateValue(template: string, scope: unknown): unknown {
     );
   }
 
-  const singleMatch = /^\{([^}]+)\}$/.exec(trimmed);
+  const singleMatch = /^\{(scope[^}]*)\}$/.exec(trimmed);
   if (singleMatch) {
     return evaluateScopeExpression(singleMatch[1]!, scope);
   }
@@ -148,6 +154,11 @@ export function resolvePanelElementScope(
       resolved.chart.labels = labels;
       delete resolved.chart.labelsText;
     }
+    const values = materializeChartValuesFromScope(element.chart, scope);
+    if (values !== undefined) {
+      resolved.chart.values = values;
+      delete resolved.chart.valuesText;
+    }
   }
   if (resolved.table) {
     const hasDynamicSource =