// CTox app shell — reusable UI: header, sidebar, logo, icons, cursor. // All sizes baked for a 1920x1080 stage. const CTX_BLUE = '#1C4137'; // Synvia dark green (primary) const CTX_BLUE_DARK = '#143025'; const CTX_TEAL = '#1FAFAB'; // gradient end on logo pill (legacy) const CTX_BG = '#EEEEEE'; // page background const CTX_INK = '#2C3942'; // dark text const CTX_MUTED = '#94A3AC'; const CTX_GREEN_DK = '#0C3A2A'; const CTX_GREEN_LIME = '#B2E847'; const CTX_RED = '#E94B4B'; const CTX_SIDEBAR = '#F7F7F7'; const CTX_DIVIDER = '#E5E7EA'; // ── Synvia arrow mark (gradient PNG asset) ──────────────────────────────── const SYNVIA_ARROW_SRC = (typeof window !== 'undefined' && window.__resources && window.__resources.synviaArrow) || 'assets/synvia-arrow.png'; const SYNVIA_LOGO_SRC = (typeof window !== 'undefined' && window.__resources && window.__resources.synviaLogo) || 'assets/synvia-logo.png'; function SynviaArrow({ size = 64 }) { return ( Synvia ); } // Small arrow for header/sidebar — recolors the PNG via CSS filter. function SynviaLogo({ size = 36, color = '#fff' }) { if (color === 'gradient') { return ; } // White: invert the dark-on-transparent PNG. For other colors, we'd need SVG. const filter = color === '#fff' || color === 'white' ? 'brightness(0) invert(1)' : 'none'; return ( Synvia ); } // Full logo for the login screen: PNG with the arrow + "synvia" wordmark. function SynviaLogoFull({ scale = 1 }) { const w = 1366 * scale; const h = 570 * scale; return ( Synvia ); } // ── Sidebar icon set (simple line icons) ─────────────────────────────────── const I = { burger: ( ), home: ( ), car: ( ), scissors: ( ), box: ( ), send: ( ), bars: ( ), factory: ( ), people: ( ), flask: ( ), server: ( ), pulse: ( ), docplus: ( ), person: ( ), pin: ( ), tag: ( ), bell: ( ), plus: ( ), printer: ( ), trash: ( ), search: ( ), chat: ( ), back: ( ), xCircle: ( ), eye: ( ), }; // ── Sidebar ──────────────────────────────────────────────────────────────── const SIDEBAR_ITEMS = [ { id: 'home', icon: I.home }, { id: 'car', icon: I.car }, { id: 'scissors', icon: I.scissors }, { id: 'box', icon: I.box }, { id: 'send', icon: I.send }, { id: 'bars', icon: I.bars }, { id: 'factory', icon: I.factory }, { id: 'people', icon: I.people }, { id: 'flask', icon: I.flask }, { id: 'server', icon: I.server }, { id: 'pulse', icon: I.pulse }, { id: 'docplus', icon: I.docplus }, { id: 'person', icon: I.person }, // ← Coletores { id: 'pin', icon: I.pin }, { id: 'tag', icon: I.tag }, ]; function Sidebar({ active = null, highlight = null }) { return (
{/* Logo strip */}
{/* Burger */}
{I.burger}
{/* Icon list */}
{SIDEBAR_ITEMS.map((it) => { const isActive = active === it.id; const isHi = highlight === it.id; return (
{it.icon}
); })}
); } // ── Top header bar ───────────────────────────────────────────────────────── function TopBar({ title, right, leftBack = false }) { return (
{leftBack && (
{I.back}
)}
{title}
{right}
); } // ── App shell wrapper ────────────────────────────────────────────────────── function AppShell({ activeSidebar, sidebarHighlight, title, headerRight, headerBack, showChat = true, children }) { return (
{children}
{showChat && }
); } // ── Chat button (bottom right) ───────────────────────────────────────────── function ChatButton({ pulse = false, ring = false }) { return (
{I.chat} {pulse && ( )}
); } // ── Pill button (header CTAs) ────────────────────────────────────────────── function PillButton({ icon, label, color = CTX_INK, bg = '#fff', highlight = false }) { return (
{icon} {label}
); } // ── Animated cursor with click ripple ────────────────────────────────────── function Cursor({ x, y, clicking = false }) { return (
{clicking && (
)}
); } // ── Typed text helper: returns text[0..N] based on progress ─────────────── function typed(text, progress) { const n = Math.floor(text.length * clamp(progress, 0, 1) + 0.0001); return text.slice(0, n); } // ── Caption strip (lower-third) ──────────────────────────────────────────── function Caption({ text, x = 80, y = 950, width = 800, accent = CTX_GREEN_LIME, dark = true }) { const { progress, localTime, duration } = useSprite(); const entryDur = 0.4; const exitDur = 0.3; let opacity = 1, ty = 0; if (localTime < entryDur) { const t = Easing.easeOutBack(localTime / entryDur); opacity = clamp(localTime / entryDur, 0, 1); ty = (1 - t) * 14; } else if (localTime > duration - exitDur) { const t = Easing.easeInCubic((localTime - (duration - exitDur)) / exitDur); opacity = 1 - t; ty = -t * 10; } return (
{text}
); } // SubSprite: like Sprite but timed relative to the parent sprite's localTime. // Use this inside another to gate children to a window relative to // the parent's start time. function SubSprite({ start = 0, end = Infinity, children, keepMounted = false }) { const parent = React.useContext(SpriteContext); const parentLocal = parent.localTime || 0; const visible = parentLocal >= start && parentLocal <= end; if (!visible && !keepMounted) return null; const duration = end - start; const localTime = Math.max(0, parentLocal - start); const progress = duration > 0 && isFinite(duration) ? clamp(localTime / duration, 0, 1) : 0; const value = { localTime, progress, duration, visible }; return ( {typeof children === 'function' ? children(value) : children} ); } Object.assign(window, { CTX_BLUE, CTX_BLUE_DARK, CTX_TEAL, CTX_BG, CTX_INK, CTX_MUTED, CTX_GREEN_DK, CTX_GREEN_LIME, CTX_RED, CTX_SIDEBAR, CTX_DIVIDER, SynviaArrow, SynviaLogo, SynviaLogoFull, I, Sidebar, TopBar, AppShell, ChatButton, PillButton, Cursor, typed, Caption, SubSprite, });