@bendyline/squisq 2.0.1 → 2.2.0

package/src/doc/templates/layoutLayout.ts

@@ -1,243 +0,0 @@
-/**
- * Layout layout — pure derivation of positioned layers from a `layout`
- * block's child sub-blocks. The layout counterpart to `drawingLayout.ts`,
- * with two deliberate differences:
- *
- *  - **Absolute** positioning. Each child's `x`/`y`/`width`/`height` are
- *    used as-is in viewport units (no auto-grid, no fit-to-viewport
- *    scaling). A layout is a free-form canvas; authors place things where
- *    they want them.
- *  - **Text content lives in the child body.** A `{[text …]}` child's
- *    paragraphs/lists/marks under its heading become the text — readable
- *    markdown rather than an encoded blob. (`content.html` is filled by the
- *    editor for rich on-canvas rendering; SSR uses the plain `content.text`.)
- *
- * Each child heading is one layer: `### {#id} {[<type> x=.. y=.. …]}`.
- * Children are emitted in document order, so the first child is the
- * back-most layer (painters' order).
- */
-
-import type { Layer, ShapeLayer, TextLayer, PathLayer, ImageLayer } from '../../schemas/Doc.js';
-import { extractPlainText } from '../../markdown/utils.js';
-import { normalizeShapeKind } from './drawingLayout.js';
-import { shapePath } from '../utils/shapeGeometry.js';
-
-export interface LayoutLayersResult {
-  layers: Layer[];
-  warnings: string[];
-}
-
-export interface LayoutLayerDefaults {
-  /**
-   * Default ink — text color and path/line stroke — used when the author
-   * omits `color=`/`stroke=`. `layoutBlock` passes the theme text color so
-   * un-styled text stays legible on dark themes; the editor's scene canvas
-   * omits it and gets the dark-slate default that suits its fixed light
-   * surface.
-   */
-  ink?: string;
-}
-
-/** Fallback ink for callers that don't supply defaults (editor scene canvas). */
-const DEFAULT_INK = '#1e293b';
-
-/** Minimal Block shape this derivation reads (subset of `Block`). */
-interface LayoutChildBlock {
-  id: string;
-  template?: string;
-  templateOverrides?: Record<string, string>;
-  title?: string;
-  contents?: import('../../markdown/types.js').MarkdownNode[];
-}
-
-const DEFAULT_TEXT = { w: 300, h: 80 };
-const DEFAULT_SHAPE = { w: 160, h: 90 };
-const DEFAULT_IMAGE = { w: 320, h: 240 };
-
-/**
- * Map a layout block's children → positioned layers. Pure: same children
- * always produce the same layers.
- */
-export function computeLayoutLayers(
-  children: readonly LayoutChildBlock[],
-  _viewport: { width: number; height: number },
-  defaults: LayoutLayerDefaults = {},
-): LayoutLayersResult {
-  const ink = defaults.ink ?? DEFAULT_INK;
-  const layers: Layer[] = [];
-  const warnings: string[] = [];
-
-  for (const child of children) {
-    const params = child.templateOverrides ?? {};
-    const annotation = (child.template ?? '').toLowerCase();
-    const x = numParam(params, 'x') ?? 0;
-    const y = numParam(params, 'y') ?? 0;
-
-    if (annotation === 'image' || annotation === 'img') {
-      const src = strParam(params, 'src');
-      if (!src) {
-        warnings.push(`Layout image "${child.id}" has no src= and was skipped`);
-        continue;
-      }
-      const layer: ImageLayer = {
-        id: child.id,
-        type: 'image',
-        position: {
-          x,
-          y,
-          width: numParam(params, 'width') ?? DEFAULT_IMAGE.w,
-          height: numParam(params, 'height') ?? DEFAULT_IMAGE.h,
-        },
-        content: {
-          src,
-          alt: strParam(params, 'alt') ?? '',
-          ...(strParam(params, 'fit')
-            ? { fit: strParam(params, 'fit') as 'cover' | 'contain' | 'fill' }
-            : {}),
-        },
-      };
-      layers.push(layer);
-      continue;
-    }
-
-    const kind = normalizeShapeKind(child.template);
-    if (!kind) {
-      warnings.push(
-        `Layout child "${child.id}" is not a layer (annotation "${child.template ?? '—'}") and was skipped`,
-      );
-      continue;
-    }
-
-    if (kind === 'text') {
-      const text = bodyText(child) || child.title || '';
-      const layer: TextLayer = {
-        id: child.id,
-        type: 'text',
-        position: {
-          x,
-          y,
-          width: numParam(params, 'width') ?? DEFAULT_TEXT.w,
-          height: numParam(params, 'height') ?? DEFAULT_TEXT.h,
-        },
-        content: { text, style: textStyleFromParams(params, ink) },
-      };
-      layers.push(layer);
-      continue;
-    }
-
-    const width = numParam(params, 'width') ?? numParam(params, 'w') ?? DEFAULT_SHAPE.w;
-    const height = numParam(params, 'height') ?? numParam(params, 'h') ?? DEFAULT_SHAPE.h;
-
-    if (kind === 'rect' || kind === 'circle') {
-      const shape: ShapeLayer = {
-        id: child.id,
-        type: 'shape',
-        position: { x, y, width, height },
-        content: {
-          shape: kind,
-          ...(strParam(params, 'fill') ? { fill: strParam(params, 'fill') } : {}),
-          ...(strParam(params, 'stroke') ? { stroke: strParam(params, 'stroke') } : {}),
-          ...(numParam(params, 'strokeWidth') != null
-            ? { strokeWidth: numParam(params, 'strokeWidth') }
-            : {}),
-          ...(strParam(params, 'borderStyle')
-            ? { borderStyle: strParam(params, 'borderStyle') as 'solid' | 'dashed' | 'dotted' }
-            : {}),
-          ...(kind === 'rect' && numParam(params, 'borderRadius') != null
-            ? { borderRadius: numParam(params, 'borderRadius') }
-            : {}),
-        },
-      };
-      layers.push(shape);
-      continue;
-    }
-
-    // line / arrow / path / named polygon → PathLayer (absolute geometry).
-    const diagonal = `M ${round(x)} ${round(y)} L ${round(x + width)} ${round(y + height)}`;
-    let d = diagonal;
-    let pathFill = 'none';
-    let endMarker: 'none' | 'arrow' = 'none';
-    if (kind === 'path') {
-      d = strParam(params, 'd') ?? diagonal;
-      pathFill = strParam(params, 'fill') ?? 'none';
-    } else if (kind === 'arrow') {
-      endMarker = 'arrow';
-    } else if (kind !== 'line') {
-      d = shapePath(kind, x, y, width, height) ?? diagonal;
-      pathFill = strParam(params, 'fill') ?? 'none';
-    }
-    const path: PathLayer = {
-      id: child.id,
-      type: 'path',
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-      content: {
-        d,
-        stroke: strParam(params, 'stroke') ?? ink,
-        strokeWidth: numParam(params, 'strokeWidth') ?? 2,
-        fill: pathFill,
-        ...(strParam(params, 'dasharray') ? { dasharray: strParam(params, 'dasharray') } : {}),
-        ...(endMarker !== 'none' ? { endMarker } : {}),
-      },
-    };
-    layers.push(path);
-  }
-
-  return { layers, warnings };
-}
-
-/** Build a TextStyle from a text layer's annotation params. */
-function textStyleFromParams(
-  params: Record<string, string>,
-  ink: string,
-): TextLayer['content']['style'] {
-  const style: TextLayer['content']['style'] = {
-    fontSize: numParam(params, 'fontSize') ?? 32,
-    color: strParam(params, 'color') ?? ink,
-  };
-  const fontFamily = strParam(params, 'fontFamily');
-  if (fontFamily) style.fontFamily = fontFamily;
-  const fontWeight = strParam(params, 'fontWeight');
-  if (fontWeight === 'bold' || fontWeight === 'normal') style.fontWeight = fontWeight;
-  const fontStyle = strParam(params, 'fontStyle');
-  if (fontStyle === 'italic' || fontStyle === 'normal') style.fontStyle = fontStyle;
-  const align = strParam(params, 'align');
-  if (align === 'left' || align === 'center' || align === 'right') style.textAlign = align;
-  const valign = strParam(params, 'valign');
-  if (valign === 'top' || valign === 'middle' || valign === 'bottom') style.verticalAlign = valign;
-  const lineHeight = numParam(params, 'lineHeight');
-  if (lineHeight != null) style.lineHeight = lineHeight;
-  const padding = numParam(params, 'padding');
-  if (padding != null) style.padding = padding;
-  const background = strParam(params, 'background');
-  if (background) style.background = background;
-  return style;
-}
-
-/** Read a raw string param (trims a trailing comma — `x=21, y=25` tolerated). */
-function strParam(params: Record<string, string>, key: string): string | undefined {
-  const raw = params[key];
-  if (raw == null) return undefined;
-  const v = raw.replace(/,\s*$/, '').trim();
-  return v.length > 0 ? v : undefined;
-}
-
-/** Coerce a numeric param, tolerating a trailing comma. Undefined on failure. */
-function numParam(params: Record<string, string>, key: string): number | undefined {
-  const v = strParam(params, key);
-  if (v == null) return undefined;
-  const n = Number(v);
-  return Number.isFinite(n) ? n : undefined;
-}
-
-/** Plain text of a block's body content. */
-function bodyText(block: LayoutChildBlock): string {
-  if (!block.contents || block.contents.length === 0) return '';
-  return block.contents
-    .map((node) => extractPlainText(node))
-    .join('\n')
-    .trim();
-}
-
-function round(n: number): number {
-  return Math.round(n * 100) / 100;
-}

package/src/doc/templates/listBlock.ts

@@ -1,207 +0,0 @@
-/**
- * List Block Template
- *
- * Displays 3-5 items in a numbered vertical list with staggered animations.
- * Good for enumerations like "things to see", "key features", or "tips".
- * Supports optional accent images.
- *
- * This is shared code used by both site and efb-app doc renderers.
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type { ListBlockInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import {
-  getThemeFont,
-  shouldUseShadow,
-  themedEntrance,
-  themedFontSize,
-  themedImageTreatment,
-} from '../utils/themeUtils.js';
-import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
-
-const LIST_ITEM_LINE_HEIGHT = 1.2;
-const LIST_ITEM_GAP_PX = 18;
-
-/**
- * Mirror the renderer's character-based wrapping closely enough to reserve
- * vertical space for each independently positioned text layer.
- */
-function estimateWrappedLineCount(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 lineCount = 0;
-  let currentLineLength = 0;
-
-  for (const word of text.split(/\s+/)) {
-    const testLineLength = currentLineLength ? currentLineLength + 1 + word.length : word.length;
-
-    if (testLineLength <= charsPerLine) {
-      currentLineLength = testLineLength;
-      continue;
-    }
-
-    if (currentLineLength) lineCount += 1;
-
-    let remainingLength = word.length;
-    while (remainingLength > charsPerLine) {
-      lineCount += 1;
-      remainingLength -= charsPerLine;
-    }
-    currentLineLength = remainingLength;
-  }
-
-  return Math.max(1, lineCount + (currentLineLength ? 1 : 0));
-}
-
-export function listBlock(input: ListBlockInput, context: TemplateContext): Layer[] {
-  const { title, accentImage } = input;
-  // `items` is required by the schema, but malformed / partially-authored
-  // blocks (e.g. someone wrote `template: list` with no items yet) reach
-  // this code path during live preview. Treat missing/non-array as empty
-  // so we render the title-and-background frame instead of blowing up
-  // every keystroke with a TypeError.
-  const items: string[] = Array.isArray(input.items) ? input.items : [];
-  const { theme } = context;
-
-  // Get layout adjustments if accent image is present
-  const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
-
-  const titleFontSize = themedFontSize(44, context, true);
-  const itemFontSize = themedFontSize(34, context, false);
-
-  const layers: Layer[] = [
-    // Background — gradient
-    {
-      type: 'shape',
-      id: 'bg',
-      content: {
-        shape: 'rect',
-        fill: `linear-gradient(155deg, ${theme.colors.backgroundLight} 0%, ${theme.colors.background} 100%)`,
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-    },
-  ];
-
-  // Add accent image layers
-  if (accentImage) {
-    layers.push(
-      ...createAccentLayers(
-        accentImage,
-        input.id,
-        themedImageTreatment(context, input.imageTreatment),
-      ),
-    );
-  }
-
-  // Left edge of the text column — derived from the center+width pair so
-  // the title and items share one left axis instead of a centered title
-  // floating over a left-aligned column. Falls back to a safe 8% if the
-  // layout strings ever turn out unparseable (they're authored, but
-  // defensive against future edits to the accent-layout types).
-  const centerX = parseFloat(accentLayout.textCenterX);
-  const widthPct = parseFloat(accentLayout.textWidth);
-  const leftPct =
-    Number.isFinite(centerX) && Number.isFinite(widthPct) ? centerX - widthPct / 2 : 8;
-  const leftX = `${leftPct}%`;
-
-  // Title if provided
-  const startY = title ? 34 : 26;
-  if (title) {
-    layers.push({
-      type: 'text',
-      id: 'list-title',
-      content: {
-        text: title,
-        style: {
-          fontSize: titleFontSize,
-          fontFamily: getThemeFont(context, 'title'),
-          fontWeight: 'bold',
-          color: theme.colors.text,
-          textAlign: 'left',
-          shadow: shouldUseShadow(context),
-        },
-      },
-      position: {
-        x: leftX,
-        y: adjustY('20%', accentLayout),
-        width: accentLayout.textWidth,
-      },
-      animation: themedEntrance(context, 'text', { type: 'fadeIn', duration: 1 }),
-    });
-  }
-
-  // Render the number and body in separate columns. The body is therefore a
-  // single text layer whose wrapped lines all share the same x coordinate,
-  // producing a hanging indent instead of wrapping underneath the number.
-  const textWidthPx = (Number.isFinite(widthPct) ? widthPct / 100 : 0.85) * context.viewport.width;
-  const markerText = `${items.length}.`;
-  const markerWidthPx = Math.max(itemFontSize, markerText.length * itemFontSize * 0.5);
-  const markerGapPx = itemFontSize * 0.35;
-  const bodyIndentPx = markerWidthPx + markerGapPx;
-  const bodyLeftX = `${leftPct + (bodyIndentPx / context.viewport.width) * 100}%`;
-  const bodyWidthPx = Math.max(itemFontSize, textWidthPx - bodyIndentPx);
-  let itemY = startY;
-
-  // List items with staggered animation
-  for (let i = 0; i < items.length; i++) {
-    const itemText = items[i]!;
-    const lineCount = estimateWrappedLineCount(itemText, itemFontSize, bodyWidthPx);
-    const animation = themedEntrance(context, 'text', {
-      type: 'fadeIn',
-      duration: 0.8,
-      delay: 0.3 + 0.3 * i,
-    });
-
-    layers.push({
-      type: 'text',
-      id: `item-${i}-marker`,
-      content: {
-        text: `${i + 1}.`,
-        style: {
-          fontSize: itemFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          color: theme.colors.text,
-          textAlign: 'right',
-          lineHeight: LIST_ITEM_LINE_HEIGHT,
-          shadow: shouldUseShadow(context),
-        },
-      },
-      position: {
-        x: leftX,
-        y: adjustY(`${itemY}%`, accentLayout),
-        width: markerWidthPx,
-      },
-      animation,
-    });
-
-    layers.push({
-      type: 'text',
-      id: `item-${i}`,
-      content: {
-        text: itemText,
-        style: {
-          fontSize: itemFontSize,
-          fontFamily: getThemeFont(context, 'body'),
-          color: theme.colors.text,
-          textAlign: 'left',
-          lineHeight: LIST_ITEM_LINE_HEIGHT,
-          shadow: shouldUseShadow(context),
-        },
-      },
-      position: {
-        x: bodyLeftX,
-        y: adjustY(`${itemY}%`, accentLayout),
-        width: bodyWidthPx,
-      },
-      animation,
-    });
-
-    const itemHeightPx = lineCount * itemFontSize * LIST_ITEM_LINE_HEIGHT;
-    itemY += ((itemHeightPx + LIST_ITEM_GAP_PX) / context.viewport.height) * 100;
-  }
-
-  return layers;
-}

package/src/doc/templates/mapBlock.ts

@@ -1,138 +0,0 @@
-/**
- * Map Block Template
- *
- * Full-screen geographic map with optional title and caption overlays.
- * Great for establishing geographic context at the start of a doc
- * or when discussing location-specific content.
- * Adapts font sizes and positioning for different viewports.
- *
- * Map tiles are fetched from free/open-source providers.
- * See docs/MAP_TILES.md for available styles and attribution requirements.
- *
- * This is shared code used by both site and efb-app doc renderers.
- */
-
-import type { Layer } from '../../schemas/Doc.js';
-import type { MapBlockInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import { getThemeFont, shouldUseShadow, themedFontSize } from '../utils/themeUtils.js';
-import { withAlpha } from '../../schemas/colorUtils.js';
-import { mapAmbientMotion } from './accentImage.js';
-
-export function mapBlock(input: MapBlockInput, context: TemplateContext): Layer[] {
-  const {
-    center,
-    zoom,
-    mapStyle = 'terrain',
-    title,
-    caption,
-    markers,
-    ambientMotion,
-    staticSrc,
-  } = input;
-  const { theme, layout } = context;
-
-  // Scale font sizes for viewport
-  const titleFontSize = themedFontSize(64, context, true);
-  const captionFontSize = themedFontSize(32, context, false);
-
-  // Determine animation based on ambientMotion setting
-  const mapAnimation = mapAmbientMotion(ambientMotion);
-
-  const layers: Layer[] = [
-    // Map background
-    {
-      type: 'map',
-      id: 'map-bg',
-      content: {
-        center,
-        zoom,
-        style: mapStyle,
-        markers,
-        showAttribution: true,
-        staticSrc, // Use pre-rendered image if available
-      },
-      position: { x: 0, y: 0, width: '100%', height: '100%' },
-      animation: mapAnimation,
-    },
-  ];
-
-  // Overlay bands are tinted from the theme background so the theme text
-  // color on them stays readable in light and dark themes alike; they
-  // fade out toward the map so the band doesn't read as a hard seam.
-  const bg = theme.colors.background;
-
-  // Add title overlay if provided
-  if (title) {
-    layers.push({
-      type: 'shape',
-      id: 'title-overlay',
-      content: {
-        shape: 'rect',
-        fill: `linear-gradient(180deg, ${withAlpha(bg, 0.85)} 0%, ${withAlpha(bg, 0.6)} 70%, ${withAlpha(bg, 0)} 100%)`,
-      },
-      position: { x: 0, y: 0, width: '100%', height: '20%' },
-    });
-
-    // Title text - positioned at top of slide
-    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: '9%',
-        anchor: 'center',
-        width: layout.maxTextWidth,
-      },
-      animation: { type: 'fadeIn', duration: 1, delay: 0.3 },
-    });
-  }
-
-  // Add caption if provided
-  if (caption) {
-    layers.push({
-      type: 'shape',
-      id: 'caption-overlay',
-      content: {
-        shape: 'rect',
-        fill: `linear-gradient(0deg, ${withAlpha(bg, 0.85)} 0%, ${withAlpha(bg, 0.6)} 70%, ${withAlpha(bg, 0)} 100%)`,
-      },
-      position: { x: 0, y: '80%', width: '100%', height: '20%' },
-    });
-
-    // Caption text
-    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),
-        },
-      },
-      position: {
-        x: '50%',
-        y: layout.captionY,
-        anchor: 'center',
-        width: layout.maxTextWidth,
-      },
-      animation: { type: 'fadeIn', duration: 1, delay: 0.5 },
-    });
-  }
-
-  return layers;
-}