@visualli/react 0.1.1

package/src/hooks/useKonvaLayerTransition.ts

@@ -0,0 +1,221 @@
+// ─── useKonvaLayerTransition ──────────────────────────────────────────────────
+//
+// Manages layer navigation animations (zoom into child layer, zoom back to
+// parent). Uses the same callback-driven pattern as the visualli.ai reference:
+//   - onViewportChange: imperatively updates the Konva stage each rAF frame
+//   - onOpacityChange: writes directly to canvasWrapperRef DOM (no React state)
+//   - onBackgroundColorChange: writes directly to bgRef DOM
+//   - onPhaseChange('swap'|'zoom-back'): triggers React layer content swap
+//   - onComplete: syncs final viewport to Zustand and ends transition
+
+import { useCallback, useRef, useEffect } from 'react';
+import type Konva from 'konva';
+import type { VisualliDocument, FlatNode } from '@visualli/core';
+import { useViewportStore } from '../stores/useViewportStore';
+import { konvaLayerTransitionAnimator } from '../animations/konvaLayerTransition';
+import type { AnimatorViewport } from '../animations/konvaLayerTransition';
+import { calculateFitView } from '../utils/layerNavigation';
+
+export interface LayerTransitionOptions {
+  /** Ref to the Konva Stage for imperative position/scale updates each frame. */
+  stageRef:          React.RefObject<Konva.Stage | null>;
+  /** Ref to the wrapping div whose CSS `opacity` is driven during transitions. */
+  canvasWrapperRef:  React.RefObject<HTMLDivElement | null>;
+  /** Ref to the background color div. */
+  bgRef?:            React.RefObject<HTMLDivElement | null>;
+  /** Called at the content-swap point — use to switch the displayed layer. */
+  onSwapLayer:       (newLayerId: string) => void;
+  /** Called when a zoom-out swap happens — use to update the nav stack. */
+  onSwapBack:        () => void;
+  /** Called after the transition fully completes. */
+  onComplete:        () => void;
+  /**
+   * GPU CSS-transform mode: called each rAF frame instead of applyViewport.
+   * When provided, the caller is responsible for moving the canvas content.
+   */
+  onViewportFrame?:     (vp: AnimatorViewport) => void;
+  /**
+   * Called once when the animation reaches its final viewport.
+   * When provided, replaces the default applyViewport call at completion.
+   */
+  onViewportFinal?:     (vp: AnimatorViewport) => void;
+  /**
+   * Called at phase-change points ('swap', 'zoom-back') in addition to the
+   * internal content-swap logic. Use to reset CSS transforms before Konva redraws.
+   */
+  onPhaseChange?:       (phase: string) => void;
+  /**
+   * Called with 'start' before the animator fires its first frame and with
+   * 'end' after onComplete. Use to set up / tear down GPU hints (willChange, etc.).
+   */
+  onTransitionLifecycle?: (phase: 'start' | 'end') => void;
+}
+
+export interface LayerTransitionHandlers {
+  zoomIntoLayer: (
+    doc:         VisualliDocument,
+    targetNode:  FlatNode,
+    childLayerId: string,
+    childNodes:  FlatNode[],
+    fromColor:   string,
+    toColor:     string,
+  ) => void;
+  zoomOutToParent: (
+    parentViewport: AnimatorViewport,
+    fromColor:      string,
+    toColor:        string,
+  ) => void;
+  isTransitioning: () => boolean;
+}
+
+export function useKonvaLayerTransition(opts: LayerTransitionOptions): LayerTransitionHandlers {
+  const {
+    stageRef, canvasWrapperRef, bgRef,
+    onSwapLayer, onSwapBack, onComplete,
+    onViewportFrame, onViewportFinal, onPhaseChange: onPhaseChangeExt,
+    onTransitionLifecycle,
+  } = opts;
+  const setZoom   = useViewportStore(s => s.setZoom);
+  const setCenter = useViewportStore(s => s.setCenter);
+  const getState  = useViewportStore.getState;
+
+  const swappedRef = useRef(false);
+  const canvasSizeRef = useRef({ width: 800, height: 600 });
+
+  // Keep canvas size ref fresh from viewport store (updated by ResizeObserver in useKonvaRenderer)
+  useEffect(() => {
+    const update = () => {
+      const vp = useViewportStore.getState();
+      canvasSizeRef.current = { width: vp.canvasWidth || 800, height: vp.canvasHeight || 600 };
+    };
+    update();
+    // Subscribe to viewport store changes instead of window resize
+    const unsubscribe = useViewportStore.subscribe(update);
+    return unsubscribe;
+  }, []);
+
+  // Apply viewport to Konva stage imperatively (no React re-render per frame)
+  const applyViewport = useCallback((vp: AnimatorViewport) => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    const { width, height } = canvasSizeRef.current;
+    stage.x(width / 2 - vp.centerX * vp.zoomLevel);
+    stage.y(height / 2 - vp.centerY * vp.zoomLevel);
+    stage.scaleX(vp.zoomLevel);
+    stage.scaleY(vp.zoomLevel);
+    stage.getLayers().forEach(l => l.drawScene());
+    // Sync to Zustand so viewport store reflects reality
+    setCenter(vp.centerX, vp.centerY);
+    setZoom(vp.zoomLevel);
+  }, [stageRef, setCenter, setZoom]);
+
+  const applyOpacity = useCallback((opacity: number) => {
+    if (canvasWrapperRef.current) {
+      canvasWrapperRef.current.style.opacity = String(opacity);
+    }
+  }, [canvasWrapperRef]);
+
+  const applyBgColor = useCallback((color: string) => {
+    if (bgRef?.current) {
+      bgRef.current.style.backgroundColor = color;
+    }
+  }, [bgRef]);
+
+  const zoomIntoLayer = useCallback((
+    _doc:        VisualliDocument,
+    targetNode:  FlatNode,
+    childLayerId: string,
+    childNodes:  FlatNode[],
+    fromColor:   string,
+    toColor:     string,
+  ): void => {
+    if (konvaLayerTransitionAnimator.active) return;
+
+    const vp    = getState();
+    const stage = stageRef.current;
+    const w     = stage?.width()  ?? 800;
+    const h     = stage?.height() ?? 600;
+    const fit   = calculateFitView(childNodes, w, h);
+
+    swappedRef.current = false;
+
+    onTransitionLifecycle?.('start');
+    konvaLayerTransitionAnimator.animateZoomIntoLayer(
+      { centerX: vp.centerX, centerY: vp.centerY, zoomLevel: vp.zoomLevel },
+      { x: targetNode.x, y: targetNode.y, width: targetNode.width, height: targetNode.height },
+      { x: fit.centerX, y: fit.centerY },
+      fromColor,
+      toColor,
+      {
+        onUpdate: ({ viewport, opacity, backgroundColor }) => {
+          if (onViewportFrame) { onViewportFrame(viewport); } else { applyViewport(viewport); }
+          applyOpacity(opacity);
+          applyBgColor(backgroundColor);
+        },
+        onComplete: () => {
+          const finalVp = { centerX: fit.centerX, centerY: fit.centerY, zoomLevel: fit.zoomLevel };
+          if (onViewportFinal) { onViewportFinal(finalVp); } else { applyViewport(finalVp); }
+          applyOpacity(1);
+          onComplete();
+          onTransitionLifecycle?.('end');
+        },
+        onPhaseChange: (phase) => {
+          onPhaseChangeExt?.(phase);
+          if (phase === 'swap' && !swappedRef.current) {
+            swappedRef.current = true;
+            onSwapLayer(childLayerId);
+          }
+        },
+      },
+      fit.zoomLevel,
+      w,
+      h,
+    );
+  }, [stageRef, getState, applyViewport, applyOpacity, applyBgColor, onSwapLayer, onComplete, onViewportFrame, onViewportFinal, onPhaseChangeExt, onTransitionLifecycle]);
+
+  const zoomOutToParent = useCallback((
+    parentViewport: AnimatorViewport,
+    fromColor:      string,
+    toColor:        string,
+  ): void => {
+    if (konvaLayerTransitionAnimator.active) return;
+
+    const vp = getState();
+    swappedRef.current = false;
+
+    onTransitionLifecycle?.('start');
+    konvaLayerTransitionAnimator.animateZoomOutToParent(
+      { centerX: vp.centerX, centerY: vp.centerY, zoomLevel: vp.zoomLevel },
+      parentViewport,
+      fromColor,
+      toColor,
+      {
+        onUpdate: ({ viewport, opacity, backgroundColor }) => {
+          if (onViewportFrame) { onViewportFrame(viewport); } else { applyViewport(viewport); }
+          applyOpacity(opacity);
+          applyBgColor(backgroundColor);
+        },
+        onComplete: () => {
+          if (onViewportFinal) { onViewportFinal(parentViewport); } else { applyViewport(parentViewport); }
+          applyOpacity(1);
+          onComplete();
+          onTransitionLifecycle?.('end');
+        },
+        onPhaseChange: (phase) => {
+          onPhaseChangeExt?.(phase);
+          if (phase === 'zoom-back' && !swappedRef.current) {
+            swappedRef.current = true;
+            onSwapBack();
+          }
+        },
+      },
+    );
+  }, [getState, applyViewport, applyOpacity, applyBgColor, onSwapBack, onComplete, onViewportFrame, onViewportFinal, onPhaseChangeExt, onTransitionLifecycle]);
+
+  const isTransitioning = useCallback(() => konvaLayerTransitionAnimator.active, []);
+
+  // Cancel on unmount
+  useEffect(() => () => { konvaLayerTransitionAnimator.cancel(); }, []);
+
+  return { zoomIntoLayer, zoomOutToParent, isTransitioning };
+}

package/src/hooks/useKonvaRenderer.ts

@@ -0,0 +1,185 @@
+// ─── useKonvaRenderer ─────────────────────────────────────────────────────────
+//
+// Manages Konva rendering lifecycle: resize, pan, zoom, and FPS monitoring.
+// Returns Konva-level event handlers to be wired onto KonvaStage.
+//
+// Design matches visualli.ai's useKonvaRenderer:
+//   - handleWheel / handleMouseDown / handleMouseMove / handleMouseUp are
+//     Konva.KonvaEventObject handlers (not DOM-level)
+//   - Pan is applied directly to the stage during drag for 60 fps, flushed to
+//     Zustand store on mouseUp (no per-frame state updates)
+//   - Zoom targets the cursor position (same math as visualli.ai)
+
+import { useEffect, useCallback, useRef, useState } from 'react';
+import type Konva from 'konva';
+import { ZOOM_MIN, ZOOM_MAX } from '@visualli/core';
+import { useViewportStore } from '../stores/useViewportStore';
+import { useRenderConfigStore } from '../stores/stores';
+
+export interface UseKonvaRendererOptions {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  stageRef?:    React.RefObject<Konva.Stage | null>;
+  enabled?:     boolean;
+}
+
+export interface UseKonvaRendererReturn {
+  handleWheel:    (e: Konva.KonvaEventObject<WheelEvent>) => void;
+  handleMouseDown:(e: Konva.KonvaEventObject<MouseEvent>) => void;
+  handleMouseMove:(e: Konva.KonvaEventObject<MouseEvent>) => void;
+  handleMouseUp:  (e: Konva.KonvaEventObject<MouseEvent>) => void;
+  canvasWidth:    number;
+  canvasHeight:   number;
+}
+
+export function useKonvaRenderer({
+  containerRef,
+  stageRef,
+  enabled = true,
+}: UseKonvaRendererOptions): UseKonvaRendererReturn {
+  const pan              = useViewportStore(s => s.pan);
+  const zoom             = useViewportStore(s => s.zoom);
+  const setZoom          = useViewportStore(s => s.setZoom);
+  const setCenter        = useViewportStore(s => s.setCenter);
+  const updateCanvasSize = useViewportStore(s => s.updateCanvasSize);
+  const autoAdjust       = useRenderConfigStore(s => s.autoAdjustQuality);
+
+  const [canvasWidth,  setCanvasWidth]  = useState(0);
+  const [canvasHeight, setCanvasHeight] = useState(0);
+  const cachedSizeRef = useRef({ width: 0, height: 0 });
+
+  const isPanningRef       = useRef(false);
+  const lastPanPointRef    = useRef({ x: 0, y: 0 });
+  const panAccumRef        = useRef({ x: 0, y: 0 });
+
+  // ── FPS monitor ──────────────────────────────────────────────────────────────
+  const fpsRef   = useRef({ frames: 0, last: performance.now() });
+  const fpsRafId = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const tick = (now: number): void => {
+      fpsRef.current.frames++;
+      if (now - fpsRef.current.last >= 2000) {
+        const fps = (fpsRef.current.frames / ((now - fpsRef.current.last) / 1000)) | 0;
+        autoAdjust(fps);
+        fpsRef.current = { frames: 0, last: now };
+      }
+      fpsRafId.current = requestAnimationFrame(tick);
+    };
+    fpsRafId.current = requestAnimationFrame(tick);
+    return () => { if (fpsRafId.current !== null) cancelAnimationFrame(fpsRafId.current); };
+  }, [enabled, autoAdjust]);
+
+  // ── Resize ────────────────────────────────────────────────────────────────────
+  // Observes the container element (not window) so the canvas always fills
+  // its parent, regardless of how the renderer is sized by the consuming app.
+  useEffect(() => {
+    if (!enabled) return;
+
+    let rafId: number | null = null;
+
+    const measure = () => {
+      const el = containerRef.current;
+      const w = el ? Math.round(el.getBoundingClientRect().width)  : 800;
+      const h = el ? Math.round(el.getBoundingClientRect().height) : 600;
+      return { w, h };
+    };
+
+    const updateSize = () => {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        const { w, h } = measure();
+        if (w > 0 && h > 0 &&
+            (cachedSizeRef.current.width !== w || cachedSizeRef.current.height !== h)) {
+          cachedSizeRef.current = { width: w, height: h };
+          setCanvasWidth(w);
+          setCanvasHeight(h);
+          updateCanvasSize(w, h);
+        }
+      });
+    };
+
+    // Initial measurement
+    updateSize();
+
+    // ResizeObserver tracks the container itself (handles % / flex / grid sizing)
+    let ro: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== 'undefined' && containerRef.current) {
+      ro = new ResizeObserver(updateSize);
+      ro.observe(containerRef.current);
+    } else {
+      // Fallback: window resize only
+      window.addEventListener('resize', updateSize);
+    }
+
+    return () => {
+      ro ? ro.disconnect() : window.removeEventListener('resize', updateSize);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [enabled, containerRef, updateCanvasSize]);
+
+  // ── Wheel zoom ────────────────────────────────────────────────────────────────
+  const handleWheel = useCallback((e: Konva.KonvaEventObject<WheelEvent>): void => {
+    e.evt.preventDefault();
+    const stage = e.target.getStage();
+    if (!stage) return;
+    const pointer = stage.getPointerPosition();
+    if (!pointer) return;
+    const delta = -e.evt.deltaY / 1000;
+    zoom(delta, pointer.x, pointer.y);
+  }, [zoom]);
+
+  // ── Mouse pan ─────────────────────────────────────────────────────────────────
+  const handleMouseDown = useCallback((e: Konva.KonvaEventObject<MouseEvent>): void => {
+    const clickedOnEmpty = e.target === e.target.getStage();
+    if (clickedOnEmpty && e.evt.button === 0) {
+      e.evt.preventDefault();
+      isPanningRef.current = true;
+      lastPanPointRef.current = { x: e.evt.clientX, y: e.evt.clientY };
+      panAccumRef.current = { x: 0, y: 0 };
+      const stage = e.target.getStage();
+      if (stage) stage.container().style.cursor = 'grabbing';
+    }
+  }, []);
+
+  const handleMouseMove = useCallback((e: Konva.KonvaEventObject<MouseEvent>): void => {
+    if (!isPanningRef.current) {
+      // Update cursor on empty canvas
+      const isOverEmpty = e.target === e.target.getStage();
+      const stage = e.target.getStage();
+      if (stage) stage.container().style.cursor = isOverEmpty ? 'grab' : 'default';
+      return;
+    }
+    e.evt.preventDefault();
+    const deltaX = e.evt.clientX - lastPanPointRef.current.x;
+    const deltaY = e.evt.clientY - lastPanPointRef.current.y;
+
+    // Apply pan directly to stage (no Zustand overhead per-frame)
+    const stage = e.target.getStage();
+    if (stage) {
+      stage.x(stage.x() + deltaX);
+      stage.y(stage.y() + deltaY);
+      stage.batchDraw();
+    }
+
+    panAccumRef.current.x += deltaX;
+    panAccumRef.current.y += deltaY;
+    lastPanPointRef.current = { x: e.evt.clientX, y: e.evt.clientY };
+  }, []); // No Zustand dep — pan flushed on mouseUp
+
+  const handleMouseUp = useCallback((e: Konva.KonvaEventObject<MouseEvent>): void => {
+    if (isPanningRef.current) {
+      isPanningRef.current = false;
+      const { x, y } = panAccumRef.current;
+      if (x !== 0 || y !== 0) {
+        pan(x, y);
+        panAccumRef.current = { x: 0, y: 0 };
+      }
+      const stage = e.target.getStage();
+      if (stage) stage.container().style.cursor = 'grab';
+    }
+  }, [pan]);
+
+  return { handleWheel, handleMouseDown, handleMouseMove, handleMouseUp, canvasWidth, canvasHeight };
+}

package/src/hooks/useViewportNodes.ts

@@ -0,0 +1,59 @@
+// ─── useViewportNodes ─────────────────────────────────────────────────────────
+//
+// Returns the subset of nodes currently visible in the viewport.
+// Signature: useViewportNodes(nodes, levelFilter?, skipCulling?)
+//
+// When skipCulling=true (e.g. during layer transitions) all nodes are returned
+// so the full layer is rendered when opacity ramps in.
+
+import { useMemo, useRef } from 'react';
+import type { FlatNode } from '@visualli/core';
+import { RBushSpatialIndex, getViewportVisibleNodes } from '@visualli/core';
+import { useViewportStore } from '../stores/useViewportStore';
+
+const SPATIAL_INDEX_THRESHOLD = 200;
+
+export function useViewportNodes(
+  nodes: FlatNode[],
+  levelFilter?: number,
+  skipCulling = false,
+  /** When true, skip culling so dragged nodes are always visible and the
+   *  spatial index (keyed on layout positions) is not consulted. */
+  isDragging = false,
+): FlatNode[] {
+  const { centerX, centerY, zoomLevel, canvasWidth, canvasHeight } = useViewportStore();
+
+  const indexRef     = useRef<RBushSpatialIndex | null>(null);
+  const nodesHashRef = useRef<number>(0);
+  const nodesHash    = nodes.length;
+
+  if (nodesHash !== nodesHashRef.current) {
+    nodesHashRef.current = nodesHash;
+    indexRef.current = null; // rebuild below
+  }
+
+  return useMemo(() => {
+    if (nodes.length === 0) return [];
+
+    if (!indexRef.current && nodes.length >= SPATIAL_INDEX_THRESHOLD && !skipCulling && !isDragging) {
+      indexRef.current = new RBushSpatialIndex();
+      indexRef.current.bulkLoad(nodes.map(n => ({
+        nodeId: n.id,
+        bounds: { minX: n.x, minY: n.y, maxX: n.x + n.width, maxY: n.y + n.height },
+      })));
+    }
+
+    return getViewportVisibleNodes({
+      nodes,
+      viewport: { centerX, centerY, zoomLevel, rotation: 0, visibleBounds: { minX: 0, minY: 0, maxX: 0, maxY: 0 } },
+      canvasWidth,
+      canvasHeight,
+      levelFilter,
+      skipCulling,
+      isDragging,
+      spatialIndex: indexRef.current,
+      spatialIndexThreshold: SPATIAL_INDEX_THRESHOLD,
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodes, levelFilter, skipCulling, isDragging, centerX, centerY, zoomLevel, canvasWidth, canvasHeight]);
+}

package/src/index.ts

@@ -0,0 +1,81 @@
+// ─── @visualli/react ─────────────────────────────────────────────────────────
+
+// ── Primary component (recommended for public use) ────────────────────────────────────────
+export { default as VisualliRenderer } from './VisualliRenderer';
+export type { VisualliRendererProps, VisualliTheme } from './VisualliRenderer';
+
+// ── Canvas component (for advanced integrations) ───────────────────────────────────────────
+export { default as VisualliCanvas } from './VisualliCanvas';
+export type { VisualliCanvasProps } from './VisualliCanvas';
+
+// ── Context and Provider ──────────────────────────────────────────────────────
+export { VisualliProvider, useVisualli } from './context/VisualliContext';
+export type { 
+  VisualliProviderProps, 
+  VisualliContextValue
+} from './context/VisualliContext';
+
+// Stores
+export { useNodeStore }           from './stores/useNodeStore';
+export { useViewportStore }       from './stores/useViewportStore';
+export { useSelectionStore, useRenderConfigStore } from './stores/stores';
+export type { INodeStore }        from './stores/useNodeStore';
+export type { IViewportStore }    from './stores/useViewportStore';
+
+// Hooks
+export { useKonvaRenderer }         from './hooks/useKonvaRenderer';
+export { useKonvaLayerTransition }  from './hooks/useKonvaLayerTransition';
+export { useViewportNodes }         from './hooks/useViewportNodes';
+export type { UseKonvaRendererOptions, UseKonvaRendererReturn } from './hooks/useKonvaRenderer';
+export type { LayerTransitionHandlers } from './hooks/useKonvaLayerTransition';
+
+// Animations
+export { KonvaLayerTransitionAnimator, konvaLayerTransitionAnimator } from './animations/konvaLayerTransition';
+export type { AnimatorViewport, TransitionCallbacks } from './animations/konvaLayerTransition';
+
+// Config helpers
+export {
+  ALL_BLOB_SHAPES,
+  ACTIVE_BLOB_TYPES,
+  BLOB_LAYER_CONFIG,
+  NODE_LAYER_CONFIG,
+  getBlobTypeForLayer,
+  BLOB_TEXT_OFFSETS,
+  drawBlobPath,
+  buildBlobPathData,
+  NODE_TEXT_BASE_FONT_PX,
+  DESCRIPTION_TEXT_BASE_FONT_PX,
+  computeNodeTextWorldScale,
+  computeNodeTextScreenScale,
+  computeOverlayScale,
+  computeEdgeLabelScale,
+} from './config';
+
+// Utils
+export {
+  getConnectionsForLayer,
+  getChildLayerForNode,
+  getLayerForNavigation,
+  calculateFitZoom,
+  calculateFitCenter,
+  calculateFitView,
+} from './utils/layerNavigation';
+export type { FitResult } from './utils/layerNavigation';
+
+// Sub-components (for advanced usage / composition)
+export { default as KonvaStage }          from './components/KonvaStage';
+export { default as KonvaNode }           from './components/KonvaNode';
+export { default as KonvaEdge }           from './components/KonvaEdge';
+export { default as KonvaNodeLayer }      from './components/KonvaNodeLayer';
+export { default as KonvaEdgeLayer }      from './components/KonvaEdgeLayer';
+export { default as KonvaContainer }      from './components/KonvaContainer';
+export { default as KonvaContainerLayer } from './components/KonvaContainerLayer';
+export { default as NavigationStack }     from './components/NavigationStack';
+export { default as ZoomControls }        from './components/ZoomControls';
+export { default as SketchyBoxKonva }     from './components/SketchyBoxKonva';
+export type { NavStackEntry }             from './components/NavigationStack';
+export type { KonvaNodeProps }            from './components/KonvaNode';
+export type { KonvaEdgeProps }            from './components/KonvaEdge';
+export type { KonvaStageProps }           from './components/KonvaStage';
+export type { ContainerGroup }            from './components/KonvaContainerLayer';
+

package/src/konvaCompat.ts

@@ -0,0 +1,29 @@
+// ─── konvaCompat ──────────────────────────────────────────────────────────────
+//
+// react-konva@18.x defines KonvaNodeComponent with return type
+// `ReactNode | Promise<ReactNode>`.  @types/react v19 tightened the JSX checker
+// so that signature no longer satisfies `(props: any) => ReactNode`, causing
+// TS2786 errors everywhere a Konva primitive is used as JSX.
+//
+// The fix: re-export every Konva primitive cast to React.ComponentType<any>.
+// This is purely a type-level shim — no runtime behaviour changes.
+
+import {
+  Stage, Layer, Group, Shape, Path, Rect, Text, Arrow, Line, Circle, TextPath,
+} from 'react-konva';
+import type React from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type C = React.ComponentType<any>;
+
+export const KStage    = Stage    as unknown as C;
+export const KLayer    = Layer    as unknown as C;
+export const KGroup    = Group    as unknown as C;
+export const KShape    = Shape    as unknown as C;
+export const KPath     = Path     as unknown as C;
+export const KRect     = Rect     as unknown as C;
+export const KText     = Text     as unknown as C;
+export const KArrow    = Arrow    as unknown as C;
+export const KLine     = Line     as unknown as C;
+export const KCircle   = Circle   as unknown as C;
+export const KTextPath = TextPath as unknown as C;

package/src/stores/index.ts

@@ -0,0 +1,3 @@
+export * from './useNodeStore.js';
+export * from './useViewportStore.js';
+export * from './stores.js';

package/src/stores/stores.ts

@@ -0,0 +1,17 @@
+// ─── Selection Store ──────────────────────────────────────────────────────────
+
+import { create } from 'zustand';
+import { selectionStore, renderConfigStore } from '@visualli/core';
+import type { ISelectionStore, IRenderConfigStore } from '@visualli/core';
+
+export const useSelectionStore = create<ISelectionStore>((set, get, store) => {
+  selectionStore.subscribe((state) => set(state));
+  return selectionStore.getState();
+});
+
+// ─── Render Config Store ──────────────────────────────────────────────────────
+
+export const useRenderConfigStore = create<IRenderConfigStore>((set, get, store) => {
+  renderConfigStore.subscribe((state) => set(state));
+  return renderConfigStore.getState();
+});