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

package/src/components/NodeInfoPanel.tsx

@@ -1,17 +1,57 @@
 import React, { useState } from 'react';
 import type { NodeState, NodeTypeDefinition } from '@principal-ai/principal-view-core';
+import { useTheme } from '@principal-ade/industry-theme';
 import { resolveIcon } from '../utils/iconResolver';
 
 // Common icons for the icon selector
 const COMMON_ICONS = [
-  'Settings', 'Database', 'Package', 'Server', 'Cloud', 'Globe',
-  'File', 'Folder', 'Code', 'Terminal', 'Cpu', 'HardDrive',
-  'Network', 'Wifi', 'Lock', 'Unlock', 'Key', 'Shield',
-  'User', 'Users', 'Mail', 'MessageSquare', 'Bell', 'Calendar',
-  'Clock', 'Timer', 'Zap', 'Activity', 'BarChart', 'PieChart',
-  'CheckCircle', 'XCircle', 'AlertCircle', 'Info', 'HelpCircle',
-  'Play', 'Pause', 'Square', 'Circle', 'Triangle', 'Hexagon',
-  'Box', 'Layers', 'GitBranch', 'GitCommit', 'GitMerge', 'GitPullRequest',
+  'Settings',
+  'Database',
+  'Package',
+  'Server',
+  'Cloud',
+  'Globe',
+  'File',
+  'Folder',
+  'Code',
+  'Terminal',
+  'Cpu',
+  'HardDrive',
+  'Network',
+  'Wifi',
+  'Lock',
+  'Unlock',
+  'Key',
+  'Shield',
+  'User',
+  'Users',
+  'Mail',
+  'MessageSquare',
+  'Bell',
+  'Calendar',
+  'Clock',
+  'Timer',
+  'Zap',
+  'Activity',
+  'BarChart',
+  'PieChart',
+  'CheckCircle',
+  'XCircle',
+  'AlertCircle',
+  'Info',
+  'HelpCircle',
+  'Play',
+  'Pause',
+  'Square',
+  'Circle',
+  'Triangle',
+  'Hexagon',
+  'Box',
+  'Layers',
+  'GitBranch',
+  'GitCommit',
+  'GitMerge',
+  'GitPullRequest',
 ];
 
 export interface NodeInfoPanelProps {
@@ -37,7 +77,10 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
   onDelete,
   onUpdate,
 }) => {
-  const color = typeDefinition?.color || '#888';
+  const { theme } = useTheme();
+
+  // Color priority: node data color > type definition color > theme primary
+  const nodeColor = (node.data?.color as string) || typeDefinition?.color || theme.colors.primary;
   const canEdit = Boolean(onUpdate);
 
   // Local state for UI
@@ -65,7 +108,29 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
 
   // Always show basic node data if no schema is defined
   const hasSchemaFields = displayFields.length > 0;
-  const nodeDataEntries = node.data ? Object.entries(node.data).filter(([key]) => !['icon', 'name', 'description', 'sources'].includes(key)) : [];
+  // Internal fields that should not be displayed in the popup
+  const internalFields = [
+    'icon',
+    'name',
+    'description',
+    'sources',
+    'color',
+    'stroke',
+    'width',
+    'height',
+    'canvasType',
+    'text',
+    'file',
+    'url',
+    'shape',
+    'states',
+    'actions',
+    'nodeType',
+  ];
+
+  const nodeDataEntries = node.data
+    ? Object.entries(node.data).filter(([key]) => !internalFields.includes(key))
+    : [];
 
   // Get sources from node data
   const sources = (node.data?.sources as string[]) || [];
@@ -91,26 +156,30 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
         position: 'absolute',
         top: '60px',
         right: '20px',
-        backgroundColor: 'white',
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
         borderRadius: '8px',
         boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
         padding: '16px',
         minWidth: '250px',
         maxWidth: '350px',
         zIndex: 1000,
+        border: `1px solid ${theme.colors.border}`,
       }}
     >
       {/* Header - shows node name */}
-      <div style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: '12px',
-        paddingBottom: '8px',
-        borderBottom: `2px solid ${color}`,
-      }}>
-        <div style={{ fontWeight: 'bold', fontSize: '14px' }}>
-          {node.data?.name || node.id}
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '12px',
+          paddingBottom: '8px',
+          borderBottom: `2px solid ${nodeColor}`,
+        }}
+      >
+        <div style={{ fontWeight: 'bold', fontSize: '14px', color: nodeColor }}>
+          {node.name || node.id}
         </div>
         <button
           onClick={onClose}
@@ -119,7 +188,7 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
             background: 'none',
             cursor: 'pointer',
             fontSize: '18px',
-            color: '#666',
+            color: theme.colors.textSecondary,
             padding: '0',
             width: '24px',
             height: '24px',
@@ -135,22 +204,17 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
       {/* Description - first field under header */}
       {node.data?.description && (
         <div style={{ marginBottom: '12px' }}>
-          <div style={{ fontSize: '10px', color: '#666', marginBottom: '4px' }}>
+          <div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}>
             Description
           </div>
-          <div style={{
-            fontSize: '12px',
-            color: '#333',
-          }}>
-            {String(node.data.description)}
-          </div>
+          <div style={{ fontSize: '12px' }}>{String(node.data.description)}</div>
         </div>
       )}
 
       {/* Sources - shown after description */}
       {sources.length > 0 && (
         <div style={{ marginBottom: '12px' }}>
-          <div style={{ fontSize: '10px', color: '#666', marginBottom: '4px' }}>
+          <div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}>
             Sources
           </div>
           <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
@@ -160,9 +224,9 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                 style={{
                   fontSize: '11px',
                   padding: '2px 8px',
-                  backgroundColor: '#f0f0f0',
+                  backgroundColor: theme.colors.muted,
                   borderRadius: '4px',
-                  color: '#555',
+                  color: theme.colors.textSecondary,
                 }}
               >
                 {source}
@@ -178,12 +242,12 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
         style={{
           width: '100%',
           padding: '8px',
-          backgroundColor: '#f5f5f5',
-          border: '1px solid #ddd',
+          backgroundColor: theme.colors.surface,
+          border: `1px solid ${theme.colors.border}`,
           borderRadius: '4px',
           cursor: 'pointer',
           fontSize: '12px',
-          color: '#666',
+          color: theme.colors.textSecondary,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -191,7 +255,12 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
           marginBottom: showDetails ? '12px' : '0',
         }}
       >
-        <span style={{ transform: showDetails ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}>
+        <span
+          style={{
+            transform: showDetails ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: 'transform 0.2s',
+          }}
+        >
           ▼
         </span>
         {showDetails ? 'Hide Details' : 'Show Details'}
@@ -202,7 +271,7 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
         <>
           {/* Icon Selector */}
           <div style={{ marginBottom: '12px' }}>
-            <div style={{ fontSize: '10px', color: '#666', marginBottom: '4px' }}>
+            <div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}>
               Icon
             </div>
             <div style={{ position: 'relative' }}>
@@ -214,20 +283,27 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                   alignItems: 'center',
                   gap: '8px',
                   padding: '6px 10px',
-                  backgroundColor: '#f5f5f5',
-                  border: canEdit ? '1px dashed #ccc' : '1px solid #eee',
+                  backgroundColor: theme.colors.surface,
+                  border: canEdit
+                    ? `1px dashed ${theme.colors.border}`
+                    : `1px solid ${theme.colors.border}`,
                   borderRadius: '4px',
                   cursor: canEdit ? 'pointer' : 'default',
                   fontSize: '12px',
                   width: '100%',
                   justifyContent: 'flex-start',
+                  color: theme.colors.text,
                 }}
               >
                 <span style={{ display: 'flex', alignItems: 'center' }}>
                   {resolveIcon(currentIcon, 18)}
                 </span>
                 <span>{currentIcon || 'No icon'}</span>
-                {canEdit && <span style={{ marginLeft: 'auto', color: '#999', fontSize: '10px' }}>✎</span>}
+                {canEdit && (
+                  <span style={{ marginLeft: 'auto', color: theme.colors.textMuted, fontSize: '10px' }}>
+                    ✎
+                  </span>
+                )}
               </button>
 
               {/* Icon Picker Dropdown */}
@@ -239,8 +315,8 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                     left: 0,
                     right: 0,
                     marginTop: '4px',
-                    backgroundColor: 'white',
-                    border: '1px solid #ddd',
+                    backgroundColor: theme.colors.background,
+                    border: `1px solid ${theme.colors.border}`,
                     borderRadius: '4px',
                     boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
                     padding: '8px',
@@ -256,20 +332,25 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                       gap: '4px',
                     }}
                   >
-                    {COMMON_ICONS.map(iconName => (
+                    {COMMON_ICONS.map((iconName) => (
                       <button
                         key={iconName}
                         onClick={() => handleIconSelect(iconName)}
                         title={iconName}
                         style={{
                           padding: '6px',
-                          border: currentIcon === iconName ? `2px solid ${color}` : '1px solid #eee',
+                          border:
+                            currentIcon === iconName
+                              ? `2px solid ${nodeColor}`
+                              : `1px solid ${theme.colors.border}`,
                           borderRadius: '4px',
-                          backgroundColor: currentIcon === iconName ? '#f0f7ff' : 'white',
+                          backgroundColor:
+                            currentIcon === iconName ? theme.colors.highlight : theme.colors.background,
                           cursor: 'pointer',
                           display: 'flex',
                           alignItems: 'center',
                           justifyContent: 'center',
+                          color: theme.colors.text,
                         }}
                       >
                         {resolveIcon(iconName, 16)}
@@ -283,7 +364,7 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
 
           {/* Node Type - Editable if availableNodeTypes provided */}
           <div style={{ marginBottom: '12px' }}>
-            <div style={{ fontSize: '10px', color: '#666', marginBottom: '4px' }}>
+            <div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}>
               Type
             </div>
             {canEdit && availableNodeTypes && Object.keys(availableNodeTypes).length > 1 ? (
@@ -294,8 +375,9 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                   fontSize: '12px',
                   padding: '4px 8px',
                   borderRadius: '4px',
-                  border: '1px solid #ccc',
-                  backgroundColor: 'white',
+                  border: `1px solid ${theme.colors.border}`,
+                  backgroundColor: theme.colors.background,
+                  color: theme.colors.text,
                   cursor: 'pointer',
                   width: '100%',
                 }}
@@ -307,14 +389,16 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
                 ))}
               </select>
             ) : (
-              <div style={{
-                fontSize: '12px',
-                padding: '4px 8px',
-                backgroundColor: color,
-                color: 'white',
-                borderRadius: '4px',
-                display: 'inline-block',
-              }}>
+              <div
+                style={{
+                  fontSize: '12px',
+                  padding: '4px 8px',
+                  backgroundColor: nodeColor,
+                  color: theme.colors.background,
+                  borderRadius: '4px',
+                  display: 'inline-block',
+                }}
+              >
                 {node.type}
               </div>
             )}
@@ -323,57 +407,88 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
           {/* Node State */}
           {node.state && (
             <div style={{ marginBottom: '12px' }}>
-              <div style={{ fontSize: '10px', color: '#666', marginBottom: '4px' }}>
+              <div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}>
                 State
               </div>
-              <div style={{
-                fontSize: '12px',
-                padding: '4px 8px',
-                backgroundColor: typeDefinition?.states?.[node.state]?.color || '#888',
-                color: 'white',
-                borderRadius: '4px',
-                display: 'inline-block',
-              }}>
+              <div
+                style={{
+                  fontSize: '12px',
+                  padding: '4px 8px',
+                  backgroundColor:
+                    typeDefinition?.states?.[node.state]?.color || theme.colors.secondary,
+                  color: theme.colors.background,
+                  borderRadius: '4px',
+                  display: 'inline-block',
+                }}
+              >
                 {typeDefinition?.states?.[node.state]?.label || node.state}
               </div>
             </div>
           )}
 
           {/* Display other schema-defined fields (non-editable for now) */}
-          {hasSchemaFields && displayFields.filter(f => f.field !== nameField).length > 0 && (
+          {hasSchemaFields && displayFields.filter((f) => f.field !== nameField).length > 0 && (
             <div style={{ marginBottom: '12px' }}>
-              <div style={{ fontSize: '10px', color: '#666', marginBottom: '8px', fontWeight: 'bold' }}>
+              <div
+                style={{
+                  fontSize: '10px',
+                  color: theme.colors.textSecondary,
+                  marginBottom: '8px',
+                  fontWeight: 'bold',
+                }}
+              >
                 Properties
               </div>
-              {displayFields.filter(f => f.field !== nameField).map(({ field, label, value }) => (
-                <div key={field} style={{ marginBottom: '8px' }}>
-                  <div style={{ fontSize: '10px', color: '#666', marginBottom: '2px' }}>
-                    {label}
-                  </div>
-                  <div style={{ fontSize: '12px', color: '#333' }}>
-                    {value !== undefined && value !== null
-                      ? typeof value === 'object'
-                        ? JSON.stringify(value, null, 2)
-                        : String(value)
-                      : '-'}
+              {displayFields
+                .filter((f) => f.field !== nameField)
+                .map(({ field, label, value }) => (
+                  <div key={field} style={{ marginBottom: '8px' }}>
+                    <div
+                      style={{
+                        fontSize: '10px',
+                        color: theme.colors.textSecondary,
+                        marginBottom: '2px',
+                      }}
+                    >
+                      {label}
+                    </div>
+                    <div style={{ fontSize: '12px' }}>
+                      {value !== undefined && value !== null
+                        ? typeof value === 'object'
+                          ? JSON.stringify(value, null, 2)
+                          : String(value)
+                        : '-'}
+                    </div>
                   </div>
-                </div>
-              ))}
+                ))}
             </div>
           )}
 
           {/* Show all node data if no schema is defined */}
           {!hasSchemaFields && nodeDataEntries.length > 0 && (
             <div style={{ marginBottom: '12px' }}>
-              <div style={{ fontSize: '10px', color: '#666', marginBottom: '8px', fontWeight: 'bold' }}>
+              <div
+                style={{
+                  fontSize: '10px',
+                  color: theme.colors.textSecondary,
+                  marginBottom: '8px',
+                  fontWeight: 'bold',
+                }}
+              >
                 Data
               </div>
               {nodeDataEntries.map(([key, value]) => (
                 <div key={key} style={{ marginBottom: '8px' }}>
-                  <div style={{ fontSize: '10px', color: '#666', marginBottom: '2px' }}>
+                  <div
+                    style={{
+                      fontSize: '10px',
+                      color: theme.colors.textSecondary,
+                      marginBottom: '2px',
+                    }}
+                  >
                     {key}
                   </div>
-                  <div style={{ fontSize: '12px', color: '#333', wordBreak: 'break-word' }}>
+                  <div style={{ fontSize: '12px', wordBreak: 'break-word' }}>
                     {value !== undefined && value !== null
                       ? typeof value === 'object'
                         ? JSON.stringify(value, null, 2)
@@ -386,7 +501,15 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
           )}
 
           {/* Metadata */}
-          <div style={{ fontSize: '10px', color: '#999', marginTop: '12px', paddingTop: '8px', borderTop: '1px solid #eee' }}>
+          <div
+            style={{
+              fontSize: '10px',
+              color: theme.colors.textMuted,
+              marginTop: '12px',
+              paddingTop: '8px',
+              borderTop: `1px solid ${theme.colors.border}`,
+            }}
+          >
             ID: {node.id}
           </div>
         </>
@@ -403,8 +526,8 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
             marginTop: '12px',
             width: '100%',
             padding: '8px 12px',
-            backgroundColor: '#dc3545',
-            color: 'white',
+            backgroundColor: theme.colors.error,
+            color: theme.colors.background,
             border: 'none',
             borderRadius: '4px',
             cursor: 'pointer',

package/src/edges/CustomEdge.tsx

@@ -36,7 +36,7 @@ export const CustomEdge: React.FC<EdgeProps<any>> = ({
     data: edgeData,
     animationType,
     animationDuration = 1000,
-    animationDirection = 'forward'
+    animationDirection = 'forward',
   } = edgeProps || ({} as CustomEdgeData);
 
   const [particlePosition, setParticlePosition] = useState(0);
@@ -64,7 +64,7 @@ export const CustomEdge: React.FC<EdgeProps<any>> = ({
 
   // Color priority: violations > edge data color > type definition color > default
   const edgeColor = edgeData?.color as string | undefined;
-  const color = hasViolations ? '#D0021B' : (edgeColor || typeDefinition.color || '#888');
+  const color = hasViolations ? '#D0021B' : edgeColor || typeDefinition.color || '#888';
   const width = typeDefinition.width || 2;
 
   // Get Bezier path
@@ -127,7 +127,8 @@ export const CustomEdge: React.FC<EdgeProps<any>> = ({
   const getParticleTransform = () => {
     if (!pathRef.current) {
       // Fallback to linear interpolation if path ref not available yet
-      const progress = animationDirection === 'backward' ? 1 - particlePosition / 100 : particlePosition / 100;
+      const progress =
+        animationDirection === 'backward' ? 1 - particlePosition / 100 : particlePosition / 100;
       const x = sourceX + (targetX - sourceX) * progress;
       const y = sourceY + (targetY - sourceY) * progress;
       return { x, y };
@@ -135,7 +136,8 @@ export const CustomEdge: React.FC<EdgeProps<any>> = ({
 
     // Use actual path to get point along the curve
     const pathLength = pathRef.current.getTotalLength();
-    const progress = animationDirection === 'backward' ? 1 - particlePosition / 100 : particlePosition / 100;
+    const progress =
+      animationDirection === 'backward' ? 1 - particlePosition / 100 : particlePosition / 100;
     const distance = pathLength * progress;
     const point = pathRef.current.getPointAtLength(distance);
 

package/src/edges/GenericEdge.tsx

@@ -19,12 +19,8 @@ export interface GenericEdgeProps {
  * Generic edge renderer that adapts based on EdgeTypeDefinition
  * TODO: Implement different styles, animations, and labels
  */
-export const GenericEdge: React.FC<GenericEdgeProps> = ({
-  id,
-  typeDefinition,
-  hasViolations,
-}) => {
-  const color = hasViolations ? 'red' : (typeDefinition.color || '#888');
+export const GenericEdge: React.FC<GenericEdgeProps> = ({ id, typeDefinition, hasViolations }) => {
+  const color = hasViolations ? 'red' : typeDefinition.color || '#888';
 
   return (
     <div>