@industry-theme/principal-view-panels 0.1.54 → 0.1.56

package/dist/index.d.ts

@@ -2,7 +2,9 @@ import type { PanelDefinition } from './types';
 export { EventControllerPanel } from './panels/EventControllerPanel';
 export type { EventControllerPanelProps, PlaybackState, PlaybackStatus } from './panels/EventControllerPanel';
 export { TraceViewerPanel } from './panels/TraceViewerPanel';
-export { ExecutionViewerPanel } from './panels/ExecutionViewerPanel';
+export { CanvasDetailPanel } from './panels/CanvasDetailPanel';
+export type { CanvasDetailPanelProps } from './panels/CanvasDetailPanel';
+export { CanvasListPanel } from './panels/CanvasListPanel';
 export { PanelFileSystemAdapter } from './adapters/PanelFileSystemAdapter';
 export type { FileTreeEntry, PanelFileSystemAdapterOptions } from './adapters/PanelFileSystemAdapter';
 /**

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAIlE,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,YAAY,EAAE,yBAAyB,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE9G,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAGrE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,YAAY,EAAE,aAAa,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAEtG;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,eAAe,EA+FnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAGzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,qBAG3B,CAAC;AAEF;;;GAGG;AACH,OAAO,EACL,uBAAuB,EACvB,+BAA+B,EAC/B,aAAa,EACb,aAAa,EACb,gBAAgB,GACjB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAIlE,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,YAAY,EAAE,yBAAyB,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE9G,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,YAAY,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAG3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,YAAY,EAAE,aAAa,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAEtG;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,eAAe,EA6HnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAGzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,qBAG3B,CAAC;AAEF;;;GAGG;AACH,OAAO,EACL,uBAAuB,EACvB,+BAA+B,EAC/B,aAAa,EACb,aAAa,EACb,gBAAgB,GACjB,MAAM,SAAS,CAAC"}

package/dist/panels/CanvasDetailPanel.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { PanelComponentProps } from '@principal-ade/panel-framework-core';
+export type ViewMode = 'raw' | 'narrative';
+/**
+ * Props for CanvasDetailPanel
+ */
+export interface CanvasDetailPanelProps extends PanelComponentProps {
+    /**
+     * Optional canvas ID to display.
+     * If provided, this takes precedence over events.
+     * This allows the host to control panel state via props instead of events.
+     */
+    selectedCanvasId?: string | null;
+    /**
+     * Optional canvas path to load.
+     * If provided along with selectedCanvasId, the panel will load this canvas immediately.
+     */
+    canvasPath?: string | null;
+    /**
+     * Optional canvas name for display.
+     */
+    canvasName?: string | null;
+}
+/**
+ * Canvas Detail Panel
+ *
+ * Displays canvas details with execution artifacts, narrative templates, and playback controls.
+ * Can be controlled via props (selectedCanvasId) or events.
+ */
+export declare const CanvasDetailPanel: React.FC<CanvasDetailPanelProps>;
+//# sourceMappingURL=CanvasDetailPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasDetailPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasDetailPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAuB/E,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,WAAW,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,mBAAmB;IACjE;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEjC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AA2BD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAw8B9D,CAAC"}

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

@@ -0,0 +1,50 @@
+import type { StoryObj } from '@storybook/react-vite';
+import React from 'react';
+/**
+ * CanvasDetailPanel Component
+ *
+ * Visualizes execution artifacts (test runs) overlaid on canvas diagrams.
+ * Canvas files are selected from the CanvasListPanel via events.
+ *
+ * Features:
+ * - Narrative template visualization with scenario mapping
+ * - Execution artifact playback with timeline controls
+ * - Side-by-side canvas and event visualization
+ * - Metadata display (spans, events, framework, status)
+ */
+declare const meta: {
+    title: string;
+    component: React.FC<import("./CanvasDetailPanel").CanvasDetailPanelProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        selectedCanvasId?: string | null | undefined;
+        canvasPath?: string | null | undefined;
+        canvasName?: string | null | undefined;
+        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>;
+/**
+ * Step 2: Canvas + Narrative Template
+ * Adds narrative template but no execution data yet.
+ * Shows scenario mapping without actual execution runs.
+ */
+export declare const ProgressiveStep2CanvasAndNarrative: Story;
+/**
+ * Step 3: Canvas + Narrative + Execution Data
+ * Complete setup with canvas, narrative template, and actual execution spans.
+ * Shows full narrative rendering with execution data mapped to scenarios.
+ */
+export declare const ProgressiveStep3FullSetup: Story;
+//# sourceMappingURL=CanvasDetailPanel.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasDetailPanel.stories.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasDetailPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAoB,MAAM,OAAO,CAAC;AAMzC;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAsBgC,CAAC;AAE3C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4QnC;;;;GAIG;AACH,eAAO,MAAM,kCAAkC,EAAE,KAiChD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAuCvC,CAAC"}

package/dist/panels/CanvasListPanel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { PanelComponentProps } from '@principal-ade/panel-framework-core';
+/**
+ * CanvasListPanel - A panel for displaying .otel.canvas files
+ *
+ * This panel shows:
+ * - List/grid of available canvas files from the file tree
+ * - Search functionality to filter canvases
+ * - Canvas metadata (name, source, path)
+ * - Click to select and emit events for detail views
+ */
+export declare const CanvasListPanel: React.FC<PanelComponentProps>;
+//# sourceMappingURL=CanvasListPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAO/E;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmTzD,CAAC"}

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

@@ -0,0 +1,47 @@
+import type { StoryObj } from '@storybook/react-vite';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: 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 showing the canvas list panel with multiple canvas files
+ */
+export declare const Default: Story;
+/**
+ * Loading state
+ */
+export declare const Loading: Story;
+/**
+ * Empty state with no canvas files
+ */
+export declare const Empty: Story;
+/**
+ * With event handling - demonstrates event emission on canvas selection
+ */
+export declare const WithEventHandling: Story;
+/**
+ * Single canvas file
+ */
+export declare const SingleCanvas: Story;
+/**
+ * Many canvas files (scrolling behavior)
+ */
+export declare const ManyCanvases: Story;
+//# sourceMappingURL=CanvasListPanel.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasListPanel.stories.d.ts","sourceRoot":"","sources":["../../src/panels/CanvasListPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;CAsB8B,CAAC;AAEzC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAuCnC;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KA8BrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KA8BrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KA8BnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAmD/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAuC1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAuC1B,CAAC"}

package/dist/panels/canvas-list/components/CanvasCard.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { CanvasFile } from '../../execution-viewer/ExecutionLoader';
+interface CanvasCardProps {
+    canvas: CanvasFile;
+    onClick: (canvas: CanvasFile) => void;
+    isSelected?: boolean;
+}
+/**
+ * CanvasCard - Displays a canvas file in a card format
+ */
+export declare const CanvasCard: React.FC<CanvasCardProps>;
+export {};
+//# sourceMappingURL=CanvasCard.d.ts.map

package/dist/panels/canvas-list/components/CanvasCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasCard.d.ts","sourceRoot":"","sources":["../../../../src/panels/canvas-list/components/CanvasCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAEzE,UAAU,eAAe;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgFhD,CAAC"}

package/dist/panels/canvas-list/hooks/useCanvasData.d.ts

@@ -0,0 +1,17 @@
+import type { PanelContextValue } from '@principal-ade/panel-framework-core';
+import { type CanvasFile } from '../../execution-viewer/ExecutionLoader';
+interface UseCanvasDataParams {
+    context: PanelContextValue;
+}
+interface UseCanvasDataReturn {
+    canvases: CanvasFile[];
+    isLoading: boolean;
+    error: string | null;
+    refreshCanvases: () => Promise<void>;
+}
+/**
+ * Hook to discover and load .otel.canvas files from the file tree
+ */
+export declare const useCanvasData: ({ context, }: UseCanvasDataParams) => UseCanvasDataReturn;
+export {};
+//# sourceMappingURL=useCanvasData.d.ts.map

package/dist/panels/canvas-list/hooks/useCanvasData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasData.d.ts","sourceRoot":"","sources":["../../../../src/panels/canvas-list/hooks/useCanvasData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAmB,KAAK,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAE1F,UAAU,mBAAmB;IAC3B,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAED,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC;AAKD;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,cAE3B,mBAAmB,KAAG,mBAqExB,CAAC"}

package/dist/panels/execution-viewer/NarrativeRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NarrativeRenderer.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/NarrativeRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAG9F,MAAM,WAAW,sBAAsB;IACrC,8CAA8C;IAC9C,QAAQ,EAAE,iBAAiB,CAAC;IAE5B,4BAA4B;IAC5B,MAAM,EAAE,SAAS,EAAE,CAAC;IAEpB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAoL9D,CAAC"}
+{"version":3,"file":"NarrativeRenderer.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/NarrativeRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAG9F,MAAM,WAAW,sBAAsB;IACrC,8CAA8C;IAC9C,QAAQ,EAAE,iBAAiB,CAAC;IAE5B,4BAA4B;IAC5B,MAAM,EAAE,SAAS,EAAE,CAAC;IAEpB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA8X9D,CAAC"}

package/dist/panels/execution-viewer/NarrativeTemplatePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NarrativeTemplatePanel.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/NarrativeTemplatePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AACnF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvD,UAAU,2BAA2B;IACnC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,mBAAmB,CAAC,EAAE,aAAa,EAAE,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAiUxE,CAAC"}
+{"version":3,"file":"NarrativeTemplatePanel.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/NarrativeTemplatePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AACnF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvD,UAAU,2BAA2B;IACnC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,mBAAmB,CAAC,EAAE,aAAa,EAAE,CAAC;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAwYxE,CAAC"}