// Shared UI primitives for the Aewita demo video. // Exposes AewitaShell (the app chrome), Cursor, and scene helpers. const COLORS = { bgBase: '#0E0F10', // deepest background bgRaised: '#16181A', // panels/cards bgCard: '#1C1F22', // raised cards bgSunken: '#0A0B0C', // input fields border: 'rgba(232,224,216,0.08)', borderStrong: 'rgba(232,224,216,0.14)', textPrimary: '#E8E0D8', // warm cream textSecondary: '#9C968F', // warm gray textMuted: '#64605B', accent: '#D9484E', // Aewita red copper: '#C8856B', // salmon/copper copperDim: '#7A4130', sage: '#78B37C', }; const FONTS = { sans: '"Inter", "DM Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif', serif: '"Cormorant Garamond", "DM Serif Display", Georgia, serif', mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', }; // ───────────────────────────────────────────────────────────────────────────── // Aewita quill logomark — uses the real asset function AewitaQuill({ size = 24, pulse = false, time = 0, rounded = true }) { const pulseOpacity = pulse ? 0.82 + 0.18 * Math.sin(time * 3) : 1; return ( ); } // ÆWITA wordmark — lapidary serif, small caps style. Uses the Æ ligature. function AewitaWordmark({ size = 20, color, letterSpacing = '0.18em', weight = 500 }) { return (
ÆWITA
); } // ───────────────────────────────────────────────────────────────────────────── // Sidebar nav item function NavItem({ icon, label, tagline, active, expanded = true }) { return (
{icon}
{expanded && (
{label}
{tagline &&
{tagline}
}
)} {active && expanded && ( )}
); } // Icons (custom-drawn, simple line icons — not from lucide) const Icons = { library: , chat: , pen: , shield: , folder: , search: , upload: , doc: , settings: , sun: , chevron: , check: , grid: , brief: , log: , chart: , users: , }; // ───────────────────────────────────────────────────────────────────────────── // The Aewita app shell — sidebar + main area. The main area is a slot. function AewitaShell({ activeMode = 'library', children, pulseLogo = false, time = 0, sidebarVariant = 'main' }) { // sidebarVariant: 'main' (top-level modes) or 'admin' (admin sub-sidebar shown INSIDE content) const navItems = [ { id: 'library', label: 'Library', tagline: 'Ask your files a question.', icon: Icons.library }, { id: 'assistant', label: 'Assistant', tagline: 'Talk through your case.', icon: Icons.chat }, { id: 'scrivener', label: 'Scrivener', tagline: 'Describe the document you need.', icon: Icons.pen }, { id: 'admin', label: 'Admin', tagline: 'Manage your team.', icon: Icons.shield }, ]; return (
{/* Sidebar */} {/* Main */}
{children}
); } // ───────────────────────────────────────────────────────────────────────────── // Cursor — animated arrow pointer with physics-based scale and blur. function Cursor({ x, y, clicking = false, opacity = 1, scale = 1, blur = 'none' }) { return (
{clicking && (
)}
); } // ───────────────────────────────────────────────────────────────────────────── // Placeholder / striped div function Striped({ width, height, label, radius = 8 }) { return (
{label}
); } Object.assign(window, { COLORS, FONTS, AewitaShell, AewitaQuill, AewitaWordmark, Cursor, Icons, Striped, NavItem });