@nebulr-group/bridge-svelte 0.6.1 → 0.7.0

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

@@ -237,7 +237,7 @@
   <MfaSetup onError={onError} {messages} />
 
 {:else if currentAuthState === 'tenant-selection'}
-  <TenantSelector onError={onError} />
+  <TenantSelector onError={onError} {messages} />
 
 <!-- Inline forgot password -->
 {:else if step === 'forgot-password'}

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

@@ -1,8 +1,9 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { HTMLButtonAttributes } from 'svelte/elements';
-  import type { FederationConnection } from '@nebulr-group/bridge-auth-core';
+  import type { FederationConnection, MessageOverrides } from '@nebulr-group/bridge-auth-core';
   import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import { getTranslator } from '../../stores/i18n.js';
   import Spinner from './shared/Spinner.svelte';
 
   interface Props extends HTMLButtonAttributes {
@@ -19,6 +20,8 @@
     onSuccess?: () => void;
     onError?: (error: Error) => void;
     icon?: Snippet;
+    /** Per-key copy overrides for this component only (TBP-630). */
+    messages?: MessageOverrides;
   }
 
   let {
@@ -28,13 +31,18 @@
     onSuccess,
     onError,
     icon,
+    messages,
     class: className,
     style,
     ...rest
   }: Props = $props();
 
+  const t = $derived(getTranslator(messages));
+
   let loading = $state(false);
-  let buttonLabel = $derived(label ?? `Continue with ${connection.name}`);
+  // `label` still wins: an app naming its own provider button is voice, not
+  // mechanics, and the catalogue only supplies the default (TBP-634).
+  let buttonLabel = $derived(label ?? t('sso.continueWith', { provider: connection.name }));
 
   async function handleClick() {
     if (loading) return;
@@ -44,13 +52,13 @@
       if (result.type === 'auth_success') {
         onSuccess?.();
       } else if (result.type === 'auth_error') {
-        throw new Error(result.error || 'SSO login failed');
+        throw new Error(result.error || t('sso.error.login'));
       }
       // auth_mfa_required and auth_tenant_selection are handled by authState store
     } catch (err: any) {
       const message = err.message?.includes('popup')
-        ? 'Pop-up was blocked. Please allow pop-ups and try again.'
-        : err.message || 'SSO login failed';
+        ? t('sso.error.popupBlocked')
+        : err.message || t('sso.error.login');
       onError?.(new Error(message));
     } finally {
       loading = false;

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-import type { FederationConnection } from '@nebulr-group/bridge-auth-core';
+import type { FederationConnection, MessageOverrides } from '@nebulr-group/bridge-auth-core';
 interface Props extends HTMLButtonAttributes {
     connection: FederationConnection;
     label?: string;
@@ -15,6 +15,8 @@ interface Props extends HTMLButtonAttributes {
     onSuccess?: () => void;
     onError?: (error: Error) => void;
     icon?: Snippet;
+    /** Per-key copy overrides for this component only (TBP-630). */
+    messages?: MessageOverrides;
 }
 declare const SsoButton: import("svelte").Component<Props, {}, "">;
 type SsoButton = ReturnType<typeof SsoButton>;

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

@@ -1,8 +1,9 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
-  import type { TenantUser } from '@nebulr-group/bridge-auth-core';
+  import type { MessageOverrides, TenantUser } from '@nebulr-group/bridge-auth-core';
   import { getBridgeAuth, tenantUsersStore } from '../../../core/bridge-instance.js';
+  import { getTranslator } from '../../stores/i18n.js';
   import AuthFormWrapper from './shared/AuthFormWrapper.svelte';
   import Spinner from './shared/Spinner.svelte';
   import Alert from './shared/Alert.svelte';
@@ -11,17 +12,22 @@
     onSelect?: () => void;
     onError?: (error: Error) => void;
     tenantItem?: Snippet<[TenantUser]>;
+    /** Per-key copy overrides for this component only (TBP-630). */
+    messages?: MessageOverrides;
   }
 
   let {
     onSelect,
     onError,
     tenantItem,
+    messages,
     class: className,
     style,
     ...rest
   }: Props = $props();
 
+  const t = $derived(getTranslator(messages));
+
   let loading = $state(false);
   let selectedId = $state<string | null>(null);
   let error = $state<string | null>(null);
@@ -35,7 +41,7 @@
       await getBridgeAuth().selectTenant(tenantUser.id);
       onSelect?.();
     } catch (err: any) {
-      error = err.message || 'Failed to select workspace.';
+      error = err.message || t('tenant.error.select');
       onError?.(err);
     } finally {
       loading = false;
@@ -44,7 +50,7 @@
   }
 </script>
 
-<AuthFormWrapper heading="Choose a workspace" class={className} {style} {...rest}>
+<AuthFormWrapper heading={t('tenant.chooseHeading')} class={className} {style} {...rest}>
   {#if error}
     <Alert variant="error">{error}</Alert>
   {/if}

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

@@ -1,10 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { TenantUser } from '@nebulr-group/bridge-auth-core';
+import type { MessageOverrides, TenantUser } from '@nebulr-group/bridge-auth-core';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     onSelect?: () => void;
     onError?: (error: Error) => void;
     tenantItem?: Snippet<[TenantUser]>;
+    /** Per-key copy overrides for this component only (TBP-630). */
+    messages?: MessageOverrides;
 }
 declare const TenantSelector: import("svelte").Component<Props, {}, "">;
 type TenantSelector = ReturnType<typeof TenantSelector>;

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

@@ -1,9 +1,10 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
-  import type { Workspace } from '@nebulr-group/bridge-auth-core';
+  import type { MessageOverrides, Workspace } from '@nebulr-group/bridge-auth-core';
   import { onMount } from 'svelte';
   import { getBridgeAuth, profileStore } from '../../../core/bridge-instance.js';
+  import { getTranslator } from '../../stores/i18n.js';
   import Spinner from './shared/Spinner.svelte';
   import Alert from './shared/Alert.svelte';
 
@@ -11,17 +12,22 @@
     onSwitch?: () => void;
     onError?: (error: Error) => void;
     workspaceItem?: Snippet<[{ workspace: Workspace; isActive: boolean; isLoading: boolean; onSelect: () => void }]>;
+    /** Per-key copy overrides for this component only (TBP-630). */
+    messages?: MessageOverrides;
   }
 
   let {
     onSwitch,
     onError,
     workspaceItem,
+    messages,
     class: className,
     style,
     ...rest
   }: Props = $props();
 
+  const t = $derived(getTranslator(messages));
+
   let workspaces = $state<Workspace[]>([]);
   let loadError = $state<string | null>(null);
   let loadingList = $state(true);
@@ -34,7 +40,7 @@
     try {
       workspaces = await getBridgeAuth().getWorkspaces();
     } catch (err: any) {
-      loadError = err.message || 'Failed to load workspaces.';
+      loadError = err.message || t('workspace.error.load');
     } finally {
       loadingList = false;
     }
@@ -48,7 +54,7 @@
       await getBridgeAuth().switchWorkspace(workspace.id);
       onSwitch?.();
     } catch (err: any) {
-      switchError = err.message || 'Failed to switch workspace.';
+      switchError = err.message || t('workspace.error.switch');
       onError?.(err);
     } finally {
       switchingId = null;

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

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-import type { Workspace } from '@nebulr-group/bridge-auth-core';
+import type { MessageOverrides, Workspace } from '@nebulr-group/bridge-auth-core';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     onSwitch?: () => void;
     onError?: (error: Error) => void;
@@ -10,6 +10,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
         isLoading: boolean;
         onSelect: () => void;
     }]>;
+    /** Per-key copy overrides for this component only (TBP-630). */
+    messages?: MessageOverrides;
 }
 declare const WorkspaceSelector: import("svelte").Component<Props, {}, "">;
 type WorkspaceSelector = ReturnType<typeof WorkspaceSelector>;

package/dist/client/components/sdk-auth/selector-i18n.test.d.ts

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

package/dist/client/components/sdk-auth/selector-i18n.test.js

@@ -0,0 +1,248 @@
+// TenantSelector, WorkspaceSelector and SsoButton were missed by TBP-630's
+// original i18n sweep and by the TBP-633 port, so they still rendered English
+// in all four UI packages after everything around them had been translated.
+// TenantSelector is the one that stings: it renders MID-LOGIN on the
+// multi-workspace path, putting one English screen between a translated login
+// form and a translated app (TBP-634).
+//
+// HARNESS NOTE — see auth-form-description.test.ts for the full explanation of
+// why these render through Svelte's server renderer rather than a DOM. Short
+// version: this workspace has no DOM implementation, so `mount()` and therefore
+// clicks are unavailable. Two consequences shape this file.
+//
+// 1. Anything reachable at initial render (TenantSelector's heading,
+//    SsoButton's label) is asserted on the REAL rendered markup.
+//
+// 2. The five error strings are only produced inside a catch block a click
+//    would have to reach. Those get two assertions that are weak alone and
+//    strong together:
+//      - a `seeded()` render proving the KEY resolves to real Swedish, and
+//      - a source sweep proving the English literal the handler used to carry
+//        is gone from the file.
+//    Reverting the handler to `'Failed to select workspace.'` puts that exact
+//    string back in the source and fails the sweep. The sweep reads its
+//    forbidden strings out of auth-core's `en` catalogue, so it cannot drift
+//    from what the keys actually say.
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import { createServer } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { render } from 'svelte/server';
+import {} from 'svelte';
+import { en, sv } from '@nebulr-group/bridge-auth-core';
+import fs from 'node:fs';
+import path from 'node:path';
+const ROOT = process.cwd();
+const COMPONENT_DIR = 'src/lib/client/components/sdk-auth';
+const SEED_PREFIX = '__seeded-i18n-';
+/** The keys TBP-634 added, and which component owns each. */
+const OWNED = {
+    'TenantSelector.svelte': ['tenant.chooseHeading', 'tenant.error.select'],
+    'WorkspaceSelector.svelte': ['workspace.error.load', 'workspace.error.switch'],
+    'SsoButton.svelte': ['sso.continueWith', 'sso.error.popupBlocked', 'sso.error.login'],
+};
+let server;
+const seededPaths = [];
+beforeAll(async () => {
+    for (const f of fs.readdirSync(path.join(ROOT, COMPONENT_DIR))) {
+        if (f.startsWith(SEED_PREFIX))
+            fs.unlinkSync(path.join(ROOT, COMPONENT_DIR, f));
+    }
+    server = await createServer({
+        configFile: false,
+        root: ROOT,
+        logLevel: 'error',
+        server: { middlewareMode: true, hmr: false },
+        plugins: [svelte({ compilerOptions: { dev: false } })],
+    });
+}, 120_000);
+afterAll(async () => {
+    await server?.close();
+    for (const p of seededPaths) {
+        if (fs.existsSync(p))
+            fs.unlinkSync(p);
+    }
+});
+function componentId(file) {
+    return `/${COMPONENT_DIR}/${file}`;
+}
+/** A copy of `file` with initial-state literals replaced, to reach a later view. */
+function seeded(file, seeds) {
+    let source = fs.readFileSync(path.join(ROOT, COMPONENT_DIR, file), 'utf8');
+    for (const [from, to] of seeds) {
+        if (!source.includes(from)) {
+            throw new Error(`State seed target not found in ${file}:\n  ${from}\n` +
+                'The component was refactored. Update the seed so the test keeps ' +
+                'rendering the intended view — do not delete the assertion.');
+        }
+        source = source.replace(from, to);
+    }
+    const name = `${SEED_PREFIX}${process.pid}-${seededPaths.length}-${file}`;
+    const full = path.join(ROOT, COMPONENT_DIR, name);
+    fs.writeFileSync(full, source);
+    seededPaths.push(full);
+    return `/${COMPONENT_DIR}/${name}`;
+}
+async function renderComponent(id, props = {}) {
+    const mod = await server.ssrLoadModule(id);
+    const Component = mod.default;
+    return render(Component, { props }).body;
+}
+/**
+ * Point the shared config store at a locale.
+ *
+ * The components read locale off BridgeConfig rather than taking it as a prop,
+ * so this is how a real app sets it. Loaded through the same Vite module graph
+ * the components resolve, otherwise they would read a different store instance.
+ */
+async function setLocale(locale) {
+    const mod = await server.ssrLoadModule('/src/lib/client/stores/config.store.ts');
+    mod.bridgeConfig.initConfig({ appId: 'tbp-634-test', locale });
+}
+const CONNECTION = { type: 'google', name: 'Google' };
+function text(html) {
+    return html
+        .replace(/<!--[\s\S]*?-->/g, '')
+        .replace(/<[^>]*>/g, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+// ---------------------------------------------------------------------------
+// 1. What the server renderer can reach directly
+// ---------------------------------------------------------------------------
+describe('TenantSelector heading (TBP-634)', () => {
+    it('renders the English heading when no locale is set', async () => {
+        await setLocale(undefined);
+        const html = await renderComponent(componentId('TenantSelector.svelte'));
+        expect(text(html)).toContain(en['tenant.chooseHeading']);
+    });
+    it('renders the Swedish heading at locale sv', async () => {
+        await setLocale('sv');
+        const html = await renderComponent(componentId('TenantSelector.svelte'));
+        const rendered = text(html);
+        expect(rendered).toContain(sv['tenant.chooseHeading']);
+        // The English must be GONE, not merely joined by the Swedish. A component
+        // that rendered both would satisfy a `toContain` on the Swedish alone.
+        expect(rendered).not.toContain(en['tenant.chooseHeading']);
+    });
+    it('lets a per-component override beat the locale', async () => {
+        await setLocale('sv');
+        const html = await renderComponent(componentId('TenantSelector.svelte'), {
+            messages: { 'tenant.chooseHeading': 'Välj kund' },
+        });
+        const rendered = text(html);
+        expect(rendered).toContain('Välj kund');
+        expect(rendered).not.toContain(sv['tenant.chooseHeading']);
+    });
+    it('never renders the raw key', async () => {
+        for (const locale of ['sv', 'de', 'klingon', undefined]) {
+            await setLocale(locale);
+            const html = await renderComponent(componentId('TenantSelector.svelte'));
+            expect(text(html)).not.toContain('tenant.chooseHeading');
+        }
+    });
+});
+describe('SsoButton label (TBP-634)', () => {
+    it('interpolates the provider name into the localised label', async () => {
+        await setLocale('sv');
+        const html = await renderComponent(componentId('SsoButton.svelte'), {
+            connection: CONNECTION,
+        });
+        const rendered = text(html);
+        expect(rendered).toBe(sv['sso.continueWith'].replace('{provider}', 'Google'));
+        // Placeholder consumed, not printed.
+        expect(rendered).not.toContain('{provider}');
+        expect(rendered).not.toContain(en['sso.continueWith'].replace('{provider}', 'Google'));
+    });
+    it('still lets the app supply its own label — that is voice, not mechanics', async () => {
+        await setLocale('sv');
+        const html = await renderComponent(componentId('SsoButton.svelte'), {
+            connection: CONNECTION,
+            label: 'Logga in med jobbkontot',
+        });
+        expect(text(html)).toBe('Logga in med jobbkontot');
+    });
+    it('falls back to English for an unsupported locale, never to the key', async () => {
+        // Invented, not a real-but-unshipped code: TBP-632 turned 'de' and 'fr'
+        // into shipped locales and broke every test that had borrowed one as its
+        // stand-in for 'unknown'.
+        await setLocale('klingon');
+        const html = await renderComponent(componentId('SsoButton.svelte'), {
+            connection: CONNECTION,
+        });
+        expect(text(html)).toBe(en['sso.continueWith'].replace('{provider}', 'Google'));
+    });
+});
+// ---------------------------------------------------------------------------
+// 2. The error strings, reached by seeding initial state
+// ---------------------------------------------------------------------------
+describe('selector error copy resolves through the catalogue (TBP-634)', () => {
+    const CASES = [
+        {
+            file: 'TenantSelector.svelte',
+            from: 'let error = $state<string | null>(null);',
+            key: 'tenant.error.select',
+        },
+        {
+            file: 'WorkspaceSelector.svelte',
+            from: 'let loadError = $state<string | null>(null);',
+            key: 'workspace.error.load',
+        },
+        {
+            file: 'WorkspaceSelector.svelte',
+            from: 'let switchError = $state<string | null>(null);',
+            key: 'workspace.error.switch',
+        },
+    ];
+    for (const { file, from, key } of CASES) {
+        it(`${file} renders ${key} in Swedish`, async () => {
+            await setLocale('sv');
+            const to = from.replace('(null)', `(t('${key}'))`);
+            const html = await renderComponent(seeded(file, [[from, to]]));
+            const rendered = text(html);
+            expect(rendered).toContain(sv[key]);
+            expect(rendered).not.toContain(en[key]);
+        });
+    }
+});
+// ---------------------------------------------------------------------------
+// 3. Source sweep — the half that survives a reverted handler
+// ---------------------------------------------------------------------------
+describe('no English literal remains in the three components (TBP-634)', () => {
+    for (const [file, keys] of Object.entries(OWNED)) {
+        it(`${file} carries none of its English strings as a literal`, () => {
+            const source = fs.readFileSync(path.join(ROOT, COMPONENT_DIR, file), 'utf8');
+            for (const key of keys) {
+                // Interpolated copy is compared on its literal prefix: the source used
+                // to hold `Continue with ${connection.name}`, which is the catalogue
+                // string with the placeholder swapped for an expression.
+                const needle = en[key].split('{')[0].trim();
+                expect(needle.length, `${key} has no comparable literal prefix`).toBeGreaterThan(4);
+                expect(source, `${file} still contains "${needle}"`).not.toContain(needle);
+            }
+        });
+    }
+    it('the sweep is looking at real files with real content', () => {
+        // Guard against the whole suite passing because a rename made every
+        // readFileSync return something empty or unrelated.
+        for (const file of Object.keys(OWNED)) {
+            const source = fs.readFileSync(path.join(ROOT, COMPONENT_DIR, file), 'utf8');
+            expect(source.length).toBeGreaterThan(500);
+            expect(source).toContain('getTranslator');
+        }
+    });
+});
+// ---------------------------------------------------------------------------
+// 4. LoginForm fans `messages` down to TenantSelector
+// ---------------------------------------------------------------------------
+describe('LoginForm → TenantSelector fan-out (TBP-634)', () => {
+    it('passes messages down, the way it already does to MfaChallenge', () => {
+        // Only reachable on the multi-workspace path, which needs auth state a
+        // server render cannot produce — so this is asserted on the template. It is
+        // the easiest of the fan-outs to forget precisely because it so rarely
+        // renders.
+        const source = fs.readFileSync(path.join(ROOT, COMPONENT_DIR, 'LoginForm.svelte'), 'utf8');
+        const tag = source.match(/<TenantSelector[^>]*\/>/);
+        expect(tag, 'LoginForm no longer renders <TenantSelector>').not.toBeNull();
+        expect(tag[0]).toContain('{messages}');
+    });
+});

package/dist/index.d.ts

@@ -51,3 +51,5 @@ export type { Operator, AttributeType, Condition, ConditionValue, ValidationErro
 export type { FlagResponse, CreateFlagInput, UpdateFlagInput, FlagSchedule, } from '@nebulr-group/bridge-auth-core';
 export { DEFAULT_RETURN_TO_PARAM, readReturnTo, sanitizeReturnTo, withReturnTo, } from '@nebulr-group/bridge-auth-core';
 export type { ReturnToConfig } from '@nebulr-group/bridge-auth-core';
+export { createTranslator, en, hasLocale, interpolate, LOCALES, normalizeLocale, sv, } from '@nebulr-group/bridge-auth-core';
+export type { MessageKey, MessageOverrides, Messages, Translator, } from '@nebulr-group/bridge-auth-core';

package/dist/index.js

@@ -71,3 +71,12 @@ export { BridgeFlags, BridgeIdentity, MemoryIdentityStorage, attachIdentity, gen
 // login page can import the reader (and its open-redirect validation) from the
 // same package it already depends on, instead of reaching past bridge-svelte.
 export { DEFAULT_RETURN_TO_PARAM, readReturnTo, sanitizeReturnTo, withReturnTo, } from '@nebulr-group/bridge-auth-core';
+// TBP-630 — SDK auth copy / translations. Re-exported from auth-core for the
+// same reason as the return-to helpers above: a consumer building its own
+// locale catalogue should import from the package it already depends on rather
+// than reaching past bridge-svelte to a peer dependency it never declared —
+// which pnpm's default layout and Yarn PnP refuse outright.
+//
+// bridge-react, -angular and -nextjs already export this surface; svelte was
+// the odd one out.
+export { createTranslator, en, hasLocale, interpolate, LOCALES, normalizeLocale, sv, } from '@nebulr-group/bridge-auth-core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebulr-group/bridge-svelte",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "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",
@@ -56,7 +56,7 @@
     "svelte": "^5.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@stripe/stripe-js": ">=4.0.0",
-    "@nebulr-group/bridge-auth-core": ">=0.5.0 <1.0.0"
+    "@nebulr-group/bridge-auth-core": ">=0.6.0 <1.0.0"
   },
   "peerDependenciesMeta": {
     "@stripe/stripe-js": {
@@ -77,7 +77,7 @@
     "typescript": "^6.0.0",
     "vite": "^6.2.6",
     "vitest": "^4.1.4",
-    "@nebulr-group/bridge-auth-core": "^0.5.0"
+    "@nebulr-group/bridge-auth-core": "^0.6.0"
   },
   "keywords": [
     "svelte",