@happyvertical/smrt-playground 0.55.20 → 0.55.23

package/AGENTS.md

@@ -50,3 +50,51 @@ The `smrt playground` commands (`init`, `dev`, `list`) consume this package. The
 ## Visual baselines
 
 The host's theme gallery has Chromium-on-macOS screenshot baselines. Update with `pnpm --filter smrt-playground-host test:e2e:update-snapshots`; details in [agents/host.md](agents/host.md). The spec skips pixel comparison off darwin (CI is Linux).
+
+## Visual regression (styling wave 2)
+
+`Playground Visual Regression` in `Pull Request Validation` compares 120 Linux
+Chromium screenshots: Base Controls, Feedback & Overlays, Collections & Content
+Lists, Data Table, Calendar and Styleless Mode × Material/Glass/Studio/SMRT/
+HappyVertical × light/dark × styled/unstyled. It is a required gate when
+`packages/*/src/**/*.svelte`, `packages/*/src/**/playground.ts`,
+`smrt-ui/src/themes/**`, `smrt-ui/src/styles/**`,
+playground files, the workflow/setup action, or dependency manifests change.
+The job has a six-minute wall-clock budget and uploads `playground-visual-diffs`
+(expected/actual/diff PNGs, HTML report and traces) on failure.
+
+Baselines live in `e2e/__screenshots__/<preset>/<scheme>/<entry>-<mode>.png`.
+Rendering uses the pinned Playwright 1.63.0 Noble **Linux AMD64** image in
+`e2e/Dockerfile`, a 1440×1000 viewport at 1×, en-US, America/Edmonton, a fixed
+2026-10-13 clock, self-hosted SMRT and HappyVertical fonts, reduced motion and
+an unlayered animation/transition override. The screenshot target is the whole
+preview stage, including content taller than the viewport. The comparison allows
+at most 0.01% changed pixels with a 0.1 per-pixel threshold; do not widen it to
+accept an unexplained regression.
+
+After `pnpm install --frozen-lockfile` and `pnpm build`, with Docker running and
+port 5560 free, run from the repository root:
+
+```bash
+pnpm --filter smrt-playground-host test:visual:container
+pnpm --filter smrt-playground-host test:visual:container --update-snapshots
+# Focus a deliberate styling change:
+pnpm --filter smrt-playground-host test:visual:container --grep 'material/light/base-controls'
+```
+
+The wrapper builds the pinned renderer, starts the actual playground dev host,
+renders in Linux, writes results into the workspace and stops its host. Native
+`test:visual` and `test:visual:update` also exist for that Linux environment;
+**both refuse macOS** before Playwright can write even a missing baseline.
+Never commit macOS-rendered PNGs. Other Linux distributions/browser versions are
+not the baseline environment: use the container on those systems too.
+Default comparison uses `updateSnapshots: 'none'`, so missing files fail closed.
+
+To generate on GitHub, dispatch `Pull Request Validation` on the desired branch
+with `update_visual_baselines=true`, download `playground-visual-baselines` into
+`packages/smrt-playground/e2e/__screenshots__/`, inspect the changed PNGs, rerun
+comparison and commit explicit baseline paths alongside the intentional change.
+The workflow never commits or approves its own updates. PR runs always compare.
+Because `pull_request_target` loads trusted base YAML, workflow edits take effect
+for PR events after merging; manual dispatch on the feature branch can exercise
+the new visual job before that. Wave-2 changes should cite the job/run URL.

package/dist/svelte/PlaygroundHost.svelte

@@ -576,7 +576,7 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
     gap: 1.4rem;
     padding: 1.25rem;
     overflow: hidden;
-    border-right: 1px solid var(--smrt-color-outline-variant);
+    border-right: var(--smrt-hairline);
     background: var(--smrt-color-surface-container-low);
     color: var(--smrt-color-on-surface);
   }
@@ -635,7 +635,7 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
   .search-field input {
     width: 100%;
     padding: 0.65rem 0.75rem;
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: 0.55rem;
     background: var(--smrt-color-surface);
     color: var(--smrt-color-on-surface);
@@ -678,7 +678,7 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
     align-items: center;
     justify-content: space-between;
     padding: 0 0 0.7rem;
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
     font-size: 0.82rem;
     font-weight: 650;
   }
@@ -747,7 +747,7 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
     align-items: end;
     gap: 0.5rem;
     padding-top: 0.8rem;
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-hairline);
   }
 
   .theme-controls :global(.smrt-theme-switcher__label) {
@@ -777,7 +777,7 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
   }
 
   .breadcrumbs {
@@ -839,7 +839,7 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
     display: grid;
     gap: 0.55rem;
     padding-bottom: clamp(1.75rem, 4vw, 3rem);
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
   }
 
   .package-landing > header p {
@@ -894,7 +894,7 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
     gap: 1.25rem;
     padding: 1.15rem 0;
     border: 0;
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-hairline);
     background: transparent;
     text-align: left;
     cursor: pointer;
@@ -977,7 +977,7 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
     min-height: 30rem;
     padding: clamp(1rem, 2.2vw, 2rem);
     overflow: auto;
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: 1rem;
     background: var(--smrt-color-surface);
     color: var(--smrt-color-on-surface);
@@ -1032,7 +1032,7 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
       position: static;
       height: auto;
       border-right: 0;
-      border-bottom: 1px solid var(--smrt-color-outline-variant);
+      border-bottom: var(--smrt-hairline);
     }
 
     .catalog-scroll {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-playground",
-  "version": "0.55.20",
+  "version": "0.55.23",
   "smrtJsdoc": "strict",
   "description": "Shared playground discovery, runtime, and host components for SMRT UI packages",
   "type": "module",
@@ -29,7 +29,7 @@
     }
   },
   "dependencies": {
-    "@happyvertical/smrt-ui": "0.55.20",
+    "@happyvertical/smrt-ui": "0.55.23",
     "fast-glob": "3.3.3",
     "tsx": "^4.23.13"
   },