@foresthubai/workflow-builder 0.4.3 → 0.4.5

package/src/components/ui/toggle-group.tsx

@@ -1,59 +1,63 @@
-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../cn"
-import { toggleVariants } from "./toggle"
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
-  size: "default",
-  variant: "default",
-})
-
-const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn("flex items-center justify-center gap-1", className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-))
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
-
-const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext)
-
-  return (
-    <ToggleGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  )
-})
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
-
-export { ToggleGroup, ToggleGroupItem }
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../cn"
+import { toggleVariants } from "./toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/ui/toggle.tsx

@@ -1,43 +1,47 @@
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../cn"
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent hover:bg-primary/20 hover:text-foreground data-[state=on]:relative data-[state=on]:z-10 data-[state=on]:border-primary",
-      },
-      size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
-))
-
-Toggle.displayName = TogglePrimitive.Root.displayName
-
-export { Toggle, toggleVariants }
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../cn"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-primary/20 hover:text-foreground data-[state=on]:relative data-[state=on]:z-10 data-[state=on]:border-primary",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

package/src/components/ui/tooltip.tsx

@@ -1,32 +1,36 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
-import { cn } from "../../cn";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        // font-sans + fh-builder-portal: portaled to <body>, outside the builder
-        // root — pin the font and opt into the themed scrollbar explicitly.
-        "fh-builder-portal font-sans z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "../../cn";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        // font-sans + fh-builder-portal: portaled to <body>, outside the builder
+        // root — pin the font and opt into the themed scrollbar explicitly.
+        "fh-builder-portal font-sans z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/dialogs/NodePickerDialog.tsx

@@ -1,84 +1,88 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { NodeDefinition, NodeCategory } from "@foresthubai/workflow-core/node";
-import {
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-} from "../components/ui/command";
-import { categoryIcons } from "../utils/categoryConstants";
-
-interface NodePickerDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  compatibleDefs: NodeDefinition[];
-  onSelect: (nodeDef: NodeDefinition) => void;
-}
-
-const CATEGORY_ORDER: NodeCategory[] = [
-  NodeCategory.Trigger,
-  NodeCategory.Input,
-  NodeCategory.Logic,
-  NodeCategory.Data,
-  NodeCategory.Function,
-  NodeCategory.AI,
-  NodeCategory.Tool,
-  NodeCategory.Output,
-];
-
-export function NodePickerDialog({ open, onOpenChange, compatibleDefs, onSelect }: NodePickerDialogProps) {
-  const { t } = useTranslation();
-  const [search, setSearch] = useState("");
-
-  useEffect(() => {
-    if (open) setSearch("");
-  }, [open]);
-
-  // Group definitions by category
-  const grouped = new Map<NodeCategory, NodeDefinition[]>();
-  for (const def of compatibleDefs) {
-    const list = grouped.get(def.category) ?? [];
-    list.push(def);
-    grouped.set(def.category, list);
-  }
-
-  return (
-    <CommandDialog open={open} onOpenChange={onOpenChange}>
-      <CommandInput
-        placeholder={t("nodePickerSearch", "Search nodes...")}
-        value={search}
-        onValueChange={setSearch}
-      />
-      <CommandList>
-        <CommandEmpty>{t("nodePickerEmpty", "No compatible nodes found.")}</CommandEmpty>
-        {CATEGORY_ORDER.filter((cat) => grouped.has(cat)).map((category) => {
-          const Icon = categoryIcons[category];
-          return (
-            <CommandGroup key={category} heading={category}>
-              {grouped.get(category)!.map((def) => (
-                <CommandItem
-                  key={def.type + (def.type === "FunctionCall" ? `-${def.label}` : "")}
-                  onSelect={() => {
-                    onSelect(def);
-                    onOpenChange(false);
-                  }}
-                >
-                  {Icon && <Icon className="mr-2 h-4 w-4 shrink-0 opacity-70" />}
-                  <div className="flex flex-col min-w-0">
-                    <span className="truncate">{def.label}</span>
-                    {def.description && (
-                      <span className="text-xs text-muted-foreground truncate">{def.description}</span>
-                    )}
-                  </div>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          );
-        })}
-      </CommandList>
-    </CommandDialog>
-  );
-}
+// SPDX-License-Identifier: AGPL-3.0-only
+// Copyright (c) 2026 ForestHub. All rights reserved.
+// For commercial licensing, contact root@foresthub.ai
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { NodeDefinition, NodeCategory } from "@foresthubai/workflow-core/node";
+import {
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from "../components/ui/command";
+import { categoryIcons } from "../utils/categoryConstants";
+
+interface NodePickerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  compatibleDefs: NodeDefinition[];
+  onSelect: (nodeDef: NodeDefinition) => void;
+}
+
+const CATEGORY_ORDER: NodeCategory[] = [
+  NodeCategory.Trigger,
+  NodeCategory.Input,
+  NodeCategory.Logic,
+  NodeCategory.Data,
+  NodeCategory.Function,
+  NodeCategory.AI,
+  NodeCategory.Tool,
+  NodeCategory.Output,
+];
+
+export function NodePickerDialog({ open, onOpenChange, compatibleDefs, onSelect }: NodePickerDialogProps) {
+  const { t } = useTranslation();
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    if (open) setSearch("");
+  }, [open]);
+
+  // Group definitions by category
+  const grouped = new Map<NodeCategory, NodeDefinition[]>();
+  for (const def of compatibleDefs) {
+    const list = grouped.get(def.category) ?? [];
+    list.push(def);
+    grouped.set(def.category, list);
+  }
+
+  return (
+    <CommandDialog open={open} onOpenChange={onOpenChange}>
+      <CommandInput
+        placeholder={t("nodePickerSearch", "Search nodes...")}
+        value={search}
+        onValueChange={setSearch}
+      />
+      <CommandList>
+        <CommandEmpty>{t("nodePickerEmpty", "No compatible nodes found.")}</CommandEmpty>
+        {CATEGORY_ORDER.filter((cat) => grouped.has(cat)).map((category) => {
+          const Icon = categoryIcons[category];
+          return (
+            <CommandGroup key={category} heading={category}>
+              {grouped.get(category)!.map((def) => (
+                <CommandItem
+                  key={def.type + (def.type === "FunctionCall" ? `-${def.label}` : "")}
+                  onSelect={() => {
+                    onSelect(def);
+                    onOpenChange(false);
+                  }}
+                >
+                  {Icon && <Icon className="mr-2 h-4 w-4 shrink-0 opacity-70" />}
+                  <div className="flex flex-col min-w-0">
+                    <span className="truncate">{def.label}</span>
+                    {def.description && (
+                      <span className="text-xs text-muted-foreground truncate">{def.description}</span>
+                    )}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          );
+        })}
+      </CommandList>
+    </CommandDialog>
+  );
+}