@pyreon/flow 0.11.4 → 0.11.6

package/lib/types/index.d.ts

@@ -16,7 +16,7 @@ interface Viewport {
   y: number;
   zoom: number;
 }
-type HandleType = "source" | "target";
+type HandleType = 'source' | 'target';
 declare enum Position {
   Top = "top",
   Right = "right",
@@ -54,7 +54,7 @@ interface FlowNode<TData = Record<string, unknown>> {
   /** Whether this node is a group */
   group?: boolean;
 }
-type EdgeType = "bezier" | "smoothstep" | "straight" | "step";
+type EdgeType = 'bezier' | 'smoothstep' | 'straight' | 'step';
 interface FlowEdge {
   id?: string;
   source: string;
@@ -81,19 +81,19 @@ type ConnectionRule = Record<string, {
   outputs: string[];
 }>;
 type NodeChange = {
-  type: "position";
+  type: 'position';
   id: string;
   position: XYPosition;
 } | {
-  type: "dimensions";
+  type: 'dimensions';
   id: string;
   dimensions: Dimensions;
 } | {
-  type: "select";
+  type: 'select';
   id: string;
   selected: boolean;
 } | {
-  type: "remove";
+  type: 'remove';
   id: string;
 };
 interface EdgePathResult {
@@ -297,16 +297,16 @@ interface FlowInstance {
   /** Dispose all listeners and clean up */
   dispose: () => void;
 }
-type LayoutAlgorithm = "layered" | "force" | "stress" | "tree" | "radial" | "box" | "rectpacking";
+type LayoutAlgorithm = 'layered' | 'force' | 'stress' | 'tree' | 'radial' | 'box' | 'rectpacking';
 interface LayoutOptions {
   /** Layout direction — default: 'DOWN' */
-  direction?: "UP" | "DOWN" | "LEFT" | "RIGHT";
+  direction?: 'UP' | 'DOWN' | 'LEFT' | 'RIGHT';
   /** Spacing between nodes — default: 50 */
   nodeSpacing?: number;
   /** Spacing between layers — default: 80 */
   layerSpacing?: number;
   /** Edge routing — default: 'orthogonal' */
-  edgeRouting?: "orthogonal" | "splines" | "polyline";
+  edgeRouting?: 'orthogonal' | 'splines' | 'polyline';
   /** Whether to animate the layout transition — default: true */
   animate?: boolean;
   /** Animation duration in ms — default: 300 */
@@ -319,7 +319,7 @@ interface FlowProps {
   children?: VNodeChild;
 }
 interface BackgroundProps {
-  variant?: "dots" | "lines" | "cross";
+  variant?: 'dots' | 'lines' | 'cross';
   gap?: number;
   size?: number;
   color?: string;
@@ -337,10 +337,10 @@ interface ControlsProps {
   showZoomOut?: boolean;
   showFitView?: boolean;
   showLock?: boolean;
-  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
 interface PanelProps {
-  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
   style?: string;
   class?: string;
   children?: VNodeChild;
@@ -503,7 +503,7 @@ declare function NodeResizer(props: NodeResizerProps): VNodeChild;
 //#region src/components/node-toolbar.d.ts
 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 */

package/package.json

@@ -1,20 +1,17 @@
 {
   "name": "@pyreon/flow",
-  "version": "0.11.4",
+  "version": "0.11.6",
   "description": "Reactive flow diagrams for Pyreon — signal-native nodes, edges, pan/zoom, auto-layout",
+  "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/flow#readme",
+  "bugs": {
+    "url": "https://github.com/pyreon/pyreon/issues"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon.git",
     "directory": "packages/fundamentals/flow"
   },
-  "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/flow#readme",
-  "bugs": {
-    "url": "https://github.com/pyreon/pyreon/issues"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
   "files": [
     "lib",
     "src",
@@ -22,6 +19,7 @@
     "LICENSE"
   ],
   "type": "module",
+  "sideEffects": false,
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "types": "./lib/types/index.d.ts",
@@ -32,25 +30,27 @@
       "types": "./lib/types/index.d.ts"
     }
   },
-  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "vl_rolldown_build",
     "dev": "vl_rolldown_build-watch",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
-    "lint": "biome check ."
+    "lint": "oxlint ."
   },
   "dependencies": {
     "elkjs": "^0.9.3"
   },
-  "peerDependencies": {
-    "@pyreon/core": "^0.11.4",
-    "@pyreon/reactivity": "^0.11.4"
-  },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.3",
-    "@pyreon/core": "^0.11.4",
-    "@pyreon/reactivity": "^0.11.4",
+    "@pyreon/core": "^0.11.6",
+    "@pyreon/reactivity": "^0.11.6",
     "@vitus-labs/tools-lint": "^1.11.0"
+  },
+  "peerDependencies": {
+    "@pyreon/core": "^0.11.6",
+    "@pyreon/reactivity": "^0.11.6"
   }
 }

package/src/components/background.tsx

@@ -1,5 +1,5 @@
-import type { VNodeChild } from "@pyreon/core"
-import type { BackgroundProps } from "../types"
+import type { VNodeChild } from '@pyreon/core'
+import type { BackgroundProps } from '../types'
 
 /**
  * Background pattern for the flow canvas.
@@ -13,11 +13,11 @@ import type { BackgroundProps } from "../types"
  * ```
  */
 export function Background(props: BackgroundProps): VNodeChild {
-  const { variant = "dots", gap = 20, size = 1, color = "#ddd" } = props
+  const { variant = 'dots', gap = 20, size = 1, color = '#ddd' } = props
 
   const patternId = `flow-bg-${variant}`
 
-  if (variant === "dots") {
+  if (variant === 'dots') {
     return (
       <svg
         role="img"
@@ -32,7 +32,7 @@ export function Background(props: BackgroundProps): VNodeChild {
             y="0"
             width={String(gap)}
             height={String(gap)}
-            {...{ patternUnits: "userSpaceOnUse" }}
+            {...{ patternUnits: 'userSpaceOnUse' }}
           >
             <circle cx={String(size)} cy={String(size)} r={String(size)} fill={color} />
           </pattern>
@@ -42,7 +42,7 @@ export function Background(props: BackgroundProps): VNodeChild {
     )
   }
 
-  if (variant === "lines") {
+  if (variant === 'lines') {
     return (
       <svg
         role="img"
@@ -57,7 +57,7 @@ export function Background(props: BackgroundProps): VNodeChild {
             y="0"
             width={String(gap)}
             height={String(gap)}
-            {...{ patternUnits: "userSpaceOnUse" }}
+            {...{ patternUnits: 'userSpaceOnUse' }}
           >
             <line
               x1="0"
@@ -97,7 +97,7 @@ export function Background(props: BackgroundProps): VNodeChild {
           y="0"
           width={String(gap)}
           height={String(gap)}
-          {...{ patternUnits: "userSpaceOnUse" }}
+          {...{ patternUnits: 'userSpaceOnUse' }}
         >
           <line
             x1={String(gap / 2 - size * 2)}

package/src/components/controls.tsx

@@ -1,11 +1,11 @@
-import type { VNodeChild } from "@pyreon/core"
-import type { ControlsProps, FlowInstance } from "../types"
+import type { VNodeChild } from '@pyreon/core'
+import type { ControlsProps, FlowInstance } 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;',
 }
 
 // Simple SVG icons
@@ -86,15 +86,15 @@ export function Controls(props: ControlsProps & { instance?: FlowInstance }): VN
     showZoomOut = true,
     showFitView = true,
     showLock = false,
-    position = "bottom-left",
+    position = 'bottom-left',
     instance,
   } = props
 
   if (!instance) return null
 
-  const baseStyle = `position: absolute; ${positionStyles[position] ?? positionStyles["bottom-left"]} display: flex; flex-direction: column; gap: 2px; z-index: 5; background: white; border: 1px solid #ddd; border-radius: 6px; padding: 2px; box-shadow: 0 1px 4px rgba(0,0,0,0.08);`
+  const baseStyle = `position: absolute; ${positionStyles[position] ?? positionStyles['bottom-left']} display: flex; flex-direction: column; gap: 2px; z-index: 5; background: white; border: 1px solid #ddd; border-radius: 6px; padding: 2px; box-shadow: 0 1px 4px rgba(0,0,0,0.08);`
   const btnStyle =
-    "width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 4px; cursor: pointer; color: #555; padding: 0;"
+    'width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 4px; cursor: pointer; color: #555; padding: 0;'
 
   return () => {
     const zoomPercent = Math.round(instance.zoom() * 100)

package/src/components/flow-component.tsx

@@ -1,8 +1,8 @@
-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 ──────────────────────────────────────────────────────
 
@@ -12,8 +12,8 @@ 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;`}
@@ -38,8 +38,8 @@ interface ConnectionState {
 
 const emptyConnection: ConnectionState = {
   active: false,
-  sourceNodeId: "",
-  sourceHandleId: "",
+  sourceNodeId: '',
+  sourceHandleId: '',
   sourcePosition: Position.Right,
   sourceX: 0,
   sourceY: 0,
@@ -78,7 +78,7 @@ interface DragState {
 
 const emptyDrag: DragState = {
   active: false,
-  nodeId: "",
+  nodeId: '',
   startX: 0,
   startY: 0,
   startPositions: new Map(),
@@ -110,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" />
@@ -156,7 +156,7 @@ function EdgeLayer(props: {
                 waypoints: edge.waypoints,
               })
             : getEdgePath(
-                edge.type ?? "bezier",
+                edge.type ?? 'bezier',
                 sourcePos.x,
                 sourcePos.y,
                 sourcePosition,
@@ -190,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)
@@ -218,7 +218,7 @@ function EdgeLayer(props: {
           <path
             d={
               getEdgePath(
-                "bezier",
+                'bezier',
                 conn.sourceX,
                 conn.sourceY,
                 conn.sourcePosition,
@@ -270,8 +270,8 @@ function NodeLayer(props: {
           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()
@@ -285,12 +285,12 @@ 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
                 }
@@ -319,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
@@ -378,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 ──────────────────────────────────────────────────────
 
@@ -416,7 +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)
   }
 
@@ -450,7 +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)
   }
 
@@ -491,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) {
@@ -637,10 +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 = {
@@ -670,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()
     }
@@ -780,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
@@ -16,8 +16,8 @@ export function MiniMap(props: MiniMapProps & { instance?: FlowInstance }): VNod
   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
 
@@ -86,7 +86,7 @@ export function MiniMap(props: MiniMapProps & { instance?: FlowInstance }): VNod
             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
       }