@bendyline/squisq 1.4.0 → 1.5.0

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,28 +10,20 @@
 
 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 { theme, viewport } = context;
   const colors = resolveColorScheme(context, colorScheme);
 
-  const labelFontSize = scaledFontSize(28, context, false);
-  const valueFontSize = scaledFontSize(48, context, true);
-
-  // 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 => {
@@ -43,6 +35,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 +58,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,21 @@ 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';
 }
 
 /**
  * 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);
+  const titleFontSize = themedFontSize(120, context, true);
+  const subtitleFontSize = themedFontSize(40, context, false);
 
   const layers: Layer[] = [];
 
@@ -68,6 +70,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,45 @@
+/**
+ * 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 { 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[] => {
+    if (!context.block) return def.layers.slice();
+    return resolveTokens(def.layers, context.block);
+  };
+}

package/src/doc/templates/dataTable.ts

@@ -11,24 +11,35 @@
 
 import type { Layer } from '../../schemas/Doc.js';
 import type { DataTableInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import { scaledFontSize } from '../../schemas/BlockTemplates.js';
-import { getThemeFont, resolveColorScheme } from '../utils/themeUtils.js';
+import {
+  getThemeFont,
+  resolveColorScheme,
+  shouldUseShadow,
+  themedFontSize,
+  themedSurfaceGradient,
+} from '../utils/themeUtils.js';
+import { pickContrastingText, withAlpha } from '../../schemas/colorUtils.js';
 import { createBackgroundLayer } from './captionUtils.js';
 
 export function dataTable(input: DataTableInput, context: TemplateContext): Layer[] {
   const { title, headers, rows, align, colorScheme } = input;
-  const { theme } = context;
+  const { theme, viewport } = context;
 
   const colors = resolveColorScheme(context, colorScheme);
-  const titleFontSize = scaledFontSize(48, context, true);
-  const tableFontSize = scaledFontSize(28, context, false);
+  const titleFontSize = themedFontSize(48, context, true);
+  const tableFontSize = themedFontSize(28, context, false);
 
-  const layers: Layer[] = [
-    createBackgroundLayer(
-      'bg',
-      `linear-gradient(170deg, ${theme.colors.background} 0%, #0f1520 100%)`,
-    ),
-  ];
+  const layers: Layer[] = [createBackgroundLayer('bg', themedSurfaceGradient(context, 170))];
+
+  // Size the table band from its natural content height (header + rows at
+  // ~2.4× line height for cell padding) and center the title+table as one
+  // group — a full-height band left a ~200px orphan gap under the title.
+  // `rows` is required by the schema but may be missing on partially-
+  // authored blocks in live preview; treat it as empty rather than throwing.
+  const rowCount = (Array.isArray(rows) ? rows.length : 0) + 1;
+  const naturalTableHPct = Math.min(74, ((rowCount * tableFontSize * 2.4) / viewport.height) * 100);
+  const titleBandPct = title ? (titleFontSize * 2.2 * 100) / viewport.height : 0;
+  const groupTopPct = Math.max(8, (100 - titleBandPct - naturalTableHPct) / 2);
 
   // Optional title above the table
   if (title) {
@@ -43,15 +54,22 @@ export function dataTable(input: DataTableInput, context: TemplateContext): Laye
           fontWeight: 'bold',
           color: theme.colors.text,
           textAlign: 'center',
-          shadow: true,
+          shadow: shouldUseShadow(context),
         },
       },
-      position: { x: '50%', y: '10%', width: '80%', anchor: 'center' },
+      position: {
+        x: '50%',
+        y: `${groupTopPct + titleBandPct / 2}%`,
+        width: '80%',
+        anchor: 'center',
+      },
       animation: { type: 'fadeIn', duration: 0.8 },
     });
   }
 
-  // Table layer
+  // Table layer. Header text color is picked for contrast against the
+  // header fill — pairing two mid-tones from the same scheme made the
+  // header row read as a smudge in most themes.
   layers.push({
     type: 'table',
     id: 'table',
@@ -61,10 +79,10 @@ export function dataTable(input: DataTableInput, context: TemplateContext): Laye
       align,
       style: {
         headerBackground: colors.accent,
-        headerColor: colors.text,
-        cellBackground: 'rgba(255,255,255,0.05)',
+        headerColor: pickContrastingText(colors.accent),
+        cellBackground: withAlpha(theme.colors.text, 0.04),
         cellColor: theme.colors.text,
-        borderColor: 'rgba(255,255,255,0.12)',
+        borderColor: withAlpha(theme.colors.text, 0.15),
         fontSize: tableFontSize,
         fontFamily: getThemeFont(context, 'body'),
         headerFontFamily: getThemeFont(context, 'title'),
@@ -73,9 +91,9 @@ export function dataTable(input: DataTableInput, context: TemplateContext): Laye
     },
     position: {
       x: '10%',
-      y: title ? '18%' : '8%',
+      y: `${groupTopPct + titleBandPct}%`,
       width: '80%',
-      height: title ? '74%' : '84%',
+      height: `${naturalTableHPct}%`,
     },
     animation: { type: 'fadeIn', duration: 1, delay: title ? 0.4 : 0 },
   });

package/src/doc/templates/dateEvent.ts

@@ -12,37 +12,52 @@
 
 import type { Layer } from '../../schemas/Doc.js';
 import type { DateEventInput, TemplateContext } from '../../schemas/BlockTemplates.js';
-import { scaledFontSize } from '../../schemas/BlockTemplates.js';
-import { getThemeFont } from '../utils/themeUtils.js';
+import {
+  getThemeFont,
+  shouldUseShadow,
+  themedFontSize,
+  themedSurfaceGradient,
+  themedImageTreatment,
+} from '../utils/themeUtils.js';
+import { oklchDarken, relativeLuminance } from '../../schemas/colorUtils.js';
 import { createAccentLayers, getAccentLayout, adjustY, DEFAULT_LAYOUT } from './accentImage.js';
 
-const MOOD_COLORS = {
-  neutral: { bg: '#1a202c', date: '#63b3ed', text: '#ffffff' },
-  somber: { bg: '#1a1a2e', date: '#e53e3e', text: '#a0aec0' },
-  celebratory: { bg: '#1a365d', date: '#68d391', text: '#ffffff' },
+/**
+ * Mood accents tint the hero date, not the surface — the surface always
+ * comes from the theme. (Hard-coded dark mood panels used to turn light
+ * and warm themes into a cold navy slide.)
+ */
+const MOOD_ACCENTS = {
+  neutral: '#63b3ed',
+  somber: '#e53e3e',
+  celebratory: '#68d391',
 };
 
 export function dateEvent(input: DateEventInput, context: TemplateContext): Layer[] {
   const { date, description, footer, mood = 'neutral', accentImage } = input;
   const { theme } = context;
-  const colors = MOOD_COLORS[mood];
+  // Deepen the mood accent on light surfaces so the hero date keeps contrast.
+  const moodAccent = MOOD_ACCENTS[mood];
+  const dateColor =
+    relativeLuminance(theme.colors.background) > 0.5 ? oklchDarken(moodAccent, 0.25) : moodAccent;
 
   // Get layout adjustments if accent image is present
   const accentLayout = accentImage ? getAccentLayout(accentImage.position) : DEFAULT_LAYOUT;
 
   // Scale font sizes — date is the hero element
-  const dateFontSize = scaledFontSize(96, context, true);
-  const descFontSize = scaledFontSize(30, context, false);
-  const footerFontSize = scaledFontSize(26, context, false);
+  const dateFontSize = themedFontSize(96, context, true);
+  const descFontSize = themedFontSize(30, context, false);
+  const footerFontSize = themedFontSize(26, context, false);
 
   const layers: Layer[] = [
-    // Background — unique diagonal gradient to differentiate from other dark templates
+    // Background — theme surface gradient (diagonal to differentiate
+    // from other text templates)
     {
       type: 'shape',
       id: 'bg',
       content: {
         shape: 'rect',
-        fill: `linear-gradient(135deg, ${colors.bg} 0%, #0d1117 100%)`,
+        fill: themedSurfaceGradient(context, 135),
       },
       position: { x: 0, y: 0, width: '100%', height: '100%' },
     },
@@ -50,7 +65,13 @@ export function dateEvent(input: DateEventInput, context: TemplateContext): Laye
 
   // Add accent image layers (behind text, after background)
   if (accentImage) {
-    layers.push(...createAccentLayers(accentImage, input.id));
+    layers.push(
+      ...createAccentLayers(
+        accentImage,
+        input.id,
+        themedImageTreatment(context, input.imageTreatment),
+      ),
+    );
   }
 
   // Date — hero element, much larger
@@ -63,8 +84,8 @@ export function dateEvent(input: DateEventInput, context: TemplateContext): Laye
         fontSize: dateFontSize,
         fontFamily: getThemeFont(context, 'title'),
         fontWeight: 'bold',
-        color: colors.date,
-        shadow: !!accentImage,
+        color: dateColor,
+        shadow: shouldUseShadow(context),
       },
     },
     position: {
@@ -84,10 +105,10 @@ export function dateEvent(input: DateEventInput, context: TemplateContext): Laye
       style: {
         fontSize: descFontSize,
         fontFamily: getThemeFont(context, 'body'),
-        color: colors.text,
+        color: theme.colors.text,
         textAlign: 'center',
-        lineHeight: 1.8,
-        shadow: !!accentImage,
+        lineHeight: 1.6,
+        shadow: shouldUseShadow(context),
       },
     },
     position: {
@@ -110,12 +131,12 @@ export function dateEvent(input: DateEventInput, context: TemplateContext): Laye
           fontSize: footerFontSize,
           fontFamily: getThemeFont(context, 'body'),
           color: theme.colors.textMuted,
-          shadow: !!accentImage,
+          shadow: shouldUseShadow(context),
         },
       },
       position: {
         x: accentLayout.textCenterX,
-        y: adjustY('82%', accentLayout),
+        y: adjustY('72%', accentLayout),
         anchor: 'center',
       },
       animation: { type: 'fadeIn', duration: 1, delay: 3 },