npm - nova64 - Versions diffs - 0.2.5 → 0.2.6 - Mend

nova64 0.2.5 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (140) hide show

package/README.md +25 -8
package/bin/nova64.js +165 -0
package/dist/assets/console-CY_kygm3.js +14 -0
package/dist/assets/console-CY_kygm3.js.map +1 -0
package/dist/assets/main-l0sNRNKZ.js.map +1 -0
package/dist/assets/sky/studio/nx.png +0 -0
package/dist/assets/sky/studio/ny.png +0 -0
package/dist/assets/sky/studio/nz.png +0 -0
package/dist/assets/sky/studio/px.png +0 -0
package/dist/assets/sky/studio/py.png +0 -0
package/dist/assets/sky/studio/pz.png +0 -0
package/dist/assets/vanilla-Dcuy32gi.js +2 -0
package/dist/assets/vanilla-Dcuy32gi.js.map +1 -0
package/dist/console.html +899 -0
package/dist/docs/BENCHMARK.md +77 -0
package/dist/docs/CHEATSHEET.md +255 -0
package/dist/docs/EFFECTS_API_GUIDE.md +577 -0
package/dist/docs/EFFECTS_QUICK_REFERENCE.md +331 -0
package/dist/docs/FONT_CHARACTER_REFERENCE.md +219 -0
package/dist/docs/FREE_GLB_ASSETS.md +330 -0
package/dist/docs/FULLSCREEN_BUTTON_FEATURE.md +296 -0
package/dist/docs/GAMEPAD_SUPPORT.md +348 -0
package/dist/docs/GAME_IMPROVEMENTS.md +278 -0
package/dist/docs/GAME_QUALITY_STATUS.md +300 -0
package/dist/docs/MIGRATION_GUIDE.md +553 -0
package/dist/docs/NOVA64_3D_API.md +356 -0
package/dist/docs/NOVA64_API_REFERENCE.md +1406 -0
package/dist/docs/NOVA64_UI_API.md +503 -0
package/dist/docs/UI_SYSTEM_SUMMARY.md +445 -0
package/dist/docs/VOXEL_ENGINE_GUIDE.md +662 -0
package/dist/docs/VOXEL_QUICK_REFERENCE.md +386 -0
package/dist/docs/api-3d.html +750 -0
package/dist/docs/api-effects.html +385 -0
package/dist/docs/api-improvements.md +121 -0
package/dist/docs/api-skybox.html +407 -0
package/dist/docs/api-sprites.html +321 -0
package/dist/docs/api-voxel.html +337 -0
package/dist/docs/api.html +543 -0
package/dist/docs/assets.html +306 -0
package/dist/docs/audio.html +340 -0
package/dist/docs/blogs.html +286 -0
package/dist/docs/collision.html +316 -0
package/dist/docs/console.html +247 -0
package/dist/docs/editor.html +297 -0
package/dist/docs/font.html +247 -0
package/dist/docs/framebuffer.html +247 -0
package/dist/docs/fullscreen-button.html +297 -0
package/dist/docs/gpu-systems.html +247 -0
package/dist/docs/index.html +580 -0
package/dist/docs/input.html +491 -0
package/dist/docs/physics.html +311 -0
package/dist/docs/screens.html +311 -0
package/dist/docs/storage.html +311 -0
package/dist/docs/textinput.html +332 -0
package/dist/docs/ui.html +488 -0
package/dist/examples/3d-advanced/code.js +695 -0
package/dist/examples/adventure-comic-3d/code.js +342 -0
package/dist/examples/audio-lab/code.js +150 -0
package/dist/examples/boids-flocking/code.js +270 -0
package/dist/examples/crystal-cathedral-3d/code.js +706 -0
package/dist/examples/cyberpunk-city-3d/code.js +1383 -0
package/dist/examples/demoscene/README.md +192 -0
package/dist/examples/demoscene/code.js +1081 -0
package/dist/examples/demoscene/meta.json +21 -0
package/dist/examples/dungeon-crawler-3d/code.js +1117 -0
package/dist/examples/f-zero-nova-3d/code.js +865 -0
package/dist/examples/f-zero-nova-3d/code_old.js +1555 -0
package/dist/examples/fps-demo-3d/code.js +744 -0
package/dist/examples/game-of-life-3d/code.js +338 -0
package/dist/examples/generative-art/code.js +632 -0
package/dist/examples/hello-3d/code.js +325 -0
package/dist/examples/hello-skybox/code.js +183 -0
package/dist/examples/hello-world/code.js +19 -0
package/dist/examples/input-showcase/code.js +109 -0
package/dist/examples/instancing-demo/code.js +315 -0
package/dist/examples/minecraft-demo/code.js +387 -0
package/dist/examples/model-viewer-3d/code.js +114 -0
package/dist/examples/mystical-realm-3d/code.js +1203 -0
package/dist/examples/nature-explorer-3d/code.js +1318 -0
package/dist/examples/particles-demo/code.js +522 -0
package/dist/examples/pbr-showcase/code.js +140 -0
package/dist/examples/physics-demo-3d/code.js +948 -0
package/dist/examples/screen-demo/code.js +267 -0
package/dist/examples/shooter-demo-3d/code.js +1286 -0
package/dist/examples/space-combat-3d/IMPLEMENTATION_SUMMARY.md +109 -0
package/dist/examples/space-combat-3d/README.md +135 -0
package/dist/examples/space-combat-3d/code.js +1332 -0
package/dist/examples/space-harrier-3d/code.js +923 -0
package/dist/examples/star-fox-nova-3d/code.js +1116 -0
package/dist/examples/star-fox-nova-3d/code_backup.js +410 -0
package/dist/examples/star-fox-nova-3d/code_broken.js +1821 -0
package/dist/examples/storage-quest/code.js +209 -0
package/dist/examples/strider-demo-3d/IMPROVEMENT_OPTIONS.md +285 -0
package/dist/examples/strider-demo-3d/cache-test.html +132 -0
package/dist/examples/strider-demo-3d/code-fixed.js +582 -0
package/dist/examples/strider-demo-3d/code-old.js +1537 -0
package/dist/examples/strider-demo-3d/code.js +1462 -0
package/dist/examples/strider-demo-3d/code.js.bak2 +1169 -0
package/dist/examples/strider-demo-3d/fix-game.sh +53 -0
package/dist/examples/super-plumber-64/README.md +128 -0
package/dist/examples/super-plumber-64/code.js +1185 -0
package/dist/examples/super-plumber-64/index.html +88 -0
package/dist/examples/test-2d-overlay/code.js +32 -0
package/dist/examples/test-font/code.js +51 -0
package/dist/examples/test-minimal/code.js +21 -0
package/dist/examples/ui-demo/code.js +306 -0
package/dist/examples/wing-commander-space/README.md +180 -0
package/dist/examples/wing-commander-space/code.js +1285 -0
package/dist/examples/wizardry-3d/CHANGELOG.md +366 -0
package/dist/examples/wizardry-3d/code.js +3928 -0
package/dist/index.html +666 -0
package/dist/os9-shell/assets/index-DIHfrTaW.css +1 -0
package/dist/os9-shell/assets/index-KchE_ngx.js +483 -0
package/dist/os9-shell/assets/index-KchE_ngx.js.map +1 -0
package/dist/os9-shell/index.html +23 -0
package/dist/os9-shell/nova-icon.svg +12 -0
package/index.html +6 -1
package/package.json +37 -32
package/public/assets/sky/studio/nx.png +0 -0
package/public/assets/sky/studio/ny.png +0 -0
package/public/assets/sky/studio/nz.png +0 -0
package/public/assets/sky/studio/px.png +0 -0
package/public/assets/sky/studio/py.png +0 -0
package/public/assets/sky/studio/pz.png +0 -0
package/public/os9-shell/assets/index-KchE_ngx.js +483 -0
package/public/os9-shell/assets/index-KchE_ngx.js.map +1 -0
package/public/os9-shell/index.html +10 -1
package/runtime/api-2d.js +301 -21
package/runtime/api-3d/pbr.js +45 -1
package/runtime/api-3d.js +1 -0
package/runtime/api-effects.js +90 -3
package/runtime/api-gameutils.js +476 -0
package/runtime/api-generative.js +610 -0
package/runtime/api-skybox.js +54 -0
package/runtime/api-voxel.js +139 -28
package/runtime/gpu-threejs.js +13 -9
package/runtime/ui.js +2 -2
package/src/main.js +20 -0
package/public/os9-shell/assets/index-B1Uvacma.js +0 -32825
package/public/os9-shell/assets/index-B1Uvacma.js.map +0 -1

package/dist/docs/ui.html ADDED Viewed

@@ -0,0 +1,488 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UI System - Nova64 Documentation</title>
+    <style>
+        :root {
+            --bg-primary: #0f1115; --bg-secondary: #151822; --bg-tertiary: #1a1d2e;
+            --text-primary: #dcdfe4; --text-secondary: #99a1b3;
+            --accent-cyan: #00ffff; --accent-magenta: #ff0080; --accent-yellow: #ffff00;
+            --border: #2a324a; --code-bg: #1a1d2e;
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, var(--bg-primary) 0%, #1a1625 50%, var(--bg-primary) 100%);
+            background-attachment: fixed; color: var(--text-primary); line-height: 1.6;
+        }
+        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
+        header {
+            background: var(--bg-secondary); border: 2px solid var(--accent-cyan);
+            border-radius: 12px; padding: 30px; margin-bottom: 30px;
+            box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
+        }
+        h1 {
+            color: var(--accent-cyan); font-size: 2.5em;
+            text-shadow: 0 0 20px rgba(0, 255, 255, 0.6); margin-bottom: 10px;
+        }
+        .back-link {
+            display: inline-block; color: var(--accent-cyan); text-decoration: none;
+            margin-bottom: 15px; transition: color 0.3s ease;
+        }
+        .back-link:hover { color: #33ffff; text-decoration: underline; }
+        .subtitle { color: var(--text-secondary); font-size: 1.1em; }
+        section {
+            background: var(--bg-secondary); border-left: 4px solid var(--accent-cyan);
+            padding: 25px; margin-bottom: 30px; border-radius: 8px;
+        }
+        h2 {
+            color: var(--accent-magenta); font-size: 2em; margin-bottom: 15px;
+            text-shadow: 0 0 10px rgba(255, 0, 128, 0.5);
+        }
+        h3 { color: var(--accent-cyan); font-size: 1.4em; margin: 25px 0 15px 0; }
+        .function {
+            background: var(--bg-tertiary); border: 1px solid var(--border);
+            border-radius: 8px; padding: 20px; margin-bottom: 25px;
+        }
+        .function-sig {
+            font-family: 'Courier New', Courier, monospace; font-size: 1.2em;
+            color: var(--accent-yellow); margin-bottom: 15px; padding: 10px;
+            background: var(--code-bg); border-radius: 4px; border-left: 3px solid var(--accent-yellow);
+        }
+        .param-list, .return-info { margin: 15px 0; }
+        .param { padding: 8px 0; border-bottom: 1px solid var(--border); }
+        .param:last-child { border-bottom: none; }
+        .param-name {
+            color: var(--accent-cyan); font-weight: bold;
+            font-family: 'Courier New', Courier, monospace;
+        }
+        .param-type { color: var(--accent-magenta); font-style: italic; font-size: 0.9em; }
+        .example {
+            background: var(--code-bg); border: 1px solid var(--border);
+            border-radius: 8px; padding: 20px; margin: 15px 0; overflow-x: auto;
+        }
+        .example-title { color: var(--accent-yellow); font-weight: bold; margin-bottom: 10px; }
+        pre { margin: 0; font-family: 'Courier New', Courier, monospace; line-height: 1.5; }
+        code { color: var(--text-primary); }
+        .keyword { color: #ff79c6; }
+        .function-name { color: #50fa7b; }
+        .number { color: #f1fa8c; }
+        .string { color: #f1fa8c; }
+        .comment { color: #6272a4; font-style: italic; }
+        .note {
+            background: var(--bg-tertiary); border-left: 4px solid var(--accent-yellow);
+            padding: 15px; margin: 15px 0; border-radius: 4px;
+        }
+        .note-title { color: var(--accent-yellow); font-weight: bold; margin-bottom: 10px; }
+        table { width: 100%; border-collapse: collapse; margin: 15px 0; }
+        th, td { padding: 12px; text-align: left; border: 1px solid var(--border); }
+        th { background: var(--bg-tertiary); color: var(--accent-cyan); font-weight: bold; }
+        tr:nth-child(even) { background: var(--bg-tertiary); }
+        footer {
+            text-align: center; padding: 30px 20px; color: var(--text-secondary);
+            border-top: 1px solid var(--border); margin-top: 40px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <a href="index.html" class="back-link">← Back to Documentation Index</a>
+        <header>
+            <h1>🖼️ UI System</h1>
+            <p class="subtitle">Professional UI components: buttons, panels, text rendering, and layout helpers</p>
+        </header>
+        <section>
+            <h2>📋 Overview</h2>
+            <p>The UI System provides high-level components for building game interfaces. It includes interactive buttons with callbacks, decorative panels, advanced text rendering with shadows/outlines, progress bars, and layout utilities.</p>
+            <div class="note">
+                <div class="note-title">💡 Key Features</div>
+                <ul>
+                    <li><strong>Button System</strong> - Interactive buttons with hover/press states and callbacks</li>
+                    <li><strong>Panel System</strong> - Decorative windows with borders, gradients, and titles</li>
+                    <li><strong>Text Rendering</strong> - Shadows, outlines, alignment, and font sizes</li>
+                    <li><strong>Progress Bars</strong> - Health bars, loading indicators, etc.</li>
+                    <li><strong>Layout Helpers</strong> - Centering, grid systems, responsive design</li>
+                </ul>
+            </div>
+        </section>
+        <section>
+            <h2>🔘 Button System</h2>
+            <div class="function">
+                <div class="function-sig">createButton(x, y, width, height, text, callback, options = {})</div>
+                <p>Creates an interactive button with hover effects and click callback.</p>
+                <div class="param-list">
+                    <div class="param">
+                        <span class="param-name">x, y</span> <span class="param-type">number</span> - Button position
+                    </div>
+                    <div class="param">
+                        <span class="param-name">width, height</span> <span class="param-type">number</span> - Button size
+                    </div>
+                    <div class="param">
+                        <span class="param-name">text</span> <span class="param-type">string</span> - Button label
+                    </div>
+                    <div class="param">
+                        <span class="param-name">callback</span> <span class="param-type">function</span> - Called when button clicked
+                    </div>
+                    <div class="param">
+                        <span class="param-name">options</span> <span class="param-type">object</span> - Optional: normalColor, hoverColor, textColor, enabled, visible, etc.
+                    </div>
+                </div>
+                <div class="return-info">
+                    <strong>Returns:</strong> <span class="param-type">object</span> - Button object (store to modify later)
+                </div>
+                <div class="example">
+                    <div class="example-title">Example: Menu buttons</div>
+                    <pre><code><span class="keyword">const</span> startBtn = <span class="function-name">createButton</span>(<span class="number">220</span>, <span class="number">150</span>, <span class="number">200</span>, <span class="number">40</span>, <span class="string">"START GAME"</span>, () => {
+  gameState = <span class="string">'playing'</span>;
+});
+<span class="keyword">const</span> quitBtn = <span class="function-name">createButton</span>(<span class="number">220</span>, <span class="number">200</span>, <span class="number">200</span>, <span class="number">40</span>, <span class="string">"QUIT"</span>, () => {
+  <span class="comment">// Quit game</span>
+}, {
+  normalColor: <span class="function-name">rgba8</span>(<span class="number">200</span>, <span class="number">50</span>, <span class="number">50</span>),
+  hoverColor: <span class="function-name">rgba8</span>(<span class="number">255</span>, <span class="number">80</span>, <span class="number">80</span>)
+});</code></pre>
+                </div>
+            </div>
+            <div class="function">
+                <div class="function-sig">updateAllButtons()</div>
+                <p>Updates all button states (hover, click detection). Call in update() function.</p>
+                <div class="return-info">
+                    <strong>Returns:</strong> <span class="param-type">boolean</span> - true if any button was clicked
+                </div>
+                <div class="example">
+                    <div class="example-title">Example: Update loop</div>
+                    <pre><code><span class="keyword">function</span> <span class="function-name">update</span>() {
+  <span class="function-name">updateAllButtons</span>(); <span class="comment">// Check button interactions</span>
+}</code></pre>
+                </div>
+            </div>
+            <div class="function">
+                <div class="function-sig">drawAllButtons()</div>
+                <p>Renders all created buttons. Call in draw() function.</p>
+                <div class="example">
+                    <div class="example-title">Example: Draw loop</div>
+                    <pre><code><span class="keyword">function</span> <span class="function-name">draw</span>() {
+  <span class="function-name">cls</span>(<span class="function-name">rgba8</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">20</span>));
+  <span class="function-name">drawAllButtons</span>(); <span class="comment">// Render buttons</span>
+}</code></pre>
+                </div>
+            </div>
+            <div class="function">
+                <div class="function-sig">clearButtons()</div>
+                <p>Removes all buttons (useful for screen transitions).</p>
+            </div>
+            <div class="function">
+                <div class="function-sig">removeButton(button)</div>
+                <p>Removes a specific button.</p>
+            </div>
+        </section>
+        <section>
+            <h2>📦 Panel System</h2>
+            <div class="function">
+                <div class="function-sig">createPanel(x, y, width, height, options = {})</div>
+                <p>Creates a decorative panel/window with borders, gradients, and optional title bar.</p>
+                <div class="param-list">
+                    <div class="param">
+                        <span class="param-name">x, y, width, height</span> <span class="param-type">number</span> - Panel position and size
+                    </div>
+                    <div class="param">
+                        <span class="param-name">options</span> <span class="param-type">object</span> - bgColor, borderColor, borderWidth, title, shadow, gradient, etc.
+                    </div>
+                </div>
+                <div class="return-info">
+                    <strong>Returns:</strong> <span class="param-type">object</span> - Panel object
+                </div>
+                <div class="example">
+                    <div class="example-title">Example: Info panel</div>
+                    <pre><code><span class="keyword">const</span> infoPanel = <span class="function-name">createPanel</span>(<span class="number">50</span>, <span class="number">50</span>, <span class="number">300</span>, <span class="number">200</span>, {
+  title: <span class="string">"Game Info"</span>,
+  bgColor: <span class="function-name">rgba8</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">50</span>, <span class="number">200</span>),
+  borderColor: uiColors.primary,
+  borderWidth: <span class="number">3</span>,
+  shadow: <span class="keyword">true</span>,
+  gradient: <span class="keyword">true</span>
+});</code></pre>
+                </div>
+            </div>
+            <div class="function">
+                <div class="function-sig">drawAllPanels()</div>
+                <p>Renders all panels. Call before drawing panel contents.</p>
+            </div>
+            <div class="function">
+                <div class="function-sig">clearPanels()</div>
+                <p>Removes all panels.</p>
+            </div>
+        </section>
+        <section>
+            <h2>✍️ Text Rendering</h2>
+            <div class="function">
+                <div class="function-sig">drawText(text, x, y, color = uiColors.white, scale = 1)</div>
+                <p>Draws text with current alignment and font settings.</p>
+                <div class="param-list">
+                    <div class="param">
+                        <span class="param-name">text</span> <span class="param-type">string</span> - Text to display
+                    </div>
+                    <div class="param">
+                        <span class="param-name">x, y</span> <span class="param-type">number</span> - Position (affected by alignment)
+                    </div>
+                    <div class="param">
+                        <span class="param-name">color</span> <span class="param-type">BigInt</span> - Text color
+                    </div>
+                    <div class="param">
+                        <span class="param-name">scale</span> <span class="param-type">number</span> - Size multiplier
+                    </div>
+                </div>
+                <div class="example">
+                    <div class="example-title">Example: Centered title</div>
+                    <pre><code><span class="function-name">setTextAlign</span>(<span class="string">'center'</span>);
+<span class="function-name">setTextBaseline</span>(<span class="string">'middle'</span>);
+<span class="function-name">drawText</span>(<span class="string">"MY GAME"</span>, <span class="number">320</span>, <span class="number">50</span>, uiColors.primary, <span class="number">3</span>);</code></pre>
+                </div>
+            </div>
+            <div class="function">
+                <div class="function-sig">drawTextShadow(text, x, y, color, shadowColor, offset = 2, scale = 1)</div>
+                <p>Draws text with drop shadow effect.</p>
+                <div class="example">
+                    <div class="example-title">Example: Title with shadow</div>
+                    <pre><code><span class="function-name">drawTextShadow</span>(<span class="string">"LEVEL 1"</span>, <span class="number">320</span>, <span class="number">100</span>,
+  uiColors.white, uiColors.black, <span class="number">3</span>, <span class="number">2</span>);</code></pre>
+                </div>
+            </div>
+            <div class="function">
+                <div class="function-sig">drawTextOutline(text, x, y, color, outlineColor, scale = 1)</div>
+                <p>Draws text with outline (8-direction) for visibility on any background.</p>
+                <div class="example">
+                    <div class="example-title">Example: Outlined score</div>
+                    <pre><code><span class="function-name">drawTextOutline</span>(<span class="string">"SCORE: "</span> + score, <span class="number">10</span>, <span class="number">10</span>,
+  uiColors.white, uiColors.black, <span class="number">1</span>);</code></pre>
+                </div>
+            </div>
+            <div class="function">
+                <div class="function-sig">setTextAlign(align)</div>
+                <p>Sets text horizontal alignment: "left", "center", or "right".</p>
+            </div>
+            <div class="function">
+                <div class="function-sig">setTextBaseline(baseline)</div>
+                <p>Sets text vertical alignment: "top", "middle", or "bottom".</p>
+            </div>
+            <div class="function">
+                <div class="function-sig">setFont(fontName)</div>
+                <p>Sets current font: "tiny", "small", "normal", "large", or "huge".</p>
+            </div>
+            <div class="function">
+                <div class="function-sig">measureText(text, scale = 1)</div>
+                <p>Calculates text dimensions.</p>
+                <div class="return-info">
+                    <strong>Returns:</strong> <span class="param-type">object</span> - {width, height}
+                </div>
+            </div>
+        </section>
+        <section>
+            <h2>📊 Progress Bars</h2>
+            <div class="function">
+                <div class="function-sig">drawProgressBar(x, y, width, height, value, maxValue, options = {})</div>
+                <p>Draws a progress bar (health, loading, etc.).</p>
+                <div class="param-list">
+                    <div class="param">
+                        <span class="param-name">value</span> <span class="param-type">number</span> - Current value
+                    </div>
+                    <div class="param">
+                        <span class="param-name">maxValue</span> <span class="param-type">number</span> - Maximum value
+                    </div>
+                    <div class="param">
+                        <span class="param-name">options</span> <span class="param-type">object</span> - fillColor, bgColor, borderColor, showText
+                    </div>
+                </div>
+                <div class="example">
+                    <div class="example-title">Example: Health bar</div>
+                    <pre><code><span class="function-name">drawProgressBar</span>(<span class="number">10</span>, <span class="number">10</span>, <span class="number">200</span>, <span class="number">20</span>, player.hp, player.maxHp, {
+  fillColor: uiColors.success,
+  bgColor: <span class="function-name">rgba8</span>(<span class="number">50</span>, <span class="number">0</span>, <span class="number">0</span>),
+  showText: <span class="keyword">true</span>
+});</code></pre>
+                </div>
+            </div>
+        </section>
+        <section>
+            <h2>📐 Layout Helpers</h2>
+            <div class="function">
+                <div class="function-sig">centerX(width, screenWidth = 640)</div>
+                <p>Calculates X coordinate to center an element horizontally.</p>
+                <div class="return-info">
+                    <strong>Returns:</strong> <span class="param-type">number</span> - Centered X position
+                </div>
+                <div class="example">
+                    <div class="example-title">Example: Center button</div>
+                    <pre><code><span class="keyword">const</span> btnX = <span class="function-name">centerX</span>(<span class="number">200</span>); <span class="comment">// Center 200px wide button</span>
+<span class="function-name">createButton</span>(btnX, <span class="number">150</span>, <span class="number">200</span>, <span class="number">40</span>, <span class="string">"START"</span>, startGame);</code></pre>
+                </div>
+            </div>
+            <div class="function">
+                <div class="function-sig">centerY(height, screenHeight = 360)</div>
+                <p>Calculates Y coordinate to center an element vertically.</p>
+            </div>
+            <div class="function">
+                <div class="function-sig">grid(cols, rows, cellWidth, cellHeight, paddingX = 0, paddingY = 0)</div>
+                <p>Creates a grid layout array for positioning elements.</p>
+                <div class="return-info">
+                    <strong>Returns:</strong> <span class="param-type">array</span> - Array of {x, y, width, height, col, row} objects
+                </div>
+                <div class="example">
+                    <div class="example-title">Example: Button grid</div>
+                    <pre><code><span class="keyword">const</span> cells = <span class="function-name">grid</span>(<span class="number">3</span>, <span class="number">2</span>, <span class="number">100</span>, <span class="number">50</span>, <span class="number">10</span>, <span class="number">10</span>);
+cells.<span class="function-name">forEach</span>((cell, i) => {
+  <span class="function-name">createButton</span>(cell.x + <span class="number">50</span>, cell.y + <span class="number">100</span>,
+    cell.width, cell.height, <span class="string">`BTN </span><span class="keyword">${</span>i<span class="keyword">}</span><span class="string">`</span>, () => {});
+});</code></pre>
+                </div>
+            </div>
+        </section>
+        <section>
+            <h2>🎨 Color Palette</h2>
+            <p>The UI system provides a built-in color palette accessible via <code>uiColors</code>:</p>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Color Name</th>
+                        <th>Value (RGB)</th>
+                        <th>Usage</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr><td>uiColors.primary</td><td>rgba8(0, 120, 255)</td><td>Primary buttons, borders</td></tr>
+                    <tr><td>uiColors.secondary</td><td>rgba8(100, 100, 255)</td><td>Secondary elements</td></tr>
+                    <tr><td>uiColors.success</td><td>rgba8(0, 255, 100)</td><td>Health bars, positive</td></tr>
+                    <tr><td>uiColors.warning</td><td>rgba8(255, 200, 0)</td><td>Warnings, caution</td></tr>
+                    <tr><td>uiColors.danger</td><td>rgba8(255, 50, 50)</td><td>Errors, critical</td></tr>
+                    <tr><td>uiColors.white</td><td>rgba8(255, 255, 255)</td><td>Text, highlights</td></tr>
+                    <tr><td>uiColors.black</td><td>rgba8(0, 0, 0)</td><td>Shadows, backgrounds</td></tr>
+                </tbody>
+            </table>
+        </section>
+        <section>
+            <h2>💡 Complete Example</h2>
+            <div class="example">
+                <div class="example-title">Full UI System Example</div>
+                <pre><code><span class="keyword">let</span> gameState = <span class="string">'menu'</span>;
+<span class="keyword">let</span> menuButtons = [];
+<span class="keyword">function</span> <span class="function-name">init</span>() {
+  <span class="comment">// Create menu panel</span>
+  <span class="function-name">createPanel</span>(<span class="number">170</span>, <span class="number">80</span>, <span class="number">300</span>, <span class="number">200</span>, {
+    title: <span class="string">"MAIN MENU"</span>,
+    bgColor: <span class="function-name">rgba8</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">50</span>, <span class="number">220</span>),
+    borderColor: uiColors.primary,
+    shadow: <span class="keyword">true</span>,
+    gradient: <span class="keyword">true</span>
+  });
+  <span class="comment">// Create buttons</span>
+  <span class="keyword">const</span> btnX = <span class="function-name">centerX</span>(<span class="number">200</span>);
+  <span class="function-name">createButton</span>(btnX, <span class="number">120</span>, <span class="number">200</span>, <span class="number">40</span>, <span class="string">"START GAME"</span>, () => {
+    gameState = <span class="string">'playing'</span>;
+    <span class="function-name">clearButtons</span>();
+    <span class="function-name">clearPanels</span>();
+  });
+  <span class="function-name">createButton</span>(btnX, <span class="number">170</span>, <span class="number">200</span>, <span class="number">40</span>, <span class="string">"OPTIONS"</span>, () => {
+    gameState = <span class="string">'options'</span>;
+  });
+  <span class="function-name">createButton</span>(btnX, <span class="number">220</span>, <span class="number">200</span>, <span class="number">40</span>, <span class="string">"QUIT"</span>, () => {
+    <span class="comment">// Quit</span>
+  }, { normalColor: uiColors.danger });
+}
+<span class="keyword">function</span> <span class="function-name">update</span>() {
+  <span class="keyword">if</span> (gameState === <span class="string">'menu'</span>) {
+    <span class="function-name">updateAllButtons</span>();
+  }
+}
+<span class="keyword">function</span> <span class="function-name">draw</span>() {
+  <span class="function-name">cls</span>(<span class="function-name">rgba8</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">20</span>));
+  <span class="keyword">if</span> (gameState === <span class="string">'menu'</span>) {
+    <span class="comment">// Draw title</span>
+    <span class="function-name">setTextAlign</span>(<span class="string">'center'</span>);
+    <span class="function-name">setFont</span>(<span class="string">'large'</span>);
+    <span class="function-name">drawTextShadow</span>(<span class="string">"MY AWESOME GAME"</span>, <span class="number">320</span>, <span class="number">40</span>,
+      uiColors.primary, uiColors.black, <span class="number">3</span>, <span class="number">2</span>);
+    <span class="comment">// Draw UI</span>
+    <span class="function-name">drawAllPanels</span>();
+    <span class="function-name">drawAllButtons</span>();
+  }
+}</code></pre>
+            </div>
+        </section>
+        <section>
+            <h2>📚 Related APIs</h2>
+            <ul>
+                <li><a href="input.html" style="color: var(--accent-cyan);">Input System</a> - Mouse events for UI interaction</li>
+                <li><a href="api.html" style="color: var(--accent-cyan);">2D Drawing API</a> - Low-level drawing functions</li>
+                <li><a href="font.html" style="color: var(--accent-cyan);">Font System</a> - Bitmap font rendering</li>
+            </ul>
+        </section>
+        <footer>
+            <p>Nova64 Fantasy Console © 2025 | <a href="index.html" style="color: var(--accent-cyan);">Back to Documentation</a></p>
+        </footer>
+    </div>
+</body>
+</html>