@principal-ai/subsystems-react 0.17.0

package/dist/utils/graphConverter.js

@@ -0,0 +1,114 @@
+import { MarkerType } from '@xyflow/react';
+/**
+ * Convert our NodeState to xyflow Node format
+ */
+export function convertToXYFlowNodes(nodes, configuration, violations = []) {
+    return nodes.map((node) => {
+        let typeDefinition = configuration.nodeTypes[node.type];
+        // Warn if node type is not defined in configuration
+        if (!typeDefinition) {
+            console.warn(`Node type "${node.type}" not found in configuration for node "${node.id}"`);
+            // Provide minimal typeDefinition with global states fallback to prevent undefined errors
+            typeDefinition = {
+                description: '',
+                shape: 'rectangle',
+                dataSchema: {},
+                states: configuration.states,
+            };
+        }
+        else if (!typeDefinition.states && configuration.states) {
+            // If typeDefinition exists but has no states, use global states as fallback
+            typeDefinition = {
+                ...typeDefinition,
+                states: configuration.states,
+            };
+        }
+        const hasViolations = violations.some((v) => v.context?.nodeId === node.id);
+        // Groups should render behind other nodes and edges
+        const isGroup = node.data?.canvasType === 'group';
+        return {
+            id: node.id,
+            type: 'custom',
+            position: node.position || { x: 0, y: 0 },
+            // Groups have lower zIndex to render behind other nodes
+            // Use 1 for groups, 100 for regular nodes (positive values to avoid event handling issues)
+            zIndex: isGroup ? 1 : 100,
+            // Apply persisted dimensions if available
+            ...(node.width !== undefined ? { width: node.width } : {}),
+            ...(node.height !== undefined ? { height: node.height } : {}),
+            data: {
+                name: node.name || node.id,
+                typeDefinition,
+                state: node.state,
+                hasViolations,
+                data: node.data,
+            },
+        };
+    });
+}
+/**
+ * Map canvas side to source handle ID
+ * Source handles use '-out' suffix
+ */
+function sideToSourceHandle(side) {
+    if (!side)
+        return undefined;
+    return `${side}-out`;
+}
+/**
+ * Map canvas side to target handle ID
+ * Target handles use the side name directly
+ */
+function sideToTargetHandle(side) {
+    return side;
+}
+/**
+ * Convert our EdgeState to xyflow Edge format
+ */
+export function convertToXYFlowEdges(edges, configuration, violations = []) {
+    return edges.map((edge) => {
+        const typeDefinition = configuration.edgeTypes[edge.type];
+        // Warn if edge type is not defined in configuration
+        if (!typeDefinition) {
+            console.warn(`Edge type "${edge.type}" not found in configuration for edge "${edge.id}"`);
+        }
+        const hasViolations = violations.some((v) => v.context?.edgeId === edge.id);
+        const edgeWithHandles = edge;
+        // Get handle IDs from edge data (fromSide/toSide) or explicit handles
+        // If no side specified, default to right->left for left-to-right flow
+        const fromSide = edge.data?.fromSide;
+        const toSide = edge.data?.toSide;
+        const sourceHandle = edgeWithHandles.sourceHandle || sideToSourceHandle(fromSide || 'right');
+        const targetHandle = edgeWithHandles.targetHandle || sideToTargetHandle(toSide || 'left');
+        // Add arrow marker if edge type is directed
+        // Color priority: edge data color > type definition color > default
+        const edgeColor = edge.data?.color;
+        const markerEnd = typeDefinition?.directed !== false
+            ? {
+                type: MarkerType.ArrowClosed,
+                color: edgeColor || typeDefinition?.color || '#888',
+                width: 20,
+                height: 20,
+            }
+            : undefined;
+        return {
+            id: edge.id,
+            source: edge.from,
+            target: edge.to,
+            sourceHandle,
+            targetHandle,
+            type: 'custom',
+            // Edges should render above groups (zIndex: 1) but below regular nodes (zIndex: 100)
+            zIndex: 50,
+            animated: typeDefinition?.style === 'animated',
+            markerEnd,
+            data: {
+                typeDefinition,
+                hasViolations,
+                data: edge.data,
+                edgeType: edge.type,
+            },
+        };
+    });
+}
+//# sourceMappingURL=graphConverter.js.map

package/dist/utils/graphConverter.js.map

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

package/dist/utils/iconResolver.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+/**
+ * Icon Resolver
+ *
+ * Resolves icon strings to React components. Supports:
+ * 1. Lucide icon names (e.g., "Database", "Settings", "Package")
+ * 2. Emoji/Unicode strings (e.g., "⚙️", "💾", "📦")
+ *
+ * This keeps configurations JSON-serializable while supporting icon libraries.
+ */
+export interface IconProps {
+    icon?: string;
+    size?: number;
+    className?: string;
+}
+/**
+ * Resolves an icon string to a React element
+ *
+ * @param icon - Icon name (Lucide) or emoji/text string
+ * @param size - Icon size in pixels (default: 20)
+ * @param className - Optional CSS class
+ * @returns React element or null
+ */
+export declare function resolveIcon(icon?: string, size?: number, className?: string): React.ReactNode;
+/**
+ * Icon component that resolves icon strings
+ */
+export declare const Icon: React.FC<IconProps>;
+//# sourceMappingURL=iconResolver.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"iconResolver.d.ts","sourceRoot":"","sources":["../../src/utils/iconResolver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;GAQG;AAEH,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,GAAE,MAAW,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAkBjG;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAEpC,CAAC"}

package/dist/utils/iconResolver.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import * as LucideIcons from 'lucide-react';
+/**
+ * Resolves an icon string to a React element
+ *
+ * @param icon - Icon name (Lucide) or emoji/text string
+ * @param size - Icon size in pixels (default: 20)
+ * @param className - Optional CSS class
+ * @returns React element or null
+ */
+export function resolveIcon(icon, size = 20, className) {
+    if (!icon)
+        return null;
+    // Try to resolve as Lucide icon first
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const LucideIcon = LucideIcons[icon];
+    // Check if it's a valid React component (function or object with $$typeof)
+    if (LucideIcon && (typeof LucideIcon === 'function' || typeof LucideIcon === 'object')) {
+        return _jsx(LucideIcon, { size: size, className: className });
+    }
+    // Fall back to rendering as text (emoji or unicode)
+    return (_jsx("span", { className: className, style: { fontSize: `${size}px` }, children: icon }));
+}
+/**
+ * Icon component that resolves icon strings
+ */
+export const Icon = ({ icon, size = 20, className }) => {
+    return _jsx(_Fragment, { children: resolveIcon(icon, size, className) });
+};
+//# sourceMappingURL=iconResolver.js.map

package/dist/utils/iconResolver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconResolver.js","sourceRoot":"","sources":["../../src/utils/iconResolver.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,WAAW,MAAM,cAAc,CAAC;AAkB5C;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CAAC,IAAa,EAAE,OAAe,EAAE,EAAE,SAAkB;IAC9E,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,sCAAsC;IACtC,8DAA8D;IAC9D,MAAM,UAAU,GAAI,WAAmB,CAAC,IAAI,CAAC,CAAC;IAE9C,2EAA2E;IAC3E,IAAI,UAAU,IAAI,CAAC,OAAO,UAAU,KAAK,UAAU,IAAI,OAAO,UAAU,KAAK,QAAQ,CAAC,EAAE;QACtF,OAAO,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;KACzD;IAED,oDAAoD;IACpD,OAAO,CACL,eAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,IAAI,EAAE,YACzD,IAAI,GACA,CACR,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;IAC1E,OAAO,4BAAG,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,GAAI,CAAC;AACnD,CAAC,CAAC"}

package/dist/utils/orientationUtils.d.ts

@@ -0,0 +1,19 @@
+import type { NodeState, EdgeState } from '@principal-ai/subsystems-core';
+/**
+ * Swaps the orientation of a graph from horizontal to vertical or vice versa.
+ * This swaps x/y coordinates and adjusts edge connection sides accordingly.
+ */
+export declare function swapGraphOrientation(nodes: NodeState[], edges: EdgeState[]): {
+    nodes: NodeState[];
+    edges: EdgeState[];
+};
+/**
+ * Swaps x and y positions for all nodes
+ */
+export declare function swapNodePositions(nodes: NodeState[]): NodeState[];
+/**
+ * Swaps edge connection sides to match the new orientation
+ * Both sides rotate clockwise: top → right → bottom → left → top
+ */
+export declare function swapEdgeSides(edges: EdgeState[]): EdgeState[];
+//# sourceMappingURL=orientationUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"orientationUtils.d.ts","sourceRoot":"","sources":["../../src/utils/orientationUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAc,MAAM,+BAA+B,CAAC;AAEtF;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAAE,EAClB,KAAK,EAAE,SAAS,EAAE,GACjB;IAAE,KAAK,EAAE,SAAS,EAAE,CAAC;IAAC,KAAK,EAAE,SAAS,EAAE,CAAA;CAAE,CAK5C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAQjE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAuB7D"}

package/dist/utils/orientationUtils.js

@@ -0,0 +1,62 @@
+/**
+ * Swaps the orientation of a graph from horizontal to vertical or vice versa.
+ * This swaps x/y coordinates and adjusts edge connection sides accordingly.
+ */
+export function swapGraphOrientation(nodes, edges) {
+    return {
+        nodes: swapNodePositions(nodes),
+        edges: swapEdgeSides(edges),
+    };
+}
+/**
+ * Swaps x and y positions for all nodes
+ */
+export function swapNodePositions(nodes) {
+    return nodes.map(node => ({
+        ...node,
+        position: node.position ? {
+            x: node.position.y,
+            y: node.position.x,
+        } : undefined,
+    }));
+}
+/**
+ * Swaps edge connection sides to match the new orientation
+ * Both sides rotate clockwise: top → right → bottom → left → top
+ */
+export function swapEdgeSides(edges) {
+    return edges.map(edge => {
+        const data = edge.data;
+        const fromSide = data?.fromSide;
+        const toSide = data?.toSide;
+        const rotatedFromSide = rotateClockwise(fromSide);
+        const rotatedToSide = rotateClockwise(toSide);
+        // Only include fromSide/toSide if they have defined values (not undefined)
+        const newData = { ...edge.data };
+        if (rotatedFromSide !== undefined) {
+            newData.fromSide = rotatedFromSide;
+        }
+        if (rotatedToSide !== undefined) {
+            newData.toSide = rotatedToSide;
+        }
+        return {
+            ...edge,
+            data: newData,
+        };
+    });
+}
+/**
+ * Rotates a side clockwise: top → right → bottom → left → top
+ */
+function rotateClockwise(side) {
+    if (!side)
+        return undefined;
+    const clockwiseMap = {
+        top: 'right',
+        right: 'bottom',
+        bottom: 'left',
+        left: 'top',
+    };
+    return clockwiseMap[side];
+}
+//# sourceMappingURL=orientationUtils.js.map

package/dist/utils/orientationUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"orientationUtils.js","sourceRoot":"","sources":["../../src/utils/orientationUtils.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAClC,KAAkB,EAClB,KAAkB;IAElB,OAAO;QACL,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC;QAC/B,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC;KAC5B,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAAkB;IAClD,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,GAAG,IAAI;QACP,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;YACxB,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YAClB,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;SACnB,CAAC,CAAC,CAAC,SAAS;KACd,CAAC,CAAC,CAAC;AACN,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,KAAkB;IAC9C,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,IAA2C,CAAC;QAC9D,MAAM,QAAQ,GAAG,IAAI,EAAE,QAAkC,CAAC;QAC1D,MAAM,MAAM,GAAG,IAAI,EAAE,MAAgC,CAAC;QAEtD,MAAM,eAAe,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;QAClD,MAAM,aAAa,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;QAE9C,2EAA2E;QAC3E,MAAM,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,EAA6B,CAAC;QAC5D,IAAI,eAAe,KAAK,SAAS,EAAE;YACjC,OAAO,CAAC,QAAQ,GAAG,eAAe,CAAC;SACpC;QACD,IAAI,aAAa,KAAK,SAAS,EAAE;YAC/B,OAAO,CAAC,MAAM,GAAG,aAAa,CAAC;SAChC;QAED,OAAO;YACL,GAAG,IAAI;YACP,IAAI,EAAE,OAA4B;SACnC,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,SAAS,eAAe,CAAC,IAAiB;IACxC,IAAI,CAAC,IAAI;QAAE,OAAO,SAAS,CAAC;IAE5B,MAAM,YAAY,GAAmC;QACnD,GAAG,EAAE,OAAO;QACZ,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,KAAK;KACZ,CAAC;IAEF,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC"}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@principal-ai/subsystems-react",
+  "version": "0.17.0",
+  "description": "React components for graph-based principal view framework",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "clean": "rm -rf dist",
+    "test": "bun test",
+    "test:watch": "bun test --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@pierre/theme": "^2.0.0",
+    "@pierre/trees": "1.0.0-beta.6",
+    "@xyflow/react": "^12.11.3",
+    "elkjs": "^0.12.0",
+    "hast-util-sanitize": "^5.0.2",
+    "highlight.js": "^11.11.1",
+    "js-yaml": "4.1.1",
+    "lucide-react": "0.554.0",
+    "prettier": "3",
+    "react-markdown": "^10.1.0",
+    "react-zoom-pan-pinch": "^3.7.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-slug": "^6.0.0",
+    "remark-gfm": "^4.0.1",
+    "shiki": "^4.0.0",
+    "themed-markdown": "^0.1.82",
+    "zustand": "4.5.0"
+  },
+  "peerDependencies": {
+    "@pierre/diffs": ">=1.1.20",
+    "@principal-ade/industry-theme": "^0.1.7",
+    "@principal-ai/subsystems-core": ">=0.29.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@pierre/diffs": "1.3.6",
+    "@principal-ade/industry-theme": "0.1.7",
+    "@principal-ai/agent-monitoring": "^0.3.38",
+    "@principal-ai/subsystems-core": "0.29.0",
+    "@storybook/addon-docs": "10.1.2",
+    "@storybook/addon-links": "10.1.2",
+    "@storybook/addon-onboarding": "10.1.2",
+    "@storybook/react-vite": "10.1.2",
+    "@testing-library/react": "^16.0.0",
+    "@types/js-yaml": "4.0.9",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "happy-dom": "12.10.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "storybook": "10.1.2",
+    "typescript": "5.0.4",
+    "vite": "^6.0.7"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "validation",
+    "graph",
+    "visualization",
+    "react",
+    "testing"
+  ],
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/components/ConfigurationSelector.tsx

@@ -0,0 +1,133 @@
+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 const ConfigurationSelector: React.FC<ConfigurationSelectorProps> = ({
+  configurations,
+  selectedConfig,
+  onConfigChange,
+  className,
+  style,
+  showDescription = false,
+  label = 'Graph Configuration',
+}) => {
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onConfigChange(event.target.value);
+  };
+
+  const selectedConfigData = configurations.find((c) => c.name === selectedConfig);
+
+  const defaultStyle: React.CSSProperties = {
+    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: React.CSSProperties = {
+    display: 'block',
+    fontSize: '14px',
+    fontWeight: 600,
+    marginBottom: '8px',
+    color: '#333',
+  };
+
+  const selectStyle: React.CSSProperties = {
+    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: React.CSSProperties = {
+    marginTop: '8px',
+    fontSize: '12px',
+    color: '#666',
+    lineHeight: '1.5',
+  };
+
+  if (configurations.length === 0) {
+    return (
+      <div className={className} style={defaultStyle}>
+        <div style={{ ...labelStyle, color: '#999' }}>No configurations available</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className} style={defaultStyle}>
+      <label style={labelStyle} htmlFor="config-selector">
+        {label}
+      </label>
+
+      <select
+        id="config-selector"
+        value={selectedConfig}
+        onChange={handleChange}
+        style={selectStyle}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.borderColor = '#4A90E2';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.borderColor = '#ddd';
+        }}
+      >
+        {configurations.map((config) => (
+          <option key={config.name} value={config.name}>
+            {config.config.metadata.name}
+          </option>
+        ))}
+      </select>
+
+      {selectedConfigData && showDescription && selectedConfigData.config.metadata.description && (
+        <div style={infoStyle}>
+          <div>{selectedConfigData.config.metadata.description}</div>
+        </div>
+      )}
+    </div>
+  );
+};