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

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

@@ -0,0 +1,211 @@
+.container {
+  position: relative;
+  overflow: hidden;
+  min-width: 100px;
+  min-height: 60px;
+  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);
+  width: 100%;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 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;
+}
+
+.headerIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.headerTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.content {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 37px);
+}
+
+.placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--fgColor-muted, #656d76);
+  text-align: center;
+}
+
+.placeholderLabel {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--borderColor-muted, #d0d7de);
+  border-top-color: var(--fgColor-accent, #2f81f7);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.iframe {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 1;
+}
+
+.snapshotImage {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top left;
+  display: block;
+  pointer-events: none;
+  transition: opacity 150ms ease;
+}
+
+.codeView {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 37px);
+  overflow: hidden;
+}
+
+.codeHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-inset, #eff2f5);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.codeLabel {
+  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.codeCloseBtn {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  font-size: 14px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.codeCloseBtn:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+  color: var(--fgColor-default, #1f2328);
+}
+
+.codeBlock {
+  flex: 1;
+  margin: 0;
+  overflow: auto;
+  user-select: text;
+  cursor: text;
+}
+
+/* Style the highlighted pre from the inspector highlighter.
+   padding uses !important to override the inline padding:0 from codeToHtml. */
+.codeBlock pre {
+  margin: 0;
+  padding: var(--base-size-8, 8px) !important;
+  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.6;
+  tab-size: 2;
+  min-height: 100%;
+  box-sizing: border-box;
+}
+
+/* Fallback when no highlighted HTML (plain pre/code) */
+.codeBlock > code {
+  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.6;
+  white-space: pre;
+  tab-size: 2;
+}
+
+.codeLoading {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  color: var(--fgColor-danger, #cf222e);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.errorIcon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.errorText {
+  word-break: break-word;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  color: var(--fgColor-muted, #656d76);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+}

package/src/canvas/widgets/WidgetChrome.jsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useRef, useEffect, useSyncExternalStore } from 'react'
 import { Tooltip } from '@primer/react'
-import { EyeIcon as OcticonEye, EyeClosedIcon as OcticonEyeClosed } from '@primer/octicons-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 styles from './WidgetChrome.module.css'
 
 const STICKY_NOTE_COLORS = {
@@ -60,6 +60,18 @@ 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">
@@ -110,6 +122,22 @@ function ExpandIcon() {
   )
 }
 
+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,
@@ -119,12 +147,18 @@ const ICON_REGISTRY = {
   '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. */
@@ -189,8 +223,8 @@ function WidgetOverflowMenu({ widgetId, menuFeatures, onAction }) {
       url.searchParams.set('widget', widgetId)
       navigator.clipboard.writeText(url.toString()).catch(() => {})
     } else if (action === 'copy-widget-id') {
-      const canvasName = window.location.pathname.split('/').filter(Boolean).pop() || ''
-      navigator.clipboard.writeText(`${canvasName}/${widgetId}`).catch(() => {})
+      const canvasId = window.__storyboardCanvasBridgeState?.canvasId || ''
+      navigator.clipboard.writeText(`${canvasId}::${widgetId}`).catch(() => {})
     } else {
       onAction?.(action)
     }
@@ -411,16 +445,22 @@ export default function WidgetChrome({
     onUpdate?.({ color })
   }, [onUpdate])
 
-  const showToolbar = !readOnly && (hovered || selected)
+  // In readOnly mode, features are already filtered to prod-only by getFeatures.
+  // Show toolbar if there are prod features even when readOnly.
+  const hasFeatures = features.length > 0
+  const showToolbar = (hovered || selected) && (!readOnly || hasFeatures)
   const showFeatures = showToolbar && !multiSelected
+  const menuFeatures = features.filter((f) => f.menu)
 
   return (
     <div
       className={styles.chromeContainer}
-      onMouseEnter={readOnly ? undefined : handleMouseEnter}
-      onMouseLeave={readOnly ? undefined : handleMouseLeave}
+      data-widget-id={widgetId}
+      data-tc-elevated={(hovered || selected) || undefined}
+      onMouseEnter={(readOnly && !hasFeatures) ? undefined : handleMouseEnter}
+      onMouseLeave={(readOnly && !hasFeatures) ? undefined : handleMouseLeave}
     >
-      <div className={`tc-drag-surface ${styles.widgetSlot} ${selected ? styles.widgetSlotSelected : ''} ${multiSelected ? styles.widgetSlotMultiSelected : ''}`}>
+      <div className={`tc-drag-surface ${styles.widgetSlot} ${selected ? styles.widgetSlotSelected : ''} ${multiSelected ? styles.widgetSlotMultiSelected : ''}`} data-widget-selected={selected || undefined}>
         {children}
       </div>
       <div
@@ -464,6 +504,11 @@ export default function WidgetChrome({
                   }
                 }
 
+                // Show-code toggle: swap label based on widget state
+                if (feature.action === 'show-code' && widgetRef?.current?.getState?.('showCode')) {
+                  label = 'Show component'
+                }
+
                 return (
                   <Tooltip key={feature.id} text={label} direction="n">
                     <button
@@ -495,22 +540,33 @@ export default function WidgetChrome({
 
               return null
             })}
-            <WidgetOverflowMenu
-              widgetId={widgetId}
-              menuFeatures={features.filter((f) => f.menu)}
-              onAction={onAction}
-            />
+            {menuFeatures.length > 0 && (
+              <WidgetOverflowMenu
+                widgetId={widgetId}
+                menuFeatures={menuFeatures}
+                onAction={(actionId) => {
+                  // Route overflow menu actions through the widget ref first
+                  if (actionId !== 'delete' && actionId !== 'copy' && widgetRef?.current?.handleAction) {
+                    widgetRef.current.handleAction(actionId)
+                  } else {
+                    onAction?.(actionId)
+                  }
+                }}
+              />
+            )}
           </div>
           )}
 
-          <Tooltip text={selected ? "Click and drag to move" : "Select"} direction="n">
-            <button
-              className={`tc-drag-handle ${styles.selectHandle} ${selected ? styles.selectHandleActive : ''}`}
-              onClick={handleHandleClick}
-              aria-label={selected ? "Drag to move widget" : "Select widget"}
-              aria-pressed={selected}
-            />
-          </Tooltip>
+          {!readOnly && (
+            <Tooltip text={selected ? "Click and drag to move" : "Select"} direction="n">
+              <button
+                className={`tc-drag-handle ${styles.selectHandle} ${selected ? styles.selectHandleActive : ''}`}
+                onClick={handleHandleClick}
+                aria-label={selected ? "Drag to move widget" : "Select widget"}
+                aria-pressed={selected}
+              />
+            </Tooltip>
+          )}
         </div>
       </div>
     </div>

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

@@ -33,7 +33,7 @@
   top: calc(100% + 10px);
 }
 
-/* Trigger dot — centered, visible at rest */
+/* Trigger dot — positioned in the toolbar, visible at rest */
 .triggerDot {
   width: 6px;
   height: 6px;
@@ -41,10 +41,6 @@
   background: var(--borderColor-muted, #d0d7de);
   opacity: 0.5;
   transition: opacity 120ms;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
 }
 
 :global([data-sb-canvas-theme^='dark']) .triggerDot {
@@ -235,8 +231,8 @@
 .overflowMenu {
   position: absolute;
   top: calc(100% + 10px);
-  right: 0;
-  min-width: 180px;
+  left: 0;
+  min-width: max-content;
   padding: 4px;
   background: var(--bgColor-default, #ffffff);
   border-radius: 10px;
@@ -265,6 +261,7 @@
   color: var(--fgColor-default, #1f2328);
   border-radius: 6px;
   box-sizing: border-box;
+  white-space: nowrap;
 }
 
 :global([data-sb-canvas-theme^='dark']) .overflowItem {

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

@@ -11,6 +11,8 @@
 
 .content {
   position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 @media (prefers-color-scheme: dark) {

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('')
+  })
+})