fix: preserve replacement documents after demo preparation

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()

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 () => {

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
+  }
+}