svelte-firekit 0.1.9 → 0.2.0

package/dist/components/firekit/signed-out.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-	import { firekitAuth } from '../../services/auth.js';
-	import { firebaseService } from '../../firebase.js';
-	import { onDestroy } from 'svelte';
-	import type { Auth } from 'firebase/auth';
-	import type { Snippet } from 'svelte';
-
-	/**
-	 * Props for SignedOut component
-	 */
-	let {
-		children
-	}: {
-		/**
-		 * Children content to render when user is signed out
-		 */
-		children: Snippet<[Auth]>;
-	} = $props();
-
-	// Get Firebase Auth instance
-	const auth = firebaseService.getAuthInstance();
-	if (!auth) {
-		throw new Error('Firebase Auth instance not available');
-	}
-
-	// Reactive auth state
-	let authState = $state(firekitAuth.getState());
-
-	// Subscribe to auth state changes
-	const unsubscribe = firekitAuth.onAuthStateChanged((state) => {
-		authState = state;
-	});
-
-	// Cleanup subscription on component destruction
-	onDestroy(() => {
-		unsubscribe();
-	});
-</script>
-
-{#if !firekitAuth.isAuthenticated()}
-	{@render children(auth)}
-{/if}

package/dist/components/firekit/storage-list.svelte

@@ -1,97 +0,0 @@
-<script lang="ts">
-	import { ref, type StorageReference } from 'firebase/storage';
-	import { firebaseService } from '../../firebase.js';
-	import { firekitStorageList } from '../../services/storage.svelte.js';
-	import { browser } from '$app/environment';
-	import type { Snippet } from 'svelte';
-
-	/**
-	 * Props for StorageList component
-	 */
-	let {
-		ref: path,
-		children,
-		loading
-	}: {
-		/**
-		 * Storage reference path string (e.g. 'images/uid')
-		 */
-		ref: string;
-		/**
-		 * Content to render when list is loaded
-		 */
-		children: Snippet<
-			[{ items: StorageReference[]; prefixes: StorageReference[] }, StorageReference, any]
-		>;
-		/**
-		 * Content to render while loading
-		 */
-		loading?: Snippet<[]>;
-	} = $props();
-
-	// Get Storage instance and create references
-	let storage: any = $state(null);
-	let storageRef: StorageReference | null = $state(null);
-	let storageListService: ReturnType<typeof firekitStorageList> | null = $state(null);
-
-	// Track list state
-	let listState = $state({
-		loading: true,
-		list: null as { items: StorageReference[]; prefixes: StorageReference[] } | null,
-		error: null as Error | null
-	});
-
-	// Subscribe to list changes
-	$effect(() => {
-		if (!browser) {
-			listState = {
-				loading: false,
-				list: null,
-				error: new Error('Storage not available in SSR')
-			};
-			return;
-		}
-
-		// Initialize storage and service
-		storage = firebaseService.getStorageInstance();
-		if (!storage) {
-			listState = {
-				loading: false,
-				list: null,
-				error: new Error('Storage instance not available')
-			};
-			return;
-		}
-
-		// Create storage reference
-		storageRef = ref(storage, path);
-
-		// Create storage list service
-		storageListService = firekitStorageList(path);
-
-		// The service state is reactive, so we can directly access it
-		// The effect will re-run when the service state changes
-		listState = {
-			loading: storageListService.loading,
-			list: {
-				items: storageListService.items,
-				prefixes: storageListService.prefixes
-			},
-			error: storageListService.error
-		};
-	});
-</script>
-
-{#if !browser}
-	<div>Storage not available in SSR</div>
-{:else if listState.loading}
-	{#if loading}
-		{@render loading()}
-	{:else}
-		<div>Loading...</div>
-	{/if}
-{:else if listState.error}
-	<div class="error">Error: {listState.error.message}</div>
-{:else if listState.list}
-	{@render children(listState.list, storageRef!, storage)}
-{/if}

package/dist/components/firekit/storage-list.svelte.d.ts

@@ -1,26 +0,0 @@
-import { type StorageReference } from 'firebase/storage';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    /**
-     * Storage reference path string (e.g. 'images/uid')
-     */
-    ref: string;
-    /**
-     * Content to render when list is loaded
-     */
-    children: Snippet<[
-        {
-            items: StorageReference[];
-            prefixes: StorageReference[];
-        },
-        StorageReference,
-        any
-    ]>;
-    /**
-     * Content to render while loading
-     */
-    loading?: Snippet<[]>;
-};
-declare const StorageList: import("svelte").Component<$$ComponentProps, {}, "">;
-type StorageList = ReturnType<typeof StorageList>;
-export default StorageList;

package/dist/components/firekit/upload-task.svelte

@@ -1,108 +0,0 @@
-<script lang="ts">
-	import { type UploadTaskSnapshot } from 'firebase/storage';
-	import { firebaseService } from '../../firebase.js';
-	import { firekitUploadTask } from '../../services/storage.svelte.js';
-	import { browser } from '$app/environment';
-	import type { Snippet } from 'svelte';
-	import type { UploadMetadata } from 'firebase/storage';
-
-	/**
-	 * Props for UploadTask component
-	 */
-	let {
-		ref: path,
-		data,
-		metadata,
-		children
-	}: {
-		/**
-		 * Storage reference path string (e.g. 'myFile.txt')
-		 */
-		ref: string;
-		/**
-		 * File data to upload (Blob, Uint8Array, or ArrayBuffer)
-		 */
-		data: Blob | Uint8Array | ArrayBuffer;
-		/**
-		 * Optional file metadata
-		 */
-		metadata?: UploadMetadata;
-		/**
-		 * Content to render during upload
-		 */
-		children: Snippet<[UploadTaskSnapshot | null, any, number, any]>;
-	} = $props();
-
-	// Get Storage instance and create references
-	let storage: any = $state(null);
-	let uploadTaskService: ReturnType<typeof firekitUploadTask> | null = $state(null);
-
-	// Track upload state
-	let uploadState = $state({
-		loading: true,
-		snapshot: null as UploadTaskSnapshot | null,
-		progress: 0,
-		error: null as Error | null,
-		task: null as any
-	});
-
-	// Subscribe to upload changes
-	$effect(() => {
-		if (!browser) {
-			uploadState = {
-				loading: false,
-				snapshot: null,
-				progress: 0,
-				error: new Error('Storage not available in SSR'),
-				task: null
-			};
-			return;
-		}
-
-		// Initialize storage and service
-		storage = firebaseService.getStorageInstance();
-		if (!storage) {
-			uploadState = {
-				loading: false,
-				snapshot: null,
-				progress: 0,
-				error: new Error('Storage instance not available'),
-				task: null
-			};
-			return;
-		}
-
-		// Convert data to File if it's not already a File
-		let file: File;
-		if (data instanceof File) {
-			file = data;
-		} else if (data instanceof Blob) {
-			file = new File([data], path.split('/').pop() || 'file', { type: metadata?.contentType });
-		} else {
-			// For Uint8Array or ArrayBuffer, create a Blob first
-			const blob = new Blob([data], { type: metadata?.contentType });
-			file = new File([blob], path.split('/').pop() || 'file');
-		}
-
-		// Create upload task service
-		uploadTaskService = firekitUploadTask(path, file);
-
-		// The service state is reactive, so we can directly access it
-		// The effect will re-run when the service state changes
-		uploadState = {
-			loading: !uploadTaskService.completed,
-			snapshot: uploadTaskService.snapshot,
-			progress: uploadTaskService.progress,
-			error: uploadTaskService.error,
-			task: uploadTaskService
-		};
-	});
-</script>
-
-{#if !browser}
-	<div>Storage not available in SSR</div>
-{:else if uploadState.error}
-	<div class="error">Error: {uploadState.error.message}</div>
-{:else}
-	{@render children(uploadState.snapshot, uploadState.task, uploadState.progress, storage)}
-{/if}

package/dist/components/firekit/upload-task.svelte.d.ts

@@ -1,24 +0,0 @@
-import { type UploadTaskSnapshot } from 'firebase/storage';
-import type { Snippet } from 'svelte';
-import type { UploadMetadata } from 'firebase/storage';
-type $$ComponentProps = {
-    /**
-     * Storage reference path string (e.g. 'myFile.txt')
-     */
-    ref: string;
-    /**
-     * File data to upload (Blob, Uint8Array, or ArrayBuffer)
-     */
-    data: Blob | Uint8Array | ArrayBuffer;
-    /**
-     * Optional file metadata
-     */
-    metadata?: UploadMetadata;
-    /**
-     * Content to render during upload
-     */
-    children: Snippet<[UploadTaskSnapshot | null, any, number, any]>;
-};
-declare const UploadTask: import("svelte").Component<$$ComponentProps, {}, "">;
-type UploadTask = ReturnType<typeof UploadTask>;
-export default UploadTask;

package/dist/components/nav/app-sidebar.svelte

@@ -1,175 +0,0 @@
-<script lang="ts">
-	import NavDocuments from './nav-components.svelte';
-	import NavMain from './nav-main.svelte';
-	import NavSecondary from './nav-secondary.svelte';
-	import * as Sidebar from '../ui/sidebar/index.js';
-	import type { ComponentProps } from 'svelte';
-	import {
-		IconBook,
-		IconBug,
-		IconFlame,
-		IconLock,
-		IconLockAccess,
-		IconPackage,
-		IconDatabase,
-		IconFileText,
-		IconUpload,
-		IconDownload,
-		IconAppWindow,
-		IconList,
-		IconLogin,
-		IconLogout,
-		IconUsers
-	} from '@tabler/icons-svelte';
-
-	const data = {
-		navMain: [
-			{
-				title: 'Get Started',
-				url: '/docs',
-				icon: IconBook
-			},
-			{
-				title: 'Installation',
-				url: '/docs/installation',
-				icon: IconPackage
-			},
-			{
-				title: 'Collection Service',
-				url: '/docs/collection',
-				icon: IconDatabase
-			},
-			{
-				title: 'Document Service',
-				url: '/docs/document',
-				icon: IconFileText
-			},
-			{
-				title: 'User Service',
-				url: '/docs/user',
-				icon: IconUsers
-			},
-			{
-				title: 'Auth Service',
-				url: '/docs/auth',
-				icon: IconLock
-			},
-			{
-				title: 'Storage Service',
-				url: '/docs/storage',
-				icon: IconUpload
-			},
-			{
-				title: 'Presence Service',
-				url: '/docs/presence',
-				icon: IconUsers
-			},
-			{
-				title: 'Realtime Service',
-				url: '/docs/realtime',
-				icon: IconDatabase
-			},
-			{
-				title: 'Mutations Service',
-				url: '/docs/mutations',
-				icon: IconDatabase
-			},
-			{
-				title: 'Analytics Service',
-				url: '/docs/analytics',
-				icon: IconDatabase
-			}
-		],
-
-		navSecondary: [
-			{
-				title: 'Issues',
-				url: 'https://github.com/code-gio/svelte-firekit/issues',
-				icon: IconBug
-			}
-		],
-		components: [
-			{
-				name: 'Collection',
-				url: '/docs/components/collection',
-				icon: IconDatabase
-			},
-			{
-				name: 'Document',
-				url: '/docs/components/doc',
-				icon: IconFileText
-			},
-			{
-				name: 'Node',
-				url: '/docs/components/node',
-				icon: IconDatabase
-			},
-			{
-				name: 'Upload Task',
-				url: '/docs/components/upload-task',
-				icon: IconUpload
-			},
-			{
-				name: 'Storage List',
-				url: '/docs/components/storage-list',
-				icon: IconList
-			},
-			{
-				name: 'Download URL',
-				url: '/docs/components/download-url',
-				icon: IconDownload
-			},
-			{
-				name: 'Auth Guard',
-				url: '/docs/components/auth-guard',
-				icon: IconLock
-			},
-			{
-				name: 'Custom Guard',
-				url: '/docs/components/custom-guard',
-				icon: IconLockAccess
-			},
-			{
-				name: 'Signed In',
-				url: '/docs/components/signed-in',
-				icon: IconLogin
-			},
-			{
-				name: 'Signed Out',
-				url: '/docs/components/signed-out',
-				icon: IconLogout
-			},
-			{
-				name: 'Firebase App',
-				url: '/docs/components/firebase-app',
-				icon: IconAppWindow
-			}
-		]
-	};
-
-	let { ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
-</script>
-
-<Sidebar.Root collapsible="offcanvas" {...restProps}>
-	<Sidebar.Header>
-		<Sidebar.Menu>
-			<Sidebar.MenuItem>
-				<Sidebar.MenuButton class="data-[slot=sidebar-menu-button]:!p-1.5">
-					{#snippet child({ props })}
-						<a href="/" {...props}>
-							<IconFlame class="!size-5" />
-							<span class="text-base font-semibold">Svelte Firekit</span>
-						</a>
-					{/snippet}
-				</Sidebar.MenuButton>
-			</Sidebar.MenuItem>
-		</Sidebar.Menu>
-	</Sidebar.Header>
-	<Sidebar.Content>
-		<NavMain items={data.navMain} />
-		<NavDocuments items={data.components} />
-	</Sidebar.Content>
-	<Sidebar.Footer>
-		<NavSecondary items={data.navSecondary} />
-	</Sidebar.Footer>
-</Sidebar.Root>

package/dist/components/nav/app-sidebar.svelte.d.ts

@@ -1,9 +0,0 @@
-declare const AppSidebar: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
-    ref?: HTMLElement | null | undefined;
-} & {
-    side?: "left" | "right";
-    variant?: "sidebar" | "floating" | "inset";
-    collapsible?: "offcanvas" | "icon" | "none";
-}, {}, "">;
-type AppSidebar = ReturnType<typeof AppSidebar>;
-export default AppSidebar;

package/dist/components/nav/auto-breadcrumb.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/state';
-	import * as Breadcrumb from '../ui/breadcrumb/index.js';
-
-	const path = $derived(page.url.pathname);
-	const segments = $derived(path.split('/').filter(Boolean)); // split path and remove empty segments
-	const breadcrumbs = $derived(
-		segments.map((segment, index) => {
-			// Construct the path up to this segment
-			const href = '/' + segments.slice(0, index + 1).join('/');
-			const isId = index === segments.length - 1 && segments[index - 1] === 'services';
-
-			return {
-				name: isId
-					? segment
-					: segment.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase()),
-				href,
-				isId
-			};
-		})
-	);
-</script>
-
-<Breadcrumb.Root>
-	<Breadcrumb.List>
-		{#each breadcrumbs as breadcrumb, i}
-			{#if i > 0}
-				<Breadcrumb.Separator class="hidden md:block" />
-			{/if}
-			<Breadcrumb.Item>
-				{#if i === breadcrumbs.length - 1}
-					<Breadcrumb.Page>{breadcrumb.name}</Breadcrumb.Page>
-				{:else}
-					<Breadcrumb.Link href={breadcrumb.href} class="hidden md:block"
-						>{breadcrumb.name}</Breadcrumb.Link
-					>
-				{/if}
-			</Breadcrumb.Item>
-		{/each}
-	</Breadcrumb.List>
-</Breadcrumb.Root>

package/dist/components/nav/auto-breadcrumb.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const AutoBreadcrumb: import("svelte").Component<Record<string, never>, {}, "">;
-type AutoBreadcrumb = ReturnType<typeof AutoBreadcrumb>;
-export default AutoBreadcrumb;

package/dist/components/nav/dark-mode-toggle.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { toggleMode } from 'mode-watcher';
-	import { Button } from '../ui/button/index.js';
-	import MoonIcon from '@tabler/icons-svelte/icons/moon';
-	import SunIcon from '@tabler/icons-svelte/icons/sun';
-</script>
-
-<Button onclick={toggleMode} variant="ghost" size="icon">
-	<SunIcon
-		class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
-	/>
-	<MoonIcon
-		class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
-	/>
-
-	<span class="sr-only">Toggle theme</span>
-</Button>

package/dist/components/nav/dark-mode-toggle.svelte.d.ts

@@ -1,18 +0,0 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DarkModeToggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DarkModeToggle = InstanceType<typeof DarkModeToggle>;
-export default DarkModeToggle;

package/dist/components/nav/nav-components.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import type { Icon } from '@tabler/icons-svelte';
-	import * as Sidebar from '../ui/sidebar/index.js';
-	let { items }: { items: { name: string; url: string; icon: Icon }[] } = $props();
-	const sidebar = Sidebar.useSidebar();
-</script>
-
-<Sidebar.Group class="group-data-[collapsible=icon]:hidden">
-	<Sidebar.GroupLabel>Components</Sidebar.GroupLabel>
-	<Sidebar.Menu>
-		{#each items as item (item.name)}
-			<Sidebar.MenuItem>
-				<Sidebar.MenuButton>
-					{#snippet child({ props })}
-						<a {...props} href={item.url}>
-							<item.icon />
-							<span>{item.name}</span>
-						</a>
-					{/snippet}
-				</Sidebar.MenuButton>
-			</Sidebar.MenuItem>
-		{/each}
-	</Sidebar.Menu>
-</Sidebar.Group>

package/dist/components/nav/nav-components.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Icon } from '@tabler/icons-svelte';
-type $$ComponentProps = {
-    items: {
-        name: string;
-        url: string;
-        icon: Icon;
-    }[];
-};
-declare const NavComponents: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavComponents = ReturnType<typeof NavComponents>;
-export default NavComponents;

package/dist/components/nav/nav-main.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-	import CirclePlusFilledIcon from '@tabler/icons-svelte/icons/circle-plus-filled';
-	import MailIcon from '@tabler/icons-svelte/icons/mail';
-	import { Button } from '../ui/button/index.js';
-	import * as Sidebar from '../ui/sidebar/index.js';
-	import type { Icon } from '@tabler/icons-svelte';
-
-	let { items }: { items: { title: string; url: string; icon?: Icon }[] } = $props();
-</script>
-
-<Sidebar.Group>
-	<Sidebar.GroupContent class="flex flex-col gap-2">
-		<Sidebar.Menu>
-			<Sidebar.MenuItem class="flex items-center gap-2">
-				<Sidebar.MenuButton
-					class="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
-					tooltipContent="Quick create"
-				>
-					{#snippet child({ props })}
-						<a href="https://github.com/code-gio/svelte-firekit-starter" {...props}>
-							<CirclePlusFilledIcon />
-							<span>Use Starter Template</span>
-						</a>
-					{/snippet}
-				</Sidebar.MenuButton>
-			</Sidebar.MenuItem>
-		</Sidebar.Menu>
-		<Sidebar.Menu>
-			{#each items as item (item.title)}
-				<Sidebar.MenuItem>
-					<Sidebar.MenuButton tooltipContent={item.title}>
-						{#snippet child({ props })}
-							<a href={item.url} {...props}>
-								{#if item.icon}
-									<item.icon />
-								{/if}
-								<span>{item.title}</span>
-							</a>
-						{/snippet}
-					</Sidebar.MenuButton>
-				</Sidebar.MenuItem>
-			{/each}
-		</Sidebar.Menu>
-	</Sidebar.GroupContent>
-</Sidebar.Group>

package/dist/components/nav/nav-main.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Icon } from '@tabler/icons-svelte';
-type $$ComponentProps = {
-    items: {
-        title: string;
-        url: string;
-        icon?: Icon;
-    }[];
-};
-declare const NavMain: import("svelte").Component<$$ComponentProps, {}, "">;
-type NavMain = ReturnType<typeof NavMain>;
-export default NavMain;