fix(book): every image frame shows a different photo

.github/workflows/ci.yml

@@ -28,8 +28,10 @@ jobs:
         with:
           bun-version: 1.3.9
       - run: bun install --frozen-lockfile
-      - run: docker compose up -d --wait
+      # Before compose: its bind mounts create .local/ as root, which would then
+      # keep the runner from writing the ICC profile into it.
       - run: bun run setup:icc
+      - run: docker compose up -d --wait
       - run: bun run db:migrate
       - run: bun run db:seed
       - run: bunx playwright install --with-deps chromium

e2e/critical-workflows.spec.ts

@@ -395,6 +395,53 @@ test.describe.serial("critical local prototype workflows", () => {
     await expectAccessible(page)
   })
 
+  test("layout editor flags photo slots that do not match the question", async ({
+    page,
+    request,
+  }) => {
+    await page.setViewportSize({ width: 1440, height: 900 })
+    await page.goto(`/projects/${closedProjectId}?tab=layouts`)
+    await expect(page.getByRole("heading", { name: "Page layouts" })).toBeVisible()
+    const originalProject = (await (
+      await request.get(`/api/projects/${closedProjectId}`)
+    ).json()) as Project
+    const originalLayout = originalProject.layouts.find(
+      (layout) => layout.name === "Warm quote"
+    ) as LayoutRecord
+
+    const photoPrompt = "Add one or two favourite photos"
+    const mismatch = page.getByText(/photo slots? for up to/)
+    await expect(mismatch).toHaveCount(0)
+
+    try {
+      await page.getByRole("button", { name: `Add image for ${photoPrompt}` }).click()
+      await expect(mismatch).toHaveText("1 photo slot for up to 2 uploads")
+
+      await page.getByRole("button", { name: `Add image for ${photoPrompt}` }).click()
+      await expect(mismatch).toHaveCount(0)
+
+      await page.getByRole("button", { name: `Add gallery for ${photoPrompt}` }).click()
+      await expect(mismatch).toHaveText("6 photo slots for up to 2 uploads")
+    } finally {
+      const changedProject = (await (
+        await request.get(`/api/projects/${closedProjectId}`)
+      ).json()) as Project
+      const changedLayout = changedProject.layouts.find(
+        (layout) => layout.id === originalLayout.id
+      ) as LayoutRecord
+      expect(
+        (
+          await request.patch(`/api/projects/${closedProjectId}/layouts/${changedLayout.id}`, {
+            data: {
+              expectedRevision: changedLayout.revision,
+              schema: originalLayout.schema,
+            },
+          })
+        ).ok()
+      ).toBe(true)
+    }
+  })
+
   test("answer labels edit directly on the layout canvas", async ({ page, request }) => {
     test.setTimeout(60_000)
     await page.setViewportSize({ width: 1440, height: 900 })

src/components/layout-editor.tsx

@@ -23,6 +23,7 @@ import {
   SaveIcon,
   SendToBackIcon,
   Trash2Icon,
+  TriangleAlertIcon,
   TypeIcon,
   Undo2Icon,
   UnlockIcon,
@@ -98,6 +99,7 @@ import {
   questionPrompt,
 } from "#/domain/layout-question-palette.ts"
 import { addElement, PAGE_SPEC } from "#/domain/layout.ts"
+import { photoSlotMismatches } from "#/domain/photo-assignment.ts"
 import { enforceMinimumTextBoxHeight } from "#/domain/text-layout.ts"
 import {
   type FormQuestion,
@@ -833,6 +835,12 @@ function Editor({
 
   const selected = schema.elements.find((element) => element.id === selectedId)
   const questionPalette = layoutQuestionPalette(project.formSchema.questions)
+  const slotMismatches = new Map(
+    photoSlotMismatches(schema.elements, project.formSchema.questions).map((mismatch) => [
+      mismatch.questionId,
+      mismatch,
+    ])
+  )
 
   const add = (
     type: LayoutElement["type"],
@@ -1040,34 +1048,46 @@ function Editor({
         <Card className="mb-4 bg-card/90">
           <CardContent className="flex flex-col gap-3">
             <div className="grid gap-2 sm:grid-cols-2">
-              {questionPalette.map((item) => (
-                <div
-                  key={item.questionId}
-                  className="flex min-w-0 items-center justify-between gap-2 rounded-lg border bg-background/70 p-2"
-                >
-                  <span className="min-w-0 truncate text-sm font-medium" title={item.prompt}>
-                    {item.prompt}
-                  </span>
-                  <div className="flex shrink-0 flex-wrap justify-end gap-1">
-                    {item.actions.map((action) => (
-                      <PaletteAction
-                        key={action.elementType}
-                        label={action.label}
-                        addLabel={`Add ${action.label.toLowerCase()} for ${item.prompt}`}
-                        icon={
-                          action.elementType === "bound-text"
-                            ? TypeIcon
-                            : action.elementType === "image-frame"
-                              ? ImageIcon
-                              : GalleryHorizontalIcon
-                        }
-                        dragData={{ type: action.elementType, questionId: item.questionId }}
-                        onAdd={() => add(action.elementType, item.questionId)}
-                      />
-                    ))}
+              {questionPalette.map((item) => {
+                const mismatch = slotMismatches.get(item.questionId)
+                return (
+                  <div
+                    key={item.questionId}
+                    className="flex min-w-0 items-center justify-between gap-2 rounded-lg border bg-background/70 p-2"
+                  >
+                    <span className="flex min-w-0 flex-col">
+                      <span className="min-w-0 truncate text-sm font-medium" title={item.prompt}>
+                        {item.prompt}
+                      </span>
+                      {mismatch && (
+                        <span className="flex items-center gap-1 text-xs text-destructive">
+                          <TriangleAlertIcon aria-hidden="true" className="size-3 shrink-0" />
+                          {mismatch.slotCount} photo slot{mismatch.slotCount === 1 ? "" : "s"} for
+                          up to {mismatch.maxImages} upload{mismatch.maxImages === 1 ? "" : "s"}
+                        </span>
+                      )}
+                    </span>
+                    <div className="flex shrink-0 flex-wrap justify-end gap-1">
+                      {item.actions.map((action) => (
+                        <PaletteAction
+                          key={action.elementType}
+                          label={action.label}
+                          addLabel={`Add ${action.label.toLowerCase()} for ${item.prompt}`}
+                          icon={
+                            action.elementType === "bound-text"
+                              ? TypeIcon
+                              : action.elementType === "image-frame"
+                                ? ImageIcon
+                                : GalleryHorizontalIcon
+                          }
+                          dragData={{ type: action.elementType, questionId: item.questionId }}
+                          onAdd={() => add(action.elementType, item.questionId)}
+                        />
+                      ))}
+                    </div>
                   </div>
-                </div>
-              ))}
+                )
+              })}
             </div>
             <Separator />
             <div className="flex flex-wrap items-center gap-1.5">

src/components/layout-page.test.tsx

@@ -2,6 +2,7 @@ import { renderToStaticMarkup } from "react-dom/server"
 import { describe, expect, it } from "vitest"
 
 import { addElement, emptyLayoutSchema } from "#/domain/layout.ts"
+import { type ImageAnswer, type SubmissionSummary } from "#/domain/types.ts"
 
 import { LayoutPageElements } from "./layout-page.tsx"
 
@@ -69,3 +70,55 @@ describe("selected element rendering", () => {
     expect(preview).toContain("outline:2px solid var(--destructive)")
   })
 })
+
+describe("photo distribution in the preview", () => {
+  function photo(assetId: string): ImageAnswer {
+    return {
+      assetId,
+      name: `${assetId}.jpg`,
+      mimeType: "image/jpeg",
+      width: 3000,
+      height: 2000,
+      sizeBytes: 1_000,
+      previewUrl: `/preview/${assetId}.jpg`,
+    }
+  }
+
+  const submission: SubmissionSummary = {
+    id: "submission",
+    sequence: 1,
+    submittedAt: "2026-07-18T00:00:00.000Z",
+    answers: { photos: [photo("first"), photo("second")] },
+  }
+
+  it("renders a different photo in each frame bound to one question", () => {
+    let schema = addElement(emptyLayoutSchema(), "image-frame", "photos")
+    schema = addElement(schema, "image-frame", "photos")
+    schema.elements[0]!.geometry = { x: 10, y: 10, width: 40, height: 30, rotation: 0 }
+    schema.elements[1]!.geometry = { x: 10, y: 60, width: 40, height: 30, rotation: 0 }
+
+    const markup = renderToStaticMarkup(
+      <LayoutPageElements schema={schema} content={{ submission }} />
+    )
+
+    expect(markup).toContain(`src="/preview/first.jpg"`)
+    expect(markup).toContain(`src="/preview/second.jpg"`)
+    expect(markup.indexOf("/preview/first.jpg")).toBeLessThan(markup.indexOf("/preview/second.jpg"))
+  })
+
+  it("leaves a frame empty once the uploaded photos run out", () => {
+    let schema = addElement(emptyLayoutSchema(), "image-frame", "photos")
+    schema = addElement(schema, "image-frame", "photos")
+    schema = addElement(schema, "image-frame", "photos")
+    schema.elements.forEach((element, index) => {
+      element.geometry = { x: 10, y: 10 + index * 40, width: 40, height: 30, rotation: 0 }
+    })
+
+    const markup = renderToStaticMarkup(
+      <LayoutPageElements schema={schema} content={{ submission }} />
+    )
+
+    expect(markup.match(/<img/g)).toHaveLength(2)
+    expect(markup).toContain("border-dashed")
+  })
+})

src/components/layout-page.tsx

@@ -1,6 +1,13 @@
+import { useMemo } from "react"
+
 import { gallerySlots } from "#/domain/layout.ts"
 import { boundTextLabel } from "#/domain/layout-label.ts"
 import { boundQuestionPlaceholder } from "#/domain/layout-question-palette.ts"
+import {
+  assignPhotosToFrames,
+  framePhotos,
+  type PhotoAssignment,
+} from "#/domain/photo-assignment.ts"
 import {
   canonicalToPercentageGeometry,
   millimetresToContainerWidth,
@@ -12,7 +19,6 @@ import {
   type ImageAnswer,
   type LayoutElement,
   type LayoutSchema,
-  type SubmissionAnswer,
   type SubmissionSummary,
 } from "#/domain/types.ts"
 
@@ -23,13 +29,6 @@ export interface LayoutPageContent {
   decorativePlaceholderUrl?: string
 }
 
-function answerImages(answer: SubmissionAnswer | undefined): ImageAnswer[] {
-  if (!Array.isArray(answer)) return []
-  return answer.filter(
-    (item): item is ImageAnswer => typeof item === "object" && item !== null && "assetId" in item
-  )
-}
-
 function elementStyle(element: LayoutElement): React.CSSProperties {
   const geometry = canonicalToPercentageGeometry(element.geometry)
   return {
@@ -76,12 +75,14 @@ function imagePosition(
 function ElementContent({
   element,
   content,
+  photoAssignment,
   showEditorPlaceholders,
   editingElementId,
   selectedElementId,
 }: {
   element: LayoutElement
   content: LayoutPageContent
+  photoAssignment: PhotoAssignment
   showEditorPlaceholders: boolean
   editingElementId?: string
   selectedElementId?: string
@@ -234,7 +235,7 @@ function ElementContent({
   }
 
   if (element.type !== "image-frame" && element.type !== "gallery-frame") return null
-  const images = answerImages(content.submission?.answers[element.questionId])
+  const images = framePhotos(photoAssignment, element.id)
   if (element.type === "image-frame") {
     const image = images[0]
     return (
@@ -323,6 +324,10 @@ export function LayoutPageElements({
   editingElementId?: string
   selectedElementId?: string
 }) {
+  const photoAssignment = useMemo(
+    () => assignPhotosToFrames(schema.elements, content.submission?.answers ?? {}),
+    [schema.elements, content.submission]
+  )
   return (
     <div
       className="pointer-events-none absolute inset-0"
@@ -334,6 +339,7 @@ export function LayoutPageElements({
           key={element.id}
           element={element}
           content={content}
+          photoAssignment={photoAssignment}
           showEditorPlaceholders={showEditorPlaceholders}
           editingElementId={editingElementId}
           selectedElementId={selectedElementId}

src/domain/book.ts

@@ -7,6 +7,7 @@ const problemSchema = z.object({
     z.literal("image-low-resolution"),
     z.literal("image-blocking-resolution"),
     z.literal("unsupported-asset"),
+    z.literal("photo-slot-mismatch"),
     z.literal("gallery-overflow"),
     z.literal("outside-print-area"),
     z.literal("missing-required-answer"),