@pyreon/flow 0.11.4 → 0.11.6

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,24 +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>
   )

package/src/edges.ts

@@ -1,5 +1,5 @@
-import type { EdgePathResult, FlowNode, XYPosition } from "./types"
-import { Position } from "./types"
+import type { EdgePathResult, FlowNode, XYPosition } from './types'
+import { Position } from './types'
 
 /**
  * Auto-detect the best handle position based on relative node positions.
@@ -280,7 +280,7 @@ export function getWaypointPath(params: {
   const allPoints = [{ x: sourceX, y: sourceY }, ...waypoints, { x: targetX, y: targetY }]
 
   const segments = allPoints.map((p) => `${p.x},${p.y}`)
-  const path = `M${segments.join(" L")}`
+  const path = `M${segments.join(' L')}`
 
   // Label at the middle waypoint
   const midIdx = Math.floor(waypoints.length / 2)
@@ -305,7 +305,7 @@ export function getEdgePath(
   targetPosition: Position,
 ): EdgePathResult {
   switch (type) {
-    case "smoothstep":
+    case 'smoothstep':
       return getSmoothStepPath({
         sourceX,
         sourceY,
@@ -314,9 +314,9 @@ export function getEdgePath(
         targetY,
         targetPosition,
       })
-    case "straight":
+    case 'straight':
       return getStraightPath({ sourceX, sourceY, targetX, targetY })
-    case "step":
+    case 'step':
       return getStepPath({
         sourceX,
         sourceY,

package/src/flow.ts

@@ -1,5 +1,5 @@
-import { batch, computed, signal } from "@pyreon/reactivity"
-import { computeLayout } from "./layout"
+import { batch, computed, signal } from '@pyreon/reactivity'
+import { computeLayout } from './layout'
 import type {
   Connection,
   FlowConfig,
@@ -10,15 +10,15 @@ import type {
   LayoutOptions,
   NodeChange,
   XYPosition,
-} from "./types"
+} from './types'
 
 /**
  * Generate a unique edge id from source/target.
  */
 function edgeId(edge: FlowEdge): string {
   if (edge.id) return edge.id
-  const sh = edge.sourceHandle ? `-${edge.sourceHandle}` : ""
-  const th = edge.targetHandle ? `-${edge.targetHandle}` : ""
+  const sh = edge.sourceHandle ? `-${edge.sourceHandle}` : ''
+  const th = edge.targetHandle ? `-${edge.targetHandle}` : ''
   return `e-${edge.source}${sh}-${edge.target}${th}`
 }
 
@@ -51,7 +51,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
   const {
     nodes: initialNodes = [],
     edges: initialEdges = [],
-    defaultEdgeType = "bezier",
+    defaultEdgeType = 'bezier',
     minZoom = 0.1,
     maxZoom = 4,
     snapToGrid = false,
@@ -119,7 +119,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
         return next
       })
     })
-    emitNodeChanges([{ type: "remove", id }])
+    emitNodeChanges([{ type: 'remove', id }])
   }
 
   function updateNode(id: string, update: Partial<FlowNode>): void {
@@ -139,7 +139,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
     pos = clampToExtent(pos, node?.width, node?.height)
 
     nodes.update((nds) => nds.map((n) => (n.id === id ? { ...n, position: pos } : n)))
-    emitNodeChanges([{ type: "position", id, position: pos }])
+    emitNodeChanges([{ type: 'position', id, position: pos }])
   }
 
   // ── Edge operations ──────────────────────────────────────────────────────
@@ -187,7 +187,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
     const sourceNode = getNode(connection.source)
     if (!sourceNode) return false
 
-    const sourceType = sourceNode.type ?? "default"
+    const sourceType = sourceNode.type ?? 'default'
     const rule = connectionRules[sourceType]
     if (!rule) return true // no rule = allow
 
@@ -195,7 +195,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
     const targetNode = getNode(connection.target)
     if (!targetNode) return false
 
-    const targetType = targetNode.type ?? "default"
+    const targetType = targetNode.type ?? 'default'
     return rule.outputs.includes(targetType)
   }
 
@@ -354,7 +354,7 @@ export function createFlow(config: FlowConfig = {}): FlowInstance {
   // ── Layout ───────────────────────────────────────────────────────────────
 
   async function layout(
-    algorithm: LayoutAlgorithm = "layered",
+    algorithm: LayoutAlgorithm = 'layered',
     options: LayoutOptions = {},
   ): Promise<void> {
     const currentNodes = nodes.peek()

package/src/index.ts

@@ -24,18 +24,18 @@
  * ```
  */
 
-export { Background } from "./components/background"
-export { Controls } from "./components/controls"
-export type { FlowComponentProps } from "./components/flow-component"
+export { Background } from './components/background'
+export { Controls } from './components/controls'
+export type { FlowComponentProps } from './components/flow-component'
 // Components
-export { Flow } from "./components/flow-component"
-export { Handle } from "./components/handle"
-export { MiniMap } from "./components/minimap"
-export type { NodeResizerProps } from "./components/node-resizer"
-export { NodeResizer } from "./components/node-resizer"
-export type { NodeToolbarProps } from "./components/node-toolbar"
-export { NodeToolbar } from "./components/node-toolbar"
-export { Panel } from "./components/panel"
+export { Flow } from './components/flow-component'
+export { Handle } from './components/handle'
+export { MiniMap } from './components/minimap'
+export type { NodeResizerProps } from './components/node-resizer'
+export { NodeResizer } from './components/node-resizer'
+export type { NodeToolbarProps } from './components/node-toolbar'
+export { NodeToolbar } from './components/node-toolbar'
+export { Panel } from './components/panel'
 // Edge path utilities
 export {
   getBezierPath,
@@ -46,13 +46,13 @@ export {
   getStepPath,
   getStraightPath,
   getWaypointPath,
-} from "./edges"
+} from './edges'
 // Core
-export { createFlow } from "./flow"
+export { createFlow } from './flow'
 // Layout
-export { computeLayout } from "./layout"
+export { computeLayout } from './layout'
 // Styles
-export { flowStyles } from "./styles"
+export { flowStyles } from './styles'
 export type {
   BackgroundProps,
   Connection,
@@ -78,6 +78,6 @@ export type {
   Rect,
   Viewport,
   XYPosition,
-} from "./types"
+} from './types'
 // Types
-export { Position } from "./types"
+export { Position } from './types'

package/src/layout.ts

@@ -1,22 +1,22 @@
-import type { FlowEdge, FlowNode, LayoutAlgorithm, LayoutOptions } from "./types"
+import type { FlowEdge, FlowNode, LayoutAlgorithm, LayoutOptions } from './types'
 
 // ─── ELK algorithm mapping ───────────────────────────────────────────────────
 
 const ELK_ALGORITHMS: Record<LayoutAlgorithm, string> = {
-  layered: "org.eclipse.elk.layered",
-  force: "org.eclipse.elk.force",
-  stress: "org.eclipse.elk.stress",
-  tree: "org.eclipse.elk.mrtree",
-  radial: "org.eclipse.elk.radial",
-  box: "org.eclipse.elk.box",
-  rectpacking: "org.eclipse.elk.rectpacking",
+  layered: 'org.eclipse.elk.layered',
+  force: 'org.eclipse.elk.force',
+  stress: 'org.eclipse.elk.stress',
+  tree: 'org.eclipse.elk.mrtree',
+  radial: 'org.eclipse.elk.radial',
+  box: 'org.eclipse.elk.box',
+  rectpacking: 'org.eclipse.elk.rectpacking',
 }
 
 const ELK_DIRECTIONS: Record<string, string> = {
-  UP: "UP",
-  DOWN: "DOWN",
-  LEFT: "LEFT",
-  RIGHT: "RIGHT",
+  UP: 'UP',
+  DOWN: 'DOWN',
+  LEFT: 'LEFT',
+  RIGHT: 'RIGHT',
 }
 
 // ─── Lazy-loaded ELK instance ────────────────────────────────────────────────
@@ -28,7 +28,7 @@ async function getELK(): Promise<any> {
   if (elkInstance) return elkInstance
   if (elkPromise) return elkPromise
 
-  elkPromise = import("elkjs/lib/elk.bundled.js").then((mod) => {
+  elkPromise = import('elkjs/lib/elk.bundled.js').then((mod) => {
     const ELK = mod.default || mod
     elkInstance = new ELK()
     return elkInstance
@@ -69,32 +69,32 @@ function toElkGraph(
   options: LayoutOptions,
 ): ElkGraph {
   const layoutOptions: Record<string, string> = {
-    "elk.algorithm": ELK_ALGORITHMS[algorithm] ?? ELK_ALGORITHMS.layered,
+    'elk.algorithm': ELK_ALGORITHMS[algorithm] ?? ELK_ALGORITHMS.layered,
   }
 
   if (options.direction) {
-    layoutOptions["elk.direction"] = ELK_DIRECTIONS[options.direction] ?? "DOWN"
+    layoutOptions['elk.direction'] = ELK_DIRECTIONS[options.direction] ?? 'DOWN'
   }
 
   if (options.nodeSpacing !== undefined) {
-    layoutOptions["elk.spacing.nodeNode"] = String(options.nodeSpacing)
+    layoutOptions['elk.spacing.nodeNode'] = String(options.nodeSpacing)
   }
 
   if (options.layerSpacing !== undefined) {
-    layoutOptions["elk.layered.spacing.nodeNodeBetweenLayers"] = String(options.layerSpacing)
+    layoutOptions['elk.layered.spacing.nodeNodeBetweenLayers'] = String(options.layerSpacing)
   }
 
   if (options.edgeRouting) {
     const routingMap: Record<string, string> = {
-      orthogonal: "ORTHOGONAL",
-      splines: "SPLINES",
-      polyline: "POLYLINE",
+      orthogonal: 'ORTHOGONAL',
+      splines: 'SPLINES',
+      polyline: 'POLYLINE',
     }
-    layoutOptions["elk.edgeRouting"] = routingMap[options.edgeRouting] ?? "ORTHOGONAL"
+    layoutOptions['elk.edgeRouting'] = routingMap[options.edgeRouting] ?? 'ORTHOGONAL'
   }
 
   return {
-    id: "root",
+    id: 'root',
     layoutOptions,
     children: nodes.map((node) => ({
       id: node.id,
@@ -130,7 +130,7 @@ function toElkGraph(
 export async function computeLayout(
   nodes: FlowNode[],
   edges: FlowEdge[],
-  algorithm: LayoutAlgorithm = "layered",
+  algorithm: LayoutAlgorithm = 'layered',
   options: LayoutOptions = {},
 ): Promise<Array<{ id: string; position: { x: number; y: number } }>> {
   const elk = await getELK()