From 1050029842941270c9c06a6aaecfe7ca3bf9bd82 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sat, 24 Oct 2026 09:17:11 +0200
Subject: [PATCH] fix(studio): a saved layout's background unlinks the page
 from its theme colour

---
 shared/src/book/book-layouts.spec.ts  | 17 +++++++++++++++++
 shared/src/book/book-saved-layouts.ts |  4 +++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/shared/src/book/book-layouts.spec.ts b/shared/src/book/book-layouts.spec.ts
index a59f2e3f5..4fa2ad948 100644
--- a/shared/src/book/book-layouts.spec.ts
+++ b/shared/src/book/book-layouts.spec.ts
@@ -264,6 +264,23 @@ describe('a mark set as text on a page laid out again', () => {
   });
 });
 
+describe('the page background a saved layout brings', () => {
+  it("BOOKLAY-030: replaces the page's colour and its link to a theme colour, so a theme cannot paint over it", () => {
+    const from = bookSpreadSchema.parse({ id: 'a', role: 'inner', background: '#123456', elements: [] });
+    const layout = bookLayoutFromSpread(from, page, 'Navy');
+    const linked = bookSpreadSchema.parse({
+      id: 'b',
+      role: 'inner',
+      background: '#ffffff',
+      backgroundToken: 'paper',
+      elements: [],
+    });
+    const next = applySavedBookLayout(linked, layout, page);
+    expect(next.background).toBe('#123456');
+    expect(next).not.toHaveProperty('backgroundToken');
+  });
+});
+
 describe('letters filled with a photo in a saved layout', () => {
   const frame = { x: 10, y: 10, w: 80, h: 40 };
   const filledWith = (photoId: number) => ({ type: 'photo' as const, photoId, focalX: 0.5, focalY: 0.5, zoom: 1 });
diff --git a/shared/src/book/book-saved-layouts.ts b/shared/src/book/book-saved-layouts.ts
index 3ce3b804a..5a734d29b 100644
--- a/shared/src/book/book-saved-layouts.ts
+++ b/shared/src/book/book-saved-layouts.ts
@@ -145,7 +145,9 @@ export function applySavedBookLayout(spread: BookSpread, layout: BookLayout, pag
   const used = new Set(wordsFor.values());
   const parked = [...photos.slice(pi), ...texts.filter((t) => !used.has(t))].slice(0, MAX_SPREAD_ELEMENTS);
 
-  const { backgroundPaint: _old, ...rest } = spread;
+  // The layout's background replaces the page's, so the page's link to a theme
+  // colour goes with it: kept, the next theme would paint over the layout's colour.
+  const { backgroundPaint: _old, backgroundToken: _unlinked, ...rest } = spread;
   const backgroundPaint = layout.backgroundPaint ? { backgroundPaint: layout.backgroundPaint } : {};
   return { ...rest, background: layout.background, ...backgroundPaint, elements: out, parked };
 }