@nebulr-group/bridge-svelte 0.4.0-beta.4 → 0.4.0-beta.6

package/dist/client/BridgeBootstrap.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
   import { beforeNavigate, goto } from '$app/navigation';
+  import { page } from '$app/stores';
   import { onMount, onDestroy } from 'svelte';
   import { createRouteGuard } from '../auth/route-guard.js';
-  import { getBridgeAuth } from '../core/bridge-instance.js';
+  import {
+    getBridgeAuth,
+    isAuthenticated,
+    subscriptionStore,
+    loadSubscription,
+    ensureAppConfig,
+  } from '../core/bridge-instance.js';
   import { bridge as bridgeSurface } from '../core/bridge.js';
   import { setBridgeContext } from '../core/use-bridge.js';
   import { getConfig } from './stores/config.store.js';
@@ -11,7 +18,6 @@
     stopBridgeRuntime,
     type StartBridgeRuntimeOptions,
   } from '../core/bridge-runtime.js';
-  import { loadSubscription, ensureAppConfig } from '../core/bridge-instance.js';
 
   // Props: optional `runtime` overrides for advanced/debug use (websocketFactory,
   // reconnect overrides, etc.); `onBootstrapComplete` callback fires after the
@@ -30,6 +36,42 @@
 
   const guard = createRouteGuard();
 
+  // Reactive paywall enforcement.
+  //
+  // The one-shot redirect in bridgeBootstrap() (load) only fires on the very
+  // first load — it short-circuits on every later navigation (bridgeReadyStore),
+  // so it misses the post-login case where auth + subscription state resolve a
+  // beat AFTER load() ran. This guard owns correctness: it actively loads the
+  // subscription once known-authenticated, then redirects reactively whenever
+  // `shouldSelectPlan` resolves true. Same data source as <BridgePaywall>, so the
+  // overlay and the redirect agree. The load() redirect remains a no-flash
+  // fast-path for direct loads/refreshes only.
+  $effect(() => {
+    const paywallRoute = getConfig().billing?.paywallRoute;
+    if (!paywallRoute || !$isAuthenticated) return;
+
+    const { status, loading, error } = $subscriptionStore;
+
+    // Status unknown → trigger a single load. Guarding on `!error` avoids a
+    // tight refetch loop on persistent failure (fail-pending, not fail-open);
+    // a workspace switch resets the store and re-attempts.
+    if (!status && !loading && !error) {
+      loadSubscription().catch(() => { /* surfaced via store.error */ });
+      return;
+    }
+
+    // Status known → enforce. `$page.url.pathname` makes this re-run on
+    // navigation too, so manual nav to a protected page while plan-less is
+    // also caught. Path guard prevents a redirect loop on the paywall itself.
+    if (
+      status?.shouldSelectPlan === true &&
+      status?.paymentsAutoRedirect !== false &&
+      $page.url.pathname !== paywallRoute
+    ) {
+      goto(paywallRoute);
+    }
+  });
+
   async function handleRoute(pathname: string, cancel?: () => void) {
     const decision = await guard.getNavigationDecision(pathname);
     if (decision.type === 'login') {

package/dist/client/components/sdk-auth/ForgotPassword.svelte

@@ -10,6 +10,11 @@
     onComplete?: () => void;
     onError?: (error: Error) => void;
     loginHref?: string;
+    /**
+     * Override the built-in heading ("Set new password" / "Reset your password").
+     * Pass `null`/`''` to render no heading and use your own page title.
+     */
+    heading?: string | null;
   }
 
   let {
@@ -17,6 +22,7 @@
     onComplete,
     onError,
     loginHref = '/login',
+    heading = undefined,
     class: className,
     style,
     ...rest
@@ -33,6 +39,14 @@
 
   const isSetMode = $derived(!!token);
 
+  // In a success state ("Password set" / the email-sent alert) the form heading
+  // is redundant, so suppress it. Otherwise use the override (if provided) or
+  // the built-in, state-appropriate heading.
+  const builtInHeading = $derived(isSetMode ? 'Set new password' : 'Reset your password');
+  const wrapperHeading = $derived(
+    passwordReset || emailSent ? null : heading !== undefined ? heading : builtInHeading,
+  );
+
   async function handleSendLink() {
     if (loading) return;
     error = null;
@@ -77,7 +91,7 @@
 </script>
 
 <AuthFormWrapper
-  heading={isSetMode ? 'Set new password' : 'Reset your password'}
+  heading={wrapperHeading}
   class={className}
   {style}
   {...rest}

package/dist/client/components/sdk-auth/ForgotPassword.svelte.d.ts

@@ -4,6 +4,11 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     onComplete?: () => void;
     onError?: (error: Error) => void;
     loginHref?: string;
+    /**
+     * Override the built-in heading ("Set new password" / "Reset your password").
+     * Pass `null`/`''` to render no heading and use your own page title.
+     */
+    heading?: string | null;
 }
 declare const ForgotPassword: import("svelte").Component<Props, {}, "">;
 type ForgotPassword = ReturnType<typeof ForgotPassword>;

package/dist/client/components/sdk-auth/LoginForm.svelte

@@ -219,7 +219,7 @@
 
 <!-- Inline forgot password -->
 {:else if step === 'forgot-password'}
-  <AuthFormWrapper heading="Reset your password">
+  <AuthFormWrapper heading={fpEmailSent ? null : 'Reset your password'}>
     {#if error}
       <Alert variant="error">{error}</Alert>
     {/if}
@@ -257,7 +257,7 @@
 
 <!-- Inline magic link -->
 {:else if step === 'magic-link'}
-  <AuthFormWrapper heading="Sign in with email link">
+  <AuthFormWrapper heading={mlSent ? null : 'Sign in with email link'}>
     {#if error}
       <Alert variant="error">{error}</Alert>
     {/if}

package/dist/client/components/sdk-auth/MagicLink.svelte

@@ -9,12 +9,15 @@
     onSent?: () => void;
     onError?: (error: Error) => void;
     loginHref?: string;
+    /** Heading text. Pass `null`/`''` to render no heading and use your own page title. */
+    heading?: string | null;
   }
 
   let {
     onSent,
     onError,
     loginHref = '/login',
+    heading = 'Sign in with email link',
     class: className,
     style,
     ...rest
@@ -51,7 +54,7 @@
   }
 </script>
 
-<AuthFormWrapper heading="Sign in with email link" class={className} {style} {...rest}>
+<AuthFormWrapper heading={sent ? null : heading} class={className} {style} {...rest}>
   {#if error}
     <Alert variant="error">{error}</Alert>
   {/if}

package/dist/client/components/sdk-auth/MagicLink.svelte.d.ts

@@ -3,6 +3,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     onSent?: () => void;
     onError?: (error: Error) => void;
     loginHref?: string;
+    /** Heading text. Pass `null`/`''` to render no heading and use your own page title. */
+    heading?: string | null;
 }
 declare const MagicLink: import("svelte").Component<Props, {}, "">;
 type MagicLink = ReturnType<typeof MagicLink>;

package/dist/client/components/sdk-auth/SignupForm.svelte

@@ -13,7 +13,8 @@
     showLoginLink?: boolean;
     /** Override login page URL. Default: derived from BridgeConfig loginRoute. */
     loginHref?: string | undefined;
-    heading?: string;
+    /** Heading text. Pass `null`/`''` to render no heading and use your own page title. */
+    heading?: string | null;
     footer?: Snippet;
   }
 
@@ -55,7 +56,9 @@
   }
 </script>
 
-<AuthFormWrapper {heading} class={className} {style} {...rest}>
+<!-- In the success state, the "Check your email" heading below is the title,
+     so suppress the form heading to avoid two stacked headings. -->
+<AuthFormWrapper heading={success ? null : heading} class={className} {style} {...rest}>
   {#if success}
     <h2 class="bridge-success-heading">Check your email</h2>
     <p class="bridge-step-desc">We sent a verification link to <strong>{email}</strong>. Check your inbox to activate your account.</p>

package/dist/client/components/sdk-auth/SignupForm.svelte.d.ts

@@ -6,7 +6,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     showLoginLink?: boolean;
     /** Override login page URL. Default: derived from BridgeConfig loginRoute. */
     loginHref?: string | undefined;
-    heading?: string;
+    /** Heading text. Pass `null`/`''` to render no heading and use your own page title. */
+    heading?: string | null;
     footer?: Snippet;
 }
 declare const SignupForm: import("svelte").Component<Props, {}, "">;

package/dist/client/components/sdk-auth/shared/AuthFormWrapper.svelte

@@ -3,7 +3,8 @@
   import type { HTMLAttributes } from 'svelte/elements';
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
-    heading?: string;
+    /** Heading text. Pass `null` or `''` to render no heading. */
+    heading?: string | null;
     headingSnippet?: Snippet;
     children?: Snippet;
   }

package/dist/client/components/sdk-auth/shared/AuthFormWrapper.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-    heading?: string;
+    /** Heading text. Pass `null` or `''` to render no heading. */
+    heading?: string | null;
     headingSnippet?: Snippet;
     children?: Snippet;
 }

package/dist/client/components/subscription/PlanSelector.svelte

@@ -8,11 +8,20 @@
   import Alert from '../sdk-auth/shared/Alert.svelte';
   import Spinner from '../sdk-auth/shared/Spinner.svelte';
 
+  type BillingInterval = PriceOfferSdk['recurrenceInterval'];
+
   interface Props extends HTMLAttributes<HTMLDivElement> {
     successRedirect?: string;
     cancelRedirect?: string;
+    /**
+     * Which billing interval tab is selected by default (`'month'` | `'year'` |
+     * `'week'` | `'day'`). Falls back to the first available interval when the
+     * requested one isn't offered by any plan. Default: `'month'`.
+     */
+    defaultInterval?: BillingInterval;
     onSelect?: (detail: { plan: Plan; price: PriceOfferSdk }) => void;
-    planCard?: Snippet<[{ plan: Plan; prices: PriceOfferSdk[]; isCurrent: boolean; onPick: (price: PriceOfferSdk) => void }]>;
+    /** Custom card renderer. `prices` is the plan's full price list; `interval` is the active tab. */
+    planCard?: Snippet<[{ plan: Plan; prices: PriceOfferSdk[]; isCurrent: boolean; interval: BillingInterval; onPick: (price: PriceOfferSdk) => void }]>;
     emptyState?: Snippet;
     loadingState?: Snippet;
   }
@@ -20,6 +29,7 @@
   let {
     successRedirect = '/subscription',
     cancelRedirect = '/subscription',
+    defaultInterval = 'month',
     onSelect,
     planCard,
     emptyState,
@@ -37,6 +47,50 @@
   const loading = $derived($subscriptionStore.loading);
   const storeError = $derived($subscriptionStore.error);
 
+  const INTERVAL_LABELS: Record<BillingInterval, string> = {
+    day: 'Daily',
+    week: 'Weekly',
+    month: 'Monthly',
+    year: 'Yearly',
+  };
+
+  // Distinct billing intervals offered by any *paid* price across all plans,
+  // in a stable display order. (Free, amount-0 prices are interval-agnostic
+  // and always shown, so they don't contribute a tab.)
+  const availableIntervals = $derived.by<BillingInterval[]>(() => {
+    const order: BillingInterval[] = ['day', 'week', 'month', 'year'];
+    return order.filter((i) =>
+      (plans ?? []).some((plan) =>
+        plan.prices.some((p) => p.amount > 0 && p.recurrenceInterval === i),
+      ),
+    );
+  });
+
+  // Only render the toggle when there's a genuine choice (≥2 intervals).
+  const showIntervalTabs = $derived(availableIntervals.length >= 2);
+
+  // The user's explicit tab choice (null until they pick one). The effective
+  // selection is derived — the override when still valid, else the requested
+  // `defaultInterval`, else the first available. Kept as $derived (rather than
+  // an $effect that writes state) so it reconciles automatically as plans load.
+  let intervalOverride = $state<BillingInterval | null>(null);
+  const selectedInterval = $derived.by<BillingInterval>(() => {
+    if (intervalOverride && availableIntervals.includes(intervalOverride)) {
+      return intervalOverride;
+    }
+    return availableIntervals.includes(defaultInterval)
+      ? defaultInterval
+      : (availableIntervals[0] ?? defaultInterval);
+  });
+
+  // Prices to show for a plan under the active tab: the matching interval, plus
+  // any free (amount-0) prices which apply regardless of interval.
+  function pricesForInterval(plan: Plan): PriceOfferSdk[] {
+    return plan.prices.filter(
+      (p) => p.amount === 0 || p.recurrenceInterval === selectedInterval,
+    );
+  }
+
   type UiState = 'idle' | 'payment-failed' | 'setup-payments' | 'select-plan' | 'active' | 'trial';
 
   const uiState = $derived<UiState>((() => {
@@ -151,13 +205,35 @@
         <p class="bridge-plan-empty">No plans available.</p>
       {/if}
     {:else if plans}
+      {#if showIntervalTabs}
+        <div
+          class="bridge-plan-interval-tabs"
+          data-bridge-plan-interval-tabs
+          role="group"
+          aria-label="Billing interval"
+        >
+          {#each availableIntervals as interval (interval)}
+            <button
+              type="button"
+              class="bridge-plan-interval-tab"
+              data-active={interval === selectedInterval}
+              aria-pressed={interval === selectedInterval}
+              onclick={() => (intervalOverride = interval)}
+            >
+              {INTERVAL_LABELS[interval]}
+            </button>
+          {/each}
+        </div>
+      {/if}
+
       <div class="bridge-plan-cards" data-bridge-plan-cards>
         {#each plans as plan (plan.key)}
           {@const isCurrent = plan.key === currentPlanKey}
           {@const onPick = (price: PriceOfferSdk) => handlePick(plan, price)}
+          {@const visiblePrices = pricesForInterval(plan)}
 
           {#if planCard}
-            {@render planCard({ plan, prices: plan.prices, isCurrent, onPick })}
+            {@render planCard({ plan, prices: plan.prices, isCurrent, interval: selectedInterval, onPick })}
           {:else}
             <div
               data-bridge-plan-card
@@ -177,7 +253,7 @@
               {/if}
 
               <div class="bridge-plan-prices">
-                {#each plan.prices as price (price.recurrenceInterval + price.currency)}
+                {#each visiblePrices as price (price.recurrenceInterval + price.currency)}
                   <button
                     class="bridge-btn-primary bridge-plan-select-btn"
                     disabled={isCurrent || picking}
@@ -201,6 +277,10 @@
                   >
                     {isCurrent ? 'Current plan' : 'Select plan'}
                   </button>
+                {:else if visiblePrices.length === 0}
+                  <p class="bridge-plan-unavailable" data-bridge-plan-unavailable>
+                    Not available {INTERVAL_LABELS[selectedInterval].toLowerCase()}
+                  </p>
                 {/if}
               </div>
             </div>

package/dist/client/components/subscription/PlanSelector.svelte.d.ts

@@ -1,17 +1,26 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Plan, PriceOfferSdk } from '@nebulr-group/bridge-auth-core';
+type BillingInterval = PriceOfferSdk['recurrenceInterval'];
 interface Props extends HTMLAttributes<HTMLDivElement> {
     successRedirect?: string;
     cancelRedirect?: string;
+    /**
+     * Which billing interval tab is selected by default (`'month'` | `'year'` |
+     * `'week'` | `'day'`). Falls back to the first available interval when the
+     * requested one isn't offered by any plan. Default: `'month'`.
+     */
+    defaultInterval?: BillingInterval;
     onSelect?: (detail: {
         plan: Plan;
         price: PriceOfferSdk;
     }) => void;
+    /** Custom card renderer. `prices` is the plan's full price list; `interval` is the active tab. */
     planCard?: Snippet<[{
         plan: Plan;
         prices: PriceOfferSdk[];
         isCurrent: boolean;
+        interval: BillingInterval;
         onPick: (price: PriceOfferSdk) => void;
     }]>;
     emptyState?: Snippet;

package/dist/core/bridge.d.ts

@@ -36,7 +36,11 @@ export interface BridgeTenantSurface {
     id: Readable<string | null>;
     /** Workspace display name. Populated by session.snapshot. */
     name: Readable<string | null>;
-    /** Canonical subscription (plan + status + endsAt). Populated by session.snapshot. */
+    /**
+     * Canonical subscription (plan + status + endsAt). Live via `session.snapshot`
+     * when the realtime channel is active; otherwise transparently falls back to
+     * the REST subscription endpoint (fetched lazily on first read).
+     */
     subscription: Readable<SubscriptionSnapshot | null>;
     /**
      * Entitlements scope. `snapshot` is the full `{ key: boolean }` map;
@@ -52,7 +56,11 @@ export interface BridgeTenantSurface {
 export interface BridgeSurface {
     app: BridgeAppSurface;
     tenant: BridgeTenantSurface;
-    /** Authenticated user (id/email/role/tenantId). Populated by session.snapshot. */
+    /**
+     * Authenticated user (id/email/role/tenantId). Live via `session.snapshot`
+     * when the realtime channel is active; otherwise transparently seeded from the
+     * access-token claims (the only client-side source of `role`).
+     */
     user: Readable<UserSnapshot | null>;
     /**
      * Phase 5 (TBP-328) — single attribute write surface. `set/bind/bindMany`

package/dist/core/bridge.js

@@ -16,11 +16,11 @@
  * only exposes the singleton aggregate `bridge`; consumers can import it
  * directly until the context hook ships.
  */
-import { derived } from 'svelte/store';
+import { derived, get } from 'svelte/store';
 import { appBrandingStore, tenantEntitlementsStore, tenantIdStore, tenantNameStore, tenantSubscriptionStore, userSnapshotStore, } from './snapshot-stores.js';
 import { LazySlice } from './lazy-slice.js';
 import { DevAttributeProvider } from '@nebulr-group/bridge-auth-core';
-import { getBridgeAuth } from './bridge-instance.js';
+import { getBridgeAuth, tokenStore, subscriptionStore, loadSubscription } from './bridge-instance.js';
 import { bridgeEvents } from './events.js';
 let _lastEntitlements = null;
 // Keep `_lastEntitlements` in sync so `can()` can answer synchronously.
@@ -54,6 +54,89 @@ const _plansSlice = new LazySlice({
 // decision #20: providers < setContext < per-call, and dev's provider is
 // effectively the per-call equivalent for set/bind/bindMany).
 const _devAttributes = new DevAttributeProvider();
+// ── Layered sources behind `bridge.user` / `bridge.tenant.subscription` ──────
+//
+// Design contract (locked): the developer always reads the SAME store; whether
+// the value comes from the live realtime channel or a static fallback is
+// invisible to them.
+//   A. Default — the `session.snapshot` channel populates and live-updates the
+//      snapshot stores; they win whenever present.
+//   B. Fallback (channel not active) — `bridge.user` is seeded from the access
+//      token claims (instant, full-fidelity for role); `bridge.tenant.subscription`
+//      falls back to the REST subscription endpoint (full plan name/status,
+//      fetched lazily). These are NOT live-updated — by design, since the app
+//      opted out of the live channel.
+/**
+ * JWT-derived user, recomputed whenever the token set changes (login, refresh,
+ * workspace switch, logout). Reuses auth-core's `getCurrentUser()` — the single
+ * home for access-token claim parsing. `null` when unauthenticated.
+ */
+const _jwtUser = derived(tokenStore, ($t) => {
+    if (!$t?.accessToken)
+        return null;
+    let claims = null;
+    try {
+        claims = getBridgeAuth().getCurrentUser();
+    }
+    catch {
+        return null;
+    }
+    if (!claims)
+        return null;
+    return {
+        id: claims.id,
+        email: claims.email,
+        // UserSnapshot requires these; the live snapshot supplies the authoritative
+        // values, the JWT fallback fills them when claims carry them.
+        role: claims.role ?? '',
+        tenantId: claims.tenantId ?? '',
+    };
+});
+/** `bridge.user`: live snapshot wins; JWT seed is the static fallback. */
+const _userSurface = derived([userSnapshotStore, _jwtUser], ([snap, jwt]) => snap ?? jwt);
+/** Map the REST `SubscriptionStatus` to the canonical `SubscriptionSnapshot` shape. */
+function mapRestSubscription(status) {
+    if (!status)
+        return null;
+    const plan = status.plan;
+    let slug = '';
+    let name = '';
+    if (typeof plan === 'string') {
+        slug = plan;
+        name = plan;
+    }
+    else if (plan) {
+        slug = plan.key;
+        name = plan.name;
+    }
+    // REST exposes lifecycle as booleans; derive a best-effort status string to
+    // parallel the snapshot's `status` field.
+    const statusStr = status.paymentFailed
+        ? 'past_due'
+        : status.trial
+            ? 'trialing'
+            : status.paymentsEnabled || status.plan
+                ? 'active'
+                : 'incomplete';
+    return { plan: { slug, name }, status: statusStr };
+}
+/**
+ * `bridge.tenant.subscription`: live snapshot wins; otherwise the REST endpoint
+ * is fetched lazily on first subscribe (only when no snapshot and not already
+ * loading/loaded). In live apps the snapshot is present, so REST is never hit.
+ */
+const _subscriptionMerged = derived([tenantSubscriptionStore, subscriptionStore], ([snap, rest]) => snap ?? mapRestSubscription(rest.status));
+const _subscriptionSurface = {
+    subscribe(run, invalidate) {
+        const noSnapshot = get(tenantSubscriptionStore) == null;
+        const rest = get(subscriptionStore);
+        if (noSnapshot && rest.status == null && !rest.loading) {
+            // Lazy fallback fetch — throws if unauthenticated; swallow (stays null).
+            loadSubscription().catch(() => { });
+        }
+        return _subscriptionMerged.subscribe(run, invalidate);
+    },
+};
 export const bridge = {
     app: {
         branding: appBrandingStore,
@@ -62,13 +145,13 @@ export const bridge = {
     tenant: {
         id: tenantIdStore,
         name: tenantNameStore,
-        subscription: tenantSubscriptionStore,
+        subscription: _subscriptionSurface,
         entitlements: {
             snapshot: tenantEntitlementsStore,
             can: entitlementsCan,
         },
     },
-    user: userSnapshotStore,
+    user: _userSurface,
     attributes: _devAttributes,
     events: bridgeEvents,
 };

package/dist/styles.css

@@ -935,6 +935,39 @@
   margin-top: 0.75rem;
 }
 
+.bridge-plan-interval-tabs {
+  display: inline-flex;
+  gap: 0.25rem;
+  margin-bottom: 1.25rem;
+  padding: 0.25rem;
+  border: 1px solid var(--bridge-border, #e2e8f0);
+  border-radius: var(--bridge-border-radius, 0.5rem);
+  background: var(--bridge-muted-bg, var(--bridge-bg-muted, #f8fafc));
+}
+
+.bridge-plan-interval-tab {
+  appearance: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8125rem;
+  padding: 0.375rem 0.875rem;
+  border-radius: calc(var(--bridge-border-radius, 0.5rem) - 0.2rem);
+  color: var(--bridge-muted, #64748b);
+}
+
+.bridge-plan-interval-tab[data-active="true"] {
+  background: var(--bridge-primary, #2563eb);
+  color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #fff));
+}
+
+.bridge-plan-unavailable {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--bridge-muted, #64748b);
+}
+
 .bridge-plan-cards {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebulr-group/bridge-svelte",
-  "version": "0.4.0-beta.4",
+  "version": "0.4.0-beta.6",
   "description": "Bridge Svelte library, This library helps you to add bridge authentication and feature flags, and payments to your svelte application.",
   "author": "Iman Pouya",
   "license": "MIT",
@@ -67,7 +67,7 @@
     }
   },
   "dependencies": {
-    "@nebulr-group/bridge-auth-core": "0.4.0-beta.5"
+    "@nebulr-group/bridge-auth-core": "0.4.0-beta.7"
   },
   "devDependencies": {
     "@sveltejs/kit": "^2.16.0",