@1agh/maude 0.15.0 → 0.17.1

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

@@ -0,0 +1,122 @@
+// Phase 6.5 T4 — SVG adapter.
+//
+// Walks the rendered DOM via Playwright (mirrors the screenshot path) and
+// emits an SVG with <foreignObject>-wrapped HTML + concatenated stylesheets.
+// Web fonts are NOT inlined in v1 — see plan T4 caveat + DDR (Safari +
+// Illustrator render foreignObject inconsistently; vector text from the
+// HTML payload remains editable in Illustrator/Inkscape on the happy path).
+
+import { mkdtempSync, readFileSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+
+import JSZip from 'jszip';
+
+import { getBrowserBundle } from './_browser-bundles.ts';
+import {
+  type ExportContext,
+  type ExportOptions,
+  type ExportResult,
+  canvasShellUrl,
+} from './index.ts';
+import type { Target } from './scope.ts';
+
+const SVG_PLAYWRIGHT = path.join(import.meta.dir, '..', 'bin', '_svg-playwright.mjs');
+
+async function captureSvg(
+  target: Extract<Target, { kind: 'element' }>,
+  ctx: ExportContext,
+  outDir: string,
+  timeoutSec: number,
+  bundlePath: string
+): Promise<string[]> {
+  const args = [
+    SVG_PLAYWRIGHT,
+    '--url',
+    canvasShellUrl(ctx, target.file),
+    '--selector',
+    target.cssPath,
+    '--bundle-path',
+    bundlePath,
+    '--timeout',
+    String(timeoutSec),
+  ];
+  if (target.multi) {
+    args.push('--multi', '1', '--out-dir', outDir);
+  } else {
+    args.push('--widen-to-artboard', '1', '--out', path.join(outDir, `${target.canvasSlug}.svg`));
+  }
+
+  // Run via `node` so the shim's `import 'playwright'` resolves against
+  // dev-server/node_modules (playwright is a devDep). `npm exec` doesn't
+  // bridge the module path for ESM imports — confirmed against npm 10.x.
+  const proc = Bun.spawn(['node', ...args], {
+    cwd: path.dirname(SVG_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(`_svg-playwright exited ${code}: ${stderr.trim() || stdout.trim()}`);
+  }
+  return stdout
+    .split('\n')
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+export async function run(
+  targets: Target[],
+  options: ExportOptions,
+  ctx: ExportContext
+): Promise<ExportResult> {
+  if (!targets.length) {
+    return { filename: 'export.svg', contentType: 'image/svg+xml', body: new Uint8Array(0) };
+  }
+  const elementTargets = targets.filter(
+    (t): t is Extract<Target, { kind: 'element' }> => t.kind === 'element'
+  );
+  if (!elementTargets.length) {
+    throw new Error('svg adapter requires element targets (got file-tree)');
+  }
+  const timeoutSec = (options.timeoutSec as number | undefined) ?? 12;
+  const bundlePath = await getBrowserBundle('dom-to-svg', 'domToSvg');
+  const tmp = mkdtempSync(path.join(tmpdir(), 'maude-svg-'));
+
+  try {
+    const written: string[] = [];
+    for (const t of elementTargets) {
+      const paths = await captureSvg(t, ctx, tmp, timeoutSec, bundlePath);
+      written.push(...paths);
+    }
+    if (!written.length) {
+      return { filename: 'export.svg', contentType: 'image/svg+xml', body: new Uint8Array(0) };
+    }
+    const entries = written.map((p) => ({
+      name: path.basename(p),
+      bytes: new Uint8Array(readFileSync(p)),
+    }));
+    if (entries.length === 1) {
+      return {
+        filename: entries[0].name,
+        contentType: 'image/svg+xml',
+        body: entries[0].bytes,
+      };
+    }
+    const zip = new JSZip();
+    for (const e of entries) zip.file(e.name, e.bytes);
+    const zipBytes = await zip.generateAsync({ type: 'uint8array', compression: 'DEFLATE' });
+    const baseSlug = elementTargets[0]?.canvasSlug ?? 'export';
+    return {
+      filename: `${baseSlug}.svg.zip`,
+      contentType: 'application/zip',
+      body: zipBytes,
+    };
+  } finally {
+    rmSync(tmp, { recursive: true, force: true });
+  }
+}

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

@@ -0,0 +1,109 @@
+// Phase 6.5 T7 — project-raw ZIP adapter.
+//
+// Consumes one or more file-tree targets (typically just the single one the
+// scope resolver returns for `project-raw`) and streams them into a ZIP.
+// Excludes runtime + node_modules + dist by default; user can override via
+// `options.exclude` (gitignore-style globs) or `options.include` (filter to
+// `'system' | 'canvases' | 'assets' | 'meta'` subtrees).
+//
+// Memory profile: JSZip's `generateAsync({ type: 'uint8array' })` builds the
+// archive in memory. Plan T7 calls for streaming via Bun's Response stream
+// to bound RSS at large designRoots — that's a refinement once a real user
+// hits the buffer ceiling. Until then, the buffered path keeps the contract
+// simple (Uint8Array body matches every other adapter).
+
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
+import JSZip from 'jszip';
+
+import type { ExportContext, ExportOptions, ExportResult } from './index.ts';
+import type { Target } from './scope.ts';
+
+type IncludeTag = 'system' | 'canvases' | 'assets' | 'meta';
+
+function matchesGlob(p: string, glob: string): boolean {
+  // Tiny gitignore-style matcher. Supports `*`, `**`, and a trailing slash to
+  // mean "directory". Anything fancier (negation, brace expansion) is left to
+  // the user — surface in T13 docs.
+  const norm = glob.replace(/^\.\//, '').replace(/\/+$/, '');
+  if (norm.includes('**')) {
+    const re = new RegExp(
+      `^${norm
+        .replace(/[.+^${}()|[\]\\]/g, '\\$&')
+        .replace(/\*\*/g, '.*')
+        .replace(/\*/g, '[^/]*')}(?:/.*)?$`
+    );
+    return re.test(p);
+  }
+  if (norm.includes('*')) {
+    const re = new RegExp(`^${norm.replace(/[.+^${}()|[\]\\]/g, '\\$&').replace(/\*/g, '[^/]*')}$`);
+    return re.test(p);
+  }
+  return p === norm || p.startsWith(`${norm}/`);
+}
+
+function isUnder(p: string, prefix: string): boolean {
+  return p === prefix || p.startsWith(`${prefix}/`);
+}
+
+function filterPaths(paths: string[], options: ExportOptions): string[] {
+  const exclude = Array.isArray(options.exclude) ? (options.exclude as string[]) : [];
+  const include = Array.isArray(options.include) ? (options.include as IncludeTag[]) : null;
+  const tagPrefix: Record<IncludeTag, string> = {
+    system: 'system',
+    canvases: 'ui',
+    assets: 'assets',
+    meta: '',
+  };
+  return paths.filter((p) => {
+    if (exclude.some((g) => matchesGlob(p, g))) return false;
+    if (include) {
+      const hit = include.some((tag) => {
+        if (tag === 'meta') {
+          return /\.(json|md|css)$/i.test(p) && !p.includes('/');
+        }
+        return isUnder(p, tagPrefix[tag]);
+      });
+      if (!hit) return false;
+    }
+    return true;
+  });
+}
+
+export async function run(
+  targets: Target[],
+  options: ExportOptions,
+  ctx: ExportContext
+): Promise<ExportResult> {
+  if (!targets.length) {
+    return { filename: 'project.zip', contentType: 'application/zip', body: new Uint8Array(0) };
+  }
+  const fileTreeTargets = targets.filter(
+    (t): t is Extract<Target, { kind: 'file-tree' }> => t.kind === 'file-tree'
+  );
+  if (!fileTreeTargets.length) {
+    throw new Error('zip adapter requires file-tree targets (got element)');
+  }
+
+  const allPaths = fileTreeTargets.flatMap((t) => t.paths);
+  const kept = filterPaths(allPaths, options);
+
+  const zip = new JSZip();
+  for (const rel of kept) {
+    const abs = path.join(ctx.designRoot, rel);
+    try {
+      const bytes = readFileSync(abs);
+      zip.file(rel, new Uint8Array(bytes));
+    } catch {
+      // File vanished between scope walk and read — skip.
+    }
+  }
+  const bytes = await zip.generateAsync({ type: 'uint8array', compression: 'DEFLATE' });
+  const projectName = path.basename(ctx.designRoot).replace(/^\./, '') || 'project';
+  return {
+    filename: `${projectName}.zip`,
+    contentType: 'application/zip',
+    body: bytes,
+  };
+}

package/plugins/design/dev-server/http.ts

@@ -13,6 +13,8 @@ import { buildCanvasModule } from './canvas-build.ts';
 import { canvasLibPath } from './canvas-lib-resolver.ts';
 import { TranspileError } from './canvas-pipeline.ts';
 import type { Context } from './context.ts';
+import { isFormat, isScope, runExport } from './exporters/index.ts';
+import type { ActiveJsonShape } from './exporters/scope.ts';
 import type { Inspect } from './inspect.ts';
 import { canvasSlug, writeLocator } from './locator.ts';
 import { RUNTIME_PACKAGES, getRuntimeBundle, packageForSlug, slugFor } from './runtime-bundle.ts';
@@ -254,6 +256,15 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect): Http {
       return new Response('Method not allowed', { status: 405 });
     },
 
+    '/_api/git-committers': async (req: Request) => {
+      // Phase 6 — feed for the @mention autocomplete in composer + reply box.
+      // GET → top-20 committers on HEAD (`git shortlog -sne | head -20`)
+      // already cached server-side for 60 s.
+      if (req.method !== 'GET') return new Response('Method not allowed', { status: 405 });
+      const committers = await api.gitCommitters();
+      return Response.json({ committers }, { headers: { 'Cache-Control': 'no-store' } });
+    },
+
     '/_api/annotations': async (req: Request) => {
       // Phase 5 — `<designRoot>/<slug>.annotations.svg` read / overwrite.
       // GET ?file=<repo-relative-canvas-path>           → SVG text (empty if absent)
@@ -286,6 +297,84 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect): Http {
       return new Response('Method not allowed', { status: 405 });
     },
 
+    '/_api/export-history': async (req: Request) => {
+      // Phase 6.5 T10 — read-only recent-exports feed for the dialog's
+      // Recent tab. Writes happen as a side-effect of `/_api/export`.
+      if (req.method !== 'GET') return new Response('Method not allowed', { status: 405 });
+      const history = await api.loadExportHistory();
+      return Response.json({ history }, { headers: { 'Cache-Control': 'no-store' } });
+    },
+
+    '/_api/export': async (req: Request) => {
+      // Phase 6.5 — single dispatch endpoint for the export pipeline.
+      // POST body { format, scope, options? } → binary stream with
+      // Content-Disposition + Content-Type set by the adapter.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      const body = await readJson<{
+        format?: unknown;
+        scope?: unknown;
+        options?: Record<string, unknown>;
+      }>(req, 64 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      if (!isFormat(body.format)) return new Response('unknown or missing format', { status: 400 });
+      if (!isScope(body.scope)) return new Response('unknown or missing scope', { status: 400 });
+      // `inspect.state` is the live `_active.json` — readers narrow to the
+      // resolver's subset locally so the export pipeline doesn't pin the
+      // wider ActiveState interface.
+      const activeJson = inspect.state as unknown as ActiveJsonShape;
+      try {
+        const result = await runExport({
+          format: body.format,
+          scope: body.scope,
+          options: body.options ?? {},
+          resolve: { activeJson, designRoot: ctx.paths.designRoot, repoRoot: ctx.paths.repoRoot },
+          ctx: {
+            designRoot: ctx.paths.designRoot,
+            repoRoot: ctx.paths.repoRoot,
+            // Adapters reach back into the server via this origin only when
+            // they need Playwright rendering (PNG / PDF / SVG / HTML). The
+            // host that received this request is, by definition, the one
+            // serving the canvas.
+            serverOrigin: new URL(req.url).origin,
+            // Mirror `client/app.jsx:85` — the per-DS tokensCssRel wins over
+            // the legacy top-level default (which still points at the pre-
+            // multi-DS layout `system/colors_and_type.css`). Without the
+            // per-DS path, the standalone `_canvas-shell.html` 404s on the
+            // tokens link and the rendered DOM uses `var(--bg-0)` unresolved
+            // → screenshots come out blank. See canvasShellUrl().
+            tokensCssRel: ctx.cfg.designSystems?.[0]?.tokensCssRel ?? ctx.cfg.tokensCssRel,
+          },
+        });
+        // Fire-and-forget history append — failure here doesn't block the
+        // download. Synchronous await keeps the order: history reflects the
+        // export the moment the client sees a 200.
+        try {
+          await api.appendExportHistory({
+            format: body.format,
+            scope: body.scope,
+            options: body.options ?? {},
+            filename: result.filename,
+            at: new Date().toISOString(),
+          });
+        } catch {
+          /* ignore — history is best-effort */
+        }
+        // Bun.serve accepts Uint8Array directly; the cast satisfies the
+        // SharedArrayBuffer-strict BodyInit narrowing on @types/bun.
+        return new Response(result.body as unknown as BodyInit, {
+          status: 200,
+          headers: {
+            'Content-Type': result.contentType,
+            'Content-Disposition': `attachment; filename="${result.filename}"`,
+            'Cache-Control': 'no-store',
+          },
+        });
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        return new Response(`export failed: ${msg}`, { status: 500 });
+      }
+    },
+
     '/_canvas-state': async (req: Request) => {
       const url = new URL(req.url);
       if (req.method === 'GET') {
@@ -325,6 +414,26 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect): Http {
       const url = new URL(req.url);
       const pathname = url.pathname;
 
+      // Phase 6 — POST /_api/comments/<id>/reply. Dynamic path, so it lives in
+      // the fall-through instead of the static `routes` map. `<id>` is the
+      // c_<hex> id of the parent comment; body is `{ body, author? }`. Bodies
+      // share the same 4000-char cap as a top-level comment.
+      const replyMatch = pathname.match(/^\/_api\/comments\/([A-Za-z0-9_]+)\/reply$/);
+      if (replyMatch) {
+        if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+        const id = replyMatch[1] ?? '';
+        const body = await readJson<{ body?: string; author?: string }>(req);
+        if (!body || typeof body.body !== 'string' || !body.body.trim()) {
+          return new Response('body.body required', { status: 400 });
+        }
+        const next = await api.commentsAddReply(id, {
+          body: body.body,
+          author: typeof body.author === 'string' ? body.author : undefined,
+        });
+        if (!next) return new Response('Not found', { status: 404 });
+        return Response.json(next, { headers: { 'Cache-Control': 'no-store' } });
+      }
+
       // Bundled client assets (preferred path — bundle from dist/).
       if (pathname.startsWith('/_client/')) {
         const rel = decodeURIComponent(pathname.slice('/_client/'.length));

package/plugins/design/dev-server/input-router.tsx

@@ -240,6 +240,21 @@ export function isEditableTarget(t: EventTarget | null): boolean {
   return false;
 }
 
+/**
+ * Phase 6 — the comments overlay (pins / composer / thread popover / mention
+ * popup) lives INSIDE the canvas world, which means its DOM nodes are inside
+ * the input-router's capture host. Without an explicit bail-out the router
+ * would `preventDefault + stopImmediatePropagation` every click on a
+ * composer button while comment mode is active, blocking Save / Cancel.
+ *
+ * We treat the overlay nodes like editable form widgets — the router yields,
+ * the React event handler runs.
+ */
+export function isOverlayTarget(t: EventTarget | null): boolean {
+  if (!t || !(t as Element).closest) return false;
+  return !!(t as Element).closest('.cm-composer, .cm-thread, .cm-mention-popup, .cm-pin');
+}
+
 export function useInputRouter(opts: UseInputRouterOptions): void {
   const { hostRef, getActiveTool, isSpaceHeld, callbacks, enabled = true } = opts;
 
@@ -290,6 +305,10 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
     };
 
     const onPointerDown = (e: PointerEvent): void => {
+      // Phase 6 — overlay surfaces (composer / thread / mention popup) own
+      // their own clicks. The router is in capture phase, so we have to
+      // bail HERE before classify can claim the event.
+      if (isOverlayTarget(e.target)) return;
       const action = classify({
         type: 'pointerdown',
         button: e.button,
@@ -321,6 +340,7 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
      * stop their twin mousedown.
      */
     const onMouseDown = (e: MouseEvent): void => {
+      if (isOverlayTarget(e.target)) return;
       const action = classify({
         type: 'pointerdown',
         button: e.button,
@@ -346,6 +366,7 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
      * matching pointerdown (re-classify with the same modifiers).
      */
     const onClick = (e: MouseEvent): void => {
+      if (isOverlayTarget(e.target)) return;
       const tool = getActiveTool();
       const mod = e.metaKey || e.ctrlKey;
       const wouldRoute =

package/plugins/design/dev-server/inspect.ts

@@ -227,7 +227,7 @@ const INSPECTOR_SCRIPT = `
 
   var styleEl = document.createElement('style');
   styleEl.textContent = [
-    '.dgn-pin { position: absolute; top: 0; left: 0; z-index: 2147483646; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px 999px 999px 4px; background: #facc15; color: #1c1917; font: 600 11px/22px ui-sans-serif, system-ui, sans-serif; text-align: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4); transition: filter 120ms; transform-origin: bottom left; will-change: transform; }',
+    '.dgn-pin { position: absolute; top: 0; left: 0; z-index: 2147483646; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px 999px 999px 4px; background: #facc15; color: #1c1917; font: 600 11px/22px var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); text-align: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4); transition: filter 120ms; transform-origin: bottom left; will-change: transform; }',
     '.dgn-pin:hover { filter: brightness(1.1); outline: 2px solid rgba(0,0,0,0.3); }',
     '.dgn-pin.resolved { background: #22c55e; color: #052e16; }',
     '.dgn-pin.focused { box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 0 2px #fff; outline: 2px solid #fff; }'

package/plugins/design/dev-server/server.mjs

@@ -573,7 +573,7 @@ const INSPECTOR_SCRIPT = `
     '.dgn-insp-selected { outline: 2px solid #00D4E4 !important; outline-offset: 1px !important; box-shadow: 0 0 0 4px rgba(0,212,228,0.18) !important; }',
     '.dgn-insp-label { position: fixed; z-index: 2147483647; font: 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; background: #00D4E4; color: #000; padding: 4px 8px; border-radius: 4px; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.4); transform: translate(0, -110%); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }',
     '.dgn-insp-label.warn { background: #ef4444; color: #fff; }',
-    '.dgn-pin { position: absolute; top: 0; left: 0; z-index: 2147483646; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px 999px 999px 4px; background: #facc15; color: #1c1917; font: 600 11px/22px ui-sans-serif, system-ui, sans-serif; text-align: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4); transition: filter 120ms; transform-origin: bottom left; will-change: transform; }',
+    '.dgn-pin { position: absolute; top: 0; left: 0; z-index: 2147483646; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px 999px 999px 4px; background: #facc15; color: #1c1917; font: 600 11px/22px var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); text-align: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4); transition: filter 120ms; transform-origin: bottom left; will-change: transform; }',
     '.dgn-pin:hover { filter: brightness(1.1); outline: 2px solid rgba(0,0,0,0.3); }',
     '.dgn-pin.resolved { background: #22c55e; color: #052e16; }',
     '.dgn-pin.focused { box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 0 2px #fff; outline: 2px solid #fff; }'

package/plugins/design/dev-server/test/canvas-meta-api.test.ts

@@ -24,16 +24,6 @@ interface MetaShape {
   [k: string]: unknown;
 }
 
-function seedCanvas(designRoot: string, name = 'Phase4.tsx', meta?: MetaShape): string {
-  const ui = join(designRoot, 'ui');
-  mkdirSync(ui, { recursive: true });
-  const tsxPath = join(ui, name);
-  writeFileSync(tsxPath, 'export default function P(){return <main/>}\n');
-  const metaPath = tsxPath.replace(/\.tsx$/, '.meta.json');
-  if (meta) writeFileSync(metaPath, JSON.stringify(meta, null, 2));
-  return tsxPath.replace(`${designRoot.replace(/\.design$/, '')}`, '').replace(/^\/+/, '');
-}
-
 function repoRel(designRoot: string, abs: string): string {
   // designRoot ends in `.design`. repoRoot is its parent.
   const repoRoot = designRoot.replace(/\.design$/, '').replace(/\/+$/, '');