@dfosco/storyboard-react 3.0.0 → 3.1.0

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

@@ -4,50 +4,22 @@
 
 .sticky {
   background: var(--sticky-bg, #fff8c5);
-  border-radius: 2px;
+  border-radius: 6px;
+  border: 2px solid color-mix(in srgb, var(--sticky-bg) 80%, rgb(0, 0, 0) 10%);
   min-width: 180px;
-  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.08);
+  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;
 }
 
-.removeBtn {
-  all: unset;
-  cursor: pointer;
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  font-size: 16px;
-  line-height: 1;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--sticky-border, #d4a72c);
-  border-radius: 2px;
-  opacity: 0;
-  transition: opacity 150ms;
-  z-index: 1;
-}
-
-.sticky:hover .removeBtn {
-  opacity: 0.6;
-}
-
-.removeBtn:hover {
-  opacity: 1;
-  color: var(--fgColor-danger, #d1242f);
-}
-
 .text {
-  padding: 12px 14px;
+  padding: 16px 20px;
   margin: 0;
-  font-size: 14px;
+  font-size: 18px;
   line-height: 1.5;
-  color: #1a1a1a;
+  color: color-mix(in srgb, var(--sticky-bg), black 70%);
   white-space: pre-wrap;
   word-break: break-word;
   cursor: text;
@@ -55,21 +27,24 @@
 }
 
 .textarea {
-  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  padding: 12px 14px;
+  padding: 16px 20px;
   margin: 0;
   border: none;
   outline: none;
   background: transparent;
   font-family: inherit;
-  font-size: 14px;
+  font-size: 18px;
   line-height: 1.5;
-  color: #1a1a1a;
+  color: color-mix(in srgb, var(--sticky-bg) 80%, rgb(0, 0, 0) 98%);
+  white-space: pre-wrap;
+  word-break: break-word;
   resize: none;
-  min-height: 80px;
 }
 
 /* Color picker area — sits below the sticky */

package/src/canvas/widgets/WidgetWrapper.jsx

@@ -2,24 +2,11 @@ import styles from './WidgetWrapper.module.css'
 
 /**
  * Common wrapper for all canvas widgets.
- * Provides shadow/border styling and a remove button on hover.
+ * Provides shadow/border styling.
  */
-export default function WidgetWrapper({ children, onRemove, className }) {
+export default function WidgetWrapper({ children, className }) {
   return (
     <section className={`${styles.wrapper} ${className || ''}`}>
-      {onRemove && (
-        <button
-          className={styles.removeBtn}
-          onClick={(e) => {
-            e.stopPropagation()
-            onRemove()
-          }}
-          title="Remove widget"
-          aria-label="Remove widget"
-        >
-          ×
-        </button>
-      )}
       <div className={styles.content}>
         {children}
       </div>

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

@@ -9,36 +9,6 @@
     0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
-.removeBtn {
-  all: unset;
-  cursor: pointer;
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  font-size: 16px;
-  line-height: 1;
-  width: 22px;
-  height: 22px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--fgColor-muted, #656d76);
-  border-radius: 6px;
-  background: var(--bgColor-default, #ffffff);
-  opacity: 0;
-  transition: opacity 150ms;
-  z-index: 1;
-}
-
-.wrapper:hover .removeBtn {
-  opacity: 1;
-}
-
-.removeBtn:hover {
-  color: var(--fgColor-danger, #d1242f);
-  background: var(--bgColor-danger-muted, #ffebe9);
-}
-
 .content {
   position: relative;
 }

package/src/canvas/widgets/index.js

@@ -1,15 +1,17 @@
 import StickyNote from './StickyNote.jsx'
 import MarkdownBlock from './MarkdownBlock.jsx'
 import PrototypeEmbed from './PrototypeEmbed.jsx'
+import LinkPreview from './LinkPreview.jsx'
 
 /**
  * Maps widget type strings to their React components.
- * Each component receives: { id, props, onUpdate, onRemove }
+ * Each component receives: { id, props, onUpdate }
  */
 export const widgetRegistry = {
   'sticky-note': StickyNote,
   'markdown': MarkdownBlock,
   'prototype': PrototypeEmbed,
+  'link-preview': LinkPreview,
 }
 
 /**

package/src/canvas/widgets/widgetProps.js

@@ -130,10 +130,16 @@ export const markdownSchema = {
 export const prototypeEmbedSchema = {
   src:    { type: 'url',    label: 'URL',    category: 'content',  defaultValue: '' },
   label:  { type: 'text',   label: 'Label',  category: 'settings', defaultValue: '' },
+  zoom:   { type: 'number', label: 'Zoom',   category: 'settings', defaultValue: 100, min: 25, max: 200 },
   width:  { type: 'number', label: 'Width',  category: 'size',     defaultValue: 800, min: 200, max: 2000 },
   height: { type: 'number', label: 'Height', category: 'size',     defaultValue: 600, min: 200, max: 1500 },
 }
 
+export const linkPreviewSchema = {
+  url:   { type: 'url',  label: 'URL',   category: 'content',  defaultValue: '' },
+  title: { type: 'text', label: 'Title', category: 'content',  defaultValue: '' },
+}
+
 /**
  * Schema registry — maps widget type strings to their schemas.
  */
@@ -141,4 +147,5 @@ export const schemas = {
   'sticky-note': stickyNoteSchema,
   'markdown': markdownSchema,
   'prototype': prototypeEmbedSchema,
+  'link-preview': linkPreviewSchema,
 }

package/src/vite/data-plugin.js

@@ -3,7 +3,7 @@ import path from 'node:path'
 import { execSync } from 'node:child_process'
 import { globSync } from 'glob'
 import { parse as parseJsonc } from 'jsonc-parser'
-import { materializeFromText } from '../../../core/src/canvas/materializer.js'
+import { materializeFromText } from '@dfosco/storyboard-core/canvas/materializer'
 
 const VIRTUAL_MODULE_ID = 'virtual:storyboard-data-index'
 const RESOLVED_ID = '\0' + VIRTUAL_MODULE_ID
@@ -34,26 +34,28 @@ function parseDataFile(filePath) {
 
     const name = canvasJsonlMatch[1]
     let inferredRoute = null
-    const canvasFolderMatch = normalized.match(/(?:^|\/)src\/canvases\/([^/]+)\.folder\//)
+    const canvasFolderMatch = normalized.match(/(?:^|\/)src\/canvas\/([^/]+)\.folder\//)
     const canvasFolderName = canvasFolderMatch ? canvasFolderMatch[1] : null
     const folderDirMatch = normalized.match(/(?:^|\/)src\/prototypes\/([^/]+)\.folder\//)
     const folderName = folderDirMatch ? folderDirMatch[1] : null
 
-    const canvasCheck = normalized.match(/(?:^|\/)src\/canvases\//)
+    const canvasCheck = normalized.match(/(?:^|\/)src\/canvas\//)
     if (canvasCheck) {
       const dirPath = normalized.substring(0, normalized.lastIndexOf('/'))
-      const routeBase = dirPath
-        .replace(/^.*?src\/canvases\//, '')
+      const routeBase = (dirPath + '/')
+        .replace(/^.*?src\/canvas\//, '')
         .replace(/[^/]*\.folder\/?/g, '')
+        .replace(/\/$/, '')
       inferredRoute = '/canvas/' + (routeBase ? routeBase + '/' : '') + name
       inferredRoute = inferredRoute.replace(/\/+/g, '/').replace(/\/$/, '') || '/canvas'
     }
     const protoCheck = normalized.match(/(?:^|\/)src\/prototypes\//)
     if (!canvasCheck && protoCheck) {
       const dirPath = normalized.substring(0, normalized.lastIndexOf('/'))
-      const routeBase = dirPath
+      const routeBase = (dirPath + '/')
         .replace(/^.*?src\/prototypes\//, '')
         .replace(/[^/]*\.folder\/?/g, '')
+        .replace(/\/$/, '')
       inferredRoute = '/canvas/' + (routeBase ? routeBase + '/' : '') + name
       inferredRoute = inferredRoute.replace(/\/+/g, '/').replace(/\/$/, '') || '/canvas'
     }
@@ -386,7 +388,7 @@ function generateModule({ index, protoFolders, flowRoutes, canvasRoutes }, root)
           parsed = { ...parsed, _route: canvasRoutes[name] }
         }
         // Inject folder association
-        const folderDirMatch = path.relative(root, absPath).replace(/\\/g, '/').match(/(?:^|\/)src\/(?:prototypes|canvases)\/([^/]+)\.folder\//)
+        const folderDirMatch = path.relative(root, absPath).replace(/\\/g, '/').match(/(?:^|\/)src\/(?:prototypes|canvas)\/([^/]+)\.folder\//)
         if (folderDirMatch) {
           parsed = { ...parsed, _folder: folderDirMatch[1] }
         }