@arronqzy/react-blueprint 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-blueprint",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "",
   "main": "index.ts",
   "exports": {
@@ -12,10 +12,10 @@
     "dayjs": "^1.11.13",
     "react-dom": "^19",
     "@xyflow/react": "^12.9.3",
-    "@arronqzy/blueprint-dsl": "1.0.6",
-    "@arronqzy/react-rx-store": "1.1.4",
-    "@arronqzy/i18n": "0.1.5",
-    "@arronqzy/ui": "1.0.5"
+    "@arronqzy/blueprint-dsl": "1.0.8",
+    "@arronqzy/i18n": "0.1.7",
+    "@arronqzy/ui": "1.0.6",
+    "@arronqzy/react-rx-store": "1.1.5"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",
@@ -28,9 +28,9 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "vite": "^5.1.4",
-    "@arronqzy/tailwind": "1.0.2",
     "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/typescript-config": "1.0.0"
+    "@arronqzy/typescript-config": "1.0.0",
+    "@arronqzy/tailwind": "1.0.2"
   },
   "keywords": [],
   "author": "",

package/src/BlueprintContextMenu.tsx

@@ -12,7 +12,7 @@ export type BlueprintContextMenuState =
       clientX: number;
       clientY: number;
       nodeId: string;
-      role: "blueprint" | "logic" | "and" | "lifecycle" | "fetch" | "json" | "clock";
+      role: "blueprint" | "logic" | "and" | "lifecycle" | "event" | "fetch" | "json" | "clock";
     }
   | {
       kind: "edge";

package/src/BlueprintNodeConfigSidebar.tsx

@@ -6,12 +6,15 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Checkbox,
 } from "@arronqzy/ui";
 import {
   LIFECYCLE_NODE_TYPE,
   PAGE_LIFECYCLE_PHASES,
+  VIEW_EVENT_TYPES,
   type ExecutionTraceEntry,
   type PageLifecyclePhase,
+  type ViewEventType,
 } from "@arronqzy/blueprint-dsl";
 import { useI18n } from "@arronqzy/i18n/react";
 
@@ -23,9 +26,12 @@ import { ViewElementMultiSelect } from "./components/ViewElementMultiSelect";
 import { ConfigFieldLabel, ConfigHintIcon, ConfigSectionTitle } from "./components/ConfigHintIcon";
 import {
   getLifecyclePhaseLabel,
+  getViewEventTypeLabel,
+  inspectEventNodeInputs,
   patchNodeConfigSource,
   pruneViewElementIds,
   resolveBlueprintConfigSource,
+  resolveNodeEventConfig,
   resolveViewElementIds,
   type BlueprintConfigSource,
   type BlueprintGraphEdge,
@@ -70,6 +76,7 @@ export type BlueprintNodeConfigSidebarProps = {
         | "jsonConfig"
         | "logicConfig"
         | "clockConfig"
+        | "eventConfig"
       >
     >
   ) => void;
@@ -83,6 +90,7 @@ const ROLE_LABEL_KEYS: Record<BlueprintNodeRole, string> = {
   json: "blueprint.config.roleJson",
   logic: "blueprint.config.roleLogic",
   clock: "blueprint.config.roleClock",
+  event: "blueprint.config.roleEvent",
 };
 
 export function BlueprintNodeConfigSidebar({
@@ -99,6 +107,7 @@ export function BlueprintNodeConfigSidebar({
   const { t } = useI18n();
   const configSource = resolveBlueprintConfigSource(node);
   const linkedViewElementIds = resolveViewElementIds(node);
+  const selectedEventTypes = resolveNodeEventConfig(node).eventTypes;
   const existingViewElementIdSet = useMemo(
     () => new Set(viewElementOptions.map((opt) => opt.id)),
     [viewElementOptions]
@@ -108,7 +117,7 @@ export function BlueprintNodeConfigSidebar({
   );
 
   useEffect(() => {
-    if (configSource !== "view") return;
+    if (configSource !== "view" && configSource !== "event") return;
     // 视图画布尚未就绪时不清理，避免误删有效绑定导致绑定节点「执行了但不写 scope」
     if (viewElementOptions.length === 0) return;
     const linked = resolveViewElementIds(node);
@@ -118,7 +127,7 @@ export function BlueprintNodeConfigSidebar({
     onUpdateNode(node.id, {
       viewElementIds: pruned.length > 0 ? pruned : undefined,
       viewElementId: undefined,
-      configSource: "view",
+      configSource,
     });
   }, [
     configSource,
@@ -131,6 +140,10 @@ export function BlueprintNodeConfigSidebar({
   ]);
 
   const roleLabel = t(ROLE_LABEL_KEYS[node.role] ?? "blueprint.config.roleLogic");
+  const eventInputs = useMemo(
+    () => inspectEventNodeInputs(node.id, graphNodes, graphEdges),
+    [graphEdges, graphNodes, node.id]
+  );
 
   return (
     <div className="flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground">
@@ -160,7 +173,7 @@ export function BlueprintNodeConfigSidebar({
               const nextSource = value as BlueprintConfigSource;
               onUpdateNode(node.id, {
                 ...patchNodeConfigSource(node, nextSource),
-                ...(nextSource === "view"
+                ...(nextSource === "view" || nextSource === "event"
                   ? {
                       viewElementIds: linkedViewElementIds,
                       viewElementId: undefined,
@@ -183,16 +196,21 @@ export function BlueprintNodeConfigSidebar({
               <SelectItem value="fetch">{t("blueprint.config.configFetch")}</SelectItem>
               <SelectItem value="json">{t("blueprint.config.configJson")}</SelectItem>
               <SelectItem value="clock">{t("blueprint.config.configClock")}</SelectItem>
+              <SelectItem value="event">{t("blueprint.config.configEvent")}</SelectItem>
               <SelectItem value="view">{t("blueprint.config.configView")}</SelectItem>
             </SelectContent>
           </Select>
         </label>
 
-        {configSource === "view" ? (
+        {configSource === "view" || configSource === "event" ? (
           <div className="block space-y-1">
             <ConfigFieldLabel
               label={t("blueprint.config.linkedViewNodes")}
-              hint={t("blueprint.config.viewMultiHint")}
+              hint={
+                configSource === "event"
+                  ? t("blueprint.config.eventViewHint")
+                  : t("blueprint.config.viewMultiHint")
+              }
             />
             <ViewElementMultiSelect
               options={viewElementOptions}
@@ -202,7 +220,7 @@ export function BlueprintNodeConfigSidebar({
                 onUpdateNode(node.id, {
                   viewElementIds: next,
                   viewElementId: undefined,
-                  configSource: "view",
+                  configSource,
                 })
               }
             />
@@ -270,6 +288,55 @@ export function BlueprintNodeConfigSidebar({
           </div>
         ) : null}
 
+        {configSource === "event" ? (
+          <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
+            <div className="flex items-center gap-1.5">
+              <div className="font-medium text-foreground">
+                {t("blueprint.config.eventListen")}
+              </div>
+              <ConfigHintIcon label={t("blueprint.config.eventListen")}>
+                <p>{t("blueprint.config.eventNoInput")}</p>
+                <p>{t("blueprint.config.eventHint")}</p>
+              </ConfigHintIcon>
+            </div>
+            {eventInputs.nonLifecycleCount > 0 ? (
+              <p className="rounded border border-destructive/40 bg-destructive/10 px-2 py-1.5 text-[11px] leading-relaxed text-destructive">
+                {t("blueprint.config.eventInputNotLifecycle")}
+              </p>
+            ) : eventInputs.lifecycleCount === 0 ? (
+              <p className="rounded border border-amber-500/40 bg-amber-500/10 px-2 py-1.5 text-[11px] leading-relaxed text-amber-700 dark:text-amber-300">
+                {t("blueprint.config.eventInputMissing")}
+              </p>
+            ) : null}
+            <div className="space-y-1.5">
+              {VIEW_EVENT_TYPES.map((eventType) => {
+                const checked = selectedEventTypes.includes(eventType);
+                return (
+                  <label key={eventType} className="flex items-center gap-2">
+                    <Checkbox
+                      checked={checked}
+                      className="h-3.5 w-3.5 border-2 border-foreground/80 bg-background ring-1 ring-foreground/40 data-[state=checked]:border-primary data-[state=checked]:ring-primary/40"
+                      onCheckedChange={(nextChecked: boolean | "indeterminate") => {
+                        const nextTypes: ViewEventType[] =
+                          nextChecked === true
+                            ? [...new Set([...selectedEventTypes, eventType])]
+                            : selectedEventTypes.filter((type) => type !== eventType);
+                        onUpdateNode(node.id, {
+                          eventConfig: {
+                            eventTypes: nextTypes.length > 0 ? nextTypes : ["click"],
+                          },
+                          configSource: "event",
+                        });
+                      }}
+                    />
+                    <span>{getViewEventTypeLabel(t, eventType)}</span>
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        ) : null}
+
         {configSource === "lifecycle" ? (
           <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
             <div className="flex items-center gap-1.5">

package/src/blueprintNodeTypes.ts

@@ -6,6 +6,7 @@ import { ClockFlowNode } from "./nodes/ClockFlowNode";
 import { FetchFlowNode } from "./nodes/FetchFlowNode";
 import { JsonFlowNode } from "./nodes/JsonFlowNode";
 import { LifecycleFlowNode } from "./nodes/LifecycleFlowNode";
+import { EventFlowNode } from "./nodes/EventFlowNode";
 import { LogicFlowNode } from "./nodes/LogicFlowNode";
 
 /** 稳定引用，避免 React Flow 因 nodeTypes 变化反复卸载节点 */
@@ -17,4 +18,5 @@ export const blueprintNodeTypes = {
   json: JsonFlowNode,
   logic: LogicFlowNode,
   lifecycle: LifecycleFlowNode,
+  event: EventFlowNode,
 } satisfies NodeTypes;

package/src/components/FetchNodeConfigPanel.tsx

@@ -26,10 +26,13 @@ import {
   FETCH_REDIRECTS,
   FETCH_RESPONSE_TYPES,
   fetchConfigHasScopeTemplate,
+  getFetchBodyValidationError,
+  getFetchHeadersValidationError,
   latestTraceOutputsByNode,
   parseFetchHeadersJson,
   resolveFetchIncomingScope,
   resolveFetchRequestUrl,
+  resolveFetchScopeAutocompleteRoot,
 } from "@arronqzy/blueprint-dsl";
 
 import type { BlueprintGraphEdge, BlueprintGraphNode } from "../graph/document";
@@ -46,6 +49,7 @@ 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 (
@@ -324,6 +328,18 @@ export function FetchNodeConfigPanel({
       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 =
@@ -332,6 +348,8 @@ export function FetchNodeConfigPanel({
         : 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") => {
@@ -381,6 +399,20 @@ export function FetchNodeConfigPanel({
       );
       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({
@@ -394,7 +426,7 @@ export function FetchNodeConfigPanel({
     setFetchValidationError(null);
   }, [node.id]);
 
-  const handleHeadersBlur = useCallback(
+  const handleHeadersChange = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
       const headersJson = e.target.value;
       const parsed = parseFetchHeadersJson(headersJson);
@@ -410,7 +442,14 @@ export function FetchNodeConfigPanel({
   );
 
   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.fetchTitle")}
         hint={t("blueprint.config.fetchHint")}
@@ -444,6 +483,7 @@ export function FetchNodeConfigPanel({
           <Input
             value={fetchConfig.swaggerDocsUrl ?? ""}
             disabled={loadingSwagger}
+            data-scope-autocomplete="off"
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
               onUpdateNode(
                 node.id,
@@ -657,13 +697,20 @@ export function FetchNodeConfigPanel({
           hint={t("blueprint.config.fetchHeadersHint")}
         />
         <textarea
-          defaultValue={headersDraft}
-          key={`${node.id}-headers-${headersDraft}`}
-          onBlur={handleHeadersBlur}
+          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"
+          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}
@@ -672,16 +719,32 @@ export function FetchNodeConfigPanel({
       </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"
+          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/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),