@andespindola/brainlink 0.1.0-beta.111 → 0.1.0-beta.113

package/README.md

@@ -595,6 +595,7 @@ 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
 - 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.006
-const defaultMacroScale = 0.006
+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 = 560
-const graphDepthPerspective = 760
-const graphDepthYaw = 0.2
-const graphDepthPitch = 0.12
-const graphDepthRadialGain = 0.08
-const graphDepthMinScale = 0.58
-const graphDepthOpacityFloor = 0.42
-const graphDepthEdgeOpacityFloor = 0.24
-const graphDepthProjectionNodeThreshold = 120
-const graphDepthProjectionNodeCap = 980
-const graphDepthProjectionMinScale = 0.08
-const graphDepthProjectionMaxScale = 0.95
+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 = 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,12 @@ 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 physicsDragFrameIntervalMs = 16
 const physicsIdleFrameIntervalMs = 78
 const physicsLargeGraphIdleFrameIntervalMs = 108
@@ -123,7 +135,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)
@@ -1593,10 +1616,20 @@ const cursorWorldPoint = () => {
 
 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,8 +2495,8 @@ const currentZoomMax = () => {
 }
 
 const zoomFloorByNodeCount = (nodeCount) => {
-  if (nodeCount > massiveGraphNodeThreshold) return 0.0042
-  if (nodeCount > largeGraphNodeThreshold) return 0.0021
+  if (nodeCount > massiveGraphNodeThreshold) return 0.018
+  if (nodeCount > largeGraphNodeThreshold) return 0.0032
   if (nodeCount > ecosystemActivationNodeThreshold) return 0.001
   return zoomRange.min
 }
@@ -2483,6 +2516,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
@@ -2515,8 +2594,8 @@ const fitScaleBiasByNodeCount = nodeCount => {
   if (nodeCount <= 180) return 1
   if (nodeCount <= 600) return 0.94
   if (nodeCount <= 2000) return 0.82
-  if (nodeCount <= 6000) return 0.68
-  return 0.56
+  if (nodeCount <= 6000) return 0.74
+  return 0.72
 }
 
 const autoFitScaleRangeByNodeCount = nodeCount => {
@@ -2526,8 +2605,8 @@ const autoFitScaleRangeByNodeCount = nodeCount => {
   if (nodeCount <= 180) return { min: 0.18, max: 0.92 }
   if (nodeCount <= 600) return { min: 0.12, max: 0.72 }
   if (nodeCount <= 2000) return { min: 0.08, max: 0.52 }
-  if (nodeCount <= 6000) return { min: 0.06, max: 0.32 }
-  return { min: 0.0012, max: 0.24 }
+  if (nodeCount <= 6000) return { min: 0.08, max: 0.38 }
+  return { min: 0.0085, max: 0.36 }
 }
 
 const macroFaceToFaceScale = (nodeCount, hubDistance) => {
@@ -2537,7 +2616,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.082 : 0.068
+  const share = nodeCount > massiveGraphNodeThreshold ? 0.2 : 0.17
   const targetPx = Math.max(24, viewportReference * share)
   return targetPx / hubDistance
 }
@@ -2576,7 +2655,7 @@ const macroEcosystemFaceScale = (nodeCount) => {
 
   const rect = canvas.getBoundingClientRect()
   const viewportReference = Math.max(320, Math.min(rect.width, rect.height))
-  const targetShare = nodeCount > massiveGraphNodeThreshold ? 0.114 : 0.096
+  const targetShare = nodeCount > massiveGraphNodeThreshold ? 0.28 : 0.24
   const targetPx = Math.max(30, viewportReference * targetShare)
   return targetPx / nearestDistance
 }
@@ -2589,6 +2668,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 +2718,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 +2743,7 @@ const focusPrimaryHub = () => {
     y: clampTransformCoordinate(height / 2 - hub.y * targetScale),
     scale: targetScale
   }
+  clearZoomTransition()
   state.offscreenFrameCount = 0
   markRenderDirty()
 }
@@ -3068,13 +3150,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
@@ -3312,12 +3406,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 +3422,7 @@ const computeRenderVisibility = () => {
     state.renderEdges = []
     return
   }
+  state.ecosystemViewActive = false
 
   if (state.visibleNodes.length <= 2000) {
     state.renderNodes = state.visibleNodes
@@ -3509,7 +3601,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 +3616,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 +3846,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 }
+      : screenToWorldPoint(screenX, screenY)
   const worldX = worldPointAtCursor.x
   const worldY = worldPointAtCursor.y
   state.lastZoomFocus = {
@@ -3765,9 +3870,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()
 }
@@ -3786,13 +3897,22 @@ const wheelZoomFactor = event => {
     state.transform.scale <= massiveEcosystemClusterScaleThreshold
   const sensitivityMultiplier = isMassiveEcosystemZoom ? 0.48 : 1
   const capMultiplier = isMassiveEcosystemZoom ? 0.34 : 1
-  const sensitivity = wheelZoomExponent * (isModifierZoom ? wheelZoomModifierBoost : 1) * sensitivityMultiplier
-  const exponentCap = wheelZoomExponentCap * capMultiplier
+  const isZoomOut = normalizedDelta > 0
+  const currentScale = state.transform.scale
+  const zoomOutDamping = isZoomOut
+    ? (currentScale <= 0.03 ? 0.38 : currentScale <= 0.08 ? 0.52 : 0.68)
+    : 1
+  const sensitivity = wheelZoomExponent * (isModifierZoom ? wheelZoomModifierBoost : 1) * sensitivityMultiplier * zoomOutDamping
+  const exponentCap = wheelZoomExponentCap * capMultiplier * (isZoomOut ? 0.74 : 1)
   const exponent = Math.max(
     -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 => {
@@ -3876,6 +3996,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.111",
+  "version": "0.1.0-beta.113",
   "description": "Local-first knowledge memory for agents with Markdown, backlinks, indexing and context retrieval.",
   "type": "module",
   "license": "MIT",