@principal-ai/principal-view-react 0.6.6

package/README.md

@@ -0,0 +1,111 @@
+# @principal-ai/visual-validation-react
+
+React UI **component library** for the Visual Validation Framework.
+
+This library provides **building blocks** for creating graph visualization applications. The actual "panel" application should be built separately using these components.
+
+## Features
+
+- 🎨 `GraphRenderer` - Interactive graph visualization with @xyflow/react
+  - Custom node shapes (circle, rectangle, hexagon, diamond)
+  - State-based node styling
+  - Animated and styled edges
+  - Auto-layout algorithms (hierarchical, circular)
+  - Zoom, pan, drag interactions
+  - Minimap and controls
+- 📝 `EventLog` - Event log component (coming soon)
+- 📊 `MetricsDashboard` - Metrics dashboard component (coming soon)
+- 🎭 `CustomNode` / `CustomEdge` - Configurable xyflow renderers
+
+## Installation
+
+```bash
+npm install @principal-ai/visual-validation-react
+# or
+bun add @principal-ai/visual-validation-react
+```
+
+## Peer Dependencies
+
+```json
+{
+  "react": "^18.0.0 || ^19.0.0",
+  "react-dom": "^18.0.0 || ^19.0.0"
+}
+```
+
+## Usage
+
+These are **building block components**. You compose them to build your panel application:
+
+```typescript
+import {
+  GraphRenderer,
+  EventLog,
+  MetricsDashboard,
+} from '@principal-ai/visual-validation-react';
+import { EventProcessor } from '@principal-ai/visual-validation-core';
+import type { GraphConfiguration } from '@principal-ai/visual-validation-core';
+
+const config: GraphConfiguration = {
+  // ... your configuration
+};
+
+function MyPanel() {
+  const processor = new EventProcessor(config);
+  const state = processor.getGraphState();
+  const events = processor.getEventHistory();
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr' }}>
+      <GraphRenderer
+        configuration={config}
+        nodes={Array.from(state.nodes.values())}
+        edges={Array.from(state.edges.values())}
+      />
+      <div>
+        <MetricsDashboard metrics={/* ... */} />
+        <EventLog events={events} />
+      </div>
+    </div>
+  );
+}
+```
+
+**Building a Complete Panel:**
+For a complete panel application with all features (playback controls, filters, etc.), you should create a separate project using a panel starter template and compose these components together.
+
+## Documentation
+
+Comprehensive guides with Mermaid diagrams:
+
+- **[Configuration Guide](../../docs/CONFIGURATION.md)** - Define your graph structure, node/edge types, and validation rules
+- **[Event System Guide](../../docs/EVENT_SYSTEM.md)** - Stream events to update your graph in real-time
+- **[Usage Guide](../../docs/USAGE.md)** - Build complete panels with React components
+
+Or browse the [full documentation index](../../docs/README.md).
+
+## Storybook
+
+Interactive component examples:
+
+```bash
+bun run storybook
+```
+
+## Status
+
+**Alpha** - Core placeholder implemented. Full visualization features coming soon.
+
+### TODO
+- ✅ Integrate xyflow for graph visualization
+- ✅ Implement node renderers with shapes and states
+- ✅ Implement edge renderers with styles and animations
+- ✅ Add auto-layout algorithms
+- 🔲 Build event log panel with filtering
+- 🔲 Build metrics dashboard with charts
+- ✅ Add Storybook stories
+
+## License
+
+MIT

package/dist/components/ConfigurationSelector.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { ConfigurationFile } from '@principal-ai/principal-view-core';
+export interface ConfigurationSelectorProps {
+    /** Available configurations */
+    configurations: ConfigurationFile[];
+    /** Currently selected configuration name */
+    selectedConfig: string;
+    /** Callback when configuration changes */
+    onConfigChange: (configName: string) => void;
+    /** Optional custom className */
+    className?: string;
+    /** Optional custom styles */
+    style?: React.CSSProperties;
+    /** Whether to show description */
+    showDescription?: boolean;
+    /** Whether to show version */
+    showVersion?: boolean;
+    /** Label text for the selector */
+    label?: string;
+}
+/**
+ * Configuration selector component for switching between multiple graph configurations
+ *
+ * @example
+ * ```tsx
+ * const [selectedConfig, setSelectedConfig] = useState('simple-service');
+ *
+ * <ConfigurationSelector
+ *   configurations={loadedConfigs}
+ *   selectedConfig={selectedConfig}
+ *   onConfigChange={setSelectedConfig}
+ *   showDescription
+ * />
+ * ```
+ */
+export declare const ConfigurationSelector: React.FC<ConfigurationSelectorProps>;
+//# sourceMappingURL=ConfigurationSelector.d.ts.map

package/dist/components/ConfigurationSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationSelector.d.ts","sourceRoot":"","sources":["../../src/components/ConfigurationSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAE3E,MAAM,WAAW,0BAA0B;IACzC,+BAA+B;IAC/B,cAAc,EAAE,iBAAiB,EAAE,CAAC;IAEpC,4CAA4C;IAC5C,cAAc,EAAE,MAAM,CAAC;IAEvB,0CAA0C;IAC1C,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,8BAA8B;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAsGtE,CAAC"}

package/dist/components/ConfigurationSelector.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigurationSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Configuration selector component for switching between multiple graph configurations
+ *
+ * @example
+ * ```tsx
+ * const [selectedConfig, setSelectedConfig] = useState('simple-service');
+ *
+ * <ConfigurationSelector
+ *   configurations={loadedConfigs}
+ *   selectedConfig={selectedConfig}
+ *   onConfigChange={setSelectedConfig}
+ *   showDescription
+ * />
+ * ```
+ */
+const ConfigurationSelector = ({ configurations, selectedConfig, onConfigChange, className, style, showDescription = false, showVersion = false, label = 'Graph Configuration', }) => {
+    const handleChange = (event) => {
+        onConfigChange(event.target.value);
+    };
+    const selectedConfigData = configurations.find(c => c.name === selectedConfig);
+    const defaultStyle = {
+        backgroundColor: 'white',
+        padding: '12px 16px',
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        ...style,
+    };
+    const labelStyle = {
+        display: 'block',
+        fontSize: '14px',
+        fontWeight: 600,
+        marginBottom: '8px',
+        color: '#333',
+    };
+    const selectStyle = {
+        width: '100%',
+        padding: '8px 12px',
+        fontSize: '14px',
+        border: '1px solid #ddd',
+        borderRadius: '4px',
+        backgroundColor: 'white',
+        cursor: 'pointer',
+        outline: 'none',
+        transition: 'border-color 0.2s',
+    };
+    const infoStyle = {
+        marginTop: '8px',
+        fontSize: '12px',
+        color: '#666',
+        lineHeight: '1.5',
+    };
+    if (configurations.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, style: defaultStyle, children: (0, jsx_runtime_1.jsx)("div", { style: { ...labelStyle, color: '#999' }, children: "No configurations available" }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: defaultStyle, children: [(0, jsx_runtime_1.jsx)("label", { style: labelStyle, htmlFor: "config-selector", children: label }), (0, jsx_runtime_1.jsx)("select", { id: "config-selector", value: selectedConfig, onChange: handleChange, style: selectStyle, onMouseEnter: (e) => {
+                    e.currentTarget.style.borderColor = '#4A90E2';
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.borderColor = '#ddd';
+                }, children: configurations.map((config) => ((0, jsx_runtime_1.jsxs)("option", { value: config.name, children: [config.config.metadata.name, showVersion && config.config.metadata.version && ` (v${config.config.metadata.version})`] }, config.name))) }), selectedConfigData && (showDescription || showVersion) && ((0, jsx_runtime_1.jsxs)("div", { style: infoStyle, children: [showVersion && selectedConfigData.config.metadata.version && ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '4px' }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Version:" }), " ", selectedConfigData.config.metadata.version] })), showDescription && selectedConfigData.config.metadata.description && ((0, jsx_runtime_1.jsx)("div", { children: selectedConfigData.config.metadata.description }))] }))] }));
+};
+exports.ConfigurationSelector = ConfigurationSelector;
+//# sourceMappingURL=ConfigurationSelector.js.map

package/dist/components/ConfigurationSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationSelector.js","sourceRoot":"","sources":["../../src/components/ConfigurationSelector.tsx"],"names":[],"mappings":"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"}

package/dist/components/EdgeInfoPanel.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { EdgeState, EdgeTypeDefinition } from '@principal-ai/principal-view-core';
+export interface EdgeInfoPanelProps {
+    edge: EdgeState;
+    typeDefinition: EdgeTypeDefinition;
+    sourceNodeId: string;
+    targetNodeId: string;
+    onClose: () => void;
+    /** Optional callback to delete the edge. If not provided, delete button is hidden. */
+    onDelete?: (edgeId: string) => void;
+}
+/**
+ * Panel that displays information about a selected edge
+ */
+export declare const EdgeInfoPanel: React.FC<EdgeInfoPanelProps>;
+//# sourceMappingURL=EdgeInfoPanel.d.ts.map

package/dist/components/EdgeInfoPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdgeInfoPanel.d.ts","sourceRoot":"","sources":["../../src/components/EdgeInfoPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAEvF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,SAAS,CAAC;IAChB,cAAc,EAAE,kBAAkB,CAAC;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqLtD,CAAC"}

package/dist/components/EdgeInfoPanel.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EdgeInfoPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Panel that displays information about a selected edge
+ */
+const EdgeInfoPanel = ({ edge, typeDefinition, sourceNodeId, targetNodeId, onClose, onDelete, }) => {
+    const color = typeDefinition.color || '#888';
+    // Get fields to display based on dataSchema
+    const displayFields = typeDefinition.dataSchema
+        ? Object.entries(typeDefinition.dataSchema)
+            .filter(([, schema]) => schema.displayInInfo)
+            .map(([field, schema]) => ({
+            field,
+            label: schema.label || field,
+            value: edge.data?.[field],
+        }))
+        : [];
+    // Always show basic edge data if no schema is defined
+    const hasSchemaFields = displayFields.length > 0;
+    const edgeDataEntries = edge.data ? Object.entries(edge.data) : [];
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            position: 'absolute',
+            top: '60px',
+            right: '20px',
+            backgroundColor: 'white',
+            borderRadius: '8px',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+            padding: '16px',
+            minWidth: '250px',
+            maxWidth: '350px',
+            zIndex: 1000,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '12px',
+                    paddingBottom: '8px',
+                    borderBottom: `2px solid ${color}`,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 'bold', fontSize: '14px' }, children: "Edge Information" }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
+                            border: 'none',
+                            background: 'none',
+                            cursor: 'pointer',
+                            fontSize: '18px',
+                            color: '#666',
+                            padding: '0',
+                            width: '24px',
+                            height: '24px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }, children: "\u00D7" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '12px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '10px', color: '#666', marginBottom: '4px' }, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            fontSize: '12px',
+                            padding: '4px 8px',
+                            backgroundColor: color,
+                            color: 'white',
+                            borderRadius: '4px',
+                            display: 'inline-block',
+                        }, children: edge.type })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '12px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '10px', color: '#666', marginBottom: '4px' }, children: "Connection" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '12px', color: '#333' }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontFamily: 'monospace', backgroundColor: '#f0f0f0', padding: '2px 6px', borderRadius: '3px' }, children: sourceNodeId }), (0, jsx_runtime_1.jsx)("span", { style: { margin: '0 8px', color: '#888' }, children: "\u2192" }), (0, jsx_runtime_1.jsx)("span", { style: { fontFamily: 'monospace', backgroundColor: '#f0f0f0', padding: '2px 6px', borderRadius: '3px' }, children: targetNodeId })] })] }), hasSchemaFields && ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '12px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '10px', color: '#666', marginBottom: '8px', fontWeight: 'bold' }, children: "Properties" }), displayFields.map(({ field, label, value }) => ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '8px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '10px', color: '#666', marginBottom: '2px' }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '12px', color: '#333' }, children: value !== undefined && value !== null
+                                    ? typeof value === 'object'
+                                        ? JSON.stringify(value, null, 2)
+                                        : String(value)
+                                    : '-' })] }, field)))] })), !hasSchemaFields && edgeDataEntries.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '12px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '10px', color: '#666', marginBottom: '8px', fontWeight: 'bold' }, children: "Data" }), edgeDataEntries.map(([key, value]) => ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '8px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: '10px', color: '#666', marginBottom: '2px' }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: '12px', color: '#333', wordBreak: 'break-word' }, children: value !== undefined && value !== null
+                                    ? typeof value === 'object'
+                                        ? JSON.stringify(value, null, 2)
+                                        : String(value)
+                                    : '-' })] }, key)))] })), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '10px', color: '#999', marginTop: '12px', paddingTop: '8px', borderTop: '1px solid #eee' }, children: ["ID: ", edge.id] }), onDelete && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                    onDelete(edge.id);
+                    onClose();
+                }, style: {
+                    marginTop: '12px',
+                    width: '100%',
+                    padding: '8px 12px',
+                    backgroundColor: '#dc3545',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    fontSize: '12px',
+                    fontWeight: 'bold',
+                }, children: "Delete Edge" }))] }));
+};
+exports.EdgeInfoPanel = EdgeInfoPanel;
+//# sourceMappingURL=EdgeInfoPanel.js.map

package/dist/components/EdgeInfoPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdgeInfoPanel.js","sourceRoot":"","sources":["../../src/components/EdgeInfoPanel.tsx"],"names":[],"mappings":";;;;AAaA;;GAEG;AACI,MAAM,aAAa,GAAiC,CAAC,EAC1D,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,IAAI,MAAM,CAAC;IAE7C,4CAA4C;IAC5C,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU;QAC7C,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC;aACtC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC;aAC5C,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC;YACzB,KAAK;YACL,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,KAAK;YAC5B,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC;SAC1B,CAAC,CAAC;QACP,CAAC,CAAC,EAAE,CAAC;IAEP,sDAAsD;IACtD,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IACjD,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnE,OAAO,CACL,iCACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,MAAM;YACX,KAAK,EAAE,MAAM;YACb,eAAe,EAAE,OAAO;YACxB,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,6BAA6B;YACxC,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,OAAO;YACjB,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,IAAI;SACb,aAGD,iCAAK,KAAK,EAAE;oBACV,OAAO,EAAE,MAAM;oBACf,cAAc,EAAE,eAAe;oBAC/B,UAAU,EAAE,QAAQ;oBACpB,YAAY,EAAE,MAAM;oBACpB,aAAa,EAAE,KAAK;oBACpB,YAAY,EAAE,aAAa,KAAK,EAAE;iBACnC,aACC,gCAAK,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,iCAE9C,EACN,mCACE,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;4BACL,MAAM,EAAE,MAAM;4BACd,UAAU,EAAE,MAAM;4BAClB,MAAM,EAAE,SAAS;4BACjB,QAAQ,EAAE,MAAM;4BAChB,KAAK,EAAE,MAAM;4BACb,OAAO,EAAE,GAAG;4BACZ,KAAK,EAAE,MAAM;4BACb,MAAM,EAAE,MAAM;4BACd,OAAO,EAAE,MAAM;4BACf,UAAU,EAAE,QAAQ;4BACpB,cAAc,EAAE,QAAQ;yBACzB,uBAGM,IACL,EAGN,iCAAK,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,aAClC,gCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,qBAE9D,EACN,gCAAK,KAAK,EAAE;4BACV,QAAQ,EAAE,MAAM;4BAChB,OAAO,EAAE,SAAS;4BAClB,eAAe,EAAE,KAAK;4BACtB,KAAK,EAAE,OAAO;4BACd,YAAY,EAAE,KAAK;4BACnB,OAAO,EAAE,cAAc;yBACxB,YACE,IAAI,CAAC,IAAI,GACN,IACF,EAGN,iCAAK,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,aAClC,gCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,2BAE9D,EACN,iCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,aAC7C,iCAAM,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,YAC1G,YAAY,GACR,EACP,iCAAM,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,uBAAU,EACzD,iCAAM,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,YAC1G,YAAY,GACR,IACH,IACF,EAGL,eAAe,IAAI,CAClB,iCAAK,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,aAClC,gCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,2BAElF,EACL,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC9C,iCAAiB,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,aAC7C,gCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,YACjE,KAAK,GACF,EACN,gCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAC5C,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;oCACpC,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ;wCACzB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;wCAChC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;oCACjB,CAAC,CAAC,GAAG,GACH,KAVE,KAAK,CAWT,CACP,CAAC,IACE,CACP,EAGA,CAAC,eAAe,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CACjD,iCAAK,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,aAClC,gCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,qBAElF,EACL,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACrC,iCAAe,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,aAC3C,gCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,YACjE,GAAG,GACA,EACN,gCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,YACrE,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;oCACpC,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ;wCACzB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;wCAChC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;oCACjB,CAAC,CAAC,GAAG,GACH,KAVE,GAAG,CAWP,CACP,CAAC,IACE,CACP,EAGD,iCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,qBAC3G,IAAI,CAAC,EAAE,IACR,EAGL,QAAQ,IAAI,CACX,mCACE,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAClB,OAAO,EAAE,CAAC;gBACZ,CAAC,EACD,KAAK,EAAE;oBACL,SAAS,EAAE,MAAM;oBACjB,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,UAAU;oBACnB,eAAe,EAAE,SAAS;oBAC1B,KAAK,EAAE,OAAO;oBACd,MAAM,EAAE,MAAM;oBACd,YAAY,EAAE,KAAK;oBACnB,MAAM,EAAE,SAAS;oBACjB,QAAQ,EAAE,MAAM;oBAChB,UAAU,EAAE,MAAM;iBACnB,4BAGM,CACV,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AArLW,QAAA,aAAa,iBAqLxB"}

package/dist/components/EventLog.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { GraphEvent, Violation } from '@principal-ai/principal-view-core';
+export interface EventLogProps {
+    /** List of events to display */
+    events: GraphEvent[];
+    /** Optional violations to highlight */
+    violations?: Violation[];
+    /** Callback when an event is clicked */
+    onEventClick?: (event: GraphEvent) => void;
+    /** Optional class name */
+    className?: string;
+    /** Optional max height */
+    maxHeight?: number | string;
+}
+/**
+ * Event log component for displaying graph events
+ * TODO: Implement filtering, search, and severity indicators
+ */
+export declare const EventLog: React.FC<EventLogProps>;
+//# sourceMappingURL=EventLog.d.ts.map

package/dist/components/EventLog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventLog.d.ts","sourceRoot":"","sources":["../../src/components/EventLog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAE/E,MAAM,WAAW,aAAa;IAC5B,gCAAgC;IAChC,MAAM,EAAE,UAAU,EAAE,CAAC;IAErB,uCAAuC;IACvC,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IAEzB,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAE3C,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0B5C,CAAC"}

package/dist/components/EventLog.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventLog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Event log component for displaying graph events
+ * TODO: Implement filtering, search, and severity indicators
+ */
+const EventLog = ({ events, violations = [], className, maxHeight = '400px', }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: { maxHeight, overflowY: 'auto', border: '1px solid #ccc' }, children: (0, jsx_runtime_1.jsxs)("div", { style: { padding: '10px' }, children: [(0, jsx_runtime_1.jsx)("h3", { children: "Event Log (TODO)" }), (0, jsx_runtime_1.jsxs)("p", { children: ["Events: ", events.length] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Violations: ", violations.length] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "TODO:" }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: "Display events in chronological order" }), (0, jsx_runtime_1.jsx)("li", { children: "Show event type, category, operation" }), (0, jsx_runtime_1.jsx)("li", { children: "Highlight violations with color coding" }), (0, jsx_runtime_1.jsx)("li", { children: "Add filtering by category, type, severity" }), (0, jsx_runtime_1.jsx)("li", { children: "Add text search" }), (0, jsx_runtime_1.jsx)("li", { children: "Add timestamp formatting" })] })] })] }) }));
+};
+exports.EventLog = EventLog;
+//# sourceMappingURL=EventLog.js.map

package/dist/components/EventLog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventLog.js","sourceRoot":"","sources":["../../src/components/EventLog.tsx"],"names":[],"mappings":";;;;AAoBA;;;GAGG;AACI,MAAM,QAAQ,GAA4B,CAAC,EAChD,MAAM,EACN,UAAU,GAAG,EAAE,EACf,SAAS,EACT,SAAS,GAAG,OAAO,GACpB,EAAE,EAAE;IACH,OAAO,CACL,gCAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,YAC1F,iCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAC7B,8DAAyB,EACzB,sDAAY,MAAM,CAAC,MAAM,IAAK,EAC9B,0DAAgB,UAAU,CAAC,MAAM,IAAK,EACtC,4CACE,uDAAsB,EACtB,2CACE,mFAA8C,EAC9C,kFAA6C,EAC7C,oFAA+C,EAC/C,uFAAkD,EAClD,6DAAwB,EACxB,sEAAiC,IAC9B,IACD,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,QAAQ,YA0BnB"}

package/dist/components/EventLog.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=EventLog.test.d.ts.map

package/dist/components/EventLog.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventLog.test.d.ts","sourceRoot":"","sources":["../../src/components/EventLog.test.tsx"],"names":[],"mappings":""}

package/dist/components/EventLog.test.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const EventLog_1 = require("./EventLog");
+describe('EventLog', () => {
+    const testEvents = [
+        {
+            id: 'evt-1',
+            type: 'node_created',
+            timestamp: Date.now(),
+            category: 'node',
+            operation: 'create',
+            payload: {
+                operation: 'create',
+                nodeId: 'user-1',
+                nodeType: 'user',
+                data: { userId: 'alice' },
+            },
+            expected: true,
+        },
+        {
+            id: 'evt-2',
+            type: 'edge_created',
+            timestamp: Date.now(),
+            category: 'edge',
+            operation: 'create',
+            payload: {
+                operation: 'create',
+                edgeId: 'conn-1',
+                edgeType: 'connection',
+                from: 'user-1',
+                to: 'user-2',
+            },
+            expected: true,
+        },
+    ];
+    const testViolations = [
+        {
+            id: 'violation-1',
+            severity: 'error',
+            type: 'connection',
+            description: 'Invalid connection',
+        },
+    ];
+    it('should render without crashing', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(EventLog_1.EventLog, { events: testEvents }));
+        expect(react_1.screen.getByText(/Event Log/i)).toBeDefined();
+    });
+    it('should display event count', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(EventLog_1.EventLog, { events: testEvents }));
+        expect(react_1.screen.getByText(/Events: 2/i)).toBeDefined();
+    });
+    it('should display violation count', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(EventLog_1.EventLog, { events: testEvents, violations: testViolations }));
+        expect(react_1.screen.getByText(/Violations: 1/i)).toBeDefined();
+    });
+    it('should render with empty events', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(EventLog_1.EventLog, { events: [] }));
+        expect(react_1.screen.getByText(/Events: 0/i)).toBeDefined();
+    });
+    it('should apply custom className', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(EventLog_1.EventLog, { events: testEvents, className: "custom-log" }));
+        const element = container.querySelector('.custom-log');
+        expect(element).toBeDefined();
+    });
+    it('should apply custom maxHeight', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(EventLog_1.EventLog, { events: testEvents, maxHeight: "300px" }));
+        const element = container.querySelector('div');
+        expect(element?.style.maxHeight).toBe('300px');
+    });
+});
+//# sourceMappingURL=EventLog.test.js.map

package/dist/components/EventLog.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventLog.test.js","sourceRoot":"","sources":["../../src/components/EventLog.test.tsx"],"names":[],"mappings":"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"}

package/dist/components/GraphRenderer.d.ts

@@ -0,0 +1,121 @@
+import React from 'react';
+import '@xyflow/react/dist/style.css';
+import type { Violation, GraphEvent, ExtendedCanvas, ComponentLibrary } from '@principal-ai/principal-view-core';
+/** Position change event for tracking node movements */
+export interface NodePositionChange {
+    nodeId: string;
+    position: {
+        x: number;
+        y: number;
+    };
+}
+/** All pending changes that can be saved */
+export interface PendingChanges {
+    /** Node position changes */
+    positionChanges: NodePositionChange[];
+    /** Node updates (type, data changes) */
+    nodeUpdates: Array<{
+        nodeId: string;
+        updates: {
+            type?: string;
+            data?: Record<string, unknown>;
+        };
+    }>;
+    /** Deleted node IDs */
+    deletedNodeIds: string[];
+    /** New edges created (with optional handle info for connection points) */
+    createdEdges: Array<{
+        from: string;
+        to: string;
+        type: string;
+        sourceHandle?: string;
+        targetHandle?: string;
+    }>;
+    /** Deleted edges (with full connection info for config removal) */
+    deletedEdges: Array<{
+        from: string;
+        to: string;
+        type: string;
+    }>;
+    /** Whether there are any changes */
+    hasChanges: boolean;
+}
+/** Ref handle for imperative actions */
+export interface GraphRendererHandle {
+    /** Get all pending changes */
+    getPendingChanges: () => PendingChanges;
+    /** Reset edit state to match current props */
+    resetEditState: () => void;
+    /** Check if there are unsaved changes */
+    hasUnsavedChanges: () => boolean;
+}
+/** Base props shared by all render modes */
+interface GraphRendererBaseProps {
+    /** Optional violations to highlight */
+    violations?: Violation[];
+    /** Optional configuration name for identification (used with multi-config setups) */
+    configName?: string;
+    /** Optional class name */
+    className?: string;
+    /** Optional width */
+    width?: number | string;
+    /** Optional height */
+    height?: number | string;
+    /** Whether to show minimap */
+    showMinimap?: boolean;
+    /** Whether to show controls */
+    showControls?: boolean;
+    /** Whether to show background */
+    showBackground?: boolean;
+    /** Optional event stream for triggering animations */
+    events?: GraphEvent[];
+    /** Optional callback when an event is processed */
+    onEventProcessed?: (event: GraphEvent) => void;
+    /**
+     * Whether edit mode is enabled.
+     * When true, nodes can be dragged, edited, deleted, and edges can be created/deleted.
+     * All changes are tracked internally and can be retrieved via ref.getPendingChanges()
+     */
+    editable?: boolean;
+    /**
+     * Callback when pending changes state changes.
+     * Called with true when there are unsaved changes, false when there are none.
+     * Use this to enable/disable save buttons in the parent component.
+     */
+    onPendingChangesChange?: (hasChanges: boolean) => void;
+}
+/** GraphRenderer props - canvas format only */
+export interface GraphRendererProps extends GraphRendererBaseProps {
+    /** Extended Canvas document */
+    canvas: ExtendedCanvas;
+    /**
+     * Optional component library containing reusable node and edge type definitions.
+     * Types from the library are merged with canvas-level types, with canvas types taking precedence.
+     * This allows sharing type definitions across multiple canvas files via a library.yaml file.
+     */
+    library?: ComponentLibrary;
+}
+/**
+ * Core graph visualization component using xyflow.
+ *
+ * Accepts an ExtendedCanvas document for rendering.
+ *
+ * When `editable` is true, the component manages its own edit state internally.
+ * Use the ref to get pending changes when the user wants to save:
+ *
+ * ```tsx
+ * <GraphRenderer canvas={myCanvas} />
+ *
+ * // With edit mode
+ * const graphRef = useRef<GraphRendererHandle>(null);
+ * <GraphRenderer
+ *   ref={graphRef}
+ *   canvas={myCanvas}
+ *   editable={isEditMode}
+ *   onPendingChangesChange={setHasUnsavedChanges}
+ * />
+ * ```
+ */
+export declare const GraphRenderer: React.ForwardRefExoticComponent<GraphRendererProps & React.RefAttributes<GraphRendererHandle>>;
+export {};
+//# sourceMappingURL=GraphRenderer.d.ts.map

package/dist/components/GraphRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GraphRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAclH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAA4C,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAU3J,wDAAwD;AACxD,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpC;AAED,4CAA4C;AAC5C,MAAM,WAAW,cAAc;IAC7B,4BAA4B;IAC5B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,wCAAwC;IACxC,WAAW,EAAE,KAAK,CAAC;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE;YAAE,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;SAAE,CAAA;KAAE,CAAC,CAAC;IACnG,uBAAuB;IACvB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,0EAA0E;IAC1E,YAAY,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9G,mEAAmE;IACnE,YAAY,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,wCAAwC;AACxC,MAAM,WAAW,mBAAmB;IAClC,8BAA8B;IAC9B,iBAAiB,EAAE,MAAM,cAAc,CAAC;IACxC,8CAA8C;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,yCAAyC;IACzC,iBAAiB,EAAE,MAAM,OAAO,CAAC;CAClC;AAED,4CAA4C;AAC5C,UAAU,sBAAsB;IAC9B,uCAAuC;IACvC,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IAEzB,qFAAqF;IACrF,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,iCAAiC;IACjC,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,sDAAsD;IACtD,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IAEtB,mDAAmD;IACnD,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAE/C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CACxD;AAED,+CAA+C;AAC/C,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,+BAA+B;IAC/B,MAAM,EAAE,cAAc,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AA29BD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa,gGAgGxB,CAAC"}