@backbay/glia 0.2.0-alpha.1

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

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CardinalItem
+ *
+ * A single item in the cardinal menu (N, E, S, W positions).
+ */
+import { motion } from 'motion/react';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { useSentinelDependencies } from './SentinelProvider';
+const ItemContainer = styled(motion.button) `
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(212, 168, 75, 0.3);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  outline: none;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease;
+
+  &:hover {
+    background: rgba(212, 168, 75, 0.1);
+    border-color: rgba(212, 168, 75, 0.7);
+  }
+`;
+const Label = styled(motion.span) `
+  position: absolute;
+  bottom: -22px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: rgba(212, 168, 75, 0.9);
+  white-space: nowrap;
+  pointer-events: none;
+`;
+export const CardinalItem = ({ icon, label, position, onClick, }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const { IconRenderer } = useSentinelDependencies();
+    return (_jsxs(ItemContainer, { whileHover: { scale: 1.1 }, onClick: onClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [IconRenderer && (_jsx(IconRenderer, { name: icon, size: 24, color: "rgba(212, 168, 75, 1)" })), _jsx(Label, { initial: { opacity: 0 }, animate: { opacity: isHovered ? 1 : 0 }, transition: { duration: 0.15 }, children: label })] }));
+};
+export default CardinalItem;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardinalMenu.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/CardinalMenu.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,KAAK,EAAE,iBAAiB,EAAc,MAAM,SAAS,CAAC;AA4I7D,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAsNpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,255 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CardinalMenu
+ *
+ * The main menu that appears around the Sentinel orb with items
+ * positioned along a 180-degree arc (top half only, from left to right).
+ */
+import { AnimatePresence, motion } from 'motion/react';
+import { useCallback, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { useSentinelStore } from './sentinelStore';
+import { useSentinelDependencies } from './SentinelProvider';
+import { CardinalItem } from './CardinalItem';
+import { RadialSubmenu } from './RadialSubmenu';
+import { VerticalSubmenu } from './VerticalSubmenu';
+// -----------------------------------------------------------------------------
+// Constants
+// -----------------------------------------------------------------------------
+const ARC_RADIUS = 120;
+// Arc spans from 180 degrees (left) to 0 degrees (right) - top half only
+const ARC_START_ANGLE = 180; // degrees - left side
+const ARC_END_ANGLE = 0; // degrees - right side
+/**
+ * Calculate position for item at index i out of n items across the top 180-degree arc.
+ * Arc goes from 180 degrees (left) to 0 degrees (right), distributed evenly.
+ */
+function calculateArcPosition(index, total, radius = ARC_RADIUS) {
+    // For single item, place at top (90 degrees)
+    // For multiple items, distribute evenly from 180 to 0 degrees
+    let angleDegrees;
+    if (total === 1) {
+        angleDegrees = 90; // top center
+    }
+    else {
+        // Distribute from 180 to 0 degrees (left to right across top)
+        angleDegrees = ARC_START_ANGLE - (ARC_START_ANGLE - ARC_END_ANGLE) * (index / (total - 1));
+    }
+    const radians = (angleDegrees * Math.PI) / 180;
+    return {
+        x: Math.cos(radians) * radius,
+        y: -Math.sin(radians) * radius, // negative because screen Y is inverted
+    };
+}
+// -----------------------------------------------------------------------------
+// Styled Components
+// -----------------------------------------------------------------------------
+const MenuContainer = styled(motion.div) `
+  position: fixed;
+  width: 0;
+  height: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9600;
+  pointer-events: none;
+`;
+const ItemWrapper = styled(motion.div) `
+  position: absolute;
+  pointer-events: auto;
+  transform-origin: center;
+`;
+const ItemPositioner = styled.div `
+  transform: translate(-50%, -50%);
+`;
+const EditLink = styled(motion.a) `
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 32px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: rgba(212, 168, 75, 0.5);
+  cursor: pointer;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  pointer-events: auto;
+
+  &:hover {
+    color: rgba(212, 168, 75, 1);
+  }
+`;
+// -----------------------------------------------------------------------------
+// Animation Variants
+// -----------------------------------------------------------------------------
+const containerVariants = {
+    hidden: {
+        opacity: 0,
+    },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.08,
+            delayChildren: 0.1,
+        },
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            staggerChildren: 0.04,
+            staggerDirection: -1,
+        },
+    },
+};
+const itemVariants = {
+    hidden: {
+        opacity: 0,
+        scale: 0.6,
+    },
+    visible: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            type: 'spring',
+            stiffness: 300,
+            damping: 24,
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.6,
+        transition: {
+            duration: 0.15,
+        },
+    },
+};
+// -----------------------------------------------------------------------------
+// Component
+// -----------------------------------------------------------------------------
+export const CardinalMenu = ({ items: itemsProp, onEdit, }) => {
+    const phase = useSentinelStore((s) => s.phase);
+    const docket = useSentinelStore((s) => s.docket);
+    const dismiss = useSentinelStore((s) => s.dismiss);
+    const enterAvatarMode = useSentinelStore((s) => s.enterAvatarMode);
+    const expandedCardinal = useSentinelStore((s) => s.expandedCardinal);
+    const expandCardinal = useSentinelStore((s) => s.expandCardinal);
+    const orbPosition = useSentinelStore((s) => s.orbPosition);
+    const { onOpenProcess, processMap } = useSentinelDependencies();
+    // Local state for radial hover (for vertical submenu)
+    const [hoveredRadialId, setHoveredRadialId] = useState(null);
+    const [hoveredRadialItem, setHoveredRadialItem] = useState(null);
+    const [radialItemPosition, setRadialItemPosition] = useState(null);
+    // Track which item index is expanded (for arc-based items)
+    const [expandedIndex, setExpandedIndex] = useState(null);
+    const isVisible = phase === 'open';
+    // Use provided items or fall back to docket items with position
+    const arcItems = useMemo(() => {
+        if (itemsProp && itemsProp.length > 0) {
+            return itemsProp;
+        }
+        // Fallback: use docket items that have a cardinal position
+        return docket.filter((item) => item.position !== undefined);
+    }, [itemsProp, docket]);
+    // Get expanded item (if any) - either by index (new system) or cardinal (legacy)
+    const expandedItem = useMemo(() => {
+        if (expandedIndex !== null && arcItems[expandedIndex]) {
+            return arcItems[expandedIndex];
+        }
+        if (expandedCardinal) {
+            return arcItems.find((item) => item.position === expandedCardinal) || null;
+        }
+        return null;
+    }, [expandedIndex, expandedCardinal, arcItems]);
+    const handleItemClick = useCallback((item, index) => {
+        // If item has children, toggle expansion
+        if (item.children && item.children.length > 0) {
+            // Check if this item is expanded (by index or cardinal)
+            const isCurrentlyExpanded = expandedIndex === index ||
+                (item.position && expandedCardinal === item.position);
+            if (isCurrentlyExpanded) {
+                setExpandedIndex(null);
+                expandCardinal(null); // Collapse
+            }
+            else {
+                setExpandedIndex(index);
+                if (item.position) {
+                    expandCardinal(item.position); // For legacy support
+                }
+            }
+            return;
+        }
+        // Leaf action
+        if (item.id === 'avatar') {
+            enterAvatarMode();
+        }
+        else {
+            const processId = processMap?.[item.id];
+            if (processId && onOpenProcess) {
+                onOpenProcess(processId, {});
+            }
+            dismiss();
+        }
+    }, [expandedIndex, expandedCardinal, expandCardinal, enterAvatarMode, onOpenProcess, processMap, dismiss]);
+    const handleRadialItemClick = useCallback((radialItem) => {
+        // If item has children, we show vertical submenu on hover
+        // On click, just execute action if leaf
+        if (!radialItem.children || radialItem.children.length === 0) {
+            if (radialItem.action) {
+                radialItem.action();
+            }
+            dismiss();
+        }
+    }, [dismiss]);
+    const handleRadialItemHover = useCallback((itemId) => {
+        setHoveredRadialId(itemId);
+        if (itemId && expandedItem?.children) {
+            const item = expandedItem.children.find((c) => c.id === itemId);
+            setHoveredRadialItem(item || null);
+            // Calculate position based on orb center + item position on arc
+            if (item && expandedIndex !== null) {
+                const arcPos = calculateArcPosition(expandedIndex, arcItems.length);
+                setRadialItemPosition({
+                    x: orbPosition.x + arcPos.x,
+                    y: orbPosition.y + arcPos.y,
+                });
+            }
+            else if (item && expandedItem.position) {
+                // Legacy cardinal fallback
+                const cardinalIndex = arcItems.findIndex((i) => i.id === expandedItem.id);
+                if (cardinalIndex >= 0) {
+                    const arcPos = calculateArcPosition(cardinalIndex, arcItems.length);
+                    setRadialItemPosition({
+                        x: orbPosition.x + arcPos.x,
+                        y: orbPosition.y + arcPos.y,
+                    });
+                }
+            }
+        }
+        else {
+            setHoveredRadialItem(null);
+            setRadialItemPosition(null);
+        }
+    }, [expandedItem, expandedIndex, arcItems, orbPosition]);
+    const handleVerticalItemClick = useCallback((verticalItem) => {
+        if (verticalItem.action) {
+            verticalItem.action();
+        }
+        dismiss();
+    }, [dismiss]);
+    return (_jsx(AnimatePresence, { children: isVisible && (_jsxs(MenuContainer, { variants: containerVariants, initial: "hidden", animate: "visible", exit: "exit", style: { left: orbPosition.x, top: orbPosition.y }, children: [arcItems.map((item, index) => {
+                    const offset = calculateArcPosition(index, arcItems.length);
+                    const isExpanded = expandedIndex === index ||
+                        (item.position && expandedCardinal === item.position);
+                    return (_jsx(ItemWrapper, { variants: itemVariants, style: {
+                            left: offset.x,
+                            top: offset.y,
+                        }, children: _jsxs(ItemPositioner, { children: [_jsx(CardinalItem, { icon: item.icon, label: item.label, position: item.position || 'N', onClick: () => handleItemClick(item, index) }), isExpanded && item.children && item.children.length > 0 && (_jsx(RadialSubmenu, { items: item.children, centerOffset: { x: 0, y: 0 }, arcConstraint: "semicircle", onItemClick: handleRadialItemClick, onItemHover: handleRadialItemHover, hoveredItemId: hoveredRadialId }))] }) }, item.id));
+                }), onEdit && (_jsx(EditLink, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { delay: 0.3, duration: 0.2 }, onClick: (e) => {
+                        e.preventDefault();
+                        onEdit();
+                    }, role: "button", tabIndex: 0, children: "edit" })), hoveredRadialItem?.children && hoveredRadialItem.children.length > 0 && radialItemPosition && (_jsx(VerticalSubmenu, { items: hoveredRadialItem.children, anchorPosition: radialItemPosition, onItemClick: handleVerticalItemClick }))] }, "cardinal-menu")) }));
+};
+export default CardinalMenu;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DockedMiniOrb.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/DockedMiniOrb.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAkC1E,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAiGjC,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,97 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DockedMiniOrb
+ *
+ * A small orb that appears at the edge of the screen when Sentinel is docked
+ * (not in the taskbar). Clicking it summons the full Sentinel.
+ */
+import { Center } from '@react-three/drei';
+import { Canvas } from '@react-three/fiber';
+import { motion } from 'motion/react';
+import { Suspense, useCallback, useEffect, useState } from 'react';
+import styled, { keyframes } from 'styled-components';
+import { useSentinelStore } from './sentinelStore';
+import { useSentinelDependencies } from './SentinelProvider';
+import { SigilPlaceholder } from './SigilPlaceholder';
+const ORB_SIZE = 32;
+const EDGE_OFFSET = 16;
+const subtlePulse = keyframes `
+  0%, 100% {
+    box-shadow: 0 2px 12px rgba(212, 168, 75, 0.3),
+                0 0 16px rgba(212, 168, 75, 0.15);
+  }
+  50% {
+    box-shadow: 0 2px 16px rgba(212, 168, 75, 0.45),
+                0 0 24px rgba(212, 168, 75, 0.25);
+  }
+`;
+const OrbContainer = styled(motion.div) `
+  position: fixed;
+  z-index: 9999;
+  width: ${ORB_SIZE}px;
+  height: ${ORB_SIZE}px;
+  border-radius: 50%;
+  border: 1px solid rgba(212, 168, 75, 0.4);
+  background: linear-gradient(160deg, rgba(0, 0, 0, 0.65), rgba(8, 8, 10, 0.9));
+  overflow: hidden;
+  cursor: pointer;
+  animation: ${subtlePulse} 3s ease-in-out infinite;
+`;
+export const DockedMiniOrb = () => {
+    const phase = useSentinelStore((s) => s.phase);
+    const dockedPosition = useSentinelStore((s) => s.dockedPosition);
+    const summon = useSentinelStore((s) => s.summon);
+    const setTaskbarOrigin = useSentinelStore((s) => s.setTaskbarOrigin);
+    const setOrbPosition = useSentinelStore((s) => s.setOrbPosition);
+    const { GlyphRenderer } = useSentinelDependencies();
+    const [position, setPosition] = useState({ left: 0, top: 0 });
+    // Calculate position based on dockedPosition
+    useEffect(() => {
+        if (dockedPosition === 'taskbar')
+            return;
+        const calculatePosition = () => {
+            const { edge, percent } = dockedPosition;
+            let left = 0;
+            let top = 0;
+            const width = typeof window !== 'undefined' ? window.innerWidth : 800;
+            const height = typeof window !== 'undefined' ? window.innerHeight : 600;
+            switch (edge) {
+                case 'top':
+                    left = percent * width;
+                    top = EDGE_OFFSET;
+                    break;
+                case 'left':
+                    left = EDGE_OFFSET;
+                    top = percent * height;
+                    break;
+                case 'right':
+                    left = width - EDGE_OFFSET;
+                    top = percent * height;
+                    break;
+            }
+            setPosition({ left, top });
+        };
+        calculatePosition();
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', calculatePosition);
+            return () => window.removeEventListener('resize', calculatePosition);
+        }
+    }, [dockedPosition]);
+    const handleClick = useCallback(() => {
+        // Set taskbar origin to current position before summoning
+        const origin = { x: position.left, y: position.top };
+        setTaskbarOrigin(origin);
+        setOrbPosition(origin);
+        summon();
+    }, [summon, setTaskbarOrigin, setOrbPosition, position]);
+    // Only render when docked at an edge (not taskbar)
+    if (phase !== 'docked' || dockedPosition === 'taskbar') {
+        return null;
+    }
+    return (_jsx(OrbContainer, { style: {
+            left: position.left - ORB_SIZE / 2,
+            top: position.top - ORB_SIZE / 2,
+        }, onClick: handleClick, whileHover: { scale: 1.12 }, whileTap: { scale: 0.95 }, transition: { type: 'spring', stiffness: 400, damping: 20 }, children: _jsxs(Canvas, { camera: { position: [0, 0, 4], fov: 45 }, gl: { alpha: true, antialias: true }, style: { width: '100%', height: '100%' }, children: [_jsx("ambientLight", { intensity: 0.4 }), _jsx("directionalLight", { position: [2, 2, 3], intensity: 0.8 }), _jsx(Suspense, { fallback: _jsx(Center, { children: _jsx(SigilPlaceholder, { scale: 0.85 }) }), children: GlyphRenderer && (_jsx(Center, { children: _jsx(GlyphRenderer, { variant: "sentinel", scale: 0.7 }) })) })] }) }));
+};
+export default DockedMiniOrb;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadialSubmenu.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/RadialSubmenu.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAiB,kBAAkB,EAAe,MAAM,SAAS,CAAC;AA+L9E,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkEtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,187 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RadialSubmenu
+ *
+ * A radial menu that appears around a cardinal direction item
+ * when it is expanded. Items are distributed along an arc.
+ */
+import { AnimatePresence, motion } from 'motion/react';
+import styled from 'styled-components';
+import { useSentinelDependencies } from './SentinelProvider';
+// -----------------------------------------------------------------------------
+// Constants
+// -----------------------------------------------------------------------------
+const ORBIT_RADIUS = 70;
+const ITEM_SIZE = 44;
+const MAX_ITEMS = 8;
+/**
+ * Determine the arc range based on the parent offset and constraint.
+ * Returns [startAngle, endAngle] in degrees.
+ *
+ * When arcConstraint is 'semicircle', items are placed in the top half only
+ * (180 degrees from left to right).
+ */
+function getArcRangeFromOffset(offset, arcConstraint = 'auto') {
+    // For semicircle constraint, always use top 180-degree arc
+    if (arcConstraint === 'semicircle') {
+        // Arc from 180 degrees (left) to 0 degrees (right) in screen coords
+        // This places items in the top half
+        return [180, 360]; // In standard math coords, then we negate Y
+    }
+    const { x, y } = offset;
+    // North: parent is above center (y < 0)
+    if (y < 0 && Math.abs(x) < Math.abs(y)) {
+        return [-90, 90]; // left to right arc
+    }
+    // East: parent is to the right (x > 0)
+    if (x > 0 && Math.abs(x) >= Math.abs(y)) {
+        return [0, 180]; // top to bottom arc
+    }
+    // South: parent is below center (y > 0)
+    if (y > 0 && Math.abs(x) < Math.abs(y)) {
+        return [90, 270]; // right to left arc
+    }
+    // West: parent is to the left (x < 0)
+    if (x < 0 && Math.abs(x) >= Math.abs(y)) {
+        return [180, 360]; // bottom to top arc
+    }
+    // Default to North arc
+    return [-90, 90];
+}
+/**
+ * Calculate position for item at index i out of n items across the arc.
+ * For semicircle constraint, positions are in the top half with Y inverted for screen coords.
+ */
+function calculateItemPosition(index, total, arcRange, arcConstraint = 'auto') {
+    const [startAngle, endAngle] = arcRange;
+    // Distribute items evenly across the arc
+    const angle = total === 1
+        ? (startAngle + endAngle) / 2
+        : startAngle + (endAngle - startAngle) * (index / (total - 1));
+    const radians = (angle * Math.PI) / 180;
+    // For semicircle constraint, we want items in the top half (negative Y in screen coords)
+    if (arcConstraint === 'semicircle') {
+        return {
+            x: Math.cos(radians) * ORBIT_RADIUS,
+            y: -Math.abs(Math.sin(radians)) * ORBIT_RADIUS, // Always negative (up)
+        };
+    }
+    return {
+        x: Math.cos(radians) * ORBIT_RADIUS,
+        y: Math.sin(radians) * ORBIT_RADIUS,
+    };
+}
+// -----------------------------------------------------------------------------
+// Styled Components
+// -----------------------------------------------------------------------------
+const SubmenuContainer = styled(motion.div) `
+  position: absolute;
+  pointer-events: none;
+`;
+const ItemWrapper = styled(motion.div) `
+  position: absolute;
+  pointer-events: auto;
+  transform-origin: center;
+`;
+const ItemPositioner = styled.div `
+  transform: translate(-50%, -50%);
+`;
+const SubmenuButton = styled(motion.button) `
+  width: ${ITEM_SIZE}px;
+  height: ${ITEM_SIZE}px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(212, 168, 75, 0.3);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  outline: none;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease;
+
+  &:hover {
+    background: rgba(212, 168, 75, 0.1);
+    border-color: rgba(212, 168, 75, 0.7);
+  }
+`;
+const Label = styled(motion.span) `
+  position: absolute;
+  bottom: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: var(--font-mono);
+  font-size: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: rgba(212, 168, 75, 0.9);
+  white-space: nowrap;
+  pointer-events: none;
+`;
+// -----------------------------------------------------------------------------
+// Animation Variants
+// -----------------------------------------------------------------------------
+const containerVariants = {
+    hidden: {
+        opacity: 0,
+    },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.04,
+        },
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            staggerChildren: 0.03,
+            staggerDirection: -1,
+        },
+    },
+};
+const itemVariants = {
+    hidden: {
+        opacity: 0,
+        scale: 0.5,
+    },
+    visible: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            type: 'spring',
+            stiffness: 400,
+            damping: 25,
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.5,
+        transition: {
+            duration: 0.12,
+        },
+    },
+};
+// -----------------------------------------------------------------------------
+// Component
+// -----------------------------------------------------------------------------
+export const RadialSubmenu = ({ items, centerOffset, arcConstraint = 'auto', onItemClick, onItemHover, hoveredItemId, }) => {
+    const { IconRenderer } = useSentinelDependencies();
+    const displayItems = items.slice(0, MAX_ITEMS);
+    const arcRange = getArcRangeFromOffset(centerOffset, arcConstraint);
+    return (_jsx(AnimatePresence, { children: _jsx(SubmenuContainer, { variants: containerVariants, initial: "hidden", animate: "visible", exit: "exit", style: {
+                left: centerOffset.x,
+                top: centerOffset.y,
+            }, children: displayItems.map((item, index) => {
+                const position = calculateItemPosition(index, displayItems.length, arcRange, arcConstraint);
+                const isHovered = hoveredItemId === item.id;
+                return (_jsx(ItemWrapper, { variants: itemVariants, style: {
+                        left: position.x,
+                        top: position.y,
+                    }, children: _jsx(ItemPositioner, { children: _jsxs(SubmenuButton, { whileHover: { scale: 1.1 }, onClick: () => onItemClick(item), onMouseEnter: () => onItemHover(item.id), onMouseLeave: () => onItemHover(null), children: [IconRenderer && (_jsx(IconRenderer, { name: item.icon, size: 18, color: "rgba(212, 168, 75, 1)" })), _jsx(Label, { initial: { opacity: 0 }, animate: { opacity: isHovered ? 1 : 0 }, transition: { duration: 0.15 }, children: item.label })] }) }) }, item.id));
+            }) }) }));
+};
+export default RadialSubmenu;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SentinelConversation.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/SentinelConversation.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAmD,MAAM,OAAO,CAAC;AA4qBxE,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAuGxC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}