@arronqzy/react-blueprint 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-blueprint",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "",
   "files": [
     "index.ts",
@@ -18,10 +18,10 @@
     "dayjs": "^1.11.13",
     "react-dom": "^19",
     "@xyflow/react": "^12.9.3",
-    "@arronqzy/blueprint-dsl": "1.0.14",
+    "@arronqzy/blueprint-dsl": "1.0.15",
     "@arronqzy/react-rx-store": "1.1.8",
-    "@arronqzy/i18n": "0.1.12",
-    "@arronqzy/ui": "1.0.9"
+    "@arronqzy/ui": "1.0.9",
+    "@arronqzy/i18n": "0.1.15"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",

package/src/BlueprintContextMenu.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 
 export type BlueprintContextMenuState =
   | {

package/src/BlueprintNodeConfigSidebar.tsx

@@ -16,7 +16,7 @@ import {
   type PageLifecyclePhase,
   type ViewEventType,
 } from "@arronqzy/blueprint-dsl";
-import { useI18n } from "@arronqzy/i18n/react";
+import { EnsureI18nProvider, useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 
 import { FetchNodeConfigPanel } from "./components/FetchNodeConfigPanel";
 import { ClockNodeConfigPanel } from "./components/ClockNodeConfigPanel";
@@ -96,7 +96,15 @@ const ROLE_LABEL_KEYS: Record<BlueprintNodeRole, string> = {
   event: "blueprint.config.roleEvent",
 };
 
-export function BlueprintNodeConfigSidebar({
+export function BlueprintNodeConfigSidebar(props: BlueprintNodeConfigSidebarProps) {
+  return (
+    <EnsureI18nProvider>
+      <BlueprintNodeConfigSidebarInner {...props} />
+    </EnsureI18nProvider>
+  );
+}
+
+function BlueprintNodeConfigSidebarInner({
   node,
   graphNodes = [],
   graphEdges = [],
@@ -400,7 +408,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/BlueprintExecutionLogPanel.tsx

@@ -20,7 +20,7 @@ import {
     type ExecutionTraceEntry,
   type PageLifecyclePhase,
 } from "@arronqzy/blueprint-dsl";
-import { useI18n } from "@arronqzy/i18n/react";
+import { EnsureI18nProvider, useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import { getLifecyclePhaseLabel } from "../graph/document";
 
 import type { ExecutionLogSettings } from "../library/execution-log-settings";
@@ -140,7 +140,15 @@ export type BlueprintExecutionLogPanelProps = {
   lifecyclePhase?: string;
 };
 
-export function BlueprintExecutionLogPanel({
+export function BlueprintExecutionLogPanel(props: BlueprintExecutionLogPanelProps) {
+  return (
+    <EnsureI18nProvider>
+      <BlueprintExecutionLogPanelInner {...props} />
+    </EnsureI18nProvider>
+  );
+}
+
+function BlueprintExecutionLogPanelInner({
   entries,
   settings,
   onUpdateSettings,

package/src/components/BlueprintLibrarySelect.tsx

@@ -7,7 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@arronqzy/ui";
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintLibraryListItem } from "../library/types";
 

package/src/components/BlueprintMetaDialog.tsx

@@ -11,7 +11,7 @@ import {
   Label,
   Textarea,
 } from "@arronqzy/ui";
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintMetaDraft } from "../library/types";
 

package/src/components/BlueprintNodeSwitchTaskDialog.tsx

@@ -7,7 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@arronqzy/ui";
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 
 export type BlueprintNodeSwitchTaskDialogProps = {
   open: boolean;

package/src/components/BlueprintPanelToolbar.tsx

@@ -18,7 +18,7 @@ import {
 import type { BlueprintLibraryListItem } from "../library/types";
 import type { LifecycleNodeOption } from "../hooks/useBlueprintDebugSession";
 import { type PageLifecyclePhase } from "@arronqzy/blueprint-dsl";
-import { useI18n } from "@arronqzy/i18n/react";
+import { EnsureI18nProvider, useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import { getLifecyclePhaseLabel } from "../graph/document";
 
 export type BlueprintRenameDialogProps = {
@@ -393,7 +393,15 @@ function LibraryRow({
   );
 }
 
-export function BlueprintPanelToolbar({
+export function BlueprintPanelToolbar(props: BlueprintPanelToolbarProps) {
+  return (
+    <EnsureI18nProvider>
+      <BlueprintPanelToolbarInner {...props} />
+    </EnsureI18nProvider>
+  );
+}
+
+function BlueprintPanelToolbarInner({
   items,
   activeId,
   currentBlueprintLabel,

package/src/components/ClockNodeConfigPanel.tsx

@@ -1,7 +1,7 @@
 import { useCallback, type ChangeEvent } from "react";
 import { Input } from "@arronqzy/ui";
 import type { ClockNodeConfig } from "@arronqzy/blueprint-dsl";
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeClockConfig } from "../graph/document";

package/src/components/ConfigHintIcon.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import {
   Tooltip,
   TooltipContent,

package/src/components/FetchNodeConfigPanel.tsx

@@ -45,7 +45,7 @@ import {
   useFetchDebugTask,
   useSwaggerLoadTask,
 } from "../fetch-config-task-store";
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 
 import { ConfigFieldLabel, ConfigHintIcon, ConfigSectionTitle } from "./ConfigHintIcon";
 import { FetchUrlAutocomplete } from "./FetchUrlAutocomplete";

package/src/components/FetchUrlAutocomplete.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "@arronqzy/ui";
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import {
   buildEndpointSuggestions,
   filterEndpointSuggestions,

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 { useI18n } from "@arronqzy/i18n/react";
+import type {
+  ExecutionTraceEntry,
+  JsonNodeConfig,
+} from "@arronqzy/blueprint-dsl";
+import {
+  latestTraceOutputsByNode,
+  resolveFetchIncomingScope,
+  resolveFetchScopeAutocompleteRoot,
+  validateJsonStringAllowingScope,
+} from "@arronqzy/blueprint-dsl";
+import { useI18nOptional as 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/LogicNodeConfigPanel.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState, type ChangeEvent } from "react";
 import { validateLogicSourceCode } from "@arronqzy/blueprint-dsl";
 import type { LogicNodeConfig } from "@arronqzy/blueprint-dsl";
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeLogicConfig } from "../graph/document";

package/src/components/StorageKeyAutocomplete.tsx

@@ -0,0 +1,142 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "@arronqzy/ui";
+import { useI18nOptional as 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

@@ -20,12 +20,13 @@ import {
   resolveFetchScopeAutocompleteRoot,
   uniqueStorageKinds,
 } from "@arronqzy/blueprint-dsl";
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 
 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/components/ViewElementMultiSelect.tsx

@@ -12,7 +12,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@arronqzy/ui";
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 
 export type ViewElementMultiSelectOption = {
   id: string;

package/src/hooks/useBlueprintFlowState.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import { toast } from "@arronqzy/ui";
 import {
   addEdge,

package/src/index.tsx

@@ -14,6 +14,7 @@ import {
   type Node,
   type Edge,
 } from "@xyflow/react";
+import { EnsureI18nProvider } from "@arronqzy/i18n/react";
 import "@xyflow/react/dist/style.css";
 import "./blueprint.css";
 
@@ -241,33 +242,35 @@ export const BluePrintReactRoot: FC<BluePrintReactRootProps> = ({
   const containerRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div
-      ref={containerRef}
-      data-workspace-region="blueprint"
-      className="bp-canvas h-full w-full bg-background text-foreground"
-      style={{
-        width: "100%",
-        height: "100%",
-        minHeight: 0,
-        ...style,
-      }}
-    >
-      <BlueprintCanvasProvider
-        onSelectNode={onSelectNode}
-        onAbortClock={onAbortClock}
+    <EnsureI18nProvider>
+      <div
+        ref={containerRef}
+        data-workspace-region="blueprint"
+        className="bp-canvas h-full w-full bg-background text-foreground"
+        style={{
+          width: "100%",
+          height: "100%",
+          minHeight: 0,
+          ...style,
+        }}
       >
-        <ReactFlowProvider>
-          <BlueprintCanvas
-            containerRef={containerRef}
-            graph={graph}
-            onGraphChange={onGraphChange}
-            selectedNodeId={selectedNodeId}
-            executionOverlay={executionOverlay}
-            onSelectNode={onSelectNode}
-            libraryNameById={libraryNameById}
-          />
-        </ReactFlowProvider>
-      </BlueprintCanvasProvider>
-    </div>
+        <BlueprintCanvasProvider
+          onSelectNode={onSelectNode}
+          onAbortClock={onAbortClock}
+        >
+          <ReactFlowProvider>
+            <BlueprintCanvas
+              containerRef={containerRef}
+              graph={graph}
+              onGraphChange={onGraphChange}
+              selectedNodeId={selectedNodeId}
+              executionOverlay={executionOverlay}
+              onSelectNode={onSelectNode}
+              libraryNameById={libraryNameById}
+            />
+          </ReactFlowProvider>
+        </BlueprintCanvasProvider>
+      </div>
+    </EnsureI18nProvider>
   );
 };

package/src/nodes/AndFlowNode.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import { Handle, Position, type NodeProps } from "@xyflow/react";
 import { cn } from "@arronqzy/ui";
 

package/src/nodes/BlueprintFlowNode.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import type { NodeProps } from "@xyflow/react";
 
 import { resolveBlueprintNodeTypeLabel } from "../graph/document";

package/src/nodes/BlueprintNodeCard.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import { cn } from "@arronqzy/ui";
 
 export type BlueprintNodeCardProps = {

package/src/nodes/BlueprintNodeShell.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import { Handle, Position } from "@xyflow/react";
 import { cn } from "@arronqzy/ui";
 

package/src/nodes/ClockFlowNode.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import type { NodeProps } from "@xyflow/react";
 import { cn } from "@arronqzy/ui";
 

package/src/nodes/EventFlowNode.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import type { NodeProps } from "@xyflow/react";
 
 import { resolveBlueprintNodeTypeLabel } from "../graph/document";

package/src/nodes/FetchFlowNode.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import type { NodeProps } from "@xyflow/react";
 
 import { resolveBlueprintNodeTypeLabel } from "../graph/document";

package/src/nodes/JsonFlowNode.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import type { NodeProps } from "@xyflow/react";
 
 import { resolveBlueprintNodeTypeLabel } from "../graph/document";

package/src/nodes/LifecycleFlowNode.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import { Handle, Position, type NodeProps } from "@xyflow/react";
 import { cn } from "@arronqzy/ui";
 

package/src/nodes/LogicFlowNode.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import type { NodeProps } from "@xyflow/react";
 
 import { resolveBlueprintNodeTypeLabel } from "../graph/document";

package/src/nodes/StorageFlowNode.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from "@arronqzy/i18n/react";
+import { useI18nOptional as useI18n } from "@arronqzy/i18n/react";
 import type { NodeProps } from "@xyflow/react";
 
 import { resolveBlueprintNodeTypeLabel } from "../graph/document";