@visualli/react 0.1.7 → 0.2.1

package/src/components/KonvaNodeLayer.tsx

@@ -1,61 +1,129 @@
 // ─── KonvaNodeLayer ───────────────────────────────────────────────────────────
 //
-// Konva <Layer> that renders all visible FlatNodes.
-// Uses viewport culling and passes external hover/pressed state to each node.
+// One Konva <Shape> paints every visible idea. Culling uses the stage's live
+// transform at draw time (so panning, which moves the stage directly without
+// React state, never shows blank areas) and the idea's centred visual bounds
+// (RBush above 200 ideas). Hit testing stays outside Konva (stage-level RBush).
 
-import React, { useRef, useLayoutEffect, useEffect, useMemo } from 'react';
-import { KLayer as Layer } from '../konvaCompat';
+import React, { useRef, useLayoutEffect, useMemo } from 'react';
+import { KLayer as Layer, KShape as Shape } from '../konvaCompat';
 import type Konva from 'konva';
-import type { FlatNode } from '@visualli/core';
-import { useViewportStore } from '../stores/useViewportStore';
+import { CANVAS_STYLE, RBushSpatialIndex, layerBlooms, shadowsShown, intersectsViewport, nodeBounds, type FlatNode } from '@visualli/core';
 import { useNodeStore } from '../stores/useNodeStore';
-import { useViewportNodes } from '../hooks/useViewportNodes';
-import KonvaNode from './KonvaNode';
+import { DEFAULT_DESIGN, type Design } from '../design/design';
+import { useFontsEpoch } from '../design/runtime';
+import { IDLE, drawIdea, type IdeaState } from '../design/drawing';
+import { HoverTweens, type RevealClock, type Arrival } from '../design/choreography';
+import { useFrames } from './useFrames';
 
+const SPATIAL_INDEX_THRESHOLD = 200;
 export interface KonvaNodeLayerProps {
   nodes?: FlatNode[];
   isTransitioning?: boolean;
   isDragging?: boolean;
   hoveredNodeId?: string | null;
   pressedNodeId?: string | null;
+  selectedNodeId?: string | null;
+  /** Idea with keyboard focus (accessible layer). */
+  focusedNodeId?: string | null;
+  design?: Design;
+  /** The layer's arrival timeline (bloom). Omit for no arrival animation. */
+  clock?: RevealClock;
+  /** Touch layout (`.vi-map.is-touch`): the other ideas fade while one is peeked. */
+  touch?: boolean;
+  /** Idea whose peek (sheet) is open on touch. */
+  peekedNodeId?: string | null;
+}
+
+/** World-space rectangle currently visible in the stage. */
+export function stageViewRect(stage: Konva.Stage) {
+  const s = stage.scaleX() || 1;
+  return { minX: -stage.x() / s, minY: -stage.y() / s, maxX: (stage.width() - stage.x()) / s, maxY: (stage.height() - stage.y()) / s };
 }
 
 export default function KonvaNodeLayer({
   nodes: propNodes,
-  isTransitioning = false,
   isDragging = false,
   hoveredNodeId = null,
   pressedNodeId = null,
+  selectedNodeId = null,
+  focusedNodeId = null,
+  design = DEFAULT_DESIGN,
+  clock,
+  touch = false,
+  peekedNodeId = null,
 }: KonvaNodeLayerProps) {
-  const layerRef  = useRef<Konva.Layer | null>(null);
-  const zoomLevel = useViewportStore(s => s.zoomLevel);
-  const storeNodes = useNodeStore(s => s.nodes);
-  const allNodes: FlatNode[] = useMemo(
-    () => propNodes ?? Array.from(storeNodes.values()),
-    [propNodes, storeNodes],
-  );
-  const visibleNodes = useViewportNodes(allNodes, undefined, isTransitioning, isDragging);
+  const layerRef = useRef<Konva.Layer | null>(null);
+  const fonts = useFontsEpoch();
+  const storeNodes = useNodeStore((s) => s.nodes);
+  const nodes: FlatNode[] = useMemo(() => propNodes ?? Array.from(storeNodes.values()), [propNodes, storeNodes]);
+
+  // Spatial index over visual bounds. Rebuilt only when the node set changes; while dragging we draw everything.
+  const index = useMemo(() => {
+    if (nodes.length < SPATIAL_INDEX_THRESHOLD || isDragging) return null;
+    const idx = new RBushSpatialIndex();
+    idx.bulkLoad(nodes.map((n) => ({ nodeId: n.id, bounds: nodeBounds(n) })));
+    return idx;
+  }, [nodes, isDragging]);
+  const byId = useMemo(() => (index ? new Map(nodes.map((n) => [n.id, n])) : null), [index, nodes]);
+
+  // While an idea is peeked the others are dimmed (`.vi-node.is-dimmed`): unchanged by default, faded in the focus
+  // themes and on touch — the design system's opacities (CANVAS_STYLE from css/spec.css).
+  const highlighted = hoveredNodeId ?? peekedNodeId ?? selectedNodeId;
+  const N = CANVAS_STYLE.node;
+  const focusTheme = design.theme.startsWith('focus');
+  const dimOpacity = focusTheme ? (touch ? N.dimmedOpacityFocusTouch : N.dimmedOpacityFocus) : touch ? N.dimmedOpacityTouch : N.dimmedOpacity;
+  const dimOthers = highlighted !== null && dimOpacity !== 1;
+
+  // Hover / press / select: the design system's lift and ring turn, tweened rather than snapped.
+  const tweens = useRef(new HoverTweens()).current;
+  const frames = useFrames(layerRef, () => clock?.active() || tweens.active());
+  useLayoutEffect(() => {
+    const raised = new Set<string>();
+    if (hoveredNodeId) raised.add(hoveredNodeId);
+    if (pressedNodeId) raised.add(pressedNodeId);
+    if (selectedNodeId) raised.add(selectedNodeId);
+    if (tweens.set(raised, design.comfort.reducedMotion || !layerBlooms(nodes.length))) frames.run();
+  }, [hoveredNodeId, pressedNodeId, selectedNodeId, design.comfort.reducedMotion, layerBlooms(nodes.length), tweens, frames]); // eslint-disable-line react-hooks/exhaustive-deps
+  useLayoutEffect(() => clock?.subscribe(() => frames.run()), [clock, frames]);
+
+  useLayoutEffect(() => { layerRef.current?.batchDraw(); }, [nodes, index, design, fonts, hoveredNodeId, pressedNodeId, selectedNodeId, focusedNodeId, isDragging, touch, peekedNodeId]);
 
-  // Redraw synchronously before paint whenever visible content changes.
-  // Tied to data deps so it does not fire on every parent re-render.
-  useLayoutEffect(() => { layerRef.current?.batchDraw(); }, [visibleNodes, hoveredNodeId, pressedNodeId, isDragging, zoomLevel]);
+  const sceneFunc = (ctx: { _context: CanvasRenderingContext2D }, shape: Konva.Shape) => {
+    const stage = shape.getStage();
+    if (!stage) return;
+    const zoom = stage.scaleX() || 1;
+    const view = stageViewRect(stage);
+    let visible: FlatNode[];
+    if (isDragging) visible = nodes;
+    else if (index && byId) visible = index.query(view).map((id) => byId.get(id)!).filter(Boolean);
+    else visible = nodes.filter((n) => intersectsViewport(n, view));
 
-  // Redraw when transition state toggles (opacity wrapper controls visibility,
-  // but the canvas still needs to be current when it fades back in).
-  useEffect(() => { layerRef.current?.batchDraw(); }, [isTransitioning]);
+    const c = ctx._context;
+    const m = c.getTransform();
+    const opt = { shadows: !isDragging && shadowsShown(visible.length), k: Math.hypot(m.a, m.b), base: m, dimOpacity };
+    const st: IdeaState = { ...IDLE };
+    const now = performance.now();
+    const arrival: Arrival = { alpha: 1, scale: 1, dx: 0, dy: 0 };
+    const arriving = clock?.active(now) ?? false;
+    for (let i = 0; i < visible.length; i++) {
+      const n = visible[i]!;
+      st.hovered = n.id === hoveredNodeId;
+      st.pressed = n.id === pressedNodeId;
+      st.selected = n.id === selectedNodeId;
+      st.focused = n.id === focusedNodeId;
+      st.dimmed = dimOthers && n.id !== highlighted;
+      if (tweens.has(n.id)) { const p = tweens.progress(n.id, now); st.lift = p.lift; st.ring = p.ring; } else { st.lift = undefined; st.ring = undefined; }
+      st.arrival = arriving && clock!.node(n.id, n.x, n.y, now, arrival) ? arrival : null;
+      drawIdea(c, n, design, zoom, st, opt);
+    }
+    c.setTransform(m);
+    c.globalAlpha = 1;
+  };
 
   return (
-    <Layer ref={layerRef} name="nodes">
-      {visibleNodes.map(n => (
-        <KonvaNode
-          key={n.id}
-          node={n}
-          zoomLevel={zoomLevel}
-          isExternallyHovered={hoveredNodeId === n.id}
-          isExternallyPressed={pressedNodeId === n.id}
-          isDragging={isDragging}
-        />
-      ))}
+    <Layer ref={layerRef} name="nodes" listening={false}>
+      <Shape sceneFunc={sceneFunc} listening={false} perfectDrawEnabled={false} />
     </Layer>
   );
 }

package/src/components/KonvaStage.tsx

@@ -4,11 +4,14 @@
 //  • Binds canvas position/scale from the viewport store
 //  • Accepts optional event handlers (wheel, mouse, touch, context-menu)
 //  • Calls stage.destroy() on unmount (memory hygiene)
+//  • Renders at devicePixelRatio and follows it when it changes (browser zoom,
+//    moving the window to another display)
 
 import React, { useRef, useEffect, forwardRef } from 'react';
 import { KStage as Stage } from '../konvaCompat';
-import type Konva from 'konva';
+import Konva from 'konva';
 import { useViewportStore } from '../stores/useViewportStore';
+import { currentPixelRatio, watchPixelRatio } from '../design/runtime';
 
 export interface KonvaStageProps {
   children: React.ReactNode;
@@ -44,9 +47,21 @@ const KonvaStage = forwardRef<Konva.Stage, KonvaStageProps>(function KonvaStage(
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    return () => { internalRef.current?.destroy(); };
+    const stage = internalRef.current; // the stage this mount created
+    return () => { stage?.destroy(); };
   }, []);
 
+  // Konva reads the global pixelRatio when a layer creates its canvases, so set it
+  // before the first draw and re-size every canvas when the ratio changes later.
+  Konva.pixelRatio = currentPixelRatio();
+  useEffect(() => watchPixelRatio((ratio) => {
+    Konva.pixelRatio = ratio;
+    const stage = internalRef.current;
+    if (!stage) return;
+    stage.getLayers().forEach((l) => { l.getCanvas().setPixelRatio(ratio); l.getHitCanvas().setPixelRatio(ratio); });
+    stage.batchDraw();
+  }), []);
+
   const w = canvasWidth  || 800;
   const h = canvasHeight || 600;
   const stageX = w / 2 - centerX * zoomLevel;
@@ -70,7 +85,6 @@ const KonvaStage = forwardRef<Konva.Stage, KonvaStageProps>(function KonvaStage(
       onTouchMove={onTouchMove}
       onTouchEnd={onTouchEnd}
       draggable={false}
-      pixelRatio={1}
     >
       {children}
     </Stage>

package/src/components/NavigationStack.tsx

@@ -1,182 +1,39 @@
-// ─── NavigationStack ─────────────────────────────────────────────────────────
+// ─── NavigationStack ──────────────────────────────────────────────────────────
 //
-// Vertical navigation stack rendered as a fixed left-side overlay.
-// Matches the visualli.ai VisualliNavigationStack design:
-//   • Organic hand-drawn circle SVGs per level
-//   • Vertical connector lines between levels
-//   • Active level highlighted, previous levels clickable to navigate back
-//   • Font: Nunito
+// The depth trail. Kept as a named component for existing callers; it renders
+// the design system's trail (DepthTrail) from layer entries.
 
-import React, { memo, useState } from 'react';
+import React, { memo, useMemo } from 'react';
 import type { VisualliLayer } from '@visualli/core';
+import { DepthTrail, type IdeaPaint } from './Overlays';
 
 export interface NavStackEntry {
   layerId: string;
   layer: VisualliLayer;
   label: string;
+  /** Colour of the idea this layer opens from (the design system's TRAIL: the clicked idea's own colour); the first
+   *  entry, the map's title, is TRAIL.rootTopic. */
+  paint?: IdeaPaint;
 }
 
 export interface NavigationStackProps {
   stack: NavStackEntry[];
   onNavigateBack: (index: number) => void;
+  /** @deprecated theme comes from the surrounding data-theme. */
   isDark?: boolean;
+  /** Override the trail's default offset from the top-left corner. */
   top?: string;
   left?: string;
 }
 
-// Pastel fills cycled across levels
-const PASTEL_FILLS = [
-  '#b6eea7', '#d5bcfe', '#a1c4fc', '#a6f5d8',
-  '#ffc9de', '#c4e8ff', '#f0c4ff', '#ffe0a3',
-];
-
-// Organic circle SVG paths (small / active variants matching visualli.ai)
-const ORGANIC_PATHS_SMALL = [
-  'M13.72,6.31 C15.12,6.29 17.96,8.57 17.99,10.60 C18.07,14.62 16.72,17.90 11.12,18.00 C7.26,18.07 4.07,14.86 4.00,10.85 C3.93,6.83 9.44,2.02 13.69,4.85',
-  'M13.88,6.41 C15.28,6.43 18.04,8.82 18.00,10.85 C17.93,14.86 16.48,18.10 10.88,18.00 C7.02,17.93 3.94,14.62 4.01,10.60 C4.08,6.59 9.76,1.97 13.91,4.95',
-];
-const ORGANIC_PATH_ACTIVE =
-  'M16.55,9.22 C17.95,9.15 20.87,11.33 20.97,13.36 C21.19,17.37 19.96,20.70 14.37,20.99 C10.51,21.19 7.20,18.10 7.00,14.09 C6.78,10.08 12.13,5.08 16.48,7.77';
-
-const CIRCLE_SIZE = 14;
-
-function hexToRgba(hex: string, opacity: number): string {
-  const h = hex.replace('#', '');
-  const r = parseInt(h.substring(0, 2), 16);
-  const g = parseInt(h.substring(2, 4), 16);
-  const b = parseInt(h.substring(4, 6), 16);
-  return `rgba(${r},${g},${b},${opacity})`;
-}
-
-const OrganicCircle = memo(function OrganicCircle({
-  size, fill, stroke, strokeWidth, variant, isActive,
-}: {
-  size: number; fill: string; stroke: string; strokeWidth: number; variant: number; isActive?: boolean;
-}) {
-  const path = isActive ? ORGANIC_PATH_ACTIVE : ORGANIC_PATHS_SMALL[variant % ORGANIC_PATHS_SMALL.length];
-  const vb   = isActive ? '4 3 20 20' : '2 1 18 18';
-  const vbSz = isActive ? 20 : 18;
-  const sw   = strokeWidth * vbSz / size;
-  return (
-    <svg width={size} height={size} viewBox={vb} fill="none" style={{ display: 'block' }}>
-      <path d={path} fill={fill} fillOpacity={1} />
-      <path d={path} fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" />
-    </svg>
+const NavigationStack = memo(function NavigationStack({ stack, onNavigateBack, top, left }: NavigationStackProps) {
+  const entries = useMemo(
+    () => stack.map((e) => ({ layerId: e.layerId, label: e.label, level: e.layer.level, paint: e.paint ?? {} })),
+    [stack],
   );
-});
-
-const NavigationStack = memo(function NavigationStack({
-  stack,
-  onNavigateBack,
-  isDark = false,
-  top = '16px',
-  left = '16px',
-}: NavigationStackProps) {
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-
-  // Always render at least the root entry so the user knows where they are.
-  if (stack.length === 0) return null;
-
-  const visitedStroke  = isDark ? '#908e8c' : '#747270';
-  const visitedText    = isDark ? '#908e8c' : '#747270';
-  const activeStroke   = isDark ? '#e8e6e4' : '#1a1a18';
-  const activeText     = isDark ? '#e8e6e4' : '#1a1a18';
-  const connectorColor = isDark ? '#908e8c' : '#747270';
-  const connectorMarginLeft = 10.5; // padding(4) + circleHalf(7) - connectorHalf(0.5)
-  const currentIndex = stack.length - 1;
-
   return (
-    <div
-      data-help="navigation-stack"
-      style={{
-        position: 'absolute',
-        top,
-        left,
-        zIndex: 30,
-        pointerEvents: 'auto',
-      }}
-    >
-      <div style={{ display: 'flex', flexDirection: 'column', padding: '8px' }}>
-        {stack.flatMap((entry, index) => {
-          const isCurrent   = index === currentIndex;
-          const isClickable = index < currentIndex;
-          const isHovered   = hoveredIndex === index;
-          const pastelFill  = PASTEL_FILLS[index % PASTEL_FILLS.length];
-          const rowBg = isCurrent
-            ? hexToRgba(pastelFill, 0.6)
-            : isHovered && isClickable
-            ? hexToRgba(pastelFill, 0.3)
-            : 'transparent';
-
-          const items: React.ReactNode[] = [];
-
-          if (index > 0) {
-            items.push(
-              <div
-                key={`conn-${index}`}
-                style={{
-                  width: '1px',
-                  height: '20px',
-                  marginLeft: `${connectorMarginLeft}px`,
-                  marginTop: '-6px',
-                  marginBottom: '-6px',
-                  background: connectorColor,
-                  alignSelf: 'flex-start',
-                  flexShrink: 0,
-                  position: 'relative',
-                  zIndex: 1,
-                }}
-              />,
-            );
-          }
-
-          items.push(
-            <div
-              key={`${entry.layerId}-${index}`}
-              style={{
-                position: 'relative',
-                zIndex: 2,
-                alignSelf: 'flex-start',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '4px',
-                height: '22px',
-                padding: '4px',
-                borderRadius: '8px',
-                cursor: isClickable ? 'pointer' : 'default',
-                background: rowBg,
-                transition: 'background 0.15s',
-              }}
-              onMouseEnter={() => setHoveredIndex(index)}
-              onMouseLeave={() => setHoveredIndex(null)}
-              onClick={e => { e.stopPropagation(); if (isClickable) onNavigateBack(index); }}
-            >
-              <div style={{ width: CIRCLE_SIZE, height: CIRCLE_SIZE, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, zIndex: 4 }}>
-                {isCurrent ? (
-                  <OrganicCircle size={CIRCLE_SIZE} fill={pastelFill} stroke={activeStroke} strokeWidth={1.5} variant={index} isActive />
-                ) : (
-                  <OrganicCircle size={CIRCLE_SIZE} fill={pastelFill} stroke={visitedStroke} strokeWidth={1} variant={index} />
-                )}
-              </div>
-              <span
-                style={{
-                  fontFamily: "'Nunito', sans-serif",
-                  fontSize: isCurrent || (isHovered && isClickable) ? '11px' : '9px',
-                  fontWeight: isCurrent ? 600 : 400,
-                  color: isCurrent ? activeText : visitedText,
-                  lineHeight: 1,
-                  whiteSpace: 'nowrap',
-                  transition: 'color 0.15s, font-size 0.15s',
-                }}
-              >
-                {entry.label}
-              </span>
-            </div>,
-          );
-
-          return items;
-        })}
-      </div>
+    <div className="vi-map__trail" style={top || left ? { top, left } : undefined}>
+      <DepthTrail stack={entries} onNavigateBack={onNavigateBack} />
     </div>
   );
 });