@bendyline/squisq 1.4.1 → 1.5.1

package/src/__tests__/atmosphereLayers.test.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect } from 'vitest';
+import { expandPersistentLayer } from '../doc/templates/persistentLayers.js';
+import { cssFilterForTreatment } from '../doc/utils/imageTreatment.js';
+import { themedImageTreatment } from '../doc/utils/themeUtils.js';
+import { createTemplateContext } from '../schemas/BlockTemplates.js';
+import { DEFAULT_THEME, resolveTheme } from '../schemas/themeLibrary.js';
+import { validateTheme } from '../schemas/themeValidator.js';
+import { THEMES } from '../schemas/themeLibrary.js';
+import type { ShapeLayer, ImageLayer } from '../schemas/Doc.js';
+
+describe('atmosphere persistent layers', () => {
+  it('patternBackground expands dots/grid/diagonal to an SVG pattern fill', () => {
+    const [layer] = expandPersistentLayer({
+      template: 'patternBackground',
+      config: { type: 'patternBackground', pattern: 'grid', color: '#00e5ff', opacity: 0.04 },
+    }) as ShapeLayer[];
+    expect(layer.type).toBe('shape');
+    expect(layer.content.pattern).toEqual({
+      kind: 'grid',
+      color: '#00e5ff',
+      size: 24,
+      opacity: 0.04,
+    });
+  });
+
+  it('patternBackground noise expands to a grain filter rect', () => {
+    const [layer] = expandPersistentLayer({
+      template: 'patternBackground',
+      config: { type: 'patternBackground', pattern: 'noise', opacity: 0.05 },
+    }) as ShapeLayer[];
+    expect(layer.content.filter).toEqual({ type: 'noise', opacity: 0.05 });
+  });
+
+  it('vignette expands to a radial gradient rect with strength-scaled edge', () => {
+    const [layer] = expandPersistentLayer({
+      template: 'vignette',
+      config: { type: 'vignette', strength: 0.4 },
+    }) as ShapeLayer[];
+    expect(layer.content.fill).toContain('radial-gradient');
+    expect(layer.content.fill).toContain('rgba(0, 0, 0, 0.4)');
+  });
+
+  it('ambientGradient derives colors from the theme and drifts slowly', () => {
+    const theme = resolveTheme('gezellig');
+    const [layer] = expandPersistentLayer(
+      { template: 'ambientGradient', config: { type: 'ambientGradient' } },
+      theme,
+    ) as ShapeLayer[];
+    expect(layer.content.fill).toContain(theme.colors.backgroundLight);
+    expect(layer.animation?.type).toBe('slowZoom');
+    expect(layer.animation?.duration).toBe(40);
+    // Oversized so the pan never reveals the frame edge
+    expect(layer.position.width).toBe('110%');
+  });
+
+  it('imageBackground passes blur through to the image layer', () => {
+    const [image] = expandPersistentLayer({
+      template: 'imageBackground',
+      config: { type: 'imageBackground', src: 'bg.jpg', blur: 12 },
+    }) as ImageLayer[];
+    expect(image.content.blur).toBe(12);
+  });
+
+  it('every built-in theme still validates with its atmosphere layers', () => {
+    for (const [id, theme] of Object.entries(THEMES)) {
+      const result = validateTheme(theme);
+      expect(result.valid, `theme ${id}: ${JSON.stringify(result.errors)}`).toBe(true);
+    }
+  });
+});
+
+describe('image treatments', () => {
+  it('mono produces a grayscale filter scaled by strength', () => {
+    expect(cssFilterForTreatment({ type: 'mono', strength: 1 })).toContain('grayscale(1)');
+    expect(cssFilterForTreatment({ type: 'mono', strength: 0.5 })).toContain('grayscale(0.5)');
+  });
+
+  it('duotone rotates hue toward the tint color', () => {
+    // #ff0000 has hue 0 → rotation 0 - 40 = -40deg
+    const f = cssFilterForTreatment({ type: 'duotone', color: '#ff0000' });
+    expect(f).toContain('grayscale(1)');
+    expect(f).toContain('hue-rotate(-40deg)');
+  });
+
+  it('none / absent treatments produce no filter', () => {
+    expect(cssFilterForTreatment({ type: 'none' })).toBeUndefined();
+    expect(cssFilterForTreatment(undefined)).toBeUndefined();
+  });
+
+  it('blur composes with (or without) a treatment', () => {
+    expect(cssFilterForTreatment(undefined, 12)).toBe('blur(12px)');
+    expect(cssFilterForTreatment({ type: 'mono' }, 8)).toMatch(/^blur\(8px\) grayscale/);
+  });
+
+  it('themedImageTreatment: block override wins, none opts out, duotone tints from primary', () => {
+    const documentary = resolveTheme('documentary');
+    const ctx = createTemplateContext(documentary, 0, 1);
+    // Theme authors mono
+    expect(themedImageTreatment(ctx)?.type).toBe('mono');
+    // Block opts out
+    expect(themedImageTreatment(ctx, 'none')).toBeUndefined();
+    // Block forces duotone → tint defaults to theme primary
+    expect(themedImageTreatment(ctx, 'duotone')?.color).toBe(documentary.colors.primary);
+    // Standard theme has no treatment
+    const plainCtx = createTemplateContext(DEFAULT_THEME, 0, 1);
+    expect(themedImageTreatment(plainCtx)).toBeUndefined();
+  });
+});

package/src/__tests__/attrTokens.test.ts

@@ -0,0 +1,162 @@
+import { describe, it, expect } from 'vitest';
+import {
+  tokenizeAttrTokens,
+  splitKeyValueToken,
+  unquoteAttrValue,
+  needsQuoting,
+  quoteAttrValue,
+  matchTrailingTemplateAnnotation,
+  matchTrailingPandocAttr,
+} from '../markdown/attrTokens.js';
+
+describe('tokenizeAttrTokens', () => {
+  it('splits bare tokens on whitespace', () => {
+    expect(tokenizeAttrTokens('chart colorScheme=blue size=large')).toEqual([
+      'chart',
+      'colorScheme=blue',
+      'size=large',
+    ]);
+  });
+
+  it('keeps a double-quoted value as one token', () => {
+    expect(tokenizeAttrTokens('caption="Beach at sunset" columns=3')).toEqual([
+      'caption="Beach at sunset"',
+      'columns=3',
+    ]);
+  });
+
+  it('keeps a single-quoted value as one token', () => {
+    expect(tokenizeAttrTokens("caption='Beach at sunset'")).toEqual(["caption='Beach at sunset'"]);
+  });
+
+  it('treats a quote mid-value as a literal character', () => {
+    // The quote in O'Brien is not at a value start, so it must not open a
+    // quoted run and swallow the following token.
+    expect(tokenizeAttrTokens("attribution=O'Brien x=4")).toEqual(["attribution=O'Brien", 'x=4']);
+  });
+
+  it('preserves escape pairs inside a quoted run', () => {
+    expect(tokenizeAttrTokens('label="he said \\"hi\\""')).toEqual(['label="he said \\"hi\\""']);
+  });
+
+  it('tolerates an unbalanced opening quote (run extends to end of input)', () => {
+    expect(tokenizeAttrTokens('caption="oops trailing')).toEqual(['caption="oops trailing']);
+  });
+
+  it('keeps a bare quoted token verbatim', () => {
+    expect(tokenizeAttrTokens('"just a string"')).toEqual(['"just a string"']);
+  });
+});
+
+describe('splitKeyValueToken / unquoteAttrValue', () => {
+  it('splits on the first =', () => {
+    expect(splitKeyValueToken('a=b=c')).toEqual({ key: 'a', value: 'b=c' });
+  });
+
+  it('returns null for tokens without = past the first character', () => {
+    expect(splitKeyValueToken('chart')).toBeNull();
+    expect(splitKeyValueToken('#id')).toBeNull();
+    expect(splitKeyValueToken('=leading')).toBeNull();
+  });
+
+  it('strips matching double quotes and unescapes', () => {
+    expect(splitKeyValueToken('label="he said \\"hi\\""')).toEqual({
+      key: 'label',
+      value: 'he said "hi"',
+    });
+  });
+
+  it('strips matching single quotes and unescapes', () => {
+    expect(splitKeyValueToken("label='it\\'s here'")).toEqual({ key: 'label', value: "it's here" });
+  });
+
+  it('leaves unmatched quotes verbatim', () => {
+    expect(unquoteAttrValue('"unbalanced')).toBe('"unbalanced');
+    expect(unquoteAttrValue('"')).toBe('"');
+  });
+
+  it('leaves backslashes before other characters alone', () => {
+    expect(unquoteAttrValue('"C:\\temp"')).toBe('C:\\temp');
+  });
+});
+
+describe('needsQuoting / quoteAttrValue', () => {
+  it('passes simple values through bare', () => {
+    expect(quoteAttrValue('blue')).toBe('blue');
+    expect(quoteAttrValue('a,b,c')).toBe('a,b,c');
+    expect(quoteAttrValue('foo:flow')).toBe('foo:flow');
+  });
+
+  it('double-quotes values with spaces', () => {
+    expect(quoteAttrValue('Beach at sunset')).toBe('"Beach at sunset"');
+  });
+
+  it('quotes empty values', () => {
+    expect(quoteAttrValue('')).toBe('""');
+  });
+
+  it('quotes values containing brackets or braces', () => {
+    expect(needsQuoting('a]b')).toBe(true);
+    expect(quoteAttrValue('a]b')).toBe('"a]b"');
+    expect(quoteAttrValue('a}b')).toBe('"a}b"');
+  });
+
+  it('switches to single quotes when the value contains a double quote', () => {
+    expect(quoteAttrValue('She said "hi"')).toBe('\'She said "hi"\'');
+  });
+
+  it('falls back to double quotes with escapes when both quote chars appear', () => {
+    expect(quoteAttrValue('it\'s a "thing"')).toBe('"it\'s a \\"thing\\""');
+  });
+
+  it('round-trips through tokenize + split', () => {
+    const values = ['Beach at sunset', 'a ] b', 'She said "hi"', "it's fine", 'C:\\temp', ''];
+    for (const value of values) {
+      const tokens = tokenizeAttrTokens(`key=${quoteAttrValue(value)}`);
+      expect(tokens).toHaveLength(1);
+      expect(splitKeyValueToken(tokens[0])).toEqual({ key: 'key', value });
+    }
+  });
+});
+
+describe('matchTrailingTemplateAnnotation', () => {
+  it('matches a simple trailing annotation', () => {
+    const m = matchTrailingTemplateAnnotation('Getting Started {[comparisonBar]}');
+    expect(m?.inner).toBe('comparisonBar');
+  });
+
+  it('allows ] inside a quoted value', () => {
+    const m = matchTrailingTemplateAnnotation('X {[quote text="a ] b"]}');
+    expect(m?.inner).toBe('quote text="a ] b"');
+  });
+
+  it('falls back to the legacy grammar for unbalanced quotes', () => {
+    const m = matchTrailingTemplateAnnotation('X {[quote text="oops]}');
+    expect(m?.inner).toBe('quote text="oops');
+  });
+
+  it('still tolerates an accidentally doubled trailing ]}', () => {
+    const m = matchTrailingTemplateAnnotation('X {[comparisonBar]}]}');
+    expect(m?.inner).toBe('comparisonBar');
+  });
+
+  it('rejects non-trailing annotations', () => {
+    expect(matchTrailingTemplateAnnotation('The {[chart]} section')).toBeNull();
+  });
+});
+
+describe('matchTrailingPandocAttr', () => {
+  it('matches a simple trailing block', () => {
+    const m = matchTrailingPandocAttr('Section {#intro .wide x=4}');
+    expect(m?.inner).toBe('#intro .wide x=4');
+  });
+
+  it('allows } inside a quoted value', () => {
+    const m = matchTrailingPandocAttr('X {caption="a } b"}');
+    expect(m?.inner).toBe('caption="a } b"');
+  });
+
+  it('does not match the {[…]} template form', () => {
+    expect(matchTrailingPandocAttr('X {[chart]}')).toBeNull();
+  });
+});

package/src/__tests__/contentExtractor.test.ts

@@ -116,6 +116,36 @@ describe('extractContent — comparisons', () => {
       expect(comp.right.label).toBeTruthy();
     }
   });
+
+  it('does not let a comparison capture cross a sentence boundary', () => {
+    // Regression: greedy `.{2,30}` used to capture right="witness. Robertson"
+    // from the "from witness to witness." idiom bleeding into the next sentence.
+    const text =
+      'Testimony about who carried guns and how many shots were fired ' +
+      'contradicted from witness to witness. Robertson, who initially ' +
+      'testified against the others, was later named as the ringleader.';
+    const result = extractContent(text, { types: ['comparison'] });
+    for (const el of result.elements) {
+      if (el.data.type === 'comparison') {
+        expect(el.data.left.label).not.toContain('.');
+        expect(el.data.right.label).not.toContain('.');
+        expect(el.data.right.label.toLowerCase()).not.toContain('robertson');
+      }
+    }
+  });
+
+  it('rejects idiomatic "from X to X" non-comparisons', () => {
+    // "from witness to witness", "from day to day" mean "it varied", not "A vs B".
+    for (const text of [
+      'The testimony varied from witness to witness across the trial.',
+      'Conditions changed from day to day during the expedition.',
+      'The practice was handed down from generation to generation.',
+    ]) {
+      const result = extractContent(text, { types: ['comparison'] });
+      const comparisons = result.elements.filter((e) => e.data.type === 'comparison');
+      expect(comparisons.length).toBe(0);
+    }
+  });
 });
 
 describe('extractContent — impact lines', () => {
@@ -125,6 +155,36 @@ describe('extractContent — impact lines', () => {
     const result = extractContent(text, { types: ['impactLine'] });
     expect(result.elements.length).toBeGreaterThan(0);
   });
+
+  it('does not split sentences on abbreviations or initials', () => {
+    // Regression: "…at George W. Tibbetts' store…" was split at "W." into the
+    // fragment "They were met at George W" and shown as a standalone slide.
+    const text =
+      "They were met at George W. Tibbetts' store by a crowd of white and Native men " +
+      'who intimidated them into turning back.';
+    const result = extractContent(text, { types: ['impactLine', 'fact'] });
+    for (const el of result.elements) {
+      if (el.data.type === 'impactLine') {
+        expect(el.data.text).not.toMatch(/George W$/);
+      }
+      if (el.data.type === 'fact') {
+        expect(el.data.fact).not.toMatch(/George W$/);
+      }
+      // No fragment should end on a bare single-letter initial.
+      expect(el.text).not.toMatch(/\b[A-Z]$/);
+    }
+  });
+
+  it('keeps initials-heavy name lists intact as one sentence', () => {
+    const text =
+      'A jury named M. DeWitt Rumsey, Joseph Day, and David Hughes among the killers. ' +
+      'The verdict shocked the town.';
+    const result = extractContent(text, { types: ['fact', 'impactLine'] });
+    // The "M." initial must not spawn a "A jury named M" fragment.
+    for (const el of result.elements) {
+      expect(el.text).not.toMatch(/named M$/);
+    }
+  });
 });
 
 describe('extractContent — lists', () => {

package/src/__tests__/coverBlock.test.ts

@@ -1,5 +1,10 @@
 import { describe, it, expect } from 'vitest';
-import { coverBlock, expandCoverBlock, startBlockToCoverInput } from '../doc/templates/coverBlock';
+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';
@@ -179,6 +184,46 @@ describe('coverBlock viewport scaling', () => {
   });
 });
 
+// ── 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', () => {

package/src/__tests__/customTemplateSample.test.ts

@@ -0,0 +1,144 @@
+/**
+ * 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);
+  });
+});