Include if for in Docs

src/docs/api/if.md

@@ -0,0 +1,88 @@
+
+# 🔀 Reactive Branching: `$.if( )`
+
+The `$.if` function is a reactive control flow operator. It manages the conditional rendering of components, ensuring that only the active branch exists in the DOM and in memory.
+
+## 🛠️ Function Signature
+
+```typescript
+$.if(
+  condition: Signal<boolean> | Function, 
+  thenVal: Component | Node, 
+  otherwiseVal?: Component | Node
+): HTMLElement
+```
+
+| Parameter | Type | Required | Description |
+| :--- | :--- | :--- | :--- |
+| **`condition`** | `Signal` | Yes | A reactive source that determines which branch to render. |
+| **`thenVal`** | `any` | Yes | The content to show when the condition is **truthy**. |
+| **`otherwiseVal`** | `any` | No | The content to show when the condition is **falsy** (defaults to null). |
+
+**Returns:** A `div` element with `display: contents` that acts as a reactive portal for the branches.
+
+---
+
+## 📖 Usage Patterns
+
+### 1. Simple Toggle
+The most common use case is showing or hiding a single element based on a state.
+
+```javascript
+const isVisible = $(false);
+
+Div([
+  Button({ onclick: () => isVisible(!isVisible()) }, "Toggle Message"),
+  
+  $.if(isVisible, 
+    P("Now you see me!"), 
+    P("Now you don't...")
+  )
+]);
+```
+
+### 2. Lazy Component Loading
+Unlike using a hidden class (CSS `display: none`), `$.if` is **lazy**. The branch that isn't active **is never created**. This saves memory and initial processing time.
+
+```javascript
+$.if(() => user.isLogged(), 
+  () => Dashboard(), // Only executed if logged in
+  () => LoginGate()  // Only executed if guest
+)
+```
+
+---
+
+## 🧹 Automatic Cleanup
+
+One of the core strengths of `$.if` is its integrated **Cleanup** logic. SigPro ensures that when a branch is swapped out, it is completely purged.
+
+1.  **Stop Watchers**: All `$.watch` calls inside the inactive branch are permanently stopped.
+2.  **Unbind Events**: Event listeners attached via `$.html` are removed.
+3.  **Recursive Sweep**: SigPro performs a deep "sweep" of the removed branch to ensure no nested reactive effects remain active.
+
+
+
+---
+
+## 💡 Best Practices
+
+* **Function Wrappers**: If your branches are heavy (e.g., they contain complex components), wrap them in a function `() => MyComponent()`. This prevents the component from being initialized until the condition actually meets its requirement.
+* **Logical Expressions**: You can pass a complex computed function as the condition:
+    ```javascript
+    $.if(() => count() > 10 && status() === 'ready', 
+      Span("Threshold reached!")
+    )
+    ```
+
+---
+
+## 🏗️ Technical Comparison
+
+| Feature | Standard CSS `hidden` | SigPro `$.if` |
+| :--- | :--- | :--- |
+| **DOM Presence** | Always present | Only if active |
+| **Reactivity** | Still processing in background | **Paused/Destroyed** |
+| **Memory usage** | Higher | **Optimized** |
+| **Cleanup** | Manual | **Automatic** |
+