@backbay/glia 0.2.0-alpha.1

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

@@ -0,0 +1,90 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SentinelOverlay
+ *
+ * The main overlay container for the Sentinel orb and menu system.
+ * Handles backdrop, escape key dismissal, and rendering sub-components.
+ * Includes ambient greeting and conversation zone.
+ */
+import { AnimatePresence, motion } from 'motion/react';
+import { useEffect, useCallback, useState } from 'react';
+import styled from 'styled-components';
+import { useSentinelStore } from './sentinelStore';
+import { AvatarMode } from './AvatarMode';
+import { CardinalMenu } from './CardinalMenu';
+import { SentinelConversation } from './SentinelConversation';
+import { SentinelOrb } from './SentinelOrb';
+import { SentinelTether } from './SentinelTether';
+// -----------------------------------------------------------------------------
+// Styled Components
+// -----------------------------------------------------------------------------
+const Backdrop = styled(motion.div) `
+  position: fixed;
+  inset: 0;
+  z-index: 9500;
+  background: rgba(0, 0, 0, 0.3);
+  pointer-events: auto;
+`;
+const OverlayContainer = styled(motion.div) `
+  position: fixed;
+  inset: 0;
+  z-index: 9500;
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+`;
+// -----------------------------------------------------------------------------
+// Component
+// -----------------------------------------------------------------------------
+export const SentinelOverlay = () => {
+    const phase = useSentinelStore((s) => s.phase);
+    const dismiss = useSentinelStore((s) => s.dismiss);
+    const visibleCardinals = useSentinelStore((s) => s.visibleCardinals);
+    const docket = useSentinelStore((s) => s.docket);
+    const setCurrentCaption = useSentinelStore((s) => s.setCurrentCaption);
+    const [isEditMode, setIsEditMode] = useState(false);
+    const isVisible = phase !== 'docked';
+    const isAvatarMode = phase === 'avatar';
+    const canDismiss = phase === 'open' || phase === 'avatar';
+    // Filter docket items to only show visible cardinals
+    const arcItems = docket.filter((item) => visibleCardinals.includes(item.id));
+    // Trigger ambient greeting on summon
+    useEffect(() => {
+        if (phase === 'open') {
+            // Small delay to let the animation settle
+            const timer = setTimeout(() => {
+                const greetings = [
+                    'What can I help you with?',
+                    'Ready when you are.',
+                    'How can I assist?',
+                ];
+                const greeting = greetings[Math.floor(Math.random() * greetings.length)];
+                setCurrentCaption(greeting);
+            }, 600);
+            return () => clearTimeout(timer);
+        }
+    }, [phase, setCurrentCaption]);
+    // Handle escape key to dismiss
+    const handleEscapeKey = useCallback((e) => {
+        if (e.key === 'Escape' && canDismiss) {
+            dismiss();
+        }
+    }, [canDismiss, dismiss]);
+    useEffect(() => {
+        if (isVisible && typeof window !== 'undefined') {
+            window.addEventListener('keydown', handleEscapeKey);
+            return () => window.removeEventListener('keydown', handleEscapeKey);
+        }
+    }, [isVisible, handleEscapeKey]);
+    // Handle click outside (on backdrop) to dismiss
+    const handleBackdropClick = useCallback(() => {
+        if (canDismiss) {
+            dismiss();
+        }
+    }, [canDismiss, dismiss]);
+    return (_jsx(AnimatePresence, { children: isVisible && (_jsxs(_Fragment, { children: [_jsx(Backdrop, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3, ease: 'easeOut' }, onClick: handleBackdropClick }, "sentinel-backdrop"), _jsx(OverlayContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: isAvatarMode ? (_jsx(AvatarMode, {})) : (_jsxs(_Fragment, { children: [_jsx(SentinelTether, {}), _jsx(SentinelOrb, {}), _jsx(CardinalMenu, { items: arcItems, onEdit: () => setIsEditMode(true) }), _jsx(SentinelConversation, {})] })) }, "sentinel-overlay")] })) }));
+};
+export default SentinelOverlay;

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

@@ -0,0 +1,12 @@
+/**
+ * SentinelProvider
+ *
+ * Provides context for Sentinel components, including external dependencies
+ * like icon renderers and glyph components.
+ */
+import React from 'react';
+import type { SentinelProviderProps, SentinelDependencies } from './types';
+export declare function useSentinelDependencies(): SentinelDependencies;
+export declare const SentinelProvider: React.FC<SentinelProviderProps>;
+export default SentinelProvider;
+//# sourceMappingURL=SentinelProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SentinelProvider.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/SentinelProvider.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAwD,MAAM,OAAO,CAAC;AAE7E,OAAO,KAAK,EACV,qBAAqB,EAErB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAkFjB,wBAAgB,uBAAuB,IAAI,oBAAoB,CAG9D;AAMD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAmC5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SentinelProvider
+ *
+ * Provides context for Sentinel components, including external dependencies
+ * like icon renderers and glyph components.
+ */
+import { createContext, useContext, useMemo, useEffect } from 'react';
+import { useSentinelStore } from './sentinelStore';
+// -----------------------------------------------------------------------------
+// Default Icon Renderer (Fallback)
+// -----------------------------------------------------------------------------
+const DefaultIconRenderer = ({ name, size, color, }) => {
+    // Simple fallback - renders first letter of icon name in a circle
+    return (_jsx("div", { style: {
+            width: size,
+            height: size,
+            borderRadius: '50%',
+            background: 'rgba(255, 255, 255, 0.1)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: size * 0.5,
+            color,
+            fontFamily: 'monospace',
+            textTransform: 'uppercase',
+        }, children: name.charAt(0) }));
+};
+// -----------------------------------------------------------------------------
+// Default Glyph Renderer (Fallback)
+// -----------------------------------------------------------------------------
+const DefaultGlyphRenderer = ({ scale = 1 }) => {
+    // Simple fallback - renders a golden sphere
+    return (_jsxs("mesh", { scale: scale, children: [_jsx("sphereGeometry", { args: [0.5, 32, 32] }), _jsx("meshStandardMaterial", { color: "#d4a84b", emissive: "#d4a84b", emissiveIntensity: 0.3, metalness: 0.8, roughness: 0.2 })] }));
+};
+// -----------------------------------------------------------------------------
+// Context
+// -----------------------------------------------------------------------------
+const defaultDependencies = {
+    IconRenderer: DefaultIconRenderer,
+    GlyphRenderer: DefaultGlyphRenderer,
+    onOpenProcess: undefined,
+    processMap: {
+        console: 'cathedral',
+        lens: 'graphlens',
+        vault: 'vault',
+    },
+};
+const SentinelContext = createContext({
+    dependencies: defaultDependencies,
+});
+// -----------------------------------------------------------------------------
+// Hook
+// -----------------------------------------------------------------------------
+export function useSentinelDependencies() {
+    const context = useContext(SentinelContext);
+    return context.dependencies;
+}
+// -----------------------------------------------------------------------------
+// Provider
+// -----------------------------------------------------------------------------
+export const SentinelProvider = ({ children, dependencies, initialDocket, }) => {
+    const setDocket = useSentinelStore((s) => s.setDocket);
+    // Merge provided dependencies with defaults
+    const mergedDependencies = useMemo(() => ({
+        ...defaultDependencies,
+        ...dependencies,
+    }), [dependencies]);
+    // Set initial docket if provided
+    useEffect(() => {
+        if (initialDocket && initialDocket.length > 0) {
+            setDocket(initialDocket);
+        }
+    }, [initialDocket, setDocket]);
+    const value = useMemo(() => ({
+        dependencies: mergedDependencies,
+    }), [mergedDependencies]);
+    return (_jsx(SentinelContext.Provider, { value: value, children: children }));
+};
+export default SentinelProvider;

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

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

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

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

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

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SentinelTether
+ *
+ * An SVG line connecting the Sentinel orb to its taskbar origin.
+ * Visible during summoning phase, fades out during open phase.
+ */
+import { motion } from 'motion/react';
+import { useSentinelStore } from './sentinelStore';
+export const SentinelTether = () => {
+    const phase = useSentinelStore((s) => s.phase);
+    const orbPosition = useSentinelStore((s) => s.orbPosition);
+    const taskbarOrigin = useSentinelStore((s) => s.taskbarOrigin);
+    const start = taskbarOrigin;
+    const end = orbPosition;
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const distance = Math.hypot(dx, dy);
+    const safeDistance = distance || 1;
+    const normal = { x: -dy / safeDistance, y: dx / safeDistance };
+    const steps = Math.max(6, Math.min(24, Math.round(safeDistance / 28)));
+    const baseAmp = Math.min(5.5, Math.max(1.5, safeDistance * 0.015));
+    const jitterSeed = Math.sin((start.x + start.y) * 0.015);
+    const freq = 3 + Math.floor(safeDistance / 160);
+    const points = Array.from({ length: steps + 1 }, (_, index) => {
+        const t = steps === 0 ? 0 : index / steps;
+        let offset = 0;
+        if (index > 0 && index < steps) {
+            const phaseA = t * Math.PI * (2 + freq) + jitterSeed * 2.7;
+            const phaseB = t * Math.PI * (3.5 + freq * 1.4) + jitterSeed * 4.1;
+            const wobble = Math.sin(phaseA);
+            const chisel = Math.sign(Math.sin(phaseB));
+            const amp = baseAmp * (0.45 + 0.55 * Math.sin(t * Math.PI * 2 + jitterSeed));
+            offset = (wobble * 0.6 + chisel * 0.4) * amp;
+            offset = Math.round(offset * 2) / 2;
+        }
+        return {
+            x: start.x + dx * t + normal.x * offset,
+            y: start.y + dy * t + normal.y * offset,
+        };
+    });
+    const pointsAttr = points.map((point) => `${point.x},${point.y}`).join(' ');
+    const dash = Math.max(10, Math.min(24, safeDistance * 0.115));
+    const gap = Math.max(16, Math.min(34, safeDistance * 0.19));
+    const dashArray = `${dash} ${gap}`;
+    const sparkDashArray = `${Math.max(2.5, dash * 0.35)} ${Math.max(10, gap * 1.4)}`;
+    // Only render during summoning or open phases
+    if (phase === 'docked' || phase === 'dismissing' || phase === 'throwing' || phase === 'avatar') {
+        return null;
+    }
+    // Determine opacity based on phase
+    const targetOpacity = phase === 'summoning' ? 1 : 0;
+    const gradientId = 'sentinel-tether-gradient';
+    const filterId = 'sentinel-tether-glow';
+    return (_jsxs("svg", { style: {
+            position: 'fixed',
+            inset: 0,
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
+            zIndex: 9998,
+        }, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: gradientId, x1: taskbarOrigin.x, y1: taskbarOrigin.y, x2: orbPosition.x, y2: orbPosition.y, gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0%", stopColor: "#9f6420", stopOpacity: 0.95 }), _jsx("stop", { offset: "15%", stopColor: "#e1a341", stopOpacity: 0.98 }), _jsx("stop", { offset: "35%", stopColor: "#ffd48a", stopOpacity: 0.95 }), _jsx("stop", { offset: "55%", stopColor: "#fff0c9", stopOpacity: 0.9 }), _jsx("stop", { offset: "75%", stopColor: "#efb95f", stopOpacity: 0.78 }), _jsx("stop", { offset: "100%", stopColor: "#b9792a", stopOpacity: 0.5 })] }), _jsxs("filter", { id: filterId, x: "-90%", y: "-90%", width: "280%", height: "280%", children: [_jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3.6", result: "blur" }), _jsx("feColorMatrix", { type: "matrix", values: "\n              1 0 0 0 0\n              0 0.85 0 0 0\n              0 0 0.45 0 0\n              0 0 0 1 0", result: "glow" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "glow" }), _jsx("feMergeNode", { in: "SourceGraphic" })] })] })] }), _jsx(motion.polyline, { points: pointsAttr, stroke: "rgba(212, 168, 75, 0.32)", strokeWidth: 4.1, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", filter: `url(#${filterId})`, initial: { opacity: 0.8 }, animate: { opacity: targetOpacity }, transition: { duration: 0.75, ease: 'easeOut' } }), _jsx(motion.polyline, { points: pointsAttr, stroke: `url(#${gradientId})`, strokeWidth: 2.4, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", filter: `url(#${filterId})`, initial: { opacity: 1 }, animate: { opacity: targetOpacity }, transition: { duration: 0.75, ease: 'easeOut' } }), _jsx(motion.polyline, { points: pointsAttr, stroke: "rgba(255, 234, 184, 0.9)", strokeWidth: 1.05, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", strokeDasharray: dashArray, filter: `url(#${filterId})`, initial: { opacity: 0.55, strokeDashoffset: 0 }, animate: { opacity: targetOpacity, strokeDashoffset: -safeDistance }, transition: {
+                    opacity: { duration: 0.75, ease: 'easeOut' },
+                    strokeDashoffset: { duration: 7.8, repeat: Infinity, ease: 'linear' },
+                } }), _jsx(motion.polyline, { points: pointsAttr, stroke: "rgba(255, 241, 210, 0.9)", strokeWidth: 0.8, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", strokeDasharray: sparkDashArray, filter: `url(#${filterId})`, initial: { opacity: 0.35, strokeDashoffset: 0 }, animate: { opacity: targetOpacity, strokeDashoffset: -safeDistance * 1.6 }, transition: {
+                    opacity: { duration: 0.75, ease: 'easeOut' },
+                    strokeDashoffset: { duration: 10.6, repeat: Infinity, ease: 'linear' },
+                } }), _jsx(motion.circle, { cx: orbPosition.x, cy: orbPosition.y, r: 5, fill: "rgba(212, 168, 75, 0.9)", filter: `url(#${filterId})`, initial: { opacity: 0.6, scale: 1 }, animate: { opacity: targetOpacity, scale: [1, 1.18, 1] }, transition: { duration: 3.4, repeat: Infinity, ease: 'easeInOut' } })] }));
+};
+export default SentinelTether;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const SigilPlaceholder: React.FC<{
+    scale?: number;
+}>;
+export default SigilPlaceholder;
+//# sourceMappingURL=SigilPlaceholder.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SigilPlaceholder.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/SigilPlaceholder.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAQ/C,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAkKzD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFrame } from '@react-three/fiber';
+import { useMemo, useRef } from 'react';
+import * as THREE from 'three';
+const RING_SEGMENTS = 64;
+const TICK_COUNT = 16;
+const RUNE_COUNT = 28;
+export const SigilPlaceholder = ({ scale = 1 }) => {
+    const groupRef = useRef(null);
+    const runeRef = useRef(null);
+    const shimmerRef = useRef(null);
+    const ticks = useMemo(() => Array.from({ length: TICK_COUNT }, (_, i) => i), []);
+    const runes = useMemo(() => Array.from({ length: RUNE_COUNT }, (_, i) => {
+        const angle = (i / RUNE_COUNT) * Math.PI * 2;
+        const width = 0.028 + 0.014 * Math.abs(Math.sin(i * 1.7));
+        const height = 0.007 + 0.01 * Math.abs(Math.cos(i * 1.3));
+        const opacity = 0.18 + 0.12 * Math.abs(Math.sin(i * 0.9));
+        return { i, angle, width, height, opacity };
+    }), []);
+    const noiseTexture = useMemo(() => {
+        const size = 64;
+        const data = new Uint8Array(size * size * 4);
+        for (let i = 0; i < size * size; i += 1) {
+            const intensity = 130 + Math.floor(Math.random() * 125);
+            data[i * 4] = intensity;
+            data[i * 4 + 1] = Math.min(255, intensity + 40);
+            data[i * 4 + 2] = 30;
+            data[i * 4 + 3] = 120 + Math.floor(Math.random() * 120);
+        }
+        const tex = new THREE.DataTexture(data, size, size, THREE.RGBAFormat);
+        tex.wrapS = THREE.RepeatWrapping;
+        tex.wrapT = THREE.RepeatWrapping;
+        tex.repeat.set(4, 4);
+        tex.needsUpdate = true;
+        return tex;
+    }, []);
+    useFrame((_, delta) => {
+        if (!groupRef.current)
+            return;
+        groupRef.current.rotation.z += delta * 0.25;
+        groupRef.current.rotation.x = 0.12;
+        if (runeRef.current) {
+            runeRef.current.rotation.z -= delta * 0.08;
+        }
+        if (shimmerRef.current?.map) {
+            shimmerRef.current.map.offset.x =
+                (shimmerRef.current.map.offset.x + delta * 0.08) % 1;
+            shimmerRef.current.map.offset.y =
+                (shimmerRef.current.map.offset.y + delta * 0.05) % 1;
+            shimmerRef.current.opacity = 0.12 + Math.sin(Date.now() * 0.002) * 0.03;
+        }
+    });
+    return (_jsxs("group", { ref: groupRef, scale: scale, children: [_jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [_jsx("ringGeometry", { args: [0.62, 0.66, RING_SEGMENTS] }), _jsx("meshStandardMaterial", { color: "#d4a84b", emissive: "#d4a84b", emissiveIntensity: 0.35, transparent: true, opacity: 0.6, metalness: 0.4, roughness: 0.3, toneMapped: false })] }), _jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [_jsx("ringGeometry", { args: [0.44, 0.455, RING_SEGMENTS] }), _jsx("meshStandardMaterial", { color: "#f2c96b", emissive: "#f2c96b", emissiveIntensity: 0.4, transparent: true, opacity: 0.7, metalness: 0.35, roughness: 0.35, toneMapped: false })] }), _jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [_jsx("ringGeometry", { args: [0.32, 0.7, RING_SEGMENTS] }), _jsx("meshBasicMaterial", { ref: shimmerRef, map: noiseTexture, color: "#f2c96b", transparent: true, opacity: 0.14, blending: THREE.AdditiveBlending, depthWrite: false, toneMapped: false })] }), _jsxs("mesh", { rotation: [0, 0, 0], children: [_jsx("torusGeometry", { args: [0.22, 0.01, 12, 96] }), _jsx("meshStandardMaterial", { color: "#6b8cbe", emissive: "#9bb4e3", emissiveIntensity: 0.35, transparent: true, opacity: 0.6, metalness: 0.2, roughness: 0.2, toneMapped: false })] }), _jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [_jsx("ringGeometry", { args: [0.12, 0.125, 32] }), _jsx("meshStandardMaterial", { color: "#e6d3a3", emissive: "#f2c96b", emissiveIntensity: 0.4, transparent: true, opacity: 0.7, metalness: 0.4, roughness: 0.3, toneMapped: false })] }), _jsx("group", { ref: runeRef, children: runes.map((rune) => {
+                    const x = Math.cos(rune.angle) * 0.52;
+                    const y = Math.sin(rune.angle) * 0.52;
+                    return (_jsxs("mesh", { position: [x, y, 0], rotation: [0, 0, rune.angle], children: [_jsx("boxGeometry", { args: [rune.width, rune.height, 0.01] }), _jsx("meshBasicMaterial", { color: "#d4a84b", transparent: true, opacity: rune.opacity, blending: THREE.AdditiveBlending, depthWrite: false, toneMapped: false })] }, `rune-${rune.i}`));
+                }) }), ticks.map((i) => {
+                const angle = (i / TICK_COUNT) * Math.PI * 2;
+                const x = Math.cos(angle) * 0.74;
+                const y = Math.sin(angle) * 0.74;
+                return (_jsxs("mesh", { position: [x, y, 0], rotation: [0, 0, angle], children: [_jsx("boxGeometry", { args: [0.06, 0.012, 0.01] }), _jsx("meshStandardMaterial", { color: "#d4a84b", emissive: "#d4a84b", emissiveIntensity: 0.3, transparent: true, opacity: 0.6, metalness: 0.3, roughness: 0.4, toneMapped: false })] }, `tick-${i}`));
+            })] }));
+};
+export default SigilPlaceholder;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalSubmenu.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/VerticalSubmenu.tsx"],"names":[],"mappings":"AAUA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,oBAAoB,EAAe,MAAM,SAAS,CAAC;AA6EjE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyD1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,105 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * VerticalSubmenu
+ *
+ * A vertical dropdown submenu that appears when hovering over a radial submenu item
+ * that has children. Supports scrolling for many items.
+ */
+import { motion } from 'motion/react';
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { useSentinelDependencies } from './SentinelProvider';
+const ITEM_HEIGHT = 36;
+const MAX_VISIBLE_ITEMS = 6;
+const MENU_WIDTH = 160;
+const PADDING_Y = 4;
+const Container = styled(motion.div) `
+  position: fixed;
+  width: ${MENU_WIDTH}px;
+  max-height: ${ITEM_HEIGHT * MAX_VISIBLE_ITEMS + PADDING_Y * 2}px;
+  overflow-y: auto;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(212, 168, 75, 0.25);
+  border-radius: 8px;
+  padding: ${PADDING_Y}px 0;
+  transform-origin: ${({ $openUpward }) => ($openUpward ? 'bottom center' : 'top center')};
+  z-index: 10000;
+
+  /* Custom scrollbar */
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(212, 168, 75, 0.3);
+    border-radius: 2px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(212, 168, 75, 0.5);
+  }
+`;
+const ItemRow = styled(motion.button) `
+  width: 100%;
+  height: ${ITEM_HEIGHT}px;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: transparent;
+  border: none;
+  border-left: 2px solid transparent;
+  cursor: pointer;
+  outline: none;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid rgba(212, 168, 75, 0.1);
+  }
+
+  &:hover {
+    background: rgba(212, 168, 75, 0.1);
+    border-left-color: rgba(212, 168, 75, 0.9);
+  }
+`;
+const ItemLabel = styled.span `
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  color: rgba(212, 168, 75, 0.9);
+  text-transform: uppercase;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+export const VerticalSubmenu = ({ items, anchorPosition, onItemClick, }) => {
+    const [openUpward, setOpenUpward] = useState(false);
+    const { IconRenderer } = useSentinelDependencies();
+    useEffect(() => {
+        const menuHeight = Math.min(items.length, MAX_VISIBLE_ITEMS) * ITEM_HEIGHT + PADDING_Y * 2;
+        const spaceBelow = typeof window !== 'undefined'
+            ? window.innerHeight - anchorPosition.y
+            : 600 - anchorPosition.y;
+        setOpenUpward(spaceBelow < menuHeight + 20);
+    }, [anchorPosition.y, items.length]);
+    const windowHeight = typeof window !== 'undefined' ? window.innerHeight : 600;
+    const style = {
+        left: anchorPosition.x - MENU_WIDTH / 2,
+        ...(openUpward
+            ? { bottom: windowHeight - anchorPosition.y }
+            : { top: anchorPosition.y }),
+    };
+    return (_jsx(Container, { "$openUpward": openUpward, style: style, initial: { scaleY: 0, opacity: 0 }, animate: { scaleY: 1, opacity: 1 }, exit: { scaleY: 0, opacity: 0 }, transition: { duration: 0.2, ease: [0.4, 0, 0.2, 1] }, children: items.map((item, index) => (_jsxs(ItemRow, { onClick: () => {
+                item.action?.();
+                onItemClick(item);
+            }, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { delay: index * 0.03, duration: 0.15 }, children: [IconRenderer && (_jsx(IconRenderer, { name: item.icon, size: 16, color: "rgba(212, 168, 75, 0.9)" })), _jsx(ItemLabel, { children: item.label })] }, item.id))) }));
+};
+export default VerticalSubmenu;

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

@@ -0,0 +1,67 @@
+/**
+ * Sentinel - A floating orb UI component system
+ *
+ * The Sentinel is a radial menu system that can be summoned, thrown, and docked.
+ * It provides quick access to applications and features through a cardinal
+ * direction-based menu with optional radial and vertical submenus.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   SentinelProvider,
+ *   SentinelOverlay,
+ *   DockedMiniOrb,
+ *   useSentinelStore,
+ * } from '@backbay/glia';
+ *
+ * // In your app root or layout:
+ * function App() {
+ *   return (
+ *     <SentinelProvider
+ *       dependencies={{
+ *         IconRenderer: MyIconComponent,
+ *         GlyphRenderer: MyGlyphComponent,
+ *         onOpenProcess: (id, opts) => openApp(id, opts),
+ *         processMap: { console: 'terminal', lens: 'viewer' },
+ *       }}
+ *     >
+ *       <SentinelOverlay />
+ *       <DockedMiniOrb />
+ *       {children}
+ *     </SentinelProvider>
+ *   );
+ * }
+ *
+ * // In your taskbar:
+ * function TaskbarItem() {
+ *   const summon = useSentinelStore((s) => s.summon);
+ *   const setTaskbarOrigin = useSentinelStore((s) => s.setTaskbarOrigin);
+ *
+ *   const handleClick = (e: React.MouseEvent) => {
+ *     const rect = e.currentTarget.getBoundingClientRect();
+ *     setTaskbarOrigin({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+ *     summon();
+ *   };
+ *
+ *   return <button onClick={handleClick}>Sentinel</button>;
+ * }
+ * ```
+ */
+export { SentinelOverlay } from './SentinelOverlay';
+export { SentinelOrb } from './SentinelOrb';
+export { SentinelTether } from './SentinelTether';
+export { DockedMiniOrb } from './DockedMiniOrb';
+export { CardinalMenu } from './CardinalMenu';
+export { CardinalItem } from './CardinalItem';
+export { RadialSubmenu } from './RadialSubmenu';
+export { VerticalSubmenu } from './VerticalSubmenu';
+export { SentinelConversation } from './SentinelConversation';
+export { AvatarMode } from './AvatarMode';
+export { AvatarRenderer } from './AvatarRenderer';
+export { CameraPip } from './CameraPip';
+export { useThrowPhysics } from './useThrowPhysics';
+export { useCameraPermission } from './useCameraPermission';
+export { SentinelProvider, useSentinelDependencies } from './SentinelProvider';
+export { useSentinelStore } from './sentinelStore';
+export type { SentinelPhase, Edge, DockedPosition, Cardinal, ConversationState, DocketItem, OrbPosition, SentinelState, SentinelDependencies, SentinelOverlayProps, SentinelOrbProps, SentinelTetherProps, CardinalMenuProps, CardinalItemProps, SubmenuItem, ArcConstraint, RadialSubmenuProps, VerticalSubmenuProps, DockedMiniOrbProps, AvatarModeProps, AvatarRendererProps, CameraPipProps, AvatarMotionData, AvatarSessionReturn, UseCameraPermissionReturn, ThrowPhysicsOptions, ThrowPhysicsReturn, SentinelProviderProps, SentinelContextValue, } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/primitives/three/Sentinel/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAMH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAM9D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAMxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAM/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAMnD,YAAY,EAEV,aAAa,EACb,IAAI,EACJ,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,aAAa,EAGb,oBAAoB,EACpB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACnB,cAAc,EAGd,gBAAgB,EAChB,mBAAmB,EAGnB,yBAAyB,EACzB,mBAAmB,EACnB,kBAAkB,EAGlB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,86 @@
+/**
+ * Sentinel - A floating orb UI component system
+ *
+ * The Sentinel is a radial menu system that can be summoned, thrown, and docked.
+ * It provides quick access to applications and features through a cardinal
+ * direction-based menu with optional radial and vertical submenus.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   SentinelProvider,
+ *   SentinelOverlay,
+ *   DockedMiniOrb,
+ *   useSentinelStore,
+ * } from '@backbay/glia';
+ *
+ * // In your app root or layout:
+ * function App() {
+ *   return (
+ *     <SentinelProvider
+ *       dependencies={{
+ *         IconRenderer: MyIconComponent,
+ *         GlyphRenderer: MyGlyphComponent,
+ *         onOpenProcess: (id, opts) => openApp(id, opts),
+ *         processMap: { console: 'terminal', lens: 'viewer' },
+ *       }}
+ *     >
+ *       <SentinelOverlay />
+ *       <DockedMiniOrb />
+ *       {children}
+ *     </SentinelProvider>
+ *   );
+ * }
+ *
+ * // In your taskbar:
+ * function TaskbarItem() {
+ *   const summon = useSentinelStore((s) => s.summon);
+ *   const setTaskbarOrigin = useSentinelStore((s) => s.setTaskbarOrigin);
+ *
+ *   const handleClick = (e: React.MouseEvent) => {
+ *     const rect = e.currentTarget.getBoundingClientRect();
+ *     setTaskbarOrigin({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+ *     summon();
+ *   };
+ *
+ *   return <button onClick={handleClick}>Sentinel</button>;
+ * }
+ * ```
+ */
+// -----------------------------------------------------------------------------
+// Core Components
+// -----------------------------------------------------------------------------
+export { SentinelOverlay } from './SentinelOverlay';
+export { SentinelOrb } from './SentinelOrb';
+export { SentinelTether } from './SentinelTether';
+export { DockedMiniOrb } from './DockedMiniOrb';
+// -----------------------------------------------------------------------------
+// Menu Components
+// -----------------------------------------------------------------------------
+export { CardinalMenu } from './CardinalMenu';
+export { CardinalItem } from './CardinalItem';
+export { RadialSubmenu } from './RadialSubmenu';
+export { VerticalSubmenu } from './VerticalSubmenu';
+// -----------------------------------------------------------------------------
+// Conversation Components
+// -----------------------------------------------------------------------------
+export { SentinelConversation } from './SentinelConversation';
+// -----------------------------------------------------------------------------
+// Avatar Components
+// -----------------------------------------------------------------------------
+export { AvatarMode } from './AvatarMode';
+export { AvatarRenderer } from './AvatarRenderer';
+export { CameraPip } from './CameraPip';
+// -----------------------------------------------------------------------------
+// Hooks
+// -----------------------------------------------------------------------------
+export { useThrowPhysics } from './useThrowPhysics';
+export { useCameraPermission } from './useCameraPermission';
+// -----------------------------------------------------------------------------
+// Provider and Context
+// -----------------------------------------------------------------------------
+export { SentinelProvider, useSentinelDependencies } from './SentinelProvider';
+// -----------------------------------------------------------------------------
+// Store
+// -----------------------------------------------------------------------------
+export { useSentinelStore } from './sentinelStore';