pmx-canvas 0.4.1 → 0.4.3

package/src/client/state/iframe-mode.ts

@@ -69,6 +69,17 @@ function isEmbeddedDocument(): boolean {
   }
 }
 
+/**
+ * Amp orb services run with AMP_ORB=1 and the server stamps that into the page
+ * as window.__PMX_AMP_ORB (see canvasSpaHtml). The orb portal's nested-iframe
+ * embed blocks src-URL child iframes, but the probe is unreliable there — a
+ * tiny probe iframe sometimes loads even though node-sized ones will not — so
+ * a known orb host must skip the probe and go straight to srcdoc.
+ */
+function isAmpOrbHost(): boolean {
+  return (window as Window & { __PMX_AMP_ORB?: unknown }).__PMX_AMP_ORB === true;
+}
+
 /**
  * Resolve the boot-wide iframe mode once; all surface hooks share the result.
  * The blocked-src condition only exists when the canvas page itself runs
@@ -76,7 +87,7 @@ function isEmbeddedDocument(): boolean {
  * normal path pays zero probe latency before surfaces mount. Only embedded
  * documents run the probe (`embedded` is overridable for tests).
  */
-export function resolveIframeMode(opts: { embedded?: boolean } = {}): Promise<IframeMode> {
+export function resolveIframeMode(opts: { embedded?: boolean; ampOrb?: boolean } = {}): Promise<IframeMode> {
   if (iframeMode.value) return Promise.resolve(iframeMode.value);
   if (pending) return pending;
   const forced = forcedIframeMode();
@@ -88,6 +99,10 @@ export function resolveIframeMode(opts: { embedded?: boolean } = {}): Promise<If
     iframeMode.value = 'src';
     return Promise.resolve('src');
   }
+  if (opts.ampOrb ?? isAmpOrbHost()) {
+    iframeMode.value = 'srcdoc';
+    return Promise.resolve('srcdoc');
+  }
   pending = probeSrcIframes().then((srcWorks) => {
     const mode: IframeMode = srcWorks ? 'src' : 'srcdoc';
     iframeMode.value = mode;

package/src/client/state/sse-bridge.ts

@@ -26,11 +26,13 @@ import {
   workbenchConnectionEpoch,
 } from './canvas-store';
 import { fetchAxSurfaceState } from './intent-bridge';
+import { initSessionThemeOverride, themeOverrideActive } from './theme-override';
 import { DEFAULT_POSITIONS, makeNodeState } from './node-factory';
 import { invalidateTokenCache } from '../theme/tokens';
 import { resetAttentionBridge, syncAttentionFromSse } from './attention-bridge';
 import { dissolveIntent, resetIntents, settleIntent, upsertIntent } from './intent-store';
 import type { PmxAxIntent } from '../../shared/ax-intent.js';
+import { isCanvasTheme } from '../../shared/themes.js';
 
 let eventSource: EventSource | null = null;
 let savedLayout: Map<string, Partial<CanvasNodeState>> | null = null;
@@ -275,8 +277,10 @@ function ensureLedgerNode(summary: Record<string, unknown>): void {
 }
 
 function applyCanvasTheme(theme: string): void {
-  const valid = theme === 'dark' || theme === 'light' || theme === 'high-contrast';
-  if (!valid) return;
+  // Registry-driven: this is the ONLY path a server-side theme reaches the
+  // browser (connected snapshot + theme-changed events) — a hardcoded subset
+  // here silently drops themes on reload and breaks cross-tab sync.
+  if (!isCanvasTheme(theme)) return;
   document.documentElement.setAttribute('data-theme', theme);
   invalidateTokenCache();
   if (canvasTheme.value !== theme) canvasTheme.value = theme;
@@ -396,7 +400,9 @@ function handleConnected(data: Record<string, unknown>): void {
   connectionStatus.value = 'connected';
   // Reconnect marker for holders of server-minted URLs (Finding S).
   workbenchConnectionEpoch.value += 1;
-  if (typeof data.theme === 'string') {
+  // A ?theme= session override (host-default theming) wins over the
+  // server-global theme for THIS client only.
+  if (typeof data.theme === 'string' && !themeOverrideActive()) {
     applyCanvasTheme(data.theme);
   }
   if (data.ledgerSummary) {
@@ -887,7 +893,7 @@ function handleTraceState(data: Record<string, unknown>): void {
 }
 
 function handleThemeChanged(data: Record<string, unknown>): void {
-  if (typeof data.theme === 'string') {
+  if (typeof data.theme === 'string' && !themeOverrideActive()) {
     applyCanvasTheme(data.theme);
   }
 }
@@ -1079,6 +1085,9 @@ function startPollingTransport(): () => void {
 }
 
 export function connectSSE(): () => void {
+  // Host-default theming: a ?theme= param applies before the first server
+  // frame so an embedding host panel never flashes the server-global theme.
+  initSessionThemeOverride(applyCanvasTheme);
   savedLayout = restoreLayout();
   ensureStatusNode();
   hasInitialServerLayout.value = false;

package/src/client/state/theme-override.ts

@@ -0,0 +1,83 @@
+/**
+ * Per-session theme override — host-default theming.
+ *
+ * Hosts that embed the workbench (the GitHub Copilot panel, the Claude Code
+ * desktop browser pane, ChatGPT-style app browsers, …) can open it with
+ * `?theme=<name>` or `?theme=auto` to give THEIR panel a fitting default
+ * without touching the server-global theme every other client sees. The
+ * override is client-local: server theme frames are ignored while it is
+ * active, and it ends the moment the user explicitly picks a theme from the
+ * picker (which then applies + saves globally as usual).
+ *
+ * `theme=auto` follows the host's prefers-color-scheme live, mapping to the
+ * built-in light/dark themes — so a light-mode host panel gets a light canvas
+ * by default and flips with the host appearance.
+ */
+import { type CanvasThemeName, isCanvasTheme } from '../../shared/themes.js';
+
+let active = false;
+// Latched when the user explicitly ends the override: the URL param survives
+// reconnects (connectSSE re-inits on every transport drop), but the user's
+// choice must stick for the page lifetime — only a reload re-activates.
+let userEnded = false;
+let schemeQuery: MediaQueryList | null = null;
+let schemeListener: (() => void) | null = null;
+
+export function themeOverrideActive(): boolean {
+  return active;
+}
+
+/** Test-only: reset the module state, including the page-lifetime latch. */
+export function resetThemeOverrideForTests(): void {
+  active = false;
+  userEnded = false;
+  detachSchemeListener();
+}
+
+/** The user picked a theme explicitly — the session override ends for good. */
+export function clearThemeOverride(): void {
+  active = false;
+  userEnded = true;
+  detachSchemeListener();
+}
+
+function detachSchemeListener(): void {
+  if (schemeQuery && schemeListener) {
+    schemeQuery.removeEventListener('change', schemeListener);
+  }
+  schemeQuery = null;
+  schemeListener = null;
+}
+
+export function sessionThemeParam(): CanvasThemeName | 'auto' | null {
+  // DOM-less callers (server-side rendering of the module graph, unit tests
+  // that import the sse-bridge without a DOM) have no override.
+  if (typeof window === 'undefined' || !window.location) return null;
+  const value = new URLSearchParams(window.location.search).get('theme');
+  if (value === 'auto') return 'auto';
+  return isCanvasTheme(value) ? value : null;
+}
+
+/**
+ * Activate the override from the URL (no-op without a valid `?theme=`).
+ * `apply` is the canvas theme applier (client-side only — never saved).
+ */
+export function initSessionThemeOverride(apply: (theme: CanvasThemeName) => void): void {
+  if (userEnded) return;
+  const param = sessionThemeParam();
+  if (!param) return;
+  // Re-init happens on every reconnect — replace any prior listener instead
+  // of accumulating one per reconnect cycle.
+  detachSchemeListener();
+  active = true;
+  if (param !== 'auto') {
+    apply(param);
+    return;
+  }
+  schemeQuery = window.matchMedia('(prefers-color-scheme: light)');
+  schemeListener = () => {
+    if (active && schemeQuery) apply(schemeQuery.matches ? 'light' : 'dark');
+  };
+  schemeListener();
+  schemeQuery.addEventListener('change', schemeListener);
+}

package/src/client/theme/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;