@dfosco/storyboard-react 4.1.0 → 4.2.0-alpha.11

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "4.1.0",
+  "version": "4.2.0-alpha.11",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.0",
-    "@dfosco/storyboard-core": "4.1.0",
-    "@dfosco/tiny-canvas": "4.1.0",
+    "@dfosco/storyboard-core": "4.2.0-alpha.11",
+    "@dfosco/tiny-canvas": "4.2.0-alpha.11",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.1",
     "react-cmdk": "^1.3.9",
-    "remark-html": "^16.0.1"
+    "remark-html": "^16.0.1",
+    "ghostty-web": "^0.4.0"
   },
   "license": "MIT",
   "repository": {

package/src/CommandPalette/CommandPalette.jsx

@@ -20,6 +20,7 @@ import {
   getTheme,
   isExcludedByRoute,
 } from '@dfosco/storyboard-core'
+import { widgetTypes } from '../canvas/widgets/widgetConfig.js'
 import CreateDialog from './CreateDialog.jsx'
 import BranchBar from '../BranchBar/BranchBar.jsx'
 import AuthModal from '../AuthModal/AuthModal.jsx'
@@ -287,15 +288,78 @@ function buildDynamicSection(section, prefix, onNavigateToPage, onCreateAction)
     const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
     if (!isLocalDev) return null
     const createItems = [
-      { id: 'create:canvas', children: 'New Canvas', keywords: ['create', 'canvas', 'new', 'board'], showType: false, onClick: () => onCreateAction?.('Canvas') },
-      { id: 'create:prototype', children: 'New Prototype', keywords: ['create', 'prototype', 'new', 'page'], showType: false, onClick: () => onCreateAction?.('Prototype') },
-      { id: 'create:component', children: 'New Component', keywords: ['create', 'component', 'new', 'story'], showType: false, onClick: () => onCreateAction?.('Component') },
-      { id: 'create:flow', children: 'New Prototype Flow', keywords: ['create', 'flow', 'new', 'data'], showType: false, onClick: () => onCreateAction?.('Flow') },
-      { id: 'create:page', children: 'New Prototype Page', keywords: ['create', 'page', 'new'], showType: false, onClick: () => onCreateAction?.('Page') },
+      { id: 'create:canvas', children: 'Canvas', keywords: ['create', 'canvas', 'new', 'board'], showType: false, onClick: () => onCreateAction?.('Canvas') },
+      { id: 'create:prototype', children: 'Prototype', keywords: ['create', 'prototype', 'new', 'page'], showType: false, onClick: () => onCreateAction?.('Prototype') },
+      { id: 'create:component', children: 'Component', keywords: ['create', 'component', 'new', 'story'], showType: false, onClick: () => onCreateAction?.('Component') },
+      { id: 'create:flow', children: 'Prototype Flow', keywords: ['create', 'flow', 'new', 'data'], showType: false, onClick: () => onCreateAction?.('Flow') },
+      { id: 'create:page', children: 'Prototype Page', keywords: ['create', 'page', 'new'], showType: false, onClick: () => onCreateAction?.('Page') },
     ]
     return { group: { heading: section.title, id: `cfg:${section.id}`, items: createItems } }
   }
 
+  // --- Create widget source (all canvas widget types) ---
+  if (section.source === 'create-widget') {
+    const isLocalDev = typeof window !== 'undefined' && window.__SB_LOCAL_DEV__ === true
+    if (!isLocalDev) return null
+    const isCanvasRoute = typeof window !== 'undefined' && window.location.pathname.includes('/canvas/')
+    if (!isCanvasRoute) return null
+    const items = Object.entries(widgetTypes).map(([type, def]) => ({
+      id: `create-widget:${type}`,
+      children: def.label,
+      keywords: ['add', 'widget', 'create', type, def.label.toLowerCase()],
+      showType: false,
+      onClick: () => {
+        document.dispatchEvent(new CustomEvent('storyboard:canvas:add-widget', { detail: { type } }))
+      },
+    }))
+    return { group: { heading: section.title, id: `cfg:${section.id}`, items } }
+  }
+
+  // --- Starred source (reads from viewfinder localStorage) ---
+  if (section.source === 'starred') {
+    const STARRED_KEY = 'sb-viewfinder-starred'
+    let starredIds = []
+    try { starredIds = JSON.parse(localStorage.getItem(STARRED_KEY)) || [] } catch {}
+    if (starredIds.length === 0) return null
+
+    const index = buildPrototypeIndex()
+    // Build a lookup map of all artifacts
+    const artifactMap = new Map()
+    const allProtos = [...index.prototypes]
+    for (const folder of index.folders) {
+      allProtos.push(...folder.prototypes)
+      if (folder.canvases) folder.canvases.forEach(c => artifactMap.set(`canvas:${c.dirName}`, { ...c, _type: 'canvas' }))
+    }
+    for (const c of index.canvases) artifactMap.set(`canvas:${c.dirName}`, { ...c, _type: 'canvas' })
+    for (const p of allProtos) artifactMap.set(`proto:${p.dirName}`, { ...p, _type: 'prototype' })
+
+    const items = []
+    for (const id of starredIds) {
+      const artifact = artifactMap.get(id)
+      if (!artifact) continue
+      const route = artifact._type === 'canvas'
+        ? `${prefix}/canvas/${artifact.dirName}`
+        : artifact.isExternal
+          ? artifact.externalUrl
+          : `${prefix}/${artifact.dirName}`
+      items.push({
+        id: `starred:${id}`,
+        children: artifact.name,
+        keywords: ['starred', 'star', artifact.name.toLowerCase()],
+        showType: false,
+        onClick: () => {
+          if (artifact.isExternal) {
+            window.open(route, '_blank')
+          } else {
+            window.location.href = route
+          }
+        },
+      })
+    }
+    if (items.length === 0) return null
+    return { group: { heading: section.title, id: `cfg:${section.id}`, items } }
+  }
+
   // --- Commands source (all registered toolbar actions) ---
   if (section.source === 'commands') {
     const mode = getCurrentMode() || 'default'

package/src/CommandPalette/command-palette.css

@@ -109,3 +109,8 @@ html[data-color-mode="dark"] .command-palette .border-b {
 .command-palette .command-palette-list-item .text-gray-500.text-sm {
   display: none !important;
 }
+
+/* Medium weight for item text */
+.command-palette .command-palette-list-item {
+  font-weight: 500 !important;
+}

package/src/canvas/CanvasPage.jsx

@@ -6,7 +6,7 @@ import { shouldPreventCanvasTextSelection } from './textSelection.js'
 import { getCanvasThemeVars, getCanvasPrimerAttrs } from './canvasTheme.js'
 import { getWidgetComponent } from './widgets/index.js'
 import { schemas, getDefaults } from './widgets/widgetProps.js'
-import { getFeatures, isResizable } from './widgets/widgetConfig.js'
+import { getFeatures, isResizable, getAnchorState, canAcceptConnection } from './widgets/widgetConfig.js'
 import { createPasteContext, resolvePaste } from './widgets/pasteRules.js'
 import { getPasteRules } from '@dfosco/storyboard-core'
 import { registerSmoothCorners } from '@dfosco/storyboard-core/smooth-corners'
@@ -23,12 +23,16 @@ import {
   getCanvas as getCanvasApi,
   removeWidget as removeWidgetApi,
   updateCanvas,
+  updateFolderMeta,
   uploadImage,
+  addConnector as addConnectorApi,
+  removeConnector as removeConnectorApi,
 } from './canvasApi.js'
 import PageSelector from './PageSelector.jsx'
 import Icon from '../Icon.jsx'
 import { stories as storyIndex } from 'virtual:storyboard-data-index'
 import styles from './CanvasPage.module.css'
+import ConnectorLayer from './ConnectorLayer.jsx'
 
 const ZOOM_MIN = 25
 const ZOOM_MAX = 200
@@ -306,6 +310,7 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
   onCopy,
   onRefreshGitHub,
   canRefreshGitHub,
+  onConnectorDragStart,
   readOnly,
 }) {
   const widgetRef = useRef(null)
@@ -317,7 +322,7 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
     return rawFeatures.map((f) => {
       // Toggle collapse label and hide when content is short (no github = no collapse)
       if (f.action === 'toggle-collapse') {
-        if (!isGitHub) return null
+        if (widget.type === 'link-preview' && !isGitHub) return null
         return {
           ...f,
           label: widget.props?.collapsed ? 'Expand height' : 'Collapse height',
@@ -376,6 +381,7 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
       onDeselect={onDeselect}
       onAction={handleAction}
       onUpdate={onUpdate ? handleWidgetFieldUpdate : undefined}
+      onConnectorDragStart={onConnectorDragStart}
       readOnly={readOnly}
     >
       <WidgetRenderer
@@ -397,10 +403,101 @@ const ChromeWrappedWidget = memo(function ChromeWrappedWidget({
     prev.onDeselect === next.onDeselect &&
     prev.onUpdate === next.onUpdate &&
     prev.onRemove === next.onRemove &&
-    prev.onCopy === next.onCopy
+    prev.onCopy === next.onCopy &&
+    prev.onConnectorDragStart === next.onConnectorDragStart
   )
 })
 
+/**
+ * Editable canvas/folder title — always visible, double-click to edit in dev mode.
+ */
+function CanvasTitleEditable({ canvasId, canvasMeta, canvas, isLocalDev }) {
+  const [editing, setEditing] = useState(false)
+  const [titleValue, setTitleValue] = useState('')
+  const inputRef = useRef(null)
+  const displayTitle = canvasMeta?.title || canvas?.title || canvasId.split('/').pop()
+
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [editing])
+
+  const handleCommit = useCallback(async () => {
+    const trimmed = titleValue.trim()
+    setEditing(false)
+    if (!trimmed || trimmed === displayTitle) return
+    try {
+      if (canvasId.includes('/')) {
+        const folder = canvasId.split('/')[0]
+        const result = await updateFolderMeta(folder, trimmed)
+        if (result?.renamed && result?.folder) {
+          // Folder was renamed on disk — navigate to new route
+          const pageName = canvasId.split('/').slice(1).join('/')
+          const newCanvasId = `${result.folder}/${pageName}`
+          const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+          const targetUrl = `${base}/canvas/${newCanvasId}`
+          if (import.meta.hot) {
+            const timer = setTimeout(() => { window.location.href = targetUrl }, 3000)
+            import.meta.hot.on('vite:beforeFullReload', () => {
+              clearTimeout(timer)
+              sessionStorage.setItem('sb-pending-navigate', targetUrl)
+            })
+          } else {
+            setTimeout(() => { window.location.href = targetUrl }, 1000)
+          }
+          return
+        }
+      } else {
+        await updateCanvas(canvasId, { settings: { title: trimmed } })
+      }
+      // Reload to pick up the updated metadata from the data plugin
+      if (import.meta.hot) {
+        const timer = setTimeout(() => { window.location.reload() }, 2000)
+        import.meta.hot.on('vite:beforeFullReload', () => clearTimeout(timer))
+      } else {
+        setTimeout(() => { window.location.reload() }, 1000)
+      }
+    } catch (err) {
+      console.error('Failed to update title:', err)
+    }
+  }, [titleValue, displayTitle, canvasId])
+
+  const handleDblClick = useCallback(() => {
+    if (!isLocalDev) return
+    setTitleValue(displayTitle)
+    setEditing(true)
+  }, [isLocalDev, displayTitle])
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        className={styles.canvasTitleEditing}
+        type="text"
+        value={titleValue}
+        onChange={(e) => setTitleValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') { e.preventDefault(); handleCommit() }
+          if (e.key === 'Escape') { e.preventDefault(); setEditing(false) }
+        }}
+        onBlur={handleCommit}
+      />
+    )
+  }
+
+  return (
+    <h1
+      className={styles.canvasTitleStatic}
+      onDoubleClick={handleDblClick}
+      style={isLocalDev ? { cursor: 'default' } : undefined}
+    >
+      {displayTitle}
+    </h1>
+  )
+}
+
 /**
  * Generic canvas page component.
  * Reads canvas data from the index and renders all widgets on a draggable surface.
@@ -414,6 +511,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
 
   // Local mutable copy of widgets for instant UI updates
   const [localWidgets, setLocalWidgets] = useState(canvas?.widgets ?? null)
+  const [localConnectors, setLocalConnectors] = useState(canvas?.connectors ?? [])
   const [trackedCanvas, setTrackedCanvas] = useState(canvas)
   const [selectedWidgetIds, setSelectedWidgetIds] = useState(() => new Set())
   const initialViewport = loadViewportState(canvasId)
@@ -468,10 +566,10 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
 
   // Undo/redo history — tracks both widgets and sources as a combined snapshot
   const undoRedo = useUndoRedo()
-  const stateRef = useRef({ widgets: localWidgets, sources: localSources })
+  const stateRef = useRef({ widgets: localWidgets, sources: localSources, connectors: localConnectors })
   useEffect(() => {
-    stateRef.current = { widgets: localWidgets, sources: localSources }
-  }, [localWidgets, localSources])
+    stateRef.current = { widgets: localWidgets, sources: localSources, connectors: localConnectors }
+  }, [localWidgets, localSources, localConnectors])
 
   // Serialized write queue — ensures JSONL events land in the right order
   const writeQueueRef = useRef(Promise.resolve())
@@ -522,6 +620,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   const justDraggedRef = useRef(false)
 
   const handleItemDragStart = useCallback((dragId) => {
+    setWidgetDragging(true)
     const ids = selectedIdsRef.current
     peerArticlesRef.current.clear()
     if (ids.size <= 1 || !ids.has(dragId)) return
@@ -567,6 +666,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     console.log('[viewport] canvas changed —', isCanvasSwitch ? 'new canvas, resetting viewport' : 'same canvas, updating widgets only')
     setTrackedCanvas(canvas)
     setLocalWidgets(canvas?.widgets ?? null)
+    setLocalConnectors(canvas?.connectors ?? [])
     setLocalSources(canvas?.sources ?? [])
     setSnapEnabled(canvas?.snapToGrid ?? false)
     setSnapGridSize(canvas?.gridSize || 40)
@@ -613,6 +713,19 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   const handleWidgetRemove = useCallback((widgetId) => {
     undoRedo.snapshot(stateRef.current, 'remove', widgetId)
     setLocalWidgets((prev) => prev ? prev.filter((w) => w.id !== widgetId) : prev)
+    // Cascade: remove connectors referencing this widget
+    setLocalConnectors((prev) => {
+      const orphaned = prev.filter((c) => c.start.widgetId === widgetId || c.end.widgetId === widgetId)
+      if (orphaned.length === 0) return prev
+      for (const c of orphaned) {
+        queueWrite(() =>
+          removeConnectorApi(canvasId, c.id).catch((err) =>
+            console.error('[canvas] Failed to remove orphaned connector:', err)
+          )
+        )
+      }
+      return prev.filter((c) => c.start.widgetId !== widgetId && c.end.widgetId !== widgetId)
+    })
     queueWrite(() =>
       removeWidgetApi(canvasId, widgetId).catch((err) =>
         console.error('[canvas] Failed to remove widget:', err)
@@ -620,6 +733,180 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     )
   }, [canvasId, undoRedo])
 
+  const handleConnectorAdd = useCallback(async ({ startWidgetId, startAnchor, endWidgetId, endAnchor }) => {
+    try {
+      undoRedo.snapshot(stateRef.current, 'connector-add')
+      const result = await addConnectorApi(canvasId, { startWidgetId, startAnchor, endWidgetId, endAnchor })
+      if (result.success && result.connector) {
+        setLocalConnectors((prev) => [...prev, result.connector])
+      }
+    } catch (err) {
+      console.error('[canvas] Failed to add connector:', err)
+    }
+  }, [canvasId, undoRedo])
+
+  const handleConnectorRemove = useCallback((connectorId) => {
+    undoRedo.snapshot(stateRef.current, 'connector-remove')
+    setLocalConnectors((prev) => prev.filter((c) => c.id !== connectorId))
+    queueWrite(() =>
+      removeConnectorApi(canvasId, connectorId).catch((err) =>
+        console.error('[canvas] Failed to remove connector:', err)
+      )
+    )
+  }, [canvasId, undoRedo])
+
+  // Connector drag state
+  const [connectorDrag, setConnectorDrag] = useState(null)
+  const [widgetDragging, setWidgetDragging] = useState(false)
+
+  const handleConnectorDragStart = useCallback((widgetId, anchor, e) => {
+    e.stopPropagation()
+    e.preventDefault()
+    const scrollEl = scrollRef.current
+    if (!scrollEl) return
+    const scale = zoomRef.current / 100
+    const rect = scrollEl.getBoundingClientRect()
+
+    const widgets = stateRef.current.widgets ?? []
+    const startWidget = widgets.find((w) => w.id === widgetId)
+    if (!startWidget) return
+
+    // Don't start drag from a disabled/unavailable anchor
+    const srcAnchorState = getAnchorState(startWidget.type, anchor)
+    if (srcAnchorState !== 'available') return
+
+    const computeAnchorPt = (widget, anch) => {
+      let ww, wh
+      const el = document.getElementById(widget.id)
+      if (el) {
+        const inner = el.querySelector('[data-widget-id]') || el.firstElementChild
+        if (inner) { ww = inner.offsetWidth; wh = inner.offsetHeight }
+      }
+      if (!ww) ww = widget.props?.width ?? widget.bounds?.width ?? 270
+      if (!wh) wh = widget.props?.height ?? widget.bounds?.height ?? 170
+      const px = widget.position?.x ?? 0
+      const py = widget.position?.y ?? 0
+      switch (anch) {
+        case 'top':    return { x: px + ww / 2, y: py }
+        case 'bottom': return { x: px + ww / 2, y: py + wh }
+        case 'left':   return { x: px, y: py + wh / 2 }
+        case 'right':  return { x: px + ww, y: py + wh / 2 }
+        default:       return { x: px + ww / 2, y: py + wh / 2 }
+      }
+    }
+
+    const startPt = computeAnchorPt(startWidget, anchor)
+
+    const toCanvasPoint = (clientX, clientY) => ({
+      x: (scrollEl.scrollLeft + clientX - rect.left) / scale,
+      y: (scrollEl.scrollTop + clientY - rect.top) / scale,
+    })
+
+    // Find nearest anchor on any other widget within a rectangular snap zone.
+    // Each anchor has a 30px-wide strip (15px each side) extending from the widget edge.
+    const SNAP_EXTEND = 15
+    const SNAP_DEPTH = 40
+    const SNAP_CROSS = 20 // perpendicular expansion so you can approach from any direction
+    const sourceType = startWidget.type
+    const findNearestAnchor = (canvasPt) => {
+      const currentWidgets = stateRef.current.widgets ?? []
+      let best = null
+      let bestDist = Infinity
+      for (const w of currentWidgets) {
+        if (w.id === widgetId) continue
+        if (!canAcceptConnection(w.type, sourceType)) continue
+
+        let ww, wh
+        const el = document.getElementById(w.id)
+        if (el) {
+          const inner = el.querySelector('[data-widget-id]') || el.firstElementChild
+          if (inner) { ww = inner.offsetWidth; wh = inner.offsetHeight }
+        }
+        if (!ww) ww = w.props?.width ?? w.bounds?.width ?? 270
+        if (!wh) wh = w.props?.height ?? w.bounds?.height ?? 170
+        const wx = w.position?.x ?? 0
+        const wy = w.position?.y ?? 0
+
+        for (const anch of ['top', 'bottom', 'left', 'right']) {
+          const anchorState = getAnchorState(w.type, anch)
+          if (anchorState !== 'available') continue
+
+          // Build a rectangular hit zone for this anchor
+          let inZone = false
+          if (anch === 'top') {
+            inZone = canvasPt.x >= wx - SNAP_CROSS && canvasPt.x <= wx + ww + SNAP_CROSS &&
+                     canvasPt.y >= wy - SNAP_DEPTH && canvasPt.y <= wy + SNAP_EXTEND
+          } else if (anch === 'bottom') {
+            inZone = canvasPt.x >= wx - SNAP_CROSS && canvasPt.x <= wx + ww + SNAP_CROSS &&
+                     canvasPt.y >= wy + wh - SNAP_EXTEND && canvasPt.y <= wy + wh + SNAP_DEPTH
+          } else if (anch === 'left') {
+            inZone = canvasPt.x >= wx - SNAP_DEPTH && canvasPt.x <= wx + SNAP_EXTEND &&
+                     canvasPt.y >= wy - SNAP_CROSS && canvasPt.y <= wy + wh + SNAP_CROSS
+          } else if (anch === 'right') {
+            inZone = canvasPt.x >= wx + ww - SNAP_EXTEND && canvasPt.x <= wx + ww + SNAP_DEPTH &&
+                     canvasPt.y >= wy - SNAP_CROSS && canvasPt.y <= wy + wh + SNAP_CROSS
+          }
+          if (!inZone) continue
+
+          const pt = computeAnchorPt(w, anch)
+          const dist = Math.hypot(pt.x - canvasPt.x, pt.y - canvasPt.y)
+          if (dist < bestDist) {
+            bestDist = dist
+            best = { widgetId: w.id, anchor: anch, pt }
+          }
+        }
+      }
+      return best
+    }
+
+    const cursorPt = toCanvasPoint(e.clientX, e.clientY)
+    const snap = findNearestAnchor(cursorPt)
+    setConnectorDrag({
+      startWidgetId: widgetId,
+      startAnchor: anchor,
+      startPt,
+      endPt: snap ? snap.pt : cursorPt,
+      endAnchor: snap ? snap.anchor : anchor,
+      snapTarget: snap,
+    })
+
+    const handlePointerMove = (moveE) => {
+      const pt = toCanvasPoint(moveE.clientX, moveE.clientY)
+      const nearSnap = findNearestAnchor(pt)
+      setConnectorDrag((prev) => prev ? {
+        ...prev,
+        endPt: nearSnap ? nearSnap.pt : pt,
+        endAnchor: nearSnap ? nearSnap.anchor : prev.startAnchor,
+        snapTarget: nearSnap,
+      } : null)
+    }
+
+    const handlePointerUp = (upE) => {
+      document.removeEventListener('pointermove', handlePointerMove)
+      document.removeEventListener('pointerup', handlePointerUp)
+
+      const pt = toCanvasPoint(upE.clientX, upE.clientY)
+      const nearSnap = findNearestAnchor(pt)
+
+      if (nearSnap) {
+        handleConnectorAdd({
+          startWidgetId: widgetId,
+          startAnchor: anchor,
+          endWidgetId: nearSnap.widgetId,
+          endAnchor: nearSnap.anchor,
+        })
+      }
+      setConnectorDrag(null)
+    }
+
+    document.addEventListener('pointermove', handlePointerMove)
+    document.addEventListener('pointerup', handlePointerUp)
+  }, [handleConnectorAdd])
+
+  // Endpoint drag removed — dragging from a filled anchor now always
+  // creates a new connection via handleConnectorDragStart instead of
+  // repositioning the existing one.
+
   const handleWidgetCopy = useCallback(async (widget) => {
     // Find the next free offset — check how many copies already exist at +n*40
     const baseX = widget.position?.x ?? 0
@@ -641,6 +928,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       })
       if (result.success && result.widget) {
         setLocalWidgets((prev) => [...(prev || []), result.widget])
+        setSelectedWidgetIds(new Set([result.widget.id]))
       }
     } catch (err) {
       console.error('[canvas] Failed to copy widget:', err)
@@ -725,6 +1013,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   }, [canvasId, debouncedSourceSave, undoRedo, snapEnabled, snapGridSize])
 
   const handleItemDragEnd = useCallback((dragId, position) => {
+    setWidgetDragging(false)
     if (!dragId || !position) {
       clearDragPreview()
       return
@@ -1189,6 +1478,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       if (result.success && result.widget) {
         undoRedo.snapshot(stateRef.current, 'add')
         setLocalWidgets((prev) => [...(prev || []), result.widget])
+        setSelectedWidgetIds(new Set([result.widget.id]))
       }
     } catch (err) {
       console.error('[canvas] Failed to add widget:', err)
@@ -1209,6 +1499,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
       if (result.success && result.widget) {
         undoRedo.snapshot(stateRef.current, 'add')
         setLocalWidgets((prev) => [...(prev || []), result.widget])
+        setSelectedWidgetIds(new Set([result.widget.id]))
       }
     } catch (err) {
       console.error('[canvas] Failed to add story widget:', err)
@@ -1486,6 +1777,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
         if (result.success && result.widget) {
           undoRedo.snapshot(stateRef.current, 'add')
           setLocalWidgets((prev) => [...(prev || []), result.widget])
+          setSelectedWidgetIds(new Set([result.widget.id]))
         }
         return true
       } catch (err) {
@@ -1704,8 +1996,9 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     debouncedSourceSave.cancel()
     setLocalWidgets(previous.widgets)
     setLocalSources(previous.sources)
+    setLocalConnectors(previous.connectors ?? [])
     queueWrite(() =>
-      updateCanvas(canvasId, { widgets: previous.widgets, sources: previous.sources }).catch((err) =>
+      updateCanvas(canvasId, { widgets: previous.widgets, sources: previous.sources, connectors: previous.connectors }).catch((err) =>
         console.error('[canvas] Failed to persist undo:', err)
       )
     )
@@ -1718,8 +2011,9 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
     debouncedSourceSave.cancel()
     setLocalWidgets(next.widgets)
     setLocalSources(next.sources)
+    setLocalConnectors(next.connectors ?? [])
     queueWrite(() =>
-      updateCanvas(canvasId, { widgets: next.widgets, sources: next.sources }).catch((err) =>
+      updateCanvas(canvasId, { widgets: next.widgets, sources: next.sources, connectors: next.connectors }).catch((err) =>
         console.error('[canvas] Failed to persist redo:', err)
       )
     )
@@ -2006,7 +2300,14 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
   }
 
   // 2. JSON-defined mutable widgets (selectable, wrapped in WidgetChrome)
-  for (const widget of (localWidgets ?? [])) {
+  // Sort so selected widgets render last (visually on top via DOM order)
+  const sortedWidgets = (localWidgets ?? []).slice().sort((a, b) => {
+    const aSelected = selectedWidgetIds.has(a.id) ? 1 : 0
+    const bSelected = selectedWidgetIds.has(b.id) ? 1 : 0
+    return aSelected - bSelected
+  })
+  for (const widget of sortedWidgets) {
+    if (!isLocalDev && widget.type === 'terminal') continue
     allChildren.push(
       <div
         key={widget.id}
@@ -2034,6 +2335,7 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
           onRemove={isLocalDev ? handleWidgetRemoveAndDeselect : undefined}
           onRefreshGitHub={isLocalDev ? handleRefreshGitHubWidget : undefined}
           canRefreshGitHub={isLocalDev}
+          onConnectorDragStart={isLocalDev ? handleConnectorDragStart : undefined}
           readOnly={!isLocalDev}
         />
       </div>
@@ -2042,13 +2344,26 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
 
   const scale = zoom / 100
 
+  const terminalWidgetIds = !isLocalDev 
+    ? new Set((localWidgets ?? []).filter(w => w.type === 'terminal').map(w => w.id))
+    : null
+
+  const filteredConnectors = terminalWidgetIds?.size
+    ? localConnectors.filter(c => !terminalWidgetIds.has(c.startWidgetId) && !terminalWidgetIds.has(c.endWidgetId))
+    : localConnectors
+
   return (
     <>
       <div className={styles.canvasTitle}>
         <a href={(import.meta.env?.BASE_URL || '/')} className={styles.canvasLogo} aria-label="Go to homepage">
           <Icon name="iconoir/key-command" size={16} color="#fff" />
         </a>
-        <h1 className={styles.canvasTitleStatic}>{canvasMeta?.title || canvas?.title || canvasId.split('/').pop()}</h1>
+        <CanvasTitleEditable
+          canvasId={canvasId}
+          canvasMeta={canvasMeta}
+          canvas={canvas}
+          isLocalDev={isLocalDev}
+        />
         <PageSelector currentName={canvasId} pages={siblingPages} isLocalDev={isLocalDev} />
         {isLocalDev && (
           <span className={styles.localEditingLabel}>Local editing</span>
@@ -2080,6 +2395,14 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
             ...(spaceHeld ? { pointerEvents: 'none' } : {}),
           }}
         >
+          <ConnectorLayer
+            connectors={filteredConnectors}
+            widgets={localWidgets ?? []}
+            onRemove={isLocalDev ? handleConnectorRemove : undefined}
+            onEndpointDrag={undefined}
+            dragPreview={connectorDrag}
+            hidden={widgetDragging}
+          />
           <Canvas {...canvasProps} onDragStart={isLocalDev ? handleItemDragStart : undefined} onDrag={isLocalDev ? handleItemDrag : undefined} onDragEnd={isLocalDev ? handleItemDragEnd : undefined}>
             {allChildren}
           </Canvas>