@dfosco/storyboard-react 2.8.0 → 3.1.0

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

@@ -0,0 +1,242 @@
+.embed {
+  position: relative;
+  overflow: hidden;
+  background: var(--bgColor-default, #ffffff);
+}
+
+.iframeContainer {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.iframe {
+  border: none;
+  display: block;
+}
+
+.dragOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: grab;
+}
+
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--fgColor-muted, #656d76);
+  font-size: 14px;
+  font-style: italic;
+  cursor: pointer;
+}
+
+.empty p {
+  margin: 0;
+}
+
+.editBtn {
+  all: unset;
+  cursor: pointer;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+  font-size: 14px;
+  opacity: 0;
+  transition: opacity 150ms;
+  z-index: 2;
+}
+
+.embed:hover .editBtn {
+  opacity: 1;
+}
+
+.editBtn:hover {
+  background: rgba(255, 255, 255, 0.98);
+}
+
+@media (prefers-color-scheme: dark) {
+  .editBtn {
+    background: rgba(22, 27, 34, 0.88);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .editBtn:hover {
+    background: rgba(30, 37, 46, 0.95);
+  }
+}
+
+.urlForm {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 24px;
+  height: 100%;
+  box-sizing: border-box;
+  justify-content: center;
+}
+
+.urlLabel {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--fgColor-muted, #656d76);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.urlInput {
+  all: unset;
+  padding: 8px 10px;
+  font-size: 14px;
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  border-radius: 6px;
+  background: var(--bgColor-default, #ffffff);
+  color: var(--fgColor-default, #1f2328);
+}
+
+.urlInput:focus {
+  border-color: var(--bgColor-accent-emphasis, #2f81f7);
+  box-shadow: 0 0 0 2px rgba(47, 129, 247, 0.3);
+}
+
+.urlActions {
+  display: flex;
+  gap: 8px;
+}
+
+.urlSave,
+.urlCancel {
+  all: unset;
+  cursor: pointer;
+  padding: 6px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 6px;
+  text-align: center;
+}
+
+.urlSave {
+  background: var(--bgColor-accent-emphasis, #2f81f7);
+  color: var(--fgColor-onEmphasis, #ffffff);
+}
+
+.urlSave:hover {
+  background: var(--bgColor-accent-emphasis, #388bfd);
+}
+
+.urlCancel {
+  color: var(--fgColor-muted, #656d76);
+}
+
+.urlCancel:hover {
+  color: var(--fgColor-default, #1f2328);
+  background: var(--bgColor-muted, #f6f8fa);
+}
+
+.resizeHandle {
+  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;
+}
+
+.embed:hover ~ .resizeHandle,
+.resizeHandle:hover {
+  opacity: 1;
+}
+
+.zoomBar {
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  border: 1.5px solid var(--trigger-border, var(--borderColor-muted, #d0d7de));
+  background: var(--trigger-bg, var(--bgColor-muted, #f6f8fa));
+  opacity: 0;
+  transition: opacity 150ms;
+  z-index: 3;
+}
+
+.embed:hover .zoomBar {
+  opacity: 1;
+}
+
+.zoomBtn {
+  all: unset;
+  cursor: pointer;
+  width: 36px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--trigger-text, var(--fgColor-default, #1f2328));
+  transition: background 120ms;
+}
+
+.zoomBtn:first-child {
+  border-radius: 7px 0 0 7px;
+}
+
+.zoomBtn:last-child {
+  border-radius: 0 7px 7px 0;
+}
+
+.zoomBtn:hover:not(:disabled) {
+  background: var(--trigger-bg-hover, var(--bgColor-neutral-muted, #eaeef2));
+}
+
+.zoomBtn:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.zoomLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  height: 32px;
+  padding: 0 4px;
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--trigger-text, var(--fgColor-default, #1f2328));
+  border-left: 1.5px solid var(--trigger-border, var(--borderColor-muted, #d0d7de));
+  border-right: 1.5px solid var(--trigger-border, var(--borderColor-muted, #d0d7de));
+  user-select: none;
+}

package/src/canvas/widgets/StickyNote.jsx

@@ -0,0 +1,98 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { readProp, stickyNoteSchema } from './widgetProps.js'
+import styles from './StickyNote.module.css'
+
+const 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' },
+}
+
+export default function StickyNote({ props, onUpdate }) {
+  const text = readProp(props, 'text', stickyNoteSchema)
+  const color = readProp(props, 'color', stickyNoteSchema)
+  const palette = COLORS[color] ?? COLORS.yellow
+  const textareaRef = useRef(null)
+  const [editing, setEditing] = useState(false)
+
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      textareaRef.current.focus()
+      textareaRef.current.selectionStart = textareaRef.current.value.length
+    }
+  }, [editing])
+
+  const handleTextChange = useCallback((e) => {
+    onUpdate?.({ text: e.target.value })
+  }, [onUpdate])
+
+  const handleColorChange = useCallback((newColor) => {
+    onUpdate?.({ color: newColor })
+  }, [onUpdate])
+
+  return (
+    <div className={styles.container}>
+      <article
+        className={styles.sticky}
+        style={{ '--sticky-bg': palette.bg, '--sticky-border': palette.border }}
+      >
+        <p
+          className={styles.text}
+          style={editing ? { visibility: 'hidden' } : undefined}
+          onDoubleClick={() => setEditing(true)}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === 'Enter') setEditing(true) }}
+        >
+          {text || 'Double-click to edit…'}
+        </p>
+        {editing && (
+          <textarea
+            ref={textareaRef}
+            className={styles.textarea}
+            value={text}
+            onChange={handleTextChange}
+            onBlur={() => setEditing(false)}
+            onMouseDown={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') setEditing(false)
+            }}
+            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 }}
+        />
+        <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>
+    </div>
+  )
+}
+

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

@@ -0,0 +1,111 @@
+.container {
+  position: relative;
+}
+
+.sticky {
+  background: var(--sticky-bg, #fff8c5);
+  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.04);
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+  resize: both;
+  overflow: auto;
+  position: relative;
+}
+
+.text {
+  padding: 16px 20px;
+  margin: 0;
+  font-size: 18px;
+  line-height: 1.5;
+  color: color-mix(in srgb, var(--sticky-bg), black 70%);
+  white-space: pre-wrap;
+  word-break: break-word;
+  cursor: text;
+  min-height: 60px;
+}
+
+.textarea {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 16px 20px;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 18px;
+  line-height: 1.5;
+  color: color-mix(in srgb, var(--sticky-bg) 80%, rgb(0, 0, 0) 98%);
+  white-space: pre-wrap;
+  word-break: break-word;
+  resize: none;
+}
+
+/* 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;
+}
+
+.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/WidgetWrapper.jsx

@@ -0,0 +1,15 @@
+import styles from './WidgetWrapper.module.css'
+
+/**
+ * Common wrapper for all canvas widgets.
+ * Provides shadow/border styling.
+ */
+export default function WidgetWrapper({ children, className }) {
+  return (
+    <section className={`${styles.wrapper} ${className || ''}`}>
+      <div className={styles.content}>
+        {children}
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,23 @@
+.wrapper {
+  background: var(--bgColor-default, #ffffff);
+  border-radius: var(--borderRadius-large, 12px);
+  overflow: hidden;
+  min-width: 200px;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.06),
+    0 0 0 2px rgba(255, 255, 255, 0.04),
+    0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.content {
+  position: relative;
+}
+
+@media (prefers-color-scheme: dark) {
+  .wrapper {
+    box-shadow:
+      0 0 0 1px rgba(255, 255, 255, 0.08),
+      0 0 0 2px rgba(0, 0, 0, 0.3),
+      0 2px 8px rgba(0, 0, 0, 0.25);
+  }
+}

package/src/canvas/widgets/index.js

@@ -0,0 +1,23 @@
+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 }
+ */
+export const widgetRegistry = {
+  'sticky-note': StickyNote,
+  'markdown': MarkdownBlock,
+  'prototype': PrototypeEmbed,
+  'link-preview': LinkPreview,
+}
+
+/**
+ * Resolve a widget type string to its component.
+ * Returns null for unknown types.
+ */
+export function getWidgetComponent(type) {
+  return widgetRegistry[type] ?? null
+}

package/src/canvas/widgets/widgetProps.js

@@ -0,0 +1,151 @@
+/**
+ * Canvas Widget Props API
+ *
+ * Every canvas widget receives its data through a structured `props` object
+ * stored in .canvas.json. This module defines the prop schema system that
+ * widgets use to declare, read, and update their editable properties.
+ *
+ * ## Prop Categories
+ *
+ * Widget props are grouped into three categories:
+ *
+ * ### `content` — User-editable content
+ * Text, markdown, URLs — the stuff users type or paste.
+ * Updated frequently (every keystroke when editing).
+ * Examples: sticky note text, markdown content, embed URL.
+ *
+ * ### `settings` — Widget configuration
+ * One-off choices that affect appearance or behavior.
+ * Updated infrequently (user picks from a menu).
+ * Examples: sticky note color, markdown width, embed layout.
+ *
+ * ### `size` — Dimensions
+ * Width and height of the widget.
+ * Updated via resize handles or explicit input.
+ * Examples: markdown block width, prototype embed width/height.
+ *
+ * ## Storage Format (.canvas.json)
+ *
+ * Props are stored flat in the widget's `props` object:
+ *
+ * ```json
+ * {
+ *   "id": "sticky-1",
+ *   "type": "sticky-note",
+ *   "position": { "x": 100, "y": 200 },
+ *   "props": {
+ *     "text": "Hello world",
+ *     "color": "yellow"
+ *   }
+ * }
+ * ```
+ *
+ * ## Widget Contract
+ *
+ * Every widget component receives:
+ *   - `id`       — stable widget identifier
+ *   - `props`    — the flat props object (may be null/undefined)
+ *   - `onUpdate` — callback to persist prop changes: onUpdate({ key: value })
+ *   - `onRemove` — callback to delete the widget
+ *
+ * `onUpdate` accepts a partial object that is shallow-merged into `props`.
+ * Multiple keys can be updated in one call:
+ *   onUpdate({ text: 'new text', color: 'blue' })
+ *
+ * ## 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.
+ */
+
+/**
+ * @typedef {'text' | 'select' | 'number' | 'url' | 'boolean'} PropType
+ *
+ * @typedef {Object} PropDef
+ * @property {PropType} type        — input type for editing
+ * @property {string}   label       — human-readable label
+ * @property {string}   category    — 'content' | 'settings' | 'size'
+ * @property {*}        defaultValue — fallback when prop is missing
+ * @property {Array}    [options]   — choices for 'select' type
+ * @property {number}   [min]       — minimum for 'number' type
+ * @property {number}   [max]       — maximum for 'number' type
+ */
+
+/**
+ * Read a prop value with fallback to schema default.
+ * @param {object} props    — widget props object (may be null)
+ * @param {string} key      — prop name
+ * @param {object} schema   — widget schema
+ * @returns {*}
+ */
+export function readProp(props, key, schema) {
+  const value = props?.[key]
+  if (value !== undefined && value !== null) return value
+  return schema[key]?.defaultValue ?? null
+}
+
+/**
+ * Read all props with defaults applied from schema.
+ * @param {object} props  — widget props object (may be null)
+ * @param {object} schema — widget schema
+ * @returns {object}
+ */
+export function readAllProps(props, schema) {
+  const result = {}
+  for (const key of Object.keys(schema)) {
+    result[key] = readProp(props, key, schema)
+  }
+  return result
+}
+
+/**
+ * Get default props for a widget type from its schema.
+ * Used when creating new widgets.
+ * @param {object} schema — widget schema
+ * @returns {object}
+ */
+export function getDefaults(schema) {
+  const result = {}
+  for (const [key, def] of Object.entries(schema)) {
+    if (def.defaultValue !== undefined) {
+      result[key] = def.defaultValue
+    }
+  }
+  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 },
+}
+
+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.
+ */
+export const schemas = {
+  'sticky-note': stickyNoteSchema,
+  'markdown': markdownSchema,
+  'prototype': prototypeEmbedSchema,
+  'link-preview': linkPreviewSchema,
+}

package/src/hooks/useFeatureFlag.js

@@ -1,16 +1,14 @@
 import { useSyncExternalStore } from 'react'
-import { getFlag, subscribeToHash, getHashSnapshot, subscribeToStorage, getStorageSnapshot } from '@dfosco/storyboard-core'
+import { getFlag, subscribeToStorage, getStorageSnapshot } from '@dfosco/storyboard-core'
 
 /**
  * React hook for reading a feature flag value.
- * Re-renders when the flag changes (via hash or localStorage).
+ * Re-renders when the flag changes (via localStorage).
  *
  * @param {string} key - Flag key (without "flag." prefix)
  * @returns {boolean} Current resolved flag value
  */
 export function useFeatureFlag(key) {
-  // Subscribe to both hash and storage changes for reactivity
-  useSyncExternalStore(subscribeToHash, getHashSnapshot)
   useSyncExternalStore(subscribeToStorage, getStorageSnapshot)
   return getFlag(key)
 }