Add $$ proxies + Svg compatible + $if transaction

2026-04-04 02:59:28 +02:00
parent 196f82f240
commit 05660fde2b
7 changed files with 715 additions and 99 deletions
--- a/docs/api/if.md
+++ b/docs/api/if.md
@@ -1,7 +1,6 @@
-
 # 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.
+The `$if` function is a reactive control flow operator. It manages the conditional rendering of components with optional smooth transitions, ensuring that only the active branch exists in the DOM and in memory.

 ## Function Signature

@@ -9,7 +8,8 @@ The `$if` function is a reactive control flow operator. It manages the condition
 $if(
  condition: Signal<boolean> | Function, 
  thenVal: Component | Node, 
-  otherwiseVal?: Component | Node
+  otherwiseVal?: Component | Node,
+  transition?: Transition
 ): HTMLElement
 ```

@@ -18,15 +18,49 @@ $if(
 | **`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). |
+| **`transition`** | `Transition` | No | Optional animation hooks for enter/exit transitions. |

 **Returns:** A `div` element with `display: contents` that acts as a reactive portal for the branches.

 ---

+## Transition Interface
+
+```typescript
+interface Transition {
+  /** Called when branch enters. Use for fade-in, slide-in, etc. */
+  in: (el: HTMLElement) => void;
+  /** Called when branch leaves. Call `done()` when animation completes. */
+  out: (el: HTMLElement, done: () => void) => void;
+}
+```
+
+### Example: Fade Transition
+
+```javascript
+const fade = {
+  in: (el) => {
+    el.style.opacity = "0";
+    el.style.transition = "opacity 0.3s";
+    requestAnimationFrame(() => {
+      el.style.opacity = "1";
+    });
+  },
+  out: (el, done) => {
+    el.style.transition = "opacity 0.3s";
+    el.style.opacity = "0";
+    setTimeout(done, 300);
+  }
+};
+
+$if(show, Modal, null, fade);
+```
+
+---
+
 ## 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);
@@ -41,8 +75,25 @@ Div([
 ]);
 ```

-### 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.
+### 2. With Smooth Animation
+
+```javascript
+const showModal = $(false);
+
+Div([
+  Button({ onclick: () => showModal(true) }, "Open Modal"),
+  
+  $if(showModal, 
+    () => Modal({ onClose: () => showModal(false) }),
+    null,
+    fade  // ← Smooth enter/exit animation
+  )
+]);
+```
+
+### 3. Lazy Component Loading
+
+Unlike CSS `display: none`, `$if` is **lazy**. The inactive branch is never created, saving memory.

 ```javascript
 $if(() => user.isLogged(), 
@@ -51,29 +102,41 @@ $if(() => user.isLogged(),
 )
 ```

+### 4. Complex Conditions
+
+```javascript
+$if(() => count() > 10 && status() === 'ready', 
+  Span("Threshold reached!")
+)
+```
+
+### 5. $if.not Helper
+
+```javascript
+$if.not(loading, 
+  () => Content(),  // Shows when loading is FALSE
+  () => Spinner()   // Shows when loading is TRUE
+)
+```
+
 ---

 ## 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.
-
-
+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.
+4. **Transition Respect**: When using transitions, destruction only happens AFTER the `out` animation completes.

 ---

 ## 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!")
-    )
-    ```
+- **Function Wrappers**: For heavy components, use `() => MyComponent()` to prevent initialization until needed.
+- **Reusable Transitions**: Define common transitions (fade, slide, scale) in a shared module.
+- **Cleanup**: No manual cleanup needed. SigPro handles everything automatically.

 ---

@@ -82,7 +145,36 @@ One of the core strengths of `$if` is its integrated **Cleanup** logic. SigPro e
 | Feature | Standard CSS `hidden` | SigPro `$if` |
 | :--- | :--- | :--- |
 | **DOM Presence** | Always present | Only if active |
-| **Reactivity** | Still processing in background | **Paused/Destroyed** |
+| **Reactivity** | Still processing | **Paused/Destroyed** |
 | **Memory usage** | Higher | **Optimized** |
 | **Cleanup** | Manual | **Automatic** |
+| **Smooth Transitions** | Manual | **Built-in hook** |
+| **Animation Timing** | You manage | **Respected by core** |

+---
+
+## Complete Transition Examples
+
+### Fade
+```javascript
+const fade = {
+  in: (el) => { el.style.opacity = "0"; requestAnimationFrame(() => { el.style.transition = "opacity 0.3s"; el.style.opacity = "1"; }); },
+  out: (el, done) => { el.style.transition = "opacity 0.3s"; el.style.opacity = "0"; setTimeout(done, 300); }
+};
+```
+
+### Slide
+```javascript
+const slide = {
+  in: (el) => { el.style.transform = "translateX(-100%)"; requestAnimationFrame(() => { el.style.transition = "transform 0.3s"; el.style.transform = "translateX(0)"; }); },
+  out: (el, done) => { el.style.transition = "transform 0.3s"; el.style.transform = "translateX(-100%)"; setTimeout(done, 300); }
+};
+```
+
+### Scale
+```javascript
+const scale = {
+  in: (el) => { el.style.transform = "scale(0)"; requestAnimationFrame(() => { el.style.transition = "transform 0.2s"; el.style.transform = "scale(1)"; }); },
+  out: (el, done) => { el.style.transition = "transform 0.2s"; el.style.transform = "scale(0)"; setTimeout(done, 200); }
+};
+```
--- a/docs/api/signal.md
+++ b/docs/api/signal.md
@@ -66,3 +66,276 @@ const list = $(["A", "B"]);
 // Adds "C" using the previous state
 list(prev => [...prev, "C"]); 
 ```
+
+---
+
+# The Reactive Object: `$$( )`
+
+The `$$( )` function creates a reactive proxy for complex nested objects. Unlike `$()`, which tracks a single value, `$$()` tracks **every property access** automatically.
+
+## Function Signature
+
+```typescript
+$$<T extends object>(obj: T): T
+```
+
+| Parameter | Type | Required | Description |
+| :--- | :--- | :--- | :--- |
+| **`obj`** | `object` | Yes | The object to make reactive. Properties are tracked recursively. |
+
+**Returns:** A reactive proxy that behaves like the original object but triggers updates when any property changes.
+
+---
+
+## Usage Patterns
+
+### 1. Simple Object
+
+```javascript
+const state = $$({ count: 0, name: "Juan" });
+
+$watch(() => state.count, () => {
+  console.log(`Count is now ${state.count}`);
+});
+
+state.count++; // ✅ Triggers update
+state.name = "Ana"; // ✅ Also reactive
+```
+
+### 2. Deep Reactivity
+
+Unlike `$()`, `$$()` tracks nested properties automatically.
+
+```javascript
+const user = $$({
+  profile: {
+    name: "Juan",
+    address: {
+      city: "Madrid",
+      zip: "28001"
+    }
+  }
+});
+
+// This works! Tracks deep property access
+$watch(() => user.profile.address.city, () => {
+  console.log("City changed");
+});
+
+user.profile.address.city = "Barcelona"; // ✅ Triggers update
+```
+
+### 3. Arrays
+
+`$$()` works with arrays and array methods.
+
+```javascript
+const todos = $$([
+  { id: 1, text: "Learn SigPro", done: false },
+  { id: 2, text: "Build an app", done: false }
+]);
+
+$watch(() => todos.length, () => {
+  console.log(`You have ${todos.length} todos`);
+});
+
+// Array methods are reactive
+todos.push({ id: 3, text: "Deploy", done: false }); // ✅ Triggers
+todos[0].done = true; // ✅ Deep reactivity works
+todos.splice(1, 1); // ✅ Triggers
+```
+
+### 4. Mixed with Signals
+
+`$$()` works seamlessly with `$()` signals.
+
+```javascript
+const form = $$({
+  fields: {
+    email: "",
+    password: ""
+  },
+  isValid: $(false) // Signal inside reactive object
+});
+
+// Computed using both
+const canSubmit = $(() => 
+  form.fields.email.includes("@") && 
+  form.fields.password.length > 6
+);
+
+$watch(canSubmit, (valid) => {
+  form.isValid(valid); // Update signal inside reactive object
+});
+```
+
+---
+
+## Key Differences: `$()` vs `$$()`
+
+| Feature | `$()` Signal | `$$()` Reactive |
+| :--- | :--- | :--- |
+| **Primitives** | ✅ Works directly | ❌ Needs wrapper object |
+| **Objects** | Manual tracking | ✅ Automatic deep tracking |
+| **Nested properties** | ❌ Not reactive | ✅ Fully reactive |
+| **Arrays** | Requires reassignment | ✅ Methods (push, pop, etc.) work |
+| **Syntax** | `count()` / `count(5)` | `state.count = 5` |
+| **LocalStorage** | ✅ Built-in | ❌ (use `$()` for persistence) |
+| **Performance** | Lighter | Slightly heavier (Proxy) |
+| **Destructuring** | ✅ Safe | ❌ Breaks reactivity |
+
+---
+
+## When to Use Each
+
+### Use `$()` when:
+- Working with primitives (numbers, strings, booleans)
+- Need localStorage persistence
+- Creating computed values
+- Want explicit control over updates
+
+```javascript
+const count = $(0);
+const user = $(null);
+const fullName = $(() => `${firstName()} ${lastName()}`);
+```
+
+### Use `$$()` when:
+- Working with complex nested objects
+- Managing forms with multiple fields
+- Using arrays with mutations (push, pop, splice)
+- Want natural object syntax (no function calls)
+
+```javascript
+const form = $$({ email: "", password: "" });
+const settings = $$({ theme: "dark", notifications: true });
+const store = $$({ users: [], filters: {}, pagination: { page: 1 } });
+```
+
+---
+
+## Important Notes
+
+### ✅ DO:
+```javascript
+// Access properties directly
+state.count = 10;
+state.user.name = "Ana";
+todos.push(newItem);
+
+// Track in effects
+$watch(() => state.count, () => {});
+$watch(() => state.user.name, () => {});
+```
+
+### ❌ DON'T:
+```javascript
+// Destructuring breaks reactivity
+const { count, user } = state; // ❌ count and user are not reactive
+
+// Reassigning the whole object
+state = { count: 10 }; // ❌ Loses reactivity
+
+// Using primitive directly
+const count = $$(0); // ❌ Doesn't work (use $() instead)
+```
+
+---
+
+## Automatic Cleanup
+
+Like all SigPro reactive primitives, `$$()` integrates with the cleanup system:
+
+- Effects tracking reactive properties are automatically disposed
+- No manual cleanup needed
+- Works with `$watch`, `$if`, and `$for`
+
+---
+
+## Technical Comparison
+
+| Aspect | `$()` | `$$()` |
+| :--- | :--- | :--- |
+| **Implementation** | Closure with Set | Proxy with WeakMap |
+| **Tracking** | Explicit (function call) | Implicit (property access) |
+| **Memory** | Minimal | Slightly more (WeakMap cache) |
+| **Use Case** | Simple state | Complex state |
+| **Learning Curve** | Low | Low (feels like plain JS) |
+
+---
+
+## Complete Example
+
+```javascript
+// Combining both approaches
+const app = {
+  // Simple primitives with persistence
+  theme: $("dark", "theme"),
+  sidebarOpen: $(true),
+  
+  // Complex state with $$()
+  user: $$({
+    name: "",
+    email: "",
+    preferences: {
+      notifications: true,
+      language: "es"
+    }
+  }),
+  
+  // Computed values
+  isLoggedIn: $(() => !!app.user.name),
+  
+  // Actions
+  login(name, email) {
+    app.user.name = name;
+    app.user.email = email;
+  },
+  
+  logout() {
+    app.user.name = "";
+    app.user.email = "";
+    app.user.preferences.notifications = true;
+  }
+};
+
+// UI component
+const UserProfile = () => {
+  return Div({}, [
+    $if(() => app.isLoggedIn(),
+      () => Div({}, [
+        H2(`Welcome ${app.user.name}`),
+        P(`Email: ${app.user.email}`),
+        P(`Notifications: ${app.user.preferences.notifications ? "ON" : "OFF"}`),
+        Button({ onclick: () => app.user.preferences.notifications = !app.user.preferences.notifications },
+          "Toggle Notifications"
+        ),
+        Button({ onclick: app.logout }, "Logout")
+      ]),
+      () => LoginForm()
+    )
+  ]);
+};
+```
+
+---
+
+## Migration from `$()` to `$$()`
+
+If you have code using nested signals:
+
+```javascript
+// Before - Manual nesting
+const user = $({
+  name: $(""),
+  email: $("")
+});
+user().name("Juan"); // Need to call inner signal
+
+// After - Automatic nesting
+const user = $$({
+  name: "",
+  email: ""
+});
+user.name = "Juan"; // Direct assignment
+```
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -137,11 +137,9 @@ $mount(PersistDemo, '#demo-persist');
 ```

 <script>
-  // Esta función envuelve todo para que Docsify lo ejecute correctamente
  (function() {
    const initExamples = () => {
      
-      // 1. Counter
      const counterTarget = document.querySelector('#demo-counter');
      if (counterTarget && !counterTarget.hasChildNodes()) {
        const Counter = () => {
--- a/docs/install.md
+++ b/docs/install.md
@@ -85,7 +85,7 @@ SigPro uses **PascalCase** for Tag Helpers (e.g., `Div`, `Button`) to provide a

 ```javascript
 // File: App.js
-import SigPro from "sigpro";
+import "sigpro";

 export const App = () => {
  const $count = $(0);
@@ -104,7 +104,7 @@ export const App = () => {
 };

 // File: main.js
-import SigPro from "sigpro";
+import "sigpro";
 import { App } from "./App.js";

 $mount(App, "#app");
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
  "exports": {
    ".": {
      "import": "./index.js",
-      "script": "./dist/sigpro.js"
+      "script": "./dist/sigpro.js",
+      "types": "./sigpro/sigpro.d.ts"
    },
    "./vite": "./vite/index.js",
    "./vite/*": "./vite/*.js"
--- a/sigpro.d.ts
+++ b/sigpro.d.ts
@@ -0,0 +1,261 @@
+// sigpro.d.ts
+
+export declare module 'sigpro' {
+  type Signal<T> = {
+    (): T;
+    (value: T | ((prev: T) => T)): void;
+  };
+
+  type ComputedSignal<T> = {
+    (): T;
+  };
+
+  type ReactiveObject<T extends object> = T;
+
+  type DeepReactive<T> = T extends object
+    ? { [K in keyof T]: DeepReactive<T[K]> }
+    : T;
+
+  type Unsubscribe = () => void;
+
+  type CleanupFn = () => void;
+
+  type ViewInstance = {
+    _isRuntime: true;
+    container: HTMLDivElement;
+    destroy: () => void;
+  };
+
+  type ComponentFunction<P = {}> = (props?: P) => HTMLElement | ViewInstance | string | null;
+  type ComponentChild = HTMLElement | ViewInstance | string | number | boolean | null | undefined;
+  type ComponentChildren = ComponentChild | ComponentChild[];
+
+  interface BaseProps {
+    class?: string | (() => string);
+    style?: string | Record<string, string> | (() => string | Record<string, string>);
+    id?: string | (() => string);
+    ref?: ((el: HTMLElement) => void) | { current: HTMLElement | null };
+  }
+
+  interface EventProps {
+    onclick?: (event: MouseEvent) => void;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeyup?: (event: KeyboardEvent) => void;
+    onmouseenter?: (event: MouseEvent) => void;
+    onmouseleave?: (event: MouseEvent) => void;
+    onsubmit?: (event: Event) => void;
+    [key: `on${string}`]: ((event: any) => void) | undefined;
+  }
+
+  interface HtmlProps extends BaseProps, EventProps {
+    [key: string]: any;
+  }
+
+  interface Route {
+    path: string;
+    component: ComponentFunction | (() => Promise<ComponentFunction>);
+  }
+
+  interface RouterOutlet extends HTMLElement {
+    params: Signal<Record<string, string>>;
+    to: (path: string) => void;
+    back: () => void;
+    path: () => string;
+  }
+
+  function $<T>(initial: T, key?: string): Signal<T>;
+  function $<T>(computed: () => T): ComputedSignal<T>;
+  function $$<T extends object>(obj: T): T;
+
+  function $watch(
+    target: () => any,
+    fn?: never
+  ): Unsubscribe;
+  function $watch(
+    target: Array<() => any>,
+    fn: () => void
+  ): Unsubscribe;
+
+  function $html(
+    tag: string,
+    props?: HtmlProps | ComponentChildren,
+    content?: ComponentChildren
+  ): HTMLElement;
+
+  interface Transition {
+    in: (el: HTMLElement) => void;
+    out: (el: HTMLElement, done: () => void) => void;
+  }
+
+  function $if(
+    condition: boolean | (() => boolean),
+    thenVal: ComponentFunction | ComponentChild,
+    otherwiseVal?: ComponentFunction | ComponentChild,
+    transition?: Transition
+  ): HTMLDivElement;
+
+  namespace $if {
+    function not(
+      condition: boolean | (() => boolean),
+      thenVal: ComponentFunction | ComponentChild,
+      otherwiseVal?: ComponentFunction | ComponentChild
+    ): HTMLDivElement;
+  }
+
+  function $for<T>(
+    source: T[] | (() => T[]),
+    render: (item: T, index: number) => ComponentChild,
+    keyFn?: (item: T, index: number) => string | number,
+    tag?: string,
+    props?: HtmlProps
+  ): HTMLElement;
+
+  function $router(routes: Route[]): RouterOutlet;
+
+  function $mount(
+    component: ComponentFunction | HTMLElement,
+    target: string | HTMLElement
+  ): ViewInstance | undefined;
+
+  const Div: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Span: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const P: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const H1: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const H2: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const H3: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const H4: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const H5: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const H6: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Button: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Input: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Textarea: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Select: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Option: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Label: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Form: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const A: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Img: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Ul: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Ol: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Li: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Nav: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Header: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Footer: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Section: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Article: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Aside: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Main: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Table: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Thead: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Tbody: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Tr: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Th: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+  const Td: (props?: HtmlProps | ComponentChildren, content?: ComponentChildren) => HTMLElement;
+
+  const SigPro: {
+    $: typeof $;
+    $$: typeof $$; 
+    $watch: typeof $watch;
+    $html: typeof $html;
+    $if: typeof $if;
+    $for: typeof $for;
+    $router: typeof $router;
+    $mount: typeof $mount;
+  };
+}
+
+export declare global {
+  const $: typeof import('sigpro').$;
+  const $$: typeof import('sigpro').$$;
+  const $watch: typeof import('sigpro').$watch;
+  const $html: typeof import('sigpro').$html;
+  const $if: typeof import('sigpro').$if;
+  const $for: typeof import('sigpro').$for;
+  const $router: typeof import('sigpro').$router;
+  const $mount: typeof import('sigpro').$mount;
+  
+  const Div: typeof import('sigpro').Div;
+  const Span: typeof import('sigpro').Span;
+  const P: typeof import('sigpro').P;
+  const H1: typeof import('sigpro').H1;
+  const H2: typeof import('sigpro').H2;
+  const H3: typeof import('sigpro').H3;
+  const H4: typeof import('sigpro').H4;
+  const H5: typeof import('sigpro').H5;
+  const H6: typeof import('sigpro').H6;
+  const Button: typeof import('sigpro').Button;
+  const Input: typeof import('sigpro').Input;
+  const Textarea: typeof import('sigpro').Textarea;
+  const Select: typeof import('sigpro').Select;
+  const Option: typeof import('sigpro').Option;
+  const Label: typeof import('sigpro').Label;
+  const Form: typeof import('sigpro').Form;
+  const A: typeof import('sigpro').A;
+  const Img: typeof import('sigpro').Img;
+  const Ul: typeof import('sigpro').Ul;
+  const Ol: typeof import('sigpro').Ol;
+  const Li: typeof import('sigpro').Li;
+  const Nav: typeof import('sigpro').Nav;
+  const Header: typeof import('sigpro').Header;
+  const Footer: typeof import('sigpro').Footer;
+  const Section: typeof import('sigpro').Section;
+  const Article: typeof import('sigpro').Article;
+  const Aside: typeof import('sigpro').Aside;
+  const Main: typeof import('sigpro').Main;
+  const Table: typeof import('sigpro').Table;
+  const Thead: typeof import('sigpro').Thead;
+  const Tbody: typeof import('sigpro').Tbody;
+  const Tr: typeof import('sigpro').Tr;
+  const Th: typeof import('sigpro').Th;
+  const Td: typeof import('sigpro').Td;
+  
+  interface Window {
+    $: typeof $;
+    $$: typeof $$;
+    $watch: typeof $watch;
+    $html: typeof $html;
+    $if: typeof $if;
+    $for: typeof $for;
+    $router: typeof $router;
+    $mount: typeof $mount;
+    SigPro: typeof import('sigpro').default;
+    Div: typeof Div;
+    Span: typeof Span;
+    P: typeof P;
+    H1: typeof H1;
+    H2: typeof H2;
+    H3: typeof H3;
+    H4: typeof H4;
+    H5: typeof H5;
+    H6: typeof H6;
+    Button: typeof Button;
+    Input: typeof Input;
+    Textarea: typeof Textarea;
+    Select: typeof Select;
+    Option: typeof Option;
+    Label: typeof Label;
+    Form: typeof Form;
+    A: typeof A;
+    Img: typeof Img;
+    Ul: typeof Ul;
+    Ol: typeof Ol;
+    Li: typeof Li;
+    Nav: typeof Nav;
+    Header: typeof Header;
+    Footer: typeof Footer;
+    Section: typeof Section;
+    Article: typeof Article;
+    Aside: typeof Aside;
+    Main: typeof Main;
+    Table: typeof Table;
+    Thead: typeof Thead;
+    Tbody: typeof Tbody;
+    Tr: typeof Tr;
+    Th: typeof Th;
+    Td: typeof Td;
+  }
+}
--- a/sigpro/index.js
+++ b/sigpro/index.js
@@ -7,7 +7,6 @@ const effectQueue = new Set();
 let isFlushing = false;
 const MOUNTED_NODES = new WeakMap();

-/** flush */
 const flush = () => {
  if (isFlushing) return;
  isFlushing = true;
@@ -19,7 +18,6 @@ const flush = () => {
  isFlushing = false;
 };

-/** track */
 const track = (subs) => {
  if (activeEffect && !activeEffect._deleted) {
    subs.add(activeEffect);
@@ -27,7 +25,6 @@ const track = (subs) => {
  }
 };

-/** trigger */
 const trigger = (subs) => {
  for (const eff of subs) {
    if (eff === activeEffect || eff._deleted) continue;
@@ -41,7 +38,6 @@ const trigger = (subs) => {
  if (!isFlushing) queueMicrotask(flush);
 };

-/** sweep */
 const sweep = (node) => {
  if (node._cleanups) {
    node._cleanups.forEach((f) => f());
@@ -50,7 +46,6 @@ const sweep = (node) => {
  node.childNodes?.forEach(sweep);
 };

-/** _view */
 const _view = (fn) => {
  const cleanups = new Set();
  const prev = currentOwner;
@@ -80,17 +75,6 @@ const _view = (fn) => {
  };
 };

-/**
- * Creates a reactive Signal or a Computed Value.
- * @param {any|Function} initial - Initial value or a getter function for computed state.
- * @param {string} [key] - Optional. Key for automatic persistence in localStorage.
- * @returns {Function} Signal getter/setter. Use `sig()` to read and `sig(val)` to write.
- * @example
- * const count = $(0); // Simple signal
- * const double = $(() => count() * 2); // Computed signal
- * const name = $("John", "user-name"); // Persisted signal
- */
-
 const $ = (initial, key = null) => {
  if (typeof initial === "function") {
    const subs = new Set();
@@ -148,16 +132,39 @@ const $ = (initial, key = null) => {
  };
 };

-/**
-* Watches for signal changes and executes a side effect.
-* Handles automatic cleanup of previous effects.
-* @param {Function|Array} target - Function to execute or Array of signals for explicit dependency tracking.
-* @param {Function} [fn] - If the first parameter is an Array, this is the callback function.
-* @returns {Function} Function to manually stop the watcher.
-* @example
-* $watch(() => console.log("Count is:", count()));
-* $watch([count], () => console.log("Only runs when count changes"));
-*/
+const $$ = (obj, cache = new WeakMap()) => {
+  if (typeof obj !== "object" || obj === null) return obj;
+  if (cache.has(obj)) return cache.get(obj);
+
+  const subs = {};
+
+  const proxy = new Proxy(obj, {
+    get(target, key) {
+      if (activeEffect)
+        track(subs[key] ??= new Set());
+
+      const value = Reflect.get(target, key);
+
+      return (typeof value === "object" && value !== null)
+        ? $$(value, cache)
+        : value;
+    },
+
+    set(target, key, value) {
+      if (Object.is(target[key], value)) return true;
+
+      const res = Reflect.set(target, key, value);
+
+      if (subs[key])
+        trigger(subs[key]);
+
+      return res;
+    }
+  });
+
+  cache.set(obj, proxy);
+  return proxy;
+};

 const $watch = (target, fn) => {
  const isExplicit = Array.isArray(target);
@@ -212,18 +219,18 @@ const $watch = (target, fn) => {
  return runner.stop;
 };

-/**
-* DOM element rendering engine with built-in reactivity.
-* @param {string} tag - HTML tag name (e.g., 'div', 'span').
-* @param {Object} [props] - Attributes, events (onEvent), or two-way bindings (value, checked).
-* @param {Array|any} [content] - Children: text, other nodes, or reactive signals.
-* @returns {HTMLElement} The configured reactive DOM element.
-*/
 const $html = (tag, props = {}, content = []) => {
  if (props instanceof Node || Array.isArray(props) || typeof props !== "object") {
    content = props; props = {};
  }
-  const el = document.createElement(tag), _sanitize = (key, val) => (key === 'src' || key === 'href') && String(val).toLowerCase().includes('javascript:') ? '#' : val;
+  
+  const svgTags = ["svg","path","circle","rect","line","polyline","polygon","g","defs","text","tspan","use"];
+  const isSVG = svgTags.includes(tag);
+  const el = isSVG 
+    ? document.createElementNS("http://www.w3.org/2000/svg", tag)
+    : document.createElement(tag);
+    
+  const _sanitize = (key, val) => (key === 'src' || key === 'href') && String(val).toLowerCase().includes('javascript:') ? '#' : val;
  el._cleanups = new Set();

  const boolAttrs = ["disabled", "checked", "required", "readonly", "selected", "multiple", "autofocus"];
@@ -255,7 +262,13 @@ const $html = (tag, props = {}, content = []) => {
            el[key] = false;
          }
        } else {
-          currentVal == null ? el.removeAttribute(key) : el.setAttribute(key, currentVal);
+          if (currentVal == null) {
+            el.removeAttribute(key);
+          } else if (isSVG && typeof currentVal === 'number') {
+            el.setAttribute(key, currentVal);
+          } else {
+            el.setAttribute(key, currentVal);
+          }
        }
      }));
    } else {
@@ -295,42 +308,41 @@ const $html = (tag, props = {}, content = []) => {
  return el;
 };

-/**
-* Conditional rendering component.
-* @param {Function|boolean} condition - Reactive signal or boolean value.
-* @param {Function|HTMLElement} thenVal - Content to show if true.
-* @param {Function|HTMLElement} [otherwiseVal] - Content to show if false (optional).
-* @returns {HTMLElement} A reactive container (display: contents).
-*/
-
-const $if = (condition, thenVal, otherwiseVal = null) => {
+const $if = (condition, thenVal, otherwiseVal = null, transition = null) => {
  const marker = document.createTextNode("");
  const container = $html("div", { style: "display:contents" }, [marker]);
  let current = null, last = null;
+  
  $watch(() => {
    const state = !!(typeof condition === "function" ? condition() : condition);
-    if (state !== last) {
-      last = state;
+    if (state === last) return;
+    last = state;
+    
+    if (current && !state && transition?.out) {
+      transition.out(current.container, () => {
+        current.destroy();
+        current = null;
+      });
+    } else {
      if (current) current.destroy();
+      current = null;
+    }
+    
+    if (state || (!state && otherwiseVal)) {
      const branch = state ? thenVal : otherwiseVal;
      if (branch) {
        current = _view(() => typeof branch === "function" ? branch() : branch);
        container.insertBefore(current.container, marker);
+        if (state && transition?.in) transition.in(current.container);
      }
    }
  });
+  
  return container;
 };

 $if.not = (condition, thenVal, otherwiseVal) => $if(() => !(typeof condition === "function" ? condition() : condition), thenVal, otherwiseVal);

-/**
-* Optimized reactive loop with key-based reconciliation.
-* @param {Function|Array} source - Signal containing an Array of data.
-* @param {Function} render - Function receiving (item, index) and returning a node.
-* @param {Function} keyFn - Function to extract a unique key from the item.
-* @returns {HTMLElement} A reactive container (display: contents).
-*/
 const $for = (source, render, keyFn, tag = "div", props = { style: "display:contents" }) => {
  const marker = document.createTextNode("");
  const container = $html(tag, props, [marker]);
@@ -344,7 +356,7 @@ const $for = (source, render, keyFn, tag = "div", props = { style: "display:cont
    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      const key = keyFn ? keyFn(item, i) : i;
-      
+
      let run = cache.get(key);
      if (!run) {
        run = _view(() => render(item, i));
@@ -376,11 +388,6 @@ const $for = (source, render, keyFn, tag = "div", props = { style: "display:cont
  return container;
 };

-/**
-* Hash-based (#) routing system.
-* @param {Array<{path: string, component: Function}>} routes - Route definitions.
-* @returns {HTMLElement} The router outlet container.
-*/
 const $router = (routes) => {
  const sPath = $(window.location.hash.replace(/^#/, "") || "/");
  window.addEventListener("hashchange", () => sPath(window.location.hash.replace(/^#/, "") || "/"));
@@ -426,21 +433,6 @@ $router.to = (path) => (window.location.hash = path.replace(/^#?\/?/, "#/"));
 $router.back = () => window.history.back();
 $router.path = () => window.location.hash.replace(/^#/, "") || "/";

-/**
- * Mounts a component or node into a DOM target element.
- * It automatically handles the cleanup of any previously mounted SigPro instances 
- * in that target to prevent memory leaks and duplicate renders.
- * * @param {Function|HTMLElement} component - The component function to render or a pre-built DOM node.
- * @param {string|HTMLElement} target - A CSS selector string or a direct DOM element to mount into.
- * @returns {Object|undefined} The view instance containing the `container` and `destroy` method, or undefined if target is not found.
- * * @example
- * // Mount using a component function
- * $mount(() => Div({ class: "app" }, "Hello World"), "#root");
- * * // Mount using a direct element
- * const myApp = Div("Hello");
- * $mount(myApp, document.getElementById("app"));
- */
-
 const $mount = (component, target) => {
  const el = typeof target === "string" ? document.querySelector(target) : target;
  if (!el) return;
@@ -451,7 +443,6 @@ const $mount = (component, target) => {
  return instance;
 };

-/** GLOBAL CORE REGISTRY */
 const SigProCore = { $, $watch, $html, $if, $for, $router, $mount };

 if (typeof window !== "undefined") {