@cyvest/cyvest-vis 2.0.1

package/README.md

@@ -0,0 +1,42 @@
+# @cyvest/cyvest-vis
+
+React components for visualizing Cyvest investigations using XYFlow + D3 layouts.
+
+## What it does
+
+- Renders observables, relationships, checks, and containers as an interactive graph.
+- Uses `@cyvest/cyvest-js` helpers for level colors, graph data, and schema-safe types.
+- Ships CJS, ESM, and type definitions for React 18+ projects.
+
+## Install & build
+
+```bash
+pnpm install          # from repo root
+pnpm --filter @cyvest/cyvest-vis build
+```
+
+Run tests:
+
+```bash
+pnpm --filter @cyvest/cyvest-vis test
+```
+
+## Usage
+
+```tsx
+import { CyvestGraph } from "@cyvest/cyvest-vis";
+import type { CyvestInvestigation } from "@cyvest/cyvest-js";
+
+export function InvestigationView({ investigation }: { investigation: CyvestInvestigation }) {
+  return (
+    <CyvestGraph
+      investigation={investigation}
+      height={520}
+      showViewToggle
+      onNodeClick={(id) => console.log("Selected", id)}
+    />
+  );
+}
+```
+
+Props include `height`, `width`, `showViewToggle`, `onNodeClick`, and optional control over zoom/pan behaviour. See `src/components` for more advanced hooks and utilities.

package/dist/index.d.mts

@@ -0,0 +1,48 @@
+import React from 'react';
+import * as _cyvest_cyvest_js from '@cyvest/cyvest-js';
+
+/**
+ * Configuration options for d3-force layout.
+ */
+interface ForceLayoutConfig {
+    /** Strength of the charge force (repulsion). Default: -300 */
+    chargeStrength: number;
+    /** Target distance between linked nodes. Default: 100 */
+    linkDistance: number;
+    /** Strength of the centering force. Default: 0.1 */
+    centerStrength: number;
+    /** Strength of the collision force. Default: 30 */
+    collisionRadius: number;
+    /** Number of simulation iterations. Default: 300 */
+    iterations: number;
+}
+/**
+ * Props for the CyvestGraph component (combined view).
+ */
+interface CyvestGraphProps {
+    /** The Cyvest investigation to visualize */
+    investigation: _cyvest_cyvest_js.CyvestInvestigation;
+    /** Height of the graph container */
+    height?: number | string;
+    /** Width of the graph container */
+    width?: number | string;
+    /** Initial view to display */
+    initialView?: "observables" | "investigation";
+    /** Callback when a node is clicked */
+    onNodeClick?: (nodeId: string) => void;
+    /** Custom class name for the container */
+    className?: string;
+    /** Whether to show view toggle */
+    showViewToggle?: boolean;
+}
+
+/**
+ * CyvestGraph component - combined view with toggle between observables and investigation views.
+ */
+
+/**
+ * CyvestGraph component - provides toggle between ObservablesGraph and InvestigationGraph.
+ */
+declare const CyvestGraph: React.FC<CyvestGraphProps>;
+
+export { CyvestGraph, type CyvestGraphProps, type ForceLayoutConfig };

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import * as _cyvest_cyvest_js from '@cyvest/cyvest-js';
+
+/**
+ * Configuration options for d3-force layout.
+ */
+interface ForceLayoutConfig {
+    /** Strength of the charge force (repulsion). Default: -300 */
+    chargeStrength: number;
+    /** Target distance between linked nodes. Default: 100 */
+    linkDistance: number;
+    /** Strength of the centering force. Default: 0.1 */
+    centerStrength: number;
+    /** Strength of the collision force. Default: 30 */
+    collisionRadius: number;
+    /** Number of simulation iterations. Default: 300 */
+    iterations: number;
+}
+/**
+ * Props for the CyvestGraph component (combined view).
+ */
+interface CyvestGraphProps {
+    /** The Cyvest investigation to visualize */
+    investigation: _cyvest_cyvest_js.CyvestInvestigation;
+    /** Height of the graph container */
+    height?: number | string;
+    /** Width of the graph container */
+    width?: number | string;
+    /** Initial view to display */
+    initialView?: "observables" | "investigation";
+    /** Callback when a node is clicked */
+    onNodeClick?: (nodeId: string) => void;
+    /** Custom class name for the container */
+    className?: string;
+    /** Whether to show view toggle */
+    showViewToggle?: boolean;
+}
+
+/**
+ * CyvestGraph component - combined view with toggle between observables and investigation views.
+ */
+
+/**
+ * CyvestGraph component - provides toggle between ObservablesGraph and InvestigationGraph.
+ */
+declare const CyvestGraph: React.FC<CyvestGraphProps>;
+
+export { CyvestGraph, type CyvestGraphProps, type ForceLayoutConfig };