@nebulr-group/bridge-svelte 0.1.0-beta.0

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    onSignup?: () => void;
+    onError?: (error: Error) => void;
+    showLoginLink?: boolean;
+    /** Override login page URL. Default: derived from BridgeConfig loginRoute. */
+    loginHref?: string | undefined;
+    heading?: string;
+    footer?: Snippet;
+}
+declare const SignupForm: import("svelte").Component<Props, {}, "">;
+type SignupForm = ReturnType<typeof SignupForm>;
+export default SignupForm;

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

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import type { FederationConnection } from '@thebridge/auth-core';
+  import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import Spinner from './shared/Spinner.svelte';
+
+  interface Props extends HTMLButtonAttributes {
+    connection: FederationConnection;
+    label?: string;
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+    icon?: Snippet;
+  }
+
+  let {
+    connection,
+    label,
+    onSuccess,
+    onError,
+    icon,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let loading = $state(false);
+  let buttonLabel = $derived(label ?? `Continue with ${connection.name}`);
+
+  async function handleClick() {
+    if (loading) return;
+    loading = true;
+    try {
+      const result = await getBridgeAuth().startSsoLogin(connection.type);
+      if (result.type === 'auth_success') {
+        onSuccess?.();
+      } else if (result.type === 'auth_error') {
+        throw new Error(result.error || 'SSO login failed');
+      }
+      // 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';
+      onError?.(new Error(message));
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<button
+  type="button"
+  class={className}
+  {style}
+  data-bridge-sso-button
+  data-loading={loading}
+  onclick={handleClick}
+  disabled={loading}
+  {...rest}
+>
+  <span class="bridge-sso-btn-inner">
+    {#if loading}
+      <Spinner size={16} />
+    {:else if icon}
+      {@render icon()}
+    {/if}
+    <span>{buttonLabel}</span>
+  </span>
+</button>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { FederationConnection } from '@thebridge/auth-core';
+interface Props extends HTMLButtonAttributes {
+    connection: FederationConnection;
+    label?: string;
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+    icon?: Snippet;
+}
+declare const SsoButton: import("svelte").Component<Props, {}, "">;
+type SsoButton = ReturnType<typeof SsoButton>;
+export default SsoButton;

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLSpanElement> {
+    type: string;
+  }
+
+  let { type, class: className, style, ...rest }: Props = $props();
+</script>
+
+<span class={className} {style} data-bridge-sso-icon data-provider={type} {...rest}>
+  {#if type === 'google'}
+    <!-- Google "G" icon -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="18" height="18" aria-hidden="true">
+      <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
+      <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
+      <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
+      <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
+      <path fill="none" d="M0 0h48v48H0z"/>
+    </svg>
+
+  {:else if type === 'ms-azure-ad'}
+    <!-- Microsoft logo -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" width="18" height="18" aria-hidden="true">
+      <rect x="1" y="1" width="9" height="9" fill="#f25022"/>
+      <rect x="11" y="1" width="9" height="9" fill="#00a4ef"/>
+      <rect x="1" y="11" width="9" height="9" fill="#7fba00"/>
+      <rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
+    </svg>
+
+  {:else if type === 'linkedin'}
+    <!-- LinkedIn logo -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+      <path fill="#0077B5" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+    </svg>
+
+  {:else if type === 'facebook'}
+    <!-- Facebook logo -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+      <path fill="#1877F2" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+    </svg>
+
+  {:else if type === 'github'}
+    <!-- GitHub logo -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+      <path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+    </svg>
+
+  {:else if type === 'apple'}
+    <!-- Apple logo -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 1000" width="16" height="18" aria-hidden="true">
+      <path fill="currentColor" d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-57.8-155.5-127.4C46 790.7 0 663 0 541.8c0-207.5 135.4-317.3 269-317.3 80 0 146.6 44.2 196.3 44.2 47.4 0 121.9-47.4 212.1-47.4 36.5 0 139.1 3.2 213.1 117.1zM570.1 107.3c34.3-41.5 58.9-99.1 58.9-156.7 0-8-0.6-16.1-2-23.5-55.1 2-120.9 36.7-161.8 83.8-31.5 35.8-61.7 93.4-61.7 151.7 0 8.6 1.3 17.3 1.9 20 3.3 0.5 8.7 1.4 14 1.4 49.6 0 110.8-32.8 150.7-76.7z"/>
+    </svg>
+
+  {/if}
+</span>

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

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    type: string;
+}
+declare const SsoProviderIcon: import("svelte").Component<Props, {}, "">;
+type SsoProviderIcon = ReturnType<typeof SsoProviderIcon>;
+export default SsoProviderIcon;

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

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { TenantUser } from '@thebridge/auth-core';
+  import { getBridgeAuth, tenantUsersStore } from '../../../core/bridge-instance.js';
+  import AuthFormWrapper from './shared/AuthFormWrapper.svelte';
+  import Spinner from './shared/Spinner.svelte';
+  import Alert from './shared/Alert.svelte';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    onSelect?: () => void;
+    onError?: (error: Error) => void;
+    tenantItem?: Snippet<[TenantUser]>;
+  }
+
+  let {
+    onSelect,
+    onError,
+    tenantItem,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let loading = $state(false);
+  let selectedId = $state<string | null>(null);
+  let error = $state<string | null>(null);
+
+  async function handleSelect(tenantUser: TenantUser) {
+    if (loading) return;
+    error = null;
+    selectedId = tenantUser.id;
+    loading = true;
+    try {
+      await getBridgeAuth().selectTenant(tenantUser.id);
+      onSelect?.();
+    } catch (err: any) {
+      error = err.message || 'Failed to select workspace.';
+      onError?.(err);
+    } finally {
+      loading = false;
+      selectedId = null;
+    }
+  }
+</script>
+
+<AuthFormWrapper heading="Choose a workspace" class={className} {style} {...rest}>
+  {#if error}
+    <Alert variant="error">{error}</Alert>
+  {/if}
+
+  <div class="bridge-tenant-list">
+    {#each $tenantUsersStore as tu (tu.id)}
+      <button
+        type="button"
+        class="bridge-tenant-item"
+        data-tenant-id={tu.id}
+        data-loading={selectedId === tu.id}
+        onclick={() => handleSelect(tu)}
+        disabled={loading}
+      >
+        {#if tenantItem}
+          {@render tenantItem(tu)}
+        {:else}
+          <span class="bridge-tenant-avatar">
+            {#if tu.tenant.logo}
+              <img src={tu.tenant.logo} alt={tu.tenant.name} />
+            {:else}
+              {tu.tenant.name.charAt(0).toUpperCase()}
+            {/if}
+          </span>
+          <span class="bridge-tenant-info">
+            <span class="bridge-tenant-name">{tu.tenant.name}</span>
+            <span class="bridge-tenant-user">{tu.fullName}</span>
+          </span>
+          {#if selectedId === tu.id}
+            <Spinner size={18} />
+          {/if}
+        {/if}
+      </button>
+    {/each}
+  </div>
+</AuthFormWrapper>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TenantUser } from '@thebridge/auth-core';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    onSelect?: () => void;
+    onError?: (error: Error) => void;
+    tenantItem?: Snippet<[TenantUser]>;
+}
+declare const TenantSelector: import("svelte").Component<Props, {}, "">;
+type TenantSelector = ReturnType<typeof TenantSelector>;
+export default TenantSelector;

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

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import type { HTMLDivAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+  import type { Workspace } from '@thebridge/auth-core';
+  import { onMount } from 'svelte';
+  import { getBridgeAuth, profileStore } from '../../../core/bridge-instance.js';
+  import Spinner from './shared/Spinner.svelte';
+  import Alert from './shared/Alert.svelte';
+
+  interface Props extends HTMLDivAttributes {
+    onSwitch?: () => void;
+    onError?: (error: Error) => void;
+    workspaceItem?: Snippet<[{ workspace: Workspace; isActive: boolean; isLoading: boolean; onSelect: () => void }]>;
+  }
+
+  let {
+    onSwitch,
+    onError,
+    workspaceItem,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let workspaces = $state<Workspace[]>([]);
+  let loadError = $state<string | null>(null);
+  let loadingList = $state(true);
+  let switchingId = $state<string | null>(null);
+  let switchError = $state<string | null>(null);
+
+  const currentWorkspaceId = $derived($profileStore?.id ?? null);
+
+  onMount(async () => {
+    try {
+      workspaces = await getBridgeAuth().getWorkspaces();
+    } catch (err: any) {
+      loadError = err.message || 'Failed to load workspaces.';
+    } finally {
+      loadingList = false;
+    }
+  });
+
+  async function handleSelect(workspace: Workspace) {
+    if (switchingId) return;
+    switchError = null;
+    switchingId = workspace.id;
+    try {
+      await getBridgeAuth().switchWorkspace(workspace.id);
+      onSwitch?.();
+    } catch (err: any) {
+      switchError = err.message || 'Failed to switch workspace.';
+      onError?.(err);
+    } finally {
+      switchingId = null;
+    }
+  }
+</script>
+
+<div
+  class={className}
+  {style}
+  data-bridge-workspace-selector
+  data-loading-list={loadingList}
+  {...rest}
+>
+  {#if loadError || switchError}
+    <Alert variant="error">{loadError ?? switchError}</Alert>
+  {/if}
+
+  {#if loadingList}
+    <div data-bridge-workspace-loading>
+      <Spinner size={24} />
+    </div>
+  {:else}
+    <div data-bridge-workspace-list>
+      {#each workspaces as ws (ws.id)}
+        {#if workspaceItem}
+          {@render workspaceItem({ workspace: ws, isActive: ws.id === currentWorkspaceId, isLoading: switchingId === ws.id, onSelect: () => handleSelect(ws) })}
+        {:else}
+          <button
+            type="button"
+            data-bridge-workspace-item
+            data-active={ws.id === currentWorkspaceId}
+            data-loading={switchingId === ws.id}
+            disabled={!!switchingId}
+            onclick={() => handleSelect(ws)}
+          >
+            <span data-bridge-workspace-avatar>
+              {#if ws.tenant.logo}
+                <img src={ws.tenant.logo} alt={ws.tenant.name} />
+              {:else}
+                {ws.tenant.name.charAt(0).toUpperCase()}
+              {/if}
+            </span>
+            <span data-bridge-workspace-info>
+              <span data-bridge-workspace-name>{ws.tenant.name}</span>
+              <span data-bridge-workspace-user>{ws.fullName}</span>
+            </span>
+            {#if switchingId === ws.id}
+              <Spinner size={18} />
+            {/if}
+          </button>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>
+<!-- no <style> block -->

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

@@ -0,0 +1,16 @@
+import type { HTMLDivAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { Workspace } from '@thebridge/auth-core';
+interface Props extends HTMLDivAttributes {
+    onSwitch?: () => void;
+    onError?: (error: Error) => void;
+    workspaceItem?: Snippet<[{
+        workspace: Workspace;
+        isActive: boolean;
+        isLoading: boolean;
+        onSelect: () => void;
+    }]>;
+}
+declare const WorkspaceSelector: import("svelte").Component<Props, {}, "">;
+type WorkspaceSelector = ReturnType<typeof WorkspaceSelector>;
+export default WorkspaceSelector;

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'error' | 'info' | 'success';
+    children?: Snippet;
+  }
+
+  let { variant = 'error', children, class: className, style, ...rest }: Props = $props();
+</script>
+
+{#if children}
+  <div class={className} {style} data-variant={variant} data-bridge-alert role="alert" {...rest}>
+    {@render children()}
+  </div>
+{/if}

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'error' | 'info' | 'success';
+    children?: Snippet;
+}
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    heading?: string;
+    headingSnippet?: Snippet;
+    children?: Snippet;
+  }
+
+  let { heading, headingSnippet, children, class: className, style, ...rest }: Props = $props();
+</script>
+
+<div class={className} {style} data-bridge-auth-form {...rest}>
+  {#if headingSnippet}
+    {@render headingSnippet()}
+  {:else if heading}
+    <h2 class="bridge-auth-heading">{heading}</h2>
+  {/if}
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    heading?: string;
+    headingSnippet?: Snippet;
+    children?: Snippet;
+}
+declare const AuthFormWrapper: import("svelte").Component<Props, {}, "">;
+type AuthFormWrapper = ReturnType<typeof AuthFormWrapper>;
+export default AuthFormWrapper;

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLSpanElement> {
+    size?: number;
+  }
+
+  let { size = 24, class: className, style, ...rest }: Props = $props();
+</script>
+
+<span
+  class={className}
+  style="width: {size}px; height: {size}px;{style ? ' ' + style : ''}"
+  data-bridge-spinner
+  {...rest}
+></span>

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

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    size?: number;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;