pmx-canvas 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to `pmx-canvas` are documented here. This project follows
 [Semantic Versioning](https://semver.org/).
 
+## [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 +2880,7 @@ 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.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/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 · charcoal + vivid warm orange) ─── */
+  --c-bg: #0E0E11;
+  --c-panel: #17181D;
+  --c-panel-soft: #121317;
+  --c-line: #2A2C34;
+  --c-text: #ECEDF0;
+  --c-text-soft: #C9CCD4;
+  --c-muted: #8E939F;
+  --c-dim: #5F646E;
+  --c-accent: #FF5C2E;
+  --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: #121317;
+  --c-dot-grid: rgba(255, 92, 46, 0.08);
+  --c-panel-overlay: rgba(14, 14, 17, 0.6);
+  --c-panel-glass: rgba(23, 24, 29, 0.92);
+  --c-shadow: rgba(0, 0, 0, 0.3);
+  --c-shadow-heavy: rgba(0, 0, 0, 0.5);
+  --c-glow-accent: rgba(255, 92, 46, 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(255, 92, 46, 0.08);
+  --c-accent-10: rgba(255, 92, 46, 0.1);
+  --c-accent-12: rgba(255, 92, 46, 0.12);
+  --c-accent-15: rgba(255, 92, 46, 0.15);
+  --c-accent-25: rgba(255, 92, 46, 0.25);
+  --c-accent-30: rgba(255, 92, 46, 0.3);
+  --c-accent-40: rgba(255, 92, 46, 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(42, 44, 52, 0.3);
+  --c-contrast-fg: #0E0E11;
+  --c-accent-hover: #FF7A52;
+  --c-warn-hover: #F7C868;
+  --c-canvas-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
+  --c-annotation: #F2F2F4;
+}
+
+: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;
@@ -669,6 +944,7 @@ body,
 }
 
 .toolbar-group {
+  position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -681,6 +957,127 @@ body,
   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 {
+    display: contents;
+  }
+}
+
 @media (max-width: 900px) {
   .toolbar-tooltip {
     min-width: 150px;