fusee-framework 1.5.3 → 1.7.0

package/app/pages/index.js

@@ -0,0 +1,117 @@
+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>
+
+                    <button @click="changeTitle" class="primary-btn" style="margin-bottom: 20px;">Change App Title</button>
+
+                    <!-- 🎨 f-classList Demo -->
+                    <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 @counter-change="handleCounterChange" @counter-reset="handleCounterReset" @custom-event="handleCustomEvent" :pageTitle="title" }}
+                    
+                    <!-- 🧪 EMIT TEST - NEW SEPARATE COMPONENT -->
+                    <h3 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 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 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 style="margin-top: 40px; margin-bottom: 20px; color: #4CAF50;">🔗 PROVIDE / INJECT TEST</h3>
+                    {{ ParentComponent }}
+                </div>
+            `
+        }
+    }
+})

package/app/pages/index.ts

@@ -0,0 +1,78 @@
+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>
+
+                    <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,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/router-example.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/test-for.js

@@ -0,0 +1,65 @@
+export const TestFor = defineComponent({
+    setup() {
+        const items = signal([
+            { id: 1, name: 'Item 1' },
+            { id: 2, name: 'Item 2' },
+            { id: 3, name: 'Item 3' }
+        ])
+        const search = signal('')
+
+        const filteredItems = items.filter(item =>
+            item.name.toLowerCase().includes(search().toLowerCase())
+        )
+
+        inspect(items)
+
+        return {
+            items,
+            search,
+            filteredItems,
+            namesSummary: filteredItems.map(i => i.name).join(', '),
+
+            updateItem: (id, newName) => {
+                items(items().map(i => i.id === id ? { ...i, name: newName } : i))
+            },
+            addItem: () => {
+                const nextId = Math.max(0, ...items().map(i => i.id)) + 1
+                items.push({ id: nextId, name: `Item ${nextId}` })
+            },
+            shuffleItems: () => {
+                items.sort(() => Math.random() - 0.5)
+            },
+            template: `
+                <div class="page">
+                    <h1>Keyed f-for Test</h1>
+                    <p>Focus an input below, then click "Shuffle" or "Add". The focus should stay!</p>
+                    <p style="color: #8b8bff; background: #8b8bff11; padding: 10px; border-radius: 4px; border-left: 3px solid #8b8bff;">
+                        🔗 <strong>Reactive Summary:</strong> {{ namesSummary || 'No items found' }}
+                    </p>
+                    
+                    <div style="margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px;">
+                        <input type="text" f-model="search" placeholder="🔍 Filter items..." 
+                               style="padding: 10px; border-radius: 4px; border: 1px solid #444; background: #111; color: #fff; width: 100%;" />
+                        
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="addItem" class="primary-btn">Add Item</button>
+                            <button @click="shuffleItems" class="primary-btn">Shuffle Items</button>
+                        </div>
+                    </div>
+
+                    <div style="display: flex; flex-direction: column; gap: 10px;">
+                        <div f-for="item in filteredItems" :key="item.id" 
+                             style="padding: 10px; border: 1px solid #333; display: flex; gap: 10px; align-items: center;">
+                            <span>ID: {{ item.id }}</span>
+                            <input type="text" 
+                                   :value="item.name" 
+                                   @input="updateItem(item().id, $event.target.value)"
+                                   placeholder="Type here..." 
+                                   style="background: #111; color: #fff; border: 1px solid #444; padding: 5px;" />
+                        </div>
+                    </div>
+                </div>
+            `
+        }
+    }
+})