chore: complete update

resources/js/docs/SCROLLER.md

@@ -0,0 +1,115 @@
+# 📦 Scroll-Module – Anwendung und Integration
+
+Dieses Projekt enthält mehrere leichtgewichtige JavaScript-Module zur Gestaltung interaktiver Scroll-Erlebnisse.
+
+## 🔧 Modulübersicht
+
+| Modul            | Funktion                            |
+|------------------|-------------------------------------|
+| `scroll-timeline` | Zustandswechsel bei Scrollschritten |
+| `parallax`        | Parallax-Scrolling-Effekte          |
+| `sticky-steps`    | Scrollbasierte Sticky-Kapitel       |
+
+---
+
+## 1️⃣ scroll-timeline
+
+### 📄 Verwendung
+```html
+<section data-scroll-step="1">Intro</section>
+<section data-scroll-step="2">Chart</section>
+<section data-scroll-step="3">Zitat</section>
+```
+
+### ⚙️ Konfiguration
+```js
+init({
+  attribute: 'data-scroll-step', // Attributname
+  triggerPoint: 0.4,             // Auslösehöhe (in % der Viewporthöhe)
+  once: false                    // true = nur einmal triggern
+});
+```
+
+### 🎯 Callbacks (in steps.js)
+```js
+export const scrollSteps = {
+  onEnter(index, el) {
+    // Element wird aktiv
+  },
+  onLeave(index, el) {
+    // Element verlässt Fokus (wenn once = false)
+  }
+};
+```
+
+---
+
+## 2️⃣ parallax
+
+### 📄 Verwendung
+```html
+<img src="..." data-parallax data-parallax-speed="0.2">
+```
+
+### ⚙️ Konfiguration
+```js
+init({
+  selector: '[data-parallax]',       // Ziel-Selektor
+  speedAttr: 'data-parallax-speed', // Attribut für Geschwindigkeit
+  defaultSpeed: 0.5                  // Fallback-Geschwindigkeit
+});
+```
+
+### 💡 Hinweis
+Je niedriger die `speed`, desto "langsamer" scrollt das Element.
+
+---
+
+## 3️⃣ sticky-steps
+
+### 📄 Verwendung
+```html
+<div data-sticky-container>
+  <div data-sticky-step>Kapitel 1</div>
+  <div data-sticky-step>Kapitel 2</div>
+</div>
+```
+
+### ⚙️ Konfiguration
+```js
+init({
+  containerSelector: '[data-sticky-container]',
+  stepSelector: '[data-sticky-step]',
+  activeClass: 'is-sticky-active'
+});
+```
+
+### 🎨 CSS-Vorschlag
+```css
+[data-sticky-step] {
+  position: sticky;
+  top: 20vh;
+  opacity: 0.3;
+  transition: opacity 0.3s ease;
+}
+
+.is-sticky-active {
+  opacity: 1;
+}
+```
+
+---
+
+## 🚀 Integration in dein Framework
+
+- Jedes Modul exportiert eine `init()`-Funktion
+- Wird automatisch über `modules/index.js` geladen
+- Konfiguration erfolgt über `modules/config.js`
+
+```js
+export const moduleConfig = {
+  'scroll-timeline': { once: false },
+  'parallax': { defaultSpeed: 0.3 },
+  'sticky-steps': { activeClass: 'active' }
+};
+```

resources/js/docs/SCROLL_LOOP.md

@@ -0,0 +1,9 @@
+| Attribut            | Typ                                                        | Standardwert  | Beschreibung                                                              |
+| ------------------- | ---------------------------------------------------------- | ------------- | ------------------------------------------------------------------------- |
+| `data-scroll-loop`  | —                                                          | —             | Aktiviert das Scroll-Loop-Modul auf dem Element                           |
+| `data-scroll-speed` | `float`                                                    | `0.2`         | Faktor für Scrollgeschwindigkeit – positiv oder negativ                   |
+| `data-scroll-axis`  | `"x"` \| `"y"`                                             | `"y"`         | Achse der Bewegung                                                        |
+| `data-scroll-type`  | `"translate"` \| `"rotate"` \| `"background"` \| `"scale"` | `"translate"` | Art der Scrollanimation                                                   |
+| `data-loop-offset`  | `float`                                                    | `0`           | Start-Offset in Pixeln (nützlich für Desynchronisation mehrerer Elemente) |
+| `data-loop-limit`   | `number` (Pixelwert)                                       | —             | Obergrenze für Scrollbereich – ab dieser Position stoppt die Animation    |
+| `data-loop-pause`   | `"true"` \| `"false"`                                      | —             | Bei `"true"` wird die Animation bei Hover oder aktivem Element pausiert   |

resources/js/docs/prefetch.md

@@ -0,0 +1,29 @@
+
+---
+
+## 🔧 Neue Funktionen:
+
+### `getPrefetched(href: string): string | null`
+
+* Gibt den HTML-Text zurück, **falls gültig gecached**
+* Sonst `null`
+
+### `prefetchHref(href: string): void`
+
+* Manuelles Prefetching von URLs
+* Wird nur ausgeführt, wenn nicht bereits gecached
+
+---
+
+## 🧪 Verwendung:
+
+```js
+import { getPrefetched, prefetchHref } from './core/click-manager.js';
+
+prefetchHref('/about.html'); // manuelles Prefetching
+
+const html = getPrefetched('/about.html');
+if (html) {
+  render(html);
+}
+```

resources/js/docs/router.md

@@ -0,0 +1,34 @@
+✅ Dein Router-Modul wurde erweitert um:
+
+---
+
+## 🎭 Layout-Animation
+
+```js
+import { animateLayoutSwitch } from './router.js';
+
+onLayoutSwitch(ctx => {
+  const type = ctx.href.startsWith('/studio') ? 'studio' : 'default';
+  animateLayoutSwitch(type);
+});
+```
+
+→ Fügt `data-layout="…"`, animiert via `.layout-transition` (z. B. Fade)
+
+---
+
+## 📝 Meta-Daten aus HTML
+
+```html
+<div data-meta-title="Über Uns" data-meta-theme="#111"></div>
+```
+
+→ Beim Laden des HTML werden automatisch:
+
+* `document.title` gesetzt
+* CSS-Variable `--theme-color` aktualisiert
+
+---
+
+Wenn du möchtest, kann ich dir nun einen `<meta name="theme-color">`-Updater bauen oder eine ViewTransition speziell für Layoutwechsel. Sag einfach:
+**„Ja, bitte meta\[name=theme-color]“** oder **„ViewTransition für Layout“**.

resources/js/docs/state.md

@@ -0,0 +1,197 @@
+# 📦 Framework-Module: `state.js` & `events.js`
+
+Diese Dokumentation beschreibt die Verwendung der globalen **State-Verwaltung** und des **Event-/Action-Dispatching** in deinem Framework.
+
+---
+
+## 📁 `core/state.js` – Globale Zustandsverwaltung
+
+### 🔹 `createState(key, initialValue)`
+
+Erzeugt einen flüchtigen (nicht-persistenten) globalen Zustand.
+
+```js
+const username = createState('username', 'Gast');
+
+console.log(username.get()); // → "Gast"
+
+username.set('Michael');
+```
+
+---
+
+### 🔹 `createPersistentState(key, defaultValue)`
+
+Wie `createState`, aber mit `localStorage`-Speicherung.
+
+```js
+const theme = createPersistentState('theme', 'light');
+theme.set('dark'); // Wird gespeichert
+```
+
+---
+
+### 🔹 `state.subscribe(callback)`
+
+Reagiert auf Änderungen des Zustands.
+
+```js
+username.subscribe((val) => {
+    console.log('Neuer Benutzername:', val);
+});
+```
+
+---
+
+### 🔹 `bindStateToElement({ state, element, property, attributeName })`
+
+Bindet einen State an ein DOM-Element.
+
+```js
+bindStateToElement({
+    state: username,
+    element: document.querySelector('#userDisplay'),
+    property: 'text'
+});
+```
+
+```html
+<span id="userDisplay"></span>
+```
+
+---
+
+### 🔹 `bindInputToState(inputElement, state)`
+
+Erzeugt eine **Zwei-Wege-Bindung** zwischen Eingabefeld und State.
+
+```js
+bindInputToState(document.querySelector('#nameInput'), username);
+```
+
+```html
+<input id="nameInput" type="text" />
+```
+
+---
+
+### 🔹 `initStateBindings()`
+
+Initialisiert alle Elemente mit `data-bind-*` automatisch.
+
+```html
+<!-- Einfache Textbindung -->
+<span data-bind="username"></span>
+
+<!-- Input mit persistenter Speicherung -->
+<input data-bind-input="username" data-persistent />
+
+<!-- Attributbindung -->
+<img data-bind-attr="profilePic" data-bind-attr-name="src" />
+
+<!-- Klassenbindung -->
+<div data-bind-class="themeClass"></div>
+```
+
+```js
+initStateBindings(); // Einmalig in initApp() aufrufen
+```
+
+---
+
+### 🔹 `createComputedState([dependencies], computeFn)`
+
+Leitet einen State aus anderen ab.
+
+```js
+const first = createState('first', 'Max');
+const last = createState('last', 'Mustermann');
+
+const fullName = createComputedState([first, last], (f, l) => \`\${f} \${l}\`);
+```
+
+---
+
+### 🔹 `enableUndoRedoForState(state)`
+
+Fügt Undo/Redo-Funktionalität hinzu.
+
+```js
+const message = createState('message', '');
+const history = enableUndoRedoForState(message);
+
+history.undo();
+history.redo();
+```
+
+---
+
+### 🔹 `enableStateLogging(state, label?)`
+
+Gibt alle Änderungen in der Konsole aus.
+
+```js
+enableStateLogging(username, 'Benutzername');
+```
+
+---
+
+## 📁 `core/events.js` – EventBus & ActionDispatcher
+
+### 🔹 `on(eventName, callback)`
+
+Abonniert benutzerdefinierte Events.
+
+```js
+on('user:login', user => {
+    console.log('Login:', user.name);
+});
+```
+
+---
+
+### 🔹 `emit(eventName, payload)`
+
+Sendet ein Event global.
+
+```js
+emit('user:login', { name: 'Max', id: 123 });
+```
+
+---
+
+### 🔹 `registerActionListener(callback)`
+
+Reagiert auf alle ausgelösten Aktionen.
+
+```js
+registerActionListener(({ type, payload }) => {
+    if (type === 'counter/increment') {
+        payload.state.set(payload.state.get() + 1);
+    }
+});
+```
+
+---
+
+### 🔹 `dispatchAction(type, payload?)`
+
+Löst eine benannte Aktion aus.
+
+```js
+dispatchAction('counter/increment', { state: counter });
+```
+
+---
+
+## ✅ Zusammenfassung
+
+| Funktion | Zweck |
+|----------|-------|
+| `createState` / `createPersistentState` | Reaktiver globaler Zustand |
+| `bindStateToElement` / `bindInputToState` | DOM-Bindings |
+| `createComputedState` | Abhängiger Zustand |
+| `enableUndoRedoForState` | History / Undo |
+| `enableStateLogging` | Debugging |
+| `on` / `emit` | Lose gekoppelte Event-Kommunikation |
+| `registerActionListener` / `dispatchAction` | Zentrale Aktionssteuerung |