@bendyline/squisq 1.4.1 → 1.5.0

package/src/__tests__/diagramBlock.test.ts

@@ -0,0 +1,122 @@
+import { describe, it, expect } from 'vitest';
+import { diagramBlock } from '../doc/templates/diagramBlock.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 { DiagramBlockInput } from '../schemas/BlockTemplates.js';
+
+function makeBlock(overrides: Partial<Block> & { id: string }): Block {
+  return {
+    startTime: 0,
+    duration: 0,
+    audioSegment: 0,
+    ...overrides,
+  } as Block;
+}
+
+function makeInput(overrides: Partial<DiagramBlockInput> = {}): DiagramBlockInput {
+  return {
+    template: 'diagram',
+    id: 'family-tree',
+    duration: 0,
+    audioSegment: 0,
+    ...overrides,
+  };
+}
+
+describe('diagramBlock template', () => {
+  it('emits node card + label layers for each child', () => {
+    const ctx = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
+    ctx.children = [
+      makeBlock({ id: 'a', title: 'Alpha', x: 100, y: 100 }),
+      makeBlock({ id: 'b', title: 'Beta', x: 400, y: 100 }),
+    ];
+    const layers = diagramBlock(makeInput(), ctx);
+    const cards = layers.filter((l) => l.type === 'shape') as ShapeLayer[];
+    const texts = layers.filter((l) => l.type === 'text') as TextLayer[];
+    expect(cards.length).toBe(2);
+    expect(texts.length).toBe(2);
+    expect(texts[0].content.text).toBe('Alpha');
+    expect(texts[1].content.text).toBe('Beta');
+  });
+
+  it('emits a path layer with arrow for each connectsTo entry', () => {
+    const ctx = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
+    ctx.children = [
+      makeBlock({ id: 'a', x: 100, y: 100, connectsTo: [{ target: 'b' }] }),
+      makeBlock({ id: 'b', x: 400, y: 100 }),
+    ];
+    const layers = diagramBlock(makeInput(), ctx);
+    const paths = layers.filter((l) => l.type === 'path') as PathLayer[];
+    expect(paths.length).toBe(1);
+    expect(paths[0].content.endMarker).toBe('arrow');
+    expect(paths[0].content.d.startsWith('M ')).toBe(true);
+  });
+
+  it('emits a typed edge label when connection has a type', () => {
+    const ctx = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
+    ctx.children = [
+      makeBlock({ id: 'a', x: 100, y: 100, connectsTo: [{ target: 'b', type: 'requires' }] }),
+      makeBlock({ id: 'b', x: 400, y: 100 }),
+    ];
+    const layers = diagramBlock(makeInput(), ctx);
+    const labels = layers.filter(
+      (l): l is TextLayer => l.type === 'text' && l.id.startsWith('edge-label-'),
+    );
+    expect(labels.length).toBe(1);
+    expect(labels[0].content.text).toBe('requires');
+  });
+
+  it('returns a single hint text layer when there are no children', () => {
+    const ctx = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
+    ctx.children = [];
+    const layers = diagramBlock(makeInput({ title: 'Empty' }), ctx);
+    expect(layers.length).toBe(1);
+    expect(layers[0].type).toBe('text');
+  });
+
+  it('emits a title layer when input.title is set', () => {
+    const ctx = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
+    ctx.children = [makeBlock({ id: 'a', title: 'A', x: 100, y: 100 })];
+    const layers = diagramBlock(makeInput({ title: 'My Diagram' }), ctx);
+    const titleLayer = layers.find((l): l is TextLayer => l.id === 'diagram-title');
+    expect(titleLayer).toBeDefined();
+    expect(titleLayer?.content.text).toBe('My Diagram');
+  });
+
+  it('handles children without explicit positions via auto-layout', () => {
+    const ctx = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
+    ctx.children = [
+      makeBlock({ id: 'a', title: 'A' }),
+      makeBlock({ id: 'b', title: 'B' }),
+      makeBlock({ id: 'c', title: 'C' }),
+    ];
+    const layers = diagramBlock(makeInput(), ctx);
+    const cards = layers.filter((l) => l.type === 'shape');
+    expect(cards.length).toBe(3);
+  });
+});
+
+describe('diagramBlock integration with getLayers', () => {
+  it('renders through the full template registry', async () => {
+    const { getLayers } = await import('../doc/getLayers.js');
+    const parentBlock: Block = {
+      id: 'family',
+      startTime: 0,
+      duration: 0,
+      audioSegment: 0,
+      template: 'diagram',
+      title: 'Family Tree',
+      children: [
+        makeBlock({ id: 'a', title: 'A', x: 100, y: 100 }),
+        makeBlock({ id: 'b', title: 'B', x: 400, y: 100, connectsTo: [{ target: 'a' }] }),
+      ],
+    };
+    const layers = getLayers(parentBlock, {});
+    // Should contain at least one shape (node card) and one path (edge).
+    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__/diagramLayout.test.ts

@@ -0,0 +1,134 @@
+import { describe, it, expect } from 'vitest';
+import { computeDiagramLayout } from '../doc/templates/diagramLayout.js';
+import type { Block } from '../schemas/Doc.js';
+
+function makeBlock(overrides: Partial<Block> & { id: string }): Block {
+  return {
+    startTime: 0,
+    duration: 0,
+    audioSegment: 0,
+    ...overrides,
+  } as Block;
+}
+
+describe('computeDiagramLayout', () => {
+  it('keeps explicit x/y positions intact', () => {
+    const layout = computeDiagramLayout([
+      makeBlock({ id: 'a', x: 100, y: 200 }),
+      makeBlock({ id: 'b', x: 400, y: 300 }),
+    ]);
+    expect(layout.nodes).toHaveLength(2);
+    expect(layout.nodes[0]).toMatchObject({ id: 'a', x: 100, y: 200, pinned: true });
+    expect(layout.nodes[1]).toMatchObject({ id: 'b', x: 400, y: 300, pinned: true });
+  });
+
+  it('auto-positions children missing x or y in a grid below pinned nodes', () => {
+    const layout = computeDiagramLayout([
+      makeBlock({ id: 'pinned', x: 200, y: 100 }),
+      makeBlock({ id: 'a' }),
+      makeBlock({ id: 'b' }),
+      makeBlock({ id: 'c' }),
+      makeBlock({ id: 'd' }),
+    ]);
+    expect(layout.nodes.find((n) => n.id === 'pinned')?.pinned).toBe(true);
+    const auto = layout.nodes.filter((n) => n.id !== 'pinned');
+    for (const node of auto) {
+      expect(node.pinned).toBe(false);
+      // Should sit below the pinned node's y.
+      expect(node.y).toBeGreaterThan(100);
+    }
+  });
+
+  it('places fully-unpositioned children starting at the default origin', () => {
+    const layout = computeDiagramLayout([
+      makeBlock({ id: 'a', title: 'A' }),
+      makeBlock({ id: 'b', title: 'B' }),
+    ]);
+    expect(layout.nodes[0].pinned).toBe(false);
+    expect(layout.nodes[1].pinned).toBe(false);
+    expect(layout.nodes[0].x).toBeGreaterThanOrEqual(0);
+    expect(layout.nodes[0].y).toBeGreaterThanOrEqual(0);
+  });
+
+  it('extracts edges from connectsTo, including connection types', () => {
+    const layout = computeDiagramLayout([
+      makeBlock({
+        id: 'a',
+        x: 0,
+        y: 0,
+        connectsTo: [{ target: 'b', type: 'flow' }, { target: 'c' }],
+      }),
+      makeBlock({ id: 'b', x: 100, y: 0 }),
+      makeBlock({ id: 'c', x: 200, y: 0 }),
+    ]);
+    expect(layout.edges).toHaveLength(2);
+    expect(layout.edges[0]).toMatchObject({ source: 'a', target: 'b', type: 'flow' });
+    expect(layout.edges[1]).toMatchObject({ source: 'a', target: 'c' });
+    expect(layout.edges[1].type).toBeUndefined();
+  });
+
+  it('drops edges with unknown targets and reports a warning', () => {
+    const layout = computeDiagramLayout([
+      makeBlock({
+        id: 'a',
+        x: 0,
+        y: 0,
+        connectsTo: [{ target: 'ghost' }, { target: 'b' }],
+      }),
+      makeBlock({ id: 'b', x: 100, y: 0 }),
+    ]);
+    expect(layout.edges).toHaveLength(1);
+    expect(layout.edges[0].target).toBe('b');
+    expect(layout.warnings.length).toBe(1);
+    expect(layout.warnings[0]).toContain('ghost');
+  });
+
+  it('dedupes edges with identical source/target/type', () => {
+    const layout = computeDiagramLayout([
+      makeBlock({
+        id: 'a',
+        x: 0,
+        y: 0,
+        connectsTo: [
+          { target: 'b', type: 'flow' },
+          { target: 'b', type: 'flow' },
+        ],
+      }),
+      makeBlock({ id: 'b', x: 100, y: 0 }),
+    ]);
+    expect(layout.edges).toHaveLength(1);
+  });
+
+  it('distinguishes edges with different types', () => {
+    const layout = computeDiagramLayout([
+      makeBlock({
+        id: 'a',
+        x: 0,
+        y: 0,
+        connectsTo: [
+          { target: 'b', type: 'flow' },
+          { target: 'b', type: 'requires' },
+        ],
+      }),
+      makeBlock({ id: 'b', x: 100, y: 0 }),
+    ]);
+    expect(layout.edges).toHaveLength(2);
+  });
+
+  it('returns an empty layout for no children', () => {
+    const layout = computeDiagramLayout([]);
+    expect(layout.nodes).toEqual([]);
+    expect(layout.edges).toEqual([]);
+    expect(layout.warnings).toEqual([]);
+  });
+
+  it('falls back to the block id for the node label when title is missing', () => {
+    const layout = computeDiagramLayout([makeBlock({ id: 'lonely', x: 0, y: 0 })]);
+    expect(layout.nodes[0].label).toBe('lonely');
+  });
+
+  it('uses block.title for the node label when present', () => {
+    const layout = computeDiagramLayout([makeBlock({ id: 'a', x: 0, y: 0, title: 'Alpha' })]);
+    expect(layout.nodes[0].label).toBe('Alpha');
+  });
+});

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('');
   });
 });