@principal-ai/subsystems-react 0.17.0 → 0.18.0

package/src/utils/animationMapping.ts

@@ -1,166 +0,0 @@
-/**
- * Animation mapping utilities
- *
- * Maps log levels and component events to appropriate animations
- * for Milestone 1 default visualization behavior
- */
-
-import type { LogLevel } from '@principal-ai/subsystems-core';
-
-/**
- * Node animation configuration
- */
-export interface NodeAnimation {
-  type: 'pulse' | 'flash' | 'shake' | 'entry';
-  duration: number;
-  intensity?: number; // 0-1 scale
-  color?: string;
-}
-
-/**
- * Edge animation configuration
- */
-export interface EdgeAnimation {
-  type: 'flow' | 'particle' | 'pulse' | 'glow';
-  duration: number;
-  direction?: 'forward' | 'backward' | 'bidirectional';
-  color?: string;
-}
-
-/**
- * Map log level to node animation
- *
- * Default behavior for Milestone 1:
- * - debug: subtle pulse (low intensity)
- * - info: standard pulse (medium intensity)
- * - warn: amber pulse (high intensity)
- * - error: red flash + shake
- */
-export function logLevelToNodeAnimation(level: LogLevel): NodeAnimation {
-  switch (level) {
-    case 'debug':
-      return {
-        type: 'pulse',
-        duration: 800,
-        intensity: 0.3,
-        color: '#94a3b8', // slate-400
-      };
-
-    case 'info':
-      return {
-        type: 'pulse',
-        duration: 1000,
-        intensity: 0.5,
-        color: '#3b82f6', // blue-500
-      };
-
-    case 'warn':
-      return {
-        type: 'pulse',
-        duration: 1200,
-        intensity: 1.0,
-        color: '#f59e0b', // amber-500
-      };
-
-    case 'error':
-      return {
-        type: 'flash', // More dramatic animation for errors
-        duration: 1500,
-        intensity: 1.0,
-        color: '#ef4444', // red-500
-      };
-  }
-}
-
-/**
- * Map component action to node animation (Milestone 2)
- */
-export function actionToNodeAnimation(_action: string, state?: string): NodeAnimation {
-  // Default mapping - can be overridden by configuration
-  switch (state) {
-    case 'acquired':
-    case 'active':
-    case 'processing':
-      return {
-        type: 'pulse',
-        duration: 1000,
-        intensity: 0.8,
-        color: '#22c55e', // green-500
-      };
-
-    case 'waiting':
-    case 'pending':
-      return {
-        type: 'pulse',
-        duration: 1500,
-        intensity: 0.5,
-        color: '#eab308', // yellow-500
-      };
-
-    case 'error':
-    case 'failed':
-      return {
-        type: 'shake',
-        duration: 600,
-        intensity: 1.0,
-        color: '#ef4444', // red-500
-      };
-
-    case 'completed':
-    case 'success':
-      return {
-        type: 'flash',
-        duration: 800,
-        intensity: 0.7,
-        color: '#22c55e', // green-500
-      };
-
-    default:
-      // Generic action animation
-      return {
-        type: 'pulse',
-        duration: 1000,
-        intensity: 0.6,
-        color: '#3b82f6', // blue-500
-      };
-  }
-}
-
-/**
- * Get animation config for edge based on action (Milestone 2)
- */
-export function actionToEdgeAnimation(_action: string, edgeConfig?: EdgeAnimation): EdgeAnimation {
-  // Use edge config if provided, otherwise default
-  return (
-    edgeConfig || {
-      type: 'flow',
-      duration: 2000,
-      direction: 'forward',
-    }
-  );
-}
-
-/**
- * Check if log level should trigger animation
- */
-export function shouldAnimate(level: LogLevel, minLevel: LogLevel = 'info'): boolean {
-  const levels: LogLevel[] = ['debug', 'info', 'warn', 'error'];
-  const minIndex = levels.indexOf(minLevel);
-  const currentIndex = levels.indexOf(level);
-
-  return currentIndex >= minIndex;
-}
-
-/**
- * Calculate animation intensity based on frequency
- * Used to adjust animation intensity when multiple logs occur rapidly
- */
-export function calculateIntensity(
-  baseIntensity: number,
-  eventCount: number,
-  _timeWindow: number = 1000
-): number {
-  // Reduce intensity if too many events in time window
-  const scaleFactor = Math.min(1.0, 5.0 / eventCount);
-  return Math.max(0.2, baseIntensity * scaleFactor);
-}

package/src/utils/canvasBounds.ts

@@ -1,146 +0,0 @@
-import type { ExtendedCanvas } from '@principal-ai/subsystems-core';
-
-export interface CanvasBounds {
-  minX: number;
-  minY: number;
-  maxX: number;
-  maxY: number;
-  width: number;
-  height: number;
-}
-
-const DEFAULT_NODE_WIDTH = 200;
-const DEFAULT_NODE_HEIGHT = 100;
-
-/**
- * Calculate the bounding box of all nodes in a canvas.
- * Returns the min/max coordinates and total dimensions.
- */
-export function getCanvasBounds(canvas: ExtendedCanvas): CanvasBounds {
-  if (!canvas.nodes || canvas.nodes.length === 0) {
-    return {
-      minX: 0,
-      minY: 0,
-      maxX: DEFAULT_NODE_WIDTH,
-      maxY: DEFAULT_NODE_HEIGHT,
-      width: DEFAULT_NODE_WIDTH,
-      height: DEFAULT_NODE_HEIGHT,
-    };
-  }
-
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-
-  for (const node of canvas.nodes) {
-    const x = node.x ?? 0;
-    const y = node.y ?? 0;
-    const width = node.width ?? DEFAULT_NODE_WIDTH;
-    const height = node.height ?? DEFAULT_NODE_HEIGHT;
-
-    minX = Math.min(minX, x);
-    minY = Math.min(minY, y);
-    maxX = Math.max(maxX, x + width);
-    maxY = Math.max(maxY, y + height);
-  }
-
-  return {
-    minX,
-    minY,
-    maxX,
-    maxY,
-    width: maxX - minX,
-    height: maxY - minY,
-  };
-}
-
-export interface Viewport {
-  x: number;
-  y: number;
-  zoom: number;
-}
-
-/**
- * Calculate the initial viewport to fit all nodes within a container.
- * This allows setting defaultViewport on ReactFlow to avoid the
- * "zoom in then animate out" effect.
- *
- * @param bounds - The bounding box of all nodes
- * @param containerWidth - Width of the container in pixels
- * @param containerHeight - Height of the container in pixels
- * @param options - Additional options for padding and zoom limits
- * @returns The viewport { x, y, zoom } to pass to ReactFlow's defaultViewport
- */
-export function calculateInitialViewport(
-  bounds: CanvasBounds,
-  containerWidth: number,
-  containerHeight: number,
-  options: {
-    padding?: number;
-    minZoom?: number;
-    maxZoom?: number;
-  } = {}
-): Viewport {
-  const { padding = 0.2, minZoom = 0.1, maxZoom = 1.5 } = options;
-
-  // Calculate the zoom level needed to fit the bounds within the container
-  // Account for padding by reducing the effective container size
-  const effectiveWidth = containerWidth * (1 - padding);
-  const effectiveHeight = containerHeight * (1 - padding);
-
-  const zoomX = effectiveWidth / bounds.width;
-  const zoomY = effectiveHeight / bounds.height;
-
-  // Use the smaller zoom to ensure both dimensions fit
-  let zoom = Math.min(zoomX, zoomY);
-
-  // Clamp to min/max zoom
-  zoom = Math.max(minZoom, Math.min(maxZoom, zoom));
-
-  // Calculate the center of the bounds
-  const boundsCenterX = bounds.minX + bounds.width / 2;
-  const boundsCenterY = bounds.minY + bounds.height / 2;
-
-  // Calculate viewport position to center the bounds
-  // ReactFlow viewport x,y represent the offset of the canvas origin from the container's top-left
-  const x = containerWidth / 2 - boundsCenterX * zoom;
-  const y = containerHeight / 2 - boundsCenterY * zoom;
-
-  return { x, y, zoom };
-}
-
-/**
- * Calculate a recommended display size for a canvas cell.
- * Adds padding and enforces minimum dimensions.
- */
-export function getCanvasDisplaySize(
-  canvas: ExtendedCanvas,
-  options: {
-    padding?: number;
-    minWidth?: number;
-    minHeight?: number;
-    maxWidth?: number;
-    maxHeight?: number;
-  } = {}
-): { width: number; height: number } {
-  const {
-    padding = 100,
-    minWidth = 300,
-    minHeight = 200,
-    maxWidth = 1200,
-    maxHeight = 800,
-  } = options;
-
-  const bounds = getCanvasBounds(canvas);
-
-  // Add padding to content dimensions
-  const contentWidth = bounds.width + padding * 2;
-  const contentHeight = bounds.height + padding * 2;
-
-  // Clamp to min/max
-  const width = Math.min(maxWidth, Math.max(minWidth, contentWidth));
-  const height = Math.min(maxHeight, Math.max(minHeight, contentHeight));
-
-  return { width, height };
-}

package/src/utils/graphConverter.ts

@@ -1,148 +0,0 @@
-import { MarkerType, type Node, type Edge } from '@xyflow/react';
-import type {
-  NodeState,
-  EdgeState,
-  GraphConfiguration,
-  Violation,
-} from '@principal-ai/subsystems-core';
-import type { CustomNodeData } from '../nodes/CustomNode';
-import type { CustomEdgeData } from '../edges/CustomEdge';
-
-/**
- * Convert our NodeState to xyflow Node format
- */
-export function convertToXYFlowNodes(
-  nodes: NodeState[],
-  configuration: GraphConfiguration,
-  violations: Violation[] = []
-): Node<CustomNodeData>[] {
-  return nodes.map((node) => {
-    let typeDefinition = configuration.nodeTypes[node.type];
-
-    // Warn if node type is not defined in configuration
-    if (!typeDefinition) {
-      console.warn(`Node type "${node.type}" not found in configuration for node "${node.id}"`);
-      // Provide minimal typeDefinition with global states fallback to prevent undefined errors
-      typeDefinition = {
-        description: '',
-        shape: 'rectangle',
-        dataSchema: {},
-        states: configuration.states,
-      };
-    } else if (!typeDefinition.states && configuration.states) {
-      // If typeDefinition exists but has no states, use global states as fallback
-      typeDefinition = {
-        ...typeDefinition,
-        states: configuration.states,
-      };
-    }
-
-    const hasViolations = violations.some((v) => v.context?.nodeId === node.id);
-
-    // Groups should render behind other nodes and edges
-    const isGroup = node.data?.canvasType === 'group';
-
-    return {
-      id: node.id,
-      type: 'custom',
-      position: node.position || { x: 0, y: 0 },
-      // Groups have lower zIndex to render behind other nodes
-      // Use 1 for groups, 100 for regular nodes (positive values to avoid event handling issues)
-      zIndex: isGroup ? 1 : 100,
-      // Apply persisted dimensions if available
-      ...(node.width !== undefined ? { width: node.width } : {}),
-      ...(node.height !== undefined ? { height: node.height } : {}),
-      data: {
-        name: node.name || node.id,
-        typeDefinition,
-        state: node.state,
-        hasViolations,
-        data: node.data,
-      },
-    };
-  });
-}
-
-/** Extended edge state with optional handle information for ReactFlow */
-export interface EdgeStateWithHandles extends EdgeState {
-  sourceHandle?: string;
-  targetHandle?: string;
-}
-
-/**
- * Map canvas side to source handle ID
- * Source handles use '-out' suffix
- */
-function sideToSourceHandle(side?: string): string | undefined {
-  if (!side) return undefined;
-  return `${side}-out`;
-}
-
-/**
- * Map canvas side to target handle ID
- * Target handles use the side name directly
- */
-function sideToTargetHandle(side?: string): string | undefined {
-  return side;
-}
-
-/**
- * Convert our EdgeState to xyflow Edge format
- */
-export function convertToXYFlowEdges(
-  edges: (EdgeState | EdgeStateWithHandles)[],
-  configuration: GraphConfiguration,
-  violations: Violation[] = []
-): Edge<CustomEdgeData>[] {
-  return edges.map((edge) => {
-    const typeDefinition = configuration.edgeTypes[edge.type];
-
-    // Warn if edge type is not defined in configuration
-    if (!typeDefinition) {
-      console.warn(`Edge type "${edge.type}" not found in configuration for edge "${edge.id}"`);
-    }
-
-    const hasViolations = violations.some((v) => v.context?.edgeId === edge.id);
-    const edgeWithHandles = edge as EdgeStateWithHandles;
-
-    // Get handle IDs from edge data (fromSide/toSide) or explicit handles
-    // If no side specified, default to right->left for left-to-right flow
-    const fromSide = edge.data?.fromSide as string | undefined;
-    const toSide = edge.data?.toSide as string | undefined;
-    const sourceHandle = edgeWithHandles.sourceHandle || sideToSourceHandle(fromSide || 'right');
-    const targetHandle = edgeWithHandles.targetHandle || sideToTargetHandle(toSide || 'left');
-
-    // Add arrow marker if edge type is directed
-    // Color priority: edge data color > type definition color > default
-    const edgeColor = edge.data?.color as string | undefined;
-    const markerEnd =
-      typeDefinition?.directed !== false
-        ? {
-            type: MarkerType.ArrowClosed,
-            color: edgeColor || typeDefinition?.color || '#888',
-            width: 20,
-            height: 20,
-          }
-        : undefined;
-
-    return {
-      id: edge.id,
-      source: edge.from,
-      target: edge.to,
-      sourceHandle,
-      targetHandle,
-      type: 'custom',
-      // Edges should render above groups (zIndex: 1) but below regular nodes (zIndex: 100)
-      zIndex: 50,
-      animated: typeDefinition?.style === 'animated',
-      markerEnd,
-      data: {
-        typeDefinition,
-        hasViolations,
-        data: edge.data,
-        edgeType: edge.type,
-      },
-    };
-  });
-}
-

package/src/utils/iconResolver.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import * as LucideIcons from 'lucide-react';
-
-/**
- * Icon Resolver
- *
- * Resolves icon strings to React components. Supports:
- * 1. Lucide icon names (e.g., "Database", "Settings", "Package")
- * 2. Emoji/Unicode strings (e.g., "⚙️", "💾", "📦")
- *
- * This keeps configurations JSON-serializable while supporting icon libraries.
- */
-
-export interface IconProps {
-  icon?: string;
-  size?: number;
-  className?: string;
-}
-
-/**
- * Resolves an icon string to a React element
- *
- * @param icon - Icon name (Lucide) or emoji/text string
- * @param size - Icon size in pixels (default: 20)
- * @param className - Optional CSS class
- * @returns React element or null
- */
-export function resolveIcon(icon?: string, size: number = 20, className?: string): React.ReactNode {
-  if (!icon) return null;
-
-  // Try to resolve as Lucide icon first
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const LucideIcon = (LucideIcons as any)[icon];
-
-  // Check if it's a valid React component (function or object with $$typeof)
-  if (LucideIcon && (typeof LucideIcon === 'function' || typeof LucideIcon === 'object')) {
-    return <LucideIcon size={size} className={className} />;
-  }
-
-  // Fall back to rendering as text (emoji or unicode)
-  return (
-    <span className={className} style={{ fontSize: `${size}px` }}>
-      {icon}
-    </span>
-  );
-}
-
-/**
- * Icon component that resolves icon strings
- */
-export const Icon: React.FC<IconProps> = ({ icon, size = 20, className }) => {
-  return <>{resolveIcon(icon, size, className)}</>;
-};

package/src/utils/orientationUtils.ts

@@ -1,73 +0,0 @@
-import type { NodeState, EdgeState, CanvasSide } from '@principal-ai/subsystems-core';
-
-/**
- * Swaps the orientation of a graph from horizontal to vertical or vice versa.
- * This swaps x/y coordinates and adjusts edge connection sides accordingly.
- */
-export function swapGraphOrientation(
-  nodes: NodeState[],
-  edges: EdgeState[]
-): { nodes: NodeState[]; edges: EdgeState[] } {
-  return {
-    nodes: swapNodePositions(nodes),
-    edges: swapEdgeSides(edges),
-  };
-}
-
-/**
- * Swaps x and y positions for all nodes
- */
-export function swapNodePositions(nodes: NodeState[]): NodeState[] {
-  return nodes.map(node => ({
-    ...node,
-    position: node.position ? {
-      x: node.position.y,
-      y: node.position.x,
-    } : undefined,
-  }));
-}
-
-/**
- * Swaps edge connection sides to match the new orientation
- * Both sides rotate clockwise: top → right → bottom → left → top
- */
-export function swapEdgeSides(edges: EdgeState[]): EdgeState[] {
-  return edges.map(edge => {
-    const data = edge.data as Record<string, unknown> | undefined;
-    const fromSide = data?.fromSide as CanvasSide | undefined;
-    const toSide = data?.toSide as CanvasSide | undefined;
-
-    const rotatedFromSide = rotateClockwise(fromSide);
-    const rotatedToSide = rotateClockwise(toSide);
-
-    // Only include fromSide/toSide if they have defined values (not undefined)
-    const newData = { ...edge.data } as Record<string, unknown>;
-    if (rotatedFromSide !== undefined) {
-      newData.fromSide = rotatedFromSide;
-    }
-    if (rotatedToSide !== undefined) {
-      newData.toSide = rotatedToSide;
-    }
-
-    return {
-      ...edge,
-      data: newData as EdgeState['data'],
-    };
-  });
-}
-
-/**
- * Rotates a side clockwise: top → right → bottom → left → top
- */
-function rotateClockwise(side?: CanvasSide): CanvasSide | undefined {
-  if (!side) return undefined;
-
-  const clockwiseMap: Record<CanvasSide, CanvasSide> = {
-    top: 'right',
-    right: 'bottom',
-    bottom: 'left',
-    left: 'top',
-  };
-
-  return clockwiseMap[side];
-}