add Angular adapter package

packages/README.md

@@ -32,6 +32,12 @@ Official Vue 3 bindings: the `v-foresight` directive, the `useForesight` and `us
 
 **Published as:** `@foresightjs/vue` on npm
 
+### [foresightjs-angular](./foresightjs-angular/)
+
+Official Angular bindings: the `[fsForesight]` directive, `ForesightService`, `injectForesightEvent`, and the `ForesightComponent` wrapper.
+
+**Published as:** `@foresightjs/angular` on npm
+
 ## Development Packages
 
 ### [devpage-framework](./devpage-framework/) · [devpage-nextjs](./devpage-nextjs/)

packages/foresightjs-angular/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Bart Spaans
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/foresightjs-angular/README.md

@@ -0,0 +1,79 @@
+# @foresightjs/angular
+
+[![npm version](https://img.shields.io/npm/v/@foresightjs/angular.svg)](https://www.npmjs.com/package/@foresightjs/angular)
+[![npm downloads](https://img.shields.io/npm/dt/@foresightjs/angular.svg)](https://www.npmjs.com/package/@foresightjs/angular)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+
+Official Angular bindings for [ForesightJS](https://foresightjs.com/), a lightweight library that predicts user intent (mouse trajectory, keyboard navigation, scroll, touch) to trigger callbacks like prefetching _before_ the user interacts.
+
+- **Docs:** [foresightjs.com/docs/angular/installation](https://foresightjs.com/docs/angular/installation)
+- **Core library:** [`js.foresight`](https://www.npmjs.com/package/js.foresight)
+- **Playground:** [foresightjs.com](https://foresightjs.com/#playground)
+
+## Installation
+
+```bash
+pnpm add @foresightjs/angular js.foresight
+# or
+npm install @foresightjs/angular js.foresight
+```
+
+Requires Angular 17+
+
+## What's included
+
+- `ForesightDirective` -> standalone `[fsForesight]` directive to register an element with a callback or full options object
+- `ForesightService` -> injectable service for manual registration and manager event subscriptions
+- `ForesightComponent` -> standalone wrapper component that registers its host element
+- `injectForesightEvent` -> helper to subscribe to a ForesightManager event for the lifetime of the current injection context
+
+## Directive usage
+
+```ts
+import { Component } from "@angular/core"
+import { ForesightDirective } from "@foresightjs/angular"
+
+@Component({
+  standalone: true,
+  imports: [ForesightDirective],
+  template: `
+    <a
+      href="/pricing"
+      [fsForesight]="prefetchPricing"
+      fsForesightName="pricing-link"
+      #foresight="foresight"
+    >
+      Pricing {{ foresight.state().isPredicted ? "(ready)" : "" }}
+    </a>
+  `,
+})
+export class NavComponent {
+  readonly prefetchPricing = () => {
+    void fetch("/api/pricing")
+  }
+}
+```
+
+For full options, bind an object:
+
+```html
+<button
+  [fsForesight]="{
+    callback: preloadCheckout,
+    name: 'checkout',
+    hitSlop: 40,
+    enabled: isCheckoutEnabled
+  }"
+>
+  Checkout
+</button>
+```
+
+## Contributing
+
+Please see the [contributing guidelines](https://github.com/spaansba/ForesightJS/blob/main/CONTRIBUTING.md).
+
+## License
+
+[MIT](./LICENSE)

packages/foresightjs-angular/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "dist",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

packages/foresightjs-angular/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@foresightjs/angular",
+  "version": "0.3.2",
+  "description": "Angular bindings for ForesightJS - directives and services to register elements with the ForesightManager from Angular components.",
+  "type": "module",
+  "sideEffects": false,
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json -c tsconfig.lib.json",
+    "build:prod": "ng-packagr -p ng-package.json -c tsconfig.lib.prod.json && node ./scripts/remove-sourcemaps.mjs",
+    "dev": "ng-packagr -p ng-package.json -c tsconfig.lib.json --watch",
+    "lint": "eslint . --fix",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:watch": "vitest --watch",
+    "prepublishOnly": "pnpm test:run && pnpm build:prod"
+  },
+  "main": "./dist/fesm2022/foresightjs-angular.mjs",
+  "module": "./dist/fesm2022/foresightjs-angular.mjs",
+  "types": "./dist/types/foresightjs-angular.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/foresightjs-angular.d.ts",
+      "default": "./dist/fesm2022/foresightjs-angular.mjs"
+    }
+  },
+  "homepage": "https://foresightjs.com/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/spaansba/ForesightJS",
+    "directory": "packages/foresightjs-angular"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "angular",
+    "foresight",
+    "js.foresight",
+    "foresightjs",
+    "angular-directive",
+    "prefetch",
+    "interaction-prediction",
+    "mouse-trajectory",
+    "ForesightDirective"
+  ],
+  "author": "Bart Spaans",
+  "license": "MIT",
+  "llms": "https://foresightjs.com/llms.txt",
+  "llmsFull": "https://foresightjs.com/llms-full.txt",
+  "peerDependencies": {
+    "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0",
+    "js.foresight": "^4.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@angular/compiler": "^22.0.2",
+    "@angular/compiler-cli": "^22.0.2",
+    "@angular/core": "^22.0.2",
+    "js.foresight": "workspace:*",
+    "ng-packagr": "^22.0.0",
+    "tslib": "^2.8.1",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.2"
+  }
+}

packages/foresightjs-angular/scripts/remove-sourcemaps.mjs

@@ -0,0 +1,16 @@
+import { readdirSync, rmSync } from "node:fs"
+import { join } from "node:path"
+
+const removeSourceMaps = directory => {
+  for (const entry of readdirSync(directory, { withFileTypes: true })) {
+    const path = join(directory, entry.name)
+
+    if (entry.isDirectory()) {
+      removeSourceMaps(path)
+    } else if (path.endsWith(".map")) {
+      rmSync(path)
+    }
+  }
+}
+
+removeSourceMaps("dist")

packages/foresightjs-angular/src/components/ForesightComponent.ts

@@ -0,0 +1,69 @@
+import { Component, ElementRef, Input, OnChanges, OnDestroy, computed, signal } from "@angular/core"
+import {
+  createUnregisteredSnapshot,
+  type ForesightCallback,
+  type ForesightElementState,
+  type HitSlop,
+} from "js.foresight"
+import { ForesightService } from "../services/ForesightService"
+import type { ForesightRegistration } from "../types"
+import { resolveOptions } from "../utils/resolveOptions"
+
+@Component({
+  selector: "foresight",
+  standalone: true,
+  template: "<ng-content />",
+})
+export class ForesightComponent implements OnChanges, OnDestroy {
+  @Input({ required: true }) callback!: ForesightCallback
+  @Input() foresightName?: string
+  @Input() hitSlop?: HitSlop
+  @Input() meta?: Record<string, unknown>
+  @Input() reactivateAfter?: number
+  @Input() enabled?: boolean
+
+  private readonly fallbackState = signal<Readonly<ForesightElementState>>(
+    createUnregisteredSnapshot(false)
+  )
+  private readonly registration = signal<ForesightRegistration | null>(null)
+
+  readonly state = computed(() => this.registration()?.state() ?? this.fallbackState())
+
+  constructor(
+    private readonly elementRef: ElementRef<HTMLElement>,
+    private readonly foresight: ForesightService
+  ) {}
+
+  ngOnChanges(): void {
+    const options = resolveOptions({
+      value: this.callback,
+      name: this.foresightName,
+      hitSlop: this.hitSlop,
+      meta: this.meta,
+      reactivateAfter: this.reactivateAfter,
+      enabled: this.enabled,
+    })
+
+    const registration = this.registration()
+    if (!options) {
+      registration?.unregister()
+      this.registration.set(null)
+
+      return
+    }
+
+    if (registration) {
+      registration.update(options)
+
+      return
+    }
+
+    const nextRegistration = this.foresight.register(this.elementRef.nativeElement, options)
+    this.registration.set(nextRegistration)
+  }
+
+  ngOnDestroy(): void {
+    this.registration()?.unregister()
+    this.registration.set(null)
+  }
+}