Complete visual overhaul of the Aryx application with the Luminous Depth
design language — blue-tinted dark surfaces, brand gradient accents,
glass-morphism effects, and refined typography.
Design Foundation:
- New color system with CSS custom properties for all surfaces, borders,
text, accents, and status colors
- Typography: Outfit (display), DM Sans (body), JetBrains Mono (code)
- Animations: accent-flow, thinking-wave, ambient-glow
- Utility classes: glass-surface, glow-border, brand-gradient-bg/text
- Light theme with cool-tinted whites and blue-tinted shadows
Components Updated:
- UI primitives (TextInput, SelectInput, ToggleSwitch, FormField, etc.)
- AppShell with ambient glow background
- Sidebar with brand gradient selection and accent-flow running bars
- ChatPane with semantic phase tinting and gradient user avatars
- WelcomePane with nebula background and motion entrance animations
- All chat banners (Approval, UserInput, PlanReview, MCP Auth, etc.)
- ActivityPanel and RunTimeline with glass-surface cards
- Settings panels, modals, and editor shells
- TerminalPanel with harmonized ANSI palette
- PatternGraph nodes with glass-surface styling
- MarkdownComposer toolbar
Zero hardcoded zinc/indigo color classes remain in renderer components.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Remove the prismSetup module that imported prismjs directly — it
caused Vite to pre-bundle prismjs into a separate chunk from
@lexical/code-prism, breaking the CJS require chain. Language
components tried to call Prism.languages.extend() before the base
grammars were available, crashing the app.
Instead, add optimizeDeps.include for prismjs and @lexical/code-prism
so Vite pre-bundles them together, preserving the correct CJS
evaluation order within a single chunk.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The previous approach imported prismjs component files directly in
MarkdownComposer.tsx. In Vite dev mode, each component is served
as a separate ESM module whose IIFE references a bare 'Prism' global
that doesn't exist yet, crashing the app.
Fix: create a dedicated prismSetup module that imports prismjs and
assigns globalThis.Prism, then import it from the renderer entry
point (main.tsx) before any component that loads @lexical/code-prism.
ESM evaluation order guarantees the global is set before the
tokenizer captures its reference.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
