@bendyline/squisq 2.0.1 → 2.2.0

package/src/doc/templates/twoColumn.ts

@@ -1,263 +0,0 @@
-/**
- * Two Column Template
- *
- * Side-by-side comparison of two items.
- * Each column has a label and optional sublabel.
- * Adapts font sizes and positioning for different viewports.
- *
- * Portrait mode: Stacks columns vertically (top/bottom) instead of side-by-side.
- *
- * This is shared code used by both site and efb-app doc renderers.
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type { TwoColumnInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import {
-  resolveColorScheme,
-  getThemeFont,
-  themedEntrance,
-  themedFontSize,
-  themedSurfaceGradient,
-} from '../utils/themeUtils.js';
-import { withAlpha } from '../../schemas/colorUtils.js';
-import { getTwoColumnPositions } from '../../schemas/LayoutStrategy.js';
-
-export function twoColumn(input: TwoColumnInput, context: TemplateContext): Layer[] {
-  const { left, right, header, leftColor = 'green', rightColor = 'blue' } = input;
-
-  // Guard: required fields may be absent when generated from sparse markdown
-  if (!left?.label || !right?.label) return [];
-
-  const { theme, layout, orientation } = context;
-  const leftColors = resolveColorScheme(context, leftColor);
-  const rightColors = resolveColorScheme(context, rightColor);
-
-  // Get column positions based on orientation
-  const positions = getTwoColumnPositions(orientation);
-  const isStacked = layout.stackColumns;
-
-  // Column width ~42% for side-by-side, ~85% for stacked
-  const columnWidth = isStacked ? '85%' : '42%';
-
-  // Calculate font sizes based on viewport. The header is the block's
-  // title, so it sits a step ABOVE the column labels in the hierarchy —
-  // it used to render smaller and dimmer than the labels, which read as
-  // an inverted hierarchy.
-  const headerFontSize = themedFontSize(36, context, true);
-  const labelFontSize = themedFontSize(44, context, true);
-  const sublabelFontSize = themedFontSize(22, context, false);
-
-  // Panels drop below the header band so the title never overlaps them.
-  const panelTop = header && !isStacked ? 22 : 15;
-  const panelHeight = header && !isStacked ? 64 : 70;
-
-  const layers: Layer[] = [
-    // Background — subtle gradient to add depth
-    {
-      type: 'shape',
-      id: 'bg',
-      content: {
-        shape: 'rect',
-        fill: themedSurfaceGradient(context, 135),
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    },
-  ];
-
-  if (!isStacked) {
-    // Column background panels — tinted from the theme text color so
-    // they stay visible on light and dark surfaces alike.
-    const panelFill = withAlpha(theme.colors.text, 0.05);
-    layers.push({
-      type: 'shape',
-      id: 'left-panel',
-      content: {
-        shape: 'rect',
-        fill: panelFill,
-        borderRadius: 12,
-      },
-      position: { x: '3%', y: `${panelTop}%`, width: '44%', height: `${panelHeight}%` },
-    });
-
-    layers.push({
-      type: 'shape',
-      id: 'right-panel',
-      content: {
-        shape: 'rect',
-        fill: panelFill,
-        borderRadius: 12,
-      },
-      position: { x: '53%', y: `${panelTop}%`, width: '44%', height: `${panelHeight}%` },
-    });
-  }
-
-  // Header position adjusts based on layout — always clear of the panels.
-  const headerY = isStacked ? '8%' : '12%';
-
-  // Add header if provided
-  if (header) {
-    layers.push({
-      type: 'text',
-      id: 'header',
-      content: {
-        text: header,
-        style: {
-          fontSize: headerFontSize,
-          fontFamily: getThemeFont(context, 'title'),
-          fontWeight: 'bold',
-          color: theme.colors.text,
-          textAlign: 'center',
-        },
-      },
-      position: { x: '50%', y: headerY, anchor: 'center' },
-      animation: themedEntrance(context, 'text', { type: 'fadeIn', duration: 0.8 }),
-    });
-  }
-
-  // Calculate Y positions based on layout mode and header presence
-  let leftY: string;
-  let leftSublabelY: string;
-  let rightY: string;
-  let rightSublabelY: string;
-
-  if (isStacked) {
-    // Portrait: stacked vertically
-    leftY = header ? '30%' : '25%';
-    leftSublabelY = header ? '40%' : '35%';
-    rightY = header ? '60%' : '55%';
-    rightSublabelY = header ? '70%' : '65%';
-  } else {
-    // Landscape/square: side by side — vertically centered in the panels.
-    const panelCenter = panelTop + panelHeight / 2;
-    leftY = `${panelCenter - 4}%`;
-    leftSublabelY = `${panelCenter + 7}%`;
-    rightY = `${panelCenter - 4}%`;
-    rightSublabelY = `${panelCenter + 7}%`;
-  }
-
-  // Left column (or top in portrait)
-  layers.push({
-    type: 'text',
-    id: 'left-label',
-    content: {
-      text: left.label,
-      style: {
-        fontSize: labelFontSize,
-        fontFamily: getThemeFont(context, 'body'),
-        fontWeight: 'bold',
-        color: leftColors.text,
-        textAlign: 'center',
-        lineHeight: 1.3,
-      },
-    },
-    position: {
-      x: positions.left.x,
-      y: leftY,
-      anchor: 'center',
-      width: columnWidth,
-    },
-    animation: themedEntrance(context, 'text', { type: 'fadeIn', duration: 1 }),
-  });
-
-  if (left.sublabel) {
-    layers.push({
-      type: 'text',
-      id: 'left-sublabel',
-      content: {
-        text: left.sublabel,
-        style: {
-          fontSize: sublabelFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          color: theme.colors.textMuted,
-          textAlign: 'center',
-          lineHeight: 1.4,
-        },
-      },
-      position: {
-        x: positions.left.x,
-        y: leftSublabelY,
-        anchor: 'center',
-        width: columnWidth,
-      },
-      animation: { type: 'fadeIn', duration: 0.8, delay: 0.3 },
-    });
-  }
-
-  // Visual connector between columns — sized to fit inside the gutter
-  // between the panels (a 120px glyph used to cross both panel edges),
-  // tinted from the theme text color so it shows on any surface.
-  const connectorFontSize = themedFontSize(64, context, true);
-  const connectorY = isStacked ? '48%' : `${panelTop + panelHeight / 2}%`;
-  const connectorSymbol = isStacked ? '\u2193' : '\u2192'; // ↓ for stacked, → for side-by-side
-
-  layers.push({
-    type: 'text',
-    id: 'connector',
-    content: {
-      text: connectorSymbol,
-      style: {
-        fontSize: connectorFontSize,
-        fontFamily: getThemeFont(context, 'title'),
-        fontWeight: 'bold',
-        color: withAlpha(theme.colors.text, 0.45),
-        textAlign: 'center',
-      },
-    },
-    position: {
-      x: '50%',
-      y: connectorY,
-      anchor: 'center',
-    },
-    animation: { type: 'fadeIn', duration: 0.6, delay: 0.4 },
-  });
-
-  // Right column (or bottom in portrait)
-  layers.push({
-    type: 'text',
-    id: 'right-label',
-    content: {
-      text: right.label,
-      style: {
-        fontSize: labelFontSize,
-        fontFamily: getThemeFont(context, 'body'),
-        fontWeight: 'bold',
-        color: rightColors.text,
-        textAlign: 'center',
-        lineHeight: 1.3,
-      },
-    },
-    position: {
-      x: positions.right.x,
-      y: rightY,
-      anchor: 'center',
-      width: columnWidth,
-    },
-    animation: themedEntrance(context, 'text', { type: 'fadeIn', duration: 1, delay: 0.5 }),
-  });
-
-  if (right.sublabel) {
-    layers.push({
-      type: 'text',
-      id: 'right-sublabel',
-      content: {
-        text: right.sublabel,
-        style: {
-          fontSize: sublabelFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          color: theme.colors.textMuted,
-          textAlign: 'center',
-          lineHeight: 1.4,
-        },
-      },
-      position: {
-        x: positions.right.x,
-        y: rightSublabelY,
-        anchor: 'center',
-        width: columnWidth,
-      },
-      animation: { type: 'fadeIn', duration: 0.8, delay: 0.8 },
-    });
-  }
-
-  return layers;
-}

package/src/doc/templates/videoPullQuote.ts

@@ -1,142 +0,0 @@
-/**
- * Video Pull Quote Template
- *
- * Quote text over a video clip background with dark overlay.
- * Cinematic alternative to pullQuote when a video clip is available.
- * Combines the visual dynamism of live video with the text focus of quoteBlock.
- *
- * The video plays muted — narration audio is the only sound track.
- *
- * This is shared code used by both site and efb-app doc renderers.
- *
- * Related Files:
- * - shared/story/templates/pullQuote.ts — image-based equivalent
- * - schemas/StoryScript.ts — VideoLayer type
- * - site/src/components/story/layers/VideoLayer.tsx — rendering component
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type { VideoPullQuoteInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import { getThemeFont, themedEntrance, themedFontSize } from '../utils/themeUtils.js';
-import { estimateTextHeight } from './captionUtils.js';
-
-export function videoPullQuote(input: VideoPullQuoteInput, context: TemplateContext): Layer[] {
-  const { text, attribution, backgroundVideo } = input;
-  const { viewport } = context;
-
-  // Guard: backgroundVideo is required
-  if (!backgroundVideo?.src) return [];
-
-  const quoteFontSize = themedFontSize(52, context, true);
-  const attrFontSize = themedFontSize(26, context, false);
-  const decoFontSize = themedFontSize(200, context, true);
-  const quoteLineHeight = 1.4;
-  const quoteYPct = attribution ? 45 : 50;
-
-  const layers: Layer[] = [
-    // Full-bleed background video clip
-    {
-      type: 'video',
-      id: 'bg-video',
-      content: {
-        src: backgroundVideo.src,
-        posterSrc: backgroundVideo.posterSrc,
-        alt: backgroundVideo.alt,
-        fit: 'cover',
-        clipStart: backgroundVideo.clipStart,
-        clipEnd: backgroundVideo.clipEnd,
-        credit: backgroundVideo.credit,
-        license: backgroundVideo.license,
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    },
-
-    // Dark overlay for text readability
-    {
-      type: 'shape',
-      id: 'overlay',
-      content: {
-        shape: 'rect',
-        fill: 'rgba(0, 0, 0, 0.55)',
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    },
-
-    // Decorative quotation mark
-    {
-      type: 'text',
-      id: 'deco-quote',
-      content: {
-        text: '\u201C',
-        style: {
-          fontSize: decoFontSize,
-          fontFamily: getThemeFont(context, 'title'),
-          color: 'rgba(255, 255, 255, 0.08)',
-          textAlign: 'center',
-        },
-      },
-      position: {
-        x: '50%',
-        y: '20%',
-        anchor: 'center',
-      },
-    },
-
-    // Quote text
-    {
-      type: 'text',
-      id: 'quote-text',
-      content: {
-        text,
-        style: {
-          fontSize: quoteFontSize,
-          fontFamily: getThemeFont(context, 'title'),
-          color: '#ffffff',
-          textAlign: 'center',
-          lineHeight: quoteLineHeight,
-          shadow: true,
-        },
-      },
-      position: {
-        x: '50%',
-        y: `${quoteYPct}%`,
-        anchor: 'center',
-        width: '72%',
-      },
-      animation: themedEntrance(context, 'text', { type: 'fadeIn', duration: 2 }),
-    },
-  ];
-
-  // Attribution \u2014 hangs just below the quote's estimated bottom edge so
-  // the two read as one lockup instead of stranding near the bottom.
-  if (attribution) {
-    const quoteWidthPx = 0.72 * viewport.width;
-    const quoteHeightPx = estimateTextHeight(text, quoteFontSize, quoteWidthPx, quoteLineHeight);
-    const attrYPct = Math.min(
-      82,
-      quoteYPct + ((quoteHeightPx / 2 + quoteFontSize * 1.7) / viewport.height) * 100,
-    );
-    layers.push({
-      type: 'text',
-      id: 'attribution',
-      content: {
-        text: `\u2014 ${attribution}`,
-        style: {
-          fontSize: attrFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          color: 'rgba(255, 255, 255, 0.85)',
-          textAlign: 'center',
-          shadow: true,
-        },
-      },
-      position: {
-        x: '50%',
-        y: `${attrYPct}%`,
-        anchor: 'center',
-      },
-      animation: { type: 'fadeIn', duration: 1, delay: 1.5 },
-    });
-  }
-
-  return layers;
-}

package/src/doc/templates/videoWithCaption.ts

@@ -1,135 +0,0 @@
-/**
- * Video With Caption Template
- *
- * Full-screen background video clip with text overlay. Mirrors the structure of
- * imageWithCaption but uses a VideoLayer instead of an ImageLayer. The video
- * plays muted — narration audio is the only sound track.
- *
- * Adapts caption positioning and font sizes for different viewports.
- *
- * This is shared code used by both site and efb-app doc renderers.
- *
- * Related Files:
- * - shared/story/templates/imageWithCaption.ts — image equivalent
- * - schemas/StoryScript.ts — VideoLayer type
- * - site/src/components/story/layers/VideoLayer.tsx — rendering component
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type { VideoWithCaptionInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import { getThemeFont, shouldUseShadow, themedFontSize } from '../utils/themeUtils.js';
-import { withAlpha } from '../../schemas/colorUtils.js';
-import { cleanCaption } from './captionUtils.js';
-
-export function videoWithCaption(input: VideoWithCaptionInput, context: TemplateContext): Layer[] {
-  const {
-    videoSrc,
-    posterSrc,
-    videoAlt,
-    clipStart,
-    clipEnd,
-    sourceDuration,
-    caption: rawCaption,
-    captionPosition = 'bottom',
-    videoCredit,
-    videoLicense,
-  } = input;
-  const caption = rawCaption ? cleanCaption(rawCaption) : rawCaption;
-  const { theme } = context;
-
-  const captionFontSize = themedFontSize(30, context, false);
-  const creditFontSize = themedFontSize(16, context, false);
-
-  const layers: Layer[] = [
-    // Background video clip
-    {
-      type: 'video',
-      id: 'bg-video',
-      content: {
-        src: videoSrc,
-        posterSrc,
-        alt: videoAlt,
-        fit: 'cover',
-        clipStart,
-        clipEnd,
-        sourceDuration,
-        credit: videoCredit,
-        license: videoLicense,
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    },
-  ];
-
-  // Caption text with a compact translucent band. Long archival captions are
-  // clamped so they don't collide with player controls or cover the frame.
-  if (caption) {
-    const bg = theme.colors.background;
-    const captionBgY =
-      captionPosition === 'top' ? '7%' : captionPosition === 'center' ? '42%' : '68%';
-    const captionY =
-      captionPosition === 'top' ? '13%' : captionPosition === 'center' ? '48%' : '74%';
-
-    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: captionBgY,
-        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: captionY,
-        anchor: 'center',
-        width: '78%',
-      },
-      animation: { type: 'fadeIn', duration: 1.5, delay: 0.5 },
-    });
-  }
-
-  // Small credit text in bottom-right corner
-  if (videoCredit) {
-    layers.push({
-      type: 'text',
-      id: 'credit',
-      content: {
-        text: videoCredit,
-        style: {
-          fontSize: creditFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          color: withAlpha(theme.colors.text, 0.65),
-          textAlign: 'right',
-        },
-      },
-      position: {
-        x: '96%',
-        y: '96%',
-        anchor: 'bottom-right',
-      },
-    });
-  }
-
-  return layers;
-}

package/src/doc/treeview/chars.ts

@@ -1,72 +0,0 @@
-/**
- * Character classification + render vocabularies for ASCII tree art.
- *
- * The parser accepts a superset (Unicode light/heavy/rounded branches plus
- * ASCII `|-- ` / `` `-- `` / `+-- `); the renderer emits one `TreeVocab`.
- * Internal to the treeview module.
- */
-
-/** Vertical rail glyphs (an ancestor line continuing downward). */
-const RAIL_CHARS = new Set(['│', '┃', '╎', '╏', '║', '|']);
-/** Branch-tee glyphs (a node that has a following sibling). */
-const BRANCH_TEE = new Set(['├', '┣', '┠', '┝', '╠', '╞']);
-/** Branch-elbow glyphs (the last child). */
-const BRANCH_ELBOW = new Set(['└', '┗', '╰', '╚', '╘']);
-/** Horizontal dash glyphs used in a branch arm. */
-const DASH_CHARS = new Set(['─', '━', '═', '-']);
-
-export function isRailChar(ch: string): boolean {
-  return RAIL_CHARS.has(ch);
-}
-export function isBranchTee(ch: string): boolean {
-  return BRANCH_TEE.has(ch);
-}
-export function isBranchElbow(ch: string): boolean {
-  return BRANCH_ELBOW.has(ch);
-}
-export function isUnicodeBranch(ch: string): boolean {
-  return BRANCH_TEE.has(ch) || BRANCH_ELBOW.has(ch);
-}
-export function isDashChar(ch: string): boolean {
-  return DASH_CHARS.has(ch);
-}
-
-/** Structural glyphs used for the style vote. */
-export function isUnicodeTreeChar(ch: string): boolean {
-  return (
-    BRANCH_TEE.has(ch) ||
-    BRANCH_ELBOW.has(ch) ||
-    ch === '│' ||
-    ch === '┃' ||
-    ch === '─' ||
-    ch === '━'
-  );
-}
-export function isAsciiTreeChar(ch: string): boolean {
-  return ch === '|' || ch === '`' || ch === '+' || ch === '-';
-}
-
-export interface TreeVocab {
-  /** Branch to a node that has a later sibling (`├── `). */
-  tee: string;
-  /** Branch to the last child (`└── `). */
-  elbow: string;
-  /** Ancestor rail column (`│   `). */
-  rail: string;
-  /** Ended-ancestor gap column (`    `). */
-  gap: string;
-}
-
-export const UNICODE_TREE_VOCAB: TreeVocab = {
-  tee: '├── ',
-  elbow: '└── ',
-  rail: '│   ',
-  gap: '    ',
-};
-
-export const ASCII_TREE_VOCAB: TreeVocab = {
-  tee: '|-- ',
-  elbow: '`-- ',
-  rail: '|   ',
-  gap: '    ',
-};