@bendyline/squisq 1.4.1 → 1.5.1

package/src/doc/templates/__tests__/customTemplate.test.ts

@@ -0,0 +1,170 @@
+/**
+ * makeCustomTemplateFn — verifies a CustomTemplateDefinition expands
+ * correctly via the standard template function signature and that
+ * `%`-based positions resolve correctly across viewport presets.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { makeCustomTemplateFn } from '../customTemplate';
+import type { CustomTemplateDefinition } from '../../../schemas/CustomTemplates.js';
+import type { Block, TextLayer } from '../../../schemas/Doc.js';
+import type { RawLayersInput, TemplateContext } from '../../../schemas/BlockTemplates.js';
+import { createTemplateContext } from '../../../schemas/BlockTemplates.js';
+import { DEFAULT_THEME } from '../../../schemas/themeLibrary.js';
+import { VIEWPORT_PRESETS, type ViewportConfig } from '../../../schemas/Viewport.js';
+
+function defn(layers: TextLayer[]): CustomTemplateDefinition {
+  return {
+    name: 'hero',
+    label: 'Hero',
+    viewport: { width: 1920, height: 1080 },
+    layers,
+  };
+}
+
+function makeContext(
+  block: Block,
+  viewport: ViewportConfig = VIEWPORT_PRESETS.landscape,
+): TemplateContext {
+  const ctx = createTemplateContext(DEFAULT_THEME, 0, 1, viewport);
+  ctx.block = block;
+  return ctx;
+}
+
+function makeBlock(overrides: Partial<Block> = {}): Block {
+  return {
+    id: 'b',
+    startTime: 0,
+    duration: 1,
+    audioSegment: 0,
+    title: 'Welcome',
+    template: 'hero',
+    ...overrides,
+  };
+}
+
+function makeInput(): RawLayersInput {
+  return {
+    id: 'b',
+    template: 'layout',
+    duration: 1,
+    audioSegment: 0,
+  };
+}
+
+describe('makeCustomTemplateFn', () => {
+  it('substitutes the block title into a layer carrying {title}', () => {
+    const fn = makeCustomTemplateFn(
+      defn([
+        {
+          id: 't',
+          type: 'text',
+          position: { x: '10%', y: '20%', width: '80%', height: '15%' },
+          content: { text: 'Hello, {title}!', style: { fontSize: 48, color: '#000' } },
+        },
+      ]),
+    );
+    const ctx = makeContext(makeBlock({ title: 'World' }));
+    const layers = fn(makeInput(), ctx);
+    expect(layers).toHaveLength(1);
+    expect((layers[0] as TextLayer).content.text).toBe('Hello, World!');
+  });
+
+  it('falls back to the input block when context.block is missing', () => {
+    const fn = makeCustomTemplateFn(
+      defn([
+        {
+          id: 't',
+          type: 'text',
+          position: { x: '0%', y: '0%', width: '100%', height: '10%' },
+          content: { text: '{title}', style: { fontSize: 24, color: '#000' } },
+        },
+      ]),
+    );
+    const ctx = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
+    // No ctx.block set; the fn resolves against `input` instead. The
+    // default input carries no title, so {title} collapses to empty.
+    const layers = fn(makeInput(), ctx);
+    expect((layers[0] as TextLayer).content.text).toBe('');
+  });
+
+  it('resolves {attr:key} from the input block when context.block is missing', () => {
+    const fn = makeCustomTemplateFn(
+      defn([
+        {
+          id: 't',
+          type: 'text',
+          position: { x: '0%', y: '0%', width: '100%', height: '10%' },
+          content: { text: '{attr:role}', style: { fontSize: 24, color: '#000' } },
+        },
+      ]),
+    );
+    const ctx = createTemplateContext(DEFAULT_THEME, 0, 1, VIEWPORT_PRESETS.landscape);
+    const input = { ...makeInput(), templateOverrides: { role: 'lead' } } as RawLayersInput;
+    const layers = fn(input, ctx);
+    expect((layers[0] as TextLayer).content.text).toBe('lead');
+  });
+
+  it('preserves %-based positions verbatim — they resolve at SSR render time', () => {
+    const fn = makeCustomTemplateFn(
+      defn([
+        {
+          id: 't',
+          type: 'text',
+          position: { x: '10%', y: '20%', width: '80%' },
+          content: { text: 'static', style: { fontSize: 24, color: '#000' } },
+        },
+      ]),
+    );
+
+    // Landscape: 1920×1080
+    const landscapeLayers = fn(makeInput(), makeContext(makeBlock(), VIEWPORT_PRESETS.landscape));
+    expect(landscapeLayers[0].position.x).toBe('10%');
+
+    // Portrait: 1080×1920
+    const portraitLayers = fn(makeInput(), makeContext(makeBlock(), VIEWPORT_PRESETS.portrait));
+    expect(portraitLayers[0].position.x).toBe('10%');
+
+    // Square: 1080×1080
+    const squareLayers = fn(makeInput(), makeContext(makeBlock(), VIEWPORT_PRESETS.square));
+    expect(squareLayers[0].position.x).toBe('10%');
+
+    // The positions stay as `%`-strings — the SSR layer renderer (not
+    // this function) is responsible for resolving them into pixels
+    // against the target viewport. We verify the function doesn't
+    // perturb authoring intent.
+  });
+
+  it('round-trips multiple tokens in one definition', () => {
+    const fn = makeCustomTemplateFn(
+      defn([
+        {
+          id: 'title',
+          type: 'text',
+          position: { x: '5%', y: '5%', width: '90%', height: '20%' },
+          content: { text: '{title}', style: { fontSize: 72, color: '#000' } },
+        },
+        {
+          id: 'body',
+          type: 'text',
+          position: { x: '5%', y: '30%', width: '90%', height: '60%' },
+          content: { text: '{content}', style: { fontSize: 32, color: '#333' } },
+        },
+      ]),
+    );
+    const ctx = makeContext(
+      makeBlock({
+        title: 'Welcome',
+        contents: [
+          {
+            type: 'paragraph',
+            children: [{ type: 'text', value: 'A small editor for big ideas.' }],
+          },
+        ],
+      }),
+    );
+    const layers = fn(makeInput(), ctx);
+    expect((layers[0] as TextLayer).content.text).toBe('Welcome');
+    expect((layers[1] as TextLayer).content.text).toBe('A small editor for big ideas.');
+  });
+});

package/src/doc/templates/__tests__/customTemplateRegistry.test.ts

@@ -0,0 +1,110 @@
+/**
+ * Registry merge — end-to-end: a doc that uses a custom template name
+ * resolves through `expandDocBlocks(opts.customTemplates)` and produces
+ * layers with tokens substituted from the source block.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { buildRegistry, expandDocBlocks } from '../index';
+import type { CustomTemplateDefinition } from '../../../schemas/CustomTemplates.js';
+import type { Block, TextLayer } from '../../../schemas/Doc.js';
+
+const heroDef: CustomTemplateDefinition = {
+  name: 'hero',
+  label: 'Hero',
+  viewport: { width: 1920, height: 1080 },
+  layers: [
+    {
+      id: 'title',
+      type: 'text',
+      position: { x: '5%', y: '10%', width: '90%' },
+      content: { text: '{title}', style: { fontSize: 72, color: '#000' } },
+    },
+    {
+      id: 'body',
+      type: 'text',
+      position: { x: '5%', y: '40%', width: '90%' },
+      content: { text: '{content}', style: { fontSize: 32, color: '#333' } },
+    },
+  ],
+};
+
+describe('buildRegistry', () => {
+  it('merges custom templates onto the built-in registry', () => {
+    const reg = buildRegistry([heroDef]);
+    expect(reg.hero).toBeDefined();
+    expect(reg.title).toBeDefined(); // built-in survives
+  });
+
+  it('does not let custom templates shadow built-in names', () => {
+    const collide: CustomTemplateDefinition = {
+      ...heroDef,
+      name: 'title', // collides with built-in
+    };
+    const reg = buildRegistry([collide]);
+    // Built-in `title` is preserved — the collide entry is silently
+    // dropped (callers shouldn't have created it). We verify by
+    // checking the function reference is the original built-in's.
+    const builtIn = buildRegistry();
+    expect(reg.title).toBe(builtIn.title);
+  });
+});
+
+describe('expandDocBlocks with customTemplates', () => {
+  it('expands a doc-defined template name into resolved layers', () => {
+    const block: Block = {
+      id: 'b1',
+      startTime: 0,
+      duration: 1,
+      audioSegment: 0,
+      title: 'Welcome',
+      template: 'hero',
+      contents: [
+        {
+          type: 'paragraph',
+          children: [{ type: 'text', value: 'A small editor for big ideas.' }],
+        },
+      ],
+    };
+
+    const expanded = expandDocBlocks([block], { customTemplates: [heroDef] });
+    expect(expanded).toHaveLength(1);
+    const layers = expanded[0].layers ?? [];
+    expect(layers).toHaveLength(2);
+    expect((layers[0] as TextLayer).content.text).toBe('Welcome');
+    expect((layers[1] as TextLayer).content.text).toBe('A small editor for big ideas.');
+  });
+
+  it('preserves %-based positions so the SSR renderer can resolve them per viewport', () => {
+    const block: Block = {
+      id: 'b1',
+      startTime: 0,
+      duration: 1,
+      audioSegment: 0,
+      title: 'X',
+      template: 'hero',
+    };
+    const expanded = expandDocBlocks([block], { customTemplates: [heroDef] });
+    expect(expanded[0].layers![0].position.x).toBe('5%');
+    expect(expanded[0].layers![0].position.width).toBe('90%');
+  });
+
+  it('falls back to a no-layer block (with a warning) when the template is unknown', () => {
+    // Suppress the expected console.warn from `expandTemplateBlock`.
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const block: Block = {
+      id: 'b1',
+      startTime: 0,
+      duration: 1,
+      audioSegment: 0,
+      title: 'Y',
+      template: 'nonexistent',
+    };
+    const expanded = expandDocBlocks([block], { customTemplates: [heroDef] });
+    expect(expanded[0].layers).toBeUndefined();
+    expect(warnSpy).toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+});
+
+import { vi } from 'vitest';

package/src/doc/templates/accentImage.ts

@@ -13,7 +13,13 @@
  * This is shared code used by both site and efb-app doc renderers.
  */
 
-import type { Layer, ImageLayer, ShapeLayer, Animation } from '../../schemas/Doc.js';
+import type {
+  Layer,
+  ImageLayer,
+  ImageTreatment,
+  ShapeLayer,
+  Animation,
+} from '../../schemas/Doc.js';
 import type { AccentImage, AccentPosition } from '../../schemas/BlockTemplates.js';
 
 const PERCENTAGE_RE = /^(\d+(?:\.\d+)?)\s*%?$/;
@@ -125,28 +131,40 @@ export function getAccentLayout(position: AccentPosition): AccentLayout {
  * Create layers for an accent image.
  * Returns the image layer and any overlay/gradient layers needed.
  */
-export function createAccentLayers(accent: AccentImage, slideId: string): Layer[] {
+export function createAccentLayers(
+  accent: AccentImage,
+  slideId: string,
+  treatment?: ImageTreatment,
+): Layer[] {
   const layers: Layer[] = [];
   const { src, alt, position, ambientMotion, credit, license } = accent;
 
   switch (position) {
     case 'left-strip':
-      layers.push(createStripImage(src, alt, 'left', slideId, ambientMotion, credit, license));
+      layers.push(
+        createStripImage(src, alt, 'left', slideId, ambientMotion, credit, license, treatment),
+      );
       layers.push(createStripGradient('left', slideId));
       break;
 
     case 'right-strip':
-      layers.push(createStripImage(src, alt, 'right', slideId, ambientMotion, credit, license));
+      layers.push(
+        createStripImage(src, alt, 'right', slideId, ambientMotion, credit, license, treatment),
+      );
       layers.push(createStripGradient('right', slideId));
       break;
 
     case 'bottom-strip':
-      layers.push(createBottomStripImage(src, alt, slideId, ambientMotion, credit, license));
+      layers.push(
+        createBottomStripImage(src, alt, slideId, ambientMotion, credit, license, treatment),
+      );
       layers.push(createBottomStripGradient(slideId));
       break;
 
     case 'corner-inset':
-      layers.push(createCornerInsetImage(src, alt, slideId, ambientMotion, credit, license));
+      layers.push(
+        createCornerInsetImage(src, alt, slideId, ambientMotion, credit, license, treatment),
+      );
       layers.push(createCornerVignette(slideId));
       break;
   }
@@ -165,6 +183,7 @@ function createStripImage(
   ambientMotion?: AccentImage['ambientMotion'],
   credit?: string,
   license?: string,
+  treatment?: ImageTreatment,
 ): ImageLayer {
   return {
     type: 'image',
@@ -175,6 +194,7 @@ function createStripImage(
       fit: 'cover',
       credit,
       license,
+      ...(treatment ? { treatment } : {}),
     },
     position: {
       x: side === 'left' ? 0 : `${100 - STRIP_SIZE}%`,
@@ -221,6 +241,7 @@ function createBottomStripImage(
   ambientMotion?: AccentImage['ambientMotion'],
   credit?: string,
   license?: string,
+  treatment?: ImageTreatment,
 ): ImageLayer {
   return {
     type: 'image',
@@ -231,6 +252,7 @@ function createBottomStripImage(
       fit: 'cover',
       credit,
       license,
+      ...(treatment ? { treatment } : {}),
     },
     position: {
       x: 0,
@@ -272,6 +294,7 @@ function createCornerInsetImage(
   ambientMotion?: AccentImage['ambientMotion'],
   credit?: string,
   license?: string,
+  treatment?: ImageTreatment,
 ): ImageLayer {
   return {
     type: 'image',
@@ -282,6 +305,7 @@ function createCornerInsetImage(
       fit: 'cover',
       credit,
       license,
+      ...(treatment ? { treatment } : {}),
     },
     position: {
       x: '70%',

package/src/doc/templates/captionUtils.ts

@@ -31,3 +31,26 @@ export function createBackgroundLayer(id: string, fill: string): Layer {
     position: { x: 0, y: 0, width: '100%', height: '100%' },
   };
 }
+
+/**
+ * Estimate the rendered height (px) of a wrapped text block.
+ *
+ * Templates are pure functions with no access to real text metrics, but
+ * stacked lockups (quote + attribution, fact + explanation + source) need
+ * to place each element relative to the previous one instead of at fixed
+ * slots — fixed slots leave 200px voids for short content and collide for
+ * long content. The 0.52 average-glyph-width factor is tuned for the
+ * sans/serif faces the built-in themes use; it only needs to be right
+ * within ~20% for spacing purposes.
+ */
+export function estimateTextHeight(
+  text: string,
+  fontSizePx: number,
+  maxWidthPx: number,
+  lineHeight: number,
+): number {
+  const avgCharWidth = fontSizePx * 0.52;
+  const charsPerLine = Math.max(8, Math.floor(maxWidthPx / avgCharWidth));
+  const lines = Math.max(1, Math.ceil(text.length / charsPerLine));
+  return lines * fontSizePx * lineHeight;
+}

package/src/doc/templates/comparisonBar.ts

@@ -10,31 +10,30 @@
 
 import type { Layer } from '../../schemas/Doc.js';
 import type { ComparisonBarInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import { scaledFontSize } from '../../schemas/BlockTemplates.js';
-import { resolveColorScheme, getThemeFont } from '../utils/themeUtils.js';
+import {
+  resolveColorScheme,
+  getThemeFont,
+  themedFontSize,
+  themedSurfaceGradient,
+} from '../utils/themeUtils.js';
 
 export function comparisonBar(input: ComparisonBarInput, context: TemplateContext): Layer[] {
-  const { leftLabel, leftValue, rightLabel, rightValue, unit, colorScheme = 'blue' } = input;
-  const { theme } = context;
+  const { leftLabel, rightLabel, unit, colorScheme = 'blue' } = input;
+  const { theme, viewport } = context;
   const colors = resolveColorScheme(context, colorScheme);
 
-  const labelFontSize = scaledFontSize(28, context, false);
-  const valueFontSize = scaledFontSize(48, context, true);
+  // 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;
 
-  // Calculate proportional bar widths (max bar = 65% of viewport width)
-  const maxValue = Math.max(leftValue, rightValue, 1);
-  const maxBarWidth = 65;
-  const leftBarWidth = (leftValue / maxValue) * maxBarWidth;
-  const rightBarWidth = (rightValue / maxValue) * maxBarWidth;
-
-  // Bar positioning
-  const barStartX = 15;
-  const barHeight = 6; // % of viewport height
-  const topBarY = 36;
-  const bottomBarY = 58;
+  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();
@@ -43,6 +42,22 @@ export function comparisonBar(input: ComparisonBarInput, context: TemplateContex
   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
     {
@@ -50,7 +65,7 @@ export function comparisonBar(input: ComparisonBarInput, context: TemplateContex
       id: 'bg',
       content: {
         shape: 'rect',
-        fill: `linear-gradient(180deg, ${theme.colors.background} 0%, #0f1520 100%)`,
+        fill: themedSurfaceGradient(context, 180),
       },
       position: { x: 0, y: 0, width: '100%', height: '100%' },
     },

package/src/doc/templates/coverBlock.ts

@@ -16,9 +16,8 @@
 
 import type { Layer } from '../../schemas/Doc.js';
 import type { TemplateContext } from '../../schemas/BlockTemplates.js';
-import { scaledFontSize } from '../../schemas/BlockTemplates.js';
 import type { StartBlockConfig } from '../../schemas/Doc.js';
-import { getThemeFont } from '../utils/themeUtils.js';
+import { getThemeFont, themedFontSize, themedImageTreatment } from '../utils/themeUtils.js';
 import { mapAmbientMotion } from './accentImage.js';
 
 /**
@@ -39,18 +38,48 @@ export interface CoverBlockInput {
   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));
 }
 
 /**
  * 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;
 
-  // Scale font sizes for viewport - cover titles are larger than regular title blocks
-  const titleFontSize = scaledFontSize(120, context, true);
-  const subtitleFontSize = scaledFontSize(40, context, false);
+  // 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[] = [];
 
@@ -68,6 +97,7 @@ export function coverBlock(input: CoverBlockInput, context: TemplateContext): La
           fit: 'cover',
           credit: heroCredit,
           license: heroLicense,
+          ...(treatment ? { treatment } : {}),
         },
         position: { x: 0, y: 0, width: '100%', height: '100%' },
         animation: imageAnimation,

package/src/doc/templates/customTemplate.ts

@@ -0,0 +1,51 @@
+/**
+ * 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);
+  };
+}