@dhruviii/attack-path 1.0.0

package/src/index.css

@@ -0,0 +1,76 @@
+@import "tailwindcss";
+
+@theme {
+  /* black / dark theme */
+  --color-void: #06080c;
+  --color-canvas: #080b11;
+  --color-surface: #0c1017;
+  --color-panel: #10141d;
+  --color-panel-2: #151b26;
+  --color-line: #1c2431;
+  --color-line-soft: #161d28;
+  --color-line-bright: #2a3646;
+
+  --color-ink: #e8edf5;
+  --color-ink-2: #c2cbd8;
+  --color-muted: #7f8da3;
+  --color-faint: #566274;
+
+  --color-brand: #5b7cfa;
+  --color-brand-soft: #16203a;
+  --color-mint: #2dd4a7;
+  --color-danger: #ff5d68;
+  --color-orange: #ff8f4d;
+  --color-amber: #ffc043;
+  --color-azure: #46a6ff;
+  --color-violet: #a785ff;
+
+  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
+
+  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
+  --shadow-pop: 0 12px 40px rgba(0,0,0,0.55);
+}
+
+html, body, #root { height: 100%; }
+
+body {
+  margin: 0;
+  background: var(--color-void);
+  color: var(--color-ink);
+  font-family: var(--font-display);
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: #232d3c;
+  border-radius: 999px;
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover { background: #2f3b4d; background-clip: content-box; }
+
+@keyframes rise {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.rise { animation: rise 0.45s cubic-bezier(0.16,1,0.3,1) both; }
+
+@keyframes node-in { from { opacity: 0; } to { opacity: 1; } }
+.node-in { animation: node-in 0.4s ease-out both; }
+
+.tnum { font-variant-numeric: tabular-nums; }
+
+.dot-bg {
+  background-color: #080b11;
+  background-image: radial-gradient(rgba(91,124,250,0.10) 1px, transparent 1.4px);
+  background-size: 26px 26px;
+}
+
+.glow-danger { box-shadow: 0 0 0 1px rgba(255,93,104,0.25), 0 0 24px rgba(255,93,104,0.12); }
+
+.shadow-card { box-shadow: var(--shadow-card); }
+.shadow-pop { box-shadow: var(--shadow-pop); }

package/src/index.tsx

@@ -0,0 +1 @@
+export * as Attack_path from "./Attack-path"

package/src/lib/surface.ts

@@ -0,0 +1,367 @@
+// ---------------------------------------------------------------------------
+// Attack-surface model: DOMAIN (source) → ASSET → FINDING (vulnerability)
+// Deterministic. Two layouts: "path" (hierarchical columns) and "graph"
+// (organic radial clusters). SVG-friendly for the dark dashboard.
+// ---------------------------------------------------------------------------
+
+export type NodeType = "domain" | "asset" | "finding";
+export type Severity = "critical" | "high" | "medium" | "low" | "info";
+export type FindingType = "vulnerability" | "misconfiguration" | "exposure" | "secret";
+
+export interface SNode {
+  id: string;
+  type: NodeType;
+  label: string;
+  severity: Severity;
+  x: number;
+  y: number;
+  // domain
+  domainName?: string;
+  url?: string;
+  // asset
+  host?: string;
+  findingCount?: number;
+  // finding
+  findingType?: FindingType;
+  category?: string;
+  confidence?: "high" | "medium" | "low";
+  port?: number;
+  ip?: string;
+  templateId?: string;
+  description?: string;
+  riskScore?: number;
+  discoveredAt?: string;
+  // links up
+  parentDomain?: string;
+  parentAsset?: string;
+}
+
+export interface SLink { id: string; from: string; to: string; severity: Severity; }
+
+export interface Domain {
+  id: string;
+  name: string;       // "Tata"
+  fullName: string;   // "Tata Chemicals"
+  url: string;        // "tatachemicals.com"
+  assetIds: string[];
+  findingIds: string[];
+  tally: Record<Severity, number>;
+  risk: number;
+}
+
+export interface ExposurePath {
+  id: string;
+  nodes: string[];    // [domain, asset, finding]
+  severity: Severity;
+  risk: number;
+}
+
+export interface Surface {
+  nodes: SNode[];
+  links: SLink[];
+  nodeMap: Record<string, SNode>;
+  domains: Domain[];
+  paths: ExposurePath[];
+  out: Record<string, SLink[]>;
+  in: Record<string, SLink[]>;
+  bounds: { minX: number; minY: number; maxX: number; maxY: number };
+  stats: { domains: number; assets: number; findings: number; bySeverity: Record<Severity, number> };
+}
+
+export const severityMeta: Record<
+  Severity,
+  { label: string; css: string; soft: string; text: string; rank: number }
+> = {
+  critical: { label: "Critical", css: "#ff5d68", soft: "#2a1416", text: "text-danger", rank: 4 },
+  high: { label: "High", css: "#ff8f4d", soft: "#2a1a10", text: "text-orange", rank: 3 },
+  medium: { label: "Medium", css: "#ffc043", soft: "#2a2110", text: "text-amber", rank: 2 },
+  low: { label: "Low", css: "#46a6ff", soft: "#0f2030", text: "text-azure", rank: 1 },
+  info: { label: "Info", css: "#7f8da3", soft: "#161d28", text: "text-muted", rank: 0 },
+};
+
+export const findingTypeMeta: Record<FindingType, { label: string; css: string }> = {
+  vulnerability: { label: "Vulnerability", css: "#ff5d68" },
+  misconfiguration: { label: "Misconfiguration", css: "#ffc043" },
+  exposure: { label: "Exposure Signal", css: "#ff8f4d" },
+  secret: { label: "Exposed Secret", css: "#a785ff" },
+};
+
+
+// ---- layouts ----
+export function pathLayout(s: Surface): Record<string, { x: number; y: number }> {
+  const pos: Record<string, { x: number; y: number }> = {};
+    const COL_DOMAIN = 0;
+  const COL_ASSET = 380;
+  const COL_FINDING = 760;
+  const ASSET_GAP = 150;
+  const FINDING_GAP = 92;
+  const BLOCK_GAP = 120;
+  let cursorY = 0;
+  s.domains.forEach((dom) => {
+    const assets = s.nodes.filter((n) => n.type === "asset" && dom.assetIds.includes(n.id));
+    const findings = s.nodes.filter((n) => n.type === "finding" && dom.findingIds.includes(n.id));
+    const assetCount = Math.max(assets.length, 1);
+    const totalF = Math.max(findings.length, 1);
+    const blockH = Math.max(assetCount * ASSET_GAP, totalF * FINDING_GAP);
+    pos[dom.id] = { x: COL_DOMAIN, y: cursorY + blockH / 2 };
+    let fy = 0;
+    assets.forEach((an, ai) => {
+      const assetY = cursorY + (ai + 0.5) * (blockH / assetCount);
+      pos[an.id] = { x: COL_ASSET, y: assetY };
+      const aFindings = s.nodes.filter((n) => n.parentAsset === an.id);
+      aFindings.forEach((fn) => {
+        const findY = cursorY + (fy + 0.5) * FINDING_GAP;
+        pos[fn.id] = { x: COL_FINDING, y: findY };
+        fy++;
+      });
+    });
+    cursorY += blockH + BLOCK_GAP;
+  });
+  return pos;
+}
+
+export function graphLayout(s: Surface): Record<string, { x: number; y: number }> {
+  const pos: Record<string, { x: number; y: number }> = {};
+  const dc = s.domains.length;
+  const ring = Math.max(720, dc * 240);
+  s.domains.forEach((dom, di) => {
+    const ang = (di / dc) * Math.PI * 2 + 0.4;
+    const dx = Math.cos(ang) * ring * 0.42;
+    const dy = Math.sin(ang) * ring * 0.42;
+    pos[dom.id] = { x: dx, y: dy };
+    const ac = dom.assetIds.length;
+    dom.assetIds.forEach((aid, ai) => {
+      const spread = Math.PI * 1.1;
+      const aAng = ang - spread / 2 + (ac > 1 ? (ai / (ac - 1)) * spread : spread / 2);
+      const ax = dx + Math.cos(aAng) * 240;
+      const ay = dy + Math.sin(aAng) * 240;
+      pos[aid] = { x: ax, y: ay };
+      const findings = s.nodes.filter((n) => n.parentAsset === aid);
+      findings.forEach((fn, i) => {
+        const angle = i * 0.55;
+        const radius = 140 + i * 18;
+
+        pos[fn.id] = {
+          x: ax + Math.cos(angle) * radius,
+          y: ay + Math.sin(angle) * radius,
+        };
+      });
+    });
+  });
+  return pos;
+}
+
+export function withPositions(s: Surface, pos: Record<string, { x: number; y: number }>): Surface {
+  const nodes = s.nodes.map((n) => ({ ...n, x: pos[n.id]?.x ?? n.x, y: pos[n.id]?.y ?? n.y }));
+  const nodeMap: Record<string, SNode> = {};
+  nodes.forEach((n) => (nodeMap[n.id] = n));
+  const xs = nodes.map((n) => n.x), ys = nodes.map((n) => n.y);
+  return { ...s, nodes, nodeMap, bounds: { minX: Math.min(...xs), minY: Math.min(...ys), maxX: Math.max(...xs), maxY: Math.max(...ys) } };
+}
+
+export function subtreeOf(id: string, s: Surface): Set<string> {
+  const n = s.nodeMap[id];
+  const set = new Set<string>([id]);
+  if (!n) return set;
+  if (n.type === "domain") {
+    s.domains.find((d) => d.id === id)?.assetIds.forEach((aid) => {
+      set.add(aid);
+      s.nodes.filter((f) => f.parentAsset === aid).forEach((f) => set.add(f.id));
+    });
+  } else if (n.type === "asset") {
+    if (n.parentDomain) set.add(n.parentDomain);
+    s.nodes.filter((f) => f.parentAsset === id).forEach((f) => set.add(f.id));
+  } else {
+    if (n.parentAsset) set.add(n.parentAsset);
+    if (n.parentDomain) set.add(n.parentDomain);
+  }
+  return set;
+}
+
+export function loadSurfaceFromJSON(rawData: { nodes: any[]; edges: any[] }): Surface {
+  const rawNodes = rawData.nodes;
+  const rawEdges = rawData.edges;
+  const edgeFromMap: Record<string, string[]> = {};
+  const edgeToMap: Record<string, string[]> = {};
+  rawEdges.forEach((e) => {
+    if (!edgeFromMap[e.target]) edgeFromMap[e.target] = [];
+    edgeFromMap[e.target].push(e.source);
+    if (!edgeToMap[e.source]) edgeToMap[e.source] = [];
+    edgeToMap[e.source].push(e.target);
+  });
+  const rawMap: Record<string, any> = {};
+  rawNodes.forEach((n) => (rawMap[n.id] = n));
+  const nodes: SNode[] = [];
+  const links: SLink[] = [];
+  const domains: Domain[] = [];
+  const paths: ExposurePath[] = [];
+  const domainRawNodes = rawNodes.filter((n) => n.type === "source");
+  const assetRawNodes = rawNodes.filter((n) => n.type === "asset");
+  const findingRawNodes = rawNodes.filter((n) => n.type === "finding");
+  const getParentDomainId = (nodeId: string): string | undefined => {
+    const parents = edgeFromMap[nodeId] || [];
+    for (const pId of parents) {
+      const parentNode = rawMap[pId];
+      if (!parentNode) continue;
+      if (parentNode.type === "source") return parentNode.id;
+      const grandParent = getParentDomainId(pId);
+      if (grandParent) return grandParent;
+    }
+    return undefined;
+  };
+  const getParentAssetId = (nodeId: string): string | undefined => {
+    const parents = edgeFromMap[nodeId] || [];
+    for (const pId of parents) {
+      const parentNode = rawMap[pId];
+      if (parentNode && parentNode.type === "asset") return parentNode.id;
+    }
+    return undefined;
+  };
+  // 1. Findings
+  findingRawNodes.forEach((fn) => {
+    const d = fn.data || {};
+    const parentAsset = getParentAssetId(fn.id);
+    const parentDomain = getParentDomainId(fn.id);
+    const findNode: SNode = {
+      id: fn.id,
+      type: "finding",
+      label: d.label || "Vulnerability",
+      severity: (d.severity?.toLowerCase() as Severity) || "info",
+      x: 0,
+      y: 0,
+      findingType: d.findingType || "vulnerability",
+      category: d.attackPathCategory || d.category || "Vulnerability",
+      confidence: d.confidence || "high",
+      port: d.port ? Number(d.port) : undefined,
+      ip: d.ip,
+      templateId: d.templateId,
+      description: d.description,
+      riskScore: d.riskScore ? Number(d.riskScore) : undefined,
+      discoveredAt: d.discoveredAt,
+      host: d.url ?? d.label,
+      url: d.url,
+      parentAsset,
+      parentDomain,
+    };
+    nodes.push(findNode);
+  });
+  // 2. Assets
+  assetRawNodes.forEach((an) => {
+    const d = an.data || {};
+    const parentDomain = getParentDomainId(an.id);
+    const childFindings = nodes.filter((n) => n.parentAsset === an.id);
+    let worstRank = -1;
+    childFindings.forEach((cf) => {
+      const rank = severityMeta[cf.severity]?.rank ?? 0;
+      if (rank > worstRank) worstRank = rank;
+    });
+    const assetNode: SNode = {
+      id: an.id,
+      type: "asset",
+      label: d.label ?? d.url,
+      severity: (Object.keys(severityMeta) as Severity[]).find(
+        (k) => severityMeta[k].rank === Math.max(0, worstRank)
+      ) ?? "info",
+      x: 0,
+      y: 0,
+      host: d.url ?? d.label,
+      findingCount: childFindings.length,
+      parentDomain,
+    };
+    nodes.push(assetNode);
+  });
+  // 3. Domains
+  domainRawNodes.forEach((dn) => {
+    const d = dn.data || {};
+    const assetIds = (edgeToMap[dn.id] || []).filter((id) => rawMap[id]?.type === "asset");
+    const childAssetNodes = nodes.filter((n) => n.type === "asset" && assetIds.includes(n.id));
+    const findingIds: string[] = [];
+    const tally: Record<Severity, number> = { critical: 0, high: 0, medium: 0, low: 0, info: 0 };
+    childAssetNodes.forEach((an) => {
+      const childFindings = nodes.filter((n) => n.parentAsset === an.id);
+      childFindings.forEach((cf) => {
+        findingIds.push(cf.id);
+        tally[cf.severity]++;
+        paths.push({
+          id: `p-${cf.id}`,
+          nodes: [dn.id, an.id, cf.id],
+          severity: cf.severity,
+          risk: cf.riskScore ?? 50,
+        });
+      });
+    });
+    const worstRank = Math.max(
+      ...Object.keys(tally)
+        .filter((s) => tally[s as Severity] > 0)
+        .map((s) => severityMeta[s as Severity].rank),
+      0
+    );
+    const domainNode: SNode = {
+      id: dn.id,
+      type: "domain",
+      label: d.label,
+      severity: (Object.keys(severityMeta) as Severity[]).find(
+        (k) => severityMeta[k].rank === worstRank
+      ) ?? "info",
+      x: 0,
+      y: 0,
+      domainName: d.label,
+      url: d.url || d.label.toLowerCase() + ".com",
+    };
+    nodes.push(domainNode);
+    const risk = tally.critical * 40 + tally.high * 20 + tally.medium * 8 + tally.low * 3 + tally.info;
+    domains.push({
+      id: dn.id,
+      name: d.label,
+      fullName: d.label,
+      url: d.url || d.label.toLowerCase() + ".com",
+      assetIds,
+      findingIds,
+      tally,
+      risk,
+    });
+  });
+  // 4. Links
+  rawEdges.forEach((e) => {
+    const targetNode = nodes.find((n) => n.id === e.target);
+    links.push({
+      id: e.id,
+      from: e.source,
+      to: e.target,
+      severity: targetNode ? targetNode.severity : "info",
+    });
+  });
+  const nodeMap: Record<string, SNode> = {};
+  const out: Record<string, SLink[]> = {};
+  const inMap: Record<string, SLink[]> = {};
+  nodes.forEach((n) => {
+    nodeMap[n.id] = n;
+    out[n.id] = [];
+    inMap[n.id] = [];
+  });
+  links.forEach((l) => {
+    if (out[l.from]) out[l.from].push(l);
+    if (inMap[l.to]) inMap[l.to].push(l);
+  });
+  paths.sort((a, b) => b.risk - a.risk);
+  const xs = nodes.map((n) => n.x), ys = nodes.map((n) => n.y);
+  const bySeverity: Record<Severity, number> = { critical: 0, high: 0, medium: 0, low: 0, info: 0 };
+  nodes.filter((n) => n.type === "finding").forEach((n) => bySeverity[n.severity]++);
+  return {
+    nodes,
+    links,
+    nodeMap,
+    domains,
+    paths,
+    out,
+    in: inMap,
+    bounds: { minX: Math.min(...xs, 0), minY: Math.min(...ys, 0), maxX: Math.max(...xs, 800), maxY: Math.max(...ys, 600) },
+    stats: {
+      domains: domains.length,
+      assets: nodes.filter((n) => n.type === "asset").length,
+      findings: nodes.filter((n) => n.type === "finding").length,
+      bySeverity,
+    },
+  };
+}
+

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/stories/components/card/card.stories.tsx

@@ -0,0 +1,32 @@
+import {Meta, StoryObj} from '@storybook/react'
+import {card} from './card'
+
+const meta: Meta<typeof card> = {
+    title: "components/card",
+    component: card,
+    argTypes: {
+        title: {
+            control: {type: "text"}
+        },
+        discrption: {
+            control: {type: "text"}
+        }
+    }
+}
+export default meta
+
+type Story = StoryObj<typeof card>;
+
+export const primary: Story = {
+    args: {
+        title: "Hello primary card",
+        discrption: "This is description"
+    }
+}
+
+export const secondry: Story = {
+    args: {
+        title: "Hello secondry card",
+        discrption: "This is secondry card"
+    }
+}

package/src/stories/components/card/card.tsx

@@ -0,0 +1,13 @@
+interface cardProps {
+    title: string;
+    discrption: string;
+}
+
+export const card = ({title, discrption}: cardProps) => {
+    return (
+        <div>
+            <h1 className="text-xl font-bold">{title}</h1>
+            <div>{discrption}</div>
+        </div>
+    )
+}

package/src/stories/components/card/index.ts

@@ -0,0 +1 @@
+export {card} from './card'

package/tsconfig.app.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client", "node"],
+    "skipLibCheck": true,
+    "allowJs": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,53 @@
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+import dts from 'vite-plugin-dts';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+import peerDependencies from './package.json'
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [react(), dts({exclude: ["**/*.stories.ts","**/*.test.ts"]}), // Automatically generates your TypeScript types
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/Attack-path.tsx'),
+      formats: ['es'] // ESM format is the modern standard for React libraries
+    },
+    rollupOptions: {
+      external: Object.keys(peerDependencies),
+      output: { globals : {
+        react: 'react',
+        'react-dom': 'react-dom',
+        'react/jsx-runtime': 'react/jsx-runtime'
+      }},
+      // Do not bundle React to avoid version collisions for consumers
+      // external: ['react', 'react-dom', 'react/jsx-runtime']
+    }
+  },
+  test: {
+    projects: [{
+      extends: true,
+      plugins: [
+      // The plugin will run tests for the stories defined in your Storybook config
+      storybookTest({
+        configDir: path.join(dirname, '.storybook')
+      })],
+      test: {
+        name: 'storybook',
+        browser: {
+          enabled: true,
+          headless: true,
+          provider: playwright({}),
+          instances: [{
+            browser: 'chromium'
+          }]
+        }
+      }
+    }]
+  }
+});

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />