@spektre/veil 0.1.1 → 0.1.2

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