@finsweet/webflow-apps-utils 1.0.3 → 1.0.4

package/dist/router/examples/pages/HomePage.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+	import type { Router } from '../../router.svelte';
+
+	interface Props {
+		params: Record<string, string>;
+		location: {
+			pathname: string;
+			search: string;
+			hash?: string;
+			params: Record<string, string>;
+		};
+		router: Router;
+	}
+
+	let { params, location, router }: Props = $props();
+</script>
+
+<div class="home-page">
+	<div class="hero-section">
+		<h1>Welcome to Our Application</h1>
+		<p class="lead">
+			This is the home page demonstrating the custom Svelte 5 router implementation.
+		</p>
+
+		<div class="cta-buttons">
+			<button class="btn btn-primary" onclick={() => router.navigate('/about')}>
+				Learn More About Us
+			</button>
+			<button class="btn btn-secondary" onclick={() => router.navigate('/about/team')}>
+				Meet Our Team
+			</button>
+		</div>
+	</div>
+
+	<div class="features-section">
+		<h2>Router Features</h2>
+		<div class="features-grid">
+			<div class="feature-card">
+				<h3>🚀 Svelte 5 Runes</h3>
+				<p>Built with modern Svelte 5 reactivity using $state, $derived, and $effect.</p>
+			</div>
+			<div class="feature-card">
+				<h3>🔗 Dynamic Routing</h3>
+				<p>Support for parameterized routes like <code>/about/:section</code>.</p>
+			</div>
+			<div class="feature-card">
+				<h3>📍 Active States</h3>
+				<p>Automatic active link detection with customizable CSS classes.</p>
+			</div>
+			<div class="feature-card">
+				<h3>🔄 History Management</h3>
+				<p>Built-in browser history support with back/forward navigation.</p>
+			</div>
+		</div>
+	</div>
+
+	<div class="debug-section">
+		<h3>Route Debug Information</h3>
+		<div class="debug-info">
+			<p><strong>Current Path:</strong> {location?.pathname}</p>
+			<p><strong>Parameters:</strong> {JSON.stringify(params)}</p>
+			<p><strong>Search Query:</strong> {location?.search || 'None'}</p>
+			<p><strong>Hash:</strong> {location?.hash || 'None'}</p>
+		</div>
+	</div>
+</div>
+
+<style>
+	.home-page {
+		max-width: 100%;
+	}
+
+	.hero-section {
+		text-align: center;
+		margin-bottom: 3rem;
+	}
+
+	.hero-section h1 {
+		font-size: 2.5rem;
+		color: #2c3e50;
+		margin: 0 0 1rem 0;
+		font-weight: 600;
+	}
+
+	.lead {
+		font-size: 1.25rem;
+		color: #6c757d;
+		margin: 0 0 2rem 0;
+		line-height: 1.6;
+	}
+
+	.cta-buttons {
+		display: flex;
+		gap: 1rem;
+		justify-content: center;
+		flex-wrap: wrap;
+	}
+
+	.btn {
+		padding: 0.75rem 1.5rem;
+		border: none;
+		border-radius: 6px;
+		font-size: 1rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		text-decoration: none;
+		display: inline-block;
+	}
+
+	.btn-primary {
+		background: #007bff;
+		color: white;
+	}
+
+	.btn-primary:hover {
+		background: #0056b3;
+		transform: translateY(-1px);
+	}
+
+	.btn-secondary {
+		background: #6c757d;
+		color: white;
+	}
+
+	.btn-secondary:hover {
+		background: #545b62;
+		transform: translateY(-1px);
+	}
+
+	.features-section {
+		margin-bottom: 3rem;
+	}
+
+	.features-section h2 {
+		text-align: center;
+		color: #2c3e50;
+		margin-bottom: 2rem;
+		font-size: 2rem;
+	}
+
+	.features-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+		gap: 1.5rem;
+	}
+
+	.feature-card {
+		padding: 1.5rem;
+		border: 1px solid #e1e5e9;
+		border-radius: 8px;
+		background: #f8f9fa;
+		text-align: center;
+	}
+
+	.feature-card h3 {
+		font-size: 1.25rem;
+		margin: 0 0 1rem 0;
+		color: #2c3e50;
+	}
+
+	.feature-card p {
+		margin: 0;
+		color: #6c757d;
+		line-height: 1.5;
+	}
+
+	.feature-card code {
+		background: #e9ecef;
+		padding: 0.2rem 0.4rem;
+		border-radius: 3px;
+		font-family: 'SFMono-Regular', Consolas, monospace;
+		font-size: 0.875rem;
+		color: #e83e8c;
+	}
+
+	.debug-section {
+		background: #f8f9fa;
+		border: 1px solid #e1e5e9;
+		border-radius: 8px;
+		padding: 1.5rem;
+	}
+
+	.debug-section h3 {
+		margin: 0 0 1rem 0;
+		color: #2c3e50;
+		font-size: 1.125rem;
+	}
+
+	.debug-info p {
+		margin: 0.5rem 0;
+		font-family: 'SFMono-Regular', Consolas, monospace;
+		font-size: 0.875rem;
+		color: #495057;
+	}
+
+	.debug-info strong {
+		color: #2c3e50;
+	}
+</style>

package/dist/router/examples/pages/HomePage.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Router } from '../../router.svelte';
+interface Props {
+    params: Record<string, string>;
+    location: {
+        pathname: string;
+        search: string;
+        hash?: string;
+        params: Record<string, string>;
+    };
+    router: Router;
+}
+declare const HomePage: import("svelte").Component<Props, {}, "">;
+type HomePage = ReturnType<typeof HomePage>;
+export default HomePage;

package/dist/router/examples/pages/NotFoundPage.svelte

@@ -0,0 +1,307 @@
+<script lang="ts">
+	import type { Router } from '../../router.svelte';
+
+	interface Props {
+		params: Record<string, string>;
+		location: {
+			pathname: string;
+			search: string;
+			hash?: string;
+			params: Record<string, string>;
+			url?: { href: string };
+		};
+		router: Router;
+	}
+
+	let { params, location, router }: Props = $props();
+</script>
+
+<div class="not-found-page">
+	<div class="error-content">
+		<div class="error-icon">🔍</div>
+		<h1>404 - Page Not Found</h1>
+		<p class="error-message">
+			Oops! The page you're looking for doesn't exist. It might have been moved, deleted, or you
+			entered the wrong URL.
+		</p>
+
+		<div class="error-details">
+			<p><strong>Requested path:</strong> <code>{location?.pathname}</code></p>
+			{#if location?.search}
+				<p><strong>Query string:</strong> <code>{location.search}</code></p>
+			{/if}
+		</div>
+
+		<div class="action-buttons">
+			<button class="btn btn-primary" onclick={() => router.navigate('/')}> 🏠 Go Home </button>
+			<button class="btn btn-secondary" onclick={() => router.back()}> ← Go Back </button>
+			<button class="btn btn-outline" onclick={() => router.navigate('/about')}>
+				📖 About Us
+			</button>
+		</div>
+	</div>
+
+	<div class="suggestions">
+		<h2>What can you do?</h2>
+		<div class="suggestions-grid">
+			<div class="suggestion-card">
+				<div class="suggestion-icon">🏠</div>
+				<h3>Go to Homepage</h3>
+				<p>Start fresh from our main page and explore our features.</p>
+				<button onclick={() => router.navigate('/')}> Visit Homepage </button>
+			</div>
+
+			<div class="suggestion-card">
+				<div class="suggestion-icon">👥</div>
+				<h3>Meet Our Team</h3>
+				<p>Learn about the people behind our amazing products.</p>
+				<button onclick={() => router.navigate('/about/team')}> View Team </button>
+			</div>
+
+			<div class="suggestion-card">
+				<div class="suggestion-icon">📈</div>
+				<h3>Our Story</h3>
+				<p>Discover how we became leaders in our industry.</p>
+				<button onclick={() => router.navigate('/about/history')}> Read Our History </button>
+			</div>
+		</div>
+	</div>
+
+	<div class="debug-section">
+		<h3>Route Debug Information</h3>
+		<div class="debug-info">
+			<p><strong>Current Path:</strong> {location?.pathname}</p>
+			<p><strong>Parameters:</strong> {JSON.stringify(params)}</p>
+			<p><strong>Search Query:</strong> {location?.search || 'None'}</p>
+			<p><strong>Hash:</strong> {location?.hash || 'None'}</p>
+			<p><strong>Full URL:</strong> {location?.url?.href || 'Unknown'}</p>
+		</div>
+	</div>
+</div>
+
+<style>
+	.not-found-page {
+		max-width: 100%;
+		text-align: center;
+	}
+
+	.error-content {
+		margin-bottom: 4rem;
+	}
+
+	.error-icon {
+		font-size: 5rem;
+		margin-bottom: 1rem;
+		opacity: 0.7;
+	}
+
+	.error-content h1 {
+		font-size: 3rem;
+		color: #e74c3c;
+		margin: 0 0 1rem 0;
+		font-weight: 600;
+	}
+
+	.error-message {
+		font-size: 1.25rem;
+		color: #6c757d;
+		margin: 0 0 2rem 0;
+		line-height: 1.6;
+		max-width: 600px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.error-details {
+		background: #f8f9fa;
+		border: 1px solid #e1e5e9;
+		border-radius: 8px;
+		padding: 1.5rem;
+		margin: 2rem auto;
+		max-width: 500px;
+		text-align: left;
+	}
+
+	.error-details p {
+		margin: 0.5rem 0;
+		color: #495057;
+		font-size: 0.9rem;
+	}
+
+	.error-details code {
+		background: #e9ecef;
+		padding: 0.2rem 0.4rem;
+		border-radius: 3px;
+		font-family: 'SFMono-Regular', Consolas, monospace;
+		color: #e83e8c;
+		font-size: 0.875rem;
+	}
+
+	.action-buttons {
+		display: flex;
+		gap: 1rem;
+		justify-content: center;
+		flex-wrap: wrap;
+		margin-top: 2rem;
+	}
+
+	.btn {
+		padding: 0.75rem 1.5rem;
+		border: none;
+		border-radius: 6px;
+		font-size: 1rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		text-decoration: none;
+		display: inline-block;
+	}
+
+	.btn-primary {
+		background: #007bff;
+		color: white;
+	}
+
+	.btn-primary:hover {
+		background: #0056b3;
+		transform: translateY(-1px);
+	}
+
+	.btn-secondary {
+		background: #6c757d;
+		color: white;
+	}
+
+	.btn-secondary:hover {
+		background: #545b62;
+		transform: translateY(-1px);
+	}
+
+	.btn-outline {
+		background: transparent;
+		color: #007bff;
+		border: 2px solid #007bff;
+	}
+
+	.btn-outline:hover {
+		background: #007bff;
+		color: white;
+		transform: translateY(-1px);
+	}
+
+	.suggestions {
+		margin-bottom: 3rem;
+	}
+
+	.suggestions h2 {
+		color: #2c3e50;
+		margin-bottom: 2rem;
+		font-size: 2rem;
+	}
+
+	.suggestions-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+		gap: 1.5rem;
+		text-align: center;
+	}
+
+	.suggestion-card {
+		padding: 2rem;
+		border: 1px solid #e1e5e9;
+		border-radius: 12px;
+		background: white;
+		transition: all 0.3s ease;
+	}
+
+	.suggestion-card:hover {
+		transform: translateY(-2px);
+		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+		border-color: #007bff;
+	}
+
+	.suggestion-icon {
+		font-size: 2.5rem;
+		margin-bottom: 1rem;
+	}
+
+	.suggestion-card h3 {
+		font-size: 1.25rem;
+		color: #2c3e50;
+		margin: 0 0 1rem 0;
+	}
+
+	.suggestion-card p {
+		color: #6c757d;
+		margin: 0 0 1.5rem 0;
+		line-height: 1.5;
+		font-size: 0.9rem;
+	}
+
+	.suggestion-card button {
+		padding: 0.5rem 1rem;
+		border: 1px solid #007bff;
+		border-radius: 4px;
+		background: white;
+		color: #007bff;
+		cursor: pointer;
+		font-size: 0.875rem;
+		transition: all 0.2s ease;
+	}
+
+	.suggestion-card button:hover {
+		background: #007bff;
+		color: white;
+	}
+
+	.debug-section {
+		background: #f8f9fa;
+		border: 1px solid #e1e5e9;
+		border-radius: 8px;
+		padding: 1.5rem;
+		text-align: left;
+		max-width: 600px;
+		margin: 0 auto;
+	}
+
+	.debug-section h3 {
+		margin: 0 0 1rem 0;
+		color: #2c3e50;
+		font-size: 1.125rem;
+		text-align: center;
+	}
+
+	.debug-info p {
+		margin: 0.5rem 0;
+		font-family: 'SFMono-Regular', Consolas, monospace;
+		font-size: 0.875rem;
+		color: #495057;
+	}
+
+	.debug-info strong {
+		color: #2c3e50;
+	}
+
+	@media (max-width: 768px) {
+		.error-content h1 {
+			font-size: 2rem;
+		}
+
+		.error-icon {
+			font-size: 3rem;
+		}
+
+		.action-buttons {
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.btn {
+			width: 200px;
+		}
+
+		.suggestions-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

package/dist/router/examples/pages/NotFoundPage.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Router } from '../../router.svelte';
+interface Props {
+    params: Record<string, string>;
+    location: {
+        pathname: string;
+        search: string;
+        hash?: string;
+        params: Record<string, string>;
+        url?: {
+            href: string;
+        };
+    };
+    router: Router;
+}
+declare const NotFoundPage: import("svelte").Component<Props, {}, "">;
+type NotFoundPage = ReturnType<typeof NotFoundPage>;
+export default NotFoundPage;

package/dist/router/hooks.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { LocationInfo, RouteConfig, RouteParams, Router } from './index.svelte';
+import type { LocationInfo, RouteConfig, RouteParams, Router } from './router.svelte';
 /**
  * Get the router instance from context
  */
@@ -26,7 +26,7 @@ export declare function useNavigating(): boolean;
 /**
  * Get reactive navigation history
  */
-export declare function useHistory(): import("./index.svelte").HistoryEntry[];
+export declare function useHistory(): import("./router.svelte").HistoryEntry[];
 /**
  * Get a navigation function
  */

package/dist/router/index.d.ts

@@ -0,0 +1,3 @@
+export * from './router.svelte';
+export * from './hooks.svelte';
+export * from './providers';

package/dist/router/index.js

@@ -0,0 +1,3 @@
+export * from './router.svelte';
+export * from './hooks.svelte';
+export * from './providers';

package/dist/router/{Link.svelte → providers/Link.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext, type Snippet } from 'svelte';
 
-	import type { Router } from './index.svelte.js';
+	import type { Router } from '../router.svelte';
 
 	interface Props {
 		/** The path to navigate to */

package/dist/router/{Route.svelte → providers/Route.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext, onMount, type Snippet } from 'svelte';
 
-	import type { RouteConfig, Router } from './index.svelte.js';
+	import type { RouteConfig, Router } from '../router.svelte';
 
 	interface Props {
 		/** The path pattern for this route (supports parameters like :id) */

package/dist/router/{Route.svelte.d.ts → providers/Route.svelte.d.ts}

@@ -1,5 +1,5 @@
 import { type Snippet } from 'svelte';
-import type { Router } from './index.svelte.js';
+import type { Router } from '../router.svelte';
 interface Props {
     /** The path pattern for this route (supports parameters like :id) */
     path: string;

package/dist/router/{Router.svelte → providers/RouterProvider.svelte}

@@ -1,13 +1,18 @@
 <script lang="ts">
 	import { onDestroy, onMount, setContext, type Snippet } from 'svelte';
 
-	import type { RouteConfig, Router } from './index.svelte';
+	import type { RouteConfig, Router } from '../router.svelte';
+	import { LoadingScreen } from '../../ui';
 
 	interface Props {
 		/** Router instance to use for routing */
 		router: Router;
 		/** Whether to automatically initialize the router */
 		autoInit?: boolean;
+		/** Whether to show a loading screen */
+		loading?: boolean;
+		/** Message to display in the loading screen */
+		loadingMessage?: string;
 		/** Children snippet */
 		children?: Snippet<
 			[
@@ -22,7 +27,13 @@
 		>;
 	}
 
-	let { router, autoInit = true, children }: Props = $props();
+	let {
+		router,
+		autoInit = true,
+		loading = false,
+		loadingMessage = 'Loading...',
+		children
+	}: Props = $props();
 
 	// Reactive state from router
 	let currentRoute = $state<RouteConfig | null>(null);
@@ -51,7 +62,11 @@
 	});
 </script>
 
-<div class="router-container" class:navigating={isNavigating}>
+{#if loading}
+	<LoadingScreen active={loading} message={loadingMessage} position="fixed" />
+{/if}
+
+<div class="router-container" class:loading class:navigating={isNavigating}>
 	{#if children}
 		{@render children({ router, currentRoute, currentLocation, isNavigating })}
 	{/if}
@@ -63,9 +78,11 @@
 		height: 100%;
 	}
 
-	.router-container.navigating {
-		/* Optional loading styles during navigation */
+	.router-container.navigating,
+	.router-container.loading {
 		opacity: 0.9;
 		transition: opacity 0.1s ease;
+		pointer-events: none;
+		cursor: wait;
 	}
 </style>

package/dist/router/{Router.svelte.d.ts → providers/RouterProvider.svelte.d.ts}

@@ -1,10 +1,14 @@
 import { type Snippet } from 'svelte';
-import type { RouteConfig, Router } from './index.svelte';
+import type { RouteConfig, Router } from '../router.svelte';
 interface Props {
     /** Router instance to use for routing */
     router: Router;
     /** Whether to automatically initialize the router */
     autoInit?: boolean;
+    /** Whether to show a loading screen */
+    loading?: boolean;
+    /** Message to display in the loading screen */
+    loadingMessage?: string;
     /** Children snippet */
     children?: Snippet<[
         {
@@ -15,6 +19,6 @@ interface Props {
         }
     ]>;
 }
-declare const Router: import("svelte").Component<Props, {}, "">;
-type Router = ReturnType<typeof Router>;
-export default Router;
+declare const RouterProvider: import("svelte").Component<Props, {}, "">;
+type RouterProvider = ReturnType<typeof RouterProvider>;
+export default RouterProvider;

package/dist/router/providers/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Link } from './Link.svelte';
+export { default as Route } from './Route.svelte';
+export { default as RouterProvider } from './RouterProvider.svelte';

package/dist/router/providers/index.js

@@ -0,0 +1,3 @@
+export { default as Link } from './Link.svelte';
+export { default as Route } from './Route.svelte';
+export { default as RouterProvider } from './RouterProvider.svelte';

package/dist/router/{index.svelte.d.ts → router.svelte.d.ts}

@@ -101,7 +101,5 @@ export declare function createRouter(config?: RouterConfig): Router;
  * Default router instance for convenience
  */
 export declare const router: Router;
-export { default as Link } from './Link.svelte';
-export { default as Route } from './Route.svelte';
-export { default as RouterComponent } from './Router.svelte';
 export * from './hooks.svelte.js';
+export * from './providers/index.js';