@arronqzy/react-blueprint 1.0.6 → 1.0.8

package/src/components/FetchNodeConfigPanel.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState, type ChangeEvent } from "react";
+import { useCallback, useMemo, useState, type ChangeEvent } from "react";
 import {
   Button,
   Input,
@@ -10,11 +10,14 @@ import {
   cn,
 } from "@arronqzy/ui";
 import type {
+  ExecutionTraceEntry,
   FetchHttpMethod,
   FetchRequestConfig,
   FetchResponseType,
 } from "@arronqzy/blueprint-dsl";
 import {
+  applyFetchConfigScope,
+  draftFetchHeadersText,
   FETCH_CACHES,
   FETCH_CREDENTIALS,
   FETCH_HTTP_METHODS,
@@ -22,9 +25,17 @@ import {
   FETCH_NODE_TYPE,
   FETCH_REDIRECTS,
   FETCH_RESPONSE_TYPES,
+  fetchConfigHasScopeTemplate,
+  getFetchBodyValidationError,
+  getFetchHeadersValidationError,
+  latestTraceOutputsByNode,
+  parseFetchHeadersJson,
+  resolveFetchIncomingScope,
+  resolveFetchRequestUrl,
+  resolveFetchScopeAutocompleteRoot,
 } from "@arronqzy/blueprint-dsl";
 
-import type { BlueprintGraphNode } from "../graph/document";
+import type { BlueprintGraphEdge, BlueprintGraphNode } from "../graph/document";
 import { resolveNodeFetchConfig } from "../graph/document";
 import {
   cancelSwaggerLoadTask,
@@ -36,7 +47,9 @@ import {
 } from "../fetch-config-task-store";
 import { useI18n } from "@arronqzy/i18n/react";
 
+import { ConfigFieldLabel, ConfigHintIcon, ConfigSectionTitle } from "./ConfigHintIcon";
 import { FetchUrlAutocomplete } from "./FetchUrlAutocomplete";
+import { ScopeTemplateAutocompleteHost } from "./ScopeTemplateAutocompleteHost";
 
 function SendIcon({ className }: { className?: string }) {
   return (
@@ -231,6 +244,9 @@ function LoaderIcon({ className }: { className?: string }) {
 
 export type FetchNodeConfigPanelProps = {
   node: BlueprintGraphNode;
+  graphNodes?: BlueprintGraphNode[];
+  graphEdges?: BlueprintGraphEdge[];
+  traceEntries?: ExecutionTraceEntry[];
   onUpdateNode: (
     nodeId: string,
     patch: Partial<Pick<BlueprintGraphNode, "fetchConfig" | "configSource">>
@@ -251,6 +267,9 @@ function patchFetchConfig(
 
 export function FetchNodeConfigPanel({
   node,
+  graphNodes = [],
+  graphEdges = [],
+  traceEntries = [],
   onUpdateNode,
 }: FetchNodeConfigPanelProps) {
   const { t } = useI18n();
@@ -268,6 +287,69 @@ export function FetchNodeConfigPanel({
   const [validationError, setValidationError] = useState<string | null>(null);
   const [fetchValidationError, setFetchValidationError] = useState<string | null>(null);
   const swaggerError = validationError ?? swaggerTaskError;
+  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 usesScopeTemplate = fetchConfigHasScopeTemplate(fetchConfig);
+  const resolvedFetchConfig = useMemo(
+    () => applyFetchConfigScope(fetchConfig, incomingScope),
+    [fetchConfig, incomingScope]
+  );
+  const resolvedUrlPreview = useMemo(() => {
+    if (!usesScopeTemplate) return "";
+    try {
+      return resolveFetchRequestUrl(resolvedFetchConfig);
+    } catch {
+      return resolvedFetchConfig.url?.trim() ?? "";
+    }
+  }, [resolvedFetchConfig, usesScopeTemplate]);
+  const incomingScopeJson = useMemo(() => {
+    if (incomingScope === undefined) return "";
+    try {
+      return JSON.stringify(incomingScope, null, 2);
+    } catch {
+      return String(incomingScope);
+    }
+  }, [incomingScope]);
+  const headersDraft = draftFetchHeadersText(fetchConfig);
+  const resolvedHeadersPreview = useMemo(() => {
+    if (!usesScopeTemplate) return "";
+    const headers = resolvedFetchConfig.headers;
+    if (!headers || Object.keys(headers).length === 0) return "";
+    try {
+      return JSON.stringify(headers, null, 2);
+    } catch {
+      return "";
+    }
+  }, [resolvedFetchConfig.headers, usesScopeTemplate]);
+  const resolvedBodyPreview = useMemo(() => {
+    if (!usesScopeTemplate) return "";
+    return resolvedFetchConfig.body?.trim() ?? "";
+  }, [resolvedFetchConfig.body, usesScopeTemplate]);
+  const headersJsonError = useMemo(
+    () => getFetchHeadersValidationError(fetchConfig, incomingScope),
+    [fetchConfig, incomingScope]
+  );
+  const bodyJsonError = useMemo(
+    () => getFetchBodyValidationError(fetchConfig.body, resolvedFetchConfig.body),
+    [fetchConfig.body, resolvedFetchConfig.body]
+  );
+  const incomingHasPendingValue = useMemo(() => {
+    if (!incomingScope || typeof incomingScope !== "object") return false;
+    const entries =
+      "kind" in incomingScope
+        ? [incomingScope]
+        : Object.values(incomingScope as Record<string, { kind?: string }>);
+    return entries.some((entry) => entry && entry.kind === "pending");
+  }, [incomingScope]);
+  const autocompleteScope = resolveFetchScopeAutocompleteRoot(incomingScope);
+  const [formEl, setFormEl] = useState<HTMLDivElement | null>(null);
 
   const setUrlInputMode = useCallback(
     (mode: "swagger" | "manual") => {
@@ -307,30 +389,93 @@ export function FetchNodeConfigPanel({
   }, [node.id]);
 
   const handleSendFetchDebug = useCallback(() => {
-    const url = fetchConfig.url?.trim();
+    const resolved = applyFetchConfigScope(fetchConfig, incomingScope);
+    const url = resolved.url?.trim();
     if (!url) {
-      setFetchValidationError(t("blueprint.config.fillRequestUrlFirst"));
+      setFetchValidationError(
+        usesScopeTemplate && fetchConfig.url?.trim()
+          ? t("blueprint.config.fetchScopeUnresolved")
+          : t("blueprint.config.fillRequestUrlFirst")
+      );
+      return;
+    }
+    const headersError = getFetchHeadersValidationError(fetchConfig, incomingScope);
+    if (headersError) {
+      setFetchValidationError(
+        t("blueprint.config.fetchHeadersInvalidJson", { error: headersError })
+      );
+      return;
+    }
+    const bodyError = getFetchBodyValidationError(fetchConfig.body, resolved.body);
+    if (bodyError) {
+      setFetchValidationError(
+        t("blueprint.config.fetchBodyInvalidJson", { error: bodyError })
+      );
       return;
     }
 
     setFetchValidationError(null);
     startFetchDebugTask({
       nodeId: node.id,
-      config: fetchConfig,
+      config: resolved,
     });
-  }, [fetchConfig, node.id]);
+  }, [fetchConfig, incomingScope, node.id, t, usesScopeTemplate]);
 
   const handleAbortFetchDebug = useCallback(() => {
     cancelFetchDebugTask(node.id);
     setFetchValidationError(null);
   }, [node.id]);
 
+  const handleHeadersChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      const headersJson = e.target.value;
+      const parsed = parseFetchHeadersJson(headersJson);
+      onUpdateNode(
+        node.id,
+        patchFetchConfig(node, {
+          headersJson,
+          ...(parsed ? { headers: parsed } : {}),
+        })
+      );
+    },
+    [node, onUpdateNode]
+  );
+
   return (
-    <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-      <div className="font-medium text-foreground">{t("blueprint.config.fetchTitle")}</div>
-      <p className="text-[11px] text-muted-foreground">
-        {t("blueprint.config.fetchHint")}
-      </p>
+    <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.fetchTitle")}
+        hint={t("blueprint.config.fetchHint")}
+      />
+      <div className="space-y-1 rounded-md border border-border/60 bg-background/70 p-2">
+        <div className="flex items-center gap-1.5 text-[11px] font-medium text-foreground">
+          {t("blueprint.config.fetchScopeTitle")}
+          <ConfigHintIcon label={t("blueprint.config.fetchScopeTitle")}>
+            <p>{t("blueprint.config.fetchScopeHint")}</p>
+            <p>{t("blueprint.config.fetchScopeEmpty")}</p>
+            <p>{t("blueprint.config.fetchScopePending")}</p>
+          </ConfigHintIcon>
+        </div>
+        {incomingScope === undefined ? null : (
+          <>
+            {incomingHasPendingValue ? (
+              <p className="text-[11px] text-amber-700 dark:text-amber-300">
+                {t("blueprint.config.fetchScopePending")}
+              </p>
+            ) : null}
+            <pre className="max-h-[180px] overflow-auto rounded border border-border/60 bg-muted/30 p-2 font-mono text-[10px] leading-relaxed text-foreground">
+              {incomingScopeJson}
+            </pre>
+          </>
+        )}
+      </div>
 
       <label className="block space-y-1">
         <span className="text-muted-foreground">{t("blueprint.config.swaggerUrlOptional")}</span>
@@ -338,6 +483,7 @@ export function FetchNodeConfigPanel({
           <Input
             value={fetchConfig.swaggerDocsUrl ?? ""}
             disabled={loadingSwagger}
+            data-scope-autocomplete="off"
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
               onUpdateNode(
                 node.id,
@@ -440,7 +586,7 @@ export function FetchNodeConfigPanel({
                     patchFetchConfig(node, { apiBaseUrl: e.target.value })
                   )
                 }
-                placeholder="https://api.example.com/v1"
+                placeholder="https://api.example.com/v1/{scope?.value?.tenant}"
                 className="h-8 font-mono text-[11px]"
               />
             </label>
@@ -489,7 +635,7 @@ export function FetchNodeConfigPanel({
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 onUpdateNode(node.id, patchFetchConfig(node, { url: e.target.value }))
               }
-              placeholder="https://api.example.com/data"
+              placeholder="https://api.example.com/users/{scope?.value?.id}"
               className="h-8 flex-1 font-mono text-[11px]"
             />
             <AsyncSendButton
@@ -504,6 +650,11 @@ export function FetchNodeConfigPanel({
             />
           </div>
         )}
+        {usesScopeTemplate && resolvedUrlPreview ? (
+          <p className="break-all font-mono text-[10px] text-muted-foreground">
+            {t("blueprint.config.fetchScopeResolvedUrl")}: {resolvedUrlPreview}
+          </p>
+        ) : null}
         {loadingFetchDebug ? (
           <p className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
             <LoaderIcon className="h-3.5 w-3.5 shrink-0" />
@@ -541,38 +692,59 @@ export function FetchNodeConfigPanel({
       </label>
 
       <label className="block space-y-1">
-        <span className="text-muted-foreground">{t("blueprint.config.requestHeadersJson")}</span>
+        <ConfigFieldLabel
+          label={t("blueprint.config.requestHeadersJson")}
+          hint={t("blueprint.config.fetchHeadersHint")}
+        />
         <textarea
-          defaultValue={JSON.stringify(fetchConfig.headers ?? {}, null, 2)}
-          key={`${node.id}-headers-${JSON.stringify(fetchConfig.headers)}`}
-          onBlur={(e) => {
-            try {
-              const headers = JSON.parse(e.target.value || "{}") as Record<
-                string,
-                string
-              >;
-              onUpdateNode(node.id, patchFetchConfig(node, { headers }));
-            } catch {
-              /* 保留上次有效值 */
-            }
-          }}
+          value={headersDraft}
+          onChange={handleHeadersChange}
           rows={4}
-          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='{"Content-Type":"application/json"}'
+          className={cn(
+            "w-full rounded-md border 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",
+            headersJsonError ? "border-destructive" : "border-input"
+          )}
+          placeholder='{"Authorization":"Bearer {scope?.value?.token}"}'
         />
+        {headersJsonError ? (
+          <p className="text-[11px] text-destructive">
+            {t("blueprint.config.fetchHeadersInvalidJson", { error: headersJsonError })}
+          </p>
+        ) : null}
+        {usesScopeTemplate && resolvedHeadersPreview ? (
+          <p className="whitespace-pre-wrap break-all font-mono text-[10px] text-muted-foreground">
+            {t("blueprint.config.fetchScopeResolvedHeaders")}: {resolvedHeadersPreview}
+          </p>
+        ) : null}
       </label>
 
       <label className="block space-y-1">
-        <span className="text-muted-foreground">{t("blueprint.config.requestBody")}</span>
+        <ConfigFieldLabel
+          label={t("blueprint.config.requestBody")}
+          hint={t("blueprint.config.fetchBodyHint")}
+        />
         <textarea
           value={fetchConfig.body ?? ""}
           onChange={(e) =>
             onUpdateNode(node.id, patchFetchConfig(node, { body: e.target.value }))
           }
           rows={4}
-          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='{"key":"value"}'
+          className={cn(
+            "w-full rounded-md border 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",
+            bodyJsonError ? "border-destructive" : "border-input"
+          )}
+          placeholder='{"id":"{scope?.value?.id}"}'
         />
+        {bodyJsonError ? (
+          <p className="text-[11px] text-destructive">
+            {t("blueprint.config.fetchBodyInvalidJson", { error: bodyJsonError })}
+          </p>
+        ) : null}
+        {usesScopeTemplate && resolvedBodyPreview ? (
+          <p className="whitespace-pre-wrap break-all font-mono text-[10px] text-muted-foreground">
+            {t("blueprint.config.fetchScopeResolvedBody")}: {resolvedBodyPreview}
+          </p>
+        ) : null}
       </label>
 
       <div className="grid grid-cols-2 gap-2">

package/src/components/FetchUrlAutocomplete.tsx

@@ -103,6 +103,7 @@ export function FetchUrlAutocomplete({
       <input
         value={inputValue}
         readOnly={selectOnly && !open}
+        data-scope-autocomplete="off"
         placeholder={placeholder}
         onChange={(e) => {
           if (selectOnly) {

package/src/components/JsonNodeConfigPanel.tsx

@@ -5,6 +5,7 @@ import { useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeJsonConfig } from "../graph/document";
+import { ConfigSectionTitle } from "./ConfigHintIcon";
 
 export type JsonNodeConfigPanelProps = {
   node: BlueprintGraphNode;
@@ -53,12 +54,10 @@ export function JsonNodeConfigPanel({
 
   return (
     <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-      <div className="font-medium text-foreground">
-        {t("blueprint.config.jsonTitle")}
-      </div>
-      <p className="text-[11px] text-muted-foreground">
-        {t("blueprint.config.jsonHint")}
-      </p>
+      <ConfigSectionTitle
+        title={t("blueprint.config.jsonTitle")}
+        hint={t("blueprint.config.jsonHint")}
+      />
 
       <label className="block space-y-1">
         <span className="text-muted-foreground">

package/src/components/LogicNodeConfigPanel.tsx

@@ -5,6 +5,7 @@ import { useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeLogicConfig } from "../graph/document";
+import { ConfigSectionTitle } from "./ConfigHintIcon";
 
 export type LogicNodeConfigPanelProps = {
   node: BlueprintGraphNode;
@@ -52,12 +53,10 @@ export function LogicNodeConfigPanel({
 
   return (
     <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-      <div className="font-medium text-foreground">
-        {t("blueprint.config.logicTitle")}
-      </div>
-      <p className="text-[11px] text-muted-foreground">
-        {t("blueprint.config.logicHint")}
-      </p>
+      <ConfigSectionTitle
+        title={t("blueprint.config.logicTitle")}
+        hint={t("blueprint.config.logicHint")}
+      />
 
       <label className="block space-y-1">
         <span className="text-muted-foreground">

package/src/components/ScopeTemplateAutocompleteHost.tsx

@@ -0,0 +1,245 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@arronqzy/ui";
+import {
+  applyScopeAutocompleteSelection,
+  buildScopeExpression,
+  getScopeAutocompleteSuggestions,
+  parseScopeAutocomplete,
+  type ScopeAutocompleteState,
+} from "@arronqzy/blueprint-dsl";
+
+function isAutocompleteTarget(
+  target: EventTarget | null
+): target is HTMLInputElement | HTMLTextAreaElement {
+  if (target instanceof HTMLTextAreaElement) {
+    return target.dataset.scopeAutocomplete !== "off";
+  }
+  if (target instanceof HTMLInputElement) {
+    if (target.dataset.scopeAutocomplete === "off") return false;
+    const type = target.type;
+    return (
+      !type ||
+      type === "text" ||
+      type === "search" ||
+      type === "url" ||
+      type === "password"
+    );
+  }
+  return false;
+}
+
+function setNativeInputValue(
+  element: HTMLInputElement | HTMLTextAreaElement,
+  value: string
+) {
+  const proto =
+    element instanceof HTMLTextAreaElement
+      ? HTMLTextAreaElement.prototype
+      : HTMLInputElement.prototype;
+  const descriptor = Object.getOwnPropertyDescriptor(proto, "value");
+  descriptor?.set?.call(element, value);
+  element.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+type DropdownState = {
+  input: HTMLInputElement | HTMLTextAreaElement;
+  state: ScopeAutocompleteState;
+  suggestions: string[];
+  activeIndex: number;
+  rect: DOMRect;
+};
+
+export function ScopeTemplateAutocompleteHost({
+  scope,
+  container,
+  containerRef,
+}: {
+  scope: unknown;
+  container?: HTMLElement | null;
+  containerRef?: RefObject<HTMLElement | null>;
+}) {
+  const [dropdown, setDropdown] = useState<DropdownState | null>(null);
+  const dropdownRef = useRef<DropdownState | null>(null);
+  dropdownRef.current = dropdown;
+  const root = container ?? containerRef?.current ?? null;
+
+  const closeDropdown = useCallback(() => {
+    setDropdown(null);
+  }, []);
+
+  const refreshForInput = useCallback(
+    (input: HTMLInputElement | HTMLTextAreaElement) => {
+      if (scope === undefined) {
+        closeDropdown();
+        return;
+      }
+      const cursor = input.selectionStart ?? input.value.length;
+      const parsed = parseScopeAutocomplete(input.value, cursor, scope);
+      if (!parsed) {
+        closeDropdown();
+        return;
+      }
+      const suggestions = getScopeAutocompleteSuggestions(scope, parsed);
+      if (suggestions.length === 0) {
+        closeDropdown();
+        return;
+      }
+      setDropdown({
+        input,
+        state: parsed,
+        suggestions,
+        activeIndex: 0,
+        rect: input.getBoundingClientRect(),
+      });
+    },
+    [closeDropdown, scope]
+  );
+
+  const applySuggestion = useCallback(
+    (index: number) => {
+      const current = dropdownRef.current;
+      if (!current) return;
+      const selected = current.suggestions[index];
+      if (!selected) return;
+
+      const { value, cursor } = applyScopeAutocompleteSelection(
+        current.input.value,
+        current.state,
+        selected
+      );
+      setNativeInputValue(current.input, value);
+      current.input.focus();
+      current.input.setSelectionRange(cursor, cursor);
+      closeDropdown();
+      window.requestAnimationFrame(() => {
+        refreshForInput(current.input);
+      });
+    },
+    [closeDropdown, refreshForInput]
+  );
+
+  useEffect(() => {
+    if (!root || scope === undefined) return;
+
+    const onFocusIn = (event: FocusEvent) => {
+      if (!isAutocompleteTarget(event.target)) return;
+      refreshForInput(event.target);
+    };
+
+    const onInput = (event: Event) => {
+      if (!isAutocompleteTarget(event.target)) return;
+      refreshForInput(event.target);
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      const current = dropdownRef.current;
+      if (!current || event.target !== current.input) return;
+
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setDropdown((prev) =>
+          prev
+            ? {
+                ...prev,
+                activeIndex: Math.min(
+                  prev.activeIndex + 1,
+                  prev.suggestions.length - 1
+                ),
+              }
+            : prev
+        );
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setDropdown((prev) =>
+          prev
+            ? { ...prev, activeIndex: Math.max(prev.activeIndex - 1, 0) }
+            : prev
+        );
+        return;
+      }
+      if (event.key === "Enter" || event.key === "Tab") {
+        if (current.suggestions.length > 0) {
+          event.preventDefault();
+          applySuggestion(current.activeIndex);
+        }
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeDropdown();
+      }
+    };
+
+    const onPointerDown = (event: MouseEvent) => {
+      const target = event.target as Node | null;
+      if (
+        dropdownRef.current?.input.contains(target ?? null) ||
+        (target instanceof Element && target.closest("[data-scope-ac-list]"))
+      ) {
+        return;
+      }
+      if (!root.contains(target)) {
+        closeDropdown();
+      }
+    };
+
+    root.addEventListener("focusin", onFocusIn);
+    root.addEventListener("input", onInput, true);
+    root.addEventListener("keydown", onKeyDown, true);
+    window.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("scroll", closeDropdown, true);
+    window.addEventListener("resize", closeDropdown);
+
+    return () => {
+      root.removeEventListener("focusin", onFocusIn);
+      root.removeEventListener("input", onInput, true);
+      root.removeEventListener("keydown", onKeyDown, true);
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("scroll", closeDropdown, true);
+      window.removeEventListener("resize", closeDropdown);
+    };
+  }, [applySuggestion, closeDropdown, refreshForInput, root, scope]);
+
+  if (!dropdown || scope === undefined) return null;
+
+  return createPortal(
+    <div
+      data-scope-ac-list
+      className="fixed z-[10120] max-h-44 min-w-[140px] overflow-auto rounded-md border border-border bg-popover py-1 text-popover-foreground shadow-md"
+      style={{
+        left: dropdown.rect.left,
+        top: dropdown.rect.bottom + 4,
+        width: Math.max(dropdown.rect.width, 160),
+      }}
+    >
+      {dropdown.suggestions.map((key, index) => {
+        const preview = buildScopeExpression(dropdown.state.path, key);
+        return (
+          <button
+            key={key}
+            type="button"
+            className={cn(
+              "flex w-full flex-col items-start gap-0.5 px-2 py-1.5 text-left text-[11px] hover:bg-accent",
+              index === dropdown.activeIndex && "bg-accent"
+            )}
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => applySuggestion(index)}
+          >
+            <span className="font-medium text-foreground">{key}</span>
+            <span className="font-mono text-[10px] text-muted-foreground">{`{${preview}}`}</span>
+          </button>
+        );
+      })}
+    </div>,
+    document.body
+  );
+}

package/src/graph/blueprint-graph.ts

@@ -5,6 +5,7 @@ import {
   filterInvalidBlueprintEdges,
   patchNodeConfigSource,
   resolveNodeClockConfig,
+  resolveNodeEventConfig,
   resolveNodeFetchConfig,
   resolveNodeJsonConfig,
   resolveNodeLogicConfig,
@@ -198,6 +199,7 @@ export class BlueprintGraph {
         | "jsonConfig"
         | "logicConfig"
         | "clockConfig"
+        | "eventConfig"
       >
     >
   ) {
@@ -251,6 +253,12 @@ export class BlueprintGraph {
             ...patch.clockConfig,
           };
         }
+        if (patch.eventConfig) {
+          nextNode.eventConfig = {
+            ...resolveNodeEventConfig(n),
+            ...patch.eventConfig,
+          };
+        }
         return {
           ...nextNode,
           nodeType: resolveRunnableNodeType(nextNode),