@dfosco/storyboard-react 4.2.0-beta.3 → 4.2.0

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

@@ -0,0 +1,133 @@
+.container {
+  padding: 8px;
+  user-select: none;
+  cursor: default;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 0 8px;
+}
+
+.toolbarBtn {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  color: var(--fgColor-default, #1f2328);
+  background: var(--bgColor-muted, #f6f8fa);
+  transition: background 0.12s ease;
+}
+
+.toolbarBtn:hover {
+  background: var(--bgColor-neutral-muted, #d0d7de);
+}
+
+.toolbarBtn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.toolbarLabel {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fgColor-muted, #656d76);
+  min-width: 32px;
+  text-align: center;
+}
+
+.toolbarSep {
+  width: 1px;
+  height: 16px;
+  background: var(--borderColor-muted, #d0d7de);
+  margin: 0 4px;
+}
+
+.grid {
+  display: grid;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.tile {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  transition: border-color 0.12s ease, opacity 0.15s ease, transform 0.12s ease;
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.tile:hover {
+  border-color: var(--borderColor-accent-emphasis, #0969da);
+}
+
+.selected {
+  border-color: var(--fgColor-accent, #0969da);
+  box-shadow: 0 0 0 2px var(--fgColor-accent, #0969da);
+}
+
+.pasteTarget {
+  border-color: var(--fgColor-success, #1a7f37);
+  box-shadow: 0 0 0 2px var(--fgColor-success, #1a7f37);
+  animation: pulse 1s infinite;
+}
+
+.dragOver {
+  border-color: var(--fgColor-accent, #0969da);
+  background: var(--bgColor-accent-muted, #ddf4ff);
+  transform: scale(1.04);
+}
+
+.dragging {
+  opacity: 0.4;
+}
+
+.tileImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  pointer-events: none;
+}
+
+.emptyTile {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.pasteHint {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+  color: white;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  pointer-events: none;
+}
+
+.hint {
+  padding: 6px 0 2px;
+  text-align: center;
+  font-size: 11px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 0 2px var(--fgColor-success, #1a7f37); }
+  50% { box-shadow: 0 0 0 4px var(--fgColor-success, #1a7f37); }
+}

package/src/canvas/widgets/WidgetChrome.jsx

@@ -1,7 +1,7 @@
 import { useState, useCallback, useRef, useEffect, useSyncExternalStore } from 'react'
 import { Tooltip } from '@primer/react'
-import { EyeIcon as OcticonEye, EyeClosedIcon as OcticonEyeClosed, CodeIcon as OcticonCode, UnwrapIcon as OcticonUnwrap, ImageIcon as OcticonImage, UnfoldIcon as OcticonUnfold, FoldIcon as OcticonFold } from '@primer/octicons-react'
 import { getConnectorConfig, getInteractGate } from './widgetConfig.js'
+import { ICON_REGISTRY } from './widgetIcons.jsx'
 import styles from './WidgetChrome.module.css'
 import overlayStyles from './embedOverlay.module.css'
 
@@ -14,75 +14,6 @@ const STICKY_NOTE_COLORS = {
   orange: { bg: '#fff1e5', border: '#d18616', dot: '#e8a844' },
 }
 
-function DeleteIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-      <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.15l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z" />
-    </svg>
-  )
-}
-
-function ZoomInIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-      <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>
-  )
-}
-
-function ZoomOutIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-      <path d="M2.75 7.25h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5Z" />
-    </svg>
-  )
-}
-
-function EditIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-      <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z" />
-    </svg>
-  )
-}
-
-function OpenExternalIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-      <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z" />
-    </svg>
-  )
-}
-
-function EyeIcon() {
-  return <OcticonEye size={12} />
-}
-
-function EyeClosedIcon() {
-  return <OcticonEyeClosed size={12} />
-}
-
-function CodeIcon() {
-  return <OcticonCode size={12} />
-}
-
-function UnwrapIcon() {
-  return <OcticonUnwrap size={12} />
-}
-
-function ImageIcon() {
-  return <OcticonImage size={12} />
-}
-
-function CopyIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-      <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z" />
-      <path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z" />
-    </svg>
-  )
-}
-
 function MoreIcon() {
   return (
     <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
@@ -91,14 +22,6 @@ function MoreIcon() {
   )
 }
 
-function LinkIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-      <path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z" />
-    </svg>
-  )
-}
-
 function ChevronDownIcon() {
   return (
     <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
@@ -107,62 +30,6 @@ function ChevronDownIcon() {
   )
 }
 
-function DownloadIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-      <path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z" />
-      <path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06Z" />
-    </svg>
-  )
-}
-
-function ExpandIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-      <path d="M1.75 10a.75.75 0 0 1 .75.75v2.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 1 13.25v-2.5a.75.75 0 0 1 .75-.75Zm12.5 0a.75.75 0 0 1 .75.75v2.5A1.75 1.75 0 0 1 13.25 15h-2.5a.75.75 0 0 1 0-1.5h2.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 .75-.75ZM2.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v2.5a.75.75 0 0 1-1.5 0v-2.5C1 1.784 1.784 1 2.75 1Zm10.5 0C14.216 1 15 1.784 15 2.75v2.5a.75.75 0 0 1-1.5 0v-2.5a.25.25 0 0 0-.25-.25h-2.5a.75.75 0 0 1 0-1.5Z" />
-    </svg>
-  )
-}
-
-function SyncIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-      <path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z" />
-    </svg>
-  )
-}
-
-function UnfoldIcon() {
-  return <OcticonUnfold size={12} />
-}
-
-function FoldIcon() {
-  return <OcticonFold size={12} />
-}
-
-/** Icon registry — maps icon name strings from config to React components. */
-const ICON_REGISTRY = {
-  'trash': DeleteIcon,
-  'zoom-in': ZoomInIcon,
-  'zoom-out': ZoomOutIcon,
-  'edit': EditIcon,
-  'open-external': OpenExternalIcon,
-  'eye': EyeIcon,
-  'eye-closed': EyeClosedIcon,
-  'code': CodeIcon,
-  'unwrap': UnwrapIcon,
-  'image': ImageIcon,
-  'copy': CopyIcon,
-  'link': LinkIcon,
-  'more': MoreIcon,
-  'chevron-down': ChevronDownIcon,
-  'download': DownloadIcon,
-  'expand': ExpandIcon,
-  'sync': SyncIcon,
-  'unfold': UnfoldIcon,
-  'fold': FoldIcon,
-}
-
 /** Danger-styled actions in the overflow menu. */
 const DANGER_ACTIONS = new Set(['delete'])
 
@@ -228,7 +95,7 @@ function WidgetOverflowMenu({ widgetId, menuFeatures, onAction }) {
       const canvasId = window.__storyboardCanvasBridgeState?.canvasId || ''
       navigator.clipboard.writeText(`${canvasId}::${widgetId}`).catch(() => {})
     } else {
-      onAction?.(action)
+      onAction?.(action, { altKey: altHeld })
     }
     setOpen(false)
   }, [widgetId, onAction, altHeld])
@@ -319,7 +186,7 @@ function DropdownFeature({ feature, onAction }) {
                 className={styles.overflowItem}
                 onClick={(e) => {
                   e.stopPropagation()
-                  onAction?.(action)
+                  onAction?.(action, { altKey: altHeld })
                   setOpen(false)
                 }}
               >
@@ -338,13 +205,35 @@ function DropdownFeature({ feature, onAction }) {
 }
 
 /**
- * ColorPicker feature button — shows a dot that reveals color options on hover.
+ * ColorPicker feature button — shows a dot that reveals color options on click.
+ * Closes on click-outside or Escape.
  */
 function ColorPickerFeature({ currentColor, options, onColorChange }) {
   const palette = STICKY_NOTE_COLORS[currentColor] ?? STICKY_NOTE_COLORS.yellow
+  const [open, setOpen] = useState(false)
+  const wrapperRef = useRef(null)
+
+  useEffect(() => {
+    if (!open) return
+    function handleClickOutside(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false)
+      }
+    }
+    function handleEscape(e) {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('pointerdown', handleClickOutside, true)
+    document.addEventListener('keydown', handleEscape)
+    return () => {
+      document.removeEventListener('pointerdown', handleClickOutside, true)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [open])
 
   return (
     <div
+      ref={wrapperRef}
       className={styles.colorPickerWrapper}
       onMouseDown={(e) => e.stopPropagation()}
       onPointerDown={(e) => e.stopPropagation()}
@@ -354,10 +243,11 @@ function ColorPickerFeature({ currentColor, options, onColorChange }) {
         style={{ background: palette.dot }}
         aria-label="Change color"
         title="Change color"
+        onClick={() => setOpen((prev) => !prev)}
       >
         <span className={styles.colorDotInner} style={{ background: palette.dot }} />
       </button>
-      <div className={styles.colorPopup}>
+      <div className={`${styles.colorPopup} ${open ? styles.colorPopupOpen : ''}`}>
         {(options || Object.keys(STICKY_NOTE_COLORS)).map((colorName) => {
           const c = STICKY_NOTE_COLORS[colorName]
           if (!c) return null
@@ -369,6 +259,7 @@ function ColorPickerFeature({ currentColor, options, onColorChange }) {
               onClick={(e) => {
                 e.stopPropagation()
                 onColorChange(colorName)
+                setOpen(false)
               }}
               title={colorName}
               aria-label={`Set color to ${colorName}`}
@@ -433,13 +324,13 @@ export default function WidgetChrome({
     e.stopPropagation()
     // Standard actions go through onAction (handled by CanvasPage)
     if (actionId === 'delete' || actionId === 'copy') {
-      onAction?.(actionId)
+      onAction?.(actionId, { altKey: e.altKey })
       return
     }
     // Widget-specific actions go through the widget's imperative ref
     if (widgetRef?.current?.handleAction) {
-      widgetRef.current.handleAction(actionId)
-      return
+      const handled = widgetRef.current.handleAction(actionId)
+      if (handled !== false) return
     }
     // Fallback to generic handler
     onAction?.(actionId)
@@ -515,7 +406,7 @@ export default function WidgetChrome({
     >
       <div ref={slotRef} className={`tc-drag-surface ${styles.widgetSlot} ${selected ? styles.widgetSlotSelected : ''} ${multiSelected ? styles.widgetSlotMultiSelected : ''}`} data-widget-selected={selected || undefined} data-widget-interacting={interacting || undefined}>
         {children}
-        {gate.enabled && !interacting && (
+        {gate.enabled && !interacting && !readOnly && (
           <div
             className={overlayStyles.interactOverlay}
             onClick={handleGateClick}
@@ -560,6 +451,7 @@ export default function WidgetChrome({
         <div className={`${styles.toolbarContent} ${showToolbar ? styles.toolbarContentVisible : ''}`}>
           {showFeatures && (
           <div className={styles.featureButtons}>
+            {/* eslint-disable-next-line react-hooks/refs */}
             {features.map((feature) => {
               // Menu features are rendered in WidgetOverflowMenu
               if (feature.menu) return null
@@ -581,11 +473,16 @@ export default function WidgetChrome({
 
                 // Toggle-private: swap icon/label based on current state
                 if (feature.action === 'toggle-private') {
+                  const isTerminal = widgetType === 'terminal' || widgetType === 'agent'
                   if (widgetProps?.private) {
                     Icon = ICON_REGISTRY['eye-closed']
-                    label = 'Private image — only visible locally'
+                    label = isTerminal
+                      ? 'Private terminal — snapshots hidden from git'
+                      : 'Private image — only visible locally'
                   } else {
-                    label = 'Published image — deployed with canvas'
+                    label = isTerminal
+                      ? 'Public terminal — snapshots committed to git'
+                      : 'Published image — deployed with canvas'
                   }
                 }
 
@@ -594,10 +491,34 @@ export default function WidgetChrome({
                   label = 'Show component'
                 }
 
+                // Expand-output toggle: swap icon/label, hide when no session
+                if (feature.action === 'expand-output') {
+                  const hasSession = widgetRef?.current?.getState?.('hasSession')
+                  if (!hasSession) return null
+                  const isActive = widgetRef?.current?.getState?.('showOutput')
+                  if (isActive) {
+                    Icon = ICON_REGISTRY['fold']
+                    label = 'Hide output'
+                  } else {
+                    label = 'Show output'
+                  }
+                }
+
+                // Open-terminal: hide when no session
+                if (feature.action === 'open-terminal') {
+                  const hasSession = widgetRef?.current?.getState?.('hasSession')
+                  if (!hasSession) return null
+                }
+
+                // Determine active state for toggle buttons
+                const isActive = feature.active || (
+                  feature.action === 'expand-output' && widgetRef?.current?.getState?.('showOutput')
+                )
+
                 return (
                   <Tooltip key={feature.id} text={label} direction="n">
                     <button
-                      className={styles.featureBtn}
+                      className={`${styles.featureBtn}${isActive ? ` ${styles.featureBtnActive}` : ''}`}
                       onClick={(e) => handleActionClick(feature.action, e)}
                       aria-label={label}
                     >
@@ -612,12 +533,12 @@ export default function WidgetChrome({
                   <DropdownFeature
                     key={feature.id}
                     feature={feature}
-                    onAction={(actionId) => {
+                    onAction={(actionId, opts) => {
                       if (widgetRef?.current?.handleAction) {
-                        widgetRef.current.handleAction(actionId)
-                      } else {
-                        onAction?.(actionId)
+                        const handled = widgetRef.current.handleAction(actionId)
+                        if (handled !== false) return
                       }
+                      onAction?.(actionId, opts)
                     }}
                   />
                 )
@@ -629,13 +550,13 @@ export default function WidgetChrome({
               <WidgetOverflowMenu
                 widgetId={widgetId}
                 menuFeatures={menuFeatures}
-                onAction={(actionId) => {
+                onAction={(actionId, opts) => {
                   // Route overflow menu actions through the widget ref first
                   if (actionId !== 'delete' && actionId !== 'copy' && widgetRef?.current?.handleAction) {
-                    widgetRef.current.handleAction(actionId)
-                  } else {
-                    onAction?.(actionId)
+                    const handled = widgetRef.current.handleAction(actionId)
+                    if (handled !== false) return
                   }
+                  onAction?.(actionId, opts)
                 }}
               />
             )}

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

@@ -19,6 +19,16 @@
   pointer-events: auto;
 }
 
+/* Invisible expanded hit area — 15px padding around the visible dot */
+.anchorPort::before {
+  content: '';
+  position: absolute;
+  top: -15px;
+  left: -15px;
+  right: -15px;
+  bottom: -15px;
+}
+
 .chromeContainer:hover .anchorPort {
   opacity: 0.6;
 }
@@ -183,6 +193,25 @@
   border-color: var(--borderColor-default, #484f58);
 }
 
+.featureBtnActive {
+  background: var(--bgColor-accent-emphasis, #0969da);
+  border-color: var(--bgColor-accent-emphasis, #0969da);
+  color: var(--fgColor-onEmphasis, #ffffff);
+}
+
+:global([data-sb-canvas-theme^='dark']) .featureBtnActive {
+  background: var(--bgColor-accent-emphasis, #388bfd);
+  border-color: var(--bgColor-accent-emphasis, #388bfd);
+  color: var(--fgColor-onEmphasis, #ffffff);
+}
+
+.featureBtnActive:hover {
+  background: var(--bgColor-accent-emphasis, #0969da);
+  border-color: var(--bgColor-accent-emphasis, #0969da);
+  color: var(--fgColor-onEmphasis, #ffffff);
+  filter: brightness(1.1);
+}
+
 /* Select handle — right-aligned rounded rect */
 .selectHandle {
   all: unset;
@@ -269,7 +298,7 @@
     0 4px 12px rgba(0, 0, 0, 0.45);
 }
 
-.colorPickerWrapper:hover .colorPopup {
+.colorPopupOpen {
   opacity: 1;
   pointer-events: auto;
 }

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

@@ -56,72 +56,70 @@ describe('Embed interaction overlay', () => {
       resizable: false,
     }
 
-    it('renders "Click to open" hint when no snapshot exists', () => {
+    it('renders "Click to interact" hint when no snapshot exists', () => {
       render(<PrototypeEmbed {...defaultProps} />)
       
-      const hint = screen.getByText('Click to open')
+      const hint = screen.getByText('Click to interact')
       expect(hint).toBeInTheDocument()
-      // CSS modules mangle class names, just check the element exists
     })
 
     it('enters interactive mode on single click (not double-click)', async () => {
       const { container } = render(<PrototypeEmbed {...defaultProps} />)
       
-      // Overlay should exist before interaction
-      const overlay = screen.getByRole('button', { name: /click to open/i })
+      // Overlay should exist before interaction; iframe is always rendered
+      const overlay = screen.getByRole('button', { name: /click to interact with prototype/i })
       expect(overlay).toBeInTheDocument()
-      expect(container.querySelector('iframe')).not.toBeInTheDocument()
-      expect(screen.getByText('Design Overview')).toBeInTheDocument()
+      expect(container.querySelector('iframe')).toBeInTheDocument()
       
       // Single click should remove the overlay (enter interactive mode)
       fireEvent.click(overlay)
       
       // Overlay should no longer exist
-      expect(screen.queryByRole('button', { name: /click to open/i })).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: /click to interact/i })).not.toBeInTheDocument()
       expect(container.querySelector('iframe')).toBeInTheDocument()
 
       fireEvent.pointerDown(document.body)
-      expect(screen.getByRole('button', { name: /click to open/i })).toBeInTheDocument()
-      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /click to interact with prototype/i })).toBeInTheDocument()
+      expect(container.querySelector('iframe')).toBeInTheDocument()
     })
 
     it('does not enter interactive mode on shift+click (preserves multi-select)', () => {
       render(<PrototypeEmbed {...defaultProps} />)
       
-      const overlay = screen.getByRole('button', { name: /click to open/i })
+      const overlay = screen.getByRole('button', { name: /click to interact with prototype/i })
       fireEvent.click(overlay, { shiftKey: true })
       
       // Overlay should still exist (did not enter interactive mode)
-      expect(screen.getByRole('button', { name: /click to open/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /click to interact with prototype/i })).toBeInTheDocument()
     })
 
     it('does not enter interactive mode on meta+click (preserves multi-select)', () => {
       render(<PrototypeEmbed {...defaultProps} />)
       
-      const overlay = screen.getByRole('button', { name: /click to open/i })
+      const overlay = screen.getByRole('button', { name: /click to interact with prototype/i })
       fireEvent.click(overlay, { metaKey: true })
       
-      expect(screen.getByRole('button', { name: /click to open/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /click to interact with prototype/i })).toBeInTheDocument()
     })
 
     it('supports keyboard interaction (Enter key) with event prevention', () => {
       render(<PrototypeEmbed {...defaultProps} />)
       
-      const overlay = screen.getByRole('button', { name: /click to open/i })
+      const overlay = screen.getByRole('button', { name: /click to interact with prototype/i })
       const event = { key: 'Enter', preventDefault: vi.fn(), stopPropagation: vi.fn() }
       fireEvent.keyDown(overlay, event)
       
-      expect(screen.queryByRole('button', { name: /click to open/i })).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: /click to interact/i })).not.toBeInTheDocument()
     })
 
     it('supports keyboard interaction (Space key) with event prevention', () => {
       render(<PrototypeEmbed {...defaultProps} />)
       
-      const overlay = screen.getByRole('button', { name: /click to open/i })
+      const overlay = screen.getByRole('button', { name: /click to interact with prototype/i })
       const event = { key: ' ', preventDefault: vi.fn(), stopPropagation: vi.fn() }
       fireEvent.keyDown(overlay, event)
       
-      expect(screen.queryByRole('button', { name: /click to open/i })).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: /click to interact/i })).not.toBeInTheDocument()
     })
   })
 
@@ -143,7 +141,7 @@ describe('Embed interaction overlay', () => {
       const { container } = render(<FigmaEmbed {...defaultProps} />)
       
       const overlay = screen.getByRole('button', { name: /click to interact/i })
-      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+      expect(container.querySelector('iframe')).toBeInTheDocument()
       fireEvent.click(overlay)
       
       expect(screen.queryByRole('button', { name: /click to interact/i })).not.toBeInTheDocument()
@@ -151,7 +149,7 @@ describe('Embed interaction overlay', () => {
 
       fireEvent.pointerDown(document.body)
       expect(screen.getByRole('button', { name: /click to interact/i })).toBeInTheDocument()
-      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+      expect(container.querySelector('iframe')).toBeInTheDocument()
     })
   })
 
@@ -162,20 +160,20 @@ describe('Embed interaction overlay', () => {
       resizable: false,
     }
 
-    it('mounts iframe only after user activation', () => {
+    it('mounts iframe and shows overlay initially, removes overlay on click', () => {
       const { container } = render(<StoryWidget {...defaultProps} />)
 
-      const overlay = screen.getByRole('button', { name: /click to open story component/i })
-      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+      const overlay = screen.getByRole('button', { name: /click to interact$/i })
+      expect(container.querySelector('iframe')).toBeInTheDocument()
 
       fireEvent.click(overlay)
 
-      expect(screen.queryByRole('button', { name: /click to open story component/i })).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: /click to interact/i })).not.toBeInTheDocument()
       expect(container.querySelector('iframe')).toBeInTheDocument()
 
       fireEvent.pointerDown(document.body)
-      expect(screen.getByRole('button', { name: /click to open story component/i })).toBeInTheDocument()
-      expect(container.querySelector('iframe')).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /click to interact$/i })).toBeInTheDocument()
+      expect(container.querySelector('iframe')).toBeInTheDocument()
     })
   })