@nebulr-group/bridge-svelte 0.9.0-beta.3 → 0.9.0-beta.5

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

@@ -284,7 +284,7 @@
 
   .bbn-cta:hover {
     background: currentColor;
-    color: white;
+    color: var(--bridge-bg, #ffffff);
   }
 
   /* Chassis variants */
@@ -300,28 +300,29 @@
 
   .bbn-chassis-card {
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0.08);
+    border: 1px solid var(--bridge-border, #d1d5db);
   }
 
   /* Severity tokens */
   .bbn-severity-info {
-    background: #dbeafe;
-    color: #1e40af;
+    background: var(--bridge-alert-info-bg, #eff6ff);
+    color: var(--bridge-alert-info-fg, #1e40af);
   }
 
   .bbn-severity-warn {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--bridge-alert-warning-bg, #fffbeb);
+    color: var(--bridge-alert-warning-fg, #92400e);
   }
 
   .bbn-severity-critical {
-    background: #fee2e2;
-    color: #991b1b;
+    background: var(--bridge-alert-error-bg, #fef2f2);
+    color: var(--bridge-alert-error-fg, #991b1b);
   }
 
+  /* Locked inverts the surface: foreground as background, and vice versa. */
   .bbn-severity-locked {
-    background: #1f2937;
-    color: #f9fafb;
+    background: var(--bridge-foreground, #111827);
+    color: var(--bridge-bg, #ffffff);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -339,7 +340,7 @@
     align-items: center;
     justify-content: center;
     padding: 1rem;
-    background: rgba(15, 23, 42, 0.72);
+    background: var(--bridge-paywall-bg, rgba(15, 23, 42, 0.72));
     backdrop-filter: blur(2px);
   }
 
@@ -351,8 +352,8 @@
     width: 100%;
     padding: 1.5rem;
     border-radius: 0.75rem;
-    background: #1f2937;
-    color: #f9fafb;
+    background: var(--bridge-foreground, #111827);
+    color: var(--bridge-bg, #ffffff);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
     text-align: center;
   }
@@ -381,7 +382,7 @@
   }
 
   .bbl-cta:hover {
-    background: #f9fafb;
-    color: #1f2937;
+    background: var(--bridge-bg, #ffffff);
+    color: var(--bridge-foreground, #111827);
   }
 </style>

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

@@ -81,7 +81,7 @@
     overflow-y: auto;
     padding: 2rem;
     border-radius: 0.75rem;
-    background: var(--bridge-paywall-panel-bg, #ffffff);
+    background: var(--bridge-paywall-panel-bg, var(--bridge-bg, #ffffff));
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
   }
 

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

@@ -283,7 +283,7 @@
     margin-top: 0.25rem;
     width: 100%;
     height: 0.375rem;
-    background: rgba(0, 0, 0, 0.08);
+    background: color-mix(in srgb, currentColor 15%, transparent);
     border-radius: 999px;
     overflow: hidden;
   }
@@ -309,7 +309,7 @@
 
   .bqb-cta:hover {
     background: currentColor;
-    color: white;
+    color: var(--bridge-bg, #ffffff);
   }
 
   /* Chassis — rail only for US-11. */
@@ -320,13 +320,13 @@
 
   /* Severity tokens — mirror BridgeBillingNotice for visual consistency. */
   .bqb-severity-warn {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--bridge-alert-warning-bg, #fffbeb);
+    color: var(--bridge-alert-warning-fg, #92400e);
   }
 
   .bqb-severity-critical {
-    background: #fee2e2;
-    color: #991b1b;
+    background: var(--bridge-alert-error-bg, #fef2f2);
+    color: var(--bridge-alert-error-fg, #991b1b);
   }
 
   @media (prefers-reduced-motion: reduce) {

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

@@ -79,38 +79,38 @@
     font-size: 0.75rem;
     font-weight: 500;
     text-transform: lowercase;
-    background: #e5e7eb;
-    color: #374151;
+    background: var(--bridge-muted-bg, var(--bridge-bg-muted, #f3f4f6));
+    color: var(--bridge-foreground, #111827);
   }
 
   .bss-badge-active {
-    background: #d1fae5;
-    color: #065f46;
+    background: var(--bridge-alert-success-bg, #f0fdf4);
+    color: var(--bridge-alert-success-fg, #166534);
   }
 
   .bss-badge-trial {
-    background: #dbeafe;
-    color: #1e40af;
+    background: var(--bridge-alert-info-bg, #eff6ff);
+    color: var(--bridge-alert-info-fg, #1e40af);
   }
 
   .bss-badge-past_due,
   .bss-badge-cancel_at_period_end {
-    background: #fef3c7;
-    color: #92400e;
+    background: var(--bridge-alert-warning-bg, #fffbeb);
+    color: var(--bridge-alert-warning-fg, #92400e);
   }
 
   .bss-badge-canceled {
-    background: #fee2e2;
-    color: #991b1b;
+    background: var(--bridge-alert-error-bg, #fef2f2);
+    color: var(--bridge-alert-error-fg, #991b1b);
   }
 
   .bss-loading,
   .bss-empty {
-    color: #6b7280;
+    color: var(--bridge-muted, #6b7280);
     font-style: italic;
   }
 
   .bss-error {
-    color: #b91c1c;
+    color: var(--bridge-alert-error-fg, #991b1b);
   }
 </style>

package/dist/core/bridge-runtime.js

@@ -176,8 +176,8 @@ export function startBridgeRuntime(options = {}) {
         // of parking. A signed-out session has nothing to refresh. Loop safety:
         // the refreshed token lands in the tokenStore subscription below, whose
         // reauthorize() is a no-op while that episode is still connecting, and
-        // the reconnect it produces is flagged self-induced so setOnOpen does not
-        // refresh a second time.
+        // the reconcile after the reconnect (TBP-700) mints once more and stops
+        // there — a token that changes nothing does not replace the socket.
         refreshAuthToken: options.realtime?.refreshAuthToken ??
             (async () => {
                 if (!_currentAuthToken)
@@ -191,11 +191,10 @@ export function startBridgeRuntime(options = {}) {
                 }
             }),
     });
-    let _connectedOnce = false;
-    // Set just before we call _realtime.reauthorize() so the resulting
-    // reconnect's setOnOpen handler knows the token is already fresh and skips
-    // its proactive refresh — see the loop note in setOnOpen below.
-    let _reauthInFlight = false;
+    // TBP-700 — bookkeeping for reconcileUserState() below.
+    let _reconciling = 0;
+    let _reconcileSawChange = false;
+    let _reconcileSwapsInARow = 0;
     // TBP-660 — catch up after ANY reconnect, including the one our own
     // reauthorize() causes. AppSync Events has no replay, so a push published
     // while the socket is being replaced is gone for good — and a plan change
@@ -240,11 +239,12 @@ export function startBridgeRuntime(options = {}) {
                 return;
             const data = (await res.json());
             // Stopped, or the session changed while this was in flight: the answer
-            // describes a session we no longer have. A token change reauthorizes,
-            // and that reconnect catches up again with the right token.
-            if (_realtime !== rt || _currentAuthToken !== token)
+            // describes a session we no longer have. A new token for the SAME user,
+            // workspace and app is not a new session — the reconcile below rotates
+            // the token on every open, concurrently with this read (TBP-700).
+            if (_realtime !== rt || !sameSession(token, _currentAuthToken))
                 return;
-            const { planChanged, entitlementsChanged } = applyCatchUpSnapshot(data);
+            const { planChanged, entitlementsChanged, initial } = applyCatchUpSnapshot(data);
             if (entitlementsChanged && data?.tenant?.entitlements) {
                 // Keep auth-core's copy (what flag targeting reads) in step too.
                 try {
@@ -254,6 +254,14 @@ export function startBridgeRuntime(options = {}) {
             }
             // TBP-654 — a recovered change must reach the route guard exactly like
             // the push it replaces would have. Nothing changed → nothing to redo.
+            //
+            // TBP-700 — and filling empty stores for the first time recovers no
+            // change: nothing was decided against a plan this page never knew. It
+            // used to count as a plan change, which refreshed the token and swapped
+            // the socket right after every first connect — the window a role change
+            // was lost in on stage. The access token is reconciled below instead.
+            if (initial)
+                return;
             if (planChanged)
                 authorizationChanged('subscription.plan_changed');
             else if (entitlementsChanged)
@@ -335,7 +343,7 @@ export function startBridgeRuntime(options = {}) {
                 const data = (await res.json());
                 // Stopped, or the session changed while this was in flight: the
                 // answer describes a workspace we no longer have.
-                if (_realtime !== rt || _currentAuthToken !== token)
+                if (_realtime !== rt || !sameSession(token, _currentAuthToken))
                     return;
                 if (quotas.getAll().get(metric) !== before)
                     return; // a push won the race
@@ -348,6 +356,57 @@ export function startBridgeRuntime(options = {}) {
             }
         }));
     };
+    // TBP-700 — the same repair for the user's own state: role, privileges,
+    // anything that bumps the server's tokenVersion and publishes
+    // `user.state_changed`. That push is lost exactly like the others when it
+    // is published while the socket is being replaced, and before this nothing
+    // recovered it: the session snapshot's `user` is read from the token being
+    // presented, and a reconnect our own reauthorize() caused skipped the token
+    // refresh (the TBP-644 loop guard). On stage a role change landed in that
+    // window in 4 of 4 runs once the first connect started swapping its socket
+    // (TBP-686), and the user kept the old role until a reload.
+    //
+    // The server's current tokenVersion and claims are only available by
+    // minting: the refresh endpoint reads them from the database, uncached. So
+    // every connect and reconnect ends with ONE refresh, and the token that
+    // comes back is compared with the one we had:
+    //   - same authority (only iat/exp/jti moved): nothing was missed, and the
+    //     socket that was just subscribed stays — no swap, so no loop;
+    //   - anything else (tv, role, plan…): that IS the missed change. It is
+    //     handled like the push would have been — the route guard re-checks and
+    //     the socket is re-authorized with the new token — and the reconnect
+    //     reconciles again, which then finds nothing new.
+    //
+    // `fresh: true` (auth-core, TBP-700) keeps this from joining a
+    // refresh that started before the channels were live, whose token could
+    // predate the very change we are looking for. An older auth-core ignores
+    // the option and joins it — best effort, as before.
+    const reconcileUserState = async () => {
+        if (_realtime !== rt || !_currentAuthToken)
+            return; // signed out: no user state
+        let auth;
+        try {
+            auth = getBridgeAuth();
+        }
+        catch {
+            return; // BridgeAuth not constructed — nothing to refresh with.
+        }
+        _reconciling += 1;
+        _reconcileSawChange = false;
+        try {
+            const refresh = auth.refreshTokens;
+            await refresh.call(auth, { fresh: true });
+        }
+        catch {
+            // Best-effort: the TOKEN_VERSION_STALE retry in bridgeAuthFetch and the
+            // next reconnect are the fallbacks.
+        }
+        finally {
+            _reconciling -= 1;
+            if (!_reconcileSawChange)
+                _reconcileSwapsInARow = 0;
+        }
+    };
     const requestCatchUp = () => {
         if (!_currentAuthToken)
             return; // signed out: no tenant or user scope to fetch
@@ -356,9 +415,9 @@ export function startBridgeRuntime(options = {}) {
             return;
         }
         _catchUpInFlight = true;
-        // Both repairs ride the one in-flight/queued gate, so an open storm still
-        // costs one round of requests, and neither can starve the other.
-        void Promise.all([catchUpSessionSnapshot(), catchUpQuotaSnapshots()]).catch(() => {
+        // Every repair rides the one in-flight/queued gate, so an open storm still
+        // costs one round of requests, and none can starve the others.
+        void Promise.all([catchUpSessionSnapshot(), catchUpQuotaSnapshots(), reconcileUserState()]).catch(() => {
             // Both halves are already best-effort internally; this is the backstop
             // that keeps a repair failure from surfacing as an unhandled rejection
             // in the consuming app. `.finally` below still drains the queue.
@@ -370,41 +429,29 @@ export function startBridgeRuntime(options = {}) {
             }
         });
     };
+    // TBP-700 — when to catch up. Everything above only works if it reads the
+    // server AFTER every channel is live: anything published before that is
+    // already in the database and the read sees it, anything after arrives on
+    // the socket. `open` fires on the FIRST accepted subscription, with the user
+    // channel possibly still pending, so an auth-core that can say "all
+    // subscribed" is asked; an older one falls back to `open`.
+    //
+    // One trigger for the initial connect, a genuine reconnect and the one our
+    // own reauthorize() causes alike: losing pushes is a property of the socket
+    // swap, whoever caused it (TBP-660), and the first connect is where the
+    // snapshot push always loses its race (TBP-686). `requestCatchUp` returns
+    // early when signed out and coalesces concurrent calls.
+    const realtimeWithSubscribed = _realtime;
+    const catchUpOnSubscribed = typeof realtimeWithSubscribed.setOnSubscribed === 'function';
+    if (catchUpOnSubscribed)
+        realtimeWithSubscribed.setOnSubscribed(() => requestCatchUp());
     _realtime.setOnOpen(() => {
         _setRealtimeStatus('open');
-        // On reconnect (not initial connect), proactively refresh tokens.
-        // If the WS was down when tokenVersion was bumped on the server, the
-        // client missed the user.state_changed broadcast. Refreshing here
-        // syncs tokens before the first post-reconnect request can fail with
-        // TOKEN_VERSION_STALE.
-        //
-        // EXCEPT when this reconnect was caused by our OWN reauthorize() below
-        // (a token-only refresh). In that case the token is already current, so
-        // refreshing again would mint yet another JWT, which the tokenStore
-        // subscription would see as a change and reauthorize() again → reconnect
-        // → setOnOpen → refresh → … an unbounded loop that hammers /auth/token
-        // (observed ~32 cycles/sec, jamming the page's main thread and stalling
-        // every downstream wait). Only genuine, externally-triggered reconnects
-        // (network blips, server restarts) should trigger the catch-up refresh.
-        const causedByReauthorize = _reauthInFlight;
-        _reauthInFlight = false;
-        if (_connectedOnce && !causedByReauthorize) {
-            getBridgeAuth().refreshTokens().catch(() => { });
-        }
-        // TBP-660 — the TOKEN refresh above is skipped for a self-induced
-        // reconnect; the STATE catch-up is not. Losing pushes is a property of
-        // the socket swap, whoever caused it, and the catch-up cannot loop.
-        //
-        // TBP-686 — and it runs on the FIRST connect too. It used to be gated on
-        // `_connectedOnce`, which read as "only repair a reconnect" — but the
-        // first connect is exactly where the snapshot goes missing: the server
-        // publishes it fire-and-forget during authorize, before the subscription
-        // is live, so it loses the race and there is nothing to replay. The result
-        // was a signed-in page with a null workspace id, name and branding for the
-        // whole session. `requestCatchUp` already returns early when signed out
-        // and coalesces concurrent calls, so this costs one request per session.
-        requestCatchUp();
-        _connectedOnce = true;
+        // No token refresh here any more (TBP-700): the reconcile in
+        // requestCatchUp mints on EVERY open, the self-induced ones included, and
+        // cannot loop — see reconcileUserState.
+        if (!catchUpOnSubscribed)
+            requestCatchUp();
         for (const fn of _onOpenSubs) {
             try {
                 fn();
@@ -437,10 +484,6 @@ export function startBridgeRuntime(options = {}) {
     // open/close/degraded mirrors above keep `realtimeStatus` working there).
     _realtime.setOnStatusChange?.((status) => {
         _setRealtimeStatusDetail(status);
-        // A parked client never opens, so a reauthorize that ended in a refusal
-        // must not leave the self-induced flag set for the next genuine reconnect.
-        if (status.state === 'unauthorized')
-            _reauthInFlight = false;
         for (const fn of _onStatusSubs) {
             try {
                 fn(status);
@@ -560,10 +603,7 @@ export function startBridgeRuntime(options = {}) {
     // (none → A) and sign-out (A → none). Keying this on rotation only meant a
     // session that signed in after page load kept the anonymous connection —
     // or stayed parked after a refusal — until something else reconnected it.
-    // Flagged self-induced so setOnOpen skips its catch-up refresh (see the
-    // loop note there): the token we reconnect with is already current.
     const reauthorizeForTokenChange = () => {
-        _reauthInFlight = true;
         void _realtime.reauthorize();
     };
     // `subscribe` emits the current value synchronously, before `start()` below.
@@ -572,7 +612,30 @@ export function startBridgeRuntime(options = {}) {
     _unsubscribeAuth = tokenStore.subscribe((tokens) => {
         const prevAuthToken = _currentAuthToken;
         _currentAuthToken = tokens?.accessToken ?? undefined;
-        const tokenChanged = _tokenSubscriptionLive && prevAuthToken !== _currentAuthToken;
+        let tokenChanged = _tokenSubscriptionLive && prevAuthToken !== _currentAuthToken;
+        let reauthorize = tokenChanged;
+        // TBP-700 — the token minted by the post-(re)connect reconcile.
+        if (tokenChanged && _reconciling > 0) {
+            if (_realtime.getState?.() === 'open' && sameAuthorization(prevAuthToken, _currentAuthToken)) {
+                // Only its timing moved: nothing was missed, every verdict taken with
+                // the old token stands, and the socket that was just subscribed has
+                // exactly this authority. Replacing it would open the very window
+                // this repair exists for — and loop.
+                tokenChanged = false;
+                reauthorize = false;
+            }
+            else {
+                // The server moved on while we were not listening: the lost
+                // `user.state_changed`, recovered. Re-authorize like the push would
+                // have — bounded, so a claim that differs on every mint cannot turn
+                // this into a reconnect loop.
+                _reconcileSawChange = true;
+                if (_reconcileSwapsInARow >= MAX_RECONCILE_SWAPS)
+                    reauthorize = false;
+                else
+                    _reconcileSwapsInARow += 1;
+            }
+        }
         // TBP-654 + TBP-653 — a new token (sign-in, refresh after a plan change,
         // sign-out) invalidates every verdict taken with the old one, and the
         // current route is re-evaluated: a signed-out session on a protected page
@@ -616,7 +679,7 @@ export function startBridgeRuntime(options = {}) {
         // setUserId is a no-op when the user is unchanged (token-only refresh),
         // and a setter-driven reconnect waits out a backoff and cannot lift a
         // parked refusal — so reauthorize explicitly on every value change.
-        if (tokenChanged)
+        if (reauthorize)
             reauthorizeForTokenChange();
     });
     _tokenSubscriptionLive = true;
@@ -739,6 +802,48 @@ export function __resetBridgeRuntime() {
     _realtime = undefined;
 }
 // ── helpers ─────────────────────────────────────────────────────────────────
+/**
+ * TBP-700 — how many reconcile-driven socket replacements may follow one
+ * another before the reconcile stops replacing the socket (it still adopts the
+ * token). A genuine missed change costs one; a second is a change published
+ * during that swap. More than a few in a row means a claim differs on every
+ * mint, and replacing the socket forever would be the TBP-644 loop again.
+ */
+const MAX_RECONCILE_SWAPS = 3;
+/** Claims that differ on every mint without meaning anything changed. */
+const PER_MINT_CLAIMS = new Set(['iat', 'exp', 'nbf', 'jti', 'auth_time']);
+/** Same user, workspace and app — the scope a catch-up read belongs to. */
+function sameSession(a, b) {
+    if (!a || !b)
+        return false;
+    if (a === b)
+        return true;
+    const ca = decodeJwtPayload(a);
+    const cb = decodeJwtPayload(b);
+    if (!ca || !cb)
+        return false;
+    return ca.sub === cb.sub && ca.tid === cb.tid && ca.aid === cb.aid;
+}
+/**
+ * TBP-700 — two tokens carry the same authority: every claim is equal except
+ * the per-mint ones. Unreadable tokens are never the same.
+ */
+function sameAuthorization(a, b) {
+    if (!a || !b)
+        return false;
+    const ca = decodeJwtPayload(a);
+    const cb = decodeJwtPayload(b);
+    if (!ca || !cb)
+        return false;
+    const keys = new Set([...Object.keys(ca), ...Object.keys(cb)]);
+    for (const k of keys) {
+        if (PER_MINT_CLAIMS.has(k))
+            continue;
+        if (JSON.stringify(ca[k]) !== JSON.stringify(cb[k]))
+            return false;
+    }
+    return true;
+}
 /** Decode a JWT payload without signature verification (client context only). */
 function decodeJwtPayload(token) {
     try {

package/dist/core/snapshot-stores.d.ts

@@ -104,6 +104,13 @@ export declare function applyEntitlementsChanged(msg: {
 export declare function applyCatchUpSnapshot(data: SessionSnapshotData): {
     planChanged: boolean;
     entitlementsChanged: boolean;
+    /**
+     * TBP-700 — the tenant stores were empty: this filled them for the first
+     * time rather than changing anything the page had already seen. The
+     * `*Changed` flags still say whether the values moved, so a caller can seed
+     * other copies; a first fill is not a recovered change.
+     */
+    initial: boolean;
 };
 /** Test-only: reset every snapshot store to `null`. Vitest hook. */
 export declare function __resetSnapshotStores(): void;

package/dist/core/snapshot-stores.js

@@ -104,6 +104,7 @@ export function applyCatchUpSnapshot(data) {
     const subAfter = get(_tenantSubscription);
     const entAfter = get(_tenantEntitlements);
     return {
+        initial: subBefore === null && entBefore === null,
         planChanged: (subBefore?.plan?.slug ?? null) !== (subAfter?.plan?.slug ?? null) ||
             (subBefore?.status ?? null) !== (subAfter?.status ?? null),
         entitlementsChanged: !sameFlags(entBefore, entAfter),

package/dist/styles.css

@@ -1,12 +1,54 @@
 /*
- * bridge-svelte default styles — plain baseline
+ * bridge-svelte default styles
  *
- * Import this file to get the default appearance for all bridge-svelte components:
  *   import '@nebulr-group/bridge-svelte/styles';
  *
- * Without this file, components render as plain unstyled HTML — the headless contract.
- * This file provides structural CSS only. Visual design (colors, shadows, radii) is
- * intentionally left to the consumer or a future design-system layer.
+ * Without this file, components render as plain unstyled HTML — the headless
+ * contract. With it, they get their structure plus a small default look driven
+ * entirely by the `--bridge-*` tokens below.
+ *
+ * ── THE TOKEN CONTRACT ────────────────────────────────────────────────────
+ *
+ * The `--bridge-*` custom properties are the supported way to restyle every
+ * Bridge page and component. Set them in your own stylesheet:
+ *
+ *   :root { --bridge-primary: #0f766e; --bridge-border-radius: 10px; }
+ *
+ * The defaults are declared on `:where(:root)`, which has zero specificity, so
+ * YOUR `:root` wins whatever order the two stylesheets load in. Set a token on
+ * a wrapper instead of `:root` to theme one area.
+ *
+ * Colour
+ *   --bridge-primary          primary buttons, selected tab, active workspace
+ *   --bridge-primary-hover    primary button hover (derived from primary)
+ *   --bridge-primary-fg       text on primary surfaces
+ *   --bridge-primary-light    tint behind the active workspace (derived)
+ *   --bridge-input-focus      input focus ring (defaults to primary)
+ *   --bridge-bg               dialogs, menus, panels
+ *   --bridge-foreground       text on those surfaces, emphasised names
+ *   --bridge-muted            secondary text: hints, table headings
+ *   --bridge-muted-bg         subtle fills: tab tracks, hovers, code boxes
+ *   --bridge-border           input, table, card and secondary button borders
+ *   --bridge-border-radius    corners of inputs, buttons, alerts, cards, dialogs
+ *   --bridge-overlay          backdrop behind dialogs
+ *   --bridge-alert-error-{bg,fg,border}     errors, critical billing notices
+ *   --bridge-alert-success-{bg,fg,border}   confirmations, active plan badge
+ *   --bridge-alert-info-{bg,fg,border}      info notices, trial badge
+ *   --bridge-alert-warning-{bg,fg,border}   warnings, quota nearing its limit
+ *
+ * Layout
+ *   --bridge-auth-page-padding     default container of the sign-in pages
+ *   --bridge-billing-page-width    subscription pages, <BridgePaywallPage>
+ *   --bridge-billing-page-padding  subscription pages, <BridgePaywallPage>
+ *   --bridge-paywall-bg            backdrop of <BridgePaywall> / the lockscreen
+ *   --bridge-paywall-panel-bg      panel of <BridgePaywall>
+ *
+ * Deprecated aliases — still honoured when set on :root, removed in a later
+ * major:  --bridge-primary-foreground → --bridge-primary-fg
+ *         --bridge-bg-muted           → --bridge-muted-bg
+ *
+ * Fonts and body text colour are not tokens: Bridge pages render inside your
+ * layout and inherit them.
  *
  * State selectors:
  *   [data-active="true"]    — active tab
@@ -19,21 +61,37 @@
  *   [data-variant="danger"] — danger variant
  */
 
-/* ─── CSS variable defaults (consumer can override at any scope) ─────────── */
+/* ─── Token defaults — zero specificity, so the app's :root always wins ──── */
 
-:root {
+:where(:root) {
+  /* Derived tokens (primary-hover, primary-fg, primary-light, input-focus,
+     muted-bg, paywall-panel-bg) have no value here on purpose: each falls back
+     to its source where it is used, so setting --bridge-primary on a wrapper
+     re-derives them for that wrapper too. */
   --bridge-primary: #4f46e5;
-  --bridge-primary-hover: #4338ca;
-  --bridge-primary-fg: #ffffff;
+  --bridge-bg: #ffffff;
+  --bridge-foreground: #111827;
+  --bridge-muted: #6b7280;
   --bridge-border: #d1d5db;
   --bridge-border-radius: 6px;
-  --bridge-input-focus: #4f46e5;
+  --bridge-overlay: rgba(15, 23, 42, 0.45);
   --bridge-alert-error-bg: #fef2f2;
   --bridge-alert-error-fg: #991b1b;
   --bridge-alert-error-border: #fca5a5;
   --bridge-alert-success-bg: #f0fdf4;
   --bridge-alert-success-fg: #166534;
   --bridge-alert-success-border: #86efac;
+  --bridge-alert-info-bg: #eff6ff;
+  --bridge-alert-info-fg: #1e40af;
+  --bridge-alert-info-border: #bfdbfe;
+  --bridge-alert-warning-bg: #fffbeb;
+  --bridge-alert-warning-fg: #92400e;
+  --bridge-alert-warning-border: #fcd34d;
+
+  --bridge-auth-page-padding: 3rem 1rem;
+  --bridge-billing-page-width: 60rem;
+  --bridge-billing-page-padding: 3rem 1rem;
+  --bridge-paywall-bg: rgba(15, 23, 42, 0.72);
 }
 
 /* ─── Input visual defaults ──────────────────────────────────────────────── */
@@ -47,8 +105,8 @@
 :where(input[type="text"]:focus, input[type="email"]:focus,
        input[type="password"]:focus, input[type="tel"]:focus,
        .bridge-input:focus) {
-  border-color: var(--bridge-input-focus);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bridge-input-focus) 20%, transparent);
+  border-color: var(--bridge-input-focus, var(--bridge-primary));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bridge-input-focus, var(--bridge-primary)) 20%, transparent);
 }
 
 /* ─── Buttons ────────────────────────────────────────────────────────────── */
@@ -92,13 +150,13 @@
 
 :where(.bridge-btn-primary) {
   background-color: var(--bridge-primary);
-  color: var(--bridge-primary-fg);
+  color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #ffffff));
   border: 1px solid var(--bridge-primary);
   border-radius: var(--bridge-border-radius);
 }
 :where(.bridge-btn-primary:hover:not(:disabled)) {
-  background-color: var(--bridge-primary-hover);
-  border-color: var(--bridge-primary-hover);
+  background-color: var(--bridge-primary-hover, color-mix(in srgb, var(--bridge-primary) 85%, #000000));
+  border-color: var(--bridge-primary-hover, color-mix(in srgb, var(--bridge-primary) 85%, #000000));
 }
 :where(.bridge-btn-secondary, .bridge-btn-outline) {
   background-color: transparent;
@@ -275,12 +333,12 @@
   border: none;
   cursor: pointer;
   padding: 0.25rem;
-  color: var(--bridge-muted, #6b7280);
+  color: var(--bridge-muted);
   line-height: 1;
 }
 
 .bridge-password-toggle:hover {
-  color: var(--bridge-foreground, #374151);
+  color: var(--bridge-foreground);
 }
 
 /* ─── Auth form helpers ───────────────────────────────────────────────────── */
@@ -318,13 +376,13 @@
   /* Roughly the height of the credentials form it replaces, so the card does
      not collapse and then re-expand under the cursor. */
   min-height: 8rem;
-  color: var(--bridge-muted, #6b7280);
+  color: var(--bridge-muted);
   font-size: 0.875rem;
 }
 
 .bridge-mfa-help {
   font-size: 0.8125rem;
-  color: var(--bridge-muted, #6b7280);
+  color: var(--bridge-muted);
   margin: 0.75rem 0 0.25rem;
   text-align: center;
 }
@@ -358,7 +416,7 @@
   gap: 0.75rem;
   margin-bottom: 1rem;
   padding: 0.75rem;
-  background: var(--bridge-bg-muted, #f5f5f5);
+  background: var(--bridge-muted-bg, var(--bridge-bg-muted, #f3f4f6));
   border-radius: 0.5rem;
 }
 
@@ -446,6 +504,19 @@
   font-family: inherit;
 }
 
+:where(.bridge-team-tabs) {
+  border-bottom: 1px solid var(--bridge-border);
+}
+
+:where(.bridge-team-tab) {
+  color: var(--bridge-muted);
+}
+
+:where(.bridge-team-tab[data-active="true"]) {
+  color: var(--bridge-primary);
+  box-shadow: inset 0 -2px 0 var(--bridge-primary);
+}
+
 /* ─── TeamUserList ───────────────────────────────────────────────────────── */
 
 .bridge-team-users-header {
@@ -633,6 +704,22 @@
   min-width: 160px;
 }
 
+:where(.bridge-team-actions-menu) {
+  background: var(--bridge-bg);
+  color: var(--bridge-foreground);
+  border: 1px solid var(--bridge-border);
+  border-radius: var(--bridge-border-radius);
+}
+
+:where(.bridge-team-table th) {
+  color: var(--bridge-muted);
+  border-bottom: 1px solid var(--bridge-border);
+}
+
+:where(.bridge-team-table td) {
+  border-bottom: 1px solid var(--bridge-border);
+}
+
 .bridge-team-actions-item {
   display: block;
   width: 100%;
@@ -647,15 +734,24 @@
 
 /* ─── Team Dialogs ───────────────────────────────────────────────────────── */
 
-.bridge-team-dialog {
+/* The team dialogs carry [data-bridge-team-dialog]; the upgrade dialog the class. */
+.bridge-team-dialog,
+[data-bridge-team-dialog] {
   border: none;
   padding: 0;
   max-width: 400px;
   width: 90%;
 }
 
-.bridge-team-dialog::backdrop {
-  background: rgba(0, 0, 0, 0.4);
+:where(.bridge-team-dialog, [data-bridge-team-dialog]) {
+  background: var(--bridge-bg);
+  color: var(--bridge-foreground);
+  border-radius: var(--bridge-border-radius);
+}
+
+.bridge-team-dialog::backdrop,
+[data-bridge-team-dialog]::backdrop {
+  background: var(--bridge-overlay);
 }
 
 .bridge-team-dialog-content {
@@ -764,25 +860,25 @@
   letter-spacing: 0.05em;
   font-weight: 500;
   text-align: left;
-  border-bottom: 1px solid var(--bridge-border, #e5e7eb);
-  color: var(--bridge-muted, #6b7280);
+  border-bottom: 1px solid var(--bridge-border);
+  color: var(--bridge-muted);
 }
 
 [data-bridge-api-tokens] .bridge-api-td,
 [data-bridge-api-tokens] .bridge-api-td-name,
 [data-bridge-api-tokens] .bridge-api-td-muted {
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--bridge-border, #e5e7eb);
+  border-bottom: 1px solid var(--bridge-border);
 }
 
 [data-bridge-api-tokens] .bridge-api-td-muted {
-  color: var(--bridge-muted, #6b7280);
+  color: var(--bridge-muted);
 }
 
 [data-bridge-api-tokens] .bridge-api-td-actions {
   padding: 0.75rem 1rem;
   text-align: right;
-  border-bottom: 1px solid var(--bridge-border, #e5e7eb);
+  border-bottom: 1px solid var(--bridge-border);
 }
 
 [data-bridge-api-tokens] .bridge-api-privileges {
@@ -792,7 +888,7 @@
 }
 
 [data-bridge-api-tokens] .bridge-api-inline-form {
-  border: 1px solid var(--bridge-border, #e5e7eb);
+  border: 1px solid var(--bridge-border);
   border-radius: 0.5rem;
   padding: 1rem 1.25rem;
 }
@@ -957,9 +1053,9 @@
   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));
+  border: 1px solid var(--bridge-border);
+  border-radius: var(--bridge-border-radius);
+  background: var(--bridge-muted-bg, var(--bridge-bg-muted, #f3f4f6));
 }
 
 .bridge-plan-interval-tab {
@@ -970,19 +1066,19 @@
   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);
+  border-radius: calc(var(--bridge-border-radius) - 0.2rem);
+  color: var(--bridge-muted);
 }
 
 .bridge-plan-interval-tab[data-active="true"] {
-  background: var(--bridge-primary, #2563eb);
-  color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #fff));
+  background: var(--bridge-primary);
+  color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #ffffff));
 }
 
 .bridge-plan-unavailable {
   margin: 0;
   font-size: 0.8125rem;
-  color: var(--bridge-muted, #64748b);
+  color: var(--bridge-muted);
 }
 
 /* Plan-change confirmation dialog + success notice (TBP-33) */
@@ -993,7 +1089,7 @@
 .bridge-plan-confirm-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(15, 23, 42, 0.45);
+  background: var(--bridge-overlay);
   display: grid;
   place-items: center;
   z-index: 1000;
@@ -1001,9 +1097,9 @@
 }
 
 .bridge-plan-confirm {
-  background: var(--bridge-bg, #fff);
-  border: 1px solid var(--bridge-border, #e2e8f0);
-  border-radius: var(--bridge-border-radius, 0.5rem);
+  background: var(--bridge-bg);
+  border: 1px solid var(--bridge-border);
+  border-radius: var(--bridge-border-radius);
   box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
   max-width: 26rem;
   width: 100%;
@@ -1028,7 +1124,7 @@
 .bridge-plan-confirm-note {
   margin: 0;
   font-size: 0.8125rem;
-  color: var(--bridge-muted, #64748b);
+  color: var(--bridge-muted);
   line-height: 1.5;
 }
 
@@ -1129,12 +1225,12 @@
 }
 
 [data-bridge-workspace-item]:hover:not(:disabled) {
-  background: var(--bridge-muted-bg, #f3f4f6);
+  background: var(--bridge-muted-bg, var(--bridge-bg-muted, #f3f4f6));
 }
 
 [data-bridge-workspace-item][data-active="true"] {
-  background: var(--bridge-primary-light, #eff6ff);
-  border-color: var(--bridge-primary, #3b82f6);
+  background: var(--bridge-primary-light, color-mix(in srgb, var(--bridge-primary) 10%, #ffffff));
+  border-color: var(--bridge-primary);
 }
 
 [data-bridge-workspace-item][data-loading="true"] {
@@ -1153,8 +1249,8 @@
   width: 2rem;
   height: 2rem;
   border-radius: 0.375rem;
-  background: var(--bridge-primary, #3b82f6);
-  color: var(--bridge-primary-foreground, #ffffff);
+  background: var(--bridge-primary);
+  color: var(--bridge-primary-fg, var(--bridge-primary-foreground, #ffffff));
   font-size: 0.875rem;
   font-weight: 600;
   flex-shrink: 0;
@@ -1178,7 +1274,7 @@
 [data-bridge-workspace-name] {
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--bridge-foreground, #111827);
+  color: var(--bridge-foreground);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1186,7 +1282,7 @@
 
 [data-bridge-workspace-user] {
   font-size: 0.75rem;
-  color: var(--bridge-muted, #6b7280);
+  color: var(--bridge-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebulr-group/bridge-svelte",
-  "version": "0.9.0-beta.3",
+  "version": "0.9.0-beta.5",
   "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",
@@ -79,7 +79,7 @@
     "typescript": "^6.0.0",
     "vite": "^6.2.6",
     "vitest": "^4.1.4",
-    "@nebulr-group/bridge-auth-core": "0.8.0-beta.0"
+    "@nebulr-group/bridge-auth-core": "0.8.0-beta.2"
   },
   "keywords": [
     "svelte",