pmx-canvas 0.4.1 → 0.4.2

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 · 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;

package/src/client/theme/surface-theme.css

@@ -121,6 +121,166 @@
   --color-danger: #ff0000;
 }
 
+: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;
+
+  --color-bg: #0A0D1C;
+  --color-panel: #12172E;
+  --color-surface: #0D1224;
+  --color-border: #232B4A;
+  --color-text: #E6E9F7;
+  --color-text-primary: #E6E9F7;
+  --color-text-secondary: #C6CCE8;
+  --color-text-muted: #8D96BC;
+  --color-text-dim: #5B6383;
+  --color-accent: #8B96FF;
+  --color-success: #34D399;
+  --color-warning: #F5C452;
+  --color-danger: #FF6B8A;
+}
+
+: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;
+
+  --color-bg: #F2E7D5;
+  --color-panel: #EBDCC2;
+  --color-surface: #E8D8BC;
+  --color-border: #D3C1A0;
+  --color-text: #2E2416;
+  --color-text-primary: #2E2416;
+  --color-text-secondary: #554833;
+  --color-text-muted: #77664C;
+  --color-text-dim: #978870;
+  --color-accent: #B4632C;
+  --color-success: #3E7D4F;
+  --color-warning: #A97B1E;
+  --color-danger: #B3402E;
+}
+
+: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;
+
+  --color-bg: #20242E;
+  --color-panel: #2A2F3C;
+  --color-surface: #242936;
+  --color-border: #3A4152;
+  --color-text: #E9EDF4;
+  --color-text-primary: #E9EDF4;
+  --color-text-secondary: #CBD3E1;
+  --color-text-muted: #939DB1;
+  --color-text-dim: #667082;
+  --color-accent: #7FC8DE;
+  --color-success: #74C596;
+  --color-warning: #E8C476;
+  --color-danger: #D9707C;
+}
+
+: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;
+
+  --color-bg: #0E0E11;
+  --color-panel: #17181D;
+  --color-surface: #121317;
+  --color-border: #2A2C34;
+  --color-text: #ECEDF0;
+  --color-text-primary: #ECEDF0;
+  --color-text-secondary: #C9CCD4;
+  --color-text-muted: #8E939F;
+  --color-text-dim: #5F646E;
+  --color-accent: #FF5C2E;
+  --color-success: #4CC38A;
+  --color-warning: #F5B944;
+  --color-danger: #F0566A;
+}
+
+: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;
+
+  --color-bg: #0C1712;
+  --color-panel: #14231B;
+  --color-surface: #101D16;
+  --color-border: #26402F;
+  --color-text: #E4EFE7;
+  --color-text-primary: #E4EFE7;
+  --color-text-secondary: #C4D6CA;
+  --color-text-muted: #8BA695;
+  --color-text-dim: #5D7566;
+  --color-accent: #5CCF8F;
+  --color-success: #74D99F;
+  --color-warning: #E0B84F;
+  --color-danger: #E57373;
+}
+
 html,
 body {
   margin: 0;

package/src/client/types.ts

@@ -1,3 +1,5 @@
+import type { CanvasThemeName } from '../shared/themes.js';
+
 export interface ViewportState {
   x: number;
   y: number;
@@ -108,7 +110,7 @@ export function isExcalidrawNode(node: CanvasNodeState): boolean {
 
 export interface CanvasLayout {
   viewport: ViewportState;
-  theme?: 'dark' | 'light' | 'high-contrast';
+  theme?: CanvasThemeName;
   nodes: CanvasNodeState[];
   edges: CanvasEdge[];
   annotations?: CanvasAnnotation[];

package/src/server/canvas-db.ts

@@ -9,6 +9,7 @@ import { Database } from 'bun:sqlite';
 import { existsSync, mkdirSync } from 'node:fs';
 import { dirname } from 'node:path';
 import { gzipSync, gunzipSync } from 'node:zlib';
+import { type CanvasThemeName, normalizeCanvasThemeName } from '../shared/themes.js';
 import type {
   CanvasAnnotation,
   CanvasEdge,
@@ -42,10 +43,10 @@ import {
 
 const SCHEMA_VERSION = 1;
 
-export type CanvasTheme = 'dark' | 'light' | 'high-contrast';
+export type CanvasTheme = CanvasThemeName;
 
 export function normalizeCanvasTheme(value: unknown, fallback: CanvasTheme = 'dark'): CanvasTheme {
-  return value === 'dark' || value === 'light' || value === 'high-contrast' ? value : fallback;
+  return normalizeCanvasThemeName(value, fallback);
 }
 
 const SCHEMA_SQL = `

package/src/server/html-surface.ts

@@ -21,8 +21,9 @@ import {
   HTML_SURFACE_PUSH_SOURCE,
 } from '../shared/ax-surface-protocol.js';
 import { contentHeightReporterTag } from '../shared/content-height-reporter.js';
+import { type CanvasThemeName, normalizeCanvasThemeName } from '../shared/themes.js';
 
-export type SurfaceTheme = 'dark' | 'light' | 'high-contrast';
+export type SurfaceTheme = CanvasThemeName;
 
 /** Path the surface document links for its theme tokens (served from dist/canvas). */
 export const SURFACE_THEME_STYLESHEET = '/canvas/surface-theme.css';
@@ -31,7 +32,7 @@ export const SURFACE_THEME_STYLESHEET = '/canvas/surface-theme.css';
 export const HTML_SURFACE_SANDBOX = 'allow-scripts';
 
 export function normalizeSurfaceTheme(value: string | null | undefined): SurfaceTheme {
-  return value === 'light' || value === 'high-contrast' ? value : 'dark';
+  return normalizeCanvasThemeName(value);
 }
 
 /**
@@ -235,6 +236,12 @@ export interface HtmlSurfaceOptions {
   axState?: unknown;
   /** Nonce for the content-height reporter (lets the node grow to fit content). */
   contentHeightToken?: string;
+  /**
+   * Contents of surface-theme.css to inline as a <style> instead of the
+   * same-origin <link> — required for srcdoc-rendered surfaces (nested-iframe
+   * hosts) where the stylesheet subresource may not load.
+   */
+  inlineThemeCss?: string;
 }
 
 /**
@@ -243,7 +250,14 @@ export interface HtmlSurfaceOptions {
  */
 export function buildHtmlSurfaceDocument(userHtml: string, options: HtmlSurfaceOptions): string {
   const themeToken = sanitizeToken(options.themeToken);
-  const link = `<link rel="stylesheet" href="${SURFACE_THEME_STYLESHEET}">`;
+  // Inline the theme tokens when the caller supplies the stylesheet content —
+  // in srcdoc-mode embeds (Amp orb portals) the surface document is rendered
+  // inline and a <link> subresource may not load, leaving the surface unstyled
+  // (dark-on-dark reads as blank). The <link> stays as the fallback for callers
+  // without the content.
+  const link = options.inlineThemeCss
+    ? `<style data-pmx-surface-theme>${options.inlineThemeCss.replace(/<\//g, '<\\/')}</style>`
+    : `<link rel="stylesheet" href="${SURFACE_THEME_STYLESHEET}">`;
   const themeBridge = buildThemeBridge(themeToken);
   const presentationBridge = options.presentation
     ? buildPresentationEscapeBridge(sanitizeToken(options.presentationExitToken))

package/src/server/operations/ops/canvas-wire.ts

@@ -28,7 +28,12 @@ const themeGetOperation = defineOperation<z.infer<typeof emptySchema>, Record<st
 });
 
 const themeSetShape = {
-  theme: z.unknown().optional().describe('Theme: dark, light, or high-contrast'),
+  theme: z
+    .unknown()
+    .optional()
+    .describe(
+      'Theme name from the canvas theme registry (e.g. dark, light, high-contrast, midnight, sepia, arctic, ember, forest)',
+    ),
 };
 const themeSetSchema = z.looseObject(themeSetShape);