@dfosco/storyboard-react 4.0.0-beta.4 → 4.0.0-beta.41

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;
+}

package/src/canvas/widgets/LinkPreview.jsx

@@ -1,24 +1,309 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { remark } from 'remark'
+import remarkGfm from 'remark-gfm'
+import remarkHtml from 'remark-html'
+import { MarkGithubIcon } from '@primer/octicons-react'
 import WidgetWrapper from './WidgetWrapper.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
 import { readProp, linkPreviewSchema } from './widgetProps.js'
 import styles from './LinkPreview.module.css'
 
-export default function LinkPreview({ props }) {
+const VIDEO_EXT_RE = /\.(mp4|mov|webm|ogg)(\?[^)]*)?$/i
+const VIDEO_URL_LINE_RE = /^<p>\s*(https?:\/\/[^\s<]+\.(mp4|mov|webm|ogg)(?:\?[^\s<]*)?)\s*<\/p>$/gim
+
+/**
+ * Post-process HTML body for canvas rendering:
+ * - Links open in new tabs
+ * - Unwrap <details> wrappers around videos (GitHub wraps them)
+ * - Convert bare video URLs and video-linked images to <video> elements
+ * - Mark checked checkboxes with data attribute for accent styling
+ */
+function postProcessHtml(html) {
+  if (!html) return ''
+  let out = html
+
+  // Open all links in new tabs
+  out = out.replace(/<a\s/g, '<a target="_blank" rel="noopener noreferrer" ')
+  // Dedupe target if GitHub already set it
+  out = out.replace(/target="_blank"\s*rel="noopener noreferrer"\s*target="_blank"/g, 'target="_blank"')
+
+  // Unwrap <details><summary>...</summary><video ...></details> → just the <video>
+  out = out.replace(/<details[^>]*>\s*<summary[^>]*>[\s\S]*?<\/summary>\s*(<video[\s\S]*?<\/video>)\s*<\/details>/gi, '$1')
+
+  // Convert bare video URLs (wrapped in <p>) into <video> elements
+  out = out.replace(VIDEO_URL_LINE_RE, (_, url) =>
+    `<video src="${url}" controls preload="none"></video>`
+  )
+
+  // Convert img tags pointing at video files to <video>
+  out = out.replace(/<img\s+([^>]*?)src="([^"]+\.(mp4|mov|webm|ogg)(?:\?[^"]*)?)"([^>]*)\/?>/gi, (_, _pre, url) =>
+    `<video src="${url}" controls preload="none"></video>`
+  )
+
+  // Existing <video> tags from GitHub: set preload=none to prevent auto-loading spinner
+  out = out.replace(/<video\s/g, '<video preload="none" ')
+  // Dedupe if we already added it
+  out = out.replace(/preload="none"\s+preload="[^"]*"/g, 'preload="none"')
+
+  // Remove disabled from checkboxes so accent-color works (CSS blocks interaction instead)
+  out = out.replace(/<input\s+([^>]*?)disabled([^>]*)>/gi, (match, before, after) => {
+    if (!match.includes('type="checkbox"')) return match
+    return `<input ${before}${after}>`
+  })
+
+  return out
+}
+
+function renderMarkdown(text) {
+  if (!text) return ''
+  const result = remark()
+    .use(remarkGfm)
+    .use(remarkHtml, { sanitize: false })
+    .processSync(text)
+  return postProcessHtml(String(result))
+}
+
+function timeAgo(dateStr) {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  if (Number.isNaN(date.getTime())) return ''
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
+  if (seconds < 60) return 'just now'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes} minute${minutes === 1 ? '' : 's'} ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours} hour${hours === 1 ? '' : 's'} ago`
+  const days = Math.floor(hours / 24)
+  if (days < 30) return `${days} day${days === 1 ? '' : 's'} ago`
+  const months = Math.floor(days / 30)
+  if (months < 12) return `${months} month${months === 1 ? '' : 's'} ago`
+  const years = Math.floor(months / 12)
+  return `${years} year${years === 1 ? '' : 's'} ago`
+}
+
+/**
+ * Split a title like "#42 Ship GitHub embeds" into { number: "#42", rest: "Ship GitHub embeds" }.
+ */
+function splitIssueTitle(title) {
+  if (!title) return { number: '', rest: '' }
+  const match = title.match(/^(#\d+)\s+(.*)$/)
+  if (match) return { number: match[1], rest: match[2] }
+  return { number: '', rest: title }
+}
+
+const KIND_LABELS = {
+  issue: 'Issue',
+  pull_request: 'Pull Request',
+  discussion: 'Discussion',
+  comment: 'Comment',
+}
+
+function getCommentKindLabel(github) {
+  if (github?.kind !== 'comment') return KIND_LABELS[github?.kind] || 'GitHub'
+  if (github?.parentKind === 'issue') return 'Issue Comment'
+  if (github?.parentKind === 'pull_request') return 'PR Comment'
+  if (github?.parentKind === 'discussion') return 'Discussion Comment'
+  return 'Comment'
+}
+
+function GitHubIssueCard({ url, title, github, width, collapsed, onUpdate }) {
+  const authors = Array.isArray(github?.authors)
+    ? github.authors.filter((a) => typeof a === 'string' && a.trim())
+    : []
+  const primaryAuthor = authors[0] || ''
+  const createdAgo = timeAgo(github?.createdAt)
+  const { number: issueNumber, rest: titleText } = splitIssueTitle(title)
+
+  const kindLabel = getCommentKindLabel(github)
+
+  // Prefer pre-rendered bodyHtml (has signed image URLs), fall back to remark for discussions
+  const bodyHtml = useMemo(() => {
+    if (github?.bodyHtml) return postProcessHtml(github.bodyHtml)
+    return renderMarkdown(github?.body || '')
+  }, [github?.bodyHtml, github?.body])
+
+  // Set body HTML via ref — avoids React destroying/recreating video elements on re-render
+  const bodyRef = useRef(null)
+  const lastHtmlRef = useRef('')
+  useEffect(() => {
+    if (bodyRef.current && bodyHtml !== lastHtmlRef.current) {
+      bodyRef.current.innerHTML = bodyHtml
+      lastHtmlRef.current = bodyHtml
+    }
+  }, [bodyHtml])
+
+  // Also set on initial mount via callback ref
+  const setBodyRef = useCallback((el) => {
+    bodyRef.current = el
+    if (el && bodyHtml && bodyHtml !== lastHtmlRef.current) {
+      el.innerHTML = bodyHtml
+      lastHtmlRef.current = bodyHtml
+    }
+  }, [bodyHtml])
+
+  const sizeStyle = {
+    ...(width ? { width: `${width}px` } : {}),
+  }
+
+  return (
+    <WidgetWrapper>
+      <div className={`${styles.issueCard} ${collapsed ? styles.issueCardCollapsed : ''}`} style={sizeStyle}>
+        <div className={styles.typeBar}>
+          <MarkGithubIcon size={16} />
+          <span>{kindLabel}</span>
+        </div>
+        <header className={styles.issueHeader}>
+          <h2 className={styles.issueTitle}>
+            <a
+              href={url || '#'}
+              target="_blank"
+              rel="noopener noreferrer"
+              className={styles.issueTitleLink}
+              onMouseDown={(e) => e.stopPropagation()}
+              onPointerDown={(e) => e.stopPropagation()}
+            >
+              {titleText || url}
+              {issueNumber && <span className={styles.issueNumber}> {issueNumber}</span>}
+            </a>
+          </h2>
+        </header>
+
+        <div className={styles.issueByline}>
+          <div className={styles.issueBylineLeft}>
+            {primaryAuthor && (
+              <a
+                href={`https://github.com/${primaryAuthor}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles.authorLink}
+                onMouseDown={(e) => e.stopPropagation()}
+                onPointerDown={(e) => e.stopPropagation()}
+              >
+                <img
+                  className={styles.avatar}
+                  src={`https://github.com/${primaryAuthor}.png?size=40`}
+                  alt=""
+                  width="20"
+                  height="20"
+                  loading="lazy"
+                />
+                {primaryAuthor}
+              </a>
+            )}
+            <span className={styles.bylineText}>
+              {primaryAuthor && createdAgo ? ` opened ${createdAgo}` : createdAgo ? `Opened ${createdAgo}` : ''}
+            </span>
+          </div>
+        </div>
+
+        {bodyHtml && (
+          <div
+            className={`${styles.issueBody} ${collapsed ? styles.issueBodyScrollable : ''}`}
+            ref={setBodyRef}
+          />
+        )}
+      </div>
+    </WidgetWrapper>
+  )
+}
+
+export default function LinkPreview({ props, onUpdate, resizable }) {
   const url = readProp(props, 'url', linkPreviewSchema)
   const title = readProp(props, 'title', linkPreviewSchema)
+  const github = props?.github && typeof props.github === 'object' ? props.github : null
+
+  const width = typeof props?.width === 'number' ? props.width : null
+  const height = typeof props?.height === 'number' ? props.height : null
+
+  // All hooks must be called before any early return
+  const ogImage = props?.ogImage || null
+  const description = props?.description || ''
+  const canEdit = typeof onUpdate === 'function'
+  const cardRef = useRef(null)
+  const inputRef = useRef(null)
+  const [editing, setEditing] = useState(false)
+
+  const startEditing = useCallback(() => {
+    if (!canEdit) return
+    setEditing(true)
+  }, [canEdit])
+
+  const handleTitleChange = useCallback((e) => {
+    onUpdate?.({ title: e.target.value })
+  }, [onUpdate])
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [editing])
+
+  if (github) {
+    return (
+      <GitHubIssueCard
+        url={url}
+        title={title}
+        github={github}
+        width={width}
+        collapsed={!!props?.collapsed}
+        onUpdate={onUpdate}
+      />
+    )
+  }
+
+  const sizeStyle = (width || height)
+    ? { ...(width ? { width: `${width}px` } : {}), ...(height ? { minHeight: `${height}px` } : {}) }
+    : undefined
 
   let hostname = ''
-  try {
-    hostname = new URL(url).hostname
-  } catch { /* invalid URL */ }
+  try { hostname = new URL(url).hostname } catch { /* */ }
+
+  const handleResize = (w, h) => onUpdate?.({ width: w, height: h })
 
   return (
-    <WidgetWrapper>
-      <div className={styles.card}>
-        <span className={styles.icon}>🔗</span>
-        <div className={styles.text}>
-          {title && <p className={styles.title}>{title}</p>}
+    <div className={styles.container}>
+      <div ref={cardRef} className={styles.card} style={sizeStyle}>
+        {ogImage && (
+          <img
+            className={styles.ogImage}
+            src={ogImage}
+            alt=""
+            loading="lazy"
+            onError={(e) => { e.target.style.display = 'none' }}
+          />
+        )}
+        <div className={styles.body}>
+          {editing ? (
+            <input
+              ref={inputRef}
+              className={styles.titleInput}
+              data-canvas-allow-text-selection
+              type="text"
+              value={title}
+              onChange={handleTitleChange}
+              onBlur={() => setEditing(false)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === 'Escape') setEditing(false)
+              }}
+              onMouseDown={(e) => e.stopPropagation()}
+              onPointerDown={(e) => e.stopPropagation()}
+            />
+          ) : (
+            <p
+              className={styles.title}
+              data-canvas-allow-text-selection={!canEdit ? '' : undefined}
+              onDoubleClick={startEditing}
+              role={canEdit ? 'button' : undefined}
+              tabIndex={canEdit ? 0 : undefined}
+              onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') startEditing() } : undefined}
+            >
+              {title || hostname || url || 'Untitled'}
+            </p>
+          )}
+          {description && <p className={styles.description}>{description}</p>}
           <a
-            href={url}
+            href={url || '#'}
             target="_blank"
             rel="noopener noreferrer"
             className={styles.url}
@@ -29,6 +314,7 @@ export default function LinkPreview({ props }) {
           </a>
         </div>
       </div>
-    </WidgetWrapper>
+      {resizable && <ResizeHandle targetRef={cardRef} width={width} height={height} onResize={handleResize} />}
+    </div>
   )
 }