@andespindola/brainlink 0.1.0-beta.112 → 0.1.0-beta.114

package/README.md

@@ -595,6 +595,8 @@ The graph UI shows:
 - realtime refresh while `--watch` is enabled
 - graph controls for zoom in, zoom out, fit visible nodes and reset-to-fit-all
 - wheel zoom (including `cmd+scroll` and `ctrl+scroll`) anchored to cursor position for faster navigation in large graphs
+- continuous target-scale interpolation for wheel/button zoom to avoid abrupt LOD jumps while keeping cursor-anchored focus
+- bloom-like navigation profile: wheel zoom now biases focus toward hovered/selected/hub nodes and applies subtle camera-anchor parallax so depth remains stable while zooming and panning
 - zoom-out floor for large and massive graphs, plus reset macro floor tied to hub-neighbor distance and first-level cluster spacing, with a tighter initial camera so the first graph appears as a closer cell instead of a distant mesh
 - keyboard shortcuts: `+` zoom in, `-` zoom out, `0` reset fit
 - double-click on canvas zooms in at cursor position

package/dist/application/frontend/client-js.js

@@ -13,8 +13,8 @@ const macroGalaxyZoomThreshold = 0.012
 const macroGalaxyEnterHysteresis = 0.86
 const macroGalaxyExitHysteresis = 1.24
 const galaxyDiscoveryEnabled = false
-const massiveAutoFitMacroScale = 0.013
-const defaultMacroScale = 0.013
+const massiveAutoFitMacroScale = 0.018
+const defaultMacroScale = 0.018
 const clusterCellPixelSize = 64
 const minNodePixelRadius = 2.3
 const viewportPaddingPx = 280
@@ -28,32 +28,38 @@ const ecosystemHubEdgeLimit = 120
 const ecosystemSiblingEdgeLimit = 180
 const ecosystemClusterScaleThreshold = 0.78
 const massiveEcosystemClusterScaleThreshold = 4.2
+const ecosystemClusterEnterHysteresis = 0.94
+const ecosystemClusterExitHysteresis = 1.1
 const ecosystemSubgraphScaleThreshold = 0.18
 const ecosystemMicroScaleThreshold = 0.08
 const ecosystemFocusedParentLimit = 2
 const ecosystemDepthNear = 80
 const ecosystemDepthFar = 2600
-const ecosystemDepthPerspective = 620
-const ecosystemDepthTiltY = 0.24
-const ecosystemDepthYaw = 0.22
-const ecosystemDepthPitch = 0.16
-const ecosystemDepthRadialGain = 0.09
+const ecosystemDepthPerspective = 560
+const ecosystemDepthTiltY = 0.3
+const ecosystemDepthYaw = 0.3
+const ecosystemDepthPitch = 0.24
+const ecosystemDepthRadialGain = 0.13
 const ecosystemDepthOrbitalMaxOffset = 160
-const ecosystemDepthMinScale = 0.24
-const ecosystemDepthOpacityFloor = 0.2
+const ecosystemDepthMinScale = 0.2
+const ecosystemDepthOpacityFloor = 0.16
 const graphDepthNear = 40
-const graphDepthFar = 1180
-const graphDepthPerspective = 520
-const graphDepthYaw = 0.34
-const graphDepthPitch = 0.24
-const graphDepthRadialGain = 0.18
-const graphDepthMinScale = 0.42
-const graphDepthOpacityFloor = 0.28
-const graphDepthEdgeOpacityFloor = 0.16
+const graphDepthFar = 1320
+const graphDepthPerspective = 430
+const graphDepthYaw = 0.42
+const graphDepthPitch = 0.3
+const graphDepthRadialGain = 0.24
+const graphDepthMinScale = 0.34
+const graphDepthOpacityFloor = 0.22
+const graphDepthEdgeOpacityFloor = 0.12
 const graphDepthProjectionNodeThreshold = 40
-const graphDepthProjectionNodeCap = 1200
-const graphDepthProjectionMinScale = 0.045
-const graphDepthProjectionMaxScale = 1.45
+const graphDepthProjectionNodeCap = 2600
+const graphDepthProjectionMinScale = 0.03
+const graphDepthProjectionMaxScale = 1.7
+const graphDepthProjectionEnterMinScale = graphDepthProjectionMinScale * 1.08
+const graphDepthProjectionExitMinScale = graphDepthProjectionMinScale * 0.88
+const graphDepthProjectionEnterMaxScale = graphDepthProjectionMaxScale * 0.92
+const graphDepthProjectionExitMaxScale = graphDepthProjectionMaxScale * 1.16
 const zoomRecoveryGuardMs = 4200
 const zoomCapTargetViewportShare = 0.72
 const meshEdgeScaleThreshold = 0.09
@@ -65,6 +71,17 @@ const dragSettleRounds = 3
 const wheelZoomExponent = 0.0009
 const wheelZoomExponentCap = 0.035
 const wheelZoomModifierBoost = 1.08
+const wheelZoomInputFloorCap = 0.976
+const wheelZoomInputCeilCap = 1.024
+const zoomAnimationSlowLerp = 0.18
+const zoomAnimationFastLerp = 0.36
+const zoomAnimationScaleSnap = 0.00008
+const zoomAnimationPositionSnap = 0.14
+const bloomZoomFocusMaxScreenDistance = 260
+const bloomZoomFocusFarStrength = 0.66
+const bloomZoomFocusNearStrength = 0.34
+const bloomCameraParallaxNearStrength = 0.2
+const bloomCameraParallaxFarStrength = 0.06
 const physicsDragFrameIntervalMs = 16
 const physicsIdleFrameIntervalMs = 78
 const physicsLargeGraphIdleFrameIntervalMs = 108
@@ -123,7 +140,18 @@ const state = {
   lastHoverHitAt: 0,
   lastManualZoomAt: 0,
   lastZoomFocus: { x: 0, y: 0, at: 0 },
-  macroViewActive: false
+  macroViewActive: false,
+  ecosystemViewActive: false,
+  depthProjectionActive: false,
+  zoomTransition: {
+    active: false,
+    source: 'generic',
+    screenX: 0,
+    screenY: 0,
+    worldX: 0,
+    worldY: 0,
+    targetScale: 1
+  }
 }
 
 const byId = id => document.getElementById(id)
@@ -1247,19 +1275,20 @@ const projectEcosystemPoint = (x, y, depth, anchor) => {
 
 const applyEcosystemDepthProjection = (clusters, edges, anchor) => {
   const levelIndexMap = ecosystemLevelIndexBySize()
+  const effectiveAnchor = applyBloomCameraParallax(anchor)
   const projectedClusters = []
   const clusterById = new Map()
 
   for (let index = 0; index < clusters.length; index += 1) {
     const cluster = clusters[index]
     const baseDepth = ecosystemDepthForCluster(cluster, levelIndexMap)
-    const radialDistance = Math.hypot(cluster.x - anchor.x, cluster.y - anchor.y)
+    const radialDistance = Math.hypot(cluster.x - effectiveAnchor.x, cluster.y - effectiveAnchor.y)
     const radialOffset = cluster.isHub ? 0 : Math.min(320, radialDistance * ecosystemDepthRadialGain)
     const orbitalOffset = cluster.isHub
       ? 0
-      : Math.sin(Math.atan2(cluster.y - anchor.y, cluster.x - anchor.x) * 2.2) * ecosystemDepthOrbitalMaxOffset
+      : Math.sin(Math.atan2(cluster.y - effectiveAnchor.y, cluster.x - effectiveAnchor.x) * 2.2) * ecosystemDepthOrbitalMaxOffset
     const depth = Math.max(0, baseDepth + radialOffset + orbitalOffset)
-    const projected = projectEcosystemPoint(cluster.x, cluster.y, depth, anchor)
+    const projected = projectEcosystemPoint(cluster.x, cluster.y, depth, effectiveAnchor)
     const baseOpacity = Number.isFinite(cluster.lodOpacity) ? cluster.lodOpacity : 1
     const depthScale = ecosystemDepthMinScale + (1 - ecosystemDepthMinScale) * projected.factor
     const depthOpacity = Math.max(
@@ -1591,12 +1620,107 @@ const cursorWorldPoint = () => {
   return screenToWorldPoint(screenX, screenY)
 }
 
+const bloomZoomFocusStrength = (scale) => {
+  if (scale <= 0.08) return bloomZoomFocusFarStrength
+  if (scale <= 0.2) return 0.58
+  if (scale <= 0.45) return 0.5
+  if (scale <= 0.9) return 0.42
+  return bloomZoomFocusNearStrength
+}
+
+const bloomCameraParallaxStrength = (scale) => {
+  if (scale <= 0.08) return bloomCameraParallaxNearStrength
+  if (scale <= 0.2) return 0.16
+  if (scale <= 0.45) return 0.12
+  return bloomCameraParallaxFarStrength
+}
+
+const screenPointForWorld = (worldX, worldY) => ({
+  x: worldX * state.transform.scale + state.transform.x,
+  y: worldY * state.transform.scale + state.transform.y
+})
+
+const bloomZoomFocusCandidate = (screenX, screenY) => {
+  const candidates = [state.hovered, state.selected, state.primaryHub].filter(Boolean)
+  if (candidates.length === 0) {
+    return null
+  }
+
+  let bestNode = null
+  let bestDistance = Number.POSITIVE_INFINITY
+  for (let index = 0; index < candidates.length; index += 1) {
+    const node = candidates[index]
+    const point = screenPointForWorld(nodeRenderX(node), nodeRenderY(node))
+    const distance = Math.hypot(point.x - screenX, point.y - screenY)
+    if (distance < bestDistance) {
+      bestDistance = distance
+      bestNode = node
+    }
+  }
+
+  if (!bestNode) {
+    return null
+  }
+
+  const scale = state.transform.scale
+  const allowDistance = scale <= 0.16 ? bloomZoomFocusMaxScreenDistance * 1.7 : bloomZoomFocusMaxScreenDistance
+  if (bestDistance > allowDistance) {
+    return null
+  }
+
+  return {
+    x: nodeRenderX(bestNode),
+    y: nodeRenderY(bestNode)
+  }
+}
+
+const resolveZoomAnchorWorldPoint = (screenX, screenY, source) => {
+  const cursorPoint = screenToWorldPoint(screenX, screenY)
+  if (source !== 'wheel') {
+    return cursorPoint
+  }
+
+  const focusCandidate = bloomZoomFocusCandidate(screenX, screenY)
+  if (!focusCandidate) {
+    return cursorPoint
+  }
+
+  const strength = bloomZoomFocusStrength(state.transform.scale)
+  return {
+    x: cursorPoint.x + (focusCandidate.x - cursorPoint.x) * strength,
+    y: cursorPoint.y + (focusCandidate.y - cursorPoint.y) * strength
+  }
+}
+
+const applyBloomCameraParallax = (anchor) => {
+  const cursorPoint = cursorWorldPoint()
+  if (!cursorPoint) {
+    return anchor
+  }
+
+  const strength = bloomCameraParallaxStrength(state.transform.scale)
+  return {
+    x: anchor.x + (cursorPoint.x - anchor.x) * strength,
+    y: anchor.y + (cursorPoint.y - anchor.y) * strength
+  }
+}
+
 const visibilityScaleBucket = (scale) => {
   const safeScale = Math.max(zoomRange.min, scale)
-  if (safeScale < 0.01) return Math.round(safeScale * 300_000)
-  if (safeScale < 0.05) return Math.round(safeScale * 120_000)
-  if (safeScale < 0.2) return Math.round(safeScale * 40_000)
-  return Math.round(safeScale * 8_000)
+  return Math.round(safeScale * 180_000)
+}
+
+const shouldRenderEcosystemClusterView = (nodeCount, scale) => {
+  const baseThreshold = nodeCount > massiveGraphNodeThreshold
+    ? massiveEcosystemClusterScaleThreshold
+    : ecosystemClusterScaleThreshold
+  const enterThreshold = baseThreshold * ecosystemClusterEnterHysteresis
+  const exitThreshold = baseThreshold * ecosystemClusterExitHysteresis
+  const shouldRender = state.ecosystemViewActive
+    ? scale <= exitThreshold
+    : scale <= enterThreshold
+  state.ecosystemViewActive = shouldRender
+  return shouldRender
 }
 
 const shouldRenderMacroGalaxyView = () => {
@@ -2462,7 +2586,7 @@ const currentZoomMax = () => {
 }
 
 const zoomFloorByNodeCount = (nodeCount) => {
-  if (nodeCount > massiveGraphNodeThreshold) return 0.0085
+  if (nodeCount > massiveGraphNodeThreshold) return 0.018
   if (nodeCount > largeGraphNodeThreshold) return 0.0032
   if (nodeCount > ecosystemActivationNodeThreshold) return 0.001
   return zoomRange.min
@@ -2483,6 +2607,52 @@ const clampTransformCoordinate = value => {
   return value
 }
 
+const clearZoomTransition = () => {
+  state.zoomTransition.active = false
+  state.zoomTransition.targetScale = state.transform.scale
+}
+
+const zoomTransitionLerp = (delta, source) => {
+  const normalizedDelta = Math.max(0, Math.min(1, delta / 32))
+  const base = zoomAnimationSlowLerp + (zoomAnimationFastLerp - zoomAnimationSlowLerp) * normalizedDelta
+  const sourceBoost = source === 'wheel' ? 1 : 1.25
+  return Math.max(0.08, Math.min(0.45, base * sourceBoost))
+}
+
+const applyZoomTransition = (delta) => {
+  if (!state.zoomTransition.active) {
+    return
+  }
+
+  const targetScale = clampScale(state.zoomTransition.targetScale)
+  const scaleDelta = targetScale - state.transform.scale
+  const targetX = clampTransformCoordinate(state.zoomTransition.screenX - state.zoomTransition.worldX * targetScale)
+  const targetY = clampTransformCoordinate(state.zoomTransition.screenY - state.zoomTransition.worldY * targetScale)
+  const scaleSettled = Math.abs(scaleDelta) <= zoomAnimationScaleSnap
+
+  if (scaleSettled) {
+    state.transform.scale = targetScale
+    state.transform.x = targetX
+    state.transform.y = targetY
+    clearZoomTransition()
+    return
+  }
+
+  const lerp = zoomTransitionLerp(delta, state.zoomTransition.source)
+  const nextScale = clampScale(state.transform.scale + scaleDelta * lerp)
+  state.transform.scale = nextScale
+  state.transform.x = clampTransformCoordinate(state.zoomTransition.screenX - state.zoomTransition.worldX * nextScale)
+  state.transform.y = clampTransformCoordinate(state.zoomTransition.screenY - state.zoomTransition.worldY * nextScale)
+  const settledX = Math.abs(targetX - state.transform.x) <= zoomAnimationPositionSnap
+  const settledY = Math.abs(targetY - state.transform.y) <= zoomAnimationPositionSnap
+  if (Math.abs(targetScale - nextScale) <= zoomAnimationScaleSnap && settledX && settledY) {
+    state.transform.scale = targetScale
+    state.transform.x = targetX
+    state.transform.y = targetY
+    clearZoomTransition()
+  }
+}
+
 const graphBounds = nodes => {
   if (nodes.length === 0) return null
   let minX = Number.POSITIVE_INFINITY
@@ -2537,7 +2707,7 @@ const macroFaceToFaceScale = (nodeCount, hubDistance) => {
 
   const rect = canvas.getBoundingClientRect()
   const viewportReference = Math.max(320, Math.min(rect.width, rect.height))
-  const share = nodeCount > massiveGraphNodeThreshold ? 0.14 : 0.12
+  const share = nodeCount > massiveGraphNodeThreshold ? 0.2 : 0.17
   const targetPx = Math.max(24, viewportReference * share)
   return targetPx / hubDistance
 }
@@ -2576,7 +2746,7 @@ const macroEcosystemFaceScale = (nodeCount) => {
 
   const rect = canvas.getBoundingClientRect()
   const viewportReference = Math.max(320, Math.min(rect.width, rect.height))
-  const targetShare = nodeCount > massiveGraphNodeThreshold ? 0.2 : 0.16
+  const targetShare = nodeCount > massiveGraphNodeThreshold ? 0.28 : 0.24
   const targetPx = Math.max(30, viewportReference * targetShare)
   return targetPx / nearestDistance
 }
@@ -2589,6 +2759,7 @@ const fitView = (options = { useFiltered: true, macro: false, preferHubCenter: t
 
   if (!bounds) {
     state.transform = { x: width / 2, y: height / 2, scale: 1 }
+    clearZoomTransition()
     state.offscreenFrameCount = 0
     state.recoveringViewport = false
     markRenderDirty()
@@ -2638,6 +2809,7 @@ const fitView = (options = { useFiltered: true, macro: false, preferHubCenter: t
     y: clampTransformCoordinate(height / 2 - centerY * resolvedScale),
     scale: clampScale(resolvedScale)
   }
+  clearZoomTransition()
   state.offscreenFrameCount = 0
   state.recoveringViewport = false
   markRenderDirty()
@@ -2662,6 +2834,7 @@ const focusPrimaryHub = () => {
     y: clampTransformCoordinate(height / 2 - hub.y * targetScale),
     scale: targetScale
   }
+  clearZoomTransition()
   state.offscreenFrameCount = 0
   markRenderDirty()
 }
@@ -3068,13 +3241,25 @@ const clusterOpacity = cluster =>
 const clusterDepth = cluster => Number.isFinite(cluster.depth) ? cluster.depth : ecosystemDepthNear
 const clusterDepthScale = cluster => Number.isFinite(cluster.depthScale) ? cluster.depthScale : 1
 
-const shouldProjectRenderNodesInDepth = () =>
-  state.renderClusters.length === 0 &&
-  state.renderNodes.length >= graphDepthProjectionNodeThreshold &&
-  state.renderNodes.length <= graphDepthProjectionNodeCap &&
-  state.transform.scale >= graphDepthProjectionMinScale &&
-  state.transform.scale <= graphDepthProjectionMaxScale &&
-  !state.pointer.down
+const shouldProjectRenderNodesInDepth = () => {
+  const withinNodeCountWindow =
+    state.renderClusters.length === 0 &&
+    state.renderNodes.length >= graphDepthProjectionNodeThreshold &&
+    state.renderNodes.length <= graphDepthProjectionNodeCap &&
+    !state.pointer.down
+
+  if (!withinNodeCountWindow) {
+    state.depthProjectionActive = false
+    return false
+  }
+
+  const scale = state.transform.scale
+  const shouldProject = state.depthProjectionActive
+    ? scale >= graphDepthProjectionExitMinScale && scale <= graphDepthProjectionExitMaxScale
+    : scale >= graphDepthProjectionEnterMinScale && scale <= graphDepthProjectionEnterMaxScale
+  state.depthProjectionActive = shouldProject
+  return shouldProject
+}
 
 const nodeProjectionAnchor = () => {
   const hub = state.primaryHub
@@ -3114,7 +3299,7 @@ const refreshRenderNodeDepthProjection = () => {
     return
   }
 
-  const anchor = nodeProjectionAnchor()
+  const anchor = applyBloomCameraParallax(nodeProjectionAnchor())
   let maxDistance = 1
   for (let index = 0; index < state.renderNodes.length; index += 1) {
     const node = state.renderNodes[index]
@@ -3312,12 +3497,9 @@ const computeRenderVisibility = () => {
     return
   }
 
-  const ecosystemScaleThreshold = state.visibleNodes.length > massiveGraphNodeThreshold
-    ? massiveEcosystemClusterScaleThreshold
-    : ecosystemClusterScaleThreshold
   if (
     state.ecosystemExpansionLevels.length > 0 &&
-    state.transform.scale <= ecosystemScaleThreshold &&
+    shouldRenderEcosystemClusterView(state.visibleNodes.length, state.transform.scale) &&
     state.ecosystemClusters.length > 0
   ) {
     const clusters = selectHierarchicalEcosystemClusters(viewport)
@@ -3331,6 +3513,7 @@ const computeRenderVisibility = () => {
     state.renderEdges = []
     return
   }
+  state.ecosystemViewActive = false
 
   if (state.visibleNodes.length <= 2000) {
     state.renderNodes = state.visibleNodes
@@ -3509,7 +3692,8 @@ const render = now => {
   const isInteracting =
     state.pointer.down ||
     state.renderVisibilityDirty ||
-    state.recoveringViewport
+    state.recoveringViewport ||
+    state.zoomTransition.active
   const minFrameIntervalMs = isInteracting ? 16 : backgroundFrameIntervalMs
   if (delta < minFrameIntervalMs) {
     requestAnimationFrame(render)
@@ -3523,6 +3707,7 @@ const render = now => {
   if (!hasValidTransform()) {
     resetView()
   }
+  applyZoomTransition(delta)
   ctx.clearRect(0, 0, width, height)
   webGlRenderer?.clear(width, height)
   if (state.nodes.length === 0) {
@@ -3752,12 +3937,23 @@ const selectNodeById = id => {
 
 const zoomAtPoint = (screenX, screenY, factor, source = 'generic') => {
   state.lastManualZoomAt = performance.now()
-  const effectiveFactor = factor
-  const nextScale = clampScale(state.transform.scale * effectiveFactor)
-  if (nextScale === state.transform.scale) {
+  const baseScale = state.zoomTransition.active
+    ? state.zoomTransition.targetScale
+    : state.transform.scale
+  const boundedFactor = source === 'wheel'
+    ? Math.max(wheelZoomInputFloorCap, Math.min(wheelZoomInputCeilCap, factor))
+    : factor
+  const nextScale = clampScale(baseScale * boundedFactor)
+  if (nextScale === baseScale && !state.zoomTransition.active) {
     return
   }
-  const worldPointAtCursor = screenToWorldPoint(screenX, screenY)
+  const worldPointAtCursor =
+    state.zoomTransition.active &&
+    state.zoomTransition.source === source &&
+    state.zoomTransition.screenX === screenX &&
+    state.zoomTransition.screenY === screenY
+      ? { x: state.zoomTransition.worldX, y: state.zoomTransition.worldY }
+      : resolveZoomAnchorWorldPoint(screenX, screenY, source)
   const worldX = worldPointAtCursor.x
   const worldY = worldPointAtCursor.y
   state.lastZoomFocus = {
@@ -3765,9 +3961,15 @@ const zoomAtPoint = (screenX, screenY, factor, source = 'generic') => {
     y: worldY,
     at: performance.now()
   }
-  state.transform.scale = clampScale(nextScale)
-  state.transform.x = clampTransformCoordinate(screenX - worldX * nextScale)
-  state.transform.y = clampTransformCoordinate(screenY - worldY * nextScale)
+  state.zoomTransition = {
+    active: true,
+    source,
+    screenX,
+    screenY,
+    worldX,
+    worldY,
+    targetScale: nextScale
+  }
   state.offscreenFrameCount = 0
   markRenderDirty()
 }
@@ -3797,7 +3999,11 @@ const wheelZoomFactor = event => {
     -exponentCap,
     Math.min(exponentCap, -normalizedDelta * sensitivity)
   )
-  return Math.exp(exponent)
+  const factor = Math.exp(exponent)
+  if (factor > 1) {
+    return Math.min(factor, wheelZoomInputCeilCap)
+  }
+  return Math.max(factor, wheelZoomInputFloorCap)
 }
 
 const handleWheelZoom = event => {
@@ -3881,6 +4087,7 @@ const bindEvents = () => {
     zoomAtPoint(cursorX, cursorY, 1.055)
   })
   canvas.addEventListener('pointerdown', event => {
+    clearZoomTransition()
     const point = worldPoint(event)
     const node = hitNode(point)
     state.pointer = { x: event.clientX, y: event.clientY, down: true, dragNode: node, moved: false }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andespindola/brainlink",
-  "version": "0.1.0-beta.112",
+  "version": "0.1.0-beta.114",
   "description": "Local-first knowledge memory for agents with Markdown, backlinks, indexing and context retrieval.",
   "type": "module",
   "license": "MIT",