@spektre/veil 0.1.1 → 0.1.3

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 +62 -34
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +62 -34
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -118,10 +118,10 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
118
118
  return React.createElement(React.Fragment, null, loadingComponent);
119
119
  }
120
120
  return (React.createElement("div", { style: styles.container },
121
+ React.createElement("div", { style: styles.backgroundGlow },
122
+ React.createElement("div", { style: styles.orangeGlowLeft }),
123
+ React.createElement("div", { style: styles.orangeGlowRight })),
121
124
  React.createElement("div", { style: styles.content },
122
- React.createElement("div", { style: styles.icon },
123
- React.createElement("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
124
- React.createElement("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }))),
125
125
  React.createElement("h2", { style: styles.title }, "Initializing Security"),
126
126
  React.createElement("p", { style: styles.message }, "Please wait while we verify your application..."),
127
127
  React.createElement("div", { style: styles.spinner }))));
@@ -130,13 +130,13 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
130
130
  if (fallback) {
131
131
  return React.createElement(React.Fragment, null, fallback);
132
132
  }
133
- return (React.createElement("div", { style: styles.errorContainer },
133
+ return (React.createElement("div", { style: styles.container },
134
+ React.createElement("div", { style: styles.backgroundGlow },
135
+ React.createElement("div", { style: styles.orangeGlowLeft }),
136
+ React.createElement("div", { style: styles.orangeGlowRight })),
134
137
  React.createElement("div", { style: styles.content },
135
- React.createElement("div", { style: { ...styles.icon, color: '#ef4444' } },
136
- React.createElement("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
137
- React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
138
- React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
139
- React.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" }))),
138
+ React.createElement("div", { style: styles.logoContainer },
139
+ React.createElement("img", { src: "/image.png", alt: "Spektre", style: styles.logo })),
140
140
  React.createElement("h2", { style: styles.errorTitle }, "Security Protection Required"),
141
141
  React.createElement("p", { style: styles.errorMessage }, "This application requires Spektre security protection to run safely."),
142
142
  React.createElement("p", { style: styles.errorDetails }, state.error || 'Unable to verify application security'),
@@ -275,84 +275,112 @@ const styles = {
275
275
  alignItems: 'center',
276
276
  justifyContent: 'center',
277
277
  minHeight: '100vh',
278
- background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
278
+ background: '#000000',
279
279
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
280
+ position: 'relative',
281
+ overflow: 'hidden',
280
282
  },
281
- errorContainer: {
282
- display: 'flex',
283
- alignItems: 'center',
284
- justifyContent: 'center',
285
- minHeight: '100vh',
286
- background: 'linear-gradient(135deg, #1f2937 0%, #111827 100%)',
287
- fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
283
+ backgroundGlow: {
284
+ position: 'absolute',
285
+ inset: 0,
286
+ pointerEvents: 'none',
287
+ },
288
+ orangeGlowLeft: {
289
+ position: 'absolute',
290
+ top: 0,
291
+ right: 0,
292
+ width: '384px',
293
+ height: '100%',
294
+ background: 'linear-gradient(to left, rgba(249, 115, 22, 0.4), rgba(239, 68, 68, 0.4), transparent)',
295
+ filter: 'blur(96px)',
296
+ transform: 'translateX(30%)',
297
+ },
298
+ orangeGlowRight: {
299
+ position: 'absolute',
300
+ top: '50%',
301
+ right: 0,
302
+ width: '384px',
303
+ height: '384px',
304
+ background: 'linear-gradient(to left, rgba(249, 115, 22, 0.3), transparent)',
305
+ filter: 'blur(96px)',
306
+ transform: 'translateY(-50%)',
288
307
  },
289
308
  content: {
290
309
  textAlign: 'center',
291
310
  padding: '2rem',
292
311
  maxWidth: '500px',
293
- background: 'rgba(255, 255, 255, 0.95)',
312
+ background: 'rgba(0, 0, 0, 0.5)',
313
+ border: '1px solid rgba(71, 85, 105, 0.5)',
294
314
  borderRadius: '16px',
295
- boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
315
+ boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
316
+ backdropFilter: 'blur(16px)',
317
+ position: 'relative',
318
+ zIndex: 10,
296
319
  },
297
- icon: {
298
- color: '#667eea',
299
- marginBottom: '1.5rem',
320
+ logoContainer: {
321
+ marginBottom: '2rem',
300
322
  display: 'flex',
301
323
  justifyContent: 'center',
302
324
  },
325
+ logo: {
326
+ width: '56px',
327
+ height: '56px',
328
+ objectFit: 'contain',
329
+ },
303
330
  title: {
304
331
  fontSize: '1.75rem',
305
332
  fontWeight: '600',
306
- color: '#111827',
333
+ color: '#ffffff',
307
334
  marginBottom: '0.75rem',
308
335
  },
309
336
  message: {
310
337
  fontSize: '1rem',
311
- color: '#6b7280',
338
+ color: '#cbd5e1',
312
339
  marginBottom: '1.5rem',
313
340
  lineHeight: '1.6',
314
341
  },
315
342
  errorTitle: {
316
343
  fontSize: '1.75rem',
317
344
  fontWeight: '600',
318
- color: '#111827',
345
+ color: '#ffffff',
319
346
  marginBottom: '0.75rem',
320
347
  },
321
348
  errorMessage: {
322
349
  fontSize: '1rem',
323
- color: '#6b7280',
350
+ color: '#cbd5e1',
324
351
  marginBottom: '1rem',
325
352
  lineHeight: '1.6',
326
353
  },
327
354
  errorDetails: {
328
355
  fontSize: '0.875rem',
329
- color: '#ef4444',
356
+ color: '#fca5a5',
330
357
  marginBottom: '1.5rem',
331
358
  padding: '0.75rem',
332
- background: '#fef2f2',
359
+ background: 'rgba(239, 68, 68, 0.1)',
360
+ border: '1px solid rgba(239, 68, 68, 0.3)',
333
361
  borderRadius: '8px',
334
362
  fontFamily: 'monospace',
335
363
  },
336
364
  spinner: {
337
365
  width: '40px',
338
366
  height: '40px',
339
- border: '4px solid rgba(255, 255, 255, 0.3)',
340
- borderTopColor: '#667eea',
367
+ border: '4px solid rgba(71, 85, 105, 0.3)',
368
+ borderTopColor: '#f97316',
341
369
  borderRadius: '50%',
342
370
  margin: '0 auto',
343
371
  animation: 'spin 1s linear infinite',
344
372
  },
345
373
  button: {
346
- backgroundColor: '#667eea',
374
+ backgroundColor: 'rgba(249, 115, 22, 0.6)',
347
375
  color: 'white',
348
- border: 'none',
349
- borderRadius: '8px',
376
+ border: '1px solid rgba(249, 115, 22, 0.6)',
377
+ borderRadius: '9999px',
350
378
  padding: '0.875rem 2rem',
351
379
  fontSize: '1rem',
352
380
  fontWeight: '600',
353
381
  cursor: 'pointer',
354
382
  transition: 'all 0.2s',
355
- boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)',
383
+ boxShadow: '0 4px 12px rgba(249, 115, 22, 0.3)',
356
384
  },
357
385
  };
358
386
  const styleSheet = document.createElement('style');
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
@@ -120,10 +120,10 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
120
120
  return React.createElement(React.Fragment, null, loadingComponent);
121
121
  }
122
122
  return (React.createElement("div", { style: styles.container },
123
+ React.createElement("div", { style: styles.backgroundGlow },
124
+ React.createElement("div", { style: styles.orangeGlowLeft }),
125
+ React.createElement("div", { style: styles.orangeGlowRight })),
123
126
  React.createElement("div", { style: styles.content },
124
- React.createElement("div", { style: styles.icon },
125
- React.createElement("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
126
- React.createElement("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }))),
127
127
  React.createElement("h2", { style: styles.title }, "Initializing Security"),
128
128
  React.createElement("p", { style: styles.message }, "Please wait while we verify your application..."),
129
129
  React.createElement("div", { style: styles.spinner }))));
@@ -132,13 +132,13 @@ const SecurityGate = ({ apiKey, children, config, fallback, loadingComponent, })
132
132
  if (fallback) {
133
133
  return React.createElement(React.Fragment, null, fallback);
134
134
  }
135
- return (React.createElement("div", { style: styles.errorContainer },
135
+ return (React.createElement("div", { style: styles.container },
136
+ React.createElement("div", { style: styles.backgroundGlow },
137
+ React.createElement("div", { style: styles.orangeGlowLeft }),
138
+ React.createElement("div", { style: styles.orangeGlowRight })),
136
139
  React.createElement("div", { style: styles.content },
137
- React.createElement("div", { style: { ...styles.icon, color: '#ef4444' } },
138
- React.createElement("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
139
- React.createElement("circle", { cx: "12", cy: "12", r: "10" }),
140
- React.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
141
- React.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" }))),
140
+ React.createElement("div", { style: styles.logoContainer },
141
+ React.createElement("img", { src: "/image.png", alt: "Spektre", style: styles.logo })),
142
142
  React.createElement("h2", { style: styles.errorTitle }, "Security Protection Required"),
143
143
  React.createElement("p", { style: styles.errorMessage }, "This application requires Spektre security protection to run safely."),
144
144
  React.createElement("p", { style: styles.errorDetails }, state.error || 'Unable to verify application security'),
@@ -277,84 +277,112 @@ const styles = {
277
277
  alignItems: 'center',
278
278
  justifyContent: 'center',
279
279
  minHeight: '100vh',
280
- background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
280
+ background: '#000000',
281
281
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
282
+ position: 'relative',
283
+ overflow: 'hidden',
282
284
  },
283
- errorContainer: {
284
- display: 'flex',
285
- alignItems: 'center',
286
- justifyContent: 'center',
287
- minHeight: '100vh',
288
- background: 'linear-gradient(135deg, #1f2937 0%, #111827 100%)',
289
- fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
285
+ backgroundGlow: {
286
+ position: 'absolute',
287
+ inset: 0,
288
+ pointerEvents: 'none',
289
+ },
290
+ orangeGlowLeft: {
291
+ position: 'absolute',
292
+ top: 0,
293
+ right: 0,
294
+ width: '384px',
295
+ height: '100%',
296
+ background: 'linear-gradient(to left, rgba(249, 115, 22, 0.4), rgba(239, 68, 68, 0.4), transparent)',
297
+ filter: 'blur(96px)',
298
+ transform: 'translateX(30%)',
299
+ },
300
+ orangeGlowRight: {
301
+ position: 'absolute',
302
+ top: '50%',
303
+ right: 0,
304
+ width: '384px',
305
+ height: '384px',
306
+ background: 'linear-gradient(to left, rgba(249, 115, 22, 0.3), transparent)',
307
+ filter: 'blur(96px)',
308
+ transform: 'translateY(-50%)',
290
309
  },
291
310
  content: {
292
311
  textAlign: 'center',
293
312
  padding: '2rem',
294
313
  maxWidth: '500px',
295
- background: 'rgba(255, 255, 255, 0.95)',
314
+ background: 'rgba(0, 0, 0, 0.5)',
315
+ border: '1px solid rgba(71, 85, 105, 0.5)',
296
316
  borderRadius: '16px',
297
- boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
317
+ boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5)',
318
+ backdropFilter: 'blur(16px)',
319
+ position: 'relative',
320
+ zIndex: 10,
298
321
  },
299
- icon: {
300
- color: '#667eea',
301
- marginBottom: '1.5rem',
322
+ logoContainer: {
323
+ marginBottom: '2rem',
302
324
  display: 'flex',
303
325
  justifyContent: 'center',
304
326
  },
327
+ logo: {
328
+ width: '56px',
329
+ height: '56px',
330
+ objectFit: 'contain',
331
+ },
305
332
  title: {
306
333
  fontSize: '1.75rem',
307
334
  fontWeight: '600',
308
- color: '#111827',
335
+ color: '#ffffff',
309
336
  marginBottom: '0.75rem',
310
337
  },
311
338
  message: {
312
339
  fontSize: '1rem',
313
- color: '#6b7280',
340
+ color: '#cbd5e1',
314
341
  marginBottom: '1.5rem',
315
342
  lineHeight: '1.6',
316
343
  },
317
344
  errorTitle: {
318
345
  fontSize: '1.75rem',
319
346
  fontWeight: '600',
320
- color: '#111827',
347
+ color: '#ffffff',
321
348
  marginBottom: '0.75rem',
322
349
  },
323
350
  errorMessage: {
324
351
  fontSize: '1rem',
325
- color: '#6b7280',
352
+ color: '#cbd5e1',
326
353
  marginBottom: '1rem',
327
354
  lineHeight: '1.6',
328
355
  },
329
356
  errorDetails: {
330
357
  fontSize: '0.875rem',
331
- color: '#ef4444',
358
+ color: '#fca5a5',
332
359
  marginBottom: '1.5rem',
333
360
  padding: '0.75rem',
334
- background: '#fef2f2',
361
+ background: 'rgba(239, 68, 68, 0.1)',
362
+ border: '1px solid rgba(239, 68, 68, 0.3)',
335
363
  borderRadius: '8px',
336
364
  fontFamily: 'monospace',
337
365
  },
338
366
  spinner: {
339
367
  width: '40px',
340
368
  height: '40px',
341
- border: '4px solid rgba(255, 255, 255, 0.3)',
342
- borderTopColor: '#667eea',
369
+ border: '4px solid rgba(71, 85, 105, 0.3)',
370
+ borderTopColor: '#f97316',
343
371
  borderRadius: '50%',
344
372
  margin: '0 auto',
345
373
  animation: 'spin 1s linear infinite',
346
374
  },
347
375
  button: {
348
- backgroundColor: '#667eea',
376
+ backgroundColor: 'rgba(249, 115, 22, 0.6)',
349
377
  color: 'white',
350
- border: 'none',
351
- borderRadius: '8px',
378
+ border: '1px solid rgba(249, 115, 22, 0.6)',
379
+ borderRadius: '9999px',
352
380
  padding: '0.875rem 2rem',
353
381
  fontSize: '1rem',
354
382
  fontWeight: '600',
355
383
  cursor: 'pointer',
356
384
  transition: 'all 0.2s',
357
- boxShadow: '0 4px 12px rgba(102, 126, 234, 0.4)',
385
+ boxShadow: '0 4px 12px rgba(249, 115, 22, 0.3)',
358
386
  },
359
387
  };
360
388
  const styleSheet = document.createElement('style');
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.1",
3
+ "version": "0.1.3",
4
4
  "type": "module",
5
5
  "description": "Security and monitoring wrapper for React apps built with AI tools",
6
6
  "main": "dist/index.js",