@bfra.me/workspace-analyzer 0.1.0 → 0.2.0

package/lib/{chunk-WOJ4C7N7.js → chunk-4V5KYQED.js}

@@ -1310,12 +1310,12 @@ function findCycles(graph) {
   const cycles = [];
   const visited = /* @__PURE__ */ new Set();
   const recursionStack = /* @__PURE__ */ new Set();
-  const path16 = [];
+  const path17 = [];
   function dfs(nodeId) {
     if (recursionStack.has(nodeId)) {
-      const cycleStart = path16.indexOf(nodeId);
+      const cycleStart = path17.indexOf(nodeId);
       if (cycleStart !== -1) {
-        const cycleNodes = path16.slice(cycleStart);
+        const cycleNodes = path17.slice(cycleStart);
         cycleNodes.push(nodeId);
         const cycleEdges = [];
         for (let i = 0; i < cycleNodes.length - 1; i++) {
@@ -1339,14 +1339,14 @@ function findCycles(graph) {
     }
     visited.add(nodeId);
     recursionStack.add(nodeId);
-    path16.push(nodeId);
+    path17.push(nodeId);
     const node = graph.nodes.get(nodeId);
     if (node !== void 0) {
       for (const importId of node.imports) {
         dfs(importId);
       }
     }
-    path16.pop();
+    path17.pop();
     recursionStack.delete(nodeId);
   }
   for (const nodeId of graph.nodes.keys()) {
@@ -5528,15 +5528,15 @@ var architecturalRulesSchema = z.object({
   enforcePublicApi: z.boolean().optional().describe("Enforce explicit public API exports")
 }).strict();
 var analyzerConfigSchema = z.object({
-  include: z.array(z.string()).optional().default(DEFAULT_ANALYZER_CONFIG.include).describe("Glob patterns for files to include in analysis"),
-  exclude: z.array(z.string()).optional().default(DEFAULT_ANALYZER_CONFIG.exclude).describe("Glob patterns for files to exclude from analysis"),
+  include: z.array(z.string()).optional().default([...DEFAULT_ANALYZER_CONFIG.include]).describe("Glob patterns for files to include in analysis"),
+  exclude: z.array(z.string()).optional().default([...DEFAULT_ANALYZER_CONFIG.exclude]).describe("Glob patterns for files to exclude from analysis"),
   minSeverity: severitySchema.optional().default(DEFAULT_ANALYZER_CONFIG.minSeverity).describe("Minimum severity level to report"),
   categories: z.array(categorySchema).optional().default([]).describe("Categories of issues to check (empty means all)"),
   cache: z.boolean().optional().default(true).describe("Enable incremental analysis caching"),
   rules: ruleConfigSchema.optional().default({}).describe("Custom rules configuration")
 }).strict();
 var workspaceOptionsSchema = z.object({
-  packagePatterns: z.array(z.string()).optional().default(DEFAULT_PACKAGE_PATTERNS).describe("Glob patterns for package locations"),
+  packagePatterns: z.array(z.string()).optional().default([...DEFAULT_PACKAGE_PATTERNS]).describe("Glob patterns for package locations"),
   concurrency: z.number().int().min(1).max(16).optional().default(DEFAULT_CONCURRENCY).describe("Maximum parallel analysis operations"),
   cacheDir: z.string().optional().default(DEFAULT_CACHE_DIR).describe("Directory for analysis cache files"),
   maxCacheAge: z.number().int().min(0).optional().default(DEFAULT_MAX_CACHE_AGE).describe("Maximum cache age in milliseconds"),
@@ -6987,6 +6987,3669 @@ function getStatusEmoji(severity, useEmoji) {
   return SEVERITY_CONFIG[severity].emoji;
 }
 
+// src/visualizer/types.ts
+var DEFAULT_VISUALIZER_OPTIONS = {
+  outputPath: "./workspace-graph.html",
+  format: "html",
+  autoOpen: true,
+  title: "Workspace Dependency Graph",
+  filters: {},
+  includeTypeImports: true,
+  maxNodes: 1e3
+};
+var SEVERITY_ORDER2 = ["critical", "error", "warning", "info"];
+function getHighestSeverity(severities) {
+  if (severities.length === 0) {
+    return void 0;
+  }
+  for (const level of SEVERITY_ORDER2) {
+    if (severities.includes(level)) {
+      return level;
+    }
+  }
+  return severities[0];
+}
+
+// src/visualizer/graph-builder.ts
+import { ok as ok23 } from "@bfra.me/es/result";
+var DEFAULT_BUILD_OPTIONS = {
+  includeTypeImports: true,
+  maxNodes: 1e3,
+  title: "Workspace Dependency Graph"
+};
+function transformNodeToVisualization(node, context, nodeIdsInCycles) {
+  const { cycles, issues, layerConfig, packageMap } = context;
+  const cycleNodeSet = nodeIdsInCycles ?? buildCycleNodeSet(cycles);
+  const isInCycle = cycleNodeSet.has(node.id);
+  const nodeViolations = mapIssuesToViolations(node.id, issues);
+  const severities = nodeViolations.map((v) => v.severity);
+  const highestSeverity = getHighestSeverity(severities);
+  const layer = layerConfig === void 0 ? void 0 : getFileLayer(node.filePath, layerConfig);
+  const packageName = packageMap.get(node.filePath) ?? node.packageName;
+  return {
+    id: node.id,
+    name: node.name,
+    filePath: node.filePath,
+    packageName,
+    layer,
+    importsCount: node.imports.length,
+    importedByCount: node.importedBy.length,
+    isInCycle,
+    violations: nodeViolations,
+    highestViolationSeverity: highestSeverity
+  };
+}
+function transformEdgeToVisualization(edge, cycleEdgeSet, edgeToCycleId) {
+  const edgeKey = `${edge.from}->${edge.to}`;
+  const isInCycle = cycleEdgeSet.has(edgeKey);
+  const cycleId = edgeToCycleId.get(edgeKey);
+  const type = mapImportType(edge.type, edge.isTypeOnly);
+  return {
+    source: edge.from,
+    target: edge.to,
+    type,
+    isInCycle,
+    cycleId
+  };
+}
+function transformCycleToVisualization(cycle, index) {
+  const id = `cycle-${index + 1}`;
+  const edges = cycle.edges.map((edge) => ({
+    from: edge.from,
+    to: edge.to
+  }));
+  return {
+    id,
+    nodes: cycle.nodes,
+    edges,
+    length: cycle.nodes.length,
+    description: cycle.description
+  };
+}
+function buildVisualizationData(context, options = {}) {
+  const opts = { ...DEFAULT_BUILD_OPTIONS, ...options };
+  const { graph, cycles, layerConfig, analyzerVersion } = context;
+  const vizCycles = cycles.map((cycle, index) => transformCycleToVisualization(cycle, index));
+  const { cycleEdgeSet, edgeToCycleId } = buildCycleEdgeMaps(vizCycles);
+  const cycleNodeIds = buildCycleNodeSet(cycles);
+  const filteredEdges = opts.includeTypeImports ? graph.edges : graph.edges.filter((e) => !e.isTypeOnly);
+  const vizEdges = filteredEdges.map(
+    (edge) => transformEdgeToVisualization(edge, cycleEdgeSet, edgeToCycleId)
+  );
+  const nodeIds = /* @__PURE__ */ new Set();
+  for (const edge of filteredEdges) {
+    nodeIds.add(edge.from);
+    nodeIds.add(edge.to);
+  }
+  let vizNodes = [];
+  for (const nodeId of nodeIds) {
+    const node = graph.nodes.get(nodeId);
+    if (node !== void 0) {
+      vizNodes.push(transformNodeToVisualization(node, context, cycleNodeIds));
+    }
+  }
+  if (vizNodes.length > opts.maxNodes) {
+    vizNodes = prioritizeNodes(vizNodes, opts.maxNodes);
+  }
+  const includedNodeIds = new Set(vizNodes.map((n) => n.id));
+  const filteredVizEdges = vizEdges.filter(
+    (e) => includedNodeIds.has(e.source) && includedNodeIds.has(e.target)
+  );
+  const statistics = computeVisualizationStatistics(vizNodes, filteredVizEdges, vizCycles, context);
+  const layers = layerConfig?.layers.map((layer) => ({
+    name: layer.name,
+    allowedDependencies: layer.allowedDependencies
+  })) ?? [];
+  const metadata = {
+    workspacePath: graph.rootPath,
+    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    analyzerVersion
+  };
+  return ok23({
+    nodes: vizNodes,
+    edges: filteredVizEdges,
+    cycles: vizCycles,
+    statistics,
+    layers,
+    metadata
+  });
+}
+function buildCycleEdgeMaps(cycles) {
+  const cycleEdgeSet = /* @__PURE__ */ new Set();
+  const edgeToCycleId = /* @__PURE__ */ new Map();
+  for (const cycle of cycles) {
+    for (const edge of cycle.edges) {
+      const key = `${edge.from}->${edge.to}`;
+      cycleEdgeSet.add(key);
+      edgeToCycleId.set(key, cycle.id);
+    }
+  }
+  return { cycleEdgeSet, edgeToCycleId };
+}
+function buildCycleNodeSet(cycles) {
+  const nodeIds = /* @__PURE__ */ new Set();
+  for (const cycle of cycles) {
+    for (const nodeId of cycle.nodes) {
+      nodeIds.add(nodeId);
+    }
+  }
+  return nodeIds;
+}
+function mapImportType(type, isTypeOnly) {
+  if (isTypeOnly || type === "type-only") {
+    return "type-only";
+  }
+  if (type === "dynamic") {
+    return "dynamic";
+  }
+  if (type === "require") {
+    return "require";
+  }
+  return "static";
+}
+function mapIssuesToViolations(nodeId, issues) {
+  const violations = [];
+  for (const issue of issues) {
+    const normalizedIssuePath = issue.location.filePath.replaceAll("\\", "/");
+    const normalizedNodeId = nodeId.replaceAll("\\", "/");
+    if (normalizedIssuePath.endsWith(normalizedNodeId) || normalizedIssuePath === normalizedNodeId) {
+      violations.push({
+        id: `${issue.id}-${violations.length}`,
+        message: issue.description,
+        severity: issue.severity,
+        ruleId: issue.id
+      });
+    }
+  }
+  return violations;
+}
+function prioritizeNodes(nodes, maxNodes) {
+  const scored = nodes.map((node) => {
+    let score = 0;
+    if (node.isInCycle) {
+      score += 100;
+    }
+    if (node.highestViolationSeverity !== void 0) {
+      const severityIndex = SEVERITY_ORDER2.indexOf(node.highestViolationSeverity);
+      score += (SEVERITY_ORDER2.length - severityIndex) * 20;
+    }
+    score += node.importsCount + node.importedByCount;
+    return { node, score };
+  });
+  scored.sort((a, b) => b.score - a.score);
+  return scored.slice(0, maxNodes).map((s) => s.node);
+}
+function computeVisualizationStatistics(nodes, edges, cycles, _context) {
+  const nodesByLayer = {};
+  const violationsBySeverity = {
+    info: 0,
+    warning: 0,
+    error: 0,
+    critical: 0
+  };
+  const packagesSet = /* @__PURE__ */ new Set();
+  const filesSet = /* @__PURE__ */ new Set();
+  for (const node of nodes) {
+    filesSet.add(node.filePath);
+    if (node.packageName !== void 0) {
+      packagesSet.add(node.packageName);
+    }
+    if (node.layer !== void 0) {
+      nodesByLayer[node.layer] = (nodesByLayer[node.layer] ?? 0) + 1;
+    }
+    for (const violation of node.violations) {
+      violationsBySeverity[violation.severity]++;
+    }
+  }
+  return {
+    totalNodes: nodes.length,
+    totalEdges: edges.length,
+    totalCycles: cycles.length,
+    nodesByLayer,
+    violationsBySeverity,
+    packagesAnalyzed: packagesSet.size,
+    filesAnalyzed: filesSet.size
+  };
+}
+
+// src/visualizer/html-renderer.ts
+import { err as err6, ok as ok24 } from "@bfra.me/es/result";
+
+// src/visualizer/templates/graph-template.ts
+function generateGraphInitScript() {
+  return `
+/**
+ * Dependency Graph Visualization
+ * Generated by @bfra.me/workspace-analyzer
+ */
+(function() {
+  'use strict';
+
+  // Get visualization data from global scope
+  const visualizationData = window.VISUALIZATION_DATA;
+  if (!visualizationData) {
+    console.error('Visualization data not found');
+    return;
+  }
+
+  // Extract data
+  const { nodes, edges, cycles, statistics, layers, metadata } = visualizationData;
+
+  // Configuration
+  const config = {
+    nodeRadius: 8,
+    linkDistance: 80,
+    chargeStrength: -300,
+    centerStrength: 0.05,
+    collisionRadiusMultiplier: 1.5,
+    zoomExtent: [0.1, 4],
+    alphaDecay: 0.0228,
+    velocityDecay: 0.4
+  };
+
+  // State management
+  const state = {
+    filters: {
+      layers: new Set(layers.map(l => l.name)),
+      severities: new Set(['critical', 'error', 'warning', 'info']),
+      packages: new Set(),
+      showCyclesOnly: false,
+      showViolationsOnly: false,
+      searchQuery: ''
+    },
+    selectedNode: null,
+    highlightedNodes: new Set(),
+    transform: d3.zoomIdentity
+  };
+
+  // Color scales
+  const severityColors = {
+    critical: '#dc2626',
+    error: '#ea580c',
+    warning: '#ca8a04',
+    info: '#2563eb'
+  };
+
+  const layerColors = {
+    domain: '#8b5cf6',
+    application: '#06b6d4',
+    infrastructure: '#84cc16',
+    presentation: '#f97316',
+    shared: '#6b7280',
+    unknown: '#9ca3af'
+  };
+
+  // Get container dimensions
+  const container = document.querySelector('.graph-container');
+  const width = container.clientWidth;
+  const height = container.clientHeight;
+
+  // Create SVG
+  const svg = d3.select('.graph-canvas')
+    .attr('viewBox', [0, 0, width, height])
+    .attr('preserveAspectRatio', 'xMidYMid meet');
+
+  // Create groups for layering
+  const g = svg.append('g').attr('class', 'graph-layer');
+  const edgeGroup = g.append('g').attr('class', 'edges');
+  const nodeGroup = g.append('g').attr('class', 'nodes');
+
+  // Arrow marker definition
+  svg.append('defs').append('marker')
+    .attr('id', 'arrow')
+    .attr('viewBox', '0 -5 10 10')
+    .attr('refX', 20)
+    .attr('refY', 0)
+    .attr('markerWidth', 6)
+    .attr('markerHeight', 6)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M0,-5L10,0L0,5')
+    .attr('class', 'edge-arrow');
+
+  // Arrow marker for cycle edges
+  svg.select('defs').append('marker')
+    .attr('id', 'arrow-cycle')
+    .attr('viewBox', '0 -5 10 10')
+    .attr('refX', 20)
+    .attr('refY', 0)
+    .attr('markerWidth', 6)
+    .attr('markerHeight', 6)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M0,-5L10,0L0,5')
+    .attr('class', 'edge-arrow cycle');
+
+  // Create simulation data with mutable copies
+  const simNodes = nodes.map(n => ({...n}));
+  const simEdges = edges.map(e => ({
+    ...e,
+    source: e.source,
+    target: e.target
+  }));
+
+  // Create node ID lookup
+  const nodeById = new Map(simNodes.map(n => [n.id, n]));
+
+  // Force simulation
+  const simulation = d3.forceSimulation(simNodes)
+    .force('link', d3.forceLink(simEdges)
+      .id(d => d.id)
+      .distance(config.linkDistance))
+    .force('charge', d3.forceManyBody()
+      .strength(config.chargeStrength))
+    .force('center', d3.forceCenter(width / 2, height / 2)
+      .strength(config.centerStrength))
+    .force('collide', d3.forceCollide()
+      .radius(config.nodeRadius * config.collisionRadiusMultiplier))
+    .alphaDecay(config.alphaDecay)
+    .velocityDecay(config.velocityDecay);
+
+  // Zoom behavior
+  const zoom = d3.zoom()
+    .scaleExtent(config.zoomExtent)
+    .on('zoom', (event) => {
+      state.transform = event.transform;
+      g.attr('transform', 'translate(' + event.transform.x + ',' + event.transform.y + ') scale(' + event.transform.k + ')');
+      updateZoomDisplay();
+    });
+
+  svg.call(zoom);
+
+  // Draw edges
+  function drawEdges() {
+    const filteredEdges = getFilteredEdges();
+
+    const edge = edgeGroup.selectAll('.graph-edge')
+      .data(filteredEdges, d => d.source.id + '-' + d.target.id);
+
+    edge.exit().remove();
+
+    const edgeEnter = edge.enter()
+      .append('g')
+      .attr('class', 'graph-edge');
+
+    // Edge line
+    edgeEnter.append('line')
+      .attr('class', d => getEdgeClass(d))
+      .attr('marker-end', d => d.isInCycle ? 'url(#arrow-cycle)' : 'url(#arrow)')
+      .on('mouseenter', handleEdgeMouseEnter)
+      .on('mouseleave', handleEdgeMouseLeave)
+      .on('click', handleEdgeClick);
+
+    // Merge and update
+    const edgeMerged = edgeEnter.merge(edge);
+
+    edgeMerged.select('line')
+      .attr('class', d => getEdgeClass(d));
+
+    return edgeMerged;
+  }
+
+  // Draw nodes
+  function drawNodes() {
+    const filteredNodes = getFilteredNodes();
+
+    const node = nodeGroup.selectAll('.graph-node')
+      .data(filteredNodes, d => d.id);
+
+    node.exit().remove();
+
+    const nodeEnter = node.enter()
+      .append('g')
+      .attr('class', 'graph-node')
+      .call(drag(simulation));
+
+    // Node circle
+    nodeEnter.append('circle')
+      .attr('r', config.nodeRadius)
+      .attr('class', d => getNodeClass(d));
+
+    // Node label
+    nodeEnter.append('text')
+      .attr('class', 'node-label')
+      .attr('dy', config.nodeRadius + 12)
+      .text(d => getNodeLabel(d));
+
+    // Merge and update
+    const nodeMerged = nodeEnter.merge(node);
+
+    nodeMerged.select('circle')
+      .attr('class', d => getNodeClass(d));
+
+    // Event handlers
+    nodeMerged
+      .on('mouseenter', handleNodeMouseEnter)
+      .on('mouseleave', handleNodeMouseLeave)
+      .on('click', handleNodeClick);
+
+    return nodeMerged;
+  }
+
+  // Get CSS class for edge
+  function getEdgeClass(edge) {
+    const classes = ['edge-line'];
+    if (edge.isInCycle) classes.push('cycle');
+    classes.push('type-' + edge.type);
+    return classes.join(' ');
+  }
+
+  // Get CSS class for node
+  function getNodeClass(node) {
+    const classes = ['node-circle'];
+
+    // Cycle highlighting
+    if (node.isInCycle) classes.push('cycle');
+
+    // Severity-based color (takes precedence)
+    if (node.highestViolationSeverity) {
+      classes.push('severity-' + node.highestViolationSeverity);
+    } else if (node.layer) {
+      // Layer-based color
+      classes.push('layer-' + node.layer.toLowerCase());
+    } else {
+      classes.push('default');
+    }
+
+    return classes.join(' ');
+  }
+
+  // Get display label for node
+  function getNodeLabel(node) {
+    // Show just the filename
+    const parts = node.name.split('/');
+    return parts[parts.length - 1] || node.name;
+  }
+
+  // Filtering
+  function getFilteredNodes() {
+    return simNodes.filter(node => {
+      // Layer filter
+      if (node.layer && !state.filters.layers.has(node.layer)) {
+        return false;
+      }
+
+      // Severity filter - only filter out nodes with violations if their highest severity is not selected
+      if (node.highestViolationSeverity && !state.filters.severities.has(node.highestViolationSeverity)) {
+        return false;
+      }
+
+      // Cycles only
+      if (state.filters.showCyclesOnly && !node.isInCycle) {
+        return false;
+      }
+
+      // Violations only
+      if (state.filters.showViolationsOnly && node.violations.length === 0) {
+        return false;
+      }
+
+      // Search query
+      if (state.filters.searchQuery) {
+        const query = state.filters.searchQuery.toLowerCase();
+        if (!node.name.toLowerCase().includes(query) &&
+            !node.filePath.toLowerCase().includes(query) &&
+            !(node.packageName && node.packageName.toLowerCase().includes(query))) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+  }
+
+  function getFilteredEdges() {
+    const filteredNodeIds = new Set(getFilteredNodes().map(n => n.id));
+    return simEdges.filter(edge => {
+      const sourceId = typeof edge.source === 'object' ? edge.source.id : edge.source;
+      const targetId = typeof edge.target === 'object' ? edge.target.id : edge.target;
+      return filteredNodeIds.has(sourceId) && filteredNodeIds.has(targetId);
+    });
+  }
+
+  // Drag behavior
+  function drag(simulation) {
+    function dragstarted(event) {
+      if (!event.active) simulation.alphaTarget(0.3).restart();
+      event.subject.fx = event.subject.x;
+      event.subject.fy = event.subject.y;
+    }
+
+    function dragged(event) {
+      event.subject.fx = event.x;
+      event.subject.fy = event.y;
+    }
+
+    function dragended(event) {
+      if (!event.active) simulation.alphaTarget(0);
+      event.subject.fx = null;
+      event.subject.fy = null;
+    }
+
+    return d3.drag()
+      .on('start', dragstarted)
+      .on('drag', dragged)
+      .on('end', dragended);
+  }
+
+  // Tooltip
+  const tooltip = d3.select('.tooltip');
+
+  function handleNodeMouseEnter(event, d) {
+    // Show tooltip
+    showTooltip(event, d);
+
+    // Highlight connected nodes
+    highlightConnectedNodes(d);
+  }
+
+  function handleNodeMouseLeave(event, d) {
+    hideTooltip();
+    clearHighlights();
+  }
+
+  function handleNodeClick(event, d) {
+    state.selectedNode = state.selectedNode === d ? null : d;
+    if (state.selectedNode) {
+      centerOnNode(d);
+    }
+  }
+
+  function handleEdgeMouseEnter(event, d) {
+    showEdgeTooltip(event, d);
+  }
+
+  function handleEdgeMouseLeave(event, d) {
+    hideTooltip();
+  }
+
+  function handleEdgeClick(event, d) {
+    event.stopPropagation();
+    showEdgeTooltip(event, d);
+  }
+
+  function showTooltip(event, node) {
+    const iconClass = node.highestViolationSeverity
+      ? 'severity-' + node.highestViolationSeverity
+      : node.isInCycle ? 'cycle' : 'default';
+
+    let violationsHtml = '';
+    if (node.violations.length > 0) {
+      violationsHtml = '<div class="tooltip-violations">' +
+        '<div class="tooltip-violations-title">Violations</div>' +
+        node.violations.slice(0, 5).map(v =>
+          '<div class="tooltip-violation">' +
+          '<div class="tooltip-violation-dot severity-dot ' + v.severity + '"></div>' +
+          '<div class="tooltip-violation-text">' + escapeHtml(v.message) + '</div>' +
+          '</div>'
+        ).join('') +
+        (node.violations.length > 5 ? '<div class="tooltip-violation"><div class="tooltip-violation-text">... and ' + (node.violations.length - 5) + ' more</div></div>' : '') +
+        '</div>';
+    }
+
+    const html = '<div class="tooltip-header">' +
+      '<div class="tooltip-icon ' + iconClass + '">' +
+      (node.isInCycle ? '\u21BB' : node.violations.length > 0 ? '!' : '\u25CB') +
+      '</div>' +
+      '<div>' +
+      '<div class="tooltip-title">' + escapeHtml(node.name) + '</div>' +
+      '<div class="tooltip-subtitle">' + escapeHtml(node.filePath) + '</div>' +
+      '</div>' +
+      '</div>' +
+      '<div class="tooltip-content">' +
+      '<div class="tooltip-row">' +
+      '<span class="tooltip-label">Package</span>' +
+      '<span class="tooltip-value">' + escapeHtml(node.packageName || 'N/A') + '</span>' +
+      '</div>' +
+      '<div class="tooltip-row">' +
+      '<span class="tooltip-label">Layer</span>' +
+      '<span class="tooltip-value">' + escapeHtml(node.layer || 'Unknown') + '</span>' +
+      '</div>' +
+      '<div class="tooltip-divider"></div>' +
+      '<div class="tooltip-row">' +
+      '<span class="tooltip-label">Imports</span>' +
+      '<span class="tooltip-value">' + node.importsCount + '</span>' +
+      '</div>' +
+      '<div class="tooltip-row">' +
+      '<span class="tooltip-label">Imported by</span>' +
+      '<span class="tooltip-value">' + node.importedByCount + '</span>' +
+      '</div>' +
+      (node.isInCycle ? '<div class="tooltip-row"><span class="tooltip-label">In Cycle</span><span class="tooltip-value" style="color: #ef4444;">Yes</span></div>' : '') +
+      '</div>' +
+      violationsHtml;
+
+    tooltip.html(html);
+
+    // Position tooltip
+    const tooltipNode = tooltip.node();
+    const tooltipRect = tooltipNode.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    let left = event.clientX + 10;
+    let top = event.clientY + 10;
+
+    // Adjust if tooltip would overflow
+    if (left + tooltipRect.width > viewportWidth - 20) {
+      left = event.clientX - tooltipRect.width - 10;
+    }
+    if (top + tooltipRect.height > viewportHeight - 20) {
+      top = event.clientY - tooltipRect.height - 10;
+    }
+
+    tooltip
+      .style('left', left + 'px')
+      .style('top', top + 'px')
+      .classed('visible', true);
+  }
+
+  function showEdgeTooltip(event, edge) {
+    const sourceId = typeof edge.source === 'object' ? edge.source.id : edge.source;
+    const targetId = typeof edge.target === 'object' ? edge.target.id : edge.target;
+    const sourceNode = nodeById.get(sourceId);
+    const targetNode = nodeById.get(targetId);
+
+    if (!sourceNode || !targetNode) return;
+
+    const iconClass = edge.isInCycle ? 'cycle' : 'default';
+    const importType = edge.type === 'static' ? 'Static Import' :
+                       edge.type === 'dynamic' ? 'Dynamic Import' :
+                       edge.type === 'type-only' ? 'Type-Only Import' :
+                       'Require Import';
+
+    const html = '<div class="tooltip-header">' +
+      '<div class="tooltip-icon ' + iconClass + '">' +
+      (edge.isInCycle ? '\u21BB' : '\u2192') +
+      '</div>' +
+      '<div>' +
+      '<div class="tooltip-title">Import Relationship</div>' +
+      '<div class="tooltip-subtitle">' + escapeHtml(importType) + '</div>' +
+      '</div>' +
+      '</div>' +
+      '<div class="tooltip-content">' +
+      '<div class="tooltip-row">' +
+      '<span class="tooltip-label">From</span>' +
+      '<span class="tooltip-value">' + escapeHtml(sourceNode.name) + '</span>' +
+      '</div>' +
+      '<div class="tooltip-row">' +
+      '<span class="tooltip-label">To</span>' +
+      '<span class="tooltip-value">' + escapeHtml(targetNode.name) + '</span>' +
+      '</div>' +
+      '<div class="tooltip-divider"></div>' +
+      '<div class="tooltip-row">' +
+      '<span class="tooltip-label">Type</span>' +
+      '<span class="tooltip-value">' + escapeHtml(edge.type) + '</span>' +
+      '</div>' +
+      (edge.isInCycle ? '<div class="tooltip-row"><span class="tooltip-label">Part of Cycle</span><span class="tooltip-value" style="color: #ef4444;">Yes</span></div>' : '') +
+      (edge.cycleId ? '<div class="tooltip-row"><span class="tooltip-label">Cycle ID</span><span class="tooltip-value">' + escapeHtml(edge.cycleId) + '</span></div>' : '') +
+      '</div>';
+
+    tooltip.html(html);
+
+    // Position tooltip
+    const tooltipNode = tooltip.node();
+    const tooltipRect = tooltipNode.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    let left = event.clientX + 10;
+    let top = event.clientY + 10;
+
+    // Adjust if tooltip would overflow
+    if (left + tooltipRect.width > viewportWidth - 20) {
+      left = event.clientX - tooltipRect.width - 10;
+    }
+    if (top + tooltipRect.height > viewportHeight - 20) {
+      top = event.clientY - tooltipRect.height - 10;
+    }
+
+    tooltip
+      .style('left', left + 'px')
+      .style('top', top + 'px')
+      .classed('visible', true);
+  }
+
+  function hideTooltip() {
+    tooltip.classed('visible', false);
+  }
+
+  // Highlighting
+  function highlightConnectedNodes(node) {
+    const connectedIds = new Set([node.id]);
+
+    // Find connected nodes
+    simEdges.forEach(edge => {
+      const sourceId = typeof edge.source === 'object' ? edge.source.id : edge.source;
+      const targetId = typeof edge.target === 'object' ? edge.target.id : edge.target;
+      if (sourceId === node.id) connectedIds.add(targetId);
+      if (targetId === node.id) connectedIds.add(sourceId);
+    });
+
+    state.highlightedNodes = connectedIds;
+
+    // Update visual state
+    nodeGroup.selectAll('.graph-node')
+      .classed('dimmed', d => !connectedIds.has(d.id))
+      .classed('highlighted', d => connectedIds.has(d.id));
+
+    edgeGroup.selectAll('.graph-edge')
+      .classed('dimmed', d => {
+        const sourceId = typeof d.source === 'object' ? d.source.id : d.source;
+        const targetId = typeof d.target === 'object' ? d.target.id : d.target;
+        return sourceId !== node.id && targetId !== node.id;
+      })
+      .classed('highlighted', d => {
+        const sourceId = typeof d.source === 'object' ? d.source.id : d.source;
+        const targetId = typeof d.target === 'object' ? d.target.id : d.target;
+        return sourceId === node.id || targetId === node.id;
+      });
+  }
+
+  function clearHighlights() {
+    state.highlightedNodes.clear();
+    nodeGroup.selectAll('.graph-node')
+      .classed('dimmed', false)
+      .classed('highlighted', false);
+    edgeGroup.selectAll('.graph-edge')
+      .classed('dimmed', false)
+      .classed('highlighted', false);
+  }
+
+  // Center on node
+  function centerOnNode(node) {
+    const scale = state.transform.k;
+    const x = width / 2 - node.x * scale;
+    const y = height / 2 - node.y * scale;
+    svg.transition()
+      .duration(500)
+      .call(zoom.transform, d3.zoomIdentity.translate(x, y).scale(scale));
+  }
+
+  // Zoom controls
+  function zoomIn() {
+    svg.transition().call(zoom.scaleBy, 1.3);
+  }
+
+  function zoomOut() {
+    svg.transition().call(zoom.scaleBy, 0.7);
+  }
+
+  function zoomReset() {
+    svg.transition().call(zoom.transform, d3.zoomIdentity);
+  }
+
+  function updateZoomDisplay() {
+    const percentage = Math.round(state.transform.k * 100);
+    const zoomLevel = document.querySelector('.zoom-level');
+    if (zoomLevel) {
+      zoomLevel.textContent = percentage + '%';
+    }
+  }
+
+  // Filter controls
+  function setLayerFilter(layer, enabled) {
+    if (enabled) {
+      state.filters.layers.add(layer);
+    } else {
+      state.filters.layers.delete(layer);
+    }
+    updateGraph();
+  }
+
+  function setSeverityFilter(severity, enabled) {
+    if (enabled) {
+      state.filters.severities.add(severity);
+    } else {
+      state.filters.severities.delete(severity);
+    }
+    updateGraph();
+  }
+
+  function setViewMode(mode) {
+    state.filters.showCyclesOnly = mode === 'cycles';
+    state.filters.showViolationsOnly = mode === 'violations';
+    updateGraph();
+  }
+
+  function setSearchQuery(query) {
+    state.filters.searchQuery = query;
+    updateGraph();
+  }
+
+  // Update graph when filters change
+  function updateGraph() {
+    drawEdges();
+    drawNodes();
+    simulation.alpha(0.3).restart();
+  }
+
+  // Simulation tick handler
+  simulation.on('tick', () => {
+    edgeGroup.selectAll('.graph-edge line')
+      .attr('x1', d => d.source.x)
+      .attr('y1', d => d.source.y)
+      .attr('x2', d => d.target.x)
+      .attr('y2', d => d.target.y);
+
+    nodeGroup.selectAll('.graph-node')
+      .attr('transform', d => 'translate(' + d.x + ',' + d.y + ')');
+  });
+
+  // Helper functions
+  function escapeHtml(str) {
+    if (!str) return '';
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+
+  // Initialize
+  drawEdges();
+  drawNodes();
+
+  // Update statistics display
+  function updateStatistics() {
+    const filtered = getFilteredNodes();
+    const filteredEdges = getFilteredEdges();
+
+    document.getElementById('stat-nodes').textContent = filtered.length;
+    document.getElementById('stat-edges').textContent = filteredEdges.length;
+    document.getElementById('stat-cycles').textContent = cycles.length;
+
+    // Update severity counts
+    const severityCounts = { critical: 0, error: 0, warning: 0, info: 0 };
+    filtered.forEach(n => {
+      n.violations.forEach(v => {
+        severityCounts[v.severity]++;
+      });
+    });
+
+    Object.keys(severityCounts).forEach(severity => {
+      const el = document.getElementById('stat-' + severity);
+      if (el) el.textContent = severityCounts[severity];
+    });
+  }
+
+  updateStatistics();
+
+  // Expose API for control panel
+  window.graphAPI = {
+    zoomIn,
+    zoomOut,
+    zoomReset,
+    setLayerFilter,
+    setSeverityFilter,
+    setViewMode,
+    setSearchQuery,
+    updateGraph,
+    centerOnNode: (nodeId) => {
+      const node = nodeById.get(nodeId);
+      if (node) centerOnNode(node);
+    }
+  };
+
+  // Hide loading overlay
+  const loadingOverlay = document.querySelector('.loading-overlay');
+  if (loadingOverlay) {
+    loadingOverlay.style.display = 'none';
+  }
+
+  console.log('Dependency graph visualization initialized with', nodes.length, 'nodes and', edges.length, 'edges');
+})();
+`;
+}
+function generateControlPanelScript() {
+  return `
+/**
+ * Control Panel Script
+ * Handles user interactions with filter controls
+ */
+(function() {
+  'use strict';
+
+  // Wait for graph API to be available
+  function waitForGraphAPI(callback) {
+    if (window.graphAPI) {
+      callback();
+    } else {
+      setTimeout(() => waitForGraphAPI(callback), 100);
+    }
+  }
+
+  waitForGraphAPI(() => {
+    const api = window.graphAPI;
+
+    // Zoom controls
+    document.getElementById('zoom-in')?.addEventListener('click', api.zoomIn);
+    document.getElementById('zoom-out')?.addEventListener('click', api.zoomOut);
+    document.getElementById('zoom-reset')?.addEventListener('click', api.zoomReset);
+
+    // View mode buttons
+    document.querySelectorAll('.view-mode-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.view-mode-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        api.setViewMode(btn.dataset.mode);
+      });
+    });
+
+    // Search input
+    const searchInput = document.getElementById('search-input');
+    if (searchInput) {
+      let debounceTimer;
+      searchInput.addEventListener('input', (e) => {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+          api.setSearchQuery(e.target.value);
+        }, 300);
+      });
+    }
+
+    // Layer checkboxes
+    document.querySelectorAll('.layer-checkbox').forEach(checkbox => {
+      checkbox.addEventListener('change', (e) => {
+        api.setLayerFilter(e.target.dataset.layer, e.target.checked);
+      });
+    });
+
+    // Severity checkboxes
+    document.querySelectorAll('.severity-checkbox').forEach(checkbox => {
+      checkbox.addEventListener('change', (e) => {
+        api.setSeverityFilter(e.target.dataset.severity, e.target.checked);
+      });
+    });
+
+    // Keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+      // Only if not focused on input
+      if (document.activeElement.tagName === 'INPUT') return;
+
+      switch (e.key) {
+        case '+':
+        case '=':
+          api.zoomIn();
+          break;
+        case '-':
+        case '_':
+          api.zoomOut();
+          break;
+        case '0':
+          api.zoomReset();
+          break;
+        case 'Escape':
+          api.setSearchQuery('');
+          if (searchInput) searchInput.value = '';
+          break;
+      }
+    });
+
+    console.log('Control panel initialized');
+  });
+})();
+`;
+}
+
+// src/visualizer/templates/styles.ts
+var SEVERITY_COLORS = {
+  critical: { primary: "#dc2626", background: "#fef2f2", text: "#991b1b" },
+  error: { primary: "#ea580c", background: "#fff7ed", text: "#9a3412" },
+  warning: { primary: "#ca8a04", background: "#fefce8", text: "#854d0e" },
+  info: { primary: "#2563eb", background: "#eff6ff", text: "#1e40af" }
+};
+var LAYER_COLORS = {
+  domain: "#8b5cf6",
+  application: "#06b6d4",
+  infrastructure: "#84cc16",
+  presentation: "#f97316",
+  shared: "#6b7280",
+  unknown: "#9ca3af"
+};
+var CYCLE_COLORS = {
+  edge: "#ef4444",
+  node: "#fca5a5",
+  glow: "rgba(239, 68, 68, 0.4)"
+};
+var CSS_VARIABLES = `
+  :root {
+    /* Layout */
+    --sidebar-width: 280px;
+    --control-panel-height: 60px;
+    --tooltip-max-width: 360px;
+
+    /* Colors - Light theme */
+    --bg-primary: #ffffff;
+    --bg-secondary: #f9fafb;
+    --bg-tertiary: #f3f4f6;
+    --text-primary: #111827;
+    --text-secondary: #4b5563;
+    --text-muted: #9ca3af;
+    --border-color: #e5e7eb;
+    --focus-ring: #3b82f6;
+
+    /* Graph colors */
+    --node-default: #6b7280;
+    --node-hover: #374151;
+    --edge-default: #d1d5db;
+    --edge-hover: #9ca3af;
+
+    /* Severity colors */
+    --severity-critical: ${SEVERITY_COLORS.critical.primary};
+    --severity-critical-bg: ${SEVERITY_COLORS.critical.background};
+    --severity-error: ${SEVERITY_COLORS.error.primary};
+    --severity-error-bg: ${SEVERITY_COLORS.error.background};
+    --severity-warning: ${SEVERITY_COLORS.warning.primary};
+    --severity-warning-bg: ${SEVERITY_COLORS.warning.background};
+    --severity-info: ${SEVERITY_COLORS.info.primary};
+    --severity-info-bg: ${SEVERITY_COLORS.info.background};
+
+    /* Cycle colors */
+    --cycle-edge: ${CYCLE_COLORS.edge};
+    --cycle-node: ${CYCLE_COLORS.node};
+    --cycle-glow: ${CYCLE_COLORS.glow};
+
+    /* Layer colors */
+    --layer-domain: ${LAYER_COLORS.domain};
+    --layer-application: ${LAYER_COLORS.application};
+    --layer-infrastructure: ${LAYER_COLORS.infrastructure};
+    --layer-presentation: ${LAYER_COLORS.presentation};
+    --layer-shared: ${LAYER_COLORS.shared};
+    --layer-unknown: ${LAYER_COLORS.unknown};
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+    /* Transitions */
+    --transition-fast: 150ms ease;
+    --transition-normal: 200ms ease;
+  }
+`;
+var BASE_STYLES = `
+  *, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  html, body {
+    height: 100%;
+    overflow: hidden;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--text-primary);
+    background-color: var(--bg-primary);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  button {
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    border: none;
+    background: none;
+  }
+
+  button:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 2px;
+  }
+
+  input {
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  input:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 1px;
+  }
+`;
+var LAYOUT_STYLES = `
+  .app-container {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+  }
+
+  .sidebar {
+    width: var(--sidebar-width);
+    min-width: var(--sidebar-width);
+    height: 100%;
+    background-color: var(--bg-secondary);
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .sidebar-header {
+    padding: 16px;
+    border-bottom: 1px solid var(--border-color);
+    background-color: var(--bg-primary);
+  }
+
+  .sidebar-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+  }
+
+  .sidebar-subtitle {
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+
+  .sidebar-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+  }
+
+  .main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .control-panel {
+    height: var(--control-panel-height);
+    min-height: var(--control-panel-height);
+    padding: 12px 16px;
+    background-color: var(--bg-primary);
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .graph-container {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+    background-color: var(--bg-tertiary);
+  }
+
+  .graph-canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+`;
+var CONTROL_STYLES = `
+  .control-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .control-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    white-space: nowrap;
+  }
+
+  .control-select {
+    padding: 6px 28px 6px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 13px;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    cursor: pointer;
+    transition: border-color var(--transition-fast);
+  }
+
+  .control-select:hover {
+    border-color: var(--text-muted);
+  }
+
+  .control-input {
+    padding: 6px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 13px;
+    width: 180px;
+    transition: border-color var(--transition-fast);
+  }
+
+  .control-input::placeholder {
+    color: var(--text-muted);
+  }
+
+  .control-input:hover {
+    border-color: var(--text-muted);
+  }
+
+  .control-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 13px;
+    font-weight: 500;
+    transition: all var(--transition-fast);
+  }
+
+  .control-btn:hover {
+    background-color: var(--bg-secondary);
+    border-color: var(--text-muted);
+  }
+
+  .control-btn.active {
+    background-color: var(--focus-ring);
+    border-color: var(--focus-ring);
+    color: white;
+  }
+
+  .control-btn-group {
+    display: flex;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  .control-btn-group .control-btn {
+    border: none;
+    border-radius: 0;
+    border-right: 1px solid var(--border-color);
+  }
+
+  .control-btn-group .control-btn:last-child {
+    border-right: none;
+  }
+
+  .control-spacer {
+    flex: 1;
+  }
+
+  .zoom-controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .zoom-btn {
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 16px;
+    font-weight: 500;
+    transition: all var(--transition-fast);
+  }
+
+  .zoom-btn:hover {
+    background-color: var(--bg-secondary);
+  }
+
+  .zoom-level {
+    font-size: 12px;
+    color: var(--text-secondary);
+    min-width: 48px;
+    text-align: center;
+  }
+`;
+var SIDEBAR_SECTION_STYLES = `
+  .sidebar-section {
+    margin-bottom: 20px;
+  }
+
+  .sidebar-section:last-child {
+    margin-bottom: 0;
+  }
+
+  .section-title {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    margin-bottom: 10px;
+  }
+
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
+
+  .stat-card {
+    padding: 10px 12px;
+    background-color: var(--bg-primary);
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+  }
+
+  .stat-value {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+    line-height: 1.2;
+  }
+
+  .stat-label {
+    font-size: 11px;
+    color: var(--text-muted);
+    margin-top: 2px;
+  }
+
+  .stat-card.span-full {
+    grid-column: span 2;
+  }
+
+  .severity-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .severity-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 10px;
+    background-color: var(--bg-primary);
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+  }
+
+  .severity-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .severity-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+  }
+
+  .severity-dot.critical { background-color: var(--severity-critical); }
+  .severity-dot.error { background-color: var(--severity-error); }
+  .severity-dot.warning { background-color: var(--severity-warning); }
+  .severity-dot.info { background-color: var(--severity-info); }
+
+  .severity-name {
+    font-size: 13px;
+    color: var(--text-primary);
+    text-transform: capitalize;
+  }
+
+  .severity-count {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .severity-filter-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .severity-filter-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 0;
+    cursor: pointer;
+  }
+
+  .severity-filter-item:hover {
+    opacity: 0.8;
+  }
+
+  .severity-checkbox {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    accent-color: var(--focus-ring);
+  }
+
+  .layer-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .layer-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 0;
+  }
+
+  .layer-checkbox {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    accent-color: var(--focus-ring);
+  }
+
+  .layer-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+  }
+
+  .layer-color.domain { background-color: var(--layer-domain); }
+  .layer-color.application { background-color: var(--layer-application); }
+  .layer-color.infrastructure { background-color: var(--layer-infrastructure); }
+  .layer-color.presentation { background-color: var(--layer-presentation); }
+  .layer-color.shared { background-color: var(--layer-shared); }
+  .layer-color.unknown { background-color: var(--layer-unknown); }
+
+  .layer-name {
+    font-size: 13px;
+    color: var(--text-primary);
+    text-transform: capitalize;
+    flex: 1;
+  }
+
+  .layer-count {
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+
+  .legend-section {
+    padding-top: 16px;
+    border-top: 1px solid var(--border-color);
+    margin-top: 16px;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 0;
+  }
+
+  .legend-icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .legend-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .legend-text {
+    font-size: 12px;
+    color: var(--text-secondary);
+  }
+`;
+var TOOLTIP_STYLES = `
+  .tooltip {
+    position: fixed;
+    max-width: var(--tooltip-max-width);
+    padding: 12px 14px;
+    background-color: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: var(--shadow-lg);
+    pointer-events: none;
+    z-index: 1000;
+    opacity: 0;
+    transform: translateY(4px);
+    transition: opacity var(--transition-fast), transform var(--transition-fast);
+  }
+
+  .tooltip.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .tooltip-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  .tooltip-icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .tooltip-icon.severity-critical { background-color: var(--severity-critical-bg); color: var(--severity-critical); }
+  .tooltip-icon.severity-error { background-color: var(--severity-error-bg); color: var(--severity-error); }
+  .tooltip-icon.severity-warning { background-color: var(--severity-warning-bg); color: var(--severity-warning); }
+  .tooltip-icon.severity-info { background-color: var(--severity-info-bg); color: var(--severity-info); }
+  .tooltip-icon.cycle { background-color: #fef2f2; color: var(--cycle-edge); }
+  .tooltip-icon.default { background-color: var(--bg-tertiary); color: var(--text-secondary); }
+
+  .tooltip-title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text-primary);
+    word-break: break-word;
+  }
+
+  .tooltip-subtitle {
+    font-size: 11px;
+    color: var(--text-muted);
+    margin-top: 2px;
+  }
+
+  .tooltip-content {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .tooltip-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .tooltip-label {
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+
+  .tooltip-value {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-primary);
+  }
+
+  .tooltip-divider {
+    height: 1px;
+    background-color: var(--border-color);
+    margin: 6px 0;
+  }
+
+  .tooltip-violations {
+    margin-top: 8px;
+  }
+
+  .tooltip-violations-title {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-muted);
+    margin-bottom: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .tooltip-violation {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    padding: 6px 8px;
+    background-color: var(--bg-secondary);
+    border-radius: 4px;
+    margin-bottom: 4px;
+  }
+
+  .tooltip-violation:last-child {
+    margin-bottom: 0;
+  }
+
+  .tooltip-violation-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    margin-top: 5px;
+    flex-shrink: 0;
+  }
+
+  .tooltip-violation-text {
+    font-size: 11px;
+    color: var(--text-primary);
+    line-height: 1.4;
+  }
+`;
+var GRAPH_ELEMENT_STYLES = `
+  .graph-node {
+    cursor: pointer;
+    transition: opacity var(--transition-fast);
+  }
+
+  .graph-node:hover {
+    opacity: 0.9;
+  }
+
+  .graph-node.dimmed {
+    opacity: 0.2;
+  }
+
+  .graph-node.highlighted {
+    opacity: 1;
+  }
+
+  .node-circle {
+    stroke: var(--bg-primary);
+    stroke-width: 2px;
+    transition: all var(--transition-fast);
+  }
+
+  .node-circle.cycle {
+    stroke: var(--cycle-edge);
+    stroke-width: 3px;
+    filter: drop-shadow(0 0 4px var(--cycle-glow));
+  }
+
+  .node-circle.severity-critical { fill: var(--severity-critical); }
+  .node-circle.severity-error { fill: var(--severity-error); }
+  .node-circle.severity-warning { fill: var(--severity-warning); }
+  .node-circle.severity-info { fill: var(--severity-info); }
+
+  .node-circle.layer-domain { fill: var(--layer-domain); }
+  .node-circle.layer-application { fill: var(--layer-application); }
+  .node-circle.layer-infrastructure { fill: var(--layer-infrastructure); }
+  .node-circle.layer-presentation { fill: var(--layer-presentation); }
+  .node-circle.layer-shared { fill: var(--layer-shared); }
+  .node-circle.layer-unknown, .node-circle.default { fill: var(--node-default); }
+
+  .node-label {
+    font-size: 10px;
+    fill: var(--text-primary);
+    pointer-events: none;
+    text-anchor: middle;
+    dominant-baseline: central;
+    font-weight: 500;
+  }
+
+  .graph-edge {
+    transition: opacity var(--transition-fast);
+  }
+
+  .graph-edge.dimmed {
+    opacity: 0.1;
+  }
+
+  .graph-edge.highlighted {
+    opacity: 1;
+  }
+
+  .edge-line {
+    fill: none;
+    stroke: var(--edge-default);
+    stroke-width: 1.5px;
+    transition: stroke var(--transition-fast);
+  }
+
+  .edge-line.cycle {
+    stroke: var(--cycle-edge);
+    stroke-width: 2px;
+    animation: pulse-edge 1.5s ease-in-out infinite;
+  }
+
+  .edge-line.type-static { stroke-dasharray: none; }
+  .edge-line.type-dynamic { stroke-dasharray: 4, 4; }
+  .edge-line.type-type-only { stroke-dasharray: 2, 2; opacity: 0.6; }
+  .edge-line.type-require { stroke-dasharray: 6, 2; }
+
+  .edge-arrow {
+    fill: var(--edge-default);
+    transition: fill var(--transition-fast);
+  }
+
+  .edge-arrow.cycle {
+    fill: var(--cycle-edge);
+  }
+
+  @keyframes pulse-edge {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  .cycle-glow {
+    fill: none;
+    stroke: var(--cycle-glow);
+    stroke-width: 8px;
+    opacity: 0.5;
+    animation: pulse-glow 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse-glow {
+    0%, 100% {
+      opacity: 0.3;
+    }
+    50% {
+      opacity: 0.6;
+    }
+  }
+`;
+var STATE_STYLES = `
+  .loading-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--bg-tertiary);
+    z-index: 100;
+  }
+
+  .loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--border-color);
+    border-top-color: var(--focus-ring);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .empty-state {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    padding: 24px;
+    text-align: center;
+  }
+
+  .empty-state-icon {
+    width: 64px;
+    height: 64px;
+    margin-bottom: 16px;
+    opacity: 0.5;
+  }
+
+  .empty-state-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin-bottom: 8px;
+  }
+
+  .empty-state-text {
+    font-size: 14px;
+    max-width: 300px;
+  }
+`;
+function generateStyles() {
+  return [
+    CSS_VARIABLES,
+    BASE_STYLES,
+    LAYOUT_STYLES,
+    CONTROL_STYLES,
+    SIDEBAR_SECTION_STYLES,
+    TOOLTIP_STYLES,
+    GRAPH_ELEMENT_STYLES,
+    STATE_STYLES
+  ].join("\n");
+}
+
+// src/visualizer/html-renderer.ts
+var DEFAULT_HTML_RENDER_OPTIONS = {
+  title: "Workspace Dependency Graph",
+  inlineD3: true,
+  minify: false
+};
+function sanitizeHtml(str) {
+  if (typeof str !== "string") {
+    return "";
+  }
+  return str.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#039;").replaceAll("/", "&#x2F;").replaceAll("`", "&#x60;").replaceAll("=", "&#x3D;");
+}
+function sanitizeJsString(str) {
+  if (typeof str !== "string") {
+    return "";
+  }
+  return str.replaceAll("\\", "\\\\").replaceAll("'", String.raw`\'`).replaceAll('"', String.raw`\"`).replaceAll("\n", String.raw`\n`).replaceAll("\r", String.raw`\r`).replaceAll("	", String.raw`\t`).replaceAll("\u2028", String.raw`\u2028`).replaceAll("\u2029", String.raw`\u2029`).replaceAll("</script>", String.raw`<\/script>`);
+}
+function sanitizeFilePath(path17) {
+  if (typeof path17 !== "string") {
+    return "";
+  }
+  return path17.replaceAll("\0", "").replaceAll("../", "").replaceAll(/\.\.$/g, "");
+}
+function sanitizeVisualizationData(data) {
+  return {
+    nodes: data.nodes.map((node) => ({
+      ...node,
+      id: sanitizeJsString(node.id),
+      name: sanitizeJsString(node.name),
+      filePath: sanitizeJsString(sanitizeFilePath(node.filePath)),
+      packageName: node.packageName === void 0 ? void 0 : sanitizeJsString(node.packageName),
+      layer: node.layer === void 0 ? void 0 : sanitizeJsString(node.layer),
+      violations: node.violations.map((v) => ({
+        ...v,
+        id: sanitizeJsString(v.id),
+        message: sanitizeJsString(v.message),
+        ruleId: sanitizeJsString(v.ruleId)
+      }))
+    })),
+    edges: data.edges.map((edge) => ({
+      ...edge,
+      source: sanitizeJsString(edge.source),
+      target: sanitizeJsString(edge.target),
+      cycleId: edge.cycleId === void 0 ? void 0 : sanitizeJsString(edge.cycleId)
+    })),
+    cycles: data.cycles.map((cycle) => ({
+      ...cycle,
+      id: sanitizeJsString(cycle.id),
+      nodes: cycle.nodes.map((n) => sanitizeJsString(n)),
+      edges: cycle.edges.map((e) => ({
+        from: sanitizeJsString(e.from),
+        to: sanitizeJsString(e.to)
+      })),
+      description: sanitizeJsString(cycle.description)
+    })),
+    statistics: data.statistics,
+    layers: data.layers.map((layer) => ({
+      ...layer,
+      name: sanitizeJsString(layer.name),
+      allowedDependencies: layer.allowedDependencies.map((d) => sanitizeJsString(d))
+    })),
+    metadata: {
+      ...data.metadata,
+      workspacePath: sanitizeJsString(sanitizeFilePath(data.metadata.workspacePath)),
+      generatedAt: sanitizeJsString(data.metadata.generatedAt),
+      analyzerVersion: sanitizeJsString(data.metadata.analyzerVersion)
+    }
+  };
+}
+function generateSidebarHtml(data, title) {
+  const stats = data.statistics;
+  const layers = data.layers;
+  const layerFiltersHtml = layers.map(
+    (layer) => `
+    <label class="layer-item">
+      <input type="checkbox" class="layer-checkbox" data-layer="${sanitizeHtml(layer.name)}" checked>
+      <span class="layer-color ${sanitizeHtml(layer.name.toLowerCase())}"></span>
+      <span class="layer-name">${sanitizeHtml(layer.name)}</span>
+      <span class="layer-count">${stats.nodesByLayer[layer.name] ?? 0}</span>
+    </label>
+  `
+  ).join("");
+  const severityStatsHtml = ["critical", "error", "warning", "info"].map(
+    (severity) => `
+    <div class="severity-item">
+      <div class="severity-indicator">
+        <div class="severity-dot ${severity}"></div>
+        <span class="severity-name">${severity}</span>
+      </div>
+      <span class="severity-count" id="stat-${severity}">${stats.violationsBySeverity[severity] ?? 0}</span>
+    </div>
+  `
+  ).join("");
+  return `
+    <div class="sidebar-header">
+      <h1 class="sidebar-title">${sanitizeHtml(title)}</h1>
+      <p class="sidebar-subtitle">Generated ${sanitizeHtml(data.metadata.generatedAt)}</p>
+    </div>
+    <div class="sidebar-content">
+      <section class="sidebar-section">
+        <h2 class="section-title">Statistics</h2>
+        <div class="stats-grid">
+          <div class="stat-card">
+            <div class="stat-value" id="stat-nodes">${stats.totalNodes}</div>
+            <div class="stat-label">Nodes</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value" id="stat-edges">${stats.totalEdges}</div>
+            <div class="stat-label">Edges</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value" id="stat-cycles">${stats.totalCycles}</div>
+            <div class="stat-label">Cycles</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value">${stats.packagesAnalyzed}</div>
+            <div class="stat-label">Packages</div>
+          </div>
+        </div>
+      </section>
+
+      <section class="sidebar-section">
+        <h2 class="section-title">Violations by Severity</h2>
+        <div class="severity-list">
+          ${severityStatsHtml}
+        </div>
+      </section>
+
+      <section class="sidebar-section">
+        <h2 class="section-title">Filter by Severity</h2>
+        <div class="severity-filter-list">
+          <label class="severity-filter-item">
+            <input type="checkbox" class="severity-checkbox" data-severity="critical" checked>
+            <div class="severity-indicator">
+              <div class="severity-dot critical"></div>
+              <span class="severity-name">Critical</span>
+            </div>
+          </label>
+          <label class="severity-filter-item">
+            <input type="checkbox" class="severity-checkbox" data-severity="error" checked>
+            <div class="severity-indicator">
+              <div class="severity-dot error"></div>
+              <span class="severity-name">Error</span>
+            </div>
+          </label>
+          <label class="severity-filter-item">
+            <input type="checkbox" class="severity-checkbox" data-severity="warning" checked>
+            <div class="severity-indicator">
+              <div class="severity-dot warning"></div>
+              <span class="severity-name">Warning</span>
+            </div>
+          </label>
+          <label class="severity-filter-item">
+            <input type="checkbox" class="severity-checkbox" data-severity="info" checked>
+            <div class="severity-indicator">
+              <div class="severity-dot info"></div>
+              <span class="severity-name">Info</span>
+            </div>
+          </label>
+        </div>
+      </section>
+
+      <section class="sidebar-section">
+        <h2 class="section-title">Filter by Layer</h2>
+        <div class="layer-list">
+          ${layerFiltersHtml}
+        </div>
+      </section>
+
+      <section class="sidebar-section legend-section">
+        <h2 class="section-title">Legend</h2>
+        <div class="legend-item">
+          <div class="legend-icon">
+            <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="${SEVERITY_COLORS.critical.primary}" stroke="#fff" stroke-width="2"/></svg>
+          </div>
+          <span class="legend-text">Critical violation</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-icon">
+            <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="#ef4444" stroke="#ef4444" stroke-width="3"/></svg>
+          </div>
+          <span class="legend-text">Node in cycle</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-icon">
+            <svg viewBox="0 0 16 16"><line x1="0" y1="8" x2="16" y2="8" stroke="#ef4444" stroke-width="2" stroke-dasharray="0"/></svg>
+          </div>
+          <span class="legend-text">Cycle edge (animated)</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-icon">
+            <svg viewBox="0 0 16 16"><line x1="0" y1="8" x2="16" y2="8" stroke="#d1d5db" stroke-width="2" stroke-dasharray="4,4"/></svg>
+          </div>
+          <span class="legend-text">Dynamic import</span>
+        </div>
+      </section>
+    </div>
+  `;
+}
+function generateControlPanelHtml() {
+  return `
+    <div class="control-group">
+      <label class="control-label">View:</label>
+      <div class="control-btn-group">
+        <button class="control-btn view-mode-btn active" data-mode="all">All</button>
+        <button class="control-btn view-mode-btn" data-mode="cycles">Cycles</button>
+        <button class="control-btn view-mode-btn" data-mode="violations">Violations</button>
+      </div>
+    </div>
+
+    <div class="control-group">
+      <label class="control-label" for="search-input">Search:</label>
+      <input type="text" id="search-input" class="control-input" placeholder="Filter nodes...">
+    </div>
+
+    <div class="control-spacer"></div>
+
+    <div class="zoom-controls">
+      <button class="zoom-btn" id="zoom-out" title="Zoom out (-)">\u2212</button>
+      <span class="zoom-level">100%</span>
+      <button class="zoom-btn" id="zoom-in" title="Zoom in (+)">+</button>
+      <button class="control-btn" id="zoom-reset" title="Reset zoom (0)">Reset</button>
+    </div>
+  `;
+}
+function validateVisualizationData(data) {
+  if (data === null || data === void 0 || typeof data !== "object") {
+    return err6({
+      code: "INVALID_DATA",
+      message: "Visualization data must be an object"
+    });
+  }
+  const d = data;
+  if (!Array.isArray(d.nodes)) {
+    return err6({
+      code: "INVALID_DATA",
+      message: "Visualization data must have a nodes array"
+    });
+  }
+  if (!Array.isArray(d.edges)) {
+    return err6({
+      code: "INVALID_DATA",
+      message: "Visualization data must have an edges array"
+    });
+  }
+  if (d.statistics === null || d.statistics === void 0 || typeof d.statistics !== "object") {
+    return err6({
+      code: "INVALID_DATA",
+      message: "Visualization data must have statistics object"
+    });
+  }
+  if (d.metadata === null || d.metadata === void 0 || typeof d.metadata !== "object") {
+    return err6({
+      code: "INVALID_DATA",
+      message: "Visualization data must have metadata object"
+    });
+  }
+  return ok24(data);
+}
+function renderVisualizationHtml(data, options = {}) {
+  const opts = {
+    ...DEFAULT_HTML_RENDER_OPTIONS,
+    ...options
+  };
+  const validationResult = validateVisualizationData(data);
+  if (validationResult.success === false) {
+    return validationResult;
+  }
+  const sanitizedData = sanitizeVisualizationData(data);
+  const dataJson = JSON.stringify(sanitizedData);
+  const styles = generateStyles();
+  const sidebarHtml = generateSidebarHtml(sanitizedData, opts.title);
+  const controlPanelHtml = generateControlPanelHtml();
+  const graphScript = generateGraphInitScript();
+  const controlScript = generateControlPanelScript();
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="generator" content="@bfra.me/workspace-analyzer">
+  <meta name="description" content="Interactive dependency graph visualization">
+  <title>${sanitizeHtml(opts.title)}</title>
+  <style>
+${styles}
+${opts.customCss ?? ""}
+  </style>
+</head>
+<body>
+  <div class="app-container">
+    <aside class="sidebar">
+${sidebarHtml}
+    </aside>
+    <main class="main-content">
+      <div class="control-panel">
+${controlPanelHtml}
+      </div>
+      <div class="graph-container">
+        <svg class="graph-canvas"></svg>
+        <div class="loading-overlay">
+          <div class="loading-spinner"></div>
+        </div>
+      </div>
+    </main>
+  </div>
+  <div class="tooltip"></div>
+
+  <script>
+// Visualization data (sanitized)
+window.VISUALIZATION_DATA = ${dataJson};
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+  <script>
+// Graph Initialization
+${graphScript}
+  </script>
+  <script>
+// Control Panel
+${controlScript}
+  </script>
+${opts.customJs === void 0 ? "" : `  <script>
+${opts.customJs}
+  </script>`}
+</body>
+</html>`;
+  return ok24(html);
+}
+function exportVisualizationJson(data) {
+  const sanitizedData = sanitizeVisualizationData(data);
+  return JSON.stringify(sanitizedData, null, 2);
+}
+function estimateHtmlSize(data) {
+  const baseSize = 5e4;
+  const dataJson = JSON.stringify(data);
+  const dataSize = dataJson.length * 1.1;
+  const scriptsSize = 1e4;
+  return Math.ceil(baseSize + dataSize + scriptsSize);
+}
+function isWithinSizeLimit(data, maxSizeBytes = 5 * 1024 * 1024) {
+  return estimateHtmlSize(data) < maxSizeBytes;
+}
+
+// src/visualizer/mermaid-exporter.ts
+var DEFAULT_MERMAID_OPTIONS = {
+  cyclesOnly: false,
+  maxNodes: Number.POSITIVE_INFINITY,
+  includeViolations: true,
+  direction: "LR"
+};
+function sanitizeMermaidId(id) {
+  return id.replaceAll(/\W/g, "_");
+}
+function sanitizeMermaidLabel(label) {
+  return label.replaceAll('"', String.raw`\"`).replaceAll("\n", " ");
+}
+function getShortName2(filePath) {
+  const parts = filePath.split("/");
+  return parts.at(-1) ?? filePath;
+}
+function generateNodeDefinition(nodeId, label, violations, includeViolations) {
+  const sanitizedId = sanitizeMermaidId(nodeId);
+  const sanitizedLabel = sanitizeMermaidLabel(label);
+  let nodeLabel = sanitizedLabel;
+  if (includeViolations && violations.length > 0) {
+    const violationSummary = violations.reduce((acc, v) => {
+      acc[v.severity] = (acc[v.severity] ?? 0) + 1;
+      return acc;
+    }, {});
+    const violationText = Object.entries(violationSummary).map(([severity, count]) => `${count} ${severity}`).join(", ");
+    nodeLabel = `${sanitizedLabel}<br/>(${violationText})`;
+  }
+  const highestSeverity = violations.length > 0 ? violations.reduce((highest, v) => {
+    if (highest === void 0) return v.severity;
+    const severityOrder = { critical: 0, error: 1, warning: 2, info: 3 };
+    const currentOrder = severityOrder[v.severity] ?? 999;
+    const highestOrder = severityOrder[highest] ?? 999;
+    return currentOrder < highestOrder ? v.severity : highest;
+  }, void 0) : void 0;
+  const styleClass = highestSeverity !== void 0 && highestSeverity.length > 0 ? `class-${highestSeverity}` : "class-normal";
+  return `  ${sanitizedId}["${nodeLabel}"]:::${styleClass}`;
+}
+function generateEdgeDefinition(edge) {
+  const fromId = sanitizeMermaidId(edge.source);
+  const toId = sanitizeMermaidId(edge.target);
+  const edgeStyle = edge.isInCycle ? "==>" : edge.type === "type-only" ? "-.->" : edge.type === "dynamic" ? "-..->" : "-->";
+  const linkClass = edge.isInCycle ? "linkStyle cycle" : "";
+  return `  ${fromId} ${edgeStyle} ${toId}${linkClass ? ` :::${linkClass}` : ""}`;
+}
+function generateStyleDefinitions() {
+  return `
+  classDef class-critical fill:#ff4444,stroke:#cc0000,stroke-width:3px,color:#fff
+  classDef class-error fill:#ff8844,stroke:#cc4400,stroke-width:2px,color:#fff
+  classDef class-warning fill:#ffcc44,stroke:#ccaa00,stroke-width:2px,color:#000
+  classDef class-info fill:#4488ff,stroke:#0044cc,stroke-width:1px,color:#fff
+  classDef class-normal fill:#88ccff,stroke:#0088cc,stroke-width:1px,color:#000
+  linkStyle cycle stroke:#ff0000,stroke-width:3px,stroke-dasharray:5 5
+`;
+}
+function exportVisualizationMermaid(data, options = {}) {
+  const opts = { ...DEFAULT_MERMAID_OPTIONS, ...options };
+  const lines = [`graph ${opts.direction}`];
+  const cycleNodeIds = /* @__PURE__ */ new Set();
+  if (opts.cyclesOnly) {
+    for (const cycle of data.cycles) {
+      for (const nodeId of cycle.nodes) {
+        cycleNodeIds.add(nodeId);
+      }
+    }
+  }
+  const filteredNodes = opts.cyclesOnly ? data.nodes.filter((n) => cycleNodeIds.has(n.id)) : data.nodes;
+  const nodesToInclude = filteredNodes.slice(0, opts.maxNodes);
+  const nodeIds = new Set(nodesToInclude.map((n) => n.id));
+  for (const node of nodesToInclude) {
+    const label = getShortName2(node.filePath);
+    const nodeDef = generateNodeDefinition(node.id, label, node.violations, opts.includeViolations);
+    lines.push(nodeDef);
+  }
+  const filteredEdges = data.edges.filter(
+    (e) => nodeIds.has(e.source) && nodeIds.has(e.target) && (!opts.cyclesOnly || e.isInCycle)
+  );
+  for (const edge of filteredEdges) {
+    lines.push(generateEdgeDefinition(edge));
+  }
+  lines.push(generateStyleDefinitions());
+  return lines.join("\n");
+}
+function exportCycleMermaid(cycle, data) {
+  const lines = ["graph LR"];
+  const nodeMap = new Map(data.nodes.map((n) => [n.id, n]));
+  for (const nodeId of cycle.nodes) {
+    const node = nodeMap.get(nodeId);
+    if (node === void 0) continue;
+    const label = getShortName2(node.filePath);
+    const nodeDef = generateNodeDefinition(nodeId, label, node.violations, true);
+    lines.push(nodeDef);
+  }
+  for (const edge of cycle.edges) {
+    const fromId = sanitizeMermaidId(edge.from);
+    const toId = sanitizeMermaidId(edge.to);
+    lines.push(`  ${fromId} ==> ${toId}`);
+  }
+  lines.push(generateStyleDefinitions());
+  return lines.join("\n");
+}
+
+// src/visualizer/templates/d3-bundle.ts
+var D3_CDN_URLS = {
+  /** Full D3.js bundle from jsdelivr (minified) */
+  jsdelivr: "https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js",
+  /** Full D3.js bundle from unpkg (minified) */
+  unpkg: "https://unpkg.com/d3@7/dist/d3.min.js",
+  /** Full D3.js bundle from cdnjs (minified) */
+  cdnjs: "https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"
+};
+var D3_VERSION = "7.9.0";
+var D3_INLINE_MODULES = String.raw`
+/**
+ * Minimal D3-compatible implementation for force-directed graphs.
+ * This provides the core functionality needed without the full D3 library.
+ *
+ * For full D3.js functionality, the HTML renderer can optionally embed
+ * the complete minified D3.js bundle (~280KB) or load from CDN.
+ */
+(function(global) {
+  'use strict';
+
+  // Simple namespace
+  const d3 = {};
+
+  // Selection implementation
+  function Selection(nodes) {
+    this._nodes = Array.isArray(nodes) ? nodes : [nodes];
+  }
+
+  Selection.prototype.select = function(selector) {
+    const node = this._nodes[0];
+    if (!node) return new Selection([]);
+    const selected = typeof selector === 'string'
+      ? node.querySelector(selector)
+      : selector;
+    return new Selection(selected ? [selected] : []);
+  };
+
+  Selection.prototype.selectAll = function(selector) {
+    const results = [];
+    this._nodes.forEach(node => {
+      if (node) {
+        const selected = typeof selector === 'string'
+          ? node.querySelectorAll(selector)
+          : selector;
+        results.push(...Array.from(selected));
+      }
+    });
+    return new Selection(results);
+  };
+
+  Selection.prototype.append = function(type) {
+    const results = [];
+    this._nodes.forEach(node => {
+      if (node) {
+        const child = document.createElementNS(
+          type === 'svg' || node.namespaceURI === 'http://www.w3.org/2000/svg'
+            ? 'http://www.w3.org/2000/svg'
+            : 'http://www.w3.org/1999/xhtml',
+          type
+        );
+        node.appendChild(child);
+        results.push(child);
+      }
+    });
+    return new Selection(results);
+  };
+
+  Selection.prototype.attr = function(name, value) {
+    if (value === undefined) {
+      const node = this._nodes[0];
+      return node ? node.getAttribute(name) : null;
+    }
+    this._nodes.forEach((node, i) => {
+      if (node) {
+        const v = typeof value === 'function' ? value(node.__data__, i) : value;
+        if (v === null) {
+          node.removeAttribute(name);
+        } else {
+          node.setAttribute(name, v);
+        }
+      }
+    });
+    return this;
+  };
+
+  Selection.prototype.style = function(name, value) {
+    if (value === undefined) {
+      const node = this._nodes[0];
+      return node ? getComputedStyle(node).getPropertyValue(name) : null;
+    }
+    this._nodes.forEach((node, i) => {
+      if (node) {
+        const v = typeof value === 'function' ? value(node.__data__, i) : value;
+        node.style.setProperty(name, v);
+      }
+    });
+    return this;
+  };
+
+  Selection.prototype.classed = function(names, value) {
+    const classes = names.split(/\s+/);
+    if (value === undefined) {
+      const node = this._nodes[0];
+      return node ? classes.every(c => node.classList.contains(c)) : false;
+    }
+    this._nodes.forEach((node, i) => {
+      if (node) {
+        const v = typeof value === 'function' ? value(node.__data__, i) : value;
+        classes.forEach(c => {
+          if (c) node.classList.toggle(c, v);
+        });
+      }
+    });
+    return this;
+  };
+
+  Selection.prototype.text = function(value) {
+    if (value === undefined) {
+      const node = this._nodes[0];
+      return node ? node.textContent : null;
+    }
+    this._nodes.forEach((node, i) => {
+      if (node) {
+        node.textContent = typeof value === 'function' ? value(node.__data__, i) : value;
+      }
+    });
+    return this;
+  };
+
+  Selection.prototype.html = function(value) {
+    if (value === undefined) {
+      const node = this._nodes[0];
+      return node ? node.innerHTML : null;
+    }
+    this._nodes.forEach((node, i) => {
+      if (node) {
+        node.innerHTML = typeof value === 'function' ? value(node.__data__, i) : value;
+      }
+    });
+    return this;
+  };
+
+  Selection.prototype.on = function(type, listener) {
+    const types = type.split('.');
+    const eventType = types[0];
+    this._nodes.forEach(node => {
+      if (node) {
+        if (listener === null) {
+          node.removeEventListener(eventType, node['__on_' + type]);
+        } else {
+          const handler = function(event) {
+            listener.call(this, event, this.__data__);
+          };
+          node['__on_' + type] = handler;
+          node.addEventListener(eventType, handler);
+        }
+      }
+    });
+    return this;
+  };
+
+  Selection.prototype.data = function(data, key) {
+    const nodes = this._nodes;
+    const dataArray = typeof data === 'function' ? data() : data;
+
+    // Simple data join - just bind data to existing nodes
+    const update = [];
+    const enter = [];
+    const exit = [];
+
+    dataArray.forEach((d, i) => {
+      if (nodes[i]) {
+        nodes[i].__data__ = d;
+        update.push(nodes[i]);
+      } else {
+        enter.push({__data__: d, _index: i});
+      }
+    });
+
+    for (let i = dataArray.length; i < nodes.length; i++) {
+      exit.push(nodes[i]);
+    }
+
+    const selection = new Selection(update);
+    selection._enter = enter;
+    selection._exit = exit;
+    selection._parent = this._nodes[0]?.parentNode;
+    return selection;
+  };
+
+  Selection.prototype.enter = function() {
+    const enterSelection = new Selection([]);
+    enterSelection._enter = this._enter || [];
+    enterSelection._parent = this._parent;
+    enterSelection.append = function(type) {
+      const results = [];
+      const parent = this._parent || document.body;
+      this._enter.forEach(d => {
+        const node = document.createElementNS(
+          type === 'svg' || parent.namespaceURI === 'http://www.w3.org/2000/svg'
+            ? 'http://www.w3.org/2000/svg'
+            : 'http://www.w3.org/1999/xhtml',
+          type
+        );
+        node.__data__ = d.__data__;
+        parent.appendChild(node);
+        results.push(node);
+      });
+      return new Selection(results);
+    };
+    return enterSelection;
+  };
+
+  Selection.prototype.exit = function() {
+    return new Selection(this._exit || []);
+  };
+
+  Selection.prototype.remove = function() {
+    this._nodes.forEach(node => {
+      if (node && node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    });
+    return this;
+  };
+
+  Selection.prototype.join = function(enter, update, exit) {
+    const enterSel = this.enter().append(typeof enter === 'string' ? enter : 'g');
+    const exitSel = this.exit();
+    if (exit) exit(exitSel);
+    else exitSel.remove();
+    const merged = new Selection([...enterSel._nodes, ...this._nodes]);
+    if (update) update(merged);
+    return merged;
+  };
+
+  Selection.prototype.each = function(callback) {
+    this._nodes.forEach((node, i) => {
+      if (node) callback.call(node, node.__data__, i);
+    });
+    return this;
+  };
+
+  Selection.prototype.call = function(fn, ...args) {
+    fn.apply(null, [this, ...args]);
+    return this;
+  };
+
+  Selection.prototype.node = function() {
+    return this._nodes[0] || null;
+  };
+
+  Selection.prototype.nodes = function() {
+    return this._nodes.slice();
+  };
+
+  Selection.prototype.empty = function() {
+    return this._nodes.length === 0;
+  };
+
+  Selection.prototype.size = function() {
+    return this._nodes.length;
+  };
+
+  Selection.prototype.raise = function() {
+    this._nodes.forEach(node => {
+      if (node && node.parentNode) {
+        node.parentNode.appendChild(node);
+      }
+    });
+    return this;
+  };
+
+  Selection.prototype.lower = function() {
+    this._nodes.forEach(node => {
+      if (node && node.parentNode) {
+        node.parentNode.insertBefore(node, node.parentNode.firstChild);
+      }
+    });
+    return this;
+  };
+
+  // Core selection functions
+  d3.select = function(selector) {
+    const node = typeof selector === 'string'
+      ? document.querySelector(selector)
+      : selector;
+    return new Selection(node ? [node] : []);
+  };
+
+  d3.selectAll = function(selector) {
+    const nodes = typeof selector === 'string'
+      ? document.querySelectorAll(selector)
+      : selector;
+    return new Selection(Array.from(nodes));
+  };
+
+  d3.create = function(name) {
+    const node = document.createElementNS(
+      name === 'svg' ? 'http://www.w3.org/2000/svg' : 'http://www.w3.org/1999/xhtml',
+      name
+    );
+    return new Selection([node]);
+  };
+
+  // Force simulation
+  function ForceSimulation(nodes) {
+    this._nodes = nodes || [];
+    this._forces = {};
+    this._alpha = 1;
+    this._alphaMin = 0.001;
+    this._alphaDecay = 1 - Math.pow(this._alphaMin, 1 / 300);
+    this._alphaTarget = 0;
+    this._velocityDecay = 0.6;
+    this._listeners = {tick: [], end: []};
+    this._running = false;
+
+    // Initialize nodes
+    this._nodes.forEach((node, i) => {
+      if (node.x === undefined) node.x = Math.random() * 100;
+      if (node.y === undefined) node.y = Math.random() * 100;
+      if (node.vx === undefined) node.vx = 0;
+      if (node.vy === undefined) node.vy = 0;
+      node.index = i;
+    });
+  }
+
+  ForceSimulation.prototype.nodes = function(nodes) {
+    if (nodes === undefined) return this._nodes;
+    this._nodes = nodes;
+    nodes.forEach((node, i) => {
+      if (node.x === undefined) node.x = Math.random() * 100;
+      if (node.y === undefined) node.y = Math.random() * 100;
+      if (node.vx === undefined) node.vx = 0;
+      if (node.vy === undefined) node.vy = 0;
+      node.index = i;
+    });
+    // Re-initialize forces
+    Object.values(this._forces).forEach(force => {
+      if (force.initialize) force.initialize(this._nodes);
+    });
+    return this;
+  };
+
+  ForceSimulation.prototype.force = function(name, force) {
+    if (force === undefined) return this._forces[name];
+    if (force === null) {
+      delete this._forces[name];
+    } else {
+      this._forces[name] = force;
+      if (force.initialize) force.initialize(this._nodes);
+    }
+    return this;
+  };
+
+  ForceSimulation.prototype.alpha = function(alpha) {
+    if (alpha === undefined) return this._alpha;
+    this._alpha = alpha;
+    return this;
+  };
+
+  ForceSimulation.prototype.alphaMin = function(min) {
+    if (min === undefined) return this._alphaMin;
+    this._alphaMin = min;
+    return this;
+  };
+
+  ForceSimulation.prototype.alphaDecay = function(decay) {
+    if (decay === undefined) return this._alphaDecay;
+    this._alphaDecay = decay;
+    return this;
+  };
+
+  ForceSimulation.prototype.alphaTarget = function(target) {
+    if (target === undefined) return this._alphaTarget;
+    this._alphaTarget = target;
+    return this;
+  };
+
+  ForceSimulation.prototype.velocityDecay = function(decay) {
+    if (decay === undefined) return this._velocityDecay;
+    this._velocityDecay = decay;
+    return this;
+  };
+
+  ForceSimulation.prototype.tick = function(iterations) {
+    iterations = iterations || 1;
+    for (let k = 0; k < iterations; k++) {
+      this._alpha += (this._alphaTarget - this._alpha) * this._alphaDecay;
+
+      // Apply forces
+      Object.values(this._forces).forEach(force => {
+        if (force) force(this._alpha);
+      });
+
+      // Update positions
+      this._nodes.forEach(node => {
+        if (node.fx !== undefined && node.fx !== null) {
+          node.x = node.fx;
+          node.vx = 0;
+        } else {
+          node.vx *= this._velocityDecay;
+          node.x += node.vx;
+        }
+        if (node.fy !== undefined && node.fy !== null) {
+          node.y = node.fy;
+          node.vy = 0;
+        } else {
+          node.vy *= this._velocityDecay;
+          node.y += node.vy;
+        }
+      });
+    }
+    return this;
+  };
+
+  ForceSimulation.prototype.restart = function() {
+    if (this._running) return this;
+    this._running = true;
+    const self = this;
+    function step() {
+      if (!self._running) return;
+      self.tick();
+      self._listeners.tick.forEach(fn => fn());
+      if (self._alpha < self._alphaMin) {
+        self._running = false;
+        self._listeners.end.forEach(fn => fn());
+        return;
+      }
+      requestAnimationFrame(step);
+    }
+    requestAnimationFrame(step);
+    return this;
+  };
+
+  ForceSimulation.prototype.stop = function() {
+    this._running = false;
+    return this;
+  };
+
+  ForceSimulation.prototype.on = function(type, listener) {
+    const eventType = type.split('.')[0];
+    if (listener === undefined) {
+      return this._listeners[eventType] || [];
+    }
+    if (!this._listeners[eventType]) {
+      this._listeners[eventType] = [];
+    }
+    if (listener === null) {
+      this._listeners[eventType] = [];
+    } else {
+      this._listeners[eventType].push(listener);
+    }
+    return this;
+  };
+
+  ForceSimulation.prototype.find = function(x, y, radius) {
+    let closest = null;
+    let minDist = radius !== undefined ? radius : Infinity;
+    this._nodes.forEach(node => {
+      const dx = node.x - x;
+      const dy = node.y - y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (dist < minDist) {
+        minDist = dist;
+        closest = node;
+      }
+    });
+    return closest;
+  };
+
+  d3.forceSimulation = function(nodes) {
+    return new ForceSimulation(nodes);
+  };
+
+  // Force: Link
+  d3.forceLink = function(links) {
+    let _links = links || [];
+    let _id = d => d.index;
+    let _distance = 30;
+    let _strength = 1;
+    let _nodes;
+
+    function force(alpha) {
+      _links.forEach(link => {
+        const source = typeof link.source === 'object' ? link.source : _nodes[link.source];
+        const target = typeof link.target === 'object' ? link.target : _nodes[link.target];
+        if (!source || !target) return;
+
+        let dx = target.x - source.x;
+        let dy = target.y - source.y;
+        let dist = Math.sqrt(dx * dx + dy * dy) || 1;
+        let targetDist = typeof _distance === 'function' ? _distance(link) : _distance;
+        let str = typeof _strength === 'function' ? _strength(link) : _strength;
+
+        const k = (dist - targetDist) / dist * alpha * str;
+        dx *= k;
+        dy *= k;
+
+        const sourceWeight = 1;
+        const targetWeight = 1;
+        const totalWeight = sourceWeight + targetWeight;
+
+        target.vx -= dx * sourceWeight / totalWeight;
+        target.vy -= dy * sourceWeight / totalWeight;
+        source.vx += dx * targetWeight / totalWeight;
+        source.vy += dy * targetWeight / totalWeight;
+      });
+    }
+
+    force.initialize = function(nodes) {
+      _nodes = nodes;
+      const nodeById = new Map(nodes.map(d => [_id(d), d]));
+      _links.forEach(link => {
+        if (typeof link.source !== 'object') link.source = nodeById.get(link.source);
+        if (typeof link.target !== 'object') link.target = nodeById.get(link.target);
+      });
+    };
+
+    force.links = function(links) {
+      if (links === undefined) return _links;
+      _links = links;
+      return force;
+    };
+
+    force.id = function(id) {
+      if (id === undefined) return _id;
+      _id = id;
+      return force;
+    };
+
+    force.distance = function(distance) {
+      if (distance === undefined) return _distance;
+      _distance = typeof distance === 'function' ? distance : +distance;
+      return force;
+    };
+
+    force.strength = function(strength) {
+      if (strength === undefined) return _strength;
+      _strength = typeof strength === 'function' ? strength : +strength;
+      return force;
+    };
+
+    return force;
+  };
+
+  // Force: Many-Body (charge)
+  d3.forceManyBody = function() {
+    let _strength = -30;
+    let _distanceMin = 1;
+    let _distanceMax = Infinity;
+    let _nodes;
+
+    function force(alpha) {
+      for (let i = 0; i < _nodes.length; i++) {
+        for (let j = i + 1; j < _nodes.length; j++) {
+          const nodeI = _nodes[i];
+          const nodeJ = _nodes[j];
+
+          let dx = nodeJ.x - nodeI.x;
+          let dy = nodeJ.y - nodeI.y;
+          let dist = Math.sqrt(dx * dx + dy * dy);
+
+          if (dist < _distanceMin) dist = _distanceMin;
+          if (dist > _distanceMax) continue;
+
+          const str = typeof _strength === 'function' ? _strength(nodeI) : _strength;
+          const k = str * alpha / (dist * dist);
+
+          dx *= k;
+          dy *= k;
+
+          nodeJ.vx += dx;
+          nodeJ.vy += dy;
+          nodeI.vx -= dx;
+          nodeI.vy -= dy;
+        }
+      }
+    }
+
+    force.initialize = function(nodes) {
+      _nodes = nodes;
+    };
+
+    force.strength = function(strength) {
+      if (strength === undefined) return _strength;
+      _strength = typeof strength === 'function' ? strength : +strength;
+      return force;
+    };
+
+    force.distanceMin = function(distance) {
+      if (distance === undefined) return _distanceMin;
+      _distanceMin = +distance;
+      return force;
+    };
+
+    force.distanceMax = function(distance) {
+      if (distance === undefined) return _distanceMax;
+      _distanceMax = +distance;
+      return force;
+    };
+
+    return force;
+  };
+
+  // Force: Center
+  d3.forceCenter = function(x, y) {
+    let _x = x || 0;
+    let _y = y || 0;
+    let _strength = 1;
+    let _nodes;
+
+    function force(alpha) {
+      let sx = 0, sy = 0;
+      _nodes.forEach(node => {
+        sx += node.x;
+        sy += node.y;
+      });
+      sx = (sx / _nodes.length - _x) * _strength;
+      sy = (sy / _nodes.length - _y) * _strength;
+      _nodes.forEach(node => {
+        node.x -= sx;
+        node.y -= sy;
+      });
+    }
+
+    force.initialize = function(nodes) {
+      _nodes = nodes;
+    };
+
+    force.x = function(x) {
+      if (x === undefined) return _x;
+      _x = +x;
+      return force;
+    };
+
+    force.y = function(y) {
+      if (y === undefined) return _y;
+      _y = +y;
+      return force;
+    };
+
+    force.strength = function(strength) {
+      if (strength === undefined) return _strength;
+      _strength = +strength;
+      return force;
+    };
+
+    return force;
+  };
+
+  // Force: Collide
+  d3.forceCollide = function(radius) {
+    let _radius = radius || 1;
+    let _strength = 1;
+    let _iterations = 1;
+    let _nodes;
+
+    function force(alpha) {
+      for (let iter = 0; iter < _iterations; iter++) {
+        for (let i = 0; i < _nodes.length; i++) {
+          for (let j = i + 1; j < _nodes.length; j++) {
+            const nodeI = _nodes[i];
+            const nodeJ = _nodes[j];
+
+            let dx = nodeJ.x - nodeI.x;
+            let dy = nodeJ.y - nodeI.y;
+            let dist = Math.sqrt(dx * dx + dy * dy) || 1;
+
+            const ri = typeof _radius === 'function' ? _radius(nodeI) : _radius;
+            const rj = typeof _radius === 'function' ? _radius(nodeJ) : _radius;
+            const minDist = ri + rj;
+
+            if (dist < minDist) {
+              const k = (minDist - dist) / dist * _strength * 0.5;
+              dx *= k;
+              dy *= k;
+              nodeJ.x += dx;
+              nodeJ.y += dy;
+              nodeI.x -= dx;
+              nodeI.y -= dy;
+            }
+          }
+        }
+      }
+    }
+
+    force.initialize = function(nodes) {
+      _nodes = nodes;
+    };
+
+    force.radius = function(radius) {
+      if (radius === undefined) return _radius;
+      _radius = typeof radius === 'function' ? radius : +radius;
+      return force;
+    };
+
+    force.strength = function(strength) {
+      if (strength === undefined) return _strength;
+      _strength = +strength;
+      return force;
+    };
+
+    force.iterations = function(iterations) {
+      if (iterations === undefined) return _iterations;
+      _iterations = +iterations;
+      return force;
+    };
+
+    return force;
+  };
+
+  // Force: X positioning
+  d3.forceX = function(x) {
+    let _x = x || 0;
+    let _strength = 0.1;
+    let _nodes;
+
+    function force(alpha) {
+      _nodes.forEach(node => {
+        const targetX = typeof _x === 'function' ? _x(node) : _x;
+        node.vx += (targetX - node.x) * _strength * alpha;
+      });
+    }
+
+    force.initialize = function(nodes) {
+      _nodes = nodes;
+    };
+
+    force.x = function(x) {
+      if (x === undefined) return _x;
+      _x = typeof x === 'function' ? x : +x;
+      return force;
+    };
+
+    force.strength = function(strength) {
+      if (strength === undefined) return _strength;
+      _strength = +strength;
+      return force;
+    };
+
+    return force;
+  };
+
+  // Force: Y positioning
+  d3.forceY = function(y) {
+    let _y = y || 0;
+    let _strength = 0.1;
+    let _nodes;
+
+    function force(alpha) {
+      _nodes.forEach(node => {
+        const targetY = typeof _y === 'function' ? _y(node) : _y;
+        node.vy += (targetY - node.y) * _strength * alpha;
+      });
+    }
+
+    force.initialize = function(nodes) {
+      _nodes = nodes;
+    };
+
+    force.y = function(y) {
+      if (y === undefined) return _y;
+      _y = typeof y === 'function' ? y : +y;
+      return force;
+    };
+
+    force.strength = function(strength) {
+      if (strength === undefined) return _strength;
+      _strength = +strength;
+      return force;
+    };
+
+    return force;
+  };
+
+  // Zoom behavior
+  function ZoomBehavior() {
+    this._scaleExtent = [0.1, 10];
+    this._translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]];
+    this._transform = {k: 1, x: 0, y: 0};
+    this._listeners = {};
+    this._filter = () => true;
+  }
+
+  ZoomBehavior.prototype.apply = function(selection) {
+    const self = this;
+    selection.each(function() {
+      const element = this;
+
+      // Wheel zoom
+      element.addEventListener('wheel', function(event) {
+        if (!self._filter(event)) return;
+        event.preventDefault();
+        const rect = element.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        const k0 = self._transform.k;
+        const k1 = k0 * Math.pow(2, -event.deltaY * 0.002);
+        const k = Math.max(self._scaleExtent[0], Math.min(self._scaleExtent[1], k1));
+
+        // Zoom towards mouse position
+        self._transform.x += (x - self._transform.x) * (1 - k / k0);
+        self._transform.y += (y - self._transform.y) * (1 - k / k0);
+        self._transform.k = k;
+
+        self._emit('zoom', event);
+      });
+
+      // Pan with mouse drag
+      let dragging = false;
+      let startX, startY, startTx, startTy;
+
+      element.addEventListener('mousedown', function(event) {
+        if (!self._filter(event)) return;
+        if (event.button !== 0) return;
+        dragging = true;
+        startX = event.clientX;
+        startY = event.clientY;
+        startTx = self._transform.x;
+        startTy = self._transform.y;
+        event.preventDefault();
+      });
+
+      document.addEventListener('mousemove', function(event) {
+        if (!dragging) return;
+        self._transform.x = startTx + (event.clientX - startX);
+        self._transform.y = startTy + (event.clientY - startY);
+        self._emit('zoom', event);
+      });
+
+      document.addEventListener('mouseup', function() {
+        dragging = false;
+      });
+
+      // Touch support
+      element.addEventListener('touchstart', function(event) {
+        if (!self._filter(event)) return;
+        if (event.touches.length === 1) {
+          dragging = true;
+          startX = event.touches[0].clientX;
+          startY = event.touches[0].clientY;
+          startTx = self._transform.x;
+          startTy = self._transform.y;
+        }
+      }, {passive: true});
+
+      element.addEventListener('touchmove', function(event) {
+        if (!dragging || event.touches.length !== 1) return;
+        self._transform.x = startTx + (event.touches[0].clientX - startX);
+        self._transform.y = startTy + (event.touches[0].clientY - startY);
+        self._emit('zoom', event);
+      }, {passive: true});
+
+      element.addEventListener('touchend', function() {
+        dragging = false;
+      });
+    });
+    return this;
+  };
+
+  ZoomBehavior.prototype.transform = function(selection, transform) {
+    if (transform) {
+      this._transform = {k: transform.k, x: transform.x, y: transform.y};
+      this._emit('zoom', null);
+    }
+    return this;
+  };
+
+  ZoomBehavior.prototype.scaleExtent = function(extent) {
+    if (extent === undefined) return this._scaleExtent;
+    this._scaleExtent = extent;
+    return this;
+  };
+
+  ZoomBehavior.prototype.translateExtent = function(extent) {
+    if (extent === undefined) return this._translateExtent;
+    this._translateExtent = extent;
+    return this;
+  };
+
+  ZoomBehavior.prototype.on = function(type, listener) {
+    const eventType = type.split('.')[0];
+    if (listener === undefined) {
+      return this._listeners[eventType] || [];
+    }
+    if (!this._listeners[eventType]) {
+      this._listeners[eventType] = [];
+    }
+    this._listeners[eventType].push(listener);
+    return this;
+  };
+
+  ZoomBehavior.prototype._emit = function(type, event) {
+    const listeners = this._listeners[type] || [];
+    const self = this;
+    listeners.forEach(fn => {
+      fn.call(null, {
+        type: type,
+        transform: self._transform,
+        sourceEvent: event
+      });
+    });
+  };
+
+  ZoomBehavior.prototype.scaleTo = function(selection, k) {
+    this._transform.k = Math.max(this._scaleExtent[0], Math.min(this._scaleExtent[1], k));
+    this._emit('zoom', null);
+    return this;
+  };
+
+  ZoomBehavior.prototype.scaleBy = function(selection, k) {
+    return this.scaleTo(selection, this._transform.k * k);
+  };
+
+  ZoomBehavior.prototype.translateTo = function(selection, x, y) {
+    this._transform.x = x;
+    this._transform.y = y;
+    this._emit('zoom', null);
+    return this;
+  };
+
+  ZoomBehavior.prototype.translateBy = function(selection, x, y) {
+    this._transform.x += x;
+    this._transform.y += y;
+    this._emit('zoom', null);
+    return this;
+  };
+
+  ZoomBehavior.prototype.filter = function(filter) {
+    if (filter === undefined) return this._filter;
+    this._filter = filter;
+    return this;
+  };
+
+  d3.zoom = function() {
+    const behavior = new ZoomBehavior();
+    const fn = function(selection) {
+      behavior.apply(selection);
+    };
+    Object.keys(ZoomBehavior.prototype).forEach(key => {
+      fn[key] = behavior[key].bind(behavior);
+    });
+    return fn;
+  };
+
+  d3.zoomIdentity = {k: 1, x: 0, y: 0};
+
+  d3.zoomTransform = function(node) {
+    return node.__zoom || d3.zoomIdentity;
+  };
+
+  // Drag behavior
+  function DragBehavior() {
+    this._subject = null;
+    this._container = null;
+    this._listeners = {};
+    this._filter = () => true;
+  }
+
+  DragBehavior.prototype.apply = function(selection) {
+    const self = this;
+    selection.each(function() {
+      const element = this;
+
+      element.addEventListener('mousedown', function(event) {
+        if (!self._filter(event)) return;
+        if (event.button !== 0) return;
+        event.stopPropagation();
+
+        const subject = self._subject
+          ? self._subject.call(element, event, element.__data__)
+          : element.__data__;
+
+        if (subject == null) return;
+
+        const emitEvent = {
+          type: 'start',
+          subject: subject,
+          x: event.clientX,
+          y: event.clientY,
+          dx: 0,
+          dy: 0,
+          active: 1,
+          sourceEvent: event
+        };
+
+        self._emit('start', emitEvent);
+
+        let lastX = event.clientX;
+        let lastY = event.clientY;
+
+        function onMouseMove(event) {
+          const moveEvent = {
+            type: 'drag',
+            subject: subject,
+            x: event.clientX,
+            y: event.clientY,
+            dx: event.clientX - lastX,
+            dy: event.clientY - lastY,
+            active: 1,
+            sourceEvent: event
+          };
+          lastX = event.clientX;
+          lastY = event.clientY;
+          self._emit('drag', moveEvent);
+        }
+
+        function onMouseUp(event) {
+          document.removeEventListener('mousemove', onMouseMove);
+          document.removeEventListener('mouseup', onMouseUp);
+
+          const endEvent = {
+            type: 'end',
+            subject: subject,
+            x: event.clientX,
+            y: event.clientY,
+            dx: 0,
+            dy: 0,
+            active: 0,
+            sourceEvent: event
+          };
+          self._emit('end', endEvent);
+        }
+
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+      });
+
+      // Touch support
+      element.addEventListener('touchstart', function(event) {
+        if (!self._filter(event)) return;
+        if (event.touches.length !== 1) return;
+        event.stopPropagation();
+
+        const touch = event.touches[0];
+        const subject = self._subject
+          ? self._subject.call(element, event, element.__data__)
+          : element.__data__;
+
+        if (subject == null) return;
+
+        const emitEvent = {
+          type: 'start',
+          subject: subject,
+          x: touch.clientX,
+          y: touch.clientY,
+          dx: 0,
+          dy: 0,
+          active: 1,
+          sourceEvent: event
+        };
+
+        self._emit('start', emitEvent);
+
+        let lastX = touch.clientX;
+        let lastY = touch.clientY;
+
+        function onTouchMove(event) {
+          if (event.touches.length !== 1) return;
+          const touch = event.touches[0];
+          const moveEvent = {
+            type: 'drag',
+            subject: subject,
+            x: touch.clientX,
+            y: touch.clientY,
+            dx: touch.clientX - lastX,
+            dy: touch.clientY - lastY,
+            active: 1,
+            sourceEvent: event
+          };
+          lastX = touch.clientX;
+          lastY = touch.clientY;
+          self._emit('drag', moveEvent);
+        }
+
+        function onTouchEnd(event) {
+          element.removeEventListener('touchmove', onTouchMove);
+          element.removeEventListener('touchend', onTouchEnd);
+
+          const endEvent = {
+            type: 'end',
+            subject: subject,
+            x: lastX,
+            y: lastY,
+            dx: 0,
+            dy: 0,
+            active: 0,
+            sourceEvent: event
+          };
+          self._emit('end', endEvent);
+        }
+
+        element.addEventListener('touchmove', onTouchMove, {passive: true});
+        element.addEventListener('touchend', onTouchEnd);
+      }, {passive: true});
+    });
+    return this;
+  };
+
+  DragBehavior.prototype.subject = function(subject) {
+    if (subject === undefined) return this._subject;
+    this._subject = subject;
+    return this;
+  };
+
+  DragBehavior.prototype.container = function(container) {
+    if (container === undefined) return this._container;
+    this._container = container;
+    return this;
+  };
+
+  DragBehavior.prototype.filter = function(filter) {
+    if (filter === undefined) return this._filter;
+    this._filter = filter;
+    return this;
+  };
+
+  DragBehavior.prototype.on = function(type, listener) {
+    const eventType = type.split('.')[0];
+    if (listener === undefined) {
+      return this._listeners[eventType] || [];
+    }
+    if (!this._listeners[eventType]) {
+      this._listeners[eventType] = [];
+    }
+    this._listeners[eventType].push(listener);
+    return this;
+  };
+
+  DragBehavior.prototype._emit = function(type, event) {
+    const listeners = this._listeners[type] || [];
+    listeners.forEach(fn => fn(event));
+  };
+
+  d3.drag = function() {
+    const behavior = new DragBehavior();
+    const fn = function(selection) {
+      behavior.apply(selection);
+    };
+    Object.keys(DragBehavior.prototype).forEach(key => {
+      fn[key] = behavior[key].bind(behavior);
+    });
+    return fn;
+  };
+
+  // Utility functions
+  d3.extent = function(values, accessor) {
+    let min, max;
+    for (const value of values) {
+      const v = accessor ? accessor(value) : value;
+      if (v != null) {
+        if (min === undefined) {
+          min = max = v;
+        } else {
+          if (v < min) min = v;
+          if (v > max) max = v;
+        }
+      }
+    }
+    return [min, max];
+  };
+
+  d3.min = function(values, accessor) {
+    let min;
+    for (const value of values) {
+      const v = accessor ? accessor(value) : value;
+      if (v != null && (min === undefined || v < min)) {
+        min = v;
+      }
+    }
+    return min;
+  };
+
+  d3.max = function(values, accessor) {
+    let max;
+    for (const value of values) {
+      const v = accessor ? accessor(value) : value;
+      if (v != null && (max === undefined || v > max)) {
+        max = v;
+      }
+    }
+    return max;
+  };
+
+  // Scale functions (basic linear scale)
+  d3.scaleLinear = function() {
+    let _domain = [0, 1];
+    let _range = [0, 1];
+
+    function scale(x) {
+      const t = (_domain[1] - _domain[0]) || 1;
+      const normalized = (x - _domain[0]) / t;
+      return _range[0] + normalized * (_range[1] - _range[0]);
+    }
+
+    scale.domain = function(domain) {
+      if (domain === undefined) return _domain;
+      _domain = domain;
+      return scale;
+    };
+
+    scale.range = function(range) {
+      if (range === undefined) return _range;
+      _range = range;
+      return scale;
+    };
+
+    scale.invert = function(y) {
+      const t = (_range[1] - _range[0]) || 1;
+      const normalized = (y - _range[0]) / t;
+      return _domain[0] + normalized * (_domain[1] - _domain[0]);
+    };
+
+    return scale;
+  };
+
+  // Color scale (ordinal)
+  d3.scaleOrdinal = function(range) {
+    const _range = range || [];
+    const _domain = [];
+    const _index = new Map();
+
+    function scale(d) {
+      let i = _index.get(d);
+      if (i === undefined) {
+        _index.set(d, i = _domain.push(d) - 1);
+      }
+      return _range[i % _range.length];
+    }
+
+    scale.domain = function(domain) {
+      if (domain === undefined) return _domain.slice();
+      _domain.length = 0;
+      _index.clear();
+      for (const d of domain) {
+        if (!_index.has(d)) {
+          _index.set(d, _domain.push(d) - 1);
+        }
+      }
+      return scale;
+    };
+
+    scale.range = function(range) {
+      if (range === undefined) return _range.slice();
+      _range.length = 0;
+      _range.push(...range);
+      return scale;
+    };
+
+    return scale;
+  };
+
+  // Export d3 to global scope
+  global.d3 = d3;
+
+})(typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : this);
+`;
+
+// src/visualizer/violation-collector.ts
+import path16 from "path";
+import { createProject as createProject9 } from "@bfra.me/doc-sync";
+import { err as err7, isErr, ok as ok25 } from "@bfra.me/es/result";
+var DEFAULT_VIOLATION_COLLECTION_OPTIONS = {
+  includeInfo: true,
+  maxIssues: 1e4,
+  excludePatterns: ["**/*.test.ts", "**/*.spec.ts", "**/node_modules/**"]
+};
+async function collectVisualizationViolations(context, options = {}) {
+  const opts = {
+    ...DEFAULT_VIOLATION_COLLECTION_OPTIONS,
+    ...options
+  };
+  const { ruleEngine, packages, workspacePath, tsconfigPaths, reportProgress } = context;
+  const allIssues = [];
+  try {
+    for (const pkg of packages) {
+      reportProgress?.(`Collecting violations from ${pkg.name}...`);
+      const tsconfigPath = path16.join(pkg.packagePath, "tsconfig.json");
+      let project;
+      try {
+        project = createProject9({
+          tsConfigPath: tsconfigPath
+        });
+      } catch {
+        continue;
+      }
+      const sourceFiles = getSourceFiles(project);
+      for (const sourceFile of sourceFiles) {
+        const filePath = sourceFile.getFilePath();
+        if (shouldSkipFile2(filePath, opts.excludePatterns)) {
+          continue;
+        }
+        const ruleContext = {
+          sourceFile,
+          pkg,
+          workspacePath,
+          allPackages: packages,
+          tsconfigPaths
+        };
+        const result = await ruleEngine.evaluateFile(ruleContext);
+        if (isErr(result)) {
+          continue;
+        }
+        const issues = result.data;
+        const filteredIssues = opts.includeInfo ? issues : issues.filter((issue) => issue.severity !== "info");
+        allIssues.push(...filteredIssues);
+        if (allIssues.length >= opts.maxIssues) {
+          reportProgress?.(`Reached maximum issue limit (${opts.maxIssues})`);
+          break;
+        }
+      }
+      if (allIssues.length >= opts.maxIssues) {
+        break;
+      }
+    }
+    return ok25(allIssues);
+  } catch (error) {
+    return err7({
+      code: "TRANSFORM_FAILED",
+      message: `Error collecting violations: ${error instanceof Error ? error.message : String(error)}`
+    });
+  }
+}
+function mapIssuesToNodes(nodes, issues) {
+  const nodesByPath = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const normalizedPath = normalizePath2(node.filePath);
+    nodesByPath.set(normalizedPath, node);
+  }
+  const issuesByPath = /* @__PURE__ */ new Map();
+  for (const issue of issues) {
+    const normalizedPath = normalizePath2(issue.location.filePath);
+    const existing = issuesByPath.get(normalizedPath) ?? [];
+    existing.push(issue);
+    issuesByPath.set(normalizedPath, existing);
+  }
+  return nodes.map((node) => {
+    const normalizedPath = normalizePath2(node.filePath);
+    const nodeIssues = issuesByPath.get(normalizedPath) ?? [];
+    if (nodeIssues.length === 0) {
+      return node;
+    }
+    const violations = nodeIssues.map((issue, index) => ({
+      id: `${issue.id}-${index}`,
+      message: issue.description,
+      severity: issue.severity,
+      ruleId: issue.id
+    }));
+    const severities = violations.map((v) => v.severity);
+    const highestSeverity = getHighestSeverity(severities);
+    return {
+      ...node,
+      violations,
+      highestViolationSeverity: highestSeverity
+    };
+  });
+}
+function getSourceFiles(project) {
+  return project.getSourceFiles().filter((sf) => {
+    const filePath = sf.getFilePath();
+    return (filePath.endsWith(".ts") || filePath.endsWith(".tsx") || filePath.endsWith(".js") || filePath.endsWith(".jsx")) && !filePath.includes("node_modules") && !filePath.includes(".test.") && !filePath.includes(".spec.");
+  });
+}
+function shouldSkipFile2(filePath, excludePatterns) {
+  if (excludePatterns.length === 0) {
+    return false;
+  }
+  const normalized = normalizePath2(filePath);
+  return excludePatterns.some((pattern) => {
+    const normalizedPattern = pattern.replaceAll("\\", "/").toLowerCase();
+    return normalized.includes(normalizedPattern.replaceAll("**", "").replaceAll("*", ""));
+  });
+}
+function normalizePath2(filePath) {
+  return filePath.replaceAll("\\", "/").toLowerCase();
+}
+
 export {
   getSourceFile,
   parseSourceFiles,
@@ -7117,6 +10780,30 @@ export {
   getRelativePath,
   createConsoleReporter,
   createJsonReporter,
-  createMarkdownReporter
+  createMarkdownReporter,
+  DEFAULT_VISUALIZER_OPTIONS,
+  SEVERITY_ORDER2 as SEVERITY_ORDER,
+  getHighestSeverity,
+  DEFAULT_BUILD_OPTIONS,
+  transformNodeToVisualization,
+  transformEdgeToVisualization,
+  transformCycleToVisualization,
+  buildVisualizationData,
+  DEFAULT_HTML_RENDER_OPTIONS,
+  sanitizeHtml,
+  sanitizeJsString,
+  sanitizeFilePath,
+  sanitizeVisualizationData,
+  renderVisualizationHtml,
+  exportVisualizationJson,
+  estimateHtmlSize,
+  isWithinSizeLimit,
+  exportVisualizationMermaid,
+  exportCycleMermaid,
+  D3_CDN_URLS,
+  D3_VERSION,
+  DEFAULT_VIOLATION_COLLECTION_OPTIONS,
+  collectVisualizationViolations,
+  mapIssuesToNodes
 };
-//# sourceMappingURL=chunk-WOJ4C7N7.js.map
+//# sourceMappingURL=chunk-4V5KYQED.js.map