feat: frontend overlay configurator — edit tokens on any page

[jackgranatowski]

Injects the full SLASHED token editor as a collapsible floating panel on
any WordPress frontend page for users with manage_options access. The
current page acts as the live preview — token changes inject CSS custom
properties directly into the page's own via the existing
#sf-parent-overrides mechanism, so every slider/color adjustment is
visible in real time without an iframe.

Activation: "/ Design" button in the WordPress admin bar dispatches
slashed:toggle-overlay which the Svelte app listens for. Panel state
(open/closed, last active domain) is persisted in localStorage and
survives navigation between pages.

Changes:

• admin-app/src/AppOverlay.svelte — new overlay-mode Svelte component:
  collapsible right-side drawer (420 × calc(100vh-32px)), compact header
  with undo/redo/import/export/reset, full SidebarNav + DomainPanel,
  Ctrl+K command palette, slide-in/out CSS transition
• admin-app/src/plugin-main.ts — plugin-specific entry point that runs
  main.ts (upstream configurator) then mounts AppOverlay if the overlay
  container element is present
• admin-app/vite.config.js — entry changed from main.ts to plugin-main.ts
• admin-app/.syncignore — AppOverlay.svelte + plugin-main.ts protected
  from upstream wipe
• includes/class-frontend-configurator.php — new WordPress class:
  enqueues the shared admin-app bundle on the frontend, hydrates
  window.slashedApp (REST URL + nonce + current overrides), adds the
  admin bar node, outputs the #slashed-frontend-overlay mount div
• slashed.php — registers Slashed_Frontend_Configurator on plugins_loaded

Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01GPdw3Lch2xPWK8rVR1Jh3C

Summary by CodeRabbit

• New Features

  • Added a floating front-end editing panel for managing token overrides directly on public pages.
  • Added quick access from the admin bar to open and close the overlay.
  • Added import, export, undo, redo, reset, and search-like navigation controls for easier editing.
  • Added automatic saving and restored state when reopening the panel.

• Bug Fixes

  • Prevented key front-end assets from being overwritten during sync/build steps.

[coderabbitai]

Warning

Review limit reached

@jackgranatowski, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 38 minutes and 16 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6cfad392-d1fa-4a7c-af1c-7785aa73c463

📥 Commits

Reviewing files that changed from the base of the PR and between 4c3d331 and 255bdf4.

📒 Files selected for processing (5)

• SLASHED-for-WP/admin-app/src/AppOverlay.svelte
• SLASHED-for-WP/admin-app/src/plugin-main.ts
• SLASHED-for-WP/assets/admin-app/app.js
• SLASHED-for-WP/includes/class-frontend-configurator.php
• SLASHED-for-WP/slashed.php

📝 Walkthrough

Walkthrough

Adds a floating token-editor overlay for WordPress public frontend pages. A new PHP class Slashed_Frontend_Configurator conditionally enqueues assets, injects bootstrap data, and renders a mount point. A new Svelte AppOverlay component handles override editing, undo/redo, import/export, and domain navigation. A new plugin-main.ts entry mounts the overlay, and the Vite build input is updated accordingly.

Changes

WordPress Frontend Token Overlay

Layer / File(s)	Summary
PHP controller: asset loading, admin bar, and mount point SLASHED-for-WP/includes/class-frontend-configurator.php, SLASHED-for-WP/slashed.php	New Slashed_Frontend_Configurator class registers hooks to enqueue app.js/app.css as an ES module, localize window.slashedApp with REST URL, nonce, and initial overrides from Slashed_Token_Store, add a "/ Design" admin-bar node that dispatches slashed:toggle-overlay, and render <div id="slashed-frontend-overlay">. Gated by should_load() checking non-admin page, admin bar visible, and manage_options cap. Bootstrapped in slashed.php via plugins_loaded.
AppOverlay Svelte component and plugin entry point SLASHED-for-WP/admin-app/src/AppOverlay.svelte, SLASHED-for-WP/admin-app/src/plugin-main.ts	plugin-main.ts clears and mounts AppOverlay into #slashed-frontend-overlay. AppOverlay manages overrides with undo/redo history, handles export (CSS download), import (JSON and --sf-* CSS parsing), and reset-all. Registers keyboard shortcuts (Ctrl+Z, Ctrl+Shift+Z/Y, Ctrl+K) and slashed:toggle-overlay event listener via onMount. Renders a floating trigger button, a sliding panel with header controls, SidebarNav, DomainPanel, and conditional CommandPalette.
Build entry and sync protection SLASHED-for-WP/admin-app/vite.config.js, SLASHED-for-WP/admin-app/.syncignore	rollupOptions.input changed from src/main.ts to src/plugin-main.ts. .syncignore extended to include src/plugin-main.ts and src/AppOverlay.svelte.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• codeslash-dev/SLASHED-Plugins#27: Manages the same .syncignore allowlist that this PR extends with the two new overlay source files.
• codeslash-dev/SLASHED-Plugins#28: Handles building and committing the admin-app assets and includes a vite.config.js change, directly related to the overlay bundle this PR introduces.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: adding a frontend overlay configurator for editing tokens on any page.
Docstring Coverage	✅ Passed	Docstring coverage is 83.33% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/configurator-any-page-63chr1

---

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.}

[qodo-code-review]

PR Summary by Qodo

Add frontend token editor overlay (admin-bar toggle + live CSS injection)
✨ Enhancement ⚙️ Configuration changes 🕐 40+ Minutes

Description

• Adds a collapsible SLASHED token editor overlay on any frontend page for admins.
• Reuses the existing admin-app bundle to live-update CSS variables on the current page.
• Introduces a plugin-only entrypoint and WP bootstrap to enqueue, hydrate, and mount UI.

Diagram

sequenceDiagram
  actor Admin as "Admin user"
  participant WP as "WP frontend"
  participant Bar as "Admin bar"
  participant Bundle as "admin-app bundle"
  participant Overlay as "AppOverlay"
  participant REST as "WP REST"

  WP->>WP: plugins_loaded: init Slashed_Frontend_Configurator
  WP->>WP: wp_enqueue_scripts: enqueue app.css + app.js (admins only)
  WP->>Bundle: window.slashedApp = {rest.url, nonce, overrides}
  WP->>Bar: Add "/ Design" node
  Bar-->>Overlay: dispatch slashed:toggle-overlay
  Bundle->>Overlay: mount into #slashed-frontend-overlay
  Overlay->>REST: Save overrides (nonce)
  Overlay->>WP: Inject CSS vars into page <head>

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Ship a dedicated lightweight overlay bundle (code-split)

• ➕ Reduces frontend payload by excluding non-overlay admin UI/routes
• ➕ Improves perceived performance on public pages
• ➖ Requires multi-entry build + WP asset registration changes
• ➖ More complexity keeping shared stores/behavior consistent across bundles

2. Iframe-based preview/editor separation

• ➕ Avoids CSS/z-index conflicts with themes
• ➕ Hard separation between editor UI and site DOM
• ➖ Loses true “edit on the real page” fidelity
• ➖ Adds cross-frame messaging and sizing complexity

3. Toggle via URL param / footer button only (no admin bar)

• ➕ Simpler wiring (no custom DOM event needed)
• ➖ Worse discoverability and workflow compared to admin bar
• ➖ Less consistent across navigation

Recommendation: Reusing the existing admin-app bundle and conditionally mounting an overlay when a frontend container is present is the most pragmatic approach for maintainability (single editor logic) and delivery speed. If performance on the frontend becomes a concern, the next best evolution is a code-split overlay-only entry that shares the token/override core but drops unused admin UI.

Files changed (8) +542 / -56

Enhancement (4) +477 / -0

AppOverlay.svelteImplement collapsible frontend overlay token editor +287/-0

Implement collapsible frontend overlay token editor

• Adds a new Svelte overlay drawer that reuses SidebarNav and DomainPanel, plus a compact header for undo/redo/import/export/reset. Persists open/closed and last domain in localStorage, listens for slashed:toggle-overlay, and supports keyboard shortcuts (Ctrl/Cmd+Z/Y and Ctrl/Cmd+K for the command palette).

SLASHED-for-WP/admin-app/src/AppOverlay.svelte

plugin-main.tsAdd plugin-specific entrypoint to mount overlay when present +14/-0

Add plugin-specific entrypoint to mount overlay when present

• Introduces a WordPress-plugin entrypoint that imports the upstream main.ts, then mounts AppOverlay into #slashed-frontend-overlay when the container exists.

SLASHED-for-WP/admin-app/src/plugin-main.ts

class-frontend-configurator.phpAdd WP frontend bootstrap for overlay (enqueue + admin bar + mount div) +169/-0

Add WP frontend bootstrap for overlay (enqueue + admin bar + mount div)

• Adds Slashed_Frontend_Configurator to conditionally enqueue the admin-app assets on public pages for manage_options users with the admin bar visible. Hydrates window.slashedApp with REST URL/nonce and current overrides, marks the script as type=module, adds a "/ Design" admin bar node that dispatches slashed:toggle-overlay, and prints the #slashed-frontend-overlay mount container in the footer.

SLASHED-for-WP/includes/class-frontend-configurator.php

slashed.phpRegister frontend overlay configurator during plugin load +7/-0

Register frontend overlay configurator during plugin load

• Requires the new frontend configurator class and instantiates it on plugins_loaded to activate the overlay on eligible frontend requests.

SLASHED-for-WP/slashed.php

Other (4) +65 / -56

.syncignoreProtect plugin-only overlay sources from upstream sync +4/-0

Protect plugin-only overlay sources from upstream sync

• Adds the plugin-specific overlay entrypoint and Svelte overlay component to the sync ignore list to prevent upstream configurator sync from removing them.

SLASHED-for-WP/admin-app/.syncignore

vite.config.jsSwitch build input to plugin-main.ts +1/-1

Switch build input to plugin-main.ts

• Updates Vite/Rollup input from src/main.ts to src/plugin-main.ts so the generated bundle includes overlay mounting logic.

SLASHED-for-WP/admin-app/vite.config.js

app.cssUpdate compiled CSS bundle for overlay UI +1/-1

Update compiled CSS bundle for overlay UI

• Refreshes the generated CSS bundle to include styles used by the new overlay component and related UI states.

SLASHED-for-WP/assets/admin-app/app.css

app.jsUpdate compiled JS bundle with overlay entrypoint +59/-54

Update compiled JS bundle with overlay entrypoint

• Refreshes the built JavaScript bundle to incorporate the new plugin entrypoint and AppOverlay mounting/toggling behavior on the frontend.

SLASHED-for-WP/assets/admin-app/app.js

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

1. Frontend CSS resets page ✓ Resolved 🐞 Bug ≡ Correctness

Description

Slashed_Frontend_Configurator::enqueue_assets() enqueues the full admin-app stylesheet on frontend
pages, and that stylesheet includes Tailwind’s global base/reset rules which will alter the live
page’s own layout and element styling for admin users. This breaks the “current page is the live
preview” behavior because the preview is no longer the site’s real styling once the overlay loads.

Code

SLASHED-for-WP/includes/class-frontend-configurator.php[R56-61]

+		wp_enqueue_style(
+			'slashed-frontend-overlay',
+			$plugin_url . 'assets/admin-app/app.css',
+			array(),
+			$css_ver
+		);

Relevance

⭐⭐⭐ High

Team previously fixed frontend/editor CSS cascade issues (e.g., @layer ordering) suggesting
sensitivity to global CSS side effects.

PR-#78
PR-#31

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The PR introduces a frontend enqueue of assets/admin-app/app.css, and that CSS file contains
Tailwind’s global @layer base reset selectors which affect all elements on the page, not just the
overlay container.

SLASHED-for-WP/includes/class-frontend-configurator.php[38-69]
SLASHED-for-WP/assets/admin-app/app.css[1-1]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The frontend overlay currently enqueues `assets/admin-app/app.css`, which contains Tailwind base/reset styles that apply globally (e.g. `*{margin:0;padding:0}`), altering the frontend page being previewed.

## Issue Context
The overlay UI needs Tailwind utilities for its own chrome, but the page underneath must remain unaffected so the “live preview” is accurate.

## Fix Focus Areas
- SLASHED-for-WP/includes/class-frontend-configurator.php[56-69]
- SLASHED-for-WP/assets/admin-app/app.css[1-1]

## Suggested fix directions (pick one)
1. **Shadow DOM isolation (strongest containment):**
  - In `admin-app/src/plugin-main.ts`, attach a shadow root to `#slashed-frontend-overlay` and mount Svelte into it.
  - Inject the required CSS into the shadow root (as a `<style>` tag) instead of enqueuing it globally.
2. **Build a frontend-specific CSS bundle:**
  - Create a separate Vite entry/build for the overlay that disables Tailwind preflight/base resets (e.g. Tailwind config `corePlugins: { preflight: false }`) and/or prefixes all selectors under `#slashed-frontend-overlay`.
  - Enqueue that overlay-specific CSS in `Slashed_Frontend_Configurator::enqueue_assets()` instead of the global admin-app CSS.
3. **At minimum:** ensure Tailwind “base” layer is not shipped to frontend (utilities/components only), and keep any necessary base styles scoped to the overlay container.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Early blob URL revocation 🐞 Bug ☼ Reliability

Description

AppOverlay’s export flow revokes the Blob URL immediately after triggering a.click(), which is a
browser-dependent timing hazard that can prevent downloads in some environments. This can make
“Export CSS” unreliable for some users.

Code

SLASHED-for-WP/admin-app/src/AppOverlay.svelte[R110-116]

+  function handleExport() {
+    const css  = fa(overrides, { mode: 'layer', banner: true });
+    const blob = new Blob([css], { type: 'text/css' });
+    const url  = URL.createObjectURL(blob);
+    const a    = document.createElement('a');
+    a.href = url; a.download = 'slashed-overrides.css'; a.click();
+    URL.revokeObjectURL(url);

Relevance

⭐⭐ Medium

No historical evidence found on Blob URL revocation timing; download/export patterns not previously
reviewed here.

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The export handler calls URL.revokeObjectURL(url) immediately after programmatically clicking the
download link, creating a potential timing race with the download initiation.

SLASHED-for-WP/admin-app/src/AppOverlay.svelte[110-116]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`handleExport()` revokes the object URL synchronously after calling `a.click()`, which can race the download start.

## Issue Context
This is a small compatibility hardening; functionality is otherwise correct.

## Fix Focus Areas
- SLASHED-for-WP/admin-app/src/AppOverlay.svelte[110-116]

## Suggested fix
- Revoke the URL on a later tick, e.g.:
 - `setTimeout(() => URL.revokeObjectURL(url), 0)` (or a slightly larger delay), or
 - revoke in `requestAnimationFrame`, and optionally append/remove the anchor from `document.body` for maximum compatibility.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@SLASHED-for-WP/admin-app/src/AppOverlay.svelte`:
- Around line 190-195: The collapsed drawer in AppOverlay.svelte still remains
focusable when isOpen is false, so make the drawer truly inert when closed by
applying an inert state or equivalent focus-blocking behavior to the overlay
container alongside the existing aria-hidden and translate classes. Update the
main drawer element in AppOverlay so its interactive descendants cannot receive
keyboard focus while collapsed, and ensure the open state restores normal
interaction.
- Around line 153-157: The undo/redo shortcut handling in keydown should
normalize e.key before comparisons so uppercase key values are matched
consistently. Update the logic in AppOverlay.svelte’s keydown handler to use a
lowercase-normalized key for both the undo and redo branches, keeping the
Ctrl/Cmd+K handling consistent with that approach.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d909e6ae-c9d9-4314-96b9-ec80fb81ff0c

📥 Commits

Reviewing files that changed from the base of the PR and between 5c9f441 and 4c3d331.

📒 Files selected for processing (8)

• SLASHED-for-WP/admin-app/.syncignore
• SLASHED-for-WP/admin-app/src/AppOverlay.svelte
• SLASHED-for-WP/admin-app/src/plugin-main.ts
• SLASHED-for-WP/admin-app/vite.config.js
• SLASHED-for-WP/assets/admin-app/app.css
• SLASHED-for-WP/assets/admin-app/app.js
• SLASHED-for-WP/includes/class-frontend-configurator.php
• SLASHED-for-WP/slashed.php