@dfosco/storyboard-react 4.2.0-beta.1 → 4.2.0-beta.18

package/src/canvas/CanvasPage.module.css

@@ -103,25 +103,23 @@
 
 /* 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. */
+   z-index: 2 keeps widgets above the ConnectorLayer (z-index: 1).
+   Selected widgets are raised via z-index on the .tc-drag wrapper
+   (data-widget-raised) instead of DOM reordering — this prevents
+   iframe widgets from remounting when selection changes.
+   The actively dragged widget (.tc-on from neodrag) floats above
+   everything so it always passes over siblings during movement. */
 :global(.tc-drag) {
   isolation: isolate;
+  z-index: 2;
 }
 
-.localEditingLabel {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 12px;
-  background: hsl(212, 92%, 45%);
-  color: #fff;
-  font-size: 13px;
-  font-weight: 600;
-  border-radius: 6px;
-  letter-spacing: 0.01em;
-  white-space: nowrap;
-  pointer-events: none;
-  user-select: none;
+:global(.tc-drag:has([data-widget-raised])) {
+  z-index: 3;
+}
+
+:global(.tc-drag.tc-on) {
+  z-index: 4;
 }
 
 .ghInstallBanner {

package/src/canvas/CanvasPage.multiselect.test.jsx

@@ -89,12 +89,23 @@ vi.mock('./widgets/widgetProps.js', () => ({
   getDefaults: () => ({}),
 }))
 
-vi.mock('./widgets/widgetConfig.js', () => ({
-  getFeatures: () => [],
-  isResizable: () => false,
-  schemas: {},
-  getMenuWidgetTypes: () => [],
-}))
+vi.mock('./widgets/widgetConfig.js', async () => {
+  const actual = await vi.importActual('./widgets/widgetConfig.js')
+  return {
+    getFeatures: () => [],
+    isResizable: () => false,
+    isExpandable: () => false,
+    isSplitScreenCapable: () => false,
+    getInteractGate: () => ({ enabled: false, label: 'Click to interact' }),
+    getWidgetMeta: () => null,
+    getConnectorConfig: actual.getConnectorConfig,
+    getAnchorState: actual.getAnchorState,
+    canAcceptConnection: () => true,
+    schemas: {},
+    getMenuWidgetTypes: () => [],
+    getConnectorDefaults: actual.getConnectorDefaults,
+  }
+})
 
 vi.mock('./widgets/figmaUrl.js', () => ({
   isFigmaUrl: () => false,

package/src/canvas/ConnectorLayer.jsx

@@ -1,9 +1,9 @@
 import { useMemo, useCallback } from 'react'
 import styles from './ConnectorLayer.module.css'
 import { getConnectorDefaults, getConnectorConfig } from './widgets/widgetConfig.js'
+import { getAnchorPoint, buildPath } from './connectorGeometry.js'
 
 const connectorConfig = getConnectorDefaults()
-const CONTROL_OFFSET = connectorConfig.controlOffset
 
 /**
  * Get the effective endpoint style for a widget, merging per-widget-type
@@ -19,53 +19,6 @@ function getEndpointStyle(widgetType, side) {
   return connectorConfig[key]
 }
 
-/**
- * Compute the anchor point on a widget's edge.
- * Reads actual DOM dimensions for accuracy (widgets like markdown auto-size).
- * Falls back to props/bounds/defaults if DOM element isn't found.
- */
-function getAnchorPoint(widget, anchor) {
-  const x = widget.position?.x ?? 0
-  const y = widget.position?.y ?? 0
-
-  // Try to read actual rendered dimensions from DOM
-  let w, h
-  const el = document.getElementById(widget.id)
-  if (el) {
-    // The widget element uses CSS translate for positioning;
-    // its offsetWidth/Height give the actual rendered size
-    const firstChild = el.querySelector('[data-widget-id]') || el.firstElementChild
-    if (firstChild) {
-      w = firstChild.offsetWidth
-      h = firstChild.offsetHeight
-    }
-  }
-  // Fallback to data
-  if (!w) w = widget.props?.width ?? widget.bounds?.width ?? 270
-  if (!h) h = widget.props?.height ?? widget.bounds?.height ?? 170
-
-  switch (anchor) {
-    case 'top':    return { x: x + w / 2, y }
-    case 'bottom': return { x: x + w / 2, y: y + h }
-    case 'left':   return { x, y: y + h / 2 }
-    case 'right':  return { x: x + w, y: y + h / 2 }
-    default:       return { x: x + w / 2, y: y + h / 2 }
-  }
-}
-
-/**
- * Compute the control point offset direction for an anchor.
- */
-function getControlOffset(anchor) {
-  switch (anchor) {
-    case 'top':    return { dx: 0, dy: -CONTROL_OFFSET }
-    case 'bottom': return { dx: 0, dy: CONTROL_OFFSET }
-    case 'left':   return { dx: -CONTROL_OFFSET, dy: 0 }
-    case 'right':  return { dx: CONTROL_OFFSET, dy: 0 }
-    default:       return { dx: 0, dy: 0 }
-  }
-}
-
 const DOT_OUTSET = 8
 
 function getDotOffset(anchor) {
@@ -78,28 +31,6 @@ function getDotOffset(anchor) {
   }
 }
 
-/**
- * Build a cubic Bézier path string between two anchor points.
- * When `freeEnd` is true, the end control point is computed from
- * the direction vector (end→start) so the curve never bends in
- * front of the cursor during drag.
- */
-function buildPath(startPt, startAnchor, endPt, endAnchor, freeEnd = false) {
-  const c1 = getControlOffset(startAnchor)
-  let c2
-  if (freeEnd) {
-    // Point the end control toward the start so the curve approaches naturally
-    const dx = startPt.x - endPt.x
-    const dy = startPt.y - endPt.y
-    const dist = Math.hypot(dx, dy) || 1
-    const scale = Math.min(CONTROL_OFFSET, dist * 0.4)
-    c2 = { dx: (dx / dist) * scale, dy: (dy / dist) * scale }
-  } else {
-    c2 = getControlOffset(endAnchor)
-  }
-  return `M ${startPt.x} ${startPt.y} C ${startPt.x + c1.dx} ${startPt.y + c1.dy}, ${endPt.x + c2.dx} ${endPt.y + c2.dy}, ${endPt.x} ${endPt.y}`
-}
-
 /**
  * Render an endpoint shape (circle, arrow-start, arrow-end, or none) at the given point.
  * - "circle" (default): filled dot
@@ -111,48 +42,88 @@ function buildPath(startPt, startAnchor, endPt, endAnchor, freeEnd = false) {
  * @param {Object} startPt — position of the connector's start endpoint
  * @param {Object} endPt — position of the connector's end endpoint
  */
+const ENDPOINT_HIT_PADDING = 8
+
 function EndpointShape({ x, y, startPt, endPt, style, onPointerDown }) {
+  const passThrough = !onPointerDown ? { pointerEvents: 'none' } : {}
+  const hitRadius = connectorConfig.endpointRadius + ENDPOINT_HIT_PADDING
+  const hitTarget = onPointerDown ? (
+    <circle cx={x} cy={y} r={hitRadius}
+      className={styles.endpointHitArea}
+      onPointerDown={onPointerDown}
+    />
+  ) : null
   if (style === 'none') {
     return (
-      <circle cx={x} cy={y} r={connectorConfig.endpointRadius}
-        style={{ fill: 'transparent', stroke: 'none', pointerEvents: 'auto', cursor: 'crosshair' }}
-        onPointerDown={onPointerDown}
-      />
+      <>
+        {hitTarget}
+        <circle cx={x} cy={y} r={connectorConfig.endpointRadius}
+          style={{ fill: 'transparent', stroke: 'none', ...(onPointerDown ? { pointerEvents: 'none' } : { pointerEvents: 'none' }) }}
+        />
+      </>
     )
   }
   if (style === 'arrow-start' || style === 'arrow-end') {
     const size = connectorConfig.endpointRadius * 2.2
-    // Determine which point the arrow should aim toward
     const target = style === 'arrow-start' ? startPt : endPt
     const dx = target.x - x
     const dy = target.y - y
-    // atan2 gives angle from positive X axis; polygon tip points up (-Y), so offset by 90°
     const rotation = (Math.atan2(dy, dx) * 180 / Math.PI) + 90
     return (
-      <polygon
-        points={`0,${-size} ${size * 0.6},${size * 0.5} ${-size * 0.6},${size * 0.5}`}
-        transform={`translate(${x},${y}) rotate(${rotation})`}
-        className={styles.connectorEndpoint}
-        onPointerDown={onPointerDown}
-      />
+      <>
+        {hitTarget}
+        <polygon
+          points={`0,${-size} ${size * 0.6},${size * 0.5} ${-size * 0.6},${size * 0.5}`}
+          transform={`translate(${x},${y}) rotate(${rotation})`}
+          className={styles.connectorEndpoint}
+          style={passThrough}
+        />
+      </>
     )
   }
-  // Default: circle
   return (
-    <circle cx={x} cy={y} r={connectorConfig.endpointRadius}
-      className={styles.connectorEndpoint}
-      onPointerDown={onPointerDown}
-    />
+    <>
+      {hitTarget}
+      <circle cx={x} cy={y} r={connectorConfig.endpointRadius}
+        className={styles.connectorEndpoint}
+        style={passThrough}
+      />
+    </>
   )
 }
 
+/** Shared inline style for both SVG layers (CSS vars for connector theming). */
+const svgLayerStyle = {
+  width: '100000px',
+  height: '100000px',
+  '--connector-stroke': connectorConfig.stroke,
+  '--connector-stroke-width': `${connectorConfig.strokeWidth}px`,
+  '--connector-hover-stroke': connectorConfig.hoverStroke,
+  '--connector-hover-stroke-width': `${connectorConfig.hoverStrokeWidth}px`,
+  '--connector-endpoint-fill': connectorConfig.endpointFill,
+  '--connector-endpoint-stroke': connectorConfig.endpointStroke,
+  '--connector-endpoint-stroke-width': `${connectorConfig.endpointStrokeWidth}px`,
+  '--connector-hit-area-width': `${connectorConfig.hitAreaStrokeWidth}px`,
+  '--connector-drag-stroke': connectorConfig.dragStroke,
+  '--connector-drag-stroke-width': `${connectorConfig.dragStrokeWidth}px`,
+  '--connector-drag-dasharray': connectorConfig.dragDasharray,
+  '--connector-drag-opacity': connectorConfig.dragOpacity,
+}
+
 /**
- * SVG overlay that renders connector lines between widgets.
+ * Two-layer SVG overlay for connector lines and endpoints.
+ *
+ * Stacking (bottom → top):
+ *   connectorLayer  (z-index 1) — paths, hit areas, broadcast animations
+ *   widgets         (z-index 2/3) — normal / selected
+ *   endpointLayer   (z-index 4) — anchor dots & drag targets
+ *
  * Must be placed inside the same zoom-transformed container as widgets.
  */
 export default function ConnectorLayer({
   connectors = [],
   widgets = [],
+  selectedWidgetIds,
   onRemove,
   onEndpointDrag,
   dragPreview,
@@ -171,81 +142,78 @@ export default function ConnectorLayer({
     onRemove?.(connectorId)
   }, [onRemove])
 
+  // Pre-compute connector geometry once, shared by both SVG layers
+  const resolved = useMemo(() => connectors.map((conn) => {
+    const startWidget = widgetMap.get(conn.start?.widgetId)
+    const endWidget = widgetMap.get(conn.end?.widgetId)
+    if (!startWidget || !endWidget) return null
+    const startPt = getAnchorPoint(startWidget, conn.start.anchor)
+    const endPt = getAnchorPoint(endWidget, conn.end.anchor)
+    const d = buildPath(startPt, conn.start.anchor, endPt, conn.end.anchor)
+    const startStyle = getEndpointStyle(startWidget.type, 'start')
+    const endStyle = getEndpointStyle(endWidget.type, 'end')
+    const isBroadcast = conn.meta?.messagingMode === 'two-way'
+    const startSelected = selectedWidgetIds?.has(conn.start?.widgetId)
+    const endSelected = selectedWidgetIds?.has(conn.end?.widgetId)
+    const reverseAnim = endSelected && !startSelected
+    return { conn, startPt, endPt, d, startStyle, endStyle, isBroadcast, reverseAnim }
+  }).filter(Boolean), [connectors, widgetMap, selectedWidgetIds])
+
+  const hiddenClass = hidden ? styles.connectorLayerHidden : ''
+
   return (
-    <svg
-      className={`${styles.connectorLayer} ${hidden ? styles.connectorLayerHidden : ''}`}
-      style={{
-        width: '100000px',
-        height: '100000px',
-        '--connector-stroke': connectorConfig.stroke,
-        '--connector-stroke-width': `${connectorConfig.strokeWidth}px`,
-        '--connector-hover-stroke': connectorConfig.hoverStroke,
-        '--connector-hover-stroke-width': `${connectorConfig.hoverStrokeWidth}px`,
-        '--connector-endpoint-fill': connectorConfig.endpointFill,
-        '--connector-endpoint-stroke': connectorConfig.endpointStroke,
-        '--connector-endpoint-stroke-width': `${connectorConfig.endpointStrokeWidth}px`,
-        '--connector-hit-area-width': `${connectorConfig.hitAreaStrokeWidth}px`,
-        '--connector-drag-stroke': connectorConfig.dragStroke,
-        '--connector-drag-stroke-width': `${connectorConfig.dragStrokeWidth}px`,
-        '--connector-drag-dasharray': connectorConfig.dragDasharray,
-        '--connector-drag-opacity': connectorConfig.dragOpacity,
-      }}
-    >
-      {connectors.map((conn) => {
-        const startWidget = widgetMap.get(conn.start?.widgetId)
-        const endWidget = widgetMap.get(conn.end?.widgetId)
-        if (!startWidget || !endWidget) return null
-
-        const startPt = getAnchorPoint(startWidget, conn.start.anchor)
-        const endPt = getAnchorPoint(endWidget, conn.end.anchor)
-        const d = buildPath(startPt, conn.start.anchor, endPt, conn.end.anchor)
-        const startStyle = getEndpointStyle(startWidget.type, 'start')
-        const endStyle = getEndpointStyle(endWidget.type, 'end')
-
-        return (
+    <>
+      {/* Back layer: connector paths (behind widgets) */}
+      <svg
+        className={`${styles.connectorLayer} ${hiddenClass}`}
+        style={svgLayerStyle}
+      >
+        {resolved.map(({ conn, d, isBroadcast, reverseAnim }) => (
           <g key={conn.id}>
-            {/* Invisible wider hit area for easier clicking */}
-            <path
-              d={d}
-              className={styles.connectorPathHitArea}
-              onClick={(e) => handleClick(e, conn.id)}
-            />
-            {/* Visible connector line */}
-            <path
-              d={d}
-              className={styles.connectorPath}
-              onClick={(e) => handleClick(e, conn.id)}
-            />
-            {/* Endpoint shapes — draggable to reconnect or remove */}
-            <EndpointShape x={startPt.x} y={startPt.y} startPt={startPt} endPt={endPt} style={startStyle}
-              onPointerDown={onEndpointDrag ? (e) => { e.stopPropagation(); e.preventDefault(); onEndpointDrag(conn, 'start', e) } : undefined}
-            />
-            <EndpointShape x={endPt.x} y={endPt.y} startPt={startPt} endPt={endPt} style={endStyle}
-              onPointerDown={onEndpointDrag ? (e) => { e.stopPropagation(); e.preventDefault(); onEndpointDrag(conn, 'end', e) } : undefined}
-            />
+            <path d={d} className={styles.connectorPathHitArea}
+              onClick={(e) => handleClick(e, conn.id)} />
+            <path d={d}
+              className={`${styles.connectorPath}${isBroadcast ? ` ${styles.connectorBroadcast}` : ''}`}
+              onClick={(e) => handleClick(e, conn.id)} />
+            {isBroadcast && (
+              <path d={d}
+                className={`${styles.broadcastFlow}${reverseAnim ? ` ${styles.broadcastFlowReverse}` : ''}`} />
+            )}
           </g>
-        )
-      })}
+        ))}
 
-      {/* Drag preview — dashed when free, solid when snapped to anchor */}
-      {dragPreview && (
-        <>
+        {dragPreview && (
           <path
             d={buildPath(
-              dragPreview.startPt,
-              dragPreview.startAnchor,
-              dragPreview.endPt,
-              dragPreview.endAnchor || dragPreview.startAnchor,
+              dragPreview.startPt, dragPreview.startAnchor,
+              dragPreview.endPt, dragPreview.endAnchor || dragPreview.startAnchor,
               !dragPreview.snapTarget,
             )}
             className={dragPreview.snapTarget ? styles.connectorPath : styles.dragPreviewPath}
           />
-          {dragPreview.snapTarget && (
-            <EndpointShape x={dragPreview.endPt.x} y={dragPreview.endPt.y} startPt={dragPreview.startPt} endPt={dragPreview.endPt} style={connectorConfig.endEndpoint} />
-          )}
-        </>
-      )}
-    </svg>
+        )}
+      </svg>
+
+      {/* Front layer: endpoint anchors (above widgets) */}
+      <svg
+        className={`${styles.endpointLayer} ${hiddenClass}`}
+        style={svgLayerStyle}
+      >
+        {resolved.map(({ conn, startPt, endPt, startStyle, endStyle }) => (
+          <g key={conn.id}>
+            <EndpointShape x={startPt.x} y={startPt.y} startPt={startPt} endPt={endPt} style={startStyle}
+              onPointerDown={onEndpointDrag ? (e) => { e.stopPropagation(); e.preventDefault(); onEndpointDrag(conn, 'start', e) } : undefined} />
+            <EndpointShape x={endPt.x} y={endPt.y} startPt={startPt} endPt={endPt} style={endStyle}
+              onPointerDown={onEndpointDrag ? (e) => { e.stopPropagation(); e.preventDefault(); onEndpointDrag(conn, 'end', e) } : undefined} />
+          </g>
+        ))}
+
+        {dragPreview?.snapTarget && (
+          <EndpointShape x={dragPreview.endPt.x} y={dragPreview.endPt.y}
+            startPt={dragPreview.startPt} endPt={dragPreview.endPt} style={connectorConfig.endEndpoint} />
+        )}
+      </svg>
+    </>
   )
 }
 

package/src/canvas/ConnectorLayer.module.css

@@ -15,6 +15,19 @@
   pointer-events: none;
 }
 
+/* Endpoint anchors sit above widgets so they're always visible and interactive */
+.endpointLayer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+  z-index: 4;
+  transition: opacity 0.2s ease;
+}
+
 .connectorPath {
   fill: none;
   stroke: var(--connector-stroke, var(--fgColor-accent, #0969da));
@@ -42,6 +55,19 @@
   filter: drop-shadow(0 0 4px var(--connector-endpoint-fill, var(--fgColor-accent, #0969da)));
 }
 
+/* Invisible expanded hit area around connector endpoints */
+.endpointHitArea {
+  fill: transparent;
+  stroke: none;
+  pointer-events: auto;
+  cursor: crosshair;
+}
+
+/* Glow effect when hovering endpoint hit area */
+.endpointHitArea:hover ~ .connectorEndpoint {
+  filter: drop-shadow(0 0 4px var(--connector-endpoint-fill, var(--fgColor-accent, #0969da)));
+}
+
 .connectorPathHitArea {
   fill: none;
   stroke: transparent;
@@ -50,6 +76,12 @@
   cursor: pointer;
 }
 
+/* Trigger the visible connector's hover style from the wider hit area */
+.connectorPathHitArea:hover ~ .connectorPath {
+  stroke: var(--connector-hover-stroke, var(--fgColor-danger, #cf222e));
+  stroke-width: var(--connector-hover-stroke-width, 5px);
+}
+
 .dragPreviewPath {
   fill: none;
   stroke: var(--connector-drag-stroke, var(--fgColor-accent, #0969da));
@@ -58,3 +90,40 @@
   pointer-events: none;
   opacity: var(--connector-drag-opacity, 0.7);
 }
+
+/* Broadcast-active connector — transparent base, 50% wider */
+.connectorBroadcast {
+  stroke: transparent;
+  stroke-width: 6px;
+}
+
+.connectorPathHitArea:hover ~ .connectorBroadcast {
+  stroke: var(--connector-hover-stroke, var(--fgColor-danger, #cf222e));
+  stroke-width: var(--connector-hover-stroke-width, 5px);
+}
+
+/* Flowing dots animation along broadcast connectors */
+.broadcastFlow {
+  fill: none;
+  stroke: var(--bgColor-accent-emphasis, #0969da);
+  stroke-width: 6px;
+  stroke-dasharray: 3 17;
+  stroke-linecap: round;
+  pointer-events: none;
+  animation: broadcastFlowAnim 0.8s linear infinite;
+  transition: opacity 0.15s ease;
+}
+
+/* Hide dots on hover so the red delete indicator shows cleanly */
+.connectorPathHitArea:hover ~ .broadcastFlow {
+  opacity: 0;
+}
+
+.broadcastFlowReverse {
+  animation-direction: reverse;
+}
+
+@keyframes broadcastFlowAnim {
+  from { stroke-dashoffset: 0; }
+  to { stroke-dashoffset: -20; }
+}

package/src/canvas/PageSelector.test.jsx

@@ -1,5 +1,5 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import PageSelector from './PageSelector.jsx'
 
 const PAGES = [
@@ -10,9 +10,15 @@ const PAGES = [
 
 describe('PageSelector', () => {
   beforeEach(() => {
-    // Reset location mock
+    // Reset location mock — use a setter spy so we can track assignments
     delete window.location
-    window.location = { href: '' }
+    const loc = { _href: '' }
+    Object.defineProperty(loc, 'href', {
+      get() { return loc._href },
+      set(v) { loc._href = v },
+      configurable: true,
+    })
+    window.location = loc
   })
 
   it('renders nothing when fewer than 2 pages', () => {
@@ -58,14 +64,17 @@ describe('PageSelector', () => {
     expect(options[0].getAttribute('aria-selected')).toBe('false')
   })
 
-  it('navigates to selected page', () => {
+  it('navigates to selected page', async () => {
     render(<PageSelector currentName="research/interviews" pages={PAGES} />)
     fireEvent.click(screen.getByTitle('Switch canvas page'))
     // Click the option in the menu (not the trigger label)
     const options = screen.getAllByRole('option')
     fireEvent.click(options[1]) // Surveys
 
-    expect(window.location.href).toContain('/canvas/research/surveys')
+    // Navigation uses a 300ms setTimeout for mouse clicks
+    await waitFor(() => {
+      expect(window.location.href).toContain('/canvas/research/surveys')
+    })
   })
 
   it('closes dropdown on Escape', () => {

package/src/canvas/canvasApi.js

@@ -28,8 +28,8 @@ export function createCanvas(data) {
   return request('/create', 'POST', data)
 }
 
-export function updateCanvas(canvasId, { widgets, sources, settings }) {
-  return request('/update', 'PUT', { name: canvasId, widgets, sources, settings })
+export function updateCanvas(canvasId, { widgets, sources, settings, connectors }) {
+  return request('/update', 'PUT', { name: canvasId, widgets, sources, settings, connectors })
 }
 
 export function addWidget(canvasId, { type, props, position }) {
@@ -50,6 +50,68 @@ export function toggleImagePrivacy(filename) {
   return request('/image/toggle-private', 'POST', { filename })
 }
 
+export function duplicateImage(filename) {
+  return request('/image/duplicate', 'POST', { filename })
+}
+
+/**
+ * Crop an image client-side and upload the result.
+ * @param {string} imageSrc — current image filename (e.g. "canvas--2026-01-01--12-00-00.png")
+ * @param {{ x: number, y: number, width: number, height: number }} cropRect — crop region in natural image pixels
+ * @param {string} canvasId — canvas name for directory resolution
+ * @returns {Promise<{ success: boolean, filename: string }>}
+ */
+export async function cropAndUpload(imageSrc, cropRect, canvasId) {
+  const imageUrl = (() => {
+    const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
+    return `${base}/_storyboard/canvas/images/${imageSrc}`
+  })()
+
+  // Load the image into an offscreen canvas
+  const img = new Image()
+  img.crossOrigin = 'anonymous'
+  await new Promise((resolve, reject) => {
+    img.onload = resolve
+    img.onerror = reject
+    img.src = imageUrl
+  })
+
+  // Draw the cropped region
+  const canvas = document.createElement('canvas')
+  canvas.width = Math.round(cropRect.width)
+  canvas.height = Math.round(cropRect.height)
+  const ctx = canvas.getContext('2d')
+  ctx.drawImage(
+    img,
+    Math.round(cropRect.x), Math.round(cropRect.y),
+    Math.round(cropRect.width), Math.round(cropRect.height),
+    0, 0,
+    canvas.width, canvas.height,
+  )
+
+  // Determine output format from original filename
+  const ext = imageSrc.split('.').pop()?.toLowerCase() || 'png'
+  const mimeMap = { png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', webp: 'image/webp', gif: 'image/gif' }
+  const mime = mimeMap[ext] || 'image/png'
+  const dataUrl = canvas.toDataURL(mime, 0.92)
+
+  // Build cropped filename: strip any previous --cropped-- suffix, append new one
+  const privacyPrefix = imageSrc.startsWith('~') ? '~' : ''
+  const baseName = imageSrc.replace(/^~/, '')
+  const withoutCrop = baseName.replace(/--cropped--\d{4}-\d{2}-\d{2}--\d{2}-\d{2}-\d{2}/, '')
+  const nameWithoutExt = withoutCrop.replace(/\.\w+$/, '')
+  const now = new Date()
+  const pad = (n) => String(n).padStart(2, '0')
+  const ts = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}--${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`
+  const croppedFilename = `${privacyPrefix}${nameWithoutExt}--cropped--${ts}.${ext}`
+
+  return uploadImage(dataUrl, canvasId, croppedFilename)
+}
+
+export function batchOperations(canvasId, operations) {
+  return request('/batch', 'POST', { name: canvasId, operations })
+}
+
 export function getCanvas(canvasId) {
   return request(`/read?name=${encodeURIComponent(canvasId)}`, 'GET')
 }
@@ -96,3 +158,7 @@ export function addConnector(canvasId, { startWidgetId, startAnchor, endWidgetId
 export function removeConnector(canvasId, connectorId) {
   return request('/connector', 'DELETE', { name: canvasId, connectorId })
 }
+
+export function updateConnector(canvasId, connectorId, meta) {
+  return request('/connector', 'PATCH', { name: canvasId, connectorId, meta })
+}