@dfosco/storyboard-react 3.9.0 → 3.10.0-beta.0

package/package.json

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

package/src/canvas/widgets/PrototypeEmbed.jsx

@@ -36,7 +36,14 @@ export default function PrototypeEmbed({ props, onUpdate }) {
   const label = readProp(props, 'label', prototypeEmbedSchema) || src
 
   const basePath = (import.meta.env.BASE_URL || '/').replace(/\/$/, '')
-  const rawSrc = src ? `${basePath}${src}` : ''
+  const baseSegment = basePath.replace(/^\//, '')
+  const rawSrc = useMemo(() => {
+    if (!src) return ''
+    if (/^https?:\/\//.test(src)) return src
+    if (baseSegment && src.startsWith(basePath)) return src
+    if (baseSegment && src.startsWith(baseSegment)) return `/${src}`
+    return `${basePath}${src}`
+  }, [src, basePath, baseSegment])
 
   const scale = zoom / 100
 
@@ -48,9 +55,14 @@ export default function PrototypeEmbed({ props, onUpdate }) {
   const filterRef = useRef(null)
   const embedRef = useRef(null)
 
-  const iframeSrc = rawSrc
-    ? `${rawSrc}${rawSrc.includes('?') ? '&' : '?'}_sb_embed&_sb_theme_target=prototype&_sb_canvas_theme=${canvasTheme}`
-    : ''
+  const iframeSrc = useMemo(() => {
+    if (!rawSrc) return ''
+    const hashIdx = rawSrc.indexOf('#')
+    const base = hashIdx >= 0 ? rawSrc.slice(0, hashIdx) : rawSrc
+    const hash = hashIdx >= 0 ? rawSrc.slice(hashIdx) : ''
+    const sep = base.includes('?') ? '&' : '?'
+    return `${base}${sep}_sb_embed&_sb_theme_target=prototype&_sb_canvas_theme=${canvasTheme}${hash}`
+  }, [rawSrc, canvasTheme])
 
   // Build prototype index for the picker
   const prototypeIndex = useMemo(() => {

package/src/canvas/widgets/ResizeHandle.jsx

@@ -0,0 +1,56 @@
+import { useCallback } from 'react'
+import styles from './ResizeHandle.module.css'
+
+/**
+ * Shared resize handle for canvas widgets.
+ *
+ * Renders a small drag handle in the bottom-right corner of the parent.
+ * On drag, calls `onResize(width, height)` with new dimensions.
+ *
+ * The parent must have `position: relative` for correct positioning.
+ *
+ * @param {Object} props
+ * @param {React.RefObject} props.targetRef - ref to the element being resized (reads offsetWidth/Height)
+ * @param {number} [props.minWidth=180]  - minimum allowed width
+ * @param {number} [props.minHeight=60]  - minimum allowed height
+ * @param {Function} props.onResize - callback: (width, height) => void
+ */
+export default function ResizeHandle({ targetRef, minWidth = 180, minHeight = 60, onResize }) {
+  const handleMouseDown = useCallback((e) => {
+    e.stopPropagation()
+    e.preventDefault()
+
+    const el = targetRef?.current
+    if (!el) return
+
+    const startX = e.clientX
+    const startY = e.clientY
+    const startW = el.offsetWidth
+    const startH = el.offsetHeight
+
+    function onMove(ev) {
+      const newW = Math.max(minWidth, startW + ev.clientX - startX)
+      const newH = Math.max(minHeight, startH + ev.clientY - startY)
+      onResize?.(newW, newH)
+    }
+
+    function onUp() {
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseup', onUp)
+    }
+
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseup', onUp)
+  }, [targetRef, minWidth, minHeight, onResize])
+
+  return (
+    <div
+      className={styles.handle}
+      onMouseDown={handleMouseDown}
+      onPointerDown={(e) => e.stopPropagation()}
+      role="separator"
+      aria-orientation="horizontal"
+      aria-label="Resize"
+    />
+  )
+}

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

@@ -0,0 +1,29 @@
+.handle {
+  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;
+  border-radius: 0 0 6px 0;
+}
+
+/* Show on parent hover or direct hover */
+*:hover > .handle,
+.handle:hover {
+  opacity: 1;
+}

package/src/canvas/widgets/StickyNote.jsx

@@ -1,5 +1,6 @@
 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 = {
@@ -14,10 +15,17 @@ const COLORS = {
 export default function StickyNote({ props, onUpdate }) {
   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 palette = COLORS[color] ?? COLORS.yellow
   const textareaRef = useRef(null)
+  const stickyRef = useRef(null)
   const [editing, setEditing] = useState(false)
 
+  const handleResize = useCallback((w, h) => {
+    onUpdate?.({ width: w, height: h })
+  }, [onUpdate])
+
   useEffect(() => {
     if (editing && textareaRef.current) {
       textareaRef.current.focus()
@@ -36,8 +44,14 @@ export default function StickyNote({ props, onUpdate }) {
   return (
     <div className={styles.container}>
       <article
+        ref={stickyRef}
         className={styles.sticky}
-        style={{ '--sticky-bg': palette.bg, '--sticky-border': palette.border }}
+        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}
@@ -65,6 +79,12 @@ export default function StickyNote({ props, onUpdate }) {
             placeholder="Type here…"
           />
         )}
+        <ResizeHandle
+          targetRef={stickyRef}
+          minWidth={180}
+          minHeight={60}
+          onResize={handleResize}
+        />
       </article>
 
       {/* Color picker — dot trigger below the sticky */}

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

@@ -6,10 +6,10 @@
   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);
-  resize: both;
   overflow: auto;
   position: relative;
 }

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

@@ -0,0 +1,96 @@
+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('does not include default values for width/height so new widgets size naturally', () => {
+    const defaults = getDefaults(stickyNoteSchema)
+    expect(defaults).not.toHaveProperty('width')
+    expect(defaults).not.toHaveProperty('height')
+  })
+
+  it('returns null when width/height are not saved in props', () => {
+    const props = { text: 'hello', color: 'yellow' }
+    expect(readProp(props, 'width', stickyNoteSchema)).toBeNull()
+    expect(readProp(props, 'height', stickyNoteSchema)).toBeNull()
+  })
+
+  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('renders without explicit dimensions when width/height are not saved', () => {
+    const { container } = render(<StickyNote props={{ text: 'Hi' }} onUpdate={vi.fn()} />)
+    const sticky = container.querySelector('article')
+    expect(sticky.style.width).toBe('')
+    expect(sticky.style.height).toBe('')
+  })
+
+  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', () => {
+    const { container } = render(<StickyNote props={{ text: 'Hi' }} onUpdate={vi.fn()} />)
+    const handle = container.querySelector('[role="separator"]')
+    expect(handle).not.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} />
+    )
+    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} />
+    )
+    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 })
+  })
+})

package/src/canvas/widgets/widgetProps.js

@@ -120,6 +120,8 @@ export const stickyNoteSchema = {
   text:  { type: 'text',   label: 'Text',  category: 'content', defaultValue: '' },
   color: { type: 'select', label: 'Color', category: 'settings', defaultValue: 'yellow',
            options: ['yellow', 'blue', 'green', 'pink', 'purple', 'orange'] },
+  width:  { type: 'number', label: 'Width',  category: 'size', min: 180 },
+  height: { type: 'number', label: 'Height', category: 'size', min: 60 },
 }
 
 export const markdownSchema = {

package/src/vite/data-plugin.js

@@ -397,6 +397,14 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
         }
       }
 
+      // Auto-fill gitAuthor for canvas metadata from git history
+      if (suffix === 'canvas' && parsed && !parsed.gitAuthor) {
+        const gitAuthor = getGitAuthor(root, absPath)
+        if (gitAuthor) {
+          parsed = { ...parsed, gitAuthor }
+        }
+      }
+
       // Inject inferred route and resolve JSX companion for canvases
       if (suffix === 'canvas') {
         if (canvasRoutes[name]) {