feat: restructure project and update documentation

src/docs/plugins/core.router.md

@@ -0,0 +1,110 @@
+# Navigation Plugin: `Router`
+
+The SigPro Router handles URL changes via hashes (`#`) and maps them to components. It supports dynamic parameters (like `:id`) and asynchronous loading for heavy pages.
+
+## 1. Core Features
+
+* **Hash-based:** Works everywhere without special server configuration.
+* **Lazy Loading:** Pages are only downloaded when the user visits the route.
+* **Reactive:** The view updates automatically when the hash changes.
+* **Dynamic Routes:** Supports paths like `/user/:id`.
+
+---
+
+## 2. Installation
+
+The Router is usually included in the official plugins package.
+
+::: code-group
+```bash [NPM]
+npm install -D tailwindcss @tailwindcss/vite daisyui@next
+```
+
+```bash [PNPM]
+pnpm add -D tailwindcss @tailwindcss/vite daisyui@next
+```
+
+```bash [Yarn]
+yarn add -D tailwindcss @tailwindcss/vite daisyui@next
+```
+
+```bash [Bun]
+bun add -d tailwindcss @tailwindcss/vite daisyui@next
+```
+:::
+
+---
+
+## 3. Setting Up Routes
+
+In your `App.js` (or a dedicated routes file), define your navigation map.
+
+```javascript
+const routes = [
+  { path: '/', component: () => h1("Home Page") },
+  { 
+    path: '/admin', 
+    // Lazy Loading: This file is only fetched when needed
+    component: () => import('./pages/Admin.js') 
+  },
+  { path: '/user/:id', component: (params) => h2(`User ID: ${params.id}`) },
+  { path: '*', component: () => div("404 - Page Not Found") }
+];
+
+export default () => div([
+  _navbar({ title: "My App" }),
+  _router(routes) // The router is now a global tag
+]);
+```
+
+---
+
+## 4. Navigation (`_router.go`)
+
+To move between pages programmatically (e.g., inside an `onclick` event), use the global `_router.go` helper.
+
+```javascript
+_button({ 
+  onclick: () => _router.go('/admin') 
+}, "Go to Admin")
+```
+
+---
+
+## 5. How it Works (Under the Hood)
+
+The router tracks the `window.location.hash` and uses a reactive signal to trigger a re-render of the specific area where `_router(routes)` is placed.
+
+1.  **Match:** It filters your route array to find the best fit.
+2.  **Resolve:** * If it's a standard function, it executes it immediately.
+    * If it's a **Promise** (via `import()`), it shows a loading state and swaps the content once the module arrives.
+3.  **Inject:** It replaces the previous DOM node with the new page content surgically.
+
+
+
+---
+
+## 6. Integration with UI Components
+
+Since you are using the **UI Plugin**, you can easily create active states in your navigation menus by checking the current hash.
+
+```javascript
+// Example of a reactive sidebar menu
+_menu({
+  items: [
+    { 
+      label: 'Dashboard', 
+      active: () => window.location.hash === '#/', 
+      onclick: () => _router.go('/') 
+    },
+    { 
+      label: 'Settings', 
+      active: () => window.location.hash === '#/settings', 
+      onclick: () => _router.go('/settings') 
+    }
+  ]
+})
+```
+
+
+