Skip to content

chore: deactivate configurator pending framework v0.8.0, set manual CSS as default - #34

Merged
jackgranatowski merged 4 commits into
mainfrom
claude/deactivator-configurator-setup-9m0xfu
Jun 15, 2026
Merged

chore: deactivate configurator pending framework v0.8.0, set manual CSS as default#34
jackgranatowski merged 4 commits into
mainfrom
claude/deactivator-configurator-setup-9m0xfu

Conversation

@jackgranatowski

@jackgranatowski jackgranatowski commented Jun 15, 2026

Copy link
Copy Markdown
Contributor
  • App.svelte: simplified to sidebar + main (removed preview, output, multi-pane
    resizing); routes domain to ManualCssTab or SettingsTab; effect redirects any
    configurator domain to 'manual-css' until v0.8.0

  • WpSidebar.svelte: replaced DOMAINS-based nav with Manual CSS + Settings items
    plus a disabled "Configurator — v0.8.0" entry so users know what's coming

  • store.svelte.js: default domain changed to 'manual-css', useManualCss defaults
    to true, previewOpen/outputOpen fixed to false (no preview pane)

  • SettingsTab.svelte: removed duplicates of PHP Plugin Settings (css_bundle,
    html_font_size, show_class_hints); now owns only manual_css_mode and
    configurator_url; configurator option shown as disabled with v0.8.0 badge;
    added note linking to Plugin Settings for the rest

  • class-token-store.php: added manual_css_mode=true and configurator_url=''
    to PLUGIN_SETTING_DEFAULTS so fresh installs default to manual CSS

  • class-token-page.php: changed PHP hydration default for manual_css_mode from
    false to true (ensures SPA boots in manual CSS mode without a DB record)

https://claude.ai/code/session_01DrujCXRKZeKepPs9r1aDR6

Summary by CodeRabbit

Release Notes

  • New Features

    • Simplified admin interface with focused Manual CSS and Settings experiences
  • UI/Design Improvements

    • Redesigned settings panel for design configuration
    • Streamlined sidebar navigation with cleaner layout
    • Enhanced color control animations in Bricks editor with visual feedback effects
  • Upcoming

    • Built-in configurator feature coming in v0.8.0

claude added 3 commits June 14, 2026 23:40
…SS as default

- App.svelte: simplified to sidebar + main (removed preview, output, multi-pane
  resizing); routes domain to ManualCssTab or SettingsTab; effect redirects any
  configurator domain to 'manual-css' until v0.8.0

- WpSidebar.svelte: replaced DOMAINS-based nav with Manual CSS + Settings items
  plus a disabled "Configurator — v0.8.0" entry so users know what's coming

- store.svelte.js: default domain changed to 'manual-css', useManualCss defaults
  to true, previewOpen/outputOpen fixed to false (no preview pane)

- SettingsTab.svelte: removed duplicates of PHP Plugin Settings (css_bundle,
  html_font_size, show_class_hints); now owns only manual_css_mode and
  configurator_url; configurator option shown as disabled with v0.8.0 badge;
  added note linking to Plugin Settings for the rest

- class-token-store.php: added manual_css_mode=true and configurator_url=''
  to PLUGIN_SETTING_DEFAULTS so fresh installs default to manual CSS

- class-token-page.php: changed PHP hydration default for manual_css_mode from
  false to true (ensures SPA boots in manual CSS mode without a DB record)

https://claude.ai/code/session_01DrujCXRKZeKepPs9r1aDR6
… glow

color-swatches.js:
- injectSFButton now places the SF swatch as a direct child of
  [data-control="color"] immediately after .bricks-control-preview, so it
  sits in the same visual row as the native Bricks colour preview
- Button lookup changed to colorControl.querySelector(':scope > .SF_BTN_CLASS')
  to match the new position outside .color-input
- Click handler re-queries .color-input at click time to avoid stale closures
- data-balloon-pos changed from top-right to top (fits the new position)
- Removed redundant --sf-active-color CSS property setting (glow uses accent blue)

panel.css:
- .slashed-sf-color-btn: removed flex shorthand (different flex context now),
  added margin-left: 3px gap from the native swatch
- .slashed-sf-color-btn--active .slashed-sf-color-btn__dot: now triggers
  @Keyframes slashed-sf-active-glow — a pulsing blue ring that clearly signals
  the active colour comes from the SF framework, not the native Bricks picker

Built: assets/admin-app + integrations/bricks/assets/editor-app

https://claude.ai/code/session_01DrujCXRKZeKepPs9r1aDR6
The pulsing ring on the SF swatch when active now uses --sf-active-color
(set inline from the resolved token hex) via color-mix(), so the glow
matches whatever --sf-color-* the user picked — no invented brand colour.

https://claude.ai/code/session_01DrujCXRKZeKepPs9r1aDR6
@coderabbitai

coderabbitai Bot commented Jun 15, 2026

Copy link
Copy Markdown

Review Change Stack

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 52 minutes and 52 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.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

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: 92b02eb7-c917-4571-bb95-6d483aabcb44

📥 Commits

Reviewing files that changed from the base of the PR and between 0afd892 and a5020e6.

📒 Files selected for processing (4)
  • SLASHED-for-WP/admin-app/src/App.svelte
  • SLASHED-for-WP/assets/admin-app/app.js
  • SLASHED-for-WP/integrations/bricks/assets/editor-app/app.js
  • SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js
📝 Walkthrough

Walkthrough

The WP admin app shell is stripped to two domains (manual-css and settings), removing the full configurator UI, preview/output panes, and dynamic domain navigation. PHP defaults for manual_css_mode and configurator_url are added, and the Svelte store aligns defaults accordingly. Separately, the Bricks editor color-swatch button gains repositioned DOM injection, stale-reference fixes, and a CSS custom-property-driven pulsing glow animation.

Changes

WP Admin App: Manual CSS Mode

Layer / File(s) Summary
PHP defaults and Svelte store initialization
SLASHED-for-WP/includes/class-token-store.php, SLASHED-for-WP/includes/class-token-page.php, SLASHED-for-WP/admin-app/src/lib/store.svelte.js
PLUGIN_SETTING_DEFAULTS gains manual_css_mode: true and configurator_url: ''; localized slashedApp sets manual_css_mode: true; Svelte store defaults ui.domain to 'manual-css', closes previewOpen/outputOpen, and adds ?? true fallback to useManualCss.
App shell routing, persistence, and layout
SLASHED-for-WP/admin-app/src/App.svelte
Multi-pane resize is replaced by sidebar-only width persistence; a domain redirect effect forces any domain other than manual-css/settings back to manual-css; keyboard shortcuts are reduced to undo/redo; the template becomes a single <main> switch between SettingsTab and ManualCssTab with a CSS grid header/sidebar/main layout.
WpSidebar static navigation items
SLASHED-for-WP/admin-app/src/components/WpSidebar.svelte
Dynamic domain list replaced with three fixed items: "Manual CSS" (with override count badge), "Settings", and a non-interactive "Configurator" placeholder tagged v0.8.0; nav layout switches to flex column; new CSS for badge, separator, and coming-row including collapsed-mode centering.
SettingsTab form simplification and restyled UI
SLASHED-for-WP/admin-app/src/components/SettingsTab.svelte
Form state drops css_bundle, html_font_size, and show_class_hints; defaults manual_css_mode: true; UI becomes a "Token input mode" radio (Manual CSS active, Built-in Configurator disabled with "Coming in v0.8.0" badge) plus an always-visible configurator URL field; adds disabled-radio, badge variant, .field__input, and .settings-note styles.

Bricks Editor Color Swatch Polish

Layer / File(s) Summary
Color swatch DOM injection and active-color sync
SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js
Injection anchor changed to .bricks-control-preview with fallbacks; existing-button detection moves to the outer [data-control="color"] container; click handler re-queries live .color-input to avoid stale DOM; --sf-active-color CSS custom property is set/removed on the button instead of directly mutating the dot's background.
SF Colors button glow animation and compiled CSS
SLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css, SLASHED-for-WP/integrations/bricks/assets/editor-app/app.css
Active dot replaced with @keyframes slashed-sf-active-glow pulsing box-shadow driven by --sf-active-color via color-mix; button sizing, default opacity, and hover background updated; compiled editor stylesheet minified.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • codeslash-dev/SLASHED-Plugins#27: Introduced the full WP configurator-based admin app across App.svelte, SettingsTab.svelte, WpSidebar.svelte, and store.svelte.js — the same files this PR substantially rewrites to remove that configurator UI.
  • codeslash-dev/SLASHED-Plugins#30: Added manual_css_mode and configurator_url handling in the admin UI and plugin settings, directly overlapping with this PR's form simplification and PHP defaults.
  • codeslash-dev/SLASHED-Plugins#31: Modified WpSidebar.svelte layout and toggle behavior — the same component this PR restructures with static nav items and new collapsed-mode styling.
🚥 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 directly and accurately summarizes the two main objectives of the PR: deactivating the configurator pending v0.8.0 and setting manual CSS as the default mode.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% 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.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/deactivator-configurator-setup-9m0xfu

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js (1)

120-127: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Add an accessible name to the injected SF Colors button.

The control is interactive but currently unnamed for assistive tech. Add an aria-label when creating the button so screen readers announce its purpose.

Suggested fix
     btn.className = SF_BTN_CLASS;
     btn.setAttribute('data-balloon', 'SLASHED Colors');
     btn.setAttribute('data-balloon-pos', 'top');
     btn.setAttribute('role', 'button');
     btn.setAttribute('tabindex', '0');
+    btn.setAttribute('aria-label', 'SLASHED Colors');
🤖 Prompt for 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.

In `@SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js`
around lines 120 - 127, The button element created in this code block (btn) is
missing an aria-label attribute, which prevents screen readers from announcing
the button's purpose to users with assistive technology. Add an aria-label
attribute to the btn element using setAttribute with a descriptive label such as
"SLASHED Colors" to provide an accessible name that conveys the button's
function.
🧹 Nitpick comments (1)
SLASHED-for-WP/admin-app/src/App.svelte (1)

55-55: 💤 Low value

Vestigial main: 400 in persistence payload.

The main width is no longer used since the multi-pane layout was removed, but it's still written to storage. This is harmless since loadSidebarWidth() only reads sidebar, but you could clean this up by persisting only what's actually restored.

🧹 Optional cleanup
-    try { localStorage.setItem(WIDTHS_KEY, JSON.stringify({ sidebar: sidebarWidth, main: 400 })); } catch { /* ignore */ }
+    try { localStorage.setItem(WIDTHS_KEY, JSON.stringify({ sidebar: sidebarWidth })); } catch { /* ignore */ }
🤖 Prompt for 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.

In `@SLASHED-for-WP/admin-app/src/App.svelte` at line 55, The localStorage
persistence in App.svelte is saving a vestigial `main: 400` property that is no
longer used since the multi-pane layout was removed. In the try-catch block
where localStorage.setItem is called with WIDTHS_KEY, remove the `main: 400`
property from the object being persisted, leaving only the `sidebar` property
that is actually restored by loadSidebarWidth().
🤖 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.

Outside diff comments:
In `@SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js`:
- Around line 120-127: The button element created in this code block (btn) is
missing an aria-label attribute, which prevents screen readers from announcing
the button's purpose to users with assistive technology. Add an aria-label
attribute to the btn element using setAttribute with a descriptive label such as
"SLASHED Colors" to provide an accessible name that conveys the button's
function.

---

Nitpick comments:
In `@SLASHED-for-WP/admin-app/src/App.svelte`:
- Line 55: The localStorage persistence in App.svelte is saving a vestigial
`main: 400` property that is no longer used since the multi-pane layout was
removed. In the try-catch block where localStorage.setItem is called with
WIDTHS_KEY, remove the `main: 400` property from the object being persisted,
leaving only the `sidebar` property that is actually restored by
loadSidebarWidth().

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6902d3c5-9537-47ae-a739-39f8cfce111c

📥 Commits

Reviewing files that changed from the base of the PR and between 7867d51 and 0afd892.

📒 Files selected for processing (12)
  • SLASHED-for-WP/admin-app/src/App.svelte
  • SLASHED-for-WP/admin-app/src/components/SettingsTab.svelte
  • SLASHED-for-WP/admin-app/src/components/WpSidebar.svelte
  • SLASHED-for-WP/admin-app/src/lib/store.svelte.js
  • SLASHED-for-WP/assets/admin-app/app.css
  • SLASHED-for-WP/assets/admin-app/app.js
  • SLASHED-for-WP/includes/class-token-page.php
  • SLASHED-for-WP/includes/class-token-store.php
  • SLASHED-for-WP/integrations/bricks/assets/editor-app/app.css
  • SLASHED-for-WP/integrations/bricks/assets/editor-app/app.js
  • SLASHED-for-WP/integrations/bricks/editor-app/src/lib/color-swatches.js
  • SLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css

- color-swatches.js: add aria-label="SLASHED Colors" to SF swatch button
  so screen readers can announce its purpose (was missing alongside role=button)

- App.svelte: remove vestigial main:400 from WIDTHS_KEY localStorage payload;
  only sidebar width is restored by loadSidebarWidth() after the multi-pane
  layout was removed

https://claude.ai/code/session_01DrujCXRKZeKepPs9r1aDR6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants