@spektre/veil 0.1.10 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.esm.js +55 -23
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +55 -23
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -94,6 +94,8 @@ function injectDevUIStyles() {
94
94
  max-width: 400px;
95
95
  overflow: hidden;
96
96
  animation: spektre-slide-up 0.3s ease;
97
+ display: flex;
98
+ flex-direction: column;
97
99
  }
98
100
 
99
101
  @keyframes spektre-slide-up {
@@ -113,7 +115,6 @@ function injectDevUIStyles() {
113
115
  justify-content: space-between;
114
116
  align-items: center;
115
117
  padding: 20px;
116
- border-bottom: 1px solid #1e293b;
117
118
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
118
119
  }
119
120
 
@@ -152,6 +153,7 @@ function injectDevUIStyles() {
152
153
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
153
154
  max-height: 60vh;
154
155
  overflow-y: auto;
156
+ flex: 1;
155
157
  }
156
158
 
157
159
  .spektre-dev-modal-info {
@@ -304,6 +306,26 @@ function injectDevUIStyles() {
304
306
  font-weight: 500;
305
307
  }
306
308
 
309
+ /* Modal Footer */
310
+ .spektre-dev-modal-footer {
311
+ display: flex;
312
+ justify-content: space-between;
313
+ align-items: center;
314
+ padding: 16px 24px;
315
+ background-color: #000000;
316
+ }
317
+
318
+ .spektre-dev-modal-version {
319
+ font-size: 12px;
320
+ color: #64748b;
321
+ }
322
+
323
+ .spektre-dev-modal-footer-controls {
324
+ display: flex;
325
+ align-items: center;
326
+ gap: 12px;
327
+ }
328
+
307
329
  /* Accessibility */
308
330
  @media (prefers-reduced-motion: reduce) {
309
331
  .spektre-dev-dot,
@@ -344,6 +366,12 @@ function injectDevUIStyles() {
344
366
  .spektre-dev-modal-body {
345
367
  padding: 16px;
346
368
  }
369
+
370
+ .spektre-dev-modal-footer {
371
+ flex-direction: column;
372
+ gap: 12px;
373
+ padding: 12px 16px;
374
+ }
347
375
  }
348
376
  `;
349
377
  document.head.appendChild(styleSheet);
@@ -423,18 +451,20 @@ function initializeDevUI(version) {
423
451
  }
424
452
  // Create and inject the orange dot
425
453
  createDevDot();
426
- // Run security scan after a short delay to ensure DOM is ready
427
- setTimeout(() => {
428
- const scanResult = runSecurityScan();
429
- if (scanResult.hasIssues) {
430
- // Update dot to warning state and auto-open modal
431
- const dot = document.getElementById('spektre-dev-dot');
432
- if (dot) {
433
- dot.classList.add('warning');
454
+ // Only run security scan if Spektre is enabled
455
+ if (spektreEnabled) {
456
+ setTimeout(() => {
457
+ const scanResult = runSecurityScan();
458
+ if (scanResult.hasIssues) {
459
+ // Update dot to warning state and auto-open modal
460
+ const dot = document.getElementById('spektre-dev-dot');
461
+ if (dot) {
462
+ dot.classList.add('warning');
463
+ }
464
+ openDevModal(scanResult);
434
465
  }
435
- openDevModal(scanResult);
436
- }
437
- }, 500);
466
+ }, 500);
467
+ }
438
468
  }
439
469
  function createDevDot() {
440
470
  const dot = document.createElement('div');
@@ -540,18 +570,20 @@ function openDevModal(scanResult) {
540
570
  }
541
571
  body.appendChild(scanContainer);
542
572
  }
543
- // Add version label at bottom
544
- const versionLabel = document.createElement('div');
545
- versionLabel.style.marginTop = '16px';
546
- versionLabel.style.paddingTop = '12px';
547
- versionLabel.style.borderTop = '1px solid rgba(71, 85, 105, 0.3)';
548
- versionLabel.style.fontSize = '12px';
549
- versionLabel.style.color = '#64748b';
550
- versionLabel.style.textAlign = 'center';
551
- versionLabel.textContent = `Spektre v${DEV_UI_VERSION}`;
552
- body.appendChild(versionLabel);
553
573
  modalContent.appendChild(header);
554
574
  modalContent.appendChild(body);
575
+ // Create footer with version on left and toggle on right
576
+ const footer = document.createElement('div');
577
+ footer.className = 'spektre-dev-modal-footer';
578
+ const versionLabel = document.createElement('div');
579
+ versionLabel.className = 'spektre-dev-modal-version';
580
+ versionLabel.textContent = `Spektre v${DEV_UI_VERSION}`;
581
+ const footerControls = document.createElement('div');
582
+ footerControls.className = 'spektre-dev-modal-footer-controls';
583
+ footerControls.appendChild(toggleLabel);
584
+ footer.appendChild(versionLabel);
585
+ footer.appendChild(footerControls);
586
+ modalContent.appendChild(footer);
555
587
  modal.appendChild(modalContent);
556
588
  // Close on overlay click
557
589
  modal.addEventListener('click', (e) => {
@@ -1009,7 +1041,7 @@ const useProtectedFetch = () => {
1009
1041
  };
1010
1042
 
1011
1043
  // Manually set version - update this with each release
1012
- const packageVersion = '0.1.10';
1044
+ const packageVersion = '0.1.11';
1013
1045
  // Check if we're in an iframe (development environment) and initialize dev UI
1014
1046
  if (typeof window !== 'undefined' && window.self !== window.top) {
1015
1047
  initializeDevUI(packageVersion);
package/dist/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.js CHANGED
@@ -96,6 +96,8 @@ function injectDevUIStyles() {
96
96
  max-width: 400px;
97
97
  overflow: hidden;
98
98
  animation: spektre-slide-up 0.3s ease;
99
+ display: flex;
100
+ flex-direction: column;
99
101
  }
100
102
 
101
103
  @keyframes spektre-slide-up {
@@ -115,7 +117,6 @@ function injectDevUIStyles() {
115
117
  justify-content: space-between;
116
118
  align-items: center;
117
119
  padding: 20px;
118
- border-bottom: 1px solid #1e293b;
119
120
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
120
121
  }
121
122
 
@@ -154,6 +155,7 @@ function injectDevUIStyles() {
154
155
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
155
156
  max-height: 60vh;
156
157
  overflow-y: auto;
158
+ flex: 1;
157
159
  }
158
160
 
159
161
  .spektre-dev-modal-info {
@@ -306,6 +308,26 @@ function injectDevUIStyles() {
306
308
  font-weight: 500;
307
309
  }
308
310
 
311
+ /* Modal Footer */
312
+ .spektre-dev-modal-footer {
313
+ display: flex;
314
+ justify-content: space-between;
315
+ align-items: center;
316
+ padding: 16px 24px;
317
+ background-color: #000000;
318
+ }
319
+
320
+ .spektre-dev-modal-version {
321
+ font-size: 12px;
322
+ color: #64748b;
323
+ }
324
+
325
+ .spektre-dev-modal-footer-controls {
326
+ display: flex;
327
+ align-items: center;
328
+ gap: 12px;
329
+ }
330
+
309
331
  /* Accessibility */
310
332
  @media (prefers-reduced-motion: reduce) {
311
333
  .spektre-dev-dot,
@@ -346,6 +368,12 @@ function injectDevUIStyles() {
346
368
  .spektre-dev-modal-body {
347
369
  padding: 16px;
348
370
  }
371
+
372
+ .spektre-dev-modal-footer {
373
+ flex-direction: column;
374
+ gap: 12px;
375
+ padding: 12px 16px;
376
+ }
349
377
  }
350
378
  `;
351
379
  document.head.appendChild(styleSheet);
@@ -425,18 +453,20 @@ function initializeDevUI(version) {
425
453
  }
426
454
  // Create and inject the orange dot
427
455
  createDevDot();
428
- // Run security scan after a short delay to ensure DOM is ready
429
- setTimeout(() => {
430
- const scanResult = runSecurityScan();
431
- if (scanResult.hasIssues) {
432
- // Update dot to warning state and auto-open modal
433
- const dot = document.getElementById('spektre-dev-dot');
434
- if (dot) {
435
- dot.classList.add('warning');
456
+ // Only run security scan if Spektre is enabled
457
+ if (spektreEnabled) {
458
+ setTimeout(() => {
459
+ const scanResult = runSecurityScan();
460
+ if (scanResult.hasIssues) {
461
+ // Update dot to warning state and auto-open modal
462
+ const dot = document.getElementById('spektre-dev-dot');
463
+ if (dot) {
464
+ dot.classList.add('warning');
465
+ }
466
+ openDevModal(scanResult);
436
467
  }
437
- openDevModal(scanResult);
438
- }
439
- }, 500);
468
+ }, 500);
469
+ }
440
470
  }
441
471
  function createDevDot() {
442
472
  const dot = document.createElement('div');
@@ -542,18 +572,20 @@ function openDevModal(scanResult) {
542
572
  }
543
573
  body.appendChild(scanContainer);
544
574
  }
545
- // Add version label at bottom
546
- const versionLabel = document.createElement('div');
547
- versionLabel.style.marginTop = '16px';
548
- versionLabel.style.paddingTop = '12px';
549
- versionLabel.style.borderTop = '1px solid rgba(71, 85, 105, 0.3)';
550
- versionLabel.style.fontSize = '12px';
551
- versionLabel.style.color = '#64748b';
552
- versionLabel.style.textAlign = 'center';
553
- versionLabel.textContent = `Spektre v${DEV_UI_VERSION}`;
554
- body.appendChild(versionLabel);
555
575
  modalContent.appendChild(header);
556
576
  modalContent.appendChild(body);
577
+ // Create footer with version on left and toggle on right
578
+ const footer = document.createElement('div');
579
+ footer.className = 'spektre-dev-modal-footer';
580
+ const versionLabel = document.createElement('div');
581
+ versionLabel.className = 'spektre-dev-modal-version';
582
+ versionLabel.textContent = `Spektre v${DEV_UI_VERSION}`;
583
+ const footerControls = document.createElement('div');
584
+ footerControls.className = 'spektre-dev-modal-footer-controls';
585
+ footerControls.appendChild(toggleLabel);
586
+ footer.appendChild(versionLabel);
587
+ footer.appendChild(footerControls);
588
+ modalContent.appendChild(footer);
557
589
  modal.appendChild(modalContent);
558
590
  // Close on overlay click
559
591
  modal.addEventListener('click', (e) => {
@@ -1011,7 +1043,7 @@ const useProtectedFetch = () => {
1011
1043
  };
1012
1044
 
1013
1045
  // Manually set version - update this with each release
1014
- const packageVersion = '0.1.10';
1046
+ const packageVersion = '0.1.11';
1015
1047
  // Check if we're in an iframe (development environment) and initialize dev UI
1016
1048
  if (typeof window !== 'undefined' && window.self !== window.top) {
1017
1049
  initializeDevUI(packageVersion);
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spektre/veil",
3
- "version": "0.1.10",
3
+ "version": "0.1.11",
4
4
  "type": "module",
5
5
  "description": "Security and monitoring wrapper for React apps built with AI tools",
6
6
  "main": "dist/index.js",