add a ton of e2e tests for design, ux improvements and fixes

[sidmohanty11]

What this PR fixes

Silent data loss

• Dragging an element within its own screen no longer re-routes the drop to the board and discards it
• Reordering a layer by drag persists instead of being silently dropped (moveNode was losing the stable source id)
• Breakpoint edits on a document with no apply instead of failing with a bare 500 and throwing the edit away

Actions that did nothing

• Shift+Arrow nudges 10px on the first press instead of expanding the row
• Tab / Shift+Tab traverse siblings from a selected layer
• Enter drills into a child instead of re-selecting the row it's already on
• Shift+A and alignment apply to a layer selection in overview instead of being ignored — and still work for screens selected in the Layers panel
• Shift+A on an empty frame converts it in place instead of wrapping it in a spurious Group

Wrong output

• Shapes drawn in overview land where you drew them (were ~4× oversized and misplaced from trusting metadata over live iframe size)
• Text drawn on a dark screen — or inside a dark frame on a light page — gets a legible fill instead of invisible currentColor
• Enabling auto layout reflows absolutely-positioned children instead of leaving them stacked on one spot
• Content drawn inside a frame nests into it; rectangles never adopt children, on both the draw and drag paths
• SVG primitives (path, line, arrow, polygon, star) nest like every other primitive
• Nested frames resolve against document coordinates, so drawing into a frame-inside-a-frame targets the right one
• The inspector shows real measured X/Y/W/H instead of 0, scoped to the owning screen so identical markup elsewhere can't supply the wrong values
• A multi-selection shows one combined bounding box, and it re-computes when selection changes from the Layers panel
• Constraints are hidden for auto-layout children except absolutely-positioned descendants, which stay anchorable

Screen sizing

• A screen keeps the height you drew or dragged instead of snapping to the device floor (was Math.max, so height could only grow)
• No flicker on create — the pin applies synchronously rather than after a server round-trip
• The board canvas follows the light/dark theme in both the live iframe and its static preview, instead of a hardcoded near-black

New

• Frame tool dropdown with explicit, sticky Screen and Frame modes, so one tool no longer means two things depending on where you start the drag
• Dev-only interaction trace (__designTrace.dump()) across tool, draw, selection, drag, drop resolution, persistence, structure and history

Testing

• Deterministic E2E setup: direct auth/register/auth/login instead of driving the sign-in UI, and an overridable E2E_DATABASE_URL
• ~100 new browser tests plus unit regressions for drawing fidelity, breakpoints, keyboard behaviour, nesting, geometry and tool modes

https://clips.agent-native.com/r/eJO62la0Q1VC

[github-actions]

Here's a visual recap of what changed:

Open the full interactive recap

[builder-io-integration]

Builder reviewed your changes and found 5 potential issues 🟡

Review Details

Code Review Summary

This large incremental update adds broad Playwright coverage for the Design editor and adjusts canvas insertion, selection chrome, auto-layout, breakpoint handling, drag/drop persistence, and inspector geometry. The overall direction is sound: the tests encode useful direct-manipulation invariants, frame-vs-rectangle semantics are made explicit, and the new tracing/debug hooks are bounded and disabled outside development. I also verified the design dev server is running cleanly for browser verification.

Risk: Standard (shared editor behavior and stateful UI logic, with no auth/payment/schema changes).

Key findings

• 🔴 Functional: nested frame insertion uses local offsets as document coordinates, so nested primitives can be adopted by the wrong frame or rendered at the wrong position.
• 🟡 Medium: SVG primitives bypass the new frame-host insertion path.
• 🟡 Medium: inspector fallback can measure a matching node from the wrong screen iframe.
• 🟡 Medium: constraints are hidden for absolutely positioned children of flex parents.
• 🟡 Medium: host-driven layer selection does not reposition the combined multi-selection bounds overlay.

🧪 Browser testing: Will run after this review (PR touches UI code)

[builder-io-integration]

Builder reviewed your changes and found 2 potential issues 🟡

Review Details

Incremental Code Review Summary

The latest PR head retains the five previously reported issues, so those existing review threads were intentionally not reposted or resolved. The current diff also retains the same broad Design editor changes and extensive E2E additions; no evidence was found that the earlier issues were fixed.

Two new E2E reliability problems are present:

• 🟡 The smart-selection test asserts selectors that are not implemented anywhere in the application, so it deterministically fails instead of validating behavior.
• 🟡 The board-frame drag test uses the empty-board Frame gesture even though the preceding test and current implementation define that gesture as creating a new screen, causing its precondition to fail.

The underlying editor changes remain directionally sound, and focused pure-module tests reported by a reviewer passed. Risk: Standard.

🧪 Browser testing: Will run after this review (PR touches UI code)

[builder-io-integration]

Builder reviewed your changes and found 5 potential issues 🔴

Review Details

Incremental Code Review Summary

The latest head adds an explicit Screen/Frame mode to the Frame tool and threads that state through the editor, alongside further Design editor behavior changes. The seven existing review comments remain unresolved and were intentionally not reposted or resolved; the current diff still contains those same issues.

New regressions found:

• 🔴 High: the Frame tool's F shortcut now selects Screen mode, silently changing established behavior from drawing plain frames to creating screens.
• 🔴 High: the canvas draft callback omits frameToolDraws from its dependencies, so selecting Frame can still create a screen on an empty board.
• 🔴 High: screen IDs selected from Layers are misclassified as element selections, breaking screen alignment.
• 🔴 High: the same misclassification makes Shift+A no-op for screens selected from Layers.
• 🟡 Medium: text color is derived from body before the containing frame is resolved, making text inserted into dark frames on light pages invisible.

Risk: Standard (shared editor interaction and state logic). Focused reviewers reported Playwright discovery and pure-module checks, while full typecheck was unavailable because the environment lacks the required production database configuration.

🧪 Browser testing: Will run after this review (PR touches UI code)

[builder-io-integration]

Builder reviewed your changes and found 1 potential issue 🔴

Review Details

Incremental Code Review Summary

The latest update adds frame-tool mode handling and additional Design editor integration changes. The previously reported seven issues remain unresolved and were not reposted or resolved: nested-frame coordinate handling, SVG frame nesting, cross-screen geometry lookup, flex absolute-child constraints, stale host-driven selection bounds, the unsupported smart-selection test, and the contradictory board-frame fixture.

New finding

• 🔴 High: beginDraftCreation reads frameToolDraws but omits it from the useCallback dependency array. After switching the Frame tool from Screen to Frame mode, the callback can retain the old value and continue creating screens on an empty canvas, ignoring the user's mode choice.

The rest of the incremental changes did not produce additional confirmed issues. Risk: Standard.

🧪 Browser testing: Will run after this review (PR touches UI code)