@spektre/veil 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+Spektre React Package License
+Copyright (c) 2025 Spektre.app
+
+Permission is hereby granted to any person obtaining a valid API key from 
+Spektre.app to use this software for the sole purpose of integrating with 
+the Spektre security platform.
+
+RESTRICTIONS:
+1. This software may only be used with a valid Spektre API key
+2. Commercial use requires an active paid subscription to Spektre.app
+3. Redistribution of this software is prohibited
+4. Modification of this software is prohibited
+5. Creation of derivative works is prohibited
+
+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.

package/README.md

@@ -0,0 +1,303 @@
+# @spektre/react
+
+React security and monitoring wrapper for Spektre platform. Protect your React applications with real-time security scanning, monitoring, and active protection.
+
+## Installation
+
+```bash
+npm install @spektre/veil
+```
+
+## Quick Start
+
+Wrap your application with `SecurityGate` to enable security monitoring and protection:
+
+```tsx
+import { SecurityGate } from '@spektre/veil';
+
+function App() {
+  return (
+    <SecurityGate apiKey="your-spektre-api-key">
+      <YourApp />
+    </SecurityGate>
+  );
+}
+```
+
+That's it! Your app is now protected with Spektre security monitoring.
+
+## Full Usage Example
+
+Configure security modules and add custom handlers:
+
+```tsx
+import { SecurityGate } from '@spektre/veil';
+
+function App() {
+  return (
+    <SecurityGate
+      apiKey="your-spektre-api-key"
+      config={{
+        environment: 'prod',
+        enabledEnvironments: ['prod', 'staging'],
+        modules: {
+          performanceMonitoring: true,
+          secretDetection: true,
+          scriptProfiling: true,
+          supplyChainDetection: true,
+          sessionProtection: true,
+          activeProtection: true,
+        },
+        onSecurityFailed: (error) => {
+          console.error('Security verification failed:', error);
+        },
+        onAttackBlocked: (attack) => {
+          console.warn('Attack blocked:', attack);
+        },
+        onTamperingDetected: (details) => {
+          console.warn('Tampering detected:', details);
+        },
+      }}
+      loadingComponent={<CustomLoadingScreen />}
+      fallback={<SecurityErrorScreen />}
+    >
+      <YourApp />
+    </SecurityGate>
+  );
+}
+```
+
+## Using Hooks
+
+### useSpektre Hook
+
+Access security status and monitoring data throughout your application:
+
+```tsx
+import { useSpektre } from '@spektre/veil';
+
+function SecurityDashboard() {
+  const {
+    isVerified,
+    sessionId,
+    protectionEnabled,
+    blockedRequests,
+    totalBlocked,
+    secretExposures,
+    scriptProfiles,
+    supplyChainAlerts,
+    sessionAnomalies,
+    runScan,
+    getTelemetry,
+    getProtectionStats,
+  } = useSpektre();
+
+  const handleManualScan = async () => {
+    await runScan();
+    console.log('Security scan completed');
+  };
+
+  return (
+    <div>
+      <h2>Security Status</h2>
+      <p>Verified: {isVerified ? 'Yes' : 'No'}</p>
+      <p>Session ID: {sessionId}</p>
+      <p>Protection: {protectionEnabled ? 'Active' : 'Inactive'}</p>
+      <p>Total Blocked Requests: {totalBlocked}</p>
+      <p>Secret Exposures: {secretExposures}</p>
+      <p>Script Profiles: {scriptProfiles}</p>
+      <p>Supply Chain Alerts: {supplyChainAlerts}</p>
+      <p>Session Anomalies: {sessionAnomalies}</p>
+      <button onClick={handleManualScan}>Run Security Scan</button>
+    </div>
+  );
+}
+```
+
+### useProtectedFetch Hook
+
+Make secure API calls that are only executed after security verification:
+
+```tsx
+import { useProtectedFetch } from '@spektre/veil';
+
+function DataComponent() {
+  const fetch = useProtectedFetch();
+  const [data, setData] = useState(null);
+
+  const loadData = async () => {
+    try {
+      const response = await fetch('/api/sensitive-data');
+      const json = await response.json();
+      setData(json);
+    } catch (error) {
+      console.error('Fetch failed:', error);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={loadData}>Load Data</button>
+      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SecurityGate Component
+
+The main component that wraps your application and provides security monitoring.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `apiKey` | `string` | Yes | Your Spektre API key from the dashboard |
+| `children` | `ReactNode` | Yes | Your application components |
+| `config` | `SpektreConfig` | No | Configuration options (see below) |
+| `fallback` | `ReactNode` | No | Custom component to show on security failure |
+| `loadingComponent` | `ReactNode` | No | Custom component to show during initialization |
+
+#### Config Options
+
+```typescript
+interface SpektreConfig {
+  // Environment settings
+  environment?: 'dev' | 'staging' | 'prod';
+  enabledEnvironments?: string[];
+
+  // Security modules
+  modules?: {
+    performanceMonitoring?: boolean;
+    secretDetection?: boolean;
+    scriptProfiling?: boolean;
+    supplyChainDetection?: boolean;
+    sessionProtection?: boolean;
+    activeProtection?: boolean;
+  };
+
+  // Event handlers
+  onSecurityFailed?: (error: string) => void;
+  onAttackBlocked?: (attack: BlockedAttack) => void;
+  onTamperingDetected?: (details: TamperingDetails) => void;
+}
+```
+
+### useSpektre Hook
+
+Returns security status and monitoring data.
+
+#### Return Values
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `isVerified` | `boolean` | Whether security verification passed |
+| `sessionId` | `string \| null` | Current Spektre session ID |
+| `protectionEnabled` | `boolean` | Whether active protection is enabled |
+| `blockedRequests` | `BlockedRequest[]` | List of blocked malicious requests |
+| `totalBlocked` | `number` | Total count of blocked requests |
+| `secretExposures` | `number` | Number of detected secret exposures |
+| `scriptProfiles` | `number` | Number of profiled scripts |
+| `supplyChainAlerts` | `number` | Number of supply chain alerts |
+| `sessionAnomalies` | `number` | Number of session anomalies detected |
+| `runScan` | `() => Promise<void>` | Manually trigger a security scan |
+| `getTelemetry` | `() => MonitoringState` | Get current monitoring telemetry |
+| `getProtectionStats` | `() => ProtectionState` | Get current protection statistics |
+
+### useProtectedFetch Hook
+
+Returns a fetch function that only executes after security verification.
+
+```typescript
+const fetch: ProtectedFetch = useProtectedFetch();
+```
+
+The returned `fetch` function has the same signature as the native `fetch` API but throws an error if called before security verification is complete.
+
+## Security Modules
+
+### Performance Monitoring
+Tracks application performance metrics and identifies performance anomalies that could indicate security issues.
+
+### Secret Detection
+Scans for exposed API keys, tokens, and other sensitive credentials in your application code and network requests.
+
+### Script Profiling
+Analyzes all scripts loaded by your application to detect malicious or suspicious code.
+
+### Supply Chain Detection
+Monitors third-party dependencies and detects compromised or vulnerable packages.
+
+### Session Protection
+Protects user sessions from hijacking, fixation, and other session-based attacks.
+
+### Active Protection
+Actively blocks malicious requests and attacks in real-time.
+
+## Environment Configuration
+
+Control when security monitoring is active:
+
+```tsx
+<SecurityGate
+  apiKey="your-api-key"
+  config={{
+    environment: 'prod',
+    enabledEnvironments: ['prod', 'staging'],
+  }}
+>
+  <App />
+</SecurityGate>
+```
+
+In this example, security monitoring only runs in production and staging environments. In other environments (like development), the SecurityGate passes through without performing security checks.
+
+## Custom UI Components
+
+### Custom Loading Screen
+
+```tsx
+<SecurityGate
+  apiKey="your-api-key"
+  loadingComponent={
+    <div className="loading-screen">
+      <Spinner />
+      <p>Initializing security...</p>
+    </div>
+  }
+>
+  <App />
+</SecurityGate>
+```
+
+### Custom Error Fallback
+
+```tsx
+<SecurityGate
+  apiKey="your-api-key"
+  fallback={
+    <div className="error-screen">
+      <h1>Security Verification Failed</h1>
+      <p>Please contact support</p>
+    </div>
+  }
+>
+  <App />
+</SecurityGate>
+```
+
+## Links
+
+- [Spektre Platform](https://spektre.io) - Main platform website
+- [Dashboard](https://dashboard.spektre.io) - Manage your API keys and view security reports
+- [Documentation](https://docs.spektre.io) - Complete documentation and guides
+
+## License
+
+MIT
+
+---
+
+Built with Spektre - Securing the future of web applications

package/dist/SecurityGate.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SecurityGateProps } from './types';
+export declare const SecurityGate: React.FC<SecurityGateProps>;

package/dist/SpektreContext.d.ts

@@ -0,0 +1,2 @@
+import type { SpektreState } from './types';
+export declare const SpektreContext: import("react").Context<SpektreState | null>;

package/dist/SpektreProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SpektreState } from './types';
+interface SpektreProviderProps {
+    value: SpektreState;
+    children: React.ReactNode;
+}
+export declare const SpektreProvider: React.FC<SpektreProviderProps>;
+export {};

package/dist/components/VeilProvider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { VeilConfig, VeilContextType } from '../types';
+export declare const VeilContext: React.Context<VeilContextType | undefined>;
+interface VeilProviderProps {
+    config: VeilConfig;
+    children: React.ReactNode;
+}
+declare const VeilProvider: React.FC<VeilProviderProps>;
+export default VeilProvider;

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useSpektre } from './useSpektre';
+export { useProtectedFetch } from './useProtectedFetch';
+export { useVeil } from './useVeil';
+export type { UseSpektreReturn } from './useSpektre';
+export type { ProtectedFetch } from './useProtectedFetch';

package/dist/hooks/useProtectedFetch.d.ts

@@ -0,0 +1,2 @@
+export type ProtectedFetch = (url: RequestInfo | URL, options?: RequestInit) => Promise<Response>;
+export declare const useProtectedFetch: () => ProtectedFetch;

package/dist/hooks/useSpektre.d.ts

@@ -0,0 +1,16 @@
+import type { ProtectionState, MonitoringState } from '../types';
+export interface UseSpektreReturn {
+    isVerified: boolean;
+    sessionId: string | null;
+    protectionEnabled: boolean;
+    blockedRequests: ProtectionState['blockedRequests'];
+    totalBlocked: number;
+    secretExposures: number;
+    scriptProfiles: number;
+    supplyChainAlerts: number;
+    sessionAnomalies: number;
+    runScan: () => Promise<void>;
+    getTelemetry: () => MonitoringState | undefined;
+    getProtectionStats: () => ProtectionState | undefined;
+}
+export declare const useSpektre: () => UseSpektreReturn;

package/dist/hooks/useVeil.d.ts

@@ -0,0 +1,2 @@
+import type { VeilContextType } from '../types';
+export declare const useVeil: () => VeilContextType;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { default as VeilProvider } from './components/VeilProvider';
+export { useVeil, useSpektre, useProtectedFetch } from './hooks';
+export { SpektreContext } from './SpektreContext';
+export { SpektreProvider } from './SpektreProvider';
+export { SecurityGate } from './SecurityGate';
+export type { SpektreConfig, SpektreState, ProtectionState, MonitoringState, BlockedRequest, BlockedAttack, TamperingDetails, SecurityGateProps, VeilConfig, VeilContextType, } from './types';
+export type { UseSpektreReturn, ProtectedFetch } from './hooks';

package/dist/index.esm.js

@@ -0,0 +1,277 @@
+import React, { createContext, useMemo, useCallback, useContext, useState, useEffect } from 'react';
+
+const VeilContext = createContext(undefined);
+const VeilProvider = ({ config, children }) => {
+    const isMonitoring = useMemo(() => config.enableMonitoring ?? false, [config.enableMonitoring]);
+    const logEvent = useCallback((event, data) => {
+        if (isMonitoring) {
+            console.log('[Veil]', event, data);
+        }
+    }, [isMonitoring]);
+    const value = useMemo(() => ({
+        config,
+        isMonitoring,
+        logEvent,
+    }), [config, isMonitoring, logEvent]);
+    return React.createElement(VeilContext.Provider, { value: value }, children);
+};
+
+const SpektreContext = createContext(null);
+SpektreContext.displayName = 'SpektreContext';
+
+const useSpektre = () => {
+    const context = useContext(SpektreContext);
+    if (!context) {
+        throw new Error('useSpektre must be used within a SecurityGate component');
+    }
+    const runScan = async () => {
+        if (typeof window.securityScan === 'function') {
+            await window.securityScan();
+        }
+    };
+    const getTelemetry = () => {
+        if (typeof window.getSecurityTelemetry === 'function') {
+            return window.getSecurityTelemetry();
+        }
+        return context.monitoring;
+    };
+    const getProtectionStats = () => {
+        if (typeof window.getProtectionStats === 'function') {
+            return window.getProtectionStats();
+        }
+        return context.protection;
+    };
+    return {
+        isVerified: context.isVerified,
+        sessionId: context.sessionId,
+        protectionEnabled: context.protection?.enabled || false,
+        blockedRequests: context.protection?.blockedRequests || [],
+        totalBlocked: context.protection?.totalBlocked || 0,
+        secretExposures: context.monitoring?.secretExposures || 0,
+        scriptProfiles: context.monitoring?.scriptProfiles || 0,
+        supplyChainAlerts: context.monitoring?.supplyChainAlerts || 0,
+        sessionAnomalies: context.monitoring?.sessionAnomalies || 0,
+        runScan,
+        getTelemetry,
+        getProtectionStats,
+    };
+};
+
+const useProtectedFetch = () => {
+    const { isVerified } = useSpektre();
+    const protectedFetch = async (url, options) => {
+        if (!isVerified) {
+            throw new Error('Security verification failed. Cannot make fetch requests until verification is complete.');
+        }
+        return fetch(url, options);
+    };
+    return protectedFetch;
+};
+
+const useVeil = () => {
+    const context = useContext(VeilContext);
+    if (context === undefined) {
+        throw new Error('useVeil must be used within a VeilProvider');
+    }
+    return context;
+};
+
+const SpektreProvider = ({ value, children }) => {
+    return React.createElement(SpektreContext.Provider, { value: value }, children);
+};
+
+const SUPABASE_BASE_URL = 'https://vevqxlmcrltcxygmlomv.supabase.co';
+const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, }) => {
+    const [state, setState] = useState({
+        isVerified: false,
+        isLoading: true,
+        error: null,
+        sessionId: null,
+    });
+    useEffect(() => {
+        const scriptUrl = `${SUPABASE_BASE_URL}/functions/v1/scanner_client`;
+        const script = document.createElement('script');
+        script.src = `${scriptUrl}?apiKey=${encodeURIComponent(apiKey)}`;
+        script.type = 'module';
+        script.setAttribute('data-public-key', apiKey);
+        script.setAttribute('data-endpoint', `${SUPABASE_BASE_URL}/functions/v1/monitoring_receiver`);
+        script.setAttribute('data-config-endpoint', `${SUPABASE_BASE_URL}/functions/v1/scanner_config`);
+        script.setAttribute('data-env', config?.environment || 'prod');
+        script.setAttribute('data-auto-scan', 'true');
+        if (config?.enabledEnvironments && config.enabledEnvironments.length > 0) {
+            script.setAttribute('data-enabled-envs', config.enabledEnvironments.join(','));
+        }
+        if (config?.modules) {
+            if (config.modules.performanceMonitoring !== undefined) {
+                script.setAttribute('data-perf', String(config.modules.performanceMonitoring));
+            }
+            if (config.modules.secretDetection !== undefined) {
+                script.setAttribute('data-secrets', String(config.modules.secretDetection));
+            }
+            if (config.modules.scriptProfiling !== undefined) {
+                script.setAttribute('data-scripts', String(config.modules.scriptProfiling));
+            }
+            if (config.modules.supplyChainDetection !== undefined) {
+                script.setAttribute('data-supply-chain', String(config.modules.supplyChainDetection));
+            }
+            if (config.modules.sessionProtection !== undefined) {
+                script.setAttribute('data-session', String(config.modules.sessionProtection));
+            }
+            if (config.modules.activeProtection !== undefined) {
+                script.setAttribute('data-active', String(config.modules.activeProtection));
+            }
+        }
+        script.onload = () => {
+            setTimeout(() => {
+                try {
+                    const sessionId = sessionStorage.getItem('spektre_session_id');
+                    let protection;
+                    if (typeof window.getProtectionStats === 'function') {
+                        protection = window.getProtectionStats();
+                    }
+                    let monitoring;
+                    if (typeof window.getSecurityTelemetry === 'function') {
+                        monitoring = window.getSecurityTelemetry();
+                    }
+                    setState({
+                        isVerified: true,
+                        isLoading: false,
+                        error: null,
+                        sessionId,
+                        protection,
+                        monitoring,
+                    });
+                }
+                catch (err) {
+                    setState({
+                        isVerified: false,
+                        isLoading: false,
+                        error: err instanceof Error ? err.message : 'Failed to initialize security',
+                        sessionId: null,
+                    });
+                }
+            }, 500);
+        };
+        script.onerror = () => {
+            const errorMessage = 'Failed to load security script';
+            setState({
+                isVerified: false,
+                isLoading: false,
+                error: errorMessage,
+                sessionId: null,
+            });
+            if (config?.onSecurityFailed) {
+                config.onSecurityFailed(errorMessage);
+            }
+        };
+        document.head.appendChild(script);
+        return () => {
+            if (script.parentNode) {
+                script.parentNode.removeChild(script);
+            }
+        };
+    }, [apiKey, config]);
+    const handleRetry = () => {
+        setState({
+            isVerified: false,
+            isLoading: true,
+            error: null,
+            sessionId: null,
+        });
+        window.location.reload();
+    };
+    if (state.isLoading) {
+        if (loadingComponent) {
+            return React.createElement(React.Fragment, null, loadingComponent);
+        }
+        return (React.createElement("div", { style: styles.container },
+            React.createElement("div", { style: styles.content },
+                React.createElement("div", { style: styles.icon },
+                    React.createElement("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                        React.createElement("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }))),
+                React.createElement("h2", { style: styles.title }, "Initializing Security"),
+                React.createElement("p", { style: styles.message }, "Please wait while we verify your application..."),
+                React.createElement("div", { style: styles.spinner }))));
+    }
+    if (state.error || !state.isVerified) {
+        if (fallback) {
+            return React.createElement(React.Fragment, null, fallback);
+        }
+        return (React.createElement("div", { style: styles.container },
+            React.createElement("div", { style: styles.content },
+                React.createElement("div", { style: { ...styles.icon, color: '#ef4444' } },
+                    React.createElement("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                        React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+                        React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                        React.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" }))),
+                React.createElement("h2", { style: styles.title }, "Security Verification Failed"),
+                React.createElement("p", { style: styles.message }, state.error || 'Unable to verify application security'),
+                React.createElement("button", { onClick: handleRetry, style: styles.button }, "Retry"))));
+    }
+    return React.createElement(SpektreProvider, { value: state }, children);
+};
+const styles = {
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        backgroundColor: '#f9fafb',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    },
+    content: {
+        textAlign: 'center',
+        padding: '2rem',
+        maxWidth: '400px',
+    },
+    icon: {
+        color: '#3b82f6',
+        marginBottom: '1rem',
+        display: 'flex',
+        justifyContent: 'center',
+    },
+    title: {
+        fontSize: '1.5rem',
+        fontWeight: '600',
+        color: '#111827',
+        marginBottom: '0.5rem',
+    },
+    message: {
+        fontSize: '1rem',
+        color: '#6b7280',
+        marginBottom: '1.5rem',
+        lineHeight: '1.5',
+    },
+    spinner: {
+        width: '32px',
+        height: '32px',
+        border: '3px solid #e5e7eb',
+        borderTopColor: '#3b82f6',
+        borderRadius: '50%',
+        margin: '0 auto',
+        animation: 'spin 1s linear infinite',
+    },
+    button: {
+        backgroundColor: '#3b82f6',
+        color: 'white',
+        border: 'none',
+        borderRadius: '0.5rem',
+        padding: '0.75rem 1.5rem',
+        fontSize: '1rem',
+        fontWeight: '500',
+        cursor: 'pointer',
+        transition: 'background-color 0.2s',
+    },
+};
+const styleSheet = document.createElement('style');
+styleSheet.textContent = `
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+document.head.appendChild(styleSheet);
+
+export { SecurityGate, SpektreContext, SpektreProvider, VeilProvider, useProtectedFetch, useSpektre, useVeil };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -0,0 +1,285 @@
+'use strict';
+
+var React = require('react');
+
+const VeilContext = React.createContext(undefined);
+const VeilProvider = ({ config, children }) => {
+    const isMonitoring = React.useMemo(() => config.enableMonitoring ?? false, [config.enableMonitoring]);
+    const logEvent = React.useCallback((event, data) => {
+        if (isMonitoring) {
+            console.log('[Veil]', event, data);
+        }
+    }, [isMonitoring]);
+    const value = React.useMemo(() => ({
+        config,
+        isMonitoring,
+        logEvent,
+    }), [config, isMonitoring, logEvent]);
+    return React.createElement(VeilContext.Provider, { value: value }, children);
+};
+
+const SpektreContext = React.createContext(null);
+SpektreContext.displayName = 'SpektreContext';
+
+const useSpektre = () => {
+    const context = React.useContext(SpektreContext);
+    if (!context) {
+        throw new Error('useSpektre must be used within a SecurityGate component');
+    }
+    const runScan = async () => {
+        if (typeof window.securityScan === 'function') {
+            await window.securityScan();
+        }
+    };
+    const getTelemetry = () => {
+        if (typeof window.getSecurityTelemetry === 'function') {
+            return window.getSecurityTelemetry();
+        }
+        return context.monitoring;
+    };
+    const getProtectionStats = () => {
+        if (typeof window.getProtectionStats === 'function') {
+            return window.getProtectionStats();
+        }
+        return context.protection;
+    };
+    return {
+        isVerified: context.isVerified,
+        sessionId: context.sessionId,
+        protectionEnabled: context.protection?.enabled || false,
+        blockedRequests: context.protection?.blockedRequests || [],
+        totalBlocked: context.protection?.totalBlocked || 0,
+        secretExposures: context.monitoring?.secretExposures || 0,
+        scriptProfiles: context.monitoring?.scriptProfiles || 0,
+        supplyChainAlerts: context.monitoring?.supplyChainAlerts || 0,
+        sessionAnomalies: context.monitoring?.sessionAnomalies || 0,
+        runScan,
+        getTelemetry,
+        getProtectionStats,
+    };
+};
+
+const useProtectedFetch = () => {
+    const { isVerified } = useSpektre();
+    const protectedFetch = async (url, options) => {
+        if (!isVerified) {
+            throw new Error('Security verification failed. Cannot make fetch requests until verification is complete.');
+        }
+        return fetch(url, options);
+    };
+    return protectedFetch;
+};
+
+const useVeil = () => {
+    const context = React.useContext(VeilContext);
+    if (context === undefined) {
+        throw new Error('useVeil must be used within a VeilProvider');
+    }
+    return context;
+};
+
+const SpektreProvider = ({ value, children }) => {
+    return React.createElement(SpektreContext.Provider, { value: value }, children);
+};
+
+const SUPABASE_BASE_URL = 'https://vevqxlmcrltcxygmlomv.supabase.co';
+const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, }) => {
+    const [state, setState] = React.useState({
+        isVerified: false,
+        isLoading: true,
+        error: null,
+        sessionId: null,
+    });
+    React.useEffect(() => {
+        const scriptUrl = `${SUPABASE_BASE_URL}/functions/v1/scanner_client`;
+        const script = document.createElement('script');
+        script.src = `${scriptUrl}?apiKey=${encodeURIComponent(apiKey)}`;
+        script.type = 'module';
+        script.setAttribute('data-public-key', apiKey);
+        script.setAttribute('data-endpoint', `${SUPABASE_BASE_URL}/functions/v1/monitoring_receiver`);
+        script.setAttribute('data-config-endpoint', `${SUPABASE_BASE_URL}/functions/v1/scanner_config`);
+        script.setAttribute('data-env', config?.environment || 'prod');
+        script.setAttribute('data-auto-scan', 'true');
+        if (config?.enabledEnvironments && config.enabledEnvironments.length > 0) {
+            script.setAttribute('data-enabled-envs', config.enabledEnvironments.join(','));
+        }
+        if (config?.modules) {
+            if (config.modules.performanceMonitoring !== undefined) {
+                script.setAttribute('data-perf', String(config.modules.performanceMonitoring));
+            }
+            if (config.modules.secretDetection !== undefined) {
+                script.setAttribute('data-secrets', String(config.modules.secretDetection));
+            }
+            if (config.modules.scriptProfiling !== undefined) {
+                script.setAttribute('data-scripts', String(config.modules.scriptProfiling));
+            }
+            if (config.modules.supplyChainDetection !== undefined) {
+                script.setAttribute('data-supply-chain', String(config.modules.supplyChainDetection));
+            }
+            if (config.modules.sessionProtection !== undefined) {
+                script.setAttribute('data-session', String(config.modules.sessionProtection));
+            }
+            if (config.modules.activeProtection !== undefined) {
+                script.setAttribute('data-active', String(config.modules.activeProtection));
+            }
+        }
+        script.onload = () => {
+            setTimeout(() => {
+                try {
+                    const sessionId = sessionStorage.getItem('spektre_session_id');
+                    let protection;
+                    if (typeof window.getProtectionStats === 'function') {
+                        protection = window.getProtectionStats();
+                    }
+                    let monitoring;
+                    if (typeof window.getSecurityTelemetry === 'function') {
+                        monitoring = window.getSecurityTelemetry();
+                    }
+                    setState({
+                        isVerified: true,
+                        isLoading: false,
+                        error: null,
+                        sessionId,
+                        protection,
+                        monitoring,
+                    });
+                }
+                catch (err) {
+                    setState({
+                        isVerified: false,
+                        isLoading: false,
+                        error: err instanceof Error ? err.message : 'Failed to initialize security',
+                        sessionId: null,
+                    });
+                }
+            }, 500);
+        };
+        script.onerror = () => {
+            const errorMessage = 'Failed to load security script';
+            setState({
+                isVerified: false,
+                isLoading: false,
+                error: errorMessage,
+                sessionId: null,
+            });
+            if (config?.onSecurityFailed) {
+                config.onSecurityFailed(errorMessage);
+            }
+        };
+        document.head.appendChild(script);
+        return () => {
+            if (script.parentNode) {
+                script.parentNode.removeChild(script);
+            }
+        };
+    }, [apiKey, config]);
+    const handleRetry = () => {
+        setState({
+            isVerified: false,
+            isLoading: true,
+            error: null,
+            sessionId: null,
+        });
+        window.location.reload();
+    };
+    if (state.isLoading) {
+        if (loadingComponent) {
+            return React.createElement(React.Fragment, null, loadingComponent);
+        }
+        return (React.createElement("div", { style: styles.container },
+            React.createElement("div", { style: styles.content },
+                React.createElement("div", { style: styles.icon },
+                    React.createElement("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                        React.createElement("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }))),
+                React.createElement("h2", { style: styles.title }, "Initializing Security"),
+                React.createElement("p", { style: styles.message }, "Please wait while we verify your application..."),
+                React.createElement("div", { style: styles.spinner }))));
+    }
+    if (state.error || !state.isVerified) {
+        if (fallback) {
+            return React.createElement(React.Fragment, null, fallback);
+        }
+        return (React.createElement("div", { style: styles.container },
+            React.createElement("div", { style: styles.content },
+                React.createElement("div", { style: { ...styles.icon, color: '#ef4444' } },
+                    React.createElement("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                        React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+                        React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                        React.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" }))),
+                React.createElement("h2", { style: styles.title }, "Security Verification Failed"),
+                React.createElement("p", { style: styles.message }, state.error || 'Unable to verify application security'),
+                React.createElement("button", { onClick: handleRetry, style: styles.button }, "Retry"))));
+    }
+    return React.createElement(SpektreProvider, { value: state }, children);
+};
+const styles = {
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        backgroundColor: '#f9fafb',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    },
+    content: {
+        textAlign: 'center',
+        padding: '2rem',
+        maxWidth: '400px',
+    },
+    icon: {
+        color: '#3b82f6',
+        marginBottom: '1rem',
+        display: 'flex',
+        justifyContent: 'center',
+    },
+    title: {
+        fontSize: '1.5rem',
+        fontWeight: '600',
+        color: '#111827',
+        marginBottom: '0.5rem',
+    },
+    message: {
+        fontSize: '1rem',
+        color: '#6b7280',
+        marginBottom: '1.5rem',
+        lineHeight: '1.5',
+    },
+    spinner: {
+        width: '32px',
+        height: '32px',
+        border: '3px solid #e5e7eb',
+        borderTopColor: '#3b82f6',
+        borderRadius: '50%',
+        margin: '0 auto',
+        animation: 'spin 1s linear infinite',
+    },
+    button: {
+        backgroundColor: '#3b82f6',
+        color: 'white',
+        border: 'none',
+        borderRadius: '0.5rem',
+        padding: '0.75rem 1.5rem',
+        fontSize: '1rem',
+        fontWeight: '500',
+        cursor: 'pointer',
+        transition: 'background-color 0.2s',
+    },
+};
+const styleSheet = document.createElement('style');
+styleSheet.textContent = `
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+document.head.appendChild(styleSheet);
+
+exports.SecurityGate = SecurityGate;
+exports.SpektreContext = SpektreContext;
+exports.SpektreProvider = SpektreProvider;
+exports.VeilProvider = VeilProvider;
+exports.useProtectedFetch = useProtectedFetch;
+exports.useSpektre = useSpektre;
+exports.useVeil = useVeil;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types.d.ts

@@ -0,0 +1,74 @@
+import { ReactNode } from 'react';
+export interface SpektreConfig {
+    apiKey: string;
+    endpoint?: string;
+    environment?: 'dev' | 'staging' | 'prod';
+    enabledEnvironments?: string[];
+    modules?: {
+        performanceMonitoring?: boolean;
+        secretDetection?: boolean;
+        scriptProfiling?: boolean;
+        supplyChainDetection?: boolean;
+        sessionProtection?: boolean;
+        activeProtection?: boolean;
+    };
+    onTamperingDetected?: (details: TamperingDetails) => void;
+    onSecurityFailed?: (error: string) => void;
+    onAttackBlocked?: (attack: BlockedAttack) => void;
+}
+export interface SpektreState {
+    isVerified: boolean;
+    isLoading: boolean;
+    error: string | null;
+    sessionId: string | null;
+    protection?: ProtectionState;
+    monitoring?: MonitoringState;
+}
+export interface ProtectionState {
+    enabled: boolean;
+    blockedRequests: BlockedRequest[];
+    totalBlocked: number;
+}
+export interface MonitoringState {
+    secretExposures: number;
+    scriptProfiles: number;
+    supplyChainAlerts: number;
+    sessionAnomalies: number;
+}
+export interface BlockedRequest {
+    url: string;
+    reason: string;
+    timestamp: number;
+    severity: 'low' | 'medium' | 'high' | 'critical';
+}
+export interface BlockedAttack {
+    url: string;
+    reason: string;
+    timestamp: number;
+    severity: 'low' | 'medium' | 'high' | 'critical';
+    type: string;
+    details: string;
+}
+export interface TamperingDetails {
+    type: string;
+    detected: boolean;
+    timestamp: number;
+}
+export interface SecurityGateProps {
+    apiKey: string;
+    children: ReactNode;
+    config?: Partial<SpektreConfig>;
+    fallback?: ReactNode;
+    loadingComponent?: ReactNode;
+}
+export interface VeilConfig {
+    enableMonitoring?: boolean;
+    enableSecurityChecks?: boolean;
+    apiKey?: string;
+    environment?: 'development' | 'production';
+}
+export interface VeilContextType {
+    config: VeilConfig;
+    isMonitoring: boolean;
+    logEvent: (event: string, data?: Record<string, unknown>) => void;
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@spektre/veil",
+  "version": "0.1.0",
+  "description": "Security and monitoring wrapper for React apps built with AI tools",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "lint": "eslint .",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": ">=16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "globals": "^15.9.0",
+    "rollup": "^4.9.6",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0"
+  },
+  "keywords": [
+    "react",
+    "security",
+    "monitoring",
+    "ai",
+    "wrapper"
+  ],
+  "author": "Spektre.app",
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://spektre.io",
+  "bugs": {
+    "url": "https://github.com/spektre-io/veil/issues"
+  }
+}