fusee-framework 1.6.0 → 1.8.0

package/app/pages/dynamic.ts

@@ -0,0 +1,40 @@
+import { DynamicA } from '../components/DynamicA.js'
+import { DynamicB } from '../components/DynamicB.js'
+
+export const TestDynamic = defineComponent({
+    components: { DynamicA, DynamicB },
+    setup() {
+        const currentType = signal('DynamicA')
+        const sharedTitle = signal('Dynamic Test Active')
+
+        return {
+            currentType,
+            sharedTitle,
+            toggle: () => {
+                currentType(currentType() === 'DynamicA' ? 'DynamicB' : 'DynamicA')
+            },
+            template: `
+                <div class="page">
+                    <h1>Dynamic Components System (Vue-style)</h1>
+                    <p>Using the custom <code>f-is</code> directive.</p>
+                    
+                    <div style="margin: 20px 0; display: flex; gap: 10px; align-items: center;">
+                        <button @click="toggle" class="primary-btn">Toggle Component</button>
+                        <span>Active: <strong>{{ currentType }}</strong></span>
+                    </div>
+
+                    <input f-model="sharedTitle" style="margin-bottom: 20px; padding: 8px; border-radius: 4px; border: 1px solid #444; background: #222; color: white; width: 100%;">
+
+                    <hr style="border: 0; border-top: 1px solid #444; margin: 30px 0;">
+
+                    <div f-is="currentType" :title="sharedTitle"></div>
+                    
+                    <p style="margin-top: 40px; color: #888; font-size: 0.9em;">
+                        Note: The component above changes reactively when you click the button. 
+                        The <code>:title</code> prop is automatically passed to the active component.
+                    </p>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/index.js

@@ -0,0 +1,137 @@
+import { Counter } from '../components/Counter.js'
+import { UserForm } from '../components/UserForm.js'
+import { CounterSection } from '../components/CounterSection.js'
+import { Card } from '../components/Card.js'
+import { EmitTest } from '../components/EmitTest.js'
+import { ParentComponent } from '../providers/index.js'
+
+export const Home = defineComponent({
+    components: { UserForm, CounterSection, Card, EmitTest, ParentComponent },
+    setup() {
+        const title = signal('Welcome!')
+        inspect(title)
+
+        const isActive = signal(false)
+        const isDisabled = signal(false)
+        const isLarge = signal(false)
+        const basicClasses = computed(() => ({
+            active: isActive(),
+            disabled: isDisabled(),
+            'is-large': isLarge()
+        }))
+
+        const toggleActive = () => isActive(!isActive())
+        const toggleDisabled = () => isDisabled(!isDisabled())
+        const toggleLarge = () => isLarge(!isLarge())
+
+        return {
+            title,
+            changeTitle: () => title('Changed Title!'),
+
+            isActive,
+            isDisabled,
+            isLarge,
+            basicClasses,
+            toggleActive,
+            toggleDisabled,
+            toggleLarge,
+
+            // 🧪 Emit Event Handlers
+            handleCounterChange: (value) => console.log('📢 Counter changed to:', value),
+            handleCounterReset: () => console.log('🔄 Counter reset requested!'),
+            handleCustomEvent: (count, multiplier) => console.log('🎯 Custom event:', { count, multiplier }),
+
+            // 🧪 Emit Test Handlers
+            handleSimpleClick: () => console.log('✅ SIMPLE CLICK received from child!'),
+            handleClickWithData: (count, label, timestamp) => console.log('✅ CLICK WITH DATA:', { count, label, timestamp }),
+            handleObjectEvent: (data) => console.log('✅ OBJECT EVENT received:', data),
+
+            template: `
+                <div class="page">
+                    <h1>{{ title.toUpperCase() }}</h1>
+                    <p>This is an SPA built with my own JavaScript custom framework!</p>
+                    <p>Made with passion by Sebastian Șomu</p>
+
+                    <!-- Navigation -->
+                    <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1.5rem 0; padding: 1rem; background: #2a2a2a; border-radius: 8px;">
+                        <a href="#classlist" f-link style="color: #f59e0b; text-decoration: none; padding: 0.5rem 1rem; background: #3a3a3a; border-radius: 4px;">🎨 f-classList</a>
+                        <a href="#userform" f-link style="color: #10b981; text-decoration: none; padding: 0.5rem 1rem; background: #3a3a3a; border-radius: 4px;">📝 User Form</a>
+                        <a href="#counter" f-link style="color: #3b82f6; text-decoration: none; padding: 0.5rem 1rem; background: #3a3a3a; border-radius: 4px;">🔢 Counter</a>
+                        <a href="#emit" f-link style="color: #4da6ff; text-decoration: none; padding: 0.5rem 1rem; background: #3a3a3a; border-radius: 4px;">🧪 Emit Events</a>
+                        <a href="#slots" f-link style="color: #8b5cf6; text-decoration: none; padding: 0.5rem 1rem; background: #3a3a3a; border-radius: 4px;">🎴 Slots</a>
+                        <a href="#interpolation" f-link style="color: #e83e8c; text-decoration: none; padding: 0.5rem 1rem; background: #3a3a3a; border-radius: 4px;">🔤 Interpolation</a>
+                        <a href="#provide" f-link style="color: #4CAF50; text-decoration: none; padding: 0.5rem 1rem; background: #3a3a3a; border-radius: 4px;">🔗 Provide/Inject</a>
+                    </div>
+
+                    <button @click="changeTitle" class="primary-btn" style="margin-bottom: 20px;">Change App Title</button>
+
+                    <!-- 🎨 f-classList Demo -->
+                    <h3 id="classlist" style="margin-top: 40px; margin-bottom: 20px; color: #f59e0b;">🎨 f-classList Demo</h3>
+                    <div class="demo-box" f-classList="basicClasses">
+                        Demo Box (hover me!)
+                    </div>
+                    <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem;">
+                        <button @click="toggleActive" :class="isActive ? 'btn-on' : 'btn-off'" style="padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
+                            {{ isActive ? '✓ Active' : '○ Active' }}
+                        </button>
+                        <button @click="toggleDisabled" :class="isDisabled ? 'btn-on' : 'btn-off'" style="padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
+                            {{ isDisabled ? '✓ Disabled' : '○ Disabled' }}
+                        </button>
+                        <button @click="toggleLarge" :class="isLarge ? 'btn-on' : 'btn-off'" style="padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
+                            {{ isLarge ? '✓ Large' : '○ Large' }}
+                        </button>
+                    </div>
+
+                    <h3 id="userform" style="margin-top: 40px; margin-bottom: 20px; color: #10b981;">📝 User Form Demo</h3>
+                    {{ UserForm }}
+                    
+                    <h3 id="counter" style="margin-top: 40px; margin-bottom: 20px; color: #3b82f6;">🔢 Counter Demo</h3>
+                    {{ CounterSection @counter-change="handleCounterChange" @counter-reset="handleCounterReset" @custom-event="handleCustomEvent" :pageTitle="title" }}
+                    
+                    <!-- 🧪 EMIT TEST - NEW SEPARATE COMPONENT -->
+                    <h3 id="emit" style="margin-top: 40px; margin-bottom: 20px; color: #4da6ff;">🧪 EMIT EVENTS TEST LAB</h3>
+                    {{ EmitTest @simple-click="handleSimpleClick" @click-with-data="handleClickWithData" @object-event="handleObjectEvent" }}
+                    
+                    <!-- 🧪 Slots Test -->
+                    <h3 id="slots" style="margin-top: 40px; margin-bottom: 20px;">🎴 Slots Test</h3>
+                    
+                    {{ Card title="Custom Card" }}
+                        <template slot="header">
+                            <p style="color: #10b981; font-weight: bold;">🎯 Custom header from parent!</p>
+                        </template>
+                        <p style="color: #f59e0b;">This is custom content passed through the default slot.</p>
+                        <p>You can pass any HTML content here!</p>
+                        <template slot="footer">
+                            <button style="background: #3b82f6; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer;">
+                                Custom Footer Button
+                            </button>
+                        </template>
+                    {{ /Card }}
+                    
+                    {{ Card title="Default Slots Card" }}
+                        <p>This card uses only the default slot - no named slots provided.</p>
+                    {{ /Card }}
+                    
+                    <!-- 🧪 INTERPOLATION TEST -->
+                    <h3 id="interpolation" style="margin-top: 40px; margin-bottom: 20px; color: #e83e8c;">🔤 INTERPOLATION TEST</h3>
+                    <div style="background: #2a2a2a; padding: 15px; border-radius: 8px; border: 1px solid #444;">
+                        <p><strong>Escaped Braces:</strong> \\{{ this is not evaluated }}</p>
+                        <p><strong>String Literal with Braces:</strong> {{ "Look, {{ braces }} inside a string!" }}</p>
+                        <p><strong>Dynamic + Escaped:</strong> {{ isActive ? 'Currently: \\{{ Active }}' : 'Currently: \\{{ Inactive }}' }}</p>
+                    </div>
+
+                    <!-- 🧪 PROVIDE / INJECT TEST -->
+                    <h3 id="provide" style="margin-top: 40px; margin-bottom: 20px; color: #4CAF50;">🔗 PROVIDE / INJECT TEST</h3>
+                    {{ ParentComponent }}
+
+                    <!-- Back to top -->
+                    <div style="text-align: center; margin-top: 3rem; padding: 2rem;">
+                        <a href="/" f-link style="color: white; text-decoration: none; padding: 0.75rem 1.5rem; background: #3b82f6; border-radius: 6px; font-weight: bold;">
+                            ⬆️ Back to Top
+                        </a>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/index.ts

@@ -0,0 +1,87 @@
+import { UserForm } from '../components/UserForm.js'
+import { CounterSection } from '../components/CounterSection.js'
+
+type HomeResult = {
+    title: Signal<string>
+    changeTitle: () => void
+    isActive: Signal<boolean>
+    isDisabled: Signal<boolean>
+    isLarge: Signal<boolean>
+    basicClasses: Computed<ClassListObject>
+    toggleActive: () => void
+    toggleDisabled: () => void
+    toggleLarge: () => void
+    template: string
+}
+
+type ClassListObject = Record<string, boolean>
+
+export const Home = defineComponent({
+    components: { UserForm, CounterSection },
+    setup(): HomeResult {
+        const title = signal<string>('Welcome!')
+
+        const isActive = signal(false)
+        const isDisabled = signal(false)
+        const isLarge = signal(false)
+        const basicClasses = computed(() => ({
+            active: isActive(),
+            disabled: isDisabled(),
+            'is-large': isLarge()
+        }))
+
+        const toggleActive = () => isActive(!isActive())
+        const toggleDisabled = () => isDisabled(!isDisabled())
+        const toggleLarge = () => isLarge(!isLarge())
+
+        return {
+            title,
+            changeTitle: () => title('Changed Title!'),
+            isActive,
+            isDisabled,
+            isLarge,
+            basicClasses,
+            toggleActive,
+            toggleDisabled,
+            toggleLarge,
+            template: `
+                <div class="page">
+                    <h1>{{ title.toUpperCase() }}</h1>
+                    <p>This is an SPA built with my own (TypeScript!) custom framework!</p>
+                    <p>Made with passion by Sebastian Șomu</p>
+
+                    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0;">
+                        <a href="/scroll-demo" f-link class="cmp-btn" style="background: linear-gradient(135deg, #8b8bff, #6b6bff);">
+                            🔽 Scroll Behavior Demo
+                        </a>
+                        <a href="/users" f-link class="cmp-btn">
+                            👥 Router Example
+                        </a>
+                    </div>
+
+                    <button @click="changeTitle" class="primary-btn" style="margin-bottom: 20px;">Change App Title</button>
+
+                    <h3 style="margin-top: 40px; margin-bottom: 20px; color: #f59e0b;">🎨 f-classList Demo</h3>
+                    <div class="demo-box" f-classList="basicClasses">
+                        Demo Box (hover me!)
+                    </div>
+                    <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem;">
+                        <button @click="toggleActive" :class="isActive ? 'btn-on' : 'btn-off'" style="padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
+                            {{ isActive ? '✓ Active' : '○ Active' }}
+                        </button>
+                        <button @click="toggleDisabled" :class="isDisabled ? 'btn-on' : 'btn-off'" style="padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
+                            {{ isDisabled ? '✓ Disabled' : '○ Disabled' }}
+                        </button>
+                        <button @click="toggleLarge" :class="isLarge ? 'btn-on' : 'btn-off'" style="padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer;">
+                            {{ isLarge ? '✓ Large' : '○ Large' }}
+                        </button>
+                    </div>
+
+                    {{ UserForm }}
+
+                    {{ CounterSection :pageTitle="title" }}
+                </div>
+            `
+        }
+    }
+})

package/app/pages/login.ts

@@ -0,0 +1,21 @@
+import { defineComponent, navigate } from '../../framework/index.js'
+
+export const Login = defineComponent({
+    setup() {
+        return {
+            login() {
+                localStorage.setItem('fake_auth_token', 'true')
+                navigate('/dashboard')
+            },
+            template: `
+                <div class="page">
+                    <h1 style="color: #ff6b6b;">🔑 Login Required</h1>
+                    <div class="demo-card">
+                        <p>You were redirected here because the route you tried to access is protected by middleware.</p>
+                        <button class="cmp-btn" @click="login()" style="margin-top: 1rem; border-color: #34d399; color: #34d399;">Simulate Login</button>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/objects/[id].js

@@ -0,0 +1,56 @@
+import { currentRoute, navigate, routeParams, computed, defineComponent } from '../../../framework/index.js'
+
+export const RouterExample = defineComponent({
+    setup() {
+        const path = currentRoute
+        const params = routeParams
+        const paramsJson = computed(() => JSON.stringify(params()))
+
+        return {
+            path,
+            paramsJson,
+            navigate,
+            template: `
+                <div class="page">
+                    <h1>🔗 Router API Demo</h1>
+
+                    <div class="demo-card">
+                        <h2>currentRoute Signal</h2>
+                        <code style="color: #8b8bff; font-size: 1.5rem;">{{ path }}</code>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>routeParams Signal (Dynamic Routes)</h2>
+                        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
+                            <a href="/objects/123" f-link class="cmp-btn" style="text-decoration: none;">Object 123</a>
+                            <a href="/objects/456" f-link class="cmp-btn" style="text-decoration: none;">Object 456</a>
+                            <a href="/posts/tech/my-post" f-link class="cmp-btn" style="text-decoration: none;">Post Route</a>
+                        </div>
+                        <code style="color: #34d399; font-size: 1.2rem;">{{ paramsJson }}</code>
+                        <p style="margin-top: 10px; color: #888; font-size: 0.9rem;">
+                            Dynamic routes use :param syntax (e.g., /users/:id or /posts/:category/:slug)
+                        </p>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>navigate() Test</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="navigate('/')" class="cmp-btn">Home</button>
+                            <button @click="navigate('/about')" class="cmp-btn">About</button>
+                            <button @click="navigate('/wildcard-test-123')" class="cmp-btn" style="border-color: #f59e0b; color: #f59e0b;">Wildcard</button>
+                            <button @click="navigate('/nonexistent')" class="cmp-btn" style="border-color: #ff6b6b; color: #ff6b6b;">404 Test</button>
+                        </div>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>f-link Test</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <a href="/" f-link class="cmp-btn" style="text-decoration: none;">Home</a>
+                            <a href="/about" f-link class="cmp-btn" style="text-decoration: none;">About</a>
+                        </div>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/objects/[id].ts

@@ -0,0 +1,56 @@
+import { currentRoute, navigate, routeParams, computed, defineComponent } from '../../../framework/index.js'
+
+export const RouterExample = defineComponent({
+    setup() {
+        const path = currentRoute
+        const params = routeParams
+        const paramsJson = computed(() => JSON.stringify(params()))
+
+        return {
+            path,
+            paramsJson,
+            navigate,
+            template: `
+                <div class="page">
+                    <h1>🔗 Router API Demo</h1>
+
+                    <div class="demo-card">
+                        <h2>currentRoute Signal</h2>
+                        <code style="color: #8b8bff; font-size: 1.5rem;">{{ path }}</code>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>routeParams Signal (Dynamic Routes)</h2>
+                        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
+                            <a href="/objects/123" f-link class="cmp-btn" style="text-decoration: none;">Object 123</a>
+                            <a href="/objects/456" f-link class="cmp-btn" style="text-decoration: none;">Object 456</a>
+                            <a href="/posts/tech/my-post" f-link class="cmp-btn" style="text-decoration: none;">Post Route</a>
+                        </div>
+                        <code style="color: #34d399; font-size: 1.2rem;">{{ paramsJson }}</code>
+                        <p style="margin-top: 10px; color: #888; font-size: 0.9rem;">
+                            Dynamic routes use :param syntax (e.g., /users/:id or /posts/:category/:slug)
+                        </p>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>navigate() Test</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="navigate('/')" class="cmp-btn">Home</button>
+                            <button @click="navigate('/about')" class="cmp-btn">About</button>
+                            <button @click="navigate('/wildcard-test-123')" class="cmp-btn" style="border-color: #f59e0b; color: #f59e0b;">Wildcard</button>
+                            <button @click="navigate('/nonexistent')" class="cmp-btn" style="border-color: #ff6b6b; color: #ff6b6b;">404 Test</button>
+                        </div>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>f-link Test</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <a href="/" f-link class="cmp-btn" style="text-decoration: none;">Home</a>
+                            <a href="/about" f-link class="cmp-btn" style="text-decoration: none;">About</a>
+                        </div>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/posts/[category]/[slug].js

@@ -0,0 +1,56 @@
+import { currentRoute, navigate, routeParams, computed } from '../../../../framework/index.js'
+
+export const RouterExample = defineComponent({
+    setup() {
+        const path = currentRoute
+        const params = routeParams
+        const paramsJson = computed(() => JSON.stringify(params()))
+
+        return {
+            path,
+            paramsJson,
+            navigate,
+            template: `
+                <div class="page">
+                    <h1>🔗 Router API Demo</h1>
+
+                    <div class="demo-card">
+                        <h2>currentRoute Signal</h2>
+                        <code style="color: #8b8bff; font-size: 1.5rem;">{{ path }}</code>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>routeParams Signal (Dynamic Routes)</h2>
+                        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
+                            <a href="/objects/123" f-link class="cmp-btn" style="text-decoration: none;">Object 123</a>
+                            <a href="/objects/456" f-link class="cmp-btn" style="text-decoration: none;">Object 456</a>
+                            <a href="/posts/tech/my-post" f-link class="cmp-btn" style="text-decoration: none;">Post Route</a>
+                        </div>
+                        <code style="color: #34d399; font-size: 1.2rem;">{{ paramsJson }}</code>
+                        <p style="margin-top: 10px; color: #888; font-size: 0.9rem;">
+                            Dynamic routes use :param syntax (e.g., /users/:id or /posts/:category/:slug)
+                        </p>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>navigate() Test</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="navigate('/')" class="cmp-btn">Home</button>
+                            <button @click="navigate('/about')" class="cmp-btn">About</button>
+                            <button @click="navigate('/404')" class="cmp-btn" style="border-color: #ff6b6b; color: #ff6b6b;">404 Page</button>
+                            <button @click="navigate('/wildcard-test-123')" class="cmp-btn" style="border-color: #f59e0b; color: #f59e0b;">Wildcard</button>
+                        </div>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>f-link Test</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <a href="/" f-link class="cmp-btn" style="text-decoration: none;">Home</a>
+                            <a href="/about" f-link class="cmp-btn" style="text-decoration: none;">About</a>
+                        </div>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/posts/[category]/[slug].ts

@@ -0,0 +1,56 @@
+import { currentRoute, navigate, routeParams, computed } from '../../../../framework/index.js'
+
+export const RouterExample = defineComponent({
+    setup() {
+        const path = currentRoute
+        const params = routeParams
+        const paramsJson = computed(() => JSON.stringify(params()))
+
+        return {
+            path,
+            paramsJson,
+            navigate,
+            template: `
+                <div class="page">
+                    <h1>🔗 Router API Demo</h1>
+
+                    <div class="demo-card">
+                        <h2>currentRoute Signal</h2>
+                        <code style="color: #8b8bff; font-size: 1.5rem;">{{ path }}</code>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>routeParams Signal (Dynamic Routes)</h2>
+                        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
+                            <a href="/objects/123" f-link class="cmp-btn" style="text-decoration: none;">Object 123</a>
+                            <a href="/objects/456" f-link class="cmp-btn" style="text-decoration: none;">Object 456</a>
+                            <a href="/posts/tech/my-post" f-link class="cmp-btn" style="text-decoration: none;">Post Route</a>
+                        </div>
+                        <code style="color: #34d399; font-size: 1.2rem;">{{ paramsJson }}</code>
+                        <p style="margin-top: 10px; color: #888; font-size: 0.9rem;">
+                            Dynamic routes use :param syntax (e.g., /users/:id or /posts/:category/:slug)
+                        </p>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>navigate() Test</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="navigate('/')" class="cmp-btn">Home</button>
+                            <button @click="navigate('/about')" class="cmp-btn">About</button>
+                            <button @click="navigate('/wildcard-test-123')" class="cmp-btn" style="border-color: #f59e0b; color: #f59e0b;">Wildcard</button>
+                            <button @click="navigate('/nonexistent')" class="cmp-btn" style="border-color: #ff6b6b; color: #ff6b6b;">404 Test</button>
+                        </div>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>f-link Test</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <a href="/" f-link class="cmp-btn" style="text-decoration: none;">Home</a>
+                            <a href="/about" f-link class="cmp-btn" style="text-decoration: none;">About</a>
+                        </div>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/pages/router-example.js

@@ -0,0 +1,79 @@
+import { currentRoute, navigate, routeParams, routeQuery, computed } from '../../framework/index.js'
+
+export const RouterExample = defineComponent({
+    setup() {
+        const path = currentRoute
+        const params = routeParams
+        const query = routeQuery
+        const paramsJson = computed(() => JSON.stringify(params()))
+        const queryJson = computed(() => JSON.stringify(query()))
+
+        const updateQuery = () => {
+            const now = new Date().toLocaleTimeString()
+            const basePath = path().split('?')[0]
+            navigate(`${basePath}?t=${encodeURIComponent(now)}&user=guest`)
+        }
+
+        return {
+            path,
+            paramsJson,
+            queryJson,
+            navigate,
+            updateQuery,
+            template: `
+                <div class="page">
+                    <h1>🔗 Router API Demo</h1>
+
+                    <div class="demo-card">
+                        <h2>currentRoute Signal</h2>
+                        <code style="color: #8b8bff; font-size: 1.5rem;">{{ path }}</code>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>routeQuery Signal (Query Params)</h2>
+                        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
+                            <a href="/router-example?search=framework&page=1" f-link class="cmp-btn" style="text-decoration: none;">?search=framework&page=1</a>
+                            <a href="/router-example?filter=active&sort=desc" f-link class="cmp-btn" style="text-decoration: none;">?filter=active&sort=desc</a>
+                            <button @click="updateQuery" class="cmp-btn">Update Time via Query</button>
+                        </div>
+                        <code style="color: #f59e0b; font-size: 1.2rem;">{{ queryJson }}</code>
+                        <p style="margin-top: 10px; color: #888; font-size: 0.9rem;">
+                            Query parameters are automatically parsed into the routeQuery signal.
+                        </p>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>routeParams Signal (Dynamic Routes)</h2>
+                        <div style="display: flex; gap: 10px; margin-bottom: 10px;">
+                            <a href="/objects/123" f-link class="cmp-btn" style="text-decoration: none;">Object 123</a>
+                            <a href="/objects/456" f-link class="cmp-btn" style="text-decoration: none;">Object 456</a>
+                            <a href="/posts/tech/my-post" f-link class="cmp-btn" style="text-decoration: none;">Post Route</a>
+                        </div>
+                        <code style="color: #34d399; font-size: 1.2rem;">{{ paramsJson }}</code>
+                        <p style="margin-top: 10px; color: #888; font-size: 0.9rem;">
+                            Dynamic routes use :param syntax (e.g., /users/:id or /posts/:category/:slug)
+                        </p>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>navigate() Test</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="navigate('/')" class="cmp-btn">Home</button>
+                            <button @click="navigate('/about')" class="cmp-btn">About</button>
+                            <button @click="navigate('/404')" class="cmp-btn" style="border-color: #ff6b6b; color: #ff6b6b;">404 Page</button>
+                            <button @click="navigate('/wildcard-test-123')" class="cmp-btn" style="border-color: #f59e0b; color: #f59e0b;">Wildcard</button>
+                        </div>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>f-link Test</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <a href="/" f-link class="cmp-btn" style="text-decoration: none;">Home</a>
+                            <a href="/about" f-link class="cmp-btn" style="text-decoration: none;">About</a>
+                        </div>
+                    </div>
+                </div>
+            `
+        }
+    }
+})