@industry-theme/principal-view-panels 0.1.0

package/dist/mocks/vvfConfigs.d.ts

@@ -0,0 +1,32 @@
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
+/**
+ * Mock canvas configurations for Storybook stories
+ */
+export declare const mockSimpleCanvas: ExtendedCanvas;
+export declare const mockControlTowerCanvas: ExtendedCanvas;
+export declare const mockComplexCanvas: ExtendedCanvas;
+/**
+ * Mock canvas demonstrating pv.fill and pv.stroke color properties
+ * This shows the new color system where each node can have distinct fill and stroke colors
+ */
+export declare const mockNodeColorsCanvas: ExtendedCanvas;
+/**
+ * Mock canvas with mixed color sources for testing priority
+ * Tests: pv.fill > node.color > default
+ * Each node uses a unique nodeType to ensure independent color testing
+ */
+export declare const mockColorPriorityCanvas: ExtendedCanvas;
+export declare const mockSimpleCanvasJSON: string;
+export declare const mockComplexCanvasJSON: string;
+export declare const mockControlTowerCanvasJSON: string;
+export declare const mockNodeColorsCanvasJSON: string;
+export declare const mockColorPriorityCanvasJSON: string;
+export declare const createMockFileTree: (config: "simple" | "complex" | "control-tower" | "node-colors" | "color-priority" | "none") => {
+    allFiles: {
+        path: string;
+        relativePath: string;
+        name: string;
+        content?: string;
+    }[];
+};
+//# sourceMappingURL=vvfConfigs.d.ts.map

package/dist/mocks/vvfConfigs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vvfConfigs.d.ts","sourceRoot":"","sources":["../../src/mocks/vvfConfigs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE;;GAEG;AAEH,eAAO,MAAM,gBAAgB,EAAE,cA0F9B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,cA8KpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,cA+G/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,cA0JlC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,EAAE,cAwHrC,CAAC;AAGF,eAAO,MAAM,oBAAoB,QAA4C,CAAC;AAC9E,eAAO,MAAM,qBAAqB,QAA6C,CAAC;AAChF,eAAO,MAAM,0BAA0B,QAAkD,CAAC;AAC1F,eAAO,MAAM,wBAAwB,QAAgD,CAAC;AACtF,eAAO,MAAM,2BAA2B,QAAmD,CAAC;AAG5F,eAAO,MAAM,kBAAkB,GAAI,QAAQ,QAAQ,GAAG,SAAS,GAAG,eAAe,GAAG,aAAa,GAAG,gBAAgB,GAAG,MAAM;;cAChG,MAAM;sBAAgB,MAAM;cAAQ,MAAM;kBAAY,MAAM;;CAgDxF,CAAC"}

package/dist/panels/ConfigLibraryBrowserPanel.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { PanelComponentProps } from '@principal-ade/panel-framework-core';
+/**
+ * Event payload for config selection
+ */
+export interface ConfigSelectedEventPayload {
+    configId: string;
+    configPath: string;
+    configName: string;
+}
+/**
+ * Config Library Browser Panel
+ *
+ * Lists available .canvas configurations and component library items.
+ * Clicking a config emits an event that the graph panel can listen to.
+ */
+export declare const ConfigLibraryBrowserPanel: React.FC<PanelComponentProps>;
+//# sourceMappingURL=ConfigLibraryBrowserPanel.d.ts.map

package/dist/panels/ConfigLibraryBrowserPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigLibraryBrowserPanel.d.ts","sourceRoot":"","sources":["../../src/panels/ConfigLibraryBrowserPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAiD/E;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4jCnE,CAAC"}

package/dist/panels/ConfigLibraryBrowserPanel.stories.d.ts

@@ -0,0 +1,42 @@
+import type { StoryObj } from '@storybook/react-vite';
+/**
+ * ConfigLibraryBrowserPanel displays available .canvas configurations
+ * and component library items from the .vgc/ folder.
+ */
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("@principal-ade/panel-framework-core").PanelComponentProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        context: import("@principal-ade/panel-framework-core").PanelContextValue;
+        actions: import("@principal-ade/panel-framework-core").PanelActions;
+        events: import("@principal-ade/panel-framework-core").PanelEventEmitter;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Default story with multiple configs and a library
+ */
+export declare const WithConfigsAndLibrary: Story;
+/**
+ * Story with only configs, no library
+ */
+export declare const ConfigsOnly: Story;
+/**
+ * Empty state - no .vgc folder
+ */
+export declare const EmptyState: Story;
+/**
+ * Loading state
+ */
+export declare const Loading: Story;
+//# sourceMappingURL=ConfigLibraryBrowserPanel.stories.d.ts.map

package/dist/panels/ConfigLibraryBrowserPanel.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigLibraryBrowserPanel.stories.d.ts","sourceRoot":"","sources":["../../src/panels/ConfigLibraryBrowserPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAqK5D;;;GAGG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAsBwC,CAAC;AAEnD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,KA6CnC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAyDzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KA0CxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KA8BrB,CAAC"}

package/dist/panels/ControlTowerIntegration.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+/**
+ * Live integration test with real Control Tower Core configuration
+ */
+export declare const LiveIntegration: StoryObj;
+/**
+ * Shows the stats and configuration being used
+ */
+export declare const ConfigurationView: StoryObj;
+//# sourceMappingURL=ControlTowerIntegration.stories.d.ts.map

package/dist/panels/ControlTowerIntegration.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlTowerIntegration.stories.d.ts","sourceRoot":"","sources":["../../src/panels/ControlTowerIntegration.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AA+K5D,QAAA,MAAM,IAAI,EAAE,IASX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,QAyb7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,QA0I/B,CAAC"}

package/dist/panels/EventControllerPanel.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { GraphEvent } from '@principal-ai/principal-view-core';
+export type PlaybackStatus = 'stopped' | 'playing' | 'paused';
+export interface PlaybackState {
+    status: PlaybackStatus;
+    currentIndex: number;
+    totalEvents: number;
+    speed: number;
+}
+export interface EventControllerPanelProps {
+    /** Array of events to play through */
+    events: GraphEvent[];
+    /** Callback when events should be emitted to the graph */
+    onEventsEmit: (events: GraphEvent[]) => void;
+    /** Callback when playback state changes */
+    onPlaybackStateChange?: (state: PlaybackState) => void;
+    /** Default playback speed multiplier (default: 1) */
+    defaultSpeed?: number;
+    /** Whether to auto-play on mount (default: false) */
+    autoPlay?: boolean;
+    /** Whether to loop playback (default: false) */
+    loop?: boolean;
+}
+/**
+ * EventControllerPanel - Controls event playback and emits events to GraphRenderer
+ *
+ * This panel acts as the intermediary between stored events and the graph visualization.
+ * It provides playback controls (play, pause, stop, step, seek) and emits events
+ * that the GraphRenderer can consume for animations.
+ */
+export declare const EventControllerPanel: React.FC<EventControllerPanelProps>;
+//# sourceMappingURL=EventControllerPanel.d.ts.map

package/dist/panels/EventControllerPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventControllerPanel.d.ts","sourceRoot":"","sources":["../../src/panels/EventControllerPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAGpE,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9D,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,cAAc,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,yBAAyB;IACxC,sCAAsC;IACtC,MAAM,EAAE,UAAU,EAAE,CAAC;IAErB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAE7C,2CAA2C;IAC3C,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,gDAAgD;IAChD,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAID;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA+iBpE,CAAC"}

package/dist/panels/EventControllerPanel.stories.d.ts

@@ -0,0 +1,53 @@
+import type { StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import type { GraphEvent } from '@principal-ai/principal-view-core';
+/**
+ * EventControllerPanel controls event playback and emits events to GraphRenderer.
+ * This demonstrates the panel-to-panel communication pattern where the EventController
+ * stores events and plays them back, while GraphRenderer consumes them for animations.
+ */
+declare const meta: {
+    title: string;
+    component: React.FC<import("./EventControllerPanel").EventControllerPanelProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        events: GraphEvent[];
+        onEventsEmit: (events: GraphEvent[]) => void;
+        onPlaybackStateChange?: ((state: import("./EventControllerPanel").PlaybackState) => void) | undefined;
+        defaultSpeed?: number | undefined;
+        autoPlay?: boolean | undefined;
+        loop?: boolean | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Combined Panel Demo - Shows EventControllerPanel and GraphRenderer working together
+ * This is the main story demonstrating panel-to-panel communication
+ */
+export declare const CombinedPanelDemo: Story;
+/**
+ * Standalone Event Controller - Shows the panel in isolation
+ */
+export declare const StandaloneController: Story;
+/**
+ * Empty State - Shows controller with no events
+ */
+export declare const EmptyState: Story;
+/**
+ * Many Events - Shows controller with a large number of events
+ */
+export declare const ManyEvents: Story;
+/**
+ * Full Integration Demo - Complete demo with all features
+ */
+export declare const FullIntegrationDemo: Story;
+//# sourceMappingURL=EventControllerPanel.stories.d.ts.map

package/dist/panels/EventControllerPanel.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventControllerPanel.stories.d.ts","sourceRoot":"","sources":["../../src/panels/EventControllerPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAkB,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAGpF;;;;GAIG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAsBmC,CAAC;AAE9C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAiNnC;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAuC/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAUlC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAoBxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAmEjC,CAAC"}

package/dist/panels/EventRecorderPanel.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { EventSession, SessionStatus } from '@principal-ai/principal-view-core';
+import type { GraphEvent } from '@principal-ai/principal-view-core';
+/**
+ * Session summary for display
+ */
+export interface SessionSummary {
+    id: string;
+    name: string;
+    status: SessionStatus;
+    eventCount: number;
+    startedAt: number;
+    endedAt?: number;
+    duration?: number;
+    result?: 'pass' | 'fail' | 'skip';
+    testFile?: string;
+    testName?: string;
+}
+export interface EventRecorderPanelProps {
+    /** List of sessions to display */
+    sessions: EventSession[];
+    /** Currently active session ID (if recording) */
+    activeSessionId?: string;
+    /** Whether the recorder is currently recording */
+    isRecording?: boolean;
+    /** Callback when a session is selected for viewing */
+    onSessionSelect?: (sessionId: string) => void;
+    /** Callback when a session's events should be played */
+    onPlaySession?: (sessionId: string, events: GraphEvent[]) => void;
+    /** Callback when a session is deleted */
+    onDeleteSession?: (sessionId: string) => void;
+    /** Callback when a session is exported */
+    onExportSession?: (sessionId: string) => void;
+    /** Callback when a session is imported */
+    onImportSession?: (json: string) => void;
+    /** Callback to start a new recording session */
+    onStartRecording?: (name: string) => void;
+    /** Callback to stop the current recording */
+    onStopRecording?: () => void;
+    /** Currently selected session ID */
+    selectedSessionId?: string;
+}
+/**
+ * EventRecorderPanel - UI for managing event recording sessions
+ *
+ * This panel displays a list of recording sessions and allows users to:
+ * - View session details and events
+ * - Start/stop recording
+ * - Play back recorded sessions
+ * - Export/import sessions
+ * - Delete sessions
+ */
+export declare const EventRecorderPanel: React.FC<EventRecorderPanelProps>;
+//# sourceMappingURL=EventRecorderPanel.d.ts.map

package/dist/panels/EventRecorderPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventRecorderPanel.d.ts","sourceRoot":"","sources":["../../src/panels/EventRecorderPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAEzE,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EAEd,MAAM,mCAAmC,CAAC;AAiB3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAEpE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,kCAAkC;IAClC,QAAQ,EAAE,YAAY,EAAE,CAAC;IAEzB,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,sDAAsD;IACtD,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,wDAAwD;IACxD,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAElE,yCAAyC;IACzC,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEzC,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAE7B,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAuCD;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAsoBhE,CAAC"}

package/dist/panels/EventRecorderPanel.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { EventRecorderPanel } from './EventRecorderPanel';
+declare const meta: Meta<typeof EventRecorderPanel>;
+export default meta;
+type Story = StoryObj<typeof EventRecorderPanel>;
+export declare const Empty: Story;
+export declare const WithSessions: Story;
+export declare const Recording: Story;
+export declare const Interactive: Story;
+export declare const WideLayout: Story;
+export declare const ManySessions: Story;
+//# sourceMappingURL=EventRecorderPanel.stories.d.ts.map

package/dist/panels/EventRecorderPanel.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventRecorderPanel.stories.d.ts","sourceRoot":"","sources":["../../src/panels/EventRecorderPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI1D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CAmBzC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAC;AA+DjD,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KAoC1B,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAqIzB,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KA6BxB,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KAmB1B,CAAC"}

package/dist/panels/EventRecordingIntegration.stories.d.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+/**
+ * Full recording flow integration story
+ *
+ * Demonstrates:
+ * 1. Recording sessions with the EventRecorderService
+ * 2. Viewing sessions in the EventRecorderPanel
+ * 3. Playing back events in the EventControllerPanel
+ */
+export declare const FullRecordingFlow: StoryObj;
+/**
+ * Side-by-side panels showing the workflow
+ */
+export declare const RecorderAndControllerPanels: StoryObj;
+/**
+ * Demonstrates WebSocket message flow simulation
+ */
+export declare const WebSocketMessageFlow: StoryObj;
+//# sourceMappingURL=EventRecordingIntegration.stories.d.ts.map

package/dist/panels/EventRecordingIntegration.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventRecordingIntegration.stories.d.ts","sourceRoot":"","sources":["../../src/panels/EventRecordingIntegration.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAqE5D,QAAA,MAAM,IAAI,EAAE,IASX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,QA0S/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,QAgFzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAgKlC,CAAC"}

package/dist/panels/PrincipalViewGraphPanel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { PanelComponentProps } from '@principal-ade/panel-framework-core';
+/**
+ * Principal View Graph Panel
+ *
+ * Visualizes .canvas configuration files as interactive graph diagrams
+ * with full editing support for nodes, edges, and positions.
+ */
+export declare const PrincipalViewGraphPanel: React.FC<PanelComponentProps>;
+//# sourceMappingURL=PrincipalViewGraphPanel.d.ts.map

package/dist/panels/PrincipalViewGraphPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrincipalViewGraphPanel.d.ts","sourceRoot":"","sources":["../../src/panels/PrincipalViewGraphPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAyC/E;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyuBjE,CAAC"}

package/dist/panels/PrincipalViewGraphPanel.stories.d.ts

@@ -0,0 +1,77 @@
+import type { StoryObj } from '@storybook/react-vite';
+/**
+ * PrincipalViewGraphPanel visualizes .canvas files as interactive graphs.
+ * It demonstrates graph rendering with ReactFlow and ExtendedCanvas format.
+ */
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("@principal-ade/panel-framework-core").PanelComponentProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        context: import("@principal-ade/panel-framework-core").PanelContextValue;
+        actions: import("@principal-ade/panel-framework-core").PanelActions;
+        events: import("@principal-ade/panel-framework-core").PanelEventEmitter;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Default story with simple configuration
+ * Shows a basic 3-node graph with API, database, and logger components
+ */
+export declare const SimpleConfiguration: Story;
+/**
+ * Complex configuration with multiple components and states
+ * Shows the Repository Traffic Controller with lock manager, GitHub API, and database
+ */
+export declare const ComplexConfiguration: Story;
+/**
+ * Control Tower configuration with manual layout
+ * Shows client-server architecture with explicit node positions
+ */
+export declare const ControlTowerConfiguration: Story;
+/**
+ * Loading state - file tree is being loaded
+ */
+export declare const Loading: Story;
+/**
+ * Empty state - no configuration file found in project
+ * Shows educational content and copyable template to get started
+ */
+export declare const EmptyState: Story;
+/**
+ * Invalid JSON configuration
+ */
+export declare const InvalidJSON: Story;
+/**
+ * File tree slice not available
+ */
+export declare const NoFileTreeSlice: Story;
+/**
+ * Interactive example with custom repository
+ */
+export declare const CustomRepository: Story;
+/**
+ * Node Colors Demo - demonstrates pv.fill and pv.stroke properties
+ * Shows how different node types can have distinct fill and stroke colors
+ */
+export declare const NodeColorsDemo: Story;
+/**
+ * Color Priority Test - demonstrates color source priority
+ * Shows how pv.fill takes priority over node.color
+ * Priority: pv.fill > node.color > default
+ */
+export declare const ColorPriorityTest: Story;
+/**
+ * Empty project with workspace scope only
+ */
+export declare const WorkspaceScope: Story;
+//# sourceMappingURL=PrincipalViewGraphPanel.stories.d.ts.map

package/dist/panels/PrincipalViewGraphPanel.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrincipalViewGraphPanel.stories.d.ts","sourceRoot":"","sources":["../../src/panels/PrincipalViewGraphPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D;;;GAGG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAsBsC,CAAC;AAEjD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,KA0CjC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KA0ClC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,KA0CvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KA4BxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAqDzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAiB7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAuD9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KA0C5B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KA0C/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAiD5B,CAAC"}

package/dist/panels/principal-view/ConfigLoader.d.ts

@@ -0,0 +1,43 @@
+import type { ExtendedCanvas, ComponentLibrary } from '@principal-ai/principal-view-core';
+export interface ConfigFile {
+    /** Unique identifier for this config (derived from filename) */
+    id: string;
+    /** Display name for this config */
+    name: string;
+    /** Full file path */
+    path: string;
+    /** Whether this is from a config folder or standalone */
+    source: 'folder' | 'standalone';
+}
+/**
+ * Utility for loading and parsing .canvas configuration files from .vgc/ folder
+ */
+export declare class ConfigLoader {
+    /**
+     * Parse JSON canvas content
+     */
+    static parseCanvas(content: string): ExtendedCanvas;
+    /**
+     * Parse YAML library content
+     */
+    static parseLibrary(content: string): ComponentLibrary;
+    /**
+     * Find the library.yaml file in the .vgc/ folder
+     * Returns the relative path if found, null otherwise
+     */
+    static findLibraryPath(files: Array<{
+        path?: string;
+        relativePath?: string;
+        name?: string;
+    }>): string | null;
+    /**
+     * Find all .canvas files in the .vgc/ folder
+     * Returns array of config files with metadata
+     */
+    static findConfigs(files: Array<{
+        path?: string;
+        relativePath?: string;
+        name?: string;
+    }>): ConfigFile[];
+}
+//# sourceMappingURL=ConfigLoader.d.ts.map

package/dist/panels/principal-view/ConfigLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigLoader.d.ts","sourceRoot":"","sources":["../../../src/panels/principal-view/ConfigLoader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAG1F,MAAM,WAAW,UAAU;IACzB,gEAAgE;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,MAAM,EAAE,QAAQ,GAAG,YAAY,CAAC;CACjC;AAgBD;;GAEG;AACH,qBAAa,YAAY;IACvB;;OAEG;IACH,MAAM,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,cAAc;IAQnD;;OAEG;IACH,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,gBAAgB;IAQtD;;;OAGG;IACH,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,MAAM,GAAG,IAAI;IAgB5G;;;OAGG;IACH,MAAM,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,UAAU,EAAE;CA6BxG"}

package/dist/panels/principal-view/EmptyStateContent.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Theme } from '@principal-ade/industry-theme';
+interface EmptyStateContentProps {
+    theme: Theme;
+}
+/**
+ * Empty state component for Principal View Graph Panel
+ * Displays when no .vgc/ folder with configuration files is found in the project
+ */
+export declare const EmptyStateContent: React.FC<EmptyStateContentProps>;
+export {};
+//# sourceMappingURL=EmptyStateContent.d.ts.map

package/dist/panels/principal-view/EmptyStateContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyStateContent.d.ts","sourceRoot":"","sources":["../../../src/panels/principal-view/EmptyStateContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAE3D,UAAU,sBAAsB;IAC9B,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAoO9D,CAAC"}

package/dist/panels/principal-view/ErrorStateContent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Theme } from '@principal-ade/industry-theme';
+interface ErrorStateContentProps {
+    theme: Theme;
+    error: string;
+    onRetry: () => void;
+}
+/**
+ * Error state component for Visual Validation Graph Panel
+ * Displays when configuration loading fails
+ */
+export declare const ErrorStateContent: React.FC<ErrorStateContentProps>;
+export {};
+//# sourceMappingURL=ErrorStateContent.d.ts.map

package/dist/panels/principal-view/ErrorStateContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorStateContent.d.ts","sourceRoot":"","sources":["../../../src/panels/principal-view/ErrorStateContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAE3D,UAAU,sBAAsB;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuC9D,CAAC"}

package/dist/panels/principal-view/forceLayout.d.ts

@@ -0,0 +1,38 @@
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
+export interface ForceLayoutOptions {
+    /** Strength of repulsion between nodes (-300 default, more negative = more spread) */
+    chargeStrength?: number;
+    /** Target distance between linked nodes (150 default) */
+    linkDistance?: number;
+    /** Collision radius multiplier based on node size (1.2 default) */
+    collisionMultiplier?: number;
+    /** Number of simulation iterations (300 default) */
+    iterations?: number;
+    /** Center X coordinate (auto-calculated if not provided) */
+    centerX?: number;
+    /** Center Y coordinate (auto-calculated if not provided) */
+    centerY?: number;
+}
+/**
+ * Apply D3 force-directed layout to an ExtendedCanvas.
+ * Handles cycles naturally since force simulation doesn't assume hierarchy.
+ */
+export declare function applyForceLayout(canvas: ExtendedCanvas, options?: ForceLayoutOptions): ExtendedCanvas;
+export interface SugiyamaLayoutOptions {
+    /** Direction of the layout: 'TB' (top-bottom), 'BT', 'LR' (left-right), 'RL' */
+    direction?: 'TB' | 'BT' | 'LR' | 'RL';
+    /** Horizontal spacing between nodes */
+    nodeSpacingX?: number;
+    /** Vertical spacing between layers */
+    nodeSpacingY?: number;
+    /** Starting X offset */
+    offsetX?: number;
+    /** Starting Y offset */
+    offsetY?: number;
+}
+/**
+ * Apply Sugiyama (hierarchical/layered) layout to an ExtendedCanvas.
+ * Best for DAGs and directed graphs. Falls back to force layout if cycles exist.
+ */
+export declare function applySugiyamaLayout(canvas: ExtendedCanvas, options?: SugiyamaLayoutOptions): ExtendedCanvas;
+//# sourceMappingURL=forceLayout.d.ts.map

package/dist/panels/principal-view/forceLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forceLayout.d.ts","sourceRoot":"","sources":["../../../src/panels/principal-view/forceLayout.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAaxE,MAAM,WAAW,kBAAkB;IACjC,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,cAAc,EACtB,OAAO,GAAE,kBAAuB,GAC/B,cAAc,CA+FhB;AAED,MAAM,WAAW,qBAAqB;IACpC,gFAAgF;IAChF,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,cAAc,EACtB,OAAO,GAAE,qBAA0B,GAClC,cAAc,CA8HhB"}