chore: technical debt audit remediation — full batch

.gitattributes

@@ -0,0 +1,17 @@
+# Built SPA output and framework CSS bundles — regenerated by npm run
+# build:apps / npm run build, never hand-edited. Marking them
+# linguist-generated hides them from GitHub's diff view and language stats
+# by default (viewable via "Load diff" when actually needed) so PR reviews
+# focus on source changes instead of noisy full-file rewrites of minified
+# JS/CSS/source-map output.
+SLASHED-for-WP/assets/admin-app/** linguist-generated=true
+SLASHED-for-WP/integrations/bricks/assets/editor-app/** linguist-generated=true
+SLASHED-for-WP/dist/** linguist-generated=true
+
+# Minified/source-map output within those trees is binary-diffed content in
+# practice — suppress line-oriented diffs entirely rather than showing an
+# unreadable one-line "changed" diff.
+*.min.css -diff
+*.min.js -diff
+*.js.map -diff
+*.css.map -diff

.github/workflows/ci.yml

@@ -112,6 +112,9 @@ jobs:
       - name: Lint PHP syntax (php -l)
         run: npm run lint:php
 
+      - name: PHP unit tests
+        run: composer phpunit
+
       - name: Register PHPCS standards
         run: >-
           vendor/bin/phpcs --config-set installed_paths

.gitignore

@@ -30,3 +30,6 @@ test-screenshots/
 # PHP Composer dependencies (PHPCS/WPCS + PHPStan tooling).
 # composer.json + composer.lock are tracked; the installed tree is not.
 /vendor/
+
+# PHPUnit result cache.
+/.phpunit.cache/

CLAUDE.md

@@ -7,12 +7,16 @@ SLASHED-for-WP/          WordPress plugin
   admin-app/             Svelte SPA — configurator UI embedded in WP admin + frontend overlay
     src/                 ⚠️  VENDORED — see below
     framework-css/       Vendored framework CSS (chrome layers + full bundle)
+  assets/                Built SPA output (admin-app/, editor-app/ — committed build artifacts)
+  data/                  Generated inventories/hints (class-hints.json, variables-hints.json…)
   integrations/
     bricks/editor-app/   Bricks Builder panel — independent, NOT vendored
     gutenberg/           Gutenberg integration
   includes/              PHP backend (REST API, CSS generator, token store…)
   dist/                  Framework CSS bundles (updated by npm run update-framework)
 scripts/                 Plugin-level build/sync scripts
+tests/                   Node --test suite + Playwright admin smoke test
+docs/                    Project docs
 ```
 
 ## ⚠️  Vendored files — DO NOT edit in this repo
@@ -64,13 +68,19 @@ These are plugin-specific and never overwritten by sync:
 
 ## Syncing the framework into the plugin
 
+`npm run sync` is defined in `SLASHED-for-WP/admin-app/package.json`, not the
+root `package.json` — run it from that directory (or via `npm run
+build:admin-app` at the root, which runs it as a `prebuild` step):
+
 ```bash
-npm run sync          # pull latest configurator/src from framework (local sibling or GitHub)
-npm run build:apps    # rebuild admin SPA + bricks editor app
+cd SLASHED-for-WP/admin-app
+npm run sync           # pull latest configurator/src from framework (local sibling or GitHub)
+cd ../../..
+npm run build:apps     # rebuild admin SPA + bricks editor app
 ```
 
 `SLASHED_CONFIGURATOR_SRC=/path/to/SLASHED/configurator/src npm run sync`
-forces a specific local checkout.
+(run from `SLASHED-for-WP/admin-app`) forces a specific local checkout.
 
 ## Updating the bundled framework CSS
 
@@ -91,4 +101,21 @@ Downloads release CSS bundles, shallow-clones framework source, regenerates
 | `npm run build` | Full build: data + sync-dist + SPA apps + zip |
 | `npm run build:apps` | Build admin SPA + Bricks editor app |
 | `npm test` | Run test suite |
-| `npm run verify` | Verify sync consistency |
+| `npm run verify` | Verify version metadata is in sync |
+| `npm run check` | Verify generated artifacts (class hints, variables hints, vendored admin-app core) aren't stale — exits non-zero on drift, never writes |
+| `composer phpunit` | Run the PHP unit suite (`tests-php/`) |
+
+`tests/` is `node --test` specs, run automatically by `npm test`, with one
+exception: `tests/playwright-admin.js` is a manual, local-only dev/QA tool —
+it walks the admin SPA and saves screenshots for a human to review, has no
+pass/fail assertions, and isn't wired into `npm test` or CI (no committed
+HTML fixture, needs a locally-running dev server). Run it directly with
+`node tests/playwright-admin.js`; see the file header for prerequisites.
+
+`tests-php/` is a plain PHPUnit suite (`composer phpunit`, wired into CI's
+`quality` job) covering pure/near-pure PHP logic that needs no WordPress
+runtime — CSS parsing, override-value validation, and REST input
+sanitization. `tests-php/bootstrap.php` defines `ABSPATH` and stubs the one
+WordPress function this code touches (`sanitize_key()`) rather than pulling
+in a mocking framework; it does not boot WordPress, so classes with real
+`wpdb`/hook dependencies aren't covered here.

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

@@ -3,11 +3,6 @@
 # Plugin-specific build wiring lives OUTSIDE src/ (vite.config.js, package.json,
 # svelte.config.js, tsconfig.json) and is never touched by the sync.
 
-# codeslash-dev/slashed#443 (the companion upstream PR that added @framework-css
-# aliases + the WP persistence seam) merged to main on 2026-06-28. main.ts,
-# App.svelte, PreviewPanel.svelte, vite-env.d.ts, lib/persistence.ts, and
-# StudioHeader.svelte are no longer plugin-divergent — they sync normally now.
-
 # Plugin-specific: frontend overlay (not in upstream configurator).
 src/plugin-main.ts
 src/AppOverlay.svelte

SLASHED-for-WP/admin-app/.vendored-manifest.json

@@ -4,7 +4,7 @@
     "frameworkRepo": "https://github.com/codeslash-dev/SLASHED",
     "configuratorSrc": "configurator/src/",
     "source": "local",
-    "syncedAt": "2026-07-01T18:41:55.013Z"
+    "syncedAt": "2026-07-02T16:31:02.085Z"
   },
   "vendoredFiles": [
     {

SLASHED-for-WP/admin-app/framework-css/core/layout.css

@@ -1,11 +1,15 @@
 /* SLASHED — core/layout.css
    @layer slashed.layout
    Layout primitives: section, container, stack, cluster, grid, sidebar, switcher, frame.
-   Prefix: .sf-*; local rhythm via --sf-*-gap / sizing tokens. */
+   Prefix: .sf-*; local rhythm via --sf-*-gap / sizing tokens.
+   SL-005: every @container query in this file hardcodes its breakpoint
+   instead of referencing a --sf-* token — var() is not allowed inside an
+   @container condition per the CSS spec. This applies framework-wide to
+   every @container site below; not re-explained at each one. */
 
 @layer slashed.layout {
 
-
+  /* Section */
   .sf-section     { padding-block: var(--sf-section-pad); }
   .sf-section--xs { --sf-section-pad: var(--sf-section-pad--xs); }
   .sf-section--s  { --sf-section-pad: var(--sf-section-pad--s); }
@@ -52,6 +56,7 @@
   }
 
 
+  /* Container */
   .sf-container {
     container:      sf-layout / inline-size;
     width:          100%;
@@ -71,6 +76,7 @@
   }
 
 
+  /* Stack & gap */
   .sf-stack {
     display:        flex;
     flex-direction: column;
@@ -96,12 +102,14 @@
   .sf-gap--2xl { gap: var(--sf-space-2xl); }
 
 
+  /* Box */
   .sf-box {
     padding: var(--sf-box-padding);
     outline: var(--sf-box-border-width) solid var(--sf-box-border-color);
   }
 
 
+  /* Center */
   .sf-center {
     box-sizing:      content-box;
     width:           auto;
@@ -117,6 +125,7 @@
   }
 
 
+  /* Cluster */
   .sf-cluster {
     display:         flex;
     flex-wrap:       wrap;
@@ -137,6 +146,7 @@
   .sf-cluster--between  { justify-content: space-between; }
 
 
+  /* Sidebar */
   .sf-sidebar {
     display:   flex;
     flex-wrap: wrap;
@@ -169,6 +179,7 @@
   .sf-sidebar--wide   { --sf-sidebar-width: 26rem; }
 
 
+  /* Switcher */
   .sf-switcher {
     display:   flex;
     flex-wrap: wrap;
@@ -184,6 +195,7 @@
   .sf-switcher--vertical { flex-direction: column; }
 
 
+  /* Grid & icon */
   .sf-grid {
     display:               grid;
     grid-template-columns: repeat(auto-fill, minmax(min(var(--sf-grid-min), 100%), 1fr));
@@ -229,6 +241,7 @@
   }
 
 
+  /* Cover */
   .sf-cover {
     display:        flex;
     flex-direction: column;
@@ -247,6 +260,7 @@
   .sf-cover--padding-l { padding-block: var(--sf-space-4xl); }
 
 
+  /* Frame */
   .sf-frame {
     aspect-ratio:    var(--sf-frame-ratio);
     overflow:        hidden;
@@ -395,7 +409,6 @@
     container: sf-grid / inline-size;
   }
 
-  /* Cannot use var() inside @container per CSS spec — breakpoints hardcoded. */
   @container (min-width: 30em) {
     .sf-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
     .sf-grid-cols-6 { grid-template-columns: repeat(3, 1fr); }

SLASHED-for-WP/admin-app/framework-css/core/themes.css

@@ -58,7 +58,12 @@
 
   /* SECTION-LEVEL THEMING */
   /* light-dark() bakes at :root declaration time; re-declarations on [data-theme]
-     elements are required for section-level theming to work. */
+     elements are required for section-level theming to work.
+     SL-001: the clamp() derivation formula below is the same one used inside
+     tokens.css's "Resolved color tokens — auto-switch via light-dark()"
+     block (search core/tokens.css for that comment) — duplicated here, not
+     shared, because this file needs flat values outside light-dark().
+     Keep both copies in sync if the formula ever changes. */
   @supports (color: oklch(from red l c h)) {
 
         :root {

SLASHED-for-WP/admin-app/framework-css/core/tokens.css

@@ -101,14 +101,20 @@
     --sf-color-danger:    var(--sf-color-danger-source-light);
   }
 
-  /* Mode flag — drives formula direction for non-color dark overrides.
-     Set by themes.css via [data-theme="dark"] and the prefers-color-scheme
-     media query. Do not set directly. */
+  /* Mode flag — INTERNAL, not a public hook (SL-003: same "--sf-is-*" naming
+     pattern as the public flags below, opposite contract — read here, don't
+     set). Drives formula direction for non-color dark overrides. Set only by
+     themes.css via [data-theme="dark"] and the prefers-color-scheme media
+     query; every other read site (core/tokens.css, the configurator's power
+     knobs) only reads it inside calc() expressions. Setting it directly
+     desyncs it from color-scheme/[data-theme] and produces an inconsistent
+     theme. */
   @property --sf-is-dark { syntax: "<integer>"; inherits: true; initial-value: 0; }
 
   /* @property — INTERACTION STATE FLAGS */
-  /* Public hooks for Style Queries. Allow components to react to states
-     toggled on ancestors via .is-* classes. */
+  /* PUBLIC hooks for Style Queries — safe to set from consumer code, unlike
+     --sf-is-dark above. Allow components to react to states toggled on
+     ancestors via .is-* classes. */
   @property --sf-is-active  { syntax: "<integer>"; inherits: true; initial-value: 0; }
   @property --sf-is-current { syntax: "<integer>"; inherits: true; initial-value: 0; }
   @property --sf-is-pressed { syntax: "<integer>"; inherits: true; initial-value: 0; }
@@ -366,7 +372,11 @@
          Dark auto-derivation formula (brand + status):
          clamp(0.65, 0.95 - l*0.5, 0.88) lightens dark-mode value relative to the light source.
          Surface inverts: clamp(0.16, 1.18 - l, 0.24) — near-white flips to near-dark.
-         Override any --sf-color-X-dark to take full per-mode control. */
+         Override any --sf-color-X-dark to take full per-mode control.
+         SL-001: this same clamp() formula is re-declared flat in themes.css
+         (SECTION-LEVEL THEMING) so [data-theme] overrides on non-:root elements
+         still resolve correctly — light-dark() only bakes at :root. Keep both
+         copies in sync if the formula ever changes. */
       --sf-color-primary:   light-dark(var(--sf-color-primary-source-light),   var(--sf-color-primary-source-dark,   oklch(from var(--sf-color-primary-source-light)   clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)));
       --sf-color-secondary: light-dark(var(--sf-color-secondary-source-light), var(--sf-color-secondary-source-dark, oklch(from var(--sf-color-secondary-source-light) clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)));
       --sf-color-tertiary:  light-dark(var(--sf-color-tertiary-source-light),  var(--sf-color-tertiary-source-dark,  oklch(from var(--sf-color-tertiary-source-light)  clamp(0.65, calc(0.95 - l * 0.5), 0.88) calc(c * 0.9) h)));

SLASHED-for-WP/admin-app/package.json

@@ -10,11 +10,12 @@
     "dev": "vite",
     "prebuild": "node scripts/sync-core.mjs",
     "build": "vite build",
+    "precheck": "node scripts/sync-core.mjs --check",
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
+    "@lucide/svelte": "^1.23.0",
     "fflate": "^0.8.3",
-    "lucide-svelte": "^1.0.1",
     "motion": "^12.23.24"
   },
   "devDependencies": {