@spektre/veil 0.1.0 → 0.1.2

package/dist/hooks/index.d.ts

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

package/dist/index.d.ts

@@ -1,7 +1,6 @@
-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';
+export { SpektreProvider } from './SpektreProvider';
+export { SpektreContext } from './SpektreContext';
+export { useSpektre } from './hooks/useSpektre';
+export { useProtectedFetch } from './hooks/useProtectedFetch';
+export type { SecurityGateProps, SpektreConfig, SpektreState, ProtectionState, MonitoringState, BlockedRequest, BlockedAttack, TamperingDetails, VeilConfig, VeilState, VeilProps, VeilContextType, } from './types';

package/dist/index.esm.js

@@ -1,81 +1,8 @@
-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);
-};
+import React, { createContext, useState, useEffect, useContext } from 'react';
 
 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);
 };
@@ -89,6 +16,9 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
         sessionId: null,
     });
     useEffect(() => {
+        // Set tampering detection marker
+        sessionStorage.setItem('spektre_js_enabled', 'true');
+        sessionStorage.setItem('spektre_init_time', Date.now().toString());
         const scriptUrl = `${SUPABASE_BASE_URL}/functions/v1/scanner_client`;
         const script = document.createElement('script');
         script.src = `${scriptUrl}?apiKey=${encodeURIComponent(apiKey)}`;
@@ -118,7 +48,7 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
                 script.setAttribute('data-session', String(config.modules.sessionProtection));
             }
             if (config.modules.activeProtection !== undefined) {
-                script.setAttribute('data-active', String(config.modules.activeProtection));
+                script.setAttribute('data-protection', String(config.modules.activeProtection));
             }
         }
         script.onload = () => {
@@ -141,6 +71,8 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
                         protection,
                         monitoring,
                     });
+                    // Start tampering detection after successful load
+                    startTamperingDetection(config);
                 }
                 catch (err) {
                     setState({
@@ -169,6 +101,7 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
             if (script.parentNode) {
                 script.parentNode.removeChild(script);
             }
+            stopTamperingDetection();
         };
     }, [apiKey, config]);
     const handleRetry = () => {
@@ -185,10 +118,12 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
             return React.createElement(React.Fragment, null, loadingComponent);
         }
         return (React.createElement("div", { style: styles.container },
+            React.createElement("div", { style: styles.backgroundGlow },
+                React.createElement("div", { style: styles.orangeGlowLeft }),
+                React.createElement("div", { style: styles.orangeGlowRight })),
             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("div", { style: styles.logoContainer },
+                    React.createElement("img", { src: "/image.png", alt: "Spektre", style: styles.logo })),
                 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 }))));
@@ -198,69 +133,256 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
             return React.createElement(React.Fragment, null, fallback);
         }
         return (React.createElement("div", { style: styles.container },
+            React.createElement("div", { style: styles.backgroundGlow },
+                React.createElement("div", { style: styles.orangeGlowLeft }),
+                React.createElement("div", { style: styles.orangeGlowRight })),
             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"))));
+                React.createElement("div", { style: styles.logoContainer },
+                    React.createElement("img", { src: "/image.png", alt: "Spektre", style: styles.logo })),
+                React.createElement("h2", { style: styles.errorTitle }, "Security Protection Required"),
+                React.createElement("p", { style: styles.errorMessage }, "This application requires Spektre security protection to run safely."),
+                React.createElement("p", { style: styles.errorDetails }, state.error || 'Unable to verify application security'),
+                React.createElement("button", { onClick: handleRetry, style: styles.button }, "Retry Loading"))));
     }
     return React.createElement(SpektreProvider, { value: state }, children);
 };
+// Tampering detection
+let tamperingInterval = null;
+let fetchIntegrityHash = null;
+function startTamperingDetection(config) {
+    // Calculate integrity hash of fetch function
+    if (typeof window.fetch === 'function') {
+        fetchIntegrityHash = hashCode(window.fetch.toString());
+    }
+    tamperingInterval = window.setInterval(() => {
+        // Check 1: Verify JavaScript marker is still present
+        const jsEnabled = sessionStorage.getItem('spektre_js_enabled');
+        if (!jsEnabled) {
+            handleTampering('JavaScript marker removed', config);
+            return;
+        }
+        // Check 2: Verify Spektre script is still in DOM
+        const scriptExists = document.querySelector('script[src*="scanner_client"]');
+        if (!scriptExists) {
+            handleTampering('Security script removed from page', config);
+            return;
+        }
+        // Check 3: Verify fetch function hasn't been tampered with
+        if (typeof window.fetch === 'function') {
+            const currentHash = hashCode(window.fetch.toString());
+            if (fetchIntegrityHash && currentHash !== fetchIntegrityHash) {
+                // Fetch function was modified
+                const fetchCode = window.fetch.toString();
+                // Check if it still has Spektre protection
+                if (!fetchCode.includes('Spektre') && !fetchCode.includes('PROTECTION')) {
+                    handleTampering('Security protection has been disabled', config);
+                    return;
+                }
+            }
+        }
+        else {
+            handleTampering('Fetch function removed', config);
+            return;
+        }
+        // Check 4: Verify protection stats function exists
+        if (typeof window.getProtectionStats !== 'function') {
+            handleTampering('Security monitoring disabled', config);
+            return;
+        }
+    }, 2000); // Check every 2 seconds
+}
+function stopTamperingDetection() {
+    if (tamperingInterval) {
+        clearInterval(tamperingInterval);
+        tamperingInterval = null;
+    }
+}
+function handleTampering(reason, config) {
+    console.error('[Spektre SecurityGate] TAMPERING DETECTED:', reason);
+    // Stop checking to prevent infinite loops
+    stopTamperingDetection();
+    // Call callback if provided
+    if (config?.onTamperingDetected) {
+        config.onTamperingDetected(reason);
+    }
+    // Lock down the application
+    const root = document.getElementById('root');
+    if (root) {
+        root.innerHTML = '';
+    }
+    document.body.innerHTML = `
+    <div style="
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      z-index: 999999;
+    ">
+      <div style="max-width: 500px; text-align: center; padding: 40px;">
+        <div style="font-size: 72px; margin-bottom: 24px;">⛔</div>
+        <h1 style="font-size: 28px; font-weight: 600; margin-bottom: 16px;">
+          Security Violation Detected
+        </h1>
+        <p style="font-size: 16px; line-height: 1.6; opacity: 0.9; margin-bottom: 24px;">
+          This application has been locked due to security tampering.
+        </p>
+        <div style="
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 8px;
+          padding: 16px;
+          margin-bottom: 24px;
+          font-size: 14px;
+          font-family: monospace;
+        ">
+          ${reason}
+        </div>
+        <button onclick="location.reload()" style="
+          padding: 12px 32px;
+          font-size: 16px;
+          font-weight: 500;
+          background: white;
+          color: #dc2626;
+          border: none;
+          border-radius: 8px;
+          cursor: pointer;
+          transition: transform 0.2s;
+        " onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
+          Reload Application
+        </button>
+      </div>
+    </div>
+  `;
+}
+// Simple hash function for integrity checking
+function hashCode(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = ((hash << 5) - hash) + char;
+        hash = hash & hash;
+    }
+    return hash.toString(36);
+}
 const styles = {
     container: {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         minHeight: '100vh',
-        backgroundColor: '#f9fafb',
+        background: '#000000',
         fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        position: 'relative',
+        overflow: 'hidden',
+    },
+    backgroundGlow: {
+        position: 'absolute',
+        inset: 0,
+        pointerEvents: 'none',
+    },
+    orangeGlowLeft: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        width: '384px',
+        height: '100%',
+        background: 'linear-gradient(to left, rgba(249, 115, 22, 0.4), rgba(239, 68, 68, 0.4), transparent)',
+        filter: 'blur(96px)',
+        transform: 'translateX(30%)',
+    },
+    orangeGlowRight: {
+        position: 'absolute',
+        top: '50%',
+        right: 0,
+        width: '384px',
+        height: '384px',
+        background: 'linear-gradient(to left, rgba(249, 115, 22, 0.3), transparent)',
+        filter: 'blur(96px)',
+        transform: 'translateY(-50%)',
     },
     content: {
         textAlign: 'center',
         padding: '2rem',
-        maxWidth: '400px',
+        maxWidth: '500px',
+        background: 'rgba(0, 0, 0, 0.5)',
+        border: '1px solid rgba(71, 85, 105, 0.5)',
+        borderRadius: '16px',
+        boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
+        backdropFilter: 'blur(16px)',
+        position: 'relative',
+        zIndex: 10,
     },
-    icon: {
-        color: '#3b82f6',
-        marginBottom: '1rem',
+    logoContainer: {
+        marginBottom: '2rem',
         display: 'flex',
         justifyContent: 'center',
     },
+    logo: {
+        width: '56px',
+        height: '56px',
+        objectFit: 'contain',
+    },
     title: {
-        fontSize: '1.5rem',
+        fontSize: '1.75rem',
         fontWeight: '600',
-        color: '#111827',
-        marginBottom: '0.5rem',
+        color: '#ffffff',
+        marginBottom: '0.75rem',
     },
     message: {
         fontSize: '1rem',
-        color: '#6b7280',
+        color: '#cbd5e1',
+        marginBottom: '1.5rem',
+        lineHeight: '1.6',
+    },
+    errorTitle: {
+        fontSize: '1.75rem',
+        fontWeight: '600',
+        color: '#ffffff',
+        marginBottom: '0.75rem',
+    },
+    errorMessage: {
+        fontSize: '1rem',
+        color: '#cbd5e1',
+        marginBottom: '1rem',
+        lineHeight: '1.6',
+    },
+    errorDetails: {
+        fontSize: '0.875rem',
+        color: '#fca5a5',
         marginBottom: '1.5rem',
-        lineHeight: '1.5',
+        padding: '0.75rem',
+        background: 'rgba(239, 68, 68, 0.1)',
+        border: '1px solid rgba(239, 68, 68, 0.3)',
+        borderRadius: '8px',
+        fontFamily: 'monospace',
     },
     spinner: {
-        width: '32px',
-        height: '32px',
-        border: '3px solid #e5e7eb',
-        borderTopColor: '#3b82f6',
+        width: '40px',
+        height: '40px',
+        border: '4px solid rgba(71, 85, 105, 0.3)',
+        borderTopColor: '#f97316',
         borderRadius: '50%',
         margin: '0 auto',
         animation: 'spin 1s linear infinite',
     },
     button: {
-        backgroundColor: '#3b82f6',
+        backgroundColor: 'rgba(249, 115, 22, 0.6)',
         color: 'white',
-        border: 'none',
-        borderRadius: '0.5rem',
-        padding: '0.75rem 1.5rem',
+        border: '1px solid rgba(249, 115, 22, 0.6)',
+        borderRadius: '9999px',
+        padding: '0.875rem 2rem',
         fontSize: '1rem',
-        fontWeight: '500',
+        fontWeight: '600',
         cursor: 'pointer',
-        transition: 'background-color 0.2s',
+        transition: 'all 0.2s',
+        boxShadow: '0 4px 12px rgba(249, 115, 22, 0.3)',
     },
 };
 const styleSheet = document.createElement('style');
@@ -273,5 +395,54 @@ styleSheet.textContent = `
 `;
 document.head.appendChild(styleSheet);
 
-export { SecurityGate, SpektreContext, SpektreProvider, VeilProvider, useProtectedFetch, useSpektre, useVeil };
+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;
+};
+
+export { SecurityGate, SpektreContext, SpektreProvider, useProtectedFetch, useSpektre };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

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

package/dist/index.js

@@ -2,82 +2,9 @@
 
 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);
 };
@@ -91,6 +18,9 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
         sessionId: null,
     });
     React.useEffect(() => {
+        // Set tampering detection marker
+        sessionStorage.setItem('spektre_js_enabled', 'true');
+        sessionStorage.setItem('spektre_init_time', Date.now().toString());
         const scriptUrl = `${SUPABASE_BASE_URL}/functions/v1/scanner_client`;
         const script = document.createElement('script');
         script.src = `${scriptUrl}?apiKey=${encodeURIComponent(apiKey)}`;
@@ -120,7 +50,7 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
                 script.setAttribute('data-session', String(config.modules.sessionProtection));
             }
             if (config.modules.activeProtection !== undefined) {
-                script.setAttribute('data-active', String(config.modules.activeProtection));
+                script.setAttribute('data-protection', String(config.modules.activeProtection));
             }
         }
         script.onload = () => {
@@ -143,6 +73,8 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
                         protection,
                         monitoring,
                     });
+                    // Start tampering detection after successful load
+                    startTamperingDetection(config);
                 }
                 catch (err) {
                     setState({
@@ -171,6 +103,7 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
             if (script.parentNode) {
                 script.parentNode.removeChild(script);
             }
+            stopTamperingDetection();
         };
     }, [apiKey, config]);
     const handleRetry = () => {
@@ -187,10 +120,12 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
             return React.createElement(React.Fragment, null, loadingComponent);
         }
         return (React.createElement("div", { style: styles.container },
+            React.createElement("div", { style: styles.backgroundGlow },
+                React.createElement("div", { style: styles.orangeGlowLeft }),
+                React.createElement("div", { style: styles.orangeGlowRight })),
             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("div", { style: styles.logoContainer },
+                    React.createElement("img", { src: "/image.png", alt: "Spektre", style: styles.logo })),
                 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 }))));
@@ -200,69 +135,256 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
             return React.createElement(React.Fragment, null, fallback);
         }
         return (React.createElement("div", { style: styles.container },
+            React.createElement("div", { style: styles.backgroundGlow },
+                React.createElement("div", { style: styles.orangeGlowLeft }),
+                React.createElement("div", { style: styles.orangeGlowRight })),
             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"))));
+                React.createElement("div", { style: styles.logoContainer },
+                    React.createElement("img", { src: "/image.png", alt: "Spektre", style: styles.logo })),
+                React.createElement("h2", { style: styles.errorTitle }, "Security Protection Required"),
+                React.createElement("p", { style: styles.errorMessage }, "This application requires Spektre security protection to run safely."),
+                React.createElement("p", { style: styles.errorDetails }, state.error || 'Unable to verify application security'),
+                React.createElement("button", { onClick: handleRetry, style: styles.button }, "Retry Loading"))));
     }
     return React.createElement(SpektreProvider, { value: state }, children);
 };
+// Tampering detection
+let tamperingInterval = null;
+let fetchIntegrityHash = null;
+function startTamperingDetection(config) {
+    // Calculate integrity hash of fetch function
+    if (typeof window.fetch === 'function') {
+        fetchIntegrityHash = hashCode(window.fetch.toString());
+    }
+    tamperingInterval = window.setInterval(() => {
+        // Check 1: Verify JavaScript marker is still present
+        const jsEnabled = sessionStorage.getItem('spektre_js_enabled');
+        if (!jsEnabled) {
+            handleTampering('JavaScript marker removed', config);
+            return;
+        }
+        // Check 2: Verify Spektre script is still in DOM
+        const scriptExists = document.querySelector('script[src*="scanner_client"]');
+        if (!scriptExists) {
+            handleTampering('Security script removed from page', config);
+            return;
+        }
+        // Check 3: Verify fetch function hasn't been tampered with
+        if (typeof window.fetch === 'function') {
+            const currentHash = hashCode(window.fetch.toString());
+            if (fetchIntegrityHash && currentHash !== fetchIntegrityHash) {
+                // Fetch function was modified
+                const fetchCode = window.fetch.toString();
+                // Check if it still has Spektre protection
+                if (!fetchCode.includes('Spektre') && !fetchCode.includes('PROTECTION')) {
+                    handleTampering('Security protection has been disabled', config);
+                    return;
+                }
+            }
+        }
+        else {
+            handleTampering('Fetch function removed', config);
+            return;
+        }
+        // Check 4: Verify protection stats function exists
+        if (typeof window.getProtectionStats !== 'function') {
+            handleTampering('Security monitoring disabled', config);
+            return;
+        }
+    }, 2000); // Check every 2 seconds
+}
+function stopTamperingDetection() {
+    if (tamperingInterval) {
+        clearInterval(tamperingInterval);
+        tamperingInterval = null;
+    }
+}
+function handleTampering(reason, config) {
+    console.error('[Spektre SecurityGate] TAMPERING DETECTED:', reason);
+    // Stop checking to prevent infinite loops
+    stopTamperingDetection();
+    // Call callback if provided
+    if (config?.onTamperingDetected) {
+        config.onTamperingDetected(reason);
+    }
+    // Lock down the application
+    const root = document.getElementById('root');
+    if (root) {
+        root.innerHTML = '';
+    }
+    document.body.innerHTML = `
+    <div style="
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      z-index: 999999;
+    ">
+      <div style="max-width: 500px; text-align: center; padding: 40px;">
+        <div style="font-size: 72px; margin-bottom: 24px;">⛔</div>
+        <h1 style="font-size: 28px; font-weight: 600; margin-bottom: 16px;">
+          Security Violation Detected
+        </h1>
+        <p style="font-size: 16px; line-height: 1.6; opacity: 0.9; margin-bottom: 24px;">
+          This application has been locked due to security tampering.
+        </p>
+        <div style="
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 8px;
+          padding: 16px;
+          margin-bottom: 24px;
+          font-size: 14px;
+          font-family: monospace;
+        ">
+          ${reason}
+        </div>
+        <button onclick="location.reload()" style="
+          padding: 12px 32px;
+          font-size: 16px;
+          font-weight: 500;
+          background: white;
+          color: #dc2626;
+          border: none;
+          border-radius: 8px;
+          cursor: pointer;
+          transition: transform 0.2s;
+        " onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
+          Reload Application
+        </button>
+      </div>
+    </div>
+  `;
+}
+// Simple hash function for integrity checking
+function hashCode(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = ((hash << 5) - hash) + char;
+        hash = hash & hash;
+    }
+    return hash.toString(36);
+}
 const styles = {
     container: {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         minHeight: '100vh',
-        backgroundColor: '#f9fafb',
+        background: '#000000',
         fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        position: 'relative',
+        overflow: 'hidden',
+    },
+    backgroundGlow: {
+        position: 'absolute',
+        inset: 0,
+        pointerEvents: 'none',
+    },
+    orangeGlowLeft: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        width: '384px',
+        height: '100%',
+        background: 'linear-gradient(to left, rgba(249, 115, 22, 0.4), rgba(239, 68, 68, 0.4), transparent)',
+        filter: 'blur(96px)',
+        transform: 'translateX(30%)',
+    },
+    orangeGlowRight: {
+        position: 'absolute',
+        top: '50%',
+        right: 0,
+        width: '384px',
+        height: '384px',
+        background: 'linear-gradient(to left, rgba(249, 115, 22, 0.3), transparent)',
+        filter: 'blur(96px)',
+        transform: 'translateY(-50%)',
     },
     content: {
         textAlign: 'center',
         padding: '2rem',
-        maxWidth: '400px',
+        maxWidth: '500px',
+        background: 'rgba(0, 0, 0, 0.5)',
+        border: '1px solid rgba(71, 85, 105, 0.5)',
+        borderRadius: '16px',
+        boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
+        backdropFilter: 'blur(16px)',
+        position: 'relative',
+        zIndex: 10,
     },
-    icon: {
-        color: '#3b82f6',
-        marginBottom: '1rem',
+    logoContainer: {
+        marginBottom: '2rem',
         display: 'flex',
         justifyContent: 'center',
     },
+    logo: {
+        width: '56px',
+        height: '56px',
+        objectFit: 'contain',
+    },
     title: {
-        fontSize: '1.5rem',
+        fontSize: '1.75rem',
         fontWeight: '600',
-        color: '#111827',
-        marginBottom: '0.5rem',
+        color: '#ffffff',
+        marginBottom: '0.75rem',
     },
     message: {
         fontSize: '1rem',
-        color: '#6b7280',
+        color: '#cbd5e1',
+        marginBottom: '1.5rem',
+        lineHeight: '1.6',
+    },
+    errorTitle: {
+        fontSize: '1.75rem',
+        fontWeight: '600',
+        color: '#ffffff',
+        marginBottom: '0.75rem',
+    },
+    errorMessage: {
+        fontSize: '1rem',
+        color: '#cbd5e1',
+        marginBottom: '1rem',
+        lineHeight: '1.6',
+    },
+    errorDetails: {
+        fontSize: '0.875rem',
+        color: '#fca5a5',
         marginBottom: '1.5rem',
-        lineHeight: '1.5',
+        padding: '0.75rem',
+        background: 'rgba(239, 68, 68, 0.1)',
+        border: '1px solid rgba(239, 68, 68, 0.3)',
+        borderRadius: '8px',
+        fontFamily: 'monospace',
     },
     spinner: {
-        width: '32px',
-        height: '32px',
-        border: '3px solid #e5e7eb',
-        borderTopColor: '#3b82f6',
+        width: '40px',
+        height: '40px',
+        border: '4px solid rgba(71, 85, 105, 0.3)',
+        borderTopColor: '#f97316',
         borderRadius: '50%',
         margin: '0 auto',
         animation: 'spin 1s linear infinite',
     },
     button: {
-        backgroundColor: '#3b82f6',
+        backgroundColor: 'rgba(249, 115, 22, 0.6)',
         color: 'white',
-        border: 'none',
-        borderRadius: '0.5rem',
-        padding: '0.75rem 1.5rem',
+        border: '1px solid rgba(249, 115, 22, 0.6)',
+        borderRadius: '9999px',
+        padding: '0.875rem 2rem',
         fontSize: '1rem',
-        fontWeight: '500',
+        fontWeight: '600',
         cursor: 'pointer',
-        transition: 'background-color 0.2s',
+        transition: 'all 0.2s',
+        boxShadow: '0 4px 12px rgba(249, 115, 22, 0.3)',
     },
 };
 const styleSheet = document.createElement('style');
@@ -275,11 +397,58 @@ styleSheet.textContent = `
 `;
 document.head.appendChild(styleSheet);
 
+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;
+};
+
 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

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

package/dist/types.d.ts

@@ -1,8 +1,6 @@
-import { ReactNode } from 'react';
 export interface SpektreConfig {
-    apiKey: string;
     endpoint?: string;
-    environment?: 'dev' | 'staging' | 'prod';
+    environment?: string;
     enabledEnvironments?: string[];
     modules?: {
         performanceMonitoring?: boolean;
@@ -12,7 +10,7 @@ export interface SpektreConfig {
         sessionProtection?: boolean;
         activeProtection?: boolean;
     };
-    onTamperingDetected?: (details: TamperingDetails) => void;
+    onTamperingDetected?: (reason: string) => void;
     onSecurityFailed?: (error: string) => void;
     onAttackBlocked?: (attack: BlockedAttack) => void;
 }
@@ -24,11 +22,22 @@ export interface SpektreState {
     protection?: ProtectionState;
     monitoring?: MonitoringState;
 }
+export interface VeilContextType {
+    isVerified: boolean;
+    isLoading: boolean;
+    error: string | null;
+    sessionId: string | null;
+    protection?: ProtectionState;
+    monitoring?: MonitoringState;
+}
 export interface ProtectionState {
     enabled: boolean;
     blockedRequests: BlockedRequest[];
     totalBlocked: number;
 }
+export type VeilConfig = SpektreConfig;
+export type VeilState = SpektreState;
+export type VeilProps = SecurityGateProps;
 export interface MonitoringState {
     secretExposures: number;
     scriptProfiles: number;
@@ -39,15 +48,14 @@ export interface BlockedRequest {
     url: string;
     reason: string;
     timestamp: number;
-    severity: 'low' | 'medium' | 'high' | 'critical';
+    severity?: 'low' | 'medium' | 'high' | 'critical';
 }
 export interface BlockedAttack {
-    url: string;
-    reason: string;
-    timestamp: number;
-    severity: 'low' | 'medium' | 'high' | 'critical';
     type: string;
+    severity: string;
     details: string;
+    timestamp: number;
+    url?: string;
 }
 export interface TamperingDetails {
     type: string;
@@ -56,19 +64,8 @@ export interface TamperingDetails {
 }
 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;
+    children: React.ReactNode;
+    config?: SpektreConfig;
+    fallback?: React.ReactNode;
+    loadingComponent?: React.ReactNode;
 }

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@spektre/veil",
-  "version": "0.1.0",
+  "version": "0.1.2",
+  "type": "module",
   "description": "Security and monitoring wrapper for React apps built with AI tools",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/dist/components/VeilProvider.d.ts

@@ -1,9 +0,0 @@
-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/useVeil.d.ts

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