@arronqzy/react-view 1.0.30 → 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.30",
+  "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.17",
-    "@arronqzy/rx-store": "1.0.8",
+    "@arronqzy/blueprint-dsl": "1.0.15",
+    "@arronqzy/react-blueprint": "1.0.18",
     "@arronqzy/view-scene3d": "0.1.5",
-    "@arronqzy/view-table": "0.1.8",
-    "@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/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 {
@@ -660,7 +661,7 @@ 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,

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