feat(rebemer): add All-in-one (mixed) mode with per-row op toggle and family picker

[jackgranatowski]

New 'mixed' mode in the reBEMer panel lets users assign BEM classes to a
subtree where some elements already have classes — without forcing a single
operation across every row.

• All rows default to Add. The user opts in to Rename or Replace per row
  via a compact three-button toggle rendered inline on each row.
• Rename targets a specific "class family" (base class + its --modifier
  siblings). When an element has multiple unrelated families a lets the user pick which one; unrelated classes are kept untouched. Replace strips ALL existing classes and attaches only the new BEM class — serving as both a fresh-start Add and a full-element clean slate. apply.js: 'mixed' added to VALID_MODES; per-op effectiveMode dispatch in applyToSubtree; rename branch uses renameFamilyId for the source class and iterates all currentIds rather than assuming index-0 is the base. BemPanel: readCurrentClassIds/findFirstFamilyId helpers; new currentClassIds, op, renameFamilyId fields seeded on mount; All-in-one option in mode select. Row: currentFamilies derived value; $effect to keep renameFamilyId valid; per-row op toggle + family picker + contextual notes, all gated on isMixed. panel.css: rebemer-row__op-toggle/btn and rebemer-row__family styles. docs/rebemer.md: implementation status and §6.3 table updated. https://claude.ai/code/session_013GzAkod2MTBtqia44QhStB Summary by CodeRabbit New Features All-in-one (Mixed) mode now shipped, enabling per-row operation selection (Add, Rename, Replace) with targeted class handling for each row. Style Improved editor UI layout with responsive grid wrapping and enhanced styling for operation mode controls and family selection.

[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 49 minutes and 25 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ 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: 72b81d86-cb64-45eb-8571-51f3e464782e

📥 Commits

Reviewing files that changed from the base of the PR and between 63827f5 and f3dc7ea.

📒 Files selected for processing (5)

• docs/rebemer.md
• plugins/SLASHED-for-WP/integrations/bricks/assets/editor-app/app.js
• plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/BemPanel.svelte
• plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/Row.svelte
• plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/apply.js

📝 Walkthrough

Walkthrough

This PR introduces a new "All-in-one (Mixed)" operation mode for the reBEMer editor, enabling per-row selection of add, rename, or replace operations. Each row can target a specific class family for rename/replace behavior, with mode-aware class manipulation and selective family-based stripping.

Changes

All-in-one (Mixed) Operation Mode

Layer / File(s)	Summary
Mode support and Row data contracts plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/apply.js	VALID_MODES now includes 'mixed', and the Row JSDoc contract is extended with op (per-row operation), currentClassIds (for family detection), and renameFamilyId (family-specific rename target).
Mixed mode apply logic and class manipulation plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/apply.js	In applyToSubtree, per-row effectiveMode is computed when top-level mode is 'mixed'. Seed selection and migrate merge now use effectiveMode. Rename operation retargets compatible modifier classes within the selected family while preserving unrelated classes. Replace operation selectively strips only the targeted family's base+modifier classes. Migrate key removal aligns with per-row operation.
BemPanel seeding with family detection plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/BemPanel.svelte	MODE_HINTS is extended with mixed mode. Helper functions extract current global class IDs and detect the first non-modifier class family. Rows are seeded with currentClassIds and renameFamilyId derived from element settings at open. Mixed mode option is added to the operation-mode selector.
Row UI controls for mixed mode plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/Row.svelte	Derived state tracks isMixed flag and computes currentFamilies from row.currentClassIds. An effect keeps row.renameFamilyId valid. Conditional UI renders operation toggle buttons (add/rename/replace), a family selector when multiple families exist, and role-based info/warning messages.
Styling for operation controls plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css	Added CSS for operation toggle button group (segmented, selected state, hover), family picker layout (label, full-width select with focus), and inline code styling in row-level notes.
Grid layout update and documentation plugins/SLASHED-for-WP/integrations/bricks/assets/editor-app/app.css, docs/rebemer.md	Class picker grid changed from fixed 2-column to responsive auto-fill layout. Documentation marks mixed mode as shipped in v1 and extends the operation modes table with per-row behavior.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• codeslash-dev/SLASHED#125: Directly extends the reBEMer MVP codebase by adding the new mixed per-row operation mode to the same core apply.js, BemPanel, and Row components.
• codeslash-dev/SLASHED#209: Both PRs modify the same editor-app apply pipeline and component mode handling by extending apply.js and Row.svelte/BemPanel.svelte with mode-driven behavior changes.

🚥 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 pull request title clearly summarizes the main change: introducing an All-in-one (mixed) mode feature with per-row operation toggle and family picker functionality.
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/rebemer-all-in-one-mode-lUZ5y

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 4

🧹 Nitpick comments (3)

plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/apply.js (2)

166-167: 💤 Low value

JSDoc type annotation doesn't include 'mixed'.

The @param type for opts.mode is 'add'|'rename'|'replace'|'migrate' but 'mixed' is now valid per VALID_MODES. Same issue exists at line 252 for applyToSubtree.

📝 Suggested fix

- * `@param` {'add'|'rename'|'replace'|'migrate'} opts.mode
+ * `@param` {'add'|'rename'|'replace'|'migrate'|'mixed'} opts.mode

🤖 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 `@plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/apply.js`
around lines 166 - 167, Update the JSDoc for opts.mode to include the 'mixed'
value (so it matches VALID_MODES) in both the apply function and applyToSubtree
function declarations; locate the JSDoc blocks above the apply and
applyToSubtree functions in apply.js and change the `@param` type union from
'add'|'rename'|'replace'|'migrate' to include 'mixed' as well.

---

2-10: 💤 Low value

Update the module docstring to reflect five modes.

The header says "Four modes" but 'mixed' is now a valid fifth mode. Consider updating the intro and adding a brief description of mixed mode semantics.

🤖 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 `@plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/apply.js`
around lines 2 - 10, Update the module docstring at the top of apply.js to say
"Five modes" instead of "Four modes" and add a one-line description of the new
mixed mode; specifically, extend the modes list (add, rename, replace, migrate)
with "mixed — <brief semantics>" where "mixed" explains its behavior (e.g.,
combine add and migrate semantics: attach new BEM classes while preserving
existing classes and selectively lifting allowlisted element-settings into a
global class, or whatever the exact project semantics are), and ensure the intro
and modes enumeration reflect the addition of mixed so readers know there are
now five modes.

plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/Row.svelte (1)

207-230: ⚡ Quick win

Expose mixed op-toggle state to assistive tech.

The selected Add/Rename/Replace state is visual-only. Add aria-pressed per button (and ideally a group label) so screen readers can perceive which operation is active.

Suggested markup adjustment

-    <div class="rebemer-row__op-toggle">
+    <div class="rebemer-row__op-toggle" role="group" aria-label="Operation">
       <button
         type="button"
         class="rebemer-row__op-btn"
         class:rebemer-row__op-btn--on={row.op === 'add'}
+        aria-pressed={row.op === 'add'}
         onclick={() => { row.op = 'add'; }}
       >+ Add</button>
       <button
         type="button"
         class="rebemer-row__op-btn"
         class:rebemer-row__op-btn--on={row.op === 'rename'}
+        aria-pressed={row.op === 'rename'}
         onclick={() => {
           row.op = 'rename';
           if (!row.renameFamilyId && currentFamilies.length) {
             row.renameFamilyId = currentFamilies[0].id;
           }
         }}
       >→ Rename</button>
       <button
         type="button"
         class="rebemer-row__op-btn"
         class:rebemer-row__op-btn--on={row.op === 'replace'}
+        aria-pressed={row.op === 'replace'}
         onclick={() => { row.op = 'replace'; row.renameFamilyId = null; }}
       >× Replace</button>
     </div>

🤖 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
`@plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/Row.svelte`
around lines 207 - 230, The op-toggle buttons in Row.svelte are only visually
indicated and need ARIA so assistive tech can perceive the selected state;
update each button (the elements with class "rebemer-row__op-btn" that set
row.op in their onclick handlers) to include aria-pressed={row.op ===
'add'|'rename'|'replace'} as appropriate and wrap/mark the group with an
accessible label (e.g., add role="radiogroup" and aria-label or aria-labelledby)
so screen readers know this is an exclusive choice; also ensure when you set
row.op in the onclick for the Rename and Replace handlers you keep aria state in
sync (renameFamilyId handling remains unchanged).

🤖 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 `@docs/rebemer.md`:
- Line 200: The docs sentence "Replace strips *all* old classes" is inaccurate
for mixed mode; update the docs text to explain that Replace can operate two
ways: when renameFamilyId is null it strips all old classes, but when
renameFamilyId is set (per the Row.svelte picker logic and commit 2) it only
strips the selected family's base + modifiers and preserves unrelated classes;
reference the Replace operation and the renameFamilyId flag (and Row.svelte
behavior) and change the phrasing to clearly state both behaviors.

In `@plugins/SLASHED-for-WP/integrations/bricks/assets/editor-app/app.css`:
- Line 1: The PR layer description incorrectly references the "class picker"
while the diff modifies the color picker quick-use grid (.slashed-cp__qu-grid)
used by ColorPanel.svelte; either correct the description to state that the
change updates the color picker's quick-use swatch grid from a fixed 2-column
layout to a responsive auto-fill layout, or remove/relocate this CSS change from
this PR if it was meant for a different cohort. Locate the rule for
.slashed-cp__qu-grid and the ColorPanel.svelte usage to decide whether to update
the commit message/PR description or move the change to the proper branch/PR.
Ensure the updated layer description clearly names ".slashed-cp__qu-grid" and
"ColorPanel.svelte" if you keep the change here.

In
`@plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/BemPanel.svelte`:
- Line 41: The hint string labeled 'mixed' in BemPanel.svelte is outdated and
incorrectly states Replace always strips all classes; update the 'mixed' copy to
reflect the current mixed replace behavior (Replace can target the selected
class family and will keep unrelated classes). Locate the 'mixed' entry (the
key/value with the long hint text) and change its message to clarify that
per-row controls default to Add, rows can be switched to Rename (targets one
class family, keeps others) or Replace (targets the selected class family while
preserving unrelated classes).

---

Nitpick comments:
In
`@plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/Row.svelte`:
- Around line 207-230: The op-toggle buttons in Row.svelte are only visually
indicated and need ARIA so assistive tech can perceive the selected state;
update each button (the elements with class "rebemer-row__op-btn" that set
row.op in their onclick handlers) to include aria-pressed={row.op ===
'add'|'rename'|'replace'} as appropriate and wrap/mark the group with an
accessible label (e.g., add role="radiogroup" and aria-label or aria-labelledby)
so screen readers know this is an exclusive choice; also ensure when you set
row.op in the onclick for the Rename and Replace handlers you keep aria state in
sync (renameFamilyId handling remains unchanged).

In `@plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/apply.js`:
- Around line 166-167: Update the JSDoc for opts.mode to include the 'mixed'
value (so it matches VALID_MODES) in both the apply function and applyToSubtree
function declarations; locate the JSDoc blocks above the apply and
applyToSubtree functions in apply.js and change the `@param` type union from
'add'|'rename'|'replace'|'migrate' to include 'mixed' as well.
- Around line 2-10: Update the module docstring at the top of apply.js to say
"Five modes" instead of "Four modes" and add a one-line description of the new
mixed mode; specifically, extend the modes list (add, rename, replace, migrate)
with "mixed — <brief semantics>" where "mixed" explains its behavior (e.g.,
combine add and migrate semantics: attach new BEM classes while preserving
existing classes and selectively lifting allowlisted element-settings into a
global class, or whatever the exact project semantics are), and ensure the intro
and modes enumeration reflect the addition of mixed so readers know there are
now five modes.

🪄 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: 2226b40a-fd5b-41fd-ae43-06436988655a

📥 Commits

Reviewing files that changed from the base of the PR and between bc10ccb and 63827f5.

📒 Files selected for processing (7)

• docs/rebemer.md
• plugins/SLASHED-for-WP/integrations/bricks/assets/editor-app/app.css
• plugins/SLASHED-for-WP/integrations/bricks/assets/editor-app/app.js
• plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/BemPanel.svelte
• plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/components/Row.svelte
• plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/lib/apply.js
• plugins/SLASHED-for-WP/integrations/bricks/editor-app/src/styles/panel.css

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Inconsistency: Layer description claims "class picker" but change affects color picker grid.

The layer description states "Updates class picker grid from fixed 2-column layout to responsive auto-fill layout" but this change actually modifies .slashed-cp__qu-grid, which is the color picker's Quick Use swatch grid (confirmed by ColorPanel.svelte usage). This appears unrelated to reBEMer's BEM class management features described in the PR objectives.

Either:

1. The layer description is incorrect and should reference the color picker, or
2. This change was included in the wrong PR/cohort.

🤖 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 `@plugins/SLASHED-for-WP/integrations/bricks/assets/editor-app/app.css` at line
1, The PR layer description incorrectly references the "class picker" while the
diff modifies the color picker quick-use grid (.slashed-cp__qu-grid) used by
ColorPanel.svelte; either correct the description to state that the change
updates the color picker's quick-use swatch grid from a fixed 2-column layout to
a responsive auto-fill layout, or remove/relocate this CSS change from this PR
if it was meant for a different cohort. Locate the rule for .slashed-cp__qu-grid
and the ColorPanel.svelte usage to decide whether to update the commit
message/PR description or move the change to the proper branch/PR. Ensure the
updated layer description clearly names ".slashed-cp__qu-grid" and
"ColorPanel.svelte" if you keep the change here.