@dfosco/storyboard-react 4.0.0-beta.6 → 4.0.0-beta.8

package/package.json

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

package/src/canvas/CanvasPage.jsx

@@ -47,6 +47,35 @@ function resolveCanvasThemeFromStorage() {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }
 
+/**
+ * Get the copyable URL for a widget based on its type.
+ * Returns the most relevant URL/path for the widget content.
+ */
+function getWidgetCopyableUrl(widget) {
+  const { type, props = {} } = widget
+  const base = (typeof import.meta !== 'undefined' && import.meta.env?.BASE_URL) || '/'
+  switch (type) {
+    case 'prototype':
+      // Prototype src is a path like "/MyPrototype" - make it a full URL
+      return props.src ? `${window.location.origin}${base.replace(/\/$/, '')}${props.src}` : ''
+    case 'figma-embed':
+      return props.url || ''
+    case 'link-preview':
+      return props.url || ''
+    case 'image':
+      // Return the served image URL
+      return props.src ? `${window.location.origin}${base.replace(/\/$/, '')}/_storyboard/canvas/images/${props.src}` : ''
+    case 'sticky-note':
+      // Sticky notes have text content, not a URL
+      return props.text || ''
+    case 'markdown':
+      // Markdown has content, not a URL
+      return props.content || ''
+    default:
+      return ''
+  }
+}
+
 /**
  * Debounce helper — returns a function that delays invocation.
  * Exposes `.cancel()` to abort pending calls (used by undo/redo).
@@ -977,6 +1006,34 @@ export default function CanvasPage({ name }) {
         e.preventDefault()
         setSelectedWidgetIds(new Set())
       }
+      // Copy shortcuts (single widget selected):
+      // - cmd+c → copy URL/content
+      // - Shift+C (no cmd) → copy widget ID (or file path for images)
+      const mod = e.metaKey || e.ctrlKey
+      if (mod && e.key === 'c' && !e.shiftKey && selectedWidgetIds.size === 1) {
+        const widgetId = [...selectedWidgetIds][0]
+        const widget = localWidgets?.find(w => w.id === widgetId)
+        if (widget) {
+          e.preventDefault()
+          const url = getWidgetCopyableUrl(widget)
+          if (url) {
+            navigator.clipboard.writeText(url).catch(() => {})
+          }
+        }
+      }
+      // Shift+C (uppercase C, no cmd) → copy ID or file path
+      if (e.key === 'C' && e.shiftKey && !mod && selectedWidgetIds.size === 1) {
+        const widgetId = [...selectedWidgetIds][0]
+        const widget = localWidgets?.find(w => w.id === widgetId)
+        if (widget) {
+          e.preventDefault()
+          if (widget.type === 'image' && widget.props?.src) {
+            navigator.clipboard.writeText(`src/canvas/images/${widget.props.src}`).catch(() => {})
+          } else {
+            navigator.clipboard.writeText(widgetId).catch(() => {})
+          }
+        }
+      }
       if (e.key === 'Delete' || e.key === 'Backspace') {
         e.preventDefault()
         if (selectedWidgetIds.size > 1) {
@@ -1002,7 +1059,7 @@ export default function CanvasPage({ name }) {
     }
     document.addEventListener('keydown', handleKeyDown)
     return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [selectedWidgetIds, handleWidgetRemove, undoRedo, name, debouncedSave])
+  }, [selectedWidgetIds, localWidgets, handleWidgetRemove, undoRedo, name, debouncedSave])
 
   // Paste handler — images become image widgets, same-origin URLs become prototypes,
   // other URLs become link previews, text becomes markdown