@bendyline/squisq 2.1.0 → 2.3.0

package/src/doc/utils/animationUtils.ts

@@ -1,399 +0,0 @@
-/**
- * Animation Utilities
- *
- * Helper functions for mapping Doc animations to CSS classes and styles.
- * Generates the appropriate animation class names and CSS custom properties
- * for duration, delay, and easing.
- *
- * This is shared code used by both site and efb-app doc renderers.
- */
-
-import type {
-  Animation,
-  AnimationType,
-  TransitionDirection,
-  TransitionType,
-} from '../../schemas/Doc.js';
-
-interface AnimationResult {
-  /** CSS class name to apply */
-  className: string;
-  /** Inline styles for CSS custom properties */
-  style: Record<string, string>;
-}
-
-/**
- * Get CSS class and styles for an animation.
- */
-export function getAnimationStyle(
-  animation: Animation | undefined,
-  _currentTime: number = 0,
-): AnimationResult {
-  if (!animation || animation.type === 'none') {
-    return { className: '', style: {} };
-  }
-
-  const className = getAnimationClassName(animation);
-  const style = getAnimationCSSVars(animation);
-
-  return { className, style };
-}
-
-/**
- * Map animation type to CSS class name.
- */
-function getAnimationClassName(animation: Animation): string {
-  const { type, direction, panDirection } = animation;
-
-  switch (type) {
-    case 'fadeIn':
-      return 'anim-fadeIn';
-    case 'fadeOut':
-      return 'anim-fadeOut';
-    case 'slowZoom':
-      // Slow zoom (Ken Burns style) has variants based on direction and pan
-      if (panDirection === 'left') return 'anim-slowZoom-panLeft';
-      if (panDirection === 'right') return 'anim-slowZoom-panRight';
-      if (direction === 'out') return 'anim-slowZoom-out';
-      return 'anim-slowZoom-in';
-    case 'zoomIn':
-      return 'anim-zoomIn';
-    case 'zoomOut':
-      return 'anim-zoomOut';
-    case 'panLeft':
-      return 'anim-panLeft';
-    case 'panRight':
-      return 'anim-panRight';
-    case 'typewriter':
-      return 'anim-typewriter';
-    default:
-      return '';
-  }
-}
-
-/**
- * Generate CSS custom properties for animation timing.
- */
-function getAnimationCSSVars(animation: Animation): Record<string, string> {
-  const vars: Record<string, string> = {};
-
-  if (animation.duration !== undefined) {
-    vars['--anim-duration'] = `${animation.duration}s`;
-  }
-
-  if (animation.delay !== undefined) {
-    vars['--anim-delay'] = `${animation.delay}s`;
-  }
-
-  if (animation.easing) {
-    vars['--anim-easing'] = animation.easing;
-  }
-
-  return vars;
-}
-
-/**
- * Get default duration for an animation type.
- */
-export function getDefaultAnimationDuration(type: AnimationType): number {
-  switch (type) {
-    case 'slowZoom':
-    case 'panLeft':
-    case 'panRight':
-      return 8; // Long, slow animations
-    case 'typewriter':
-      return 3;
-    case 'fadeIn':
-    case 'fadeOut':
-      return 1;
-    case 'zoomIn':
-    case 'zoomOut':
-      return 0.5;
-    default:
-      return 1;
-  }
-}
-
-/**
- * Get transition class for slide entry/exit.
- */
-export function getTransitionClass(
-  type: TransitionType,
-  entering: boolean,
-  direction?: TransitionDirection,
-): string {
-  if (type === 'cut') return '';
-  const mode = entering ? 'enter' : 'exit';
-  return `transition-${getTransitionVisualClass(type, direction)}-${mode}`;
-}
-
-type TransitionVisualClass =
-  | 'cut'
-  | 'fade'
-  | 'dissolve'
-  | 'pushLeft'
-  | 'pushRight'
-  | 'pushUp'
-  | 'pushDown'
-  | 'wipeLeft'
-  | 'wipeRight'
-  | 'wipeUp'
-  | 'wipeDown'
-  | 'splitHorizontal'
-  | 'splitVertical'
-  | 'revealLeft'
-  | 'revealRight'
-  | 'revealUp'
-  | 'revealDown'
-  | 'random'
-  | 'randomBarsHorizontal'
-  | 'randomBarsVertical'
-  | 'shapeCircle'
-  | 'shapeDiamond'
-  | 'shapePlus'
-  | 'uncoverLeft'
-  | 'uncoverRight'
-  | 'uncoverUp'
-  | 'uncoverDown'
-  | 'coverLeft'
-  | 'coverRight'
-  | 'coverUp'
-  | 'coverDown'
-  | 'zoom'
-  | 'panLeft'
-  | 'panRight'
-  | 'panUp'
-  | 'panDown'
-  | 'flash'
-  | 'newsflash'
-  | 'fallOver'
-  | 'drape'
-  | 'curtains'
-  | 'wind'
-  | 'prestige'
-  | 'fracture'
-  | 'crush'
-  | 'peelOff'
-  | 'pageCurl'
-  | 'pageCurlDouble'
-  | 'pageCurlSingle'
-  | 'airplane'
-  | 'origami'
-  | 'checkerboard'
-  | 'blindsHorizontal'
-  | 'blindsVertical'
-  | 'clock'
-  | 'ripple'
-  | 'honeycomb'
-  | 'glitter'
-  | 'vortex'
-  | 'shred'
-  | 'switch'
-  | 'flip'
-  | 'gallery'
-  | 'cube'
-  | 'doors'
-  | 'box'
-  | 'ferrisWheel'
-  | 'conveyor'
-  | 'rotate'
-  | 'window'
-  | 'orbit'
-  | 'flyThrough'
-  | 'morph'
-  | 'combHorizontal'
-  | 'combVertical'
-  | 'pullLeft'
-  | 'pullRight'
-  | 'pullUp'
-  | 'pullDown'
-  | 'stripsLeft'
-  | 'stripsRight'
-  | 'stripsUp'
-  | 'stripsDown'
-  | 'wedge'
-  | 'wheel'
-  | 'wheelReverse'
-  | 'prism'
-  | 'warp'
-  | 'slideLeft'
-  | 'slideRight'
-  | 'slideUp'
-  | 'slideDown';
-
-const TRANSITION_VISUAL_CLASS_BY_TYPE: Record<TransitionType, TransitionVisualClass> = {
-  airplane: 'airplane',
-  blinds: 'blindsHorizontal',
-  box: 'box',
-  checker: 'checkerboard',
-  checkerboard: 'checkerboard',
-  circle: 'shapeCircle',
-  clock: 'clock',
-  comb: 'combHorizontal',
-  conveyor: 'conveyor',
-  cover: 'coverLeft',
-  crush: 'crush',
-  cube: 'cube',
-  curtains: 'curtains',
-  cut: 'cut',
-  diamond: 'shapeDiamond',
-  dissolve: 'dissolve',
-  doors: 'doors',
-  drape: 'drape',
-  fade: 'fade',
-  fallOver: 'fallOver',
-  ferris: 'ferrisWheel',
-  ferrisWheel: 'ferrisWheel',
-  flash: 'flash',
-  flip: 'flip',
-  flyThrough: 'flyThrough',
-  flythrough: 'flyThrough',
-  fracture: 'fracture',
-  gallery: 'gallery',
-  glitter: 'glitter',
-  honeycomb: 'honeycomb',
-  morph: 'morph',
-  newsflash: 'newsflash',
-  orbit: 'orbit',
-  origami: 'origami',
-  pageCurl: 'pageCurl',
-  pageCurlDouble: 'pageCurlDouble',
-  pageCurlSingle: 'pageCurlSingle',
-  pan: 'panLeft',
-  peelOff: 'peelOff',
-  plus: 'shapePlus',
-  prestige: 'prestige',
-  prism: 'prism',
-  pull: 'pullLeft',
-  push: 'pushLeft',
-  random: 'random',
-  randomBar: 'randomBarsHorizontal',
-  randomBars: 'randomBarsVertical',
-  reveal: 'revealLeft',
-  ripple: 'ripple',
-  rotate: 'rotate',
-  shape: 'shapeCircle',
-  shred: 'shred',
-  slideDown: 'slideDown',
-  slideLeft: 'slideLeft',
-  slideRight: 'slideRight',
-  slideUp: 'slideUp',
-  split: 'splitHorizontal',
-  strips: 'stripsLeft',
-  switch: 'switch',
-  uncover: 'uncoverLeft',
-  vortex: 'vortex',
-  warp: 'warp',
-  wedge: 'wedge',
-  wheel: 'wheel',
-  wheelReverse: 'wheelReverse',
-  wind: 'wind',
-  window: 'window',
-  wipe: 'wipeLeft',
-  zoom: 'zoom',
-};
-
-function getTransitionVisualClass(
-  type: TransitionType,
-  direction?: TransitionDirection,
-): TransitionVisualClass {
-  switch (type) {
-    case 'randomBars':
-    case 'randomBar':
-      return axisClass('randomBars', direction, type === 'randomBar' ? 'Horizontal' : 'Vertical');
-    case 'comb':
-      return axisClass('comb', direction, 'Horizontal');
-    case 'blinds':
-      return axisClass('blinds', direction, 'Horizontal');
-    case 'split':
-      return axisClass('split', direction, 'Horizontal');
-    case 'push':
-      return directionalClass('push', direction, 'Left');
-    case 'wipe':
-      return directionalClass('wipe', direction, 'Left');
-    case 'cover':
-      return directionalClass('cover', direction, 'Left');
-    case 'uncover':
-      return directionalClass('uncover', direction, 'Left');
-    case 'pull':
-      return directionalClass('pull', direction, 'Left');
-    case 'reveal':
-      return directionalClass('reveal', direction, 'Left');
-    case 'strips':
-      return directionalClass('strips', direction, 'Left');
-    case 'pan':
-      return directionalClass('pan', direction, 'Left');
-    default:
-      return TRANSITION_VISUAL_CLASS_BY_TYPE[type];
-  }
-}
-
-function directionalClass(
-  prefix: 'cover' | 'pan' | 'pull' | 'push' | 'reveal' | 'strips' | 'uncover' | 'wipe',
-  direction: TransitionDirection | undefined,
-  fallback: 'Left' | 'Right' | 'Up' | 'Down',
-): TransitionVisualClass {
-  const suffix = directionSuffix(direction, fallback);
-  return `${prefix}${suffix}` as TransitionVisualClass;
-}
-
-function axisClass(
-  prefix: 'blinds' | 'comb' | 'randomBars' | 'split',
-  direction: TransitionDirection | undefined,
-  fallback: 'Horizontal' | 'Vertical',
-): TransitionVisualClass {
-  const suffix = axisSuffix(direction, fallback);
-  return `${prefix}${suffix}` as TransitionVisualClass;
-}
-
-function directionSuffix(
-  direction: TransitionDirection | undefined,
-  fallback: 'Left' | 'Right' | 'Up' | 'Down',
-): 'Left' | 'Right' | 'Up' | 'Down' {
-  switch (direction) {
-    case 'right':
-      return 'Right';
-    case 'up':
-      return 'Up';
-    case 'down':
-      return 'Down';
-    case 'left':
-    default:
-      return fallback;
-  }
-}
-
-function axisSuffix(
-  direction: TransitionDirection | undefined,
-  fallback: 'Horizontal' | 'Vertical',
-): 'Horizontal' | 'Vertical' {
-  switch (direction) {
-    case 'vertical':
-    case 'up':
-    case 'down':
-      return 'Vertical';
-    case 'horizontal':
-    case 'left':
-    case 'right':
-      return 'Horizontal';
-    default:
-      return fallback;
-  }
-}
-
-/**
- * Calculate animation progress (0-1) based on current time.
- */
-export function getAnimationProgress(
-  animation: Animation,
-  currentTime: number,
-  slideDuration: number,
-): number {
-  const delay = animation.delay || 0;
-  const duration = animation.duration || slideDuration;
-
-  if (currentTime < delay) return 0;
-  if (currentTime >= delay + duration) return 1;
-
-  return (currentTime - delay) / duration;
-}

package/src/doc/utils/applyRenderStyle.ts

@@ -1,106 +0,0 @@
-/**
- * Render-style post-pass — applies a theme's mechanical motion defaults to
- * template-generated layers.
- *
- * This is the intent-free half of theme motion (see `themedEntrance` in
- * [themeUtils.ts](./themeUtils.ts) for the intent-bearing half): it never
- * decides *what kind* of entrance a layer gets, only
- *
- *  1. scales existing animation durations/delays by the theme's
- *     `style.animationSpeed` multiplier (1.4 = calmer/slower, 0.7 = snappier,
- *     1.0 = no-op), and
- *  2. gives full-bleed cover imagery with no authored animation a gentle,
- *     deterministic Ken Burns when the theme opts into ambient motion.
- *
- * Applied ONLY to template-generated layers — raw authored `block.layers`
- * are never touched, and an explicit `animation` (including
- * `{ type: 'none' }`) always wins.
- */
-
-import type { Layer, Animation } from '../../schemas/Doc.js';
-import type { Theme } from '../../schemas/Theme.js';
-import { SeededRandom, hashString } from '../../random/index.js';
-
-/** The gentle Ken Burns variants ambient motion rotates between. */
-const AMBIENT_VARIANTS: readonly Animation[] = [
-  { type: 'slowZoom', direction: 'in' },
-  { type: 'slowZoom', direction: 'out' },
-  { type: 'slowZoom', panDirection: 'left' },
-  { type: 'slowZoom', panDirection: 'right' },
-];
-
-/** Minimum ambient Ken Burns duration — short blocks shouldn't rush the pan. */
-const MIN_AMBIENT_DURATION_SECONDS = 8;
-
-function isZeroish(v: number | string | undefined): boolean {
-  return v === 0 || v === '0' || v === '0%';
-}
-
-/**
- * Full-bleed cover imagery is the only shape we can safely blanket-animate:
- * anything smaller (strips, insets, grid cells) was placed deliberately and
- * a zoom would fight the composition.
- */
-function isFullBleedCoverMedia(layer: Layer): boolean {
-  if (layer.type !== 'image' && layer.type !== 'video') return false;
-  const { position } = layer;
-  if (!isZeroish(position.x) || !isZeroish(position.y)) return false;
-  if (position.width !== '100%' || position.height !== '100%') return false;
-  const fit = (layer.content as { fit?: string }).fit;
-  return fit === undefined || fit === 'cover';
-}
-
-/** Whether the theme asks for ambient Ken Burns on otherwise-static imagery. */
-export function themeWantsAmbientMotion(theme: Theme): boolean {
-  return theme.renderStyle.ambientMotion === true;
-}
-
-/**
- * Apply the theme's mechanical motion defaults to a block's
- * template-generated layers. Pure: returns new layer objects where a change
- * applies and the original objects where none does.
- *
- * @param layers Template-generated layers (never raw authored layers)
- * @param block  The source block — supplies the ambient-motion seed and duration
- * @param theme  Resolved theme
- */
-export function applyRenderStyleToLayers(
-  layers: Layer[],
-  block: { id: string; duration?: number },
-  theme: Theme,
-): Layer[] {
-  const speed = theme.style.animationSpeed ?? 1.0;
-  const ambient = themeWantsAmbientMotion(theme);
-  if (speed === 1.0 && !ambient) return layers;
-
-  return layers.map((layer) => {
-    let animation = layer.animation;
-
-    // Ambient Ken Burns for full-bleed cover imagery with no authored
-    // animation. Deterministic per block+layer so re-renders, export
-    // frames, and screenshots always agree.
-    if (!animation && ambient && isFullBleedCoverMedia(layer)) {
-      const rng = new SeededRandom(hashString(`${block.id}:${layer.id}`));
-      const variant = rng.pickRequired(AMBIENT_VARIANTS as Animation[]);
-      animation = {
-        ...variant,
-        duration: Math.max(MIN_AMBIENT_DURATION_SECONDS, block.duration ?? 0),
-      };
-    }
-
-    if (!animation || animation.type === 'none') {
-      return animation === layer.animation ? layer : { ...layer, animation };
-    }
-
-    // Speed scaling — single site so templates never double-scale.
-    if (speed !== 1.0) {
-      animation = {
-        ...animation,
-        ...(animation.duration != null ? { duration: animation.duration * speed } : {}),
-        ...(animation.delay != null ? { delay: animation.delay * speed } : {}),
-      };
-    }
-
-    return animation === layer.animation ? layer : { ...layer, animation };
-  });
-}

package/src/doc/utils/diagramText.ts

@@ -1,78 +0,0 @@
-/** Text fitting shared by the live diagram canvas and template renderer. */
-
-export const DIAGRAM_LABEL_LINE_HEIGHT = 1.25;
-export const DIAGRAM_LABEL_HORIZONTAL_PADDING = 24;
-export const DIAGRAM_LABEL_VERTICAL_PADDING = 16;
-export const DIAGRAM_LABEL_MIN_FONT_SIZE = 10;
-
-export interface DiagramLabelFit {
-  fontSize: number;
-  lineCount: number;
-  /** Upward shift that centers the full line group around the node midpoint. */
-  firstLineOffset: number;
-  textWidth: number;
-}
-
-/**
- * Fit a plain diagram label inside a node card using the same character-width
- * estimate and word wrapping as React's `TextLayer`.
- */
-export function fitDiagramLabel(
-  text: string,
-  boxWidth: number,
-  boxHeight: number,
-  preferredFontSize: number,
-): DiagramLabelFit {
-  const textWidth = Math.max(1, boxWidth - DIAGRAM_LABEL_HORIZONTAL_PADDING);
-  const textHeight = Math.max(1, boxHeight - DIAGRAM_LABEL_VERTICAL_PADDING);
-  const preferred = Math.max(DIAGRAM_LABEL_MIN_FONT_SIZE, Math.floor(preferredFontSize));
-
-  let fontSize = preferred;
-  let lineCount = countWrappedLines(text, fontSize, textWidth);
-  while (
-    fontSize > DIAGRAM_LABEL_MIN_FONT_SIZE &&
-    lineCount * fontSize * DIAGRAM_LABEL_LINE_HEIGHT > textHeight
-  ) {
-    fontSize--;
-    lineCount = countWrappedLines(text, fontSize, textWidth);
-  }
-
-  return {
-    fontSize,
-    lineCount,
-    firstLineOffset:
-      lineCount === 1 ? 0 : -((lineCount - 1) * fontSize * DIAGRAM_LABEL_LINE_HEIGHT) / 2,
-    textWidth,
-  };
-}
-
-function countWrappedLines(text: string, fontSize: number, maxWidth: number): number {
-  return text
-    .split('\n')
-    .reduce((count, line) => count + wrappedLineCount(line, fontSize, maxWidth), 0);
-}
-
-function wrappedLineCount(text: string, fontSize: number, maxWidth: number): number {
-  if (!text.trim()) return 1;
-  const charsPerLine = Math.floor(maxWidth / (fontSize * 0.5));
-  if (charsPerLine <= 0) return 1;
-
-  let lines = 0;
-  let currentLength = 0;
-  for (const word of text.split(/\s+/)) {
-    const testLength = currentLength > 0 ? currentLength + 1 + word.length : word.length;
-    if (testLength <= charsPerLine) {
-      currentLength = testLength;
-      continue;
-    }
-    if (currentLength > 0) lines++;
-    if (word.length > charsPerLine) {
-      lines += Math.floor((word.length - 1) / charsPerLine);
-      currentLength = word.length % charsPerLine || charsPerLine;
-    } else {
-      currentLength = word.length;
-    }
-  }
-  if (currentLength > 0) lines++;
-  return Math.max(1, lines);
-}

package/src/doc/utils/imageTreatment.ts

@@ -1,70 +0,0 @@
-/**
- * Image treatment → CSS filter derivation.
- *
- * Treatments are theme-level photographic grades (see `ImageTreatment` in
- * [Doc.ts](../../schemas/Doc.ts)). They compile to plain CSS `filter`
- * functions so the same string works on a foreignObject `<img>`, an SVG
- * `<image>` element, and in headless frame capture — no SVG filter defs to
- * coordinate, no renderer-specific code paths.
- */
-
-import type { ImageTreatment } from '../../schemas/Doc.js';
-import { hexHueDegrees } from '../../schemas/colorUtils.js';
-
-/** Sepia's intrinsic tint hue (deg) — duotone rotates from here to the target. */
-const SEPIA_HUE_DEGREES = 40;
-
-const clamp01 = (v: number) => Math.max(0, Math.min(1, v));
-const r2 = (v: number) => Math.round(v * 100) / 100;
-
-/**
- * Build the CSS `filter` value for a treatment and/or blur.
- * Returns `undefined` when there is nothing to apply.
- */
-export function cssFilterForTreatment(
-  treatment?: ImageTreatment,
-  blur?: number,
-): string | undefined {
-  const parts: string[] = [];
-
-  if (blur != null && blur > 0) {
-    parts.push(`blur(${Math.round(blur)}px)`);
-  }
-
-  if (treatment && treatment.type !== 'none') {
-    const s = clamp01(treatment.strength ?? 0.6);
-    switch (treatment.type) {
-      case 'mono':
-        // Archival black & white with a whisper of contrast to keep depth.
-        parts.push(`grayscale(${r2(s)})`, `contrast(${r2(1 + 0.05 * s)})`);
-        break;
-      case 'duotone': {
-        // Classic CSS duotone approximation: flatten to gray, tint through
-        // sepia (intrinsic hue ~40°), rotate to the target hue, re-saturate.
-        const hue = hexHueDegrees(treatment.color ?? '#3d5a80');
-        parts.push(
-          'grayscale(1)',
-          `sepia(${r2(Math.max(0.35, s))})`,
-          `hue-rotate(${Math.round(hue - SEPIA_HUE_DEGREES)}deg)`,
-          `saturate(${r2(1 + s)})`,
-        );
-        break;
-      }
-      case 'warm':
-        // Partial sepia is a well-behaved warmer; slight saturation lift.
-        parts.push(`sepia(${r2(0.4 * s)})`, `saturate(${r2(1 + 0.15 * s)})`);
-        break;
-      case 'cool':
-        // Desaturate a touch and nudge warm tones toward magenta/blue —
-        // small rotations read as a grade, large ones wreck hues.
-        parts.push(
-          `saturate(${r2(1 - 0.25 * s)})`,
-          `hue-rotate(${Math.round(-12 * s)}deg)`,
-          `contrast(${r2(1 + 0.06 * s)})`,
-        );
-        break;
-    }
-  }
-
-  return parts.length > 0 ? parts.join(' ') : undefined;
-}