@flikk/ui 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/components/canvas/Background.js

@@ -1,7 +1,8 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import { cn } from '../../utils/cn.js';
-import { useNodeCanvasContext } from './context/CanvasContext.js';
+import { useCanvasState } from './context/CanvasContext.js';
 
 /**
  * A pannable / zoomable canvas backdrop. Lives at the pane level (behind the
@@ -9,7 +10,7 @@ import { useNodeCanvasContext } from './context/CanvasContext.js';
  * pattern tracks pan and its spacing scales with zoom. Non-interactive.
  */
 function Background({ variant = "dots", gap = 18, size = 1, className, }) {
-    const { viewport } = useNodeCanvasContext();
+    const { viewport } = useCanvasState();
     const id = useId();
     const tile = gap * viewport.zoom;
     return (jsxs("svg", { className: cn(

package/dist/components/canvas/CanvasToolbar.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { CursorArrowRaysIcon, HandRaisedIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../utils/cn.js';
@@ -10,7 +11,7 @@ import '../core/Dropdown/DropdownItem.js';
 import '../core/Dropdown/DropdownSection.js';
 import '../core/Dropdown/DropdownSeparator.js';
 import '../core/Dropdown/Dropdown.theme.js';
-import { useNodeCanvasContext } from './context/CanvasContext.js';
+import { useCanvasApi } from './context/CanvasContext.js';
 
 const POSITIONS = {
     bottom: "bottom-6 left-1/2 -translate-x-1/2",
@@ -25,7 +26,7 @@ const Divider = () => (jsx("span", { className: "mx-0.5 h-6 w-px bg-[var(--color
  * clicks from it (the Dropdown menu portals with `data-flikkui-portal`, same rule).
  */
 function CanvasToolbar({ nodeOptions, onAddNode, showTools = true, position = "bottom", className, children, }) {
-    const { tool, setTool } = useNodeCanvasContext();
+    const { tool, setTool } = useCanvasApi();
     const hasNodes = !!(nodeOptions === null || nodeOptions === void 0 ? void 0 : nodeOptions.length);
     return (jsxs("div", { "data-flikkui-nopan": "", className: cn("absolute z-30 flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-surface-overlay)]/60 backdrop-blur-lg p-1 shadow-real-lg", POSITIONS[position], className), children: [showTools && (jsxs(Fragment, { children: [jsx(Button, { variant: tool === "select" ? "soft" : "ghost", color: "neutral", size: "sm", iconOnly: true, onClick: () => setTool("select"), "aria-label": "Select tool", "aria-pressed": tool === "select", className: cn("rounded-full", tool === "select" && "shadow-inner"), children: jsx(CursorArrowRaysIcon, { className: "size-4" }) }), jsx(Button, { variant: tool === "pan" ? "soft" : "ghost", color: "neutral", size: "sm", iconOnly: true, onClick: () => setTool("pan"), "aria-label": "Hand (pan) tool", "aria-pressed": tool === "pan", className: cn("rounded-full", tool === "pan" && "shadow-inner"), children: jsx(HandRaisedIcon, { className: "size-4" }) })] })), showTools && hasNodes && jsx(Divider, {}), hasNodes && (jsxs(Dropdown, { placement: "top", offset: 10, onAction: (type) => onAddNode === null || onAddNode === void 0 ? void 0 : onAddNode(type), children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "ghost", color: "neutral", size: "sm", className: "rounded-full gap-1.5", children: [jsx(PlusIcon, { className: "size-4" }), "Add node"] }) }), jsx(Dropdown.Menu, { "aria-label": "Add node", children: nodeOptions === null || nodeOptions === void 0 ? void 0 : nodeOptions.map((opt) => (jsx(Dropdown.Item, { itemKey: opt.type, startContent: opt.icon && (jsx("span", { className: "size-4 grid place-items-center text-[var(--color-text-muted)]", children: opt.icon })), children: opt.label }, opt.type))) })] })), children && (jsxs(Fragment, { children: [(showTools || hasNodes) && jsx(Divider, {}), children] }))] }));
 }

package/dist/components/canvas/Edge.d.ts

@@ -1,4 +1,4 @@
-import type React from "react";
+import React from "react";
 import type { EdgeType, HandlePosition, XYPosition } from "./NodeCanvas.types";
 /** Cubic-bezier path curving out from each handle's side. */
 export declare function buildBezierPath(source: XYPosition, sourceSide: HandlePosition, target: XYPosition, targetSide: HandlePosition): string;
@@ -29,7 +29,4 @@ export interface EdgeRenderProps {
  * set, a wide transparent hit-path makes it easy to click, and the visible stroke
  * emphasizes on hover (via the group) and when selected.
  */
-export declare function Edge({ id, type, source, sourcePosition, target, targetPosition, selected, color, dashed, onPointerDown, }: EdgeRenderProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Edge {
-    var displayName: string;
-}
+export declare const Edge: React.NamedExoticComponent<EdgeRenderProps>;

package/dist/components/canvas/Edge.js

@@ -1,4 +1,6 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
 import { cn } from '../../utils/cn.js';
 
 function controlPoint(p, side, dist) {
@@ -82,7 +84,7 @@ function buildEdgePath(type, source, sourceSide, target, targetSide) {
  * set, a wide transparent hit-path makes it easy to click, and the visible stroke
  * emphasizes on hover (via the group) and when selected.
  */
-function Edge({ id, type = "bezier", source, sourcePosition, target, targetPosition, selected, color, dashed, onPointerDown, }) {
+const Edge = React__default.memo(function Edge({ id, type = "bezier", source, sourcePosition, target, targetPosition, selected, color, dashed, onPointerDown, }) {
     const d = buildEdgePath(type, source, sourcePosition, target, targetPosition);
     // Inline stroke beats the class strokes below; selection keeps priority.
     const colorStyle = color && !selected ? { stroke: color } : undefined;
@@ -91,7 +93,21 @@ function Edge({ id, type = "bezier", source, sourcePosition, target, targetPosit
                     : "stroke-[var(--color-primary)] group-hover:opacity-10") }), jsx("path", { d: d, fill: "none", strokeWidth: selected ? 2.5 : 1.5, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", strokeDasharray: dashed ? "5 4" : undefined, style: colorStyle, className: cn("transition-[stroke,stroke-width] duration-150", selected
                     ? "stroke-[var(--color-primary)]"
                     : "stroke-[var(--color-border)] group-hover:stroke-[var(--color-border-hover)]") })] }));
-}
+}, 
+// EdgeLayer allocates fresh anchor point objects every render, so `source`/
+// `target` must be compared by value — default shallow memo would never bail.
+(prev, next) => prev.id === next.id &&
+    prev.type === next.type &&
+    prev.selected === next.selected &&
+    prev.color === next.color &&
+    prev.dashed === next.dashed &&
+    prev.onPointerDown === next.onPointerDown &&
+    prev.sourcePosition === next.sourcePosition &&
+    prev.targetPosition === next.targetPosition &&
+    prev.source.x === next.source.x &&
+    prev.source.y === next.source.y &&
+    prev.target.x === next.target.x &&
+    prev.target.y === next.target.y);
 Edge.displayName = "Edge";
 
 export { Edge, buildBezierPath, buildEdgePath, buildStepPath, edgeMidpoint };

package/dist/components/canvas/EdgeLayer.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ConnectionState } from "./context/ConnectionContext";
 import type { NodeCanvasEdge, NodeCanvasNode } from "./NodeCanvas.types";
 interface EdgeLayerProps {
@@ -14,5 +15,5 @@ interface EdgeLayerProps {
  * handles through pan / zoom / node drag. The × is counter-scaled so it stays a
  * constant on-screen size.
  */
-export declare function EdgeLayer({ nodes, edges, connection, onSelectEdge, onDeleteEdge, }: EdgeLayerProps): import("react/jsx-runtime").JSX.Element;
+export declare const EdgeLayer: React.NamedExoticComponent<EdgeLayerProps>;
 export {};

package/dist/components/canvas/EdgeLayer.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useMemo } from 'react';
+import React__default, { useState, useMemo, useCallback } from 'react';
 import { edgeMidpoint, Edge } from './Edge.js';
 import { useHandleRegistry } from './context/HandleRegistry.js';
-import { useNodeCanvasContext } from './context/CanvasContext.js';
+import { useCanvasState } from './context/CanvasContext.js';
 
 const SIDE_NORMAL = {
     top: [0, -1],
@@ -17,11 +18,20 @@ const SIDE_NORMAL = {
  * handles through pan / zoom / node drag. The × is counter-scaled so it stays a
  * constant on-screen size.
  */
-function EdgeLayer({ nodes, edges, connection, onSelectEdge, onDeleteEdge, }) {
+const EdgeLayer = React__default.memo(function EdgeLayer({ nodes, edges, connection, onSelectEdge, onDeleteEdge, }) {
     const { handlesRef, version } = useHandleRegistry();
-    const { viewport } = useNodeCanvasContext();
+    const { viewport } = useCanvasState();
     const [hoveredEdge, setHoveredEdge] = useState(null);
     const nodeMap = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+    // One stable handler for every edge (reads the id stamped on the hit path)
+    // so memo(Edge) can bail on unrelated re-renders.
+    const onEdgePointerDown = useCallback((e) => {
+        const id = e.currentTarget.getAttribute("data-edge-id");
+        if (!id)
+            return;
+        e.stopPropagation();
+        onSelectEdge(id, e.shiftKey);
+    }, [onSelectEdge]);
     const anchorAt = (node, h) => ({
         point: { x: node.position.x + h.offset.x, y: node.position.y + h.offset.y },
         position: h.position,
@@ -97,15 +107,15 @@ function EdgeLayer({ nodes, edges, connection, onSelectEdge, onDeleteEdge, }) {
                     return null;
                 const { s, t } = resolved;
                 const showDelete = !connection && (edge.selected || hoveredEdge === edge.id);
-                const mid = edgeMidpoint((_a = edge.type) !== null && _a !== void 0 ? _a : "bezier", s.point, s.position, t.point, t.position);
-                return (jsxs("g", { onPointerEnter: () => setHoveredEdge(edge.id), onPointerLeave: () => setHoveredEdge((h) => (h === edge.id ? null : h)), children: [jsx(Edge, { id: edge.id, type: edge.type, source: s.point, sourcePosition: s.position, target: t.point, targetPosition: t.position, selected: edge.selected, color: edge.color, onPointerDown: (e) => {
-                                e.stopPropagation();
-                                onSelectEdge(edge.id, e.shiftKey);
-                            } }), showDelete && (jsxs("g", { transform: `translate(${mid.x} ${mid.y}) scale(${1 / viewport.zoom})`, style: { pointerEvents: "auto", cursor: "pointer" }, className: "group/delete", onPointerDown: (e) => {
+                const mid = showDelete
+                    ? edgeMidpoint((_a = edge.type) !== null && _a !== void 0 ? _a : "bezier", s.point, s.position, t.point, t.position)
+                    : null;
+                return (jsxs("g", { onPointerEnter: () => setHoveredEdge(edge.id), onPointerLeave: () => setHoveredEdge((h) => (h === edge.id ? null : h)), children: [jsx(Edge, { id: edge.id, type: edge.type, source: s.point, sourcePosition: s.position, target: t.point, targetPosition: t.position, selected: edge.selected, color: edge.color, onPointerDown: onEdgePointerDown }), showDelete && mid && (jsxs("g", { transform: `translate(${mid.x} ${mid.y}) scale(${1 / viewport.zoom})`, style: { pointerEvents: "auto", cursor: "pointer" }, className: "group/delete", onPointerDown: (e) => {
                                 e.stopPropagation();
                                 onDeleteEdge(edge.id);
                             }, "aria-label": "Delete connection", children: [jsx("circle", { r: 9, className: "fill-[var(--color-surface)] stroke-[var(--color-border)] drop-shadow-sm transition-colors group-hover/delete:fill-[var(--color-danger)] group-hover/delete:stroke-[var(--color-danger)]", strokeWidth: 1 }), jsx("path", { d: "M -3 -3 L 3 3 M 3 -3 L -3 3", className: "stroke-[var(--color-danger)] transition-colors group-hover/delete:stroke-white", strokeWidth: 1.5, strokeLinecap: "round", fill: "none" })] }))] }, edge.id));
             }), connection && ghost && (jsx(Edge, { source: ghost.point, sourcePosition: ghost.position, target: connection.to, targetPosition: connection.to.x >= ghost.point.x ? "left" : "right", dashed: true, selected: true }))] }));
-}
+});
+EdgeLayer.displayName = "EdgeLayer";
 
 export { EdgeLayer };

package/dist/components/canvas/Handle.js

@@ -1,9 +1,10 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useNodeId } from './context/NodeIdContext.js';
 import { useHandleRegistry, handleKey } from './context/HandleRegistry.js';
-import { useNodeCanvasContext } from './context/CanvasContext.js';
+import { useCanvasApi } from './context/CanvasContext.js';
 import { useConnection } from './hooks/useConnection.js';
 
 const SIDE_CLASSES = {
@@ -22,7 +23,7 @@ function Handle({ type, id, position = type === "source" ? "right" : "left", isC
     const nodeId = useNodeId();
     const ref = useRef(null);
     const { register, unregister } = useHandleRegistry();
-    const { viewportRef, locked } = useNodeCanvasContext();
+    const { viewportRef, locked } = useCanvasApi();
     const { onPointerDown } = useConnection({ nodeId, handleId: id, type });
     const connectable = isConnectable && !locked;
     useEffect(() => {

package/dist/components/canvas/MiniMap.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import { cn } from '../../utils/cn.js';

package/dist/components/canvas/NodeCanvas.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useIsClient } from '../../hooks/useIsClient.js';
-import { CanvasProvider } from './context/CanvasContext.js';
+import { CanvasApiProvider, CanvasStateProvider } from './context/CanvasContext.js';
 import { InteractionProvider } from './context/InteractionContext.js';
 import { handleKey, HandleRegistryProvider } from './context/HandleRegistry.js';
 import { ConnectionActionsProvider } from './context/ConnectionContext.js';
@@ -59,6 +60,10 @@ const NodeCanvas = React__default.forwardRef(function NodeCanvas(props, ref) {
     onNodesChangeRef.current = onNodesChange;
     const onSelectionChangeRef = useRef(onSelectionChange);
     onSelectionChangeRef.current = onSelectionChange;
+    // Stable identity so an inline consumer handler doesn't defeat NodeWrapper's memo.
+    const onNodeClickRef = useRef(onNodeClick);
+    onNodeClickRef.current = onNodeClick;
+    const handleNodeClick = useCallback((event, node) => { var _a; return (_a = onNodeClickRef.current) === null || _a === void 0 ? void 0 : _a.call(onNodeClickRef, event, node); }, []);
     const emitNodeChanges = useCallback((changes) => {
         var _a;
         if (!nodesControlled) {
@@ -438,23 +443,22 @@ const NodeCanvas = React__default.forwardRef(function NodeCanvas(props, ref) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     /* ----- context values ----- */
-    const canvasValue = useMemo(() => ({
-        nodes,
-        viewport,
+    // Split per-frame data from the stable API so pan/zoom and graph updates
+    // don't re-render consumers that only need refs/setters (see CanvasContext).
+    const canvasStateValue = useMemo(() => ({ nodes, viewport, flowToScreen, screenToFlow }), [nodes, viewport, flowToScreen, screenToFlow]);
+    const canvasApiValue = useMemo(() => ({
         viewportRef,
         setViewport,
         minZoom,
         maxZoom,
         paneRef,
-        flowToScreen,
-        screenToFlow,
         fitView,
         locked,
         setLocked,
         snapGrid,
         tool,
         setTool,
-    }), [nodes, viewport, viewportRef, setViewport, minZoom, maxZoom, flowToScreen, screenToFlow, fitView, locked, snapGrid === null || snapGrid === void 0 ? void 0 : snapGrid[0], snapGrid === null || snapGrid === void 0 ? void 0 : snapGrid[1], tool]);
+    }), [viewportRef, setViewport, minZoom, maxZoom, fitView, locked, snapGrid === null || snapGrid === void 0 ? void 0 : snapGrid[0], snapGrid === null || snapGrid === void 0 ? void 0 : snapGrid[1], tool]);
     const interactionValue = useMemo(() => ({ interactingRef, setInteracting }), [setInteracting]);
     const handleRegistryValue = useMemo(() => ({
         register: registerHandle,
@@ -463,14 +467,14 @@ const NodeCanvas = React__default.forwardRef(function NodeCanvas(props, ref) {
         version: handleVersion,
     }), [registerHandle, unregisterHandle, handleVersion]);
     const connectionActionsValue = useMemo(() => ({ beginConnection, updateConnection, endConnection, cancelConnection }), [beginConnection, updateConnection, endConnection, cancelConnection]);
-    return (jsx("div", { ref: paneRef, className: cn(theme.pane, "focus:outline-none", className), tabIndex: -1, onKeyDown: onPaneKeyDown, onPointerDown: onPanePointerDown, ...rest, children: jsx(CanvasProvider, { value: canvasValue, children: jsx(InteractionProvider, { value: interactionValue, children: jsx(HandleRegistryProvider, { value: handleRegistryValue, children: jsxs(ConnectionActionsProvider, { value: connectionActionsValue, children: [children, jsxs("div", { className: theme.world, style: {
-                                    transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
-                                }, children: [jsx(EdgeLayer, { nodes: nodes, edges: edges, connection: connection, onSelectEdge: selectEdge, onDeleteEdge: deleteEdgeById }), jsx(NodeRenderer, { nodes: nodes, nodeTypes: nodeTypes, autoConnect: autoConnect, onNodeChanges: emitNodeChanges, onSelectNode: selectNode, onNodeClick: onNodeClick })] }), marqueeRect && (jsx("div", { className: "absolute z-30 pointer-events-none rounded-md border border-[var(--color-primary)] bg-[var(--color-primary)]/10 shadow-inner-real-lg", style: {
-                                    left: marqueeRect.x,
-                                    top: marqueeRect.y,
-                                    width: marqueeRect.width,
-                                    height: marqueeRect.height,
-                                } })), jsx("div", { className: "sr-only", "aria-live": "polite", role: "status", children: liveMessage })] }) }) }) }) }));
+    return (jsx("div", { ref: paneRef, className: cn(theme.pane, "focus:outline-none", className), tabIndex: -1, onKeyDown: onPaneKeyDown, onPointerDown: onPanePointerDown, ...rest, children: jsx(CanvasApiProvider, { value: canvasApiValue, children: jsx(CanvasStateProvider, { value: canvasStateValue, children: jsx(InteractionProvider, { value: interactionValue, children: jsx(HandleRegistryProvider, { value: handleRegistryValue, children: jsxs(ConnectionActionsProvider, { value: connectionActionsValue, children: [children, jsxs("div", { className: theme.world, style: {
+                                        transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
+                                    }, children: [jsx(EdgeLayer, { nodes: nodes, edges: edges, connection: connection, onSelectEdge: selectEdge, onDeleteEdge: deleteEdgeById }), jsx(NodeRenderer, { nodes: nodes, nodeTypes: nodeTypes, autoConnect: autoConnect, onNodeChanges: emitNodeChanges, onSelectNode: selectNode, onNodeClick: onNodeClick ? handleNodeClick : undefined })] }), marqueeRect && (jsx("div", { className: "absolute z-30 pointer-events-none rounded-md border border-[var(--color-primary)] bg-[var(--color-primary)]/10 shadow-inner-real-lg", style: {
+                                        left: marqueeRect.x,
+                                        top: marqueeRect.y,
+                                        width: marqueeRect.width,
+                                        height: marqueeRect.height,
+                                    } })), jsx("div", { className: "sr-only", "aria-live": "polite", role: "status", children: liveMessage })] }) }) }) }) }) }));
 });
 NodeCanvas.displayName = "NodeCanvas";
 

package/dist/components/canvas/NodeCanvas.types.d.ts

@@ -141,7 +141,11 @@ export interface NodeCanvasProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     defaultEdges?: NodeCanvasEdge[];
     /** Initial viewport when uncontrolled. Defaults to `{ x: 0, y: 0, zoom: 1 }`. */
     defaultViewport?: NodeCanvasViewport;
-    /** Maps `node.type` → the component that renders it. */
+    /**
+     * Maps `node.type` → the component that renders it. Keep this map referentially
+     * stable (module scope or memoized) — an inline object defeats the per-node
+     * memoization and re-renders every node on every canvas update.
+     */
     nodeTypes: NodeCanvasNodeTypes;
     onNodesChange?: (changes: NodeChange[]) => void;
     onEdgesChange?: (changes: EdgeChange[]) => void;

package/dist/components/canvas/NodeControls.js

@@ -1,9 +1,10 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { PlusIcon, MinusIcon, ArrowsPointingOutIcon, LockClosedIcon, LockOpenIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../utils/cn.js';
 import { Button } from '../core/Button/Button.js';
 import 'react';
-import { useNodeCanvasContext } from './context/CanvasContext.js';
+import { useCanvasApi } from './context/CanvasContext.js';
 import { clamp } from './utils.js';
 
 const POSITIONS = {
@@ -18,7 +19,7 @@ const POSITIONS = {
  * as a child of `NodeCanvas`.
  */
 function NodeControls({ position = "bottom-right", showZoom = true, showFitView = true, showLock = true, zoomStep = 1.2, className, }) {
-    const { setViewport, fitView, minZoom, maxZoom, paneRef, locked, setLocked } = useNodeCanvasContext();
+    const { setViewport, fitView, minZoom, maxZoom, paneRef, locked, setLocked } = useCanvasApi();
     const zoomBy = (factor) => {
         const pane = paneRef.current;
         if (!pane)

package/dist/components/canvas/NodeRenderer.d.ts

@@ -14,6 +14,9 @@ interface NodeRendererProps {
 /**
  * Renders nodes from data: maps each `node.type` to its registered component and
  * wraps it in a positioned, focusable, draggable shell.
+ *
+ * Memoized (as is each `NodeWrapper`): viewport-only canvas renders bail here
+ * entirely, and a graph update re-renders only the nodes whose objects changed.
  */
-export declare function NodeRenderer({ nodes, nodeTypes, autoConnect, onNodeChanges, onSelectNode, onNodeClick, }: NodeRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare const NodeRenderer: React.NamedExoticComponent<NodeRendererProps>;
 export {};

package/dist/components/canvas/NodeRenderer.js

@@ -1,9 +1,10 @@
+"use client";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useCallback, useRef, useEffect } from 'react';
+import React__default, { useCallback, useRef, useEffect } from 'react';
 import { PlusIcon } from '@heroicons/react/16/solid';
 import { cn } from '../../utils/cn.js';
 import { NodeIdProvider } from './context/NodeIdContext.js';
-import { useNodeCanvasContext } from './context/CanvasContext.js';
+import { useCanvasApi } from './context/CanvasContext.js';
 import { useHandleRegistry, handleKey } from './context/HandleRegistry.js';
 import { useNodeDrag } from './hooks/useNodeDrag.js';
 import { useConnection } from './hooks/useConnection.js';
@@ -11,8 +12,11 @@ import { useConnection } from './hooks/useConnection.js';
 /**
  * Renders nodes from data: maps each `node.type` to its registered component and
  * wraps it in a positioned, focusable, draggable shell.
+ *
+ * Memoized (as is each `NodeWrapper`): viewport-only canvas renders bail here
+ * entirely, and a graph update re-renders only the nodes whose objects changed.
  */
-function NodeRenderer({ nodes, nodeTypes, autoConnect, onNodeChanges, onSelectNode, onNodeClick, }) {
+const NodeRenderer = React__default.memo(function NodeRenderer({ nodes, nodeTypes, autoConnect, onNodeChanges, onSelectNode, onNodeClick, }) {
     return (jsx(Fragment, { children: nodes.map((node) => {
             const NodeComponent = nodeTypes[node.type];
             if (process.env.NODE_ENV !== "production" && !NodeComponent) {
@@ -22,7 +26,8 @@ function NodeRenderer({ nodes, nodeTypes, autoConnect, onNodeChanges, onSelectNo
                 return null;
             return (jsx(NodeWrapper, { node: node, NodeComponent: NodeComponent, autoConnect: autoConnect, emit: onNodeChanges, onSelect: onSelectNode, onNodeClick: onNodeClick }, node.id));
         }) }));
-}
+});
+NodeRenderer.displayName = "NodeRenderer";
 const AUTO_SIDES = ["top", "right", "bottom", "left"];
 const AUTO_SIDE_CLASSES = {
     top: "top-0 left-1/2 -translate-x-1/2 -translate-y-1/2",
@@ -39,7 +44,7 @@ const AUTO_SIDE_CLASSES = {
 function AutoHandle({ nodeId, position }) {
     const ref = useRef(null);
     const { register, unregister } = useHandleRegistry();
-    const { viewportRef, tool, locked } = useNodeCanvasContext();
+    const { viewportRef, tool, locked } = useCanvasApi();
     const handleId = `__${position}`;
     const { onPointerDown } = useConnection({ nodeId, handleId, type: "source", kind: "auto" });
     const disabled = tool === "pan" || locked;
@@ -73,11 +78,14 @@ function AutoHandle({ nodeId, position }) {
             unregister(nodeId, handleKey("source", handleId));
         };
     }, [nodeId, handleId, position, register, unregister, viewportRef]);
-    return (jsx("button", { ref: ref, type: "button", "data-flikkui-handle": "", "data-node-id": nodeId, "data-handle-type": "source", "data-handle-id": handleId, "data-handle-kind": "auto", "aria-label": `Connect from ${position}`, className: cn("nodrag absolute z-20 grid place-items-center size-4 rounded-full", "bg-[var(--color-primary)] text-white shadow-md ring-2 ring-[var(--color-surface)] cursor-crosshair", "opacity-0 scale-75 pointer-events-none transition-[opacity,transform,box-shadow] duration-150 ease-out", "hover:scale-110 hover:shadow-lg hover:ring-4 active:scale-95", !disabled &&
+    return (jsx("button", { ref: ref, type: "button", "data-flikkui-handle": "", "data-node-id": nodeId, "data-handle-type": "source", "data-handle-id": handleId, "data-handle-kind": "auto", "aria-label": `Connect from ${position}`, className: cn("nodrag absolute z-20 grid place-items-center size-4 rounded-full", "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] shadow-md ring-2 ring-[var(--color-surface)] cursor-crosshair", "opacity-0 scale-75 pointer-events-none transition-[opacity,transform,box-shadow] duration-150 ease-out", "hover:scale-110 hover:shadow-lg hover:ring-4 active:scale-95", !disabled &&
             "group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:scale-100 group-focus-within:pointer-events-auto", AUTO_SIDE_CLASSES[position]), onPointerDown: disabled ? undefined : onPointerDown, children: jsx(PlusIcon, { className: "size-2.5" }) }));
 }
-function NodeWrapper({ node, NodeComponent, autoConnect, emit, onSelect, onNodeClick, }) {
-    const { tool } = useNodeCanvasContext();
+// Memoized so unrelated graph updates (another node's data/position, selection
+// elsewhere) skip this node: `node` identity is preserved by applyNodeChanges,
+// and every callback prop is kept stable by NodeCanvas.
+const NodeWrapper = React__default.memo(function NodeWrapper({ node, NodeComponent, autoConnect, emit, onSelect, onNodeClick, }) {
+    const { tool } = useCanvasApi();
     const getNode = useCallback(() => node, [node]);
     const { dragging, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag({
         nodeId: node.id,
@@ -112,6 +120,7 @@ function NodeWrapper({ node, NodeComponent, autoConnect, emit, onSelect, onNodeC
         // double frame.
         dragging && "opacity-95 shadow-[0_18px_40px_rgba(0,0,0,0.16)]", (selected || dragging) && "z-10"), style: { transform: `translate(${node.position.x}px, ${node.position.y}px)` }, role: "group", "aria-roledescription": "node", "aria-label": `${node.type} node`, "data-flikkui-node": node.id, "data-selected": selected || undefined, "data-dragging": dragging || undefined, tabIndex: 0, onPointerDown: handlePointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onKeyDown: handleKeyDown, onClick: onNodeClick ? (e) => onNodeClick(e, node) : undefined, children: jsxs(NodeIdProvider, { value: node.id, children: [jsx(NodeComponent, { id: node.id, type: node.type, data: node.data, selected: selected, position: node.position, dragging: dragging }), autoConnect &&
                     AUTO_SIDES.map((side) => (jsx(AutoHandle, { nodeId: node.id, position: side }, side)))] }) }));
-}
+});
+NodeWrapper.displayName = "NodeWrapper";
 
 export { NodeRenderer };

package/dist/components/canvas/changes.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/canvas/context/CanvasContext.d.ts

@@ -27,6 +27,15 @@ export interface CanvasContextValue {
     setTool: (tool: CanvasTool) => void;
 }
 export type CanvasTool = "select" | "pan";
-export declare const CanvasProvider: React.Provider<CanvasContextValue | undefined>;
+/** Per-frame slice: changes on every graph or viewport update. */
+export type CanvasStateValue = Pick<CanvasContextValue, "nodes" | "viewport" | "flowToScreen" | "screenToFlow">;
+/** Stable slice: refs, setters, and slow-moving interaction flags. */
+export type CanvasApiValue = Omit<CanvasContextValue, keyof CanvasStateValue>;
+export declare const CanvasStateProvider: React.Provider<CanvasStateValue | undefined>;
+export declare const CanvasApiProvider: React.Provider<CanvasApiValue | undefined>;
+/** Internal: per-frame canvas data (`nodes`, `viewport`, transforms). Throws outside `<NodeCanvas>`. */
+export declare function useCanvasState(): CanvasStateValue;
+/** Internal: stable canvas API (refs, setters, `locked`/`tool`/`snapGrid`). Throws outside `<NodeCanvas>`. */
+export declare function useCanvasApi(): CanvasApiValue;
 /** Access the canvas viewport + coordinate transforms. Throws outside `<NodeCanvas>`. */
 export declare function useNodeCanvasContext(): CanvasContextValue;

package/dist/components/canvas/context/CanvasContext.js

@@ -1,14 +1,34 @@
-import { createContext, useContext } from 'react';
+"use client";
+import { createContext, useContext, useMemo } from 'react';
 
-const CanvasContext = createContext(undefined);
-const CanvasProvider = CanvasContext.Provider;
-/** Access the canvas viewport + coordinate transforms. Throws outside `<NodeCanvas>`. */
-function useNodeCanvasContext() {
-    const ctx = useContext(CanvasContext);
+const CanvasStateContext = createContext(undefined);
+const CanvasApiContext = createContext(undefined);
+const CanvasStateProvider = CanvasStateContext.Provider;
+const CanvasApiProvider = CanvasApiContext.Provider;
+/** Internal: per-frame canvas data (`nodes`, `viewport`, transforms). Throws outside `<NodeCanvas>`. */
+function useCanvasState() {
+    const ctx = useContext(CanvasStateContext);
+    if (!ctx) {
+        throw new Error("NodeCanvas compound parts must be used within <NodeCanvas>");
+    }
+    return ctx;
+}
+/** Internal: stable canvas API (refs, setters, `locked`/`tool`/`snapGrid`). Throws outside `<NodeCanvas>`. */
+function useCanvasApi() {
+    const ctx = useContext(CanvasApiContext);
     if (!ctx) {
         throw new Error("NodeCanvas compound parts must be used within <NodeCanvas>");
     }
     return ctx;
 }
+/** Access the canvas viewport + coordinate transforms. Throws outside `<NodeCanvas>`. */
+function useNodeCanvasContext() {
+    const api = useContext(CanvasApiContext);
+    const state = useContext(CanvasStateContext);
+    if (!api || !state) {
+        throw new Error("NodeCanvas compound parts must be used within <NodeCanvas>");
+    }
+    return useMemo(() => ({ ...api, ...state }), [api, state]);
+}
 
-export { CanvasProvider, useNodeCanvasContext };
+export { CanvasApiProvider, CanvasStateProvider, useCanvasApi, useCanvasState, useNodeCanvasContext };

package/dist/components/canvas/context/ConnectionContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from 'react';
 
 const ConnectionActionsContext = createContext(undefined);

package/dist/components/canvas/context/HandleRegistry.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from 'react';
 
 const HandleRegistryContext = createContext(undefined);

package/dist/components/canvas/context/InteractionContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from 'react';
 
 const InteractionContext = createContext(undefined);

package/dist/components/canvas/context/NodeIdContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from 'react';
 
 /** Provides the current node's id to anything rendered inside it (e.g. `Handle`). */

package/dist/components/canvas/hooks/useConnection.js

@@ -1,3 +1,4 @@
+"use client";
 import { useConnectionActions } from '../context/ConnectionContext.js';
 
 /**

package/dist/components/canvas/hooks/useMarquee.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useEffect } from 'react';
 
 const IGNORE = "[data-flikkui-node],[data-flikkui-handle],[data-flikkui-edge],[data-flikkui-controls],[data-flikkui-nopan],[data-flikkui-portal]";

package/dist/components/canvas/hooks/useNodeDrag.js

@@ -1,5 +1,6 @@
+"use client";
 import { useState, useRef } from 'react';
-import { useNodeCanvasContext } from '../context/CanvasContext.js';
+import { useCanvasApi } from '../context/CanvasContext.js';
 import { useCanvasInteraction } from '../context/InteractionContext.js';
 import { isEditableTarget } from '../utils.js';
 
@@ -22,7 +23,7 @@ const DRAG_THRESHOLD_PX = 3;
  */
 function useNodeDrag(params) {
     const { nodeId, getNode, emit } = params;
-    const { viewportRef, locked, snapGrid, tool } = useNodeCanvasContext();
+    const { viewportRef, locked, snapGrid, tool } = useCanvasApi();
     const { setInteracting } = useCanvasInteraction();
     const [dragging, setDragging] = useState(false);
     const snapPoint = (x, y) => snapGrid

package/dist/components/canvas/hooks/usePanZoom.js

@@ -1,3 +1,4 @@
+"use client";
 import { useEffect } from 'react';
 import { isEditableTarget, clamp } from '../utils.js';
 
@@ -103,7 +104,12 @@ function usePanZoom(params) {
                 return;
             panning = true;
             last = { x: e.clientX, y: e.clientY };
-            pane.setPointerCapture(e.pointerId);
+            try {
+                pane.setPointerCapture(e.pointerId);
+            }
+            catch (_a) {
+                /* capture unsupported / pointer inactive — pan still works via bubbling */
+            }
             pane.style.cursor = "grabbing";
         };
         const onPointerMove = (e) => {

package/dist/components/canvas/hooks/useViewport.js

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useCallback } from 'react';
 import { clamp } from '../utils.js';
 

package/dist/components/canvas/layout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/canvas/utils.test.d.ts

@@ -0,0 +1 @@
+export {};