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

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

@@ -0,0 +1,204 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { onMount } from 'svelte';
+  import type { Plan, PriceOfferSdk } from '@thebridge/auth-core';
+  import { getBridgeAuth, loadSubscription, subscriptionStore } 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> {
+    successUrl: string;
+    cancelUrl: string;
+    onSelect?: (detail: { plan: Plan; price: PriceOfferSdk }) => void;
+    planCard?: Snippet<[{ plan: Plan; prices: PriceOfferSdk[]; isCurrent: boolean; onPick: (price: PriceOfferSdk) => void }]>;
+    emptyState?: Snippet;
+    loadingState?: Snippet;
+  }
+
+  let {
+    successUrl,
+    cancelUrl,
+    onSelect,
+    planCard,
+    emptyState,
+    loadingState,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let picking = $state(false);
+  let pickError = $state<string | null>(null);
+
+  const status = $derived($subscriptionStore.status);
+  const plans = $derived($subscriptionStore.plans);
+  const loading = $derived($subscriptionStore.loading);
+  const storeError = $derived($subscriptionStore.error);
+
+  type UiState = 'idle' | 'payment-failed' | 'setup-payments' | 'select-plan' | 'active' | 'trial';
+
+  const uiState = $derived<UiState>((() => {
+    if (!status) return 'idle';
+    if (status.paymentFailed) return 'payment-failed';
+    if (status.shouldSetupPayments) return 'setup-payments';
+    if (status.shouldSelectPlan) return 'select-plan';
+    if (status.trial) return 'trial';
+    if (status.paymentsEnabled || status.plan) return 'active';
+    return 'select-plan';
+  })());
+
+  const currentPlanKey = $derived(status?.plan?.key ?? null);
+
+  onMount(() => {
+    // Only load if not already loaded
+    if (!$subscriptionStore.status && !$subscriptionStore.loading) {
+      loadSubscription();
+    }
+  });
+
+  async function handlePick(plan: Plan, price: PriceOfferSdk): Promise<void> {
+    picking = true;
+    pickError = null;
+    try {
+      if (price.amount === 0) {
+        // Free plan — select directly
+        await getBridgeAuth().selectFreePlan(plan.key);
+        await loadSubscription();
+        onSelect?.({ plan, price });
+      } else if (status?.paymentsEnabled) {
+        // Already has payment method — change plan
+        await getBridgeAuth().changePlan(plan.key, price);
+        await loadSubscription();
+        onSelect?.({ plan, price });
+      } else {
+        // Needs checkout — redirect to Stripe (or direct plan set when Stripe not configured)
+        const session = await getBridgeAuth().startCheckout(plan.key, price, { successUrl, cancelUrl });
+        if (session.sessionId === null) {
+          // Stripe not configured — plan was set directly on the backend
+          await loadSubscription();
+          onSelect?.({ plan, price });
+        } else {
+          const { loadStripe } = await import('@stripe/stripe-js');
+          const stripe = await loadStripe(session.publicKey);
+          if (!stripe) throw new Error('Failed to load Stripe');
+          await stripe.redirectToCheckout({ sessionId: session.sessionId });
+        }
+      }
+    } catch (err) {
+      pickError = err instanceof Error ? err.message : 'Something went wrong';
+    } finally {
+      picking = false;
+    }
+  }
+
+  async function goToPortal(): Promise<void> {
+    try {
+      const url = await getBridgeAuth().getPortalUrl();
+      window.location.href = url;
+    } catch (err) {
+      pickError = err instanceof Error ? err.message : 'Failed to open billing portal';
+    }
+  }
+</script>
+
+<div
+  class={className}
+  {style}
+  data-bridge-plan-selector
+  data-loading={loading || picking}
+  data-state={uiState}
+  {...rest}
+>
+  {#if loading}
+    {#if loadingState}
+      {@render loadingState()}
+    {:else}
+      <div class="bridge-plan-loading">
+        <Spinner />
+      </div>
+    {/if}
+  {:else if storeError}
+    <Alert variant="error">{storeError}</Alert>
+  {:else}
+    {#if pickError}
+      <Alert variant="error">{pickError}</Alert>
+    {/if}
+
+    {#if uiState === 'payment-failed'}
+      <div data-bridge-plan-payment-failed class="bridge-plan-payment-failed">
+        <Alert variant="error">
+          Your last payment failed. Please update your payment method to continue.
+        </Alert>
+        <button class="bridge-btn-primary bridge-plan-portal-btn" onclick={goToPortal}>
+          Manage billing
+        </button>
+      </div>
+    {/if}
+
+    {#if plans && plans.length === 0}
+      {#if emptyState}
+        {@render emptyState()}
+      {:else}
+        <p class="bridge-plan-empty">No plans available.</p>
+      {/if}
+    {:else if plans}
+      <div class="bridge-plan-cards" data-bridge-plan-cards>
+        {#each plans as plan (plan.key)}
+          {@const isCurrent = plan.key === currentPlanKey}
+          {@const onPick = (price: PriceOfferSdk) => handlePick(plan, price)}
+
+          {#if planCard}
+            {@render planCard({ plan, prices: plan.prices, isCurrent, onPick })}
+          {:else}
+            <div
+              data-bridge-plan-card
+              data-current={isCurrent}
+              data-trial={plan.trial}
+              class="bridge-plan-card"
+            >
+              <div class="bridge-plan-card-header">
+                <h3 class="bridge-plan-name">{plan.name}</h3>
+                {#if plan.trial && plan.trialDays > 0}
+                  <span class="bridge-plan-trial-badge">{plan.trialDays}-day trial</span>
+                {/if}
+              </div>
+
+              {#if plan.description}
+                <p class="bridge-plan-description">{plan.description}</p>
+              {/if}
+
+              <div class="bridge-plan-prices">
+                {#each plan.prices as price (price.recurrenceInterval + price.currency)}
+                  <button
+                    class="bridge-btn-primary bridge-plan-select-btn"
+                    disabled={isCurrent || picking}
+                    onclick={() => onPick(price)}
+                  >
+                    {#if isCurrent}
+                      Current plan
+                    {:else if price.amount === 0}
+                      Select free plan
+                    {:else}
+                      {price.amount / 100} {price.currency.toUpperCase()} / {price.recurrenceInterval}
+                    {/if}
+                  </button>
+                {/each}
+
+                {#if plan.prices.length === 0}
+                  <button
+                    class="bridge-btn-primary bridge-plan-select-btn"
+                    disabled={isCurrent || picking}
+                    onclick={() => handlePick(plan, { amount: 0, currency: 'usd', recurrenceInterval: 'month' })}
+                  >
+                    {isCurrent ? 'Current plan' : 'Select plan'}
+                  </button>
+                {/if}
+              </div>
+            </div>
+          {/if}
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</div>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Plan, PriceOfferSdk } from '@thebridge/auth-core';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    successUrl: string;
+    cancelUrl: string;
+    onSelect?: (detail: {
+        plan: Plan;
+        price: PriceOfferSdk;
+    }) => void;
+    planCard?: Snippet<[{
+        plan: Plan;
+        prices: PriceOfferSdk[];
+        isCurrent: boolean;
+        onPick: (price: PriceOfferSdk) => void;
+    }]>;
+    emptyState?: Snippet;
+    loadingState?: Snippet;
+}
+declare const PlanSelector: import("svelte").Component<Props, {}, "">;
+type PlanSelector = ReturnType<typeof PlanSelector>;
+export default PlanSelector;

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

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import type { TeamUser } from '@thebridge/auth-core';
+  import type { Snippet } from 'svelte';
+  import type { HTMLDialogAttributes } from 'svelte/elements';
+  import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import Alert from '../sdk-auth/shared/Alert.svelte';
+
+  interface Props extends HTMLDialogAttributes {
+    open?: boolean;
+    onclose?: () => void;
+    onadded?: (users: TeamUser[]) => void;
+    titleSnippet?: Snippet;
+    actions?: Snippet<[{ loading: boolean; onconfirm?: () => void; oncancel?: () => void }]>;
+  }
+
+  let {
+    open = false,
+    onclose,
+    onadded,
+    titleSnippet,
+    actions,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let dialogEl: HTMLDialogElement | undefined = $state();
+  let emailsText = $state('');
+  let loading = $state(false);
+  let error = $state<string | null>(null);
+
+  $effect(() => {
+    if (!dialogEl) return;
+    if (open && !dialogEl.open) {
+      emailsText = '';
+      error = null;
+      dialogEl.showModal();
+    } else if (!open && dialogEl.open) {
+      dialogEl.close();
+    }
+  });
+
+  async function handleSubmit() {
+    const emails = emailsText
+      .split(/[,\n]/)
+      .map((e) => e.trim())
+      .filter(Boolean);
+
+    if (emails.length === 0) {
+      error = 'Please enter at least one email address.';
+      return;
+    }
+
+    loading = true;
+    error = null;
+    try {
+      const bridge = getBridgeAuth();
+      const created = await bridge.team.createUsers(emails);
+      onadded?.(created);
+      onclose?.();
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to add users';
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  class={className}
+  {style}
+  data-bridge-team-dialog
+  onclose={() => onclose?.()}
+  {...rest}
+>
+  <div class="bridge-team-dialog-content">
+    {#if titleSnippet}
+      {@render titleSnippet()}
+    {:else}
+      <h3 class="bridge-team-dialog-title">Add Team Members</h3>
+      <p class="bridge-team-dialog-subtitle">
+        Enter email addresses separated by commas or new lines.
+      </p>
+    {/if}
+
+    {#if error}
+      <div class="bridge-team-dialog-error">
+        <Alert variant="error">{error}</Alert>
+      </div>
+    {/if}
+
+    <div class="bridge-team-form-group">
+      <label for="bridge-add-emails">Email addresses</label>
+      <textarea
+        id="bridge-add-emails"
+        bind:value={emailsText}
+        placeholder="user1@example.com&#10;user2@example.com"
+        rows="4"
+        disabled={loading}
+      ></textarea>
+    </div>
+
+    {#if actions}
+      {@render actions({ loading, onconfirm: handleSubmit, oncancel: onclose })}
+    {:else}
+      <div class="bridge-team-dialog-actions">
+        <button
+          class="bridge-btn bridge-btn-secondary"
+          onclick={() => onclose?.()}
+          disabled={loading}
+        >
+          Cancel
+        </button>
+        <button
+          class="bridge-btn bridge-btn-primary"
+          onclick={handleSubmit}
+          disabled={loading || !emailsText.trim()}
+        >
+          {loading ? 'Adding...' : 'Add Members'}
+        </button>
+      </div>
+    {/if}
+  </div>
+</dialog>

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

@@ -0,0 +1,17 @@
+import type { TeamUser } from '@thebridge/auth-core';
+import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
+interface Props extends HTMLDialogAttributes {
+    open?: boolean;
+    onclose?: () => void;
+    onadded?: (users: TeamUser[]) => void;
+    titleSnippet?: Snippet;
+    actions?: Snippet<[{
+        loading: boolean;
+        onconfirm?: () => void;
+        oncancel?: () => void;
+    }]>;
+}
+declare const TeamAddUserDialog: import("svelte").Component<Props, {}, "">;
+type TeamAddUserDialog = ReturnType<typeof TeamAddUserDialog>;
+export default TeamAddUserDialog;

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

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLDialogAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLDialogAttributes {
+    open?: boolean;
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    variant?: 'danger' | 'default';
+    loading?: boolean;
+    onconfirm?: () => void;
+    oncancel?: () => void;
+    titleSnippet?: Snippet;
+    actions?: Snippet<[{ loading: boolean; onconfirm?: () => void; oncancel?: () => void }]>;
+  }
+
+  let {
+    open = false,
+    title = 'Confirm',
+    message = 'Are you sure?',
+    confirmLabel = 'Confirm',
+    variant = 'danger' as 'danger' | 'default',
+    loading = false,
+    onconfirm,
+    oncancel,
+    titleSnippet,
+    actions,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let dialogEl: HTMLDialogElement | undefined = $state();
+
+  $effect(() => {
+    if (!dialogEl) return;
+    if (open && !dialogEl.open) dialogEl.showModal();
+    else if (!open && dialogEl.open) dialogEl.close();
+  });
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  class={className}
+  {style}
+  data-bridge-team-dialog
+  data-variant={variant}
+  onclose={() => oncancel?.()}
+  {...rest}
+>
+  <div class="bridge-team-dialog-content">
+    {#if titleSnippet}
+      {@render titleSnippet()}
+    {:else}
+      <h3 class="bridge-team-dialog-title">{title}</h3>
+      <p class="bridge-team-dialog-message">{message}</p>
+    {/if}
+    {#if actions}
+      {@render actions({ loading, onconfirm, oncancel })}
+    {:else}
+      <div class="bridge-team-dialog-actions">
+        <button
+          class="bridge-btn bridge-btn-secondary"
+          onclick={() => oncancel?.()}
+          disabled={loading}
+        >
+          Cancel
+        </button>
+        <button
+          class="bridge-btn {variant === 'danger' ? 'bridge-btn-danger' : 'bridge-btn-primary'}"
+          onclick={() => onconfirm?.()}
+          disabled={loading}
+        >
+          {loading ? 'Processing...' : confirmLabel}
+        </button>
+      </div>
+    {/if}
+  </div>
+</dialog>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
+interface Props extends HTMLDialogAttributes {
+    open?: boolean;
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    variant?: 'danger' | 'default';
+    loading?: boolean;
+    onconfirm?: () => void;
+    oncancel?: () => void;
+    titleSnippet?: Snippet;
+    actions?: Snippet<[{
+        loading: boolean;
+        onconfirm?: () => void;
+        oncancel?: () => void;
+    }]>;
+}
+declare const TeamConfirmDialog: import("svelte").Component<Props, {}, "">;
+type TeamConfirmDialog = ReturnType<typeof TeamConfirmDialog>;
+export default TeamConfirmDialog;

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

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import type { TeamUser } from '@thebridge/auth-core';
+  import type { Snippet } from 'svelte';
+  import type { HTMLDialogAttributes } from 'svelte/elements';
+  import { getBridgeAuth } from '../../../core/bridge-instance.js';
+  import Alert from '../sdk-auth/shared/Alert.svelte';
+
+  interface Props extends HTMLDialogAttributes {
+    open?: boolean;
+    user?: TeamUser | null;
+    roles?: string[];
+    onclose?: () => void;
+    onupdated?: (user: TeamUser) => void;
+    titleSnippet?: Snippet;
+    actions?: Snippet<[{ loading: boolean; onconfirm?: () => void; oncancel?: () => void }]>;
+  }
+
+  let {
+    open = false,
+    user = null as TeamUser | null,
+    roles = [] as string[],
+    onclose,
+    onupdated,
+    titleSnippet,
+    actions,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let dialogEl: HTMLDialogElement | undefined = $state();
+  let selectedRole = $state('');
+  let enabled = $state(true);
+  let loading = $state(false);
+  let error = $state<string | null>(null);
+
+  $effect(() => {
+    if (!dialogEl) return;
+    if (open && !dialogEl.open) {
+      selectedRole = user?.role ?? '';
+      enabled = user?.enabled ?? true;
+      error = null;
+      dialogEl.showModal();
+    } else if (!open && dialogEl.open) {
+      dialogEl.close();
+    }
+  });
+
+  async function handleSubmit() {
+    if (!user) return;
+    loading = true;
+    error = null;
+    try {
+      const bridge = getBridgeAuth();
+      const updated = await bridge.team.updateUser({
+        id: user.id,
+        role: selectedRole || undefined,
+        enabled,
+      });
+      onupdated?.(updated);
+      onclose?.();
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to update user';
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  class={className}
+  {style}
+  data-bridge-team-dialog
+  onclose={() => onclose?.()}
+  {...rest}
+>
+  <div class="bridge-team-dialog-content">
+    {#if titleSnippet}
+      {@render titleSnippet()}
+    {:else}
+      <h3 class="bridge-team-dialog-title">Edit User</h3>
+      {#if user}
+        <p class="bridge-team-dialog-subtitle">{user.email}</p>
+      {/if}
+    {/if}
+
+    {#if error}
+      <div class="bridge-team-dialog-error">
+        <Alert variant="error">{error}</Alert>
+      </div>
+    {/if}
+
+    <div class="bridge-team-form-group">
+      <label for="bridge-edit-role">Role</label>
+      <select id="bridge-edit-role" bind:value={selectedRole} disabled={loading}>
+        {#each roles as role}
+          <option value={role}>{role}</option>
+        {/each}
+      </select>
+    </div>
+
+    <div class="bridge-team-form-group">
+      <label class="bridge-team-checkbox-label">
+        <input type="checkbox" bind:checked={enabled} disabled={loading} />
+        <span>Enabled</span>
+      </label>
+    </div>
+
+    {#if actions}
+      {@render actions({ loading, onconfirm: handleSubmit, oncancel: onclose })}
+    {:else}
+      <div class="bridge-team-dialog-actions">
+        <button
+          class="bridge-btn bridge-btn-secondary"
+          onclick={() => onclose?.()}
+          disabled={loading}
+        >
+          Cancel
+        </button>
+        <button
+          class="bridge-btn bridge-btn-primary"
+          onclick={handleSubmit}
+          disabled={loading}
+        >
+          {loading ? 'Saving...' : 'Save Changes'}
+        </button>
+      </div>
+    {/if}
+  </div>
+</dialog>

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

@@ -0,0 +1,19 @@
+import type { TeamUser } from '@thebridge/auth-core';
+import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
+interface Props extends HTMLDialogAttributes {
+    open?: boolean;
+    user?: TeamUser | null;
+    roles?: string[];
+    onclose?: () => void;
+    onupdated?: (user: TeamUser) => void;
+    titleSnippet?: Snippet;
+    actions?: Snippet<[{
+        loading: boolean;
+        onconfirm?: () => void;
+        oncancel?: () => void;
+    }]>;
+}
+declare const TeamEditUserDialog: import("svelte").Component<Props, {}, "">;
+type TeamEditUserDialog = ReturnType<typeof TeamEditUserDialog>;
+export default TeamEditUserDialog;

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

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import TeamProfileForm from './TeamProfileForm.svelte';
+  import TeamUserList from './TeamUserList.svelte';
+  import TeamWorkspaceForm from './TeamWorkspaceForm.svelte';
+
+  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 }]>;
+  }
+
+  let {
+    defaultTab = 'users' as 'users' | 'profile' | 'workspace',
+    showProfileTab = true,
+    showWorkspaceTab = true,
+    onError,
+    tabBar,
+    class: className,
+    style,
+    ...rest
+  }: Props = $props();
+
+  let activeTab = $state(defaultTab);
+
+  const tabs = $derived(
+    [
+      { id: 'users' as const, label: 'Users' },
+      showProfileTab && { id: 'profile' as const, label: 'Profile' },
+      showWorkspaceTab && { id: 'workspace' as const, label: 'Workspace' },
+    ].filter(Boolean) as Tab[],
+  );
+
+  function setTab(id: string) {
+    activeTab = id as 'users' | 'profile' | 'workspace';
+  }
+</script>
+
+<div class={className} {style} data-bridge-team-panel {...rest}>
+  {#if tabs.length > 1}
+    {#if tabBar}
+      {@render tabBar({ tabs, activeTab, setTab })}
+    {:else}
+      <nav class="bridge-team-tabs">
+        {#each tabs as tab (tab.id)}
+          <button
+            class="bridge-team-tab"
+            data-active={activeTab === tab.id}
+            onclick={() => setTab(tab.id)}
+          >
+            {tab.label}
+          </button>
+        {/each}
+      </nav>
+    {/if}
+  {/if}
+
+  <div class="bridge-team-tab-content">
+    {#if activeTab === 'users'}
+      <TeamUserList {onError} />
+    {:else if activeTab === 'profile'}
+      <TeamProfileForm {onError} />
+    {:else if activeTab === 'workspace'}
+      <TeamWorkspaceForm {onError} />
+    {/if}
+  </div>
+</div>