From f0d445ea1a8b1feb269d5168f21d8603c1cc7344 Mon Sep 17 00:00:00 2001
From: will wade <willwade@gmail.com>
Date: Tue, 16 Jun 2026 20:14:12 +0100
Subject: [PATCH 1/2] Full-height responsive layout for mobile and desktop

- Dark theme, full viewport height (100dvh for mobile browsers)
- Canvas fills all available space via flexbox
- Output panel on right (desktop) / below (mobile)
- Controls bar at bottom, horizontally scrollable on very small screens
- Larger touch targets, accent-colored checkboxes/buttons
- Handles orientation changes
---
 wasm-build/demo.html | 136 ++++++++++++++++++++++++++-----------------
 1 file changed, 84 insertions(+), 52 deletions(-)
diff --git a/wasm-build/demo.html b/wasm-build/demo.html
index 9686f69..716b638 100644
--- a/wasm-build/demo.html
+++ b/wasm-build/demo.html
@@ -2,83 +2,115 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DasherCore WebAssembly Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Dasher</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-            background-color: #f5f5f5;
+        * { box-sizing: border-box; }
+        html, body {
+            margin: 0; padding: 0; height: 100%;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #1a1a2e; color: #eee;
+            overflow: hidden;
         }
-        .container { display: flex; gap: 20px; margin-bottom: 20px; }
-        .canvas-container {
-            flex: 1; background: white; border-radius: 8px; padding: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        #app {
+            display: flex; flex-direction: column; height: 100vh; height: 100dvh;
+        }
+        .main-area {
+            flex: 1; display: flex; gap: 8px; padding: 8px;
+            min-height: 0;
+        }
+        .canvas-wrap {
+            flex: 1; display: flex; flex-direction: column;
+            background: #000; border-radius: 12px; overflow: hidden;
+            position: relative;
         }
         canvas {
-            border: 2px solid #ddd; border-radius: 4px; display: block;
-            margin: 0 auto; cursor: crosshair; touch-action: none;
-            width: 100%; height: auto; aspect-ratio: 4 / 3;
+            flex: 1; display: block; cursor: crosshair; touch-action: none;
+            width: 100%;
+        }
+        .canvas-stats {
+            position: absolute; bottom: 8px; right: 12px;
+            font-size: 11px; color: rgba(255,255,255,0.4);
+            pointer-events: none;
+        }
+        .output-wrap {
+            width: 280px; min-width: 200px; display: flex; flex-direction: column;
+            background: #16213e; border-radius: 12px; padding: 12px;
         }
-        .output-container {
-            width: 280px; background: white; border-radius: 8px; padding: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            display: flex; flex-direction: column;
+        .output-wrap h2 {
+            margin: 0 0 8px 0; font-size: 13px; font-weight: 600;
+            text-transform: uppercase; letter-spacing: 1px; color: #8a8a9a;
         }
-        .output-container h2 { margin-top: 0; color: #333; font-size: 18px; }
         #output-text {
-            flex: 1; width: 100%; min-height: 100px; padding: 10px;
-            border: 1px solid #ddd; border-radius: 4px; font-size: 16px; resize: none;
+            flex: 1; width: 100%; border: none; background: transparent;
+            color: #e0e0e0; font-size: 18px; font-family: inherit;
+            resize: none; outline: none; line-height: 1.5;
         }
+        #output-text::placeholder { color: #4a4a5a; }
         .controls {
-            display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
-            background: white; border-radius: 8px; padding: 15px 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
+            padding: 10px 12px; background: #16213e;
         }
-        .control-group { margin-bottom: 0; }
         .control-group label {
-            display: block; margin-bottom: 5px; font-weight: bold; color: #333;
+            display: block; font-size: 11px; font-weight: 600;
+            text-transform: uppercase; letter-spacing: 0.5px; color: #8a8a9a;
+            margin-bottom: 4px;
         }
         .control-group select {
-            padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;
+            padding: 6px 10px; border: 1px solid #2a2a4e; border-radius: 6px;
+            background: #0f3460; color: #eee; font-size: 14px; cursor: pointer;
         }
         .control-group button {
-            padding: 8px 16px; background-color: #4CAF50; color: white;
-            border: none; border-radius: 4px; cursor: pointer; font-size: 14px;
+            padding: 8px 14px; border: none; border-radius: 6px;
+            background: #e94560; color: white; font-size: 14px; font-weight: 500;
+            cursor: pointer; transition: background 0.15s;
         }
-        .control-group button:hover { background-color: #45a049; }
-        .control-group button:disabled { background-color: #ccc; cursor: not-allowed; }
+        .control-group button:hover { background: #c81e45; }
+        .control-group button:disabled { background: #333; opacity: 0.5; cursor: not-allowed; }
         .toggle-group {
-            display: flex; align-items: center; gap: 6px; margin-bottom: 0;
+            display: flex; align-items: center; gap: 6px;
+        }
+        .toggle-group label {
+            margin: 0; font-size: 14px; color: #ccc; cursor: pointer;
+        }
+        .toggle-group input[type="checkbox"] {
+            width: 20px; height: 20px; accent-color: #e94560; cursor: pointer;
+        }
+        .speed-group { min-width: 160px; flex: 1; max-width: 240px; }
+        .speed-group input[type="range"] {
+            width: 100%; cursor: pointer; accent-color: #e94560;
         }
-        .toggle-group label { margin: 0; cursor: pointer; font-weight: normal; color: #333; }
-        .toggle-group input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
-        .speed-group { min-width: 200px; }
-        .speed-group input[type="range"] { width: 100%; cursor: pointer; }
-        .canvas-stats { text-align: center; margin-top: 10px; font-size: 12px; color: #666; }
-        @media (max-width: 850px) {
-            .container { flex-direction: column; }
-            .output-container { width: 100%; }
+        .btn-group { display: flex; gap: 8px; }
+
+        @media (max-width: 768px) {
+            .main-area { flex-direction: column; padding: 6px; gap: 6px; }
+            .output-wrap { width: 100%; min-height: 80px; max-height: 140px; }
+            .controls { padding: 8px; gap: 10px; }
+            .speed-group { min-width: 120px; }
+            .control-group select { font-size: 13px; }
+            .canvas-stats { font-size: 10px; }
+        }
+        @media (max-width: 480px) {
+            .controls { overflow-x: auto; flex-wrap: nowrap; }
+            .controls::-webkit-scrollbar { display: none; }
+            .toggle-group label { font-size: 13px; }
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <div class="canvas-container">
+<div id="app">
+    <div class="main-area">
+        <div class="canvas-wrap">
             <canvas id="dasher-canvas" width="800" height="600"></canvas>
             <div class="canvas-stats">
-                <span id="fps">FPS: 0</span> | <span id="frame-time">Frame Time: 0ms</span>
+                <span id="fps">FPS: 0</span> | <span id="frame-time">Frame: 0ms</span>
             </div>
         </div>
-
-        <div class="output-container">
+        <div class="output-wrap">
             <h2>Output</h2>
             <textarea id="output-text" readonly placeholder="Text appears here..."></textarea>
         </div>
     </div>
-
     <div class="controls">
         <div class="control-group">
             <label for="alphabet-select">Alphabet</label>
@@ -96,13 +128,12 @@ <h2>Output</h2>
             <input type="checkbox" id="learning-toggle" disabled>
             <label for="learning-toggle">Learning</label>
         </div>
-        <div class="control-group">
-            <button id="reset-btn" disabled>Clear Text</button>
-        </div>
-        <div class="control-group">
-            <button id="full-reset-btn" disabled>Full Reset</button>
+        <div class="btn-group">
+            <button id="reset-btn" disabled>Clear</button>
+            <button id="full-reset-btn" disabled>Reset</button>
         </div>
     </div>
+</div>
 
     <script src="dasher-wasm-wrapper.js"></script>
     <script type="module">
@@ -337,6 +368,7 @@ <h2>Output</h2>
         }
 
         window.addEventListener('resize', resizeCanvas);
+        window.addEventListener('orientationchange', () => setTimeout(resizeCanvas, 200));
         const resizeObserver = new ResizeObserver(resizeCanvas);
         resizeObserver.observe(canvas);
         resizeCanvas();

From b676571cc02bc23b3210f1cc66ac7bbe3118249f Mon Sep 17 00:00:00 2001
From: will wade <willwade@gmail.com>
Date: Tue, 16 Jun 2026 20:17:42 +0100
Subject: [PATCH 2/2] Use prefers-color-scheme for automatic light/dark mode

---
 wasm-build/demo.html | 50 +++++++++++++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/wasm-build/demo.html b/wasm-build/demo.html
index 716b638..1c203c4 100644
--- a/wasm-build/demo.html
+++ b/wasm-build/demo.html
@@ -6,10 +6,26 @@
     <title>Dasher</title>
     <style>
         * { box-sizing: border-box; }
+        :root {
+            --bg: #1a1a2e; --surface: #16213e; --surface2: #0f3460;
+            --border: #2a2a4e; --text: #eee; --text-dim: #8a8a9a;
+            --text-muted: #4a4a5a; --canvas-bg: #000;
+            --accent: #e94560; --accent-hover: #c81e45;
+            --stats: rgba(255,255,255,0.4);
+        }
+        @media (prefers-color-scheme: light) {
+            :root {
+                --bg: #f5f5f5; --surface: #fff; --surface2: #e8e8f0;
+                --border: #ddd; --text: #333; --text-dim: #666;
+                --text-muted: #aaa; --canvas-bg: #f0f0f0;
+                --accent: #007bff; --accent-hover: #0056b3;
+                --stats: rgba(0,0,0,0.3);
+            }
+        }
         html, body {
             margin: 0; padding: 0; height: 100%;
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: #1a1a2e; color: #eee;
+            background: var(--bg); color: var(--text);
             overflow: hidden;
         }
         #app {
@@ -21,7 +37,7 @@
         }
         .canvas-wrap {
             flex: 1; display: flex; flex-direction: column;
-            background: #000; border-radius: 12px; overflow: hidden;
+            background: var(--canvas-bg); border-radius: 12px; overflow: hidden;
             position: relative;
         }
         canvas {
@@ -30,55 +46,55 @@
         }
         .canvas-stats {
             position: absolute; bottom: 8px; right: 12px;
-            font-size: 11px; color: rgba(255,255,255,0.4);
+            font-size: 11px; color: var(--stats);
             pointer-events: none;
         }
         .output-wrap {
             width: 280px; min-width: 200px; display: flex; flex-direction: column;
-            background: #16213e; border-radius: 12px; padding: 12px;
+            background: var(--surface); border-radius: 12px; padding: 12px;
         }
         .output-wrap h2 {
             margin: 0 0 8px 0; font-size: 13px; font-weight: 600;
-            text-transform: uppercase; letter-spacing: 1px; color: #8a8a9a;
+            text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim);
         }
         #output-text {
             flex: 1; width: 100%; border: none; background: transparent;
-            color: #e0e0e0; font-size: 18px; font-family: inherit;
+            color: var(--text); font-size: 18px; font-family: inherit;
             resize: none; outline: none; line-height: 1.5;
         }
-        #output-text::placeholder { color: #4a4a5a; }
+        #output-text::placeholder { color: var(--text-muted); }
         .controls {
             display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
-            padding: 10px 12px; background: #16213e;
+            padding: 10px 12px; background: var(--surface);
         }
         .control-group label {
             display: block; font-size: 11px; font-weight: 600;
-            text-transform: uppercase; letter-spacing: 0.5px; color: #8a8a9a;
+            text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim);
             margin-bottom: 4px;
         }
         .control-group select {
-            padding: 6px 10px; border: 1px solid #2a2a4e; border-radius: 6px;
-            background: #0f3460; color: #eee; font-size: 14px; cursor: pointer;
+            padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
+            background: var(--surface2); color: var(--text); font-size: 14px; cursor: pointer;
         }
         .control-group button {
             padding: 8px 14px; border: none; border-radius: 6px;
-            background: #e94560; color: white; font-size: 14px; font-weight: 500;
+            background: var(--accent); color: white; font-size: 14px; font-weight: 500;
             cursor: pointer; transition: background 0.15s;
         }
-        .control-group button:hover { background: #c81e45; }
-        .control-group button:disabled { background: #333; opacity: 0.5; cursor: not-allowed; }
+        .control-group button:hover { background: var(--accent-hover); }
+        .control-group button:disabled { background: var(--border); opacity: 0.5; cursor: not-allowed; }
         .toggle-group {
             display: flex; align-items: center; gap: 6px;
         }
         .toggle-group label {
-            margin: 0; font-size: 14px; color: #ccc; cursor: pointer;
+            margin: 0; font-size: 14px; color: var(--text); cursor: pointer;
         }
         .toggle-group input[type="checkbox"] {
-            width: 20px; height: 20px; accent-color: #e94560; cursor: pointer;
+            width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer;
         }
         .speed-group { min-width: 160px; flex: 1; max-width: 240px; }
         .speed-group input[type="range"] {
-            width: 100%; cursor: pointer; accent-color: #e94560;
+            width: 100%; cursor: pointer; accent-color: var(--accent);
         }
         .btn-group { display: flex; gap: 8px; }
 
