@dfosco/storyboard 0.5.0-alpha.0

package/src/internals/CommandPalette/CreateDialog.jsx

@@ -0,0 +1,219 @@
+/**
+ * CreateDialog — centered modal for creating storyboard artifacts.
+ * Triggered from the command palette's Create actions.
+ */
+import { useState, useEffect } from 'react'
+
+const TYPE_LABELS = {
+  Canvas: 'Canvas',
+  Prototype: 'Prototype',
+  Component: 'Component',
+  Flow: 'Prototype Flow',
+  Page: 'Prototype Page',
+}
+
+export default function CreateDialog({ type, basePath, onClose }) {
+  const [name, setName] = useState('')
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [url, setUrl] = useState('')
+  const [isExternal, setIsExternal] = useState(false)
+  const [prototype, setPrototype] = useState('')
+  const [prototypes, setPrototypes] = useState([])
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  const needsPrototype = type === 'Flow' || type === 'Page'
+
+  // Reset form when type changes
+  useEffect(() => {
+    setName('')
+    setTitle('')
+    setDescription('')
+    setUrl('')
+    setIsExternal(false)
+    setPrototype('')
+    setError('')
+    setSubmitting(false)
+  }, [type])
+
+  // Fetch prototypes list when needed
+  useEffect(() => {
+    if (!needsPrototype || !type) return
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    fetch(`${apiBase}/_storyboard/workshop/flows`)
+      .then(r => r.ok ? r.json() : null)
+      .then(data => { if (data?.prototypes) setPrototypes(data.prototypes) })
+      .catch(() => {})
+  }, [needsPrototype, type, basePath])
+
+  if (!type) return null
+
+  function withBase(base, route) {
+    const b = (base || '/').replace(/\/+$/, '')
+    return b === '/' ? route : `${b}${route}`
+  }
+
+  async function handleSubmit(e) {
+    e.preventDefault()
+    if (!name.trim()) { setError('Name is required'); return }
+    if (needsPrototype && !prototype) { setError('Select a prototype'); return }
+    setError('')
+    setSubmitting(true)
+
+    const apiBase = (basePath || '/').replace(/\/+$/, '')
+    let endpoint, body
+    if (type === 'Canvas') {
+      endpoint = `${apiBase}/_storyboard/canvas/create`
+      body = { name: name.trim(), title: title.trim(), description: description.trim(), grid: true, gridSize: 24 }
+    } else if (type === 'Prototype') {
+      endpoint = `${apiBase}/_storyboard/workshop/prototypes`
+      body = { name: name.trim(), title: title.trim(), description: description.trim() }
+      if (isExternal) { body.external = true; body.url = url.trim() }
+    } else if (type === 'Flow') {
+      endpoint = `${apiBase}/_storyboard/workshop/flows`
+      body = { name: name.trim(), title: title.trim(), prototype, description: description.trim() }
+    } else if (type === 'Page') {
+      endpoint = `${apiBase}/_storyboard/workshop/pages`
+      body = { name: name.trim(), prototype }
+    } else {
+      endpoint = `${apiBase}/_storyboard/canvas/create-story`
+      body = { name: name.trim(), location: 'src/components' }
+    }
+
+    try {
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      if (!res.ok) {
+        const text = await res.text()
+        throw new Error(text || `Request failed (${res.status})`)
+      }
+      const data = await res.json().catch(() => ({}))
+      const route = data.route || data.path || `/${name.trim()}`
+      window.location.href = withBase(basePath, route)
+    } catch (err) {
+      setError(err.message)
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div style={overlayStyle} onClick={onClose}>
+      <div style={dialogStyle} onClick={e => e.stopPropagation()}>
+        <div style={headerStyle}>
+          <span style={titleStyle}>New {TYPE_LABELS[type] || type}</span>
+          <button style={closeBtnStyle} onClick={onClose}>✕</button>
+        </div>
+
+        <form onSubmit={handleSubmit} style={formStyle}>
+          {needsPrototype && (
+            <label style={fieldStyle}>
+              <span style={labelStyle}>Prototype *</span>
+              <select style={inputStyle} value={prototype} onChange={e => setPrototype(e.target.value)}>
+                <option value="">Select a prototype…</option>
+                {prototypes.map(p => <option key={p.name} value={p.name}>{p.name}</option>)}
+              </select>
+            </label>
+          )}
+
+          <label style={fieldStyle}>
+            <span style={labelStyle}>Name *</span>
+            <input style={inputStyle} value={name} onChange={e => setName(e.target.value)}
+              placeholder={type === 'Page' ? 'my-page' : `my-${type.toLowerCase()}`} autoFocus />
+          </label>
+
+          {type !== 'Page' && (
+            <label style={fieldStyle}>
+              <span style={labelStyle}>Title</span>
+              <input style={inputStyle} value={title} onChange={e => setTitle(e.target.value)}
+                placeholder="Display title (optional)" />
+            </label>
+          )}
+
+          {(type === 'Canvas' || type === 'Prototype') && (
+            <label style={fieldStyle}>
+              <span style={labelStyle}>Description</span>
+              <input style={inputStyle} value={description} onChange={e => setDescription(e.target.value)}
+                placeholder="Short description (optional)" />
+            </label>
+          )}
+
+          {type === 'Prototype' && (
+            <label style={checkboxFieldStyle}>
+              <input type="checkbox" checked={isExternal} onChange={e => setIsExternal(e.target.checked)} />
+              <span>External prototype</span>
+            </label>
+          )}
+
+          {isExternal && (
+            <label style={fieldStyle}>
+              <span style={labelStyle}>URL *</span>
+              <input style={inputStyle} value={url} onChange={e => setUrl(e.target.value)}
+                placeholder="https://example.com" />
+            </label>
+          )}
+
+          {error && <div style={errorStyle}>{error}</div>}
+
+          <button type="submit" disabled={submitting} style={submitStyle}>
+            {submitting ? 'Creating…' : `Create ${TYPE_LABELS[type] || type}`}
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+const overlayStyle = {
+  position: 'fixed', inset: 0, zIndex: 10001,
+  background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(2px)',
+  display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
+  paddingTop: '15vh',
+}
+
+const dialogStyle = {
+  background: '#fff', borderRadius: 12, width: '100%', maxWidth: 420,
+  boxShadow: '0 16px 48px rgba(0,0,0,0.15)', overflow: 'hidden',
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+}
+
+const headerStyle = {
+  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+  padding: '16px 20px 12px', borderBottom: '1px solid #e5e5e5',
+}
+
+const titleStyle = { fontSize: 16, fontWeight: 600, color: '#1a1a1a' }
+
+const closeBtnStyle = {
+  background: 'none', border: 'none', cursor: 'pointer',
+  fontSize: 16, color: '#999', padding: 4,
+}
+
+const formStyle = { padding: '16px 20px 20px', display: 'flex', flexDirection: 'column', gap: 12 }
+
+const fieldStyle = { display: 'flex', flexDirection: 'column', gap: 4 }
+
+const labelStyle = { fontSize: 13, fontWeight: 500, color: '#555' }
+
+const inputStyle = {
+  padding: '8px 10px', border: '1px solid #ddd', borderRadius: 6,
+  fontSize: 14, outline: 'none', fontFamily: 'inherit',
+}
+
+const checkboxFieldStyle = {
+  display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: '#555',
+}
+
+const errorStyle = {
+  fontSize: 13, color: '#ef4444', background: '#fef2f2',
+  padding: '6px 10px', borderRadius: 6,
+}
+
+const submitStyle = {
+  padding: '10px 16px', background: '#1a1a1a', color: '#fff',
+  border: 'none', borderRadius: 8, fontSize: 14, fontWeight: 500,
+  cursor: 'pointer', fontFamily: 'inherit', marginTop: 4,
+}

package/src/internals/CommandPalette/command-palette.css

@@ -0,0 +1,180 @@
+/*
+ * Styles for cmdk command palette.
+ * cmdk is headless — all visual styling is provided here.
+ * Uses [cmdk-*] attribute selectors and data-color-mode for theming.
+ */
+
+/* ─── Overlay ─── */
+[cmdk-overlay] {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 10000;
+  animation: cmdk-overlay-in 120ms ease-out;
+}
+
+/* ─── Dialog content (Radix Content wrapper) ─── */
+[cmdk-dialog] {
+  position: fixed;
+  top: 20%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: calc(100% - 2rem);
+  max-width: 560px;
+  z-index: 10001;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  background: var(--bgColor-default, #ffffff);
+  color: var(--fgColor-default, #1f2328);
+  border: 1px solid var(--borderColor-muted, #d1d9e0);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  outline: none;
+  animation: cmdk-dialog-in 120ms ease-out;
+}
+
+@keyframes cmdk-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes cmdk-dialog-in {
+  from { opacity: 0; transform: translateX(-50%) scale(0.97); }
+  to   { opacity: 1; transform: translateX(-50%) scale(1); }
+}
+
+/* ─── Input ─── */
+[cmdk-input] {
+  width: 100%;
+  padding: 14px 16px;
+  font-size: 15px;
+  border: none;
+  border-bottom: 1px solid var(--borderColor-muted, #d1d9e0);
+  outline: none;
+  background: transparent;
+  color: var(--fgColor-default, #1f2328);
+  font-family: inherit;
+}
+
+[cmdk-input]::placeholder {
+  color: var(--fgColor-muted, #656d76);
+}
+
+/* ─── List ─── */
+[cmdk-list] {
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+/* ─── Group ─── */
+[cmdk-group-heading] {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--fgColor-muted, #656d76);
+  padding: 8px 8px 4px;
+  user-select: none;
+}
+
+/* ─── Item ─── */
+[cmdk-item] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  /* font-weight: 500; */
+  cursor: pointer;
+  user-select: none;
+  color: var(--fgColor-default, #1f2328);
+  transition: background 0.1s;
+}
+
+[cmdk-item][data-selected="true"] {
+  background: var(--bgColor-neutral-muted, rgba(175, 184, 193, 0.2));
+}
+
+[cmdk-item]:active {
+  background: var(--bgColor-neutral-muted, rgba(175, 184, 193, 0.3));
+}
+
+/* ─── Separator ─── */
+[cmdk-separator] {
+  height: 1px;
+  margin: 4px 14px;
+  background: var(--borderColor-muted, #d1d9e0);
+}
+
+/* ─── Empty state ─── */
+[cmdk-empty] {
+  padding: 2rem;
+  text-align: center;
+  color: var(--fgColor-muted, #656d76);
+  font-size: 14px;
+}
+
+/* ─── Dark mode ─── */
+html[data-color-mode="dark"] [cmdk-dialog],
+body[data-color-mode="dark"] [cmdk-dialog] {
+  background: #2d333b;
+  color: #e6edf3;
+  border-color: #444c56;
+}
+
+html[data-color-mode="dark"] [cmdk-input],
+body[data-color-mode="dark"] [cmdk-input] {
+  color: #e6edf3;
+  border-bottom-color: #444c56;
+}
+
+html[data-color-mode="dark"] [cmdk-input]::placeholder,
+body[data-color-mode="dark"] [cmdk-input]::placeholder {
+  color: #636e7b;
+}
+
+html[data-color-mode="dark"] [cmdk-group-heading],
+body[data-color-mode="dark"] [cmdk-group-heading] {
+  color: #768390;
+}
+
+html[data-color-mode="dark"] [cmdk-item],
+body[data-color-mode="dark"] [cmdk-item] {
+  color: #e6edf3;
+}
+
+html[data-color-mode="dark"] [cmdk-item][data-selected="true"],
+body[data-color-mode="dark"] [cmdk-item][data-selected="true"] {
+  background: rgba(99, 110, 123, 0.4);
+}
+
+html[data-color-mode="dark"] [cmdk-separator],
+body[data-color-mode="dark"] [cmdk-separator] {
+  background: #444c56;
+}
+
+html[data-color-mode="dark"] [cmdk-empty],
+body[data-color-mode="dark"] [cmdk-empty] {
+  color: #768390;
+}
+
+html[data-color-mode="dark"] [cmdk-overlay],
+body[data-color-mode="dark"] [cmdk-overlay] {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+/* ─── Mobile responsiveness ─── */
+@media (max-width: 640px) {
+  [cmdk-dialog] {
+    max-width: 100%;
+    border-radius: 0;
+    top: 0;
+    width: 100%;
+  }
+
+  [cmdk-list] {
+    max-height: 70vh;
+  }
+}

package/src/internals/FlowError.module.css

@@ -0,0 +1,30 @@
+.container {
+  padding: 80px 24px 24px 24px;
+  max-width: 700px;
+  margin: 0 auto;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+}
+
+.banner {
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-danger-emphasis, #da3633);
+  background-color: var(--bgColor-danger-muted, rgba(248, 81, 73, 0.1));
+  color: var(--fgColor-danger, #f85149);
+}
+
+.banner strong {
+  display: block;
+  margin-bottom: 4px;
+}
+
+.meta {
+  color: var(--fgColor-muted, #9198a1);
+}
+
+.meta a,
+.homeLink {
+  color: var(--fgColor-accent, #4493f8);
+}