@backbay/glia 0.2.0-alpha.1

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

@@ -0,0 +1,405 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SentinelConversation
+ *
+ * The conversation zone below the Sentinel orb, providing:
+ * - Voice captions with word-by-word golden glow animation
+ * - Optional command line text input
+ * - Mic/text toggle sigils
+ */
+import { AnimatePresence, motion } from 'motion/react';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import styled, { css, keyframes } from 'styled-components';
+import { useSentinelStore } from './sentinelStore';
+// =============================================================================
+// Animation Keyframes
+// =============================================================================
+const resonancePulse = keyframes `
+  0%, 100% {
+    opacity: 0.7;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.03);
+  }
+`;
+const arcPulse = keyframes `
+  0%, 100% {
+    opacity: 0.5;
+  }
+  33% {
+    opacity: 0.9;
+  }
+  66% {
+    opacity: 0.6;
+  }
+`;
+const glowPulse = keyframes `
+  0%, 100% {
+    filter: drop-shadow(0 0 2px rgba(212, 168, 75, 0.4));
+  }
+  50% {
+    filter: drop-shadow(0 0 6px rgba(212, 168, 75, 0.7));
+  }
+`;
+const activeGlow = keyframes `
+  0%, 100% {
+    filter: drop-shadow(0 0 3px rgba(212, 168, 75, 0.5));
+  }
+  50% {
+    filter: drop-shadow(0 0 8px rgba(212, 168, 75, 0.8));
+  }
+`;
+const inscriptionShimmer = keyframes `
+  0% {
+    stroke-dashoffset: 24;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+`;
+// =============================================================================
+// Styled Components
+// =============================================================================
+const ConversationContainer = styled(motion.div) `
+  position: absolute;
+  top: calc(50% + 100px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  width: 100%;
+  max-width: 600px;
+  padding: 0 24px;
+  pointer-events: auto;
+`;
+const CaptionsZone = styled.div `
+  min-height: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+`;
+const CaptionLine = styled(motion.p) `
+  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
+  font-size: 20px;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  color: rgba(212, 168, 75, 0.95);
+  text-align: center;
+  margin: 0;
+  line-height: 1.5;
+  text-shadow: 0 0 12px rgba(212, 168, 75, 0.6);
+
+  @media (prefers-reduced-motion: reduce) {
+    text-shadow: 0 0 8px rgba(212, 168, 75, 0.4);
+  }
+`;
+const Word = styled(motion.span) `
+  display: inline-block;
+  margin-right: 0.3em;
+
+  &:last-child {
+    margin-right: 0;
+  }
+`;
+const CommandLineContainer = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  max-width: 400px;
+`;
+const Prompt = styled.span `
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 16px;
+  color: rgba(212, 168, 75, 0.7);
+`;
+const CommandInput = styled.input `
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 16px;
+  color: rgba(212, 168, 75, 0.95);
+  caret-color: rgba(212, 168, 75, 0.95);
+
+  &::placeholder {
+    color: rgba(212, 168, 75, 0.3);
+  }
+`;
+const ControlsRow = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 24px;
+`;
+// =============================================================================
+// Mic Sigil Styled Components
+// =============================================================================
+const MicSvgContainer = styled(motion.svg) `
+  display: block;
+  flex-shrink: 0;
+  cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
+  transition: filter 0.3s ease, opacity 0.3s ease;
+
+  ${({ $isMuted }) => $isMuted &&
+    css `
+      opacity: 0.35;
+      filter: grayscale(0.5);
+    `}
+
+  ${({ $isListening, $isMuted }) => $isListening &&
+    !$isMuted &&
+    css `
+      animation: ${glowPulse} 2s ease-in-out infinite;
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        filter: drop-shadow(0 0 4px rgba(212, 168, 75, 0.5));
+      }
+    `}
+`;
+const CenterDot = styled.circle `
+  fill: #d4a84b;
+  transition: fill 0.3s ease;
+
+  ${({ $isListening, $isMuted }) => $isListening &&
+    !$isMuted &&
+    css `
+      animation: ${resonancePulse} 1.5s ease-in-out infinite;
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    `}
+`;
+const ResonanceArc = styled.path `
+  fill: none;
+  stroke: #d4a84b;
+  stroke-linecap: round;
+  transition: opacity 0.3s ease;
+
+  ${({ $isListening, $isMuted, $delay }) => $isListening &&
+    !$isMuted &&
+    css `
+      animation: ${arcPulse} 1.8s ease-in-out infinite;
+      animation-delay: ${$delay}ms;
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        opacity: 0.7;
+      }
+    `}
+
+  ${({ $isMuted }) => $isMuted &&
+    css `
+      opacity: 0.25;
+    `}
+`;
+const MuteSlash = styled(motion.line) `
+  stroke: #d4a84b;
+  stroke-width: 2;
+  stroke-linecap: round;
+`;
+// =============================================================================
+// Text Sigil Styled Components
+// =============================================================================
+const TextSvgContainer = styled(motion.svg) `
+  display: block;
+  flex-shrink: 0;
+  cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
+  transition: filter 0.3s ease, opacity 0.3s ease;
+
+  ${({ $isActive }) => $isActive &&
+    css `
+      animation: ${activeGlow} 2.5s ease-in-out infinite;
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        filter: drop-shadow(0 0 5px rgba(212, 168, 75, 0.6));
+      }
+    `}
+
+  ${({ $isActive }) => !$isActive &&
+    css `
+      opacity: 0.6;
+
+      &:hover {
+        opacity: 1;
+      }
+    `}
+`;
+const BorderRing = styled.circle `
+  fill: none;
+  stroke: #d4a84b;
+  stroke-width: 1;
+  transition: stroke-opacity 0.3s ease;
+  stroke-opacity: ${({ $isActive }) => ($isActive ? 0.8 : 0.3)};
+`;
+const QuillBody = styled.path `
+  fill: none;
+  stroke: #d4a84b;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: stroke-opacity 0.3s ease;
+  stroke-opacity: ${({ $isActive }) => ($isActive ? 1 : 0.6)};
+`;
+const QuillTip = styled.path `
+  fill: #d4a84b;
+  transition: fill-opacity 0.3s ease;
+  fill-opacity: ${({ $isActive }) => ($isActive ? 1 : 0.6)};
+`;
+const InscriptionLine = styled(motion.path) `
+  fill: none;
+  stroke: #d4a84b;
+  stroke-width: 1;
+  stroke-linecap: round;
+  stroke-dasharray: 3 2;
+  transition: stroke-opacity 0.3s ease;
+  stroke-opacity: ${({ $isActive }) => ($isActive ? 0.9 : 0.3)};
+
+  ${({ $isActive }) => $isActive &&
+    css `
+      animation: ${inscriptionShimmer} 1.5s linear infinite;
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    `}
+`;
+const RunicMark = styled.path `
+  fill: none;
+  stroke: #d4a84b;
+  stroke-width: 1;
+  stroke-linecap: round;
+  transition: stroke-opacity 0.3s ease;
+  stroke-opacity: ${({ $isActive }) => ($isActive ? 0.7 : 0.25)};
+`;
+const ActiveDot = styled(motion.circle) `
+  fill: #d4a84b;
+`;
+const VoiceCaptions = ({ text, onComplete }) => {
+    const [visibleWords, setVisibleWords] = useState([]);
+    const [isComplete, setIsComplete] = useState(false);
+    const timeoutRef = useRef(null);
+    const lingerTimeoutRef = useRef(null);
+    // Check for reduced motion preference
+    const prefersReducedMotion = typeof window !== 'undefined' &&
+        window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    useEffect(() => {
+        if (!text) {
+            setVisibleWords([]);
+            setIsComplete(false);
+            return;
+        }
+        const words = text.split(' ').filter(Boolean);
+        setVisibleWords([]);
+        setIsComplete(false);
+        if (prefersReducedMotion) {
+            // Instant reveal for reduced motion
+            setVisibleWords(words);
+            setIsComplete(true);
+            lingerTimeoutRef.current = setTimeout(() => {
+                onComplete?.();
+            }, 2000);
+            return;
+        }
+        // Word-by-word reveal with 60ms stagger
+        const wordDelay = 60;
+        words.forEach((word, index) => {
+            timeoutRef.current = setTimeout(() => {
+                setVisibleWords((prev) => [...prev, word]);
+                // After last word, mark complete and start linger timer
+                if (index === words.length - 1) {
+                    setIsComplete(true);
+                    lingerTimeoutRef.current = setTimeout(() => {
+                        onComplete?.();
+                    }, 2000);
+                }
+            }, index * wordDelay);
+        });
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+            if (lingerTimeoutRef.current)
+                clearTimeout(lingerTimeoutRef.current);
+        };
+    }, [text, onComplete, prefersReducedMotion]);
+    if (!text || visibleWords.length === 0)
+        return null;
+    return (_jsx(CaptionLine, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.4, ease: 'easeOut' }, children: visibleWords.map((word, index) => (_jsx(Word, { initial: { opacity: 0, filter: 'blur(4px)' }, animate: {
+                opacity: 1,
+                filter: 'blur(0px)',
+                textShadow: [
+                    '0 0 12px rgba(212, 168, 75, 0.6)',
+                    '0 0 20px rgba(212, 168, 75, 0.9)',
+                    '0 0 12px rgba(212, 168, 75, 0.6)',
+                ]
+            }, transition: {
+                duration: 0.2,
+                textShadow: { duration: 0.4, times: [0, 0.5, 1] }
+            }, children: word }, `${word}-${index}`))) }));
+};
+const MicSigil = ({ isListening, isMuted, size = 32, onClick, }) => {
+    return (_jsxs(MicSvgContainer, { viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, "$isListening": isListening, "$isMuted": isMuted, "$isClickable": !!onClick, onClick: onClick, whileHover: onClick ? { scale: 1.1 } : undefined, whileTap: onClick ? { scale: 0.95 } : undefined, role: onClick ? 'button' : 'img', "aria-label": isMuted
+            ? 'Microphone muted'
+            : isListening
+                ? 'Microphone listening'
+                : 'Microphone inactive', children: [_jsx(CenterDot, { cx: "24", cy: "24", r: "4", "$isListening": isListening, "$isMuted": isMuted }), _jsx("circle", { cx: "24", cy: "24", r: "8", fill: "none", stroke: "#d4a84b", strokeWidth: "1.5", opacity: isMuted ? 0.2 : 0.5 }), _jsx(ResonanceArc, { d: "M12 24 A12 12 0 0 1 24 12", strokeWidth: "1.5", "$isListening": isListening, "$isMuted": isMuted, "$delay": 0, style: { opacity: isMuted ? 0.2 : undefined } }), _jsx(ResonanceArc, { d: "M24 12 A12 12 0 0 1 36 24", strokeWidth: "1.5", "$isListening": isListening, "$isMuted": isMuted, "$delay": 150, style: { opacity: isMuted ? 0.2 : undefined } }), _jsx(ResonanceArc, { d: "M36 24 A12 12 0 0 1 24 36", strokeWidth: "1.5", "$isListening": isListening, "$isMuted": isMuted, "$delay": 300, style: { opacity: isMuted ? 0.2 : undefined } }), _jsx(ResonanceArc, { d: "M24 36 A12 12 0 0 1 12 24", strokeWidth: "1.5", "$isListening": isListening, "$isMuted": isMuted, "$delay": 450, style: { opacity: isMuted ? 0.2 : undefined } }), _jsx(ResonanceArc, { d: "M6 24 A18 18 0 0 1 24 6", strokeWidth: "1", "$isListening": isListening, "$isMuted": isMuted, "$delay": 100, style: { opacity: isMuted ? 0.15 : 0.4 } }), _jsx(ResonanceArc, { d: "M24 6 A18 18 0 0 1 42 24", strokeWidth: "1", "$isListening": isListening, "$isMuted": isMuted, "$delay": 250, style: { opacity: isMuted ? 0.15 : 0.4 } }), _jsx(ResonanceArc, { d: "M42 24 A18 18 0 0 1 24 42", strokeWidth: "1", "$isListening": isListening, "$isMuted": isMuted, "$delay": 400, style: { opacity: isMuted ? 0.15 : 0.4 } }), _jsx(ResonanceArc, { d: "M24 42 A18 18 0 0 1 6 24", strokeWidth: "1", "$isListening": isListening, "$isMuted": isMuted, "$delay": 550, style: { opacity: isMuted ? 0.15 : 0.4 } }), isMuted && (_jsx(MuteSlash, { x1: "10", y1: "38", x2: "38", y2: "10", initial: { pathLength: 0, opacity: 0 }, animate: { pathLength: 1, opacity: 0.8 }, transition: { duration: 0.2 } }))] }));
+};
+const TextSigil = ({ isActive, size = 32, onClick, }) => {
+    return (_jsxs(TextSvgContainer, { viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", width: size, height: size, "$isActive": isActive, "$isClickable": !!onClick, onClick: onClick, whileHover: onClick ? { scale: 1.1 } : undefined, whileTap: onClick ? { scale: 0.95 } : undefined, role: onClick ? 'button' : 'img', "aria-label": isActive ? 'Text input active' : 'Text input inactive', children: [_jsx(BorderRing, { cx: "24", cy: "24", r: "21", "$isActive": isActive }), _jsx("circle", { cx: "24", cy: "24", r: "17", fill: "none", stroke: "#d4a84b", strokeWidth: "0.5", strokeDasharray: "2 4", opacity: isActive ? 0.4 : 0.15 }), _jsx(QuillBody, { d: "M14 34 L26 22 L30 18", "$isActive": isActive }), _jsx(QuillBody, { d: "M30 18 Q34 16 36 12", "$isActive": isActive, style: { strokeWidth: 1 } }), _jsx(QuillBody, { d: "M30 18 Q32 14 30 10", "$isActive": isActive, style: { strokeWidth: 1 } }), _jsx(QuillBody, { d: "M30 18 Q36 18 38 14", "$isActive": isActive, style: { strokeWidth: 1, strokeOpacity: isActive ? 0.7 : 0.4 } }), _jsx(QuillTip, { d: "M14 34 L12 36 L14 38 L16 36 Z", "$isActive": isActive }), _jsx(InscriptionLine, { d: "M16 38 L32 38", "$isActive": isActive }), _jsx(RunicMark, { d: "M20 32 L22 30", "$isActive": isActive }), _jsx(RunicMark, { d: "M24 28 L26 26", "$isActive": isActive }), _jsx("circle", { cx: "24", cy: "6", r: "1", fill: "#d4a84b", opacity: isActive ? 0.6 : 0.2 }), _jsx("circle", { cx: "42", cy: "24", r: "1", fill: "#d4a84b", opacity: isActive ? 0.6 : 0.2 }), _jsx("circle", { cx: "6", cy: "24", r: "1", fill: "#d4a84b", opacity: isActive ? 0.6 : 0.2 }), isActive && (_jsx(ActiveDot, { cx: "38", cy: "38", r: "2.5", initial: { scale: 0, opacity: 0 }, animate: {
+                    scale: 1,
+                    opacity: [0.6, 1, 0.6],
+                }, transition: {
+                    scale: { duration: 0.2 },
+                    opacity: { duration: 1.5, repeat: Infinity, ease: 'easeInOut' },
+                } }))] }));
+};
+// =============================================================================
+// Main Component
+// =============================================================================
+export const SentinelConversation = () => {
+    const conversationState = useSentinelStore((s) => s.conversationState);
+    const isTextInputEnabled = useSentinelStore((s) => s.isTextInputEnabled);
+    const isMuted = useSentinelStore((s) => s.isMuted);
+    const toggleTextInput = useSentinelStore((s) => s.toggleTextInput);
+    const toggleMute = useSentinelStore((s) => s.toggleMute);
+    const currentCaption = useSentinelStore((s) => s.currentCaption);
+    const setCurrentCaption = useSentinelStore((s) => s.setCurrentCaption);
+    const [inputValue, setInputValue] = useState('');
+    const inputRef = useRef(null);
+    // Focus input when text input is enabled
+    useEffect(() => {
+        if (isTextInputEnabled && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isTextInputEnabled]);
+    const handleSubmit = useCallback((e) => {
+        e.preventDefault();
+        if (!inputValue.trim())
+            return;
+        // TODO: Send message to agent
+        console.log('Sending message:', inputValue);
+        setInputValue('');
+    }, [inputValue]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Escape') {
+            toggleTextInput();
+        }
+    }, [toggleTextInput]);
+    const handleCaptionComplete = useCallback(() => {
+        // Clear caption after it's done displaying
+        setCurrentCaption(null);
+    }, [setCurrentCaption]);
+    const isListening = conversationState === 'listening';
+    return (_jsxs(ConversationContainer, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 20 }, transition: { duration: 0.3, delay: 0.2 }, children: [_jsx(CaptionsZone, { children: _jsx(AnimatePresence, { mode: "wait", children: currentCaption && (_jsx(VoiceCaptions, { text: currentCaption, onComplete: handleCaptionComplete }, currentCaption)) }) }), _jsx(AnimatePresence, { children: isTextInputEnabled && (_jsx(CommandLineContainer, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 10 }, transition: { duration: 0.2 }, children: _jsxs("form", { onSubmit: handleSubmit, style: { display: 'contents' }, children: [_jsx(Prompt, { children: ">" }), _jsx(CommandInput, { ref: inputRef, type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: "", autoComplete: "off", spellCheck: false })] }) })) }), _jsxs(ControlsRow, { children: [_jsx(MicSigil, { isListening: isListening, isMuted: isMuted, onClick: toggleMute, size: 32 }), _jsx(TextSigil, { isActive: isTextInputEnabled, onClick: toggleTextInput, size: 32 })] })] }));
+};
+export default SentinelConversation;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SentinelOrb.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/SentinelOrb.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAoS/B,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,239 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SentinelOrb
+ *
+ * The main orb component that can be dragged, thrown, and docked.
+ */
+import { Center } from '@react-three/drei';
+import { Canvas } from '@react-three/fiber';
+import { motion, useAnimation } from 'motion/react';
+import { Suspense, useEffect, useCallback, useRef } from 'react';
+import { useSentinelStore } from './sentinelStore';
+import { useSentinelDependencies } from './SentinelProvider';
+import { useThrowPhysics } from './useThrowPhysics';
+import { SigilPlaceholder } from './SigilPlaceholder';
+const DOCKED_SIZE = 38;
+const SUMMONED_SIZE = 80;
+export const SentinelOrb = () => {
+    const controls = useAnimation();
+    const { GlyphRenderer } = useSentinelDependencies();
+    const orbRef = useRef(null);
+    const syncFrameRef = useRef(null);
+    const lastSyncedRef = useRef(null);
+    const openSyncRef = useRef(null);
+    const phase = useSentinelStore((s) => s.phase);
+    const orbPosition = useSentinelStore((s) => s.orbPosition);
+    const targetPosition = useSentinelStore((s) => s.targetPosition);
+    const taskbarOrigin = useSentinelStore((s) => s.taskbarOrigin);
+    const setPhase = useSentinelStore((s) => s.setPhase);
+    const setOrbPosition = useSentinelStore((s) => s.setOrbPosition);
+    const dockAt = useSentinelStore((s) => s.dockAt);
+    const phaseRef = useRef(phase);
+    const animationTokenRef = useRef(0);
+    // Throw physics handlers
+    const handlePositionUpdate = useCallback((pos) => {
+        setOrbPosition(pos);
+        controls.set({
+            x: pos.x - SUMMONED_SIZE / 2,
+            y: pos.y - SUMMONED_SIZE / 2,
+        });
+    }, [controls, setOrbPosition]);
+    const handleSettle = useCallback((position) => {
+        setPhase('docked');
+        dockAt(position);
+    }, [setPhase, dockAt]);
+    const { isDragging, startDrag, onPointerMove, endDrag } = useThrowPhysics({
+        onPositionUpdate: handlePositionUpdate,
+        onSettle: handleSettle,
+    });
+    // Handle drag start - switch to throwing phase
+    const handlePointerDown = useCallback((e) => {
+        if (phase === 'open') {
+            setPhase('throwing');
+            startDrag(e);
+        }
+    }, [phase, setPhase, startDrag]);
+    // Derive current size based on phase
+    const isDocked = phase === 'docked';
+    const showSigilOnly = phase === 'summoning' || phase === 'dismissing';
+    const currentSize = isDocked ? DOCKED_SIZE : SUMMONED_SIZE;
+    const initialSize = phase === 'summoning' ? DOCKED_SIZE : currentSize;
+    const initialCenter = phase === 'summoning' ? taskbarOrigin : orbPosition;
+    const syncOrbPosition = useCallback(() => {
+        if (!orbRef.current)
+            return;
+        const rect = orbRef.current.getBoundingClientRect();
+        const next = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+        const last = lastSyncedRef.current;
+        if (last && Math.abs(last.x - next.x) < 0.25 && Math.abs(last.y - next.y) < 0.25) {
+            return;
+        }
+        lastSyncedRef.current = next;
+        setOrbPosition(next);
+    }, [setOrbPosition]);
+    const handleMotionUpdate = useCallback(() => {
+        syncOrbPosition();
+    }, [syncOrbPosition]);
+    useEffect(() => {
+        phaseRef.current = phase;
+    }, [phase]);
+    useEffect(() => {
+        if (phase === 'summoning') {
+            const token = animationTokenRef.current + 1;
+            animationTokenRef.current = token;
+            controls.stop();
+            controls.set({
+                x: taskbarOrigin.x - DOCKED_SIZE / 2,
+                y: taskbarOrigin.y - DOCKED_SIZE / 2,
+                width: DOCKED_SIZE,
+                height: DOCKED_SIZE,
+            });
+            lastSyncedRef.current = null;
+            setOrbPosition(taskbarOrigin);
+            // Animate from current position to center
+            controls
+                .start({
+                x: targetPosition.x - SUMMONED_SIZE / 2,
+                y: targetPosition.y - SUMMONED_SIZE / 2,
+                width: SUMMONED_SIZE,
+                height: SUMMONED_SIZE,
+                transition: {
+                    type: 'spring',
+                    stiffness: 200,
+                    damping: 25,
+                    mass: 1,
+                    duration: 0.6,
+                },
+            })
+                .then(() => {
+                if (animationTokenRef.current !== token || phaseRef.current !== 'summoning') {
+                    return;
+                }
+                setOrbPosition(targetPosition);
+                setPhase('open');
+                requestAnimationFrame(() => syncOrbPosition());
+            });
+        }
+        else if (phase === 'dismissing') {
+            const token = animationTokenRef.current + 1;
+            animationTokenRef.current = token;
+            controls.stop();
+            // Animate back to taskbar
+            controls
+                .start({
+                x: taskbarOrigin.x - DOCKED_SIZE / 2,
+                y: taskbarOrigin.y - DOCKED_SIZE / 2,
+                width: DOCKED_SIZE,
+                height: DOCKED_SIZE,
+                transition: {
+                    type: 'spring',
+                    stiffness: 250,
+                    damping: 28,
+                    mass: 0.8,
+                    duration: 0.5,
+                },
+            })
+                .then(() => {
+                if (animationTokenRef.current !== token || phaseRef.current !== 'dismissing') {
+                    return;
+                }
+                setOrbPosition(taskbarOrigin);
+                setPhase('docked');
+                dockAt('taskbar');
+            });
+        }
+    }, [
+        phase,
+        targetPosition,
+        taskbarOrigin,
+        controls,
+        setPhase,
+        setOrbPosition,
+        dockAt,
+    ]);
+    useEffect(() => {
+        if (phase !== 'summoning' && phase !== 'dismissing') {
+            if (syncFrameRef.current) {
+                cancelAnimationFrame(syncFrameRef.current);
+                syncFrameRef.current = null;
+            }
+            return;
+        }
+        const tick = () => {
+            syncOrbPosition();
+            syncFrameRef.current = requestAnimationFrame(tick);
+        };
+        syncFrameRef.current = requestAnimationFrame(tick);
+        return () => {
+            if (syncFrameRef.current) {
+                cancelAnimationFrame(syncFrameRef.current);
+                syncFrameRef.current = null;
+            }
+        };
+    }, [phase, syncOrbPosition]);
+    useEffect(() => {
+        if (phase !== 'open') {
+            if (openSyncRef.current) {
+                cancelAnimationFrame(openSyncRef.current);
+                openSyncRef.current = null;
+            }
+            return;
+        }
+        let frames = 0;
+        const tick = () => {
+            syncOrbPosition();
+            frames += 1;
+            if (frames < 6) {
+                openSyncRef.current = requestAnimationFrame(tick);
+            }
+        };
+        openSyncRef.current = requestAnimationFrame(tick);
+        const handleResize = () => syncOrbPosition();
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', handleResize);
+        }
+        return () => {
+            if (openSyncRef.current) {
+                cancelAnimationFrame(openSyncRef.current);
+                openSyncRef.current = null;
+            }
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('resize', handleResize);
+            }
+        };
+    }, [phase, syncOrbPosition]);
+    // Set initial position
+    useEffect(() => {
+        if (phase === 'docked') {
+            controls.set({
+                x: taskbarOrigin.x - DOCKED_SIZE / 2,
+                y: taskbarOrigin.y - DOCKED_SIZE / 2,
+                width: DOCKED_SIZE,
+                height: DOCKED_SIZE,
+            });
+        }
+    }, [taskbarOrigin, phase, controls]);
+    // Determine cursor based on state
+    const cursor = isDragging ? 'grabbing' : phase === 'open' ? 'grab' : 'pointer';
+    return (_jsx(motion.div, { ref: orbRef, "data-sentinel-orb": "true", animate: controls, initial: {
+            x: initialCenter.x - initialSize / 2,
+            y: initialCenter.y - initialSize / 2,
+            width: initialSize,
+            height: initialSize,
+        }, style: {
+            position: 'fixed',
+            zIndex: 9999,
+            borderRadius: '50%',
+            border: '1px solid rgba(212, 168, 75, 0.3)',
+            background: 'linear-gradient(160deg, rgba(0, 0, 0, 0.6), rgba(8, 8, 10, 0.85))',
+            overflow: 'hidden',
+            cursor,
+            boxShadow: '0 4px 24px rgba(0, 0, 0, 0.4)',
+            display: 'grid',
+            placeItems: 'center',
+            lineHeight: 0,
+            touchAction: 'none', // Prevent touch scrolling during drag
+        }, onUpdate: handleMotionUpdate, onPointerDown: handlePointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, children: _jsxs(Canvas, { camera: { position: [0, 0, 4], fov: 45 }, gl: { alpha: true, antialias: true }, style: { width: '100%', height: '100%', pointerEvents: 'none', display: 'block' }, children: [_jsx("ambientLight", { intensity: 0.4 }), _jsx("directionalLight", { position: [2, 2, 3], intensity: 0.8 }), showSigilOnly ? (_jsx(Center, { children: _jsx(SigilPlaceholder, { scale: 1.05 }) })) : (_jsx(Suspense, { fallback: _jsx(Center, { children: _jsx(SigilPlaceholder, { scale: 1.05 }) }), children: GlyphRenderer && (_jsx(Center, { children: _jsx(GlyphRenderer, { variant: "sentinel", scale: 0.85 }) })) }))] }) }));
+};
+export default SentinelOrb;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SentinelOverlay.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/SentinelOverlay.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAqChE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EA+FnC,CAAC;AAEF,eAAe,eAAe,CAAC"}