Remove redundant events in favor of subscriber pattern

packages/devpage-react/src/components/test-buttons/ForesightButtonVisibility.tsx

@@ -24,7 +24,7 @@ const ForesightButtonVisibility = ({ name }: ForesightButtonVisibilityProps) =>
         }}
       />
       <p className="text-xs text-gray-600">
-        Toggles via CSS only — MutationObserver should not unregister.
+        Toggles via CSS only - MutationObserver should not unregister.
       </p>
     </article>
   )

packages/devpage-react/src/components/ui/ButtonStats.tsx

@@ -20,7 +20,7 @@ const ButtonStats = ({ hitCount, isPredicted, isCallbackRunning, status }: Butto
       {row("hits", hitCount)}
       {row("predicted", isPredicted ? "yes" : "no")}
       {row("cb running", isCallbackRunning ? "yes" : "no")}
-      {row("status", status ?? "—")}
+      {row("status", status ?? "-")}
     </div>
   )
 }

packages/devpage-react/src/pages/events/index.tsx

@@ -18,7 +18,6 @@ const MAX_LOG_ENTRIES = 200
 
 const ALL_EVENTS: ForesightEvent[] = [
   "elementRegistered",
-  "elementReactivated",
   "elementUnregistered",
   "callbackInvoked",
   "callbackCompleted",
@@ -39,9 +38,6 @@ const summarizeEvent = (event: ForesightEventMap[ForesightEvent]): string => {
     case "elementRegistered":
       return `"${formatElementName(event.state)}" registered`
 
-    case "elementReactivated":
-      return `"${formatElementName(event.state)}" reactivated`
-
     case "elementUnregistered":
       return `"${formatElementName(event.state)}" unregistered (${event.unregisterReason})`
 
@@ -64,9 +60,7 @@ const summarizeEvent = (event: ForesightEventMap[ForesightEvent]): string => {
 
 const EVENT_COLORS: Partial<Record<ForesightEvent, string>> = {
   elementRegistered: "text-green-700",
-  elementReactivated: "text-blue-700",
   elementUnregistered: "text-red-700",
-  elementDataUpdated: "text-gray-600",
   callbackInvoked: "text-amber-700",
   callbackCompleted: "text-purple-700",
   managerSettingsChanged: "text-cyan-700",
@@ -216,15 +210,9 @@ export default function Events() {
   useForesightEvent("elementRegistered", e => {
     pushEntry(e.type, summarizeEvent(e), e.timestamp)
   })
-  useForesightEvent("elementReactivated", e => {
-    pushEntry(e.type, summarizeEvent(e), e.timestamp)
-  })
   useForesightEvent("elementUnregistered", e => {
     pushEntry(e.type, summarizeEvent(e), e.timestamp)
   })
-  useForesightEvent("elementDataUpdated", e => {
-    pushEntry(e.type, summarizeEvent(e), Date.now())
-  })
   useForesightEvent("callbackInvoked", e => {
     pushEntry(e.type, summarizeEvent(e), e.timestamp)
   })

packages/devpage-react/src/pages/home/ForesightImageButton.tsx

@@ -83,7 +83,7 @@ export const ForesightImageButton = ({ image, setSelectedImage }: ForesightImage
           <Row label="hits" value={hitCount} />
           <Row label="predicted" value={isPredicted ? "yes" : "no"} on={isPredicted} />
           <Row label="cb running" value={isCallbackRunning ? "yes" : "no"} on={isCallbackRunning} />
-          <Row label="status" value={status ?? "—"} />
+          <Row label="status" value={status ?? "-"} />
         </dl>
       </div>
     </button>

packages/devpage-react/src/pages/mass/index.tsx

@@ -75,7 +75,7 @@ const Mass = () => {
 
       {isDebugActive && (
         <div className="mb-6 border border-amber-400 bg-amber-50 px-4 py-3 text-sm text-amber-900">
-          Debug mode is on with {buttonCount.toLocaleString()} elements — the overlay can tank frame
+          Debug mode is on with {buttonCount.toLocaleString()} elements - the overlay can tank frame
           rates.
         </div>
       )}

packages/devpage-vue/src/components/ForesightStats.vue

@@ -23,7 +23,7 @@ defineProps<{
     </div>
     <div class="flex justify-between px-2 py-1">
       <span class="text-gray-500">status</span>
-      <span class="text-gray-900">{{ status ?? "—" }}</span>
+      <span class="text-gray-900">{{ status ?? "-" }}</span>
     </div>
   </div>
 </template>

packages/devpage-vue/src/views/events/index.vue

@@ -22,7 +22,6 @@ const MAX_LOG_ENTRIES = 200
 
 const ALL_EVENTS: ForesightEvent[] = [
   "elementRegistered",
-  "elementReactivated",
   "elementUnregistered",
   "callbackInvoked",
   "callbackCompleted",
@@ -32,9 +31,7 @@ const ALL_EVENTS: ForesightEvent[] = [
 
 const EVENT_COLORS: Partial<Record<ForesightEvent, string>> = {
   elementRegistered: "text-green-700",
-  elementReactivated: "text-blue-700",
   elementUnregistered: "text-red-700",
-  elementDataUpdated: "text-gray-600",
   callbackInvoked: "text-amber-700",
   callbackCompleted: "text-purple-700",
   managerSettingsChanged: "text-cyan-700",
@@ -53,8 +50,6 @@ const summarizeEvent = (event: ForesightEventMap[ForesightEvent]): string => {
   switch (event.type) {
     case "elementRegistered":
       return `"${formatElementName(event.state)}" registered`
-    case "elementReactivated":
-      return `"${formatElementName(event.state)}" reactivated`
     case "elementUnregistered":
       return `"${formatElementName(event.state)}" unregistered (${event.unregisterReason})`
     case "callbackInvoked":
@@ -87,15 +82,9 @@ const pushEntry = (type: ForesightEvent, summary: string, timestamp: number) =>
 useForesightEvent("elementRegistered", e => {
   pushEntry(e.type, summarizeEvent(e), e.timestamp)
 })
-useForesightEvent("elementReactivated", e => {
-  pushEntry(e.type, summarizeEvent(e), e.timestamp)
-})
 useForesightEvent("elementUnregistered", e => {
   pushEntry(e.type, summarizeEvent(e), e.timestamp)
 })
-useForesightEvent("elementDataUpdated", e => {
-  pushEntry(e.type, summarizeEvent(e), Date.now())
-})
 useForesightEvent("callbackInvoked", e => {
   pushEntry(e.type, summarizeEvent(e), e.timestamp)
 })

packages/devpage-vue/src/views/foresights/index.vue

@@ -19,7 +19,7 @@ import StaticForesightTargets from "./partials/StaticForesightTargets.vue"
     <h2 class="text-lg font-medium mt-8 mb-2">Static targets</h2>
     <p class="mb-4 text-sm text-gray-600">
       Bind elements via <code class="text-xs bg-gray-100 px-1 py-0.5">:ref="slots[i].setRef"</code>
-      — no separate ref management needed.
+      - no separate ref management needed.
     </p>
     <section class="border-t border-gray-300 py-8">
       <StaticForesightTargets />

packages/docs/docs/debugging/devtools.md

@@ -57,9 +57,7 @@ ForesightDevtools.initialize({
   logging: {
     logLocation: "controlPanel", // Where to log the Foresight Events
     callbackCompleted: true,
-    elementReactivated: true,
     callbackInvoked: true,
-    elementDataUpdated: false,
     elementRegistered: false,
     elementUnregistered: false,
     managerSettingsChanged: true,

packages/docs/docs/debugging/static-properties.md

@@ -135,21 +135,18 @@ The return will look something like this:
       "elementUnregistered": []
     },
     "2": {
-      "elementDataUpdated": []
-    },
-    "3": {
       "mouseTrajectoryUpdate": []
     },
-    "4": {
+    "3": {
       "scrollTrajectoryUpdate": []
     },
-    "5": {
+    "4": {
       "managerSettingsChanged": []
     },
-    "6": {
+    "5": {
       "callbackInvoked": []
     },
-    "7": {
+    "6": {
       "callbackCompleted": []
     }
   },

packages/docs/docs/events.md

@@ -115,39 +115,6 @@ type ElementRegisteredEvent = {
 
 ---
 
-#### <code style={{backgroundColor: '#1e293b', color: '#f97316', padding: '4px 8px', borderRadius: '6px', fontSize: '1.1rem', fontWeight: '600'}}>elementOptionsUpdated</code>
-
-Fired when an already-registered element is re-registered with different options (e.g. changed `name`, `callback`, `reactivateAfter`, or `meta`).
-
-```typescript
-type ElementOptionsUpdatedEvent = {
-  type: "elementOptionsUpdated"
-  timestamp: number
-  element: ForesightElement
-  state: ForesightElementState
-}
-```
-
-**Related Types:** [`ForesightElementState`](/docs/getting-started/typescript#foresightelementstate)
-
----
-
-#### <code style={{backgroundColor: '#1e293b', color: '#f97316', padding: '4px 8px', borderRadius: '6px', fontSize: '1.1rem', fontWeight: '600'}}>elementReactivated</code>
-
-Fired when an element is reactivated after its callback was triggered. This happens after `reactivateAfter` ms (default infinity) or with `ForesightManager.instance.reactivate(element)`.
-
-```typescript
-type ElementReactivatedEvent = {
-  type: "elementReactivated"
-  timestamp: number
-  elementData: ForesightElementData
-}
-```
-
-**Related Types:** [`ForesightElementData`](/docs/getting-started/typescript#foresightelementdata)
-
----
-
 #### <code style={{backgroundColor: '#1e293b', color: '#f97316', padding: '4px 8px', borderRadius: '6px', fontSize: '1.1rem', fontWeight: '600'}}>elementUnregistered</code>
 
 Fired when an element is removed from `ForesightManager`'s tracking. This only happens when the element is removed from the `DOM` or via developer actions like `ForesightManager.instance.unregister(element)`
@@ -166,20 +133,6 @@ type ElementUnregisteredEvent = {
 
 ---
 
-#### <code style={{backgroundColor: '#1e293b', color: '#f97316', padding: '4px 8px', borderRadius: '6px', fontSize: '1.1rem', fontWeight: '600'}}>elementDataUpdated</code>
-
-Fired when tracked element data changes (bounds/visibility only). Does not fire on any updates regarding `callback` data.
-
-```typescript
-type ElementDataUpdatedEvent = {
-  type: "elementDataUpdated"
-  elementData: ForesightElementData
-  updatedProps: UpdatedDataPropertyNames[] // "bounds" | "visibility"
-}
-```
-
-**Related Types:** [`ForesightElementData`](/docs/getting-started/typescript#foresightelementdata)
-
 ### Prediction Events
 
 Events fired during movement prediction calculations.

packages/docs/docs/getting-started/what-is-foresightjs.md

@@ -79,7 +79,7 @@ ForesightJS is designed for developers who want to squeeze every drop of perform
 
 #### Problem 1: On-Hover Prefetching Still Has Latency
 
-Traditional hover-based prefetching only triggers after the user's cursor reaches an element. This approach wastes the critical 100-200ms window between when a user begins moving toward a target and when the hover event actually fires—time that could be used for prefetching.
+Traditional hover-based prefetching only triggers after the user's cursor reaches an element. This approach wastes the critical 100-200ms window between when a user begins moving toward a target and when the hover event actually fires-time that could be used for prefetching.
 
 #### Problem 2: Viewport-Based Prefetching is Wasteful
 

packages/docs/src/components/ForesightOverview/Overview/Keyboard/SmallButton.tsx

@@ -1,4 +1,4 @@
-import { ForesightManager, type ElementReactivatedEvent } from "js.foresight"
+import { ForesightManager } from "js.foresight"
 import React, { useEffect, useRef, useState } from "react"
 import styles from "./styles.module.css"
 const SmallButton = ({ index }: { index: number }) => {
@@ -22,23 +22,9 @@ const SmallButton = ({ index }: { index: number }) => {
     return "Element"
   }
 
-  const handleElementReactivated = (e: ElementReactivatedEvent) => {
-    if (e.element === cardRef.current) {
-      setIsLoaded(false)
-      setIsLoading(false)
-    }
-  }
-  useEffect(() => {
-    ForesightManager.instance.addEventListener("elementReactivated", handleElementReactivated)
-
-    return () => {
-      ForesightManager.instance.removeEventListener("elementReactivated", handleElementReactivated)
-    }
-  }, [])
-
   useEffect(() => {
     if (cardRef.current) {
-      const { unregister } = ForesightManager.instance.register({
+      const { unregister, subscribe, getSnapshot } = ForesightManager.instance.register({
         element: cardRef.current,
         callback: async () => {
           if (!stateRef.current.isLoading && !stateRef.current.isLoaded) {
@@ -55,7 +41,22 @@ const SmallButton = ({ index }: { index: number }) => {
         meta: { buttonNr: index },
       })
 
-      return () => unregister()
+      let wasPredicted = getSnapshot().isPredicted
+      const unsubscribe = subscribe(() => {
+        const snap = getSnapshot()
+        // Detect reactivation: was predicted, now active and not predicted
+        if (wasPredicted && snap.isActive && !snap.isPredicted) {
+          setIsLoaded(false)
+          setIsLoading(false)
+        }
+
+        wasPredicted = snap.isPredicted
+      })
+
+      return () => {
+        unsubscribe()
+        unregister()
+      }
     }
   }, [cardRef])
 

packages/docs/versioned_docs/version-3.4/debugging/devtools.md

@@ -57,9 +57,7 @@ ForesightDevtools.initialize({
   logging: {
     logLocation: "controlPanel", // Where to log the Foresight Events
     callbackCompleted: true,
-    elementReactivated: true,
     callbackInvoked: true,
-    elementDataUpdated: false,
     elementRegistered: false,
     elementUnregistered: false,
     managerSettingsChanged: true,

packages/docs/versioned_docs/version-3.4/debugging/static-properties.md

@@ -128,9 +128,6 @@ The return will look something like this:
       "elementUnregistered": []
     },
     "2": {
-      "elementDataUpdated": []
-    },
-    "3": {
       "mouseTrajectoryUpdate": []
     },
     "4": {

packages/docs/versioned_docs/version-3.4/events.md

@@ -115,22 +115,6 @@ type ElementRegisteredEvent = {
 
 ---
 
-#### <code style={{backgroundColor: '#1e293b', color: '#f97316', padding: '4px 8px', borderRadius: '6px', fontSize: '1.1rem', fontWeight: '600'}}>elementReactivated</code>
-
-Fired when an element is reactivated after its callback was triggered. This happens after `reactivateAfter` ms (default infinity) or with `ForesightManager.instance.reactivate(element)`.
-
-```typescript
-type ElementReactivatedEvent = {
-  type: "elementReactivated"
-  timestamp: number
-  elementData: ForesightElementData
-}
-```
-
-**Related Types:** [`ForesightElementData`](/docs/getting-started/typescript#foresightelementdata)
-
----
-
 #### <code style={{backgroundColor: '#1e293b', color: '#f97316', padding: '4px 8px', borderRadius: '6px', fontSize: '1.1rem', fontWeight: '600'}}>elementUnregistered</code>
 
 Fired when an element is removed from `ForesightManager`'s tracking. This only happens when the element is removed from the `DOM` or via developer actions like `ForesightManager.instance.unregister(element)`
@@ -149,20 +133,6 @@ type ElementUnregisteredEvent = {
 
 ---
 
-#### <code style={{backgroundColor: '#1e293b', color: '#f97316', padding: '4px 8px', borderRadius: '6px', fontSize: '1.1rem', fontWeight: '600'}}>elementDataUpdated</code>
-
-Fired when tracked element data changes (bounds/visibility only). Does not fire on any updates regarding `callback` data.
-
-```typescript
-type ElementDataUpdatedEvent = {
-  type: "elementDataUpdated"
-  elementData: ForesightElementData
-  updatedProps: UpdatedDataPropertyNames[] // "bounds" | "visibility"
-}
-```
-
-**Related Types:** [`ForesightElementData`](/docs/getting-started/typescript#foresightelementdata)
-
 ### Prediction Events
 
 Events fired during movement prediction calculations.

packages/docs/versioned_docs/version-3.4/getting-started/what-is-foresightjs.md

@@ -79,7 +79,7 @@ ForesightJS is designed for developers who want to squeeze every drop of perform
 
 #### Problem 1: On-Hover Prefetching Still Has Latency
 
-Traditional hover-based prefetching only triggers after the user's cursor reaches an element. This approach wastes the critical 100-200ms window between when a user begins moving toward a target and when the hover event actually fires—time that could be used for prefetching.
+Traditional hover-based prefetching only triggers after the user's cursor reaches an element. This approach wastes the critical 100-200ms window between when a user begins moving toward a target and when the hover event actually fires-time that could be used for prefetching.
 
 #### Problem 2: Viewport-Based Prefetching is Wasteful
 

packages/foresightjs-react/src/index.ts

@@ -8,11 +8,8 @@ export {
   type ForesightEvent,
   type ForesightEventMap,
   type ElementRegisteredEvent,
-  type ElementOptionsUpdatedEvent,
   type DeviceStrategyChangedEvent,
-  type ElementReactivatedEvent,
   type ElementUnregisteredEvent,
-  type ElementDataUpdatedEvent,
   type CallbackInvokedEvent,
   type CallbackCompletedEvent,
   type MouseTrajectoryUpdateEvent,