@jsweb/ui 1.2.8 → 1.3.1

package/.agents/skills/update-documentation/SKILL.md

@@ -0,0 +1,135 @@
+---
+name: update-documentation
+description: >-
+  Audits recent codebase changes in @jsweb/ui (src/, package.json, config files) and synchronizes all documentation files (README.md, PROJECT.md, SKILL.md, and CHANGELOG.md). Use this skill whenever the user asks to update, synchronize, or refresh documentation, or after adding/modifying directives, reactivity mechanisms, APIs, event modifiers, or releasing new versions.
+---
+
+# Update Documentation Skill (@jsweb/ui)
+
+This skill guides the agent through auditing codebase changes and systematically synchronizing all project documentation files (`README.md`, `PROJECT.md`, `SKILL.md`, `CHANGELOG.md`) to reflect the latest APIs, directives, modifiers, release notes, and architectural behaviors.
+
+---
+
+## Target Documentation Files
+
+| File                                                               | Audience                     | Purpose                                                                                                                                 | Language             |
+| :----------------------------------------------------------------- | :--------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- | :------------------- |
+| [`README.md`](file:///d:/Projetos/github/jsweb/ui/README.md)       | Developers & End Users       | Public GitHub/NPM documentation, quickstart, installation, directives reference table, and usage examples.                              | Portuguese / English |
+| [`PROJECT.md`](file:///d:/Projetos/github/jsweb/ui/PROJECT.md)     | Maintainers & Architecture   | Technical specification, core engine mechanics (Reactivity, Evaluator, Parser), architectural pillars, and requirements.                | Portuguese           |
+| [`SKILL.md`](file:///d:/Projetos/github/jsweb/ui/SKILL.md)         | AI Coding Agents             | Operational knowledge base installed via `npx skills add @jsweb/ui`, defining rules, directives, APIs, patterns, and agent constraints. | English              |
+| [`CHANGELOG.md`](file:///d:/Projetos/github/jsweb/ui/CHANGELOG.md) | All (Users, Maintainers, AI) | Curated chronological log of notable changes (Added, Changed, Deprecated, Removed, Fixed, Security) adhering to Keep a Changelog.       | Portuguese           |
+
+---
+
+## Workflow: Step-by-Step Procedure
+
+```mermaid
+flowchart TD
+    A["1. Inspect Git Changes & Source Code"] --> B["2. Compare Source with Current Docs"]
+    B --> C["3. Update README.md"]
+    B --> D["4. Update PROJECT.md"]
+    B --> E["5. Update SKILL.md"]
+    B --> F["6. Update CHANGELOG.md"]
+    C & D & E & F --> G["7. Verify Build & Copy with npm run build"]
+    G --> H["8. Report Summary to User"]
+```
+
+### Step 1: Inspect Changes and Current Source
+
+1. Check git status and recent diffs:
+   ```bash
+   git status
+   git diff HEAD
+   ```
+2. Inspect the core implementation files in `src/`:
+   - [`src/reactivity.ts`](file:///d:/Projetos/github/jsweb/ui/src/reactivity.ts): Check `reactive()`, `watch()`, `effect()`, `ReactiveEffect`, tracking, trigger behavior, bypassed types, or computed handling.
+   - [`src/parser.ts`](file:///d:/Projetos/github/jsweb/ui/src/parser.ts): Check directives (`:scope`, `:text`, `:bind`, `:if`, `:for`, `:key`, `:class`, `:style`, `:ref`, `:[attr]`, `@[event]`), event modifiers (`.prevent`, `.stop`, `.self`, `.outside`), and context helpers (`$refs`, `$emit`, `$index`, `$key`).
+   - [`src/evaluator.ts`](file:///d:/Projetos/github/jsweb/ui/src/evaluator.ts): Check expression sandboxing, `evaluate()`, and `evaluateEvent()`.
+   - [`src/index.ts`](file:///d:/Projetos/github/jsweb/ui/src/index.ts): Check public exports and global window attachments (`window.jsweb.ui`).
+   - [`package.json`](file:///d:/Projetos/github/jsweb/ui/package.json): Check version bumps, dependencies, entry points, or scripts.
+
+### Step 2: Identify Discrepancies Across Documentation
+
+Check whether any of the following changed:
+
+- **New or changed directives**: Did the syntax, prefix, or behavior change?
+- **New or changed event modifiers**: Are there new modifiers (e.g. `.debounce`, `.throttle`, `.once`) or modifications to existing ones?
+- **Reactivity enhancements**: Changes to deep reactivity, collections, watch options, or computed getters?
+- **API signatures**: Changes to parameters, options, or return types for `createScope`, `reactive`, or `watch`?
+- **Context helpers**: Any newly exposed helper (like `$parent`, `$root`, `$dispatch`, etc.)?
+- **Distribution / Build**: Changes to UMD/ESM paths, global variable name (`jsweb.ui`), or CDN URLs?
+
+### Step 3: Synchronize Each Documentation File
+
+#### A. Updating `README.md`
+
+- Keep the directive summary table up to date with exact syntax, shorthand, and clear examples.
+- Update code snippets demonstrating CDN standalone usage and ESM bundler usage.
+- Ensure the event modifiers and `$refs` / `$emit` section matches actual runtime behavior.
+- Document any breaking changes or version upgrades clearly.
+
+#### B. Updating `PROJECT.md`
+
+- Update the Technical Specifications (Section 3: Reatividade, Avaliador, Parser).
+- Keep Section 4 (Sintaxe e Diretivas) aligned with the exact implementation in `parser.ts`.
+- Document any architectural decisions (e.g., memory management, cleanup hooks, node recycling).
+
+#### C. Updating `SKILL.md` (Root)
+
+- Ensure YAML frontmatter `description` contains comprehensive trigger keywords.
+- Update the API Reference section with precise TypeScript signatures and return types.
+- Ensure the Template Directives reference accurately describes:
+  - Form controls supported by `:bind` (input types, select, checkbox, radio).
+  - Array and reconciliation behavior of `:for` and `:key`.
+  - Class and style object/array evaluation rules.
+  - `$refs` behavior (single element vs. nested `Map` in keyed loops).
+  - Event modifiers and their exact execution flow.
+- Maintain the "Critical Rules for AI Coding Agents" section (DOs and DON'Ts).
+
+#### D. Updating `CHANGELOG.md`
+
+- Adhere strictly to [Keep a Changelog](https://keepachangelog.com/pt-BR/1.1.0/) format.
+- Group changes under `[Unreleased]` (or the specific version header if tagging/bumping version):
+  - `### Added` for new features or capabilities.
+  - `### Changed` for changes in existing functionality.
+  - `### Deprecated` for soon-to-be removed features.
+  - `### Removed` for now removed features.
+  - `### Fixed` for any bug fixes.
+  - `### Security` in case of vulnerabilities.
+- Provide concise, user-focused descriptions with code references.
+
+### Step 4: Validate Formatting and Build
+
+1. Format all modified files with Prettier:
+   ```bash
+   npm run format
+   ```
+2. Run the build to ensure type safety and that `publish.js` syncs `README.md`, `LICENSE`, `SKILL.md`, and `CHANGELOG.md` to `dist/`:
+   ```bash
+   npm run build
+   ```
+3. Verify that `dist/README.md`, `dist/SKILL.md`, and `dist/CHANGELOG.md` contain the updated contents.
+
+### Step 5: Report to User
+
+Present a concise summary of:
+
+- Which files were updated ([README.md](file:///d:/Projetos/github/jsweb/ui/README.md), [PROJECT.md](file:///d:/Projetos/github/jsweb/ui/PROJECT.md), [SKILL.md](file:///d:/Projetos/github/jsweb/ui/SKILL.md), [CHANGELOG.md](file:///d:/Projetos/github/jsweb/ui/CHANGELOG.md)).
+- Specific sections added, modified, or removed in each file.
+- Confirmation that `npm run build` and `npm run format` passed cleanly.
+
+---
+
+## Documentation Checklist
+
+When updating documentation, verify each of these items:
+
+- [ ] All directives in `parser.ts` are listed in both long form (`ui:*`) and shorthand (`:*`).
+- [ ] All event modifiers supported in `processEventBinding` are documented.
+- [ ] `$refs` behavior is accurately described (Map instance; nested Map in `:for` loops with `:key`).
+- [ ] `$emit` parameters and CustomEvent details (`bubbles: true`, `composed: true`) are correct.
+- [ ] Code snippets use valid modern JavaScript/TypeScript syntax.
+- [ ] `CHANGELOG.md` has all notable modifications recorded under `[Unreleased]` or version tag.
+- [ ] Version numbers in examples or text match `package.json`.
+- [ ] Prettier formatting is applied (`npm run format`).
+- [ ] `npm run build` succeeds and copies updated files to `dist/`.

package/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.gemini

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "overrides": [{ "files": "*.md", "options": { "parser": "markdown" } }]
+}

package/CHANGELOG.md

@@ -0,0 +1,137 @@
+# Changelog
+
+Todas as alterações notáveis neste projeto serão documentadas neste arquivo.
+
+O formato é baseado em [Keep a Changelog](https://keepachangelog.com/pt-BR/1.1.0/) e este projeto adere ao [Semantic Versioning](https://semver.org/).
+
+---
+
+## [Unreleased]
+
+---
+
+## [1.3.1] - 2026-09-24
+
+### Added
+
+- **Tipagem Contextual `ThisType<T & ScopeContext>`**: Inclusão de `ThisType` na assinatura de `reactive` e `createScope`, fornecendo autocomplete e tipagem estrita de `this` em métodos e _getters_ de objetos literais, com acesso direto a `$refs`, `$emit` e `$el` como propriedades não-opcionais.
+- **Classe Base `Scope` e Interface `ScopeContext`**: Exportação da classe utilitária `Scope` e da interface `ScopeContext` para suporte nativo e tipado a arquiteturas orientadas a objetos (`class MyScope extends Scope`). Na classe `Scope`, `$el` e `$refs` são propriedades somente leitura (com `$refs` mantendo sua instância original de Map viva) e `$emit` como método `protected` com disparo nativo em `$el`, permitindo sobrescrita (`override`) nas subclasses.
+- **Tipagem Genérica em `watch<T>`**: Aprimoramento da assinatura de `watch` para inferência de tipos em `newValue` e `oldValue`.
+- **Skill Aberta para Agentes de IA (`SKILL.md`)**: Arquivo [`SKILL.md`](./SKILL.md) na raiz do projeto para integração direta com agentes de IA via `npx skills add @jsweb/ui`.
+- **Skill de Workspace (`update-documentation`)**: Skill em [`.agents/skills/update-documentation/SKILL.md`](./.agents/skills/update-documentation/SKILL.md) para auditoria e sincronização contínua de documentação.
+- **Histórico Semântico de Versões (`CHANGELOG.md`)**: Arquivo [`CHANGELOG.md`](./CHANGELOG.md) baseado no padrão Keep a Changelog.
+- **Automação de Build e Metadados**: Atualização do script [`publish.js`](./publish.js) para sincronizar `SKILL.md` e `CHANGELOG.md` na pasta `dist/` durante o build do pacote NPM.
+- **Script de Publicação**: Adicionado script `npm run push` no `package.json` para automatizar o envio de tags git e publicação no NPM.
+
+---
+
+## [1.3.0] - 2026-09-18
+
+### Added
+
+- **Diretiva `:ref` / `ui:ref`**: Indexação reativa de elementos DOM no helper contextual `$refs` (`Map`).
+- **Refs Aninhadas em Listas**: Em loops `:for` com `:key`, `$refs.get(name)` retorna um `Map` aninhado indexado pela chave do item (`$key`).
+- **Cleanup Automático de Refs**: Remoção de referências do `$refs` quando nós são destruídos por `:if` ou `:for`.
+- **Modificador de Evento `.outside`**: Captura cliques e eventos fora do elemento (ideal para modais e dropdowns) com remoção automática do listener no `document` ao desconectar o nó.
+- **Reconciliação e Reciclagem de Nós DOM em Listas**: Rastreamento de nós pelo `:key` em `:for`, reaproveitando instâncias existentes e evitando reflows desnecessários.
+
+---
+
+## [1.2.8] - 2026-05-20
+
+### Refactored
+
+- Limpeza de imports e remoção de código não utilizado no parser e no core.
+
+---
+
+## [1.2.7] - 2026-05-20
+
+### Added
+
+- Suporte aprimorado à função `watch` com observação profunda (_deep traverse_) e suporte a `{ immediate: true }`.
+
+---
+
+## [1.2.6] - 2026-05-20
+
+### Added
+
+- **Diretiva `:class` / `ui:class`**: Bind reativo de classes CSS via objeto booleano, array ou string, preservando classes estáticas.
+- **Diretiva `:style` / `ui:style`**: Bind reativo para estilos inline com limpeza automática de propriedades removidas.
+
+---
+
+## [1.2.5] - 2026-05-18
+
+### Fixed
+
+- Tratamento de erros nas funções de avaliação (`evaluate` e `evaluateEvent`).
+- Ajuste no contexto `this` para getters em propriedades computadas.
+
+---
+
+## [1.2.4] - 2026-05-18
+
+### Added
+
+- Suporte automático a propriedades computadas via _getters_ nativos (`get prop() { ... }`) em objetos envolvidos por `reactive()`.
+
+---
+
+## [1.2.3] - 2026-05-18
+
+### Added
+
+- Script de automação `preversion` no `package.json` para executar o build antes de gerar versões.
+
+### Refactored
+
+- Remoção da função legada `hasDirective`.
+
+---
+
+## [1.2.2] - 2026-05-18
+
+### Refactored
+
+- Simplificação do logging de avisos no motor de avaliação.
+
+---
+
+## [1.2.1] - 2026-05-17
+
+### Added
+
+- Script `publish.js` para geração de pacote mínimo em `dist/` e automação de publicação NPM.
+
+---
+
+## [1.2.0] - 2026-05-09
+
+### Added
+
+- Exportação da API `watch(source, callback, options?)` para observação de estados reativos.
+- Reorganização dos exports principais (`createScope`, `reactive`, `watch`).
+
+---
+
+## [1.1.0] - 2026-05-09
+
+### Added
+
+- Injeção do helper contextual `$emit(eventName, detail?)` para disparo de `CustomEvent` nativos (`bubbles: true`, `composed: true`).
+- Padronização do nome do método de montagem para `createScope`.
+
+---
+
+## [1.0.0] - 2026-05-07
+
+### Added
+
+- Primeiro lançamento estável do `@jsweb/ui`.
+- Motor de reatividade de grão fino baseado em `Proxy` e `ReactiveEffect` (sem Virtual DOM).
+- Avaliador de expressões dinâmicas em sandbox.
+- Diretivas fundamentais: `ui:scope`, `ui:text`, `ui:bind`, `ui:if`, `ui:for`, `ui:[attr]` e `ui@[event]`.
+- Modificadores de evento `.prevent`, `.stop` e `.self`.
+- Distribuição dual: ESM para bundlers e UMD/Standalone para uso direto via CDN.

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 jsweb
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 jsweb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/PROJECT.md

@@ -0,0 +1,107 @@
+# Especificação Técnica: Micro-Framework JS/TS (Codinome: @jsweb/ui)
+
+## 1. Visão Geral
+
+**@jsweb/ui** é um micro-framework frontend focado em _Progressive Enhancement_ e DX (Developer Experience). Ele deve oferecer a reatividade moderna de frameworks como Vue 3 (Composition API) e a simplicidade de uso direto no HTML do Alpine.js, sem a necessidade obrigatória de um build step, mas totalmente otimizado para árvores de dependência (tree-shaking) quando usado em ambientes build-tooling.
+
+## 2. Pilares Arquiteturais
+
+- **No Virtual DOM:** Utilização de reatividade de grão fino (Fine-grained reactivity) via `Proxy` ou `Signals`. Atualizações diretas no DOM real.
+- **Dual Distribution:**
+  - **Standalone:** Arquivo único (IIFE/UMD) para inclusão via `<script src="...">`.
+  - **Module:** Pacote ESM com exports nomeados para suporte a Tree-Shaking.
+- **Hybrid Context:** Suporte a definição de estado via Objetos Literais (POJOs) tipados contextualmente via `ThisType<T & ScopeContext>` ou Classes TypeScript estendendo a classe base `Scope`.
+- **Template Engine:** Baseado em atributos customizados no HTML (`ui:*` para diretivas e `ui@*` para eventos, com shorthands `@`, `:`).
+
+## 3. Especificações do Motor (Core)
+
+### A. Sistema de Reatividade
+
+- **Mecanismo:** Proxy-based em conjunto com a classe `ReactiveEffect`. O estado é interceptado para disparar "efeitos" com gerenciamento preciso de dependências, controle de ciclo de vida (`stop`, `cleanup`) e otimizado contra vazamento de memória.
+- **Global State:** Deve ser possível exportar um objeto reativo de um arquivo e importá-lo em múltiplos componentes/contextos, tornando-o um estado compartilhado.
+- **Global Effect:** Deve ser possível criar efeitos globais que reajam a mudanças em qualquer estado compartilhado.
+- **Local State:** Deve ser possível criar estados locais que reajam a mudanças apenas dentro do escopo do componente.
+- **Local Effect:** Deve ser possível criar efeitos locais que reajam a mudanças apenas dentro do escopo do componente.
+- **Lifecycle:** Deve ser possível criar efeitos que reajam a mudanças no ciclo de vida do componente.
+- **Cleanup:** Deve ser possível limpar os efeitos quando os componentes forem removidos do DOM.
+- **Watchers:** Implementado via API `watch`, permitindo reagir a mudanças em propriedades com acesso ao valor anterior/novo e disparo imediato (`immediate`).
+- **Computed:** Deve ser possível criar propriedades computadas que reajam a mudanças em propriedades específicas do estado (via _getters_ nativos).
+- **TypeScript First DX:** Tipagem estrita de `this` via `ThisType<T & ScopeContext>` para objetos literais e classe utilitária `Scope` para POJOs orientados a objetos.
+- **Composition API:** Deve ser possível usar a Composition API para criar efeitos e reatividade e aninhar efeitos e reatividade em outros efeitos e reatividade.
+
+### B. Avaliador de Expressões (The Evaluator)
+
+- **Implementação:** Uso de `new Function()` com `with(this)`.
+- **Estratégia de Execução:** Para avaliar expressões declaradas no HTML de forma encapsulada (sandboxed):
+  1. O motor encapsula o objeto/escopo em um Proxy de Contexto para resolução de dependências.
+  2. Constrói a função dinâmica: `new Function('with(this) { ... }')`.
+  3. Executa a função passando o escopo reativo atrelado ao `this`.
+  4. Para eventos, também expõe a variável nativa `$event`.
+
+### C. Parser de Template
+
+- **Traversal:** Utilizar `TreeWalker` ou recursão otimizada para identificar diretivas.
+- **Limpeza:** Atributos `ui:*`, `ui:@*`, `@*` e `:*` devem ser removidos do DOM após a inicialização para manter o HTML limpo.
+
+## 4. Sintaxe e Diretivas
+
+| Diretiva     | Atalho     | Descrição                                                                            | Exemplo                                    |
+| :----------- | :--------- | :----------------------------------------------------------------------------------- | :----------------------------------------- |
+| `ui:scope`   | `:scope`   | Define o objeto de estado/contexto para o elemento e seus filhos.                    | `<div :scope="{ count: 0 }">`              |
+| `ui:text`    | `:text`    | Sincroniza o `textContent` com uma variável ou expressão.                            | `<span :text="count"></span>`              |
+| `ui:bind`    | `:bind`    | Two-way data binding para inputs, checkboxes, radios, selects e textareas.           | `<input :bind="name">`                     |
+| `ui:if`      | `:if`      | Adiciona/Remove o elemento do DOM (via Comment Node placeholder).                    | `<div :if="count > 0">`                    |
+| `ui:for`     | `:for`     | Renderiza uma lista de elementos a partir de um array (`in` ou `of`).                | `<li :for="item of items">`                |
+| `ui:key`     | `:key`     | Chave de reconciliação para reaproveitamento e reciclagem de nós DOM em listas.      | `<li :for="item of items" :key="item.id">` |
+| `ui:class`   | `:class`   | Bind dinâmico para classes CSS (objeto booleano, array ou string).                   | `<div :class="{ active: isActive }">`      |
+| `ui:style`   | `:style`   | Bind dinâmico para estilos inline (objeto chave/valor de estilos CSS).               | `<div :style="{ color: textColor }">`      |
+| `ui:ref`     | `:ref`     | Indexa elementos HTML em um Map acessível via `$refs` (suporta chaves de lista).     | `<input :ref="myInput">`                   |
+| `ui:[attr]`  | `:[attr]`  | Bind de atributos HTML nativos com suporte a valores booleanos (ex: disabled, href). | `<button :disabled="count > 10">`          |
+| `ui@[event]` | `@[event]` | Event listeners com suporte a `$event` e modificadores encadeados.                   | `<button @click.prevent="save">`           |
+
+### Modificadores de Eventos
+
+- `.prevent`: Executa `$event.preventDefault()`.
+- `.stop`: Executa `$event.stopPropagation()`.
+- `.self`: Executa o manipulador apenas se `$event.target === el`.
+- `.outside`: Executa o manipulador quando o evento ocorre fora do elemento (com cleanup de listener no document ao desconectar o nó).
+
+### Helpers e Variáveis Contextuais
+
+- `$refs`: Instância de `Map` nativa indexando elementos referenciados (elementos únicos ou Maps aninhados para itens de loops com `:key`).
+- `$emit(eventName, detail?)`: Despacha CustomEvents (`bubbles: true`, `composed: true`) a partir do escopo atual.
+- `$event`: Objeto nativo do evento disparado, disponível nas expressões de eventos ou repassado como 1º argumento na sintaxe de referência direta.
+- `$index`: Índice numérico atual da iteração em loops `ui:for` / `:for`.
+
+## 5. Requisitos de Engenharia (Instruções para a IA)
+
+- **Linguagem:** TypeScript Estrito.
+- **Bundle Tool:** Vite (configurado para `build.lib` com formatos `es` e `umd`).
+- **Memory Management:** Garantir o `cleanup` de event listeners e observadores quando elementos `ui:if` ou `ui:for` forem removidos.
+- **Zero Dependencies:** O core não deve ter dependências externas de runtime.
+- **Estilo de Código:** Funcional, modular, com comentários JSDoc claros para explicar o funcionamento interno do Proxy, do Parser e das diretivas.
+
+---
+
+### Stack de Build (Vite)
+
+Para o `vite.config.ts`, utilize esta abordagem para satisfazer os requisitos de "Standalone" e "Module":
+
+```typescript
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: './src/index.ts',
+      name: 'jswebui',
+      fileName: (format) => `ui.${format}.js`,
+      formats: ['es', 'umd'],
+    },
+    sourcemap: true,
+    minify: 'terser',
+  },
+  plugins: [dts()], // Gera os tipos .d.ts automaticamente
+})
+```