@pyreon/flow 0.5.0

package/src/components/handle.tsx

@@ -0,0 +1,42 @@
+import type { VNodeChild } from '@pyreon/core'
+import type { HandleProps } from '../types'
+
+const positionOffset: Record<string, string> = {
+  top: 'top: -4px; left: 50%; transform: translateX(-50%);',
+  right: 'right: -4px; top: 50%; transform: translateY(-50%);',
+  bottom: 'bottom: -4px; left: 50%; transform: translateX(-50%);',
+  left: 'left: -4px; top: 50%; transform: translateY(-50%);',
+}
+
+/**
+ * Connection handle — attachment point on a node where edges connect.
+ * Place inside custom node components.
+ *
+ * @example
+ * ```tsx
+ * function CustomNode({ data }: NodeComponentProps) {
+ *   return (
+ *     <div class="custom-node">
+ *       <Handle type="target" position={Position.Left} />
+ *       <span>{data.label}</span>
+ *       <Handle type="source" position={Position.Right} />
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export function Handle(props: HandleProps): VNodeChild {
+  const { type, position, id, style = '' } = props
+  const posStyle = positionOffset[position] ?? positionOffset.bottom
+  const baseStyle = `position: absolute; ${posStyle} width: 8px; height: 8px; background: #555; border: 2px solid white; border-radius: 50%; cursor: crosshair; z-index: 1; ${style}`
+
+  return (
+    <div
+      class={`pyreon-flow-handle pyreon-flow-handle-${type} ${props.class ?? ''}`}
+      style={baseStyle}
+      data-handletype={type}
+      data-handleid={id ?? type}
+      data-handleposition={position}
+    />
+  )
+}

package/src/components/minimap.tsx

@@ -0,0 +1,136 @@
+import type { VNodeChild } from '@pyreon/core'
+import type { FlowInstance, MiniMapProps } from '../types'
+
+/**
+ * Miniature overview of the flow diagram showing all nodes
+ * and the current viewport position. Click to navigate.
+ *
+ * @example
+ * ```tsx
+ * <Flow instance={flow}>
+ *   <MiniMap nodeColor={(n) => n.type === 'error' ? 'red' : '#ddd'} />
+ * </Flow>
+ * ```
+ */
+export function MiniMap(
+  props: MiniMapProps & { instance?: FlowInstance },
+): VNodeChild {
+  const {
+    width = 200,
+    height = 150,
+    nodeColor = '#e2e8f0',
+    maskColor = 'rgba(0, 0, 0, 0.08)',
+    instance,
+  } = props
+
+  if (!instance) return null
+
+  const containerStyle = `position: absolute; bottom: 10px; right: 10px; width: ${width}px; height: ${height}px; border: 1px solid #ddd; background: white; border-radius: 4px; overflow: hidden; z-index: 5; cursor: pointer;`
+
+  return () => {
+    const nodes = instance.nodes()
+    if (nodes.length === 0)
+      return <div class="pyreon-flow-minimap" style={containerStyle} />
+
+    // Calculate graph bounds
+    let minX = Number.POSITIVE_INFINITY
+    let minY = Number.POSITIVE_INFINITY
+    let maxX = Number.NEGATIVE_INFINITY
+    let maxY = Number.NEGATIVE_INFINITY
+
+    for (const node of nodes) {
+      const w = node.width ?? 150
+      const h = node.height ?? 40
+      minX = Math.min(minX, node.position.x)
+      minY = Math.min(minY, node.position.y)
+      maxX = Math.max(maxX, node.position.x + w)
+      maxY = Math.max(maxY, node.position.y + h)
+    }
+
+    const padding = 40
+    const graphW = maxX - minX + padding * 2
+    const graphH = maxY - minY + padding * 2
+    const scale = Math.min(width / graphW, height / graphH)
+
+    // Viewport rectangle in minimap coordinates
+    const vp = instance.viewport()
+    const cs = instance.containerSize()
+    const vpLeft = (-vp.x / vp.zoom - minX + padding) * scale
+    const vpTop = (-vp.y / vp.zoom - minY + padding) * scale
+    const vpWidth = (cs.width / vp.zoom) * scale
+    const vpHeight = (cs.height / vp.zoom) * scale
+
+    const handleClick = (e: MouseEvent) => {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+      const clickX = e.clientX - rect.left
+      const clickY = e.clientY - rect.top
+
+      // Convert minimap click to flow coordinates
+      const flowX = clickX / scale + minX - padding
+      const flowY = clickY / scale + minY - padding
+
+      // Center viewport on clicked point
+      instance.viewport.set({
+        ...vp,
+        x: -(flowX * vp.zoom) + cs.width / 2,
+        y: -(flowY * vp.zoom) + cs.height / 2,
+      })
+    }
+
+    return (
+      <div
+        class="pyreon-flow-minimap"
+        style={containerStyle}
+        onClick={handleClick}
+      >
+        <svg
+          role="img"
+          aria-label="minimap"
+          width={String(width)}
+          height={String(height)}
+        >
+          {/* Mask outside viewport */}
+          <rect
+            width={String(width)}
+            height={String(height)}
+            fill={maskColor}
+          />
+
+          {/* Nodes */}
+          {nodes.map((node) => {
+            const w = (node.width ?? 150) * scale
+            const h = (node.height ?? 40) * scale
+            const x = (node.position.x - minX + padding) * scale
+            const y = (node.position.y - minY + padding) * scale
+            const color =
+              typeof nodeColor === 'function' ? nodeColor(node) : nodeColor
+
+            return (
+              <rect
+                key={node.id}
+                x={String(x)}
+                y={String(y)}
+                width={String(w)}
+                height={String(h)}
+                fill={color}
+                rx="2"
+              />
+            )
+          })}
+
+          {/* Viewport indicator */}
+          <rect
+            x={String(Math.max(0, vpLeft))}
+            y={String(Math.max(0, vpTop))}
+            width={String(Math.min(vpWidth, width))}
+            height={String(Math.min(vpHeight, height))}
+            fill="none"
+            stroke="#3b82f6"
+            stroke-width="1.5"
+            rx="2"
+          />
+        </svg>
+      </div>
+    )
+  }
+}

package/src/components/node-resizer.tsx

@@ -0,0 +1,169 @@
+import type { VNodeChild } from '@pyreon/core'
+import type { FlowInstance } from '../types'
+
+export interface NodeResizerProps {
+  nodeId: string
+  instance: FlowInstance
+  /** Minimum width — default: 50 */
+  minWidth?: number
+  /** Minimum height — default: 30 */
+  minHeight?: number
+  /** Handle size in px — default: 8 */
+  handleSize?: number
+  /** Also show edge (non-corner) resize handles — default: false */
+  showEdgeHandles?: boolean
+}
+
+type ResizeDirection = 'nw' | 'ne' | 'sw' | 'se' | 'n' | 's' | 'e' | 'w'
+
+const directionCursors: Record<ResizeDirection, string> = {
+  nw: 'nw-resize',
+  ne: 'ne-resize',
+  sw: 'sw-resize',
+  se: 'se-resize',
+  n: 'n-resize',
+  s: 's-resize',
+  e: 'e-resize',
+  w: 'w-resize',
+}
+
+const directionPositions: Record<ResizeDirection, string> = {
+  nw: 'top: -4px; left: -4px;',
+  ne: 'top: -4px; right: -4px;',
+  sw: 'bottom: -4px; left: -4px;',
+  se: 'bottom: -4px; right: -4px;',
+  n: 'top: -4px; left: 50%; transform: translateX(-50%);',
+  s: 'bottom: -4px; left: 50%; transform: translateX(-50%);',
+  e: 'right: -4px; top: 50%; transform: translateY(-50%);',
+  w: 'left: -4px; top: 50%; transform: translateY(-50%);',
+}
+
+/**
+ * Node resize handles. Place inside a custom node component
+ * to allow users to resize the node by dragging corners or edges.
+ *
+ * Uses pointer capture for clean event handling — no document listener leaks.
+ *
+ * @example
+ * ```tsx
+ * function ResizableNode({ id, data, selected }: NodeComponentProps) {
+ *   return (
+ *     <div style="min-width: 100px; min-height: 50px; position: relative;">
+ *       {data.label}
+ *       <NodeResizer nodeId={id} instance={flow} />
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export function NodeResizer(props: NodeResizerProps): VNodeChild {
+  const {
+    nodeId,
+    instance,
+    minWidth = 50,
+    minHeight = 30,
+    handleSize = 8,
+    showEdgeHandles = false,
+  } = props
+
+  const directions: ResizeDirection[] = showEdgeHandles
+    ? ['nw', 'ne', 'sw', 'se', 'n', 's', 'e', 'w']
+    : ['nw', 'ne', 'sw', 'se']
+
+  const createHandler = (dir: ResizeDirection) => {
+    let startX = 0
+    let startY = 0
+    let startWidth = 0
+    let startHeight = 0
+    let startNodeX = 0
+    let startNodeY = 0
+    let zoomAtStart = 1
+
+    const onPointerDown = (e: PointerEvent) => {
+      e.stopPropagation()
+      e.preventDefault()
+
+      const node = instance.getNode(nodeId)
+      if (!node) return
+
+      startX = e.clientX
+      startY = e.clientY
+      startWidth = node.width ?? 150
+      startHeight = node.height ?? 40
+      startNodeX = node.position.x
+      startNodeY = node.position.y
+      zoomAtStart = instance.viewport.peek().zoom
+
+      // Use pointer capture — clean, no leaks
+      const el = e.currentTarget as HTMLElement
+      el.setPointerCapture(e.pointerId)
+    }
+
+    const onPointerMove = (e: PointerEvent) => {
+      const el = e.currentTarget as HTMLElement
+      if (!el.hasPointerCapture(e.pointerId)) return
+
+      const dx = (e.clientX - startX) / zoomAtStart
+      const dy = (e.clientY - startY) / zoomAtStart
+
+      let newW = startWidth
+      let newH = startHeight
+      let newX = startNodeX
+      let newY = startNodeY
+
+      // Horizontal
+      if (dir === 'e' || dir === 'se' || dir === 'ne') {
+        newW = Math.max(minWidth, startWidth + dx)
+      }
+      if (dir === 'w' || dir === 'sw' || dir === 'nw') {
+        newW = Math.max(minWidth, startWidth - dx)
+        newX = startNodeX + startWidth - newW
+      }
+
+      // Vertical
+      if (dir === 's' || dir === 'se' || dir === 'sw') {
+        newH = Math.max(minHeight, startHeight + dy)
+      }
+      if (dir === 'n' || dir === 'ne' || dir === 'nw') {
+        newH = Math.max(minHeight, startHeight - dy)
+        newY = startNodeY + startHeight - newH
+      }
+
+      instance.updateNode(nodeId, {
+        width: newW,
+        height: newH,
+        position: { x: newX, y: newY },
+      })
+    }
+
+    const onPointerUp = (e: PointerEvent) => {
+      const el = e.currentTarget as HTMLElement
+      if (el.hasPointerCapture(e.pointerId)) {
+        el.releasePointerCapture(e.pointerId)
+      }
+    }
+
+    return { onPointerDown, onPointerMove, onPointerUp }
+  }
+
+  const size = `${handleSize}px`
+  const baseStyle = `position: absolute; width: ${size}; height: ${size}; background: white; border: 1.5px solid #3b82f6; border-radius: 2px; z-index: 2;`
+
+  return (
+    <>
+      {directions.map((dir) => {
+        const handler = createHandler(dir)
+        return (
+          <div
+            key={dir}
+            class={`pyreon-flow-resizer pyreon-flow-resizer-${dir}`}
+            style={`${baseStyle} ${directionPositions[dir]} cursor: ${directionCursors[dir]};`}
+            onPointerdown={handler.onPointerDown}
+            onPointermove={handler.onPointerMove}
+            onPointerup={handler.onPointerUp}
+          />
+        )
+      })}
+    </>
+  )
+}

package/src/components/node-toolbar.tsx

@@ -0,0 +1,74 @@
+import type { VNodeChild } from '@pyreon/core'
+
+export interface NodeToolbarProps {
+  /** Position relative to node — default: 'top' */
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  /** Offset from node in px — default: 8 */
+  offset?: number
+  /** Only show when node is selected — default: true */
+  showOnSelect?: boolean
+  /** Whether the node is currently selected */
+  selected?: boolean
+  style?: string
+  class?: string
+  children?: VNodeChild
+}
+
+const positionStyles: Record<string, string> = {
+  top: 'bottom: 100%; left: 50%; transform: translateX(-50%);',
+  bottom: 'top: 100%; left: 50%; transform: translateX(-50%);',
+  left: 'right: 100%; top: 50%; transform: translateY(-50%);',
+  right: 'left: 100%; top: 50%; transform: translateY(-50%);',
+}
+
+/**
+ * Floating toolbar that appears near a node, typically when selected.
+ * Place inside a custom node component.
+ *
+ * @example
+ * ```tsx
+ * function EditableNode({ id, data, selected }: NodeComponentProps) {
+ *   return (
+ *     <div class="node">
+ *       {data.label}
+ *       <NodeToolbar selected={selected}>
+ *         <button onClick={() => duplicate(id)}>Duplicate</button>
+ *         <button onClick={() => remove(id)}>Delete</button>
+ *       </NodeToolbar>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export function NodeToolbar(props: NodeToolbarProps): VNodeChild {
+  const {
+    position = 'top',
+    offset = 8,
+    showOnSelect = true,
+    selected = false,
+    children,
+  } = props
+
+  if (showOnSelect && !selected) return null
+
+  const posStyle = positionStyles[position] ?? positionStyles.top
+  const marginProp =
+    position === 'top'
+      ? `margin-bottom: ${offset}px;`
+      : position === 'bottom'
+        ? `margin-top: ${offset}px;`
+        : position === 'left'
+          ? `margin-right: ${offset}px;`
+          : `margin-left: ${offset}px;`
+
+  const baseStyle = `position: absolute; ${posStyle} ${marginProp} z-index: 10; display: flex; gap: 4px; background: white; border: 1px solid #ddd; border-radius: 6px; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); ${props.style ?? ''}`
+
+  return (
+    <div
+      class={`pyreon-flow-node-toolbar ${props.class ?? ''}`}
+      style={baseStyle}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/panel.tsx

@@ -0,0 +1,33 @@
+import type { VNodeChild } from '@pyreon/core'
+import type { PanelProps } from '../types'
+
+const positionStyles: Record<string, string> = {
+  'top-left': 'top: 10px; left: 10px;',
+  'top-right': 'top: 10px; right: 10px;',
+  'bottom-left': 'bottom: 10px; left: 10px;',
+  'bottom-right': 'bottom: 10px; right: 10px;',
+}
+
+/**
+ * Positioned overlay panel for custom content inside the flow canvas.
+ *
+ * @example
+ * ```tsx
+ * <Flow instance={flow}>
+ *   <Panel position="top-right">
+ *     <SearchBar />
+ *   </Panel>
+ * </Flow>
+ * ```
+ */
+export function Panel(props: PanelProps): VNodeChild {
+  const { position = 'top-left', style = '', children } = props
+  const posStyle = positionStyles[position] ?? positionStyles['top-left']
+  const baseStyle = `position: absolute; ${posStyle} z-index: 5; ${style}`
+
+  return (
+    <div class={`pyreon-flow-panel ${props.class ?? ''}`} style={baseStyle}>
+      {children}
+    </div>
+  )
+}