@dfosco/storyboard-react 3.11.0-beta.7 → 3.11.0-beta.9

package/package.json

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

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

@@ -65,6 +65,7 @@ vi.mock('./widgets/widgetProps.js', () => ({
 
 vi.mock('./widgets/widgetConfig.js', () => ({
   getFeatures: () => [],
+  isResizable: () => false,
   schemas: {},
   getMenuWidgetTypes: () => [],
 }))

package/src/canvas/CanvasPage.jsx

@@ -7,7 +7,7 @@ import { shouldPreventCanvasTextSelection } from './textSelection.js'
 import { getCanvasThemeVars, getCanvasPrimerAttrs } from './canvasTheme.js'
 import { getWidgetComponent } from './widgets/index.js'
 import { schemas, getDefaults } from './widgets/widgetProps.js'
-import { getFeatures } from './widgets/widgetConfig.js'
+import { getFeatures, isResizable } from './widgets/widgetConfig.js'
 import { isFigmaUrl, sanitizeFigmaUrl } from './widgets/figmaUrl.js'
 import WidgetChrome from './widgets/WidgetChrome.jsx'
 import ComponentWidget from './widgets/ComponentWidget.jsx'
@@ -209,8 +209,9 @@ function WidgetRenderer({ widget, onUpdate, widgetRef }) {
     console.warn(`[canvas] Unknown widget type: ${widget.type}`)
     return null
   }
+  const resizable = isResizable(widget.type) && !!onUpdate
   // Only pass ref to forwardRef-wrapped components (e.g. PrototypeEmbed)
-  const elementProps = { id: widget.id, props: widget.props, onUpdate }
+  const elementProps = { id: widget.id, props: widget.props, onUpdate, resizable }
   if (Component.$$typeof === Symbol.for('react.forward_ref')) {
     elementProps.ref = widgetRef
   }
@@ -320,8 +321,11 @@ export default function CanvasPage({ name }) {
   /**
    * Selection handler — shift+click toggles in/out of multi-select set,
    * plain click single-selects (clears others).
+   * Suppressed immediately after a multi-drag to prevent the post-drag
+   * click from collapsing the selection.
    */
   const handleWidgetSelect = useCallback((widgetId, shiftKey) => {
+    if (justDraggedRef.current) return
     if (shiftKey) {
       setSelectedWidgetIds(prev => {
         const next = new Set(prev)
@@ -337,62 +341,53 @@ export default function CanvasPage({ name }) {
     }
   }, [])
 
-  // --- Multi-select live drag preview via imperative DOM transforms ---
-  // On drag start, snapshot ALL articles' translate values (same coord space).
-  // On each tick, read dragged article's current translate, compute delta
-  // from its snapshot, apply same delta to all peers.
-  const draggedArticleRef = useRef(null)
-  const draggedStartTranslate = useRef({ x: 0, y: 0 })
-  const peerSnapshots = useRef(new Map())
-
-  function parseTranslate(article) {
-    const raw = article?.style.translate || '0px 0px'
-    const parts = raw.match(/-?[\d.]+/g) || [0, 0]
-    return { x: parseFloat(parts[0]) || 0, y: parseFloat(parts[1]) || 0 }
-  }
+  // --- Multi-select drag: peers animate to new positions on drag end ---
+  // During drag, only the dragged widget moves (via neodrag). On drag end,
+  // peer widget positions are updated via React state, and we add the
+  // tc-on-translation class so they animate smoothly to their new spots.
+  const peerArticlesRef = useRef(new Map())
+  // Flag to suppress the click-based selection reset that fires after a drag
+  const justDraggedRef = useRef(false)
 
-  const handleItemDragStart = useCallback((dragId) => {
+  const handleItemDragStart = useCallback((dragId, position) => {
     const ids = selectedIdsRef.current
-    peerSnapshots.current.clear()
-    draggedArticleRef.current = null
+    peerArticlesRef.current.clear()
     if (ids.size <= 1 || !ids.has(dragId)) return
 
-    // Snapshot dragged widget's article translate
-    const draggedEl = document.getElementById(dragId)
-    const draggedArticle = draggedEl?.closest('article')
-    if (!draggedArticle) return
-    draggedArticleRef.current = draggedArticle
-    draggedStartTranslate.current = parseTranslate(draggedArticle)
+    // Suppress selection changes for the duration of the drag
+    justDraggedRef.current = true
 
-    // Snapshot each peer's article translate
+    // Collect peer article elements for transition on drag end
     for (const id of ids) {
       if (id === dragId) continue
       const widgetEl = document.getElementById(id)
       const article = widgetEl?.closest('article')
       if (!article) continue
-      peerSnapshots.current.set(id, {
-        article,
-        ...parseTranslate(article),
-      })
+      peerArticlesRef.current.set(id, article)
     }
   }, [])
 
   const handleItemDrag = useCallback(() => {
-    if (!draggedArticleRef.current) return
-
-    // Read dragged article's CURRENT translate (set by neodrag)
-    const current = parseTranslate(draggedArticleRef.current)
-    const dx = current.x - draggedStartTranslate.current.x
-    const dy = current.y - draggedStartTranslate.current.y
+    // Peers stay put during drag — they animate on drag end
+  }, [])
 
-    for (const [, peer] of peerSnapshots.current) {
-      peer.article.style.translate = `${peer.x + dx}px ${peer.y + dy}px`
+  /** Add transition class to peer articles so they animate to new positions. */
+  const transitionPeers = useCallback(() => {
+    for (const [, article] of peerArticlesRef.current) {
+      article.classList.add('tc-on-translation')
     }
+    // Remove class after animation completes
+    const articles = [...peerArticlesRef.current.values()]
+    setTimeout(() => {
+      for (const article of articles) {
+        article.classList.remove('tc-on-translation')
+      }
+    }, 250 * 4)
+    peerArticlesRef.current.clear()
   }, [])
 
   const clearDragPreview = useCallback(() => {
-    peerSnapshots.current.clear()
-    draggedArticleRef.current = null
+    peerArticlesRef.current.clear()
   }, [])
 
   if (canvas !== trackedCanvas) {
@@ -514,40 +509,39 @@ export default function CanvasPage({ name }) {
   }, [name, debouncedSourceSave, undoRedo, snapEnabled, snapGridSize])
 
   const handleItemDragEnd = useCallback((dragId, position) => {
-    if (!dragId || !position) return
-    const rounded = { x: Math.max(0, roundPosition(position.x)), y: Math.max(0, roundPosition(position.y)) }
-
-    if (dragId.startsWith('jsx-')) {
-      undoRedo.snapshot(stateRef.current, 'move', dragId)
-      const sourceExport = dragId.replace(/^jsx-/, '')
-      setLocalSources((prev) => {
-        const current = Array.isArray(prev) ? prev : []
-        const next = current.some((s) => s?.export === sourceExport)
-          ? current.map((s) => (s?.export === sourceExport ? { ...s, position: rounded } : s))
-          : [...current, { export: sourceExport, position: rounded }]
-        queueWrite(() =>
-          updateCanvas(name, { sources: next }).catch((err) =>
-            console.error('[canvas] Failed to save source position:', err)
-          )
-        )
-        return next
-      })
+    if (!dragId || !position) {
+      clearDragPreview()
       return
     }
+    const rounded = { x: Math.max(0, roundPosition(position.x)), y: Math.max(0, roundPosition(position.y)) }
 
     const ids = selectedIdsRef.current
     // Multi-select move: apply same delta to all selected widgets
+    // Checked BEFORE the jsx- early return so mixed selections work
     if (ids.size > 1 && ids.has(dragId)) {
-      clearDragPreview()
+      transitionPeers()
+      // Suppress the click-based selection reset that fires after pointerup
+      justDraggedRef.current = true
+      requestAnimationFrame(() => { justDraggedRef.current = false })
       undoRedo.snapshot(stateRef.current, 'multi-move')
-      const currentWidgets = stateRef.current.widgets ?? []
-      const draggedWidget = currentWidgets.find(w => w.id === dragId)
-      if (!draggedWidget) return
-      const oldPos = draggedWidget.position || { x: 0, y: 0 }
+
+      // Compute delta from the dragged widget's old position
+      const isJsx = dragId.startsWith('jsx-')
+      let oldPos = { x: 0, y: 0 }
+      if (isJsx) {
+        const sourceExport = dragId.replace(/^jsx-/, '')
+        const source = (stateRef.current.sources ?? []).find(s => s?.export === sourceExport)
+        oldPos = source?.position || { x: 0, y: 0 }
+      } else {
+        const draggedWidget = (stateRef.current.widgets ?? []).find(w => w.id === dragId)
+        oldPos = draggedWidget?.position || { x: 0, y: 0 }
+      }
       const dx = rounded.x - oldPos.x
       const dy = rounded.y - oldPos.y
 
       debouncedSave.cancel()
+
+      // Update JSON widget positions
       setLocalWidgets((prev) => {
         if (!prev) return prev
         const next = prev.map((w) => {
@@ -570,6 +564,57 @@ export default function CanvasPage({ name }) {
         )
         return next
       })
+
+      // Update JSX source positions
+      setLocalSources((prev) => {
+        const current = Array.isArray(prev) ? prev : []
+        let changed = false
+        const next = current.map((s) => {
+          if (!s?.export) return s
+          const sid = `jsx-${s.export}`
+          if (sid === dragId) {
+            changed = true
+            return { ...s, position: rounded }
+          }
+          if (ids.has(sid)) {
+            changed = true
+            return {
+              ...s,
+              position: {
+                x: Math.max(0, roundPosition((s.position?.x ?? 0) + dx)),
+                y: Math.max(0, roundPosition((s.position?.y ?? 0) + dy)),
+              },
+            }
+          }
+          return s
+        })
+        if (changed) {
+          queueWrite(() =>
+            updateCanvas(name, { sources: next }).catch((err) =>
+              console.error('[canvas] Failed to save multi-move sources:', err)
+            )
+          )
+        }
+        return changed ? next : current
+      })
+      return
+    }
+
+    if (dragId.startsWith('jsx-')) {
+      undoRedo.snapshot(stateRef.current, 'move', dragId)
+      const sourceExport = dragId.replace(/^jsx-/, '')
+      setLocalSources((prev) => {
+        const current = Array.isArray(prev) ? prev : []
+        const next = current.some((s) => s?.export === sourceExport)
+          ? current.map((s) => (s?.export === sourceExport ? { ...s, position: rounded } : s))
+          : [...current, { export: sourceExport, position: rounded }]
+        queueWrite(() =>
+          updateCanvas(name, { sources: next }).catch((err) =>
+            console.error('[canvas] Failed to save source position:', err)
+          )
+        )
+        return next
+      })
       return
     }
 
@@ -586,7 +631,7 @@ export default function CanvasPage({ name }) {
       )
       return next
     })
-  }, [name, undoRedo, debouncedSave, clearDragPreview])
+  }, [name, undoRedo, debouncedSave, transitionPeers, clearDragPreview])
 
   useEffect(() => {
     zoomRef.current = zoom
@@ -1313,6 +1358,7 @@ export default function CanvasPage({ name }) {
               width={sourceData.width}
               height={sourceData.height}
               onUpdate={isLocalDev ? (updates) => handleSourceUpdate(exportName, updates) : undefined}
+              resizable={isResizable('component') && isLocalDev}
             />
           </WidgetChrome>
         </div>

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

@@ -15,10 +15,14 @@ vi.mock('./useUndoRedo.js', () => ({
   default: () => MOCK_UNDO_REDO,
 }))
 
-// Expose onDragEnd so tests can trigger drags with specific IDs
+// Expose drag callbacks so tests can trigger drags with specific IDs
+let capturedOnDragStart = null
+let capturedOnDrag = null
 let capturedOnDragEnd = null
 vi.mock('@dfosco/tiny-canvas', () => ({
-  Canvas: ({ children, onDragEnd }) => {
+  Canvas: ({ children, onDragStart, onDrag, onDragEnd }) => {
+    capturedOnDragStart = onDragStart
+    capturedOnDrag = onDrag
     capturedOnDragEnd = onDragEnd
     return <div data-testid="tiny-canvas">{children}</div>
   },
@@ -87,6 +91,7 @@ vi.mock('./widgets/widgetProps.js', () => ({
 
 vi.mock('./widgets/widgetConfig.js', () => ({
   getFeatures: () => [],
+  isResizable: () => false,
   schemas: {},
   getMenuWidgetTypes: () => [],
 }))
@@ -108,6 +113,8 @@ describe('CanvasPage multi-select', () => {
     delete window.__storyboardCanvasBridgeState
     window.__SB_LOCAL_DEV__ = true
     vi.clearAllMocks()
+    capturedOnDragStart = null
+    capturedOnDrag = null
     capturedOnDragEnd = null
   })
 
@@ -256,4 +263,83 @@ describe('CanvasPage multi-select', () => {
       })
     )
   })
+
+  it('multi-select drag captures peer articles on drag start', async () => {
+    render(<CanvasPage name="test-canvas" />)
+
+    // Multi-select w1 and w2
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // All drag callbacks should be captured
+    expect(capturedOnDragStart).toBeTruthy()
+    expect(capturedOnDrag).toBeTruthy()
+
+    // Trigger drag start — should not throw
+    act(() => {
+      capturedOnDragStart('w1', { x: 100, y: 100 })
+    })
+
+    // Drag tick — peers stay put (no live preview), should not throw
+    act(() => {
+      capturedOnDrag('w1', { x: 150, y: 200 })
+    })
+  })
+
+  it('multi-select drag preserves selection after drag end', async () => {
+    render(<CanvasPage name="test-canvas" />)
+
+    // Multi-select w1 and w2
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeDefined()
+    expect(screen.getByTestId('chrome-w2').dataset.selected).toBeDefined()
+
+    // Simulate full drag: start → drag → end
+    act(() => {
+      capturedOnDragStart('w1', { x: 100, y: 100 })
+    })
+    act(() => {
+      capturedOnDragEnd('w1', { x: 150, y: 200 })
+    })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // Selection should still include both widgets (justDraggedRef prevents collapse)
+    expect(screen.getByTestId('chrome-w1').dataset.selected).toBeDefined()
+    expect(screen.getByTestId('chrome-w2').dataset.selected).toBeDefined()
+  })
+
+  it('any selected widget can serve as drag handler for the group', async () => {
+    render(<CanvasPage name="test-canvas" />)
+
+    // Multi-select w1 (100,100), w2 (300,100), w3 (500,200)
+    fireEvent.click(screen.getByTestId('select-w1'))
+    fireEvent.click(screen.getByTestId('shift-select-w2'))
+    fireEvent.click(screen.getByTestId('shift-select-w3'))
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // Drag w2 (the middle one) to (350, 150) → delta (+50, +50)
+    act(() => {
+      capturedOnDragStart('w2', { x: 300, y: 100 })
+    })
+    act(() => {
+      capturedOnDragEnd('w2', { x: 350, y: 150 })
+    })
+    await act(async () => { await new Promise((r) => setTimeout(r, 0)) })
+
+    // All selected widgets should move by the same delta (+50, +50)
+    expect(updateCanvas).toHaveBeenCalledWith(
+      'test-canvas',
+      expect.objectContaining({
+        widgets: expect.arrayContaining([
+          expect.objectContaining({ id: 'w1', position: { x: 150, y: 150 } }),
+          expect.objectContaining({ id: 'w2', position: { x: 350, y: 150 } }),
+          expect.objectContaining({ id: 'w3', position: { x: 550, y: 250 } }),
+        ]),
+      })
+    )
+  })
 })

package/src/canvas/widgets/ComponentWidget.jsx

@@ -11,7 +11,7 @@ import styles from './ComponentWidget.module.css'
  * Double-click the overlay to enter interactive mode (dropdowns, buttons work).
  * Click outside to exit interactive mode.
  */
-export default function ComponentWidget({ component: Component, width, height, onUpdate }) {
+export default function ComponentWidget({ component: Component, width, height, onUpdate, resizable }) {
   const containerRef = useRef(null)
   const [interactive, setInteractive] = useState(false)
 
@@ -51,12 +51,14 @@ export default function ComponentWidget({ component: Component, width, height, o
             onDoubleClick={enterInteractive}
           />
         )}
-        <ResizeHandle
-          targetRef={containerRef}
-          minWidth={100}
-          minHeight={60}
-          onResize={handleResize}
-        />
+        {resizable && (
+          <ResizeHandle
+            targetRef={containerRef}
+            minWidth={100}
+            minHeight={60}
+            onResize={handleResize}
+          />
+        )}
       </div>
     </WidgetWrapper>
   )

package/src/canvas/widgets/FigmaEmbed.jsx

@@ -23,7 +23,7 @@ function FigmaLogo() {
 
 const TYPE_LABELS = { board: 'Board', design: 'Design', proto: 'Prototype' }
 
-export default forwardRef(function FigmaEmbed({ props, onUpdate }, ref) {
+export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, ref) {
   const url = readProp(props, 'url', figmaEmbedSchema)
   const width = readProp(props, 'width', figmaEmbedSchema)
   const height = readProp(props, 'height', figmaEmbedSchema)
@@ -139,29 +139,31 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate }, ref) {
           </div>
         )}
       </div>
-      <div
-        className={styles.resizeHandle}
-        onMouseDown={(e) => {
-          e.stopPropagation()
-          e.preventDefault()
-          const startX = e.clientX
-          const startY = e.clientY
-          const startW = width
-          const startH = height
-          function onMove(ev) {
-            const newW = Math.max(200, startW + ev.clientX - startX)
-            const newH = Math.max(150, startH + ev.clientY - startY)
-            onUpdate?.({ width: newW, height: newH })
-          }
-          function onUp() {
-            document.removeEventListener('mousemove', onMove)
-            document.removeEventListener('mouseup', onUp)
-          }
-          document.addEventListener('mousemove', onMove)
-          document.addEventListener('mouseup', onUp)
-        }}
-        onPointerDown={(e) => e.stopPropagation()}
-      />
+      {resizable && (
+        <div
+          className={styles.resizeHandle}
+          onMouseDown={(e) => {
+            e.stopPropagation()
+            e.preventDefault()
+            const startX = e.clientX
+            const startY = e.clientY
+            const startW = width
+            const startH = height
+            function onMove(ev) {
+              const newW = Math.max(200, startW + ev.clientX - startX)
+              const newH = Math.max(150, startH + ev.clientY - startY)
+              onUpdate?.({ width: newW, height: newH })
+            }
+            function onUp() {
+              document.removeEventListener('mousemove', onMove)
+              document.removeEventListener('mouseup', onUp)
+            }
+            document.addEventListener('mousemove', onMove)
+            document.addEventListener('mouseup', onUp)
+          }}
+          onPointerDown={(e) => e.stopPropagation()}
+        />
+      )}
     </WidgetWrapper>
     {createPortal(
       <div

package/src/canvas/widgets/ImageWidget.jsx

@@ -18,7 +18,7 @@ function getImageUrl(src) {
  * Canvas widget that displays a pasted image.
  * Supports aspect-ratio locked resize and privacy toggle.
  */
-const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate }, ref) {
+const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate, resizable }, ref) {
   const containerRef = useRef(null)
   const [naturalRatio, setNaturalRatio] = useState(null)
 
@@ -99,12 +99,14 @@ const ImageWidget = forwardRef(function ImageWidget({ props, onUpdate }, ref) {
             </span>
           )}
         </div>
-        <ResizeHandle
-          targetRef={containerRef}
-          minWidth={100}
-          minHeight={60}
-          onResize={(w) => handleResize(w)}
-        />
+        {resizable && (
+          <ResizeHandle
+            targetRef={containerRef}
+            minWidth={100}
+            minHeight={60}
+            onResize={(w) => handleResize(w)}
+          />
+        )}
       </div>
     </WidgetWrapper>
   )

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -29,7 +29,7 @@ function resolveCanvasThemeFromStorage() {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }
 
-export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
+export default forwardRef(function PrototypeEmbed({ props, onUpdate, resizable }, ref) {
   const src = readProp(props, 'src', prototypeEmbedSchema)
   const width = readProp(props, 'width', prototypeEmbedSchema)
   const height = readProp(props, 'height', prototypeEmbedSchema)
@@ -416,29 +416,31 @@ export default forwardRef(function PrototypeEmbed({ props, onUpdate }, ref) {
           </div>
         )}
       </div>
-      <div
-        className={styles.resizeHandle}
-        onMouseDown={(e) => {
-          e.stopPropagation()
-          e.preventDefault()
-          const startX = e.clientX
-          const startY = e.clientY
-          const startW = width
-          const startH = height
-          function onMove(ev) {
-            const newW = Math.max(200, startW + ev.clientX - startX)
-            const newH = Math.max(150, startH + ev.clientY - startY)
-            onUpdate?.({ width: newW, height: newH })
-          }
-          function onUp() {
-            document.removeEventListener('mousemove', onMove)
-            document.removeEventListener('mouseup', onUp)
-          }
-          document.addEventListener('mousemove', onMove)
-          document.addEventListener('mouseup', onUp)
-        }}
-        onPointerDown={(e) => e.stopPropagation()}
-      />
+      {resizable && (
+        <div
+          className={styles.resizeHandle}
+          onMouseDown={(e) => {
+            e.stopPropagation()
+            e.preventDefault()
+            const startX = e.clientX
+            const startY = e.clientY
+            const startW = width
+            const startH = height
+            function onMove(ev) {
+              const newW = Math.max(200, startW + ev.clientX - startX)
+              const newH = Math.max(150, startH + ev.clientY - startY)
+              onUpdate?.({ width: newW, height: newH })
+            }
+            function onUp() {
+              document.removeEventListener('mousemove', onMove)
+              document.removeEventListener('mouseup', onUp)
+            }
+            document.addEventListener('mousemove', onMove)
+            document.addEventListener('mouseup', onUp)
+          }}
+          onPointerDown={(e) => e.stopPropagation()}
+        />
+      )}
     </WidgetWrapper>
     {createPortal(
       <div

package/src/canvas/widgets/StickyNote.jsx

@@ -12,7 +12,7 @@ const COLORS = {
   orange: { bg: '#fff1e5', border: '#d18616', dot: '#e8a844' },
 }
 
-export default function StickyNote({ props, onUpdate }) {
+export default function StickyNote({ props, onUpdate, resizable }) {
   const text = readProp(props, 'text', stickyNoteSchema)
   const color = readProp(props, 'color', stickyNoteSchema)
   const width = readProp(props, 'width', stickyNoteSchema)
@@ -75,12 +75,14 @@ export default function StickyNote({ props, onUpdate }) {
             placeholder="Type here…"
           />
         )}
-        <ResizeHandle
-          targetRef={stickyRef}
-          minWidth={180}
-          minHeight={60}
-          onResize={handleResize}
-        />
+        {resizable && (
+          <ResizeHandle
+            targetRef={stickyRef}
+            minWidth={180}
+            minHeight={60}
+            onResize={handleResize}
+          />
+        )}
       </article>
     </div>
   )

package/src/canvas/widgets/StickyNote.test.jsx

@@ -49,16 +49,22 @@ describe('StickyNote', () => {
     expect(sticky.style.height).toBe('200px')
   })
 
-  it('renders a resize handle', () => {
-    const { container } = render(<StickyNote props={{ text: 'Hi' }} onUpdate={vi.fn()} />)
+  it('renders a resize handle when resizable', () => {
+    const { container } = render(<StickyNote props={{ text: 'Hi' }} onUpdate={vi.fn()} resizable />)
     const handle = container.querySelector('[role="separator"]')
     expect(handle).not.toBeNull()
   })
 
+  it('does not render a resize handle when not resizable', () => {
+    const { container } = render(<StickyNote props={{ text: 'Hi' }} onUpdate={vi.fn()} resizable={false} />)
+    const handle = container.querySelector('[role="separator"]')
+    expect(handle).toBeNull()
+  })
+
   it('calls onUpdate with new dimensions on resize drag', () => {
     const onUpdate = vi.fn()
     const { container } = render(
-      <StickyNote props={{ text: 'Hi', width: 200, height: 150 }} onUpdate={onUpdate} />
+      <StickyNote props={{ text: 'Hi', width: 200, height: 150 }} onUpdate={onUpdate} resizable />
     )
     const handle = container.querySelector('[role="separator"]')
     const sticky = container.querySelector('article')
@@ -78,7 +84,7 @@ describe('StickyNote', () => {
   it('enforces minimum dimensions during resize', () => {
     const onUpdate = vi.fn()
     const { container } = render(
-      <StickyNote props={{ text: 'Hi', width: 200, height: 150 }} onUpdate={onUpdate} />
+      <StickyNote props={{ text: 'Hi', width: 200, height: 150 }} onUpdate={onUpdate} resizable />
     )
     const handle = container.querySelector('[role="separator"]')
     const sticky = container.querySelector('article')

package/src/canvas/widgets/WidgetChrome.module.css

@@ -138,12 +138,14 @@
   border-color: var(--bgColor-accent-emphasis, #2f81f7);
 }
 
-.selectHandleActive {
+.selectHandleActive,
+:global([data-sb-canvas-theme^='dark']) .selectHandleActive {
   background: var(--bgColor-accent-emphasis, #2f81f7);
   border-color: var(--bgColor-accent-emphasis, #2f81f7);
 }
 
-.selectHandleActive:hover {
+.selectHandleActive:hover,
+:global([data-sb-canvas-theme^='dark']) .selectHandleActive:hover {
   background: var(--bgColor-accent-emphasis, #388bfd);
   border-color: var(--bgColor-accent-emphasis, #388bfd);
 }

package/src/canvas/widgets/widgetConfig.js

@@ -112,6 +112,19 @@ export function getFeatures(type) {
   return features
 }
 
+/**
+ * Check if a widget type supports resize in the current environment.
+ * Returns false if resize is disabled, or if in production and prod is not true.
+ * @param {string} type — widget type string
+ * @returns {boolean}
+ */
+export function isResizable(type) {
+  const resize = widgetTypes[type]?.resize
+  if (!resize?.enabled) return false
+  if (import.meta.env?.PROD && !resize.prod) return false
+  return true
+}
+
 /**
  * Get the display metadata (label, icon) for a widget type.
  * @param {string} type — widget type string

package/src/canvas/widgets/widgetConfig.test.js

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+import { isResizable, getFeatures, getWidgetMeta } from './widgetConfig.js'
+
+describe('isResizable', () => {
+  // Vitest runs with import.meta.env.PROD = true, so prod: false widgets
+  // correctly return false. This tests the production behavior.
+  it('returns false for resize-enabled widgets when prod is false (production env)', () => {
+    expect(isResizable('sticky-note')).toBe(false)
+    expect(isResizable('prototype')).toBe(false)
+    expect(isResizable('figma-embed')).toBe(false)
+    expect(isResizable('image')).toBe(false)
+    expect(isResizable('component')).toBe(false)
+  })
+
+  it('returns false for widget types with resize disabled', () => {
+    expect(isResizable('markdown')).toBe(false)
+    expect(isResizable('link-preview')).toBe(false)
+  })
+
+  it('returns false for unknown widget types', () => {
+    expect(isResizable('nonexistent')).toBe(false)
+  })
+})
+
+describe('getFeatures', () => {
+  it('returns features array for known widget types', () => {
+    const features = getFeatures('sticky-note')
+    expect(Array.isArray(features)).toBe(true)
+    expect(features.length).toBeGreaterThan(0)
+  })
+
+  it('returns empty array for unknown widget types', () => {
+    expect(getFeatures('nonexistent')).toEqual([])
+  })
+})
+
+describe('getWidgetMeta', () => {
+  it('returns label and icon for known types', () => {
+    const meta = getWidgetMeta('sticky-note')
+    expect(meta).toEqual({ label: 'Sticky Note', icon: '📝' })
+  })
+
+  it('returns null for unknown types', () => {
+    expect(getWidgetMeta('nonexistent')).toBeNull()
+  })
+})