From 6861c524766656837e007ff48798110456e150db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramirez=20Vargas=2C=20Jos=C3=A9=20Pablo?=
 <webJose@gmail.com>
Date: Sat, 6 Sep 2025 22:44:45 -0600
Subject: [PATCH] chore(demo): Demo improvements

---
 demo/src/lib/Alert.svelte                     |  82 ++++
 demo/src/lib/Badge.svelte                     |  53 +++
 demo/src/lib/Card.svelte                      |  45 +-
 demo/src/lib/CardBody.svelte                  |  24 +-
 demo/src/lib/CardHeader.svelte                |  36 +-
 demo/src/lib/NavBar.svelte                    |   2 +-
 demo/src/lib/types.ts                         |  29 ++
 .../views/hash-routing/HashRoutingDemo.svelte | 220 ++++++++++
 .../views/hash-routing/HashRoutingView.svelte | 388 +++---------------
 .../code-samples/basic-hash-router.svelte     |   8 +
 .../code-samples/basic-hash-router.txt        |   8 +
 .../code-samples/hash-url-examples.ts         |   9 +
 .../code-samples/links-and-navigation.svelte  |  16 +
 .../code-samples/live-hash-display.svelte     |  32 ++
 .../code-samples/multi-hash-router.svelte     |  12 +
 .../code-samples/multi-hash-router.txt        |  12 +
 .../code-samples/path-and-hash.txt            |  16 +
 demo/src/lib/views/home/FeaturesTable.svelte  |  14 +-
 demo/src/lib/views/home/HomeView.svelte       | 127 ++----
 demo/src/lib/views/home/Quickstart.svelte     |  15 +-
 .../code-samples/hash-routing-example.txt     |  12 +
 .../home/code-samples/multi-hash-example.txt  |  12 +
 .../code-samples/path-routing-example.txt     |  10 +
 .../code-samples/basic-path-router.txt        |  11 +
 .../code-samples/link-component.txt           |  10 +
 .../code-samples/nested-routing.txt           |  15 +
 .../code-samples/route-guards.txt             |  15 +
 .../code-samples/route-parameters.txt         |  23 ++
 .../path-routing/code-samples/url-examples.ts |  13 +
 .../views/path-routing/views/HomeView.svelte  | 200 +++------
 30 files changed, 906 insertions(+), 563 deletions(-)
 create mode 100644 demo/src/lib/Alert.svelte
 create mode 100644 demo/src/lib/Badge.svelte
 create mode 100644 demo/src/lib/types.ts
 create mode 100644 demo/src/lib/views/hash-routing/HashRoutingDemo.svelte
 create mode 100644 demo/src/lib/views/hash-routing/code-samples/basic-hash-router.svelte
 create mode 100644 demo/src/lib/views/hash-routing/code-samples/basic-hash-router.txt
 create mode 100644 demo/src/lib/views/hash-routing/code-samples/hash-url-examples.ts
 create mode 100644 demo/src/lib/views/hash-routing/code-samples/links-and-navigation.svelte
 create mode 100644 demo/src/lib/views/hash-routing/code-samples/live-hash-display.svelte
 create mode 100644 demo/src/lib/views/hash-routing/code-samples/multi-hash-router.svelte
 create mode 100644 demo/src/lib/views/hash-routing/code-samples/multi-hash-router.txt
 create mode 100644 demo/src/lib/views/hash-routing/code-samples/path-and-hash.txt
 create mode 100644 demo/src/lib/views/home/code-samples/hash-routing-example.txt
 create mode 100644 demo/src/lib/views/home/code-samples/multi-hash-example.txt
 create mode 100644 demo/src/lib/views/home/code-samples/path-routing-example.txt
 create mode 100644 demo/src/lib/views/path-routing/code-samples/basic-path-router.txt
 create mode 100644 demo/src/lib/views/path-routing/code-samples/link-component.txt
 create mode 100644 demo/src/lib/views/path-routing/code-samples/nested-routing.txt
 create mode 100644 demo/src/lib/views/path-routing/code-samples/route-guards.txt
 create mode 100644 demo/src/lib/views/path-routing/code-samples/route-parameters.txt
 create mode 100644 demo/src/lib/views/path-routing/code-samples/url-examples.ts

diff --git a/demo/src/lib/Alert.svelte b/demo/src/lib/Alert.svelte
new file mode 100644
index 0000000..05cbf9d
--- /dev/null
+++ b/demo/src/lib/Alert.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { ClassValue } from "svelte/elements";
+	import type { BootstrapColor } from "./types.js";
+
+	type Props = HTMLAttributes<HTMLDivElement> & {
+		class?: ClassValue;
+		background?: BootstrapColor;
+		dismissible?: boolean;
+		children?: any;
+		onDismiss?: () => void;
+	};
+
+	let {
+		class: cssClass,
+		background = 'primary',
+		dismissible = false,
+		children,
+		onDismiss,
+		...restProps
+	}: Props = $props();
+
+	let dismissed = $state(false);
+
+	const classes: ClassValue = $derived([
+		'alert',
+		`alert-${background}`,
+		dismissible && 'alert-dismissible',
+		cssClass
+	]);
+
+	function handleDismiss() {
+		dismissed = true;
+		onDismiss?.();
+	}
+</script>
+
+{#if !dismissed}
+	<div class={classes} role="alert" {...restProps}>
+		{#if children}
+			{@render children()}
+		{/if}
+		
+		{#if dismissible}
+			<button 
+				type="button" 
+				class="btn-close" 
+				aria-label="Close" 
+				onclick={handleDismiss}
+			></button>
+		{/if}
+	</div>
+{/if}
+
+<!--
+@component
+
+Bootstrap Alert component with type safety and full Bootstrap 5 support.
+
+## Props:
+- `background`: Bootstrap color variant (default: 'primary')
+- `dismissible`: Whether the alert can be dismissed (default: false)
+- `class`: Additional CSS classes (ClassValue type for clsx support)
+- `onDismiss`: Callback function when alert is dismissed
+- Plus all standard HTML div attributes
+
+## Examples:
+```svelte
+<Alert background="success">
+  Operation completed successfully!
+</Alert>
+
+<Alert background="warning" dismissible onDismiss={() => console.log('Alert dismissed')}>
+  <strong>Warning!</strong> Please check your input.
+</Alert>
+
+<Alert background="info" class="mb-4 shadow">
+  <h4 class="alert-heading">Well done!</h4>
+  <p>You successfully completed the task.</p>
+</Alert>
+```
+-->
diff --git a/demo/src/lib/Badge.svelte b/demo/src/lib/Badge.svelte
new file mode 100644
index 0000000..90e46a4
--- /dev/null
+++ b/demo/src/lib/Badge.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { ClassValue } from "svelte/elements";
+	import type { BootstrapBackgroundColor, BootstrapTextColor } from "./types.js";
+
+    type Props = HTMLAttributes<HTMLSpanElement> & {
+        class?: ClassValue;
+        background?: BootstrapBackgroundColor;
+        textColor?: BootstrapTextColor;
+        pill?: boolean;
+        size?: 'sm' | 'lg';
+        children?: any;
+    };
+
+    let {
+        class: cssClass,
+        background = 'primary',
+        textColor,
+        pill = false,
+        size,
+        children,
+        ...restProps
+    }: Props = $props();
+
+    const classes: ClassValue = $derived([
+        "badge",
+        background && `bg-${background}`,
+        textColor && `text-${textColor}`,
+        pill && "rounded-pill",
+        size === 'sm' && "fs-7 px-2 py-1",
+        size === 'lg' && "fs-5 px-3 py-2",
+        cssClass
+    ]);
+</script>
+
+<span class={classes} {...restProps}>
+    {@render children?.()}
+</span>
+
+<!--
+@component Badge
+A reusable Bootstrap badge component with full type safety.
+
+Usage examples:
+```svelte
+<Badge>Default</Badge>
+<Badge background="success">Success</Badge>
+<Badge background="danger" textColor="white">Error</Badge>
+<Badge background="primary" pill={true}>Pill Badge</Badge>
+<Badge background="info" size="lg">Large Badge</Badge>
+<Badge background="warning" size="sm">Small Badge</Badge>
+```
+-->
diff --git a/demo/src/lib/Card.svelte b/demo/src/lib/Card.svelte
index f988799..7224cca 100644
--- a/demo/src/lib/Card.svelte
+++ b/demo/src/lib/Card.svelte
@@ -1,17 +1,58 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { ClassValue } from "svelte/elements";
+	import type { BootstrapColor } from "./types.js";
 
     type Props = HTMLAttributes<HTMLDivElement> & {
-        class?: string;
+        class?: ClassValue;
+        hover?: boolean;
+        border?: BootstrapColor;
     }
 
     let {
         class: cssClass,
+        hover = true,
+        border,
         children,
         ...restProps
     }: Props = $props();
+
+    const classes: ClassValue = $derived([
+        "card",
+        hover && "card-hover",
+        border && `border-${border}`,
+        cssClass
+    ]);
 </script>
 
-<div class={["card", cssClass]} {...restProps}>
+<div class={classes} {...restProps}>
     {@render children?.()}
 </div>
+
+<style>
+    .card-hover {
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .card-hover:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+</style>
+
+<!--
+@component Card
+A reusable Bootstrap card component with hover effects and type-safe styling.
+
+Usage examples:
+```svelte
+<Card>Basic card</Card>
+<Card border="primary" class="h-100">Card with border</Card>
+<Card border="success" hover={false}>Card without hover effect</Card>
+```
+
+Props:
+- `border`: Bootstrap color for card border
+- `hover`: Enable/disable hover effect (default: true)
+- `class`: Additional CSS classes
+-->
diff --git a/demo/src/lib/CardBody.svelte b/demo/src/lib/CardBody.svelte
index 960e6d8..2fe2acc 100644
--- a/demo/src/lib/CardBody.svelte
+++ b/demo/src/lib/CardBody.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { ClassValue } from "svelte/elements";
 
     type Props = HTMLAttributes<HTMLDivElement> & {
-        class?: string;
+        class?: ClassValue;
     }
 
     let {
@@ -10,8 +11,27 @@
         children,
         ...restProps
     }: Props = $props();
+
+    const classes: ClassValue = $derived([
+        "card-body",
+        cssClass
+    ]);
 </script>
 
-<div class={["card-body", cssClass]} {...restProps}>
+<div class={classes} {...restProps}>
     {@render children?.()}
 </div>
+
+<!--
+@component CardBody
+A reusable Bootstrap card body component.
+
+Usage examples:
+```svelte
+<CardBody>Card content goes here</CardBody>
+<CardBody class="text-center">Centered content</CardBody>
+```
+
+Props:
+- `class`: Additional CSS classes
+-->
diff --git a/demo/src/lib/CardHeader.svelte b/demo/src/lib/CardHeader.svelte
index cb27b29..9407ac6 100644
--- a/demo/src/lib/CardHeader.svelte
+++ b/demo/src/lib/CardHeader.svelte
@@ -1,19 +1,51 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { ClassValue } from "svelte/elements";
+	import type { BootstrapBackgroundColor, BootstrapTextColor } from "./types.js";
 
     type Props = HTMLAttributes<HTMLDivElement> & {
-        class?: string;
+        class?: ClassValue;
         tag?: string;
+        background?: BootstrapBackgroundColor;
+        textColor?: BootstrapTextColor;
     }
 
     let {
         class: cssClass,
         tag = "div",
+        background,
+        textColor,
         children,
         ...restProps
     }: Props = $props();
+
+    const classes: ClassValue = $derived([
+        "card-header",
+        "mb-0", // Remove default margin when used as heading
+        background && `bg-${background}`,
+        textColor && `text-${textColor}`,
+        cssClass
+    ]);
 </script>
 
-<svelte:element this={tag} class={["card-header", cssClass]} {...restProps}>
+<svelte:element this={tag} class={classes} {...restProps}>
     {@render children?.()}
 </svelte:element>
+
+<!--
+@component CardHeader
+A reusable Bootstrap card header component with semantic HTML support.
+
+Usage examples:
+```svelte
+<CardHeader>Basic header</CardHeader>
+<CardHeader tag="h3">Header as H3</CardHeader>
+<CardHeader background="primary" textColor="white">Styled header</CardHeader>
+```
+
+Props:
+- `tag`: HTML element to render (default: "div")
+- `background`: Bootstrap background color
+- `textColor`: Bootstrap text color
+- `class`: Additional CSS classes
+-->
diff --git a/demo/src/lib/NavBar.svelte b/demo/src/lib/NavBar.svelte
index d4cbc6b..a197bd9 100644
--- a/demo/src/lib/NavBar.svelte
+++ b/demo/src/lib/NavBar.svelte
@@ -14,7 +14,7 @@
 		{ text: 'Home', href: '/hash-routing' },
 		{
 			text: 'Start Demo',
-			href: '/hash-routing#' + (routingMode === 'multi' ? 'd1=/demo;d2=/demo' : '/demo')
+			href: `#${(routingMode === 'multi' ? 'd1=/demo;d2=/demo' : '/demo')}`
 		}
 	];
 </script>
diff --git a/demo/src/lib/types.ts b/demo/src/lib/types.ts
new file mode 100644
index 0000000..45417c2
--- /dev/null
+++ b/demo/src/lib/types.ts
@@ -0,0 +1,29 @@
+/**
+ * Bootstrap color variants used throughout the demo application
+ */
+export type BootstrapColor = 
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light'
+  | 'dark';
+
+/**
+ * Bootstrap text color variants
+ * Includes standard colors plus additional text-specific variants
+ */
+export type BootstrapTextColor = BootstrapColor | 'white' | 'muted' | 'black-50' | 'white-50' | 'body' | 'black';
+
+/**
+ * Bootstrap background color variants
+ * Includes standard colors plus transparent
+ */
+export type BootstrapBackgroundColor = BootstrapColor | 'transparent';
+
+/**
+ * Bootstrap size variants used for spacing, buttons, etc.
+ */
+export type BootstrapSize = 'sm' | 'md' | 'lg' | 'xl';
diff --git a/demo/src/lib/views/hash-routing/HashRoutingDemo.svelte b/demo/src/lib/views/hash-routing/HashRoutingDemo.svelte
new file mode 100644
index 0000000..deaed5d
--- /dev/null
+++ b/demo/src/lib/views/hash-routing/HashRoutingDemo.svelte
@@ -0,0 +1,220 @@
+<script lang="ts">
+	import Badge from "../../Badge.svelte";
+	import Card from "../../Card.svelte";
+	import CardBody from "../../CardBody.svelte";
+	import CardHeader from "../../CardHeader.svelte";
+	import { routingMode, toggleRoutingMode } from "../../hash-routing";
+    import { Route, Router, location } from "@wjfe/n-savant";
+	import ViewSkeleton from "../ViewSkeleton.svelte";
+	import DemoView from "../../demo/DemoView.svelte";
+	import CodeSnippet from "../../CodeSnippet.svelte";
+	import xml from "svelte-highlight/languages/xml";
+	import liveHashCode from './code-samples/live-hash-display.svelte?raw';
+
+	// Modal state
+	let showCodeModal = $state(false);
+
+	// Parsed routes for display
+	const parsedRoutes = $derived.by(() => {
+		if (routingMode === 'multi') {
+			// Return all hash paths in multi mode
+			return location.hashPaths;
+		} else {
+			// Return single hash as main route
+			return { main: location.hashPaths.single || '' };
+		}
+	});
+</script>
+
+{#snippet demo(hash: boolean | string)}
+	<Router {hash} id="hash-demo{typeof hash === 'string' ? `-${hash}` : ''}">
+		<ViewSkeleton {hash}>
+			<Route {hash} key="demo" path="/demo/*">
+				<DemoView basePath="/demo" {hash} />
+			</Route>
+		</ViewSkeleton>
+	</Router>
+{/snippet}
+
+<!-- Interactive Demo Section -->
+<div class="row mt-5">
+	<div class="col-lg-8 offset-lg-2">
+		<Card border="dark">
+			<CardHeader background="dark" textColor="white" class="text-center" tag="h3">
+				🎮 Interactive Demo
+			</CardHeader>
+			<CardBody class="text-center">
+				<div class="mb-4">
+					<Badge
+						background={routingMode === 'single' ? 'primary' : 'success'}
+						class="fs-6 px-3 py-2"
+					>
+						Current Mode: <code class="text-white">{routingMode}</code>
+					</Badge>
+				</div>
+				<p class="lead">Experience the difference between single and multi-hash routing modes!</p>
+				<p>
+					Currently in <strong>{routingMode}</strong> mode.
+					{#if routingMode === 'single'}
+						The entire hash value represents one route.
+					{:else}
+						The hash contains multiple key/value pairs for independent routers.
+					{/if}
+				</p>
+				<button
+					type="button"
+					class="btn btn-lg btn-{routingMode === 'single' ? 'success' : 'primary'}"
+					onclick={() => toggleRoutingMode()}
+				>
+					🔄 Switch to {routingMode === 'single' ? 'Multi' : 'Single'} Mode
+				</button>
+				<div class="mt-3">
+					<small class="text-muted"> ⚠️ Note: The page will reload to apply the new mode. </small>
+				</div>
+			</CardBody>
+		</Card>
+	</div>
+</div>
+
+<!-- Live Demo -->
+<div class="mt-5">
+	<h2 class="text-center mb-4">🎪 Live Demo</h2>
+	{#if routingMode === 'multi'}
+		<div class="row g-4">
+			<div class="col-xl-6">
+				<Card>
+					<CardHeader>
+						<h5 class="mb-0">🎯 Demo Router "d1"</h5>
+						<small class="text-muted">Hash key: d1</small>
+					</CardHeader>
+					<CardBody>
+						{@render demo('d1')}
+					</CardBody>
+				</Card>
+			</div>
+			<div class="col-xl-6">
+				<Card>
+					<CardHeader>
+						<h5 class="mb-0">🎪 Demo Router "d2"</h5>
+						<small class="text-muted">Hash key: d2</small>
+					</CardHeader>
+					<CardBody>
+						{@render demo('d2')}
+					</CardBody>
+				</Card>
+			</div>
+		</div>
+		<div class="alert alert-info mt-4">
+			<h6>🔍 Live URL Hash</h6>
+			<p class="mb-2">
+				Watch how the URL hash updates in real-time as you navigate through both demos:
+			</p>
+			<div class="bg-dark text-light p-2 rounded font-monospace">
+				Current hash: <span class="text-warning">{location.url.hash || '#(empty)'}</span>
+			</div>
+			{#if Object.keys(parsedRoutes).length > 0}
+				<div class="mt-2">
+					<small><strong>Parsed routes:</strong></small>
+					<ul class="mb-0 mt-1">
+						{#each Object.entries(parsedRoutes) as [key, value]}
+							<li><code>{key}</code>: <span class="text-success">{value || '(empty)'}</span></li>
+						{/each}
+					</ul>
+				</div>
+			{/if}
+			<div class="mt-3">
+				<button
+					type="button"
+					class="btn btn-sm btn-outline-primary"
+					onclick={() => (showCodeModal = true)}
+				>
+					📋 Show Code
+				</button>
+			</div>
+		</div>
+	{:else}
+		<Card>
+			<CardHeader>
+				<h5 class="mb-0">🎯 Single Hash Demo</h5>
+				<small class="text-muted">The entire hash represents one route</small>
+			</CardHeader>
+			<CardBody>
+				{@render demo(true)}
+			</CardBody>
+		</Card>
+		<div class="alert alert-info mt-4">
+			<h6>🔍 Live URL Hash</h6>
+			<p class="mb-2">In single mode, the entire hash represents one route:</p>
+			<div class="bg-dark text-light p-2 rounded font-monospace">
+				Current hash: <span class="text-warning">{location.url.hash || '#(empty)'}</span>
+			</div>
+			{#if parsedRoutes.main}
+				<div class="mt-2">
+					<small
+						><strong>Current route:</strong>
+						<span class="text-success">{parsedRoutes.main}</span></small
+					>
+				</div>
+			{/if}
+			<div class="mt-3">
+				<button
+					type="button"
+					class="btn btn-sm btn-outline-primary"
+					onclick={() => (showCodeModal = true)}
+				>
+					📋 Show Code
+				</button>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<!-- Code Modal -->
+{#if showCodeModal}
+	<div class="modal fade show" style="display: block;" tabindex="-1">
+		<div class="modal-dialog modal-lg">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title">💻 Live Hash Display Code</h5>
+					<button 
+						type="button" 
+						class="btn-close" 
+						onclick={() => showCodeModal = false}
+						aria-label="Close this dialog box"
+					></button>
+				</div>
+				<div class="modal-body">
+					<p class="mb-3">
+						Here's a simplified example showing how to create a live hash display using 
+						<code>@wjfe/n-savant</code>'s reactive location object:
+					</p>
+					<CodeSnippet 
+						language={xml} 
+						code={liveHashCode} 
+						title="Live Hash Display Component"
+						copyable={true}
+					/>
+					<div class="alert alert-info mt-3">
+						<strong>💡 Key points:</strong>
+						<ul class="mb-0 mt-2">
+							<li><code>location.url.hash</code> <Badge background="success">reactive</Badge> updates automatically</li>
+							<li><code>location.hashPaths</code> <Badge background="success">reactive</Badge> provides parsed hash routes</li>
+							<li><code>$derived()</code> creates reactive computed values</li>
+							<li><strong>✨ No manual event listeners needed!</strong></li>
+						</ul>
+					</div>
+				</div>
+				<div class="modal-footer">
+					<button 
+						type="button" 
+						class="btn btn-primary" 
+						onclick={() => showCodeModal = false}
+					>
+						Got it! 👍
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="modal-backdrop fade show"></div>
+{/if}
diff --git a/demo/src/lib/views/hash-routing/HashRoutingView.svelte b/demo/src/lib/views/hash-routing/HashRoutingView.svelte
index 733f4c5..e6e5e32 100644
--- a/demo/src/lib/views/hash-routing/HashRoutingView.svelte
+++ b/demo/src/lib/views/hash-routing/HashRoutingView.svelte
@@ -1,123 +1,28 @@
 <script lang="ts">
-	import DemoView from '../../demo/DemoView.svelte';
-	import ViewSkeleton from '../ViewSkeleton.svelte';
 	import CodeSnippet from '../../CodeSnippet.svelte';
-	import { routingMode, toggleRoutingMode } from '../../hash-routing.js';
-	import { Route, Router, location } from '@wjfe/n-savant';
+	import Card from '../../Card.svelte';
+	import CardHeader from '../../CardHeader.svelte';
+	import CardBody from '../../CardBody.svelte';
 	import typescript from 'svelte-highlight/languages/typescript';
 	import xml from 'svelte-highlight/languages/xml';
+	import LinksAndNavigation from './code-samples/links-and-navigation.svelte';
+	
+	// Import code samples as raw text
+	import basicHashRouterCode from './code-samples/basic-hash-router.txt?raw';
+	import multiHashRouterCode from './code-samples/multi-hash-router.txt?raw';
+	import pathAndHashCode from './code-samples/path-and-hash.txt?raw';
+	import hashUrlExamples from './code-samples/hash-url-examples.ts?raw';
+	import HashRoutingDemo from './HashRoutingDemo.svelte';
+	import linksAndNavigation from './code-samples/links-and-navigation.svelte?raw';
+	import Alert from '../../Alert.svelte';
 
 	let {
 		basePath
 	}: {
 		basePath?: string;
 	} = $props();
-
-	// Modal state
-	let showCodeModal = $state(false);
-
-	// Simplified code example for the modal
-	const liveHashCode = `<scr` + `ipt lang="ts">
-  import { location } from '@wjfe/n-savant';
-
-  // Reactive hash display
-  const currentHash = $derived(() => {
-    return location.url.hash || '#(empty)';
-  });
-
-  // Parse routes for display
-  const routes = $derived(() => {
-    if (routingMode === 'multi') {
-      return location.hashPaths; // All hash paths
-    } else {
-      return { main: location.hashPaths.single || '' };
-    }
-  });
-</scr` + `ipt>
-
-<div class="hash-display">
-  <div class="current-hash">
-    Current hash: {currentHash}
-  </div>
-  
-  {#each Object.entries(routes) as [key, value]}
-    <div class="route-info">
-      <strong>{key}:</strong> {value || '(empty)'}
-    </div>
-  {/each}
-</div>`;
-
-	// Parsed routes for display
-	const parsedRoutes = $derived.by(() => {
-		if (routingMode === 'multi') {
-			// Return all hash paths in multi mode
-			return location.hashPaths;
-		} else {
-			// Return single hash as main route
-			return { main: location.hashPaths.single || '' };
-		}
-	});
-
-	const basicHashRouterCode = `<Router hash id="my-hash-router">
-  <Route hash key="home" path="/">
-    <HomePage />
-  </Route>
-  <Route hash key="profile" path="/profile/:userId">
-    <ProfilePage />
-  </Route>
-</Router>`;
-
-	const multiHashRouterCode = `<!-- Multiple hash routers can coexist! -->
-<Router hash="sidebar" id="sidebar-router">
-  <Route hash="sidebar" key="nav" path="/nav">
-    <SidebarNavigation />
-  </Route>
-</Router>
-
-<Router hash="main" id="main-router">
-  <Route hash="main" key="dashboard" path="/dashboard">
-    <DashboardView />
-  </Route>
-</Router>`;
-
-	const hashUrlExamples = `// Single Hash Mode URLs:
-// https://example.com#/
-// https://example.com#/profile/123
-// https://example.com#/settings/account
-
-// Multi Hash Mode URLs:
-// https://example.com#sidebar=/nav;main=/dashboard
-// https://example.com#d1=/demo/routes;d2=/demo/links
-// https://example.com#nav=/home;content=/profile/123;modal=/settings`;
-
-	const pathAndHashCode = `<Router id="main-router">
-  <!-- Path routing -->
-  <Route key="app" path="/app/*">
-    <AppLayout />
-  </Route>
-</Router>
-
-<Router hash id="modal-router">
-  <!-- Hash routing for modals -->
-  <Route hash key="login" path="/login">
-    <LoginModal />
-  </Route>
-  <Route hash key="settings" path="/settings">
-    <SettingsModal />
-  </Route>
-</Router>`;
 </script>
 
-{#snippet demo(hash: boolean | string)}
-	<Router {hash} id="hash-demo{typeof hash === 'string' ? `-${hash}` : ''}">
-		<ViewSkeleton {hash}>
-			<Route {hash} key="demo" path="/demo/*">
-				<DemoView basePath="/demo" {hash} />
-			</Route>
-		</ViewSkeleton>
-	</Router>
-{/snippet}
-
 <div>
 	<h1>🚀 Hash Routing</h1>
 	<p class="lead">
@@ -127,12 +32,12 @@
 
 	<!-- Hero Section with Basic Concept -->
 	<div class="row mt-4">
-		<div class="col-lg-6">
-			<div class="card border-primary h-100">
-				<div class="card-header bg-primary text-white">
-					<h4 class="mb-0">✨ Basic Hash Routing</h4>
-				</div>
-				<div class="card-body">
+		<div class="col-xl-4 col-lg-6">
+			<Card border="primary" class="h-100">
+				<CardHeader background="primary" textColor="white" tag="h4" class="mb-0">
+					✨ Basic Hash Routing
+				</CardHeader>
+				<CardBody>
 					<p>
 						Hash routing is perfect for single-page applications. It works without server 
 						configuration and plays nicely with static hosting!
@@ -147,34 +52,57 @@
 							💡 Try changing the URL hash to see routing in action!
 						</small>
 					</div>
-				</div>
-			</div>
+				</CardBody>
+			</Card>
 		</div>
-		<div class="col-lg-6">
-			<div class="card border-success h-100">
-				<div class="card-header bg-success text-white">
-					<h4 class="mb-0">🎯 URL Examples</h4>
-				</div>
-				<div class="card-body">
+		<div class="col-xl-4 col-lg-6">
+			<Card border="success" class="h-100">
+				<CardHeader background="success" textColor="white" tag="h4" class="mb-0">
+					🎯 URL Examples
+				</CardHeader>
+				<CardBody>
 					<p>See how URLs look in both single and multi-hash modes:</p>
 					<CodeSnippet 
 						language={typescript} 
 						code={hashUrlExamples} 
 						title="Hash URL Patterns"
 					/>
-				</div>
-			</div>
+				</CardBody>
+			</Card>
+		</div>
+		<div class="col-xl-4 col">
+			<Card border="danger" class="h-100">
+				<CardHeader background="danger" textColor="white" tag="h4" class="mb-0">
+					🔗 Links & Navigation
+				</CardHeader>
+				<CardBody>
+					<p>
+						You should always stick to <code>Link</code> components when creating navigation links.  However, 
+						hash HREF's in anchor elements work:
+					</p>
+					<CodeSnippet 
+						language={typescript} 
+						code={linksAndNavigation} 
+						title="Links vs Anchors"
+					/>
+					<Alert background="info">
+						ℹ️ Anchor elements, when clicked, carry the existing history state.
+					</Alert>
+					<h6>Live Code Sample</h6>
+					<LinksAndNavigation />
+				</CardBody>
+			</Card>
 		</div>
 	</div>
 
 	<!-- Advanced Features -->
 	<div class="row mt-4">
 		<div class="col-lg-6">
-			<div class="card border-warning h-100">
-				<div class="card-header bg-warning text-dark">
-					<h4 class="mb-0">🔄 Multiple Hash Routers</h4>
-				</div>
-				<div class="card-body">
+			<Card border="warning" class="h-100">
+				<CardHeader background="warning" textColor="dark" tag="h4" class="mb-0">
+					🔄 Multiple Hash Routers
+				</CardHeader>
+				<CardBody>
 					<p>
 						Run multiple independent hash routers simultaneously! Each router gets its own 
 						namespace in the hash value using key-value pairs.
@@ -191,15 +119,15 @@
 					<div class="alert alert-success mt-2">
 						<strong>💡 Pro tip:</strong> Keep your multi-hash path names short to prevent URLs from growing too long!
 					</div>
-				</div>
-			</div>
+				</CardBody>
+			</Card>
 		</div>
 		<div class="col-lg-6">
-			<div class="card border-info h-100">
-				<div class="card-header bg-info text-white">
-					<h4 class="mb-0">🤝 Path + Hash Harmony</h4>
-				</div>
-				<div class="card-body">
+			<Card border="info" class="h-100">
+				<CardHeader background="info" textColor="white" tag="h4" class="mb-0">
+					🤝 Path + Hash Harmony
+				</CardHeader>
+				<CardBody>
 					<p>
 						Mix path and hash routing! Use path routing for main navigation and hash 
 						routing for modals, tabs, or secondary navigation.
@@ -213,191 +141,9 @@
 						<strong>Best practice:</strong> Use path routing for main content and hash 
 						routing for overlays and temporary UI states.
 					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<!-- Interactive Demo Section -->
-	<div class="row mt-5">
-		<div class="col-lg-8 offset-lg-2">
-			<div class="card border-dark">
-				<div class="card-header bg-dark text-white text-center">
-					<h3 class="mb-0">🎮 Interactive Demo</h3>
-				</div>
-				<div class="card-body text-center">
-					<div class="mb-4">
-						<span class="badge bg-{routingMode === 'single' ? 'primary' : 'success'} fs-6 px-3 py-2">
-							Current Mode: <code class="text-white">{routingMode}</code>
-						</span>
-					</div>
-					<p class="lead">
-						Experience the difference between single and multi-hash routing modes!
-					</p>
-					<p>
-						Currently in <strong>{routingMode}</strong> mode. 
-						{#if routingMode === 'single'}
-							The entire hash value represents one route.
-						{:else}
-							The hash contains multiple key/value pairs for independent routers.
-						{/if}
-					</p>
-					<button 
-						type="button" 
-						class="btn btn-lg btn-{routingMode === 'single' ? 'success' : 'primary'}" 
-						onclick={() => toggleRoutingMode()}
-					>
-						🔄 Switch to {routingMode === 'single' ? 'Multi' : 'Single'} Mode
-					</button>
-					<div class="mt-3">
-						<small class="text-muted">
-							⚠️ Note: The page will reload to apply the new mode.
-						</small>
-					</div>
-				</div>
-			</div>
+				</CardBody>
+			</Card>
 		</div>
 	</div>
-
-	<!-- Live Demo -->
-	<div class="mt-5">
-		<h2 class="text-center mb-4">🎪 Live Demo</h2>
-		{#if routingMode === 'multi'}
-			<div class="row g-4">
-				<div class="col-xl-6">
-					<div class="card">
-						<div class="card-header">
-							<h5 class="mb-0">🎯 Demo Router "d1"</h5>
-							<small class="text-muted">Hash key: d1</small>
-						</div>
-						<div class="card-body">
-							{@render demo('d1')}
-						</div>
-					</div>
-				</div>
-				<div class="col-xl-6">
-					<div class="card">
-						<div class="card-header">
-							<h5 class="mb-0">🎪 Demo Router "d2"</h5>
-							<small class="text-muted">Hash key: d2</small>
-						</div>
-						<div class="card-body">
-							{@render demo('d2')}
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="alert alert-info mt-4">
-				<h6>🔍 Live URL Hash</h6>
-				<p class="mb-2">
-					Watch how the URL hash updates in real-time as you navigate through both demos:
-				</p>
-				<div class="bg-dark text-light p-2 rounded font-monospace">
-					Current hash: <span class="text-warning">{location.url.hash || '#(empty)'}</span>
-				</div>
-				{#if Object.keys(parsedRoutes).length > 0}
-					<div class="mt-2">
-						<small><strong>Parsed routes:</strong></small>
-						<ul class="mb-0 mt-1">
-							{#each Object.entries(parsedRoutes) as [key, value]}
-								<li><code>{key}</code>: <span class="text-success">{value || '(empty)'}</span></li>
-							{/each}
-						</ul>
-					</div>
-				{/if}
-				<div class="mt-3">
-					<button 
-						type="button" 
-						class="btn btn-sm btn-outline-primary"
-						onclick={() => showCodeModal = true}
-					>
-						📋 Show Code
-					</button>
-				</div>
-			</div>
-		{:else}
-			<div class="card">
-				<div class="card-header">
-					<h5 class="mb-0">🎯 Single Hash Demo</h5>
-					<small class="text-muted">The entire hash represents one route</small>
-				</div>
-				<div class="card-body">
-					{@render demo(true)}
-				</div>
-			</div>
-			<div class="alert alert-info mt-4">
-				<h6>🔍 Live URL Hash</h6>
-				<p class="mb-2">
-					In single mode, the entire hash represents one route:
-				</p>
-				<div class="bg-dark text-light p-2 rounded font-monospace">
-					Current hash: <span class="text-warning">{location.url.hash || '#(empty)'}</span>
-				</div>
-				{#if parsedRoutes.main}
-					<div class="mt-2">
-						<small><strong>Current route:</strong> <span class="text-success">{parsedRoutes.main}</span></small>
-					</div>
-				{/if}
-				<div class="mt-3">
-					<button 
-						type="button" 
-						class="btn btn-sm btn-outline-primary"
-						onclick={() => showCodeModal = true}
-					>
-						📋 Show Code
-					</button>
-				</div>
-			</div>
-		{/if}
-	</div>
+	<HashRoutingDemo />
 </div>
-
-<!-- Code Modal -->
-{#if showCodeModal}
-	<div class="modal fade show" style="display: block;" tabindex="-1">
-		<div class="modal-dialog modal-lg">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h5 class="modal-title">💻 Live Hash Display Code</h5>
-					<button 
-						type="button" 
-						class="btn-close" 
-						onclick={() => showCodeModal = false}
-						aria-label="Close this dialog box"
-					></button>
-				</div>
-				<div class="modal-body">
-					<p class="mb-3">
-						Here's a simplified example showing how to create a live hash display using 
-						<code>@wjfe/n-savant</code>'s reactive location object:
-					</p>
-					<CodeSnippet 
-						language={xml} 
-						code={liveHashCode} 
-						title="Live Hash Display Component"
-						copyable={true}
-					/>
-					<div class="alert alert-info mt-3">
-						<strong>💡 Key points:</strong>
-						<ul class="mb-0 mt-2">
-							<li><code>location.url.hash</code> <span class="badge bg-success">reactive</span> updates automatically</li>
-							<li><code>location.hashPaths</code> <span class="badge bg-success">reactive</span> provides parsed hash routes</li>
-							<li><code>$derived()</code> creates reactive computed values</li>
-							<li><strong>✨ No manual event listeners needed!</strong></li>
-						</ul>
-					</div>
-				</div>
-				<div class="modal-footer">
-					<button 
-						type="button" 
-						class="btn btn-primary" 
-						onclick={() => showCodeModal = false}
-					>
-						Got it! 👍
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="modal-backdrop fade show"></div>
-{/if}
diff --git a/demo/src/lib/views/hash-routing/code-samples/basic-hash-router.svelte b/demo/src/lib/views/hash-routing/code-samples/basic-hash-router.svelte
new file mode 100644
index 0000000..3bbf182
--- /dev/null
+++ b/demo/src/lib/views/hash-routing/code-samples/basic-hash-router.svelte
@@ -0,0 +1,8 @@
+<Router hash id="my-hash-router">
+  <Route hash key="home" path="/">
+    <HomePage />
+  </Route>
+  <Route hash key="profile" path="/profile/:userId">
+    <ProfilePage />
+  </Route>
+</Router>
diff --git a/demo/src/lib/views/hash-routing/code-samples/basic-hash-router.txt b/demo/src/lib/views/hash-routing/code-samples/basic-hash-router.txt
new file mode 100644
index 0000000..3bbf182
--- /dev/null
+++ b/demo/src/lib/views/hash-routing/code-samples/basic-hash-router.txt
@@ -0,0 +1,8 @@
+<Router hash id="my-hash-router">
+  <Route hash key="home" path="/">
+    <HomePage />
+  </Route>
+  <Route hash key="profile" path="/profile/:userId">
+    <ProfilePage />
+  </Route>
+</Router>
diff --git a/demo/src/lib/views/hash-routing/code-samples/hash-url-examples.ts b/demo/src/lib/views/hash-routing/code-samples/hash-url-examples.ts
new file mode 100644
index 0000000..d0a27c7
--- /dev/null
+++ b/demo/src/lib/views/hash-routing/code-samples/hash-url-examples.ts
@@ -0,0 +1,9 @@
+// Single Hash Mode URLs:
+// https://example.com#/
+// https://example.com#/profile/123
+// https://example.com#/settings/account
+
+// Multi Hash Mode URLs:
+// https://example.com#sidebar=/nav;main=/dashboard
+// https://example.com#d1=/demo/routes;d2=/demo/links
+// https://example.com#nav=/home;content=/profile/123;modal=/settings
diff --git a/demo/src/lib/views/hash-routing/code-samples/links-and-navigation.svelte b/demo/src/lib/views/hash-routing/code-samples/links-and-navigation.svelte
new file mode 100644
index 0000000..c3de257
--- /dev/null
+++ b/demo/src/lib/views/hash-routing/code-samples/links-and-navigation.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { Link } from "@wjfe/n-savant";
+    import { routingMode } from "../../../hash-routing";
+
+    const href = $derived(routingMode === 'single' ?
+        '#/demo' :
+        '#d1=/demo;d2=/demo'
+    );
+</script>
+
+<Link {href} hash={false} class="btn btn-secondary">
+    Start Demo
+</Link>
+ <a {href} class="btn btn-info">
+    Start Demo (anchor link)
+</a>
diff --git a/demo/src/lib/views/hash-routing/code-samples/live-hash-display.svelte b/demo/src/lib/views/hash-routing/code-samples/live-hash-display.svelte
new file mode 100644
index 0000000..d1997fe
--- /dev/null
+++ b/demo/src/lib/views/hash-routing/code-samples/live-hash-display.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { location } from '@wjfe/n-savant';
+  
+  // For this example, assume we have routing mode state
+  let routingMode = $state('single'); // or 'multi'
+
+  // Reactive hash display
+  const currentHash = $derived(() => {
+    return location.url.hash || '#(empty)';
+  });
+
+  // Parse routes for display
+  const routes = $derived(() => {
+    if (routingMode === 'multi') {
+      return location.hashPaths; // All hash paths
+    } else {
+      return { main: location.hashPaths.single || '' };
+    }
+  });
+</script>
+
+<div class="hash-display">
+  <div class="current-hash">
+    Current hash: {currentHash}
+  </div>
+  
+  {#each Object.entries(routes) as [key, value]}
+    <div class="route-info">
+      <strong>{key}:</strong> {value || '(empty)'}
+    </div>
+  {/each}
+</div>
diff --git a/demo/src/lib/views/hash-routing/code-samples/multi-hash-router.svelte b/demo/src/lib/views/hash-routing/code-samples/multi-hash-router.svelte
new file mode 100644
index 0000000..f1488ad
--- /dev/null
+++ b/demo/src/lib/views/hash-routing/code-samples/multi-hash-router.svelte
@@ -0,0 +1,12 @@
+<!-- Multiple hash routers can coexist! -->
+<Router hash="sidebar" id="sidebar-router">
+  <Route hash="sidebar" key="nav" path="/nav">
+    <SidebarNavigation />
+  </Route>
+</Router>
+
+<Router hash="main" id="main-router">
+  <Route hash="main" key="dashboard" path="/dashboard">
+    <DashboardView />
+  </Route>
+</Router>
diff --git a/demo/src/lib/views/hash-routing/code-samples/multi-hash-router.txt b/demo/src/lib/views/hash-routing/code-samples/multi-hash-router.txt
new file mode 100644
index 0000000..f1488ad
--- /dev/null
+++ b/demo/src/lib/views/hash-routing/code-samples/multi-hash-router.txt
@@ -0,0 +1,12 @@
+<!-- Multiple hash routers can coexist! -->
+<Router hash="sidebar" id="sidebar-router">
+  <Route hash="sidebar" key="nav" path="/nav">
+    <SidebarNavigation />
+  </Route>
+</Router>
+
+<Router hash="main" id="main-router">
+  <Route hash="main" key="dashboard" path="/dashboard">
+    <DashboardView />
+  </Route>
+</Router>
diff --git a/demo/src/lib/views/hash-routing/code-samples/path-and-hash.txt b/demo/src/lib/views/hash-routing/code-samples/path-and-hash.txt
new file mode 100644
index 0000000..c066b11
--- /dev/null
+++ b/demo/src/lib/views/hash-routing/code-samples/path-and-hash.txt
@@ -0,0 +1,16 @@
+<Router id="main-router">
+  <!-- Path routing -->
+  <Route key="app" path="/app/*">
+    <AppLayout />
+  </Route>
+</Router>
+
+<Router hash id="modal-router">
+  <!-- Hash routing for modals -->
+  <Route hash key="login" path="/login">
+    <LoginModal />
+  </Route>
+  <Route hash key="settings" path="/settings">
+    <SettingsModal />
+  </Route>
+</Router>
diff --git a/demo/src/lib/views/home/FeaturesTable.svelte b/demo/src/lib/views/home/FeaturesTable.svelte
index 773b505..8ac4de4 100644
--- a/demo/src/lib/views/home/FeaturesTable.svelte
+++ b/demo/src/lib/views/home/FeaturesTable.svelte
@@ -1,4 +1,8 @@
 <script lang="ts">
+	import Card from '../../Card.svelte';
+	import CardHeader from '../../CardHeader.svelte';
+	import CardBody from '../../CardBody.svelte';
+
 	interface Feature {
 		name: string;
 		liteMode: boolean;
@@ -119,9 +123,9 @@
 	];
 </script>
 
-<div class="card">
-	<h3 class="card-header">Features</h3>
-	<div class="card-body">
+<Card class="h-100">
+	<CardHeader tag="h3">Features</CardHeader>
+	<CardBody>
 		<div class="table-responsive">
 			<table class="table table-striped">
 				<thead>
@@ -146,8 +150,8 @@
 				</tbody>
 			</table>
 		</div>
-	</div>
-</div>
+	</CardBody>
+</Card>
 
 <style>
 	.feature-status {
diff --git a/demo/src/lib/views/home/HomeView.svelte b/demo/src/lib/views/home/HomeView.svelte
index 09a88c2..90c5955 100644
--- a/demo/src/lib/views/home/HomeView.svelte
+++ b/demo/src/lib/views/home/HomeView.svelte
@@ -4,46 +4,17 @@
 	import Quickstart from './Quickstart.svelte';
 	import FeaturesTable from './FeaturesTable.svelte';
 	import CodeSnippet from '../../CodeSnippet.svelte';
+	import Card from '../../Card.svelte';
+	import CardHeader from '../../CardHeader.svelte';
+	import CardBody from '../../CardBody.svelte';
 	import { RouterTrace, Link } from '@wjfe/n-savant';
 	import xml from 'svelte-highlight/languages/xml';
 	import typescript from 'svelte-highlight/languages/typescript';
 
-	const pathRoutingExample = `<Router id="app">
-  <Route key="home" path="/">
-    <HomePage />
-  </Route>
-  <Route key="profile" path="/user/:id">
-    {#snippet children(params)}
-      <UserProfile userId={params.id} />
-    {/snippet}
-  </Route>
-</Router>`;
-
-	const hashRoutingExample = `// Initialize with hash as default mode
-init({ implicitMode: 'hash' });
-
-// Now you can omit the hash property!
-<Router id="modals">
-  <Route key="login" path="/login">
-    <LoginModal />
-  </Route>
-  <Route key="settings" path="/settings">
-    <SettingsModal />
-  </Route>
-</Router>`;
-
-	const multiHashExample = `<!-- Two independent hash routers! -->
-<Router hash="nav" id="sidebar">
-  <Route hash="nav" key="menu" path="/menu">
-    <SidebarMenu />
-  </Route>
-</Router>
-
-<Router hash="content" id="main">
-  <Route hash="content" key="dashboard" path="/dashboard">
-    <Dashboard />
-  </Route>
-</Router>`;
+	// Import code samples as raw text
+	import pathRoutingExample from './code-samples/path-routing-example.txt?raw';
+	import hashRoutingExample from './code-samples/hash-routing-example.txt?raw';
+	import multiHashExample from './code-samples/multi-hash-example.txt?raw';
 </script>
 
 <div class="root" transition:fade={{ duration: 500 }}>
@@ -52,11 +23,12 @@ init({ implicitMode: 'hash' });
 	<!-- Key Features Showcase -->
 	<div class="row mt-5 g-4">
 		<div class="col-lg-4">
-			<div class="card border-primary h-100" transition:fly={{ delay: 100, y: 50, duration: 600 }}>
-				<div class="card-header bg-primary text-white text-center">
-					<h4 class="mb-0">🛣️ Path Routing</h4>
-				</div>
-				<div class="card-body">
+			<div transition:fly={{ delay: 100, y: 50, duration: 600 }}>
+				<Card border="primary" class="h-100">
+					<CardHeader background="primary" textColor="white" class="text-center" tag="h4">
+						🛣️ Path Routing
+					</CardHeader>
+					<CardBody>
 					<p class="card-text">
 						Classic URL path-based routing with modern SPA performance. SEO-friendly, 
 						bookmarkable, and lightning fast!
@@ -71,16 +43,18 @@ init({ implicitMode: 'hash' });
 							Try Path Routing →
 						</Link>
 					</div>
-				</div>
+				</CardBody>
+			</Card>
 			</div>
 		</div>
 		
 		<div class="col-lg-4">
-			<div class="card border-success h-100" transition:fly={{ delay: 200, y: 50, duration: 600 }}>
-				<div class="card-header bg-success text-white text-center">
-					<h4 class="mb-0">🚀 Hash Routing</h4>
-				</div>
-				<div class="card-body">
+			<div transition:fly={{ delay: 200, y: 50, duration: 600 }}>
+				<Card border="success" class="h-100">
+				<CardHeader background="success" textColor="white" class="text-center" tag="h4">
+					🚀 Hash Routing
+				</CardHeader>
+				<CardBody>
 					<p class="card-text">
 						Fragment-based routing that works everywhere! Perfect for modals, 
 						overlays, and client-side navigation. Also works great in Electron apps!
@@ -99,16 +73,18 @@ init({ implicitMode: 'hash' });
 							Try Hash Routing →
 						</Link>
 					</div>
-				</div>
+				</CardBody>
+			</Card>
 			</div>
 		</div>
 		
 		<div class="col-lg-4">
-			<div class="card border-warning h-100" transition:fly={{ delay: 300, y: 50, duration: 600 }}>
-				<div class="card-header bg-warning text-dark text-center">
-					<h4 class="mb-0">🌟 Multi-Hash Magic</h4>
-				</div>
-				<div class="card-body">
+			<div transition:fly={{ delay: 300, y: 50, duration: 600 }}>
+				<Card border="warning" class="h-100">
+				<CardHeader background="warning" textColor="dark" class="text-center" tag="h4">
+					🌟 Multi-Hash Magic
+				</CardHeader>
+				<CardBody>
 					<p class="card-text">
 						<strong>World's first!</strong> Multiple independent hash routers 
 						running simultaneously. Perfect for micro-frontends!
@@ -123,7 +99,8 @@ init({ implicitMode: 'hash' });
 							See Multi-Hash →
 						</Link>
 					</div>
-				</div>
+				</CardBody>
+			</Card>
 			</div>
 		</div>
 	</div>
@@ -131,11 +108,12 @@ init({ implicitMode: 'hash' });
 	<!-- Why Choose N-Savant -->
 	<div class="row mt-5">
 		<div class="col-lg-8 offset-lg-2">
-			<div class="card border-info" transition:fly={{ delay: 400, y: 50, duration: 600 }}>
-				<div class="card-header bg-info text-white text-center">
-					<h3 class="mb-0">🎯 Why Choose @wjfe/n-savant?</h3>
-				</div>
-				<div class="card-body">
+			<div transition:fly={{ delay: 400, y: 50, duration: 600 }}>
+				<Card border="info">
+				<CardHeader background="info" textColor="white" class="text-center" tag="h3">
+					🎯 Why Choose @wjfe/n-savant?
+				</CardHeader>
+				<CardBody>
 					<div class="row">
 						<div class="col-md-6">
 							<h5 class="text-info">🚀 Performance</h5>
@@ -172,7 +150,8 @@ init({ implicitMode: 'hash' });
 							</ul>
 						</div>
 					</div>
-				</div>
+				</CardBody>
+			</Card>
 			</div>
 		</div>
 	</div>
@@ -214,16 +193,18 @@ init({ implicitMode: 'hash' });
 	<!-- Router Trace Section -->
     <div class="row mt-5">
         <div class="col">
-            <div class="card" transition:fly={{ delay: 800, y: 50, duration: 600 }}>
-                <h3 class="card-header">🔍 About the Route Tracer</h3>
-                <div class="card-body">
+            <div transition:fly={{ delay: 800, y: 50, duration: 600 }}>
+                <Card>
+                    <CardHeader tag="h3">🔍 About the Route Tracer</CardHeader>
+                    <CardBody>
                     <p>
                         The following trace shows the current router's state and will appear throughout 
                         the demo pages. It's a powerful debugging tool that shows exactly how routes 
                         are being matched and processed.
                     </p>
                     <RouterTrace />
-                </div>
+                    </CardBody>
+                </Card>
             </div>
         </div>
     </div>
@@ -234,24 +215,6 @@ init({ implicitMode: 'hash' });
         z-index: 10;
     }
 
-    .card {
-        transition: transform 0.2s ease, box-shadow 0.2s ease;
-    }
-
-    .card:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    }
-
-    .btn {
-        transition: all 0.2s ease;
-    }
-
-    .btn:hover {
-        transform: translateY(-1px);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-    }
-
     .world-first {
         font-size: 1.1em;
         font-weight: 500;
diff --git a/demo/src/lib/views/home/Quickstart.svelte b/demo/src/lib/views/home/Quickstart.svelte
index 4fa8088..f93ba39 100644
--- a/demo/src/lib/views/home/Quickstart.svelte
+++ b/demo/src/lib/views/home/Quickstart.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
     import type { HTMLAttributes } from "svelte/elements";
+    import Card from "../../Card.svelte";
+    import CardHeader from "../../CardHeader.svelte";
+    import CardBody from "../../CardBody.svelte";
     import CodeSnippet from "../../CodeSnippet.svelte";
     import bash from "svelte-highlight/languages/bash";
     import typescript from "svelte-highlight/languages/typescript";
@@ -12,11 +15,9 @@
     }: Props = $props();
 </script>
 
-<div class={["card", cssClass]} {...restProps}>
-    <div class="card-header">
-        <h2>Quickstart</h2>
-    </div>
-    <div class="card-body">
+<Card class={["h-100", cssClass]} {...restProps}>
+    <CardHeader tag="h2">Quickstart</CardHeader>
+    <CardBody>
         <p>Install the package:</p>
         <CodeSnippet 
             language={bash} 
@@ -42,5 +43,5 @@
 </Router>`}
             title="Basic Usage"
         />
-    </div>
-</div>
+    </CardBody>
+</Card>
diff --git a/demo/src/lib/views/home/code-samples/hash-routing-example.txt b/demo/src/lib/views/home/code-samples/hash-routing-example.txt
new file mode 100644
index 0000000..888f15d
--- /dev/null
+++ b/demo/src/lib/views/home/code-samples/hash-routing-example.txt
@@ -0,0 +1,12 @@
+// Initialize with hash as default mode
+init({ implicitMode: 'hash' });
+
+// Now you can omit the hash property!
+<Router id="modals">
+  <Route key="login" path="/login">
+    <LoginModal />
+  </Route>
+  <Route key="settings" path="/settings">
+    <SettingsModal />
+  </Route>
+</Router>
diff --git a/demo/src/lib/views/home/code-samples/multi-hash-example.txt b/demo/src/lib/views/home/code-samples/multi-hash-example.txt
new file mode 100644
index 0000000..91bbca9
--- /dev/null
+++ b/demo/src/lib/views/home/code-samples/multi-hash-example.txt
@@ -0,0 +1,12 @@
+<!-- Two independent hash routers! -->
+<Router hash="nav" id="sidebar">
+  <Route hash="nav" key="menu" path="/menu">
+    <SidebarMenu />
+  </Route>
+</Router>
+
+<Router hash="content" id="main">
+  <Route hash="content" key="dashboard" path="/dashboard">
+    <Dashboard />
+  </Route>
+</Router>
diff --git a/demo/src/lib/views/home/code-samples/path-routing-example.txt b/demo/src/lib/views/home/code-samples/path-routing-example.txt
new file mode 100644
index 0000000..86f37b8
--- /dev/null
+++ b/demo/src/lib/views/home/code-samples/path-routing-example.txt
@@ -0,0 +1,10 @@
+<Router id="app">
+  <Route key="home" path="/">
+    <HomePage />
+  </Route>
+  <Route key="profile" path="/user/:id">
+    {#snippet children(params)}
+      <UserProfile userId={params.id} />
+    {/snippet}
+  </Route>
+</Router>
diff --git a/demo/src/lib/views/path-routing/code-samples/basic-path-router.txt b/demo/src/lib/views/path-routing/code-samples/basic-path-router.txt
new file mode 100644
index 0000000..a5f81ca
--- /dev/null
+++ b/demo/src/lib/views/path-routing/code-samples/basic-path-router.txt
@@ -0,0 +1,11 @@
+<Router id="app-router" basePath="/app">
+  <Route key="home" path="/">
+    <HomePage />
+  </Route>
+  <Route key="about" path="/about">
+    <AboutPage />
+  </Route>
+  <Route key="contact" path="/contact">
+    <ContactPage />
+  </Route>
+</Router>
diff --git a/demo/src/lib/views/path-routing/code-samples/link-component.txt b/demo/src/lib/views/path-routing/code-samples/link-component.txt
new file mode 100644
index 0000000..b130f71
--- /dev/null
+++ b/demo/src/lib/views/path-routing/code-samples/link-component.txt
@@ -0,0 +1,10 @@
+<!-- ❌ Don't use regular anchor tags -->
+<a href="/profile/123">View Profile</a>
+
+<!-- ✅ Use the Link component instead -->
+<Link href="/profile/123">View Profile</Link>
+
+<!-- 🎯 Link with parameters -->
+<Link href="/settings/account" class="btn btn-primary">
+  Account Settings
+</Link>
diff --git a/demo/src/lib/views/path-routing/code-samples/nested-routing.txt b/demo/src/lib/views/path-routing/code-samples/nested-routing.txt
new file mode 100644
index 0000000..6b4f565
--- /dev/null
+++ b/demo/src/lib/views/path-routing/code-samples/nested-routing.txt
@@ -0,0 +1,15 @@
+<Router id="main-router">
+  <Route key="app" path="/app/*">
+    <AppLayout>
+      <!-- Nested router inside AppLayout -->
+      <Router id="app-sub-router" basePath="/app">
+        <Route key="dashboard" path="/dashboard">
+          <Dashboard />
+        </Route>
+        <Route key="profile" path="/profile/:id">
+          <UserProfile />
+        </Route>
+      </Router>
+    </AppLayout>
+  </Route>
+</Router>
diff --git a/demo/src/lib/views/path-routing/code-samples/route-guards.txt b/demo/src/lib/views/path-routing/code-samples/route-guards.txt
new file mode 100644
index 0000000..ff56228
--- /dev/null
+++ b/demo/src/lib/views/path-routing/code-samples/route-guards.txt
@@ -0,0 +1,15 @@
+<Route 
+  key="admin" 
+  path="/admin/*"
+  and={(params, location) => user.isAdmin}
+>
+  <AdminPanel />
+</Route>
+
+<Route 
+  key="profile" 
+  path="/profile/:userId"
+  and={(params) => params.userId === currentUser.id || user.canViewProfiles}
+>
+  <UserProfile />
+</Route>
diff --git a/demo/src/lib/views/path-routing/code-samples/route-parameters.txt b/demo/src/lib/views/path-routing/code-samples/route-parameters.txt
new file mode 100644
index 0000000..df16e57
--- /dev/null
+++ b/demo/src/lib/views/path-routing/code-samples/route-parameters.txt
@@ -0,0 +1,23 @@
+<!-- Route with single parameter -->
+<Route key="user" path="/user/:id">
+  {#snippet children(params)}
+    <h1>User ID: {params.id}</h1>
+  {/snippet}
+</Route>
+
+<!-- Route with multiple parameters -->
+<Route key="post" path="/blog/:category/:slug">
+  {#snippet children(params)}
+    <BlogPost 
+      category={params.category} 
+      slug={params.slug} 
+    />
+  {/snippet}
+</Route>
+
+<!-- Route with rest parameter (catch-all) -->
+<Route key="files" path="/files/*">
+  {#snippet children(params)}
+    <FileExplorer path={params.rest} />
+  {/snippet}
+</Route>
diff --git a/demo/src/lib/views/path-routing/code-samples/url-examples.ts b/demo/src/lib/views/path-routing/code-samples/url-examples.ts
new file mode 100644
index 0000000..f0df698
--- /dev/null
+++ b/demo/src/lib/views/path-routing/code-samples/url-examples.ts
@@ -0,0 +1,13 @@
+// Basic routes:
+// /                    → Home page
+// /about               → About page
+// /contact             → Contact page
+
+// Parameterized routes:
+// /user/123            → User profile for ID 123
+// /blog/tech/svelte-5  → Blog post in tech category
+// /product/laptop/123  → Product page
+
+// Rest parameters:
+// /files/docs/readme.md     → File explorer
+// /admin/users/permissions  → Admin section
diff --git a/demo/src/lib/views/path-routing/views/HomeView.svelte b/demo/src/lib/views/path-routing/views/HomeView.svelte
index aa7ef37..960c9df 100644
--- a/demo/src/lib/views/path-routing/views/HomeView.svelte
+++ b/demo/src/lib/views/path-routing/views/HomeView.svelte
@@ -1,100 +1,18 @@
 <script lang="ts">
 	import CodeSnippet from '../../../CodeSnippet.svelte';
+	import Card from '../../../Card.svelte';
+	import CardHeader from '../../../CardHeader.svelte';
+	import CardBody from '../../../CardBody.svelte';
 	import xml from 'svelte-highlight/languages/xml';
 	import typescript from 'svelte-highlight/languages/typescript';
 
-	const basicPathRouterCode = `<Router id="app-router" basePath="/app">
-  <Route key="home" path="/">
-    <HomePage />
-  </Route>
-  <Route key="about" path="/about">
-    <AboutPage />
-  </Route>
-  <Route key="contact" path="/contact">
-    <ContactPage />
-  </Route>
-</Router>`;
-
-	const linkComponentCode = `<!-- ❌ Don't use regular anchor tags -->
-<a href="/profile/123">View Profile</a>
-
-<!-- ✅ Use the Link component instead -->
-<Link href="/profile/123">View Profile</Link>
-
-<!-- 🎯 Link with parameters -->
-<Link href="/settings/account" class="btn btn-primary">
-  Account Settings
-</Link>`;
-
-	const nestedRoutingCode = `<Router id="main-router">
-  <Route key="app" path="/app/*">
-    <AppLayout>
-      <!-- Nested router inside AppLayout -->
-      <Router id="app-sub-router" basePath="/app">
-        <Route key="dashboard" path="/dashboard">
-          <Dashboard />
-        </Route>
-        <Route key="profile" path="/profile/:id">
-          <UserProfile />
-        </Route>
-      </Router>
-    </AppLayout>
-  </Route>
-</Router>`;
-
-	const routeParametersCode = `<!-- Route with single parameter -->
-<Route key="user" path="/user/:id">
-  {#snippet children(params)}
-    <h1>User ID: {params.id}</h1>
-  {/snippet}
-</Route>
-
-<!-- Route with multiple parameters -->
-<Route key="post" path="/blog/:category/:slug">
-  {#snippet children(params)}
-    <BlogPost 
-      category={params.category} 
-      slug={params.slug} 
-    />
-  {/snippet}
-</Route>
-
-<!-- Route with rest parameter (catch-all) -->
-<Route key="files" path="/files/*">
-  {#snippet children(params)}
-    <FileExplorer path={params.rest} />
-  {/snippet}
-</Route>`;
-
-	const urlExamples = `// Basic routes:
-// /                    → Home page
-// /about               → About page
-// /contact             → Contact page
-
-// Parameterized routes:
-// /user/123            → User profile for ID 123
-// /blog/tech/svelte-5  → Blog post in tech category
-// /product/laptop/123  → Product page
-
-// Rest parameters:
-// /files/docs/readme.md     → File explorer
-// /admin/users/permissions  → Admin section`;
-
-	const routeGuardsCode = `<Route 
-  key="admin" 
-  path="/admin/*"
-  and={(params, location) => user.isAdmin}
->
-  <AdminPanel />
-</Route>
-
-<Route 
-  key="profile" 
-  path="/profile/:userId"
-  and={(params) => params.userId === currentUser.id || user.canViewProfiles}
->
-  <UserProfile />
-</Route>`;
+	// Import code samples as raw text
+	import basicPathRouterCode from '../code-samples/basic-path-router.txt?raw';
+	import linkComponentCode from '../code-samples/link-component.txt?raw';
+	import nestedRoutingCode from '../code-samples/nested-routing.txt?raw';
+	import routeParametersCode from '../code-samples/route-parameters.txt?raw';
+	import urlExamples from '../code-samples/url-examples.ts?raw';
+	import routeGuardsCode from '../code-samples/route-guards.txt?raw';
 </script>
 
 <div class="container">
@@ -107,11 +25,11 @@
 	<!-- Hero Section -->
 	<div class="row mt-4">
 		<div class="col-lg-6">
-			<div class="card border-primary h-100">
-				<div class="card-header bg-primary text-white">
-					<h4 class="mb-0">🏗️ Basic Path Routing</h4>
-				</div>
-				<div class="card-body">
+			<Card border="primary" class="h-100">
+				<CardHeader background="primary" textColor="white" tag="h4">
+					🏗️ Basic Path Routing
+				</CardHeader>
+				<CardBody>
 					<p>
 						Path routing is the default mode in <code>@wjfe/n-savant</code>. It feels natural 
 						because it works just like regular websites - but faster!
@@ -125,15 +43,15 @@
 						<strong>SEO Friendly:</strong> Search engines love path-based URLs! They're clean, 
 						predictable, and easy to understand.
 					</div>
-				</div>
-			</div>
+				</CardBody>
+			</Card>
 		</div>
 		<div class="col-lg-6">
-			<div class="card border-success h-100">
-				<div class="card-header bg-success text-white">
-					<h4 class="mb-0">🔗 Link Components</h4>
-				</div>
-				<div class="card-body">
+			<Card border="success" class="h-100">
+				<CardHeader background="success" textColor="white" tag="h4">
+					🔗 Link Components
+				</CardHeader>
+				<CardBody>
 					<p>
 						Replace <code>&lt;a&gt;</code> tags with <code>&lt;Link&gt;</code> components for 
 						smooth navigation without page reloads!
@@ -147,19 +65,19 @@
 						<strong>Important:</strong> Regular anchor tags will cause full page reloads. 
 						Always use <code>&lt;Link&gt;</code> for internal navigation!
 					</div>
-				</div>
-			</div>
+				</CardBody>
+			</Card>
 		</div>
 	</div>
 
 	<!-- Advanced Features -->
 	<div class="row mt-4">
 		<div class="col-lg-6">
-			<div class="card border-warning h-100">
-				<div class="card-header bg-warning text-dark">
-					<h4 class="mb-0">🎯 Route Parameters</h4>
-				</div>
-				<div class="card-body">
+			<Card border="warning" class="h-100">
+				<CardHeader background="warning" textColor="dark" tag="h4">
+					🎯 Route Parameters
+				</CardHeader>
+				<CardBody>
 					<p>
 						Capture dynamic values from URLs using parameters. Perfect for user IDs, 
 						slugs, and dynamic content!
@@ -173,15 +91,15 @@
 						<strong>Pro tip:</strong> Use rest parameters (<code>/*</code>) for file paths 
 						and hierarchical navigation!
 					</div>
-				</div>
-			</div>
+				</CardBody>
+			</Card>
 		</div>
 		<div class="col-lg-6">
-			<div class="card border-info h-100">
-				<div class="card-header bg-info text-white">
-					<h4 class="mb-0">🏢 Nested Routing</h4>
-				</div>
-				<div class="card-body">
+			<Card border="info" class="h-100">
+				<CardHeader background="info" textColor="white" tag="h4">
+					🏢 Nested Routing
+				</CardHeader>
+				<CardBody>
 					<p>
 						Build complex layouts with nested routers. Perfect for admin panels, 
 						dashboards, and multi-level navigation!
@@ -195,19 +113,19 @@
 						<strong>Powerful:</strong> Each router can have its own <code>basePath</code> 
 						and operates independently within its scope.
 					</div>
-				</div>
-			</div>
+				</CardBody>
+			</Card>
 		</div>
 	</div>
 
 	<!-- URL Examples -->
 	<div class="row mt-4">
 		<div class="col-lg-6">
-			<div class="card border-secondary h-100">
-				<div class="card-header bg-secondary text-white">
-					<h4 class="mb-0">🌐 URL Structure</h4>
-				</div>
-				<div class="card-body">
+			<Card border="secondary" class="h-100">
+				<CardHeader background="secondary" textColor="white" tag="h4">
+					🌐 URL Structure
+				</CardHeader>
+				<CardBody>
 					<p>See how different route patterns match real URLs:</p>
 					<CodeSnippet 
 						language={typescript} 
@@ -219,15 +137,15 @@
 							💡 Notice how parameters and rest routes capture dynamic parts of the URL!
 						</small>
 					</div>
-				</div>
-			</div>
+				</CardBody>
+			</Card>
 		</div>
 		<div class="col-lg-6">
-			<div class="card border-dark h-100">
-				<div class="card-header bg-dark text-white">
-					<h4 class="mb-0">🛡️ Route Guards</h4>
-				</div>
-				<div class="card-body">
+			<Card border="dark" class="h-100">
+				<CardHeader background="dark" textColor="white" tag="h4">
+					🛡️ Route Guards
+				</CardHeader>
+				<CardBody>
 					<p>
 						Control access to routes with the <code>and</code> property. Perfect for 
 						authentication and authorization!
@@ -241,19 +159,19 @@
 						<strong>Security:</strong> Route guards help protect sensitive areas but 
 						always validate permissions on the server too!
 					</div>
-				</div>
-			</div>
+				</CardBody>
+			</Card>
 		</div>
 	</div>
 
 	<!-- Key Benefits -->
 	<div class="row mt-5">
 		<div class="col-lg-8 offset-lg-2">
-			<div class="card border-success">
-				<div class="card-header bg-success text-white text-center">
-					<h3 class="mb-0">🎉 Why Path Routing Rocks</h3>
-				</div>
-				<div class="card-body">
+			<Card border="success">
+				<CardHeader background="success" textColor="white" class="text-center" tag="h3">
+					🎉 Why Path Routing Rocks
+				</CardHeader>
+				<CardBody>
 					<div class="row">
 						<div class="col-md-6">
 							<h5>🚀 Performance Benefits</h5>
@@ -279,8 +197,8 @@
 							<strong>The best of both worlds:</strong> Traditional web navigation with modern SPA performance! 🎯
 						</p>
 					</div>
-				</div>
-			</div>
+				</CardBody>
+			</Card>
 		</div>
 	</div>