feat: add multi-page support to design documents

[I-am-abdulazeez]

What this PR does

Adds multi-page support to Avnac design documents. Previously, each document had a single flat canvas. This PR introduces a pages array to the document model, a new page management UI, and wires the entire editor to operate on whichever page is currently active.

A short demo of the feature in action:

20260429-1432-40.6833573.mp4

Changes

Data model (avnac-scene.ts, avnac-document.ts)

• Introduced AvnacPage type — each page holds its own artboard, bg, and objects
• Bumped AVNAC_DOC_VERSION from 2 → 3
• AvnacDocument now holds pages: AvnacPage[] instead of flat artboard/bg/objects
• Added createEmptyAvnacPage and cloneAvnacPage helpers
• Added migrateV2Document so any existing saved file is automatically upgraded — no data loss
• Updated parseAvnacDocument and getAvnacDocumentStorageKind to handle v3, v2, and legacy formats

Editor state (editor-store.tsx, use-scene-document-lifecycle.ts)

• Added activePageId: string and setActivePageId to the Zustand store
• Lifecycle hook initialises activePageId from pages[0] on document load

Editor wiring (scene-editor.tsx, canvas-stage.tsx, editor-selection-toolbar.tsx)

• Derived activePage from doc.pages + activePageId throughout the editor
• Added updateActivePage helper — all mutations to artboard, bg, and objects now go through the active page only
• Export renders the active page only

Layer controls (use-editor-layer-controls.ts)

• Fully rewritten to apply all layer reorder, rename, visibility, and lock operations to the active page

AI design controller (use-ai-design-controller.ts)

• Now receives AvnacPage instead of AvnacDocument, since it only ever operates on the current page

Render & preview (avnac-scene-render.ts, avnac-document-preview.ts)

• preloadFontsForDocument, renderAvnacDocumentToCanvas, and renderAvnacDocumentToDataUrl accept either AvnacDocument or AvnacPage via a discriminated union
• Document preview renders from pages[0]

Persistence (avnac-editor-idb.ts)

• idbListDocuments reads artboardWidth / artboardHeight from pages[0] for the file grid

Pages panel UI (editor-pages-panel.tsx — new file)

• Horizontal strip anchored to the bottom-left of the canvas
• Scrollable page list with overflow fade on both edges
• Left arrow button appears when there are multiple pages and scroll-back is possible
• Add button is always visible outside the scroll container (never scrolls away)
• Active page indicated with a neutral gray outline and shadow
• Double-click a page label to rename inline
• Right-click context menu: duplicate, rename, delete
• Drag-to-reorder pages
• Guard: last remaining page cannot be deleted

Route tree (routeTree.gen.ts)

• Regenerated after dependency install (TanStack Router codegen)

---

Testing

• Create a new document → should open with one page
• Add pages via the + button — panel scrolls, fade appears, left arrow appears
• Switch between pages — each page retains its own content independently
• Open an existing v2 document — should auto-migrate to v3 with content intact
• Undo/redo works across page edits
• Export exports the currently active page

---

Summary by cubic

Add multi-page support to design documents with a new v3 model (pages[]) and a Pages panel. The editor, export, and preview now target the active page.

• New Features

  • Added AvnacPage; AvnacDocument now has pages: AvnacPage[] with helpers createEmptyAvnacPage and cloneAvnacPage.
  • New Pages panel: add, duplicate, rename, delete (last-page guard), and drag-to-reorder; scrollable strip with fade edges and a left arrow.
  • Editor scoped to the active page: activePageId in store, mutations only update the active page; layers and selection toolbar read page artboard/bg.
  • Export and preview render the active page (preview uses pages[0]); font preload and render accept AvnacDocument | AvnacPage.
  • IDB list reads artboard size from pages[0] and guards invalid storage kind on writes.

• Migration

  • Bumped AVNAC_DOC_VERSION from 2 to 3; v2 and legacy files auto-migrate on open with no data loss.
  • API updates: use-ai-design-controller now takes AvnacPage; preloadFontsForDocument and render* accept AvnacDocument | AvnacPage.

^{Written for commit d08e67e. Summary will update on new commits. Review in cubic}

[vercel]

@I-am-abdulazeez is attempting to deploy a commit to the Akinkunmi Team on Vercel.

A member of the Team first needs to authorize it.