diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..7e0f31f --- /dev/null +++ b/favicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/gemini.md b/gemini.md index 5ae05dc..251afce 100644 --- a/gemini.md +++ b/gemini.md @@ -375,10 +375,11 @@ The `?v=Date.now()` on imports handles this automatically on page load. The router currently only has two routes. These sections need to be created: -### `board-control` section (not started) -- Full keyboard layout overlaid on a top-view board image -- Click a letter/number → IK move to `LOOKUP_TABLE[char]` -- Perhaps a "type a word" sequential move feature +### `board-control` section (implemented) +- Uses predefined background maps (SVG/PNG) with corresponding JSON config files specifying clickable coordinates in physical mm. +- Click a spot on the map or select from a compact list → IK move to coordinates. +- Supports movement modes (e.g., Direct, Erratic, Random, Snaky). +- Requires arm to be homed; homing state is persisted across sessions via `localStorage`. ### `sequence-editor` section (not started) - Record and replay a sequence of moves @@ -407,6 +408,7 @@ To add a new section: | **No dynamic BLE imports**| `index.html` must import `ble.js` via static `import`. Dynamic cache-busters create multiple instances of the BLE singleton, isolating UI event listeners! | | **`fivebarIKGame.js` is reference only** | The original site's game uses a different angle convention (absolute degrees, different home, with `ikElbowSigns` tracking). We use the C++ IK formula instead because it directly produces step deltas from home. `fivebarIKGame.js` is kept in the repo for reference and understanding, not imported. | | **Hash-based routing** | Keeps the SPA working from `file://` and simple static servers without needing a history API setup | +| **Persistent Homing State** | The UI uses `localStorage.getItem('wiji_homed')` to track if the arm has been homed during the user's ongoing interaction. This avoids forcing the user to re-home every time they switch tabs or pages. Sending `HOMEALL` sets this to `true`. | --- diff --git a/generate_bg.py b/generate_bg.py new file mode 100644 index 0000000..bb0c9e4 --- /dev/null +++ b/generate_bg.py @@ -0,0 +1,54 @@ +import json +import os + +svg_lines = [ + '', + ' ', + ' ', + ' ', + ' ', + ' ', + ' MECHANISM', + ' CLEARANCE', +] + +# X from 150 to 300 +for row in range(9): + y_base = 25 + row * 16 + svg_lines.append(f' ') + svg_lines.append(f' ') + svg_lines.append(f' ') + +spots = [] +alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" + +for i, letter in enumerate(alphabet): + col = i % 3 + row = i // 3 + + svg_x = 175 + col * 50 + svg_y = 25 + row * 16 + + phys_x = svg_x - 150 + phys_y = 145 - svg_y + + spots.append({ + "id": letter, + "label": f"{letter.upper()}{letter.lower()}", + "x": phys_x, + "y": phys_y + }) + + text_str = f' {letter.upper()}{letter.lower()}' + svg_lines.append(text_str) + +svg_lines.append('') + +with open('web/assets/backgrounds/portrait-right/bg.svg', 'w') as f: + f.write('\n'.join(svg_lines)) + +with open('web/assets/backgrounds/portrait-right/spots.json', 'w') as f: + json.dump({ + "bounds": { "xMin": -150, "xMax": 150, "yMin": -30, "yMax": 145 }, + "spots": spots + }, f, indent=2) diff --git a/index.html b/index.html index 427bda4..110a0ea 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,8 @@ + + @@ -26,22 +28,19 @@ - - - - + Home + + + Board Control + + - - - - + Stepper Test @@ -51,18 +50,7 @@ Coming Soon
- - - - Board Control -
- -
- - - + Sequence Editor
@@ -83,10 +71,7 @@
WijiBoard
@@ -101,11 +86,7 @@ @@ -126,10 +107,12 @@ import UI from './web/js/ui.js'; import HomeSection from './web/js/sections/home.js'; import StepperSection from './web/js/sections/stepper-test.js'; + import BoardControlSection from './web/js/sections/board-control.js'; // ── Register routes ──────────────────────────────────────────── Router.register('home', HomeSection); Router.register('stepper-test', StepperSection); + Router.register('board-control', BoardControlSection); // ── Sidebar toggle logic ─────────────────────────────────────── const sidebar = document.getElementById('sidebar'); diff --git a/web/assets/backgrounds/default/bg.svg b/web/assets/backgrounds/default/bg.svg new file mode 100644 index 0000000..3ad0b24 --- /dev/null +++ b/web/assets/backgrounds/default/bg.svg @@ -0,0 +1,49 @@ + + + + + + + + + W I J I B O A R D + + + + + + + YES + NO + + + + + + A + B + C + D + E + F + G + H + I + J + K + + + L + M + N + O + P + Q + R + S + T + U + + + GOODBYE + diff --git a/web/assets/backgrounds/default/spots.json b/web/assets/backgrounds/default/spots.json new file mode 100644 index 0000000..24f270c --- /dev/null +++ b/web/assets/backgrounds/default/spots.json @@ -0,0 +1,29 @@ +{ + "bounds": { "xMin": -150, "xMax": 150, "yMin": -30, "yMax": 145 }, + "spots": [ + { "id": "YES", "label": "YES", "x": -70, "y": 90 }, + { "id": "NO", "label": "NO", "x": 70, "y": 90 }, + { "id": "A", "label": "A", "x": -100, "y": 60 }, + { "id": "B", "label": "B", "x": -80, "y": 64 }, + { "id": "C", "label": "C", "x": -60, "y": 67 }, + { "id": "D", "label": "D", "x": -40, "y": 69 }, + { "id": "E", "label": "E", "x": -20, "y": 70 }, + { "id": "F", "label": "F", "x": 0, "y": 70 }, + { "id": "G", "label": "G", "x": 20, "y": 70 }, + { "id": "H", "label": "H", "x": 40, "y": 69 }, + { "id": "I", "label": "I", "x": 60, "y": 67 }, + { "id": "J", "label": "J", "x": 80, "y": 64 }, + { "id": "K", "label": "K", "x": 100, "y": 60 }, + { "id": "L", "label": "L", "x": -90, "y": 40 }, + { "id": "M", "label": "M", "x": -70, "y": 43 }, + { "id": "N", "label": "N", "x": -50, "y": 45 }, + { "id": "O", "label": "O", "x": -30, "y": 46 }, + { "id": "P", "label": "P", "x": -10, "y": 47 }, + { "id": "Q", "label": "Q", "x": 10, "y": 47 }, + { "id": "R", "label": "R", "x": 30, "y": 46 }, + { "id": "S", "label": "S", "x": 50, "y": 45 }, + { "id": "T", "label": "T", "x": 70, "y": 43 }, + { "id": "U", "label": "U", "x": 90, "y": 40 }, + { "id": "GOODBYE", "label": "GOODBYE", "x": 0, "y": -15 } + ] +} diff --git a/web/assets/backgrounds/image_spec.md b/web/assets/backgrounds/image_spec.md new file mode 100644 index 0000000..4d3e74e --- /dev/null +++ b/web/assets/backgrounds/image_spec.md @@ -0,0 +1,66 @@ +# WijiBoard Background Image Specifications + +If you are developing custom backgrounds for the Board Control section, follow these technical specifications to ensure your design perfectly aligns with the SCARA mechanism's physical limits and the web UI's coordinate system. + +## 1. Physical Dimensions & Proportions + +The underlying coordinate system of the WijiBoard maps directly to the physical workspace of the SCARA arm in millimeters (mm). + +- **Total Physical Width (X-axis):** 300 mm +- **Total Physical Height (Y-axis):** 175 mm +- **Aspect Ratio:** 300:175 (which simplifies exactly to **12:7**) + +### Physical Boundaries: +- **X Range:** `-150` (Left) to `+150` (Right). Center is `0`. +- **Y Range:** `-30` (Bottom) to `+145` (Top). *Note: The arm bases (motors) are located near Y=0, so the usable board area extends upwards.* + +## 2. Raster Images (PNG, WebP, JPG) + +If you are designing your background in Photoshop, GIMP, or another raster editor: +- **Resolution:** Your image **must** have a 12:7 aspect ratio. Recommended resolutions are: + - 1200 × 700 px + - 2400 × 1400 px (Recommended for high-DPI/Retina screens) + - 3000 × 1750 px +- **Color Depth:** Standard 24-bit RGB or 32-bit RGBA (if transparency is needed). +- **Format:** Optimized PNG or WebP is recommended to prevent compression artifacts around text/letters. + +## 3. Vector Graphics (SVG) - *Highly Recommended* + +If you are using Illustrator, Inkscape, or writing SVG by hand, vector graphics are preferred because they scale infinitely without losing quality. + +- **ViewBox:** Set your SVG `viewBox` to exactly match the physical proportions, for example: `viewBox="0 0 300 175"`. +- **Coordinate Mapping:** If your viewBox is `0 0 300 175`: + - `SVG X = Physical X + 150` + - `SVG Y = 145 - Physical Y` +- Keep paths clean and compress the SVG if it contains highly complex paths. + +## 4. Setting Up Your New Background + +1. Create a new folder inside `web/assets/backgrounds/` (e.g., `web/assets/backgrounds/my-custom-board/`). +2. Place your image in this folder and name it `bg.svg` or `bg.png` (Update `board-control.js` if you change the file extension to PNG). +3. Create a `spots.json` file in the exact same folder to define your clickable targets. + +### `spots.json` Format +This file tells the web UI where your letters/targets are located in **physical millimeters**, NOT image pixels. + +```json +{ + "bounds": { + "xMin": -150, + "xMax": 150, + "yMin": -30, + "yMax": 145 + }, + "spots": [ + { "id": "yes", "label": "YES", "x": -60.5, "y": 125.0 }, + { "id": "no", "label": "NO", "x": 60.5, "y": 125.0 }, + { "id": "A", "label": "A", "x": -118.0, "y": 95.0 } + ] +} +``` +- **bounds**: Defines the physical bounding box (in mm) that your background image represents. This automatically adjusts the UI's aspect ratio and coordinate mapping! +- **spots**: Array of target objects. +- **id**: Unique identifier for the dropdown list. +- **label**: Human-readable text shown on the UI. +- **x**: The X coordinate in physical mm (`-150` to `+150`). +- **y**: The Y coordinate in physical mm (`-30` to `+145`). diff --git a/web/assets/backgrounds/portrait-right/bg.svg b/web/assets/backgrounds/portrait-right/bg.svg new file mode 100644 index 0000000..5df5e99 --- /dev/null +++ b/web/assets/backgrounds/portrait-right/bg.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + AaBbCc + DdEeFf + GgHhIi + JjKkLl + MmNnOo + PpQqRr + SsTtUu + VvWwXx + YyZz + + diff --git a/web/assets/backgrounds/portrait-right/spots.json b/web/assets/backgrounds/portrait-right/spots.json new file mode 100644 index 0000000..3736a5f --- /dev/null +++ b/web/assets/backgrounds/portrait-right/spots.json @@ -0,0 +1,31 @@ +{ + "bounds": { "xMin": 30, "xMax": 150, "yMin": -30, "yMax": 145 }, + "spots": [ + { "id": "A", "label": "Aa", "x": 55, "y": 120 }, + { "id": "B", "label": "Bb", "x": 90, "y": 120 }, + { "id": "C", "label": "Cc", "x": 125, "y": 120 }, + { "id": "D", "label": "Dd", "x": 55, "y": 104 }, + { "id": "E", "label": "Ee", "x": 90, "y": 104 }, + { "id": "F", "label": "Ff", "x": 125, "y": 104 }, + { "id": "G", "label": "Gg", "x": 55, "y": 88 }, + { "id": "H", "label": "Hh", "x": 90, "y": 88 }, + { "id": "I", "label": "Ii", "x": 125, "y": 88 }, + { "id": "J", "label": "Jj", "x": 55, "y": 72 }, + { "id": "K", "label": "Kk", "x": 90, "y": 72 }, + { "id": "L", "label": "Ll", "x": 125, "y": 72 }, + { "id": "M", "label": "Mm", "x": 55, "y": 56 }, + { "id": "N", "label": "Nn", "x": 90, "y": 56 }, + { "id": "O", "label": "Oo", "x": 125, "y": 56 }, + { "id": "P", "label": "Pp", "x": 55, "y": 40 }, + { "id": "Q", "label": "Qq", "x": 90, "y": 40 }, + { "id": "R", "label": "Rr", "x": 125, "y": 40 }, + { "id": "S", "label": "Ss", "x": 55, "y": 24 }, + { "id": "T", "label": "Tt", "x": 90, "y": 24 }, + { "id": "U", "label": "Uu", "x": 125, "y": 24 }, + { "id": "V", "label": "Vv", "x": 55, "y": 8 }, + { "id": "W", "label": "Ww", "x": 90, "y": 8 }, + { "id": "X", "label": "Xx", "x": 125, "y": 8 }, + { "id": "Y", "label": "Yy", "x": 55, "y": -8 }, + { "id": "Z", "label": "Zz", "x": 90, "y": -8 } + ] +} diff --git a/web/assets/icons.svg b/web/assets/icons.svg new file mode 100644 index 0000000..860cfa5 --- /dev/null +++ b/web/assets/icons.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/js/sections/board-control.js b/web/js/sections/board-control.js new file mode 100644 index 0000000..7c213b4 --- /dev/null +++ b/web/js/sections/board-control.js @@ -0,0 +1,362 @@ +import BLE from '../ble.js'; +import UI from '../ui.js'; +import IK from '../kinematics.js'; + +let eventCleanup = []; +let isHomed = false; +let spots = []; +let bounds = { xMin: -150, xMax: 150, yMin: -30, yMax: 145 }; +let currentBg = localStorage.getItem('wiji_bg') || 'default'; +let steps1 = 0; +let steps2 = 0; + +function syncStateFromStorage() { + isHomed = localStorage.getItem('wiji_homed') === 'true'; + steps1 = isHomed ? parseInt(localStorage.getItem('wiji_steps1') || IK.ARM.HOME_STEPS.m1) : IK.ARM.HOME_STEPS.m1; + steps2 = isHomed ? parseInt(localStorage.getItem('wiji_steps2') || IK.ARM.HOME_STEPS.m2) : IK.ARM.HOME_STEPS.m2; +} + +function saveSteps() { + if (isHomed) { + localStorage.setItem('wiji_steps1', steps1); + localStorage.setItem('wiji_steps2', steps2); + } +} + +function buildHTML() { + return ` + + +
+
+

Board Control

+

Click on the map or select from the list to move the pointer.

+
+ +
+ +
+
Interactive Map
+ +
+
+ +
+
+
+
+ + +
+ + +
+
+ System Status +
+
X (mm)
0.0
+
Y (mm)
0.0
+
+
+
+ ${isHomed ? '✓ HOMED' : '⚠ NOT HOMED! Movement Locked.'} +
+ +
+ + +
+
Navigation
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ +
+
+
+ `; +} + +function updatePositionReadout() { + const t1 = IK.stepsToRad(steps1); + const t2 = IK.stepsToRad(steps2); + const { endX, endY } = IK.forward(t1, t2); + const px = document.getElementById('pos-x'); + const py = document.getElementById('pos-y'); + if (px) px.textContent = isFinite(endX) ? endX.toFixed(1) : '---'; + if (py) py.textContent = isFinite(endY) ? endY.toFixed(1) : '---'; +} + +function updateHomingUI() { + const banner = document.getElementById('homing-banner'); + const btn = document.getElementById('btn-force-home'); + if (!banner || !btn) return; + + if (isHomed) { + banner.className = 'homing-banner homed'; + banner.textContent = '✓ HOMED'; + btn.textContent = 'FORCE HOME ALL'; + } else { + banner.className = 'homing-banner not-homed'; + banner.textContent = '⚠ NOT HOMED! Movement Locked.'; + btn.textContent = 'HOME ALL MOTORS'; + } +} + +async function loadSpots() { + try { + const res = await fetch(`web/assets/backgrounds/${currentBg}/spots.json?v=${Date.now()}`); + const data = await res.json(); + if (Array.isArray(data)) { + spots = data; + } else { + spots = data.spots || []; + if (data.bounds) bounds = data.bounds; + } + document.getElementById('bg-image').src = `web/assets/backgrounds/${currentBg}/bg.svg?v=${Date.now()}`; + renderSpots(); + } catch(e) { + UI.log('Failed to load spots.json', 'error'); + } +} + +function renderSpots() { + const listEl = document.getElementById('spot-list'); + const markersEl = document.getElementById('markers-layer'); + const mapContainer = document.getElementById('map-container'); + if (!listEl || !markersEl || !mapContainer) return; + + const w = bounds.xMax - bounds.xMin; + const h = bounds.yMax - bounds.yMin; + mapContainer.style.aspectRatio = `${w}/${h}`; + + listEl.innerHTML = ''; + markersEl.innerHTML = ''; + + spots.forEach(spot => { + // List item + const opt = document.createElement('option'); + opt.value = spot.id; + opt.textContent = `${spot.label.padEnd(10, ' ')} [${spot.x}, ${spot.y}]`; + listEl.appendChild(opt); + + // Map marker + const marker = document.createElement('div'); + const xPct = ((spot.x - bounds.xMin) / w) * 100; + const yPct = ((bounds.yMax - spot.y) / h) * 100; + + marker.className = 'spot-marker'; + marker.style = `position: absolute; left: ${xPct}%; top: ${yPct}%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 230, 118, 0.4); border: 2px solid var(--accent-green); cursor: pointer; transition: all 0.2s;`; + marker.title = spot.label; + + marker.addEventListener('click', () => { + listEl.value = spot.id; + document.getElementById('btn-go').disabled = false; + executeMove(spot); + }); + + markersEl.appendChild(marker); + }); +} + +async function executeMove(spot) { + if (!isHomed) { + UI.log('Cannot move: System is not homed! Please click HOME ALL.', 'error'); + return; + } + + const mode = document.getElementById('mode-select').value; + if (mode !== 'direct') { + UI.log(`Mode '${mode}' not fully implemented yet! Using direct move.`, 'warn'); + } + + // Calculate IK + const wsCheck = IK.checkWorkspace(spot.x, spot.y); + if (!wsCheck.ok) { + UI.log(`⛔ ${wsCheck.reason}`, 'error'); + return; + } + + const res = IK.solve(spot.x, spot.y); + if (!res.reachable) { + UI.log(`Target ${spot.label} is unreachable geometrically.`, 'error'); + return; + } + + if (IK.armsCrossed(res.theta1, res.theta2)) { + UI.log(`Target ${spot.label} rejected: elbows crossed!`, 'error'); + return; + } + + const newSteps1 = IK.radToSteps(res.theta1); + const newSteps2 = IK.radToSteps(res.theta2); + const delta1 = newSteps1 - steps1; + const delta2 = newSteps2 - steps2; + + steps1 = newSteps1; + steps2 = newSteps2; + saveSteps(); + updatePositionReadout(); + + const cmd1 = `S1${delta1 >= 0 ? '+' : ''}${delta1}`; + const cmd2 = `S2${delta2 >= 0 ? '+' : ''}${delta2}`; + + UI.log(`Moving to ${spot.label} (${spot.x}, ${spot.y})`, 'success'); + + if (BLE.isConnected()) { + try { + await BLE.write(cmd1); + await BLE.write(cmd2); + } catch (e) { + UI.log(`BLE error: ${e.message}`, 'error'); + } + } else { + UI.log(`[sim] ${cmd1} ${cmd2}`, 'info'); + } +} + +export default { + mount(container) { + syncStateFromStorage(); + container.innerHTML = buildHTML(); + + updateHomingUI(); + loadSpots(); + + // ── Background Selection ────────────────────────────────── + const bgSelect = document.getElementById('bg-select'); + if (bgSelect) { + bgSelect.value = currentBg; + bgSelect.addEventListener('change', () => { + currentBg = bgSelect.value; + localStorage.setItem('wiji_bg', currentBg); + loadSpots(); + }); + } + + // ── Homing Logic ────────────────────────────────────────── + document.getElementById('btn-force-home').addEventListener('click', async () => { + isHomed = true; + localStorage.setItem('wiji_homed', 'true'); + updateHomingUI(); + + steps1 = IK.ARM.HOME_STEPS.m1; + steps2 = IK.ARM.HOME_STEPS.m2; + saveSteps(); + updatePositionReadout(); + + UI.log('Homing all motors...', 'info'); + if (BLE.isConnected()) { + try { + await BLE.write('HOMEALL'); + } catch (e) { + UI.log(e.message, 'error'); + } + } else { + UI.log('[sim] HOMEALL', 'info'); + } + }); + + // ── List Selection ──────────────────────────────────────── + const listEl = document.getElementById('spot-list'); + const goBtn = document.getElementById('btn-go'); + + listEl.addEventListener('change', () => { + goBtn.disabled = !listEl.value; + }); + + goBtn.addEventListener('click', () => { + const selectedId = listEl.value; + const spot = spots.find(s => s.id === selectedId); + if (spot) { + executeMove(spot); + } + }); + + // ── Sync Steps from BLE ─────────────────────────────────── + const onBLEStatus = (e) => { + const msg = e.detail; + if (msg.startsWith('P:')) { + const [s1, s2] = msg.slice(2).split(',').map(Number); + steps1 = s1; steps2 = s2; + saveSteps(); + updatePositionReadout(); + } + }; + document.addEventListener('ble:status', onBLEStatus); + + // Sync position on mount if connected + if (BLE.isConnected()) { + BLE.write('POS').catch(() => {}); + } else { + updatePositionReadout(); + } + + eventCleanup.push(() => document.removeEventListener('ble:status', onBLEStatus)); + }, + + unmount() { + eventCleanup.forEach(fn => fn()); + eventCleanup = []; + } +}; diff --git a/web/js/sections/home.js b/web/js/sections/home.js index 78c0a6d..9985b1a 100644 --- a/web/js/sections/home.js +++ b/web/js/sections/home.js @@ -57,6 +57,18 @@ const HomeSection = { Sections
+ +
- -
- - - -
-
Board Control
-
Coming soon
-
-
diff --git a/web/js/sections/stepper-test.js b/web/js/sections/stepper-test.js index f7a6315..71fecc5 100644 --- a/web/js/sections/stepper-test.js +++ b/web/js/sections/stepper-test.js @@ -45,10 +45,23 @@ const PX_L2 = IK.ARM.l2 * SV.SCALE; const PX_D2 = IK.ARM.d2 * SV.SCALE; // ── Section state ───────────────────────────────────────────────── -let steps1 = IK.ARM.HOME_STEPS.m1; -let steps2 = IK.ARM.HOME_STEPS.m2; +let steps1 = 0; +let steps2 = 0; let eventCleanup = []; +function syncStateFromStorage() { + const isHomed = localStorage.getItem('wiji_homed') === 'true'; + steps1 = isHomed ? parseInt(localStorage.getItem('wiji_steps1') || IK.ARM.HOME_STEPS.m1) : IK.ARM.HOME_STEPS.m1; + steps2 = isHomed ? parseInt(localStorage.getItem('wiji_steps2') || IK.ARM.HOME_STEPS.m2) : IK.ARM.HOME_STEPS.m2; +} + +function saveSteps() { + if (localStorage.getItem('wiji_homed') === 'true') { + localStorage.setItem('wiji_steps1', steps1); + localStorage.setItem('wiji_steps2', steps2); + } +} + // ── SVG element refs ────────────────────────────────────────────── let svgEl; // Real arm elements @@ -135,6 +148,7 @@ function updateReadouts(t1, t2, ex, ey) { if (elTheta2) elTheta2.textContent = IK.radToDeg(t2).toFixed(1) + '°'; if (elSteps1) elSteps1.textContent = steps1; if (elSteps2) elSteps2.textContent = steps2; + saveSteps(); } // ── Ghost arm show/hide ─────────────────────────────────────────── @@ -218,6 +232,7 @@ async function zeroMotor(motor) { if (motor === 'ALL') { steps1 = IK.ARM.HOME_STEPS.m1; steps2 = IK.ARM.HOME_STEPS.m2; + localStorage.setItem('wiji_homed', 'true'); } else if (motor === 1) { steps1 = IK.ARM.HOME_STEPS.m1; } else { @@ -616,6 +631,7 @@ function buildHTML() { const StepperTestSection = { mount(container) { + syncStateFromStorage(); container.innerHTML = buildHTML(); // ── Cache refs ──────────────────────────────────────────────