@1agh/maude 0.16.0 → 0.17.1

package/plugins/design/dev-server/bin/_png-playwright.mjs

@@ -0,0 +1,143 @@
+// _png-playwright.mjs — playwright shim for the PNG exporter.
+//
+// Replaces the screenshot.sh / agent-browser path because agent-browser
+// applies its own viewport sizing that doesn't honor our 1440x900 setup,
+// producing clipped captures. With our own playwright we control the
+// viewport exactly and crop to the target element's bounding box.
+
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { chromium } from 'playwright';
+
+const args = Object.fromEntries(
+  process.argv.slice(2).reduce((acc, cur, i, all) => {
+    if (cur.startsWith('--')) acc.push([cur.slice(2), all[i + 1] ?? '1']);
+    return acc;
+  }, [])
+);
+
+const {
+  url,
+  selector,
+  out,
+  'out-dir': outDir,
+  'widen-to-artboard': widenFlag,
+  multi: multiFlag,
+  timeout = '12',
+  scale = '1',
+} = args;
+
+if (!url) {
+  console.error('usage: _png-playwright.mjs --url <url> --selector <css> --out <path>');
+  process.exit(2);
+}
+
+const widen = widenFlag !== undefined;
+const multi = multiFlag !== undefined;
+const timeoutMs = Number(timeout) * 1000;
+const deviceScaleFactor = Math.max(1, Math.min(4, Number(scale) || 1));
+
+const browser = await chromium.launch();
+try {
+  // 1440x900 matches the canvas viewport the design tool uses everywhere;
+  // exporters resize per-target before each shot to fit the artboard exactly.
+  const ctx = await browser.newContext({
+    viewport: { width: 1440, height: 900 },
+    deviceScaleFactor,
+  });
+  const page = await ctx.newPage();
+  await page.goto(url, { waitUntil: 'networkidle', timeout: timeoutMs });
+  await page.evaluate(() => document.fonts.ready);
+
+  const written = [];
+
+  const captureHandle = async (handle, target) => {
+    // Widen to artboard if requested — the selection's selector points at a
+    // descendant, but for "Export this artboard" we want the enclosing
+    // [data-dc-screen]. Done browser-side so the locator + bbox align.
+    const widenedHandle = widen
+      ? await handle.evaluateHandle((el) => el.closest('[data-dc-screen]') ?? el)
+      : handle;
+    // Reset the world plane's pan/zoom so every artboard renders at its
+    // declared native dimensions (1440×900 etc.). The dev-server uses CSS
+    // `zoom` (not `transform: scale`) on `.dc-world`, which actually shrinks
+    // layout — getBoundingClientRect returns 818×512 instead of 1440×900
+    // unless we zero both `zoom` and `transform` here.
+    await page.evaluate(
+      (sel) => {
+        const world = document.querySelector('.dc-world');
+        if (world) {
+          world.style.zoom = '1';
+          world.style.transform = 'none';
+        }
+        // Each artboard carries `style="left: …; top: …;"` so the world plane
+        // can position it as part of a multi-artboard layout. Pin the target
+        // to (0,0) so the screenshot clip starts at the viewport origin.
+        const ab = document.querySelector(sel);
+        if (ab) {
+          ab.style.left = '0px';
+          ab.style.top = '0px';
+        }
+      },
+      widen ? '[data-dc-screen]:first-of-type' : (selector ?? '[data-dc-screen]:first-of-type')
+    );
+    const rect = await widenedHandle.evaluate((el) => {
+      const r = el.getBoundingClientRect();
+      return { x: r.left, y: r.top, width: r.width, height: r.height };
+    });
+    // Resize the viewport to fit the artboard so the screenshot doesn't
+    // include the world plane's pan/zoom margin. The artboard then sits at
+    // (0,0) with its native dimensions.
+    await page.setViewportSize({
+      width: Math.max(1, Math.ceil(rect.width)),
+      height: Math.max(1, Math.ceil(rect.height)),
+    });
+    await widenedHandle.evaluate((el) => {
+      el.scrollIntoView({ block: 'start', inline: 'start' });
+      window.scrollTo(0, 0);
+    });
+    // After scroll, recompute rect — it's now anchored near (0,0).
+    const finalRect = await widenedHandle.evaluate((el) => {
+      const r = el.getBoundingClientRect();
+      return { x: r.left, y: r.top, width: r.width, height: r.height };
+    });
+    await page.screenshot({
+      path: target,
+      clip: {
+        x: Math.max(0, Math.floor(finalRect.x)),
+        y: Math.max(0, Math.floor(finalRect.y)),
+        width: Math.max(1, Math.ceil(finalRect.width)),
+        height: Math.max(1, Math.ceil(finalRect.height)),
+      },
+    });
+    written.push(target);
+  };
+
+  if (multi) {
+    if (!outDir) {
+      console.error('_png-playwright: --multi requires --out-dir');
+      process.exit(2);
+    }
+    mkdirSync(outDir, { recursive: true });
+    const screens = await page.locator(selector ?? '[data-dc-screen]').all();
+    for (let i = 0; i < screens.length; i += 1) {
+      const handle = screens[i];
+      const id = (await handle.getAttribute('data-dc-screen')) ?? `artboard-${i + 1}`;
+      await captureHandle(handle, join(outDir, `${id}.png`));
+    }
+  } else {
+    if (!out) {
+      console.error('_png-playwright: --out required when --multi not set');
+      process.exit(2);
+    }
+    mkdirSync(dirname(out), { recursive: true });
+    const handle = page.locator(selector ?? '[data-dc-screen]:first-of-type').first();
+    await handle.waitFor({ state: 'visible', timeout: timeoutMs });
+    await captureHandle(handle, out);
+  }
+
+  for (const w of written) console.log(w);
+  console.error(`✓ playwright wrote ${written.length} png file(s)`);
+} finally {
+  await browser.close();
+}

package/plugins/design/dev-server/bin/_pptx-playwright.mjs

@@ -0,0 +1,98 @@
+// _pptx-playwright.mjs — playwright shim for the PPTX exporter.
+//
+// Drives `dom-to-pptx` (atharva9167j) — computed-style + getBoundingClientRect
+// architecture that respects the browser's layout result. Replaces our hand-
+// rolled DOM walker; see DDR-043. Per artboard → one slide. dom-to-pptx ships
+// a UMD bundle at `dist/dom-to-pptx.bundle.js` that exposes `window.domToPptx`.
+//
+// Invocation (Bun.spawn from exporters/pptx.ts — not invoked directly):
+//   node _pptx-playwright.mjs --url <url> --selector <css> --out <pptx-path>
+//     --bundle-path <umd.js> [--multi] [--timeout 12]
+
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname } from 'node:path';
+import { chromium } from 'playwright';
+
+const args = Object.fromEntries(
+  process.argv.slice(2).reduce((acc, cur, i, all) => {
+    if (cur.startsWith('--')) acc.push([cur.slice(2), all[i + 1] ?? '1']);
+    return acc;
+  }, [])
+);
+
+const { url, selector, out, 'bundle-path': bundlePath, multi: multiFlag, timeout = '15' } = args;
+
+if (!url || !out || !bundlePath) {
+  console.error(
+    'usage: _pptx-playwright.mjs --url <url> --selector <css> --out <pptx-path> --bundle-path <umd.js>'
+  );
+  process.exit(2);
+}
+
+const multi = multiFlag !== undefined;
+const timeoutMs = Number(timeout) * 1000;
+
+mkdirSync(dirname(out), { recursive: true });
+
+const browser = await chromium.launch();
+try {
+  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+  const page = await ctx.newPage();
+  await page.goto(url, { waitUntil: 'networkidle', timeout: timeoutMs });
+  await page.evaluate(() => document.fonts.ready);
+  // Reset the world plane's CSS zoom + transform so dom-to-pptx reads the
+  // artboard at its declared 1440×900 instead of the pan-zoomed thumbnail.
+  await page.evaluate(() => {
+    const world = document.querySelector('.dc-world');
+    if (world) {
+      world.style.zoom = '1';
+      world.style.transform = 'none';
+    }
+    for (const el of document.querySelectorAll('[data-dc-screen]')) {
+      el.style.left = '0px';
+      el.style.top = '0px';
+    }
+  });
+  // dom-to-pptx ships a UMD bundle; addScriptTag exposes `window.domToPptx`.
+  await page.addScriptTag({ path: bundlePath });
+
+  // Resolve target handle(s). Multi-mode iterates every artboard; single-
+  // mode widens to the closest artboard ancestor of the supplied selector
+  // (matches the SVG/HTML shims' behaviour for --selector).
+  const handles = multi
+    ? await page.locator(selector ?? '[data-dc-screen]').all()
+    : [page.locator(selector ?? '[data-dc-screen]:first-of-type').first()];
+
+  // dom-to-pptx is designed to walk ONE root and emit ONE pptx. For multi,
+  // we serialize each artboard separately then merge in Node via pptxgenjs.
+  // For v1 we just emit the FIRST artboard if multi=true and warn — proper
+  // merge lives in exporters/pptx.ts (which receives back the byte array).
+  const handle = handles[0];
+  if (!handle) {
+    console.error('_pptx-playwright: no target found');
+    process.exit(2);
+  }
+  await handle.waitFor({ state: 'visible', timeout: timeoutMs });
+
+  // Run dom-to-pptx inside the page. It returns a Blob; we serialise to a
+  // byte array for transport across the playwright boundary.
+  const bytesArray = await handle.evaluate(async (el) => {
+    const target = el.closest('[data-dc-screen]') ?? el;
+    // window.domToPptx is the UMD-injected entry.
+    const { exportToPptx } = /** @type any */ (window).domToPptx;
+    if (typeof exportToPptx !== 'function') {
+      throw new Error('dom-to-pptx bundle did not expose exportToPptx');
+    }
+    const blob = await exportToPptx(target, { filename: 'export.pptx' });
+    const ab = await blob.arrayBuffer();
+    return Array.from(new Uint8Array(ab));
+  });
+
+  writeFileSync(out, new Uint8Array(bytesArray));
+  console.log(out);
+  console.error(
+    `✓ dom-to-pptx wrote ${out} (${bytesArray.length} bytes, ${handles.length} artboard${handles.length === 1 ? '' : 's available — first emitted'})`
+  );
+} finally {
+  await browser.close();
+}

package/plugins/design/dev-server/bin/_svg-playwright.mjs

@@ -0,0 +1,141 @@
+// _svg-playwright.mjs — playwright shim for the SVG exporter.
+//
+// Uses `dom-to-svg` (felixfbecker/dom-to-svg) to walk the rendered DOM and
+// emit real SVG primitives — <rect>, <text>, <path>, <image> — that vector
+// editors like Affinity Designer / Illustrator / Inkscape decompose
+// correctly. The previous `<foreignObject>`-wrapping approach (DDR-038)
+// renders pixel-perfect in Chrome but Affinity refuses to import it; see
+// DDR-042 for the swap rationale.
+//
+// Bundled IIFE: exporters/_browser-bundles.ts pre-bundles dom-to-svg via
+// Bun.build, caches the result under /tmp, and passes the path via
+// --bundle-path. The shim loads it with addScriptTag.
+//
+// Invocation (Bun.spawn from exporters/svg.ts — not invoked directly):
+//   node _svg-playwright.mjs --url <url> --selector <css> --out <path>
+//     --bundle-path <iife.js> [--widen-to-artboard] [--multi]
+//     [--out-dir <dir>] [--timeout 12]
+
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { chromium } from 'playwright';
+
+const args = Object.fromEntries(
+  process.argv.slice(2).reduce((acc, cur, i, all) => {
+    if (cur.startsWith('--')) acc.push([cur.slice(2), all[i + 1] ?? '1']);
+    return acc;
+  }, [])
+);
+
+const {
+  url,
+  selector,
+  out,
+  'out-dir': outDir,
+  'bundle-path': bundlePath,
+  'widen-to-artboard': widenFlag,
+  multi: multiFlag,
+  timeout = '12',
+} = args;
+
+if (!url || !bundlePath) {
+  console.error(
+    'usage: _svg-playwright.mjs --url <url> --selector <css> --out <path> --bundle-path <iife.js>'
+  );
+  process.exit(2);
+}
+
+const widen = widenFlag !== undefined;
+const multi = multiFlag !== undefined;
+const timeoutMs = Number(timeout) * 1000;
+
+const browser = await chromium.launch();
+try {
+  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+  const page = await ctx.newPage();
+  await page.goto(url, { waitUntil: 'networkidle', timeout: timeoutMs });
+  await page.evaluate(() => document.fonts.ready);
+  // Reset the world plane's CSS zoom + transform so artboards render at
+  // declared dimensions before dom-to-svg walks the layout.
+  await page.evaluate(() => {
+    const world = document.querySelector('.dc-world');
+    if (world) {
+      world.style.zoom = '1';
+      world.style.transform = 'none';
+    }
+    for (const el of document.querySelectorAll('[data-dc-screen]')) {
+      el.style.left = '0px';
+      el.style.top = '0px';
+    }
+  });
+  // Inject dom-to-svg into the page. Bundle attaches its exports under
+  // `window.domToSvg`.
+  await page.addScriptTag({ path: bundlePath });
+
+  const written = [];
+
+  const serializeOne = async (handle) => {
+    return await handle.evaluate(
+      async (el, opts) => {
+        const target = opts.widenToArtboard ? (el.closest('[data-dc-screen]') ?? el) : el;
+        // window.domToSvg is the IIFE-injected entry.
+        const { elementToSVG, inlineResources } = /** @type any */ (window).domToSvg;
+        const svgDoc = elementToSVG(target);
+        // base64-embeds fonts + images so the SVG is portable outside the
+        // dev-server origin. Some external fetches fail silently — Affinity
+        // tolerates missing resources better than missing primitives.
+        try {
+          await inlineResources(svgDoc.documentElement);
+        } catch {
+          /* best-effort */
+        }
+        return new XMLSerializer().serializeToString(svgDoc);
+      },
+      { widenToArtboard: opts }
+    );
+  };
+  const opts = { widenToArtboard: widen };
+
+  if (multi) {
+    if (!outDir) {
+      console.error('_svg-playwright: --multi requires --out-dir');
+      process.exit(2);
+    }
+    mkdirSync(outDir, { recursive: true });
+    const screens = await page.locator(selector ?? '[data-dc-screen]').all();
+    for (let i = 0; i < screens.length; i += 1) {
+      const handle = screens[i];
+      const id = (await handle.getAttribute('data-dc-screen')) ?? `artboard-${i + 1}`;
+      const svg = await handle.evaluate(async (el) => {
+        // window.domToSvg is the IIFE-injected entry.
+        const { elementToSVG, inlineResources, formatXML } = /** @type any */ (window).domToSvg;
+        const svgDoc = elementToSVG(el);
+        try {
+          await inlineResources(svgDoc.documentElement);
+        } catch {
+          /* */
+        }
+        return formatXML(new XMLSerializer().serializeToString(svgDoc));
+      });
+      const target = join(outDir, `${id}.svg`);
+      writeFileSync(target, svg, 'utf8');
+      written.push(target);
+    }
+  } else {
+    if (!out) {
+      console.error('_svg-playwright: --out required when --multi not set');
+      process.exit(2);
+    }
+    mkdirSync(dirname(out), { recursive: true });
+    const handle = page.locator(selector ?? '[data-dc-screen]:first-of-type').first();
+    await handle.waitFor({ state: 'visible', timeout: timeoutMs });
+    const svg = await serializeOne(handle);
+    writeFileSync(out, svg, 'utf8');
+    written.push(out);
+  }
+
+  for (const w of written) console.log(w);
+  console.error(`✓ dom-to-svg wrote ${written.length} svg file(s)`);
+} finally {
+  await browser.close();
+}

package/plugins/design/dev-server/canvas-lib.tsx

@@ -1182,7 +1182,6 @@ function DesignCanvasInner({ children, controls }: DesignCanvasProps) {
   );
 
   const showMiniMap = controls?.minimap !== false;
-  const showToolbar = controls?.toolbar !== false;
 
   // Drag-state bus (Phase 4.2). Single source of truth: only one artboard
   // drag is active at a time. DCArtboards write here when their local drag
@@ -1492,15 +1491,15 @@ const OVERLAY_CSS = `
   bottom: 16px;
   width: 196px;
   height: 132px;
-  background: var(--bg-1, rgba(255,255,255,0.98));
-  border: 1px solid var(--u-border-2, rgba(0,0,0,0.08));
-  border-radius: 8px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  background: var(--bg-2, var(--bg-1, rgba(255,255,255,0.98)));
+  border: 1px solid var(--fg-0, #1c1917);
+  border-radius: 0;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 10px;
-  color: rgba(40,30,20,0.7);
+  color: var(--fg-1, rgba(40,30,20,0.7));
   z-index: 6;
   user-select: none;
-  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
+  box-shadow: 4px 4px 0 var(--fg-0, #1c1917);
   overflow: hidden;
 }
 .dc-mm-hd {
@@ -1534,15 +1533,15 @@ const OVERLAY_CSS = `
   transform: translateX(-50%);
   display: flex;
   align-items: stretch;
-  background: rgba(255,255,255,0.94);
-  border: 1px solid rgba(0,0,0,0.12);
-  border-radius: 6px;
+  background: var(--bg-2, rgba(255,255,255,0.94));
+  border: 1px solid var(--fg-0, #1c1917);
+  border-radius: 0;
   overflow: hidden;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
-  color: rgba(40,30,20,0.85);
+  color: var(--fg-1, rgba(40,30,20,0.85));
   z-index: 6;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
+  box-shadow: 4px 4px 0 var(--fg-0, #1c1917);
 }
 .dc-zoom-tb button {
   appearance: none;

package/plugins/design/dev-server/canvas-shell.tsx

@@ -51,6 +51,7 @@ import {
   type MenuItem,
   useContextMenu,
 } from './context-menu.tsx';
+import { ExportDialogProvider } from './export-dialog.tsx';
 import { type HoverTarget, resolveHoverTarget, useInputRouter } from './input-router.tsx';
 import { ToolPalette } from './tool-palette.tsx';
 import {
@@ -203,9 +204,11 @@ function CanvasCore({
   );
 
   return (
-    <ContextMenuProvider registry={registry}>
-      <CanvasRouter hostRef={hostRef}>{children}</CanvasRouter>
-    </ContextMenuProvider>
+    <ExportDialogProvider>
+      <ContextMenuProvider registry={registry}>
+        <CanvasRouter hostRef={hostRef}>{children}</CanvasRouter>
+      </ContextMenuProvider>
+    </ExportDialogProvider>
   );
 }
 
@@ -263,6 +266,23 @@ function buildRegistry(deps: {
     onSelect: () => controller?.reset(),
   };
 
+  // Phase 6.5 — context-menu → ExportDialog. Each entry dispatches a custom
+  // event the dialog provider listens for; this avoids prop-drilling the
+  // dialog handle through every menu callback. The scope arg prefills the
+  // dialog's scope dropdown so the user lands on the right resolution.
+  const exportItem = (id: string, label: string, scope: string, shortcut?: string): MenuItem => ({
+    id,
+    label,
+    shortcut,
+    onSelect: () => {
+      try {
+        window.dispatchEvent(new CustomEvent('maude:open-export', { detail: { scope } }));
+      } catch {
+        /* non-window environments */
+      }
+    },
+  });
+
   return {
     element: [
       [
@@ -298,6 +318,7 @@ function buildRegistry(deps: {
           },
         },
       ],
+      [exportItem('export-selection', 'Export selection…', 'selection', '⌘E')],
       [
         {
           id: 'hide',
@@ -334,8 +355,15 @@ function buildRegistry(deps: {
         fitItem,
         resetItem,
       ],
+      [exportItem('export-artboard', 'Export this artboard…', 'artboard')],
+    ],
+    world: [
+      [fitItem, resetItem],
+      [
+        exportItem('export-canvas', 'Export canvas as separate…', 'canvas-as-separate'),
+        exportItem('export-project', 'Export project (ZIP)…', 'project-raw'),
+      ],
     ],
-    world: [[fitItem, resetItem]],
     overlay: [],
   };
 }

package/plugins/design/dev-server/client/app.jsx

@@ -1861,8 +1861,25 @@ function App() {
   const activeFileComments = (activePath && activePath !== SYSTEM_TAB) ? (commentsByFile[activePath] || []) : [];
   const totalOpen = totalCounts(commentsByFile).open;
 
+  // Suppress the native browser context menu across the shell — the canvas
+  // input-router already handles right-click inside the canvas host, but
+  // sidebar / menubar / statusbar / floating chrome would otherwise leak the
+  // native menu on top of our `.dc-context-menu` (or alone, outside canvas).
+  // Editable fields (search box, future text inputs) keep the native menu so
+  // copy/paste still works.
+  const onShellContextMenu = useCallback((e) => {
+    const t = e.target;
+    if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || (t.isContentEditable))) {
+      return;
+    }
+    e.preventDefault();
+  }, []);
+
   return (
-    <div className={'app' + (commentsPanelOpen ? ' with-rsidebar' : '') + (sidebarOpen ? '' : ' no-sidebar')}>
+    <div
+      className={'app' + (commentsPanelOpen ? ' with-rsidebar' : '') + (sidebarOpen ? '' : ' no-sidebar')}
+      onContextMenu={onShellContextMenu}
+    >
       <Sidebar
         groups={groups}
         activePath={activePath}

package/plugins/design/dev-server/context-menu.tsx

@@ -74,6 +74,27 @@ function noop(name: string) {
   };
 }
 
+// Phase 6.5 T9 — export hooks. The default registry items use noop() so the
+// menu still renders when the dialog provider isn't mounted; consumers wire
+// real `openExport(scope)` callbacks by passing a custom registry to
+// <ContextMenuProvider extra>. Pattern matches the existing Phase 5 noop
+// affordances.
+function defaultExportItem(label: string, scopeHint: string): MenuItem {
+  return {
+    id: `export-${scopeHint}`,
+    label,
+    shortcut: scopeHint === 'selection' ? '⌘E' : undefined,
+    onSelect: () => {
+      const detail = { scope: scopeHint };
+      try {
+        window.dispatchEvent(new CustomEvent('maude:open-export', { detail }));
+      } catch {
+        /* SSR / non-window environments */
+      }
+    },
+  };
+}
+
 const DEFAULT_REGISTRY: ContextRegistry = {
   element: [
     [
@@ -82,6 +103,7 @@ const DEFAULT_REGISTRY: ContextRegistry = {
       { id: 'copy-id', label: 'Copy data-cd-id', onSelect: noop('copy-id') },
       { id: 'inspect', label: 'Inspect', shortcut: '⌥I', onSelect: noop('inspect') },
     ],
+    [defaultExportItem('Export selection…', 'selection')],
     [
       { id: 'hide', label: 'Hide', shortcut: '⌘⇧H', onSelect: noop('hide') },
       { id: 'lock', label: 'Lock', shortcut: '⌘⇧L', onSelect: noop('lock') },
@@ -92,6 +114,7 @@ const DEFAULT_REGISTRY: ContextRegistry = {
       { id: 'rename', label: 'Rename', shortcut: '↵', onSelect: noop('rename-artboard') },
       { id: 'duplicate', label: 'Duplicate', shortcut: '⌘D', onSelect: noop('duplicate-artboard') },
     ],
+    [defaultExportItem('Export this artboard…', 'artboard')],
     [
       { id: 'fit-one', label: 'Fit just this artboard', onSelect: noop('fit-one') },
       { id: 'reset-pos', label: 'Reset position', onSelect: noop('reset-artboard-pos') },
@@ -108,6 +131,10 @@ const DEFAULT_REGISTRY: ContextRegistry = {
       { id: 'fit-view', label: 'Fit to view', shortcut: '1', onSelect: noop('fit-view') },
       { id: 'reset-view', label: 'Reset view', shortcut: '⌘0', onSelect: noop('reset-view') },
     ],
+    [
+      defaultExportItem('Export project (ZIP)…', 'project-raw'),
+      defaultExportItem('Export canvas as separate…', 'canvas-as-separate'),
+    ],
   ],
   overlay: [],
 };
@@ -131,15 +158,15 @@ const MENU_CSS = `
 .dc-context-menu {
   position: fixed;
   z-index: 7;
-  background: var(--bg-1, #fff);
-  border: 1px solid var(--border-default, rgba(0,0,0,0.12));
-  border-radius: var(--radius-md, 6px);
-  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.12));
+  background: var(--u-bg-2, var(--bg-1, #fff));
+  border: 1px solid var(--u-fg-0, #1c1917);
+  border-radius: 0;
+  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
   padding: 4px;
   min-width: 220px;
-  font: inherit;
+  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 12px;
-  color: var(--fg-0, rgba(20,15,10,0.92));
+  color: var(--u-fg-0, var(--fg-0, rgba(20,15,10,0.92)));
   user-select: none;
 }
 .dc-context-menu .dc-menu-sep {
@@ -152,8 +179,8 @@ const MENU_CSS = `
   justify-content: space-between;
   align-items: center;
   gap: 16px;
-  padding: 6px 10px;
-  border-radius: var(--radius-sm, 4px);
+  padding: 5px 12px;
+  border-radius: 0;
   cursor: pointer;
   background: transparent;
   border: 0;
@@ -164,7 +191,7 @@ const MENU_CSS = `
 }
 .dc-context-menu .dc-menu-item:hover,
 .dc-context-menu .dc-menu-item:focus-visible {
-  background: var(--bg-3, rgba(0,0,0,0.05));
+  background: var(--u-bg-3, var(--bg-3, rgba(0,0,0,0.05)));
   outline: none;
 }
 .dc-context-menu .dc-menu-item[disabled] {