From 31d886ca273be05cec841d5d263ec0d38b80e505 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Mon, 14 Sep 2026 01:12:26 +0300
Subject: [PATCH] fix: preserve replacement documents after demo preparation

---
 src/app/demo/document.ts                |  1 +
 tests/e2e/canvas/demo-workspace.spec.ts | 16 ++++++++++++
 tests/helpers/canvas/demo-startup.ts    | 34 +++++++++++++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 tests/helpers/canvas/demo-startup.ts

diff --git a/src/app/demo/document.ts b/src/app/demo/document.ts
index 0ae092ca6..3a6aa94f8 100644
--- a/src/app/demo/document.ts
+++ b/src/app/demo/document.ts
@@ -46,6 +46,7 @@ export async function createDemoShapes(store: EditorStore) {
     graph.getPages().map((page) => page.id)
   )
   await store.switchPage(announcements.id)
+  if (store.graph !== graph) return
   store.clearSelection()
   store.zoomToFit()
   store.requestRender()
diff --git a/tests/e2e/canvas/demo-workspace.spec.ts b/tests/e2e/canvas/demo-workspace.spec.ts
index 216c35060..c49d0b907 100644
--- a/tests/e2e/canvas/demo-workspace.spec.ts
+++ b/tests/e2e/canvas/demo-workspace.spec.ts
@@ -1,6 +1,7 @@
 import { expect, test, type Page } from '@playwright/test'
 
 import { CanvasHelper } from '#tests/helpers/canvas'
+import type * as DemoStartup from '#tests/helpers/canvas/demo-startup'
 import { waitForDemo } from '#tests/helpers/demo'
 
 async function openDemo(page: Page) {
@@ -47,6 +48,21 @@ for (const [name, snapshot] of [
   })
 }
 
+test('demo completion preserves a document replaced during its final page switch', async ({ page }) => {
+  await page.goto('/?test&no-chrome&no-rulers')
+  const canvas = new CanvasHelper(page)
+  await canvas.waitForInit()
+  const result = await page.evaluate(async () => {
+    const store = window.openPencil?.getStore?.()
+    if (!store) throw new Error('Editor unavailable')
+    const fixtureURL = '/tests/helpers/canvas/demo-startup.ts'
+    const { replaceGraphDuringDemoSwitch }: typeof DemoStartup = await import(fixtureURL)
+    return replaceGraphDuringDemoSwitch(store)
+  })
+  expect(result.actual).toEqual(result.expected)
+  canvas.assertNoErrors()
+})
+
 test('demo tokens and main-component edits survive undo', async ({ page }) => {
   await openDemo(page)
   const result = await page.evaluate(async () => {
diff --git a/tests/helpers/canvas/demo-startup.ts b/tests/helpers/canvas/demo-startup.ts
new file mode 100644
index 000000000..28d4e80ee
--- /dev/null
+++ b/tests/helpers/canvas/demo-startup.ts
@@ -0,0 +1,34 @@
+import { SceneGraph } from '@open-pencil/scene-graph'
+
+import { createDemoShapes } from '@/app/demo/document'
+import type { EditorStore } from '@/app/editor/session'
+
+export async function replaceGraphDuringDemoSwitch(store: EditorStore) {
+  const switchPage = store.switchPage
+  const snapshot = () => ({
+    selectedIds: [...store.state.selectedIds],
+    zoom: store.state.zoom,
+    panX: store.state.panX,
+    panY: store.state.panY
+  })
+  let expected: ReturnType<typeof snapshot> | undefined
+  store.switchPage = async (...args) => {
+    const result = await switchPage(...args)
+    const replacement = new SceneGraph()
+    const page = replacement.addPage('Replacement document')
+    const node = replacement.createNode('RECTANGLE', page.id, { width: 100, height: 100 })
+    store.replaceGraph(replacement)
+    await switchPage(page.id)
+    store.select([node.id])
+    store.zoomToLevel(0.75)
+    expected = snapshot()
+    return result
+  }
+  try {
+    await createDemoShapes(store)
+    if (!expected) throw new Error('Demo did not reach its final page switch')
+    return { expected, actual: snapshot() }
+  } finally {
+    store.switchPage = switchPage
+  }
+}