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

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

@@ -0,0 +1,161 @@
+.embed {
+  position: relative;
+  overflow: hidden;
+  background: var(--bgColor-default, #ffffff);
+  border: 3px solid var(--borderColor-default, #d0d7de);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+.codepenLogo {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.headerTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.iframeContainer {
+  width: 100%;
+  height: calc(100% - 10px);
+  overflow: hidden;
+}
+
+.iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+.resizeHandle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nwse-resize;
+  background: linear-gradient(
+    135deg,
+    transparent 40%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 40%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 50%,
+    transparent 50%,
+    transparent 65%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 65%,
+    var(--borderColor-muted, rgba(0, 0, 0, 0.15)) 75%,
+    transparent 75%
+  );
+  opacity: 0;
+  transition: opacity 150ms;
+  z-index: 2;
+}
+
+.embed:hover ~ .resizeHandle,
+.resizeHandle:hover {
+  opacity: 1;
+}
+
+/* Expand modal */
+.expandBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 100000;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: expandFadeIn 0.15s ease;
+}
+
+@keyframes expandFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.expandContainer {
+  width: 90vw;
+  height: 90vh;
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--bgColor-default, #ffffff);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
+  animation: expandScaleIn 0.2s ease;
+}
+
+@keyframes expandScaleIn {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+.expandIframe {
+  border: none;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.expandClose {
+  all: unset;
+  cursor: pointer;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.5);
+  color: #ffffff;
+  font-size: 16px;
+  z-index: 1;
+  transition: background 100ms;
+  backdrop-filter: blur(4px);
+}
+
+.expandClose:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.emptyState {
+  width: 100%;
+  height: calc(100% - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.emptyIcon {
+  color: var(--fgColor-muted, #656d76);
+  opacity: 0.5;
+}
+
+.emptyLabel {
+  color: var(--fgColor-muted, #656d76);
+  font-size: 13px;
+  font-style: italic;
+}

package/src/canvas/widgets/ComponentWidget.jsx

@@ -1,19 +1,38 @@
-import { useRef, useCallback, useState, useEffect } from 'react'
+import { useRef, useCallback, useState, useEffect, useMemo } from 'react'
 import WidgetWrapper from './WidgetWrapper.jsx'
 import ResizeHandle from './ResizeHandle.jsx'
+import ComponentErrorBoundary from '../ComponentErrorBoundary.jsx'
+import { useIframeDevLogs } from './iframeDevLogs.js'
 import styles from './ComponentWidget.module.css'
+import overlayStyles from './embedOverlay.module.css'
 
 /**
  * Renders a live JSX export from a .canvas.jsx companion file.
- * Content is read-only (re-renders on HMR), only position and size are mutable.
- * Cannot be deleted from canvas — only removed from source code.
+ *
+ * In dev mode (isLocalDev), each component is rendered inside an iframe
+ * via the /_storyboard/canvas/isolate middleware. This isolates broken
+ * components so they cannot crash the entire canvas page.
+ *
+ * In production, the component is rendered directly with an ErrorBoundary
+ * as a fallback safety net.
  *
  * 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, resizable }) {
+export default function ComponentWidget({
+  component: Component,
+  jsxModule,
+  exportName,
+  canvasTheme,
+  isLocalDev,
+  width,
+  height,
+  onUpdate,
+  resizable,
+}) {
   const containerRef = useRef(null)
   const [interactive, setInteractive] = useState(false)
+  const [showIframe, setShowIframe] = useState(false)
 
   const handleResize = useCallback((w, h) => {
     onUpdate?.({ width: w, height: h })
@@ -27,13 +46,34 @@ export default function ComponentWidget({ component: Component, width, height, o
     function handlePointerDown(e) {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setInteractive(false)
+        setShowIframe(false)
       }
     }
     document.addEventListener('pointerdown', handlePointerDown)
     return () => document.removeEventListener('pointerdown', handlePointerDown)
   }, [interactive])
 
-  if (!Component) return null
+  // Build iframe src for dev isolation
+  const iframeSrc = useMemo(() => {
+    if (!isLocalDev || !jsxModule || !exportName) return null
+    const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+    const params = new URLSearchParams({
+      module: jsxModule,
+      export: exportName,
+      theme: canvasTheme || 'light',
+    })
+    return `${basePath}/_storyboard/canvas/isolate?${params}`
+  }, [isLocalDev, jsxModule, exportName, canvasTheme])
+
+  const useIframe = isLocalDev && iframeSrc
+
+  useIframeDevLogs({
+    widget: 'ComponentWidget',
+    loaded: Boolean(useIframe && showIframe),
+    src: iframeSrc,
+  })
+
+  if (!useIframe && !Component) return null
 
   const sizeStyle = {}
   if (typeof width === 'number') sizeStyle.width = `${width}px`
@@ -43,13 +83,46 @@ export default function ComponentWidget({ component: Component, width, height, o
     <WidgetWrapper>
       <div ref={containerRef} className={styles.container} style={sizeStyle}>
         <div className={styles.content}>
-          <Component />
+          {useIframe ? (
+            showIframe ? (
+              <iframe
+                src={iframeSrc}
+                className={styles.iframe}
+                title={exportName || 'Component widget'}
+                sandbox="allow-same-origin allow-scripts"
+              />
+            ) : (
+              <div className={styles.placeholder} />
+            )
+          ) : Component ? (
+            <ComponentErrorBoundary name={exportName}>
+              <Component />
+            </ComponentErrorBoundary>
+          ) : null}
         </div>
         {!interactive && (
           <div
-            className={styles.interactOverlay}
-            onDoubleClick={enterInteractive}
-          />
+            className={overlayStyles.interactOverlay}
+            onClick={(e) => {
+              // Don't enter interactive mode for modifier clicks (shift/meta/ctrl for multi-select)
+              if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+              if (useIframe) setShowIframe(true)
+              enterInteractive()
+            }}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                e.stopPropagation()
+                if (useIframe) setShowIframe(true)
+                enterInteractive()
+              }
+            }}
+            aria-label="Click to interact with component"
+          >
+            <span className={overlayStyles.interactHint}>Click to interact</span>
+          </div>
         )}
         {resizable && (
           <ResizeHandle

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

@@ -1,8 +1,11 @@
 .container {
   position: relative;
-  overflow: auto;
+  overflow: hidden;
   min-width: 100px;
   min-height: 60px;
+  background: var(--bgColor-default, #ffffff);
+  width: 100%;
+  height: 100%;
 }
 
 .content {
@@ -10,9 +13,14 @@
   height: 100%;
 }
 
-.interactOverlay {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  cursor: default;
+.iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.placeholder {
+  width: 100%;
+  height: 100%;
 }

package/src/canvas/widgets/FigmaEmbed.jsx

@@ -4,10 +4,36 @@ import WidgetWrapper from './WidgetWrapper.jsx'
 import { readProp } from './widgetProps.js'
 import { schemas } from './widgetConfig.js'
 import { toFigmaEmbedUrl, getFigmaTitle, getFigmaType, isFigmaUrl } from './figmaUrl.js'
+import { useIframeDevLogs } from './iframeDevLogs.js'
 import styles from './FigmaEmbed.module.css'
+import overlayStyles from './embedOverlay.module.css'
 
 const figmaEmbedSchema = schemas['figma-embed']
 
+/** Feather-icons figma icon (monochrome, stroke-based) */
+function FigmaIcon({ size = 32, className }) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
+      <path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
+      <path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
+      <path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
+      <path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
+    </svg>
+  )
+}
+
 /** Inline Figma logo SVG */
 function FigmaLogo() {
   return (
@@ -29,11 +55,15 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, re
   const height = readProp(props, 'height', figmaEmbedSchema)
 
   const [interactive, setInteractive] = useState(false)
+  const [showIframe, setShowIframe] = useState(true)
   const [expanded, setExpanded] = useState(false)
 
   const iframeRef = useRef(null)
+  const embedRef = useRef(null)
   const inlineContainerRef = useRef(null)
   const modalContainerRef = useRef(null)
+  const teardownTimerRef = useRef(null)
+  const exitSessionRef = useRef(0)
 
   // Validate URL at render time — only embed known Figma URLs
   const isValid = useMemo(() => isFigmaUrl(url), [url])
@@ -42,7 +72,38 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, re
   const figmaType = useMemo(() => getFigmaType(url), [url])
   const typeLabel = figmaType ? TYPE_LABELS[figmaType] : 'Figma'
 
-  const enterInteractive = useCallback(() => setInteractive(true), [])
+  useIframeDevLogs({
+    widget: 'FigmaEmbed',
+    loaded: showIframe && Boolean(embedUrl),
+    src: embedUrl,
+  })
+
+  const enterInteractive = useCallback(() => {
+    exitSessionRef.current++
+    clearTimeout(teardownTimerRef.current)
+    setShowIframe(true)
+    setInteractive(true)
+  }, [])
+
+  useEffect(() => {
+    if (!interactive || expanded) return
+    function handlePointerDown(e) {
+      if (embedRef.current && !embedRef.current.contains(e.target)) {
+        setInteractive(false)
+        // Keep iframe alive for 5 min — Figma is slow to reload
+        const session = ++exitSessionRef.current
+        clearTimeout(teardownTimerRef.current)
+        teardownTimerRef.current = setTimeout(() => {
+          if (exitSessionRef.current !== session) return
+          setShowIframe(false)
+        }, 5 * 60 * 1000)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive, expanded])
+
+  useEffect(() => () => clearTimeout(teardownTimerRef.current), [])
 
   // Close expanded modal on Escape
   useEffect(() => {
@@ -96,6 +157,7 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, re
       if (actionId === 'open-external') {
         if (url) window.open(url, '_blank', 'noopener')
       } else if (actionId === 'expand') {
+        setShowIframe(true)
         setExpanded(true)
       }
     },
@@ -104,39 +166,58 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, re
   return (
     <>
     <WidgetWrapper>
-      <div className={styles.embed} style={{ width, height }}>
+      <div ref={embedRef} className={styles.embed} style={{ width, height }}>
         <div className={styles.header}>
           <FigmaLogo />
           <span className={styles.headerTitle}>{title}</span>
         </div>
         {embedUrl ? (
           <>
-            <div
-              ref={inlineContainerRef}
-              className={styles.iframeContainer}
-              style={expanded ? { visibility: 'hidden' } : undefined}
-            >
-              <iframe
-                ref={iframeRef}
-                src={embedUrl}
-                className={styles.iframe}
-                title={`Figma ${typeLabel}: ${title}`}
-                allowFullScreen
-              />
-            </div>
+            {showIframe ? (
+              <div
+                ref={inlineContainerRef}
+                className={styles.iframeContainer}
+                style={expanded ? { visibility: 'hidden' } : undefined}
+              >
+                <iframe
+                  ref={iframeRef}
+                  src={embedUrl}
+                  className={styles.iframe}
+                  title={`Figma ${typeLabel}: ${title}`}
+                  allowFullScreen
+                />
+              </div>
+            ) : (
+              <div className={styles.iframeContainer} />
+            )}
             {!interactive && !expanded && (
               <div
-                className={styles.dragOverlay}
-                onDoubleClick={enterInteractive}
-              />
+                className={overlayStyles.interactOverlay}
+                onClick={(e) => {
+                  // Don't enter interactive mode for modifier clicks (shift/meta/ctrl for multi-select)
+                  if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
+                  enterInteractive()
+                }}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    enterInteractive()
+                  }
+                }}
+                aria-label="Click to interact with Figma embed"
+              >
+                <span className={overlayStyles.interactHint}>Click to interact</span>
+              </div>
             )}
           </>
         ) : (
-          <div className={styles.iframeContainer} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-            <p style={{ color: 'var(--fgColor-muted, #656d76)', fontSize: 14, fontStyle: 'italic' }}>
-              No Figma URL
-            </p>
-          </div>
+        <div className={styles.emptyState}>
+          <FigmaIcon size={32} className={styles.emptyIcon} />
+          <span className={styles.emptyLabel}>No Figma URL</span>
+        </div>
         )}
       </div>
       {resizable && (
@@ -171,8 +252,13 @@ export default forwardRef(function FigmaEmbed({ props, onUpdate, resizable }, re
         style={expanded && embedUrl ? undefined : { display: 'none' }}
         onClick={() => setExpanded(false)}
         onPointerDown={(e) => e.stopPropagation()}
-        onKeyDown={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          e.stopPropagation()
+          if (e.key === 'Escape') setExpanded(false)
+        }}
         onWheel={(e) => e.stopPropagation()}
+        tabIndex={-1}
+        ref={(el) => { if (el && expanded) el.focus() }}
       >
         <div
           ref={modalContainerRef}

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

@@ -47,13 +47,6 @@
   display: block;
 }
 
-.dragOverlay {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  cursor: grab;
-}
-
 .resizeHandle {
   position: absolute;
   bottom: 0;
@@ -145,3 +138,24 @@
 .expandClose:hover {
   background: rgba(0, 0, 0, 0.7);
 }
+
+.emptyState {
+  width: 100%;
+  height: calc(100% - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.emptyIcon {
+  color: var(--fgColor-muted, #656d76);
+  opacity: 0.5;
+}
+
+.emptyLabel {
+  color: var(--fgColor-muted, #656d76);
+  font-size: 13px;
+  font-style: italic;
+}