@nebulr-group/bridge-svelte 0.2.0 → 0.3.0-beta.0

package/dist/client/components/team/TeamManagementPanel.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Tab = {
+    id: 'users' | 'profile' | 'workspace';
+    label: string;
+};
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    defaultTab?: 'users' | 'profile' | 'workspace';
+    showProfileTab?: boolean;
+    showWorkspaceTab?: boolean;
+    onError?: (error: Error) => void;
+    tabBar?: Snippet<[{
+        tabs: Tab[];
+        activeTab: string;
+        setTab: (id: string) => void;
+    }]>;
+}
+declare const TeamManagementPanel: import("svelte").Component<Props, {}, "">;
+type TeamManagementPanel = ReturnType<typeof TeamManagementPanel>;
+export default TeamManagementPanel;

package/dist/client/components/team/TeamProfileForm.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import type { TeamProfile } from '@thebridge/auth-core';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { onMount } from 'svelte';
+  import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import Alert from '../sdk-auth/shared/Alert.svelte';
+  import Spinner from '../sdk-auth/shared/Spinner.svelte';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    onError?: (error: Error) => void;
+  }
+
+  let {
+    onError,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let profile = $state<TeamProfile | null>(null);
+  let firstName = $state('');
+  let lastName = $state('');
+  let loading = $state(true);
+  let saving = $state(false);
+  let error = $state<string | null>(null);
+  let success = $state<string | null>(null);
+
+  onMount(() => {
+    loadProfile();
+  });
+
+  async function loadProfile() {
+    loading = true;
+    error = null;
+    try {
+      const bridge = getBridgeAuth();
+      profile = await bridge.team.getProfile();
+      firstName = profile.firstName ?? '';
+      lastName = profile.lastName ?? '';
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error('Failed to load profile');
+      error = e.message;
+      onError?.(e);
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleSubmit() {
+    saving = true;
+    error = null;
+    success = null;
+    try {
+      const bridge = getBridgeAuth();
+      profile = await bridge.team.updateProfile({ firstName, lastName });
+      success = 'Profile updated successfully.';
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error('Failed to update profile');
+      error = e.message;
+      onError?.(e);
+    } finally {
+      saving = false;
+    }
+  }
+</script>
+
+<div class={className} {style} data-bridge-team-profile {...rest}>
+  <h3 class="bridge-team-section-title">My Profile</h3>
+
+  {#if loading}
+    <div class="bridge-team-loading">
+      <Spinner size={32} />
+      <span>Loading profile...</span>
+    </div>
+  {:else}
+    {#if error}
+      <div class="bridge-team-alert"><Alert variant="error">{error}</Alert></div>
+    {/if}
+    {#if success}
+      <div class="bridge-team-alert"><Alert variant="success">{success}</Alert></div>
+    {/if}
+
+    <form class="bridge-team-form" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+      <div class="bridge-team-form-group">
+        <label for="bridge-profile-email">Email</label>
+        <input id="bridge-profile-email" type="email" value={profile?.email ?? ''} disabled />
+      </div>
+
+      <div class="bridge-team-form-row">
+        <div class="bridge-team-form-group">
+          <label for="bridge-profile-first-name">First Name</label>
+          <input
+            id="bridge-profile-first-name"
+            type="text"
+            bind:value={firstName}
+            disabled={saving}
+          />
+        </div>
+
+        <div class="bridge-team-form-group">
+          <label for="bridge-profile-last-name">Last Name</label>
+          <input
+            id="bridge-profile-last-name"
+            type="text"
+            bind:value={lastName}
+            disabled={saving}
+          />
+        </div>
+      </div>
+
+      {#if profile?.role}
+        <div class="bridge-team-form-group">
+          <label>Role</label>
+          <div class="bridge-team-readonly">{profile.role}</div>
+        </div>
+      {/if}
+
+      <div class="bridge-team-form-actions">
+        <button
+          type="submit"
+          class="bridge-btn bridge-btn-primary"
+          disabled={saving}
+        >
+          {saving ? 'Saving...' : 'Save Changes'}
+        </button>
+      </div>
+    </form>
+  {/if}
+</div>

package/dist/client/components/team/TeamProfileForm.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    onError?: (error: Error) => void;
+}
+declare const TeamProfileForm: import("svelte").Component<Props, {}, "">;
+type TeamProfileForm = ReturnType<typeof TeamProfileForm>;
+export default TeamProfileForm;

package/dist/client/components/team/TeamUserActionsMenu.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    onedit?: () => void;
+    onresetpassword?: () => void;
+    ondelete?: () => void;
+  }
+
+  let {
+    onedit,
+    onresetpassword,
+    ondelete,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let isOpen = $state(false);
+  let menuEl: HTMLDivElement | undefined = $state();
+
+  function toggle(e: MouseEvent) {
+    e.stopPropagation();
+    isOpen = !isOpen;
+  }
+
+  function handleAction(fn?: () => void) {
+    isOpen = false;
+    fn?.();
+  }
+
+  function handleClickOutside(e: MouseEvent) {
+    if (isOpen && menuEl && !menuEl.contains(e.target as Node)) {
+      isOpen = false;
+    }
+  }
+</script>
+
+<svelte:document onclick={handleClickOutside} />
+
+<div class={className} {style} data-bridge-team-actions bind:this={menuEl} {...rest}>
+  <button class="bridge-team-actions-trigger" onclick={toggle} aria-label="Actions">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+      <circle cx="8" cy="3" r="1.5" />
+      <circle cx="8" cy="8" r="1.5" />
+      <circle cx="8" cy="13" r="1.5" />
+    </svg>
+  </button>
+
+  {#if isOpen}
+    <div class="bridge-team-actions-menu">
+      <button class="bridge-team-actions-item" onclick={() => handleAction(onedit)}>
+        Edit
+      </button>
+      <button class="bridge-team-actions-item" onclick={() => handleAction(onresetpassword)}>
+        Reset Password
+      </button>
+      <button class="bridge-team-actions-item bridge-team-actions-item--danger" onclick={() => handleAction(ondelete)}>
+        Delete
+      </button>
+    </div>
+  {/if}
+</div>

package/dist/client/components/team/TeamUserActionsMenu.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    onedit?: () => void;
+    onresetpassword?: () => void;
+    ondelete?: () => void;
+}
+declare const TeamUserActionsMenu: import("svelte").Component<Props, {}, "">;
+type TeamUserActionsMenu = ReturnType<typeof TeamUserActionsMenu>;
+export default TeamUserActionsMenu;

package/dist/client/components/team/TeamUserList.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+  import type { TeamUser } from '@thebridge/auth-core';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { onMount } from 'svelte';
+  import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import Alert from '../sdk-auth/shared/Alert.svelte';
+  import Spinner from '../sdk-auth/shared/Spinner.svelte';
+  import TeamAddUserDialog from './TeamAddUserDialog.svelte';
+  import TeamConfirmDialog from './TeamConfirmDialog.svelte';
+  import TeamEditUserDialog from './TeamEditUserDialog.svelte';
+  import TeamUserActionsMenu from './TeamUserActionsMenu.svelte';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    onError?: (error: Error) => void;
+  }
+
+  let {
+    onError,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let users = $state<TeamUser[]>([]);
+  let roles = $state<string[]>([]);
+  let mfaEnabled = $state(false);
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+
+  // Dialog states
+  let showAddDialog = $state(false);
+  let showEditDialog = $state(false);
+  let editingUser = $state<TeamUser | null>(null);
+  let showDeleteConfirm = $state(false);
+  let showResetConfirm = $state(false);
+  let deletingUser = $state<TeamUser | null>(null);
+  let resettingUser = $state<TeamUser | null>(null);
+  let actionLoading = $state(false);
+
+  onMount(() => {
+    loadData();
+  });
+
+  async function loadData() {
+    loading = true;
+    error = null;
+    try {
+      const bridge = getBridgeAuth();
+      const [userResult, rolesResult] = await Promise.all([
+        bridge.team.listUsers(),
+        bridge.team.listUserRoles(),
+      ]);
+      users = userResult.users;
+      mfaEnabled = userResult.mfaEnabled;
+      roles = rolesResult;
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error('Failed to load users');
+      error = e.message;
+      onError?.(e);
+    } finally {
+      loading = false;
+    }
+  }
+
+  function openEdit(user: TeamUser) {
+    editingUser = user;
+    showEditDialog = true;
+  }
+
+  function openDelete(user: TeamUser) {
+    deletingUser = user;
+    showDeleteConfirm = true;
+  }
+
+  function openResetPassword(user: TeamUser) {
+    resettingUser = user;
+    showResetConfirm = true;
+  }
+
+  function handleUsersAdded(added: TeamUser[]) {
+    users = [...users, ...added];
+  }
+
+  function handleUserUpdated(updated: TeamUser) {
+    users = users.map((u) => (u.id === updated.id ? updated : u));
+  }
+
+  async function handleDeleteConfirm() {
+    if (!deletingUser) return;
+    actionLoading = true;
+    try {
+      const bridge = getBridgeAuth();
+      await bridge.team.deleteUser(deletingUser.id);
+      users = users.filter((u) => u.id !== deletingUser!.id);
+      showDeleteConfirm = false;
+      deletingUser = null;
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error('Failed to delete user');
+      onError?.(e);
+    } finally {
+      actionLoading = false;
+    }
+  }
+
+  async function handleResetConfirm() {
+    if (!resettingUser) return;
+    actionLoading = true;
+    try {
+      const bridge = getBridgeAuth();
+      await bridge.team.sendPasswordResetLink(resettingUser.id);
+      showResetConfirm = false;
+      resettingUser = null;
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error('Failed to send reset link');
+      onError?.(e);
+    } finally {
+      actionLoading = false;
+    }
+  }
+</script>
+
+<div class={className} {style} data-bridge-team-users {...rest}>
+  <div class="bridge-team-users-header">
+    <h3 class="bridge-team-users-title">Team Members</h3>
+    <button class="bridge-btn bridge-btn-primary" onclick={() => (showAddDialog = true)}>
+      Add Member
+    </button>
+  </div>
+
+  {#if loading}
+    <div class="bridge-team-loading">
+      <Spinner size={32} />
+      <span>Loading team members...</span>
+    </div>
+  {:else if error}
+    <Alert variant="error">{error}</Alert>
+  {:else if users.length === 0}
+    <div class="bridge-team-empty">
+      <p>No team members yet.</p>
+      <button class="bridge-btn bridge-btn-primary" onclick={() => (showAddDialog = true)}>
+        Add your first team member
+      </button>
+    </div>
+  {:else}
+    <div class="bridge-team-table-wrapper">
+      <table class="bridge-team-table">
+        <thead>
+          <tr>
+            <th>User</th>
+            <th>Role</th>
+            <th>Status</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each users as user (user.id)}
+            <tr>
+              <td>
+                <div class="bridge-team-user-cell">
+                  <div class="bridge-team-user-name">
+                    {user.fullName || user.username || user.email}
+                  </div>
+                  <div class="bridge-team-user-email">{user.email}</div>
+                </div>
+              </td>
+              <td>
+                <span class="bridge-team-badge">{user.role ?? '—'}</span>
+              </td>
+              <td>
+                <span
+                  class="bridge-team-status"
+                  data-state={user.enabled ? 'active' : 'disabled'}
+                >
+                  {user.enabled ? 'Active' : 'Disabled'}
+                </span>
+              </td>
+              <td class="bridge-team-actions-cell">
+                <TeamUserActionsMenu
+                  onedit={() => openEdit(user)}
+                  onresetpassword={() => openResetPassword(user)}
+                  ondelete={() => openDelete(user)}
+                />
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {/if}
+</div>
+
+<TeamAddUserDialog
+  open={showAddDialog}
+  onclose={() => (showAddDialog = false)}
+  onadded={handleUsersAdded}
+/>
+
+<TeamEditUserDialog
+  open={showEditDialog}
+  user={editingUser}
+  {roles}
+  onclose={() => { showEditDialog = false; editingUser = null; }}
+  onupdated={handleUserUpdated}
+/>
+
+<TeamConfirmDialog
+  open={showDeleteConfirm}
+  title="Delete User"
+  message="Are you sure you want to delete {deletingUser?.email ?? 'this user'}? This action cannot be undone."
+  confirmLabel="Delete"
+  variant="danger"
+  loading={actionLoading}
+  onconfirm={handleDeleteConfirm}
+  oncancel={() => { showDeleteConfirm = false; deletingUser = null; }}
+/>
+
+<TeamConfirmDialog
+  open={showResetConfirm}
+  title="Reset Password"
+  message="Send a password reset link to {resettingUser?.email ?? 'this user'}?"
+  confirmLabel="Send Reset Link"
+  variant="default"
+  loading={actionLoading}
+  onconfirm={handleResetConfirm}
+  oncancel={() => { showResetConfirm = false; resettingUser = null; }}
+/>

package/dist/client/components/team/TeamUserList.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    onError?: (error: Error) => void;
+}
+declare const TeamUserList: import("svelte").Component<Props, {}, "">;
+type TeamUserList = ReturnType<typeof TeamUserList>;
+export default TeamUserList;

package/dist/client/components/team/TeamWorkspaceForm.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import type { TeamWorkspace } from '@thebridge/auth-core';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { onMount } from 'svelte';
+  import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import Alert from '../sdk-auth/shared/Alert.svelte';
+  import Spinner from '../sdk-auth/shared/Spinner.svelte';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    onError?: (error: Error) => void;
+  }
+
+  let {
+    onError,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let workspace = $state<TeamWorkspace | null>(null);
+  let name = $state('');
+  let locale = $state('');
+  let loading = $state(true);
+  let saving = $state(false);
+  let error = $state<string | null>(null);
+  let success = $state<string | null>(null);
+
+  onMount(() => {
+    loadWorkspace();
+  });
+
+  async function loadWorkspace() {
+    loading = true;
+    error = null;
+    try {
+      const bridge = getBridgeAuth();
+      workspace = await bridge.team.getWorkspace();
+      name = workspace.name ?? '';
+      locale = workspace.locale ?? '';
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error('Failed to load workspace');
+      error = e.message;
+      onError?.(e);
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleSubmit() {
+    saving = true;
+    error = null;
+    success = null;
+    try {
+      const bridge = getBridgeAuth();
+      await bridge.team.updateWorkspace({ name, locale });
+      success = 'Workspace updated successfully.';
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error('Failed to update workspace');
+      error = e.message;
+      onError?.(e);
+    } finally {
+      saving = false;
+    }
+  }
+</script>
+
+<div class={className} {style} data-bridge-team-workspace {...rest}>
+  <h3 class="bridge-team-section-title">Workspace Settings</h3>
+
+  {#if loading}
+    <div class="bridge-team-loading">
+      <Spinner size={32} />
+      <span>Loading workspace...</span>
+    </div>
+  {:else}
+    {#if error}
+      <div class="bridge-team-alert"><Alert variant="error">{error}</Alert></div>
+    {/if}
+    {#if success}
+      <div class="bridge-team-alert"><Alert variant="success">{success}</Alert></div>
+    {/if}
+
+    {#if workspace?.logo}
+      <div class="bridge-team-logo">
+        <img src={workspace.logo} alt="{workspace.name} logo" />
+      </div>
+    {/if}
+
+    <form class="bridge-team-form" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+      <div class="bridge-team-form-group">
+        <label for="bridge-workspace-name">Workspace Name</label>
+        <input
+          id="bridge-workspace-name"
+          type="text"
+          bind:value={name}
+          disabled={saving}
+        />
+      </div>
+
+      <div class="bridge-team-form-group">
+        <label for="bridge-workspace-locale">Locale</label>
+        <input
+          id="bridge-workspace-locale"
+          type="text"
+          bind:value={locale}
+          placeholder="en"
+          disabled={saving}
+        />
+      </div>
+
+      {#if workspace?.plan}
+        <div class="bridge-team-form-group">
+          <label>Current Plan</label>
+          <div class="bridge-team-readonly">{workspace.plan}</div>
+        </div>
+      {/if}
+
+      <div class="bridge-team-form-group">
+        <label>MFA</label>
+        <div class="bridge-team-readonly">{workspace?.mfa ? 'Enabled' : 'Disabled'}</div>
+      </div>
+
+      <div class="bridge-team-form-actions">
+        <button
+          type="submit"
+          class="bridge-btn bridge-btn-primary"
+          disabled={saving}
+        >
+          {saving ? 'Saving...' : 'Save Changes'}
+        </button>
+      </div>
+    </form>
+  {/if}
+</div>

package/dist/client/components/team/TeamWorkspaceForm.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    onError?: (error: Error) => void;
+}
+declare const TeamWorkspaceForm: import("svelte").Component<Props, {}, "">;
+type TeamWorkspaceForm = ReturnType<typeof TeamWorkspaceForm>;
+export default TeamWorkspaceForm;

package/dist/client/stores/config.store.js

@@ -1,12 +1,11 @@
 // src/lib/config/bridgeConfig.ts
 import { derived, writable } from 'svelte/store';
-import { logger } from '../../shared/logger.js';
+import { initBridge } from '../../core/bridge-instance.js';
+import { logger, setLoggerDebug } from '../../shared/logger.js';
 const DEFAULT_CONFIG = {
-    authBaseUrl: 'https://api.thebridge.dev/auth',
-    teamManagementUrl: 'https://api.thebridge.dev/cloud-views/user-management-portal/users',
-    cloudViewsUrl: 'https://api.thebridge.dev/cloud-views',
+    apiBaseUrl: 'https://api.thebridge.dev',
     defaultRedirectRoute: '/',
-    loginRoute: '/login',
+    signupRoute: '/auth/signup',
     debug: false
 };
 const { subscribe, set, update } = writable({
@@ -37,6 +36,10 @@ export const bridgeConfig = {
         else if (!merged.callbackUrl && defaultCallback) {
             merged.callbackUrl = defaultCallback;
         }
+        // Initialize logger debug mode before anything else
+        setLoggerDebug(!!merged.debug);
+        // Initialize the singleton BridgeAuth instance
+        initBridge(merged);
         // Set bridge full config and mark it as loaded
         set({
             config: merged,

package/dist/client/utils/cn.d.ts

@@ -0,0 +1 @@
+export declare function cn(...classes: (string | undefined | null | false)[]): string;

package/dist/client/utils/cn.js

@@ -0,0 +1,3 @@
+export function cn(...classes) {
+    return classes.filter(Boolean).join(' ');
+}