stainless-code · SutuSebastian · Jul 18, 2026 · Jul 18, 2026 · Jul 18, 2026 · Jul 18, 2026
diff --git a/.agents/lessons.md b/.agents/lessons.md
@@ -19,7 +19,6 @@ alwaysApply: true
 
 - npm trusted publishing (OIDC) needs npm ≥ 11.5.1 + Node ≥ 22.14; oven-sh/setup-bun leaves npm 10.x in PATH, so a release job running `changeset publish`/`npm publish` must also run actions/setup-node (Node 24 → npm 11) or OIDC isn't detected → ENEEDAUTH.
 - Don't pin a GitHub action to a moving major tag's commit SHA (e.g. setup-node@<v6-tag-commit>) — the tag moves and orphans/GCs the commit → "unable to find version"; pin to an immutable release-tag commit or use the moving @vN tag.
-- Subagent model choice: use `composer-2.5-fast` for fast implementation, `glm-5.2-high` for deeper exploration/design/debate; mix or run both for hard findings.
 - Format `apps/docs` non-content files at `printWidth: 80` — oxfmt uses **nearest-config-wins per file**, so the nested `apps/docs/.oxfmtrc.json` (ignore-only → default printWidth 100) shadows root `.oxfmtrc.json` (80) for every `apps/docs/*` file regardless of CLI scope; fix by adding `"printWidth": 80` to `apps/docs/.oxfmtrc.json` (or `-c .oxfmtrc.json --disable-nested-config`). `content/**` stays excluded by the nested ignore so writes won't collapse `:::note` callouts.
 - The layers repo has tracked `.oxlintrc.json` + root `.oxfmtrc.json` (since the initial commit) with real plugins/rules/ignorePatterns (`.oxlintrc.json` ignores `**/*.svelte` and `**/*.vue`); merge additions into them — never overwrite/replace. Verify tracked lint/format configs via `git ls-files '*.oxlintrc*' '*oxfmt*'` before touching (3 tracked today: `.oxlintrc.json`, `.oxfmtrc.json`, `apps/docs/.oxfmtrc.json`); the "no oxlint config" explore report was wrong.
 - A blume version bump needs `rm -rf .blume .blume-verify` (or a dev-server restart) before trusting build/preview output — `blume build --isolated` always regenerates the runtime, but incremental `writeIfChanged` skips, `ensureDepsLink` no-ops, `blume preview` serving an existing build, and `.blume/.astro` caches can persist stale output and silently mask new markdown/transformer features (e.g. 1.0.4 `blume:table-wrap`), reading as a false upstream regression.

diff --git a/.changeset/devtools-brand-polish.md b/.changeset/devtools-brand-polish.md
@@ -0,0 +1,6 @@
+---
+"@stainless-code/layers-devtools": patch
+"@stainless-code/react-layers-devtools": patch
+---
+
+Polish Layers DevTools panel branding (docs-aligned tokens/logo, TanStack UI primitives) and follow the host theme; React doorbell defaults to OS `prefers-color-scheme` when the host omits `theme`. Plugin label is "Layers".
diff --git a/apps/devtools-playground/README.md b/apps/devtools-playground/README.md
@@ -0,0 +1,18 @@
+# Layers DevTools Playground
+
+Private local app (not published). Demo + visual harness for `@stainless-code/react-layers` and the Layers DevTools plugin.
+
+## Run
+
+Build workspace packages first, then:
+
+```bash
+bun run playground:dev
+```
+
+→ http://localhost:5177 — TanStack DevTools → **Layers**. Theme via host Settings.
+
+```bash
+bun run playground:build
+bun run playground:preview
+```
diff --git a/apps/devtools-playground/index.html b/apps/devtools-playground/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Layers DevTools Playground</title>
+    <link rel="preconnect" href="https://fonts.bunny.net" />
+    <link
+      href="https://fonts.bunny.net/css?family=inter:400,500,600,700|inter-tight:500,600,700|ibm-plex-mono:400,500"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/devtools-playground/package.json b/apps/devtools-playground/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@stainless-code/layers-devtools-playground",
+  "private": true,
+  "description": "Local Vite playground for Layers + TanStack DevTools demos and UI polish.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "typecheck": "bun run --filter '@stainless-code/layers' --filter '@stainless-code/react-layers' --filter '@stainless-code/react-layers-devtools' build && tsc -b --noEmit"
+  },
+  "dependencies": {
+    "@stainless-code/react-layers": "workspace:*",
+    "@stainless-code/react-layers-devtools": "workspace:*",
+    "@tanstack/react-devtools": "0.10.8",
+    "react": "19.2.7",
+    "react-dom": "19.2.7"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "4.3.3",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "6.0.3",
+    "tailwindcss": "4.3.3",
+    "typescript": "6.0.3",
+    "vite": "8.1.5"
+  }
+}
diff --git a/apps/devtools-playground/src/App.tsx b/apps/devtools-playground/src/App.tsx
@@ -0,0 +1,24 @@
+import { StackOutlet, StackProvider } from "@stainless-code/react-layers";
+import { layersDevtoolsPlugin } from "@stainless-code/react-layers-devtools";
+import { TanStackDevtools } from "@tanstack/react-devtools";
+
+import { layerClient, MODAL_STACK, TOAST_STACK, WIZARD_STACK } from "./client";
+import { DemoPage } from "./DemoPage";
+
+export function App() {
+  return (
+    <StackProvider client={layerClient}>
+      <DemoPage />
+
+      <StackOutlet stack={MODAL_STACK} />
+      <StackOutlet stack={WIZARD_STACK} />
+      <div className="pointer-events-none fixed right-4 top-4 z-[8000] flex max-w-[360px] flex-col gap-2">
+        <StackOutlet stack={TOAST_STACK} />
+      </div>
+
+      {import.meta.env.DEV ? (
+        <TanStackDevtools plugins={[layersDevtoolsPlugin()]} />
+      ) : null}
+    </StackProvider>
+  );
+}