machinaos 0.0.1

package/client/src/components/ui/MapSelector.tsx

@@ -0,0 +1,314 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { loadGoogleMaps } from '../../utils/googleMapsLoader';
+import { useAppTheme } from '../../hooks/useAppTheme';
+import { useTheme } from '../../contexts/ThemeContext';
+
+// Google Maps API Key from environment variable
+const GOOGLE_MAPS_API_KEY = (import.meta as any).env?.VITE_GOOGLE_MAPS_API_KEY || 'YOUR_API_KEY_HERE';
+
+interface MapSelectorProps {
+  initialLatitude?: number;
+  initialLongitude?: number;
+  onLocationSelect: (latitude: number, longitude: number) => void;
+  onClose: () => void;
+  apiKey?: string;
+}
+
+// Dark mode styles for Google Maps (Dracula-inspired)
+const darkMapStyles: google.maps.MapTypeStyle[] = [
+  { elementType: 'geometry', stylers: [{ color: '#242f3e' }] },
+  { elementType: 'labels.text.stroke', stylers: [{ color: '#242f3e' }] },
+  { elementType: 'labels.text.fill', stylers: [{ color: '#746855' }] },
+  { featureType: 'administrative.locality', elementType: 'labels.text.fill', stylers: [{ color: '#d59563' }] },
+  { featureType: 'poi', elementType: 'labels.text.fill', stylers: [{ color: '#d59563' }] },
+  { featureType: 'poi.park', elementType: 'geometry', stylers: [{ color: '#263c3f' }] },
+  { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{ color: '#6b9a76' }] },
+  { featureType: 'road', elementType: 'geometry', stylers: [{ color: '#38414e' }] },
+  { featureType: 'road', elementType: 'geometry.stroke', stylers: [{ color: '#212a37' }] },
+  { featureType: 'road', elementType: 'labels.text.fill', stylers: [{ color: '#9ca5b3' }] },
+  { featureType: 'road.highway', elementType: 'geometry', stylers: [{ color: '#746855' }] },
+  { featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{ color: '#1f2835' }] },
+  { featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{ color: '#f3d19c' }] },
+  { featureType: 'transit', elementType: 'geometry', stylers: [{ color: '#2f3948' }] },
+  { featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{ color: '#d59563' }] },
+  { featureType: 'water', elementType: 'geometry', stylers: [{ color: '#17263c' }] },
+  { featureType: 'water', elementType: 'labels.text.fill', stylers: [{ color: '#515c6d' }] },
+  { featureType: 'water', elementType: 'labels.text.stroke', stylers: [{ color: '#17263c' }] }
+];
+
+// Google Maps Component for Location Selection
+const GoogleMapsLocationPicker: React.FC<{
+  lat: number;
+  lng: number;
+  onLocationClick: (lat: number, lng: number) => void;
+  apiKey?: string;
+  isDarkMode: boolean;
+  theme: ReturnType<typeof useAppTheme>;
+}> = ({ lat, lng, onLocationClick, apiKey, isDarkMode, theme }) => {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapInstanceRef = useRef<google.maps.Map | null>(null);
+  const markerRef = useRef<google.maps.Marker | null>(null);
+
+  useEffect(() => {
+    if (!mapRef.current || !apiKey || apiKey === 'YOUR_API_KEY_HERE') return;
+
+    // Load Google Maps API using centralized loader
+    const loadAndInitialize = async () => {
+      try {
+        await loadGoogleMaps({
+          apiKey,
+          libraries: ['geometry']
+        });
+        initializeMap();
+      } catch (error) {
+        console.error('Failed to load Google Maps API:', error);
+      }
+    };
+
+    loadAndInitialize();
+
+    function initializeMap() {
+      if (!mapRef.current) return;
+
+      const mapOptions: google.maps.MapOptions = {
+        center: { lat, lng },
+        zoom: 15,
+        mapTypeId: google.maps.MapTypeId.ROADMAP,
+        clickableIcons: false,
+        disableDefaultUI: false,
+        zoomControl: true,
+        mapTypeControl: true,
+        streetViewControl: true,
+        fullscreenControl: true,
+        // Apply dark mode styles when in dark mode
+        styles: isDarkMode ? darkMapStyles : undefined
+      };
+
+      mapInstanceRef.current = new google.maps.Map(mapRef.current, mapOptions);
+
+      // Create marker
+      markerRef.current = new google.maps.Marker({
+        position: { lat, lng },
+        map: mapInstanceRef.current,
+        draggable: true,
+        title: 'Selected Location - Click or drag to change'
+      });
+
+      // Add click listeners
+      mapInstanceRef.current.addListener('click', (e: google.maps.MapMouseEvent) => {
+        if (e.latLng) {
+          const newLat = e.latLng.lat();
+          const newLng = e.latLng.lng();
+          onLocationClick(newLat, newLng);
+        }
+      });
+
+      // Add marker drag listener
+      markerRef.current.addListener('dragend', (e: google.maps.MapMouseEvent) => {
+        if (e.latLng) {
+          const newLat = e.latLng.lat();
+          const newLng = e.latLng.lng();
+          onLocationClick(newLat, newLng);
+        }
+      });
+    }
+  }, [apiKey, isDarkMode]);
+
+  // Update marker position when coordinates change
+  useEffect(() => {
+    if (markerRef.current && mapInstanceRef.current) {
+      const newPosition = { lat, lng };
+      markerRef.current.setPosition(newPosition);
+      mapInstanceRef.current.setCenter(newPosition);
+    }
+  }, [lat, lng]);
+
+  if (!apiKey || apiKey === 'YOUR_API_KEY_HERE') {
+    return (
+      <div style={{
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: theme.colors.backgroundAlt,
+        color: theme.colors.textSecondary,
+        fontSize: theme.fontSize.sm,
+        textAlign: 'center',
+        padding: theme.spacing.lg
+      }}>
+        Google Maps API key required for map display
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={mapRef}
+      style={{
+        height: '100%',
+        width: '100%'
+      }}
+    />
+  );
+};
+
+const MapSelector: React.FC<MapSelectorProps> = ({
+  initialLatitude = 37.7749,
+  initialLongitude = -122.4194,
+  onLocationSelect,
+  onClose,
+  apiKey = GOOGLE_MAPS_API_KEY
+}) => {
+  const theme = useAppTheme();
+  const { isDarkMode } = useTheme();
+  const [selectedPosition, setSelectedPosition] = useState<[number, number]>([
+    initialLatitude,
+    initialLongitude
+  ]);
+
+  const handleMapClick = useCallback((lat: number, lng: number) => {
+    setSelectedPosition([lat, lng]);
+    onLocationSelect(lat, lng);
+  }, [onLocationSelect]);
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          zIndex: 2000,
+          pointerEvents: 'none',
+        }}
+      />
+
+      {/* Close Button */}
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onClose();
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.backgroundColor = theme.dracula.red;
+          e.currentTarget.style.transform = 'scale(1.1)';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.backgroundColor = theme.dracula.pink;
+          e.currentTarget.style.transform = 'scale(1)';
+        }}
+        style={{
+          position: 'fixed',
+          top: 'calc(50% - 40vh + 10px)',
+          right: '60px',
+          width: '44px',
+          height: '44px',
+          borderRadius: '50%',
+          backgroundColor: theme.dracula.pink,
+          color: 'white',
+          border: 'none',
+          fontSize: '20px',
+          fontWeight: 'bold',
+          cursor: 'pointer',
+          boxShadow: `0 6px 16px ${theme.dracula.pink}60`,
+          zIndex: 2002,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'all 0.2s ease',
+        }}
+        title="Close Map Selector"
+      >
+        ✕
+      </button>
+
+      {/* Map Window */}
+      <div
+        style={{
+          position: 'fixed',
+          top: '50%',
+          left: '490px',
+          right: '50px',
+          transform: 'translateY(-50%)',
+          height: '80vh',
+          backgroundColor: theme.colors.backgroundPanel,
+          borderRadius: theme.borderRadius.lg,
+          boxShadow: theme.colors.shadowNode,
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          zIndex: 2001,
+          border: `1px solid ${theme.colors.border}`,
+        }}
+      >
+        {/* Header */}
+        <div style={{
+          padding: theme.spacing.md,
+          borderBottom: `1px solid ${theme.colors.border}`,
+          backgroundColor: theme.colors.backgroundAlt,
+        }}>
+          <h3 style={{
+            margin: 0,
+            fontSize: theme.fontSize.lg,
+            fontWeight: theme.fontWeight.semibold,
+            color: theme.colors.text
+          }}>
+            Select Location
+          </h3>
+          <p style={{
+            margin: `${theme.spacing.xs} 0 0 0`,
+            fontSize: theme.fontSize.sm,
+            color: theme.colors.textSecondary
+          }}>
+            Click on the map or drag the marker to select coordinates
+          </p>
+        </div>
+
+        {/* Coordinates Display */}
+        <div style={{
+          padding: theme.spacing.sm,
+          backgroundColor: theme.colors.background,
+          borderBottom: `1px solid ${theme.colors.border}`,
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}>
+          <div style={{
+            fontSize: theme.fontSize.sm,
+            fontFamily: 'monospace',
+            color: theme.colors.text,
+            fontWeight: theme.fontWeight.medium
+          }}>
+            {selectedPosition[0].toFixed(6)}, {selectedPosition[1].toFixed(6)}
+          </div>
+          <div style={{
+            fontSize: theme.fontSize.xs,
+            color: theme.colors.textSecondary,
+            fontStyle: 'italic'
+          }}>
+            Google Maps
+          </div>
+        </div>
+
+        {/* Map */}
+        <div style={{ flex: 1, position: 'relative' }}>
+          <GoogleMapsLocationPicker
+            lat={selectedPosition[0]}
+            lng={selectedPosition[1]}
+            onLocationClick={handleMapClick}
+            apiKey={apiKey}
+            isDarkMode={isDarkMode}
+            theme={theme}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MapSelector;

package/client/src/components/ui/Modal.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { useAppTheme } from '../../hooks/useAppTheme';
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  title?: string;
+  maxWidth?: string;
+  maxHeight?: string;
+  headerActions?: React.ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  children,
+  title,
+  maxWidth = '500px',
+  maxHeight = '80vh',
+  headerActions,
+}) => {
+  const theme = useAppTheme();
+  return (
+    <Dialog.Root open={isOpen}>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          style={{
+            position: 'fixed',
+            inset: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            backdropFilter: 'blur(2px)',
+            zIndex: 1000,
+          }}
+        />
+        <Dialog.Content
+          style={{
+            position: 'fixed',
+            top: '2.5vh',
+            left: '2.5vw',
+            backgroundColor: theme.colors.background,
+            borderRadius: theme.borderRadius.lg,
+            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+            width: maxWidth,
+            height: maxHeight,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+            zIndex: 1001,
+          }}
+        >
+          {title && (
+            <div
+              style={{
+                padding: `${theme.spacing.lg} ${theme.spacing.xl}`,
+                borderBottom: `1px solid ${theme.colors.border}`,
+                backgroundColor: theme.colors.backgroundPanel,
+                display: 'flex',
+                alignItems: 'center',
+                position: 'relative',
+                width: '100%'
+              }}
+            >
+              <Dialog.Title
+                style={{
+                  margin: 0,
+                  fontSize: theme.fontSize.lg,
+                  fontWeight: theme.fontWeight.semibold,
+                  color: theme.colors.textSecondary,
+                  position: 'absolute',
+                  left: theme.spacing.xl,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                }}
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.7 }}>
+                  <circle cx="12" cy="12" r="3"/>
+                  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                </svg>
+                {title}
+              </Dialog.Title>
+
+              {/* Centered header actions */}
+              <div style={{
+                flex: 1,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center'
+              }}>
+                {headerActions}
+              </div>
+
+              <Dialog.Close
+                onClick={onClose}
+                style={{
+                  background: 'transparent',
+                  border: 'none',
+                  fontSize: '20px',
+                  cursor: 'pointer',
+                  color: theme.colors.textSecondary,
+                  padding: theme.spacing.xs,
+                  borderRadius: theme.borderRadius.sm,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: '32px',
+                  height: '32px',
+                  position: 'absolute',
+                  right: theme.spacing.xl,
+                  transition: `all ${theme.transitions.fast}`,
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.backgroundColor = theme.colors.backgroundHover;
+                  e.currentTarget.style.color = theme.colors.text;
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.backgroundColor = 'transparent';
+                  e.currentTarget.style.color = theme.colors.textSecondary;
+                }}
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18"/>
+                  <line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+              </Dialog.Close>
+            </div>
+          )}
+          <Dialog.Description style={{ display: 'none' }}>
+            {title || 'Modal dialog'}
+          </Dialog.Description>
+          <div
+            style={{
+              flex: 1,
+              height: '100%',
+              overflowY: 'auto',
+              padding: 0,
+            }}
+          >
+            {children}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export default Modal;

package/client/src/components/ui/NodeContextMenu.tsx

@@ -0,0 +1,192 @@
+/**
+ * NodeContextMenu - Right-click context menu for nodes
+ *
+ * Provides actions: Rename, Copy, Delete
+ * Follows n8n-style UX patterns with keyboard shortcuts displayed
+ */
+import React, { useEffect, useRef, useCallback } from 'react';
+import { useAppTheme } from '../../hooks/useAppTheme';
+
+interface NodeContextMenuProps {
+  nodeId: string;
+  x: number;
+  y: number;
+  onClose: () => void;
+  onRename: () => void;
+  onCopy: () => void;
+  onDelete: () => void;
+}
+
+interface MenuItem {
+  label: string;
+  shortcut: string;
+  action: () => void;
+  icon: string;
+  danger?: boolean;
+}
+
+const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
+  nodeId: _nodeId,
+  x,
+  y,
+  onClose,
+  onRename,
+  onCopy,
+  onDelete,
+}) => {
+  const theme = useAppTheme();
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [focusedIndex, setFocusedIndex] = React.useState(0);
+
+  const menuItems: MenuItem[] = [
+    { label: 'Rename', shortcut: 'F2', action: onRename, icon: '✏️' },
+    { label: 'Copy', shortcut: 'Ctrl+C', action: onCopy, icon: '📋' },
+    { label: 'Delete', shortcut: 'Del', action: onDelete, icon: '🗑️', danger: true },
+  ];
+
+  // Calculate menu position to avoid overflow
+  const getMenuPosition = useCallback(() => {
+    const menuWidth = 180;
+    const menuHeight = menuItems.length * 36 + 16; // items + padding
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    let left = x;
+    let top = y;
+
+    // Prevent overflow on right
+    if (x + menuWidth > viewportWidth) {
+      left = viewportWidth - menuWidth - 8;
+    }
+
+    // Prevent overflow on bottom
+    if (y + menuHeight > viewportHeight) {
+      top = viewportHeight - menuHeight - 8;
+    }
+
+    return { left, top };
+  }, [x, y, menuItems.length]);
+
+  const position = getMenuPosition();
+
+  // Handle click outside to close
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    // Add listeners with small delay to avoid immediate close
+    const timeoutId = setTimeout(() => {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleEscape);
+    }, 0);
+
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [onClose]);
+
+  // Handle keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          setFocusedIndex((prev) => (prev + 1) % menuItems.length);
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          setFocusedIndex((prev) => (prev - 1 + menuItems.length) % menuItems.length);
+          break;
+        case 'Enter':
+          event.preventDefault();
+          menuItems[focusedIndex].action();
+          onClose();
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [focusedIndex, menuItems, onClose]);
+
+  // Focus the menu on mount
+  useEffect(() => {
+    menuRef.current?.focus();
+  }, []);
+
+  const handleItemClick = (item: MenuItem) => {
+    item.action();
+    onClose();
+  };
+
+  return (
+    <div
+      ref={menuRef}
+      tabIndex={-1}
+      style={{
+        position: 'fixed',
+        left: position.left,
+        top: position.top,
+        backgroundColor: theme.colors.backgroundElevated,
+        border: `1px solid ${theme.isDarkMode ? theme.colors.border : '#d1d5db'}`,
+        borderRadius: theme.borderRadius.lg,
+        boxShadow: theme.isDarkMode
+          ? `0 4px 12px ${theme.colors.shadow}`
+          : '0 4px 16px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08)',
+        padding: theme.spacing.xs,
+        zIndex: 10000,
+        minWidth: '160px',
+        outline: 'none',
+      }}
+    >
+      {menuItems.map((item, index) => (
+        <div
+          key={item.label}
+          onClick={() => handleItemClick(item)}
+          onMouseEnter={() => setFocusedIndex(index)}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+            borderRadius: theme.borderRadius.md,
+            cursor: 'pointer',
+            backgroundColor: focusedIndex === index
+              ? theme.colors.backgroundHover
+              : 'transparent',
+            color: item.danger ? theme.dracula.red : theme.colors.text,
+            fontSize: theme.fontSize.sm,
+            transition: theme.transitions.fast,
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: theme.spacing.sm }}>
+            <span style={{ fontSize: theme.fontSize.sm }}>{item.icon}</span>
+            <span style={{ fontWeight: theme.fontWeight.medium }}>{item.label}</span>
+          </div>
+          <span
+            style={{
+              fontSize: theme.fontSize.xs,
+              color: theme.colors.textMuted,
+              fontFamily: 'monospace',
+            }}
+          >
+            {item.shortcut}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default NodeContextMenu;