@dfosco/storyboard-react 4.0.0-beta.28 → 4.0.0-beta.29

package/package.json

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

package/src/canvas/widgets/CodePenEmbed.jsx

@@ -0,0 +1,291 @@
+/**
+ * CodePen embed widget for canvas.
+ *
+ * Behaves like FigmaEmbed: click-to-interact overlay, iframe kept alive
+ * after deselect, expand modal, open-external action. Created via paste
+ * when a CodePen URL is pasted onto the canvas.
+ */
+import { forwardRef, useImperativeHandle, useMemo, useCallback, useState, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import { readProp } from './widgetProps.js'
+import { schemas } from './widgetConfig.js'
+import { isCodePenUrl, toCodePenEmbedUrl, getCodePenTitle, fetchCodePenMeta } from './codepenUrl.js'
+import { useIframeDevLogs } from './iframeDevLogs.js'
+import styles from './CodePenEmbed.module.css'
+import overlayStyles from './embedOverlay.module.css'
+
+const codepenEmbedSchema = schemas['codepen-embed']
+
+/** CodePen logo SVG */
+function CodePenLogo({ className }) {
+  return (
+    <svg className={className} viewBox="0 0 100 100" fill="none" aria-hidden="true">
+      <path
+        d="M100 34.2c0-.4-.1-.8-.2-1.2 0-.1 0-.2-.1-.3 0-.2-.1-.3-.2-.5 0-.1-.1-.2-.1-.3-.1-.2-.1-.3-.2-.4-.1-.1-.1-.2-.2-.3-.1-.1-.1-.3-.2-.4l-.3-.3-.2-.3c-.1-.1-.2-.2-.3-.2l-.3-.3c-.1-.1-.2-.1-.3-.2l-.3-.3-.4-.2-.6-.3L52.1 2.5c-1.3-.8-2.9-.8-4.2 0L3.2 27.6l-.6.3c-.1.1-.2.1-.4.2l-.3.3c-.1.1-.2.1-.3.2l-.3.3-.3.3-.2.3c-.1.1-.2.3-.2.4-.1.1-.1.2-.2.3-.1.1-.1.3-.2.4 0 .1-.1.2-.1.3-.1.2-.1.3-.2.5 0 .1 0 .2-.1.3-.1.4-.1.8-.2 1.2v31.4c0 .4.1.8.2 1.2 0 .1 0 .2.1.3 0 .2.1.3.2.5 0 .1.1.2.1.3.1.2.1.3.2.4.1.1.1.2.2.3.1.1.1.3.2.4l.3.3.2.3c.1.1.2.2.3.2l.3.3c.1.1.2.1.3.2l.3.3.4.2.6.3 44.7 25.1c.6.4 1.4.5 2.1.5.7 0 1.4-.2 2.1-.5l44.7-25.1.6-.3c.1-.1.2-.1.4-.2l.3-.3c.1-.1.2-.1.3-.2l.3-.3.3-.3.2-.3c.1-.1.2-.3.2-.4.1-.1.1-.2.2-.3.1-.1.1-.3.2-.4 0-.1.1-.2.1-.3.1-.2.1-.3.2-.5 0-.1 0-.2.1-.3.1-.4.1-.8.2-1.2V34.2zm-50-24L88.5 33 73 43.4 54.8 32.2V10.2zM45.2 10.2v22l-18.2 11.2L11.5 33l38.5-22.8zm-40 28.4L18.4 49.8 5.2 60.9V38.6zm40 51.2L6.7 66.6 22.2 56.2l23 14.1v19.5zm4.8-24.3l-16-9.8 16-9.8 16 9.8-16 9.8zm4.8 24.3V70.3l23-14.1 15.5 10.4L54.8 89.8zm40-28.9L81.6 49.8 94.8 38.6v22.3z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+/** Stroke-based code icon for empty state */
+function CodeIcon({ 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"
+    >
+      <polyline points="16 18 22 12 16 6" />
+      <polyline points="8 6 2 12 8 18" />
+    </svg>
+  )
+}
+
+export default forwardRef(function CodePenEmbed({ props, onUpdate, resizable }, ref) {
+  const url = readProp(props, 'url', codepenEmbedSchema)
+  const width = readProp(props, 'width', codepenEmbedSchema)
+  const height = readProp(props, 'height', codepenEmbedSchema)
+
+  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)
+
+  const isValid = useMemo(() => isCodePenUrl(url), [url])
+  const embedUrl = useMemo(() => (isValid ? toCodePenEmbedUrl(url) : ''), [url, isValid])
+  const fallbackTitle = useMemo(() => (url ? getCodePenTitle(url) : 'CodePen'), [url])
+
+  // Fetch pen metadata (title + author) from CodePen oEmbed API
+  const [penMeta, setPenMeta] = useState(null)
+  useEffect(() => {
+    if (!url || !isValid) return
+    let cancelled = false
+    fetchCodePenMeta(url).then((meta) => {
+      if (!cancelled && meta) setPenMeta(meta)
+    })
+    return () => { cancelled = true }
+  }, [url, isValid])
+
+  const headerTitle = penMeta?.title
+    ? `${penMeta.title} · ${penMeta.author || fallbackTitle}`
+    : fallbackTitle
+
+  useIframeDevLogs({
+    widget: 'CodePenEmbed',
+    loaded: showIframe && Boolean(embedUrl),
+    src: embedUrl,
+  })
+
+  const enterInteractive = useCallback(() => {
+    exitSessionRef.current++
+    clearTimeout(teardownTimerRef.current)
+    setShowIframe(true)
+    setInteractive(true)
+  }, [])
+
+  // Exit interactive mode on click outside — keep iframe alive for 2 min
+  useEffect(() => {
+    if (!interactive || expanded) return
+    function handlePointerDown(e) {
+      if (embedRef.current && !embedRef.current.contains(e.target)) {
+        setInteractive(false)
+        const session = ++exitSessionRef.current
+        clearTimeout(teardownTimerRef.current)
+        teardownTimerRef.current = setTimeout(() => {
+          if (exitSessionRef.current !== session) return
+          setShowIframe(false)
+        }, 2 * 60 * 1000)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive, expanded])
+
+  useEffect(() => () => clearTimeout(teardownTimerRef.current), [])
+
+  // Close expanded modal on Escape
+  useEffect(() => {
+    if (!expanded) return
+    function handleKeyDown(e) {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        setExpanded(false)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [expanded])
+
+  // Reparent iframe between inline and modal containers
+  useEffect(() => {
+    const iframe = iframeRef.current
+    if (!iframe) return
+
+    if (expanded && modalContainerRef.current) {
+      iframe._savedClassName = iframe.className
+      iframe._savedStyle = iframe.getAttribute('style') || ''
+      iframe.className = styles.expandIframe
+      iframe.removeAttribute('style')
+      const target = modalContainerRef.current
+      if (target.moveBefore) {
+        target.moveBefore(iframe, target.firstChild)
+      } else {
+        target.prepend(iframe)
+      }
+    } else if (!expanded && inlineContainerRef.current) {
+      if (iframe._savedClassName !== undefined) {
+        iframe.className = iframe._savedClassName
+        iframe.setAttribute('style', iframe._savedStyle)
+        delete iframe._savedClassName
+        delete iframe._savedStyle
+      }
+      const target = inlineContainerRef.current
+      if (target.moveBefore) {
+        target.moveBefore(iframe, null)
+      } else {
+        target.appendChild(iframe)
+      }
+    }
+  }, [expanded])
+
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'open-external') {
+        if (url) window.open(url, '_blank', 'noopener')
+      } else if (actionId === 'expand') {
+        setShowIframe(true)
+        setExpanded(true)
+      }
+    },
+  }), [url])
+
+  return (
+    <>
+    <WidgetWrapper>
+      <div ref={embedRef} className={styles.embed} style={{ width, height }}>
+        <div className={styles.header}>
+          <CodePenLogo className={styles.codepenLogo} />
+          <span className={styles.headerTitle}>{headerTitle}</span>
+        </div>
+        {embedUrl ? (
+          <>
+            {showIframe ? (
+              <div
+                ref={inlineContainerRef}
+                className={styles.iframeContainer}
+                style={expanded ? { visibility: 'hidden' } : undefined}
+              >
+                <iframe
+                  ref={iframeRef}
+                  src={embedUrl}
+                  className={styles.iframe}
+                  title={`CodePen: ${headerTitle}`}
+                  allowFullScreen
+                  loading="lazy"
+                />
+              </div>
+            ) : (
+              <div className={styles.iframeContainer} />
+            )}
+            {!interactive && !expanded && (
+              <div
+                className={overlayStyles.interactOverlay}
+                onClick={(e) => {
+                  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 CodePen embed"
+              >
+                <span className={overlayStyles.interactHint}>Click to interact</span>
+              </div>
+            )}
+          </>
+        ) : (
+          <div className={styles.emptyState}>
+            <CodeIcon size={32} className={styles.emptyIcon} />
+            <span className={styles.emptyLabel}>No CodePen URL</span>
+          </div>
+        )}
+      </div>
+      {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
+        className={styles.expandBackdrop}
+        style={expanded && embedUrl ? undefined : { display: 'none' }}
+        onClick={() => setExpanded(false)}
+        onPointerDown={(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}
+          className={styles.expandContainer}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            className={styles.expandClose}
+            onClick={() => setExpanded(false)}
+            aria-label="Close expanded view"
+            autoFocus
+          >✕</button>
+        </div>
+      </div>,
+      document.body
+    )}
+    </>
+  )
+})

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/codepenUrl.js

@@ -0,0 +1,75 @@
+/**
+ * CodePen URL utilities — parse, validate, and convert CodePen URLs
+ * to their embeddable format.
+ *
+ * Supported URL formats:
+ *   https://codepen.io/{user}/pen/{penId}
+ *   https://codepen.io/{user}/full/{penId}
+ *   https://codepen.io/{user}/details/{penId}
+ *   https://codepen.io/{user}/embed/{penId}
+ */
+
+const CODEPEN_RE = /^https?:\/\/codepen\.io\/([^/]+)\/(pen|full|details|embed)\/([A-Za-z0-9]+)/
+
+/**
+ * Check if a URL is a valid CodePen pen URL.
+ */
+export function isCodePenUrl(url) {
+  if (!url) return false
+  return CODEPEN_RE.test(url)
+}
+
+/**
+ * Convert any CodePen pen URL to the embed format.
+ * Defaults to showing the result tab with a dark theme.
+ */
+export function toCodePenEmbedUrl(url) {
+  const m = url?.match(CODEPEN_RE)
+  if (!m) return ''
+  const [, user, , penId] = m
+  return `https://codepen.io/${user}/embed/${penId}?default-tab=result&editable=true`
+}
+
+/**
+ * Extract a fallback title from a CodePen URL (user/penId).
+ */
+export function getCodePenTitle(url) {
+  const m = url?.match(CODEPEN_RE)
+  if (!m) return 'CodePen'
+  return `${m[1]}/${m[3]}`
+}
+
+/**
+ * Extract the username from a CodePen URL.
+ */
+export function getCodePenUser(url) {
+  const m = url?.match(CODEPEN_RE)
+  return m?.[1] || ''
+}
+
+/** In-memory cache for oEmbed results keyed by pen URL. */
+const _oembedCache = new Map()
+
+/**
+ * Fetch pen metadata (title, author_name) via CodePen's oEmbed API.
+ * Returns `{ title, author }` or null on failure. Results are cached.
+ */
+export async function fetchCodePenMeta(url) {
+  if (!url || !isCodePenUrl(url)) return null
+  if (_oembedCache.has(url)) return _oembedCache.get(url)
+
+  try {
+    const endpoint = `https://codepen.io/api/oembed?url=${encodeURIComponent(url)}&format=json`
+    const res = await fetch(endpoint)
+    if (!res.ok) return null
+    const data = await res.json()
+    const meta = {
+      title: data.title || '',
+      author: data.author_name || '',
+    }
+    _oembedCache.set(url, meta)
+    return meta
+  } catch {
+    return null
+  }
+}

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

@@ -0,0 +1,76 @@
+/**
+ * Tests for CodePen URL utilities.
+ */
+import { describe, it, expect } from 'vitest'
+import { isCodePenUrl, toCodePenEmbedUrl, getCodePenTitle, getCodePenUser } from './codepenUrl.js'
+
+describe('isCodePenUrl', () => {
+  it('returns true for pen URLs', () => {
+    expect(isCodePenUrl('https://codepen.io/Calleb/pen/jEMXgvq')).toBe(true)
+  })
+
+  it('returns true for full view URLs', () => {
+    expect(isCodePenUrl('https://codepen.io/Calleb/full/jEMXgvq')).toBe(true)
+  })
+
+  it('returns true for details URLs', () => {
+    expect(isCodePenUrl('https://codepen.io/Calleb/details/jEMXgvq')).toBe(true)
+  })
+
+  it('returns true for embed URLs', () => {
+    expect(isCodePenUrl('https://codepen.io/Calleb/embed/jEMXgvq')).toBe(true)
+  })
+
+  it('returns false for non-CodePen URLs', () => {
+    expect(isCodePenUrl('https://example.com')).toBe(false)
+    expect(isCodePenUrl('https://figma.com/design/abc')).toBe(false)
+  })
+
+  it('returns false for CodePen homepage', () => {
+    expect(isCodePenUrl('https://codepen.io')).toBe(false)
+    expect(isCodePenUrl('https://codepen.io/Calleb')).toBe(false)
+  })
+
+  it('returns false for null/empty', () => {
+    expect(isCodePenUrl(null)).toBe(false)
+    expect(isCodePenUrl('')).toBe(false)
+  })
+})
+
+describe('toCodePenEmbedUrl', () => {
+  it('converts pen URL to embed format', () => {
+    const result = toCodePenEmbedUrl('https://codepen.io/Calleb/pen/jEMXgvq')
+    expect(result).toBe('https://codepen.io/Calleb/embed/jEMXgvq?default-tab=result&editable=true')
+  })
+
+  it('converts full URL to embed format', () => {
+    const result = toCodePenEmbedUrl('https://codepen.io/Calleb/full/jEMXgvq')
+    expect(result).toBe('https://codepen.io/Calleb/embed/jEMXgvq?default-tab=result&editable=true')
+  })
+
+  it('returns empty string for invalid URL', () => {
+    expect(toCodePenEmbedUrl('https://example.com')).toBe('')
+    expect(toCodePenEmbedUrl(null)).toBe('')
+  })
+})
+
+describe('getCodePenTitle', () => {
+  it('extracts user/penId from URL', () => {
+    expect(getCodePenTitle('https://codepen.io/Calleb/pen/jEMXgvq')).toBe('Calleb/jEMXgvq')
+  })
+
+  it('returns "CodePen" for invalid URL', () => {
+    expect(getCodePenTitle('https://example.com')).toBe('CodePen')
+    expect(getCodePenTitle(null)).toBe('CodePen')
+  })
+})
+
+describe('getCodePenUser', () => {
+  it('extracts username', () => {
+    expect(getCodePenUser('https://codepen.io/Calleb/pen/jEMXgvq')).toBe('Calleb')
+  })
+
+  it('returns empty for invalid URL', () => {
+    expect(getCodePenUser('https://example.com')).toBe('')
+  })
+})

package/src/canvas/widgets/index.js

@@ -4,6 +4,7 @@ import PrototypeEmbed from './PrototypeEmbed.jsx'
 import LinkPreview from './LinkPreview.jsx'
 import ImageWidget from './ImageWidget.jsx'
 import FigmaEmbed from './FigmaEmbed.jsx'
+import CodePenEmbed from './CodePenEmbed.jsx'
 import StoryWidget from './StoryWidget.jsx'
 
 /**
@@ -17,6 +18,7 @@ export const widgetRegistry = {
   'link-preview': LinkPreview,
   'image': ImageWidget,
   'figma-embed': FigmaEmbed,
+  'codepen-embed': CodePenEmbed,
   'story': StoryWidget,
 }
 

package/src/canvas/widgets/widgetConfig.js

@@ -157,6 +157,6 @@ export function getWidgetMeta(type) {
  */
 export function getMenuWidgetTypes() {
   return Object.entries(widgetTypes)
-    .filter(([type]) => type !== 'link-preview' && type !== 'image' && type !== 'figma-embed' && type !== 'story')
+    .filter(([type]) => type !== 'link-preview' && type !== 'image' && type !== 'figma-embed' && type !== 'codepen-embed' && type !== 'story')
     .map(([type, def]) => ({ type, label: def.label, icon: def.icon }))
 }