@dfosco/storyboard-react 4.0.0-beta.13 → 4.0.0-beta.15

package/src/vite/data-plugin.js

@@ -4,12 +4,16 @@ import { execSync } from 'node:child_process'
 import { globSync } from 'glob'
 import { parse as parseJsonc } from 'jsonc-parser'
 import { materializeFromText } from '@dfosco/storyboard-core/canvas/materializer'
+import { toCanvasId } from '../../../core/src/canvas/identity.js'
+import { getConfig } from '../../../core/src/configSchema.js'
 
 const VIRTUAL_MODULE_ID = 'virtual:storyboard-data-index'
 const RESOLVED_ID = '\0' + VIRTUAL_MODULE_ID
 
 const GLOB_PATTERN = '**/*.{flow,scene,object,record,prototype,folder}.{json,jsonc}'
 const CANVAS_GLOB_PATTERN = '**/*.canvas.jsonl'
+const CANVAS_META_GLOB_PATTERN = '**/*.meta.json'
+const STORY_GLOB_PATTERN = '**/*.story.{jsx,tsx}'
 
 /**
  * Extract the data name and type suffix from a file path.
@@ -32,7 +36,8 @@ function parseDataFile(filePath) {
     const normalized = filePath.replace(/\\/g, '/')
     if (normalized.split('/').some(seg => seg.startsWith('_'))) return null
 
-    const name = canvasJsonlMatch[1]
+    const baseName = canvasJsonlMatch[1]
+    let name = baseName
     let inferredRoute = null
     const canvasFolderMatch = normalized.match(/(?:^|\/)src\/canvas\/([^/]+)\.folder\//)
     const canvasFolderName = canvasFolderMatch ? canvasFolderMatch[1] : null
@@ -46,20 +51,81 @@ function parseDataFile(filePath) {
         .replace(/^.*?src\/canvas\//, '')
         .replace(/[^/]*\.folder\/?/g, '')
         .replace(/\/$/, '')
-      inferredRoute = '/canvas/' + (routeBase ? routeBase + '/' : '') + name
+      // Path-based ID: include folder context for uniqueness.
+      // .folder dirs contribute their name (sans .folder suffix) to the ID.
+      const idBase = (dirPath + '/')
+        .replace(/^.*?src\/canvas\//, '')
+        .replace(/\.folder\/?/g, '/')
+        .replace(/\/+/g, '/')
+        .replace(/\/$/, '')
+      name = idBase ? `${idBase}/${baseName}` : baseName
+      inferredRoute = '/canvas/' + name
       inferredRoute = inferredRoute.replace(/\/+/g, '/').replace(/\/$/, '') || '/canvas'
     }
     const protoCheck = normalized.match(/(?:^|\/)src\/prototypes\//)
     if (!canvasCheck && protoCheck) {
       const dirPath = normalized.substring(0, normalized.lastIndexOf('/'))
-      const routeBase = (dirPath + '/')
+      // For prototypes, .folder is purely organizational — strip entirely
+      const idBase = (dirPath + '/')
         .replace(/^.*?src\/prototypes\//, '')
         .replace(/[^/]*\.folder\/?/g, '')
+        .replace(/\/+/g, '/')
         .replace(/\/$/, '')
-      inferredRoute = '/canvas/' + (routeBase ? routeBase + '/' : '') + name
+      name = idBase ? `${idBase}/${baseName}` : baseName
+      inferredRoute = '/canvas/' + name
       inferredRoute = inferredRoute.replace(/\/+/g, '/').replace(/\/$/, '') || '/canvas'
     }
-    return { name, suffix: 'canvas', ext: 'jsonl', folder: canvasFolderName || folderName, inferredRoute }
+    // Derive group: canvases sharing a directory form a group
+    const slashIdx = name.lastIndexOf('/')
+    const group = canvasFolderName || (slashIdx > 0 ? name.substring(0, slashIdx) : null)
+    return { name, suffix: 'canvas', ext: 'jsonl', folder: canvasFolderName || folderName, inferredRoute, id: toCanvasId(filePath), group }
+  }
+
+  // Handle canvas .meta.json files
+  const metaMatch = base.match(/^(.+)\.meta\.json$/)
+  if (metaMatch) {
+    const normalized = filePath.replace(/\\/g, '/')
+    // Only handle meta files inside src/canvas/ directories
+    const canvasCheck = normalized.match(/(?:^|\/)src\/canvas\//)
+    if (!canvasCheck) return null
+    // Skip _-prefixed
+    if (metaMatch[1].startsWith('_')) return null
+    if (normalized.split('/').some(seg => seg.startsWith('_'))) return null
+    return { name: metaMatch[1], suffix: 'canvas-meta', ext: 'json', inferredRoute: null }
+  }
+
+  // Handle .story.jsx / .story.tsx files
+  const storyMatch = base.match(/^(.+)\.story\.(jsx|tsx)$/)
+  if (storyMatch) {
+    if (storyMatch[1].startsWith('_')) return null
+    const normalized = filePath.replace(/\\/g, '/')
+    if (normalized.split('/').some(seg => seg.startsWith('_'))) return null
+
+    const name = storyMatch[1]
+    let inferredRoute = null
+
+    // All stories route under /components/ regardless of directory location
+    const canvasCheck = normalized.match(/(?:^|\/)src\/canvas\//)
+    const componentsCheck = normalized.match(/(?:^|\/)src\/components\//)
+    if (canvasCheck) {
+      const dirPath = normalized.substring(0, normalized.lastIndexOf('/'))
+      const routeBase = (dirPath + '/')
+        .replace(/^.*?src\/canvas\//, '')
+        .replace(/[^/]*\.folder\/?/g, '')
+        .replace(/\/$/, '')
+      inferredRoute = '/components/' + (routeBase ? routeBase + '/' : '') + name
+      inferredRoute = inferredRoute.replace(/\/+/g, '/').replace(/\/$/, '') || '/components'
+    } else if (componentsCheck) {
+      const dirPath = normalized.substring(0, normalized.lastIndexOf('/'))
+      const routeBase = (dirPath + '/')
+        .replace(/^.*?src\/components\//, '')
+        .replace(/[^/]*\.folder\/?/g, '')
+        .replace(/\/$/, '')
+      inferredRoute = '/components/' + (routeBase ? routeBase + '/' : '') + name
+      inferredRoute = inferredRoute.replace(/\/+/g, '/').replace(/\/$/, '') || '/components'
+    }
+
+    return { name, suffix: 'story', ext: storyMatch[2], inferredRoute }
   }
 
   const match = base.match(/^(.+)\.(flow|scene|object|record|prototype|folder)\.(jsonc?)$/)
@@ -250,6 +316,8 @@ function buildIndex(root) {
   const ignore = ['node_modules/**', 'dist/**', '.git/**', '.worktrees/**', 'public/**']
   const files = globSync(GLOB_PATTERN, { cwd: root, ignore, absolute: false })
   const canvasFiles = globSync(CANVAS_GLOB_PATTERN, { cwd: root, ignore, absolute: false })
+  const canvasMetaFiles = globSync(CANVAS_META_GLOB_PATTERN, { cwd: root, ignore, absolute: false })
+  const storyFiles = globSync(STORY_GLOB_PATTERN, { cwd: root, ignore, absolute: false })
 
   // Detect nested .folder/ directories (not supported)
   // Scan directories directly since empty nested folders have no data files
@@ -266,35 +334,58 @@ function buildIndex(root) {
     }
   }
 
-  const index = { flow: {}, object: {}, record: {}, prototype: {}, folder: {}, canvas: {} }
-  const seen = {} // "name.suffix" → absolute path (for duplicate detection)
+  const index = { flow: {}, object: {}, record: {}, prototype: {}, folder: {}, canvas: {}, 'canvas-meta': {}, story: {} }
+  const seen = {} // "name.suffix" or "id.suffix" → absolute path (for duplicate detection)
   const protoFolders = {} // prototype name → folder name (for injection)
   const flowRoutes = {} // flow name → inferred route (for _route injection)
   const canvasRoutes = {} // canvas name → inferred route
+  const canvasAliases = {} // basename → canonical ID (only when unique)
+  const canvasNameCount = {} // canvas basename → count (for ambiguity detection)
+  const canvasGroups = {} // canvas name → group name (shared folder prefix)
+  const storyRoutes = {} // story name → inferred route
 
-  for (const relPath of [...files, ...canvasFiles]) {
+  for (const relPath of [...files, ...canvasFiles, ...canvasMetaFiles, ...storyFiles]) {
     const parsed = parseDataFile(relPath)
     if (!parsed) continue
 
-    const key = `${parsed.name}.${parsed.suffix}`
+    // Canvas files use path-based IDs for dedup; others use basename
+    const dedupKey = parsed.suffix === 'canvas' && parsed.id
+      ? `${parsed.id}.${parsed.suffix}`
+      : `${parsed.name}.${parsed.suffix}`
     const absPath = path.resolve(root, relPath)
 
-    if (seen[key]) {
+    if (seen[dedupKey]) {
       const hint = parsed.suffix === 'folder'
           ? '  Folder names must be unique across the project.'
+          : parsed.suffix === 'canvas'
+          ? '  Canvas IDs must be unique. Move or rename one file to resolve the collision.'
           : '  Flows, records, and objects are scoped to their prototype directory.\n' +
             '  If both files are global (outside src/prototypes/), rename one to avoid the collision.'
 
       throw new Error(
-        `[storyboard-data] Duplicate ${parsed.suffix} "${parsed.name}"\n` +
-        `  Found at: ${seen[key]}\n` +
+        `[storyboard-data] Duplicate ${parsed.suffix} "${parsed.id || parsed.name}"\n` +
+        `  Found at: ${seen[dedupKey]}\n` +
         `  And at:   ${absPath}\n` +
         hint
       )
     }
 
-    seen[key] = absPath
-    index[parsed.suffix][parsed.name] = absPath
+    seen[dedupKey] = absPath
+
+    // Canvas: index only by canonical ID. Basename aliases go in a separate map
+    // so listCanvases() and viewfinder don't show duplicates.
+    if (parsed.suffix === 'canvas' && parsed.id) {
+      index.canvas[parsed.id] = absPath
+      // Track basename for alias resolution (only when unique)
+      canvasNameCount[parsed.name] = (canvasNameCount[parsed.name] || 0) + 1
+      if (canvasNameCount[parsed.name] === 1) {
+        canvasAliases[parsed.name] = parsed.id
+      } else {
+        delete canvasAliases[parsed.name]
+      }
+    } else {
+      index[parsed.suffix][parsed.name] = absPath
+    }
 
     // Track which folder a prototype belongs to
     if (parsed.suffix === 'prototype' && parsed.folder) {
@@ -306,13 +397,24 @@ function buildIndex(root) {
       flowRoutes[parsed.name] = parsed.inferredRoute
     }
 
-    // Track inferred routes for canvases
+    // Track inferred routes for canvases (keyed by canonical ID)
     if (parsed.suffix === 'canvas' && parsed.inferredRoute) {
-      canvasRoutes[parsed.name] = parsed.inferredRoute
+      const canvasKey = parsed.id || parsed.name
+      canvasRoutes[canvasKey] = parsed.inferredRoute
+    }
+
+    // Track canvas groups (canvases sharing a folder prefix)
+    if (parsed.suffix === 'canvas' && parsed.group) {
+      canvasGroups[parsed.name] = parsed.group
+    }
+
+    // Track inferred routes for stories
+    if (parsed.suffix === 'story' && parsed.inferredRoute) {
+      storyRoutes[parsed.name] = parsed.inferredRoute
     }
   }
 
-  return { index, protoFolders, flowRoutes, canvasRoutes }
+  return { index, protoFolders, flowRoutes, canvasRoutes, canvasAliases, canvasGroups, storyRoutes }
 }
 
 /**
@@ -366,7 +468,7 @@ function computeTemplateVars(absPath, root) {
  */
 /**
  * Read storyboard.config.json from the project root (if it exists).
- * Returns the parsed config object, or null if not found.
+ * Returns the parsed and defaulted config object, or null if not found.
  */
 function readConfig(root) {
   const configPath = path.resolve(root, 'storyboard.config.json')
@@ -376,7 +478,7 @@ function readConfig(root) {
     const config = parseJsonc(raw, errors)
     // Treat malformed JSON (e.g. mid-edit partial saves) as missing config
     if (errors.length > 0) return { config: null, configPath }
-    return { config, configPath }
+    return { config: getConfig(config), configPath }
   } catch {
     return { config: null, configPath }
   }
@@ -420,10 +522,11 @@ function readModesConfig(root) {
   return fallback
 }
 
-function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root) {
+function generateModule({ index, protoFolders, flowRoutes, canvasRoutes, canvasAliases, canvasGroups, storyRoutes }, root) {
   const declarations = []
   const INDEX_KEYS = ['flow', 'object', 'record', 'prototype', 'folder', 'canvas']
   const entries = { flow: [], object: [], record: [], prototype: [], folder: [], canvas: [] }
+  const storyEntries = [] // handled separately (code modules, not JSON data)
   const resolvedFlowRoutes = {} // flow name → resolved route (for multi-flow logging)
   let i = 0
 
@@ -434,6 +537,21 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
   ]
   const gitMeta = batchGitMetadata(root, gitPaths)
 
+  // Read canvas-meta files and build a directory-based lookup
+  const canvasMetaByDir = {}
+  for (const [, absPath] of Object.entries(index['canvas-meta'] || {})) {
+    try {
+      const raw = fs.readFileSync(absPath, 'utf-8')
+      const parsed = parseJsonc(raw)
+      if (parsed) {
+        // Key by the parent directory path relative to src/canvas/
+        const dirPath = path.dirname(absPath).replace(/\\/g, '/')
+        const canvasRelDir = dirPath.replace(/^.*?src\/canvas\//, '')
+        canvasMetaByDir[canvasRelDir] = parsed
+      }
+    } catch { /* skip invalid meta files */ }
+  }
+
   for (const suffix of INDEX_KEYS) {
     for (const [name, absPath] of Object.entries(index[suffix])) {
       const varName = `_d${i++}`
@@ -499,11 +617,18 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
         }
       }
 
-      // Inject inferred route and resolve JSX companion for canvases
+      // Inject inferred route, group, and resolve JSX companion for canvases
       if (suffix === 'canvas') {
         if (canvasRoutes[name]) {
           parsed = { ...parsed, _route: canvasRoutes[name] }
         }
+        if (canvasGroups[name]) {
+          parsed = { ...parsed, _group: canvasGroups[name] }
+        }
+        // Inject canvas folder metadata from .meta.json
+        if (canvasGroups[name] && canvasMetaByDir[canvasGroups[name]]) {
+          parsed = { ...parsed, _canvasMeta: canvasMetaByDir[canvasGroups[name]] }
+        }
         // Inject folder association
         const folderDirMatch = path.relative(root, absPath).replace(/\\/g, '/').match(/(?:^|\/)src\/(?:prototypes|canvas)\/([^/]+)\.folder\//)
         if (folderDirMatch) {
@@ -555,8 +680,22 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
     }
   }
 
+  // Generate story entries (code modules with dynamic imports, not JSON data)
+  for (const [name, absPath] of Object.entries(index.story || {})) {
+    const varName = `_d${i++}`
+    const relModule = '/' + path.relative(root, absPath).replace(/\\/g, '/')
+    const storyMeta = { _storyModule: relModule }
+    if (storyRoutes[name]) {
+      storyMeta._route = storyRoutes[name]
+    }
+    declarations.push(
+      `const ${varName} = Object.assign(${JSON.stringify(storyMeta)}, { _storyImport: () => import(${JSON.stringify(relModule)}) })`
+    )
+    storyEntries.push(`  ${JSON.stringify(name)}: ${varName}`)
+  }
+
   const imports = [`import { init } from '@dfosco/storyboard-core'`]
-  const initCalls = [`init({ flows, objects, records, prototypes, folders, canvases })`]
+  const initCalls = [`init({ flows, objects, records, prototypes, folders, canvases, stories })`]
 
   // Feature flags from storyboard.config.json
   const { config } = readConfig(root)
@@ -624,14 +763,18 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
     `const prototypes = {\n${entries.prototype.join(',\n')}\n}`,
     `const folders = {\n${entries.folder.join(',\n')}\n}`,
     `const canvases = {\n${entries.canvas.join(',\n')}\n}`,
+    `const stories = {\n${storyEntries.join(',\n')}\n}`,
+    '',
+    `// Legacy basename → canonical ID aliases (only unique basenames)`,
+    `const canvasAliases = ${JSON.stringify(canvasAliases || {})}`,
     '',
     '// Backward-compatible alias',
     'const scenes = flows',
     '',
     initCalls.join('\n'),
     '',
-    `export { flows, scenes, objects, records, prototypes, folders, canvases }`,
-    `export const index = { flows, scenes, objects, records, prototypes, folders, canvases }`,
+    `export { flows, scenes, objects, records, prototypes, folders, canvases, canvasAliases, stories }`,
+    `export const index = { flows, scenes, objects, records, prototypes, folders, canvases, canvasAliases, stories }`,
     `export default index`,
     '',
     '// Live-patch canvas data on HMR events so SPA navigation shows fresh state',
@@ -646,7 +789,18 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
     '        ? Object.assign({}, canvases[data.name], data.metadata)',
     '        : data.metadata',
     '    }',
-    '    init({ flows, objects, records, prototypes, folders, canvases })',
+    '    init({ flows, objects, records, prototypes, folders, canvases, stories })',
+    '  })',
+    '  import.meta.hot.on("storyboard:story-file-changed", (data) => {',
+    '    if (!data) return',
+    '    if (data.removed) {',
+    '      delete stories[data.name]',
+    '    } else {',
+    '      stories[data.name] = { _storyModule: data._storyModule, _route: data._route,',
+    '        _storyImport: () => import(/* @vite-ignore */ data._storyModule) }',
+    '    }',
+    '    init({ flows, objects, records, prototypes, folders, canvases, stories })',
+    '    document.dispatchEvent(new CustomEvent("storyboard:story-index-changed"))',
     '  })',
     '}',
   ].join('\n')
@@ -655,7 +809,7 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
 /**
  * Vite plugin for storyboard data discovery.
  *
- * - Scans the repo for *.flow.json, *.scene.json (compat), *.object.json, *.record.json, *.canvas.jsonl
+ * - Scans the repo for *.flow.json, *.scene.json (compat), *.object.json, *.record.json, *.canvas.jsonl, *.story.{jsx,tsx}
  * - Validates no two files share the same name+suffix (hard build error)
  * - Generates a virtual module `virtual:storyboard-data-index`
  * - Watches for file additions/removals in dev mode
@@ -731,6 +885,29 @@ export default function storyboardDataPlugin() {
         }
       })
 
+      // ── Stories list API ──────────────────────────────────────────
+      // Serves the list of discovered stories for the CLI and UI story picker.
+      server.middlewares.use(async (req, res, next) => {
+        if (!req.url) return next()
+        let url = req.url
+        const baseNoTrail = (server.config.base || '/').replace(/\/$/, '')
+        if (baseNoTrail && url.startsWith(baseNoTrail)) {
+          url = url.slice(baseNoTrail.length) || '/'
+        }
+        if (!url.startsWith('/_storyboard/stories/list')) return next()
+
+        if (!buildResult) buildResult = buildIndex(root)
+        const storyEntries = Object.entries(buildResult.index.story || {})
+        const storyRoutes = buildResult.storyRoutes || {}
+        const stories = storyEntries.map(([name]) => ({
+          name,
+          route: storyRoutes[name] || null,
+        }))
+
+        res.writeHead(200, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify({ stories }))
+      })
+
       // Watch for data file changes in dev mode
       const watcher = server.watcher
       if (!buildResult) buildResult = buildIndex(root)
@@ -879,6 +1056,36 @@ export default function storyboardDataPlugin() {
           }
         }
 
+        // Story add/remove: soft-invalidate + custom HMR event (full-reload
+        // is blocked by the canvas reload guard). The virtual module HMR
+        // handler live-patches `stories` and re-runs init().
+        if (parsed?.suffix === 'story') {
+          softInvalidate()
+          if (!buildResult) buildResult = buildIndex(root)
+          const storyRoutes = buildResult.storyRoutes || {}
+          const storyIndex = buildResult.index.story || {}
+          const name = parsed.name
+          if (eventType === 'unlink') {
+            server.ws.send({
+              type: 'custom',
+              event: 'storyboard:story-file-changed',
+              data: { name, removed: true },
+            })
+          } else if (eventType === 'add' && storyIndex[name]) {
+            const relModule = '/' + path.relative(root, storyIndex[name]).replace(/\\/g, '/')
+            server.ws.send({
+              type: 'custom',
+              event: 'storyboard:story-file-changed',
+              data: {
+                name,
+                _storyModule: relModule,
+                _route: storyRoutes[name] || null,
+              },
+            })
+          }
+          return
+        }
+
         // Non-canvas additions/removals and folder changes update the route/data graph.
         triggerFullReload()
       }
@@ -924,4 +1131,4 @@ export default function storyboardDataPlugin() {
 }
 
 // Exported for testing
-export { resolveTemplateVars, computeTemplateVars }
+export { resolveTemplateVars, computeTemplateVars, parseDataFile }

package/src/vite/data-plugin.test.js

@@ -1,7 +1,7 @@
 import { mkdtempSync, writeFileSync, mkdirSync, rmSync, readFileSync } from 'node:fs'
 import { tmpdir } from 'node:os'
 import path from 'node:path'
-import storyboardDataPlugin, { resolveTemplateVars, computeTemplateVars } from './data-plugin.js'
+import storyboardDataPlugin, { resolveTemplateVars, computeTemplateVars, parseDataFile } from './data-plugin.js'
 
 const RESOLVED_ID = '\0virtual:storyboard-data-index'
 
@@ -77,13 +77,13 @@ describe('storyboardDataPlugin', () => {
     const code = plugin.load(RESOLVED_ID)
 
     expect(code).toContain("import { init } from '@dfosco/storyboard-core'")
-    expect(code).toContain('init({ flows, objects, records, prototypes, folders, canvases })')
+    expect(code).toContain('init({ flows, objects, records, prototypes, folders, canvases, stories })')
     expect(code).toContain('"Test"')
     expect(code).toContain('"Jane"')
     expect(code).toContain('"First"')
     // Backward-compat alias
     expect(code).toContain('const scenes = flows')
-    expect(code).toContain('export { flows, scenes, objects, records, prototypes, folders, canvases }')
+    expect(code).toContain('export { flows, scenes, objects, records, prototypes, folders, canvases, canvasAliases, stories }')
   })
 
   it('load returns null for other IDs', () => {
@@ -169,7 +169,7 @@ describe('storyboardDataPlugin', () => {
 
     // .scene.json files should be normalized to the flows category
     expect(code).toContain('"Legacy Scene"')
-    expect(code).toContain('init({ flows, objects, records, prototypes, folders, canvases })')
+    expect(code).toContain('init({ flows, objects, records, prototypes, folders, canvases, stories })')
   })
 
   it('buildStart resets the index cache', () => {
@@ -1045,4 +1045,179 @@ describe('canvas watcher behavior', () => {
     expect(code2).toContain('"refresh-canvas"')
     expect(code2).toContain('After Refresh')
   })
+
+  // ── Story file discovery ──────────────────────────────────────────
+
+  it('discovers .story.jsx files and generates _storyImport', () => {
+    writeDataFiles(tmpDir)
+    writeFileSync(
+      path.join(tmpDir, 'button-patterns.story.jsx'),
+      'export function Primary() { return null }',
+    )
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).toContain('"button-patterns"')
+    expect(code).toContain('_storyModule')
+    expect(code).toContain('_storyImport')
+    expect(code).toContain('.story.jsx')
+  })
+
+  it('discovers .story.tsx files', () => {
+    writeDataFiles(tmpDir)
+    writeFileSync(
+      path.join(tmpDir, 'card.story.tsx'),
+      'export function Default() { return null }',
+    )
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).toContain('"card"')
+    expect(code).toContain('card.story.tsx')
+  })
+
+  it('skips _-prefixed story files', () => {
+    writeDataFiles(tmpDir)
+    writeFileSync(
+      path.join(tmpDir, '_draft.story.jsx'),
+      'export function Draft() { return null }',
+    )
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).not.toContain('"_draft"')
+  })
+
+  it('throws on duplicate story names', () => {
+    writeDataFiles(tmpDir)
+    mkdirSync(path.join(tmpDir, 'a'), { recursive: true })
+    mkdirSync(path.join(tmpDir, 'b'), { recursive: true })
+    writeFileSync(
+      path.join(tmpDir, 'a', 'dupe.story.jsx'),
+      'export function A() { return null }',
+    )
+    writeFileSync(
+      path.join(tmpDir, 'b', 'dupe.story.jsx'),
+      'export function B() { return null }',
+    )
+    const plugin = createPlugin()
+    expect(() => plugin.load(RESOLVED_ID)).toThrow(/Duplicate story "dupe"/)
+  })
+
+  it('includes stories in the init() call and exports', () => {
+    writeDataFiles(tmpDir)
+    writeFileSync(
+      path.join(tmpDir, 'test.story.jsx'),
+      'export function Test() { return null }',
+    )
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).toContain('const stories = {')
+    expect(code).toContain('init({ flows, objects, records, prototypes, folders, canvases, stories })')
+    expect(code).toContain('export { flows, scenes, objects, records, prototypes, folders, canvases, stories }')
+  })
+
+  it('infers /components/ route for stories in src/canvas/', () => {
+    writeDataFiles(tmpDir)
+    mkdirSync(path.join(tmpDir, 'src', 'canvas'), { recursive: true })
+    writeFileSync(
+      path.join(tmpDir, 'src', 'canvas', 'button-patterns.story.jsx'),
+      'export function Primary() { return null }',
+    )
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).toContain('"button-patterns"')
+    expect(code).toContain('"/components/button-patterns"')
+    expect(code).toContain('_route')
+  })
+
+  it('infers /components/ route for stories in src/components/', () => {
+    writeDataFiles(tmpDir)
+    mkdirSync(path.join(tmpDir, 'src', 'components'), { recursive: true })
+    writeFileSync(
+      path.join(tmpDir, 'src', 'components', 'text-input.story.jsx'),
+      'export function Default() { return null }',
+    )
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).toContain('"text-input"')
+    expect(code).toContain('"/components/text-input"')
+  })
+
+  it('stories outside src/canvas/ or src/components/ have no inferred route', () => {
+    writeDataFiles(tmpDir)
+    writeFileSync(
+      path.join(tmpDir, 'orphan.story.jsx'),
+      'export function Default() { return null }',
+    )
+    const plugin = createPlugin()
+    const code = plugin.load(RESOLVED_ID)
+
+    expect(code).toContain('"orphan"')
+    // Should not have _route since it's not in a recognized directory
+    expect(code).not.toContain('"/orphan"')
+  })
+})
+
+describe('parseDataFile — canvas path-based IDs', () => {
+  it('flat canvas in src/canvas/ gets basename-only ID', () => {
+    const result = parseDataFile('src/canvas/overview.canvas.jsonl')
+    expect(result.name).toBe('overview')
+    expect(result.inferredRoute).toBe('/canvas/overview')
+    expect(result.group).toBeNull()
+  })
+
+  it('canvas inside .folder/ gets path-based ID', () => {
+    const result = parseDataFile('src/canvas/research.folder/interviews.canvas.jsonl')
+    expect(result.name).toBe('research/interviews')
+    expect(result.inferredRoute).toBe('/canvas/research/interviews')
+    expect(result.group).toBe('research')
+  })
+
+  it('duplicate basenames in different folders get distinct IDs', () => {
+    const a = parseDataFile('src/canvas/alpha.folder/overview.canvas.jsonl')
+    const b = parseDataFile('src/canvas/beta.folder/overview.canvas.jsonl')
+    expect(a.name).toBe('alpha/overview')
+    expect(b.name).toBe('beta/overview')
+    expect(a.name).not.toBe(b.name)
+  })
+
+  it('prototype-scoped canvas gets path-based ID', () => {
+    const result = parseDataFile('src/prototypes/Dashboard/plan.canvas.jsonl')
+    expect(result.name).toBe('Dashboard/plan')
+    expect(result.inferredRoute).toBe('/canvas/Dashboard/plan')
+  })
+
+  it('prototype inside .folder/ strips folder from ID', () => {
+    const result = parseDataFile('src/prototypes/main.folder/Dashboard/plan.canvas.jsonl')
+    expect(result.name).toBe('Dashboard/plan')
+    expect(result.inferredRoute).toBe('/canvas/Dashboard/plan')
+  })
+
+  it('skips _-prefixed canvas files', () => {
+    expect(parseDataFile('src/canvas/_draft.canvas.jsonl')).toBeNull()
+  })
+
+  it('skips canvas files in _-prefixed directories', () => {
+    expect(parseDataFile('src/canvas/_hidden/public.canvas.jsonl')).toBeNull()
+  })
+
+  it('canvas outside known directories gets basename-only ID', () => {
+    const result = parseDataFile('random/path/notes.canvas.jsonl')
+    expect(result.name).toBe('notes')
+    expect(result.inferredRoute).toBeNull()
+  })
+
+  it('sets group for grouped canvases', () => {
+    const result = parseDataFile('src/canvas/ux.folder/onboarding.canvas.jsonl')
+    expect(result.group).toBe('ux')
+  })
+
+  it('sets group to null for ungrouped canvases', () => {
+    const result = parseDataFile('src/canvas/standalone.canvas.jsonl')
+    expect(result.group).toBeNull()
+  })
 })