@foresthubai/workflow-builder 0.3.0 → 0.4.0

package/src/panels/VariableConfigPanel.tsx

@@ -1,161 +1,161 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Button } from "../components/ui/button";
-import { Input } from "../components/ui/input";
-import { Separator } from "../components/ui/separator";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
-import { ChevronRight } from "lucide-react";
-import type { DeclaredVariable } from "@foresthubai/workflow-core/variable";
-import type { DataType } from "@foresthubai/workflow-core";
-import { useEditorStore } from "../stores/editorStore";
-import { isReadOnly } from "../WorkflowBuilder";
-import { ReadOnlyBanner } from "../components/ui/readonly-banner";
-import { DeleteButton } from "../components/ui/delete-button";
-import { deleteDeclaredVariable, setDeclaredVariableType, updateDeclaredVariable } from "../utils/variableOperations";
-
-interface VariableConfigPanelProps {
-  canvasId: string;
-  variable: DeclaredVariable;
-  onClose: () => void;
-}
-
-const DATA_TYPES: DataType[] = ["int", "float", "bool", "string"];
-
-export const VariableConfigPanel = ({ canvasId, variable, onClose }: VariableConfigPanelProps) => {
-  const { t } = useTranslation();
-  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
-
-  // Local name state mirrors the other config panels — preserves cursor position
-  // while typing and resets when a different variable is opened.
-  const [localName, setLocalName] = useState(variable.name);
-  useEffect(() => {
-    setLocalName(variable.name);
-  }, [variable.uid, variable.name]);
-
-  const isEmptyName = variable.name.trim() === "";
-
-  // The initial-value widget is chosen by dataType: declared variables store
-  // `initialValue?: unknown` and the type is enforced here at the input layer,
-  // not in the data model (untyped DOM input + JSON round-trip would defeat a
-  // discriminated union). Switching dataType clears the value.
-  const renderInitialValueInput = () => {
-    switch (variable.dataType) {
-      case "bool":
-        return (
-          <Select
-            value={variable.initialValue != null ? String(variable.initialValue) : "false"}
-            onValueChange={(v) => updateDeclaredVariable(canvasId, variable.uid, { initialValue: v === "true" })}
-          >
-            <SelectTrigger className="h-8 text-sm">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="false">false</SelectItem>
-              <SelectItem value="true">true</SelectItem>
-            </SelectContent>
-          </Select>
-        );
-      case "string":
-        return (
-          <Input
-            className="h-8 text-sm"
-            value={(variable.initialValue as string) ?? ""}
-            onChange={(e) => updateDeclaredVariable(canvasId, variable.uid, { initialValue: e.target.value })}
-            placeholder='""'
-          />
-        );
-      case "int":
-      case "float":
-        return (
-          <Input
-            type="number"
-            step={variable.dataType === "float" ? "any" : 1}
-            className="h-8 text-sm"
-            value={variable.initialValue != null ? Number(variable.initialValue) : ""}
-            onChange={(e) => {
-              const num = variable.dataType === "float" ? parseFloat(e.target.value) : parseInt(e.target.value, 10);
-              updateDeclaredVariable(canvasId, variable.uid, { initialValue: isNaN(num) ? undefined : num });
-            }}
-            placeholder="0"
-          />
-        );
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <div className="p-4">
-      <div className="space-y-4">
-        <div className="flex items-center justify-between gap-2">
-          <div className="flex-1 min-w-0">
-            <div className="group flex items-center gap-1.5 rounded-md border border-transparent px-1.5 -mx-1.5 hover:border-input focus-within:border-input transition-colors">
-              <input
-                type="text"
-                title={t("variableName", "Variable name")}
-                className="font-semibold text-lg font-mono bg-transparent w-full outline-none cursor-text py-0.5"
-                value={localName}
-                readOnly={readOnly}
-                onChange={(e) => {
-                  setLocalName(e.target.value);
-                  updateDeclaredVariable(canvasId, variable.uid, { name: e.target.value });
-                }}
-              />
-            </div>
-            <p className="text-sm text-muted-foreground">
-              {t("variableDescription", "A declared variable you can read and write across this canvas")}
-            </p>
-            {isEmptyName && (
-              <p className="text-xs text-destructive mt-1">{t("variableNameRequired", "Name is required")}</p>
-            )}
-          </div>
-          <Button variant="ghost" size="icon" className="shrink-0" onClick={onClose}>
-            <ChevronRight className="h-4 w-4" />
-          </Button>
-        </div>
-
-        {readOnly && <ReadOnlyBanner />}
-
-        <Separator />
-
-        <div className={`space-y-4 ${readOnly ? "pointer-events-none opacity-60" : ""}`}>
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-foreground/80">{t("dataType", "Data type")}</label>
-            <Select
-              value={variable.dataType}
-              onValueChange={(v) => setDeclaredVariableType(canvasId, variable.uid, v as DataType)}
-            >
-              <SelectTrigger className="h-8 text-sm">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {DATA_TYPES.map((dt) => (
-                  <SelectItem key={dt} value={dt}>
-                    {dt}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="space-y-1.5">
-            <label className="text-xs font-medium text-foreground/80">
-              {t("initialValue")}{" "}
-              <span className="font-normal text-muted-foreground">({t("optional", "optional")})</span>
-            </label>
-            {renderInitialValueInput()}
-          </div>
-        </div>
-
-        {!readOnly && (
-          <>
-            <Separator />
-            <DeleteButton onClick={() => deleteDeclaredVariable(canvasId, variable.uid)}>
-              {t("deleteVariable", "Delete variable")}
-            </DeleteButton>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Separator } from "../components/ui/separator";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
+import { ChevronRight } from "lucide-react";
+import type { DeclaredVariable } from "@foresthubai/workflow-core/variable";
+import type { DataType } from "@foresthubai/workflow-core";
+import { useEditorStore } from "../stores/editorStore";
+import { isReadOnly } from "../WorkflowBuilder";
+import { ReadOnlyBanner } from "../components/ui/readonly-banner";
+import { DeleteButton } from "../components/ui/delete-button";
+import { deleteDeclaredVariable, setDeclaredVariableType, updateDeclaredVariable } from "../utils/variableOperations";
+
+interface VariableConfigPanelProps {
+  canvasId: string;
+  variable: DeclaredVariable;
+  onClose: () => void;
+}
+
+const DATA_TYPES: DataType[] = ["int", "float", "bool", "string"];
+
+export const VariableConfigPanel = ({ canvasId, variable, onClose }: VariableConfigPanelProps) => {
+  const { t } = useTranslation();
+  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
+
+  // Local name state mirrors the other config panels — preserves cursor position
+  // while typing and resets when a different variable is opened.
+  const [localName, setLocalName] = useState(variable.name);
+  useEffect(() => {
+    setLocalName(variable.name);
+  }, [variable.uid, variable.name]);
+
+  const isEmptyName = variable.name.trim() === "";
+
+  // The initial-value widget is chosen by dataType: declared variables store
+  // `initialValue?: unknown` and the type is enforced here at the input layer,
+  // not in the data model (untyped DOM input + JSON round-trip would defeat a
+  // discriminated union). Switching dataType clears the value.
+  const renderInitialValueInput = () => {
+    switch (variable.dataType) {
+      case "bool":
+        return (
+          <Select
+            value={variable.initialValue != null ? String(variable.initialValue) : "false"}
+            onValueChange={(v) => updateDeclaredVariable(canvasId, variable.uid, { initialValue: v === "true" })}
+          >
+            <SelectTrigger className="h-8 text-sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="false">false</SelectItem>
+              <SelectItem value="true">true</SelectItem>
+            </SelectContent>
+          </Select>
+        );
+      case "string":
+        return (
+          <Input
+            className="h-8 text-sm"
+            value={(variable.initialValue as string) ?? ""}
+            onChange={(e) => updateDeclaredVariable(canvasId, variable.uid, { initialValue: e.target.value })}
+            placeholder='""'
+          />
+        );
+      case "int":
+      case "float":
+        return (
+          <Input
+            type="number"
+            step={variable.dataType === "float" ? "any" : 1}
+            className="h-8 text-sm"
+            value={variable.initialValue != null ? Number(variable.initialValue) : ""}
+            onChange={(e) => {
+              const num = variable.dataType === "float" ? parseFloat(e.target.value) : parseInt(e.target.value, 10);
+              updateDeclaredVariable(canvasId, variable.uid, { initialValue: isNaN(num) ? undefined : num });
+            }}
+            placeholder="0"
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="p-4">
+      <div className="space-y-4">
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex-1 min-w-0">
+            <div className="group flex items-center gap-1.5 rounded-md border border-transparent px-1.5 -mx-1.5 hover:border-input focus-within:border-input transition-colors">
+              <input
+                type="text"
+                title={t("variableName", "Variable name")}
+                className="font-semibold text-lg font-mono bg-transparent w-full outline-none cursor-text py-0.5"
+                value={localName}
+                readOnly={readOnly}
+                onChange={(e) => {
+                  setLocalName(e.target.value);
+                  updateDeclaredVariable(canvasId, variable.uid, { name: e.target.value });
+                }}
+              />
+            </div>
+            <p className="text-sm text-muted-foreground">
+              {t("variableDescription", "A declared variable you can read and write across this canvas")}
+            </p>
+            {isEmptyName && (
+              <p className="text-xs text-destructive mt-1">{t("variableNameRequired", "Name is required")}</p>
+            )}
+          </div>
+          <Button variant="ghost" size="icon" className="shrink-0" onClick={onClose}>
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {readOnly && <ReadOnlyBanner />}
+
+        <Separator />
+
+        <div className={`space-y-4 ${readOnly ? "pointer-events-none opacity-60" : ""}`}>
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-foreground/80">{t("dataType", "Data type")}</label>
+            <Select
+              value={variable.dataType}
+              onValueChange={(v) => setDeclaredVariableType(canvasId, variable.uid, v as DataType)}
+            >
+              <SelectTrigger className="h-8 text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {DATA_TYPES.map((dt) => (
+                  <SelectItem key={dt} value={dt}>
+                    {dt}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-foreground/80">
+              {t("initialValue")}{" "}
+              <span className="font-normal text-muted-foreground">({t("optional", "optional")})</span>
+            </label>
+            {renderInitialValueInput()}
+          </div>
+        </div>
+
+        {!readOnly && (
+          <>
+            <Separator />
+            <DeleteButton onClick={() => deleteDeclaredVariable(canvasId, variable.uid)}>
+              {t("deleteVariable", "Delete variable")}
+            </DeleteButton>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/panels/VariablesPanel.tsx

@@ -1,145 +1,145 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { AddButton } from "../components/ui/add-button";
-import { Variable as VariableIcon } from "lucide-react";
-import { cn } from "../cn";
-import { useEditorStore } from "../stores/editorStore";
-import { isReadOnly } from "../WorkflowBuilder";
-import { useAvailableVariables } from "../hooks/useAvailableVariables";
-import { getOrCreateCanvasStore, MAIN_CANVAS_ID } from "../stores/canvasStore";
-import { type Variable, type DeclaredVariable } from "@foresthubai/workflow-core/variable";
-import { addDeclaredVariable } from "../utils/variableOperations";
-
-interface VariablesPanelProps {
-  canvasId: string;
-  onSelectNode: (nodeId: string) => void;
-}
-
-export const VariablesPanel = ({ canvasId, onSelectNode }: VariablesPanelProps) => {
-  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
-  const { t } = useTranslation();
-  const { list: variables } = useAvailableVariables(canvasId);
-  const selection = useEditorStore((s) => s.selection);
-  const selectVariable = useEditorStore((s) => s.selectVariable);
-
-  const store = getOrCreateCanvasStore(canvasId);
-  const allVariables = store((s) => s.variables);
-  const isMainCanvas = canvasId === MAIN_CANVAS_ID;
-
-  // Extract declared variables from the unified record
-  const declaredVariables = React.useMemo(() => {
-    const result: { uid: string; var: DeclaredVariable }[] = [];
-    for (const v of Object.values(allVariables)) {
-      if (v.kind === "declared") {
-        result.push({ uid: v.uid, var: v });
-      }
-    }
-    return result;
-  }, [allVariables]);
-
-  // Create a declared variable and immediately open its config panel.
-  const handleAddVariable = () => {
-    const uid = addDeclaredVariable(canvasId);
-    selectVariable(uid);
-  };
-
-  // Filter variables into groups (each canvas is self-contained — no main-canvas leakage)
-  const functionArgs = variables.filter((v) => v.kind === "fnarg");
-  const nodeOutputs = variables.filter((v) => v.kind === "node");
-
-  const hasContent = functionArgs.length > 0 || nodeOutputs.length > 0 || declaredVariables.length > 0;
-
-  if (!hasContent) {
-    return (
-      <div className="flex flex-col items-center justify-center py-8 text-center">
-        <VariableIcon className="w-10 h-10 text-muted-foreground/50 mb-3" />
-        <p className="text-sm text-muted-foreground">{t("noVariables")}</p>
-        <p className="text-xs text-muted-foreground/70 mt-1">{t("addNodesForVariables")}</p>
-        {!readOnly && (
-          <div className="mt-3 w-full px-2">
-            <AddButton onClick={handleAddVariable}>{t("addVariable")}</AddButton>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  const renderVariableItem = (ref: Variable, onClick?: () => void, isSelected = false) => {
-    const clickable = !!onClick;
-
-    return (
-      <div
-        key={
-          ref.kind === "node"
-            ? `${ref.nodeId}-${ref.outputId}`
-            : ref.kind === "declared"
-              ? `declared-${ref.uid}`
-              : `fnarg-${ref.uid}`
-        }
-        onClick={onClick}
-        className={cn(
-          "p-3 rounded-lg transition-all",
-          isSelected
-            ? "bg-accent shadow-md border border-primary/40 ring-1 ring-primary/40"
-            : "bg-card shadow-sm border border-border",
-          clickable ? "hover:shadow-md cursor-pointer" : "cursor-default",
-        )}
-      >
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <VariableIcon className="w-4 h-4 text-muted-foreground" />
-            <span className="font-mono text-sm text-foreground">{ref.name}</span>
-          </div>
-          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded border border-border/50 text-muted-foreground shrink-0">
-            {ref.dataType}
-          </span>
-        </div>
-      </div>
-    );
-  };
-
-  const SectionHeader = ({ title }: { title: string }) => (
-    <div className="flex items-center justify-between px-1 mb-2">
-      <span className="text-sm font-medium text-foreground/80">{title}</span>
-    </div>
-  );
-
-  return (
-    <div className="space-y-5">
-      {/* Function Arguments (function canvas only) — read-only, arrive by value */}
-      {!isMainCanvas && functionArgs.length > 0 && (
-        <div>
-          <SectionHeader title={t("functionArguments")} />
-          <div className="space-y-1.5">{functionArgs.map((v) => renderVariableItem(v))}</div>
-        </div>
-      )}
-
-      {/* Node Output Variables — click opens the emitting node */}
-      {nodeOutputs.length > 0 && (
-        <div>
-          <SectionHeader title={t("nodeOutputVariables")} />
-          <div className="space-y-1.5">
-            {nodeOutputs.map((v) =>
-              renderVariableItem(v, v.kind === "node" ? () => onSelectNode(v.nodeId) : undefined),
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Defined Variables — click opens the VariableConfigPanel */}
-      <div>
-        <SectionHeader title={t("definedVariables")} />
-        <div className="space-y-1.5">
-          {declaredVariables.map(({ uid, var: dv }) =>
-            renderVariableItem(
-              dv,
-              readOnly ? undefined : () => selectVariable(uid),
-              selection.kind === "variable" && selection.uid === uid,
-            ),
-          )}
-          {!readOnly && <AddButton onClick={handleAddVariable}>{t("addVariable")}</AddButton>}
-        </div>
-      </div>
-    </div>
-  );
-};
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { AddButton } from "../components/ui/add-button";
+import { Variable as VariableIcon } from "lucide-react";
+import { cn } from "../cn";
+import { useEditorStore } from "../stores/editorStore";
+import { isReadOnly } from "../WorkflowBuilder";
+import { useAvailableVariables } from "../hooks/useAvailableVariables";
+import { getOrCreateCanvasStore, MAIN_CANVAS_ID } from "../stores/canvasStore";
+import { type Variable, type DeclaredVariable } from "@foresthubai/workflow-core/variable";
+import { addDeclaredVariable } from "../utils/variableOperations";
+
+interface VariablesPanelProps {
+  canvasId: string;
+  onSelectNode: (nodeId: string) => void;
+}
+
+export const VariablesPanel = ({ canvasId, onSelectNode }: VariablesPanelProps) => {
+  const readOnly = useEditorStore((s) => isReadOnly(s.builderMode));
+  const { t } = useTranslation();
+  const { list: variables } = useAvailableVariables(canvasId);
+  const selection = useEditorStore((s) => s.selection);
+  const selectVariable = useEditorStore((s) => s.selectVariable);
+
+  const store = getOrCreateCanvasStore(canvasId);
+  const allVariables = store((s) => s.variables);
+  const isMainCanvas = canvasId === MAIN_CANVAS_ID;
+
+  // Extract declared variables from the unified record
+  const declaredVariables = React.useMemo(() => {
+    const result: { uid: string; var: DeclaredVariable }[] = [];
+    for (const v of Object.values(allVariables)) {
+      if (v.kind === "declared") {
+        result.push({ uid: v.uid, var: v });
+      }
+    }
+    return result;
+  }, [allVariables]);
+
+  // Create a declared variable and immediately open its config panel.
+  const handleAddVariable = () => {
+    const uid = addDeclaredVariable(canvasId);
+    selectVariable(uid);
+  };
+
+  // Filter variables into groups (each canvas is self-contained — no main-canvas leakage)
+  const functionArgs = variables.filter((v) => v.kind === "fnarg");
+  const nodeOutputs = variables.filter((v) => v.kind === "node");
+
+  const hasContent = functionArgs.length > 0 || nodeOutputs.length > 0 || declaredVariables.length > 0;
+
+  if (!hasContent) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8 text-center">
+        <VariableIcon className="w-10 h-10 text-muted-foreground/50 mb-3" />
+        <p className="text-sm text-muted-foreground">{t("noVariables")}</p>
+        <p className="text-xs text-muted-foreground/70 mt-1">{t("addNodesForVariables")}</p>
+        {!readOnly && (
+          <div className="mt-3 w-full px-2">
+            <AddButton onClick={handleAddVariable}>{t("addVariable")}</AddButton>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  const renderVariableItem = (ref: Variable, onClick?: () => void, isSelected = false) => {
+    const clickable = !!onClick;
+
+    return (
+      <div
+        key={
+          ref.kind === "node"
+            ? `${ref.nodeId}-${ref.outputId}`
+            : ref.kind === "declared"
+              ? `declared-${ref.uid}`
+              : `fnarg-${ref.uid}`
+        }
+        onClick={onClick}
+        className={cn(
+          "p-3 rounded-lg transition-all",
+          isSelected
+            ? "bg-accent shadow-md border border-primary/40 ring-1 ring-primary/40"
+            : "bg-card shadow-sm border border-border",
+          clickable ? "hover:shadow-md cursor-pointer" : "cursor-default",
+        )}
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <VariableIcon className="w-4 h-4 text-muted-foreground" />
+            <span className="font-mono text-sm text-foreground">{ref.name}</span>
+          </div>
+          <span className="text-[10px] font-medium px-1.5 py-0.5 rounded border border-border/50 text-muted-foreground shrink-0">
+            {ref.dataType}
+          </span>
+        </div>
+      </div>
+    );
+  };
+
+  const SectionHeader = ({ title }: { title: string }) => (
+    <div className="flex items-center justify-between px-1 mb-2">
+      <span className="text-sm font-medium text-foreground/80">{title}</span>
+    </div>
+  );
+
+  return (
+    <div className="space-y-5">
+      {/* Function Arguments (function canvas only) — read-only, arrive by value */}
+      {!isMainCanvas && functionArgs.length > 0 && (
+        <div>
+          <SectionHeader title={t("functionArguments")} />
+          <div className="space-y-1.5">{functionArgs.map((v) => renderVariableItem(v))}</div>
+        </div>
+      )}
+
+      {/* Node Output Variables — click opens the emitting node */}
+      {nodeOutputs.length > 0 && (
+        <div>
+          <SectionHeader title={t("nodeOutputVariables")} />
+          <div className="space-y-1.5">
+            {nodeOutputs.map((v) =>
+              renderVariableItem(v, v.kind === "node" ? () => onSelectNode(v.nodeId) : undefined),
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Defined Variables — click opens the VariableConfigPanel */}
+      <div>
+        <SectionHeader title={t("definedVariables")} />
+        <div className="space-y-1.5">
+          {declaredVariables.map(({ uid, var: dv }) =>
+            renderVariableItem(
+              dv,
+              readOnly ? undefined : () => selectVariable(uid),
+              selection.kind === "variable" && selection.uid === uid,
+            ),
+          )}
+          {!readOnly && <AddButton onClick={handleAddVariable}>{t("addVariable")}</AddButton>}
+        </div>
+      </div>
+    </div>
+  );
+};