@marktoflow/gui 2.0.0-alpha.5 → 2.0.1

package/src/client/styles/globals.css

@@ -1,452 +0,0 @@
-/* React Flow base styles - must be before @tailwind */
-@import '@xyflow/react/dist/style.css';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #3d3d5c;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #4d4d6c;
-}
-
-/* Canvas overrides */
-.react-flow__background {
-  background-color: #1a1a2e !important;
-}
-
-.react-flow__minimap {
-  background-color: #232340 !important;
-  border-radius: 8px;
-  border: 1px solid #3d3d5c;
-}
-
-.react-flow__controls {
-  background-color: #232340 !important;
-  border-radius: 8px;
-  border: 1px solid #3d3d5c;
-}
-
-.react-flow__controls-button {
-  background-color: #2d2d4a !important;
-  border-color: #3d3d5c !important;
-  color: white !important;
-}
-
-.react-flow__controls-button:hover {
-  background-color: #3d3d5c !important;
-}
-
-/* Node base styles */
-.step-node {
-  min-width: 200px;
-  border-radius: 8px;
-  background: #2d2d4a;
-  border: 2px solid #3d3d5c;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  transition: all 0.2s ease;
-}
-
-.step-node:hover {
-  border-color: #ff6d5a;
-}
-
-.step-node.selected {
-  border-color: #ff6d5a;
-  box-shadow: 0 0 0 4px rgba(255, 109, 90, 0.2);
-}
-
-.step-node.running {
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.step-node.completed {
-  border-color: #5cb85c;
-}
-
-.step-node.failed {
-  border-color: #d9534f;
-}
-
-/* Control flow node base styles */
-.control-flow-node {
-  min-width: 220px;
-  border-radius: 12px;
-  border: 2px solid transparent;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-  transition: all 0.2s ease;
-  overflow: hidden;
-}
-
-.control-flow-node:hover {
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
-  transform: translateY(-1px);
-}
-
-.control-flow-node.selected {
-  box-shadow: 0 0 0 4px rgba(255, 109, 90, 0.3), 0 4px 16px rgba(0, 0, 0, 0.4);
-  border-color: rgba(255, 109, 90, 0.5);
-}
-
-.control-flow-node.running {
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.control-flow-node.completed {
-  box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.4), 0 4px 16px rgba(0, 0, 0, 0.4);
-}
-
-.control-flow-node.failed {
-  box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.4), 0 4px 16px rgba(0, 0, 0, 0.4);
-}
-
-/* Control flow specific node types */
-.if-else-node {
-  position: relative;
-}
-
-.switch-node {
-  position: relative;
-}
-
-.for-each-node,
-.while-node {
-  position: relative;
-}
-
-.parallel-node {
-  position: relative;
-}
-
-.try-catch-node {
-  position: relative;
-}
-
-.transform-node {
-  position: relative;
-}
-
-/* Execution overlays for control flow nodes */
-.control-flow-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-  pointer-events: none;
-  animation: fadeIn 0.2s ease-out;
-}
-
-.control-flow-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-}
-
-.control-flow-badge.early-exit {
-  background: rgba(255, 152, 0, 0.2);
-  border: 1px solid rgba(255, 152, 0, 0.5);
-  color: #ff9800;
-}
-
-.control-flow-badge.skipped {
-  background: rgba(128, 128, 128, 0.2);
-  border: 1px solid rgba(128, 128, 128, 0.5);
-  color: #999;
-}
-
-.control-flow-badge.max-concurrent {
-  background: rgba(255, 193, 7, 0.2);
-  border: 1px solid rgba(255, 193, 7, 0.5);
-  color: #ffc107;
-}
-
-/* Edge animation */
-.react-flow__edge-path.animated {
-  stroke-dasharray: 8;
-  animation: flowEdge 1s linear infinite;
-}
-
-@keyframes flowEdge {
-  from {
-    stroke-dashoffset: 24;
-  }
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-/* Monaco editor overrides */
-.monaco-editor {
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-/* Light mode overrides */
-.light {
-  --color-bg-canvas: #f5f5f7;
-  --color-bg-panel: #ffffff;
-  --color-bg-node: #ffffff;
-  --color-border-node: #e5e5e5;
-  --color-text-primary: #1a1a2e;
-  --color-text-secondary: #666666;
-  --color-text-muted: #999999;
-}
-
-.dark {
-  --color-bg-canvas: #1a1a2e;
-  --color-bg-panel: #232340;
-  --color-bg-node: #2d2d4a;
-  --color-border-node: #3d3d5c;
-  --color-text-primary: #ffffff;
-  --color-text-secondary: #d0d0d0;
-  --color-text-muted: #888888;
-}
-
-.light .react-flow__background {
-  background-color: #f5f5f7 !important;
-}
-
-.light .react-flow__background pattern circle {
-  fill: #d0d0d0 !important;
-}
-
-.light .react-flow__minimap {
-  background-color: #ffffff !important;
-  border-color: #e5e5e5;
-}
-
-.light .react-flow__controls {
-  background-color: #ffffff !important;
-  border-color: #e5e5e5;
-}
-
-.light .react-flow__controls-button {
-  background-color: #f5f5f7 !important;
-  border-color: #e5e5e5 !important;
-  color: #1a1a2e !important;
-}
-
-.light .react-flow__controls-button:hover {
-  background-color: #e5e5e5 !important;
-}
-
-.light .step-node {
-  background: #ffffff;
-  border-color: #e5e5e5;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.light .step-node:hover {
-  border-color: #ff6d5a;
-}
-
-.light ::-webkit-scrollbar-thumb {
-  background: #d0d0d0;
-}
-
-.light ::-webkit-scrollbar-thumb:hover {
-  background: #b0b0b0;
-}
-
-/* Light mode text colors */
-.light .text-white {
-  color: #1a1a2e;
-}
-
-.light .text-gray-300 {
-  color: #4a4a4a;
-}
-
-.light .text-gray-400 {
-  color: #666666;
-}
-
-.light .text-gray-500 {
-  color: #888888;
-}
-
-/* Light mode backgrounds */
-.light .bg-canvas-bg {
-  background-color: #f5f5f7;
-}
-
-.light .bg-panel-bg {
-  background-color: #ffffff;
-}
-
-.light .bg-node-bg {
-  background-color: #f5f5f7;
-}
-
-.light .border-node-border {
-  border-color: #e5e5e5;
-}
-
-/* Light mode buttons */
-.light .bg-primary\/10 {
-  background-color: rgba(255, 109, 90, 0.15);
-}
-
-.light .hover\:bg-white\/5:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-.light .hover\:bg-white\/10:hover {
-  background-color: rgba(0, 0, 0, 0.08);
-}
-
-/* Light mode inputs */
-.light input,
-.light textarea,
-.light select {
-  background-color: #ffffff;
-  border-color: #e5e5e5;
-  color: #1a1a2e;
-}
-
-.light input::placeholder,
-.light textarea::placeholder {
-  color: #999999;
-}
-
-.light input:focus,
-.light textarea:focus,
-.light select:focus {
-  border-color: #ff6d5a;
-}
-
-/* Light mode kbd elements */
-.light kbd {
-  background-color: #f5f5f7;
-  border-color: #e5e5e5;
-  color: #4a4a4a;
-}
-
-/* Responsive animations */
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideOutLeft {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-}
-
-@keyframes slideOutRight {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.animate-slide-in-left {
-  animation: slideInLeft 0.2s ease-out forwards;
-}
-
-.animate-slide-in-right {
-  animation: slideInRight 0.2s ease-out forwards;
-}
-
-.animate-slide-out-left {
-  animation: slideOutLeft 0.2s ease-in forwards;
-}
-
-.animate-slide-out-right {
-  animation: slideOutRight 0.2s ease-in forwards;
-}
-
-.animate-fade-in {
-  animation: fadeIn 0.15s ease-out forwards;
-}
-
-/* Mobile-specific styles */
-@media (max-width: 767px) {
-  /* Ensure toolbar buttons are touch-friendly */
-  .toolbar-button {
-    min-width: 44px;
-    min-height: 44px;
-  }
-
-  /* Adjust canvas controls for mobile */
-  .react-flow__controls {
-    bottom: 80px !important;
-  }
-
-  /* Make prompt input more prominent on mobile */
-  .prompt-input-container {
-    padding: 8px;
-  }
-}
-
-/* Tablet styles */
-@media (min-width: 768px) and (max-width: 1023px) {
-  /* Slightly more compact on tablets */
-  .react-flow__minimap {
-    display: none;
-  }
-}

package/src/client/utils/cn.ts

@@ -1,9 +0,0 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-/**
- * Utility function to merge Tailwind CSS classes
- */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

package/src/client/utils/index.ts

@@ -1,4 +0,0 @@
-export { cn } from './cn';
-export { getServiceIcon, getServiceColor } from './serviceIcons';
-export { workflowToGraph, graphToWorkflow } from './workflowToGraph';
-export { validateStep, getFieldError, hasFieldError, type ValidationError, type ValidationResult } from './stepValidation';

package/src/client/utils/platform.ts

@@ -1,46 +0,0 @@
-/**
- * Platform detection utilities for cross-platform keyboard shortcuts
- */
-
-/**
- * Detect if the user is on a Mac platform
- */
-export const isMac = (): boolean => {
-  if (typeof window === 'undefined' || typeof navigator === 'undefined') {
-    return false;
-  }
-  return navigator.platform.toUpperCase().includes('MAC');
-};
-
-/**
- * Get the appropriate modifier key display for the current platform
- * Returns '⌘' on Mac, 'Ctrl' on Windows/Linux
- */
-export const getModKey = (): string => {
-  return isMac() ? '⌘' : 'Ctrl';
-};
-
-/**
- * Convert a shortcut string to display the correct modifier for the platform
- * @param shortcut - The shortcut string (can contain ⌘, Cmd, or Ctrl)
- * @returns The shortcut with the correct platform modifier
- *
- * @example
- * getShortcutDisplay('⌘+S') // '⌘+S' on Mac, 'Ctrl+S' on Windows
- * getShortcutDisplay('Cmd+Z') // '⌘+Z' on Mac, 'Ctrl+Z' on Windows
- */
-export const getShortcutDisplay = (shortcut: string): string => {
-  const modKey = getModKey();
-
-  return shortcut
-    .replace(/⌘/g, modKey)
-    .replace(/Cmd/g, modKey);
-};
-
-/**
- * Check if the modifier key is pressed in a keyboard event
- * Checks metaKey on Mac, ctrlKey on Windows/Linux
- */
-export const isModKeyPressed = (event: KeyboardEvent | React.KeyboardEvent): boolean => {
-  return isMac() ? event.metaKey : event.ctrlKey;
-};

package/src/client/utils/serviceIcons.tsx

@@ -1,97 +0,0 @@
-import {
-  MessageSquare,
-  GitBranch,
-  ClipboardList,
-  Mail,
-  Calendar,
-  Trello,
-  FileText,
-  MessageCircle,
-  Database,
-  Globe,
-  Bot,
-  Zap,
-  HelpCircle,
-  Phone,
-  Send,
-  ShoppingCart,
-  Headphones,
-  Users,
-  CheckSquare,
-  Cloud,
-  HardDrive,
-  CreditCard,
-} from 'lucide-react';
-
-type IconComponent = React.ComponentType<{ className?: string }>;
-
-const serviceIcons: Record<string, IconComponent> = {
-  slack: MessageSquare,
-  github: GitBranch,
-  jira: ClipboardList,
-  gmail: Mail,
-  outlook: Calendar,
-  linear: Trello,
-  notion: FileText,
-  discord: MessageCircle,
-  airtable: Database,
-  confluence: FileText,
-  http: Globe,
-  claude: Bot,
-  opencode: Bot,
-  ollama: Bot,
-  webhook: Zap,
-  schedule: Calendar,
-  trigger: Zap,
-  stripe: CreditCard,
-  teams: Users,
-  twilio: Phone,
-  sendgrid: Send,
-  shopify: ShoppingCart,
-  zendesk: Headphones,
-  mailchimp: Mail,
-  asana: CheckSquare,
-  trello: Trello,
-  dropbox: Cloud,
-  's3': HardDrive,
-  'aws-s3': HardDrive,
-};
-
-export function getServiceIcon(serviceName: string): IconComponent {
-  const normalizedName = serviceName.toLowerCase().split('.')[0];
-  return serviceIcons[normalizedName] || HelpCircle;
-}
-
-export function getServiceColor(serviceName: string): string {
-  const colors: Record<string, string> = {
-    slack: '#4A154B',
-    github: '#24292e',
-    jira: '#0052CC',
-    gmail: '#EA4335',
-    outlook: '#0078D4',
-    linear: '#5E6AD2',
-    notion: '#000000',
-    discord: '#5865F2',
-    airtable: '#FFBF00',
-    confluence: '#0052CC',
-    http: '#00D1B2',
-    claude: '#CC785C',
-    opencode: '#00A67E',
-    ollama: '#1a1a2e',
-    stripe: '#635BFF',
-    teams: '#6264A7',
-    twilio: '#F22F46',
-    sendgrid: '#1A82E2',
-    shopify: '#96BF48',
-    zendesk: '#03363D',
-    mailchimp: '#FFE01B',
-    asana: '#F06A6A',
-    trello: '#0079BF',
-    dropbox: '#0061FF',
-    's3': '#FF9900',
-    'aws-s3': '#FF9900',
-  };
-
-  const normalizedName = serviceName.toLowerCase().split('.')[0];
-  return colors[normalizedName] || '#6B7280';
-}