@dfosco/storyboard 0.5.0-alpha.0

package/src/internals/canvas/widgets/ComponentSetWidget.module.css

@@ -0,0 +1,89 @@
+/* ComponentSetWidget — canvas widget chrome */
+
+.container {
+  position: relative;
+  overflow: hidden;
+  min-width: 200px;
+  min-height: 120px;
+  background: var(--bgColor-default, #ffffff);
+  border: 3px solid var(--borderColor-default, #d0d7de);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  width: 100%;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+.headerIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.headerTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.headerSelected {
+  color: var(--fgColor-accent, #0969da);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.headerLayout {
+  margin-left: auto;
+  font-size: 14px;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+
+.content {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 37px);
+}
+
+.iframe {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: none;
+  z-index: 1;
+}
+
+.error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  color: var(--fgColor-danger, #cf222e);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.errorIcon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.errorText {
+  word-break: break-word;
+}

package/src/internals/canvas/widgets/ComponentWidget.jsx

@@ -0,0 +1,14 @@
+// Deprecated stub — ComponentWidget was removed in 4.2.5.
+// This file exists only to prevent crashes in CanvasPage's jsx- code path,
+// which still references ComponentWidget for legacy canvas companion files.
+// The jsx- system is dormant (no canvases define a `jsx` field).
+import WidgetWrapper from './WidgetWrapper.jsx'
+
+export default function ComponentWidget({ component: Component, exportName }) {
+  if (!Component) return null
+  return (
+    <WidgetWrapper>
+      <Component />
+    </WidgetWrapper>
+  )
+}

package/src/internals/canvas/widgets/CropOverlay.jsx

@@ -0,0 +1,179 @@
+/**
+ * CropOverlay — interactive crop selection over an image.
+ *
+ * Renders:
+ * - A crop region with drag handles (corners + edges)
+ * - Dark overlay on excluded area (via box-shadow)
+ * - Rule-of-thirds grid
+ *
+ * The confirmation bar (CropBar) is rendered separately by ImageWidget,
+ * outside the WidgetWrapper, to avoid overflow clipping.
+ *
+ * Props:
+ *   containerWidth / containerHeight — pixel dimensions of the image container
+ *   cropRect — current crop rectangle { x, y, width, height } in display pixels
+ *   onCropRectChange(rect) — called when the user drags the crop region
+ *   onCancel() — exit crop mode without saving
+ */
+import { useRef, useCallback, useEffect } from 'react'
+import styles from './CropOverlay.module.css'
+
+const MIN_CROP = 20
+
+function clamp(v, min, max) { return Math.min(Math.max(v, min), max) }
+
+const HANDLES = ['NW', 'NE', 'SW', 'SE', 'N', 'S', 'W', 'E']
+
+/* SVG micro-icons */
+function CheckIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z" />
+    </svg>
+  )
+}
+
+function UndoIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M1.22 6.28a.749.749 0 0 1 0-1.06l3.5-3.5a.749.749 0 1 1 1.06 1.06L3.56 5h7.19a5.25 5.25 0 0 1 0 10.5H9.25a.75.75 0 0 1 0-1.5h1.5a3.75 3.75 0 0 0 0-7.5H3.56l2.22 2.22a.749.749 0 1 1-1.06 1.06Z" />
+    </svg>
+  )
+}
+
+function XIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z" />
+    </svg>
+  )
+}
+
+export default function CropOverlay({
+  containerWidth,
+  containerHeight,
+  cropRect,
+  onCropRectChange,
+  onCancel,
+}) {
+  const cw = containerWidth || 400
+  const ch = containerHeight || 300
+
+  const dragging = useRef(null)
+
+  // Escape key cancels crop
+  useEffect(() => {
+    const handleKey = (e) => { if (e.key === 'Escape') onCancel?.() }
+    window.addEventListener('keydown', handleKey)
+    return () => window.removeEventListener('keydown', handleKey)
+  }, [onCancel])
+
+  const startDrag = useCallback((handleId, e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    dragging.current = {
+      handle: handleId,
+      startX: e.clientX,
+      startY: e.clientY,
+      startCrop: { ...cropRect },
+    }
+
+    const onMove = (me) => {
+      if (!dragging.current) return
+      const { handle, startX, startY, startCrop } = dragging.current
+      const dx = me.clientX - startX
+      const dy = me.clientY - startY
+
+      let { x, y, width, height } = startCrop
+
+      if (handle === 'move') {
+        x = clamp(startCrop.x + dx, 0, cw - width)
+        y = clamp(startCrop.y + dy, 0, ch - height)
+      } else {
+        if (handle.includes('W') || handle === 'W') {
+          const newX = clamp(startCrop.x + dx, 0, startCrop.x + startCrop.width - MIN_CROP)
+          width = startCrop.width - (newX - startCrop.x)
+          x = newX
+        }
+        if (handle.includes('E') || handle === 'E') {
+          width = clamp(startCrop.width + dx, MIN_CROP, cw - startCrop.x)
+        }
+        if (handle.includes('N') || handle === 'N') {
+          const newY = clamp(startCrop.y + dy, 0, startCrop.y + startCrop.height - MIN_CROP)
+          height = startCrop.height - (newY - startCrop.y)
+          y = newY
+        }
+        if (handle.includes('S') || handle === 'S') {
+          height = clamp(startCrop.height + dy, MIN_CROP, ch - startCrop.y)
+        }
+      }
+
+      onCropRectChange({ x, y, width, height })
+    }
+
+    const onUp = () => {
+      dragging.current = null
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+    }
+
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }, [cropRect, cw, ch, onCropRectChange])
+
+  return (
+    <div
+      className={styles.overlay}
+      onPointerDown={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <div
+        className={styles.cropRegion}
+        style={{
+          left: cropRect.x,
+          top: cropRect.y,
+          width: cropRect.width,
+          height: cropRect.height,
+        }}
+        onPointerDown={(e) => startDrag('move', e)}
+      >
+        {HANDLES.map((h) => (
+          <div
+            key={h}
+            className={`${styles.handle} ${styles[`handle${h}`]}`}
+            onPointerDown={(e) => startDrag(h, e)}
+          />
+        ))}
+      </div>
+
+    </div>
+  )
+}
+
+/**
+ * CropBar — crop confirmation toolbar rendered outside the image widget.
+ * Positioned by the parent (ImageWidget) in place of the WidgetChrome toolbar.
+ */
+export function CropBar({ cropW, cropH, onSave, onUndo, onCancel, canUndo }) {
+  return (
+    <div
+      className={styles.cropBar}
+      onPointerDown={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <span className={styles.dimensions}>{cropW} × {cropH}</span>
+      <span className={styles.separator} />
+      <button className={`${styles.cropBarBtn} ${styles.cropBarBtnSave}`} onClick={onSave}>
+        <CheckIcon /> Save
+      </button>
+      {canUndo && (
+        <button className={styles.cropBarBtn} onClick={onUndo}>
+          <UndoIcon /> Undo
+        </button>
+      )}
+      <button className={`${styles.cropBarBtn} ${styles.cropBarBtnCancel}`} onClick={onCancel}>
+        <XIcon />
+      </button>
+    </div>
+  )
+}

package/src/internals/canvas/widgets/CropOverlay.module.css

@@ -0,0 +1,154 @@
+/* ── Crop overlay ─────────────────────────────────────────── */
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  cursor: default;
+}
+
+.cropRegion {
+  position: absolute;
+  border: 2px solid #ffffff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 0 0 9999px rgba(0, 0, 0, 0.5);
+  cursor: move;
+  z-index: 11;
+}
+
+/* Rule-of-thirds grid */
+.cropRegion::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(to right, rgba(255,255,255,0.3) 1px, transparent 1px) 33.33% 0 / 33.34% 100%,
+    linear-gradient(to bottom, rgba(255,255,255,0.3) 1px, transparent 1px) 0 33.33% / 100% 33.34%;
+  pointer-events: none;
+}
+
+/* ── Drag handles ─────────────────────────────────────────── */
+
+.handle {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #ffffff;
+  border: 2px solid var(--fgColor-accent, #0969da);
+  border-radius: 2px;
+  z-index: 12;
+}
+
+.handleNW { top: -6px; left: -6px; cursor: nw-resize; }
+.handleNE { top: -6px; right: -6px; cursor: ne-resize; }
+.handleSW { bottom: -6px; left: -6px; cursor: sw-resize; }
+.handleSE { bottom: -6px; right: -6px; cursor: se-resize; }
+.handleN  { top: -6px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
+.handleS  { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
+.handleW  { left: -6px; top: 50%; transform: translateY(-50%); cursor: w-resize; }
+.handleE  { right: -6px; top: 50%; transform: translateY(-50%); cursor: e-resize; }
+
+/* ── Crop confirmation bar (rendered outside widget by ImageWidget) ── */
+
+.cropBar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 4px 8px;
+  background: var(--bgColor-default, #ffffff);
+  border: 1.6px solid var(--borderColor-muted, #d0d7de);
+  border-radius: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  white-space: nowrap;
+  pointer-events: auto;
+}
+
+:global([data-sb-canvas-theme^='dark']) .cropBar {
+  background: var(--bgColor-muted, #161b22);
+  border-color: var(--borderColor-muted, #373e47);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.cropBarBtn {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fgColor-default, #1f2328);
+  transition: background 100ms;
+}
+
+:global([data-sb-canvas-theme^='dark']) .cropBarBtn {
+  color: var(--fgColor-default, #e6edf3);
+}
+
+.cropBarBtn:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+}
+
+:global([data-sb-canvas-theme^='dark']) .cropBarBtn:hover {
+  background: var(--bgColor-neutral-muted, #272c33);
+}
+
+.cropBarBtnSave {
+  background: var(--bgColor-success-emphasis, #1a7f37);
+  color: var(--fgColor-onEmphasis, #ffffff);
+}
+
+.cropBarBtnSave:hover {
+  background: var(--bgColor-success-emphasis, #2da44e);
+  filter: brightness(1.1);
+}
+
+:global([data-sb-canvas-theme^='dark']) .cropBarBtnSave {
+  background: var(--bgColor-success-emphasis, #238636);
+  color: var(--fgColor-onEmphasis, #ffffff);
+}
+
+:global([data-sb-canvas-theme^='dark']) .cropBarBtnSave:hover {
+  background: var(--bgColor-success-emphasis, #2ea043);
+  filter: brightness(1.1);
+}
+
+.cropBarBtnCancel {
+  color: var(--fgColor-muted, #656d76);
+}
+
+:global([data-sb-canvas-theme^='dark']) .cropBarBtnCancel {
+  color: var(--fgColor-muted, #8b949e);
+}
+
+.cropBarBtnCancel:hover {
+  color: var(--fgColor-default, #1f2328);
+}
+
+:global([data-sb-canvas-theme^='dark']) .cropBarBtnCancel:hover {
+  color: var(--fgColor-default, #e6edf3);
+}
+
+.dimensions {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  padding: 0 4px;
+  font-variant-numeric: tabular-nums;
+}
+
+:global([data-sb-canvas-theme^='dark']) .dimensions {
+  color: var(--fgColor-muted, #8b949e);
+}
+
+.separator {
+  width: 1px;
+  height: 16px;
+  background: var(--borderColor-muted, #d0d7de);
+}
+
+:global([data-sb-canvas-theme^='dark']) .separator {
+  background: var(--borderColor-muted, #373e47);
+}