@dfosco/storyboard-react 4.0.0-beta.3 → 4.0.0-beta.31

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.0.0-beta.3",
+  "version": "4.0.0-beta.31",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "4.0.0-beta.3",
-    "@dfosco/tiny-canvas": "4.0.0-beta.3",
+    "@dfosco/storyboard-core": "4.0.0-beta.31",
+    "@dfosco/tiny-canvas": "4.0.0-beta.31",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
-    "jsonc-parser": "^3.3.1"
+    "jsonc-parser": "^3.3.1",
+    "remark": "^15.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-html": "^16.0.1"
   },
   "license": "MIT",
   "repository": {

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.bridge.test.jsx

@@ -1,7 +1,7 @@
-import { fireEvent, render, screen, act } from '@testing-library/react'
+import { fireEvent, render, screen, act, waitFor } from '@testing-library/react'
 import CanvasPage from './CanvasPage.jsx'
 import { getCanvasPrimerAttrs, getCanvasThemeVars } from './canvasTheme.js'
-import { updateCanvas } from './canvasApi.js'
+import { addWidget, checkGitHubCliAvailable, fetchGitHubEmbed, updateCanvas } from './canvasApi.js'
 
 vi.mock('@dfosco/tiny-canvas', () => ({
   Canvas: ({ children, onDragEnd }) => (
@@ -77,6 +77,8 @@ vi.mock('./widgets/figmaUrl.js', () => ({
 
 vi.mock('./canvasApi.js', () => ({
   addWidget: vi.fn(),
+  checkGitHubCliAvailable: vi.fn(),
+  fetchGitHubEmbed: vi.fn(),
   updateCanvas: vi.fn(() => Promise.resolve({ success: true })),
   removeWidget: vi.fn(),
   uploadImage: vi.fn(),
@@ -94,9 +96,26 @@ vi.mock('./useUndoRedo.js', () => ({
 }))
 
 describe('CanvasPage canvas bridge', () => {
+  function dispatchTextPaste(text) {
+    const event = new Event('paste', { bubbles: true, cancelable: true })
+    Object.defineProperty(event, 'clipboardData', {
+      value: {
+        getData: (type) => (type === 'text/plain' ? text : ''),
+        items: [],
+      },
+    })
+    document.dispatchEvent(event)
+  }
+
   beforeEach(() => {
     delete window.__storyboardCanvasBridgeState
     vi.clearAllMocks()
+    addWidget.mockResolvedValue({
+      success: true,
+      widget: { id: 'widget-link', type: 'link-preview', position: { x: 0, y: 0 }, props: {} },
+    })
+    checkGitHubCliAvailable.mockResolvedValue({ available: true })
+    fetchGitHubEmbed.mockResolvedValue({ success: false })
   })
 
   it('publishes bridge state and responds to status requests', () => {
@@ -105,11 +124,11 @@ describe('CanvasPage canvas bridge', () => {
     document.addEventListener('storyboard:canvas:mounted', mountedHandler)
     document.addEventListener('storyboard:canvas:status', statusHandler)
 
-    const { unmount } = render(<CanvasPage name="design-overview" />)
+    const { unmount } = render(<CanvasPage canvasId="design-overview" />)
 
     expect(window.__storyboardCanvasBridgeState).toEqual({
       active: true,
-      name: 'design-overview',
+      canvasId: 'design-overview',
       zoom: 100,
     })
     expect(mountedHandler).toHaveBeenCalled()
@@ -118,7 +137,7 @@ describe('CanvasPage canvas bridge', () => {
     expect(statusHandler).toHaveBeenCalled()
     expect(statusHandler.mock.calls.at(-1)?.[0]?.detail).toEqual({
       active: true,
-      name: 'design-overview',
+      canvasId: 'design-overview',
       zoom: 100,
     })
 
@@ -132,22 +151,88 @@ describe('CanvasPage canvas bridge', () => {
     const unmountedHandler = vi.fn()
     document.addEventListener('storyboard:canvas:unmounted', unmountedHandler)
 
-    const { unmount } = render(<CanvasPage name="design-overview" />)
+    const { unmount } = render(<CanvasPage canvasId="design-overview" />)
     unmount()
 
     expect(unmountedHandler).toHaveBeenCalled()
     expect(window.__storyboardCanvasBridgeState).toEqual({
       active: false,
-      name: '',
+      canvasId: '',
       zoom: 100,
     })
 
     document.removeEventListener('storyboard:canvas:unmounted', unmountedHandler)
   })
 
-  it.skip('persists dragged JSON widgets and JSX sources to canvas JSONL via update API', async () => {
+  it('shows gh install banner when gh is unavailable during GitHub URL paste', async () => {
+    checkGitHubCliAvailable.mockResolvedValue({
+      available: false,
+      installUrl: 'https://github.com/cli/cli',
+    })
+
     render(<CanvasPage name="design-overview" />)
 
+    await act(async () => {
+      dispatchTextPaste('https://github.com/dfosco/storyboard/issues/42')
+      await Promise.resolve()
+    })
+
+    await waitFor(() => {
+      expect(addWidget).toHaveBeenCalled()
+    })
+    expect(fetchGitHubEmbed).not.toHaveBeenCalled()
+    expect(screen.getByRole('link', { name: 'Install GitHub CLI' })).toHaveAttribute(
+      'href',
+      'https://github.com/cli/cli',
+    )
+  })
+
+  it('hydrates GitHub metadata when gh is available during paste', async () => {
+    checkGitHubCliAvailable.mockResolvedValue({ available: true })
+    fetchGitHubEmbed.mockResolvedValue({
+      success: true,
+      snapshot: {
+        kind: 'issue',
+        parentKind: 'issue',
+        context: 'GitHub · dfosco/storyboard · Issue #42',
+        title: '#42 Ship GitHub embeds',
+        body: 'Details from GitHub',
+        authors: ['dfosco'],
+        createdAt: '2026-01-01T00:00:00Z',
+        updatedAt: '2026-01-02T00:00:00Z',
+      },
+    })
+
+    render(<CanvasPage name="design-overview" />)
+
+    await act(async () => {
+      dispatchTextPaste('https://github.com/dfosco/storyboard/issues/42')
+      await Promise.resolve()
+    })
+
+    await waitFor(() => {
+      expect(fetchGitHubEmbed).toHaveBeenCalledWith('https://github.com/dfosco/storyboard/issues/42')
+    })
+    expect(addWidget).toHaveBeenCalledWith(
+      'design-overview',
+      expect.objectContaining({
+        type: 'link-preview',
+        props: expect.objectContaining({
+          title: '#42 Ship GitHub embeds',
+          width: 580,
+          height: 400,
+          github: expect.objectContaining({
+            context: 'GitHub · dfosco/storyboard · Issue #42',
+            body: 'Details from GitHub',
+          }),
+        }),
+      }),
+    )
+  })
+
+  it.skip('persists dragged JSON widgets and JSX sources to canvas JSONL via update API', async () => {
+    render(<CanvasPage canvasId="design-overview" />)
+
     fireEvent.click(screen.getByTestId('drag-widget'))
     // Flush the promise-based write queue
     await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
@@ -179,7 +264,7 @@ describe('CanvasPage canvas bridge', () => {
   })
 
   it.skip('clamps negative drag positions to zero', async () => {
-    render(<CanvasPage name="design-overview" />)
+    render(<CanvasPage canvasId="design-overview" />)
 
     fireEvent.click(screen.getByTestId('drag-widget-negative'))
     await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
@@ -243,7 +328,7 @@ describe('canvas target fallback', () => {
     localStorage.setItem('sb-color-scheme', 'dark')
     document.documentElement.setAttribute('data-sb-canvas-theme', 'dark')
 
-    render(<CanvasPage name="design-overview" />)
+    render(<CanvasPage canvasId="design-overview" />)
 
     const scroll = document.querySelector('[data-storyboard-canvas-scroll]')
     const jsxWidget = document.getElementById('jsx-PrimaryButtons')

package/src/canvas/CanvasPage.dragdrop.test.jsx

@@ -0,0 +1,346 @@
+/**
+ * Tests for canvas image drag-and-drop functionality.
+ *
+ * Tests the event handling for dropping images from Finder/file manager
+ * onto the canvas, including coordinate conversion and file filtering.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { fireEvent, render, act, waitFor } from '@testing-library/react'
+import CanvasPage from './CanvasPage.jsx'
+import { addWidget, uploadImage } from './canvasApi.js'
+
+// Mock dependencies
+vi.mock('@dfosco/tiny-canvas', () => ({
+  Canvas: ({ children }) => <div data-testid="tiny-canvas">{children}</div>,
+}))
+
+const mockCanvas = {
+  title: 'Drag Drop Test Canvas',
+  widgets: [],
+  sources: [],
+  centered: false,
+  dotted: false,
+  grid: true,
+  gridSize: 24,
+  colorMode: 'auto',
+}
+
+vi.mock('./useCanvas.js', () => ({
+  useCanvas: () => ({
+    canvas: mockCanvas,
+    jsxExports: {},
+    loading: false,
+  }),
+}))
+
+vi.mock('./widgets/index.js', () => ({
+  getWidgetComponent: () => function MockWidget() {
+    return <div>mock widget</div>
+  },
+}))
+
+vi.mock('./widgets/WidgetChrome.jsx', () => ({
+  default: ({ children }) => <div data-testid="widget-chrome">{children}</div>,
+}))
+
+vi.mock('./widgets/widgetProps.js', () => ({
+  schemas: {},
+  getDefaults: () => ({}),
+}))
+
+vi.mock('./widgets/widgetConfig.js', () => ({
+  getFeatures: () => [],
+  isResizable: () => false,
+  schemas: {},
+  getMenuWidgetTypes: () => [],
+}))
+
+vi.mock('./widgets/figmaUrl.js', () => ({
+  isFigmaUrl: () => false,
+  sanitizeFigmaUrl: (url) => url,
+}))
+
+vi.mock('./canvasApi.js', () => ({
+  addWidget: vi.fn(() => Promise.resolve({ success: true, widget: { id: 'image-abc', type: 'image' } })),
+  updateCanvas: vi.fn(() => Promise.resolve({ success: true })),
+  removeWidget: vi.fn(),
+  uploadImage: vi.fn(() => Promise.resolve({ success: true, filename: 'test-image.png' })),
+}))
+
+vi.mock('./useUndoRedo.js', () => ({
+  default: () => ({
+    snapshot: vi.fn(),
+    undo: vi.fn(),
+    redo: vi.fn(),
+    reset: vi.fn(),
+    canUndo: false,
+    canRedo: false,
+  }),
+}))
+
+// Helper to create a mock File
+function createMockImageFile(name = 'test.png', type = 'image/png') {
+  const blob = new Blob(['fake image data'], { type })
+  return new File([blob], name, { type })
+}
+
+// Helper to create a DataTransfer-like object
+function createDataTransfer(files, types = ['Files']) {
+  return {
+    files,
+    types,
+    dropEffect: 'none',
+  }
+}
+
+describe('CanvasPage image drag-and-drop', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Mock FileReader for blobToDataUrl
+    global.FileReader = class {
+      readAsDataURL() {
+        setTimeout(() => {
+          this.result = 'data:image/png;base64,fakedata'
+          this.onload?.()
+        }, 0)
+      }
+    }
+    // Mock Image for getImageDimensions
+    global.Image = class {
+      set src(val) {
+        setTimeout(() => {
+          this.naturalWidth = 800
+          this.naturalHeight = 600
+          this.onload?.()
+        }, 0)
+      }
+    }
+  })
+
+  afterEach(() => {
+    delete global.FileReader
+    delete global.Image
+  })
+
+  it('allows drop by preventing default on dragover with Files', () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const dragOverEvent = new Event('dragover', { bubbles: true, cancelable: true })
+    dragOverEvent.dataTransfer = createDataTransfer([], ['Files'])
+    dragOverEvent.preventDefault = vi.fn()
+
+    scrollContainer.dispatchEvent(dragOverEvent)
+
+    expect(dragOverEvent.preventDefault).toHaveBeenCalled()
+    expect(dragOverEvent.dataTransfer.dropEffect).toBe('copy')
+  })
+
+  it('ignores dragover without Files type (internal widget drag)', () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const dragOverEvent = new Event('dragover', { bubbles: true, cancelable: true })
+    dragOverEvent.dataTransfer = createDataTransfer([], ['text/plain'])
+    dragOverEvent.preventDefault = vi.fn()
+
+    scrollContainer.dispatchEvent(dragOverEvent)
+
+    expect(dragOverEvent.preventDefault).not.toHaveBeenCalled()
+  })
+
+  it('uploads image and creates widget on drop', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const imageFile = createMockImageFile('photo.png', 'image/png')
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([imageFile], ['Files'])
+    dropEvent.clientX = 200
+    dropEvent.clientY = 150
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    // Mock getBoundingClientRect for coordinate calculation
+    scrollContainer.getBoundingClientRect = () => ({
+      left: 0,
+      top: 0,
+      width: 1000,
+      height: 800,
+    })
+    scrollContainer.scrollLeft = 0
+    scrollContainer.scrollTop = 0
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      // Wait for async processing
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    expect(dropEvent.preventDefault).toHaveBeenCalled()
+    expect(uploadImage).toHaveBeenCalledWith(
+      expect.stringContaining('data:image/png'),
+      'test-canvas'
+    )
+    expect(addWidget).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        type: 'image',
+        props: expect.objectContaining({
+          src: 'test-image.png',
+          private: false,
+        }),
+        position: expect.objectContaining({
+          x: expect.any(Number),
+          y: expect.any(Number),
+        }),
+      })
+    )
+  })
+
+  it('ignores non-image files but prevents browser default', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const textFile = new File(['text content'], 'readme.txt', { type: 'text/plain' })
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([textFile], ['Files'])
+    dropEvent.clientX = 200
+    dropEvent.clientY = 150
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    scrollContainer.getBoundingClientRect = () => ({ left: 0, top: 0 })
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    // Should prevent default (stops browser from opening the file)
+    expect(dropEvent.preventDefault).toHaveBeenCalled()
+    // But should not call upload or add widget for non-image files
+    expect(uploadImage).not.toHaveBeenCalled()
+    expect(addWidget).not.toHaveBeenCalled()
+  })
+
+  it('processes multiple image files on drop', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const image1 = createMockImageFile('photo1.png', 'image/png')
+    const image2 = createMockImageFile('photo2.jpg', 'image/jpeg')
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([image1, image2], ['Files'])
+    dropEvent.clientX = 100
+    dropEvent.clientY = 100
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    scrollContainer.getBoundingClientRect = () => ({ left: 0, top: 0, width: 1000, height: 800 })
+    scrollContainer.scrollLeft = 0
+    scrollContainer.scrollTop = 0
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      // Wait longer for multiple async operations
+      await new Promise((r) => setTimeout(r, 150))
+    })
+
+    // Should call upload for each image
+    expect(uploadImage).toHaveBeenCalledTimes(2)
+    expect(addWidget).toHaveBeenCalledTimes(2)
+  })
+
+  it('ignores drop without Files type', async () => {
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([], ['text/html'])
+    dropEvent.preventDefault = vi.fn()
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+    })
+
+    expect(dropEvent.preventDefault).not.toHaveBeenCalled()
+    expect(uploadImage).not.toHaveBeenCalled()
+  })
+
+  it('snaps drop position to grid when snap is enabled', async () => {
+    // Enable snap in mock data
+    const originalSnapToGrid = mockCanvas.snapToGrid
+    mockCanvas.snapToGrid = true
+
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const imageFile = createMockImageFile()
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([imageFile], ['Files'])
+    // Position that should snap: 137 → 144 (gridSize 24: round(137/24)*24 = 144)
+    dropEvent.clientX = 137
+    dropEvent.clientY = 85 // 85 → 96
+
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    scrollContainer.getBoundingClientRect = () => ({ left: 0, top: 0, width: 1000, height: 800 })
+    scrollContainer.scrollLeft = 0
+    scrollContainer.scrollTop = 0
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    expect(addWidget).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        position: { x: 144, y: 96 },
+      })
+    )
+
+    // Restore
+    mockCanvas.snapToGrid = originalSnapToGrid
+  })
+
+  it('does not snap drop position when snap is disabled', async () => {
+    // Ensure snap is disabled (default from mock)
+    const originalSnapToGrid = mockCanvas.snapToGrid
+    mockCanvas.snapToGrid = false
+
+    render(<CanvasPage canvasId="test-canvas" />)
+    const scrollContainer = document.querySelector('[data-storyboard-canvas-scroll]')
+
+    const imageFile = createMockImageFile()
+    const dropEvent = new Event('drop', { bubbles: true, cancelable: true })
+    dropEvent.dataTransfer = createDataTransfer([imageFile], ['Files'])
+    // Position should round to nearest integer, not snap to grid
+    dropEvent.clientX = 137
+    dropEvent.clientY = 85
+
+    dropEvent.preventDefault = vi.fn()
+    dropEvent.stopPropagation = vi.fn()
+
+    scrollContainer.getBoundingClientRect = () => ({ left: 0, top: 0, width: 1000, height: 800 })
+    scrollContainer.scrollLeft = 0
+    scrollContainer.scrollTop = 0
+
+    await act(async () => {
+      scrollContainer.dispatchEvent(dropEvent)
+      await new Promise((r) => setTimeout(r, 50))
+    })
+
+    expect(addWidget).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        position: { x: 137, y: 85 }, // No snapping, just rounded integers
+      })
+    )
+
+    // Restore
+    mockCanvas.snapToGrid = originalSnapToGrid
+  })
+})