@backbay/glia 0.2.0-alpha.1

package/dist/primitives/three/AttackGraph/AttackGraph.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Html, Line } from "@react-three/drei";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { ATTACK_CHAIN_STATUS_COLORS, ATTACK_DETECTION_COLORS, ATTACK_TACTIC_LABELS, ATTACK_TACTIC_ORDER, } from "./types";
+const TECHNIQUE_BASE_SIZE = 0.22;
+function buildTechniqueIndex(chains) {
+    const techniqueMap = new Map();
+    const chainIndexMap = new Map();
+    chains.forEach((chain, chainIndex) => {
+        chain.techniques.forEach((technique) => {
+            if (!techniqueMap.has(technique.id)) {
+                techniqueMap.set(technique.id, technique);
+            }
+            if (!chainIndexMap.has(technique.id)) {
+                chainIndexMap.set(technique.id, chainIndex);
+            }
+        });
+    });
+    return {
+        techniques: Array.from(techniqueMap.values()),
+        chainIndexMap,
+    };
+}
+function layoutKillchain(techniques, chainIndexMap, chainCount, layout) {
+    const positions = new Map();
+    const tacticGroups = new Map();
+    techniques.forEach((technique) => {
+        const list = tacticGroups.get(technique.tactic) ?? [];
+        list.push(technique);
+        tacticGroups.set(technique.tactic, list);
+    });
+    const spacingX = layout === "matrix" ? 1.3 : 1.6;
+    const spacingY = layout === "matrix" ? 0.7 : 0.9;
+    const maxTactics = ATTACK_TACTIC_ORDER.length;
+    ATTACK_TACTIC_ORDER.forEach((tactic, tacticIndex) => {
+        const group = tacticGroups.get(tactic) ?? [];
+        group.sort((a, b) => a.id.localeCompare(b.id));
+        group.forEach((technique, index) => {
+            const x = (tacticIndex - (maxTactics - 1) / 2) * spacingX;
+            const y = ((group.length - 1) / 2 - index) * spacingY;
+            const chainIndex = chainIndexMap.get(technique.id) ?? 0;
+            const z = (chainIndex - (chainCount - 1) / 2) * 0.5;
+            positions.set(technique.id, new THREE.Vector3(x, y, z));
+        });
+    });
+    return positions;
+}
+function layoutTimeline(techniques, chainIndexMap, chainCount) {
+    const positions = new Map();
+    const withTimestamp = techniques.filter((technique) => technique.timestamp);
+    const timelineWidth = 12;
+    const timestamps = withTimestamp.map((technique) => technique.timestamp.getTime());
+    const minTime = timestamps.length ? Math.min(...timestamps) : 0;
+    const maxTime = timestamps.length ? Math.max(...timestamps) : 1;
+    const range = Math.max(1, maxTime - minTime);
+    techniques
+        .slice()
+        .sort((a, b) => {
+        if (a.timestamp && b.timestamp) {
+            return a.timestamp.getTime() - b.timestamp.getTime();
+        }
+        if (a.timestamp)
+            return -1;
+        if (b.timestamp)
+            return 1;
+        return a.id.localeCompare(b.id);
+    })
+        .forEach((technique, index) => {
+        const timeValue = technique.timestamp ? technique.timestamp.getTime() : minTime + index * 1000;
+        const x = ((timeValue - minTime) / range - 0.5) * timelineWidth;
+        const chainIndex = chainIndexMap.get(technique.id) ?? 0;
+        const y = (chainIndex - (chainCount - 1) / 2) * 1.2;
+        positions.set(technique.id, new THREE.Vector3(x, y, 0));
+    });
+    return positions;
+}
+function TechniqueNode({ technique, position, isSelected, showMitreIds, highlightDetected, animateProgression, isActive, onClick, }) {
+    const meshRef = React.useRef(null);
+    const [hovered, setHovered] = React.useState(false);
+    const baseColor = technique.detected
+        ? ATTACK_DETECTION_COLORS.detected
+        : ATTACK_DETECTION_COLORS.undetected;
+    const baseSize = TECHNIQUE_BASE_SIZE + technique.confidence * 0.12;
+    const dimmed = highlightDetected && !technique.detected;
+    useFrame(({ clock }) => {
+        if (!meshRef.current)
+            return;
+        const t = clock.elapsedTime;
+        let pulse = 1;
+        if (animateProgression && isActive) {
+            pulse = 1 + Math.sin(t * 3) * 0.12;
+        }
+        else if (technique.detected) {
+            pulse = 1 + Math.sin(t * 1.5) * 0.04;
+        }
+        meshRef.current.scale.setScalar(baseSize * pulse);
+    });
+    return (_jsxs("group", { position: position, children: [_jsxs("mesh", { ref: meshRef, onClick: (event) => {
+                    event.stopPropagation();
+                    onClick?.(technique);
+                }, onPointerOver: (event) => {
+                    event.stopPropagation();
+                    setHovered(true);
+                    document.body.style.cursor = "pointer";
+                }, onPointerOut: () => {
+                    setHovered(false);
+                    document.body.style.cursor = "auto";
+                }, scale: [baseSize, baseSize, baseSize], children: [_jsx("sphereGeometry", { args: [0.6, 24, 24] }), _jsx("meshStandardMaterial", { color: baseColor, emissive: baseColor, emissiveIntensity: technique.detected ? 0.8 : 0.35, roughness: 0.3, metalness: 0.5, transparent: true, opacity: dimmed ? 0.2 : 0.9 })] }), (isSelected || hovered || showMitreIds) && (_jsx(Html, { distanceFactor: 10, position: [0, 0.7, 0], children: _jsxs("div", { className: "rounded-md border border-white/10 bg-slate-950/85 px-2 py-1 text-[10px] uppercase text-white/80", children: [_jsx("div", { className: "font-semibold", children: showMitreIds ? technique.id : "Technique" }), _jsx("div", { className: "text-[9px] opacity-70", children: technique.name })] }) })), isSelected && (_jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [_jsx("ringGeometry", { args: [baseSize * 1.4, baseSize * 1.55, 32] }), _jsx("meshBasicMaterial", { color: baseColor, transparent: true, opacity: 0.6, side: THREE.DoubleSide })] }))] }));
+}
+function ChainPath({ chain, points, animate }) {
+    const lineRef = React.useRef(null);
+    const color = ATTACK_CHAIN_STATUS_COLORS[chain.status];
+    const dashed = chain.status === "active";
+    useFrame((_state, delta) => {
+        if (!lineRef.current || !dashed || !animate)
+            return;
+        if (lineRef.current.material) {
+            lineRef.current.material.dashOffset -= delta * 0.6;
+        }
+    });
+    return (_jsx(Line, { ref: lineRef, points: points, color: color, transparent: true, opacity: chain.status === "remediated" ? 0.3 : 0.6, lineWidth: chain.status === "active" ? 2.5 : 1.5, dashed: dashed, dashSize: 0.2, gapSize: 0.16 }));
+}
+export function AttackGraph({ chains, layout = "killchain", selectedTechnique, onTechniqueClick, showMitreIds = false, highlightDetected = false, animateProgression = true, position = [0, 0, 0], rotation = [0, 0, 0], }) {
+    const { techniques, chainIndexMap } = React.useMemo(() => buildTechniqueIndex(chains), [chains]);
+    const chainCount = chains.length || 1;
+    const labelSpacing = layout === "matrix" ? 1.3 : 1.6;
+    const positions = React.useMemo(() => {
+        if (layout === "timeline") {
+            return layoutTimeline(techniques, chainIndexMap, chainCount);
+        }
+        return layoutKillchain(techniques, chainIndexMap, chainCount, layout);
+    }, [techniques, chainIndexMap, chainCount, layout]);
+    const activeTechniqueIds = React.useMemo(() => {
+        const activeIds = new Set();
+        chains
+            .filter((chain) => chain.status === "active")
+            .forEach((chain) => {
+            chain.techniques.forEach((technique) => activeIds.add(technique.id));
+        });
+        return activeIds;
+    }, [chains]);
+    return (_jsxs("group", { position: position, rotation: rotation, children: [layout !== "timeline" &&
+                ATTACK_TACTIC_ORDER.map((tactic, index) => (_jsx(Html, { distanceFactor: 15, position: [(index - (ATTACK_TACTIC_ORDER.length - 1) / 2) * labelSpacing, 2.6, -1], children: _jsx("div", { className: "rounded bg-slate-900/70 px-2 py-1 text-[9px] font-semibold uppercase text-white/70", children: ATTACK_TACTIC_LABELS[tactic] }) }, tactic))), chains.map((chain) => {
+                const points = chain.techniques
+                    .map((technique) => positions.get(technique.id))
+                    .filter(Boolean);
+                if (points.length < 2)
+                    return null;
+                return (_jsx(ChainPath, { chain: chain, points: points, animate: animateProgression }, chain.id));
+            }), techniques.map((technique) => {
+                const positionVector = positions.get(technique.id);
+                if (!positionVector)
+                    return null;
+                return (_jsx(TechniqueNode, { technique: technique, position: positionVector, isSelected: selectedTechnique === technique.id, showMitreIds: showMitreIds, highlightDetected: highlightDetected, animateProgression: animateProgression, isActive: activeTechniqueIds.has(technique.id), onClick: onTechniqueClick }, technique.id));
+            })] }));
+}

package/dist/primitives/three/AttackGraph/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * AttackGraph - MITRE ATT&CK attack chain visualization
+ *
+ * @example
+ * ```tsx
+ * import { AttackGraph } from "@backbay/glia/primitives/three/AttackGraph";
+ *
+ * <AttackGraph chains={chains} layout="killchain" showMitreIds />
+ * ```
+ */
+export { AttackGraph } from "./AttackGraph";
+export type { AttackGraphProps, AttackChain, AttackTechnique, AttackTactic } from "./types";
+export { ATTACK_TACTIC_ORDER, ATTACK_TACTIC_LABELS, ATTACK_CHAIN_STATUS_COLORS, ATTACK_DETECTION_COLORS, } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/three/AttackGraph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/AttackGraph/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5F,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,0BAA0B,EAC1B,uBAAuB,GACxB,MAAM,SAAS,CAAC"}

package/dist/primitives/three/AttackGraph/index.js

@@ -0,0 +1,12 @@
+/**
+ * AttackGraph - MITRE ATT&CK attack chain visualization
+ *
+ * @example
+ * ```tsx
+ * import { AttackGraph } from "@backbay/glia/primitives/three/AttackGraph";
+ *
+ * <AttackGraph chains={chains} layout="killchain" showMitreIds />
+ * ```
+ */
+export { AttackGraph } from "./AttackGraph";
+export { ATTACK_TACTIC_ORDER, ATTACK_TACTIC_LABELS, ATTACK_CHAIN_STATUS_COLORS, ATTACK_DETECTION_COLORS, } from "./types";

package/dist/primitives/three/AttackGraph/types.d.ts

@@ -0,0 +1,42 @@
+/**
+ * AttackGraph Types
+ *
+ * Type definitions for MITRE ATT&CK attack graph visualization.
+ */
+export type AttackTactic = "reconnaissance" | "resource-development" | "initial-access" | "execution" | "persistence" | "privilege-escalation" | "defense-evasion" | "credential-access" | "discovery" | "lateral-movement" | "collection" | "command-and-control" | "exfiltration" | "impact";
+export interface AttackTechnique {
+    id: string;
+    name: string;
+    tactic: AttackTactic;
+    detected: boolean;
+    confidence: number;
+    timestamp?: Date;
+    evidence?: string[];
+}
+export interface AttackChain {
+    id: string;
+    name: string;
+    techniques: AttackTechnique[];
+    actor?: string;
+    campaign?: string;
+    status: "active" | "contained" | "remediated";
+}
+export interface AttackGraphProps {
+    chains: AttackChain[];
+    layout?: "killchain" | "matrix" | "timeline";
+    selectedTechnique?: string;
+    onTechniqueClick?: (technique: AttackTechnique) => void;
+    showMitreIds?: boolean;
+    highlightDetected?: boolean;
+    animateProgression?: boolean;
+    position?: [number, number, number];
+    rotation?: [number, number, number];
+}
+export declare const ATTACK_TACTIC_ORDER: AttackTactic[];
+export declare const ATTACK_TACTIC_LABELS: Record<AttackTactic, string>;
+export declare const ATTACK_CHAIN_STATUS_COLORS: Record<AttackChain["status"], string>;
+export declare const ATTACK_DETECTION_COLORS: {
+    detected: string;
+    undetected: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/primitives/three/AttackGraph/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/AttackGraph/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,MAAM,YAAY,GACpB,gBAAgB,GAChB,sBAAsB,GACtB,gBAAgB,GAChB,WAAW,GACX,aAAa,GACb,sBAAsB,GACtB,iBAAiB,GACjB,mBAAmB,GACnB,WAAW,GACX,kBAAkB,GAClB,YAAY,GACZ,qBAAqB,GACrB,cAAc,GACd,QAAQ,CAAC;AAEb,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC;CAC/C;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CACrC;AAED,eAAO,MAAM,mBAAmB,EAAE,YAAY,EAe7C,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAe7D,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,MAAM,CAI5E,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;CAGnC,CAAC"}

package/dist/primitives/three/AttackGraph/types.js

@@ -0,0 +1,46 @@
+/**
+ * AttackGraph Types
+ *
+ * Type definitions for MITRE ATT&CK attack graph visualization.
+ */
+export const ATTACK_TACTIC_ORDER = [
+    "reconnaissance",
+    "resource-development",
+    "initial-access",
+    "execution",
+    "persistence",
+    "privilege-escalation",
+    "defense-evasion",
+    "credential-access",
+    "discovery",
+    "lateral-movement",
+    "collection",
+    "command-and-control",
+    "exfiltration",
+    "impact",
+];
+export const ATTACK_TACTIC_LABELS = {
+    reconnaissance: "Recon",
+    "resource-development": "Resource Dev",
+    "initial-access": "Initial Access",
+    execution: "Execution",
+    persistence: "Persistence",
+    "privilege-escalation": "Priv Esc",
+    "defense-evasion": "Defense Evasion",
+    "credential-access": "Credential Access",
+    discovery: "Discovery",
+    "lateral-movement": "Lateral Movement",
+    collection: "Collection",
+    "command-and-control": "C2",
+    exfiltration: "Exfiltration",
+    impact: "Impact",
+};
+export const ATTACK_CHAIN_STATUS_COLORS = {
+    active: "#ff4455",
+    contained: "#ffb84d",
+    remediated: "#22ff88",
+};
+export const ATTACK_DETECTION_COLORS = {
+    detected: "#22ff88",
+    undetected: "#ffb347",
+};

package/dist/primitives/three/AuditTrail/AuditTrail.d.ts

@@ -0,0 +1,6 @@
+import type { AuditTrailProps } from "./types";
+export declare function AuditTrail({ events, maxEvents, length, position, orientation, showDetails, onEventClick, onEventHover, autoScroll, theme, showSummary, enableParticles, rotation, }: AuditTrailProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AuditTrail {
+    var displayName: string;
+}
+//# sourceMappingURL=AuditTrail.d.ts.map

package/dist/primitives/three/AuditTrail/AuditTrail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuditTrail.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/AuditTrail/AuditTrail.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAEV,eAAe,EAGhB,MAAM,SAAS,CAAC;AA8VjB,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,SAAc,EACd,MAAW,EACX,QAAoB,EACpB,WAA0B,EAC1B,WAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,UAAiB,EACjB,KAAe,EACf,WAAkB,EAClB,eAAsB,EACtB,QAAoB,GACrB,EAAE,eAAe,2CAmQjB;yBAjRe,UAAU"}

package/dist/primitives/three/AuditTrail/AuditTrail.js

@@ -0,0 +1,294 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * AuditTrail - 3D scrolling audit event timeline visualization
+ *
+ * Displays security audit events as a vertical or horizontal timeline
+ * with color-coded severity and interactive event cards.
+ */
+import * as React from "react";
+import { useFrame } from "@react-three/fiber";
+import { Html, Line } from "@react-three/drei";
+import * as THREE from "three";
+import { SEVERITY_COLORS, EVENT_GEOMETRIES, EVENT_TYPE_LABELS, THEME_COLORS, } from "./types";
+// -----------------------------------------------------------------------------
+// Flow Particles Sub-component
+// -----------------------------------------------------------------------------
+function FlowParticles({ length, orientation, particleCount = 30, speed = 0.5, color = "#00ccff", }) {
+    const particlesRef = React.useRef(null);
+    const particles = React.useMemo(() => {
+        const positions = new Float32Array(particleCount * 3);
+        const speeds = new Float32Array(particleCount);
+        for (let i = 0; i < particleCount; i++) {
+            const progress = Math.random();
+            if (orientation === "horizontal") {
+                positions[i * 3] = -length / 2 + progress * length;
+                positions[i * 3 + 1] = (Math.random() - 0.5) * 0.2;
+                positions[i * 3 + 2] = (Math.random() - 0.5) * 0.2;
+            }
+            else {
+                positions[i * 3] = (Math.random() - 0.5) * 0.2;
+                positions[i * 3 + 1] = length / 2 - progress * length;
+                positions[i * 3 + 2] = (Math.random() - 0.5) * 0.2;
+            }
+            speeds[i] = 0.3 + Math.random() * 0.7;
+        }
+        return { positions, speeds };
+    }, [length, orientation, particleCount]);
+    useFrame((_, delta) => {
+        if (!particlesRef.current)
+            return;
+        const posAttr = particlesRef.current.geometry.attributes.position;
+        const positions = posAttr.array;
+        for (let i = 0; i < particleCount; i++) {
+            const idx = orientation === "horizontal" ? i * 3 : i * 3 + 1;
+            const direction = orientation === "horizontal" ? 1 : -1;
+            positions[idx] += delta * speed * particles.speeds[i] * direction;
+            // Wrap around
+            if (orientation === "horizontal") {
+                if (positions[idx] > length / 2)
+                    positions[idx] = -length / 2;
+            }
+            else {
+                if (positions[idx] < -length / 2)
+                    positions[idx] = length / 2;
+            }
+        }
+        posAttr.needsUpdate = true;
+    });
+    return (_jsxs("points", { ref: particlesRef, children: [_jsx("bufferGeometry", { children: _jsx("bufferAttribute", { attach: "attributes-position", args: [particles.positions, 3] }) }), _jsx("pointsMaterial", { color: color, size: 0.03, transparent: true, opacity: 0.6, sizeAttenuation: true, blending: THREE.AdditiveBlending, depthWrite: false })] }));
+}
+// -----------------------------------------------------------------------------
+// Event Node Sub-component
+// -----------------------------------------------------------------------------
+function EventNode({ event, position, onEventClick, onEventHover, showDetails, theme = "cyber", }) {
+    const meshRef = React.useRef(null);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const themeColors = THEME_COLORS[theme];
+    const severityColor = new THREE.Color(SEVERITY_COLORS[event.severity]);
+    const geometryType = EVENT_GEOMETRIES[event.type];
+    useFrame((state) => {
+        if (!meshRef.current)
+            return;
+        const t = state.clock.elapsedTime;
+        // Rotation animation
+        meshRef.current.rotation.y = t * 0.5;
+        meshRef.current.rotation.z = Math.sin(t * 0.3) * 0.1;
+        // Pulse for critical/error events
+        if (event.severity === "critical" || event.severity === "error") {
+            const pulse = 1 + Math.sin(t * 5) * 0.15;
+            meshRef.current.scale.setScalar(pulse * (isHovered ? 1.3 : 1));
+        }
+        else {
+            meshRef.current.scale.setScalar(isHovered ? 1.3 : 1);
+        }
+        // Update emissive
+        const material = meshRef.current.material;
+        if (material) {
+            material.emissiveIntensity = isHovered ? 1.2 : 0.6;
+        }
+    });
+    const handlePointerEnter = React.useCallback((e) => {
+        e.stopPropagation();
+        setIsHovered(true);
+        onEventHover?.(event);
+        document.body.style.cursor = "pointer";
+    }, [event, onEventHover]);
+    const handlePointerLeave = React.useCallback(() => {
+        setIsHovered(false);
+        onEventHover?.(null);
+        document.body.style.cursor = "auto";
+    }, [onEventHover]);
+    const handleClick = React.useCallback((e) => {
+        e.stopPropagation();
+        onEventClick?.(event);
+    }, [event, onEventClick]);
+    const formatTime = (date) => {
+        return date.toLocaleTimeString("en-US", {
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+            hour12: false,
+        });
+    };
+    // Create geometry based on event type
+    const renderGeometry = () => {
+        const size = 0.08;
+        switch (geometryType) {
+            case "torus":
+                return _jsx("torusGeometry", { args: [size, size * 0.4, 8, 16] });
+            case "box":
+                return _jsx("boxGeometry", { args: [size * 1.5, size * 1.5, size * 1.5] });
+            case "octahedron":
+                return _jsx("octahedronGeometry", { args: [size * 1.2] });
+            case "icosahedron":
+                return _jsx("icosahedronGeometry", { args: [size * 1.1] });
+            case "cone":
+                return _jsx("coneGeometry", { args: [size, size * 2, 8] });
+            default:
+                return _jsx("sphereGeometry", { args: [size, 16, 16] });
+        }
+    };
+    return (_jsxs("group", { position: position, children: [_jsxs("mesh", { ref: meshRef, onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, onClick: handleClick, children: [renderGeometry(), _jsx("meshStandardMaterial", { color: severityColor, emissive: severityColor, emissiveIntensity: 0.6, transparent: true, opacity: event.success ? 0.9 : 0.6, metalness: 0.3, roughness: 0.4 })] }), _jsxs("mesh", { scale: 2.5, children: [_jsx("sphereGeometry", { args: [0.08, 12, 12] }), _jsx("meshBasicMaterial", { color: severityColor, transparent: true, opacity: 0.12, blending: THREE.AdditiveBlending, depthWrite: false })] }), !event.success && (_jsxs("group", { scale: 0.15, children: [_jsx(Line, { points: [
+                            [-1, -1, 0],
+                            [1, 1, 0],
+                        ], color: "#ff0000", lineWidth: 3 }), _jsx(Line, { points: [
+                            [-1, 1, 0],
+                            [1, -1, 0],
+                        ], color: "#ff0000", lineWidth: 3 })] })), (showDetails || isHovered) && (_jsx(Html, { position: [0.25, 0.15, 0], center: false, children: _jsxs("div", { style: {
+                        background: "rgba(0, 0, 0, 0.92)",
+                        border: `1px solid ${isHovered ? severityColor.getStyle() : themeColors.primary}`,
+                        borderRadius: "4px",
+                        padding: isHovered ? "10px 14px" : "4px 8px",
+                        fontFamily: "'JetBrains Mono', 'SF Mono', monospace",
+                        fontSize: isHovered ? "11px" : "9px",
+                        color: "#ffffff",
+                        minWidth: isHovered ? "200px" : "auto",
+                        boxShadow: `0 0 20px ${severityColor.getStyle()}30`,
+                        transition: "all 0.15s ease",
+                    }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx("span", { style: {
+                                        color: severityColor.getStyle(),
+                                        fontWeight: 700,
+                                        fontSize: "8px",
+                                        padding: "2px 5px",
+                                        background: `${severityColor.getStyle()}25`,
+                                        borderRadius: "3px",
+                                    }, children: EVENT_TYPE_LABELS[event.type] }), _jsx("span", { style: {
+                                        fontSize: "8px",
+                                        opacity: 0.45,
+                                        textTransform: "uppercase",
+                                    }, children: event.severity }), !event.success && (_jsx("span", { style: {
+                                        color: "#ff4444",
+                                        fontSize: "7px",
+                                        fontWeight: 700,
+                                        marginLeft: "auto",
+                                        opacity: 0.7,
+                                    }, children: "FAILED" }))] }), isHovered && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                        marginTop: "8px",
+                                        paddingTop: "8px",
+                                        borderTop: "1px solid #333",
+                                    }, children: [_jsxs("div", { style: { marginBottom: "6px" }, children: [_jsx("span", { style: { color: "#666", fontSize: "9px" }, children: "Actor" }), _jsx("div", { style: { color: themeColors.primary }, children: event.actor })] }), _jsxs("div", { style: { marginBottom: "6px" }, children: [_jsx("span", { style: { color: "#666", fontSize: "9px" }, children: "Resource" }), _jsx("div", { style: {
+                                                        wordBreak: "break-all",
+                                                        opacity: 0.9,
+                                                        fontSize: "10px",
+                                                    }, children: event.resource })] }), _jsxs("div", { style: { marginBottom: "6px" }, children: [_jsx("span", { style: { color: "#666", fontSize: "9px" }, children: "Action" }), _jsx("div", { style: { opacity: 0.9, fontSize: "10px" }, children: event.action })] }), event.details && (_jsxs("div", { children: [_jsx("span", { style: { color: "#666", fontSize: "9px" }, children: "Details" }), _jsx("div", { style: { opacity: 0.7, fontSize: "10px" }, children: event.details })] }))] }), _jsx("div", { style: {
+                                        marginTop: "8px",
+                                        paddingTop: "6px",
+                                        borderTop: "1px solid #222",
+                                        fontSize: "9px",
+                                        opacity: 0.5,
+                                    }, children: formatTime(event.timestamp) })] }))] }) }))] }));
+}
+// -----------------------------------------------------------------------------
+// Main AuditTrail Component
+// -----------------------------------------------------------------------------
+export function AuditTrail({ events, maxEvents = 20, length = 10, position = [0, 0, 0], orientation = "horizontal", showDetails = false, onEventClick, onEventHover, autoScroll = true, theme = "cyber", showSummary = true, enableParticles = true, rotation = [0, 0, 0], }) {
+    const groupRef = React.useRef(null);
+    // Limit displayed events
+    const displayedEvents = React.useMemo(() => {
+        return events.slice(-maxEvents);
+    }, [events, maxEvents]);
+    // Theme colors
+    const themeColors = THEME_COLORS[theme];
+    // Calculate positions for events along the timeline
+    const eventPositions = React.useMemo(() => {
+        if (displayedEvents.length === 0)
+            return [];
+        const spacing = length / Math.max(1, displayedEvents.length);
+        return displayedEvents.map((_, i) => {
+            if (orientation === "horizontal") {
+                const x = -length / 2 + spacing / 2 + i * spacing;
+                return [x, 0, 0];
+            }
+            else {
+                const y = length / 2 - spacing / 2 - i * spacing;
+                return [0, y, 0];
+            }
+        });
+    }, [displayedEvents.length, length, orientation]);
+    // Timeline spine points
+    const spinePoints = React.useMemo(() => {
+        const padding = 0.5;
+        if (orientation === "horizontal") {
+            return [
+                [-length / 2 - padding, 0, 0],
+                [length / 2 + padding, 0, 0],
+            ];
+        }
+        else {
+            return [
+                [0, length / 2 + padding, 0],
+                [0, -length / 2 - padding, 0],
+            ];
+        }
+    }, [length, orientation]);
+    // Count severities
+    const severityCounts = React.useMemo(() => {
+        return displayedEvents.reduce((acc, e) => {
+            acc[e.severity]++;
+            if (!e.success)
+                acc.failed++;
+            return acc;
+        }, { info: 0, warning: 0, error: 0, critical: 0, failed: 0 });
+    }, [displayedEvents]);
+    return (_jsxs("group", { ref: groupRef, position: position, rotation: rotation, children: [_jsx(Line, { points: spinePoints, color: themeColors.spine, lineWidth: 3, transparent: true, opacity: 0.8 }), _jsx(Line, { points: spinePoints, color: themeColors.primary, lineWidth: 8, transparent: true, opacity: 0.15 }), enableParticles && (_jsx(FlowParticles, { length: length, orientation: orientation, color: themeColors.particle, particleCount: 40, speed: 0.8 })), displayedEvents.map((event, index) => (_jsx(EventNode, { event: event, position: eventPositions[index], onEventClick: onEventClick, onEventHover: onEventHover, showDetails: showDetails, theme: theme }, event.id))), displayedEvents.map((event, index) => {
+                const pos = eventPositions[index];
+                const lineEnd = orientation === "horizontal"
+                    ? [pos[0], -0.15, 0]
+                    : [-0.15, pos[1], 0];
+                return (_jsx(Line, { points: [pos, lineEnd], color: SEVERITY_COLORS[event.severity], lineWidth: 1, transparent: true, opacity: 0.3 }, `line-${event.id}`));
+            }), _jsx("group", { position: orientation === "horizontal"
+                    ? [length / 2 + 0.7, 0, 0]
+                    : [0, -length / 2 - 0.7, 0], children: _jsxs("mesh", { rotation: orientation === "horizontal"
+                        ? [0, 0, -Math.PI / 2]
+                        : [0, 0, Math.PI], children: [_jsx("coneGeometry", { args: [0.08, 0.2, 6] }), _jsx("meshBasicMaterial", { color: themeColors.primary, transparent: true, opacity: 0.6 })] }) }), showSummary && (_jsx(Html, { position: orientation === "horizontal"
+                    ? [-length / 2 - 1.5, 0.5, 0]
+                    : [0.8, length / 2 + 0.3, 0], center: true, children: _jsxs("div", { style: {
+                        background: "rgba(0, 8, 12, 0.95)",
+                        border: `1px solid ${themeColors.primary}50`,
+                        borderRadius: "5px",
+                        padding: "10px 14px",
+                        fontFamily: "'JetBrains Mono', 'SF Mono', monospace",
+                        fontSize: "10px",
+                        color: themeColors.primary,
+                        boxShadow: `0 0 20px ${themeColors.glow}, inset 0 0 15px ${themeColors.glow}`,
+                        minWidth: "110px",
+                    }, children: [_jsx("div", { style: {
+                                fontWeight: 700,
+                                fontSize: "11px",
+                                marginBottom: "8px",
+                                letterSpacing: "1.5px",
+                                borderBottom: `1px solid ${themeColors.primary}40`,
+                                paddingBottom: "6px",
+                                textAlign: "center",
+                            }, children: "AUDIT LOG" }), _jsxs("div", { style: {
+                                display: "flex",
+                                justifyContent: "space-between",
+                                marginBottom: "2px",
+                            }, children: [_jsx("span", { style: { opacity: 0.6 }, children: "Events:" }), _jsx("span", { style: { fontWeight: 600 }, children: displayedEvents.length })] }), _jsxs("div", { style: {
+                                display: "flex",
+                                justifyContent: "space-between",
+                                marginBottom: "2px",
+                                color: SEVERITY_COLORS.warning,
+                            }, children: [_jsx("span", { style: { opacity: 0.7 }, children: "Warn:" }), _jsx("span", { style: { fontWeight: 600 }, children: severityCounts.warning })] }), _jsxs("div", { style: {
+                                display: "flex",
+                                justifyContent: "space-between",
+                                marginBottom: "2px",
+                                color: SEVERITY_COLORS.error,
+                            }, children: [_jsx("span", { style: { opacity: 0.7 }, children: "Error:" }), _jsx("span", { style: { fontWeight: 600 }, children: severityCounts.error })] }), _jsxs("div", { style: {
+                                display: "flex",
+                                justifyContent: "space-between",
+                                marginBottom: "2px",
+                                color: SEVERITY_COLORS.critical,
+                            }, children: [_jsx("span", { style: { opacity: 0.7 }, children: "Critical:" }), _jsx("span", { style: { fontWeight: 600 }, children: severityCounts.critical })] }), severityCounts.failed > 0 && (_jsxs("div", { style: {
+                                display: "flex",
+                                justifyContent: "space-between",
+                                marginTop: "4px",
+                                paddingTop: "4px",
+                                borderTop: "1px solid #333",
+                                color: "#ff4444",
+                            }, children: [_jsx("span", { style: { opacity: 0.7 }, children: "Failed:" }), _jsx("span", { style: { fontWeight: 600 }, children: severityCounts.failed })] }))] }) })), _jsxs("mesh", { position: [0, 0, -0.1], children: [_jsx("planeGeometry", { args: orientation === "horizontal"
+                            ? [length + 2, 1.5]
+                            : [1.5, length + 2] }), _jsx("meshBasicMaterial", { color: themeColors.primary, transparent: true, opacity: 0.02, side: THREE.DoubleSide, blending: THREE.AdditiveBlending, depthWrite: false })] })] }));
+}
+AuditTrail.displayName = "AuditTrail";

package/dist/primitives/three/AuditTrail/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * AuditTrail - 3D audit event timeline visualization
+ *
+ * @example
+ * ```tsx
+ * import { AuditTrail } from "@backbay/glia/primitives/three/AuditTrail";
+ *
+ * <AuditTrail
+ *   events={auditEvents}
+ *   maxEvents={20}
+ *   length={10}
+ *   orientation="horizontal"
+ *   theme="cyber"
+ *   onEventClick={(event) => console.log('Clicked:', event)}
+ * />
+ * ```
+ */
+export { AuditTrail } from "./AuditTrail";
+export type { AuditEvent, AuditEventType, AuditSeverity, AuditTrailProps, EventNodeProps, FlowParticlesProps, } from "./types";
+export { SEVERITY_COLORS, EVENT_GEOMETRIES, EVENT_TYPE_LABELS, THEME_COLORS, } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/three/AuditTrail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/AuditTrail/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACV,UAAU,EACV,cAAc,EACd,aAAa,EACb,eAAe,EACf,cAAc,EACd,kBAAkB,GACnB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,GACb,MAAM,SAAS,CAAC"}

package/dist/primitives/three/AuditTrail/index.js

@@ -0,0 +1,19 @@
+/**
+ * AuditTrail - 3D audit event timeline visualization
+ *
+ * @example
+ * ```tsx
+ * import { AuditTrail } from "@backbay/glia/primitives/three/AuditTrail";
+ *
+ * <AuditTrail
+ *   events={auditEvents}
+ *   maxEvents={20}
+ *   length={10}
+ *   orientation="horizontal"
+ *   theme="cyber"
+ *   onEventClick={(event) => console.log('Clicked:', event)}
+ * />
+ * ```
+ */
+export { AuditTrail } from "./AuditTrail";
+export { SEVERITY_COLORS, EVENT_GEOMETRIES, EVENT_TYPE_LABELS, THEME_COLORS, } from "./types";