polly-graph 0.1.15 → 0.2.1

package/dist/index.d.ts

@@ -1,42 +1,11 @@
 import { SimulationNodeDatum, SimulationLinkDatum, Simulation } from 'd3-force';
-import { Selection } from 'd3-selection';
+import { ZoomBehavior } from 'd3-zoom';
+import ColorTracker from 'canvas-color-tracker';
 
-interface Coordinates {
-    readonly x: number;
-    readonly y: number;
-}
-type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-type Orientation = 'vertical' | 'horizontal';
-
-type GraphControlsPosition = Position;
-type GraphControlsOrientation = Orientation;
-interface GraphControlsConfig {
-    readonly enabled: boolean;
-    readonly position?: GraphControlsPosition;
-    readonly orientation?: GraphControlsOrientation;
-    readonly offset?: Coordinates;
-    readonly show?: {
-        readonly zoomIn?: boolean;
-        readonly zoomOut?: boolean;
-        readonly reset?: boolean;
-        readonly fit?: boolean;
-    };
-}
-
-interface LegendItem {
-    label: string;
-    color: string;
-    shape?: 'circle' | 'rect';
-}
-type LegendPosition = Position;
-interface LegendConfig {
-    readonly enabled?: boolean;
-    readonly title?: string;
-    readonly position?: LegendPosition;
-    readonly items?: LegendItem[];
-    readonly collapsible?: boolean;
-    readonly defaultExpanded?: boolean;
-}
+/**
+ * Shared Graph Types
+ * Core interfaces used by both V1 (SVG) and V2 (Canvas) implementations
+ */
 
 interface GraphNode extends SimulationNodeDatum {
     readonly id: string;
@@ -45,6 +14,10 @@ interface GraphNode extends SimulationNodeDatum {
     readonly tooltip?: string;
     readonly style?: NodeStyle;
 }
+interface GraphNodeWithInitial extends GraphNode {
+    initialX?: number;
+    initialY?: number;
+}
 interface GraphLink extends SimulationLinkDatum<GraphNode> {
     readonly source: string | GraphNode;
     readonly target: string | GraphNode;
@@ -112,78 +85,206 @@ interface ResolvedLinkStyle {
     readonly label: ResolvedLinkLabelStyle;
 }
 
-interface LinkForceConfig {
-    readonly enabled?: boolean;
-    readonly distance?: number | ((link: GraphLink) => number);
-    readonly strength?: number | ((link: GraphLink) => number);
-    readonly iterations?: number;
+/**
+ * V2 Canvas Graph - Render Style Types
+ *
+ * Canvas-optimized style interfaces for high-performance rendering
+ */
+
+interface NodeLabelRenderStyle {
+    enabled: boolean;
+    font: string;
+    textColor: string;
+    textAlign: string;
+    textBaseline: string;
+    offsetY: number;
 }
-interface ChargeForceConfig {
-    readonly enabled?: boolean;
-    readonly strength?: number | ((node: GraphNode) => number);
-    readonly theta?: number;
-    readonly distanceMin?: number;
-    readonly distanceMax?: number;
+interface NodeRenderStyle {
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    radius: number;
+    opacity: number;
+    textColor?: string;
+    label?: NodeLabelRenderStyle;
 }
-interface CollideForceConfig {
-    readonly enabled?: boolean;
-    readonly radius?: number | ((node: GraphNode) => number);
-    readonly strength?: number;
-    readonly iterations?: number;
+interface LinkLabelRenderStyle {
+    enabled?: boolean;
+    visibility?: 'always' | 'hover' | 'selection';
+    text?: string;
+    font?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    borderRadius?: number;
+    paddingX?: number;
+    paddingY?: number;
 }
-interface CenterForceConfig {
-    readonly enabled?: boolean;
-    readonly strength?: number;
-    readonly x?: number;
-    readonly y?: number;
+interface LinkRenderStyle {
+    stroke: string;
+    strokeWidth: number;
+    opacity: number;
+    arrow?: LinkArrowStyle;
+    label?: LinkLabelRenderStyle;
 }
-interface XForceConfig {
-    readonly enabled?: boolean;
-    readonly strength?: number;
-    readonly x?: number | ((node: GraphNode) => number);
+type ArrowRenderStyle = LinkArrowStyle;
+interface HoverStyles {
+    readonly node: Partial<NodeRenderStyle>;
+    readonly link: Partial<LinkRenderStyle>;
 }
-interface YForceConfig {
-    readonly enabled?: boolean;
-    readonly strength?: number;
-    readonly y?: number | ((node: GraphNode) => number);
-}
-interface SimulationForces {
-    readonly link?: LinkForceConfig;
-    readonly charge?: ChargeForceConfig;
-    readonly collide?: CollideForceConfig;
-    readonly center?: CenterForceConfig;
-    readonly x?: XForceConfig;
-    readonly y?: YForceConfig;
-}
-interface AdaptiveConfig {
-    readonly enabled?: boolean;
-    readonly nodeCountThresholds?: {
-        readonly small?: number;
-        readonly medium?: number;
-        readonly large?: number;
-    };
+interface RenderStyles {
+    readonly node: Partial<NodeRenderStyle>;
+    readonly link: Partial<LinkRenderStyle>;
+    readonly hover: HoverStyles;
 }
-interface WarmupConfig {
-    readonly enabled?: boolean;
-    readonly ticks?: number;
+interface CanvasRenderConfig {
+    readonly devicePixelRatio?: number;
+    readonly antialias?: boolean;
+    readonly alpha?: boolean;
 }
-interface CooldownConfig {
-    readonly enabled?: boolean;
-    readonly delay?: number;
+declare const DEFAULT_LINK_LABEL_STYLE: LinkLabelRenderStyle;
+declare const DEFAULT_LINK_STYLE: LinkRenderStyle;
+declare const DEFAULT_HOVER_STYLES: HoverStyles;
+declare function isValidNodeStyle(style: unknown): style is Partial<NodeRenderStyle>;
+declare function isValidLinkStyle(style: unknown): style is Partial<LinkRenderStyle>;
+declare function mergeNodeStyle(base: NodeRenderStyle, override?: Partial<NodeRenderStyle>): NodeRenderStyle;
+declare function mergeLinkStyle(base: LinkRenderStyle, override?: Partial<LinkRenderStyle>): LinkRenderStyle;
+
+interface StatsMetrics {
+    renderTotal: number;
+    renderNodes: number;
+    renderLinks: number;
+    renderLinkLabels: number;
+    renderNodeLabels: number;
+    styleResolution: number;
+    hoverChecks: number;
+    canvasCalls: number;
+    frameCount: number;
 }
-interface EnhancedSimulationConfig {
-    readonly alpha?: number;
-    readonly alphaMin?: number;
-    readonly alphaDecay?: number;
-    readonly velocityDecay?: number;
-    readonly forces?: SimulationForces;
-    readonly adaptive?: AdaptiveConfig;
-    readonly warmup?: WarmupConfig;
-    readonly cooldown?: CooldownConfig;
+
+/**
+ * Color constants for polly-graph library
+ */
+declare enum PrimaryColor {
+    PURPLE = "#8E42EE",
+    ORANGE = "#F78E12",
+    PINK = "#EC4899",
+    CYAN = "#06B6D4",
+    RED = "#FF004D",
+    BLUE = "#3C5DE2",
+    GREEN = "#24CF35",
+    YELLOW = "#F7E217"
+}
+declare enum SecondaryColor {
+    PURPLE = "#936DC3",
+    ORANGE = "#D98C30",
+    PINK = "#D85C99",
+    CYAN = "#21A3B9",
+    RED = "#CC3361",
+    BLUE = "#6173BD"
+}
+declare enum NeutralColor {
+    PURPLE = "#968AA6",
+    ORANGE = "#A18768",
+    PINK = "#AF859A",
+    CYAN = "#3A91A0",
+    RED = "#9F6073",
+    BLUE = "#7A82A4"
+}
+declare enum StandardColor {
+    WHITE = "#ffffff",
+    BLACK = "#000000",
+    NEUTRAL = "#808080"
+}
+
+/**
+ * Shared Constants - Polly Graph
+ * Colors, themes, and other constants used across V1, V2, and demo
+ */
+
+declare const DEFAULT_COLORS: {
+    readonly nodes: readonly [PrimaryColor.BLUE, PrimaryColor.ORANGE, PrimaryColor.GREEN, PrimaryColor.RED, PrimaryColor.PURPLE, SecondaryColor.ORANGE, PrimaryColor.PINK, NeutralColor.BLUE, PrimaryColor.YELLOW, PrimaryColor.CYAN];
+    readonly links: {
+        readonly default: NeutralColor.BLUE;
+        readonly hover: SecondaryColor.BLUE;
+        readonly selected: PrimaryColor.BLUE;
+    };
+    readonly interaction: {
+        readonly nodeHover: PrimaryColor.PINK;
+        readonly nodeSelected: PrimaryColor.CYAN;
+        readonly linkHover: PrimaryColor.PINK;
+        readonly linkSelected: PrimaryColor.CYAN;
+    };
+    readonly ui: {
+        readonly background: StandardColor.WHITE;
+        readonly text: StandardColor.BLACK;
+        readonly border: NeutralColor.BLUE;
+        readonly shadow: NeutralColor.PURPLE;
+    };
+};
+type NodeColorPalette = typeof DEFAULT_COLORS.nodes;
+type LinkColors = typeof DEFAULT_COLORS.links;
+type InteractionColors = typeof DEFAULT_COLORS.interaction;
+type UIColors = typeof DEFAULT_COLORS.ui;
+
+/**
+ * Shared Icons - Polly Graph UI Icons
+ * Consolidated icons used across V1, V2, and demo
+ */
+declare const icons: {
+    readonly fit: string;
+    readonly reset: string;
+    readonly plus: string;
+    readonly minus: string;
+    readonly caret: string;
+};
+declare const iconSvg: {
+    readonly fit: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M5 9V5H9\" />\n    <path d=\"M19 9V5H15\" />\n    <path d=\"M5 15V19H9\" />\n    <path d=\"M19 15V19H15\" />\n  </svg>";
+    readonly reset: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M20 12a8 8 0 1 1-2.3-5.7\" />\n    <path d=\"M20 4.5v4h-4\" />\n  </svg>";
+    readonly plus: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M5 12h14m-7-7v14\" />\n  </svg>";
+    readonly minus: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M5 12h14\" />\n  </svg>";
+    readonly caret: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M6 9l6 6 6-6\" />\n  </svg>";
+};
+type IconName = keyof typeof icons;
+type IconSvgName = keyof typeof iconSvg;
+declare function getIcon(name: IconName): string;
+declare function getIconSvg(name: IconSvgName): string;
+
+/**
+ * Shared Graph Controls Interface
+ * Used by both V1 and V2 implementations
+ */
+interface Coordinates {
+    readonly x: number;
+    readonly y: number;
+}
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type Orientation = 'vertical' | 'horizontal';
+type GraphControlsPosition = Position;
+type GraphControlsOrientation = Orientation;
+interface GraphControlsConfig {
+    readonly enabled: boolean;
+    readonly position?: GraphControlsPosition;
+    readonly orientation?: GraphControlsOrientation;
+    readonly offset?: Coordinates;
+    readonly show?: {
+        readonly zoomIn?: boolean;
+        readonly zoomOut?: boolean;
+        readonly reset?: boolean;
+        readonly fit?: boolean;
+    };
 }
 
+/**
+ * Shared Graph Configuration Interfaces
+ * Core configuration used by both V1 (SVG) and V2 (Canvas) implementations
+ */
+
 type GraphTooltipTheme = 'dark' | 'light';
 type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right' | 'auto';
+type NodeSelectHandler = (node: GraphNode, element?: HTMLElement) => void;
+type LinkSelectHandler = (link: GraphLink, element?: HTMLElement) => void;
 interface TooltipInteractionConfig {
     readonly enabled?: boolean;
     readonly theme?: GraphTooltipTheme;
@@ -210,426 +311,1161 @@ interface GraphInteractionConfig {
     readonly hover?: HoverInteractionConfig;
     readonly selection?: SelectionInteractionConfig;
 }
-interface GraphConfig {
+
+type LegendPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface LegendConfig {
+    readonly enabled?: boolean;
+    readonly position?: LegendPosition;
+    readonly collapsible?: boolean;
+    readonly defaultExpanded?: boolean;
+    readonly offset?: {
+        readonly x: number;
+        readonly y: number;
+    };
+}
+interface SimulationConfig {
+    readonly alphaDecay?: number;
+    readonly velocityDecay?: number;
+    readonly forces?: Record<string, unknown>;
+}
+interface BaseGraphConfig {
     readonly container: HTMLElement;
     readonly nodes: GraphNode[];
     readonly links: GraphLink[];
     readonly autoFit?: boolean;
     readonly responsive?: boolean;
-    readonly simulation?: EnhancedSimulationConfig;
+    readonly simulation?: SimulationConfig;
     readonly interaction?: GraphInteractionConfig;
     readonly controls?: GraphControlsConfig;
     readonly legend?: LegendConfig;
 }
+interface ControlsController {
+    mount(): void;
+    destroy(): void;
+}
+
+/**
+ * V2 Canvas Graph - Type Definitions
+ */
 
-interface GraphInstance {
+interface V2Node extends SimulationNodeDatum {
+    id: string;
+    entityType: 'Node';
+    type: string;
+    label?: string;
+    tooltip?: string;
+    x?: number;
+    y?: number;
+    fx?: number | null;
+    fy?: number | null;
+    vx?: number;
+    vy?: number;
+    style?: Partial<NodeRenderStyle>;
+    __indexColor?: string;
+    __indexColorRGB?: [number, number, number];
+}
+interface V2Link extends SimulationLinkDatum<V2Node> {
+    source: string | V2Node;
+    target: string | V2Node;
+    entityType: 'Link';
+    label?: string;
+    tooltip?: string;
+    style?: Partial<LinkRenderStyle>;
+    __indexColor?: string;
+    __indexColorRGB?: [number, number, number];
+}
+interface InteractionConfig {
+    readonly hover?: HoverInteractionConfig;
+    readonly selection?: SelectionInteractionConfig;
+}
+interface V2Config {
+    container: HTMLElement;
+    nodes: V2Node[];
+    links: V2Link[];
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    interaction?: InteractionConfig;
+    controls?: GraphControlsConfig;
+    legend?: LegendConfig;
+    autoFitView?: boolean;
+    cooldownTime?: number;
+}
+interface V2Instance {
     render(): void;
-    zoomIn(): void;
-    zoomOut(): void;
-    resetView(): void;
-    fitView(): void;
     destroy(): void;
-    exportGraph(fileName?: string): void;
+    testZoom(): {
+        scale: number;
+        x: number;
+        y: number;
+    };
+    getZoomBehavior(): ZoomBehavior<HTMLCanvasElement, unknown> | undefined;
+    getCanvas(): HTMLCanvasElement;
+    fitView(): Promise<void>;
+    resetView(): void;
+    zoomIn(factor?: number, center?: [number, number]): void;
+    zoomOut(factor?: number, center?: [number, number]): void;
     clearSelection(): void;
-    on(event: 'nodeSelect', handler: (node: GraphNode, element: SVGCircleElement) => void): () => void;
-    on(event: 'nodeDeselect', handler: (node: GraphNode, element: SVGCircleElement) => void): () => void;
-    on(event: 'linkSelect', handler: (link: GraphLink, element: SVGLineElement) => void): () => void;
-    on(event: 'linkDeselect', handler: (link: GraphLink, element: SVGLineElement) => void): () => void;
-    off(event: 'nodeSelect', handler: (node: GraphNode, element: SVGCircleElement) => void): void;
-    off(event: 'nodeDeselect', handler: (node: GraphNode, element: SVGCircleElement) => void): void;
-    off(event: 'linkSelect', handler: (link: GraphLink, element: SVGLineElement) => void): void;
-    off(event: 'linkDeselect', handler: (link: GraphLink, element: SVGLineElement) => void): void;
+    on(event: 'nodeSelect', handler: (node: V2Node, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'nodeDeselect', handler: (node: V2Node, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'linkSelect', handler: (link: V2Link, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'linkDeselect', handler: (link: V2Link, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'nodeHover', handler: (node: V2Node, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'nodeUnhover', handler: (node: V2Node, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'linkHover', handler: (link: V2Link, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'linkUnhover', handler: (link: V2Link, element: HTMLCanvasElement) => void): () => void;
+    off(event: 'nodeSelect', handler: (node: V2Node, element: HTMLCanvasElement) => void): void;
+    off(event: 'nodeDeselect', handler: (node: V2Node, element: HTMLCanvasElement) => void): void;
+    off(event: 'linkSelect', handler: (link: V2Link, element: HTMLCanvasElement) => void): void;
+    off(event: 'linkDeselect', handler: (link: V2Link, element: HTMLCanvasElement) => void): void;
+    off(event: 'nodeHover', handler: (node: V2Node, element: HTMLCanvasElement) => void): void;
+    off(event: 'nodeUnhover', handler: (node: V2Node, element: HTMLCanvasElement) => void): void;
+    off(event: 'linkHover', handler: (link: V2Link, element: HTMLCanvasElement) => void): void;
+    off(event: 'linkUnhover', handler: (link: V2Link, element: HTMLCanvasElement) => void): void;
+    exportGraph(fileName?: string): Promise<void>;
+    getPerformanceMetrics(): StatsMetrics;
+    logPerformanceMetrics(): void;
+    resetPerformanceMetrics(): void;
 }
 
 /**
- * Main Graph Factory - Creates and manages a graph instance
- *
- * Clean modular architecture:
- * - GraphManager: State management and coordination
- * - RenderPipeline: Rendering workflow
- * - InteractionManager: User interactions
+ * V2 Canvas Graph - Error Handling
  */
-declare function createGraph(config: GraphConfig): GraphInstance;
 
+type ErrorContext = Record<string, unknown>;
+declare class V2GraphError extends Error {
+    code: string;
+    context?: ErrorContext | undefined;
+    constructor(message: string, code: string, context?: ErrorContext | undefined);
+}
+declare class ValidationError extends V2GraphError {
+    constructor(message: string, context?: ErrorContext);
+}
 /**
- * Comprehensive validation system for framework-independent graph configuration.
- * Provides runtime validation to catch integration errors early.
+ * Error handler utility functions
  */
+declare const ErrorHandler: {
+    /**
+     * Validates container element
+     */
+    validateContainer(container: unknown): HTMLElement;
+    /**
+     * Validates nodes array
+     */
+    validateNodes(nodes: unknown): V2Node[];
+    /**
+     * Validates links array
+     */
+    validateLinks(links: unknown): V2Link[];
+    /**
+     * Safe canvas context getter with error handling
+     */
+    getCanvasContext(canvas: HTMLCanvasElement, type: "2d"): CanvasRenderingContext2D;
+    /**
+     * Safely handles async operations with error recovery
+     */
+    withRetry<T>(operation: () => T | Promise<T>, maxRetries?: number, delay?: number): Promise<T>;
+    /**
+     * Logs errors with context in development
+     */
+    logError(error: Error, context?: ErrorContext): void;
+};
 
-interface ValidationError {
-    readonly field: string;
-    readonly message: string;
-    readonly value: unknown;
-    readonly code: string;
-}
-interface ValidationResult {
-    readonly isValid: boolean;
-    readonly errors: ValidationError[];
-    readonly warnings: string[];
-}
-declare class GraphValidator {
+/**
+ * V2 Timer Management - Copied from V1
+ * Centralized timer management for framework-independent graph operations.
+ * Provides better cleanup and prevents memory leaks across all frameworks.
+ */
+declare class TimerManager {
+    private readonly activeTimers;
+    private isDestroyed;
+    /**
+     * Schedule a timeout with automatic cleanup tracking
+     */
+    setTimeout(name: string, callback: () => void, delay: number): void;
+    /**
+     * Schedule an interval with automatic cleanup tracking
+     */
+    setInterval(name: string, callback: () => void, delay: number): void;
     /**
-     * Validate complete graph configuration
+     * Clear a specific timer by name
      */
-    static validateConfig(config: GraphConfig): ValidationResult;
+    clearTimer(name: string): boolean;
     /**
-     * Validate container element
+     * Check if a timer is currently active
      */
-    private static validateContainer;
+    hasActiveTimer(name: string): boolean;
     /**
-     * Validate graph nodes
+     * Get information about active timers
      */
-    private static validateNodes;
+    getActiveTimers(): Array<{
+        name: string;
+        type: string;
+        age: number;
+    }>;
     /**
-     * Validate graph links
+     * Debounced execution - only runs the latest call after delay
      */
-    private static validateLinks;
+    debounce(name: string, callback: () => void, delay: number): void;
     /**
-     * Validate interaction configuration
+     * Throttled execution - limits frequency of execution
      */
-    private static validateInteraction;
+    throttle(name: string, callback: () => void, delay: number): void;
     /**
-     * Validate node style
+     * Clear all timers and prevent new ones from being created
      */
-    private static validateNodeStyle;
+    destroy(): void;
     /**
-     * Validate runtime environment
+     * Reset manager (clear all timers but allow new ones)
      */
-    static validateEnvironment(): ValidationResult;
+    reset(): void;
+    /**
+     * Get count of active timers
+     */
+    getActiveTimerCount(): number;
 }
+
 /**
- * Validation error for framework integrations
+ * V2 Canvas Graph - Canvas Manager
+ *
+ * Manages canvas creation, setup, and lifecycle
  */
-declare class GraphValidationError extends Error {
-    readonly errors: ValidationError[];
-    readonly warnings: string[];
-    constructor(result: ValidationResult);
+
+interface CanvasState {
+    canvas: HTMLCanvasElement;
+    shadowCanvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    shadowCtx: CanvasRenderingContext2D;
+    colorTracker: ColorTracker;
+    width: number;
+    height: number;
+}
+declare class CanvasManager {
+    private state?;
+    private resizeCleanup?;
+    private resizeCallback?;
+    /**
+     * Initialize canvas system
+     */
+    initialize(config: V2Config): CanvasState;
+    /**
+     * Get current canvas state
+     */
+    getState(): CanvasState;
+    /**
+     * Clear both canvases
+     */
+    clear(): void;
+    /**
+     * Apply transform to both canvases
+     */
+    applyTransform(transform: {
+        x: number;
+        y: number;
+        k: number;
+    }): void;
+    /**
+     * Setup resize observer for responsive canvas
+     * Following force-graph patterns for container-driven resizing
+     */
+    setupResize(container: HTMLElement, onResize?: (width: number, height: number) => void): void;
+    /**
+     * Resize canvas to new dimensions
+     * Following force-graph's adjustCanvasSize pattern with device pixel ratio scaling
+     */
+    resizeCanvas(width: number, height: number): void;
+    /**
+     * Get current canvas dimensions
+     */
+    getDimensions(): {
+        width: number;
+        height: number;
+    };
+    /**
+     * Destroy canvas system
+     */
+    destroy(): void;
+    /**
+     * Get canvas statistics
+     */
+    getStats(): {
+        dimensions: {
+            width: number;
+            height: number;
+        };
+        colorTracker: ColorTracker;
+        devicePixelRatio: number;
+    };
 }
 
 /**
- * Centralized error handling for framework-independent graph operations.
- * Provides graceful degradation and helpful error messages.
+ * V2 Canvas Graph - Physics Manager
+ *
+ * Manages D3 force simulation lifecycle and behavior
  */
 
-interface ErrorContext {
-    readonly operation: string;
-    readonly component?: string;
-    readonly data?: unknown;
+interface PhysicsConfig {
+    nodes: V2Node[];
+    links: V2Link[];
+    width: number;
+    height: number;
+    onTick: () => void;
+    onEnd?: () => void;
+    autoFitView?: boolean;
+    cooldownTime?: number;
 }
-declare class GraphError extends Error {
-    readonly code: string;
-    readonly context: ErrorContext;
-    readonly recoverable: boolean;
-    constructor(message: string, code: string, context: ErrorContext, recoverable?: boolean);
-}
-declare class ErrorHandler {
-    private static isDestroyed;
+declare class PhysicsManager {
+    private simulation?;
+    private config?;
+    private simulationStartTime?;
+    private simulationEndTime?;
+    private cooldownTimer?;
+    private hasInitialAutoFitCompleted;
+    private timerManager;
+    constructor(timerManager: TimerManager);
+    /**
+     * Initialize physics simulation
+     */
+    initialize(config: PhysicsConfig): void;
+    /**
+     * Handle simulation end
+     */
+    private handleSimulationEnd;
+    /**
+     * Check if initial auto-fitview should happen and mark it as completed
+     */
+    shouldDoInitialAutoFitView(): boolean;
     /**
-     * Handle errors with appropriate logging and recovery
+     * Setup cooldown timer (force-graph pattern)
      */
-    static handle(error: Error, context: ErrorContext, fallback?: () => void): void;
+    private setupCooldownTimer;
     /**
-     * Wrap async operations with error handling
+     * Get simulation instance
      */
-    static wrapAsync<T>(operation: () => Promise<T>, context: ErrorContext, fallback?: () => T): Promise<T>;
+    getSimulation(): Simulation<V2Node, V2Link>;
     /**
-     * Wrap synchronous operations with error handling
+     * Reheat simulation for drag interactions
      */
-    static wrap<T>(operation: () => T, context: ErrorContext, fallback?: () => T): T | undefined;
+    reheat(alphaTarget?: number): void;
     /**
-     * Safe DOM operation wrapper
+     * Cool down simulation
      */
-    static safeDOMOperation<T>(operation: () => T, context: ErrorContext, fallback?: () => T): T | undefined;
+    cooldown(): void;
     /**
-     * Safe D3 operation wrapper
+     * Update force parameters
      */
-    static safeD3Operation<T>(operation: () => T, context: ErrorContext, fallback?: () => T): T | undefined;
+    updateForces(options: {
+        linkStrength?: number;
+        chargeStrength?: number;
+        centerStrength?: number;
+        linkDistance?: number | ((link: V2Link) => number);
+    }): void;
     /**
-     * Create recoverable error for non-critical failures
+     * Update center force position for new canvas dimensions
+     * Following force-graph pattern for container resizing
      */
-    static createRecoverableError(message: string, code: string, context: ErrorContext): GraphError;
+    updateCenterForce(x: number, y: number): void;
     /**
-     * Create non-recoverable error for critical failures
+     * Adjust link distances to account for visual shortening
      */
-    static createCriticalError(message: string, code: string, context: ErrorContext): GraphError;
+    adjustLinkDistancesForVisualShortening(): void;
     /**
-     * Validate and handle D3 selection operations
+     * Calculate base distance based on graph size and node count
      */
-    static validateSelection<T extends {
-        size(): number;
-    }>(selection: T | null | undefined, context: ErrorContext, operation: (sel: T) => void): void;
+    private calculateBaseDistance;
     /**
-     * Handle simulation errors with graceful degradation
+     * Find node by ID
      */
-    static handleSimulationError(error: Error, context: ErrorContext, simulation?: Simulation<GraphNode, GraphLink>): void;
+    private findNodeById;
     /**
-     * Mark error handler as destroyed to prevent further operations
+     * Get node radius from style or default
      */
-    static destroy(): void;
+    private getNodeRadius;
     /**
-     * Reset error handler state
+     * Get arrow length from link style or default
      */
-    static reset(): void;
+    private getLinkArrowLength;
+    /**
+     * Initialize node positions if not set
+     */
+    initializePositions(): void;
+    /**
+     * Stop simulation
+     */
+    stop(): void;
+    /**
+     * Get simulation timing information
+     */
+    getSimulationTiming(): {
+        startTime?: number;
+        endTime?: number;
+        duration?: number;
+        isRunning: boolean;
+        elapsed: number;
+    };
+    /**
+     * Check if simulation is currently running
+     */
+    isSimulationRunning(): boolean;
+    /**
+     * Pause the simulation
+     */
+    pause(): void;
+    /**
+     * Resume the simulation
+     */
+    resume(): void;
+    /**
+     * Destroy physics simulation
+     */
+    destroy(): void;
+}
+
+interface PointerState {
+    x: number;
+    y: number;
+}
+declare class PointerManager {
+    initialize(): void;
+    destroy(): void;
+    testHitDetection(): null;
 }
 
 /**
- * Framework-independent event emitter for graph events.
- * Provides better TypeScript support and event namespacing than manual Set management.
+ * V2 Canvas Graph - Hover Manager (Force-Graph Pattern)
+ *
+ * Exact replication of force-graph's hover detection mechanism
  */
 
-type EventListener<T> = (data: T, element?: Element) => void;
-interface EventUnsubscribe {
-    (): void;
+interface HoverState {
+    currentHovered: {
+        type: 'Node' | 'Link';
+        d: V2Node | V2Link;
+    } | null;
+    previousHovered: {
+        type: 'Node' | 'Link';
+        d: V2Node | V2Link;
+    } | null;
+    pointerPosition: {
+        x: number;
+        y: number;
+    } | null;
+    isDragging: boolean;
 }
-interface EventEmitterOptions {
-    readonly maxListeners?: number;
-    readonly enableWarnings?: boolean;
+interface HoverEvent {
+    type: 'nodeHover' | 'nodeUnhover' | 'linkHover' | 'linkUnhover';
+    current: V2Node | V2Link | null;
+    previous: V2Node | V2Link | null;
 }
-declare class GraphEventEmitter<TEventMap extends Record<string, unknown>> {
-    private readonly listeners;
-    private readonly options;
-    private isDestroyed;
-    private listenerIdCounter;
-    constructor(options?: EventEmitterOptions);
+declare class HoverManager {
+    private canvasState?;
+    private hoverState;
+    private eventHandlers;
+    private container?;
+    private refreshShadowCanvas?;
+    private flushShadowCanvas?;
+    private hasValidPointerPosition;
+    private containerWarningLogged;
     /**
-     * Add an event listener
+     * Initialize hover manager with force-graph pattern
      */
-    on<TEvent extends keyof TEventMap>(event: TEvent, listener: EventListener<TEventMap[TEvent]>, namespace?: string): EventUnsubscribe;
+    initialize(canvasState: CanvasState): void;
     /**
-     * Add a one-time event listener
+     * Setup pointer position tracking (exact force-graph pattern)
      */
-    once<TEvent extends keyof TEventMap>(event: TEvent, listener: EventListener<TEventMap[TEvent]>, namespace?: string): EventUnsubscribe;
+    private setupPointerTracking;
     /**
-     * Remove a specific listener
+     * Get element offset (force-graph lines 544-549)
      */
-    off<TEvent extends keyof TEventMap>(event: TEvent, listener: EventListener<TEventMap[TEvent]>): void;
+    private getOffset;
     /**
-     * Remove listener by ID
+     * Setup shadow canvas throttling (force-graph pattern lines 598-609)
      */
-    private removeListener;
+    private setupShadowCanvasThrottling;
     /**
-     * Remove all listeners for an event or namespace
+     * Render shadow canvas for hit detection
      */
-    removeAllListeners<TEvent extends keyof TEventMap>(event?: TEvent, namespace?: string): void;
+    private renderShadowCanvas;
     /**
-     * Emit an event to all listeners
+     * Get object under pointer (exact force-graph pattern lines 386-395)
      */
-    emit<TEvent extends keyof TEventMap>(event: TEvent, data: TEventMap[TEvent], element?: Element): boolean;
+    getObjUnderPointer(): {
+        type: 'Node' | 'Link';
+        d: V2Node | V2Link;
+    } | null;
     /**
-     * Get the number of listeners for an event
+     * Compare two hover objects for equality
      */
-    listenerCount<TEvent extends keyof TEventMap>(event: TEvent): number;
+    private isSameHoverObject;
     /**
-     * Get all event names that have listeners
+     * Update hover state (force-graph pattern lines 618-646)
      */
-    eventNames(): Array<keyof TEventMap>;
+    updateHover(): void;
     /**
-     * Get listeners for an event
+     * Set dragging state (to disable hover during drag)
      */
-    getListeners<TEvent extends keyof TEventMap>(event: TEvent): Array<EventListener<TEventMap[TEvent]>>;
+    setDragging(isDragging: boolean): void;
     /**
-     * Check if an event has listeners
+     * Update cursor based on hover state
      */
-    hasListeners<TEvent extends keyof TEventMap>(event: TEvent): boolean;
+    private updateCursor;
     /**
-     * Get debug information about the emitter
+     * Get current hover state
      */
-    getDebugInfo(): {
-        totalEvents: number;
-        totalListeners: number;
-        events: {
-            [k: string]: number;
-        };
-        namespaces: {
-            [k: string]: number;
-        };
-        isDestroyed: boolean;
-    };
+    getHoverState(): HoverState;
+    /**
+     * Add event listener
+     */
+    on(event: string, handler: (event: HoverEvent) => void): void;
+    /**
+     * Remove event listener
+     */
+    off(event: string, handler: (event: HoverEvent) => void): void;
+    /**
+     * Emit event to all listeners
+     */
+    private emit;
     /**
-     * Clean up all listeners and mark as destroyed
+     * Flush shadow canvas immediately (force-graph pattern)
+     */
+    flushShadow(): void;
+    /**
+     * Debug hover state
+     */
+    debugHoverState(): void;
+    /**
+     * Destroy hover manager
      */
     destroy(): void;
+}
+
+/**
+ * V2 Canvas Graph - Drag Manager
+ *
+ * Manages node dragging interactions with physics simulation
+ */
+
+interface DragConfig {
+    canvas: HTMLCanvasElement;
+    physicsManager: PhysicsManager;
+    hoverManager: HoverManager;
+    onRender: () => void;
+}
+interface DragState {
+    isDragging: boolean;
+    isPointerDragging: boolean;
+}
+declare class DragManager {
+    private config?;
+    private state;
+    private readonly DRAG_CLICK_TOLERANCE_PX;
     /**
-     * Reset the emitter (clear listeners but allow new ones)
+     * Initialize drag behavior
      */
-    reset(): void;
+    initialize(config: DragConfig): void;
+    /**
+     * Get drag subject (node under pointer)
+     */
+    private getDragSubject;
+    /**
+     * Handle drag start
+     */
+    private handleDragStart;
+    /**
+     * Handle drag movement
+     */
+    private handleDrag;
+    /**
+     * Handle drag end
+     */
+    private handleDragEnd;
+    /**
+     * Get current drag state
+     */
+    getState(): DragState;
+    /**
+     * Check if currently dragging
+     */
+    isDragging(): boolean;
+    /**
+     * Check if pointer is dragging
+     */
+    isPointerDragging(): boolean;
+    /**
+     * Destroy drag manager
+     */
+    destroy(): void;
 }
+
 /**
- * Graph-specific event types
+ * V2 Canvas Graph - Zoom Manager
+ *
+ * Manages zoom and pan interactions
  */
-interface GraphEventMap {
-    'nodeSelect': {
-        node: GraphNode;
-        element: SVGCircleElement;
-    };
-    'nodeDeselect': {
-        node: GraphNode;
-        element: SVGCircleElement;
-    };
-    'linkSelect': {
-        link: GraphLink;
-        element: SVGLineElement;
-    };
-    'linkDeselect': {
-        link: GraphLink;
-        element: SVGLineElement;
-    };
-    'graphRender': {
-        nodeCount: number;
-        linkCount: number;
-    };
-    'simulationStart': {
-        alpha: number;
-    };
-    'simulationEnd': {
-        iterations: number;
-    };
-    'zoomStart': {
+
+interface ZoomConfig {
+    canvas: HTMLCanvasElement;
+    canvasManager: CanvasManager;
+    onRender: () => void;
+    minZoom?: number;
+    maxZoom?: number;
+    isOverEntity?: () => boolean;
+}
+declare class ZoomManager {
+    private config?;
+    private zoomBehavior?;
+    /**
+     * Initialize zoom behavior
+     */
+    initialize(config: ZoomConfig): void;
+    /**
+     * Set initial centered transform (call after physics starts)
+     */
+    setInitialTransform(): void;
+    /**
+     * Handle zoom start (when panning begins)
+     */
+    private handleZoomStart;
+    /**
+     * Handle zoom events
+     */
+    private handleZoom;
+    /**
+     * Handle zoom end (when panning ends)
+     */
+    private handleZoomEnd;
+    /**
+     * Get zoom behavior instance
+     */
+    getZoomBehavior(): ZoomBehavior<HTMLCanvasElement, unknown> | undefined;
+    /**
+     * Get current zoom transform
+     */
+    getTransform(): {
         scale: number;
         x: number;
         y: number;
     };
-    'zoomEnd': {
-        scale: number;
+    /**
+     * Programmatically zoom in
+     */
+    zoomIn(factor?: number, center?: [number, number]): void;
+    /**
+     * Programmatically zoom out
+     */
+    zoomOut(factor?: number, center?: [number, number]): void;
+    /**
+     * Reset zoom to scale=1 but center the content like fitView
+     */
+    resetZoom(duration?: number): void;
+    /**
+     * Set zoom to specific transform
+     */
+    setTransform(transform: {
+        k: number;
         x: number;
         y: number;
+    }, duration?: number): void;
+    /**
+     * Fit view to content bounds (force-graph zoomToFit implementation)
+     */
+    fitView(bounds: {
+        x: [number, number];
+        y: [number, number];
+    }, padding?: number): Promise<void>;
+    /**
+     * Check if zoom is at reset state (scale=1, centered)
+     */
+    isAtIdentity(): boolean;
+    /**
+     * Get zoom statistics
+     */
+    getStats(): {
+        transform: {
+            scale: number;
+            x: number;
+            y: number;
+        };
+        scaleExtent: [number, number];
+        isAtIdentity: boolean;
     };
-    [key: string]: unknown;
-}
-type GraphEventName = keyof GraphEventMap;
-/**
- * Type-safe graph event emitter
- */
-declare class TypedGraphEventEmitter extends GraphEventEmitter<GraphEventMap> {
-    constructor(options?: EventEmitterOptions);
-}
-
-interface GraphLayers {
-    readonly svg: SVGSVGElement;
-    readonly overlay: HTMLDivElement;
-    readonly interactionLayer: SVGGElement;
-    readonly interactionRect: SVGRectElement;
-    readonly root: SVGGElement;
-    readonly links: SVGGElement;
-    readonly nodeRings: SVGGElement;
-    readonly nodes: SVGGElement;
-    readonly nodeLabels: SVGGElement;
-    readonly linkLabels: SVGGElement;
-    readonly hoverLayer: {
-        readonly container: SVGGElement;
-        readonly links: SVGGElement;
-        readonly nodes: SVGGElement;
-        readonly nodeLabels: SVGGElement;
-        readonly linkLabels: SVGGElement;
-    };
-    readonly selectionLayer: {
-        readonly container: SVGGElement;
-        readonly links: SVGGElement;
-        readonly nodes: SVGGElement;
-        readonly nodeLabels: SVGGElement;
-        readonly linkLabels: SVGGElement;
-    };
-}
-
-interface RenderableGraphLink {
-    readonly link: GraphLink;
-    readonly style: ResolvedLinkStyle;
-    readonly markerEnd: string;
-}
-
-interface NodeTooltipBinding {
+    /**
+     * Destroy zoom manager
+     */
     destroy(): void;
-    reposition(): void;
-    hide(): void;
 }
 
 /**
- * Centralized selection management for graph nodes and links.
- * Simplifies selection logic and ensures consistent behavior.
+ * V2 Canvas Graph - Selection Manager
+ *
+ * Manages node and link selection interactions and events
  */
 
 interface SelectionState {
-    selectedNode: {
-        element: SVGCircleElement;
-        data: GraphNode;
-    } | null;
-    selectedLink: {
-        element: SVGLineElement;
-        data: GraphLink;
-        originalMarker: string | null;
-    } | null;
+    selectedNode: V2Node | null;
+    selectedLink: V2Link | null;
+}
+interface SelectionEvent {
+    type: 'nodeSelect' | 'nodeDeselect' | 'linkSelect' | 'linkDeselect';
+    current: V2Node | V2Link | null;
+    previous: V2Node | V2Link | null;
 }
 declare class SelectionManager {
-    private state;
-    private readonly eventEmitter;
-    private readonly config;
-    private readonly layers;
-    private readonly linkMarkerSnapshots;
-    private readonly root;
-    private readonly tooltipBinding?;
-    constructor(eventEmitter: TypedGraphEventEmitter, config: SelectionInteractionConfig, layers: GraphLayers, linkMarkerSnapshots: Map<SVGLineElement, string | null>, root: Selection<SVGGElement, unknown, null, undefined>, tooltipBinding?: NodeTooltipBinding);
+    private canvasState?;
+    private selectionState;
+    private eventHandlers;
+    private container?;
+    /**
+     * Initialize selection manager
+     */
+    initialize(canvasState: CanvasState): void;
+    /**
+     * Setup click/tap listeners for selection
+     */
+    private setupSelectionListeners;
     /**
-     * Select a node, automatically deselecting any current selection
+     * Handle selection click
      */
-    selectNode(nodeElement: SVGCircleElement, nodeData: GraphNode): void;
+    private handleSelectionClick;
     /**
-     * Select a link, automatically deselecting any current selection
+     * Get object under pointer coordinates (using shadow canvas)
      */
-    selectLink(linkElement: SVGLineElement, renderableLink: RenderableGraphLink, event?: MouseEvent): void;
+    private getObjUnderPointer;
     /**
-     * Deselect the currently selected node
+     * Select a node
      */
-    private deselectNode;
+    selectNode(node: V2Node): void;
     /**
-     * Deselect the currently selected link
+     * Select a link
      */
-    private deselectLink;
+    selectLink(link: V2Link): void;
     /**
      * Clear all selections
      */
     clearSelection(): void;
+    /**
+     * Check if two nodes are the same
+     */
+    private isSameNode;
+    /**
+     * Check if two links are the same
+     */
+    private isSameLink;
+    /**
+     * Check if a node is currently selected
+     */
+    isNodeSelected(node: V2Node): boolean;
+    /**
+     * Check if a link is currently selected
+     */
+    isLinkSelected(link: V2Link): boolean;
     /**
      * Get current selection state
      */
     getSelectionState(): SelectionState;
     /**
-     * Check if a specific node is selected
+     * Add event listener
+     */
+    on(event: string, handler: (event: SelectionEvent) => void): void;
+    /**
+     * Remove event listener
+     */
+    off(event: string, handler: (event: SelectionEvent) => void): void;
+    /**
+     * Emit event to all listeners
+     */
+    private emit;
+    /**
+     * Destroy selection manager
+     */
+    destroy(): void;
+}
+
+/**
+ * V2 Canvas Graph - Renderer (Force-Graph Pattern)
+ *
+ * Clean implementation following force-graph's exact architecture
+ */
+
+declare class Renderer {
+    private config?;
+    private canvasState?;
+    private hoverManager?;
+    private selectionManager?;
+    private styleResolver?;
+    private nodeMap;
+    private shadowCanvasDirty;
+    private lastShadowRenderTime;
+    private readonly SHADOW_RENDER_THROTTLE;
+    private hasLoggedLargeGraphOptimization;
+    private performanceMetrics;
+    private linkHoverPrecision;
+    /**
+     * Initialize the renderer
+     */
+    initialize(config: {
+        nodes: V2Node[];
+        links: V2Link[];
+        interaction?: InteractionConfig;
+    }, canvasState: CanvasState, hoverManager: HoverManager, selectionManager?: SelectionManager): void;
+    /**
+     * Main render method with performance metrics (Instrumented)
+     */
+    render(): void;
+    /**
+     * Render with transform (called during zoom/pan) with shadow canvas dirty marking (Step 6 optimization)
+     */
+    renderWithTransform(): void;
+    /**
+     * Render shadow canvas for hit detection with throttling (Step 6 optimization)
+     */
+    renderShadowCanvas(): void;
+    /**
+     * Mark shadow canvas as dirty for next render (Step 6 optimization)
+     */
+    markShadowCanvasDirty(): void;
+    /**
+     * Force shadow canvas render (Step 6 optimization)
+     */
+    forceShadowCanvasRender(): void;
+    /**
+     * Clear canvas context
+     */
+    private clearCanvas;
+    /**
+     * Apply transform to canvas context
+     */
+    private applyTransform;
+    /**
+     * Get unique link ID for tracking (consistent with LinkLabelsRenderer)
+     */
+    private getLinkId;
+    /**
+     * Render main canvas nodes
+     */
+    private renderNodes;
+    /**
+     * Render node labels
+     */
+    private renderNodeLabels;
+    /**
+     * Render shadow links with __indexColor (force-graph pattern)
+     */
+    private renderShadowLinks;
+    /**
+     * Render shadow link labels for hit detection
+     */
+    private renderShadowLinkLabels;
+    /**
+     * Render shadow nodes with __indexColor (force-graph pattern)
+     */
+    private renderShadowNodes;
+    /**
+     * Get currently hovered node ID directly (Critical Performance Fix)
      */
-    isNodeSelected(nodeData: GraphNode): boolean;
+    private getCurrentlyHoveredNodeId;
     /**
-     * Check if a specific link is selected
+     * Get currently selected node ID directly (Critical Performance Fix)
      */
-    isLinkSelected(linkData: GraphLink): boolean;
+    private getCurrentlySelectedNodeId;
     /**
-     * Handle click on background (deselect all)
+     * Get currently hovered link (Critical Performance Fix)
      */
-    handleBackgroundClick(event: MouseEvent, svg: SVGSVGElement, interactionRect: SVGRectElement): void;
+    private getCurrentlyHoveredLink;
     /**
-     * Bring node and related elements to front using selection layer sub-layers
+     * Get currently selected link (Critical Performance Fix)
      */
-    private bringNodeToFront;
+    private getCurrentlySelectedLink;
     /**
-     * Bring link and its label to front using selection layer
+     * Log performance metrics for analysis
      */
-    private bringLinkToFront;
+    private logPerformanceMetrics;
     /**
-     * Restore elements back to their original layers
+     * Reset performance metrics
      */
-    private restoreSelectedElements;
+    resetPerformanceMetrics(): void;
     /**
-     * Utility method to bring any SVG element to front using appendChild
-     * Based on the reference implementation pattern
+     * Get current performance metrics
      */
-    private bringElementToFront;
+    getPerformanceMetrics(): StatsMetrics;
     /**
-     * Clear hover state to prevent conflicts with selection
-     * Similar to the clearAllHoverLayers function in create-node-hover.ts
+     * Force log performance metrics immediately (for debugging)
      */
-    private clearHoverState;
+    forceLogMetrics(): void;
     /**
-     * Clean up resources
+     * Check if a node is currently hovered
+     */
+    private isNodeHovered;
+    /**
+     * Check if a link is currently hovered (either directly or through associated node hover)
+     */
+    private isLinkHovered;
+    /**
+     * Check if a node is currently selected
+     */
+    private isNodeSelected;
+    /**
+     * Check if a link is currently selected
+     */
+    private isLinkSelected;
+    /**
+     * Check if a link's label should be visible due to selection
+     * (either the link itself is selected, or its connected node is selected)
+     */
+    private shouldShowLinkLabelForSelection;
+    /**
+     * Calculate midpoint of a link for label positioning
+     */
+    private getLinkMidpoint;
+    /**
+     * Render directed link with arrow head
+     */
+    private renderDirectedLink;
+    /**
+     * V1-compatible link shortening for source point
+     */
+    private getShortenedSourcePoint;
+    /**
+     * V1-compatible link shortening for target point
+     */
+    private getShortenedTargetPoint;
+    /**
+     * Render arrow head at specific points
+     */
+    private renderArrowAtPoint;
+    /**
+     * Render arrow head (legacy method for backward compatibility)
+     */
+    private renderArrow;
+    /**
+     * Initialize node positions if needed
+     */
+    initializeNodePositions(): void;
+    /**
+     * Update configuration
+     */
+    updateConfig(updates: Partial<{
+        nodes: V2Node[];
+        links: V2Link[];
+    }>): void;
+    /**
+     * Get renderer statistics
+     */
+    getStats(): {
+        renderCounts: {
+            nodes: number;
+            links: number;
+        };
+        renderTime: {
+            lastRender: number;
+        };
+    };
+    /**
+     * Debug shadow canvas export (force-graph pattern)
+     */
+    debugShadowCanvas(): void;
+    /**
+     * Build node index for O(1) lookups (Step 3 optimization)
+     */
+    private buildNodeIndex;
+    /**
+     * Get node by ID using O(1) lookup (Step 3 optimization)
+     */
+    private getNodeById;
+    /**
+     * Render with z-index layers (for renderWithTransform)
+     */
+    private renderWithLayers;
+    /**
+     * Render with z-index layers and performance metrics (for main render)
+     */
+    private renderWithLayersAndMetrics;
+    /**
+     * Helper methods for getting current interaction states
+     */
+    private getHoveredNode;
+    private getSelectedNode;
+    private getHoveredLink;
+    private getSelectedLink;
+    /**
+     * Layer-specific rendering methods (render subsets of entities)
+     */
+    private renderNodesWithLabelsLayer;
+    /**
+     * Helper method to truncate labels (copied from NodeLabelsRenderer)
+     */
+    private truncateLabel;
+    private renderLinksLayer;
+    private renderLinkLabelsLayer;
+    private renderNodesLayer;
+    private renderNodeLabelsLayer;
+    /**
+     * Destroy renderer and clean up resources
      */
     destroy(): void;
 }
 
-export { type ErrorContext, ErrorHandler, type EventUnsubscribe, type GraphConfig, type GraphControlsConfig, GraphError, type GraphEventMap, type GraphEventName, type GraphInstance, type GraphInteractionConfig, type GraphLink, type GraphNode, GraphValidationError, GraphValidator, type LegendConfig, SelectionManager, type SelectionState, TypedGraphEventEmitter, type ValidationError, type ValidationResult, createGraph };
+/**
+ * V2 Canvas Graph - Modular Implementation
+ *
+ * High-performance canvas-based graph with comprehensive error handling
+ * and modular architecture.
+ */
+
+declare class V2Graph implements V2Instance {
+    private config?;
+    private canvasManager;
+    private timerManager;
+    private physicsManager;
+    private dragManager;
+    private zoomManager;
+    private hoverManager;
+    private selectionManager;
+    private renderer;
+    private tooltipManager?;
+    private controlsManager?;
+    private legendsManager?;
+    private lastRenderTime;
+    private isInitialLoad;
+    /**
+     * Initialize the graph
+     */
+    initialize(config: V2Config): void;
+    /**
+     * Assign __indexColor to objects (force-graph pattern)
+     */
+    private assignIndexColors;
+    /**
+     * Setup shadow canvas update handler
+     */
+    private setupShadowCanvasHandler;
+    /**
+     * Setup tooltip event handlers (force-graph pattern)
+     */
+    private setupTooltipHandlers;
+    /**
+     * Setup hover event listeners to trigger re-renders for visual effects
+     */
+    private setupHoverRerender;
+    /**
+     * Setup selection event listeners to trigger re-renders for visual effects
+     */
+    private setupSelectionRerender;
+    /**
+     * Coordinate drag and hover interactions (force-graph pattern)
+     */
+    private coordinateDragHover;
+    /**
+     * Setup resize observer for responsive canvas behavior
+     * Following force-graph and V1 patterns with debounced fit view
+     */
+    private setupResizeObserver;
+    /**
+     * Validate configuration
+     */
+    private validateConfig;
+    /**
+     * Render the graph
+     */
+    render(): void;
+    /**
+     * Get current zoom transform
+     */
+    testZoom(): {
+        scale: number;
+        x: number;
+        y: number;
+    };
+    /**
+     * Get zoom behavior (for V1 API compatibility)
+     */
+    getZoomBehavior(): ZoomBehavior<HTMLCanvasElement, unknown> | undefined;
+    /**
+     * Get canvas element (for V1 API compatibility)
+     */
+    getCanvas(): HTMLCanvasElement;
+    /**
+     * Zoom in programmatically
+     */
+    zoomIn(factor?: number, center?: [number, number]): void;
+    /**
+     * Zoom out programmatically
+     */
+    zoomOut(factor?: number, center?: [number, number]): void;
+    /**
+     * Reset zoom to identity
+     */
+    resetView(): void;
+    /**
+     * Fit view to content (force-graph zoomToFit implementation)
+     */
+    fitView(): Promise<void>;
+    /**
+     * Debug hover state (for development)
+     */
+    debugHover(): void;
+    /**
+     * Debug shadow canvas (for development)
+     */
+    debugShadowCanvas(): void;
+    /**
+     * Clear current selection
+     */
+    clearSelection(): void;
+    /**
+     * Get performance metrics from renderer
+     */
+    getPerformanceMetrics(): StatsMetrics;
+    /**
+     * Force log performance metrics immediately
+     */
+    logPerformanceMetrics(): void;
+    /**
+     * Reset performance metrics
+     */
+    resetPerformanceMetrics(): void;
+    /**
+     * V1-style event handlers - type-safe and reliable
+     */
+    on(event: 'nodeSelect', handler: (node: V2Node, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'nodeDeselect', handler: (node: V2Node, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'linkSelect', handler: (link: V2Link, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'linkDeselect', handler: (link: V2Link, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'nodeHover', handler: (node: V2Node, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'nodeUnhover', handler: (node: V2Node, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'linkHover', handler: (link: V2Link, element: HTMLCanvasElement) => void): () => void;
+    on(event: 'linkUnhover', handler: (link: V2Link, element: HTMLCanvasElement) => void): () => void;
+    /**
+     * V1-style event handler removal - type-safe
+     */
+    off(event: 'nodeSelect', handler: (node: V2Node, element: HTMLCanvasElement) => void): void;
+    off(event: 'nodeDeselect', handler: (node: V2Node, element: HTMLCanvasElement) => void): void;
+    off(event: 'linkSelect', handler: (link: V2Link, element: HTMLCanvasElement) => void): void;
+    off(event: 'linkDeselect', handler: (link: V2Link, element: HTMLCanvasElement) => void): void;
+    off(event: 'nodeHover', handler: (node: V2Node, element: HTMLCanvasElement) => void): void;
+    off(event: 'nodeUnhover', handler: (node: V2Node, element: HTMLCanvasElement) => void): void;
+    off(event: 'linkHover', handler: (link: V2Link, element: HTMLCanvasElement) => void): void;
+    off(event: 'linkUnhover', handler: (link: V2Link, element: HTMLCanvasElement) => void): void;
+    /**
+     * Export graph as PNG image
+     */
+    exportGraph(fileName?: string): Promise<void>;
+    /**
+     * Perform the actual export capture after fit view
+     */
+    private performExportCapture;
+    /**
+     * Draw legend on export canvas
+     */
+    private drawLegendOnExportCanvas;
+    /**
+     * Destroy the graph and clean up resources
+     */
+    destroy(): void;
+}
+/**
+ * Factory function for creating V2 graphs
+ */
+declare function createV2Graph(config: V2Config): V2Instance;
+
+export { type ArrowRenderStyle, type BaseGraphConfig, CanvasManager, type CanvasRenderConfig, type CanvasState, type ControlsController, type Coordinates, DEFAULT_COLORS, DEFAULT_HOVER_STYLES, DEFAULT_LINK_LABEL_STYLE, DEFAULT_LINK_STYLE, type DragConfig, type DragInteractionConfig, DragManager, type DragState, ErrorHandler, type GraphControlsConfig, type GraphControlsOrientation, type GraphControlsPosition, type GraphInteractionConfig, type GraphLink, type GraphNode, type GraphNodeWithInitial, type GraphTooltipTheme, type HoverEvent, type HoverInteractionConfig, HoverManager, type HoverState, type HoverStyles, type IconName, type IconSvgName, type InteractionColors, type InteractionConfig, type LegendConfig, type LegendPosition, type LinkArrowStyle, type LinkColors, type LinkLabelRenderStyle, type LinkLabelStyle, type LinkRenderStyle, type LinkSelectHandler, type LinkStyle, NeutralColor, type NodeColorPalette, type NodeLabelRenderStyle, type NodeRenderStyle, type NodeSelectHandler, type NodeStyle, type Orientation, type PhysicsConfig, PhysicsManager, PointerManager, type PointerState, type Position, PrimaryColor, type RenderStyles, Renderer, type ResolvedLinkLabelStyle, type ResolvedLinkStyle, SecondaryColor, type SelectionEvent, type SelectionInteractionConfig, SelectionManager, type SelectionState, type SimulationConfig, StandardColor, type TooltipInteractionConfig, type TooltipPlacement, type UIColors, type V2Config, V2Graph, type V2Instance, type V2Link, type V2Node, ValidationError, type ZoomConfig, ZoomManager, createV2Graph, getIcon, getIconSvg, iconSvg, icons, isValidLinkStyle, isValidNodeStyle, mergeLinkStyle, mergeNodeStyle };