pmx-canvas 0.4.1 → 0.4.3

package/.github/extensions/pmx-canvas/extension.mjs

@@ -252,7 +252,10 @@ function escapeHtml(value) {
 
 function renderShell(instanceId, entry) {
     const status = entry.pmx?.ok ? "Connected" : "Not connected";
-    const frameSrc = entry.pmx?.baseUrl ? `${entry.pmx.baseUrl}/workbench` : "about:blank";
+    // theme=light is a client-local session default matching the Copilot app's
+    // light chrome — it never changes the server-global theme other clients
+    // see, and the in-panel theme picker still overrides it.
+    const frameSrc = entry.pmx?.baseUrl ? `${entry.pmx.baseUrl}/workbench?theme=light` : "about:blank";
     const error = entry.pmx?.error ? `<p class="error">${escapeHtml(entry.pmx.error)}</p>` : "";
     return `<!doctype html>
 <html>
@@ -731,7 +734,7 @@ const pmxCanvas = createCanvas({
             return {
                 title: "PMX Canvas",
                 status: "Connected",
-                url: `${pmx.baseUrl}/workbench`,
+                url: `${pmx.baseUrl}/workbench?theme=light`,
             };
         }
 

package/CHANGELOG.md

@@ -3,6 +3,65 @@
 All notable changes to `pmx-canvas` are documented here. This project follows
 [Semantic Versioning](https://semver.org/).
 
+## [0.4.3] - 2026-08-05
+
+### Added
+
+- Host-default theming: open the workbench with `?theme=<name>` (or
+  `?theme=auto` to follow the host's light/dark appearance) and that panel
+  gets its own session-local theme without changing the server-global theme
+  other clients see. Picking a theme from the toolbar ends the override. The
+  bundled GitHub Copilot extension now opens its panel with `?theme=light`.
+
+### Changed
+
+- The `ember` theme was retuned to its intended look: neutral charcoal
+  surfaces, warm off-white text, and a vivid orange-red accent.
+
+### Fixed
+
+- The theme picker and More menus now open anchored to their buttons instead
+  of at the toolbar's right edge (0.4.2 report Finding T).
+- `POST /api/canvas/theme` now rejects unknown theme names with a 400 error
+  instead of silently keeping the previous theme.
+- An app node whose live session errors after a stressed reconnect (0.4.2
+  report Finding U, e.g. "MCP error -32001") now shows a soft
+  degraded-interactivity notice over its still-rendered saved content instead
+  of a red error banner.
+- Graph, json-render, and app nodes no longer stay blank after a refresh in
+  srcdoc mode until scrolled or expanded — inline documents now load eagerly
+  (lazy loading only applies in `src` mode, where it defers a real HTTP
+  request).
+- The npm package's `test` scripts now explain that the test suite is not
+  shipped instead of failing with a confusing "no test files" error.
+
+## [0.4.2] - 2026-08-04
+
+### Added
+
+- Five new themes — `midnight`, `sepia`, `arctic`, `ember`, and `forest` —
+  alongside `dark`, `light`, and `high-contrast`, selectable from a new theme
+  picker in the toolbar, via `--theme=...`, or `PMX_CANVAS_THEME`.
+- The toolbar now collapses on narrow screens and mobile into a single compact
+  bar with a "⋯" menu holding every secondary action as labeled touch-friendly
+  rows, replacing the wrapped two-bar layout.
+- Amp orbs are auto-detected: when the server runs with `AMP_ORB` set, the
+  embedded canvas skips the (there-unreliable) iframe probe and uses `srcdoc`
+  mode directly.
+
+### Changed
+
+- Refreshed the bundled skill's accuracy: tool tables verified against the
+  live 22-tool MCP surface, stale composite counts corrected, and the browser
+  guidance now documents the toolbar theme picker and the narrow-screen More
+  menu.
+
+### Fixed
+
+- HTML surfaces now inline their theme stylesheet instead of linking it, so
+  srcdoc-rendered surfaces in nested-iframe hosts render styled instead of
+  blank (dark-on-dark).
+
 ## [0.4.1] - 2026-08-04
 
 ### Added
@@ -2853,6 +2912,8 @@ otherwise have to discover by trial and error.
 - Regression coverage for snapshot flat-`id` aliases on both MCP and
   HTTP surfaces, plus async / top-level-`await` WebView script bodies.
 
+[0.4.3]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.4.3
+[0.4.2]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.4.2
 [0.4.1]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.4.1
 [0.4.0]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.4.0
 [0.3.4]: https://github.com/pskoett/pmx-canvas/releases/tag/v0.3.4

package/Readme.md

@@ -130,7 +130,8 @@ surfaces (the core never imports a host SDK).
 
 - **GitHub Copilot app** — a committed project canvas extension
   (`.github/extensions/pmx-canvas/`) opens the live PMX workbench in a native
-  Copilot panel, injects pinned/focused AX context on prompt submission, and
+  Copilot panel (light-themed by default to match the app, via the `?theme=`
+  session override), injects pinned/focused AX context on prompt submission, and
   exposes actions for focus, session steering, work items, approval gates,
   review annotations, the AX timeline, and host-capability reporting. Install it
   into any repo with `pmx-canvas copilot install-extension` (`--dry-run` to
@@ -142,17 +143,25 @@ surfaces (the core never imports a host SDK).
   (MCP + in-app Browser) are exactly what the canvas requires.
 - **Claude Code desktop app** — the workbench runs in the desktop app's
   built-in browser pane alongside the PMX MCP server, same zero-adapter recipe
-  as Codex: open `http://localhost:4313/workbench` in the app's browser and the
-  live board, pins, and Ghost Cursor all work in-panel.
-- **Amp orb portals** (and other buffering proxies / nested-iframe embeds) —
-  the canvas detects when the live event stream is being buffered by the proxy
-  and automatically switches to a polling transport, so the board boots and
-  stays live through the portal with no proxy shims
-  (`/workbench?transport=poll` forces it). It also detects when the nested
-  iframe embed blocks `src`-URL iframes entirely and renders HTML, graph,
-  json-render, and app surfaces inline via `srcdoc` instead
-  (`?iframe-mode=srcdoc` forces it), so iframe-backed nodes work in the portal
-  too.
+  as Codex: open `http://localhost:4313/workbench?theme=light` (or
+  `?theme=auto` to follow the app's appearance) in the app's browser and the
+  live board, pins, and Ghost Cursor all work in-panel — themed to match the
+  pane without changing what other clients see.
+- **AMPCode orbs + portal** — run the canvas as an orb service and view the
+  live workbench through the Amp portal (the `*.onamp.dev` URL ampcode.com
+  embeds for the thread). Zero configuration: orbs set `AMP_ORB` in the
+  service environment, and the canvas auto-adapts to the portal's constraints
+  — it switches to a polling transport when the portal proxy buffers the live
+  event stream, and renders HTML, graph, json-render, and app surfaces inline
+  via `srcdoc` because the nested-iframe embed blocks `src`-URL child iframes
+  (`/workbench?transport=poll` and `?iframe-mode=srcdoc` force either behavior
+  when diagnosing). The same detection helps other buffering proxies and
+  nested-iframe embeds.
+  <!-- screenshot: docs/screenshots/amp-orb-portal.png — PMX Canvas live inside the Amp portal (to be added) -->
+
+Any other app browser (the ChatGPT desktop app, an IDE webview, …) works the
+same zero-adapter way: open the workbench URL, and add `?theme=<name|auto>` to
+give that panel its own session-local default theme.
 
 The contract is host-agnostic, so a new host plugs in the same way: map its
 hooks, canvas, and session APIs onto PMX's AX primitives — no core changes.
@@ -239,6 +248,19 @@ Agents read pinned/focused context from `canvas://ax-context` /
 [`codex-app-adapter.md`](skills/pmx-canvas/references/codex-app-adapter.md) for
 the full workflow and live-test checklist.
 
+### Use inside AMPCode orbs and the Amp portal
+
+Amp needs no adapter either. Run `pmx-canvas` as an orb service (the orb sets
+`AMP_ORB` in the environment automatically) and open the workbench through the
+thread's portal URL. The canvas detects the orb and the portal's nested-iframe
+embed on its own: live updates arrive over the proxy-safe polling transport,
+and iframe-backed nodes (HTML, graph, json-render, web artifacts) render
+inline via `srcdoc` with their theme styling included. Cross-origin hosted
+apps (e.g. the hosted Excalidraw MCP app) cannot be inlined and may stay
+blocked by the portal embed — everything served from the canvas itself works.
+Debug overrides: `/workbench?transport=poll|sse` and
+`?iframe-mode=srcdoc|src`.
+
 ### Install the agent skill (recommended)
 
 The fastest way to get a working canvas is to install the `pmx-canvas` agent

package/dist/canvas/global.css

@@ -171,6 +171,281 @@
   --c-annotation: #ffff00;
 }
 
+:root[data-theme="midnight"] {
+  /* ── Core palette (midnight · deep indigo night) ─────────── */
+  --c-bg: #0A0D1C;
+  --c-panel: #12172E;
+  --c-panel-soft: #0D1224;
+  --c-line: #232B4A;
+  --c-text: #E6E9F7;
+  --c-text-soft: #C6CCE8;
+  --c-muted: #8D96BC;
+  --c-dim: #5B6383;
+  --c-accent: #8B96FF;
+  --c-ok: #34D399;
+  --c-warn: #F5C452;
+  --c-warn-alt: #FFB300;
+  --c-danger: #FF6B8A;
+  --c-purple: #B388FF;
+  --c-thinking: #B388FF;
+  --c-subagent: #22D3EE;
+  --c-input-bg: #0D1224;
+  --c-dot-grid: rgba(139, 150, 255, 0.08);
+  --c-panel-overlay: rgba(10, 13, 28, 0.6);
+  --c-panel-glass: rgba(18, 23, 46, 0.92);
+  --c-shadow: rgba(0, 0, 0, 0.3);
+  --c-shadow-heavy: rgba(0, 0, 0, 0.5);
+  --c-glow-accent: rgba(139, 150, 255, 0.15);
+  --c-surface-hover: rgba(255, 255, 255, 0.06);
+  --c-surface-subtle: rgba(255, 255, 255, 0.03);
+  --c-surface-th: rgba(255, 255, 255, 0.04);
+  --c-accent-8: rgba(139, 150, 255, 0.08);
+  --c-accent-10: rgba(139, 150, 255, 0.1);
+  --c-accent-12: rgba(139, 150, 255, 0.12);
+  --c-accent-15: rgba(139, 150, 255, 0.15);
+  --c-accent-25: rgba(139, 150, 255, 0.25);
+  --c-accent-30: rgba(139, 150, 255, 0.3);
+  --c-accent-40: rgba(139, 150, 255, 0.4);
+  --c-ok-10: rgba(52, 211, 153, 0.1);
+  --c-ok-12: rgba(52, 211, 153, 0.12);
+  --c-ok-20: rgba(52, 211, 153, 0.2);
+  --c-ok-25: rgba(52, 211, 153, 0.25);
+  --c-warn-10: rgba(245, 196, 82, 0.1);
+  --c-warn-12: rgba(245, 196, 82, 0.12);
+  --c-warn-15: rgba(245, 196, 82, 0.15);
+  --c-warn-20: rgba(245, 196, 82, 0.2);
+  --c-warn-22: rgba(245, 196, 82, 0.22);
+  --c-warn-30: rgba(245, 196, 82, 0.3);
+  --c-warn-60: rgba(245, 196, 82, 0.6);
+  --c-danger-12: rgba(255, 107, 138, 0.12);
+  --c-line-30: rgba(35, 43, 74, 0.3);
+  --c-contrast-fg: #0A0D1C;
+  --c-accent-hover: #A3ACFF;
+  --c-warn-hover: #F7D06E;
+  --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
+  --c-annotation: #EDEDF7;
+}
+
+:root[data-theme="sepia"] {
+  /* ── Core palette (sepia · warm amber paper) ─────────────── */
+  --c-bg: #F2E7D5;
+  --c-panel: #EBDCC2;
+  --c-panel-soft: #E8D8BC;
+  --c-line: #D3C1A0;
+  --c-text: #2E2416;
+  --c-text-soft: #554833;
+  --c-muted: #77664C;
+  --c-dim: #978870;
+  --c-accent: #B4632C;
+  --c-ok: #3E7D4F;
+  --c-warn: #A97B1E;
+  --c-warn-alt: #8F6A0D;
+  --c-danger: #B3402E;
+  --c-purple: #8456B0;
+  --c-thinking: #8456B0;
+  --c-subagent: #0E7C7B;
+  --c-input-bg: #F7EEDD;
+  --c-dot-grid: rgba(46, 36, 22, 0.08);
+  --c-panel-overlay: rgba(242, 231, 213, 0.88);
+  --c-panel-glass: rgba(235, 220, 194, 0.88);
+  --c-shadow: rgba(46, 36, 22, 0.08);
+  --c-shadow-heavy: rgba(46, 36, 22, 0.16);
+  --c-glow-accent: rgba(180, 99, 44, 0.12);
+  --c-surface-hover: rgba(46, 36, 22, 0.06);
+  --c-surface-subtle: rgba(46, 36, 22, 0.03);
+  --c-surface-th: rgba(46, 36, 22, 0.04);
+  --c-accent-8: rgba(180, 99, 44, 0.08);
+  --c-accent-10: rgba(180, 99, 44, 0.1);
+  --c-accent-12: rgba(180, 99, 44, 0.12);
+  --c-accent-15: rgba(180, 99, 44, 0.15);
+  --c-accent-25: rgba(180, 99, 44, 0.25);
+  --c-accent-30: rgba(180, 99, 44, 0.3);
+  --c-accent-40: rgba(180, 99, 44, 0.4);
+  --c-ok-10: rgba(62, 125, 79, 0.1);
+  --c-ok-12: rgba(62, 125, 79, 0.12);
+  --c-ok-20: rgba(62, 125, 79, 0.2);
+  --c-ok-25: rgba(62, 125, 79, 0.25);
+  --c-warn-10: rgba(169, 123, 30, 0.1);
+  --c-warn-12: rgba(169, 123, 30, 0.12);
+  --c-warn-15: rgba(169, 123, 30, 0.15);
+  --c-warn-20: rgba(169, 123, 30, 0.2);
+  --c-warn-22: rgba(169, 123, 30, 0.22);
+  --c-warn-30: rgba(169, 123, 30, 0.3);
+  --c-warn-60: rgba(169, 123, 30, 0.6);
+  --c-danger-12: rgba(179, 64, 46, 0.12);
+  --c-line-30: rgba(211, 193, 160, 0.5);
+  --c-contrast-fg: #F2E7D5;
+  --c-accent-hover: #C4763F;
+  --c-warn-hover: #BD9037;
+  --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(46, 36, 22, 0.02));
+  --c-annotation: #2E2416;
+}
+
+:root[data-theme="arctic"] {
+  /* ── Core palette (arctic · cool slate + ice) ────────────── */
+  --c-bg: #20242E;
+  --c-panel: #2A2F3C;
+  --c-panel-soft: #242936;
+  --c-line: #3A4152;
+  --c-text: #E9EDF4;
+  --c-text-soft: #CBD3E1;
+  --c-muted: #939DB1;
+  --c-dim: #667082;
+  --c-accent: #7FC8DE;
+  --c-ok: #74C596;
+  --c-warn: #E8C476;
+  --c-warn-alt: #E0A93F;
+  --c-danger: #D9707C;
+  --c-purple: #B48EAD;
+  --c-thinking: #B48EAD;
+  --c-subagent: #6FD6C4;
+  --c-input-bg: #242936;
+  --c-dot-grid: rgba(127, 200, 222, 0.08);
+  --c-panel-overlay: rgba(32, 36, 46, 0.6);
+  --c-panel-glass: rgba(42, 47, 60, 0.92);
+  --c-shadow: rgba(0, 0, 0, 0.3);
+  --c-shadow-heavy: rgba(0, 0, 0, 0.5);
+  --c-glow-accent: rgba(127, 200, 222, 0.15);
+  --c-surface-hover: rgba(255, 255, 255, 0.06);
+  --c-surface-subtle: rgba(255, 255, 255, 0.03);
+  --c-surface-th: rgba(255, 255, 255, 0.04);
+  --c-accent-8: rgba(127, 200, 222, 0.08);
+  --c-accent-10: rgba(127, 200, 222, 0.1);
+  --c-accent-12: rgba(127, 200, 222, 0.12);
+  --c-accent-15: rgba(127, 200, 222, 0.15);
+  --c-accent-25: rgba(127, 200, 222, 0.25);
+  --c-accent-30: rgba(127, 200, 222, 0.3);
+  --c-accent-40: rgba(127, 200, 222, 0.4);
+  --c-ok-10: rgba(116, 197, 150, 0.1);
+  --c-ok-12: rgba(116, 197, 150, 0.12);
+  --c-ok-20: rgba(116, 197, 150, 0.2);
+  --c-ok-25: rgba(116, 197, 150, 0.25);
+  --c-warn-10: rgba(232, 196, 118, 0.1);
+  --c-warn-12: rgba(232, 196, 118, 0.12);
+  --c-warn-15: rgba(232, 196, 118, 0.15);
+  --c-warn-20: rgba(232, 196, 118, 0.2);
+  --c-warn-22: rgba(232, 196, 118, 0.22);
+  --c-warn-30: rgba(232, 196, 118, 0.3);
+  --c-warn-60: rgba(232, 196, 118, 0.6);
+  --c-danger-12: rgba(217, 112, 124, 0.12);
+  --c-line-30: rgba(58, 65, 82, 0.3);
+  --c-contrast-fg: #20242E;
+  --c-accent-hover: #9AD5E7;
+  --c-warn-hover: #EDD194;
+  --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
+  --c-annotation: #ECEFF4;
+}
+
+:root[data-theme="ember"] {
+  /* ── Core palette (ember · neutral charcoal + vivid orange-red) ─── */
+  --c-bg: #0B0B0C;
+  --c-panel: #161618;
+  --c-panel-soft: #101012;
+  --c-line: #29292C;
+  --c-text: #EDEBE6;
+  --c-text-soft: #CBC9C2;
+  --c-muted: #96948D;
+  --c-dim: #66655F;
+  --c-accent: #F34E1C;
+  --c-ok: #4CC38A;
+  --c-warn: #F5B944;
+  --c-warn-alt: #FFB300;
+  --c-danger: #F0566A;
+  --c-purple: #A78BFA;
+  --c-thinking: #A78BFA;
+  --c-subagent: #38BDF8;
+  --c-input-bg: #101012;
+  --c-dot-grid: rgba(243, 78, 28, 0.08);
+  --c-panel-overlay: rgba(11, 11, 12, 0.6);
+  --c-panel-glass: rgba(22, 22, 24, 0.92);
+  --c-shadow: rgba(0, 0, 0, 0.3);
+  --c-shadow-heavy: rgba(0, 0, 0, 0.5);
+  --c-glow-accent: rgba(243, 78, 28, 0.15);
+  --c-surface-hover: rgba(255, 255, 255, 0.06);
+  --c-surface-subtle: rgba(255, 255, 255, 0.03);
+  --c-surface-th: rgba(255, 255, 255, 0.04);
+  --c-accent-8: rgba(243, 78, 28, 0.08);
+  --c-accent-10: rgba(243, 78, 28, 0.1);
+  --c-accent-12: rgba(243, 78, 28, 0.12);
+  --c-accent-15: rgba(243, 78, 28, 0.15);
+  --c-accent-25: rgba(243, 78, 28, 0.25);
+  --c-accent-30: rgba(243, 78, 28, 0.3);
+  --c-accent-40: rgba(243, 78, 28, 0.4);
+  --c-ok-10: rgba(76, 195, 138, 0.1);
+  --c-ok-12: rgba(76, 195, 138, 0.12);
+  --c-ok-20: rgba(76, 195, 138, 0.2);
+  --c-ok-25: rgba(76, 195, 138, 0.25);
+  --c-warn-10: rgba(245, 185, 68, 0.1);
+  --c-warn-12: rgba(245, 185, 68, 0.12);
+  --c-warn-15: rgba(245, 185, 68, 0.15);
+  --c-warn-20: rgba(245, 185, 68, 0.2);
+  --c-warn-22: rgba(245, 185, 68, 0.22);
+  --c-warn-30: rgba(245, 185, 68, 0.3);
+  --c-warn-60: rgba(245, 185, 68, 0.6);
+  --c-danger-12: rgba(240, 86, 106, 0.12);
+  --c-line-30: rgba(41, 41, 44, 0.3);
+  --c-contrast-fg: #0B0B0C;
+  --c-accent-hover: #FF6B3A;
+  --c-warn-hover: #F7C868;
+  --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
+  --c-annotation: #F2F0EB;
+}
+
+:root[data-theme="forest"] {
+  /* ── Core palette (forest · deep green) ──────────────────── */
+  --c-bg: #0C1712;
+  --c-panel: #14231B;
+  --c-panel-soft: #101D16;
+  --c-line: #26402F;
+  --c-text: #E4EFE7;
+  --c-text-soft: #C4D6CA;
+  --c-muted: #8BA695;
+  --c-dim: #5D7566;
+  --c-accent: #5CCF8F;
+  --c-ok: #74D99F;
+  --c-warn: #E0B84F;
+  --c-warn-alt: #D9A421;
+  --c-danger: #E57373;
+  --c-purple: #A88FE0;
+  --c-thinking: #A88FE0;
+  --c-subagent: #4FD8CE;
+  --c-input-bg: #101D16;
+  --c-dot-grid: rgba(92, 207, 143, 0.08);
+  --c-panel-overlay: rgba(12, 23, 18, 0.6);
+  --c-panel-glass: rgba(20, 35, 27, 0.92);
+  --c-shadow: rgba(0, 0, 0, 0.3);
+  --c-shadow-heavy: rgba(0, 0, 0, 0.5);
+  --c-glow-accent: rgba(92, 207, 143, 0.15);
+  --c-surface-hover: rgba(255, 255, 255, 0.06);
+  --c-surface-subtle: rgba(255, 255, 255, 0.03);
+  --c-surface-th: rgba(255, 255, 255, 0.04);
+  --c-accent-8: rgba(92, 207, 143, 0.08);
+  --c-accent-10: rgba(92, 207, 143, 0.1);
+  --c-accent-12: rgba(92, 207, 143, 0.12);
+  --c-accent-15: rgba(92, 207, 143, 0.15);
+  --c-accent-25: rgba(92, 207, 143, 0.25);
+  --c-accent-30: rgba(92, 207, 143, 0.3);
+  --c-accent-40: rgba(92, 207, 143, 0.4);
+  --c-ok-10: rgba(116, 217, 159, 0.1);
+  --c-ok-12: rgba(116, 217, 159, 0.12);
+  --c-ok-20: rgba(116, 217, 159, 0.2);
+  --c-ok-25: rgba(116, 217, 159, 0.25);
+  --c-warn-10: rgba(224, 184, 79, 0.1);
+  --c-warn-12: rgba(224, 184, 79, 0.12);
+  --c-warn-15: rgba(224, 184, 79, 0.15);
+  --c-warn-20: rgba(224, 184, 79, 0.2);
+  --c-warn-22: rgba(224, 184, 79, 0.22);
+  --c-warn-30: rgba(224, 184, 79, 0.3);
+  --c-warn-60: rgba(224, 184, 79, 0.6);
+  --c-danger-12: rgba(229, 115, 115, 0.12);
+  --c-line-30: rgba(38, 64, 47, 0.3);
+  --c-contrast-fg: #0C1712;
+  --c-accent-hover: #7BDAA4;
+  --c-warn-hover: #E8C871;
+  --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
+  --c-annotation: #EDF5EF;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -677,10 +952,141 @@ body,
   max-width: 100%;
 }
 
+/* Positioning parent for a toolbar popover menu. Every menu MUST live inside
+   one of these wrapped around its trigger — anchoring to a wider ancestor
+   opens the menu far from the button (0.4.2 report Finding T). */
+.toolbar-menu-anchor {
+  position: relative;
+  display: inline-flex;
+}
+
 .canvas-toolbar button svg {
   display: block;
 }
 
+/* ── Toolbar popover menus (theme picker + narrow-screen More menu) ── */
+.toolbar-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 1200;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 224px;
+  max-height: min(70vh, 560px);
+  overflow-y: auto;
+  padding: 6px;
+  background: var(--c-panel-glass);
+  backdrop-filter: blur(12px);
+  border: 1px solid var(--c-line);
+  border-radius: var(--radius);
+  box-shadow: 0 18px 48px var(--c-shadow-heavy);
+}
+
+.toolbar-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 12px;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--c-text-soft);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.toolbar-menu-item:hover {
+  background: var(--c-surface-hover);
+  color: var(--c-text);
+  border-color: var(--c-line);
+}
+
+.toolbar-menu-item.active {
+  color: var(--c-accent);
+}
+
+.toolbar-menu-item svg {
+  flex-shrink: 0;
+}
+
+.toolbar-menu-check {
+  margin-left: auto;
+  color: var(--c-accent);
+}
+
+.toolbar-menu-separator {
+  height: 1px;
+  margin: 4px 8px;
+  background: var(--c-line);
+  flex-shrink: 0;
+}
+
+.toolbar-menu-heading {
+  padding: 6px 12px 2px;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-dim);
+}
+
+.theme-swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--c-line);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.theme-swatch-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
+
+.toolbar-more-glyph {
+  display: block;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+/* Wide screens: the full two-bar toolbar; the More trigger stays hidden. */
+.toolbar-collapsible {
+  display: contents;
+}
+
+.toolbar-more {
+  display: none;
+}
+
+/* Narrow screens / embedded panels: ONE compact bar (brand, status, view
+   controls) — every secondary control folds into the More menu instead of
+   wrapping into a second toolbar row. */
+@media (max-width: 900px) {
+  .toolbar-collapsible {
+    display: none;
+  }
+
+  .toolbar-actions-bar {
+    display: none;
+  }
+
+  .toolbar-more {
+    /* inline-flex (NOT contents): this span is also the positioning anchor
+       for the More menu — display:contents cannot anchor absolute children. */
+    display: inline-flex;
+  }
+}
+
 @media (max-width: 900px) {
   .toolbar-tooltip {
     min-width: 150px;