stellar-drive 1.2.28 → 1.2.30

package/src/components/GlobalToast.svelte

@@ -0,0 +1,251 @@
+<!--
+  @fileoverview GlobalToast — toast notification queue renderer.
+
+  Self-contained: subscribes to the stellar-drive toast store internally and
+  renders toasts at the bottom of the viewport.
+
+  - Mount once in your root `+layout.svelte`. No props required.
+  - Automatically raises toasts above the demo banner in demo mode.
+  - Stacks up to three toasts with distinct bottom offsets.
+  - Toasts slide up on entry and fade out on dismiss (via Svelte out:fade).
+  - Four variants: info (blue), success (green), error (red), warning (purple).
+  - z-index 9100 — above DemoBanner (9000), below modals.
+
+  Example mount:
+  ```svelte
+  import GlobalToast from 'stellar-drive/components/GlobalToast';
+  <GlobalToast />
+  ```
+-->
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import { toastStore, dismissToast } from 'stellar-drive/toast';
+  import { isDemoMode } from 'stellar-drive/demo';
+  import type { ToastVariant } from 'stellar-drive/toast';
+
+  // ==========================================================================
+  //                           COMPONENT STATE
+  // ==========================================================================
+
+  /** Whether demo mode is active — raises toasts above the demo banner. */
+  const inDemoMode = $derived(isDemoMode());
+
+  /** SVG icon paths for each variant. */
+  const ICONS: Record<ToastVariant, { paths: string[]; type: 'stroke' }> = {
+    info: {
+      type: 'stroke',
+      paths: [
+        'M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z',
+        'M12 16L12 12',
+        'M12 8L12.01 8'
+      ]
+    },
+    success: {
+      type: 'stroke',
+      paths: [
+        'M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z',
+        'M9 12L11 14L15 10'
+      ]
+    },
+    error: {
+      type: 'stroke',
+      paths: [
+        'M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z',
+        'M15 9L9 15',
+        'M9 9L15 15'
+      ]
+    },
+    warning: {
+      type: 'stroke',
+      paths: [
+        'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z',
+        'M12 9L12 13',
+        'M12 17L12.01 17'
+      ]
+    }
+  };
+</script>
+
+<!-- demo-mode class raises toasts above the demo banner -->
+<div class="toast-stack" class:demo-mode={inDemoMode}>
+  {#each $toastStore as toast (toast.id)}
+    <div class="toast-item toast-{toast.variant}" out:fade={{ duration: 180 }}>
+      <div class="toast-content">
+        <svg class="toast-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          {#each ICONS[toast.variant].paths as d}
+            <path {d} />
+          {/each}
+        </svg>
+        <span class="toast-text">{toast.message}</span>
+        <button
+          class="toast-dismiss"
+          onclick={() => dismissToast(toast.id)}
+          aria-label="Dismiss"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+            <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  /* ==========================================================================
+     TOAST NOTIFICATIONS
+     ========================================================================== */
+
+  .toast-item {
+    position: fixed;
+    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9100; /* above DemoBanner (9000) */
+    max-width: 420px;
+    width: calc(100% - 32px);
+    animation: toastSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    pointer-events: auto;
+  }
+
+  /* Stack multiple toasts */
+  .toast-item + .toast-item {
+    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
+  }
+  .toast-item + .toast-item + .toast-item {
+    bottom: calc(8rem + env(safe-area-inset-bottom, 0px));
+  }
+
+  /* Demo mode — raise above demo banner */
+  .toast-stack.demo-mode .toast-item {
+    bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
+  }
+  .toast-stack.demo-mode .toast-item + .toast-item {
+    bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
+  }
+  .toast-stack.demo-mode .toast-item + .toast-item + .toast-item {
+    bottom: calc(11rem + env(safe-area-inset-bottom, 0px));
+  }
+
+  @keyframes toastSlideUp {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(20px) scale(0.94);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0) scale(1);
+    }
+  }
+
+  .toast-content {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 16px;
+    background: var(--color-glass, rgba(20, 18, 30, 0.85));
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    border: 1px solid var(--color-glass-border, rgba(255, 255, 255, 0.08));
+    border-radius: 14px;
+    color: var(--color-text, #f0ede8);
+    font-size: 0.875rem;
+    line-height: 1.4;
+    box-shadow:
+      0 8px 32px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    transition:
+      border-color 0.3s,
+      box-shadow 0.3s;
+  }
+
+  /* ── Info (blue) ── */
+  .toast-info .toast-content {
+    border-color: rgba(96, 165, 250, 0.3);
+    box-shadow:
+      0 8px 32px rgba(96, 165, 250, 0.12),
+      0 0 0 1px rgba(96, 165, 250, 0.06),
+      inset 0 1px 0 rgba(96, 165, 250, 0.08);
+  }
+  .toast-info .toast-icon { color: #60a5fa; }
+
+  /* ── Success (green) ── */
+  .toast-success .toast-content {
+    border-color: rgba(16, 185, 129, 0.3);
+    box-shadow:
+      0 8px 32px rgba(16, 185, 129, 0.12),
+      0 0 0 1px rgba(16, 185, 129, 0.06),
+      inset 0 1px 0 rgba(16, 185, 129, 0.08);
+  }
+  .toast-success .toast-icon { color: #34d399; }
+
+  /* ── Error (red) ── */
+  .toast-error .toast-content {
+    border-color: rgba(220, 50, 70, 0.3);
+    box-shadow:
+      0 8px 32px rgba(220, 50, 70, 0.12),
+      0 0 0 1px rgba(220, 50, 70, 0.06),
+      inset 0 1px 0 rgba(220, 50, 70, 0.08);
+  }
+  .toast-error .toast-icon { color: #e85d75; }
+
+  /* ── Warning (purple) ── */
+  .toast-warning .toast-content {
+    border-color: rgba(167, 139, 250, 0.3);
+    box-shadow:
+      0 8px 32px rgba(167, 139, 250, 0.12),
+      0 0 0 1px rgba(167, 139, 250, 0.06),
+      inset 0 1px 0 rgba(167, 139, 250, 0.08);
+  }
+  .toast-warning .toast-icon { color: #a78bfa; }
+
+  .toast-icon {
+    flex-shrink: 0;
+    opacity: 0.9;
+  }
+
+  .toast-text {
+    flex: 1;
+  }
+
+  .toast-dismiss {
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    color: var(--color-text-muted, rgba(240, 237, 232, 0.5));
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 6px;
+    transition:
+      color 0.15s,
+      background 0.15s;
+  }
+
+  .toast-dismiss:hover {
+    color: var(--color-text, #f0ede8);
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  /* Push toasts above the mobile tab bar */
+  @media (max-width: 767px) {
+    .toast-item {
+      bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
+    }
+    .toast-item + .toast-item {
+      bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
+    }
+    .toast-item + .toast-item + .toast-item {
+      bottom: calc(12.5rem + env(safe-area-inset-bottom, 0px));
+    }
+
+    .toast-stack.demo-mode .toast-item {
+      bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
+    }
+    .toast-stack.demo-mode .toast-item + .toast-item {
+      bottom: calc(11rem + env(safe-area-inset-bottom, 0px));
+    }
+    .toast-stack.demo-mode .toast-item + .toast-item + .toast-item {
+      bottom: calc(14.5rem + env(safe-area-inset-bottom, 0px));
+    }
+  }
+</style>

package/src/components/OfflineBanner.svelte

@@ -0,0 +1,123 @@
+<!--
+  @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.
+
+  - 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.
+  - Only renders when `$isOnline` is `false`.
+  - No dismiss button — auto-hides on reconnect.
+  - Glass morphism styling with amber tint to distinguish from DemoBanner.
+  - z-index 9000 — matches DemoBanner tier.
+  - Never overlaps top nav on desktop or island-header on mobile.
+-->
+<script lang="ts">
+  import { isOnline } from '../stores/network';
+</script>
+
+{#if !$isOnline}
+  <div class="offline-banner" role="status" aria-live="assertive">
+    <svg class="offline-banner-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <line x1="1" y1="1" x2="23" y2="23"/>
+      <path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/>
+      <path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/>
+      <path d="M10.71 5.05A16 16 0 0 1 22.56 9"/>
+      <path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/>
+      <path d="M8.53 16.11a6 6 0 0 1 6.95 0"/>
+      <line x1="12" y1="20" x2="12.01" y2="20"/>
+    </svg>
+    <span class="offline-banner-text">You're offline — some features require a connection</span>
+  </div>
+{/if}
+
+<style>
+  /* ── Desktop: pill, centered, below top nav ──
+     Both apps have a 64px top nav plus env(safe-area-inset-top) padding.
+     0.75rem gap gives breathing room between nav bottom and banner top. */
+  .offline-banner {
+    position: fixed;
+    top: calc(64px + env(safe-area-inset-top, 0px) + 0.75rem);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9000;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.5rem 1.1rem;
+    border-radius: 9999px;
+    background: rgba(180, 120, 0, 0.15);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 200, 80, 0.2);
+    color: #ffd97a;
+    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);
+    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;
+  }
+
+  .offline-banner-text {
+    opacity: 0.95;
+  }
+
+  /* ── 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(). */
+  @media (max-width: 767px) {
+    .offline-banner {
+      top: calc(env(safe-area-inset-top, 47px) + 24px);
+      left: 0;
+      right: 0;
+      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;
+      font-size: 0.78rem;
+      gap: 0.5rem;
+      max-width: none;
+      white-space: normal;
+      animation: offline-banner-drop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+  }
+
+  @keyframes offline-banner-slide-down {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(-0.75rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+
+  @keyframes offline-banner-drop {
+    from {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

package/src/components/OfflineToast.svelte

@@ -0,0 +1,168 @@
+<!--
+  @fileoverview OfflineToast — app-neutral chunk-load error recovery toast.
+
+  Mounts a single `unhandledrejection` listener and surfaces a friendly
+  "page not available offline" message whenever a dynamic import fails because
+  its JS chunk is not in the service-worker cache.
+
+  - Mount once in your root `+layout.svelte`. No props required.
+  - Auto-dismisses after 5 seconds. Dismiss button available immediately.
+  - Positioned top-center, above all navigation chrome (z-index 1500).
+  - Styled with the stellar-drive design tokens — works in any theme.
+
+  Example mount:
+  ```svelte
+  import OfflineToast from 'stellar-drive/components/OfflineToast';
+  <OfflineToast />
+  ```
+-->
+<script lang="ts">
+  // ==========================================================================
+  //                           COMPONENT STATE
+  // ==========================================================================
+
+  /** Whether the toast is currently visible. */
+  let visible = $state(false);
+
+  /** Text to display in the toast. */
+  let message = $state('');
+
+  /** Auto-dismiss timer reference. */
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  // ==========================================================================
+  //                           HELPERS
+  // ==========================================================================
+
+  function show(msg: string, durationMs = 5000) {
+    if (timer) clearTimeout(timer);
+    message = msg;
+    visible = true;
+    timer = setTimeout(dismiss, durationMs);
+  }
+
+  function dismiss() {
+    visible = false;
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+
+  // ==========================================================================
+  //                      CHUNK ERROR LISTENER
+  // ==========================================================================
+
+  $effect(() => {
+    function handleRejection(event: PromiseRejectionEvent) {
+      const error = event.reason;
+      const isChunkError =
+        error?.message?.includes('Failed to fetch dynamically imported module') ||
+        error?.message?.includes('error loading dynamically imported module') ||
+        error?.message?.includes('Importing a module script failed') ||
+        error?.name === 'ChunkLoadError' ||
+        (error?.message?.includes('Loading chunk') && error?.message?.includes('failed'));
+
+      if (isChunkError) {
+        event.preventDefault();
+        show("This page isn't available offline. Please reconnect or go back.");
+      }
+    }
+
+    window.addEventListener('unhandledrejection', handleRejection);
+    return () => window.removeEventListener('unhandledrejection', handleRejection);
+  });
+</script>
+
+{#if visible}
+  <div class="offline-toast" role="alert" aria-live="polite">
+    <div class="offline-toast-icon" aria-hidden="true">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"/>
+        <line x1="12" y1="16" x2="12" y2="12"/>
+        <line x1="12" y1="8" x2="12.01" y2="8"/>
+      </svg>
+    </div>
+    <span class="offline-toast-message">{message}</span>
+    <button class="offline-toast-dismiss" onclick={dismiss} aria-label="Dismiss">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+        <line x1="18" y1="6" x2="6" y2="18"/>
+        <line x1="6" y1="6" x2="18" y2="18"/>
+      </svg>
+    </button>
+  </div>
+{/if}
+
+<style>
+  .offline-toast {
+    position: fixed;
+    top: calc(env(safe-area-inset-top, 0px) + 1rem);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1500;
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.5rem 0.75rem 0.5rem 0.875rem;
+    background: rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 9999px;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    white-space: nowrap;
+    max-width: calc(100vw - 2rem);
+    animation: offline-toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  @keyframes offline-toast-in {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(-0.75rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+
+  .offline-toast-icon {
+    flex-shrink: 0;
+    color: rgba(255, 255, 255, 0.7);
+    display: flex;
+    align-items: center;
+  }
+
+  .offline-toast-message {
+    flex: 1;
+    opacity: 0.95;
+  }
+
+  .offline-toast-dismiss {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    margin-left: 0.125rem;
+    background: rgba(255, 255, 255, 0.15);
+    border: none;
+    border-radius: 50%;
+    color: rgba(255, 255, 255, 0.8);
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .offline-toast-dismiss:hover {
+    background: rgba(255, 255, 255, 0.28);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .offline-toast { animation: none; }
+  }
+</style>