@octane-xplat/ui 0.7.2 → 0.9.0

package/src/route-table.test.ts

@@ -1,10 +1,18 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, expectTypeOf, it, vi } from 'vitest'
+import type {
+	ManifestRouteNames,
+	ManifestRouteParams,
+	ManifestRoutePresentations,
+	RouteManifest,
+} from './props'
+
 import {
 	buildRoutePath,
 	defineRoutes,
 	deriveRouteManifest,
 	layoutChain,
 	linkPath,
+	manifestToJson,
 	matchRoute,
 	matchUrl,
 	mergeRouteManifests,
@@ -201,6 +209,17 @@ describe('matchUrl + linkPath', () => {
 		expect(linkPath('textcoral://demo/9')).toBe('/demo/9')
 		expect(linkPath('/demo/9')).toBe('/demo/9')
 	})
+
+	it.each(['/demo/%', '/demo/%E0%A4%A', '/detail?from=%', '/detail?%=x'])(
+		'rejects malformed encoding without throwing: %s',
+		(url) => expect(matchUrl(routes, url)).toBeNull(),
+	)
+
+	it('ignores fragments and preserves query delimiters inside values', () => {
+		expect(matchUrl(routes, linkPath('xplat://demo/counter?from=a?b#ignored'))).toMatchObject({
+			params: { id: 'counter', from: 'a?b' },
+		})
+	})
 })
 
 describe('layoutChain', () => {
@@ -278,15 +297,176 @@ describe('defineRoutes', () => {
 
 		expect(m.layouts.guides.displayName).toBe('GuideShell')
 		expect(m.layouts[''].displayName).toBe('RootShell')
-		expect(layoutChain(m.layouts, 'guides/:slug').map((c) => c.displayName)).toEqual([
-			'GuideShell',
-		])
+		expect(layoutChain(m.layouts, 'guides/:slug').map((c) => c.displayName)).toEqual(['GuideShell'])
 	})
 
 	it('warns and skips a non-component screen', () => {
 		const m = defineRoutes([{ path: 'bad', screen: { default: C('B') } as any }])
 		expect(m.screens.bad).toBeUndefined()
 	})
+
+	it('brands literal route names, params, and presentations onto the manifest type', () => {
+		const m = defineRoutes({
+			routes: [
+				{ path: 'guides', screen: C('GuideIndex') },
+				{ path: 'guides/:slug', screen: C('Guide'), presentation: 'modal' },
+				{ path: 'docs/[id]', screen: C('Doc') },
+				{ path: 'settings/index', screen: C('Settings') },
+				{ path: '', screen: C('Root') },
+			],
+		})
+
+		expectTypeOf<ManifestRouteNames<typeof m>>().toEqualTypeOf<
+			'guides' | 'guides/:slug' | 'docs/:id' | 'settings' | 'index'
+		>()
+
+		expectTypeOf<ManifestRouteParams<typeof m>['guides/:slug']>().toEqualTypeOf<{
+			slug: string
+		}>()
+
+		expectTypeOf<ManifestRouteParams<typeof m>['docs/:id']>().toEqualTypeOf<{ id: string }>()
+		expectTypeOf<ManifestRouteParams<typeof m>['guides']>().toEqualTypeOf<{}>()
+		expectTypeOf<ManifestRoutePresentations<typeof m>['guides/:slug']>().toEqualTypeOf<'modal'>()
+
+		// Still a plain RouteManifest — registerRoutes/matchRoute accept it.
+		expectTypeOf(m).toMatchTypeOf<RouteManifest>()
+	})
+
+	it('spec parity — a spec produces the same meta its file would', () => {
+		const loader = (p: Record<string, unknown>) => p
+		const beforeLoad = () => ({ ok: true })
+		const head = { title: 'Guide' }
+
+		const file = manifest({
+			'./app/guides/[slug]+modal.tsrx': {
+				G: C('Guide'),
+				loader,
+				beforeLoad,
+				head,
+			},
+		})
+
+		const spec = defineRoutes([
+			{ path: 'guides/:slug', screen: C('Guide'), presentation: 'modal', loader, beforeLoad, head },
+		])
+
+		const fm = file.routes.find((r) => r.name === 'guides/:slug')!
+		const sm = spec.routes.find((r) => r.name === 'guides/:slug')!
+		expect({ ...sm, file: undefined }).toEqual({ ...fm, file: undefined })
+		expect(spec.loaders!['guides/:slug']).toBe(loader)
+	})
+
+	it('baked routes resolve data from the manifest baked map, not a loader call', async () => {
+		const m = defineRoutes({
+			routes: [
+				{ path: 'changelog', screen: C('Changelog'), dataMode: 'baked' },
+				{ path: 'live', screen: C('Live'), loader: () => 'live-data' },
+			],
+			baked: { changelog: { entries: ['a', 'b'] } },
+		})
+
+		const baked = m.routes.find((r) => r.name === 'changelog')!
+		expect(baked.dataMode).toBe('baked')
+		expect(await m.loaders!.changelog({})).toEqual({ entries: ['a', 'b'] })
+
+		const live = m.routes.find((r) => r.name === 'live')!
+		expect(live.dataMode).toBeUndefined()
+		expect(await m.loaders!.live({})).toBe('live-data')
+	})
+
+	it('a baked route with no baked entry throws like a loader failure', () => {
+		const m = defineRoutes([{ path: 'gone', screen: C('Gone'), dataMode: 'baked' }])
+		// commitRoute wraps the call in Promise.resolve().then() — a sync
+		// throw becomes a rejection there, landing as the screen's error prop.
+		expect(() => m.loaders!.gone({})).toThrow(/no baked data/)
+	})
+
+	it('baked reads the owning manifest through merges', async () => {
+		const prog = defineRoutes({
+			routes: [{ path: 'docs', screen: C('Docs'), dataMode: 'baked' }],
+			baked: { docs: { pages: 3 } },
+		})
+
+		const merged = mergeRouteManifests(
+			manifest({ './app/detail.tsrx': { D: C('FileDetail') } }),
+			prog,
+		)
+
+		expect(await merged.loaders!.docs({})).toEqual({ pages: 3 })
+		expect(merged.baked).toEqual({ docs: { pages: 3 } })
+	})
+
+	it('manifestToJson emits the host schema identically for files and specs', () => {
+		const loader = () => 'data'
+		const head = { title: 'Guide' }
+		const file = manifest({
+			'./app/_layout.tsrx': { L: C('Shell') },
+			'./app/guides/_layout.tsrx': { G: C('GuidesShell') },
+			'./app/guides/[slug]+modal.tsrx': {
+				G: C('Guide'),
+				loader,
+				head,
+				dataMode: 'baked',
+			},
+		})
+
+		file.baked = { 'guides/:slug': { ok: true } }
+
+		const spec = defineRoutes({
+			routes: [
+				{
+					path: 'guides/:slug',
+					screen: C('Guide'),
+					presentation: 'modal',
+					loader,
+					head,
+					dataMode: 'baked',
+					source: './app/guides/[slug]+modal.tsrx',
+				},
+			],
+			layouts: { '': C('Shell'), guides: C('GuidesShell') },
+			baked: { 'guides/:slug': { ok: true } },
+		})
+
+		const fj = manifestToJson(file).routes[0]
+		const sj = manifestToJson(spec).routes[0]
+		expect(sj).toEqual(fj)
+		expect(fj).toEqual({
+			name: 'guides/:slug',
+			path: 'guides/:slug',
+			params: ['slug'],
+			presentation: 'modal',
+			dataMode: 'baked',
+			layouts: ['', 'guides'],
+			source: './app/guides/[slug]+modal.tsrx',
+			loader: true,
+			guard: false,
+			head: true,
+		})
+
+		expect(manifestToJson(spec).layouts).toEqual(['', 'guides'])
+	})
+
+	it('file routes honor dataMode and warn on an in-file loader', () => {
+		const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+		const loader = () => 'live'
+		const m = manifest({
+			'./app/report.tsrx': { R: C('Report'), dataMode: 'baked', loader },
+			'./app/report.loader.ts': { loader }, // never a route itself
+		})
+
+		const meta = m.routes.find((r) => r.name === 'report')!
+		expect(meta.dataMode).toBe('baked')
+		expect(meta.loader).not.toBe(loader) // baked lookup, not the file's
+		expect(m.routes.map((r) => r.name)).toEqual(['report'])
+		warn.mockRestore()
+	})
+
+	it('unbranded manifests extract to never/empty', () => {
+		const m = manifest({ './app/detail.tsrx': { D: C('D') } })
+		expectTypeOf<ManifestRouteNames<typeof m>>().toEqualTypeOf<never>()
+		expectTypeOf<ManifestRouteParams<typeof m>>().toEqualTypeOf<{}>()
+	})
 })
 
 describe('mergeRouteManifests', () => {
@@ -301,13 +481,11 @@ describe('mergeRouteManifests', () => {
 			routes: [{ path: 'guides/:slug', screen: C('Guide') }],
 			layouts: { docs: C('DocsShell') },
 		})
+
 		const merged = mergeRouteManifests(files, dynamic)
 
-		expect(Object.keys(merged.screens).sort()).toEqual([
-			'demo/:id',
-			'detail',
-			'guides/:slug',
-		])
+		expect(Object.keys(merged.screens).sort()).toEqual(['demo/:id', 'detail', 'guides/:slug'])
+
 		expect(merged.layouts.guides.displayName).toBe('FileLayout')
 		expect(merged.layouts.docs.displayName).toBe('DocsShell')
 		// Sort order is rebuilt — 'demo/:id' still loses to nothing, but a
@@ -320,6 +498,7 @@ describe('mergeRouteManifests', () => {
 		const file = manifest({
 			'./app/detail.tsrx': { D: C('FileDetail'), loader: fileLoader },
 		})
+
 		const dynamic = defineRoutes([{ path: 'detail', screen: C('DynDetail') }])
 		const merged = mergeRouteManifests(file, dynamic)
 

package/src/route-table.ts

@@ -30,14 +30,43 @@
  *  fallback (rank = prefer.length). Web callers pass ['web']; mobile
  *  callers pass the running OS first. */
 
-import type { Route, RouteManifest, RouteMeta, RouteSpec, RouteSpecSet } from './props'
+import type {
+	Route,
+	RouteManifest,
+	RouteManifestJson,
+	RouteMeta,
+	RouteSpec,
+	RouteSpecSet,
+	SpecRouteInfo,
+} from './props'
 
 const EXT = /\.(tsrx|tsx|ts|mts|cts|js|mjs|cjs|jsx)$/
 const SUFFIX = /\.(web|mobile|ios|android|macos|windows|linux)$/
 const PARAM = /^\[(.+)\]$/
+/** Build-time loader modules — `docs.loader.ts` pairs with route `docs`
+ *  for `dataMode: 'baked'`. Never a route itself, never in a runtime glob. */
+const LOADER_FILE = /\.loader\.(ts|mts|cts|js|mjs|cjs|jsx)$/
 // `settings+modal.tsrx` → route 'settings' presented modally by default.
 const PRESENT = /\+(modal|fade|push)$/
 
+/** Loader for a `dataMode: 'baked'` route — resolves the name out of its
+ *  owning manifest's `baked` map at push time. The map is assigned after
+ *  the manifest is built (generated glue) or passed in (RouteSpecSet), so
+ *  the lookup reads it lazily. A missing entry throws, landing as the
+ *  screen's `error` prop like a live loader rejection. */
+function bakedLookup(manifest: () => RouteManifest | undefined, name: string) {
+	return () => {
+		const baked = manifest()?.baked
+		if (baked && Object.prototype.hasOwnProperty.call(baked, name)) {
+			return baked[name]
+		}
+
+		throw new Error(
+			`[octane-xplat] baked route '${name}' has no baked data — run \`xplat routes\` to regenerate`,
+		)
+	}
+}
+
 /** Internal error carrier used by the public `redirect()` helper. Keeping
  * this in the shared route table gives both platform leaves the same guard
  * behavior without importing a platform runtime. */
@@ -93,8 +122,13 @@ export function deriveRouteManifest(
 	const layouts: Record<string, any> = {}
 	const loaders: RouteManifest['loaders'] = {}
 	const warned = new Set<string>()
+	const self: { m?: RouteManifest } = {}
 
 	for (const key of Object.keys(files).sort()) {
+		if (LOADER_FILE.test(key)) {
+			continue
+		}
+
 		let rel = key.replace(/^\.?\//, '')
 		if (rel.startsWith(prefix)) {
 			rel = rel.slice(prefix.length)
@@ -155,8 +189,20 @@ export function deriveRouteManifest(
 			presentation,
 		}
 
+		const dataMode = files[key]?.dataMode
+		if (dataMode === 'baked' || dataMode === 'live') {
+			meta.dataMode = dataMode
+		}
+
 		const loader = files[key]?.loader
-		if (typeof loader === 'function') {
+		if (meta.dataMode === 'baked') {
+			meta.loader = bakedLookup(() => self.m, name)
+			if (typeof loader === 'function') {
+				console.warn(
+					`[octane-xplat] baked route '${name}' also exports a loader — move it to a .loader.ts sibling so its imports stay out of the bundle`,
+				)
+			}
+		} else if (typeof loader === 'function') {
 			meta.loader = loader
 		}
 
@@ -203,7 +249,9 @@ export function deriveRouteManifest(
 	// Most-specific patterns first — 'demo/new' must beat 'demo/:id'.
 	routes.sort(bySpecificity)
 
-	return { screens, routes, layouts, loaders }
+	const manifest = { screens, routes, layouts, loaders }
+	self.m = manifest
+	return manifest
 }
 
 /** Match-order comparator: static segments (2) outrank params (1), ties
@@ -242,8 +290,15 @@ const mergeWarned = new Set<string>()
  *  from their own sources, e.g. `readdirSync` over a content dir). Each
  *  spec's `path` uses the route-dir vocabulary; `layouts` keys are path
  *  prefixes playing the `_layout` role. Same-name duplicates inside the
- *  set keep the later entry with a warn, matching merge precedence. */
-export function defineRoutes(input: readonly RouteSpec[] | RouteSpecSet): RouteManifest {
+ *  set keep the later entry with a warn, matching merge precedence.
+ *
+ *  The return is branded with the spec-derived route types — read them
+ *  with `ManifestRouteParams`/`ManifestRouteNames`/
+ *  `ManifestRoutePresentations` to merge programmatic names into the
+ *  app's typed navigation surface (`RouteName | …`, `RouteParams & …`). */
+export function defineRoutes<const Specs extends readonly RouteSpec[]>(
+	input: Specs | (Omit<RouteSpecSet, 'routes'> & { routes: Specs }),
+): RouteManifest & SpecRouteInfo<Specs> {
 	const set = (Array.isArray(input) ? { routes: input } : input) as RouteSpecSet
 	const specs = set.routes
 	const extra = set.layouts
@@ -252,6 +307,7 @@ export function defineRoutes(input: readonly RouteSpec[] | RouteSpecSet): RouteM
 	const layouts: RouteManifest['layouts'] = {}
 	const metas = new Map<string, RouteMeta>()
 	const warned = new Set<string>()
+	const self: { m?: RouteManifest } = {}
 
 	for (const [key, layout] of Object.entries(extra ?? {})) {
 		const dir = key.replace(/^\/+|\/+$/g, '')
@@ -273,7 +329,18 @@ export function defineRoutes(input: readonly RouteSpec[] | RouteSpecSet): RouteM
 			presentation: spec.presentation,
 		}
 
-		if (spec.loader) {
+		if (spec.dataMode) {
+			meta.dataMode = spec.dataMode
+		}
+
+		if (spec.dataMode === 'baked') {
+			meta.loader = bakedLookup(() => self.m, name)
+			if (spec.loader) {
+				console.warn(
+					`[octane-xplat] baked route '${name}' also carries a loader — bake it in the host and pass the result via 'baked' so its code stays out of the bundle`,
+				)
+			}
+		} else if (spec.loader) {
 			meta.loader = spec.loader
 		}
 
@@ -296,6 +363,7 @@ export function defineRoutes(input: readonly RouteSpec[] | RouteSpecSet): RouteM
 			console.warn(
 				`[octane-xplat] route '${name}' has no component — 'screen' must be a component function, not a module`,
 			)
+
 			continue
 		}
 
@@ -311,7 +379,9 @@ export function defineRoutes(input: readonly RouteSpec[] | RouteSpecSet): RouteM
 		}
 	}
 
-	return { screens, routes, layouts, loaders }
+	const manifest = { screens, routes, layouts, loaders, baked: set.baked }
+	self.m = manifest
+	return manifest as RouteManifest & SpecRouteInfo<Specs>
 }
 
 /** Compose manifests into one — file-derived base plus any number of
@@ -323,10 +393,12 @@ export function defineRoutes(input: readonly RouteSpec[] | RouteSpecSet): RouteM
 export function mergeRouteManifests(...manifests: RouteManifest[]): RouteManifest {
 	const screens: RouteManifest['screens'] = {}
 	const layouts: RouteManifest['layouts'] = {}
+	const baked: NonNullable<RouteManifest['baked']> = {}
 	const winners = new Map<string, RouteMeta>()
 
 	for (const m of manifests) {
 		Object.assign(layouts, m.layouts)
+		Object.assign(baked, m.baked)
 		// Screen-table entries without a RouteMeta still register — a screen
 		// is pushable by name even without a URL pattern.
 		Object.assign(screens, m.screens)
@@ -351,7 +423,41 @@ export function mergeRouteManifests(...manifests: RouteManifest[]): RouteManifes
 		}
 	}
 
-	return { screens, routes, layouts, loaders }
+	return { screens, routes, layouts, loaders, baked }
+}
+
+/** Serialize a manifest to the normalized `RouteManifestJson` shape — the
+ *  same list `xplat routes` emits for file routes, produced here for
+ *  programmatic/merged manifests so hosts consume one schema. */
+export function manifestToJson(manifest: RouteManifest): RouteManifestJson {
+	return {
+		version: 1,
+		layouts: Object.keys(manifest.layouts).sort(),
+		screens: Object.keys(manifest.screens).sort(),
+		routes: manifest.routes.map((meta) => {
+			const segs = meta.name.split('/')
+			const layoutDirs: string[] = manifest.layouts[''] ? [''] : []
+			for (let i = 1; i < segs.length; i++) {
+				const d = segs.slice(0, i).join('/')
+				if (manifest.layouts[d]) {
+					layoutDirs.push(d)
+				}
+			}
+
+			return {
+				name: meta.name,
+				path: meta.name === 'index' ? '' : meta.segments.join('/'),
+				params: [...meta.params],
+				...(meta.presentation ? { presentation: meta.presentation } : {}),
+				...(meta.dataMode ? { dataMode: meta.dataMode } : {}),
+				layouts: layoutDirs,
+				source: meta.file,
+				loader: !!meta.loader,
+				guard: !!meta.beforeLoad,
+				head: !!meta.head,
+			}
+		}),
+	}
 }
 
 /** Match URL path segments against a manifest — returns the winning meta
@@ -508,9 +614,31 @@ export function linkPath(url: string): string {
  *  is the stack prefix ('/demos/demo/x' → stack 'demos'). Unmatched names
  *  fall through as literal routes for pre-manifest callers. */
 export function matchUrl(routes: readonly RouteMeta[], url: string): Route | null {
-	const [p, qs] = url.split('?')
+	// Fragments aren't route params. Split only the first query delimiter;
+	// a later '?' belongs to its value. Reject malformed percent encoding at
+	// this external-input boundary instead of crashing the mounted app.
+	url = url.split('#', 1)[0]
+	const at = url.indexOf('?')
+	const p = at === -1 ? url : url.slice(0, at)
+	const qs = at === -1 ? undefined : url.slice(at + 1)
 	const segs = p.split('/').filter(Boolean)
-	const query = parseQueryString(qs)
+	let query: Record<string, unknown>
+	try {
+		// Use the decoded value: production optimizers can drop an unused
+		// builtin call even though malformed input makes it throw.
+		if (!decodeURIComponent(p)) {
+			return null
+		}
+
+		query = parseQueryString(qs)
+	} catch (error) {
+		if (error instanceof URIError) {
+			return null
+		}
+
+		throw error
+	}
+
 	if (!segs.length) {
 		return null
 	}

package/src/route.macos.ts

@@ -1,3 +1,4 @@
+import { createNavigationRequests, type NavigationRequest } from './navigation-request'
 import { useSyncExternalStore } from 'octane'
 import type { Route, RouteHead, RouteManifest, RouteMeta, ScreenTable } from './props'
 import {
@@ -8,6 +9,8 @@ import {
 	RouteRedirect,
 } from './route-table'
 
+const navigationRequests = createNavigationRequests()
+
 // Effective tables = the file-derived base manifest merged under every
 // addRoutes layer, matching the web/native leaves' registry split.
 let baseManifest: RouteManifest = { screens: {}, routes: [], layouts: {} }
@@ -107,25 +110,49 @@ function contextFor(route: Route): Record<string, unknown> {
 	return route.context ?? {}
 }
 
-async function prepareRoute(route: Route, redirects = 0): Promise<void> {
+async function prepareRoute(
+	route: Route,
+	request: NavigationRequest,
+	redirects = 0,
+): Promise<void> {
+	if (!request.isCurrent()) {
+		return
+	}
+
+	if (!request.claim(route.stack)) {
+		return
+	}
+
 	const beforeLoad = metaFor(route.name)?.beforeLoad
 	if (!beforeLoad) {
-		commitRoute(route)
+		commitRoute(route, request)
 		return
 	}
+
 	if (redirects > 16) {
 		console.warn(`[octane-xplat] beforeLoad redirect loop for '${route.name}'`)
 		return
 	}
+
 	try {
 		const returned = await beforeLoad({ params: route.params, context: contextFor(route) })
-		commitRoute({ ...route, context: returned ? { ...contextFor(route), ...returned } : route.context })
+		commitRoute(
+			{ ...route, context: returned ? { ...contextFor(route), ...returned } : route.context },
+			request,
+		)
 	} catch (error) {
+		if (!request.isCurrent()) {
+			return
+		}
+
 		if (error instanceof RouteRedirect) {
-			await prepareRoute(error.route, redirects + 1)
+			await prepareRoute(error.route, request, redirects + 1)
 			return
 		}
-		console.warn(`[octane-xplat] beforeLoad('${route.name}') rejected: ${(error as Error)?.message ?? error}`)
+
+		console.warn(
+			`[octane-xplat] beforeLoad('${route.name}') rejected: ${(error as Error)?.message ?? error}`,
+		)
 	}
 }
 
@@ -134,14 +161,20 @@ export function redirect(route: Route): never {
 }
 
 export function pushRoute(route: Route): void {
+	const request = navigationRequests.begin(route.stack)
 	if (metaFor(route.name)?.beforeLoad) {
-		void prepareRoute(route)
+		void prepareRoute(route, request)
 		return
 	}
-	commitRoute(route)
+
+	commitRoute(route, request)
 }
 
-function commitRoute(route: Route): void {
+function commitRoute(route: Route, request: NavigationRequest): void {
+	if (!request.isCurrent()) {
+		return
+	}
+
 	const entry = { ...route, presentation: route.presentation ?? metaFor(route.name)?.presentation }
 	const loader = routeLoaders[entry.name] ?? metaFor(entry.name)?.loader
 	if (
@@ -149,10 +182,13 @@ function commitRoute(route: Route): void {
 		!Object.prototype.hasOwnProperty.call(entry, 'loaderData') &&
 		!Object.prototype.hasOwnProperty.call(entry, 'loaderError')
 	) {
-		void Promise.resolve().then(() => loader(entry.params)).then(
-			(loaderData) => commitRoute({ ...entry, loaderData }),
-			(loaderError) => commitRoute({ ...entry, loaderError }),
-		)
+		void Promise.resolve()
+			.then(() => loader(entry.params))
+			.then(
+				(loaderData) => commitRoute({ ...entry, loaderData }, request),
+				(loaderError) => commitRoute({ ...entry, loaderError }, request),
+			)
+
 		return
 	}
 
@@ -164,11 +200,14 @@ function commitRoute(route: Route): void {
 		lastStack = entry.stack
 		modalRoute = null
 	}
+
 	emit()
 }
 
 export function popRoute(stack = 'root'): void {
+	navigationRequests.invalidate(stack)
 	if (modalRoute) {
+		navigationRequests.invalidate(modalRoute.stack)
 		modalRoute = null
 	} else {
 		const entries = stacks.get(stack) ?? []
@@ -177,14 +216,18 @@ export function popRoute(stack = 'root'): void {
 		} else if (entries.length) {
 			stacks.set(stack, [])
 		}
+
 		lastStack = stack
 	}
+
 	emit()
 }
 
 export function pushDeepLink(url: string): void {
 	const route = matchUrl(routes, url)
-	if (route) {pushRoute(route)}
+	if (route) {
+		pushRoute(route)
+	}
 }
 
 export function hrefFor(route: Route): string {