svelte-crumbs 1.0.2 → 1.2.0

package/README.md

@@ -14,7 +14,29 @@ Automatic, SSR-ready breadcrumbs for SvelteKit via route-level metadata exports.
 npm install svelte-crumbs
 ```
 
-### 2. Export breadcrumbs from your routes
+### 2. Enable experimental async
+
+This library relies on Svelte's experimental `async` compiler option for top-level `await` in components. This is **required**.
+
+```js
+// svelte.config.js
+const config = {
+    kit: {
+        experimental: {
+          remoteFunctions: true
+        }
+    },
+    compilerOptions: {
+        experimental: {
+          async: true
+        }
+    }
+};
+```
+
+> To also use [remote functions](https://svelte.dev/docs/kit/remote-functions) in your breadcrumb resolvers, add `kit.experimental.remoteFunctions: true` as well.
+
+### 3. Export breadcrumbs from your routes
 
 ```svelte
 <!-- src/routes/products/+page.svelte -->
@@ -27,7 +49,7 @@ npm install svelte-crumbs
 </script>
 ```
 
-### 3. Render in your layout
+### 4. Render in your layout
 
 ```svelte
 <!-- src/routes/+layout.svelte -->
@@ -218,30 +240,10 @@ type Breadcrumb = BreadcrumbData & { url: string };
 
 ## Requirements
 
+- **Svelte 5** with `compilerOptions.experimental.async: true` — uses `$derived(await ...)` for reactive, SSR-safe breadcrumbs
 - **SvelteKit 2** — relies on `$app/state` and `import.meta.glob`
-- **Svelte 5** — uses runes (`$derived`)
 - Route groups (`(group)`) are stripped from paths
 
-### Optional: enable async and remote functions
-
-The library works without any experimental flags — you can use load functions or resolve breadcrumbs manually. However, to unlock top-level `await` in components and remote function support, enable these flags:
-
-```js
-// svelte.config.js
-const config = {
-  compilerOptions: {
-    experimental: {
-      async: true // top-level await in components
-    }
-  },
-  kit: {
-    experimental: {
-      remoteFunctions: true // call server functions from breadcrumb resolvers
-    }
-  }
-};
-```
-
 ## License
 
 MIT

package/dist/components/breadcrumbs.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+	import { onMount } from 'svelte';
+	import type { Breadcrumb } from '../types.js';
+
+	let { crumbs }: { crumbs: Breadcrumb[] } = $props();
+
+	let mounted = $state(false);
+	onMount(() => {
+		mounted = true;
+	});
+
+	// eslint-disable-next-line svelte/prefer-writable-derived -- intentionally stale: out-transitions need the previous count
+	let prevCount = $state(crumbs.length);
+	$effect(() => {
+		prevCount = crumbs.length;
+	});
+
+	function flyIn(node: Element, params: { y?: number; duration?: number; i?: number }) {
+		if (!mounted) return { duration: 0 };
+		const { i: index = 0, ...flyParams } = params;
+		return fly(node, { ...flyParams, delay: index * 60 });
+	}
+
+	function flyOut(node: Element, params: { y?: number; duration?: number; i?: number }) {
+		if (!mounted) return { duration: 0 };
+		const { i: index = 0, ...flyParams } = params;
+		const reverseIndex = prevCount - 1 - index;
+		return fly(node, { ...flyParams, delay: Math.max(0, reverseIndex) * 60 });
+	}
+</script>
+
+<nav
+	aria-label="Breadcrumbs"
+	class="flex items-center gap-2 rounded-lg bg-(--color-code-bg) px-4 py-3 text-sm"
+>
+	{#each crumbs as crumb, i (crumb.url)}
+		<span
+			class="inline-flex items-center gap-2"
+			in:flyIn={{ y: -10, duration: 200, i }}
+			out:flyOut={{ y: 10, duration: 200, i }}
+			animate:flip={{ duration: 200 }}
+		>
+			{#if i > 0}
+				<span aria-hidden="true" class="text-(--color-text-muted)">▶︎</span>
+			{/if}
+			{#if crumb.icon}
+				{@const Icon = crumb.icon}
+				<Icon />
+			{/if}
+			{#if i < crumbs.length - 1 || crumbs.length === 1}
+				<a href={crumb.url} class="text-(--color-text-secondary) hover:text-(--color-text-primary) hover:underline"
+					>{crumb.label}</a
+				>
+			{:else}
+				<span class="text-(--color-text-primary)" aria-current="page">{crumb.label}</span>
+			{/if}
+		</span>
+	{/each}
+</nav>

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

@@ -0,0 +1,7 @@
+import type { Breadcrumb } from '../types.js';
+type $$ComponentProps = {
+    crumbs: Breadcrumb[];
+};
+declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/components/code-block.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { codeToHtml } from 'shiki';
+	import { getTheme } from '../stores/theme.svelte.js';
+
+	let { code, lang = 'ts', raw = false }: { code: string; lang?: string; raw?: boolean } = $props();
+
+	const theme = $derived(getTheme());
+
+	function wrap(inner: string): string {
+		const indented = inner
+			.split('\n')
+			.map((line) => '\t' + line)
+			.join('\n');
+		return '<' + 'script module lang="ts">\n' + indented + '\n</' + 'script>';
+	}
+
+	const html = $derived(
+		await codeToHtml(raw ? code : wrap(code), {
+			lang,
+			theme: theme === 'dark' ? 'github-dark' : 'github-light'
+		})
+	);
+</script>
+
+<div class="mt-4 overflow-x-auto rounded-lg border border-(--color-border) text-sm [&_pre]:p-4">
+	{@html html}
+</div>

package/dist/components/code-block.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    code: string;
+    lang?: string;
+    raw?: boolean;
+};
+declare const CodeBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/footer.svelte

@@ -0,0 +1,3 @@
+<footer class="mt-12 border-t border-(--color-border) py-6 text-center text-sm text-(--color-text-muted)">
+	MIT &copy; {new Date().getFullYear()} svelte-crumbs (use this however you like)
+</footer>

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

@@ -0,0 +1,26 @@
+export default Footer;
+type Footer = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Footer: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/components/sidebar.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { navigation } from '../config/navigation.js';
+
+	let { open = false, onClose }: { open?: boolean; onClose: () => void } = $props();
+
+	function isActive(href: string): boolean {
+		return page.url.pathname === href;
+	}
+</script>
+
+<!-- Mobile overlay -->
+{#if open}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-40 bg-black/50 lg:hidden"
+		onclick={onClose}
+		onkeydown={(e) => e.key === 'Escape' && onClose()}
+	></div>
+{/if}
+
+<aside
+	class="fixed top-14 bottom-0 z-50 w-64 overflow-y-auto border-r border-(--color-border) bg-(--color-bg-sidebar) p-4 transition-transform duration-200 lg:z-30 lg:translate-x-0"
+	class:max-lg:-translate-x-full={!open}
+	class:max-lg:translate-x-0={open}
+>
+	<nav>
+		{#each navigation as section}
+			<div class="mb-6">
+				<h4 class="mb-2 text-xs font-semibold tracking-wider text-(--color-text-muted) uppercase">
+					{section.title}
+				</h4>
+				<ul class="space-y-1">
+					{#each section.items as item}
+						<li>
+							<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+							<a
+								href={item.href}
+								onclick={onClose}
+								class="block rounded-md px-3 py-1.5 text-sm transition-colors {isActive(item.href)
+									? 'bg-(--color-accent)/10 font-medium text-(--color-accent)'
+									: 'text-(--color-text-secondary) hover:bg-(--color-code-bg) hover:text-(--color-text-primary)'}"
+							>
+								{item.label}
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/each}
+	</nav>
+</aside>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    open?: boolean;
+    onClose: () => void;
+};
+declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/top-nav.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { toggleTheme, getTheme } from '../stores/theme.svelte.js';
+
+	const appVersion: string = __APP_VERSION__;
+
+	let { onToggleSidebar }: { onToggleSidebar: () => void } = $props();
+
+	const theme = $derived(getTheme());
+</script>
+
+<header
+	class="fixed top-0 right-0 left-0 z-40 flex h-14 items-center justify-between border-b border-(--color-border) bg-(--color-bg-nav) px-4"
+>
+	<div class="flex items-center gap-3">
+		<button
+			class="lg:hidden rounded-md p-1.5 text-(--color-text-secondary) hover:text-(--color-text-primary) hover:bg-(--color-code-bg)"
+			onclick={onToggleSidebar}
+			aria-label="Toggle sidebar"
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<line x1="3" y1="6" x2="21" y2="6" />
+				<line x1="3" y1="12" x2="21" y2="12" />
+				<line x1="3" y1="18" x2="21" y2="18" />
+			</svg>
+		</button>
+		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+		<a href="/" class="text-lg font-semibold text-(--color-text-primary)">svelte-crumbs</a>
+		<span class="rounded-full bg-(--color-code-bg) px-2 py-0.5 text-xs text-(--color-text-muted)">v{appVersion}</span>
+	</div>
+
+	<div class="flex items-center gap-2">
+		<button
+			class="rounded-md p-1.5 text-(--color-text-secondary) hover:text-(--color-text-primary) hover:bg-(--color-code-bg)"
+			onclick={toggleTheme}
+			aria-label="Toggle theme"
+		>
+			{#if theme === 'dark'}
+				<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<circle cx="12" cy="12" r="5" />
+					<line x1="12" y1="1" x2="12" y2="3" />
+					<line x1="12" y1="21" x2="12" y2="23" />
+					<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+					<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+					<line x1="1" y1="12" x2="3" y2="12" />
+					<line x1="21" y1="12" x2="23" y2="12" />
+					<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+					<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+				</svg>
+			{:else}
+				<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+				</svg>
+			{/if}
+		</button>
+		<a
+			href="https://github.com/torrfura/svelte-crumbs"
+			target="_blank"
+			rel="noopener noreferrer"
+			class="rounded-md p-1.5 text-(--color-text-secondary) hover:text-(--color-text-primary) hover:bg-(--color-code-bg)"
+			aria-label="GitHub"
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+				<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+			</svg>
+		</a>
+	</div>
+</header>

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

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

package/dist/config/navigation.d.ts

@@ -0,0 +1,9 @@
+export interface NavItem {
+    label: string;
+    href: string;
+}
+export interface NavSection {
+    title: string;
+    items: NavItem[];
+}
+export declare const navigation: NavSection[];

package/dist/config/navigation.js

@@ -0,0 +1,29 @@
+export const navigation = [
+    {
+        title: 'Getting Started',
+        items: [
+            { label: 'Introduction', href: '/' },
+            { label: 'Installation', href: '/docs/getting-started' },
+            { label: 'API Reference', href: '/docs/api-reference' }
+        ]
+    },
+    {
+        title: 'Patterns',
+        items: [
+            { label: 'Static Label', href: '/products' },
+            { label: 'Dynamic from Load Data', href: '/products/42' },
+            { label: 'Nested Static', href: '/products/42/edit' },
+            { label: 'Remote Function', href: '/docs/getting-started' },
+            { label: 'Optimistic Update', href: '/playground' },
+            { label: 'No Breadcrumb', href: '/about' }
+        ]
+    },
+    {
+        title: 'Examples',
+        items: [
+            { label: 'Products', href: '/products' },
+            { label: 'Documentation', href: '/docs' },
+            { label: 'Reactive Updates', href: '/playground' }
+        ]
+    }
+];

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { createBreadcrumbs } from './breadcrumbs/create-breadcrumbs.svelte.js';
+export { default as Breadcrumbs } from './components/breadcrumbs.svelte';
 export { buildBreadcrumbMap } from './routing/build-breadcrumb-map.js';
 export { filePathToRoute, matchDynamicRoute } from './routing/match-route.js';
 export { getResolversForRoute } from './routing/get-resolvers-for-route.js';

package/dist/index.js

@@ -1,4 +1,5 @@
 export { createBreadcrumbs } from './breadcrumbs/create-breadcrumbs.svelte.js';
+export { default as Breadcrumbs } from './components/breadcrumbs.svelte';
 export { buildBreadcrumbMap } from './routing/build-breadcrumb-map.js';
 export { filePathToRoute, matchDynamicRoute } from './routing/match-route.js';
 export { getResolversForRoute } from './routing/get-resolvers-for-route.js';

package/dist/stores/theme.svelte.d.ts

@@ -0,0 +1,6 @@
+type Theme = 'light' | 'dark';
+export declare function getTheme(): Theme;
+export declare function setTheme(value: Theme): void;
+export declare function toggleTheme(): void;
+export declare function initTheme(): void;
+export {};

package/dist/stores/theme.svelte.js

@@ -0,0 +1,21 @@
+let theme = $state('light');
+export function getTheme() {
+    return theme;
+}
+export function setTheme(value) {
+    theme = value;
+    if (typeof document !== 'undefined') {
+        document.documentElement.classList.toggle('dark', value === 'dark');
+        localStorage.setItem('theme', value);
+    }
+}
+export function toggleTheme() {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+}
+export function initTheme() {
+    if (typeof document === 'undefined')
+        return;
+    const stored = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    setTheme(stored ?? (prefersDark ? 'dark' : 'light'));
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "svelte-crumbs",
-	"version": "1.0.2",
-	"description": "Automatic breadcrumbs for SvelteKit via route-level metadata exports",
+	"version": "1.2.0",
+	"description": "Automatic, SSR-ready breadcrumbs for SvelteKit — zero config, async resolvers, remote function support",
 	"license": "MIT",
 	"homepage": "https://svelte-crumbs.vercel.app",
 	"repository": {
@@ -46,7 +46,6 @@
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@changesets/cli": "^2.29.8",
 		"@eslint/compat": "^2.0.2",
 		"@eslint/js": "^9.39.3",
 		"@sveltejs/adapter-auto": "^7.0.1",
@@ -76,8 +75,12 @@
 	},
 	"keywords": [
 		"svelte",
+		"svelte5",
 		"sveltekit",
 		"breadcrumbs",
-		"navigation"
+		"navigation",
+		"ssr",
+		"async",
+		"remote-functions"
 	]
 }