@principal-ai/principal-view-react 0.8.0 → 0.8.2

package/src/components/NodeInfoPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import type { NodeState, NodeTypeDefinition, JsonValue } from '@principal-ai/principal-view-core/browser';
+import type { NodeState, NodeTypeDefinition, JsonValue } from '@principal-ai/principal-view-core';
 import { useTheme } from '@principal-ade/industry-theme';
 import { resolveIcon } from '../utils/iconResolver';
 
@@ -164,17 +164,17 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
     <div
       style={{
         position: 'absolute',
-        top: '60px',
-        right: '20px',
+        bottom: 0,
+        left: 0,
+        right: 0,
         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',
+        borderTop: `2px solid ${nodeColor}`,
+        boxShadow: '0 -4px 12px rgba(0,0,0,0.15)',
+        padding: '16px 24px',
         zIndex: 1000,
-        border: `1px solid ${theme.colors.border}`,
+        maxHeight: '40%',
+        overflowY: 'auto',
       }}
     >
       {/* Header - shows node name */}
@@ -182,14 +182,17 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
         style={{
           display: 'flex',
           justifyContent: 'space-between',
-          alignItems: 'center',
-          marginBottom: '12px',
-          paddingBottom: '8px',
-          borderBottom: `2px solid ${nodeColor}`,
+          alignItems: 'flex-start',
+          marginBottom: '16px',
         }}
       >
-        <div style={{ fontWeight: theme.fontWeights.bold, fontSize: theme.fontSizes[1], fontFamily: theme.fonts.body, color: nodeColor }}>
-          {node.name || node.id}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: 1 }}>
+          <div style={{ fontWeight: theme.fontWeights.bold, fontSize: theme.fontSizes[2], fontFamily: theme.fonts.body, color: nodeColor }}>
+            {node.name || node.id}
+          </div>
+          <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textMuted }}>
+            {node.type}
+          </div>
         </div>
         <button
           onClick={onClose}
@@ -200,144 +203,180 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
             fontSize: theme.fontSizes[3],
             fontFamily: theme.fonts.body,
             color: theme.colors.textSecondary,
-            padding: '0',
-            width: '24px',
-            height: '24px',
+            padding: '4px',
+            width: '28px',
+            height: '28px',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
+            borderRadius: '4px',
+            transition: 'background-color 0.15s',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = theme.colors.muted;
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = 'transparent';
           }}
         >
           ×
         </button>
       </div>
 
-      {/* Description - first field under header */}
-      {node.data?.description && (
-        <div style={{ marginBottom: '12px' }}>
-          <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}>
-            Description
-          </div>
-          <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body }}>{String(node.data.description)}</div>
-        </div>
-      )}
+      {/* Content - use horizontal layout for better space usage */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '24px' }}>
 
-      {/* Sources - shown after description */}
-      {sources.length > 0 && (
-        <div style={{ marginBottom: '12px' }}>
-          <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}>
-            Sources
-          </div>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
-            {sources.map((source, index) =>
-              onSourceClick ? (
-                <button
-                  key={index}
-                  onClick={() => onSourceClick(node.id, source)}
-                  style={{
-                    fontSize: theme.fontSizes[0],
-                    fontFamily: theme.fonts.body,
-                    padding: '2px 8px',
-                    backgroundColor: theme.colors.muted,
-                    borderRadius: '4px',
-                    color: theme.colors.textSecondary,
-                    border: 'none',
-                    cursor: 'pointer',
-                    transition: 'background-color 0.15s, color 0.15s',
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.backgroundColor = theme.colors.primary;
-                    e.currentTarget.style.color = theme.colors.background;
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.backgroundColor = theme.colors.muted;
-                    e.currentTarget.style.color = theme.colors.textSecondary;
-                  }}
-                >
-                  {source}
-                </button>
-              ) : (
-                <span
-                  key={index}
-                  style={{
-                    fontSize: theme.fontSizes[0],
-                    fontFamily: theme.fonts.body,
-                    padding: '2px 8px',
-                    backgroundColor: theme.colors.muted,
-                    borderRadius: '4px',
-                    color: theme.colors.textSecondary,
-                  }}
-                >
-                  {source}
-                </span>
-              )
+        {/* Left column - Description and basic info */}
+        <div>
+          {/* Description - first field under header */}
+          {node.data?.description && (
+            <div style={{ marginBottom: '12px' }}>
+              <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}>
+                Description
+              </div>
+              <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body }}>{String(node.data.description)}</div>
+            </div>
+          )}
+
+          {/* OTEL Info */}
+          {otelInfo && (
+            <div style={{ marginBottom: '12px' }}>
+              <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}>
+                OpenTelemetry
+              </div>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }}>
+                {/* Kind badge */}
+                {otelInfo.kind && (
+                  <span
+                    style={{
+                      fontSize: theme.fontSizes[0],
+                      fontWeight: theme.fontWeights.semibold,
+                      fontFamily: theme.fonts.body,
+                      padding: '3px 8px',
+                      borderRadius: '4px',
+                      textTransform: 'uppercase',
+                      color: 'white',
+                      backgroundColor:
+                        otelInfo.kind === 'type'
+                          ? '#4A90E2'
+                          : otelInfo.kind === 'service'
+                          ? '#7ED321'
+                          : otelInfo.kind === 'instance'
+                          ? '#9B59B6'
+                          : '#888',
+                    }}
+                  >
+                    {otelInfo.kind}
+                  </span>
             )}
-          </div>
+                {/* Category */}
+                {otelInfo.category && (
+                  <span
+                    style={{
+                      fontSize: theme.fontSizes[0],
+                      fontFamily: theme.fonts.body,
+                      color: theme.colors.textSecondary,
+                    }}
+                  >
+                    {otelInfo.category}
+                  </span>
+                )}
+                {/* NEW badge */}
+                {otelInfo.isNew && (
+                  <span
+                    style={{
+                      fontSize: theme.fontSizes[0],
+                      fontWeight: theme.fontWeights.semibold,
+                      fontFamily: theme.fonts.body,
+                      padding: '2px 6px',
+                      borderRadius: '3px',
+                      backgroundColor: '#F5A623',
+                      color: 'white',
+                    }}
+                  >
+                    NEW
+                  </span>
+                )}
+              </div>
+            </div>
+          )}
         </div>
-      )}
 
-      {/* OTEL Info - shown after sources */}
-      {otelInfo && (
-        <div style={{ marginBottom: '12px' }}>
-          <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}>
-            OpenTelemetry
-          </div>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }}>
-            {/* Kind badge */}
-            {otelInfo.kind && (
-              <span
-                style={{
-                  fontSize: theme.fontSizes[0],
-                  fontWeight: theme.fontWeights.semibold,
-                  fontFamily: theme.fonts.body,
-                  padding: '3px 8px',
-                  borderRadius: '4px',
-                  textTransform: 'uppercase',
-                  color: 'white',
-                  backgroundColor:
-                    otelInfo.kind === 'type'
-                      ? '#4A90E2'
-                      : otelInfo.kind === 'service'
-                      ? '#7ED321'
-                      : otelInfo.kind === 'instance'
-                      ? '#9B59B6'
-                      : '#888',
-                }}
-              >
-                {otelInfo.kind}
-              </span>
-            )}
-            {/* Category */}
-            {otelInfo.category && (
-              <span
-                style={{
-                  fontSize: theme.fontSizes[0],
-                  fontFamily: theme.fonts.body,
-                  color: theme.colors.textSecondary,
-                }}
-              >
-                {otelInfo.category}
-              </span>
-            )}
-            {/* NEW badge */}
-            {otelInfo.isNew && (
-              <span
-                style={{
-                  fontSize: theme.fontSizes[0],
-                  fontWeight: theme.fontWeights.semibold,
-                  fontFamily: theme.fonts.body,
-                  padding: '2px 6px',
-                  borderRadius: '3px',
-                  backgroundColor: '#F5A623',
-                  color: 'white',
-                }}
-              >
-                NEW
-              </span>
-            )}
-          </div>
+        {/* Right column - Sources and other metadata */}
+        <div>
+          {/* Sources */}
+          {sources.length > 0 && (
+            <div style={{ marginBottom: '12px' }}>
+              <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}>
+                Sources
+              </div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                {sources.map((source, index) =>
+                  onSourceClick ? (
+                    <button
+                      key={index}
+                      onClick={() => {
+                        console.log('Source clicked:', source, 'from node:', node.id);
+                        onSourceClick(node.id, source);
+                      }}
+                      style={{
+                        fontSize: theme.fontSizes[0],
+                        fontFamily: 'monospace',
+                        padding: '6px 10px',
+                        backgroundColor: theme.colors.muted,
+                        borderRadius: '4px',
+                        color: theme.colors.primary,
+                        border: `1px solid ${theme.colors.border}`,
+                        cursor: 'pointer',
+                        transition: 'all 0.15s',
+                        textAlign: 'left',
+                        width: '100%',
+                        textDecoration: 'underline',
+                        textDecorationStyle: 'dotted',
+                        textDecorationColor: theme.colors.primary,
+                      }}
+                      onMouseEnter={(e) => {
+                        e.currentTarget.style.backgroundColor = theme.colors.primary;
+                        e.currentTarget.style.color = theme.colors.background;
+                        e.currentTarget.style.borderColor = theme.colors.primary;
+                        e.currentTarget.style.textDecoration = 'underline';
+                        e.currentTarget.style.textDecorationColor = theme.colors.background;
+                      }}
+                      onMouseLeave={(e) => {
+                        e.currentTarget.style.backgroundColor = theme.colors.muted;
+                        e.currentTarget.style.color = theme.colors.primary;
+                        e.currentTarget.style.borderColor = theme.colors.border;
+                        e.currentTarget.style.textDecoration = 'underline';
+                        e.currentTarget.style.textDecorationStyle = 'dotted';
+                        e.currentTarget.style.textDecorationColor = theme.colors.primary;
+                      }}
+                    >
+                      {source}
+                    </button>
+                  ) : (
+                    <span
+                      key={index}
+                      style={{
+                        fontSize: theme.fontSizes[0],
+                        fontFamily: 'monospace',
+                        padding: '6px 10px',
+                        backgroundColor: theme.colors.muted,
+                        borderRadius: '4px',
+                        color: theme.colors.textSecondary,
+                        display: 'block',
+                        border: `1px solid ${theme.colors.border}`,
+                      }}
+                    >
+                      {source}
+                    </span>
+                  )
+                )}
+              </div>
+            </div>
+          )}
         </div>
-      )}
+
+      </div>
 
       {/* Expand/Collapse button for additional details */}
       <button

package/src/components/NodeTooltip.tsx

@@ -11,6 +11,7 @@ export interface OtelInfo {
 export interface NodeTooltipProps {
   description?: string;
   otel?: OtelInfo;
+  sources?: string[];
   visible: boolean;
   /** Reference to the node element for positioning */
   nodeRef?: React.RefObject<HTMLDivElement>;
@@ -23,6 +24,7 @@ export interface NodeTooltipProps {
 export const NodeTooltip: React.FC<NodeTooltipProps> = ({
   description,
   otel,
+  sources,
   visible,
   nodeRef,
 }) => {
@@ -161,6 +163,32 @@ export const NodeTooltip: React.FC<NodeTooltipProps> = ({
       <div style={{ lineHeight: '1.4', color: description ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.5)' }}>
         {description || 'No description'}
       </div>
+
+      {/* Sources */}
+      {sources && sources.length > 0 && (
+        <div style={{ marginTop: '8px', borderTop: '1px solid rgba(255,255,255,0.2)', paddingTop: '6px' }}>
+          <div style={{
+            fontSize: theme.fontSizes[0],
+            fontWeight: theme.fontWeights.semibold,
+            color: 'rgba(255,255,255,0.7)',
+            marginBottom: '4px'
+          }}>
+            Sources:
+          </div>
+          <div style={{ fontSize: theme.fontSizes[0], color: 'rgba(255,255,255,0.8)' }}>
+            {sources.map((source, index) => (
+              <div key={index} style={{
+                fontFamily: 'monospace',
+                fontSize: theme.fontSizes[0],
+                marginTop: index > 0 ? '2px' : 0,
+                wordBreak: 'break-all'
+              }}>
+                {source}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 

package/src/components/PendingChanges.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, test, mock } from 'bun:test';
 import React, { createRef } from 'react';
 import { render } from '@testing-library/react';
 import { GraphRenderer, type GraphRendererHandle } from './GraphRenderer';
-import type { ExtendedCanvas } from '@principal-ai/principal-view-core/browser';
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import { Window } from 'happy-dom';
 

package/src/components/SelectionSidebar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import type { NodeState, NodeTypeDefinition } from '@principal-ai/principal-view-core/browser';
+import type { NodeState, NodeTypeDefinition } from '@principal-ai/principal-view-core';
 import { useTheme } from '@principal-ade/industry-theme';
 import { resolveIcon } from '../utils/iconResolver';
 

package/src/edges/CustomEdge.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@xyflow/react';
 import type { EdgeProps } from '@xyflow/react';
-import type { EdgeTypeDefinition } from '@principal-ai/principal-view-core/browser';
+import type { EdgeTypeDefinition } from '@principal-ai/principal-view-core';
 import { useTheme } from '@principal-ade/industry-theme';
 
 export interface CustomEdgeData extends Record<string, unknown> {

package/src/edges/GenericEdge.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { EdgeTypeDefinition } from '@principal-ai/principal-view-core/browser';
+import type { EdgeTypeDefinition } from '@principal-ai/principal-view-core';
 
 export interface GenericEdgeProps {
   /** Edge ID */

package/src/hooks/usePathBasedEvents.ts

@@ -11,7 +11,7 @@ import type {
   ComponentActionEvent,
   EdgeAnimationEvent,
   PathBasedEvent,
-} from '@principal-ai/principal-view-core/browser';
+} from '@principal-ai/principal-view-core';
 import {
   logLevelToNodeAnimation,
   actionToNodeAnimation,

package/src/index.ts

@@ -26,7 +26,7 @@ export type {
   ComponentLibrary,
   LibraryNodeComponent,
   LibraryEdgeComponent,
-} from '@principal-ai/principal-view-core/browser';
+} from '@principal-ai/principal-view-core';
 
 // Export components
 export { GraphRenderer } from './components/GraphRenderer';

package/src/nodes/CustomNode.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react';
 import { Handle, Position, NodeResizer } from '@xyflow/react';
 import type { NodeProps } from '@xyflow/react';
-import type { NodeTypeDefinition } from '@principal-ai/principal-view-core/browser';
+import type { NodeTypeDefinition } from '@principal-ai/principal-view-core';
 import { useTheme } from '@principal-ade/industry-theme';
 import { resolveIcon } from '../utils/iconResolver';
 import { NodeTooltip } from '../components/NodeTooltip';
@@ -81,9 +81,10 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
   // Only show tooltip when hovering, not dragging, and shift key is pressed
   const showTooltip = isHovered && !dragging && shiftKeyPressed;
 
-  // Extract OTEL info and description for tooltip
+  // Extract OTEL info, description, and sources for tooltip
   const otelInfo = nodeData?.otel as OtelInfo | undefined;
   const description = nodeData?.description as string | undefined;
+  const sources = nodeData?.sources as string[] | undefined;
 
   // OTEL kind badge colors
   const getOtelBadgeColor = (kind: string) => {
@@ -516,6 +517,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
             <NodeTooltip
               description={description}
               otel={otelInfo}
+              sources={sources}
               visible={showTooltip}
               nodeRef={nodeRef}
             />
@@ -571,6 +573,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
             <NodeTooltip
               description={description}
               otel={otelInfo}
+              sources={sources}
               visible={showTooltip}
               nodeRef={nodeRef}
             />
@@ -651,6 +654,7 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
             <NodeTooltip
               description={description}
               otel={otelInfo}
+              sources={sources}
               visible={showTooltip}
               nodeRef={nodeRef}
             />

package/src/nodes/GenericNode.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { NodeTypeDefinition } from '@principal-ai/principal-view-core/browser';
+import type { NodeTypeDefinition } from '@principal-ai/principal-view-core';
 
 export interface GenericNodeProps {
   /** Node ID */

package/src/stories/AnimationWorkshop.stories.tsx

@@ -5,7 +5,7 @@ import { CustomNode } from '../nodes/CustomNode';
 import { CustomEdge } from '../edges/CustomEdge';
 import type { CustomNodeData } from '../nodes/CustomNode';
 import type { CustomEdgeData } from '../edges/CustomEdge';
-import type { NodeTypeDefinition, EdgeTypeDefinition } from '@principal-ai/principal-view-core/browser';
+import type { NodeTypeDefinition, EdgeTypeDefinition } from '@principal-ai/principal-view-core';
 import React from 'react';
 
 const meta = {

package/src/stories/CanvasEdgeTypes.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { GraphRenderer } from '../components/GraphRenderer';
-import type { ExtendedCanvas } from '@principal-ai/principal-view-core/browser';
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {

package/src/stories/CanvasNodeTypes.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { GraphRenderer } from '../components/GraphRenderer';
-import type { ExtendedCanvas } from '@principal-ai/principal-view-core/browser';
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {

package/src/stories/ColorPriority.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { GraphRenderer } from '../components/GraphRenderer';
-import type { ExtendedCanvas, GraphEvent } from '@principal-ai/principal-view-core/browser';
+import type { ExtendedCanvas, GraphEvent } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 // Helper component that sets initial node states via events

package/src/stories/EventDrivenAnimations.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { GraphRenderer } from '../components/GraphRenderer';
-import type { GraphEvent, ExtendedCanvas } from '@principal-ai/principal-view-core/browser';
+import type { GraphEvent, ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { useState, useEffect } from 'react';
 import React from 'react';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';

package/src/stories/GraphOrientation.stories.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useMemo } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { GraphRenderer } from '../components/GraphRenderer';
-import type { ExtendedCanvas } from '@principal-ai/principal-view-core/browser';
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import { swapGraphOrientation } from '../utils/orientationUtils';
-import { CanvasConverter } from '@principal-ai/principal-view-core/browser';
+import { CanvasConverter } from '@principal-ai/principal-view-core';
 
 const meta = {
   title: 'Features/Graph Orientation',