@industry-theme/principal-view-panels 0.12.5 → 0.12.7

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export type { WorkflowScenariosPanelProps } from './panels/WorkflowScenariosPane
 export { StoryboardListPanel } from './panels/StoryboardListPanel';
 export { TraceListPanel } from './panels/TraceListPanel';
 export { TraceDetailsPanel } from './panels/TraceDetailsPanel';
+export { MultiCanvasPanel, createMultiCanvasLayout } from './panels/MultiCanvasPanel';
+export type { MultiCanvasPanelProps, CanvasInfo } from './panels/MultiCanvasPanel';
 export { PanelFileSystemAdapter } from './adapters/PanelFileSystemAdapter';
 export type { FileTreeEntry, PanelFileSystemAdapterOptions } from './adapters/PanelFileSystemAdapter';
 export type { RegisteredTrace, WorkflowMatch } from './types/otel';

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,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,YAAY,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,YAAY,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,YAAY,EAAE,aAAa,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAItG,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3F,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGvE,OAAO,EACL,SAAS,EACT,aAAa,EACb,QAAQ,EACR,MAAM,EACN,UAAU,EACV,cAAc,EACd,WAAW,EACX,cAAc,GACf,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAErD;;;;GAIG;AAEH,eAAO,MAAM,MAAM,EAAE,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC,EA+G7C,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":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAC;AAIlE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,YAAY,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,YAAY,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACtF,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAGnF,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,YAAY,EAAE,aAAa,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAItG,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3F,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGvE,OAAO,EACL,SAAS,EACT,aAAa,EACb,QAAQ,EACR,MAAM,EACN,UAAU,EACV,cAAc,EACd,WAAW,EACX,cAAc,GACf,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAErD;;;;GAIG;AAEH,eAAO,MAAM,MAAM,EAAE,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC,EA+G7C,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/MultiCanvasPanel.d.ts

@@ -1,9 +1,30 @@
 import React from 'react';
 import { type MultiCanvasLayout } from '@principal-ai/principal-view-react';
 import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
+/**
+ * Canvas info with path for loading
+ */
+export interface CanvasInfo {
+    /** Unique identifier */
+    id: string;
+    /** Path to load the canvas from (relative to repository root) */
+    path: string;
+    /** Display label */
+    label?: string;
+}
 export interface MultiCanvasPanelProps {
-    /** Layout configuration with canvas placements */
-    layout: MultiCanvasLayout;
+    /** Context from panel framework */
+    context: {
+        repositoryPath?: string;
+        [key: string]: unknown;
+    };
+    /** Actions from panel framework */
+    actions: {
+        readFile?: (path: string) => Promise<string>;
+        [key: string]: unknown;
+    };
+    /** Canvas infos with paths to load */
+    canvasInfos: CanvasInfo[];
     /** Whether to show group borders around each canvas (default: true) */
     showGroups?: boolean;
     /** Show minimap for navigation (default: false) */
@@ -14,15 +35,15 @@ export interface MultiCanvasPanelProps {
     showBackground?: boolean;
     /** Background pattern variant */
     backgroundVariant?: 'dots' | 'lines' | 'cross';
-    /** Width of the panel */
-    width?: number;
-    /** Height of the panel */
-    height?: number;
+    /** Layout direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Gap between canvases */
+    gap?: number;
     /** Optional click handler for nodes */
     onNodeClick?: (nodeId: string) => void;
 }
 /**
- * MultiCanvasPanel displays multiple canvases on a single unified view
+ * MultiCanvasPanel loads and displays multiple canvases on a single unified view
  * using the MultiCanvasRenderer from principal-view-react.
  */
 export declare const MultiCanvasPanel: React.FC<MultiCanvasPanelProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"MultiCanvasPanel.d.ts","sourceRoot":"","sources":["../../src/panels/MultiCanvasPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuB,KAAK,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACjG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,MAAM,WAAW,qBAAqB;IACpC,kDAAkD;IAClD,MAAM,EAAE,iBAAiB,CAAC;IAC1B,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC/C,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwB5D,CAAC;AAEF;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,KAAK,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,EACF,OAAO,CAAC,EAAE;IACR,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GACA,iBAAiB,CA0BnB"}
+{"version":3,"file":"MultiCanvasPanel.d.ts","sourceRoot":"","sources":["../../src/panels/MultiCanvasPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,EAAuB,KAAK,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACjG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGxE;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,iEAAiE;IACjE,IAAI,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,qBAAqB;IACpC,mCAAmC;IACnC,OAAO,EAAE;QACP,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,mCAAmC;IACnC,OAAO,EAAE;QACP,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;QAC7C,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,sCAAsC;IACtC,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8CAA8C;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC/C,uBAAuB;IACvB,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,2BAA2B;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAQD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA8I5D,CAAC;AAEF;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,KAAK,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,EACF,OAAO,CAAC,EAAE;IACR,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GACA,iBAAiB,CA0BnB"}

package/dist/panels.bundle.js

@@ -88218,7 +88218,7 @@ function parseNodeId(mergedNodeId) {
     nodeId: mergedNodeId.substring(colonIndex + 1)
   };
 }
-forwardRef(function MultiCanvasRenderer({ layout, onLayoutChange, showGroups = true, ...graphRendererProps }, ref) {
+const MultiCanvasRenderer = forwardRef(function MultiCanvasRenderer2({ layout, onLayoutChange, showGroups = true, ...graphRendererProps }, ref) {
   const groupPositionsRef = useRef(/* @__PURE__ */ new Map());
   const mergedCanvas = useMemo(() => mergeCanvases(layout.placements, { showGroups }), [layout.placements, showGroups]);
   const draggableNodeIds = useMemo(() => {
@@ -106065,6 +106065,145 @@ const TraceDetailsPanel = ({
     }
   );
 };
+const MultiCanvasPanel = ({
+  context: context2,
+  actions,
+  canvasInfos,
+  showGroups = true,
+  showMinimap = true,
+  showControls = true,
+  showBackground = true,
+  backgroundVariant = "dots",
+  direction = "vertical",
+  gap = 150,
+  onNodeClick
+}) => {
+  const [loadedCanvases, setLoadedCanvases] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const contextRef = useRef(context2);
+  const actionsRef = useRef(actions);
+  useEffect(() => {
+    contextRef.current = context2;
+    actionsRef.current = actions;
+  });
+  const loadCanvases = useCallback(async () => {
+    const ctx = contextRef.current;
+    const acts = actionsRef.current;
+    const readFile = acts.readFile;
+    if (!readFile) {
+      setError("readFile action not available");
+      setLoading(false);
+      return;
+    }
+    const repositoryPath = ctx.repositoryPath;
+    if (!repositoryPath) {
+      setError("Repository path not available");
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const loaded = [];
+      for (const info of canvasInfos) {
+        try {
+          const fullPath = `${repositoryPath}/${info.path}`;
+          const content2 = await readFile(fullPath);
+          if (content2 && typeof content2 === "string") {
+            const canvas = ConfigLoader.parseCanvas(content2);
+            if (canvas) {
+              loaded.push({
+                id: info.id,
+                canvas,
+                label: info.label
+              });
+            }
+          }
+        } catch (err) {
+          console.warn(`[MultiCanvasPanel] Failed to load canvas ${info.path}:`, err);
+        }
+      }
+      setLoadedCanvases(loaded);
+      setLoading(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load canvases");
+      setLoading(false);
+    }
+  }, [canvasInfos]);
+  useEffect(() => {
+    loadCanvases();
+  }, [loadCanvases]);
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      color: "#888",
+      fontSize: "14px"
+    }, children: [
+      "Loading ",
+      canvasInfos.length,
+      " canvases..."
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      color: "#ef4444",
+      fontSize: "14px"
+    }, children: [
+      "Error: ",
+      error
+    ] });
+  }
+  if (loadedCanvases.length === 0) {
+    return /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      color: "#888",
+      fontSize: "14px"
+    }, children: "No canvases loaded" });
+  }
+  const layout = createMultiCanvasLayout(loadedCanvases, { direction, gap });
+  return /* @__PURE__ */ jsx(
+    MultiCanvasRenderer,
+    {
+      layout,
+      showGroups,
+      showMinimap,
+      showControls,
+      showBackground,
+      backgroundVariant,
+      onNodeClick
+    }
+  );
+};
+function createMultiCanvasLayout(canvases, options) {
+  const direction = (options == null ? void 0 : options.direction) ?? "vertical";
+  const gap = (options == null ? void 0 : options.gap) ?? 100;
+  let currentOffset = 0;
+  const placements = canvases.map(({ id: id2, canvas, label }) => {
+    const placement = {
+      canvasId: id2,
+      canvas,
+      position: direction === "vertical" ? { x: 0, y: currentOffset } : { x: currentOffset, y: 0 },
+      label
+    };
+    const nodes = canvas.nodes ?? [];
+    const maxY = nodes.length > 0 ? Math.max(...nodes.map((n) => (n.y ?? 0) + (n.height ?? 100))) : 200;
+    const maxX = nodes.length > 0 ? Math.max(...nodes.map((n) => (n.x ?? 0) + (n.width ?? 200))) : 400;
+    currentOffset += (direction === "vertical" ? maxY : maxX) + gap;
+    return placement;
+  });
+  return { placements };
+}
 const TRACER_NAME = "@industry-theme/principal-view-panels";
 const TRACER_VERSION = "0.11.40";
 function getTracer() {
@@ -106218,6 +106357,7 @@ const onPackageUnload = async () => {
 };
 export {
   CanvasEditorPanel,
+  MultiCanvasPanel,
   PanelFileSystemAdapter,
   SpanStatusCode2 as SpanStatusCode,
   StoryboardListPanel,
@@ -106227,6 +106367,7 @@ export {
   TraceExpansion,
   TraceListPanel,
   WorkflowScenariosPanel,
+  createMultiCanvasLayout,
   focusNodeTool,
   getActiveSpan,
   getResource,