chore: complete update

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 |