pmx-canvas 0.4.1 → 0.4.2

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: '#0E0E11', swatchAccent: '#FF5C2E' },
+  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;
+}