@principal-ai/principal-view-react 0.14.32 → 0.14.34

package/package.json

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

package/src/nodes/otel/OtelEventNode.tsx

@@ -142,7 +142,7 @@ export const OtelEventNode: React.FC<NodeProps<Node<OtelEventNodeData>>> = ({
 
   const rectangleStyle: React.CSSProperties = {
     padding: '12px 16px',
-    backgroundColor: hexToLightColor(fillColor),
+    backgroundColor: fillColor,
     color: '#000',
     border: `2px ${borderStyle} ${hasViolations ? '#D0021B' : strokeColor}`,
     fontSize: theme.fontSizes[0],

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>
     );