svelte-firekit 0.1.8 → 0.2.0

package/dist/components/AuthGuard.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { UserProfile } from '../types/auth.js';
+	import { firekitUser } from '../services/user.svelte.js';
+	import { firekitAuth } from '../services/auth.js';
+
+	/**
+	 * Route guard that renders `children` only when the auth requirement is met.
+	 * Framework-agnostic — pass `onUnauthorized` to handle navigation yourself.
+	 *
+	 * @example SvelteKit
+	 * <script>
+	 *   import { goto } from '$app/navigation';
+	 * <\/script>
+	 * <AuthGuard onUnauthorized={() => goto('/login')}>
+	 *   {#snippet children(user, signOut)}
+	 *     <Dashboard {user} {signOut} />
+	 *   {/snippet}
+	 * </AuthGuard>
+	 *
+	 * @example Require guest (redirect authenticated users away)
+	 * <AuthGuard requireAuth={false} onUnauthorized={() => goto('/dashboard')}>
+	 *   {#snippet children()}
+	 *     <LoginPage />
+	 *   {/snippet}
+	 * </AuthGuard>
+	 */
+	let {
+		children,
+		requireAuth = true,
+		onUnauthorized,
+		fallback
+	}: {
+		/** Content shown when the auth requirement is satisfied. */
+		children: Snippet<[UserProfile, () => Promise<void>]>;
+		/** When true (default), requires a signed-in user. When false, requires no user. */
+		requireAuth?: boolean;
+		/** Called when the auth state does not meet the requirement. Use for navigation. */
+		onUnauthorized?: () => void;
+		/** Shown while auth state is being determined. */
+		fallback?: Snippet;
+	} = $props();
+
+	function signOut() {
+		return firekitAuth.signOut();
+	}
+
+	// React to auth state changes — runs whenever isAuthenticated or loading changes.
+	$effect(() => {
+		if (firekitUser.loading) return;
+
+		const isAuth = firekitUser.isAuthenticated;
+		const shouldBlock = requireAuth ? !isAuth : isAuth;
+		if (shouldBlock) onUnauthorized?.();
+	});
+</script>
+
+{#if firekitUser.loading}
+	{#if fallback}
+		{@render fallback()}
+	{/if}
+{:else if firekitUser.isAuthenticated === requireAuth && firekitUser.user}
+	{@render children(firekitUser.user, signOut)}
+{/if}

package/dist/components/AuthGuard.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { UserProfile } from '../types/auth.js';
+type $$ComponentProps = {
+    /** Content shown when the auth requirement is satisfied. */
+    children: Snippet<[UserProfile, () => Promise<void>]>;
+    /** When true (default), requires a signed-in user. When false, requires no user. */
+    requireAuth?: boolean;
+    /** Called when the auth state does not meet the requirement. Use for navigation. */
+    onUnauthorized?: () => void;
+    /** Shown while auth state is being determined. */
+    fallback?: Snippet;
+};
+declare const AuthGuard: import("svelte").Component<$$ComponentProps, {}, "">;
+type AuthGuard = ReturnType<typeof AuthGuard>;
+export default AuthGuard;

package/dist/components/Collection.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" generics="T extends Record<string, unknown> = Record<string, unknown>">
+	import type { Snippet } from 'svelte';
+	import type { QueryConstraint } from 'firebase/firestore';
+	import { FirekitCollection } from '../services/collection.svelte.js';
+
+	/**
+	 * Renders a Firestore collection reactively.
+	 *
+	 * Provides three snippet slots: `data` (array of documents), `loading`, and `error`.
+	 *
+	 * @example
+	 * ```svelte
+	 * <Collection path="posts" {constraints}>
+	 *   {#snippet data(posts)}
+	 *     {#each posts as post}
+	 *       <p>{post.title}</p>
+	 *     {/each}
+	 *   {/snippet}
+	 *   {#snippet loading()}
+	 *     <p>Loading…</p>
+	 *   {/snippet}
+	 * </Collection>
+	 * ```
+	 */
+	let {
+		path,
+		constraints = [],
+		realtime = true,
+		data: dataSnippet,
+		loading: loadingSnippet,
+		error: errorSnippet
+	}: {
+		/** Firestore collection path (e.g. "posts"). */
+		path: string;
+		/** Optional Firestore query constraints. */
+		constraints?: QueryConstraint[];
+		/** Subscribe to real-time updates. Default: true */
+		realtime?: boolean;
+		/** Rendered with the array of documents once loaded. */
+		data?: Snippet<[T[]]>;
+		/** Rendered while loading. */
+		loading?: Snippet;
+		/** Rendered when an error occurs. */
+		error?: Snippet<[import('../types/collection.js').CollectionError]>;
+	} = $props();
+
+	const col = new FirekitCollection<T>(path, constraints, { realtime });
+</script>
+
+{#if col.loading}
+	{#if loadingSnippet}
+		{@render loadingSnippet()}
+	{/if}
+{:else if col.error}
+	{#if errorSnippet}
+		{@render errorSnippet(col.error)}
+	{/if}
+{:else}
+	{#if dataSnippet}
+		{@render dataSnippet(col.data)}
+	{/if}
+{/if}

package/dist/components/Collection.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { QueryConstraint } from 'firebase/firestore';
+declare function $$render<T extends Record<string, unknown> = Record<string, unknown>>(): {
+    props: {
+        /** Firestore collection path (e.g. "posts"). */
+        path: string;
+        /** Optional Firestore query constraints. */
+        constraints?: QueryConstraint[];
+        /** Subscribe to real-time updates. Default: true */
+        realtime?: boolean;
+        /** Rendered with the array of documents once loaded. */
+        data?: Snippet<[T[]]>;
+        /** Rendered while loading. */
+        loading?: Snippet;
+        /** Rendered when an error occurs. */
+        error?: Snippet<[import("../types/collection.js").CollectionError]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown> = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown> = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown> = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Collection: $$IsomorphicComponent;
+type Collection<T extends Record<string, unknown> = Record<string, unknown>> = InstanceType<typeof Collection<T>>;
+export default Collection;

package/dist/components/CustomGuard.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { UserProfile } from '../types/auth.js';
+	import { firekitUser } from '../services/user.svelte.js';
+	import { firekitAuth } from '../services/auth.js';
+
+	/**
+	 * Extended route guard that runs async verification checks on top of auth.
+	 * All checks must return `true` for `children` to render.
+	 *
+	 * @example
+	 * <CustomGuard
+	 *   verificationChecks={[
+	 *     async (user) => user.emailVerified,
+	 *     async (user) => await hasRequiredRole(user.uid, 'admin')
+	 *   ]}
+	 *   onUnauthorized={() => goto('/403')}
+	 * >
+	 *   {#snippet children(user, signOut)}
+	 *     <AdminPanel {user} {signOut} />
+	 *   {/snippet}
+	 * </CustomGuard>
+	 */
+	let {
+		children,
+		requireAuth = true,
+		onUnauthorized,
+		fallback,
+		verificationChecks = []
+	}: {
+		children: Snippet<[UserProfile, () => Promise<void>]>;
+		requireAuth?: boolean;
+		onUnauthorized?: () => void;
+		fallback?: Snippet;
+		/** Array of async checks — all must resolve to true for access to be granted. */
+		verificationChecks?: ((user: UserProfile) => boolean | Promise<boolean>)[];
+	} = $props();
+
+	let verificationPassed = $state(true);
+	let isVerifying = $state(false);
+
+	function signOut() {
+		return firekitAuth.signOut();
+	}
+
+	async function runChecks(user: UserProfile): Promise<boolean> {
+		if (verificationChecks.length === 0) return true;
+		try {
+			const results = await Promise.all(verificationChecks.map((fn) => fn(user)));
+			return results.every(Boolean);
+		} catch {
+			return false;
+		}
+	}
+
+	$effect(() => {
+		if (firekitUser.loading) return;
+
+		const isAuth = firekitUser.isAuthenticated;
+		const shouldBlock = requireAuth ? !isAuth : isAuth;
+
+		if (shouldBlock) {
+			onUnauthorized?.();
+			return;
+		}
+
+		if (isAuth && firekitUser.user && verificationChecks.length > 0) {
+			const user = firekitUser.user;
+			isVerifying = true;
+			runChecks(user).then((passed) => {
+				verificationPassed = passed;
+				isVerifying = false;
+				if (!passed) onUnauthorized?.();
+			});
+		} else {
+			verificationPassed = true;
+		}
+	});
+</script>
+
+{#if firekitUser.loading || isVerifying}
+	{#if fallback}
+		{@render fallback()}
+	{/if}
+{:else if firekitUser.isAuthenticated === requireAuth && verificationPassed && firekitUser.user}
+	{@render children(firekitUser.user, signOut)}
+{/if}

package/dist/components/CustomGuard.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { UserProfile } from '../types/auth.js';
+type $$ComponentProps = {
+    children: Snippet<[UserProfile, () => Promise<void>]>;
+    requireAuth?: boolean;
+    onUnauthorized?: () => void;
+    fallback?: Snippet;
+    /** Array of async checks — all must resolve to true for access to be granted. */
+    verificationChecks?: ((user: UserProfile) => boolean | Promise<boolean>)[];
+};
+declare const CustomGuard: import("svelte").Component<$$ComponentProps, {}, "">;
+type CustomGuard = ReturnType<typeof CustomGuard>;
+export default CustomGuard;

package/dist/components/Doc.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" generics="T extends Record<string, unknown> = Record<string, unknown>">
+	import type { Snippet } from 'svelte';
+	import { FirekitDoc } from '../services/document.svelte.js';
+
+	/**
+	 * Renders a Firestore document reactively.
+	 *
+	 * Provides three snippet slots: `data` (document exists), `loading`, and `error`.
+	 *
+	 * @example
+	 * ```svelte
+	 * <Doc path="users/uid123" let:data={user}>
+	 *   {#snippet data(user)}
+	 *     <p>{user.name}</p>
+	 *   {/snippet}
+	 *   {#snippet loading()}
+	 *     <p>Loading…</p>
+	 *   {/snippet}
+	 * </Doc>
+	 * ```
+	 */
+	let {
+		path,
+		realtime = true,
+		data: dataSnippet,
+		loading: loadingSnippet,
+		error: errorSnippet
+	}: {
+		/** Firestore document path (e.g. "users/uid123"). */
+		path: string;
+		/** Subscribe to real-time updates. Default: true */
+		realtime?: boolean;
+		/** Rendered when the document exists and is loaded. */
+		data?: Snippet<[T]>;
+		/** Rendered while loading. */
+		loading?: Snippet;
+		/** Rendered when an error occurs. */
+		error?: Snippet<[import('../types/document.js').DocumentError]>;
+	} = $props();
+
+	const doc = new FirekitDoc<T>(path, { realtime });
+</script>
+
+{#if doc.loading}
+	{#if loadingSnippet}
+		{@render loadingSnippet()}
+	{/if}
+{:else if doc.error}
+	{#if errorSnippet}
+		{@render errorSnippet(doc.error)}
+	{/if}
+{:else if doc.exists && doc.data}
+	{#if dataSnippet}
+		{@render dataSnippet(doc.data)}
+	{/if}
+{/if}

package/dist/components/Doc.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T extends Record<string, unknown> = Record<string, unknown>>(): {
+    props: {
+        /** Firestore document path (e.g. "users/uid123"). */
+        path: string;
+        /** Subscribe to real-time updates. Default: true */
+        realtime?: boolean;
+        /** Rendered when the document exists and is loaded. */
+        data?: Snippet<[T]>;
+        /** Rendered while loading. */
+        loading?: Snippet;
+        /** Rendered when an error occurs. */
+        error?: Snippet<[import("../types/document.js").DocumentError]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown> = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown> = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown> = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Doc: $$IsomorphicComponent;
+type Doc<T extends Record<string, unknown> = Record<string, unknown>> = InstanceType<typeof Doc<T>>;
+export default Doc;

package/dist/components/DownloadURL.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { FirekitDownloadUrl } from '../services/storage.svelte.js';
+
+	/**
+	 * Fetches and renders a Firebase Storage download URL.
+	 *
+	 * @example
+	 * ```svelte
+	 * <DownloadURL path="images/avatar.jpg">
+	 *   {#snippet data(url)}
+	 *     <img src={url} alt="avatar" />
+	 *   {/snippet}
+	 * </DownloadURL>
+	 * ```
+	 */
+	let {
+		path,
+		data: dataSnippet,
+		loading: loadingSnippet,
+		error: errorSnippet
+	}: {
+		/** Firebase Storage path (e.g. "images/avatar.jpg"). */
+		path: string;
+		/** Rendered with the resolved download URL. */
+		data?: Snippet<[string]>;
+		/** Rendered while fetching. */
+		loading?: Snippet;
+		/** Rendered on error. */
+		error?: Snippet<[Error]>;
+	} = $props();
+
+	const dl = new FirekitDownloadUrl(path);
+</script>
+
+{#if dl.loading}
+	{#if loadingSnippet}
+		{@render loadingSnippet()}
+	{/if}
+{:else if dl.error}
+	{#if errorSnippet}
+		{@render errorSnippet(dl.error)}
+	{/if}
+{:else if dl.url}
+	{#if dataSnippet}
+		{@render dataSnippet(dl.url)}
+	{/if}
+{/if}

package/dist/components/DownloadURL.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Firebase Storage path (e.g. "images/avatar.jpg"). */
+    path: string;
+    /** Rendered with the resolved download URL. */
+    data?: Snippet<[string]>;
+    /** Rendered while fetching. */
+    loading?: Snippet;
+    /** Rendered on error. */
+    error?: Snippet<[Error]>;
+};
+declare const DownloadURL: import("svelte").Component<$$ComponentProps, {}, "">;
+type DownloadURL = ReturnType<typeof DownloadURL>;
+export default DownloadURL;

package/dist/components/FirebaseApp.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { FirebaseOptions } from 'firebase/app';
+	import type { AppCheckOptions } from 'firebase/app-check';
+	import { initFirekit, isFirekitConfigured } from '../config.js';
+	import { firebaseService } from '../firebase.js';
+	import { firekitAppCheck } from '../services/app-check.svelte.js';
+	import { firekitAnalytics } from '../services/analytics.js';
+	import { firekitMessaging } from '../services/messaging.svelte.js';
+
+	/**
+	 * Root provider component. Initializes Firebase (and optionally App Check) and
+	 * makes all service instances available via Svelte context.
+	 *
+	 * `config` is optional if you called `initFirekit()` programmatically first.
+	 * `appCheckOptions` should be provided if you want App Check to secure all requests.
+	 * App Check is initialized **before** any other Firebase service call to ensure
+	 * all subsequent requests are attested.
+	 *
+	 * @example
+	 * <FirebaseApp config={{ apiKey: '...', ... }}>
+	 *   <App />
+	 * </FirebaseApp>
+	 *
+	 * @example With App Check (reCAPTCHA Enterprise)
+	 * ```svelte
+	 * <script>
+	 *   import { ReCaptchaEnterpriseProvider } from 'svelte-firekit';
+	 * <\/script>
+	 * <FirebaseApp
+	 *   {config}
+	 *   appCheckOptions={{ provider: new ReCaptchaEnterpriseProvider('SITE_KEY'), isTokenAutoRefreshEnabled: true }}
+	 * >
+	 *   {@render children()}
+	 * </FirebaseApp>
+	 * ```
+	 */
+	let {
+		children,
+		config,
+		appCheckOptions
+	}: {
+		children: Snippet;
+		config?: FirebaseOptions;
+		/** Pass to enable App Check. Initialize before any other Firebase service. */
+		appCheckOptions?: AppCheckOptions;
+	} = $props();
+
+	const isBrowser = typeof window !== 'undefined';
+
+	if (config && !isFirekitConfigured()) {
+		initFirekit(config);
+	}
+
+	if (isBrowser) {
+		// App Check must be initialized BEFORE other services make network calls
+		if (appCheckOptions && !firekitAppCheck.initialized) {
+			firekitAppCheck.initialize(appCheckOptions);
+		}
+
+		const app = firebaseService.getFirebaseApp();
+		const auth = firebaseService.getAuthInstance();
+		const firestore = firebaseService.getDbInstance();
+		const storage = firebaseService.getStorageInstance();
+		const rtdb = firebaseService.getDatabaseInstance();
+		const functions = firebaseService.getFunctionsInstance();
+
+		setContext('firebase/app', app);
+		setContext('firebase/auth', auth);
+		setContext('firebase/firestore', firestore);
+		setContext('firebase/storage', storage);
+		setContext('firebase/rtdb', rtdb);
+		setContext('firebase/functions', functions);
+		setContext('firebase/app-check', firekitAppCheck.initialized ? firebaseService.appCheck : null);
+		setContext('firebase/analytics', firekitAnalytics);
+		setContext('firebase/messaging', firekitMessaging);
+	}
+</script>
+
+{@render children()}

package/dist/components/FirebaseApp.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { FirebaseOptions } from 'firebase/app';
+import type { AppCheckOptions } from 'firebase/app-check';
+type $$ComponentProps = {
+    children: Snippet;
+    config?: FirebaseOptions;
+    /** Pass to enable App Check. Initialize before any other Firebase service. */
+    appCheckOptions?: AppCheckOptions;
+};
+declare const FirebaseApp: import("svelte").Component<$$ComponentProps, {}, "">;
+type FirebaseApp = ReturnType<typeof FirebaseApp>;
+export default FirebaseApp;

package/dist/components/Node.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" generics="T = unknown">
+	import type { Snippet } from 'svelte';
+	import { FirekitNode } from '../services/realtime.svelte.js';
+
+	/**
+	 * Renders a Firebase Realtime Database node reactively.
+	 *
+	 * @example
+	 * ```svelte
+	 * <Node path="rooms/123">
+	 *   {#snippet data(room)}
+	 *     <p>{room.name}</p>
+	 *   {/snippet}
+	 *   {#snippet loading()}
+	 *     <p>Loading…</p>
+	 *   {/snippet}
+	 * </Node>
+	 * ```
+	 */
+	let {
+		path,
+		startWith,
+		data: dataSnippet,
+		loading: loadingSnippet,
+		error: errorSnippet
+	}: {
+		/** RTDB path (e.g. "rooms/123"). */
+		path: string;
+		/** Optional initial value shown before the subscription fires. */
+		startWith?: T;
+		/** Rendered once data is available. */
+		data?: Snippet<[T]>;
+		/** Rendered while loading. */
+		loading?: Snippet;
+		/** Rendered on error. */
+		error?: Snippet<[Error]>;
+	} = $props();
+
+	const node = new FirekitNode<T>(path, startWith);
+</script>
+
+{#if node.loading}
+	{#if loadingSnippet}
+		{@render loadingSnippet()}
+	{/if}
+{:else if node.error}
+	{#if errorSnippet}
+		{@render errorSnippet(node.error)}
+	{/if}
+{:else if node.data !== null}
+	{#if dataSnippet}
+		{@render dataSnippet(node.data)}
+	{/if}
+{/if}

package/dist/components/Node.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T = unknown>(): {
+    props: {
+        /** RTDB path (e.g. "rooms/123"). */
+        path: string;
+        /** Optional initial value shown before the subscription fires. */
+        startWith?: T;
+        /** Rendered once data is available. */
+        data?: Snippet<[T]>;
+        /** Rendered while loading. */
+        loading?: Snippet;
+        /** Rendered on error. */
+        error?: Snippet<[Error]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = unknown> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Node: $$IsomorphicComponent;
+type Node<T = unknown> = InstanceType<typeof Node<T>>;
+export default Node;

package/dist/components/SignedIn.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { UserProfile } from '../types/auth.js';
+	import { firekitUser } from '../services/user.svelte.js';
+
+	/**
+	 * Renders `children` only when a non-anonymous user is signed in.
+	 * Uses runes — no subscription needed.
+	 *
+	 * @example
+	 * <SignedIn>
+	 *   {#snippet children(user)}
+	 *     <p>Hello {user.displayName}</p>
+	 *   {/snippet}
+	 * </SignedIn>
+	 */
+	let { children }: { children: Snippet<[UserProfile]> } = $props();
+</script>
+
+{#if firekitUser.isAuthenticated && firekitUser.user}
+	{@render children(firekitUser.user)}
+{/if}

package/dist/components/{firekit/signed-in.svelte.d.ts → SignedIn.svelte.d.ts}

@@ -1,9 +1,6 @@
-import type { UserProfile } from '../../types/auth.js';
 import type { Snippet } from 'svelte';
+import type { UserProfile } from '../types/auth.js';
 type $$ComponentProps = {
-    /**
-     * Children content to render when user is signed in
-     */
     children: Snippet<[UserProfile]>;
 };
 declare const SignedIn: import("svelte").Component<$$ComponentProps, {}, "">;