@principal-ai/principal-view-react 0.6.9 → 0.6.11

package/src/hooks/usePathBasedEvents.ts

@@ -10,14 +10,14 @@ import type {
   ComponentActivityEvent,
   ComponentActionEvent,
   EdgeAnimationEvent,
-  PathBasedEvent
+  PathBasedEvent,
 } from '@principal-ai/principal-view-core';
 import {
   logLevelToNodeAnimation,
   actionToNodeAnimation,
   actionToEdgeAnimation,
   type NodeAnimation,
-  type EdgeAnimation
+  type EdgeAnimation,
 } from '../utils/animationMapping';
 
 /**
@@ -52,53 +52,62 @@ export function usePathBasedEvents({
   events,
   callbacks,
   onEventProcessed,
-  minLogLevel = 'info'
+  minLogLevel = 'info',
 }: UsePathBasedEventsOptions): void {
   const { onNodeAnimation, onEdgeAnimation } = callbacks;
 
   // Process component activity events (Milestone 1)
-  const processActivityEvent = useCallback((event: ComponentActivityEvent) => {
-    // Map log level to animation
-    const animation = logLevelToNodeAnimation(event.level);
-
-    // Trigger node animation
-    onNodeAnimation(event.componentId, {
-      ...animation,
-      timestamp: event.timestamp
-    });
-
-    onEventProcessed?.(event);
-  }, [onNodeAnimation, onEventProcessed]);
+  const processActivityEvent = useCallback(
+    (event: ComponentActivityEvent) => {
+      // Map log level to animation
+      const animation = logLevelToNodeAnimation(event.level);
+
+      // Trigger node animation
+      onNodeAnimation(event.componentId, {
+        ...animation,
+        timestamp: event.timestamp,
+      });
+
+      onEventProcessed?.(event);
+    },
+    [onNodeAnimation, onEventProcessed]
+  );
 
   // Process component action events (Milestone 2)
-  const processActionEvent = useCallback((event: ComponentActionEvent) => {
-    // Map action/state to animation
-    const animation = actionToNodeAnimation(event.action, event.state);
-
-    // Trigger node animation
-    onNodeAnimation(event.componentId, {
-      ...animation,
-      timestamp: event.timestamp
-    });
-
-    onEventProcessed?.(event);
-  }, [onNodeAnimation, onEventProcessed]);
+  const processActionEvent = useCallback(
+    (event: ComponentActionEvent) => {
+      // Map action/state to animation
+      const animation = actionToNodeAnimation(event.action, event.state);
+
+      // Trigger node animation
+      onNodeAnimation(event.componentId, {
+        ...animation,
+        timestamp: event.timestamp,
+      });
+
+      onEventProcessed?.(event);
+    },
+    [onNodeAnimation, onEventProcessed]
+  );
 
   // Process edge animation events (Milestone 2)
-  const processEdgeAnimationEvent = useCallback((event: EdgeAnimationEvent) => {
-    const animation = actionToEdgeAnimation(event.triggeredBy?.action || 'unknown', {
-      type: event.animation,
-      duration: event.duration,
-      direction: event.direction
-    });
-
-    onEdgeAnimation(event.edgeId, {
-      ...animation,
-      timestamp: event.timestamp
-    });
-
-    onEventProcessed?.(event);
-  }, [onEdgeAnimation, onEventProcessed]);
+  const processEdgeAnimationEvent = useCallback(
+    (event: EdgeAnimationEvent) => {
+      const animation = actionToEdgeAnimation(event.triggeredBy?.action || 'unknown', {
+        type: event.animation,
+        duration: event.duration,
+        direction: event.direction,
+      });
+
+      onEdgeAnimation(event.edgeId, {
+        ...animation,
+        timestamp: event.timestamp,
+      });
+
+      onEventProcessed?.(event);
+    },
+    [onEdgeAnimation, onEventProcessed]
+  );
 
   // Process events when they change
   useEffect(() => {
@@ -149,7 +158,7 @@ export function processBatchEvents(
           const animation = logLevelToNodeAnimation(event.level);
           callbacks.onNodeAnimation(event.componentId, {
             ...animation,
-            timestamp: event.timestamp
+            timestamp: event.timestamp,
           });
         }
         break;
@@ -159,7 +168,7 @@ export function processBatchEvents(
           const animation = actionToNodeAnimation(event.action, event.state);
           callbacks.onNodeAnimation(event.componentId, {
             ...animation,
-            timestamp: event.timestamp
+            timestamp: event.timestamp,
           });
         }
         break;
@@ -169,11 +178,11 @@ export function processBatchEvents(
           const animation = actionToEdgeAnimation(event.triggeredBy?.action || 'unknown', {
             type: event.animation,
             duration: event.duration,
-            direction: event.direction
+            direction: event.direction,
           });
           callbacks.onEdgeAnimation(event.edgeId, {
             ...animation,
-            timestamp: event.timestamp
+            timestamp: event.timestamp,
           });
         }
         break;

package/src/index.ts

@@ -30,7 +30,12 @@ export type {
 
 // Export components
 export { GraphRenderer } from './components/GraphRenderer';
-export type { GraphRendererProps, GraphRendererHandle, NodePositionChange, PendingChanges } from './components/GraphRenderer';
+export type {
+  GraphRendererProps,
+  GraphRendererHandle,
+  NodePositionChange,
+  PendingChanges,
+} from './components/GraphRenderer';
 
 export { EventLog } from './components/EventLog';
 export type { EventLogProps } from './components/EventLog';
@@ -61,7 +66,11 @@ export { CustomEdge } from './edges/CustomEdge';
 export type { CustomEdgeData } from './edges/CustomEdge';
 
 // Export utilities
-export { convertToXYFlowNodes, convertToXYFlowEdges, autoLayoutNodes } from './utils/graphConverter';
+export {
+  convertToXYFlowNodes,
+  convertToXYFlowEdges,
+  autoLayoutNodes,
+} from './utils/graphConverter';
 export type { EdgeStateWithHandles } from './utils/graphConverter';
 export { Icon, resolveIcon } from './utils/iconResolver';
 export type { IconProps } from './utils/iconResolver';

package/src/nodes/CustomNode.tsx

@@ -37,9 +37,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
   if (!typeDefinition) {
     return (
       <div style={{ padding: '10px', border: '2px solid red', borderRadius: '4px' }}>
-        <div style={{ fontSize: '12px', color: 'red' }}>
-          Error: Missing node type definition
-        </div>
+        <div style={{ fontSize: '12px', color: 'red' }}>Error: Missing node type definition</div>
       </div>
     );
   }
@@ -49,8 +47,11 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
   const nodeDataColor = nodeData.color as string | undefined;
   const baseColor = nodeDataColor || typeDefinition.color || '#888';
   // Check node's own states first (from pv.states), then fall back to type definition states
-  const nodeDataStates = nodeData.states as Record<string, { color?: string; label?: string; icon?: string }> | undefined;
-  const stateColor = state && (nodeDataStates?.[state]?.color || typeDefinition.states?.[state]?.color);
+  const nodeDataStates = nodeData.states as
+    | Record<string, { color?: string; label?: string; icon?: string }>
+    | undefined;
+  const stateColor =
+    state && (nodeDataStates?.[state]?.color || typeDefinition.states?.[state]?.color);
   const fillColor = stateColor || baseColor;
 
   // Get stroke color - priority: node data stroke > type definition stroke > fill color
@@ -64,9 +65,10 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
   const displayName = nodeProps.name;
 
   // Icon priority: node data override > state icon (node data states first) > type definition icon
-  const icon = (nodeData.icon as string)
-    || (state && (nodeDataStates?.[state]?.icon || typeDefinition.states?.[state]?.icon))
-    || typeDefinition.icon;
+  const icon =
+    (nodeData.icon as string) ||
+    (state && (nodeDataStates?.[state]?.icon || typeDefinition.states?.[state]?.icon)) ||
+    typeDefinition.icon;
 
   // Get animation class based on type
   const getAnimationClass = () => {
@@ -86,11 +88,14 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
 
   const animationClass = getAnimationClass();
 
+  // Check if this is a group node
+  const isGroup = nodeData.canvasType === 'group';
+
   // Shape-specific styles
   const getShapeStyles = () => {
     const baseStyles = {
       padding: '12px 16px',
-      backgroundColor: 'white',
+      backgroundColor: isGroup ? 'rgba(255, 255, 255, 0.7)' : 'white',
       color: '#000',
       border: `2px solid ${hasViolations ? '#D0021B' : strokeColor}`,
       fontSize: '12px',
@@ -100,7 +105,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
       display: 'flex',
       flexDirection: 'column' as const,
       alignItems: 'center',
-      justifyContent: 'center',
+      justifyContent: isGroup ? 'flex-start' : 'center',
       gap: '4px',
       boxShadow: selected ? `0 0 0 2px ${strokeColor}` : '0 2px 4px rgba(0,0,0,0.1)',
       transition: 'all 0.2s ease',
@@ -156,47 +161,53 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
   // Hexagon with gentle diagonals
   const hexagonClipPath = 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)';
   const hexagonBorderWidth = 2;
-  const hexagonBorderStyle: React.CSSProperties = isHexagon ? {
-    position: 'relative',
-    clipPath: hexagonClipPath,
-    backgroundColor: hasViolations ? '#D0021B' : strokeColor,
-    width: typeDefinition.size?.width || 120,
-    height: typeDefinition.size?.height || 120,
-    boxShadow: selected ? `0 0 0 2px ${strokeColor}` : '0 2px 4px rgba(0,0,0,0.1)',
-    transition: 'all 0.2s ease',
-  } : {};
+  const hexagonBorderStyle: React.CSSProperties = isHexagon
+    ? {
+        position: 'relative',
+        clipPath: hexagonClipPath,
+        backgroundColor: hasViolations ? '#D0021B' : strokeColor,
+        width: typeDefinition.size?.width || 120,
+        height: typeDefinition.size?.height || 120,
+        boxShadow: selected ? `0 0 0 2px ${strokeColor}` : '0 2px 4px rgba(0,0,0,0.1)',
+        transition: 'all 0.2s ease',
+      }
+    : {};
 
   // Hexagon inner fill styles (white background inset from border)
-  const hexagonInnerStyle: React.CSSProperties = isHexagon ? {
-    position: 'absolute',
-    top: hexagonBorderWidth,
-    left: hexagonBorderWidth,
-    right: hexagonBorderWidth,
-    bottom: hexagonBorderWidth,
-    clipPath: hexagonClipPath,
-    backgroundColor: 'white',
-    color: '#000',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '12px',
-    fontWeight: 500,
-    gap: '4px',
-  } : {};
+  const hexagonInnerStyle: React.CSSProperties = isHexagon
+    ? {
+        position: 'absolute',
+        top: hexagonBorderWidth,
+        left: hexagonBorderWidth,
+        right: hexagonBorderWidth,
+        bottom: hexagonBorderWidth,
+        clipPath: hexagonClipPath,
+        backgroundColor: 'white',
+        color: '#000',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '12px',
+        fontWeight: 500,
+        gap: '4px',
+      }
+    : {};
 
   // Handle styles - larger and more visible in edit mode
-  const baseHandleStyle = editable ? {
-    background: color,
-    width: 12,
-    height: 12,
-    border: '2px solid white',
-    boxShadow: '0 0 0 1px ' + color,
-  } : {
-    background: color,
-    width: 8,
-    height: 8,
-  };
+  const baseHandleStyle = editable
+    ? {
+        background: color,
+        width: 12,
+        height: 12,
+        border: '2px solid white',
+        boxShadow: '0 0 0 1px ' + color,
+      }
+    : {
+        background: color,
+        width: 8,
+        height: 8,
+      };
 
   // Diamond handles need to be offset to reach the tips of the rotated shape
   // A 45° rotated square has tips at ~41% beyond the original edges
@@ -235,51 +246,42 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
   return (
     <>
       {/* Input handles - multiple connection points */}
-      <Handle
-        type="target"
-        position={Position.Top}
-        id="top"
-        style={getHandleStyle('top')}
-      />
-      <Handle
-        type="target"
-        position={Position.Left}
-        id="left"
-        style={getHandleStyle('left')}
-      />
-      <Handle
-        type="target"
-        position={Position.Right}
-        id="right"
-        style={getHandleStyle('right')}
-      />
+      <Handle type="target" position={Position.Top} id="top" style={getHandleStyle('top')} />
+      <Handle type="target" position={Position.Left} id="left" style={getHandleStyle('left')} />
+      <Handle type="target" position={Position.Right} id="right" style={getHandleStyle('right')} />
 
       {/* Hexagon needs a wrapper for proper border rendering */}
       {isHexagon ? (
         <div style={hexagonBorderStyle} className={animationClass}>
           <div style={hexagonInnerStyle}>
-            {icon && <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{resolveIcon(icon, 20)}</div>}
-            <div style={{ textAlign: 'center', wordBreak: 'break-word' }}>
-              {displayName}
-            </div>
+            {icon && (
+              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                {resolveIcon(icon, 20)}
+              </div>
+            )}
+            <div style={{ textAlign: 'center', wordBreak: 'break-word' }}>{displayName}</div>
             {state && (
-              <div style={{
-                fontSize: '10px',
-                backgroundColor: color,
-                color: 'white',
-                padding: '2px 6px',
-                borderRadius: '4px',
-                textAlign: 'center',
-              }}>
+              <div
+                style={{
+                  fontSize: '10px',
+                  backgroundColor: color,
+                  color: 'white',
+                  padding: '2px 6px',
+                  borderRadius: '4px',
+                  textAlign: 'center',
+                }}
+              >
                 {nodeDataStates?.[state]?.label || typeDefinition.states?.[state]?.label || state}
               </div>
             )}
             {hasViolations && (
-              <div style={{
-                fontSize: '10px',
-                color: '#D0021B',
-                fontWeight: 'bold',
-              }}>
+              <div
+                style={{
+                  fontSize: '10px',
+                  color: '#D0021B',
+                  fontWeight: 'bold',
+                }}
+              >
                 ⚠️
               </div>
             )}
@@ -288,29 +290,58 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
       ) : (
         <div style={getShapeStyles()} className={animationClass}>
           {/* Inner content (rotated back if diamond) */}
-          <div style={isDiamond ? { transform: 'rotate(-45deg)' } : {}}>
-            {icon && <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{resolveIcon(icon, 20)}</div>}
-            <div style={{ textAlign: 'center', wordBreak: 'break-word' }}>
-              {displayName}
-            </div>
+          <div
+            style={{
+              ...(isDiamond ? { transform: 'rotate(-45deg)' } : {}),
+              ...(isGroup ? { width: '100%' } : {}),
+            }}
+          >
+            {/* Groups: icon and text inline, centered */}
+            {isGroup ? (
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: '6px',
+                  width: '100%',
+                }}
+              >
+                {icon && resolveIcon(icon, 18)}
+                <div style={{ wordBreak: 'break-word' }}>{displayName}</div>
+              </div>
+            ) : (
+              <>
+                {icon && (
+                  <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                    {resolveIcon(icon, 20)}
+                  </div>
+                )}
+                <div style={{ textAlign: 'center', wordBreak: 'break-word' }}>{displayName}</div>
+              </>
+            )}
             {state && (
-              <div style={{
-                fontSize: '10px',
-                backgroundColor: color,
-                color: 'white',
-                padding: '2px 6px',
-                borderRadius: '4px',
-                textAlign: 'center',
-              }}>
+              <div
+                style={{
+                  fontSize: '10px',
+                  backgroundColor: color,
+                  color: 'white',
+                  padding: '2px 6px',
+                  borderRadius: '4px',
+                  textAlign: 'center',
+                }}
+              >
                 {nodeDataStates?.[state]?.label || typeDefinition.states?.[state]?.label || state}
               </div>
             )}
             {hasViolations && (
-              <div style={{
-                fontSize: '10px',
-                color: '#D0021B',
-                fontWeight: 'bold',
-              }}>
+              <div
+                style={{
+                  fontSize: '10px',
+                  color: '#D0021B',
+                  fontWeight: 'bold',
+                }}
+              >
                 ⚠️
               </div>
             )}
@@ -325,12 +356,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected }) => {
         id="bottom"
         style={getHandleStyle('bottom')}
       />
-      <Handle
-        type="source"
-        position={Position.Left}
-        id="left-out"
-        style={getHandleStyle('left')}
-      />
+      <Handle type="source" position={Position.Left} id="left-out" style={getHandleStyle('left')} />
       <Handle
         type="source"
         position={Position.Right}

package/src/nodes/GenericNode.tsx

@@ -29,9 +29,10 @@ export const GenericNode: React.FC<GenericNodeProps> = ({
   hasViolations,
 }) => {
   // Get color based on state or default
-  const color = state && typeDefinition.states?.[state]?.color
-    ? typeDefinition.states[state].color
-    : typeDefinition.color || '#888';
+  const color =
+    state && typeDefinition.states?.[state]?.color
+      ? typeDefinition.states[state].color
+      : typeDefinition.color || '#888';
 
   return (
     <div