@pyreon/flow 0.10.0 → 0.11.1

package/src/components/flow-component.tsx

@@ -1,32 +1,19 @@
-import type { VNodeChild } from '@pyreon/core'
-import { signal } from '@pyreon/reactivity'
-import {
-  getEdgePath,
-  getHandlePosition,
-  getSmartHandlePositions,
-  getWaypointPath,
-} from '../edges'
-import type {
-  Connection,
-  FlowInstance,
-  FlowNode,
-  NodeComponentProps,
-} from '../types'
-import { Position } from '../types'
+import type { VNodeChild } from "@pyreon/core"
+import { signal } from "@pyreon/reactivity"
+import { getEdgePath, getHandlePosition, getSmartHandlePositions, getWaypointPath } from "../edges"
+import type { Connection, FlowInstance, FlowNode, NodeComponentProps } from "../types"
+import { Position } from "../types"
 
 // ─── Node type registry ──────────────────────────────────────────────────────
 
-type NodeTypeMap = Record<
-  string,
-  (props: NodeComponentProps<any>) => VNodeChild
->
+type NodeTypeMap = Record<string, (props: NodeComponentProps<any>) => VNodeChild>
 
 /**
  * Default node renderer — simple labeled box.
  */
 function DefaultNode(props: NodeComponentProps) {
-  const borderColor = props.selected ? '#3b82f6' : '#ddd'
-  const cursor = props.dragging ? 'grabbing' : 'grab'
+  const borderColor = props.selected ? "#3b82f6" : "#ddd"
+  const cursor = props.dragging ? "grabbing" : "grab"
   return (
     <div
       style={`padding: 8px 16px; background: white; border: 2px solid ${borderColor}; border-radius: 6px; font-size: 13px; min-width: 80px; text-align: center; cursor: ${cursor}; user-select: none;`}
@@ -51,8 +38,8 @@ interface ConnectionState {
 
 const emptyConnection: ConnectionState = {
   active: false,
-  sourceNodeId: '',
-  sourceHandleId: '',
+  sourceNodeId: "",
+  sourceHandleId: "",
   sourcePosition: Position.Right,
   sourceX: 0,
   sourceY: 0,
@@ -91,7 +78,7 @@ interface DragState {
 
 const emptyDrag: DragState = {
   active: false,
-  nodeId: '',
+  nodeId: "",
   startX: 0,
   startY: 0,
   startPositions: new Map(),
@@ -123,11 +110,11 @@ function EdgeLayer(props: {
           <marker
             id="flow-arrowhead"
             {...{
-              markerWidth: '10',
-              markerHeight: '7',
-              refX: '10',
-              refY: '3.5',
-              orient: 'auto',
+              markerWidth: "10",
+              markerHeight: "7",
+              refX: "10",
+              refY: "3.5",
+              orient: "auto",
             }}
           >
             <polygon points="0 0, 10 3.5, 0 7" fill="#999" />
@@ -143,10 +130,7 @@ function EdgeLayer(props: {
           const targetW = targetNode.width ?? 150
           const targetH = targetNode.height ?? 40
 
-          const { sourcePosition, targetPosition } = getSmartHandlePositions(
-            sourceNode,
-            targetNode,
-          )
+          const { sourcePosition, targetPosition } = getSmartHandlePositions(sourceNode, targetNode)
 
           const sourcePos = getHandlePosition(
             sourcePosition,
@@ -172,7 +156,7 @@ function EdgeLayer(props: {
                 waypoints: edge.waypoints,
               })
             : getEdgePath(
-                edge.type ?? 'bezier',
+                edge.type ?? "bezier",
                 sourcePos.x,
                 sourcePos.y,
                 sourcePosition,
@@ -188,10 +172,7 @@ function EdgeLayer(props: {
           const CustomEdge = edge.type && edgeTypes?.[edge.type]
           if (CustomEdge) {
             return (
-              <g
-                key={edge.id}
-                onClick={() => edge.id && instance.selectEdge(edge.id)}
-              >
+              <g key={edge.id} onClick={() => edge.id && instance.selectEdge(edge.id)}>
                 <CustomEdge
                   edge={edge}
                   sourceX={sourcePos.x}
@@ -209,11 +190,11 @@ function EdgeLayer(props: {
               <path
                 d={path}
                 fill="none"
-                stroke={isSelected ? '#3b82f6' : '#999'}
-                stroke-width={isSelected ? '2' : '1.5'}
+                stroke={isSelected ? "#3b82f6" : "#999"}
+                stroke-width={isSelected ? "2" : "1.5"}
                 marker-end="url(#flow-arrowhead)"
-                class={edge.animated ? 'pyreon-flow-edge-animated' : ''}
-                style={`pointer-events: stroke; cursor: pointer; ${edge.style ?? ''}`}
+                class={edge.animated ? "pyreon-flow-edge-animated" : ""}
+                style={`pointer-events: stroke; cursor: pointer; ${edge.style ?? ""}`}
                 onClick={() => {
                   if (edge.id) instance.selectEdge(edge.id)
                   instance._emit.edgeClick(edge)
@@ -237,7 +218,7 @@ function EdgeLayer(props: {
           <path
             d={
               getEdgePath(
-                'bezier',
+                "bezier",
                 conn.sourceX,
                 conn.sourceY,
                 conn.sourcePosition,
@@ -272,13 +253,7 @@ function NodeLayer(props: {
     position: Position,
   ) => void
 }): VNodeChild {
-  const {
-    instance,
-    nodeTypes,
-    draggingNodeId,
-    onNodePointerDown,
-    onHandlePointerDown,
-  } = props
+  const { instance, nodeTypes, draggingNodeId, onNodePointerDown, onHandlePointerDown } = props
 
   return () => {
     const nodes = instance.nodes()
@@ -290,14 +265,13 @@ function NodeLayer(props: {
         {nodes.map((node) => {
           const isSelected = selectedIds.includes(node.id)
           const isDragging = dragId === node.id
-          const NodeComponent =
-            (node.type && nodeTypes[node.type]) || nodeTypes.default!
+          const NodeComponent = (node.type && nodeTypes[node.type]) || nodeTypes.default!
 
           return (
             <div
               key={node.id}
-              class={`pyreon-flow-node ${node.class ?? ''} ${isSelected ? 'selected' : ''} ${isDragging ? 'dragging' : ''}`}
-              style={`position: absolute; transform: translate(${node.position.x}px, ${node.position.y}px); z-index: ${isDragging ? 1000 : isSelected ? 100 : 0}; ${node.style ?? ''}`}
+              class={`pyreon-flow-node ${node.class ?? ""} ${isSelected ? "selected" : ""} ${isDragging ? "dragging" : ""}`}
+              style={`position: absolute; transform: translate(${node.position.x}px, ${node.position.y}px); z-index: ${isDragging ? 1000 : isSelected ? 100 : 0}; ${node.style ?? ""}`}
               data-nodeid={node.id}
               onClick={(e: MouseEvent) => {
                 e.stopPropagation()
@@ -311,22 +285,17 @@ function NodeLayer(props: {
               onPointerDown={(e: PointerEvent) => {
                 // Check if clicking a handle
                 const target = e.target as HTMLElement
-                const handle = target.closest('.pyreon-flow-handle')
+                const handle = target.closest(".pyreon-flow-handle")
                 if (handle) {
-                  const hType =
-                    handle.getAttribute('data-handletype') ?? 'source'
-                  const hId = handle.getAttribute('data-handleid') ?? 'source'
+                  const hType = handle.getAttribute("data-handletype") ?? "source"
+                  const hId = handle.getAttribute("data-handleid") ?? "source"
                   const hPos =
-                    (handle.getAttribute('data-handleposition') as Position) ??
-                    Position.Right
+                    (handle.getAttribute("data-handleposition") as Position) ?? Position.Right
                   onHandlePointerDown(e, node.id, hType, hId, hPos)
                   return
                 }
                 // Otherwise start dragging node
-                if (
-                  node.draggable !== false &&
-                  instance.config.nodesDraggable !== false
-                ) {
+                if (node.draggable !== false && instance.config.nodesDraggable !== false) {
                   onNodePointerDown(e, node)
                 }
               }}
@@ -350,7 +319,7 @@ function NodeLayer(props: {
 type EdgeTypeMap = Record<
   string,
   (props: {
-    edge: import('../types').FlowEdge
+    edge: import("../types").FlowEdge
     sourceX: number
     sourceY: number
     targetX: number
@@ -409,7 +378,7 @@ export function Flow(props: FlowComponentProps): VNodeChild {
     y: null,
   })
 
-  const draggingNodeId = () => (dragState().active ? dragState().nodeId : '')
+  const draggingNodeId = () => (dragState().active ? dragState().nodeId : "")
 
   // ── Node dragging ──────────────────────────────────────────────────────
 
@@ -447,9 +416,7 @@ export function Flow(props: FlowComponentProps): VNodeChild {
 
     instance._emit.nodeDragStart(node)
 
-    const container = (e.currentTarget as HTMLElement).closest(
-      '.pyreon-flow',
-    ) as HTMLElement
+    const container = (e.currentTarget as HTMLElement).closest(".pyreon-flow") as HTMLElement
     if (container) container.setPointerCapture(e.pointerId)
   }
 
@@ -470,13 +437,7 @@ export function Flow(props: FlowComponentProps): VNodeChild {
 
     const w = node.width ?? 150
     const h = node.height ?? 40
-    const handlePos = getHandlePosition(
-      position,
-      node.position.x,
-      node.position.y,
-      w,
-      h,
-    )
+    const handlePos = getHandlePosition(position, node.position.x, node.position.y, w, h)
 
     connectionState.set({
       active: true,
@@ -489,9 +450,7 @@ export function Flow(props: FlowComponentProps): VNodeChild {
       currentY: handlePos.y,
     })
 
-    const container = (e.target as HTMLElement).closest(
-      '.pyreon-flow',
-    ) as HTMLElement
+    const container = (e.target as HTMLElement).closest(".pyreon-flow") as HTMLElement
     if (container) container.setPointerCapture(e.pointerId)
   }
 
@@ -503,10 +462,7 @@ export function Flow(props: FlowComponentProps): VNodeChild {
 
     const delta = -e.deltaY * 0.001
     const newZoom = Math.min(
-      Math.max(
-        instance.viewport.peek().zoom * (1 + delta),
-        instance.config.minZoom ?? 0.1,
-      ),
+      Math.max(instance.viewport.peek().zoom * (1 + delta), instance.config.minZoom ?? 0.1),
       instance.config.maxZoom ?? 4,
     )
 
@@ -535,8 +491,8 @@ export function Flow(props: FlowComponentProps): VNodeChild {
     if (instance.config.pannable === false) return
 
     const target = e.target as HTMLElement
-    if (target.closest('.pyreon-flow-node')) return
-    if (target.closest('.pyreon-flow-handle')) return
+    if (target.closest(".pyreon-flow-node")) return
+    if (target.closest(".pyreon-flow-handle")) return
 
     // Shift+drag on empty space → selection box
     if (e.shiftKey && instance.config.multiSelect !== false) {
@@ -681,11 +637,10 @@ export function Flow(props: FlowComponentProps): VNodeChild {
     if (conn.active) {
       // Check if we released over a handle target
       const target = e.target as HTMLElement
-      const handle = target.closest('.pyreon-flow-handle')
+      const handle = target.closest(".pyreon-flow-handle")
       if (handle) {
-        const targetNodeId =
-          handle.closest('.pyreon-flow-node')?.getAttribute('data-nodeid') ?? ''
-        const targetHandleId = handle.getAttribute('data-handleid') ?? 'target'
+        const targetNodeId = handle.closest(".pyreon-flow-node")?.getAttribute("data-nodeid") ?? ""
+        const targetHandleId = handle.getAttribute("data-handleid") ?? "target"
 
         if (targetNodeId && targetNodeId !== conn.sourceNodeId) {
           const connection: Connection = {
@@ -699,12 +654,8 @@ export function Flow(props: FlowComponentProps): VNodeChild {
             instance.addEdge({
               source: connection.source,
               target: connection.target,
-              ...(connection.sourceHandle != null
-                ? { sourceHandle: connection.sourceHandle }
-                : {}),
-              ...(connection.targetHandle != null
-                ? { targetHandle: connection.targetHandle }
-                : {}),
+              ...(connection.sourceHandle != null ? { sourceHandle: connection.sourceHandle } : {}),
+              ...(connection.targetHandle != null ? { targetHandle: connection.targetHandle } : {}),
             })
           }
         }
@@ -719,31 +670,31 @@ export function Flow(props: FlowComponentProps): VNodeChild {
   // ── Keyboard ───────────────────────────────────────────────────────────
 
   const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Delete' || e.key === 'Backspace') {
+    if (e.key === "Delete" || e.key === "Backspace") {
       const target = e.target as HTMLElement
-      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return
       instance.pushHistory()
       instance.deleteSelected()
     }
-    if (e.key === 'Escape') {
+    if (e.key === "Escape") {
       instance.clearSelection()
       connectionState.set({ ...emptyConnection })
     }
-    if (e.key === 'a' && (e.metaKey || e.ctrlKey)) {
+    if (e.key === "a" && (e.metaKey || e.ctrlKey)) {
       e.preventDefault()
       instance.selectAll()
     }
-    if (e.key === 'c' && (e.metaKey || e.ctrlKey)) {
+    if (e.key === "c" && (e.metaKey || e.ctrlKey)) {
       instance.copySelected()
     }
-    if (e.key === 'v' && (e.metaKey || e.ctrlKey)) {
+    if (e.key === "v" && (e.metaKey || e.ctrlKey)) {
       instance.paste()
     }
-    if (e.key === 'z' && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
+    if (e.key === "z" && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
       e.preventDefault()
       instance.undo()
     }
-    if (e.key === 'z' && (e.metaKey || e.ctrlKey) && e.shiftKey) {
+    if (e.key === "z" && (e.metaKey || e.ctrlKey) && e.shiftKey) {
       e.preventDefault()
       instance.redo()
     }
@@ -759,10 +710,7 @@ export function Flow(props: FlowComponentProps): VNodeChild {
       e.preventDefault()
       const t1 = e.touches[0]!
       const t2 = e.touches[1]!
-      lastTouchDist = Math.hypot(
-        t2.clientX - t1.clientX,
-        t2.clientY - t1.clientY,
-      )
+      lastTouchDist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY)
       lastTouchCenter = {
         x: (t1.clientX + t2.clientX) / 2,
         y: (t1.clientY + t2.clientY) / 2,
@@ -832,12 +780,12 @@ export function Flow(props: FlowComponentProps): VNodeChild {
     resizeObserver.observe(el)
   }
 
-  const containerStyle = `position: relative; width: 100%; height: 100%; overflow: hidden; outline: none; touch-action: none; ${props.style ?? ''}`
+  const containerStyle = `position: relative; width: 100%; height: 100%; overflow: hidden; outline: none; touch-action: none; ${props.style ?? ""}`
 
   return (
     <div
       ref={containerRef}
-      class={`pyreon-flow ${props.class ?? ''}`}
+      class={`pyreon-flow ${props.class ?? ""}`}
       style={containerStyle}
       tabIndex={0}
       onWheel={handleWheel}

package/src/components/handle.tsx

@@ -1,11 +1,11 @@
-import type { VNodeChild } from '@pyreon/core'
-import type { HandleProps } from '../types'
+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%);',
+  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%);",
 }
 
 /**
@@ -26,13 +26,13 @@ const positionOffset: Record<string, string> = {
  * ```
  */
 export function Handle(props: HandleProps): VNodeChild {
-  const { type, position, id, style = '' } = props
+  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 ?? ''}`}
+      class={`pyreon-flow-handle pyreon-flow-handle-${type} ${props.class ?? ""}`}
       style={baseStyle}
       data-handletype={type}
       data-handleid={id ?? type}

package/src/components/minimap.tsx

@@ -1,5 +1,5 @@
-import type { VNodeChild } from '@pyreon/core'
-import type { FlowInstance, MiniMapProps } from '../types'
+import type { VNodeChild } from "@pyreon/core"
+import type { FlowInstance, MiniMapProps } from "../types"
 
 /**
  * Miniature overview of the flow diagram showing all nodes
@@ -12,14 +12,12 @@ import type { FlowInstance, MiniMapProps } from '../types'
  * </Flow>
  * ```
  */
-export function MiniMap(
-  props: MiniMapProps & { instance?: FlowInstance },
-): VNodeChild {
+export function MiniMap(props: MiniMapProps & { instance?: FlowInstance }): VNodeChild {
   const {
     width = 200,
     height = 150,
-    nodeColor = '#e2e8f0',
-    maskColor = 'rgba(0, 0, 0, 0.08)',
+    nodeColor = "#e2e8f0",
+    maskColor = "rgba(0, 0, 0, 0.08)",
     instance,
   } = props
 
@@ -29,8 +27,7 @@ export function MiniMap(
 
   return () => {
     const nodes = instance.nodes()
-    if (nodes.length === 0)
-      return <div class="pyreon-flow-minimap" style={containerStyle} />
+    if (nodes.length === 0) return <div class="pyreon-flow-minimap" style={containerStyle} />
 
     // Calculate graph bounds
     let minX = Number.POSITIVE_INFINITY
@@ -78,23 +75,10 @@ export function MiniMap(
     }
 
     return (
-      <div
-        class="pyreon-flow-minimap"
-        style={containerStyle}
-        onClick={handleClick}
-      >
-        <svg
-          role="img"
-          aria-label="minimap"
-          width={String(width)}
-          height={String(height)}
-        >
+      <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}
-          />
+          <rect width={String(width)} height={String(height)} fill={maskColor} />
 
           {/* Nodes */}
           {nodes.map((node) => {
@@ -102,8 +86,7 @@ export function MiniMap(
             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
+            const color = typeof nodeColor === "function" ? nodeColor(node) : nodeColor
 
             return (
               <rect

package/src/components/node-resizer.tsx

@@ -1,5 +1,5 @@
-import type { VNodeChild } from '@pyreon/core'
-import type { FlowInstance } from '../types'
+import type { VNodeChild } from "@pyreon/core"
+import type { FlowInstance } from "../types"
 
 export interface NodeResizerProps {
   nodeId: string
@@ -14,28 +14,28 @@ export interface NodeResizerProps {
   showEdgeHandles?: boolean
 }
 
-type ResizeDirection = 'nw' | 'ne' | 'sw' | 'se' | 'n' | 's' | 'e' | 'w'
+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',
+  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%);',
+  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%);",
 }
 
 /**
@@ -67,8 +67,8 @@ export function NodeResizer(props: NodeResizerProps): VNodeChild {
   } = props
 
   const directions: ResizeDirection[] = showEdgeHandles
-    ? ['nw', 'ne', 'sw', 'se', 'n', 's', 'e', 'w']
-    : ['nw', 'ne', 'sw', 'se']
+    ? ["nw", "ne", "sw", "se", "n", "s", "e", "w"]
+    : ["nw", "ne", "sw", "se"]
 
   const createHandler = (dir: ResizeDirection) => {
     let startX = 0
@@ -112,19 +112,19 @@ export function NodeResizer(props: NodeResizerProps): VNodeChild {
       let newY = startNodeY
 
       // Horizontal
-      if (dir === 'e' || dir === 'se' || dir === 'ne') {
+      if (dir === "e" || dir === "se" || dir === "ne") {
         newW = Math.max(minWidth, startWidth + dx)
       }
-      if (dir === 'w' || dir === 'sw' || dir === 'nw') {
+      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') {
+      if (dir === "s" || dir === "se" || dir === "sw") {
         newH = Math.max(minHeight, startHeight + dy)
       }
-      if (dir === 'n' || dir === 'ne' || dir === 'nw') {
+      if (dir === "n" || dir === "ne" || dir === "nw") {
         newH = Math.max(minHeight, startHeight - dy)
         newY = startNodeY + startHeight - newH
       }

package/src/components/node-toolbar.tsx

@@ -1,8 +1,8 @@
-import type { VNodeChild } from '@pyreon/core'
+import type { VNodeChild } from "@pyreon/core"
 
 export interface NodeToolbarProps {
   /** Position relative to node — default: 'top' */
-  position?: 'top' | 'bottom' | 'left' | 'right'
+  position?: "top" | "bottom" | "left" | "right"
   /** Offset from node in px — default: 8 */
   offset?: number
   /** Only show when node is selected — default: true */
@@ -15,10 +15,10 @@ export interface NodeToolbarProps {
 }
 
 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%);',
+  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%);",
 }
 
 /**
@@ -41,33 +41,24 @@ const positionStyles: Record<string, string> = {
  * ```
  */
 export function NodeToolbar(props: NodeToolbarProps): VNodeChild {
-  const {
-    position = 'top',
-    offset = 8,
-    showOnSelect = true,
-    selected = false,
-    children,
-  } = props
+  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'
+    position === "top"
       ? `margin-bottom: ${offset}px;`
-      : position === 'bottom'
+      : position === "bottom"
         ? `margin-top: ${offset}px;`
-        : position === 'left'
+        : 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 ?? ''}`
+  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}
-    >
+    <div class={`pyreon-flow-node-toolbar ${props.class ?? ""}`} style={baseStyle}>
       {children}
     </div>
   )

package/src/components/panel.tsx

@@ -1,11 +1,11 @@
-import type { VNodeChild } from '@pyreon/core'
-import type { PanelProps } from '../types'
+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;',
+  "top-left": "top: 10px; left: 10px;",
+  "top-right": "top: 10px; right: 10px;",
+  "bottom-left": "bottom: 10px; left: 10px;",
+  "bottom-right": "bottom: 10px; right: 10px;",
 }
 
 /**
@@ -21,12 +21,12 @@ const positionStyles: Record<string, string> = {
  * ```
  */
 export function Panel(props: PanelProps): VNodeChild {
-  const { position = 'top-left', style = '', children } = props
-  const posStyle = positionStyles[position] ?? positionStyles['top-left']
+  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}>
+    <div class={`pyreon-flow-panel ${props.class ?? ""}`} style={baseStyle}>
       {children}
     </div>
   )