feat(widget): the surface-raised theme token, and room in the single-file budget

.changeset/theme-token-surface-raised.md

@@ -0,0 +1,5 @@
+---
+'@chatcops/widget': patch
+---
+
+`theme.tokens` takes `surface-raised`, the background of the header menu.

.size-limit.json

@@ -26,7 +26,7 @@
   {
     "name": "widget, single file (chatcops.full.min.js)",
     "path": "packages/widget/dist/chatcops.full.min.js",
-    "limit": "22 KB",
+    "limit": "23 KB",
     "gzip": true
   },
   {

CONTRIBUTING.md

@@ -210,7 +210,7 @@ ANTHROPIC_API_KEY=sk-... npx tsx src/examples/express-server.ts
 
 `npx` downloads `tsx` the first time.
 
-The widget has a size budget, gzipped: 5 kB for the script tag loader (`dist/chatcops.min.js`), 19 kB for the chat panel it loads when the chat opens (`dist/chatcops.panel.js`), 2 kB for the pre-chat form chunk, 22 kB for the single-file build (`dist/chatcops.full.min.js`) and 32 kB for the unminified ESM build. CI checks them with `pnpm size` after a build (limits in `.size-limit.json`). To save bytes, the minifier renames the private class members listed in `packages/widget/mangle.ts`. A name can go on that list only if the code touches it through `this` and nowhere else, which `tests/mangle.test.ts` checks. A config field, a request body key or a DOM property renamed there would break only the CDN build.
+The widget has a size budget, gzipped: 5 kB for the script tag loader (`dist/chatcops.min.js`), 19 kB for the chat panel it loads when the chat opens (`dist/chatcops.panel.js`), 2 kB for the pre-chat form chunk, 23 kB for the single-file build (`dist/chatcops.full.min.js`) and 32 kB for the unminified ESM build. CI checks them with `pnpm size` after a build (limits in `.size-limit.json`). To save bytes, the minifier renames the private class members listed in `packages/widget/mangle.ts`. A name can go on that list only if the code touches it through `this` and nowhere else, which `tests/mangle.test.ts` checks. A config field, a request body key or a DOM property renamed there would break only the CDN build.
 
 ### Browser tests
 

api/widget.api.md

@@ -257,6 +257,7 @@ declare const TOKEN_NAMES: readonly [
     "text",
     "bg",
     "bg-surface",
+    "surface-raised",
     "bg-input",
     "border",
     "text-secondary",

packages/widget/src/theme.ts

@@ -8,6 +8,7 @@ const TOKEN_NAMES = [
   'text',
   'bg',
   'bg-surface',
+  'surface-raised',
   'bg-input',
   'border',
   'text-secondary',

website/src/content/docs/widget/theming.mdx

@@ -56,6 +56,7 @@ Use `theme.tokens` to set any widget CSS token from JavaScript. Token names omit
 | `text-secondary` | Secondary and subdued text | `#5b616e` | `#a0a0a0` |
 | `bg` | Main widget background | `#ffffff` | `#0a0a0a` |
 | `bg-surface` | Raised surfaces, such as bot messages and header | `#f4f5f7` | `#1a1a1a` |
+| `surface-raised` | Menus above the panel, such as the header menu | `#ffffff` | `#1e1e1e` |
 | `bg-input` | Input backgrounds | `#ffffff` | `#2a2a2a` |
 | `border` | Widget and input borders | `#d9dce1` | `#333333` |
 | `danger` | Error and destructive states | `#c62828` | `#ef4444` |