@principal-ai/principal-view-react 0.7.39 → 0.7.40

package/dist/index.d.ts

@@ -28,4 +28,5 @@ export { convertToXYFlowNodes, convertToXYFlowEdges, } from './utils/graphConver
 export type { EdgeStateWithHandles } from './utils/graphConverter';
 export { Icon, resolveIcon } from './utils/iconResolver';
 export type { IconProps } from './utils/iconResolver';
+export { swapGraphOrientation, swapNodePositions, swapEdgeSides, } from './utils/orientationUtils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,YAAY,EACV,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,uBAAuB,EAEvB,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,2CAA2C,CAAC;AAGnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAGrF,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAG3E,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,YAAY,EACV,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,uBAAuB,EAEvB,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,2CAA2C,CAAC;AAGnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAGrF,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAG3E,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,GACd,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -20,4 +20,5 @@ export { NodeTooltip } from './components/NodeTooltip';
 // Export utilities
 export { convertToXYFlowNodes, convertToXYFlowEdges, } from './utils/graphConverter';
 export { Icon, resolveIcon } from './utils/iconResolver';
+export { swapGraphOrientation, swapNodePositions, swapEdgeSides, } from './utils/orientationUtils';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,6BAA6B;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,2BAA2B;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,mBAAmB;AACnB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,6BAA6B;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,2BAA2B;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,mBAAmB;AACnB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,GACd,MAAM,0BAA0B,CAAC"}

package/dist/utils/orientationUtils.d.ts

@@ -0,0 +1,19 @@
+import type { NodeState, EdgeState } from '@principal-ai/principal-view-core';
+/**
+ * Swaps the orientation of a graph from horizontal to vertical or vice versa.
+ * This swaps x/y coordinates and adjusts edge connection sides accordingly.
+ */
+export declare function swapGraphOrientation(nodes: NodeState[], edges: EdgeState[]): {
+    nodes: NodeState[];
+    edges: EdgeState[];
+};
+/**
+ * Swaps x and y positions for all nodes
+ */
+export declare function swapNodePositions(nodes: NodeState[]): NodeState[];
+/**
+ * Swaps edge connection sides to match the new orientation
+ * Both sides rotate clockwise: top → right → bottom → left → top
+ */
+export declare function swapEdgeSides(edges: EdgeState[]): EdgeState[];
+//# sourceMappingURL=orientationUtils.d.ts.map

package/dist/utils/orientationUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"orientationUtils.d.ts","sourceRoot":"","sources":["../../src/utils/orientationUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAc,MAAM,mCAAmC,CAAC;AAE1F;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAAE,EAClB,KAAK,EAAE,SAAS,EAAE,GACjB;IAAE,KAAK,EAAE,SAAS,EAAE,CAAC;IAAC,KAAK,EAAE,SAAS,EAAE,CAAA;CAAE,CAK5C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAQjE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAuB7D"}

package/dist/utils/orientationUtils.js

@@ -0,0 +1,62 @@
+/**
+ * Swaps the orientation of a graph from horizontal to vertical or vice versa.
+ * This swaps x/y coordinates and adjusts edge connection sides accordingly.
+ */
+export function swapGraphOrientation(nodes, edges) {
+    return {
+        nodes: swapNodePositions(nodes),
+        edges: swapEdgeSides(edges),
+    };
+}
+/**
+ * Swaps x and y positions for all nodes
+ */
+export function swapNodePositions(nodes) {
+    return nodes.map(node => ({
+        ...node,
+        position: node.position ? {
+            x: node.position.y,
+            y: node.position.x,
+        } : undefined,
+    }));
+}
+/**
+ * Swaps edge connection sides to match the new orientation
+ * Both sides rotate clockwise: top → right → bottom → left → top
+ */
+export function swapEdgeSides(edges) {
+    return edges.map(edge => {
+        const data = edge.data;
+        const fromSide = data?.fromSide;
+        const toSide = data?.toSide;
+        const rotatedFromSide = rotateClockwise(fromSide);
+        const rotatedToSide = rotateClockwise(toSide);
+        // Only include fromSide/toSide if they have defined values (not undefined)
+        const newData = { ...edge.data };
+        if (rotatedFromSide !== undefined) {
+            newData.fromSide = rotatedFromSide;
+        }
+        if (rotatedToSide !== undefined) {
+            newData.toSide = rotatedToSide;
+        }
+        return {
+            ...edge,
+            data: newData,
+        };
+    });
+}
+/**
+ * Rotates a side clockwise: top → right → bottom → left → top
+ */
+function rotateClockwise(side) {
+    if (!side)
+        return undefined;
+    const clockwiseMap = {
+        top: 'right',
+        right: 'bottom',
+        bottom: 'left',
+        left: 'top',
+    };
+    return clockwiseMap[side];
+}
+//# sourceMappingURL=orientationUtils.js.map

package/dist/utils/orientationUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"orientationUtils.js","sourceRoot":"","sources":["../../src/utils/orientationUtils.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAClC,KAAkB,EAClB,KAAkB;IAElB,OAAO;QACL,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC;QAC/B,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC;KAC5B,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAkB;IAClD,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,GAAG,IAAI;QACP,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YACxB,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YAClB,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;SACnB,CAAC,CAAC,CAAC,SAAS;KACd,CAAC,CAAC,CAAC;AACN,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,KAAkB;IAC9C,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,IAA2C,CAAC;QAC9D,MAAM,QAAQ,GAAG,IAAI,EAAE,QAAkC,CAAC;QAC1D,MAAM,MAAM,GAAG,IAAI,EAAE,MAAgC,CAAC;QAEtD,MAAM,eAAe,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;QAClD,MAAM,aAAa,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QAE9C,2EAA2E;QAC3E,MAAM,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,EAA6B,CAAC;QAC5D,IAAI,eAAe,KAAK,SAAS,EAAE;YACjC,OAAO,CAAC,QAAQ,GAAG,eAAe,CAAC;SACpC;QACD,IAAI,aAAa,KAAK,SAAS,EAAE;YAC/B,OAAO,CAAC,MAAM,GAAG,aAAa,CAAC;SAChC;QAED,OAAO;YACL,GAAG,IAAI;YACP,IAAI,EAAE,OAA4B;SACnC,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,SAAS,eAAe,CAAC,IAAiB;IACxC,IAAI,CAAC,IAAI;QAAE,OAAO,SAAS,CAAC;IAE5B,MAAM,YAAY,GAAmC;QACnD,GAAG,EAAE,OAAO;QACZ,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,KAAK;KACZ,CAAC;IAEF,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/principal-view-react",
-  "version": "0.7.39",
+  "version": "0.7.40",
   "description": "React components for graph-based principal view framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,7 +18,6 @@
     "@principal-ai/codebase-composition": "^0.2.41",
     "@principal-ai/principal-view-core": "0.11.7",
     "@xyflow/react": "12.0.0",
-    "elkjs": "0.9.0",
     "js-yaml": "4.1.1",
     "lucide-react": "0.554.0",
     "zustand": "4.5.0"

package/src/index.ts

@@ -71,3 +71,8 @@ export {
 export type { EdgeStateWithHandles } from './utils/graphConverter';
 export { Icon, resolveIcon } from './utils/iconResolver';
 export type { IconProps } from './utils/iconResolver';
+export {
+  swapGraphOrientation,
+  swapNodePositions,
+  swapEdgeSides,
+} from './utils/orientationUtils';

package/src/stories/GraphOrientation.stories.tsx

@@ -0,0 +1,500 @@
+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 { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { swapGraphOrientation } from '../utils/orientationUtils';
+import { CanvasConverter } from '@principal-ai/principal-view-core/browser';
+
+const meta = {
+  title: 'Features/Graph Orientation',
+  component: GraphRenderer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof GraphRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Canvas with horizontal flow (left to right)
+ */
+const horizontalCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'start',
+      type: 'text',
+      x: 100,
+      y: 200,
+      width: 120,
+      height: 80,
+      text: 'Start',
+      color: 4,
+      pv: {
+        nodeType: 'process',
+        shape: 'circle',
+        icon: 'Play',
+      },
+    },
+    {
+      id: 'process-1',
+      type: 'text',
+      x: 300,
+      y: 200,
+      width: 140,
+      height: 80,
+      text: 'Process 1',
+      color: 6,
+      pv: {
+        nodeType: 'process',
+        shape: 'rectangle',
+        icon: 'Box',
+      },
+    },
+    {
+      id: 'decision',
+      type: 'text',
+      x: 520,
+      y: 200,
+      width: 100,
+      height: 100,
+      text: 'Decision',
+      color: 2,
+      pv: {
+        nodeType: 'decision',
+        shape: 'diamond',
+        icon: 'GitBranch',
+      },
+    },
+    {
+      id: 'process-2a',
+      type: 'text',
+      x: 700,
+      y: 120,
+      width: 140,
+      height: 80,
+      text: 'Process 2A',
+      color: 6,
+      pv: {
+        nodeType: 'process',
+        shape: 'rectangle',
+        icon: 'Box',
+      },
+    },
+    {
+      id: 'process-2b',
+      type: 'text',
+      x: 700,
+      y: 280,
+      width: 140,
+      height: 80,
+      text: 'Process 2B',
+      color: 6,
+      pv: {
+        nodeType: 'process',
+        shape: 'rectangle',
+        icon: 'Box',
+      },
+    },
+    {
+      id: 'end',
+      type: 'text',
+      x: 920,
+      y: 200,
+      width: 120,
+      height: 80,
+      text: 'End',
+      color: 5,
+      pv: {
+        nodeType: 'process',
+        shape: 'circle',
+        icon: 'CheckCircle',
+      },
+    },
+  ],
+  edges: [
+    {
+      id: 'e1',
+      fromNode: 'start',
+      toNode: 'process-1',
+      fromSide: 'right',
+      toSide: 'left',
+      pv: {
+        edgeType: 'flow',
+      },
+    },
+    {
+      id: 'e2',
+      fromNode: 'process-1',
+      toNode: 'decision',
+      fromSide: 'right',
+      toSide: 'left',
+      pv: {
+        edgeType: 'flow',
+      },
+    },
+    {
+      id: 'e3',
+      fromNode: 'decision',
+      toNode: 'process-2a',
+      fromSide: 'top',
+      toSide: 'left',
+      pv: {
+        edgeType: 'flow',
+      },
+    },
+    {
+      id: 'e4',
+      fromNode: 'decision',
+      toNode: 'process-2b',
+      fromSide: 'bottom',
+      toSide: 'left',
+      pv: {
+        edgeType: 'flow',
+      },
+    },
+    {
+      id: 'e5',
+      fromNode: 'process-2a',
+      toNode: 'end',
+      fromSide: 'right',
+      toSide: 'top',
+      pv: {
+        edgeType: 'flow',
+      },
+    },
+    {
+      id: 'e6',
+      fromNode: 'process-2b',
+      toNode: 'end',
+      fromSide: 'right',
+      toSide: 'bottom',
+      pv: {
+        edgeType: 'flow',
+      },
+    },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Horizontal Flow',
+    description: 'Graph with horizontal (left-to-right) orientation',
+    edgeTypes: {
+      flow: {
+        description: 'Flow connection',
+        style: 'solid',
+        color: '#888',
+      },
+    },
+  },
+};
+
+/**
+ * Interactive story demonstrating orientation swap
+ */
+const OrientationSwapTemplate = () => {
+  const [isVertical, setIsVertical] = useState(false);
+
+  const canvas = useMemo(() => {
+    if (!isVertical) {
+      return horizontalCanvas;
+    }
+
+    // Convert canvas to internal format
+    const { nodes: nodeStates, edges: edgeStates } =
+      CanvasConverter.canvasToGraph(horizontalCanvas);
+
+    // Swap orientation
+    const { nodes: swappedNodes, edges: swappedEdges } = swapGraphOrientation(
+      nodeStates,
+      edgeStates
+    );
+
+    // Convert back to canvas format for rendering
+    return {
+      ...horizontalCanvas,
+      nodes: swappedNodes.map((node, idx) => ({
+        ...horizontalCanvas.nodes[idx],
+        x: node.position?.x ?? 0,
+        y: node.position?.y ?? 0,
+      })),
+      edges: swappedEdges.map((edge, idx) => {
+        const data = edge.data as Record<string, unknown> | undefined;
+        return {
+          ...horizontalCanvas.edges[idx],
+          fromSide: (data?.fromSide as 'top' | 'right' | 'bottom' | 'left') ?? 'bottom',
+          toSide: (data?.toSide as 'top' | 'right' | 'bottom' | 'left') ?? 'top',
+        };
+      }),
+    };
+  }, [isVertical]);
+
+  return (
+    <div style={{ padding: 20 }}>
+      <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center', gap: 20 }}>
+        <h2 style={{ margin: 0, fontFamily: 'system-ui' }}>Graph Orientation</h2>
+        <button
+          onClick={() => setIsVertical(!isVertical)}
+          style={{
+            padding: '8px 16px',
+            fontSize: 14,
+            fontFamily: 'system-ui',
+            backgroundColor: '#3b82f6',
+            color: 'white',
+            border: 'none',
+            borderRadius: 6,
+            cursor: 'pointer',
+          }}
+        >
+          Switch to {isVertical ? 'Horizontal' : 'Vertical'}
+        </button>
+        <div style={{ fontSize: 14, color: '#666', fontFamily: 'system-ui' }}>
+          Current: <strong>{isVertical ? 'Vertical (Top-to-Bottom)' : 'Horizontal (Left-to-Right)'}</strong>
+        </div>
+      </div>
+
+      <GraphRenderer
+        key={isVertical ? 'vertical' : 'horizontal'}
+        canvas={canvas}
+        width={isVertical ? 500 : 1100}
+        height={isVertical ? 1100 : 500}
+      />
+
+      <div style={{ marginTop: 30, padding: 16, backgroundColor: '#f5f5f5', borderRadius: 8 }}>
+        <h4 style={{ marginBottom: 10, fontFamily: 'system-ui' }}>How It Works</h4>
+        <ul style={{ fontSize: 13, lineHeight: 1.8, margin: 0, paddingLeft: 20 }}>
+          <li>
+            <strong>Position Swap</strong>: Swaps x and y coordinates of all nodes
+          </li>
+          <li>
+            <strong>Edge Side Rotation</strong>: Both sides rotate <strong>clockwise</strong>
+            <ul style={{ marginTop: 5 }}>
+              <li><code>top → right → bottom → left → top</code></li>
+              <li>Example: <code>right → left</code> becomes <code>bottom → top</code></li>
+            </ul>
+          </li>
+          <li>
+            <strong>Usage</strong>: <code>swapGraphOrientation(nodes, edges)</code>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export const InteractiveOrientationSwap: Story = {
+  render: () => <OrientationSwapTemplate />,
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Interactive Orientation Swap**
+
+Click the button to toggle between horizontal (left-to-right) and vertical (top-to-bottom) orientations.
+
+The \`swapGraphOrientation\` utility:
+1. Swaps x/y coordinates for all node positions
+2. Rotates edge connection sides clockwise (both fromSide and toSide)
+   - Rotation: top → right → bottom → left → top
+   - Example: \`right → left\` becomes \`bottom → top\`
+3. Preserves the graph structure while rotating it 90 degrees
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Horizontal flow example
+ */
+export const HorizontalFlow: Story = {
+  args: {
+    canvas: horizontalCanvas,
+    width: 1100,
+    height: 450,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Horizontal Flow (Left-to-Right)**
+
+Traditional left-to-right flowchart layout:
+- Primary flow uses \`right → left\` connections
+- Branches use \`top\` and \`bottom\` connections for splitting
+- Typical for flowcharts and process diagrams
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Vertical flow example (using swapped canvas)
+ */
+const VerticalFlowTemplate = () => {
+  const verticalCanvas = useMemo(() => {
+    const { nodes: nodeStates, edges: edgeStates } =
+      CanvasConverter.canvasToGraph(horizontalCanvas);
+
+    const { nodes: swappedNodes, edges: swappedEdges } = swapGraphOrientation(
+      nodeStates,
+      edgeStates
+    );
+
+    return {
+      ...horizontalCanvas,
+      pv: {
+        ...horizontalCanvas.pv,
+        name: 'Vertical Flow',
+        description: 'Graph with vertical (top-to-bottom) orientation',
+      },
+      nodes: swappedNodes.map((node, idx) => ({
+        ...horizontalCanvas.nodes[idx],
+        x: node.position?.x ?? 0,
+        y: node.position?.y ?? 0,
+      })),
+      edges: swappedEdges.map((edge, idx) => {
+        const data = edge.data as Record<string, unknown> | undefined;
+        return {
+          ...horizontalCanvas.edges[idx],
+          fromSide: (data?.fromSide as 'top' | 'right' | 'bottom' | 'left') ?? 'bottom',
+          toSide: (data?.toSide as 'top' | 'right' | 'bottom' | 'left') ?? 'top',
+        };
+      }),
+    };
+  }, []);
+
+  return <GraphRenderer canvas={verticalCanvas} width={500} height={1100} />;
+};
+
+export const VerticalFlow: Story = {
+  render: () => <VerticalFlowTemplate />,
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Vertical Flow (Top-to-Bottom)**
+
+Top-to-bottom layout using \`swapGraphOrientation\`:
+- Primary flow uses \`bottom → top\` connections
+- Branches use \`left\` and \`right\` connections for splitting
+- Common for hierarchical diagrams and org charts
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Side-by-side comparison
+ */
+const SideBySideTemplate = () => {
+  const verticalCanvas = useMemo(() => {
+    const { nodes: nodeStates, edges: edgeStates } =
+      CanvasConverter.canvasToGraph(horizontalCanvas);
+
+    const { nodes: swappedNodes, edges: swappedEdges } = swapGraphOrientation(
+      nodeStates,
+      edgeStates
+    );
+
+    return {
+      ...horizontalCanvas,
+      nodes: swappedNodes.map((node, idx) => ({
+        ...horizontalCanvas.nodes[idx],
+        x: node.position?.x ?? 0,
+        y: node.position?.y ?? 0,
+      })),
+      edges: swappedEdges.map((edge, idx) => {
+        const data = edge.data as Record<string, unknown> | undefined;
+        return {
+          ...horizontalCanvas.edges[idx],
+          fromSide: (data?.fromSide as 'top' | 'right' | 'bottom' | 'left') ?? 'bottom',
+          toSide: (data?.toSide as 'top' | 'right' | 'bottom' | 'left') ?? 'top',
+        };
+      }),
+    };
+  }, []);
+
+  return (
+    <div style={{ padding: 20 }}>
+      <h2 style={{ marginBottom: 20, fontFamily: 'system-ui' }}>Orientation Comparison</h2>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
+        <div>
+          <h3 style={{ fontFamily: 'system-ui', marginBottom: 10 }}>
+            Horizontal (Left-to-Right)
+          </h3>
+          <div style={{ border: '1px solid #ddd', borderRadius: 8, overflow: 'hidden' }}>
+            <GraphRenderer canvas={horizontalCanvas} width={550} height={400} />
+          </div>
+          <div style={{ marginTop: 10, fontSize: 13, color: '#666' }}>
+            Original orientation with right→left primary flow
+          </div>
+        </div>
+
+        <div>
+          <h3 style={{ fontFamily: 'system-ui', marginBottom: 10 }}>
+            Vertical (Top-to-Bottom)
+          </h3>
+          <div style={{ border: '1px solid #ddd', borderRadius: 8, overflow: 'hidden' }}>
+            <GraphRenderer canvas={verticalCanvas} width={550} height={400} />
+          </div>
+          <div style={{ marginTop: 10, fontSize: 13, color: '#666' }}>
+            Swapped orientation with bottom→top primary flow
+          </div>
+        </div>
+      </div>
+
+      <div style={{ marginTop: 30, padding: 16, backgroundColor: '#f5f5f5', borderRadius: 8 }}>
+        <h4 style={{ marginBottom: 10, fontFamily: 'system-ui' }}>
+          Edge Side Rotation (Both Clockwise)
+        </h4>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
+          <div>
+            <strong>Clockwise Rotation:</strong>
+            <ul style={{ fontSize: 13, lineHeight: 1.8, marginTop: 8, paddingLeft: 20 }}>
+              <li><code>top</code> → <code>right</code></li>
+              <li><code>right</code> → <code>bottom</code></li>
+              <li><code>bottom</code> → <code>left</code></li>
+              <li><code>left</code> → <code>top</code></li>
+            </ul>
+          </div>
+          <div>
+            <strong>Examples:</strong>
+            <ul style={{ fontSize: 13, lineHeight: 1.8, marginTop: 8, paddingLeft: 20 }}>
+              <li><code>right → left</code> becomes <code>bottom → top</code></li>
+              <li><code>top → left</code> becomes <code>right → top</code></li>
+              <li><code>bottom → left</code> becomes <code>left → top</code></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const SideBySideComparison: Story = {
+  render: () => <SideBySideTemplate />,
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Side-by-Side Comparison**
+
+Visual comparison of the same graph in both orientations, showing how \`swapGraphOrientation\`
+transforms the layout while preserving the graph structure and flow logic.
+        `,
+      },
+    },
+  },
+};

package/src/utils/orientationUtils.ts

@@ -0,0 +1,73 @@
+import type { NodeState, EdgeState, CanvasSide } from '@principal-ai/principal-view-core';
+
+/**
+ * Swaps the orientation of a graph from horizontal to vertical or vice versa.
+ * This swaps x/y coordinates and adjusts edge connection sides accordingly.
+ */
+export function swapGraphOrientation(
+  nodes: NodeState[],
+  edges: EdgeState[]
+): { nodes: NodeState[]; edges: EdgeState[] } {
+  return {
+    nodes: swapNodePositions(nodes),
+    edges: swapEdgeSides(edges),
+  };
+}
+
+/**
+ * Swaps x and y positions for all nodes
+ */
+export function swapNodePositions(nodes: NodeState[]): NodeState[] {
+  return nodes.map(node => ({
+    ...node,
+    position: node.position ? {
+      x: node.position.y,
+      y: node.position.x,
+    } : undefined,
+  }));
+}
+
+/**
+ * Swaps edge connection sides to match the new orientation
+ * Both sides rotate clockwise: top → right → bottom → left → top
+ */
+export function swapEdgeSides(edges: EdgeState[]): EdgeState[] {
+  return edges.map(edge => {
+    const data = edge.data as Record<string, unknown> | undefined;
+    const fromSide = data?.fromSide as CanvasSide | undefined;
+    const toSide = data?.toSide as CanvasSide | undefined;
+
+    const rotatedFromSide = rotateClockwise(fromSide);
+    const rotatedToSide = rotateClockwise(toSide);
+
+    // Only include fromSide/toSide if they have defined values (not undefined)
+    const newData = { ...edge.data } as Record<string, unknown>;
+    if (rotatedFromSide !== undefined) {
+      newData.fromSide = rotatedFromSide;
+    }
+    if (rotatedToSide !== undefined) {
+      newData.toSide = rotatedToSide;
+    }
+
+    return {
+      ...edge,
+      data: newData as EdgeState['data'],
+    };
+  });
+}
+
+/**
+ * Rotates a side clockwise: top → right → bottom → left → top
+ */
+function rotateClockwise(side?: CanvasSide): CanvasSide | undefined {
+  if (!side) return undefined;
+
+  const clockwiseMap: Record<CanvasSide, CanvasSide> = {
+    top: 'right',
+    right: 'bottom',
+    bottom: 'left',
+    left: 'top',
+  };
+
+  return clockwiseMap[side];
+}

package/src/stories/RealTestExecution.stories.tsx

@@ -1,404 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
-import { TestEventPanel } from '../components/TestEventPanel';
-import type { ViewMode } from '../components/TestEventPanel';
-import type { ExtendedCanvas, GraphEvent, JsonObject, NarrativeTemplate } from '@principal-ai/principal-view-core/browser';
-import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
-import testSpans from './data/graph-converter-test-execution.json';
-import narrativeTemplate from './data/graph-converter-test.narrative.json';
-
-const meta = {
-  title: 'Features/Real Test Execution',
-  component: GraphRenderer,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Visualizes REAL test execution data from instrumented Bun tests using the "wide event" pattern. Shows actual spans with file/line information collected from running GraphConverter.test.ts. Hover over graph nodes to highlight related events in the panel.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <ThemeProvider theme={defaultEditorTheme}>
-        <div style={{ width: '100vw', height: '100vh', background: '#0a0a0a' }}>
-          <Story />
-        </div>
-      </ThemeProvider>
-    ),
-  ],
-} satisfies Meta<typeof GraphRenderer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================================================
-// Test Execution Flow Canvas
-// ============================================================================
-
-const testExecutionCanvas: ExtendedCanvas = {
-  nodes: [
-    // Test Suite
-    {
-      id: 'test-suite',
-      type: 'text',
-      text: 'GraphConverter Test Suite',
-      x: -100,
-      y: -100,
-      width: 240,
-      height: 80,
-      pv: {
-        nodeType: 'test-suite',
-        name: 'Test Suite',
-        description: 'Collection of GraphConverter tests',
-        shape: 'rectangle',
-        fill: '#3b82f6',
-      },
-    },
-
-    // Test Phase Nodes
-    {
-      id: 'setup-phase',
-      type: 'text',
-      text: 'Setup',
-      x: -250,
-      y: 50,
-      width: 120,
-      height: 80,
-      pv: {
-        nodeType: 'test-phase',
-        name: 'Setup Phase',
-        description: 'Test data preparation',
-        shape: 'hexagon',
-        fill: '#10b981',
-      },
-    },
-    {
-      id: 'execution-phase',
-      type: 'text',
-      text: 'Execution',
-      x: -80,
-      y: 50,
-      width: 120,
-      height: 80,
-      pv: {
-        nodeType: 'test-phase',
-        name: 'Execution Phase',
-        description: 'Code under test runs',
-        shape: 'hexagon',
-        fill: '#f59e0b',
-      },
-    },
-    {
-      id: 'assertion-phase',
-      type: 'text',
-      text: 'Assertion',
-      x: 90,
-      y: 50,
-      width: 120,
-      height: 80,
-      pv: {
-        nodeType: 'test-phase',
-        name: 'Assertion Phase',
-        description: 'Verify results',
-        shape: 'hexagon',
-        fill: '#8b5cf6',
-      },
-    },
-
-    // Result Node
-    {
-      id: 'test-result',
-      type: 'text',
-      text: 'Test Result',
-      x: -100,
-      y: 200,
-      width: 240,
-      height: 80,
-      pv: {
-        nodeType: 'result',
-        name: 'Test Result',
-        description: 'Pass/Fail outcome',
-        shape: 'rectangle',
-        fill: '#10b981',
-      },
-    },
-  ],
-  edges: [
-    {
-      id: 'suite-to-setup',
-      fromNode: 'test-suite',
-      toNode: 'setup-phase',
-      fromSide: 'bottom',
-      toSide: 'top',
-      label: 'start test',
-      pv: {
-        edgeType: 'flow',
-        style: 'solid',
-      },
-    },
-    {
-      id: 'setup-to-execution',
-      fromNode: 'setup-phase',
-      toNode: 'execution-phase',
-      fromSide: 'right',
-      toSide: 'left',
-      label: 'data ready',
-      pv: {
-        edgeType: 'flow',
-        style: 'solid',
-      },
-    },
-    {
-      id: 'execution-to-assertion',
-      fromNode: 'execution-phase',
-      toNode: 'assertion-phase',
-      fromSide: 'right',
-      toSide: 'left',
-      label: 'got result',
-      pv: {
-        edgeType: 'flow',
-        style: 'solid',
-      },
-    },
-    {
-      id: 'assertion-to-result',
-      fromNode: 'assertion-phase',
-      toNode: 'test-result',
-      fromSide: 'bottom',
-      toSide: 'top',
-      label: 'complete',
-      pv: {
-        edgeType: 'flow',
-        style: 'solid',
-      },
-    },
-  ],
-  pv: {
-    version: '1.0.0',
-    name: 'Test Execution Flow',
-    description: 'Visualizes the flow of test execution through phases',
-  },
-};
-
-// ============================================================================
-// Interactive Story (No Animation)
-// ============================================================================
-
-const AnimatedTestExecution = () => {
-  const [events] = useState<GraphEvent[]>([]);
-  const [currentSpanIndex, setCurrentSpanIndex] = useState(0);
-  // Show all events by default - set to a large number
-  const [currentEventIndex] = useState(999);
-  const [highlightedPhase, setHighlightedPhase] = useState<string | undefined>();
-
-  // Extract spans and logs from test data
-  const testData = testSpans as JsonObject;
-  const spans = Array.isArray(testData) ? testData : testData.spans || testData;
-  const logs = testData.logs || [];
-
-  return (
-    <div style={{ display: 'flex', width: '100vw', height: '100vh' }}>
-      {/* Event Panel - Left Side */}
-      <div style={{ flex: '0 0 50%', height: '100%', borderRight: `1px solid #333`, overflow: 'hidden' }}>
-        <TestEventPanel
-          spans={spans}
-          logs={logs}
-          currentSpanIndex={currentSpanIndex}
-          currentEventIndex={currentEventIndex}
-          highlightedPhase={highlightedPhase}
-          onSpanIndexChange={setCurrentSpanIndex}
-        />
-      </div>
-
-      {/* Graph Visualization - Right Side */}
-      <div
-        style={{ flex: '0 0 50%', height: '100%', position: 'relative' }}
-        onMouseLeave={() => setHighlightedPhase(undefined)}
-      >
-        <div
-          style={{ width: '100%', height: '100%' }}
-          onMouseOver={(e) => {
-            // Check if hovering over a phase node
-            const target = e.target as HTMLElement;
-            const textContent = target.textContent;
-            if (textContent === 'Setup') setHighlightedPhase('setup');
-            else if (textContent === 'Execution') setHighlightedPhase('execution');
-            else if (textContent === 'Assertion') setHighlightedPhase('assertion');
-          }}
-        >
-          <GraphRenderer
-            canvas={testExecutionCanvas}
-            showControls={true}
-            events={events}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-/**
- * Interactive visualization of real test execution data using the "wide event" pattern.
- *
- * This demonstrates the key concept from loggingsucks.com:
- * - ONE comprehensive span per test (not multiple child spans)
- * - Events show the narrative of what happened during execution
- * - Context accumulates through event attributes with file/line information
- * - Easy to search by test.name to get full execution story
- *
- * **Interaction:**
- * - Hover over graph nodes (Setup, Execution, Assertion) to highlight related events
- * - Watch the code journey: blue = test file, green = code under test
- * - All events are shown immediately for easy review
- */
-export const Animated: Story = {
-  render: () => <AnimatedTestExecution />,
-};
-
-/**
- * Static view of the test execution flow showing phases.
- */
-export const StaticView: Story = {
-  args: {
-    canvas: testExecutionCanvas,
-    showControls: true,
-  },
-};
-
-/**
- * Event panel component showing test execution narrative with file/line information.
- *
- * Shows how events and logs are interleaved in chronological order, with automatic
- * file/line capture from stack traces and severity-based color coding for logs.
- */
-export const EventPanelOnly: StoryObj = {
-  render: () => {
-    const testData = testSpans as JsonObject;
-    const spans = Array.isArray(testData) ? testData : testData.spans || testData;
-    const logs = testData.logs || [];
-
-    return (
-      <div style={{ width: '600px', height: '100vh' }}>
-        <TestEventPanel
-          spans={spans}
-          logs={logs}
-          currentSpanIndex={0}
-          currentEventIndex={999} // Show all events
-          highlightedPhase={undefined}
-        />
-      </div>
-    );
-  },
-};
-
-/**
- * Event panel with narrative view toggle
- *
- * Demonstrates the new narrative view mode that transforms raw OTEL events into
- * human-readable execution narratives. Toggle between "Raw Events" and "Narrative"
- * to see both views.
- *
- * Features:
- * - Human-readable narrative generated from template
- * - Scenario-based rendering (test-passed vs test-failed)
- * - Syntax highlighting for better readability
- * - Optional metadata display
- */
-export const WithNarrativeToggle: StoryObj = {
-  render: () => {
-    const [viewMode, setViewMode] = useState<ViewMode>('narrative');
-    const [currentSpanIndex, setCurrentSpanIndex] = useState(0);
-    const [showMetadata, setShowMetadata] = useState(false);
-
-    const testData = testSpans as JsonObject;
-    const spans = Array.isArray(testData) ? testData : testData.spans || testData;
-    const logs = testData.logs || [];
-
-    return (
-      <div style={{ width: '100vw', height: '100vh', display: 'flex', flexDirection: 'column' }}>
-        {/* Controls */}
-        <div
-          style={{
-            padding: '12px 20px',
-            background: '#1a1a1a',
-            borderBottom: '1px solid #333',
-            display: 'flex',
-            gap: '12px',
-            alignItems: 'center',
-          }}
-        >
-          <label style={{ color: '#999', fontSize: '14px' }}>
-            <input
-              type="checkbox"
-              checked={showMetadata}
-              onChange={(e) => setShowMetadata(e.target.checked)}
-              style={{ marginRight: '6px' }}
-            />
-            Show Metadata
-          </label>
-        </div>
-
-        {/* Event Panel */}
-        <div style={{ flex: 1, overflow: 'hidden' }}>
-          <TestEventPanel
-            spans={spans}
-            logs={logs}
-            currentSpanIndex={currentSpanIndex}
-            currentEventIndex={999}
-            onSpanIndexChange={setCurrentSpanIndex}
-            viewMode={viewMode}
-            narrativeTemplate={narrativeTemplate as NarrativeTemplate}
-            onViewModeChange={setViewMode}
-            showNarrativeMetadata={showMetadata}
-          />
-        </div>
-      </div>
-    );
-  },
-};
-
-/**
- * Split view with narrative on left, graph on right
- *
- * Shows how the narrative view integrates with the graph visualization,
- * providing a complete picture of test execution.
- */
-export const NarrativeWithGraph: StoryObj = {
-  render: () => {
-    const [viewMode, setViewMode] = useState<ViewMode>('narrative');
-    const [currentSpanIndex, setCurrentSpanIndex] = useState(0);
-    const [events] = useState<GraphEvent[]>([]);
-
-    const testData = testSpans as JsonObject;
-    const spans = Array.isArray(testData) ? testData : testData.spans || testData;
-    const logs = testData.logs || [];
-
-    return (
-      <div style={{ display: 'flex', width: '100vw', height: '100vh' }}>
-        {/* Event Panel - Left Side */}
-        <div style={{ flex: '0 0 50%', height: '100%', borderRight: '1px solid #333', overflow: 'hidden' }}>
-          <TestEventPanel
-            spans={spans}
-            logs={logs}
-            currentSpanIndex={currentSpanIndex}
-            currentEventIndex={999}
-            onSpanIndexChange={setCurrentSpanIndex}
-            viewMode={viewMode}
-            narrativeTemplate={narrativeTemplate as NarrativeTemplate}
-            onViewModeChange={setViewMode}
-            showNarrativeMetadata={true}
-          />
-        </div>
-
-        {/* Graph Visualization - Right Side */}
-        <div style={{ flex: '0 0 50%', height: '100%', position: 'relative' }}>
-          <GraphRenderer canvas={testExecutionCanvas} showControls={true} events={events} />
-        </div>
-      </div>
-    );
-  },
-};

package/src/stories/ValidatedExecution.stories.tsx

@@ -1,158 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
-import { TestEventPanel } from '../components/TestEventPanel';
-import type { ExtendedCanvas, JsonValue } from '@principal-ai/principal-view-core/browser';
-import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
-import executionCanvas from '../../../../.principal-views/graph-converter-execution.otel.canvas';
-import validatedSpans from './data/graph-converter-validated-execution.json';
-
-const meta = {
-  title: 'Features/Validated Execution',
-  component: GraphRenderer,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Demonstrates type-safe event emission with schema validation. The canvas defines expected events, and production code is validated against this schema. Shows how events match the schema defined in graph-converter-execution.otel.canvas.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  decorators: [
-    (Story) => (
-      <ThemeProvider theme={defaultEditorTheme}>
-        <div style={{ width: '100vw', height: '100vh', background: '#0a0a0a' }}>
-          <Story />
-        </div>
-      </ThemeProvider>
-    ),
-  ],
-} satisfies Meta<typeof GraphRenderer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Graph visualization of the execution flow with event schema definitions.
- *
- * This canvas defines:
- * - `graph-converter` node with 5 event types
- * - `validation` node with 2 event types
- * - `graph-output` node with 1 event type
- *
- * Each event type has a schema defining:
- * - Required/optional fields
- * - Field types (string, number, boolean, etc.)
- * - Field descriptions
- *
- * See `.principal-views/graph-converter-execution.otel.canvas` for the full schema.
- */
-export const ExecutionFlow: Story = {
-  args: {
-    canvas: executionCanvas as ExtendedCanvas,
-    showControls: true,
-  },
-};
-
-/**
- * Event panel showing validated execution data.
- *
- * These events were emitted using `createValidatedSpanEmitter()` which:
- * - Validates events against the canvas schema
- * - Ensures required fields are present
- * - Checks field types match the schema
- * - Throws errors in strict mode if validation fails
- *
- * All events in this panel passed schema validation.
- */
-export const ValidatedEvents: Story = {
-  render: () => (
-    <div style={{ width: '800px', height: '100vh' }}>
-      <TestEventPanel
-        spans={validatedSpans as JsonValue[]}
-        currentSpanIndex={0}
-        currentEventIndex={10} // Show all events
-        highlightedPhase={undefined}
-      />
-    </div>
-  ),
-};
-
-/**
- * Side-by-side view of execution flow and validated events.
- *
- * **How it works:**
- * 1. Canvas defines event schemas (what events should be emitted)
- * 2. Tests use `createValidatedSpanEmitter()` to emit events
- * 3. Events are validated against the schema in strict mode
- * 4. If validation fails, test throws `EventValidationError`
- * 5. If validation passes, events are emitted and collected
- *
- * This ensures production code emits events that match the architecture.
- */
-export const FlowWithValidation: Story = {
-  render: () => (
-    <div style={{ display: 'flex', width: '100%', height: '100%' }}>
-      {/* Graph Visualization - Left Side */}
-      <div style={{ flex: '0 0 60%', height: '100%', position: 'relative' }}>
-        <GraphRenderer
-          canvas={executionCanvas as ExtendedCanvas}
-          showControls={true}
-        />
-      </div>
-
-      {/* Event Panel - Right Side */}
-      <div style={{ flex: '0 0 40%', height: '100%', borderLeft: '1px solid #333' }}>
-        <div style={{ padding: '20px', color: '#fff', borderBottom: '1px solid #333' }}>
-          <h3 style={{ margin: '0 0 10px 0', fontSize: '16px' }}>
-            Type-Safe Validated Events
-          </h3>
-          <p style={{ margin: 0, fontSize: '12px', color: '#888' }}>
-            Events validated against canvas schema. See{' '}
-            <code>.principal-views/graph-converter-execution.otel.canvas</code>
-          </p>
-        </div>
-        <TestEventPanel
-          spans={validatedSpans as JsonValue[]}
-          currentSpanIndex={0}
-          currentEventIndex={10}
-          highlightedPhase={undefined}
-        />
-      </div>
-    </div>
-  ),
-};
-
-/**
- * Canvas with event schema definitions (JSON view).
- *
- * Shows the raw canvas structure including event schemas.
- * Notice the `pv.events` property on each node defining:
- * - Event names (e.g., "conversion.started")
- * - Event descriptions
- * - Field schemas with types and requirements
- */
-export const CanvasSchema: Story = {
-  render: () => (
-    <div
-      style={{
-        padding: '20px',
-        color: '#fff',
-        fontFamily: 'monospace',
-        fontSize: '12px',
-        overflow: 'auto',
-        height: '100vh',
-      }}
-    >
-      <h2>Event Schema Definition</h2>
-      <p>
-        This canvas defines event schemas for type-safe telemetry validation.
-      </p>
-      <pre style={{ background: '#1e1e1e', padding: '20px', borderRadius: '8px' }}>
-        {JSON.stringify(executionCanvas, null, 2)}
-      </pre>
-    </div>
-  ),
-};