@visualli/react 0.1.7 → 0.2.1

package/src/stores/useViewportStore.ts

@@ -18,11 +18,16 @@ import {
 export interface IViewportStore extends ViewportState {
   canvasWidth:  number;
   canvasHeight: number;
+  /** The layer's fit to view (scale and centre): zoom is shown and limited (VIEW) relative to it, as in the design system. */
+  fitScale:     number;
+  fitCenterX:   number;
+  fitCenterY:   number;
 
   pan:              (deltaX: number, deltaY: number) => void;
   zoom:             (delta: number, pivotX?: number, pivotY?: number) => void;
   setCenter:        (x: number, y: number) => void;
   setZoom:          (level: number) => void;
+  setFit:           (scale: number, centerX: number, centerY: number) => void;
   updateCanvasSize: (width: number, height: number) => void;
 
   getVisibleBounds: () => ViewportState['visibleBounds'];
@@ -52,6 +57,9 @@ export const useViewportStore = create<IViewportStore>((set, get) => {
     ...init,
     canvasWidth:  DEFAULT_CANVAS_WIDTH,
     canvasHeight: DEFAULT_CANVAS_HEIGHT,
+    fitScale:     1,
+    fitCenterX:   0,
+    fitCenterY:   0,
 
     pan: (dx, dy) => set((s) => {
       const updated = recalculateViewportBounds(panViewport(dx, dy, getVP(s)), s.canvasWidth, s.canvasHeight);
@@ -60,7 +68,7 @@ export const useViewportStore = create<IViewportStore>((set, get) => {
 
     zoom: (delta, pivotX, pivotY) => set((s) => {
       const updated = recalculateViewportBounds(
-        zoomViewport(delta, getVP(s), pivotX, pivotY, s.canvasWidth, s.canvasHeight),
+        zoomViewport(delta, getVP(s), pivotX, pivotY, s.canvasWidth, s.canvasHeight, s.fitScale),
         s.canvasWidth, s.canvasHeight,
       );
       return { centerX: updated.centerX, centerY: updated.centerY, zoomLevel: updated.zoomLevel, visibleBounds: updated.visibleBounds };
@@ -72,11 +80,13 @@ export const useViewportStore = create<IViewportStore>((set, get) => {
     }),
 
     setZoom: (level) => set((s) => {
-      const clamped = clampZoom(level);
+      const clamped = clampZoom(level, s.fitScale);
       const updated = recalculateViewportBounds({ ...getVP(s), zoomLevel: clamped }, s.canvasWidth, s.canvasHeight);
       return { zoomLevel: updated.zoomLevel, visibleBounds: updated.visibleBounds };
     }),
 
+    setFit: (scale, centerX, centerY) => set({ fitScale: scale > 0 ? scale : 1, fitCenterX: centerX, fitCenterY: centerY }),
+
     updateCanvasSize: (w, h) => set((s) => {
       const updated = recalculateViewportBounds(getVP(s), w, h);
       return { canvasWidth: w, canvasHeight: h, visibleBounds: updated.visibleBounds };

package/src/animations/index.ts

@@ -1,2 +0,0 @@
-export { KonvaLayerTransitionAnimator, konvaLayerTransitionAnimator } from './konvaLayerTransition';
-export type { AnimatorViewport, NodeBounds, TransitionCallbacks } from './konvaLayerTransition';

package/src/animations/konvaLayerTransition.ts

@@ -1,223 +0,0 @@
-// ─── Konva Layer Transition Animator ─────────────────────────────────────────
-//
-// rAF-driven animation engine for layer navigation:
-//   animateZoomIntoLayer   — camera-dive into child layer
-//   animateZoomOutToParent — pull back to parent layer
-//   animateCrossFade       — simple cross-fade between two viewports
-//
-// No React dependencies — can be instantiated once and reused.
-
-import { easeInOutSine, easeOutCubic, easeZoomTransition } from '@visualli/core';
-import { ANIMATION_PHASES } from '@visualli/core';
-
-// ── Types ─────────────────────────────────────────────────────────────────────
-
-export interface AnimatorViewport {
-  centerX: number;
-  centerY: number;
-  zoomLevel: number;
-}
-
-export interface NodeBounds {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface TransitionCallbacks {
-  onUpdate: (state: { viewport: AnimatorViewport; opacity: number; backgroundColor: string }) => void;
-  onComplete: () => void;
-  onPhaseChange?: (phase: string) => void;
-}
-
-// ── Color helpers ─────────────────────────────────────────────────────────────
-
-interface RGB { r: number; g: number; b: number }
-
-function parseColor(color: string): RGB {
-  if (color.startsWith('#')) {
-    const h = color.slice(1);
-    return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16) };
-  }
-  const m = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-  return m ? { r: +m[1], g: +m[2], b: +m[3] } : { r: 255, g: 255, b: 255 };
-}
-
-function interpolateRgb(a: RGB, b: RGB, t: number): string {
-  const e = easeInOutSine(t);
-  return `rgb(${(a.r + (b.r - a.r) * e + 0.5) | 0},${(a.g + (b.g - a.g) * e + 0.5) | 0},${(a.b + (b.b - a.b) * e + 0.5) | 0})`;
-}
-
-// (easeZoomTransition is imported from @visualli/core — createCubicBezier(0.2, 0.8, 0.2, 1))
-
-function lerp(a: number, b: number, t: number): number { return a + (b - a) * t; }
-
-// ── Animator class ────────────────────────────────────────────────────────────
-
-export class KonvaLayerTransitionAnimator {
-  private rafId: number | null = null;
-  private timers: ReturnType<typeof setTimeout>[] = [];
-  private _active = false;
-
-  get active(): boolean { return this._active; }
-
-  cancel(): void {
-    if (this.rafId !== null) { cancelAnimationFrame(this.rafId); this.rafId = null; }
-    this.timers.forEach(clearTimeout);
-    this.timers = [];
-    this._active = false;
-  }
-
-  // ── Zoom into child layer ──────────────────────────────────────────────────
-
-  animateZoomIntoLayer(
-    current: AnimatorViewport,
-    targetNode: NodeBounds,
-    childCenter: { x: number; y: number },
-    fromColor: string,
-    toColor: string,
-    cb: TransitionCallbacks,
-    targetZoom = 1.0,
-    canvasWidth = 800,
-    canvasHeight = 600,
-  ): void {
-    if (this._active) return;
-    this._active = true;
-
-    // Timing constants pulled from ANIMATION_PHASES (single source of truth)
-    const ZOOM_DURATION     = ANIMATION_PHASES.ZOOM_IN.ZOOM_TO_TARGET;   // 500 ms
-    const FADE_OUT_DELAY    = ANIMATION_PHASES.ZOOM_IN.FADE_OUT_START;   // 120 ms
-    const FADE_OUT_DURATION = ANIMATION_PHASES.ZOOM_IN.FADE_OUT;         // 280 ms — completes at 400 ms
-    const SWAP_AT_MS        = ANIMATION_PHASES.ZOOM_IN.CONTENT_SWAP;     // 310 ms
-    const FADE_IN_DURATION  = ANIMATION_PHASES.ZOOM_IN.FADE_IN;          // 200 ms
-    const SETTLE_FACTOR     = 0.94;
-
-    const z0 = current.zoomLevel;
-    const dx = targetNode.x - current.centerX;
-    const dy = targetNode.y - current.centerY;
-    const vmin = Math.min(canvasWidth, canvasHeight);
-    const fillZoom = Math.max(4.0, (vmin * 1.5) / Math.max(targetNode.width, 100));
-
-    const fromRgb = parseColor(fromColor);
-    const toRgb   = parseColor(toColor);
-    const state   = { viewport: { centerX: 0, centerY: 0, zoomLevel: 0 }, opacity: 1, backgroundColor: fromColor };
-
-    const start = performance.now();
-    let swapped = false;
-    let fadeInStart = 0;
-
-    cb.onPhaseChange?.('zoom');
-
-    const tick = (now: number): void => {
-      if (!this._active) return;
-      const elapsed = now - start;
-
-      if (!swapped) {
-        if (elapsed >= SWAP_AT_MS) {
-          swapped = true;
-          fadeInStart = now;
-          state.viewport = { centerX: childCenter.x, centerY: childCenter.y, zoomLevel: targetZoom * SETTLE_FACTOR };
-          state.opacity = 0;
-          state.backgroundColor = toColor;
-          cb.onUpdate(state);
-          cb.onPhaseChange?.('swap');
-          this.rafId = requestAnimationFrame(tick);
-          return;
-        }
-        const rawT  = Math.min(elapsed / ZOOM_DURATION, 1);
-        const zoomT = easeZoomTransition(rawT);
-        const zl    = lerp(z0, fillZoom, zoomT);
-        state.viewport = {
-          centerX:   targetNode.x - dx * z0 * (1 - zoomT) / zl,
-          centerY:   targetNode.y - dy * z0 * (1 - zoomT) / zl,
-          zoomLevel: zl,
-        };
-        state.opacity = elapsed > FADE_OUT_DELAY
-          ? Math.max(0, 1 - easeOutCubic(Math.min((elapsed - FADE_OUT_DELAY) / FADE_OUT_DURATION, 1)))
-          : 1;
-        state.backgroundColor = interpolateRgb(fromRgb, toRgb, rawT);
-        cb.onUpdate(state);
-      } else {
-        const fi   = now - fadeInStart;
-        const ft   = Math.min(fi / FADE_IN_DURATION, 1);
-        const eased = easeOutCubic(ft);
-        state.viewport = { centerX: childCenter.x, centerY: childCenter.y, zoomLevel: lerp(targetZoom * SETTLE_FACTOR, targetZoom, eased) };
-        state.opacity = eased;
-        state.backgroundColor = toColor;
-        cb.onUpdate(state);
-        if (ft >= 1) { cb.onPhaseChange?.('fade-in'); this.rafId = null; this._complete(cb.onComplete); return; }
-      }
-      this.rafId = requestAnimationFrame(tick);
-    };
-    this.rafId = requestAnimationFrame(tick);
-  }
-
-  // ── Zoom out to parent layer ───────────────────────────────────────────────
-
-  animateZoomOutToParent(
-    current: AnimatorViewport,
-    parent: AnimatorViewport,
-    fromColor: string,
-    toColor: string,
-    cb: TransitionCallbacks,
-  ): void {
-    if (this._active) return;
-    this._active = true;
-
-    const FADE_OUT = ANIMATION_PHASES.ZOOM_OUT.FADE_OUT;
-    const FADE_IN  = ANIMATION_PHASES.ZOOM_OUT.FADE_IN;
-    const OPACITY_SETTLE = 66;
-
-    const fromRgb = parseColor(fromColor);
-    const toRgb   = parseColor(toColor);
-    const state   = { viewport: { centerX: 0, centerY: 0, zoomLevel: 0 }, opacity: 1, backgroundColor: fromColor };
-
-    const start = performance.now();
-    let swapped = false;
-    let fadeInStart = 0;
-
-    cb.onPhaseChange?.('fade-out');
-
-    const tick = (now: number): void => {
-      if (!this._active) return;
-      const elapsed = now - start;
-
-      if (!swapped) {
-        if (elapsed >= FADE_OUT) {
-          swapped = true; fadeInStart = now;
-          state.viewport = { centerX: parent.centerX, centerY: parent.centerY, zoomLevel: parent.zoomLevel * 5 };
-          state.opacity = 0;
-          state.backgroundColor = toColor;
-          cb.onUpdate(state); cb.onPhaseChange?.('zoom-back');
-          this.rafId = requestAnimationFrame(tick); return;
-        }
-        const rawT = Math.min(elapsed / FADE_OUT, 1);
-        const t    = easeOutCubic(rawT);
-        state.viewport = { centerX: current.centerX, centerY: current.centerY, zoomLevel: lerp(current.zoomLevel, current.zoomLevel * 0.6, t) };
-        state.opacity = 1 - t;
-        state.backgroundColor = interpolateRgb(fromRgb, toRgb, rawT);
-        cb.onUpdate(state);
-      } else {
-        const fi   = now - fadeInStart;
-        const rawT = Math.min(fi / FADE_IN, 1);
-        const t    = easeZoomTransition(rawT);
-        state.viewport = { centerX: parent.centerX, centerY: parent.centerY, zoomLevel: lerp(parent.zoomLevel * 5, parent.zoomLevel, t) };
-        state.opacity = fi < OPACITY_SETTLE ? 0 : easeZoomTransition(Math.min((fi - OPACITY_SETTLE) / (FADE_IN - OPACITY_SETTLE), 1));
-        state.backgroundColor = toColor;
-        cb.onUpdate(state);
-        if (rawT >= 1) { cb.onPhaseChange?.('fade-in'); this.rafId = null; this._complete(cb.onComplete); return; }
-      }
-      this.rafId = requestAnimationFrame(tick);
-    };
-    this.rafId = requestAnimationFrame(tick);
-  }
-
-  private _complete(onComplete: () => void): void {
-    this.timers.forEach(clearTimeout); this.timers = [];
-    this._active = false;
-    onComplete();
-  }
-}
-
-export const konvaLayerTransitionAnimator = new KonvaLayerTransitionAnimator();

package/src/components/SketchyBoxKonva.tsx

@@ -1,121 +0,0 @@
-// ─── SketchyBoxKonva ─────────────────────────────────────────────────────────
-//
-// Renders the hand-drawn tooltip box using an imperative Konva canvas.
-// Two paths are scaled to fit the container:
-//  - BACK_PATH : shadow stroke, offset 8px down
-//  - FRONT_PATH: filled main box, offset 5.65px right
-//
-// Matches the visualli.ai SketchyBoxKonva component exactly.
-
-import React, { useEffect, useRef } from 'react';
-import Konva from 'konva';
-
-const BACK_PATH =
-  'M0.653,0 L485.653,1 C485.653,1,484.782,152.773,' +
-  '486.653,165 C413.653,171,14.653,178,5.653,168' +
-  'C2.653,158,0.653,0,0.653,0';
-
-const FRONT_PATH =
-  'M485,167.524 L0,166.524' +
-  'C0,166.524,1.870,8.751,0,0' +
-  'C73,0,479,0,487,8' +
-  'C490,18,485,167.524,485,167.524';
-
-const BACK_W  = 486;
-const BACK_H  = 178;
-const FRONT_W = 490;
-const FRONT_H = 168;
-
-const BACK_OFFSET_Y  = 8;
-const FRONT_OFFSET_X = 5.65;
-const SHADOW_PAD     = 12;
-
-export interface SketchyBoxKonvaProps {
-  children: React.ReactNode;
-  fill:      string;
-  stroke:    string;
-  backStroke: string;
-  padding?: string;
-}
-
-const SketchyBoxKonva: React.FC<SketchyBoxKonvaProps> = ({
-  children,
-  fill,
-  stroke,
-  backStroke,
-  padding = '1rem 1.25rem',
-}) => {
-  const wrapperRef      = useRef<HTMLDivElement>(null);
-  const konvaContainerRef = useRef<HTMLDivElement>(null);
-  const stageRef        = useRef<Konva.Stage | null>(null);
-
-  useEffect(() => {
-    const wrapper = wrapperRef.current;
-    const konvaEl = konvaContainerRef.current;
-    if (!wrapper || !konvaEl) return;
-
-    function draw(W: number, H: number) {
-      if (!konvaEl || W <= 0 || H <= 0) return;
-      if (stageRef.current) { stageRef.current.destroy(); stageRef.current = null; }
-
-      const stage = new Konva.Stage({ container: konvaEl, width: W, height: H });
-      const layer = new Konva.Layer({ listening: false });
-      const contentH = H - SHADOW_PAD;
-
-      layer.add(new Konva.Path({
-        x: 0, y: BACK_OFFSET_Y,
-        data: BACK_PATH,
-        scaleX: W / BACK_W,
-        scaleY: contentH / BACK_H,
-        fill: '#ffffff',
-        stroke: backStroke,
-        strokeWidth: 2,
-        strokeScaleEnabled: false,
-        listening: false,
-      }));
-
-      layer.add(new Konva.Path({
-        x: FRONT_OFFSET_X, y: 0,
-        data: FRONT_PATH,
-        scaleX: (W - FRONT_OFFSET_X) / FRONT_W,
-        scaleY: contentH / FRONT_H,
-        fill,
-        stroke,
-        strokeWidth: 3,
-        strokeScaleEnabled: false,
-        listening: false,
-      }));
-
-      stage.add(layer);
-      stageRef.current = stage;
-    }
-
-    draw(wrapper.offsetWidth, wrapper.offsetHeight);
-
-    const ro = new ResizeObserver(entries => {
-      const el = entries[0].target as HTMLElement;
-      draw(el.offsetWidth, el.offsetHeight);
-    });
-    ro.observe(wrapper);
-
-    return () => {
-      ro.disconnect();
-      stageRef.current?.destroy();
-      stageRef.current = null;
-    };
-  }, [fill, stroke, backStroke]);
-
-  return (
-    <div ref={wrapperRef} style={{ position: 'relative', paddingBottom: `${SHADOW_PAD}px` }}>
-      <div
-        ref={konvaContainerRef}
-        style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0, overflow: 'hidden' }}
-      />
-      <div style={{ position: 'relative', padding, zIndex: 1 }}>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default SketchyBoxKonva;

package/src/config/blobShapes.ts

@@ -1,204 +0,0 @@
-// ─── Blob Shapes Configuration ───────────────────────────────────────────────
-//
-// Blob shapes are centered at (0, 0). Coordinates are relative — multiply by
-// (radiusX, radiusY) to get world coords. Drawing uses closed quadratic bezier
-// curves through midpoints of consecutive control points (same as visualli.ai).
-//
-// Shapes match the visualli.ai reference designs exactly.
-
-export interface BlobPoint { x: number; y: number }
-export type BlobShape = ReadonlyArray<BlobPoint>;
-
-// ── Blob background layer depth config ────────────────────────────────────────
-// Index 0 = outermost layer (rendered first, behind the top blob).
-
-export const BLOB_LAYER_CONFIG = [
-  { opacity: 0.3, rotation: -15, scaleUp: 1.30, strokeWidth: 3, dash: [6, 4] as [number, number] },
-  { opacity: 0.4, rotation: -10, scaleUp: 1.20, strokeWidth: 1, dash: undefined },
-  { opacity: 0.5, rotation: -5,  scaleUp: 1.10, strokeWidth: 2, dash: undefined },
-] as const;
-
-export const NODE_LAYER_CONFIG = { opacity: 1, rotation: 0, strokeWidth: 3 } as const;
-
-// ── Six organic blob variants ─────────────────────────────────────────────────
-export const ALL_BLOB_SHAPES: ReadonlyArray<BlobShape> = [
-  // Shape 0 · Blob 1 (root / L0)
-  [
-    { x:  1.12, y:  0.00 }, { x:  0.86, y:  0.56 }, { x:  0.46, y:  0.94 },
-    { x: -0.08, y:  1.06 }, { x: -0.68, y:  0.82 }, { x: -0.96, y:  0.08 },
-    { x: -0.55, y: -0.82 }, { x:  0.04, y: -1.02 }, { x:  0.72, y: -0.80 },
-    { x:  1.08, y: -0.38 },
-  ],
-  // Shape 1 · Blob 2
-  [
-    { x: -0.489, y: -0.625 }, { x: -0.384, y: -0.716 }, { x: -0.285, y: -0.792 },
-    { x: -0.189, y: -0.855 }, { x: -0.090, y: -0.903 }, { x:  0.014, y: -0.932 },
-    { x:  0.129, y: -0.940 }, { x:  0.255, y: -0.924 }, { x:  0.412, y: -0.876 },
-    { x:  0.516, y: -0.832 }, { x:  0.612, y: -0.780 }, { x:  0.695, y: -0.725 },
-    { x:  0.767, y: -0.666 }, { x:  0.830, y: -0.606 }, { x:  0.885, y: -0.546 },
-    { x:  0.933, y: -0.486 }, { x:  0.979, y: -0.425 }, { x:  1.006, y: -0.385 },
-    { x:  1.034, y: -0.334 }, { x:  1.058, y: -0.276 }, { x:  1.078, y: -0.209 },
-    { x:  1.092, y: -0.133 }, { x:  1.101, y: -0.046 }, { x:  1.102, y:  0.052 },
-    { x:  1.094, y:  0.173 }, { x:  1.083, y:  0.244 }, { x:  1.063, y:  0.324 },
-    { x:  1.034, y:  0.401 }, { x:  0.996, y:  0.477 }, { x:  0.948, y:  0.549 },
-    { x:  0.889, y:  0.617 }, { x:  0.820, y:  0.681 }, { x:  0.735, y:  0.741 },
-    { x:  0.658, y:  0.783 }, { x:  0.569, y:  0.822 }, { x:  0.474, y:  0.855 },
-    { x:  0.372, y:  0.882 }, { x:  0.265, y:  0.904 }, { x:  0.156, y:  0.920 },
-    { x:  0.046, y:  0.931 }, { x: -0.069, y:  0.938 }, { x: -0.155, y:  0.935 },
-    { x: -0.250, y:  0.919 }, { x: -0.346, y:  0.890 }, { x: -0.443, y:  0.851 },
-    { x: -0.539, y:  0.800 }, { x: -0.633, y:  0.738 }, { x: -0.723, y:  0.667 },
-    { x: -0.808, y:  0.585 }, { x: -0.882, y:  0.501 }, { x: -0.944, y:  0.421 },
-    { x: -0.994, y:  0.343 }, { x: -1.034, y:  0.267 }, { x: -1.064, y:  0.192 },
-    { x: -1.085, y:  0.120 }, { x: -1.097, y:  0.042 }, { x: -1.102, y:  0.001 },
-    { x: -1.090, y: -0.243 }, { x: -1.050, y: -0.365 }, { x: -0.990, y: -0.441 },
-    { x: -0.911, y: -0.479 }, { x: -0.819, y: -0.499 }, { x: -0.715, y: -0.517 },
-    { x: -0.605, y: -0.551 },
-  ],
-  // Shape 2 · Blob 3
-  [
-    { x:  0.003, y: -0.970 }, { x:  0.163, y: -0.984 }, { x:  0.286, y: -1.028 },
-    { x:  0.389, y: -1.096 }, { x:  0.488, y: -1.174 }, { x:  0.597, y: -1.210 },
-    { x:  0.728, y: -1.165 }, { x:  0.867, y: -1.036 }, { x:  0.996, y: -0.839 },
-    { x:  1.098, y: -0.590 }, { x:  1.158, y: -0.304 }, { x:  1.153, y:  0.012 },
-    { x:  1.080, y:  0.336 }, { x:  0.944, y:  0.639 }, { x:  0.756, y:  0.889 },
-    { x:  0.484, y:  1.072 }, { x:  0.339, y:  1.079 }, { x:  0.219, y:  1.051 },
-    { x:  0.131, y:  0.994 }, { x:  0.059, y:  0.939 }, { x:  0.008, y:  0.915 },
-    { x: -0.105, y:  0.931 }, { x: -0.176, y:  0.965 }, { x: -0.249, y:  1.005 },
-    { x: -0.345, y:  1.039 }, { x: -0.497, y:  1.055 }, { x: -0.672, y:  1.032 },
-    { x: -0.817, y:  0.952 }, { x: -0.945, y:  0.810 }, { x: -1.054, y:  0.600 },
-    { x: -1.160, y:  0.302 }, { x: -1.187, y: -0.011 }, { x: -1.165, y: -0.326 },
-    { x: -1.097, y: -0.599 }, { x: -0.991, y: -0.838 }, { x: -0.852, y: -0.912 },
-    { x: -0.695, y: -0.958 }, { x: -0.530, y: -0.988 }, { x: -0.357, y: -0.992 },
-    { x: -0.180, y: -0.983 },
-  ],
-  // Shape 3 · Blob 4
-  [
-    { x: -0.734, y: -1.127 }, { x: -0.656, y: -1.146 }, { x: -0.567, y: -1.142 },
-    { x: -0.468, y: -1.115 }, { x: -0.358, y: -1.079 }, { x: -0.238, y: -1.034 },
-    { x: -0.107, y: -0.989 }, { x:  0.035, y: -0.953 }, { x:  0.188, y: -0.929 },
-    { x:  0.325, y: -0.916 }, { x:  0.484, y: -0.896 }, { x:  0.650, y: -0.854 },
-    { x:  0.811, y: -0.770 }, { x:  0.955, y: -0.631 }, { x:  1.068, y: -0.422 },
-    { x:  1.138, y: -0.126 }, { x:  1.152, y:  0.272 }, { x:  1.121, y:  0.451 },
-    { x:  1.046, y:  0.602 }, { x:  0.928, y:  0.727 }, { x:  0.767, y:  0.833 },
-    { x:  0.565, y:  0.925 }, { x:  0.323, y:  1.001 }, { x:  0.042, y:  1.075 },
-    { x: -0.277, y:  1.142 }, { x: -0.368, y:  1.147 }, { x: -0.475, y:  1.136 },
-    { x: -0.589, y:  1.104 }, { x: -0.704, y:  1.050 }, { x: -0.815, y:  0.973 },
-    { x: -0.913, y:  0.871 }, { x: -0.993, y:  0.746 }, { x: -1.048, y:  0.593 },
-    { x: -1.109, y:  0.298 }, { x: -1.145, y:  0.018 }, { x: -1.154, y: -0.243 },
-    { x: -1.135, y: -0.482 }, { x: -1.085, y: -0.695 }, { x: -1.003, y: -0.874 },
-    { x: -0.886, y: -1.020 },
-  ],
-  // Shape 4 · Blob 5 (inverted Blob 4)
-  [
-    { x: -0.734, y:  1.127 }, { x: -0.656, y:  1.146 }, { x: -0.567, y:  1.142 },
-    { x: -0.468, y:  1.115 }, { x: -0.358, y:  1.079 }, { x: -0.238, y:  1.034 },
-    { x: -0.107, y:  0.989 }, { x:  0.035, y:  0.953 }, { x:  0.188, y:  0.929 },
-    { x:  0.325, y:  0.916 }, { x:  0.484, y:  0.896 }, { x:  0.650, y:  0.854 },
-    { x:  0.811, y:  0.770 }, { x:  0.955, y:  0.631 }, { x:  1.068, y:  0.422 },
-    { x:  1.138, y:  0.126 }, { x:  1.152, y: -0.272 }, { x:  1.121, y: -0.451 },
-    { x:  1.046, y: -0.602 }, { x:  0.928, y: -0.727 }, { x:  0.767, y: -0.833 },
-    { x:  0.565, y: -0.925 }, { x:  0.323, y: -1.001 }, { x:  0.042, y: -1.075 },
-    { x: -0.277, y: -1.142 }, { x: -0.368, y: -1.147 }, { x: -0.475, y: -1.136 },
-    { x: -0.589, y: -1.104 }, { x: -0.704, y: -1.050 }, { x: -0.815, y: -0.973 },
-    { x: -0.913, y: -0.871 }, { x: -0.993, y: -0.746 }, { x: -1.048, y: -0.593 },
-    { x: -1.109, y: -0.298 }, { x: -1.145, y: -0.018 }, { x: -1.154, y:  0.243 },
-    { x: -1.135, y:  0.482 }, { x: -1.085, y:  0.695 }, { x: -1.003, y:  0.874 },
-    { x: -0.886, y:  1.020 },
-  ],
-  // Shape 5 · Blob 6
-  [
-    { x:  0.001, y: -1.006 }, { x:  0.134, y: -1.001 }, { x:  0.262, y: -1.024 },
-    { x:  0.382, y: -1.073 }, { x:  0.498, y: -1.107 }, { x:  0.614, y: -1.105 },
-    { x:  0.733, y: -1.049 }, { x:  0.850, y: -0.932 }, { x:  0.953, y: -0.755 },
-    { x:  1.030, y: -0.529 }, { x:  1.067, y: -0.265 }, { x:  1.054, y:  0.018 },
-    { x:  0.986, y:  0.300 }, { x:  0.868, y:  0.557 }, { x:  0.715, y:  0.766 },
-    { x:  0.550, y:  0.909 }, { x:  0.396, y:  0.984 }, { x:  0.262, y:  1.005 },
-    { x:  0.148, y:  1.003 }, { x:  0.037, y:  1.008 }, { x: -0.083, y:  1.040 },
-    { x: -0.220, y:  1.118 }, { x: -0.360, y:  1.192 }, { x: -0.500, y:  1.234 },
-    { x: -0.650, y:  1.175 }, { x: -0.810, y:  1.045 }, { x: -0.990, y:  0.855 },
-    { x: -1.140, y:  0.610 }, { x: -1.240, y:  0.330 }, { x: -1.270, y:  0.040 },
-    { x: -1.275, y: -0.250 }, { x: -1.225, y: -0.500 }, { x: -1.080, y: -0.720 },
-    { x: -0.890, y: -0.920 }, { x: -0.734, y: -1.053 }, { x: -0.614, y: -1.112 },
-    { x: -0.498, y: -1.127 }, { x: -0.381, y: -1.110 }, { x: -0.261, y: -1.095 },
-    { x: -0.133, y: -1.058 }, { x:  0.001, y: -1.010 }, { x:  0.134, y: -1.001 },
-  ],
-];
-
-export const ACTIVE_BLOB_TYPES: ReadonlyArray<number> = [0, 1, 2, 3, 4, 5];
-
-/**
- * Per-shape text x-offset as a fraction of baseRadiusX.
- * Compensates for visually asymmetric blobs. Positive = right, negative = left.
- */
-export const BLOB_TEXT_OFFSETS: ReadonlyArray<number> = [0, 0, 0, 0, 0, -0.10];
-
-/**
- * Deterministic pseudo-random blob-type selector per tree level.
- * Root level (0) always uses shape 0; consecutive levels use different shapes.
- */
-export function getBlobTypeForLayer(level: number): number {
-  const numTypes = ACTIVE_BLOB_TYPES.length;
-  if (numTypes <= 1) return ACTIVE_BLOB_TYPES[0] ?? 0;
-  let currentType = 0;
-  for (let i = 1; i <= level; i++) {
-    const pseudoRandom = Math.floor(Math.abs(Math.sin((i + 1) * 12.9898) * 43758.5453));
-    const stepOffset = (pseudoRandom % (numTypes - 1)) + 1;
-    currentType = (currentType + stepOffset) % numTypes;
-  }
-  return ACTIVE_BLOB_TYPES[currentType];
-}
-
-/**
- * Draw the blob path onto a Konva canvas context (centered at 0,0).
- * Uses closed quadratic bezier curves through midpoints of control points.
- * Call this inside a Konva Shape's sceneFunc / hitFunc.
- */
-export function drawBlobPath(
-  ctx: { beginPath(): void; moveTo(x: number, y: number): void; quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void; closePath(): void },
-  radiusX: number,
-  radiusY: number,
-  blobType: number,
-): void {
-  const srcPts = ALL_BLOB_SHAPES[blobType] ?? ALL_BLOB_SHAPES[0];
-  const pts = srcPts.map(p => ({ x: p.x * radiusX, y: p.y * radiusY }));
-  ctx.beginPath();
-  const last  = pts[pts.length - 1];
-  const first = pts[0];
-  ctx.moveTo((last.x + first.x) / 2, (last.y + first.y) / 2);
-  for (let i = 0; i < pts.length; i++) {
-    const curr = pts[i];
-    const next = pts[(i + 1) % pts.length];
-    ctx.quadraticCurveTo(curr.x, curr.y, (curr.x + next.x) / 2, (curr.y + next.y) / 2);
-  }
-  ctx.closePath();
-}
-
-// Legacy export kept for consumers that may import buildBlobPathData.
-// Generates an SVG path string (less accurate than the sceneFunc approach).
-export function buildBlobPathData(
-  _shape: BlobShape,
-  cx: number,
-  cy: number,
-  width: number,
-  height: number,
-): string {
-  const rx = width / 2;
-  const ry = height / 2;
-  const blobType = 0;
-  const srcPts = ALL_BLOB_SHAPES[blobType];
-  const pts = srcPts.map(p => ({ x: cx + p.x * rx, y: cy + p.y * ry }));
-  const mid = (a: { x: number; y: number }, b: { x: number; y: number }) =>
-    ({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 });
-  const last  = pts[pts.length - 1];
-  const first = pts[0];
-  const s     = mid(last, first);
-  let d = `M ${s.x} ${s.y}`;
-  for (let i = 0; i < pts.length; i++) {
-    const curr = pts[i];
-    const next = pts[(i + 1) % pts.length];
-    const m    = mid(curr, next);
-    d += ` Q ${curr.x} ${curr.y} ${m.x} ${m.y}`;
-  }
-  d += ' Z';
-  return d;
-}

package/src/config/index.ts

@@ -1,21 +0,0 @@
-export {
-  ALL_BLOB_SHAPES,
-  ACTIVE_BLOB_TYPES,
-  BLOB_LAYER_CONFIG,
-  NODE_LAYER_CONFIG,
-  getBlobTypeForLayer,
-  BLOB_TEXT_OFFSETS,
-  drawBlobPath,
-  NODE_TEXT_BASE_FONT_PX,
-  DESCRIPTION_TEXT_BASE_FONT_PX,
-  CONTAINER_LABEL_BASE_FONT_PX,
-  EDGE_LABEL_BASE_FONT_PX,
-  OVERLAY_FONT_UPPER_BOOST_PX,
-  computeNodeTextWorldScale,
-  computeNodeTextScreenScale,
-  computeOverlayScale,
-  computeEdgeLabelScale,
-} from '@visualli/core';
-
-export { buildBlobPathData } from './blobShapes';
-export type { BlobPoint, BlobShape } from '@visualli/core';