@countermeasure-platform/web-components 0.2.0

package/dist/visualization/mermaid-diagram/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/visualization/mermaid-diagram/index.ts"],"sourcesContent":["/**\n * MermaidDiagram - Renders Mermaid diagram definitions as interactive SVG\n * @countermeasure/web-components/visualization/mermaid-diagram\n *\n * Supports all Mermaid diagram types:\n * flowchart, sequenceDiagram, classDiagram, stateDiagram, erDiagram,\n * gantt, pie, journey, gitGraph, mindmap, timeline, sankey,\n * quadrantChart, xychart, block\n */\n\nimport type mermaid from 'mermaid'\nimport type { MermaidDiagramConfig, MermaidTheme } from './types'\nimport { resolveContainer, uniqueId } from '../../primitives/utils'\n\nexport type { MermaidDiagramConfig, MermaidDiagramType, MermaidTheme } from './types'\n\n/** Cached mermaid library promise for lazy loading */\ninterface MermaidModule {\n  default: typeof mermaid\n}\nlet mermaidPromise: Promise<MermaidModule> | null = null\n\n/** Counter for unique diagram IDs */\nlet diagramCounter = 0\n\n/**\n * Lazy-load the mermaid library\n */\nasync function loadMermaid(): Promise<MermaidModule> {\n  if (mermaidPromise !== null) {\n    return mermaidPromise\n  }\n\n  mermaidPromise = import('mermaid').then(m => {\n    // Initialize mermaid with secure defaults\n    m.default.initialize({\n      startOnLoad: false,\n      securityLevel: 'strict',\n      theme: 'base',\n      fontFamily: 'inherit',\n      logLevel: 'error',\n    })\n    return m\n  })\n\n  return mermaidPromise\n}\n\n/**\n * Get theme variables from CounterMeasure design tokens\n */\nfunction getThemeVariables(theme: MermaidTheme): Record<string, string> {\n  const isDark =\n    theme === 'dark' || (theme === 'auto' && document.documentElement.classList.contains('dark'))\n\n  // Only read CSS variables in 'auto' mode where page theme matches mermaid theme.\n  // For explicit 'light'/'dark', use standalone color values to avoid mismatches\n  // when the mermaid theme differs from the page theme.\n  const useVars = theme === 'auto'\n\n  const root = useVars ? getComputedStyle(document.documentElement) : null\n\n  // Helper to get HSL color from CSS variable (only when in auto mode)\n  const getColor = (varName: string, fallback: string): string => {\n    if (root !== null) {\n      const value = root.getPropertyValue(varName).trim()\n      if (value !== '') {\n        return `hsl(${value})`\n      }\n    }\n    return fallback\n  }\n\n  if (isDark) {\n    return {\n      primaryColor: getColor('--primary', '#0ea5e9'),\n      primaryTextColor: getColor('--primary-foreground', '#ffffff'),\n      primaryBorderColor: getColor('--border', '#374151'),\n      secondaryColor: getColor('--secondary', '#1f2937'),\n      secondaryTextColor: getColor('--secondary-foreground', '#f3f4f6'),\n      secondaryBorderColor: getColor('--border', '#374151'),\n      tertiaryColor: getColor('--muted', '#374151'),\n      tertiaryTextColor: getColor('--muted-foreground', '#9ca3af'),\n      tertiaryBorderColor: getColor('--border', '#374151'),\n      lineColor: getColor('--border', '#374151'),\n      textColor: getColor('--foreground', '#f9fafb'),\n      mainBkg: getColor('--background', '#111827'),\n      nodeBkg: getColor('--card', '#1f2937'),\n      nodeBorder: getColor('--border', '#374151'),\n      clusterBkg: getColor('--muted', '#1f2937'),\n      clusterBorder: getColor('--border', '#374151'),\n      defaultLinkColor: getColor('--primary', '#0ea5e9'),\n      titleColor: getColor('--foreground', '#f9fafb'),\n      edgeLabelBackground: getColor('--background', '#111827'),\n      actorBkg: getColor('--card', '#1f2937'),\n      actorBorder: getColor('--border', '#374151'),\n      actorTextColor: getColor('--foreground', '#f9fafb'),\n      actorLineColor: getColor('--border', '#374151'),\n      signalColor: getColor('--foreground', '#f9fafb'),\n      signalTextColor: getColor('--foreground', '#f9fafb'),\n      labelBoxBkgColor: getColor('--card', '#1f2937'),\n      labelBoxBorderColor: getColor('--border', '#374151'),\n      labelTextColor: getColor('--foreground', '#f9fafb'),\n      loopTextColor: getColor('--foreground', '#f9fafb'),\n      noteBorderColor: getColor('--border', '#374151'),\n      noteBkgColor: getColor('--muted', '#374151'),\n      noteTextColor: getColor('--muted-foreground', '#9ca3af'),\n      activationBorderColor: getColor('--primary', '#0ea5e9'),\n      activationBkgColor: getColor('--primary', '#0ea5e9'),\n      sequenceNumberColor: getColor('--primary-foreground', '#ffffff'),\n      sectionBkgColor: getColor('--muted', '#1f2937'),\n      altSectionBkgColor: getColor('--card', '#1f2937'),\n      sectionBkgColor2: getColor('--muted', '#374151'),\n      taskBorderColor: getColor('--primary', '#0ea5e9'),\n      taskBkgColor: getColor('--primary', '#0ea5e9'),\n      taskTextColor: getColor('--primary-foreground', '#ffffff'),\n      taskTextLightColor: getColor('--primary-foreground', '#ffffff'),\n      taskTextOutsideColor: getColor('--foreground', '#f9fafb'),\n      taskTextClickableColor: getColor('--primary', '#0ea5e9'),\n      activeTaskBorderColor: getColor('--primary', '#0ea5e9'),\n      activeTaskBkgColor: getColor('--primary', '#0ea5e9'),\n      gridColor: getColor('--border', '#374151'),\n      doneTaskBkgColor: getColor('--muted', '#374151'),\n      doneTaskBorderColor: getColor('--border', '#374151'),\n      critBorderColor: getColor('--destructive', '#ef4444'),\n      critBkgColor: getColor('--destructive', '#ef4444'),\n      todayLineColor: getColor('--primary', '#0ea5e9'),\n      personBorder: getColor('--border', '#374151'),\n      personBkg: getColor('--card', '#1f2937'),\n    }\n  }\n\n  // Light theme — primaryTextColor must be dark since mermaid lightens\n  // primaryColor for node fills, making white text invisible\n  return {\n    primaryColor: getColor('--primary', '#0ea5e9'),\n    primaryTextColor: getColor('--foreground', '#1e293b'),\n    primaryBorderColor: getColor('--border', '#cbd5e1'),\n    secondaryColor: getColor('--secondary', '#f1f5f9'),\n    secondaryTextColor: getColor('--secondary-foreground', '#1e293b'),\n    secondaryBorderColor: getColor('--border', '#cbd5e1'),\n    tertiaryColor: getColor('--muted', '#f8fafc'),\n    tertiaryTextColor: getColor('--muted-foreground', '#64748b'),\n    tertiaryBorderColor: getColor('--border', '#cbd5e1'),\n    lineColor: getColor('--border', '#94a3b8'),\n    textColor: getColor('--foreground', '#1e293b'),\n    mainBkg: getColor('--background', '#ffffff'),\n    nodeBkg: getColor('--card', '#f8fafc'),\n    nodeBorder: getColor('--border', '#cbd5e1'),\n    clusterBkg: getColor('--muted', '#f9fafb'),\n    clusterBorder: getColor('--border', '#e5e7eb'),\n    defaultLinkColor: getColor('--primary', '#0ea5e9'),\n    titleColor: getColor('--foreground', '#111827'),\n    edgeLabelBackground: getColor('--background', '#ffffff'),\n    actorBkg: getColor('--card', '#ffffff'),\n    actorBorder: getColor('--border', '#e5e7eb'),\n    actorTextColor: getColor('--foreground', '#111827'),\n    actorLineColor: getColor('--border', '#e5e7eb'),\n    signalColor: getColor('--foreground', '#111827'),\n    signalTextColor: getColor('--foreground', '#111827'),\n    labelBoxBkgColor: getColor('--card', '#ffffff'),\n    labelBoxBorderColor: getColor('--border', '#e5e7eb'),\n    labelTextColor: getColor('--foreground', '#111827'),\n    loopTextColor: getColor('--foreground', '#111827'),\n    noteBorderColor: getColor('--border', '#e5e7eb'),\n    noteBkgColor: getColor('--muted', '#f9fafb'),\n    noteTextColor: getColor('--muted-foreground', '#6b7280'),\n    activationBorderColor: getColor('--primary', '#0ea5e9'),\n    activationBkgColor: getColor('--primary', '#0ea5e9'),\n    sequenceNumberColor: getColor('--primary-foreground', '#ffffff'),\n    sectionBkgColor: getColor('--muted', '#f9fafb'),\n    altSectionBkgColor: getColor('--card', '#ffffff'),\n    sectionBkgColor2: getColor('--muted', '#f3f4f6'),\n    taskBorderColor: getColor('--primary', '#0ea5e9'),\n    taskBkgColor: getColor('--primary', '#0ea5e9'),\n    taskTextColor: getColor('--primary-foreground', '#ffffff'),\n    taskTextLightColor: getColor('--primary-foreground', '#ffffff'),\n    taskTextOutsideColor: getColor('--foreground', '#111827'),\n    taskTextClickableColor: getColor('--primary', '#0ea5e9'),\n    activeTaskBorderColor: getColor('--primary', '#0ea5e9'),\n    activeTaskBkgColor: getColor('--primary', '#0ea5e9'),\n    gridColor: getColor('--border', '#e5e7eb'),\n    doneTaskBkgColor: getColor('--muted', '#f3f4f6'),\n    doneTaskBorderColor: getColor('--border', '#e5e7eb'),\n    critBorderColor: getColor('--destructive', '#ef4444'),\n    critBkgColor: getColor('--destructive', '#ef4444'),\n    todayLineColor: getColor('--primary', '#0ea5e9'),\n    personBorder: getColor('--border', '#e5e7eb'),\n    personBkg: getColor('--card', '#ffffff'),\n  }\n}\n\nexport class MermaidDiagram {\n  public readonly el: HTMLDivElement\n\n  private readonly diagramId: string\n  private readonly theme: MermaidTheme\n  private readonly onRenderStart: (() => void) | undefined\n  private readonly onRenderComplete: ((svg: SVGElement) => void) | undefined\n  private readonly onRenderError: ((error: Error) => void) | undefined\n  private content: string\n  private svgElement: SVGElement | null = null\n  private destroyed = false\n\n  constructor(config: MermaidDiagramConfig) {\n    diagramCounter += 1\n    this.diagramId = uniqueId(`cmm-mermaid-${String(diagramCounter)}`)\n    this.content = config.content\n    this.theme = config.theme ?? 'auto'\n    this.onRenderStart = config.onRenderStart\n    this.onRenderComplete = config.onRenderComplete\n    this.onRenderError = config.onRenderError\n\n    // Create container element\n    this.el = document.createElement('div')\n    this.el.id = this.diagramId\n    this.el.className = this.buildClassName(config.className)\n\n    // Show loading state\n    this.showLoading()\n\n    // Mount to container\n    const parent = resolveContainer(config.container)\n    parent.appendChild(this.el)\n\n    // Start rendering\n    void this.render()\n  }\n\n  /**\n   * Update the diagram content and re-render\n   */\n  async update(content: string): Promise<void> {\n    if (this.isDestroyed()) return\n\n    this.content = content\n    this.showLoading()\n    await this.render()\n  }\n\n  /**\n   * Remove the diagram from DOM and clean up\n   */\n  destroy(): void {\n    this.destroyed = true\n    this.svgElement = null\n    this.el.remove()\n  }\n\n  /**\n   * Get the current SVG element (if rendered)\n   */\n  getSvg(): SVGElement | null {\n    return this.svgElement\n  }\n\n  /**\n   * Export the diagram as SVG string\n   */\n  toSvgString(): string | null {\n    if (this.svgElement === null) return null\n    return this.svgElement.outerHTML\n  }\n\n  /**\n   * Export the diagram as a data URL (for download)\n   */\n  toDataUrl(): string | null {\n    const svgString = this.toSvgString()\n    if (svgString === null) return null\n\n    const encoded = encodeURIComponent(svgString)\n    return `data:image/svg+xml;charset=utf-8,${encoded}`\n  }\n\n  private async render(): Promise<void> {\n    if (this.isDestroyed()) return\n\n    this.onRenderStart?.()\n\n    try {\n      const mermaid = await loadMermaid()\n\n      if (this.isDestroyed()) return\n\n      // Configure theme for this render\n      const themeVariables = getThemeVariables(this.theme)\n      mermaid.default.initialize({\n        startOnLoad: false,\n        securityLevel: 'strict',\n        theme: 'base',\n        themeVariables,\n        fontFamily: 'inherit',\n        logLevel: 'error',\n      })\n\n      // Generate unique ID for this render\n      const renderId = `${this.diagramId}-svg`\n\n      // Render the diagram\n      const { svg } = await mermaid.default.render(renderId, this.content)\n\n      if (this.isDestroyed()) return\n\n      // Clear loading state and insert SVG\n      this.el.innerHTML = ''\n      this.el.innerHTML = svg\n\n      // Get the SVG element\n      const svgEl = this.el.querySelector('svg')\n      if (svgEl !== null) {\n        this.svgElement = svgEl\n        svgEl.classList.add('cmm-mermaid-diagram__svg')\n\n        // Make responsive\n        svgEl.removeAttribute('height')\n        svgEl.style.maxWidth = '100%'\n        svgEl.style.height = 'auto'\n\n        this.onRenderComplete?.(svgEl)\n      }\n    } catch (error) {\n      if (this.isDestroyed()) return\n\n      const err = error instanceof Error ? error : new Error(String(error))\n      this.showError(err)\n      this.onRenderError?.(err)\n    }\n  }\n\n  private showLoading(): void {\n    this.el.innerHTML = `\n      <div class=\"cmm-mermaid-diagram__loading\">\n        <div class=\"cmm-mermaid-diagram__spinner\"></div>\n        <span class=\"cmm-mermaid-diagram__loading-text\">Rendering diagram...</span>\n      </div>\n    `\n  }\n\n  private showError(error: Error): void {\n    const escapedMessage = this.escapeHtml(error.message)\n    this.el.innerHTML = `\n      <div class=\"cmm-mermaid-diagram__error\">\n        <div class=\"cmm-mermaid-diagram__error-icon\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n            <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n            <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n          </svg>\n        </div>\n        <div class=\"cmm-mermaid-diagram__error-title\">Failed to render diagram</div>\n        <div class=\"cmm-mermaid-diagram__error-message\">${escapedMessage}</div>\n        <pre class=\"cmm-mermaid-diagram__error-source\">${this.escapeHtml(this.content)}</pre>\n      </div>\n    `\n  }\n\n  private escapeHtml(text: string): string {\n    return text\n      .replace(/&/g, '&amp;')\n      .replace(/</g, '&lt;')\n      .replace(/>/g, '&gt;')\n      .replace(/\"/g, '&quot;')\n      .replace(/'/g, '&#039;')\n  }\n\n  private buildClassName(extra: string | undefined): string {\n    const classes = ['cmm-mermaid-diagram']\n    if (extra !== undefined) {\n      classes.push(extra)\n    }\n    return classes.join(' ')\n  }\n\n  private isDestroyed(): boolean {\n    return this.destroyed\n  }\n}\n\n/**\n * Render Mermaid content and return the SVG string (utility function)\n */\nexport async function renderMermaidToString(\n  content: string,\n  theme: MermaidTheme = 'auto'\n): Promise<string> {\n  const mermaid = await loadMermaid()\n\n  const themeVariables = getThemeVariables(theme)\n  mermaid.default.initialize({\n    startOnLoad: false,\n    securityLevel: 'strict',\n    theme: 'base',\n    themeVariables,\n    fontFamily: 'inherit',\n    logLevel: 'error',\n  })\n\n  diagramCounter += 1\n  const renderId = `cmm-mermaid-render-${String(diagramCounter)}`\n  const { svg } = await mermaid.default.render(renderId, content)\n\n  return svg\n}\n"],"mappings":"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"}

package/dist/visualization/mermaid-diagram/types.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Mermaid diagram type definitions
+ * @countermeasure/web-components/visualization/mermaid-diagram
+ */
+/** All supported Mermaid diagram types */
+export type MermaidDiagramType = 'flowchart' | 'sequenceDiagram' | 'classDiagram' | 'stateDiagram' | 'erDiagram' | 'gantt' | 'pie' | 'journey' | 'gitGraph' | 'mindmap' | 'timeline' | 'sankey' | 'quadrantChart' | 'xychart' | 'block';
+/** Theme options for Mermaid diagrams */
+export type MermaidTheme = 'light' | 'dark' | 'auto';
+/** Configuration for the MermaidDiagram component */
+export interface MermaidDiagramConfig {
+    /** Container element or CSS selector */
+    container: HTMLElement | string;
+    /** Mermaid diagram definition content */
+    content: string;
+    /** Theme to apply (default: 'auto') */
+    theme?: MermaidTheme;
+    /** Additional CSS class name */
+    className?: string;
+    /** Callback when rendering starts */
+    onRenderStart?: () => void;
+    /** Callback when rendering completes successfully */
+    onRenderComplete?: (svg: SVGElement) => void;
+    /** Callback when rendering fails */
+    onRenderError?: (error: Error) => void;
+}
+/** Internal state for the component */
+export interface MermaidDiagramState {
+    isLoading: boolean;
+    error: Error | null;
+    svg: SVGElement | null;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/visualization/mermaid-diagram/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/visualization/mermaid-diagram/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,0CAA0C;AAC1C,MAAM,MAAM,kBAAkB,GAC1B,WAAW,GACX,iBAAiB,GACjB,cAAc,GACd,cAAc,GACd,WAAW,GACX,OAAO,GACP,KAAK,GACL,SAAS,GACT,UAAU,GACV,SAAS,GACT,UAAU,GACV,QAAQ,GACR,eAAe,GACf,SAAS,GACT,OAAO,CAAA;AAEX,yCAAyC;AACzC,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAEpD,qDAAqD;AACrD,MAAM,WAAW,oBAAoB;IACnC,wCAAwC;IACxC,SAAS,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,yCAAyC;IACzC,OAAO,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAA;IAC5C,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACvC;AAED,uCAAuC;AACvC,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,GAAG,EAAE,UAAU,GAAG,IAAI,CAAA;CACvB"}

package/dist/visualization/network-graph/index.d.ts

@@ -0,0 +1,57 @@
+import { GraphEdge, GraphNode, NetworkGraphConfig } from './types';
+export type { GraphEdge, GraphNode, NetworkGraphConfig } from './types';
+export declare class NetworkGraph {
+    readonly el: HTMLDivElement;
+    private readonly graphId;
+    private readonly defaultRadius;
+    private readonly showLabels;
+    private readonly onNodeClick;
+    private readonly onEdgeClick;
+    private svg;
+    private mainGroup;
+    private defsEl;
+    private nodes;
+    private edges;
+    private simNodes;
+    private simEdges;
+    private layout;
+    private zoomable;
+    private pannable;
+    private hoveredNodeId;
+    private viewBox;
+    private isPanning;
+    private panStart;
+    private panOrigin;
+    private dragNode;
+    private dragOffset;
+    private readonly boundWheel;
+    private readonly boundMouseDown;
+    private readonly boundMouseMove;
+    private readonly boundMouseUp;
+    constructor(config: NetworkGraphConfig);
+    /** Replace all data and re-render */
+    update(nodes: GraphNode[], edges: GraphEdge[]): void;
+    /** Switch layout algorithm and re-render */
+    setLayout(layout: 'force' | 'circular' | 'grid'): void;
+    /** Fit all content in viewport */
+    zoomToFit(): void;
+    /** Clean up and remove */
+    destroy(): void;
+    private buildSimulation;
+    private applyLayout;
+    private forceLayout;
+    private circularLayout;
+    private gridLayout;
+    private renderGraph;
+    private renderNode;
+    private renderEdge;
+    private createArrowMarker;
+    private applyViewBox;
+    private handleWheel;
+    private handleMouseDown;
+    private handleMouseMove;
+    private handleMouseUp;
+    private clientToSvg;
+    private buildClassName;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/visualization/network-graph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/visualization/network-graph/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGvE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAoDvE,qBAAa,YAAY;IACvB,SAAgB,EAAE,EAAE,cAAc,CAAA;IAElC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAQ;IAChC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAQ;IACtC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAS;IACpC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAyC;IACrE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAyC;IACrE,OAAO,CAAC,GAAG,CAAe;IAC1B,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,QAAQ,CAAgB;IAChC,OAAO,CAAC,QAAQ,CAAgB;IAChC,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,aAAa,CAAsB;IAG3C,OAAO,CAAC,OAAO,CAAgD;IAC/D,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,SAAS,CAAiB;IAGlC,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,UAAU,CAAiB;IAGnC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAyB;IACpD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAyB;IACxD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAyB;IACxD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAY;gBAE7B,MAAM,EAAE,kBAAkB;IAmEtC,qCAAqC;IACrC,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI;IAWpD,4CAA4C;IAC5C,SAAS,CAAC,MAAM,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,IAAI;IAOtD,kCAAkC;IAClC,SAAS,IAAI,IAAI;IA0BjB,0BAA0B;IAC1B,OAAO,IAAI,IAAI;IAcf,OAAO,CAAC,eAAe;IAgEvB,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,WAAW;IA4EnB,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,UAAU;IAmElB,OAAO,CAAC,UAAU;IA0DlB,OAAO,CAAC,iBAAiB;IAwBzB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,eAAe;IA+BvB,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,cAAc;CAOvB"}

package/dist/visualization/network-graph/index.js

@@ -0,0 +1,296 @@
+import { n as e, t } from "../../utils-Cn_W3h3f.js";
+//#region src/visualization/network-graph/index.ts
+var n = "http://www.w3.org/2000/svg", r = 20, i = 300, a = 5e3, o = .005, s = .01, c = .9, l = 8, u = [
+	"#3b82f6",
+	"#ef4444",
+	"#10b981",
+	"#f59e0b",
+	"#8b5cf6",
+	"#ec4899",
+	"#06b6d4",
+	"#f97316",
+	"#14b8a6",
+	"#6366f1"
+], d = class {
+	el;
+	graphId;
+	defaultRadius;
+	showLabels;
+	onNodeClick;
+	onEdgeClick;
+	svg;
+	mainGroup;
+	defsEl;
+	nodes;
+	edges;
+	simNodes = [];
+	simEdges = [];
+	layout;
+	zoomable;
+	pannable;
+	hoveredNodeId = null;
+	viewBox;
+	isPanning = !1;
+	panStart = {
+		x: 0,
+		y: 0
+	};
+	panOrigin = {
+		x: 0,
+		y: 0
+	};
+	dragNode = null;
+	dragOffset = {
+		x: 0,
+		y: 0
+	};
+	boundWheel;
+	boundMouseDown;
+	boundMouseMove;
+	boundMouseUp;
+	constructor(i) {
+		this.graphId = e("cmm-network-graph"), this.layout = i.layout ?? "force", this.zoomable = i.zoomable !== !1, this.pannable = i.pannable !== !1, this.defaultRadius = i.nodeRadius ?? r, this.showLabels = i.showLabels !== !1, this.onNodeClick = i.onNodeClick, this.onEdgeClick = i.onEdgeClick, this.nodes = [...i.nodes], this.edges = [...i.edges], this.viewBox = {
+			x: 0,
+			y: 0,
+			w: 800,
+			h: 600
+		}, this.el = document.createElement("div"), this.el.id = this.graphId, this.el.className = this.buildClassName(i.className), this.svg = document.createElementNS(n, "svg"), this.svg.classList.add("cmm-network-graph__svg"), this.defsEl = document.createElementNS(n, "defs"), this.svg.appendChild(this.defsEl), this.mainGroup = document.createElementNS(n, "g"), this.svg.appendChild(this.mainGroup), this.el.appendChild(this.svg), this.createArrowMarker(), t(i.container).appendChild(this.el);
+		let a = this.el.getBoundingClientRect();
+		a.width > 0 && a.height > 0 && (this.viewBox.w = a.width, this.viewBox.h = a.height), this.boundWheel = (e) => {
+			this.handleWheel(e);
+		}, this.boundMouseDown = (e) => {
+			this.handleMouseDown(e);
+		}, this.boundMouseMove = (e) => {
+			this.handleMouseMove(e);
+		}, this.boundMouseUp = () => {
+			this.handleMouseUp();
+		}, this.zoomable && this.el.addEventListener("wheel", this.boundWheel, { passive: !1 }), this.el.addEventListener("mousedown", this.boundMouseDown), document.addEventListener("mousemove", this.boundMouseMove), document.addEventListener("mouseup", this.boundMouseUp), this.buildSimulation(), this.applyLayout(), this.renderGraph(), this.zoomToFit();
+	}
+	update(e, t) {
+		this.nodes = [...e], this.edges = [...t], this.hoveredNodeId = null, this.dragNode = null, this.buildSimulation(), this.applyLayout(), this.renderGraph(), this.zoomToFit();
+	}
+	setLayout(e) {
+		this.layout = e, this.applyLayout(), this.renderGraph(), this.zoomToFit();
+	}
+	zoomToFit() {
+		if (this.simNodes.length === 0) return;
+		let e = Infinity, t = Infinity, n = -Infinity, r = -Infinity;
+		for (let i of this.simNodes) {
+			let a = i.radius;
+			i.x - a < e && (e = i.x - a), i.y - a < t && (t = i.y - a), i.x + a > n && (n = i.x + a), i.y + a > r && (r = i.y + a);
+		}
+		this.viewBox = {
+			x: e - 60,
+			y: t - 60,
+			w: n - e + 120,
+			h: r - t + 120
+		}, this.applyViewBox();
+	}
+	destroy() {
+		this.zoomable && this.el.removeEventListener("wheel", this.boundWheel), this.el.removeEventListener("mousedown", this.boundMouseDown), document.removeEventListener("mousemove", this.boundMouseMove), document.removeEventListener("mouseup", this.boundMouseUp), this.el.remove();
+	}
+	buildSimulation() {
+		let e = /* @__PURE__ */ new Map(), t = 0;
+		this.simNodes = this.nodes.map((n) => {
+			let r = n.color;
+			if (r === void 0 && n.group !== void 0) {
+				let i = e.get(n.group);
+				i === void 0 ? (r = u[t % u.length] ?? "#3b82f6", e.set(n.group, r), t++) : r = i;
+			}
+			return r === void 0 && (r = u[t % u.length] ?? "#3b82f6", t++), {
+				id: n.id,
+				label: n.label,
+				x: n.x ?? 0,
+				y: n.y ?? 0,
+				vx: 0,
+				vy: 0,
+				radius: n.radius ?? this.defaultRadius,
+				color: r,
+				icon: n.icon,
+				group: n.group,
+				data: n.data,
+				original: n
+			};
+		});
+		let n = /* @__PURE__ */ new Map();
+		for (let e of this.simNodes) n.set(e.id, e);
+		this.simEdges = [];
+		for (let e of this.edges) {
+			let t = n.get(e.source), r = n.get(e.target);
+			t === void 0 || r === void 0 || this.simEdges.push({
+				source: t,
+				target: r,
+				label: e.label,
+				weight: e.weight ?? 1,
+				color: e.color,
+				directed: e.directed === !0,
+				original: e
+			});
+		}
+	}
+	applyLayout() {
+		switch (this.layout) {
+			case "force":
+				this.forceLayout();
+				break;
+			case "circular":
+				this.circularLayout();
+				break;
+			case "grid":
+				this.gridLayout();
+				break;
+		}
+	}
+	forceLayout() {
+		let e = this.viewBox.w / 2, t = this.viewBox.h / 2;
+		for (let n of this.simNodes) (n.original.x === void 0 || n.original.y === void 0) && (n.x = e + (Math.random() - .5) * 200, n.y = t + (Math.random() - .5) * 200), n.vx = 0, n.vy = 0;
+		for (let n = 0; n < i; n++) {
+			for (let e = 0; e < this.simNodes.length; e++) {
+				let t = this.simNodes[e];
+				if (t !== void 0) for (let n = e + 1; n < this.simNodes.length; n++) {
+					let e = this.simNodes[n];
+					if (e === void 0) continue;
+					let r = e.x - t.x, i = e.y - t.y, o = Math.sqrt(r * r + i * i);
+					o < 1 && (o = 1, r = (Math.random() - .5) * 2, i = (Math.random() - .5) * 2);
+					let s = a / (o * o), c = r / o * s, l = i / o * s;
+					t.vx -= c, t.vy -= l, e.vx += c, e.vy += l;
+				}
+			}
+			for (let e of this.simEdges) {
+				let t = e.target.x - e.source.x, n = e.target.y - e.source.y, r = Math.sqrt(t * t + n * n), i = r * o * e.weight, a = t / Math.max(r, 1) * i, s = n / Math.max(r, 1) * i;
+				e.source.vx += a, e.source.vy += s, e.target.vx -= a, e.target.vy -= s;
+			}
+			for (let n of this.simNodes) n.vx += (e - n.x) * s, n.vy += (t - n.y) * s;
+			for (let e of this.simNodes) e.vx *= c, e.vy *= c, e.x += e.vx, e.y += e.vy;
+		}
+	}
+	circularLayout() {
+		let e = this.viewBox.w / 2, t = this.viewBox.h / 2, n = this.simNodes.length;
+		if (n === 0) return;
+		let r = n * (Math.max(...this.simNodes.map((e) => e.radius)) * 2 + 20), i = Math.max(r / (2 * Math.PI), 100);
+		for (let r = 0; r < n; r++) {
+			let a = this.simNodes[r];
+			if (a === void 0) continue;
+			let o = 2 * Math.PI * r / n - Math.PI / 2;
+			a.x = e + i * Math.cos(o), a.y = t + i * Math.sin(o);
+		}
+	}
+	gridLayout() {
+		let e = this.simNodes.length;
+		if (e === 0) return;
+		let t = Math.ceil(Math.sqrt(e)), n = Math.max(...this.simNodes.map((e) => e.radius)) * 3 + 20;
+		for (let r = 0; r < e; r++) {
+			let e = this.simNodes[r];
+			if (e === void 0) continue;
+			let i = r % t, a = Math.floor(r / t);
+			e.x = i * n + n / 2, e.y = a * n + n / 2;
+		}
+	}
+	renderGraph() {
+		for (; this.mainGroup.firstChild !== null;) this.mainGroup.removeChild(this.mainGroup.firstChild);
+		for (let e of this.simEdges) this.renderEdge(e);
+		for (let e of this.simNodes) this.renderNode(e);
+		this.applyViewBox();
+	}
+	renderNode(e) {
+		let t = document.createElementNS(n, "g");
+		t.classList.add("cmm-network-graph__node"), t.setAttribute("data-node-id", e.id), this.hoveredNodeId !== null && this.hoveredNodeId !== e.id && (this.simEdges.some((t) => t.source.id === this.hoveredNodeId && t.target.id === e.id || t.target.id === this.hoveredNodeId && t.source.id === e.id) ? t.classList.add("cmm-network-graph__node--highlighted") : t.classList.add("cmm-network-graph__node--dimmed"));
+		let r = document.createElementNS(n, "circle");
+		if (r.classList.add("cmm-network-graph__node-circle"), r.setAttribute("cx", String(e.x)), r.setAttribute("cy", String(e.y)), r.setAttribute("r", String(e.radius)), r.setAttribute("fill", e.color), t.appendChild(r), e.icon !== void 0) {
+			let r = document.createElementNS(n, "text");
+			r.classList.add("cmm-network-graph__node-icon"), r.setAttribute("x", String(e.x)), r.setAttribute("y", String(e.y)), r.textContent = e.icon, t.appendChild(r);
+		}
+		if (this.showLabels) {
+			let r = document.createElementNS(n, "text");
+			r.classList.add("cmm-network-graph__label"), r.setAttribute("x", String(e.x)), r.setAttribute("y", String(e.y + e.radius + 14)), r.textContent = e.label, t.appendChild(r);
+		}
+		t.addEventListener("mouseenter", () => {
+			this.hoveredNodeId = e.id, this.renderGraph();
+		}), t.addEventListener("mouseleave", () => {
+			this.hoveredNodeId = null, this.renderGraph();
+		}), t.addEventListener("click", (t) => {
+			t.stopPropagation(), this.onNodeClick?.(e.original);
+		}), this.mainGroup.appendChild(t);
+	}
+	renderEdge(e) {
+		let t = document.createElementNS(n, "g");
+		t.classList.add("cmm-network-graph__edge"), this.hoveredNodeId !== null && (e.source.id === this.hoveredNodeId || e.target.id === this.hoveredNodeId ? t.classList.add("cmm-network-graph__edge--highlighted") : t.classList.add("cmm-network-graph__edge--dimmed"));
+		let r = document.createElementNS(n, "line");
+		if (r.classList.add("cmm-network-graph__edge-line"), r.setAttribute("x1", String(e.source.x)), r.setAttribute("y1", String(e.source.y)), r.setAttribute("x2", String(e.target.x)), r.setAttribute("y2", String(e.target.y)), e.color !== void 0 && r.setAttribute("stroke", e.color), e.weight > 1 && r.setAttribute("stroke-width", String(Math.min(e.weight * 1.5, 6))), e.directed && r.setAttribute("marker-end", `url(#${this.graphId}-arrow)`), t.appendChild(r), e.label !== void 0) {
+			let r = (e.source.x + e.target.x) / 2, i = (e.source.y + e.target.y) / 2, a = document.createElementNS(n, "text");
+			a.classList.add("cmm-network-graph__edge-label"), a.setAttribute("x", String(r)), a.setAttribute("y", String(i - 6)), a.textContent = e.label, t.appendChild(a);
+		}
+		t.addEventListener("click", (t) => {
+			t.stopPropagation(), this.onEdgeClick?.(e.original);
+		}), this.mainGroup.appendChild(t);
+	}
+	createArrowMarker() {
+		let e = document.createElementNS(n, "marker");
+		e.setAttribute("id", `${this.graphId}-arrow`), e.setAttribute("markerWidth", String(l)), e.setAttribute("markerHeight", String(l)), e.setAttribute("refX", String(l)), e.setAttribute("refY", String(l / 2)), e.setAttribute("orient", "auto-start-reverse"), e.setAttribute("markerUnits", "userSpaceOnUse");
+		let t = document.createElementNS(n, "polygon");
+		t.classList.add("cmm-network-graph__arrowhead"), t.setAttribute("points", `0 0, ${String(l)} ${String(l / 2)}, 0 ${String(l)}`), e.appendChild(t), this.defsEl.appendChild(e);
+	}
+	applyViewBox() {
+		this.svg.setAttribute("viewBox", `${String(this.viewBox.x)} ${String(this.viewBox.y)} ${String(this.viewBox.w)} ${String(this.viewBox.h)}`);
+	}
+	handleWheel(e) {
+		e.preventDefault();
+		let t = e.deltaY > 0 ? 1.1 : .9, n = this.el.getBoundingClientRect(), r = (e.clientX - n.left) / n.width * this.viewBox.w + this.viewBox.x, i = (e.clientY - n.top) / n.height * this.viewBox.h + this.viewBox.y, a = this.viewBox.w * t, o = this.viewBox.h * t;
+		this.viewBox.x = r - (r - this.viewBox.x) * (a / this.viewBox.w), this.viewBox.y = i - (i - this.viewBox.y) * (o / this.viewBox.h), this.viewBox.w = a, this.viewBox.h = o, this.applyViewBox();
+	}
+	handleMouseDown(e) {
+		if (e.button !== 0) return;
+		let t = e.target, n = t === null ? null : t.closest(".cmm-network-graph__node");
+		if (n !== null) {
+			let t = n.getAttribute("data-node-id");
+			if (t !== null) {
+				let n = this.simNodes.find((e) => e.id === t);
+				if (n !== void 0) {
+					this.dragNode = n;
+					let t = this.clientToSvg(e.clientX, e.clientY);
+					this.dragOffset = {
+						x: n.x - t.x,
+						y: n.y - t.y
+					};
+					return;
+				}
+			}
+		}
+		this.pannable && (this.isPanning = !0, this.panStart = {
+			x: e.clientX,
+			y: e.clientY
+		}, this.panOrigin = {
+			x: this.viewBox.x,
+			y: this.viewBox.y
+		});
+	}
+	handleMouseMove(e) {
+		if (this.dragNode !== null) {
+			let t = this.clientToSvg(e.clientX, e.clientY);
+			this.dragNode.x = t.x + this.dragOffset.x, this.dragNode.y = t.y + this.dragOffset.y, this.renderGraph();
+			return;
+		}
+		if (this.isPanning) {
+			let t = this.el.getBoundingClientRect(), n = this.viewBox.w / t.width, r = this.viewBox.h / t.height;
+			this.viewBox.x = this.panOrigin.x - (e.clientX - this.panStart.x) * n, this.viewBox.y = this.panOrigin.y - (e.clientY - this.panStart.y) * r, this.applyViewBox();
+		}
+	}
+	handleMouseUp() {
+		this.dragNode = null, this.isPanning = !1;
+	}
+	clientToSvg(e, t) {
+		let n = this.el.getBoundingClientRect();
+		return {
+			x: (e - n.left) / n.width * this.viewBox.w + this.viewBox.x,
+			y: (t - n.top) / n.height * this.viewBox.h + this.viewBox.y
+		};
+	}
+	buildClassName(e) {
+		let t = ["cmm-network-graph"];
+		return e !== void 0 && t.push(e), t.join(" ");
+	}
+};
+//#endregion
+export { d as NetworkGraph };
+
+//# sourceMappingURL=index.js.map

package/dist/visualization/network-graph/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/visualization/network-graph/index.ts"],"sourcesContent":["/**\n * NetworkGraph - SVG-based network/graph visualization with force, circular, and grid layouts\n * @countermeasure/web-components/visualization/network-graph\n */\n\nimport type { GraphEdge, GraphNode, NetworkGraphConfig } from './types'\nimport { resolveContainer, uniqueId } from '../../primitives/utils'\n\nexport type { GraphEdge, GraphNode, NetworkGraphConfig } from './types'\n\nconst SVG_NS = 'http://www.w3.org/2000/svg'\n\nconst DEFAULT_RADIUS = 20\nconst FORCE_ITERATIONS = 300\nconst REPULSION = 5000\nconst ATTRACTION = 0.005\nconst CENTER_GRAVITY = 0.01\nconst DAMPING = 0.9\nconst ARROWHEAD_SIZE = 8\n\nconst DEFAULT_COLORS = [\n  '#3b82f6',\n  '#ef4444',\n  '#10b981',\n  '#f59e0b',\n  '#8b5cf6',\n  '#ec4899',\n  '#06b6d4',\n  '#f97316',\n  '#14b8a6',\n  '#6366f1',\n]\n\n/** Internal node with mutable position and velocity */\ninterface SimNode {\n  id: string\n  label: string\n  x: number\n  y: number\n  vx: number\n  vy: number\n  radius: number\n  color: string\n  icon: string | undefined\n  group: string | undefined\n  data: Record<string, string> | undefined\n  original: GraphNode\n}\n\n/** Internal edge referencing sim nodes */\ninterface SimEdge {\n  source: SimNode\n  target: SimNode\n  label: string | undefined\n  weight: number\n  color: string | undefined\n  directed: boolean\n  original: GraphEdge\n}\n\nexport class NetworkGraph {\n  public readonly el: HTMLDivElement\n\n  private readonly graphId: string\n  private readonly defaultRadius: number\n  private readonly showLabels: boolean\n  private readonly onNodeClick: ((node: GraphNode) => void) | undefined\n  private readonly onEdgeClick: ((edge: GraphEdge) => void) | undefined\n  private svg: SVGSVGElement\n  private mainGroup: SVGGElement\n  private defsEl: SVGDefsElement\n  private nodes: GraphNode[]\n  private edges: GraphEdge[]\n  private simNodes: SimNode[] = []\n  private simEdges: SimEdge[] = []\n  private layout: 'force' | 'circular' | 'grid'\n  private zoomable: boolean\n  private pannable: boolean\n  private hoveredNodeId: string | null = null\n\n  // View state\n  private viewBox: { x: number; y: number; w: number; h: number }\n  private isPanning = false\n  private panStart = { x: 0, y: 0 }\n  private panOrigin = { x: 0, y: 0 }\n\n  // Drag state\n  private dragNode: SimNode | null = null\n  private dragOffset = { x: 0, y: 0 }\n\n  // Bound handlers\n  private readonly boundWheel: (e: WheelEvent) => void\n  private readonly boundMouseDown: (e: MouseEvent) => void\n  private readonly boundMouseMove: (e: MouseEvent) => void\n  private readonly boundMouseUp: () => void\n\n  constructor(config: NetworkGraphConfig) {\n    this.graphId = uniqueId('cmm-network-graph')\n    this.layout = config.layout ?? 'force'\n    this.zoomable = config.zoomable !== false\n    this.pannable = config.pannable !== false\n    this.defaultRadius = config.nodeRadius ?? DEFAULT_RADIUS\n    this.showLabels = config.showLabels !== false\n    this.onNodeClick = config.onNodeClick\n    this.onEdgeClick = config.onEdgeClick\n    this.nodes = [...config.nodes]\n    this.edges = [...config.edges]\n    this.viewBox = { x: 0, y: 0, w: 800, h: 600 }\n\n    // Build DOM\n    this.el = document.createElement('div')\n    this.el.id = this.graphId\n    this.el.className = this.buildClassName(config.className)\n\n    this.svg = document.createElementNS(SVG_NS, 'svg')\n    this.svg.classList.add('cmm-network-graph__svg')\n\n    this.defsEl = document.createElementNS(SVG_NS, 'defs')\n    this.svg.appendChild(this.defsEl)\n\n    this.mainGroup = document.createElementNS(SVG_NS, 'g')\n    this.svg.appendChild(this.mainGroup)\n    this.el.appendChild(this.svg)\n\n    this.createArrowMarker()\n\n    // Mount\n    const parent = resolveContainer(config.container)\n    parent.appendChild(this.el)\n\n    const rect = this.el.getBoundingClientRect()\n    if (rect.width > 0 && rect.height > 0) {\n      this.viewBox.w = rect.width\n      this.viewBox.h = rect.height\n    }\n\n    // Bind handlers\n    this.boundWheel = (e: WheelEvent): void => {\n      this.handleWheel(e)\n    }\n    this.boundMouseDown = (e: MouseEvent): void => {\n      this.handleMouseDown(e)\n    }\n    this.boundMouseMove = (e: MouseEvent): void => {\n      this.handleMouseMove(e)\n    }\n    this.boundMouseUp = (): void => {\n      this.handleMouseUp()\n    }\n\n    if (this.zoomable) {\n      this.el.addEventListener('wheel', this.boundWheel, { passive: false })\n    }\n    this.el.addEventListener('mousedown', this.boundMouseDown)\n    document.addEventListener('mousemove', this.boundMouseMove)\n    document.addEventListener('mouseup', this.boundMouseUp)\n\n    this.buildSimulation()\n    this.applyLayout()\n    this.renderGraph()\n    this.zoomToFit()\n  }\n\n  /** Replace all data and re-render */\n  update(nodes: GraphNode[], edges: GraphEdge[]): void {\n    this.nodes = [...nodes]\n    this.edges = [...edges]\n    this.hoveredNodeId = null\n    this.dragNode = null\n    this.buildSimulation()\n    this.applyLayout()\n    this.renderGraph()\n    this.zoomToFit()\n  }\n\n  /** Switch layout algorithm and re-render */\n  setLayout(layout: 'force' | 'circular' | 'grid'): void {\n    this.layout = layout\n    this.applyLayout()\n    this.renderGraph()\n    this.zoomToFit()\n  }\n\n  /** Fit all content in viewport */\n  zoomToFit(): void {\n    if (this.simNodes.length === 0) return\n\n    let minX = Infinity\n    let minY = Infinity\n    let maxX = -Infinity\n    let maxY = -Infinity\n\n    for (const n of this.simNodes) {\n      const r = n.radius\n      if (n.x - r < minX) minX = n.x - r\n      if (n.y - r < minY) minY = n.y - r\n      if (n.x + r > maxX) maxX = n.x + r\n      if (n.y + r > maxY) maxY = n.y + r\n    }\n\n    const padding = 60\n    this.viewBox = {\n      x: minX - padding,\n      y: minY - padding,\n      w: maxX - minX + padding * 2,\n      h: maxY - minY + padding * 2,\n    }\n    this.applyViewBox()\n  }\n\n  /** Clean up and remove */\n  destroy(): void {\n    if (this.zoomable) {\n      this.el.removeEventListener('wheel', this.boundWheel)\n    }\n    this.el.removeEventListener('mousedown', this.boundMouseDown)\n    document.removeEventListener('mousemove', this.boundMouseMove)\n    document.removeEventListener('mouseup', this.boundMouseUp)\n    this.el.remove()\n  }\n\n  // ---------------------------------------------------------------------------\n  // Simulation setup\n  // ---------------------------------------------------------------------------\n\n  private buildSimulation(): void {\n    // Map group names to colors\n    const groupColors = new Map<string, string>()\n    let colorIdx = 0\n\n    this.simNodes = this.nodes.map(n => {\n      let color = n.color\n      if (color === undefined && n.group !== undefined) {\n        const existing = groupColors.get(n.group)\n        if (existing !== undefined) {\n          color = existing\n        } else {\n          color = DEFAULT_COLORS[colorIdx % DEFAULT_COLORS.length] ?? '#3b82f6'\n          groupColors.set(n.group, color)\n          colorIdx++\n        }\n      }\n      if (color === undefined) {\n        color = DEFAULT_COLORS[colorIdx % DEFAULT_COLORS.length] ?? '#3b82f6'\n        colorIdx++\n      }\n\n      return {\n        id: n.id,\n        label: n.label,\n        x: n.x ?? 0,\n        y: n.y ?? 0,\n        vx: 0,\n        vy: 0,\n        radius: n.radius ?? this.defaultRadius,\n        color,\n        icon: n.icon,\n        group: n.group,\n        data: n.data,\n        original: n,\n      }\n    })\n\n    const nodeMap = new Map<string, SimNode>()\n    for (const sn of this.simNodes) {\n      nodeMap.set(sn.id, sn)\n    }\n\n    this.simEdges = []\n    for (const e of this.edges) {\n      const source = nodeMap.get(e.source)\n      const target = nodeMap.get(e.target)\n      if (source === undefined || target === undefined) continue\n      this.simEdges.push({\n        source,\n        target,\n        label: e.label,\n        weight: e.weight ?? 1,\n        color: e.color,\n        directed: e.directed === true,\n        original: e,\n      })\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Layout algorithms\n  // ---------------------------------------------------------------------------\n\n  private applyLayout(): void {\n    switch (this.layout) {\n      case 'force':\n        this.forceLayout()\n        break\n      case 'circular':\n        this.circularLayout()\n        break\n      case 'grid':\n        this.gridLayout()\n        break\n    }\n  }\n\n  private forceLayout(): void {\n    const cx = this.viewBox.w / 2\n    const cy = this.viewBox.h / 2\n\n    // Initialize random positions if not set\n    for (const node of this.simNodes) {\n      if (node.original.x === undefined || node.original.y === undefined) {\n        node.x = cx + (Math.random() - 0.5) * 200\n        node.y = cy + (Math.random() - 0.5) * 200\n      }\n      node.vx = 0\n      node.vy = 0\n    }\n\n    // Iterative simulation\n    for (let iter = 0; iter < FORCE_ITERATIONS; iter++) {\n      // Repulsion between all node pairs\n      for (let i = 0; i < this.simNodes.length; i++) {\n        const a = this.simNodes[i]\n        if (a === undefined) continue\n        for (let j = i + 1; j < this.simNodes.length; j++) {\n          const b = this.simNodes[j]\n          if (b === undefined) continue\n\n          let dx = b.x - a.x\n          let dy = b.y - a.y\n          let dist = Math.sqrt(dx * dx + dy * dy)\n          if (dist < 1) {\n            dist = 1\n            dx = (Math.random() - 0.5) * 2\n            dy = (Math.random() - 0.5) * 2\n          }\n\n          const force = REPULSION / (dist * dist)\n          const fx = (dx / dist) * force\n          const fy = (dy / dist) * force\n\n          a.vx -= fx\n          a.vy -= fy\n          b.vx += fx\n          b.vy += fy\n        }\n      }\n\n      // Attraction along edges\n      for (const edge of this.simEdges) {\n        const dx = edge.target.x - edge.source.x\n        const dy = edge.target.y - edge.source.y\n        const dist = Math.sqrt(dx * dx + dy * dy)\n\n        const force = dist * ATTRACTION * edge.weight\n        const fx = (dx / Math.max(dist, 1)) * force\n        const fy = (dy / Math.max(dist, 1)) * force\n\n        edge.source.vx += fx\n        edge.source.vy += fy\n        edge.target.vx -= fx\n        edge.target.vy -= fy\n      }\n\n      // Center gravity\n      for (const node of this.simNodes) {\n        node.vx += (cx - node.x) * CENTER_GRAVITY\n        node.vy += (cy - node.y) * CENTER_GRAVITY\n      }\n\n      // Apply velocities with damping\n      for (const node of this.simNodes) {\n        node.vx *= DAMPING\n        node.vy *= DAMPING\n        node.x += node.vx\n        node.y += node.vy\n      }\n    }\n  }\n\n  private circularLayout(): void {\n    const cx = this.viewBox.w / 2\n    const cy = this.viewBox.h / 2\n    const count = this.simNodes.length\n    if (count === 0) return\n\n    const maxRadius = Math.max(...this.simNodes.map(n => n.radius))\n    const circumference = count * (maxRadius * 2 + 20)\n    const layoutRadius = Math.max(circumference / (2 * Math.PI), 100)\n\n    for (let i = 0; i < count; i++) {\n      const node = this.simNodes[i]\n      if (node === undefined) continue\n      const angle = (2 * Math.PI * i) / count - Math.PI / 2\n      node.x = cx + layoutRadius * Math.cos(angle)\n      node.y = cy + layoutRadius * Math.sin(angle)\n    }\n  }\n\n  private gridLayout(): void {\n    const count = this.simNodes.length\n    if (count === 0) return\n\n    const cols = Math.ceil(Math.sqrt(count))\n    const maxRadius = Math.max(...this.simNodes.map(n => n.radius))\n    const cellSize = maxRadius * 3 + 20\n\n    for (let i = 0; i < count; i++) {\n      const node = this.simNodes[i]\n      if (node === undefined) continue\n      const col = i % cols\n      const row = Math.floor(i / cols)\n      node.x = col * cellSize + cellSize / 2\n      node.y = row * cellSize + cellSize / 2\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Rendering\n  // ---------------------------------------------------------------------------\n\n  private renderGraph(): void {\n    while (this.mainGroup.firstChild !== null) {\n      this.mainGroup.removeChild(this.mainGroup.firstChild)\n    }\n\n    // Edges first\n    for (const edge of this.simEdges) {\n      this.renderEdge(edge)\n    }\n\n    // Nodes on top\n    for (const node of this.simNodes) {\n      this.renderNode(node)\n    }\n\n    this.applyViewBox()\n  }\n\n  private renderNode(node: SimNode): void {\n    const g = document.createElementNS(SVG_NS, 'g')\n    g.classList.add('cmm-network-graph__node')\n    g.setAttribute('data-node-id', node.id)\n\n    // Dimming on hover\n    if (this.hoveredNodeId !== null && this.hoveredNodeId !== node.id) {\n      const isConnected = this.simEdges.some(\n        e =>\n          (e.source.id === this.hoveredNodeId && e.target.id === node.id) ||\n          (e.target.id === this.hoveredNodeId && e.source.id === node.id)\n      )\n      if (!isConnected) {\n        g.classList.add('cmm-network-graph__node--dimmed')\n      } else {\n        g.classList.add('cmm-network-graph__node--highlighted')\n      }\n    }\n\n    // Circle\n    const circle = document.createElementNS(SVG_NS, 'circle')\n    circle.classList.add('cmm-network-graph__node-circle')\n    circle.setAttribute('cx', String(node.x))\n    circle.setAttribute('cy', String(node.y))\n    circle.setAttribute('r', String(node.radius))\n    circle.setAttribute('fill', node.color)\n    g.appendChild(circle)\n\n    // Icon\n    if (node.icon !== undefined) {\n      const iconText = document.createElementNS(SVG_NS, 'text')\n      iconText.classList.add('cmm-network-graph__node-icon')\n      iconText.setAttribute('x', String(node.x))\n      iconText.setAttribute('y', String(node.y))\n      iconText.textContent = node.icon\n      g.appendChild(iconText)\n    }\n\n    // Label below\n    if (this.showLabels) {\n      const label = document.createElementNS(SVG_NS, 'text')\n      label.classList.add('cmm-network-graph__label')\n      label.setAttribute('x', String(node.x))\n      label.setAttribute('y', String(node.y + node.radius + 14))\n      label.textContent = node.label\n      g.appendChild(label)\n    }\n\n    // Hover handlers\n    g.addEventListener('mouseenter', () => {\n      this.hoveredNodeId = node.id\n      this.renderGraph()\n    })\n    g.addEventListener('mouseleave', () => {\n      this.hoveredNodeId = null\n      this.renderGraph()\n    })\n\n    // Click\n    g.addEventListener('click', (e: MouseEvent) => {\n      e.stopPropagation()\n      this.onNodeClick?.(node.original)\n    })\n\n    this.mainGroup.appendChild(g)\n  }\n\n  private renderEdge(edge: SimEdge): void {\n    const g = document.createElementNS(SVG_NS, 'g')\n    g.classList.add('cmm-network-graph__edge')\n\n    // Dimming\n    if (this.hoveredNodeId !== null) {\n      const isConnected =\n        edge.source.id === this.hoveredNodeId || edge.target.id === this.hoveredNodeId\n      if (isConnected) {\n        g.classList.add('cmm-network-graph__edge--highlighted')\n      } else {\n        g.classList.add('cmm-network-graph__edge--dimmed')\n      }\n    }\n\n    const line = document.createElementNS(SVG_NS, 'line')\n    line.classList.add('cmm-network-graph__edge-line')\n    line.setAttribute('x1', String(edge.source.x))\n    line.setAttribute('y1', String(edge.source.y))\n    line.setAttribute('x2', String(edge.target.x))\n    line.setAttribute('y2', String(edge.target.y))\n\n    if (edge.color !== undefined) {\n      line.setAttribute('stroke', edge.color)\n    }\n\n    // Weight -> stroke width\n    if (edge.weight > 1) {\n      line.setAttribute('stroke-width', String(Math.min(edge.weight * 1.5, 6)))\n    }\n\n    if (edge.directed) {\n      line.setAttribute('marker-end', `url(#${this.graphId}-arrow)`)\n    }\n\n    g.appendChild(line)\n\n    // Edge label\n    if (edge.label !== undefined) {\n      const mx = (edge.source.x + edge.target.x) / 2\n      const my = (edge.source.y + edge.target.y) / 2\n      const text = document.createElementNS(SVG_NS, 'text')\n      text.classList.add('cmm-network-graph__edge-label')\n      text.setAttribute('x', String(mx))\n      text.setAttribute('y', String(my - 6))\n      text.textContent = edge.label\n      g.appendChild(text)\n    }\n\n    // Click\n    g.addEventListener('click', (e: MouseEvent) => {\n      e.stopPropagation()\n      this.onEdgeClick?.(edge.original)\n    })\n\n    this.mainGroup.appendChild(g)\n  }\n\n  private createArrowMarker(): void {\n    const marker = document.createElementNS(SVG_NS, 'marker')\n    marker.setAttribute('id', `${this.graphId}-arrow`)\n    marker.setAttribute('markerWidth', String(ARROWHEAD_SIZE))\n    marker.setAttribute('markerHeight', String(ARROWHEAD_SIZE))\n    marker.setAttribute('refX', String(ARROWHEAD_SIZE))\n    marker.setAttribute('refY', String(ARROWHEAD_SIZE / 2))\n    marker.setAttribute('orient', 'auto-start-reverse')\n    marker.setAttribute('markerUnits', 'userSpaceOnUse')\n\n    const polygon = document.createElementNS(SVG_NS, 'polygon')\n    polygon.classList.add('cmm-network-graph__arrowhead')\n    polygon.setAttribute(\n      'points',\n      `0 0, ${String(ARROWHEAD_SIZE)} ${String(ARROWHEAD_SIZE / 2)}, 0 ${String(ARROWHEAD_SIZE)}`\n    )\n    marker.appendChild(polygon)\n    this.defsEl.appendChild(marker)\n  }\n\n  // ---------------------------------------------------------------------------\n  // Zoom / Pan / Drag\n  // ---------------------------------------------------------------------------\n\n  private applyViewBox(): void {\n    this.svg.setAttribute(\n      'viewBox',\n      `${String(this.viewBox.x)} ${String(this.viewBox.y)} ${String(this.viewBox.w)} ${String(this.viewBox.h)}`\n    )\n  }\n\n  private handleWheel(e: WheelEvent): void {\n    e.preventDefault()\n    const factor = e.deltaY > 0 ? 1.1 : 0.9\n\n    const rect = this.el.getBoundingClientRect()\n    const mx = ((e.clientX - rect.left) / rect.width) * this.viewBox.w + this.viewBox.x\n    const my = ((e.clientY - rect.top) / rect.height) * this.viewBox.h + this.viewBox.y\n\n    const newW = this.viewBox.w * factor\n    const newH = this.viewBox.h * factor\n\n    this.viewBox.x = mx - (mx - this.viewBox.x) * (newW / this.viewBox.w)\n    this.viewBox.y = my - (my - this.viewBox.y) * (newH / this.viewBox.h)\n    this.viewBox.w = newW\n    this.viewBox.h = newH\n\n    this.applyViewBox()\n  }\n\n  private handleMouseDown(e: MouseEvent): void {\n    if (e.button !== 0) return\n\n    // Check if clicking on a node for dragging\n    const target = e.target as Element | null\n    const nodeGroup = target !== null ? target.closest('.cmm-network-graph__node') : null\n\n    if (nodeGroup !== null) {\n      const nodeId = nodeGroup.getAttribute('data-node-id')\n      if (nodeId !== null) {\n        const simNode = this.simNodes.find(n => n.id === nodeId)\n        if (simNode !== undefined) {\n          this.dragNode = simNode\n          const svgPt = this.clientToSvg(e.clientX, e.clientY)\n          this.dragOffset = {\n            x: simNode.x - svgPt.x,\n            y: simNode.y - svgPt.y,\n          }\n          return\n        }\n      }\n    }\n\n    // Otherwise: pan\n    if (this.pannable) {\n      this.isPanning = true\n      this.panStart = { x: e.clientX, y: e.clientY }\n      this.panOrigin = { x: this.viewBox.x, y: this.viewBox.y }\n    }\n  }\n\n  private handleMouseMove(e: MouseEvent): void {\n    if (this.dragNode !== null) {\n      const svgPt = this.clientToSvg(e.clientX, e.clientY)\n      this.dragNode.x = svgPt.x + this.dragOffset.x\n      this.dragNode.y = svgPt.y + this.dragOffset.y\n      this.renderGraph()\n      return\n    }\n\n    if (this.isPanning) {\n      const rect = this.el.getBoundingClientRect()\n      const scaleX = this.viewBox.w / rect.width\n      const scaleY = this.viewBox.h / rect.height\n\n      this.viewBox.x = this.panOrigin.x - (e.clientX - this.panStart.x) * scaleX\n      this.viewBox.y = this.panOrigin.y - (e.clientY - this.panStart.y) * scaleY\n\n      this.applyViewBox()\n    }\n  }\n\n  private handleMouseUp(): void {\n    this.dragNode = null\n    this.isPanning = false\n  }\n\n  private clientToSvg(clientX: number, clientY: number): { x: number; y: number } {\n    const rect = this.el.getBoundingClientRect()\n    return {\n      x: ((clientX - rect.left) / rect.width) * this.viewBox.w + this.viewBox.x,\n      y: ((clientY - rect.top) / rect.height) * this.viewBox.h + this.viewBox.y,\n    }\n  }\n\n  // ---------------------------------------------------------------------------\n  // Helpers\n  // ---------------------------------------------------------------------------\n\n  private buildClassName(extra: string | undefined): string {\n    const classes = ['cmm-network-graph']\n    if (extra !== undefined) {\n      classes.push(extra)\n    }\n    return classes.join(' ')\n  }\n}\n"],"mappings":"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"}

package/dist/visualization/network-graph/types.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Network graph type definitions
+ * @countermeasure/web-components/visualization/network-graph
+ */
+export interface GraphNode {
+    id: string;
+    label: string;
+    x?: number;
+    y?: number;
+    radius?: number;
+    color?: string;
+    icon?: string;
+    group?: string;
+    data?: Record<string, string>;
+}
+export interface GraphEdge {
+    source: string;
+    target: string;
+    label?: string;
+    weight?: number;
+    color?: string;
+    directed?: boolean;
+}
+export interface NetworkGraphConfig {
+    container: HTMLElement | string;
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    layout?: 'force' | 'circular' | 'grid';
+    zoomable?: boolean;
+    pannable?: boolean;
+    nodeRadius?: number;
+    showLabels?: boolean;
+    onNodeClick?: (node: GraphNode) => void;
+    onEdgeClick?: (edge: GraphEdge) => void;
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/visualization/network-graph/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/visualization/network-graph/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,CAAC,CAAC,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAC9B;AAED,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAA;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

package/dist/visualization/rule-editor/index.d.ts

@@ -0,0 +1,46 @@
+import { RuleEditorConfig, RuleGroup } from './types';
+export type { FieldDefinition, RuleCondition, RuleEditorConfig, RuleGroup } from './types';
+export declare class RuleEditor {
+    private readonly container;
+    private readonly config;
+    private readonly instanceId;
+    private readonly fields;
+    private readonly maxDepth;
+    private rules;
+    private wrapperEl;
+    private dragState;
+    constructor(config: RuleEditorConfig);
+    /** Get the current rule group value */
+    getValue(): RuleGroup;
+    /** Set the rules and re-render */
+    setValue(rules: RuleGroup): void;
+    /** Remove the component from the DOM and clean up */
+    destroy(): void;
+    /** Deep clone a rule group */
+    private cloneGroup;
+    /** Notify the onChange callback */
+    private emitChange;
+    /** Render the entire editor */
+    private render;
+    /** Render a rule group */
+    private renderGroup;
+    /** Render a single condition row */
+    private renderCondition;
+    /** Create an appropriate value input for the condition type */
+    private createValueInput;
+    /** Get operators for a field definition */
+    private getOperatorsForField;
+    /** Get the default value for a field type */
+    private getDefaultValue;
+    /** Recursively find and remove a group by ID */
+    private removeGroupById;
+    /** Recursively find a group by ID */
+    private findGroupById;
+    /** Set up drag events on a condition row */
+    private setupConditionDrag;
+    /** Set up drop zone on a conditions list */
+    private setupGroupDropZone;
+    /** Calculate the index to drop at based on mouse Y */
+    private calculateDropIndex;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/visualization/rule-editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/visualization/rule-editor/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAkC,gBAAgB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAE1F,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAoC1F,qBAAa,UAAU;IACrB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAa;IACvC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAkB;IACzC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAQ;IACnC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmB;IAC1C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAQ;IACjC,OAAO,CAAC,KAAK,CAAW;IACxB,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,SAAS,CAAwD;gBAE7D,MAAM,EAAE,gBAAgB;IAUpC,uCAAuC;IACvC,QAAQ,IAAI,SAAS;IAIrB,kCAAkC;IAClC,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI;IAKhC,qDAAqD;IACrD,OAAO,IAAI,IAAI;IAMf,8BAA8B;IAC9B,OAAO,CAAC,UAAU;IAalB,mCAAmC;IACnC,OAAO,CAAC,UAAU;IAIlB,+BAA+B;IAC/B,OAAO,CAAC,MAAM;IAiBd,0BAA0B;IAC1B,OAAO,CAAC,WAAW;IA2GnB,oCAAoC;IACpC,OAAO,CAAC,eAAe;IAyFvB,+DAA+D;IAC/D,OAAO,CAAC,gBAAgB;IAwExB,2CAA2C;IAC3C,OAAO,CAAC,oBAAoB;IAQ5B,6CAA6C;IAC7C,OAAO,CAAC,eAAe;IAevB,gDAAgD;IAChD,OAAO,CAAC,eAAe;IAoBvB,qCAAqC;IACrC,OAAO,CAAC,aAAa;IAiBrB,4CAA4C;IAC5C,OAAO,CAAC,kBAAkB;IA0B1B,4CAA4C;IAC5C,OAAO,CAAC,kBAAkB;IAwD1B,sDAAsD;IACtD,OAAO,CAAC,kBAAkB;CAsB3B"}