@dfosco/storyboard-react 4.0.0-beta.13 → 4.0.0-beta.15

package/src/canvas/PageSelector.module.css

@@ -0,0 +1,93 @@
+.container {
+  position: relative;
+  font-size: 13px;
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 6px;
+  background: var(--bgColor-default, #fff);
+  color: var(--fgColor-default, #1f2328);
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: border-color 0.15s, box-shadow 0.15s;
+  line-height: 1;
+}
+
+.trigger:hover {
+  border-color: var(--borderColor-emphasis, rgba(0, 0, 0, 0.3));
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+}
+
+.label {
+  font-weight: 600;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge {
+  font-size: 11px;
+  color: var(--fgColor-muted, #656d76);
+  font-variant-numeric: tabular-nums;
+}
+
+.chevron {
+  color: var(--fgColor-muted, #656d76);
+  transition: transform 0.15s;
+  flex-shrink: 0;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 180px;
+  max-width: 300px;
+  max-height: 320px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  background: var(--bgColor-default, #fff);
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.item {
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.item:hover {
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.item:focus-visible {
+  outline: 2px solid var(--focus-outlineColor, #0969da);
+  outline-offset: -2px;
+}
+
+.itemActive {
+  font-weight: 600;
+  background: var(--bgColor-accent-muted, #ddf4ff);
+}
+
+.itemActive:hover {
+  background: var(--bgColor-accent-muted, #ddf4ff);
+}

package/src/canvas/PageSelector.test.jsx

@@ -0,0 +1,104 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import PageSelector from './PageSelector.jsx'
+
+const PAGES = [
+  { name: 'research/interviews', route: '/canvas/research/interviews', title: 'Interviews' },
+  { name: 'research/surveys', route: '/canvas/research/surveys', title: 'Surveys' },
+  { name: 'research/analysis', route: '/canvas/research/analysis', title: 'Analysis' },
+]
+
+describe('PageSelector', () => {
+  beforeEach(() => {
+    // Reset location mock
+    delete window.location
+    window.location = { href: '' }
+  })
+
+  it('renders nothing when fewer than 2 pages', () => {
+    const { container } = render(<PageSelector currentName="solo" pages={[{ name: 'solo', route: '/canvas/solo', title: 'Solo' }]} />)
+    expect(container.innerHTML).toBe('')
+  })
+
+  it('renders nothing when pages is empty', () => {
+    const { container } = render(<PageSelector currentName="foo" pages={[]} />)
+    expect(container.innerHTML).toBe('')
+  })
+
+  it('shows current page label and page count', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    expect(screen.getByText('Interviews')).toBeTruthy()
+    expect(screen.getByText('1/3')).toBeTruthy()
+  })
+
+  it('shows correct index for non-first page', () => {
+    render(<PageSelector currentName="research/surveys" pages={PAGES} />)
+    expect(screen.getByText('Surveys')).toBeTruthy()
+    expect(screen.getByText('2/3')).toBeTruthy()
+  })
+
+  it('opens dropdown on click and shows all pages', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    const trigger = screen.getByTitle('Switch canvas page')
+    fireEvent.click(trigger)
+
+    const options = screen.getAllByRole('option')
+    expect(options).toHaveLength(3)
+    expect(options[0].textContent).toBe('Interviews')
+    expect(options[1].textContent).toBe('Surveys')
+    expect(options[2].textContent).toBe('Analysis')
+  })
+
+  it('marks the current page as active', () => {
+    render(<PageSelector currentName="research/surveys" pages={PAGES} />)
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+
+    const options = screen.getAllByRole('option')
+    expect(options[1].getAttribute('aria-selected')).toBe('true')
+    expect(options[0].getAttribute('aria-selected')).toBe('false')
+  })
+
+  it('navigates to selected page', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+    // Click the option in the menu (not the trigger label)
+    const options = screen.getAllByRole('option')
+    fireEvent.click(options[1]) // Surveys
+
+    expect(window.location.href).toContain('/canvas/research/surveys')
+  })
+
+  it('closes dropdown on Escape', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+    expect(screen.queryByRole('listbox')).toBeTruthy()
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(screen.queryByRole('listbox')).toBeNull()
+  })
+
+  it('closes dropdown on outside click', () => {
+    render(
+      <div>
+        <PageSelector currentName="research/interviews" pages={PAGES} />
+        <span data-testid="outside">Outside</span>
+      </div>
+    )
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+    expect(screen.queryByRole('listbox')).toBeTruthy()
+
+    fireEvent.mouseDown(screen.getByTestId('outside'))
+    expect(screen.queryByRole('listbox')).toBeNull()
+  })
+
+  it('does not navigate when selecting the current page', () => {
+    render(<PageSelector currentName="research/interviews" pages={PAGES} />)
+    fireEvent.click(screen.getByTitle('Switch canvas page'))
+    // Click the current page option
+    const options = screen.getAllByRole('option')
+    fireEvent.click(options[0]) // Interviews (current)
+
+    // location.href was set to '' initially, should remain unchanged
+    expect(window.location.href).toBe('')
+  })
+})

package/src/canvas/componentIsolate.jsx

@@ -97,9 +97,9 @@ async function mount() {
     return
   }
 
-  // Validate: only allow .canvas.jsx modules
-  if (!modulePath.endsWith('.canvas.jsx')) {
-    root.render(createElement('div', { style: errorStyle }, 'Invalid module path — only .canvas.jsx files are allowed'))
+  // Validate: only allow .canvas.jsx and .story.{jsx,tsx} modules
+  if (!modulePath.endsWith('.canvas.jsx') && !modulePath.match(/\.story\.(jsx|tsx)$/)) {
+    root.render(createElement('div', { style: errorStyle }, 'Invalid module path — only .canvas.jsx and .story.jsx/.tsx files are allowed'))
     return
   }
 

package/src/canvas/widgets/FigmaEmbed.jsx

@@ -188,8 +188,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/MarkdownBlock.jsx

@@ -3,9 +3,13 @@ import { remark } from 'remark'
 import remarkGfm from 'remark-gfm'
 import remarkHtml from 'remark-html'
 import WidgetWrapper from './WidgetWrapper.jsx'
-import { readProp, markdownSchema } from './widgetProps.js'
+import ResizeHandle from './ResizeHandle.jsx'
+import { readProp } from './widgetProps.js'
+import { schemas } from './widgetConfig.js'
 import styles from './MarkdownBlock.module.css'
 
+const markdownSchema = schemas['markdown']
+
 /**
  * Renders markdown to HTML using remark with GitHub Flavored Markdown support.
  */
@@ -18,9 +22,51 @@ function renderMarkdown(text) {
   return String(result)
 }
 
-export default function MarkdownBlock({ props, onUpdate }) {
+/**
+ * Post-process rendered HTML to syntax-highlight fenced code blocks.
+ * remark-html outputs <pre><code class="language-xxx">...</code></pre>.
+ * We replace the code content with highlight.js output.
+ */
+let hljsPromise = null
+function getHljs() {
+  if (!hljsPromise) {
+    hljsPromise = import('@dfosco/storyboard-core/inspector/highlighter').then((mod) => mod)
+  }
+  return hljsPromise
+}
+
+async function highlightCodeBlocks(html) {
+  if (!html.includes('<code class="language-')) return html
+  const { createInspectorHighlighter } = await getHljs()
+  const hl = await createInspectorHighlighter()
+  return html.replace(
+    /<pre><code class="language-(\w+)">([\s\S]*?)<\/code><\/pre>/g,
+    (match, lang, code) => {
+      try {
+        // Decode all HTML entities that remark-html may produce
+        const decoded = code
+          .replace(/&#x3C;/gi, '<')
+          .replace(/&#x3E;/gi, '>')
+          .replace(/&#x26;/gi, '&')
+          .replace(/&#x22;/gi, '"')
+          .replace(/&#x27;/gi, "'")
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&quot;/g, '"')
+          .replace(/&amp;/g, '&')
+        // codeToHtml returns a full <pre style="bg;fg"><code>...</code></pre>
+        return hl.codeToHtml(decoded, { lang })
+      } catch {
+        return match
+      }
+    }
+  )
+}
+
+export default function MarkdownBlock({ props, onUpdate, resizable }) {
   const content = readProp(props, 'content', markdownSchema)
   const width = readProp(props, 'width', markdownSchema)
+  const height = props?.height
   const canEdit = typeof onUpdate === 'function'
   const [editing, setEditing] = useState(false)
   const editingActive = canEdit && editing
@@ -28,6 +74,32 @@ export default function MarkdownBlock({ props, onUpdate }) {
   const blockRef = useRef(null)
   const [editHeight, setEditHeight] = useState(null)
 
+  const handleResize = useCallback((w, h) => {
+    onUpdate?.({ width: w, height: h })
+  }, [onUpdate])
+
+  const rawHtml = useMemo(() => renderMarkdown(content), [content])
+  const [renderedHtml, setRenderedHtml] = useState(rawHtml)
+
+  // Re-highlight when theme changes
+  const [themeKey, setThemeKey] = useState(0)
+  useEffect(() => {
+    function onThemeChanged() { setThemeKey((k) => k + 1) }
+    document.addEventListener('storyboard:theme:changed', onThemeChanged)
+    return () => document.removeEventListener('storyboard:theme:changed', onThemeChanged)
+  }, [])
+
+  // Async-highlight code blocks after initial render or theme change
+  useEffect(() => {
+    setRenderedHtml(rawHtml)
+    if (!rawHtml.includes('<code class="language-')) return
+    let cancelled = false
+    highlightCodeBlocks(rawHtml).then((highlighted) => {
+      if (!cancelled) setRenderedHtml(highlighted)
+    })
+    return () => { cancelled = true }
+  }, [rawHtml, themeKey])
+
   const handleContentChange = useCallback((e) => {
     onUpdate?.({ content: e.target.value })
   }, [onUpdate])
@@ -60,7 +132,7 @@ export default function MarkdownBlock({ props, onUpdate }) {
       <div
         ref={blockRef}
         className={styles.block}
-        style={{ width, minHeight: editHeight || undefined }}
+        style={{ width, ...(height ? { height, overflow: 'auto' } : {}), minHeight: editHeight || undefined }}
       >
         {editingActive ? (
           <textarea
@@ -90,12 +162,20 @@ export default function MarkdownBlock({ props, onUpdate }) {
             tabIndex={canEdit ? 0 : undefined}
             onKeyDown={canEdit ? (e) => { if (e.key === 'Enter') setEditing(true) } : undefined}
             dangerouslySetInnerHTML={{
-              __html: renderMarkdown(content) || (canEdit
+              __html: renderedHtml || (canEdit
                 ? '<p class="placeholder">Double-click to edit…</p>'
                 : '<p class="placeholder">No content</p>'),
             }}
           />
         )}
+        {resizable && (
+          <ResizeHandle
+            targetRef={blockRef}
+            minWidth={200}
+            minHeight={60}
+            onResize={handleResize}
+          />
+        )}
       </div>
     </WidgetWrapper>
   )

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

@@ -1,4 +1,5 @@
 .block {
+  position: relative;
   min-height: 80px;
   --sb--markdown-bg: var(--bgColor-default, #ffffff);
   --sb--markdown-fg: var(--fgColor-default, #1f2328);
@@ -52,22 +53,26 @@
   background: var(--bgColor-neutral-muted, #afb8c133);
   padding: 2px 5px;
   border-radius: 4px;
-  font-size: 13px;
-  font-family: ui-monospace, monospace;
+  font-size: 12px;
+  font-weight: 400;
+  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 }
 
 .preview ul {
   margin: 0 0 8px;
   padding-left: 20px;
+  list-style-type: disc;
 }
 
 .preview li {
   margin: 0 0 2px;
+  display: list-item;
 }
 
 .preview ol {
   margin: 0 0 8px;
   padding-left: 20px;
+  list-style-type: decimal;
 }
 
 /* GFM: Task lists */
@@ -119,9 +124,19 @@
 
 /* Code blocks */
 .preview pre {
-  background: var(--bgColor-neutral-muted, #afb8c133);
   padding: 12px 16px;
   border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  overflow-x: auto;
+  margin: 8px 0;
+  background: var(--bgColor-neutral-muted, #afb8c133);
+  line-height: 1.4;
+}
+
+/* When inspector highlighter sets inline background, let it through */
+.preview pre[style] {
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
   overflow-x: auto;
   margin: 8px 0;
 }
@@ -129,7 +144,18 @@
 .preview pre code {
   background: none;
   padding: 0;
-  font-size: 13px;
+  font-size: 12px;
+  font-weight: 400;
+  font-family: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  white-space: pre;
+  word-break: normal;
+  overflow-wrap: normal;
+  display: block;
+}
+
+/* Suppress line numbers from inspector highlighter's .line spans */
+.preview :global(.line::before) {
+  display: none !important;
 }
 
 /* Blockquotes */