@bendyline/squisq 2.1.0 → 2.2.0

package/src/doc/templates/__tests__/customTemplateRegistry.test.ts

@@ -1,124 +0,0 @@
-/**
- * Registry merge — end-to-end: a doc that uses a custom template name
- * resolves through `expandDocBlocks(opts.customTemplates)` and produces
- * layers with tokens substituted from the source block.
- */
-
-import { describe, it, expect } from 'vitest';
-import { buildRegistry, expandDocBlocks } from '../index';
-import type { CustomTemplateDefinition } from '../../../schemas/CustomTemplates.js';
-import type { Block, TextLayer } from '../../../schemas/Doc.js';
-
-const heroDef: CustomTemplateDefinition = {
-  name: 'hero',
-  label: 'Hero',
-  viewport: { width: 1920, height: 1080 },
-  layers: [
-    {
-      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' } },
-    },
-  ],
-};
-
-describe('buildRegistry', () => {
-  it('merges custom templates onto the built-in registry', () => {
-    const reg = buildRegistry([heroDef]);
-    expect(reg.hero).toBeDefined();
-    expect(reg.title).toBeDefined(); // built-in survives
-  });
-
-  it('does not let custom templates shadow built-in names', () => {
-    const collide: CustomTemplateDefinition = {
-      ...heroDef,
-      name: 'title', // collides with built-in
-    };
-    const reg = buildRegistry([collide]);
-    // Built-in `title` is preserved — the collide entry is silently
-    // dropped (callers shouldn't have created it). We verify by
-    // checking the function reference is the original built-in's.
-    const builtIn = buildRegistry();
-    expect(reg.title).toBe(builtIn.title);
-  });
-});
-
-describe('expandDocBlocks with customTemplates', () => {
-  it('expands a doc-defined template name into resolved layers', () => {
-    const block: Block = {
-      id: 'b1',
-      startTime: 0,
-      duration: 1,
-      audioSegment: 0,
-      title: 'Welcome',
-      template: 'hero',
-      contents: [
-        {
-          type: 'paragraph',
-          children: [{ type: 'text', value: 'A small editor for big ideas.' }],
-        },
-      ],
-    };
-
-    const expanded = expandDocBlocks([block], { customTemplates: [heroDef] });
-    expect(expanded).toHaveLength(1);
-    const layers = expanded[0].layers ?? [];
-    expect(layers).toHaveLength(2);
-    expect((layers[0] as TextLayer).content.text).toBe('Welcome');
-    expect((layers[1] as TextLayer).content.text).toBe('A small editor for big ideas.');
-  });
-
-  it('preserves %-based positions so the SSR renderer can resolve them per viewport', () => {
-    const block: Block = {
-      id: 'b1',
-      startTime: 0,
-      duration: 1,
-      audioSegment: 0,
-      title: 'X',
-      template: 'hero',
-    };
-    const expanded = expandDocBlocks([block], { customTemplates: [heroDef] });
-    expect(expanded[0].layers![0].position.x).toBe('5%');
-    expect(expanded[0].layers![0].position.width).toBe('90%');
-  });
-
-  it('returns a visible fallback and structured diagnostic when the template is unknown', () => {
-    const block: Block = {
-      id: 'b1',
-      startTime: 0,
-      duration: 1,
-      audioSegment: 0,
-      title: 'Y',
-      template: 'nonexistent',
-    };
-    const diagnostics: string[] = [];
-    const expanded = expandDocBlocks([block], {
-      customTemplates: [heroDef],
-      onDiagnostic: (diagnostic) => diagnostics.push(diagnostic.code),
-    });
-    expect(expanded[0].layers?.some((layer) => layer.id === 'fallback-notice')).toBe(true);
-    expect(diagnostics).toEqual(['unknown-template']);
-  });
-
-  it('retains an explicit empty policy for hosts that do not want fallback UI', () => {
-    const block: Block = {
-      id: 'b1',
-      startTime: 0,
-      duration: 1,
-      audioSegment: 0,
-      template: 'nonexistent',
-    };
-    const expanded = expandDocBlocks([block], {
-      customTemplates: [heroDef],
-      failureMode: 'empty',
-    });
-    expect(expanded[0].layers).toBeUndefined();
-  });
-});

package/src/doc/templates/__tests__/listBlock.test.ts

@@ -1,64 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { createTemplateContext } from '../../../schemas/BlockTemplates.js';
-import type { TextLayer } from '../../../schemas/Doc.js';
-import { DEFAULT_THEME } from '../../../schemas/themeLibrary.js';
-import { VIEWPORT_PRESETS } from '../../../schemas/Viewport.js';
-import { listBlock } from '../listBlock.js';
-
-const ITEMS = [
-  'We launched the scripting platform for Minecraft, which was essential for launching new categories of content for Minecraft (add-ons)',
-  "I spec'ed and largely built the Minecraft Creator Tools suite, including a website for beginning to advanced creators and set of NPM commands and tools.",
-  'I manage and craft the Minecraft samples and documentation suite',
-  'I produce and create the Minecraft Creator Channel on YouTube',
-];
-
-describe('listBlock', () => {
-  it('reserves vertical space for wrapped list items', () => {
-    const context = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
-    const layers = listBlock(
-      {
-        template: 'list',
-        id: 'minecraft-platform',
-        duration: 10,
-        audioSegment: 0,
-        title: 'Minecraft Platform',
-        items: ITEMS,
-      },
-      context,
-    );
-    const itemLayers = layers.filter(
-      (layer): layer is TextLayer => layer.type === 'text' && /^item-\d+$/.test(layer.id),
-    );
-    const markerLayers = layers.filter(
-      (layer): layer is TextLayer => layer.type === 'text' && /^item-\d+-marker$/.test(layer.id),
-    );
-    const yPositions = itemLayers.map((layer) => parseFloat(String(layer.position.y)));
-
-    expect(itemLayers).toHaveLength(4);
-    expect(markerLayers).toHaveLength(4);
-    expect(yPositions[0]).toBe(34);
-
-    // The marker has its own right-aligned column, while all body lines are
-    // rendered by one layer beginning after that column (a hanging indent).
-    expect(markerLayers[0]!.content.text).toBe('1.');
-    expect(markerLayers[0]!.content.style.textAlign).toBe('right');
-    expect(itemLayers[0]!.content.text).toBe(ITEMS[0]);
-    const markerRightPx =
-      (parseFloat(String(markerLayers[0]!.position.x)) / 100) * context.viewport.width +
-      Number(markerLayers[0]!.position.width);
-    const bodyLeftPx =
-      (parseFloat(String(itemLayers[0]!.position.x)) / 100) * context.viewport.width;
-    expect(bodyLeftPx).toBeGreaterThan(markerRightPx);
-
-    // The first two entries wrap to two lines. Their following baselines
-    // therefore advance by two line-heights plus the inter-item gap.
-    const fontSize = itemLayers[0]!.content.style.fontSize;
-    const twoLineAdvance = ((2 * fontSize * 1.2 + 18) / context.viewport.height) * 100;
-    expect(yPositions[1]! - yPositions[0]!).toBeCloseTo(twoLineAdvance);
-    expect(yPositions[2]! - yPositions[1]!).toBeCloseTo(twoLineAdvance);
-
-    // The third entry fits on one line, so the final advance is compact.
-    const oneLineAdvance = ((fontSize * 1.2 + 18) / context.viewport.height) * 100;
-    expect(yPositions[3]! - yPositions[2]!).toBeCloseTo(oneLineAdvance);
-  });
-});

package/src/doc/templates/accentImage.ts

@@ -1,362 +0,0 @@
-/**
- * Accent Image Utility
- *
- * Creates image layers and layout adjustments for accent images on text-based slides.
- * Accent images are tasteful additions that complement text without overwhelming it.
- *
- * Layout patterns:
- * - left-strip: 35% width vertical strip on left, text area shifted to right 65%
- * - right-strip: 35% width vertical strip on right, text area shifted to left 65%
- * - bottom-strip: 35% height horizontal strip at bottom, text area in upper 65%
- * - corner-inset: Small 25% corner image with gradient vignette
- *
- * This is shared code used by both site and efb-app doc renderers.
- */
-
-import type {
-  Layer,
-  ImageLayer,
-  ImageTreatment,
-  ShapeLayer,
-  Animation,
-} from '../../schemas/Doc.js';
-import type { AccentImage, AccentPosition } from '../../schemas/BlockTemplates.js';
-
-const PERCENTAGE_RE = /^(\d+(?:\.\d+)?)\s*%?$/;
-
-/**
- * Layout adjustments when an accent image is present.
- * Templates use these values to reposition their text content.
- */
-export interface AccentLayout {
-  /** X offset for text center (e.g., '64%' for left-strip) */
-  textCenterX: string;
-  /** Width available for text content */
-  textWidth: string;
-  /** Y offset adjustment for vertical positioning */
-  textYAdjust: number;
-  /** Whether to adjust Y positions (for bottom-strip) */
-  adjustY: boolean;
-}
-
-/**
- * Default layout when no accent image is present.
- */
-export const DEFAULT_LAYOUT: AccentLayout = {
-  textCenterX: '50%',
-  textWidth: '85%',
-  textYAdjust: 0,
-  adjustY: false,
-};
-
-/**
- * Map ambientMotion values to proper Ken Burns animations.
- * Uses slowZoom variants which provide smooth pan/zoom without opacity changes.
- * Supports both standard values ('zoomIn', 'panLeft', etc.) and legacy
- * aliases ('in', 'out', 'left', 'right') for backward compatibility.
- *
- * @param motion - The ambient motion value (e.g., 'zoomIn', 'panLeft')
- * @param duration - Optional animation duration in seconds
- */
-export function mapAmbientMotion(
-  motion: string | undefined,
-  duration?: number,
-): Animation | undefined {
-  if (!motion) return undefined;
-  const base = duration !== undefined ? { duration } : {};
-  switch (motion) {
-    case 'zoomIn':
-    case 'in':
-      return { type: 'slowZoom', direction: 'in', ...base };
-    case 'zoomOut':
-    case 'out':
-      return { type: 'slowZoom', direction: 'out', ...base };
-    case 'panLeft':
-    case 'left':
-      return { type: 'slowZoom', panDirection: 'left', ...base };
-    case 'panRight':
-    case 'right':
-      return { type: 'slowZoom', panDirection: 'right', ...base };
-    default:
-      return undefined;
-  }
-}
-
-/**
- * Accent strip width/height as percentage.
- * 35% gives the image enough presence to complement the text without overwhelming it.
- */
-const STRIP_SIZE = 35;
-const STRIP_SIZE_PCT = `${STRIP_SIZE}%`;
-
-/**
- * Get layout adjustments based on accent position.
- */
-export function getAccentLayout(position: AccentPosition): AccentLayout {
-  switch (position) {
-    case 'left-strip':
-      return {
-        textCenterX: `${50 + STRIP_SIZE / 2}%`, // Shift center right
-        textWidth: `${100 - STRIP_SIZE - 8}%`, // Leave margin
-        textYAdjust: 0,
-        adjustY: false,
-      };
-    case 'right-strip':
-      return {
-        textCenterX: `${50 - STRIP_SIZE / 2}%`, // Shift center left
-        textWidth: `${100 - STRIP_SIZE - 8}%`,
-        textYAdjust: 0,
-        adjustY: false,
-      };
-    case 'bottom-strip':
-      return {
-        textCenterX: '50%',
-        textWidth: '85%',
-        textYAdjust: -10, // Shift content up by 10%
-        adjustY: true,
-      };
-    case 'corner-inset':
-      return {
-        textCenterX: '45%', // Slight shift to avoid corner
-        textWidth: '70%',
-        textYAdjust: 0,
-        adjustY: false,
-      };
-    default:
-      return DEFAULT_LAYOUT;
-  }
-}
-
-/**
- * Create layers for an accent image.
- * Returns the image layer and any overlay/gradient layers needed.
- */
-export function createAccentLayers(
-  accent: AccentImage,
-  slideId: string,
-  treatment?: ImageTreatment,
-): Layer[] {
-  const layers: Layer[] = [];
-  const { src, alt, position, ambientMotion, credit, license } = accent;
-
-  switch (position) {
-    case 'left-strip':
-      layers.push(
-        createStripImage(src, alt, 'left', slideId, ambientMotion, credit, license, treatment),
-      );
-      layers.push(createStripGradient('left', slideId));
-      break;
-
-    case 'right-strip':
-      layers.push(
-        createStripImage(src, alt, 'right', slideId, ambientMotion, credit, license, treatment),
-      );
-      layers.push(createStripGradient('right', slideId));
-      break;
-
-    case 'bottom-strip':
-      layers.push(
-        createBottomStripImage(src, alt, slideId, ambientMotion, credit, license, treatment),
-      );
-      layers.push(createBottomStripGradient(slideId));
-      break;
-
-    case 'corner-inset':
-      layers.push(
-        createCornerInsetImage(src, alt, slideId, ambientMotion, credit, license, treatment),
-      );
-      layers.push(createCornerVignette(slideId));
-      break;
-  }
-
-  return layers;
-}
-
-/**
- * Create a vertical strip image layer.
- */
-function createStripImage(
-  src: string,
-  alt: string,
-  side: 'left' | 'right',
-  slideId: string,
-  ambientMotion?: AccentImage['ambientMotion'],
-  credit?: string,
-  license?: string,
-  treatment?: ImageTreatment,
-): ImageLayer {
-  return {
-    type: 'image',
-    id: `${slideId}-accent-img`,
-    content: {
-      src,
-      alt,
-      fit: 'cover',
-      credit,
-      license,
-      ...(treatment ? { treatment } : {}),
-    },
-    position: {
-      x: side === 'left' ? 0 : `${100 - STRIP_SIZE}%`,
-      y: 0,
-      width: STRIP_SIZE_PCT,
-      height: '100%',
-    },
-    animation: mapAmbientMotion(ambientMotion, 15),
-  };
-}
-
-/**
- * Create a gradient overlay for strip images (fades to background).
- */
-function createStripGradient(side: 'left' | 'right', slideId: string): ShapeLayer {
-  // Gradient from transparent to background color at the edge
-  const gradientId = side === 'left' ? 'accent-gradient-left' : 'accent-gradient-right';
-
-  return {
-    type: 'shape',
-    id: `${slideId}-accent-fade`,
-    content: {
-      shape: 'rect',
-      // SVG gradient will be handled by the renderer
-      // Using a semi-transparent overlay as fallback
-      fill: `url(#${gradientId})`,
-    },
-    position: {
-      x: side === 'left' ? `${STRIP_SIZE - 8}%` : `${100 - STRIP_SIZE}%`,
-      y: 0,
-      width: '10%',
-      height: '100%',
-    },
-  };
-}
-
-/**
- * Create a horizontal bottom strip image layer.
- */
-function createBottomStripImage(
-  src: string,
-  alt: string,
-  slideId: string,
-  ambientMotion?: AccentImage['ambientMotion'],
-  credit?: string,
-  license?: string,
-  treatment?: ImageTreatment,
-): ImageLayer {
-  return {
-    type: 'image',
-    id: `${slideId}-accent-img`,
-    content: {
-      src,
-      alt,
-      fit: 'cover',
-      credit,
-      license,
-      ...(treatment ? { treatment } : {}),
-    },
-    position: {
-      x: 0,
-      y: `${100 - STRIP_SIZE}%`,
-      width: '100%',
-      height: STRIP_SIZE_PCT,
-    },
-    animation: mapAmbientMotion(ambientMotion, 15),
-  };
-}
-
-/**
- * Create a gradient overlay for bottom strip (fades up to background).
- */
-function createBottomStripGradient(slideId: string): ShapeLayer {
-  return {
-    type: 'shape',
-    id: `${slideId}-accent-fade`,
-    content: {
-      shape: 'rect',
-      fill: 'url(#accent-gradient-bottom)',
-    },
-    position: {
-      x: 0,
-      y: `${100 - STRIP_SIZE - 8}%`,
-      width: '100%',
-      height: '12%',
-    },
-  };
-}
-
-/**
- * Create a corner inset image layer.
- */
-function createCornerInsetImage(
-  src: string,
-  alt: string,
-  slideId: string,
-  ambientMotion?: AccentImage['ambientMotion'],
-  credit?: string,
-  license?: string,
-  treatment?: ImageTreatment,
-): ImageLayer {
-  return {
-    type: 'image',
-    id: `${slideId}-accent-img`,
-    content: {
-      src,
-      alt,
-      fit: 'cover',
-      credit,
-      license,
-      ...(treatment ? { treatment } : {}),
-    },
-    position: {
-      x: '70%',
-      y: '60%',
-      width: '28%',
-      height: '38%',
-      anchor: 'top-left',
-    },
-    animation: mapAmbientMotion(ambientMotion, 15) ?? { type: 'fadeIn', duration: 2, delay: 0.5 },
-  };
-}
-
-/**
- * Create a vignette overlay around corner inset.
- */
-function createCornerVignette(slideId: string): ShapeLayer {
-  return {
-    type: 'shape',
-    id: `${slideId}-accent-vignette`,
-    content: {
-      shape: 'rect',
-      fill: 'url(#accent-vignette-corner)',
-      borderRadius: 8,
-    },
-    position: {
-      x: '69%',
-      y: '59%',
-      width: '30%',
-      height: '40%',
-    },
-  };
-}
-
-/**
- * Adjust a Y position value based on accent layout.
- * Used by templates to shift content when bottom-strip is present.
- */
-export function adjustY(originalY: string | number, layout: AccentLayout): string {
-  if (!layout.adjustY || layout.textYAdjust === 0) {
-    return typeof originalY === 'number' ? `${originalY}%` : originalY;
-  }
-
-  // Parse percentage value
-  const yStr = typeof originalY === 'number' ? `${originalY}` : originalY;
-  const match = yStr.match(PERCENTAGE_RE);
-
-  if (match) {
-    const yValue = parseFloat(match[1]);
-    const adjusted = Math.max(5, yValue + layout.textYAdjust);
-    return `${adjusted}%`;
-  }
-
-  return yStr;
-}

package/src/doc/templates/captionUtils.ts

@@ -1,56 +0,0 @@
-/**
- * Template Utilities
- *
- * Shared helpers for doc block templates:
- * - Caption text cleaning
- * - Common layer construction patterns
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-
-const TRAILING_PUNCT_RE = /[.;:!?]+$/;
-
-/**
- * Strip trailing punctuation from a caption string.
- * Image captions on blocks look cleaner without terminal periods,
- * semicolons, or other sentence-ending punctuation.
- */
-export function cleanCaption(text: string): string {
-  return text.replace(TRAILING_PUNCT_RE, '').trim();
-}
-
-/**
- * Create a full-screen background shape layer.
- * Most text-based templates start with this as their first layer.
- */
-export function createBackgroundLayer(id: string, fill: string): Layer {
-  return {
-    type: 'shape',
-    id,
-    content: { shape: 'rect', fill },
-    position: { x: 0, y: 0, width: '100%', height: '100%' },
-  };
-}
-
-/**
- * Estimate the rendered height (px) of a wrapped text block.
- *
- * Templates are pure functions with no access to real text metrics, but
- * stacked lockups (quote + attribution, fact + explanation + source) need
- * to place each element relative to the previous one instead of at fixed
- * slots — fixed slots leave 200px voids for short content and collide for
- * long content. The 0.52 average-glyph-width factor is tuned for the
- * sans/serif faces the built-in themes use; it only needs to be right
- * within ~20% for spacing purposes.
- */
-export function estimateTextHeight(
-  text: string,
-  fontSizePx: number,
-  maxWidthPx: number,
-  lineHeight: number,
-): number {
-  const avgCharWidth = fontSizePx * 0.52;
-  const charsPerLine = Math.max(8, Math.floor(maxWidthPx / avgCharWidth));
-  const lines = Math.max(1, Math.ceil(text.length / charsPerLine));
-  return lines * fontSizePx * lineHeight;
-}