svelte-firekit 0.1.7 → 0.1.9

package/dist/components/docs/doc-content.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { TableOfContents } from './toc.svelte.js';
+
+	let contentRef: HTMLElement | undefined = $state();
+	let { data }: { data: any } = $props();
+
+	let toc = $state(TableOfContents.getInstance());
+
+	onMount(() => {
+		if (contentRef) {
+			toc.updateContentRef(contentRef);
+		}
+	});
+</script>
+
+<div class="prose prose-slate dark:prose-invert mx-auto max-w-4xl" bind:this={contentRef}>
+	<data.doc />
+</div>

package/dist/components/docs/doc-content.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    data: any;
+};
+declare const DocContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocContent = ReturnType<typeof DocContent>;
+export default DocContent;

package/dist/components/docs/doc-header.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { page } from '$app/state';
+
+	let { title, description } = $props();
+</script>
+
+<header class="mb-4 border-b border-gray-200 pb-2 dark:border-neutral-700 sm:mb-4 sm:pb-6">
+	{#if page.params.slug}
+		<p class="mb-2 text-sm font-semibold capitalize text-primary">
+			{page.params.slug
+				.replace(/-/g, ' ')
+				.replace(/\b\w/g, (char) => char.toUpperCase())
+				.replace('/', ': ')}
+		</p>
+	{:else}
+		<p class="mb-2 text-sm font-semibold capitalize text-primary">Docs</p>
+	{/if}
+	<h1 class="mb-2 block text-2xl font-bold sm:text-3xl">
+		{title}
+	</h1>
+	<p class="mt-2 text-gray-800 dark:text-neutral-400 sm:text-lg">
+		{description}
+	</p>
+</header>

package/dist/components/docs/doc-header.svelte.d.ts

@@ -0,0 +1,13 @@
+export default DocHeader;
+type DocHeader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const DocHeader: import("svelte").Component<{
+    title: any;
+    description: any;
+}, {}, "">;
+type $$ComponentProps = {
+    title: any;
+    description: any;
+};

package/dist/components/docs/doc-renderer.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import Separator from '../ui/separator/separator.svelte';
+	import DocContent from './doc-content.svelte';
+	import DocHeader from './doc-header.svelte';
+	import TableOfContents from './table-of-contents.svelte';
+	import MobileTableOfContents from './mobile-table-of-contents.svelte';
+
+	let { title, description, data }: { title: string; description: string; data: any } = $props();
+</script>
+
+<div class="flex flex-col gap-6 sm:flex-row sm:justify-between">
+	<div>
+		<DocHeader {title} {description} />
+		<DocContent {data} />
+	</div>
+	<div>
+		<div class="sticky top-4 flex w-72 flex-col gap-4">
+			<div class="hidden sm:block">
+				<TableOfContents />
+				<Separator />
+			</div>
+			<div class="block sm:hidden">
+				<MobileTableOfContents />
+			</div>
+		</div>
+	</div>
+</div>

package/dist/components/docs/doc-renderer.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    title: string;
+    description: string;
+    data: any;
+};
+declare const DocRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocRenderer = ReturnType<typeof DocRenderer>;
+export default DocRenderer;

package/dist/components/docs/mobile-table-of-contents.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import * as Dialog from '../ui/dialog/index.js';
+	import { TableOfContents } from './toc.svelte.js';
+	import Button, { buttonVariants } from '../ui/button/button.svelte';
+	import { IconAlignLeft, IconChevronRight } from '@tabler/icons-svelte';
+	import { ScrollArea } from '../ui/scroll-area/index.js';
+
+	let toc = $state(TableOfContents.getInstance());
+	let opened = $state(false);
+</script>
+
+<Dialog.Root bind:open={opened}>
+	<Dialog.Trigger class="fixed right-2 bottom-2 {buttonVariants({ variant: 'default' })}">
+		<IconAlignLeft />
+		On This Page
+	</Dialog.Trigger>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>On this page</Dialog.Title>
+		</Dialog.Header>
+		<ScrollArea class="h-80">
+			<ul>
+				{#each toc.headings as heading}
+					<li>
+						<Button
+							variant="link"
+							href="#{heading.id}"
+							style="margin-left: {(heading.level - 1) * 1}rem"
+							class="font-base text-sm text-gray-800 dark:text-neutral-300"
+							onclick={() => (opened = false)}
+						>
+							{#if heading.level > 1}
+								<IconChevronRight class="mt-[5px] size-3.5 shrink-0" />
+							{/if}
+							{heading.text}
+						</Button>
+					</li>
+				{/each}
+			</ul>
+		</ScrollArea>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/components/docs/mobile-table-of-contents.svelte.d.ts

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

package/dist/components/docs/table-of-contents.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import Button from '../ui/button/button.svelte';
+	import { TableOfContents } from './toc.svelte.js';
+
+	import { IconChevronRight } from '@tabler/icons-svelte';
+	let toc = $state(TableOfContents.getInstance());
+</script>
+
+<div>
+	<h5
+		id="docs-on-this-page-sidebar-label"
+		class="mb-3 text-sm font-semibold text-gray-800 dark:text-neutral-300"
+	>
+		On this page
+	</h5>
+	<ul>
+		{#each toc.headings as heading}
+			<li>
+				<Button
+					variant="link"
+					href="#{heading.id}"
+					style="margin-left: {(heading.level - 1) * 1}rem"
+					class="font-base text-sm text-gray-800 dark:text-neutral-300"
+				>
+					{#if heading.level > 1}
+						<IconChevronRight class="mt-[5px] size-3.5 shrink-0" />
+					{/if}
+					{heading.text}
+				</Button>
+			</li>
+		{/each}
+	</ul>
+</div>

package/dist/components/docs/table-of-contents.svelte.d.ts

@@ -0,0 +1,4 @@
+import { TableOfContents } from './toc.svelte.js';
+declare const TableOfContents: import("svelte").Component<Record<string, never>, {}, "">;
+type TableOfContents = ReturnType<typeof TableOfContents>;
+export default TableOfContents;

package/dist/components/docs/toc.svelte.d.ts

@@ -0,0 +1,16 @@
+export declare class TableOfContents {
+    contentRef: HTMLElement | undefined;
+    headings: Array<{
+        id: string;
+        text: string;
+        level: number;
+    }>;
+    private observer;
+    private static instance;
+    private constructor();
+    static getInstance(contentRef?: HTMLElement): TableOfContents;
+    updateContentRef(newRef: HTMLElement | undefined): void;
+    private extractHeadings;
+    private initializeObserver;
+    destroy(): void;
+}

package/dist/components/docs/toc.svelte.js

@@ -0,0 +1,59 @@
+export class TableOfContents {
+    contentRef;
+    headings = $state([]);
+    observer = null;
+    static instance;
+    constructor(contentRef) {
+        this.contentRef = contentRef;
+        if (contentRef) {
+            this.initializeObserver();
+        }
+    }
+    static getInstance(contentRef) {
+        if (!TableOfContents.instance) {
+            TableOfContents.instance = new TableOfContents(contentRef);
+        }
+        else if (contentRef) {
+            TableOfContents.instance.updateContentRef(contentRef);
+        }
+        return TableOfContents.instance;
+    }
+    updateContentRef(newRef) {
+        this.observer?.disconnect();
+        this.contentRef = newRef;
+        if (newRef) {
+            this.initializeObserver();
+        }
+        else {
+            this.headings = [];
+        }
+    }
+    extractHeadings() {
+        if (!this.contentRef)
+            return;
+        const headingElements = this.contentRef.querySelectorAll('h1, h2, h3, h4, h5, h6');
+        this.headings = Array.from(headingElements)
+            .map((heading) => {
+            const level = parseInt(heading.tagName.charAt(1));
+            const text = heading.textContent || '';
+            const id = heading.id || text.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+            if (!heading.id)
+                heading.id = id;
+            return { id, text, level };
+        })
+            .filter((heading) => heading.text !== null && heading.text !== '');
+    }
+    initializeObserver() {
+        this.extractHeadings();
+        this.observer = new MutationObserver(() => this.extractHeadings());
+        if (!this.contentRef)
+            return;
+        this.observer.observe(this.contentRef, {
+            childList: true,
+            subtree: true
+        });
+    }
+    destroy() {
+        this.observer?.disconnect();
+    }
+}

package/dist/components/{Collection.svelte → firekit/Collection.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { firekitCollection } from '../services/collection.svelte.js';
-	import { firebaseService } from '../firebase.js';
+	import { firekitCollection } from '../../services/collection.svelte.js';
+	import { firebaseService } from '../../firebase.js';
 	import { collection } from 'firebase/firestore';
 	import { browser } from '$app/environment';
 	import type {

package/dist/components/{Doc.svelte → firekit/Doc.svelte}

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { firekitDoc } from '../services/document.svelte.js';
-	import { firebaseService } from '../firebase.js';
+	import { firekitDoc } from '../../services/document.svelte.js';
+	import { firebaseService } from '../../firebase.js';
 	import { doc } from 'firebase/firestore';
 	import { browser } from '$app/environment';
 	import type { DocumentReference, DocumentData, Firestore } from 'firebase/firestore';
 	import type { Snippet } from 'svelte';
-	import type { DocumentOptions } from '../types/document.js';
+	import type { DocumentOptions } from '../../types/document.js';
 
 	/**
 	 * Props for Doc component
@@ -103,9 +103,9 @@
 {#if !browser}
 	{@render children(startWith ?? null, null as any, null as any)}
 {:else if !firestore}
-	<div class="flex items-center justify-center min-h-screen">
+	<div class="flex min-h-screen items-center justify-center">
 		<div class="text-center">
-			<div class="text-red-500 text-lg font-semibold mb-2">Firestore Not Available</div>
+			<div class="mb-2 text-lg font-semibold text-red-500">Firestore Not Available</div>
 			<p class="text-gray-600">Firestore instance is not available.</p>
 		</div>
 	</div>
@@ -113,21 +113,21 @@
 	{#if loading}
 		{@render loading()}
 	{:else}
-		<div class="flex items-center justify-center min-h-screen">
+		<div class="flex min-h-screen items-center justify-center">
 			<div class="text-center">
-				<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto"></div>
+				<div class="mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-gray-900"></div>
 				<p class="mt-2 text-gray-600">Loading document...</p>
 			</div>
 		</div>
 	{/if}
 {:else if documentState.error}
-	<div class="flex items-center justify-center min-h-screen">
+	<div class="flex min-h-screen items-center justify-center">
 		<div class="text-center">
-			<div class="text-red-500 text-lg font-semibold mb-2">Error Loading Document</div>
-			<p class="text-gray-600 mb-4">{documentState.error.message}</p>
+			<div class="mb-2 text-lg font-semibold text-red-500">Error Loading Document</div>
+			<p class="mb-4 text-gray-600">{documentState.error.message}</p>
 			{#if documentState.canRefresh}
 				<button
-					class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+					class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
 					onclick={() => documentService?.refresh()}
 				>
 					Retry

package/dist/components/{Doc.svelte.d.ts → firekit/Doc.svelte.d.ts}

@@ -1,6 +1,6 @@
 import type { DocumentReference, DocumentData, Firestore } from 'firebase/firestore';
 import type { Snippet } from 'svelte';
-import type { DocumentOptions } from '../types/document.js';
+import type { DocumentOptions } from '../../types/document.js';
 type $$ComponentProps = {
     /**
      * Firestore document reference or path string

package/dist/components/{Node.svelte → firekit/Node.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ref, type DatabaseReference, type Database } from 'firebase/database';
-	import { firebaseService } from '../firebase.js';
-	import { firekitRealtimeDB } from '../services/realtime.svelte.js';
+	import { firebaseService } from '../../firebase.js';
+	import { firekitRealtimeDB } from '../../services/realtime.svelte.js';
 	import { browser } from '$app/environment';
 	import type { Snippet } from 'svelte';
 

package/dist/components/{auth-guard.svelte → firekit/auth-guard.svelte}

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { firekitAuth } from '../services/auth.js';
+	import { firekitAuth } from '../../services/auth.js';
 	import { getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { onMount, onDestroy } from 'svelte';
-	import type { UserProfile } from '../types/auth.js';
+	import type { UserProfile } from '../../types/auth.js';
 	import type { Auth } from 'firebase/auth';
 	import type { Snippet } from 'svelte';
 
@@ -54,7 +54,7 @@
 			// If context doesn't exist, get from service
 			if (!auth) {
 				console.warn('Firebase Auth not found in context, using service directly');
-				const { firebaseService } = await import('../firebase.js');
+				const { firebaseService } = await import('../../firebase.js');
 				auth = firebaseService.getAuthInstance();
 			}
 
@@ -108,9 +108,9 @@
 	{#if fallback}
 		{@render fallback()}
 	{:else}
-		<div class="flex items-center justify-center min-h-screen">
+		<div class="flex min-h-screen items-center justify-center">
 			<div class="text-center">
-				<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto"></div>
+				<div class="mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-gray-900"></div>
 				<p class="mt-2 text-gray-600">Loading...</p>
 			</div>
 		</div>

package/dist/components/{auth-guard.svelte.d.ts → firekit/auth-guard.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { UserProfile } from '../types/auth.js';
+import type { UserProfile } from '../../types/auth.js';
 import type { Auth } from 'firebase/auth';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {

package/dist/components/{custom-guard.svelte → firekit/custom-guard.svelte}

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { firekitAuth } from '../services/auth.js';
+	import { firekitAuth } from '../../services/auth.js';
 	import { getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { onMount, onDestroy } from 'svelte';
-	import type { UserProfile } from '../types/auth.js';
+	import type { UserProfile } from '../../types/auth.js';
 	import type { Auth } from 'firebase/auth';
 	import type { Snippet } from 'svelte';
 
@@ -107,7 +107,7 @@
 			// If context doesn't exist, get from service
 			if (!auth) {
 				console.warn('Firebase Auth not found in context, using service directly');
-				const { firebaseService } = await import('../firebase.js');
+				const { firebaseService } = await import('../../firebase.js');
 				auth = firebaseService.getAuthInstance();
 			}
 
@@ -149,9 +149,9 @@
 	{#if fallback}
 		{@render fallback()}
 	{:else}
-		<div class="flex items-center justify-center min-h-screen">
+		<div class="flex min-h-screen items-center justify-center">
 			<div class="text-center">
-				<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto"></div>
+				<div class="mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-gray-900"></div>
 				<p class="mt-2 text-gray-600">
 					{isVerifying ? 'Verifying access...' : 'Loading...'}
 				</p>

package/dist/components/{custom-guard.svelte.d.ts → firekit/custom-guard.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { UserProfile } from '../types/auth.js';
+import type { UserProfile } from '../../types/auth.js';
 import type { Auth } from 'firebase/auth';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {

package/dist/components/{download-url.svelte → firekit/download-url.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ref, type StorageReference } from 'firebase/storage';
-	import { firebaseService } from '../firebase.js';
-	import { firekitDownloadUrl } from '../services/storage.svelte.js';
+	import { firebaseService } from '../../firebase.js';
+	import { firekitDownloadUrl } from '../../services/storage.svelte.js';
 	import { browser } from '$app/environment';
 	import type { Snippet } from 'svelte';
 

package/dist/components/{firebase-app.svelte → firekit/firebase-app.svelte}

@@ -2,7 +2,7 @@
 	import { setContext } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import { browser } from '$app/environment';
-	import { firebaseService } from '../firebase.js';
+	import { firebaseService } from '../../firebase.js';
 
 	/**
 	 * Props for FirebaseApp component

package/dist/components/{node-list.svelte → firekit/node-list.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ref, type DatabaseReference, type Database } from 'firebase/database';
-	import { firebaseService } from '../firebase.js';
-	import { firekitRealtimeList } from '../services/realtime.svelte.js';
+	import { firebaseService } from '../../firebase.js';
+	import { firekitRealtimeList } from '../../services/realtime.svelte.js';
 	import { browser } from '$app/environment';
 	import type { Snippet } from 'svelte';
 

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { firekitAuth } from '../services/auth.js';
-	import { firebaseService } from '../firebase.js';
+	import { firekitAuth } from '../../services/auth.js';
+	import { firebaseService } from '../../firebase.js';
 	import { onDestroy } from 'svelte';
-	import type { UserProfile } from '../types/auth.js';
+	import type { UserProfile } from '../../types/auth.js';
 	import type { Snippet } from 'svelte';
 
 	/**

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

@@ -1,4 +1,4 @@
-import type { UserProfile } from '../types/auth.js';
+import type { UserProfile } from '../../types/auth.js';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     /**

package/dist/components/{signed-out.svelte → firekit/signed-out.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { firekitAuth } from '../services/auth.js';
-	import { firebaseService } from '../firebase.js';
+	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';

package/dist/components/{storage-list.svelte → firekit/storage-list.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ref, type StorageReference } from 'firebase/storage';
-	import { firebaseService } from '../firebase.js';
-	import { firekitStorageList } from '../services/storage.svelte.js';
+	import { firebaseService } from '../../firebase.js';
+	import { firekitStorageList } from '../../services/storage.svelte.js';
 	import { browser } from '$app/environment';
 	import type { Snippet } from 'svelte';
 

package/dist/components/{upload-task.svelte → firekit/upload-task.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { type UploadTaskSnapshot } from 'firebase/storage';
-	import { firebaseService } from '../firebase.js';
-	import { firekitUploadTask } from '../services/storage.svelte.js';
+	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';