{"_id":"@adalink/spark-std","_rev":"7-e0540be2921ee15db00146a4215890e9","name":"@adalink/spark-std","dist-tags":{"latest":"1.3.4"},"versions":{"1.2.3":{"name":"@adalink/spark-std","version":"1.2.3","keywords":["web-components","custom-elements","decorators","dom","event","standard-library","web-development","reactive","shadow-dom"],"author":{"url":"https://github.com/deMGoncalves","name":"Cleber de Moraes Goncalves","email":"cleber.engineer@gmail.com"},"license":"Apache-2.0","_id":"@adalink/spark-std@1.2.3","maintainers":[{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"}],"homepage":"https://github.com/Adalink-ai/spark_std#readme","bugs":{"url":"https://github.com/Adalink-ai/spark_std/issues"},"dist":{"shasum":"2b0886abd4731b90651983499ca138774ae0f1c4","tarball":"https://registry.npmjs.org/@adalink/spark-std/-/spark-std-1.2.3.tgz","fileCount":9,"integrity":"sha512-RFHjFSVLfKn8goZyIQXBMFgRaoswoPpgzTDDmDtp5Z/p1QVwPlDKwYJwipHKGLiTbgaL/1FS/m5cIvPHhkrwoQ==","signatures":[{"sig":"MEQCIA1qetYZ0opKUrD+KGsK0g6GHq9JKbmIWFAdGYomN7qJAiBXzwbKEFjGc8RP/THxzrlYATmttURlshOPu7axxg3R1A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37041},"type":"module","exports":{"./dom":{"import":"./dist/dom.js","require":"./dist/dom.cjs"},"./event":{"import":"./dist/event.js","require":"./dist/event.cjs"},"./directive":{"import":"./dist/directive.js","require":"./dist/directive.cjs"}},"gitHead":"ce87a9fc4e5c741756c601cff2c3706ed933893b","scripts":{"dev":"vite","lint":"biome check .","build":"vite build","prepare":"husky"},"_npmUser":{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"},"repository":{"url":"git+https://github.com/Adalink-ai/spark_std.git","type":"git"},"_npmVersion":"10.8.2","description":"Standard library utilities for web development","directories":{},"_nodeVersion":"20.20.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0","husky":"^9.1.7","esbuild":"^0.27.2","lint-staged":"^16.4.0","@biomejs/biome":"2.4.7","@commitlint/cli":"^20.5.0","@commitlint/config-conventional":"^20.5.0"},"_npmOperationalInternal":{"tmp":"tmp/spark-std_1.2.3_1773780815468_0.19151064927118044","host":"s3://npm-registry-packages-npm-production"}},"1.2.4":{"name":"@adalink/spark-std","version":"1.2.4","keywords":["web-components","custom-elements","decorators","dom","event","standard-library","web-development","reactive","shadow-dom"],"author":{"url":"https://github.com/deMGoncalves","name":"Cleber de Moraes Goncalves","email":"cleber.engineer@gmail.com"},"license":"Apache-2.0","_id":"@adalink/spark-std@1.2.4","maintainers":[{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"}],"homepage":"https://github.com/Adalink-ai/spark_std#readme","bugs":{"url":"https://github.com/Adalink-ai/spark_std/issues"},"dist":{"shasum":"51e86830b9006d658a240929ce7c00f6bd4c506c","tarball":"https://registry.npmjs.org/@adalink/spark-std/-/spark-std-1.2.4.tgz","fileCount":9,"integrity":"sha512-wXkjk3LdfwzTMi5jIvnnUzA0WPOuSNixJlgProjdDCRsJfHLl9LuJwG1RGlsOtjW7TQbw6W6dPjjNu/TMA++0Q==","signatures":[{"sig":"MEUCIQCh+VnoJy9up5EldHL3a//QUbdr6dnw7pWg7AzB580jaAIgUSAypD/yqVk+NEuI+Pj6Bd4jVdKxY8Eu49imbODJBtE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37049},"type":"module","exports":{"./dom":{"import":"./dist/dom.js","require":"./dist/dom.cjs"},"./event":{"import":"./dist/event.js","require":"./dist/event.cjs"},"./directive":{"import":"./dist/directive.js","require":"./dist/directive.cjs"}},"gitHead":"ad1b2f1c8e52e2356cdbe8eba37b1c6f3aefda71","scripts":{"dev":"vite","lint":"biome check .","build":"vite build","prepare":"husky"},"_npmUser":{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"},"repository":{"url":"git+https://github.com/Adalink-ai/spark_std.git","type":"git"},"_npmVersion":"10.8.2","description":"Standard library utilities for web development","directories":{},"_nodeVersion":"20.20.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0","husky":"^9.1.7","esbuild":"^0.27.2","lint-staged":"^16.4.0","@biomejs/biome":"2.4.7","@commitlint/cli":"^20.5.0","@commitlint/config-conventional":"^20.5.0"},"_npmOperationalInternal":{"tmp":"tmp/spark-std_1.2.4_1773780846934_0.21989010648110074","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@adalink/spark-std","version":"1.3.0","keywords":["web-components","custom-elements","decorators","dom","event","standard-library","web-development","reactive","shadow-dom"],"author":{"url":"https://github.com/deMGoncalves","name":"Cleber de Moraes Goncalves","email":"cleber.engineer@gmail.com"},"license":"Apache-2.0","_id":"@adalink/spark-std@1.3.0","maintainers":[{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"}],"homepage":"https://github.com/Adalink-ai/spark_std#readme","bugs":{"url":"https://github.com/Adalink-ai/spark_std/issues"},"dist":{"shasum":"07eb70f06d33348fd4258a947a3f5f38baf9560a","tarball":"https://registry.npmjs.org/@adalink/spark-std/-/spark-std-1.3.0.tgz","fileCount":9,"integrity":"sha512-klk1oTIwuBOFWtn/eqFYNuzYOs2dsBVoj6uMLX9KUspO5SvAVZIkVCHlOj8wqVrq4oit8v3vlXQgfmCJbFvGMw==","signatures":[{"sig":"MEUCIQDvXiFOUdb563Y151olHQfDw27izxGhGi5ljK2N1qGMzwIgG6lJkvsos2uBFwIXLJ2qckPILF7X/XbECvmuKJZXyB4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36699},"type":"module","exports":{"./dom":{"import":"./dist/dom.js","require":"./dist/dom.cjs"},"./event":{"import":"./dist/event.js","require":"./dist/event.cjs"},"./directive":{"import":"./dist/directive.js","require":"./dist/directive.cjs"}},"gitHead":"edcff930fe7f085e3d152b8b921a4e9c855eeb9b","scripts":{"dev":"vite","lint":"biome check .","build":"vite build","prepare":"husky"},"_npmUser":{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"},"repository":{"url":"git+https://github.com/Adalink-ai/spark_std.git","type":"git"},"_npmVersion":"10.8.2","description":"Standard library utilities for web development","directories":{},"_nodeVersion":"20.20.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0","husky":"^9.1.7","esbuild":"^0.27.2","lint-staged":"^16.4.0","@biomejs/biome":"2.4.7","@commitlint/cli":"^20.5.0","@commitlint/config-conventional":"^20.5.0"},"_npmOperationalInternal":{"tmp":"tmp/spark-std_1.3.0_1773781009933_0.7880606041495277","host":"s3://npm-registry-packages-npm-production"}},"1.3.1":{"name":"@adalink/spark-std","version":"1.3.1","keywords":["web-components","custom-elements","decorators","dom","event","standard-library","web-development","reactive","shadow-dom"],"author":{"url":"https://github.com/deMGoncalves","name":"Cleber de Moraes Goncalves","email":"cleber.engineer@gmail.com"},"license":"Apache-2.0","_id":"@adalink/spark-std@1.3.1","maintainers":[{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"}],"homepage":"https://github.com/Adalink-ai/spark_std#readme","bugs":{"url":"https://github.com/Adalink-ai/spark_std/issues"},"dist":{"shasum":"04c417909f989c649b544e49f0c2fcac2fa19a35","tarball":"https://registry.npmjs.org/@adalink/spark-std/-/spark-std-1.3.1.tgz","fileCount":9,"integrity":"sha512-NlHSJLWycv94VpYmb0Tiz29OUqYHZl4Njwllq0QFb2/v4sOfzJKmpPa1wRGc5qvIq1DNKjXYb+AK02T1OniuhA==","signatures":[{"sig":"MEQCIBd5BVgWTk72OHjpHHoCk78eaJCpH/4mHvI4sqsA1BC2AiAxHvC/f01ZrdLw8evLe9lzYSWCaCjvzAK9f+zo6XTh4A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36515},"type":"module","exports":{"./dom":{"import":"./dist/dom.js","require":"./dist/dom.cjs"},"./event":{"import":"./dist/event.js","require":"./dist/event.cjs"},"./directive":{"import":"./dist/directive.js","require":"./dist/directive.cjs"}},"gitHead":"848de7d0be575c04d9405a6adc5c664f136612df","scripts":{"dev":"vite","lint":"biome check .","build":"vite build","prepare":"husky"},"_npmUser":{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"},"repository":{"url":"git+https://github.com/Adalink-ai/spark_std.git","type":"git"},"_npmVersion":"10.8.2","description":"Standard library utilities for web development","directories":{},"_nodeVersion":"20.20.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0","husky":"^9.1.7","esbuild":"^0.27.2","lint-staged":"^16.4.0","@biomejs/biome":"2.4.7","@commitlint/cli":"^20.5.0","@commitlint/config-conventional":"^20.5.0"},"_npmOperationalInternal":{"tmp":"tmp/spark-std_1.3.1_1773781111504_0.07468967854747377","host":"s3://npm-registry-packages-npm-production"}},"1.3.2":{"name":"@adalink/spark-std","version":"1.3.2","keywords":["web-components","custom-elements","decorators","dom","event","standard-library","web-development","reactive","shadow-dom"],"author":{"url":"https://github.com/deMGoncalves","name":"Cleber de Moraes Goncalves","email":"cleber.engineer@gmail.com"},"license":"Apache-2.0","_id":"@adalink/spark-std@1.3.2","maintainers":[{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"}],"homepage":"https://github.com/Adalink-ai/spark_std#readme","bugs":{"url":"https://github.com/Adalink-ai/spark_std/issues"},"dist":{"shasum":"1b117504509fc426587b84364f86961f08971c6f","tarball":"https://registry.npmjs.org/@adalink/spark-std/-/spark-std-1.3.2.tgz","fileCount":9,"integrity":"sha512-FHhl5kqIYR0LLSHWm6n70ZEpUbPpLgjqTGVdCKb2aU+wL8qfsQFvABNP7IahxbpOhO7H1xIn5FmHi0F1AYT10g==","signatures":[{"sig":"MEUCICf9YWR63W5C1wOGgK/LpYJR3YTzNf4IOqw/EGYCRijZAiEAhbSCbJ8RSdg7Ha2gkLJQ75Tvk1WtVyu8+PKkl+L4GDs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37004},"type":"module","exports":{"./dom":{"import":"./dist/dom.js","require":"./dist/dom.cjs"},"./event":{"import":"./dist/event.js","require":"./dist/event.cjs"},"./directive":{"import":"./dist/directive.js","require":"./dist/directive.cjs"}},"gitHead":"c971e57797cbfd03e6b17436703ca5867a65b8e4","scripts":{"dev":"vite","lint":"biome check .","build":"vite build","prepare":"husky"},"_npmUser":{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"},"repository":{"url":"git+https://github.com/Adalink-ai/spark_std.git","type":"git"},"_npmVersion":"10.8.2","description":"Standard library utilities for web development","directories":{},"_nodeVersion":"20.20.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0","husky":"^9.1.7","esbuild":"^0.27.2","lint-staged":"^16.4.0","@biomejs/biome":"2.4.7","@commitlint/cli":"^20.5.0","@commitlint/config-conventional":"^20.5.0"},"_npmOperationalInternal":{"tmp":"tmp/spark-std_1.3.2_1773781178282_0.25258227517695864","host":"s3://npm-registry-packages-npm-production"}},"1.3.3":{"name":"@adalink/spark-std","version":"1.3.3","keywords":["web-components","custom-elements","decorators","dom","event","standard-library","web-development","reactive","shadow-dom"],"author":{"url":"https://github.com/deMGoncalves","name":"Cleber de Moraes Goncalves","email":"cleber.engineer@gmail.com"},"license":"Apache-2.0","_id":"@adalink/spark-std@1.3.3","maintainers":[{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"}],"homepage":"https://github.com/Adalink-ai/spark_std#readme","bugs":{"url":"https://github.com/Adalink-ai/spark_std/issues"},"dist":{"shasum":"17d549443a4d8ccf88a3e12f9e9e57211c2b56c9","tarball":"https://registry.npmjs.org/@adalink/spark-std/-/spark-std-1.3.3.tgz","fileCount":13,"integrity":"sha512-WhA/bvd4H21LUV7DJgjX9H7cLxg1/7Zf9cGMSgEzEbENIA/RyzRAreUhwjcp2J4dZ482tEIiRMHwEBWey+lScQ==","signatures":[{"sig":"MEUCIGoygGGWsRi6qTUlHxjHbOxvviB0njisb5C7InbD5PeQAiEAuHZCqak65iwp5oVqzN4sd0EhwJYK9TowoV9VZ4LPo/c=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44457},"type":"module","exports":{"./dom":{"import":"./dist/dom.js","require":"./dist/dom.cjs"},"./event":{"import":"./dist/event.js","require":"./dist/event.cjs"},"./directive":{"import":"./dist/directive.js","require":"./dist/directive.cjs"},"./directive/attributeChanged":{"import":"./dist/directive/attributeChanged.js","require":"./dist/directive/attributeChanged.cjs"}},"gitHead":"a839b60f8c9a8112ea23ef5966a132fe6cb0344c","scripts":{"dev":"vite","lint":"biome check .","build":"vite build","prepare":"husky"},"_npmUser":{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"},"repository":{"url":"git+https://github.com/Adalink-ai/spark_std.git","type":"git"},"_npmVersion":"10.8.2","description":"Standard library utilities for web development","directories":{},"_nodeVersion":"20.20.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.0","husky":"^9.1.7","esbuild":"^0.27.2","lint-staged":"^16.4.0","@biomejs/biome":"2.4.7","@commitlint/cli":"^20.5.0","@commitlint/config-conventional":"^20.5.0"},"_npmOperationalInternal":{"tmp":"tmp/spark-std_1.3.3_1774028641649_0.17054330400923057","host":"s3://npm-registry-packages-npm-production"}},"1.3.4":{"name":"@adalink/spark-std","version":"1.3.4","description":"Standard library utilities for web development","type":"module","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/Adalink-ai/spark_std.git"},"bugs":{"url":"https://github.com/Adalink-ai/spark_std/issues"},"homepage":"https://github.com/Adalink-ai/spark_std#readme","author":{"name":"Cleber de Moraes Goncalves","email":"cleber.engineer@gmail.com","url":"https://github.com/deMGoncalves"},"exports":{"./directive":{"import":"./dist/directive.js","require":"./dist/directive.cjs"},"./directive/attributeChanged":{"import":"./dist/attributeChanged.js","require":"./dist/attributeChanged.cjs"},"./dom":{"import":"./dist/dom.js","require":"./dist/dom.cjs"},"./event":{"import":"./dist/event.js","require":"./dist/event.cjs"}},"keywords":["web-components","custom-elements","decorators","dom","event","standard-library","web-development","reactive","shadow-dom"],"devDependencies":{"@biomejs/biome":"2.4.7","@commitlint/cli":"^20.5.0","@commitlint/config-conventional":"^20.5.0","esbuild":"^0.27.2","husky":"^9.1.7","lint-staged":"^16.4.0","vite":"^8.0.0"},"scripts":{"build":"vite build","dev":"vite","lint":"biome check .","prepare":"husky"},"_id":"@adalink/spark-std@1.3.4","gitHead":"cb116d8ccc04e97c5921f71ba8a331df0e33d69c","_nodeVersion":"20.20.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-Z+ZAVzYtMBbJ2JYpV9y2ECpjBTcap/NqPhlvZDGe6+MrGi4ttbU0FOuqOk8fT2NKwjCbeeyBu7uhS2LkU8sNxA==","shasum":"1c6ee28ede47ee7a3c09617601c53078a5b62673","tarball":"https://registry.npmjs.org/@adalink/spark-std/-/spark-std-1.3.4.tgz","fileCount":13,"unpackedSize":44437,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID++WqDiFcZtu3ORkLj22YPlAbRBTAQilHABwTXkif2wAiEAzxl6fPIEUrMjc6IEF7O3CWdof8ob2qwukuBLI3hE4p4="}]},"_npmUser":{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"},"directories":{},"maintainers":[{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/spark-std_1.3.4_1774030255669_0.6525109562805345"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-17T20:53:35.401Z","modified":"2026-03-20T18:10:55.963Z","1.2.3":"2026-03-17T20:53:35.630Z","1.2.4":"2026-03-17T20:54:07.077Z","1.3.0":"2026-03-17T20:56:50.113Z","1.3.1":"2026-03-17T20:58:31.663Z","1.3.2":"2026-03-17T20:59:38.457Z","1.3.3":"2026-03-20T17:44:01.791Z","1.3.4":"2026-03-20T18:10:55.826Z"},"bugs":{"url":"https://github.com/Adalink-ai/spark_std/issues"},"author":{"name":"Cleber de Moraes Goncalves","email":"cleber.engineer@gmail.com","url":"https://github.com/deMGoncalves"},"license":"Apache-2.0","homepage":"https://github.com/Adalink-ai/spark_std#readme","keywords":["web-components","custom-elements","decorators","dom","event","standard-library","web-development","reactive","shadow-dom"],"repository":{"type":"git","url":"git+https://github.com/Adalink-ai/spark_std.git"},"description":"Standard library utilities for web development","maintainers":[{"name":"cleiton.couto","email":"cleiton.couto@adalink.ai"}],"readme":"# ⚡ Spark Standard Library\n\n[![npm version](https://img.shields.io/npm/v/@adalink/spark-std?style=flat-square)](https://www.npmjs.com/package/@adalink/spark-std)\n[![License](https://img.shields.io/npm/l/@adalink/spark-std?style=flat-square)](LICENSE)\n[![Build Status](https://img.shields.io/github/actions/workflow/status/Adalink-ai/spark_std/ci.yml?style=flat-square)](https://github.com/Adalink-ai/spark_std/actions)\n[![Code Style](https://img.shields.io/badge/code_style-biome-purple?style=flat-square)](https://biomejs.dev)\n[![Ecosystem](https://img.shields.io/badge/Spark_Ecosystem-compatible-blue?style=flat-square)](https://github.com/Adalink-ai)\n\n**Standard library utilities for web development. Zero dependencies, tree-shakeable packages.**\n\n---\n\n## 📖 What is Spark?\n\nSpark is a modern, lightweight standard library designed to revolutionize how you build web applications. Built on native Web Components APIs, it provides powerful declarative utilities for creating reactive, maintainable applications without framework overhead.\n\n### 🎯 Why Choose Spark?\n\n- **Zero Dependencies** - No runtime dependencies, just pure Web Platform APIs\n- **Declarative API** - Describe *what* your components do, not *how* they do it\n- **Framework Agnostic** - Works with any framework or vanilla JavaScript\n- **Performance First** - Optimized for speed with minimal bundle size (~2KB)\n- **Developer Experience** - Clean, intuitive decorator-based API\n- **Production Ready** - Battle-tested in real-world applications\n\n### 🚀 Perfect For\n\n- **Web Components Projects** - Enhance native Web Components with powerful decorators\n- **Progressive Enhancement** - Build on web standards, not frameworks\n- **Performance-Critical Apps** - Minimal overhead, maximum speed\n- **Learning Modern APIs** - Learn Web Components with a friendly API\n- **Micro-Frontends** - Isolated components with clean interfaces\n\n---\n\n## ✨ Key Features\n\n### 🎯 Declarative First\n\nDescribe your components' behavior declaratively, not imperatively:\n\n```javascript\n// Imperative (traditional)\nclass MyComponent extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: \"open\" });\n    this.shadowRoot.addEventListener(\"click\", this.handleClick.bind(this));\n    this.render();\n  }\n\n  handleClick() { /* ... */ }\n  render() { /* ... */ }\n}\n\n// Declarative (Spark)\n@paint(template, styles)\nclass MyComponent extends HTMLElement {\n  @event.click(\"button\")\n  handleClick() { /* ... */ }\n}\n```\n\n### 📦 Tree-Shakeable\n\nOnly import what you need:\n\n```javascript\n// Only imports what you use (~2KB)\nimport { define, attributeChanged } from \"@adalink/spark-std/directive\";\nimport { paint, html } from \"@adalink/spark-std/dom\";\n```\n\n### ⚡ High Performance\n\n- Adopted stylesheets (parse once, reuse everywhere)\n- Event delegation (single listener per component)\n- Lazy rendering (only when needed)\n- No virtual DOM overhead\n\n---\n\n## 🔗 Integração com Spark Ecosystem\n\nO Spark Std é a fundação do Spark Ecosystem, trabalhando em harmonia com outras bibliotecas Spark para criar aplicações web reativas completas.\n\n### 📦 Pacotes Relacionados\n\n**[@adalink/spark-echo](https://github.com/Adalink-ai/spark_echo)** - Sistema de comunicação reativa entre componentes\n\nUse Spark Echo para adicionar comunicação reativa aos seus componentes criados com Spark Std:\n\n```javascript\nimport { define, paint, html, css } from \"@adalink/spark-std/directive\";\nimport { paint as paintDom, html as htmlDom, css as cssDom } from \"@adalink/spark-std/dom\";\nimport { event } from \"@adalink/spark-std/event\";\nimport Echo from \"@adalink/spark-echo\";\n\n@define(\"spark-message-box\")\n@paintDom(template, styles)\nclass MessageBox extends Echo(HTMLElement) {\n  #message = \"\";\n\n  get message() {\n    return this.#message;\n  }\n\n  set message(value) {\n    this.#message = value;\n    this.dispatchEvent(new CustomEvent(\"message-changed\", {\n      detail: this.#message,\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  @event.click(\"button.send\")\n  sendMessage() {\n    this.message = this.shadowRoot.querySelector(\"input\").value;\n  }\n}\n\n// Outro componente que ouve as mudanças\n@define(\"spark-display\")\n@paintDom(displayTemplate, displayStyles)\nclass Display extends Echo(HTMLElement) {\n  #displayValue = \"\";\n\n  // Declarative event arc via HTML\n  // <spark-display on=\"*message-changed:method/update\"></spark-display>\n\n  update({ detail }) {\n    this.#displayValue = detail;\n    this.render();\n  }\n\n  render() {\n    this.shadowRoot.innerHTML = `<div>${this.#displayValue}</div>`;\n  }\n}\n\nfunction template(component) {\n  return htmlDom`\n    <div class=\"message-box\">\n      <input type=\"text\" placeholder=\"Digite uma mensagem\">\n      <button class=\"send\">Enviar</button>\n    </div>\n  `;\n}\n\nfunction styles(component) {\n  return cssDom`\n    .message-box {\n      display: flex;\n      gap: 0.5rem;\n    }\n    input {\n      flex: 1;\n      padding: 0.5rem;\n    }\n    button {\n      padding: 0.5rem 1rem;\n      background: #667eea;\n      color: white;\n      border: none;\n      border-radius: 4px;\n    }\n  `;\n}\n```\n\n**Funcionalidades Combinadas:**\n- ✅ Spark Std fornece decorators (`@define`, `@paint`, `@event`)\n- ✅ Spark Echo fornece comunicação reativa via event arcs\n- ✅ Use decorators para definir comportamento do componente\n- ✅ Use event arcs para comunicação entre componentes\n- ✅ Ambos funcionam com Web Components nativos\n\n**Ecosystem Diagram:**\n\n```\n┌─────────────────────────────────────────────────────┐\n│                  Application Layer                 │\n└───────────────────┬─────────────────────────────────┘\n                    │\n┌───────────────────▼─────────────────────────────────┐\n│              Spark Framework Layer                 │\n│  ┌──────────────────────────────────────────────┐  │\n│  │          @adalink/spark-std                  │  │\n│  │  ┌──────────┐  ┌─────┐  ┌────────┐         │  │\n│  │  │Directive │  │ DOM │  │ Event  │         │  │\n│  │  └──────────┘  └─────┘  └────────┘         │  │\n│  │  ┌──────────┐                               │  │\n│  │  │Polyfill  │                               │  │\n│  │  └──────────┘                               │  │\n│  └──────────────────────────────────────────────┘  │\n│  ┌──────────────────────────────────────────────┐  │\n│  │          @adalink/spark-echo                 │  │\n│  │  ┌──────────┐  ┌─────┐  ┌────────┐         │  │\n│  │  │   Echo   │  │Filter│  │ Target │         │  │\n│  │  └──────────┘  └─────┘  └────────┘         │  │\n│  └──────────────────────────────────────────────┘  │\n└───────────────────┬─────────────────────────────────┘\n                    │\n┌───────────────────▼─────────────────────────────────┐\n│              Web Platform APIs                     │\n│  Custom Elements, Shadow DOM, EventTarget          │\n└─────────────────────────────────────────────────────┘\n```\n\n**Quando usar Spark Std vs Spark Echo:**\n- **Spark Std**: Para construir componentes individuais com decorators reativos\n- **Spark Echo**: Para comunicação reativa entre componentes\n- **Juntos**: Para aplicações web reativas completas\n\n---\n\n## 🚀 Quick Start\n\n### Installation\n\n#### Option 1: Install from npm (Recommended)\n\n```bash\n# Using npm\nnpm install @adalink/spark-std\n\n# Using yarn\nyarn add @adalink/spark-std\n\n# Using pnpm\npnpm add @adalink/spark-std\n\n# Using bun\nbun add @adalink/spark-std\n```\n\n#### Option 2: Install from GitHub (Alternative)\n\n```bash\n# Install directly from GitHub repository\nnpm install github:Adalink-ai/spark_std#v1.3.0\n```\n\n#### Option 3: Use as Development Dependency\n\n```json\n{\n  \"dependencies\": {\n    \"@adalink/spark-std\": \"^1.3.0\"\n  }\n}\n```\n\n#### Option 4: Import from CDN (Browser Only)\n\n```javascript\n// Import modules from unpkg or jsDelivr (ESM)\nimport { define, attributeChanged } from \"https://unpkg.com/@adalink/spark-std@1.3.1/dist/directive.js\";\nimport { paint, html, css } from \"https://unpkg.com/@adalink/spark-std@1.3.1/dist/dom.js\";\nimport { event } from \"https://unpkg.com/@adalink/spark-std@1.3.1/dist/event.js\";\n```\n\n**⚠️ Important Notice:**\nThis package is **private** and published to npm. To install it:\n1. Have an npm account\n2. Request access to the `@adalink` scope from the maintainers\n3. Configure npm authentication in your environment\n\n**Installation Options:**\n- **npm registry** (recommended) - Requires npm authentication and scope access\n- **GitHub** (alternative) - Works without npm authentication, installs directly from repository\n- **CDN** (browser only) - Import modules directly from unpkg or jsDelivr, no build step required\n\n**Available Modules:**\n- `@adalink/spark-std/directive` - Lifecycle decorators\n- `@adalink/spark-std/dom` - Rendering utilities\n- `@adalink/spark-std/event` - Event decorators\n\n**💡 Dica:** Combine com [@adalink/spark-echo](https://github.com/Adalink-ai/spark_echo) para adicionar comunicação reativa entre seus componentes. Veja a seção [Integração com Spark Ecosystem](#-integração-com-spark-ecosystem) para exemplos.\n\n---\n\n### Your First Component\n\nCreate a reactive counter in seconds:\n\n```javascript\nimport { define, attributeChanged } from \"@adalink/spark-std/directive\";\nimport { paint, repaint, html, css } from \"@adalink/spark-std/dom\";\nimport { event } from \"@adalink/spark-std/event\";\n\n@define(\"spark-counter\")\n@paint(template, styles)\nclass Counter extends HTMLElement {\n  #count = 0;\n\n  get count() {\n    return this.#count;\n  }\n\n  @attributeChanged(\"count\", Number)\n  @repaint\n  set count(value) {\n    this.#count = value;\n  }\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: \"open\" });\n  }\n\n  @event.click(\"button\")\n  increment() {\n    this.count += 1;\n  }\n\n  @event.click(\"button.reset\")\n  reset() {\n    this.count = 0;\n  }\n}\n\nfunction template(counter) {\n  return html`\n    <div class=\"counter\">\n      <h2>Count: ${counter.count}</h2>\n      <button class=\"increment\">+1</button>\n      <button class=\"reset\">Reset</button>\n    </div>\n  `;\n}\n\nfunction styles(counter) {\n  return css`\n    .counter {\n      font-family: system-ui, sans-serif;\n      text-align: center;\n      padding: 2rem;\n    }\n    button {\n      margin: 0.5rem;\n      padding: 0.5rem 1rem;\n      font-size: 16px;\n      cursor: pointer;\n      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      color: white;\n      border: none;\n      border-radius: 4px;\n    }\n    button:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);\n    }\n  `;\n}\n```\n\nUse it in your HTML:\n\n```html\n<spark-counter count=\"0\"></spark-counter>\n```\n\n---\n\n## 📦 Packages\n\nSpark is organized into four independent, tree-shakeable packages:\n\n### 🎯 Directive\n\nLifecycle and attribute decorators for Custom Elements.\n\n```javascript\nimport {\n  define,           // Register custom element\n  connected,        // connectedCallback\n  disconnected,     // disconnectedCallback\n  adopted,          // adoptedCallback\n  attributeChanged  // attributeChangedCallback\n} from \"@adalink/spark-std/directive\";\n\n@define(\"my-component\")\n@connected\nclass MyComponent extends HTMLElement {\n  connectedCallback() {\n    // Called when element is inserted into DOM\n  }\n}\n```\n\n**Features:**\n- ✅ Lifecycle callbacks (`connected`, `disconnected`, `adopted`, `execute`)\n- ✅ Attribute change observation with type conversion\n- ✅ Form-associated element support\n- ✅ Clean decorator-based API\n\n---\n\n### 🎨 DOM\n\nRendering and styling utilities with reactive capabilities.\n\n```javascript\nimport { paint, repaint, html, css } from \"@adalink/spark-std/dom\";\n\n@paint(template, styles)\nclass MyComponent extends HTMLElement {\n  @repaint\n  update() {\n    // Triggers re-render\n  }\n}\n\nfunction template(component) {\n  return html`<div>Hello, ${component.name}!</div>`;\n}\n\nfunction styles(component) {\n  return css`div { color: blue; }`;\n}\n```\n\n**Features:**\n- ✅ Shadow DOM integration\n- ✅ Adopted stylesheets for performance\n- ✅ Reactive template updates\n- ✅ Lifecycle hooks (`willPaint`, `didPaint`)\n\n---\n\n### ⚡ Event\n\nDynamic event listener decorator with automatic lifecycle management.\n\n```javascript\nimport { event } from \"@adalink/spark-std/event\";\n\nclass MyComponent extends HTMLElement {\n  @event.click(\"button.action\")\n  handleClick(event) {\n    // Event delegation for performance\n  }\n\n  @event.input(\"input[type='text']\")\n  handleInput(event) {\n    // Reactive to input changes\n  }\n}\n```\n\n**Features:**\n- ✅ Works with any DOM event\n- ✅ Event delegation for performance\n- ✅ Automatic cleanup (no memory leaks)\n- ✅ Support for custom events\n\n---\n\n## 🎯 Real-World Use Cases\n\n### Form Components\n\n```javascript\n@define(\"spark-input\")\n@paint(template, styles)\nclass Input extends HTMLElement {\n  #value = \"\";\n\n  get value() {\n    return this.#value;\n  }\n\n  @attributeChanged(\"value\", String)\n  @repaint\n  set value(newValue) {\n    this.#value = newValue;\n  }\n\n  @event.input(\"input\")\n  handleInput() {\n    this.value = this.shadowRoot.querySelector(\"input\").value;\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value }));\n  }\n\n  render() {\n    return html`\n      <div class=\"input-wrapper\">\n        <label>${this.getAttribute(\"label\") || \"Input\"}</label>\n        <input\n          type=\"${this.getAttribute(\"type\") || \"text\"}\"\n          placeholder=\"${this.getAttribute(\"placeholder\") || \"\"}\"\n          value=\"${this.value}\"\n        />\n      </div>\n    `;\n  }\n\n  styles() {\n    return css`\n      .input-wrapper {\n        display: flex;\n        flex-direction: column;\n        gap: 0.5rem;\n      }\n      input {\n        padding: 0.5rem;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        font-family: system-ui, sans-serif;\n      }\n    `;\n  }\n}\n```\n\n### Data Fetching\n\n```javascript\n@define(\"spark-data-loader\")\n@paint(template, styles)\nclass DataLoader extends HTMLElement {\n  #data = null;\n  #loading = false;\n\n  get data() {\n    return this.#data;\n  }\n\n  @repaint\n  async loadData() {\n    this.#loading = true;\n    const url = this.getAttribute(\"url\");\n    const response = await fetch(url);\n    this.#data = await response.json();\n    this.#loading = false;\n  }\n\n  @event.click(\"button.load\")\n  load() {\n    this.loadData();\n  }\n\n  connectedCallback() {\n    if (this.getAttribute(\"autoload\") === \"true\") {\n      this.loadData();\n    }\n  }\n\n  render() {\n    if (this.#loading) {\n      return html`<div class=\"loading\">Loading...</div>`;\n    }\n\n    if (!this.#data) {\n      return html`\n        <div class=\"empty\">\n          <p>No data loaded</p>\n          <button class=\"load\">Load Data</button>\n        </div>\n      `;\n    }\n\n    return html`\n      <div class=\"data\">\n        <pre>${JSON.stringify(this.#data, null, 2)}</pre>\n      </div>\n    `;\n  }\n\n  styles() {\n    return css`\n      .loading, .empty, .data {\n        padding: 1rem;\n        border: 1px solid #eee;\n        border-radius: 4px;\n      }\n      button {\n        padding: 0.5rem 1rem;\n        cursor: pointer;\n        background: #667eea;\n        color: white;\n        border: none;\n        border-radius: 4px;\n      }\n    `;\n  }\n}\n```\n\n---\n\n## 📊 Why Spark Over Alternatives?\n\n| Feature | Spark | Lit | React | Vue |\n|---------|-------|-----|-------|-----|\n| Zero Dependencies | ✅ | ✅ | ❌ | ❌ |\n| Native Web Components | ✅ | ✅ | ⚠️ | ⚠️ |\n| Declarator API | ✅ | ❌ | ❌ | ⚠️ |\n| Event Delegation | ✅ | ❌ | ✅ | ✅ |\n| No Build Required | ✅ | ✅ | ❌ | ❌ |\n| Bundle Size | ~2KB | ~8KB | ~40KB | ~35KB |\n| Framework Agnostic | ✅ | ✅ | ❌ | ❌ |\n| Decorator Pattern | ✅ | ❌ | ❌ | ❌ |\n\n---\n\n## 🌐 Usage in Frameworks\n\n### With React\n\n```javascript\nimport { define, paint, html, css } from \"@adalink/spark-std/directive\";\nimport { event } from \"@adalink/spark-std/event\";\n\n@define(\"react-spark-component\")\nclass SparkComponent extends HTMLElement {\n  @event.click(\"button\")\n  handleClick() {\n    this.dispatchEvent(new CustomEvent(\"react-click\"));\n  }\n}\n\n// In React\nfunction App() {\n  const handleClick = () => {\n    console.log(\"Clicked!\");\n  };\n\n  return (\n    <react-spark-component onReactClick={handleClick} />\n  );\n}\n```\n\n### With Vue\n\n```javascript\nimport { define, paint, html, css } from \"@adalink/spark-std/directive\";\n\n@define(\"vue-spark-component\")\nclass SparkComponent extends HTMLElement {\n  // Your component logic\n}\n\n// In Vue\n<template>\n  <vue-spark-component @vue-click=\"handleClick\" />\n</template>\n```\n\n---\n\n## 🛠️ Development\n\n### Prerequisites\n\n- Node.js 18+\n\n### Setup\n\n```bash\n# Clone repository\ngit clone https://github.com/Adalink-ai/spark_std.git\ncd spark_std\n\n# Install dependencies\nnpm install\n\n# Build package\nnpm run build\n\n# Start development server\nnpm run dev\n\n# Lint and format\nnpx biome check .\nnpx biome check --write .\n```\n\n---\n\n## 📚 Documentation\n\n- **Architecture:** [ARCHITECTURE.md](ARCHITECTURE.md) - Design decisions and patterns\n- **Contributing:** [CONTRIBUTING.md](CONTRIBUTING.md) - Development guidelines\n- **Security:** [SECURITY.md](SECURITY.md) - Security policies\n- **Changelog:** [CHANGELOG.md](CHANGELOG.md) - Project changes\n- **Authors:** [AUTHORS.md](AUTHORS.md) - Author information\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions! Please read our [Contributing Guide](CONTRIBUTING.md) before getting started.\n\n**Ways to contribute:**\n- 🐛 [Report bugs](https://github.com/Adalink-ai/spark_std/issues/new?template=bug_report.md)\n- 💡 [Suggest features](https://github.com/Adalink-ai/spark_std/issues/new?template=feature_request.md)\n- 📖 [Improve documentation](https://github.com/Adalink-ai/spark_std/issues/new?template=documentation.md)\n- 🔧 [Submit pull requests](https://github.com/Adalink-ai/spark_std/pulls)\n\n---\n\n## 👥 Author & Community\n\n**Cleber de Moraes Goncalves** - Creator & Lead Maintainer\n\n- 📧 Email: cleber.engineer@gmail.com\n- 🐙 GitHub: [deMGoncalves](https://github.com/deMGoncalves)\n- 💼 LinkedIn: [deMGoncalves](https://linkedin.com/in/deMGoncalves)\n- 📸 Instagram: [deMGoncalves](https://instagram.com/deMGoncalves)\n\n### 🌟 Star the Project\n\nIf you find Spark useful, please ⭐ star it on GitHub!\n\n### 📢 Share\n\nShare Spark with your network:\n- [Twitter](https://twitter.com/intent/tweet?text=Check%20out%20@adalink/spark-std%20-%20A%20modern%20standard%20library%20for%20web%20development!&url=https://github.com/Adalink-ai/spark_std)\n- [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https://github.com/Adalink-ai/spark_std&title=Spark%20Standard%20Library&summary=Modern%20standard%20library%20for%20web%20development)\n\n---\n\n## 🌐 Spark Ecosystem\n\nO Spark Ecosystem é um conjunto de bibliotecas para desenvolvimento web reativo:\n\n- **[@adalink/spark-std](https://github.com/Adalink-ai/spark_std)** - Biblioteca padrão com decorators para Web Components\n- **[@adalink/spark-echo](https://github.com/Adalink-ai/spark_echo)** - Sistema de comunicação reativa entre componentes\n\n**Mais pacotes em breve:**\n- [@adalink/spark-form](https://github.com/Adalink-ai/spark_form) - Componentes de formulário reativos (em breve)\n- [@adalink/spark-router](https://github.com/Adalink-ai/spark_router) - Roteamento SPA (em breve)\n\n---\n\n## 📄 License\n\n[Apache-2.0](LICENSE) © 2026 Adalink\n\n---\n\n## 🔗 Links\n\n- **Repository:** [github.com/Adalink-ai/spark_std](https://github.com/Adalink-ai/spark_std)\n- **NPM Package:** [npmjs.com/package/@adalink/spark-std](https://www.npmjs.com/package/@adalink/spark-std)\n- **Organization:** [github.com/Adalink-ai](https://github.com/Adalink-ai)\n\n---\n\n**Built with ❤️ by [Adalink](https://github.com/Adalink-ai)**\n\n**Spark Standard Library** - Build better web components, faster. ⚡","readmeFilename":"README.md"}