codeslash-dev · jackgranatowski · May 27, 2026 · May 27, 2026 · May 27, 2026 · May 27, 2026
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ playwright-report/
 # Built source maps are large and not needed in shipped releases.
 # Re-build locally via `npm run build` in admin-app/ to regenerate.
 integrations/bricks/assets/admin-app/*.map
+integrations/bricks/assets/editor-app/*.map
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,6 +1,6 @@
 {
   "extends": ["stylelint-config-standard"],
-  "ignoreFiles": ["dist/**", "node_modules/**", "integrations/bricks/assets/admin-app/**"],
+  "ignoreFiles": ["dist/**", "node_modules/**", "integrations/bricks/assets/admin-app/**", "integrations/bricks/assets/editor-app/**", "integrations/bricks/editor-app/**"],
   "rules": {
     "color-function-notation": "modern",
     "alpha-value-notation": "number",

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+### Added
+
+- **reBEMer** (`integrations/bricks/`) — Subtree-scoped BEM class manager
+  for the Bricks Builder structure panel. Adds a "BEM" badge to every
+  structure-panel item; clicking it opens a draggable modal that names a
+  block + every descendant element + an optional modifier and applies the
+  result as global classes in one transaction. Five operation modes
+  (Add / Rename / Replace / Add Modifier / Migrate ID styles), a REST
+  preflight endpoint that reports cross-element class usage so destructive
+  ops never silently break unrelated elements, snapshot + rollback for
+  every apply, an in-panel undo ring buffer, and a reserved-name guard
+  against SLASHED's own utility classes. Full design at
+  [docs/rebemer.md](docs/rebemer.md). The editor app lives in
+  `integrations/bricks/editor-app/` (Svelte 5 runes + Vite); the PHP side
+  is `Slashed_Bricks_ReBEMer_{Policy,REST,Enqueue}` under
+  `integrations/bricks/includes/`.
+
 ### ⚠️ Breaking Changes (pre-freeze cleanup)
 
 The framework is in pre-freeze cleanup. No published consumer is affected.

diff --git a/docs/rebemer.md b/docs/rebemer.md
diff --git a/integrations/bricks/README.md b/integrations/bricks/README.md
@@ -9,6 +9,7 @@ A WordPress plugin that integrates the [SLASHED](https://github.com/codeslash-de
 - **Class Autocomplete** - Registers every `.sf-*` layout/utility class and `.is-*` state class declared in the active bundle with the Bricks class input, organized into "SLASHED Layout" and "SLASHED State" categories
 - **Color Palette** - Synchronizes every `--sf-color-*` token (brand scales including alpha steps, status, and semantic colors) with the Bricks global color palette
 - **Dynamic Detection** - The integration parses the loaded CSS bundle at runtime, so registrations stay in sync with whichever bundle (`essential` / `optimal` / `full`) and SLASHED release is active. There is no hand-curated list to drift out of date.
+- **reBEMer** - Subtree-scoped BEM class manager inside the Bricks builder structure panel: add / rename / replace classes for an element and its children in one transaction, with reference-count preflight (REST), snapshot+rollback, reserved-name guard against SLASHED utilities, and Cmd/Ctrl-Z undo. See [docs/rebemer.md](../../docs/rebemer.md) for the full design.
 
 ## Requirements
 

diff --git a/integrations/bricks/assets/editor-app/app.css b/integrations/bricks/assets/editor-app/app.css
diff --git a/integrations/bricks/assets/editor-app/app.js b/integrations/bricks/assets/editor-app/app.js
diff --git a/integrations/bricks/editor-app/.gitignore b/integrations/bricks/editor-app/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+.vite/
+dist/
+coverage/
+*.log
diff --git a/integrations/bricks/editor-app/index.html b/integrations/bricks/editor-app/index.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>reBEMer dev harness</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <style>
+      :root { color-scheme: dark; }
+      body { font: 13px/1.45 system-ui, sans-serif; margin: 0; background: #1f242a; color: #e1e1e1; }
+      .harness { padding: 20px; max-width: 720px; margin: 0 auto; }
+      .harness h1 { font-size: 14px; letter-spacing: .5px; text-transform: uppercase; color: #e2b93b; margin: 0 0 12px; }
+      #bricks-structure { background: #161a1d; border: 1px solid #3d4752; border-radius: 4px; padding: 12px; }
+      #bricks-structure li { display: flex; align-items: center; gap: 8px; padding: 4px 0; list-style: none; }
+      #bricks-structure ul { padding-left: 16px; margin: 0; }
+      .actions { margin-left: auto; display: flex; gap: 4px; opacity: .6; }
+      [data-v-app] { display: contents; }
+    </style>
+  </head>
+  <body>
+    <!--
+      Dev harness for working on the reBEMer panel UI in isolation.
+      A mock Bricks Vue state + structure panel are stubbed below so the
+      module's bootstrap code (main.js) can probe and mount as if it were
+      running inside the real builder.
+
+      For end-to-end verification, install the plugin in a real Bricks
+      install and load the actual builder. This page only exercises the
+      panel's standalone behavior.
+    -->
+    <div data-v-app>
+      <div class="harness">
+        <h1>reBEMer dev harness</h1>
+        <ul id="bricks-structure">
+          <li data-id="root-1">
+            <span class="label">Section</span>
+            <span class="actions"><span>•</span></span>
+            <ul>
+              <li data-id="child-1">
+                <span class="label">Container</span>
+                <span class="actions"><span>•</span></span>
+                <ul>
+                  <li data-id="child-2">
+                    <span class="label">Heading</span>
+                    <span class="actions"><span>•</span></span>
+                  </li>
+                  <li data-id="child-3">
+                    <span class="label">Text</span>
+                    <span class="actions"><span>•</span></span>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>