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

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/subscription/BridgeBillingNotice.svelte

@@ -52,9 +52,9 @@
   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 +65,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) {

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

@@ -64,9 +64,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 +77,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.
     }
@@ -96,12 +91,28 @@
   });
 
   const warningLevel = $derived(snapshot?.warningLevel ?? null);
+  // TBP-275 — `metered` quotas bill overage instead of blocking. Prefer the
+  // server-authoritative `overcap` flag (handles limit === 0 pure-per-unit)
+  // over a UI-derived `used > limit`.
+  const isMetered = $derived(snapshot?.policy === 'metered');
   const overCap = $derived(
-    snapshot ? snapshot.used > snapshot.limit : false,
+    snapshot
+      ? (snapshot.overcap ?? snapshot.used > snapshot.limit)
+      : false,
+  );
+  // Hard caps show only at the warning thresholds. Metered quotas also show
+  // once billing has engaged (overCap), even with no warningLevel — that's the
+  // live "you're now being billed for overage" state.
+  const visible = $derived(
+    snapshot !== undefined && (warningLevel !== null || (isMetered && overCap)),
   );
-  const visible = $derived(snapshot !== undefined && warningLevel !== null);
+  // Metered never blocks, so it never renders as 'critical' — it's informational.
   const severity = $derived<Severity>(
-    warningLevel === 'critical' || overCap ? 'critical' : 'warn',
+    isMetered
+      ? 'warn'
+      : warningLevel === 'critical' || overCap
+        ? 'critical'
+        : 'warn',
   );
   const displayLabel = $derived(label ?? snapshot?.label ?? metric);
   const percent = $derived(
@@ -109,13 +120,58 @@
       ? Math.min(100, Math.round((snapshot.used / snapshot.limit) * 100))
       : 0,
   );
+  // Meter bar is meaningless for pure per-unit metered (limit 0) — hide it there.
+  const showMeter = $derived(!!snapshot && snapshot.limit > 0);
+
+  /** Format an estimated cost like "$1.00" / "1.00 SEK". */
+  function formatCost(amount: number | undefined, currency: string | undefined): string {
+    if (amount === undefined) return '';
+    const cur = (currency ?? '').toUpperCase();
+    try {
+      return new Intl.NumberFormat(undefined, {
+        style: 'currency',
+        currency: cur || 'USD',
+      }).format(amount);
+    } catch {
+      // Unknown currency code → fall back to "<amount> <CUR>".
+      return `${amount.toFixed(2)}${cur ? ` ${cur}` : ''}`;
+    }
+  }
 
   function getCopy(
     snap: QuotaSnapshot | undefined,
     admin: boolean,
   ): { title: string; body: string; cta?: string } {
     if (!snap) return { title: '', body: '' };
-    const over = snap.used > snap.limit;
+
+    // TBP-275 — metered: live usage + projected cost, never a blocking message.
+    if (snap.policy === 'metered') {
+      const overUnits = snap.limit > 0 ? Math.max(0, snap.used - snap.limit) : snap.used;
+      const cost = formatCost(snap.overageEstimate, snap.currency);
+      const costSuffix = cost ? ` · ~${cost} estimated this period` : '';
+      if (snap.limit > 0) {
+        // included allotment + overage
+        if (overUnits > 0) {
+          return {
+            title: `${displayLabel} overage`,
+            body: `${overUnits.toLocaleString()} over your ${snap.limit.toLocaleString()} included${costSuffix}.`,
+          };
+        }
+        // approaching the included allotment (warningLevel drove visibility)
+        const unit = formatCost(snap.unitAmount, snap.currency);
+        return {
+          title: `${displayLabel} approaching included limit`,
+          body: `You've used ${snap.used.toLocaleString()} of ${snap.limit.toLocaleString()} included${unit ? ` — extra usage is billed at ${unit}/unit` : ''}.`,
+        };
+      }
+      // pure per-unit (limit 0) — billed from unit 1
+      return {
+        title: `${displayLabel} usage`,
+        body: `${snap.used.toLocaleString()} ${displayLabel}${costSuffix}.`,
+      };
+    }
+
+    const over = snap.overcap ?? snap.used > snap.limit;
     const remaining = Math.max(0, snap.remaining);
     if (over) {
       return admin
@@ -178,9 +234,11 @@
     <div class="bqb-content">
       <strong class="bqb-title">{copy.title}</strong>
       <span class="bqb-body">{copy.body}</span>
-      <div class="bqb-meter" aria-hidden="true">
-        <div class="bqb-meter-fill" style={`width: ${Math.min(100, percent)}%`}></div>
-      </div>
+      {#if showMeter}
+        <div class="bqb-meter" aria-hidden="true">
+          <div class="bqb-meter-fill" style={`width: ${Math.min(100, percent)}%`}></div>
+        </div>
+      {/if}
     </div>
     {#if copy.cta && isBillingAdmin}
       <button type="button" class="bqb-cta" onclick={handleAction}>{copy.cta}</button>

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

@@ -121,8 +121,13 @@
     picking = true;
     pickError = null;
     try {
-      if (price.amount === 0) {
-        // Free plan — select directly
+      if (price.amount === 0 && !plan.hasCost) {
+        // Free plan — select directly. TBP-275: guard on `!plan.hasCost` so a
+        // $0-base plan that carries METERED pricing is NOT treated as free —
+        // it falls through to checkout/changePlan below, capturing a payment
+        // method so per-unit overage can be billed (US-C). Without this guard a
+        // metered $0-base plan would hit selectFreePlan, which the backend now
+        // rejects ("has a cost — use the checkout endpoint instead").
         await getBridgeAuth().selectFreePlan(plan.key);
         await loadSubscription();
         onSelect?.({ plan, price });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebulr-group/bridge-svelte",
-  "version": "0.4.0-beta.6",
+  "version": "0.4.0-beta.8",
   "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,7 +55,7 @@
   "peerDependencies": {
     "svelte": "^5.0.0",
     "@sveltejs/kit": "^2.0.0",
-    "@simplewebauthn/browser": ">=10.0.0",
+    "@simplewebauthn/browser": "^13",
     "@stripe/stripe-js": ">=4.0.0"
   },
   "peerDependenciesMeta": {
@@ -67,7 +67,7 @@
     }
   },
   "dependencies": {
-    "@nebulr-group/bridge-auth-core": "0.4.0-beta.7"
+    "@nebulr-group/bridge-auth-core": "0.4.0-beta.9"
   },
   "devDependencies": {
     "@sveltejs/kit": "^2.16.0",
@@ -77,7 +77,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"
   },