@dfosco/storyboard-react 4.1.0 → 4.2.0-beta.0

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,259 @@ 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 snap distance
+    const SNAP_DIST = 40
+    const sourceType = startWidget.type
+    const findNearestAnchor = (canvasPt) => {
+      const currentWidgets = stateRef.current.widgets ?? []
+      let best = null
+      let bestDist = SNAP_DIST
+      for (const w of currentWidgets) {
+        if (w.id === widgetId) continue
+        // Check if this widget type accepts connections from the source type
+        if (!canAcceptConnection(w.type, sourceType)) continue
+        for (const anch of ['top', 'bottom', 'left', 'right']) {
+          // Skip unavailable or disabled anchors
+          const anchorState = getAnchorState(w.type, anch)
+          if (anchorState !== 'available') 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])
+
+  // Drag an existing connector endpoint to reconnect or remove
+  const handleEndpointDrag = useCallback((connector, endpoint, e) => {
+    e.stopPropagation()
+    e.preventDefault()
+    const scrollEl = scrollRef.current
+    if (!scrollEl) return
+    const scale = zoomRef.current / 100
+    const rect = scrollEl.getBoundingClientRect()
+
+    // The fixed end stays put; the dragged end follows cursor
+    const fixedEnd = endpoint === 'start' ? 'end' : 'start'
+    const fixedSide = connector[fixedEnd]
+    const fixedWidget = (stateRef.current.widgets ?? []).find((w) => w.id === fixedSide.widgetId)
+    if (!fixedWidget) return
+
+    const computeAnchorPtLocal = (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 fixedPt = computeAnchorPtLocal(fixedWidget, fixedSide.anchor)
+    const fixedWidgetId = fixedSide.widgetId
+
+    const toCanvasPoint = (clientX, clientY) => ({
+      x: (scrollEl.scrollLeft + clientX - rect.left) / scale,
+      y: (scrollEl.scrollTop + clientY - rect.top) / scale,
+    })
+
+    const SNAP_DIST = 40
+    const sourceType = fixedWidget.type
+    const findNearestAnchorLocal = (canvasPt) => {
+      const currentWidgets = stateRef.current.widgets ?? []
+      let best = null
+      let bestDist = SNAP_DIST
+      for (const w of currentWidgets) {
+        if (w.id === fixedWidgetId) continue
+        if (!canAcceptConnection(w.type, sourceType)) continue
+        for (const anch of ['top', 'bottom', 'left', 'right']) {
+          const anchorState = getAnchorState(w.type, anch)
+          if (anchorState !== 'available') continue
+          const pt = computeAnchorPtLocal(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 = findNearestAnchorLocal(cursorPt)
+    setConnectorDrag({
+      startWidgetId: fixedWidgetId,
+      startAnchor: fixedSide.anchor,
+      startPt: fixedPt,
+      endPt: snap ? snap.pt : cursorPt,
+      endAnchor: snap ? snap.anchor : fixedSide.anchor,
+      snapTarget: snap,
+    })
+
+    const handlePointerMove = (moveE) => {
+      const pt = toCanvasPoint(moveE.clientX, moveE.clientY)
+      const nearSnap = findNearestAnchorLocal(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 = findNearestAnchorLocal(pt)
+
+      // Always remove the old connector
+      handleConnectorRemove(connector.id)
+
+      // If snapped to a new anchor, create a new connector
+      if (nearSnap) {
+        handleConnectorAdd({
+          startWidgetId: fixedWidgetId,
+          startAnchor: fixedSide.anchor,
+          endWidgetId: nearSnap.widgetId,
+          endAnchor: nearSnap.anchor,
+        })
+      }
+      setConnectorDrag(null)
+    }
+
+    document.addEventListener('pointermove', handlePointerMove)
+    document.addEventListener('pointerup', handlePointerUp)
+  }, [handleConnectorAdd, handleConnectorRemove])
+
   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 +1007,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 +1092,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 +1557,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 +1578,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 +1856,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 +2075,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 +2090,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 +2379,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 +2414,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 +2423,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 +2474,14 @@ export default function CanvasPage({ canvasId: canvasIdProp, name, siblingPages
             ...(spaceHeld ? { pointerEvents: 'none' } : {}),
           }}
         >
+          <ConnectorLayer
+            connectors={filteredConnectors}
+            widgets={localWidgets ?? []}
+            onRemove={isLocalDev ? handleConnectorRemove : undefined}
+            onEndpointDrag={isLocalDev ? handleEndpointDrag : undefined}
+            dragPreview={connectorDrag}
+            hidden={widgetDragging}
+          />
           <Canvas {...canvasProps} onDragStart={isLocalDev ? handleItemDragStart : undefined} onDrag={isLocalDev ? handleItemDrag : undefined} onDragEnd={isLocalDev ? handleItemDragEnd : undefined}>
             {allChildren}
           </Canvas>

package/src/canvas/CanvasPage.module.css

@@ -29,6 +29,7 @@
 }
 
 .canvasZoom {
+  position: relative;
   min-width: 100%;
   min-height: 100%;
 }
@@ -76,15 +77,36 @@
   white-space: nowrap;
 }
 
+.canvasTitleEditing {
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fgColor-default, #1f2328);
+  margin: 0;
+  padding: 3px 7px;
+  white-space: nowrap;
+  border: 1px solid var(--borderColor-default, rgba(0, 0, 0, 0.15));
+  border-radius: 4px;
+  background: var(--bgColor-default, #fff);
+  outline: none;
+}
+
+.canvasTitleEditing:focus {
+  border-color: var(--focus-outlineColor, #0969da);
+  box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.3);
+}
+
 /* Remove tiny-canvas wrapper clipping — widgets handle their own overflow/radius */
 :global(.tc-draggable-inner) {
   overflow: visible;
 }
 
-/* Elevate stacking context for hovered/selected widgets so their chrome
-   (toolbar, menus, selection outline) renders above sibling widgets. */
-:global(.tc-drag:has([data-tc-elevated])) {
-  z-index: 1;
+/* Each widget gets its own stacking context so internal z-index
+   (chrome toolbars, resize handles, overlays) never leaks to siblings.
+   Visual stacking between widgets is controlled by DOM order — selected
+   widgets are rendered last so they appear on top. */
+:global(.tc-drag) {
+  isolation: isolate;
 }
 
 .localEditingLabel {