@spektre/veil 0.1.6 → 0.1.7

package/dist/SecurityGate.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
 import type { SecurityGateProps } from './types';
 export declare const SecurityGate: React.FC<SecurityGateProps>;
+declare global {
+    interface Window {
+        __spektreDevDisabled?: boolean;
+    }
+}

package/dist/devUI.d.ts

@@ -0,0 +1,7 @@
+export declare function initializeDevUI(): void;
+export declare function isSpektreDisabled(): boolean;
+declare global {
+    interface Window {
+        __spektreDevDisabled?: boolean;
+    }
+}

package/dist/index.esm.js

@@ -1,5 +1,397 @@
 import React, { createContext, useState, useEffect, useContext } from 'react';
 
+const DEV_UI_STORAGE_KEY = 'spektre_dev_enabled';
+// Inject styles directly into the document
+function injectDevUIStyles() {
+    if (document.getElementById('spektre-dev-ui-styles')) {
+        return; // Already injected
+    }
+    const styleSheet = document.createElement('style');
+    styleSheet.id = 'spektre-dev-ui-styles';
+    styleSheet.textContent = `
+    /* Spektre Dev UI Dot */
+    .spektre-dev-dot {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      width: 16px;
+      height: 16px;
+      background-color: #f97316;
+      border-radius: 50%;
+      cursor: pointer;
+      z-index: 9998;
+      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
+      transition: all 0.2s ease;
+      outline: none;
+      border: none;
+    }
+
+    .spektre-dev-dot:hover {
+      width: 20px;
+      height: 20px;
+      bottom: 22px;
+      right: 22px;
+      box-shadow: 0 6px 16px rgba(249, 115, 22, 0.6);
+      transform: scale(1.1);
+    }
+
+    .spektre-dev-dot.disabled {
+      background-color: #64748b;
+      box-shadow: 0 4px 12px rgba(100, 116, 139, 0.4);
+    }
+
+    .spektre-dev-dot.disabled:hover {
+      box-shadow: 0 6px 16px rgba(100, 116, 139, 0.6);
+    }
+
+    /* Modal Overlay */
+    .spektre-dev-modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.7);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+      animation: spektre-fade-in 0.2s ease;
+    }
+
+    @keyframes spektre-fade-in {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    /* Modal Container */
+    .spektre-dev-modal {
+      background-color: #000000;
+      border: 1px solid #1e293b;
+      border-radius: 12px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
+      width: 90%;
+      max-width: 400px;
+      overflow: hidden;
+      animation: spektre-slide-up 0.3s ease;
+    }
+
+    @keyframes spektre-slide-up {
+      from {
+        transform: translateY(20px);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+
+    /* Modal Header */
+    .spektre-dev-modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px;
+      border-bottom: 1px solid #1e293b;
+      background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
+    }
+
+    .spektre-dev-modal-header h2 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: #ffffff;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    .spektre-dev-modal-close {
+      background: none;
+      border: none;
+      color: #94a3b8;
+      font-size: 24px;
+      cursor: pointer;
+      padding: 0;
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: color 0.2s ease;
+      border-radius: 4px;
+    }
+
+    .spektre-dev-modal-close:hover {
+      color: #f97316;
+      background-color: rgba(249, 115, 22, 0.1);
+    }
+
+    /* Modal Body */
+    .spektre-dev-modal-body {
+      padding: 24px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    .spektre-dev-modal-info {
+      margin: 0 0 16px 0;
+      font-size: 14px;
+      color: #cbd5e1;
+      line-height: 1.5;
+    }
+
+    /* Status Badge */
+    .spektre-dev-modal-status {
+      display: inline-block;
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 20px;
+      font-family: monospace;
+      transition: all 0.2s ease;
+    }
+
+    .spektre-dev-modal-status.enabled {
+      background-color: rgba(34, 197, 94, 0.15);
+      color: #86efac;
+      border: 1px solid rgba(34, 197, 94, 0.3);
+    }
+
+    .spektre-dev-modal-status.disabled {
+      background-color: rgba(100, 116, 139, 0.15);
+      color: #cbd5e1;
+      border: 1px solid rgba(100, 116, 139, 0.3);
+    }
+
+    /* Toggle Container */
+    .spektre-dev-modal-toggle-container {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+
+    .spektre-dev-toggle-label {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      cursor: pointer;
+      font-size: 14px;
+      color: #e2e8f0;
+      user-select: none;
+    }
+
+    /* Toggle Switch */
+    .spektre-dev-toggle {
+      appearance: none;
+      -webkit-appearance: none;
+      width: 44px;
+      height: 24px;
+      background-color: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 12px;
+      cursor: pointer;
+      position: relative;
+      transition: all 0.3s ease;
+      padding: 2px;
+      flex-shrink: 0;
+    }
+
+    .spektre-dev-toggle:checked {
+      background-color: #f97316;
+      border-color: #f97316;
+    }
+
+    .spektre-dev-toggle::before {
+      content: '';
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      background-color: white;
+      border-radius: 10px;
+      top: 3px;
+      left: 3px;
+      transition: left 0.3s ease;
+    }
+
+    .spektre-dev-toggle:checked::before {
+      left: 23px;
+    }
+
+    .spektre-dev-toggle:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
+    }
+
+    /* Reload Message */
+    .spektre-dev-modal-reload-msg {
+      margin: 0;
+      padding: 12px;
+      background-color: rgba(249, 115, 22, 0.15);
+      border: 1px solid rgba(249, 115, 22, 0.3);
+      border-radius: 6px;
+      font-size: 13px;
+      color: #fed7aa;
+      text-align: center;
+      transition: opacity 0.2s ease;
+      font-weight: 500;
+    }
+
+    /* Accessibility */
+    @media (prefers-reduced-motion: reduce) {
+      .spektre-dev-dot,
+      .spektre-dev-modal-overlay,
+      .spektre-dev-modal,
+      .spektre-dev-toggle,
+      .spektre-dev-toggle::before {
+        animation: none;
+        transition: none;
+      }
+    }
+
+    /* Mobile responsiveness */
+    @media (max-width: 480px) {
+      .spektre-dev-dot {
+        bottom: 16px;
+        right: 16px;
+        width: 14px;
+        height: 14px;
+      }
+
+      .spektre-dev-dot:hover {
+        width: 18px;
+        height: 18px;
+        bottom: 14px;
+        right: 14px;
+      }
+
+      .spektre-dev-modal {
+        width: 85%;
+        max-width: 320px;
+      }
+
+      .spektre-dev-modal-header h2 {
+        font-size: 16px;
+      }
+
+      .spektre-dev-modal-body {
+        padding: 16px;
+      }
+    }
+  `;
+    document.head.appendChild(styleSheet);
+}
+function initializeDevUI() {
+    // Inject styles first
+    injectDevUIStyles();
+    // Check if Spektre is enabled in localStorage (default to true)
+    const isEnabled = localStorage.getItem(DEV_UI_STORAGE_KEY);
+    const spektreEnabled = isEnabled === null ? true : isEnabled === 'true';
+    // If disabled, prevent core Spektre from initializing
+    if (!spektreEnabled) {
+        window.__spektreDevDisabled = true;
+    }
+    // Create and inject the orange dot
+    createDevDot();
+}
+function createDevDot() {
+    const dot = document.createElement('div');
+    dot.id = 'spektre-dev-dot';
+    dot.className = 'spektre-dev-dot';
+    dot.setAttribute('aria-label', 'Spektre development environment controls');
+    dot.addEventListener('click', () => {
+        openDevModal();
+    });
+    document.body.appendChild(dot);
+}
+function openDevModal() {
+    // Check if modal already exists
+    if (document.getElementById('spektre-dev-modal')) {
+        return;
+    }
+    const isEnabled = localStorage.getItem(DEV_UI_STORAGE_KEY) !== 'false';
+    const modal = document.createElement('div');
+    modal.id = 'spektre-dev-modal';
+    modal.className = 'spektre-dev-modal-overlay';
+    const modalContent = document.createElement('div');
+    modalContent.className = 'spektre-dev-modal';
+    const header = document.createElement('div');
+    header.className = 'spektre-dev-modal-header';
+    header.innerHTML = '<h2>Spektre Development Mode</h2>';
+    const closeButton = document.createElement('button');
+    closeButton.className = 'spektre-dev-modal-close';
+    closeButton.innerHTML = '✕';
+    closeButton.setAttribute('aria-label', 'Close modal');
+    closeButton.addEventListener('click', () => {
+        modal.remove();
+    });
+    header.appendChild(closeButton);
+    const body = document.createElement('div');
+    body.className = 'spektre-dev-modal-body';
+    const infoText = document.createElement('p');
+    infoText.className = 'spektre-dev-modal-info';
+    infoText.textContent = 'You are in a development environment. Spektre is currently:';
+    const statusBadge = document.createElement('div');
+    statusBadge.className = `spektre-dev-modal-status ${isEnabled ? 'enabled' : 'disabled'}`;
+    statusBadge.textContent = isEnabled ? '● Enabled' : '● Disabled';
+    const toggleContainer = document.createElement('div');
+    toggleContainer.className = 'spektre-dev-modal-toggle-container';
+    const toggleLabel = document.createElement('label');
+    toggleLabel.className = 'spektre-dev-toggle-label';
+    const toggleSwitch = document.createElement('input');
+    toggleSwitch.type = 'checkbox';
+    toggleSwitch.className = 'spektre-dev-toggle';
+    toggleSwitch.checked = isEnabled;
+    toggleSwitch.setAttribute('aria-label', 'Toggle Spektre');
+    toggleSwitch.addEventListener('change', (e) => {
+        const enabled = e.target.checked;
+        localStorage.setItem(DEV_UI_STORAGE_KEY, String(enabled));
+        // Update status badge
+        statusBadge.className = `spektre-dev-modal-status ${enabled ? 'enabled' : 'disabled'}`;
+        statusBadge.textContent = enabled ? '● Enabled' : '● Disabled';
+        // Update dot visual
+        const dot = document.getElementById('spektre-dev-dot');
+        if (dot) {
+            dot.classList.toggle('disabled', !enabled);
+        }
+        // Show reload message
+        const reloadMsg = document.querySelector('.spektre-dev-modal-reload-msg');
+        if (reloadMsg) {
+            reloadMsg.textContent = 'Reload the page for changes to take effect';
+            reloadMsg.style.opacity = '1';
+        }
+    });
+    toggleLabel.appendChild(toggleSwitch);
+    toggleLabel.appendChild(document.createTextNode('Enable Spektre'));
+    toggleContainer.appendChild(toggleLabel);
+    const reloadMessage = document.createElement('p');
+    reloadMessage.className = 'spektre-dev-modal-reload-msg';
+    reloadMessage.style.opacity = '0';
+    body.appendChild(infoText);
+    body.appendChild(statusBadge);
+    body.appendChild(toggleContainer);
+    body.appendChild(reloadMessage);
+    modalContent.appendChild(header);
+    modalContent.appendChild(body);
+    modal.appendChild(modalContent);
+    // Close on overlay click
+    modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+            modal.remove();
+        }
+    });
+    // Close on escape key
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && document.getElementById('spektre-dev-modal')) {
+            modal.remove();
+        }
+    }, { once: true });
+    document.body.appendChild(modal);
+}
+
 const SpektreContext = createContext(null);
 SpektreContext.displayName = 'SpektreContext';
 
@@ -16,6 +408,16 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
         sessionId: null,
     });
     useEffect(() => {
+        // Check if Spektre is disabled in dev mode
+        if (window.__spektreDevDisabled) {
+            setState({
+                isVerified: true,
+                isLoading: false,
+                error: null,
+                sessionId: 'dev-disabled',
+            });
+            return;
+        }
         // Set tampering detection marker
         sessionStorage.setItem('spektre_js_enabled', 'true');
         sessionStorage.setItem('spektre_init_time', Date.now().toString());
@@ -430,5 +832,10 @@ const useProtectedFetch = () => {
     return protectedFetch;
 };
 
+// Check if we're in an iframe (development environment) and initialize dev UI
+if (typeof window !== 'undefined' && window.self !== window.top) {
+    initializeDevUI();
+}
+
 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,6 +2,398 @@
 
 var React = require('react');
 
+const DEV_UI_STORAGE_KEY = 'spektre_dev_enabled';
+// Inject styles directly into the document
+function injectDevUIStyles() {
+    if (document.getElementById('spektre-dev-ui-styles')) {
+        return; // Already injected
+    }
+    const styleSheet = document.createElement('style');
+    styleSheet.id = 'spektre-dev-ui-styles';
+    styleSheet.textContent = `
+    /* Spektre Dev UI Dot */
+    .spektre-dev-dot {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      width: 16px;
+      height: 16px;
+      background-color: #f97316;
+      border-radius: 50%;
+      cursor: pointer;
+      z-index: 9998;
+      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
+      transition: all 0.2s ease;
+      outline: none;
+      border: none;
+    }
+
+    .spektre-dev-dot:hover {
+      width: 20px;
+      height: 20px;
+      bottom: 22px;
+      right: 22px;
+      box-shadow: 0 6px 16px rgba(249, 115, 22, 0.6);
+      transform: scale(1.1);
+    }
+
+    .spektre-dev-dot.disabled {
+      background-color: #64748b;
+      box-shadow: 0 4px 12px rgba(100, 116, 139, 0.4);
+    }
+
+    .spektre-dev-dot.disabled:hover {
+      box-shadow: 0 6px 16px rgba(100, 116, 139, 0.6);
+    }
+
+    /* Modal Overlay */
+    .spektre-dev-modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.7);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+      animation: spektre-fade-in 0.2s ease;
+    }
+
+    @keyframes spektre-fade-in {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    /* Modal Container */
+    .spektre-dev-modal {
+      background-color: #000000;
+      border: 1px solid #1e293b;
+      border-radius: 12px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
+      width: 90%;
+      max-width: 400px;
+      overflow: hidden;
+      animation: spektre-slide-up 0.3s ease;
+    }
+
+    @keyframes spektre-slide-up {
+      from {
+        transform: translateY(20px);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+
+    /* Modal Header */
+    .spektre-dev-modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px;
+      border-bottom: 1px solid #1e293b;
+      background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
+    }
+
+    .spektre-dev-modal-header h2 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: #ffffff;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    .spektre-dev-modal-close {
+      background: none;
+      border: none;
+      color: #94a3b8;
+      font-size: 24px;
+      cursor: pointer;
+      padding: 0;
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: color 0.2s ease;
+      border-radius: 4px;
+    }
+
+    .spektre-dev-modal-close:hover {
+      color: #f97316;
+      background-color: rgba(249, 115, 22, 0.1);
+    }
+
+    /* Modal Body */
+    .spektre-dev-modal-body {
+      padding: 24px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    .spektre-dev-modal-info {
+      margin: 0 0 16px 0;
+      font-size: 14px;
+      color: #cbd5e1;
+      line-height: 1.5;
+    }
+
+    /* Status Badge */
+    .spektre-dev-modal-status {
+      display: inline-block;
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 20px;
+      font-family: monospace;
+      transition: all 0.2s ease;
+    }
+
+    .spektre-dev-modal-status.enabled {
+      background-color: rgba(34, 197, 94, 0.15);
+      color: #86efac;
+      border: 1px solid rgba(34, 197, 94, 0.3);
+    }
+
+    .spektre-dev-modal-status.disabled {
+      background-color: rgba(100, 116, 139, 0.15);
+      color: #cbd5e1;
+      border: 1px solid rgba(100, 116, 139, 0.3);
+    }
+
+    /* Toggle Container */
+    .spektre-dev-modal-toggle-container {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+
+    .spektre-dev-toggle-label {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      cursor: pointer;
+      font-size: 14px;
+      color: #e2e8f0;
+      user-select: none;
+    }
+
+    /* Toggle Switch */
+    .spektre-dev-toggle {
+      appearance: none;
+      -webkit-appearance: none;
+      width: 44px;
+      height: 24px;
+      background-color: #1e293b;
+      border: 1px solid #334155;
+      border-radius: 12px;
+      cursor: pointer;
+      position: relative;
+      transition: all 0.3s ease;
+      padding: 2px;
+      flex-shrink: 0;
+    }
+
+    .spektre-dev-toggle:checked {
+      background-color: #f97316;
+      border-color: #f97316;
+    }
+
+    .spektre-dev-toggle::before {
+      content: '';
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      background-color: white;
+      border-radius: 10px;
+      top: 3px;
+      left: 3px;
+      transition: left 0.3s ease;
+    }
+
+    .spektre-dev-toggle:checked::before {
+      left: 23px;
+    }
+
+    .spektre-dev-toggle:focus {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
+    }
+
+    /* Reload Message */
+    .spektre-dev-modal-reload-msg {
+      margin: 0;
+      padding: 12px;
+      background-color: rgba(249, 115, 22, 0.15);
+      border: 1px solid rgba(249, 115, 22, 0.3);
+      border-radius: 6px;
+      font-size: 13px;
+      color: #fed7aa;
+      text-align: center;
+      transition: opacity 0.2s ease;
+      font-weight: 500;
+    }
+
+    /* Accessibility */
+    @media (prefers-reduced-motion: reduce) {
+      .spektre-dev-dot,
+      .spektre-dev-modal-overlay,
+      .spektre-dev-modal,
+      .spektre-dev-toggle,
+      .spektre-dev-toggle::before {
+        animation: none;
+        transition: none;
+      }
+    }
+
+    /* Mobile responsiveness */
+    @media (max-width: 480px) {
+      .spektre-dev-dot {
+        bottom: 16px;
+        right: 16px;
+        width: 14px;
+        height: 14px;
+      }
+
+      .spektre-dev-dot:hover {
+        width: 18px;
+        height: 18px;
+        bottom: 14px;
+        right: 14px;
+      }
+
+      .spektre-dev-modal {
+        width: 85%;
+        max-width: 320px;
+      }
+
+      .spektre-dev-modal-header h2 {
+        font-size: 16px;
+      }
+
+      .spektre-dev-modal-body {
+        padding: 16px;
+      }
+    }
+  `;
+    document.head.appendChild(styleSheet);
+}
+function initializeDevUI() {
+    // Inject styles first
+    injectDevUIStyles();
+    // Check if Spektre is enabled in localStorage (default to true)
+    const isEnabled = localStorage.getItem(DEV_UI_STORAGE_KEY);
+    const spektreEnabled = isEnabled === null ? true : isEnabled === 'true';
+    // If disabled, prevent core Spektre from initializing
+    if (!spektreEnabled) {
+        window.__spektreDevDisabled = true;
+    }
+    // Create and inject the orange dot
+    createDevDot();
+}
+function createDevDot() {
+    const dot = document.createElement('div');
+    dot.id = 'spektre-dev-dot';
+    dot.className = 'spektre-dev-dot';
+    dot.setAttribute('aria-label', 'Spektre development environment controls');
+    dot.addEventListener('click', () => {
+        openDevModal();
+    });
+    document.body.appendChild(dot);
+}
+function openDevModal() {
+    // Check if modal already exists
+    if (document.getElementById('spektre-dev-modal')) {
+        return;
+    }
+    const isEnabled = localStorage.getItem(DEV_UI_STORAGE_KEY) !== 'false';
+    const modal = document.createElement('div');
+    modal.id = 'spektre-dev-modal';
+    modal.className = 'spektre-dev-modal-overlay';
+    const modalContent = document.createElement('div');
+    modalContent.className = 'spektre-dev-modal';
+    const header = document.createElement('div');
+    header.className = 'spektre-dev-modal-header';
+    header.innerHTML = '<h2>Spektre Development Mode</h2>';
+    const closeButton = document.createElement('button');
+    closeButton.className = 'spektre-dev-modal-close';
+    closeButton.innerHTML = '✕';
+    closeButton.setAttribute('aria-label', 'Close modal');
+    closeButton.addEventListener('click', () => {
+        modal.remove();
+    });
+    header.appendChild(closeButton);
+    const body = document.createElement('div');
+    body.className = 'spektre-dev-modal-body';
+    const infoText = document.createElement('p');
+    infoText.className = 'spektre-dev-modal-info';
+    infoText.textContent = 'You are in a development environment. Spektre is currently:';
+    const statusBadge = document.createElement('div');
+    statusBadge.className = `spektre-dev-modal-status ${isEnabled ? 'enabled' : 'disabled'}`;
+    statusBadge.textContent = isEnabled ? '● Enabled' : '● Disabled';
+    const toggleContainer = document.createElement('div');
+    toggleContainer.className = 'spektre-dev-modal-toggle-container';
+    const toggleLabel = document.createElement('label');
+    toggleLabel.className = 'spektre-dev-toggle-label';
+    const toggleSwitch = document.createElement('input');
+    toggleSwitch.type = 'checkbox';
+    toggleSwitch.className = 'spektre-dev-toggle';
+    toggleSwitch.checked = isEnabled;
+    toggleSwitch.setAttribute('aria-label', 'Toggle Spektre');
+    toggleSwitch.addEventListener('change', (e) => {
+        const enabled = e.target.checked;
+        localStorage.setItem(DEV_UI_STORAGE_KEY, String(enabled));
+        // Update status badge
+        statusBadge.className = `spektre-dev-modal-status ${enabled ? 'enabled' : 'disabled'}`;
+        statusBadge.textContent = enabled ? '● Enabled' : '● Disabled';
+        // Update dot visual
+        const dot = document.getElementById('spektre-dev-dot');
+        if (dot) {
+            dot.classList.toggle('disabled', !enabled);
+        }
+        // Show reload message
+        const reloadMsg = document.querySelector('.spektre-dev-modal-reload-msg');
+        if (reloadMsg) {
+            reloadMsg.textContent = 'Reload the page for changes to take effect';
+            reloadMsg.style.opacity = '1';
+        }
+    });
+    toggleLabel.appendChild(toggleSwitch);
+    toggleLabel.appendChild(document.createTextNode('Enable Spektre'));
+    toggleContainer.appendChild(toggleLabel);
+    const reloadMessage = document.createElement('p');
+    reloadMessage.className = 'spektre-dev-modal-reload-msg';
+    reloadMessage.style.opacity = '0';
+    body.appendChild(infoText);
+    body.appendChild(statusBadge);
+    body.appendChild(toggleContainer);
+    body.appendChild(reloadMessage);
+    modalContent.appendChild(header);
+    modalContent.appendChild(body);
+    modal.appendChild(modalContent);
+    // Close on overlay click
+    modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+            modal.remove();
+        }
+    });
+    // Close on escape key
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && document.getElementById('spektre-dev-modal')) {
+            modal.remove();
+        }
+    }, { once: true });
+    document.body.appendChild(modal);
+}
+
 const SpektreContext = React.createContext(null);
 SpektreContext.displayName = 'SpektreContext';
 
@@ -18,6 +410,16 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
         sessionId: null,
     });
     React.useEffect(() => {
+        // Check if Spektre is disabled in dev mode
+        if (window.__spektreDevDisabled) {
+            setState({
+                isVerified: true,
+                isLoading: false,
+                error: null,
+                sessionId: 'dev-disabled',
+            });
+            return;
+        }
         // Set tampering detection marker
         sessionStorage.setItem('spektre_js_enabled', 'true');
         sessionStorage.setItem('spektre_init_time', Date.now().toString());
@@ -432,6 +834,11 @@ const useProtectedFetch = () => {
     return protectedFetch;
 };
 
+// Check if we're in an iframe (development environment) and initialize dev UI
+if (typeof window !== 'undefined' && window.self !== window.top) {
+    initializeDevUI();
+}
+
 exports.SecurityGate = SecurityGate;
 exports.SpektreContext = SpektreContext;
 exports.SpektreProvider = SpektreProvider;

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/package.json

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