@dfosco/storyboard 0.5.0-alpha.0

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

@@ -0,0 +1,421 @@
+/* WidgetChrome — universal hover toolbar for canvas widgets */
+
+.chromeContainer {
+  position: relative;
+}
+
+/* Connector anchor ports — positioned at widget edge centers */
+.anchorPort {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--bgColor-accent-emphasis, #2f81f7);
+  border: 3px solid var(--bgColor-default, #fff);
+  opacity: 0;
+  transition: opacity 0.15s ease, width 0.1s ease, height 0.1s ease, margin 0.1s ease;
+  cursor: crosshair;
+  z-index: 100;
+  pointer-events: auto;
+}
+
+/* Invisible expanded hit area — 15px padding around the visible dot */
+.anchorPort::before {
+  content: '';
+  position: absolute;
+  top: -15px;
+  left: -15px;
+  right: -15px;
+  bottom: -15px;
+}
+
+.chromeContainer:hover .anchorPort {
+  opacity: 0.6;
+}
+
+.anchorPort:hover {
+  opacity: 1;
+  width: 18px;
+  height: 18px;
+}
+
+.anchorPortTop {
+  top: -6px;
+  left: 50%;
+  margin-left: -6px;
+}
+.anchorPortTop:hover {
+  margin-left: -9px;
+  top: -9px;
+}
+
+.anchorPortBottom {
+  bottom: -6px;
+  left: 50%;
+  margin-left: -6px;
+}
+.anchorPortBottom:hover {
+  margin-left: -9px;
+  bottom: -9px;
+}
+
+.anchorPortLeft {
+  left: -6px;
+  top: 50%;
+  margin-top: -6px;
+}
+.anchorPortLeft:hover {
+  margin-top: -9px;
+  left: -9px;
+}
+
+.anchorPortRight {
+  right: -6px;
+  top: 50%;
+  margin-top: -6px;
+}
+.anchorPortRight:hover {
+  margin-top: -9px;
+  right: -9px;
+}
+
+.anchorPortDisabled {
+  background: var(--fgColor-muted, #8b949e);
+  opacity: 0;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Widget slot — contains the actual widget; selection outline targets this */
+.widgetSlot {
+  position: relative;
+  border-radius: 4px;
+}
+
+/* Hide toolbar and connector anchors when a child widget is in crop mode */
+.chromeContainer:has([data-crop-active]) .toolbar,
+.chromeContainer:has([data-crop-active]) .anchorPort {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.widgetSlotSelected {
+  outline: 4px solid var(--bgColor-accent-emphasis, #2f81f7);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.widgetSlotMultiSelected {
+  outline-style: solid;
+}
+
+/* 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% + 10px);
+}
+
+/* Trigger dot — positioned in the toolbar, visible at rest */
+.triggerDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--borderColor-muted, #d0d7de);
+  opacity: 0.5;
+  transition: opacity 120ms;
+}
+
+: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: flex-start;
+  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);
+}
+
+.featureBtnActive {
+  background: var(--bgColor-accent-emphasis, #0969da);
+  border-color: var(--bgColor-accent-emphasis, #0969da);
+  color: var(--fgColor-onEmphasis, #ffffff);
+}
+
+:global([data-sb-canvas-theme^='dark']) .featureBtnActive {
+  background: var(--bgColor-accent-emphasis, #388bfd);
+  border-color: var(--bgColor-accent-emphasis, #388bfd);
+  color: var(--fgColor-onEmphasis, #ffffff);
+}
+
+.featureBtnActive:hover {
+  background: var(--bgColor-accent-emphasis, #0969da);
+  border-color: var(--bgColor-accent-emphasis, #0969da);
+  color: var(--fgColor-onEmphasis, #ffffff);
+  filter: brightness(1.1);
+}
+
+/* Select handle — right-aligned rounded rect */
+.selectHandle {
+  all: unset;
+  cursor: grab;
+  width: 16px;
+  height: 16px;
+  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;
+  margin-left: auto;
+}
+
+: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,
+:global([data-sb-canvas-theme^='dark']) .selectHandleActive {
+  background: var(--bgColor-accent-emphasis, #2f81f7);
+  border-color: var(--bgColor-accent-emphasis, #2f81f7);
+}
+
+.selectHandleActive:hover,
+:global([data-sb-canvas-theme^='dark']) .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;
+  top: calc(100% + 2px);
+  left: -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;
+  white-space: nowrap;
+}
+
+/* Invisible bridge from the trigger button to the popup so mouse
+   travel doesn't create a gap that closes the picker. */
+.colorPopup::before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 8px;
+}
+
+: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);
+}
+
+.colorPopupOpen {
+  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;
+}
+
+/* Overflow menu */
+.overflowWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.overflowMenu {
+  position: absolute;
+  top: calc(100% + 10px);
+  left: 0;
+  min-width: max-content;
+  padding: 4px;
+  background: var(--bgColor-default, #ffffff);
+  border-radius: 10px;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.08),
+    0 4px 12px rgba(0, 0, 0, 0.12);
+  z-index: 10;
+}
+
+:global([data-sb-canvas-theme^='dark']) .overflowMenu {
+  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);
+}
+
+.overflowItem {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--fgColor-default, #1f2328);
+  border-radius: 6px;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+
+:global([data-sb-canvas-theme^='dark']) .overflowItem {
+  color: var(--fgColor-default, #e6edf3);
+}
+
+.overflowItem:hover {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+}
+
+:global([data-sb-canvas-theme^='dark']) .overflowItem:hover {
+  background: var(--bgColor-neutral-muted, #272c33);
+}
+
+.overflowItemDanger:hover {
+  background: var(--bgColor-danger-muted, #ffebe9);
+  color: var(--fgColor-danger, #d1242f);
+}
+
+:global([data-sb-canvas-theme^='dark']) .overflowItemDanger:hover {
+  background: var(--bgColor-danger-muted, #490202);
+  color: var(--fgColor-danger, #f85149);
+}
+
+/* Alt hint — muted label on the right side of a menu item */
+.altHint {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--fgColor-muted, #656d76);
+  padding: 1px 6px;
+  border-radius: 4px;
+  transition: background 80ms, color 80ms;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+:global([data-sb-canvas-theme^='dark']) .altHint {
+  color: var(--fgColor-muted, #8b949e);
+}
+
+.altHintActive {
+  background: var(--bgColor-neutral-muted, #eaeef2);
+  color: var(--fgColor-default, #1f2328);
+}
+
+:global([data-sb-canvas-theme^='dark']) .altHintActive {
+  background: var(--bgColor-neutral-muted, #272c33);
+  color: var(--fgColor-default, #e6edf3);
+}

package/src/internals/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/internals/canvas/widgets/WidgetWrapper.module.css

@@ -0,0 +1,25 @@
+.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;
+  width: 100%;
+  height: 100%;
+}
+
+@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/internals/canvas/widgets/codepenUrl.js

@@ -0,0 +1,75 @@
+/**
+ * CodePen URL utilities — parse, validate, and convert CodePen URLs
+ * to their embeddable format.
+ *
+ * Supported URL formats:
+ *   https://codepen.io/{user}/pen/{penId}
+ *   https://codepen.io/{user}/full/{penId}
+ *   https://codepen.io/{user}/details/{penId}
+ *   https://codepen.io/{user}/embed/{penId}
+ */
+
+const CODEPEN_RE = /^https?:\/\/codepen\.io\/([^/]+)\/(pen|full|details|embed)\/([A-Za-z0-9]+)/
+
+/**
+ * Check if a URL is a valid CodePen pen URL.
+ */
+export function isCodePenUrl(url) {
+  if (!url) return false
+  return CODEPEN_RE.test(url)
+}
+
+/**
+ * Convert any CodePen pen URL to the embed format.
+ * Defaults to showing the result tab with a dark theme.
+ */
+export function toCodePenEmbedUrl(url) {
+  const m = url?.match(CODEPEN_RE)
+  if (!m) return ''
+  const [, user, , penId] = m
+  return `https://codepen.io/${user}/embed/${penId}?default-tab=result&editable=true`
+}
+
+/**
+ * Extract a fallback title from a CodePen URL (user/penId).
+ */
+export function getCodePenTitle(url) {
+  const m = url?.match(CODEPEN_RE)
+  if (!m) return 'CodePen'
+  return `${m[1]}/${m[3]}`
+}
+
+/**
+ * Extract the username from a CodePen URL.
+ */
+export function getCodePenUser(url) {
+  const m = url?.match(CODEPEN_RE)
+  return m?.[1] || ''
+}
+
+/** In-memory cache for oEmbed results keyed by pen URL. */
+const _oembedCache = new Map()
+
+/**
+ * Fetch pen metadata (title, author_name) via CodePen's oEmbed API.
+ * Returns `{ title, author }` or null on failure. Results are cached.
+ */
+export async function fetchCodePenMeta(url) {
+  if (!url || !isCodePenUrl(url)) return null
+  if (_oembedCache.has(url)) return _oembedCache.get(url)
+
+  try {
+    const endpoint = `https://codepen.io/api/oembed?url=${encodeURIComponent(url)}&format=json`
+    const res = await fetch(endpoint)
+    if (!res.ok) return null
+    const data = await res.json()
+    const meta = {
+      title: data.title || '',
+      author: data.author_name || '',
+    }
+    _oembedCache.set(url, meta)
+    return meta
+  } catch {
+    return null
+  }
+}

package/src/internals/canvas/widgets/codepenUrl.test.js

@@ -0,0 +1,76 @@
+/**
+ * Tests for CodePen URL utilities.
+ */
+import { describe, it, expect } from 'vitest'
+import { isCodePenUrl, toCodePenEmbedUrl, getCodePenTitle, getCodePenUser } from './codepenUrl.js'
+
+describe('isCodePenUrl', () => {
+  it('returns true for pen URLs', () => {
+    expect(isCodePenUrl('https://codepen.io/Calleb/pen/jEMXgvq')).toBe(true)
+  })
+
+  it('returns true for full view URLs', () => {
+    expect(isCodePenUrl('https://codepen.io/Calleb/full/jEMXgvq')).toBe(true)
+  })
+
+  it('returns true for details URLs', () => {
+    expect(isCodePenUrl('https://codepen.io/Calleb/details/jEMXgvq')).toBe(true)
+  })
+
+  it('returns true for embed URLs', () => {
+    expect(isCodePenUrl('https://codepen.io/Calleb/embed/jEMXgvq')).toBe(true)
+  })
+
+  it('returns false for non-CodePen URLs', () => {
+    expect(isCodePenUrl('https://example.com')).toBe(false)
+    expect(isCodePenUrl('https://figma.com/design/abc')).toBe(false)
+  })
+
+  it('returns false for CodePen homepage', () => {
+    expect(isCodePenUrl('https://codepen.io')).toBe(false)
+    expect(isCodePenUrl('https://codepen.io/Calleb')).toBe(false)
+  })
+
+  it('returns false for null/empty', () => {
+    expect(isCodePenUrl(null)).toBe(false)
+    expect(isCodePenUrl('')).toBe(false)
+  })
+})
+
+describe('toCodePenEmbedUrl', () => {
+  it('converts pen URL to embed format', () => {
+    const result = toCodePenEmbedUrl('https://codepen.io/Calleb/pen/jEMXgvq')
+    expect(result).toBe('https://codepen.io/Calleb/embed/jEMXgvq?default-tab=result&editable=true')
+  })
+
+  it('converts full URL to embed format', () => {
+    const result = toCodePenEmbedUrl('https://codepen.io/Calleb/full/jEMXgvq')
+    expect(result).toBe('https://codepen.io/Calleb/embed/jEMXgvq?default-tab=result&editable=true')
+  })
+
+  it('returns empty string for invalid URL', () => {
+    expect(toCodePenEmbedUrl('https://example.com')).toBe('')
+    expect(toCodePenEmbedUrl(null)).toBe('')
+  })
+})
+
+describe('getCodePenTitle', () => {
+  it('extracts user/penId from URL', () => {
+    expect(getCodePenTitle('https://codepen.io/Calleb/pen/jEMXgvq')).toBe('Calleb/jEMXgvq')
+  })
+
+  it('returns "CodePen" for invalid URL', () => {
+    expect(getCodePenTitle('https://example.com')).toBe('CodePen')
+    expect(getCodePenTitle(null)).toBe('CodePen')
+  })
+})
+
+describe('getCodePenUser', () => {
+  it('extracts username', () => {
+    expect(getCodePenUser('https://codepen.io/Calleb/pen/jEMXgvq')).toBe('Calleb')
+  })
+
+  it('returns empty for invalid URL', () => {
+    expect(getCodePenUser('https://example.com')).toBe('')
+  })
+})