seat-editor 3.4.8 → 3.5.0

package/dist/features/view-only-6/use-connection-graph.d.ts

@@ -0,0 +1,26 @@
+import { NodeType } from "./utils";
+import { EdgeType } from "./connection-layer";
+export type UseConnectionGraphOptions = {
+    svgRef: React.RefObject<SVGSVGElement>;
+    getNodeById: (id: string) => NodeType | null;
+    onEdgesChange?: (edges: EdgeType[]) => void;
+};
+export declare const useConnectionGraph: ({ svgRef, getNodeById, onEdgesChange, }: UseConnectionGraphOptions) => {
+    edges: EdgeType[];
+    setEdges: import("react").Dispatch<import("react").SetStateAction<EdgeType[]>>;
+    selectedEdge: string;
+    connecting: {
+        fromId: string;
+    };
+    mousePos: {
+        x: number;
+        y: number;
+    };
+    startConnect: (fromId: string) => void;
+    endConnect: (toId: string) => void;
+    cancelConnect: () => void;
+    selectEdge: (edgeId: string) => void;
+    deleteEdge: (edgeId: string) => void;
+    clearSelection: () => void;
+    onMouseMove: (e: React.MouseEvent<SVGSVGElement> | MouseEvent) => void;
+};

package/dist/features/view-only-6/use-connection-graph.js

@@ -0,0 +1,103 @@
+// hooks/use-connection-graph.ts
+import { useCallback, useEffect, useState } from "react";
+export const useConnectionGraph = ({ svgRef, getNodeById, onEdgesChange, }) => {
+    const [edges, setEdges] = useState([]);
+    const [selectedEdge, setSelectedEdge] = useState(null);
+    const [connecting, setConnecting] = useState(null);
+    const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+    // Notify parent setiap edges berubah
+    useEffect(() => {
+        onEdgesChange === null || onEdgesChange === void 0 ? void 0 : onEdgesChange(edges);
+    }, [edges]);
+    // Keyboard: Delete/Backspace → hapus edge, Escape → cancel connect
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            const tag = e.target.tagName.toLowerCase();
+            if (tag === "input" || tag === "textarea")
+                return;
+            if ((e.key === "Delete" || e.key === "Backspace") && selectedEdge) {
+                deleteEdge(selectedEdge);
+            }
+            if (e.key === "Escape") {
+                setConnecting(null);
+                setSelectedEdge(null);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [selectedEdge]);
+    // Convert client coords → SVG coords
+    const getSVGPoint = useCallback((clientX, clientY) => {
+        var _a;
+        const svg = svgRef.current;
+        if (!svg)
+            return { x: 0, y: 0 };
+        const pt = svg.createSVGPoint();
+        pt.x = clientX;
+        pt.y = clientY;
+        const svgP = pt.matrixTransform((_a = svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        return { x: svgP.x, y: svgP.y };
+    }, [svgRef]);
+    // ── Mouse move ───────────────────────────────────────────────────
+    const onMouseMove = useCallback((e) => {
+        const clientX = "clientX" in e ? e.clientX : 0;
+        const clientY = "clientY" in e ? e.clientY : 0;
+        setMousePos(getSVGPoint(clientX, clientY));
+    }, [getSVGPoint]);
+    // ── Connect ──────────────────────────────────────────────────────
+    const startConnect = useCallback((fromId) => {
+        setConnecting({ fromId });
+        setSelectedEdge(null);
+    }, []);
+    const endConnect = useCallback((toId) => {
+        if (!connecting || connecting.fromId === toId) {
+            setConnecting(null);
+            return;
+        }
+        const fromNode = getNodeById(connecting.fromId);
+        const toNode = getNodeById(toId);
+        if (!fromNode || !toNode) {
+            setConnecting(null);
+            return;
+        }
+        setEdges((prev) => {
+            const exists = prev.find((e) => (e.from === connecting.fromId && e.to === toId) ||
+                (e.from === toId && e.to === connecting.fromId));
+            if (exists)
+                return prev;
+            return [
+                ...prev,
+                { id: `edge-${Date.now()}`, from: connecting.fromId, to: toId },
+            ];
+        });
+        setConnecting(null);
+    }, [connecting, getNodeById]);
+    const cancelConnect = useCallback(() => setConnecting(null), []);
+    // ── Edge select / delete ─────────────────────────────────────────
+    const selectEdge = useCallback((edgeId) => {
+        setSelectedEdge(edgeId);
+    }, []);
+    const deleteEdge = useCallback((edgeId) => {
+        setEdges((prev) => prev.filter((e) => e.id !== edgeId));
+        setSelectedEdge(null);
+    }, []);
+    const clearSelection = useCallback(() => {
+        setSelectedEdge(null);
+    }, []);
+    return {
+        edges,
+        setEdges,
+        selectedEdge,
+        connecting,
+        mousePos,
+        // actions
+        startConnect,
+        endConnect,
+        cancelConnect,
+        selectEdge,
+        deleteEdge,
+        clearSelection,
+        // svg handlers
+        onMouseMove,
+    };
+};

package/dist/features/view-only-6/utils.d.ts

@@ -0,0 +1,66 @@
+export declare const GRID_SIZE = 20;
+export declare const NODE_WIDTH = 120;
+export declare const NODE_HEIGHT = 50;
+export declare const snap: (v: number) => number;
+export type EdgeType = {
+    id: string;
+    from: string;
+    to: string;
+};
+export type NodeType = {
+    id: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    rotation?: number;
+};
+/**
+ * Rotate point (px, py) sekitar origin (0,0) sebesar deg derajat.
+ */
+export declare const rotatePoint: (px: number, py: number, deg: number) => {
+    x: number;
+    y: number;
+};
+/**
+ * Hitung titik edge pada sisi rect node yang menghadap ke arah `to`,
+ * dengan mempertimbangkan rotation node.
+ */
+export declare const getRectEdge: (from: {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    rotation?: number;
+}, to: {
+    x: number;
+    y: number;
+}, width: number, height: number) => {
+    x: number;
+    y: number;
+};
+/**
+ * Build cubic bezier path dari start ke end.
+ * Control points dihitung otomatis berdasarkan arah dominan.
+ *
+ *   Horizontal dominan: CP horizontal (kiri-kanan)
+ *   Vertikal dominan:   CP vertikal (atas-bawah)
+ */
+export declare const buildCurvePath: (start: {
+    x: number;
+    y: number;
+}, end: {
+    x: number;
+    y: number;
+}) => string;
+/**
+ * Hitung arah arrow dari CP2 → end point
+ * agar panah sejajar dengan ujung kurva.
+ */
+export declare const getCurveEndAngle: (start: {
+    x: number;
+    y: number;
+}, end: {
+    x: number;
+    y: number;
+}) => number;

package/dist/features/view-only-6/utils.js

@@ -0,0 +1,96 @@
+// utils.ts
+export const GRID_SIZE = 20;
+export const NODE_WIDTH = 120;
+export const NODE_HEIGHT = 50;
+export const snap = (v) => Math.round(v / GRID_SIZE) * GRID_SIZE;
+/**
+ * Rotate point (px, py) sekitar origin (0,0) sebesar deg derajat.
+ */
+export const rotatePoint = (px, py, deg) => {
+    const rad = (deg * Math.PI) / 180;
+    return {
+        x: px * Math.cos(rad) - py * Math.sin(rad),
+        y: px * Math.sin(rad) + py * Math.cos(rad),
+    };
+};
+/**
+ * Hitung titik edge pada sisi rect node yang menghadap ke arah `to`,
+ * dengan mempertimbangkan rotation node.
+ */
+export const getRectEdge = (from, to, width, height) => {
+    var _a, _b, _c;
+    const w = (_a = from.width) !== null && _a !== void 0 ? _a : NODE_WIDTH;
+    const h = (_b = from.height) !== null && _b !== void 0 ? _b : NODE_HEIGHT;
+    const rotation = (_c = from.rotation) !== null && _c !== void 0 ? _c : 0;
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    if (dx === 0 && dy === 0)
+        return { x: from.x, y: from.y };
+    const angle = Math.atan2(dy, dx);
+    // Un-rotate arah ke local space node
+    const rad = -(rotation * Math.PI) / 180;
+    const localAngle = angle + rad;
+    const absCos = Math.abs(Math.cos(localAngle));
+    const absSin = Math.abs(Math.sin(localAngle));
+    const offset = (h / 2) * absCos <= (w / 2) * absSin
+        ? (h / 2) / absSin
+        : (w / 2) / absCos;
+    const localEdgeX = Math.cos(localAngle) * offset;
+    const localEdgeY = Math.sin(localAngle) * offset;
+    // Re-rotate balik ke world space
+    const worldEdge = rotatePoint(localEdgeX, localEdgeY, rotation);
+    return {
+        x: snap(from.x + worldEdge.x),
+        y: snap(from.y + worldEdge.y),
+    };
+};
+/**
+ * Build cubic bezier path dari start ke end.
+ * Control points dihitung otomatis berdasarkan arah dominan.
+ *
+ *   Horizontal dominan: CP horizontal (kiri-kanan)
+ *   Vertikal dominan:   CP vertikal (atas-bawah)
+ */
+export const buildCurvePath = (start, end) => {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const absDx = Math.abs(dx);
+    const absDy = Math.abs(dy);
+    // Kekuatan lengkungan — makin jauh makin melengkung, min 60px
+    const strength = Math.max(Math.max(absDx, absDy) * 0.5, 60);
+    let cp1;
+    let cp2;
+    if (absDx >= absDy) {
+        // Dominan horizontal → CP keluar ke kiri/kanan
+        cp1 = { x: start.x + strength, y: start.y };
+        cp2 = { x: end.x - strength, y: end.y };
+    }
+    else {
+        // Dominan vertikal → CP keluar ke atas/bawah
+        cp1 = { x: start.x, y: start.y + strength };
+        cp2 = { x: end.x, y: end.y - strength };
+    }
+    return `M ${start.x} ${start.y} C ${cp1.x} ${cp1.y}, ${cp2.x} ${cp2.y}, ${end.x} ${end.y}`;
+};
+/**
+ * Hitung arah arrow dari CP2 → end point
+ * agar panah sejajar dengan ujung kurva.
+ */
+export const getCurveEndAngle = (start, end) => {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const absDx = Math.abs(dx);
+    const absDy = Math.abs(dy);
+    const strength = Math.max(Math.max(absDx, absDy) * 0.5, 60);
+    let cp2;
+    if (absDx >= absDy) {
+        cp2 = { x: end.x - strength, y: end.y };
+    }
+    else {
+        cp2 = { x: end.x, y: end.y - strength };
+    }
+    // Sudut dari CP2 ke end
+    const adx = end.x - cp2.x;
+    const ady = end.y - cp2.y;
+    return (Math.atan2(ady, adx) * 180) / Math.PI;
+};

package/dist/features/view-only-7/connect-handle.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    cx: number;
+    cy: number;
+    width: number;
+    height: number;
+    nodeId: string;
+    rotation?: number;
+    isConnecting: boolean;
+    onStartConnect: (nodeId: string) => void;
+    onEndConnect: (nodeId: string) => void;
+};
+export declare const ConnectHandle: React.FC<Props>;
+export {};

package/dist/features/view-only-7/connect-handle.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, // ← tambah ini
+isConnecting, onStartConnect, onEndConnect, }) => {
+    const hw = width / 2;
+    const hh = height / 2;
+    // Tombol ⊕ di pojok kanan atas (dalam local space)
+    const btnLocalX = hw - 2;
+    const btnLocalY = -hh - 8;
+    return (
+    // Semua di-wrap dalam g dengan translate ke center + rotate
+    // Sama persis seperti struktur render node aslinya
+    _jsx("g", { transform: `translate(${cx}, ${cy}) rotate(${rotation})`, children: isConnecting ? (
+        // Mode connecting: overlay seluruh node
+        _jsx("rect", { x: -hw - 4, y: -hh - 4, width: width + 8, height: height + 8, fill: "transparent", stroke: "#a78bfa", strokeWidth: 1.5, strokeDasharray: "4 2", rx: 4, style: { cursor: "crosshair" }, onMouseDown: (e) => {
+                e.stopPropagation();
+                onEndConnect(nodeId);
+            } })) : (
+        // Tombol ⊕ — posisi relatif dari center node
+        _jsxs("g", { transform: `translate(${btnLocalX}, ${btnLocalY})`, style: { cursor: "crosshair" }, onMouseDown: (e) => {
+                e.stopPropagation();
+                onStartConnect(nodeId);
+            }, children: [_jsx("circle", { r: 8, fill: "#0a0e1a", stroke: "#38bdf8", strokeWidth: 1.2, opacity: 0.9 }), _jsx("text", { textAnchor: "middle", dominantBaseline: "middle", fill: "#38bdf8", fontSize: 11, fontWeight: 700, style: { pointerEvents: "none", userSelect: "none" }, children: "\u2295" })] })) }));
+};

package/dist/features/view-only-7/connect-handle.jsx

@@ -0,0 +1,30 @@
+export const ConnectHandle = ({ cx, cy, width, height, nodeId, rotation = 0, // ← tambah ini
+isConnecting, onStartConnect, onEndConnect, }) => {
+    const hw = width / 2;
+    const hh = height / 2;
+    // Tombol ⊕ di pojok kanan atas (dalam local space)
+    const btnLocalX = hw - 2;
+    const btnLocalY = -hh - 8;
+    return (
+    // Semua di-wrap dalam g dengan translate ke center + rotate
+    // Sama persis seperti struktur render node aslinya
+    <g transform={`translate(${cx}, ${cy}) rotate(${rotation})`}>
+      
+      {isConnecting ? (
+        // Mode connecting: overlay seluruh node
+        <rect x={-hw - 4} y={-hh - 4} width={width + 8} height={height + 8} fill="transparent" stroke="#a78bfa" strokeWidth={1.5} strokeDasharray="4 2" rx={4} style={{ cursor: "crosshair" }} onMouseDown={(e) => {
+                e.stopPropagation();
+                onEndConnect(nodeId);
+            }}/>) : (
+        // Tombol ⊕ — posisi relatif dari center node
+        <g transform={`translate(${btnLocalX}, ${btnLocalY})`} style={{ cursor: "crosshair" }} onMouseDown={(e) => {
+                e.stopPropagation();
+                onStartConnect(nodeId);
+            }}>
+          <circle r={8} fill="#0a0e1a" stroke="#38bdf8" strokeWidth={1.2} opacity={0.9}/>
+          <text textAnchor="middle" dominantBaseline="middle" fill="#38bdf8" fontSize={11} fontWeight={700} style={{ pointerEvents: "none", userSelect: "none" }}>
+            ⊕
+          </text>
+        </g>)}
+    </g>);
+};

package/dist/features/view-only-7/connection-layer.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { NodeType } from "./utils";
+export type EdgeType = {
+    id: string;
+    from: string;
+    to: string;
+};
+type Props = {
+    edges: EdgeType[];
+    selectedEdge: string | null;
+    connecting: {
+        fromId: string;
+    } | null;
+    mousePos: {
+        x: number;
+        y: number;
+    };
+    getNodeById: (id: string) => NodeType | null;
+    onSelectEdge: (edgeId: string) => void;
+};
+export declare const ConnectionLayer: React.FC<Props>;
+export {};

package/dist/features/view-only-7/connection-layer.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// components/ConnectionLayer.tsx
+import { useMemo, useState } from "react";
+import { buildCurvePath, getCurveEndAngle, getRectEdge, NODE_WIDTH, NODE_HEIGHT, } from "./utils";
+// ─── Constants ────────────────────────────────────────────────────────────────
+const LEVEL_COLORS = [
+    "#22c55e",
+    "#f59e0b",
+    "#f97316",
+    "#ef4444",
+    "#a78bfa",
+    "#38bdf8",
+];
+const getLevelColor = (level) => LEVEL_COLORS[Math.min(level, LEVEL_COLORS.length - 1)];
+// ─── BFS flood fill ───────────────────────────────────────────────────────────
+const floodFill = (seedIds, edges) => {
+    const levelMap = new Map();
+    const queue = [];
+    seedIds.forEach((id) => { levelMap.set(id, 0); queue.push({ id, level: 0 }); });
+    while (queue.length > 0) {
+        const { id, level } = queue.shift();
+        edges.forEach((edge) => {
+            const neighbors = [];
+            if (edge.from === id)
+                neighbors.push(edge.to);
+            if (edge.to === id)
+                neighbors.push(edge.from);
+            neighbors.forEach((nId) => {
+                if (!levelMap.has(nId)) {
+                    levelMap.set(nId, level + 1);
+                    queue.push({ id: nId, level: level + 1 });
+                }
+            });
+        });
+    }
+    return levelMap;
+};
+// ─── Group edges by source ────────────────────────────────────────────────────
+const groupBySource = (edges) => {
+    const map = new Map();
+    edges.forEach((edge) => {
+        if (!map.has(edge.from))
+            map.set(edge.from, []);
+        map.get(edge.from).push(edge);
+    });
+    return map;
+};
+// ─── Component ────────────────────────────────────────────────────────────────
+export const ConnectionLayer = ({ edges, selectedEdge, connecting, mousePos, getNodeById, onSelectEdge,
+// onDeleteEdge,
+ }) => {
+    const [hoveredEdge, setHoveredEdge] = useState(null);
+    // ── Flood fill highlight ──────────────────────────────────────────
+    const nodeHighlightMap = useMemo(() => {
+        if (!selectedEdge)
+            return new Map();
+        const sel = edges.find((e) => e.id === selectedEdge);
+        if (!sel)
+            return new Map();
+        return floodFill([sel.from, sel.to], edges);
+    }, [selectedEdge, edges]);
+    // ── Group by source for shared stem ──────────────────────────────
+    const sourceGroups = useMemo(() => groupBySource(edges), [edges]);
+    // ── Pre-compute curve data per edge ──────────────────────────────
+    const curveData = useMemo(() => {
+        const map = new Map();
+        edges.forEach((edge) => {
+            const fromNode = getNodeById(edge.from);
+            const toNode = getNodeById(edge.to);
+            if (!fromNode || !toNode)
+                return;
+            const start = getRectEdge(fromNode, toNode, fromNode.width, fromNode.height);
+            const end = getRectEdge(toNode, fromNode, toNode.width, toNode.height);
+            const pathD = buildCurvePath(start, end);
+            const angle = getCurveEndAngle(start, end);
+            // Midpoint arc/elbow → titik belok pertama (elbow kiri/atas)
+            const dx = end.x - start.x;
+            const dy = end.y - start.y;
+            const absDx = Math.abs(dx);
+            const absDy = Math.abs(dy);
+            let midX;
+            let midY;
+            if (absDx >= absDy) {
+                // Dominan horizontal → elbow di (midX, start.y)
+                midX = (start.x + end.x) / 2;
+                midY = (start.y + end.y) / 2;
+            }
+            else {
+                // Dominan vertikal → elbow di (start.x, midY)
+                midX = (start.x + end.x) / 2;
+                midY = (start.y + end.y) / 2;
+            }
+            map.set(edge.id, { start, end, pathD, angle, midX, midY });
+        });
+        return map;
+    }, [edges, getNodeById]);
+    // ── Shared stem exit point per source ────────────────────────────
+    const stemData = useMemo(() => {
+        const map = new Map();
+        sourceGroups.forEach((groupEdges, fromId) => {
+            if (groupEdges.length <= 1)
+                return;
+            const sourceNode = getNodeById(fromId);
+            if (!sourceNode)
+                return;
+            const exits = groupEdges
+                .map((edge) => {
+                const toNode = getNodeById(edge.to);
+                if (!toNode)
+                    return null;
+                return getRectEdge(sourceNode, toNode, sourceNode.width, sourceNode.height);
+            })
+                .filter(Boolean);
+            if (exits.length === 0)
+                return;
+            map.set(fromId, {
+                x: exits.reduce((s, p) => s + p.x, 0) / exits.length,
+                y: exits.reduce((s, p) => s + p.y, 0) / exits.length,
+            });
+        });
+        return map;
+    }, [sourceGroups, getNodeById]);
+    return (_jsxs("g", { id: "connection-layer", children: [Array.from(nodeHighlightMap.entries()).map(([nodeId, level]) => {
+                var _a, _b, _c;
+                const node = getNodeById(nodeId);
+                if (!node)
+                    return null;
+                const w = (_a = node.width) !== null && _a !== void 0 ? _a : NODE_WIDTH;
+                const h = (_b = node.height) !== null && _b !== void 0 ? _b : NODE_HEIGHT;
+                const rotation = (_c = node.rotation) !== null && _c !== void 0 ? _c : 0;
+                const color = getLevelColor(level);
+                const padding = 4;
+                return (_jsxs("g", { transform: `translate(${node.x}, ${node.y}) rotate(${rotation})`, style: { pointerEvents: "none" }, children: [_jsx("rect", { x: -w / 2 - padding, y: -h / 2 - padding, width: w + padding * 2, height: h + padding * 2, fill: "none", stroke: color, strokeWidth: 8, rx: 5, opacity: 0.08 }), _jsx("rect", { x: -w / 2 - padding, y: -h / 2 - padding, width: w + padding * 2, height: h + padding * 2, fill: "none", stroke: color, strokeWidth: level === 0 ? 2.5 : 1.5, strokeDasharray: level === 0 ? "none" : "5 3", rx: 5, opacity: level === 0 ? 1 : 0.75 }), _jsxs("g", { transform: `translate(${w / 2 + padding - 2}, ${-h / 2 - padding})`, children: [_jsx("circle", { r: 7, fill: color, opacity: 0.9 }), _jsx("text", { textAnchor: "middle", dominantBaseline: "middle", fill: "white", fontSize: 7, fontFamily: "monospace", fontWeight: 700, style: { userSelect: "none" }, children: level })] })] }, `highlight-${nodeId}`));
+            }), Array.from(stemData.entries()).map(([fromId, stemExit]) => {
+                var _a;
+                const isStemOfSelected = selectedEdge && ((_a = edges.find((e) => e.id === selectedEdge)) === null || _a === void 0 ? void 0 : _a.from) === fromId;
+                const color = isStemOfSelected ? "#a78bfa" : "#38bdf8";
+                return (_jsxs("g", { style: { pointerEvents: "none" }, children: [_jsx("circle", { cx: stemExit.x, cy: stemExit.y, r: 5, fill: "#0f172a", stroke: color, strokeWidth: 1.5 }), _jsx("circle", { cx: stemExit.x, cy: stemExit.y, r: 2.5, fill: color })] }, `stem-dot-${fromId}`));
+            }), edges.map((edge) => {
+                const data = curveData.get(edge.id);
+                if (!data)
+                    return null;
+                const { pathD, angle, midX, midY } = data;
+                const isSel = selectedEdge === edge.id;
+                const isHov = hoveredEdge === edge.id;
+                const markerId = `conn-arrow-${edge.id}`;
+                const markerSelId = `conn-arrow-sel-${edge.id}`;
+                // Warna edge jika dalam network highlight
+                const fromLevel = nodeHighlightMap.get(edge.from);
+                const toLevel = nodeHighlightMap.get(edge.to);
+                const isInNetwork = fromLevel !== undefined && toLevel !== undefined;
+                const networkColor = isInNetwork
+                    ? getLevelColor(Math.max(fromLevel, toLevel))
+                    : "#38bdf8";
+                return (_jsxs("g", { children: [_jsx("defs", { children: _jsx("marker", { id: markerId, markerWidth: "8", markerHeight: "8", refX: "7", refY: "3", orient: `${angle}deg`, children: _jsx("path", { d: "M 0 0 L 8 3 L 0 6 Z", fill: isSel ? "#a78bfa" : isInNetwork && !isSel ? networkColor : "#38bdf8", opacity: 0.9 }) }) }), _jsx("path", { d: pathD, stroke: "transparent", strokeWidth: 14, fill: "none", style: { cursor: "pointer" }, onClick: (e) => { e.stopPropagation(); onSelectEdge(edge.id); }, onMouseEnter: () => setHoveredEdge(edge.id), onMouseLeave: () => setHoveredEdge(null) }), (isSel || isHov) && (_jsx("path", { d: pathD, stroke: isSel ? "#a78bfa" : "#38bdf8", strokeWidth: 8, fill: "none", opacity: isSel ? 0.12 : 0.06, style: { pointerEvents: "none" } })), _jsx("path", { d: pathD, stroke: isSel ? "#a78bfa" : isInNetwork && selectedEdge ? networkColor : "#38bdf8", strokeWidth: isSel ? 2 : isHov ? 2 : 1.5, fill: "none", opacity: selectedEdge && !isSel && !isInNetwork ? 0.25 : 0.9, markerEnd: `url(#${markerId})`, style: { pointerEvents: "none" } }), isSel && (_jsxs("g", { style: { pointerEvents: "none" }, children: [_jsx("rect", { x: midX - 16, y: midY - 10, width: 32, height: 18, rx: 4, fill: "#1e1b2e", stroke: "#a78bfa", strokeWidth: 1, opacity: 0.95 }), _jsx("text", { x: midX, y: midY, textAnchor: "middle", dominantBaseline: "middle", fill: "#a78bfa", fontSize: 9, fontFamily: "monospace", fontWeight: 600, children: "DEL" })] }))] }, edge.id));
+            }), connecting && (() => {
+                const fromNode = getNodeById(connecting.fromId);
+                if (!fromNode)
+                    return null;
+                const start = getRectEdge(fromNode, mousePos, fromNode.width, fromNode.height);
+                const pathD = buildCurvePath(start, mousePos);
+                const angle = getCurveEndAngle(start, mousePos);
+                return (_jsxs("g", { children: [_jsx("defs", { children: _jsx("marker", { id: "conn-preview-arrow", markerWidth: "8", markerHeight: "8", refX: "7", refY: "3", orient: `${angle}deg`, children: _jsx("path", { d: "M 0 0 L 8 3 L 0 6 Z", fill: "#a78bfa", opacity: 0.85 }) }) }), _jsx("path", { d: pathD, stroke: "#a78bfa", strokeWidth: 1.5, fill: "none", strokeDasharray: "6 3", markerEnd: "url(#conn-preview-arrow)", opacity: 0.8, style: { pointerEvents: "none" } })] }));
+            })()] }));
+};