@nebulr-group/bridge-svelte 0.4.0-beta.7 → 0.4.0-beta.9

package/dist/client/BridgeBootstrap.js

@@ -67,22 +67,15 @@ export async function bridgeBootstrap(url, config, routeConfig = { rules: [], de
                 }
             }
             else if (stripeSuccess && sessionId) {
-                // Stripe payment success — verify with bridge-api (server calls Stripe directly),
-                // then refresh tokens so the new JWT has shouldSelectPlan: false before redirect.
+                // Stripe payment success — auth-core's confirmStripeCheckout() verifies the session
+                // with bridge-api (server calls Stripe directly) and refreshes tokens so the new JWT
+                // has shouldSelectPlan: false before we redirect. It throws on a non-OK response or
+                // network error → we fall through to the payment-error redirect. (TBP-369: the HTTP +
+                // token-refresh logic now lives in auth-core so every plugin port can reuse it.)
                 logger.debug('[bridgeBootstrap] Stripe success callback — confirming with bridge-api');
                 const bridge = getBridgeAuth();
-                const ctx = bridge.getApiContext();
                 try {
-                    const res = await (kitFetch ?? fetch)(`${ctx.apiBaseUrl}/v1/account/stripe/confirm-checkout`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ sessionId, appId: ctx.appId }),
-                    });
-                    if (!res.ok) {
-                        logger.warn('[bridgeBootstrap] confirm-checkout failed', res.status);
-                        redirect(303, getConfig().billing?.paymentErrorRoute ?? '/payment-error');
-                    }
-                    await bridge.refreshTokens();
+                    await bridge.confirmStripeCheckout(sessionId, kitFetch);
                     redirect(303, redirectTo);
                 }
                 catch (err) {
@@ -117,22 +110,19 @@ export async function bridgeBootstrap(url, config, routeConfig = { rules: [], de
     catch {
         // Non-fatal — stale tokens will be caught by route guard
     }
-    // 2b. Paywall redirect — fires before any page renders. Reads shouldSelectPlan
-    //     and paymentsAutoRedirect from getSubscriptionStatus(). Only redirects when:
+    // 2b. Paywall redirect — fires before any page renders. The framework-agnostic
+    //     decision (authenticated + shouldSelectPlan + not opted out via
+    //     paymentsAutoRedirect) now lives in auth-core's shouldRedirectToPaywall()
+    //     (TBP-369). We only own the route/config guards here:
     //     - billing.paywallRoute is configured
     //     - the current path is not already the paywall route (no redirect loop)
-    //     - the tenant is authenticated but has not selected a plan
-    //     - the app has not opted out via paymentsAutoRedirect: false
     try {
         const paywallRoute = getConfig().billing?.paywallRoute;
         if (paywallRoute && url.pathname !== paywallRoute) {
             const bridge = getBridgeAuth();
-            if (bridge.isAuthenticated()) {
-                const status = await bridge.getSubscriptionStatus();
-                if (status?.shouldSelectPlan === true && status?.paymentsAutoRedirect !== false) {
-                    logger.debug('[bridgeBootstrap] paywall redirect', paywallRoute);
-                    redirect(303, paywallRoute);
-                }
+            if (await bridge.shouldRedirectToPaywall()) {
+                logger.debug('[bridgeBootstrap] paywall redirect', paywallRoute);
+                redirect(303, paywallRoute);
             }
         }
     }

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

@@ -40,7 +40,7 @@
 
       let authResponse: any;
       if (typeof window !== 'undefined' && (window as any).__simpleWebAuthn?.startAuthentication) {
-        authResponse = await (window as any).__simpleWebAuthn.startAuthentication(options, autofill);
+        authResponse = await (window as any).__simpleWebAuthn.startAuthentication({ optionsJSON: options, useBrowserAutofill: autofill });
       } else {
         // @ts-ignore — @simplewebauthn/browser is an optional peer dependency
         const mod = await import('@simplewebauthn/browser');

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

@@ -54,7 +54,7 @@
 
       let regResponse: any;
       if (typeof window !== 'undefined' && (window as any).__simpleWebAuthn?.startRegistration) {
-        regResponse = await (window as any).__simpleWebAuthn.startRegistration(options);
+        regResponse = await (window as any).__simpleWebAuthn.startRegistration({ optionsJSON: options });
       } else {
         // @ts-ignore — @simplewebauthn/browser is an optional peer dependency
         const mod = await import('@simplewebauthn/browser');

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

@@ -15,6 +15,12 @@
     loginHref?: string | undefined;
     /** Heading text. Pass `null`/`''` to render no heading and use your own page title. */
     heading?: string | null;
+    /** TBP-36 — preselected plan applied at tenant creation (from ?signupPlan= links). */
+    plan?: string | null;
+    /** TBP-36 — currency of the preselected plan's price offer. */
+    currency?: string | null;
+    /** TBP-36 — recurrence interval of the preselected plan's price offer. */
+    recurrenceInterval?: string | null;
     footer?: Snippet;
   }
 
@@ -24,6 +30,9 @@
     showLoginLink = true,
     loginHref = undefined,
     heading = 'Create your account',
+    plan = null,
+    currency = null,
+    recurrenceInterval = null,
     footer,
     class: className,
     style,
@@ -44,7 +53,11 @@
     error = null;
     loading = true;
     try {
-      await getBridgeAuth().signup(email, firstName, lastName);
+      await getBridgeAuth().signup(email, firstName, lastName, plan ? {
+        plan,
+        currency: currency ?? undefined,
+        recurrenceInterval: recurrenceInterval ?? undefined,
+      } : undefined);
       success = true;
       onSignup?.();
     } catch (err: any) {

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

@@ -8,6 +8,12 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     loginHref?: string | undefined;
     /** Heading text. Pass `null`/`''` to render no heading and use your own page title. */
     heading?: string | null;
+    /** TBP-36 — preselected plan applied at tenant creation (from ?signupPlan= links). */
+    plan?: string | null;
+    /** TBP-36 — currency of the preselected plan's price offer. */
+    currency?: string | null;
+    /** TBP-36 — recurrence interval of the preselected plan's price offer. */
+    recurrenceInterval?: string | null;
     footer?: Snippet;
 }
 declare const SignupForm: import("svelte").Component<Props, {}, "">;

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

@@ -24,6 +24,7 @@
     type BillingSubscriptionSnapshot,
   } from '@nebulr-group/bridge-auth-core';
   import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import { getConfig } from '../../stores/config.store.js';
 
   type Chassis = 'bar' | 'rail' | 'card';
 
@@ -40,6 +41,9 @@
     class?: string;
     /** Override the default CTA click handler (links to billing surface). */
     onActionClick?: (state: BillingNoticeState) => void;
+    /** CTA destination for this instance. Overrides `billing.manageRoute`
+     *  config; `onActionClick` takes precedence over both. */
+    actionHref?: string;
   }
 
   let {
@@ -47,14 +51,15 @@
     mode = 'soft',
     class: className = '',
     onActionClick,
+    actionHref,
   }: Props = $props();
 
   let snapshot = $state<BillingSubscriptionSnapshot>(useBridge().subscription.snapshot());
   let unsubscribe: (() => void) | undefined;
 
-  // Admin/member variant — read from existing auth context. The exact field
-  // name varies by SDK; we look up `billing` privilege on the current user.
-  // Defaults to non-admin if unavailable.
+  // Admin/member variant. v1 policy: workspace owner only, via
+  // canManageBilling() (immutable OWNER role key). Defaults to non-admin if
+  // unavailable.
   let isBillingAdmin = $state(false);
 
   onMount(() => {
@@ -65,15 +70,7 @@
     const auth = getBridgeAuth();
     const ctx = auth.getApiContext();
     if (ctx.accessToken) {
-      // Best-effort role read. Existing auth-core role probing varies by app;
-      // defensive cast so the component never crashes on missing fields.
-      const tokenManager = (auth as unknown as { tokenManager?: { getTokens?: () => { accessToken?: string } } }).tokenManager;
-      void tokenManager; // intentionally unused — placeholder until role API is finalized
-      // For US-5 default: assume admin if a JWT is present. Subsequent
-      // stories will read the exact privilege claim. Keeping permissive so
-      // the CTA shows by default; member variant lands when the role check
-      // is wired through.
-      isBillingAdmin = true;
+      isBillingAdmin = auth.canManageBilling();
     }
 
     if (!ctx.accessToken) {
@@ -202,11 +199,16 @@
       onActionClick(noticeState);
       return;
     }
-    // Default: open the existing billing surface. The exact destination
-    // depends on app configuration — for now, navigate to /billing on the
-    // current origin. Apps can override via `onActionClick`.
+    // Default: open the app's billing surface. Destination priority:
+    // `actionHref` prop → `billing.manageRoute` config → '/billing'.
     if (typeof window !== 'undefined') {
-      window.location.href = '/billing';
+      let manageRoute: string | undefined;
+      try {
+        manageRoute = getConfig().billing?.manageRoute;
+      } catch {
+        // Config not initialized — fall through to the default.
+      }
+      window.location.href = actionHref ?? manageRoute ?? '/billing';
     }
   }
 </script>

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

@@ -13,6 +13,9 @@ interface Props {
     class?: string;
     /** Override the default CTA click handler (links to billing surface). */
     onActionClick?: (state: BillingNoticeState) => void;
+    /** CTA destination for this instance. Overrides `billing.manageRoute`
+     *  config; `onActionClick` takes precedence over both. */
+    actionHref?: string;
 }
 declare const BridgeBillingNotice: import("svelte").Component<Props, {}, "">;
 type BridgeBillingNotice = ReturnType<typeof BridgeBillingNotice>;

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

@@ -27,6 +27,7 @@
     type QuotaSnapshot,
   } from '@nebulr-group/bridge-auth-core';
   import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import { getConfig } from '../../stores/config.store.js';
 
   type Chassis = 'rail';
   type Severity = 'warn' | 'critical';
@@ -43,6 +44,9 @@
     class?: string;
     /** Override the default Upgrade CTA click handler. */
     onActionClick?: (snap: QuotaSnapshot) => void;
+    /** CTA destination for this instance. Overrides `billing.manageRoute`
+     *  config; `onActionClick` takes precedence over both. */
+    actionHref?: string;
     /**
      * Optional display label override. Defaults to the snapshot's `.label`
      * (raw metric key for US-11; the framework wrapper will eventually
@@ -56,6 +60,7 @@
     chassis = 'rail',
     class: className = '',
     onActionClick,
+    actionHref,
     label,
   }: Props = $props();
 
@@ -64,9 +69,8 @@
   let snapshot = $state<QuotaSnapshot | undefined>(useBridge().quota(metric));
   let unsubscribe: (() => void) | undefined;
 
-  // Role variant mirrors BridgeBillingNotice: any authenticated user is
-  // treated as a billing admin for US-11 until the role/privilege API is
-  // finalized. Member variant lands when the role probe is wired through.
+  // Role variant mirrors BridgeBillingNotice: CTA only for the workspace
+  // owner (v1 canManageBilling() policy). Member variant renders otherwise.
   let isBillingAdmin = $state(false);
 
   onMount(() => {
@@ -78,11 +82,7 @@
     snapshot = useBridge().quota(metric);
 
     try {
-      const auth = getBridgeAuth();
-      const ctx = auth.getApiContext();
-      if (ctx.accessToken) {
-        isBillingAdmin = true;
-      }
+      isBillingAdmin = getBridgeAuth().canManageBilling();
     } catch {
       // No BridgeAuth instance — render the member variant.
     }
@@ -223,8 +223,16 @@
       onActionClick(snapshot);
       return;
     }
+    // Destination priority: `actionHref` prop → `billing.manageRoute` config
+    // → '/billing'.
     if (typeof window !== 'undefined') {
-      window.location.href = '/billing';
+      let manageRoute: string | undefined;
+      try {
+        manageRoute = getConfig().billing?.manageRoute;
+      } catch {
+        // Config not initialized — fall through to the default.
+      }
+      window.location.href = actionHref ?? manageRoute ?? '/billing';
     }
   }
 </script>

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

@@ -12,6 +12,9 @@ interface Props {
     class?: string;
     /** Override the default Upgrade CTA click handler. */
     onActionClick?: (snap: QuotaSnapshot) => void;
+    /** CTA destination for this instance. Overrides `billing.manageRoute`
+     *  config; `onActionClick` takes precedence over both. */
+    actionHref?: string;
     /**
      * Optional display label override. Defaults to the snapshot's `.label`
      * (raw metric key for US-11; the framework wrapper will eventually

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

@@ -16,12 +16,18 @@
     /**
      * 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'`.
+     * requested one isn't offered by any plan. Default: `'year'` (TBP-34 —
+     * annual is the default; apps without yearly prices fall back gracefully).
      */
     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 }]>;
+    /** Replaces the built-in description paragraph of the default card —
+     *  custom copy or markup per plan without reimplementing the whole card. */
+    planDescription?: Snippet<[{ plan: Plan; isCurrent: boolean }]>;
+    /** Rendered at the bottom of the default card, after the price buttons. */
+    planFooter?: Snippet<[{ plan: Plan; isCurrent: boolean }]>;
     emptyState?: Snippet;
     loadingState?: Snippet;
   }
@@ -29,9 +35,11 @@
   let {
     successRedirect = '/subscription',
     cancelRedirect = '/subscription',
-    defaultInterval = 'month',
+    defaultInterval = 'year',
     onSelect,
     planCard,
+    planDescription,
+    planFooter,
     emptyState,
     loadingState,
     class: className,
@@ -117,6 +125,52 @@
     }
   });
 
+  // ── Plan-change confirmation (TBP-33) ─────────────────────────────────
+  // Switching an existing subscriber's plan is instant (no Stripe checkout
+  // page), so it needs an explicit confirm step. Free selection and the
+  // checkout redirect keep their existing single-click behavior.
+  let confirmTarget = $state<{ plan: Plan; price: PriceOfferSdk } | null>(null);
+  let confirmBusy = $state(false);
+  let confirmError = $state<string | null>(null);
+  let successNotice = $state<string | null>(null);
+  let successTimer: ReturnType<typeof setTimeout> | undefined;
+
+  const currentPlanName = $derived.by(() => {
+    const found = (plans ?? []).find((p) => p.key === currentPlanKey);
+    return found?.name ?? currentPlanKey ?? 'your current plan';
+  });
+
+  function formatPrice(price: PriceOfferSdk): string {
+    return price.amount === 0
+      ? 'Free'
+      : `${price.amount} ${price.currency.toUpperCase()} / ${price.recurrenceInterval}`;
+  }
+
+  function showSuccess(message: string): void {
+    successNotice = message;
+    clearTimeout(successTimer);
+    successTimer = setTimeout(() => (successNotice = null), 6000);
+  }
+
+  async function confirmPlanChange(): Promise<void> {
+    if (!confirmTarget) return;
+    const { plan, price } = confirmTarget;
+    confirmBusy = true;
+    confirmError = null;
+    try {
+      await getBridgeAuth().changePlan(plan.key, price);
+      await loadSubscription();
+      confirmTarget = null;
+      showSuccess(`You're now on ${plan.name} (${formatPrice(price)}).`);
+      onSelect?.({ plan, price });
+    } catch (err) {
+      // AC: failure surfaces inside the dialog, not just a banner.
+      confirmError = err instanceof Error ? err.message : 'Plan change failed';
+    } finally {
+      confirmBusy = false;
+    }
+  }
+
   async function handlePick(plan: Plan, price: PriceOfferSdk): Promise<void> {
     picking = true;
     pickError = null;
@@ -132,10 +186,10 @@
         await loadSubscription();
         onSelect?.({ plan, price });
       } else if (status?.paymentsEnabled) {
-        // Already has payment method — change plan
-        await getBridgeAuth().changePlan(plan.key, price);
-        await loadSubscription();
-        onSelect?.({ plan, price });
+        // Already has payment method — instant switch, so require an explicit
+        // confirmation (TBP-33). The actual changePlan runs in confirmPlanChange.
+        confirmTarget = { plan, price };
+        confirmError = null;
       } else {
         // Needs checkout — redirect to Stripe (or direct plan set when Stripe not configured)
         const base = getConfig().callbackUrl ?? `${window.location.origin}/auth/oauth-callback`;
@@ -192,6 +246,12 @@
       <Alert variant="error">{pickError}</Alert>
     {/if}
 
+    {#if successNotice}
+      <div class="bridge-plan-success" data-bridge-plan-success role="status">
+        <Alert variant="success">{successNotice}</Alert>
+      </div>
+    {/if}
+
     {#if uiState === 'payment-failed'}
       <div data-bridge-plan-payment-failed class="bridge-plan-payment-failed">
         <Alert variant="error">
@@ -253,7 +313,9 @@
                 {/if}
               </div>
 
-              {#if plan.description}
+              {#if planDescription}
+                {@render planDescription({ plan, isCurrent })}
+              {:else if plan.description}
                 <p class="bridge-plan-description">{plan.description}</p>
               {/if}
 
@@ -288,10 +350,52 @@
                   </p>
                 {/if}
               </div>
+
+              {#if planFooter}
+                {@render planFooter({ plan, isCurrent })}
+              {/if}
             </div>
           {/if}
         {/each}
       </div>
     {/if}
   {/if}
+
+  {#if confirmTarget}
+    <div class="bridge-plan-confirm-backdrop" data-bridge-plan-confirm role="dialog" aria-modal="true" aria-labelledby="bridge-plan-confirm-title" tabindex="-1">
+      <div class="bridge-plan-confirm">
+        <h3 id="bridge-plan-confirm-title" class="bridge-plan-confirm-title">Change plan?</h3>
+        <p class="bridge-plan-confirm-body">
+          Switch from <strong>{currentPlanName}</strong> to
+          <strong>{confirmTarget.plan.name}</strong> ({formatPrice(confirmTarget.price)}).
+        </p>
+        <p class="bridge-plan-confirm-note">
+          The change takes effect immediately — any price difference is prorated
+          on your next invoice.
+        </p>
+        {#if confirmError}
+          <Alert variant="error">{confirmError}</Alert>
+        {/if}
+        <div class="bridge-plan-confirm-actions">
+          <button
+            type="button"
+            class="bridge-btn-secondary"
+            disabled={confirmBusy}
+            onclick={() => (confirmTarget = null)}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            class="bridge-btn-primary"
+            data-bridge-plan-confirm-btn
+            disabled={confirmBusy}
+            onclick={confirmPlanChange}
+          >
+            {confirmBusy ? 'Switching…' : 'Confirm change'}
+          </button>
+        </div>
+      </div>
+    </div>
+  {/if}
 </div>

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

@@ -8,7 +8,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     /**
      * 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'`.
+     * requested one isn't offered by any plan. Default: `'year'` (TBP-34 —
+     * annual is the default; apps without yearly prices fall back gracefully).
      */
     defaultInterval?: BillingInterval;
     onSelect?: (detail: {
@@ -23,6 +24,17 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
         interval: BillingInterval;
         onPick: (price: PriceOfferSdk) => void;
     }]>;
+    /** Replaces the built-in description paragraph of the default card —
+     *  custom copy or markup per plan without reimplementing the whole card. */
+    planDescription?: Snippet<[{
+        plan: Plan;
+        isCurrent: boolean;
+    }]>;
+    /** Rendered at the bottom of the default card, after the price buttons. */
+    planFooter?: Snippet<[{
+        plan: Plan;
+        isCurrent: boolean;
+    }]>;
     emptyState?: Snippet;
     loadingState?: Snippet;
 }

package/dist/client/components/subscription/plan-selector.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/client/components/subscription/plan-selector.test.js

@@ -0,0 +1,391 @@
+// PlanSelector — annual-default interval (TBP-34) + plan-change confirmation (TBP-33).
+//
+// HARNESS NOTE: bridge-svelte's vitest config (vitest.config.ts) runs in a
+// `node` environment with no Svelte compiler plugin and no DOM (jsdom /
+// @testing-library/svelte are NOT installed anywhere in the workspace), so the
+// PlanSelector.svelte component cannot be mounted here. Following the
+// established pattern in billing-notice-gate.test.ts, this file exercises an
+// EXACT replica of the component's script-block decisions, with the external
+// singletons (getBridgeAuth / loadSubscription / getConfig / window.location)
+// injected as mocks instead of module-mocking `bridge-instance.js`.
+//
+// The replicated logic mirrors PlanSelector.svelte:
+//   - availableIntervals   ($derived.by, paid prices only, stable order)
+//   - selectedInterval     (override → defaultInterval → first available)
+//   - showIntervalTabs     (≥2 intervals)
+//   - pricesForInterval    (matching interval + interval-agnostic free prices)
+//   - handlePick           (free → selectFreePlan; paymentsEnabled+paid →
+//                           confirm dialog, NO changePlan; else → checkout)
+//   - confirmPlanChange    (changePlan behind explicit confirm; success notice;
+//                           failure kept inside the dialog)
+//
+// If PlanSelector.svelte's script logic changes, update the replica here to
+// match — a drift between the two is a test bug, not a component bug.
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+// ── Replicas of the interval derivations (TBP-34) ────────────────────────────
+const INTERVAL_LABELS = {
+    day: 'Daily',
+    week: 'Weekly',
+    month: 'Monthly',
+    year: 'Yearly',
+};
+/** Mirror of the component's `availableIntervals` $derived.by. */
+function availableIntervals(plans) {
+    const order = ['day', 'week', 'month', 'year'];
+    return order.filter((i) => (plans ?? []).some((plan) => plan.prices.some((p) => p.amount > 0 && p.recurrenceInterval === i)));
+}
+/** Mirror of the component's `selectedInterval` $derived.by. */
+function selectedInterval(plans, defaultInterval, intervalOverride = null) {
+    const available = availableIntervals(plans);
+    if (intervalOverride && available.includes(intervalOverride)) {
+        return intervalOverride;
+    }
+    return available.includes(defaultInterval)
+        ? defaultInterval
+        : (available[0] ?? defaultInterval);
+}
+/** Mirror of the component's `showIntervalTabs` $derived. */
+function showIntervalTabs(plans) {
+    return availableIntervals(plans).length >= 2;
+}
+/** Mirror of the component's `pricesForInterval(plan)`. */
+function pricesForInterval(plan, selected) {
+    return plan.prices.filter((p) => p.amount === 0 || p.recurrenceInterval === selected);
+}
+function makeHarness(opts = {}) {
+    const { plans = null, status = null, callbackUrl, onSelect, successRedirect = '/subscription', cancelRedirect = '/subscription', } = opts;
+    // Injected singletons (component gets these from bridge-instance.js /
+    // config.store.js / window.location).
+    const auth = {
+        selectFreePlan: vi.fn(async (_planKey) => { }),
+        changePlan: vi.fn(async (_planKey, _price) => { }),
+        startCheckout: vi.fn(async (_planKey, _price, _urls) => ({ sessionId: null, checkoutUrl: null })),
+    };
+    const loadSubscription = vi.fn(async () => { });
+    const navigate = vi.fn((_url) => { });
+    const origin = 'http://localhost:5173';
+    // Mirrored component state.
+    const state = {
+        picking: false,
+        pickError: null,
+        confirmTarget: null,
+        confirmBusy: false,
+        confirmError: null,
+        successNotice: null,
+    };
+    let successTimer;
+    function formatPrice(price) {
+        return price.amount === 0
+            ? 'Free'
+            : `${price.amount} ${price.currency.toUpperCase()} / ${price.recurrenceInterval}`;
+    }
+    function showSuccess(message) {
+        state.successNotice = message;
+        clearTimeout(successTimer);
+        successTimer = setTimeout(() => (state.successNotice = null), 6000);
+    }
+    async function confirmPlanChange() {
+        if (!state.confirmTarget)
+            return;
+        const { plan, price } = state.confirmTarget;
+        state.confirmBusy = true;
+        state.confirmError = null;
+        try {
+            await auth.changePlan(plan.key, price);
+            await loadSubscription();
+            state.confirmTarget = null;
+            showSuccess(`You're now on ${plan.name} (${formatPrice(price)}).`);
+            onSelect?.({ plan, price });
+        }
+        catch (err) {
+            // AC: failure surfaces inside the dialog, not just a banner.
+            state.confirmError = err instanceof Error ? err.message : 'Plan change failed';
+        }
+        finally {
+            state.confirmBusy = false;
+        }
+    }
+    async function handlePick(plan, price) {
+        state.picking = true;
+        state.pickError = null;
+        try {
+            if (price.amount === 0 && !plan.hasCost) {
+                // Free plan — select directly (TBP-275 guards metered $0-base plans).
+                await auth.selectFreePlan(plan.key);
+                await loadSubscription();
+                onSelect?.({ plan, price });
+            }
+            else if (status?.paymentsEnabled) {
+                // Instant switch — requires explicit confirmation (TBP-33).
+                state.confirmTarget = { plan, price };
+                state.confirmError = null;
+            }
+            else {
+                const base = callbackUrl ?? `${origin}/auth/oauth-callback`;
+                const successUrl = `${base}?stripe_success=1&session_id={CHECKOUT_SESSION_ID}&redirect=${encodeURIComponent(successRedirect)}`;
+                const cancelUrl = `${base}?stripe_cancel=1&redirect=${encodeURIComponent(cancelRedirect)}`;
+                const session = await auth.startCheckout(plan.key, price, { successUrl, cancelUrl });
+                if (session.sessionId === null) {
+                    await loadSubscription();
+                    onSelect?.({ plan, price });
+                }
+                else {
+                    if (!session.checkoutUrl)
+                        throw new Error('Checkout session URL missing');
+                    navigate(session.checkoutUrl);
+                }
+            }
+        }
+        catch (err) {
+            state.pickError = err instanceof Error ? err.message : 'Something went wrong';
+        }
+        finally {
+            state.picking = false;
+        }
+    }
+    function cancelConfirm() {
+        // Mirror of the dialog's Cancel button: onclick={() => (confirmTarget = null)}
+        state.confirmTarget = null;
+    }
+    return { state, auth, loadSubscription, navigate, handlePick, confirmPlanChange, cancelConfirm };
+}
+// ── Fixtures ──────────────────────────────────────────────────────────────────
+const price = (amount, recurrenceInterval, currency = 'usd') => ({ id: `${recurrenceInterval}-${amount}`, amount, currency, recurrenceInterval });
+const plan = (key, prices, extra = {}) => ({
+    key,
+    name: key.charAt(0).toUpperCase() + key.slice(1),
+    prices,
+    ...extra,
+});
+const FREE_PLAN = plan('free', [price(0, 'month')]);
+const PRO_PLAN = plan('pro', [price(29, 'month'), price(290, 'year')]);
+const TEAM_PLAN = plan('team', [price(99, 'month'), price(990, 'year')]);
+const MONTHLY_ONLY_PLAN = plan('starter', [price(9, 'month')]);
+const METERED_ZERO_BASE_PLAN = plan('usage', [price(0, 'month')], { hasCost: true });
+// ── TBP-34: annual default interval + fallback ───────────────────────────────
+describe('PlanSelector interval selection (TBP-34)', () => {
+    describe('availableIntervals', () => {
+        it('collects only intervals with paid prices, in stable day→week→month→year order', () => {
+            const plans = [
+                plan('a', [price(290, 'year'), price(29, 'month')]),
+                plan('b', [price(2, 'week')]),
+            ];
+            expect(availableIntervals(plans)).toEqual(['week', 'month', 'year']);
+        });
+        it('ignores free (amount-0) prices — they are interval-agnostic and never add a tab', () => {
+            expect(availableIntervals([FREE_PLAN])).toEqual([]);
+            expect(availableIntervals([FREE_PLAN, MONTHLY_ONLY_PLAN])).toEqual(['month']);
+        });
+        it('returns [] for null or empty plan lists', () => {
+            expect(availableIntervals(null)).toEqual([]);
+            expect(availableIntervals([])).toEqual([]);
+        });
+    });
+    describe('selectedInterval default', () => {
+        it("defaults to 'year' when yearly prices exist (annual is the default tab)", () => {
+            expect(selectedInterval([PRO_PLAN, TEAM_PLAN], 'year')).toBe('year');
+        });
+        it('falls back to the first available interval when no plan offers yearly', () => {
+            expect(selectedInterval([MONTHLY_ONLY_PLAN], 'year')).toBe('month');
+        });
+        it('falls back to the requested default itself when no paid intervals exist at all', () => {
+            // Free-only app: no tabs are rendered, the value is inert but must not crash.
+            expect(selectedInterval([FREE_PLAN], 'year')).toBe('year');
+            expect(selectedInterval(null, 'year')).toBe('year');
+        });
+        it('honors a non-year defaultInterval prop when available', () => {
+            expect(selectedInterval([PRO_PLAN], 'month')).toBe('month');
+        });
+    });
+    describe('selectedInterval user override', () => {
+        it('uses the user-picked tab when it is still available', () => {
+            expect(selectedInterval([PRO_PLAN], 'year', 'month')).toBe('month');
+        });
+        it('discards an override that no longer matches any paid price (reconciles to default)', () => {
+            // e.g. plans reloaded and weekly prices disappeared.
+            expect(selectedInterval([PRO_PLAN], 'year', 'week')).toBe('year');
+        });
+    });
+    describe('showIntervalTabs', () => {
+        it('hides the toggle when fewer than two intervals are offered', () => {
+            expect(showIntervalTabs([MONTHLY_ONLY_PLAN])).toBe(false);
+            expect(showIntervalTabs([FREE_PLAN])).toBe(false);
+            expect(showIntervalTabs(null)).toBe(false);
+        });
+        it('shows the toggle when two or more intervals are offered', () => {
+            expect(showIntervalTabs([PRO_PLAN])).toBe(true);
+        });
+    });
+    describe('pricesForInterval', () => {
+        it('shows only the active-interval price plus interval-agnostic free prices', () => {
+            const mixed = plan('mixed', [price(0, 'month'), price(29, 'month'), price(290, 'year')]);
+            expect(pricesForInterval(mixed, 'year').map((p) => p.id)).toEqual([
+                'month-0',
+                'year-290',
+            ]);
+            expect(pricesForInterval(mixed, 'month').map((p) => p.id)).toEqual([
+                'month-0',
+                'month-29',
+            ]);
+        });
+        it('returns [] for a paid-only plan not offered under the active interval', () => {
+            expect(pricesForInterval(MONTHLY_ONLY_PLAN, 'year')).toEqual([]);
+        });
+    });
+});
+// ── TBP-33: plan-change confirmation flow ────────────────────────────────────
+describe('PlanSelector pick flow + confirmation dialog (TBP-33)', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    describe('free plan (single-click, no confirmation)', () => {
+        it('calls selectFreePlan immediately and never opens the dialog', async () => {
+            const onSelect = vi.fn();
+            const h = makeHarness({ status: { paymentsEnabled: true }, onSelect });
+            await h.handlePick(FREE_PLAN, FREE_PLAN.prices[0]);
+            expect(h.auth.selectFreePlan).toHaveBeenCalledExactlyOnceWith('free');
+            expect(h.auth.changePlan).not.toHaveBeenCalled();
+            expect(h.auth.startCheckout).not.toHaveBeenCalled();
+            expect(h.loadSubscription).toHaveBeenCalledOnce();
+            expect(h.state.confirmTarget).toBeNull();
+            expect(onSelect).toHaveBeenCalledExactlyOnceWith({
+                plan: FREE_PLAN,
+                price: FREE_PLAN.prices[0],
+            });
+        });
+        it('TBP-275: a $0-base plan with hasCost is NOT treated as free — it needs confirm/checkout', async () => {
+            const h = makeHarness({ status: { paymentsEnabled: true } });
+            await h.handlePick(METERED_ZERO_BASE_PLAN, METERED_ZERO_BASE_PLAN.prices[0]);
+            expect(h.auth.selectFreePlan).not.toHaveBeenCalled();
+            expect(h.state.confirmTarget).toEqual({
+                plan: METERED_ZERO_BASE_PLAN,
+                price: METERED_ZERO_BASE_PLAN.prices[0],
+            });
+        });
+    });
+    describe('paid pick with paymentsEnabled (confirmation gate)', () => {
+        it('opens the dialog and does NOT call changePlan until confirmed', async () => {
+            const onSelect = vi.fn();
+            const h = makeHarness({ status: { paymentsEnabled: true }, onSelect });
+            await h.handlePick(PRO_PLAN, PRO_PLAN.prices[1]);
+            expect(h.state.confirmTarget).toEqual({ plan: PRO_PLAN, price: PRO_PLAN.prices[1] });
+            expect(h.state.confirmError).toBeNull();
+            expect(h.auth.changePlan).not.toHaveBeenCalled();
+            expect(h.auth.startCheckout).not.toHaveBeenCalled();
+            expect(h.loadSubscription).not.toHaveBeenCalled();
+            expect(onSelect).not.toHaveBeenCalled();
+        });
+        it('re-opening the dialog clears a stale confirmError from a previous attempt', async () => {
+            const h = makeHarness({ status: { paymentsEnabled: true } });
+            h.state.confirmError = 'old failure';
+            await h.handlePick(PRO_PLAN, PRO_PLAN.prices[0]);
+            expect(h.state.confirmError).toBeNull();
+        });
+        it('cancel closes the dialog without ever calling changePlan', async () => {
+            const h = makeHarness({ status: { paymentsEnabled: true } });
+            await h.handlePick(PRO_PLAN, PRO_PLAN.prices[0]);
+            h.cancelConfirm();
+            expect(h.state.confirmTarget).toBeNull();
+            expect(h.auth.changePlan).not.toHaveBeenCalled();
+            // A later confirm click on the closed dialog must be a no-op.
+            await h.confirmPlanChange();
+            expect(h.auth.changePlan).not.toHaveBeenCalled();
+        });
+    });
+    describe('confirmPlanChange success', () => {
+        it('calls changePlan with the picked plan/price, refreshes, closes, notifies', async () => {
+            const onSelect = vi.fn();
+            const h = makeHarness({ status: { paymentsEnabled: true }, onSelect });
+            await h.handlePick(PRO_PLAN, PRO_PLAN.prices[1]); // 290 usd / year
+            await h.confirmPlanChange();
+            expect(h.auth.changePlan).toHaveBeenCalledExactlyOnceWith('pro', PRO_PLAN.prices[1]);
+            expect(h.loadSubscription).toHaveBeenCalledOnce();
+            expect(h.state.confirmTarget).toBeNull();
+            expect(h.state.confirmBusy).toBe(false);
+            expect(h.state.confirmError).toBeNull();
+            expect(h.state.successNotice).toBe("You're now on Pro (290 USD / year).");
+            expect(onSelect).toHaveBeenCalledExactlyOnceWith({
+                plan: PRO_PLAN,
+                price: PRO_PLAN.prices[1],
+            });
+        });
+        it('auto-dismisses the success notice after 6 seconds', async () => {
+            const h = makeHarness({ status: { paymentsEnabled: true } });
+            await h.handlePick(PRO_PLAN, PRO_PLAN.prices[0]);
+            await h.confirmPlanChange();
+            expect(h.state.successNotice).not.toBeNull();
+            vi.advanceTimersByTime(5999);
+            expect(h.state.successNotice).not.toBeNull();
+            vi.advanceTimersByTime(1);
+            expect(h.state.successNotice).toBeNull();
+        });
+    });
+    describe('confirmPlanChange failure', () => {
+        it('keeps the dialog open with the error inside it — no crash, no success path', async () => {
+            const onSelect = vi.fn();
+            const h = makeHarness({ status: { paymentsEnabled: true }, onSelect });
+            h.auth.changePlan.mockRejectedValueOnce(new Error('card declined'));
+            await h.handlePick(PRO_PLAN, PRO_PLAN.prices[0]);
+            await expect(h.confirmPlanChange()).resolves.toBeUndefined();
+            expect(h.state.confirmError).toBe('card declined');
+            expect(h.state.confirmTarget).toEqual({ plan: PRO_PLAN, price: PRO_PLAN.prices[0] });
+            expect(h.state.confirmBusy).toBe(false);
+            expect(h.state.successNotice).toBeNull();
+            expect(h.loadSubscription).not.toHaveBeenCalled();
+            expect(onSelect).not.toHaveBeenCalled();
+        });
+        it('falls back to a generic message for non-Error rejections', async () => {
+            const h = makeHarness({ status: { paymentsEnabled: true } });
+            h.auth.changePlan.mockRejectedValueOnce('boom');
+            await h.handlePick(PRO_PLAN, PRO_PLAN.prices[0]);
+            await h.confirmPlanChange();
+            expect(h.state.confirmError).toBe('Plan change failed');
+        });
+        it('retry after failure succeeds and closes the dialog', async () => {
+            const h = makeHarness({ status: { paymentsEnabled: true } });
+            h.auth.changePlan.mockRejectedValueOnce(new Error('transient'));
+            await h.handlePick(PRO_PLAN, PRO_PLAN.prices[0]);
+            await h.confirmPlanChange();
+            expect(h.state.confirmError).toBe('transient');
+            await h.confirmPlanChange();
+            expect(h.auth.changePlan).toHaveBeenCalledTimes(2);
+            expect(h.state.confirmTarget).toBeNull();
+            expect(h.state.confirmError).toBeNull();
+            expect(h.state.successNotice).toContain("You're now on Pro");
+        });
+    });
+    describe('paid pick without paymentsEnabled (checkout keeps single-click behavior)', () => {
+        it('goes straight to startCheckout — no confirmation dialog', async () => {
+            const h = makeHarness({ status: { paymentsEnabled: false } });
+            h.auth.startCheckout.mockResolvedValueOnce({
+                sessionId: 'cs_123',
+                checkoutUrl: 'https://checkout.stripe.test/cs_123',
+            });
+            await h.handlePick(PRO_PLAN, PRO_PLAN.prices[0]);
+            expect(h.state.confirmTarget).toBeNull();
+            expect(h.auth.changePlan).not.toHaveBeenCalled();
+            expect(h.auth.startCheckout).toHaveBeenCalledOnce();
+            expect(h.navigate).toHaveBeenCalledExactlyOnceWith('https://checkout.stripe.test/cs_123');
+        });
+        it('sessionId === null (Stripe not configured) refreshes and fires onSelect directly', async () => {
+            const onSelect = vi.fn();
+            const h = makeHarness({ status: null, onSelect });
+            h.auth.startCheckout.mockResolvedValueOnce({ sessionId: null, checkoutUrl: null });
+            await h.handlePick(PRO_PLAN, PRO_PLAN.prices[0]);
+            expect(h.loadSubscription).toHaveBeenCalledOnce();
+            expect(h.navigate).not.toHaveBeenCalled();
+            expect(onSelect).toHaveBeenCalledExactlyOnceWith({ plan: PRO_PLAN, price: PRO_PLAN.prices[0] });
+        });
+        it('a session without a checkoutUrl surfaces a pickError banner', async () => {
+            const h = makeHarness({ status: null });
+            h.auth.startCheckout.mockResolvedValueOnce({ sessionId: 'cs_456', checkoutUrl: null });
+            await h.handlePick(PRO_PLAN, PRO_PLAN.prices[0]);
+            expect(h.state.pickError).toBe('Checkout session URL missing');
+            expect(h.navigate).not.toHaveBeenCalled();
+            expect(h.state.picking).toBe(false);
+        });
+    });
+});

package/dist/core/bridge.test.js

@@ -33,15 +33,23 @@ afterEach(() => {
 });
 // Stub the bridge-instance singleton so bridge.app.plans.load() doesn't
 // require a real BridgeAuth in vitest. The actual load impl reads from
-// getBridgeAuth() which throws when uninitialized.
-vi.mock('./bridge-instance.js', () => ({
-    getBridgeAuth: () => ({
-        getPlans: async () => [
-            { key: 'free', name: 'Free' },
-            { key: 'pro', name: 'Pro' },
-        ],
-    }),
-}));
+// getBridgeAuth() which throws when uninitialized. `tokenStore` must be
+// exported too — bridge.ts derives the JWT user fallback from it at
+// module-eval time.
+vi.mock('./bridge-instance.js', async () => {
+    const { writable } = await import('svelte/store');
+    return {
+        tokenStore: writable(null),
+        subscriptionStore: writable({ status: null, plans: null, loading: false, error: null }),
+        loadSubscription: async () => { },
+        getBridgeAuth: () => ({
+            getPlans: async () => [
+                { key: 'free', name: 'Free' },
+                { key: 'pro', name: 'Pro' },
+            ],
+        }),
+    };
+});
 describe('bridge surface (Phase 4, TBP-319)', () => {
     it('initial slice stores are null until a snapshot lands', () => {
         expect(get(bridge.app.branding)).toBeNull();

package/dist/flags/bootstrap.test.js

@@ -19,7 +19,6 @@
 // the BillingAttributeProvider without spinning up real billing stores.
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { writable } from 'svelte/store';
-let _tokenStore;
 function makeJwt(claims) {
     // Browser-compatible base64url (no padding). atob lives in Node 18+ and in the
     // bootstrap module's decodeJwtPayload path.
@@ -36,12 +35,15 @@ function makeJwt(claims) {
 // ── Mocks ───────────────────────────────────────────────────────────────────
 // Mock the bridge-instance module so we don't bring up real BridgeAuth.
 // `tokenStore` is a real svelte writable so we can push JWT-shaped values
-// during the test; the rest is a safe stub.
-vi.mock('../core/bridge-instance.js', () => {
+// during the test; the rest is a safe stub. The store must be created INSIDE
+// the hoisted factory: bridge.ts derives from `tokenStore` at module-eval
+// time (during import), before any test-body binding would initialize.
+vi.mock('../core/bridge-instance.js', async () => {
+    const { writable } = await import('svelte/store');
     return {
-        get tokenStore() {
-            return _tokenStore;
-        },
+        tokenStore: writable(null),
+        subscriptionStore: writable({ status: null, plans: null, loading: false, error: null }),
+        loadSubscription: async () => { },
         getBridgeAuth: () => ({
             getApiContext: () => ({ appId: 'app-1', accessToken: null }),
             refreshTokens: async () => { },
@@ -82,7 +84,7 @@ vi.mock('@nebulr-group/bridge-auth-core', async (importOriginal) => {
 // bootstrap (which fires `void fetch(...)`) doesn't write to a real network.
 // Bootstrap swallows the resulting non-ok response, so a 500 is fine.
 beforeEach(() => {
-    _tokenStore = writable(null);
+    _tokenStore.set(null);
     vi.stubGlobal('fetch', vi.fn(async () => 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ({ ok: false, status: 500, json: async () => [] })));
@@ -91,6 +93,9 @@ beforeEach(() => {
 // Imported AFTER the mocks above so the bootstrap module picks up the stubs.
 import { createBridgeFlags } from './bootstrap.js';
 import { AuthAttributeProvider, BillingAttributeProvider } from '@nebulr-group/bridge-auth-core';
+import { tokenStore as _mockedTokenStore } from '../core/bridge-instance.js';
+// The mocked writable, typed for test-side .set() pushes.
+const _tokenStore = _mockedTokenStore;
 // After the TBP-Live-Channel-Unification hoist, the realtime client lives
 // in `core/bridge-runtime.ts` and is owned by `<BridgeBootstrap />`. Tests
 // don't start the core runtime so `getBridgeRealtime()` returns undefined

package/dist/styles.css

@@ -968,6 +968,60 @@
   color: var(--bridge-muted, #64748b);
 }
 
+/* Plan-change confirmation dialog + success notice (TBP-33) */
+.bridge-plan-success {
+  margin-bottom: 1rem;
+}
+
+.bridge-plan-confirm-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.45);
+  display: grid;
+  place-items: center;
+  z-index: 1000;
+  padding: 1.25rem;
+}
+
+.bridge-plan-confirm {
+  background: var(--bridge-bg, #fff);
+  border: 1px solid var(--bridge-border, #e2e8f0);
+  border-radius: var(--bridge-border-radius, 0.5rem);
+  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
+  max-width: 26rem;
+  width: 100%;
+  padding: 1.25rem 1.25rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.bridge-plan-confirm-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.bridge-plan-confirm-body {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.bridge-plan-confirm-note {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--bridge-muted, #64748b);
+  line-height: 1.5;
+}
+
+.bridge-plan-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
 .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.7",
+  "version": "0.4.0-beta.9",
   "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",
@@ -55,19 +55,16 @@
   "peerDependencies": {
     "svelte": "^5.0.0",
     "@sveltejs/kit": "^2.0.0",
-    "@simplewebauthn/browser": ">=10.0.0",
     "@stripe/stripe-js": ">=4.0.0"
   },
   "peerDependenciesMeta": {
-    "@simplewebauthn/browser": {
-      "optional": true
-    },
     "@stripe/stripe-js": {
       "optional": true
     }
   },
   "dependencies": {
-    "@nebulr-group/bridge-auth-core": "0.4.0-beta.8"
+    "@simplewebauthn/browser": "^13.0.0",
+    "@nebulr-group/bridge-auth-core": "0.4.0-beta.10"
   },
   "devDependencies": {
     "@sveltejs/kit": "^2.16.0",
@@ -77,7 +74,7 @@
     "publint": "^0.3.2",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
-    "typescript": "^5.0.0",
+    "typescript": "^6.0.0",
     "vite": "^6.2.6",
     "vitest": "^4.1.4"
   },