@dfosco/storyboard-react 3.9.1 → 3.10.0-beta.1

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

@@ -0,0 +1,209 @@
+/* WidgetChrome — universal hover toolbar for canvas widgets */
+
+.chromeContainer {
+  position: relative;
+}
+
+/* Widget slot — contains the actual widget; selection outline targets this */
+.widgetSlot {
+  position: relative;
+  border-radius: 4px;
+}
+
+.widgetSlotSelected {
+  outline: 2px solid var(--bgColor-accent-emphasis, #2f81f7);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Toolbar — absolutely positioned below the widget so it doesn't affect
+   the draggable box dimensions (tiny-canvas measures children for drag). */
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 4px);
+}
+
+/* Trigger dot — centered, visible at rest */
+.triggerDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--borderColor-muted, #d0d7de);
+  opacity: 0.5;
+  transition: opacity 120ms;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+:global([data-sb-canvas-theme^='dark']) .triggerDot {
+  background: var(--borderColor-muted, #373e47);
+  opacity: 0.6;
+}
+
+.triggerDotHidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Toolbar content — feature buttons + select handle */
+.toolbarContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms;
+}
+
+.toolbarContentVisible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Feature buttons — left-aligned group */
+.featureButtons {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+/* Individual feature button */
+.featureBtn {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  border: 1.6px solid var(--borderColor-muted, #d0d7de);
+  background: var(--bgColor-default, #ffffff);
+  color: var(--fgColor-muted, #656d76);
+  font-size: 12px;
+  transition: background 100ms, color 100ms, border-color 100ms;
+}
+
+:global([data-sb-canvas-theme^='dark']) .featureBtn {
+  background: var(--bgColor-muted, #161b22);
+  border-color: var(--borderColor-muted, #373e47);
+  color: var(--fgColor-muted, #8b949e);
+}
+
+.featureBtn:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+  color: var(--fgColor-default, #1f2328);
+  border-color: var(--borderColor-default, #d0d7de);
+}
+
+:global([data-sb-canvas-theme^='dark']) .featureBtn:hover {
+  background: var(--bgColor-neutral-muted, #272c33);
+  color: var(--fgColor-default, #e6edf3);
+  border-color: var(--borderColor-default, #484f58);
+}
+
+/* Select handle — right-aligned rounded rect */
+.selectHandle {
+  all: unset;
+  cursor: grab;
+  width: 18px;
+  height: 12px;
+  border-radius: 4px;
+  border: 1.6px solid var(--borderColor-muted, #d0d7de);
+  background: var(--bgColor-default, #ffffff);
+  transition: background 100ms, border-color 100ms;
+  flex-shrink: 0;
+}
+
+:global([data-sb-canvas-theme^='dark']) .selectHandle {
+  background: var(--bgColor-muted, #161b22);
+  border-color: var(--borderColor-muted, #373e47);
+}
+
+.selectHandle:hover {
+  border-color: var(--bgColor-accent-emphasis, #2f81f7);
+}
+
+.selectHandleActive {
+  background: var(--bgColor-accent-emphasis, #2f81f7);
+  border-color: var(--bgColor-accent-emphasis, #2f81f7);
+}
+
+.selectHandleActive:hover {
+  background: var(--bgColor-accent-emphasis, #388bfd);
+  border-color: var(--bgColor-accent-emphasis, #388bfd);
+}
+
+/* Color picker feature */
+.colorPickerWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.colorDotInner {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  display: block;
+}
+
+.colorPopup {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  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;
+  white-space: nowrap;
+}
+
+:global([data-sb-canvas-theme^='dark']) .colorPopup {
+  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);
+}
+
+.colorPickerWrapper:hover .colorPopup {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.colorOption {
+  all: unset;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 100ms;
+}
+
+.colorOption:hover {
+  transform: scale(1.15);
+}
+
+.colorOptionActive {
+  border-color: currentColor;
+  box-shadow: 0 0 0 1px currentColor;
+}

package/src/canvas/widgets/widgetConfig.js

@@ -0,0 +1,79 @@
+/**
+ * Widget Config Loader
+ *
+ * Reads widgets.config.json from @dfosco/storyboard-core and builds
+ * schema objects compatible with the existing readProp/readAllProps/getDefaults API.
+ *
+ * The config is the single source of truth for widget definitions —
+ * prop schemas, feature lists, labels, and icons all come from here.
+ */
+import widgetsConfig from '@dfosco/storyboard-core/widgets.config.json'
+
+/**
+ * Convert a config prop definition to the schema shape used by widgetProps.js.
+ * Config uses `"default"`, schema uses `"defaultValue"`.
+ */
+function configPropToSchema(propDef) {
+  const schema = {
+    type: propDef.type,
+    label: propDef.label,
+    category: propDef.category,
+  }
+  if (propDef.default !== undefined) schema.defaultValue = propDef.default
+  if (propDef.options) schema.options = propDef.options
+  if (propDef.min !== undefined) schema.min = propDef.min
+  if (propDef.max !== undefined) schema.max = propDef.max
+  return schema
+}
+
+/**
+ * Build schema objects for all widget types from the config.
+ * Returns the same shape as the old hardcoded schemas in widgetProps.js.
+ */
+function buildSchemas() {
+  const result = {}
+  for (const [type, def] of Object.entries(widgetsConfig.widgets)) {
+    const schema = {}
+    for (const [key, propDef] of Object.entries(def.props || {})) {
+      schema[key] = configPropToSchema(propDef)
+    }
+    result[type] = schema
+  }
+  return result
+}
+
+/** All widget schemas, keyed by type string. */
+export const schemas = buildSchemas()
+
+/** Full widget config entries, keyed by type string. */
+export const widgetTypes = widgetsConfig.widgets
+
+/**
+ * Get the feature list for a widget type.
+ * @param {string} type — widget type string
+ * @returns {Array} features array from config, or empty array
+ */
+export function getFeatures(type) {
+  return widgetTypes[type]?.features ?? []
+}
+
+/**
+ * Get the display metadata (label, icon) for a widget type.
+ * @param {string} type — widget type string
+ * @returns {{ label: string, icon: string } | null}
+ */
+export function getWidgetMeta(type) {
+  const def = widgetTypes[type]
+  if (!def) return null
+  return { label: def.label, icon: def.icon }
+}
+
+/**
+ * Get all widget types as an array of { type, label, icon } for menus.
+ * Excludes link-preview which is created via paste only.
+ */
+export function getMenuWidgetTypes() {
+  return Object.entries(widgetTypes)
+    .filter(([type]) => type !== 'link-preview')
+    .map(([type, def]) => ({ type, label: def.label, icon: def.icon }))
+}

package/src/canvas/widgets/widgetProps.js

@@ -54,8 +54,9 @@
  *
  * ## Declaring Widget Props (Schema)
  *
- * Each widget type exports a `schema` describing its props.
- * This is used by the toolbar, canvas settings, and future widget inspectors.
+ * Widget prop schemas are defined in widgets.config.json (packages/core)
+ * and loaded via widgetConfig.js. This module re-exports the generated
+ * schemas and provides utility functions for reading props with defaults.
  */
 
 /**
@@ -71,6 +72,8 @@
  * @property {number}   [max]       — maximum for 'number' type
  */
 
+import { schemas as configSchemas } from './widgetConfig.js'
+
 /**
  * Read a prop value with fallback to schema default.
  * @param {object} props    — widget props object (may be null)
@@ -114,38 +117,13 @@ export function getDefaults(schema) {
   return result
 }
 
-// ── Widget Schemas ──────────────────────────────────────────────────
-
-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'] },
-}
-
-export const markdownSchema = {
-  content: { type: 'text',   label: 'Content', category: 'content', defaultValue: '' },
-  width:   { type: 'number', label: 'Width',   category: 'size',    defaultValue: 360, min: 200, max: 1200 },
-}
+// ── Config-driven schemas ───────────────────────────────────────────
 
-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 },
-}
+/** Schema registry — maps widget type strings to their schemas. */
+export const schemas = configSchemas
 
-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.
- */
-export const schemas = {
-  'sticky-note': stickyNoteSchema,
-  'markdown': markdownSchema,
-  'prototype': prototypeEmbedSchema,
-  'link-preview': linkPreviewSchema,
-}
+// Named exports for backward compatibility with widget imports
+export const stickyNoteSchema = schemas['sticky-note']
+export const markdownSchema = schemas['markdown']
+export const prototypeEmbedSchema = schemas['prototype']
+export const linkPreviewSchema = schemas['link-preview']

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]) {