feat(PP-3449): configurable dev panel position, hide and auto-hide modes

[sergak01]

🚀 Feature: Configurable dev panel — corner position, full hide, auto-hide

Summary

The dev panel was hardcoded to the bottom-right corner with a single minimize control. This PR makes it fully configurable: it can be anchored to any of the four screen corners, completely hidden, or put into an auto-hide mode where it slides behind the screen edge leaving a thin 4px strip and reveals itself on hover. Position and modes can be set as defaults in pp-dev.config and changed at runtime from the panel itself — via a new settings popover (gear icon) or by dragging the panel to a corner. Runtime choices persist in localStorage and take precedence over config. Bonus: the panel label "Portal page ID:" is renamed to "App ID:".

Key changes

• 🚀 devPanel config group — { position, hidden, autoHide } with validation (position must be one of the four corners) and normalization defaults (bottom-right/false/false); threaded through both injection paths (Vite clientInjectionPlugin and pp-dev next injectDevPanel) as a server-rendered corner class + data-* attributes on the panel root. New DevPanelConfig/DevPanelPosition public types; devPanel added to the config deep-merge groups.
• 🚀 Corner-aware SCSS — a corner map + @each loop generates the four variants: placement, mirrored border-radius/shadow/hairline, direction-aware minimize slide (left corners slide left, arrow inverted, wrap-btn reordered to the exposed edge), auto-hide transform behind the nearest vertical edge with an accent strip and an extended invisible hover zone; settings popover styles; left-anchored popup variant; prefers-reduced-motion support.
• 🚀 Runtime controls (new client modules storage.ts, panel-state.ts, panel-position.ts, panel-settings.ts):
  • State precedence: localStorage → config (data-*) → default; invalid stored values ignored.
  • ?pp-dev-panel=show|hide URL param writes a persistent override — restores a hidden panel.
  • Drag & snap: pointer-capture drag by a grip handle (works over iframes), snaps to the nearest corner on release, Escape cancels.
  • Auto-hide: 300 ms hover reveal / 500 ms leave grace; keyboard focus keeps the panel revealed; the minimize button acts as "pin" (disables auto-hide) in this mode; auto-hide and minimize are mutually exclusive.
  • Settings popover: 2×2 corner picker, auto-hide toggle, Hide button with restore hint, "Reset to config defaults".
• 🔧 Popups are now corner-aware — they anchor to the panel's horizontal side and stack from the vertically opposite edge; the inline-style bottom-pinning hack in updatePopupPositions (which would have fought top corners) is removed.
• 🔧 Panel init moved outside the hot-context guard — placement/visibility no longer depend on the WebSocket transport.
• 🧪 +24 tests (212 unit total): normalize/validate coverage, EJS default-rendering guard for both template compiles (pins the with(locals) ReferenceError regression), jsdom specs for state precedence/URL param/controller behavior, nearestCorner quadrant math.
• 📊 README: new devPanel section, localStorage keys, URL params, origin-scoped storage caveat.

Testing

• ✅ Unit 212/212 (incl. 24 new), integration 39/39, eslint clean, Sass compiles without deprecation warnings (map-get → sass:map)
• ✅ Headless-Chromium e2e against the live test-commonjs fixture (Vite path): config top-left + autoHide renders correctly; hover reveals / re-hides; wrap-btn pins; corner picker moves the panel to bottom-right and persists; drag & snap works with user-select disabled and inline styles cleaned; Hide → display:none; ?pp-dev-panel=show restores persistently
• ✅ pp-dev next (test-nextjs fixture): injected markup verified (corner class, data attrs, drag handle, settings button, "App ID:")

Compatibility

• No config → behavior identical to today (bottom-right, visible, minimize as before). No breaking changes.
• Note: localStorage is origin-scoped, and an MI page that clears origin storage on cache-version change will also reset panel overrides to config defaults (documented in README).

Included commits:

• 315d6fc feat(PP-3449): configurable dev panel position, hide and auto-hide modes
• 7116d78 chore(PP-3449): bump version to 1.0.0-beta.1 — manual seed for the 1.0 line (semantic-release did not advance past 0.20.0-beta.x) + fixture lockfiles

---

Merge Request: origin/pp-3449-dev-panel-position → origin/develop

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a168e1c9-d91a-4458-a109-8ee1e8c88a23

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch pp-3449-dev-panel-position

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}