@realflow/react 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,103 @@
+import type { ComponentType, CSSProperties, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import type { ConnectionValidator, Edge, EdgeMarker, FitViewOptions, Node, Side, Viewport, XY } from '@realflow/core';
+import type { ReflowApi } from './hooks.js';
+/** Props passed to custom node components. */
+export interface NodeProps<T = Record<string, unknown>> {
+    id: string;
+    data: T;
+    node: Node<T>;
+    selected: boolean;
+    dragging: boolean;
+}
+/** Props passed to custom edge components (geometry precomputed). */
+export interface EdgeProps<T = Record<string, unknown>> {
+    id: string;
+    edge: Edge<T>;
+    /** SVG path for the default routing of this edge's type. */
+    path: string;
+    labelX: number;
+    labelY: number;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourceSide: Side;
+    targetSide: Side;
+    selected: boolean;
+}
+export type NodeTypes = Record<string, ComponentType<NodeProps<any>>>;
+export type EdgeTypes = Record<string, ComponentType<EdgeProps<any>>>;
+export interface ReFlowProps {
+    /** Controlled nodes. Prefer `defaultNodes` + useReflow() for simple apps. */
+    nodes?: Node[];
+    edges?: Edge[];
+    /** Uncontrolled initial graph. */
+    defaultNodes?: Node[];
+    defaultEdges?: Edge[];
+    onNodesChange?: (nodes: Node[]) => void;
+    onEdgesChange?: (edges: Edge[]) => void;
+    onSelectionChange?: (selection: {
+        nodes: string[];
+        edges: string[];
+    }) => void;
+    /** A user gesture created this edge. */
+    onConnect?: (edge: Edge) => void;
+    onNodeClick?: (event: ReactMouseEvent, node: Node) => void;
+    onNodeDoubleClick?: (event: ReactMouseEvent, node: Node) => void;
+    onNodeContextMenu?: (event: ReactMouseEvent, node: Node) => void;
+    onEdgeClick?: (event: ReactMouseEvent, edge: Edge) => void;
+    onPaneClick?: (event: ReactMouseEvent, flowPosition: XY) => void;
+    onPaneContextMenu?: (event: ReactMouseEvent, flowPosition: XY) => void;
+    /** Called once with the imperative API (nice for refs-free setups). */
+    onInit?: (api: ReflowApi) => void;
+    nodeTypes?: NodeTypes;
+    edgeTypes?: EdgeTypes;
+    /** Fit the view to the graph after mount. Default true. */
+    fitViewOnInit?: boolean;
+    fitViewOptions?: FitViewOptions;
+    defaultViewport?: Viewport;
+    minZoom?: number;
+    maxZoom?: number;
+    /** Snap dragging to a grid (px). 0 = off. */
+    snapGrid?: number;
+    /** Figma-style alignment guides while dragging. Default true. */
+    alignmentGuides?: boolean;
+    /** Reject connections that would create a directed cycle. */
+    preventCycles?: boolean;
+    allowDuplicateEdges?: boolean;
+    validateConnection?: ConnectionValidator;
+    defaultEdgeOptions?: Partial<Edge> & {
+        markerEnd?: EdgeMarker;
+    };
+    historyLimit?: number;
+    /** Disable all interactions (view-only). */
+    readOnly?: boolean;
+    panOnDrag?: boolean;
+    /** Figma-style trackpad mode: wheel/two-finger scroll pans, ctrl/cmd
+     *  (or pinch gesture) zooms. Default false (wheel zooms). */
+    panOnScroll?: boolean;
+    zoomOnScroll?: boolean;
+    zoomOnDoubleClick?: boolean;
+    /** Box-select with plain drag instead of shift+drag. */
+    selectionOnDrag?: boolean;
+    /** Delete/Backspace removes selection. Default true. */
+    deleteKey?: boolean;
+    /** Built-in keyboard shortcuts (undo/redo/select-all/nudge). Default true. */
+    keyboardShortcuts?: boolean;
+    /** 'light' | 'dark' | 'auto' (default 'auto': follows prefers-color-scheme). */
+    colorMode?: 'light' | 'dark' | 'auto';
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+export interface FlowConfig {
+    nodeTypes: NodeTypes;
+    edgeTypes: EdgeTypes;
+    readOnly: boolean;
+    onConnect?: ReFlowProps['onConnect'];
+    onNodeClick?: ReFlowProps['onNodeClick'];
+    onNodeDoubleClick?: ReFlowProps['onNodeDoubleClick'];
+    onNodeContextMenu?: ReFlowProps['onNodeContextMenu'];
+    onEdgeClick?: ReFlowProps['onEdgeClick'];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@realflow/react",
+  "version": "0.1.0",
+  "description": "The fastest, most beautiful React library for building node-based UIs. Fine-grained rendering, built-in auto-layout, undo/redo, alignment guides \u2014 free and open source.",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node ../../scripts/append-js-extensions.mjs dist && cp src/styles.css dist/styles.css"
+  },
+  "dependencies": {
+    "@realflow/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "keywords": [
+    "react",
+    "node-based-ui",
+    "react-flow-alternative",
+    "graph",
+    "flow",
+    "diagram",
+    "workflow",
+    "dag"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/olbboy/reflow.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/olbboy/reflow#readme",
+  "bugs": "https://github.com/olbboy/reflow/issues"
+}