[jazzstack]

Summary

Two related changes landed on the fork's dev branch:

1. Dedicated Lighting tab — a new lighting workspace tab (#lighting-settings) with its own lighting card that uses the new in-app colour picker. The original lighting card under Advanced is kept exactly as it was, so both tabs render the device lighting independently.
2. In-app colour picker — replaces the native <input type="color"> with an in-app SV panel + hue bar picker (canvas-drawn picker, draggable thumb, live hex field and swatch) in the new Lighting tab. Colours are staged through the existing pending-change flow and applied on write, so the panel no longer closes mid-drag.
3. Razer Viper Mini art — maps product id 1532:008a to top-down product artwork in the persistent device panel.

Details

Lighting tab

• Adds #lighting-settings as a new workspace host and the lighting tab to the workspace tab order/content.
• The new tab contains a separate #lighting-tab-card (ids prefixed #lighting-tab-*), so it does not collide with the original card.
• The original #lighting-card stays under the Advanced tab unchanged — same markup (native colour inputs, RECEIVER label), same CSS, same event bindings, and it remains in the advanced tab content list.
• renderLighting now renders into both cards via a shared renderLightingCard(prefix) helper; renderStagedMarkers and the delegated control handlers cover both cards, and only the card in the active tab is visible.

Colour picker

• New src/ui/color-picker.ts: initColorPickers() binds pointer events, syncColorPickers() mirrors the hidden #lighting-tab-color / #lighting-tab-color2 inputs into the picker UI after every re-render.
• The picker draws its own SV and hue canvases (220×150 / 220×14), persists hsl/cache on the element, and uses setPointerCapture for smooth drags. Releasing the pointer commits the chosen value via the hidden input's change event, exactly like the native control.
• Bug fix: staging a colour now previews the full staged lighting state instead of only the partial patch. Previously a colour change replaced the staged {mode} patch under the shared lighting key, so withPendingChanges reverted mode to the device's cached null on re-render — which hid the colour row and closed the picker the moment you released the cursor.

Razer Viper Mini art

• Adds public/devices/razer-viper-mini.webp (1024×1024) and maps 1532:008a in src/ui/device-images.ts.
• public/devices/README.md notes that WebP is accepted and records the artwork's Discord source for licensing review.

Testing

• npm run build passes (tsc + vite).
• npm run size passes (JS budget raised to 429 kB for the second lighting card).
• npm test passes (32 tests).

Commits

• c96cb85 lighting: add custom colour picker in its own tab
• 3546112 razer: show viper mini device art
• 35c2ec7 build: raise bundle budget for the colour picker
• 8c0a5b8 lighting: keep the advanced-tab card and add a separate tab

[jazzstack]

Video.Project.15.1.mp4