[Soulhackzlol]

Users said that when editing an alert or an overlay you couldn't select and move several elements at once, and that the editor felt buggy. This rebuilds the editor's interaction layer and moves it into its own file, web/studio.js. The overlay format is unchanged, so existing overlays and designs open as before. No version bump; this ships as a build update.

What changes for streamers

Several layers at once

• Pick them with Shift or Ctrl click, a band dragged on empty canvas, or Ctrl+A.
• Drag, nudge, copy, paste, duplicate and delete them together.
• Line them up (edges, centres) or spread them with even gaps.
• With several picked, the settings panel sets colour, opacity and font on all of them.

Placing

• Eight resize handles keep the opposite side, whatever the layer is anchored to. Bottom-anchored alert layers used to grow away from the pointer.
• Handles always draw above other layers. A font-sized layer's corner follows the pointer.
• Moves snap to the canvas, the safe area and other layers; Alt turns it off and Shift keeps a drag straight.

Zoom and pan

• Ctrl+scroll zooms at the pointer; Ctrl+=, Ctrl+- and Ctrl+0 work too, as does a "− % +" control in the canvas corner.
• Space+drag, a middle-button drag, or scrolling once zoomed pans the view.

Layers

• Lock a layer so the canvas picks what is under it, such as a card's backdrop.
• Restack by dragging rows, or with Ctrl+↑/↓ (Shift: all the way).
• A right-click menu on the canvas and in Layers.
• Hovering a row outlines its layer on the canvas, and the other way round.
• Double-click a layer to type its words.
• Press ? for a shortcuts card. It's also in the ⋯ menu and the footer.

Fixes

• Moving or resizing no longer reloads the preview, replays every animation, or jumps back and glides.
• Selection boxes follow the canvas when it lays itself out again (a font arriving, the sample alert's words).
• Undo right after an edit takes that edit back.
• Half-typed numbers and colours wait instead of moving or repainting the layer.
• Renaming the overlay counts as an unsaved change and can be undone.
• Esc steps back one thing at a time instead of closing the Studio.
• Changing a layer's anchor keeps it in place.
• Ctrl+A skips layers hidden in the state being edited.
• Ctrl+C with text selected copies the text.
• Layers pasted from another overlay take on that overlay's rules.
• A third sample alert, with a long name and message, checks that text still fits.

Code

• The Studio moves out of index.html into web/studio.js, served gzipped like integrations.js (build.rs, src/web.rs). index.html loses about 1,550 lines.
• Placement maths (moves, resizes, snapping, lining up, restacking) is pure code in StudioGeometry, covered by web/tests/studio.test.mjs.
• Controls name an action (data-st) instead of building onclick strings, and only actions in ACTIONS can run. A test checks that every name exists.
• Dragging uses pointer events with capture and a 3 px threshold, so leaving the window can't break a drag.
• scripts/e2e.sh: scenarios E and F no longer crash on an unset $ff when an earlier step failed.

Testing

• node scripts/check.mjs: format, lint, 940 Rust tests and 95 page tests pass.
• Driven in an isolated test copy with real mouse and keys. Checked: single and group drag, resize on every anchor, the font corner, band select, line-up, lock, Shift-drag, instant undo, zoom and pan, row drag, Ctrl+↑/↓, the right-click menu, the shortcuts card, copy and paste across overlay types, and half-typed fields. No page errors.
• Gallery regression sweep: all actions, Edit in Studio, the Add tab and the menu still work.