@1agh/maude 0.15.0 → 0.17.1

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

@@ -0,0 +1,136 @@
+// Phase 6.5 T2 — PNG adapter (playwright-native).
+//
+// Drives `bin/_png-playwright.mjs` — Chromium-via-Playwright with explicit
+// viewport sizing per target. The previous `screenshot.sh` path used
+// agent-browser which applied its own viewport defaults and produced clipped
+// captures of the world-plane background instead of the artboard. With our
+// own shim we control the viewport, scroll the artboard to (0,0), then
+// `page.screenshot({ clip })`.
+
+import { mkdtempSync, readFileSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+
+import JSZip from 'jszip';
+
+import {
+  type ExportContext,
+  type ExportOptions,
+  type ExportResult,
+  canvasShellUrl,
+} from './index.ts';
+import type { Target } from './scope.ts';
+
+const PNG_PLAYWRIGHT = path.join(import.meta.dir, '..', 'bin', '_png-playwright.mjs');
+
+interface CaptureOptions {
+  scale?: 1 | 2 | 3;
+  timeoutSec?: number;
+}
+
+async function captureElement(
+  target: Extract<Target, { kind: 'element' }>,
+  ctx: ExportContext,
+  outDir: string,
+  options: CaptureOptions
+): Promise<string[]> {
+  const args = [
+    PNG_PLAYWRIGHT,
+    '--url',
+    canvasShellUrl(ctx, target.file),
+    '--selector',
+    target.cssPath,
+    '--scale',
+    String(options.scale ?? 1),
+    '--timeout',
+    String(options.timeoutSec ?? 12),
+  ];
+  if (target.multi) {
+    args.push('--multi', '1', '--out-dir', outDir);
+  } else {
+    args.push('--widen-to-artboard', '1', '--out', path.join(outDir, `${target.canvasSlug}.png`));
+  }
+  const proc = Bun.spawn(['node', ...args], {
+    cwd: path.dirname(PNG_PLAYWRIGHT),
+    stdout: 'pipe',
+    stderr: 'pipe',
+  });
+  const [stdout, stderr] = await Promise.all([
+    new Response(proc.stdout).text(),
+    new Response(proc.stderr).text(),
+  ]);
+  const code = await proc.exited;
+  if (code !== 0) {
+    throw new Error(`_png-playwright exited ${code}: ${stderr.trim() || stdout.trim()}`);
+  }
+  return stdout
+    .split('\n')
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+function readBytes(paths: string[]): Array<{ name: string; bytes: Uint8Array }> {
+  return paths.map((p) => ({
+    name: path.basename(p),
+    bytes: new Uint8Array(readFileSync(p)),
+  }));
+}
+
+async function bundleZip(entries: Array<{ name: string; bytes: Uint8Array }>): Promise<Uint8Array> {
+  const zip = new JSZip();
+  for (const e of entries) {
+    zip.file(e.name, e.bytes);
+  }
+  return zip.generateAsync({ type: 'uint8array', compression: 'DEFLATE' });
+}
+
+export async function run(
+  targets: Target[],
+  options: ExportOptions,
+  ctx: ExportContext
+): Promise<ExportResult> {
+  if (!targets.length) {
+    return { filename: 'export.png', contentType: 'image/png', body: new Uint8Array(0) };
+  }
+  const elementTargets = targets.filter(
+    (t): t is Extract<Target, { kind: 'element' }> => t.kind === 'element'
+  );
+  if (!elementTargets.length) {
+    throw new Error('png adapter requires element targets (got file-tree)');
+  }
+
+  const tmp = mkdtempSync(path.join(tmpdir(), 'maude-png-'));
+  const captureOpts: CaptureOptions = {
+    scale: (options.scale as 1 | 2 | 3 | undefined) ?? 1,
+    timeoutSec: (options.timeoutSec as number | undefined) ?? 8,
+  };
+
+  try {
+    const written: string[] = [];
+    for (const t of elementTargets) {
+      const paths = await captureElement(t, ctx, tmp, captureOpts);
+      written.push(...paths);
+    }
+    const entries = readBytes(written);
+
+    if (entries.length === 0) {
+      return { filename: 'export.png', contentType: 'image/png', body: new Uint8Array(0) };
+    }
+    if (entries.length === 1) {
+      return {
+        filename: entries[0].name,
+        contentType: 'image/png',
+        body: entries[0].bytes,
+      };
+    }
+    const zipBytes = await bundleZip(entries);
+    const baseSlug = elementTargets[0]?.canvasSlug ?? 'export';
+    return {
+      filename: `${baseSlug}.zip`,
+      contentType: 'application/zip',
+      body: zipBytes,
+    };
+  } finally {
+    rmSync(tmp, { recursive: true, force: true });
+  }
+}

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

@@ -0,0 +1,263 @@
+// Phase 6.5 T6b — PPTX adapter via `dom-to-pptx`.
+//
+// The hand-rolled walker + classifier from the previous iteration produced
+// PPTX where text/shape coordinates were collapsed near origin and colours
+// were lost — see DDR-043 for the swap rationale. `dom-to-pptx` runs inside
+// the page, reads computed styles + getBoundingClientRect for each element,
+// and emits one shape per node — the layout the browser already computed.
+// Multi-artboard exports concatenate at the byte level via a re-walk per
+// artboard.
+
+import { mkdtempSync, readFileSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+
+import path_dirname from 'node:path';
+
+import {
+  type ExportContext,
+  type ExportOptions,
+  type ExportResult,
+  canvasShellUrl,
+} from './index.ts';
+import type { Target } from './scope.ts';
+
+const PPTX_PLAYWRIGHT = path.join(import.meta.dir, '..', 'bin', '_pptx-playwright.mjs');
+const ENUMERATE_PLAYWRIGHT = path.join(
+  import.meta.dir,
+  '..',
+  'bin',
+  '_enumerate-artboards-playwright.mjs'
+);
+// dom-to-pptx ships a pre-bundled UMD that exposes `window.domToPptx`. The
+// exports map hides the bundle path (only `.` is listed), so we resolve via
+// the package.json directory instead of `require.resolve('dom-to-pptx/dist/…')`.
+function pptxBundlePath(): string {
+  const pkgJson = require.resolve('dom-to-pptx/package.json');
+  return path.join(path.dirname(pkgJson), 'dist', 'dom-to-pptx.bundle.js');
+}
+
+async function captureOne(
+  target: Extract<Target, { kind: 'element' }>,
+  ctx: ExportContext,
+  outFile: string,
+  timeoutSec: number,
+  bundlePath: string,
+  selector?: string
+): Promise<void> {
+  const args = [
+    PPTX_PLAYWRIGHT,
+    '--url',
+    canvasShellUrl(ctx, target.file),
+    '--selector',
+    selector ?? target.cssPath,
+    '--out',
+    outFile,
+    '--bundle-path',
+    bundlePath,
+    '--timeout',
+    String(timeoutSec),
+  ];
+  const proc = Bun.spawn(['node', ...args], {
+    cwd: path.dirname(PPTX_PLAYWRIGHT),
+    stdout: 'pipe',
+    stderr: 'pipe',
+  });
+  const [stdout, stderr] = await Promise.all([
+    new Response(proc.stdout).text(),
+    new Response(proc.stderr).text(),
+  ]);
+  const code = await proc.exited;
+  if (code !== 0) {
+    throw new Error(`_pptx-playwright exited ${code}: ${stderr.trim() || stdout.trim()}`);
+  }
+}
+
+export async function run(
+  targets: Target[],
+  options: ExportOptions,
+  ctx: ExportContext
+): Promise<ExportResult> {
+  if (!targets.length) {
+    return {
+      filename: 'export.pptx',
+      contentType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+      body: new Uint8Array(0),
+    };
+  }
+  const elementTargets = targets.filter(
+    (t): t is Extract<Target, { kind: 'element' }> => t.kind === 'element'
+  );
+  if (!elementTargets.length) {
+    throw new Error('pptx adapter requires element targets (got file-tree)');
+  }
+  const timeoutSec = (options.timeoutSec as number | undefined) ?? 20;
+  const bundlePath = pptxBundlePath();
+  const tmp = mkdtempSync(path.join(tmpdir(), 'maude-pptx-'));
+
+  try {
+    // Resolve the artboard set we need to render. For `multi: true` we walk
+    // `[data-dc-screen]` and render each separately, then merge.
+    const target = elementTargets[0];
+    if (!target) throw new Error('pptx adapter: no element target');
+    const baseSlug = target.canvasSlug ?? 'export';
+
+    // For canvas-as-separate (`multi: true`), render each artboard as its
+    // own PPTX, then concatenate the slides into a single deck.
+    if (target.multi) {
+      const artboardIds = await enumerateArtboards(target, ctx, timeoutSec);
+      const perArtboardFiles: string[] = [];
+      for (let i = 0; i < artboardIds.length; i += 1) {
+        const id = artboardIds[i];
+        const outFile = path.join(tmp, `artboard-${i + 1}.pptx`);
+        await captureOne(target, ctx, outFile, timeoutSec, bundlePath, `[data-dc-screen="${id}"]`);
+        perArtboardFiles.push(outFile);
+      }
+      const merged = await mergePptx(perArtboardFiles);
+      return {
+        filename: `${baseSlug}.pptx`,
+        contentType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        body: merged,
+      };
+    }
+
+    // Single artboard.
+    const outFile = path.join(tmp, `${baseSlug}.pptx`);
+    await captureOne(target, ctx, outFile, timeoutSec, bundlePath);
+    const bytes = new Uint8Array(readFileSync(outFile));
+    return {
+      filename: `${baseSlug}.pptx`,
+      contentType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+      body: bytes,
+    };
+  } finally {
+    rmSync(tmp, { recursive: true, force: true });
+  }
+}
+
+// Suppress unused.
+void path_dirname;
+
+/**
+ * Walk the live canvas page and return ordered `data-dc-screen` IDs.
+ * Reuses the existing playwright shim path — cheap because playwright keeps
+ * its browser warm across requests, but still one extra navigation per
+ * canvas-as-separate export. Worth caching long-term.
+ */
+async function enumerateArtboards(
+  target: Extract<Target, { kind: 'element' }>,
+  ctx: ExportContext,
+  timeoutSec: number
+): Promise<string[]> {
+  // Spawn `bin/_enumerate-artboards-playwright.mjs` via subprocess instead of
+  // importing playwright directly — keeps chromium-bidi + playwright internals
+  // out of the `bun build --compile` graph for the standalone server binary.
+  const url = canvasShellUrl(ctx, target.file);
+  const proc = Bun.spawn(
+    ['node', ENUMERATE_PLAYWRIGHT, '--url', url, '--timeout', String(timeoutSec)],
+    { cwd: path.dirname(ENUMERATE_PLAYWRIGHT), stdout: 'pipe', stderr: 'pipe' }
+  );
+  const [stdout, stderr] = await Promise.all([
+    new Response(proc.stdout).text(),
+    new Response(proc.stderr).text(),
+  ]);
+  const code = await proc.exited;
+  if (code !== 0) {
+    throw new Error(
+      `_enumerate-artboards-playwright exited ${code}: ${stderr.trim() || stdout.trim()}`
+    );
+  }
+  return stdout
+    .split('\n')
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+/**
+ * Concatenate slides from many single-slide PPTX files into one deck.
+ * pptxgenjs has no merge API. We unpack each ZIP, rewrite slide refs, and
+ * repack — minimal OOXML twiddling because every dom-to-pptx output has the
+ * same layout/master refs (the lib emits them deterministically).
+ */
+async function mergePptx(files: string[]): Promise<Uint8Array> {
+  if (files.length === 0) return new Uint8Array(0);
+  if (files.length === 1) return new Uint8Array(readFileSync(files[0]));
+  const JSZip = (await import('jszip')).default;
+  // Use the first file as the base — keep its layout/master/theme/presentation
+  // skeleton, replace its slide collection with the union from all inputs.
+  const base = await JSZip.loadAsync(new Uint8Array(readFileSync(files[0])));
+  const slides: Array<{ name: string; xml: string; rels: string }> = [];
+
+  for (const file of files) {
+    const zip = await JSZip.loadAsync(new Uint8Array(readFileSync(file)));
+    const slideNames = Object.keys(zip.files).filter((n) => /^ppt\/slides\/slide\d+\.xml$/.test(n));
+    for (const sn of slideNames) {
+      const slideEntry = zip.file(sn);
+      if (!slideEntry) continue;
+      const xml = await slideEntry.async('string');
+      const relsName = sn.replace('slides/', 'slides/_rels/').replace('.xml', '.xml.rels');
+      const relsEntry = zip.file(relsName);
+      const rels = relsEntry ? await relsEntry.async('string') : '';
+      slides.push({ name: sn, xml, rels });
+    }
+  }
+
+  // Rewrite slide filenames so they're contiguous.
+  const next = new JSZip();
+  for (const name of Object.keys(base.files)) {
+    // `Object.keys(base.files)` includes directory entries — `base.file(name)`
+    // returns null for those. Bare path-based filter first, then the entry
+    // lookup with a defensive null-check.
+    if (/\/$/.test(name)) continue;
+    if (/^ppt\/slides\/(slide|_rels\/slide)\d+\.xml(\.rels)?$/.test(name)) continue;
+    const entry = base.file(name);
+    if (!entry || entry.dir) continue;
+    next.file(name, await entry.async('uint8array'));
+  }
+  // Insert the merged slide list.
+  for (let i = 0; i < slides.length; i += 1) {
+    const s = slides[i];
+    const idx = i + 1;
+    next.file(`ppt/slides/slide${idx}.xml`, s.xml);
+    next.file(`ppt/slides/_rels/slide${idx}.xml.rels`, s.rels);
+  }
+  // Patch ppt/presentation.xml + its rels to reference the new slide count.
+  // The original presentation.xml from the first file references slide1; for
+  // merged decks > 1 slide we need to grow the sldIdLst. Done via simple
+  // regex on the XML string.
+  const presPath = 'ppt/presentation.xml';
+  const presRelsPath = 'ppt/_rels/presentation.xml.rels';
+  const presEntry = base.file(presPath);
+  const presRelsEntry = base.file(presRelsPath);
+  if (!presEntry || !presRelsEntry) {
+    // Malformed input — fall through to first input untouched. Better than
+    // throwing inside the merge for a quirk we can't recover from.
+    return new Uint8Array(readFileSync(files[0]));
+  }
+  const presXml = await presEntry.async('string');
+  const presRels = await presRelsEntry.async('string');
+  // sldIdLst: rebuild with N entries.
+  const idEntries = slides
+    .map((_, i) => `<p:sldId id="${256 + i}" r:id="rId${100 + i}"/>`)
+    .join('');
+  const newPresXml = presXml.replace(
+    /<p:sldIdLst>[\s\S]*?<\/p:sldIdLst>/,
+    `<p:sldIdLst>${idEntries}</p:sldIdLst>`
+  );
+  next.file(presPath, newPresXml);
+  // Build rels with N slide refs, keeping existing non-slide rels.
+  const existingRels = presRels.match(/<Relationship[^/]*\/>/g) ?? [];
+  const nonSlideRels = existingRels.filter(
+    (r) => !/Type="http:\/\/[^"]*relationships\/slide"/.test(r)
+  );
+  const slideRels = slides
+    .map(
+      (_, i) =>
+        `<Relationship Id="rId${100 + i}" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slide" Target="slides/slide${i + 1}.xml"/>`
+    )
+    .join('');
+  const newPresRels = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">${nonSlideRels.join('')}${slideRels}</Relationships>`;
+  next.file(presRelsPath, newPresRels);
+
+  return next.generateAsync({ type: 'uint8array' });
+}

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

@@ -0,0 +1,196 @@
+// Phase 6.5 T1 — scope resolver.
+//
+// Pure function: takes the current `_active.json` state + a user-chosen
+// scope, returns a flat `Target[]`. The downstream adapter (PNG / PDF / …)
+// owns rendering each Target; the resolver is render-agnostic.
+//
+// Why a single function instead of one-per-scope: the four scopes share an
+// `activeJson` precondition and a designRoot walk for `project-raw`. Keeping
+// them inline makes the fallback chain (`selection` → `artboard` when no
+// selection captured) explicit.
+
+import type { Dirent } from 'node:fs';
+import { readdir } from 'node:fs/promises';
+import path from 'node:path';
+
+/** The four user-facing scope choices from the export dialog. */
+export type Scope = 'selection' | 'artboard' | 'canvas-as-separate' | 'project-raw';
+
+/**
+ * What an adapter receives for each render unit. `element` targets carry a
+ * CSS selector + canvas reference (resolved at render time via Playwright);
+ * `file-tree` targets carry a flat list of repo-relative paths (consumed by
+ * the zip adapter only — other adapters reject).
+ */
+export type Target =
+  | {
+      kind: 'element';
+      /** CSS selector. Multi-match selectors (e.g. `[data-dc-screen]`) are valid; see `multi`. */
+      cssPath: string;
+      /** Slug derived from the canvas file path — POSIX, ext-less, relative to designRoot. */
+      canvasSlug: string;
+      /** Repo-relative canvas file path. */
+      file: string;
+      /** True when `cssPath` is expected to match many elements; the adapter iterates. */
+      multi?: boolean;
+    }
+  | {
+      kind: 'file-tree';
+      /** Repo-relative file paths to bundle. Always non-empty. */
+      paths: string[];
+    };
+
+/** Subset of `_active.json` the resolver consumes. */
+export interface ActiveJsonShape {
+  active: string | null;
+  selected:
+    | { file?: string; selector?: string; cssPath?: string }
+    | Array<{ file?: string; selector?: string; cssPath?: string }>
+    | null;
+}
+
+export interface ResolveScopeArgs {
+  scope: Scope;
+  activeJson: ActiveJsonShape;
+  /** Absolute path to the design root (e.g. `/abs/.design`). */
+  designRoot: string;
+  /** Absolute path to repo root. Required for `project-raw` to bound the walk. */
+  repoRoot?: string;
+}
+
+const RAW_EXCLUDES = new Set([
+  '_server.json',
+  '_active.json',
+  '_export-history.json',
+  '_history',
+  '_comments',
+  '_canvas-state',
+  'node_modules',
+  'dist',
+  '.DS_Store',
+]);
+
+/**
+ * Derive a canvas slug from a repo-relative or designRoot-relative file path.
+ * Mirrors `api.ts:fileSlug` semantics but stays inline to avoid a circular
+ * import (api.ts will eventually call into exporters from `commentsAdd`-style
+ * factories).
+ */
+function slugify(file: string, designRel: string): string {
+  let p = String(file).replace(/^\/+|\/+$/g, '');
+  const prefix = `${designRel.replace(/^\/+|\/+$/g, '')}/`;
+  if (p.startsWith(prefix)) p = p.slice(prefix.length);
+  return p
+    .replace(/\//g, '-')
+    .replace(/\s+/g, '_')
+    .replace(/\.(tsx|html)$/i, '')
+    .replace(/^\.+/, '')
+    .toLowerCase();
+}
+
+interface SelectionShape {
+  file?: string;
+  selector?: string;
+  cssPath?: string;
+}
+
+function firstSelection(selected: ActiveJsonShape['selected']): SelectionShape | null {
+  if (!selected) return null;
+  if (Array.isArray(selected)) return selected[0] ?? null;
+  return selected;
+}
+
+async function walkProjectRaw(root: string): Promise<string[]> {
+  const out: string[] = [];
+  async function walk(absDir: string, relDir: string): Promise<void> {
+    let entries: Dirent[];
+    try {
+      entries = await readdir(absDir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    entries.sort((a, b) => a.name.localeCompare(b.name));
+    for (const e of entries) {
+      if (RAW_EXCLUDES.has(e.name)) continue;
+      if (e.name.endsWith('.log')) continue;
+      const abs = path.join(absDir, e.name);
+      const rel = relDir ? path.posix.join(relDir, e.name) : e.name;
+      if (e.isDirectory()) {
+        await walk(abs, rel);
+      } else if (e.isFile()) {
+        out.push(rel);
+      }
+    }
+  }
+  await walk(root, '');
+  return out;
+}
+
+/**
+ * Resolve a scope choice into a Target[]. Pure beyond filesystem walks for
+ * `project-raw`. Never throws — invalid input collapses to `[]` and the
+ * adapter's "no targets" path emits an empty payload.
+ */
+export async function resolveScope(args: ResolveScopeArgs): Promise<Target[]> {
+  const { scope, activeJson, designRoot } = args;
+  const designRel = path.basename(designRoot);
+
+  // `project-raw` is independent of `_active.json` — the user always exports
+  // the whole tree regardless of what's selected.
+  if (scope === 'project-raw') {
+    const paths = await walkProjectRaw(designRoot);
+    if (!paths.length) return [];
+    return [{ kind: 'file-tree', paths }];
+  }
+
+  const activeFile = activeJson.active;
+  if (!activeFile) return [];
+  const slug = slugify(activeFile, designRel);
+  const sel = firstSelection(activeJson.selected);
+
+  if (scope === 'selection') {
+    const selector = sel?.selector ?? sel?.cssPath;
+    if (!sel || !selector) {
+      // Plan: "Falls back to artboard if no selection." Recurse with the
+      // artboard scope so the fallback semantics live in one place.
+      return resolveScope({ ...args, scope: 'artboard' });
+    }
+    const file = sel.file ?? activeFile;
+    return [
+      {
+        kind: 'element',
+        cssPath: selector,
+        canvasSlug: slugify(file, designRel),
+        file,
+      },
+    ];
+  }
+
+  if (scope === 'artboard') {
+    // The adapter handles "closest [data-dc-screen] ancestor" at render time
+    // via Playwright. Server-side we only know the selection's selector — we
+    // pass it through with a marker and the adapter widens to the artboard.
+    // If no selection, fall back to "first artboard on the active canvas".
+    const baseSelector = sel?.selector ?? sel?.cssPath ?? '[data-dc-screen]:first-of-type';
+    return [
+      {
+        kind: 'element',
+        cssPath: baseSelector,
+        canvasSlug: slug,
+        file: activeFile,
+      },
+    ];
+  }
+
+  // canvas-as-separate — every [data-dc-screen] on the active canvas.
+  // Adapter expands `multi: true` into N renders in document order.
+  return [
+    {
+      kind: 'element',
+      cssPath: '[data-dc-screen]',
+      canvasSlug: slug,
+      file: activeFile,
+      multi: true,
+    },
+  ];
+}