fusee-framework 1.6.0 → 1.8.0

package/app/providers/ChildComponent.ts

@@ -1,47 +1,47 @@
-import { inject, provide } from '../../framework/index.js'
-import { GrandchildComponent } from './GrandchildComponent.js'
-
-// ChildComponent - injects values from parent (ParentComponent)
-export const ChildComponent = defineComponent({
-    components: { GrandchildComponent },
-    setup() {
-        // Inject values provided by the parent
-        const count = inject('count')
-        const message = inject('message')
-
-        // These are NOT provided by parent, so they will be undefined
-        const nonExistent = inject('nonExistent')
-
-        function updateMessage(): void {
-            const msg = message as any
-            if (msg) {
-                msg('Message updated by Child!')
-            }
-        }
-
-        return {
-            count,
-            message,
-            nonExistent,
-            updateMessage,
-            template: `
-                <div style="padding: 15px; border: 2px solid #2196F3; border-radius: 8px; margin-top: 15px; background: #1a1a1a; color: #fff;">
-                    <h3 style="color: #2196F3;">Child Component (direct child of Parent)</h3>
-                    <p>I'm injecting these values from my parent:</p>
-                    <ul style="background: #333; padding: 12px; border-radius: 4px; color: #fff;">
-                        <li><strong>count:</strong> {{ count }}</li>
-                        <li><strong>message:</strong> {{ message }}</li>
-                        <li><strong>nonExistent:</strong> {{ nonExistent || 'undefined' }}</li>
-                    </ul>
-                    <button @click="updateMessage" style="margin-top: 10px; padding: 6px 12px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">
-                        Update Message
-                    </button>
-                    
-                    <div style="margin-top: 15px;">
-                        {{ GrandchildComponent }}
-                    </div>
-                </div>
-            `
-        }
-    }
-})
+import { inject, provide } from '../../framework/index.js'
+import { GrandchildComponent } from './GrandchildComponent.js'
+
+// ChildComponent - injects values from parent (ParentComponent)
+export const ChildComponent = defineComponent({
+    components: { GrandchildComponent },
+    setup() {
+        // Inject values provided by the parent
+        const count = inject('count')
+        const message = inject('message')
+
+        // These are NOT provided by parent, so we use optional: true to avoid throwing NullInjectorError
+        const nonExistent = inject('nonExistent', { optional: true })
+
+        function updateMessage(): void {
+            const msg = message as any
+            if (msg) {
+                msg('Message updated by Child!')
+            }
+        }
+
+        return {
+            count,
+            message,
+            nonExistent,
+            updateMessage,
+            template: `
+                <div style="padding: 15px; border: 2px solid #2196F3; border-radius: 8px; margin-top: 15px; background: #1a1a1a; color: #fff;">
+                    <h3 style="color: #2196F3;">Child Component (direct child of Parent)</h3>
+                    <p>I'm injecting these values from my parent:</p>
+                    <ul style="background: #333; padding: 12px; border-radius: 4px; color: #fff;">
+                        <li><strong>count:</strong> {{ count }}</li>
+                        <li><strong>message:</strong> {{ message }}</li>
+                        <li><strong>nonExistent:</strong> {{ nonExistent || 'undefined' }}</li>
+                    </ul>
+                    <button @click="updateMessage" style="margin-top: 10px; padding: 6px 12px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                        Update Message
+                    </button>
+                    
+                    <div style="margin-top: 15px;">
+                        {{ GrandchildComponent }}
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/providers/GrandchildComponent.js

@@ -1,4 +1,5 @@
 import { inject } from '../../framework/index.js'
+import { LoggerService, APP_CONFIG } from '../services.js'
 
 // GrandchildComponent - injects values from grandparent (ParentComponent)
 // This demonstrates that inject() searches the entire ancestor chain
@@ -10,6 +11,11 @@ export const GrandchildComponent = defineComponent({
         const userData = inject('userData')
         const appVersion = inject('appVersion')
 
+        const logger = inject(LoggerService)
+        const config = inject(APP_CONFIG)
+
+        logger.log('GrandchildComponent initialized!')
+
         function updateMessage() {
             // message is a signal, so we can update it from grandchild!
             message('Updated from Grandchild!')
@@ -20,6 +26,8 @@ export const GrandchildComponent = defineComponent({
             message,
             userData,
             appVersion,
+            logger,
+            config,
             updateMessage,
             template: `
                 <div style="padding: 15px; border: 2px solid #9C27B0; border-radius: 8px; margin-top: 15px; background: #1a1a1a; color: #fff;">
@@ -30,7 +38,18 @@ export const GrandchildComponent = defineComponent({
                         <li><strong>message:</strong> {{ message }} <em>(from ParentComponent)</em></li>
                         <li><strong>userData:</strong> {{ userData.name }}, {{ userData.age }} <em>(from ParentComponent)</em></li>
                         <li><strong>appVersion:</strong> {{ appVersion }} <em>(from ParentComponent)</em></li>
+                        <li><strong>Logger ID:</strong> {{ logger.id }} <em>(Singleton!)</em></li>
+                        <li><strong>App Title:</strong> {{ config.title }} <em>(Global Config)</em></li>
                     </ul>
+
+                    <div style="margin-top: 15px; padding: 10px; background: #2a2a2a; border-radius: 4px;">
+                        <h5 style="margin-bottom: 5px; color: #34d399;">Service Logs:</h5>
+                        <ul style="font-size: 0.8rem; list-style: none;">
+                            <li f-for="log in logger.logs" style="border-bottom: 1px solid #444; padding: 2px 0;">
+                                <span style="color: #888;">[{{ log.time }}]</span> {{ log.message }}
+                            </li>
+                        </ul>
+                    </div>
                     <button @click="updateMessage" style="margin-top: 10px; padding: 6px 12px; background: #9C27B0; color: white; border: none; border-radius: 4px; cursor: pointer;">
                         Update Message from Grandchild
                     </button>

package/app/providers/ParentComponent.js

@@ -1,4 +1,5 @@
-import { provide } from '../../framework/index.js'
+import { provide, inject } from '../../framework/index.js'
+import { LoggerService } from '../services.js'
 import { ChildComponent } from './ChildComponent.js'
 
 // ParentComponent - provides values to child components
@@ -9,6 +10,9 @@ export const ParentComponent = defineComponent({
         const message = signal('Hello from Parent!')
         const userData = { name: 'John', age: 30 }
 
+        const logger = inject(LoggerService)
+        logger.log('ParentComponent initialized!')
+
         // Provide values to descendant components
         provide('count', count)
         provide('message', message)

package/app/routes/About.js

@@ -14,7 +14,7 @@ export const About = defineComponent({
                 <div class="page">
                     <h1>About</h1>
                     <p>Framework custom — SPA prototipe</p>
-                    <p><strong>Features:</strong> signals, defineComponent, hash router, lifecycle hooks.</p>
+                    <p><strong>Features:</strong> signals, defineComponent, History API router, lifecycle hooks.</p>
                     <p class="status">{{ loaded }}</p>
                 </div>
             `

package/app/routes/About.ts

@@ -20,7 +20,7 @@ export const About = defineComponent({
                 <div class="page">
                     <h1>About</h1>
                     <p>Framework custom — prototip SPA.</p>
-                    <p><strong>Features:</strong> signals, defineComponent, hash router, lifecycle hooks.</p>
+                    <p><strong>Features:</strong> signals, defineComponent, History API router, lifecycle hooks.</p>
                     <p class="status">{{ loaded }}</p>
                 </div>
             `

package/app/routes/AuthRoutes.ts

@@ -0,0 +1,41 @@
+import { currentRoute, navigate } from '../../framework/index.js'
+
+// Demo: Multiple paths for the same component
+// Navigating between /login and /register will NOT cause re-render
+export const AuthRoutes = defineComponent({
+    setup() {
+        const path = currentRoute
+        
+        return {
+            path,
+            navigate,
+            template: `
+                <div class="page">
+                    <h1>🔐 Auth Page (Multiple Paths Demo)</h1>
+                    <div class="demo-card">
+                        <p>Current path: <code>{{ path }}</code></p>
+                        <p style="color: #888; margin-top: 10px;">
+                            This component handles multiple paths: <code>/login</code> and <code>/register</code>
+                        </p>
+                        <p style="color: #34d399;">
+                            ✅ The component is NOT re-rendered when switching between these paths!
+                        </p>
+                    </div>
+                    
+                    <div class="demo-card">
+                        <h2>Switch Paths (No Re-render)</h2>
+                        <div style="display: flex; gap: 10px;">
+                            <button @click="navigate('/login')" class="cmp-btn">Go to /login</button>
+                            <button @click="navigate('/register')" class="cmp-btn" style="border-color: #8b8bff; color: #8b8bff;">Go to /register</button>
+                        </div>
+                    </div>
+                    
+                    <div class="demo-card">
+                        <h2>Test Re-render</h2>
+                        <button @click="navigate('/about')" class="cmp-btn" style="border-color: #f59e0b; color: #f59e0b;">Go to /about (causes re-render)</button>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/routes/Home.js

@@ -1,3 +1,4 @@
+import { Counter } from '../components/Counter.js'
 import { UserForm } from '../components/UserForm.js'
 import { CounterSection } from '../components/CounterSection.js'
 import { Card } from '../components/Card.js'
@@ -98,6 +99,14 @@ export const Home = defineComponent({
                         <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 }}

package/app/routes/NotFound.js

@@ -0,0 +1,16 @@
+import { navigate } from '../../framework/index.js'
+
+export const NotFound = defineComponent({
+    setup() {
+        return {
+            navigate,
+            template: `
+                <div class="page">
+                    <h1 style="color: #ff6b6b;">404 - Page Not Found</h1>
+                    <p>The requested route does not exist.</p>
+                    <button @click="navigate('/')" class="primary-btn">Go Home</button>
+                </div>
+            `
+        }
+    }
+})

package/app/routes/NotFound.ts

@@ -0,0 +1,16 @@
+import { navigate } from '../../framework/index.js'
+
+export const NotFound = defineComponent({
+    setup() {
+        return {
+            navigate,
+            template: `
+                <div class="page">
+                    <h1 style="color: #ff6b6b;">404 - Page Not Found</h1>
+                    <p>The requested route does not exist.</p>
+                    <button @click="navigate('/')" class="primary-btn">Go Home</button>
+                </div>
+            `
+        }
+    }
+})

package/app/routes/RouterExample.js

@@ -0,0 +1,78 @@
+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()
+            navigate(`${path()}?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?search=framework&page=1" f-link class="cmp-btn" style="text-decoration: none;">?search=framework&page=1</a>
+                            <a href="/router?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="/users/123" f-link class="cmp-btn" style="text-decoration: none;">User 123</a>
+                            <a href="/users/456" f-link class="cmp-btn" style="text-decoration: none;">User 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/routes/RouterExample.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="/users/123" f-link class="cmp-btn" style="text-decoration: none;">User 123</a>
+                            <a href="/users/456" f-link class="cmp-btn" style="text-decoration: none;">User 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/routes/TestResource.js

@@ -0,0 +1,47 @@
+import { defineComponent, signal, resource } from '../../framework/index.js'
+
+export default defineComponent({
+    setup() {
+        const userId = signal(1)
+
+        const [user] = resource(userId, async (id) => {
+            const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
+            if (!response.ok) throw new Error('User not found')
+            return response.json()
+        })
+
+        return {
+            userId,
+            user,
+            next: () => userId(userId() + 1),
+            prev: () => userId() > 1 && userId(userId() - 1),
+            template: `
+                <div class="p-4">
+                    <h1 class="text-2xl font-bold mb-4">Resource Demo</h1>
+                    
+                    <div class="flex gap-2 mb-4">
+                        <button @click="prev" class="px-4 py-2 bg-blue-500 text-white rounded">Prev User</button>
+                        <button @click="next" class="px-4 py-2 bg-blue-500 text-white rounded">Next User</button>
+                        <span class="py-2">User ID: {{ userId }}</span>
+                    </div>
+
+                    <div f-if="user.loading()">
+                        <p class="text-gray-500 italic">Loading user data...</p>
+                    </div>
+
+                    <div f-if="user.error()">
+                        <p class="text-red-500">Error: {{ user.error().message }}</p>
+                    </div>
+
+                    <div f-if="user() && !user.loading()">
+                        <div class="card border p-4 rounded shadow-lg bg-white">
+                            <h2 class="text-xl font-semibold">{{ user().name }}</h2>
+                            <p class="text-gray-600">Email: {{ user().email }}</p>
+                            <p class="text-gray-600">Company: {{ user().company.name }}</p>
+                        </div>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/app/routes/WildcardDemo.js

@@ -0,0 +1,35 @@
+import { currentRoute, navigate } from '../../framework/index.js'
+
+export const WildcardDemo = defineComponent({
+    setup() {
+        const path = currentRoute
+
+        return {
+            path,
+            navigate,
+            template: `
+                <div class="page">
+                    <h1 style="color: #f59e0b;">🎯 Wildcard Match!</h1>
+                    <p>This route matched via wildcard <code>path: '*'</code></p>
+                    
+                    <div class="demo-card">
+                        <h2>Current Path</h2>
+                        <code style="color: #f59e0b; font-size: 1.5rem;">{{ path }}</code>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>Test Wildcard</h2>
+                        <p>Any path works here:</p>
+                        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                            <button @click="navigate('/random-123')" class="cmp-btn">/random-123</button>
+                            <button @click="navigate('/test/abc')" class="cmp-btn">/test/abc</button>
+                            <button @click="navigate('/deep/nested/path')" class="cmp-btn">/deep/nested/path</button>
+                        </div>
+                    </div>
+
+                    <button @click="navigate('/')" class="primary-btn">Back Home</button>
+                </div>
+            `
+        }
+    }
+})

package/app/routes/WildcardDemo.ts

@@ -0,0 +1,35 @@
+import { currentRoute, navigate } from '../../framework/index.js'
+
+export const WildcardDemo = defineComponent({
+    setup() {
+        const path = currentRoute
+
+        return {
+            path,
+            navigate,
+            template: `
+                <div class="page">
+                    <h1 style="color: #f59e0b;">🎯 Wildcard Match!</h1>
+                    <p>This route matched via wildcard <code>path: '*'</code></p>
+                    
+                    <div class="demo-card">
+                        <h2>Current Path</h2>
+                        <code style="color: #f59e0b; font-size: 1.5rem;">{{ path }}</code>
+                    </div>
+
+                    <div class="demo-card">
+                        <h2>Test Wildcard</h2>
+                        <p>Any path works here:</p>
+                        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                            <button @click="navigate('/random-123')" class="cmp-btn">/random-123</button>
+                            <button @click="navigate('/test/abc')" class="cmp-btn">/test/abc</button>
+                            <button @click="navigate('/deep/nested/path')" class="cmp-btn">/deep/nested/path</button>
+                        </div>
+                    </div>
+
+                    <button @click="navigate('/')" class="primary-btn">Back Home</button>
+                </div>
+            `
+        }
+    }
+})

package/app/services.js

@@ -0,0 +1,15 @@
+import { InjectionToken, signal } from '../framework/index.js'
+
+export class LoggerService {
+    constructor() {
+        this.id = Math.random().toString(36).substr(2, 9);
+        this.logs = signal([]);
+    }
+
+    log(message) {
+        console.log(`[Logger ${this.id}] ${message}`);
+        this.logs([...this.logs(), { time: new Date().toLocaleTimeString(), message }]);
+    }
+}
+
+export const APP_CONFIG = new InjectionToken('app-config');

package/auto-imports.d.ts

@@ -6,7 +6,9 @@
 // biome-ignore lint: disable
 export {}
 declare global {
+  const MutationType: typeof import('fusee-framework').MutationType
   const batch: typeof import('fusee-framework').batch
+  const clearStores: typeof import('fusee-framework').clearStores
   const computed: typeof import('fusee-framework').computed
   const defineComponent: typeof import('fusee-framework').defineComponent
   const defineStore: typeof import('fusee-framework').defineStore
@@ -17,10 +19,17 @@ declare global {
   const inspect: typeof import('fusee-framework').inspect
   const mountOutlet: typeof import('fusee-framework').mountOutlet
   const mountTemplate: typeof import('fusee-framework').mountTemplate
+  const onCleanup: typeof import('fusee-framework').onCleanup
   const onMount: typeof import('fusee-framework').onMount
   const onUnmount: typeof import('fusee-framework').onUnmount
   const provide: typeof import('fusee-framework').provide
+  const registerStorePlugin: typeof import('fusee-framework').registerStorePlugin
+  const resetStore: typeof import('fusee-framework').resetStore
   const signal: typeof import('fusee-framework').signal
+  const storeToGetters: typeof import('fusee-framework').storeToGetters
+  const storeToRefs: typeof import('fusee-framework').storeToRefs
+  const storeToState: typeof import('fusee-framework').storeToState
   const untrack: typeof import('fusee-framework').untrack
+  const useNestedStore: typeof import('fusee-framework').useNestedStore
   const watch: typeof import('fusee-framework').watch
 }

package/bin/index.js

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+import { spawn } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+function getBinaryName() {
+  const platform = process.platform;
+  const arch = process.arch;
+
+  if (platform === 'win32') return 'create-fusee-win.exe';
+  if (platform === 'darwin') {
+    return arch === 'arm64' ? 'create-fusee-mac-arm64' : 'create-fusee-mac-intel';
+  }
+  if (platform === 'linux') return 'create-fusee-linux';
+  
+  return 'create-fusee-linux'; // Default fallback
+}
+
+const binName = getBinaryName();
+const binPath = path.join(__dirname, binName);
+
+// Fallback for local development if specific named binary isn't there
+const finalPath = fs.existsSync(binPath) ? binPath : path.join(__dirname, 'create-fusee.exe');
+
+if (!fs.existsSync(finalPath)) {
+  console.error(`\n❌ Error: Fusée binary not found for your platform (${process.platform})`);
+  process.exit(1)
+}
+
+const args = process.argv.slice(2);
+const child = spawn(finalPath, args, { stdio: 'inherit' });
+
+child.on('exit', (code) => {
+  process.exit(code);
+});