@1agh/maude 0.16.0 → 0.17.2

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

@@ -0,0 +1,29 @@
+// Phase 6.5 T4 — SVG adapter contract tests.
+//
+// Real Playwright walk is integration-shape (lands as scenario). Here we
+// cover empty-input + file-tree-rejection.
+
+import { describe, expect, test } from 'bun:test';
+
+import { run } from '../../exporters/svg.ts';
+
+const CTX = {
+  designRoot: '/tmp/.design',
+  repoRoot: '/tmp',
+  serverOrigin: 'http://localhost:0',
+};
+
+describe('svg adapter — contract', () => {
+  test('empty targets → zero-byte SVG placeholder', async () => {
+    const r = await run([], {}, CTX);
+    expect(r.contentType).toBe('image/svg+xml');
+    expect(r.body.byteLength).toBe(0);
+    expect(r.filename.endsWith('.svg')).toBe(true);
+  });
+
+  test('file-tree targets → throws', async () => {
+    await expect(run([{ kind: 'file-tree', paths: ['ui/Home.tsx'] }], {}, CTX)).rejects.toThrow(
+      /element targets/i
+    );
+  });
+});

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

@@ -0,0 +1,105 @@
+// Phase 6.5 T7 — project-raw ZIP adapter tests.
+//
+// Real walk + bundle against a sandboxed designRoot, then unzip the result
+// and diff against expected contents.
+
+import { mkdirSync, mkdtempSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+import { describe, expect, test } from 'bun:test';
+import JSZip from 'jszip';
+
+import { resolveScope } from '../../exporters/scope.ts';
+import { run } from '../../exporters/zip.ts';
+
+function setupTree(): { root: string; designRoot: string } {
+  const root = mkdtempSync(join(tmpdir(), 'zip-adapter-'));
+  const designRoot = join(root, '.design');
+  mkdirSync(join(designRoot, 'ui'), { recursive: true });
+  mkdirSync(join(designRoot, 'system', 'project'), { recursive: true });
+  mkdirSync(join(designRoot, '_history', 'old'), { recursive: true });
+  writeFileSync(join(designRoot, 'config.json'), '{"name":"x"}');
+  writeFileSync(join(designRoot, 'README.md'), '# proj');
+  writeFileSync(join(designRoot, 'ui', 'Home.tsx'), 'export default ()=>null');
+  writeFileSync(join(designRoot, 'system', 'project', 'README.md'), '# ds');
+  writeFileSync(join(designRoot, '_history', 'old', 'snap.tsx'), '// snap');
+  writeFileSync(join(designRoot, '.DS_Store'), ' ');
+  return { root, designRoot };
+}
+
+describe('zip adapter — project-raw', () => {
+  test('bundles designRoot and excludes runtime artefacts by default', async () => {
+    const { root, designRoot } = setupTree();
+    const targets = await resolveScope({
+      scope: 'project-raw',
+      activeJson: { active: null, selected: null },
+      designRoot,
+      repoRoot: root,
+    });
+    const r = await run(targets, {}, { designRoot, repoRoot: root, serverOrigin: '' });
+    expect(r.contentType).toBe('application/zip');
+    expect(r.body.byteLength).toBeGreaterThan(0);
+
+    const unzipped = await JSZip.loadAsync(r.body);
+    const names = Object.keys(unzipped.files).sort();
+    expect(names).toContain('config.json');
+    expect(names).toContain('README.md');
+    expect(names).toContain('ui/Home.tsx');
+    expect(names).toContain('system/project/README.md');
+    expect(names).not.toContain('.DS_Store');
+    expect(names.every((n) => !n.startsWith('_history/'))).toBe(true);
+  });
+
+  test('options.exclude prunes additional paths', async () => {
+    const { root, designRoot } = setupTree();
+    const targets = await resolveScope({
+      scope: 'project-raw',
+      activeJson: { active: null, selected: null },
+      designRoot,
+      repoRoot: root,
+    });
+    const r = await run(
+      targets,
+      { exclude: ['ui/**'] },
+      { designRoot, repoRoot: root, serverOrigin: '' }
+    );
+    const unzipped = await JSZip.loadAsync(r.body);
+    const names = Object.keys(unzipped.files);
+    expect(names.every((n) => !n.startsWith('ui/'))).toBe(true);
+    expect(names).toContain('system/project/README.md');
+  });
+
+  test('options.include narrows to a single subtree', async () => {
+    const { root, designRoot } = setupTree();
+    const targets = await resolveScope({
+      scope: 'project-raw',
+      activeJson: { active: null, selected: null },
+      designRoot,
+      repoRoot: root,
+    });
+    const r = await run(
+      targets,
+      { include: ['system'] },
+      { designRoot, repoRoot: root, serverOrigin: '' }
+    );
+    const unzipped = await JSZip.loadAsync(r.body);
+    const names = Object.keys(unzipped.files);
+    expect(names.every((n) => n.startsWith('system/'))).toBe(true);
+  });
+
+  test('empty targets → zero-byte ZIP placeholder', async () => {
+    const r = await run([], {}, { designRoot: '/tmp/.design', repoRoot: '/tmp', serverOrigin: '' });
+    expect(r.body.byteLength).toBe(0);
+  });
+
+  test('element targets → throws', async () => {
+    await expect(
+      run(
+        [{ kind: 'element', cssPath: '.x', canvasSlug: 'x', file: 'ui/x.tsx' }],
+        {},
+        { designRoot: '/tmp/.design', repoRoot: '/tmp', serverOrigin: '' }
+      )
+    ).rejects.toThrow(/file-tree targets/i);
+  });
+});

package/plugins/design/dev-server/tool-palette.tsx

@@ -32,13 +32,13 @@ const PALETTE_CSS = `
   transform: translateX(-50%);
   display: flex;
   align-items: stretch;
-  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;
-  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
-  font-family: ui-sans-serif, system-ui, sans-serif;
+  background: var(--u-bg-2, var(--bg-1, rgba(255,255,255,0.98)));
+  border: 1px solid var(--u-fg-0, #1c1917);
+  border-radius: 0;
+  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
+  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 12px;
-  color: var(--fg-0, #1a1a1a);
+  color: var(--u-fg-0, var(--fg-0, #1a1a1a));
   z-index: 6;
   user-select: none;
   /* Intentionally NO overflow:hidden — the zoom popover (.dc-tp-popover) is
@@ -54,14 +54,14 @@ const PALETTE_CSS = `
 }
 .dc-tool-palette .dc-tp-sep {
   width: 1px;
-  background: var(--u-border-3, rgba(0,0,0,0.08));
+  background: var(--u-border-subtle, rgba(0,0,0,0.08));
   margin: 6px 0;
 }
 .dc-tool-palette button {
   appearance: none;
   background: transparent;
   border: 0;
-  border-radius: 6px;
+  border-radius: 0;
   padding: 0;
   width: 32px;
   height: 32px;
@@ -85,10 +85,10 @@ const PALETTE_CSS = `
   min-width: 56px;
   padding: 0 8px;
   font-variant-numeric: tabular-nums;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
   letter-spacing: 0.04em;
-  border-radius: 6px;
+  border-radius: 0;
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -98,21 +98,22 @@ const PALETTE_CSS = `
   position: absolute;
   right: 4px;
   bottom: 44px;
-  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;
-  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
+  background: var(--u-bg-2, var(--bg-1, rgba(255,255,255,0.98)));
+  border: 1px solid var(--u-fg-0, #1c1917);
+  border-radius: 0;
+  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
   display: flex;
   flex-direction: column;
   padding: 4px;
   min-width: 160px;
   z-index: 7;
+  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
 }
 .dc-tp-popover button {
   appearance: none;
   background: transparent;
   border: 0;
-  border-radius: 6px;
+  border-radius: 0;
   padding: 6px 10px;
   text-align: left;
   font: inherit;
@@ -121,7 +122,6 @@ const PALETTE_CSS = `
   display: flex;
   justify-content: space-between;
   gap: 16px;
-  font-family: ui-sans-serif, system-ui, sans-serif;
   width: 100%;
 }
 .dc-tp-popover button:hover { background: rgba(0,0,0,0.04); }
@@ -201,6 +201,24 @@ export function ToolPalette() {
       </div>
       <div className="dc-tp-sep" />
       <div className="dc-tp-group">
+        <button
+          type="button"
+          aria-label="Export (⌘E)"
+          title="Export (⌘E)"
+          onClick={() => {
+            // Phase 6.5 T9 — dispatch the same custom event the context-menu
+            // uses; the dialog provider opens with the default scope.
+            try {
+              window.dispatchEvent(new CustomEvent('maude:open-export', { detail: {} }));
+            } catch {
+              /* ignore — non-window environments */
+            }
+          }}
+        >
+          <span aria-hidden="true" style={{ fontSize: 14, lineHeight: 1 }}>
+            ⬇
+          </span>
+        </button>
         <button
           type="button"
           aria-label={

package/plugins/design/templates/_shell.html

@@ -43,6 +43,32 @@
       }
       #canvas-mount-error:empty { display: none; }
     </style>
+    <!-- Phase 6.5 export — when the shell is loaded with `&hide-chrome=1`
+         (the exporters set this), suppress every dev-server overlay so the
+         capture only carries the artboard content. The runtime chrome —
+         tool palette, mini-world-map, comment pins, draw layer, snap guides,
+         selection halos, the artboard label button — is not part of the
+         design and would otherwise show up in PNG / PDF / SVG exports. -->
+    <style id="canvas-hide-chrome" media="not all">
+      .dc-tool-palette,
+      .dc-cv-halo,
+      .dc-cv-group-bbox,
+      .dc-mini-map,
+      .dc-mini-world-map,
+      .dc-world-map,
+      .dc-snap-guide,
+      .dc-annot-overlay,
+      .dc-annot-svg,
+      .dc-annot-chrome,
+      .dc-annot-ctx,
+      .cm-layer,
+      .cm-pin,
+      .cm-thread,
+      .cm-composer,
+      .dc-artboard-label,
+      [data-dc-overlay],
+      [data-mdcc-annotations] { display: none !important; }
+    </style>
     <!-- Tokens + DS component CSS — loaded by the host app via the canvas's
          .meta.json (set later via window.parent postMessage, OR by the dev-
          server when it knows the active DS). For now we load both common
@@ -73,6 +99,13 @@
       const tokensRel = params.get('tokens') || '';
       const componentsRel = params.get('components') || '';
       const layoutRel = params.get('layout') || '';
+      // Phase 6.5 — exporters pass ?hide-chrome=1 to flip the export-mode
+      // stylesheet from `media="not all"` to `media="all"`, hiding the
+      // dev-server overlays during capture. See `<style id="canvas-hide-chrome">`.
+      if (params.get('hide-chrome') === '1') {
+        const styleEl = document.getElementById('canvas-hide-chrome');
+        if (styleEl) styleEl.media = 'all';
+      }
 
       function showError(msg) {
         const el = document.getElementById('canvas-mount-error');