@dfosco/storyboard-react 3.9.1 → 3.10.0-beta.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()
@@ -29,15 +37,17 @@ export default function StickyNote({ props, onUpdate }) {
     onUpdate?.({ text: e.target.value })
   }, [onUpdate])
 
-  const handleColorChange = useCallback((newColor) => {
-    onUpdate?.({ color: newColor })
-  }, [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,34 +75,13 @@ export default function StickyNote({ props, onUpdate }) {
             placeholder="Type here…"
           />
         )}
-      </article>
-
-      {/* Color picker — dot trigger below the sticky */}
-      <div
-        className={styles.pickerArea}
-        onMouseDown={(e) => e.stopPropagation()}
-        onPointerDown={(e) => e.stopPropagation()}
-      >
-        <span
-          className={styles.pickerDot}
-          style={{ background: palette.dot }}
+        <ResizeHandle
+          targetRef={stickyRef}
+          minWidth={180}
+          minHeight={60}
+          onResize={handleResize}
         />
-        <div className={styles.pickerPopup}>
-          {Object.entries(COLORS).map(([colorName, c]) => (
-            <button
-              key={colorName}
-              className={`${styles.colorDot} ${colorName === color ? styles.active : ''}`}
-              style={{ background: c.bg, borderColor: c.border }}
-              onClick={(e) => {
-                e.stopPropagation()
-                handleColorChange(colorName)
-              }}
-              title={colorName}
-              aria-label={`Set color to ${colorName}`}
-            />
-          ))}
-        </div>
-      </div>
+      </article>
     </div>
   )
 }

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;
 }
@@ -60,73 +60,3 @@
 :global([data-sb-canvas-theme^='dark']) .textarea {
   color: color-mix(in srgb, var(--sticky-bg) 26%, #f0f6fc 74%);
 }
-
-/* Color picker area — sits below the sticky */
-
-.pickerArea {
-  display: flex;
-  justify-content: center;
-  padding-top: 6px;
-  position: relative;
-}
-
-.pickerDot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  opacity: 0.5;
-  transition: opacity 150ms;
-  cursor: pointer;
-}
-
-.pickerPopup {
-  position: absolute;
-  top: 4px;
-  display: flex;
-  gap: 5px;
-  padding: 6px 10px;
-  background: var(--bgColor-default, #ffffff);
-  border-radius: 20px;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.08),
-    0 4px 12px rgba(0, 0, 0, 0.12);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 150ms;
-  z-index: 10;
-}
-
-:global([data-sb-canvas-theme^='dark']) .pickerPopup {
-  background: var(--bgColor-muted, #161b22);
-  box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.08),
-    0 4px 12px rgba(0, 0, 0, 0.45);
-}
-
-.pickerArea:hover .pickerDot {
-  opacity: 0;
-}
-
-.pickerArea:hover .pickerPopup {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.colorDot {
-  all: unset;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 2px solid transparent;
-  cursor: pointer;
-  transition: transform 100ms;
-}
-
-.colorDot:hover {
-  transform: scale(1.15);
-}
-
-.colorDot.active {
-  border-color: var(--sticky-border);
-  box-shadow: 0 0 0 1px var(--sticky-border);
-}

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/WidgetChrome.jsx

@@ -0,0 +1,244 @@
+import { useState, useCallback, useRef } from 'react'
+import styles from './WidgetChrome.module.css'
+
+const STICKY_NOTE_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' },
+}
+
+function DeleteIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.15l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z" />
+    </svg>
+  )
+}
+
+function ZoomInIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z" />
+    </svg>
+  )
+}
+
+function ZoomOutIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M2.75 7.25h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5Z" />
+    </svg>
+  )
+}
+
+function EditIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z" />
+    </svg>
+  )
+}
+
+const ACTION_ICONS = {
+  'delete': DeleteIcon,
+  'zoom-in': ZoomInIcon,
+  'zoom-out': ZoomOutIcon,
+  'edit': EditIcon,
+}
+
+const ACTION_LABELS = {
+  'delete': 'Delete widget',
+  'zoom-in': 'Zoom in',
+  'zoom-out': 'Zoom out',
+  'edit': 'Edit',
+}
+
+/**
+ * ColorPicker feature button — shows a dot that reveals color options on hover.
+ */
+function ColorPickerFeature({ currentColor, options, onColorChange }) {
+  const palette = STICKY_NOTE_COLORS[currentColor] ?? STICKY_NOTE_COLORS.yellow
+
+  return (
+    <div
+      className={styles.colorPickerWrapper}
+      onMouseDown={(e) => e.stopPropagation()}
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      <button
+        className={styles.featureBtn}
+        style={{ background: palette.dot }}
+        aria-label="Change color"
+        title="Change color"
+      >
+        <span className={styles.colorDotInner} style={{ background: palette.dot }} />
+      </button>
+      <div className={styles.colorPopup}>
+        {(options || Object.keys(STICKY_NOTE_COLORS)).map((colorName) => {
+          const c = STICKY_NOTE_COLORS[colorName]
+          if (!c) return null
+          return (
+            <button
+              key={colorName}
+              className={`${styles.colorOption} ${colorName === currentColor ? styles.colorOptionActive : ''}`}
+              style={{ background: c.bg, borderColor: c.border }}
+              onClick={(e) => {
+                e.stopPropagation()
+                onColorChange(colorName)
+              }}
+              title={colorName}
+              aria-label={`Set color to ${colorName}`}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * WidgetChrome — universal hover toolbar rendered below every canvas widget.
+ *
+ * Provides:
+ * - A trigger dot (visible at rest) that transitions to a toolbar on hover
+ * - Feature buttons (left) driven by widget config
+ * - A select handle (right) for selection toggling
+ *
+ * Widget components can expose imperative action handlers via a ref:
+ *   useImperativeHandle(ref, () => ({ handleAction(actionId) { ... } }))
+ * WidgetChrome will call widgetRef.current.handleAction(actionId) for
+ * non-standard actions (anything other than 'delete').
+ */
+export default function WidgetChrome({
+  features = [],
+  selected = false,
+  widgetProps,
+  widgetRef,
+  onSelect,
+  onDeselect,
+  onAction,
+  onUpdate,
+  children,
+}) {
+  const [hovered, setHovered] = useState(false)
+  const leaveTimer = useRef(null)
+  const pointerStartPos = useRef(null)
+
+  const handleMouseEnter = useCallback(() => {
+    clearTimeout(leaveTimer.current)
+    setHovered(true)
+  }, [])
+
+  const handleMouseLeave = useCallback(() => {
+    leaveTimer.current = setTimeout(() => setHovered(false), 80)
+  }, [])
+
+  // Track pointer position on the handle to distinguish click from drag.
+  const handleHandlePointerDown = useCallback((e) => {
+    pointerStartPos.current = { x: e.clientX, y: e.clientY }
+  }, [])
+
+  const handleHandlePointerUp = useCallback((e) => {
+    if (!pointerStartPos.current) return
+    const start = pointerStartPos.current
+    pointerStartPos.current = null
+    // Only toggle selection if the pointer stayed close (click, not drag)
+    const dist = Math.hypot(e.clientX - start.x, e.clientY - start.y)
+    if (dist > 10) return
+    e.stopPropagation()
+    if (selected) {
+      onDeselect?.()
+    } else {
+      onSelect?.()
+    }
+  }, [selected, onSelect, onDeselect])
+
+  const handleActionClick = useCallback((actionId, e) => {
+    e.stopPropagation()
+    // Standard actions go through onAction (handled by CanvasPage)
+    if (actionId === 'delete') {
+      onAction?.(actionId)
+      return
+    }
+    // Widget-specific actions go through the widget's imperative ref
+    if (widgetRef?.current?.handleAction) {
+      widgetRef.current.handleAction(actionId)
+      return
+    }
+    // Fallback to generic handler
+    onAction?.(actionId)
+  }, [onAction, widgetRef])
+
+  const handleColorChange = useCallback((color) => {
+    onUpdate?.({ color })
+  }, [onUpdate])
+
+  const showToolbar = hovered || selected
+
+  return (
+    <div
+      className={styles.chromeContainer}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className={`${styles.widgetSlot} ${selected ? styles.widgetSlotSelected : ''}`}>
+        {children}
+      </div>
+      <div
+        className={styles.toolbar}
+      >
+        {/* Trigger dot — visible at rest */}
+        <span
+          className={`${styles.triggerDot} ${showToolbar ? styles.triggerDotHidden : ''}`}
+        />
+
+        {/* Toolbar content — visible on hover */}
+        <div className={`${styles.toolbarContent} ${showToolbar ? styles.toolbarContentVisible : ''}`}>
+          <div className={styles.featureButtons}>
+            {features.map((feature) => {
+              if (feature.type === 'color-picker') {
+                return (
+                  <ColorPickerFeature
+                    key={feature.id}
+                    currentColor={widgetProps?.[feature.prop] || 'yellow'}
+                    options={feature.options}
+                    onColorChange={handleColorChange}
+                  />
+                )
+              }
+
+              if (feature.type === 'action') {
+                const Icon = ACTION_ICONS[feature.action]
+                return (
+                  <button
+                    key={feature.id}
+                    className={styles.featureBtn}
+                    onClick={(e) => handleActionClick(feature.action, e)}
+                    title={ACTION_LABELS[feature.action] || feature.action}
+                    aria-label={ACTION_LABELS[feature.action] || feature.action}
+                  >
+                    {Icon ? <Icon /> : feature.action}
+                  </button>
+                )
+              }
+
+              return null
+            })}
+          </div>
+
+          <button
+            className={`tc-drag-handle ${styles.selectHandle} ${selected ? styles.selectHandleActive : ''}`}
+            onPointerDown={handleHandlePointerDown}
+            onPointerUp={handleHandlePointerUp}
+            title={selected ? 'Deselect' : 'Select'}
+            aria-label={selected ? 'Deselect widget' : 'Select widget'}
+            aria-pressed={selected}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}