Installation

import { useEffect, useRef } from 'react';
import { AgentShieldBeacon } from '@kya-os/agentshield-beacon';

function useAgentShield(config) {
  const beaconRef = useRef(null);

  useEffect(() => {
    beaconRef.current = new AgentShieldBeacon(config);
    beaconRef.current.collect('pageview');

    return () => {
      beaconRef.current?.destroy();
    };
  }, []);

  return beaconRef.current;
}

// Usage
function App() {
  const beacon = useAgentShield({
    apiKey: process.env.REACT_APP_AGENTSHIELD_KEY
  });

  return <div>Your app content</div>;
}

// plugins/agentshield.js
import { AgentShieldBeacon } from '@kya-os/agentshield-beacon';

export default {
  install(app, options) {
    const beacon = new AgentShieldBeacon(options);
    
    app.config.globalProperties.$beacon = beacon;
    app.provide('beacon', beacon);
    
    // Auto-track route changes
    app.config.globalProperties.$router?.afterEach(() => {
      beacon.collect('pageview');
    });
  }
};

// main.js
import { createApp } from 'vue';
import AgentShield from './plugins/agentshield';

const app = createApp(App);

app.use(AgentShield, {
  apiKey: import.meta.env.VITE_AGENTSHIELD_KEY
});

// agentshield.service.ts
import { Injectable, OnDestroy } from '@angular/core';
import { AgentShieldBeacon } from '@kya-os/agentshield-beacon';

@Injectable({
  providedIn: 'root'
})
export class AgentShieldService implements OnDestroy {
  private beacon: AgentShieldBeacon;

  constructor() {
    this.beacon = new AgentShieldBeacon({
      apiKey: environment.agentShieldKey
    });
    this.beacon.collect('pageview');
  }

  trackEvent(name: string, data?: any) {
    return this.beacon.trackEvent(name, data);
  }

  ngOnDestroy() {
    this.beacon.destroy();
  }
}

// Instead of
import { AgentShieldBeacon } from '@kya-os/agentshield-beacon';

// Use specific imports if available
import AgentShieldBeacon from '@kya-os/agentshield-beacon/beacon';

// Lazy load on user interaction
button.addEventListener('click', async () => {
  const { AgentShieldBeacon } = await import('@kya-os/agentshield-beacon');
  const beacon = new AgentShieldBeacon({ apiKey: 'key' });
  beacon.trackEvent('button_click');
});

// Lazy load after page load
if ('requestIdleCallback' in window) {
  requestIdleCallback(async () => {
    const { AgentShieldBeacon } = await import('@kya-os/agentshield-beacon');
    window.beacon = new AgentShieldBeacon({ apiKey: 'key' });
  });
}

const beacon = new AgentShieldBeacon({
  apiKey: 'your-key',
  useWorker: true,
  workerUrl: '/beacon-worker.min.js' // Serve separately
});

Content-Security-Policy: 
  script-src 'self' https://cdn.jsdelivr.net https://kya.vouched.id;
  connect-src 'self' https://kya.vouched.id;
  worker-src 'self' blob:;

<script nonce="random-nonce">
  const beacon = new AgentShieldBeacon({ apiKey: 'key' });
</script>

const beacon = new AgentShieldBeacon({
  apiKey: 'your-key',
  debug: true,
  logLevel: 'debug'
});

// Test basic tracking
beacon.collect('pageview').then(() => {
  console.log('Pageview tracked successfully');
}).catch(error => {
  console.error('Tracking failed:', error);
});

// Test custom events
beacon.trackEvent('test_event', {
  timestamp: Date.now()
}).then(() => {
  console.log('Test event sent');
});