pmx-canvas 0.4.1 → 0.4.3

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 · 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;
+
+  --color-bg: #0B0B0C;
+  --color-panel: #161618;
+  --color-surface: #101012;
+  --color-border: #29292C;
+  --color-text: #EDEBE6;
+  --color-text-primary: #EDEBE6;
+  --color-text-secondary: #CBC9C2;
+  --color-text-muted: #96948D;
+  --color-text-dim: #66655F;
+  --color-accent: #F34E1C;
+  --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

@@ -10,7 +10,8 @@ import { z } from 'zod';
 import { normalizeCanvasTheme } from '../../canvas-db.js';
 import { applyCanvasNodeUpdates } from '../../canvas-operations.js';
 import { canvasState } from '../../canvas-state.js';
-import { defineOperation, type Operation } from '../types.js';
+import { CANVAS_THEMES, isCanvasTheme } from '../../../shared/themes.js';
+import { defineOperation, OperationError, type Operation } from '../types.js';
 
 const emptyShape = {};
 const emptySchema = z.looseObject(emptyShape);
@@ -28,7 +29,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);
 
@@ -42,6 +48,13 @@ const themeSetOperation = defineOperation<z.infer<typeof themeSetSchema>, Record
     path: '/api/canvas/theme',
   },
   handler: (input, ctx) => {
+    // Reject unknown names instead of silently keeping the prior theme
+    // (0.4.2 report: the soft-accept made typos look like successes).
+    if (input.theme !== undefined && !isCanvasTheme(input.theme)) {
+      throw new OperationError(
+        `Unknown theme ${JSON.stringify(input.theme)}. Valid themes: ${CANVAS_THEMES.join(', ')}.`,
+      );
+    }
     const theme = normalizeCanvasTheme(input.theme, canvasState.theme);
     const next = canvasState.setTheme(theme);
     ctx.emit('theme-changed', { theme: next });

package/src/server/server.ts

@@ -60,6 +60,7 @@ import { buildAgentContextPreamble } from './agent-context.js';
 import { buildCanvasAxSurfaceSnapshot } from './ax-context.js';
 import { resolveNodeAxCapabilities } from './ax-interaction.js';
 import { normalizeCanvasTheme, type CanvasTheme } from './canvas-db.js';
+import { canvasThemeScheme, isCanvasTheme } from '../shared/themes.js';
 import { validateLocalImageFile } from './image-source.js';
 import {
   cancelCodeGraphRecompute,
@@ -984,6 +985,14 @@ function canvasSpaHtml(): string {
       }, 4000);
     })();
   </script>
+  ${
+    // Amp orb services run with AMP_ORB=1. The portal's nested-iframe embed
+    // blocks src-URL child iframes, and the runtime probe is unreliable there
+    // (a tiny probe iframe can load even though node-sized ones will not), so
+    // the client needs to KNOW it is in an orb and force srcdoc mode directly
+    // (see src/client/state/iframe-mode.ts).
+    process.env.AMP_ORB ? '<script>window.__PMX_AMP_ORB = true;</script>' : ''
+  }
   <script type="module" src="/canvas/index.js?v=${CANVAS_ASSET_VERSION}"></script>
 </body>
 </html>`;
@@ -1040,6 +1049,22 @@ function resolveCanvasBundleDir(): string {
   return fallback;
 }
 
+// Memoized surface-theme.css content for inlining into HTML surface documents
+// (srcdoc-rendered surfaces in nested-iframe hosts may fail to load the <link>
+// subresource, leaving them unstyled — dark-on-dark reads as blank). Read from
+// the same bundle root that serves /canvas/surface-theme.css; null keeps the
+// <link> fallback when the asset is missing (e.g. an unbuilt dev tree).
+let _surfaceThemeCss: string | null | undefined;
+function surfaceThemeCssInline(): string | null {
+  if (_surfaceThemeCss !== undefined) return _surfaceThemeCss;
+  try {
+    _surfaceThemeCss = readFileSync(resolve(resolveCanvasBundleDir(), 'surface-theme.css'), 'utf-8');
+  } catch {
+    _surfaceThemeCss = null;
+  }
+  return _surfaceThemeCss;
+}
+
 /**
  * Containment check for bundle-asset serving. Separator-agnostic: on Windows,
  * `resolve()` returns backslash paths, so comparing against a `${dir}/` template
@@ -1262,6 +1287,9 @@ function handleNodeSurface(pathname: string, url: URL): Response {
       ...(url.searchParams.get('frameToken')
         ? { contentHeightToken: url.searchParams.get('frameToken') as string }
         : {}),
+      // Inline the theme tokens so srcdoc-rendered surfaces (Amp orb portals)
+      // are styled without depending on the <link> subresource.
+      ...(surfaceThemeCssInline() ? { inlineThemeCss: surfaceThemeCssInline() as string } : {}),
     });
     return surfaceHtmlResponse(doc, HTML_SURFACE_SANDBOX);
   }
@@ -1358,8 +1386,14 @@ async function handleJsonRenderView(url: URL): Promise<Response> {
   );
 
   const themeValue = url.searchParams.get('theme');
+  // The viewer bundle themes dark/light/high-contrast directly; other named
+  // canvas themes (midnight, sepia, …) collapse to their dark/light scheme.
   const theme =
-    themeValue === 'dark' || themeValue === 'light' || themeValue === 'high-contrast' ? themeValue : undefined;
+    themeValue === 'dark' || themeValue === 'light' || themeValue === 'high-contrast'
+      ? themeValue
+      : isCanvasTheme(themeValue)
+        ? canvasThemeScheme(themeValue)
+        : undefined;
   const title = (node.data.title as string) || node.id;
   // Devtools panel is double-gated: the operator must opt in via the env flag
   // AND the request must carry ?devtools=1. Off by default in all normal runs.

package/src/shared/themes.ts

@@ -0,0 +1,58 @@
+/**
+ * Canonical canvas theme registry — single source of truth for every layer
+ * that validates, stores, or renders a theme name (client shell, HTML
+ * surfaces, json-render viewer, CLI/env plumbing, persistence).
+ *
+ * Adding a theme: add the name here, author its variable blocks in
+ * src/client/theme/global.css AND src/client/theme/surface-theme.css (guarded
+ * by tests/unit/surface-theme-tokens.test.ts), and give it meta below. The
+ * theme picker, server validation, and surface documents pick it up from this
+ * list.
+ */
+
+export const CANVAS_THEMES = [
+  'dark',
+  'light',
+  'high-contrast',
+  'midnight',
+  'sepia',
+  'arctic',
+  'ember',
+  'forest',
+] as const;
+
+export type CanvasThemeName = (typeof CANVAS_THEMES)[number];
+
+export function isCanvasTheme(value: unknown): value is CanvasThemeName {
+  return typeof value === 'string' && (CANVAS_THEMES as readonly string[]).includes(value);
+}
+
+export function normalizeCanvasThemeName(value: unknown, fallback: CanvasThemeName = 'dark'): CanvasThemeName {
+  return isCanvasTheme(value) ? value : fallback;
+}
+
+export interface CanvasThemeMeta {
+  /** Human label shown in the theme picker. */
+  label: string;
+  /** Whether embedded viewers that only know dark/light should treat it as light. */
+  scheme: 'dark' | 'light';
+  /** Picker swatch colors — MUST match --c-bg / --c-accent in global.css. */
+  swatchBg: string;
+  swatchAccent: string;
+}
+
+export const CANVAS_THEME_META: Record<CanvasThemeName, CanvasThemeMeta> = {
+  dark: { label: 'Dark', scheme: 'dark', swatchBg: '#081524', swatchAccent: '#4BBCFF' },
+  light: { label: 'Light', scheme: 'light', swatchBg: '#F4EFE6', swatchAccent: '#1A7ABF' },
+  'high-contrast': { label: 'High contrast', scheme: 'dark', swatchBg: '#000000', swatchAccent: '#00ffff' },
+  midnight: { label: 'Midnight', scheme: 'dark', swatchBg: '#0A0D1C', swatchAccent: '#8B96FF' },
+  sepia: { label: 'Sepia', scheme: 'light', swatchBg: '#F2E7D5', swatchAccent: '#B4632C' },
+  arctic: { label: 'Arctic', scheme: 'dark', swatchBg: '#20242E', swatchAccent: '#7FC8DE' },
+  ember: { label: 'Ember', scheme: 'dark', swatchBg: '#0B0B0C', swatchAccent: '#F34E1C' },
+  forest: { label: 'Forest', scheme: 'dark', swatchBg: '#0C1712', swatchAccent: '#5CCF8F' },
+};
+
+/** Collapse a theme to the dark/light scheme embedded dark|light-only viewers understand. */
+export function canvasThemeScheme(value: unknown): 'dark' | 'light' {
+  return CANVAS_THEME_META[normalizeCanvasThemeName(value)].scheme;
+}