@principal-ai/subsystems-react 0.21.0 → 0.22.0

package/src/utils/elkLayout.ts

@@ -73,12 +73,13 @@ export interface ElkLayoutOptions {
   direction?: 'RIGHT' | 'LEFT' | 'DOWN' | 'UP';
 
   /**
-   * Compound groups — each becomes a nested ELK parent whose `memberIds`
-   * are laid out inside it. Members reference the group via React Flow
-   * `parentId`; ELK returns parent-relative child positions which this
-   * module flattens back to absolute flow coordinates.
+   * Compound groups — each becomes an ELK parent whose `memberIds` are laid
+   * out inside it. `memberIds` may be leaf node ids or other group ids
+   * (for nesting, e.g. process → module → leaves). Optional `parentId`
+   * nests this group under another group; omit for a root-level frame.
+   * Members reference their immediate parent via React Flow `parentId`.
    */
-  groups?: Array<{ id: string; memberIds: string[] }>;
+  groups?: Array<{ id: string; memberIds: string[]; parentId?: string }>;
 }
 
 /** Result of ELK layout computation */
@@ -502,51 +503,134 @@ export async function computeElkLayout(
 
   // Partition leaf nodes into compound parents when groups are given.
   // Group shells themselves are NOT part of `nodes` — they are reconstructed
-  // by the caller from `groupBounds`. Only leaf ids in `memberIds` nest.
+  // by the caller from `groupBounds`. `memberIds` may reference leaves or
+  // other group ids (process → module → leaves).
   const groupDefs = (options.groups ?? []).filter((g) => g.memberIds.length > 0);
-  const memberToGroup = new Map<string, string>();
+  const groupById = new Map(groupDefs.map((g) => [g.id, g]));
+  const elkById = new Map(elkNodes.map((n) => [n.id, n]));
+
+  const compoundLayoutOptions: LayoutOptions = {
+    'elk.algorithm': 'layered',
+    'elk.direction': direction,
+    'elk.padding': '[top=48,left=24,bottom=24,right=24]',
+    'elk.spacing.nodeNode': '40',
+  };
+
+  /** Descendant leaf count for singleton checks (nested groups count through). */
+  const leafDescendantCount = (memberIds: string[]): number => {
+    let n = 0;
+    for (const mid of memberIds) {
+      if (elkById.has(mid)) n += 1;
+      else {
+        const g = groupById.get(mid);
+        if (g) n += leafDescendantCount(g.memberIds);
+      }
+    }
+    return n;
+  };
+
+  const builtGroups = new Map<string, ElkNode>();
+  const skippedGroups = new Set<string>();
+  const pending = [...groupDefs];
+  // Build bottom-up: a group is ready when every member is a leaf or an
+  // already-built / skipped group. Skipped groups promote their members.
+  while (pending.length > 0) {
+    let progress = false;
+    for (let i = pending.length - 1; i >= 0; i--) {
+      const g = pending[i]!;
+      const childNodes: ElkNode[] = [];
+      let ready = true;
+      for (const mid of g.memberIds) {
+        if (elkById.has(mid)) {
+          childNodes.push(elkById.get(mid)!);
+          continue;
+        }
+        if (skippedGroups.has(mid)) {
+          // Promote skipped group's members into this parent.
+          const skipped = groupById.get(mid);
+          if (!skipped) {
+            ready = false;
+            break;
+          }
+          for (const sm of skipped.memberIds) {
+            if (elkById.has(sm)) childNodes.push(elkById.get(sm)!);
+            else if (builtGroups.has(sm)) childNodes.push(builtGroups.get(sm)!);
+            else if (!skippedGroups.has(sm)) {
+              ready = false;
+              break;
+            }
+          }
+          if (!ready) break;
+          continue;
+        }
+        if (builtGroups.has(mid)) {
+          childNodes.push(builtGroups.get(mid)!);
+          continue;
+        }
+        if (groupById.has(mid)) {
+          ready = false;
+          break;
+        }
+        // Unknown id — ignore (external stubs etc. may be absent).
+      }
+      if (!ready) continue;
+
+      pending.splice(i, 1);
+      progress = true;
+
+      // Skip frames with fewer than 2 leaf descendants — promote children up.
+      if (leafDescendantCount(g.memberIds) < 2 || childNodes.length < 1) {
+        skippedGroups.add(g.id);
+        continue;
+      }
+
+      builtGroups.set(g.id, {
+        id: g.id,
+        children: childNodes,
+        layoutOptions: compoundLayoutOptions,
+      });
+    }
+    if (!progress) {
+      // Cycle or unresolved refs — leave remaining groups unbuilt.
+      for (const g of pending) skippedGroups.add(g.id);
+      break;
+    }
+  }
+
   const groupedLeafIds = new Set<string>();
-  for (const g of groupDefs) {
-    for (const mid of g.memberIds) {
-      if (!memberToGroup.has(mid)) {
-        memberToGroup.set(mid, g.id);
-        groupedLeafIds.add(mid);
+  const markLeaves = (memberIds: string[]) => {
+    for (const mid of memberIds) {
+      if (elkById.has(mid)) groupedLeafIds.add(mid);
+      else {
+        const g = groupById.get(mid);
+        if (g && builtGroups.has(g.id)) markLeaves(g.memberIds);
+        else if (g && skippedGroups.has(g.id)) markLeaves(g.memberIds);
       }
     }
+  };
+  for (const [id] of builtGroups) {
+    const g = groupById.get(id);
+    if (g) markLeaves(g.memberIds);
   }
-  const elkById = new Map(elkNodes.map((n) => [n.id, n]));
+
   const ungroupedElkNodes: ElkNode[] = [];
   for (const n of elkNodes) {
     if (!groupedLeafIds.has(n.id)) ungroupedElkNodes.push(n);
   }
+
+  // Root-level compound parents: built groups with no parent, or whose parent
+  // was skipped / never built.
   const elkParents: ElkNode[] = [];
-  for (const g of groupDefs) {
-    const children = g.memberIds
-      .map((mid) => elkById.get(mid))
-      .filter((n): n is ElkNode => !!n);
-    // Skip groups with <2 real members — a single-child frame adds noise;
-    // the caller drops the shell and leaves the node top-level.
-    if (children.length < 2) {
-      for (const c of children) ungroupedElkNodes.push(c);
-      memberToGroup.delete(g.memberIds[0]);
-      groupedLeafIds.delete(g.memberIds[0]);
-      continue;
-    }
-    elkParents.push({
-      id: g.id,
-      children,
-      layoutOptions: {
-        'elk.algorithm': 'layered',
-        'elk.direction': direction,
-        'elk.padding': '[top=48,left=24,bottom=24,right=24]',
-        'elk.spacing.nodeNode': '40',
-      },
-    });
+  for (const [id, node] of builtGroups) {
+    const g = groupById.get(id);
+    const parentId = g?.parentId;
+    if (parentId && builtGroups.has(parentId)) continue; // nested inside parent
+    elkParents.push(node);
   }
 
   // Create ELK graph
   const rootOptions = getElkOptions(options);
-  if (elkParents.length > 0) {
+  if (elkParents.length > 0 || builtGroups.size > 0) {
     rootOptions['elk.hierarchyHandling'] = 'INCLUDE_CHILDREN';
   }
   const elkGraph: ElkNode = {
@@ -562,9 +646,6 @@ export async function computeElkLayout(
   // Build maps of ELK-computed positions. Nested children report
   // parent-relative coords — flatten to absolute for edges, and keep the
   // relative form for React Flow children (whose position is parent-relative).
-  // Absolute offset of every ELK node (parents included), accumulated down
-  // the ancestor chain — edge sections/labels are relative to their
-  // `container`, so each edge needs its container's absolute offset.
   const elkAbsOffsets = new Map<string, { x: number; y: number }>();
   const elkPositions = new Map<string, { x: number; y: number }>();
   const elkRelativePositions = new Map<string, { x: number; y: number }>();
@@ -576,27 +657,36 @@ export async function computeElkLayout(
     for (const c of n.children ?? []) walkElk(c, ax, ay);
   };
   walkElk(layoutedGraph, 0, 0);
+
+  const collectGroupResults = (n: ElkNode, isRootChild: boolean) => {
+    const isGroup = builtGroups.has(n.id);
+    if (isGroup) {
+      // Nested group positions are parent-relative (RF child semantics);
+      // root-level groups use absolute coords.
+      groupBounds.set(n.id, {
+        x: n.x ?? 0,
+        y: n.y ?? 0,
+        width: n.width ?? 0,
+        height: n.height ?? 0,
+      });
+      for (const c of n.children ?? []) {
+        const rx = c.x ?? 0;
+        const ry = c.y ?? 0;
+        elkRelativePositions.set(c.id, { x: rx, y: ry });
+        const abs = elkAbsOffsets.get(c.id) ?? { x: rx, y: ry };
+        elkPositions.set(c.id, abs);
+        if (builtGroups.has(c.id)) collectGroupResults(c, false);
+      }
+      return;
+    }
+    if (isRootChild) {
+      elkPositions.set(n.id, { x: n.x ?? 0, y: n.y ?? 0 });
+      elkRelativePositions.set(n.id, { x: n.x ?? 0, y: n.y ?? 0 });
+    }
+  };
   if (layoutedGraph.children) {
     for (const child of layoutedGraph.children) {
-      if (child.children && child.children.length > 0 && groupDefs.some((g) => g.id === child.id)) {
-        const gx = child.x ?? 0;
-        const gy = child.y ?? 0;
-        groupBounds.set(child.id, {
-          x: gx,
-          y: gy,
-          width: child.width ?? 0,
-          height: child.height ?? 0,
-        });
-        for (const grand of child.children) {
-          const rx = grand.x ?? 0;
-          const ry = grand.y ?? 0;
-          elkRelativePositions.set(grand.id, { x: rx, y: ry });
-          elkPositions.set(grand.id, { x: gx + rx, y: gy + ry });
-        }
-      } else {
-        elkPositions.set(child.id, { x: child.x ?? 0, y: child.y ?? 0 });
-        elkRelativePositions.set(child.id, { x: child.x ?? 0, y: child.y ?? 0 });
-      }
+      collectGroupResults(child, true);
     }
   }
 

package/dist/components/ConfigurationSelector.d.ts

@@ -1,35 +0,0 @@
-import React from 'react';
-import type { ConfigurationFile } from '@principal-ai/subsystems-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;
-    /** 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

@@ -1 +0,0 @@
-{"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,+BAA+B,CAAC;AAEvE,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,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA2FtE,CAAC"}

package/dist/components/ConfigurationSelector.js

@@ -1,63 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "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
- * />
- * ```
- */
-export const ConfigurationSelector = ({ configurations, selectedConfig, onConfigChange, className, style, showDescription = 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 (_jsx("div", { className: className, style: defaultStyle, children: _jsx("div", { style: { ...labelStyle, color: '#999' }, children: "No configurations available" }) }));
-    }
-    return (_jsxs("div", { className: className, style: defaultStyle, children: [_jsx("label", { style: labelStyle, htmlFor: "config-selector", children: label }), _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) => (_jsx("option", { value: config.name, children: config.config.metadata.name }, config.name))) }), selectedConfigData && showDescription && selectedConfigData.config.metadata.description && (_jsx("div", { style: infoStyle, children: _jsx("div", { children: selectedConfigData.config.metadata.description }) }))] }));
-};
-//# sourceMappingURL=ConfigurationSelector.js.map

package/dist/components/ConfigurationSelector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ConfigurationSelector.js","sourceRoot":"","sources":["../../src/components/ConfigurationSelector.tsx"],"names":[],"mappings":";AA0BA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAyC,CAAC,EAC1E,cAAc,EACd,cAAc,EACd,cAAc,EACd,SAAS,EACT,KAAK,EACL,eAAe,GAAG,KAAK,EACvB,KAAK,GAAG,qBAAqB,GAC9B,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,CAAC,KAA2C,EAAE,EAAE;QACnE,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,cAAc,CAAC,CAAC;IAEjF,MAAM,YAAY,GAAwB;QACxC,eAAe,EAAE,OAAO;QACxB,OAAO,EAAE,WAAW;QACpB,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,2BAA2B;QACtC,UAAU,EAAE,mEAAmE;QAC/E,GAAG,KAAK;KACT,CAAC;IAEF,MAAM,UAAU,GAAwB;QACtC,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,GAAG;QACf,YAAY,EAAE,KAAK;QACnB,KAAK,EAAE,MAAM;KACd,CAAC;IAEF,MAAM,WAAW,GAAwB;QACvC,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,UAAU;QACnB,QAAQ,EAAE,MAAM;QAChB,MAAM,EAAE,gBAAgB;QACxB,YAAY,EAAE,KAAK;QACnB,eAAe,EAAE,OAAO;QACxB,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,mBAAmB;KAChC,CAAC;IAEF,MAAM,SAAS,GAAwB;QACrC,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,KAAK;KAClB,CAAC;IAEF,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;QAC/B,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,YAC5C,cAAK,KAAK,EAAE,EAAE,GAAG,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,4CAAmC,GAC3E,CACP,CAAC;KACH;IAED,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,aAC5C,gBAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAC,iBAAiB,YAChD,KAAK,GACA,EAER,iBACE,EAAE,EAAC,iBAAiB,EACpB,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,WAAW,EAClB,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;oBAClB,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;gBAChD,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;oBAClB,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC;gBAC7C,CAAC,YAEA,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC9B,iBAA0B,KAAK,EAAE,MAAM,CAAC,IAAI,YACzC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,IADjB,MAAM,CAAC,IAAI,CAEf,CACV,CAAC,GACK,EAER,kBAAkB,IAAI,eAAe,IAAI,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,IAAI,CAC1F,cAAK,KAAK,EAAE,SAAS,YACnB,wBAAM,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,GAAO,GACvD,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/GraphRenderer.d.ts

@@ -1,295 +0,0 @@
-import React from 'react';
-import type { Violation, GraphEvent, ExtendedCanvas, ComponentLibrary } from '@principal-ai/subsystems-core';
-import { TooltipPortalContext } from '../contexts/TooltipPortalContext';
-export { TooltipPortalContext };
-/** Position change event for tracking node movements */
-export interface NodePositionChange {
-    nodeId: string;
-    position: {
-        x: number;
-        y: number;
-    };
-}
-/** Dimension change event for tracking node resizing */
-export interface NodeDimensionChange {
-    nodeId: string;
-    dimensions: {
-        width: number;
-        height: number;
-    };
-}
-/** Text change event for tracking inline text edits */
-export interface NodeTextChange {
-    nodeId: string;
-    text: string;
-}
-/** All pending changes that can be saved */
-export interface PendingChanges {
-    /** Node position changes */
-    positionChanges: NodePositionChange[];
-    /** Node dimension changes (from resizing) */
-    dimensionChanges: NodeDimensionChange[];
-    /** Text changes for text and group nodes */
-    textChanges: NodeTextChange[];
-    /** 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;
-    /** Whether there are changes that can be undone */
-    canUndo: () => boolean;
-    /** Whether there are changes that can be redone */
-    canRedo: () => boolean;
-    /** Undo the last change */
-    undo: () => void;
-    /** Redo the last undone change */
-    redo: () => void;
-}
-/** Base props shared by all render modes */
-interface GraphRendererBaseProps {
-    /** Optional violations to highlight */
-    violations?: Violation[];
-    /**
-     * Duration of the fitView animation in milliseconds.
-     * Set to 0 for instant positioning (no animation).
-     * Defaults to 200.
-     */
-    fitViewDuration?: number;
-    /**
-     * Whether to show tooltips on hover for nodes and edges.
-     * Defaults to true.
-     */
-    showTooltips?: boolean;
-    /**
-     * Optional node ID to highlight (e.g., when playing back execution events).
-     * Highlighted nodes will have a special visual treatment.
-     */
-    highlightedNodeId?: string | null;
-    /**
-     * Optional list of active node IDs (nodes involved in current execution scenario).
-     * Nodes NOT in this list will be dimmed (reduced opacity).
-     * If undefined or empty, all nodes are shown at full opacity.
-     */
-    activeNodeIds?: string[] | null;
-    /** 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;
-    /**
-     * Background variant style.
-     * - 'dots': Small dots pattern
-     * - 'lines': Grid lines (default)
-     * - 'cross': Cross pattern
-     */
-    backgroundVariant?: 'dots' | 'lines' | 'cross';
-    /**
-     * Gap between background pattern elements in pixels.
-     * Defaults to 50 for lines/cross, 16 for dots.
-     */
-    backgroundGap?: number;
-    /**
-     * Whether to show a center indicator at the canvas origin (0,0).
-     * Useful for visualizing where the center point is when items aren't centered.
-     * Defaults to false.
-     */
-    showCenterIndicator?: 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;
-    /**
-     * Callback when a node is clicked.
-     * Receives the node ID and the click event. If provided, overrides default node selection behavior.
-     */
-    onNodeClick?: (nodeId: string, event: React.MouseEvent) => void;
-    /**
-     * When set, fits the viewport to show these specific nodes.
-     * Useful for focusing on a subset of the graph (e.g., scenario nodes).
-     * Pass null/undefined/empty array to use default fitView behavior.
-     */
-    fitViewToNodeIds?: string[] | null;
-    /**
-     * Padding around nodes when fitting view to specific nodes.
-     * @default 0.2
-     */
-    fitViewPadding?: number;
-    /**
-     * Set of node IDs that should be draggable even when editable=false.
-     * Useful for allowing specific nodes (like group containers) to be moved
-     * while keeping other nodes locked in place.
-     */
-    draggableNodeIds?: Set<string>;
-    /**
-     * Callback fired when a node drag operation completes.
-     * Receives the node ID and its new position.
-     */
-    onNodeDragStop?: (nodeId: string, position: {
-        x: number;
-        y: number;
-    }) => void;
-    /**
-     * Callback fired when user presses Cmd+C (Mac) or Ctrl+C (Windows/Linux)
-     * with nodes selected. Receives the array of selected node IDs.
-     * Use this to implement custom copy behavior.
-     */
-    onCopy?: (selectedNodeIds: string[]) => void;
-    /**
-     * Container width in pixels. When provided along with containerHeight,
-     * enables calculating the initial viewport synchronously to avoid the
-     * "zoom in then animate out" effect on initial render.
-     */
-    containerWidth?: number;
-    /**
-     * Container height in pixels. When provided along with containerWidth,
-     * enables calculating the initial viewport synchronously to avoid the
-     * "zoom in then animate out" effect on initial render.
-     */
-    containerHeight?: number;
-    /**
-     * ELK layout configuration for circuit-board style edge routing.
-     * When enabled, edges are routed with orthogonal paths that don't overlap.
-     */
-    elkLayout?: {
-        /**
-         * Whether ELK layout is enabled
-         * @default false
-         */
-        enabled: boolean;
-        /**
-         * Edge routing style
-         * - 'orthogonal': Circuit-board style with 90-degree angles (default)
-         * - 'splines': Smooth curved edges
-         * - 'polyline': Straight line segments
-         */
-        routingStyle?: 'orthogonal' | 'splines' | 'polyline';
-        /**
-         * Minimum spacing between parallel edges in pixels
-         * @default 15
-         */
-        edgeSpacing?: number;
-        /**
-         * Spacing between edges and nodes in pixels
-         * @default 20
-         */
-        edgeNodeSpacing?: number;
-    };
-    /**
-     * Scenario-derived edges with sequence information.
-     * When provided, edges matching these transitions will show sequence numbers.
-     * Use with deriveEdgesFromSequence() from @principal-ai/core to generate these.
-     */
-    scenarioEdges?: Array<{
-        fromSpan: string;
-        toSpan: string;
-        sequenceNumber: number;
-    }>;
-    /**
-     * Whether to show sequence labels on edges when scenarioEdges is provided.
-     * @default true
-     */
-    showSequenceLabels?: boolean;
-}
-/** 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;
-    /**
-     * Optional spans canvas containing span convention definitions.
-     * Span colors from this canvas are used as fill colors for event nodes.
-     * When provided with workflowSpanPattern, events will be colored based on their span.
-     */
-    spansCanvas?: ExtendedCanvas;
-    /**
-     * Optional scopes canvas containing scope definitions with colors.
-     * Required for scope-based node coloring.
-     * Replaces library.scopes (which is now deprecated).
-     */
-    scopesCanvas?: ExtendedCanvas;
-    /**
-     * Optional span pattern for the current workflow context.
-     * When provided, event nodes will use the span color from spansCanvas as their fill.
-     * This should match a spanPattern from a workflow.json file.
-     */
-    workflowSpanPattern?: string;
-}
-/**
- * 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>>;
-//# sourceMappingURL=GraphRenderer.d.ts.map

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

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