pmx-canvas 0.4.0 → 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
@@ -1139,6 +1164,20 @@ function handleFrameDocument(pathname: string): Response {
   });
 }
 
+// Tiny always-200 document the client loads in a hidden iframe at boot to learn
+// whether this embedding context loads iframes from src URLs at all — nested
+// iframe hosts like the Amp orb portal block them, and the client then falls
+// back to fetch() + srcdoc surfaces (see src/client/state/iframe-mode.ts).
+function handleIframeProbe(): Response {
+  return new Response('<!doctype html><title>pmx-canvas iframe probe</title>', {
+    headers: {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': 'no-store',
+      'Content-Security-Policy': 'sandbox allow-scripts',
+    },
+  });
+}
+
 // ── Ext-app recovery diagnostics (0.3.2 report Finding N) ──────
 //
 // The WebKit black-tile recovery trail is otherwise trapped inside host panels
@@ -1248,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);
   }
@@ -1344,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.
@@ -3011,10 +3059,19 @@ export function startCanvasServer(options: CanvasServerOptions = {}): string | n
             return handleCreateFrameDocument(req);
           }
 
-          if (url.pathname.startsWith('/api/canvas/frame-documents/') && req.method === 'GET') {
+          // HEAD lets clients revalidate a minted frame URL after reconnect
+          // (Finding S) without downloading the whole document.
+          if (
+            url.pathname.startsWith('/api/canvas/frame-documents/') &&
+            (req.method === 'GET' || req.method === 'HEAD')
+          ) {
             return handleFrameDocument(url.pathname);
           }
 
+          if (url.pathname === '/api/canvas/iframe-probe' && (req.method === 'GET' || req.method === 'HEAD')) {
+            return handleIframeProbe();
+          }
+
           if (url.pathname.startsWith('/api/canvas/surface/') && (req.method === 'GET' || req.method === 'HEAD')) {
             return handleNodeSurface(url.pathname, url);
           }

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;
+}