@arronqzy/react-blueprint 1.0.16 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-blueprint",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "",
   "files": [
     "index.ts",
@@ -18,10 +18,10 @@
     "dayjs": "^1.11.13",
     "react-dom": "^19",
     "@xyflow/react": "^12.9.3",
-    "@arronqzy/i18n": "0.1.11",
-    "@arronqzy/react-rx-store": "1.1.8",
-    "@arronqzy/blueprint-dsl": "1.0.14",
-    "@arronqzy/ui": "1.0.9"
+    "@arronqzy/i18n": "0.1.13",
+    "@arronqzy/ui": "1.0.9",
+    "@arronqzy/blueprint-dsl": "1.0.15",
+    "@arronqzy/react-rx-store": "1.1.8"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",
@@ -34,9 +34,9 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "vite": "^5.1.4",
+    "@arronqzy/eslint-config": "0.0.0",
     "@arronqzy/tailwind": "1.0.2",
-    "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/eslint-config": "0.0.0"
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "keywords": [],
   "author": "",

package/src/BlueprintNodeConfigSidebar.tsx

@@ -400,7 +400,13 @@ export function BlueprintNodeConfigSidebar({
         ) : null}
 
         {configSource === "json" ? (
-          <JsonNodeConfigPanel node={node} onUpdateNode={onUpdateNode} />
+          <JsonNodeConfigPanel
+            node={node}
+            graphNodes={graphNodes}
+            graphEdges={graphEdges}
+            traceEntries={traceEntries}
+            onUpdateNode={onUpdateNode}
+          />
         ) : null}
 
         {configSource === "storage" ? (

package/src/components/JsonNodeConfigPanel.tsx

@@ -1,14 +1,26 @@
 import { useCallback, useMemo, useState, type ChangeEvent } from "react";
-import { validateJsonString } from "@arronqzy/blueprint-dsl";
-import type { JsonNodeConfig } from "@arronqzy/blueprint-dsl";
+import type {
+  ExecutionTraceEntry,
+  JsonNodeConfig,
+} from "@arronqzy/blueprint-dsl";
+import {
+  latestTraceOutputsByNode,
+  resolveFetchIncomingScope,
+  resolveFetchScopeAutocompleteRoot,
+  validateJsonStringAllowingScope,
+} from "@arronqzy/blueprint-dsl";
 import { useI18n } from "@arronqzy/i18n/react";
 
-import type { BlueprintGraphNode } from "../graph/document";
+import type { BlueprintGraphEdge, BlueprintGraphNode } from "../graph/document";
 import { resolveNodeJsonConfig } from "../graph/document";
-import { ConfigSectionTitle } from "./ConfigHintIcon";
+import { ConfigHintIcon, ConfigSectionTitle } from "./ConfigHintIcon";
+import { ScopeTemplateAutocompleteHost } from "./ScopeTemplateAutocompleteHost";
 
 export type JsonNodeConfigPanelProps = {
   node: BlueprintGraphNode;
+  graphNodes?: BlueprintGraphNode[];
+  graphEdges?: BlueprintGraphEdge[];
+  traceEntries?: ExecutionTraceEntry[];
   onUpdateNode: (
     nodeId: string,
     patch: Partial<Pick<BlueprintGraphNode, "jsonConfig" | "configSource">>
@@ -27,25 +39,44 @@ function patchJsonConfig(
 
 export function JsonNodeConfigPanel({
   node,
+  graphNodes = [],
+  graphEdges = [],
+  traceEntries = [],
   onUpdateNode,
 }: JsonNodeConfigPanelProps) {
   const { t } = useI18n();
+  const [formEl, setFormEl] = useState<HTMLDivElement | null>(null);
   const jsonConfig = resolveNodeJsonConfig(node);
   const [draftError, setDraftError] = useState<string | null>(null);
 
+  const incomingScope = useMemo(() => {
+    const outputs = latestTraceOutputsByNode(traceEntries);
+    return resolveFetchIncomingScope({
+      fetchNodeId: node.id,
+      nodes: graphNodes,
+      edges: graphEdges,
+      getOutput: (sourceId, port) => outputs[sourceId]?.[port],
+    });
+  }, [graphEdges, graphNodes, node.id, traceEntries]);
+  const autocompleteScope = resolveFetchScopeAutocompleteRoot(incomingScope);
+
   const storedValidation = useMemo(
-    () => validateJsonString(jsonConfig.jsonString),
+    () => validateJsonStringAllowingScope(jsonConfig.jsonString),
     [jsonConfig.jsonString]
   );
 
   const parseError =
     draftError ??
     (storedValidation.ok ? null : storedValidation.error);
+  const deferredScope =
+    storedValidation.ok && "deferred" in storedValidation
+      ? storedValidation.deferred === true
+      : false;
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
       const jsonString = e.target.value;
-      const result = validateJsonString(jsonString);
+      const result = validateJsonStringAllowingScope(jsonString);
       setDraftError(result.ok ? null : result.error);
       onUpdateNode(node.id, patchJsonConfig(node, { jsonString }));
     },
@@ -53,15 +84,25 @@ export function JsonNodeConfigPanel({
   );
 
   return (
-    <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
+    <div
+      ref={setFormEl}
+      className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5"
+    >
+      <ScopeTemplateAutocompleteHost
+        scope={autocompleteScope}
+        container={formEl}
+      />
       <ConfigSectionTitle
         title={t("blueprint.config.jsonTitle")}
         hint={t("blueprint.config.jsonHint")}
       />
 
       <label className="block space-y-1">
-        <span className="text-muted-foreground">
+        <span className="inline-flex items-center gap-1 text-muted-foreground">
           {t("blueprint.config.jsonContent")}
+          <ConfigHintIcon label={t("blueprint.config.jsonContent")}>
+            {t("blueprint.config.jsonScopeHint")}
+          </ConfigHintIcon>
         </span>
         <textarea
           value={jsonConfig.jsonString}
@@ -69,12 +110,16 @@ export function JsonNodeConfigPanel({
           rows={12}
           spellCheck={false}
           className="w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
-          placeholder={'{\n  "key": "value"\n}'}
+          placeholder={'{\n  "key": "{scope?.value}"\n}'}
         />
         {parseError ? (
           <p className="text-[11px] text-destructive">
             {t("blueprint.config.jsonFormatError", { error: parseError })}
           </p>
+        ) : deferredScope ? (
+          <p className="text-[11px] text-muted-foreground">
+            {t("blueprint.config.jsonScopeDeferred")}
+          </p>
         ) : (
           <p className="text-[11px] text-muted-foreground">
             {t("blueprint.config.jsonFormatOk")}

package/src/components/StorageKeyAutocomplete.tsx

@@ -0,0 +1,142 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "@arronqzy/ui";
+import { useI18n } from "@arronqzy/i18n/react";
+import {
+  filterStorageKeySuggestions,
+  listBrowserStorageKeys,
+  type StorageKind,
+} from "@arronqzy/blueprint-dsl";
+
+export type StorageKeyAutocompleteProps = {
+  value: string;
+  /** One or more storage targets whose keys should be suggested. */
+  storages: StorageKind | readonly StorageKind[];
+  placeholder?: string;
+  onChange: (value: string) => void;
+};
+
+export function StorageKeyAutocomplete({
+  value,
+  storages,
+  placeholder,
+  onChange,
+}: StorageKeyAutocompleteProps) {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [keys, setKeys] = useState<string[]>([]);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const storageSignature = useMemo(() => {
+    const list = Array.isArray(storages) ? [...storages] : [storages];
+    return list.join(",");
+  }, [storages]);
+
+  const refreshKeys = useCallback(() => {
+    const list = Array.isArray(storages) ? storages : [storages];
+    setKeys(listBrowserStorageKeys(list));
+  }, [storages]);
+
+  useEffect(() => {
+    refreshKeys();
+  }, [refreshKeys, storageSignature]);
+
+  const filtered = useMemo(
+    () => filterStorageKeySuggestions(keys, value),
+    [keys, value]
+  );
+
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [value, filtered.length]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: MouseEvent) => {
+      if (!containerRef.current?.contains(event.target as globalThis.Node)) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    return () => window.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+
+  const showSuggestions = open && keys.length > 0;
+
+  const selectSuggestion = (index: number) => {
+    const item = filtered[index];
+    if (!item) return;
+    onChange(item);
+    setOpen(false);
+  };
+
+  const openDropdown = () => {
+    refreshKeys();
+    setOpen(true);
+  };
+
+  return (
+    <div ref={containerRef} className="relative">
+      <input
+        value={value}
+        placeholder={placeholder}
+        spellCheck={false}
+        onChange={(e) => {
+          onChange(e.target.value);
+          setOpen(true);
+        }}
+        onFocus={openDropdown}
+        onClick={openDropdown}
+        onKeyDown={(e) => {
+          if (!showSuggestions || filtered.length === 0) {
+            if (e.key === "Escape") setOpen(false);
+            return;
+          }
+          if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setActiveIndex((prev) => Math.min(prev + 1, filtered.length - 1));
+          } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setActiveIndex((prev) => Math.max(prev - 1, 0));
+          } else if (e.key === "Enter") {
+            e.preventDefault();
+            selectSuggestion(activeIndex);
+          } else if (e.key === "Escape") {
+            setOpen(false);
+          }
+        }}
+        className={cn(
+          "flex h-8 w-full rounded-md border border-input bg-background px-2 py-1 font-mono text-[11px] text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+        )}
+      />
+      {showSuggestions ? (
+        <div className="absolute z-[10150] mt-1 max-h-52 w-full overflow-auto rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-md">
+          {filtered.length === 0 ? (
+            <div className="px-2 py-1.5 text-[11px] text-muted-foreground">
+              {t("blueprint.config.noMatchingStorageKey")}
+            </div>
+          ) : (
+            filtered.map((key, index) => (
+              <button
+                key={key}
+                type="button"
+                className={cn(
+                  "flex w-full items-center px-2 py-1.5 text-left font-mono text-[11px] hover:bg-accent",
+                  index === activeIndex && "bg-accent"
+                )}
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => selectSuggestion(index)}
+              >
+                {key}
+              </button>
+            ))
+          )}
+        </div>
+      ) : open && keys.length === 0 ? (
+        <div className="absolute z-[10150] mt-1 w-full rounded-md border border-border bg-popover px-2 py-1.5 text-[11px] text-muted-foreground shadow-md">
+          {t("blueprint.config.noStorageKeys")}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/StorageNodeConfigPanel.tsx

@@ -26,6 +26,7 @@ import type { BlueprintGraphEdge, BlueprintGraphNode } from "../graph/document";
 import { resolveNodeStorageConfig } from "../graph/document";
 import { ConfigFieldLabel, ConfigSectionTitle } from "./ConfigHintIcon";
 import { ScopeTemplateAutocompleteHost } from "./ScopeTemplateAutocompleteHost";
+import { StorageKeyAutocomplete } from "./StorageKeyAutocomplete";
 
 export type StorageNodeConfigPanelProps = {
   node: BlueprintGraphNode;
@@ -90,10 +91,10 @@ export function StorageNodeConfigPanel({
   );
 
   const handleReadKeyChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
+    (key: string) => {
       onUpdateNode(
         node.id,
-        patchStorageConfig(node, { read: { key: e.target.value } })
+        patchStorageConfig(node, { read: { key } })
       );
     },
     [node, onUpdateNode]
@@ -115,10 +116,10 @@ export function StorageNodeConfigPanel({
   );
 
   const handleSetKeyChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
+    (key: string) => {
       onUpdateNode(
         node.id,
-        patchStorageConfig(node, { set: { key: e.target.value } })
+        patchStorageConfig(node, { set: { key } })
       );
     },
     [node, onUpdateNode]
@@ -134,6 +135,14 @@ export function StorageNodeConfigPanel({
     [node, onUpdateNode]
   );
 
+  const setKeySuggestionStorages = useMemo(
+    () =>
+      storageConfig.set.storages.length > 0
+        ? storageConfig.set.storages
+        : (["session", "local"] as const),
+    [storageConfig.set.storages]
+  );
+
   return (
     <div
       ref={setFormEl}
@@ -174,12 +183,11 @@ export function StorageNodeConfigPanel({
         </label>
         <label className="block space-y-1">
           <ConfigFieldLabel label={t("blueprint.config.storageKey")} />
-          <Input
+          <StorageKeyAutocomplete
             value={storageConfig.read.key}
-            onChange={handleReadKeyChange}
-            spellCheck={false}
-            className="h-8 font-mono text-[11px]"
+            storages={storageConfig.read.storage}
             placeholder="key"
+            onChange={handleReadKeyChange}
           />
         </label>
       </div>
@@ -213,12 +221,11 @@ export function StorageNodeConfigPanel({
         </div>
         <label className="block space-y-1">
           <ConfigFieldLabel label={t("blueprint.config.storageKey")} />
-          <Input
+          <StorageKeyAutocomplete
             value={storageConfig.set.key}
-            onChange={handleSetKeyChange}
-            spellCheck={false}
-            className="h-8 font-mono text-[11px]"
+            storages={setKeySuggestionStorages}
             placeholder="key"
+            onChange={handleSetKeyChange}
           />
         </label>
         <label className="block space-y-1">

package/src/hooks/useBlueprintPageLifecycle.ts

@@ -302,12 +302,15 @@ export function useBlueprintPageLifecycle({
 
   useEffect(() => {
     if (!enabled || !bootCompleted) return;
-    void emitPhases(
-      graphRef.current,
-      ["updated"],
-      runnerOptionsRef.current,
-      markPhaseFired
-    );
+    const timer = window.setTimeout(() => {
+      void emitPhases(
+        graphRef.current,
+        ["updated"],
+        runnerOptionsRef.current,
+        markPhaseFired
+      );
+    }, 160);
+    return () => window.clearTimeout(timer);
   }, [bootCompleted, enabled, onUpdated, markPhaseFired]);
 
   const triggerBlueprintNode = useCallback(