svelte-navigator-lite 2.1.0 → 2.2.0

package/README.md

@@ -1,5 +1,8 @@
 # svelte-navigator-lite
 
+[![Publish Package](https://github.com/jeremyjfleming/svelte-navigator-lite/actions/workflows/npm-publish-github-packages.yml/badge.svg)](https://github.com/jeremyjfleming/svelte-navigator-lite/actions/workflows/npm-publish-github-packages.yml)
+[![npm version](https://img.shields.io/npm/v/svelte-navigator-lite)](https://www.npmjs.com/package/svelte-navigator-lite)
+
 A lightweight, pattern-based router for Svelte 5. Routes are defined with familiar URL patterns, guards are reusable named functions, and the reactive `router` singleton integrates directly with Svelte runes.
 
 ## Installation
@@ -28,10 +31,10 @@ Define your routes and guards, then call `createRouter` on mount.
             routes: [
                 { name: 'cal',      pattern: '/cal'                                   },
                 { name: 'cal-date', pattern: '/cal/:mm/:dd/:yyyy'                     },
-                { name: 'event',    pattern: '/event/:eventId',   overlay: true       },
-                { name: 'edit',     pattern: '/event/:eventId/edit', overlay: true    },
-                { name: 'login',    pattern: '/login',  guards: ['unauth'], overlay: true },
-                { name: 'signup',   pattern: '/signup', guards: ['unauth'], overlay: true },
+                { name: 'event',    pattern: '/event/:eventId',      meta: { overlay: true } },
+                { name: 'edit',     pattern: '/event/:eventId/edit', meta: { overlay: true } },
+                { name: 'login',    pattern: '/login',  guards: ['unauth'], meta: { overlay: true } },
+                { name: 'signup',   pattern: '/signup', guards: ['unauth'], meta: { overlay: true } },
             ],
             guards: {
                 auth:   { condition: () => !auth.isValid(), redirectTo: 'login' },
@@ -43,7 +46,7 @@ Define your routes and guards, then call `createRouter` on mount.
 </script>
 
 <AppShell />
-{#if router.overlay}
+{#if router.meta?.overlay}
     <svelte:component this={currentOverlay} />
 {/if}
 ```
@@ -87,7 +90,7 @@ import { router } from 'svelte-navigator-lite';
 router.route        // current route name: string
 router.params       // path params: Record<string, string>
 router.searchParams // query params: Record<string, string>
-router.overlay      // true if the current route has overlay: true
+router.meta         // meta object for the current route (or undefined)
 router.notFound     // true if the URL matched no route and the fallback was used
 
 router.is('cal')                 // true if current route === 'cal'
@@ -96,15 +99,16 @@ router.matches(['cal', 'event']) // true if current route is in the list
 
 All properties are reactive — use them in Svelte templates or `$effect` blocks and they update automatically on navigation.
 
-## Overlays
+## Route meta
 
-Mark a route with `overlay: true` to indicate it renders on top of the base layout rather than replacing it. The router exposes `router.overlay` so your root component can conditionally render the overlay without any separate bookkeeping.
+Attach arbitrary metadata to any route via the `meta` field. The router exposes `router.meta` so your components can read it reactively.
 
 ```typescript
 routes: [
-    { name: 'cal',   pattern: '/cal'                                },
-    { name: 'event', pattern: '/event/:eventId', overlay: true      },
-    { name: 'edit',  pattern: '/event/:eventId/edit', overlay: true },
+    { name: 'cal',   pattern: '/cal'                                              },
+    { name: 'event', pattern: '/event/:eventId',      meta: { overlay: true }    },
+    { name: 'edit',  pattern: '/event/:eventId/edit', meta: { overlay: true }    },
+    { name: 'admin', pattern: '/admin',               meta: { role: 'admin' }    },
 ]
 ```
 
@@ -112,13 +116,13 @@ routes: [
 <!-- The base layout always renders -->
 <AppShell />
 
-<!-- Overlay components mount on top when their route is active -->
-{#if router.overlay}
+<!-- Use any meta value to drive rendering -->
+{#if router.meta?.overlay}
     <svelte:component this={overlayMap[router.route]} />
 {/if}
 ```
 
-`overlay` is purely a metadata flag — the router does not render anything itself. How overlays are displayed (modal, drawer, fullscreen panel, etc.) is entirely up to your components.
+`meta` is not interpreted by the router — it is plain data for your components to use however they need.
 
 ## Guards
 
@@ -181,7 +185,7 @@ await goto('/some/path', { replaceState: true }); // replace instead of push
 
 ## Migrating from v1
 
-The `rootPath` + `segments` route definition is replaced by a single `pattern` string, `routeGuards` inline on each route are replaced by named guards defined once, and the new `overlay` flag replaces any separate modal-route maps you maintained manually.
+The `rootPath` + `segments` route definition is replaced by a single `pattern` string, `routeGuards` inline on each route are replaced by named guards defined once, and the new `meta` field replaces any separate modal-route maps you maintained manually.
 
 ```typescript
 // v1
@@ -192,6 +196,6 @@ The `rootPath` + `segments` route definition is replaced by a single `pattern` s
 }
 
 // v2
-{ name: 'edit', pattern: '/event/:eventId/edit', guards: ['auth'], overlay: true }
+{ name: 'edit', pattern: '/event/:eventId/edit', guards: ['auth'], meta: { overlay: true } }
 // guard defined once: auth: { condition: () => !auth.isValid(), redirectTo: 'login' }
 ```

package/dist/match.d.ts

@@ -5,7 +5,7 @@ type CompiledRoute = {
     regex: RegExp;
     paramNames: string[];
     guards: string[];
-    overlay: boolean;
+    meta: Record<string, unknown> | undefined;
 };
 export type RouteMatch = {
     name: string;

package/dist/match.js

@@ -20,7 +20,7 @@ export function compileRoutes(routes) {
             regex: new RegExp(`^${regexStr}/?$`),
             paramNames,
             guards: route.guards ?? [],
-            overlay: route.overlay ?? false,
+            meta: route.meta,
         };
     });
 }

package/dist/router.svelte.d.ts

@@ -10,7 +10,7 @@ declare function _createRouter(): {
     readonly params: Record<string, string>;
     readonly searchParams: Record<string, string>;
     readonly notFound: boolean;
-    readonly overlay: boolean;
+    readonly meta: Record<string, unknown> | undefined;
     is(route: string): boolean;
     matches(routes: string[]): boolean;
     parseUrl: (url: string) => void;
@@ -23,7 +23,7 @@ export declare const router: {
     readonly params: Record<string, string>;
     readonly searchParams: Record<string, string>;
     readonly notFound: boolean;
-    readonly overlay: boolean;
+    readonly meta: Record<string, unknown> | undefined;
     is(route: string): boolean;
     matches(routes: string[]): boolean;
     parseUrl: (url: string) => void;

package/dist/router.svelte.js

@@ -70,7 +70,7 @@ function _createRouter() {
         get params() { return state.params; },
         get searchParams() { return state.searchParams; },
         get notFound() { return state.notFound; },
-        get overlay() { return compiled.find(r => r.name === state.current)?.overlay ?? false; },
+        get meta() { return compiled.find(r => r.name === state.current)?.meta; },
         is(route) { return state.current === route; },
         matches(routes) { return routes.includes(state.current); },
         parseUrl,

package/dist/types.d.ts

@@ -2,7 +2,7 @@ export type RouteDefinition = {
     name: string;
     pattern: string;
     guards?: string[];
-    overlay?: boolean;
+    meta?: Record<string, unknown>;
 };
 export type Guard = {
     condition: () => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-navigator-lite",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A lightweight router for Svelte 5",
   "type": "module",
   "main": "./dist/index.js",