@principal-ai/principal-view-react 0.14.33 → 0.14.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/principal-view-react",
-  "version": "0.14.33",
+  "version": "0.14.35",
   "description": "React components for graph-based principal view framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/nodes/CustomNode.tsx

@@ -579,7 +579,7 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = (props) =>
     const borderStyle = status === 'draft' ? 'dotted' : status === 'approved' ? 'dashed' : 'solid';
     const baseStyles = {
       padding: '12px 16px',
-      backgroundColor: isGroup ? 'rgba(255, 255, 255, 0.7)' : hexToLightColor(fillColor),
+      backgroundColor: isGroup ? 'rgba(255, 255, 255, 0.7)' : fillColor,
       color: '#000',
       border: `2px ${borderStyle} ${hasViolations ? '#D0021B' : strokeColor}`,
       fontSize: theme.fontSizes[0],
@@ -696,7 +696,7 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = (props) =>
         right: hexagonBorderWidth,
         bottom: hexagonBorderWidth,
         clipPath: hexagonClipPath,
-        backgroundColor: hexToLightColor(fillColor),
+        backgroundColor: fillColor,
         color: '#000',
         display: 'flex',
         flexDirection: 'column',
@@ -742,7 +742,7 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = (props) =>
         right: diamondBorderWidth,
         bottom: diamondBorderWidth,
         clipPath: diamondClipPath,
-        backgroundColor: hexToLightColor(fillColor),
+        backgroundColor: fillColor,
         color: '#000',
         display: 'flex',
         flexDirection: 'column',

package/src/stories/OtelNodeTypesPrototype.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import { GraphRenderer } from '../components/GraphRenderer';
-import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
+import type { ExtendedCanvas, ComponentLibrary } from '@principal-ai/principal-view-core';
 
 /**
  * =============================================================================
@@ -145,6 +145,24 @@ const proposedNewFormat = {
   },
 };
 
+// =============================================================================
+// LIBRARY: Define scopes for scope-based coloring
+// =============================================================================
+
+const libraryWithScopes: ComponentLibrary = {
+  version: '1.0.0',
+  name: 'OTEL Node Types Library',
+  description: 'Scope definitions for OTEL node types',
+  scopes: {
+    validation: {
+      description: 'Validation instrumentation scope',
+      color: '#8b5cf6', // purple - matches otel-scope node type
+    },
+  },
+  nodeComponents: {},
+  edgeComponents: {},
+};
+
 // =============================================================================
 // ADAPTER: Convert new format to current format for rendering
 // =============================================================================
@@ -413,7 +431,7 @@ export const AllNodeTypes: StoryObj = {
     return (
       <ThemeProvider theme={defaultEditorTheme}>
         <div style={{ width: '100%', height: '800px' }}>
-          <GraphRenderer canvas={canvas} initialViewport={{ x: 50, y: 20, zoom: 1 }} />
+          <GraphRenderer canvas={canvas} library={libraryWithScopes} initialViewport={{ x: 50, y: 20, zoom: 1 }} />
         </div>
       </ThemeProvider>
     );
@@ -780,7 +798,7 @@ export const WorkflowExample: StoryObj = {
     return (
       <ThemeProvider theme={defaultEditorTheme}>
         <div style={{ width: '100%', height: '400px' }}>
-          <GraphRenderer canvas={workflowCanvas} initialViewport={{ x: 20, y: 50, zoom: 1 }} />
+          <GraphRenderer canvas={workflowCanvas} library={libraryWithScopes} initialViewport={{ x: 20, y: 50, zoom: 1 }} />
         </div>
       </ThemeProvider>
     );