@backbay/glia 0.2.0-alpha.1

package/dist/primitives/three/Sentinel/AvatarMode.js

@@ -0,0 +1,443 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AvatarMode
+ *
+ * Full-screen avatar display with camera PIP for face tracking.
+ * Supports real-time motion streaming via optional useAvatarSession dependency.
+ */
+import { AnimatePresence, motion } from 'motion/react';
+import { useCallback, useEffect, useRef } from 'react';
+import styled, { keyframes } from 'styled-components';
+import { useSentinelStore } from './sentinelStore';
+import { useSentinelDependencies } from './SentinelProvider';
+import { AvatarRenderer } from './AvatarRenderer';
+import { CameraPip } from './CameraPip';
+import { useCameraPermission } from './useCameraPermission';
+// -----------------------------------------------------------------------------
+// Constants
+// -----------------------------------------------------------------------------
+const AVATAR_SIZE = 360;
+const PIP_SIZE = 80;
+// -----------------------------------------------------------------------------
+// Keyframes
+// -----------------------------------------------------------------------------
+const glowPulse = keyframes `
+  0%, 100% {
+    box-shadow:
+      0 0 40px rgba(212, 168, 75, 0.15),
+      0 0 80px rgba(212, 168, 75, 0.08),
+      inset 0 0 20px rgba(0, 0, 0, 0.3);
+  }
+  50% {
+    box-shadow:
+      0 0 60px rgba(212, 168, 75, 0.25),
+      0 0 100px rgba(212, 168, 75, 0.12),
+      inset 0 0 30px rgba(0, 0, 0, 0.4);
+  }
+`;
+// -----------------------------------------------------------------------------
+// Styled Components
+// -----------------------------------------------------------------------------
+const AvatarContainer = styled(motion.div) `
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: ${AVATAR_SIZE}px;
+  height: ${AVATAR_SIZE}px;
+  border-radius: 50%;
+  background: linear-gradient(160deg, rgba(0, 0, 0, 0.7), rgba(8, 8, 10, 0.9));
+  border: 2px solid rgba(212, 168, 75, 0.4);
+  backdrop-filter: blur(20px);
+  z-index: 9800;
+  overflow: hidden;
+  animation: ${glowPulse} 4s ease-in-out infinite;
+`;
+const CloseButton = styled(motion.button) `
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(212, 168, 75, 0.3);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  color: rgba(212, 168, 75, 0.8);
+  font-size: 18px;
+  font-weight: 300;
+  padding: 0;
+  outline: none;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+
+  &:hover {
+    background: rgba(212, 168, 75, 0.15);
+    border-color: rgba(212, 168, 75, 0.6);
+    color: rgba(212, 168, 75, 1);
+  }
+`;
+const PipContainer = styled(motion.div) `
+  position: absolute;
+  bottom: 24px;
+  left: 24px;
+  width: ${PIP_SIZE}px;
+  height: ${PIP_SIZE}px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(212, 168, 75, 0.25);
+  overflow: hidden;
+  z-index: 5;
+`;
+const AvatarWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
+`;
+// Permission prompt styles
+const PermissionCard = styled(motion.div) `
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 340px;
+  padding: 32px;
+  background: linear-gradient(160deg, rgba(8, 8, 12, 0.95), rgba(12, 12, 16, 0.98));
+  border: 1px solid rgba(212, 168, 75, 0.3);
+  border-radius: 16px;
+  backdrop-filter: blur(24px);
+  z-index: 9800;
+  box-shadow:
+    0 0 60px rgba(0, 0, 0, 0.5),
+    0 0 40px rgba(212, 168, 75, 0.08);
+`;
+const PermissionTitle = styled.h3 `
+  margin: 0 0 12px;
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: rgba(212, 168, 75, 0.9);
+`;
+const PermissionText = styled.p `
+  margin: 0 0 24px;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.7);
+`;
+const ButtonRow = styled.div `
+  display: flex;
+  gap: 12px;
+`;
+const PermissionButton = styled(motion.button) `
+  flex: 1;
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+
+  ${({ $primary }) => $primary
+    ? `
+    background: rgba(212, 168, 75, 0.15);
+    border: 1px solid rgba(212, 168, 75, 0.5);
+    color: rgba(212, 168, 75, 1);
+
+    &:hover {
+      background: rgba(212, 168, 75, 0.25);
+      border-color: rgba(212, 168, 75, 0.7);
+    }
+  `
+    : `
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: rgba(255, 255, 255, 0.6);
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.8);
+    }
+  `}
+`;
+// Error state styles
+const ErrorCard = styled(motion.div) `
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 320px;
+  padding: 28px;
+  background: linear-gradient(160deg, rgba(12, 8, 8, 0.95), rgba(16, 12, 12, 0.98));
+  border: 1px solid rgba(180, 80, 80, 0.3);
+  border-radius: 16px;
+  backdrop-filter: blur(24px);
+  z-index: 9800;
+  text-align: center;
+`;
+const ErrorIcon = styled.div `
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 16px;
+  border-radius: 50%;
+  background: rgba(180, 80, 80, 0.1);
+  border: 1px solid rgba(180, 80, 80, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(180, 80, 80, 0.8);
+  font-size: 20px;
+`;
+const ErrorTitle = styled.h3 `
+  margin: 0 0 8px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: rgba(180, 80, 80, 0.9);
+`;
+const ErrorText = styled.p `
+  margin: 0 0 20px;
+  font-family: var(--font-sans);
+  font-size: 12px;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.5);
+`;
+const DismissButton = styled(motion.button) `
+  padding: 10px 24px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.8);
+  }
+`;
+// -----------------------------------------------------------------------------
+// Animation Variants
+// -----------------------------------------------------------------------------
+const containerVariants = {
+    hidden: {
+        opacity: 0,
+        scale: 0.8,
+    },
+    visible: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            type: 'spring',
+            stiffness: 200,
+            damping: 24,
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.8,
+        transition: {
+            duration: 0.2,
+        },
+    },
+};
+const cardVariants = {
+    hidden: {
+        opacity: 0,
+        y: 20,
+        scale: 0.95,
+    },
+    visible: {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        transition: {
+            type: 'spring',
+            stiffness: 300,
+            damping: 28,
+        },
+    },
+    exit: {
+        opacity: 0,
+        y: -10,
+        scale: 0.95,
+        transition: {
+            duration: 0.15,
+        },
+    },
+};
+const pipVariants = {
+    hidden: {
+        opacity: 0,
+        scale: 0,
+    },
+    visible: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            delay: 0.2,
+            type: 'spring',
+            stiffness: 300,
+            damping: 24,
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0,
+        transition: {
+            duration: 0.1,
+        },
+    },
+};
+// -----------------------------------------------------------------------------
+// Frame Capture Interval
+// -----------------------------------------------------------------------------
+const FRAME_CAPTURE_INTERVAL_MS = 100; // 10 FPS for motion capture
+// -----------------------------------------------------------------------------
+// Component
+// -----------------------------------------------------------------------------
+export const AvatarMode = () => {
+    const phase = useSentinelStore((s) => s.phase);
+    const exitAvatarMode = useSentinelStore((s) => s.exitAvatarMode);
+    const { useAvatarSession, AvatarRenderer: DependencyAvatarRenderer } = useSentinelDependencies();
+    const globalAvatarRenderer = typeof window !== 'undefined' ? window.__bbAvatarRenderer : undefined;
+    const AvatarRendererComponent = globalAvatarRenderer ?? DependencyAvatarRenderer ?? AvatarRenderer;
+    // Use the camera permission hook for stream management
+    const { permission, stream, requestPermission, stopStream } = useCameraPermission();
+    // Use the optional avatar session hook if provided
+    // We use a placeholder userId - in production this would come from auth
+    const avatarSession = useAvatarSession?.({ userId: 'avatar-user', autoConnect: false });
+    // Refs for frame capture
+    const videoRef = useRef(null);
+    const canvasRef = useRef(null);
+    const captureIntervalRef = useRef(null);
+    const isVisible = phase === 'avatar';
+    // Auto-request camera when permission is already granted and we enter avatar mode
+    useEffect(() => {
+        if (isVisible && permission === 'granted' && !stream) {
+            requestPermission();
+        }
+    }, [isVisible, permission, stream, requestPermission]);
+    // Connect to avatar session when stream is available
+    useEffect(() => {
+        if (isVisible && stream && avatarSession && !avatarSession.isConnected) {
+            avatarSession.connect();
+        }
+    }, [isVisible, stream, avatarSession]);
+    // Setup frame capture when stream and session are ready
+    useEffect(() => {
+        if (!stream || !avatarSession?.isConnected) {
+            // Clear existing interval
+            if (captureIntervalRef.current) {
+                clearInterval(captureIntervalRef.current);
+                captureIntervalRef.current = null;
+            }
+            return;
+        }
+        // Create video element if not exists
+        if (!videoRef.current) {
+            videoRef.current = document.createElement('video');
+            videoRef.current.autoplay = true;
+            videoRef.current.playsInline = true;
+            videoRef.current.muted = true;
+        }
+        // Create canvas for frame capture
+        if (!canvasRef.current) {
+            canvasRef.current = document.createElement('canvas');
+            canvasRef.current.width = 320; // Lower resolution for processing
+            canvasRef.current.height = 240;
+        }
+        // Set video source
+        videoRef.current.srcObject = stream;
+        // Start frame capture interval
+        captureIntervalRef.current = setInterval(() => {
+            if (!videoRef.current || !canvasRef.current || !avatarSession)
+                return;
+            const ctx = canvasRef.current.getContext('2d');
+            if (!ctx)
+                return;
+            // Draw video frame to canvas
+            ctx.drawImage(videoRef.current, 0, 0, canvasRef.current.width, canvasRef.current.height);
+            // Convert to base64
+            const frameData = canvasRef.current.toDataURL('image/jpeg', 0.7).split(',')[1];
+            // Upload frame (fire and forget, don't await)
+            avatarSession.uploadFrame(frameData).catch((err) => {
+                console.error('Failed to upload frame:', err);
+            });
+        }, FRAME_CAPTURE_INTERVAL_MS);
+        return () => {
+            if (captureIntervalRef.current) {
+                clearInterval(captureIntervalRef.current);
+                captureIntervalRef.current = null;
+            }
+        };
+    }, [stream, avatarSession]);
+    // Stop stream and disconnect session when leaving avatar mode
+    useEffect(() => {
+        if (!isVisible) {
+            if (stream) {
+                stopStream();
+            }
+            if (avatarSession?.isConnected) {
+                avatarSession.disconnect();
+            }
+        }
+    }, [isVisible, stream, stopStream, avatarSession]);
+    const handleAllowCamera = useCallback(async () => {
+        await requestPermission();
+    }, [requestPermission]);
+    const handleDismiss = useCallback(() => {
+        stopStream();
+        avatarSession?.disconnect();
+        exitAvatarMode();
+    }, [exitAvatarMode, stopStream, avatarSession]);
+    const handleClose = useCallback(() => {
+        stopStream();
+        avatarSession?.disconnect();
+        exitAvatarMode();
+    }, [exitAvatarMode, stopStream, avatarSession]);
+    const handleToggleCamera = useCallback(() => {
+        if (stream) {
+            stopStream();
+            avatarSession?.disconnect();
+        }
+        else {
+            requestPermission();
+        }
+    }, [stream, stopStream, requestPermission, avatarSession]);
+    // Don't render if not in avatar phase
+    if (!isVisible) {
+        return null;
+    }
+    // Render permission prompt
+    if (permission === 'prompt') {
+        return (_jsx(AnimatePresence, { children: _jsxs(PermissionCard, { variants: cardVariants, initial: "hidden", animate: "visible", exit: "exit", children: [_jsx(PermissionTitle, { children: "Camera Access" }), _jsx(PermissionText, { children: "Avatar mode uses your camera to animate a 3D avatar that mirrors your expressions and movements. Your video stays on your device." }), _jsxs(ButtonRow, { children: [_jsx(PermissionButton, { onClick: handleDismiss, children: "Not Now" }), _jsx(PermissionButton, { "$primary": true, onClick: handleAllowCamera, children: "Allow Camera" })] })] }, "permission-card") }));
+    }
+    // Render error state
+    if (permission === 'denied') {
+        return (_jsx(AnimatePresence, { children: _jsxs(ErrorCard, { variants: cardVariants, initial: "hidden", animate: "visible", exit: "exit", children: [_jsx(ErrorIcon, { children: "!" }), _jsx(ErrorTitle, { children: "Camera Unavailable" }), _jsx(ErrorText, { children: "Camera access was denied. To use Avatar mode, please enable camera permissions in your browser settings." }), _jsx(DismissButton, { whileHover: { scale: 1.02 }, whileTap: { scale: 0.98 }, onClick: handleDismiss, children: "Dismiss" })] }, "error-card") }));
+    }
+    // Render avatar view (camera granted)
+    return (_jsx(AnimatePresence, { children: _jsxs(AvatarContainer, { variants: containerVariants, initial: "hidden", animate: "visible", exit: "exit", children: [_jsx(CloseButton, { whileHover: { scale: 1.1 }, whileTap: { scale: 0.95 }, onClick: handleClose, "aria-label": "Close avatar mode", children: "x" }), _jsx(AvatarWrapper, { children: _jsx(AvatarRendererComponent, { isActive: !!stream, blendshapes: avatarSession?.motionData?.blendshapes, headPose: avatarSession?.motionData?.headPose, renderFrame: avatarSession?.renderFrame ?? undefined, stream: stream }) }), _jsx(PipContainer, { variants: pipVariants, children: _jsx(CameraPip, { stream: stream, size: PIP_SIZE, onToggle: handleToggleCamera }) })] }, "avatar-container") }));
+};
+export default AvatarMode;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { AvatarRendererProps } from './types';
+/**
+ * AvatarRenderer - Renders a 3D avatar placeholder using an injected GlyphRenderer.
+ *
+ * Fills its parent container with a transparent Canvas.
+ * Designed for a ~360px container (head/bust view).
+ *
+ * When blendshapes and headPose are provided (from avatar session),
+ * the avatar will animate based on real-time motion tracking data.
+ *
+ * @example
+ * <div style={{ width: 360, height: 360 }}>
+ *   <AvatarRenderer
+ *     isActive={isListening}
+ *     blendshapes={{ mouthSmileLeft: 0.5, eyeBlinkLeft: 0.2 }}
+ *     headPose={[0.1, -0.2, 0]}
+ *   />
+ * </div>
+ */
+export declare const AvatarRenderer: React.FC<AvatarRendererProps>;
+export default AvatarRenderer;
+//# sourceMappingURL=AvatarRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarRenderer.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/AvatarRenderer.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAsInD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwBxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/primitives/three/Sentinel/AvatarRenderer.js

@@ -0,0 +1,112 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AvatarRenderer - Placeholder Three.js avatar for Sentinel
+ *
+ * This component renders a stylized avatar head using an injected GlyphRenderer.
+ * It is designed to be driven by Avatar Forcing model output in the future.
+ *
+ * Future integration points:
+ * - blendshapes: Record<string, number> for facial expressions (ARKit-compatible)
+ *   e.g., { browInnerUp: 0.5, mouthSmile_L: 0.3, eyeWide_L: 0.2, ... }
+ * - headPose: [rx, ry, rz] for head rotation in radians
+ * - WebSocket connection: Real-time updates from Avatar Forcing inference server
+ *   Expected message format: { blendshapes: Record<string, number>, headPose: [number, number, number], timestamp: number }
+ */
+import { Canvas, useFrame } from '@react-three/fiber';
+import { useRef } from 'react';
+import { useSentinelDependencies } from './SentinelProvider';
+// -----------------------------------------------------------------------------
+// Animation Configuration
+// -----------------------------------------------------------------------------
+const LERP_FACTOR = 0.15; // Smoothing factor for interpolation (0-1, lower = smoother)
+/**
+ * Wraps the avatar with animation.
+ * When headPose is provided, interpolates toward those values.
+ * Otherwise, applies gentle idle animation.
+ */
+function AnimationWrapper({ isActive, headPose, children }) {
+    const groupRef = useRef(null);
+    const timeOffset = useRef(Math.random() * Math.PI * 2);
+    // Target rotation for interpolation
+    const targetRotation = useRef({ x: 0, y: 0, z: 0 });
+    // Current smoothed rotation
+    const currentRotation = useRef({ x: 0, y: 0, z: 0 });
+    useFrame(({ clock }) => {
+        if (!groupRef.current)
+            return;
+        const t = clock.getElapsedTime() + timeOffset.current;
+        // Breathing motion - always active for liveliness
+        const breathingSpeed = isActive ? 1.2 : 0.6;
+        const breathingAmplitude = isActive ? 0.02 : 0.01;
+        groupRef.current.position.y = Math.sin(t * breathingSpeed) * breathingAmplitude;
+        if (headPose) {
+            // Apply headPose from motion tracking
+            targetRotation.current.x = headPose[0];
+            targetRotation.current.y = headPose[1];
+            targetRotation.current.z = headPose[2];
+        }
+        else {
+            // Idle animation - subtle rotation
+            const rotationIntensity = isActive ? 1.5 : 1.0;
+            targetRotation.current.y = Math.sin(t * 0.3) * 0.04 * rotationIntensity;
+            targetRotation.current.x = Math.sin(t * 0.4) * 0.02 * rotationIntensity;
+            targetRotation.current.z = 0;
+        }
+        // Interpolate toward target (smooth animation)
+        currentRotation.current.x += (targetRotation.current.x - currentRotation.current.x) * LERP_FACTOR;
+        currentRotation.current.y += (targetRotation.current.y - currentRotation.current.y) * LERP_FACTOR;
+        currentRotation.current.z += (targetRotation.current.z - currentRotation.current.z) * LERP_FACTOR;
+        // Apply smoothed rotation
+        groupRef.current.rotation.x = currentRotation.current.x;
+        groupRef.current.rotation.y = currentRotation.current.y;
+        groupRef.current.rotation.z = currentRotation.current.z;
+    });
+    return _jsx("group", { ref: groupRef, children: children });
+}
+function AvatarScene({ isActive, blendshapes, headPose }) {
+    const { GlyphRenderer } = useSentinelDependencies();
+    // Future: Pass blendshapes to GlyphRenderer for facial expressions
+    // This requires GlyphRenderer to support blendshape morphing
+    // For now, we only use headPose for head movement
+    return (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 0.35, color: "#f5e6c8" }), _jsx("directionalLight", { position: [2, 2, 4], intensity: 0.9, color: "#d4a84b" }), _jsx("directionalLight", { position: [-1, -1, 2], intensity: 0.25, color: "#8aa4c4" }), _jsx("pointLight", { position: [0, 1, -2], intensity: isActive ? 0.6 : 0.3, color: "#f2c96b", distance: 8, decay: 2 }), _jsx(AnimationWrapper, { isActive: isActive, headPose: headPose, children: GlyphRenderer && (_jsx(GlyphRenderer, { variant: "sentinel", scale: 1.4, position: [0, -0.1, 0], state: isActive ? 'listening' : 'idle' })) })] }));
+}
+// -----------------------------------------------------------------------------
+// Main Component
+// -----------------------------------------------------------------------------
+/**
+ * AvatarRenderer - Renders a 3D avatar placeholder using an injected GlyphRenderer.
+ *
+ * Fills its parent container with a transparent Canvas.
+ * Designed for a ~360px container (head/bust view).
+ *
+ * When blendshapes and headPose are provided (from avatar session),
+ * the avatar will animate based on real-time motion tracking data.
+ *
+ * @example
+ * <div style={{ width: 360, height: 360 }}>
+ *   <AvatarRenderer
+ *     isActive={isListening}
+ *     blendshapes={{ mouthSmileLeft: 0.5, eyeBlinkLeft: 0.2 }}
+ *     headPose={[0.1, -0.2, 0]}
+ *   />
+ * </div>
+ */
+export const AvatarRenderer = (props) => {
+    const { isActive = false, blendshapes, headPose } = props;
+    return (_jsx(Canvas, { camera: {
+            position: [0, 0, 3.5],
+            fov: 50,
+            near: 0.1,
+            far: 100,
+        }, gl: {
+            alpha: true,
+            antialias: true,
+            powerPreference: 'high-performance',
+        }, style: {
+            width: '100%',
+            height: '100%',
+            background: 'transparent',
+        }, children: _jsx(AvatarScene, { isActive: isActive, blendshapes: blendshapes, headPose: headPose }) }));
+};
+export default AvatarRenderer;

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

@@ -0,0 +1,10 @@
+/**
+ * CameraPip
+ *
+ * Picture-in-picture camera view for the avatar mode.
+ */
+import React from 'react';
+import type { CameraPipProps } from './types';
+export declare const CameraPip: React.FC<CameraPipProps>;
+export default CameraPip;
+//# sourceMappingURL=CameraPip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CameraPip.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/CameraPip.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAoD9C,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA6D9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/primitives/three/Sentinel/CameraPip.js

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CameraPip
+ *
+ * Picture-in-picture camera view for the avatar mode.
+ */
+import { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+const Container = styled.div `
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: #0a0a0f;
+  border: 2px solid #c9a227;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(201, 162, 39, 0.15);
+  position: relative;
+`;
+const Video = styled.video `
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scaleX(-1);
+`;
+const ToggleButton = styled.button `
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(10, 10, 15, 0.7);
+  color: #c9a227;
+  font-size: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: rgba(201, 162, 39, 0.3);
+  }
+`;
+const Placeholder = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #3a3a4a;
+  font-size: 24px;
+`;
+export const CameraPip = ({ stream, size = 80, onToggle, }) => {
+    const videoRef = useRef(null);
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        if (stream) {
+            video.srcObject = stream;
+        }
+        else {
+            video.srcObject = null;
+        }
+        return () => {
+            if (video) {
+                video.srcObject = null;
+            }
+        };
+    }, [stream]);
+    return (_jsxs(Container, { "$size": size, children: [stream ? (_jsx(Video, { ref: videoRef, autoPlay: true, muted: true, playsInline: true })) : (_jsx(Placeholder, { children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("path", { d: "M23 7l-7 5 7 5V7z" }), _jsx("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" }), _jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })] }) })), onToggle && (_jsx(ToggleButton, { onClick: onToggle, "aria-label": "Toggle camera", children: _jsxs("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })] }) }))] }));
+};
+export default CameraPip;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { CardinalItemProps } from './types';
+export declare const CardinalItem: React.FC<CardinalItemProps>;
+export default CardinalItem;
+//# sourceMappingURL=CardinalItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardinalItem.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/CardinalItem.tsx"],"names":[],"mappings":"AASA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAwCjD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4BpD,CAAC;AAEF,eAAe,YAAY,CAAC"}