@bendyline/squisq 2.0.1 → 2.2.0

package/src/doc/templates/fallbackBlock.ts

@@ -1,123 +0,0 @@
-/**
- * Fallback Block Rendering
- *
- * The graceful-degradation guarantee: a block whose template can't render —
- * unknown template name, template function threw, or returned a non-array —
- * still renders its heading and body text as a plain, readable card instead
- * of a blank slide. A small notice line names the problem so authors (and
- * agents reviewing screenshots) can see *why* the block degraded.
- *
- * This is intentionally not a registered template: it can't be requested by
- * name, only reached when a requested template fails. See `materializeBlockLayers()`.
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type { Block } from '../../schemas/Doc.js';
-import type { DocBlock, TemplateContext } from '../../schemas/BlockTemplates.js';
-import { resolveColorScheme, getThemeFont, themedFontSize } from '../utils/themeUtils.js';
-import { extractPlainText } from '../../markdown/utils.js';
-
-/** Cap body text so a long section doesn't overflow the card. */
-const MAX_BODY_CHARS = 600;
-
-/**
- * Render a block's heading + body text as plain layers, with a notice line
- * describing why the requested template didn't render.
- *
- * @param block   The block that failed to render via its template.
- * @param context Template context (theme, viewport).
- * @param notice  Short problem description, e.g. `Unknown template "photGrid"`.
- */
-export function fallbackBlockLayers(
-  block: DocBlock,
-  context: TemplateContext,
-  notice: string,
-): Layer[] {
-  const colors = resolveColorScheme(context, 'blue');
-  const { layout } = context;
-
-  const title = (block as Block).title ?? (block as Block).id ?? '';
-  const body = extractBodyText(block as Block);
-
-  const layers: Layer[] = [
-    {
-      type: 'shape',
-      id: 'fallback-bg',
-      content: { shape: 'rect', fill: colors.bg },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    },
-  ];
-
-  if (title) {
-    layers.push({
-      type: 'text',
-      id: 'fallback-title',
-      content: {
-        text: title,
-        style: {
-          fontSize: themedFontSize(56, context, true),
-          fontFamily: getThemeFont(context, 'title'),
-          fontWeight: 'bold',
-          color: colors.text,
-          textAlign: 'center',
-        },
-      },
-      position: {
-        x: '50%',
-        y: body ? '28%' : '50%',
-        anchor: 'center',
-        width: layout.maxTextWidth,
-      },
-    });
-  }
-
-  if (body) {
-    layers.push({
-      type: 'text',
-      id: 'fallback-body',
-      content: {
-        text: body,
-        style: {
-          fontSize: themedFontSize(28, context),
-          fontFamily: getThemeFont(context, 'body'),
-          color: colors.text,
-          textAlign: 'center',
-        },
-      },
-      position: {
-        x: '50%',
-        y: '55%',
-        anchor: 'center',
-        width: layout.maxTextWidth,
-      },
-    });
-  }
-
-  layers.push({
-    type: 'text',
-    id: 'fallback-notice',
-    content: {
-      text: `⚠ ${notice}`,
-      style: {
-        fontSize: themedFontSize(18, context),
-        fontFamily: getThemeFont(context, 'body'),
-        color: `${colors.text}99`,
-        textAlign: 'center',
-      },
-    },
-    position: { x: '50%', y: '92%', anchor: 'center', width: layout.maxTextWidth },
-  });
-
-  return layers;
-}
-
-/** Plain text of a block's body contents, truncated for card display. */
-function extractBodyText(block: Block): string {
-  if (!block.contents || block.contents.length === 0) return '';
-  const text = block.contents
-    .map((node) => extractPlainText(node))
-    .join('\n')
-    .trim();
-  if (text.length <= MAX_BODY_CHARS) return text;
-  return `${text.slice(0, MAX_BODY_CHARS).trimEnd()}…`;
-}

package/src/doc/templates/featureBlock.ts

@@ -1,209 +0,0 @@
-/**
- * Feature Block Templates — `leftFeature` and `rightFeature`
- *
- * Pairs a "feature" image on one side of the block with a title + body
- * paragraph on the other. The two templates are mirror images, so the
- * actual layer-builder lives here once and the per-side template files
- * just call it with a `side` parameter.
- *
- * Used for editorial layouts like product highlights, profile cards,
- * and section intros where a single image deserves to sit next to a
- * short text block rather than behind it (which is what
- * `imageWithCaption` does).
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type {
-  LeftFeatureInput,
-  RightFeatureInput,
-  TemplateContext,
-} from '../../schemas/BlockTemplates.js';
-import {
-  getThemeFont,
-  themedEntrance,
-  themedFontSize,
-  themedImageTreatment,
-} from '../utils/themeUtils.js';
-
-type FeatureInput = LeftFeatureInput | RightFeatureInput;
-
-/**
- * Build the layer list for either feature template. Layers are in
- * back-to-front order: background, image, then text.
- */
-function buildFeatureLayers(
-  input: FeatureInput,
-  context: TemplateContext,
-  side: 'left' | 'right',
-): Layer[] {
-  const { imageSrc, imageAlt, imageWidth, imageHeight, title, body } = input;
-  const { theme, layout } = context;
-
-  const treatment = themedImageTreatment(context, input.imageTreatment);
-  // Treat the image as "sized" when the host gave us an explicit width
-  // or height — that's our cue that the user resized the image in the
-  // editor and we should respect that as a sizing hint instead of
-  // stretching the image to fill the whole half.
-  const sized = (imageWidth ?? 0) > 0 || (imageHeight ?? 0) > 0;
-  // In portrait the image stacks above the text rather than splitting
-  // horizontally — same flag the twoColumn template uses, so the two
-  // behave consistently on narrow viewports.
-  const stack = layout.stackColumns;
-
-  const titleFontSize = themedFontSize(48, context, true);
-  const bodyFontSize = themedFontSize(24, context, false);
-
-  // Image takes the full left or right half. The text column gets the
-  // opposite half, with a comfortable inset so the text doesn't kiss
-  // the image edge or the card border. All values are percentages of
-  // the block viewport so they scale with the card size.
-  //
-  // When the image is "sized" we shrink it inside its half: the half
-  // still claims the space (so the text column stays the same width
-  // and the layout doesn't shift around when dimensions are toggled)
-  // but the image itself sits centered with padding around it. The
-  // sized box uses a square envelope sized to the smaller dimension of
-  // its half so the image breathes regardless of viewport aspect.
-  let imgX: string;
-  let imgY: string;
-  let imgW: string;
-  let imgH: string;
-  let imageFit: 'cover' | 'contain';
-  if (stack) {
-    imgX = '0';
-    imgY = '0';
-    imgW = '100%';
-    imgH = '50%';
-    imageFit = sized ? 'contain' : 'cover';
-  } else if (sized) {
-    // 90% of the half (with explicit aspect via fit='contain') so the
-    // image keeps its natural proportions and never touches the card
-    // edges. We don't try to honor the literal pixel value — block
-    // viewports are designed in their own coordinate space — but the
-    // *intent* (smaller image, padded, centered) is what comes through.
-    const halfStart = side === 'left' ? 5 : 55; // %
-    imgX = `${halfStart}%`;
-    imgY = '5%';
-    imgW = '40%';
-    imgH = '90%';
-    imageFit = 'contain';
-  } else {
-    imgX = side === 'left' ? '0' : '50%';
-    imgY = '0';
-    imgW = '50%';
-    imgH = '100%';
-    imageFit = 'cover';
-  }
-
-  // Text-column geometry. `textX` is the LEFT edge of the column when
-  // the side is "left" (image left, text right); when the side is
-  // "right" the column occupies the left half, inset from the card edge.
-  // The mirror lives in the layout only — fully right-aligned
-  // (ragged-left) running text on rightFeature was genuinely hard to read.
-  const COLUMN_INSET = 4; // % of block width — padding from card edge / divider
-  const textColumnWidth = stack ? 90 : 42;
-  const textX = stack
-    ? `${(100 - textColumnWidth) / 2}%`
-    : side === 'left'
-      ? `${50 + COLUMN_INSET}%` // text column starts just past the divider
-      : `${COLUMN_INSET + 2}%`; // left edge of the left-half text column
-
-  // Stack the title above the body, with the pair vertically centered
-  // in the text column. The title sits 8% above center; body sits 2%
-  // below — these offsets keep both lines visible at the small card
-  // sizes used by the inline preview gutter without overflowing.
-  const titleY = stack ? '60%' : body ? '42%' : '50%';
-  const bodyY = stack ? '78%' : title ? '55%' : '50%';
-  const textAnchor = 'top-left';
-  const textAlign = 'left' as const;
-
-  // Paint our own background so the text column has a theme-paired
-  // surface to sit on. The host wrapper's surface isn't always theme-
-  // aware (e.g. the InlinePreviewGutter card uses a fixed light SVG
-  // background), and `theme.colors.text` is only guaranteed legible
-  // against `theme.colors.background` — themes like Gezellig pair
-  // cream text with a dark warm-brown background, which would
-  // disappear on a light wrapper. Matching the convention every other
-  // text-bearing template uses (see twoColumn / listBlock).
-  const layers: Layer[] = [
-    {
-      type: 'shape',
-      id: 'feature-bg',
-      content: { shape: 'rect', fill: theme.colors.background },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    },
-  ];
-
-  if (imageSrc) {
-    layers.push({
-      type: 'image',
-      id: 'feature-image',
-      content: {
-        src: imageSrc,
-        alt: imageAlt ?? title ?? '',
-        fit: imageFit,
-        ...(treatment ? { treatment } : {}),
-      },
-      position: { x: imgX, y: imgY, width: imgW, height: imgH },
-    });
-  }
-
-  if (title) {
-    layers.push({
-      type: 'text',
-      id: 'feature-title',
-      content: {
-        text: title,
-        style: {
-          fontSize: titleFontSize,
-          fontFamily: getThemeFont(context, 'title'),
-          fontWeight: 'bold',
-          color: theme.colors.text,
-          textAlign,
-          lineHeight: 1.2,
-        },
-      },
-      position: {
-        x: textX,
-        y: titleY,
-        anchor: textAnchor,
-        width: `${textColumnWidth}%`,
-      },
-      animation: themedEntrance(context, 'text', { type: 'fadeIn', duration: 0.8 }),
-    });
-  }
-
-  if (body) {
-    layers.push({
-      type: 'text',
-      id: 'feature-body',
-      content: {
-        text: body,
-        style: {
-          fontSize: bodyFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          color: theme.colors.textMuted,
-          textAlign,
-          lineHeight: 1.5,
-        },
-      },
-      position: {
-        x: textX,
-        y: bodyY,
-        anchor: textAnchor,
-        width: `${textColumnWidth}%`,
-      },
-      animation: themedEntrance(context, 'text', { type: 'fadeIn', duration: 0.8, delay: 0.2 }),
-    });
-  }
-
-  return layers;
-}
-
-export function leftFeature(input: LeftFeatureInput, context: TemplateContext): Layer[] {
-  return buildFeatureLayers(input, context, 'left');
-}
-
-export function rightFeature(input: RightFeatureInput, context: TemplateContext): Layer[] {
-  return buildFeatureLayers(input, context, 'right');
-}

package/src/doc/templates/fullBleedQuote.ts

@@ -1,83 +0,0 @@
-/**
- * Full Bleed Quote Template
- *
- * Short dramatic text filling the viewport like a movie title card.
- * Designed for punchy text under 60 characters. Uses massive font
- * centered on a dark vignette background.
- *
- * This is shared code used by both site and efb-app doc renderers.
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type { FullBleedQuoteInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import {
-  resolveColorScheme,
-  getTemplateHint,
-  getThemeFont,
-  shouldUseShadow,
-  themedFontSize,
-} from '../utils/themeUtils.js';
-import { oklchDarken } from '../../schemas/colorUtils.js';
-
-/**
- * Hint schema published for the theme validator + future customizer hint UI.
- * Themes may set `templateHints.fullBleedQuote` entries matching these keys.
- */
-export const fullBleedQuoteHintSchema = {
-  /** Entrance style for the quote text. 'subtle' or 'dramatic'. */
-  entrance: {
-    type: 'string' as const,
-    options: ['subtle', 'dramatic'] as const,
-    default: 'subtle',
-  },
-} as const;
-
-export function fullBleedQuote(input: FullBleedQuoteInput, context: TemplateContext): Layer[] {
-  const { text, colorScheme = 'blue' } = input;
-  const colors = resolveColorScheme(context, colorScheme);
-
-  // Massive font for dramatic impact
-  const textFontSize = themedFontSize(120, context, true);
-
-  return [
-    // Background — radial vignette built from the color scheme's own
-    // surface, so the card takes on the scheme (and the theme behind it)
-    // instead of vignetting every theme into hard black.
-    {
-      type: 'shape',
-      id: 'bg',
-      content: {
-        shape: 'rect',
-        fill: `radial-gradient(ellipse at 50% 50%, ${colors.bg} 0%, ${oklchDarken(colors.bg, 0.12)} 100%)`,
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    },
-    // The text — massive, centered
-    {
-      type: 'text',
-      id: 'impact-text',
-      content: {
-        text,
-        style: {
-          fontSize: textFontSize,
-          fontFamily: getThemeFont(context, 'title'),
-          fontWeight: 'bold',
-          color: colors.text,
-          textAlign: 'center',
-          lineHeight: 1.2,
-          shadow: shouldUseShadow(context),
-        },
-      },
-      position: {
-        x: '50%',
-        y: '50%',
-        anchor: 'center',
-        width: '85%',
-      },
-      animation:
-        getTemplateHint<string>(context, 'fullBleedQuote', 'entrance', 'subtle') === 'dramatic'
-          ? { type: 'zoomIn', duration: 0.8 }
-          : { type: 'fadeIn', duration: 1.5 },
-    },
-  ];
-}

package/src/doc/templates/imageWithCaption.ts

@@ -1,186 +0,0 @@
-/**
- * Image With Caption Template
- *
- * Full-screen background image with text overlay.
- * Supports Ken Burns animation effects (zoom, pan).
- * Adapts caption positioning and font sizes for different viewports.
- *
- * This is shared code used by both site and efb-app doc renderers.
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type { ImageWithCaptionInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import {
-  getThemeFont,
-  shouldUseShadow,
-  themedFontSize,
-  themedImageTreatment,
-} from '../utils/themeUtils.js';
-import { withAlpha } from '../../schemas/colorUtils.js';
-import { cleanCaption } from './captionUtils.js';
-import { mapAmbientMotion } from './accentImage.js';
-
-export function imageWithCaption(input: ImageWithCaptionInput, context: TemplateContext): Layer[] {
-  const {
-    imageSrc,
-    imageAlt,
-    caption: rawCaption,
-    captionPosition: _captionPosition = 'bottom',
-    ambientMotion,
-    isTitle,
-    subtitle,
-    imageCredit,
-    imageLicense,
-  } = input;
-  const caption = rawCaption ? cleanCaption(rawCaption) : rawCaption;
-  const { theme, layout } = context;
-
-  const treatment = themedImageTreatment(context, input.imageTreatment);
-
-  // Scale font sizes for viewport
-  const captionFontSize = themedFontSize(30, context, false);
-  const titleFontSize = themedFontSize(96, context, true);
-  const subtitleFontSize = themedFontSize(36, context, false);
-
-  // Determine animation based on ambientMotion setting
-  // Support both new 'ambientMotion' and legacy 'kenBurns' property
-  const legacyKenBurns = (input as unknown as Record<string, unknown>).kenBurns as
-    | string
-    | undefined;
-  const motion: string | undefined = ambientMotion || legacyKenBurns;
-  const imageAnimation = mapAmbientMotion(motion);
-
-  const layers: Layer[] = [
-    // Background image
-    {
-      type: 'image',
-      id: 'bg-image',
-      content: {
-        src: imageSrc,
-        alt: imageAlt,
-        fit: 'cover',
-        credit: imageCredit,
-        license: imageLicense,
-        ...(treatment ? { treatment } : {}),
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-      animation: imageAnimation,
-    },
-  ];
-
-  // Scrim gradients are tinted from the theme background so the theme
-  // text color painted on top stays readable by construction — a fixed
-  // black scrim put dark theme text on a dark band in light themes.
-  const bg = theme.colors.background;
-
-  // TITLE MODE: Large centered title over hero image (like cover slide)
-  if (isTitle && caption) {
-    // Full gradient overlay for title readability (similar to cover slide)
-    layers.push({
-      type: 'shape',
-      id: 'title-gradient',
-      content: {
-        shape: 'rect',
-        fill: `linear-gradient(0deg, ${withAlpha(bg, 0.85)} 0%, ${withAlpha(bg, 0.45)} 40%, ${withAlpha(bg, 0.1)} 70%, ${withAlpha(bg, 0)} 100%)`,
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    });
-
-    // Title text - large and centered in lower portion
-    layers.push({
-      type: 'text',
-      id: 'title',
-      content: {
-        text: caption,
-        style: {
-          fontSize: titleFontSize,
-          fontFamily: getThemeFont(context, 'title'),
-          fontWeight: 'bold',
-          color: theme.colors.text,
-          textAlign: 'center',
-          shadow: shouldUseShadow(context),
-        },
-      },
-      position: {
-        x: '50%',
-        y: subtitle ? '70%' : '75%',
-        anchor: 'center',
-        width: layout.maxTextWidth,
-      },
-      animation: { type: 'fadeIn', duration: 0.8 },
-    });
-
-    // Optional subtitle
-    if (subtitle) {
-      layers.push({
-        type: 'text',
-        id: 'subtitle',
-        content: {
-          text: subtitle,
-          style: {
-            fontSize: subtitleFontSize,
-            fontFamily: getThemeFont(context, 'body'),
-            color: theme.colors.textMuted,
-            textAlign: 'center',
-            lineHeight: 1.5,
-          },
-        },
-        position: {
-          x: '50%',
-          y: '82%',
-          anchor: 'center',
-          width: layout.maxTextWidth,
-        },
-        animation: { type: 'fadeIn', duration: 0.8, delay: 0.2 },
-      });
-    }
-
-    return layers;
-  }
-
-  // STANDARD MODE: Caption at bottom
-  if (caption) {
-    // Compact caption band raised above media controls. Long archival captions
-    // are clamped so they don't sprawl across the image.
-    layers.push({
-      type: 'shape',
-      id: 'caption-gradient',
-      content: {
-        shape: 'rect',
-        fill: `linear-gradient(90deg, ${withAlpha(bg, 0)}, ${withAlpha(bg, 0.78)} 16%, ${withAlpha(bg, 0.78)} 84%, ${withAlpha(bg, 0)})`,
-      },
-      position: {
-        x: 0,
-        y: '68%',
-        width: '100%',
-        height: '16%',
-      },
-    });
-
-    layers.push({
-      type: 'text',
-      id: 'caption',
-      content: {
-        text: caption,
-        style: {
-          fontSize: captionFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          color: theme.colors.text,
-          textAlign: 'center',
-          shadow: shouldUseShadow(context),
-          lineHeight: 1.18,
-          maxLines: 2,
-        },
-      },
-      position: {
-        x: '50%',
-        y: '74%',
-        anchor: 'center',
-        width: '78%',
-      },
-      animation: { type: 'fadeIn', duration: 1.5, delay: 0.5 },
-    });
-  }
-
-  return layers;
-}