@visualli/react 0.1.7 → 0.2.0

package/src/components/KonvaEdge.tsx

@@ -1,257 +1,42 @@
 // ─── 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
+// A single connector between two ideas: the design system's cubic curve, open
+// arrowhead and label. Endpoints sit `edge-gap` outside the real outline of each
+// idea (including its outermost ring). The canvas layers batch connectors
+// (KonvaEdgeLayer); this component is for composing custom Konva scenes.
 
-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 ─────────────────────────────────────────────────────────────────
+import React, { memo, useMemo } from 'react';
+import { KShape as Shape } from '../konvaCompat';
+import { connectorGeometry, type FlatNode, type MindMapConnection } from '@visualli/core';
+import { DEFAULT_DESIGN, type Design } from '../design/design';
+import { drawConnector, prepareConnector } from '../design/drawing';
 
 export interface KonvaEdgeProps {
   sourceNode: FlatNode;
   targetNode: FlatNode;
   connection?: MindMapConnection;
+  /** @deprecated pass `design`. */
   isDark?: boolean;
+  /** @deprecated connectors use the design system's edge colour; kept so existing callers compile. */
   colorOverride?: string;
   zoomLevel?: number;
+  design?: Design;
 }
 
-const EDGE_SPACING = 25; // Increased spacing to ensure arrow head stays out of organic shapes
-const STROKE_COLOR = '#000000';
-const STROKE_COLOR_DARK = '#ffffff';
-const STROKE_WIDTH = 2.5;
-
-const KonvaEdge = memo(function KonvaEdge({
-  sourceNode: from,
-  targetNode: to,
-  connection,
-  isDark = false,
-  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 ────────────────────────────────────────────────────────────────
-  const strokeColor = isDark ? STROKE_COLOR_DARK : STROKE_COLOR;
-  
+const KonvaEdge = memo(function KonvaEdge({ sourceNode: from, targetNode: to, connection, zoomLevel = 1, design = DEFAULT_DESIGN }: KonvaEdgeProps) {
+  const g = useMemo(
+    () => prepareConnector(connectorGeometry(from, to, design.metrics.edgeGap)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [from.x, from.y, from.width, from.level, from.branchCount, to.x, to.y, to.width, to.level, to.branchCount, design.metrics.edgeGap],
+  );
   return (
-    <Group>
-      <Line
-        points={points}
-        stroke={strokeColor}
-        strokeWidth={STROKE_WIDTH}
-        tension={0}
-        opacity={0.9}
-        lineCap="round"
-        lineJoin="round"
-        listening={false}
-        perfectDrawEnabled={false}
-      />
-      <Line
-        points={arrowHeadPoints}
-        stroke={strokeColor}
-        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>
+    <Shape
+      listening={false}
+      perfectDrawEnabled={false}
+      sceneFunc={(ctx: { _context: CanvasRenderingContext2D }) => {
+        drawConnector(ctx._context, g, design, zoomLevel, connection?.style === 'dashed', connection?.label);
+      }}
+    />
   );
 });
 

package/src/components/KonvaEdgeLayer.tsx

@@ -1,72 +1,92 @@
 // ─── 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.
+// One Konva <Shape> paints every visible connector. Geometry (endpoints, cubic
+// curve, arrowhead) comes from the design system via connectorGeometry and is
+// cached per connector until one of its two ideas moves or resizes.
 
 import React, { useRef, useLayoutEffect, useMemo } from 'react';
-import { KLayer as Layer } from '../konvaCompat';
+import { KLayer as Layer, KShape as Shape } from '../konvaCompat';
 import type Konva from 'konva';
-import type { FlatNode, MindMapConnection } from '@visualli/core';
+import { connectorGeometry, type FlatNode, type MindMapConnection } from '@visualli/core';
 import { useNodeStore } from '../stores/useNodeStore';
-import { useViewportStore } from '../stores/useViewportStore';
-import { useViewportNodes } from '../hooks/useViewportNodes';
-import KonvaEdge from './KonvaEdge';
+import { DEFAULT_DESIGN, type Design } from '../design/design';
+import { useFontsEpoch } from '../design/runtime';
+import { drawConnector, prepareConnector, type PreparedConnector } from '../design/drawing';
+import { stageViewRect } from './KonvaNodeLayer';
+import type { RevealClock, EdgeArrival } from '../design/choreography';
+import { useFrames } from './useFrames';
 
 export interface KonvaEdgeLayerProps {
   nodes: FlatNode[];
   connections: MindMapConnection[];
   currentLevel?: number;
+  /** @deprecated pass `design`; kept so existing callers still compile. */
   isDark?: boolean;
-  /** Pass true while a node is being dragged to skip viewport culling. */
+  /** Pass true while an idea is being dragged (connectors are always drawn then). */
   isDragging?: boolean;
+  design?: Design;
+  /** The layer's arrival timeline (connectors draw in after the ideas). Omit for no arrival animation. */
+  clock?: RevealClock;
 }
 
-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);
+const key = (n: FlatNode) => `${n.x},${n.y},${n.width},${n.level},${n.branchCount ?? 0}`;
+const MARGIN = 80; // bow + arrowhead + label slack around the endpoints' box
+
+export default function KonvaEdgeLayer({ connections, isDragging = false, design = DEFAULT_DESIGN, clock }: KonvaEdgeLayerProps) {
+  const layerRef = useRef<Konva.Layer | null>(null);
+  const fonts = useFontsEpoch();
+  // Live positions: connectors follow dragged ideas.
+  const storeNodes = useNodeStore((s) => s.nodes);
+  const cache = useRef(new Map<string, { k: string; g: PreparedConnector }>());
+
+  const edges = useMemo(() => {
+    const out: Array<{ g: PreparedConnector; dashed: boolean; label?: string }> = [];
+    const seen = new Set<string>();
+    connections.forEach((conn, i) => {
+      const src = storeNodes.get(conn.from);
+      const tgt = storeNodes.get(conn.to);
+      if (!src || !tgt) return;
+      const id = `${conn.from}>${conn.to}#${i}`;
+      seen.add(id);
+      const k = `${key(src)}|${key(tgt)}`;
+      let hit = cache.current.get(id);
+      if (!hit || hit.k !== k) {
+        hit = { k, g: prepareConnector(connectorGeometry(src, tgt, design.metrics.edgeGap)) };
+        cache.current.set(id, hit);
+      }
+      out.push({ g: hit.g, dashed: conn.style === 'dashed', label: conn.label });
+    });
+    for (const id of cache.current.keys()) if (!seen.has(id)) cache.current.delete(id);
+    return out;
+  }, [connections, storeNodes, design.metrics.edgeGap]);
 
-  // Set of visible node IDs for O(1) culling
-  const visibleSet = useMemo(() => new Set(visibleNodes.map(n => n.id)), [visibleNodes]);
+  const frames = useFrames(layerRef, () => clock?.active() ?? false);
+  useLayoutEffect(() => clock?.subscribe(() => frames.run()), [clock, frames]);
 
-  // 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]);
+  useLayoutEffect(() => { layerRef.current?.batchDraw(); }, [edges, design, fonts, isDragging]);
+
+  const sceneFunc = (ctx: { _context: CanvasRenderingContext2D }, shape: Konva.Shape) => {
+    const stage = shape.getStage();
+    if (!stage) return;
+    const zoom = stage.scaleX() || 1;
+    const v = stageViewRect(stage);
+    const c = ctx._context;
+    const now = performance.now();
+    const arriving = clock?.active(now) ?? false;
+    const arrival: EdgeArrival = { alpha: 1, draw: 1 };
+    for (let i = 0; i < edges.length; i++) {
+      const e = edges[i]!;
+      const { a, b, mid } = e.g;
+      const minX = Math.min(a.x, b.x, mid.x) - MARGIN, maxX = Math.max(a.x, b.x, mid.x) + MARGIN;
+      const minY = Math.min(a.y, b.y, mid.y) - MARGIN, maxY = Math.max(a.y, b.y, mid.y) + MARGIN;
+      if (maxX < v.minX || minX > v.maxX || maxY < v.minY || minY > v.maxY) continue;
+      drawConnector(c, e.g, design, zoom, e.dashed, e.label, arriving && clock!.edge(i, e.dashed, now, arrival) ? arrival : null);
+    }
+  };
 
   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}
-          />
-        );
-      })}
+      <Shape sceneFunc={sceneFunc} listening={false} perfectDrawEnabled={false} />
     </Layer>
   );
 }

package/src/components/KonvaNode.tsx

@@ -1,21 +1,14 @@
 // ─── KonvaNode ────────────────────────────────────────────────────────────────
 //
-// Renders a single FlatNode as a single organic blob shape with Konva.
-// Matches the visualli.ai rendering:
-//   - Centered blob at node (x, y) with radiusX / radiusY scaling
-//   - Single blob shape (no background depth layers)
-//   - HSL-based border darkening
-//   - 'Story Script' cursive font, text clipped to blob silhouette
-//   - External hover / pressed state (no Konva hit-canvas dependency)
-//   - All shapes are listening=false; hit detection uses spatial index
+// A single idea as one Konva shape (rings + body + label), drawn with the design
+// system's geometry and tokens. The canvas layers batch all ideas into one shape
+// (KonvaNodeLayer); this component is for composing custom Konva scenes.
 
-import React, { useMemo } from 'react';
-import { KGroup as Group, KShape as Shape, KText as Text } from '../konvaCompat';
-import type { FlatNode } from '@visualli/core';
-import { CANVAS_COLORS, NODE_HEIGHT, TEXT_LABEL_HIDE_BELOW_ZOOM, darkenHexColor } from '@visualli/core';
-import { getBlobTypeForLayer, BLOB_TEXT_OFFSETS, BLOB_LAYER_CONFIG, NODE_LAYER_CONFIG, drawBlobPath, computeNodeTextWorldScale } from '../config';
-
-// ── Component ─────────────────────────────────────────────────────────────────
+import React from 'react';
+import { KShape as Shape } from '../konvaCompat';
+import { type FlatNode } from '@visualli/core';
+import { DEFAULT_DESIGN, type Design } from '../design/design';
+import { IDLE, drawIdea } from '../design/drawing';
 
 export interface KonvaNodeProps {
   node: FlatNode;
@@ -24,154 +17,26 @@ export interface KonvaNodeProps {
   isExternallyHovered?: boolean;
   /** True while this node is being pressed/dragged. */
   isExternallyPressed?: boolean;
-  /** True while any node is being dragged — disables expensive shadows. */
+  isSelected?: boolean;
+  /** True while any node is being dragged — disables the drop shadow. */
   isDragging?: boolean;
+  design?: Design;
 }
 
 const KonvaNode = React.memo(function KonvaNode({
-  node,
-  zoomLevel,
-  isExternallyHovered = false,
-  isExternallyPressed = false,
-  isDragging = false,
+  node, zoomLevel, isExternallyHovered = false, isExternallyPressed = false, isSelected = false, isDragging = false, design = DEFAULT_DESIGN,
 }: KonvaNodeProps) {
-  // Border: monochromatic HSL-darkened version of the fill color
-  const borderColor = useMemo(() => darkenHexColor(node.color, 0.13), [node.color]);
-
-  // Number of background layers (capped at 3), driven by branchCount
-  const layerCount = useMemo(() => {
-    const count = node.branchCount ?? 0;
-    return Math.min(count, 3);
-  }, [node.branchCount]);
-
-  // Base blob radii (same math as visualli.ai KonvaNode)
-  const baseRadiusX = node.width / 2;
-  const baseRadiusY = Math.max((NODE_HEIGHT * 1.6) / 2, baseRadiusX * 0.74);
-
-  // Larger, consistent font size for better readability
-  // Text will wrap to multiple lines if needed
-  const calculateFontSize = useMemo(() => {
-    // Use a larger base font size for better visibility
-    return 30;
-  }, [node.title]);
-
-  // Text scale and layout
-  const textNaturalWidth  = node.width - 40;
-  // Increase text height to allow 2-3 lines of wrapped text
-  const textNaturalHeight = NODE_HEIGHT * 1.2;
-  const maxScale = computeNodeTextWorldScale(node.width, zoomLevel);
-
-  // Blob type and text offset
-  const blobType    = getBlobTypeForLayer(node.level);
-  const textOffsetX = (BLOB_TEXT_OFFSETS[blobType] ?? 0) * baseRadiusX;
-
-  // Interaction state (purely driven from stage-level delegation)
-  const effectiveHover = isExternallyHovered;
-  const isPressed      = isExternallyPressed;
-
-  // Blob fill/stroke:
-  //   default → fill=node.color,  stroke=borderColor
-  //   hover   → fill=borderColor, stroke=borderColor
-  //   pressed → fill=borderColor, stroke=node.color
-  const topFill   = effectiveHover || isPressed ? borderColor : node.color;
-  const topStroke = isPressed ? node.color : borderColor;
-
-  // Build the background layers config (outermost first for correct z-order)
-  const backgroundLayers = useMemo(() => {
-    if (layerCount === 0) return [];
-    const startIdx = BLOB_LAYER_CONFIG.length - layerCount;
-    const layers = [];
-    for (let i = startIdx; i < BLOB_LAYER_CONFIG.length; i++) {
-      const config = BLOB_LAYER_CONFIG[i];
-      layers.push({
-        ...config,
-        radiusX: baseRadiusX * config.scaleUp,
-        radiusY: baseRadiusY * config.scaleUp,
-      });
-    }
-    return layers;
-  }, [layerCount, baseRadiusX, baseRadiusY]);
-
   return (
-    <Group x={node.x} y={node.y} listening={false}>
-      {/* Background blob layers (outermost rendered first, behind the node) */}
-      {backgroundLayers.map((layer, idx) => (
-        <Shape
-          key={`blob-layer-${idx}`}
-          rotation={layer.rotation}
-          opacity={layer.opacity}
-          sceneFunc={(ctx: any, shape: any) => {
-            drawBlobPath(ctx, layer.radiusX, layer.radiusY, blobType);
-            ctx.fillStrokeShape(shape);
-          }}
-          fill={node.color}
-          stroke={borderColor}
-          strokeWidth={layer.strokeWidth}
-          dash={layer.dash ? [...layer.dash] : undefined}
-          listening={false}
-          perfectDrawEnabled={false}
-        />
-      ))}
-
-      {/* Node (top layer) - main interactive blob */}
-      <Shape
-        rotation={NODE_LAYER_CONFIG.rotation}
-        opacity={NODE_LAYER_CONFIG.opacity}
-        sceneFunc={(ctx: any, shape: any) => {
-          drawBlobPath(ctx, baseRadiusX, baseRadiusY, blobType);
-          ctx.fillStrokeShape(shape);
-        }}
-        hitFunc={(ctx: any, shape: any) => {
-          drawBlobPath(ctx, baseRadiusX, baseRadiusY, blobType);
-          ctx.fillStrokeShape(shape);
-        }}
-        fill={topFill}
-        stroke={topStroke}
-        strokeWidth={NODE_LAYER_CONFIG.strokeWidth}
-        shadowEnabled={!isDragging}
-        shadowColor="rgba(255,255,255,1)"
-        shadowBlur={effectiveHover || isPressed ? 40 : 15}
-        shadowOpacity={effectiveHover || isPressed ? 0.4 : 0.15}
-        shadowOffsetX={0}
-        shadowOffsetY={0}
-        perfectDrawEnabled={false}
-      />
-
-      {/* Node Title — inverse-scaled so it stays legible at a constant screen size.
-           Clipped to the blob silhouette via clipFunc so the growing text never visually
-           bleeds outside the first layer boundary at low zoom levels. */}
-      <Group
-        clipFunc={(ctx: any) => {
-          drawBlobPath(ctx, baseRadiusX, baseRadiusY, blobType);
-        }}
-        visible={zoomLevel >= TEXT_LABEL_HIDE_BELOW_ZOOM}
-        listening={false}
-      >
-        <Text
-          x={textOffsetX}
-          y={0}
-          offsetX={textNaturalWidth / 2}
-          offsetY={textNaturalHeight / 2}
-          width={textNaturalWidth}
-          height={textNaturalHeight}
-          scaleX={maxScale}
-          scaleY={maxScale}
-          text={node.title}
-          fontSize={calculateFontSize}
-          fontFamily="'Story Script', cursive"
-          fontStyle="normal"
-          fill={CANVAS_COLORS.node.titleColor}
-          align="center"
-          verticalAlign="middle"
-          wrap="word"
-          ellipsis={false}
-          listening={false}
-          perfectDrawEnabled={false}
-        />
-      </Group>
-    </Group>
+    <Shape
+      listening={false}
+      perfectDrawEnabled={false}
+      sceneFunc={(ctx: { _context: CanvasRenderingContext2D }) => {
+        drawIdea(ctx._context, node, design, zoomLevel, { ...IDLE, hovered: isExternallyHovered, pressed: isExternallyPressed, selected: isSelected }, {
+          shadows: !isDragging,
+        });
+      }}
+    />
   );
 });
 
 export default KonvaNode;
-