@nebulr-group/bridge-svelte 0.9.2-beta.0 → 0.9.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 (9) hide show
  1. package/dist/client/components/sdk-auth/BridgeAuthRoutes.svelte +9 -6
  2. package/dist/client/components/subscription/BridgeBillingNotice.svelte +124 -121
  3. package/dist/client/components/subscription/BridgeBillingRoutes.svelte +56 -53
  4. package/dist/client/components/subscription/BridgePaywall.svelte +32 -29
  5. package/dist/client/components/subscription/BridgePaywallPage.svelte +15 -12
  6. package/dist/client/components/subscription/BridgeQuotaBanner.svelte +73 -70
  7. package/dist/client/components/subscription/BridgeSubscriptionStatus.svelte +55 -52
  8. package/dist/styles.css +1438 -1393
  9. package/package.json +1 -1
package/dist/client/components/sdk-auth/BridgeAuthRoutes.svelte CHANGED
@@ -192,11 +192,14 @@
192
192
  {/if}
193
193
 
194
194
  <style>
195
- /* The default frame — the centred container every guide page used to paste.
196
- A `frame` snippet replaces it entirely. */
197
- .bridge-auth-page {
198
- display: flex;
199
- justify-content: center;
200
- padding: var(--bridge-auth-page-padding, 3rem 1rem);
195
+ /* TBP-814 — in the `bridge` layer with the stylesheet, so any CSS of the app wins. */
196
+ @layer bridge {
197
+ /* The default frame — the centred container every guide page used to paste.
198
+ A `frame` snippet replaces it entirely. */
199
+ .bridge-auth-page {
200
+ display: flex;
201
+ justify-content: center;
202
+ padding: var(--bridge-auth-page-padding, 3rem 1rem);
203
+ }
201
204
  }
202
205
  </style>
package/dist/client/components/subscription/BridgeBillingNotice.svelte CHANGED
@@ -240,146 +240,149 @@
240
240
  {/if}
241
241
 
242
242
  <style>
243
- .bridge-billing-notice {
244
- display: flex;
245
- align-items: center;
246
- justify-content: space-between;
247
- gap: 1rem;
248
- padding: 0.75rem 1rem;
249
- border-radius: 0.5rem;
250
- font: inherit;
251
- transition: opacity 280ms ease, transform 320ms ease;
252
- }
243
+ /* TBP-814 — in the `bridge` layer with the stylesheet, so any CSS of the app wins. */
244
+ @layer bridge {
245
+ .bridge-billing-notice {
246
+ display: flex;
247
+ align-items: center;
248
+ justify-content: space-between;
249
+ gap: 1rem;
250
+ padding: 0.75rem 1rem;
251
+ border-radius: 0.5rem;
252
+ font: inherit;
253
+ transition: opacity 280ms ease, transform 320ms ease;
254
+ }
253
255
 
254
- .bbn-content {
255
- display: flex;
256
- flex-direction: column;
257
- gap: 0.125rem;
258
- flex: 1 1 auto;
259
- }
256
+ .bbn-content {
257
+ display: flex;
258
+ flex-direction: column;
259
+ gap: 0.125rem;
260
+ flex: 1 1 auto;
261
+ }
260
262
 
261
- .bbn-title {
262
- font-weight: 600;
263
- }
263
+ .bbn-title {
264
+ font-weight: var(--bridge-font-weight-heading, 600);
265
+ }
264
266
 
265
- .bbn-body {
266
- font-size: 0.875rem;
267
- opacity: 0.85;
268
- }
267
+ .bbn-body {
268
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
269
+ opacity: 0.85;
270
+ }
269
271
 
270
- .bbn-cta {
271
- padding: 0.5rem 1rem;
272
- border-radius: 0.375rem;
273
- border: 1px solid currentColor;
274
- background: transparent;
275
- color: inherit;
276
- font: inherit;
277
- font-weight: 500;
278
- cursor: pointer;
279
- flex: 0 0 auto;
280
- }
272
+ .bbn-cta {
273
+ padding: 0.5rem 1rem;
274
+ border-radius: 0.375rem;
275
+ border: 1px solid currentColor;
276
+ background: transparent;
277
+ color: inherit;
278
+ font: inherit;
279
+ font-weight: var(--bridge-font-weight-button, 500);
280
+ cursor: pointer;
281
+ flex: 0 0 auto;
282
+ }
281
283
 
282
- .bbn-cta:hover {
283
- background: currentColor;
284
- color: var(--bridge-bg, #ffffff);
285
- }
284
+ .bbn-cta:hover {
285
+ background: currentColor;
286
+ color: var(--bridge-bg, #ffffff);
287
+ }
286
288
 
287
- /* Chassis variants */
288
- .bbn-chassis-bar {
289
- border-radius: 0;
290
- width: 100%;
291
- }
289
+ /* Chassis variants */
290
+ .bbn-chassis-bar {
291
+ border-radius: 0;
292
+ width: 100%;
293
+ }
292
294
 
293
- .bbn-chassis-rail {
294
- border-left: 4px solid currentColor;
295
- border-radius: 0 0.5rem 0.5rem 0;
296
- }
295
+ .bbn-chassis-rail {
296
+ border-left: 4px solid currentColor;
297
+ border-radius: 0 0.5rem 0.5rem 0;
298
+ }
297
299
 
298
- .bbn-chassis-card {
299
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
300
- border: 1px solid var(--bridge-border, #d1d5db);
301
- }
300
+ .bbn-chassis-card {
301
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
302
+ border: 1px solid var(--bridge-border, #d1d5db);
303
+ }
302
304
 
303
- /* Severity tokens */
304
- .bbn-severity-info {
305
- background: var(--bridge-alert-info-bg, #eff6ff);
306
- color: var(--bridge-alert-info-fg, #1e40af);
307
- }
305
+ /* Severity tokens */
306
+ .bbn-severity-info {
307
+ background: var(--bridge-alert-info-bg, #eff6ff);
308
+ color: var(--bridge-alert-info-fg, #1e40af);
309
+ }
308
310
 
309
- .bbn-severity-warn {
310
- background: var(--bridge-alert-warning-bg, #fffbeb);
311
- color: var(--bridge-alert-warning-fg, #92400e);
312
- }
311
+ .bbn-severity-warn {
312
+ background: var(--bridge-alert-warning-bg, #fffbeb);
313
+ color: var(--bridge-alert-warning-fg, #92400e);
314
+ }
313
315
 
314
- .bbn-severity-critical {
315
- background: var(--bridge-alert-error-bg, #fef2f2);
316
- color: var(--bridge-alert-error-fg, #991b1b);
317
- }
316
+ .bbn-severity-critical {
317
+ background: var(--bridge-alert-error-bg, #fef2f2);
318
+ color: var(--bridge-alert-error-fg, #991b1b);
319
+ }
318
320
 
319
- /* Locked inverts the surface: foreground as background, and vice versa. */
320
- .bbn-severity-locked {
321
- background: var(--bridge-foreground, #111827);
322
- color: var(--bridge-bg, #ffffff);
323
- }
321
+ /* Locked inverts the surface: foreground as background, and vice versa. */
322
+ .bbn-severity-locked {
323
+ background: var(--bridge-foreground, #111827);
324
+ color: var(--bridge-bg, #ffffff);
325
+ }
324
326
 
325
- @media (prefers-reduced-motion: reduce) {
326
- .bridge-billing-notice {
327
- transition: none;
327
+ @media (prefers-reduced-motion: reduce) {
328
+ .bridge-billing-notice {
329
+ transition: none;
330
+ }
328
331
  }
329
- }
330
332
 
331
- /* Hard-mode lockscreen — full-viewport blocking overlay */
332
- .bridge-billing-lockscreen {
333
- position: fixed;
334
- inset: 0;
335
- z-index: 9999;
336
- display: flex;
337
- align-items: center;
338
- justify-content: center;
339
- padding: 1rem;
340
- background: var(--bridge-paywall-bg, rgba(15, 23, 42, 0.72));
341
- backdrop-filter: blur(2px);
342
- }
333
+ /* Hard-mode lockscreen — full-viewport blocking overlay */
334
+ .bridge-billing-lockscreen {
335
+ position: fixed;
336
+ inset: 0;
337
+ z-index: 9999;
338
+ display: flex;
339
+ align-items: center;
340
+ justify-content: center;
341
+ padding: 1rem;
342
+ background: var(--bridge-paywall-bg, rgba(15, 23, 42, 0.72));
343
+ backdrop-filter: blur(2px);
344
+ }
343
345
 
344
- .bbl-panel {
345
- display: flex;
346
- flex-direction: column;
347
- gap: 0.75rem;
348
- max-width: 28rem;
349
- width: 100%;
350
- padding: 1.5rem;
351
- border-radius: 0.75rem;
352
- background: var(--bridge-foreground, #111827);
353
- color: var(--bridge-bg, #ffffff);
354
- box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
355
- text-align: center;
356
- }
346
+ .bbl-panel {
347
+ display: flex;
348
+ flex-direction: column;
349
+ gap: 0.75rem;
350
+ max-width: 28rem;
351
+ width: 100%;
352
+ padding: 1.5rem;
353
+ border-radius: 0.75rem;
354
+ background: var(--bridge-foreground, #111827);
355
+ color: var(--bridge-bg, #ffffff);
356
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
357
+ text-align: center;
358
+ }
357
359
 
358
- .bbl-title {
359
- font-size: 1.125rem;
360
- font-weight: 600;
361
- }
360
+ .bbl-title {
361
+ font-size: calc(1.125 * var(--bridge-text-base, 1rem));
362
+ font-weight: var(--bridge-font-weight-heading, 600);
363
+ }
362
364
 
363
- .bbl-body {
364
- font-size: 0.9375rem;
365
- opacity: 0.85;
366
- }
365
+ .bbl-body {
366
+ font-size: calc(0.9375 * var(--bridge-text-base, 1rem));
367
+ opacity: 0.85;
368
+ }
367
369
 
368
- .bbl-cta {
369
- align-self: center;
370
- margin-top: 0.5rem;
371
- padding: 0.625rem 1.25rem;
372
- border-radius: 0.5rem;
373
- border: 1px solid currentColor;
374
- background: transparent;
375
- color: inherit;
376
- font: inherit;
377
- font-weight: 500;
378
- cursor: pointer;
379
- }
370
+ .bbl-cta {
371
+ align-self: center;
372
+ margin-top: 0.5rem;
373
+ padding: 0.625rem 1.25rem;
374
+ border-radius: 0.5rem;
375
+ border: 1px solid currentColor;
376
+ background: transparent;
377
+ color: inherit;
378
+ font: inherit;
379
+ font-weight: var(--bridge-font-weight-button, 500);
380
+ cursor: pointer;
381
+ }
380
382
 
381
- .bbl-cta:hover {
382
- background: var(--bridge-bg, #ffffff);
383
- color: var(--bridge-foreground, #111827);
383
+ .bbl-cta:hover {
384
+ background: var(--bridge-bg, #ffffff);
385
+ color: var(--bridge-foreground, #111827);
386
+ }
384
387
  }
385
388
  </style>
package/dist/client/components/subscription/BridgeBillingRoutes.svelte CHANGED
@@ -172,66 +172,69 @@
172
172
  {/if}
173
173
 
174
174
  <style>
175
- /* The default frame. A `frame` snippet replaces it entirely. */
176
- .bridge-billing-page {
177
- display: flex;
178
- flex-direction: column;
179
- gap: 1.25rem;
180
- max-width: var(--bridge-billing-page-width, 60rem);
181
- margin: 0 auto;
182
- padding: var(--bridge-billing-page-padding, 3rem 1rem);
183
- }
175
+ /* TBP-814 — in the `bridge` layer with the stylesheet, so any CSS of the app wins. */
176
+ @layer bridge {
177
+ /* The default frame. A `frame` snippet replaces it entirely. */
178
+ .bridge-billing-page {
179
+ display: flex;
180
+ flex-direction: column;
181
+ gap: 1.25rem;
182
+ max-width: var(--bridge-billing-page-width, 60rem);
183
+ margin: 0 auto;
184
+ padding: var(--bridge-billing-page-padding, 3rem 1rem);
185
+ }
184
186
 
185
- .bridge-billing-heading {
186
- margin: 0;
187
- font-size: 1.5rem;
188
- font-weight: 700;
189
- }
187
+ .bridge-billing-heading {
188
+ margin: 0;
189
+ font-size: calc(1.5 * var(--bridge-text-base, 1rem));
190
+ font-weight: var(--bridge-font-weight-heading, 700);
191
+ }
190
192
 
191
- .bridge-billing-text {
192
- margin: 0;
193
- opacity: 0.8;
194
- }
193
+ .bridge-billing-text {
194
+ margin: 0;
195
+ opacity: 0.8;
196
+ }
195
197
 
196
- /* The subtitle sits with its heading, closer than the page's gap. */
197
- .bridge-billing-heading + .bridge-billing-text {
198
- margin-top: -0.75rem;
199
- }
198
+ /* The subtitle sits with its heading, closer than the page's gap. */
199
+ .bridge-billing-heading + .bridge-billing-text {
200
+ margin-top: -0.75rem;
201
+ }
200
202
 
201
- .bridge-billing-current {
202
- display: flex;
203
- flex-wrap: wrap;
204
- align-items: center;
205
- gap: 0.75rem;
206
- }
203
+ .bridge-billing-current {
204
+ display: flex;
205
+ flex-wrap: wrap;
206
+ align-items: center;
207
+ gap: 0.75rem;
208
+ }
207
209
 
208
- /* The current-plan panel's layout; its surface is in styles.css. */
209
- .bridge-billing-summary {
210
- display: flex;
211
- flex-wrap: wrap;
212
- align-items: center;
213
- justify-content: space-between;
214
- gap: 1rem;
215
- }
210
+ /* The current-plan panel's layout; its surface is in styles.css. */
211
+ .bridge-billing-summary {
212
+ display: flex;
213
+ flex-wrap: wrap;
214
+ align-items: center;
215
+ justify-content: space-between;
216
+ gap: 1rem;
217
+ }
216
218
 
217
- .bridge-billing-summary-plan {
218
- display: flex;
219
- flex-direction: column;
220
- align-items: flex-start;
221
- gap: 0.25rem;
222
- min-width: 0;
223
- }
219
+ .bridge-billing-summary-plan {
220
+ display: flex;
221
+ flex-direction: column;
222
+ align-items: flex-start;
223
+ gap: 0.25rem;
224
+ min-width: 0;
225
+ }
224
226
 
225
- .bridge-billing-label {
226
- font-size: 0.75rem;
227
- font-weight: 600;
228
- text-transform: uppercase;
229
- letter-spacing: 0.05em;
230
- opacity: 0.7;
231
- }
227
+ .bridge-billing-label {
228
+ font-size: calc(0.75 * var(--bridge-text-base, 1rem));
229
+ font-weight: var(--bridge-font-weight-label, 600);
230
+ text-transform: uppercase;
231
+ letter-spacing: 0.05em;
232
+ opacity: 0.7;
233
+ }
232
234
 
233
- .bridge-billing-action {
234
- align-self: flex-start;
235
- text-decoration: none;
235
+ .bridge-billing-action {
236
+ align-self: flex-start;
237
+ text-decoration: none;
238
+ }
236
239
  }
237
240
  </style>
package/dist/client/components/subscription/BridgePaywall.svelte CHANGED
@@ -58,36 +58,39 @@
58
58
  {/if}
59
59
 
60
60
  <style>
61
- .bridge-paywall {
62
- position: fixed;
63
- inset: 0;
64
- z-index: 9000;
65
- display: flex;
66
- align-items: center;
67
- justify-content: center;
68
- padding: 1rem;
69
- background: var(--bridge-paywall-bg, rgba(15, 23, 42, 0.72));
70
- backdrop-filter: blur(2px);
71
- }
61
+ /* TBP-814 — in the `bridge` layer with the stylesheet, so any CSS of the app wins. */
62
+ @layer bridge {
63
+ .bridge-paywall {
64
+ position: fixed;
65
+ inset: 0;
66
+ z-index: 9000;
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ padding: 1rem;
71
+ background: var(--bridge-paywall-bg, rgba(15, 23, 42, 0.72));
72
+ backdrop-filter: blur(2px);
73
+ }
72
74
 
73
- .bridge-paywall-panel {
74
- display: flex;
75
- flex-direction: column;
76
- gap: 1.5rem;
77
- width: 100%;
78
- max-width: 42rem;
79
- max-height: 90vh;
80
- overflow-y: auto;
81
- padding: 2rem;
82
- border-radius: 0.75rem;
83
- background: var(--bridge-paywall-panel-bg, var(--bridge-bg, #ffffff));
84
- box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
85
- }
75
+ .bridge-paywall-panel {
76
+ display: flex;
77
+ flex-direction: column;
78
+ gap: 1.5rem;
79
+ width: 100%;
80
+ max-width: 42rem;
81
+ max-height: 90vh;
82
+ overflow-y: auto;
83
+ padding: 2rem;
84
+ border-radius: 0.75rem;
85
+ background: var(--bridge-paywall-panel-bg, var(--bridge-bg, #ffffff));
86
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
87
+ }
86
88
 
87
- .bridge-paywall-heading {
88
- margin: 0;
89
- font-size: 1.25rem;
90
- font-weight: 600;
91
- text-align: center;
89
+ .bridge-paywall-heading {
90
+ margin: 0;
91
+ font-size: calc(1.25 * var(--bridge-text-base, 1rem));
92
+ font-weight: var(--bridge-font-weight-heading, 600);
93
+ text-align: center;
94
+ }
92
95
  }
93
96
  </style>
package/dist/client/components/subscription/BridgePaywallPage.svelte CHANGED
@@ -76,18 +76,21 @@
76
76
  </div>
77
77
 
78
78
  <style>
79
- .bridge-paywall-page {
80
- display: flex;
81
- flex-direction: column;
82
- gap: 1.25rem;
83
- max-width: var(--bridge-billing-page-width, 60rem);
84
- margin: 0 auto;
85
- padding: var(--bridge-billing-page-padding, 3rem 1rem);
86
- }
79
+ /* TBP-814 — in the `bridge` layer with the stylesheet, so any CSS of the app wins. */
80
+ @layer bridge {
81
+ .bridge-paywall-page {
82
+ display: flex;
83
+ flex-direction: column;
84
+ gap: 1.25rem;
85
+ max-width: var(--bridge-billing-page-width, 60rem);
86
+ margin: 0 auto;
87
+ padding: var(--bridge-billing-page-padding, 3rem 1rem);
88
+ }
87
89
 
88
- .bridge-paywall-page-heading {
89
- margin: 0;
90
- font-size: 1.5rem;
91
- font-weight: 700;
90
+ .bridge-paywall-page-heading {
91
+ margin: 0;
92
+ font-size: calc(1.5 * var(--bridge-text-base, 1rem));
93
+ font-weight: var(--bridge-font-weight-heading, 700);
94
+ }
92
95
  }
93
96
  </style>