@dfosco/storyboard-react 4.0.0-beta.8 → 4.0.0

package/src/canvas/PageSelector.module.css

@@ -0,0 +1,165 @@
+.container {
+  position: relative;
+  font-size: 13px;
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 6px;
+  background: var(--bgColor-default, #fff);
+  color: var(--fgColor-default, #1f2328);
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: border-color 0.15s, box-shadow 0.15s;
+  line-height: 1;
+}
+
+.trigger:hover {
+  border-color: var(--borderColor-emphasis, rgba(0, 0, 0, 0.3));
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+}
+
+.label {
+  font-weight: 600;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge {
+  font-size: 11px;
+  color: var(--fgColor-muted, #656d76);
+  font-variant-numeric: tabular-nums;
+}
+
+.chevron {
+  color: var(--fgColor-muted, #656d76);
+  transition: transform 0.15s;
+  flex-shrink: 0;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 180px;
+  max-width: 300px;
+  max-height: 320px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  background: var(--bgColor-default, #fff);
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.item {
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.item:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.item:focus-visible {
+  outline: 2px solid var(--focus-outlineColor, #0969da);
+  outline-offset: -2px;
+}
+
+.itemActive {
+  font-weight: 600;
+  background: var(--bgColor-accent-muted, #ddf4ff);
+}
+
+.itemActive:hover {
+  background: var(--bgColor-accent-muted, #ddf4ff);
+}
+
+.separator {
+  height: 1px;
+  background: var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  margin: 4px 8px;
+  list-style: none;
+}
+
+.addItem {
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  color: var(--fgColor-muted, #656d76);
+  font-size: 12px;
+}
+
+.addItem:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+  color: var(--fgColor-default, #1f2328);
+}
+
+.addForm {
+  display: flex;
+  gap: 4px;
+  padding: 4px 6px;
+  list-style: none;
+}
+
+.addInput {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 8px;
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+}
+
+.addInput:focus {
+  border-color: var(--focus-outlineColor, #0969da);
+  box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.3);
+}
+
+.addSubmit {
+  padding: 4px 10px;
+  border: none;
+  border-radius: 4px;
+  background: var(--bgColor-accent-emphasis, #0969da);
+  color: #fff;
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.addSubmit:hover {
+  opacity: 0.9;
+}
+
+.addSubmit:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.successMsg {
+  padding: 4px 12px 6px;
+  font-size: 11px;
+  color: #1a7f37;
+  font-weight: 500;
+}

package/src/canvas/PageSelector.test.jsx

@@ -0,0 +1,104 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import PageSelector from './PageSelector.jsx'
+
+const PAGES = [
+  { name: 'research/interviews', route: '/canvas/research/interviews', title: 'Interviews' },
+  { name: 'research/surveys', route: '/canvas/research/surveys', title: 'Surveys' },
+  { name: 'research/analysis', route: '/canvas/research/analysis', title: 'Analysis' },
+]
+
+describe('PageSelector', () => {
+  beforeEach(() => {
+    // Reset location mock
+    delete window.location
+    window.location = { href: '' }
+  })
+
+  it('renders nothing when fewer than 2 pages', () => {
+    const { container } = render(<PageSelector currentName="solo" pages={[{ name: 'solo', route: '/canvas/solo', title: 'Solo' }]} />)
+    expect(container.innerHTML).toBe('')
+  })
+
+  it('renders nothing when pages is empty', () => {
+    const { container } = render(<PageSelector currentName="foo" pages={[]} />)
+    expect(container.innerHTML).toBe('')
+  })
+
+  it('shows current page label and page count', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    expect(screen.getByText('Interviews')).toBeTruthy()
+    expect(screen.getByText('1/3')).toBeTruthy()
+  })
+
+  it('shows correct index for non-first page', () => {
+    render(<PageSelector currentName="research/surveys" pages={PAGES} />)
+    expect(screen.getByText('Surveys')).toBeTruthy()
+    expect(screen.getByText('2/3')).toBeTruthy()
+  })
+
+  it('opens dropdown on click and shows all pages', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    const trigger = screen.getByTitle('Switch canvas page')
+    fireEvent.click(trigger)
+
+    const options = screen.getAllByRole('option')
+    expect(options).toHaveLength(3)
+    expect(options[0].textContent).toBe('Interviews')
+    expect(options[1].textContent).toBe('Surveys')
+    expect(options[2].textContent).toBe('Analysis')
+  })
+
+  it('marks the current page as active', () => {
+    render(<PageSelector currentName="research/surveys" pages={PAGES} />)
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+
+    const options = screen.getAllByRole('option')
+    expect(options[1].getAttribute('aria-selected')).toBe('true')
+    expect(options[0].getAttribute('aria-selected')).toBe('false')
+  })
+
+  it('navigates to selected page', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+    // Click the option in the menu (not the trigger label)
+    const options = screen.getAllByRole('option')
+    fireEvent.click(options[1]) // Surveys
+
+    expect(window.location.href).toContain('/canvas/research/surveys')
+  })
+
+  it('closes dropdown on Escape', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+    expect(screen.queryByRole('listbox')).toBeTruthy()
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(screen.queryByRole('listbox')).toBeNull()
+  })
+
+  it('closes dropdown on outside click', () => {
+    render(
+      <div>
+        <PageSelector currentName="research/interviews" pages={PAGES} />
+        <span data-testid="outside">Outside</span>
+      </div>
+    )
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+    expect(screen.queryByRole('listbox')).toBeTruthy()
+
+    fireEvent.mouseDown(screen.getByTestId('outside'))
+    expect(screen.queryByRole('listbox')).toBeNull()
+  })
+
+  it('does not navigate when selecting the current page', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+    // Click the current page option
+    const options = screen.getAllByRole('option')
+    fireEvent.click(options[0]) // Interviews (current)
+
+    // location.href was set to '' initially, should remain unchanged
+    expect(window.location.href).toBe('')
+  })
+})

package/src/canvas/canvasApi.js

@@ -28,22 +28,36 @@ export function createCanvas(data) {
   return request('/create', 'POST', data)
 }
 
-export function updateCanvas(name, { widgets, sources, settings }) {
-  return request('/update', 'PUT', { name, widgets, sources, settings })
+export function updateCanvas(canvasId, { widgets, sources, settings }) {
+  return request('/update', 'PUT', { name: canvasId, widgets, sources, settings })
 }
 
-export function addWidget(name, { type, props, position }) {
-  return request('/widget', 'POST', { name, type, props, position })
+export function addWidget(canvasId, { type, props, position }) {
+  return request('/widget', 'POST', { name: canvasId, type, props, position })
 }
 
-export function removeWidget(name, widgetId) {
-  return request('/widget', 'DELETE', { name, widgetId })
+export function removeWidget(canvasId, widgetId) {
+  return request('/widget', 'DELETE', { name: canvasId, widgetId })
 }
 
-export function uploadImage(dataUrl, canvasName) {
-  return request('/image', 'POST', { dataUrl, canvasName })
+export function uploadImage(dataUrl, canvasId, filename) {
+  const body = { dataUrl, canvasName: canvasId }
+  if (filename) body.filename = filename
+  return request('/image', 'POST', body)
 }
 
 export function toggleImagePrivacy(filename) {
   return request('/image/toggle-private', 'POST', { filename })
 }
+
+export function getCanvas(canvasId) {
+  return request(`/read?name=${encodeURIComponent(canvasId)}`, 'GET')
+}
+
+export function checkGitHubCliAvailable() {
+  return request('/github/available', 'GET')
+}
+
+export function fetchGitHubEmbed(url) {
+  return request('/github/embed', 'POST', { url })
+}

package/src/canvas/canvasTheme.js

@@ -1,74 +1,118 @@
 export function getCanvasPrimerAttrs(theme) {
-  if (String(theme || 'light') === 'dark_dimmed') {
-    return {
-      'data-color-mode': 'dark',
-      'data-dark-theme': 'dark_dimmed',
-      'data-light-theme': 'light',
-    }
-  }
-  if (String(theme || 'light').startsWith('dark')) {
+  const value = String(theme || 'light')
+  if (value.startsWith('dark')) {
     return {
       'data-color-mode': 'dark',
-      'data-dark-theme': 'dark',
+      'data-dark-theme': value,
       'data-light-theme': 'light',
     }
   }
   return {
     'data-color-mode': 'light',
     'data-dark-theme': 'dark',
-    'data-light-theme': 'light',
+    'data-light-theme': value.startsWith('light') ? value : 'light',
   }
 }
 
-export function getCanvasThemeVars(theme) {
-  const value = String(theme || 'light')
-  if (value === 'dark_dimmed') {
-    return {
-      '--sb--canvas-bg': '#22272e',
-      '--bgColor-default': '#22272e',
-      '--bgColor-muted': '#22272e',
-      '--bgColor-neutral-muted': 'rgba(99, 110, 123, 0.3)',
-      '--bgColor-accent-emphasis': '#316dca',
-      '--tc-bg-muted': '#22272e',
-      '--tc-dot-color': 'rgba(205, 217, 229, 0.22)',
-      '--overlay-backdrop-bgColor': 'rgba(205, 217, 229, 0.22)',
-      '--fgColor-muted': '#768390',
-      '--fgColor-default': '#adbac7',
-      '--fgColor-onEmphasis': '#ffffff',
-      '--borderColor-default': '#444c56',
-      '--borderColor-muted': '#545d68',
-    }
-  }
-  if (value.startsWith('dark')) {
-    return {
-      '--sb--canvas-bg': '#161b22',
-      '--bgColor-default': '#161b22',
-      '--bgColor-muted': '#161b22',
-      '--bgColor-neutral-muted': 'rgba(110, 118, 129, 0.2)',
-      '--bgColor-accent-emphasis': '#2f81f7',
-      '--tc-bg-muted': '#161b22',
-      '--tc-dot-color': 'rgba(255, 255, 255, 0.1)',
-      '--overlay-backdrop-bgColor': 'rgba(255, 255, 255, 0.1)',
-      '--fgColor-muted': '#8b949e',
-      '--fgColor-default': '#e6edf3',
-      '--fgColor-onEmphasis': '#ffffff',
-      '--borderColor-default': '#30363d',
-      '--borderColor-muted': '#30363d',
-    }
-  }
-  return {
+/**
+ * Per-theme canvas CSS custom properties sourced from @primer/primitives.
+ * Each theme gets its own entry so high-contrast, colorblind, and dimmed
+ * variants all render with the correct background, dot, and text colors.
+ */
+const THEME_VARS = {
+  light: {
     '--sb--canvas-bg': '#f6f8fa',
     '--bgColor-default': '#ffffff',
+    '--bgColor-muted': '#f6f8fa',
+    '--bgColor-neutral-muted': '#818b981f',
+    '--bgColor-accent-emphasis': '#0969da',
     '--tc-bg-muted': '#f6f8fa',
     '--tc-dot-color': 'rgba(0, 0, 0, 0.08)',
     '--overlay-backdrop-bgColor': 'rgba(0, 0, 0, 0.08)',
+    '--fgColor-muted': '#59636e',
+    '--fgColor-default': '#1f2328',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#d1d9e0',
+    '--borderColor-muted': '#d1d9e0b3',
+  },
+  light_colorblind: {
+    '--sb--canvas-bg': '#f6f8fa',
+    '--bgColor-default': '#ffffff',
     '--bgColor-muted': '#f6f8fa',
-    '--bgColor-neutral-muted': '#eaeef2',
-    '--bgColor-accent-emphasis': '#2f81f7',
-    '--fgColor-muted': '#656d76',
+    '--bgColor-neutral-muted': '#818b981f',
+    '--bgColor-accent-emphasis': '#0969da',
+    '--tc-bg-muted': '#f6f8fa',
+    '--tc-dot-color': 'rgba(0, 0, 0, 0.08)',
+    '--overlay-backdrop-bgColor': 'rgba(0, 0, 0, 0.08)',
+    '--fgColor-muted': '#59636e',
     '--fgColor-default': '#1f2328',
     '--fgColor-onEmphasis': '#ffffff',
     '--borderColor-default': '#d1d9e0',
-    '--borderColor-muted': '#d8dee4',
-  }
+    '--borderColor-muted': '#d1d9e0b3',
+  },
+  dark: {
+    '--sb--canvas-bg': '#151b23',
+    '--bgColor-default': '#0d1117',
+    '--bgColor-muted': '#151b23',
+    '--bgColor-neutral-muted': '#656c7633',
+    '--bgColor-accent-emphasis': '#1f6feb',
+    '--tc-bg-muted': '#151b23',
+    '--tc-dot-color': 'rgba(255, 255, 255, 0.1)',
+    '--overlay-backdrop-bgColor': 'rgba(255, 255, 255, 0.1)',
+    '--fgColor-muted': '#9198a1',
+    '--fgColor-default': '#f0f6fc',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#3d444d',
+    '--borderColor-muted': '#3d444db3',
+  },
+  dark_dimmed: {
+    '--sb--canvas-bg': '#262c36',
+    '--bgColor-default': '#212830',
+    '--bgColor-muted': '#262c36',
+    '--bgColor-neutral-muted': '#656c7633',
+    '--bgColor-accent-emphasis': '#316dca',
+    '--tc-bg-muted': '#262c36',
+    '--tc-dot-color': 'rgba(209, 215, 224, 0.18)',
+    '--overlay-backdrop-bgColor': 'rgba(209, 215, 224, 0.18)',
+    '--fgColor-muted': '#9198a1',
+    '--fgColor-default': '#d1d7e0',
+    '--fgColor-onEmphasis': '#f0f6fc',
+    '--borderColor-default': '#3d444d',
+    '--borderColor-muted': '#3d444db3',
+  },
+  dark_colorblind: {
+    '--sb--canvas-bg': '#151b23',
+    '--bgColor-default': '#0d1117',
+    '--bgColor-muted': '#151b23',
+    '--bgColor-neutral-muted': '#656c7633',
+    '--bgColor-accent-emphasis': '#1f6feb',
+    '--tc-bg-muted': '#151b23',
+    '--tc-dot-color': 'rgba(255, 255, 255, 0.1)',
+    '--overlay-backdrop-bgColor': 'rgba(255, 255, 255, 0.1)',
+    '--fgColor-muted': '#9198a1',
+    '--fgColor-default': '#f0f6fc',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#3d444d',
+    '--borderColor-muted': '#3d444db3',
+  },
+  dark_high_contrast: {
+    '--sb--canvas-bg': '#151b23',
+    '--bgColor-default': '#010409',
+    '--bgColor-muted': '#151b23',
+    '--bgColor-neutral-muted': '#212830',
+    '--bgColor-accent-emphasis': '#194fb1',
+    '--tc-bg-muted': '#151b23',
+    '--tc-dot-color': 'rgba(183, 189, 200, 0.25)',
+    '--overlay-backdrop-bgColor': 'rgba(183, 189, 200, 0.25)',
+    '--fgColor-muted': '#b7bdc8',
+    '--fgColor-default': '#ffffff',
+    '--fgColor-onEmphasis': '#ffffff',
+    '--borderColor-default': '#b7bdc8',
+    '--borderColor-muted': '#b7bdc8',
+  },
+}
+
+export function getCanvasThemeVars(theme) {
+  const value = String(theme || 'light')
+  return THEME_VARS[value] || THEME_VARS.light
 }

package/src/canvas/componentIsolate.jsx

@@ -1,17 +1,36 @@
 /**
  * Canvas Component Isolate — iframe entry point.
  *
- * Renders a single named export from a .canvas.jsx module inside an
+ * Renders a single named export from a .story.jsx module inside an
  * isolated document. The parent CanvasPage embeds this via an iframe
  * so a broken component cannot crash the entire canvas.
  *
  * Query params:
- *   module — absolute or base-relative path to the .canvas.jsx file
+ *   module — absolute or base-relative path to the .story.jsx file
  *   export — the named export to render
  *   theme  — canvas theme (light / dark / dark_dimmed)
  */
 import { createElement, Component as ReactComponent } from 'react'
 import { createRoot } from 'react-dom/client'
+import { ThemeProvider, BaseStyles } from '@primer/react'
+
+// ── Primer Primitives CSS (required for CSS variables) ──────────────
+import '@primer/primitives/dist/css/base/size/size.css'
+import '@primer/primitives/dist/css/base/typography/typography.css'
+import '@primer/primitives/dist/css/base/motion/motion.css'
+import '@primer/primitives/dist/css/functional/size/border.css'
+import '@primer/primitives/dist/css/functional/size/breakpoints.css'
+import '@primer/primitives/dist/css/functional/size/size-coarse.css'
+import '@primer/primitives/dist/css/functional/size/size-fine.css'
+import '@primer/primitives/dist/css/functional/size/size.css'
+import '@primer/primitives/dist/css/functional/size/viewport.css'
+import '@primer/primitives/dist/css/functional/typography/typography.css'
+import '@primer/primitives/dist/css/functional/themes/light.css'
+import '@primer/primitives/dist/css/functional/themes/light-colorblind.css'
+import '@primer/primitives/dist/css/functional/themes/dark.css'
+import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css'
+import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css'
+import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css'
 
 // ── Error Boundary ──────────────────────────────────────────────────
 class IsolateErrorBoundary extends ReactComponent {
@@ -62,6 +81,9 @@ const modulePath = params.get('module')
 const exportName = params.get('export')
 const theme = params.get('theme') || 'light'
 
+// Map theme to Primer colorMode
+const colorMode = theme.startsWith('dark') ? 'night' : 'day'
+
 // Apply theme to document for Primer / CSS-var inheritance
 document.documentElement.setAttribute('data-color-mode', theme.startsWith('dark') ? 'dark' : 'light')
 document.documentElement.setAttribute('data-dark-theme', theme.startsWith('dark') ? theme : '')
@@ -75,9 +97,9 @@ async function mount() {
     return
   }
 
-  // Validate: only allow .canvas.jsx modules
-  if (!modulePath.endsWith('.canvas.jsx')) {
-    root.render(createElement('div', { style: errorStyle }, 'Invalid module path — only .canvas.jsx files are allowed'))
+  // Validate: only allow .story.{jsx,tsx} modules
+  if (!modulePath.match(/\.story\.(jsx|tsx)$/)) {
+    root.render(createElement('div', { style: errorStyle }, 'Invalid module path — only .story.jsx/.tsx files are allowed'))
     return
   }
 
@@ -91,8 +113,12 @@ async function mount() {
     }
 
     root.render(
-      createElement(IsolateErrorBoundary, { name: exportName },
-        createElement(Component),
+      createElement(ThemeProvider, { colorMode },
+        createElement(BaseStyles, null,
+          createElement(IsolateErrorBoundary, { name: exportName },
+            createElement(Component),
+          ),
+        ),
       ),
     )
   } catch (err) {

package/src/canvas/useCanvas.js

@@ -31,11 +31,11 @@ export function resolveCanvasModuleImport(modulePath, baseUrl = import.meta.env?
  * Uses build-time data for static config (routes, JSX path), but fetches
  * fresh widget data from the server to pick up persisted edits.
  *
- * @param {string} name - Canvas name as indexed by the data plugin
+ * @param {string} canvasId - Canonical canvas ID as indexed by the data plugin
  * @returns {{ canvas: object|null, jsxExports: object|null, jsxError: boolean, loading: boolean }}
  */
-export function useCanvas(name) {
-  const buildTimeCanvas = useMemo(() => getCanvasData(name), [name])
+export function useCanvas(canvasId) {
+  const buildTimeCanvas = useMemo(() => getCanvasData(canvasId), [canvasId])
   const [canvas, setCanvas] = useState(buildTimeCanvas)
   const [jsxExports, setJsxExports] = useState(null)
   const [jsxError, setJsxError] = useState(false)
@@ -50,7 +50,7 @@ export function useCanvas(name) {
     }
 
     setLoading(true)
-    fetchCanvasFromServer(name).then((fresh) => {
+    fetchCanvasFromServer(canvasId).then((fresh) => {
       if (fresh) {
         // Merge: use server data for widgets/sources, keep build-time for _route/_jsxModule
         setCanvas({ ...buildTimeCanvas, ...fresh })
@@ -59,7 +59,7 @@ export function useCanvas(name) {
       }
       setLoading(false)
     })
-  }, [name, buildTimeCanvas])
+  }, [canvasId, buildTimeCanvas])
 
   const jsxModule = canvas?._jsxModule
   const jsxImport = canvas?._jsxImport
@@ -99,8 +99,9 @@ export function useCanvas(name) {
     if (!import.meta.hot || !buildTimeCanvas) return
 
     const handleCanvasFileChanged = ({ data }) => {
-      if (!data || data.name !== name) return
-      fetchCanvasFromServer(name).then((fresh) => {
+      const eventId = data?.canvasId || data?.name
+      if (!data || eventId !== canvasId) return
+      fetchCanvasFromServer(canvasId).then((fresh) => {
         if (fresh) {
           setCanvas((prev) => ({ ...(prev || buildTimeCanvas), ...fresh }))
         }
@@ -111,7 +112,7 @@ export function useCanvas(name) {
     return () => {
       import.meta.hot.off('storyboard:canvas-file-changed', handleCanvasFileChanged)
     }
-  }, [name, buildTimeCanvas])
+  }, [canvasId, buildTimeCanvas])
 
   return { canvas, jsxExports, jsxError, loading }
 }

package/src/canvas/useCanvas.test.js

@@ -3,14 +3,14 @@ import { resolveCanvasModuleImport } from './useCanvas.js'
 
 describe('resolveCanvasModuleImport', () => {
   it('prefixes root-relative module paths with BASE_URL', () => {
-    expect(resolveCanvasModuleImport('/src/canvas/button-patterns.canvas.jsx', '/feature-branch/')).toBe(
-      '/feature-branch/src/canvas/button-patterns.canvas.jsx',
+    expect(resolveCanvasModuleImport('/src/canvas/button-patterns.story.jsx', '/feature-branch/')).toBe(
+      '/feature-branch/src/canvas/button-patterns.story.jsx',
     )
   })
 
   it('keeps root-relative paths unchanged when BASE_URL is root', () => {
-    expect(resolveCanvasModuleImport('/src/canvas/button-patterns.canvas.jsx', '/')).toBe(
-      '/src/canvas/button-patterns.canvas.jsx',
+    expect(resolveCanvasModuleImport('/src/canvas/button-patterns.story.jsx', '/')).toBe(
+      '/src/canvas/button-patterns.story.jsx',
     )
   })