docs(ui): update help assets and regenerate help pdf

feat(settings/espnow): validate wifi_channel and wire into firmware
fix(api): prevent circular reference in pattern create
2026-03-26 00:40:40 +13:00 · 2026-03-26 00:40:21 +13:00 · 2026-03-26 00:40:08 +13:00 · 2026-03-26 00:39:41 +13:00 · 2026-03-22 02:53:34 +13:00 · 2026-03-22 02:00:28 +13:00
138 changed files with 23004 additions and 1436 deletions
--- a/.cursor/debug.log
+++ b/.cursor/debug.log
@@ -0,0 +1,116 @@
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434706543}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434706552}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434707852}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434707860}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434708466}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434708474}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768434709765}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768434709787}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768434717888}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":201,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768434717903}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434717904}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434717913}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434738084}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434738093}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434739031}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434739040}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434746453}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434746496}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768434748859}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768434748866}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768434773921}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":201,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768434773931}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434773931}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434773940}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768434810105}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768434810119}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768434816383}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":201,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768434816399}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434816400}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434816414}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434944656}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434944756}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434945369}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434945427}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434946108}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434946162}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434946680}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434946736}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768434947640}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768434947656}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768434953064}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":201,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768434953079}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434953080}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434953093}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435103720}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435103776}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435104593}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435104647}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435105158}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435105253}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435275247}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435275315}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435276178}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435276278}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435276945}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435276998}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768435278150}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768435278162}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768435281966}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":400,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768435281988}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435387623}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435387680}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435388399}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435388454}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768435389910}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768435389922}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768435393213}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768435393231}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435393233}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435393245}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/12/content-fragment","targetId":"tab-content"},"timestamp":1768435395729}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/12/content-fragment","targetId":"tab-content"},"timestamp":1768435395748}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/13/content-fragment","targetId":"tab-content"},"timestamp":1768435396771}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/13/content-fragment","targetId":"tab-content"},"timestamp":1768435396788}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/12/content-fragment","targetId":"tab-content"},"timestamp":1768435398656}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/12/content-fragment","targetId":"tab-content"},"timestamp":1768435398674}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/13/content-fragment","targetId":"tab-content"},"timestamp":1768435399748}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/13/content-fragment","targetId":"tab-content"},"timestamp":1768435399774}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435668310}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":false,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435668311}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435668355}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435669841}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":false,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435669842}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435669852}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435672686}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435673713}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435674316}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435674560}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435680419}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435680897}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435814285}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435814287}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true},"timestamp":1768435814287}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435814350}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435815080}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true},"timestamp":1768435815081}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435815082}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435815135}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435815724}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true},"timestamp":1768435815725}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435815725}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435815778}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H4","location":"src/static/color_palette.js:openModal","message":"palette modal opened","data":{"active":true},"timestamp":1768435817104}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":true,"modalActive":true},"timestamp":1768435817105}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H4","location":"src/static/color_palette.js:closeModal","message":"palette modal closed","data":{"active":false},"timestamp":1768435820180}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435931118}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":true,"hasLightingController":false},"timestamp":1768435931120}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true,"hasContainer":true,"hasAddButton":true},"timestamp":1768435931119}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435931173}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435931791}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":true,"hasLightingController":false},"timestamp":1768435931793}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true,"hasContainer":true,"hasAddButton":true},"timestamp":1768435931793}
+{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435931895}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":true,"modalActive":true},"timestamp":1768435933111}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H4","location":"src/static/color_palette.js:openModal","message":"palette modal opened","data":{"active":true},"timestamp":1768435933110}
+{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H4","location":"src/static/color_palette.js:closeModal","message":"palette modal closed","data":{"active":false},"timestamp":1768435943332}
--- a/.cursor/rules/commit.mdc
+++ b/.cursor/rules/commit.mdc
@@ -0,0 +1,26 @@
+---
+description: Git commit messages and how to split work into commits
+alwaysApply: true
+---
+
+# Commits
+
+When preparing commits (especially when the user asks to commit):
+
+1. **Prefer multiple commits** over one large commit when changes span distinct concerns (e.g. UI vs docs vs API). One logical unit per commit.
+2. **Message format:** `type(scope): short imperative subject` (lowercase subject after the colon; no trailing period).
+   - **Types:** `feat`, `fix`, `docs`, `style`, `refactor`, `test`, `chore`, `perf` (use what fits).
+   - **Scope:** optional but encouraged — e.g. `ui`, `api`, `profiles`, `presets`, `esp32`.
+3. **Subject line:** ~50 characters or less; describe *what* changed, not the ticket number alone.
+4. **Body:** only when needed (breaking change, non-obvious rationale, or multiple bullets). Otherwise subject is enough.
+
+**Examples**
+
+- `feat(ui): gate profile delete to edit mode`
+- `docs: document run vs edit in API`
+- `fix(api): resolve preset delete route argument clash`
+
+**Do not**
+
+- Squash unrelated fixes and doc tweaks into one commit unless the user explicitly wants a single commit.
+- Use vague messages like `update`, `fixes`, or `wip`.
--- a/.cursor/rules/spelling.mdc
+++ b/.cursor/rules/spelling.mdc
@@ -0,0 +1,10 @@
+---
+description: British spelling for user-facing text; technical identifiers stay as-is
+alwaysApply: true
+---
+
+# Spelling: colour
+
+- **User-facing strings** (Help modal, button labels, README prose, `docs/`, error messages shown in the UI): use **British English** — **colour**, **favour**, **behaviour**, etc., unless quoting existing product names.
+- **Do not rename** existing code for spelling: **identifiers**, file names, URL paths, JSON keys, CSS properties (`color`), HTML attributes (`type="color"`), and API field names stay as they are (`color`, `colors`, `palette`, etc.) so nothing breaks.
+- **New** UI copy and docs should follow **colour** in prose; new code symbols may still use `color` when matching surrounding APIs or conventions.
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,30 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+
+# Virtual environments
+venv/
+env/
+ENV/
+.venv
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Project specific
+docs/.help-print.html
+settings.json
+*.log
+*.db
+*.sqlite
--- a/.gitmodules
+++ b/.gitmodules
@@ -0,0 +1,6 @@
+[submodule "led-driver"]
+	path = led-driver
+	url = git@git.technical.kiwi:technicalkiwi/led-driver.git
+[submodule "led-tool"]
+	path = led-tool
+	url = git@git.technical.kiwi:technicalkiwi/led-tool.git
--- a/15
+++ b/15
@@ -7,8 +7,23 @@ name = "pypi"
 mpremote = "*"
 pyserial = "*"
 esptool = "*"
+pyjwt = "*"
+watchfiles = "*"
+requests = "*"
+selenium = "*"
+adafruit-ampy = "*"
+microdot = "*"

 [dev-packages]
+pytest = "*"

 [requires]
 python_version = "3.12"
+
+[scripts]
+web = "python /home/pi/led-controller/tests/web.py"
+watch = "python -m watchfiles 'python tests/web.py' src tests"
+install = "pipenv install"
+run = "sh -c 'cd src && python main.py'"
+dev = "watchfiles \"sh -c 'cd src && python main.py'\" src"
+help-pdf = "sh scripts/build_help_pdf.sh"
--- a/Pipfile.lock
+++ b/Pipfile.lock
--- a/README.md
+++ b/README.md
@@ -1,2 +1,37 @@
 # led-controller

+LED controller web app for managing profiles, tabs, presets, and colour palettes, and sending commands to LED devices over the serial -> ESP-NOW bridge.
+
+## Run
+
+- One-time setup for port 80 without root: `sudo scripts/setup-port80.sh`
+- Start app: `pipenv run run`
+- Dev watcher (auto-restart on `src/` changes): `pipenv run dev`
+- Regenerate **`docs/help.pdf`** from **`docs/help.md`**: `pipenv run help-pdf` (requires **pandoc** and **chromium** on the host)
+
+## UI modes
+
+- **Run mode**: focused control view. Select tabs/presets and apply profiles. Editing actions are hidden.
+- **Edit mode**: management view. Shows Tabs, Presets, Patterns, Colour Palette, and Send Presets controls, plus per-tile preset edit/remove and drag-reorder.
+
+## Profiles
+
+- Applying a profile updates session scope and refreshes the active tab content.
+- In **Run mode**, Profiles supports apply-only behavior (no create/clone/delete).
+- In **Edit mode**, Profiles supports create/clone/delete.
+- Creating a profile always creates a populated `default` tab (starter presets).
+- Optional **DJ tab** seeding creates:
+  - `dj` tab bound to device name `dj`
+  - starter DJ presets (rainbow, single colour, transition)
+
+## Preset colours and palette linking
+
+- In preset editor, selecting a colour picker value auto-adds it when the picker closes.
+- Use **From Palette** to add a palette-linked preset colour.
+- Linked colours are stored as palette references and shown with a `P` badge.
+- When profile palette colours change, linked preset colours update across that profile.
+
+## API docs
+
+- Main API reference: `docs/API.md`
+
--- a/db/device.json
+++ b/db/device.json
@@ -0,0 +1 @@
+{}
--- a/db/group.json
+++ b/db/group.json
@@ -0,0 +1 @@
+{"1": {"name": "Main Group", "devices": ["1", "2", "3"]}, "2": {"name": "Accent Group", "devices": ["4", "5"]}}
--- a/db/palette.json
+++ b/db/palette.json
@@ -0,0 +1 @@
+{"1": ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF", "#FFFFFF", "#000000"], "2": [], "3": [], "4": [], "5": [], "6": [], "7": ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF", "#FFFFFF", "#000000"], "8": [], "9": [], "10": [], "11": [], "12": ["#890b0b", "#0b8935"]}
--- a/db/pattern.json
+++ b/db/pattern.json
@@ -0,0 +1,54 @@
+{
+    "on": {
+            "min_delay": 10,
+            "max_delay": 10000,
+            "max_colors": 1
+        },
+    "off": {
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 0
+    },
+    "rainbow": {
+        "n1": "Step Rate",
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 0
+    },
+    "transition": {
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 10
+    },
+    "chase": {
+        "n1": "Colour 1 Length",
+        "n2": "Colour 2 Length",
+        "n3": "Step 1",
+        "n4": "Step 2",
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 2
+    },
+    "pulse": {
+        "n1": "Attack",
+        "n2": "Hold",
+        "n3": "Decay",
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 10
+    },
+    "circle": {
+        "n1": "Head Rate",
+        "n2": "Max Length",
+        "n3": "Tail Rate",
+        "n4": "Min Length",
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 2
+    },
+    "blink": {
+        "min_delay": 10,
+        "max_delay": 10000,
+        "max_colors": 10
+    }
+}
--- a/db/preset.json
+++ b/db/preset.json
@@ -0,0 +1 @@
+{"1": {"name": "on", "pattern": "on", "colors": ["#FFFFFF"], "brightness": 255, "delay": 100, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "2": {"name": "off", "pattern": "off", "colors": [], "brightness": 0, "delay": 100, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "3": {"name": "rainbow", "pattern": "rainbow", "colors": [], "brightness": 255, "delay": 100, "auto": true, "n1": 2, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "4": {"name": "transition", "pattern": "transition", "colors": ["#FF0000", "#00FF00", "#0000FF", "#FFFFFF", "#0000FF", "#FFFF00"], "brightness": 255, "delay": 5000, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1", "palette_refs": [null, null, null, 6, 2, 3]}, "5": {"name": "chase", "pattern": "chase", "colors": ["#FF0000", "#0000FF"], "brightness": 255, "delay": 200, "auto": true, "n1": 5, "n2": 5, "n3": 1, "n4": 1, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "6": {"name": "pulse", "pattern": "pulse", "colors": ["#00FF00"], "brightness": 255, "delay": 500, "auto": true, "n1": 1000, "n2": 500, "n3": 1000, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "7": {"name": "circle", "pattern": "circle", "colors": ["#FFA500", "#800080"], "brightness": 255, "delay": 200, "auto": true, "n1": 2, "n2": 10, "n3": 2, "n4": 5, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "8": {"name": "blink", "pattern": "blink", "colors": ["#FF0000", "#00FF00", "#0000FF", "#FFFF00"], "brightness": 255, "delay": 1000, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "9": {"name": "warm white", "pattern": "on", "colors": ["#FFF5E6"], "brightness": 200, "delay": 100, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "10": {"name": "cool white", "pattern": "on", "colors": ["#E6F2FF"], "brightness": 200, "delay": 100, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "11": {"name": "red", "pattern": "on", "colors": ["#FF0000"], "brightness": 255, "delay": 100, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "12": {"name": "blue", "pattern": "on", "colors": ["#0000FF"], "brightness": 255, "delay": 100, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "13": {"name": "rainbow slow", "pattern": "rainbow", "colors": [], "brightness": 255, "delay": 150, "auto": true, "n1": 1, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "14": {"name": "pulse slow", "pattern": "pulse", "colors": ["#FF6600"], "brightness": 255, "delay": 800, "auto": true, "n1": 2000, "n2": 1000, "n3": 2000, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "15": {"name": "blink red green", "pattern": "blink", "colors": ["#FF0000", "#00FF00"], "brightness": 255, "delay": 500, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "30": {"name": "rainbow slow", "pattern": "rainbow", "colors": [], "brightness": 255, "delay": 150, "auto": true, "n1": 1, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "31": {"name": "DJ Rainbow", "pattern": "rainbow", "colors": [], "brightness": 220, "delay": 60, "n1": 12, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "32": {"name": "DJ Single Color", "pattern": "on", "colors": ["#ff00ff"], "brightness": 220, "delay": 100, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "33": {"name": "DJ Transition", "pattern": "transition", "colors": ["#ff0000", "#00ff00", "#0000ff"], "brightness": 220, "delay": 250, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "34": {"name": "DJ Rainbow", "pattern": "rainbow", "colors": [], "brightness": 220, "delay": 60, "n1": 12, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "35": {"name": "DJ Single Color", "pattern": "on", "colors": ["#ff00ff"], "brightness": 220, "delay": 100, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "36": {"name": "DJ Transition", "pattern": "transition", "colors": ["#ff0000", "#00ff00", "#0000ff"], "brightness": 220, "delay": 250, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "37": {"name": "tranistion2", "pattern": "transition", "colors": ["#FF0000", "#FFFF00", "#FF00FF"], "brightness": 128, "delay": 1000, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1", "palette_refs": [0, 3, 4]}}
--- a/db/profile.json
+++ b/db/profile.json
@@ -0,0 +1 @@
+{"1": {"name": "default", "type": "tabs", "tabs": ["1", "8"], "scenes": [], "palette_id": "1"}, "2": {"name": "test", "type": "tabs", "tabs": ["6", "7"], "scenes": [], "palette_id": "12"}}
--- a/db/scene.json
+++ b/db/scene.json
@@ -0,0 +1,22 @@
+{
+    "1": {
+        "name": "Default Scene",
+        "sequences": [
+            "1"
+        ],
+        "groups": [
+            "1"
+        ]
+    },
+    "2": {
+        "name": "Party Mode",
+        "sequences": [
+            "1",
+            "2"
+        ],
+        "groups": [
+            "1",
+            "2"
+        ]
+    }
+}
--- a/db/sequence.json
+++ b/db/sequence.json
@@ -0,0 +1 @@
+{"1": {"group_name": "Main Group", "presets": ["1", "2"], "sequence_duration": 3000, "sequence_transition": 500, "sequence_loop": true, "sequence_repeat_count": 0, "sequence_active": false, "sequence_index": 0, "sequence_start_time": 0}, "2": {"group_name": "Accent Group", "presets": ["2", "3"], "sequence_duration": 2000, "sequence_transition": 300, "sequence_loop": true, "sequence_repeat_count": 0, "sequence_active": false, "sequence_index": 0, "sequence_start_time": 0}}
--- a/db/tab.json
+++ b/db/tab.json
@@ -0,0 +1 @@
+{"1": {"name": "default", "names": ["1", "2", "3", "4", "5", "6", "7", "8", "0", "a"], "presets": [["4", "2", "7"], ["15", "3", "14"], ["5", "8", "10"], ["11", "9", "12"], ["1", "13", "37"]], "presets_flat": ["4", "2", "7", "15", "3", "14", "5", "8", "10", "11", "9", "12", "1", "13", "37"], "default_preset": "15"}, "2": {"name": "default", "names": ["1", "2", "3", "4", "5", "6", "7", "8", "0", "a"], "presets": [["16", "17", "18"], ["19", "20", "21"], ["22", "23", "24"], ["25", "26", "27"], ["28", "29", "30"]], "presets_flat": ["16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"]}, "3": {"name": "default", "names": ["1"], "presets": [], "default_preset": null}, "4": {"name": "default", "names": ["1"], "presets": [], "default_preset": null}, "5": {"name": "dj", "names": ["dj"], "presets": [["31", "32", "33"]], "default_preset": "31", "presets_flat": ["31", "32", "33"]}, "6": {"name": "default", "names": ["1"], "presets": [], "default_preset": null}, "7": {"name": "dj", "names": ["dj"], "presets": [["34", "35", "36"]], "default_preset": "34", "presets_flat": ["34", "35", "36"]}, "8": {"name": "test", "names": ["11"], "presets": [["1", "2", "3"], ["4", "5"]], "default_preset": "1", "presets_flat": ["1", "2", "3", "4", "5"]}}
--- a/dev.py
+++ b/dev.py
@@ -6,28 +6,48 @@ import sys

 print(sys.argv)

-port = sys.argv[1]
+# Extract port (first arg if it's not a command)
+commands = ["src", "lib", "ls", "reset", "follow", "db"]
+port = None
+if len(sys.argv) > 1 and sys.argv[1] not in commands:
+    port = sys.argv[1]

-cmd = sys.argv[1]

 for cmd in sys.argv[1:]:
    print(cmd)
    match cmd:
        case "src":
+            if port:
                subprocess.call(["mpremote", "connect", port, "fs", "cp", "-r", ".", ":" ], cwd="src")
+            else:
+                print("Error: Port required for 'src' command")
        case "lib":
+            if port:
                subprocess.call(["mpremote", "connect", port, "fs", "cp", "-r", "lib", ":" ])
+            else:
+                print("Error: Port required for 'lib' command")
        case "ls":
+            if port:
                subprocess.call(["mpremote", "connect", port, "fs", "ls", ":" ])
+            else:
+                print("Error: Port required for 'ls' command")
        case "reset":
+            if port:
                with serial.Serial(port, baudrate=115200) as ser:
                    ser.write(b'\x03\x03\x04')
+            else:
+                print("Error: Port required for 'reset' command")
        case "follow":
+            if port:
                with serial.Serial(port, baudrate=115200) as ser:
                    while True:
                        if ser.in_waiting > 0:  # Check if there is data in the buffer
                            data = ser.readline().decode('utf-8').strip()  # Read and decode the data
                            print(data)
-
-
-
+            else:
+                print("Error: Port required for 'follow' command")
+        case "db":
+            if port:
+                subprocess.call(["mpremote", "connect", port, "fs", "cp", "-r", "db", ":" ])
+            else:
+                print("Error: Port required for 'db' command")
--- a/docs/API.md
+++ b/docs/API.md
@@ -0,0 +1,318 @@
+# LED Controller API
+
+This document covers:
+
+1. **HTTP and WebSocket** exposed by the Raspberry Pi app (`src/main.py`) — profiles, presets, transport send, and related resources.
+2. **LED driver JSON** — the compact message format sent over the serial→ESP-NOW bridge to devices (same logical API as ESP-NOW payloads).
+
+Default listen address: `0.0.0.0`. Port defaults to **80**; override with the `PORT` environment variable (see `pipenv run run`).
+
+All JSON APIs use `Content-Type: application/json` for bodies and responses unless noted.
+
+---
+
+## UI behavior notes
+
+The main UI has two modes controlled by the mode toggle:
+
+- **Run mode**: optimized for operation (tab/preset selection and profile apply).
+- **Edit mode**: shows editing/management controls (tabs, presets, patterns, colour palette, send presets, and profile management actions).
+
+Profiles are available in both modes, but behavior differs:
+
+- **Run mode**: profile **apply** only.
+- **Edit mode**: profile **create/clone/delete/apply**.
+
+`POST /presets/send` is wired to the **Send Presets** UI action, which is exposed in Edit mode.
+
+---
+
+## Session and scoping
+
+Several routes use **`@with_session`**: the server stores a **current profile** in the session (cookie). Endpoints that scope data to “the current profile” (notably **`/presets`**) only return or mutate presets whose `profile_id` matches that session value.
+
+Profiles are selected with **`POST /profiles/<id>/apply`**, which sets `current_profile` in the session.
+
+---
+
+## Static pages and assets
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/` | Main UI (`templates/index.html`) |
+| GET | `/settings` | Settings page (`templates/settings.html`) |
+| GET | `/favicon.ico` | Empty response (204) |
+| GET | `/static/<path>` | Static files under `src/static/` |
+
+---
+
+## WebSocket: `/ws`
+
+Connect to **`ws://<host>:<port>/ws`**.
+
+- Send **JSON**: the object is forwarded to the transport (serial bridge → ESP-NOW) as JSON. Optional key **`to`**: 12-character hex MAC address; if present it is removed from the object and the payload is sent to that peer; otherwise the default destination is used.
+- Send **non-JSON text**: forwarded as raw bytes with the default address.
+- On send failure, the server may reply with `{"error": "Send failed"}`.
+
+---
+
+## HTTP API by resource
+
+Below, `<id>` values are string identifiers used by the JSON stores (numeric strings in practice).
+
+### Settings — `/settings`
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/settings` | Full settings object (from `settings.json` / `Settings` model). |
+| PUT | `/settings/settings` | Merge keys into settings and save. Returns `{"message": "Settings updated successfully"}`. |
+| GET | `/settings/wifi/ap` | Saved Wi‑Fi AP fields: `saved_ssid`, `saved_password`, `saved_channel`, `active` (Pi: `active` is always false). |
+| POST | `/settings/wifi/ap` | Body: `ssid` (required), `password`, `channel` (1–11). Persists AP-related settings. |
+| GET | `/settings/page` | Serves `templates/settings.html` (same page as `GET /settings` from the root app, for convenience). |
+
+### Profiles — `/profiles`
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/profiles` | `{"profiles": {...}, "current_profile_id": "<id>"}`. Ensures a default current profile when possible. |
+| GET | `/profiles/current` | `{"id": "...", "profile": {...}}` |
+| GET | `/profiles/<id>` | Single profile. If `<id>` is `current`, same as `/profiles/current`. |
+| POST | `/profiles` | Create profile. Body may include `name` and other fields. Optional `seed_dj_tab` (request-only) seeds a DJ tab + presets. New profiles always get a populated `default` tab. Returns `{ "<id>": { ... } }` with status 201. |
+| POST | `/profiles/<id>/apply` | Sets session current profile to `<id>`. |
+| POST | `/profiles/<id>/clone` | Clone profile (tabs, palettes, presets). Body may include `name`. |
+| PUT | `/profiles/current` | Update the current profile (from session). |
+| PUT | `/profiles/<id>` | Update profile by id. |
+| DELETE | `/profiles/<id>` | Delete profile. |
+
+### Presets — `/presets`
+
+Scoped to **current profile** in session (see above).
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/presets` | Map of preset id → preset object for the current profile only. |
+| GET | `/presets/<id>` | One preset, 404 if missing or wrong profile. |
+| POST | `/presets` | Create preset; server assigns id and sets `profile_id`. Body fields stored on the preset. Returns `{ "<id>": { ... } }`, 201. |
+| PUT | `/presets/<id>` | Update preset (must belong to current profile). |
+| DELETE | `/presets/<id>` | Delete preset. |
+| POST | `/presets/send` | Push presets to the LED driver over the configured transport (see below). |
+
+**`POST /presets/send` body:**
+
+```json
+{
+  "preset_ids": ["1", "2"],
+  "save": true,
+  "default": "1",
+  "destination_mac": "aabbccddeeff"
+}
+```
+
+- **`preset_ids`** (or **`ids`**): non-empty list of preset ids to include.
+- **`save`**: if true, the outgoing message includes `"save": true` so the driver may persist presets (default true).
+- **`default`**: optional preset id string; forwarded as top-level `"default"` in the driver message (startup selection on device).
+- **`destination_mac`** (or **`to`**): optional 12-character hex MAC for unicast; omitted uses the transport default (e.g. broadcast).
+
+Response on success includes `presets_sent`, `messages_sent` (chunking splits payloads so each JSON string stays ≤ 240 bytes).
+
+Stored preset records can include:
+
+- `colors`: resolved hex colours for editor/display.
+- `palette_refs`: optional array of palette indexes parallel to `colors`. If a slot contains an integer index, the colour is linked to the current profile palette at that index.
+
+### Tabs — `/tabs`
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/tabs` | `tabs`, `tab_order`, `current_tab_id`, `profile_id` for the session-backed profile. |
+| GET | `/tabs/current` | Current tab from cookie/session. |
+| POST | `/tabs` | Create tab; optional JSON `name`, `names`, `presets`; can append to current profile’s tab list. |
+| GET | `/tabs/<id>` | Tab JSON. |
+| PUT | `/tabs/<id>` | Update tab. |
+| DELETE | `/tabs/<id>` | Delete tab; can delete `current` to remove the active tab; updates profile tab list. |
+| POST | `/tabs/<id>/set-current` | Sets `current_tab` cookie. |
+| POST | `/tabs/<id>/clone` | Clone tab into current profile. |
+
+### Palettes — `/palettes`
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/palettes` | Map of id → colour list. |
+| GET | `/palettes/<id>` | `{"colors": [...], "id": "<id>"}` |
+| POST | `/palettes` | Body may include `colors`. Returns palette object with `id`, 201. |
+| PUT | `/palettes/<id>` | Update colours (`name` ignored). |
+| DELETE | `/palettes/<id>` | Delete palette. |
+
+### Groups — `/groups`
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/groups` | All groups. |
+| GET | `/groups/<id>` | One group. |
+| POST | `/groups` | Create; optional `name` and fields. |
+| PUT | `/groups/<id>` | Update. |
+| DELETE | `/groups/<id>` | Delete. |
+
+### Scenes — `/scenes`
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/scenes` | All scenes. |
+| GET | `/scenes/<id>` | One scene. |
+| POST | `/scenes` | Create (body JSON stored on scene). |
+| PUT | `/scenes/<id>` | Update. |
+| DELETE | `/scenes/<id>` | Delete. |
+
+### Sequences — `/sequences`
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/sequences` | All sequences. |
+| GET | `/sequences/<id>` | One sequence. |
+| POST | `/sequences` | Create; may use `group_name`, `presets` in body. |
+| PUT | `/sequences/<id>` | Update. |
+| DELETE | `/sequences/<id>` | Delete. |
+
+### Patterns — `/patterns`
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/patterns/definitions` | Contents of `pattern.json` (pattern metadata for the UI). |
+| GET | `/patterns` | All pattern records. |
+| GET | `/patterns/<id>` | One pattern. |
+| POST | `/patterns` | Create (`name`, optional `data`). |
+| PUT | `/patterns/<id>` | Update. |
+| DELETE | `/patterns/<id>` | Delete. |
+
+---
+
+## LED driver message format (transport / ESP-NOW)
+
+Messages are JSON objects. The Pi **`build_message()`** helper (`src/util/espnow_message.py`) produces the same shape sent over serial and forwarded by the ESP32 bridge.
+
+### Top-level fields
+
+```json
+{
+  "v": "1",
+  "presets": { },
+  "select": { },
+  "save": true,
+  "default": "preset_id",
+  "b": 255
+}
+```
+
+- **`v`** (required): Must be `"1"` or the driver ignores the message.
+- **`presets`**: Map of **preset id** (string) → preset object (see below). Optional **`name`** field on each value is accepted for display; the driver keys presets by map key.
+- **`select`**: Map of **device name** (as in device settings) → `[ "preset_id" ]` or `[ "preset_id", step ]`.
+- **`save`**: If present (e.g. true), the driver may persist presets to flash after applying.
+- **`default`**: Preset id string to use as startup default on the device.
+- **`b`**: Optional **global** brightness 0–255 (driver applies this in addition to per-preset brightness).
+
+### Preset object (wire / driver keys)
+
+On the wire, presets use **short keys** (saves space in the ≤240-byte chunks):
+
+| Key | Meaning | Notes |
+|-----|---------|--------|
+| `p` | Pattern id | `off`, `on`, `blink`, `rainbow`, `pulse`, `transition`, `chase`, `circle` |
+| `c` | Colours | Array of `"#RRGGBB"` hex strings; converted to RGB on device |
+| `d` | Delay ms | Default 100 |
+| `b` | Preset brightness | 0–255; combined with global `b` on the device |
+| `a` | Auto | `true`: run continuously; `false`: one step/cycle per “beat” |
+| `n1`–`n6` | Pattern parameters | See below |
+
+The HTTP app’s **`POST /presets/send`** path builds this from stored presets via **`build_preset_dict()`** (long names like `pattern` / `colors` in the DB are translated to `p` / `c` / …).
+
+### Pattern-specific parameters (`n1`–`n6`)
+
+#### Rainbow
+- **`n1`**: Step increment on the colour wheel per update (default 1).
+
+#### Pulse
+- **`n1`**: Attack (fade in) ms  
+- **`n2`**: Hold ms  
+- **`n3`**: Decay (fade out) ms  
+- **`d`**: Off time between pulses ms  
+
+#### Transition
+- **`d`**: Transition duration ms  
+
+#### Chase
+- **`n1`**: LEDs with first colour  
+- **`n2`**: LEDs with second colour  
+- **`n3`**: Movement on even steps (may be negative)  
+- **`n4`**: Movement on odd steps (may be negative)  
+
+#### Circle
+- **`n1`**: Head speed (LEDs/s)  
+- **`n2`**: Max length  
+- **`n3`**: Tail speed (LEDs/s)  
+- **`n4`**: Min length  
+
+### Select messages
+
+```json
+{
+  "select": {
+    "device_name": ["preset_id"],
+    "other_device": ["preset_id", 10]
+  }
+}
+```
+
+- One element: select preset; step behavior follows driver rules (reset on `off`, etc.).
+- Two elements: explicit **step** for sync.
+
+### Beat and sync behavior
+
+- Sending **`select`** again with the **same** preset name acts as a **beat** (advances manual patterns / restarts generators per driver logic).
+- Choosing **`off`** resets step as a sync point; then selecting a pattern aligns step 0 across devices unless a step is passed explicitly.
+
+### Example (compact preset map)
+
+```json
+{
+  "v": "1",
+  "save": true,
+  "presets": {
+    "1": {
+      "name": "Red blink",
+      "p": "blink",
+      "c": ["#FF0000"],
+      "d": 200,
+      "b": 255,
+      "a": true,
+      "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0
+    }
+  },
+  "select": {
+    "living-room": ["1"]
+  }
+}
+```
+
+---
+
+## Processing summary (driver)
+
+1. Reject if `v != "1"`.
+2. Apply optional top-level **`b`** (global brightness).
+3. For each entry in **`presets`**, normalize colours and upsert preset by id.
+4. If this device’s **`name`** appears in **`select`**, run selection (optional step).
+5. If **`default`** is set, store startup preset id.
+6. If **`save`** is set, persist presets.
+
+---
+
+## Error handling (HTTP)
+
+Controllers typically return JSON with an **`error`** string and 4xx/5xx status codes. Invalid JSON bodies often yield `{"error": "Invalid JSON"}`.
+
+---
+
+## Notes
+
+- **Human-readable preset fields** (`pattern`, `colors`, `delay`, …) are fine in the **web app / database**; the **send path** converts them to **`p` / `c` / `d`** for the driver.
+- For a copy of the older long-key reference, see **`led-driver/docs/API.md`** in this repo (conceptually the same behavior; wire format prefers short keys).
--- a/docs/SPECIFICATION.md
+++ b/docs/SPECIFICATION.md
--- a/docs/help.md
+++ b/docs/help.md
@@ -0,0 +1,112 @@
+# LED controller — user guide
+
+This page describes the **main web UI** served from the Raspberry Pi app: profiles, tabs, presets, colour palettes, and sending commands to LED devices over the serial → ESP-NOW bridge.
+
+For HTTP routes and the wire format the driver expects, see **[API.md](API.md)**. For running the app locally, see the project **README**.
+
+Figures below are **schematic** (layout and ideas), not pixel-perfect screenshots.
+
+---
+
+## Run mode and Edit mode
+
+The header has a mode toggle (desktop and mobile menu). The **label on the button is the mode you switch to** when you press it.
+
+![Schematic: tab buttons on the left; Profiles, Tabs, Presets, Patterns, and the mode toggle on the right (example shows Edit mode with “Run mode” on the button).](images/help/header-toolbar.svg)
+
+*The active tab is highlighted. Extra management buttons appear only in Edit mode.*
+
+| Mode | Purpose |
+|------|--------|
+| **Run mode** | Day-to-day control: choose a tab, tap presets, apply profiles. Management buttons are hidden. |
+| **Edit mode** | Full setup: tabs, presets, patterns, colour palette, **Send Presets**, profile create/clone/delete, preset reordering, and per-tile **Edit** on the strip. |
+
+**Profiles** is available in both modes: in Run mode you can only **apply** a profile; in Edit mode you can also **create**, **clone**, and **delete** profiles.
+
+---
+
+## Tabs
+
+- **Select a tab**: click its button in the top bar. The main area shows that tab’s preset strip and controls.
+- **Edit mode — open tab settings**: **right-click** a tab button to change its name, **device IDs** (comma-separated), and which presets appear on the tab. Device identifiers are matched to each device’s **name** when the app builds `select` messages for the driver.
+- **Tabs modal** (Edit mode): create new tabs from the header **Tabs** button. New tabs need a name and device ID list (defaults to `1` if you leave a simple placeholder).
+- **Brightness slider** (per tab): adjusts **global** brightness sent to devices (`b` in the driver message), with a short debounce so small drags do not flood the link.
+
+---
+
+## Presets on the tab strip
+
+- **Run and Edit mode**: click the **main part** of a preset tile to **select** that preset on all devices assigned to the current tab (same logical action as a `select` in the driver API).
+- **Edit mode only**:
+  - **Edit** beside a tile opens the preset editor for that preset, scoped to the current tab (so you can **Remove from tab** without deleting the preset from the profile).
+  - **Drag and drop** tiles to reorder them; order is saved for that tab.
+
+![Schematic: tab title, brightness slider, and a row of preset tiles; Edit mode adds an Edit control and drag handles for reordering.](images/help/tab-preset-strip.svg)
+
+*The slider controls global brightness for the tab’s devices. Click the coloured area of a tile to select that preset.*
+
+The **Presets** header button (Edit mode) opens a **profile-wide** list: **Add** new presets, **Edit**, **Send** (push definition over the transport), and **Delete** (removes the preset from the profile entirely).
+
+---
+
+## Preset editor
+
+- **Pattern**: chosen from the dropdown; optional **n1–n8** fields depend on the pattern (see **Pattern-specific parameters** in [API.md](API.md)).
+- **Colours**: choosing a value in the colour picker **adds** a swatch when the picker closes. Swatches can be **reordered** by dragging. Changing a swatch with the picker **clears** palette linkage for that slot.
+- **From Palette**: inserts a colour **linked** to the current profile’s palette. Linked slots show a **P** badge; if you change that palette entry later, presets using it update.
+- **Brightness (0–255)** and **Delay (ms)**: stored on the preset and sent with the compact preset payload.
+- **Try**: sends the current form values to devices on the **current tab**, then selects that preset — **without** `save` on the device (good for auditioning).
+- **Default**: updates the tab’s **default preset** and sends a **default** hint for those devices; it does not force the same live selection behaviour as clicking a tile.
+- **Save & Send**: writes the preset to the server, then pushes definitions with **save** so devices may persist them. It does **not** auto-select the preset on devices (use the strip or **Try** if you want that).
+- **Remove from tab** (when you opened the editor from a tab): removes the preset from **this tab’s list only**; the preset remains in the profile for other tabs.
+
+![Schematic: preset editor with name, pattern, colour swatches (one with a P badge for palette-linked), and action buttons.](images/help/preset-editor.svg)
+
+*Try previews without persisting on the device; **Save & Send** stores the preset and pushes definitions with save.*
+
+---
+
+## Profiles
+
+- **Apply**: sets the **current profile** in your session. Tabs and presets you see are scoped to that profile.
+- **Edit mode — Create**: new profiles always get a populated **default** tab. Optionally tick **DJ tab** to also create a `dj` tab (device name `dj`) with starter DJ-oriented presets.
+- **Clone** / **Delete**: available in Edit mode from the profile list.
+
+---
+
+## Send Presets (Edit mode)
+
+**Send Presets** walks **every tab** in the **current profile**, collects each tab’s preset IDs, and calls **`POST /presets/send`** per tab (including each tab’s **default** preset when set). Use this to bulk-push definitions to hardware after editing, without clicking **Send** on every preset individually.
+
+---
+
+## Patterns
+
+The **Patterns** dialog (Edit mode) is a **read-only reference**: pattern names and typical **delay** ranges from the pattern definitions. It does not change device behaviour by itself; patterns are chosen inside the preset editor.
+
+---
+
+## Colour palette
+
+**Colour Palette** (Edit mode) edits the **current profile’s** palette swatches. Those colours are reused by **From Palette** in the preset editor and stay in sync while the **P** link remains.
+
+![Schematic: palette modal with a row of swatches for the current profile.](images/help/colour-palette.svg)
+
+*Add or change swatches here; linked preset colours update automatically.*
+
+---
+
+## Mobile layout
+
+On narrow screens, use **Menu** to reach the same actions as the desktop header (Profiles, Tabs, Presets, Help, mode toggle, etc.).
+
+![Schematic: narrow layout with Menu and the same header actions in a dropdown.](images/help/mobile-menu.svg)
+
+*Preset tiles behave the same once a tab is selected.*
+
+---
+
+## Further reading
+
+- **[API.md](API.md)** — REST routes, session scoping, WebSocket `/ws`, and LED driver JSON (`presets`, `select`, `save`, `default`, pattern keys).
+- **README** — `pipenv run run`, port 80 setup, and high-level behaviour.
--- a/docs/help.pdf
+++ b/docs/help.pdf
--- a/docs/images/help/colour-palette.svg
+++ b/docs/images/help/colour-palette.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 140" width="480" height="140">
+  <title>Colour Palette modal (concept)</title>
+  <rect width="480" height="140" fill="#2a2a2a" stroke="#555" stroke-width="1" rx="6"/>
+  <text x="20" y="28" fill="#fff" font-family="sans-serif" font-size="15" font-weight="600">Colour Palette</text>
+  <text x="20" y="48" fill="#888" font-family="sans-serif" font-size="10">Profile: current profile name</text>
+  <rect x="20" y="58" width="44" height="44" rx="4" fill="#e53935" stroke="#333"/>
+  <rect x="72" y="58" width="44" height="44" rx="4" fill="#fdd835" stroke="#333"/>
+  <rect x="124" y="58" width="44" height="44" rx="4" fill="#43a047" stroke="#333"/>
+  <rect x="176" y="58" width="44" height="44" rx="4" fill="#1e88e5" stroke="#333"/>
+  <rect x="228" y="58" width="44" height="44" rx="4" fill="#8e24aa" stroke="#333"/>
+  <rect x="280" y="70" width="36" height="28" rx="3" fill="#1a1a1a" stroke="#666"/>
+  <text x="288" y="88" fill="#ccc" font-family="sans-serif" font-size="10">+</text>
+  <text x="20" y="122" fill="#aaa" font-family="sans-serif" font-size="10">Swatches belong to the profile; preset editor uses them via From Palette.</text>
+</svg>
--- a/docs/images/help/header-toolbar.svg
+++ b/docs/images/help/header-toolbar.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 108" width="820" height="108">
+  <title>Header: tab buttons and action bar</title>
+  <rect width="820" height="108" fill="#1a1a1a"/>
+  <rect x="0" y="106" width="820" height="2" fill="#4a4a4a"/>
+  <text x="16" y="28" fill="#888" font-family="sans-serif" font-size="11">Tabs</text>
+  <rect x="16" y="40" width="72" height="36" rx="4" fill="#333" stroke="#666" stroke-width="1"/>
+  <text x="34" y="63" fill="#ccc" font-family="sans-serif" font-size="13">default</text>
+  <rect x="96" y="40" width="88" height="36" rx="4" fill="#2a4a7a" stroke="#5a8fd4" stroke-width="2"/>
+  <text x="108" y="63" fill="#fff" font-family="sans-serif" font-size="13">lounge</text>
+  <rect x="192" y="40" width="56" height="36" rx="4" fill="#333" stroke="#666" stroke-width="1"/>
+  <text x="204" y="63" fill="#ccc" font-family="sans-serif" font-size="13">dj</text>
+  <text x="380" y="28" fill="#888" font-family="sans-serif" font-size="11">Actions (Edit mode)</text>
+  <rect x="380" y="40" width="72" height="30" rx="3" fill="#3d3d3d" stroke="#555" stroke-width="1"/>
+  <text x="396" y="59" fill="#e0e0e0" font-family="sans-serif" font-size="11">Profiles</text>
+  <rect x="458" y="40" width="52" height="30" rx="3" fill="#3d3d3d" stroke="#555" stroke-width="1"/>
+  <text x="470" y="59" fill="#e0e0e0" font-family="sans-serif" font-size="11">Tabs</text>
+  <rect x="516" y="40" width="64" height="30" rx="3" fill="#3d3d3d" stroke="#555" stroke-width="1"/>
+  <text x="524" y="59" fill="#e0e0e0" font-family="sans-serif" font-size="11">Presets</text>
+  <rect x="586" y="40" width="78" height="30" rx="3" fill="#3d3d3d" stroke="#555" stroke-width="1"/>
+  <text x="598" y="59" fill="#e0e0e0" font-family="sans-serif" font-size="11">Patterns</text>
+  <rect x="670" y="40" width="134" height="30" rx="3" fill="#4a4a6a" stroke="#7a7aaf" stroke-width="1"/>
+  <text x="688" y="59" fill="#e0e0e0" font-family="sans-serif" font-size="11">Run mode</text>
+  <text x="16" y="98" fill="#aaa" font-family="sans-serif" font-size="10">Active tab highlighted. Mode button shows the mode you switch to next.</text>
+</svg>
--- a/docs/images/help/mobile-menu.svg
+++ b/docs/images/help/mobile-menu.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 340" width="300" height="340" role="img" aria-labelledby="t">
+  <title id="t">Narrow screen: Menu aggregates header actions</title>
+  <rect width="300" height="340" fill="#2e2e2e"/>
+  <rect x="0" y="0" width="300" height="52" fill="#1a1a1a"/>
+  <rect x="12" y="12" width="56" height="28" rx="4" fill="#3d3d3d" stroke="#555" stroke-width="1"/>
+  <text x="22" y="30" fill="#eee" font-family="DejaVu Sans, Liberation Sans, Arial, sans-serif" font-size="12">Menu <20></text>
+  <rect x="76" y="14" width="52" height="24" rx="4" fill="#333" stroke="#666" stroke-width="1"/>
+  <text x="86" y="30" fill="#ccc" font-family="DejaVu Sans, Liberation Sans, Arial, sans-serif" font-size="11">tab</text>
+  <rect x="136" y="14" width="52" height="24" rx="4" fill="#2a4a7a" stroke="#5a8fd4" stroke-width="1"/>
+  <text x="142" y="30" fill="#fff" font-family="DejaVu Sans, Liberation Sans, Arial, sans-serif" font-size="11">tab</text>
+  <rect x="12" y="60" width="276" height="168" rx="4" fill="#252525" stroke="#4a4a4a" stroke-width="1"/>
+  <text x="24" y="84" fill="#888" font-family="DejaVu Sans, Liberation Sans, Arial, sans-serif" font-size="10">Dropdown (same actions as desktop header)</text>
+  <g font-family="DejaVu Sans, Liberation Sans, Arial, sans-serif" font-size="12" fill="#e8e8e8">
+    <text x="24" y="108">Run mode</text>
+    <text x="24" y="132">Profiles</text>
+    <text x="24" y="156">Tabs</text>
+    <text x="24" y="180">Presets</text>
+    <text x="24" y="204">Help</text>
+  </g>
+  <rect x="12" y="240" width="276" height="80" rx="6" fill="#222" stroke="#444" stroke-width="1"/>
+  <text x="24" y="268" fill="#aaa" font-family="DejaVu Sans, Liberation Sans, Arial, sans-serif" font-size="10">Content area  presets as on desktop</text>
+  <rect x="24" y="278" width="80" height="32" rx="4" fill="#333" stroke="#555"/>
+  <text x="36" y="298" fill="#ddd" font-family="DejaVu Sans, Liberation Sans, Arial, sans-serif" font-size="11">preset</text>
+  <rect x="112" y="278" width="80" height="32" rx="4" fill="#333" stroke="#555"/>
+  <text x="124" y="298" fill="#ddd" font-family="DejaVu Sans, Liberation Sans, Arial, sans-serif" font-size="11">preset</text>
+</svg>
--- a/docs/images/help/preset-editor.svg
+++ b/docs/images/help/preset-editor.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 400" width="520" height="400">
+  <title>Preset editor modal (simplified)</title>
+  <rect width="520" height="400" fill="#1e1e1e"/>
+  <rect x="40" y="28" width="440" height="344" rx="8" fill="#2a2a2a" stroke="#555" stroke-width="1"/>
+  <text x="60" y="58" fill="#fff" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="17" font-weight="600">Preset</text>
+  <text x="60" y="86" fill="#aaa" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="11">Name</text>
+  <rect x="60" y="92" width="200" height="28" rx="3" fill="#1a1a1a" stroke="#444" stroke-width="1"/>
+  <text x="72" y="111" fill="#ddd" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="12">evening glow</text>
+  <text x="280" y="86" fill="#aaa" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="11">Pattern</text>
+  <rect x="280" y="92" width="160" height="28" rx="3" fill="#1a1a1a" stroke="#444" stroke-width="1"/>
+  <text x="292" y="111" fill="#ddd" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="12">pulse</text>
+  <text x="60" y="148" fill="#aaa" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="11">Colours</text>
+  <rect x="60" y="156" width="48" height="48" rx="4" fill="#7e57c2" stroke="#333" stroke-width="1"/>
+  <circle cx="66" cy="162" r="8" fill="#3f51b5" stroke="#fff" stroke-width="1"/>
+  <text x="63" y="166" fill="#fff" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="7" font-weight="700">P</text>
+  <rect x="116" y="156" width="48" height="48" rx="4" fill="#26a69a" stroke="#333" stroke-width="1"/>
+  <text x="176" y="184" fill="#888" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="10">P = palette-linked</text>
+  <text x="60" y="232" fill="#aaa" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="11">Brightness, delay, n1-n8</text>
+  <rect x="60" y="238" width="120" height="24" rx="3" fill="#1a1a1a" stroke="#444" stroke-width="1"/>
+  <text x="68" y="254" fill="#888" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="11">0-255</text>
+  <text x="60" y="290" fill="#aaa" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="10">Actions</text>
+  <rect x="60" y="298" width="44" height="26" rx="3" fill="#444" stroke="#666" stroke-width="1"/>
+  <text x="72" y="315" fill="#eee" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="11">Try</text>
+  <rect x="112" y="298" width="56" height="26" rx="3" fill="#444" stroke="#666" stroke-width="1"/>
+  <text x="120" y="315" fill="#eee" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="11">Default</text>
+  <rect x="176" y="298" width="88" height="26" rx="3" fill="#3d5a80" stroke="#5a7ab8" stroke-width="1"/>
+  <text x="188" y="315" fill="#fff" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="11">Save+Send</text>
+  <rect x="272" y="298" width="48" height="26" rx="3" fill="#444" stroke="#666" stroke-width="1"/>
+  <text x="284" y="315" fill="#eee" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="11">Close</text>
+  <text x="60" y="352" fill="#888" font-family="DejaVu Sans,Liberation Sans,Arial,sans-serif" font-size="9">Try: preview without device save. Save+Send: store and push with save.</text>
+</svg>
--- a/docs/images/help/tab-preset-strip.svg
+++ b/docs/images/help/tab-preset-strip.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 220" width="800" height="220">
+  <title>Main area: brightness and preset tiles</title>
+  <defs>
+    <linearGradient id="rg1" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#ffd54f"/><stop offset="100%" style="stop-color:#fff8e1"/>
+    </linearGradient>
+    <linearGradient id="rg2" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#e53935"/><stop offset="33%" style="stop-color:#fdd835"/>
+      <stop offset="66%" style="stop-color:#43a047"/><stop offset="100%" style="stop-color:#1e88e5"/>
+    </linearGradient>
+    <linearGradient id="rg3" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#00897b"/><stop offset="100%" style="stop-color:#4db6ac"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="220" fill="#2e2e2e"/>
+  <text x="20" y="32" fill="#fff" font-family="sans-serif" font-size="16" font-weight="600">lounge</text>
+  <text x="20" y="56" fill="#aaa" font-family="sans-serif" font-size="11">Brightness (global)</text>
+  <rect x="20" y="64" width="320" height="8" rx="4" fill="#444"/>
+  <rect x="20" y="64" width="200" height="8" rx="4" fill="#6a9ee2"/>
+  <circle cx="220" cy="68" r="10" fill="#ccc" stroke="#333" stroke-width="1"/>
+  <text x="360" y="74" fill="#888" font-family="sans-serif" font-size="11">drag to adjust</text>
+  <text x="20" y="108" fill="#aaa" font-family="sans-serif" font-size="11">Click tile body to select on tab devices</text>
+  <rect x="20" y="118" width="200" height="72" rx="6" fill="#252525" stroke="#555" stroke-width="1"/>
+  <rect x="28" y="128" width="184" height="36" rx="4" fill="url(#rg1)"/>
+  <text x="32" y="180" fill="#eee" font-family="sans-serif" font-size="13" font-weight="600">warm white</text>
+  <rect x="232" y="118" width="200" height="72" rx="6" fill="#252525" stroke="#6a9ee2" stroke-width="2"/>
+  <rect x="240" y="128" width="184" height="36" rx="4" fill="url(#rg2)"/>
+  <text x="244" y="180" fill="#eee" font-family="sans-serif" font-size="13" font-weight="600">rainbow</text>
+  <rect x="444" y="118" width="200" height="72" rx="6" fill="#252525" stroke="#555" stroke-width="1"/>
+  <rect x="452" y="128" width="184" height="36" rx="4" fill="url(#rg3)"/>
+  <text x="456" y="180" fill="#eee" font-family="sans-serif" font-size="13" font-weight="600">chase</text>
+  <rect x="656" y="130" width="56" height="48" rx="4" fill="#3d3d3d" stroke="#555" stroke-width="1"/>
+  <text x="670" y="158" fill="#ddd" font-family="sans-serif" font-size="11">Edit</text>
+  <text x="656" y="198" fill="#888" font-family="sans-serif" font-size="10">Edit mode: drag tiles to reorder</text>
+</svg>
--- a/docs/mockups/COLOR_PICKER_README.md
+++ b/docs/mockups/COLOR_PICKER_README.md
@@ -0,0 +1,239 @@
+# Custom Colour Picker Component
+
+A cross-platform, cross-browser colour picker component that provides a consistent user experience across all operating systems and browsers.
+
+## Features
+
+✅ **Consistent UI** - Same appearance and behavior on Windows, macOS, Linux, iOS, and Android  
+✅ **Browser Support** - Works in Chrome, Firefox, Safari, Edge, Opera, and mobile browsers  
+✅ **Touch Support** - Full touch/gesture support for mobile devices  
+✅ **HSB Colour Model** - Uses Hue, Saturation, Brightness for intuitive colour selection  
+✅ **Multiple Input Methods** - Hex input, RGB inputs, and visual picker  
+✅ **Accessible** - Keyboard accessible and screen reader friendly  
+✅ **Customizable** - Easy to style and integrate  
+
+## Files
+
+- `color-picker.js` - Main JavaScript component (14KB)
+- `color-picker.css` - Stylesheet (4KB)
+- `color-picker-demo.html` - Demo page showing usage examples
+
+## Quick Start
+
+### 1. Include the files
+
+```html
+<link rel="stylesheet" href="color-picker.css">
+<script src="color-picker.js"></script>
+```
+
+### 2. Create a container element
+
+```html
+<div id="my-color-picker"></div>
+```
+
+### 3. Initialize the colour picker
+
+```javascript
+const picker = new ColorPicker('#my-color-picker', {
+    initialColor: '#FF0000',
+    onColorChange: (color) => {
+        console.log('Color changed to:', color);
+    }
+});
+```
+
+## API
+
+### Constructor
+
+```javascript
+new ColorPicker(container, options)
+```
+
+**Parameters:**
+- `container` (string|HTMLElement) - CSS selector or DOM element
+- `options` (object) - Configuration options
+
+**Options:**
+- `initialColor` (string) - Initial colour in hex format (default: '#FF0000')
+- `onColorChange` (function) - Callback when colour changes (receives hex colour string)
+- `showHexInput` (boolean) - Show hex input field (default: true)
+
+### Methods
+
+```javascript
+// Get current color
+const color = picker.getColor(); // Returns hex string like '#FF0000'
+
+// Set color programmatically
+picker.setColor('#00FF00');
+
+// Open the picker panel
+picker.open();
+
+// Close the picker panel
+picker.close();
+
+// Toggle the picker panel
+picker.toggle();
+```
+
+## Usage Examples
+
+### Basic Usage
+
+```javascript
+const picker = new ColorPicker('#picker1', {
+    initialColor: '#FF0000'
+});
+```
+
+### With Callback
+
+```javascript
+const picker = new ColorPicker('#picker1', {
+    initialColor: '#FF0000',
+    onColorChange: (color) => {
+        document.body.style.backgroundColor = color;
+    }
+});
+```
+
+### Multiple Colour Pickers
+
+```javascript
+const colors = ['#FF0000', '#00FF00', '#0000FF'];
+const pickers = colors.map((color, index) => {
+    return new ColorPicker(`#picker-${index}`, {
+        initialColor: color,
+        onColorChange: (newColor) => {
+            colors[index] = newColor;
+            updateLEDColors(colors);
+        }
+    });
+});
+```
+
+### Dynamic Colour Picker Creation
+
+```javascript
+function addColorPicker(containerId, initialColor = '#000000') {
+    const container = document.createElement('div');
+    container.id = containerId;
+    document.getElementById('color-list').appendChild(container);
+    
+    return new ColorPicker(container, {
+        initialColor: initialColor,
+        onColorChange: (color) => {
+            console.log(`Color ${containerId} changed to ${color}`);
+        }
+    });
+}
+
+// Add multiple pickers
+addColorPicker('color-1', '#FF0000');
+addColorPicker('color-2', '#00FF00');
+```
+
+## Styling
+
+The colour picker uses CSS classes that can be customized:
+
+- `.color-picker-container` - Main container
+- `.color-picker-preview` - Colour preview button
+- `.color-picker-panel` - Dropdown panel
+- `.color-picker-main` - Main colour area
+- `.color-picker-hue` - Hue slider
+- `.color-picker-controls` - Controls section
+
+### Custom Styling Example
+
+```css
+.color-picker-preview {
+    width: 80px;
+    height: 80px;
+    border-radius: 12px;
+}
+
+.color-picker-panel {
+    background: #2d3748;
+    border-color: #4a5568;
+}
+```
+
+## Browser Compatibility
+
+| Browser | Version | Status |
+|---------|---------|--------|
+| Chrome | 60+ | ✅ Full support |
+| Firefox | 55+ | ✅ Full support |
+| Safari | 12+ | ✅ Full support |
+| Edge | 79+ | ✅ Full support |
+| Opera | 47+ | ✅ Full support |
+| Mobile Safari | iOS 12+ | ✅ Full support |
+| Chrome Mobile | Android 7+ | ✅ Full support |
+
+## Operating System Compatibility
+
+- ✅ Windows 10/11
+- ✅ macOS 10.14+
+- ✅ Linux (all major distributions)
+- ✅ iOS 12+
+- ✅ Android 7+
+
+## Colour Format
+
+The colour picker uses **hex colour format** (`#RRGGBB`):
+- Always returns uppercase hex strings (e.g., `#FF0000`)
+- Accepts both uppercase and lowercase input
+- Automatically validates hex format
+
+## Integration with LED Driver Mockups
+
+The colour picker is integrated into:
+- `dashboard.html` - Colour selection for patterns
+- `presets.html` - Colour selection when creating/editing presets
+
+### Example: Getting Colours from Multiple Pickers
+
+```javascript
+const colorPickers = [];
+
+function getSelectedColors() {
+    return colorPickers.map(picker => picker.getColor());
+}
+
+function sendColorsToDevice() {
+    const colors = getSelectedColors();
+    // Send to LED device via API
+    fetch('/api/colors', {
+        method: 'POST',
+        body: JSON.stringify({ colors: colors })
+    });
+}
+```
+
+## Performance
+
+- Lightweight: ~14KB JavaScript, ~4KB CSS
+- Fast rendering: Uses Canvas API for colour gradients
+- Smooth interactions: Optimized event handling
+- Memory efficient: No external dependencies
+
+## Accessibility
+
+- Keyboard navigation support
+- ARIA labels on interactive elements
+- High contrast cursor indicators
+- Screen reader compatible
+
+## License
+
+Part of the LED Driver project. Use freely in your projects.
+
+## Demo
+
+See `color-picker-demo.html` for a live demonstration of the colour picker component.
+
--- a/docs/mockups/README.md
+++ b/docs/mockups/README.md
@@ -0,0 +1,56 @@
+# UI Mockups
+
+This directory contains HTML mockups and generated images for the LED Driver user interface.
+
+## Files
+
+### HTML Mockups
+- **index.html** - Navigation page linking to all mockups
+- **dashboard.html** - Main control panel for managing LED patterns and devices
+- **pattern-selector.html** - Visual pattern selection interface
+- **device-management.html** - Device and group management interface
+- **settings.html** - Comprehensive settings configuration panel
+
+### Generated Images
+Images are automatically generated in the `images/` directory:
+- `dashboard.png`
+- `pattern-selector.png`
+- `device-management.png`
+- `settings.png`
+- `index.png`
+
+## Generating Images
+
+To generate images from the HTML files, use the provided script:
+
+```bash
+# Install dependencies (if not already installed)
+pipenv install playwright
+pipenv run playwright install chromium
+
+# Generate images
+pipenv run python generate_images.py
+```
+
+The script will:
+1. Check for available screenshot libraries (Playwright, Selenium, or html2image)
+2. Generate PNG images from all HTML files
+3. Save images to the `images/` directory
+
+### Requirements
+
+The script supports multiple screenshot libraries (in order of preference):
+1. **Playwright** (recommended) - `pip install playwright && playwright install chromium`
+2. **Selenium** - `pip install selenium` (requires ChromeDriver)
+3. **html2image** - `pip install html2image`
+
+## Viewing Mockups
+
+Simply open any HTML file in a web browser to view the mockup. Start with `index.html` for navigation to all mockups.
+
+## Notes
+
+- All mockups are responsive and work on desktop and mobile devices
+- The mockups use modern CSS with gradients and smooth animations
+- Interactive elements (buttons, sliders, etc.) are functional in the HTML but are mockups (no backend connection)
+
--- a/docs/mockups/color-picker-chromium-demo.html
+++ b/docs/mockups/color-picker-chromium-demo.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chromium Color Picker Demo</title>
+    <link rel="stylesheet" href="color-picker-chromium.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Roboto+Mono&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 40px 20px;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 12px;
+            padding: 40px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+        }
+
+        h1 {
+            color: #202124;
+            margin-bottom: 8px;
+            font-weight: 400;
+            font-size: 24px;
+        }
+
+        p {
+            color: #5f6368;
+            margin-bottom: 32px;
+            font-size: 14px;
+        }
+
+        .demo-section {
+            margin-bottom: 40px;
+            padding: 24px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            border: 1px solid #e8eaed;
+        }
+
+        .demo-section h2 {
+            color: #202124;
+            margin-bottom: 16px;
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .color-pickers {
+            display: flex;
+            gap: 24px;
+            flex-wrap: wrap;
+            margin-bottom: 16px;
+        }
+
+        .color-display {
+            margin-top: 16px;
+            padding: 12px;
+            background: white;
+            border-radius: 6px;
+            font-family: 'Roboto Mono', 'Courier New', monospace;
+            font-size: 13px;
+            border: 1px solid #e8eaed;
+        }
+
+        .color-display strong {
+            color: #4285f4;
+        }
+
+        .comparison {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 24px;
+            margin-top: 24px;
+        }
+
+        .comparison-item {
+            padding: 16px;
+            background: white;
+            border-radius: 6px;
+            border: 1px solid #e8eaed;
+        }
+
+        .comparison-item h3 {
+            font-size: 14px;
+            font-weight: 500;
+            color: #202124;
+            margin-bottom: 12px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Chromium-style Color Picker</h1>
+        <p>Color picker that matches the native Chromium browser color picker design</p>
+
+        <div class="demo-section">
+            <h2>Single Color Picker</h2>
+            <div class="color-pickers">
+                <div id="picker1"></div>
+            </div>
+            <div class="color-display">
+                Selected color: <strong id="color1-display">#FF0000</strong>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>Multiple Color Pickers</h2>
+            <p style="margin-bottom: 16px; color: #5f6368; font-size: 14px;">Example: Multiple colors for LED patterns</p>
+            <div class="color-pickers">
+                <div id="picker2"></div>
+                <div id="picker3"></div>
+                <div id="picker4"></div>
+            </div>
+            <div class="color-display">
+                Colors: <strong id="colors-display">#FF0000, #00FF00, #0000FF</strong>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>Features</h2>
+            <ul style="color: #5f6368; line-height: 1.8; font-size: 14px;">
+                <li>✅ Matches native Chromium browser color picker design</li>
+                <li>✅ Clean, minimal interface with native system fonts</li>
+                <li>✅ RGB number inputs (no sliders) - Chromium style</li>
+                <li>✅ Hex input with uppercase formatting</li>
+                <li>✅ HSB (Hue, Saturation, Brightness) color model</li>
+                <li>✅ Touch support for mobile devices</li>
+                <li>✅ Keyboard accessible</li>
+                <li>✅ Dark mode support</li>
+            </ul>
+        </div>
+
+        <div class="demo-section">
+            <h2>Design Notes</h2>
+            <div class="comparison">
+                <div class="comparison-item">
+                    <h3>Chromium Style</h3>
+                    <ul style="color: #5f6368; line-height: 1.8; font-size: 13px; list-style: none; padding-left: 0;">
+                        <li>• RGB number inputs only</li>
+                        <li>• Compact preview button</li>
+                        <li>• Native system fonts</li>
+                        <li>• Minimal borders and shadows</li>
+                        <li>• Chromium color scheme</li>
+                    </ul>
+                </div>
+                <div class="comparison-item">
+                    <h3>Standard Style</h3>
+                    <ul style="color: #5f6368; line-height: 1.8; font-size: 13px; list-style: none; padding-left: 0;">
+                        <li>• RGB sliders + inputs</li>
+                        <li>• Larger preview button</li>
+                        <li>• Custom styling</li>
+                        <li>• Enhanced shadows</li>
+                        <li>• Custom color scheme</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="color-picker-chromium.js"></script>
+    <script>
+        // Initialize Chromium-style color pickers
+        const picker1 = new ColorPickerChromium('#picker1', {
+            initialColor: '#FF0000',
+            onColorChange: (color) => {
+                document.getElementById('color1-display').textContent = color;
+            }
+        });
+
+        const picker2 = new ColorPickerChromium('#picker2', {
+            initialColor: '#FF0000',
+            onColorChange: updateColors
+        });
+
+        const picker3 = new ColorPickerChromium('#picker3', {
+            initialColor: '#00FF00',
+            onColorChange: updateColors
+        });
+
+        const picker4 = new ColorPickerChromium('#picker4', {
+            initialColor: '#0000FF',
+            onColorChange: updateColors
+        });
+
+        function updateColors() {
+            const colors = [
+                picker2.getColor(),
+                picker3.getColor(),
+                picker4.getColor()
+            ];
+            document.getElementById('colors-display').textContent = colors.join(', ');
+        }
+    </script>
+</body>
+</html>
+
--- a/docs/mockups/color-picker-chromium.css
+++ b/docs/mockups/color-picker-chromium.css
@@ -0,0 +1,253 @@
+/* Chromium-style Color Picker - Matches native browser color picker dialog */
+
+.color-picker-container {
+    position: relative;
+    display: inline-block;
+}
+
+/* Preview button - opens the picker */
+.color-picker-preview {
+    width: 40px;
+    height: 32px;
+    border: 1px solid #d0d0d0;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 0;
+    background: none;
+    transition: border-color 0.15s;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.color-picker-preview:hover {
+    border-color: #8ab4f8;
+}
+
+.color-picker-preview:active {
+    border-color: #4285f4;
+}
+
+/* Main picker panel - always visible when open, styled like Chromium dialog */
+.color-picker-panel {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    z-index: 1000;
+    background: #ffffff;
+    border: 1px solid #dadce0;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
+    padding: 16px;
+    min-width: 260px;
+    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-size: 13px;
+}
+
+/* Color area - main saturation/brightness square + hue slider */
+.color-picker-area {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+/* Main color square - saturation (left-right) and brightness (top-bottom) */
+.color-picker-main {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    border: 1px solid #dadce0;
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: crosshair;
+    touch-action: none;
+    background: #ffffff;
+    flex-shrink: 0;
+}
+
+.color-picker-canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+/* Cursor for main color area */
+.color-picker-cursor {
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    top: 0;
+    left: 0;
+}
+
+/* Hue slider - vertical strip on the right */
+.color-picker-hue {
+    position: relative;
+    width: 24px;
+    height: 200px;
+    border: 1px solid #dadce0;
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: pointer;
+    touch-action: none;
+    background: #ffffff;
+    flex-shrink: 0;
+}
+
+/* Hue slider cursor/indicator */
+.color-picker-hue-cursor {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 6px;
+    border: 2px solid #ffffff;
+    border-radius: 2px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
+    pointer-events: none;
+    transform: translateY(-50%);
+    top: 0;
+}
+
+/* Controls section - hex and RGB inputs */
+.color-picker-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+/* Hex input field */
+.color-picker-hex {
+    width: 100%;
+    padding: 7px 10px;
+    border: 1px solid #dadce0;
+    border-radius: 4px;
+    font-family: 'Roboto Mono', 'Courier New', monospace;
+    font-size: 13px;
+    text-transform: uppercase;
+    transition: border-color 0.15s, box-shadow 0.15s;
+    background: #ffffff;
+}
+
+.color-picker-hex:focus {
+    outline: none;
+    border-color: #4285f4;
+    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
+}
+
+/* RGB inputs container */
+.color-picker-rgb {
+    display: flex;
+    gap: 12px;
+    align-items: flex-end;
+}
+
+.color-picker-rgb-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.color-picker-rgb-item label {
+    font-size: 11px;
+    font-weight: 500;
+    color: #5f6368;
+    text-align: left;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* RGB number input fields */
+.color-picker-rgb-input {
+    width: 100%;
+    padding: 7px 10px;
+    border: 1px solid #dadce0;
+    border-radius: 4px;
+    font-size: 13px;
+    text-align: left;
+    transition: border-color 0.15s, box-shadow 0.15s;
+    background: #ffffff;
+    font-family: 'Roboto', sans-serif;
+    -moz-appearance: textfield;
+}
+
+.color-picker-rgb-input::-webkit-outer-spin-button,
+.color-picker-rgb-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.color-picker-rgb-input:focus {
+    outline: none;
+    border-color: #4285f4;
+    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
+}
+
+/* Hide RGB sliders - Chromium uses only number inputs */
+.color-picker-rgb-slider {
+    display: none;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+    .color-picker-panel {
+        left: auto;
+        right: 0;
+    }
+    
+    .color-picker-main {
+        width: 180px;
+        height: 180px;
+    }
+    
+    .color-picker-hue {
+        height: 180px;
+    }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .color-picker-panel {
+        background: #202124;
+        border-color: #5f6368;
+    }
+    
+    .color-picker-preview {
+        border-color: #5f6368;
+    }
+    
+    .color-picker-main,
+    .color-picker-hue {
+        border-color: #5f6368;
+        background: #202124;
+    }
+    
+    .color-picker-hex,
+    .color-picker-rgb-input {
+        background: #303134;
+        border-color: #5f6368;
+        color: #e8eaed;
+    }
+    
+    .color-picker-rgb-item label {
+        color: #9aa0a6;
+    }
+    
+    .color-picker-hex:focus,
+    .color-picker-rgb-input:focus {
+        border-color: #8ab4f8;
+        box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.2);
+    }
+    
+    .color-picker-preview:hover {
+        border-color: #8ab4f8;
+    }
+}
--- a/docs/mockups/color-picker-chromium.js
+++ b/docs/mockups/color-picker-chromium.js
@@ -0,0 +1,452 @@
+/**
+ * Chromium-style Color Picker Component
+ * Matches native Chromium browser color picker design
+ */
+
+class ColorPickerChromium {
+    constructor(container, options = {}) {
+        this.container = typeof container === 'string' ? document.querySelector(container) : container;
+        this.options = {
+            initialColor: options.initialColor || '#FF0000',
+            onColorChange: options.onColorChange || null,
+            showHexInput: options.showHexInput !== false,
+            ...options
+        };
+        this.currentColor = this.options.initialColor;
+        this.isOpen = false;
+        this.init();
+    }
+
+    init() {
+        this.createPicker();
+        this.setupEventListeners();
+        this.updateColor(this.options.initialColor);
+    }
+
+    createPicker() {
+        this.container.innerHTML = '';
+        this.container.className = 'color-picker-container';
+
+        // Color preview button
+        this.previewBtn = document.createElement('button');
+        this.previewBtn.className = 'color-picker-preview';
+        this.previewBtn.type = 'button';
+        this.previewBtn.style.backgroundColor = this.currentColor;
+        this.previewBtn.setAttribute('aria-label', 'Open color picker');
+
+        // Dropdown panel
+        this.panel = document.createElement('div');
+        this.panel.className = 'color-picker-panel';
+        this.panel.style.display = 'none';
+
+        // Main color area (hue/saturation)
+        this.mainArea = document.createElement('div');
+        this.mainArea.className = 'color-picker-main';
+        this.mainCanvas = document.createElement('canvas');
+        this.mainCanvas.width = 200;
+        this.mainCanvas.height = 200;
+        this.mainCanvas.className = 'color-picker-canvas';
+        this.mainArea.appendChild(this.mainCanvas);
+
+        // Main area cursor
+        this.mainCursor = document.createElement('div');
+        this.mainCursor.className = 'color-picker-cursor';
+        this.mainArea.appendChild(this.mainCursor);
+
+        // Hue slider
+        this.hueArea = document.createElement('div');
+        this.hueArea.className = 'color-picker-hue';
+        this.hueCanvas = document.createElement('canvas');
+        this.hueCanvas.width = 24;
+        this.hueCanvas.height = 200;
+        this.hueCanvas.className = 'color-picker-canvas';
+        this.hueArea.appendChild(this.hueCanvas);
+
+        // Hue slider cursor
+        this.hueCursor = document.createElement('div');
+        this.hueCursor.className = 'color-picker-hue-cursor';
+        this.hueArea.appendChild(this.hueCursor);
+
+        // Controls section
+        this.controls = document.createElement('div');
+        this.controls.className = 'color-picker-controls';
+
+        // Hex input
+        if (this.options.showHexInput) {
+            this.hexInput = document.createElement('input');
+            this.hexInput.type = 'text';
+            this.hexInput.className = 'color-picker-hex';
+            this.hexInput.placeholder = '#000000';
+            this.hexInput.maxLength = 7;
+            this.controls.appendChild(this.hexInput);
+        }
+
+        // RGB inputs (Chromium style - no sliders, just number inputs)
+        this.rgbContainer = document.createElement('div');
+        this.rgbContainer.className = 'color-picker-rgb';
+        
+        ['R', 'G', 'B'].forEach((label) => {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'color-picker-rgb-item';
+            wrapper.dataset.channel = label.toLowerCase();
+            
+            const labelEl = document.createElement('label');
+            labelEl.textContent = label;
+            
+            const input = document.createElement('input');
+            input.type = 'number';
+            input.className = 'color-picker-rgb-input';
+            input.min = 0;
+            input.max = 255;
+            input.value = 0;
+            input.dataset.channel = label.toLowerCase();
+            
+            wrapper.appendChild(labelEl);
+            wrapper.appendChild(input);
+            this.rgbContainer.appendChild(wrapper);
+            
+            this[`rgb${label}`] = input;
+        });
+        
+        this.controls.appendChild(this.rgbContainer);
+
+        // Assemble panel
+        const pickerArea = document.createElement('div');
+        pickerArea.className = 'color-picker-area';
+        pickerArea.appendChild(this.mainArea);
+        pickerArea.appendChild(this.hueArea);
+        
+        this.panel.appendChild(pickerArea);
+        this.panel.appendChild(this.controls);
+
+        // Assemble container
+        this.container.appendChild(this.previewBtn);
+        this.container.appendChild(this.panel);
+
+        // Draw canvases
+        this.drawHueCanvas();
+        this.drawMainCanvas(1.0); // Start with full saturation
+    }
+
+    setupEventListeners() {
+        // Toggle panel
+        this.previewBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggle();
+        });
+
+        // Close on outside click
+        document.addEventListener('click', (e) => {
+            if (!this.container.contains(e.target) && this.isOpen) {
+                this.close();
+            }
+        });
+
+        // Main area interaction
+        let isMainDragging = false;
+        this.mainCanvas.addEventListener('mousedown', (e) => {
+            isMainDragging = true;
+            this.handleMainAreaClick(e);
+        });
+        this.mainCanvas.addEventListener('mousemove', (e) => {
+            if (isMainDragging) {
+                this.handleMainAreaClick(e);
+            }
+        });
+        document.addEventListener('mouseup', () => {
+            isMainDragging = false;
+        });
+
+        // Touch support for main area
+        this.mainCanvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            isMainDragging = true;
+            this.handleMainAreaClick(e.touches[0]);
+        });
+        this.mainCanvas.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            if (isMainDragging) {
+                this.handleMainAreaClick(e.touches[0]);
+            }
+        });
+        this.mainCanvas.addEventListener('touchend', () => {
+            isMainDragging = false;
+        });
+
+        // Hue slider interaction
+        let isHueDragging = false;
+        this.hueCanvas.addEventListener('mousedown', (e) => {
+            isHueDragging = true;
+            this.handleHueClick(e);
+        });
+        this.hueCanvas.addEventListener('mousemove', (e) => {
+            if (isHueDragging) {
+                this.handleHueClick(e);
+            }
+        });
+        document.addEventListener('mouseup', () => {
+            isHueDragging = false;
+        });
+
+        // Touch support for hue slider
+        this.hueCanvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            isHueDragging = true;
+            this.handleHueClick(e.touches[0]);
+        });
+        this.hueCanvas.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            if (isHueDragging) {
+                this.handleHueClick(e.touches[0]);
+            }
+        });
+        this.hueCanvas.addEventListener('touchend', () => {
+            isHueDragging = false;
+        });
+
+        // Hex input
+        if (this.hexInput) {
+            this.hexInput.addEventListener('input', (e) => {
+                const value = e.target.value;
+                if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
+                    this.updateColor(value);
+                }
+            });
+            this.hexInput.addEventListener('blur', (e) => {
+                const value = e.target.value;
+                if (!/^#[0-9A-Fa-f]{6}$/.test(value) && value.length > 0) {
+                    e.target.value = this.currentColor;
+                }
+            });
+        }
+
+        // RGB inputs (Chromium style - only number inputs)
+        ['R', 'G', 'B'].forEach(label => {
+            this[`rgb${label}`].addEventListener('input', (e) => {
+                let value = parseInt(e.target.value) || 0;
+                value = Math.max(0, Math.min(255, value)); // Clamp to 0-255
+                e.target.value = value;
+                const r = parseInt(this.rgbR.value) || 0;
+                const g = parseInt(this.rgbG.value) || 0;
+                const b = parseInt(this.rgbB.value) || 0;
+                const hex = this.rgbToHex(r, g, b);
+                this.updateColor(hex, false); // Don't update RGB inputs to avoid loop
+            });
+            
+            this[`rgb${label}`].addEventListener('blur', (e) => {
+                let value = parseInt(e.target.value) || 0;
+                value = Math.max(0, Math.min(255, value));
+                e.target.value = value;
+            });
+        });
+    }
+
+    drawHueCanvas() {
+        const ctx = this.hueCanvas.getContext('2d');
+        const gradient = ctx.createLinearGradient(0, 0, 0, 200);
+        
+        for (let i = 0; i <= 6; i++) {
+            const hue = i * 60;
+            gradient.addColorStop(i / 6, `hsl(${hue}, 100%, 50%)`);
+        }
+        
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, 24, 200);
+    }
+
+    drawMainCanvas(hue) {
+        const ctx = this.mainCanvas.getContext('2d');
+        
+        // Saturation gradient (left to right)
+        const satGradient = ctx.createLinearGradient(0, 0, 200, 0);
+        satGradient.addColorStop(0, `hsl(${hue}, 0%, 50%)`);
+        satGradient.addColorStop(1, `hsl(${hue}, 100%, 50%)`);
+        ctx.fillStyle = satGradient;
+        ctx.fillRect(0, 0, 200, 200);
+        
+        // Brightness gradient (top to bottom)
+        const brightGradient = ctx.createLinearGradient(0, 0, 0, 200);
+        brightGradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
+        brightGradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
+        ctx.fillStyle = brightGradient;
+        ctx.fillRect(0, 0, 200, 200);
+    }
+
+    handleMainAreaClick(e) {
+        const rect = this.mainCanvas.getBoundingClientRect();
+        const x = Math.max(0, Math.min(200, e.clientX - rect.left));
+        const y = Math.max(0, Math.min(200, e.clientY - rect.top));
+        
+        const saturation = x / 200;
+        const brightness = 1 - (y / 200);
+        
+        this.updateColorFromHSB(this.hue, saturation, brightness);
+        this.updateCursor(x, y);
+    }
+
+    handleHueClick(e) {
+        const rect = this.hueCanvas.getBoundingClientRect();
+        const y = Math.max(0, Math.min(200, e.clientY - rect.top));
+        const hue = (y / 200) * 360;
+        
+        this.hue = hue;
+        this.drawMainCanvas(hue);
+        this.updateHueCursor(y);
+        
+        // Recalculate color with new hue
+        const rect2 = this.mainCanvas.getBoundingClientRect();
+        const x = parseFloat(this.mainCursor.style.left) || 0;
+        const y2 = parseFloat(this.mainCursor.style.top) || 0;
+        const saturation = x / 200;
+        const brightness = 1 - (y2 / 200);
+        this.updateColorFromHSB(hue, saturation, brightness);
+    }
+
+    updateColorFromHSB(h, s, v) {
+        const rgb = this.hsbToRgb(h, s, v);
+        const hex = this.rgbToHex(rgb.r, rgb.g, rgb.b);
+        this.updateColor(hex);
+    }
+
+    hsbToRgb(h, s, v) {
+        h = h / 360;
+        const i = Math.floor(h * 6);
+        const f = h * 6 - i;
+        const p = v * (1 - s);
+        const q = v * (1 - f * s);
+        const t = v * (1 - (1 - f) * s);
+        
+        let r, g, b;
+        switch (i % 6) {
+            case 0: r = v; g = t; b = p; break;
+            case 1: r = q; g = v; b = p; break;
+            case 2: r = p; g = v; b = t; break;
+            case 3: r = p; g = q; b = v; break;
+            case 4: r = t; g = p; b = v; break;
+            case 5: r = v; g = p; b = q; break;
+        }
+        
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255)
+        };
+    }
+
+    rgbToHex(r, g, b) {
+        return '#' + [r, g, b].map(x => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        }).join('').toUpperCase();
+    }
+
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    }
+
+    rgbToHsb(r, g, b) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const diff = max - min;
+        
+        let h = 0;
+        if (diff !== 0) {
+            if (max === r) {
+                h = ((g - b) / diff) % 6) * 60;
+            } else if (max === g) {
+                h = ((b - r) / diff + 2) * 60;
+            } else {
+                h = ((r - g) / diff + 4) * 60;
+            }
+        }
+        if (h < 0) h += 360;
+        
+        const s = max === 0 ? 0 : diff / max;
+        const v = max;
+        
+        return { h, s, v };
+    }
+
+    updateColor(hex, updateInputs = true) {
+        this.currentColor = hex.toUpperCase();
+        this.previewBtn.style.backgroundColor = this.currentColor;
+        
+        const rgb = this.hexToRgb(this.currentColor);
+        if (!rgb) return;
+        
+        const hsb = this.rgbToHsb(rgb.r, rgb.g, rgb.b);
+        this.hue = hsb.h;
+        
+        // Update main canvas
+        this.drawMainCanvas(this.hue);
+        
+        // Update cursors
+        const x = hsb.s * 200;
+        const y = (1 - hsb.v) * 200;
+        this.updateCursor(x, y);
+        this.updateHueCursor((this.hue / 360) * 200);
+        
+        // Update inputs
+        if (updateInputs) {
+            if (this.hexInput) {
+                this.hexInput.value = this.currentColor;
+            }
+            if (this.rgbR) {
+                this.rgbR.value = rgb.r;
+                this.rgbG.value = rgb.g;
+                this.rgbB.value = rgb.b;
+            }
+        }
+        
+        // Callback
+        if (this.options.onColorChange) {
+            this.options.onColorChange(this.currentColor);
+        }
+    }
+
+    updateCursor(x, y) {
+        this.mainCursor.style.left = `${x}px`;
+        this.mainCursor.style.top = `${y}px`;
+    }
+
+    updateHueCursor(y) {
+        this.hueCursor.style.top = `${y}px`;
+    }
+
+    toggle() {
+        this.isOpen ? this.close() : this.open();
+    }
+
+    open() {
+        this.panel.style.display = 'block';
+        this.isOpen = true;
+    }
+
+    close() {
+        this.panel.style.display = 'none';
+        this.isOpen = false;
+    }
+
+    getColor() {
+        return this.currentColor;
+    }
+
+    setColor(color) {
+        this.updateColor(color);
+    }
+}
+
+// Export for use in other scripts
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = ColorPickerChromium;
+}
+
--- a/docs/mockups/color-picker-demo.html
+++ b/docs/mockups/color-picker-demo.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Color Picker Demo - Cross-Platform</title>
+    <link rel="stylesheet" href="color-picker.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 40px 20px;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 12px;
+            padding: 40px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+        }
+
+        h1 {
+            color: #667eea;
+            margin-bottom: 8px;
+        }
+
+        p {
+            color: #666;
+            margin-bottom: 32px;
+        }
+
+        .demo-section {
+            margin-bottom: 40px;
+            padding: 24px;
+            background: #f7fafc;
+            border-radius: 8px;
+        }
+
+        .demo-section h2 {
+            color: #333;
+            margin-bottom: 16px;
+            font-size: 1.25rem;
+        }
+
+        .color-pickers {
+            display: flex;
+            gap: 24px;
+            flex-wrap: wrap;
+            margin-bottom: 16px;
+        }
+
+        .color-display {
+            margin-top: 16px;
+            padding: 12px;
+            background: white;
+            border-radius: 6px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.875rem;
+        }
+
+        .color-display strong {
+            color: #667eea;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Custom Color Picker</h1>
+        <p>Consistent color picker that works the same across all operating systems and browsers</p>
+
+        <div class="demo-section">
+            <h2>Single Color Picker</h2>
+            <div class="color-pickers">
+                <div id="picker1"></div>
+            </div>
+            <div class="color-display">
+                Selected color: <strong id="color1-display">#FF0000</strong>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>Multiple Color Pickers</h2>
+            <p style="margin-bottom: 16px;">Example: Multiple colors for LED patterns</p>
+            <div class="color-pickers">
+                <div id="picker2"></div>
+                <div id="picker3"></div>
+                <div id="picker4"></div>
+            </div>
+            <div class="color-display">
+                Colors: <strong id="colors-display">#FF0000, #00FF00, #0000FF</strong>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>Features</h2>
+            <ul style="color: #666; line-height: 1.8;">
+                <li>✅ Consistent UI across Windows, macOS, Linux, iOS, Android</li>
+                <li>✅ Works in Chrome, Firefox, Safari, Edge, Opera</li>
+                <li>✅ Touch support for mobile devices</li>
+                <li>✅ HSB (Hue, Saturation, Brightness) color model</li>
+                <li>✅ Hex and RGB input support</li>
+                <li>✅ Keyboard accessible</li>
+                <li>✅ Customizable styling</li>
+            </ul>
+        </div>
+    </div>
+
+    <script src="color-picker.js"></script>
+    <script>
+        // Initialize color pickers
+        const picker1 = new ColorPicker('#picker1', {
+            initialColor: '#FF0000',
+            onColorChange: (color) => {
+                document.getElementById('color1-display').textContent = color;
+            }
+        });
+
+        const picker2 = new ColorPicker('#picker2', {
+            initialColor: '#FF0000',
+            onColorChange: updateColors
+        });
+
+        const picker3 = new ColorPicker('#picker3', {
+            initialColor: '#00FF00',
+            onColorChange: updateColors
+        });
+
+        const picker4 = new ColorPicker('#picker4', {
+            initialColor: '#0000FF',
+            onColorChange: updateColors
+        });
+
+        function updateColors() {
+            const colors = [
+                picker2.getColor(),
+                picker3.getColor(),
+                picker4.getColor()
+            ];
+            document.getElementById('colors-display').textContent = colors.join(', ');
+        }
+    </script>
+</body>
+</html>
+
--- a/docs/mockups/color-picker.css
+++ b/docs/mockups/color-picker.css
@@ -0,0 +1,282 @@
+/* Color Picker Styles - Consistent across all browsers and OS */
+
+.color-picker-container {
+    position: relative;
+    display: inline-block;
+}
+
+.color-picker-preview {
+    width: 60px;
+    height: 60px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    cursor: pointer;
+    padding: 0;
+    background: none;
+    transition: all 0.2s;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.color-picker-preview:hover {
+    border-color: #667eea;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    transform: translateY(-1px);
+}
+
+.color-picker-preview:active {
+    transform: translateY(0);
+}
+
+.color-picker-panel {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    z-index: 1000;
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    padding: 16px;
+    min-width: 280px;
+}
+
+.color-picker-area {
+    display: flex;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.color-picker-main {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    overflow: hidden;
+    cursor: crosshair;
+    touch-action: none;
+}
+
+.color-picker-canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.color-picker-cursor {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border: 2px solid white;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    top: 0;
+    left: 0;
+}
+
+.color-picker-hue {
+    position: relative;
+    width: 20px;
+    height: 200px;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    overflow: hidden;
+    cursor: pointer;
+    touch-action: none;
+}
+
+.color-picker-hue-cursor {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 4px;
+    border: 2px solid white;
+    border-radius: 2px;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
+    pointer-events: none;
+    transform: translateY(-50%);
+    top: 0;
+}
+
+.color-picker-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.color-picker-hex {
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    transition: border-color 0.2s;
+}
+
+.color-picker-hex:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+.color-picker-rgb {
+    display: flex;
+    gap: 8px;
+}
+
+.color-picker-rgb-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.color-picker-rgb-item label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #666;
+    text-align: center;
+}
+
+.color-picker-rgb-slider {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: #e0e0e0;
+    outline: none;
+    -webkit-appearance: none;
+    cursor: pointer;
+}
+
+.color-picker-rgb-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #667eea;
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+    transition: all 0.2s;
+}
+
+.color-picker-rgb-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
+}
+
+.color-picker-rgb-slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #667eea;
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+    transition: all 0.2s;
+}
+
+.color-picker-rgb-slider::-moz-range-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
+}
+
+/* Color-specific slider backgrounds */
+.color-picker-rgb-item[data-channel="r"] .color-picker-rgb-slider {
+    background: linear-gradient(to right, #000000, #ff0000);
+}
+
+.color-picker-rgb-item[data-channel="g"] .color-picker-rgb-slider {
+    background: linear-gradient(to right, #000000, #00ff00);
+}
+
+.color-picker-rgb-item[data-channel="b"] .color-picker-rgb-slider {
+    background: linear-gradient(to right, #000000, #0000ff);
+}
+
+.color-picker-rgb-input {
+    width: 100%;
+    padding: 6px 8px;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    text-align: center;
+    transition: border-color 0.2s;
+    -moz-appearance: textfield;
+}
+
+.color-picker-rgb-input::-webkit-outer-spin-button,
+.color-picker-rgb-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.color-picker-rgb-input:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+    .color-picker-panel {
+        left: auto;
+        right: 0;
+    }
+    
+    .color-picker-main {
+        width: 180px;
+        height: 180px;
+    }
+    
+    .color-picker-hue {
+        height: 180px;
+    }
+}
+
+/* Dark mode support (optional) */
+@media (prefers-color-scheme: dark) {
+    .color-picker-panel {
+        background: #2d3748;
+        border-color: #4a5568;
+    }
+    
+    .color-picker-preview {
+        border-color: #4a5568;
+    }
+    
+    .color-picker-main,
+    .color-picker-hue {
+        border-color: #4a5568;
+    }
+    
+    .color-picker-hex,
+    .color-picker-rgb-input {
+        background: #1a202c;
+        border-color: #4a5568;
+        color: #e2e8f0;
+    }
+    
+    .color-picker-rgb-item label {
+        color: #a0aec0;
+    }
+    
+    .color-picker-rgb-slider {
+        background: #4a5568 !important;
+    }
+    
+    .color-picker-rgb-slider::-webkit-slider-thumb,
+    .color-picker-rgb-slider::-moz-range-thumb {
+        background: #667eea;
+        border-color: #2d3748;
+    }
+}
+
--- a/docs/mockups/color-picker.js
+++ b/docs/mockups/color-picker.js
@@ -0,0 +1,474 @@
+/**
+ * Custom Color Picker Component
+ * Consistent across all operating systems and browsers
+ */
+
+class ColorPicker {
+    constructor(container, options = {}) {
+        this.container = typeof container === 'string' ? document.querySelector(container) : container;
+        this.options = {
+            initialColor: options.initialColor || '#FF0000',
+            onColorChange: options.onColorChange || null,
+            showHexInput: options.showHexInput !== false,
+            ...options
+        };
+        this.currentColor = this.options.initialColor;
+        this.isOpen = false;
+        this.init();
+    }
+
+    init() {
+        this.createPicker();
+        this.setupEventListeners();
+        this.updateColor(this.options.initialColor);
+    }
+
+    createPicker() {
+        this.container.innerHTML = '';
+        this.container.className = 'color-picker-container';
+
+        // Color preview button
+        this.previewBtn = document.createElement('button');
+        this.previewBtn.className = 'color-picker-preview';
+        this.previewBtn.type = 'button';
+        this.previewBtn.style.backgroundColor = this.currentColor;
+        this.previewBtn.setAttribute('aria-label', 'Open color picker');
+
+        // Dropdown panel
+        this.panel = document.createElement('div');
+        this.panel.className = 'color-picker-panel';
+        this.panel.style.display = 'none';
+
+        // Main color area (hue/saturation)
+        this.mainArea = document.createElement('div');
+        this.mainArea.className = 'color-picker-main';
+        this.mainCanvas = document.createElement('canvas');
+        this.mainCanvas.width = 200;
+        this.mainCanvas.height = 200;
+        this.mainCanvas.className = 'color-picker-canvas';
+        this.mainArea.appendChild(this.mainCanvas);
+
+        // Main area cursor
+        this.mainCursor = document.createElement('div');
+        this.mainCursor.className = 'color-picker-cursor';
+        this.mainArea.appendChild(this.mainCursor);
+
+        // Hue slider
+        this.hueArea = document.createElement('div');
+        this.hueArea.className = 'color-picker-hue';
+        this.hueCanvas = document.createElement('canvas');
+        this.hueCanvas.width = 20;
+        this.hueCanvas.height = 200;
+        this.hueCanvas.className = 'color-picker-canvas';
+        this.hueArea.appendChild(this.hueCanvas);
+
+        // Hue slider cursor
+        this.hueCursor = document.createElement('div');
+        this.hueCursor.className = 'color-picker-hue-cursor';
+        this.hueArea.appendChild(this.hueCursor);
+
+        // Controls section
+        this.controls = document.createElement('div');
+        this.controls.className = 'color-picker-controls';
+
+        // Hex input
+        if (this.options.showHexInput) {
+            this.hexInput = document.createElement('input');
+            this.hexInput.type = 'text';
+            this.hexInput.className = 'color-picker-hex';
+            this.hexInput.placeholder = '#000000';
+            this.hexInput.maxLength = 7;
+            this.controls.appendChild(this.hexInput);
+        }
+
+        // RGB inputs and sliders
+        this.rgbContainer = document.createElement('div');
+        this.rgbContainer.className = 'color-picker-rgb';
+        
+        ['R', 'G', 'B'].forEach((label, index) => {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'color-picker-rgb-item';
+            wrapper.dataset.channel = label.toLowerCase();
+            
+            const labelEl = document.createElement('label');
+            labelEl.textContent = label;
+            
+            const slider = document.createElement('input');
+            slider.type = 'range';
+            slider.className = 'color-picker-rgb-slider';
+            slider.min = 0;
+            slider.max = 255;
+            slider.value = 0;
+            slider.dataset.channel = label.toLowerCase();
+            
+            const input = document.createElement('input');
+            input.type = 'number';
+            input.className = 'color-picker-rgb-input';
+            input.min = 0;
+            input.max = 255;
+            input.value = 0;
+            input.dataset.channel = label.toLowerCase();
+            
+            wrapper.appendChild(labelEl);
+            wrapper.appendChild(slider);
+            wrapper.appendChild(input);
+            this.rgbContainer.appendChild(wrapper);
+            
+            this[`rgb${label}Slider`] = slider;
+            this[`rgb${label}`] = input;
+        });
+        
+        this.controls.appendChild(this.rgbContainer);
+
+        // Assemble panel
+        const pickerArea = document.createElement('div');
+        pickerArea.className = 'color-picker-area';
+        pickerArea.appendChild(this.mainArea);
+        pickerArea.appendChild(this.hueArea);
+        
+        this.panel.appendChild(pickerArea);
+        this.panel.appendChild(this.controls);
+
+        // Assemble container
+        this.container.appendChild(this.previewBtn);
+        this.container.appendChild(this.panel);
+
+        // Draw canvases
+        this.drawHueCanvas();
+        this.drawMainCanvas(1.0); // Start with full saturation
+    }
+
+    setupEventListeners() {
+        // Toggle panel
+        this.previewBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.toggle();
+        });
+
+        // Close on outside click
+        document.addEventListener('click', (e) => {
+            if (!this.container.contains(e.target) && this.isOpen) {
+                this.close();
+            }
+        });
+
+        // Main area interaction
+        let isMainDragging = false;
+        this.mainCanvas.addEventListener('mousedown', (e) => {
+            isMainDragging = true;
+            this.handleMainAreaClick(e);
+        });
+        this.mainCanvas.addEventListener('mousemove', (e) => {
+            if (isMainDragging) {
+                this.handleMainAreaClick(e);
+            }
+        });
+        document.addEventListener('mouseup', () => {
+            isMainDragging = false;
+        });
+
+        // Touch support for main area
+        this.mainCanvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            isMainDragging = true;
+            this.handleMainAreaClick(e.touches[0]);
+        });
+        this.mainCanvas.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            if (isMainDragging) {
+                this.handleMainAreaClick(e.touches[0]);
+            }
+        });
+        this.mainCanvas.addEventListener('touchend', () => {
+            isMainDragging = false;
+        });
+
+        // Hue slider interaction
+        let isHueDragging = false;
+        this.hueCanvas.addEventListener('mousedown', (e) => {
+            isHueDragging = true;
+            this.handleHueClick(e);
+        });
+        this.hueCanvas.addEventListener('mousemove', (e) => {
+            if (isHueDragging) {
+                this.handleHueClick(e);
+            }
+        });
+        document.addEventListener('mouseup', () => {
+            isHueDragging = false;
+        });
+
+        // Touch support for hue slider
+        this.hueCanvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            isHueDragging = true;
+            this.handleHueClick(e.touches[0]);
+        });
+        this.hueCanvas.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            if (isHueDragging) {
+                this.handleHueClick(e.touches[0]);
+            }
+        });
+        this.hueCanvas.addEventListener('touchend', () => {
+            isHueDragging = false;
+        });
+
+        // Hex input
+        if (this.hexInput) {
+            this.hexInput.addEventListener('input', (e) => {
+                const value = e.target.value;
+                if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
+                    this.updateColor(value);
+                }
+            });
+            this.hexInput.addEventListener('blur', (e) => {
+                const value = e.target.value;
+                if (!/^#[0-9A-Fa-f]{6}$/.test(value) && value.length > 0) {
+                    e.target.value = this.currentColor;
+                }
+            });
+        }
+
+        // RGB inputs and sliders
+        ['R', 'G', 'B'].forEach(label => {
+            // Slider change
+            this[`rgb${label}Slider`].addEventListener('input', (e) => {
+                const value = parseInt(e.target.value) || 0;
+                this[`rgb${label}`].value = value;
+                const r = parseInt(this.rgbR.value) || 0;
+                const g = parseInt(this.rgbG.value) || 0;
+                const b = parseInt(this.rgbB.value) || 0;
+                const hex = this.rgbToHex(r, g, b);
+                this.updateColor(hex, false); // Don't update RGB inputs/sliders to avoid loop
+            });
+            
+            // Input change
+            this[`rgb${label}`].addEventListener('input', (e) => {
+                let value = parseInt(e.target.value) || 0;
+                value = Math.max(0, Math.min(255, value)); // Clamp to 0-255
+                e.target.value = value;
+                this[`rgb${label}Slider`].value = value;
+                const r = parseInt(this.rgbR.value) || 0;
+                const g = parseInt(this.rgbG.value) || 0;
+                const b = parseInt(this.rgbB.value) || 0;
+                const hex = this.rgbToHex(r, g, b);
+                this.updateColor(hex, false); // Don't update RGB inputs/sliders to avoid loop
+            });
+        });
+    }
+
+    drawHueCanvas() {
+        const ctx = this.hueCanvas.getContext('2d');
+        const gradient = ctx.createLinearGradient(0, 0, 0, 200);
+        
+        for (let i = 0; i <= 6; i++) {
+            const hue = i * 60;
+            gradient.addColorStop(i / 6, `hsl(${hue}, 100%, 50%)`);
+        }
+        
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, 20, 200);
+    }
+
+    drawMainCanvas(hue) {
+        const ctx = this.mainCanvas.getContext('2d');
+        
+        // Saturation gradient (left to right)
+        const satGradient = ctx.createLinearGradient(0, 0, 200, 0);
+        satGradient.addColorStop(0, `hsl(${hue}, 0%, 50%)`);
+        satGradient.addColorStop(1, `hsl(${hue}, 100%, 50%)`);
+        ctx.fillStyle = satGradient;
+        ctx.fillRect(0, 0, 200, 200);
+        
+        // Brightness gradient (top to bottom)
+        const brightGradient = ctx.createLinearGradient(0, 0, 0, 200);
+        brightGradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
+        brightGradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
+        ctx.fillStyle = brightGradient;
+        ctx.fillRect(0, 0, 200, 200);
+    }
+
+    handleMainAreaClick(e) {
+        const rect = this.mainCanvas.getBoundingClientRect();
+        const x = Math.max(0, Math.min(200, e.clientX - rect.left));
+        const y = Math.max(0, Math.min(200, e.clientY - rect.top));
+        
+        const saturation = x / 200;
+        const brightness = 1 - (y / 200);
+        
+        this.updateColorFromHSB(this.hue, saturation, brightness);
+        this.updateCursor(x, y);
+    }
+
+    handleHueClick(e) {
+        const rect = this.hueCanvas.getBoundingClientRect();
+        const y = Math.max(0, Math.min(200, e.clientY - rect.top));
+        const hue = (y / 200) * 360;
+        
+        this.hue = hue;
+        this.drawMainCanvas(hue);
+        this.updateHueCursor(y);
+        
+        // Recalculate color with new hue
+        const rect2 = this.mainCanvas.getBoundingClientRect();
+        const x = parseFloat(this.mainCursor.style.left) || 0;
+        const y2 = parseFloat(this.mainCursor.style.top) || 0;
+        const saturation = x / 200;
+        const brightness = 1 - (y2 / 200);
+        this.updateColorFromHSB(hue, saturation, brightness);
+    }
+
+    updateColorFromHSB(h, s, v) {
+        const rgb = this.hsbToRgb(h, s, v);
+        const hex = this.rgbToHex(rgb.r, rgb.g, rgb.b);
+        this.updateColor(hex);
+    }
+
+    hsbToRgb(h, s, v) {
+        h = h / 360;
+        const i = Math.floor(h * 6);
+        const f = h * 6 - i;
+        const p = v * (1 - s);
+        const q = v * (1 - f * s);
+        const t = v * (1 - (1 - f) * s);
+        
+        let r, g, b;
+        switch (i % 6) {
+            case 0: r = v; g = t; b = p; break;
+            case 1: r = q; g = v; b = p; break;
+            case 2: r = p; g = v; b = t; break;
+            case 3: r = p; g = q; b = v; break;
+            case 4: r = t; g = p; b = v; break;
+            case 5: r = v; g = p; b = q; break;
+        }
+        
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255)
+        };
+    }
+
+    rgbToHex(r, g, b) {
+        return '#' + [r, g, b].map(x => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        }).join('').toUpperCase();
+    }
+
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    }
+
+    rgbToHsb(r, g, b) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const diff = max - min;
+        
+        let h = 0;
+        if (diff !== 0) {
+            if (max === r) {
+                h = ((g - b) / diff) % 6) * 60;
+            } else if (max === g) {
+                h = ((b - r) / diff + 2) * 60;
+            } else {
+                h = ((r - g) / diff + 4) * 60;
+            }
+        }
+        if (h < 0) h += 360;
+        
+        const s = max === 0 ? 0 : diff / max;
+        const v = max;
+        
+        return { h, s, v };
+    }
+
+    updateColor(hex, updateInputs = true) {
+        this.currentColor = hex.toUpperCase();
+        this.previewBtn.style.backgroundColor = this.currentColor;
+        
+        const rgb = this.hexToRgb(this.currentColor);
+        if (!rgb) return;
+        
+        const hsb = this.rgbToHsb(rgb.r, rgb.g, rgb.b);
+        this.hue = hsb.h;
+        
+        // Update main canvas
+        this.drawMainCanvas(this.hue);
+        
+        // Update cursors
+        const x = hsb.s * 200;
+        const y = (1 - hsb.v) * 200;
+        this.updateCursor(x, y);
+        this.updateHueCursor((this.hue / 360) * 200);
+        
+        // Update inputs
+        if (updateInputs) {
+            if (this.hexInput) {
+                this.hexInput.value = this.currentColor;
+            }
+            if (this.rgbR) {
+                this.rgbR.value = rgb.r;
+                this.rgbG.value = rgb.g;
+                this.rgbB.value = rgb.b;
+            }
+            if (this.rgbRSlider) {
+                this.rgbRSlider.value = rgb.r;
+                this.rgbGSlider.value = rgb.g;
+                this.rgbBSlider.value = rgb.b;
+            }
+        }
+        
+        // Callback
+        if (this.options.onColorChange) {
+            this.options.onColorChange(this.currentColor);
+        }
+    }
+
+    updateCursor(x, y) {
+        this.mainCursor.style.left = `${x}px`;
+        this.mainCursor.style.top = `${y}px`;
+    }
+
+    updateHueCursor(y) {
+        this.hueCursor.style.top = `${y}px`;
+    }
+
+    toggle() {
+        this.isOpen ? this.close() : this.open();
+    }
+
+    open() {
+        this.panel.style.display = 'block';
+        this.isOpen = true;
+    }
+
+    close() {
+        this.panel.style.display = 'none';
+        this.isOpen = false;
+    }
+
+    getColor() {
+        return this.currentColor;
+    }
+
+    setColor(color) {
+        this.updateColor(color);
+    }
+}
+
+// Export for use in other scripts
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = ColorPicker;
+}
+
--- a/docs/mockups/dashboard.html
+++ b/docs/mockups/dashboard.html
@@ -0,0 +1,359 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LED Driver - Dashboard</title>
+    <link rel="stylesheet" href="color-picker.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+            color: #333;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .header {
+            background: white;
+            border-radius: 12px;
+            padding: 24px;
+            margin-bottom: 24px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .header h1 {
+            color: #667eea;
+            margin-bottom: 8px;
+        }
+
+        .header p {
+            color: #666;
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 24px;
+            margin-bottom: 24px;
+        }
+
+        .card {
+            background: white;
+            border-radius: 12px;
+            padding: 24px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        .card h2 {
+            color: #667eea;
+            margin-bottom: 16px;
+            font-size: 1.25rem;
+        }
+
+        .pattern-selector {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+            gap: 12px;
+        }
+
+        .pattern-btn {
+            padding: 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            background: white;
+            cursor: pointer;
+            transition: all 0.2s;
+            text-align: center;
+            font-weight: 500;
+        }
+
+        .pattern-btn:hover {
+            border-color: #667eea;
+            background: #f0f0ff;
+        }
+
+        .pattern-btn.active {
+            border-color: #667eea;
+            background: #667eea;
+            color: white;
+        }
+
+        .slider-group {
+            margin-bottom: 20px;
+        }
+
+        .slider-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+            color: #333;
+        }
+
+        .slider {
+            width: 100%;
+            height: 8px;
+            border-radius: 4px;
+            background: #e0e0e0;
+            outline: none;
+            -webkit-appearance: none;
+        }
+
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #667eea;
+            cursor: pointer;
+        }
+
+        .slider::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #667eea;
+            cursor: pointer;
+            border: none;
+        }
+
+        .value-display {
+            display: inline-block;
+            margin-left: 12px;
+            font-weight: 600;
+            color: #667eea;
+        }
+
+        .color-picker-group {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+
+        .color-picker-wrapper {
+            display: inline-block;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .btn-primary {
+            background: #667eea;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: #5568d3;
+        }
+
+        .btn-secondary {
+            background: #e0e0e0;
+            color: #333;
+        }
+
+        .btn-secondary:hover {
+            background: #d0d0d0;
+        }
+
+        .device-list {
+            list-style: none;
+        }
+
+        .device-item {
+            padding: 12px;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            margin-bottom: 8px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .device-status {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #4caf50;
+        }
+
+        .device-status.offline {
+            background: #f44336;
+        }
+
+        .actions {
+            display: flex;
+            gap: 12px;
+            margin-top: 20px;
+        }
+
+        .btn-full {
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>LED Driver Control Panel</h1>
+            <p>Manage your LED devices and patterns</p>
+        </div>
+
+        <div class="grid">
+            <!-- Pattern Selection -->
+            <div class="card">
+                <h2>Pattern Selection</h2>
+                <div class="pattern-selector">
+                    <div class="pattern-btn active">On</div>
+                    <div class="pattern-btn">Off</div>
+                    <div class="pattern-btn">Blink</div>
+                    <div class="pattern-btn">Chase</div>
+                    <div class="pattern-btn">Circle</div>
+                    <div class="pattern-btn">Pulse</div>
+                    <div class="pattern-btn">Rainbow</div>
+                    <div class="pattern-btn">Transition</div>
+                </div>
+            </div>
+
+            <!-- Brightness & Speed -->
+            <div class="card">
+                <h2>Brightness & Speed</h2>
+                <div class="slider-group">
+                    <label>
+                        Brightness
+                        <span class="value-display" id="brightness-value">100</span>%
+                    </label>
+                    <input type="range" class="slider" id="brightness" min="0" max="100" value="100">
+                </div>
+                <div class="slider-group">
+                    <label>
+                        Delay
+                        <span class="value-display" id="delay-value">100</span>ms
+                    </label>
+                    <input type="range" class="slider" id="delay" min="10" max="1000" value="100" step="10">
+                </div>
+            </div>
+
+            <!-- Color Selection -->
+            <div class="card">
+                <h2>Colors</h2>
+                <div class="color-picker-group">
+                    <input type="color" class="color-input" value="#000000">
+                    <input type="color" class="color-input" value="#FF0000">
+                    <input type="color" class="color-input" value="#00FF00">
+                    <input type="color" class="color-input" value="#0000FF">
+                </div>
+                <div class="actions">
+                    <button class="btn btn-secondary btn-full">Add Color</button>
+                </div>
+            </div>
+
+            <!-- Device Status -->
+            <div class="card">
+                <h2>Connected Devices</h2>
+                <ul class="device-list">
+                    <li class="device-item">
+                        <div>
+                            <strong>led-device1</strong>
+                            <div style="font-size: 0.875rem; color: #666;">Group: group1</div>
+                        </div>
+                        <div class="device-status"></div>
+                    </li>
+                    <li class="device-item">
+                        <div>
+                            <strong>led-device2</strong>
+                            <div style="font-size: 0.875rem; color: #666;">Group: group2</div>
+                        </div>
+                        <div class="device-status"></div>
+                    </li>
+                    <li class="device-item">
+                        <div>
+                            <strong>led-device3</strong>
+                            <div style="font-size: 0.875rem; color: #666;">No group</div>
+                        </div>
+                        <div class="device-status offline"></div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="card">
+            <div class="actions">
+                <button class="btn btn-primary btn-full">Apply Settings</button>
+                <button class="btn btn-secondary btn-full">Save to Device</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Brightness slider
+        document.getElementById('brightness').addEventListener('input', function(e) {
+            document.getElementById('brightness-value').textContent = e.target.value;
+        });
+
+        // Delay slider
+        document.getElementById('delay').addEventListener('input', function(e) {
+            document.getElementById('delay-value').textContent = e.target.value;
+        });
+
+        // Pattern selection
+        document.querySelectorAll('.pattern-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                document.querySelectorAll('.pattern-btn').forEach(b => b.classList.remove('active'));
+                this.classList.add('active');
+            });
+        });
+
+        // Initialize color pickers
+        const colorPickers = [];
+        const initialColors = ['#000000', '#FF0000'];
+        
+        function addColorPicker(color = '#000000') {
+            const container = document.createElement('div');
+            container.className = 'color-picker-wrapper';
+            document.getElementById('color-pickers').appendChild(container);
+            
+            const picker = new ColorPicker(container, {
+                initialColor: color,
+                onColorChange: (newColor) => {
+                    console.log('Color changed:', newColor);
+                    // Update device colors
+                }
+            });
+            
+            colorPickers.push(picker);
+            return picker;
+        }
+
+        // Add initial color pickers
+        initialColors.forEach(color => addColorPicker(color));
+    </script>
+    <script src="color-picker.js"></script>
+</body>
+</html>
+
--- a/docs/mockups/device-management.html
+++ b/docs/mockups/device-management.html
@@ -0,0 +1,418 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LED Driver - Device Management</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .header {
+            background: white;
+            border-radius: 12px;
+            padding: 24px;
+            margin-bottom: 24px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .header h1 {
+            color: #667eea;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .btn-primary {
+            background: #667eea;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: #5568d3;
+        }
+
+        .tabs {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 24px;
+            background: white;
+            padding: 8px;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .tab {
+            flex: 1;
+            padding: 12px 24px;
+            border: none;
+            background: transparent;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: 500;
+            transition: all 0.2s;
+        }
+
+        .tab.active {
+            background: #667eea;
+            color: white;
+        }
+
+        .tab-content {
+            display: none;
+        }
+
+        .tab-content.active {
+            display: block;
+        }
+
+        .card {
+            background: white;
+            border-radius: 12px;
+            padding: 24px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            margin-bottom: 24px;
+        }
+
+        .card h2 {
+            color: #667eea;
+            margin-bottom: 20px;
+        }
+
+        .device-item, .group-item {
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            padding: 16px;
+            margin-bottom: 12px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: all 0.2s;
+        }
+
+        .device-item:hover, .group-item:hover {
+            border-color: #667eea;
+            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
+        }
+
+        .device-info, .group-info {
+            flex: 1;
+        }
+
+        .device-name, .group-name {
+            font-weight: 600;
+            font-size: 1.125rem;
+            margin-bottom: 4px;
+        }
+
+        .device-details, .group-details {
+            font-size: 0.875rem;
+            color: #666;
+        }
+
+        .status-badge {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            margin-right: 12px;
+        }
+
+        .status-online {
+            background: #d4edda;
+            color: #155724;
+        }
+
+        .status-offline {
+            background: #f8d7da;
+            color: #721c24;
+        }
+
+        .status-indicator {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #4caf50;
+            margin-right: 8px;
+        }
+
+        .status-indicator.offline {
+            background: #f44336;
+        }
+
+        .device-actions, .group-actions {
+            display: flex;
+            gap: 8px;
+        }
+
+        .btn-icon {
+            padding: 8px 12px;
+            border: 1px solid #e0e0e0;
+            background: white;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .btn-icon:hover {
+            border-color: #667eea;
+            color: #667eea;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+            color: #333;
+        }
+
+        .form-group input, .form-group select {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 1rem;
+        }
+
+        .form-group input:focus, .form-group select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .form-actions {
+            display: flex;
+            gap: 12px;
+            margin-top: 24px;
+        }
+
+        .btn-secondary {
+            background: #e0e0e0;
+            color: #333;
+        }
+
+        .btn-secondary:hover {
+            background: #d0d0d0;
+        }
+
+        .group-devices {
+            margin-top: 12px;
+            padding-top: 12px;
+            border-top: 1px solid #e0e0e0;
+        }
+
+        .group-device-tag {
+            display: inline-block;
+            padding: 4px 8px;
+            background: #f0f0f0;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            margin-right: 8px;
+            margin-top: 8px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Device & Group Management</h1>
+            <button class="btn btn-primary" onclick="showAddDeviceModal()">+ Add Device</button>
+        </div>
+
+        <div class="tabs">
+            <button class="tab active" onclick="switchTab('devices')">Devices</button>
+            <button class="tab" onclick="switchTab('groups')">Groups</button>
+        </div>
+
+        <!-- Devices Tab -->
+        <div id="devices-tab" class="tab-content active">
+            <div class="card">
+                <h2>Connected Devices</h2>
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-name">
+                            <span class="status-indicator"></span>
+                            led-device1
+                        </div>
+                        <div class="device-details">
+                            <span class="status-badge status-online">Online</span>
+                            MAC: AA:BB:CC:DD:EE:01 | Group: group1 | Pattern: Rainbow
+                        </div>
+                    </div>
+                    <div class="device-actions">
+                        <button class="btn-icon" title="Edit">✏️</button>
+                        <button class="btn-icon" title="Settings">⚙️</button>
+                        <button class="btn-icon" title="Remove">🗑️</button>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-name">
+                            <span class="status-indicator"></span>
+                            led-device2
+                        </div>
+                        <div class="device-details">
+                            <span class="status-badge status-online">Online</span>
+                            MAC: AA:BB:CC:DD:EE:02 | Group: group2 | Pattern: Chase
+                        </div>
+                    </div>
+                    <div class="device-actions">
+                        <button class="btn-icon" title="Edit">✏️</button>
+                        <button class="btn-icon" title="Settings">⚙️</button>
+                        <button class="btn-icon" title="Remove">🗑️</button>
+                    </div>
+                </div>
+
+                <div class="device-item">
+                    <div class="device-info">
+                        <div class="device-name">
+                            <span class="status-indicator offline"></span>
+                            led-device3
+                        </div>
+                        <div class="device-details">
+                            <span class="status-badge status-offline">Offline</span>
+                            MAC: AA:BB:CC:DD:EE:03 | No group | Pattern: On
+                        </div>
+                    </div>
+                    <div class="device-actions">
+                        <button class="btn-icon" title="Edit">✏️</button>
+                        <button class="btn-icon" title="Settings">⚙️</button>
+                        <button class="btn-icon" title="Remove">🗑️</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Groups Tab -->
+        <div id="groups-tab" class="tab-content">
+            <div class="card">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                    <h2>Groups</h2>
+                    <button class="btn btn-primary" onclick="showAddGroupModal()">+ Create Group</button>
+                </div>
+
+                <div class="group-item">
+                    <div class="group-info">
+                        <div class="group-name">group1</div>
+                        <div class="group-details">
+                            Pattern: On | Brightness: 100% | Delay: 100ms
+                        </div>
+                        <div class="group-devices">
+                            <span class="group-device-tag">led-device1</span>
+                        </div>
+                    </div>
+                    <div class="group-actions">
+                        <button class="btn-icon" title="Edit">✏️</button>
+                        <button class="btn-icon" title="Apply">▶️</button>
+                        <button class="btn-icon" title="Delete">🗑️</button>
+                    </div>
+                </div>
+
+                <div class="group-item">
+                    <div class="group-info">
+                        <div class="group-name">group2</div>
+                        <div class="group-details">
+                            Pattern: Chase | Brightness: 75% | Delay: 200ms
+                        </div>
+                        <div class="group-devices">
+                            <span class="group-device-tag">led-device2</span>
+                        </div>
+                    </div>
+                    <div class="group-actions">
+                        <button class="btn-icon" title="Edit">✏️</button>
+                        <button class="btn-icon" title="Apply">▶️</button>
+                        <button class="btn-icon" title="Delete">🗑️</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modal (simplified) -->
+    <div id="modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
+        <div class="card" style="max-width: 500px; margin: 20px;">
+            <h2 id="modal-title">Add Device</h2>
+            <div class="form-group">
+                <label>Device Name</label>
+                <input type="text" id="device-name" placeholder="led-device4">
+            </div>
+            <div class="form-group">
+                <label>MAC Address</label>
+                <input type="text" id="device-mac" placeholder="AA:BB:CC:DD:EE:04">
+            </div>
+            <div class="form-group">
+                <label>Group</label>
+                <select id="device-group">
+                    <option value="">No group</option>
+                    <option value="group1">group1</option>
+                    <option value="group2">group2</option>
+                </select>
+            </div>
+            <div class="form-actions">
+                <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+                <button class="btn btn-primary" onclick="saveDevice()">Save</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function switchTab(tab) {
+            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+            
+            event.target.classList.add('active');
+            document.getElementById(tab + '-tab').classList.add('active');
+        }
+
+        function showAddDeviceModal() {
+            document.getElementById('modal').style.display = 'flex';
+            document.getElementById('modal-title').textContent = 'Add Device';
+        }
+
+        function showAddGroupModal() {
+            document.getElementById('modal').style.display = 'flex';
+            document.getElementById('modal-title').textContent = 'Create Group';
+        }
+
+        function closeModal() {
+            document.getElementById('modal').style.display = 'none';
+        }
+
+        function saveDevice() {
+            alert('Device saved! (This is a mockup)');
+            closeModal();
+        }
+    </script>
+</body>
+</html>
+
--- a/docs/mockups/generate_images.py
+++ b/docs/mockups/generate_images.py
@@ -0,0 +1,155 @@
+#!/usr/bin/env python3
+"""
+Generate images from HTML mockup files
+Uses Playwright to render HTML and take screenshots
+"""
+
+import os
+import sys
+from pathlib import Path
+
+try:
+    from playwright.sync_api import sync_playwright
+    PLAYWRIGHT_AVAILABLE = True
+except ImportError:
+    PLAYWRIGHT_AVAILABLE = False
+
+try:
+    from selenium import webdriver
+    from selenium.webdriver.chrome.options import Options
+    from selenium.webdriver.chrome.service import Service
+    SELENIUM_AVAILABLE = True
+except ImportError:
+    SELENIUM_AVAILABLE = False
+
+try:
+    from html2image import Html2Image
+    HTML2IMAGE_AVAILABLE = True
+except ImportError:
+    HTML2IMAGE_AVAILABLE = False
+
+
+def generate_with_playwright(html_file, output_file, width=1920, height=1080):
+    """Generate image using Playwright"""
+    with sync_playwright() as p:
+        browser = p.chromium.launch(headless=True)
+        page = browser.new_page(viewport={'width': width, 'height': height})
+        page.goto(f'file://{html_file.absolute()}')
+        # Wait for page to load
+        page.wait_for_timeout(1000)
+        page.screenshot(path=str(output_file), full_page=True)
+        browser.close()
+    print(f"✓ Generated {output_file.name} using Playwright")
+
+
+def generate_with_selenium(html_file, output_file, width=1920, height=1080):
+    """Generate image using Selenium"""
+    chrome_options = Options()
+    chrome_options.add_argument('--headless')
+    chrome_options.add_argument('--no-sandbox')
+    chrome_options.add_argument('--disable-dev-shm-usage')
+    chrome_options.add_argument(f'--window-size={width},{height}')
+    
+    driver = webdriver.Chrome(options=chrome_options)
+    try:
+        driver.get(f'file://{html_file.absolute()}')
+        # Wait for page to load
+        import time
+        time.sleep(2)
+        driver.save_screenshot(str(output_file))
+        print(f"✓ Generated {output_file.name} using Selenium")
+    finally:
+        driver.quit()
+
+
+def generate_with_html2image(html_file, output_file, width=1920, height=1080):
+    """Generate image using html2image"""
+    hti = Html2Image(size=(width, height))
+    hti.screenshot(
+        html_file=str(html_file),
+        save_as=output_file.name,
+        size=(width, height)
+    )
+    print(f"✓ Generated {output_file.name} using html2image")
+
+
+def generate_image(html_file, output_dir, width=1920, height=1080):
+    """Generate image from HTML file using available method"""
+    html_path = Path(html_file)
+    output_path = output_dir / f"{html_path.stem}.png"
+    
+    if PLAYWRIGHT_AVAILABLE:
+        try:
+            generate_with_playwright(html_path, output_path, width, height)
+            return True
+        except Exception as e:
+            print(f"Playwright failed: {e}, trying alternatives...")
+    
+    if SELENIUM_AVAILABLE:
+        try:
+            generate_with_selenium(html_path, output_path, width, height)
+            return True
+        except Exception as e:
+            print(f"Selenium failed: {e}, trying alternatives...")
+    
+    if HTML2IMAGE_AVAILABLE:
+        try:
+            generate_with_html2image(html_path, output_path, width, height)
+            return True
+        except Exception as e:
+            print(f"html2image failed: {e}")
+    
+    return False
+
+
+def main():
+    """Main function to generate images from all HTML files"""
+    script_dir = Path(__file__).parent
+    output_dir = script_dir / "images"
+    output_dir.mkdir(exist_ok=True)
+    
+    html_files = list(script_dir.glob("*.html"))
+    
+    if not html_files:
+        print("No HTML files found in mockups directory")
+        return
+    
+    print(f"Found {len(html_files)} HTML file(s)")
+    print(f"Output directory: {output_dir}")
+    print()
+    
+    # Check available libraries
+    if not any([PLAYWRIGHT_AVAILABLE, SELENIUM_AVAILABLE, HTML2IMAGE_AVAILABLE]):
+        print("ERROR: No screenshot library available!")
+        print("\nPlease install one of the following:")
+        print("  pip install playwright && playwright install chromium")
+        print("  pip install selenium")
+        print("  pip install html2image")
+        sys.exit(1)
+    
+    print("Available screenshot libraries:")
+    if PLAYWRIGHT_AVAILABLE:
+        print("  ✓ Playwright")
+    if SELENIUM_AVAILABLE:
+        print("  ✓ Selenium")
+    if HTML2IMAGE_AVAILABLE:
+        print("  ✓ html2image")
+    print()
+    
+    # Generate images
+    success_count = 0
+    for html_file in html_files:
+        print(f"Generating image from {html_file.name}...")
+        if generate_image(html_file, output_dir):
+            success_count += 1
+        else:
+            print(f"✗ Failed to generate image from {html_file.name}")
+        print()
+    
+    print(f"Successfully generated {success_count}/{len(html_files)} images")
+    print(f"Images saved to: {output_dir}")
+
+
+if __name__ == "__main__":
+    main()
+
--- a/docs/mockups/images/color-picker-demo.png
+++ b/docs/mockups/images/color-picker-demo.png
--- a/docs/mockups/images/dashboard.png
+++ b/docs/mockups/images/dashboard.png
--- a/docs/mockups/images/device-management.png
+++ b/docs/mockups/images/device-management.png
--- a/docs/mockups/images/index.png
+++ b/docs/mockups/images/index.png
--- a/docs/mockups/images/pattern-selector.png
+++ b/docs/mockups/images/pattern-selector.png
--- a/docs/mockups/images/presets.png
+++ b/docs/mockups/images/presets.png
--- a/docs/mockups/images/settings.png
+++ b/docs/mockups/images/settings.png
--- a/docs/mockups/index.html
+++ b/docs/mockups/index.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LED Driver - UI Mockups</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 40px 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .container {
+            max-width: 800px;
+            width: 100%;
+        }
+
+        .header {
+            text-align: center;
+            color: white;
+            margin-bottom: 40px;
+        }
+
+        .header h1 {
+            font-size: 3rem;
+            margin-bottom: 12px;
+        }
+
+        .header p {
+            font-size: 1.25rem;
+            opacity: 0.9;
+        }
+
+        .mockups-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 24px;
+        }
+
+        .mockup-card {
+            background: white;
+            border-radius: 16px;
+            padding: 32px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s;
+            text-decoration: none;
+            color: inherit;
+            display: block;
+        }
+
+        .mockup-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
+        }
+
+        .mockup-icon {
+            font-size: 3rem;
+            margin-bottom: 16px;
+        }
+
+        .mockup-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #667eea;
+            margin-bottom: 8px;
+        }
+
+        .mockup-description {
+            color: #666;
+            line-height: 1.6;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>LED Driver UI Mockups</h1>
+            <p>Example user interfaces for the LED driver system</p>
+        </div>
+
+        <div class="mockups-grid">
+            <a href="dashboard.html" class="mockup-card">
+                <div class="mockup-icon">📊</div>
+                <div class="mockup-title">Dashboard</div>
+                <div class="mockup-description">
+                    Main control panel for managing LED patterns, brightness, colors, and device status.
+                </div>
+            </a>
+
+            <a href="pattern-selector.html" class="mockup-card">
+                <div class="mockup-icon">🎨</div>
+                <div class="mockup-title">Pattern Selector</div>
+                <div class="mockup-description">
+                    Visual interface for selecting from available LED patterns: On, Off, Blink, Chase, Circle, Pulse, Rainbow, and Transition.
+                </div>
+            </a>
+
+            <a href="device-management.html" class="mockup-card">
+                <div class="mockup-icon">🔧</div>
+                <div class="mockup-title">Device Management</div>
+                <div class="mockup-description">
+                    Manage connected LED devices and groups. View device status, assign groups, and configure device settings.
+                </div>
+            </a>
+
+            <a href="settings.html" class="mockup-card">
+                <div class="mockup-icon">⚙️</div>
+                <div class="mockup-title">Settings</div>
+                <div class="mockup-description">
+                    Comprehensive settings panel for configuring LED pin, color order, pattern parameters, and network settings.
+                </div>
+            </a>
+
+            <a href="presets.html" class="mockup-card">
+                <div class="mockup-icon">💾</div>
+                <div class="mockup-title">Presets</div>
+                <div class="mockup-description">
+                    Save, load, and manage preset configurations with pattern, colors, delay, and all N1-N8 parameters for quick pattern switching.
+                </div>
+            </a>
+        </div>
+    </div>
+</body>
+</html>
+
--- a/docs/mockups/pattern-selector.html
+++ b/docs/mockups/pattern-selector.html
@@ -0,0 +1,310 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LED Driver - Pattern Selector</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+            color: #2d3748;
+        }
+
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 8px;
+        }
+
+        .header p {
+            font-size: 1.125rem;
+            color: #718096;
+        }
+
+        .patterns-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 24px;
+        }
+
+        .pattern-card {
+            background: white;
+            border-radius: 16px;
+            padding: 24px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            cursor: pointer;
+            transition: all 0.3s;
+            border: 3px solid transparent;
+        }
+
+        .pattern-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+            border-color: #667eea;
+        }
+
+        .pattern-card.selected {
+            border-color: #667eea;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+
+        .pattern-icon {
+            width: 100%;
+            height: 180px;
+            border-radius: 12px;
+            margin-bottom: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 3rem;
+            background: #f7fafc;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .pattern-card.selected .pattern-icon {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .pattern-name {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+
+        .pattern-description {
+            font-size: 0.875rem;
+            color: #718096;
+            line-height: 1.5;
+        }
+
+        .pattern-card.selected .pattern-description {
+            color: rgba(255, 255, 255, 0.9);
+        }
+
+        .pattern-preview {
+            display: flex;
+            gap: 4px;
+            margin-top: 12px;
+        }
+
+        .preview-dot {
+            flex: 1;
+            height: 8px;
+            border-radius: 4px;
+            background: #e2e8f0;
+        }
+
+        .pattern-card.selected .preview-dot {
+            background: rgba(255, 255, 255, 0.5);
+        }
+
+        .actions {
+            margin-top: 40px;
+            text-align: center;
+        }
+
+        .btn {
+            padding: 16px 48px;
+            border: none;
+            border-radius: 12px;
+            font-size: 1.125rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            margin: 0 12px;
+        }
+
+        .btn-primary {
+            background: #667eea;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: #5568d3;
+            transform: translateY(-2px);
+            box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
+        }
+
+        .btn-secondary {
+            background: white;
+            color: #667eea;
+            border: 2px solid #667eea;
+        }
+
+        .btn-secondary:hover {
+            background: #f0f0ff;
+        }
+
+        /* Pattern-specific icons */
+        .icon-on { background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); }
+        .icon-off { background: #2d3748; }
+        .icon-blink { background: linear-gradient(90deg, #ffd700 25%, #2d3748 25%, #2d3748 50%, #ffd700 50%); }
+        .icon-chase { background: linear-gradient(90deg, #ff0000 0%, #ff6666 50%, #ff0000 100%); }
+        .icon-circle { background: radial-gradient(circle, #00ff00 0%, #66ff66 50%, #00ff00 100%); }
+        .icon-pulse { background: radial-gradient(circle, #0000ff 0%, #6666ff 50%, #0000ff 100%); }
+        .icon-rainbow { background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); }
+        .icon-transition { background: linear-gradient(135deg, #ff0000 0%, #0000ff 100%); }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Select LED Pattern</h1>
+            <p>Choose a pattern to display on your LED devices</p>
+        </div>
+
+        <div class="patterns-grid">
+            <div class="pattern-card" data-pattern="on">
+                <div class="pattern-icon icon-on">💡</div>
+                <div class="pattern-name">On</div>
+                <div class="pattern-description">Solid color display - LEDs stay on with selected color</div>
+                <div class="pattern-preview">
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                </div>
+            </div>
+
+            <div class="pattern-card" data-pattern="off">
+                <div class="pattern-icon icon-off">⚫</div>
+                <div class="pattern-name">Off</div>
+                <div class="pattern-description">Turn all LEDs off</div>
+                <div class="pattern-preview">
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                </div>
+            </div>
+
+            <div class="pattern-card" data-pattern="blink">
+                <div class="pattern-icon icon-blink">✨</div>
+                <div class="pattern-name">Blink</div>
+                <div class="pattern-description">All LEDs blink on and off together</div>
+                <div class="pattern-preview">
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                </div>
+            </div>
+
+            <div class="pattern-card" data-pattern="chase">
+                <div class="pattern-icon icon-chase">🏃</div>
+                <div class="pattern-name">Chase</div>
+                <div class="pattern-description">Light chases along the LED strip</div>
+                <div class="pattern-preview">
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                </div>
+            </div>
+
+            <div class="pattern-card" data-pattern="circle">
+                <div class="pattern-icon icon-circle">⭕</div>
+                <div class="pattern-name">Circle</div>
+                <div class="pattern-description">Circular pattern that rotates around the strip</div>
+                <div class="pattern-preview">
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                </div>
+            </div>
+
+            <div class="pattern-card" data-pattern="pulse">
+                <div class="pattern-icon icon-pulse">💓</div>
+                <div class="pattern-name">Pulse</div>
+                <div class="pattern-description">Pulsing effect that fades in and out</div>
+                <div class="pattern-preview">
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                </div>
+            </div>
+
+            <div class="pattern-card" data-pattern="rainbow">
+                <div class="pattern-icon icon-rainbow">🌈</div>
+                <div class="pattern-name">Rainbow</div>
+                <div class="pattern-description">Smooth rainbow color transition across LEDs</div>
+                <div class="pattern-preview">
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                </div>
+            </div>
+
+            <div class="pattern-card" data-pattern="transition">
+                <div class="pattern-icon icon-transition">🔄</div>
+                <div class="pattern-name">Transition</div>
+                <div class="pattern-description">Smooth color transition between selected colors</div>
+                <div class="pattern-preview">
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                    <div class="preview-dot"></div>
+                </div>
+            </div>
+        </div>
+
+        <div class="actions">
+            <button class="btn btn-secondary" onclick="window.history.back()">Cancel</button>
+            <button class="btn btn-primary" id="apply-btn">Apply Pattern</button>
+        </div>
+    </div>
+
+    <script>
+        let selectedPattern = null;
+
+        document.querySelectorAll('.pattern-card').forEach(card => {
+            card.addEventListener('click', function() {
+                document.querySelectorAll('.pattern-card').forEach(c => c.classList.remove('selected'));
+                this.classList.add('selected');
+                selectedPattern = this.dataset.pattern;
+            });
+        });
+
+        document.getElementById('apply-btn').addEventListener('click', function() {
+            if (selectedPattern) {
+                alert(`Applying pattern: ${selectedPattern}`);
+                // In real implementation, this would send the pattern to the device
+            } else {
+                alert('Please select a pattern first');
+            }
+        });
+    </script>
+</body>
+</html>
+
--- a/docs/mockups/presets.html
+++ b/docs/mockups/presets.html
@@ -0,0 +1,968 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LED Driver - Presets</title>
+    <link rel="stylesheet" href="color-picker.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+            color: #333;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .header {
+            background: white;
+            border-radius: 12px;
+            padding: 24px;
+            margin-bottom: 24px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .header h1 {
+            color: #667eea;
+            margin-bottom: 8px;
+        }
+
+        .header p {
+            color: #666;
+        }
+
+        .controls {
+            background: white;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 24px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            display: flex;
+            gap: 16px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .search-box {
+            flex: 1;
+            min-width: 200px;
+            padding: 12px;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 1rem;
+        }
+
+        .search-box:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .filter-group {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+        }
+
+        .filter-select {
+            padding: 12px;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 1rem;
+            background: white;
+            cursor: pointer;
+        }
+
+        .filter-select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .view-toggle {
+            display: flex;
+            gap: 8px;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+
+        .view-btn {
+            padding: 8px 16px;
+            border: none;
+            background: white;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .view-btn.active {
+            background: #667eea;
+            color: white;
+        }
+
+        .presets-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 24px;
+            margin-bottom: 24px;
+        }
+
+        .preset-card {
+            background: white;
+            border-radius: 12px;
+            padding: 24px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s;
+            cursor: pointer;
+            border: 3px solid transparent;
+        }
+
+        .preset-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+            border-color: #667eea;
+        }
+
+        .preset-card.selected {
+            border-color: #667eea;
+            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+        }
+
+        .preset-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: start;
+            margin-bottom: 16px;
+        }
+
+        .preset-name {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 8px;
+        }
+
+        .pattern-badge {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            background: #667eea;
+            color: white;
+            margin-bottom: 12px;
+        }
+
+        .pattern-badge.on { background: #4caf50; }
+        .pattern-badge.off { background: #757575; }
+        .pattern-badge.blink { background: #ff9800; }
+        .pattern-badge.chase { background: #f44336; }
+        .pattern-badge.circle { background: #00bcd4; }
+        .pattern-badge.pulse { background: #e91e63; }
+        .pattern-badge.rainbow { background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); }
+        .pattern-badge.transition { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+
+        .color-preview {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 16px;
+            flex-wrap: wrap;
+        }
+
+        .color-swatch {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            border: 2px solid #e0e0e0;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .preset-info {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+            margin-bottom: 16px;
+            font-size: 0.875rem;
+            color: #666;
+        }
+
+        .info-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .info-label {
+            font-weight: 500;
+        }
+
+        .info-value {
+            color: #667eea;
+            font-weight: 600;
+        }
+
+        .preset-actions {
+            display: flex;
+            gap: 8px;
+            margin-top: 16px;
+            padding-top: 16px;
+            border-top: 1px solid #e0e0e0;
+        }
+
+        .btn {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 8px;
+            font-size: 0.875rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            flex: 1;
+        }
+
+        .btn-primary {
+            background: #667eea;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: #5568d3;
+        }
+
+        .btn-secondary {
+            background: #e0e0e0;
+            color: #333;
+        }
+
+        .btn-secondary:hover {
+            background: #d0d0d0;
+        }
+
+        .btn-danger {
+            background: #f44336;
+            color: white;
+        }
+
+        .btn-danger:hover {
+            background: #d32f2f;
+        }
+
+        .btn-icon {
+            padding: 8px;
+            min-width: 40px;
+        }
+
+        .btn-large {
+            padding: 16px 32px;
+            font-size: 1rem;
+        }
+
+        /* Modal Styles */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .modal.active {
+            display: flex;
+        }
+
+        .modal-content {
+            background: white;
+            border-radius: 12px;
+            padding: 32px;
+            max-width: 600px;
+            width: 100%;
+            max-height: 90vh;
+            overflow-y: auto;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+
+        .modal-header {
+            margin-bottom: 24px;
+        }
+
+        .modal-header h2 {
+            color: #667eea;
+            margin-bottom: 8px;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+            color: #333;
+        }
+
+        .form-group input,
+        .form-group select {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 1rem;
+        }
+
+        .form-group input:focus,
+        .form-group select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .form-group small {
+            display: block;
+            margin-top: 4px;
+            color: #666;
+            font-size: 0.875rem;
+        }
+
+        .color-inputs {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+
+        .color-input-wrapper {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .color-input-wrapper {
+            display: inline-block;
+        }
+
+        .params-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 12px;
+        }
+
+        .n-value-input {
+            width: 100%;
+        }
+
+        .n-value-input:focus {
+            border-color: #667eea;
+            outline: none;
+        }
+
+        .param-input {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .param-input label {
+            font-size: 0.75rem;
+            margin-bottom: 4px;
+        }
+
+        .param-input input {
+            padding: 8px;
+            font-size: 0.875rem;
+        }
+
+        .modal-actions {
+            display: flex;
+            gap: 12px;
+            margin-top: 24px;
+            padding-top: 24px;
+            border-top: 1px solid #e0e0e0;
+        }
+
+        .empty-state {
+            background: white;
+            border-radius: 12px;
+            padding: 60px 40px;
+            text-align: center;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .empty-state-icon {
+            font-size: 4rem;
+            margin-bottom: 16px;
+        }
+
+        .empty-state h2 {
+            color: #667eea;
+            margin-bottom: 8px;
+        }
+
+        .empty-state p {
+            color: #666;
+            margin-bottom: 24px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <div>
+                <h1>Preset Management</h1>
+                <p>Save and manage your favorite LED pattern configurations</p>
+            </div>
+            <div style="display: flex; gap: 12px; align-items: center;">
+                <button class="btn btn-secondary btn-large" onclick="syncPresets()" title="Sync all presets to all devices">🔄 Sync Presets to All Devices</button>
+                <button class="btn btn-primary btn-large" onclick="showCreateModal()">+ Create Preset</button>
+            </div>
+        </div>
+
+        <div class="controls">
+            <input type="text" class="search-box" placeholder="Search presets..." id="search-input">
+            <div class="filter-group">
+                <select class="filter-select" id="pattern-filter">
+                    <option value="">All Patterns</option>
+                    <option value="on">On</option>
+                    <option value="off">Off</option>
+                    <option value="blink">Blink</option>
+                    <option value="chase">Chase</option>
+                    <option value="circle">Circle</option>
+                    <option value="pulse">Pulse</option>
+                    <option value="rainbow">Rainbow</option>
+                    <option value="transition">Transition</option>
+                </select>
+                <select class="filter-select" id="sort-select">
+                    <option value="name">Sort by Name</option>
+                    <option value="recent">Recently Used</option>
+                    <option value="created">Recently Created</option>
+                </select>
+                <div class="view-toggle">
+                    <button class="view-btn active" onclick="setView('grid')" id="view-grid">Grid</button>
+                    <button class="view-btn" onclick="setView('list')" id="view-list">List</button>
+                </div>
+            </div>
+        </div>
+
+        <div class="presets-grid" id="presets-container">
+            <!-- Preset Card 1 -->
+            <div class="preset-card" data-pattern="rainbow" data-name="Fast Rainbow">
+                <div class="preset-header">
+                    <div>
+                        <div class="preset-name">Fast Rainbow</div>
+                        <span class="pattern-badge rainbow">Rainbow</span>
+                    </div>
+                </div>
+                <div class="color-preview">
+                    <div class="color-swatch" style="background: #FF0000;"></div>
+                    <div class="color-swatch" style="background: #00FF00;"></div>
+                    <div class="color-swatch" style="background: #0000FF;"></div>
+                </div>
+                <div class="preset-info">
+                    <div class="info-item">
+                        <span class="info-label">Delay:</span>
+                        <span class="info-value">30ms</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="info-label">N1:</span>
+                        <span class="info-value">10</span>
+                    </div>
+                </div>
+                <div class="preset-actions">
+                    <button class="btn btn-primary" onclick="applyPreset('Fast Rainbow')">Apply</button>
+                    <button class="btn btn-secondary btn-icon" onclick="editPreset('Fast Rainbow')" title="Edit">✏️</button>
+                    <button class="btn btn-danger btn-icon" onclick="deletePreset('Fast Rainbow')" title="Delete">🗑️</button>
+                </div>
+            </div>
+
+            <!-- Preset Card 2 -->
+            <div class="preset-card" data-pattern="pulse" data-name="Slow Pulse">
+                <div class="preset-header">
+                    <div>
+                        <div class="preset-name">Slow Pulse</div>
+                        <span class="pattern-badge pulse">Pulse</span>
+                    </div>
+                </div>
+                <div class="color-preview">
+                    <div class="color-swatch" style="background: #FF0000;"></div>
+                    <div class="color-swatch" style="background: #0000FF;"></div>
+                </div>
+                <div class="preset-info">
+                    <div class="info-item">
+                        <span class="info-label">Delay:</span>
+                        <span class="info-value">200ms</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="info-label">N1:</span>
+                        <span class="info-value">500</span>
+                    </div>
+                </div>
+                <div class="preset-actions">
+                    <button class="btn btn-primary" onclick="applyPreset('Slow Pulse')">Apply</button>
+                    <button class="btn btn-secondary btn-icon" onclick="editPreset('Slow Pulse')" title="Edit">✏️</button>
+                    <button class="btn btn-danger btn-icon" onclick="deletePreset('Slow Pulse')" title="Delete">🗑️</button>
+                </div>
+            </div>
+
+            <!-- Preset Card 3 -->
+            <div class="preset-card" data-pattern="chase" data-name="Red Blue Chase">
+                <div class="preset-header">
+                    <div>
+                        <div class="preset-name">Red Blue Chase</div>
+                        <span class="pattern-badge chase">Chase</span>
+                    </div>
+                </div>
+                <div class="color-preview">
+                    <div class="color-swatch" style="background: #FF0000;"></div>
+                    <div class="color-swatch" style="background: #0000FF;"></div>
+                </div>
+                <div class="preset-info">
+                    <div class="info-item">
+                        <span class="info-label">Delay:</span>
+                        <span class="info-value">100ms</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="info-label">N1:</span>
+                        <span class="info-value">5</span>
+                    </div>
+                </div>
+                <div class="preset-actions">
+                    <button class="btn btn-primary" onclick="applyPreset('Red Blue Chase')">Apply</button>
+                    <button class="btn btn-secondary btn-icon" onclick="editPreset('Red Blue Chase')" title="Edit">✏️</button>
+                    <button class="btn btn-danger btn-icon" onclick="deletePreset('Red Blue Chase')" title="Delete">🗑️</button>
+                </div>
+            </div>
+
+            <!-- Preset Card 4 -->
+            <div class="preset-card" data-pattern="circle" data-name="Loading Circle">
+                <div class="preset-header">
+                    <div>
+                        <div class="preset-name">Loading Circle</div>
+                        <span class="pattern-badge circle">Circle</span>
+                    </div>
+                </div>
+                <div class="color-preview">
+                    <div class="color-swatch" style="background: #00FF00;"></div>
+                </div>
+                <div class="preset-info">
+                    <div class="info-item">
+                        <span class="info-label">Delay:</span>
+                        <span class="info-value">50ms</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="info-label">N1:</span>
+                        <span class="info-value">50</span>
+                    </div>
+                </div>
+                <div class="preset-actions">
+                    <button class="btn btn-primary" onclick="applyPreset('Loading Circle')">Apply</button>
+                    <button class="btn btn-secondary btn-icon" onclick="editPreset('Loading Circle')" title="Edit">✏️</button>
+                    <button class="btn btn-danger btn-icon" onclick="deletePreset('Loading Circle')" title="Delete">🗑️</button>
+                </div>
+            </div>
+
+            <!-- Preset Card 5 -->
+            <div class="preset-card" data-pattern="blink" data-name="Party Blink">
+                <div class="preset-header">
+                    <div>
+                        <div class="preset-name">Party Blink</div>
+                        <span class="pattern-badge blink">Blink</span>
+                    </div>
+                </div>
+                <div class="color-preview">
+                    <div class="color-swatch" style="background: #FF00FF;"></div>
+                    <div class="color-swatch" style="background: #00FFFF;"></div>
+                    <div class="color-swatch" style="background: #FFFF00;"></div>
+                </div>
+                <div class="preset-info">
+                    <div class="info-item">
+                        <span class="info-label">Delay:</span>
+                        <span class="info-value">150ms</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="info-label">N1:</span>
+                        <span class="info-value">0</span>
+                    </div>
+                </div>
+                <div class="preset-actions">
+                    <button class="btn btn-primary" onclick="applyPreset('Party Blink')">Apply</button>
+                    <button class="btn btn-secondary btn-icon" onclick="editPreset('Party Blink')" title="Edit">✏️</button>
+                    <button class="btn btn-danger btn-icon" onclick="deletePreset('Party Blink')" title="Delete">🗑️</button>
+                </div>
+            </div>
+
+            <!-- Preset Card 6 -->
+            <div class="preset-card" data-pattern="transition" data-name="Smooth Transition">
+                <div class="preset-header">
+                    <div>
+                        <div class="preset-name">Smooth Transition</div>
+                        <span class="pattern-badge transition">Transition</span>
+                    </div>
+                </div>
+                <div class="color-preview">
+                    <div class="color-swatch" style="background: #FF0000;"></div>
+                    <div class="color-swatch" style="background: #00FF00;"></div>
+                    <div class="color-swatch" style="background: #0000FF;"></div>
+                    <div class="color-swatch" style="background: #FFFF00;"></div>
+                </div>
+                <div class="preset-info">
+                    <div class="info-item">
+                        <span class="info-label">Delay:</span>
+                        <span class="info-value">100ms</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="info-label">N1:</span>
+                        <span class="info-value">0</span>
+                    </div>
+                </div>
+                <div class="preset-actions">
+                    <button class="btn btn-primary" onclick="applyPreset('Smooth Transition')">Apply</button>
+                    <button class="btn btn-secondary btn-icon" onclick="editPreset('Smooth Transition')" title="Edit">✏️</button>
+                    <button class="btn btn-danger btn-icon" onclick="deletePreset('Smooth Transition')" title="Delete">🗑️</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Create/Edit Preset Modal -->
+    <div class="modal" id="preset-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 id="modal-title">Create Preset</h2>
+                <p>Configure your preset settings</p>
+            </div>
+            <form id="preset-form">
+                <div class="form-group">
+                    <label for="preset-name">Preset Name *</label>
+                    <input type="text" id="preset-name" required placeholder="Enter preset name">
+                    <small>Unique identifier for this preset</small>
+                </div>
+
+                <div class="form-group">
+                    <label for="preset-pattern">Pattern *</label>
+                    <select id="preset-pattern" required>
+                        <option value="on">On</option>
+                        <option value="off">Off</option>
+                        <option value="blink">Blink</option>
+                        <option value="chase">Chase</option>
+                        <option value="circle">Circle</option>
+                        <option value="pulse">Pulse</option>
+                        <option value="rainbow">Rainbow</option>
+                        <option value="transition">Transition</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label>Colors *</label>
+                    <div class="color-inputs" id="color-inputs">
+                        <!-- Color pickers will be added here -->
+                    </div>
+                    <button type="button" class="btn btn-secondary" onclick="addColorPicker()" style="margin-top: 8px;">+ Add Color</button>
+                    <small>Minimum 2 colors required</small>
+                </div>
+
+                <div class="form-group">
+                    <label for="preset-delay">
+                        Delay (ms) *
+                        <span id="delay-value-display" style="margin-left: 12px; color: #667eea; font-weight: 600;">100</span>
+                    </label>
+                    <input type="range" id="preset-delay" min="10" max="1000" value="100" step="10" required>
+                    <small>Animation speed (10-1000 milliseconds)</small>
+                </div>
+
+                <div class="form-group">
+                    <label for="step-offset">Step Offset</label>
+                    <input type="number" id="step-offset" value="0" min="-1000" max="1000">
+                    <small>Step offset for group synchronization. Applied per device when preset is used in a group.</small>
+                </div>
+
+                <div class="form-group">
+                    <label for="step-increment">Step Increment</label>
+                    <input type="number" id="step-increment" value="1" min="1" max="255">
+                    <small>Amount step counter increments per cycle. Controls pattern advancement speed.</small>
+                </div>
+
+                <div class="form-group">
+                    <label>Pattern Parameters (N1-N8)</label>
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+                        <small style="margin: 0;">Pattern-specific parameters (0-255, varies by pattern)</small>
+                        <button type="button" class="btn btn-secondary" onclick="setAllNValues(0)" style="padding: 6px 12px; font-size: 0.75rem;">Reset All to 0</button>
+                    </div>
+                    <div class="params-grid">
+                        <div class="param-input">
+                            <label>N1</label>
+                            <input type="number" id="n1" min="0" max="255" value="0" class="n-value-input">
+                        </div>
+                        <div class="param-input">
+                            <label>N2</label>
+                            <input type="number" id="n2" min="0" max="255" value="0" class="n-value-input">
+                        </div>
+                        <div class="param-input">
+                            <label>N3</label>
+                            <input type="number" id="n3" min="0" max="255" value="0" class="n-value-input">
+                        </div>
+                        <div class="param-input">
+                            <label>N4</label>
+                            <input type="number" id="n4" min="0" max="255" value="0" class="n-value-input">
+                        </div>
+                        <div class="param-input">
+                            <label>N5</label>
+                            <input type="number" id="n5" min="0" max="255" value="0" class="n-value-input">
+                        </div>
+                        <div class="param-input">
+                            <label>N6</label>
+                            <input type="number" id="n6" min="0" max="255" value="0" class="n-value-input">
+                        </div>
+                        <div class="param-input">
+                            <label>N7</label>
+                            <input type="number" id="n7" min="0" max="255" value="0" class="n-value-input">
+                        </div>
+                        <div class="param-input">
+                            <label>N8</label>
+                            <input type="number" id="n8" min="0" max="255" value="0" class="n-value-input">
+                        </div>
+                    </div>
+                    <div style="margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap;">
+                        <button type="button" class="btn btn-secondary" onclick="setAllNValues(0)" style="padding: 8px 16px; font-size: 0.875rem;">Set All to 0</button>
+                        <button type="button" class="btn btn-secondary" onclick="copyNValuesFromCurrent()" style="padding: 8px 16px; font-size: 0.875rem;">Copy from Current Settings</button>
+                        <button type="button" class="btn btn-secondary" onclick="showNValueHelp()" style="padding: 8px 16px; font-size: 0.875rem;">ℹ️ Parameter Help</button>
+                    </div>
+                </div>
+
+                <div class="modal-actions">
+                    <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Save Preset</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <script>
+        let currentView = 'grid';
+        let editingPreset = null;
+
+        // Delay slider update
+        document.getElementById('preset-delay').addEventListener('input', function(e) {
+            document.getElementById('delay-value-display').textContent = e.target.value;
+        });
+
+        // Search functionality
+        document.getElementById('search-input').addEventListener('input', function(e) {
+            filterPresets();
+        });
+
+        // Filter functionality
+        document.getElementById('pattern-filter').addEventListener('change', function(e) {
+            filterPresets();
+        });
+
+        // Sort functionality
+        document.getElementById('sort-select').addEventListener('change', function(e) {
+            sortPresets(e.target.value);
+        });
+
+        function filterPresets() {
+            const search = document.getElementById('search-input').value.toLowerCase();
+            const patternFilter = document.getElementById('pattern-filter').value;
+            const cards = document.querySelectorAll('.preset-card');
+
+            cards.forEach(card => {
+                const name = card.dataset.name.toLowerCase();
+                const pattern = card.dataset.pattern;
+                const matchesSearch = name.includes(search);
+                const matchesPattern = !patternFilter || pattern === patternFilter;
+
+                if (matchesSearch && matchesPattern) {
+                    card.style.display = '';
+                } else {
+                    card.style.display = 'none';
+                }
+            });
+        }
+
+        function sortPresets(sortBy) {
+            const container = document.getElementById('presets-container');
+            const cards = Array.from(container.querySelectorAll('.preset-card'));
+
+            cards.sort((a, b) => {
+                if (sortBy === 'name') {
+                    return a.dataset.name.localeCompare(b.dataset.name);
+                } else if (sortBy === 'recent') {
+                    // In real implementation, would use actual usage data
+                    return 0;
+                } else if (sortBy === 'created') {
+                    // In real implementation, would use creation timestamps
+                    return 0;
+                }
+                return 0;
+            });
+
+            cards.forEach(card => container.appendChild(card));
+        }
+
+        function setView(view) {
+            currentView = view;
+            const container = document.getElementById('presets-container');
+            const gridBtn = document.getElementById('view-grid');
+            const listBtn = document.getElementById('view-list');
+
+            if (view === 'grid') {
+                container.style.gridTemplateColumns = 'repeat(auto-fill, minmax(300px, 1fr))';
+                gridBtn.classList.add('active');
+                listBtn.classList.remove('active');
+            } else {
+                container.style.gridTemplateColumns = '1fr';
+                gridBtn.classList.remove('active');
+                listBtn.classList.add('active');
+            }
+        }
+
+        function showCreateModal() {
+            editingPreset = null;
+            document.getElementById('modal-title').textContent = 'Create Preset';
+            document.getElementById('preset-form').reset();
+            document.getElementById('preset-delay').value = 100;
+            document.getElementById('delay-value-display').textContent = '100';
+            // Reset to 2 colors
+            initializeColorPickers();
+            document.getElementById('preset-modal').classList.add('active');
+        }
+
+        // Initialize color pickers function (defined before showCreateModal)
+        const presetColorPickers = [];
+
+        function initializeColorPickers() {
+            const colorInputs = document.getElementById('color-inputs');
+            colorInputs.innerHTML = '';
+            presetColorPickers.length = 0;
+            addColorPicker('#FF0000');
+            addColorPicker('#0000FF');
+        }
+
+        function addColorPicker(color = '#00FF00') {
+            const colorInputs = document.getElementById('color-inputs');
+            const wrapper = document.createElement('div');
+            wrapper.className = 'color-input-wrapper';
+            colorInputs.appendChild(wrapper);
+            
+            const picker = new ColorPicker(wrapper, {
+                initialColor: color,
+                onColorChange: (newColor) => {
+                    console.log('Preset color changed:', newColor);
+                }
+            });
+            
+            presetColorPickers.push(picker);
+            return picker;
+        }
+
+        function editPreset(name) {
+            editingPreset = name;
+            document.getElementById('modal-title').textContent = 'Edit Preset';
+            // In real implementation, would load preset data
+            document.getElementById('preset-name').value = name;
+            document.getElementById('preset-modal').classList.add('active');
+        }
+
+        function closeModal() {
+            document.getElementById('preset-modal').classList.remove('active');
+            editingPreset = null;
+        }
+
+
+        function applyPreset(name) {
+            alert(`Applying preset: ${name}\n(In real implementation, this would send preset configuration to device(s))`);
+        }
+
+        function deletePreset(name) {
+            if (confirm(`Delete preset "${name}"?`)) {
+                alert(`Preset "${name}" deleted\n(In real implementation, this would remove the preset from storage)`);
+            }
+        }
+
+        function syncPresets() {
+            if (confirm('Sync all presets to all devices?\nThis will send all presets from master to all devices via ESPNow.')) {
+                alert('Syncing presets to all devices...\n(In real implementation, this would send all presets via ESPNow to all devices)');
+            }
+        }
+
+        function setAllNValues(value) {
+            for (let i = 1; i <= 8; i++) {
+                document.getElementById(`n${i}`).value = value;
+            }
+        }
+
+        function copyNValuesFromCurrent() {
+            // In real implementation, this would copy from current device settings
+            alert('Copying N values from current device settings...\n(In real implementation, this would load current N1-N8 values from the active device)');
+            // Example: would set values like this:
+            // document.getElementById('n1').value = currentSettings.n1;
+            // ... etc
+        }
+
+        function showNValueHelp() {
+            const helpText = `
+Pattern Parameter Guide:
+
+Rainbow:
+  N1: Step increment (1-255, default: 1)
+
+Pulse:
+  N1: Attack time in ms (0-255)
+  N2: Hold time in ms (0-255)
+  N3: Decay time in ms (0-255)
+
+Chase:
+  N1: LEDs of color 0 (1-255)
+  N2: LEDs of color 1 (1-255)
+  N3: Step movement on odd steps (can be negative)
+  N4: Step movement on even steps (can be negative)
+
+Circle:
+  N1: Head moves per second (1-255)
+  N2: Max length in LEDs (1-255)
+  N3: Tail moves per second (1-255)
+  N4: Min length in LEDs (0-255)
+
+Other patterns:
+  N1-N8: Reserved for future pattern enhancements
+
+All values range from 0-255 unless otherwise specified.
+            `;
+            alert(helpText);
+        }
+
+        // Form submission
+        document.getElementById('preset-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const name = document.getElementById('preset-name').value;
+            const action = editingPreset ? 'updated' : 'created';
+            alert(`Preset "${name}" ${action}!\n(In real implementation, this would save the preset to storage)`);
+            closeModal();
+        });
+
+        // Close modal on outside click
+        document.getElementById('preset-modal').addEventListener('click', function(e) {
+            if (e.target === this) {
+                closeModal();
+            }
+        });
+    </script>
+    <script src="color-picker.js"></script>
+</body>
+</html>
+
--- a/docs/mockups/settings.html
+++ b/docs/mockups/settings.html
@@ -0,0 +1,491 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LED Driver - Settings</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+
+        .header {
+            background: white;
+            border-radius: 12px;
+            padding: 24px;
+            margin-bottom: 24px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .header h1 {
+            color: #667eea;
+            margin-bottom: 8px;
+        }
+
+        .header p {
+            color: #666;
+        }
+
+        .card {
+            background: white;
+            border-radius: 12px;
+            padding: 24px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            margin-bottom: 24px;
+        }
+
+        .card h2 {
+            color: #667eea;
+            margin-bottom: 20px;
+            font-size: 1.5rem;
+            border-bottom: 2px solid #e0e0e0;
+            padding-bottom: 12px;
+        }
+
+        .form-group {
+            margin-bottom: 24px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+            color: #333;
+        }
+
+        .form-group input[type="text"],
+        .form-group input[type="number"],
+        .form-group input[type="password"],
+        .form-group select {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 1rem;
+            transition: border-color 0.2s;
+        }
+
+        .form-group input:focus,
+        .form-group select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .form-group input[type="range"] {
+            width: 100%;
+            height: 8px;
+            border-radius: 4px;
+            background: #e0e0e0;
+            outline: none;
+            -webkit-appearance: none;
+        }
+
+        .form-group input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #667eea;
+            cursor: pointer;
+        }
+
+        .form-group input[type="range"]::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #667eea;
+            cursor: pointer;
+            border: none;
+        }
+
+        .value-display {
+            display: inline-block;
+            margin-left: 12px;
+            font-weight: 600;
+            color: #667eea;
+            min-width: 60px;
+        }
+
+        .form-group small {
+            display: block;
+            margin-top: 4px;
+            color: #666;
+            font-size: 0.875rem;
+        }
+
+        .checkbox-group {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .checkbox-group input[type="checkbox"] {
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+        }
+
+        .color-order {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+
+        .color-order-option {
+            flex: 1;
+            min-width: 120px;
+            padding: 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .color-order-option:hover {
+            border-color: #667eea;
+        }
+
+        .color-order-option.selected {
+            border-color: #667eea;
+            background: #667eea;
+            color: white;
+        }
+
+        .color-order-option .color-boxes {
+            display: flex;
+            justify-content: center;
+            gap: 4px;
+            margin-top: 8px;
+        }
+
+        .color-box {
+            width: 30px;
+            height: 30px;
+            border-radius: 4px;
+        }
+
+        .color-box.r { background: #ff0000; }
+        .color-box.g { background: #00ff00; }
+        .color-box.b { background: #0000ff; }
+
+        .actions {
+            display: flex;
+            gap: 12px;
+            margin-top: 32px;
+            padding-top: 24px;
+            border-top: 2px solid #e0e0e0;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .btn-primary {
+            background: #667eea;
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background: #5568d3;
+        }
+
+        .btn-secondary {
+            background: #e0e0e0;
+            color: #333;
+        }
+
+        .btn-secondary:hover {
+            background: #d0d0d0;
+        }
+
+        .btn-danger {
+            background: #f44336;
+            color: white;
+        }
+
+        .btn-danger:hover {
+            background: #d32f2f;
+        }
+
+        .btn-full {
+            flex: 1;
+        }
+
+        .section-divider {
+            height: 1px;
+            background: #e0e0e0;
+            margin: 24px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Device Settings</h1>
+            <p>Configure your LED driver device settings</p>
+        </div>
+
+        <!-- Basic Settings -->
+        <div class="card">
+            <h2>Basic Settings</h2>
+            
+            <div class="form-group">
+                <label>Device Name</label>
+                <input type="text" id="device-name" value="led-device1" placeholder="led-device1">
+                <small>Unique identifier for this device</small>
+            </div>
+
+            <div class="form-group">
+                <label>LED Pin</label>
+                <input type="number" id="led-pin" value="10" min="0" max="40">
+                <small>GPIO pin number connected to LED data line</small>
+            </div>
+
+            <div class="form-group">
+                <label>Number of LEDs</label>
+                <input type="number" id="num-leds" value="50" min="1" max="1000">
+                <small>Total number of LEDs in your strip</small>
+            </div>
+
+            <div class="form-group">
+                <label>Color Order</label>
+                <div class="color-order">
+                    <div class="color-order-option selected" data-order="rgb">
+                        RGB
+                        <div class="color-boxes">
+                            <div class="color-box r"></div>
+                            <div class="color-box g"></div>
+                            <div class="color-box b"></div>
+                        </div>
+                    </div>
+                    <div class="color-order-option" data-order="rbg">
+                        RBG
+                        <div class="color-boxes">
+                            <div class="color-box r"></div>
+                            <div class="color-box b"></div>
+                            <div class="color-box g"></div>
+                        </div>
+                    </div>
+                    <div class="color-order-option" data-order="grb">
+                        GRB
+                        <div class="color-boxes">
+                            <div class="color-box g"></div>
+                            <div class="color-box r"></div>
+                            <div class="color-box b"></div>
+                        </div>
+                    </div>
+                    <div class="color-order-option" data-order="gbr">
+                        GBR
+                        <div class="color-boxes">
+                            <div class="color-box g"></div>
+                            <div class="color-box b"></div>
+                            <div class="color-box r"></div>
+                        </div>
+                    </div>
+                    <div class="color-order-option" data-order="brg">
+                        BRG
+                        <div class="color-boxes">
+                            <div class="color-box b"></div>
+                            <div class="color-box r"></div>
+                            <div class="color-box g"></div>
+                        </div>
+                    </div>
+                    <div class="color-order-option" data-order="bgr">
+                        BGR
+                        <div class="color-boxes">
+                            <div class="color-box b"></div>
+                            <div class="color-box g"></div>
+                            <div class="color-box r"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Pattern Settings -->
+        <div class="card">
+            <h2>Pattern Settings</h2>
+            
+            <div class="form-group">
+                <label>Pattern</label>
+                <select id="pattern">
+                    <option value="on">On</option>
+                    <option value="off">Off</option>
+                    <option value="blink">Blink</option>
+                    <option value="chase">Chase</option>
+                    <option value="circle">Circle</option>
+                    <option value="pulse">Pulse</option>
+                    <option value="rainbow">Rainbow</option>
+                    <option value="transition">Transition</option>
+                </select>
+            </div>
+
+            <div class="form-group">
+                <label>
+                    Brightness
+                    <span class="value-display" id="brightness-value">100</span>%
+                </label>
+                <input type="range" id="brightness" min="0" max="100" value="100">
+            </div>
+
+            <div class="form-group">
+                <label>
+                    Delay
+                    <span class="value-display" id="delay-value">100</span>ms
+                </label>
+                <input type="range" id="delay" min="10" max="1000" value="100" step="10">
+            </div>
+        </div>
+
+        <!-- Advanced Settings -->
+        <div class="card">
+            <h2>Advanced Settings</h2>
+            
+            <div class="form-group">
+                <label>Step Counter</label>
+                <input type="text" id="step-counter" value="0" readonly style="background: #f5f5f5; cursor: not-allowed;">
+                <small>Current step position in pattern (read-only)</small>
+            </div>
+
+            <div class="form-group">
+                <label for="step-increment">
+                    Step Increment
+                </label>
+                <input type="number" id="step-increment" value="1" min="1" max="255">
+                <small>Amount step counter increments per cycle. Controls pattern advancement speed.</small>
+            </div>
+            
+            <div class="form-group">
+                <label>Pattern Parameters</label>
+                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
+                    <div>
+                        <label style="font-size: 0.875rem;">N1</label>
+                        <input type="number" id="n1" value="0" min="0" max="255">
+                    </div>
+                    <div>
+                        <label style="font-size: 0.875rem;">N2</label>
+                        <input type="number" id="n2" value="0" min="0" max="255">
+                    </div>
+                    <div>
+                        <label style="font-size: 0.875rem;">N3</label>
+                        <input type="number" id="n3" value="0" min="0" max="255">
+                    </div>
+                    <div>
+                        <label style="font-size: 0.875rem;">N4</label>
+                        <input type="number" id="n4" value="0" min="0" max="255">
+                    </div>
+                    <div>
+                        <label style="font-size: 0.875rem;">N5</label>
+                        <input type="number" id="n5" value="0" min="0" max="255">
+                    </div>
+                    <div>
+                        <label style="font-size: 0.875rem;">N6</label>
+                        <input type="number" id="n6" value="0" min="0" max="255">
+                    </div>
+                </div>
+                <small>Pattern-specific parameters (varies by pattern)</small>
+            </div>
+
+            <div class="form-group">
+                <label>Device ID</label>
+                <input type="number" id="device-id" value="1" min="0">
+                <small>Unique numeric identifier</small>
+            </div>
+
+            <div class="form-group">
+                <div class="checkbox-group">
+                    <input type="checkbox" id="debug" checked>
+                    <label for="debug" style="margin: 0;">Debug Mode</label>
+                </div>
+                <small>Enable debug logging</small>
+            </div>
+        </div>
+
+        <!-- Network Settings -->
+        <div class="card">
+            <h2>Network Settings</h2>
+            
+            <div class="form-group">
+                <label>Access Point Name</label>
+                <input type="text" id="ap-name" value="led-AA:BB:CC:DD:EE:01" placeholder="led-device">
+                <small>WiFi access point name for device configuration</small>
+            </div>
+
+            <div class="form-group">
+                <label>Access Point Password</label>
+                <input type="password" id="ap-password" placeholder="Leave empty for open network">
+                <small>Password for the access point (optional)</small>
+            </div>
+
+            <div class="form-group">
+                <div class="checkbox-group">
+                    <input type="checkbox" id="ap-enabled" checked>
+                    <label for="ap-enabled" style="margin: 0;">Enable Access Point</label>
+                </div>
+                <small>Allow device to create its own WiFi network</small>
+            </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="card">
+            <div class="actions">
+                <button class="btn btn-secondary btn-full" onclick="resetSettings()">Reset to Defaults</button>
+                <button class="btn btn-primary btn-full" onclick="saveSettings()">Save Settings</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Brightness slider
+        document.getElementById('brightness').addEventListener('input', function(e) {
+            document.getElementById('brightness-value').textContent = e.target.value;
+        });
+
+        // Delay slider
+        document.getElementById('delay').addEventListener('input', function(e) {
+            document.getElementById('delay-value').textContent = e.target.value;
+        });
+
+        // Color order selection
+        document.querySelectorAll('.color-order-option').forEach(option => {
+            option.addEventListener('click', function() {
+                document.querySelectorAll('.color-order-option').forEach(o => o.classList.remove('selected'));
+                this.classList.add('selected');
+            });
+        });
+
+        function saveSettings() {
+            alert('Settings saved! (This is a mockup)');
+        }
+
+        function resetSettings() {
+            if (confirm('Reset all settings to defaults?')) {
+                alert('Settings reset! (This is a mockup)');
+            }
+        }
+    </script>
+</body>
+</html>
+
--- a/docs/msg.json
+++ b/docs/msg.json
@@ -0,0 +1,23 @@
+{
+    "g":{ 
+        "df": {
+            "pt": "on",
+            "cl": ["#ff0000"],
+            "br": 200,
+            "n1": 10,
+            "n2": 10,
+            "n3": 10,
+            "n4": 10,
+            "n5": 10,
+            "n6": 10,
+            "dl": 100
+        },
+        "dj": {
+            "pt": "blink",
+            "cl": ["#00ff00"],
+            "dl": 500
+        }
+    },
+    "sv": true,
+    "st": 0
+}
--- a/esp32/benchmark_peers.py
+++ b/esp32/benchmark_peers.py
@@ -0,0 +1,112 @@
+# Benchmark: LRU eviction vs add-then-remove-after-use on ESP32.
+# Run on device: mpremote run esp32/benchmark_peers.py
+# (add/del_peer are timed; send() may fail if no peer is listening - timing still valid)
+import espnow
+import network
+import time
+
+BROADCAST = b"\xff\xff\xff\xff\xff\xff"
+MAX_PEERS = 20
+ITERATIONS = 50
+PAYLOAD = b"x" * 32  # small payload
+
+network.WLAN(network.STA_IF).active(True)
+esp = espnow.ESPNow()
+esp.active(True)
+esp.add_peer(BROADCAST)
+
+# Build 19 dummy MACs so we have 20 peers total (broadcast + 19).
+def mac(i):
+    return bytes([0, 0, 0, 0, 0, i])
+peers_list = [mac(i) for i in range(1, 20)]
+for p in peers_list:
+    esp.add_peer(p)
+
+# One "new" MAC we'll add/remove.
+new_mac = bytes([0, 0, 0, 0, 0, 99])
+
+def bench_lru():
+    """LRU: ensure_peer (evict oldest + add new), send, update last_used."""
+    last_used = {BROADCAST: time.ticks_ms()}
+    for p in peers_list:
+        last_used[p] = time.ticks_ms()
+    # Pre-remove one so we have 19; ensure_peer(new) will add 20th.
+    esp.del_peer(peers_list[-1])
+    last_used.pop(peers_list[-1], None)
+    # Now 19 peers. Each iteration: ensure_peer(new) -> add_peer(new), send, update.
+    # Next iter: ensure_peer(new) -> already there, just send. So we need to force
+    # eviction each time: use a different "new" each time so we always evict+add.
+    t0 = time.ticks_us()
+    for i in range(ITERATIONS):
+        addr = bytes([0, 0, 0, 0, 0, 50 + (i % 30)])  # 30 different "new" MACs
+        peers = esp.get_peers()
+        peer_macs = [p[0] for p in peers]
+        if addr not in peer_macs:
+            if len(peer_macs) >= MAX_PEERS:
+                oldest_mac = None
+                oldest_ts = time.ticks_ms()
+                for m in peer_macs:
+                    if m == BROADCAST:
+                        continue
+                    ts = last_used.get(m, 0)
+                    if ts <= oldest_ts:
+                        oldest_ts = ts
+                        oldest_mac = m
+                if oldest_mac is not None:
+                    esp.del_peer(oldest_mac)
+                    last_used.pop(oldest_mac, None)
+            esp.add_peer(addr)
+        esp.send(addr, PAYLOAD)
+        last_used[addr] = time.ticks_ms()
+    t1 = time.ticks_us()
+    return time.ticks_diff(t1, t0)
+
+def bench_add_then_remove():
+    """Add peer, send, del_peer (remove after use). At 20 we must del one first."""
+    # Start full: 20 peers. To add new we del any one, add new, send, del new.
+    victim = peers_list[0]
+    t0 = time.ticks_us()
+    for i in range(ITERATIONS):
+        esp.del_peer(victim)  # make room
+        esp.add_peer(new_mac)
+        esp.send(new_mac, PAYLOAD)
+        esp.del_peer(new_mac)
+        esp.add_peer(victim)  # put victim back so we're at 20 again
+    t1 = time.ticks_us()
+    return time.ticks_diff(t1, t0)
+
+def bench_send_existing():
+    """Baseline: send to existing peer only (no add/del)."""
+    t0 = time.ticks_us()
+    for _ in range(ITERATIONS):
+        esp.send(peers_list[0], PAYLOAD)
+    t1 = time.ticks_us()
+    return time.ticks_diff(t1, t0)
+
+print("ESP-NOW peer benchmark ({} iterations)".format(ITERATIONS))
+print()
+
+# Baseline: send to existing peer
+try:
+    us = bench_send_existing()
+    print("Send to existing peer only: {:>8} us total  {:>7.1f} us/iter".format(us, us / ITERATIONS))
+except Exception as e:
+    print("Send existing failed:", e)
+print()
+
+# LRU: evict oldest then add new, send
+try:
+    us = bench_lru()
+    print("LRU (evict oldest + add + send): {:>8} us total  {:>7.1f} us/iter".format(us, us / ITERATIONS))
+except Exception as e:
+    print("LRU failed:", e)
+print()
+
+# Add then remove after use
+try:
+    us = bench_add_then_remove()
+    print("Add then remove after use:       {:>8} us total  {:>7.1f} us/iter".format(us, us / ITERATIONS))
+except Exception as e:
+    print("Add-then-remove failed:", e)
+print()
+print("Done.")
--- a/esp32/main.py
+++ b/esp32/main.py
@@ -0,0 +1,72 @@
+# Serial-to-ESP-NOW bridge: receives from Pi on UART, forwards to ESP-NOW peers.
+# Wire format: first 6 bytes = destination MAC, rest = payload. Address is always 6 bytes.
+from machine import Pin, UART
+import espnow
+import network
+import time
+
+UART_BAUD = 912000
+BROADCAST = b"\xff\xff\xff\xff\xff\xff"
+MAX_PEERS = 20
+# Match led-driver / controller default settings wifi_channel (1–11)
+WIFI_CHANNEL = 6
+
+sta = network.WLAN(network.STA_IF)
+sta.active(True)
+sta.config(pm=network.WLAN.PM_NONE, channel=WIFI_CHANNEL)
+print("WiFi STA channel:", sta.config("channel"), "(WIFI_CHANNEL=%s)" % WIFI_CHANNEL)
+
+esp = espnow.ESPNow()
+esp.active(True)
+esp.add_peer(BROADCAST)
+
+uart = UART(1, UART_BAUD, tx=Pin(21), rx=Pin(6))
+
+# Track last send time per peer for LRU eviction (remove oldest when at limit).
+last_used = {BROADCAST: time.ticks_ms()}
+
+
+# ESP_ERR_ESPNOW_EXIST: peer already registered (ignore when adding).
+ESP_ERR_ESPNOW_EXIST = -12395
+
+
+def ensure_peer(addr):
+    """Ensure addr is in the peer list. When at 20 peers, remove the oldest-used (LRU)."""
+    peers = esp.get_peers()
+    peer_macs = [p[0] for p in peers]
+    if addr in peer_macs:
+        return
+    if len(peer_macs) >= MAX_PEERS:
+        # Remove the peer we used least recently (oldest).
+        oldest_mac = None
+        oldest_ts = time.ticks_ms()
+        for mac in peer_macs:
+            if mac == BROADCAST:
+                continue
+            ts = last_used.get(mac, 0)
+            if ts <= oldest_ts:
+                oldest_ts = ts
+                oldest_mac = mac
+        if oldest_mac is not None:
+            esp.del_peer(oldest_mac)
+            last_used.pop(oldest_mac, None)
+    try:
+        esp.add_peer(addr)
+    except OSError as e:
+        if e.args[0] != ESP_ERR_ESPNOW_EXIST:
+            raise
+
+
+print("Starting ESP32 main.py")
+
+while True:
+    if uart.any():
+        data = uart.read()
+        if not data or len(data) < 6:
+            continue
+        print(f"Received data: {data}")
+        addr = data[:6]
+        payload = data[6:]
+        ensure_peer(addr)
+        esp.send(addr, payload)
+        last_used[addr] = time.ticks_ms()
--- a/1
+++ b/1
--- a/1
+++ b/1
--- a/lib/microdot/session.py
+++ b/lib/microdot/session.py
@@ -0,0 +1,225 @@
+try:
+    import jwt
+    HAS_JWT = True
+except ImportError:
+    HAS_JWT = False
+    try:
+        import ubinascii
+    except ImportError:
+        import binascii as ubinascii
+    try:
+        import uhashlib as hashlib
+    except ImportError:
+        import hashlib
+    try:
+        import uhmac as hmac
+    except ImportError:
+        try:
+            import hmac
+        except ImportError:
+            hmac = None
+    import json
+
+from microdot.microdot import invoke_handler
+from microdot.helpers import wraps
+
+
+class SessionDict(dict):
+    """A session dictionary.
+
+    The session dictionary is a standard Python dictionary that has been
+    extended with convenience ``save()`` and ``delete()`` methods.
+    """
+    def __init__(self, request, session_dict):
+        super().__init__(session_dict)
+        self.request = request
+
+    def save(self):
+        """Update the session cookie."""
+        self.request.app._session.update(self.request, self)
+
+    def delete(self):
+        """Delete the session cookie."""
+        self.request.app._session.delete(self.request)
+
+
+class Session:
+    """Session handling
+
+    :param app: The application instance.
+    :param secret_key: The secret key, as a string or bytes object.
+    :param cookie_options: A dictionary with cookie options to pass as
+                           arguments to :meth:`Response.set_cookie()
+                           <microdot.Response.set_cookie>`.
+    """
+    secret_key = None
+
+    def __init__(self, app=None, secret_key=None, cookie_options=None):
+        self.secret_key = secret_key
+        self.cookie_options = cookie_options or {}
+        if app is not None:
+            self.initialize(app)
+
+    def initialize(self, app, secret_key=None, cookie_options=None):
+        if secret_key is not None:
+            self.secret_key = secret_key
+        if cookie_options is not None:
+            self.cookie_options = cookie_options
+        if 'path' not in self.cookie_options:
+            self.cookie_options['path'] = '/'
+        if 'http_only' not in self.cookie_options:
+            self.cookie_options['http_only'] = True
+        app._session = self
+
+    def get(self, request):
+        """Retrieve the user session.
+
+        :param request: The client request.
+
+        The return value is a session dictionary with the data stored in the
+        user's session, or ``{}`` if the session data is not available or
+        invalid.
+        """
+        if not self.secret_key:
+            raise ValueError('The session secret key is not configured')
+        if hasattr(request.g, '_session'):
+            return request.g._session
+        session = request.cookies.get('session')
+        if session is None:
+            request.g._session = SessionDict(request, {})
+            return request.g._session
+        request.g._session = SessionDict(request, self.decode(session))
+        return request.g._session
+
+    def update(self, request, session):
+        """Update the user session.
+
+        :param request: The client request.
+        :param session: A dictionary with the update session data for the user.
+
+        Applications would normally not call this method directly, instead they
+        would use the :meth:`SessionDict.save` method on the session
+        dictionary, which calls this method. For example::
+
+            @app.route('/')
+            @with_session
+            def index(request, session):
+                session['foo'] = 'bar'
+                session.save()
+                return 'Hello, World!'
+
+        Calling this method adds a cookie with the updated session to the
+        request currently being processed.
+        """
+        if not self.secret_key:
+            raise ValueError('The session secret key is not configured')
+
+        encoded_session = self.encode(session)
+
+        @request.after_request
+        def _update_session(request, response):
+            response.set_cookie('session', encoded_session,
+                                **self.cookie_options)
+            return response
+
+    def delete(self, request):
+        """Remove the user session.
+
+        :param request: The client request.
+
+        Applications would normally not call this method directly, instead they
+        would use the :meth:`SessionDict.delete` method on the session
+        dictionary, which calls this method. For example::
+
+            @app.route('/')
+            @with_session
+            def index(request, session):
+                session.delete()
+                return 'Hello, World!'
+
+        Calling this method adds a cookie removal header to the request
+        currently being processed.
+        """
+        @request.after_request
+        def _delete_session(request, response):
+            response.delete_cookie('session', **self.cookie_options)
+            return response
+
+    def encode(self, payload, secret_key=None):
+        """Encode session data using JWT if available, otherwise use simple HMAC."""
+        if HAS_JWT:
+            return jwt.encode(payload, secret_key or self.secret_key,
+                              algorithm='HS256')
+        else:
+            # Simple encoding for MicroPython: base64(json) + HMAC signature
+            key = (secret_key or self.secret_key).encode() if isinstance(secret_key or self.secret_key, str) else (secret_key or self.secret_key)
+            payload_json = json.dumps(payload)
+            payload_b64 = ubinascii.b2a_base64(payload_json.encode()).decode().strip()
+            
+            # Create HMAC signature
+            if hmac:
+                # Use hmac module if available
+                h = hmac.new(key, payload_json.encode(), hashlib.sha256)
+            else:
+                # Fallback: simple SHA256(key + message)
+                h = hashlib.sha256(key + payload_json.encode())
+            signature = ubinascii.b2a_base64(h.digest()).decode().strip()
+            
+            return f"{payload_b64}.{signature}"
+
+    def decode(self, session, secret_key=None):
+        """Decode session data using JWT if available, otherwise use simple HMAC."""
+        if HAS_JWT:
+            try:
+                payload = jwt.decode(session, secret_key or self.secret_key,
+                                     algorithms=['HS256'])
+            except jwt.exceptions.PyJWTError:  # pragma: no cover
+                return {}
+            return payload
+        else:
+            try:
+                # Simple decoding for MicroPython
+                if '.' not in session:
+                    return {}
+                
+                payload_b64, signature = session.rsplit('.', 1)
+                payload_json = ubinascii.a2b_base64(payload_b64).decode()
+                
+                # Verify HMAC signature
+                key = (secret_key or self.secret_key).encode() if isinstance(secret_key or self.secret_key, str) else (secret_key or self.secret_key)
+                if hmac:
+                    # Use hmac module if available
+                    h = hmac.new(key, payload_json.encode(), hashlib.sha256)
+                else:
+                    # Fallback: simple SHA256(key + message)
+                    h = hashlib.sha256(key + payload_json.encode())
+                expected_signature = ubinascii.b2a_base64(h.digest()).decode().strip()
+                
+                if signature != expected_signature:
+                    return {}
+                
+                return json.loads(payload_json)
+            except Exception:
+                return {}
+
+
+def with_session(f):
+    """Decorator that passes the user session to the route handler.
+
+    The session dictionary is passed to the decorated function as an argument
+    after the request object. Example::
+
+        @app.route('/')
+        @with_session
+        def index(request, session):
+            return 'Hello, World!'
+
+    Note that the decorator does not save the session. To update the session,
+    call the :func:`session.save() <microdot.session.SessionDict.save>` method.
+    """
+    @wraps(f)
+    async def wrapper(request, *args, **kwargs):
+        return await invoke_handler(
+            f, request, request.app._session.get(request), *args, **kwargs)
+
+    return wrapper
--- a/pytest.ini
+++ b/pytest.ini
@@ -0,0 +1,4 @@
+[pytest]
+testpaths = tests
+python_files = test_endpoints_pytest.py
+
--- a/scripts/build_help_pdf.sh
+++ b/scripts/build_help_pdf.sh
@@ -0,0 +1,19 @@
+#!/usr/bin/env sh
+# Build docs/help.pdf from docs/help.md.
+# Requires: pandoc, chromium (headless print-to-PDF).
+set -eu
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+# HTML next to docs/help.md so relative image paths (e.g. images/help/*.svg) resolve.
+HTML="$ROOT/docs/.help-print.html"
+trap 'rm -f "$HTML"' EXIT
+
+pandoc "$ROOT/docs/help.md" -s \
+  --css="$ROOT/scripts/help-pdf.css" \
+  --metadata title="LED controller — user guide" \
+  -o "$HTML"
+
+chromium --headless --no-sandbox --disable-gpu \
+  --print-to-pdf="$ROOT/docs/help.pdf" \
+  "file://${HTML}"
+
+echo "Wrote $ROOT/docs/help.pdf ($(wc -c < "$ROOT/docs/help.pdf") bytes)"
--- a/scripts/cp-esp32-main.sh
+++ b/scripts/cp-esp32-main.sh
@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+# Copy esp32/main.py to the connected ESP32 as /main.py (single line, no wrap).
+cd "$(dirname "$0")/.."
+pipenv run mpremote fs cp esp32/main.py :/main.py
--- a/scripts/help-pdf.css
+++ b/scripts/help-pdf.css
@@ -0,0 +1,96 @@
+/* Print stylesheet for docs/help.md → PDF (Chromium headless) */
+@page {
+  margin: 18mm;
+  size: A4;
+}
+html {
+  font-size: 11pt;
+  line-height: 1.4;
+}
+body {
+  font-family: "DejaVu Sans", "Liberation Sans", Helvetica, Arial, sans-serif;
+  color: #222;
+  max-width: 100%;
+}
+h1 {
+  font-size: 1.45rem;
+  border-bottom: 2px solid #333;
+  padding-bottom: 0.25em;
+  margin-top: 0;
+}
+h2 {
+  font-size: 1.15rem;
+  margin-top: 1.25em;
+  page-break-after: avoid;
+}
+h3 {
+  font-size: 1.05rem;
+  margin-top: 1em;
+  page-break-after: avoid;
+}
+code {
+  font-family: "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;
+  font-size: 0.92em;
+  background: #f3f3f3;
+  padding: 0.1em 0.35em;
+  border-radius: 3px;
+}
+pre {
+  font-family: "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;
+  font-size: 0.88em;
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  padding: 0.65em 0.85em;
+  overflow-x: auto;
+  page-break-inside: avoid;
+}
+pre code {
+  background: none;
+  padding: 0;
+}
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.75em 0;
+  font-size: 0.95em;
+  page-break-inside: avoid;
+}
+th, td {
+  border: 1px solid #bbb;
+  padding: 6px 8px;
+  text-align: left;
+  vertical-align: top;
+}
+th {
+  background: #eee;
+}
+a {
+  color: #1a5276;
+  text-decoration: none;
+}
+hr {
+  border: none;
+  border-top: 1px solid #ccc;
+  margin: 1.25em 0;
+}
+ul, ol {
+  padding-left: 1.35em;
+}
+li {
+  margin: 0.2em 0;
+}
+
+/* Images in docs/help.md */
+img {
+  max-width: 100%;
+  height: auto;
+  page-break-inside: avoid;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+p.help-figure-caption {
+  font-size: 0.9em;
+  color: #555;
+  margin: 0.35em 0 1em 0;
+  line-height: 1.35;
+}
--- a/scripts/install-boot-service.sh
+++ b/scripts/install-boot-service.sh
@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+# Install systemd service so LED controller starts at boot.
+# Run once: sudo scripts/install-boot-service.sh
+set -e
+cd "$(dirname "$0")/.."
+REPO="$(pwd)"
+SERVICE_NAME="led-controller.service"
+UNIT_PATH="/etc/systemd/system/$SERVICE_NAME"
+if [ ! -f "scripts/led-controller.service" ]; then
+  echo "Run this script from the repo root."
+  exit 1
+fi
+chmod +x scripts/start.sh
+sudo cp "scripts/led-controller.service" "$UNIT_PATH"
+sudo systemctl daemon-reload
+sudo systemctl enable "$SERVICE_NAME"
+echo "Installed and enabled $SERVICE_NAME"
+echo "Start now:  sudo systemctl start $SERVICE_NAME"
+echo "Status:     sudo systemctl status $SERVICE_NAME"
+echo "Logs:       journalctl -u $SERVICE_NAME -f"
--- a/scripts/led-controller.service
+++ b/scripts/led-controller.service
@@ -0,0 +1,17 @@
+[Unit]
+Description=LED Controller web server
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+Type=simple
+User=pi
+WorkingDirectory=/home/pi/led-controller
+Environment=PORT=80
+Environment=PATH=/home/pi/.local/bin:/usr/local/bin:/usr/bin:/bin
+ExecStart=/bin/bash /home/pi/led-controller/scripts/start.sh
+Restart=on-failure
+RestartSec=5
+
+[Install]
+WantedBy=multi-user.target
--- a/scripts/setup-port80.sh
+++ b/scripts/setup-port80.sh
@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+# Allow the app to bind to port 80 without root.
+# Run once: sudo scripts/setup-port80.sh (from repo root)
+# Or: scripts/setup-port80.sh (will prompt for sudo only for setcap)
+
+set -e
+cd "$(dirname "$0")/.."
+REPO_ROOT="$(pwd)"
+# If run under sudo, use the invoking user's pipenv so the venv is found
+if [ -n "$SUDO_USER" ]; then
+  VENV="$(sudo -u "$SUDO_USER" bash -c "cd '$REPO_ROOT' && pipenv --venv" 2>/dev/null)" || true
+else
+  VENV="$(pipenv --venv 2>/dev/null)" || true
+fi
+if [ -z "$VENV" ]; then
+  echo "Run 'pipenv install' first, then run this script again."
+  exit 1
+fi
+PYTHON="${VENV}/bin/python3"
+if [ ! -f "$PYTHON" ]; then
+  PYTHON="${VENV}/bin/python"
+fi
+if [ ! -f "$PYTHON" ]; then
+  echo "Python not found in venv: $VENV"
+  exit 1
+fi
+# Use the real binary (setcap can fail on symlinks or some filesystems)
+REAL_PYTHON="$(readlink -f "$PYTHON" 2>/dev/null)" || REAL_PYTHON="$PYTHON"
+if sudo setcap 'cap_net_bind_service=+ep' "$REAL_PYTHON" 2>/dev/null; then
+  echo "OK: port 80 enabled for $REAL_PYTHON"
+  echo "Start the app with: pipenv run run"
+else
+  echo "setcap failed on $REAL_PYTHON"
+  exit 1
+fi
--- a/scripts/start.sh
+++ b/scripts/start.sh
@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+# Start the LED controller web server (port 80 by default).
+cd "$(dirname "$0")/.."
+export PORT="${PORT:-80}"
+pipenv run run
--- a/scripts/test-port80.sh
+++ b/scripts/test-port80.sh
@@ -0,0 +1,33 @@
+#!/usr/bin/env bash
+# Test the app on port 80. Run after: sudo scripts/setup-port80.sh
+# Usage: ./scripts/test-port80.sh
+
+set -e
+cd "$(dirname "$0")/.."
+APP_URL="${APP_URL:-http://127.0.0.1:80}"
+
+echo "Starting app on port 80 in background..."
+pipenv run run &
+PID=$!
+trap "kill $PID 2>/dev/null; exit" EXIT
+
+echo "Waiting for server to start..."
+for i in 1 2 3 4 5 6 7 8 9 10; do
+  if curl -s -o /dev/null -w "%{http_code}" "$APP_URL/" 2>/dev/null | grep -q 200; then
+    echo "Server is up."
+    break
+  fi
+  sleep 1
+done
+
+echo "Requesting $APP_URL/ ..."
+CODE=$(curl -s -o /dev/null -w "%{http_code}" "$APP_URL/")
+if [ "$CODE" = "200" ]; then
+  echo "OK: GET / returned HTTP $CODE"
+  curl -s "$APP_URL/" | head -5
+  echo "..."
+  exit 0
+else
+  echo "FAIL: GET / returned HTTP $CODE (expected 200)"
+  exit 1
+fi
--- a/src/boot.py
+++ b/src/boot.py
@@ -1,8 +1,6 @@
-import settings
-import wifi
+# Boot script (ESP only; no-op on Pi)
+import settings  # noqa: F401
 from settings import Settings

 s = Settings()
-
-name = s.get('name', 'led')
-wifi.ap(name, '')
+# AP setup was here when running on ESP; Pi uses system networking.
--- a/src/controllers/init.py
+++ b/src/controllers/init.py
@@ -0,0 +1 @@
+# Controllers package
--- a/src/controllers/device.py
+++ b/src/controllers/device.py
@@ -0,0 +1,68 @@
+from microdot import Microdot
+from models.device import Device
+import json
+
+controller = Microdot()
+devices = Device()
+
+
+@controller.get("")
+async def list_devices(request):
+    """List all devices."""
+    devices_data = {}
+    for dev_id in devices.list():
+        d = devices.read(dev_id)
+        if d:
+            devices_data[dev_id] = d
+    return json.dumps(devices_data), 200, {"Content-Type": "application/json"}
+
+
+@controller.get("/<id>")
+async def get_device(request, id):
+    """Get a device by ID."""
+    dev = devices.read(id)
+    if dev:
+        return json.dumps(dev), 200, {"Content-Type": "application/json"}
+    return json.dumps({"error": "Device not found"}), 404
+
+
+@controller.post("")
+async def create_device(request):
+    """Create a new device."""
+    try:
+        data = request.json or {}
+        name = data.get("name", "").strip()
+        address = data.get("address")
+        default_pattern = data.get("default_pattern")
+        tabs = data.get("tabs")
+        if isinstance(tabs, list):
+            tabs = [str(t) for t in tabs]
+        else:
+            tabs = []
+        dev_id = devices.create(name=name, address=address, default_pattern=default_pattern, tabs=tabs)
+        dev = devices.read(dev_id)
+        return json.dumps({dev_id: dev}), 201, {"Content-Type": "application/json"}
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+
+@controller.put("/<id>")
+async def update_device(request, id):
+    """Update a device."""
+    try:
+        data = request.json or {}
+        if "tabs" in data and isinstance(data["tabs"], list):
+            data["tabs"] = [str(t) for t in data["tabs"]]
+        if devices.update(id, data):
+            return json.dumps(devices.read(id)), 200, {"Content-Type": "application/json"}
+        return json.dumps({"error": "Device not found"}), 404
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+
+@controller.delete("/<id>")
+async def delete_device(request, id):
+    """Delete a device."""
+    if devices.delete(id):
+        return json.dumps({"message": "Device deleted successfully"}), 200
+    return json.dumps({"error": "Device not found"}), 404
--- a/src/controllers/group.py
+++ b/src/controllers/group.py
@@ -0,0 +1,50 @@
+from microdot import Microdot
+from models.group import Group
+import json
+
+controller = Microdot()
+groups = Group()
+
+@controller.get('')
+async def list_groups(request):
+    """List all groups."""
+    return json.dumps(groups), 200, {'Content-Type': 'application/json'}
+
+@controller.get('/<id>')
+async def get_group(request, id):
+    """Get a specific group by ID."""
+    group = groups.read(id)
+    if group:
+        return json.dumps(group), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "Group not found"}), 404
+
+@controller.post('')
+async def create_group(request):
+    """Create a new group."""
+    try:
+        data = request.json or {}
+        name = data.get("name", "")
+        group_id = groups.create(name)
+        if data:
+            groups.update(group_id, data)
+        return json.dumps(groups.read(group_id)), 201, {'Content-Type': 'application/json'}
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.put('/<id>')
+async def update_group(request, id):
+    """Update an existing group."""
+    try:
+        data = request.json
+        if groups.update(id, data):
+            return json.dumps(groups.read(id)), 200, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Group not found"}), 404
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.delete('/<id>')
+async def delete_group(request, id):
+    """Delete a group."""
+    if groups.delete(id):
+        return json.dumps({"message": "Group deleted successfully"}), 200
+    return json.dumps({"error": "Group not found"}), 404
--- a/src/controllers/palette.py
+++ b/src/controllers/palette.py
@@ -0,0 +1,58 @@
+from microdot import Microdot
+from models.pallet import Palette
+import json
+
+controller = Microdot()
+palettes = Palette()
+
+@controller.get('')
+async def list_palettes(request):
+    """List all palettes."""
+    data = {}
+    for pid in palettes.list():
+        colors = palettes.read(pid)
+        data[pid] = colors
+    return json.dumps(data), 200, {'Content-Type': 'application/json'}
+
+@controller.get('/<id>')
+async def get_palette(request, id):
+    """Get a specific palette by ID."""
+    if str(id) in palettes:
+        palette = palettes.read(id)
+        return json.dumps({"colors": palette or [], "id": str(id)}), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "Palette not found"}), 404
+
+@controller.post('')
+async def create_palette(request):
+    """Create a new palette."""
+    try:
+        data = request.json or {}
+        colors = data.get("colors", None)
+        # Palette no longer needs a name; only colors are stored.
+        palette_id = palettes.create("", colors)
+        created_colors = palettes.read(palette_id) or []
+        return json.dumps({"id": str(palette_id), "colors": created_colors}), 201, {'Content-Type': 'application/json'}
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.put('/<id>')
+async def update_palette(request, id):
+    """Update an existing palette."""
+    try:
+        data = request.json or {}
+        # Ignore any name field; only colors are relevant.
+        if "name" in data:
+            data.pop("name", None)
+        if palettes.update(id, data):
+            colors = palettes.read(id) or []
+            return json.dumps({"id": str(id), "colors": colors}), 200, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Palette not found"}), 404
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.delete('/<id>')
+async def delete_palette(request, id):
+    """Delete a palette."""
+    if palettes.delete(id):
+        return json.dumps({"message": "Palette deleted successfully"}), 200
+    return json.dumps({"error": "Palette not found"}), 404
--- a/src/controllers/pattern.py
+++ b/src/controllers/pattern.py
@@ -0,0 +1,89 @@
+from microdot import Microdot
+from models.pattern import Pattern
+import json
+import sys
+
+controller = Microdot()
+patterns = Pattern()
+
+def load_pattern_definitions():
+    """Load pattern definitions from pattern.json file."""
+    try:
+        # Try different paths for local development vs MicroPython
+        paths = ['db/pattern.json', 'pattern.json', '/db/pattern.json']
+        for path in paths:
+            try:
+                with open(path, 'r') as f:
+                    return json.load(f)
+            except OSError:
+                continue
+        return {}
+    except Exception as e:
+        print(f"Error loading pattern.json: {e}")
+        return {}
+
+@controller.get('/definitions')
+async def get_pattern_definitions(request):
+    """Get pattern definitions from pattern.json."""
+    definitions = load_pattern_definitions()
+    return json.dumps(definitions), 200, {'Content-Type': 'application/json'}
+
+@controller.get('')
+async def list_patterns(request):
+    """List all patterns."""
+    return json.dumps(patterns), 200, {'Content-Type': 'application/json'}
+
+
+@controller.get('/<id>')
+async def get_pattern(request, id):
+    """Get a specific pattern by ID."""
+    pattern = patterns.read(id)
+    if pattern is not None:
+        return json.dumps(pattern), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "Pattern not found"}), 404
+
+
+@controller.post('')
+async def create_pattern(request):
+    """Create a new pattern."""
+    try:
+        payload = request.json or {}
+        name = payload.get("name", "")
+        pattern_data = payload.get("data", {})
+
+        # IMPORTANT:
+        # `patterns.create()` stores `pattern_data` as the underlying dict value.
+        # If we then call `patterns.update(pattern_id, payload)` with the full
+        # request object, it may assign `payload["data"]` back onto that same
+        # dict object, creating a circular reference (json.dumps fails).
+        pattern_id = patterns.create(name, pattern_data)
+
+        # Only merge "extra" metadata fields (anything except name/data).
+        extra = dict(payload)
+        extra.pop("name", None)
+        extra.pop("data", None)
+        if extra:
+            patterns.update(pattern_id, extra)
+        return json.dumps(patterns.read(pattern_id)), 201, {'Content-Type': 'application/json'}
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+
+@controller.put('/<id>')
+async def update_pattern(request, id):
+    """Update an existing pattern."""
+    try:
+        data = request.json
+        if patterns.update(id, data):
+            return json.dumps(patterns.read(id)), 200, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Pattern not found"}), 404
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+
+@controller.delete('/<id>')
+async def delete_pattern(request, id):
+    """Delete a pattern."""
+    if patterns.delete(id):
+        return json.dumps({"message": "Pattern deleted successfully"}), 200
+    return json.dumps({"error": "Pattern not found"}), 404
--- a/src/controllers/preset.py
+++ b/src/controllers/preset.py
@@ -0,0 +1,223 @@
+from microdot import Microdot
+from microdot.session import with_session
+from models.preset import Preset
+from models.profile import Profile
+from models.transport import get_current_sender
+from util.espnow_message import build_message, build_preset_dict
+import asyncio
+import json
+
+controller = Microdot()
+presets = Preset()
+profiles = Profile()
+
+def get_current_profile_id(session=None):
+    """Get the current active profile ID from session or fallback to first."""
+    profile_list = profiles.list()
+    session_profile = None
+    if session is not None:
+        session_profile = session.get('current_profile')
+    if session_profile and session_profile in profile_list:
+        return session_profile
+    if profile_list:
+        return profile_list[0]
+    return None
+
+@controller.get('')
+@with_session
+async def list_presets(request, session):
+    """List presets for the current profile."""
+    current_profile_id = get_current_profile_id(session)
+    if not current_profile_id:
+        return json.dumps({}), 200, {'Content-Type': 'application/json'}
+    scoped = {
+        pid: pdata for pid, pdata in presets.items()
+        if isinstance(pdata, dict) and str(pdata.get("profile_id")) == str(current_profile_id)
+    }
+    return json.dumps(scoped), 200, {'Content-Type': 'application/json'}
+
+@controller.get('/<preset_id>')
+@with_session
+async def get_preset(request, session, preset_id):
+    """Get a specific preset by ID (current profile only)."""
+    preset = presets.read(preset_id)
+    current_profile_id = get_current_profile_id(session)
+    if preset and str(preset.get("profile_id")) == str(current_profile_id):
+        return json.dumps(preset), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "Preset not found"}), 404
+
+@controller.post('')
+@with_session
+async def create_preset(request, session):
+    """Create a new preset for the current profile."""
+    try:
+        try:
+            data = request.json or {}
+        except Exception:
+            return json.dumps({"error": "Invalid JSON"}), 400, {'Content-Type': 'application/json'}
+        current_profile_id = get_current_profile_id(session)
+        if not current_profile_id:
+            return json.dumps({"error": "No profile available"}), 404
+        preset_id = presets.create(current_profile_id)
+        if not isinstance(data, dict):
+            data = {}
+        data = dict(data)
+        data["profile_id"] = str(current_profile_id)
+        if presets.update(preset_id, data):
+            preset_data = presets.read(preset_id)
+            return json.dumps({preset_id: preset_data}), 201, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Failed to create preset"}), 400
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.put('/<preset_id>')
+@with_session
+async def update_preset(request, session, preset_id):
+    """Update an existing preset (current profile only)."""
+    try:
+        preset = presets.read(preset_id)
+        current_profile_id = get_current_profile_id(session)
+        if not preset or str(preset.get("profile_id")) != str(current_profile_id):
+            return json.dumps({"error": "Preset not found"}), 404
+        try:
+            data = request.json or {}
+        except Exception:
+            return json.dumps({"error": "Invalid JSON"}), 400, {'Content-Type': 'application/json'}
+        if not isinstance(data, dict):
+            data = {}
+        data = dict(data)
+        data["profile_id"] = str(current_profile_id)
+        if presets.update(preset_id, data):
+            return json.dumps(presets.read(preset_id)), 200, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Preset not found"}), 404
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.delete('/<preset_id>')
+@with_session
+async def delete_preset(request, *args, **kwargs):
+    """Delete a preset (current profile only)."""
+    # Be tolerant of wrapper/arg-order variations.
+    session = None
+    preset_id = None
+    if len(args) > 0:
+        session = args[0]
+    if len(args) > 1:
+        preset_id = args[1]
+    if 'session' in kwargs and kwargs.get('session') is not None:
+        session = kwargs.get('session')
+    if 'preset_id' in kwargs and kwargs.get('preset_id') is not None:
+        preset_id = kwargs.get('preset_id')
+    if 'id' in kwargs and kwargs.get('id') is not None and preset_id is None:
+        preset_id = kwargs.get('id')
+    if preset_id is None:
+        return json.dumps({"error": "Preset ID is required"}), 400
+    preset = presets.read(preset_id)
+    current_profile_id = get_current_profile_id(session)
+    if not preset or str(preset.get("profile_id")) != str(current_profile_id):
+        return json.dumps({"error": "Preset not found"}), 404
+    if presets.delete(preset_id):
+        return json.dumps({"message": "Preset deleted successfully"}), 200
+    return json.dumps({"error": "Preset not found"}), 404
+
+
+@controller.post('/send')
+@with_session
+async def send_presets(request, session):
+    """
+    Send one or more presets to the LED driver (via serial transport).
+
+    Body JSON:
+        {"preset_ids": ["1", "2", ...]}  or  {"ids": ["1", "2", ...]}
+
+    The controller looks up each preset, converts to API format, chunks into
+    <= 240-byte messages, and sends them over the configured transport.
+    """
+    try:
+        data = request.json or {}
+    except Exception:
+        return json.dumps({"error": "Invalid JSON"}), 400, {'Content-Type': 'application/json'}
+
+    preset_ids = data.get('preset_ids') or data.get('ids')
+    if not isinstance(preset_ids, list) or not preset_ids:
+        return json.dumps({"error": "preset_ids must be a non-empty list"}), 400, {'Content-Type': 'application/json'}
+    save_flag = data.get('save', True)
+    save_flag = bool(save_flag)
+    default_id = data.get('default')
+    # Optional 12-char hex MAC to send to one device; omit for default (e.g. broadcast).
+    destination_mac = data.get('destination_mac') or data.get('to')
+
+    # Build API-compliant preset map keyed by preset ID, include name
+    current_profile_id = get_current_profile_id(session)
+    presets_by_name = {}
+    for pid in preset_ids:
+        preset_data = presets.read(str(pid))
+        if not preset_data:
+            continue
+        if str(preset_data.get("profile_id")) != str(current_profile_id):
+            continue
+        preset_key = str(pid)
+        preset_payload = build_preset_dict(preset_data)
+        preset_payload["name"] = preset_data.get("name", "")
+        presets_by_name[preset_key] = preset_payload
+
+    if not presets_by_name:
+        return json.dumps({"error": "No matching presets found"}), 404, {'Content-Type': 'application/json'}
+
+    if default_id is not None and str(default_id) not in presets_by_name:
+        default_id = None
+
+    sender = get_current_sender()
+    if not sender:
+        return json.dumps({"error": "Transport not configured"}), 503, {'Content-Type': 'application/json'}
+
+    async def send_chunk(chunk_presets, is_last):
+        # Save/default should only be sent with the final presets chunk.
+        msg = build_message(
+            presets=chunk_presets,
+            save=save_flag and is_last,
+            default=default_id if is_last else None,
+        )
+        await sender.send(msg, addr=destination_mac)
+
+    MAX_BYTES = 240
+    send_delay_s = 0.1
+    entries = list(presets_by_name.items())
+    total_presets = len(entries)
+    messages_sent = 0
+
+    batch = {}
+    last_msg = None
+    for name, preset_obj in entries:
+        test_batch = dict(batch)
+        test_batch[name] = preset_obj
+        test_msg = build_message(presets=test_batch, save=save_flag, default=default_id)
+        size = len(test_msg)
+
+        if size <= MAX_BYTES or not batch:
+            batch = test_batch
+            last_msg = test_msg
+        else:
+            try:
+                await send_chunk(batch, False)
+            except Exception:
+                return json.dumps({"error": "Send failed"}), 503, {'Content-Type': 'application/json'}
+            await asyncio.sleep(send_delay_s)
+            messages_sent += 1
+            batch = {name: preset_obj}
+            last_msg = build_message(presets=batch, save=save_flag, default=default_id)
+
+    if batch:
+        try:
+            await send_chunk(batch, True)
+        except Exception:
+            return json.dumps({"error": "Send failed"}), 503, {'Content-Type': 'application/json'}
+        await asyncio.sleep(send_delay_s)
+        messages_sent += 1
+
+    return json.dumps({
+        "message": "Presets sent",
+        "presets_sent": total_presets,
+        "messages_sent": messages_sent
+    }), 200, {'Content-Type': 'application/json'}
+
--- a/src/controllers/profile.py
+++ b/src/controllers/profile.py
@@ -0,0 +1,348 @@
+from microdot import Microdot
+from microdot.session import with_session
+from models.profile import Profile
+from models.tab import Tab
+from models.preset import Preset
+import json
+
+controller = Microdot()
+profiles = Profile()
+tabs = Tab()
+presets = Preset()
+
+@controller.get('')
+@with_session
+async def list_profiles(request, session):
+    """List all profiles with current profile info."""
+    profile_list = profiles.list()
+    current_id = session.get('current_profile')
+    if current_id and current_id not in profile_list:
+        current_id = None
+    
+    # If no current profile in session, use first one
+    if not current_id and profile_list:
+        current_id = profile_list[0]
+        session['current_profile'] = str(current_id)
+        session.save()
+    
+    # Build profiles object
+    profiles_data = {}
+    for profile_id in profile_list:
+        profile_data = profiles.read(profile_id)
+        if profile_data:
+            profiles_data[profile_id] = profile_data
+    
+    return json.dumps({
+        "profiles": profiles_data,
+        "current_profile_id": current_id
+    }), 200, {'Content-Type': 'application/json'}
+
+@controller.get('/current')
+@with_session
+async def get_current_profile(request, session):
+    """Get the current profile ID from session (or fallback)."""
+    profile_list = profiles.list()
+    current_id = session.get('current_profile')
+    if current_id and current_id not in profile_list:
+        current_id = None
+    if not current_id and profile_list:
+        current_id = profile_list[0]
+        session['current_profile'] = str(current_id)
+        session.save()
+    if current_id:
+        profile = profiles.read(current_id)
+        return json.dumps({"id": current_id, "profile": profile}), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "No profile available"}), 404
+
+@controller.get('/<id>')
+@with_session
+async def get_profile(request, id, session):
+    """Get a specific profile by ID."""
+    # Handle 'current' as a special case
+    if id == 'current':
+        return await get_current_profile(request, session)
+    
+    profile = profiles.read(id)
+    if profile:
+        return json.dumps(profile), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "Profile not found"}), 404
+
+@controller.post('/<id>/apply')
+@with_session
+async def apply_profile(request, session, id):
+    """Apply a profile by saving it to session."""
+    if not profiles.read(id):
+        return json.dumps({"error": "Profile not found"}), 404
+    session['current_profile'] = str(id)
+    session.save()
+    return json.dumps({"message": "Profile applied", "id": str(id)}), 200, {'Content-Type': 'application/json'}
+
+@controller.post('')
+async def create_profile(request):
+    """Create a new profile."""
+    try:
+        data = dict(request.json or {})
+        name = data.get("name", "")
+        seed_raw = data.get("seed_dj_tab", False)
+        if isinstance(seed_raw, str):
+            seed_dj_tab = seed_raw.strip().lower() in ("1", "true", "yes", "on")
+        else:
+            seed_dj_tab = bool(seed_raw)
+        # Request-only flag: do not persist on profile records.
+        data.pop("seed_dj_tab", None)
+        profile_id = profiles.create(name)
+        # Avoid persisting request-only fields.
+        data.pop("name", None)
+        if data:
+            profiles.update(profile_id, data)
+
+        # New profiles always start with a default tab pre-populated with starter presets.
+        default_preset_ids = []
+        default_preset_defs = [
+            {
+                "name": "on",
+                "pattern": "on",
+                "colors": ["#FFFFFF"],
+                "brightness": 255,
+                "delay": 100,
+                "auto": True,
+            },
+            {
+                "name": "off",
+                "pattern": "off",
+                "colors": [],
+                "brightness": 0,
+                "delay": 100,
+                "auto": True,
+            },
+            {
+                "name": "rainbow",
+                "pattern": "rainbow",
+                "colors": [],
+                "brightness": 255,
+                "delay": 100,
+                "auto": True,
+                "n1": 2,
+            },
+            {
+                "name": "transition",
+                "pattern": "transition",
+                "colors": ["#FF0000", "#00FF00", "#0000FF"],
+                "brightness": 255,
+                "delay": 500,
+                "auto": True,
+            },
+        ]
+
+        for preset_data in default_preset_defs:
+            pid = presets.create(profile_id)
+            presets.update(pid, preset_data)
+            default_preset_ids.append(str(pid))
+
+        default_tab_id = tabs.create(name="default", names=["1"], presets=[default_preset_ids])
+        tabs.update(default_tab_id, {
+            "presets_flat": default_preset_ids,
+            "default_preset": default_preset_ids[0] if default_preset_ids else None,
+        })
+
+        profile = profiles.read(profile_id) or {}
+        profile_tabs = profile.get("tabs", []) if isinstance(profile.get("tabs", []), list) else []
+        profile_tabs.append(str(default_tab_id))
+
+        if seed_dj_tab:
+            # Seed a DJ-focused tab with three starter presets.
+            seeded_preset_ids = []
+            preset_defs = [
+                {
+                    "name": "DJ Rainbow",
+                    "pattern": "rainbow",
+                    "colors": [],
+                    "brightness": 220,
+                    "delay": 60,
+                    "n1": 12,
+                },
+                {
+                    "name": "DJ Single Color",
+                    "pattern": "on",
+                    "colors": ["#ff00ff"],
+                    "brightness": 220,
+                    "delay": 100,
+                },
+                {
+                    "name": "DJ Transition",
+                    "pattern": "transition",
+                    "colors": ["#ff0000", "#00ff00", "#0000ff"],
+                    "brightness": 220,
+                    "delay": 250,
+                },
+            ]
+
+            for preset_data in preset_defs:
+                pid = presets.create(profile_id)
+                presets.update(pid, preset_data)
+                seeded_preset_ids.append(str(pid))
+
+            dj_tab_id = tabs.create(name="dj", names=["dj"], presets=[seeded_preset_ids])
+            tabs.update(dj_tab_id, {
+                "presets_flat": seeded_preset_ids,
+                "default_preset": seeded_preset_ids[0] if seeded_preset_ids else None,
+            })
+
+            profile_tabs.append(str(dj_tab_id))
+
+        profiles.update(profile_id, {"tabs": profile_tabs})
+
+        profile_data = profiles.read(profile_id)
+        return json.dumps({profile_id: profile_data}), 201, {'Content-Type': 'application/json'}
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.post('/<id>/clone')
+async def clone_profile(request, id):
+    """Clone an existing profile along with its tabs and palette."""
+    try:
+        source = profiles.read(id)
+        if not source:
+            return json.dumps({"error": "Profile not found"}), 404
+
+        data = request.json or {}
+        source_name = source.get("name") or f"Profile {id}"
+        new_name = data.get("name") or source_name
+        profile_type = source.get("type", "tabs")
+
+        def allocate_id(model, cache):
+            if "next" not in cache:
+                max_id = max((int(k) for k in model.keys() if str(k).isdigit()), default=0)
+                cache["next"] = max_id + 1
+            next_id = str(cache["next"])
+            cache["next"] += 1
+            return next_id
+
+        def map_preset_container(value, id_map, preset_cache, new_profile_id, new_presets):
+            if isinstance(value, list):
+                return [map_preset_container(v, id_map, preset_cache, new_profile_id, new_presets) for v in value]
+            if value is None:
+                return None
+            preset_id = str(value)
+            if preset_id in id_map:
+                return id_map[preset_id]
+            preset_data = presets.read(preset_id)
+            if not preset_data:
+                return None
+            new_preset_id = allocate_id(presets, preset_cache)
+            clone_data = dict(preset_data)
+            clone_data["profile_id"] = str(new_profile_id)
+            new_presets[new_preset_id] = clone_data
+            id_map[preset_id] = new_preset_id
+            return new_preset_id
+
+        # Prepare new IDs without writing until everything is ready.
+        profile_cache = {}
+        palette_cache = {}
+        tab_cache = {}
+        preset_cache = {}
+
+        new_profile_id = allocate_id(profiles, profile_cache)
+        new_palette_id = allocate_id(profiles._palette_model, palette_cache)
+
+        # Clone palette colors into the new profile's palette
+        src_palette_id = source.get("palette_id")
+        palette_colors = []
+        if src_palette_id:
+            try:
+                palette_colors = profiles._palette_model.read(src_palette_id)
+            except Exception:
+                palette_colors = []
+
+        # Clone tabs and presets used by those tabs
+        source_tabs = source.get("tabs")
+        if not isinstance(source_tabs, list) or len(source_tabs) == 0:
+            source_tabs = source.get("tab_order", [])
+        source_tabs = source_tabs or []
+        cloned_tab_ids = []
+        preset_id_map = {}
+        new_tabs = {}
+        new_presets = {}
+        for tab_id in source_tabs:
+            tab = tabs.read(tab_id)
+            if not tab:
+                continue
+            tab_name = tab.get("name") or f"Tab {tab_id}"
+            clone_name = tab_name
+            mapped_presets = map_preset_container(tab.get("presets"), preset_id_map, preset_cache, new_profile_id, new_presets)
+            clone_id = allocate_id(tabs, tab_cache)
+            clone_data = {
+                "name": clone_name,
+                "names": tab.get("names") or [],
+                "presets": mapped_presets if mapped_presets is not None else []
+            }
+            extra = {k: v for k, v in tab.items() if k not in ("name", "names", "presets")}
+            if "presets_flat" in extra:
+                extra["presets_flat"] = map_preset_container(extra.get("presets_flat"), preset_id_map, preset_cache, new_profile_id, new_presets)
+            if extra:
+                clone_data.update(extra)
+            new_tabs[clone_id] = clone_data
+            cloned_tab_ids.append(clone_id)
+
+        new_profile_data = {
+            "name": new_name,
+            "type": profile_type,
+            "tabs": cloned_tab_ids,
+            "scenes": list(source.get("scenes", [])) if isinstance(source.get("scenes", []), list) else [],
+            "palette_id": str(new_palette_id),
+        }
+
+        # Commit all changes and save once per model.
+        profiles._palette_model[str(new_palette_id)] = list(palette_colors) if palette_colors else []
+        for pid, pdata in new_presets.items():
+            presets[pid] = pdata
+        for tid, tdata in new_tabs.items():
+            tabs[tid] = tdata
+        profiles[str(new_profile_id)] = new_profile_data
+
+        profiles._palette_model.save()
+        presets.save()
+        tabs.save()
+        profiles.save()
+
+        return json.dumps({new_profile_id: new_profile_data}), 201, {'Content-Type': 'application/json'}
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.put('/current')
+@with_session
+async def update_current_profile(request, session):
+    """Update the current profile using session (or fallback)."""
+    try:
+        data = request.json or {}
+        profile_list = profiles.list()
+        current_id = session.get('current_profile')
+        if not current_id and profile_list:
+            current_id = profile_list[0]
+            session['current_profile'] = str(current_id)
+            session.save()
+        if not current_id:
+            return json.dumps({"error": "No profile available"}), 404
+        if profiles.update(current_id, data):
+            return json.dumps(profiles.read(current_id)), 200, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Profile not found"}), 404
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.put('/<id>')
+async def update_profile(request, id):
+    """Update an existing profile."""
+    try:
+        data = request.json
+        if profiles.update(id, data):
+            return json.dumps(profiles.read(id)), 200, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Profile not found"}), 404
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.delete('/<id>')
+async def delete_profile(request, id):
+    """Delete a profile."""
+    if profiles.delete(id):
+        return json.dumps({"message": "Profile deleted successfully"}), 200
+    return json.dumps({"error": "Profile not found"}), 404
--- a/src/controllers/scene.py
+++ b/src/controllers/scene.py
@@ -0,0 +1,49 @@
+from microdot import Microdot
+from models.scene import Scene
+import json
+
+controller = Microdot()
+scenes = Scene()
+
+@controller.get('')
+async def list_scenes(request):
+    """List all scenes."""
+    return json.dumps(scenes), 200, {'Content-Type': 'application/json'}
+
+@controller.get('/<id>')
+async def get_scene(request, id):
+    """Get a specific scene by ID."""
+    scene = scenes.read(id)
+    if scene:
+        return json.dumps(scene), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "Scene not found"}), 404
+
+@controller.post('')
+async def create_scene(request):
+    """Create a new scene."""
+    try:
+        data = request.json
+        scene_id = scenes.create()
+        if scenes.update(scene_id, data):
+            return json.dumps(scenes.read(scene_id)), 201, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Failed to create scene"}), 400
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.put('/<id>')
+async def update_scene(request, id):
+    """Update an existing scene."""
+    try:
+        data = request.json
+        if scenes.update(id, data):
+            return json.dumps(scenes.read(id)), 200, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Scene not found"}), 404
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.delete('/<id>')
+async def delete_scene(request, id):
+    """Delete a scene."""
+    if scenes.delete(id):
+        return json.dumps({"message": "Scene deleted successfully"}), 200
+    return json.dumps({"error": "Scene not found"}), 404
--- a/src/controllers/sequence.py
+++ b/src/controllers/sequence.py
@@ -0,0 +1,51 @@
+from microdot import Microdot
+from models.squence import Sequence
+import json
+
+controller = Microdot()
+sequences = Sequence()
+
+@controller.get('')
+async def list_sequences(request):
+    """List all sequences."""
+    return json.dumps(sequences), 200, {'Content-Type': 'application/json'}
+
+@controller.get('/<id>')
+async def get_sequence(request, id):
+    """Get a specific sequence by ID."""
+    sequence = sequences.read(id)
+    if sequence:
+        return json.dumps(sequence), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "Sequence not found"}), 404
+
+@controller.post('')
+async def create_sequence(request):
+    """Create a new sequence."""
+    try:
+        data = request.json or {}
+        group_name = data.get("group_name", "")
+        preset_names = data.get("presets", None)
+        sequence_id = sequences.create(group_name, preset_names)
+        if data:
+            sequences.update(sequence_id, data)
+        return json.dumps(sequences.read(sequence_id)), 201, {'Content-Type': 'application/json'}
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.put('/<id>')
+async def update_sequence(request, id):
+    """Update an existing sequence."""
+    try:
+        data = request.json
+        if sequences.update(id, data):
+            return json.dumps(sequences.read(id)), 200, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Sequence not found"}), 404
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.delete('/<id>')
+async def delete_sequence(request, id):
+    """Delete a sequence."""
+    if sequences.delete(id):
+        return json.dumps({"message": "Sequence deleted successfully"}), 200
+    return json.dumps({"error": "Sequence not found"}), 404
--- a/src/controllers/settings.py
+++ b/src/controllers/settings.py
@@ -0,0 +1,87 @@
+from microdot import Microdot, send_file
+from settings import Settings
+import json
+
+controller = Microdot()
+settings = Settings()
+
+@controller.get('')
+async def get_settings(request):
+    """Get all settings."""
+    # Settings is already a dict subclass; avoid dict() wrapper which can
+    # trigger MicroPython's "dict update sequence has wrong length" quirk.
+    return json.dumps(settings), 200, {'Content-Type': 'application/json'}
+
+@controller.get('/wifi/ap')
+async def get_ap_config(request):
+    """Get saved AP configuration (Pi: no in-device AP)."""
+    config = {
+        'saved_ssid': settings.get('wifi_ap_ssid'),
+        'saved_password': settings.get('wifi_ap_password'),
+        'saved_channel': settings.get('wifi_ap_channel'),
+        'active': False,
+    }
+    return json.dumps(config), 200, {'Content-Type': 'application/json'}
+
+@controller.post('/wifi/ap')
+async def configure_ap(request):
+    """Save AP configuration to settings (Pi: no in-device AP)."""
+    try:
+        data = request.json
+        ssid = data.get('ssid')
+        password = data.get('password', '')
+        channel = data.get('channel')
+        
+        if not ssid:
+            return json.dumps({"error": "SSID is required"}), 400
+        
+        # Validate channel (1-11 for 2.4GHz)
+        if channel is not None:
+            channel = int(channel)
+            if channel < 1 or channel > 11:
+                return json.dumps({"error": "Channel must be between 1 and 11"}), 400
+        
+        settings['wifi_ap_ssid'] = ssid
+        settings['wifi_ap_password'] = password
+        if channel is not None:
+            settings['wifi_ap_channel'] = channel
+        settings.save()
+        
+        return json.dumps({
+            "message": "AP settings saved",
+            "ssid": ssid,
+            "channel": channel
+        }), 200, {'Content-Type': 'application/json'}
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 500
+
+def _validate_wifi_channel(value):
+    """Return int 1–11 or raise ValueError."""
+    ch = int(value)
+    if ch < 1 or ch > 11:
+        raise ValueError("wifi_channel must be between 1 and 11")
+    return ch
+
+
+@controller.put('/settings')
+async def update_settings(request):
+    """Update general settings."""
+    try:
+        data = request.json
+        for key, value in data.items():
+            if key == 'wifi_channel' and value is not None:
+                settings[key] = _validate_wifi_channel(value)
+            else:
+                settings[key] = value
+        settings.save()
+        return json.dumps({"message": "Settings updated successfully"}), 200, {'Content-Type': 'application/json'}
+    except ValueError as e:
+        return json.dumps({"error": str(e)}), 400
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 500
+
+@controller.get('/page')
+async def settings_page(request):
+    """Serve the settings page."""
+    return send_file('templates/settings.html')
+
--- a/src/controllers/tab.py
+++ b/src/controllers/tab.py
@@ -0,0 +1,346 @@
+from microdot import Microdot, send_file
+from microdot.session import with_session
+from models.tab import Tab
+from models.profile import Profile
+import json
+import os
+import time
+
+controller = Microdot()
+tabs = Tab()
+profiles = Profile()
+
+def get_current_profile_id(session=None):
+    """Get the current active profile ID from session or fallback to first."""
+    profile_list = profiles.list()
+    session_profile = None
+    if session is not None:
+        session_profile = session.get('current_profile')
+    if session_profile and session_profile in profile_list:
+        return session_profile
+    if profile_list:
+        return profile_list[0]
+    return None
+
+def get_profile_tab_order(profile_id):
+    """Get the tab order for a profile."""
+    if not profile_id:
+        return []
+    profile = profiles.read(profile_id)
+    if profile:
+        # Support both "tab_order" (old) and "tabs" (new) format
+        return profile.get("tabs", profile.get("tab_order", []))
+    return []
+
+def get_current_tab_id(request, session=None):
+    """Get the current tab ID from cookie."""
+    # Read from cookie first
+    current_tab = request.cookies.get('current_tab')
+    if current_tab:
+        return current_tab
+    
+    # Fallback to first tab in current profile
+    profile_id = get_current_profile_id(session)
+    if profile_id:
+        profile = profiles.read(profile_id)
+        if profile:
+            # Support both "tabs" (new) and "tab_order" (old) format
+            tabs_list = profile.get("tabs", profile.get("tab_order", []))
+            if tabs_list:
+                return tabs_list[0]
+    return None
+
+def _render_tabs_list_fragment(request, session):
+    """Helper function to render tabs list HTML fragment."""
+    profile_id = get_current_profile_id(session)
+    # #region agent log
+    try:
+        os.makedirs('/home/pi/led-controller/.cursor', exist_ok=True)
+        with open('/home/pi/led-controller/.cursor/debug.log', 'a') as _log:
+            _log.write(json.dumps({
+                "sessionId": "debug-session",
+                "runId": "tabs-pre-fix",
+                "hypothesisId": "H1",
+                "location": "src/controllers/tab.py:_render_tabs_list_fragment",
+                "message": "tabs list fragment",
+                "data": {
+                    "profile_id": profile_id,
+                    "profile_count": len(profiles.list())
+                },
+                "timestamp": int(time.time() * 1000)
+            }) + "\n")
+    except Exception:
+        pass
+    # #endregion
+    if not profile_id:
+        return '<div class="tabs-list">No profile selected</div>', 200, {'Content-Type': 'text/html'}
+    
+    tab_order = get_profile_tab_order(profile_id)
+    current_tab_id = get_current_tab_id(request, session)
+    
+    html = '<div class="tabs-list">'
+    for tab_id in tab_order:
+        tab_data = tabs.read(tab_id)
+        if tab_data:
+            active_class = 'active' if str(tab_id) == str(current_tab_id) else ''
+            tab_name = tab_data.get('name', 'Tab ' + str(tab_id))
+            html += (
+                '<button class="tab-button ' + active_class + '" '
+                'hx-get="/tabs/' + str(tab_id) + '/content-fragment" '
+                'hx-target="#tab-content" '
+                'hx-swap="innerHTML" '
+                'hx-push-url="true" '
+                'hx-trigger="click" '
+                'onclick="document.querySelectorAll(\'.tab-button\').forEach(b => b.classList.remove(\'active\')); this.classList.add(\'active\');">'
+                + tab_name +
+                '</button>'
+            )
+    html += '</div>'
+    return html, 200, {'Content-Type': 'text/html'}
+
+def _render_tab_content_fragment(request, session, id):
+    """Helper function to render tab content HTML fragment."""
+    # Handle 'current' as a special case
+    if id == 'current':
+        current_tab_id = get_current_tab_id(request, session)
+        if not current_tab_id:
+            accept_header = request.headers.get('Accept', '')
+            wants_html = 'text/html' in accept_header
+            if wants_html:
+                return '<div class="error">No current tab set</div>', 404, {'Content-Type': 'text/html'}
+            return json.dumps({"error": "No current tab set"}), 404
+        id = current_tab_id
+    
+    tab = tabs.read(id)
+    if not tab:
+        return '<div>Tab not found</div>', 404, {'Content-Type': 'text/html'}
+    
+    # Set this tab as the current tab in session
+    session['current_tab'] = str(id)
+    session.save()
+
+    # If this is a direct page load (not HTMX), return full UI so CSS loads.
+    if not request.headers.get('HX-Request'):
+        return send_file('templates/index.html')
+    
+    tab_name = tab.get('name', 'Tab ' + str(id))
+    
+    html = (
+        '<div class="presets-section" data-tab-id="' + str(id) + '">'
+        '<h3>Presets</h3>'
+        '<div class="profiles-actions" style="margin-bottom: 1rem;"></div>'
+        '<div id="presets-list-tab" class="presets-list">'
+        '<!-- Presets will be loaded here -->'
+        '</div>'
+        '</div>'
+    )
+    return html, 200, {'Content-Type': 'text/html'}
+
+@controller.get('')
+@with_session
+async def list_tabs(request, session):
+    """List all tabs with current tab info."""
+    profile_id = get_current_profile_id(session)
+    current_tab_id = get_current_tab_id(request, session)
+    
+    # Get tab order for current profile
+    tab_order = get_profile_tab_order(profile_id) if profile_id else []
+    
+    # Build tabs list with metadata
+    tabs_data = {}
+    for tab_id in tabs.list():
+        tab_data = tabs.read(tab_id)
+        if tab_data:
+            tabs_data[tab_id] = tab_data
+    
+    return json.dumps({
+        "tabs": tabs_data,
+        "tab_order": tab_order,
+        "current_tab_id": current_tab_id,
+        "profile_id": profile_id
+    }), 200, {'Content-Type': 'application/json'}
+
+# Get current tab - returns JSON with tab data and content info
+@controller.get('/current')
+@with_session
+async def get_current_tab(request, session):
+    """Get the current tab from session."""
+    current_tab_id = get_current_tab_id(request, session)
+    if not current_tab_id:
+        return json.dumps({"error": "No current tab set", "tab": None, "tab_id": None}), 404
+    
+    tab = tabs.read(current_tab_id)
+    if tab:
+        return json.dumps({
+            "tab": tab,
+            "tab_id": current_tab_id
+        }), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "Tab not found", "tab": None, "tab_id": None}), 404
+
+@controller.post('/<id>/set-current')
+async def set_current_tab(request, id):
+    """Set a tab as the current tab in cookie."""
+    tab = tabs.read(id)
+    if not tab:
+        return json.dumps({"error": "Tab not found"}), 404
+    
+    # Set cookie with current tab
+    response_data = json.dumps({"message": "Current tab set", "tab_id": id})
+    response = response_data, 200, {
+        'Content-Type': 'application/json',
+        'Set-Cookie': f'current_tab={id}; Path=/; Max-Age=31536000'  # 1 year expiry
+    }
+    return response
+
+@controller.get('/<id>')
+async def get_tab(request, id):
+    """Get a specific tab by ID."""
+    tab = tabs.read(id)
+    if tab:
+        return json.dumps(tab), 200, {'Content-Type': 'application/json'}
+    return json.dumps({"error": "Tab not found"}), 404
+
+@controller.put('/<id>')
+async def update_tab(request, id):
+    """Update an existing tab."""
+    try:
+        data = request.json
+        if tabs.update(id, data):
+            return json.dumps(tabs.read(id)), 200, {'Content-Type': 'application/json'}
+        return json.dumps({"error": "Tab not found"}), 404
+    except Exception as e:
+        return json.dumps({"error": str(e)}), 400
+
+@controller.delete('/<id>')
+@with_session
+async def delete_tab(request, session, id):
+    """Delete a tab."""
+    try:
+        # Handle 'current' tab ID
+        if id == 'current':
+            current_tab_id = get_current_tab_id(request, session)
+            if current_tab_id:
+                id = current_tab_id
+            else:
+                return json.dumps({"error": "No current tab to delete"}), 404
+        
+        if tabs.delete(id):
+            # Remove from profile's tabs
+            profile_id = get_current_profile_id(session)
+            if profile_id:
+                profile = profiles.read(profile_id)
+                if profile:
+                    # Support both "tabs" (new) and "tab_order" (old) format
+                    tabs_list = profile.get('tabs', profile.get('tab_order', []))
+                    if id in tabs_list:
+                        tabs_list.remove(id)
+                        profile['tabs'] = tabs_list
+                        # Remove old tab_order if it exists
+                        if 'tab_order' in profile:
+                            del profile['tab_order']
+                        profiles.update(profile_id, profile)
+            
+            # Clear cookie if the deleted tab was the current tab
+            current_tab_id = get_current_tab_id(request, session)
+            if current_tab_id == id:
+                response_data = json.dumps({"message": "Tab deleted successfully"})
+                response = response_data, 200, {
+                    'Content-Type': 'application/json',
+                    'Set-Cookie': 'current_tab=; Path=/; Max-Age=0'  # Clear cookie
+                }
+                return response
+            
+            return json.dumps({"message": "Tab deleted successfully"}), 200, {'Content-Type': 'application/json'}
+        
+        return json.dumps({"error": "Tab not found"}), 404
+    except Exception as e:
+        import sys
+        try:
+            sys.print_exception(e)
+        except:
+            pass
+        return json.dumps({"error": str(e)}), 500, {'Content-Type': 'application/json'}
+
+@controller.post('')
+@with_session
+async def create_tab(request, session):
+    """Create a new tab."""
+    try:
+        # Handle form data or JSON
+        if request.form:
+            name = request.form.get('name', '').strip()
+            ids_str = request.form.get('ids', '1').strip()
+            names = [id.strip() for id in ids_str.split(',') if id.strip()]
+            preset_ids = None
+        else:
+            data = request.json or {}
+            name = data.get("name", "")
+            names = data.get("names", None)
+            preset_ids = data.get("presets", None)
+        
+        if not name:
+            return json.dumps({"error": "Tab name cannot be empty"}), 400
+        
+        tab_id = tabs.create(name, names, preset_ids)
+        
+        # Add to current profile's tabs
+        profile_id = get_current_profile_id(session)
+        if profile_id:
+            profile = profiles.read(profile_id)
+            if profile:
+                # Support both "tabs" (new) and "tab_order" (old) format
+                tabs_list = profile.get('tabs', profile.get('tab_order', []))
+                if tab_id not in tabs_list:
+                    tabs_list.append(tab_id)
+                    profile['tabs'] = tabs_list
+                    # Remove old tab_order if it exists
+                    if 'tab_order' in profile:
+                        del profile['tab_order']
+                    profiles.update(profile_id, profile)
+        
+        # Return JSON response with tab ID
+        tab_data = tabs.read(tab_id)
+        return json.dumps({tab_id: tab_data}), 201, {'Content-Type': 'application/json'}
+    except Exception as e:
+        import sys
+        sys.print_exception(e)
+        return json.dumps({"error": str(e)}), 400
+
+@controller.post('/<id>/clone')
+@with_session
+async def clone_tab(request, session, id):
+    """Clone an existing tab and add it to the current profile."""
+    try:
+        source = tabs.read(id)
+        if not source:
+            return json.dumps({"error": "Tab not found"}), 404
+
+        data = request.json or {}
+        source_name = source.get("name") or f"Tab {id}"
+        new_name = data.get("name") or f"{source_name} Copy"
+        clone_id = tabs.create(new_name, source.get("names"), source.get("presets"))
+        extra = {k: v for k, v in source.items() if k not in ("name", "names", "presets")}
+        if extra:
+            tabs.update(clone_id, extra)
+
+        profile_id = get_current_profile_id(session)
+        if profile_id:
+            profile = profiles.read(profile_id)
+            if profile:
+                tabs_list = profile.get('tabs', profile.get('tab_order', []))
+                if clone_id not in tabs_list:
+                    tabs_list.append(clone_id)
+                    profile['tabs'] = tabs_list
+                    if 'tab_order' in profile:
+                        del profile['tab_order']
+                    profiles.update(profile_id, profile)
+
+        tab_data = tabs.read(clone_id)
+        return json.dumps({clone_id: tab_data}), 201, {'Content-Type': 'application/json'}
+    except Exception as e:
+        import sys
+        try:
+            sys.print_exception(e)
+        except:
+            pass
+        return json.dumps({"error": str(e)}), 400
--- a/src/main.py
+++ b/src/main.py
@@ -1,23 +1,127 @@
 import asyncio
+import json
+import os
+from microdot import Microdot, send_file
+from microdot.websocket import with_websocket
+from microdot.session import Session
 from settings import Settings
-from web import web
-import gc
-import machine

-async def main():
+import controllers.preset as preset
+import controllers.profile as profile
+import controllers.group as group
+import controllers.sequence as sequence
+import controllers.tab as tab
+import controllers.palette as palette
+import controllers.scene as scene
+import controllers.pattern as pattern
+import controllers.settings as settings_controller
+from models.transport import get_sender, set_sender
+
+
+async def main(port=80):
    settings = Settings()
+    print(settings)
    print("Starting")
-    w = web(settings)
-    server = asyncio.create_task(w.start_server(host="0.0.0.0", port=80))

-    wdt = machine.WDT(timeout=10000)
-    wdt.feed()
+    # Initialize transport (serial to ESP32 bridge)
+    sender = get_sender(settings)
+    set_sender(sender)
+
+    app = Microdot()
+    
+    # Initialize sessions with a secret key from settings
+    secret_key = settings.get('session_secret_key', 'led-controller-secret-key-change-in-production')
+    Session(app, secret_key=secret_key)
+    
+    # Mount model controllers as subroutes
+    # Verify controllers are Microdot instances before mounting
+    controllers_to_mount = [
+        ('/presets', preset, 'preset'),
+        ('/profiles', profile, 'profile'),
+        ('/groups', group, 'group'),
+        ('/sequences', sequence, 'sequence'),
+        ('/tabs', tab, 'tab'),
+        ('/palettes', palette, 'palette'),
+        ('/scenes', scene, 'scene'),
+    ]
+    
+    # Mount model controllers as subroutes
+    app.mount(preset.controller, '/presets')
+    app.mount(profile.controller, '/profiles')
+    app.mount(group.controller, '/groups')
+    app.mount(sequence.controller, '/sequences')
+    app.mount(tab.controller, '/tabs')
+    app.mount(palette.controller, '/palettes')
+    app.mount(scene.controller, '/scenes')
+    app.mount(pattern.controller, '/patterns')
+    app.mount(settings_controller.controller, '/settings')
+    
+    # Serve index.html at root (cwd is src/ when run via pipenv run run)
+    @app.route('/')
+    def index(request):
+        """Serve the main web UI."""
+        return send_file('templates/index.html')
+    
+    # Serve settings page
+    @app.route('/settings')
+    def settings_page(request):
+        """Serve the settings page."""
+        return send_file('templates/settings.html')
+    
+    # Favicon: avoid 404 in browser console (no file needed)
+    @app.route('/favicon.ico')
+    def favicon(request):
+        return '', 204
+
+    # Static file route
+    @app.route("/static/<path:path>")
+    def static_handler(request, path):
+        """Serve static files."""
+        if '..' in path:
+            # Directory traversal is not allowed
+            return 'Not found', 404
+        return send_file('static/' + path)
+
+    @app.route('/ws')
+    @with_websocket
+    async def ws(request, ws):
+        while True:
+            data = await ws.receive()
+            print(data)
+            if data:
+                try:
+                    parsed = json.loads(data)
+                    print("WS received JSON:", parsed)
+                    # Optional "to": 12-char hex MAC; rest is payload (sent with that address).
+                    addr = parsed.pop("to", None)
+                    payload = json.dumps(parsed) if parsed else data
+                    await sender.send(payload, addr=addr)
+                except json.JSONDecodeError:
+                    # Not JSON: send raw with default address
+                    try:
+                        await sender.send(data)
+                    except Exception:
+                        try:
+                            await ws.send(json.dumps({"error": "Send failed"}))
+                        except Exception:
+                            pass
+                except Exception:
+                    try:
+                        await ws.send(json.dumps({"error": "Send failed"}))
+                    except Exception:
+                        pass
+            else:
+                break
+
+
+
+    server = asyncio.create_task(app.start_server(host="0.0.0.0", port=port))

    while True:
-        gc.collect()
-        for i in range(60):
-            wdt.feed()
-            await asyncio.sleep_ms(500)
+        await asyncio.sleep(30)
    # cleanup before ending the application
-    await server
-asyncio.run(main())
+
+if __name__ == "__main__":
+    import os
+    port = int(os.environ.get("PORT", 80))
+    asyncio.run(main(port=port))
--- a/src/models/init.py
+++ b/src/models/init.py
@@ -0,0 +1 @@
+# Models package
--- a/src/models/device.py
+++ b/src/models/device.py
@@ -0,0 +1,54 @@
+from models.model import Model
+
+
+def _normalize_address(addr):
+    """Normalize 6-byte ESP32 address to 12-char lowercase hex (no colons)."""
+    if addr is None:
+        return None
+    s = str(addr).strip().lower().replace(":", "").replace("-", "")
+    if len(s) == 12 and all(c in "0123456789abcdef" for c in s):
+        return s
+    return None
+
+
+class Device(Model):
+    def __init__(self):
+        super().__init__()
+
+    def create(self, name="", address=None, default_pattern=None, tabs=None):
+        next_id = self.get_next_id()
+        addr = _normalize_address(address)
+        self[next_id] = {
+            "name": name,
+            "address": addr,
+            "default_pattern": default_pattern if default_pattern else None,
+            "tabs": list(tabs) if tabs else [],
+        }
+        self.save()
+        return next_id
+
+    def read(self, id):
+        id_str = str(id)
+        return self.get(id_str, None)
+
+    def update(self, id, data):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        if "address" in data and data["address"] is not None:
+            data = dict(data)
+            data["address"] = _normalize_address(data["address"])
+        self[id_str].update(data)
+        self.save()
+        return True
+
+    def delete(self, id):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self.pop(id_str)
+        self.save()
+        return True
+
+    def list(self):
+        return list(self.keys())
--- a/src/models/group.py
+++ b/src/models/group.py
@@ -0,0 +1,51 @@
+from models.model import Model
+
+class Group(Model):
+    def __init__(self):
+        super().__init__()
+
+    def create(self, name=""):
+        next_id = self.get_next_id()
+        self[next_id] = {
+            "name": name,
+            "devices": [],
+            "pattern": "on",
+            "colors": ["000000", "FF0000"],
+            "brightness": 100,
+            "delay": 100,
+            "step_offset": 0,
+            "step_increment": 1,
+            "n1": 0,
+            "n2": 0,
+            "n3": 0,
+            "n4": 0,
+            "n5": 0,
+            "n6": 0,
+            "n7": 0,
+            "n8": 0
+        }
+        self.save()
+        return next_id
+
+    def read(self, id):
+        id_str = str(id)
+        return self.get(id_str, None)
+    
+    def update(self, id, data):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self[id_str].update(data)
+        self.save()
+        return True
+    
+    def delete(self, id):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self.pop(id_str)
+        self.save()
+        return True
+    
+    def list(self):
+        return list(self.keys())
--- a/src/models/model.py
+++ b/src/models/model.py
@@ -0,0 +1,113 @@
+import json
+import os
+import traceback
+
+# DB directory: project root / db (writable without root)
+def _db_dir():
+    try:
+        # src/models/model.py -> project root
+        base = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+        return os.path.join(base, "db")
+    except Exception:
+        return "db"
+
+class Model(dict):
+    def __new__(cls, *args, **kwargs):
+        # Singleton pattern: return existing instance if it exists
+        if not hasattr(cls, '_instance'):
+            cls._instance = super().__new__(cls)
+        return cls._instance
+    
+    def __init__(self):
+        # Only initialize once (check if already initialized)
+        if hasattr(self, '_initialized'):
+            return
+        
+        db_dir = _db_dir()
+        try:
+            os.makedirs(db_dir, exist_ok=True)
+        except OSError:
+            pass
+        self.class_name = self.__class__.__name__
+        self.file = os.path.join(db_dir, f"{self.class_name.lower()}.json")
+        super().__init__()
+
+        self.load()  # Load settings from file during initialization
+        self._initialized = True
+
+    def set_defaults(self):
+        self.clear()
+
+    def get_next_id(self):
+        """Get the next available ID for creating a new record."""
+        if not self:
+            return "1"
+        max_id = max((int(k) for k in self.keys() if k.isdigit()), default=0)
+        return str(max_id + 1)
+
+    def save(self):
+        try:
+            db_dir = os.path.dirname(self.file)
+            try:
+                os.makedirs(db_dir, exist_ok=True)
+            except OSError:
+                pass
+            j = json.dumps(self)
+            with open(self.file, 'w') as file:
+                file.write(j)
+                file.flush()  # Ensure data is written to buffer
+            # Try to sync filesystem if available (MicroPython)
+            try:
+                os.sync()
+            except (AttributeError, OSError):
+                pass  # os.sync() not available on all platforms
+            print(f"{self.class_name} saved successfully to {self.file}")
+        except Exception as e:
+            print(f"Error saving {self.class_name} to {self.file}: {e}")
+            traceback.print_exception(type(e), e, e.__traceback__)
+
+    def load(self):
+        try:
+            # Check if file exists first
+            try:
+                with open(self.file, 'r') as file:
+                    content = file.read().strip()
+            except OSError:
+                # File doesn't exist
+                raise
+            
+            if not content:
+                # Empty file
+                loaded_settings = {}
+            else:
+                # Parse JSON content
+                loaded_settings = json.loads(content)
+            
+            # Verify it's a dictionary
+            if not isinstance(loaded_settings, dict):
+                raise ValueError(f"File does not contain a dictionary, got {type(loaded_settings)}")
+            
+            # Clear and update with loaded data
+            # Clear first
+            self.clear()
+            # Manually copy items to avoid any update() method issues
+            for key, value in loaded_settings.items():
+                self[key] = value
+            print(f"{self.class_name} loaded successfully.")
+        except OSError as e:
+            # File doesn't exist yet - this is normal on first run
+            # Create an empty file with defaults
+            self.set_defaults()
+            self.save()
+            print(f"{self.class_name} initialized (new file created).")
+        except ValueError:
+            # JSON parsing error - file exists but is corrupted
+            # Note: MicroPython uses ValueError for JSON errors, not JSONDecodeError
+            print(f"Error loading {self.class_name}: Invalid JSON format. Resetting to defaults.")
+            self.set_defaults()
+            self.save()
+        except Exception:
+            # Other unexpected errors - avoid trying to format exception to prevent further errors
+            print(f"Error loading {self.class_name}. Resetting to defaults.")
+            self.set_defaults()
+            self.save()
--- a/src/models/pallet.py
+++ b/src/models/pallet.py
@@ -0,0 +1,45 @@
+from models.model import Model
+
+class Palette(Model):
+    def __init__(self):
+        super().__init__()
+
+    def create(self, name="", colors=None):
+        next_id = self.get_next_id()
+        # Store palette as a simple list of colors; name is ignored.
+        self[next_id] = list(colors) if colors else []
+        self.save()
+        return next_id
+
+    def read(self, id):
+        id_str = str(id)
+        value = self.get(id_str, None)
+        # Backwards compatibility: if stored as {"colors": [...]}, unwrap.
+        if isinstance(value, dict) and "colors" in value:
+            return value.get("colors") or []
+        # Otherwise, expect a list of colors.
+        return value or []
+    
+    def update(self, id, data):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        # Accept either {"colors": [...]} or a raw list.
+        if isinstance(data, dict):
+            colors = data.get("colors", [])
+        else:
+            colors = data
+        self[id_str] = list(colors) if colors else []
+        self.save()
+        return True
+    
+    def delete(self, id):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self.pop(id_str)
+        self.save()
+        return True
+    
+    def list(self):
+        return list(self.keys())
--- a/src/models/pattern.py
+++ b/src/models/pattern.py
@@ -0,0 +1,38 @@
+from models.model import Model
+
+
+class Pattern(Model):
+    def __init__(self):
+        super().__init__()
+
+    def create(self, name="", data=None):
+        pattern_name = str(name).strip()
+        if not pattern_name:
+            pattern_name = self.get_next_id()
+        self[pattern_name] = data if isinstance(data, dict) else {}
+        self.save()
+        return pattern_name
+
+    def read(self, id):
+        id_str = str(id)
+        return self.get(id_str, None)
+
+    def update(self, id, data):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        if isinstance(data, dict):
+            self[id_str].update(data)
+        self.save()
+        return True
+
+    def delete(self, id):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self.pop(id_str)
+        self.save()
+        return True
+
+    def list(self):
+        return list(self.keys())
--- a/src/models/preset.py
+++ b/src/models/preset.py
@@ -0,0 +1,69 @@
+from models.model import Model
+from models.profile import Profile
+
+class Preset(Model):
+    def __init__(self):
+        super().__init__()
+        # Backfill profile ownership for existing presets.
+        try:
+            profiles = Profile()
+            profile_list = profiles.list()
+            default_profile_id = profile_list[0] if profile_list else None
+            changed = False
+            for preset_id, preset_data in list(self.items()):
+                if isinstance(preset_data, dict) and "profile_id" not in preset_data:
+                    if default_profile_id is not None:
+                        preset_data["profile_id"] = str(default_profile_id)
+                        changed = True
+            if changed:
+                self.save()
+        except Exception:
+            pass
+
+    def create(self, profile_id=None):
+        next_id = self.get_next_id()
+        self[next_id] = {
+            "name": "",
+            "pattern": "",
+            "colors": [],
+            "brightness": 0,
+            "delay": 0,
+            "n1": 0,
+            "n2": 0,
+            "n3": 0,
+            "n4": 0,
+            "n5": 0,
+            "n6": 0,
+            "n7": 0,
+            "n8": 0,
+            "profile_id": str(profile_id) if profile_id is not None else None,
+        }
+        self.save()
+        return next_id
+
+
+    def read(self, id):
+        id_str = str(id)
+        if id_str not in self:
+            return None
+        return self[id_str]
+    
+    def update(self, id, data):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self[id_str].update(data)
+        self.save()
+        return True
+    
+    def delete(self, id):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self.pop(id_str)
+        self.save()
+        return True
+    
+    def list(self):
+        return list(self.keys())    
+    
--- a/src/models/profile.py
+++ b/src/models/profile.py
@@ -0,0 +1,69 @@
+from models.model import Model
+from models.pallet import Palette
+
+
+class Profile(Model):
+    def __init__(self):
+        """Profile model.
+
+        Each profile owns a single, unique palette stored in the Palette model.
+        The profile stores a `palette_id` that points to its palette; any legacy
+        inline `palette` arrays are migrated to a dedicated Palette entry.
+        """
+        super().__init__()
+        self._palette_model = Palette()
+
+        # Migrate legacy inline palettes to separate Palette entries.
+        changed = False
+        for pid, pdata in list(self.items()):
+            if isinstance(pdata, dict):
+                if "palette" in pdata and "palette_id" not in pdata:
+                    colors = pdata.get("palette") or []
+                    palette_id = self._palette_model.create(colors=colors)
+                    pdata.pop("palette", None)
+                    pdata["palette_id"] = str(palette_id)
+                    changed = True
+        if changed:
+            self.save()
+
+    def create(self, name="", profile_type="tabs"):
+        """Create a new profile and its own empty palette.
+
+        profile_type: "tabs" or "scenes" (ignoring scenes for now)
+        """
+        next_id = self.get_next_id()
+        # Create a unique palette for this profile.
+        palette_id = self._palette_model.create(colors=[])
+        self[next_id] = {
+            "name": name,
+            "type": profile_type,  # "tabs" or "scenes"
+            "tabs": [],  # Array of tab IDs
+            "scenes": [],  # Array of scene IDs (for future use)
+            "palette_id": str(palette_id),
+        }
+        self.save()
+        return next_id
+
+    def read(self, id):
+        id_str = str(id)
+        return self.get(id_str, None)
+    
+    def update(self, id, data):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self[id_str].update(data)
+        self.save()
+        return True
+    
+    def delete(self, id):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self.pop(id_str)
+        self.save()
+        return True
+    
+    def list(self):
+        return list(self.keys())
+    
--- a/src/models/scene.py
+++ b/src/models/scene.py
@@ -0,0 +1,38 @@
+from models.model import Model
+
+class Scene(Model):
+    def __init__(self):
+        super().__init__()
+
+    def create(self, name="", sequences=None, groups=None):
+        next_id = self.get_next_id()
+        self[next_id] = {
+            "name": name,
+            "sequences": sequences if sequences else [],
+            "groups": groups if groups else []
+        }
+        self.save()
+        return next_id
+
+    def read(self, id):
+        id_str = str(id)
+        return self.get(id_str, None)
+    
+    def update(self, id, data):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self[id_str].update(data)
+        self.save()
+        return True
+    
+    def delete(self, id):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self.pop(id_str)
+        self.save()
+        return True
+    
+    def list(self):
+        return list(self.keys())
--- a/src/models/serial.py
+++ b/src/models/serial.py
@@ -0,0 +1,12 @@
+class Serial:
+    def __init__(self, port, baudrate):
+        self.port = port
+        self.baudrate = baudrate
+        self.uart = UART(1, baudrate, tx=Pin(21), rx=Pin(6))
+
+    def send(self, data):
+        self.uart.write(data)
+
+    def receive(self):
+        return self.uart.read()
+        
--- a/src/models/squence.py
+++ b/src/models/squence.py
@@ -0,0 +1,44 @@
+from models.model import Model
+
+class Sequence(Model):
+    def __init__(self):
+        super().__init__()
+
+    def create(self, group_name="", preset_names=None):
+        next_id = self.get_next_id()
+        self[next_id] = {
+            "group_name": group_name,
+            "presets": preset_names if preset_names else [],
+            "sequence_duration": 3000,  # Duration per preset in ms
+            "sequence_transition": 500,  # Transition time in ms
+            "sequence_loop": False,
+            "sequence_repeat_count": 0,  # 0 = infinite
+            "sequence_active": False,
+            "sequence_index": 0,
+            "sequence_start_time": 0
+        }
+        self.save()
+        return next_id
+
+    def read(self, id):
+        id_str = str(id)
+        return self.get(id_str, None)
+    
+    def update(self, id, data):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self[id_str].update(data)
+        self.save()
+        return True
+    
+    def delete(self, id):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self.pop(id_str)
+        self.save()
+        return True
+    
+    def list(self):
+        return list(self.keys())
--- a/src/models/tab.py
+++ b/src/models/tab.py
@@ -0,0 +1,39 @@
+from models.model import Model
+
+class Tab(Model):
+    def __init__(self):
+        super().__init__()
+
+    def create(self, name="", names=None, presets=None):
+        next_id = self.get_next_id()
+        self[next_id] = {
+            "name": name,
+            "names": names if names else [],
+            "presets": presets if presets else [],
+            "default_preset": None
+        }
+        self.save()
+        return next_id
+
+    def read(self, id):
+        id_str = str(id)
+        return self.get(id_str, None)
+    
+    def update(self, id, data):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self[id_str].update(data)
+        self.save()
+        return True
+    
+    def delete(self, id):
+        id_str = str(id)
+        if id_str not in self:
+            return False
+        self.pop(id_str)
+        self.save()
+        return True
+    
+    def list(self):
+        return list(self.keys())
--- a/src/models/transport.py
+++ b/src/models/transport.py
@@ -0,0 +1,66 @@
+import asyncio
+import json
+
+
+# Default: broadcast (6 bytes). Pi always sends 6-byte address + payload to ESP32.
+BROADCAST_MAC = bytes.fromhex("ffffffffffff")
+
+
+def _encode_payload(data):
+    if isinstance(data, str):
+        return data.encode()
+    if isinstance(data, dict):
+        return json.dumps(data).encode()
+    return data
+
+
+def _parse_mac(addr):
+    """Convert 12-char hex string or 6-byte bytes to 6-byte MAC."""
+    if addr is None or addr == b"":
+        return BROADCAST_MAC
+    if isinstance(addr, bytes) and len(addr) == 6:
+        return addr
+    if isinstance(addr, str) and len(addr) == 12:
+        return bytes.fromhex(addr)
+    return BROADCAST_MAC
+
+
+async def _to_thread(func, *args):
+    to_thread = getattr(asyncio, "to_thread", None)
+    if to_thread:
+        return await to_thread(func, *args)
+    loop = asyncio.get_event_loop()
+    return await loop.run_in_executor(None, func, *args)
+
+
+class SerialSender:
+    def __init__(self, port, baudrate, default_addr=None):
+        import serial
+
+        self._serial = serial.Serial(port, baudrate=baudrate, timeout=1)
+        self._default_addr = _parse_mac(default_addr)
+
+    async def send(self, data, addr=None):
+        mac = _parse_mac(addr) if addr is not None else self._default_addr
+        payload = _encode_payload(data)
+        await _to_thread(self._serial.write, mac + payload)
+        return True
+
+
+_current_sender = None
+
+
+def set_sender(sender):
+    global _current_sender
+    _current_sender = sender
+
+
+def get_current_sender():
+    return _current_sender
+
+
+def get_sender(settings):
+    port = settings.get("serial_port", "/dev/ttyS0")
+    baudrate = settings.get("serial_baudrate", 912000)
+    default_addr = settings.get("serial_destination_mac", "ffffffffffff")
+    return SerialSender(port, baudrate, default_addr=default_addr)
--- a/src/patterns.py
+++ b/src/patterns.py
@@ -1,291 +0,0 @@
-from machine import Pin
-from neopixel import NeoPixel
-import utime
-import random
-
-class Patterns:
-    def __init__(self, pin, num_leds, color1=(0,0,0), color2=(0,0,0), brightness=127, selected="rainbow_cycle", delay=100):
-        self.n = NeoPixel(Pin(pin, Pin.OUT), num_leds)
-        self.num_leds = num_leds
-        self.pattern_step = 0
-        self.last_update = utime.ticks_ms()
-        self.delay = delay
-        self.brightness = brightness
-        self.patterns = {
-            "off": self.off,
-            "on" : self.on,
-            "color_wipe": self.color_wipe_step,
-            "rainbow_cycle": self.rainbow_cycle_step,
-            "theater_chase": self.theater_chase_step,
-            "blink": self.blink_step,
-            "random_color_wipe": self.random_color_wipe_step,
-            "random_rainbow_cycle": self.random_rainbow_cycle_step,
-            "random_theater_chase": self.random_theater_chase_step,
-            "random_blink": self.random_blink_step,
-            "color_transition": self.color_transition_step,
-            "external": None
-        }
-        self.selected = selected
-        self.color1 = color1
-        self.color2 = color2
-        self.transition_duration = 50  # Duration of color transition in milliseconds
-        self.transition_step = 0
-
-    def sync(self):
-        self.pattern_step=0
-        self.last_update = utime.ticks_ms()
-
-    def tick(self):
-        if self.patterns[self.selected]:
-            self.patterns[self.selected]()
-
-    def update_num_leds(self, pin, num_leds):
-        self.n = NeoPixel(Pin(pin, Pin.OUT), num_leds)
-        self.num_leds = num_leds
-        self.pattern_step = 0
-
-    def set_delay(self, delay):
-        self.delay = delay
-
-    def set_brightness(self, brightness):
-        self.brightness = brightness
-
-    def set_color1(self, color):
-        print(color)
-        self.color1 = self.apply_brightness(color)
-
-    def set_color2(self, color):
-        self.color2 = self.apply_brightness(color)
-
-    def apply_brightness(self, color):
-        return tuple(int(c * self.brightness / 255) for c in color)
-
-    def select(self, pattern):
-        if pattern in self.patterns:
-            self.selected = pattern
-            return True
-        return False
-
-    def set(self, i, color):
-        self.n[i] = color
-
-    def write(self):
-        self.n.write()
-
-    def fill(self):
-        for i in range(self.num_leds):
-            self.n[i] = self.color1
-        self.n.write()
-
-    def off(self):
-        color = self.color1
-        self.color1 = (0,0,0)
-        self.fill()
-        self.color1 = color
-
-    def on(self):
-        color = self.color1
-        self.color1 = self.apply_brightness(self.color1)
-        self.fill()
-        self.color1 = color
-
-
-    def color_wipe_step(self):
-        color = self.apply_brightness(self.color1)
-        current_time = utime.ticks_ms()
-        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
-            if self.pattern_step < self.num_leds:
-                for i in range(self.num_leds):
-                    self.n[i] = (0, 0, 0)
-                self.n[self.pattern_step] = self.apply_brightness(color)
-                self.n.write()
-                self.pattern_step += 1
-            else:
-                self.pattern_step = 0
-            self.last_update = current_time
-
-    def rainbow_cycle_step(self):
-        current_time = utime.ticks_ms()
-        if utime.ticks_diff(current_time, self.last_update) >= self.delay/5:
-            def wheel(pos):
-                if pos < 85:
-                    return (pos * 3, 255 - pos * 3, 0)
-                elif pos < 170:
-                    pos -= 85
-                    return (255 - pos * 3, 0, pos * 3)
-                else:
-                    pos -= 170
-                    return (0, pos * 3, 255 - pos * 3)
-
-            for i in range(self.num_leds):
-                rc_index = (i * 256 // self.num_leds) + self.pattern_step
-                self.n[i] = self.apply_brightness(wheel(rc_index & 255))
-            self.n.write()
-            self.pattern_step = (self.pattern_step + 1) % 256
-            self.last_update = current_time
-
-    def theater_chase_step(self):
-        current_time = utime.ticks_ms()
-        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
-            for i in range(self.num_leds):
-                if (i + self.pattern_step) % 3 == 0:
-                    self.n[i] = self.apply_brightness(self.color1)
-                else:
-                    self.n[i] = (0, 0, 0)
-            self.n.write()
-            self.pattern_step = (self.pattern_step + 1) % 3
-            self.last_update = current_time
-
-    def blink_step(self):
-        current_time = utime.ticks_ms()
-        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
-            if self.pattern_step % 2 == 0:
-                for i in range(self.num_leds):
-                    self.n[i] = self.apply_brightness(self.color1)
-            else:
-                for i in range(self.num_leds):
-                    self.n[i] = (0, 0, 0)
-            self.n.write()
-            self.pattern_step = (self.pattern_step + 1) % 2
-            self.last_update = current_time
-
-    def random_color_wipe_step(self):
-        current_time = utime.ticks_ms()
-        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
-            color = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
-            if self.pattern_step < self.num_leds:
-                for i in range(self.num_leds):
-                    self.n[i] = (0, 0, 0)
-                self.n[self.pattern_step] = self.apply_brightness(color)
-                self.n.write()
-                self.pattern_step += 1
-            else:
-                self.pattern_step = 0
-            self.last_update = current_time
-
-    def random_rainbow_cycle_step(self):
-        current_time = utime.ticks_ms()
-        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
-            def wheel(pos):
-                if pos < 85:
-                    return (pos * 3, 255 - pos * 3, 0)
-                elif pos < 170:
-                    pos -= 85
-                    return (255 - pos * 3, 0, pos * 3)
-                else:
-                    pos -= 170
-                    return (0, pos * 3, 255 - pos * 3)
-
-            random_offset = random.randint(0, 255)
-            for i in range(self.num_leds):
-                rc_index = (i * 256 // self.num_leds) + self.pattern_step + random_offset
-                self.n[i] = self.apply_brightness(wheel(rc_index & 255))
-            self.n.write()
-            self.pattern_step = (self.pattern_step + 1) % 256
-            self.last_update = current_time
-
-    def random_theater_chase_step(self):
-        current_time = utime.ticks_ms()
-        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
-            color = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
-            for i in range(self.num_leds):
-                if (i + self.pattern_step) % 3 == 0:
-                    self.n[i] = self.apply_brightness(color)
-                else:
-                    self.n[i] = (0, 0, 0)
-            self.n.write()
-            self.pattern_step = (self.pattern_step + 1) % 3
-            self.last_update = current_time
-
-    def random_blink_step(self):
-        current_time = utime.ticks_ms()
-        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
-            color = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
-            if self.pattern_step % 2 == 0:
-                for i in range(self.num_leds):
-                    self.n[i] = self.apply_brightness(color)
-            else:
-                for i in range(self.num_leds):
-                    self.n[i] = (0, 0, 0)
-            self.n.write()
-            self.pattern_step = (self.pattern_step + 1) % 2
-            self.last_update = current_time
-
-    def color_transition_step(self):
-        current_time = utime.ticks_ms()
-        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
-            # Calculate transition factor based on elapsed time
-            transition_factor = (self.pattern_step * 100) / self.transition_duration
-            if transition_factor > 100:
-                transition_factor = 100
-            color = self.interpolate_color(self.color1, self.color2, transition_factor / 100)
-
-            # Apply the interpolated color to all LEDs
-            for i in range(self.num_leds):
-                self.n[i] = self.apply_brightness(color)
-            self.n.write()
-
-            self.pattern_step += self.delay
-            if self.pattern_step > self.transition_duration:
-                self.pattern_step = 0
-
-            self.last_update = current_time
-
-    def interpolate_color(self, color1, color2, factor):
-        return (
-            int(color1[0] + (color2[0] - color1[0]) * factor),
-            int(color1[1] + (color2[1] - color1[1]) * factor),
-            int(color1[2] + (color2[2] - color1[2]) * factor)
-        )
-
-    def two_steps_forward_one_step_back_step(self):
-        current_time = utime.ticks_ms()
-        if utime.ticks_diff(current_time, self.last_update) >= self.delay:
-            # Move forward 2 steps and backward 1 step
-            if self.direction == 1:  # Moving forward
-                if self.scanner_position < self.num_leds - 2:
-                    self.scanner_position += 2  # Move forward 2 steps
-                else:
-                    self.direction = -1  # Change direction to backward
-            else:  # Moving backward
-                if self.scanner_position > 0:
-                    self.scanner_position -= 1  # Move backward 1 step
-                else:
-                    self.direction = 1  # Change direction to forward
-
-            # Set all LEDs to off
-            for i in range(self.num_leds):
-                self.n[i] = (0, 0, 0)
-
-            # Set the current position to the color
-            self.n[self.scanner_position] = self.apply_brightness(self.color1)
-
-            # Apply the color transition
-            transition_factor = (self.pattern_step * 100) / self.transition_duration
-            if transition_factor > 100:
-                transition_factor = 100
-            color = self.interpolate_color(self.color1, self.color2, transition_factor / 100)
-            self.n[self.scanner_position] = self.apply_brightness(color)
-
-            self.n.write()
-            self.pattern_step += self.delay
-            if self.pattern_step > self.transition_duration:
-                self.pattern_step = 0
-
-            self.last_update = current_time
-
-if __name__ == "__main__":
-    p = Patterns(4, 180)
-    p.set_color1((255,0,0))
-    p.set_color2((0,255,0))
-    #p.set_delay(10)
-    try:
-        while True:
-            for key in p.patterns:
-                print(key)
-                p.select(key)
-                for _ in range(2000):
-                    p.tick()
-                    utime.sleep_ms(1)
-    except KeyboardInterrupt:
-        p.fill((0, 0, 0))
--- a/src/profile.py
+++ b/src/profile.py
--- a/src/settings.py
+++ b/src/settings.py
@@ -1,17 +1,53 @@
 import json
-import wifi
-import ubinascii
-import machine
+import os
+import binascii
+
+
+def _settings_path():
+    """Path to settings.json in project root (writable without root)."""
+    try:
+        base = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+        return os.path.join(base, "settings.json")
+    except Exception:
+        return "settings.json"
+

 class Settings(dict):
-    SETTINGS_FILE = "/settings.json"
+    SETTINGS_FILE = None  # Set in __init__ from _settings_path()

    def __init__(self):
        super().__init__()
+        if Settings.SETTINGS_FILE is None:
+            Settings.SETTINGS_FILE = _settings_path()
        self.load()  # Load settings from file during initialization

+    def generate_secret_key(self):
+        """Generate a random secret key for session signing."""
+        try:
+            # Try to use os.urandom for secure random bytes
+            random_bytes = os.urandom(32)
+            return binascii.hexlify(random_bytes).decode('utf-8')
+        except (AttributeError, NotImplementedError):
+            # Fallback for MicroPython or systems without os.urandom
+            try:
+                import secrets
+                return secrets.token_hex(32)
+            except ImportError:
+                # Last resort: use a combination of time and random
+                import time
+                import random
+                random.seed(time.time())
+                return binascii.hexlify(bytes([random.randint(0, 255) for _ in range(32)])).decode('utf-8')
+
    def set_defaults(self):
-        self = {}
+        """Set default settings if they don't exist."""
+        if 'session_secret_key' not in self:
+            self['session_secret_key'] = self.generate_secret_key()
+            # Save immediately when generating a new key
+            self.save()
+        # ESP-NOW STA channel (2.4 GHz) for LED drivers / bridge alignment; 1–11
+        if 'wifi_channel' not in self:
+            self['wifi_channel'] = 6

    def save(self):
        try:
@@ -23,12 +59,19 @@ class Settings(dict):
            print(f"Error saving settings: {e}")

    def load(self):
+        loaded_from_file = False
        try:
            with open(self.SETTINGS_FILE, 'r') as file:
                loaded_settings = json.load(file)
            self.update(loaded_settings)
+            loaded_from_file = True
            print("Settings loaded successfully.")
        except Exception as e:
            print(f"Error loading settings")
+            self.clear()
+        finally:
+            # Ensure defaults are set even if file exists but is missing keys
            self.set_defaults()
+            # Only save if file didn't exist or was invalid
+            if not loaded_from_file:
                self.save()
--- a/src/static/app.js
+++ b/src/static/app.js
--- a/src/static/color_palette.js
+++ b/src/static/color_palette.js
@@ -0,0 +1,194 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const paletteButton = document.getElementById('color-palette-btn');
+  const paletteModal = document.getElementById('color-palette-modal');
+  const closeButton = document.getElementById('color-palette-close-btn');
+  const paletteContainer = document.getElementById('palette-container');
+  const paletteNewColor = document.getElementById('palette-new-color');
+  const profileNameDisplay = document.getElementById('palette-current-profile-name');
+
+  if (!paletteButton || !paletteModal || !paletteContainer) {
+    return;
+  }
+
+  let currentProfileId = null;
+  let currentPaletteId = null;
+  let currentPalette = [];
+  let currentProfileName = null;
+
+  const renderPalette = () => {
+    paletteContainer.innerHTML = '';
+    if (!currentPalette.length) {
+      const empty = document.createElement('p');
+      empty.className = 'muted-text';
+      empty.textContent = 'No colors in palette.';
+      paletteContainer.appendChild(empty);
+      return;
+    }
+    currentPalette.forEach((color, index) => {
+      const row = document.createElement('div');
+      row.className = 'profiles-row';
+      row.dataset.color = color;
+      row.style.cssText = 'display: flex; align-items: center; gap: 1rem;';
+      // Ensure no text content
+      row.textContent = '';
+
+      const swatch = document.createElement('div');
+      swatch.style.cssText = `
+        width: 64px;
+        height: 64px;
+        border-radius: 8px;
+        background-color: ${color};
+        border: 2px solid #4a4a4a;
+        cursor: pointer;
+        flex-shrink: 0;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+      `;
+      swatch.title = color; // Show hex code on hover only
+      swatch.setAttribute('aria-label', `Color ${color}`);
+
+      const removeButton = document.createElement('button');
+      removeButton.className = 'btn btn-danger btn-small';
+      removeButton.textContent = 'Remove';
+      removeButton.style.fontSize = '0.8rem'; // Restore font size for button
+      removeButton.addEventListener('click', async (e) => {
+        e.stopPropagation();
+        const updated = currentPalette.filter((_, i) => i !== index);
+        await savePalette(updated);
+      });
+
+      row.appendChild(swatch);
+      row.appendChild(removeButton);
+      paletteContainer.appendChild(row);
+    });
+  };
+
+  const loadPalette = async () => {
+    try {
+      const currentResponse = await fetch('/profiles/current', {
+        headers: { Accept: 'application/json' },
+      });
+      if (!currentResponse.ok) {
+        throw new Error('Failed to load current profile');
+      }
+      const currentData = await currentResponse.json();
+      currentProfileId = currentData.id || null;
+      const profile = currentData.profile || null;
+      currentProfileName = profile ? profile.name : null;
+      if (profileNameDisplay) {
+        profileNameDisplay.textContent = currentProfileName || currentProfileId || 'None';
+      }
+
+      if (!currentProfileId || !profile) {
+        currentPalette = [];
+        renderPalette();
+        return;
+      }
+
+      // Prefer palette_id-based storage; fall back to legacy inline palette.
+      currentPaletteId = profile.palette_id || profile.paletteId || null;
+      if (currentPaletteId) {
+        try {
+          const palResponse = await fetch(`/palettes/${currentPaletteId}`, {
+            headers: { Accept: 'application/json' },
+          });
+          if (palResponse.ok) {
+            const palData = await palResponse.json();
+            currentPalette = (palData.colors) || [];
+          } else {
+            currentPalette = [];
+          }
+        } catch (e) {
+          console.error('Failed to load palette by id:', e);
+          currentPalette = [];
+        }
+      } else {
+        // Legacy: palette stored directly on profile
+        currentPalette = profile.palette || profile.color_palette || [];
+      }
+      renderPalette();
+    } catch (error) {
+      console.error('Failed to load palette:', error);
+      currentPalette = [];
+      renderPalette();
+    }
+  };
+
+  const savePalette = async (newPalette) => {
+    if (!currentProfileId) {
+      alert('No profile selected.');
+      return;
+    }
+    try {
+      // Ensure we have a palette ID for this profile.
+      if (!currentPaletteId) {
+        const createResponse = await fetch('/palettes', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ colors: newPalette }),
+        });
+        if (!createResponse.ok) {
+          throw new Error('Failed to create palette');
+        }
+        const pal = await createResponse.json();
+        currentPaletteId = pal.id || Object.keys(pal)[0];
+
+        // Link the new palette to the current profile.
+        const linkResponse = await fetch('/profiles/current', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            palette_id: currentPaletteId,
+          }),
+        });
+        if (!linkResponse.ok) {
+          throw new Error('Failed to link palette to profile');
+        }
+      } else {
+        // Update existing palette colors
+        const updateResponse = await fetch(`/palettes/${currentPaletteId}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ colors: newPalette }),
+        });
+        if (!updateResponse.ok) {
+          throw new Error('Failed to save palette');
+        }
+      }
+
+      currentPalette = newPalette;
+      renderPalette();
+    } catch (error) {
+      console.error('Failed to save palette:', error);
+      alert('Failed to save palette.');
+    }
+  };
+
+  const openModal = () => {
+    paletteModal.classList.add('active');
+    loadPalette();
+  };
+
+  const closeModal = () => {
+    paletteModal.classList.remove('active');
+  };
+
+  paletteButton.addEventListener('click', openModal);
+  if (closeButton) {
+    closeButton.addEventListener('click', closeModal);
+  }
+  if (paletteNewColor) {
+    const addSelectedColor = async () => {
+      const color = paletteNewColor.value;
+      if (!color) {
+        return;
+      }
+      if (currentPalette.includes(color)) {
+        alert('Color already in palette.');
+        return;
+      }
+      await savePalette([...currentPalette, color]);
+    };
+    // Add when the picker closes (user confirms selection).
+    paletteNewColor.addEventListener('change', addSelectedColor);
+  }
+});
--- a/src/static/devices.js
+++ b/src/static/devices.js
@@ -0,0 +1,251 @@
+// Device management: list, create, edit, delete (name and 6-byte address)
+
+const HEX_BOX_COUNT = 12;
+
+function makeHexAddressBoxes(container) {
+    if (!container || container.querySelector('.hex-addr-box')) return;
+    container.innerHTML = '';
+    for (let i = 0; i < HEX_BOX_COUNT; i++) {
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.className = 'hex-addr-box';
+        input.maxLength = 1;
+        input.autocomplete = 'off';
+        input.setAttribute('data-index', i);
+        input.setAttribute('inputmode', 'numeric');
+        input.setAttribute('aria-label', `Hex digit ${i + 1}`);
+        input.addEventListener('input', (e) => {
+            const v = e.target.value.replace(/[^0-9a-fA-F]/g, '');
+            e.target.value = v;
+            if (v && e.target.nextElementSibling && e.target.nextElementSibling.classList.contains('hex-addr-box')) {
+                e.target.nextElementSibling.focus();
+            }
+        });
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Backspace' && !e.target.value && e.target.previousElementSibling) {
+                e.target.previousElementSibling.focus();
+            }
+        });
+        input.addEventListener('paste', (e) => {
+            e.preventDefault();
+            const pasted = (e.clipboardData.getData('text') || '').replace(/[^0-9a-fA-F]/g, '').slice(0, HEX_BOX_COUNT);
+            const boxes = container.querySelectorAll('.hex-addr-box');
+            for (let j = 0; j < pasted.length && j < boxes.length; j++) {
+                boxes[j].value = pasted[j];
+            }
+            if (pasted.length > 0) {
+                const nextIdx = Math.min(pasted.length, boxes.length - 1);
+                boxes[nextIdx].focus();
+            }
+        });
+        container.appendChild(input);
+    }
+}
+
+function getAddressFromBoxes(container) {
+    if (!container) return '';
+    const boxes = container.querySelectorAll('.hex-addr-box');
+    return Array.from(boxes).map((b) => b.value).join('').toLowerCase();
+}
+
+function setAddressToBoxes(container, addrStr) {
+    if (!container) return;
+    const s = (addrStr || '').replace(/[^0-9a-fA-F]/g, '').slice(0, HEX_BOX_COUNT);
+    const boxes = container.querySelectorAll('.hex-addr-box');
+    boxes.forEach((b, i) => {
+        b.value = s[i] || '';
+    });
+}
+
+async function loadDevicesModal() {
+    const container = document.getElementById('devices-list-modal');
+    if (!container) return;
+    container.innerHTML = '<span class="muted-text">Loading...</span>';
+    try {
+        const response = await fetch('/devices', { headers: { Accept: 'application/json' } });
+        if (!response.ok) throw new Error('Failed to load devices');
+        const devices = await response.json();
+        renderDevicesList(devices || {});
+    } catch (e) {
+        console.error('loadDevicesModal:', e);
+        container.innerHTML = '<span class="muted-text">Failed to load devices.</span>';
+    }
+}
+
+function renderDevicesList(devices) {
+    const container = document.getElementById('devices-list-modal');
+    if (!container) return;
+    container.innerHTML = '';
+    const ids = Object.keys(devices).filter((k) => devices[k] && typeof devices[k] === 'object');
+    if (ids.length === 0) {
+        const p = document.createElement('p');
+        p.className = 'muted-text';
+        p.textContent = 'No devices. Create one above.';
+        container.appendChild(p);
+        return;
+    }
+    ids.forEach((devId) => {
+        const dev = devices[devId];
+        const row = document.createElement('div');
+        row.className = 'profiles-row';
+        row.style.display = 'flex';
+        row.style.alignItems = 'center';
+        row.style.gap = '0.5rem';
+        row.style.flexWrap = 'wrap';
+
+        const label = document.createElement('span');
+        label.textContent = (dev && dev.name) || devId;
+        label.style.flex = '1';
+        label.style.minWidth = '100px';
+
+        const meta = document.createElement('span');
+        meta.className = 'muted-text';
+        meta.style.fontSize = '0.85em';
+        const addr = (dev && dev.address) ? dev.address : '—';
+        meta.textContent = `Address: ${addr}`;
+
+        const editBtn = document.createElement('button');
+        editBtn.className = 'btn btn-secondary btn-small';
+        editBtn.textContent = 'Edit';
+        editBtn.addEventListener('click', () => openEditDeviceModal(devId, dev));
+
+        const deleteBtn = document.createElement('button');
+        deleteBtn.className = 'btn btn-secondary btn-small';
+        deleteBtn.textContent = 'Delete';
+        deleteBtn.addEventListener('click', async () => {
+            if (!confirm(`Delete device "${(dev && dev.name) || devId}"?`)) return;
+            try {
+                const res = await fetch(`/devices/${devId}`, { method: 'DELETE' });
+                if (res.ok) await loadDevicesModal();
+                else {
+                    const data = await res.json().catch(() => ({}));
+                    alert(data.error || 'Delete failed');
+                }
+            } catch (err) {
+                console.error(err);
+                alert('Delete failed');
+            }
+        });
+
+        row.appendChild(label);
+        row.appendChild(meta);
+        row.appendChild(editBtn);
+        row.appendChild(deleteBtn);
+        container.appendChild(row);
+    });
+}
+
+function openEditDeviceModal(devId, dev) {
+    const modal = document.getElementById('edit-device-modal');
+    const idInput = document.getElementById('edit-device-id');
+    const nameInput = document.getElementById('edit-device-name');
+    const addressBoxes = document.getElementById('edit-device-address-boxes');
+    if (!modal || !idInput) return;
+    idInput.value = devId;
+    if (nameInput) nameInput.value = (dev && dev.name) || '';
+    setAddressToBoxes(addressBoxes, (dev && dev.address) || '');
+    modal.classList.add('active');
+}
+
+async function createDevice(name, address) {
+    try {
+        const res = await fetch('/devices', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name, address: address || null }),
+        });
+        const data = await res.json().catch(() => ({}));
+        if (res.ok) {
+            await loadDevicesModal();
+            return true;
+        }
+        alert(data.error || 'Failed to create device');
+        return false;
+    } catch (e) {
+        console.error('createDevice:', e);
+        alert('Failed to create device');
+        return false;
+    }
+}
+
+async function updateDevice(devId, name, address) {
+    try {
+        const res = await fetch(`/devices/${devId}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name, address: address || null }),
+        });
+        const data = await res.json().catch(() => ({}));
+        if (res.ok) {
+            await loadDevicesModal();
+            return true;
+        }
+        alert(data.error || 'Failed to update device');
+        return false;
+    } catch (e) {
+        console.error('updateDevice:', e);
+        alert('Failed to update device');
+        return false;
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    makeHexAddressBoxes(document.getElementById('new-device-address-boxes'));
+    makeHexAddressBoxes(document.getElementById('edit-device-address-boxes'));
+
+    const devicesBtn = document.getElementById('devices-btn');
+    const devicesModal = document.getElementById('devices-modal');
+    const devicesCloseBtn = document.getElementById('devices-close-btn');
+    const newName = document.getElementById('new-device-name');
+    const createBtn = document.getElementById('create-device-btn');
+    const editForm = document.getElementById('edit-device-form');
+    const editCloseBtn = document.getElementById('edit-device-close-btn');
+    const editDeviceModal = document.getElementById('edit-device-modal');
+
+    if (devicesBtn && devicesModal) {
+        devicesBtn.addEventListener('click', () => {
+            devicesModal.classList.add('active');
+            loadDevicesModal();
+        });
+    }
+    if (devicesCloseBtn) {
+        devicesCloseBtn.addEventListener('click', () => devicesModal && devicesModal.classList.remove('active'));
+    }
+    const newAddressBoxes = document.getElementById('new-device-address-boxes');
+    const doCreate = async () => {
+        const name = (newName && newName.value.trim()) || '';
+        if (!name) {
+            alert('Device name is required.');
+            return;
+        }
+        const address = newAddressBoxes ? getAddressFromBoxes(newAddressBoxes) : '';
+        const ok = await createDevice(name, address);
+        if (ok && newName) {
+            newName.value = '';
+            setAddressToBoxes(newAddressBoxes, '');
+        }
+    };
+    if (createBtn) createBtn.addEventListener('click', doCreate);
+    if (newName) newName.addEventListener('keypress', (e) => { if (e.key === 'Enter') doCreate(); });
+
+    if (editForm) {
+        editForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const idInput = document.getElementById('edit-device-id');
+            const nameInput = document.getElementById('edit-device-name');
+            const addressBoxes = document.getElementById('edit-device-address-boxes');
+            const devId = idInput && idInput.value;
+            if (!devId) return;
+            const address = addressBoxes ? getAddressFromBoxes(addressBoxes) : '';
+            const ok = await updateDevice(
+                devId,
+                nameInput ? nameInput.value.trim() : '',
+                address
+            );
+            if (ok) editDeviceModal.classList.remove('active');
+        });
+    }
+    if (editCloseBtn) {
+        editCloseBtn.addEventListener('click', () => editDeviceModal && editDeviceModal.classList.remove('active'));
+    }
+});
--- a/src/static/help.js
+++ b/src/static/help.js
@@ -0,0 +1,197 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Help modal
+  const helpBtn = document.getElementById('help-btn');
+  const helpModal = document.getElementById('help-modal');
+  const helpCloseBtn = document.getElementById('help-close-btn');
+  const mainMenuBtn = document.getElementById('main-menu-btn');
+  const mainMenuDropdown = document.getElementById('main-menu-dropdown');
+
+  if (helpBtn && helpModal) {
+    helpBtn.addEventListener('click', () => {
+      helpModal.classList.add('active');
+    });
+  }
+
+  if (helpCloseBtn && helpModal) {
+    helpCloseBtn.addEventListener('click', () => {
+      helpModal.classList.remove('active');
+    });
+  }
+
+  // Mobile main menu: forward clicks to existing header buttons
+  if (mainMenuBtn && mainMenuDropdown) {
+    mainMenuBtn.addEventListener('click', () => {
+      mainMenuDropdown.classList.toggle('open');
+    });
+
+    mainMenuDropdown.addEventListener('click', (event) => {
+      const target = event.target;
+      if (target && target.matches('button[data-target]')) {
+        const id = target.getAttribute('data-target');
+        const realBtn = document.getElementById(id);
+        if (realBtn) {
+          realBtn.click();
+        }
+        mainMenuDropdown.classList.remove('open');
+      }
+    });
+  }
+
+  // Settings modal wiring (reusing existing settings endpoints).
+  const settingsButton = document.getElementById('settings-btn');
+  const settingsModal = document.getElementById('settings-modal');
+  const settingsCloseButton = document.getElementById('settings-close-btn');
+
+  const showSettingsMessage = (text, type = 'success') => {
+    const messageEl = document.getElementById('settings-message');
+    if (!messageEl) return;
+    messageEl.textContent = text;
+    messageEl.className = `message ${type} show`;
+    setTimeout(() => {
+      messageEl.classList.remove('show');
+    }, 5000);
+  };
+
+  async function loadDeviceSettings() {
+    try {
+      const response = await fetch('/settings');
+      const data = await response.json();
+      const nameInput = document.getElementById('device-name-input');
+      if (nameInput && data && typeof data === 'object') {
+        nameInput.value = data.device_name || 'led-controller';
+      }
+      const chInput = document.getElementById('wifi-channel-input');
+      if (chInput && data && typeof data === 'object') {
+        const ch = data.wifi_channel;
+        chInput.value =
+          ch !== undefined && ch !== null && ch !== '' ? String(ch) : '6';
+      }
+    } catch (error) {
+      console.error('Error loading device settings:', error);
+    }
+  }
+
+  async function loadAPStatus() {
+    try {
+      const response = await fetch('/settings/wifi/ap');
+      const config = await response.json();
+      const statusEl = document.getElementById('ap-status');
+      if (!statusEl) return;
+      if (config.active) {
+        statusEl.innerHTML = `
+          <h4>AP Status: <span class="status-connected">Active</span></h4>
+          <p><strong>SSID:</strong> ${config.ssid || 'N/A'}</p>
+          <p><strong>Channel:</strong> ${config.channel || 'Auto'}</p>
+          <p><strong>IP Address:</strong> ${config.ip || 'N/A'}</p>
+        `;
+      } else {
+        statusEl.innerHTML = `
+          <h4>AP Status: <span class="status-disconnected">Inactive</span></h4>
+          <p>Access Point is not currently active</p>
+        `;
+      }
+      if (config.saved_ssid) document.getElementById('ap-ssid').value = config.saved_ssid;
+      if (config.saved_channel) document.getElementById('ap-channel').value = config.saved_channel;
+    } catch (error) {
+      console.error('Error loading AP status:', error);
+    }
+  }
+
+  if (settingsButton && settingsModal) {
+    settingsButton.addEventListener('click', () => {
+      settingsModal.classList.add('active');
+      // Load current WiFi status/config when opening
+      loadDeviceSettings();
+      loadAPStatus();
+    });
+  }
+
+  if (settingsCloseButton && settingsModal) {
+    settingsCloseButton.addEventListener('click', () => {
+      settingsModal.classList.remove('active');
+    });
+  }
+
+  const deviceForm = document.getElementById('device-form');
+  if (deviceForm) {
+    deviceForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const nameInput = document.getElementById('device-name-input');
+      const deviceName = nameInput ? nameInput.value.trim() : '';
+      if (!deviceName) {
+        showSettingsMessage('Device name is required', 'error');
+        return;
+      }
+      const chRaw = document.getElementById('wifi-channel-input')
+        ? document.getElementById('wifi-channel-input').value
+        : '6';
+      const wifiChannel = parseInt(chRaw, 10);
+      if (Number.isNaN(wifiChannel) || wifiChannel < 1 || wifiChannel > 11) {
+        showSettingsMessage('WiFi channel must be between 1 and 11', 'error');
+        return;
+      }
+      try {
+        const response = await fetch('/settings/settings', {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            device_name: deviceName,
+            wifi_channel: wifiChannel,
+          }),
+        });
+        const result = await response.json();
+        if (response.ok) {
+          showSettingsMessage(
+            'Device settings saved. They will apply on next restart where relevant.',
+            'success',
+          );
+        } else {
+          showSettingsMessage(`Error: ${result.error || 'Failed to save device name'}`, 'error');
+        }
+      } catch (error) {
+        showSettingsMessage(`Error: ${error.message}`, 'error');
+      }
+    });
+  }
+  const apForm = document.getElementById('ap-form');
+  if (apForm) {
+    apForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const formData = {
+        ssid: document.getElementById('ap-ssid').value,
+        password: document.getElementById('ap-password').value,
+        channel: document.getElementById('ap-channel').value || null,
+      };
+
+      if (formData.password && formData.password.length > 0 && formData.password.length < 8) {
+        showSettingsMessage('AP password must be at least 8 characters', 'error');
+        return;
+      }
+
+      if (formData.channel) {
+        formData.channel = parseInt(formData.channel, 10);
+        if (formData.channel < 1 || formData.channel > 11) {
+          showSettingsMessage('Channel must be between 1 and 11', 'error');
+          return;
+        }
+      }
+
+      try {
+        const response = await fetch('/settings/wifi/ap', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(formData),
+        });
+        const result = await response.json();
+        if (response.ok) {
+          showSettingsMessage('Access Point configured successfully!', 'success');
+          setTimeout(loadAPStatus, 1000);
+        } else {
+          showSettingsMessage(`Error: ${result.error || 'Failed to configure AP'}`, 'error');
+        }
+      } catch (error) {
+        showSettingsMessage(`Error: ${error.message}`, 'error');
+      }
+    });
+  }
+});
--- a/src/static/htmx.min.js
+++ b/src/static/htmx.min.js
--- a/src/static/light-component.js
+++ b/src/static/light-component.js
@@ -1,143 +0,0 @@
-import { getWebSocket } from "./websocket.js";
-
-export class LightComponent extends HTMLElement {
-  constructor() {
-    super();
-
-    // Create a shadow DOM for encapsulation
-    const shadow = this.attachShadow({ mode: "open" });
-
-    // Create the content for the component
-    const style = document.createElement("style");
-    style.textContent = `
-      :host {
-        display: block;
-        width: 100px;
-        height: 100px;
-        background-color: #4caf50;
-        color: white;
-        text-align: center;
-        line-height: 100px;
-        cursor: grab;
-        position: absolute;
-        border-radius: 8px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-      }
-
-      :host:active {
-        cursor: grabbing;
-        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-      }
-
-      .color-picker {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 50px;
-        height: 50px;
-        cursor: pointer;
-      }
-    `;
-
-    // Create the main content (draggable area)
-    const content = document.createElement("div");
-    content.textContent = this.textContent || "Light Me Up!";
-    content.style.position = "absolute";
-    content.style.top = "0";
-    content.style.left = "0";
-    content.style.width = "100%";
-    content.style.height = "100%";
-    content.style.display = "flex";
-    content.style.justifyContent = "center";
-    content.style.alignItems = "center";
-
-    // Create the color picker
-    const colorPicker = document.createElement("input");
-    colorPicker.type = "color";
-    colorPicker.classList.add("color-picker");
-    colorPicker.value = "#4caf50"; // Default color
-    colorPicker.addEventListener("input", () => {
-      this.style.backgroundColor = colorPicker.value;
-      this.dispatchEvent(
-        new CustomEvent("color-change", {
-          detail: { lightId: this.lightId, color: colorPicker.value },
-        }),
-      );
-    });
-
-    // Append the style, content, and color picker to the shadow DOM
-    shadow.appendChild(style);
-    shadow.appendChild(content);
-    shadow.appendChild(colorPicker);
-
-    // Add event listeners for drag-and-drop
-    content.addEventListener("mousedown", this.handleMouseDown.bind(this));
-    document.addEventListener("mousemove", this.handleMouseMove.bind(this));
-    document.addEventListener("mouseup", this.handleMouseUp.bind(this));
-  }
-
-  // Track the initial mouse position and component position
-  handleMouseDown(event) {
-    event.preventDefault();
-
-    // Get the initial mouse position relative to the component
-    this.initialMouseX = event.clientX;
-    this.initialMouseY = event.clientY;
-
-    // Get the initial position of the component
-    const rect = this.getBoundingClientRect();
-    this.initialComponentX = rect.left;
-    this.initialComponentY = rect.top;
-
-    // Add a class to indicate dragging
-    this.classList.add("dragging");
-  }
-
-  // Update the component's position as the mouse moves
-  handleMouseMove(event) {
-    if (!this.classList.contains("dragging")) return;
-
-    // Calculate the new position of the component
-    const newX = this.initialComponentX + (event.clientX - this.initialMouseX);
-    const newY = this.initialComponentY + (event.clientY - this.initialMouseY);
-
-    // Update the component's position
-    this.style.left = `${newX}px`;
-    this.style.top = `${newY}px`;
-  }
-
-  // Stop dragging when the mouse is released
-  handleMouseUp() {
-    // Check if the component is being dragged
-    if (!this.classList.contains("dragging")) {
-      return; // Do nothing if not dragging
-    }
-
-    // Remove the dragging class
-    this.classList.remove("dragging");
-
-    // Get the current position of the component
-    const rect = this.getBoundingClientRect();
-    const newX = rect.left;
-    const newY = rect.top;
-
-    // Dispatch an event to notify the parent about the updated position
-    this.dispatchEvent(
-      new CustomEvent("position-change", {
-        detail: { lightId: this.lightId, x: newX, y: newY },
-      }),
-    );
-  }
-
-  // Add a property to hold the lightId
-  set lightId(id) {
-    this._lightId = id;
-  }
-
-  get lightId() {
-    return this._lightId;
-  }
-}
-
-// Define the custom element
-customElements.define("light-component", LightComponent);
--- a/src/static/main.js
+++ b/src/static/main.js
@@ -1,105 +1,81 @@
-// Import the LightComponent from light-component.js
-import { LightComponent } from "./light-component.js";
-import { getWebSocket } from "./websocket.js";
+import "./rgb-slider.js";

-// Wait for the DOM to be fully loaded
-document.addEventListener("DOMContentLoaded", async () => {
-  // Select the container where the light-components will be added
-  const appContainer = document.getElementById("app");
+const ws = new WebSocket("ws://localhost:8000/ws");

-  // Fetch the JSON data from the /light endpoint
-  try {
-    const response = await fetch("/light");
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
+ws.onopen = () => {
+  console.log("WebSocket connection established");
+};
+
+ws.onclose = () => {
+  console.log("WebSocket connection closed");
+};
+
+ws.onerror = (error) => {
+  console.error("WebSocket error:", error);
+};
+
+// Number of sliders (tabs) you want to create
+const numTabs = 3;
+
+// Select the container for tabs and content
+const tabsContainer = document.querySelector(".tabs");
+const tabContentContainer = document.querySelector(".tab-content");
+
+// Create tabs dynamically
+for (let i = 1; i <= numTabs; i++) {
+  // Create the tab button
+  const tabButton = document.createElement("button");
+  tabButton.classList.add("tab");
+  tabButton.id = `tab${i}`;
+  tabButton.textContent = `Tab ${i}`;
+
+  // Add the tab button to the container
+  tabsContainer.appendChild(tabButton);
+
+  // Create the corresponding tab content (RGB slider)
+  const tabContent = document.createElement("div");
+  tabContent.classList.add("tab-pane");
+  tabContent.id = `content${i}`;
+  const slider = document.createElement("rgb-slider");
+  slider.id = i;
+  tabContent.appendChild(slider);
+
+  // Add the tab content to the container
+  tabContentContainer.appendChild(tabContent);
+
+  // Listen for color change on each RGB slider
+  slider.addEventListener("color-change", (e) => {
+    const { r, g, b } = e.detail;
+    console.log(`Color changed in tab ${i}:`, e.detail);
+    // Send RGB data to WebSocket server
+    if (ws.readyState === WebSocket.OPEN) {
+      const colorData = { r, g, b };
+      ws.send(JSON.stringify(colorData));
    }
-    const lightData = await response.json();
-
-    // Map to store backend IDs and their corresponding components
-    const componentMap = new Map();
-
-    // Function to create and configure a light component
-    function createLightComponent(data, key) {
-      const lightComponent = document.createElement("light-component");
-      lightComponent.style.left = `${data.x}px`; // Set the x position
-      lightComponent.style.top = `${data.y}px`; // Set the y position
-      lightComponent.style.backgroundColor = data.settings?.color || "#4caf50"; // Set the background color
-      lightComponent.textContent = data.name || "Light Me Up!"; // Set the text content
-
-      // Set the lightId property
-      lightComponent.lightId = key; // Use the backend ID as the lightId
-
-      // Store the component in the map
-      componentMap.set(key, lightComponent);
-
-      // Append the light component to the container
-      appContainer.appendChild(lightComponent);
-
-      // Handle position change
-      lightComponent.addEventListener("position-change", (event) => {
-        const { lightId, x, y } = event.detail;
-        updatePositionOnServer(lightId, x, y);
  });
+}

-      // Handle color change
-      lightComponent.addEventListener("color-change", (event) => {
-        const { lightId, color } = event.detail;
-        sendColorToServer(lightId, color);
-      });
+// Function to switch tabs
+function switchTab(tabId) {
+  const tabs = document.querySelectorAll(".tab");
+  const tabContents = document.querySelectorAll(".tab-pane");

-      // Example: Add a click event listener to the light-component
-      lightComponent.addEventListener("click", () => {
-        console.log(`Light component clicked! ID: ${lightComponent.lightId}`);
-      });
-    }
+  tabs.forEach((tab) => tab.classList.remove("active"));
+  tabContents.forEach((content) => content.classList.remove("active"));

-    // Iterate over the JSON data and create light components
-    for (const key in lightData) {
-      if (lightData.hasOwnProperty(key)) {
-        const light = lightData[key];
-        createLightComponent(light, key); // Pass the backend ID
-      }
-    }
+  // Activate the clicked tab and corresponding content
+  document.getElementById(tabId).classList.add("active");
+  document
+    .getElementById("content" + tabId.replace("tab", ""))
+    .classList.add("active");
+}

-    // Function to send the updated position to the server via a PATCH request
-    async function updatePositionOnServer(componentId, x, y) {
-      try {
-        const response = await fetch(`/light/${componentId}`, {
-          method: "PATCH",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ x, y }),
-        });
-
-        if (!response.ok) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-
-        console.log(
-          `Updated position for component ${componentId}: x=${x}, y=${y}`,
-        );
-      } catch (error) {
-        console.error("Error updating position on server:", error);
-      }
-    }
-
-    // Function to send the selected color to the server via WebSocket
-    function sendColorToServer(componentId, color) {
-      const websocket = getWebSocket();
-      const message = JSON.stringify({
-        componentId,
-        color: color,
-      });
-
-      if (websocket.readyState === WebSocket.OPEN) {
-        websocket.send(message);
-        console.log("Sent color to server:", message);
-      } else {
-        console.warn("WebSocket is not open. Unable to send color.");
-      }
-    }
-  } catch (error) {
-    console.error("Error fetching light data:", error);
+// Add event listeners to tabs
+tabsContainer.addEventListener("click", (e) => {
+  if (e.target.classList.contains("tab")) {
+    switchTab(e.target.id);
  }
 });
+
+// Initially set the first tab as active
+switchTab("tab1");
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
pi	09a87b79d2	docs(ui): update help assets and regenerate help pdf	2026-03-26 00:40:40 +13:00
pi	ec39df00fc	feat(settings/espnow): validate wifi_channel and wire into firmware	2026-03-26 00:40:21 +13:00
pi	43d494bcb9	fix(api): prevent circular reference in pattern create	2026-03-26 00:40:08 +13:00
pi	fed312a397	fix(test/endpoints): add pytest coverage for all Microdot routes	2026-03-26 00:39:41 +13:00
Jimmy	63235c7822	fix(ui): enforce save semantics for default and preset chunks	2026-03-22 02:53:34 +13:00
Jimmy	5badf17719	refactor(ui): simplify modal interactions and refresh fixtures	2026-03-22 02:00:28 +13:00
Jimmy	4597573ac5	fix(ui): update preset send/default behavior in edit mode	2026-03-22 01:47:32 +13:00
Jimmy	1550122ced	fix(ui): populate preset patterns when definitions are empty Made-with: Cursor	2026-03-22 00:08:12 +13:00
Jimmy	b7c45fd72c	docs(ui): switch user-facing spelling to colour Made-with: Cursor	2026-03-22 00:00:12 +13:00
Jimmy	9479d0d292	chore(cursor): add commit and spelling rules Made-with: Cursor	2026-03-21 23:54:33 +13:00
Jimmy	3698385af4	feat(ui): help sections, menu order, remove settings, send presets edit-only Made-with: Cursor	2026-03-21 23:51:02 +13:00
Jimmy	ef968ebe39	docs: run/edit mode, profiles behavior, send presets Made-with: Cursor	2026-03-21 23:51:00 +13:00
Jimmy	a5432db99a	feat(ui): gate profile create/clone/delete to edit mode Made-with: Cursor	2026-03-21 23:50:59 +13:00
Jimmy	764d918d5b	data: update local db fixtures and browser test expectations Made-with: Cursor	2026-03-21 23:15:55 +13:00
Jimmy	edadb40cb6	docs: rewrite API reference for current HTTP and driver flows Made-with: Cursor	2026-03-21 23:15:44 +13:00
Jimmy	9323719a85	feat(ui): add run/edit workflow and improve preset color editing Made-with: Cursor	2026-03-21 23:15:31 +13:00
Jimmy	91de705647	feat(profiles): seed new profiles and refresh tabs on apply Made-with: Cursor	2026-03-21 23:15:19 +13:00
Jimmy	3ee7b74152	fix(api): stabilize palette and preset endpoints Made-with: Cursor	2026-03-21 23:15:08 +13:00
Jimmy	98bbdcbb3d	chore: add dev watch command to Pipfile scripts Made-with: Cursor	2026-03-21 23:15:00 +13:00
Jimmy	a2abd3e833	data: refresh db JSON fixtures Made-with: Cursor	2026-03-21 20:17:33 +13:00
Jimmy	550217c443	ui: data-bwignore on AP password fields for password managers Made-with: Cursor	2026-03-21 20:17:33 +13:00
Jimmy	2d2032e8b9	esp32: log startup and UART receive for debugging Made-with: Cursor	2026-03-21 20:17:33 +13:00
Jimmy	81bf4dded5	docs: update msg.json example payload Made-with: Cursor	2026-03-21 20:17:33 +13:00
Jimmy	a75e27e3d2	feat: device model, API, static UI, and endpoint tests Made-with: Cursor	2026-03-21 20:17:33 +13:00
Jimmy	13538c39a6	tests: skip browser tests when no driver; try Firefox after Chrome Made-with: Cursor	2026-03-21 20:17:33 +13:00
Jimmy	7b724e9ce1	tests: point model tests at db/ and align palette assertions Made-with: Cursor	2026-03-21 20:17:33 +13:00
Jimmy	aaca5435e9	chore: gitignore local settings.json (session secret) Made-with: Cursor	2026-03-21 20:17:33 +13:00
Jimmy	b64dacc1c3	Stop ignoring esp32; drop esp32 rules from .gitignore Made-with: Cursor	2026-03-21 20:08:24 +13:00
Jimmy	8689bdb6ef	Restore esp32 MicroPython sources (main, benchmark_peers) Adjust .gitignore to ignore esp32/* except *.py so firmware .bin stays untracked. Made-with: Cursor	2026-03-21 19:59:52 +13:00
Jimmy	c178e87966	Ignore esp32 folder	2026-03-21 19:53:19 +13:00
Jimmy	dfe7ae50d2	Add led-tool and led-driver submodules	2026-03-21 19:52:59 +13:00
Jimmy	8e87559af6	Add led-tool and led-driver as submodules	2026-03-21 19:52:14 +13:00
Jimmy	aa3546e9ac	Remove obsolete scripts and root config files Drop clear-debug-log, install, run_web, send_empty_json, esp32 helpers, and root msg.json/settings.json in favor of current layout. Made-with: Cursor	2026-03-21 19:47:29 +13:00
Jimmy	b56af23cbf	Add scripts: start, copy ESP32 main, install boot service Made-with: Cursor	2026-03-15 23:43:27 +13:00
Jimmy	ac9fca8d4b	Pi port: serial transport, addressed ESP-NOW bridge, port 80 - Run app on Raspberry Pi: serial to ESP32 bridge at 912000 baud, /dev/ttyS0 - Remove ESP-NOW/MicroPython-only code from src (espnow, p2p, wifi, machine/Pin) - Transport: always send 6-byte MAC + payload; optional to/destination_mac in API and WebSocket - Settings and model DB use project paths (no root); fix sys.print_exception for CPython - Preset/settings controllers use get_current_sender(); template paths for cwd=src - Pipfile: run from src, PORT from env; scripts for port 80 (setcap) and test - ESP32 bridge: receive 6-byte addr + payload, LRU peer management (20 max), handle ESP_ERR_ESPNOW_EXIST - Add esp32/main.py, esp32/benchmark_peers.py, scripts/setup-port80.sh, scripts/test-port80.sh Made-with: Cursor	2026-03-15 17:16:07 +13:00
jimmy	0fdc11c0b0	ESP-NOW: STA interface, notify browser on send failure - Activate STA interface before ESP-NOW to fix ESP_ERR_ESPNOW_IF - Notify browser on send failure: WebSocket sends error JSON; preset API returns 503 - Use exceptions for failure (not return value) to avoid false errors when send succeeds - presets.js: handle server error messages in WebSocket onmessage Made-with: Cursor	2026-03-08 23:47:55 +13:00
jimmy	91bd78ab31	Add favicon route and minor cleanup - Add /favicon.ico route (204) to avoid browser 404 - CSS formatting tweaks - Pipfile trailing newline Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-20 11:49:11 +13:00
jimmy	2be0640622	Remove WiFi station (client) support - Drop station connect/status/credentials from wifi util and settings API - Remove station activation from main - Remove station UI and JS from index, settings template, and help.js - Device settings now only configure WiFi Access Point Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-20 11:49:04 +13:00
jimmy	0e96223bf6	Send tab defaults with presets. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-08 19:40:22 +13:00
jimmy	d8b33923d5	Fix heartbeat LED pin. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-08 19:40:14 +13:00
jimmy	4ce515be1c	Update Python dependencies for device tooling. This adds ampy support and refreshes lockfile versions. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-08 13:51:28 +13:00
jimmy	f88bf03939	Update browser tests for mobile preset layout. This keeps UI checks aligned with the new tab/preset flows. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-08 13:51:21 +13:00
jimmy	7cd4a91350	Add favicon handler and heartbeat LED blink. This keeps the UI console clean and makes device status visible. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-08 13:51:15 +13:00
jimmy	d907ca37ad	Refresh tabs/presets UI and add a mobile menu. This improves navigation and profile workflows on smaller screens. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-08 13:51:09 +13:00
jimmy	6c6ed22dbe	Scope presets to active profiles and support cloning. This keeps data isolated per profile while letting users duplicate setups quickly. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-02-08 13:51:02 +13:00
jimmy	00514f0525	Add in-app settings menu and fix settings API Move WiFi and device name configuration into a modal menu, reuse existing settings endpoints, and harden settings serialization and startup for MicroPython.	2026-01-29 00:54:20 +13:00
jimmy	cf1d831b5a	Align controller backend and data with new presets Update palettes, profiles, tabs, preset sending, and ESPNow message format to match the new preset defaults and driver short-field schema.	2026-01-29 00:04:23 +13:00
jimmy	fd37183400	Update frontend for presets, tabs, and help Align frontend with new preset ID usage and shortened driver fields, improve tab/preset interactions, and refine help and editor UI.	2026-01-28 23:27:50 +13:00
jimmy	5fdeb57b74	Extend endpoint and browser tests for ESPNow and UI Add coverage for /presets/send and updated tab/preset UI workflows in HTTP and Selenium tests.	2026-01-28 04:44:41 +13:00
jimmy	1576383d09	Update tab UI, presets interactions, and help Refine tab presets selection and editing, add per-tab removal, improve layout, and provide an in-app help modal.	2026-01-28 04:44:30 +13:00
jimmy	8503315bef	Add ESPNow preset send backend support Implement ESPNow helper model, WebSocket forwarding, and /presets/send endpoint that chunks and broadcasts presets to devices.	2026-01-28 04:43:45 +13:00
jimmy	928263fbd8	Remove Python cache files from version control - Remove __pycache__ directories that should not be tracked - These are now ignored via .gitignore	2026-01-27 13:05:22 +13:00
jimmy	7e33f7db6a	Add additional configuration and utility files - Add install script and message configuration - Add settings controller and templates - Add ESP-NOW message utility - Update API documentation	2026-01-27 13:05:09 +13:00
jimmy	e74ef6d64f	Update main application and dependencies - Update main.py and run_web.py for local development - Update microdot session handling - Update wifi utility	2026-01-27 13:05:07 +13:00
jimmy	3ed435824c	Add Selenium dependency for browser tests	2026-01-27 13:05:04 +13:00
jimmy	d7fabf58a4	Fix MicroPython compatibility issues in Model class - Fix JSONDecodeError handling (use ValueError for MicroPython) - Fix sys.print_exception argument issues - Improve error handling in load() method - Add proper file persistence with flush() and os.sync()	2026-01-27 13:05:02 +13:00
jimmy	a7e921805a	Update controllers to return JSON and fix parameter handling - Fix decorator parameter order issues with @with_session - Return JSON responses instead of HTML fragments - Add proper error handling with JSON error responses - Fix route parameter conflicts in delete and update endpoints	2026-01-27 13:05:01 +13:00
jimmy	c56739c5fa	Refactor UI to use JavaScript instead of HTMX - Replace HTMX with plain JavaScript for tab management - Consolidate tab UI into single button like profiles - Add cookie-based current tab storage (client-side) - Update profiles.js to work with new JSON response format	2026-01-27 13:05:00 +13:00
jimmy	fd52e40d17	Add endpoint tests and consolidate test directory - Add HTTP endpoint tests to mimic browser interactions - Move old test files from test/ to tests/ directory - Add comprehensive endpoint tests for tabs, profiles, presets, patterns - Add README documenting test structure and how to run tests	2026-01-27 13:04:56 +13:00
jimmy	f48c8789c7	Add browser automation tests for UI workflows - Add Selenium-based browser tests for tabs, profiles, presets, and color palette - Test drag and drop functionality for presets in tabs - Include cleanup functionality to remove test data after tests - Tests run against device at 192.168.4.1	2026-01-27 13:04:54 +13:00
jimmy	80ff216e54	Update preset format with n7/n8 parameters - Add n7 and n8 fields to preset definitions - Update preset data format	2026-01-17 21:40:38 +13:00
jimmy	1fb3dee942	Update tab storage to 2D grid format - Change presets from flat array to 2D grid layout - Add presets_flat array for backward compatibility - Support 3-column grid layout for preset positioning	2026-01-17 21:40:37 +13:00
jimmy	a4502055fb	Add test utilities and scripts - Add test directory with main.py, p2p.py, ws.py - Add send_empty_json.py WebSocket test script	2026-01-17 21:40:11 +13:00
jimmy	6e61ec8de6	Add P2P communication module - Implement ESP-NOW async communication - Support sending string, dict, or bytes data - Use asend for async broadcast messaging	2026-01-17 21:40:10 +13:00
jimmy	48d02f0e70	Update watch script path in Pipfile - Fix watch script to use relative paths	2026-01-17 21:40:08 +13:00
jimmy	cacaa3505e	Add pattern definitions endpoint - Add /definitions endpoint to pattern controller - Load pattern.json with fallback paths for local dev and MicroPython	2026-01-17 21:40:07 +13:00
jimmy	97ffc69b12	Add drag-and-drop for presets and colors, max_colors validation, and 2D grid layout - Add drag-and-drop to reorder presets in tabs (2D grid layout) - Add drag-and-drop to reorder colors within presets - Add max_colors field to pattern definitions - Hide color section when max_colors is 0 - Validate color count against pattern max_colors limit - Store presets in 2D grid format (3 columns) - Remove left panel from tab content, show only presets - Update color palette to show swatches instead of hex codes - Improve preset editor UI with visual color swatches	2026-01-17 00:58:50 +13:00
Jimmy	9f37dbbff0	Add data files and local tooling	2026-01-16 22:31:47 +13:00
Jimmy	df37f15f73	Update UI for palettes, presets, and patterns	2026-01-16 22:31:36 +13:00
Jimmy	9c43a0a22b	Update backend models, controllers, and session	2026-01-16 22:31:24 +13:00
Jimmy	d41faddfca	Update static files and templates - Add htmx library - Update main.js and styles.css - Update index.html template	2026-01-11 21:34:19 +13:00
Jimmy	9e2409430c	Add documentation and utility modules - Add API specification documentation - Add system specification document - Add UI mockups and documentation - Add utility modules (wifi)	2026-01-11 21:34:18 +13:00
Jimmy	5f6e45af09	Clean up obsolete files - Remove old web.py, wifi.py, patterns.py - Remove old static files from root - Remove unused component files	2026-01-11 21:34:17 +13:00
Jimmy	cccda24448	Add comprehensive model tests - Add tests for all model CRUD operations - Add test for base Model class - Add test runner for all model tests - Tests include cleanup and validation	2026-01-11 21:34:17 +13:00
Jimmy	5cca60d830	Update main.py with controllers and static route - Mount model controllers as subroutes - Add static file serving route - Integrate controllers into main application	2026-01-11 21:34:16 +13:00
Jimmy	ac750a36e7	Add controllers for models - Add REST API controllers for all models - Controllers use Microdot subroutes - Support CRUD operations via HTTP endpoints - Controllers: preset, profile, group, sequence, tab, palette	2026-01-11 21:34:15 +13:00
Jimmy	01f373f0bd	Add model base class and models - Add Model base class with get_next_id() method - Add Preset model with CRUD operations - Add Profile model with tabs and palette support - Add Group model for device grouping - Add Sequence model for preset sequencing - Add Tab model for organizing device controls - Add Palette model for color collections	2026-01-11 21:34:14 +13:00
Jimmy	d00d21e2b6	Split up main.js	2025-07-08 18:24:54 +12:00
				`@@ -0,0 +1 @@`
				`{"1": {"name": "Main Group", "devices": ["1", "2", "3"]}, "2": {"name": "Accent Group", "devices": ["4", "5"]}}`
				`@@ -0,0 +1 @@`
				`{"1": ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF", "#FFFFFF", "#000000"], "2": [], "3": [], "4": [], "5": [], "6": [], "7": ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF", "#FFFFFF", "#000000"], "8": [], "9": [], "10": [], "11": [], "12": ["#890b0b", "#0b8935"]}`
				`@@ -0,0 +1 @@`
				{"1": {"name": "on", "pattern": "on", "colors": ["#FFFFFF"], "brightness": 255, "delay": 100, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "2": {"name": "off", "pattern": "off", "colors": [], "brightness": 0, "delay": 100, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "3": {"name": "rainbow", "pattern": "rainbow", "colors": [], "brightness": 255, "delay": 100, "auto": true, "n1": 2, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "4": {"name": "transition", "pattern": "transition", "colors": ["#FF0000", "#00FF00", "#0000FF", "#FFFFFF", "#0000FF", "#FFFF00"], "brightness": 255, "delay": 5000, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1", "palette_refs": [null, null, null, 6, 2, 3]}, "5": {"name": "chase", "pattern": "chase", "colors": ["#FF0000", "#0000FF"], "brightness": 255, "delay": 200, "auto": true, "n1": 5, "n2": 5, "n3": 1, "n4": 1, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "6": {"name": "pulse", "pattern": "pulse", "colors": ["#00FF00"], "brightness": 255, "delay": 500, "auto": true, "n1": 1000, "n2": 500, "n3": 1000, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "7": {"name": "circle", "pattern": "circle", "colors": ["#FFA500", "#800080"], "brightness": 255, "delay": 200, "auto": true, "n1": 2, "n2": 10, "n3": 2, "n4": 5, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "8": {"name": "blink", "pattern": "blink", "colors": ["#FF0000", "#00FF00", "#0000FF", "#FFFF00"], "brightness": 255, "delay": 1000, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "9": {"name": "warm white", "pattern": "on", "colors": ["#FFF5E6"], "brightness": 200, "delay": 100, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "10": {"name": "cool white", "pattern": "on", "colors": ["#E6F2FF"], "brightness": 200, "delay": 100, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "11": {"name": "red", "pattern": "on", "colors": ["#FF0000"], "brightness": 255, "delay": 100, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "12": {"name": "blue", "pattern": "on", "colors": ["#0000FF"], "brightness": 255, "delay": 100, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "13": {"name": "rainbow slow", "pattern": "rainbow", "colors": [], "brightness": 255, "delay": 150, "auto": true, "n1": 1, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "14": {"name": "pulse slow", "pattern": "pulse", "colors": ["#FF6600"], "brightness": 255, "delay": 800, "auto": true, "n1": 2000, "n2": 1000, "n3": 2000, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "15": {"name": "blink red green", "pattern": "blink", "colors": ["#FF0000", "#00FF00"], "brightness": 255, "delay": 500, "auto": true, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1"}, "30": {"name": "rainbow slow", "pattern": "rainbow", "colors": [], "brightness": 255, "delay": 150, "auto": true, "n1": 1, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "31": {"name": "DJ Rainbow", "pattern": "rainbow", "colors": [], "brightness": 220, "delay": 60, "n1": 12, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "32": {"name": "DJ Single Color", "pattern": "on", "colors": ["#ff00ff"], "brightness": 220, "delay": 100, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "33": {"name": "DJ Transition", "pattern": "transition", "colors": ["#ff0000", "#00ff00", "#0000ff"], "brightness": 220, "delay": 250, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "34": {"name": "DJ Rainbow", "pattern": "rainbow", "colors": [], "brightness": 220, "delay": 60, "n1": 12, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "35": {"name": "DJ Single Color", "pattern": "on", "colors": ["#ff00ff"], "brightness": 220, "delay": 100, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "36": {"name": "DJ Transition", "pattern": "transition", "colors": ["#ff0000", "#00ff00", "#0000ff"], "brightness": 220, "delay": 250, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "2"}, "37": {"name": "tranistion2", "pattern": "transition", "colors": ["#FF0000", "#FFFF00", "#FF00FF"], "brightness": 128, "delay": 1000, "n1": 0, "n2": 0, "n3": 0, "n4": 0, "n5": 0, "n6": 0, "n7": 0, "n8": 0, "profile_id": "1", "palette_refs": [0, 3, 4]}}
				`@@ -0,0 +1 @@`
				`{"1": {"name": "default", "type": "tabs", "tabs": ["1", "8"], "scenes": [], "palette_id": "1"}, "2": {"name": "test", "type": "tabs", "tabs": ["6", "7"], "scenes": [], "palette_id": "12"}}`
				`@@ -0,0 +1 @@`
				`{"1": {"group_name": "Main Group", "presets": ["1", "2"], "sequence_duration": 3000, "sequence_transition": 500, "sequence_loop": true, "sequence_repeat_count": 0, "sequence_active": false, "sequence_index": 0, "sequence_start_time": 0}, "2": {"group_name": "Accent Group", "presets": ["2", "3"], "sequence_duration": 2000, "sequence_transition": 300, "sequence_loop": true, "sequence_repeat_count": 0, "sequence_active": false, "sequence_index": 0, "sequence_start_time": 0}}`
				`@@ -0,0 +1 @@`
				{"1": {"name": "default", "names": ["1", "2", "3", "4", "5", "6", "7", "8", "0", "a"], "presets": [["4", "2", "7"], ["15", "3", "14"], ["5", "8", "10"], ["11", "9", "12"], ["1", "13", "37"]], "presets_flat": ["4", "2", "7", "15", "3", "14", "5", "8", "10", "11", "9", "12", "1", "13", "37"], "default_preset": "15"}, "2": {"name": "default", "names": ["1", "2", "3", "4", "5", "6", "7", "8", "0", "a"], "presets": [["16", "17", "18"], ["19", "20", "21"], ["22", "23", "24"], ["25", "26", "27"], ["28", "29", "30"]], "presets_flat": ["16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"]}, "3": {"name": "default", "names": ["1"], "presets": [], "default_preset": null}, "4": {"name": "default", "names": ["1"], "presets": [], "default_preset": null}, "5": {"name": "dj", "names": ["dj"], "presets": [["31", "32", "33"]], "default_preset": "31", "presets_flat": ["31", "32", "33"]}, "6": {"name": "default", "names": ["1"], "presets": [], "default_preset": null}, "7": {"name": "dj", "names": ["dj"], "presets": [["34", "35", "36"]], "default_preset": "34", "presets_flat": ["34", "35", "36"]}, "8": {"name": "test", "names": ["11"], "presets": [["1", "2", "3"], ["4", "5"]], "default_preset": "1", "presets_flat": ["1", "2", "3", "4", "5"]}}