@bendyline/squisq 2.0.1 → 2.2.0

package/src/doc/templates/comparisonBar.ts

@@ -1,173 +0,0 @@
-/**
- * Comparison Bar Template
- *
- * Two horizontal bars showing relative numeric values side by side.
- * Bar widths are proportional to the values for immediate visual comparison.
- * Good for population, distance, or measurement comparisons.
- *
- * This is shared code used by both site and efb-app doc renderers.
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type { ComparisonBarInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import {
-  resolveColorScheme,
-  getThemeFont,
-  themedFontSize,
-  themedSurfaceGradient,
-} from '../utils/themeUtils.js';
-
-export function comparisonBar(input: ComparisonBarInput, context: TemplateContext): Layer[] {
-  const { leftLabel, rightLabel, unit, colorScheme = 'blue' } = input;
-  const { theme, viewport } = context;
-  const colors = resolveColorScheme(context, colorScheme);
-
-  // Defensive: coerce non-finite values to 0. Callers should pass real numbers,
-  // but a NaN would otherwise render as literal "NaN" text and collapse every
-  // bar/label to a `NaN%` position, cramming the block against its left edge.
-  const leftValue = Number.isFinite(input.leftValue) ? input.leftValue : 0;
-  const rightValue = Number.isFinite(input.rightValue) ? input.rightValue : 0;
-
-  const labelFontSize = themedFontSize(28, context, false);
-  const valueFontSize = themedFontSize(48, context, true);
-
-  // Format values for display
-  const formatValue = (v: number): string => {
-    if (!Number.isFinite(v)) return '—';
-    if (v >= 1_000_000) return `${(v / 1_000_000).toFixed(1)}M`;
-    if (v >= 1_000) return `${(v / 1_000).toFixed(v >= 10_000 ? 0 : 1)}K`;
-    return v.toLocaleString();
-  };
-
-  const leftDisplay = unit ? `${formatValue(leftValue)} ${unit}` : formatValue(leftValue);
-  const rightDisplay = unit ? `${formatValue(rightValue)} ${unit}` : formatValue(rightValue);
-
-  // Bar positioning
-  const barStartX = 15;
-  const barHeight = 6; // % of viewport height
-  const topBarY = 36;
-  const bottomBarY = 58;
-
-  // Calculate proportional bar widths. The widest bar must leave room
-  // for its trailing value label inside a 96% safe area — otherwise a
-  // long label ("84 clarity score") runs off the right edge of the block.
-  const maxValue = Math.max(leftValue, rightValue, 1);
-  const longestLabelPx = Math.max(leftDisplay.length, rightDisplay.length) * valueFontSize * 0.58;
-  const labelWidthPct = (longestLabelPx / viewport.width) * 100;
-  const maxBarWidth = Math.max(20, Math.min(65, 96 - barStartX - labelWidthPct - 2));
-  const leftBarWidth = (leftValue / maxValue) * maxBarWidth;
-  const rightBarWidth = (rightValue / maxValue) * maxBarWidth;
-
-  return [
-    // Background
-    {
-      type: 'shape',
-      id: 'bg',
-      content: {
-        shape: 'rect',
-        fill: themedSurfaceGradient(context, 180),
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    },
-
-    // Top bar label
-    {
-      type: 'text',
-      id: 'left-label',
-      content: {
-        text: leftLabel,
-        style: {
-          fontSize: labelFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          color: theme.colors.textMuted,
-        },
-      },
-      position: { x: `${barStartX}%`, y: `${topBarY - 8}%` },
-    },
-
-    // Top bar value
-    {
-      type: 'text',
-      id: 'left-value',
-      content: {
-        text: leftDisplay,
-        style: {
-          fontSize: valueFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          fontWeight: 'bold',
-          color: colors.text,
-        },
-      },
-      position: { x: `${barStartX + leftBarWidth + 2}%`, y: `${topBarY - 1}%` },
-      animation: { type: 'fadeIn', duration: 0.8, delay: 0.3 },
-    },
-
-    // Top bar
-    {
-      type: 'shape',
-      id: 'left-bar',
-      content: {
-        shape: 'rect',
-        fill: colors.text,
-        borderRadius: 4,
-      },
-      position: {
-        x: `${barStartX}%`,
-        y: `${topBarY}%`,
-        width: `${leftBarWidth}%`,
-        height: `${barHeight}%`,
-      },
-      animation: { type: 'fadeIn', duration: 1 },
-    },
-
-    // Bottom bar label
-    {
-      type: 'text',
-      id: 'right-label',
-      content: {
-        text: rightLabel,
-        style: {
-          fontSize: labelFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          color: theme.colors.textMuted,
-        },
-      },
-      position: { x: `${barStartX}%`, y: `${bottomBarY - 8}%` },
-    },
-
-    // Bottom bar value
-    {
-      type: 'text',
-      id: 'right-value',
-      content: {
-        text: rightDisplay,
-        style: {
-          fontSize: valueFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          fontWeight: 'bold',
-          color: colors.accent,
-        },
-      },
-      position: { x: `${barStartX + rightBarWidth + 2}%`, y: `${bottomBarY - 1}%` },
-      animation: { type: 'fadeIn', duration: 0.8, delay: 0.6 },
-    },
-
-    // Bottom bar
-    {
-      type: 'shape',
-      id: 'right-bar',
-      content: {
-        shape: 'rect',
-        fill: colors.accent,
-        borderRadius: 4,
-      },
-      position: {
-        x: `${barStartX}%`,
-        y: `${bottomBarY}%`,
-        width: `${rightBarWidth}%`,
-        height: `${barHeight}%`,
-      },
-      animation: { type: 'fadeIn', duration: 1, delay: 0.3 },
-    },
-  ];
-}

package/src/doc/templates/coverBlock.ts

@@ -1,255 +0,0 @@
-/**
- * Cover Block Template
- *
- * Full-screen hero image with title overlay, shown before playback starts.
- * This is the "poster for the doc, displaying the
- * article's hero image with elegant title treatment.
- *
- * Features:
- * - Full-screen hero image with Ken Burns ambient motion
- * - Gradient overlay for text readability
- * - Large centered title with optional subtitle
- * - No animation delays (shown at rest, not during playback)
- *
- * This is shared code used by both site and efb-app doc renderers.
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type { TemplateContext } from '../../schemas/BlockTemplates.js';
-import type { StartBlockConfig } from '../../schemas/Doc.js';
-import { getThemeFont, themedFontSize, themedImageTreatment } from '../utils/themeUtils.js';
-import { relativeLuminance, withAlpha } from '../../schemas/colorUtils.js';
-import { mapAmbientMotion } from './accentImage.js';
-
-/**
- * Input for coverBlock template - matches StartBlockConfig
- */
-export interface CoverBlockInput {
-  /** Path to hero image (omit for theme-driven background) */
-  heroSrc?: string;
-  /** Alt text for the hero image */
-  heroAlt?: string;
-  /** Title to display over the hero */
-  title: string;
-  /** Optional subtitle */
-  subtitle?: string;
-  /** Ambient motion for the hero image */
-  ambientMotion?: 'zoomIn' | 'zoomOut' | 'panLeft' | 'panRight';
-  /** Photo credit / artist name */
-  heroCredit?: string;
-  /** License identifier */
-  heroLicense?: string;
-  /** Per-block override for the theme's photographic image grade. */
-  imageTreatment?: 'none' | 'mono' | 'duotone' | 'warm' | 'cool';
-}
-
-/** Base (pre-viewport-scale) font size for a full-size cover title. */
-const COVER_TITLE_BASE_PX = 120;
-/** Title length (chars) that still reads well at the full base size. */
-const COVER_TITLE_COMFORTABLE_CHARS = 26;
-/** Readability floor so very long titles never shrink to nothing. */
-const COVER_TITLE_MIN_BASE_PX = 62;
-
-/**
- * Compute the base cover-title font size for a given title, shrinking long
- * titles so their wrapped block fits the frame. Returns the pre-viewport-scale
- * value expected by {@link themedFontSize}; short titles get the full base.
- */
-export function fitCoverTitleSize(title: string): number {
-  const len = title.trim().length;
-  if (len <= COVER_TITLE_COMFORTABLE_CHARS) return COVER_TITLE_BASE_PX;
-  const scaled = COVER_TITLE_BASE_PX * Math.sqrt(COVER_TITLE_COMFORTABLE_CHARS / len);
-  return Math.max(COVER_TITLE_MIN_BASE_PX, Math.round(scaled));
-}
-
-function isStandardLightCover(context: TemplateContext): boolean {
-  const { theme } = context;
-  return theme.id === 'standard' && relativeLuminance(theme.colors.background) > 0.85;
-}
-
-/**
- * Generate cover block layers from StartBlockConfig.
- */
-export function coverBlock(input: CoverBlockInput, context: TemplateContext): Layer[] {
-  const treatment = themedImageTreatment(context, input.imageTreatment);
-  const { heroSrc, heroAlt, title, subtitle, ambientMotion, heroCredit, heroLicense } = input;
-  const { theme, layout } = context;
-  const standardLightCover = !heroSrc && isStandardLightCover(context);
-
-  // Scale font sizes for viewport - cover titles are larger than regular title blocks.
-  // The cover title wraps within maxTextWidth but does not otherwise shrink, so a long
-  // title (e.g. "Seattle: The Emerald City That Rebuilt Itself on Top of Itself") wrapped
-  // to three 120px lines overflows the frame and is clipped by the player controls.
-  // Auto-fit the base size to title length so long titles stay within the frame. The
-  // wrapped title's total height grows with fontSize² × length (line count ∝ length ×
-  // fontSize / width, line height ∝ fontSize), so scaling the base by √(threshold/length)
-  // keeps the wrapped block's area roughly constant past the threshold. Short titles are
-  // unaffected (scale clamps at 1).
-  const titleFontSize = themedFontSize(fitCoverTitleSize(title), context, true);
-  const subtitleFontSize = themedFontSize(40, context, false);
-
-  const layers: Layer[] = [];
-
-  if (heroSrc) {
-    // Hero image path: full-screen image with gradient overlay for text readability
-    const imageAnimation = mapAmbientMotion(ambientMotion);
-
-    layers.push(
-      {
-        type: 'image',
-        id: 'cover-hero',
-        content: {
-          src: heroSrc,
-          alt: heroAlt || title,
-          fit: 'cover',
-          credit: heroCredit,
-          license: heroLicense,
-          ...(treatment ? { treatment } : {}),
-        },
-        position: { x: 0, y: 0, width: '100%', height: '100%' },
-        animation: imageAnimation,
-      },
-      {
-        type: 'shape',
-        id: 'cover-gradient',
-        content: {
-          shape: 'rect',
-          fill: 'linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 70%, transparent 100%)',
-        },
-        position: { x: 0, y: 0, width: '100%', height: '100%' },
-      },
-    );
-  } else {
-    if (standardLightCover) {
-      // Standard Light needs a restrained cover-poster treatment; a
-      // full-strength primary radial hotspot overwhelms dark serif text
-      // and makes the subtitle muddy.
-      layers.push(
-        {
-          type: 'shape',
-          id: 'cover-bg',
-          content: {
-            shape: 'rect',
-            fill: theme.colors.background,
-          },
-          position: { x: 0, y: 0, width: '100%', height: '100%' },
-        },
-        {
-          type: 'shape',
-          id: 'cover-bg-tint',
-          content: {
-            shape: 'rect',
-            fill: `radial-gradient(ellipse at 50% 40%, ${withAlpha(theme.colors.primary, 0.16)} 0%, ${withAlpha(theme.colors.primary, 0.07)} 38%, ${withAlpha(theme.colors.primary, 0)} 78%)`,
-          },
-          position: { x: 0, y: 0, width: '100%', height: '100%' },
-        },
-      );
-    } else {
-      // Non-Standard themes keep the existing dramatic radial cover look.
-      layers.push({
-        type: 'shape',
-        id: 'cover-bg',
-        content: {
-          shape: 'rect',
-          fill: `radial-gradient(ellipse at 50% 40%, ${theme.colors.primary} 0%, ${theme.colors.background} 100%)`,
-        },
-        position: { x: 0, y: 0, width: '100%', height: '100%' },
-      });
-    }
-
-    // Subtle decorative accent line below title
-    layers.push({
-      type: 'shape',
-      id: 'cover-accent',
-      content: {
-        shape: 'rect',
-        fill: standardLightCover
-          ? withAlpha(theme.colors.primary, 0.24)
-          : 'rgba(255, 255, 255, 0.2)',
-      },
-      position: {
-        x: '35%',
-        y: subtitle ? '42%' : '58%',
-        width: '30%',
-        height: '2px',
-      },
-    });
-  }
-
-  // Title - positioned lower when over hero, centered when over solid background
-  layers.push({
-    type: 'text',
-    id: 'cover-title',
-    content: {
-      text: title,
-      style: {
-        fontSize: titleFontSize,
-        fontFamily: getThemeFont(context, 'title'),
-        fontWeight: 'bold',
-        color: theme.colors.text,
-        textAlign: 'center',
-        shadow: !standardLightCover,
-      },
-    },
-    position: {
-      x: '50%',
-      y: heroSrc ? (subtitle ? '70%' : '75%') : subtitle ? layout.primaryY : '50%',
-      anchor: 'center',
-      width: layout.maxTextWidth,
-    },
-    // No animation delay - shown immediately at rest
-    animation: { type: 'fadeIn', duration: 0.8 },
-  });
-
-  // Add subtitle if provided
-  if (subtitle) {
-    layers.push({
-      type: 'text',
-      id: 'cover-subtitle',
-      content: {
-        text: subtitle,
-        style: {
-          fontSize: subtitleFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          fontWeight: standardLightCover ? 'bold' : 'normal',
-          color: standardLightCover ? withAlpha(theme.colors.text, 0.78) : theme.colors.textMuted,
-          textAlign: 'center',
-          lineHeight: 1.5,
-        },
-      },
-      position: {
-        x: '50%',
-        y: heroSrc ? '82%' : layout.secondaryY,
-        anchor: 'center',
-        width: layout.maxTextWidth,
-      },
-      animation: { type: 'fadeIn', duration: 0.8, delay: 0.2 },
-    });
-  }
-
-  return layers;
-}
-
-/**
- * Convert StartBlockConfig to CoverBlockInput.
- */
-export function startBlockToCoverInput(config: StartBlockConfig): CoverBlockInput {
-  return {
-    heroSrc: config.heroSrc,
-    heroAlt: config.heroAlt,
-    title: config.title,
-    subtitle: config.subtitle,
-    ambientMotion: config.ambientMotion,
-    heroCredit: config.heroCredit,
-    heroLicense: config.heroLicense,
-  };
-}
-
-/**
- * Expand a StartBlockConfig into a renderable Block.
- * This is used by the player to render the cover block at rest.
- */
-export function expandCoverBlock(config: StartBlockConfig, context: TemplateContext): Layer[] {
-  const input = startBlockToCoverInput(config);
-  return coverBlock(input, context);
-}

package/src/doc/templates/customTemplate.ts

@@ -1,51 +0,0 @@
-/**
- * Custom template factory.
- *
- * Turns a `CustomTemplateDefinition` (user-authored visual design with
- * placeholder tokens) into a runtime `TemplateFunction` that can be
- * dropped into the template registry alongside built-ins.
- *
- * The generated function's job is small: read the source `Block` from
- * `context.block` and hand the definition's layers off to
- * `resolveTokens` for placeholder substitution. The hard work (drag-
- * to-position, token grammar, image lookup) happens in the designer
- * UI and the resolver, not here.
- */
-
-import type { Block, Layer } from '../../schemas/Doc.js';
-import type {
-  RawLayersInput,
-  TemplateContext,
-  TemplateFunction,
-} from '../../schemas/BlockTemplates.js';
-import type { CustomTemplateDefinition } from '../../schemas/CustomTemplates.js';
-import { resolveTokens } from './tokens/resolveTokens.js';
-
-/**
- * Build a template function for a user-authored custom template.
- *
- * The returned function is registered under `def.name` in the merged
- * registry (see `buildRegistry` in `templates/index.ts`). At expansion
- * time it receives the standard `TemplateBlock` + `TemplateContext`
- * pair; the context's `block` field carries the source markdown-derived
- * block whose data drives token resolution.
- *
- * When `context.block` is missing (shouldn't happen in the normal
- * pipeline but defensively handled), the layers are returned with
- * tokens left unresolved — better visible placeholders than a thrown
- * error.
- */
-export function makeCustomTemplateFn(
-  def: CustomTemplateDefinition,
-): TemplateFunction<RawLayersInput> {
-  return (input: RawLayersInput, context: TemplateContext): Layer[] => {
-    // `{attr:…}` reads the source block's `templateOverrides` /
-    // `templateData` / `metadata`. Prefer `context.block` (the raw
-    // block the expander attaches); fall back to `input` (the merged
-    // TemplateBlock, itself a Block superset) so attributes still
-    // resolve if `context.block` is ever absent.
-    const block = context.block ?? (input as unknown as Block | undefined);
-    if (!block) return def.layers.slice() as Layer[];
-    return resolveTokens(def.layers, block);
-  };
-}

package/src/doc/templates/dataTable.ts

@@ -1,102 +0,0 @@
-/**
- * Data Table Template
- *
- * Renders a themed table with header row and data rows.
- * Uses a TableLayer (foreignObject-based HTML table inside SVG)
- * for proper table layout within the viewport.
- *
- * Adapts font sizes for different viewports and uses theme colors
- * for header background, text, borders, and body cells.
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type { DataTableInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import {
-  getThemeFont,
-  resolveColorScheme,
-  shouldUseShadow,
-  themedFontSize,
-  themedSurfaceGradient,
-} from '../utils/themeUtils.js';
-import { pickContrastingText, withAlpha } from '../../schemas/colorUtils.js';
-import { createBackgroundLayer } from './captionUtils.js';
-
-export function dataTable(input: DataTableInput, context: TemplateContext): Layer[] {
-  const { title, headers, rows, align, colorScheme } = input;
-  const { theme, viewport } = context;
-
-  const colors = resolveColorScheme(context, colorScheme);
-  const titleFontSize = themedFontSize(48, context, true);
-  const tableFontSize = themedFontSize(28, context, false);
-
-  const layers: Layer[] = [createBackgroundLayer('bg', themedSurfaceGradient(context, 170))];
-
-  // Size the table band from its natural content height (header + rows at
-  // ~2.4× line height for cell padding) and center the title+table as one
-  // group — a full-height band left a ~200px orphan gap under the title.
-  // `rows` is required by the schema but may be missing on partially-
-  // authored blocks in live preview; treat it as empty rather than throwing.
-  const rowCount = (Array.isArray(rows) ? rows.length : 0) + 1;
-  const naturalTableHPct = Math.min(74, ((rowCount * tableFontSize * 2.4) / viewport.height) * 100);
-  const titleBandPct = title ? (titleFontSize * 2.2 * 100) / viewport.height : 0;
-  const groupTopPct = Math.max(8, (100 - titleBandPct - naturalTableHPct) / 2);
-
-  // Optional title above the table
-  if (title) {
-    layers.push({
-      type: 'text',
-      id: 'title',
-      content: {
-        text: title,
-        style: {
-          fontSize: titleFontSize,
-          fontFamily: getThemeFont(context, 'title'),
-          fontWeight: 'bold',
-          color: theme.colors.text,
-          textAlign: 'center',
-          shadow: shouldUseShadow(context),
-        },
-      },
-      position: {
-        x: '50%',
-        y: `${groupTopPct + titleBandPct / 2}%`,
-        width: '80%',
-        anchor: 'center',
-      },
-      animation: { type: 'fadeIn', duration: 0.8 },
-    });
-  }
-
-  // Table layer. Header text color is picked for contrast against the
-  // header fill — pairing two mid-tones from the same scheme made the
-  // header row read as a smudge in most themes.
-  layers.push({
-    type: 'table',
-    id: 'table',
-    content: {
-      headers,
-      rows,
-      align,
-      style: {
-        headerBackground: colors.accent,
-        headerColor: pickContrastingText(colors.accent),
-        cellBackground: withAlpha(theme.colors.text, 0.04),
-        cellColor: theme.colors.text,
-        borderColor: withAlpha(theme.colors.text, 0.15),
-        fontSize: tableFontSize,
-        fontFamily: getThemeFont(context, 'body'),
-        headerFontFamily: getThemeFont(context, 'title'),
-        borderRadius: 8,
-      },
-    },
-    position: {
-      x: '10%',
-      y: `${groupTopPct + titleBandPct}%`,
-      width: '80%',
-      height: `${naturalTableHPct}%`,
-    },
-    animation: { type: 'fadeIn', duration: 1, delay: title ? 0.4 : 0 },
-  });
-
-  return layers;
-}