@bendyline/squisq 2.0.1 → 2.2.0

package/src/__tests__/coverBlock.test.ts

@@ -1,310 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import {
-  coverBlock,
-  expandCoverBlock,
-  startBlockToCoverInput,
-  fitCoverTitleSize,
-} from '../doc/templates/coverBlock';
-import { createTemplateContext, DEFAULT_THEME, VIEWPORT_PRESETS } from '../doc/templates/index';
-import type { StartBlockConfig } from '../schemas/Doc';
-import type { CoverBlockInput } from '../doc/templates/coverBlock';
-import type { ImageLayer, TextLayer, ShapeLayer } from '../schemas/Doc';
-
-// ── Helpers ──────────────────────────────────────────────────────────
-
-const landscapeContext = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
-const portraitContext = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.portrait);
-
-function findLayer(layers: ReturnType<typeof coverBlock>, id: string) {
-  return layers.find((l) => l.id === id);
-}
-
-function findImage(layers: ReturnType<typeof coverBlock>, id: string) {
-  return findLayer(layers, id) as ImageLayer | undefined;
-}
-
-function findText(layers: ReturnType<typeof coverBlock>, id: string) {
-  return findLayer(layers, id) as TextLayer | undefined;
-}
-
-function findShape(layers: ReturnType<typeof coverBlock>, id: string) {
-  return findLayer(layers, id) as ShapeLayer | undefined;
-}
-
-// ── coverBlock with hero image ──────────────────────────────────────
-
-describe('coverBlock with hero image', () => {
-  const input: CoverBlockInput = {
-    heroSrc: 'hero.jpg',
-    heroAlt: 'Hero image',
-    title: 'Test Title',
-    subtitle: 'A subtitle',
-    ambientMotion: 'zoomIn',
-    heroCredit: 'Photographer',
-    heroLicense: 'CC-BY-4.0',
-  };
-
-  it('produces hero image layer', () => {
-    const layers = coverBlock(input, landscapeContext);
-    const hero = findImage(layers, 'cover-hero');
-    expect(hero).toBeDefined();
-    expect(hero!.type).toBe('image');
-    expect(hero!.content.src).toBe('hero.jpg');
-    expect(hero!.content.alt).toBe('Hero image');
-    expect(hero!.content.fit).toBe('cover');
-    expect(hero!.content.credit).toBe('Photographer');
-    expect(hero!.content.license).toBe('CC-BY-4.0');
-  });
-
-  it('produces gradient overlay', () => {
-    const layers = coverBlock(input, landscapeContext);
-    const gradient = findShape(layers, 'cover-gradient');
-    expect(gradient).toBeDefined();
-    expect(gradient!.type).toBe('shape');
-    expect(gradient!.content.fill).toContain('linear-gradient');
-  });
-
-  it('produces title layer with shadow', () => {
-    const layers = coverBlock(input, landscapeContext);
-    const title = findText(layers, 'cover-title');
-    expect(title).toBeDefined();
-    expect(title!.type).toBe('text');
-    expect(title!.content.text).toBe('Test Title');
-    expect(title!.content.style.shadow).toBe(true);
-    expect(title!.content.style.fontWeight).toBe('bold');
-  });
-
-  it('produces subtitle layer', () => {
-    const layers = coverBlock(input, landscapeContext);
-    const subtitle = findText(layers, 'cover-subtitle');
-    expect(subtitle).toBeDefined();
-    expect(subtitle!.type).toBe('text');
-    expect(subtitle!.content.text).toBe('A subtitle');
-  });
-
-  it('does not produce theme background layers', () => {
-    const layers = coverBlock(input, landscapeContext);
-    expect(findLayer(layers, 'cover-bg')).toBeUndefined();
-    expect(findLayer(layers, 'cover-bg-tint')).toBeUndefined();
-    expect(findLayer(layers, 'cover-accent')).toBeUndefined();
-  });
-
-  it('title positioned lower (over hero)', () => {
-    const layers = coverBlock(input, landscapeContext);
-    const title = findLayer(layers, 'cover-title');
-    // With subtitle: 70%, without: 75% — both below center
-    expect(title!.position.y).toBe('70%');
-  });
-
-  it('applies Ken Burns animation to hero image', () => {
-    const layers = coverBlock(input, landscapeContext);
-    const hero = findLayer(layers, 'cover-hero');
-    expect(hero!.animation).toBeDefined();
-  });
-});
-
-// ── coverBlock without hero image (theme background) ────────────────
-
-describe('coverBlock without hero image', () => {
-  const input: CoverBlockInput = {
-    title: 'Title Only',
-    subtitle: 'Subtitle text',
-  };
-
-  it('produces theme background and soft tint instead of hero', () => {
-    const layers = coverBlock(input, landscapeContext);
-    const bg = findShape(layers, 'cover-bg');
-    const tint = findShape(layers, 'cover-bg-tint');
-    expect(bg).toBeDefined();
-    expect(bg!.type).toBe('shape');
-    expect(bg!.content.fill).toBe(DEFAULT_THEME.colors.background);
-    expect(tint).toBeDefined();
-    expect(tint!.content.fill).toContain('radial-gradient');
-    expect(tint!.content.fill).toContain('rgba(37, 99, 235, 0.16)');
-  });
-
-  it('produces decorative accent line', () => {
-    const layers = coverBlock(input, landscapeContext);
-    const accent = findLayer(layers, 'cover-accent');
-    expect(accent).toBeDefined();
-    expect(accent!.type).toBe('shape');
-  });
-
-  it('does not produce hero image or gradient overlay', () => {
-    const layers = coverBlock(input, landscapeContext);
-    expect(findLayer(layers, 'cover-hero')).toBeUndefined();
-    expect(findLayer(layers, 'cover-gradient')).toBeUndefined();
-  });
-
-  it('title centered (not pushed to bottom)', () => {
-    const layers = coverBlock(input, landscapeContext);
-    const title = findLayer(layers, 'cover-title');
-    // Without hero: uses layout.primaryY which is typically around 35-40%
-    expect(title!.position.y).not.toBe('70%');
-    expect(title!.position.y).not.toBe('75%');
-  });
-
-  it('subtitle uses layout secondaryY', () => {
-    const layers = coverBlock(input, landscapeContext);
-    const subtitle = findLayer(layers, 'cover-subtitle');
-    expect(subtitle!.position.y).not.toBe('82%');
-  });
-
-  it('uses high-contrast Standard Light cover text', () => {
-    const layers = coverBlock(input, landscapeContext);
-    const title = findText(layers, 'cover-title');
-    const subtitle = findText(layers, 'cover-subtitle');
-    expect(title!.content.style.shadow).toBe(false);
-    expect(subtitle!.content.style.fontWeight).toBe('bold');
-    expect(subtitle!.content.style.color).toBe('rgba(15, 23, 42, 0.78)');
-  });
-
-  it('keeps non-Standard themes on the existing dramatic cover background', () => {
-    const nonStandardContext = createTemplateContext(
-      { ...DEFAULT_THEME, id: 'custom-light' },
-      0,
-      1,
-      VIEWPORT_PRESETS.landscape,
-    );
-    const layers = coverBlock(input, nonStandardContext);
-    const bg = findShape(layers, 'cover-bg');
-    const title = findText(layers, 'cover-title');
-    expect(findShape(layers, 'cover-bg-tint')).toBeUndefined();
-    expect(bg!.content.fill).toContain('radial-gradient');
-    expect(bg!.content.fill).toContain(`${DEFAULT_THEME.colors.primary} 0%`);
-    expect(title!.content.style.shadow).toBe(true);
-  });
-});
-
-// ── coverBlock title-only (no subtitle) ─────────────────────────────
-
-describe('coverBlock title-only', () => {
-  it('no subtitle layer when subtitle is omitted', () => {
-    const layers = coverBlock({ title: 'Solo Title' }, landscapeContext);
-    expect(findLayer(layers, 'cover-subtitle')).toBeUndefined();
-  });
-
-  it('hero title at 75% when no subtitle', () => {
-    const layers = coverBlock({ heroSrc: 'img.jpg', title: 'Solo' }, landscapeContext);
-    const title = findLayer(layers, 'cover-title');
-    expect(title!.position.y).toBe('75%');
-  });
-
-  it('no-hero title at 50% when no subtitle', () => {
-    const layers = coverBlock({ title: 'Solo' }, landscapeContext);
-    const title = findLayer(layers, 'cover-title');
-    expect(title!.position.y).toBe('50%');
-  });
-});
-
-// ── Viewport scaling ────────────────────────────────────────────────
-
-describe('coverBlock viewport scaling', () => {
-  it('produces layers for portrait viewport', () => {
-    const layers = coverBlock({ heroSrc: 'img.jpg', title: 'Portrait' }, portraitContext);
-    expect(layers.length).toBeGreaterThanOrEqual(3); // hero + gradient + title
-  });
-
-  it('title font size differs between landscape and portrait', () => {
-    const landLayers = coverBlock({ title: 'Test' }, landscapeContext);
-    const portLayers = coverBlock({ title: 'Test' }, portraitContext);
-    const landTitle = findText(landLayers, 'cover-title');
-    const portTitle = findText(portLayers, 'cover-title');
-    expect(landTitle!.content.style.fontSize).not.toBe(portTitle!.content.style.fontSize);
-  });
-});
-
-// ── Long-title auto-fit ─────────────────────────────────────────────
-
-describe('coverBlock long-title auto-fit', () => {
-  const LONG = 'Seattle: The Emerald City That Rebuilt Itself on Top of Itself';
-
-  it('fitCoverTitleSize returns full base for short titles', () => {
-    expect(fitCoverTitleSize('Kirkland')).toBe(120);
-    expect(fitCoverTitleSize('Test Title')).toBe(120);
-  });
-
-  it('fitCoverTitleSize shrinks long titles below the full base', () => {
-    const size = fitCoverTitleSize(LONG);
-    expect(size).toBeLessThan(120);
-    expect(size).toBeGreaterThanOrEqual(62); // never below the readability floor
-  });
-
-  it('fitCoverTitleSize never drops below the readability floor', () => {
-    const size = fitCoverTitleSize('x'.repeat(400));
-    expect(size).toBe(62);
-  });
-
-  it('fitCoverTitleSize is monotonic — longer titles are never larger', () => {
-    const a = fitCoverTitleSize('A moderately long cover title here');
-    const b = fitCoverTitleSize('A moderately long cover title here that keeps going and going');
-    expect(b).toBeLessThanOrEqual(a);
-  });
-
-  it('renders a long title with a smaller font than a short one', () => {
-    const shortTitle = findText(
-      coverBlock({ heroSrc: 'h.jpg', title: 'Short' }, landscapeContext),
-      'cover-title',
-    );
-    const longTitle = findText(
-      coverBlock({ heroSrc: 'h.jpg', title: LONG }, landscapeContext),
-      'cover-title',
-    );
-    expect(longTitle!.content.style.fontSize).toBeLessThan(shortTitle!.content.style.fontSize);
-  });
-});
-
-// ── startBlockToCoverInput ──────────────────────────────────────────
-
-describe('startBlockToCoverInput', () => {
-  it('maps all StartBlockConfig fields to CoverBlockInput', () => {
-    const config: StartBlockConfig = {
-      heroSrc: 'hero.jpg',
-      heroAlt: 'Alt',
-      title: 'Title',
-      subtitle: 'Sub',
-      ambientMotion: 'panLeft',
-      heroCredit: 'Credit',
-      heroLicense: 'MIT',
-    };
-    const result = startBlockToCoverInput(config);
-    expect(result.heroSrc).toBe('hero.jpg');
-    expect(result.heroAlt).toBe('Alt');
-    expect(result.title).toBe('Title');
-    expect(result.subtitle).toBe('Sub');
-    expect(result.ambientMotion).toBe('panLeft');
-    expect(result.heroCredit).toBe('Credit');
-    expect(result.heroLicense).toBe('MIT');
-  });
-
-  it('handles config without heroSrc', () => {
-    const config: StartBlockConfig = { title: 'Title Only' };
-    const result = startBlockToCoverInput(config);
-    expect(result.heroSrc).toBeUndefined();
-    expect(result.title).toBe('Title Only');
-  });
-});
-
-// ── expandCoverBlock ────────────────────────────────────────────────
-
-describe('expandCoverBlock', () => {
-  it('returns layers from StartBlockConfig', () => {
-    const config: StartBlockConfig = {
-      heroSrc: 'cover.jpg',
-      title: 'Cover Title',
-    };
-    const layers = expandCoverBlock(config, landscapeContext);
-    expect(layers.length).toBeGreaterThanOrEqual(3);
-    expect(layers.some((l) => l.id === 'cover-hero')).toBe(true);
-    expect(layers.some((l) => l.id === 'cover-title')).toBe(true);
-  });
-
-  it('returns theme background layers when no heroSrc', () => {
-    const config: StartBlockConfig = { title: 'No Hero' };
-    const layers = expandCoverBlock(config, landscapeContext);
-    expect(layers.some((l) => l.id === 'cover-bg')).toBe(true);
-    expect(layers.some((l) => l.id === 'cover-bg-tint')).toBe(true);
-    expect(layers.some((l) => l.id === 'cover-title')).toBe(true);
-    expect(layers.some((l) => l.id === 'cover-hero')).toBe(false);
-  });
-});

package/src/__tests__/customTemplateSample.test.ts

@@ -1,144 +0,0 @@
-/**
- * End-to-end sanity check: the kind of doc a user might compose by
- * hand (or via the upcoming TemplateDesigner) renders through the
- * markdown → Doc → expanded layers pipeline with tokens substituted.
- *
- * Build-the-payload-here so the test doesn't depend on the site
- * package — it's verifying the pure pipeline.
- */
-
-import { describe, it, expect } from 'vitest';
-import { markdownToDoc } from '../doc/markdownToDoc';
-import { expandDocBlocks } from '../doc/templates/index';
-import { parseMarkdown } from '../markdown/parse';
-import {
-  writeCustomTemplatesToFrontmatter,
-  readCustomTemplatesFromFrontmatter,
-  FRONTMATTER_CUSTOM_TEMPLATES_KEY,
-} from '../doc/customTemplatesFrontmatter';
-import type { CustomTemplateDefinition, LayerRepeat } from '../schemas/CustomTemplates.js';
-import type { TextLayer } from '../schemas/Doc.js';
-import { VIEWPORT_PRESETS } from '../schemas/Viewport.js';
-
-const heroDef: CustomTemplateDefinition = {
-  name: 'hero',
-  label: 'Hero Section',
-  viewport: { width: 1920, height: 1080 },
-  layers: [
-    {
-      id: 'hero-title',
-      type: 'text',
-      position: { x: '6%', y: '20%', width: '88%' },
-      content: {
-        text: '{title}',
-        style: { fontSize: 96, color: '#0f172a' },
-      },
-    },
-    {
-      id: 'hero-body',
-      type: 'text',
-      position: { x: '6%', y: '52%', width: '88%' },
-      content: {
-        text: '{content}',
-        style: { fontSize: 36, color: '#475569' },
-      },
-    },
-  ],
-};
-
-function buildSampleMarkdown(): string {
-  const payload = writeCustomTemplatesToFrontmatter([heroDef]);
-  return `---
-squisq-custom-templates: "${payload}"
----
-
-# Welcome to Squisq {[hero]}
-
-A small editor for big ideas.
-`;
-}
-
-describe('Custom template pipeline (markdown → expanded layers)', () => {
-  it('substitutes {title} and {content} when a doc uses a frontmatter-defined template', () => {
-    const doc = markdownToDoc(parseMarkdown(buildSampleMarkdown()));
-    const blocks = expandDocBlocks(doc.blocks, {
-      customTemplates: doc.customTemplates,
-    });
-    expect(blocks).toHaveLength(1);
-    const layers = blocks[0].layers ?? [];
-    expect(layers).toHaveLength(2);
-
-    expect((layers[0] as TextLayer).content.text).toBe('Welcome to Squisq');
-    expect((layers[1] as TextLayer).content.text).toBe('A small editor for big ideas.');
-  });
-
-  it('renders the same template against a portrait viewport without re-authoring', () => {
-    const doc = markdownToDoc(parseMarkdown(buildSampleMarkdown()));
-    const blocks = expandDocBlocks(doc.blocks, {
-      customTemplates: doc.customTemplates,
-      viewport: VIEWPORT_PRESETS.portrait,
-    });
-    const layers = blocks[0].layers ?? [];
-    // %-based positions survive the viewport switch — the SSR
-    // renderer resolves them against the actual viewport at draw time.
-    expect(layers[0].position.x).toBe('6%');
-    expect(layers[0].position.width).toBe('88%');
-  });
-
-  it('resolves {attr:key} against a block heading annotation through the pipeline', () => {
-    const attrDef: CustomTemplateDefinition = {
-      name: 'badge',
-      label: 'Badge',
-      viewport: { width: 1920, height: 1080 },
-      layers: [
-        {
-          id: 'badge-role',
-          type: 'text',
-          position: { x: '6%', y: '20%', width: '88%' },
-          content: { text: 'Role: {attr:role|none}', style: { fontSize: 48, color: '#000' } },
-        },
-      ],
-    };
-    const payload = writeCustomTemplatesToFrontmatter([attrDef]);
-    const md = `---
-squisq-custom-templates: "${payload}"
----
-
-# Team {[badge role=lead]}
-
-Body.
-`;
-    const doc = markdownToDoc(parseMarkdown(md));
-    const blocks = expandDocBlocks(doc.blocks, { customTemplates: doc.customTemplates });
-    const layers = blocks[0].layers ?? [];
-    expect((layers[0] as TextLayer).content.text).toBe('Role: lead');
-  });
-});
-
-describe('Custom template codec — repeat round-trip', () => {
-  it('preserves a layer.repeat directive through write → read (passes through unmapped)', () => {
-    const repeat: LayerRepeat = { source: 'images', direction: 'row', gap: 12, max: 4 };
-    const def: CustomTemplateDefinition = {
-      name: 'gallery',
-      label: 'Gallery',
-      viewport: { width: 1920, height: 1080 },
-      layers: [
-        {
-          id: 'thumb',
-          type: 'image',
-          position: { x: '0%', y: '0%', width: '25%', height: '25%' },
-          content: { src: '{item:src}', alt: '{item:label}' },
-          repeat,
-        },
-      ],
-    };
-    const payload = writeCustomTemplatesToFrontmatter([def]);
-    expect(payload).toBeDefined();
-    const round = readCustomTemplatesFromFrontmatter({
-      [FRONTMATTER_CUSTOM_TEMPLATES_KEY]: JSON.parse(payload as string),
-    });
-    expect(round).toBeDefined();
-    const layer = round?.[0].layers[0] as (typeof def.layers)[number];
-    expect(layer.repeat).toEqual(repeat);
-  });
-});

package/src/__tests__/customTemplatesFrontmatter.test.ts

@@ -1,221 +0,0 @@
-/**
- * Custom templates round-trip through frontmatter.
- *
- * Verifies that a CustomTemplateDefinition stored in markdown
- * frontmatter is faithfully reconstructed by `markdownToDoc` and
- * serialized back by `docToMarkdown` without loss.
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { markdownToDoc } from '../doc/markdownToDoc';
-import { docToMarkdown } from '../doc/docToMarkdown';
-import {
-  readCustomTemplatesFromFrontmatter,
-  writeCustomTemplatesToFrontmatter,
-  FRONTMATTER_CUSTOM_TEMPLATES_KEY,
-} from '../doc/customTemplatesFrontmatter';
-import { parseMarkdown } from '../markdown/parse';
-import type { Layer } from '../schemas/Doc.js';
-import type { CustomTemplateDefinition } from '../schemas/CustomTemplates.js';
-
-const sampleLayers: Layer[] = [
-  {
-    id: 'title',
-    type: 'text',
-    position: { x: '5%', y: '10%', width: '90%' },
-    content: { text: '{title}', style: { fontSize: 72, color: '#000' } },
-  },
-  {
-    id: 'body',
-    type: 'text',
-    position: { x: '5%', y: '40%', width: '90%' },
-    content: { text: '{content}', style: { fontSize: 32, color: '#333' } },
-  },
-];
-
-const heroDef: CustomTemplateDefinition = {
-  name: 'hero',
-  label: 'Hero',
-  description: 'Large title with body below.',
-  viewport: { width: 1920, height: 1080 },
-  layers: sampleLayers,
-};
-
-describe('writeCustomTemplatesToFrontmatter → readCustomTemplatesFromFrontmatter', () => {
-  it('round-trips a single definition through the compact JSON wire format', () => {
-    const payload = writeCustomTemplatesToFrontmatter([heroDef]);
-    expect(typeof payload).toBe('string');
-    // Compact form: a readable JSON object keyed by name, short keys, no
-    // base64, and the default 1920×1080 viewport omitted.
-    expect(payload!.startsWith('{"hero":')).toBe(true);
-    expect(payload).toContain('"lb":"Hero"');
-    expect(payload).not.toContain('"viewport"');
-    const fm = { [FRONTMATTER_CUSTOM_TEMPLATES_KEY]: payload };
-    const out = readCustomTemplatesFromFrontmatter(fm);
-    expect(out).toHaveLength(1);
-    expect(out![0]).toEqual(heroDef);
-  });
-
-  it('default output is compact (single line) and byte-unchanged', () => {
-    const payload = writeCustomTemplatesToFrontmatter([heroDef])!;
-    expect(payload).not.toContain('\n');
-    // Explicit pretty:false must match the historical default exactly.
-    expect(writeCustomTemplatesToFrontmatter([heroDef], { pretty: false })).toBe(payload);
-  });
-
-  it('pretty:true emits multi-line JSON that still reads back', () => {
-    const payload = writeCustomTemplatesToFrontmatter([heroDef], { pretty: true })!;
-    expect(payload).toContain('\n');
-    // Same compact key codec, just pretty-printed.
-    expect(payload).toContain('"lb": "Hero"');
-    const fm = { [FRONTMATTER_CUSTOM_TEMPLATES_KEY]: payload };
-    const out = readCustomTemplatesFromFrontmatter(fm);
-    expect(out).toHaveLength(1);
-    expect(out![0]).toEqual(heroDef);
-  });
-
-  it('a hand-written block-scalar frontmatter parses back into the definition', () => {
-    const payload = writeCustomTemplatesToFrontmatter([heroDef], { pretty: true })!;
-    const body = payload
-      .split('\n')
-      .map((l) => `  ${l}`)
-      .join('\n');
-    const md = `---\n${FRONTMATTER_CUSTOM_TEMPLATES_KEY}: |-\n${body}\n---\n\n# Hi\n`;
-    const parsed = parseMarkdown(md);
-    const out = readCustomTemplatesFromFrontmatter(parsed.frontmatter);
-    expect(out).toHaveLength(1);
-    expect(out![0]).toEqual(heroDef);
-  });
-
-  it('is markedly smaller than the legacy base64 form', () => {
-    const compact = writeCustomTemplatesToFrontmatter([heroDef])!;
-    const legacyBase64 = btoa(unescape(encodeURIComponent(JSON.stringify([{ ...heroDef }]))));
-    expect(compact.length).toBeLessThan(legacyBase64.length);
-  });
-
-  it('still reads the legacy base64-JSON payload (back-compat)', () => {
-    // What older documents have on disk: base64 of the full-keyed array.
-    const legacy = btoa(unescape(encodeURIComponent(JSON.stringify([heroDef]))));
-    const out = readCustomTemplatesFromFrontmatter({
-      [FRONTMATTER_CUSTOM_TEMPLATES_KEY]: legacy,
-    });
-    expect(out).toHaveLength(1);
-    expect(out![0]).toEqual(heroDef);
-  });
-
-  it('round-trips layers carrying the full styling field set without loss', () => {
-    const rich: CustomTemplateDefinition = {
-      name: 'rich',
-      label: 'Rich',
-      viewport: { width: 1080, height: 1080 },
-      layers: [
-        {
-          id: 'p',
-          type: 'path',
-          position: { x: '1%', y: '2%', width: '3%', height: '4%', anchor: 'center' },
-          content: {
-            d: 'M0 0',
-            shapeKind: 'star',
-            fill: '#fff',
-            fillOpacity: 0.5,
-            gradient: { from: '#000', to: '#fff', angle: 90 },
-            stroke: '#111',
-            strokeWidth: 3,
-            borderStyle: 'dashed',
-            dasharray: '4 2',
-          },
-        } as Layer,
-      ],
-    };
-    const payload = writeCustomTemplatesToFrontmatter([rich])!;
-    const out = readCustomTemplatesFromFrontmatter({ [FRONTMATTER_CUSTOM_TEMPLATES_KEY]: payload });
-    expect(out![0]).toEqual(rich);
-  });
-
-  it('round-trips multiple definitions in declaration order', () => {
-    const second: CustomTemplateDefinition = { ...heroDef, name: 'second', label: 'Second' };
-    const payload = writeCustomTemplatesToFrontmatter([heroDef, second]);
-    const out = readCustomTemplatesFromFrontmatter({
-      [FRONTMATTER_CUSTOM_TEMPLATES_KEY]: payload,
-    });
-    expect(out!.map((d) => d.name)).toEqual(['hero', 'second']);
-  });
-
-  it('also accepts an already-decoded array shape (forward-compatible)', () => {
-    const out = readCustomTemplatesFromFrontmatter({
-      [FRONTMATTER_CUSTOM_TEMPLATES_KEY]: [
-        {
-          name: 'hero',
-          label: 'Hero',
-          viewport: { width: 1920, height: 1080 },
-          layers: sampleLayers,
-        },
-      ],
-    });
-    expect(out).toHaveLength(1);
-    expect(out![0].name).toBe('hero');
-  });
-
-  it('returns undefined when the key is absent', () => {
-    expect(readCustomTemplatesFromFrontmatter({})).toBeUndefined();
-    expect(readCustomTemplatesFromFrontmatter(undefined)).toBeUndefined();
-  });
-
-  it("returns undefined when the encoded string isn't a valid array", () => {
-    const fm = { [FRONTMATTER_CUSTOM_TEMPLATES_KEY]: 'not-base64-of-an-array' };
-    expect(readCustomTemplatesFromFrontmatter(fm)).toBeUndefined();
-  });
-});
-
-describe('Doc.customTemplates round-trip via markdownToDoc + docToMarkdown', () => {
-  it('survives a markdownToDoc → docToMarkdown cycle', () => {
-    const encoded = writeCustomTemplatesToFrontmatter([heroDef])!;
-    // Compact JSON is stored unquoted — it round-trips verbatim through
-    // the line-based frontmatter parser.
-    const sourceMd = `---
-title: My Doc
-squisq-custom-templates: ${encoded}
----
-
-# Welcome {[hero]}
-
-A small editor for big ideas.
-`;
-    const doc = markdownToDoc(parseMarkdown(sourceMd));
-    expect(doc.customTemplates).toBeDefined();
-    expect(doc.customTemplates).toHaveLength(1);
-    expect(doc.customTemplates![0].name).toBe('hero');
-    expect(doc.customTemplates![0].layers).toEqual(sampleLayers);
-
-    // Round-trip back — docToMarkdown must restore the frontmatter
-    // entry with an equivalent encoded payload.
-    const mdOut = docToMarkdown(doc);
-    expect(mdOut.frontmatter).toBeDefined();
-    const payload = mdOut.frontmatter![FRONTMATTER_CUSTOM_TEMPLATES_KEY];
-    expect(typeof payload).toBe('string');
-    const reread = readCustomTemplatesFromFrontmatter({
-      [FRONTMATTER_CUSTOM_TEMPLATES_KEY]: payload,
-    });
-    expect(reread).toEqual(doc.customTemplates);
-  });
-
-  it('drops the frontmatter key when the doc has no custom templates anymore', () => {
-    void vi; // imported for parity; not used here
-    const doc = {
-      articleId: 'd',
-      duration: 0,
-      blocks: [],
-      audio: { segments: [] },
-      // Stale frontmatter from an earlier save when the doc DID have
-      // custom templates — but doc.customTemplates is now empty.
-      frontmatter: {
-        title: 'Doc',
-        [FRONTMATTER_CUSTOM_TEMPLATES_KEY]: 'stale-base64-blob',
-      },
-    };
-    const md = docToMarkdown(doc);
-    expect(md.frontmatter).toBeDefined();
-    expect(md.frontmatter).not.toHaveProperty(FRONTMATTER_CUSTOM_TEMPLATES_KEY);
-    expect(md.frontmatter!.title).toBe('Doc');
-  });
-});