@stuly/anode-react 0.1.1 → 0.1.2

package/dist/context.d.ts

@@ -7,7 +7,18 @@ interface Viewport {
   y: number;
   k: number;
 }
+/**
+ * Accesses the underlying headless Anode engine instance.
+ *
+ * @returns The `Context` instance for direct graph manipulation.
+ */
 declare const useAnode: () => Context<any>;
+/**
+ * Accesses the current viewport transformation (pan/zoom) and coordinate
+ * conversion utilities.
+ *
+ * @returns An object containing the current `viewport` and functions to update it.
+ */
 declare const useViewport: () => {
   viewport: Viewport;
   setViewport: (v: Viewport) => void;
@@ -16,6 +27,11 @@ declare const useViewport: () => {
     y: number;
   };
 };
+/**
+ * Accesses the current selection state for nodes and links.
+ *
+ * @returns An object containing the `selection` sets and a `setSelection` updater.
+ */
 declare const useSelection: () => {
   selection: {
     nodes: Set<number>;
@@ -26,6 +42,20 @@ declare const useSelection: () => {
     links: Set<number>;
   }>>;
 };
+/**
+ * The root provider for any Anode React application.
+ * Wraps the internal headless engine and provides reactive state for
+ * viewport and selection.
+ *
+ * **Usage:**
+ * ```tsx
+ * <AnodeProvider>
+ *   <World>
+ *     <Background />
+ *   </World>
+ * </AnodeProvider>
+ * ```
+ */
 declare const AnodeProvider: React.FC<{
   children: React.ReactNode;
   context?: Context;

package/dist/context.js

@@ -3,12 +3,27 @@ import { Context } from "@stuly/anode";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/context.tsx
+/**
+* Internal context for Anode's React state, including the engine instance,
+* viewport transformation, and selection state.
+*/
 const AnodeReactContext = createContext(null);
+/**
+* Accesses the underlying headless Anode engine instance.
+*
+* @returns The `Context` instance for direct graph manipulation.
+*/
 const useAnode = () => {
 	const value = useContext(AnodeReactContext);
 	if (!value) throw new Error("useAnode must be used within an AnodeProvider");
 	return value.ctx;
 };
+/**
+* Accesses the current viewport transformation (pan/zoom) and coordinate
+* conversion utilities.
+*
+* @returns An object containing the current `viewport` and functions to update it.
+*/
 const useViewport = () => {
 	const value = useContext(AnodeReactContext);
 	if (!value) throw new Error("useViewport must be used within an AnodeProvider");
@@ -18,6 +33,11 @@ const useViewport = () => {
 		screenToWorld: value.screenToWorld
 	};
 };
+/**
+* Accesses the current selection state for nodes and links.
+*
+* @returns An object containing the `selection` sets and a `setSelection` updater.
+*/
 const useSelection = () => {
 	const value = useContext(AnodeReactContext);
 	if (!value) throw new Error("useSelection must be used within an AnodeProvider");
@@ -26,6 +46,20 @@ const useSelection = () => {
 		setSelection: value.setSelection
 	};
 };
+/**
+* The root provider for any Anode React application.
+* Wraps the internal headless engine and provides reactive state for
+* viewport and selection.
+*
+* **Usage:**
+* ```tsx
+* <AnodeProvider>
+*   <World>
+*     <Background />
+*   </World>
+* </AnodeProvider>
+* ```
+*/
 const AnodeProvider = ({ children, context }) => {
 	const [ctx] = useState(() => context ?? new Context());
 	const [viewport, setViewport] = useState({

package/dist/elements/Background.d.ts

@@ -7,6 +7,17 @@ interface BackgroundProps {
   gap?: number;
   pattern?: 'dots' | 'lines';
 }
+/**
+ * A decorative grid or dot pattern overlay for the canvas.
+ * Automatically pans and scales with the viewport.
+ *
+ * **Usage:**
+ * ```tsx
+ * <World>
+ *   <Background pattern="dots" color="#ccc" />
+ * </World>
+ * ```
+ */
 declare const Background: React.FC<BackgroundProps>;
 //#endregion
 export { Background };

package/dist/elements/Background.js

@@ -3,6 +3,17 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/elements/Background.tsx
+/**
+* A decorative grid or dot pattern overlay for the canvas.
+* Automatically pans and scales with the viewport.
+*
+* **Usage:**
+* ```tsx
+* <World>
+*   <Background pattern="dots" color="#ccc" />
+* </World>
+* ```
+*/
 const Background = ({ color = "#cbd5e1", size = 1, gap = 20, pattern = "dots" }) => {
 	const { viewport } = useViewport();
 	const scaledGap = gap * viewport.k;

package/dist/elements/Controls.d.ts

@@ -1,6 +1,17 @@
 import React from "react";
 
 //#region src/elements/Controls.d.ts
+/**
+ * A floating UI control panel providing standard canvas interactions
+ * like zooming in/out and fitting all nodes into the current view.
+ *
+ * **Usage:**
+ * ```tsx
+ * <World>
+ *   <Controls />
+ * </World>
+ * ```
+ */
 declare const Controls: React.FC<{
   style?: React.CSSProperties;
 }>;

package/dist/elements/Controls.js

@@ -3,6 +3,17 @@ import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/elements/Controls.tsx
+/**
+* A floating UI control panel providing standard canvas interactions
+* like zooming in/out and fitting all nodes into the current view.
+*
+* **Usage:**
+* ```tsx
+* <World>
+*   <Controls />
+* </World>
+* ```
+*/
 const Controls = ({ style }) => {
 	const { viewport, setViewport } = useViewport();
 	const ctx = useAnode();

package/dist/elements/MiniMap.d.ts

@@ -1,6 +1,17 @@
 import React from "react";
 
 //#region src/elements/MiniMap.d.ts
+/**
+ * A simplified bird's-eye view of the entire graph, providing
+ * context and a visual indicator of the current viewport.
+ *
+ * **Usage:**
+ * ```tsx
+ * <World>
+ *   <MiniMap width={200} height={150} />
+ * </World>
+ * ```
+ */
 declare const MiniMap: React.FC<{
   width?: number;
   height?: number;

package/dist/elements/MiniMap.js

@@ -3,6 +3,17 @@ import React, { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/elements/MiniMap.tsx
+/**
+* A simplified bird's-eye view of the entire graph, providing
+* context and a visual indicator of the current viewport.
+*
+* **Usage:**
+* ```tsx
+* <World>
+*   <MiniMap width={200} height={150} />
+* </World>
+* ```
+*/
 const MiniMap = ({ width = 200, height = 150, style }) => {
 	const ctx = useAnode();
 	const { viewport } = useViewport();

package/dist/elements/Panel.d.ts

@@ -2,6 +2,19 @@ import React from "react";
 
 //#region src/elements/Panel.d.ts
 type PanelPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * A helper component to overlay custom UI elements (like toolbars or sidebars)
+ * at specific anchor points on the canvas.
+ *
+ * **Usage:**
+ * ```tsx
+ * <World>
+ *   <Panel position="top-right">
+ *     <button>Custom Action</button>
+ *   </Panel>
+ * </World>
+ * ```
+ */
 declare const Panel: React.FC<{
   position?: PanelPosition;
   children?: React.ReactNode;

package/dist/elements/Panel.js

@@ -2,6 +2,19 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/elements/Panel.tsx
+/**
+* A helper component to overlay custom UI elements (like toolbars or sidebars)
+* at specific anchor points on the canvas.
+*
+* **Usage:**
+* ```tsx
+* <World>
+*   <Panel position="top-right">
+*     <button>Custom Action</button>
+*   </Panel>
+* </World>
+* ```
+*/
 const Panel = ({ position = "top-left", children, style }) => {
 	const getPositionStyle = () => {
 		switch (position) {

package/dist/elements/World.d.ts

@@ -48,12 +48,16 @@ interface LinkData {
  * tree with the internal headless engine.
  *
  * **Behaviors:**
- * 1. **Zoom/Pan:** Implements standard wheel and touch interaction.
- * 2. **Selection:** Multi-select with Shift + Click, Box select with Alt + Click.
- * 3. **Declarative Sync:** If `nodes` or `links` are passed, the core engine
+ * 1. **Zoom/Pan:** Standard wheel zoom and drag-to-pan interaction.
+ * 2. **Selection:** Multi-select with `Shift + Click`, Box select with `Alt + Click`.
+ * 3. **Keybindings:**
+ *    - `Backspace` / `Delete`: Remove selected nodes and links.
+ *    - `Ctrl + Z` / `Cmd + Z`: Undo the last action.
+ *    - `Ctrl + Shift + Z` / `Ctrl + Y`: Redo the last undone action.
+ * 4. **Declarative Sync:** If `nodes` or `links` are passed, the core engine
  *    automatically mirrors these arrays. Changes made directly in the UI
  *    (dragging, deleting) will trigger the corresponding `onNodesChange` callback.
- * 4. **Spatial Culling:** Automatically uses `useVisibleNodes` to optimize rendering.
+ * 5. **Spatial Culling:** Automatically uses `useVisibleNodes` to optimize rendering.
  *
  * **Usage:**
  * ```tsx

package/dist/elements/World.js

@@ -32,12 +32,16 @@ const getCenter = (t1, t2) => {
 * tree with the internal headless engine.
 *
 * **Behaviors:**
-* 1. **Zoom/Pan:** Implements standard wheel and touch interaction.
-* 2. **Selection:** Multi-select with Shift + Click, Box select with Alt + Click.
-* 3. **Declarative Sync:** If `nodes` or `links` are passed, the core engine
+* 1. **Zoom/Pan:** Standard wheel zoom and drag-to-pan interaction.
+* 2. **Selection:** Multi-select with `Shift + Click`, Box select with `Alt + Click`.
+* 3. **Keybindings:**
+*    - `Backspace` / `Delete`: Remove selected nodes and links.
+*    - `Ctrl + Z` / `Cmd + Z`: Undo the last action.
+*    - `Ctrl + Shift + Z` / `Ctrl + Y`: Redo the last undone action.
+* 4. **Declarative Sync:** If `nodes` or `links` are passed, the core engine
 *    automatically mirrors these arrays. Changes made directly in the UI
 *    (dragging, deleting) will trigger the corresponding `onNodesChange` callback.
-* 4. **Spatial Culling:** Automatically uses `useVisibleNodes` to optimize rendering.
+* 5. **Spatial Culling:** Automatically uses `useVisibleNodes` to optimize rendering.
 *
 * **Usage:**
 * ```tsx
@@ -414,6 +418,8 @@ const World = ({ children, style, nodeTypes = {}, linkTypes = {}, defaultLinkKin
 			const rect = worldRef.current.getBoundingClientRect();
 			const startX = e.clientX - rect.left;
 			const startY = e.clientY - rect.top;
+			let currentX = startX;
+			let currentY = startY;
 			setSelectionBox({
 				startX,
 				startY,
@@ -421,33 +427,34 @@ const World = ({ children, style, nodeTypes = {}, linkTypes = {}, defaultLinkKin
 				endY: startY
 			});
 			const onMouseMove = (moveEvent) => {
-				setSelectionBox((prev) => prev ? {
-					...prev,
-					endX: moveEvent.clientX - rect.left,
-					endY: moveEvent.clientY - rect.top
-				} : null);
+				currentX = moveEvent.clientX - rect.left;
+				currentY = moveEvent.clientY - rect.top;
+				setSelectionBox({
+					startX,
+					startY,
+					endX: currentX,
+					endY: currentY
+				});
 			};
 			const onMouseUp = () => {
 				document.removeEventListener("mousemove", onMouseMove);
 				document.removeEventListener("mouseup", onMouseUp);
-				setSelectionBox((prev) => {
-					if (!prev) return null;
-					const rect = worldRef.current?.getBoundingClientRect();
-					if (!rect) return null;
-					const x1 = Math.min(prev.startX, prev.endX);
-					const y1 = Math.min(prev.startY, prev.endY);
-					const x2 = Math.max(prev.startX, prev.endX);
-					const y2 = Math.max(prev.startY, prev.endY);
-					const worldTopLeft = screenToWorld(x1 + rect.left, y1 + rect.top);
-					const worldBottomRight = screenToWorld(x2 + rect.left, y2 + rect.top);
+				const x1 = Math.min(startX, currentX);
+				const y1 = Math.min(startY, currentY);
+				const x2 = Math.max(startX, currentX);
+				const y2 = Math.max(startY, currentY);
+				const worldRect = worldRef.current?.getBoundingClientRect();
+				if (worldRect) {
+					const worldTopLeft = screenToWorld(x1 + worldRect.left, y1 + worldRect.top);
+					const worldBottomRight = screenToWorld(x2 + worldRect.left, y2 + worldRect.top);
 					const queryRect = new Rect(worldTopLeft.x, worldTopLeft.y, worldBottomRight.x - worldTopLeft.x, worldBottomRight.y - worldTopLeft.y);
 					const selectedIds = ctx.quadTree.query(queryRect);
 					setSelection({
 						nodes: new Set(selectedIds),
 						links: /* @__PURE__ */ new Set()
 					});
-					return null;
-				});
+				}
+				setSelectionBox(null);
 			};
 			document.addEventListener("mousemove", onMouseMove);
 			document.addEventListener("mouseup", onMouseUp);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stuly/anode-react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "First-class React bindings for building interactive, declarative node editors with Anode.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -31,7 +31,7 @@
   "license": "MIT",
   "peerDependencies": {
     "react": "^19.2.4",
-    "@stuly/anode": "^0.1.1"
+    "@stuly/anode": "^0.1.2"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",