@pyreon/flow 0.5.0

package/lib/types/index2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.d.ts","names":[],"sources":["../../src/types.ts","../../src/components/background.tsx","../../src/components/controls.tsx","../../src/components/flow-component.tsx","../../src/components/handle.tsx","../../src/components/minimap.tsx","../../src/components/node-resizer.tsx","../../src/components/node-toolbar.tsx","../../src/components/panel.tsx","../../src/edges.ts","../../src/flow.ts","../../src/layout.ts","../../src/styles.ts"],"mappings":"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"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@pyreon/flow",
+  "version": "0.5.0",
+  "description": "Reactive flow diagrams for Pyreon — signal-native nodes, edges, pan/zoom, auto-layout",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pyreon/fundamentals.git",
+    "directory": "packages/flow"
+  },
+  "homepage": "https://github.com/pyreon/fundamentals/tree/main/packages/flow#readme",
+  "bugs": {
+    "url": "https://github.com/pyreon/fundamentals/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/types/index.d.ts"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "vl_rolldown_build",
+    "dev": "vl_rolldown_build-watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "elkjs": "^0.9.3"
+  },
+  "peerDependencies": {
+    "@pyreon/core": ">=0.5.0 <1.0.0",
+    "@pyreon/reactivity": ">=0.5.0 <1.0.0"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.8.3",
+    "@pyreon/core": ">=0.5.0 <1.0.0",
+    "@pyreon/reactivity": ">=0.5.0 <1.0.0",
+    "@vitus-labs/tools-lint": "^1.11.0"
+  }
+}

package/src/components/background.tsx

@@ -0,0 +1,128 @@
+import type { VNodeChild } from '@pyreon/core'
+import type { BackgroundProps } from '../types'
+
+/**
+ * Background pattern for the flow canvas.
+ * Renders dots, lines, or cross patterns that move with the viewport.
+ *
+ * @example
+ * ```tsx
+ * <Flow instance={flow}>
+ *   <Background variant="dots" gap={20} />
+ * </Flow>
+ * ```
+ */
+export function Background(props: BackgroundProps): VNodeChild {
+  const { variant = 'dots', gap = 20, size = 1, color = '#ddd' } = props
+
+  const patternId = `flow-bg-${variant}`
+
+  if (variant === 'dots') {
+    return (
+      <svg
+        role="img"
+        aria-label="background pattern"
+        class="pyreon-flow-background"
+        style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;"
+      >
+        <defs>
+          <pattern
+            id={patternId}
+            x="0"
+            y="0"
+            width={String(gap)}
+            height={String(gap)}
+            patternUnits="userSpaceOnUse"
+          >
+            <circle
+              cx={String(size)}
+              cy={String(size)}
+              r={String(size)}
+              fill={color}
+            />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+      </svg>
+    )
+  }
+
+  if (variant === 'lines') {
+    return (
+      <svg
+        role="img"
+        aria-label="background pattern"
+        class="pyreon-flow-background"
+        style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;"
+      >
+        <defs>
+          <pattern
+            id={patternId}
+            x="0"
+            y="0"
+            width={String(gap)}
+            height={String(gap)}
+            patternUnits="userSpaceOnUse"
+          >
+            <line
+              x1="0"
+              y1={String(gap)}
+              x2={String(gap)}
+              y2={String(gap)}
+              stroke={color}
+              stroke-width={String(size)}
+            />
+            <line
+              x1={String(gap)}
+              y1="0"
+              x2={String(gap)}
+              y2={String(gap)}
+              stroke={color}
+              stroke-width={String(size)}
+            />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+      </svg>
+    )
+  }
+
+  // cross
+  return (
+    <svg
+      role="img"
+      aria-label="background pattern"
+      class="pyreon-flow-background"
+      style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;"
+    >
+      <defs>
+        <pattern
+          id={patternId}
+          x="0"
+          y="0"
+          width={String(gap)}
+          height={String(gap)}
+          patternUnits="userSpaceOnUse"
+        >
+          <line
+            x1={String(gap / 2 - size * 2)}
+            y1={String(gap / 2)}
+            x2={String(gap / 2 + size * 2)}
+            y2={String(gap / 2)}
+            stroke={color}
+            stroke-width={String(size)}
+          />
+          <line
+            x1={String(gap / 2)}
+            y1={String(gap / 2 - size * 2)}
+            x2={String(gap / 2)}
+            y2={String(gap / 2 + size * 2)}
+            stroke={color}
+            stroke-width={String(size)}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  )
+}

package/src/components/controls.tsx

@@ -0,0 +1,158 @@
+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;',
+}
+
+// Simple SVG icons
+const ZoomInIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+  >
+    <circle cx="7" cy="7" r="5" />
+    <line x1="7" y1="5" x2="7" y2="9" />
+    <line x1="5" y1="7" x2="9" y2="7" />
+    <line x1="11" y1="11" x2="14" y2="14" />
+  </svg>
+)
+
+const ZoomOutIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+  >
+    <circle cx="7" cy="7" r="5" />
+    <line x1="5" y1="7" x2="9" y2="7" />
+    <line x1="11" y1="11" x2="14" y2="14" />
+  </svg>
+)
+
+const FitViewIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+  >
+    <rect x="2" y="2" width="12" height="12" rx="2" />
+    <line x1="2" y1="6" x2="14" y2="6" />
+    <line x1="6" y1="2" x2="6" y2="14" />
+  </svg>
+)
+
+const LockIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+  >
+    <rect x="3" y="7" width="10" height="7" rx="1" />
+    <path d="M5 7V5a3 3 0 0 1 6 0v2" />
+  </svg>
+)
+
+/**
+ * Zoom and viewport controls for the flow canvas.
+ * Shows zoom in, zoom out, fit view, and optional lock button.
+ *
+ * @example
+ * ```tsx
+ * <Flow instance={flow}>
+ *   <Controls />
+ * </Flow>
+ * ```
+ */
+export function Controls(
+  props: ControlsProps & { instance?: FlowInstance },
+): VNodeChild {
+  const {
+    showZoomIn = true,
+    showZoomOut = true,
+    showFitView = true,
+    showLock = false,
+    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 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;'
+
+  return () => {
+    const zoomPercent = Math.round(instance.zoom() * 100)
+
+    return (
+      <div class="pyreon-flow-controls" style={baseStyle}>
+        {showZoomIn && (
+          <button
+            type="button"
+            style={btnStyle}
+            title="Zoom in"
+            onClick={() => instance.zoomIn()}
+          >
+            <ZoomInIcon />
+          </button>
+        )}
+        {showZoomOut && (
+          <button
+            type="button"
+            style={btnStyle}
+            title="Zoom out"
+            onClick={() => instance.zoomOut()}
+          >
+            <ZoomOutIcon />
+          </button>
+        )}
+        {showFitView && (
+          <button
+            type="button"
+            style={btnStyle}
+            title="Fit view"
+            onClick={() => instance.fitView()}
+          >
+            <FitViewIcon />
+          </button>
+        )}
+        {showLock && (
+          <button
+            type="button"
+            style={btnStyle}
+            title="Lock/unlock"
+            onClick={() => {
+              // Toggle pan/zoom by updating config
+              // This is a simple toggle — could be improved with state
+            }}
+          >
+            <LockIcon />
+          </button>
+        )}
+        <div
+          style="font-size: 10px; text-align: center; color: #999; padding: 2px 0; user-select: none;"
+          title="Current zoom level"
+        >
+          {zoomPercent}%
+        </div>
+      </div>
+    )
+  }
+}