@arronqzy/vue-view 0.1.17 → 0.1.19

package/package.json

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

package/src/panel/VueViewPanel.vue

@@ -61,9 +61,12 @@ import WorkspaceConfigSidebar from "./components/WorkspaceConfigSidebar.vue";
 import type { WorkspaceConfigFocus } from "./components/WorkspaceConfigSidebar.vue";
 import {
   clearViewElementScopes,
+  getViewElementScope,
   setViewElementScopes,
   useViewElementScope,
+  useViewScopeStoreVersion,
 } from "./scope/view-scope-store";
+import { resolvePanelElementScope } from "./utils/scope-template";
 import { useRafThrottledScroll } from "./hooks/useRafThrottledScroll";
 import { useI18n } from "@arronqzy/i18n/vue";
 import { getPanelMessages } from "./constants/messages";
@@ -191,6 +194,13 @@ const hasUnlockedSelection = computed(() =>
 const viewElementScope = useViewElementScope(
   computed(() => selectedElement.value?.id ?? null)
 );
+const scopeStoreVersion = useViewScopeStoreVersion();
+const scopedCanvasElements = computed(() => {
+  void scopeStoreVersion.value;
+  return elements.value.map((el) =>
+    resolvePanelElementScope(el, getViewElementScope(el.id))
+  );
+});
 
 function excludeSelectedNode(nodeId: string) {
   const nextIds = selectedIds.value.filter((id) => id !== nodeId);
@@ -409,11 +419,25 @@ const workspaceProjects = useWorkspaceProjects({
   nameSpace: () => props.nameSpace,
 });
 
+const blueprintLifecycleToken = computed(() => {
+  const doc = blueprintGraph.value.document;
+  const nodes = doc.nodes;
+  const edges = doc.edges;
+  let sig = `${nodes.length}:${edges.length}`;
+  for (const node of nodes) {
+    sig += `|${node.id}:${resolveRunnableNodeType(node)}:${node.lifecyclePhase ?? ""}`;
+  }
+  for (const edge of edges) {
+    sig += `>${edge.id}:${edge.source}:${edge.target}`;
+  }
+  return sig;
+});
+
 const { triggerBlueprintNode, emitViewEvent, firedLifecyclePhases } = useBlueprintPageLifecycle({
   graph: blueprintGraph,
   active: blueprintOpen,
   bootKey: computed(() => workspaceProjects.activeProjectId.value ?? undefined),
-  onUpdated: computed(() => `${activeLayerId.value}|${historyCursor.value}`),
+  onUpdated: computed(() => `${activeLayerId.value}|${blueprintLifecycleToken.value}`),
   resolveLibraryBlueprint,
   libraryNameById: blueprintLibraryNameById,
   rootLibraryBlueprintId: activeBlueprintLibraryId,
@@ -817,7 +841,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
               @scroll-change="onViewportScrollChange"
             >
               <ElementsLayer
-                :elements="elements"
+                :elements="scopedCanvasElements"
                 :all-elements="allElements"
                 :selected-ids="selectedIds"
                 :update-element="updateElement"

package/src/panel/components/ElementsLayer.vue

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

package/src/panel/components/MoveableLayer.vue

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

package/src/panel/components/config/PanelConfigAudioSection.vue

@@ -140,18 +140,20 @@ function onPosterFileChange(e: Event) {
     @update:open="emit('update:open', $event)"
   >
     <ConfigFieldGroup :title="t('panel.config.groupAudioSource')">
-      <label class="block space-y-1">
+      <label class="block space-y-1" data-config-field="audioRemoteUrl">
         <div>{{ t("panel.config.audioUrl") }}</div>
         <Input
           size="small"
+          class="font-mono text-[11px]"
           :value="element.audioRemoteUrl ?? ''"
           :disabled="!isEditable"
-          placeholder="https://example.com/audio.mp3"
+          :placeholder="t('panel.config.urlScopePlaceholder')"
           @update:value="(v: string) => patch({
             audioRemoteUrl: v || undefined,
             audioSrc: v || element.audioSrc,
           })"
         />
+        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
       </label>
       <div class="flex items-center gap-2">
         <label

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

@@ -145,23 +145,27 @@ function onOptionJsonChange(v: string) {
       />
     </ConfigFieldGroup>
     <ConfigFieldGroup :title="t('panel.config.groupData')">
-      <label class="block space-y-1">
+      <label class="block space-y-1" data-config-field="chart.labelsText">
         <div>{{ t("panel.config.labelsCsv") }}</div>
         <Input
           size="small"
           :value="getChartLabelsDisplayText(element.chart)"
           :disabled="!isEditable"
+          :placeholder="t('panel.config.labelsCsvPlaceholder')"
           @update:value="(v: string) => updateChart({ labelsText: v })"
         />
+        <p class="text-[10px] text-gray-500">{{ t("panel.config.scopeTemplateHint") }}</p>
       </label>
-      <label class="block space-y-1">
+      <label class="block space-y-1" data-config-field="chart.valuesText">
         <div>{{ t("panel.config.valuesCsv") }}</div>
         <Input
           size="small"
           :value="getChartValuesDisplayText(element.chart)"
           :disabled="!isEditable"
+          :placeholder="t('panel.config.valuesCsvPlaceholder')"
           @update:value="(v: string) => updateChart({ valuesText: v })"
         />
+        <p class="text-[10px] text-gray-500">{{ t("panel.config.scopeTemplateHint") }}</p>
       </label>
     </ConfigFieldGroup>
 

package/src/panel/components/config/PanelConfigImageSection.vue

@@ -2,8 +2,9 @@
 import { useI18n } from "@arronqzy/i18n/vue";
 import { ref } from "vue";
 import { Input, Select } from "ant-design-vue";
-import type { PanelElement } from "../../types";
+import type { PanelElement, PanelElementStyle } from "../../types";
 import { readFileAsDataUrl, uploadFileToRemote } from "./shared";
+import { patchBackgroundImageFromInput } from "../../utils/background-image-style";
 import { getPanelMessages } from "../../constants/messages";
 import ConfigFieldGroup from "./ConfigFieldGroup.vue";
 import ConfigSection from "./ConfigSection.vue";
@@ -30,7 +31,7 @@ const emit = defineEmits<{
 
 const uploadStatus = ref("");
 
-function patchStyle(patch: Record<string, string | undefined>) {
+function patchStyle(patch: Partial<PanelElementStyle> | Record<string, string | undefined>) {
   props.updateElement(props.element.id, {
     style: { ...(props.element.style ?? {}), ...patch },
   });
@@ -69,7 +70,7 @@ function onFileChange(e: Event) {
     @update:open="emit('update:open', $event)"
   >
     <ConfigFieldGroup :title="t('panel.config.groupImageSource')">
-      <label class="block space-y-1">
+      <label class="block space-y-1" data-config-field="style.backgroundImageRemoteUrl">
         <div class="flex items-center gap-1">
           <span>{{ t("panel.config.imageUrlCss") }}</span>
           <ConfigHintIcon :label="t('panel.config.imageUrlHintLabel')">
@@ -78,20 +79,13 @@ function onFileChange(e: Event) {
         </div>
         <Input
           size="small"
+          class="font-mono text-[11px]"
           :value="element.style?.backgroundImageRemoteUrl ?? element.style?.backgroundImage ?? ''"
           :disabled="!isEditable"
-          placeholder="https://example.com/image.png"
-          @update:value="(v: string) => {
-            if (v.startsWith('url(')) {
-              patchStyle({ backgroundImage: v, backgroundImageRemoteUrl: undefined });
-            } else {
-              patchStyle({
-                backgroundImage: v ? `url('${v}')` : undefined,
-                backgroundImageRemoteUrl: v || undefined,
-              });
-            }
-          }"
+          :placeholder="t('panel.config.urlScopePlaceholder')"
+          @update:value="(v: string) => patchStyle(patchBackgroundImageFromInput(String(v ?? '')))"
         />
+        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
       </label>
       <div class="flex items-center gap-2">
         <label

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

@@ -9,6 +9,7 @@ import {
   normalizeViewportOverflow,
   type ViewportOverflowMode,
 } from "../../utils/viewportPlacement";
+import { patchBackgroundImageFromInput } from "../../utils/background-image-style";
 
 const { t, locale } = useI18n();
 const props = defineProps<{
@@ -288,12 +289,17 @@ function setNodeCardExpanded(id: string, open: boolean) {
 
             <template v-if="el.materialType === 'audio'">
               <div class="grid grid-cols-2 gap-2">
-                <label class="col-span-2 block space-y-1">
+                <label class="col-span-2 block space-y-1" data-config-field="audioRemoteUrl">
                   <div>{{ t("panel.config.audioUrl") }}</div>
                   <Input
                     size="small"
+                    class="font-mono text-[11px]"
                     :value="el.audioRemoteUrl ?? ''"
-                    @update:value="(v: string) => updateElement(el.id, { audioRemoteUrl: v || undefined })"
+                    :placeholder="t('panel.config.urlScopePlaceholder')"
+                    @update:value="(v: string) => updateElement(el.id, {
+                      audioRemoteUrl: v || undefined,
+                      audioSrc: v || el.audioSrc,
+                    })"
                   />
                 </label>
                 <label class="block space-y-1">
@@ -313,12 +319,17 @@ function setNodeCardExpanded(id: string, open: boolean) {
             </template>
 
             <template v-if="el.materialType === 'video'">
-              <label class="block space-y-1">
+              <label class="block space-y-1" data-config-field="videoRemoteUrl">
                 <div>{{ t("panel.config.videoUrl") }}</div>
                 <Input
                   size="small"
+                  class="font-mono text-[11px]"
                   :value="el.videoRemoteUrl ?? ''"
-                  @update:value="(v: string) => updateElement(el.id, { videoRemoteUrl: v || undefined })"
+                  :placeholder="t('panel.config.urlScopePlaceholder')"
+                  @update:value="(v: string) => updateElement(el.id, {
+                    videoRemoteUrl: v || undefined,
+                    videoSrc: v || el.videoSrc,
+                  })"
                 />
               </label>
             </template>
@@ -422,19 +433,21 @@ function setNodeCardExpanded(id: string, open: boolean) {
             </template>
 
             <template v-if="el.materialType === 'image'">
-              <label class="block space-y-1">
+              <label class="block space-y-1" data-config-field="style.backgroundImageRemoteUrl">
                 <div>{{ t("panel.config.backgroundImageUrl") }}</div>
                 <Input
                   size="small"
+                  class="font-mono text-[11px]"
                   :value="el.style?.backgroundImageRemoteUrl ?? el.style?.backgroundImage ?? ''"
+                  :placeholder="t('panel.config.urlScopePlaceholder')"
                   @update:value="(v: string) => updateElement(el.id, {
                     style: {
                       ...(el.style ?? {}),
-                      backgroundImage: v.startsWith('url(') ? v : v ? `url('${v}')` : undefined,
-                      backgroundImageRemoteUrl: v.startsWith('url(') ? undefined : v || undefined,
+                      ...patchBackgroundImageFromInput(String(v ?? '')),
                     },
                   })"
                 />
+                <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
               </label>
               <label class="block space-y-1">
                 <div>{{ t("panel.config.objectFit") }}</div>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, useTemplateRef } from "vue";
+import { computed, reactive, ref, useTemplateRef } from "vue";
 import { useI18n } from "@arronqzy/i18n/vue";
 import { Button, Checkbox, Input, Select } from "ant-design-vue";
 import {
@@ -38,6 +38,7 @@ const props = defineProps<{
 const emit = defineEmits<{ "update:open": [value: boolean] }>();
 
 const fileInputRef = useTemplateRef<HTMLInputElement>("fileInputRef");
+const modelUrlDraft = ref("");
 const config = computed(() => mergeScene3dConfig(props.element.scene3d));
 type CameraAnimPreset = "orbit" | "pushIn" | "pullBack" | "truckLeft" | "craneUp";
 
@@ -67,6 +68,42 @@ async function handleUploadModels(files: FileList | null) {
   patch({ models: nextModels });
 }
 
+function handleAddModelByUrl() {
+  const url = modelUrlDraft.value.trim();
+  if (!url) return;
+  const fileName = url.split(/[/?#]/).filter(Boolean).pop() || "model";
+  patch({
+    models: [
+      ...config.value.models,
+      {
+        id: randomId("mdl"),
+        label: fileName.replace(/\.[^.]+$/, "") || fileName,
+        url,
+        fileName,
+        format: inferModelFormat(fileName),
+      },
+    ],
+  });
+  modelUrlDraft.value = "";
+}
+
+function updateModelUrl(modelId: string, nextUrl: string) {
+  const fileName =
+    nextUrl.split(/[/?#]/).filter(Boolean).pop() || "model";
+  patch({
+    models: config.value.models.map((m) =>
+      m.id === modelId
+        ? {
+            ...m,
+            url: nextUrl,
+            fileName,
+            format: inferModelFormat(fileName),
+          }
+        : m
+    ),
+  });
+}
+
 function updateModelAnimation(id: string, next: Partial<Scene3dModelAnimationRule>) {
   patch({
     modelAnimations: config.value.modelAnimations.map((rule) =>
@@ -336,6 +373,27 @@ function onTagHtmlInput(modelId: string, objectName: string, event: Event) {
           @change="(e) => { void handleUploadModels((e.target as HTMLInputElement).files); (e.target as HTMLInputElement).value = ''; }"
         />
       </div>
+      <label class="block space-y-1" data-config-field="scene3d.modelUrl">
+        <div class="text-[10px] text-gray-500">{{ t("panel.config.scene3dModelUrl") }}</div>
+        <div class="flex gap-1.5">
+          <Input
+            size="small"
+            class="font-mono text-[11px]"
+            :disabled="!isEditable"
+            :value="modelUrlDraft"
+            :placeholder="t('panel.config.urlScopePlaceholder')"
+            @update:value="(v: string) => (modelUrlDraft = String(v ?? ''))"
+          />
+          <Button
+            size="small"
+            :disabled="!isEditable || !modelUrlDraft.trim()"
+            @click="handleAddModelByUrl"
+          >
+            {{ t("common.add") }}
+          </Button>
+        </div>
+        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
+      </label>
       <div v-if="config.models.length === 0" class="text-[11px] text-gray-500">
         {{ t("panel.config.scene3dNoModels") }}
       </div>
@@ -346,6 +404,15 @@ function onTagHtmlInput(modelId: string, objectName: string, event: Event) {
           :value="model.label"
           @update:value="(v: string) => patch({ models: config.models.map((m) => m.id === model.id ? { ...m, label: v } : m) })"
         />
+        <Input
+          size="small"
+          class="font-mono text-[10px]"
+          data-config-field="scene3d.models.url"
+          :disabled="!isEditable"
+          :value="model.url"
+          :placeholder="t('panel.config.urlScopePlaceholder')"
+          @update:value="(v: string) => updateModelUrl(model.id, String(v ?? ''))"
+        />
         <div v-if="model.objectNames?.length" class="space-y-1">
           <details :open="model.objectNames.length <= 12">
             <summary class="cursor-pointer text-[10px] text-gray-500">

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

@@ -4,6 +4,7 @@ import { ref } from "vue";
 import { Input, Select } from "ant-design-vue";
 import type { PanelElement, PanelElementStyle } from "../../types";
 import { readFileAsDataUrl, uploadFileToRemote } from "./shared";
+import { patchBackgroundImageFromInput } from "../../utils/background-image-style";
 import { getPanelMessages } from "../../constants/messages";
 import ConfigColorField from "./ConfigColorField.vue";
 import ConfigFieldGroup from "./ConfigFieldGroup.vue";
@@ -86,15 +87,17 @@ function onFileChange(e: Event) {
       collapsible
       :default-open="false"
     >
-      <label class="block space-y-1">
-        <div>{{ t("panel.scope.fieldStyleBackgroundImage") }}</div>
+      <label class="block space-y-1" data-config-field="style.backgroundImage">
+        <div>{{ t("panel.config.backgroundImage") }}</div>
         <Input
           size="small"
-          :value="element.style?.backgroundImage ?? ''"
+          class="font-mono text-[11px]"
+          :value="element.style?.backgroundImageRemoteUrl ?? element.style?.backgroundImage ?? ''"
           :disabled="!isEditable"
-          placeholder='url("https://...") / linear-gradient(...)'
-          @update:value="(v: string) => patchStyle({ backgroundImage: v || undefined })"
+          :placeholder="t('panel.config.urlScopePlaceholder')"
+          @update:value="(v: string) => patchStyle(patchBackgroundImageFromInput(String(v ?? '')))"
         />
+        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
       </label>
       <div class="flex items-center gap-2">
         <label

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

@@ -88,6 +88,7 @@ watch(() => [props.element.id, props.element.textHtml], syncEditorHtml);
       </div>
       <div
         ref="textEditorRef"
+        data-config-field="textHtml"
         data-panel-user-text=""
         class="min-h-[120px] rounded border border-gray-200 bg-white px-2 py-1.5 leading-6 outline-none"
         :contenteditable="isEditable"
@@ -104,6 +105,20 @@ watch(() => [props.element.id, props.element.textHtml], syncEditorHtml);
           patch({ textHtml: nextHtml || '<p><br/></p>' });
         }"
       />
+      <label class="block space-y-1">
+        <div>{{ t("panel.config.textHtmlSource") }}</div>
+        <textarea
+          data-config-field="textHtml"
+          class="w-full rounded border border-gray-200 bg-white px-2 py-1.5 font-mono text-[11px] leading-relaxed outline-none"
+          rows="4"
+          spellcheck="false"
+          :value="element.textHtml ?? ''"
+          :disabled="!isEditable"
+          :placeholder="t('panel.config.textHtmlSourcePlaceholder')"
+          @input="(e) => patch({ textHtml: (e.target as HTMLTextAreaElement).value || '<p><br/></p>' })"
+        />
+        <p class="text-[10px] text-gray-500">{{ t("panel.config.scopeTemplateHint") }}</p>
+      </label>
     </ConfigFieldGroup>
     <ConfigFieldGroup :title="t('panel.config.groupTextStyle')">
       <label class="block space-y-1">

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

@@ -66,18 +66,20 @@ function onVideoFileChange(e: Event) {
     @update:open="emit('update:open', $event)"
   >
     <ConfigFieldGroup :title="t('panel.config.groupVideoSource')">
-      <label class="block space-y-1">
+      <label class="block space-y-1" data-config-field="videoRemoteUrl">
         <div>{{ t("panel.config.videoUrl") }}</div>
         <Input
           size="small"
+          class="font-mono text-[11px]"
           :value="element.videoRemoteUrl ?? ''"
           :disabled="!isEditable"
-          placeholder="https://example.com/video.mp4"
+          :placeholder="t('panel.config.urlScopePlaceholder')"
           @update:value="(v: string) => patch({
             videoRemoteUrl: v || undefined,
             videoSrc: v || element.videoSrc,
           })"
         />
+        <p class="text-[10px] text-gray-500">{{ t("panel.config.urlScopeHint") }}</p>
       </label>
       <div class="flex items-center gap-2">
         <label

package/src/panel/components/elementsLayerNodes.ts

@@ -16,6 +16,7 @@ import type { PanelElement } from "../types";
 import { buildChartOption, CHART_TYPES } from "../utils/chartOptionBuilder";
 import { PREVIEW_LAYOUT_EVENT } from "../utils/panelStateIO";
 import { cssTextLineHeight, cssTextAlignStyle } from "../utils/panelElementDefaults";
+import { resolveBackgroundImageStyle } from "../utils/background-image-style";
 import {
   isViewportNode,
   normalizeViewportOverflow,
@@ -36,7 +37,7 @@ export function getNodeVisualStyle(element: PanelElement) {
   const style = element.style ?? {};
   return {
     backgroundColor: style.backgroundColor,
-    backgroundImage: style.backgroundImage,
+    backgroundImage: resolveBackgroundImageStyle(style),
     backgroundSize: style.backgroundSize,
     backgroundPosition: style.backgroundPosition,
     borderWidth: style.borderWidth,

package/src/panel/hooks/usePanelElements.ts

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

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,26 @@
+/**
+ * While Moveable is actively dragging/resizing/rotating, pause expensive
+ * canvas-wide work (e.g. ellipsis overflow measurement via MutationObserver).
+ */
+let busyDepth = 0;
+const listeners = new Set<() => void>();
+
+export function isCanvasInteractionBusy(): boolean {
+  return busyDepth > 0;
+}
+
+export function setCanvasInteractionBusy(busy: boolean): void {
+  const prev = busyDepth > 0;
+  if (busy) busyDepth += 1;
+  else busyDepth = Math.max(0, busyDepth - 1);
+  const next = busyDepth > 0;
+  if (prev === next) return;
+  listeners.forEach((listener) => listener());
+}
+
+export function subscribeCanvasInteractionBusy(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}

package/src/panel/utils/materializePanelElements.ts

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

package/src/panel/utils/panelStateIO.ts

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

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
@@ -39,25 +54,16 @@ export function evaluateScopeTemplate(
 
   const withSpread = template.replace(
     SCOPE_SPREAD_TEMPLATE_RE,
-    (_, rawExpr: string) => {
+    (_: string, rawExpr: string) => {
       const result = evaluateSpreadScopeExpression(rawExpr, scope);
       return result.ok ? result.value : "";
     }
   );
 
-  return withSpread.replace(/\{([^}]+)\}/g, (_, 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);
   }
@@ -149,6 +155,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 =