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

package/src/stories/NodeFieldsAudit.stories.tsx

@@ -0,0 +1,1095 @@
+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';
+
+const meta = {
+  title: 'Audit/NodeFieldsAudit',
+  component: GraphRenderer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof GraphRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Canvas showing a single node with ALL fields populated and labeled
+ */
+const allFieldsCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'all-fields-node',
+      type: 'text',
+      x: 200,
+      y: 150,
+      width: 160,
+      height: 120,
+      text: 'Display Label (from dataSchema)',
+      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)
+        dataSchema: {
+          name: { type: 'string', displayInLabel: true },
+          description: { type: 'string', displayInLabel: true },
+          status: { type: 'string', displayInLabel: false },
+        },
+        states: {
+          idle: { color: '#94a3b8', icon: 'Circle', label: 'Idle' },
+          active: { color: '#22c55e', icon: 'CheckCircle', label: 'Active' },
+          error: { color: '#ef4444', icon: 'XCircle', label: 'Error' },
+        },
+      },
+    },
+  ],
+  edges: [],
+  pv: {
+    version: '1.0.0',
+    name: 'All Fields Audit',
+    edgeTypes: {},
+  },
+};
+
+/**
+ * Canvas showing nodes with each field labeled for reference
+ */
+const labeledFieldsCanvas: ExtendedCanvas = {
+  nodes: [
+    // Reference node with annotations
+    {
+      id: 'labeled-node',
+      type: 'text',
+      x: 300,
+      y: 200,
+      width: 180,
+      height: 140,
+      text: 'API Gateway',
+      color: '#3b82f6',
+      pv: {
+        nodeType: 'server',
+        shape: 'rectangle',
+        icon: 'Server',
+        fill: '#3b82f6',
+        stroke: '#2563eb',
+        dataSchema: {
+          name: { type: 'string', displayInLabel: true },
+        },
+        states: {
+          processing: { color: '#3b82f6', icon: 'Loader', label: 'Processing' },
+        },
+      },
+    },
+    // Icon label
+    {
+      id: 'icon-label',
+      type: 'text',
+      x: 100,
+      y: 140,
+      width: 120,
+      height: 30,
+      text: 'ICON',
+      color: '#f97316',
+      pv: {
+        nodeType: 'label',
+        shape: 'rectangle',
+        fill: '#f97316',
+        dataSchema: {},
+      },
+    },
+    // Label field annotation
+    {
+      id: 'label-annotation',
+      type: 'text',
+      x: 100,
+      y: 200,
+      width: 120,
+      height: 30,
+      text: 'LABEL',
+      color: '#f97316',
+      pv: {
+        nodeType: 'label',
+        shape: 'rectangle',
+        fill: '#f97316',
+        dataSchema: {},
+      },
+    },
+    // State badge annotation
+    {
+      id: 'state-annotation',
+      type: 'text',
+      x: 100,
+      y: 260,
+      width: 120,
+      height: 30,
+      text: 'STATE BADGE',
+      color: '#f97316',
+      pv: {
+        nodeType: 'label',
+        shape: 'rectangle',
+        fill: '#f97316',
+        dataSchema: {},
+      },
+    },
+    // Border/stroke annotation
+    {
+      id: 'stroke-annotation',
+      type: 'text',
+      x: 540,
+      y: 200,
+      width: 140,
+      height: 30,
+      text: 'STROKE/BORDER',
+      color: '#f97316',
+      pv: {
+        nodeType: 'label',
+        shape: 'rectangle',
+        fill: '#f97316',
+        dataSchema: {},
+      },
+    },
+  ],
+  edges: [
+    {
+      id: 'icon-pointer',
+      fromNode: 'icon-label',
+      toNode: 'labeled-node',
+      fromSide: 'right',
+      toSide: 'left',
+      pv: { edgeType: 'pointer' },
+    },
+    {
+      id: 'label-pointer',
+      fromNode: 'label-annotation',
+      toNode: 'labeled-node',
+      fromSide: 'right',
+      toSide: 'left',
+      pv: { edgeType: 'pointer' },
+    },
+    {
+      id: 'state-pointer',
+      fromNode: 'state-annotation',
+      toNode: 'labeled-node',
+      fromSide: 'right',
+      toSide: 'left',
+      pv: { edgeType: 'pointer' },
+    },
+    {
+      id: 'stroke-pointer',
+      fromNode: 'stroke-annotation',
+      toNode: 'labeled-node',
+      fromSide: 'left',
+      toSide: 'right',
+      pv: { edgeType: 'pointer' },
+    },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Labeled Fields',
+    edgeTypes: {
+      pointer: {
+        style: 'dashed',
+        color: '#f97316',
+        directed: true,
+      },
+    },
+  },
+};
+
+/**
+ * Canvas showing all visual variations of node fields
+ */
+const fieldVariationsCanvas: ExtendedCanvas = {
+  nodes: [
+    // Row 1: Shape variations
+    {
+      id: 'shape-rect',
+      type: 'text',
+      x: 80,
+      y: 80,
+      width: 120,
+      height: 80,
+      text: 'Rectangle',
+      color: '#6366f1',
+      pv: {
+        nodeType: 'shape-rect',
+        shape: 'rectangle',
+        icon: 'Square',
+        fill: '#6366f1',
+        description: 'Default shape',
+        dataSchema: { name: { type: 'string', displayInLabel: true } },
+      },
+    },
+    {
+      id: 'shape-circle',
+      type: 'text',
+      x: 260,
+      y: 80,
+      width: 100,
+      height: 100,
+      text: 'Circle',
+      color: '#8b5cf6',
+      pv: {
+        nodeType: 'shape-circle',
+        shape: 'circle',
+        icon: 'Circle',
+        fill: '#8b5cf6',
+        description: 'Round shape',
+        dataSchema: { name: { type: 'string', displayInLabel: true } },
+      },
+    },
+    {
+      id: 'shape-hexagon',
+      type: 'text',
+      x: 420,
+      y: 80,
+      width: 120,
+      height: 120,
+      text: 'Hexagon',
+      color: '#06b6d4',
+      pv: {
+        nodeType: 'shape-hexagon',
+        shape: 'hexagon',
+        icon: 'Hexagon',
+        fill: '#06b6d4',
+        description: '6-sided polygon',
+        dataSchema: { name: { type: 'string', displayInLabel: true } },
+      },
+    },
+    {
+      id: 'shape-diamond',
+      type: 'text',
+      x: 600,
+      y: 80,
+      width: 90,
+      height: 90,
+      text: 'Diamond',
+      color: '#f59e0b',
+      pv: {
+        nodeType: 'shape-diamond',
+        shape: 'diamond',
+        icon: 'Diamond',
+        fill: '#f59e0b',
+        description: 'Rotated square',
+        dataSchema: { name: { type: 'string', displayInLabel: true } },
+      },
+    },
+
+    // Row 2: State variations (same node type, different states)
+    {
+      id: 'state-idle',
+      type: 'text',
+      x: 80,
+      y: 260,
+      width: 120,
+      height: 80,
+      text: 'Idle State',
+      color: '#94a3b8',
+      pv: {
+        nodeType: 'stateful-idle',
+        shape: 'rectangle',
+        icon: 'Pause',
+        fill: '#94a3b8',
+        dataSchema: { name: { type: 'string', displayInLabel: true } },
+        states: {
+          idle: { color: '#94a3b8', icon: 'Pause', label: 'Idle' },
+        },
+      },
+    },
+    {
+      id: 'state-active',
+      type: 'text',
+      x: 260,
+      y: 260,
+      width: 120,
+      height: 80,
+      text: 'Active State',
+      color: '#22c55e',
+      pv: {
+        nodeType: 'stateful-active',
+        shape: 'rectangle',
+        icon: 'Play',
+        fill: '#22c55e',
+        dataSchema: { name: { type: 'string', displayInLabel: true } },
+        states: {
+          active: { color: '#22c55e', icon: 'Play', label: 'Active' },
+        },
+      },
+    },
+    {
+      id: 'state-warning',
+      type: 'text',
+      x: 440,
+      y: 260,
+      width: 120,
+      height: 80,
+      text: 'Warning State',
+      color: '#f59e0b',
+      pv: {
+        nodeType: 'stateful-warning',
+        shape: 'rectangle',
+        icon: 'AlertTriangle',
+        fill: '#f59e0b',
+        dataSchema: { name: { type: 'string', displayInLabel: true } },
+        states: {
+          warning: { color: '#f59e0b', icon: 'AlertTriangle', label: 'Warning' },
+        },
+      },
+    },
+    {
+      id: 'state-error',
+      type: 'text',
+      x: 620,
+      y: 260,
+      width: 120,
+      height: 80,
+      text: 'Error State',
+      color: '#ef4444',
+      pv: {
+        nodeType: 'stateful-error',
+        shape: 'rectangle',
+        icon: 'XCircle',
+        fill: '#ef4444',
+        dataSchema: { name: { type: 'string', displayInLabel: true } },
+        states: {
+          error: { color: '#ef4444', icon: 'XCircle', label: 'Error' },
+        },
+      },
+    },
+
+    // Row 3: With and without icon/state
+    {
+      id: 'with-icon-state',
+      type: 'text',
+      x: 80,
+      y: 420,
+      width: 140,
+      height: 100,
+      text: 'With Icon & State',
+      color: '#3b82f6',
+      pv: {
+        nodeType: 'full-featured',
+        shape: 'rectangle',
+        icon: 'Server',
+        fill: '#3b82f6',
+        dataSchema: { name: { type: 'string', displayInLabel: true } },
+        states: {
+          online: { color: '#22c55e', icon: 'CheckCircle', label: 'Online' },
+        },
+      },
+    },
+    {
+      id: 'with-icon-no-state',
+      type: 'text',
+      x: 280,
+      y: 420,
+      width: 140,
+      height: 100,
+      text: 'Icon, No State',
+      color: '#8b5cf6',
+      pv: {
+        nodeType: 'icon-only',
+        shape: 'rectangle',
+        icon: 'Database',
+        fill: '#8b5cf6',
+        dataSchema: { name: { type: 'string', displayInLabel: true } },
+      },
+    },
+    {
+      id: 'no-icon-with-state',
+      type: 'text',
+      x: 480,
+      y: 420,
+      width: 140,
+      height: 100,
+      text: 'State, No Icon',
+      color: '#06b6d4',
+      pv: {
+        nodeType: 'state-only',
+        shape: 'rectangle',
+        fill: '#06b6d4',
+        dataSchema: { name: { type: 'string', displayInLabel: true } },
+        states: {
+          pending: { color: '#f59e0b', label: 'Pending' },
+        },
+      },
+    },
+    {
+      id: 'minimal',
+      type: 'text',
+      x: 680,
+      y: 420,
+      width: 140,
+      height: 100,
+      text: 'Minimal (Label Only)',
+      color: '#64748b',
+      pv: {
+        nodeType: 'minimal',
+        shape: 'rectangle',
+        fill: '#64748b',
+        dataSchema: { name: { type: 'string', displayInLabel: true } },
+      },
+    },
+  ],
+  edges: [],
+  pv: {
+    version: '1.0.0',
+    name: 'Field Variations',
+    description: 'All combinations of node fields',
+    edgeTypes: {},
+  },
+};
+
+/**
+ * Interactive field reference with documentation
+ */
+const FieldReferenceTemplate = () => {
+  return (
+    <div style={{ padding: 20, fontFamily: 'system-ui' }}>
+      <h2 style={{ marginBottom: 20 }}>Node Card Field Reference</h2>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 30 }}>
+        {/* Left: Visual Reference */}
+        <div>
+          <h3 style={{ marginBottom: 16, color: '#374151' }}>Visual Structure</h3>
+          <div
+            style={{
+              border: '3px solid #6366f1',
+              borderRadius: 8,
+              padding: 16,
+              backgroundColor: 'white',
+              width: 180,
+              textAlign: 'center',
+              position: 'relative',
+            }}
+          >
+            {/* Stroke/Border annotation */}
+            <div
+              style={{
+                position: 'absolute',
+                top: -30,
+                left: '50%',
+                transform: 'translateX(-50%)',
+                fontSize: 10,
+                color: '#6366f1',
+                fontWeight: 'bold',
+              }}
+            >
+              stroke/border color
+            </div>
+
+            {/* Icon */}
+            <div
+              style={{
+                marginBottom: 8,
+                padding: 4,
+                border: '2px dashed #f97316',
+                borderRadius: 4,
+              }}
+            >
+              <div style={{ fontSize: 10, color: '#f97316', marginBottom: 4 }}>
+                ICON
+              </div>
+              <span style={{ fontSize: 24 }}>S</span>
+            </div>
+
+            {/* Label */}
+            <div
+              style={{
+                marginBottom: 8,
+                padding: 4,
+                border: '2px dashed #22c55e',
+                borderRadius: 4,
+              }}
+            >
+              <div style={{ fontSize: 10, color: '#22c55e', marginBottom: 4 }}>
+                LABEL (displayInLabel)
+              </div>
+              <div style={{ fontWeight: 500 }}>Node Name</div>
+            </div>
+
+            {/* State Badge */}
+            <div
+              style={{
+                padding: 4,
+                border: '2px dashed #3b82f6',
+                borderRadius: 4,
+              }}
+            >
+              <div style={{ fontSize: 10, color: '#3b82f6', marginBottom: 4 }}>
+                STATE BADGE
+              </div>
+              <span
+                style={{
+                  backgroundColor: '#22c55e',
+                  color: 'white',
+                  padding: '2px 8px',
+                  borderRadius: 4,
+                  fontSize: 11,
+                }}
+              >
+                Active
+              </span>
+            </div>
+
+            {/* Shape annotation */}
+            <div
+              style={{
+                position: 'absolute',
+                bottom: -30,
+                left: '50%',
+                transform: 'translateX(-50%)',
+                fontSize: 10,
+                color: '#6366f1',
+                fontWeight: 'bold',
+              }}
+            >
+              shape: rectangle
+            </div>
+          </div>
+        </div>
+
+        {/* Right: Field Documentation */}
+        <div>
+          <h3 style={{ marginBottom: 16, color: '#374151' }}>Field Descriptions</h3>
+          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+            <thead>
+              <tr style={{ backgroundColor: '#f3f4f6' }}>
+                <th style={{ padding: 8, textAlign: 'left', borderBottom: '2px solid #e5e7eb' }}>
+                  Field
+                </th>
+                <th style={{ padding: 8, textAlign: 'left', borderBottom: '2px solid #e5e7eb' }}>
+                  Source
+                </th>
+                <th style={{ padding: 8, textAlign: 'left', borderBottom: '2px solid #e5e7eb' }}>
+                  Description
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#f97316' }}>
+                  icon
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  <code>vv.icon</code> or <code>states[state].icon</code>
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  Lucide icon name displayed at top
+                </td>
+              </tr>
+              <tr>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#22c55e' }}>
+                  label
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  <code>dataSchema[field].displayInLabel</code>
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  Main text from data field with displayInLabel=true
+                </td>
+              </tr>
+              <tr>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#3b82f6' }}>
+                  state
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  <code>states[currentState]</code>
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  Badge showing current state with color and label
+                </td>
+              </tr>
+              <tr>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#6366f1' }}>
+                  color
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  <code>vv.color</code> or <code>states[state].color</code>
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  Primary node color (state overrides base)
+                </td>
+              </tr>
+              <tr>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#6366f1' }}>
+                  stroke
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  <code>vv.stroke</code>
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  Border color (defaults to color if not set)
+                </td>
+              </tr>
+              <tr>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#6366f1' }}>
+                  shape
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  <code>vv.shape</code>
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  rectangle | circle | hexagon | diamond | custom
+                </td>
+              </tr>
+              <tr>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#6366f1' }}>
+                  size
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  <code>vv.size</code>
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  {'{width, height}'} for node dimensions
+                </td>
+              </tr>
+              <tr>
+                <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>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <h3 style={{ marginTop: 30, marginBottom: 16, color: '#374151' }}>Live Examples</h3>
+      <GraphRenderer canvas={fieldVariationsCanvas} width={850} height={600} />
+    </div>
+  );
+};
+
+export const FieldReference: Story = {
+  render: () => <FieldReferenceTemplate />,
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Node Card Field Reference**
+
+This story provides a comprehensive visual guide to all fields displayed on node cards:
+
+**Visual Fields:**
+- **icon** - Lucide icon displayed above the label
+- **label** - Main text from dataSchema field with \`displayInLabel: true\`
+- **state** - Badge showing current state with color and label
+- **color** - Primary node color (can be overridden by state)
+- **stroke** - Border color (defaults to color)
+- **shape** - rectangle, circle, hexagon, diamond, or custom
+- **size** - Node dimensions {width, height}
+- **hasViolations** - Warning indicator for validation errors
+        `,
+      },
+    },
+  },
+};
+
+export const AllShapes: Story = {
+  args: {
+    canvas: fieldVariationsCanvas,
+    width: 850,
+    height: 600,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+Shows all node shape variations with different field combinations:
+- **Row 1**: Shape types (rectangle, circle, hexagon, diamond)
+- **Row 2**: State variations (idle, active, warning, error)
+- **Row 3**: Feature combinations (with/without icon and state)
+        `,
+      },
+    },
+  },
+};
+
+/**
+ * Interactive popup panel reference
+ */
+const PopupReferenceTemplate = () => {
+  return (
+    <div style={{ padding: 20, fontFamily: 'system-ui' }}>
+      <h2 style={{ marginBottom: 20 }}>Node Info Panel (Popup) Field Reference</h2>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 30 }}>
+        {/* Left: Mock Panel */}
+        <div
+          style={{
+            backgroundColor: 'white',
+            borderRadius: 8,
+            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+            padding: 16,
+          }}
+        >
+          {/* Header */}
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              marginBottom: 12,
+              paddingBottom: 8,
+              borderBottom: '2px solid #6366f1',
+            }}
+          >
+            <div style={{ fontWeight: 'bold', fontSize: 14 }}>Node Information</div>
+            <span style={{ color: '#666', fontSize: 18, cursor: 'pointer' }}>x</span>
+          </div>
+
+          {/* Icon Field */}
+          <div style={{ marginBottom: 12, position: 'relative' }}>
+            <div
+              style={{
+                position: 'absolute',
+                right: -80,
+                top: 0,
+                fontSize: 10,
+                color: '#f97316',
+                fontWeight: 'bold',
+              }}
+            >
+              1. ICON
+            </div>
+            <div style={{ fontSize: 10, color: '#666', marginBottom: 4 }}>Icon</div>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                padding: '6px 10px',
+                backgroundColor: '#f5f5f5',
+                border: '1px dashed #ccc',
+                borderRadius: 4,
+              }}
+            >
+              <span>S</span>
+              <span style={{ fontSize: 12 }}>Server</span>
+              <span style={{ marginLeft: 'auto', color: '#999', fontSize: 10 }}>edit</span>
+            </div>
+          </div>
+
+          {/* Type Field */}
+          <div style={{ marginBottom: 12, position: 'relative' }}>
+            <div
+              style={{
+                position: 'absolute',
+                right: -80,
+                top: 0,
+                fontSize: 10,
+                color: '#22c55e',
+                fontWeight: 'bold',
+              }}
+            >
+              2. TYPE
+            </div>
+            <div style={{ fontSize: 10, color: '#666', marginBottom: 4 }}>Type</div>
+            <div
+              style={{
+                fontSize: 12,
+                padding: '4px 8px',
+                backgroundColor: '#6366f1',
+                color: 'white',
+                borderRadius: 4,
+                display: 'inline-block',
+              }}
+            >
+              server (rectangle)
+            </div>
+          </div>
+
+          {/* State Field */}
+          <div style={{ marginBottom: 12, position: 'relative' }}>
+            <div
+              style={{
+                position: 'absolute',
+                right: -80,
+                top: 0,
+                fontSize: 10,
+                color: '#3b82f6',
+                fontWeight: 'bold',
+              }}
+            >
+              3. STATE
+            </div>
+            <div style={{ fontSize: 10, color: '#666', marginBottom: 4 }}>State</div>
+            <div
+              style={{
+                fontSize: 12,
+                padding: '4px 8px',
+                backgroundColor: '#22c55e',
+                color: 'white',
+                borderRadius: 4,
+                display: 'inline-block',
+              }}
+            >
+              Online
+            </div>
+          </div>
+
+          {/* Name Field */}
+          <div style={{ marginBottom: 12, position: 'relative' }}>
+            <div
+              style={{
+                position: 'absolute',
+                right: -80,
+                top: 0,
+                fontSize: 10,
+                color: '#8b5cf6',
+                fontWeight: 'bold',
+              }}
+            >
+              4. NAME
+            </div>
+            <div style={{ fontSize: 10, color: '#666', marginBottom: 4 }}>Name</div>
+            <div
+              style={{
+                fontSize: 12,
+                padding: '4px 8px',
+                backgroundColor: '#f5f5f5',
+                borderRadius: 4,
+                border: '1px dashed #ccc',
+              }}
+            >
+              API Gateway
+              <span style={{ marginLeft: 8, color: '#999', fontSize: 10 }}>edit</span>
+            </div>
+          </div>
+
+          {/* Properties */}
+          <div style={{ marginBottom: 12, position: 'relative' }}>
+            <div
+              style={{
+                position: 'absolute',
+                right: -100,
+                top: 0,
+                fontSize: 10,
+                color: '#06b6d4',
+                fontWeight: 'bold',
+              }}
+            >
+              5. PROPERTIES
+            </div>
+            <div style={{ fontSize: 10, color: '#666', marginBottom: 8, fontWeight: 'bold' }}>
+              Properties
+            </div>
+            <div style={{ marginBottom: 8 }}>
+              <div style={{ fontSize: 10, color: '#666', marginBottom: 2 }}>description</div>
+              <div style={{ fontSize: 12, color: '#333' }}>Main entry point for API</div>
+            </div>
+            <div>
+              <div style={{ fontSize: 10, color: '#666', marginBottom: 2 }}>port</div>
+              <div style={{ fontSize: 12, color: '#333' }}>8080</div>
+            </div>
+          </div>
+
+          {/* ID */}
+          <div
+            style={{
+              fontSize: 10,
+              color: '#999',
+              marginTop: 12,
+              paddingTop: 8,
+              borderTop: '1px solid #eee',
+              position: 'relative',
+            }}
+          >
+            <div
+              style={{
+                position: 'absolute',
+                right: -60,
+                top: 8,
+                fontSize: 10,
+                color: '#64748b',
+                fontWeight: 'bold',
+              }}
+            >
+              6. ID
+            </div>
+            ID: api-gateway-1
+          </div>
+
+          {/* Delete Button */}
+          <div style={{ position: 'relative' }}>
+            <div
+              style={{
+                position: 'absolute',
+                right: -80,
+                top: 12,
+                fontSize: 10,
+                color: '#ef4444',
+                fontWeight: 'bold',
+              }}
+            >
+              7. DELETE
+            </div>
+            <button
+              style={{
+                marginTop: 12,
+                width: '100%',
+                padding: '8px 12px',
+                backgroundColor: '#dc3545',
+                color: 'white',
+                border: 'none',
+                borderRadius: 4,
+                cursor: 'pointer',
+                fontSize: 12,
+                fontWeight: 'bold',
+              }}
+            >
+              Delete Node
+            </button>
+          </div>
+        </div>
+
+        {/* Right: Field Documentation */}
+        <div>
+          <h3 style={{ marginBottom: 16, color: '#374151' }}>Panel Fields</h3>
+          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+            <thead>
+              <tr style={{ backgroundColor: '#f3f4f6' }}>
+                <th style={{ padding: 8, textAlign: 'left', borderBottom: '2px solid #e5e7eb' }}>
+                  #
+                </th>
+                <th style={{ padding: 8, textAlign: 'left', borderBottom: '2px solid #e5e7eb' }}>
+                  Field
+                </th>
+                <th style={{ padding: 8, textAlign: 'left', borderBottom: '2px solid #e5e7eb' }}>
+                  Editable?
+                </th>
+                <th style={{ padding: 8, textAlign: 'left', borderBottom: '2px solid #e5e7eb' }}>
+                  Description
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>1</td>
+                <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>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  Icon selector with 48 common Lucide icons
+                </td>
+              </tr>
+              <tr>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>2</td>
+                <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>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  Node type selector from availableNodeTypes
+                </td>
+              </tr>
+              <tr>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>3</td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#3b82f6' }}>
+                  State
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>No</td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  Current state badge (from node.state)
+                </td>
+              </tr>
+              <tr>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>4</td>
+                <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>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  Field with displayInLabel from dataSchema
+                </td>
+              </tr>
+              <tr>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>5</td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#06b6d4' }}>
+                  Properties
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>No</td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  Other dataSchema fields or all node.data
+                </td>
+              </tr>
+              <tr>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>6</td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb', fontWeight: 'bold', color: '#64748b' }}>
+                  ID
+                </td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>No</td>
+                <td style={{ padding: 8, borderBottom: '1px solid #e5e7eb' }}>
+                  Read-only node identifier
+                </td>
+              </tr>
+              <tr>
+                <td style={{ padding: 8 }}>7</td>
+                <td style={{ padding: 8, fontWeight: 'bold', color: '#ef4444' }}>Delete</td>
+                <td style={{ padding: 8 }}>Action</td>
+                <td style={{ padding: 8 }}>Shown only when onDelete prop provided</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <h4 style={{ marginTop: 24, marginBottom: 12, color: '#374151' }}>Edit Mode Notes</h4>
+          <ul style={{ fontSize: 13, lineHeight: 1.8, margin: 0, paddingLeft: 20 }}>
+            <li>
+              <strong>Icon:</strong> Clicking opens a 6x8 grid picker of common icons
+            </li>
+            <li>
+              <strong>Type:</strong> Dropdown only shown if availableNodeTypes has multiple types
+            </li>
+            <li>
+              <strong>Name:</strong> Click to edit inline, press Enter to save, Escape to cancel
+            </li>
+            <li>
+              <strong>Delete:</strong> Only shown if onDelete callback is provided
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <h3 style={{ marginTop: 30, marginBottom: 16, color: '#374151' }}>
+        Try It: Click a node to see the info panel
+      </h3>
+      <GraphRenderer canvas={fieldVariationsCanvas} width={850} height={600} editable={true} />
+    </div>
+  );
+};
+
+export const PopupReference: Story = {
+  render: () => <PopupReferenceTemplate />,
+  parameters: {
+    docs: {
+      description: {
+        story: `
+**Node Info Panel (Popup) Reference**
+
+When a node is clicked, the NodeInfoPanel displays:
+1. **Icon** - Editable with icon picker (48 common Lucide icons)
+2. **Type** - Node type with selector dropdown (if multiple types available)
+3. **State** - Current state badge with color
+4. **Name** - Editable name field (from dataSchema displayInLabel field)
+5. **Properties** - Other schema fields or all node data
+6. **ID** - Read-only node identifier
+7. **Delete Button** - Only shown in edit mode
+
+Click a node in the interactive example below to see the panel.
+        `,
+      },
+    },
+  },
+};