@genfeedai/workflow-ui 0.1.0

package/dist/ui.d.ts

@@ -0,0 +1,67 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as react from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { ClassValue } from 'clsx';
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: react.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Checkbox({ className, ...props }: react.ComponentProps<typeof CheckboxPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+interface ComparisonSliderProps {
+    beforeSrc: string;
+    afterSrc: string;
+    beforeLabel?: string;
+    afterLabel?: string;
+    position: number;
+    onPositionChange: (position: number) => void;
+    height?: number;
+    className?: string;
+}
+declare function ComparisonSliderComponent({ beforeSrc, afterSrc, beforeLabel, afterLabel, position, onPositionChange, height, className, }: ComparisonSliderProps): react_jsx_runtime.JSX.Element;
+declare const ComparisonSlider: react.MemoExoticComponent<typeof ComparisonSliderComponent>;
+
+interface GridPosition {
+    x: number;
+    y: number;
+}
+interface GridPositionSelectorProps {
+    position: GridPosition;
+    onPositionChange: (position: GridPosition) => void;
+    className?: string;
+}
+declare function GridPositionSelectorComponent({ position, onPositionChange, className, }: GridPositionSelectorProps): react_jsx_runtime.JSX.Element;
+declare const GridPositionSelector: react.MemoExoticComponent<typeof GridPositionSelectorComponent>;
+
+declare function Input({ className, type, ...props }: react.ComponentProps<'input'>): react_jsx_runtime.JSX.Element;
+
+declare function Label({ className, ...props }: react.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Select({ ...props }: react.ComponentProps<typeof SelectPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function SelectGroup({ ...props }: react.ComponentProps<typeof SelectPrimitive.Group>): react_jsx_runtime.JSX.Element;
+declare function SelectValue({ ...props }: react.ComponentProps<typeof SelectPrimitive.Value>): react_jsx_runtime.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: react.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: 'sm' | 'default';
+}): react_jsx_runtime.JSX.Element;
+declare function SelectContent({ className, children, position, align, ...props }: react.ComponentProps<typeof SelectPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function SelectLabel({ className, ...props }: react.ComponentProps<typeof SelectPrimitive.Label>): react_jsx_runtime.JSX.Element;
+declare function SelectItem({ className, children, ...props }: react.ComponentProps<typeof SelectPrimitive.Item>): react_jsx_runtime.JSX.Element;
+declare function SelectSeparator({ className, ...props }: react.ComponentProps<typeof SelectPrimitive.Separator>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: react.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: react.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): react_jsx_runtime.JSX.Element;
+
+declare function Slider({ className, defaultValue, value, min, max, ...props }: react.ComponentProps<typeof SliderPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Button, Checkbox, ComparisonSlider, GridPositionSelector, Input, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Slider, buttonVariants, cn };

package/dist/ui.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var chunk3SPPKCWR_js = require('./chunk-3SPPKCWR.js');
+var chunk5HJFQVUR_js = require('./chunk-5HJFQVUR.js');
+require('./chunk-Z7PWFZG5.js');
+
+
+
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.Checkbox; }
+});
+Object.defineProperty(exports, "ComparisonSlider", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.ComparisonSlider; }
+});
+Object.defineProperty(exports, "GridPositionSelector", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.GridPositionSelector; }
+});
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.Input; }
+});
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.Label; }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.Select; }
+});
+Object.defineProperty(exports, "SelectContent", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.SelectContent; }
+});
+Object.defineProperty(exports, "SelectGroup", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.SelectGroup; }
+});
+Object.defineProperty(exports, "SelectItem", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.SelectItem; }
+});
+Object.defineProperty(exports, "SelectLabel", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.SelectLabel; }
+});
+Object.defineProperty(exports, "SelectScrollDownButton", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.SelectScrollDownButton; }
+});
+Object.defineProperty(exports, "SelectScrollUpButton", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.SelectScrollUpButton; }
+});
+Object.defineProperty(exports, "SelectSeparator", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.SelectSeparator; }
+});
+Object.defineProperty(exports, "SelectTrigger", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.SelectTrigger; }
+});
+Object.defineProperty(exports, "SelectValue", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.SelectValue; }
+});
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function () { return chunk3SPPKCWR_js.Slider; }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () { return chunk5HJFQVUR_js.Button; }
+});
+Object.defineProperty(exports, "buttonVariants", {
+  enumerable: true,
+  get: function () { return chunk5HJFQVUR_js.buttonVariants; }
+});
+Object.defineProperty(exports, "cn", {
+  enumerable: true,
+  get: function () { return chunk5HJFQVUR_js.cn; }
+});

package/dist/ui.mjs

@@ -0,0 +1,3 @@
+export { Checkbox, ComparisonSlider, GridPositionSelector, Input, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Slider } from './chunk-ZJD5WMR3.mjs';
+export { Button, buttonVariants, cn } from './chunk-7SKSRSS7.mjs';
+import './chunk-AC6TWLRT.mjs';

package/dist/workflowStore-4EGKJLYK.mjs

@@ -0,0 +1,3 @@
+import './chunk-LDN7IX4Y.mjs';
+export { useWorkflowStore } from './chunk-BJ3R5R32.mjs';
+import './chunk-AC6TWLRT.mjs';

package/dist/workflowStore-KM32FDL7.js

@@ -0,0 +1,12 @@
+'use strict';
+
+require('./chunk-JLWKW3G5.js');
+var chunkNSDLGLAQ_js = require('./chunk-NSDLGLAQ.js');
+require('./chunk-Z7PWFZG5.js');
+
+
+
+Object.defineProperty(exports, "useWorkflowStore", {
+  enumerable: true,
+  get: function () { return chunkNSDLGLAQ_js.useWorkflowStore; }
+});

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@genfeedai/workflow-ui",
+  "version": "0.1.0",
+  "license": "AGPL-3.0",
+  "description": "Shared UI components for Genfeed workflow editor",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/genfeedai/core.git",
+    "directory": "packages/workflow-ui"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./canvas": {
+      "types": "./dist/canvas.d.ts",
+      "import": "./dist/canvas.js",
+      "require": "./dist/canvas.cjs"
+    },
+    "./nodes": {
+      "types": "./dist/nodes.d.ts",
+      "import": "./dist/nodes.js",
+      "require": "./dist/nodes.cjs"
+    },
+    "./panels": {
+      "types": "./dist/panels.d.ts",
+      "import": "./dist/panels.js",
+      "require": "./dist/panels.cjs"
+    },
+    "./toolbar": {
+      "types": "./dist/toolbar.d.ts",
+      "import": "./dist/toolbar.js",
+      "require": "./dist/toolbar.cjs"
+    },
+    "./hooks": {
+      "types": "./dist/hooks.d.ts",
+      "import": "./dist/hooks.js",
+      "require": "./dist/hooks.cjs"
+    },
+    "./stores": {
+      "types": "./dist/stores.d.ts",
+      "import": "./dist/stores.js",
+      "require": "./dist/stores.cjs"
+    },
+    "./provider": {
+      "types": "./dist/provider.d.ts",
+      "import": "./dist/provider.js",
+      "require": "./dist/provider.cjs"
+    },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js",
+      "require": "./dist/ui.cjs"
+    },
+    "./lib": {
+      "types": "./dist/lib.d.ts",
+      "import": "./dist/lib.js",
+      "require": "./dist/lib.cjs"
+    },
+    "./styles": "./src/styles/workflow-ui.css"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "@xyflow/react": ">=12.0.0",
+    "next": ">=14.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "zustand": ">=5.0.0",
+    "zundo": ">=2.0.0"
+  },
+  "dependencies": {
+    "@genfeedai/core": "workspace:*",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.562.0",
+    "nanoid": "^5.1.6",
+    "react-compare-slider": "^3.1.0",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@genfeedai/types": "workspace:*",
+    "@types/react": "19.2.4",
+    "@types/react-dom": "19.2.4",
+    "@xyflow/react": "12.10.0",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tsup": "8.4.0",
+    "typescript": "5.9.3",
+    "zustand": "5.0.3",
+    "zundo": "2.3.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "bun run build"
+  }
+}

package/src/styles/workflow-ui.css

@@ -0,0 +1,186 @@
+/**
+ * Workflow UI Styles
+ *
+ * Workflow-specific CSS for @genfeedai/workflow-ui.
+ * Import this file in your app's global styles or layout.
+ *
+ * Does NOT include: tailwind directives, base styles, design tokens,
+ * scrollbar styles, or app-level theme variables.
+ */
+
+/* ==========================================================================
+   CSS Custom Properties - Handle & Category Colors
+   ========================================================================== */
+
+:root {
+  /* Handle type colors (inputs) */
+  --handle-image: oklch(0.75 0.18 75);
+  --handle-video: oklch(0.65 0.2 285);
+  --handle-text: oklch(0.7 0.17 160);
+  --handle-number: oklch(0.65 0.2 250);
+  --handle-audio: oklch(0.7 0.2 330);
+
+  /* Output handle color (cyan) */
+  --handle-output: oklch(0.7 0.2 200);
+
+  /* Node category colors (for borders and buttons) */
+  --category-input: oklch(0.7 0.15 160);
+  --category-ai: oklch(0.65 0.25 300);
+  --category-processing: oklch(0.65 0.2 250);
+  --category-output: oklch(0.75 0.18 70);
+  --category-composition: oklch(0.7 0.2 30);
+}
+
+/* ==========================================================================
+   React Flow Overrides
+   ========================================================================== */
+
+.react-flow__node {
+  font-size: 12px;
+  background: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+}
+
+.react-flow__handle {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--primary);
+  border: 2px solid var(--background);
+}
+
+.react-flow__handle-left { left: -5px; }
+.react-flow__handle-right { right: -5px; }
+.react-flow__handle-top { top: -5px; }
+.react-flow__handle-bottom { bottom: -5px; }
+
+.react-flow__edge-path {
+  stroke: var(--muted-foreground);
+  stroke-width: 2;
+}
+
+/* Edge type colors (based on data type flowing through) */
+.react-flow__edge.edge-image .react-flow__edge-path { stroke: var(--handle-image); }
+.react-flow__edge.edge-video .react-flow__edge-path { stroke: var(--handle-video); }
+.react-flow__edge.edge-text .react-flow__edge-path { stroke: var(--handle-text); }
+.react-flow__edge.edge-number .react-flow__edge-path { stroke: var(--handle-number); }
+.react-flow__edge.edge-audio .react-flow__edge-path { stroke: var(--handle-audio); }
+
+/* Selected edge - highlight with glow (preserves type color) */
+.react-flow__edge.selected .react-flow__edge-path {
+  stroke-width: 3px;
+  filter: drop-shadow(0 0 6px currentColor) brightness(1.3);
+  transition: stroke-width 0.15s ease, filter 0.15s ease;
+}
+
+/* Dimmed edges (not connected to selection) */
+.react-flow__edge.dimmed .react-flow__edge-path {
+  opacity: 0.25;
+  transition: opacity 0.2s ease;
+}
+
+/* Highlighted edges (connected to selection) - brighten the type color */
+.react-flow__edge.highlighted .react-flow__edge-path {
+  filter: drop-shadow(0 0 4px currentColor) brightness(1.2);
+  transition: opacity 0.2s ease, filter 0.2s ease;
+}
+
+/* Executing edges (during workflow execution) - pipe flow effect */
+.react-flow__edge.executing .react-flow__edge-path {
+  stroke-width: 2.5px;
+  filter: drop-shadow(0 0 8px currentColor) brightness(1.3);
+  stroke-dasharray: 8 4;
+  animation: edge-flow 0.5s linear infinite;
+}
+
+/* Active pipe - all edges glow during execution */
+.react-flow__edge.active-pipe .react-flow__edge-path {
+  stroke-width: 2px;
+  filter: drop-shadow(0 0 4px currentColor);
+  stroke-dasharray: 6 3;
+  animation: edge-flow 0.8s linear infinite;
+  opacity: 0.8;
+}
+
+/* Disabled edges - targeting inputs not supported by current model */
+.react-flow__edge.edge-disabled .react-flow__edge-path {
+  stroke: var(--chart-3);
+  stroke-width: 1.5px;
+  stroke-dasharray: 5 5;
+  opacity: 0.3;
+  transition: opacity 0.2s ease, stroke 0.2s ease;
+}
+
+.react-flow__background {
+  background-color: var(--background);
+}
+
+.react-flow__minimap {
+  background-color: var(--card);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.react-flow__controls {
+  background: var(--card) !important;
+  border-radius: 8px !important;
+  border: 1px solid var(--border) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+}
+
+.react-flow__controls-button {
+  background: var(--card) !important;
+  border-bottom: 1px solid var(--border) !important;
+  fill: var(--muted-foreground) !important;
+  color: var(--muted-foreground) !important;
+}
+
+.react-flow__controls-button:hover {
+  background: var(--secondary) !important;
+  fill: var(--foreground) !important;
+  color: var(--foreground) !important;
+}
+
+.react-flow__controls-button svg {
+  fill: inherit !important;
+}
+
+/* ==========================================================================
+   Handle Type Color Classes
+   ========================================================================== */
+
+.handle-image { background: var(--handle-image) !important; }
+.handle-video { background: var(--handle-video) !important; }
+.handle-text { background: var(--handle-text) !important; }
+.handle-number { background: var(--handle-number) !important; }
+.handle-audio { background: var(--handle-audio) !important; }
+.handle-output { background: var(--handle-output) !important; }
+
+/* ==========================================================================
+   Animation Keyframes
+   ========================================================================== */
+
+/* Processing node glow animation */
+@keyframes processing-glow {
+  0%, 100% {
+    box-shadow: 0 0 8px 2px var(--node-color, var(--primary));
+  }
+  50% {
+    box-shadow: 0 0 20px 6px var(--node-color, var(--primary));
+  }
+}
+
+.node-processing {
+  animation: processing-glow 1.5s ease-in-out infinite;
+}
+
+/* Edge flow animation - simulates data flowing through pipes */
+@keyframes edge-flow {
+  0% {
+    stroke-dashoffset: 24;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}