orcheo-canvas 0.0.1

package/src/features/workflow/components/nodes/group-node.tsx

@@ -0,0 +1,195 @@
+import React, { useState } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  ExternalLink,
+  Maximize2,
+} from "lucide-react";
+import { NodeProps, Handle, Position } from "@xyflow/react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/design-system/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
+import NodeLabel from "@features/workflow/components/nodes/node-label";
+
+export type GroupNodeData = {
+  label: string;
+  description?: string;
+  isCollapsed?: boolean;
+  onToggleCollapse?: () => void;
+  onOpenInNewTab?: () => void;
+  nodeCount?: number;
+  color?: string;
+  onLabelChange?: (id: string, newLabel: string) => void;
+  [key: string]: unknown;
+};
+
+const GroupNode = ({ data, selected, id }: NodeProps) => {
+  const nodeData = data as GroupNodeData;
+  const {
+    label,
+    description,
+    isCollapsed = false,
+    onToggleCollapse,
+    onOpenInNewTab,
+    nodeCount = 0,
+    color = "blue",
+    onLabelChange,
+  } = nodeData;
+
+  const [isHovered, setIsHovered] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const colorStyles = {
+    blue: "bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-800/50",
+    purple:
+      "bg-purple-50 border-purple-200 dark:bg-purple-950/30 dark:border-purple-800/50",
+    amber:
+      "bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-800/50",
+    green:
+      "bg-green-50 border-green-200 dark:bg-green-950/30 dark:border-green-800/50",
+    indigo:
+      "bg-indigo-50 border-indigo-200 dark:bg-indigo-950/30 dark:border-indigo-800/50",
+  } as const;
+
+  const colorStyle =
+    color in colorStyles
+      ? colorStyles[color as keyof typeof colorStyles]
+      : colorStyles.blue;
+
+  const handleDoubleClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <div className="flex flex-col items-center">
+      <div
+        className={cn(
+          "group relative rounded-xl border-2 shadow-sm transition-all duration-200",
+          colorStyle,
+          selected && "ring-2 ring-primary ring-offset-2",
+          isExpanded
+            ? "min-w-[250px] min-h-[150px]"
+            : "h-16 w-16 aspect-square",
+        )}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        onDoubleClick={handleDoubleClick}
+      >
+        {/* Input handle */}
+        <Handle
+          type="target"
+          position={Position.Left}
+          className="!h-3 !w-3 !bg-primary !border-2 !border-background"
+        />
+
+        {/* Output handle */}
+        <Handle
+          type="source"
+          position={Position.Right}
+          className="!h-3 !w-3 !bg-primary !border-2 !border-background"
+        />
+
+        {isExpanded ? (
+          <div className="p-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-5 w-5 p-0"
+                  onClick={onToggleCollapse}
+                >
+                  {isCollapsed ? (
+                    <ChevronRight className="h-4 w-4" />
+                  ) : (
+                    <ChevronDown className="h-4 w-4" />
+                  )}
+                </Button>
+                <div className="font-medium truncate">{label}</div>
+              </div>
+              <div className="flex items-center gap-1">
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6"
+                        onClick={onOpenInNewTab}
+                      >
+                        <ExternalLink className="h-3 w-3" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Open in new tab</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6"
+                        onClick={() => setIsExpanded(false)}
+                      >
+                        <Maximize2 className="h-3 w-3" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Collapse group</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+            </div>
+            {description && (
+              <p className="text-xs text-muted-foreground mt-1">
+                {description}
+              </p>
+            )}
+            {!isCollapsed && (
+              <div className="mt-2 p-2 border border-dashed border-border/50 rounded bg-background/50 min-h-[80px] flex items-center justify-center">
+                <span className="text-xs text-muted-foreground">
+                  {nodeCount > 0
+                    ? `Contains ${nodeCount} nodes`
+                    : "Drop nodes here to group them"}
+                </span>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="h-full w-full flex flex-col items-center justify-center relative">
+            {/* Group icon */}
+            <div className="flex items-center justify-center">
+              <div className="text-xs font-medium">
+                {nodeCount > 0 ? nodeCount : "G"}
+              </div>
+            </div>
+
+            {/* Tooltip for group name */}
+            {isHovered && (
+              <div className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-background border border-border rounded-md shadow-md p-1 text-xs">
+                {label}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Node label component - only show when collapsed */}
+      {!isExpanded && (
+        <NodeLabel id={id} label={label} onLabelChange={onLabelChange} />
+      )}
+    </div>
+  );
+};
+
+export default GroupNode;

package/src/features/workflow/components/nodes/node-label.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Pencil, Check, X } from "lucide-react";
+import { Input } from "@/design-system/ui/input";
+import { cn } from "@/lib/utils";
+
+export interface NodeLabelProps {
+  id: string;
+  label: string;
+  onLabelChange?: (id: string, newLabel: string) => void;
+  editable?: boolean;
+  className?: string;
+}
+
+export default function NodeLabel({
+  id,
+  label,
+  onLabelChange,
+  editable = true,
+  className,
+}: NodeLabelProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedLabel, setEditedLabel] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditing]);
+
+  const handleEditStart = (e: React.MouseEvent) => {
+    if (!editable) return;
+    e.stopPropagation();
+    setIsEditing(true);
+    setEditedLabel(label);
+  };
+
+  const handleEditCancel = () => {
+    setIsEditing(false);
+  };
+
+  const handleEditSave = () => {
+    if (onLabelChange && editedLabel.trim() !== "") {
+      onLabelChange(id, editedLabel);
+    }
+    setIsEditing(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleEditSave();
+    } else if (e.key === "Escape") {
+      handleEditCancel();
+    }
+  };
+
+  return (
+    <div className={cn("mb-2 w-full text-center", className)}>
+      {isEditing ? (
+        <div className="flex items-center justify-center">
+          <Input
+            ref={inputRef}
+            value={editedLabel}
+            onChange={(e) => setEditedLabel(e.target.value)}
+            onKeyDown={handleKeyDown}
+            className="h-6 py-0 px-1 text-xs w-[100px] text-center"
+            autoFocus
+          />
+
+          <div className="absolute right-[-40px] flex space-x-1">
+            <button
+              onClick={handleEditSave}
+              className="p-1 rounded-full bg-green-100 hover:bg-green-200 dark:bg-green-900/30 dark:hover:bg-green-800/50"
+            >
+              <Check className="h-3 w-3 text-green-600 dark:text-green-400" />
+            </button>
+            <button
+              onClick={handleEditCancel}
+              className="p-1 rounded-full bg-red-100 hover:bg-red-200 dark:bg-red-900/30 dark:hover:bg-red-800/50"
+            >
+              <X className="h-3 w-3 text-red-600 dark:text-red-400" />
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div
+          className="flex items-center justify-center text-xs"
+          onDoubleClick={handleEditStart}
+        >
+          <span className="whitespace-nowrap overflow-hidden text-ellipsis px-1">
+            {label}
+          </span>
+          {editable && (
+            <button
+              onClick={handleEditStart}
+              className="ml-1 opacity-0 group-hover:opacity-100 hover:text-primary transition-opacity"
+            >
+              <Pencil className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/features/workflow/components/nodes/start-end-node.tsx

@@ -0,0 +1,68 @@
+import { cn } from "@/lib/utils";
+import { Play, Square } from "lucide-react";
+import { NodeProps, Handle, Position } from "@xyflow/react";
+
+export type StartEndNodeData = {
+  label: string;
+  type: "start" | "end";
+  description?: string;
+  onLabelChange?: (id: string, newLabel: string) => void;
+  [key: string]: unknown;
+};
+
+const StartEndNode = ({ data, selected }: NodeProps) => {
+  const nodeData = data as StartEndNodeData;
+  const { label, type } = nodeData;
+
+  const nodeColors = {
+    start:
+      "bg-emerald-50 border-emerald-300 dark:bg-emerald-950/30 dark:border-emerald-800/50",
+    end: "bg-rose-50 border-rose-300 dark:bg-rose-950/30 dark:border-rose-800/50",
+  } as const;
+
+  return (
+    <div
+      className={cn(
+        "group relative rounded-xl border-2 shadow-sm transition-all duration-200 h-16 w-16 aspect-square flex items-center justify-center",
+        nodeColors[type],
+        selected && "ring-2 ring-primary ring-offset-2",
+      )}
+    >
+      {/* Simple text label */}
+      <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs text-center whitespace-nowrap">
+        <span className="px-2 py-0.5 rounded-full transition-colors">
+          {label}
+        </span>
+      </div>
+
+      {/* Only show input handle on end node */}
+      {type === "end" && (
+        <Handle
+          type="target"
+          position={Position.Left}
+          className="!h-2 !w-2 !bg-primary !border-2 !border-background"
+        />
+      )}
+
+      {/* Only show output handle on start node */}
+      {type === "start" && (
+        <Handle
+          type="source"
+          position={Position.Right}
+          className="!h-2 !w-2 !bg-primary !border-2 !border-background"
+        />
+      )}
+
+      {/* Node icon */}
+      <div className="flex items-center justify-center">
+        {type === "start" ? (
+          <Play className="h-6 w-6 text-emerald-600 dark:text-emerald-400" />
+        ) : (
+          <Square className="h-5 w-5 text-rose-600 dark:text-rose-400" />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default StartEndNode;

package/src/features/workflow/components/nodes/sticky-note-node.tsx

@@ -0,0 +1,246 @@
+import React, { useCallback, useMemo, useRef } from "react";
+import { NodeProps } from "@xyflow/react";
+import { Palette, Trash2 } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/design-system/ui/button";
+import { Textarea } from "@/design-system/ui/textarea";
+
+export type StickyNoteColor = "yellow" | "pink" | "blue" | "green" | "purple";
+
+export interface StickyNoteNodeData {
+  label?: string;
+  color?: StickyNoteColor;
+  content?: string;
+  width?: number;
+  height?: number;
+  onUpdateStickyNote?: (
+    id: string,
+    updates: Partial<
+      Pick<StickyNoteNodeData, "color" | "content" | "width" | "height">
+    >,
+  ) => void;
+  onDelete?: (id: string) => void;
+}
+
+const NOTE_COLORS: Record<StickyNoteColor, string> = {
+  yellow:
+    "bg-amber-100 border-amber-200 text-amber-950 dark:bg-amber-500/20 dark:border-amber-400/30 dark:text-amber-100",
+  pink: "bg-rose-100 border-rose-200 text-rose-950 dark:bg-rose-500/20 dark:border-rose-400/30 dark:text-rose-100",
+  blue: "bg-sky-100 border-sky-200 text-sky-950 dark:bg-sky-500/20 dark:border-sky-400/30 dark:text-sky-100",
+  green:
+    "bg-emerald-100 border-emerald-200 text-emerald-950 dark:bg-emerald-500/20 dark:border-emerald-400/30 dark:text-emerald-100",
+  purple:
+    "bg-violet-100 border-violet-200 text-violet-950 dark:bg-violet-500/20 dark:border-violet-400/30 dark:text-violet-100",
+};
+
+const COLOR_OPTIONS: StickyNoteColor[] = [
+  "yellow",
+  "pink",
+  "blue",
+  "green",
+  "purple",
+];
+
+const MIN_WIDTH = 180;
+const MIN_HEIGHT = 150;
+
+const isStickyNoteColor = (value: unknown): value is StickyNoteColor => {
+  return (
+    typeof value === "string" &&
+    (COLOR_OPTIONS as readonly string[]).includes(value)
+  );
+};
+
+const clampDimension = (value: number, minimum: number) => {
+  if (Number.isNaN(value) || !Number.isFinite(value)) {
+    return minimum;
+  }
+  return Math.max(minimum, Math.round(value));
+};
+
+const StickyNoteNode: React.FC<NodeProps<StickyNoteNodeData>> = ({
+  id,
+  data,
+  selected,
+}) => {
+  const pointerStateRef = useRef<{
+    pointerId: number;
+    startX: number;
+    startY: number;
+    startWidth: number;
+    startHeight: number;
+  } | null>(null);
+
+  const color = useMemo<StickyNoteColor>(() => {
+    return isStickyNoteColor(data.color) ? data.color : "yellow";
+  }, [data.color]);
+
+  const width = clampDimension(
+    typeof data.width === "number" ? data.width : MIN_WIDTH,
+    MIN_WIDTH,
+  );
+  const height = clampDimension(
+    typeof data.height === "number" ? data.height : MIN_HEIGHT,
+    MIN_HEIGHT,
+  );
+  const label = data.label?.length ? data.label : "Sticky Note";
+
+  const handleColorChange = useCallback(
+    (nextColor: StickyNoteColor) => {
+      if (data.onUpdateStickyNote) {
+        data.onUpdateStickyNote(id, { color: nextColor });
+      }
+    },
+    [data, id],
+  );
+
+  const handleContentChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      if (data.onUpdateStickyNote) {
+        data.onUpdateStickyNote(id, { content: event.target.value });
+      }
+    },
+    [data, id],
+  );
+
+  const stopPropagation = (event: React.SyntheticEvent) => {
+    event.stopPropagation();
+  };
+
+  const handleDelete = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      data.onDelete?.(id);
+    },
+    [data, id],
+  );
+
+  const handleResizePointerDown = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      event.stopPropagation();
+      event.preventDefault();
+      pointerStateRef.current = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+        startWidth: width,
+        startHeight: height,
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+    },
+    [height, width],
+  );
+
+  const handleResizePointerMove = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const state = pointerStateRef.current;
+      if (
+        !state ||
+        state.pointerId !== event.pointerId ||
+        !data.onUpdateStickyNote
+      ) {
+        return;
+      }
+
+      const deltaX = event.clientX - state.startX;
+      const deltaY = event.clientY - state.startY;
+      const nextWidth = clampDimension(state.startWidth + deltaX, MIN_WIDTH);
+      const nextHeight = clampDimension(state.startHeight + deltaY, MIN_HEIGHT);
+
+      data.onUpdateStickyNote(id, {
+        width: nextWidth,
+        height: nextHeight,
+      });
+    },
+    [data, id],
+  );
+
+  const handleResizePointerUp = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      const state = pointerStateRef.current;
+      if (!state || state.pointerId !== event.pointerId) {
+        return;
+      }
+
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      pointerStateRef.current = null;
+    },
+    [],
+  );
+
+  const colorClasses = NOTE_COLORS[color] ?? NOTE_COLORS.yellow;
+  const content = typeof data.content === "string" ? data.content : "";
+
+  return (
+    <div
+      className={cn(
+        "group relative flex h-full w-full min-h-[150px] min-w-[180px] flex-col rounded-xl border shadow-md transition",
+        colorClasses,
+        selected && "ring-2 ring-primary ring-offset-2",
+      )}
+      style={{ width, height }}
+      onClick={stopPropagation}
+    >
+      <div className="flex items-center justify-between px-3 py-2 text-xs font-medium">
+        <div className="flex items-center gap-1 text-muted-foreground">
+          <Palette className="h-3 w-3" />
+          {label}
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6 text-muted-foreground hover:text-destructive"
+          onClick={handleDelete}
+        >
+          <Trash2 className="h-3 w-3" />
+        </Button>
+      </div>
+
+      <Textarea
+        value={content}
+        onChange={handleContentChange}
+        placeholder="Leave a note for collaborators"
+        className="flex-1 resize-none border-none bg-transparent px-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0"
+        onPointerDown={(event) => event.stopPropagation()}
+      />
+
+      <div className="flex items-center justify-between gap-2 px-3 py-2">
+        <div className="flex items-center gap-1">
+          {COLOR_OPTIONS.map((colorOption) => (
+            <button
+              key={colorOption}
+              type="button"
+              className={cn(
+                "h-4 w-4 rounded-full border transition hover:scale-110",
+                NOTE_COLORS[colorOption],
+                colorOption === color && "ring-2 ring-offset-1 ring-primary",
+              )}
+              onClick={(event) => {
+                event.stopPropagation();
+                handleColorChange(colorOption);
+              }}
+              aria-label={`Set sticky note color to ${colorOption}`}
+            />
+          ))}
+        </div>
+        <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
+          Drag to move • Resize corner
+        </span>
+      </div>
+
+      <div
+        role="presentation"
+        className="absolute bottom-1 right-1 h-3 w-3 cursor-se-resize rounded-sm border border-dashed border-border/60 bg-transparent"
+        onPointerDown={handleResizePointerDown}
+        onPointerMove={handleResizePointerMove}
+        onPointerUp={handleResizePointerUp}
+        onPointerCancel={handleResizePointerUp}
+      />
+    </div>
+  );
+};
+
+export default StickyNoteNode;

package/src/features/workflow/components/nodes/workflow-node-controls.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { Play, Settings, ToggleLeft, Trash } from "lucide-react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/design-system/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+interface WorkflowNodeControlsProps {
+  visible: boolean;
+  isDisabled?: boolean;
+  nodeId: string;
+  onDelete?: (id: string) => void;
+}
+
+export const WorkflowNodeControls = React.forwardRef<
+  HTMLDivElement,
+  WorkflowNodeControlsProps
+>(({ visible, isDisabled, nodeId, onDelete }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "absolute -top-4 left-1/2 transform -translate-x-1/2 flex items-center gap-0.5 bg-background border border-border rounded-md shadow-md p-0.5 transition-opacity duration-200 z-20 pointer-events-auto",
+      visible ? "opacity-100" : "opacity-0 pointer-events-none",
+    )}
+  >
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button className="p-0.5 rounded-sm hover:bg-accent focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-0.5">
+            <Play className="h-2 w-2" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Run from this node</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button className="p-0.5 rounded-sm hover:bg-accent focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-0.5">
+            <Settings className="h-2 w-2" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Configure node</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button className="p-0.5 rounded-sm hover:bg-accent focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-0.5">
+            <ToggleLeft className="h-2 w-2" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{isDisabled ? "Enable" : "Disable"} node</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            className="p-0.5 rounded-sm hover:bg-accent hover:text-destructive focus:outline-none focus:ring-1 focus:ring-destructive focus:ring-offset-0.5"
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              onDelete?.(nodeId);
+            }}
+          >
+            <Trash className="h-2 w-2" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Delete node</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  </div>
+));
+
+WorkflowNodeControls.displayName = "WorkflowNodeControls";