@backbay/glia 0.2.0-alpha.1

package/dist/primitives/three/SecurityShield/SecurityShield.js

@@ -0,0 +1,200 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SecurityShield - 3D hexagonal force-field visualization
+ *
+ * A protective dome made of tessellated hexagons that visualizes
+ * security/protection status with dynamic visual effects.
+ */
+import * as React from "react";
+import { useFrame } from "@react-three/fiber";
+import { Html, Instances, Instance } from "@react-three/drei";
+import * as THREE from "three";
+import { STATUS_COLORS } from "./types";
+// -----------------------------------------------------------------------------
+// Geometry Utilities
+// -----------------------------------------------------------------------------
+/**
+ * Generate hexagonal tile positions for a dome surface
+ */
+function generateHexDomeTiles(radius, rings = 4) {
+    const tiles = [];
+    const hexSize = radius / (rings * 1.8);
+    // Generate concentric rings of hexagons on a hemispherical surface
+    let index = 0;
+    // Center top hexagon
+    tiles.push({
+        position: [0, radius * 0.95, 0],
+        rotation: [0, 0, 0],
+        scale: hexSize * 0.8,
+        index: index++,
+    });
+    // Generate rings from top to base
+    for (let ring = 1; ring <= rings; ring++) {
+        const phi = (ring / rings) * (Math.PI / 2) * 0.85; // Latitude angle
+        const ringRadius = radius * Math.sin(phi);
+        const y = radius * Math.cos(phi);
+        const hexCount = Math.max(6, Math.floor(ring * 6));
+        for (let i = 0; i < hexCount; i++) {
+            const theta = (i / hexCount) * Math.PI * 2 + (ring % 2) * (Math.PI / hexCount);
+            const x = ringRadius * Math.cos(theta);
+            const z = ringRadius * Math.sin(theta);
+            // Calculate normal direction for rotation
+            const normal = new THREE.Vector3(x, y, z).normalize();
+            const up = new THREE.Vector3(0, 1, 0);
+            const quaternion = new THREE.Quaternion().setFromUnitVectors(up, normal);
+            const euler = new THREE.Euler().setFromQuaternion(quaternion);
+            tiles.push({
+                position: [x, y, z],
+                rotation: [euler.x, euler.y, euler.z],
+                scale: hexSize * (1 - ring * 0.05),
+                index: index++,
+            });
+        }
+    }
+    return tiles;
+}
+// -----------------------------------------------------------------------------
+// Hexagon Shape
+// -----------------------------------------------------------------------------
+function createHexagonShape(size) {
+    const shape = new THREE.Shape();
+    const sides = 6;
+    for (let i = 0; i <= sides; i++) {
+        const angle = (i / sides) * Math.PI * 2 - Math.PI / 2;
+        const x = Math.cos(angle) * size;
+        const y = Math.sin(angle) * size;
+        if (i === 0) {
+            shape.moveTo(x, y);
+        }
+        else {
+            shape.lineTo(x, y);
+        }
+    }
+    return shape;
+}
+const HexTileInstance = React.memo(function HexTileInstance({ tile, opacity, time, pulseSpeed, level, rippleCenter, rippleStrength, }) {
+    const instanceRef = React.useRef(null);
+    // Calculate per-tile animation offset
+    const tileOffset = tile.index * 0.15;
+    const tilePulse = pulseSpeed > 0 ? Math.sin(time * pulseSpeed + tileOffset) * 0.15 + 0.85 : 1;
+    // Calculate ripple effect based on distance from ripple center
+    const tilePos = new THREE.Vector3(...tile.position);
+    const distFromRipple = tilePos.distanceTo(rippleCenter);
+    const rippleWave = Math.max(0, 1 - distFromRipple * 0.5) * rippleStrength;
+    const finalOpacity = opacity * level * tilePulse + rippleWave * 0.3;
+    const scale = tile.scale * (1 + rippleWave * 0.2);
+    return (_jsx(Instance, { ref: instanceRef, position: tile.position, rotation: tile.rotation, scale: [scale, scale, scale], color: new THREE.Color().setHSL(0.5, 1, 0.5 + finalOpacity * 0.3) }));
+});
+// -----------------------------------------------------------------------------
+// Main SecurityShield Component
+// -----------------------------------------------------------------------------
+export function SecurityShield({ level, status, threatsBlocked = 0, radius = 2, position = [0, 0, 0], showStats = true, onClick, animationSpeed = 1, showHoneycomb = true, }) {
+    const domeRef = React.useRef(null);
+    const honeycombRef = React.useRef(null);
+    const baseRingRef = React.useRef(null);
+    const rippleRef = React.useRef(null);
+    const [lastThreats, setLastThreats] = React.useState(threatsBlocked);
+    const [ripple, setRipple] = React.useState(0);
+    const [rippleCenter] = React.useState(() => new THREE.Vector3(0, radius * 0.5, 0));
+    const timeRef = React.useRef(0);
+    // Generate hexagon tiles for dome
+    const hexTiles = React.useMemo(() => generateHexDomeTiles(radius * 0.98, 5), [radius]);
+    // Get status configuration
+    const statusConfig = STATUS_COLORS[status];
+    const primaryColor = React.useMemo(() => new THREE.Color(statusConfig.primary), [statusConfig.primary]);
+    const glowColor = React.useMemo(() => new THREE.Color(statusConfig.glow), [statusConfig.glow]);
+    // Ripple effect when threats blocked changes
+    React.useEffect(() => {
+        if (threatsBlocked > lastThreats) {
+            setRipple(1);
+            // Randomize ripple center for visual interest
+            rippleCenter.set((Math.random() - 0.5) * radius, radius * (0.3 + Math.random() * 0.4), (Math.random() - 0.5) * radius);
+        }
+        setLastThreats(threatsBlocked);
+    }, [threatsBlocked, lastThreats, rippleCenter, radius]);
+    // Animation frame
+    useFrame((state, delta) => {
+        timeRef.current = state.clock.elapsedTime * animationSpeed;
+        const t = timeRef.current;
+        // Main dome animation
+        if (domeRef.current) {
+            const material = domeRef.current.material;
+            const pulseSpeed = statusConfig.pulseSpeed * animationSpeed;
+            let pulse = 1;
+            if (pulseSpeed > 0) {
+                pulse = Math.sin(t * pulseSpeed) * 0.15 + 0.85;
+                // Breach mode: add flicker
+                if (status === "breach") {
+                    pulse *= 0.8 + Math.random() * 0.4;
+                }
+            }
+            material.opacity = level * pulse * 0.5;
+            material.emissiveIntensity = level * pulse * 0.4;
+        }
+        // Base ring glow animation
+        if (baseRingRef.current) {
+            const material = baseRingRef.current.material;
+            const ringPulse = Math.sin(t * statusConfig.pulseSpeed * 1.5) * 0.2 + 0.8;
+            material.emissiveIntensity = level * ringPulse * 0.6;
+        }
+        // Ripple decay
+        if (ripple > 0) {
+            setRipple((r) => Math.max(0, r - delta * 2.5));
+        }
+        // Ripple mesh animation
+        if (rippleRef.current && ripple > 0) {
+            const scale = 1 + (1 - ripple) * 0.4;
+            rippleRef.current.scale.setScalar(scale);
+            const mat = rippleRef.current.material;
+            mat.opacity = ripple * 0.4;
+        }
+        // Honeycomb rotation for subtle motion
+        if (honeycombRef.current && status !== "offline") {
+            honeycombRef.current.rotation.y += delta * 0.03 * animationSpeed;
+        }
+    });
+    // Hexagon geometry for instances
+    const hexGeometry = React.useMemo(() => {
+        const shape = createHexagonShape(1);
+        const geometry = new THREE.ShapeGeometry(shape);
+        geometry.rotateX(-Math.PI / 2); // Face outward
+        return geometry;
+    }, []);
+    return (_jsxs("group", { position: position, onClick: onClick, children: [_jsxs("mesh", { ref: domeRef, children: [_jsx("sphereGeometry", { args: [radius, 64, 32, 0, Math.PI * 2, 0, Math.PI / 2] }), _jsx("meshStandardMaterial", { color: primaryColor, transparent: true, opacity: 0.4, side: THREE.DoubleSide, emissive: primaryColor, emissiveIntensity: 0.3, wireframe: status === "offline", depthWrite: false })] }), _jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [radius * 0.95, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2] }), _jsx("meshBasicMaterial", { color: glowColor, transparent: true, opacity: level * 0.15, side: THREE.BackSide, blending: THREE.AdditiveBlending, depthWrite: false })] }), showHoneycomb && status !== "offline" && (_jsx("group", { ref: honeycombRef, children: _jsxs(Instances, { geometry: hexGeometry, limit: hexTiles.length, children: [_jsx("meshBasicMaterial", { color: primaryColor, transparent: true, opacity: 0.3, side: THREE.DoubleSide, blending: THREE.AdditiveBlending, depthWrite: false }), hexTiles.map((tile) => (_jsx(HexTileInstance, { tile: tile, color: primaryColor, opacity: 0.25, time: timeRef.current, pulseSpeed: statusConfig.pulseSpeed, level: level, rippleCenter: rippleCenter, rippleStrength: ripple }, tile.index)))] }) })), _jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [radius * 1.01, 6, 4, 0, Math.PI * 2, 0, Math.PI / 2] }), _jsx("meshBasicMaterial", { color: primaryColor, transparent: true, opacity: status === "offline" ? 0.1 : 0.2, wireframe: true, depthWrite: false })] }), _jsxs("mesh", { ref: baseRingRef, rotation: [Math.PI / 2, 0, 0], children: [_jsx("torusGeometry", { args: [radius, 0.04, 16, 64] }), _jsx("meshStandardMaterial", { color: primaryColor, emissive: primaryColor, emissiveIntensity: 0.5, transparent: true, opacity: 0.9 })] }), _jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [_jsx("torusGeometry", { args: [radius * 1.05, 0.02, 8, 64] }), _jsx("meshBasicMaterial", { color: primaryColor, transparent: true, opacity: level * 0.4, blending: THREE.AdditiveBlending, depthWrite: false })] }), ripple > 0 && (_jsxs("mesh", { ref: rippleRef, children: [_jsx("sphereGeometry", { args: [radius * 1.02, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2] }), _jsx("meshBasicMaterial", { color: "#ffffff", transparent: true, opacity: ripple * 0.3, side: THREE.DoubleSide, blending: THREE.AdditiveBlending, depthWrite: false })] })), ripple > 0.5 && (_jsxs("mesh", { position: [rippleCenter.x * 0.8, rippleCenter.y, rippleCenter.z * 0.8], children: [_jsx("sphereGeometry", { args: [0.15, 16, 16] }), _jsx("meshBasicMaterial", { color: "#ff0000", transparent: true, opacity: (ripple - 0.5) * 2, blending: THREE.AdditiveBlending })] })), status === "active" && (_jsx(ScanLine, { radius: radius, color: primaryColor, speed: animationSpeed })), status === "warning" && (_jsx(WarningIndicators, { radius: radius, color: primaryColor, speed: animationSpeed })), showStats && (_jsx(Html, { position: [0, radius + 0.5, 0], center: true, children: _jsxs("div", { className: "bg-black/85 text-xs font-mono px-3 py-2 rounded-md border backdrop-blur-sm", style: {
+                        borderColor: statusConfig.primary,
+                        boxShadow: `0 0 20px ${statusConfig.primary}40, inset 0 0 10px ${statusConfig.primary}20`,
+                        minWidth: "90px",
+                    }, children: [_jsx("div", { className: "font-bold tracking-wider text-center mb-1", style: { color: statusConfig.primary }, children: status.toUpperCase() }), _jsxs("div", { className: "text-white/80 text-center", children: [_jsx("span", { className: "text-white/50", children: "Level:" }), " ", Math.round(level * 100), "%"] }), threatsBlocked > 0 && (_jsxs("div", { className: "text-red-400 text-center mt-1 animate-pulse", children: [_jsx("span", { className: "text-red-500/70", children: "Blocked:" }), " ", threatsBlocked] }))] }) }))] }));
+}
+function ScanLine({ radius, color, speed }) {
+    const ringRef = React.useRef(null);
+    useFrame(({ clock }) => {
+        if (!ringRef.current)
+            return;
+        const t = clock.elapsedTime * speed;
+        // Scan from top to bottom and back
+        const scanProgress = (Math.sin(t * 0.8) + 1) / 2;
+        const y = radius * (1 - scanProgress * 0.9);
+        const ringRadius = Math.sqrt(radius * radius - y * y);
+        ringRef.current.position.y = y;
+        ringRef.current.scale.set(ringRadius, ringRadius, 1);
+        const mat = ringRef.current.material;
+        mat.opacity = 0.3 + scanProgress * 0.2;
+    });
+    return (_jsxs("mesh", { ref: ringRef, rotation: [Math.PI / 2, 0, 0], children: [_jsx("ringGeometry", { args: [0.98, 1, 64] }), _jsx("meshBasicMaterial", { color: color, transparent: true, opacity: 0.4, side: THREE.DoubleSide, blending: THREE.AdditiveBlending, depthWrite: false })] }));
+}
+function WarningIndicators({ radius, color, speed }) {
+    const groupRef = React.useRef(null);
+    useFrame(({ clock }) => {
+        if (!groupRef.current)
+            return;
+        groupRef.current.rotation.y = clock.elapsedTime * speed * 0.5;
+    });
+    return (_jsx("group", { ref: groupRef, children: [0, 1, 2, 3].map((i) => (_jsxs("mesh", { position: [
+                Math.cos((i / 4) * Math.PI * 2) * radius * 0.7,
+                radius * 0.5,
+                Math.sin((i / 4) * Math.PI * 2) * radius * 0.7,
+            ], rotation: [0, (i / 4) * Math.PI * 2, 0], children: [_jsx("coneGeometry", { args: [0.1, 0.3, 3] }), _jsx("meshBasicMaterial", { color: color, transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending })] }, i))) }));
+}
+SecurityShield.displayName = "SecurityShield";

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

@@ -0,0 +1,20 @@
+/**
+ * SecurityShield - 3D hexagonal force-field visualization
+ *
+ * @example
+ * ```tsx
+ * import { SecurityShield } from "@backbay/glia/primitives/three/SecurityShield";
+ *
+ * <SecurityShield
+ *   level={0.85}
+ *   status="active"
+ *   threatsBlocked={12}
+ *   radius={2}
+ *   showStats
+ * />
+ * ```
+ */
+export { SecurityShield } from "./SecurityShield";
+export type { SecurityShieldProps, ShieldStatus, HexagonTileData, StatusColorConfig, } from "./types";
+export { STATUS_COLORS } from "./types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/SecurityShield/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACV,mBAAmB,EACnB,YAAY,EACZ,eAAe,EACf,iBAAiB,GAClB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,18 @@
+/**
+ * SecurityShield - 3D hexagonal force-field visualization
+ *
+ * @example
+ * ```tsx
+ * import { SecurityShield } from "@backbay/glia/primitives/three/SecurityShield";
+ *
+ * <SecurityShield
+ *   level={0.85}
+ *   status="active"
+ *   threatsBlocked={12}
+ *   radius={2}
+ *   showStats
+ * />
+ * ```
+ */
+export { SecurityShield } from "./SecurityShield";
+export { STATUS_COLORS } from "./types";

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

@@ -0,0 +1,39 @@
+/**
+ * SecurityShield Types
+ *
+ * Type definitions for the 3D security shield visualization component.
+ */
+export type ShieldStatus = "active" | "warning" | "breach" | "offline";
+export interface SecurityShieldProps {
+    /** Protection level 0-1 (0=breached, 1=fully protected) */
+    level: number;
+    /** Current status */
+    status: ShieldStatus;
+    /** Number of active threats being blocked */
+    threatsBlocked?: number;
+    /** Shield radius */
+    radius?: number;
+    /** Position in 3D space */
+    position?: [number, number, number];
+    /** Show stats overlay */
+    showStats?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Animation speed multiplier */
+    animationSpeed?: number;
+    /** Enable honeycomb pattern overlay */
+    showHoneycomb?: boolean;
+}
+export interface HexagonTileData {
+    position: [number, number, number];
+    rotation: [number, number, number];
+    scale: number;
+    index: number;
+}
+export interface StatusColorConfig {
+    primary: string;
+    glow: string;
+    pulseSpeed: number;
+}
+export declare const STATUS_COLORS: Record<ShieldStatus, StatusColorConfig>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/SecurityShield/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEvE,MAAM,WAAW,mBAAmB;IAClC,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,MAAM,EAAE,YAAY,CAAC;IACrB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uCAAuC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAqBjE,CAAC"}

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

@@ -0,0 +1,27 @@
+/**
+ * SecurityShield Types
+ *
+ * Type definitions for the 3D security shield visualization component.
+ */
+export const STATUS_COLORS = {
+    active: {
+        primary: "#00f0ff",
+        glow: "#00ccdd",
+        pulseSpeed: 1,
+    },
+    warning: {
+        primary: "#ffaa00",
+        glow: "#ff8800",
+        pulseSpeed: 3,
+    },
+    breach: {
+        primary: "#ff3333",
+        glow: "#ff0000",
+        pulseSpeed: 8,
+    },
+    offline: {
+        primary: "#444444",
+        glow: "#333333",
+        pulseSpeed: 0,
+    },
+};

package/dist/primitives/three/Sentinel/AvatarMode.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const AvatarMode: React.FC;
+export default AvatarMode;
+//# sourceMappingURL=AvatarMode.d.ts.map

package/dist/primitives/three/Sentinel/AvatarMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarMode.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/AvatarMode.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAkV9D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAmO9B,CAAC;AAEF,eAAe,UAAU,CAAC"}