@1agh/maude 0.29.0 → 0.30.0

package/apps/studio/dom-selection.ts

@@ -175,6 +175,120 @@ export function resolveSelectionEl(
   return null;
 }
 
+/**
+ * Phase 12.2 — style maps for the CSS-knob properties. `authored` is what the
+ * element sets INLINE (React renders `style={{padding:8}}` → `style="padding:8px"`),
+ * so the knob pre-fills the EDITABLE source value and is blank when unset — not
+ * the noisy resolved default (`656.003px`, `rgb(0,0,0)`). `computed` is the
+ * resolved value, shown only as a faint placeholder hint. Empty for a detached
+ * node / SSR.
+ */
+// Phase 12.3 (W2.2 fix) — EVERY property the CSS panel has a control for, so each
+// reads back into `authored` (pre-fills the right control) and is excluded from
+// `customStyles`. The earlier short list omitted the box-model LONGHANDS
+// (`padding-top`, `margin-left`, …) + the Layout/border longhands, so a value the
+// panel wrote (e.g. an alt-scrub `padding-top`) fell through to customStyles and
+// the box-model widget showed it as a "custom CSS property" instead of in the box.
+const KNOB_PROPS = [
+  // Layout
+  'display',
+  'flex-direction',
+  'align-items',
+  'justify-content',
+  'gap',
+  // Typography
+  'font-family',
+  'color',
+  'font-size',
+  'font-weight',
+  'line-height',
+  'letter-spacing',
+  'text-align',
+  // Spacing — shorthand (for customStyles exclusion + whole-side authoring) AND
+  // the 8 longhands the box-model widget actually reads/writes.
+  'margin',
+  'margin-top',
+  'margin-right',
+  'margin-bottom',
+  'margin-left',
+  'padding',
+  'padding-top',
+  'padding-right',
+  'padding-bottom',
+  'padding-left',
+  // Size
+  'width',
+  'height',
+  'max-width',
+  // Appearance
+  'background-color',
+  'border-radius',
+  'border-top-left-radius',
+  'border-top-right-radius',
+  'border-bottom-left-radius',
+  'border-bottom-right-radius',
+  'border-width',
+  'border-style',
+  'border-color',
+  'box-shadow',
+  'opacity',
+] as const;
+
+// Phase 12.3 — HTML attributes the custom-attribute hatch may have written, so a
+// just-added `data-*`/`aria-*`/`role`/`title` round-trips back into a panel row.
+// Excludes the structural ones the panel manages elsewhere (style, class,
+// data-cd-id pipeline anchor, the data-dc-* canvas chrome markers).
+const ATTR_SKIP = /^(style|class|data-cd-id|data-dc-|data-dcid$)/;
+
+function styleMapsFor(el: Element | null): {
+  authored: Record<string, string>;
+  computed: Record<string, string>;
+  customStyles: Record<string, string>;
+  attrs: Record<string, string>;
+} {
+  if (!el || typeof window === 'undefined' || !window.getComputedStyle) {
+    return { authored: {}, computed: {}, customStyles: {}, attrs: {} };
+  }
+  try {
+    const inline = (el as HTMLElement).style;
+    const cs = window.getComputedStyle(el as HTMLElement);
+    const authored: Record<string, string> = {};
+    const computed: Record<string, string> = {};
+    const knob = new Set<string>(KNOB_PROPS as readonly string[]);
+    // Curated knob props: authored value (knob pre-fill) + computed (placeholder).
+    for (const p of KNOB_PROPS) {
+      const a = inline.getPropertyValue(p);
+      if (a) authored[p] = a.trim();
+      const c = cs.getPropertyValue(p);
+      if (c) computed[p] = c.trim();
+    }
+    // Every OTHER authored inline property → customStyles, so the panel can show
+    // a custom CSS property the user added that no curated row covers. EXCLUDE
+    // the panel-managed FAMILIES wholesale: setting `border`/`border-radius` (or
+    // their 3-way shorthands) makes the CSSOM expand them to the per-side
+    // longhands — `border-top-width`, `border-left-color`, … — which the panel
+    // controls but can't enumerate in the knob set. Without the family guard they
+    // leak into "custom CSS properties" (the same class of bug fixed for spacing).
+    const MANAGED_FAMILY = /^(margin|padding|border)(-|$)/;
+    const customStyles: Record<string, string> = {};
+    for (let i = 0; i < inline.length; i++) {
+      const p = inline.item(i);
+      if (!p || knob.has(p) || MANAGED_FAMILY.test(p)) continue;
+      const v = inline.getPropertyValue(p);
+      if (v) customStyles[p] = v.trim();
+    }
+    // Custom HTML attributes (the escape-hatch surface).
+    const attrs: Record<string, string> = {};
+    for (const a of Array.from((el as HTMLElement).attributes)) {
+      if (ATTR_SKIP.test(a.name)) continue;
+      attrs[a.name] = a.value;
+    }
+    return { authored, computed, customStyles, attrs };
+  } catch {
+    return { authored: {}, computed: {}, customStyles: {}, attrs: {} };
+  }
+}
+
 export function hoverTargetToSelection(target: HoverTarget, file?: string): Selection {
   const el = target.el;
   const rect =
@@ -223,5 +337,6 @@ export function hoverTargetToSelection(target: HoverTarget, file?: string): Sele
         }
       : null,
     html: el ? (el.outerHTML ?? '').slice(0, 4000) : '',
+    ...styleMapsFor(el),
   };
 }

package/apps/studio/export-dialog.tsx

@@ -321,6 +321,7 @@ export function ExportDialogProvider({ children }: { children: ReactNode }): Rea
   }, [openState, loadHistory]);
 
   // ⌘E / Ctrl+E to open; ⌘⇧E / Ctrl+Shift+E to re-run last.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-bind on `open` only — rerunLast is stable per render; re-running on it would tear down the global hotkey listener needlessly.
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
       const mod = e.metaKey || e.ctrlKey;
@@ -331,7 +332,6 @@ export function ExportDialogProvider({ children }: { children: ReactNode }): Rea
     }
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
   // Phase 6.5 T9 — context-menu entries dispatch `maude:open-export` so they
@@ -559,8 +559,8 @@ const DialogShell = (() => {
           <div className="dc-ed-recent">
             <h3>Recent</h3>
             <ul>
-              {history.slice(0, 5).map((h, i) => (
-                <li key={`${h.at}-${i}`}>
+              {history.slice(0, 5).map((h) => (
+                <li key={`${h.at}-${h.filename}`}>
                   <button
                     type="button"
                     onClick={() => {

package/apps/studio/history.ts

@@ -5,6 +5,7 @@
 // from the WS layer and from a future server-driven auto-snapshot hook.
 
 import type { Dirent } from 'node:fs';
+import { existsSync } from 'node:fs';
 import { readdir } from 'node:fs/promises';
 import path from 'node:path';
 
@@ -37,10 +38,14 @@ function fileSlug(file: string, designRel: string): string {
   }
   const prefix = `${designRel.replace(/^\/+|\/+$/g, '')}/`;
   if (p.startsWith(prefix)) p = p.slice(prefix.length);
+  // Extension strip mirrors bin/slug.sh (the canonical `_history/<slug>/`
+  // recipe) — previously only `.html` was stripped, so `.tsx` canvases got a
+  // `ui-foo.tsx` history dir that /design:rollback (slug.sh: `ui-foo`) could
+  // never find. DDR-102 conflict snapshots rely on the dirs matching.
   return p
     .replace(/\//g, '-')
     .replace(/\s+/g, '_')
-    .replace(/\.html$/i, '')
+    .replace(/\.(tsx|jsx|html?|css|json|md)$/i, '')
     .replace(/^\.+/, '')
     .toLowerCase();
 }
@@ -60,8 +65,20 @@ export function createHistory(ctx: Context): History {
 
   async function writeSnapshot(file: string, contentBytes: Uint8Array | string, reason: string) {
     const slug = fileSlug(file, ctx.paths.designRel);
-    const ts = new Date().toISOString();
-    const contentPath = snapshotPath(slug, ts);
+    // Snapshot blob keeps the source file's extension (a `.tsx` body snapshot
+    // is a `.tsx` blob); unknown/absent extension falls back to `.html`.
+    const extMatch = /\.(tsx|jsx|html?|css|json|svg|md)$/i.exec(file);
+    const ext = extMatch ? extMatch[0].toLowerCase() : '.html';
+    // Two snapshots can land within the same millisecond (the DDR-102 dual
+    // pre-sync pair does) — toISOString() would collide and the second blob
+    // would overwrite the first. Bump by 1 ms until the slot is free.
+    let tsMs = Date.now();
+    let ts = new Date(tsMs).toISOString();
+    while (existsSync(snapshotPath(slug, ts, ext)) || existsSync(metaPath(slug, ts))) {
+      tsMs += 1;
+      ts = new Date(tsMs).toISOString();
+    }
+    const contentPath = snapshotPath(slug, ts, ext);
     const meta: Snapshot = {
       slug,
       ts,

package/apps/studio/http.ts

@@ -19,7 +19,7 @@ import type { ActiveJsonShape } from './exporters/scope.ts';
 import type { Inspect } from './inspect.ts';
 import { canvasSlug, writeLocator } from './locator.ts';
 import { DEV_SERVER_ROOT } from './paths.ts';
-import { getRuntimeBundle, packageForSlug, RUNTIME_PACKAGES, slugFor } from './runtime-bundle.ts';
+import { getRuntimeBundle, packageForSlug } from './runtime-bundle.ts';
 import { loadWhatsNew } from './whats-new.ts';
 
 // Real disk install root — never the virtual `/$bunfs/root` of compiled bins.
@@ -81,10 +81,11 @@ function ext(p: string): string {
  *
  * `frame-ancestors` (A6) — restricts who may embed the canvas document. The
  * legit embedder is the main dev-server origin, so we allowlist exactly that
- * (`mainOrigin`) plus `'self'`; an arbitrary external page can no longer reframe
- * the canvas. When `mainOrigin` is unknown (tests / pre-boot) the directive is
- * OMITTED rather than set to `'self'` — `'self'` alone would forbid the legit
- * cross-origin embed and blank the canvas.
+ * (`mainOrigin` — a space-separated source list; server.ts advertises both
+ * loopback spellings, `localhost` + `127.0.0.1`) plus `'self'`; an arbitrary
+ * external page can no longer reframe the canvas. When `mainOrigin` is unknown
+ * (tests / pre-boot) the directive is OMITTED rather than set to `'self'` —
+ * `'self'` alone would forbid the legit cross-origin embed and blank the canvas.
  */
 export function cspForCanvasShell(html: string, mainOrigin?: string): string {
   const hashes: string[] = [];
@@ -115,6 +116,34 @@ export function cspForCanvasShell(html: string, mainOrigin?: string): string {
   return directives.join('; ');
 }
 
+/**
+ * CSRF guard for the main-origin source-write routes (edit-css / edit-text /
+ * edit-attr). Those routes are reachable only from the shell, which is
+ * same-origin — but `readJson` enforces no `Content-Type`, so a cross-site page
+ * could otherwise forge a `text/plain` CORS *simple-request* POST to
+ * `http://localhost:<port>/_api/edit-*` (no preflight) and drive a write into
+ * the user's source `.tsx`. The browser stamps every cross-origin POST with an
+ * unspoofable `Origin` header, so we reject any request whose Origin is PRESENT
+ * and ≠ the server's own origin. A request with NO Origin (bun:test, curl,
+ * non-browser programmatic clients — none of which are the CSRF threat, which
+ * requires a browser executing attacker markup that always sends Origin on a
+ * cross-origin POST) is allowed through. This is layered on top of the DDR-054
+ * origin-split (which blocks the untrusted canvas *iframe*); it closes the
+ * *other* untrusted origin — a malicious top-level page in another tab.
+ * Deliberately NOT applied to `/_api/asset` (that route is canvas-origin
+ * reachable by design — drag-drop/paste upload runs inside the iframe). See
+ * DDR-105. Exported for unit testing (the decision is a pure function of `req`).
+ */
+export function sameOriginWrite(req: Request): boolean {
+  const origin = req.headers.get('origin');
+  if (!origin) return true; // non-browser / same-origin omitting Origin → allow
+  try {
+    return origin === new URL(req.url).origin;
+  } catch {
+    return false;
+  }
+}
+
 function safePathUnderRoot(reqUrl: string, repoRoot: string): string | null {
   let pathname: string;
   try {
@@ -639,6 +668,96 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       );
     },
 
+    '/_api/edit-css': async (req: Request) => {
+      // Phase 12 (DDR-103) — single-property inline CSS edit. POST body
+      // { canvas, id, property, value } → writes one key into the element's
+      // inline `style={{}}` object via api.editCss → editAttribute. MAIN ORIGIN
+      // ONLY: intentionally absent from CANVAS_SAFE_API + startCanvasServer's
+      // route allowlist (DDR-054) — the untrusted canvas iframe origin must never
+      // reach a source-write endpoint. The CSS-knob UI lives in the shell (main
+      // origin) and calls it directly.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        id?: unknown;
+        property?: unknown;
+        value?: unknown;
+        reset?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.editCss(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, delta: result.delta },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/edit-text': async (req: Request) => {
+      // Phase 12 (DDR-103) — inline element text-content edit. POST body
+      // { canvas, id, text } → overwrites the element's single JSXText child
+      // (JSX-escaped) via api.editText → editText. Same MAIN-ORIGIN-ONLY trust
+      // boundary as /_api/edit-css + /_api/canvas. The inline contenteditable
+      // editor reaches it via the dgn:* bus → shell relay (never the iframe).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      const body = await readJson<{ canvas?: unknown; id?: unknown; text?: unknown }>(
+        req,
+        16 * 1024
+      );
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.editText(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, delta: result.delta },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/edit-attr': async (req: Request) => {
+      // Phase 12.2 (DDR-104) — the CSS panel's "custom HTML attribute" escape
+      // hatch. POST body { canvas, id, attr, value } → writes a plain JSX
+      // attribute (data-*, aria-*, role, …) via api.editAttr → editAttribute's
+      // non-`style.` path. Same MAIN-ORIGIN-ONLY trust boundary as
+      // /_api/edit-css + /_api/edit-text (absent from CANVAS_SAFE_API +
+      // startCanvasServer's route map; the untrusted iframe can never reach it).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        id?: unknown;
+        attr?: unknown;
+        value?: unknown;
+        reset?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.editAttr(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, delta: result.delta },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
     '/_api/asset': async (req: Request) => {
       // Phase 23 — binary image upload from the canvas (drag-drop / paste / the
       // a11y file picker). POST raw image bytes → content-addressed write under

package/apps/studio/input-router.tsx

@@ -82,6 +82,8 @@ export type Tool =
   | 'arrow'
   | 'sticky'
   | 'text'
+  // FigJam v3 — labelled organizing container (Shift+S).
+  | 'section'
   | 'eraser';
 
 const ANNOTATION_TOOLS = new Set<Tool>([
@@ -93,6 +95,7 @@ const ANNOTATION_TOOLS = new Set<Tool>([
   'arrow',
   'sticky',
   'text',
+  'section',
   'eraser',
 ]);
 
@@ -183,6 +186,10 @@ export function classify(input: ClassifyInput): RouterAction {
     // yields when focus is inside the canvas iframe (app.jsx onKey bail).
     if (k === 'n') return { kind: 'tool', tool: 'sticky' };
     if (k === 't') return { kind: 'tool', tool: 'text' };
+    // FigJam v3 — Shift+S arms the Section tool (FigJam's own binding; bare S
+    // stays with the shell's Design-system view). Checked here because the
+    // modifier guard above only filters Cmd/Ctrl/Alt.
+    if (k === 's' && input.shiftKey) return { kind: 'tool', tool: 'section' };
     if (k === 'e') return { kind: 'tool', tool: 'eraser' };
     if (input.key === 'Escape') return { kind: 'escape' };
     return { kind: 'no-op' };

package/apps/studio/inspect.ts

@@ -1,7 +1,6 @@
 // Active-canvas state, selected-element tracking, and HTML injection
 // (inspector overlay + canvas runtime). See plan Task 7 + DDR-007.
 
-import path from 'node:path';
 import type { Context } from './context.ts';
 
 export interface SelectedElement {
@@ -356,16 +355,31 @@ const INSPECTOR_SCRIPT = `
     new MutationObserver(function(){ startTick(); }).observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ['style', 'class'], childList: true });
   }
 
-  // ⌘K / Ctrl+K command palette — keydown fired inside the canvas iframe never
-  // reaches the shell's window-scoped listener (iframe keyboard isolation), so
-  // the palette wouldn't open while focus is in the canvas. Forward the chord to
-  // the parent; the shell toggles the palette (mirrors its own handler, which
-  // fires "even in inputs"). Capture phase so canvas-lib's pan/zoom keydown
-  // handler can't swallow it first.
+  // Shell chords — keydown fired inside the canvas iframe never reaches the
+  // shell's window-scoped listener (iframe keyboard isolation), so each shell
+  // chord must be forwarded to the parent. preventDefault is load-bearing for
+  // ⌘R: without it the BROWSER reloads the whole shell while focus is in the
+  // canvas (the advertised behavior is "reload the active canvas"). Capture
+  // phase so canvas-lib's pan/zoom keydown handler can't swallow them first.
   document.addEventListener('keydown', function(e) {
-    if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
+    if (!(e.metaKey || e.ctrlKey)) return;
+    var k = (e.key || '').toLowerCase();
+    if (k === 'k' && !e.shiftKey) {
       e.preventDefault();
       try { window.parent.postMessage({ dgn: 'toggle-palette' }, '*'); } catch (err) {}
+      return;
+    }
+    if (k === 'r' && !e.shiftKey) {
+      e.preventDefault();
+      try { window.parent.postMessage({ dgn: 'shell-shortcut', id: 'reload' }, '*'); } catch (err) {}
+      return;
+    }
+    if (e.shiftKey) {
+      var id = k === 'i' ? 'inspector' : k === 'm' ? 'comments' : k === 'e' ? 'export' : k === 'h' ? 'handoff' : null;
+      if (id) {
+        e.preventDefault();
+        try { window.parent.postMessage({ dgn: 'shell-shortcut', id: id }, '*'); } catch (err) {}
+      }
     }
   }, true);
 
@@ -389,6 +403,21 @@ const INSPECTOR_SCRIPT = `
           if (t) t.scrollIntoView({ behavior: 'smooth', block: 'center' });
         } catch (e) {}
       }
+    } else if (m.dgn === 'theme') {
+      // Catch the chrome-theme seed the shell posts in reply to our 'loaded'
+      // ping (sent below). THIS listener registers during page-load — before
+      // the React canvas-shell mounts and adds its OWN 'dgn:theme' listener —
+      // so without this branch the shell's reply lands in the gap between
+      // page-load and React-mount and is dropped, leaving the canvas stuck on
+      // its hardcoded dark default until a manual theme toggle re-broadcasts
+      // it (the recurring "open a canvas under a light shell → canvas chrome is
+      // dark; toggle twice to fix; next canvas reverts" bug). We set the same
+      // attribute the canvas-shell chrome reads (data-maude-theme on <html>);
+      // canvas-shell's default-dark guard then sees the value already present
+      // and won't override it, and its own listener takes over live toggles.
+      if (m.theme === 'light' || m.theme === 'dark') {
+        try { document.documentElement.setAttribute('data-maude-theme', m.theme); } catch (e) {}
+      }
     }
     /* force-clear is now consumed by canvas-shell.tsx — the inspector
        overlay has no per-element selection state to clear anymore. */

package/apps/studio/participants-chrome.tsx

@@ -14,7 +14,7 @@
  * own avatar to release. tldraw-style.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { useViewportControllerContext } from './canvas-lib.tsx';
 import { type AgentPresence, useAgentPresence } from './use-agent-presence.tsx';
@@ -192,7 +192,6 @@ function Avatar({ peer, isFollowing, onToggleFollow }: AvatarProps): JSX.Element
           setOpen((v) => !v);
         }
       }}
-      // biome-ignore lint/a11y/useSemanticElements: 28px round chip needs raw <div> + inline bg + custom focus ring; <button> reset is more code than the rule saves.
       role="button"
       tabIndex={0}
       title={peer.name}
@@ -201,8 +200,6 @@ function Avatar({ peer, isFollowing, onToggleFollow }: AvatarProps): JSX.Element
     >
       {initialsFor(peer.name)}
       {open && (
-        // biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation wrapper; keyboard focus stays in the button child.
-        // biome-ignore lint/a11y/useSemanticElements: popover wrapper carries no semantic role; the inner <button> is the actionable element.
         <div className="dc-participant-popover" onClick={(e) => e.stopPropagation()}>
           <div className="dc-participant-popover__name">{peer.name}</div>
           <button
@@ -250,7 +247,6 @@ function AgentAvatar({ agent }: { agent: AgentPresence }): JSX.Element {
           setOpen((v) => !v);
         }
       }}
-      // biome-ignore lint/a11y/useSemanticElements: matches the peer Avatar chip pattern.
       role="button"
       tabIndex={0}
       title={`${agent.name} (AI agent)`}
@@ -262,8 +258,6 @@ function AgentAvatar({ agent }: { agent: AgentPresence }): JSX.Element {
         ✦
       </span>
       {open && (
-        // biome-ignore lint/a11y/useKeyWithClickEvents: stop-propagation wrapper; no actionable child.
-        // biome-ignore lint/a11y/useSemanticElements: popover wrapper carries no semantic role.
         <div className="dc-participant-popover" onClick={(e) => e.stopPropagation()}>
           <div className="dc-participant-popover__name">{agent.name}</div>
           <div className="dc-participant-popover__sub">AI agent · {agent.author}</div>

package/apps/studio/server.ts

@@ -294,8 +294,11 @@ let server: BunServer;
 
 // T2 (9.1-A) — advertise the main origin so the canvas origin's CSP can
 // allowlist it in `frame-ancestors` (the legit embedder). Must be set before
-// the canvas listener serves its first shell.
-ctx.mainOrigin = `http://localhost:${server.port}`;
+// the canvas listener serves its first shell. Both loopback host spellings are
+// listed: the server binds 127.0.0.1, so a user who opens the printed URL as
+// `127.0.0.1:<port>` is the same legit embedder — with only `localhost` allowed
+// the canvas iframe was silently refused (blank sad-page, no error anywhere).
+ctx.mainOrigin = `http://localhost:${server.port} http://127.0.0.1:${server.port}`;
 
 // T2 (9.1-A) — segregated canvas-content origin. ON BY DEFAULT (opt-OUT) since
 // phase-9.1: a second listener binds an OS-assigned free port, advertised as