From b21f8f6d5bd8c17a57d297e704b261f537b68b05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?=
 <webJose@gmail.com>
Date: Thu, 9 Oct 2025 09:56:36 -0600
Subject: [PATCH] feat:  Allow RouterTrace to be styled and include test path
 in information

---
 src/lib/RouterTrace/RouterTrace.svelte | 132 ++++++++++++-------------
 src/lib/core/RouterEngine.svelte.ts    |   4 +-
 2 files changed, 65 insertions(+), 71 deletions(-)

diff --git a/src/lib/RouterTrace/RouterTrace.svelte b/src/lib/RouterTrace/RouterTrace.svelte
index 5df7ba1..dd7ef9f 100644
--- a/src/lib/RouterTrace/RouterTrace.svelte
+++ b/src/lib/RouterTrace/RouterTrace.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
 	import { traceOptions, getAllChildRouters } from '$lib/core/trace.svelte.js';
-	import {
-		routePatternsKey,
-		RouterEngine
-	} from '$lib/core/RouterEngine.svelte.js';
+	import { routePatternsKey, RouterEngine } from '$lib/core/RouterEngine.svelte.js';
 	import { resolveHashValue } from '$lib/core/resolveHashValue.js';
 	import { getRouterContext } from '$lib/Router/Router.svelte';
 	import type { PatternRouteInfo } from '$lib/types.js';
@@ -98,20 +95,23 @@
 	</div>
 {/snippet}
 
-<table class={['minimal', cssClass]} {...restProps}>
+<table class={[cssClass ?? 'minimal']} {...restProps}>
 	<caption>
 		<div>
-			<span>
+			<div>
 				Router ID: <span class="router-property">{router.id ?? '(no ID)'}</span>
-			</span>
-			<span>
+			</div>
+			<div>
 				Base Path: <span class="router-property">{router.basePath}</span>
-			</span>
-			{#if traceOptions.routerHierarchy && childRouterRefs.length > 0}
-				<span>
+			</div>
+			<div>
+				Test Path: <span class="router-property">{router.testPath}</span>
+			</div>
+			<div>
+				{#if traceOptions.routerHierarchy && childRouterRefs.length > 0}
 					{@render childRoutersPicker()}
-				</span>
-			{/if}
+				{/if}
+			</div>
 		</div>
 	</caption>
 	<thead>
@@ -188,74 +188,68 @@
 		& td:has(> span.minimal-icon) {
 			text-align: center;
 		}
+	}
 
-		& .error {
-			color: #dc3545;
+	caption > div {
+		display: flex;
+		flex-direction: row;
+		gap: 2em;
+		justify-content: start;
+		& > div:last-of-type {
+			margin-left: auto;
 		}
+		& .children-picker {
+			position: relative;
 
-		& caption {
-			font-size: 0.9em;
-
-			& > div {
-				display: flex;
-				flex-direction: row;
-				gap: 1em;
-				flex-wrap: nowrap;
-				justify-content: start;
-				align-items: baseline;
+			& button {
+				border: none;
+				border-radius: 4px;
 			}
 
-			& span.router-property {
-				font-weight: bold;
-				margin-left: 0.5em;
+			& .children-menu {
+				position: absolute;
+				left: 0;
+				width: max-content;
 				background-color: #f8f9fa;
-			}
-
-			& .children-picker {
-				position: relative;
-
-				& button {
-					border: none;
-					border-radius: 4px;
-				}
-
-				& .children-menu {
-					position: absolute;
-					left: 0;
-					width: max-content;
-					background-color: #f8f9fa;
-					border: 1px solid #ddd;
-					border-radius: 4px;
-					padding: 0.5em 0;
-					z-index: 1;
-					display: flex;
-					flex-direction: column;
-					gap: 0.5em;
-					box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.1);
-
-					& li {
-						list-style: none;
-						& button {
-							border: none;
-							background-color: transparent;
-							padding: 0.25em;
-						}
+				border: 1px solid #ddd;
+				border-radius: 4px;
+				padding: 0.5em 0;
+				z-index: 1;
+				display: flex;
+				flex-direction: column;
+				gap: 0.5em;
+				box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.1);
+
+				& li {
+					list-style: none;
+					& button {
+						border: none;
+						background-color: transparent;
+						padding: 0.25em;
 					}
+				}
 
-					& li:hover,
-					& li button:hover {
-						background-color: #e9ecef;
-					}
+				& li:hover,
+				& li button:hover {
+					background-color: #e9ecef;
+				}
 
-					&.children-menu-top {
-						bottom: 0;
-					}
+				&.children-menu-top {
+					bottom: 0;
+				}
 
-					&.children-menu-bottom {
-						top: 100%;
-					}
+				&.children-menu-bottom {
+					top: 100%;
 				}
 			}
 		}
 	}
+
+	.router-property {
+		font-weight: bold;
+	}
+
+	.error {
+		color: #dc3545;
+	}
 </style>
diff --git a/src/lib/core/RouterEngine.svelte.ts b/src/lib/core/RouterEngine.svelte.ts
index 79b174b..883b64d 100644
--- a/src/lib/core/RouterEngine.svelte.ts
+++ b/src/lib/core/RouterEngine.svelte.ts
@@ -138,14 +138,14 @@ export class RouterEngine {
         return this.#routePatterns;
     }
 
-    #testPath = $derived.by(() => noTrailingSlash(this.#hashId ? (location.hashPaths[this.#hashId] || '/') : this.path));
+    testPath = $derived.by(() => noTrailingSlash(this.#hashId ? (location.hashPaths[this.#hashId] || '/') : this.path));
 
     #routeStatusData = $derived.by(() => {
         const routeStatus = {} as Record<string, RouteStatus>;
         let noMatches = true;
         for (let routeKey of Object.keys(this.routes)) {
             const pattern = this.#routePatterns.get(routeKey)!;
-            const matches = pattern.regex ? pattern.regex.exec(this.#testPath) : null;
+            const matches = pattern.regex ? pattern.regex.exec(this.testPath) : null;
             const routeParams = matches?.groups ? { ...matches.groups } as RouteStatus['routeParams'] : undefined;
             if (routeParams) {
                 for (let key in routeParams) {