stellar-drive 1.2.31 → 1.2.33

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 (4) hide show
  1. package/dist/bin/install-pwa.js +1 -1
  2. package/package.json +1 -1
  3. package/src/components/DemoBanner.svelte +51 -13
  4. package/src/components/OfflineBanner.svelte +25 -30
package/dist/bin/install-pwa.js CHANGED
@@ -206,7 +206,7 @@ function generatePackageJson(opts) {
206
206
  },
207
207
  dependencies: {
208
208
  postgres: '^3.4.0',
209
- 'stellar-drive': '^1.2.31'
209
+ 'stellar-drive': '^1.2.33'
210
210
  },
211
211
  type: 'module'
212
212
  }, null, 2) + '\n');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stellar-drive",
3
- "version": "1.2.31",
3
+ "version": "1.2.33",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/src/components/DemoBanner.svelte CHANGED
@@ -106,24 +106,62 @@
106
106
  background: rgba(255, 255, 255, 0.28);
107
107
  }
108
108
 
109
- /* ── Mobile: full-width bar anchored to bottom ── */
109
+ /* ── Mobile: pill anchored above tab bar, matching desktop black glass ── */
110
110
  @media (max-width: 767px) {
111
111
  .demo-banner {
112
- left: 0;
113
- right: 0;
114
- bottom: calc(var(--demo-banner-bottom, 0px) + env(safe-area-inset-bottom, 0px));
112
+ left: 1rem;
113
+ right: 1rem;
114
+ bottom: calc(var(--demo-banner-bottom, 0px) + env(safe-area-inset-bottom, 0px) + 0.5rem);
115
115
  transform: none;
116
- border-radius: 0;
117
- border-left: none;
118
- border-right: none;
119
- border-bottom: none;
120
- border-top: 1px solid rgba(255, 255, 255, 0.12);
121
- padding: 0.45rem 1rem;
122
- font-size: 0.78rem;
123
- gap: 0.6rem;
116
+ border-radius: 12px;
117
+ background: rgba(0, 0, 0, 0.6);
118
+ backdrop-filter: blur(12px);
119
+ -webkit-backdrop-filter: blur(12px);
120
+ border: 1px solid rgba(255, 255, 255, 0.15);
121
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
122
+ padding: 0.5rem 0.85rem;
123
+ font-size: 0.75rem;
124
+ gap: 0.5rem;
124
125
  max-width: none;
125
126
  white-space: normal;
126
- animation: demo-banner-rise 0.3s cubic-bezier(0.16, 1, 0.3, 1);
127
+ flex-wrap: nowrap;
128
+ animation: demo-banner-rise 0.35s cubic-bezier(0.16, 1, 0.3, 1);
129
+ }
130
+
131
+ .demo-banner-text {
132
+ color: rgba(255, 255, 255, 0.95);
133
+ font-size: 0.75rem;
134
+ font-weight: 500;
135
+ flex: 1;
136
+ min-width: 0;
137
+ }
138
+
139
+ .demo-banner-subtitle {
140
+ color: rgba(255, 255, 255, 0.55);
141
+ font-size: 0.7rem;
142
+ }
143
+
144
+ .demo-banner-link {
145
+ color: rgba(255, 255, 255, 0.65);
146
+ background: rgba(255, 255, 255, 0.08);
147
+ border-radius: 6px;
148
+ padding: 0.2rem 0.5rem;
149
+ font-size: 0.68rem;
150
+ font-weight: 600;
151
+ letter-spacing: 0.03em;
152
+ text-transform: uppercase;
153
+ border: 1px solid rgba(255, 255, 255, 0.12);
154
+ flex-shrink: 0;
155
+ white-space: nowrap;
156
+ }
157
+
158
+ .demo-banner-close {
159
+ background: rgba(255, 255, 255, 0.1);
160
+ color: rgba(255, 255, 255, 0.65);
161
+ border: 1px solid rgba(255, 255, 255, 0.12);
162
+ flex-shrink: 0;
163
+ width: 1.35rem;
164
+ height: 1.35rem;
127
165
  }
128
166
  }
129
167
 
package/src/components/OfflineBanner.svelte CHANGED
@@ -1,19 +1,17 @@
1
1
  <!--
2
2
  @fileoverview OfflineBanner — fixed-position notification bar for offline state.
3
3
 
4
- Renders a persistent amber glass banner just below the top navigation when the
5
- app has no network connectivity. Auto-dismisses reactively when connectivity
6
- is restored — no explicit dismiss needed.
4
+ Renders a persistent dark glass banner when the app has no network connectivity.
5
+ Auto-dismisses reactively when connectivity is restored — no explicit dismiss needed.
7
6
 
8
7
  - Desktop: pill-shaped, centered, positioned below the 64px top nav
9
8
  (accounts for safe-area-inset-top on notch/island devices).
10
- - Mobile: full-width bar flush below the island-header, which ends at
11
- calc(env(safe-area-inset-top, 47px) + 24px) from the viewport top.
9
+ - Mobile: pill-shaped, left/right 1rem inset, positioned below the island-header
10
+ (env(safe-area-inset-top) + 24px + 0.5rem breathing room).
12
11
  - Only renders when `$isOnline` is `false`.
13
12
  - No dismiss button — auto-hides on reconnect.
14
- - Glass morphism styling with amber tint to distinguish from DemoBanner.
13
+ - Black glass morphism matching DemoBanner style.
15
14
  - z-index 9000 — matches DemoBanner tier.
16
- - Never overlaps top nav on desktop or island-header on mobile.
17
15
  -->
18
16
  <script lang="ts">
19
17
  import { isOnline } from 'stellar-drive/stores';
@@ -49,52 +47,49 @@
49
47
  gap: 0.6rem;
50
48
  padding: 0.5rem 1.1rem;
51
49
  border-radius: 9999px;
52
- background: rgba(180, 120, 0, 0.15);
50
+ background: rgba(0, 0, 0, 0.6);
53
51
  backdrop-filter: blur(12px);
54
52
  -webkit-backdrop-filter: blur(12px);
55
- border: 1px solid rgba(255, 200, 80, 0.2);
56
- color: #ffd97a;
53
+ border: 1px solid rgba(255, 255, 255, 0.15);
54
+ color: #fff;
57
55
  font-size: 0.8125rem;
58
56
  font-weight: 500;
59
57
  letter-spacing: 0.01em;
60
58
  white-space: nowrap;
61
59
  max-width: calc(100vw - 2rem);
62
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
60
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
63
61
  pointer-events: none;
64
62
  animation: offline-banner-slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1);
65
63
  }
66
64
 
67
65
  .offline-banner-icon {
68
66
  flex-shrink: 0;
69
- opacity: 0.9;
67
+ opacity: 0.75;
70
68
  }
71
69
 
72
70
  .offline-banner-text {
73
- opacity: 0.95;
71
+ opacity: 0.9;
74
72
  }
75
73
 
76
- /* ── Mobile: full-width bar flush below island-header ──
77
- island-header bottom edge = safe-area-inset-top + 24px from viewport top.
78
- Formula: -safe-area-inset-top (header top offset) + safe-area-inset-top*2 + 24px (header height)
79
- = safe-area-inset-top + 24px.
80
- Using env(safe-area-inset-top, 47px) matches the fallback the header itself uses
81
- so the banner stays flush on devices that don't support env(). */
74
+ /* ── Mobile: pill below island-header, matching desktop black glass ──
75
+ island-header bottom = env(safe-area-inset-top) + 24px from viewport top.
76
+ +0.5rem breathing room so the pill clears the header gradient fade. */
82
77
  @media (max-width: 767px) {
83
78
  .offline-banner {
84
- top: calc(env(safe-area-inset-top, 47px) + 24px);
85
- left: 0;
86
- right: 0;
79
+ top: calc(env(safe-area-inset-top, 47px) + 24px + 0.5rem);
80
+ left: 1rem;
81
+ right: 1rem;
87
82
  transform: none;
88
- border-radius: 0;
89
- border-left: none;
90
- border-right: none;
91
- border-top: none;
92
- border-bottom: 1px solid rgba(255, 200, 80, 0.18);
93
- padding: 0.45rem 1rem;
83
+ border-radius: 12px;
84
+ background: rgba(0, 0, 0, 0.6);
85
+ backdrop-filter: blur(12px);
86
+ -webkit-backdrop-filter: blur(12px);
87
+ border: 1px solid rgba(255, 255, 255, 0.15);
88
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
89
+ padding: 0.45rem 0.85rem;
94
90
  font-size: 0.78rem;
95
91
  gap: 0.5rem;
96
92
  max-width: none;
97
- white-space: normal;
98
93
  animation: offline-banner-drop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
99
94
  }
100
95
  }
@@ -113,7 +108,7 @@
113
108
  @keyframes offline-banner-drop {
114
109
  from {
115
110
  opacity: 0;
116
- transform: translateY(-100%);
111
+ transform: translateY(-0.75rem);
117
112
  }
118
113
  to {
119
114
  opacity: 1;