@principal-ai/principal-view-core 0.5.6

package/dist/types/path-based-config.d.ts

@@ -0,0 +1,230 @@
+/**
+ * Path-based configuration extensions for Milestone 1 & 2
+ *
+ * These types extend the core GraphConfiguration to support:
+ * - Path-based log association (Milestone 1)
+ * - Action pattern refinement (Milestone 2)
+ */
+/**
+ * Log levels (matches logger package)
+ */
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+/**
+ * Extended node type definition with source path mapping
+ */
+export interface PathBasedNodeTypeDefinition {
+    /** Base node type properties (inherited from NodeTypeDefinition) */
+    shape: 'circle' | 'rectangle' | 'hexagon' | 'diamond' | 'custom';
+    icon?: string;
+    color?: string;
+    size?: {
+        width: number;
+        height: number;
+    };
+    dataSchema: {
+        [field: string]: {
+            type: 'string' | 'number' | 'boolean' | 'object' | 'array';
+            required?: boolean;
+            displayInLabel?: boolean;
+        };
+    };
+    states?: Record<string, {
+        color?: string;
+        icon?: string;
+        label?: string;
+    }>;
+    layout?: {
+        layer?: number;
+        cluster?: string;
+    };
+    /** Manual position for 'manual' layout mode */
+    position?: {
+        x: number;
+        y: number;
+    };
+    /** MILESTONE 1: Source path mapping */
+    sources?: string[];
+    /** MILESTONE 2: Optional action patterns for refinement */
+    actions?: ActionPattern[];
+}
+/**
+ * Action pattern for extracting structured events from logs (Milestone 2)
+ */
+export interface ActionPattern {
+    /** Regex pattern to match log message (with named capture groups) */
+    pattern: string;
+    /** Event type to emit when pattern matches */
+    event: string;
+    /** Component state to transition to (optional) */
+    state?: string;
+    /** Metadata template - extracts data from capture groups */
+    metadata?: Record<string, string>;
+    /** Whether this action should trigger edge animations */
+    triggerEdges?: string[];
+}
+/**
+ * Extended edge definition with action-based activation (Milestone 2)
+ */
+export interface PathBasedEdgeTypeDefinition {
+    /** Base edge properties */
+    style: 'solid' | 'dashed' | 'dotted' | 'animated';
+    color?: string;
+    width?: number;
+    directed?: boolean;
+    animated?: boolean;
+    label?: {
+        field?: string;
+        position?: 'start' | 'middle' | 'end';
+    };
+    animation?: {
+        type: 'flow' | 'pulse' | 'particle' | 'glow';
+        duration?: number;
+        color?: string;
+    };
+    /** MILESTONE 2: Edge activation triggers */
+    activatedBy?: EdgeActivationTrigger[];
+}
+/**
+ * Configuration for activating edges based on component actions
+ */
+export interface EdgeActivationTrigger {
+    /** Action that triggers this edge animation */
+    action: string;
+    /** Animation type to play */
+    animation: 'flow' | 'particle' | 'pulse' | 'glow';
+    /** Animation direction */
+    direction?: 'forward' | 'backward' | 'bidirectional';
+    /** Animation duration in milliseconds */
+    duration?: number;
+}
+/**
+ * Extended graph configuration with path-based support
+ */
+export interface PathBasedGraphConfiguration {
+    metadata: {
+        name: string;
+        version: string;
+        description?: string;
+    };
+    /** Node types with source path mapping */
+    nodeTypes: Record<string, PathBasedNodeTypeDefinition>;
+    /** Edge types with action-based activation */
+    edgeTypes: Record<string, PathBasedEdgeTypeDefinition>;
+    /** Allowed connections between node types */
+    allowedConnections: Array<{
+        from: string;
+        to: string;
+        via: string;
+        constraints?: {
+            maxInstances?: number;
+            bidirectional?: boolean;
+            exclusive?: boolean;
+        };
+    }>;
+    /** Optional validation rules */
+    validation?: any;
+    /** Display preferences */
+    display?: any;
+    /** Path-based configuration options */
+    pathBasedConfig?: PathBasedConfigOptions;
+}
+/**
+ * Configuration options for path-based log association
+ */
+export interface PathBasedConfigOptions {
+    /** Project root for normalizing paths */
+    projectRoot?: string;
+    /** Whether to enable source capture (default: true) */
+    captureSource?: boolean;
+    /** Whether to enable action pattern matching (default: false in M1, true in M2) */
+    enableActionPatterns?: boolean;
+    /** Default log level for filtering (default: 'info') */
+    logLevel?: LogLevel;
+    /** Whether to ignore logs without source information (default: false) */
+    ignoreUnsourced?: boolean;
+}
+/**
+ * Component activity event (Milestone 1)
+ * Generated when a log is associated with a component by source path
+ */
+export interface ComponentActivityEvent {
+    type: 'component-activity';
+    /** Component ID (node type) */
+    componentId: string;
+    /**
+     * Instance identifier for multi-instance components.
+     * If provided, targets a specific node instance (e.g., "client-1").
+     * If undefined, targets the node type as a whole.
+     */
+    instanceId?: string;
+    /** Timestamp of the log */
+    timestamp: number;
+    /** Log level */
+    level: LogLevel;
+    /** Log message */
+    message: string;
+    /** Source location */
+    source: {
+        file: string;
+        line?: number;
+        column?: number;
+    };
+    /** Additional log arguments */
+    args?: any[];
+}
+/**
+ * Component action event (Milestone 2)
+ * Generated when a log matches an action pattern
+ */
+export interface ComponentActionEvent {
+    type: 'component-action';
+    /** Component ID (node type) */
+    componentId: string;
+    /**
+     * Instance identifier for multi-instance components.
+     * If provided, targets a specific node instance (e.g., "client-1").
+     * If undefined, targets the node type as a whole.
+     */
+    instanceId?: string;
+    /** Action type (from pattern) */
+    action: string;
+    /** New state (if specified in pattern) */
+    state?: string;
+    /** Timestamp of the log */
+    timestamp: number;
+    /** Extracted metadata from capture groups */
+    metadata?: Record<string, any>;
+    /** Source location */
+    source: {
+        file: string;
+        line?: number;
+        column?: number;
+    };
+}
+/**
+ * Edge animation event (Milestone 2)
+ * Generated when a component action triggers edge activation
+ */
+export interface EdgeAnimationEvent {
+    type: 'edge-animation';
+    /** Edge ID to animate */
+    edgeId: string;
+    /** Animation type */
+    animation: 'flow' | 'particle' | 'pulse' | 'glow';
+    /** Animation direction */
+    direction?: 'forward' | 'backward' | 'bidirectional';
+    /** Animation duration */
+    duration: number;
+    /** Timestamp */
+    timestamp: number;
+    /** Source action that triggered this */
+    triggeredBy?: {
+        componentId: string;
+        action: string;
+    };
+}
+/**
+ * Union type of all path-based events
+ */
+export type PathBasedEvent = ComponentActivityEvent | ComponentActionEvent | EdgeAnimationEvent;
+//# sourceMappingURL=path-based-config.d.ts.map

package/dist/types/path-based-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"path-based-config.d.ts","sourceRoot":"","sources":["../../src/types/path-based-config.ts"],"names":[],"mappings":"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"}

package/dist/types/path-based-config.js

@@ -0,0 +1,9 @@
+/**
+ * Path-based configuration extensions for Milestone 1 & 2
+ *
+ * These types extend the core GraphConfiguration to support:
+ * - Path-based log association (Milestone 1)
+ * - Action pattern refinement (Milestone 2)
+ */
+export {};
+//# sourceMappingURL=path-based-config.js.map

package/dist/types/path-based-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"path-based-config.js","sourceRoot":"","sources":["../../src/types/path-based-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG"}

package/dist/utils/CanvasConverter.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Canvas Converter
+ *
+ * Utilities for converting between Extended Canvas format and React Flow nodes/edges.
+ */
+import type { ExtendedCanvas } from '../types/canvas';
+import type { NodeState, EdgeState } from '../types';
+/**
+ * React Flow node format
+ */
+export interface ReactFlowNode {
+    id: string;
+    type: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: {
+        label: string;
+        nodeType: string;
+        shape?: string;
+        icon?: string;
+        color?: string;
+        width?: number;
+        height?: number;
+        states?: Record<string, {
+            color?: string;
+            icon?: string;
+            label?: string;
+        }>;
+        sources?: string[];
+        actions?: any[];
+        canvasType?: 'text' | 'file' | 'link' | 'group';
+        text?: string;
+        file?: string;
+        url?: string;
+        [key: string]: any;
+    };
+    style?: {
+        width?: number;
+        height?: number;
+    };
+}
+/**
+ * React Flow edge format
+ */
+export interface ReactFlowEdge {
+    id: string;
+    source: string;
+    target: string;
+    type?: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+    label?: string;
+    data?: {
+        edgeType: string;
+        style?: string;
+        color?: string;
+        width?: number;
+        animation?: {
+            type: string;
+            duration?: number;
+            color?: string;
+        };
+        activatedBy?: any[];
+        [key: string]: any;
+    };
+    style?: {
+        stroke?: string;
+        strokeWidth?: number;
+        strokeDasharray?: string;
+    };
+    animated?: boolean;
+    markerEnd?: {
+        type: string;
+        color?: string;
+    };
+}
+/**
+ * Canvas Converter utility class
+ */
+export declare class CanvasConverter {
+    /**
+     * Convert Extended Canvas to React Flow nodes and edges
+     */
+    static canvasToReactFlow(canvas: ExtendedCanvas): {
+        nodes: ReactFlowNode[];
+        edges: ReactFlowEdge[];
+    };
+    /**
+     * Convert a single canvas node to React Flow node
+     */
+    private static convertNode;
+    /**
+     * Get display label for a node
+     */
+    private static getNodeLabel;
+    /**
+     * Convert a single canvas edge to React Flow edge
+     */
+    private static convertEdge;
+    /**
+     * Convert Extended Canvas to internal NodeState/EdgeState format
+     */
+    static canvasToGraph(canvas: ExtendedCanvas): {
+        nodes: NodeState[];
+        edges: EdgeState[];
+    };
+    /**
+     * Convert React Flow nodes/edges back to Extended Canvas format
+     */
+    static reactFlowToCanvas(nodes: ReactFlowNode[], edges: ReactFlowEdge[], metadata?: {
+        name?: string;
+        version?: string;
+        description?: string;
+    }): ExtendedCanvas;
+}
+//# sourceMappingURL=CanvasConverter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasConverter.d.ts","sourceRoot":"","sources":["../../src/utils/CanvasConverter.ts"],"names":[],"mappings":"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"}

package/dist/utils/CanvasConverter.js

@@ -0,0 +1,315 @@
+/**
+ * Canvas Converter
+ *
+ * Utilities for converting between Extended Canvas format and React Flow nodes/edges.
+ */
+import { resolveCanvasColor } from '../types/canvas';
+/**
+ * Convert canvas side to React Flow handle position
+ */
+function sideToHandle(side) {
+    if (!side)
+        return undefined;
+    // React Flow uses 'top', 'right', 'bottom', 'left' - same as canvas
+    return side;
+}
+/**
+ * Convert edge style to stroke-dasharray
+ */
+function styleToStrokeDasharray(style) {
+    switch (style) {
+        case 'dashed':
+            return '5,5';
+        case 'dotted':
+            return '2,2';
+        default:
+            return undefined;
+    }
+}
+/**
+ * Canvas Converter utility class
+ */
+export class CanvasConverter {
+    /**
+     * Convert Extended Canvas to React Flow nodes and edges
+     */
+    static canvasToReactFlow(canvas) {
+        const nodes = [];
+        const edges = [];
+        // Convert nodes
+        if (canvas.nodes) {
+            for (const node of canvas.nodes) {
+                nodes.push(this.convertNode(node, canvas));
+            }
+        }
+        // Convert edges
+        if (canvas.edges) {
+            for (const edge of canvas.edges) {
+                edges.push(this.convertEdge(edge, canvas));
+            }
+        }
+        return { nodes, edges };
+    }
+    /**
+     * Convert a single canvas node to React Flow node
+     */
+    static convertNode(node, canvas) {
+        const pv = node.pv;
+        const color = resolveCanvasColor(node.color);
+        // Build the data object based on canvas node type
+        const data = {
+            label: this.getNodeLabel(node),
+            nodeType: pv?.nodeType || node.id,
+            canvasType: node.type,
+            shape: pv?.shape || 'rectangle',
+            icon: pv?.icon,
+            color: pv?.states?.idle?.color || color,
+            width: node.width,
+            height: node.height,
+        };
+        // Add type-specific data
+        if (node.type === 'text') {
+            data.text = node.text;
+        }
+        else if (node.type === 'file') {
+            data.file = node.file;
+        }
+        else if (node.type === 'link') {
+            data.url = node.url;
+        }
+        else if (node.type === 'group') {
+            data.label = node.label || data.label;
+        }
+        // Add PV extensions if present
+        if (pv) {
+            data.states = pv.states;
+            data.sources = pv.sources;
+            data.actions = pv.actions;
+            if (pv.dataSchema) {
+                data.dataSchema = pv.dataSchema;
+            }
+        }
+        return {
+            id: node.id,
+            type: pv?.shape || 'default',
+            position: { x: node.x, y: node.y },
+            data,
+            style: {
+                width: node.width,
+                height: node.height,
+            },
+        };
+    }
+    /**
+     * Get display label for a node
+     */
+    static getNodeLabel(node) {
+        if (node.pv?.nodeType) {
+            return node.pv.nodeType;
+        }
+        switch (node.type) {
+            case 'text':
+                // Use first line of text as label
+                const firstLine = node.text.split('\n')[0];
+                return firstLine.replace(/^#+ /, '').substring(0, 50);
+            case 'file':
+                // Use filename as label
+                return node.file.split('/').pop() || node.file;
+            case 'link':
+                return node.url;
+            case 'group':
+                return node.label || 'Group';
+        }
+    }
+    /**
+     * Convert a single canvas edge to React Flow edge
+     */
+    static convertEdge(edge, canvas) {
+        const pv = edge.pv;
+        const edgeTypeDef = pv?.edgeType ? canvas.pv?.edgeTypes?.[pv.edgeType] : undefined;
+        const color = resolveCanvasColor(edge.color) || edgeTypeDef?.color;
+        const rfEdge = {
+            id: edge.id,
+            source: edge.fromNode,
+            target: edge.toNode,
+            sourceHandle: sideToHandle(edge.fromSide),
+            targetHandle: sideToHandle(edge.toSide),
+            label: edge.label,
+            data: {
+                edgeType: pv?.edgeType || 'default',
+                style: pv?.style || edgeTypeDef?.style || 'solid',
+                color,
+                width: pv?.width || edgeTypeDef?.width || 2,
+                animation: pv?.animation || edgeTypeDef?.animation,
+                activatedBy: pv?.activatedBy || edgeTypeDef?.activatedBy,
+            },
+            style: {
+                stroke: color,
+                strokeWidth: pv?.width || edgeTypeDef?.width || 2,
+                strokeDasharray: styleToStrokeDasharray(pv?.style || edgeTypeDef?.style),
+            },
+            animated: pv?.style === 'animated' || edgeTypeDef?.style === 'animated',
+        };
+        // Add marker based on canvas endpoint settings
+        if (edge.toEnd !== 'none') {
+            rfEdge.markerEnd = {
+                type: 'arrowclosed',
+                color,
+            };
+        }
+        return rfEdge;
+    }
+    /**
+     * Convert Extended Canvas to internal NodeState/EdgeState format
+     */
+    static canvasToGraph(canvas) {
+        const nodes = [];
+        const edges = [];
+        const now = Date.now();
+        // Convert nodes
+        if (canvas.nodes) {
+            for (const node of canvas.nodes) {
+                const pv = node.pv;
+                nodes.push({
+                    id: node.id,
+                    type: pv?.nodeType || node.type,
+                    data: {
+                        label: this.getNodeLabel(node),
+                        shape: pv?.shape || 'rectangle',
+                        icon: pv?.icon,
+                        // Color priority: pv.fill > node.color
+                        color: pv?.fill || resolveCanvasColor(node.color),
+                        // Stroke color for borders
+                        stroke: pv?.stroke,
+                        width: node.width,
+                        height: node.height,
+                        sources: pv?.sources || [],
+                        actions: pv?.actions || [],
+                        states: pv?.states,
+                        canvasType: node.type,
+                        ...(node.type === 'text' ? { text: node.text } : {}),
+                        ...(node.type === 'file' ? { file: node.file } : {}),
+                        ...(node.type === 'link' ? { url: node.url } : {}),
+                    },
+                    position: { x: node.x, y: node.y },
+                    // Don't set a default state - only show state labels when explicitly set via events
+                    state: undefined,
+                    createdAt: now,
+                    updatedAt: now,
+                });
+            }
+        }
+        // Convert edges
+        if (canvas.edges) {
+            for (const edge of canvas.edges) {
+                const pv = edge.pv;
+                const edgeTypeDef = pv?.edgeType ? canvas.pv?.edgeTypes?.[pv.edgeType] : undefined;
+                edges.push({
+                    id: edge.id,
+                    type: pv?.edgeType || 'default',
+                    from: edge.fromNode,
+                    to: edge.toNode,
+                    data: {
+                        label: edge.label,
+                        style: pv?.style || edgeTypeDef?.style || 'solid',
+                        color: resolveCanvasColor(edge.color) || edgeTypeDef?.color,
+                        width: pv?.width || edgeTypeDef?.width,
+                        animation: pv?.animation || edgeTypeDef?.animation,
+                        activatedBy: pv?.activatedBy || edgeTypeDef?.activatedBy,
+                        fromSide: edge.fromSide,
+                        toSide: edge.toSide,
+                    },
+                    createdAt: now,
+                    updatedAt: now,
+                });
+            }
+        }
+        return { nodes, edges };
+    }
+    /**
+     * Convert React Flow nodes/edges back to Extended Canvas format
+     */
+    static reactFlowToCanvas(nodes, edges, metadata) {
+        const canvas = {
+            nodes: [],
+            edges: [],
+            pv: {
+                version: metadata?.version || '1.0.0',
+                name: metadata?.name || 'Untitled',
+                description: metadata?.description,
+                edgeTypes: {},
+            },
+        };
+        // Collect edge types
+        const edgeTypes = new Map();
+        // Convert nodes
+        for (const node of nodes) {
+            const canvasNode = {
+                id: node.id,
+                type: node.data.canvasType || 'text',
+                x: node.position.x,
+                y: node.position.y,
+                width: node.style?.width || node.data.width || 150,
+                height: node.style?.height || node.data.height || 80,
+                text: node.data.text || node.data.label || '',
+            };
+            // Add color if present
+            if (node.data.color) {
+                canvasNode.color = node.data.color;
+            }
+            // Add PV extension if there's custom data
+            if (node.data.nodeType || node.data.shape || node.data.sources?.length) {
+                canvasNode.pv = {
+                    nodeType: node.data.nodeType || node.id,
+                    shape: node.data.shape,
+                    icon: node.data.icon,
+                    states: node.data.states,
+                    sources: node.data.sources,
+                    actions: node.data.actions,
+                    dataSchema: node.data.dataSchema,
+                };
+            }
+            canvas.nodes.push(canvasNode);
+        }
+        // Convert edges
+        for (const edge of edges) {
+            const canvasEdge = {
+                id: edge.id,
+                fromNode: edge.source,
+                toNode: edge.target,
+                fromSide: edge.sourceHandle,
+                toSide: edge.targetHandle,
+                label: edge.label,
+            };
+            // Add color
+            if (edge.style?.stroke) {
+                canvasEdge.color = edge.style.stroke;
+            }
+            // Add PV extension
+            if (edge.data?.edgeType) {
+                canvasEdge.pv = {
+                    edgeType: edge.data.edgeType,
+                    style: edge.data.style,
+                    width: edge.data.width,
+                    animation: edge.data.animation,
+                    activatedBy: edge.data.activatedBy,
+                };
+                // Collect edge type definition
+                if (!edgeTypes.has(edge.data.edgeType)) {
+                    edgeTypes.set(edge.data.edgeType, {
+                        style: edge.data.style,
+                        color: edge.data.color,
+                        width: edge.data.width,
+                        animation: edge.data.animation,
+                        activatedBy: edge.data.activatedBy,
+                    });
+                }
+            }
+            canvas.edges.push(canvasEdge);
+        }
+        // Add collected edge types to canvas
+        canvas.pv.edgeTypes = Object.fromEntries(edgeTypes);
+        return canvas;
+    }
+}
+//# sourceMappingURL=CanvasConverter.js.map