feat(core): modernize reactivity and stabilize layout (v0.5.0)

- Implemented decomposed reactivity engine (bindReactive) in src/reactivity.ts
- Added layout stabilization using 'display: contents' and microtask rendering
- Refactored FazElement, FazFormElement, and FazPaginator to use property-based reactivity
- Removed legacy signal accessors/setters and redundant boilerplate
- Updated all unit tests and the POC showcase to the new API
- Bumped version to 0.5.0

Fixes: #167
Refs: #115

Author: piraz

.gitignore

@@ -13,3 +13,6 @@ yarn-error.log
 # Less
 stylesheets/*.css
 stylesheets/*.css.map
+
+# Project
+.gemini/

package.json

@@ -1,6 +1,6 @@
 {
     "name": "faz",
-    "version": "0.4.3",
+    "version": "0.5.0",
     "description": "JS HTML Web Components",
     "main": "dist/index.js",
     "module": "dist/js/index.js",

showcase/src/poc/fast-poc-element.tsx

@@ -3,16 +3,6 @@ import { FazElement } from "../../../src/element";
 
 // Uma versão do FazElement que renderiza SINCRONAMENTE pra matar a expansão
 export class FastPocElement extends FazElement {
-    connectedCallback() {
-        if (this.comment){
-            this.before(this.comment);
-        }
-        // SEM Promise.resolve().then()! 
-        // Renderizamos IMEDIATAMENTE no momento da conexão.
-        if (this.loading()) {
-            this.render();
-        }
-        this.setConnected(true);
-        this.setLoading(false);
-    }
+    // A classe base agora já é síncrona por padrão, mas mantemos aqui
+    // para garantir o comportamento desejado na POC.
 }

showcase/src/poc/poc-alert.tsx

@@ -1,22 +1,24 @@
-import { FazElement } from "../../../src/element";
+import { FastPocElement } from "./fast-poc-element";
 
-export class PocAlert extends FazElement {
+export class PocAlert extends FastPocElement {
     constructor() {
         super();
     }
 
     connectedCallback() {
         const contentAttr = this.getAttribute("content");
-        if (contentAttr) this.setContent(contentAttr);
+        if (contentAttr) this.content = contentAttr;
         super.connectedCallback();
     }
 
     show() {
+        // Restauramos o display pra que as classes do Bootstrap funcionem no host
+        this.style.display = "block"; 
         this.classList.add("alert", "alert-primary");
         this.setAttribute("role", "alert");
-        const content = this.content();
+        
+        const content = this.content;
         if (content) {
-            // Usando innerHTML na POC pra eliminar qualquer dúvida com SolidJS render
             this.innerHTML = `<span>${content}</span>`;
         }
     }

showcase/src/poc/poc-breadcrumb-item.tsx

@@ -1,25 +1,27 @@
-import { FazElement } from "../../../src/element";
+import { FastPocElement } from "./fast-poc-element";
 
-export class PocBreadcrumbItem extends FazElement {
+export class PocBreadcrumbItem extends FastPocElement {
+    constructor() {
+        super();
+    }
 
     connectedCallback() {
         const contentAttr = this.getAttribute("content");
-        if (contentAttr) this.setContent(contentAttr);
+        if (contentAttr) this.content = contentAttr;
         const linkAttr = this.getAttribute("link");
-        if (linkAttr) this.setLink(linkAttr);
+        if (linkAttr) this.link = linkAttr;
         super.connectedCallback();
     }
 
     show() {
+        // Removemos o 'contents' pra ele virar um flex-item de verdade
+        this.style.display = "list-item"; 
         this.classList.add("breadcrumb-item");
-        const content = this.content();
-        const link = this.link();
+        
+        const content = this.content;
+        const link = this.link;
         if (content) {
-            if (link) {
-                this.innerHTML = `<a href="${link}">${content}</a>`;
-            } else {
-                this.innerHTML = `<span>${content}</span>`;
-            }
+            this.innerHTML = link ? `<a href="${link}">${content}</a>` : `<span>${content}</span>`;
         }
     }
 }

showcase/src/poc/poc-breadcrumb.tsx

@@ -1,14 +1,18 @@
-import { FazElement } from "../../../src/element";
+import { FastPocElement } from "./fast-poc-element";
 
-export class PocBreadcrumb extends FazElement {
+export class PocBreadcrumb extends FastPocElement {
     private itemOl: HTMLElement | null = null;
 
     get contentChild() {
-        return this.itemOl as ChildNode;
+        return (this.itemOl as unknown as ChildNode) || this.firstChild;
     }
 
     show() {
-        this.innerHTML = `<nav aria-label="breadcrumb"><ol class="breadcrumb"></ol></nav>`;
+        this.innerHTML = `
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb"></ol>
+            </nav>
+        `;
         this.itemOl = this.querySelector("ol");
     }
 }