stellar-drive 1.2.32 → 1.2.33

package/dist/bin/install-pwa.js

@@ -206,7 +206,7 @@ function generatePackageJson(opts) {
         },
         dependencies: {
             postgres: '^3.4.0',
-            'stellar-drive': '^1.2.32'
+            'stellar-drive': '^1.2.33'
         },
         type: 'module'
     }, null, 2) + '\n');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stellar-drive",
-  "version": "1.2.32",
+  "version": "1.2.33",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/DemoBanner.svelte

@@ -106,7 +106,7 @@
     background: rgba(255, 255, 255, 0.28);
   }
 
-  /* ── Mobile: compact cinematic pill anchored above tab bar ── */
+  /* ── Mobile: pill anchored above tab bar, matching desktop black glass ── */
   @media (max-width: 767px) {
     .demo-banner {
       left: 1rem;
@@ -114,30 +114,22 @@
       bottom: calc(var(--demo-banner-bottom, 0px) + env(safe-area-inset-bottom, 0px) + 0.5rem);
       transform: none;
       border-radius: 12px;
-      border: 1px solid rgba(212, 160, 57, 0.25);
+      background: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
       padding: 0.5rem 0.85rem;
       font-size: 0.75rem;
       gap: 0.5rem;
       max-width: none;
       white-space: normal;
       flex-wrap: nowrap;
-      /* Obsidian glass with citrine shimmer */
-      background: linear-gradient(
-        135deg,
-        rgba(14, 12, 8, 0.92) 0%,
-        rgba(22, 18, 10, 0.96) 100%
-      );
-      backdrop-filter: blur(24px) saturate(1.6);
-      -webkit-backdrop-filter: blur(24px) saturate(1.6);
-      box-shadow:
-        0 8px 32px rgba(0, 0, 0, 0.5),
-        0 0 0 0.5px rgba(212, 160, 57, 0.15),
-        inset 0 1px 0 rgba(212, 160, 57, 0.1);
       animation: demo-banner-rise 0.35s cubic-bezier(0.16, 1, 0.3, 1);
     }
 
     .demo-banner-text {
-      color: rgba(240, 225, 190, 0.9);
+      color: rgba(255, 255, 255, 0.95);
       font-size: 0.75rem;
       font-weight: 500;
       flex: 1;
@@ -145,28 +137,28 @@
     }
 
     .demo-banner-subtitle {
-      color: rgba(160, 130, 80, 0.75);
+      color: rgba(255, 255, 255, 0.55);
       font-size: 0.7rem;
     }
 
     .demo-banner-link {
-      color: rgba(212, 160, 57, 0.9);
-      background: rgba(212, 160, 57, 0.1);
+      color: rgba(255, 255, 255, 0.65);
+      background: rgba(255, 255, 255, 0.08);
       border-radius: 6px;
       padding: 0.2rem 0.5rem;
       font-size: 0.68rem;
       font-weight: 600;
       letter-spacing: 0.03em;
       text-transform: uppercase;
-      border: 1px solid rgba(212, 160, 57, 0.2);
+      border: 1px solid rgba(255, 255, 255, 0.12);
       flex-shrink: 0;
       white-space: nowrap;
     }
 
     .demo-banner-close {
-      background: rgba(255, 255, 255, 0.06);
-      color: rgba(212, 160, 57, 0.65);
-      border: 1px solid rgba(212, 160, 57, 0.12);
+      background: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.65);
+      border: 1px solid rgba(255, 255, 255, 0.12);
       flex-shrink: 0;
       width: 1.35rem;
       height: 1.35rem;

package/src/components/OfflineBanner.svelte

@@ -1,19 +1,17 @@
 <!--
   @fileoverview OfflineBanner — fixed-position notification bar for offline state.
 
-  Renders a persistent amber glass banner just below the top navigation when the
-  app has no network connectivity. Auto-dismisses reactively when connectivity
-  is restored — no explicit dismiss needed.
+  Renders a persistent dark glass banner when the app has no network connectivity.
+  Auto-dismisses reactively when connectivity is restored — no explicit dismiss needed.
 
   - Desktop: pill-shaped, centered, positioned below the 64px top nav
     (accounts for safe-area-inset-top on notch/island devices).
-  - Mobile: full-width bar flush below the island-header, which ends at
-    calc(env(safe-area-inset-top, 47px) + 24px) from the viewport top.
+  - Mobile: pill-shaped, left/right 1rem inset, positioned below the island-header
+    (env(safe-area-inset-top) + 24px + 0.5rem breathing room).
   - Only renders when `$isOnline` is `false`.
   - No dismiss button — auto-hides on reconnect.
-  - Glass morphism styling with amber tint to distinguish from DemoBanner.
+  - Black glass morphism matching DemoBanner style.
   - z-index 9000 — matches DemoBanner tier.
-  - Never overlaps top nav on desktop or island-header on mobile.
 -->
 <script lang="ts">
   import { isOnline } from 'stellar-drive/stores';
@@ -49,48 +47,46 @@
     gap: 0.6rem;
     padding: 0.5rem 1.1rem;
     border-radius: 9999px;
-    background: rgba(180, 120, 0, 0.15);
+    background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 200, 80, 0.2);
-    color: #ffd97a;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: #fff;
     font-size: 0.8125rem;
     font-weight: 500;
     letter-spacing: 0.01em;
     white-space: nowrap;
     max-width: calc(100vw - 2rem);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
     pointer-events: none;
     animation: offline-banner-slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   }
 
   .offline-banner-icon {
     flex-shrink: 0;
-    opacity: 0.9;
+    opacity: 0.75;
   }
 
   .offline-banner-text {
-    opacity: 0.95;
+    opacity: 0.9;
   }
 
-  /* ── Mobile: full-width bar flush below island-header ──
-     island-header bottom edge = safe-area-inset-top + 24px from viewport top.
-     Formula: -safe-area-inset-top (header top offset) + safe-area-inset-top*2 + 24px (header height)
-     = safe-area-inset-top + 24px.
-     Using env(safe-area-inset-top, 47px) matches the fallback the header itself uses
-     so the banner stays flush on devices that don't support env(). */
+  /* ── Mobile: pill below island-header, matching desktop black glass ──
+     island-header bottom = env(safe-area-inset-top) + 24px from viewport top.
+     +0.5rem breathing room so the pill clears the header gradient fade. */
   @media (max-width: 767px) {
     .offline-banner {
-      top: calc(env(safe-area-inset-top, 47px) + 24px);
-      left: 0;
-      right: 0;
+      top: calc(env(safe-area-inset-top, 47px) + 24px + 0.5rem);
+      left: 1rem;
+      right: 1rem;
       transform: none;
-      border-radius: 0;
-      border-left: none;
-      border-right: none;
-      border-top: none;
-      border-bottom: 1px solid rgba(255, 200, 80, 0.18);
-      padding: 0.45rem 1rem;
+      border-radius: 12px;
+      background: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+      padding: 0.45rem 0.85rem;
       font-size: 0.78rem;
       gap: 0.5rem;
       max-width: none;
@@ -112,7 +108,7 @@
   @keyframes offline-banner-drop {
     from {
       opacity: 0;
-      transform: translateY(-100%);
+      transform: translateY(-0.75rem);
     }
     to {
       opacity: 1;