docs.html (89134B)
1 <!DOCTYPE html> 2 <html lang="en" class="dark scroll-smooth"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6 <title>Technical Documentation | Veyrix IDE</title> 7 8 <link rel="icon" type="image/svg+xml" href="assets/veyrix.svg"> 9 <meta name="theme-color" content="#121b2a"> 10 11 <!-- Using Compiled CSS to reduce RAM usage --> 12 <link rel="stylesheet" href="assets/style.css"> 13 14 <style> 15 * { -webkit-tap-highlight-color: transparent; } 16 :focus:not(:focus-visible) { outline: none; } 17 :focus-visible { outline: 2px solid theme('colors.veyrix.accent'); outline-offset: 2px; border-radius: 4px; } 18 19 ::-webkit-scrollbar { width: 8px; height: 8px; } 20 ::-webkit-scrollbar-track { background: transparent; } 21 ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } 22 ::-webkit-scrollbar-thumb:hover { background: #475569; } 23 24 @media (prefers-reduced-motion: reduce) { 25 *, ::before, ::after { 26 animation-duration: 0.01ms !important; 27 animation-iteration-count: 1 !important; 28 transition-duration: 0.01ms !important; 29 scroll-behavior: auto !important; 30 } 31 } 32 33 .glass-header { 34 background: rgba(18, 27, 42, 0.85); 35 backdrop-filter: blur(16px); 36 -webkit-backdrop-filter: blur(16px); 37 border-bottom: 1px solid theme('colors.veyrix.border'); 38 } 39 40 .glass-footer { 41 background: rgba(18, 27, 42, 0.85); 42 backdrop-filter: blur(12px); 43 -webkit-backdrop-filter: blur(12px); 44 border-top: 1px solid theme('colors.veyrix.border'); 45 } 46 47 .doc-section { 48 scroll-margin-top: 6rem; 49 position: relative; 50 } 51 52 .doc-heading { position: relative; display: flex; align-items: center; gap: 0.5rem; } 53 .doc-heading .anchor-icon { display: none !important; opacity: 0; transition: opacity 0.2s; color: theme('colors.veyrix.muted'); } 54 .doc-heading:hover .anchor-icon { display: none !important; opacity: 1; } 55 56 .nav-link { 57 position: relative; 58 overflow: hidden; 59 transition: all 0.2s ease; 60 } 61 62 .nav-link::before { 63 content: ''; 64 position: absolute; 65 left: 0; 66 top: 0; 67 bottom: 0; 68 width: 3px; 69 background-color: theme('colors.veyrix.accent'); 70 transform: translateX(-100%); 71 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 72 border-radius: 0 4px 4px 0; 73 } 74 75 .nav-link:hover { background-color: rgba(255, 255, 255, 0.05); color: white; } 76 .nav-link:hover::before { transform: translateX(0); } 77 .nav-link.active { background-color: rgba(59, 130, 246, 0.1); color: white; } 78 .nav-link.active::before { transform: translateX(0); background-color: theme('colors.veyrix.accent'); } 79 80 /* Animations */ 81 @keyframes slideUp { 82 0% { opacity: 0; transform: translateY(20px); } 83 100% { opacity: 1; transform: translateY(0); } 84 } 85 @keyframes fadeIn { 86 0% { opacity: 0; } 87 100% { opacity: 1; } 88 } 89 .animate-slide-up { animation: slideUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } 90 .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; } 91 92 /* Staggered Delays */ 93 .delay-100 { animation-delay: 50ms; } 94 .delay-150 { animation-delay: 100ms; } 95 .delay-200 { animation-delay: 150ms; } 96 .delay-250 { animation-delay: 200ms; } 97 .delay-300 { animation-delay: 250ms; } 98 99 /* Code Block Styling */ 100 pre { 101 background: #00000040; 102 border: 1px solid theme('colors.veyrix.border'); 103 border-radius: 0.5rem; 104 padding: 1rem; 105 overflow-x: auto; 106 font-size: 0.85rem; 107 line-height: 1.5; 108 color: theme('colors.veyrix.text'); 109 } 110 code .keyword { color: #c678dd; } 111 code .string { color: #98c379; } 112 code .property { color: #e06c75; } 113 code .comment { color: theme('colors.veyrix.muted'); font-style: italic; } 114 115 /* UI Mockup Styling */ 116 .mockup-window { 117 background: theme('colors.veyrix.surface'); 118 border: 1px solid theme('colors.veyrix.border'); 119 border-radius: 0.5rem; 120 overflow: hidden; 121 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); 122 } 123 .mockup-header { background: rgba(0,0,0,0.3); height: 28px; display: flex; align-items: center; padding: 0 12px; gap: 6px; } 124 .mockup-dot { width: 10px; height: 10px; border-radius: 50%; } 125 126 .hamburger { 127 display: inline-flex; 128 align-items: center; 129 justify-content: center; 130 cursor: pointer; 131 transition-property: opacity, filter; 132 transition-duration: 0.15s; 133 transition-timing-function: linear; 134 border: 0; 135 margin: 0; 136 overflow: visible; 137 background: transparent; 138 } 139 @media (min-width: 768px) { .hamburger { display: none; } } 140 .hamburger:hover { opacity: 0.8; } 141 .hamburger-box { width: 20px; height: 14px; display: inline-block; position: relative; } 142 .hamburger-inner { display: block; top: 50%; margin-top: -1px; } 143 .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { 144 width: 20px; height: 2px; background-color: white; border-radius: 4px; position: absolute; 145 transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; 146 } 147 .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } 148 .hamburger-inner::before { top: -6px; } 149 .hamburger-inner::after { bottom: -6px; } 150 .hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 151 .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } 152 .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } 153 .hamburger--spin.is-active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 154 .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } 155 .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } 156 @media (max-width: 768px) { 157 #docs-sidebar { 158 /* Force fixed positioning and ignore all parent layout rules */ 159 position: fixed !important; 160 top: 0 !important; 161 bottom: 0 !important; 162 left: 0 !important; 163 164 /* Restore full screen width and height */ 165 width: 100% !important; 166 height: 100vh !important; 167 height: 100dvh !important; 168 169 /* The highest possible priority to be on top of footer */ 170 z-index: 2147483647 !important; 171 172 /* Fix for being 'behind' - resets stacking context */ 173 margin: 0 !important; 174 transform: none !important; 175 isolation: isolate !important; 176 177 /* Internal scrolling only */ 178 overflow-y: auto !important; 179 overscroll-behavior: contain !important; 180 181 /* Semi-transparent background with glass effect */ 182 background-color: rgba(18, 27, 42, 0.85) !important; /* Semi-transparent version of your theme color */ 183 backdrop-filter: blur(8px) !important; /* Adds a blur effect to content behind the sidebar */ 184 -webkit-backdrop-filter: blur(8px) !important; /* Safari support */ 185 } 186 187 /* Force the footer and main content behind the sidebar when open */ 188 body:has(#docs-sidebar:not(.hidden)) footer, 189 body:has(#docs-sidebar:not(.hidden)) main { 190 z-index: 1 !important; 191 position: relative !important; 192 } 193 194 /* Lock the background page so the footer doesn't slide under the sidebar */ 195 body:has(#docs-sidebar:not(.hidden)) { 196 overflow: hidden !important; 197 height: 100vh !important; 198 } 199 } 200 201 202 </style> 203 </head> 204 <body class="bg-veyrix-bg text-veyrix-text antialiased selection:bg-veyrix-accent/30 font-sans flex flex-col min-h-screen relative"> 205 206 <!-- Background Glows --> 207 <div class="fixed top-0 left-0 w-[500px] h-[500px] bg-veyrix-accent/10 rounded-full blur-[120px] pointer-events-none -translate-x-1/2 -translate-y-1/2"></div> 208 <div class="fixed bottom-0 right-0 w-[600px] h-[600px] bg-purple-600/5 rounded-full blur-[150px] pointer-events-none translate-x-1/3 translate-y-1/3"></div> 209 210 <!-- Header --> 211 <header class="fixed w-full top-0 h-14 glass-header z-50 animate-fade-in" role="banner"> 212 <div class="max-w-7xl mx-auto h-full px-4 md:px-6 flex items-center justify-between"> 213 <div class="flex items-center gap-2 md:gap-3"> 214 215 <!-- Animated Hamburger Menu --> 216 <button id="hamburger-btn" class="hamburger hamburger--spin md:hidden p-1.5 rounded transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-veyrix-accent" type="button" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="docs-sidebar" onclick="toggleDocsMenu()"> 217 <span class="hamburger-box"> 218 <span class="hamburger-inner"></span> 219 </span> 220 </button> 221 222 <a href="/" class="flex items-center gap-2.5 focus:outline-none rounded-lg focus-visible:ring-2 focus-visible:ring-veyrix-accent group p-1 -ml-1"> 223 <img src="assets/veyrix.svg" alt="Veyrix Logo" class="w-8 h-8 md:w-10 md:h-10 transform transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3"> 224 <div class="flex flex-col items-start justify-center md:flex-row md:items-baseline md:gap-2"> 225 <span class="font-bold text-white tracking-wide text-[15px] md:text-base leading-[1.1] md:leading-normal">Veyrix IDE</span> 226 <span class="text-veyrix-muted font-medium md:font-normal text-[11px] md:text-sm leading-[1.1] md:leading-normal">Documentation</span> 227 </div> 228 </a> 229 </div> 230 231 <!-- Right Side Buttons restored --> 232 <div class="flex items-center gap-3 md:gap-4"> 233 <a href="https://github.com/notamitgamer/veyrix" target="_blank" rel="noopener noreferrer" aria-label="GitHub Repository" class="flex text-veyrix-muted hover:text-white transition-colors items-center gap-1.5 text-sm md:mr-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-veyrix-accent rounded-full p-1 md:p-0"> 234 <svg class="w-5 h-5 md:w-5 md:h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.161 22 16.416 22 12c0-5.523-4.477-10-10-10z"/></svg> 235 </a> 236 <a href="/" class="px-3 md:px-4 py-1.5 text-sm font-medium rounded-lg bg-veyrix-accent hover:bg-veyrix-accentHover text-white shadow-[0_0_15px_rgba(59,130,246,0.3)] hover:shadow-[0_0_20px_rgba(59,130,246,0.5)] transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-veyrix-bg focus-visible:ring-veyrix-accent flex items-center gap-1.5 md:gap-2"> 237 <svg class="w-4 h-4 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg> 238 Launch IDE 239 </a> 240 </div> 241 </div> 242 </header> 243 244 <!-- Main Layout --> 245 <div class="flex-1 max-w-7xl mx-auto w-full flex flex-col md:flex-row mt-14 relative z-10"> 246 247 <!-- Sidebar Navigation --> 248 <aside id="docs-sidebar" role="navigation" aria-label="Technical Documentation Navigation" class="hidden md:block fixed md:sticky top-14 left-0 w-full md:w-64 h-[calc(100vh-3.5rem)] z-40 bg-veyrix-bg/95 md:bg-transparent backdrop-blur-xl md:backdrop-blur-none border-b md:border-b-0 md:border-r border-veyrix-border overflow-y-auto p-6 shrink-0 transition-all duration-300"> 249 <h3 class="text-[10px] font-bold text-veyrix-muted uppercase tracking-widest mb-4 px-3 opacity-0 animate-slide-up">Documentation</h3> 250 <nav class="space-y-1 text-sm font-medium mb-6"> 251 <a href="#introduction" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-100">Introduction</a> 252 <a href="#overview" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-100">Overview & Stack</a> 253 <a href="#usage-guide" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-100">Comprehensive Usage Guide</a> 254 <a href="#visual-system" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-150">Visual System Design</a> 255 <a href="#state-management" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-150">State Management</a> 256 <a href="#storage-model" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-150">Local Storage (IndexedDB)</a> 257 <a href="#cloud-infrastructure" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-200">Cloud & Synchronization</a> 258 <a href="#cryptography" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-200">Cryptography & Security</a> 259 <a href="#threat-model" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-200">Threat Model Assumptions</a> 260 <a href="#performance" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-250">Performance & Benchmarks</a> 261 <a href="#error-handling" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-250">Error Handling Behavior</a> 262 263 <h3 class="text-[10px] font-bold text-veyrix-muted uppercase tracking-widest mt-6 mb-2 px-3 opacity-0 animate-slide-up delay-250">Veyrix Web (Multi-File)</h3> 264 <a href="#web-architecture" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-250">Web IDE Architecture</a> 265 <a href="#web-preview" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-250">Live Preview Engine</a> 266 <a href="#web-export" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-250">Workspace Export (ZIP)</a> 267 268 <h3 class="text-[10px] font-bold text-veyrix-muted uppercase tracking-widest mt-6 mb-2 px-3 opacity-0 animate-slide-up delay-250">General</h3> 269 <a href="#faq" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-250">Frequently Asked Questions</a> 270 <a href="#limitations" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-300">Limitations</a> 271 <a href="#roadmap" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-300">Roadmap</a> 272 <a href="#ui-visuals" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-300">UI Visuals</a> 273 <a href="#legal" class="nav-link block px-3 py-2 rounded-lg text-veyrix-muted opacity-0 animate-slide-up delay-300">Legal Disclaimer & Licensing</a> 274 </nav> 275 </aside> 276 277 <!-- Documentation Content --> 278 <main class="flex-1 p-6 md:p-10 lg:p-16 overflow-y-auto scroll-smooth pb-32" id="main-content" role="main"> 279 <div class="max-w-4xl space-y-20"> 280 281 <!-- Section: Introduction --> 282 <section id="introduction" class="doc-section opacity-0 animate-slide-up delay-100"> 283 <div class="flex items-center gap-3 mb-4"> 284 <div class="px-3 py-1 rounded-full bg-veyrix-accent/10 border border-veyrix-accent/20 text-veyrix-accent text-xs font-mono font-semibold">v1.0.9</div> 285 <div class="px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-mono font-semibold">Stable</div> 286 </div> 287 <h1 class="text-4xl md:text-5xl font-extrabold text-white mb-8 tracking-tight leading-normal pb-2 doc-heading"> 288 Veyrix IDE 289 <a href="#introduction" class="anchor-icon mt-2"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 290 </h1> 291 292 <h2 class="text-2xl font-bold text-white mb-4 border-b border-veyrix-border pb-2">What is Veyrix IDE?</h2> 293 <p class="text-veyrix-muted leading-relaxed mb-8 text-base"> 294 Veyrix is a lightweight, offline-first progressive web application (PWA) that transforms your browser into a highly responsive code editor. It is designed to run seamlessly in strict or restricted browser environments, keeping all processing and storage entirely on the client side without relying on backend servers. 295 </p> 296 297 <h2 class="text-2xl font-bold text-white mb-4 border-b border-veyrix-border pb-2">Why use it?</h2> 298 <div class="grid md:grid-cols-2 gap-4"> 299 <div class="bg-veyrix-surface border border-veyrix-border p-4 rounded-xl shadow-sm"> 300 <h4 class="text-white font-medium mb-2 flex items-center gap-2"> 301 <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg> 302 Absolute Privacy 303 </h4> 304 <p class="text-xs text-veyrix-muted leading-relaxed">Your files never leave your device. Everything is securely saved in your browser's local IndexedDB storage unless you use cloud share.</p> 305 </div> 306 <div class="bg-veyrix-surface border border-veyrix-border p-4 rounded-xl shadow-sm"> 307 <h4 class="text-white font-medium mb-2 flex items-center gap-2"> 308 <svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg> 309 Blazing Fast 310 </h4> 311 <p class="text-xs text-veyrix-muted leading-relaxed">Runs smoothly on low-end devices by bypassing heavy virtual DOMs and using a native vanilla JavaScript architecture.</p> 312 </div> 313 <div class="bg-veyrix-surface border border-veyrix-border p-4 rounded-xl shadow-sm"> 314 <h4 class="text-white font-medium mb-2 flex items-center gap-2"> 315 <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> 316 True Offline Mode 317 </h4> 318 <p class="text-xs text-veyrix-muted leading-relaxed">Install it as a Web App (PWA) and write code anywhere, anytime—no internet connection required.</p> 319 </div> 320 <div class="bg-veyrix-surface border border-veyrix-border p-4 rounded-xl shadow-sm"> 321 <h4 class="text-white font-medium mb-2 flex items-center gap-2"> 322 <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> 323 Built-in Time Machine 324 </h4> 325 <p class="text-xs text-veyrix-muted leading-relaxed">Easily save snapshots of your files to instantly roll back to previous versions without setting up Git.</p> 326 </div> 327 </div> 328 </section> 329 330 <!-- Section: Overview --> 331 <section id="overview" class="doc-section opacity-0 animate-slide-up delay-100"> 332 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 333 Architecture & Stack 334 <a href="#overview" class="anchor-icon mt-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 335 </h2> 336 337 <p class="text-veyrix-text leading-relaxed mb-8 text-base md:text-lg"> 338 Veyrix IDE is an offline-first, client-side progressive web application (PWA) engineered for high-performance code editing in browser-restricted environments. It bypasses traditional Virtual DOM overhead by utilizing a vanilla JavaScript monolithic state architecture paired directly with the Ace Editor engine. 339 </p> 340 341 <h3 class="text-xl font-semibold text-white mb-4 border-b border-veyrix-border pb-2">Core Technology Stack</h3> 342 <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> 343 <div class="bg-veyrix-surface border border-veyrix-border p-4 rounded-xl"> 344 <h4 class="text-white font-medium mb-1 text-sm">Ace Editor</h4> 345 <p class="text-xs text-veyrix-muted">v1.32.6 • Core Text Engine</p> 346 </div> 347 <div class="bg-veyrix-surface border border-veyrix-border p-4 rounded-xl"> 348 <h4 class="text-white font-medium mb-1 text-sm">IndexedDB</h4> 349 <p class="text-xs text-veyrix-muted">Local Persistence Layer</p> 350 </div> 351 <div class="bg-veyrix-surface border border-veyrix-border p-4 rounded-xl"> 352 <h4 class="text-white font-medium mb-1 text-sm">LZ-String</h4> 353 <p class="text-xs text-veyrix-muted">v1.5.0 • URL Compression</p> 354 </div> 355 <div class="bg-veyrix-surface border border-veyrix-border p-4 rounded-xl"> 356 <h4 class="text-white font-medium mb-1 text-sm">Firebase</h4> 357 <p class="text-xs text-veyrix-muted">v11.6.1 • Cloud Share (Manual)</p> 358 </div> 359 </div> 360 </section> 361 362 <!-- Section: Usage Guide --> 363 <section id="usage-guide" class="doc-section opacity-0 animate-slide-up delay-100"> 364 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 365 Comprehensive Usage Guide 366 <a href="#usage-guide" class="anchor-icon"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 367 </h2> 368 <p class="text-veyrix-muted text-sm mb-8">This section details how to operate the Veyrix IDE effectively, covering file management, keyboard shortcuts, versioning, and sharing capabilities.</p> 369 370 <div class="space-y-8"> 371 <!-- File Management --> 372 <div> 373 <h3 class="text-lg font-semibold text-white mb-4">1. Managing Files</h3> 374 <div class="bg-veyrix-surface border border-veyrix-border rounded-lg p-5 space-y-4"> 375 <div> 376 <strong class="text-veyrix-text block mb-1">Creating a New File:</strong> 377 <p class="text-xs text-veyrix-muted">Click the `+` icon in the sidebar (or the floating button on mobile). Type your desired filename including the extension (e.g., `script.js`, `index.html`, `Dockerfile`). Veyrix automatically detects the language based on the extension and applies correct syntax highlighting. You can create a file without an extension.</p> 378 </div> 379 <div> 380 <strong class="text-veyrix-text block mb-1">Importing an Existing File:</strong> 381 <p class="text-xs text-veyrix-muted">Click the <span class="text-white font-medium">Open File</span> icon (folder with up arrow) in the top navigation bar, or press <kbd class="px-1 py-0.5 rounded bg-white/10 text-white font-mono">Ctrl+O</kbd>. Select any valid text, configuration, or code file from your device. Binary files (like images or compiled `.exe` files) will be rejected.</p> 382 </div> 383 <div> 384 <strong class="text-veyrix-text block mb-1">Renaming or Deleting:</strong> 385 <p class="text-xs text-veyrix-muted">Hover over any file in the left sidebar and click the three-dots (...) icon. From the dropdown, you can select <span class="text-white font-medium">Rename</span>, <span class="text-red-400 font-medium">Delete</span>, or Download the specific file.</p> 386 </div> 387 </div> 388 </div> 389 390 <!-- Editing & Formatting --> 391 <div> 392 <h3 class="text-lg font-semibold text-white mb-4">2. Editing & Formatting</h3> 393 <div class="bg-veyrix-surface border border-veyrix-border rounded-lg p-5 space-y-4"> 394 <div> 395 <strong class="text-veyrix-text block mb-1">Autosave & Manual Save:</strong> 396 <p class="text-xs text-veyrix-muted">Veyrix automatically caches your typing to the local database 500ms after you stop typing. The blue dot next to your filename in the top bar indicates unsaved changes. You can force a save at any time by pressing <kbd class="px-1 py-0.5 rounded bg-white/10 text-white font-mono">Ctrl+S</kbd> or clicking the floppy disk icon.</p> 397 </div> 398 <div> 399 <strong class="text-veyrix-text block mb-1">Code Formatting (Prettier):</strong> 400 <p class="text-xs text-veyrix-muted">To instantly beautify your code (fix indentation and spacing), press <kbd class="px-1 py-0.5 rounded bg-white/10 text-white font-mono">Alt+Shift+F</kbd>. Note: Formatting is only supported for recognized web languages (HTML, CSS, JS/JSX, JSON, Markdown).</p> 401 </div> 402 </div> 403 </div> 404 405 <!-- Version Control (Snapshots) --> 406 <div> 407 <h3 class="text-lg font-semibold text-white mb-4">3. Snapshots (Local Version History)</h3> 408 <div class="bg-veyrix-surface border border-veyrix-border rounded-lg p-5 space-y-4"> 409 <p class="text-xs text-veyrix-muted">Veyrix has a built-in "Time Machine" for your files.</p> 410 <ul class="list-disc list-inside text-xs text-veyrix-muted space-y-2"> 411 <li><strong class="text-white">Save a Snapshot:</strong> Click the bookmark icon in the top right. This saves a frozen copy of your code at that exact moment.</li> 412 <li><strong class="text-white">Limits:</strong> You can save a maximum of 5 snapshots per file. If you try to save a 6th, the IDE will prompt you to permanently delete the oldest one.</li> 413 <li><strong class="text-white">Restore:</strong> Click the clock icon to view your history. Clicking "Restore" on an older version will immediately replace your current editor content with the historical code.</li> 414 </ul> 415 </div> 416 </div> 417 418 <!-- Sharing --> 419 <div> 420 <h3 class="text-lg font-semibold text-white mb-4">4. Sharing Code</h3> 421 <div class="bg-veyrix-surface border border-veyrix-border rounded-lg p-5 space-y-4"> 422 <p class="text-xs text-veyrix-muted">Click the Share icon to open the sharing modal. You have three options:</p> 423 <div> 424 <strong class="text-veyrix-text block mb-1">Fast Local Share:</strong> 425 <p class="text-xs text-veyrix-muted">Compresses your entire file into the URL. No data leaves your browser. Best for very small snippets, as large files will generate massively long URLs.</p> 426 </div> 427 <div> 428 <strong class="text-veyrix-text block mb-1">Cloud Share:</strong> 429 <p class="text-xs text-veyrix-muted">Uploads your code to an anonymous, secure Firebase database. Generates a short link. You can optionally protect this link with a password.</p> 430 </div> 431 <div> 432 <strong class="text-veyrix-text block mb-1">Share via Device:</strong> 433 <p class="text-xs text-veyrix-muted">Uses your phone or computer's native sharing menu (e.g., Airdrop, WhatsApp, Email) to send the raw text of your code.</p> 434 </div> 435 </div> 436 </div> 437 438 </div> 439 </section> 440 441 <!-- Section: Visual System Design --> 442 <section id="visual-system" class="doc-section opacity-0 animate-slide-up delay-150"> 443 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 444 Visual System Design 445 <a href="#visual-system" class="anchor-icon"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 446 </h2> 447 <p class="text-veyrix-muted text-sm mb-6">Below is a high-level visual representation of the data flow and architectural boundaries within Veyrix IDE. Notice the strict isolation of the Cloud layer.</p> 448 449 <div class="bg-veyrix-surface border border-veyrix-border rounded-xl p-6 relative overflow-hidden"> 450 <!-- Connecting Lines (Desktop) --> 451 <div class="hidden md:block absolute top-1/2 left-[20%] right-[20%] h-0.5 bg-white/10 -translate-y-1/2 z-0"></div> 452 453 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 relative z-10"> 454 <!-- Presentation Layer --> 455 <div class="bg-black/20 border border-veyrix-accent/30 p-4 rounded-lg shadow-lg flex flex-col items-center text-center"> 456 <div class="w-10 h-10 rounded-full bg-veyrix-accent/20 text-veyrix-accent flex items-center justify-center mb-3"> 457 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg> 458 </div> 459 <h4 class="text-white font-bold text-sm mb-1">Presentation Layer</h4> 460 <p class="text-[10px] text-veyrix-muted mb-2">Ace Editor & Vanilla DOM UI</p> 461 <div class="w-full bg-black/40 rounded p-2 text-[10px] text-veyrix-accent font-mono">state.editor.getValue()</div> 462 </div> 463 464 <!-- State & Persistence Layer --> 465 <div class="bg-black/20 border border-emerald-500/30 p-4 rounded-lg shadow-lg flex flex-col items-center text-center"> 466 <div class="w-10 h-10 rounded-full bg-emerald-500/20 text-emerald-400 flex items-center justify-center mb-3"> 467 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg> 468 </div> 469 <h4 class="text-white font-bold text-sm mb-1">Local Persistence</h4> 470 <p class="text-[10px] text-veyrix-muted mb-2">IndexedDB (VeyrixFS)</p> 471 <div class="w-full bg-black/40 rounded p-2 text-[10px] text-emerald-300 font-mono">DB.save(state.files)</div> 472 </div> 473 474 <!-- Cloud Optional Layer --> 475 <div class="bg-black/20 border border-purple-500/30 p-4 rounded-lg shadow-lg flex flex-col items-center text-center border-dashed"> 476 <div class="w-10 h-10 rounded-full bg-purple-500/20 text-purple-400 flex items-center justify-center mb-3"> 477 <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path></svg> 478 </div> 479 <h4 class="text-white font-bold text-sm mb-1">Cloud Share (Lazy)</h4> 480 <p class="text-[10px] text-veyrix-muted mb-2">Firebase Firestore</p> 481 <div class="w-full bg-black/40 rounded p-2 text-[10px] text-purple-300 font-mono">addDoc(shared_snippets)</div> 482 </div> 483 </div> 484 </div> 485 </section> 486 487 <!-- Section: State Management --> 488 <section id="state-management" class="doc-section opacity-0 animate-slide-up delay-150"> 489 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 490 State Management Pattern 491 <a href="#state-management" class="anchor-icon"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 492 </h2> 493 <p class="text-veyrix-muted leading-relaxed mb-6 text-sm"> 494 To maintain extreme performance on low-end mobile devices, Veyrix eschews frameworks like React or Vue. Instead, it relies on a mutable, global singleton `state` object. UI updates are handled through explicit imperative functions triggered by state mutations, avoiding full tree diffing. 495 </p> 496 497 <pre><code><span class="comment">// Global State Singleton</span> 498 <span class="keyword">const</span> state = { 499 <span class="property">files</span>: [], <span class="comment">// Array of File objects</span> 500 <span class="property">activeFileId</span>: <span class="keyword">null</span>, <span class="comment">// ID of currently rendered file</span> 501 <span class="property">editor</span>: <span class="keyword">null</span>, <span class="comment">// Ace Editor instance reference</span> 502 <span class="property">db</span>: <span class="keyword">null</span>, <span class="comment">// IndexedDB connection instance</span> 503 <span class="property">renameTargetId</span>: <span class="keyword">null</span> <span class="comment">// Transient state for UI modals</span> 504 }; 505 </code></pre> 506 507 <div class="mt-6 bg-veyrix-accent/10 border-l-4 border-veyrix-accent p-4 rounded-r-lg"> 508 <strong class="text-veyrix-accent text-sm block mb-1">Architectural Decision Record (ADR)</strong> 509 <p class="text-xs text-veyrix-text">The Ace Editor manages its own complex internal state (cursors, selections, undo stacks). Wrapping it in a reactive framework often leads to race conditions during rapid typing. By keeping the source of truth in `state.editor` and extracting the `value` asynchronously via debounced events, we achieve sub-16ms frame times.</p> 510 </div> 511 </section> 512 513 <!-- Section: Storage Model --> 514 <section id="storage-model" class="doc-section opacity-0 animate-slide-up delay-150"> 515 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 516 Local Storage Model (IndexedDB) 517 <a href="#storage-model" class="anchor-icon"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 518 </h2> 519 <p class="text-veyrix-muted leading-relaxed mb-6 text-sm"> 520 Persistence is entirely managed via the browser's native IndexedDB API using a Promisified wrapper. The database is named `VeyrixFS` (Version 1). 521 </p> 522 523 <h4 class="text-white font-semibold text-sm mb-3">Schema: `files` ObjectStore</h4> 524 <p class="text-xs text-veyrix-muted mb-4">KeyPath: <code class="bg-white/10 text-white px-1 py-0.5 rounded">id</code></p> 525 526 <pre><code><span class="comment">// TypeScript Representation of the IndexedDB Record</span> 527 <span class="keyword">interface</span> <span class="property">VeyrixFile</span> { 528 <span class="property">id</span>: <span class="keyword">string</span>; <span class="comment">// e.g., "f_a1b2c3d4e_1679000000"</span> 529 <span class="property">name</span>: <span class="keyword">string</span>; <span class="comment">// Base filename (e.g., "app")</span> 530 <span class="property">ext</span>: <span class="keyword">string</span>; <span class="comment">// Extension (e.g., "js", "html")</span> 531 <span class="property">content</span>: <span class="keyword">string</span>; <span class="comment">// Raw string payload of the editor</span> 532 <span class="property">unsaved</span>: <span class="keyword">boolean</span>; <span class="comment">// Tracks dirty state for the UI</span> 533 <span class="property">lastModified</span>: <span class="keyword">number</span>; <span class="comment">// Epoch timestamp</span> 534 <span class="property">snapshotCounter</span>?: <span class="keyword">number</span>; 535 <span class="property">snapshots</span>?: <span class="property">Snapshot</span>[]; <span class="comment">// Array (Max length: 5, FIFO eviction)</span> 536 } 537 </code></pre> 538 </section> 539 540 <!-- Section: Cloud Infrastructure --> 541 <section id="cloud-infrastructure" class="doc-section opacity-0 animate-slide-up delay-200"> 542 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 543 Cloud & Synchronization Strategy 544 <a href="#cloud-infrastructure" class="anchor-icon"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 545 </h2> 546 547 <p class="text-veyrix-muted text-sm mb-6"> 548 Veyrix employs a zero-cost initial load strategy. Firebase SDKs (App, Auth, Firestore) are <strong>not</strong> bundled or loaded on startup. They are dynamically imported via ES Modules only when a user initiates a "Cloud Share". 549 </p> 550 551 <div class="grid md:grid-cols-2 gap-4"> 552 <div class="bg-veyrix-surface p-4 border border-veyrix-border rounded-lg"> 553 <h4 class="text-white font-semibold text-sm mb-2">1. Fast Local Share (LZ-String)</h4> 554 <p class="text-xs text-veyrix-muted"> 555 Compresses the payload using `LZString.compressToEncodedURIComponent`. Yields a base64-like URI-safe string appended directly to the URL. Operates entirely offline and within the client boundary. 556 </p> 557 </div> 558 <div class="bg-veyrix-surface p-4 border border-veyrix-border rounded-lg"> 559 <h4 class="text-white font-semibold text-sm mb-2">2. Cloud Share (Firestore)</h4> 560 <p class="text-xs text-veyrix-muted"> 561 Authenticates using `signInAnonymously()`. Pushes payload to the `shared_snippets` root collection. Returns a lightweight document ID reference in the URL. 562 </p> 563 </div> 564 </div> 565 </section> 566 567 <!-- Section: Cryptography & Security --> 568 <section id="cryptography" class="doc-section opacity-0 animate-slide-up delay-200"> 569 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 570 Cryptography & Security Model 571 <a href="#cryptography" class="anchor-icon"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 572 </h2> 573 574 <div class="bg-veyrix-surface p-5 rounded-lg border border-veyrix-border mb-6"> 575 <h4 class="text-white font-semibold text-sm mb-2">Zero-Knowledge Cloud Password Protection</h4> 576 <p class="text-sm text-veyrix-muted leading-relaxed mb-4"> 577 When a user applies a password to a Cloud Share snippet, the plaintext password is <strong>never</strong> transmitted to Firebase. Instead, Veyrix utilizes the native Web Crypto API to generate a SHA-256 hash locally. 578 </p> 579 <pre><code><span class="comment">// Internal Utility Method</span> 580 <span class="keyword">async function</span> <span class="property">hashPassword</span>(password) { 581 <span class="keyword">const</span> msgBuffer = <span class="keyword">new</span> <span class="property">TextEncoder</span>().<span class="property">encode</span>(password); 582 <span class="keyword">const</span> hashBuffer = <span class="keyword">await</span> crypto.subtle.<span class="property">digest</span>(<span class="string">'SHA-256'</span>, msgBuffer); 583 <span class="keyword">const</span> hashArray = <span class="property">Array</span>.<span class="property">from</span>(<span class="keyword">new</span> <span class="property">Uint8Array</span>(hashBuffer)); 584 <span class="keyword">return</span> hashArray.<span class="property">map</span>(b => b.<span class="property">toString</span>(16).<span class="property">padStart</span>(2, <span class="string">'0'</span>)).<span class="property">join</span>(<span class="string">''</span>); 585 }</code></pre> 586 </div> 587 </section> 588 589 <!-- Section: Threat Model --> 590 <section id="threat-model" class="doc-section opacity-0 animate-slide-up delay-250"> 591 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 592 Threat Model Assumptions 593 <a href="#threat-model" class="anchor-icon"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 594 </h2> 595 596 <ul class="space-y-4 text-sm text-veyrix-muted"> 597 <li class="bg-black/20 p-4 rounded border border-white/5"> 598 <strong class="text-white block mb-1">1. Physical Security</strong> 599 Veyrix relies completely on the local OS and browser profile. If an attacker gains physical, unlocked access to the device or compromises the browser profile (e.g., via malicious extensions), the IndexedDB store is considered compromised. 600 </li> 601 <li class="bg-black/20 p-4 rounded border border-white/5"> 602 <strong class="text-white block mb-1">2. Cross-Site Scripting (XSS)</strong> 603 Veyrix is an editor, not an evaluator. The Ace Editor parses content into Abstract Syntax Trees (ASTs) for highlighting. It does not execute the code within the DOM. DOM string interpolations are secured via native `textContent` mappings. 604 </li> 605 <li class="bg-black/20 p-4 rounded border border-white/5"> 606 <strong class="text-white block mb-1">3. Cloud Anonymity</strong> 607 Firebase interactions utilize `signInAnonymously()`. Data is tied to a temporary, anonymous session UID. We assume Firebase Security Rules enforce read/write access correctly based on the snippet UID, but URLs are considered semi-public unless SHA-256 hashed. 608 </li> 609 </ul> 610 </section> 611 612 <!-- Section: Performance --> 613 <section id="performance" class="doc-section opacity-0 animate-slide-up delay-250"> 614 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 615 Performance & Benchmarks 616 <a href="#performance" class="anchor-icon"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 617 </h2> 618 619 <p class="text-veyrix-muted text-sm mb-6">By stripping away Webpack overhead, Virtual DOM reconciliation, and heavy language servers, Veyrix operates on a fraction of the hardware requirements of modern cloud IDEs.</p> 620 621 <div class="overflow-x-auto mb-6"> 622 <table class="w-full text-sm text-left border border-veyrix-border rounded-lg overflow-hidden"> 623 <thead class="bg-black/40 text-veyrix-muted"> 624 <tr> 625 <th class="px-4 py-3 font-medium border-b border-veyrix-border">Environment</th> 626 <th class="px-4 py-3 font-medium border-b border-veyrix-border">Base RAM (Idle)</th> 627 <th class="px-4 py-3 font-medium border-b border-veyrix-border">Editor Engine</th> 628 <th class="px-4 py-3 font-medium border-b border-veyrix-border">Time to Interactive</th> 629 </tr> 630 </thead> 631 <tbody class="divide-y divide-veyrix-border text-veyrix-text bg-veyrix-surface"> 632 <tr class="bg-veyrix-accent/10"> 633 <td class="px-4 py-3 font-bold text-veyrix-accent">Veyrix IDE</td> 634 <td class="px-4 py-3">~30MB - 42MB</td> 635 <td class="px-4 py-3">Ace Editor (Vanilla)</td> 636 <td class="px-4 py-3">< 0.5 seconds</td> 637 </tr> 638 <tr> 639 <td class="px-4 py-3">VS Code Web</td> 640 <td class="px-4 py-3">~350MB+</td> 641 <td class="px-4 py-3">Monaco + Web Workers</td> 642 <td class="px-4 py-3">2.5 - 4 seconds</td> 643 </tr> 644 <tr> 645 <td class="px-4 py-3">CodeSandbox</td> 646 <td class="px-4 py-3">~500MB+</td> 647 <td class="px-4 py-3">Monaco + Container VM</td> 648 <td class="px-4 py-3">4 - 8 seconds</td> 649 </tr> 650 </tbody> 651 </table> 652 </div> 653 654 <h4 class="text-white font-semibold text-sm mb-3">Why Ours is Better for Mobile/Low-End:</h4> 655 <ul class="list-disc list-inside text-sm text-veyrix-muted space-y-2"> 656 <li><strong>Debounced I/O:</strong> IndexedDB writes are debounced by 500ms, ensuring zero main-thread blockage during rapid typing.</li> 657 <li><strong>No Monaco Overhead:</strong> While powerful, the Monaco editor struggles on low-end Androids due to heavy worker threading. Ace Editor is substantially lighter.</li> 658 <li><strong>Visual Viewport Anchoring:</strong> PWA implementations often suffer from layout thrashing when the soft keyboard appears. Veyrix anchors directly to the `window.visualViewport` API, freezing the reflow.</li> 659 </ul> 660 </section> 661 662 <!-- Section: Error Handling --> 663 <section id="error-handling" class="doc-section opacity-0 animate-slide-up delay-250"> 664 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 665 Error Handling Behavior 666 <a href="#error-handling" class="anchor-icon"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 667 </h2> 668 669 <div class="grid md:grid-cols-2 gap-4"> 670 <div class="bg-amber-900/10 border border-amber-500/20 p-4 rounded-lg"> 671 <strong class="text-amber-400 block mb-2 text-sm">"Incognito" / Private Mode Restraints</strong> 672 <p class="text-xs text-veyrix-muted leading-relaxed"> 673 Safari and Firefox frequently restrict or completely block `IndexedDB` access in Private Browsing. If `DB.init()` fails, Veyrix degrades gracefully to an in-memory volatile state. A UI toast warns the user that files will be lost upon closing the tab, prompting manual downloads. 674 </p> 675 </div> 676 <div class="bg-red-900/10 border border-red-500/20 p-4 rounded-lg"> 677 <strong class="text-red-400 block mb-2 text-sm">DOMException: QuotaExceededError</strong> 678 <p class="text-xs text-veyrix-muted leading-relaxed"> 679 Triggered when the physical device runs out of disk space, or the browser's origin quota is exceeded. Veyrix catches this in the `DB.save()` promise rejection, halting autosave and notifying the user to clear space or delete older snapshots. 680 </p> 681 </div> 682 </div> 683 </section> 684 685 <!-- Section: Web Architecture --> 686 <section id="web-architecture" class="doc-section opacity-0 animate-slide-up delay-250"> 687 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 688 Web IDE Architecture 689 <a href="#web-architecture" class="anchor-icon mt-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 690 </h2> 691 <p class="text-veyrix-muted leading-relaxed mb-6 text-sm"> 692 Veyrix Web (<code>web.html</code>) is an advanced, multi-file environment built specifically for web development. Unlike the single-file main IDE, it utilizes a robust virtual file system with directory structures, multi-tab editing, and an integrated real-time preview window. 693 </p> 694 695 <h4 class="text-white font-semibold text-sm mb-3">Isolated Database (VeyrixWebFS)</h4> 696 <p class="text-xs text-veyrix-muted mb-4">To prevent data collision, Veyrix Web uses a completely separate IndexedDB named <code>VeyrixWebFS</code>. It tracks full relative paths (e.g., <code>/css/style.css</code>) rather than flat IDs, enabling a true folder hierarchy.</p> 697 698 <pre><code><span class="comment">// VFS Node Representation</span> 699 <span class="keyword">interface</span> <span class="property">VFSNode</span> { 700 <span class="property">path</span>: <span class="keyword">string</span>; <span class="comment">// Absolute virtual path</span> 701 <span class="property">type</span>: <span class="keyword">string</span>; <span class="comment">// "file" or "folder"</span> 702 <span class="property">content</span>: <span class="keyword">string</span>; <span class="comment">// String payload or Base64 URI</span> 703 <span class="property">isBase64</span>: <span class="keyword">boolean</span>; <span class="comment">// Flags binary image assets</span> 704 } 705 </code></pre> 706 </section> 707 708 <!-- Section: Web Preview Engine --> 709 <section id="web-preview" class="doc-section opacity-0 animate-slide-up delay-250"> 710 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 711 Live Preview Engine 712 <a href="#web-preview" class="anchor-icon mt-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 713 </h2> 714 715 <p class="text-veyrix-muted leading-relaxed mb-6 text-sm"> 716 The core powerhouse of the Web IDE is the <code>PreviewEngine</code>. Because all files exist securely inside IndexedDB, standard relative HTML links (like <code><link rel="stylesheet" href="style.css"></code>) fail natively inside an isolated iframe. Our engine intercepts and resolves these on the fly. 717 </p> 718 719 <div class="bg-veyrix-surface border border-veyrix-border rounded-lg p-5 space-y-4"> 720 <div> 721 <strong class="text-veyrix-text block mb-1">AST Parsing & Injection:</strong> 722 <p class="text-xs text-veyrix-muted">When rendering, the engine intercepts your <code>/index.html</code> file and uses the browser's native <code>DOMParser</code> API. It scans the Document Object Model for external scripts, styles, and image tags.</p> 723 </div> 724 <div> 725 <strong class="text-veyrix-text block mb-1">Virtual Path Resolution:</strong> 726 <p class="text-xs text-veyrix-muted">Using <code>PathUtils.resolve()</code>, it computes the absolute virtual path of each linked asset, retrieves its content from the VFS, and transforms it. <code><link></code> tags are seamlessly replaced with inline <code><style></code> tags, and <code><script src></code> tags are converted to inline execution blocks.</p> 727 </div> 728 <div> 729 <strong class="text-veyrix-text block mb-1">Blob srcdoc Rendering:</strong> 730 <p class="text-xs text-veyrix-muted">The compiled master HTML string is injected directly into the iframe's <code>srcdoc</code> attribute. This entirely bypasses cross-origin requests, eliminates network latency, and keeps processing lightning fast and 100% offline.</p> 731 </div> 732 </div> 733 </section> 734 735 <!-- Section: Web Export --> 736 <section id="web-export" class="doc-section opacity-0 animate-slide-up delay-250"> 737 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 738 Workspace Export (ZIP) 739 <a href="#web-export" class="anchor-icon mt-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 740 </h2> 741 742 <p class="text-veyrix-muted text-sm mb-6"> 743 Unlike the main IDE which deals with flat single files, Veyrix Web allows you to export your entire workspace architecture effortlessly. 744 </p> 745 746 <div class="grid md:grid-cols-2 gap-4"> 747 <div class="bg-veyrix-surface p-4 border border-veyrix-border rounded-lg"> 748 <h4 class="text-white font-semibold text-sm mb-2">Combine HTML</h4> 749 <p class="text-xs text-veyrix-muted"> 750 Leverages the PreviewEngine to bundle all your CSS, JavaScript, and Base64 images into a single monolithic <code>index.html</code> file. Excellent for quick sharing or embedding in systems that don't support multi-file directories. 751 </p> 752 </div> 753 <div class="bg-veyrix-surface p-4 border border-veyrix-border rounded-lg"> 754 <h4 class="text-white font-semibold text-sm mb-2">ZIP Archive Export</h4> 755 <p class="text-xs text-veyrix-muted"> 756 Dynamically loads the <code>JSZip</code> library only when requested. It maps over the Virtual File System, constructs a standard directory structure, and outputs a downloadable <code>.zip</code> file, preserving all relative paths and binary formats perfectly. 757 </p> 758 </div> 759 </div> 760 </section> 761 762 <!-- Section: FAQ --> 763 <section id="faq" class="doc-section opacity-0 animate-slide-up delay-250"> 764 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 765 Frequently Asked Questions (FAQ) 766 <a href="#faq" class="anchor-icon"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 767 </h2> 768 769 <div class="space-y-4"> 770 <div class="bg-veyrix-surface border border-veyrix-border rounded-lg p-5"> 771 <h4 class="text-white font-semibold text-sm mb-2">Where are my files stored?</h4> 772 <p class="text-xs text-veyrix-muted">All your files are stored locally on your device inside your browser's secure IndexedDB. They are never uploaded to any server automatically. You maintain full ownership and privacy of your code. Only when you use cloud share are your files sent to the server.</p> 773 </div> 774 <div class="bg-veyrix-surface border border-veyrix-border rounded-lg p-5"> 775 <h4 class="text-white font-semibold text-sm mb-2">Do I need an internet connection to use Veyrix?</h4> 776 <p class="text-xs text-veyrix-muted">No. Once Veyrix is loaded in your browser for the first time, its Service Worker caches the application. You can use the IDE entirely offline. An internet connection is only required if you explicitly use the "Cloud Share" feature.</p> 777 </div> 778 <div class="bg-veyrix-surface border border-veyrix-border rounded-lg p-5"> 779 <h4 class="text-white font-semibold text-sm mb-2">Can I recover a deleted file?</h4> 780 <p class="text-xs text-veyrix-muted">No. Deleting a file from the sidebar removes it permanently from the local IndexedDB along with all of its associated snapshots. Please use the Download feature to keep manual backups of important code.</p> 781 </div> 782 <div class="bg-veyrix-surface border border-veyrix-border rounded-lg p-5"> 783 <h4 class="text-white font-semibold text-sm mb-2">What languages does Veyrix support?</h4> 784 <p class="text-xs text-veyrix-muted">Veyrix supports syntax highlighting for over 50 languages via Ace Editor. Common formats like HTML, CSS, JavaScript, TypeScript, Python, Markdown, JSON, YAML, and XML are auto-detected via the file extension.</p> 785 </div> 786 <div class="bg-veyrix-surface border border-veyrix-border rounded-lg p-5"> 787 <h4 class="text-white font-semibold text-sm mb-2">Can I install Veyrix as an App?</h4> 788 <p class="text-xs text-veyrix-muted flex items-baseline flex-wrap gap-1"> 789 Yes! Veyrix is a Progressive Web App (PWA). Tap the 790 <span class="inline-flex items-center self-center"> 791 <svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org"> 792 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> 793 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> 794 </svg> 795 </span> 796 button, then click on the Install Web App. It will run fullscreen without browser toolbars. 797 </p> 798 </div> 799 </div> 800 </section> 801 802 <!-- Section: Limitations & Roadmap --> 803 <div class="flex flex-col gap-16"> 804 <section id="limitations" class="doc-section opacity-0 animate-slide-up delay-300"> 805 <h2 class="text-xl font-bold text-white mb-4 border-b border-veyrix-border pb-2 doc-heading"> 806 Current Limitations 807 <a href="#limitations" class="anchor-icon"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 808 </h2> 809 <ul class="list-disc list-inside text-sm text-veyrix-muted space-y-2"> 810 <li><strong>Flat File System:</strong> No directory or subfolder support; flat array mapping.</li> 811 <li><strong>Snapshot Limit:</strong> Hardcoded FIFO limit of 5 snapshots per file to prevent quota bloating.</li> 812 <li><strong>No Language Servers:</strong> Relies entirely on basic Ace autocompletion arrays; no deep intellisense (LSP).</li> 813 <li><strong>Single View:</strong> Split-pane or multi-tab rendering is not yet supported in the DOM structure.</li> 814 </ul> 815 </section> 816 817 <section id="roadmap" class="doc-section opacity-0 animate-slide-up delay-300"> 818 <h2 class="text-xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 819 Development Roadmap 820 <a href="#roadmap" class="anchor-icon"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 821 </h2> 822 823 <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> 824 <div> 825 <h3 class="text-veyrix-accent text-sm font-semibold uppercase tracking-wider mb-4 flex items-center gap-2"> 826 Core IDE 827 </h3> 828 <div class="space-y-4 text-sm text-veyrix-muted border-l border-veyrix-border/30 pl-4"> 829 <div class="flex items-start gap-3"> 830 <span class="bg-veyrix-accent/20 text-veyrix-accent text-[10px] font-bold px-2 py-0.5 rounded shrink-0 mt-0.5">v1.0.9</span> 831 <div><strong>Native Share Protocol:</strong> Re-engineered the file sharing logic to use <code>application/octet-stream</code> and URI-context anchoring, successfully bypassing strict Desktop OS security blocks that previously triggered "Permission Denied" errors.</div> 832 </div> 833 <div class="flex items-start gap-3"> 834 <span class="bg-black/40 text-veyrix-muted text-[10px] font-bold px-2 py-0.5 rounded shrink-0 mt-0.5">v1.0.8</span> 835 <div><strong>Snapshot Restore Optimization:</strong> Updated the version history logic to trigger a confirmation modal before restoration, preventing accidental data loss and ensuring a clean editor state after recovery.</div> 836 </div> 837 </div> 838 </div> 839 840 <div> 841 <h3 class="text-blue-400 text-sm font-semibold uppercase tracking-wider mb-4 flex items-center gap-2"> 842 <span class="w-2 h-2 bg-blue-400 rounded-full"></span> 843 Web IDE 844 </h3> 845 <div class="space-y-4 text-sm text-veyrix-muted border-l border-veyrix-border/30 pl-4"> 846 <div class="flex items-start gap-3"> 847 <span class="bg-veyrix-accent/20 text-veyrix-accent text-[10px] font-bold px-2 py-0.5 rounded shrink-0 mt-0.5">v1.0.2</span> 848 <div> 849 <strong>Dynamic Viewport Resizer:</strong> 850 Implemented a draggable split-pane interface, allowing users to manually adjust the preview width to simulate and test web designs across various device breakpoints. 851 </div> 852 </div> 853 <div class="flex items-start gap-3"> 854 <span class="bg-black/40 text-veyrix-muted text-[10px] font-bold px-2 py-0.5 rounded shrink-0 mt-0.5">v1.0.1</span> 855 <div> 856 <strong>Advanced File System & Workspace:</strong> 857 Introduced nested folder mapping, batch file uploads, and a persistence-linked tab system for seamless navigation across complex project structures. 858 </div> 859 </div> 860 </div> 861 </div> 862 </div> 863 </section> 864 </div> 865 866 <!-- Section: UI Visuals --> 867 <section id="ui-visuals" class="doc-section opacity-0 animate-slide-up delay-300"> 868 <h2 class="text-2xl font-bold text-white mb-6 border-b border-veyrix-border pb-2 doc-heading"> 869 UI Visuals & Layout 870 <a href="#ui-visuals" class="anchor-icon"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></a> 871 </h2> 872 873 <p class="text-sm text-veyrix-muted mb-10">The interface is designed using a flexbox layout tailored for high-performance desktop workflows. Both environments utilize a persistent sidebar for file management, while the Web IDE adds a synchronized live preview engine.</p> 874 875 <div class="space-y-12"> 876 <div> 877 <h4 class="text-xs font-bold text-veyrix-accent uppercase tracking-widest mb-4 flex items-center gap-2"> 878 <span class="w-2 h-2 bg-veyrix-accent rounded-full"></span> 879 Veyrix IDE (Main) - Desktop Layout 880 </h4> 881 <div class="mockup-window h-64 flex flex-col w-full shadow-2xl border border-veyrix-border bg-veyrix-bg" aria-hidden="true"> 882 <div class="mockup-header border-b border-veyrix-border flex items-center px-3 py-1.5 gap-2 bg-veyrix-surface"> 883 <div class="flex gap-1.5"><div class="mockup-dot bg-red-400"></div><div class="mockup-dot bg-amber-400"></div><div class="mockup-dot bg-green-400"></div></div> 884 <div class="mx-auto text-[10px] text-veyrix-muted font-mono tracking-wider opacity-60 uppercase">veyrix.is-a.dev</div> 885 </div> 886 <div class="h-8 bg-veyrix-surface border-b border-veyrix-border flex items-center px-4 justify-between"> 887 <div class="flex gap-2 items-center"><div class="w-3 h-3 bg-white/20 rounded-sm"></div> <div class="w-16 h-2 bg-white/10 rounded-sm"></div></div> 888 <div class="w-24 h-4 bg-black/30 rounded-full border border-white/5"></div> 889 <div class="flex gap-1"><div class="w-3 h-3 bg-white/10 rounded-sm"></div><div class="w-3 h-3 bg-veyrix-accent rounded-sm"></div></div> 890 </div> 891 <div class="flex flex-1 overflow-hidden"> 892 <div class="w-1/4 bg-veyrix-surface border-r border-veyrix-border p-3 flex flex-col gap-2"> 893 <div class="h-2 w-16 bg-white/10 rounded mb-1"></div> 894 <div class="h-4 w-full bg-veyrix-accent/20 border border-veyrix-accent/30 rounded flex items-center px-2"><div class="w-2 h-2 rounded-full bg-veyrix-accent"></div></div> 895 <div class="h-4 w-full bg-black/20 rounded flex items-center px-2"><div class="w-2 h-2 rounded-full bg-white/10"></div></div> 896 <div class="h-4 w-full bg-black/20 rounded flex items-center px-2"><div class="w-2 h-2 rounded-full bg-white/10"></div></div> 897 </div> 898 <div class="flex-1 bg-veyrix-bg p-4 font-mono text-[10px] text-veyrix-text/80 space-y-1"> 899 <div class="text-veyrix-accent">const <span class="text-white">ide</span> = {</div> 900 <div class="pl-4">mode: <span class="text-emerald-400">'general-purpose'</span>,</div> 901 <div class="pl-4">engine: <span class="text-emerald-400">'ace'</span></div> 902 <div>};</div> 903 </div> 904 </div> 905 </div> 906 </div> 907 908 <div><br> 909 <h4 class="text-xs font-bold text-blue-400 uppercase tracking-widest mb-4 flex items-center gap-2"> 910 <span class="w-2 h-2 bg-veyrix-accent rounded-full"></span> 911 Veyrix Web - Desktop Layout (Preview Mode) 912 </h4> 913 <div class="mockup-window h-72 flex flex-col w-full shadow-2xl border border-veyrix-border bg-veyrix-bg" aria-hidden="true"> 914 <div class="mockup-header border-b border-veyrix-border flex items-center px-3 py-1.5 gap-2 bg-veyrix-surface"> 915 <div class="flex gap-1.5"><div class="mockup-dot bg-red-400"></div><div class="mockup-dot bg-amber-400"></div><div class="mockup-dot bg-green-400"></div></div> 916 <div class="mx-auto text-[10px] text-veyrix-muted font-mono tracking-wider opacity-60 uppercase">veyrix.is-a.dev/web</div> 917 </div> 918 <div class="flex flex-1 overflow-hidden"> 919 <div class="w-48 bg-veyrix-surface border-r border-veyrix-border p-3 flex flex-col gap-2"> 920 <div class="h-2 w-12 bg-white/10 rounded mb-1"></div> 921 <div class="h-4 w-full bg-black/10 rounded flex items-center px-2 gap-2"><span class="text-[8px]">📁</span> <div class="w-8 h-1 bg-white/20 rounded"></div></div> 922 <div class="h-4 w-full bg-blue-400/10 border border-blue-400/30 rounded flex items-center px-2 gap-2"><span class="text-[8px]">📄</span> <div class="w-10 h-1 bg-blue-400/50 rounded"></div></div> 923 <div class="h-4 w-full bg-black/10 rounded flex items-center px-2 gap-2"><span class="text-[8px]">📄</span> <div class="w-12 h-1 bg-white/20 rounded"></div></div> 924 </div> 925 <div class="flex-1 bg-veyrix-bg flex flex-col"> 926 <div class="h-8 border-b border-veyrix-border flex bg-veyrix-surface"> 927 <div class="h-full border-b-2 border-white border-r border-veyrix-border/50 px-3 flex items-center text-[10px] font-medium text-blue-400 bg-veyrix-bg/50">index.html</div> 928 <div class="h-full border-r border-veyrix-border/50 px-3 flex items-center opacity-40 text-[10px] font-medium text-white">script.js</div> 929 </div> 930 <div class="p-4 font-mono text-[9px] text-veyrix-text/80 space-y-1"> 931 <div class="text-blue-400"><h1><span class="text-white">Veyrix Web</span></h1></div> 932 <div class="text-blue-400"><style></div> 933 <div class="pl-4 text-purple-400">h1 { <span class="text-emerald-400">color: blue;</span> }</div> 934 <div class="text-blue-400"></style></div> 935 </div> 936 </div> 937 <div class="w-1 bg-blue-400/30 border-x border-veyrix-border"></div> 938 <div class="w-1/3 bg-white flex items-center justify-center relative"> 939 <h1 class="text-blue-600 font-bold text-lg">Veyrix Web</h1> 940 </div> 941 </div> 942 </div> 943 </div> 944 </div> 945 </section> 946 947 <div id="legal" class="pt-8 mt-12 border-t border-veyrix-border/50" role="complementary"> 948 949 <div class="bg-red-900/10 border border-red-500/20 p-4 rounded-lg"> 950 <strong class="text-red-400 block mb-1 text-sm">Legal Disclaimer & Licensing</strong> 951 <p class="text-xs text-veyrix-muted leading-relaxed"> 952 Veyrix IDE and this documentation are provided "as is" under the <strong>Apache License 2.0</strong>, without warranty of any kind, express or implied. 953 The creator reserves the right to modify or permanently discontinue this project at any time without prior notice. 954 The creator is not responsible for data loss, service interruptions, or damages arising from the use of this software. 955 Local data management is the sole responsibility of the user. Use at your own risk. 956 </p> 957 </div> 958 </div> 959 </div> 960 </main> 961 </div> 962 963 <!-- Global Footer --> 964 <footer class="relative z-20 glass-footer mt-auto py-10 px-6 md:px-12 text-sm overflow-hidden" role="contentinfo"> 965 <div class="absolute inset-0 bg-gradient-to-t from-veyrix-bg to-transparent pointer-events-none"></div> 966 <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8 relative z-10"> 967 968 <div class="flex flex-col items-center md:items-start gap-4 md:gap-2"> 969 <div class="flex flex-col items-center md:flex-row md:items-center gap-2"> 970 <img src="assets/veyrix.svg" alt="Veyrix Logo" class="w-10 h-10 md:w-6 md:h-6 grayscale opacity-70"> 971 <div class="flex flex-col items-center md:items-start"> 972 <span class="font-bold text-white tracking-wide text-xl opacity-90">Veyrix</span> 973 </div> 974 </div> 975 <p class="text-xs text-veyrix-muted font-mono tracking-widest uppercase">Code. Anywhere. Anytime.</p> 976 </div> 977 978 <div class="flex flex-col md:flex-row items-center gap-4 md:gap-8 text-veyrix-muted font-medium text-xs"> 979 <a href="/" class="hover:text-veyrix-accent transition-colors duration-200">Return to Workspace</a> 980 <a href="https://github.com/notamitgamer/veyrix" target="_blank" rel="noopener noreferrer" class="hover:text-veyrix-accent transition-colors duration-200 flex items-center gap-1.5"> 981 Source Repository <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg> 982 </a> 983 <a href="https://github.com/notamitgamer" target="_blank" rel="noopener noreferrer" class="hover:text-veyrix-accent transition-colors duration-200 flex items-center gap-1.5"> 984 Maintainer <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg> 985 </a> 986 </div> 987 988 <!-- Copyright Notice --> 989 <div class="text-xs text-veyrix-muted/80 text-center md:text-right"> 990 <span class="block mb-1 font-mono text-[10px] opacity-70 italic">Last Updated: March 2026</span> 991 <a href="https://amit.is-a.dev" target="_blank" rel="noopener noreferrer" class="hover:text-veyrix-accent hover:underline transition-colors text-veyrix-muted">Amit Dutta</a> © 2026 992 </div> 993 </div> 994 </footer> 995 996 <script> 997 function toggleDocsMenu() { 998 const sidebar = document.getElementById('docs-sidebar'); 999 const hamburger = document.getElementById('hamburger-btn'); 1000 const isExpanded = hamburger.getAttribute('aria-expanded') === 'true'; 1001 1002 sidebar.classList.toggle('hidden'); 1003 hamburger.classList.toggle('is-active'); 1004 hamburger.setAttribute('aria-expanded', !isExpanded); 1005 } 1006 1007 document.addEventListener('DOMContentLoaded', () => { 1008 const sidebar = document.getElementById('docs-sidebar'); 1009 const hamburger = document.getElementById('hamburger-btn'); 1010 const links = sidebar.querySelectorAll('a.nav-link'); 1011 1012 links.forEach(link => { 1013 link.addEventListener('click', () => { 1014 // Force highlight immediately on click 1015 links.forEach(l => l.classList.remove('active')); 1016 link.classList.add('active'); 1017 1018 if (window.innerWidth < 768) { 1019 sidebar.classList.add('hidden'); 1020 hamburger.classList.remove('is-active'); 1021 hamburger.setAttribute('aria-expanded', 'false'); 1022 } 1023 }); 1024 }); 1025 1026 1027 const observerOptions = { 1028 root: null, 1029 rootMargin: '-20% 0px -60% 0px', 1030 threshold: 0 1031 }; 1032 1033 const observer = new IntersectionObserver((entries) => { 1034 entries.forEach(entry => { 1035 if (entry.isIntersecting) { 1036 links.forEach(link => { 1037 link.classList.remove('active'); 1038 if (link.getAttribute('href').substring(1) === entry.target.id) { 1039 link.classList.add('active'); 1040 } 1041 }); 1042 } 1043 }); 1044 }, observerOptions); 1045 1046 document.querySelectorAll('section.doc-section').forEach(section => observer.observe(section)); 1047 }); 1048 </script> 1049 </body> 1050 </html>