@1agh/maude 0.16.0 → 0.17.2

package/plugins/design/dev-server/export-dialog.tsx

@@ -0,0 +1,401 @@
+/**
+ * @file       export-dialog.tsx — Phase 6.5 T8 export dialog.
+ * @scope      plugins/design/dev-server/export-dialog.tsx
+ * @purpose    Native `<dialog>`-based export modal. Three controls — format,
+ *             scope, per-format options — plus a Recent tab populated by
+ *             `/_api/export-history`. Submit fires `POST /_api/export`, the
+ *             response is piped to a Blob URL anchor download. `⌘E` opens
+ *             the dialog from anywhere inside the canvas; `⌘⇧E` re-runs the
+ *             most recent export without opening (T10 fast path).
+ *
+ *             Mounts inside the canvas runtime alongside tool-palette and
+ *             context-menu; consumer wraps the canvas with
+ *             `<ExportDialogProvider>` to make `useExportDialog()` available.
+ */
+
+import {
+  type ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+
+export type Format = 'png' | 'pdf' | 'svg' | 'html' | 'pptx' | 'canva' | 'zip';
+export type Scope = 'selection' | 'artboard' | 'canvas-as-separate' | 'project-raw';
+
+const FORMAT_META: Record<Format, { label: string; description: string; defaultExt: string }> = {
+  png: { label: 'PNG', description: 'Raster image, one per artboard.', defaultExt: '.png' },
+  pdf: { label: 'PDF', description: 'Multi-page PDF, one page per artboard.', defaultExt: '.pdf' },
+  svg: {
+    label: 'SVG',
+    description: 'Vector wrapper over rendered HTML. Editable in Illustrator.',
+    defaultExt: '.svg',
+  },
+  html: {
+    label: 'HTML',
+    description: 'Standalone runnable bundle. Drop into a static host.',
+    defaultExt: '.zip',
+  },
+  pptx: {
+    label: 'PPTX',
+    description: 'Editable PowerPoint. Opens in Keynote, Google Slides.',
+    defaultExt: '.pptx',
+  },
+  canva: {
+    label: 'Canva',
+    description: 'PPTX + handoff prompt. Drag into Canva or feed to your Canva MCP.',
+    defaultExt: '.zip',
+  },
+  zip: {
+    label: 'ZIP (source)',
+    description: 'Entire .design/ as raw source files. No renders.',
+    defaultExt: '.zip',
+  },
+};
+
+const SCOPE_META: Record<Scope, { label: string; description: string }> = {
+  selection: { label: 'Selection', description: 'Just the currently-selected element.' },
+  artboard: { label: 'Artboard', description: 'The single artboard containing the selection.' },
+  'canvas-as-separate': {
+    label: 'Canvas → separate',
+    description: 'Every artboard on the active canvas as N files.',
+  },
+  'project-raw': {
+    label: 'Project (raw)',
+    description: 'The entire `.design/` tree, minus runtime files.',
+  },
+};
+
+const VALID_SCOPES_PER_FORMAT: Record<Format, Scope[]> = {
+  png: ['selection', 'artboard', 'canvas-as-separate'],
+  pdf: ['selection', 'artboard', 'canvas-as-separate'],
+  svg: ['selection', 'artboard', 'canvas-as-separate'],
+  html: ['artboard', 'canvas-as-separate'],
+  pptx: ['canvas-as-separate'],
+  canva: ['canvas-as-separate'],
+  zip: ['project-raw'],
+};
+
+export interface ExportHistoryEntry {
+  format: Format;
+  scope: Scope;
+  options?: Record<string, unknown>;
+  filename: string;
+  at: string;
+}
+
+interface OpenOptions {
+  /** Pre-fills the scope dropdown (e.g. from context-menu "Export this artboard"). */
+  scope?: Scope;
+  /** Pre-fills format. */
+  format?: Format;
+}
+
+interface ExportDialogValue {
+  open(opts?: OpenOptions): void;
+  close(): void;
+  /** Re-run the most recent export without opening the dialog. */
+  rerunLast(): Promise<void>;
+}
+
+const ExportDialogContext = createContext<ExportDialogValue | null>(null);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// CSS — visual language mirrors tool-palette + context-menu (8 px radius,
+// hairline border, soft shadow). Scoped to .dc-export-dialog.
+
+const DIALOG_CSS = `
+.dc-export-dialog {
+  border: 1px solid var(--u-fg-0, #1c1917);
+  padding: 0;
+  border-radius: 0;
+  background: var(--u-bg-2, var(--bg-1, #fff));
+  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
+  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  color: var(--u-fg-0, var(--fg-0, #1a1a1a));
+  width: min(640px, 100vw - 48px);
+  max-height: min(560px, 100vh - 48px);
+  overflow: hidden;
+}
+.dc-export-dialog::backdrop { background: rgba(20, 20, 30, 0.32); }
+.dc-export-dialog header { padding: 16px 20px; border-bottom: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08)); display: flex; justify-content: space-between; align-items: center; }
+.dc-export-dialog header h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
+.dc-export-dialog header .dc-ed-close { background: transparent; border: 0; cursor: pointer; padding: 4px 8px; color: var(--fg-1, rgba(40,30,20,0.6)); font: inherit; font-size: 12px; }
+.dc-export-dialog .dc-ed-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 20px; }
+.dc-export-dialog label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-2, rgba(40,30,20,0.5)); margin-bottom: 6px; }
+.dc-export-dialog select { width: 100%; padding: 8px 10px; border-radius: 0; border: 1px solid var(--u-fg-0, rgba(0,0,0,0.12)); background: var(--u-bg-1, var(--bg-0, #fafafa)); font: inherit; font-size: 13px; color: inherit; }
+.dc-export-dialog .dc-ed-desc { font-size: 12px; color: var(--fg-1, rgba(40,30,20,0.65)); margin-top: 6px; line-height: 1.4; }
+.dc-export-dialog .dc-ed-recent { padding: 12px 20px; border-top: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08)); background: var(--bg-2, rgba(0,0,0,0.02)); }
+.dc-export-dialog .dc-ed-recent h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-2, rgba(40,30,20,0.5)); margin: 0 0 8px; }
+.dc-export-dialog .dc-ed-recent ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; max-height: 120px; overflow-y: auto; }
+.dc-export-dialog .dc-ed-recent button { display: flex; justify-content: space-between; gap: 12px; padding: 5px 12px; background: transparent; border: 1px solid transparent; border-radius: 0; cursor: pointer; font: inherit; font-size: 12px; color: inherit; width: 100%; text-align: left; }
+.dc-export-dialog .dc-ed-recent button:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); }
+.dc-export-dialog footer { padding: 12px 20px; border-top: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08)); display: flex; justify-content: flex-end; gap: 8px; }
+.dc-export-dialog footer button { padding: 8px 14px; border-radius: 0; border: 1px solid var(--u-fg-0, rgba(0,0,0,0.12)); background: var(--u-bg-1, var(--bg-0, #fafafa)); font: inherit; font-size: 12px; cursor: pointer; color: inherit; }
+.dc-export-dialog footer button.dc-ed-primary { background: var(--accent, #1a1a1a); color: var(--accent-fg, #fff); border-color: transparent; }
+.dc-export-dialog footer button:disabled { opacity: 0.4; cursor: not-allowed; }
+.dc-export-dialog .dc-ed-status { padding: 8px 20px; font-size: 12px; color: var(--fg-1, rgba(40,30,20,0.65)); border-top: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08)); }
+.dc-export-dialog .dc-ed-status.is-error { color: var(--status-error, #c0392b); }
+`;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Provider
+
+export function ExportDialogProvider({ children }: { children: ReactNode }): ReactNode {
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const [openState, setOpenState] = useState<OpenOptions | null>(null);
+  const [history, setHistory] = useState<ExportHistoryEntry[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+  const [status, setStatus] = useState<{ text: string; isError: boolean } | null>(null);
+
+  const open = useCallback((opts?: OpenOptions) => {
+    setStatus(null);
+    setOpenState(opts ?? {});
+  }, []);
+  const close = useCallback(() => {
+    setOpenState(null);
+    dialogRef.current?.close();
+  }, []);
+
+  // Pre-load history when the dialog opens; refresh after each export.
+  const loadHistory = useCallback(async () => {
+    try {
+      const r = await fetch('/_api/export-history');
+      if (!r.ok) return;
+      const data = (await r.json()) as { history: ExportHistoryEntry[] };
+      setHistory(Array.isArray(data.history) ? data.history : []);
+    } catch {
+      /* ignore — history is best-effort */
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!openState) return;
+    void loadHistory();
+    dialogRef.current?.showModal();
+  }, [openState, loadHistory]);
+
+  // ⌘E / Ctrl+E to open; ⌘⇧E / Ctrl+Shift+E to re-run last.
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      const mod = e.metaKey || e.ctrlKey;
+      if (!mod || e.key.toLowerCase() !== 'e') return;
+      e.preventDefault();
+      if (e.shiftKey) void rerunLast();
+      else open();
+    }
+    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
+  // don't have to prop-drill the dialog handle through every consumer.
+  useEffect(() => {
+    function onCustom(e: Event) {
+      const detail = (e as CustomEvent<{ scope?: Scope; format?: Format }>).detail ?? {};
+      open(detail);
+    }
+    window.addEventListener('maude:open-export', onCustom as EventListener);
+    return () => window.removeEventListener('maude:open-export', onCustom as EventListener);
+  }, [open]);
+
+  // ─── submit handlers ─────────────────────────────────────────────────────
+  const submit = useCallback(
+    async (format: Format, scope: Scope, options: Record<string, unknown>) => {
+      setSubmitting(true);
+      setStatus(null);
+      try {
+        const r = await fetch('/_api/export', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ format, scope, options }),
+        });
+        if (!r.ok) {
+          const text = await r.text();
+          setStatus({ text: `Export failed: ${text || r.status}`, isError: true });
+          return;
+        }
+        const disp = r.headers.get('Content-Disposition') ?? '';
+        const filename =
+          /filename="([^"]+)"/.exec(disp)?.[1] ?? `export${FORMAT_META[format].defaultExt}`;
+        const blob = await r.blob();
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(url);
+        setStatus({ text: `Saved ${filename}`, isError: false });
+        void loadHistory();
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        setStatus({ text: `Export failed: ${msg}`, isError: true });
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [loadHistory]
+  );
+
+  const rerunLast = useCallback(async () => {
+    await loadHistory();
+    const last = history[0];
+    if (!last) return;
+    await submit(last.format, last.scope, last.options ?? {});
+  }, [history, loadHistory, submit]);
+
+  const ctxValue = useMemo<ExportDialogValue>(
+    () => ({ open, close, rerunLast }),
+    [open, close, rerunLast]
+  );
+
+  return (
+    <ExportDialogContext.Provider value={ctxValue}>
+      <style>{DIALOG_CSS}</style>
+      {children}
+      <DialogShell
+        ref={dialogRef}
+        openState={openState}
+        onClose={close}
+        onSubmit={submit}
+        history={history}
+        submitting={submitting}
+        status={status}
+      />
+    </ExportDialogContext.Provider>
+  );
+}
+
+export function useExportDialog(): ExportDialogValue | null {
+  return useContext(ExportDialogContext);
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Inner shell — pure form. Pulled out so the provider stays focused on state.
+
+const DialogShell = (() => {
+  function Shell(props: {
+    ref: React.Ref<HTMLDialogElement>;
+    openState: OpenOptions | null;
+    onClose: () => void;
+    onSubmit: (format: Format, scope: Scope, options: Record<string, unknown>) => void;
+    history: ExportHistoryEntry[];
+    submitting: boolean;
+    status: { text: string; isError: boolean } | null;
+  }) {
+    const { ref, openState, onClose, onSubmit, history, submitting, status } = props;
+    const [format, setFormat] = useState<Format>('png');
+    const [scope, setScope] = useState<Scope>('artboard');
+
+    useEffect(() => {
+      if (!openState) return;
+      if (openState.format) setFormat(openState.format);
+      if (openState.scope) setScope(openState.scope);
+    }, [openState]);
+
+    // Keep the scope valid against the chosen format.
+    useEffect(() => {
+      const valid = VALID_SCOPES_PER_FORMAT[format];
+      if (!valid.includes(scope)) {
+        setScope(valid[0] ?? 'artboard');
+      }
+    }, [format, scope]);
+
+    if (!openState) {
+      return <dialog ref={ref} className="dc-export-dialog" onClose={onClose} />;
+    }
+
+    return (
+      <dialog ref={ref} className="dc-export-dialog" onClose={onClose}>
+        <header>
+          <h2>Export</h2>
+          <button type="button" className="dc-ed-close" onClick={onClose}>
+            Esc
+          </button>
+        </header>
+        <div className="dc-ed-body">
+          <div>
+            <label htmlFor="dc-ed-format">Format</label>
+            <select
+              id="dc-ed-format"
+              value={format}
+              onChange={(e) => setFormat(e.target.value as Format)}
+            >
+              {(Object.keys(FORMAT_META) as Format[]).map((f) => (
+                <option key={f} value={f}>
+                  {FORMAT_META[f].label}
+                </option>
+              ))}
+            </select>
+            <p className="dc-ed-desc">{FORMAT_META[format].description}</p>
+          </div>
+          <div>
+            <label htmlFor="dc-ed-scope">Scope</label>
+            <select
+              id="dc-ed-scope"
+              value={scope}
+              onChange={(e) => setScope(e.target.value as Scope)}
+            >
+              {VALID_SCOPES_PER_FORMAT[format].map((s) => (
+                <option key={s} value={s}>
+                  {SCOPE_META[s].label}
+                </option>
+              ))}
+            </select>
+            <p className="dc-ed-desc">{SCOPE_META[scope].description}</p>
+          </div>
+        </div>
+        {history.length > 0 && (
+          <div className="dc-ed-recent">
+            <h3>Recent</h3>
+            <ul>
+              {history.slice(0, 5).map((h, i) => (
+                <li key={`${h.at}-${i}`}>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setFormat(h.format);
+                      setScope(h.scope);
+                    }}
+                  >
+                    <span>
+                      {FORMAT_META[h.format].label} · {SCOPE_META[h.scope].label}
+                    </span>
+                    <span style={{ color: 'var(--fg-2, rgba(40,30,20,0.5))' }}>{h.filename}</span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+        {status && (
+          <div className={`dc-ed-status${status.isError ? ' is-error' : ''}`}>{status.text}</div>
+        )}
+        <footer>
+          <button type="button" onClick={onClose} disabled={submitting}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="dc-ed-primary"
+            disabled={submitting}
+            onClick={() => onSubmit(format, scope, {})}
+          >
+            {submitting ? 'Exporting…' : 'Export'}
+          </button>
+        </footer>
+      </dialog>
+    );
+  }
+  return Shell;
+})();

package/plugins/design/dev-server/exporters/_browser-bundles.ts

@@ -0,0 +1,89 @@
+// Lazy IIFE bundling of ESM libraries that need to run inside `page.evaluate`.
+//
+// `dom-to-svg` and `dom-to-pptx` ship as Node ESM only — they can't be
+// `<script>`-loaded into a browser context as-is. Bun.build turns them into
+// single-file IIFE bundles cached under the OS temp dir so the playwright
+// shims can `addScriptTag({ path })` without re-bundling per request.
+
+import { existsSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+
+interface CachedBundle {
+  path: string;
+  ready: Promise<string>;
+}
+
+const bundles = new Map<string, CachedBundle>();
+
+async function buildIife(entry: string, globalName: string, cachePath: string): Promise<string> {
+  if (existsSync(cachePath)) return cachePath;
+  // Bun.build doesn't expose IIFE directly — wrap a generated ESM bundle with
+  // a tiny shim that exposes its exports as a window global.
+  const built = await Bun.build({
+    entrypoints: [entry],
+    target: 'browser',
+    format: 'esm',
+    minify: true,
+  });
+  if (!built.success) {
+    throw new Error(`bundle ${entry} failed: ${built.logs.map((l) => l.message).join('; ')}`);
+  }
+  const firstOutput = built.outputs[0];
+  if (!firstOutput) throw new Error(`bundle ${entry} produced no outputs`);
+  const esm = await firstOutput.text();
+  // ESM → IIFE wrapper: evaluate the module as a Function body, then attach
+  // its exports to `window[globalName]`. We can't use top-level `import`
+  // inside a Function, so we transform `export {` to assignments via regex
+  // — the Bun-emitted bundle is consistent (`export { a as foo, b as bar };`).
+  const exportsMatch = esm.match(/export\s*\{([^}]+)\}\s*;?\s*$/);
+  let body = esm;
+  let exportsBlock = '';
+  if (exportsMatch) {
+    body = esm.slice(0, exportsMatch.index);
+    const captured = exportsMatch[1] ?? '';
+    const entries = captured
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean)
+      .map((s) => {
+        // `localName as exportedName` | bare `name`
+        const m = s.match(/^(.+?)\s+as\s+(.+)$/);
+        if (m?.[1] && m[2]) return { local: m[1].trim(), exported: m[2].trim() };
+        return { local: s, exported: s };
+      });
+    exportsBlock = entries
+      .map(
+        (e) =>
+          `globalThis[${JSON.stringify(globalName)}][${JSON.stringify(e.exported)}] = ${e.local};`
+      )
+      .join('\n');
+  }
+  const iife = `(function(){
+  globalThis[${JSON.stringify(globalName)}] = globalThis[${JSON.stringify(globalName)}] || {};
+  ${body}
+  ${exportsBlock}
+})();`;
+  await Bun.write(cachePath, iife);
+  return cachePath;
+}
+
+/**
+ * Returns the path to an IIFE bundle for the given npm package, attaching its
+ * exports under `window[globalName]`. Caches under the OS temp dir so a long-
+ * running dev server pays the build cost once.
+ */
+export function getBrowserBundle(packageName: string, globalName: string): Promise<string> {
+  const key = `${packageName}::${globalName}`;
+  const existing = bundles.get(key);
+  if (existing) return existing.ready;
+
+  const entry = require.resolve(packageName);
+  const cachePath = path.join(
+    tmpdir(),
+    `maude-${packageName.replace(/[^a-z0-9]/gi, '_')}-${globalName}.iife.js`
+  );
+  const ready = buildIife(entry, globalName, cachePath);
+  bundles.set(key, { path: cachePath, ready });
+  return ready;
+}

package/plugins/design/dev-server/exporters/canva-handoff-prompt.ts

@@ -0,0 +1,74 @@
+// Phase 6.5 T6c — `.canva-handoff.md` artifact builder.
+//
+// Emits a self-contained markdown file with three sections:
+//   1. Human-readable summary (artboard count, fidelity caveats)
+//   2. Drag-drop instructions for the universal Canva web path
+//   3. Fenced text-block prompt ready for the user's Canva MCP / agentic tool
+//
+// The prompt block is the load-bearing piece — anyone with a Canva MCP
+// configured in Claude Code / Cursor / equivalent can paste it and let the
+// MCP handle auth + import. Maude never touches credentials.
+
+export interface HandoffSummary {
+  /** Filename of the .pptx that ships next to this markdown (e.g. `home.pptx`). */
+  pptxFilename: string;
+  /** Absolute path to the .pptx after the user unzips. Resolved at render time. */
+  absolutePath: string;
+  /** Canvas slug — used as the Canva design title and as the prompt's anchor. */
+  canvasSlug: string;
+  /** Total artboard count (= PPTX slide count = expected Canva page count). */
+  artboardCount: number;
+  /** Optional list of artboard titles, in render order. */
+  artboardTitles?: string[];
+}
+
+const CAVEATS = `
+- **Fonts:** if your Canva Brand Kit doesn't include the source fonts, Canva substitutes its defaults. Text remains editable.
+- **Gradients:** CSS gradients translate to native PPT gradients. Multi-stop fidelity is approximate.
+- **Shadows, blend modes:** advanced effects rasterize on import.
+- **Layouts:** flex / grid get flattened to absolute coordinates at export-time viewport (1440 × declared artboard height).
+`.trim();
+
+export function buildHandoffMarkdown(s: HandoffSummary): string {
+  const plural = s.artboardCount === 1 ? 'artboard' : 'artboards';
+  const titles = s.artboardTitles?.length
+    ? s.artboardTitles.map((t, i) => `${i + 1}. ${t}`).join('\n')
+    : `${s.artboardCount} ${plural}`;
+
+  return `# Canva handoff — ${s.canvasSlug}
+
+Editable handoff bundle exported from Maude. The companion file \`${s.pptxFilename}\` is a native PowerPoint document — Canva imports it as editable text, shapes, and images, **not** a flat raster.
+
+## What's inside
+
+- **${s.artboardCount}** artboard${s.artboardCount === 1 ? '' : 's'} → ${s.artboardCount} Canva page${s.artboardCount === 1 ? '' : 's'} on import.
+${titles}
+
+## Option A — drag-drop (works on any Canva tier)
+
+1. Open https://www.canva.com in your browser.
+2. Drag \`${s.pptxFilename}\` from this folder into the Canva home screen, or use **Create a design → Upload media → Import file**.
+3. Canva opens the imported design. Text, shapes, and images are individually selectable and editable.
+
+## Option B — automate via your Canva MCP
+
+If you have a Canva MCP server configured in Claude Code / Cursor / Goose / any agentic tool, paste the prompt below into a fresh chat:
+
+\`\`\`text
+Use my Canva MCP to import the PowerPoint file at the path below into a new Canva design titled "${s.canvasSlug}". Preserve text editability, shape fills and strokes, image swappability, and the artboard-to-page mapping (one PPTX slide = one Canva page). After the import job completes, return the Canva design URL.
+
+File path: ${s.absolutePath}
+Slides expected: ${s.artboardCount}
+\`\`\`
+
+Maude doesn't see your Canva credentials — your MCP handles auth and the import call itself.
+
+## Fidelity caveats
+
+${CAVEATS}
+
+---
+
+Generated by [Maude](https://github.com/1aGh/maude).
+`;
+}

package/plugins/design/dev-server/exporters/canva.ts

@@ -0,0 +1,126 @@
+// Phase 6.5 T6c — Canva handoff adapter.
+//
+// Wraps T6b's PPTX bytes with a sibling `.canva-handoff.md` artifact and
+// ZIPs both into a single bundle. The user unzips, then either drag-drops
+// the PPTX into Canva web (universal path) or feeds the markdown prompt
+// to their own Canva MCP (one-click handoff for users who've configured
+// one). Maude never touches Canva credentials — see DDR.
+//
+// `--canva=raster` legacy bundle (T6d) is the opt-out for users who want a
+// flat reference image set instead of the editable handoff. Routed via
+// `options.mode = 'raster'`.
+
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+
+import JSZip from 'jszip';
+
+import { buildHandoffMarkdown } from './canva-handoff-prompt.ts';
+import type { ExportContext, ExportOptions, ExportResult } from './index.ts';
+import { run as runPng } from './png.ts';
+import { run as runPptx } from './pptx.ts';
+import type { Target } from './scope.ts';
+
+async function buildRasterBundle(
+  elementTargets: Array<Extract<Target, { kind: 'element' }>>,
+  options: ExportOptions,
+  ctx: ExportContext
+): Promise<ExportResult> {
+  // T6d — legacy PNG+CSV+README handoff. Reuses the PNG adapter for capture
+  // then assembles a ZIP with a manifest CSV + a README pointing the user
+  // at the raster files as reference imagery (no editable Canva path).
+  const pngResult = await runPng(elementTargets, options, ctx);
+  const zip = new JSZip();
+  const rows: string[] = ['index,filename,canvas_slug'];
+
+  if (pngResult.contentType === 'image/png') {
+    zip.file(pngResult.filename, pngResult.body);
+    rows.push(`1,${pngResult.filename},${elementTargets[0]?.canvasSlug ?? 'export'}`);
+  } else if (pngResult.contentType === 'application/zip' && pngResult.body.byteLength) {
+    const inner = await JSZip.loadAsync(pngResult.body);
+    let i = 0;
+    for (const fname of Object.keys(inner.files)) {
+      const file = inner.file(fname);
+      if (!file) continue;
+      const bytes = await file.async('uint8array');
+      zip.file(fname, bytes);
+      i += 1;
+      rows.push(`${i},${fname},${elementTargets[0]?.canvasSlug ?? 'export'}`);
+    }
+  }
+
+  const baseSlug = elementTargets[0]?.canvasSlug ?? 'export';
+  zip.file('manifest.csv', rows.join('\n'));
+  zip.file(
+    'README.md',
+    '# Canva raster bundle\n\n' +
+      'Legacy reference-only handoff. PNGs in this folder are NOT editable in Canva — they import as flat images.\n\n' +
+      'For an **editable** Canva design (text, shapes, images), re-export without `--canva=raster` to get the PPTX + MCP-prompt bundle instead.\n'
+  );
+  const zipBytes = await zip.generateAsync({ type: 'uint8array', compression: 'DEFLATE' });
+  return {
+    filename: `${baseSlug}.canva-raster.zip`,
+    contentType: 'application/zip',
+    body: zipBytes,
+  };
+}
+
+export async function run(
+  targets: Target[],
+  options: ExportOptions,
+  ctx: ExportContext
+): Promise<ExportResult> {
+  if (!targets.length) {
+    return {
+      filename: 'export.canva.zip',
+      contentType: 'application/zip',
+      body: new Uint8Array(0),
+    };
+  }
+  const elementTargets = targets.filter(
+    (t): t is Extract<Target, { kind: 'element' }> => t.kind === 'element'
+  );
+  if (!elementTargets.length) {
+    throw new Error('canva adapter requires element targets (got file-tree)');
+  }
+
+  if (options.mode === 'raster') {
+    return buildRasterBundle(elementTargets, options, ctx);
+  }
+
+  // Editable handoff — delegate to the pptx adapter (which now runs
+  // dom-to-pptx) for the payload, then wrap with handoff markdown. We pass
+  // the full targets through so multi-artboard canvases produce one slide
+  // per artboard inside the pptx.
+  const pptxResult = await runPptx(elementTargets, options, ctx);
+  const pptxBytes = pptxResult.body;
+
+  const baseSlug = elementTargets[0]?.canvasSlug ?? 'export';
+  const pptxName = `${baseSlug}.pptx`;
+  // dom-to-pptx doesn't surface artboard count from outside; we infer it
+  // from the target's multi-ness. For single-artboard exports the count is
+  // 1; for canvas-as-separate we report "all artboards" plainly — Canva
+  // splits them on import regardless of what we claim here.
+  const artboardCount = elementTargets[0]?.multi ? -1 : 1;
+  const markdown = buildHandoffMarkdown({
+    pptxFilename: pptxName,
+    absolutePath: path.join('<your-unzip-location>', pptxName),
+    canvasSlug: baseSlug,
+    artboardCount: artboardCount > 0 ? artboardCount : 1,
+  });
+
+  const zip = new JSZip();
+  zip.file(pptxName, pptxBytes);
+  zip.file(`${baseSlug}.canva-handoff.md`, markdown);
+  const zipBytes = await zip.generateAsync({ type: 'uint8array', compression: 'DEFLATE' });
+
+  return {
+    filename: `${baseSlug}.canva.zip`,
+    contentType: 'application/zip',
+    body: zipBytes,
+  };
+}
+
+// Suppress unused-import for `tmpdir` — kept for future raster-bundle
+// branches that may need a temp dir.
+void tmpdir;