@happyvertical/smrt-playground 0.55.16 → 0.55.18

package/AGENTS.md

@@ -46,3 +46,7 @@ The `smrt playground` commands (`init`, `dev`, `list`) consume this package. The
 
 - See [`docs/ui-surfaces.md`](../../docs/ui-surfaces.md) for the full UI surface contract
 - See [`docs/content/standards.md`](../../docs/content/standards.md) for monorepo conventions
+
+## 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).

package/agents/host.md

@@ -18,6 +18,7 @@ Paths are relative to `host/`.
 - `svelte.config.js` — `adapter-static` with `strict: false`, because the
   playground routes are discovered at build time rather than prerendered
 - `vite.config.ts` — wires the parent package's playground vite plugin
+- `src/routes/theme-gallery/+page.svelte` — theme identity page (`?theme=&scheme=`); `e2e/theme-gallery.spec.ts` holds its visual baselines
 - `e2e/shared-playground.spec.ts` — asserts the host boots and that no page or
   console errors surface from any discovered playground entry
 
@@ -28,6 +29,25 @@ pnpm --dir packages/smrt-playground/host build
 pnpm --dir packages/smrt-playground/host test:e2e
 ```
 
+## Theme gallery and visual baselines
+
+`/theme-gallery?theme=<preset>&scheme=light|dark` composes one screen (app shell with nav, account
+menu and a dock tool, a form card, data table with a selected row, tabs, chips, badges, four alerts,
+an open menu, a toast, heading stack and tabular figures) so every preset is reviewed on the same
+content. `e2e/theme-gallery.spec.ts` screenshots five presets x light/dark at 1280 px plus five
+phone (375 px, dark) variants and compares them (`maxDiffPixelRatio` 0.01).
+
+Update baselines after an intentional visual change:
+
+```bash
+pnpm --filter smrt-playground-host test:e2e:update-snapshots
+```
+
+Baselines in `e2e/theme-gallery.spec.ts-snapshots/` are Chromium on macOS (`*-darwin.png`). CI runs
+on Linux, where text rendering differs, so the spec only asserts the page renders there and skips
+pixel comparison when `process.platform !== 'darwin'`. Set `THEME_GALLERY_SHOTS_DIR` to also write
+readable `<preset>-<scheme>-<width>.png` copies.
+
 ## Gotchas
 
 - **Private and unpublished**: `private: true` at version `0.0.0`. It carries no

package/dist/svelte/PlaygroundHost.svelte

@@ -346,7 +346,7 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
   <div
     class="playground-shell"
     class:playground-shell--embedded={embedded}
-    data-hydrated={isHydrated ? 'true' : 'false'}
+    data-hydrated={isHydrated ? 'true' : 'false'} data-smrt-component="PlaygroundHost"
   >
     {#if !embedded}
     <aside class="catalog-nav">
@@ -533,6 +533,8 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   :global(body) {
     margin: 0;
     min-height: 100vh;
@@ -1079,4 +1081,5 @@ function selectEntry(entry: ResolvedSmrtPlaygroundEntry) {
       animation: none;
     }
   }
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-playground",
-  "version": "0.55.16",
+  "version": "0.55.18",
   "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.16",
+    "@happyvertical/smrt-ui": "0.55.18",
     "fast-glob": "3.3.3",
     "tsx": "^4.23.13"
   },