@principal-ai/principal-view-react 0.6.10 → 0.6.12

package/src/stories/MultiDirectionalConnections.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 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',
@@ -15,6 +16,13 @@ const meta = {
     },
   },
   tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
 } satisfies Meta<typeof GraphRenderer>;
 
 export default meta;

package/src/stories/NodeFieldsAudit.stories.tsx

@@ -2,6 +2,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';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
   title: 'Audit/NodeFieldsAudit',
@@ -10,6 +11,13 @@ const meta = {
     layout: 'centered',
   },
   tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
 } satisfies Meta<typeof GraphRenderer>;
 
 export default meta;
@@ -31,10 +39,10 @@ const allFieldsCanvas: ExtendedCanvas = {
       color: '#6366f1', // color field
       pv: {
         nodeType: 'fully-populated',
-        shape: 'rectangle',        // shape field
-        icon: 'Server',            // icon field
-        fill: '#6366f1',           // pv.fill (takes priority over node.color)
-        stroke: '#4f46e5',         // pv.stroke (border color)
+        shape: 'rectangle', // shape field
+        icon: 'Server', // icon field
+        fill: '#6366f1', // pv.fill (takes priority over node.color)
+        stroke: '#4f46e5', // pv.stroke (border color)
         dataSchema: {
           name: { type: 'string', displayInLabel: true },
           description: { type: 'string', displayInLabel: true },
@@ -214,14 +222,13 @@ const fieldVariationsCanvas: ExtendedCanvas = {
       y: 80,
       width: 120,
       height: 80,
-      text: 'Rectangle',
+      text: '# Rectangle\n\nDefault shape',
       color: '#6366f1',
       pv: {
         nodeType: 'shape-rect',
         shape: 'rectangle',
         icon: 'Square',
         fill: '#6366f1',
-        description: 'Default shape',
         dataSchema: { name: { type: 'string', displayInLabel: true } },
       },
     },
@@ -232,14 +239,13 @@ const fieldVariationsCanvas: ExtendedCanvas = {
       y: 80,
       width: 100,
       height: 100,
-      text: 'Circle',
+      text: '# Circle\n\nRound shape',
       color: '#8b5cf6',
       pv: {
         nodeType: 'shape-circle',
         shape: 'circle',
         icon: 'Circle',
         fill: '#8b5cf6',
-        description: 'Round shape',
         dataSchema: { name: { type: 'string', displayInLabel: true } },
       },
     },
@@ -250,14 +256,13 @@ const fieldVariationsCanvas: ExtendedCanvas = {
       y: 80,
       width: 120,
       height: 120,
-      text: 'Hexagon',
+      text: '# Hexagon\n\n6-sided polygon',
       color: '#06b6d4',
       pv: {
         nodeType: 'shape-hexagon',
         shape: 'hexagon',
         icon: 'Hexagon',
         fill: '#06b6d4',
-        description: '6-sided polygon',
         dataSchema: { name: { type: 'string', displayInLabel: true } },
       },
     },
@@ -268,14 +273,13 @@ const fieldVariationsCanvas: ExtendedCanvas = {
       y: 80,
       width: 90,
       height: 90,
-      text: 'Diamond',
+      text: '# Diamond\n\nRotated square',
       color: '#f59e0b',
       pv: {
         nodeType: 'shape-diamond',
         shape: 'diamond',
         icon: 'Diamond',
         fill: '#f59e0b',
-        description: 'Rotated square',
         dataSchema: { name: { type: 'string', displayInLabel: true } },
       },
     },
@@ -492,9 +496,7 @@ const FieldReferenceTemplate = () => {
                 borderRadius: 4,
               }}
             >
-              <div style={{ fontSize: 10, color: '#f97316', marginBottom: 4 }}>
-                ICON
-              </div>
+              <div style={{ fontSize: 10, color: '#f97316', marginBottom: 4 }}>ICON</div>
               <span style={{ fontSize: 24 }}>S</span>
             </div>
 
@@ -521,9 +523,7 @@ const FieldReferenceTemplate = () => {
                 borderRadius: 4,
               }}
             >
-              <div style={{ fontSize: 10, color: '#3b82f6', marginBottom: 4 }}>
-                STATE BADGE
-              </div>
+              <div style={{ fontSize: 10, color: '#3b82f6', marginBottom: 4 }}>STATE BADGE</div>
               <span
                 style={{
                   backgroundColor: '#22c55e',
@@ -573,7 +573,14 @@ const FieldReferenceTemplate = () => {
             </thead>
             <tbody>
               <tr>
-                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#f97316' }}>
+                <td
+                  style={{
+                    padding: 8,
+                    borderBottom: '1px solid #e5e7eb',
+                    fontWeight: 'bold',
+                    color: '#f97316',
+                  }}
+                >
                   icon
                 </td>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
@@ -584,7 +591,14 @@ const FieldReferenceTemplate = () => {
                 </td>
               </tr>
               <tr>
-                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#22c55e' }}>
+                <td
+                  style={{
+                    padding: 8,
+                    borderBottom: '1px solid #e5e7eb',
+                    fontWeight: 'bold',
+                    color: '#22c55e',
+                  }}
+                >
                   label
                 </td>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
@@ -595,7 +609,14 @@ const FieldReferenceTemplate = () => {
                 </td>
               </tr>
               <tr>
-                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#3b82f6' }}>
+                <td
+                  style={{
+                    padding: 8,
+                    borderBottom: '1px solid #e5e7eb',
+                    fontWeight: 'bold',
+                    color: '#3b82f6',
+                  }}
+                >
                   state
                 </td>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
@@ -606,7 +627,14 @@ const FieldReferenceTemplate = () => {
                 </td>
               </tr>
               <tr>
-                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#6366f1' }}>
+                <td
+                  style={{
+                    padding: 8,
+                    borderBottom: '1px solid #e5e7eb',
+                    fontWeight: 'bold',
+                    color: '#6366f1',
+                  }}
+                >
                   color
                 </td>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
@@ -617,7 +645,14 @@ const FieldReferenceTemplate = () => {
                 </td>
               </tr>
               <tr>
-                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#6366f1' }}>
+                <td
+                  style={{
+                    padding: 8,
+                    borderBottom: '1px solid #e5e7eb',
+                    fontWeight: 'bold',
+                    color: '#6366f1',
+                  }}
+                >
                   stroke
                 </td>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
@@ -628,7 +663,14 @@ const FieldReferenceTemplate = () => {
                 </td>
               </tr>
               <tr>
-                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#6366f1' }}>
+                <td
+                  style={{
+                    padding: 8,
+                    borderBottom: '1px solid #e5e7eb',
+                    fontWeight: 'bold',
+                    color: '#6366f1',
+                  }}
+                >
                   shape
                 </td>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
@@ -639,7 +681,14 @@ const FieldReferenceTemplate = () => {
                 </td>
               </tr>
               <tr>
-                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#6366f1' }}>
+                <td
+                  style={{
+                    padding: 8,
+                    borderBottom: '1px solid #e5e7eb',
+                    fontWeight: 'bold',
+                    color: '#6366f1',
+                  }}
+                >
                   size
                 </td>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
@@ -650,15 +699,11 @@ const FieldReferenceTemplate = () => {
                 </td>
               </tr>
               <tr>
-                <td style={{ padding: 8, fontWeight: 'bold', color: '#ef4444' }}>
-                  hasViolations
-                </td>
+                <td style={{ padding: 8, fontWeight: 'bold', color: '#ef4444' }}>hasViolations</td>
                 <td style={{ padding: 8 }}>
                   <code>computed</code>
                 </td>
-                <td style={{ padding: 8 }}>
-                  Shows warning indicator when true
-                </td>
+                <td style={{ padding: 8 }}>Shows warning indicator when true</td>
               </tr>
             </tbody>
           </table>
@@ -977,7 +1022,14 @@ const PopupReferenceTemplate = () => {
             <tbody>
               <tr>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>1</td>
-                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#f97316' }}>
+                <td
+                  style={{
+                    padding: 8,
+                    borderBottom: '1px solid #e5e7eb',
+                    fontWeight: 'bold',
+                    color: '#f97316',
+                  }}
+                >
                   Icon
                 </td>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>Yes (picker)</td>
@@ -987,7 +1039,14 @@ const PopupReferenceTemplate = () => {
               </tr>
               <tr>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>2</td>
-                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#22c55e' }}>
+                <td
+                  style={{
+                    padding: 8,
+                    borderBottom: '1px solid #e5e7eb',
+                    fontWeight: 'bold',
+                    color: '#22c55e',
+                  }}
+                >
                   Type
                 </td>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>Yes (dropdown)</td>
@@ -997,7 +1056,14 @@ const PopupReferenceTemplate = () => {
               </tr>
               <tr>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>3</td>
-                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#3b82f6' }}>
+                <td
+                  style={{
+                    padding: 8,
+                    borderBottom: '1px solid #e5e7eb',
+                    fontWeight: 'bold',
+                    color: '#3b82f6',
+                  }}
+                >
                   State
                 </td>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>No</td>
@@ -1007,7 +1073,14 @@ const PopupReferenceTemplate = () => {
               </tr>
               <tr>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>4</td>
-                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#8b5cf6' }}>
+                <td
+                  style={{
+                    padding: 8,
+                    borderBottom: '1px solid #e5e7eb',
+                    fontWeight: 'bold',
+                    color: '#8b5cf6',
+                  }}
+                >
                   Name
                 </td>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>Yes (inline)</td>
@@ -1017,7 +1090,14 @@ const PopupReferenceTemplate = () => {
               </tr>
               <tr>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>5</td>
-                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#06b6d4' }}>
+                <td
+                  style={{
+                    padding: 8,
+                    borderBottom: '1px solid #e5e7eb',
+                    fontWeight: 'bold',
+                    color: '#06b6d4',
+                  }}
+                >
                   Properties
                 </td>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>No</td>
@@ -1027,7 +1107,14 @@ const PopupReferenceTemplate = () => {
               </tr>
               <tr>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>6</td>
-                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#64748b' }}>
+                <td
+                  style={{
+                    padding: 8,
+                    borderBottom: '1px solid #e5e7eb',
+                    fontWeight: 'bold',
+                    color: '#64748b',
+                  }}
+                >
                   ID
                 </td>
                 <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>No</td>

package/src/stories/NodeShapes.stories.tsx

@@ -2,6 +2,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';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
 
 const meta = {
   title: 'Audit/NodeShapes',
@@ -10,6 +11,13 @@ const meta = {
     layout: 'centered',
   },
   tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
 } satisfies Meta<typeof GraphRenderer>;
 
 export default meta;
@@ -33,7 +41,7 @@ const allShapesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'rectangle-demo',
         shape: 'rectangle',
-        icon: 'square',
+        icon: 'Square',
       },
     },
     {
@@ -48,7 +56,7 @@ const allShapesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'circle-demo',
         shape: 'circle',
-        icon: 'circle',
+        icon: 'Circle',
       },
     },
     {
@@ -63,7 +71,7 @@ const allShapesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'hexagon-demo',
         shape: 'hexagon',
-        icon: 'hexagon',
+        icon: 'Hexagon',
         size: { width: 120, height: 120 },
       },
     },
@@ -79,7 +87,7 @@ const allShapesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'diamond-demo',
         shape: 'diamond',
-        icon: 'diamond',
+        icon: 'Diamond',
         size: { width: 70, height: 70 },
       },
     },
@@ -95,7 +103,7 @@ const allShapesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'custom-demo',
         shape: 'custom',
-        icon: 'settings',
+        icon: 'Settings',
       },
     },
   ],
@@ -364,7 +372,7 @@ const shapesWithIconsCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'server',
         shape: 'rectangle',
-        icon: 'server',
+        icon: 'Server',
       },
     },
     {
@@ -379,7 +387,7 @@ const shapesWithIconsCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'user',
         shape: 'circle',
-        icon: 'user',
+        icon: 'User',
       },
     },
     {
@@ -394,7 +402,7 @@ const shapesWithIconsCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'database',
         shape: 'hexagon',
-        icon: 'database',
+        icon: 'Database',
       },
     },
     {
@@ -409,7 +417,7 @@ const shapesWithIconsCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'cache',
         shape: 'diamond',
-        icon: 'zap',
+        icon: 'Zap',
       },
     },
   ],
@@ -459,11 +467,11 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'process',
         shape: 'rectangle',
-        icon: 'box',
+        icon: 'Box',
         states: {
-          idle: { color: '#94a3b8', icon: 'box' },
-          active: { color: '#3b82f6', icon: 'play' },
-          error: { color: '#ef4444', icon: 'alert-circle' },
+          idle: { color: '#94a3b8', icon: 'Box' },
+          active: { color: '#3b82f6', icon: 'Play' },
+          error: { color: '#ef4444', icon: 'AlertCircle' },
         },
       },
     },
@@ -479,11 +487,11 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'agent',
         shape: 'circle',
-        icon: 'user',
+        icon: 'User',
         states: {
-          idle: { color: '#94a3b8', icon: 'user' },
-          active: { color: '#22c55e', icon: 'user-check' },
-          error: { color: '#ef4444', icon: 'user-x' },
+          idle: { color: '#94a3b8', icon: 'User' },
+          active: { color: '#22c55e', icon: 'UserCheck' },
+          error: { color: '#ef4444', icon: 'UserX' },
         },
       },
     },
@@ -499,11 +507,11 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'storage',
         shape: 'hexagon',
-        icon: 'database',
+        icon: 'Database',
         states: {
-          idle: { color: '#94a3b8', icon: 'database' },
-          active: { color: '#22c55e', icon: 'hard-drive' },
-          error: { color: '#ef4444', icon: 'database' },
+          idle: { color: '#94a3b8', icon: 'Database' },
+          active: { color: '#22c55e', icon: 'HardDrive' },
+          error: { color: '#ef4444', icon: 'Database' },
         },
       },
     },
@@ -519,11 +527,11 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'decision',
         shape: 'diamond',
-        icon: 'git-branch',
+        icon: 'GitBranch',
         states: {
-          idle: { color: '#94a3b8', icon: 'git-branch' },
-          active: { color: '#f97316', icon: 'git-commit' },
-          error: { color: '#ef4444', icon: 'git-branch' },
+          idle: { color: '#94a3b8', icon: 'GitBranch' },
+          active: { color: '#f97316', icon: 'GitCommit' },
+          error: { color: '#ef4444', icon: 'GitBranch' },
         },
       },
     },
@@ -541,7 +549,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'process-active',
         shape: 'rectangle',
-        icon: 'play',
+        icon: 'Play',
         color: '#3b82f6',
       },
     },
@@ -557,7 +565,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'agent-active',
         shape: 'circle',
-        icon: 'user-check',
+        icon: 'UserCheck',
         color: '#22c55e',
       },
     },
@@ -573,7 +581,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'storage-active',
         shape: 'hexagon',
-        icon: 'hard-drive',
+        icon: 'HardDrive',
         color: '#22c55e',
       },
     },
@@ -589,7 +597,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'decision-active',
         shape: 'diamond',
-        icon: 'git-commit',
+        icon: 'GitCommit',
         color: '#f97316',
       },
     },
@@ -607,7 +615,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'process-error',
         shape: 'rectangle',
-        icon: 'alert-circle',
+        icon: 'AlertCircle',
         color: '#ef4444',
       },
     },
@@ -623,7 +631,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'agent-error',
         shape: 'circle',
-        icon: 'user-x',
+        icon: 'UserX',
         color: '#ef4444',
       },
     },
@@ -639,7 +647,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'storage-error',
         shape: 'hexagon',
-        icon: 'database',
+        icon: 'Database',
         color: '#ef4444',
       },
     },
@@ -655,7 +663,7 @@ const shapesWithStatesCanvas: ExtendedCanvas = {
       pv: {
         nodeType: 'decision-error',
         shape: 'diamond',
-        icon: 'git-branch',
+        icon: 'GitBranch',
         color: '#ef4444',
       },
     },
@@ -699,58 +707,64 @@ const ShapeComparisonTemplate = () => {
     <div style={{ padding: 20 }}>
       <h2 style={{ marginBottom: 20, fontFamily: 'system-ui' }}>Node Shape Comparison</h2>
 
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 20, marginBottom: 30 }}>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(5, 1fr)',
+          gap: 20,
+          marginBottom: 30,
+        }}
+      >
         <div style={{ textAlign: 'center' }}>
           <h4 style={{ marginBottom: 10, fontFamily: 'system-ui' }}>Rectangle</h4>
           <code style={{ fontSize: 11 }}>shape: 'rectangle'</code>
-          <div style={{ marginTop: 10, fontSize: 12, color: '#666' }}>
-            borderRadius: 8px
-          </div>
+          <div style={{ marginTop: 10, fontSize: 12, color: '#666' }}>borderRadius: 8px</div>
         </div>
         <div style={{ textAlign: 'center' }}>
           <h4 style={{ marginBottom: 10, fontFamily: 'system-ui' }}>Circle</h4>
           <code style={{ fontSize: 11 }}>shape: 'circle'</code>
-          <div style={{ marginTop: 10, fontSize: 12, color: '#666' }}>
-            borderRadius: 50%
-          </div>
+          <div style={{ marginTop: 10, fontSize: 12, color: '#666' }}>borderRadius: 50%</div>
         </div>
         <div style={{ textAlign: 'center' }}>
           <h4 style={{ marginBottom: 10, fontFamily: 'system-ui' }}>Hexagon</h4>
           <code style={{ fontSize: 11 }}>shape: 'hexagon'</code>
-          <div style={{ marginTop: 10, fontSize: 12, color: '#666' }}>
-            CSS clip-path polygon
-          </div>
+          <div style={{ marginTop: 10, fontSize: 12, color: '#666' }}>CSS clip-path polygon</div>
         </div>
         <div style={{ textAlign: 'center' }}>
           <h4 style={{ marginBottom: 10, fontFamily: 'system-ui' }}>Diamond</h4>
           <code style={{ fontSize: 11 }}>shape: 'diamond'</code>
-          <div style={{ marginTop: 10, fontSize: 12, color: '#666' }}>
-            rotate(45deg)
-          </div>
+          <div style={{ marginTop: 10, fontSize: 12, color: '#666' }}>rotate(45deg)</div>
         </div>
         <div style={{ textAlign: 'center' }}>
           <h4 style={{ marginBottom: 10, fontFamily: 'system-ui' }}>Custom</h4>
           <code style={{ fontSize: 11 }}>shape: 'custom'</code>
-          <div style={{ marginTop: 10, fontSize: 12, color: '#666' }}>
-            Falls back to rectangle
-          </div>
+          <div style={{ marginTop: 10, fontSize: 12, color: '#666' }}>Falls back to rectangle</div>
         </div>
       </div>
 
-      <GraphRenderer
-        canvas={allShapesCanvas}
-        width={1100}
-        height={280}
-      />
+      <GraphRenderer canvas={allShapesCanvas} width={1100} height={280} />
 
       <div style={{ marginTop: 30, padding: 16, backgroundColor: '#f5f5f5', borderRadius: 8 }}>
         <h4 style={{ marginBottom: 10, fontFamily: 'system-ui' }}>Implementation Notes</h4>
         <ul style={{ fontSize: 13, lineHeight: 1.8, margin: 0, paddingLeft: 20 }}>
-          <li><strong>Rectangle</strong>: Standard box with 8px border radius</li>
-          <li><strong>Circle</strong>: Forces equal width/height, 50% border radius</li>
-          <li><strong>Hexagon</strong>: Flat-top style using <code>clipPath: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%)</code></li>
-          <li><strong>Diamond</strong>: Fixed square rotated 45°, inner content rotated -45° to keep text upright</li>
-          <li><strong>Custom</strong>: Currently renders as rectangle (placeholder for future custom shapes)</li>
+          <li>
+            <strong>Rectangle</strong>: Standard box with 8px border radius
+          </li>
+          <li>
+            <strong>Circle</strong>: Forces equal width/height, 50% border radius
+          </li>
+          <li>
+            <strong>Hexagon</strong>: Flat-top style using{' '}
+            <code>clipPath: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%)</code>
+          </li>
+          <li>
+            <strong>Diamond</strong>: Fixed square rotated 45°, inner content rotated -45° to keep
+            text upright
+          </li>
+          <li>
+            <strong>Custom</strong>: Currently renders as rectangle (placeholder for future custom
+            shapes)
+          </li>
         </ul>
       </div>
     </div>