@dfosco/storyboard-react 4.2.0-alpha.13 → 4.2.0-alpha.15

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.2.0-alpha.13",
+  "version": "4.2.0-alpha.15",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.2.0-alpha.13",
-    "@dfosco/tiny-canvas": "4.2.0-alpha.13",
+    "@dfosco/storyboard-core": "4.2.0-alpha.15",
+    "@dfosco/tiny-canvas": "4.2.0-alpha.15",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -68,13 +68,13 @@ export default forwardRef(function PrototypeEmbed({ id: widgetId, props, onUpdat
   const [expanded, setExpanded] = useState(false)
   const [filter, setFilter] = useState('')
   const [canvasTheme, setCanvasTheme] = useState(() => resolveCanvasThemeFromStorage())
-  const { active: embedActive, activate: activateEmbed, performanceMode, tooMany } = useEmbedActive(widgetId, embedRef)
   const inputRef = useRef(null)
   const filterRef = useRef(null)
   const embedRef = useRef(null)
   const iframeRef = useRef(null)
   const inlineContainerRef = useRef(null)
   const modalContainerRef = useRef(null)
+  const { active: embedActive, activate: activateEmbed, performanceMode, tooMany } = useEmbedActive(widgetId, embedRef)
 
   const iframeSrc = useMemo(() => {
     if (!rawSrc) return ''

package/src/canvas/widgets/TerminalWidget.jsx

@@ -323,7 +323,18 @@ export default forwardRef(function TerminalWidget({ id, props, onUpdate, resizab
 
   const handleClick = useCallback(() => {
     if (phase === 'ended') return
-    if (phase === 'live') termRef.current?.focus()
+    if (phase === 'live') {
+      // Save canvas scroll position — terminal focus can trigger browser scroll
+      const scrollEl = terminalRef.current?.closest('[class*="canvasScroll"]')
+      const scrollTop = scrollEl?.scrollTop
+      const scrollLeft = scrollEl?.scrollLeft
+      termRef.current?.focus({ preventScroll: true })
+      // Restore if browser scrolled anyway
+      if (scrollEl && (scrollEl.scrollTop !== scrollTop || scrollEl.scrollLeft !== scrollLeft)) {
+        scrollEl.scrollTop = scrollTop
+        scrollEl.scrollLeft = scrollLeft
+      }
+    }
   }, [phase])
 
   const handleStartSession = useCallback(() => {

package/src/canvas/widgets/useEmbedController.jsx

@@ -14,7 +14,7 @@
  *   // Inside a widget:
  *   const { active, activate } = useEmbedActive(widgetId, containerRef)
  */
-import { createContext, useContext, useCallback, useEffect, useRef, useSyncExternalStore } from 'react'
+import { createContext, useContext, useCallback, useEffect, useRef, useState } from 'react'
 
 const DEACTIVATE_DELAY = 5000
 const MAX_VISIBLE_EMBEDS = 7
@@ -147,32 +147,16 @@ export function useEmbedActive(widgetId, containerRef) {
   const scrollRef = useContext(EmbedControllerContext)
   const deactivateTimerRef = useRef(null)
 
-  // Subscribe to state changes
-  const snapshot = useSyncExternalStore(subscribe, () => ({
-    active: isActive(widgetId),
-    performanceMode: getPerformanceMode(),
-    tooMany: isTooManyVisible(),
-  }), () => ({
-    active: false,
-    performanceMode: false,
-    tooMany: false,
-  }))
-
-  // Need a stable reference check since useSyncExternalStore compares by reference
-  const activeRef = useRef(false)
-  const perfRef = useRef(false)
-  const tooManyRef = useRef(false)
+  // Track state with useState + subscribe (avoids useSyncExternalStore object identity issues)
+  const [, forceUpdate] = useState(0)
+  useEffect(() => {
+    return subscribe(() => forceUpdate(c => c + 1))
+  }, [])
 
   const active = isActive(widgetId)
   const perf = getPerformanceMode()
   const tooMany = isTooManyVisible()
 
-  if (activeRef.current !== active || perfRef.current !== perf || tooManyRef.current !== tooMany) {
-    activeRef.current = active
-    perfRef.current = perf
-    tooManyRef.current = tooMany
-  }
-
   // Register/unregister
   useEffect(() => {
     registerEmbed(widgetId)