@dfosco/storyboard-react 4.0.0-beta.14 → 4.0.0-beta.16

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.14",
+  "version": "4.0.0-beta.16",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "4.0.0-beta.14",
-    "@dfosco/tiny-canvas": "4.0.0-beta.14",
+    "@dfosco/storyboard-core": "4.0.0-beta.16",
+    "@dfosco/tiny-canvas": "4.0.0-beta.16",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",

package/src/canvas/CanvasControls.jsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { getMenuWidgetTypes } from './widgets/widgetConfig.js'
+import { listStories, getStoryData } from '@dfosco/storyboard-core'
 import styles from './CanvasControls.module.css'
 
 const WIDGET_TYPES = getMenuWidgetTypes()
@@ -9,6 +10,7 @@ const WIDGET_TYPES = getMenuWidgetTypes()
  */
 export default function CanvasControls({ onAddWidget }) {
   const [menuOpen, setMenuOpen] = useState(false)
+  const [storyPicker, setStoryPicker] = useState(false)
   const menuRef = useRef(null)
 
   // Close menu on outside click
@@ -17,6 +19,7 @@ export default function CanvasControls({ onAddWidget }) {
     function handlePointerDown(e) {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
         setMenuOpen(false)
+        setStoryPicker(false)
       }
     }
     document.addEventListener('pointerdown', handlePointerDown)
@@ -26,14 +29,23 @@ export default function CanvasControls({ onAddWidget }) {
   const handleAddWidget = useCallback((type) => {
     onAddWidget(type)
     setMenuOpen(false)
+    setStoryPicker(false)
   }, [onAddWidget])
 
+  const handleAddStory = useCallback((storyId) => {
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:add-story-widget', { detail: { storyId } }))
+    setMenuOpen(false)
+    setStoryPicker(false)
+  }, [])
+
+  const storyNames = storyPicker ? listStories() : []
+
   return (
     <div className={styles.toolbar} role="toolbar" aria-label="Canvas controls">
       <div ref={menuRef} className={styles.createGroup}>
         <button
           className={styles.btn}
-          onClick={() => setMenuOpen((v) => !v)}
+          onClick={() => { setMenuOpen((v) => !v); setStoryPicker(false) }}
           aria-label="Add widget"
           aria-expanded={menuOpen}
           title="Add widget"
@@ -42,7 +54,7 @@ export default function CanvasControls({ onAddWidget }) {
             <path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z" />
           </svg>
         </button>
-        {menuOpen && (
+        {menuOpen && !storyPicker && (
           <div className={styles.menu} role="menu">
             <div className={styles.menuLabel}>Add to canvas</div>
             {WIDGET_TYPES.map((wt) => (
@@ -55,6 +67,43 @@ export default function CanvasControls({ onAddWidget }) {
                 {wt.label}
               </button>
             ))}
+            <div className={styles.menuDivider} />
+            <button
+              className={styles.menuItem}
+              role="menuitem"
+              onClick={() => setStoryPicker(true)}
+            >
+              📖 Component
+            </button>
+          </div>
+        )}
+        {menuOpen && storyPicker && (
+          <div className={styles.menu} role="menu">
+            <div className={styles.menuLabel}>
+              <button
+                className={styles.backBtn}
+                onClick={() => setStoryPicker(false)}
+                aria-label="Back"
+              >←</button>
+              Select component
+            </div>
+            {storyNames.length === 0 && (
+              <div className={styles.menuEmpty}>No stories found</div>
+            )}
+            {storyNames.map((name) => {
+              const story = getStoryData(name)
+              return (
+                <button
+                  key={name}
+                  className={styles.menuItem}
+                  role="menuitem"
+                  onClick={() => handleAddStory(name)}
+                >
+                  {name}
+                  {story?._route && <span className={styles.menuHint}>{story._route}</span>}
+                </button>
+              )
+            })}
           </div>
         )}
       </div>

package/src/canvas/CanvasControls.module.css

@@ -102,3 +102,34 @@
 .menuItem:hover {
   background: var(--bgColor-muted, #f6f8fa);
 }
+
+.menuDivider {
+  height: 1px;
+  margin: 4px 8px;
+  background: var(--borderColor-muted, rgba(0, 0, 0, 0.1));
+}
+
+.menuHint {
+  font-size: 11px;
+  color: var(--fgColor-muted, #656d76);
+  margin-left: 8px;
+}
+
+.menuEmpty {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+  font-style: italic;
+}
+
+.backBtn {
+  all: unset;
+  cursor: pointer;
+  margin-right: 4px;
+  font-size: 13px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.backBtn:hover {
+  color: var(--fgColor-default, #1f2328);
+}

package/src/canvas/CanvasPage.jsx

@@ -8,11 +8,14 @@ import { getCanvasThemeVars, getCanvasPrimerAttrs } from './canvasTheme.js'
 import { getWidgetComponent } from './widgets/index.js'
 import { schemas, getDefaults } from './widgets/widgetProps.js'
 import { getFeatures, isResizable } from './widgets/widgetConfig.js'
-import { isFigmaUrl, sanitizeFigmaUrl } from './widgets/figmaUrl.js'
+import { createPasteContext, resolvePaste } from './widgets/pasteRules.js'
+import { getPasteRules } from '@dfosco/storyboard-core'
 import WidgetChrome from './widgets/WidgetChrome.jsx'
 import ComponentWidget from './widgets/ComponentWidget.jsx'
 import useUndoRedo from './useUndoRedo.js'
 import { addWidget as addWidgetApi, updateCanvas, removeWidget as removeWidgetApi, uploadImage, getCanvas as getCanvasApi } from './canvasApi.js'
+import PageSelector from './PageSelector.jsx'
+import { stories as storyIndex } from 'virtual:storyboard-data-index'
 import styles from './CanvasPage.module.css'
 
 const ZOOM_MIN = 25
@@ -23,6 +26,14 @@ const CANVAS_BRIDGE_STATE_KEY = '__storyboardCanvasBridgeState'
 /** Matches branch-deploy base path prefixes like /branch--my-feature/ */
 const BRANCH_PREFIX_RE = /^\/branch--[^/]+/
 
+// Build a reverse map from story route paths → { storyId, route }
+const storyRouteIndex = new Map()
+for (const [storyId, data] of Object.entries(storyIndex || {})) {
+  if (data?._route) {
+    storyRouteIndex.set(data._route.replace(/\/+$/, ''), storyId)
+  }
+}
+
 function getToolbarColorMode(theme) {
   return String(theme || 'light').startsWith('dark') ? 'dark' : 'light'
 }
@@ -265,6 +276,9 @@ function ChromeWrappedWidget({
       onRemove?.(widget.id)
     } else if (actionId === 'copy') {
       onCopy?.(widget)
+    } else if (actionId === 'copy-text') {
+      const text = widget.props?.text || widget.props?.content || ''
+      navigator.clipboard?.writeText(text).catch(() => {})
     }
   }, [widget, onRemove, onCopy])
 
@@ -298,7 +312,7 @@ function ChromeWrappedWidget({
  *
  * @param {{ name: string }} props - Canvas name as indexed by the data plugin
  */
-export default function CanvasPage({ name }) {
+export default function CanvasPage({ name, siblingPages = [], canvasMeta = null }) {
   const { canvas, jsxExports, jsxError, loading } = useCanvas(name)
   const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true && !new URLSearchParams(window.location.search).has('prodMode')
 
@@ -311,8 +325,10 @@ export default function CanvasPage({ name }) {
   const zoomRef = useRef(initialViewport?.zoom ?? 100)
   const scrollRef = useRef(null)
   const pendingScrollRestore = useRef(initialViewport)
-  const [canvasTitle, setCanvasTitle] = useState(canvas?.title || name)
-  const titleInputRef = useRef(null)
+  // Gate viewport persistence until initial positioning is complete (restore,
+  // ?widget= deep-link, or first visit). Prevents early save effects from
+  // overwriting the saved scroll position with 0,0.
+  const viewportInitDone = useRef(false)
   const [localSources, setLocalSources] = useState(canvas?.sources ?? [])
   const [canvasTheme, setCanvasTheme] = useState(() => resolveCanvasThemeFromStorage())
   const [snapEnabled, setSnapEnabled] = useState(canvas?.snapToGrid ?? false)
@@ -449,10 +465,13 @@ export default function CanvasPage({ name }) {
     setTrackedCanvas(canvas)
     setLocalWidgets(canvas?.widgets ?? null)
     setLocalSources(canvas?.sources ?? [])
-    setCanvasTitle(canvas?.title || name)
     setSnapEnabled(canvas?.snapToGrid ?? false)
     setSnapGridSize(canvas?.gridSize || 40)
     undoRedo.reset()
+    // Reset viewport init gate so save effects don't persist stale positions
+    // while the new canvas's viewport is being restored.
+    viewportInitDone.current = false
+    pendingScrollRestore.current = loadViewportState(name)
   }
 
   // Debounced save to server
@@ -464,27 +483,6 @@ export default function CanvasPage({ name }) {
     }, 2000)
   ).current
 
-  const debouncedTitleSave = useRef(
-    debounce((canvasName, title) => {
-      updateCanvas(canvasName, { settings: { title } }).catch((err) =>
-        console.error('[canvas] Failed to save title:', err)
-      )
-    }, 1000)
-  ).current
-
-  const handleTitleChange = useCallback((e) => {
-    const newTitle = e.target.value
-    setCanvasTitle(newTitle)
-    debouncedTitleSave(name, newTitle)
-  }, [name, debouncedTitleSave])
-
-  const handleTitleKeyDown = useCallback((e) => {
-    if (e.key === 'Enter') {
-      e.target.blur()
-    }
-    e.stopPropagation()
-  }, [])
-
   const handleWidgetUpdate = useCallback((widgetId, updates) => {
     undoRedo.snapshot(stateRef.current, 'edit', widgetId)
     // Snap width/height to grid when snap is enabled
@@ -697,12 +695,18 @@ export default function CanvasPage({ name }) {
   // Restore scroll position from localStorage after first render
   useEffect(() => {
     const el = scrollRef.current
+    if (!el || loading) return
     const saved = pendingScrollRestore.current
-    if (el && saved) {
+    if (saved) {
       if (saved.scrollLeft != null) el.scrollLeft = saved.scrollLeft
       if (saved.scrollTop != null) el.scrollTop = saved.scrollTop
       pendingScrollRestore.current = null
     }
+    // Mark viewport init complete so save effects can start persisting.
+    // This covers: restored saved position, first visit (no saved state),
+    // and name changes. The ?widget= effect below may override position
+    // and that's fine — it runs after this in the same commit.
+    viewportInitDone.current = true
   }, [name, loading])
 
   // Center on a specific widget if `?widget=<id>` is in the URL
@@ -754,6 +758,7 @@ export default function CanvasPage({ name }) {
 
   // Persist viewport state (zoom + scroll) to localStorage on changes
   useEffect(() => {
+    if (!viewportInitDone.current) return
     const el = scrollRef.current
     saveViewportState(name, {
       zoom,
@@ -766,6 +771,7 @@ export default function CanvasPage({ name }) {
     const el = scrollRef.current
     if (!el) return
     function handleScroll() {
+      if (!viewportInitDone.current) return
       saveViewportState(name, {
         zoom: zoomRef.current,
         scrollLeft: el.scrollLeft,
@@ -776,6 +782,7 @@ export default function CanvasPage({ name }) {
 
     // Flush viewport state on page unload so a refresh never misses it
     function handleBeforeUnload() {
+      if (!viewportInitDone.current) return
       saveViewportState(name, {
         zoom: zoomRef.current,
         scrollLeft: el.scrollLeft,
@@ -888,14 +895,41 @@ export default function CanvasPage({ name }) {
     }
   }, [name, undoRedo])
 
+  // Add a story widget by storyId — used by CanvasControls story picker
+  const addStoryWidget = useCallback(async (storyId) => {
+    const storyProps = { storyId, exportName: '', width: 600, height: 400 }
+    const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
+    const pos = centerPositionForWidget(center, 'story', storyProps)
+    try {
+      const result = await addWidgetApi(name, {
+        type: 'story',
+        props: storyProps,
+        position: pos,
+      })
+      if (result.success && result.widget) {
+        undoRedo.snapshot(stateRef.current, 'add')
+        setLocalWidgets((prev) => [...(prev || []), result.widget])
+      }
+    } catch (err) {
+      console.error('[canvas] Failed to add story widget:', err)
+    }
+  }, [name, undoRedo])
+
   // Listen for CoreUIBar add-widget events
   useEffect(() => {
     function handleAddWidget(e) {
       addWidget(e.detail.type)
     }
+    function handleAddStoryWidget(e) {
+      addStoryWidget(e.detail.storyId)
+    }
     document.addEventListener('storyboard:canvas:add-widget', handleAddWidget)
-    return () => document.removeEventListener('storyboard:canvas:add-widget', handleAddWidget)
-  }, [addWidget])
+    document.addEventListener('storyboard:canvas:add-story-widget', handleAddStoryWidget)
+    return () => {
+      document.removeEventListener('storyboard:canvas:add-widget', handleAddWidget)
+      document.removeEventListener('storyboard:canvas:add-story-widget', handleAddStoryWidget)
+    }
+  }, [addWidget, addStoryWidget])
 
   // Listen for zoom changes from CoreUIBar
   useEffect(() => {
@@ -1030,12 +1064,12 @@ export default function CanvasPage({ name }) {
         setSelectedWidgetIds(new Set())
       }
       // Copy shortcut (single widget selected):
-      // cmd+c → copy canvasName/widgetId (for cross-canvas paste-duplicate)
+      // cmd+c → copy canvasName::widgetId (for cross-canvas paste-duplicate)
       const mod = e.metaKey || e.ctrlKey
       if (mod && e.key === 'c' && !e.shiftKey && selectedWidgetIds.size === 1) {
         const widgetId = [...selectedWidgetIds][0]
         e.preventDefault()
-        navigator.clipboard.writeText(`${name}/${widgetId}`).catch(() => {})
+        navigator.clipboard.writeText(`${name}::${widgetId}`).catch(() => {})
       }
       if (e.key === 'Delete' || e.key === 'Backspace') {
         e.preventDefault()
@@ -1072,43 +1106,7 @@ export default function CanvasPage({ name }) {
   useEffect(() => {
     const origin = window.location.origin
     const basePath = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
-    const baseUrl = origin + basePath
-
-    // Check if a URL is same-origin, accounting for branch-deploy prefixes.
-    // e.g. https://site.com/branch--my-feature/Proto and https://site.com/storyboard/Proto
-    // are both same-origin prototype URLs.
-    function isSameOriginPrototype(url) {
-      if (!url.startsWith(origin)) return false
-      if (url.startsWith(baseUrl)) return true
-      // Match branch deploy URLs: origin + /branch--*/...
-      const pathAfterOrigin = url.slice(origin.length)
-      return BRANCH_PREFIX_RE.test(pathAfterOrigin)
-    }
-
-    // Strip the base path (or any branch prefix) from a pathname to get a portable src.
-    function extractPrototypeSrc(pathname) {
-      // Strip current base path
-      if (basePath && pathname.startsWith(basePath)) {
-        return pathname.slice(basePath.length) || '/'
-      }
-      // Strip branch prefix: /branch--name/rest → /rest
-      const branchMatch = pathname.match(BRANCH_PREFIX_RE)
-      if (branchMatch) {
-        return pathname.slice(branchMatch[0].length) || '/'
-      }
-      return pathname
-    }
-
-    /** Parse text as a web URL (http/https only). Returns URL object or null. */
-    function looksLikeWebUrl(text) {
-      try {
-        const url = new URL(text)
-        if (url.protocol === 'http:' || url.protocol === 'https:') return url
-        return null
-      } catch {
-        return null
-      }
-    }
+    const pasteCtx = createPasteContext(origin, basePath)
 
     function blobToDataUrl(blob) {
       return new Promise((resolve, reject) => {
@@ -1209,11 +1207,12 @@ export default function CanvasPage({ name }) {
       const text = e.clipboardData?.getData('text/plain')?.trim()
       if (!text) return
 
-      e.preventDefault()
-
-      // Detect canvasName/widgetId format for widget duplication (cross-canvas copy-paste)
-      const widgetRefMatch = text.match(/^([^/]+)\/([^/]+)$/)
+      // Detect canvasName::widgetId format for widget duplication (cross-canvas copy-paste)
+      // Also supports legacy canvasName/widgetId for basenames without slashes,
+      // but only when the second segment looks like a widget ID (type-hash).
+      const widgetRefMatch = text.match(/^(.+)::([^:]+)$/) || (text.indexOf('::') === -1 && text.match(/^([^/]+)\/((?:sticky-note|markdown|prototype|link-preview|figma-embed|component|image)-[a-z0-9]+)$/))
       if (widgetRefMatch) {
+        e.preventDefault()
         const [, sourceCanvas, sourceWidgetId] = widgetRefMatch
         // Component widgets are code, not duplicable data — silently consume the ref
         if (sourceWidgetId.startsWith('jsx-')) return
@@ -1245,25 +1244,10 @@ export default function CanvasPage({ name }) {
         return
       }
 
-      let type, props
-      const url = looksLikeWebUrl(text)
-      if (url) {
-        if (isFigmaUrl(text)) {
-          type = 'figma-embed'
-          props = { url: sanitizeFigmaUrl(text), width: 800, height: 450 }
-        } else if (isSameOriginPrototype(text)) {
-          const pathPortion = url.pathname + url.search + url.hash
-          const src = extractPrototypeSrc(pathPortion)
-          type = 'prototype'
-          props = { src: src || '/', originalSrc: src || '/', label: '', width: 800, height: 600 }
-        } else {
-          type = 'link-preview'
-          props = { url: text, title: '' }
-        }
-      } else {
-        type = 'markdown'
-        props = { content: text }
-      }
+      e.preventDefault()
+      const resolved = resolvePaste(text, pasteCtx, getPasteRules())
+      if (!resolved) return
+      const { type, props } = resolved
 
       const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
       const pos = centerPositionForWidget(center, type, props)
@@ -1616,24 +1600,8 @@ export default function CanvasPage({ name }) {
   return (
     <>
       <div className={styles.canvasTitle}>
-        <div className={styles.canvasTitleWrap}>
-          <span className={styles.canvasTitleMeasure} aria-hidden="true">{canvasTitle || ' '}</span>
-          {isLocalDev ? (
-            <input
-              ref={titleInputRef}
-              className={styles.canvasTitleInput}
-              value={canvasTitle}
-              size={1}
-              onChange={handleTitleChange}
-              onKeyDown={handleTitleKeyDown}
-              onMouseDown={(e) => e.stopPropagation()}
-              spellCheck={false}
-              aria-label="Canvas title"
-            />
-          ) : (
-            <h1 className={styles.canvasTitleStatic}>{canvasTitle}</h1>
-          )}
-        </div>
+        <h1 className={styles.canvasTitleStatic}>{canvasMeta?.title || canvas?.title || name.split('/').pop()}</h1>
+        <PageSelector currentName={name} pages={siblingPages} />
         {isLocalDev && (
           <span className={styles.localEditingLabel}>Local editing</span>
         )}

package/src/canvas/CanvasPage.module.css

@@ -44,58 +44,14 @@
   gap: 8px;
 }
 
-.canvasTitleWrap {
-  display: inline-grid;
-}
-
-.canvasTitleWrap > * {
-  grid-area: 1 / 1;
-}
-
-.canvasTitleMeasure {
-  visibility: hidden;
-  white-space: pre;
-  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
-  font-size: 14px;
-  font-weight: 600;
-  padding: 4px 8px;
-  border: 1px solid transparent;
-  min-width: 80px;
-  pointer-events: none;
-}
-
-.canvasTitleInput {
+.canvasTitleStatic {
   font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
   font-size: 14px;
   font-weight: 600;
   color: var(--fgColor-muted, #656d76);
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  padding: 4px 8px;
   margin: 0;
-  outline: none;
-  width: 100%;
-  min-width: 0;
-  transition: border-color 150ms, background-color 150ms, color 150ms;
-}
-
-.canvasTitleInput:hover {
-  color: var(--fgColor-default, #1f2328);
-  border-color: var(--borderColor-default, #d1d9e0);
-  background: var(--bgColor-default, #ffffff);
-}
-
-.canvasTitleInput:focus {
-  color: var(--fgColor-default, #1f2328);
-  border-color: var(--bgColor-accent-emphasis, #2f81f7);
-  background: var(--bgColor-default, #ffffff);
-}
-
-.canvasTitleStatic {
-  composes: canvasTitleInput;
-  cursor: default;
-  pointer-events: none;
+  padding: 4px 8px;
+  white-space: nowrap;
 }
 
 /* Remove tiny-canvas wrapper clipping — widgets handle their own overflow/radius */

package/src/canvas/PageSelector.jsx

@@ -0,0 +1,102 @@
+import { useCallback, useRef, useState, useEffect } from 'react'
+import styles from './PageSelector.module.css'
+
+/**
+ * In-canvas page selector — shows sibling pages in the same canvas group.
+ * Only renders when 2+ sibling pages exist.
+ * Uses window.location for navigation to avoid requiring a Router context.
+ *
+ * @param {{ currentName: string, pages: Array<{ name: string, route: string, title: string }> }} props
+ */
+export default function PageSelector({ currentName, pages }) {
+  const [open, setOpen] = useState(false)
+  const containerRef = useRef(null)
+
+  const currentPage = pages.find((p) => p.name === currentName)
+  const currentLabel = currentPage?.title || currentName.split('/').pop()
+  const currentIndex = pages.findIndex((p) => p.name === currentName)
+
+  const handleSelect = useCallback(
+    (page) => {
+      if (page.name !== currentName) {
+        const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+        window.location.href = base + page.route
+      }
+      setOpen(false)
+    },
+    [currentName],
+  )
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return
+    function handleClick(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [open])
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return
+    function handleKey(e) {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [open])
+
+  if (!pages || pages.length < 2) return null
+
+  return (
+    <nav ref={containerRef} className={styles.container} aria-label="Canvas pages">
+      <button
+        className={styles.trigger}
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        title="Switch canvas page"
+      >
+        <span className={styles.label}>{currentLabel}</span>
+        <span className={styles.badge}>
+          {currentIndex + 1}/{pages.length}
+        </span>
+        <svg
+          className={`${styles.chevron} ${open ? styles.chevronOpen : ''}`}
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+      {open && (
+        <ul className={styles.menu} role="listbox" aria-label="Canvas pages">
+          {pages.map((page) => (
+            <li
+              key={page.name}
+              role="option"
+              aria-selected={page.name === currentName}
+              className={`${styles.item} ${page.name === currentName ? styles.itemActive : ''}`}
+              onClick={() => handleSelect(page)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  handleSelect(page)
+                }
+              }}
+              tabIndex={0}
+            >
+              {page.title}
+            </li>
+          ))}
+        </ul>
+      )}
+    </nav>
+  )
+}