@dfosco/storyboard-core 4.0.0-beta.2 → 4.0.0-beta.21

package/src/configSchema.js

@@ -0,0 +1,125 @@
+/**
+ * Config Schema — canonical shape and defaults for storyboard.config.json.
+ *
+ * Every consumer of storyboard.config.json should import `getConfig()` to get
+ * a fully defaulted, validated config object. New keys added here are safe for
+ * existing projects — they always have defaults.
+ *
+ * @module configSchema
+ */
+
+/**
+ * @typedef {object} PasteRule
+ * @property {string} match    — regex string tested against pasted URLs
+ * @property {string} widget   — widget type to create (e.g. "figma-embed", "link-preview")
+ * @property {Record<string, string>} [propsMap] — static props merged into widget props
+ */
+
+/**
+ * @typedef {object} CanvasConfig
+ * @property {PasteRule[]} pasteRules       — URL→widget conversion rules (evaluated in order, first match wins)
+ * @property {{ embedBehavior: string, ghGuard: string }} github — GitHub-specific embed settings
+ */
+
+/**
+ * @typedef {object} CommandPaletteConfig
+ * @property {string[]} providers — provider IDs to enable
+ * @property {string}   ranking   — result ranking strategy
+ */
+
+/**
+ * @typedef {object} StoryboardConfig
+ * @property {string}   [customDomain]
+ * @property {string}   [devDomain]
+ * @property {{ owner: string, name: string }} [repository]
+ * @property {{ enabled: boolean }} [modes]
+ * @property {{ discussions: { category: string } }} [comments]
+ * @property {Record<string, boolean>} [plugins]
+ * @property {{ enabled?: boolean, features?: Record<string, boolean>, partials?: Array }} [workshop]
+ * @property {Record<string, boolean>} [featureFlags]
+ * @property {{ hide?: string[] }} [ui]
+ * @property {object}   [toolbar]
+ * @property {CanvasConfig} [canvas]
+ * @property {CommandPaletteConfig} [commandPalette]
+ */
+
+/** Built-in paste rules shipped with storyboard. */
+export const builtinPasteRules = [
+  {
+    id: 'figma',
+    match: 'https?://(?:www\\.)?figma\\.com/',
+    widget: 'figma-embed',
+    propsMap: { width: 800, height: 450 },
+  },
+]
+
+/** Default config values. Every key here is safe to access without null checks. */
+export const configDefaults = {
+  customDomain: '',
+  devDomain: '',
+  repository: { owner: '', name: '' },
+  modes: { enabled: false },
+  comments: { discussions: { category: 'Comments' } },
+  plugins: {},
+  workshop: {
+    enabled: false,
+    features: { createPrototype: true, createFlow: true, createCanvas: true },
+  },
+  featureFlags: {},
+  ui: {},
+  toolbar: {},
+  canvas: {
+    pasteRules: builtinPasteRules,
+    github: {
+      embedBehavior: 'link-preview', // "link-preview" | "rich-embed"
+      ghGuard: 'copy',               // "copy" | "link" | "off"
+    },
+  },
+  commandPalette: {
+    providers: ['prototypes', 'flows', 'canvases', 'pages'],
+    ranking: 'frecency', // "recent" | "alphabetical" | "frecency"
+  },
+}
+
+/**
+ * Deep-merge helper that replaces arrays instead of concatenating.
+ * Objects are recursively merged; all other values are overwritten.
+ */
+function mergeConfig(defaults, overrides) {
+  if (!overrides || typeof overrides !== 'object' || Array.isArray(overrides)) {
+    return overrides ?? defaults
+  }
+  const result = { ...defaults }
+  for (const key of Object.keys(overrides)) {
+    const val = overrides[key]
+    if (val === undefined) continue
+    if (Array.isArray(val)) {
+      // Arrays replace (e.g. pasteRules, providers) — no concat
+      result[key] = val
+    } else if (val && typeof val === 'object' && !Array.isArray(val) && typeof defaults[key] === 'object' && !Array.isArray(defaults[key])) {
+      result[key] = mergeConfig(defaults[key], val)
+    } else {
+      result[key] = val
+    }
+  }
+  return result
+}
+
+/**
+ * Return a fully defaulted config by merging user-provided values over defaults.
+ * Safe to call with an empty object or undefined — returns full defaults.
+ *
+ * @param {Partial<StoryboardConfig>} [raw={}]
+ * @returns {StoryboardConfig}
+ */
+export function getConfig(raw = {}) {
+  return mergeConfig(configDefaults, raw)
+}
+
+/**
+ * Return a copy of the bare defaults (no user overrides).
+ * @returns {StoryboardConfig}
+ */
+export function getConfigDefaults() {
+  return JSON.parse(JSON.stringify(configDefaults))
+}

package/src/configSchema.test.js

@@ -0,0 +1,68 @@
+import { describe, it, expect } from 'vitest'
+import { getConfig, getConfigDefaults, configDefaults, builtinPasteRules } from './configSchema.js'
+
+describe('configSchema', () => {
+  describe('getConfigDefaults', () => {
+    it('returns a full defaults object', () => {
+      const d = getConfigDefaults()
+      expect(d.canvas).toBeDefined()
+      expect(d.commandPalette).toBeDefined()
+      expect(d.repository).toEqual({ owner: '', name: '' })
+    })
+
+    it('returns a fresh copy each time', () => {
+      const a = getConfigDefaults()
+      const b = getConfigDefaults()
+      expect(a).not.toBe(b)
+      expect(a).toEqual(b)
+    })
+  })
+
+  describe('getConfig', () => {
+    it('returns full defaults when called with empty object', () => {
+      const c = getConfig({})
+      expect(c.canvas.pasteRules).toEqual(builtinPasteRules)
+      expect(c.canvas.github.embedBehavior).toBe('link-preview')
+      expect(c.canvas.github.ghGuard).toBe('copy')
+      expect(c.commandPalette.providers).toEqual(['prototypes', 'flows', 'canvases', 'pages'])
+      expect(c.commandPalette.ranking).toBe('frecency')
+    })
+
+    it('returns full defaults when called with undefined', () => {
+      const c = getConfig()
+      expect(c.canvas).toBeDefined()
+      expect(c.commandPalette).toBeDefined()
+    })
+
+    it('merges user config over defaults', () => {
+      const c = getConfig({
+        repository: { owner: 'test', name: 'repo' },
+        canvas: { github: { ghGuard: 'link' } },
+      })
+      expect(c.repository).toEqual({ owner: 'test', name: 'repo' })
+      expect(c.canvas.github.ghGuard).toBe('link')
+      // Other defaults preserved
+      expect(c.canvas.github.embedBehavior).toBe('link-preview')
+      expect(c.canvas.pasteRules).toEqual(builtinPasteRules)
+    })
+
+    it('replaces arrays instead of concatenating', () => {
+      const customRules = [{ id: 'custom', match: 'https://example.com', widget: 'link-preview' }]
+      const c = getConfig({ canvas: { pasteRules: customRules } })
+      expect(c.canvas.pasteRules).toEqual(customRules)
+      expect(c.canvas.pasteRules).not.toContainEqual(builtinPasteRules[0])
+    })
+
+    it('preserves existing keys not in defaults', () => {
+      const c = getConfig({ devDomain: 'my-project', featureFlags: { 'show-banner': true } })
+      expect(c.devDomain).toBe('my-project')
+      expect(c.featureFlags['show-banner']).toBe(true)
+    })
+
+    it('does not mutate configDefaults', () => {
+      const before = JSON.stringify(configDefaults)
+      getConfig({ canvas: { github: { ghGuard: 'off' } } })
+      expect(JSON.stringify(configDefaults)).toBe(before)
+    })
+  })
+})

package/src/index.js

@@ -18,6 +18,8 @@ export { listPrototypes, getPrototypeMetadata } from './loader.js'
 export { listFolders, getFolderMetadata } from './loader.js'
 // Canvas data
 export { listCanvases, getCanvasData } from './loader.js'
+// Story data
+export { listStories, getStoryData } from './loader.js'
 // Deprecated scene aliases
 export { loadScene, listScenes, sceneExists } from './loader.js'
 
@@ -87,3 +89,6 @@ export { TOOL_STATES, initToolbarToolStates, setToolbarToolState, getToolbarTool
 
 // Comments system
 export { initCommentsConfig, getCommentsConfig, isCommentsEnabled } from './comments/config.js'
+
+// Canvas config (paste rules, canvas-level overrides)
+export { initCanvasConfig, getPasteRules } from './canvasConfig.js'

package/src/inspector/highlighter.js

@@ -227,12 +227,14 @@ export async function createInspectorHighlighter() {
      * @param {object} options
      * @param {string} [options.lang] - Language identifier
      * @param {string} [options.theme] - Ignored (theme resolved from config)
+     * @param {boolean} [options.lineNumbers] - Show inline line numbers (default: true)
      * @param {Array<{ start: { line: number }, end: { line: number }, properties: { class: string } }>} [options.decorations]
      * @returns {string} HTML string with highlighted code
      */
     codeToHtml(code, options = {}) {
       const lang = options.lang || 'javascript'
       const decorations = options.decorations || []
+      const showLineNumbers = options.lineNumbers !== false
       const colors = getColors()
 
       let highlighted
@@ -255,13 +257,19 @@ export async function createInspectorHighlighter() {
         }
       }
 
+      const lineNumWidth = String(lines.length).length
+      const gutterColor = colors.comment || colors.headerFg || '#636e7b'
+
       const wrappedLines = lines.map((line, i) => {
         const classes = ['line']
         if (highlightedLines.has(i)) classes.push('highlighted-line')
-        return `<span class="${classes.join(' ')}">${line}</span>`
+        const numSpan = showLineNumbers
+          ? `<span class="line-number" style="color:${gutterColor};user-select:none;opacity:0.5;display:inline-block;width:${lineNumWidth}ch;text-align:right;margin-right:1.5ch">${String(i + 1).padStart(lineNumWidth)}</span>`
+          : ''
+        return `<span class="${classes.join(' ')}">${numSpan}${line}</span>`
       }).join('\n')
 
-      return `<pre style="background:${colors.bg};color:${colors.fg};margin:0;padding:0;overflow-x:auto"><code>${wrappedLines}</code></pre>`
+      return `<pre style="background:${colors.bg};color:${colors.fg};margin:0;padding:var(--base-size-8);overflow-x:auto"><code>${wrappedLines}</code></pre>`
     },
   }
 }

package/src/lib/components/ui/trigger-button/trigger-button.svelte

@@ -17,7 +17,7 @@
   // that breaks when this source is consumed from node_modules.
   if (typeof CSS !== 'undefined' && 'paintWorklet' in CSS) {
     try {
-      const worklet = `class P{static get inputProperties(){return["--sb--smooth-corners"]}superellipse(a,b,nX=4,nY){if(Number.isNaN(nX))nX=4;if(typeof nY==="undefined"||Number.isNaN(nY))nY=nX;if(nX>100)nX=100;if(nY>100)nY=100;if(nX<1e-11)nX=1e-11;if(nY<1e-11)nY=1e-11;const nX2=2/nX,nY2=nY?2/nY:nX2,steps=360,step=(2*Math.PI)/steps;return Array.from({length:steps},(_,i)=>{const t=i*step,cosT=Math.cos(t),sinT=Math.sin(t);return{x:Math.abs(cosT)**nX2*a*Math.sign(cosT),y:Math.abs(sinT)**nY2*b*Math.sign(sinT)}})}paint(ctx,geom,props){const[nX,nY]=props.get("--sb--smooth-corners").toString().replace(/ /g,"").split(",");const w=geom.width/2,h=geom.height/2,s=this.superellipse(w,h,parseFloat(nX),parseFloat(nY));ctx.fillStyle="#000";ctx.setTransform(1,0,0,1,w,h);ctx.beginPath();for(let i=0;i<s.length;i++){const{x,y}=s[i];i===0?ctx.moveTo(x,y):ctx.lineTo(x,y)}ctx.closePath();ctx.fill()}}registerPaint("smooth-corners",P);`;
+      const worklet = `class P{static get inputProperties(){return["--sb--smooth-corners"]}superellipse(a,b,nX=4,nY){if(Number.isNaN(nX))nX=4;if(typeof nY==="undefined"||Number.isNaN(nY))nY=nX;if(nX>100)nX=100;if(nY>100)nY=100;if(nX<1e-11)nX=1e-11;if(nY<1e-11)nY=1e-11;const nX2=2/nX,nY2=nY?2/nY:nX2,steps=360,step=(2*Math.PI)/steps;return Array.from({length:steps},(_,i)=>{const t=i*step,cosT=Math.cos(t),sinT=Math.sin(t);return{x:Math.abs(cosT)**nX2*a*Math.sign(cosT),y:Math.abs(sinT)**nY2*b*Math.sign(sinT)}})}paint(ctx,geom,props){const[nX,nY]=props.get("--sb--smooth-corners").toString().replace(/ /g,"").split(",");const w=geom.width/2,h=geom.height/2,s=this.superellipse(w,h,parseFloat(nX),parseFloat(nY));ctx.fillStyle="#000";ctx.setTransform(1,0,0,1,w,h);ctx.beginPath();for(let i=0;i<s.length;i++){const{x,y}=s[i];i===0?ctx.moveTo(x,y):ctx.lineTo(x,y)}ctx.closePath();ctx.fill()}}try{registerPaint("smooth-corners",P)}catch(e){}`;
       const blob = new Blob([worklet], { type: 'application/javascript' });
       CSS.paintWorklet.addModule(URL.createObjectURL(blob));
     } catch {}

package/src/loader.js

@@ -30,13 +30,13 @@ function deepMerge(target, source) {
  * Module-level data index, seeded by init().
  * Shape: { flows: {}, objects: {}, records: {} }
  */
-let dataIndex = { flows: {}, objects: {}, records: {}, prototypes: {}, folders: {}, canvases: {} }
+let dataIndex = { flows: {}, objects: {}, records: {}, prototypes: {}, folders: {}, canvases: {}, stories: {} }
 
 /**
  * Seed the data index. Call once at app startup before any load functions.
  * The Vite data plugin calls this automatically via the generated virtual module.
  *
- * @param {{ flows?: object, scenes?: object, objects: object, records: object, prototypes?: object, folders?: object, canvases?: object }} index
+ * @param {{ flows?: object, scenes?: object, objects: object, records: object, prototypes?: object, folders?: object, canvases?: object, stories?: object }} index
  */
 export function init(index) {
   if (!index || typeof index !== 'object') {
@@ -49,6 +49,7 @@ export function init(index) {
     prototypes: index.prototypes || {},
     folders: index.folders || {},
     canvases: index.canvases || {},
+    stories: index.stories || {},
   }
 }
 
@@ -380,4 +381,22 @@ export function getCanvasData(name) {
   return dataIndex.canvases[name] ?? null
 }
 
+/**
+ * Returns the names of all registered stories.
+ * @returns {string[]}
+ */
+export function listStories() {
+  return Object.keys(dataIndex.stories)
+}
+
+/**
+ * Returns story data by name.
+ * Story entries include `_storyModule` (path) and `_storyImport` (dynamic import function).
+ * @param {string} name - Story name (e.g. "button-patterns")
+ * @returns {object|null} Story data with import function, or null
+ */
+export function getStoryData(name) {
+  return dataIndex.stories[name] ?? null
+}
+
 export { deepMerge }

package/src/loader.test.js

@@ -1,4 +1,4 @@
-import { init, loadFlow, listFlows, flowExists, loadScene, listScenes, sceneExists, loadRecord, findRecord, loadObject, deepMerge, resolveFlowName, resolveRecordName, resolveObjectName, listFolders, getFolderMetadata } from './loader.js'
+import { init, loadFlow, listFlows, flowExists, loadScene, listScenes, sceneExists, loadRecord, findRecord, loadObject, deepMerge, resolveFlowName, resolveRecordName, resolveObjectName, listFolders, getFolderMetadata, listStories, getStoryData } from './loader.js'
 
 const makeIndex = () => ({
   flows: {
@@ -535,3 +535,65 @@ describe('getFolderMetadata', () => {
     expect(meta).toEqual({ meta: { title: 'My Folder', description: 'A folder' } })
   })
 })
+
+describe('listStories', () => {
+  it('returns empty array when no stories are indexed', () => {
+    init(makeIndex())
+    expect(listStories()).toEqual([])
+  })
+
+  it('returns story names when stories are indexed', () => {
+    init({
+      ...makeIndex(),
+      stories: {
+        'button-patterns': { _storyModule: '/src/button-patterns.story.jsx' },
+        'card': { _storyModule: '/src/card.story.jsx' },
+      },
+    })
+    expect(listStories()).toEqual(['button-patterns', 'card'])
+  })
+})
+
+describe('getStoryData', () => {
+  it('returns null for unknown story', () => {
+    init(makeIndex())
+    expect(getStoryData('nonexistent')).toBeNull()
+  })
+
+  it('returns story data when story exists', () => {
+    const mockImport = vi.fn()
+    init({
+      ...makeIndex(),
+      stories: {
+        'button-patterns': {
+          _storyModule: '/src/button-patterns.story.jsx',
+          _storyImport: mockImport,
+        },
+      },
+    })
+    const story = getStoryData('button-patterns')
+    expect(story).toBeTruthy()
+    expect(story._storyModule).toBe('/src/button-patterns.story.jsx')
+    expect(story._storyImport).toBe(mockImport)
+  })
+})
+
+describe('init with stories', () => {
+  it('defaults stories to empty object when not provided', () => {
+    init({ flows: {}, objects: {}, records: {} })
+    expect(listStories()).toEqual([])
+  })
+
+  it('stores stories when provided', () => {
+    init({
+      flows: {},
+      objects: {},
+      records: {},
+      stories: {
+        test: { _storyModule: '/test.story.jsx' },
+      },
+    })
+    expect(listStories()).toEqual(['test'])
+    expect(getStoryData('test')).toBeTruthy()
+  })
+})

package/src/mobileViewport.js

@@ -0,0 +1,57 @@
+/**
+ * Mobile viewport detection — reactive store for compact viewport state.
+ *
+ * Uses window.matchMedia for efficient, debounce-free detection.
+ * Threshold: 500px (matches the mobile breakpoint for toolbar compacting).
+ */
+
+const MOBILE_QUERY = '(max-width: 499px)'
+
+/** @type {boolean} */
+let _isMobile = false
+
+/** @type {Set<(mobile: boolean) => void>} */
+const _listeners = new Set()
+
+/** @type {MediaQueryList | null} */
+let _mql = null
+
+function _handleChange(e) {
+  _isMobile = e.matches
+  for (const cb of _listeners) cb(_isMobile)
+}
+
+// Initialize on load (SSR-safe)
+if (typeof window !== 'undefined') {
+  _mql = window.matchMedia(MOBILE_QUERY)
+  _isMobile = _mql.matches
+  _mql.addEventListener('change', _handleChange)
+}
+
+/**
+ * Returns true when the viewport is narrower than 500px.
+ * @returns {boolean}
+ */
+export function isMobile() {
+  return _isMobile
+}
+
+/**
+ * Subscribe to mobile state changes.
+ * @param {(mobile: boolean) => void} callback
+ * @returns {() => void} unsubscribe
+ */
+export function subscribeToMobile(callback) {
+  _listeners.add(callback)
+  return () => _listeners.delete(callback)
+}
+
+/**
+ * Check if the device has a coarse pointer (touch device).
+ * Useful for PWA install prompts — avoids showing on narrow desktop windows.
+ * @returns {boolean}
+ */
+export function isTouchDevice() {
+  if (typeof window === 'undefined') return false
+  return window.matchMedia('(pointer: coarse)').matches
+}

package/src/mobileViewport.test.js

@@ -0,0 +1,68 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+
+describe('mobileViewport', () => {
+  let matchMediaListeners = []
+  let matchMediaMatches = false
+
+  beforeEach(() => {
+    matchMediaListeners = []
+    matchMediaMatches = false
+
+    vi.stubGlobal('matchMedia', vi.fn((query) => {
+      const mql = {
+        matches: matchMediaMatches,
+        media: query,
+        addEventListener: vi.fn((event, cb) => {
+          matchMediaListeners.push(cb)
+        }),
+        removeEventListener: vi.fn(),
+      }
+      return mql
+    }))
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+    vi.resetModules()
+  })
+
+  it('isMobile returns false for wide viewports', async () => {
+    matchMediaMatches = false
+    const { isMobile } = await import('./mobileViewport.js')
+    expect(isMobile()).toBe(false)
+  })
+
+  it('isMobile returns true for narrow viewports', async () => {
+    matchMediaMatches = true
+    const { isMobile } = await import('./mobileViewport.js')
+    expect(isMobile()).toBe(true)
+  })
+
+  it('subscribeToMobile notifies on change', async () => {
+    matchMediaMatches = false
+    const { isMobile, subscribeToMobile } = await import('./mobileViewport.js')
+
+    const cb = vi.fn()
+    const unsub = subscribeToMobile(cb)
+
+    // Simulate matchMedia change event
+    const changeHandler = matchMediaListeners[0]
+    expect(changeHandler).toBeDefined()
+    changeHandler({ matches: true })
+
+    expect(cb).toHaveBeenCalledWith(true)
+    expect(isMobile()).toBe(true)
+
+    unsub()
+    changeHandler({ matches: false })
+    // Should not be called after unsubscribe
+    expect(cb).toHaveBeenCalledTimes(1)
+  })
+
+  it('isTouchDevice checks pointer: coarse', async () => {
+    const { isTouchDevice } = await import('./mobileViewport.js')
+    // Our mock returns matchMediaMatches for all queries
+    matchMediaMatches = false
+    expect(isTouchDevice()).toBe(false)
+  })
+})

package/src/mountStoryboardCore.js

@@ -17,6 +17,7 @@ import { initCommentsConfig, isCommentsEnabled } from './comments/config.js'
 import { initFeatureFlags } from './featureFlags.js'
 import { initPlugins } from './plugins.js'
 import { initUIConfig } from './uiConfig.js'
+import { initCanvasConfig } from './canvasConfig.js'
 import { initToolbarConfig } from './toolbarConfigStore.js'
 
 let _mounted = false
@@ -156,6 +157,10 @@ export async function mountStoryboardCore(config = {}, options = {}) {
     initUIConfig(config.ui)
   }
 
+  if (config.canvas) {
+    initCanvasConfig(config.canvas)
+  }
+
   // Initialize comments config (framework-agnostic)
   if (config.comments) {
     initCommentsConfig(config, { basePath })
@@ -220,6 +225,49 @@ export async function mountStoryboardCore(config = {}, options = {}) {
       history.replaceState = (...args) => { origReplace(...args); broadcastNavigation() }
       window.addEventListener('popstate', broadcastNavigation)
       window.addEventListener('hashchange', broadcastNavigation)
+
+      // Signal render-ready after app settles.
+      // Uses a 3s delay as a fallback — React components, data loading, and
+      // animations need time. Individual page types (StoryPage) may also
+      // send their own snapshot-ready after they finish rendering.
+      Promise.all([
+        document.fonts?.ready || Promise.resolve(),
+        new Promise(r => setTimeout(r, 3000)),
+      ]).then(() => {
+        window.parent.postMessage({ type: 'storyboard:embed:snapshot-ready' }, '*')
+      })
+
+      // Listen for snapshot capture requests from the parent canvas
+      window.addEventListener('message', async (e) => {
+        if (e.data?.type !== 'storyboard:embed:capture') return
+        const { requestId } = e.data
+        try {
+          const { toBlob } = await import('html-to-image')
+          const blob = await toBlob(document.body, {
+            type: 'image/webp',
+            quality: 0.85,
+            width: document.documentElement.clientWidth,
+            height: document.documentElement.clientHeight,
+            pixelRatio: 2,
+          })
+          if (!blob) throw new Error('Capture returned empty blob')
+          const reader = new FileReader()
+          reader.onload = () => {
+            window.parent.postMessage({
+              type: 'storyboard:embed:snapshot',
+              requestId,
+              dataUrl: reader.result,
+            }, '*')
+          }
+          reader.readAsDataURL(blob)
+        } catch (err) {
+          window.parent.postMessage({
+            type: 'storyboard:embed:snapshot',
+            requestId,
+            error: err.message,
+          }, '*')
+        }
+      })
     }
     return
   }
@@ -253,21 +301,21 @@ export async function mountStoryboardCore(config = {}, options = {}) {
  * success message is lost. This shows a temporary toast with the link.
  */
 function showPendingNotification(basePath) {
-  const KEYS = ['sb-canvas-created', 'sb-prototype-created', 'sb-flow-created']
+  const KEYS = ['sb-canvas-created', 'sb-prototype-created', 'sb-flow-created', 'sb-story-created']
   for (const key of KEYS) {
     try {
       const raw = sessionStorage.getItem(key)
       if (!raw) continue
       sessionStorage.removeItem(key)
-      const { success: message, route } = JSON.parse(raw)
+      const { success: message, route, path: filePath } = JSON.parse(raw)
       if (!message) continue
-      showToast(message, route, basePath)
+      showToast(message, route, basePath, filePath)
       return
     } catch { /* ignore malformed session entry */ }
   }
 }
 
-function showToast(message, route, basePath) {
+function showToast(message, route, basePath, filePath) {
   const toast = document.createElement('div')
   Object.assign(toast.style, {
     position: 'fixed',
@@ -287,12 +335,18 @@ function showToast(message, route, basePath) {
     gap: '0.25rem',
     opacity: '0',
     transition: 'opacity 0.15s ease',
-    maxWidth: '280px',
+    maxWidth: '320px',
   })
 
   const href = route?.startsWith('/') ? (basePath.replace(/\/$/, '') + route) : route
-  toast.innerHTML = `<span style="font-weight:500">✓ ${message.replace(/</g, '&lt;')}</span>`
-    + (href ? `<a href="${href}" style="color:var(--sb--color-primary, #0969da);text-decoration:underline;font-size:0.8125rem">Open canvas</a>` : '')
+  let html = `<span style="font-weight:500">✓ ${message.replace(/</g, '&lt;')}</span>`
+  if (href) {
+    html += `<a href="${href}" style="color:var(--sb--color-primary, #0969da);text-decoration:underline;font-size:0.8125rem">Open canvas</a>`
+  }
+  if (filePath) {
+    html += `<span style="font-size:0.75rem;color:var(--sb--color-muted, #64748b)">To edit your component, go to <code style="background:var(--sb--color-muted-bg, #f1f5f9);padding:1px 4px;border-radius:3px;font-size:0.75rem">${filePath.replace(/</g, '&lt;')}</code></span>`
+  }
+  toast.innerHTML = html
 
   document.body.appendChild(toast)
   requestAnimationFrame(() => { toast.style.opacity = '1' })

package/src/rename-watcher/config.json

@@ -0,0 +1,23 @@
+{
+  "watch": [
+    {
+      "path": "src/prototypes",
+      "extensions": [".jsx", ".tsx", ".mdx"],
+      "type": "prototype"
+    },
+    {
+      "path": "src/canvas",
+      "extensions": [".canvas.jsonl"],
+      "type": "canvas"
+    }
+  ],
+  "exclude": {
+    "filePrefixes": ["_"],
+    "directories": ["node_modules", ".git", "dist", "images", ".worktrees"]
+  },
+  "debounceMs": 500,
+  "autocommit": {
+    "enabled": true,
+    "prefix": "[storyboard-autofix]"
+  }
+}