@principal-ai/principal-view-react 0.16.56 → 0.16.57

package/src/pierre/constructColors.ts

@@ -0,0 +1,112 @@
+/**
+ * Construct colors derived from the Pierre syntax themes.
+ *
+ * Single source of truth for node coloring: the same palette the declaration
+ * panel and Pierre file views render with. The themes are static JSON objects
+ * (VS Code/Shiki `tokenColors` scope rules), so extraction is a synchronous
+ * scope lookup — no Shiki call, no React context. Dark/light (and any future
+ * variant) resolves by mode at render time.
+ *
+ * Syntax themes deliberately reuse one hue across related scopes (class and
+ * type share `entity.name.class`); the node taxonomy needs distinguishable
+ * colors, so colliding constructs take a shade of the scope color — derived
+ * from the theme itself, toward white in dark themes and toward black in
+ * light themes.
+ */
+
+import type { SubsystemComponentConstruct } from '../subsystem/model';
+import type { PierreSyntaxThemeName } from './pierreSyntaxTheme';
+import pierreDark from '@pierre/theme/pierre-dark';
+import pierreLight from '@pierre/theme/pierre-light';
+
+interface PierreThemeInput {
+  type: 'dark' | 'light';
+  colors: Record<string, string>;
+  tokenColors: Array<{ scope: string | string[]; settings: { foreground?: string } }>;
+}
+
+const THEMES: Record<PierreSyntaxThemeName, PierreThemeInput> = {
+  'pierre-dark': pierreDark as unknown as PierreThemeInput,
+  'pierre-light': pierreLight as unknown as PierreThemeInput,
+};
+
+/** First rule whose scope list contains the exact scope. */
+function scopeColor(theme: PierreThemeInput, scope: string): string | undefined {
+  for (const rule of theme.tokenColors) {
+    const scopes = Array.isArray(rule.scope) ? rule.scope : [rule.scope];
+    if (scopes.includes(scope)) return rule.settings.foreground;
+  }
+  return undefined;
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace('#', '');
+  const full = h.length === 3 ? h.split('').map((c) => c + c).join('') : h;
+  const n = parseInt(full.slice(0, 6), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function rgbToHex([r, g, b]: [number, number, number]): string {
+  const to = (v: number) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0');
+  return `#${to(r)}${to(g)}${to(b)}`;
+}
+
+/** Linear blend of two hex colors; amount 0 = base, 1 = other. */
+function mix(hex: string, other: string, amount: number): string {
+  const base = hexToRgb(hex);
+  const target = hexToRgb(other);
+  return rgbToHex([
+    base[0] + (target[0] - base[0]) * amount,
+    base[1] + (target[1] - base[1]) * amount,
+    base[2] + (target[2] - base[2]) * amount,
+  ]);
+}
+
+export function constructColorsFromPierreTheme(
+  themeName: PierreSyntaxThemeName,
+): Record<SubsystemComponentConstruct, string> {
+  const theme = THEMES[themeName];
+  // A scope the theme doesn't declare resolves to the theme's own foreground —
+  // still all-Pierre, never a hand-picked value.
+  const editorFg = theme.colors['editor.foreground'] ?? '#fafafa';
+  const pick = (scope: string) => scopeColor(theme, scope) ?? editorFg;
+  const towardBackground = theme.type === 'dark' ? lighten : darken;
+
+  const classColor = pick('entity.name.class');
+  const functionColor = pick('entity.name.function');
+  const typeColor = pick('support.type');
+  const moduleColor = pick('entity.name.namespace');
+
+  return {
+    class: classColor,
+    // interface/type are the type-name scope, shaded to separate them from
+    // class (whose declaration name shares the same hue in syntax themes)
+    interface: towardBackground(typeColor, 0.14),
+    type_alias: towardBackground(typeColor, 0.28),
+    function: functionColor,
+    method: towardBackground(functionColor, 0.14),
+    // enum members are constants — the generic constant hue
+    enum: pick('constant'),
+    // module and store share the constant hue — the module holds the store,
+    // and the store IS the retained value, so the store keeps the pure
+    // `variable.other.constant` color and the module takes the shade
+    module: towardBackground(moduleColor, 0.18),
+    store: pick('variable.other.constant'),
+    external: pick('comment'),
+  };
+}
+
+function lighten(hex: string, amount: number): string {
+  return mix(hex, '#ffffff', amount);
+}
+
+function darken(hex: string, amount: number): string {
+  return mix(hex, '#000000', amount);
+}
+
+/**
+ * The dark-theme instantiation, for consumers without a mode context (the
+ * bun-side excalidraw exporter). React components derive per mode instead.
+ */
+export const CONSTRUCT_COLOR: Record<SubsystemComponentConstruct, string> =
+  constructColorsFromPierreTheme('pierre-dark');

package/src/stories/{BoundaryNodes.stories.tsx → Audit/BoundaryNodes.stories.tsx}

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

package/src/stories/{CanvasEdgeTypes.stories.tsx → Audit/CanvasEdgeTypes.stories.tsx}

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

package/src/stories/{CanvasNodeTypes.stories.tsx → Audit/CanvasNodeTypes.stories.tsx}

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

package/src/stories/{ColorPriority.stories.tsx → Audit/ColorPriority.stories.tsx}

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

package/src/stories/{DiamondBadges.stories.tsx → Audit/DiamondBadges.stories.tsx}

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

package/src/stories/{NodeDimensionsTesting.stories.tsx → Audit/NodeDimensionsTesting.stories.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas, ExtendedCanvasNode } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Testing/Node Dimensions & Text Readability',
+  title: 'Audit/NodeDimensionsTesting',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{NodeFieldsAudit.stories.tsx → Audit/NodeFieldsAudit.stories.tsx}

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

package/src/stories/{NodeFontSizeTesting.stories.tsx → Audit/NodeFontSizeTesting.stories.tsx}

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import type { Theme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Testing/Node Font Size & Dimensions',
+  title: 'Audit/NodeFontSizeTesting',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{NodeShapes.stories.tsx → Audit/NodeShapes.stories.tsx}

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

package/src/stories/{WideNodesTesting.stories.tsx → Audit/WideNodesTesting.stories.tsx}

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import type { Theme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Testing/Wide Nodes (16px Font)',
+  title: 'Audit/WideNodesTesting',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{dashboard → Components}/DashboardRenderer.stories.tsx

@@ -7,11 +7,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import { DashboardRenderer } from '../../components/dashboard';
-import activityFeedDashboard from './sample-dashboards/activity-feed-analytics.dashboard.json';
+import activityFeedDashboard from '../data/activity-feed-analytics.dashboard.json';
 import type { DashboardDefinition } from '../../components/dashboard';
 
 const meta: Meta<typeof DashboardRenderer> = {
-  title: 'Dashboard/DashboardRenderer',
+  title: 'Components/DashboardRenderer',
   component: DashboardRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{GraphRenderer.stories.tsx → Components/GraphRenderer.stories.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import '@xyflow/react/dist/style.css';
-import { GraphRenderer } from '../components/GraphRenderer';
-import type { GraphRendererHandle, PendingChanges } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
+import type { GraphRendererHandle, PendingChanges } from '../../components/GraphRenderer';
 import type { ExtendedCanvas, PVEventSchema } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 

package/src/stories/{MultiCanvasRenderer.stories.tsx → Components/MultiCanvasRenderer.stories.tsx}

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

package/src/stories/{SequenceDiagram.stories.tsx → Components/SequenceDiagram.stories.tsx}

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { SequenceDiagramRenderer } from '../components/SequenceDiagramRenderer';
-import type { SequenceEvent, SequenceEdge } from '../hooks/useSequenceLayout';
+import { SequenceDiagramRenderer } from '../../components/SequenceDiagramRenderer';
+import type { SequenceEvent, SequenceEdge } from '../../hooks/useSequenceLayout';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {

package/src/stories/{StateView.stories.tsx → Components/StateView.stories.tsx}

@@ -5,10 +5,10 @@ import {
   type PipelineEvent,
   type EventSource,
   type PipelineEventType,
-} from '../components/state-view';
+} from '../../components/state-view';
 
 const meta = {
-  title: 'State View/Pipeline',
+  title: 'Components/StateView',
   component: PipelineView,
   parameters: {
     layout: 'centered',

package/src/stories/{TraceViewer.stories.tsx → Components/TraceViewer.stories.tsx}

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 // Import captured trace canvas data
-import testRunTrace from './__traces__/test-run.canvas.json';
+import testRunTrace from '../__traces__/test-run.canvas.json';
 
 const meta = {
-  title: 'Traces/TraceViewer',
+  title: 'Components/TraceViewer',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{WorkflowSequenceDiagram.stories.tsx → Components/WorkflowSequenceDiagram.stories.tsx}

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { WorkflowSequenceDiagram } from '../components/WorkflowSequenceDiagram';
+import { WorkflowSequenceDiagram } from '../../components/WorkflowSequenceDiagram';
 import type { WorkflowScenario, Canvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 

package/src/stories/{AnimationWorkshop.stories.tsx → Features/AnimationWorkshop.stories.tsx}

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { ReactFlow, ReactFlowProvider, Background, Controls } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { CustomNode } from '../nodes/CustomNode';
-import { CustomEdge } from '../edges/CustomEdge';
-import type { CustomNodeData } from '../nodes/CustomNode';
-import type { CustomEdgeData } from '../edges/CustomEdge';
+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';
 import React from 'react';
 
 const meta = {
-  title: 'Workshop/Animation',
+  title: 'Features/AnimationWorkshop',
   component: ReactFlow,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{ChangeTypeVisual.stories.tsx → Features/ChangeTypeVisual.stories.tsx}

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ThemeProvider, slateTheme } from '@principal-ade/industry-theme';
-import { ChangeTypeVisual } from '../../../trail-viewer/src/mainview/components/ChangeTypeVisual';
+import { ChangeTypeVisual } from '../../../../trail-viewer/src/mainview/components/ChangeTypeVisual';
 
 const meta = {
-  title: 'Concepts/ChangeTypeVisual',
+  title: 'Features/ChangeTypeVisual',
   component: ChangeTypeVisual,
   decorators: [
     (Story) => (

package/src/stories/{EventDrivenAnimations.stories.tsx → Features/EventDrivenAnimations.stories.tsx}

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 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';
 
 const meta = {
-  title: 'Workshop/Event-Driven Animations',
+  title: 'Features/EventDrivenAnimations',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{MultiConfig.stories.tsx → Features/MultiConfig.stories.tsx}

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import React from 'react';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta: Meta<typeof GraphRenderer> = {
-  title: 'Multi-Config/Configuration Switcher',
+  title: 'Features/MultiConfig',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{ElkEdgeRouting.stories.tsx → Layout/ElkEdgeRouting.stories.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Layout/ELK Edge Routing',
+  title: 'Layout/ElkEdgeRouting',
   component: GraphRenderer,
   parameters: {
     layout: 'centered',

package/src/stories/{GraphOrientation.stories.tsx → Layout/GraphOrientation.stories.tsx}

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

package/src/stories/{MultiDirectionalConnections.stories.tsx → Layout/MultiDirectionalConnections.stories.tsx}

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Features/Multi-Directional Connections',
+  title: 'Layout/MultiDirectionalConnections',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{NodeDefinitionComparison.stories.tsx → Nodes/NodeDefinitionComparison.stories.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Documentation/Node Definition Comparison',
+  title: 'Nodes/NodeDefinitionComparison',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{NodeNameFallbacks.stories.tsx → Nodes/NodeNameFallbacks.stories.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas, ExtendedCanvasNode } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Documentation/Node Name Fallbacks',
+  title: 'Nodes/NodeNameFallbacks',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{NumericColors.stories.tsx → Nodes/NumericColors.stories.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Features/NumericColors',
+  title: 'Nodes/NumericColors',
   component: GraphRenderer,
   parameters: {
     layout: 'centered',

package/src/stories/{EventNameDisplay.stories.tsx → OTEL/EventNameDisplay.stories.tsx}

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 import type { Theme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Features/Event Name Display',
+  title: 'OTEL/EventNameDisplay',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{EventNameFallback.stories.tsx → OTEL/EventNameFallback.stories.tsx}

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
-  title: 'Documentation/Event Name NOT Used for Display',
+  title: 'OTEL/EventNameFallback',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{OtelComponents.stories.tsx → OTEL/OtelComponents.stories.tsx}

@@ -1,8 +1,8 @@
 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 { NodeTooltip } from '../components/NodeTooltip';
+import { GraphRenderer } from '../../components/GraphRenderer';
+import { NodeTooltip } from '../../components/NodeTooltip';
 
 // OTEL Log Association canvas data
 const otelCanvas = {
@@ -165,7 +165,7 @@ Routes incoming OTEL logs to canvas nodes based on matching criteria.
 };
 
 const meta: Meta = {
-  title: 'OTEL/Components',
+  title: 'OTEL/OtelComponents',
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/{OtelNodeTypesPrototype.stories.tsx → OTEL/OtelNodeTypesPrototype.stories.tsx}

@@ -1,7 +1,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 { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas, ComponentLibrary } from '@principal-ai/principal-view-core';
 
 /**
@@ -399,7 +399,7 @@ function buildDescription(node: NewFormatNode): string {
 // =============================================================================
 
 const meta: Meta = {
-  title: 'OTEL/Node Types Prototype',
+  title: 'OTEL/OtelNodeTypesPrototype',
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/{RawEventCards.stories.tsx → OTEL/RawEventCards.stories.tsx}

@@ -6,11 +6,11 @@ import {
   SessionEventFeed,
   SessionEventFeedGrouped,
   type SessionEventFeedRow,
-} from '../components/session-events';
-import rawSession from './data/opencode-session-raw-events.json';
+} from '../../components/session-events';
+import rawSession from '../data/opencode-session-raw-events.json';
 
 const meta = {
-  title: 'Agent Raw Events/Cards',
+  title: 'OTEL/RawEventCards',
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/{SpanBadges.stories.tsx → OTEL/SpanBadges.stories.tsx}

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

package/src/stories/{ValidationEventsCanvas.stories.tsx → OTEL/ValidationEventsCanvas.stories.tsx}

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import '@xyflow/react/dist/style.css';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 // Import the CLI events canvas
-import validationEventsCanvasUrl from '../../../../.principal-views/principal-view-cli.events.canvas?url';
+import validationEventsCanvasUrl from '../../../../../.principal-views/principal-view-cli.events.canvas?url';
 
 // Helper to load canvas from URL
 async function loadCanvas(url: string): Promise<ExtendedCanvas> {
@@ -41,7 +41,7 @@ function CanvasLoader({ url, children }: { url: string; children: (canvas: Exten
 }
 
 const meta = {
-  title: 'Validation/Event Namespace Canvas',
+  title: 'OTEL/ValidationEventsCanvas',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',

package/src/stories/{BacklogMdCanvases.stories.tsx → RealWorld/BacklogMdCanvases.stories.tsx}

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import '@xyflow/react/dist/style.css';
-import { GraphRenderer } from '../components/GraphRenderer';
+import { GraphRenderer } from '../../components/GraphRenderer';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
 import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
@@ -67,7 +67,7 @@ function CanvasLoader({
 }
 
 const meta = {
-  title: 'Real Projects/Backlog.md Canvases',
+  title: 'RealWorld/BacklogMdCanvases',
   component: GraphRenderer,
   parameters: {
     layout: 'fullscreen',