@dfosco/storyboard 0.5.0-alpha.0

package/src/internals/canvas/widgets/StickyNote.jsx

@@ -0,0 +1,92 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { readProp, stickyNoteSchema } from './widgetProps.js'
+import ResizeHandle from './ResizeHandle.jsx'
+import styles from './StickyNote.module.css'
+
+const COLORS = {
+  yellow: { bg: '#fff8c5', border: '#d4a72c', dot: '#e8c846' },
+  blue: { bg: '#ddf4ff', border: '#54aeff', dot: '#74b9ff' },
+  green: { bg: '#dafbe1', border: '#4ac26b', dot: '#6dd58c' },
+  pink: { bg: '#ffebe9', border: '#ff8182', dot: '#ff9a9e' },
+  purple: { bg: '#fbefff', border: '#c297ff', dot: '#d4a8ff' },
+  orange: { bg: '#fff1e5', border: '#d18616', dot: '#e8a844' },
+}
+
+export default function StickyNote({ props, onUpdate, resizable }) {
+  const text = readProp(props, 'text', stickyNoteSchema)
+  const color = readProp(props, 'color', stickyNoteSchema)
+  const width = readProp(props, 'width', stickyNoteSchema)
+  const height = readProp(props, 'height', stickyNoteSchema)
+  const canEdit = typeof onUpdate === 'function'
+  const palette = COLORS[color] ?? COLORS.yellow
+  const textareaRef = useRef(null)
+  const stickyRef = useRef(null)
+  const [editing, setEditing] = useState(false)
+  const editingActive = canEdit && editing
+
+  const handleResize = useCallback((w, h) => {
+    onUpdate?.({ width: w, height: h })
+  }, [onUpdate])
+
+  useEffect(() => {
+    if (editingActive && textareaRef.current) {
+      textareaRef.current.focus()
+      textareaRef.current.selectionStart = textareaRef.current.value.length
+    }
+  }, [editingActive])
+
+  const handleTextChange = useCallback((e) => {
+    onUpdate?.({ text: e.target.value })
+  }, [onUpdate])
+
+  return (
+    <div className={styles.container}>
+      <article
+        ref={stickyRef}
+        className={styles.sticky}
+        style={{
+          '--sticky-bg': palette.bg,
+          '--sticky-border': palette.border,
+          ...(typeof width === 'number' ? { width: `${width}px` } : undefined),
+          ...(typeof height === 'number' ? { height: `${height}px` } : undefined),
+        }}
+      >
+        <p
+          className={styles.text}
+          style={editingActive ? { visibility: 'hidden' } : undefined}
+          data-canvas-allow-text-selection={!canEdit ? '' : undefined}
+          onDoubleClick={canEdit ? () => setEditing(true) : undefined}
+          role={canEdit ? 'button' : undefined}
+          tabIndex={canEdit ? 0 : undefined}
+          onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') setEditing(true) } : undefined}
+        >
+          {text || (canEdit ? 'Double-click to edit…' : 'No content')}
+        </p>
+        {editingActive && (
+          <textarea
+            ref={textareaRef}
+            className={styles.textarea}
+            data-canvas-allow-text-selection
+            value={text}
+            onChange={handleTextChange}
+            onBlur={() => setEditing(false)}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') setEditing(false)
+            }}
+            placeholder="Type here…"
+          />
+        )}
+        {resizable && (
+          <ResizeHandle
+            targetRef={stickyRef}
+            minWidth={180}
+            minHeight={60}
+            onResize={handleResize}
+          />
+        )}
+      </article>
+    </div>
+  )
+}

package/src/internals/canvas/widgets/StickyNote.module.css

@@ -0,0 +1,70 @@
+.container {
+  position: relative;
+}
+
+.sticky {
+  background: var(--sticky-bg, #fff8c5);
+  border-radius: 6px;
+  border: 2px solid color-mix(in srgb, var(--sticky-bg) 80%, rgb(0, 0, 0) 10%);
+  box-sizing: border-box;
+  min-width: 180px;
+  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.04);
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+  overflow: auto;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+:global([data-sb-canvas-theme^='dark']) .sticky {
+  background: color-mix(in srgb, var(--sticky-bg) 30%, #0d1117 70%);
+  border-color: color-mix(in srgb, var(--sticky-bg) 55%, #f0f6fc 18%);
+  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.35);
+}
+
+/* Hide own border when parent widget slot is selected (avoid double focus ring) */
+:global([data-widget-selected]) .sticky {
+  border-color: transparent;
+}
+
+.text {
+  padding: 16px 20px;
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.5;
+  color: color-mix(in srgb, var(--sticky-bg), black 70%);
+  white-space: pre-wrap;
+  word-break: break-word;
+  cursor: text;
+  min-height: 60px;
+  flex: 1;
+}
+
+:global([data-sb-canvas-theme^='dark']) .text {
+  color: color-mix(in srgb, var(--sticky-bg) 30%, #f0f6fc 70%);
+}
+
+.textarea {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 16px 20px;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 18px;
+  line-height: 1.5;
+  color: color-mix(in srgb, var(--sticky-bg) 80%, rgb(0, 0, 0) 98%);
+  white-space: pre-wrap;
+  word-break: break-word;
+  resize: none;
+}
+
+:global([data-sb-canvas-theme^='dark']) .textarea {
+  color: color-mix(in srgb, var(--sticky-bg) 26%, #f0f6fc 74%);
+}

package/src/internals/canvas/widgets/StickyNote.test.jsx

@@ -0,0 +1,116 @@
+import { describe, expect, it, vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/react'
+import { readProp, getDefaults, stickyNoteSchema } from './widgetProps.js'
+import StickyNote from './StickyNote.jsx'
+
+describe('stickyNoteSchema', () => {
+  it('includes width and height in the size category', () => {
+    expect(stickyNoteSchema.width).toEqual(
+      expect.objectContaining({ type: 'number', category: 'size' })
+    )
+    expect(stickyNoteSchema.height).toEqual(
+      expect.objectContaining({ type: 'number', category: 'size' })
+    )
+  })
+
+  it('includes default values for width/height from config', () => {
+    const defaults = getDefaults(stickyNoteSchema)
+    expect(defaults).toHaveProperty('width', 270)
+    expect(defaults).toHaveProperty('height', 170)
+  })
+
+  it('returns default value when width/height are not saved in props', () => {
+    const props = { text: 'hello', color: 'yellow' }
+    expect(readProp(props, 'width', stickyNoteSchema)).toBe(270)
+    expect(readProp(props, 'height', stickyNoteSchema)).toBe(170)
+  })
+
+  it('returns saved width/height when present in props', () => {
+    const props = { text: 'hello', width: 300, height: 200 }
+    expect(readProp(props, 'width', stickyNoteSchema)).toBe(300)
+    expect(readProp(props, 'height', stickyNoteSchema)).toBe(200)
+  })
+})
+
+describe('StickyNote', () => {
+  it('applies default dimensions as inline styles when not saved in props', () => {
+    const { container } = render(<StickyNote props={{ text: 'Hi' }} onUpdate={vi.fn()} />)
+    const sticky = container.querySelector('article')
+    expect(sticky.style.width).toBe('270px')
+    expect(sticky.style.height).toBe('170px')
+  })
+
+  it('applies saved dimensions as inline styles', () => {
+    const { container } = render(
+      <StickyNote props={{ text: 'Hi', width: 300, height: 200 }} onUpdate={vi.fn()} />
+    )
+    const sticky = container.querySelector('article')
+    expect(sticky.style.width).toBe('300px')
+    expect(sticky.style.height).toBe('200px')
+  })
+
+  it('renders a resize handle when resizable', () => {
+    const { container } = render(<StickyNote props={{ text: 'Hi' }} onUpdate={vi.fn()} resizable />)
+    const handle = container.querySelector('[role="separator"]')
+    expect(handle).not.toBeNull()
+  })
+
+  it('does not render a resize handle when not resizable', () => {
+    const { container } = render(<StickyNote props={{ text: 'Hi' }} onUpdate={vi.fn()} resizable={false} />)
+    const handle = container.querySelector('[role="separator"]')
+    expect(handle).toBeNull()
+  })
+
+  it('calls onUpdate with new dimensions on resize drag', () => {
+    const onUpdate = vi.fn()
+    const { container } = render(
+      <StickyNote props={{ text: 'Hi', width: 200, height: 150 }} onUpdate={onUpdate} resizable />
+    )
+    const handle = container.querySelector('[role="separator"]')
+    const sticky = container.querySelector('article')
+
+    // Mock offsetWidth/offsetHeight since jsdom doesn't compute layout
+    Object.defineProperty(sticky, 'offsetWidth', { value: 200, configurable: true })
+    Object.defineProperty(sticky, 'offsetHeight', { value: 150, configurable: true })
+
+    // Simulate drag: mousedown → mousemove → mouseup
+    fireEvent.mouseDown(handle, { clientX: 200, clientY: 150 })
+    fireEvent.mouseMove(document, { clientX: 250, clientY: 200 })
+    fireEvent.mouseUp(document)
+
+    expect(onUpdate).toHaveBeenCalledWith({ width: 250, height: 200 })
+  })
+
+  it('enforces minimum dimensions during resize', () => {
+    const onUpdate = vi.fn()
+    const { container } = render(
+      <StickyNote props={{ text: 'Hi', width: 200, height: 150 }} onUpdate={onUpdate} resizable />
+    )
+    const handle = container.querySelector('[role="separator"]')
+    const sticky = container.querySelector('article')
+
+    Object.defineProperty(sticky, 'offsetWidth', { value: 200, configurable: true })
+    Object.defineProperty(sticky, 'offsetHeight', { value: 150, configurable: true })
+
+    // Drag far to the left/up — should clamp to mins
+    fireEvent.mouseDown(handle, { clientX: 200, clientY: 150 })
+    fireEvent.mouseMove(document, { clientX: 0, clientY: 0 })
+    fireEvent.mouseUp(document)
+
+    expect(onUpdate).toHaveBeenCalledWith({ width: 180, height: 60 })
+  })
+
+  it('does not enter edit mode without onUpdate (read-only/prod)', () => {
+    const { container } = render(<StickyNote props={{ text: 'Read me' }} />)
+    const text = container.querySelector('p')
+    fireEvent.doubleClick(text)
+    expect(container.querySelector('textarea')).toBeNull()
+    expect(container.querySelector('[data-canvas-allow-text-selection]')).not.toBeNull()
+  })
+
+  it('shows non-editable empty-state text in read-only mode', () => {
+    const { container } = render(<StickyNote props={{ text: '' }} />)
+    expect(container.textContent).toContain('No content')
+    expect(container.textContent).not.toContain('Double-click to edit…')
+  })
+})

package/src/internals/canvas/widgets/StorySetWidget.jsx

@@ -0,0 +1,208 @@
+/**
+ * StorySetWidget — renders all exports from a story in a single iframe grid.
+ *
+ * Instead of N iframes (one per export), this widget loads one iframe pointing
+ * to the isolate-set endpoint. Each export renders in a grid cell inside
+ * that single page. The user can select a cell (via label click) which updates
+ * `props.selected` — visible to connected agents.
+ *
+ * User-facing label: "Component Set"
+ *
+ * Props: { storyId, layout, selected, width, height }
+ */
+import { forwardRef, useImperativeHandle, useRef, useCallback, useState, useEffect, useMemo } from 'react'
+import { getStoryData } from '../../../core/index.js'
+import Icon from '../../Icon.jsx'
+import WidgetWrapper from './WidgetWrapper.jsx'
+import ResizeHandle from './ResizeHandle.jsx'
+import { useIframeDevLogs } from './iframeDevLogs.js'
+import styles from './StorySetWidget.module.css'
+import overlayStyles from './embedOverlay.module.css'
+
+function GridIcon({ size = 16 }) {
+  return <Icon name="iconoir/view-grid" size={size} />
+}
+
+function resolveStorySetUrl(storyId, layout, selected) {
+  const story = getStoryData(storyId)
+  if (!story?._storyModule) return ''
+  const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+  const params = new URLSearchParams()
+  params.set('module', story._storyModule)
+  if (layout) params.set('layout', layout)
+  if (selected) params.set('selected', selected)
+  return `${base}/_storyboard/canvas/isolate-set?${params}`
+}
+
+export default forwardRef(function StorySetWidget({ id: widgetId, props, onUpdate, resizable }, ref) {
+  const storyId = props?.storyId || ''
+  const layout = props?.layout || 'horizontal'
+  const selected = props?.selected || ''
+  const width = props?.width
+  const height = props?.height
+
+  const containerRef = useRef(null)
+  const iframeRef = useRef(null)
+  const [interactive, setInteractive] = useState(false)
+  const [storyIndexKey, setStoryIndexKey] = useState(0)
+
+  // Re-resolve when story index is live-patched
+  useEffect(() => {
+    const handler = () => setStoryIndexKey((k) => k + 1)
+    document.addEventListener('storyboard:story-index-changed', handler)
+    return () => document.removeEventListener('storyboard:story-index-changed', handler)
+  }, [])
+
+  const enterInteractive = useCallback(() => setInteractive(true), [])
+
+  // Exit interactive mode when clicking outside
+  useEffect(() => {
+    if (!interactive) return
+    function handlePointerDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        const chromeEl = e.target.closest(`[data-widget-id="${widgetId}"]`)
+        if (chromeEl) return
+        setInteractive(false)
+      }
+    }
+    document.addEventListener('pointerdown', handlePointerDown)
+    return () => document.removeEventListener('pointerdown', handlePointerDown)
+  }, [interactive, widgetId])
+
+  // Listen for selection messages from the embedded grid
+  useEffect(() => {
+    function handleMessage(e) {
+      if (e.source !== iframeRef.current?.contentWindow) return
+      if (e.data?.type === 'storyboard:component-set:select') {
+        const newSelected = e.data.exportName || ''
+        if (newSelected !== selected) {
+          onUpdate?.({ selected: newSelected })
+        }
+      } else if (e.data?.type === 'storyboard:component-set:resize') {
+        // Auto-size widget to fit the grid content (+ header height)
+        const headerH = 32
+        const newW = Math.max(200, Math.ceil(e.data.width))
+        const newH = Math.max(60, Math.ceil(e.data.height) + headerH)
+        if (newW !== width || newH !== height) {
+          onUpdate?.({ width: newW, height: newH })
+        }
+      }
+    }
+    window.addEventListener('message', handleMessage)
+    return () => window.removeEventListener('message', handleMessage)
+  }, [selected, width, height, onUpdate])
+
+  const handleResize = useCallback((w, h) => {
+    onUpdate?.({ width: w, height: h })
+  }, [onUpdate])
+
+  useImperativeHandle(ref, () => ({
+    handleAction(actionId) {
+      if (actionId === 'flip-layout') {
+        const next = layout === 'horizontal' ? 'vertical' : 'horizontal'
+        onUpdate?.({ layout: next })
+        return true
+      } else if (actionId === 'open-external') {
+        const story = getStoryData(storyId)
+        if (story?._route) {
+          const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
+          window.open(`${base}${story._route}`, '_blank', 'noopener')
+        }
+        return true
+      }
+    },
+  }), [storyId, layout, onUpdate])
+
+  const iframeSrc = useMemo(
+    () => resolveStorySetUrl(storyId, layout, selected),
+    // storyIndexKey forces re-evaluation when HMR mutates the story index
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [storyId, layout, selected, storyIndexKey],
+  )
+
+  useIframeDevLogs({
+    widget: 'StorySetWidget',
+    loaded: interactive && Boolean(iframeSrc),
+    src: iframeSrc,
+  })
+
+  const displayName = storyId || 'Component Set'
+
+  if (!storyId) {
+    return (
+      <WidgetWrapper>
+        <div className={styles.container} ref={containerRef}>
+          <div className={styles.error}>
+            <span className={styles.errorIcon}><GridIcon size={20} /></span>
+            <span className={styles.errorText}>Missing story ID</span>
+          </div>
+        </div>
+      </WidgetWrapper>
+    )
+  }
+
+  if (!iframeSrc) {
+    return (
+      <WidgetWrapper>
+        <div className={styles.container} ref={containerRef}>
+          <div className={styles.error}>
+            <span className={styles.errorIcon}><GridIcon size={20} /></span>
+            <span className={styles.errorText}>Story &ldquo;{storyId}&rdquo; not found or has no route</span>
+          </div>
+        </div>
+      </WidgetWrapper>
+    )
+  }
+
+  const sizeStyle = {}
+  if (typeof width === 'number') sizeStyle.width = `${width}px`
+  if (typeof height === 'number') sizeStyle.height = `${height}px`
+
+  return (
+    <WidgetWrapper>
+      <div ref={containerRef} className={styles.container} style={sizeStyle}>
+        <div className={styles.header}>
+          <span className={styles.headerIcon}><GridIcon size={16} /></span>
+          <span className={styles.headerTitle}>{displayName}</span>
+          {selected && (
+            <span className={styles.headerSelected}>· {selected}</span>
+          )}
+          <span className={styles.headerLayout} title={`Layout: ${layout}`}>
+            {layout === 'horizontal' ? '⇔' : '⇕'}
+          </span>
+        </div>
+        <div className={styles.content}>
+          <iframe
+            ref={iframeRef}
+            src={iframeSrc}
+            className={styles.iframe}
+            title={`${displayName} component set`}
+            onLoad={(e) => e.target.blur()}
+          />
+        </div>
+        {!interactive && (
+          <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"
+          >
+            <span className={overlayStyles.interactHint}>Click to interact</span>
+          </div>
+        )}
+      </div>
+      {resizable && <ResizeHandle targetRef={containerRef} width={width} height={height} onResize={handleResize} />}
+    </WidgetWrapper>
+  )
+})

package/src/internals/canvas/widgets/StorySetWidget.module.css

@@ -0,0 +1,89 @@
+/* StorySetWidget — canvas widget chrome */
+
+.container {
+  position: relative;
+  overflow: hidden;
+  min-width: 200px;
+  min-height: 120px;
+  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;
+}
+
+.headerSelected {
+  color: var(--fgColor-accent, #0969da);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.headerLayout {
+  margin-left: auto;
+  font-size: 14px;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.content {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 37px);
+}
+
+.iframe {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 1;
+}
+
+.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;
+}