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

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

@@ -0,0 +1,18 @@
+import type { ConnectionState } from "./context/ConnectionContext";
+import type { NodeCanvasEdge, NodeCanvasNode } from "./NodeCanvas.types";
+interface EdgeLayerProps {
+    nodes: NodeCanvasNode[];
+    edges: NodeCanvasEdge[];
+    connection: ConnectionState | null;
+    onSelectEdge: (id: string, additive: boolean) => void;
+    onDeleteEdge: (id: string) => void;
+}
+/**
+ * SVG layer (inside the zoom-scaled world) that draws every edge, the in-progress
+ * connection ghost, and a delete (×) button at the midpoint of hovered/selected
+ * edges. Anchors come from `node.position + handleOffset`, so edges stay locked to
+ * 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 {};

package/dist/components/canvas/EdgeLayer.js

@@ -0,0 +1,111 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { edgeMidpoint, Edge } from './Edge.js';
+import { useHandleRegistry } from './context/HandleRegistry.js';
+import { useNodeCanvasContext } from './context/CanvasContext.js';
+
+const SIDE_NORMAL = {
+    top: [0, -1],
+    right: [1, 0],
+    bottom: [0, 1],
+    left: [-1, 0],
+};
+/**
+ * SVG layer (inside the zoom-scaled world) that draws every edge, the in-progress
+ * connection ghost, and a delete (×) button at the midpoint of hovered/selected
+ * edges. Anchors come from `node.position + handleOffset`, so edges stay locked to
+ * 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 { handlesRef, version } = useHandleRegistry();
+    const { viewport } = useNodeCanvasContext();
+    const [hoveredEdge, setHoveredEdge] = useState(null);
+    const nodeMap = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+    const anchorAt = (node, h) => ({
+        point: { x: node.position.x + h.offset.x, y: node.position.y + h.offset.y },
+        position: h.position,
+    });
+    /** Node center (in flow coords), derived from the 4 auto-handle side-centers. */
+    const nodeCenter = (node) => {
+        var _a;
+        const auto = ((_a = handlesRef.current.get(node.id)) !== null && _a !== void 0 ? _a : []).filter((h) => h.kind === "auto");
+        if (auto.length) {
+            const sum = auto.reduce((a, h) => ({ x: a.x + h.offset.x, y: a.y + h.offset.y }), {
+                x: 0,
+                y: 0,
+            });
+            return { x: node.position.x + sum.x / auto.length, y: node.position.y + sum.y / auto.length };
+        }
+        return { x: node.position.x + 90, y: node.position.y + 40 };
+    };
+    /**
+     * Anchor an edge end. An explicit (non-auto) `<Handle>` is honored; otherwise the
+     * edge "floats" — it anchors to whichever auto-handle side faces `toward`, so edges
+     * route cleanly and re-route as nodes move.
+     */
+    const anchorFor = (nodeId, handleId, type, toward) => {
+        var _a;
+        const node = nodeMap.get(nodeId);
+        if (!node)
+            return null;
+        const list = (_a = handlesRef.current.get(nodeId)) !== null && _a !== void 0 ? _a : [];
+        const explicit = handleId
+            ? list.find((h) => h.id === handleId && h.kind !== "auto")
+            : list.find((h) => h.type === type && h.kind !== "auto");
+        if (explicit)
+            return anchorAt(node, explicit);
+        // Float: pick the auto-handle whose side best faces the other node.
+        const auto = list.filter((h) => h.kind === "auto");
+        if (auto.length) {
+            const center = nodeCenter(node);
+            const dir = { x: toward.x - center.x, y: toward.y - center.y };
+            let best = auto[0];
+            let bestDot = -Infinity;
+            for (const h of auto) {
+                const n = SIDE_NORMAL[h.position];
+                const dot = n[0] * dir.x + n[1] * dir.y;
+                if (dot > bestDot) {
+                    bestDot = dot;
+                    best = h;
+                }
+            }
+            return anchorAt(node, best);
+        }
+        return { point: { ...node.position }, position: type === "source" ? "right" : "left" };
+    };
+    const resolveEdge = (edge) => {
+        const sNode = nodeMap.get(edge.source);
+        const tNode = nodeMap.get(edge.target);
+        if (!sNode || !tNode)
+            return null;
+        const s = anchorFor(edge.source, edge.sourceHandle, "source", nodeCenter(tNode));
+        const t = anchorFor(edge.target, edge.targetHandle, "target", nodeCenter(sNode));
+        if (!s || !t)
+            return null;
+        return { s, t };
+    };
+    let ghost = null;
+    if (connection) {
+        // Ghost source floats toward the cursor.
+        ghost = anchorFor(connection.sourceNodeId, connection.sourceHandleId, connection.sourceType, connection.to);
+    }
+    return (jsxs("svg", { className: "absolute top-0 left-0 overflow-visible pointer-events-none", style: { width: 1, height: 1 }, children: [edges.map((edge) => {
+                var _a;
+                const resolved = resolveEdge(edge);
+                if (!resolved)
+                    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) => {
+                                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 }))] }));
+}
+
+export { EdgeLayer };

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

@@ -0,0 +1,11 @@
+import type { HandleProps } from "./NodeCanvas.types";
+/**
+ * A connection port, declared inside a custom node. Registers its center offset
+ * (in flow coords, relative to the node) so edges and connection drags anchor to
+ * `node.position + offset` — stable under pan/zoom/drag. Measured once after
+ * render and again only when the node's size changes.
+ */
+export declare function Handle({ type, id, position, isConnectable, className, style, children, }: HandleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Handle {
+    var displayName: string;
+}

package/dist/components/canvas/Handle.js

@@ -0,0 +1,63 @@
+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 { useConnection } from './hooks/useConnection.js';
+
+const SIDE_CLASSES = {
+    top: "top-0 left-1/2 -translate-x-1/2 -translate-y-1/2",
+    right: "right-0 top-1/2 translate-x-1/2 -translate-y-1/2",
+    bottom: "bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2",
+    left: "left-0 top-1/2 -translate-x-1/2 -translate-y-1/2",
+};
+/**
+ * A connection port, declared inside a custom node. Registers its center offset
+ * (in flow coords, relative to the node) so edges and connection drags anchor to
+ * `node.position + offset` — stable under pan/zoom/drag. Measured once after
+ * render and again only when the node's size changes.
+ */
+function Handle({ type, id, position = type === "source" ? "right" : "left", isConnectable = true, className, style, children, }) {
+    const nodeId = useNodeId();
+    const ref = useRef(null);
+    const { register, unregister } = useHandleRegistry();
+    const { viewportRef, locked } = useNodeCanvasContext();
+    const { onPointerDown } = useConnection({ nodeId, handleId: id, type });
+    const connectable = isConnectable && !locked;
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const nodeEl = el.closest("[data-flikkui-node]");
+        if (!nodeEl)
+            return;
+        const measure = () => {
+            const hr = el.getBoundingClientRect();
+            const nr = nodeEl.getBoundingClientRect();
+            const zoom = viewportRef.current.zoom || 1;
+            register(nodeId, {
+                id,
+                type,
+                position,
+                offset: {
+                    x: (hr.left + hr.width / 2 - nr.left) / zoom,
+                    y: (hr.top + hr.height / 2 - nr.top) / zoom,
+                },
+            });
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(nodeEl);
+        return () => {
+            ro.disconnect();
+            unregister(nodeId, handleKey(type, id));
+        };
+    }, [nodeId, id, type, position, register, unregister, viewportRef]);
+    return (jsx("div", { ref: ref, "data-flikkui-handle": "", "data-node-id": nodeId, "data-handle-type": type, "data-handle-id": id !== null && id !== void 0 ? id : "", className: cn("nodrag absolute z-10", children
+            ? "grid place-items-center"
+            : "size-3 rounded-full border-2 bg-[var(--color-surface)] border-[var(--color-primary)]", SIDE_CLASSES[position], connectable ? "cursor-crosshair" : "opacity-50", className), style: style, onPointerDown: connectable ? onPointerDown : undefined, children: children }));
+}
+Handle.displayName = "Handle";
+
+export { Handle };

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

@@ -0,0 +1,22 @@
+declare const POSITIONS: {
+    readonly "bottom-left": "bottom-4 left-4";
+    readonly "bottom-right": "bottom-4 right-4";
+    readonly "top-left": "top-4 left-4";
+    readonly "top-right": "top-4 right-4";
+};
+export interface MiniMapProps {
+    position?: keyof typeof POSITIONS;
+    width?: number;
+    height?: number;
+    className?: string;
+}
+/**
+ * Overview map: all nodes + the current viewport rectangle, scaled to fit. Click or
+ * drag inside it to recenter the canvas on that point. Pane-level chrome (`z-20`),
+ * opted out of canvas panning via `data-flikkui-nopan`.
+ */
+export declare function MiniMap({ position, width, height, className, }: MiniMapProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MiniMap {
+    var displayName: string;
+}
+export {};

package/dist/components/canvas/MiniMap.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useNodeCanvasContext } from './context/CanvasContext.js';
+
+const POSITIONS = {
+    "bottom-left": "bottom-4 left-4",
+    "bottom-right": "bottom-4 right-4",
+    "top-left": "top-4 left-4",
+    "top-right": "top-4 right-4",
+};
+/** Estimated node footprint (node sizes aren't measured yet — issue 4 fast-follow). */
+const NODE_W = 180;
+const NODE_H = 80;
+const PADDING = 40;
+/**
+ * Overview map: all nodes + the current viewport rectangle, scaled to fit. Click or
+ * drag inside it to recenter the canvas on that point. Pane-level chrome (`z-20`),
+ * opted out of canvas panning via `data-flikkui-nopan`.
+ */
+function MiniMap({ position = "bottom-left", width = 200, height = 140, className, }) {
+    var _a, _b;
+    const { nodes, viewport, setViewport, paneRef } = useNodeCanvasContext();
+    const svgRef = useRef(null);
+    const dragging = useRef(false);
+    const pane = paneRef.current;
+    const paneW = (_a = pane === null || pane === void 0 ? void 0 : pane.clientWidth) !== null && _a !== void 0 ? _a : 0;
+    const paneH = (_b = pane === null || pane === void 0 ? void 0 : pane.clientHeight) !== null && _b !== void 0 ? _b : 0;
+    // Current viewport rectangle in flow coords.
+    const vx = -viewport.x / viewport.zoom;
+    const vy = -viewport.y / viewport.zoom;
+    const vw = paneW / viewport.zoom;
+    const vh = paneH / viewport.zoom;
+    // Bounds = union of node bounds and the viewport rect, padded.
+    let minX = vx;
+    let minY = vy;
+    let maxX = vx + vw;
+    let maxY = vy + vh;
+    for (const n of nodes) {
+        minX = Math.min(minX, n.position.x);
+        minY = Math.min(minY, n.position.y);
+        maxX = Math.max(maxX, n.position.x + NODE_W);
+        maxY = Math.max(maxY, n.position.y + NODE_H);
+    }
+    minX -= PADDING;
+    minY -= PADDING;
+    maxX += PADDING;
+    maxY += PADDING;
+    const bw = Math.max(maxX - minX, 1);
+    const bh = Math.max(maxY - minY, 1);
+    const scale = Math.min(width / bw, height / bh);
+    const ox = (width - bw * scale) / 2;
+    const oy = (height - bh * scale) / 2;
+    const toMM = (x, y) => ({
+        x: (x - minX) * scale + ox,
+        y: (y - minY) * scale + oy,
+    });
+    const recenter = (clientX, clientY) => {
+        var _a;
+        const r = (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!r)
+            return;
+        const flowX = (clientX - r.left - ox) / scale + minX;
+        const flowY = (clientY - r.top - oy) / scale + minY;
+        setViewport((v) => ({
+            zoom: v.zoom,
+            x: paneW / 2 - flowX * v.zoom,
+            y: paneH / 2 - flowY * v.zoom,
+        }));
+    };
+    const onPointerDown = (e) => {
+        var _a;
+        e.stopPropagation();
+        dragging.current = true;
+        recenter(e.clientX, e.clientY);
+        try {
+            (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.setPointerCapture(e.pointerId);
+        }
+        catch (_b) {
+            /* pointer inactive — drag still tracked via pointermove */
+        }
+    };
+    const onPointerMove = (e) => {
+        if (dragging.current)
+            recenter(e.clientX, e.clientY);
+    };
+    const onPointerUp = (e) => {
+        var _a;
+        dragging.current = false;
+        try {
+            (_a = svgRef.current) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(e.pointerId);
+        }
+        catch (_b) {
+            /* noop */
+        }
+    };
+    const view = toMM(vx, vy);
+    return (jsx("div", { "data-flikkui-nopan": "", className: cn("absolute z-20 overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-overlay)] shadow-md", POSITIONS[position], className), style: { width, height }, children: jsxs("svg", { ref: svgRef, width: width, height: height, className: "cursor-pointer touch-none", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, children: [nodes.map((n) => {
+                    const p = toMM(n.position.x, n.position.y);
+                    return (jsx("rect", { x: p.x, y: p.y, width: NODE_W * scale, height: NODE_H * scale, rx: 2, className: cn(n.selected ? "fill-[var(--color-primary)]" : "fill-[var(--color-border)]") }, n.id));
+                }), jsx("rect", { x: view.x, y: view.y, width: vw * scale, height: vh * scale, className: "fill-[var(--color-primary)]/10 stroke-[var(--color-primary)]", strokeWidth: 1.5 })] }) }));
+}
+MiniMap.displayName = "MiniMap";
+
+export { MiniMap };

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { NodeCanvasProps } from "./NodeCanvas.types";
+/**
+ * The node-editor canvas: a pannable / zoomable viewport over an unbounded flow
+ * space. Renders nodes from `nodes` (via the `nodeTypes` registry) and edges from
+ * `edges`, supports drag-to-connect, and exposes everything through change-object
+ * callbacks. `children` are pane-level chrome (e.g. `Background`, controls) drawn
+ * over the canvas; nodes + edges live in the transformed world.
+ */
+export declare const NodeCanvas: React.ForwardRefExoticComponent<NodeCanvasProps & React.RefAttributes<HTMLDivElement>>;