@bendyline/squisq 1.4.0 → 1.5.0

package/src/__tests__/drawing.test.ts

@@ -0,0 +1,109 @@
+import { describe, it, expect } from 'vitest';
+import { parseMarkdown } from '../markdown/parse.js';
+import { stringifyMarkdown } from '../markdown/stringify.js';
+import { markdownToDoc, flattenBlocks, flattenRenderableBlocks } from '../doc/markdownToDoc.js';
+import { validateMarkdownSource } from '../doc/validate.js';
+import { isContainerTemplate } from '../doc/templates/index.js';
+
+const ORG_CHART = `## Org chart {[drawing]}
+
+### CEO {#ceo} {[rectangle x=21 y=25 width=100 height=100]}
+
+The CEO is the chief executive.
+
+### reports to {[line from=ceo to=dev1]}
+
+### Developer {#dev1} {[rectangle x=21 y=190 width=100 height=100]}
+
+The lead developer.
+`;
+
+describe('drawing markdown → doc', () => {
+  it('turns child headings into shape blocks with geometry overrides', () => {
+    const doc = markdownToDoc(parseMarkdown(ORG_CHART));
+    const drawing = doc.blocks[0];
+    expect(drawing.template).toBe('drawing');
+    expect(drawing.children).toHaveLength(3);
+
+    const ceo = drawing.children!.find((c) => c.id === 'ceo')!;
+    expect(ceo.template).toBe('rectangle');
+    expect(ceo.title).toBe('CEO');
+    expect(ceo.templateOverrides).toEqual({
+      x: '21',
+      y: '25',
+      width: '100',
+      height: '100',
+    });
+
+    const line = drawing.children!.find((c) => c.id === 'reports-to')!;
+    expect(line.template).toBe('line');
+    expect(line.templateOverrides).toEqual({ from: 'ceo', to: 'dev1' });
+  });
+
+  it('round-trips losslessly (shape annotations + ids survive)', () => {
+    const once = stringifyMarkdown(parseMarkdown(ORG_CHART));
+    // Canonical form is stable: a second pass is identical to the first.
+    const twice = stringifyMarkdown(parseMarkdown(once));
+    expect(twice).toBe(once);
+    expect(once).toContain('{#ceo} {[rectangle x=21 y=25 width=100 height=100]}');
+    expect(once).toContain('{[line from=ceo to=dev1]}');
+  });
+});
+
+describe('drawing validation', () => {
+  it('reports no diagnostics for a well-formed drawing', () => {
+    const { diagnostics, errorCount } = validateMarkdownSource(ORG_CHART);
+    expect(errorCount).toBe(0);
+    expect(diagnostics).toEqual([]);
+  });
+
+  it('flags an unknown shape with a did-you-mean suggestion', () => {
+    const md = `## D {[drawing]}\n\n### A {[rectanlge x=0 y=0]}\n`;
+    const { diagnostics } = validateMarkdownSource(md);
+    const d = diagnostics.find((x) => x.code === 'unknown-shape');
+    expect(d).toBeDefined();
+    expect(d!.message).toContain('rectangle');
+  });
+
+  it('flags a shape annotation used outside a drawing', () => {
+    const md = `## Not a drawing\n\n### A {[rectangle x=0 y=0]}\n`;
+    const { diagnostics } = validateMarkdownSource(md);
+    expect(diagnostics.some((x) => x.code === 'shape-outside-drawing')).toBe(true);
+  });
+
+  it('flags a connector whose from/to does not resolve', () => {
+    const md = `## D {[drawing]}\n\n### A {#a} {[rect x=0 y=0]}\n\n### L {[line from=a to=ghost]}\n`;
+    const { diagnostics } = validateMarkdownSource(md);
+    const d = diagnostics.find((x) => x.code === 'unresolved-connection');
+    expect(d).toBeDefined();
+    expect(d!.message).toContain('ghost');
+  });
+
+  it('flags non-numeric shape geometry', () => {
+    const md = `## D {[drawing]}\n\n### A {[rectangle x=abc y=0]}\n`;
+    const { diagnostics } = validateMarkdownSource(md);
+    expect(diagnostics.some((x) => x.code === 'invalid-attribute' && x.message.includes('x'))).toBe(
+      true,
+    );
+  });
+});
+
+describe('container-template suppression', () => {
+  it('isContainerTemplate covers diagram and drawing only', () => {
+    expect(isContainerTemplate('drawing')).toBe(true);
+    expect(isContainerTemplate('diagram')).toBe(true);
+    expect(isContainerTemplate('sectionHeader')).toBe(false);
+    expect(isContainerTemplate(undefined)).toBe(false);
+  });
+
+  it('flattenRenderableBlocks skips a drawing’s child shapes', () => {
+    const doc = markdownToDoc(parseMarkdown(ORG_CHART));
+    const all = flattenBlocks(doc.blocks);
+    const renderable = flattenRenderableBlocks(doc.blocks);
+    // Full flatten includes the drawing + its 3 shapes; renderable has only
+    // the drawing itself (its shapes are consumed by the drawing's render).
+    expect(all.length).toBe(4);
+    expect(renderable.length).toBe(1);
+    expect(renderable[0].template).toBe('drawing');
+  });
+});

package/src/__tests__/drawingBlock.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect } from 'vitest';
+import { drawingBlock } from '../doc/templates/drawingBlock.js';
+import { createTemplateContext } from '../schemas/BlockTemplates.js';
+import { DEFAULT_THEME } from '../schemas/themeLibrary.js';
+import { VIEWPORT_PRESETS } from '../schemas/Viewport.js';
+import type { Block, Layer, ShapeLayer, PathLayer, TextLayer } from '../schemas/Doc.js';
+import type { DrawingBlockInput } from '../schemas/BlockTemplates.js';
+
+function shape(
+  id: string,
+  template: string,
+  overrides: Record<string, string> = {},
+  extra: Partial<Block> = {},
+): Block {
+  return {
+    id,
+    startTime: 0,
+    duration: 0,
+    audioSegment: 0,
+    template,
+    templateOverrides: overrides,
+    ...extra,
+  } as Block;
+}
+
+function makeInput(overrides: Partial<DrawingBlockInput> = {}): DrawingBlockInput {
+  return { template: 'drawing', id: 'sketch', duration: 0, audioSegment: 0, ...overrides };
+}
+
+function ctxWith(children: Block[]) {
+  const ctx = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
+  ctx.children = children;
+  return ctx;
+}
+
+describe('drawingBlock template', () => {
+  it('emits a shape + label layer for each rect/circle child', () => {
+    const layers = drawingBlock(
+      makeInput(),
+      ctxWith([
+        shape(
+          'ceo',
+          'rectangle',
+          { x: '20', y: '20', width: '120', height: '80' },
+          { title: 'CEO' },
+        ),
+        shape(
+          'dev',
+          'circle',
+          { x: '20', y: '200', width: '100', height: '100' },
+          { title: 'Dev' },
+        ),
+      ]),
+    );
+    const shapes = layers.filter((l): l is ShapeLayer => l.type === 'shape');
+    const texts = layers.filter((l): l is TextLayer => l.type === 'text');
+    expect(shapes.map((s) => s.content.shape).sort()).toEqual(['circle', 'rect']);
+    expect(texts.map((t) => t.content.text).sort()).toEqual(['CEO', 'Dev']);
+  });
+
+  it('renders a from/to line as a path connector behind the shapes', () => {
+    const layers = drawingBlock(
+      makeInput(),
+      ctxWith([
+        shape('a', 'rect', { x: '0', y: '0', width: '80', height: '60' }, { title: 'A' }),
+        shape('b', 'rect', { x: '0', y: '200', width: '80', height: '60' }, { title: 'B' }),
+        shape('l', 'arrow', { from: 'a', to: 'b' }),
+      ]),
+    );
+    const paths = layers.filter((l): l is PathLayer => l.type === 'path');
+    expect(paths).toHaveLength(1);
+    expect(paths[0].content.endMarker).toBe('arrow');
+    expect(paths[0].content.d.startsWith('M ')).toBe(true);
+    // Connector emitted before the shapes (so it sits behind them).
+    expect(layers.indexOf(paths[0])).toBeLessThan(layers.findIndex((l) => l.type === 'shape'));
+  });
+
+  it('emits a title layer when input.title is set', () => {
+    const layers = drawingBlock(
+      makeInput({ title: 'Org chart' }),
+      ctxWith([shape('a', 'rect', { x: '0', y: '0', width: '80', height: '60' })]),
+    );
+    expect(layers.find((l) => l.id === 'drawing-title')).toBeDefined();
+  });
+
+  it('returns a single hint layer for an empty drawing', () => {
+    const layers = drawingBlock(makeInput({ title: 'Nothing yet' }), ctxWith([]));
+    expect(layers).toHaveLength(1);
+    expect(layers[0].type).toBe('text');
+  });
+});
+
+describe('drawingBlock integration with getLayers', () => {
+  it('renders a drawing block through the template registry', async () => {
+    const { getLayers } = await import('../doc/getLayers.js');
+    const parent: Block = {
+      id: 'sketch',
+      startTime: 0,
+      duration: 0,
+      audioSegment: 0,
+      template: 'drawing',
+      title: 'Org chart',
+      children: [
+        shape(
+          'ceo',
+          'rectangle',
+          { x: '20', y: '20', width: '120', height: '80' },
+          { title: 'CEO' },
+        ),
+        shape(
+          'dev',
+          'rectangle',
+          { x: '20', y: '220', width: '120', height: '80' },
+          { title: 'Dev' },
+        ),
+        shape('l', 'arrow', { from: 'ceo', to: 'dev' }, { title: 'manages' }),
+      ],
+    };
+    const layers = getLayers(parent, {});
+    const types = new Set(layers.map((l: Layer) => l.type));
+    expect(types.has('shape')).toBe(true);
+    expect(types.has('path')).toBe(true);
+  });
+});

package/src/__tests__/drawingLayout.test.ts

@@ -0,0 +1,171 @@
+import { describe, it, expect } from 'vitest';
+import {
+  computeDrawingLayout,
+  normalizeShapeKind,
+  isShapeName,
+} from '../doc/templates/drawingLayout.js';
+import type { Block } from '../schemas/Doc.js';
+
+/** Build a drawing child: `template` is the shape, geometry rides in overrides. */
+function shape(
+  id: string,
+  template: string,
+  overrides: Record<string, string> = {},
+  extra: Partial<Block> = {},
+): Block {
+  return {
+    id,
+    startTime: 0,
+    duration: 0,
+    audioSegment: 0,
+    template,
+    templateOverrides: overrides,
+    ...extra,
+  } as Block;
+}
+
+describe('normalizeShapeKind', () => {
+  it('maps aliases to canonical kinds', () => {
+    expect(normalizeShapeKind('rectangle')).toBe('rect');
+    expect(normalizeShapeKind('rect')).toBe('rect');
+    expect(normalizeShapeKind('ellipse')).toBe('circle');
+    expect(normalizeShapeKind('CIRCLE')).toBe('circle');
+    expect(normalizeShapeKind('line')).toBe('line');
+    expect(normalizeShapeKind('arrow')).toBe('arrow');
+    expect(normalizeShapeKind('path')).toBe('path');
+    expect(normalizeShapeKind('text')).toBe('text');
+  });
+
+  it('returns null for non-shapes', () => {
+    expect(normalizeShapeKind('sectionHeader')).toBeNull();
+    expect(normalizeShapeKind(undefined)).toBeNull();
+    expect(isShapeName('rectangle')).toBe(true);
+    expect(isShapeName('banana')).toBe(false);
+  });
+});
+
+describe('computeDrawingLayout', () => {
+  it('positions a rectangle from its geometry params', () => {
+    const layout = computeDrawingLayout([
+      shape('ceo', 'rectangle', { x: '21', y: '25', width: '100', height: '80' }, { title: 'CEO' }),
+    ]);
+    expect(layout.shapes).toHaveLength(1);
+    expect(layout.shapes[0]).toMatchObject({
+      id: 'ceo',
+      kind: 'rect',
+      x: 21,
+      y: 25,
+      width: 100,
+      height: 80,
+      pinned: true,
+      label: 'CEO',
+    });
+  });
+
+  it('tolerates trailing commas in geometry (matches the sketch syntax)', () => {
+    const layout = computeDrawingLayout([
+      shape('a', 'rect', { x: '21,', y: '25,', width: '100,', height: '80' }),
+    ]);
+    expect(layout.shapes[0]).toMatchObject({ x: 21, y: 25, width: 100, height: 80 });
+  });
+
+  it('applies default size when width/height are omitted', () => {
+    const layout = computeDrawingLayout([shape('a', 'circle', { x: '0', y: '0' })]);
+    expect(layout.shapes[0].kind).toBe('circle');
+    expect(layout.shapes[0].width).toBeGreaterThan(0);
+    expect(layout.shapes[0].height).toBeGreaterThan(0);
+  });
+
+  it('auto-positions shapes missing a coordinate below pinned ones', () => {
+    const layout = computeDrawingLayout([
+      shape('pinned', 'rect', { x: '200', y: '100', width: '100', height: '60' }),
+      shape('floating', 'rect'),
+    ]);
+    const pinned = layout.shapes.find((s) => s.id === 'pinned')!;
+    const floating = layout.shapes.find((s) => s.id === 'floating')!;
+    expect(pinned.pinned).toBe(true);
+    expect(floating.pinned).toBe(false);
+    expect(floating.y).toBeGreaterThan(pinned.y);
+  });
+
+  it('turns a line with from/to into a resolved connector', () => {
+    const layout = computeDrawingLayout([
+      shape('ceo', 'rectangle', { x: '0', y: '0', width: '100', height: '60' }),
+      shape('dev', 'rectangle', { x: '0', y: '200', width: '100', height: '60' }),
+      shape('l1', 'line', { from: 'ceo', to: 'dev' }, { title: 'reports to' }),
+    ]);
+    expect(layout.shapes).toHaveLength(2); // line is a connector, not a shape
+    expect(layout.connectors).toHaveLength(1);
+    expect(layout.connectors[0]).toMatchObject({
+      id: 'l1',
+      kind: 'line',
+      from: 'ceo',
+      to: 'dev',
+      label: 'reports to',
+    });
+  });
+
+  it('emits an arrow connector with an arrowhead for arrow shapes', () => {
+    const layout = computeDrawingLayout([
+      shape('a', 'rect', { x: '0', y: '0', width: '50', height: '50' }),
+      shape('b', 'rect', { x: '200', y: '0', width: '50', height: '50' }),
+      shape('arr', 'arrow', { from: 'a', to: 'b' }),
+    ]);
+    expect(layout.connectors[0].kind).toBe('arrow');
+  });
+
+  it('drops a connector whose endpoint matches no shape, with a warning', () => {
+    const layout = computeDrawingLayout([
+      shape('a', 'rect', { x: '0', y: '0', width: '50', height: '50' }),
+      shape('l', 'line', { from: 'a', to: 'ghost' }),
+    ]);
+    expect(layout.connectors).toHaveLength(0);
+    expect(layout.warnings.some((w) => w.includes('ghost'))).toBe(true);
+  });
+
+  it('also derives arrow connectors from a shape connectsTo', () => {
+    const layout = computeDrawingLayout([
+      shape(
+        'a',
+        'rect',
+        { x: '0', y: '0', width: '50', height: '50' },
+        {
+          connectsTo: [{ target: 'b' }],
+        },
+      ),
+      shape('b', 'rect', { x: '200', y: '0', width: '50', height: '50' }),
+    ]);
+    expect(layout.connectors).toHaveLength(1);
+    expect(layout.connectors[0]).toMatchObject({ from: 'a', to: 'b', kind: 'arrow' });
+  });
+
+  it('skips non-shape children and warns', () => {
+    const layout = computeDrawingLayout([
+      shape('a', 'rect', { x: '0', y: '0', width: '50', height: '50' }),
+      shape('note', 'sectionHeader'),
+    ]);
+    expect(layout.shapes).toHaveLength(1);
+    expect(layout.warnings.some((w) => w.includes('note'))).toBe(true);
+  });
+
+  it('reads text content for text shapes (text= param, else title)', () => {
+    const fromParam = computeDrawingLayout([shape('t', 'text', { x: '0', y: '0', text: 'Hello' })]);
+    expect(fromParam.shapes[0].text).toBe('Hello');
+    const fromTitle = computeDrawingLayout([
+      shape('t', 'text', { x: '0', y: '0' }, { title: 'Heading text' }),
+    ]);
+    expect(fromTitle.shapes[0].text).toBe('Heading text');
+  });
+
+  it('carries the raw d for path shapes', () => {
+    const layout = computeDrawingLayout([
+      shape('p', 'path', { x: '0', y: '0', d: 'M 0 0 L 10 10' }),
+    ]);
+    expect(layout.shapes[0].d).toBe('M 0 0 L 10 10');
+  });
+
+  it('returns an empty layout for no children', () => {
+    const layout = computeDrawingLayout([]);
+    expect(layout).toEqual({ shapes: [], connectors: [], warnings: [] });
+  });
+});

package/src/__tests__/geohash.test.ts

@@ -51,9 +51,9 @@ describe('getGeohash4Neighbors', () => {
     expect(result[0]).toBe('c23n');
   });
 
-  it('throws for non-4-char input', () => {
-    expect(() => getGeohash4Neighbors('c2')).toThrow();
-    expect(() => getGeohash4Neighbors('c23nn')).toThrow();
+  it('returns empty array for non-4-char input', () => {
+    expect(getGeohash4Neighbors('c2')).toEqual([]);
+    expect(getGeohash4Neighbors('c23nn')).toEqual([]);
   });
 });
 
@@ -70,8 +70,9 @@ describe('geohashToHierarchicalPath', () => {
     expect(geohashToHierarchicalPath('9q8y')).toBe('9/q/8/y');
   });
 
-  it('throws for non-4-char input', () => {
-    expect(() => geohashToHierarchicalPath('c2')).toThrow();
+  it('returns empty string for non-4-char input', () => {
+    expect(geohashToHierarchicalPath('c2')).toBe('');
+    expect(geohashToHierarchicalPath('c23nn')).toBe('');
   });
 });
 

package/src/__tests__/getLayers.test.ts

@@ -108,7 +108,7 @@ describe('getLayers', () => {
     }
   });
 
-  it('returns empty array for unknown template', () => {
+  it('renders a visible fallback card for unknown templates (never blank)', () => {
     const block = {
       template: 'totally_nonexistent',
       id: 'unknown-1',
@@ -117,7 +117,11 @@ describe('getLayers', () => {
     } as unknown as TemplateBlock;
     const layers = getLayers(block, defaultContext);
 
-    expect(layers).toEqual([]);
+    expect(layers.length).toBeGreaterThan(0);
+    const noticeText = layers
+      .map((l) => (l.type === 'text' ? ((l.content as { text?: string }).text ?? '') : ''))
+      .join('\n');
+    expect(noticeText).toContain('Unknown template "totally_nonexistent"');
   });
 
   it('returns empty array for block with no template and no layers', () => {

package/src/__tests__/getLayersFallback.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { parseMarkdown } from '../markdown/parse.js';
+import { markdownToDoc } from '../doc/markdownToDoc.js';
+import { getLayers } from '../doc/getLayers.js';
+import { templateRegistry } from '../doc/templates/index.js';
+import type { Block, Layer } from '../schemas/Doc.js';
+
+function textOf(layers: Layer[]): string {
+  return layers
+    .map((l) => (l.type === 'text' ? ((l.content as { text?: string }).text ?? '') : ''))
+    .join('\n');
+}
+
+function firstBlock(md: string): Block {
+  return markdownToDoc(parseMarkdown(md)).blocks[0];
+}
+
+describe('getLayers — graceful degradation', () => {
+  it('renders an unknown template as a plain card with title, body, and notice', () => {
+    const block = firstBlock('## My Section {[photGrid]}\n\nSome body prose here.');
+    const layers = getLayers(block);
+    expect(layers.length).toBeGreaterThan(0);
+    const text = textOf(layers);
+    expect(text).toContain('My Section');
+    expect(text).toContain('Some body prose here.');
+    expect(text).toContain('Unknown template "photGrid"');
+  });
+
+  it('renders a fallback card when a template function throws', () => {
+    (templateRegistry as Record<string, unknown>)['__boom'] = () => {
+      throw new Error('kaboom');
+    };
+    try {
+      const block: Block = {
+        id: 'b1',
+        startTime: 0,
+        duration: 5,
+        audioSegment: 0,
+        template: '__boom',
+        title: 'Exploding block',
+      };
+      const layers = getLayers(block);
+      expect(layers.length).toBeGreaterThan(0);
+      expect(textOf(layers)).toContain('Template "__boom" failed');
+      expect(textOf(layers)).toContain('Exploding block');
+    } finally {
+      delete (templateRegistry as Record<string, unknown>)['__boom'];
+    }
+  });
+
+  it('blocks with no template at all still return empty layers', () => {
+    const block: Block = { id: 'raw', startTime: 0, duration: 5, audioSegment: 0 };
+    expect(getLayers(block)).toEqual([]);
+  });
+});
+
+describe('getLayers — structured data feeds templates', () => {
+  afterEach(() => {
+    delete (templateRegistry as Record<string, unknown>)['__capture'];
+  });
+
+  it('merges templateData and templateOverrides into the template input', () => {
+    let received: Record<string, unknown> | null = null;
+    (templateRegistry as Record<string, unknown>)['__capture'] = (
+      input: Record<string, unknown>,
+    ) => {
+      received = input;
+      return [];
+    };
+    const block: Block = {
+      id: 'b1',
+      startTime: 0,
+      duration: 5,
+      audioSegment: 0,
+      template: '__capture',
+      templateData: { rows: [['a', 'b']], zoom: 12 },
+      templateOverrides: { zoom: '14' },
+    };
+    getLayers(block);
+    expect(received).not.toBeNull();
+    expect(received!['rows']).toEqual([['a', 'b']]);
+    // String overrides from {[…]} params win last.
+    expect(received!['zoom']).toBe('14');
+  });
+
+  it('renders a dataTable from a GFM table in the markdown body', () => {
+    const md = [
+      '## People {[dataTable]}',
+      '',
+      '| Name | Age |',
+      '| --- | --- |',
+      '| Alice | 30 |',
+    ].join('\n');
+    const block = firstBlock(md);
+    const layers = getLayers(block);
+    expect(layers.length).toBeGreaterThan(0);
+    const tableLayer = layers.find((l) => l.type === 'table');
+    expect(tableLayer).toBeDefined();
+    const content = tableLayer!.content as { headers?: string[]; rows?: string[][] };
+    expect(content.headers).toEqual(['Name', 'Age']);
+    expect(content.rows).toEqual([['Alice', '30']]);
+  });
+});

package/src/__tests__/imageEditExportSvg.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest';
+import { buildSvgString } from '../imageEdit/export';
+import { createEmptyImageEditDoc, addLayer } from '../imageEdit/state';
+import { MemoryContentContainer } from '../storage/ContentContainer';
+import type { ImageEditLayer } from '../schemas/ImageEditDoc';
+
+const container = new MemoryContentContainer();
+
+describe('buildSvgString — path (drawing shape) layers', () => {
+  it('renders a named shape (shapeKind) as a <path>, deriving d from the box', async () => {
+    let doc = createEmptyImageEditDoc(200, 200);
+    const diamond: ImageEditLayer = {
+      id: 'p1',
+      type: 'path',
+      position: { x: 10, y: 20, width: 100, height: 80 },
+      content: {
+        d: 'M 0 0',
+        shapeKind: 'diamond',
+        fill: '#3399ff',
+        stroke: '#1a4d80',
+        strokeWidth: 2,
+      },
+    };
+    doc = addLayer(doc, diamond);
+
+    const svg = await buildSvgString(doc, container);
+    expect(svg).toContain('<path');
+    expect(svg).toContain('fill="#3399ff"');
+    expect(svg).toContain('stroke="#1a4d80"');
+    // A diamond inscribed in [10,20,100,80] starts at the top-center (60,20).
+    expect(svg).toContain('d="M 60 20');
+    // The seed `d="M 0 0"` must NOT survive — geometry is re-derived.
+    expect(svg).not.toContain('d="M 0 0"');
+  });
+
+  it('renders an arrow path with an end marker def', async () => {
+    let doc = createEmptyImageEditDoc(200, 200);
+    const arrow: ImageEditLayer = {
+      id: 'a1',
+      type: 'path',
+      position: { x: 0, y: 0, width: 100, height: 100 },
+      content: {
+        d: 'M 0 0 L 100 100',
+        stroke: '#000000',
+        strokeWidth: 2,
+        fill: 'none',
+        endMarker: 'arrow',
+      },
+    };
+    doc = addLayer(doc, arrow);
+
+    const svg = await buildSvgString(doc, container);
+    expect(svg).toContain('<marker id="marker-end-a1"');
+    expect(svg).toContain('marker-end="url(#marker-end-a1)"');
+    expect(svg).toContain('fill="none"');
+  });
+
+  it('still renders native rect/circle/line shape layers', async () => {
+    let doc = createEmptyImageEditDoc(100, 100);
+    doc = addLayer(doc, {
+      id: 's1',
+      type: 'shape',
+      position: { x: 5, y: 5, width: 40, height: 30 },
+      content: { shape: 'rect', fill: '#fff', borderRadius: 4 },
+    });
+    const svg = await buildSvgString(doc, container);
+    expect(svg).toContain('<rect x="5" y="5" width="40" height="30"');
+    expect(svg).toContain('rx="4"');
+  });
+});