@visualli/react 0.1.1

package/src/components/KonvaContainer.tsx

@@ -0,0 +1,255 @@
+// ─── KonvaContainer ──────────────────────────────────────────────────────────
+//
+// Renders a smooth dashed hull around a group of nodes with an inverse-scaled
+// pill label — matches the visualli.ai KonvaContainer exactly.
+//
+//   • 48-point ellipse sampling per node (not bounding box corners)
+//   • Graham-scan convex hull → 6-pass Chaikin smoothing
+//   • Dashed stroke "#747270", no fill
+//   • Pill label: parchment bg (#ddd9d0), Playpen Sans 800, inverse-zoom-scaled
+//   • Label anchored to the hull edge (bottom for horizontal, top for vertical)
+
+import React, { memo, useMemo } from 'react';
+import {
+  KGroup as Group,
+  KLine as Line,
+  KRect as Rect,
+  KText as Text,
+} from '../konvaCompat';
+import type { FlatNode } from '@visualli/core';
+import { NODE_HEIGHT, TEXT_LABEL_HIDE_BELOW_ZOOM } from '@visualli/core';
+import { useViewportStore }           from '../stores/useViewportStore';
+import {
+  CONTAINER_LABEL_BASE_FONT_PX,
+  computeNodeTextScreenScale,
+} from '../config/textScaling';
+
+// ── Constants (mirrors visualli.ai) ──────────────────────────────────────────
+
+const CONTAINER_PADDING   = 50;
+const CONTAINER_DASH      = [10, 5] as const;
+const LABEL_BG            = '#ddd9d0';
+const LABEL_BORDER_RADIUS = 20;
+const LABEL_FONT_SIZE     = CONTAINER_LABEL_BASE_FONT_PX;
+const LABEL_FONT_WEIGHT   = '800';
+const LABEL_FONT_FAMILY   = "'Playpen Sans', Quicksand, sans-serif";
+const LABEL_PAD_H         = 20;
+const LABEL_PAD_V         = 10;
+const LABEL_LINE_HEIGHT   = 1.2;
+// Max normalized blob extents — Shape 5 reaches ±1.275 X, ±1.234 Y
+const MAX_BLOB_EXTENT_X   = 1.275;
+const MAX_BLOB_EXTENT_Y   = 1.234;
+
+// ── Text measurement ──────────────────────────────────────────────────────────
+
+let _labelCtx: CanvasRenderingContext2D | null = null;
+function measureLabelBoxWidth(text: string, fontSize: number): number {
+  if (!_labelCtx) {
+    const c = document.createElement('canvas');
+    _labelCtx = c.getContext('2d');
+  }
+  if (!_labelCtx) return Math.ceil(text.length * fontSize * 0.65 + 2 * LABEL_PAD_H);
+  _labelCtx.font = `${LABEL_FONT_WEIGHT} ${fontSize}px ${LABEL_FONT_FAMILY}`;
+  return Math.ceil(_labelCtx.measureText(text).width + 2 * LABEL_PAD_H);
+}
+
+// ── Convex hull (Graham scan) ─────────────────────────────────────────────────
+
+type Pt = { x: number; y: number };
+
+function isLeftTurn(p1: Pt, p2: Pt, p3: Pt): boolean {
+  return (p2.x - p1.x) * (p3.y - p1.y) - (p2.y - p1.y) * (p3.x - p1.x) > 0;
+}
+
+function convexHull(points: Pt[]): Pt[] {
+  if (points.length < 3) return points;
+  let start = 0;
+  for (let i = 1; i < points.length; i++) {
+    if (points[i].y < points[start].y ||
+       (points[i].y === points[start].y && points[i].x < points[start].x)) start = i;
+  }
+  const sorted = [...points];
+  const sp = sorted.splice(start, 1)[0];
+  sorted.sort((a, b) => {
+    const da = Math.atan2(a.y - sp.y, a.x - sp.x);
+    const db = Math.atan2(b.y - sp.y, b.x - sp.x);
+    if (da !== db) return da - db;
+    return Math.hypot(a.x - sp.x, a.y - sp.y) - Math.hypot(b.x - sp.x, b.y - sp.y);
+  });
+  const hull: Pt[] = [sp, sorted[0]];
+  for (let i = 1; i < sorted.length; i++) {
+    while (hull.length > 1 && !isLeftTurn(hull[hull.length - 2], hull[hull.length - 1], sorted[i])) hull.pop();
+    hull.push(sorted[i]);
+  }
+  return hull;
+}
+
+// ── Chaikin smoothing (6 passes, returns flat [x,y,…] array) ─────────────────
+
+function chaikinSmooth(pts: Pt[], passes = 6): number[] {
+  let cur = pts;
+  for (let iter = 0; iter < passes; iter++) {
+    const next: Pt[] = [];
+    const n = cur.length;
+    for (let i = 0; i < n; i++) {
+      const a = cur[i], b = cur[(i + 1) % n];
+      next.push({ x: 0.75 * a.x + 0.25 * b.x, y: 0.75 * a.y + 0.25 * b.y });
+      next.push({ x: 0.25 * a.x + 0.75 * b.x, y: 0.25 * a.y + 0.75 * b.y });
+    }
+    cur = next;
+  }
+  return cur.flatMap(p => [p.x, p.y]);
+}
+
+// ── Hull edge Y at a given X (for label anchor) ───────────────────────────────
+
+function hullEdgeYAtX(points: number[], targetX: number, isBottom: boolean): number {
+  const n = points.length;
+  let result = isBottom ? -Infinity : Infinity;
+  for (let i = 0; i < n; i += 2) {
+    const x1 = points[i],     y1 = points[i + 1];
+    const x2 = points[(i + 2) % n], y2 = points[(i + 3) % n];
+    if ((x1 < targetX && x2 >= targetX) || (x2 < targetX && x1 >= targetX)) {
+      const t = (targetX - x1) / (x2 - x1);
+      const y = y1 + t * (y2 - y1);
+      if (isBottom) result = Math.max(result, y); else result = Math.min(result, y);
+    }
+  }
+  if (!isFinite(result)) {
+    for (let i = 1; i < n; i += 2) {
+      if (isBottom) result = Math.max(result, points[i]); else result = Math.min(result, points[i]);
+    }
+  }
+  return result;
+}
+
+// ── Hull calculation ──────────────────────────────────────────────────────────
+
+function calculateHull(
+  containerNodes: FlatNode[],
+): { points: number[]; anchorX: number; anchorEdgeY: number } | null {
+  if (containerNodes.length === 0) return null;
+
+  const NUM_SAMPLES = 48;
+  const samples: Pt[] = [];
+  for (const node of containerNodes) {
+    const baseRX = node.width / 2;
+    const baseRY = Math.max((NODE_HEIGHT * 1.6) / 2, baseRX * 0.74);
+    const halfW = baseRX * MAX_BLOB_EXTENT_X + CONTAINER_PADDING;
+    const halfH = baseRY * MAX_BLOB_EXTENT_Y + CONTAINER_PADDING;
+    for (let j = 0; j < NUM_SAMPLES; j++) {
+      const angle = (j / NUM_SAMPLES) * Math.PI * 2;
+      samples.push({ x: node.x + halfW * Math.cos(angle), y: node.y + halfH * Math.sin(angle) });
+    }
+  }
+
+  const hull    = convexHull(samples);
+  const points  = chaikinSmooth(hull, 6);
+
+  const xs = containerNodes.map(n => n.x);
+  const ys = containerNodes.map(n => n.y);
+  const spanX = Math.max(...xs) - Math.min(...xs);
+  const spanY = Math.max(...ys) - Math.min(...ys);
+  const useTopEdge = spanY > spanX * 2.0;
+
+  let hullMinX = Infinity, hullMaxX = -Infinity;
+  for (let i = 0; i < points.length; i += 2) {
+    if (points[i] < hullMinX) hullMinX = points[i];
+    if (points[i] > hullMaxX) hullMaxX = points[i];
+  }
+  const anchorX     = (hullMinX + hullMaxX) / 2;
+  const anchorEdgeY = hullEdgeYAtX(points, anchorX, !useTopEdge);
+
+  return { points, anchorX, anchorEdgeY };
+}
+
+// ── Props ─────────────────────────────────────────────────────────────────────
+
+export interface KonvaContainerProps {
+  /** All nodes in this container group (already resolved from nodeMap). */
+  nodes: FlatNode[];
+  /** Label text shown on the pill badge. */
+  label?: string;
+  /** Unused – kept for API compat; stroke is always #747270. */
+  color?: string;
+  isDark?: boolean;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+const KonvaContainer = memo(function KonvaContainer({
+  nodes,
+  label = '',
+}: KonvaContainerProps) {
+  const zoomLevel = useViewportStore(s => s.zoomLevel);
+
+  const hullData = useMemo(() => calculateHull(nodes), [nodes]);
+
+  if (!hullData) return null;
+
+  // Inverse-scaled label metrics
+  const refNode      = nodes[0];
+  const screenScale  = refNode ? computeNodeTextScreenScale(refNode.width, zoomLevel) : 1;
+  const labelFontSize   = LABEL_FONT_SIZE * screenScale;
+  const labelBoxHeight  = Math.ceil(labelFontSize * LABEL_LINE_HEIGHT + 2 * LABEL_PAD_V);
+  const boxWidth        = label ? measureLabelBoxWidth(label, labelFontSize) : 0;
+  const boxX            = hullData.anchorX - boxWidth / 2;
+  const boxY            = hullData.anchorEdgeY - labelBoxHeight / 2;
+
+  return (
+    <Group listening={false}>
+      {/* Dashed hull outline */}
+      <Line
+        points={hullData.points}
+        stroke="#747270"
+        strokeWidth={1}
+        dash={CONTAINER_DASH}
+        closed={true}
+        tension={0}
+        listening={false}
+        perfectDrawEnabled={false}
+      />
+
+      {/* Inverse-scaled pill label */}
+      {label.length > 0 && (
+        <Group
+          x={boxX + boxWidth / 2}
+          y={boxY + labelBoxHeight / 2}
+          offsetX={boxWidth / 2}
+          offsetY={labelBoxHeight / 2}
+          scaleX={1 / zoomLevel}
+          scaleY={1 / zoomLevel}
+          visible={zoomLevel >= TEXT_LABEL_HIDE_BELOW_ZOOM}
+          listening={false}
+        >
+          <Rect
+            width={boxWidth}
+            height={labelBoxHeight}
+            fill={LABEL_BG}
+            cornerRadius={LABEL_BORDER_RADIUS}
+            shadowEnabled={false}
+            perfectDrawEnabled={false}
+          />
+          <Text
+            x={LABEL_PAD_H}
+            y={LABEL_PAD_V}
+            width={boxWidth - 2 * LABEL_PAD_H}
+            height={labelBoxHeight - 2 * LABEL_PAD_V}
+            text={label}
+            fontSize={labelFontSize}
+            fontFamily={LABEL_FONT_FAMILY}
+            fontStyle={LABEL_FONT_WEIGHT}
+            fill="rgba(0,0,0,1)"
+            align="center"
+            verticalAlign="middle"
+            lineHeight={LABEL_LINE_HEIGHT}
+            perfectDrawEnabled={false}
+            listening={false}
+          />
+        </Group>
+      )}
+    </Group>
+  );
+});
+
+export default KonvaContainer;

package/src/components/KonvaContainerLayer.tsx

@@ -0,0 +1,63 @@
+// ─── KonvaContainerLayer ─────────────────────────────────────────────────────
+//
+// Renders container outlines beneath nodes (non-interactive).
+//
+// Node positions are read from useNodeStore (live), matching the visualli.ai
+// reference — containers follow dragged nodes in real-time every RAF frame.
+
+import React, { useRef, useLayoutEffect } from 'react';
+import { KLayer as Layer } from '../konvaCompat';
+import type Konva from 'konva';
+import type { FlatNode } from '@visualli/core';
+import { useNodeStore } from '../stores/useNodeStore';
+import KonvaContainer from './KonvaContainer';
+
+export interface ContainerGroup {
+  id: string;
+  label?: string;
+  nodeIds: string[];
+  level: number;
+}
+
+export interface KonvaContainerLayerProps {
+  /** Layout-snapshot nodes — used only as a seed for initial IDs. */
+  nodes: FlatNode[];
+  containers: ContainerGroup[];
+  isDark?: boolean;
+}
+
+export default function KonvaContainerLayer({ nodes, containers, isDark = false }: KonvaContainerLayerProps) {
+  const layerRef = useRef<Konva.Layer | null>(null);
+
+  // Subscribe to live store — updated every RAF frame during drag.
+  // This is the same pattern used by KonvaEdgeLayer so containers and edges
+  // both track dragged nodes in real-time.
+  const storeNodes = useNodeStore(s => s.nodes);
+
+  // batchDraw deps include storeNodes so the layer redraws whenever any node
+  // position changes (including mid-drag RAF updates).
+  useLayoutEffect(() => { layerRef.current?.batchDraw(); }, [containers, isDark, storeNodes]);
+
+  if (containers.length === 0) return null;
+
+  return (
+    <Layer ref={layerRef} listening={false}>
+      {containers.map(c => {
+        // Read positions from live store — not from the layout snapshot
+        const groupNodes = c.nodeIds
+          .map(id => storeNodes.get(id))
+          .filter((n): n is FlatNode => !!n);
+        if (groupNodes.length === 0) return null;
+
+        return (
+          <KonvaContainer
+            key={c.id}
+            nodes={groupNodes}
+            label={c.label}
+            isDark={isDark}
+          />
+        );
+      })}
+    </Layer>
+  );
+}

package/src/components/KonvaEdge.tsx

@@ -0,0 +1,254 @@
+// ─── KonvaEdge ────────────────────────────────────────────────────────────────
+//
+// Renders a connection arrow between two FlatNodes.
+// Matches the visualli.ai KonvaEdge exactly:
+//   - Cubic bezier multi-point polyline (20 segments) through ellipse boundaries
+//   - Adaptive arc height (smaller for long connections)
+//   - Open V arrowhead at target
+//   - TextPath label following the curve (above the line)
+//   - Always black stroke for maximum visibility
+
+import React, { useMemo, memo } from 'react';
+import { KGroup as Group, KLine as Line, KTextPath as TextPath } from '../konvaCompat';
+import type { FlatNode, MindMapConnection } from '@visualli/core';
+import { NODE_HEIGHT } from '@visualli/core';
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+// Returns the outermost visible blob scale for a node.
+// Mirrors BLOB_LAYER_CONFIG in KonvaNode: scaleUps are [1.30, 1.20, 1.10] (outermost→inner).
+const getOutermostScaleUp = (branchCount: number | undefined): number => {
+  const layerCount = Math.min(branchCount ?? 0, 3);
+  if (layerCount === 0) return 1.0;
+  const scaleUps = [1.30, 1.20, 1.10] as const;
+  return scaleUps[scaleUps.length - layerCount];
+};
+
+function getEllipseIntersection(
+  cx: number, cy: number, rx: number, ry: number, angle: number,
+): { x: number; y: number } {
+  return {
+    x: cx + rx * Math.cos(angle),
+    y: cy + ry * Math.sin(angle),
+  };
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export interface KonvaEdgeProps {
+  sourceNode: FlatNode;
+  targetNode: FlatNode;
+  connection?: MindMapConnection;
+  isDark?: boolean;
+  colorOverride?: string;
+  zoomLevel?: number;
+}
+
+const EDGE_SPACING = 25; // Increased spacing to ensure arrow head stays out of organic shapes
+const STROKE_COLOR = '#000000';
+const STROKE_WIDTH = 2.5;
+
+const KonvaEdge = memo(function KonvaEdge({
+  sourceNode: from,
+  targetNode: to,
+  connection,
+  zoomLevel = 1.0,
+}: KonvaEdgeProps) {
+  const label = (connection as { label?: string } | undefined)?.label;
+
+  // ── Build multi-point bezier curve ─────────────────────────────────────────
+  const points = useMemo(() => {
+    const fromBaseX  = from.width / 2;
+    const fromBaseY  = Math.max((NODE_HEIGHT * 1.6) / 2, fromBaseX * 0.74);
+    const fromScale  = getOutermostScaleUp(from.branchCount);
+    const fromRadiusX = fromBaseX * fromScale;
+    const fromRadiusY = fromBaseY * fromScale;
+
+    const toBaseX  = to.width / 2;
+    const toBaseY  = Math.max((NODE_HEIGHT * 1.6) / 2, toBaseX * 0.74);
+    const toScale  = getOutermostScaleUp(to.branchCount);
+    const toRadiusX = toBaseX * toScale;
+    const toRadiusY = toBaseY * toScale;
+
+    const angle    = Math.atan2(to.y - from.y, to.x - from.x);
+    const fromEdge = getEllipseIntersection(from.x, from.y, fromRadiusX, fromRadiusY, angle);
+    const toEdge   = getEllipseIntersection(to.x, to.y, toRadiusX, toRadiusY, angle + Math.PI);
+
+    // Apply spacing from edges (increased to 25 to avoid leaking into organic shapes)
+    const fromX = fromEdge.x + EDGE_SPACING * Math.cos(angle);
+    const fromY = fromEdge.y + EDGE_SPACING * Math.sin(angle);
+    const toX   = toEdge.x   - EDGE_SPACING * Math.cos(angle);
+    const toY   = toEdge.y   - EDGE_SPACING * Math.sin(angle);
+
+    const midX = (fromX + toX) / 2;
+    const midY = (fromY + toY) / 2;
+
+    const distance  = Math.sqrt((toX - fromX) ** 2 + (toY - fromY) ** 2);
+    const arcHeight = Math.min(45, 45 / (1 + Math.max(0, (distance - 200) / 400)));
+
+    const perpX = -(toY - fromY) / distance;
+    const perpY =  (toX - fromX) / distance;
+
+    const offsetMidX = midX + perpX * arcHeight;
+    const offsetMidY = midY + perpY * arcHeight;
+
+    const ctrl1X = fromX + (offsetMidX - fromX) * 0.66;
+    const ctrl1Y = fromY + (offsetMidY - fromY) * 0.66;
+    const ctrl2X = toX   + (offsetMidX - toX)   * 0.66;
+    const ctrl2Y = toY   + (offsetMidY - toY)   * 0.66;
+
+    const NUM_SEGMENTS = 20;
+    const pts: number[] = [];
+    for (let i = 0; i <= NUM_SEGMENTS; i++) {
+      const t = i / NUM_SEGMENTS;
+      const mt = 1 - t;
+      const mt2 = mt * mt; const mt3 = mt2 * mt;
+      const t2  = t  * t;  const t3  = t2  * t;
+      pts.push(
+        mt3 * fromX + 3 * mt2 * t * ctrl1X + 3 * mt * t2 * ctrl2X + t3 * toX,
+        mt3 * fromY + 3 * mt2 * t * ctrl1Y + 3 * mt * t2 * ctrl2Y + t3 * toY,
+      );
+    }
+    return pts;
+  }, [from.x, from.y, from.width, from.branchCount, to.x, to.y, to.width, to.branchCount]);
+
+  // ── Arrowhead ─────────────────────────────────────────────────────────────
+  const arrowHeadPoints = useMemo(() => {
+    const len   = points.length;
+    const tipX  = points[len - 2];
+    const tipY  = points[len - 1];
+    const prevX = points[len - 4];
+    const prevY = points[len - 3];
+    const angle     = Math.atan2(tipY - prevY, tipX - prevX);
+    const armLength = 11;
+    const armAngle  = Math.PI / 5.5; // ~33°
+    return [
+      tipX - armLength * Math.cos(angle - armAngle),
+      tipY - armLength * Math.sin(angle - armAngle),
+      tipX, tipY,
+      tipX - armLength * Math.cos(angle + armAngle),
+      tipY - armLength * Math.sin(angle + armAngle),
+    ];
+  }, [points]);
+
+  // ── TextPath data (optional label) ────────────────────────────────────────
+  const { pathData, fontSize } = useMemo(() => {
+    if (!label) return { pathData: null, fontSize: 12 };
+
+    const fromBaseX  = from.width / 2;
+    const fromBaseY  = Math.max((NODE_HEIGHT * 1.6) / 2, fromBaseX * 0.74);
+    const fromScale  = getOutermostScaleUp(from.branchCount);
+    const fromRadiusX = fromBaseX * fromScale;
+    const fromRadiusY = fromBaseY * fromScale;
+
+    const toBaseX  = to.width / 2;
+    const toBaseY  = Math.max((NODE_HEIGHT * 1.6) / 2, toBaseX * 0.74);
+    const toScale  = getOutermostScaleUp(to.branchCount);
+    const toRadiusX = toBaseX * toScale;
+    const toRadiusY = toBaseY * toScale;
+
+    const angle    = Math.atan2(to.y - from.y, to.x - from.x);
+    const fromEdge = getEllipseIntersection(from.x, from.y, fromRadiusX, fromRadiusY, angle);
+    const toEdge   = getEllipseIntersection(to.x, to.y, toRadiusX, toRadiusY, angle + Math.PI);
+
+    const fromX = fromEdge.x + EDGE_SPACING * Math.cos(angle);
+    const fromY = fromEdge.y + EDGE_SPACING * Math.sin(angle);
+    const toX   = toEdge.x   - EDGE_SPACING * Math.cos(angle);
+    const toY   = toEdge.y   - EDGE_SPACING * Math.sin(angle);
+
+    const midX     = (fromX + toX) / 2;
+    const midY     = (fromY + toY) / 2;
+    const distance = Math.sqrt((toX - fromX) ** 2 + (toY - fromY) ** 2);
+    const arcHeight = Math.min(45, 45 / (1 + Math.max(0, (distance - 200) / 400)));
+
+    const perpX = -(toY - fromY) / distance;
+    const perpY =  (toX - fromX) / distance;
+
+    const offsetMidX = midX + perpX * arcHeight;
+    const offsetMidY = midY + perpY * arcHeight;
+
+    const ctrl1X = fromX + (offsetMidX - fromX) * 0.66;
+    const ctrl1Y = fromY + (offsetMidY - fromY) * 0.66;
+    const ctrl2X = toX   + (offsetMidX - toX)   * 0.66;
+    const ctrl2Y = toY   + (offsetMidY - toY)   * 0.66;
+
+    const TEXT_OFFSET = 15;
+    const fxo = fromX + perpX * TEXT_OFFSET; const fyo = fromY + perpY * TEXT_OFFSET;
+    const txo = toX   + perpX * TEXT_OFFSET; const tyo = toY   + perpY * TEXT_OFFSET;
+    const c1xo = ctrl1X + perpX * TEXT_OFFSET; const c1yo = ctrl1Y + perpY * TEXT_OFFSET;
+    const c2xo = ctrl2X + perpX * TEXT_OFFSET; const c2yo = ctrl2Y + perpY * TEXT_OFFSET;
+
+    // Variable font size: scales with zoom level to remain visible when zoomed out
+    // and also scales with node width.
+    const baseFontSize = 14;
+    const zoomFactor = Math.max(1, 1 / zoomLevel); // Increase font size as we zoom out
+    const scaledFontSize = Math.max(12, Math.min(24, baseFontSize * (from.width / 180) * zoomFactor));
+
+    let d = '';
+    if (fromX > toX) {
+      d = `M ${txo},${tyo} C ${c2xo},${c2yo} ${c1xo},${c1yo} ${fxo},${fyo}`;
+    } else {
+      d = `M ${fxo},${fyo} C ${c1xo},${c1yo} ${c2xo},${c2yo} ${txo},${tyo}`;
+    }
+    return { pathData: d, fontSize: scaledFontSize };
+  }, [from.x, from.y, from.width, from.branchCount, to.x, to.y, to.width, to.branchCount, label, zoomLevel]);
+
+  // ── Render ────────────────────────────────────────────────────────────────
+  return (
+    <Group>
+      <Line
+        points={points}
+        stroke={STROKE_COLOR}
+        strokeWidth={STROKE_WIDTH}
+        tension={0}
+        opacity={0.9}
+        lineCap="round"
+        lineJoin="round"
+        listening={false}
+        perfectDrawEnabled={false}
+      />
+      <Line
+        points={arrowHeadPoints}
+        stroke={STROKE_COLOR}
+        strokeWidth={STROKE_WIDTH}
+        lineCap="round"
+        lineJoin="round"
+        opacity={0.9}
+        listening={false}
+        perfectDrawEnabled={false}
+      />
+      {label && pathData && (
+        <>
+          {/* Background text for contrast */}
+          <TextPath
+            data={pathData}
+            text={label}
+            fontSize={fontSize}
+            fontFamily="'Playpen Sans', cursive"
+            fontStyle="normal"
+            fill="#ffffff"
+            align="center"
+            letterSpacing={0.5}
+            listening={false}
+            opacity={0.9}
+          />
+          {/* Foreground label text */}
+          <TextPath
+            data={pathData}
+            text={label}
+            fontSize={fontSize}
+            fontFamily="'Playpen Sans', cursive"
+            fontStyle="normal"
+            fill="#6b6860"
+            align="center"
+            letterSpacing={0.5}
+            listening={false}
+            opacity={0.9}
+          />
+        </>
+      )}
+    </Group>
+  );
+});
+
+export default KonvaEdge;

package/src/components/KonvaEdgeLayer.tsx

@@ -0,0 +1,72 @@
+// ─── KonvaEdgeLayer ───────────────────────────────────────────────────────────
+//
+// Renders all edges for visible nodes.  An edge is only drawn when BOTH its
+// source and target node are currently in the visible set.
+//
+// NOTE: Node positions are read from useNodeStore (live) so edges always follow
+// dragged nodes.  The `nodes` prop is used only for initial viewport culling.
+
+import React, { useRef, useLayoutEffect, useMemo } from 'react';
+import { KLayer as Layer } from '../konvaCompat';
+import type Konva from 'konva';
+import type { FlatNode, MindMapConnection } from '@visualli/core';
+import { useNodeStore } from '../stores/useNodeStore';
+import { useViewportStore } from '../stores/useViewportStore';
+import { useViewportNodes } from '../hooks/useViewportNodes';
+import KonvaEdge from './KonvaEdge';
+
+export interface KonvaEdgeLayerProps {
+  nodes: FlatNode[];
+  connections: MindMapConnection[];
+  currentLevel?: number;
+  isDark?: boolean;
+  /** Pass true while a node is being dragged to skip viewport culling. */
+  isDragging?: boolean;
+}
+
+export default function KonvaEdgeLayer({
+  nodes,
+  connections,
+  currentLevel,
+  isDark = false,
+  isDragging = false,
+}: KonvaEdgeLayerProps) {
+  const layerRef   = useRef<Konva.Layer | null>(null);
+  const zoomLevel  = useViewportStore(s => s.zoomLevel);
+  // Live node positions from the store — updated every RAF during drag
+  const storeNodes = useNodeStore(s => s.nodes);
+  // Viewport culling still uses the layout snapshot for performance;
+  // during drag, culling is skipped so newly-moved nodes are always visible.
+  const visibleNodes = useViewportNodes(nodes, currentLevel, false, isDragging);
+
+  // Set of visible node IDs for O(1) culling
+  const visibleSet = useMemo(() => new Set(visibleNodes.map(n => n.id)), [visibleNodes]);
+
+  // Redraw before paint whenever visible edges change.
+  // storeNodes must be included: edge endpoints read live positions from the store,
+  // so when a node is dragged, the edge must redraw even though visibleSet is unchanged.
+  useLayoutEffect(() => { layerRef.current?.batchDraw(); }, [connections, isDark, isDragging, visibleSet, storeNodes]);
+
+  return (
+    <Layer ref={layerRef} listening={false}>
+      {connections.map((conn, idx) => {
+        // Use live store positions so edges move with dragged nodes
+        const src = storeNodes.get(conn.from);
+        const tgt = storeNodes.get(conn.to);
+        if (!src || !tgt) return null;
+        if (!isDragging && !visibleSet.has(src.id) && !visibleSet.has(tgt.id)) return null;
+
+        return (
+          <KonvaEdge
+            key={`${conn.from}-${conn.to}-${idx}`}
+            sourceNode={src}
+            targetNode={tgt}
+            connection={conn}
+            isDark={isDark}
+            zoomLevel={zoomLevel}
+          />
+        );
+      })}
+    </Layer>
+  );
+}