@bendyline/squisq 1.4.1 → 1.5.1

package/src/__tests__/imageEditVersions.test.ts

@@ -46,6 +46,78 @@ describe('imageEdit/persistence', () => {
     );
     await expect(readImageEditDoc(sidecar)).rejects.toThrow(/unsupported schema version/);
   });
+
+  async function writeRaw(sidecar: ReturnType<typeof scopeContainer>, payload: unknown) {
+    await sidecar.writeFile('state.json', new TextEncoder().encode(JSON.stringify(payload)));
+  }
+
+  it('rejects layer that is not an object', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, { version: 1, canvas: { width: 1, height: 1 }, layers: [null] });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(/layers\[0\] must be an object/);
+  });
+
+  it('rejects layer with missing id', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, {
+      version: 1,
+      canvas: { width: 1, height: 1 },
+      layers: [{ type: 'text', position: { x: 0, y: 0 }, content: { text: 'hi', style: {} } }],
+    });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(/must have a string id/);
+  });
+
+  it('rejects layer with invalid type', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, {
+      version: 1,
+      canvas: { width: 1, height: 1 },
+      layers: [{ id: 'x', type: 'video', position: { x: 0, y: 0 }, content: {} }],
+    });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(
+      /type must be one of image\|text\|shape/,
+    );
+  });
+
+  it('rejects image layer with missing content.src', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, {
+      version: 1,
+      canvas: { width: 1, height: 1 },
+      layers: [{ id: 'x', type: 'image', position: { x: 0, y: 0 }, content: { alt: 'test' } }],
+    });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(/content\.src must be a string/);
+  });
+
+  it('rejects text layer with missing content.text', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, {
+      version: 1,
+      canvas: { width: 1, height: 1 },
+      layers: [{ id: 'x', type: 'text', position: { x: 0, y: 0 }, content: { style: {} } }],
+    });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(/content\.text must be a string/);
+  });
+
+  it('rejects shape layer with missing content.shape', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, {
+      version: 1,
+      canvas: { width: 1, height: 1 },
+      layers: [{ id: 'x', type: 'shape', position: { x: 0, y: 0 }, content: {} }],
+    });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(/content\.shape must be a string/);
+  });
+
+  it('rejects layer with missing position', async () => {
+    const sidecar = scopeContainer(new MemoryContentContainer(), 'sc');
+    await writeRaw(sidecar, {
+      version: 1,
+      canvas: { width: 1, height: 1 },
+      layers: [{ id: 'x', type: 'shape', content: { shape: 'rect' } }],
+    });
+    await expect(readImageEditDoc(sidecar)).rejects.toThrow(/position must have/);
+  });
 });
 
 describe('imageEdit/versions', () => {

package/src/__tests__/inlineIconMarker.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import {
+  hasIconMarker,
+  iconClass,
+  iconMarker,
+  splitIconMarkers,
+  stripIconMarkers,
+} from '../icons/inlineIconMarker';
+
+describe('inline icon markers', () => {
+  it('encodes icons with a private-use sentinel', () => {
+    expect(iconMarker('solid', 'rocket')).toBe('\uE000solid:rocket\uE000');
+  });
+
+  it('detects and strips encoded markers from plain-text projections', () => {
+    const text = `Launch ${iconMarker('solid', 'rocket')} now`;
+
+    expect(hasIconMarker(text)).toBe(true);
+    expect(stripIconMarkers(text)).toBe('Launch  now');
+  });
+
+  it('splits marker-bearing text into text and icon runs', () => {
+    const text = `A ${iconMarker('regular', 'star')} and ${iconMarker('brands', 'github')}`;
+
+    expect(splitIconMarkers(text)).toEqual([
+      { type: 'text', text: 'A ' },
+      { type: 'icon', family: 'regular', name: 'star' },
+      { type: 'text', text: ' and ' },
+      { type: 'icon', family: 'brands', name: 'github' },
+    ]);
+  });
+
+  it('builds FontAwesome class names', () => {
+    expect(iconClass('solid', 'rocket')).toBe('fa-solid fa-rocket');
+  });
+});

package/src/__tests__/inputDescriptors.test.ts

@@ -0,0 +1,162 @@
+import { describe, it, expect } from 'vitest';
+import {
+  BASE_INPUT_DESCRIPTORS,
+  TEMPLATE_INPUT_DESCRIPTORS,
+  coerceTemplateParams,
+  lintTemplateParams,
+} from '../doc/templates/inputDescriptors';
+import { templateRegistry } from '../doc/templates/index';
+
+describe('coerceTemplateParams', () => {
+  it('coerces number keys, leaving the raw string on failure', () => {
+    expect(coerceTemplateParams('map', { zoom: '9' }).input).toEqual({ zoom: 9 });
+
+    const bad = coerceTemplateParams('map', { zoom: 'abc' });
+    expect(bad.input).toEqual({ zoom: 'abc' });
+    expect(bad.warnings).toHaveLength(1);
+    expect(bad.warnings[0]).toContain('zoom');
+  });
+
+  it('coerces boolean keys (true/empty → true, false → false)', () => {
+    const { input } = coerceTemplateParams('imageWithCaption', { isTitle: 'true' });
+    expect(input.isTitle).toBe(true);
+    // A bare flag `{[… isTitle]}` parses to an empty value → true.
+    expect(coerceTemplateParams('imageWithCaption', { isTitle: '' }).input.isTitle).toBe(true);
+    expect(coerceTemplateParams('imageWithCaption', { isTitle: 'false' }).input.isTitle).toBe(
+      false,
+    );
+
+    const bad = coerceTemplateParams('imageWithCaption', { isTitle: 'maybe' });
+    expect(bad.input.isTitle).toBe('maybe');
+    expect(bad.warnings).toHaveLength(1);
+  });
+
+  it('coerces latLng into { lat, lng }, warning on malformed input', () => {
+    expect(coerceTemplateParams('map', { center: '47.6,-122.3' }).input).toEqual({
+      center: { lat: 47.6, lng: -122.3 },
+    });
+
+    const bad = coerceTemplateParams('map', { center: 'nope' });
+    expect(bad.input).toEqual({ center: 'nope' });
+    expect(bad.warnings[0]).toContain('center');
+  });
+
+  it('coerces labeledPair into { label, sublabel? }', () => {
+    expect(coerceTemplateParams('twoColumn', { left: 'Espresso|Bold' }).input).toEqual({
+      left: { label: 'Espresso', sublabel: 'Bold' },
+    });
+    // No separator → label only, no sublabel key.
+    expect(coerceTemplateParams('twoColumn', { right: 'Filter' }).input).toEqual({
+      right: { label: 'Filter' },
+    });
+  });
+
+  it('coerces stringList by splitting on commas and trimming', () => {
+    expect(coerceTemplateParams('photoGrid', { images: 'a.jpg, b.jpg ,c.jpg' }).input).toEqual({
+      images: ['a.jpg', 'b.jpg', 'c.jpg'],
+    });
+  });
+
+  it('passes unknown keys through unchanged as strings (never lossy)', () => {
+    const { input, warnings } = coerceTemplateParams('map', { wobble: 'yes', center: '1,2' });
+    expect(input.wobble).toBe('yes');
+    expect(input.center).toEqual({ lat: 1, lng: 2 });
+    expect(warnings).toEqual([]);
+  });
+
+  it('passes everything through for a template with no descriptors', () => {
+    expect(coerceTemplateParams('sectionHeader', { anything: '5' }).input).toEqual({
+      anything: '5',
+    });
+  });
+
+  it('resolves legacy template aliases before coercing', () => {
+    expect(coerceTemplateParams('mapBlock', { zoom: '7' }).input).toEqual({ zoom: 7 });
+  });
+
+  it('coerces shared base inputs (useTopLayer boolean)', () => {
+    expect(coerceTemplateParams('title', { useTopLayer: 'false' }).input.useTopLayer).toBe(false);
+  });
+});
+
+describe('lintTemplateParams', () => {
+  it('returns [] for a template without descriptors', () => {
+    expect(lintTemplateParams('sectionHeader', { foo: 'bar' })).toEqual([]);
+  });
+
+  it('flags an unknown input with a did-you-mean suggestion', () => {
+    const findings = lintTemplateParams('map', { centre: '1,2' });
+    const unknown = findings.find((f) => f.kind === 'unknown-input');
+    expect(unknown).toBeDefined();
+    expect(unknown!.key).toBe('centre');
+    expect(unknown!.suggestion).toBe('center');
+    expect(unknown!.message).toContain('Did you mean "center"?');
+  });
+
+  it('does not flag block-meta keys carried on the same annotation', () => {
+    const findings = lintTemplateParams('title', { duration: '8', transition: 'fade' });
+    expect(findings.filter((f) => f.kind === 'unknown-input')).toEqual([]);
+  });
+
+  it('flags a value outside a closed enum', () => {
+    const findings = lintTemplateParams('map', { center: '1,2', mapStyle: 'nope' });
+    const invalid = findings.find((f) => f.kind === 'invalid-input-value');
+    expect(invalid).toBeDefined();
+    expect(invalid!.key).toBe('mapStyle');
+    expect(invalid!.message).toContain('terrain');
+  });
+
+  it('flags a value that fails coercion (bad latLng)', () => {
+    const findings = lintTemplateParams('map', { center: 'garbage' });
+    expect(findings.some((f) => f.kind === 'invalid-input-value' && f.key === 'center')).toBe(true);
+  });
+
+  it('flags missing required inputs', () => {
+    const findings = lintTemplateParams('twoColumn', {});
+    const missing = findings
+      .filter((f) => f.kind === 'missing-input')
+      .map((f) => f.key)
+      .sort();
+    expect(missing).toEqual(['left', 'right']);
+  });
+
+  it('does not flag a required input that is present', () => {
+    const findings = lintTemplateParams('map', { center: '1,2' });
+    expect(findings.filter((f) => f.kind === 'missing-input')).toEqual([]);
+  });
+
+  it('accepts a valid enum value', () => {
+    const findings = lintTemplateParams('map', { center: '1,2', mapStyle: 'satellite' });
+    expect(findings).toEqual([]);
+  });
+});
+
+describe('descriptor registry shape', () => {
+  it('base descriptors are declared with unique keys', () => {
+    const keys = BASE_INPUT_DESCRIPTORS.map((d) => d.key);
+    expect(new Set(keys).size).toBe(keys.length);
+  });
+
+  it('has no orphan descriptors — every keyed template exists in the registry', () => {
+    for (const template of Object.keys(TEMPLATE_INPUT_DESCRIPTORS)) {
+      expect(templateRegistry, `orphan descriptor for "${template}"`).toHaveProperty(template);
+    }
+  });
+
+  it('every template descriptor has unique keys and a description', () => {
+    for (const [template, descriptors] of Object.entries(TEMPLATE_INPUT_DESCRIPTORS)) {
+      const keys = descriptors.map((d) => d.key);
+      expect(new Set(keys).size, `duplicate key in ${template}`).toBe(keys.length);
+      for (const d of descriptors) {
+        expect(d.description.length, `empty description for ${template}.${d.key}`).toBeGreaterThan(
+          0,
+        );
+        // values / valueHint are mutually exclusive.
+        expect(
+          !(d.values && d.valueHint),
+          `${template}.${d.key} has both values and valueHint`,
+        ).toBe(true);
+      }
+    }
+  });
+});

package/src/__tests__/jsonForm.tokens.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest';
+import { buildJsonFormTokens, resolveJsonFormTheme } from '../jsonForm/index.js';
+import { DARK_SURFACE, LIGHT_SURFACE, DEFAULT_THEME, applySurface } from '../schemas/index.js';
+
+const EXPECTED_SUFFIXES = [
+  'bg',
+  'text',
+  'muted',
+  'primary',
+  'accent',
+  'warning',
+  'border',
+  'input-bg',
+  'title-font',
+  'body-font',
+  'mono-font',
+  'radius',
+];
+
+describe('buildJsonFormTokens', () => {
+  it('emits the full token set for the viewer prefix', () => {
+    const tokens = buildJsonFormTokens(DEFAULT_THEME, LIGHT_SURFACE, { prefix: '--squisq-json' });
+    for (const suffix of EXPECTED_SUFFIXES) {
+      expect(tokens).toHaveProperty(`--squisq-json-${suffix}`);
+    }
+    expect(Object.keys(tokens)).toHaveLength(EXPECTED_SUFFIXES.length);
+  });
+
+  it('emits the full token set for the editor prefix', () => {
+    const tokens = buildJsonFormTokens(DEFAULT_THEME, LIGHT_SURFACE, {
+      prefix: '--squisq-jsonform',
+    });
+    for (const suffix of EXPECTED_SUFFIXES) {
+      expect(tokens).toHaveProperty(`--squisq-jsonform-${suffix}`);
+    }
+    expect(Object.keys(tokens)).toHaveLength(EXPECTED_SUFFIXES.length);
+  });
+
+  it('resolves colors from the applied surface (light vs dark differ)', () => {
+    const light = buildJsonFormTokens(DEFAULT_THEME, LIGHT_SURFACE, { prefix: '--squisq-json' });
+    const dark = buildJsonFormTokens(DEFAULT_THEME, DARK_SURFACE, { prefix: '--squisq-json' });
+    const lightTheme = applySurface(DEFAULT_THEME, LIGHT_SURFACE);
+    const darkTheme = applySurface(DEFAULT_THEME, DARK_SURFACE);
+    expect(light['--squisq-json-bg']).toBe(lightTheme.colors.background);
+    expect(dark['--squisq-json-bg']).toBe(darkTheme.colors.background);
+    // The two surfaces should not produce an identical background.
+    expect(light['--squisq-json-bg']).not.toBe(dark['--squisq-json-bg']);
+  });
+
+  it('falls back to DEFAULT_THEME when theme is undefined', () => {
+    const tokens = buildJsonFormTokens(undefined, undefined, { prefix: '--squisq-json' });
+    expect(tokens['--squisq-json-bg']).toBe(DEFAULT_THEME.colors.background);
+  });
+
+  it('does not apply surface when surface is undefined', () => {
+    const tokens = buildJsonFormTokens(DEFAULT_THEME, undefined, { prefix: '--squisq-json' });
+    expect(tokens['--squisq-json-bg']).toBe(DEFAULT_THEME.colors.background);
+    expect(tokens['--squisq-json-radius']).toBe(`${DEFAULT_THEME.style.borderRadius ?? 8}px`);
+  });
+
+  it('is pure — no window/matchMedia access required', () => {
+    // Runs fine even if window is momentarily undefined-like; the function
+    // never touches globals.
+    expect(() =>
+      buildJsonFormTokens(DEFAULT_THEME, DARK_SURFACE, { prefix: '--squisq-json' }),
+    ).not.toThrow();
+  });
+});
+
+describe('resolveJsonFormTheme', () => {
+  it('applies the surface to the theme', () => {
+    expect(resolveJsonFormTheme(DEFAULT_THEME, DARK_SURFACE)).toEqual(
+      applySurface(DEFAULT_THEME, DARK_SURFACE),
+    );
+  });
+
+  it('returns the base theme untouched when surface is undefined', () => {
+    expect(resolveJsonFormTheme(DEFAULT_THEME, undefined)).toBe(DEFAULT_THEME);
+  });
+
+  it('falls back to DEFAULT_THEME when theme is undefined', () => {
+    expect(resolveJsonFormTheme(undefined, undefined)).toBe(DEFAULT_THEME);
+  });
+});

package/src/__tests__/layoutBlock.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest';
+import { layoutBlock } from '../doc/templates/layoutBlock.js';
+import { createTemplateContext } from '../schemas/BlockTemplates.js';
+import { DEFAULT_THEME } from '../schemas/themeLibrary.js';
+import { VIEWPORT_PRESETS } from '../schemas/Viewport.js';
+import { isContainerTemplate } from '../doc/templates/index.js';
+import { parseMarkdown } from '../markdown/parse.js';
+import type { Block, Layer, TextLayer } from '../schemas/Doc.js';
+import type { RawLayersInput } from '../schemas/BlockTemplates.js';
+
+function child(
+  id: string,
+  template: string,
+  overrides: Record<string, string> = {},
+  bodyMd = '',
+): Block {
+  return {
+    id,
+    startTime: 0,
+    duration: 0,
+    audioSegment: 0,
+    template,
+    templateOverrides: overrides,
+    ...(bodyMd ? { contents: parseMarkdown(bodyMd).children } : {}),
+  } as Block;
+}
+
+function ctxWith(children: Block[]) {
+  const ctx = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
+  ctx.children = children;
+  return ctx;
+}
+
+const INPUT: RawLayersInput = { template: 'layout', id: 'lay', duration: 0, audioSegment: 0 };
+
+describe('layoutBlock template', () => {
+  it('returns a single hint layer for an empty layout', () => {
+    const layers = layoutBlock(INPUT, ctxWith([]));
+    expect(layers).toHaveLength(1);
+    expect(layers[0].type).toBe('text');
+    expect((layers[0] as TextLayer).content.text).toBe('Empty layout');
+  });
+
+  it('emits one layer per child, in document order, at absolute positions', () => {
+    const layers = layoutBlock(
+      INPUT,
+      ctxWith([
+        child('box-1', 'rectangle', { x: '760', y: '390', width: '400', height: '300' }),
+        child('text-1', 'text', { x: '360', y: '380', width: '1200', height: '320' }, 'Welcome'),
+      ]),
+    );
+    expect(layers.map((l) => l.id)).toEqual(['box-1', 'text-1']);
+    expect(layers[0].type).toBe('shape');
+    expect(layers[1].type).toBe('text');
+    expect((layers[1] as TextLayer).content.text).toBe('Welcome');
+    expect(layers[0].position).toMatchObject({ x: 760, y: 390 });
+  });
+});
+
+describe('layout container behavior', () => {
+  it('marks layout as a children-consuming container template', () => {
+    expect(isContainerTemplate('layout')).toBe(true);
+  });
+
+  it('renders a layout block through the template registry (getLayers)', async () => {
+    const { getLayers } = await import('../doc/getLayers.js');
+    const parent: Block = {
+      id: 'lay',
+      startTime: 0,
+      duration: 0,
+      audioSegment: 0,
+      template: 'layout',
+      children: [
+        child('text-1', 'text', { x: '360', y: '380', width: '1200', height: '320' }, 'Title'),
+        child('box-1', 'rectangle', { x: '760', y: '390', width: '400', height: '300' }),
+      ],
+    };
+    const layers = getLayers(parent, {});
+    const types = new Set(layers.map((l: Layer) => l.type));
+    expect(types.has('text')).toBe(true);
+    expect(types.has('shape')).toBe(true);
+  });
+});

package/src/__tests__/layoutLayout.test.ts

@@ -0,0 +1,169 @@
+import { describe, it, expect } from 'vitest';
+import { computeLayoutLayers } from '../doc/templates/layoutLayout.js';
+import { parseMarkdown } from '../markdown/parse.js';
+import type { ShapeLayer, TextLayer, ImageLayer, PathLayer } from '../schemas/Doc.js';
+
+const VP = { width: 1920, height: 1080 };
+
+function child(id: string, template: string, params: Record<string, string> = {}, bodyMd = '') {
+  return {
+    id,
+    template,
+    templateOverrides: params,
+    ...(bodyMd ? { contents: parseMarkdown(bodyMd).children } : {}),
+  };
+}
+
+describe('computeLayoutLayers', () => {
+  it('maps a text child to an absolutely-positioned TextLayer (body text + style)', () => {
+    const { layers } = computeLayoutLayers(
+      [
+        child(
+          'text-1',
+          'text',
+          {
+            x: '100',
+            y: '200',
+            width: '600',
+            height: '120',
+            fontSize: '48',
+            align: 'center',
+            valign: 'middle',
+            color: '#1e293b',
+          },
+          'Hello **world**',
+        ),
+      ],
+      VP,
+    );
+    expect(layers).toHaveLength(1);
+    const t = layers[0] as TextLayer;
+    expect(t.type).toBe('text');
+    expect(t.id).toBe('text-1');
+    expect(t.position).toMatchObject({ x: 100, y: 200, width: 600, height: 120 });
+    expect(t.content.text).toBe('Hello world'); // plain projection of the body
+    expect(t.content.style.fontSize).toBe(48);
+    expect(t.content.style.textAlign).toBe('center');
+    expect(t.content.style.verticalAlign).toBe('middle');
+    expect(t.content.style.color).toBe('#1e293b');
+  });
+
+  it('maps rectangle/circle children to ShapeLayers', () => {
+    const { layers } = computeLayoutLayers(
+      [
+        child('box-1', 'rectangle', {
+          x: '10',
+          y: '10',
+          width: '200',
+          height: '100',
+          fill: '#e0e7ff',
+          stroke: '#6366f1',
+          strokeWidth: '2',
+          borderRadius: '8',
+        }),
+        child('c-1', 'circle', { x: '300', y: '10', width: '120', height: '120' }),
+      ],
+      VP,
+    );
+    const shapes = layers.filter((l): l is ShapeLayer => l.type === 'shape');
+    expect(shapes.map((s) => s.content.shape)).toEqual(['rect', 'circle']);
+    expect(shapes[0].content.fill).toBe('#e0e7ff');
+    expect(shapes[0].content.borderRadius).toBe(8);
+    expect(shapes[0].position).toMatchObject({ x: 10, y: 10, width: 200, height: 100 });
+  });
+
+  it('maps an image child to an ImageLayer and skips one missing src', () => {
+    const { layers, warnings } = computeLayoutLayers(
+      [
+        child('img-1', 'image', {
+          x: '0',
+          y: '0',
+          width: '320',
+          height: '240',
+          src: 'pic.png',
+          alt: 'A pic',
+          fit: 'cover',
+        }),
+        child('img-2', 'image', { x: '0', y: '0' }),
+      ],
+      VP,
+    );
+    const imgs = layers.filter((l): l is ImageLayer => l.type === 'image');
+    expect(imgs).toHaveLength(1);
+    expect(imgs[0].content.src).toBe('pic.png');
+    expect(imgs[0].content.alt).toBe('A pic');
+    expect(imgs[0].content.fit).toBe('cover');
+    expect(warnings.some((w) => w.includes('img-2'))).toBe(true);
+  });
+
+  it('maps a named polygon to a PathLayer via shapePath', () => {
+    const { layers } = computeLayoutLayers(
+      [child('star-1', 'star', { x: '0', y: '0', width: '100', height: '100' })],
+      VP,
+    );
+    const p = layers[0] as PathLayer;
+    expect(p.type).toBe('path');
+    expect(p.content.d.startsWith('M')).toBe(true);
+  });
+
+  it('uses absolute positions (no fit-scaling) regardless of viewport', () => {
+    const children = [
+      child('text-1', 'text', { x: '100', y: '100', width: '200', height: '50' }, 'x'),
+    ];
+    const small = computeLayoutLayers(children, { width: 200, height: 200 }).layers[0];
+    const large = computeLayoutLayers(children, { width: 4000, height: 4000 }).layers[0];
+    expect(small.position.x).toBe(100);
+    expect(large.position.x).toBe(100);
+  });
+
+  it('preserves child document order as z-order', () => {
+    const { layers } = computeLayoutLayers(
+      [child('a', 'rectangle', { x: '0', y: '0' }), child('b', 'text', {}, 'top')],
+      VP,
+    );
+    expect(layers.map((l) => l.id)).toEqual(['a', 'b']);
+  });
+
+  it('warns and skips a child whose annotation is not a layer kind', () => {
+    const { layers, warnings } = computeLayoutLayers(
+      [child('weird', 'banana', { x: '0', y: '0' })],
+      VP,
+    );
+    expect(layers).toHaveLength(0);
+    expect(warnings.some((w) => w.includes('weird'))).toBe(true);
+  });
+
+  it('uses the supplied ink default for un-styled text and strokes', () => {
+    const { layers } = computeLayoutLayers(
+      [
+        child('t', 'text', { x: '0', y: '0' }, 'plain'),
+        child('l', 'line', { x: '0', y: '0', width: '100', height: '0' }),
+      ],
+      VP,
+      { ink: '#e0e0e0' },
+    );
+    const t = layers[0] as TextLayer;
+    const l = layers[1] as PathLayer;
+    expect(t.content.style.color).toBe('#e0e0e0');
+    expect(l.content.stroke).toBe('#e0e0e0');
+  });
+
+  it('keeps the dark-slate ink default when no defaults are supplied (editor scene canvas)', () => {
+    const { layers } = computeLayoutLayers([child('t', 'text', { x: '0', y: '0' }, 'plain')], VP);
+    const t = layers[0] as TextLayer;
+    expect(t.content.style.color).toBe('#1e293b');
+  });
+
+  it('never overrides author-specified color/stroke with the ink default', () => {
+    const { layers } = computeLayoutLayers(
+      [
+        child('t', 'text', { x: '0', y: '0', color: '#112233' }, 'styled'),
+        child('l', 'line', { x: '0', y: '0', width: '100', height: '0', stroke: '#445566' }),
+      ],
+      VP,
+      { ink: '#e0e0e0' },
+    );
+    expect((layers[0] as TextLayer).content.style.color).toBe('#112233');
+    expect((layers[1] as PathLayer).content.stroke).toBe('#445566');
+  });
+});