{"id":47271437,"url":"https://github.com/HomelessCoder/ng-beacon","last_synced_at":"2026-03-27T22:00:44.913Z","repository":{"id":343121540,"uuid":"1176337772","full_name":"HomelessCoder/ng-beacon","owner":"HomelessCoder","description":"A lightweight, signal-native spotlight tour library for Angular 19+ zoneless applications. Zero external dependencies beyond Angular itself.","archived":false,"fork":false,"pushed_at":"2026-03-17T20:59:46.000Z","size":3023,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-18T10:10:01.536Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HomelessCoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-08T23:14:39.000Z","updated_at":"2026-03-17T20:59:50.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/HomelessCoder/ng-beacon","commit_stats":null,"previous_names":["homelesscoder/ng-beacon"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HomelessCoder/ng-beacon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HomelessCoder%2Fng-beacon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HomelessCoder%2Fng-beacon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HomelessCoder%2Fng-beacon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HomelessCoder%2Fng-beacon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HomelessCoder","download_url":"https://codeload.github.com/HomelessCoder/ng-beacon/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HomelessCoder%2Fng-beacon/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31061197,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-27T19:32:53.857Z","status":"ssl_error","status_checked_at":"2026-03-27T19:32:45.136Z","response_time":164,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-03-15T13:00:29.425Z","updated_at":"2026-03-27T22:00:44.905Z","avatar_url":"https://github.com/HomelessCoder.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Onboarding and Product Tours"],"readme":"# ng-beacon\n\nLightweight guided-tour library for Angular 19+ with Angular Signals and zoneless-compatible rendering.\nSVG spotlight overlays, keyboard navigation, and lightweight i18n hooks with zero runtime dependencies beyond Angular.\n\n![ng-beacon demo](./assets/output.gif)\n\n[![CI](https://github.com/HomelessCoder/ng-beacon/actions/workflows/ci.yml/badge.svg)](https://github.com/HomelessCoder/ng-beacon/actions/workflows/ci.yml)\n[![npm](https://img.shields.io/npm/v/ng-beacon)](https://www.npmjs.com/package/ng-beacon)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n\n## Features\n\n- **Signal-based** — reactive state via Angular Signals, fully OnPush / zoneless compatible\n- **SVG spotlight** — smooth cutout mask highlights the target element\n- **Accessible focus handling** — focus moves into the tooltip and is restored on close\n- **Keyboard support** — Escape closes, ArrowLeft goes back, ArrowRight advances\n- **i18n ready** — plug in any translation function (ngx-translate, Transloco, etc.)\n- **Theming** — CSS custom properties for colors, radius, shadow, width\n- **Tiny footprint** — no Material, no CDK, no extra runtime deps\n\n## Stackblitz Demo\n\nhttps://stackblitz.com/edit/stackblitz-starters-midtdjmx\n\n## Quick Start\n\n### 1. Install\n\n```bash\nnpm install ng-beacon\n```\n\n### 2. Provide\n\n```ts\n// app.config.ts\nimport { provideBeacon } from 'ng-beacon';\n\nexport const appConfig = {\n  providers: [\n    provideBeacon(),\n  ],\n};\n```\n\n### 3. Add the overlay\n\n```html\n\u003c!-- app.component.html --\u003e\n@if (beaconService.isActive()) {\n  \u003cbeacon-overlay /\u003e\n}\n```\n\n```ts\n// app.component.ts\nimport { BeaconOverlay, BeaconService } from 'ng-beacon';\n\n@Component({\n  imports: [BeaconOverlay],\n  // ...\n})\nexport class AppComponent {\n  readonly beaconService = inject(BeaconService);\n}\n```\n\n### 4. Define steps\n\n```ts\nimport { BeaconStep } from 'ng-beacon';\n\nexport const MY_TOUR: BeaconStep[] = [\n  {\n    id: 'welcome',\n    title: 'Welcome!',\n    content: 'Let me show you around.',\n    position: 'center',\n    showWithoutTarget: true,\n  },\n  {\n    id: 'sidebar',\n    title: 'Sidebar',\n    content: 'Navigate between sections here.',\n    position: 'end',\n    selector: '[data-tour=\"sidebar\"]',\n  },\n];\n```\n\n### 5. Start the tour\n\n```ts\nthis.beaconService.start(MY_TOUR);\n```\n\n## Component-Scoped Step Registration\n\nRegister steps that are only available while a component is alive:\n\n```ts\nimport { registerTourSteps } from 'ng-beacon';\n\n@Component({ /* ... */ })\nexport class DashboardComponent {\n  private readonly _tour = registerTourSteps(DASHBOARD_STEPS);\n}\n```\n\nThen start a context-aware tour — steps from destroyed components are automatically pruned:\n\n```ts\nthis.beaconService.startContextTour();\n```\n\n## Translation (i18n)\n\n```ts\nimport { provideBeacon, provideBeaconTranslateFn } from 'ng-beacon';\n\nproviders: [\n  provideBeacon({\n    labels: { close: 'tour.close', nextStep: 'tour.next', prevStep: 'tour.back' },\n  }),\n  provideBeaconTranslateFn(() =\u003e {\n    const translate = inject(TranslateService);\n    return (key: string) =\u003e translate.instant(key);\n  }),\n]\n```\n\n## Optional Router Integration\n\nIf your app uses Angular Router and you want tours to close after route changes, subscribe to `NavigationEnd` in app-level code and call `stop()`:\n\n```ts\nimport { Component, DestroyRef, inject } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { filter } from 'rxjs';\nimport { BeaconService } from 'ng-beacon';\n\n@Component({\n  selector: 'app-root',\n  template: `\u003crouter-outlet /\u003e`,\n})\nexport class AppComponent {\n  private readonly router = inject(Router);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly beaconService = inject(BeaconService);\n\n  constructor() {\n    this.router.events\n      .pipe(\n        filter((event): event is NavigationEnd =\u003e event instanceof NavigationEnd),\n        takeUntilDestroyed(this.destroyRef),\n      )\n      .subscribe(() =\u003e {\n        if (this.beaconService.isActive()) {\n          this.beaconService.stop();\n        }\n      });\n  }\n}\n```\n\n## Theming\n\nOverride CSS custom properties on `beacon-overlay` or any ancestor:\n\n```css\nbeacon-overlay {\n  --beacon-bg: #1e1e2e;\n  --beacon-text: #cdd6f4;\n  --beacon-primary: #89b4fa;\n  --beacon-primary-hover: #74c7ec;\n  --beacon-radius: 16px;\n  --beacon-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n  --beacon-width: 360px;\n}\n```\n\n## API\n\n### `BeaconService`\n\n| Signal / Method | Description |\n|---|---|\n| `isActive()` | Whether a tour is running |\n| `currentStep()` | Current `BeaconStep` or `null` |\n| `currentStepIndex()` | Zero-based index or `null` |\n| `totalSteps()` | Number of steps (0 when idle) |\n| `isFirstStep()` / `isLastStep()` | Position booleans |\n| `start(steps)` | Start a tour with explicit steps (snapshot — not reactive to registry changes) |\n| `startContextTour()` | Start a tour from all registered context steps (reactive — steps are pruned when components are destroyed) |\n| `next()` / `prev()` | Navigate between steps; `next()` stops on the last step and `prev()` stays on the first step |\n| `stop()` | End the tour |\n| `recalculate()` | Re-evaluate step visibility and rebuild the active context tour, preserving the current position by step `id`. No-op for `start()` tours. |\n| `finished()` | `Signal\u003cBeaconTourEvent \\| null\u003e` — emits when a tour is completed (user reached the last step) |\n| `dismissed()` | `Signal\u003cBeaconTourEvent \\| null\u003e` — emits when a tour is closed early (close button, Escape, click outside, or programmatic `stop()`) |\n| `registerContextSteps(steps)` | Add steps to the registry |\n| `unregisterContextSteps(steps)` | Remove steps from the registry |\n\n### `BeaconStep`\n\n```ts\ninterface BeaconStep {\n  id: string;\n  title: string;\n  content: string;\n  position: 'above' | 'below' | 'start' | 'end' | 'center';\n  selector?: string;\n  showWithoutTarget?: boolean;\n}\n```\n\n### `BeaconTourEvent`\n\n```ts\ninterface BeaconTourEvent {\n  step: BeaconStep;    // the step that was active when the event fired\n  stepIndex: number;   // zero-based index\n  totalSteps: number;  // total steps in the tour\n}\n```\n\n## Events\n\n`BeaconService` exposes two signals for tracking tour lifecycle:\n\n- **`finished`** — emits when the user completes all steps (clicks next on the last step)\n- **`dismissed`** — emits when the tour is closed early (close button, `Escape`, click outside, or programmatic `stop()`)\n\nBoth are `Signal\u003cBeaconTourEvent | null\u003e`, starting as `null`. Each emission is a new object reference, so `effect()` fires every time.\n\n```ts\nimport { effect, inject } from '@angular/core';\nimport { BeaconService } from 'ng-beacon';\n\nexport class AppComponent {\n  private readonly beaconService = inject(BeaconService);\n\n  constructor() {\n    effect(() =\u003e {\n      const event = this.beaconService.finished();\n      if (event) {\n        localStorage.setItem('tour-completed', 'true');\n      }\n    });\n\n    effect(() =\u003e {\n      const event = this.beaconService.dismissed();\n      if (event) {\n        console.log(`Tour dismissed at step ${event.stepIndex + 1}/${event.totalSteps}`);\n      }\n    });\n  }\n}\n```\n\n## Keyboard Support\n\n| Key | Action |\n|---|---|\n| `Escape` | Stop the tour |\n| `ArrowLeft` | Go to the previous step |\n| `ArrowRight` | Go to the next step |\n\n## Development\n\n```bash\nnpm install\nnpm test            # run tests (ChromeHeadless, coverage enforced)\nnpm run build       # build the library\n```\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHomelessCoder%2Fng-beacon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHomelessCoder%2Fng-beacon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHomelessCoder%2Fng-beacon/lists"}