@authrim/sveltekit 0.1.0

package/dist/stores/auth.js

@@ -0,0 +1,64 @@
+/**
+ * Svelte Auth Stores
+ *
+ * 設計原則:
+ * - 全て Readable（Writable は export しない）
+ * - イベントが Source of Truth（Store はイベントの projection）
+ * - loadingState は 'idle' が完全安定状態
+ */
+import { writable, derived } from 'svelte/store';
+/**
+ * ストアファクトリ
+ */
+export function createAuthStores() {
+    // Internal writable stores
+    const _session = writable(null);
+    const _user = writable(null);
+    const _loadingState = writable('idle');
+    const _error = writable(null);
+    // Derived stores
+    const isAuthenticated = derived(_session, ($session) => $session !== null);
+    // Public readable stores
+    const publicStores = {
+        session: { subscribe: _session.subscribe },
+        user: { subscribe: _user.subscribe },
+        isAuthenticated,
+        loadingState: { subscribe: _loadingState.subscribe },
+        error: { subscribe: _error.subscribe },
+    };
+    return {
+        _session,
+        _user,
+        _loadingState,
+        _error,
+        public: publicStores,
+    };
+}
+/**
+ * DirectAuthError から AuthError への変換
+ */
+export function toAuthError(error) {
+    if (isDirectAuthError(error)) {
+        return {
+            code: error.code,
+            message: error.error_description || error.error || 'An error occurred',
+            details: error.meta,
+        };
+    }
+    if (error instanceof Error) {
+        return {
+            code: 'UNKNOWN_ERROR',
+            message: error.message,
+        };
+    }
+    return {
+        code: 'UNKNOWN_ERROR',
+        message: String(error),
+    };
+}
+function isDirectAuthError(error) {
+    return (typeof error === 'object' &&
+        error !== null &&
+        'code' in error &&
+        typeof error.code === 'string');
+}

package/dist/stores/index.d.ts

@@ -0,0 +1,2 @@
+export { createAuthStores, toAuthError, type AuthLoadingState, type AuthError, type AuthStores, type InternalAuthStores, } from './auth.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/stores/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/stores/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,kBAAkB,GACxB,MAAM,WAAW,CAAC"}

package/dist/stores/index.js

@@ -0,0 +1 @@
+export { createAuthStores, toAuthError, } from './auth.js';

package/dist/types.d.ts

@@ -0,0 +1,164 @@
+/**
+ * Authrim Svelte SDK Type Definitions
+ */
+import type { Readable } from "svelte/store";
+import type { Session, User, SocialProvider, PasskeyLoginOptions, PasskeySignUpOptions, PasskeyRegisterOptions, PasskeyCredential, EmailCodeSendOptions, EmailCodeSendResult, EmailCodeVerifyOptions, SocialLoginOptions, DirectAuthLogoutOptions, NextAction } from "@authrim/core";
+import type { AuthLoadingState, AuthError as StoreAuthError } from "./stores/auth.js";
+export type StorageType = "memory" | "sessionStorage" | "localStorage";
+export interface StorageOptions {
+    prefix?: string;
+    storage?: StorageType;
+}
+export interface AuthrimConfig {
+    issuer: string;
+    clientId: string;
+    storage?: StorageOptions;
+}
+export interface AuthError {
+    code: string;
+    error: string;
+    message: string;
+    retryable: boolean;
+    severity: "info" | "warn" | "error" | "critical";
+    cause?: unknown;
+}
+export type AuthResponse<T> = {
+    data: T;
+    error: null;
+} | {
+    data: null;
+    error: AuthError;
+};
+export interface AuthSessionData {
+    session: Session;
+    user: User;
+    nextAction?: NextAction;
+    /** Validated redirect path from social login state (relative path only) */
+    redirectTo?: string;
+}
+export type AuthEventName = "session:changed" | "session:expired" | "auth:login" | "auth:logout" | "auth:error" | "token:refreshed";
+export interface AuthEventPayloads {
+    "session:changed": {
+        session: Session | null;
+        user: User | null;
+    };
+    "session:expired": {
+        reason: "timeout" | "revoked" | "logout";
+    };
+    "auth:login": {
+        session: Session;
+        user: User;
+        method: "passkey" | "emailCode" | "social";
+    };
+    "auth:logout": {
+        redirectUri?: string;
+    };
+    "auth:error": {
+        error: AuthError;
+    };
+    "token:refreshed": {
+        session: Session;
+    };
+}
+export type AuthEventHandler<E extends AuthEventName> = (payload: AuthEventPayloads[E]) => void;
+export interface PasskeyNamespace {
+    login(options?: PasskeyLoginOptions): Promise<AuthResponse<AuthSessionData>>;
+    signUp(options: PasskeySignUpOptions): Promise<AuthResponse<AuthSessionData>>;
+    register(options?: PasskeyRegisterOptions): Promise<AuthResponse<PasskeyCredential>>;
+    isSupported(): boolean;
+    isConditionalUIAvailable(): Promise<boolean>;
+    cancelConditionalUI(): void;
+}
+export interface EmailCodeNamespace {
+    send(email: string, options?: EmailCodeSendOptions): Promise<AuthResponse<EmailCodeSendResult>>;
+    verify(email: string, code: string, options?: EmailCodeVerifyOptions): Promise<AuthResponse<AuthSessionData>>;
+    hasPendingVerification(email: string): boolean;
+    getRemainingTime(email: string): number;
+    clearPendingVerification(email: string): void;
+}
+export interface SocialNamespace {
+    loginWithPopup(provider: SocialProvider, options?: SocialLoginOptions): Promise<AuthResponse<AuthSessionData>>;
+    loginWithRedirect(provider: SocialProvider, options?: SocialLoginOptions): Promise<void>;
+    handleCallback(): Promise<AuthResponse<AuthSessionData>>;
+    hasCallbackParams(): boolean;
+    getSupportedProviders(): SocialProvider[];
+}
+export interface SessionNamespace {
+    get(): Promise<AuthResponse<AuthSessionData | null>>;
+    validate(): Promise<boolean>;
+    getUser(): Promise<User | null>;
+    refresh(): Promise<Session | null>;
+    isAuthenticated(): Promise<boolean>;
+    clearCache(): void;
+}
+export interface SignOutOptions extends DirectAuthLogoutOptions {
+}
+export interface ConsentNamespace {
+    getData(challengeId: string): Promise<import("./direct-auth/consent.js").ConsentScreenData>;
+    submit(challengeId: string, options: import("./direct-auth/consent.js").ConsentSubmitOptions): Promise<import("./direct-auth/consent.js").ConsentSubmitResult>;
+}
+export interface DeviceFlowNamespace {
+    submit(userCode: string, approve?: boolean): Promise<import("./direct-auth/device-flow.js").DeviceFlowSubmitResult>;
+}
+export interface CIBANamespace {
+    getData(loginHint: string): Promise<import("./direct-auth/ciba.js").CIBAPendingRequest[]>;
+    approve(authReqId: string, userId: string, sub: string): Promise<import("./direct-auth/ciba.js").CIBAActionResult>;
+    reject(authReqId: string, reason?: string): Promise<import("./direct-auth/ciba.js").CIBAActionResult>;
+}
+export interface LoginChallengeNamespace {
+    getData(challengeId: string): Promise<import("./direct-auth/login-challenge.js").LoginChallengeData>;
+}
+export interface SignInShortcuts {
+    passkey(options?: PasskeyLoginOptions): Promise<AuthResponse<AuthSessionData>>;
+    social(provider: SocialProvider, options?: SocialLoginOptions): Promise<AuthResponse<AuthSessionData>>;
+}
+export interface SignUpShortcuts {
+    passkey(options: PasskeySignUpOptions): Promise<AuthResponse<AuthSessionData>>;
+}
+export interface AuthStores {
+    session: Readable<Session | null>;
+    user: Readable<User | null>;
+    isAuthenticated: Readable<boolean>;
+    loadingState: Readable<AuthLoadingState>;
+    error: Readable<StoreAuthError | null>;
+}
+export interface AuthrimClient {
+    passkey: PasskeyNamespace;
+    emailCode: EmailCodeNamespace;
+    social: SocialNamespace;
+    session: SessionNamespace;
+    /** Consent flow API */
+    consent: ConsentNamespace;
+    /** Device flow API (RFC 8628) */
+    deviceFlow: DeviceFlowNamespace;
+    /** CIBA (Client Initiated Backchannel Authentication) API */
+    ciba: CIBANamespace;
+    /** Login challenge API */
+    loginChallenge: LoginChallengeNamespace;
+    signIn: SignInShortcuts;
+    signUp: SignUpShortcuts;
+    signOut(options?: SignOutOptions): Promise<void>;
+    on<E extends AuthEventName>(event: E, handler: AuthEventHandler<E>): () => void;
+    /** Svelte stores for reactive state */
+    stores: AuthStores;
+    /**
+     * Sync session and user from SSR data directly to stores.
+     * This avoids hydration mismatch by not making an async request.
+     * Should only be called during initial hydration.
+     *
+     * @internal Used by AuthProvider for SSR sync
+     */
+    _syncFromSSR(session: Session | null, user: User | null): void;
+    /**
+     * Cleanup resources (event listeners, timers, etc.)
+     * Should be called when the auth client is no longer needed.
+     *
+     * IMPORTANT: If not using AuthProvider, you must call this method
+     * manually when the auth client is no longer needed to prevent
+     * memory leaks from event listeners and timers.
+     */
+    destroy(): void;
+}
+export type { Session, User, SocialProvider, PasskeyLoginOptions, PasskeySignUpOptions, PasskeyRegisterOptions, PasskeyCredential, EmailCodeSendOptions, EmailCodeSendResult, EmailCodeVerifyOptions, SocialLoginOptions, DirectAuthLogoutOptions, NextAction, } from "@authrim/core";
+export type { AuthLoadingState } from "./stores/auth.js";
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/lib/types.ts"],"names":[],"mappings":"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"}

package/dist/types.js

@@ -0,0 +1,4 @@
+/**
+ * Authrim Svelte SDK Type Definitions
+ */
+export {};

package/dist/ui/account/LinkAccountButton.svelte

@@ -0,0 +1,133 @@
+<!--
+  LinkAccountButton Component
+  Button to link a social account
+-->
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import type { SocialProvider } from '../../types.js';
+  import Spinner from '../shared/Spinner.svelte';
+
+  export let provider: SocialProvider;
+  export let loading = false;
+  export let disabled = false;
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{ click: void }>();
+
+  const providerConfig: Record<SocialProvider, { name: string }> = {
+    google: { name: 'Google' },
+    apple: { name: 'Apple' },
+    microsoft: { name: 'Microsoft' },
+    github: { name: 'GitHub' },
+    facebook: { name: 'Facebook' },
+  };
+
+  $: config = providerConfig[provider] || { name: provider };
+</script>
+
+<button
+  type="button"
+  class="authrim-link-account authrim-link-account--{provider} {className}"
+  disabled={disabled || loading}
+  on:click={() => dispatch('click')}
+  {...$$restProps}
+>
+  {#if loading}
+    <span class="authrim-link-account__spinner">
+      <Spinner size="sm" />
+    </span>
+  {:else}
+    <span class="authrim-link-account__icon">
+      {#if provider === 'google'}
+        <svg viewBox="0 0 24 24">
+          <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+          <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+          <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+          <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+        </svg>
+      {:else if provider === 'github'}
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
+        </svg>
+      {:else if provider === 'apple'}
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/>
+        </svg>
+      {:else}
+        <svg viewBox="0 0 20 20" fill="currentColor">
+          <path d="M10 0a10 10 0 1010 10A10 10 0 0010 0zm0 18a8 8 0 118-8 8 8 0 01-8 8z"/>
+        </svg>
+      {/if}
+    </span>
+  {/if}
+  <span class="authrim-link-account__text" class:authrim-link-account__text--hidden={loading}>
+    <slot>Link {config.name}</slot>
+  </span>
+</button>
+
+<style>
+  .authrim-link-account {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--authrim-space-2);
+    height: 40px;
+    padding: 0 var(--authrim-space-4);
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    font-weight: 500;
+    color: var(--authrim-color-text);
+    background: var(--authrim-color-bg);
+    border: 1.5px solid var(--authrim-color-border);
+    border-radius: var(--authrim-radius-md);
+    cursor: pointer;
+    transition:
+      background-color var(--authrim-duration-fast) var(--authrim-ease-default),
+      border-color var(--authrim-duration-fast) var(--authrim-ease-default),
+      transform var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-link-account:hover:not(:disabled) {
+    background: var(--authrim-color-bg-subtle);
+    border-color: var(--authrim-color-border-strong);
+  }
+
+  .authrim-link-account:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  .authrim-link-account:focus-visible {
+    outline: none;
+    box-shadow: var(--authrim-shadow-focus);
+  }
+
+  .authrim-link-account:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .authrim-link-account__spinner {
+    position: absolute;
+  }
+
+  .authrim-link-account__icon {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+  }
+
+  .authrim-link-account__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .authrim-link-account__text {
+    transition: opacity var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-link-account__text--hidden {
+    opacity: 0;
+  }
+</style>

package/dist/ui/account/LinkAccountButton.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { SocialProvider } from '../../types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const LinkAccountButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    provider: SocialProvider;
+    loading?: boolean | undefined;
+    disabled?: boolean | undefined;
+    class?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type LinkAccountButton = InstanceType<typeof LinkAccountButton>;
+export default LinkAccountButton;
+//# sourceMappingURL=LinkAccountButton.svelte.d.ts.map

package/dist/ui/account/LinkAccountButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkAccountButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/account/LinkAccountButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAkErD,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,iBAAiB;;cAfuF,cAAc;;;;;;;;;;;;cAeO,CAAC;AAClH,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAClE,eAAe,iBAAiB,CAAC"}

package/dist/ui/account/LinkedAccountsList.svelte

@@ -0,0 +1,233 @@
+<!--
+  LinkedAccountsList Component
+  Display and manage linked social accounts
+-->
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import type { LinkedAccountDisplay } from '../types.js';
+  import type { SocialProvider } from '../../types.js';
+  import Spinner from '../shared/Spinner.svelte';
+  import UnlinkAccountButton from './UnlinkAccountButton.svelte';
+
+  export let accounts: LinkedAccountDisplay[] = [];
+  export let loading = false;
+  export let unlinkingId: string | undefined = undefined;
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{
+    unlink: { accountId: string; provider: SocialProvider };
+  }>();
+
+  const providerNames: Record<SocialProvider, string> = {
+    google: 'Google',
+    apple: 'Apple',
+    microsoft: 'Microsoft',
+    github: 'GitHub',
+    facebook: 'Facebook',
+  };
+
+  function formatDate(date: Date | undefined): string {
+    if (!date) return '';
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    }).format(date);
+  }
+</script>
+
+<div class="authrim-linked-accounts {className}" {...$$restProps}>
+  {#if loading && accounts.length === 0}
+    <div class="authrim-linked-accounts__loading">
+      <Spinner size="md" />
+      <span>Loading accounts...</span>
+    </div>
+  {:else if accounts.length === 0}
+    <div class="authrim-linked-accounts__empty">
+      <div class="authrim-linked-accounts__empty-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"/>
+        </svg>
+      </div>
+      <p class="authrim-linked-accounts__empty-title">No linked accounts</p>
+      <p class="authrim-linked-accounts__empty-desc">
+        Connect social accounts for easier sign-in
+      </p>
+    </div>
+  {:else}
+    <ul class="authrim-linked-accounts__items">
+      {#each accounts as account, index (account.accountId)}
+        <li
+          class="authrim-linked-accounts__item"
+          style="animation-delay: {index * 50}ms"
+        >
+          <div class="authrim-linked-accounts__icon authrim-linked-accounts__icon--{account.provider}">
+            {#if account.provider === 'google'}
+              <svg viewBox="0 0 24 24">
+                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+              </svg>
+            {:else if account.provider === 'github'}
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
+              </svg>
+            {:else if account.provider === 'apple'}
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/>
+              </svg>
+            {:else}
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+              </svg>
+            {/if}
+          </div>
+
+          <div class="authrim-linked-accounts__info">
+            <span class="authrim-linked-accounts__provider">
+              {providerNames[account.provider] || account.provider}
+            </span>
+            {#if account.email || account.name}
+              <span class="authrim-linked-accounts__detail">
+                {account.email || account.name}
+              </span>
+            {/if}
+            {#if account.linkedAt}
+              <span class="authrim-linked-accounts__date">
+                Linked {formatDate(account.linkedAt)}
+              </span>
+            {/if}
+          </div>
+
+          <UnlinkAccountButton
+            accountId={account.accountId}
+            provider={account.provider}
+            loading={unlinkingId === account.accountId}
+            on:confirm={() => dispatch('unlink', { accountId: account.accountId, provider: account.provider })}
+          />
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .authrim-linked-accounts__loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--authrim-space-3);
+    padding: var(--authrim-space-8);
+    color: var(--authrim-color-text-secondary);
+    font-size: var(--authrim-text-sm);
+  }
+
+  .authrim-linked-accounts__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--authrim-space-8);
+    text-align: center;
+  }
+
+  .authrim-linked-accounts__empty-icon {
+    width: 48px;
+    height: 48px;
+    margin-bottom: var(--authrim-space-4);
+    color: var(--authrim-color-text-muted);
+  }
+
+  .authrim-linked-accounts__empty-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .authrim-linked-accounts__empty-title {
+    margin: 0 0 var(--authrim-space-2);
+    font-size: var(--authrim-text-base);
+    font-weight: 600;
+    color: var(--authrim-color-text);
+  }
+
+  .authrim-linked-accounts__empty-desc {
+    margin: 0;
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text-secondary);
+  }
+
+  .authrim-linked-accounts__items {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .authrim-linked-accounts__item {
+    display: flex;
+    align-items: center;
+    gap: var(--authrim-space-4);
+    padding: var(--authrim-space-4);
+    border-bottom: 1px solid var(--authrim-color-border-subtle);
+    animation: slide-in var(--authrim-duration-normal) var(--authrim-ease-out) both;
+  }
+
+  @keyframes slide-in {
+    from {
+      opacity: 0;
+      transform: translateX(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .authrim-linked-accounts__item:last-child {
+    border-bottom: none;
+  }
+
+  .authrim-linked-accounts__icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: var(--authrim-color-bg-subtle);
+    border-radius: var(--authrim-radius-md);
+  }
+
+  .authrim-linked-accounts__icon svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .authrim-linked-accounts__info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-1);
+  }
+
+  .authrim-linked-accounts__provider {
+    font-size: var(--authrim-text-sm);
+    font-weight: 500;
+    color: var(--authrim-color-text);
+    letter-spacing: var(--authrim-tracking-tight);
+  }
+
+  .authrim-linked-accounts__detail {
+    font-size: var(--authrim-text-xs);
+    color: var(--authrim-color-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .authrim-linked-accounts__date {
+    font-size: var(--authrim-text-xs);
+    color: var(--authrim-color-text-muted);
+  }
+</style>