diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c851659..55ebd98 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -27,8 +27,19 @@ jobs:
         with:
           deno-version: v1.x
 
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9
+          run_install: false
+
       - name: Run `zig build`
-        run: zig build
+        run: cd packages/core && zig build
 
       - name: Run `deno test`
         run: deno test -A
+
+      - name: Install dependencies
+        run: pnpm i
+
+      - name: Build webcomponent
+        run: cd packages/webcomponent && pnpm build
diff --git a/.gitignore b/.gitignore
index a6c67eb..c955a0c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
 zig-out
 *.wasm
 *.zip
+node_modules
diff --git a/.gitmodules b/.gitmodules
index 1b89b05..54ea522 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,3 @@
-[submodule "vendor/md4c"]
-	path = vendor/md4c
+[submodule "md4c"]
+	path = packages/core/vendor/md4c
 	url = https://github.com/mity/md4c
diff --git a/README.md b/README.md
index be69e23..1cd621e 100644
--- a/README.md
+++ b/README.md
@@ -1,256 +1,5 @@
 # md4w
 
-A **Markdown** renderer written in Zig & C, compiled to **WebAssymbly**.
-
-- **Compliance**: powered by [md4c](https://github.com/mity/md4c) that is fully
-  compliant to CommonMark 0.31, and partially supports GFM like task list,
-  table, etc.
-- **Fast**: written in Zig & C, compiled to WebAssembly (it's about **2.5x** faster
-  than markdown-it, see [benchmark](#benchmark)).
-- **Small**: `~28KB` gzipped.
-- **Simple**: zero dependencies, easy to use.
-- **Streaming**: supports web streaming API for reducing memory usage.
-- **Universal**: works in any JavaScript runtime (Node.js, Deno, Bun, Browsers,
-  Cloudflare Workers, etc).
-
-## Usage
-
-```js
-// npm i md4w (Node.js, Bun, Cloudflare Workers, etc.)
-import { init, mdToHtml, mdToJSON, mdToReadableHtml } from "md4w";
-// or use the CDN url (Deno, Browsers)
-import { init, mdToHtml, mdToJSON, mdToReadableHtml } from "https://esm.sh/md4w";
-
-// waiting for md4w.wasm...
-await init();
-
-// markdown -> HTML
-const html = mdToHtml("Stay _foolish_, stay **hungry**!");
-
-// markdown -> HTML (ReadableStream)
-const readable = mdToReadableHtml("Stay _foolish_, stay **hungry**!");
-const response = new Response(readable, {
-  headers: { "Content-Type": "text/html" },
-});
-
-// markdown -> JSON
-const tree = mdToJSON("Stay _foolish_, stay **hungry**!");
-```
-
-## Wasm Mode
-
-md4w provides two webassembly binary files:
-
-- `md4w-fast.wasm`: Faster but larger binary file. (**270KB** gzipped)
-- `md4w-small.wasm`: Tiny but slower binary file. (**28KB** gzipped)
-
-By default, md4w uses the `md4w-fast.wasm` binary from file system, uses the `md4w-small.wasm` binary from CDN. You can also specify the wasm file by adding the `wasmMode` option.
-
-```js
-import { init } from "md4w";
-
-await init("fast"); // or "small"
-```
-
-If you are using a **bundler** like vite, you need to configure the `wasm` input manually.
-
-```js
-import { init } from "md4w";
-import wasmUrl from "md4w/js/md4w-fast.wasm?url";
-
-await init(wasmUrl);
-```
-
-## Parse Flags
-
-By default, md4w uses the following parse flags:
-
-- `COLLAPSE_WHITESPACE`: Collapse non-trivial whitespace into single space.
-- `PERMISSIVE_ATX_HEADERS`: Do not require space in ATX headers (`###header`).
-- `PERMISSIVE_URL_AUTO_LINKS`: Recognize URLs as links.
-- `STRIKETHROUGH`: Text enclosed in tilde marks, e.g. `~foo bar~`.
-- `TABLES`: Support GitHub-style tables.
-- `TASK_LISTS`: Support GitHub-style task lists.
-
-You can use the `parseFlags` option to change the renderer behavior:
-
-```ts
-mdToHtml("Stay _foolish_, stay **hungry**!", {
-  parseFlags: [
-    "DEFAULT",
-    "NO_HTML",
-    "LATEX_MATH_SPANS",
-    // ... other parse flags
-  ],
-});
-```
-
-All available parse flags are:
-
-```ts
-export enum ParseFlags {
-  /** Collapse non-trivial whitespace into single space. */
-  COLLAPSE_WHITESPACE,
-  /** Do not require space in ATX headers ( ###header ) */
-  PERMISSIVE_ATX_HEADERS,
-  /** Recognize URLs as links. */
-  PERMISSIVE_URL_AUTO_LINKS,
-  /** Recognize e-mails as links.*/
-  PERMISSIVE_EMAIL_AUTO_LINKS,
-  /** Disable indented code blocks. (Only fenced code works.) */
-  NO_INDENTED_CODE_BLOCKS,
-  /** Disable raw HTML blocks. */
-  NO_HTML_BLOCKS,
-  /** Disable raw HTML (inline). */
-  NO_HTML_SPANS,
-  /** Support GitHub-style tables. */
-  TABLES,
-  /** Support strike-through spans (text enclosed in tilde marks, e.g. ~foo bar~). */
-  STRIKETHROUGH,
-  /** Support WWW autolinks (without proto; just 'www.') */
-  PERMISSIVE_WWW_AUTO_LINKS,
-  /** Support GitHub-style task lists. */
-  TASKLISTS,
-  /** Support LaTeX math spans ($...$) and LaTeX display math spans ($$...$$) are supported. (Note though that the HTML renderer outputs them verbatim in a custom tag <x-equation>.) */
-  LATEX_MATH_SPANS,
-  /** Support wiki-style links ([[link label]] and [[target article|link label]]) are supported. (Note that the HTML renderer outputs them in a custom tag <x-wikilink>.) */
-  WIKI_LINKS,
-  /** Denotes an underline instead of an ordinary emphasis or strong emphasis. */
-  UNDERLINE,
-  /** Using hard line breaks. */
-  HARD_SOFT_BREAKS,
-  /** Shorthand for NO_HTML_BLOCKS | NO_HTML_SPANS */
-  NO_HTML,
-  /** Default flags COLLAPSE_WHITESPACE | PERMISSIVE_ATX_HEADERS | PERMISSIVE_URL_AUTO_LINKS | STRIKETHROUGH | TABLES | TASK_LISTS */
-  DEFAULT,
-}
-```
-
-## Code Highlighter
-
-md4w would not add colors to the code blocks by default, however, we provide a
-`setCodeHighlighter` function to allow you to add any code highlighter you like.
-
-```js
-import { setCodeHighlighter } from "md4w";
-
-setCodeHighlighter((code, lang) => {
-  return `<pre><code class="language-${lang}">${hl(code)}</code></pre>`;
-});
-```
-
-### Caveats
-
-- The returned code will be inserted into the html directly, without html
-  escaping. You should take care of the html escaping by yourself.
-- Although we don't send back the highlighted code to the wasm module, the
-  performance is still impacted by the code highlighter.
-
-## Web Streaming API
-
-md4w provides the web streaming API, that is useful
-for a http server to stream the outputed html.
-
-```js
-import { mdToReadableHtml } from "md4w";
-
-const readable = mdToReadableHtml(readFile("large.md"));
-
-// write to file
-const file = await Deno.open("/foo/bar.html", { write: true, create: true });
-readable.pipeTo(file.writable);
-
-// or send to browser
-const response = new Response(readable, {
-  headers: { "Content-Type": "text/html" },
-});
-```
-
-### Buffer Size
-
-By default, md4w uses a buffer size of `4KB` for streaming, you can change it by
-adding the `bufferSize` option.
-
-```js
-mdToReadableHtml(largeMarkdown, {
-  bufferSize: 16 * 1024,
-});
-```
-
-### Caveats
-
-The streaming API currently only uses the buffer for output, you still need
-to load the whole markdown data into memory.
-
-## Rendering to JSON
-
-md4w also provides a `mdToJSON` function to render the markdown to JSON.
-
-```js
-const traverse = (node) => {
-  // text node
-  if (typeof node === "string") {
-    console.log(node);
-    return;
-  }
-
-  // element type
-  console.log(node.type);
-
-  // element attributes (may be undefined)
-  console.log(node.props);
-
-  // element children (may be undefined)
-  node.children?.forEach(traverse);
-};
-
-const tree = mdToJSON("Stay _foolish_, stay **hungry**!");
-traverse(tree);
-```
-
-### Node Type
-
-The node type is a number that represents the type of the node. You can import
-the `NodeType` enum to get the human-readable node type.
-
-```ts
-import { NodeType } from "md4w";
-
-console.log(NodeType.P); // 9
-console.log(NodeType.IMG); // 33
-
-if (node.type === NodeType.IMG) {
-  console.log("This is an image node, `src` is", node.props.src);
-}
-```
-
-> All available node types are defined in the
-> [`NodeType`](./js/md4w.d.ts#L76) enum.
-
-## Development
-
-The renderer is written in [Zig](https://ziglang.org/), ensure you have it (0.11.0)
-installed.
-
-```bash
-zig build && deno test -A
-```
-
-## Benchmark
-
-![screenshot](./test/benchmark-screenshot.png)
-
-```bash
-zig build && deno bench -A test/benchmark.js
-```
-
-## Prior Art
-
-- [md4c](https://github.com/mity/md4c) - C Markdown parser. Fast. SAX-like
-  interface. Compliant to CommonMark specification.
-- [markdown-wasm](https://github.com/rsms/markdown-wasm) - Very fast Markdown
-  parser and HTML generator implemented in WebAssembly, based on md4c.
-
 ## License
 
 MIT
diff --git a/package.json b/package.json
index f4a9ed5..9ac85a6 100644
--- a/package.json
+++ b/package.json
@@ -1,29 +1,18 @@
 {
-  "name": "md4w",
-  "description": "A Markdown renderer written in Zig & C, compiled to WebAssymbly for all JS runtimes.",
-  "version": "0.2.6",
+  "name": "md4w-monorepo",
+  "version": "1.0.0",
+  "description": "",
   "type": "module",
-  "module": "./js/index.js",
-  "main": "./js/index.js",
-  "types": "./js/md4w.d.ts",
-  "exports": {
-    ".": {
-      "unwasm": "./js/unwasm.js",
-      "workerd": "./js/workerd.js",
-      "import": "./js/index.js",
-      "types": "./js/md4w.d.ts"
-    }
+  "license": "MIT",
+  "packageManager": "pnpm@9.5.0",
+  "engines": {
+    "pnpm": "^9.0.0"
   },
-  "scripts": {
-    "prepublishOnly": "zig build"
-  },
-  "files": [
-    "js/",
-    "README.md"
-  ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/ije/md4w"
+    "url": "https://github.com/ije/md4w",
+    "directory": "packages/core"
   },
-  "license": "MIT"
+  "scripts": {},
+  "devDependencies": {}
 }
diff --git a/CHANGELOG.md b/packages/core/CHANGELOG.md
similarity index 100%
rename from CHANGELOG.md
rename to packages/core/CHANGELOG.md
diff --git a/packages/core/README.md b/packages/core/README.md
new file mode 100644
index 0000000..be69e23
--- /dev/null
+++ b/packages/core/README.md
@@ -0,0 +1,256 @@
+# md4w
+
+A **Markdown** renderer written in Zig & C, compiled to **WebAssymbly**.
+
+- **Compliance**: powered by [md4c](https://github.com/mity/md4c) that is fully
+  compliant to CommonMark 0.31, and partially supports GFM like task list,
+  table, etc.
+- **Fast**: written in Zig & C, compiled to WebAssembly (it's about **2.5x** faster
+  than markdown-it, see [benchmark](#benchmark)).
+- **Small**: `~28KB` gzipped.
+- **Simple**: zero dependencies, easy to use.
+- **Streaming**: supports web streaming API for reducing memory usage.
+- **Universal**: works in any JavaScript runtime (Node.js, Deno, Bun, Browsers,
+  Cloudflare Workers, etc).
+
+## Usage
+
+```js
+// npm i md4w (Node.js, Bun, Cloudflare Workers, etc.)
+import { init, mdToHtml, mdToJSON, mdToReadableHtml } from "md4w";
+// or use the CDN url (Deno, Browsers)
+import { init, mdToHtml, mdToJSON, mdToReadableHtml } from "https://esm.sh/md4w";
+
+// waiting for md4w.wasm...
+await init();
+
+// markdown -> HTML
+const html = mdToHtml("Stay _foolish_, stay **hungry**!");
+
+// markdown -> HTML (ReadableStream)
+const readable = mdToReadableHtml("Stay _foolish_, stay **hungry**!");
+const response = new Response(readable, {
+  headers: { "Content-Type": "text/html" },
+});
+
+// markdown -> JSON
+const tree = mdToJSON("Stay _foolish_, stay **hungry**!");
+```
+
+## Wasm Mode
+
+md4w provides two webassembly binary files:
+
+- `md4w-fast.wasm`: Faster but larger binary file. (**270KB** gzipped)
+- `md4w-small.wasm`: Tiny but slower binary file. (**28KB** gzipped)
+
+By default, md4w uses the `md4w-fast.wasm` binary from file system, uses the `md4w-small.wasm` binary from CDN. You can also specify the wasm file by adding the `wasmMode` option.
+
+```js
+import { init } from "md4w";
+
+await init("fast"); // or "small"
+```
+
+If you are using a **bundler** like vite, you need to configure the `wasm` input manually.
+
+```js
+import { init } from "md4w";
+import wasmUrl from "md4w/js/md4w-fast.wasm?url";
+
+await init(wasmUrl);
+```
+
+## Parse Flags
+
+By default, md4w uses the following parse flags:
+
+- `COLLAPSE_WHITESPACE`: Collapse non-trivial whitespace into single space.
+- `PERMISSIVE_ATX_HEADERS`: Do not require space in ATX headers (`###header`).
+- `PERMISSIVE_URL_AUTO_LINKS`: Recognize URLs as links.
+- `STRIKETHROUGH`: Text enclosed in tilde marks, e.g. `~foo bar~`.
+- `TABLES`: Support GitHub-style tables.
+- `TASK_LISTS`: Support GitHub-style task lists.
+
+You can use the `parseFlags` option to change the renderer behavior:
+
+```ts
+mdToHtml("Stay _foolish_, stay **hungry**!", {
+  parseFlags: [
+    "DEFAULT",
+    "NO_HTML",
+    "LATEX_MATH_SPANS",
+    // ... other parse flags
+  ],
+});
+```
+
+All available parse flags are:
+
+```ts
+export enum ParseFlags {
+  /** Collapse non-trivial whitespace into single space. */
+  COLLAPSE_WHITESPACE,
+  /** Do not require space in ATX headers ( ###header ) */
+  PERMISSIVE_ATX_HEADERS,
+  /** Recognize URLs as links. */
+  PERMISSIVE_URL_AUTO_LINKS,
+  /** Recognize e-mails as links.*/
+  PERMISSIVE_EMAIL_AUTO_LINKS,
+  /** Disable indented code blocks. (Only fenced code works.) */
+  NO_INDENTED_CODE_BLOCKS,
+  /** Disable raw HTML blocks. */
+  NO_HTML_BLOCKS,
+  /** Disable raw HTML (inline). */
+  NO_HTML_SPANS,
+  /** Support GitHub-style tables. */
+  TABLES,
+  /** Support strike-through spans (text enclosed in tilde marks, e.g. ~foo bar~). */
+  STRIKETHROUGH,
+  /** Support WWW autolinks (without proto; just 'www.') */
+  PERMISSIVE_WWW_AUTO_LINKS,
+  /** Support GitHub-style task lists. */
+  TASKLISTS,
+  /** Support LaTeX math spans ($...$) and LaTeX display math spans ($$...$$) are supported. (Note though that the HTML renderer outputs them verbatim in a custom tag <x-equation>.) */
+  LATEX_MATH_SPANS,
+  /** Support wiki-style links ([[link label]] and [[target article|link label]]) are supported. (Note that the HTML renderer outputs them in a custom tag <x-wikilink>.) */
+  WIKI_LINKS,
+  /** Denotes an underline instead of an ordinary emphasis or strong emphasis. */
+  UNDERLINE,
+  /** Using hard line breaks. */
+  HARD_SOFT_BREAKS,
+  /** Shorthand for NO_HTML_BLOCKS | NO_HTML_SPANS */
+  NO_HTML,
+  /** Default flags COLLAPSE_WHITESPACE | PERMISSIVE_ATX_HEADERS | PERMISSIVE_URL_AUTO_LINKS | STRIKETHROUGH | TABLES | TASK_LISTS */
+  DEFAULT,
+}
+```
+
+## Code Highlighter
+
+md4w would not add colors to the code blocks by default, however, we provide a
+`setCodeHighlighter` function to allow you to add any code highlighter you like.
+
+```js
+import { setCodeHighlighter } from "md4w";
+
+setCodeHighlighter((code, lang) => {
+  return `<pre><code class="language-${lang}">${hl(code)}</code></pre>`;
+});
+```
+
+### Caveats
+
+- The returned code will be inserted into the html directly, without html
+  escaping. You should take care of the html escaping by yourself.
+- Although we don't send back the highlighted code to the wasm module, the
+  performance is still impacted by the code highlighter.
+
+## Web Streaming API
+
+md4w provides the web streaming API, that is useful
+for a http server to stream the outputed html.
+
+```js
+import { mdToReadableHtml } from "md4w";
+
+const readable = mdToReadableHtml(readFile("large.md"));
+
+// write to file
+const file = await Deno.open("/foo/bar.html", { write: true, create: true });
+readable.pipeTo(file.writable);
+
+// or send to browser
+const response = new Response(readable, {
+  headers: { "Content-Type": "text/html" },
+});
+```
+
+### Buffer Size
+
+By default, md4w uses a buffer size of `4KB` for streaming, you can change it by
+adding the `bufferSize` option.
+
+```js
+mdToReadableHtml(largeMarkdown, {
+  bufferSize: 16 * 1024,
+});
+```
+
+### Caveats
+
+The streaming API currently only uses the buffer for output, you still need
+to load the whole markdown data into memory.
+
+## Rendering to JSON
+
+md4w also provides a `mdToJSON` function to render the markdown to JSON.
+
+```js
+const traverse = (node) => {
+  // text node
+  if (typeof node === "string") {
+    console.log(node);
+    return;
+  }
+
+  // element type
+  console.log(node.type);
+
+  // element attributes (may be undefined)
+  console.log(node.props);
+
+  // element children (may be undefined)
+  node.children?.forEach(traverse);
+};
+
+const tree = mdToJSON("Stay _foolish_, stay **hungry**!");
+traverse(tree);
+```
+
+### Node Type
+
+The node type is a number that represents the type of the node. You can import
+the `NodeType` enum to get the human-readable node type.
+
+```ts
+import { NodeType } from "md4w";
+
+console.log(NodeType.P); // 9
+console.log(NodeType.IMG); // 33
+
+if (node.type === NodeType.IMG) {
+  console.log("This is an image node, `src` is", node.props.src);
+}
+```
+
+> All available node types are defined in the
+> [`NodeType`](./js/md4w.d.ts#L76) enum.
+
+## Development
+
+The renderer is written in [Zig](https://ziglang.org/), ensure you have it (0.11.0)
+installed.
+
+```bash
+zig build && deno test -A
+```
+
+## Benchmark
+
+![screenshot](./test/benchmark-screenshot.png)
+
+```bash
+zig build && deno bench -A test/benchmark.js
+```
+
+## Prior Art
+
+- [md4c](https://github.com/mity/md4c) - C Markdown parser. Fast. SAX-like
+  interface. Compliant to CommonMark specification.
+- [markdown-wasm](https://github.com/rsms/markdown-wasm) - Very fast Markdown
+  parser and HTML generator implemented in WebAssembly, based on md4c.
+
+## License
+
+MIT
diff --git a/build.zig b/packages/core/build.zig
similarity index 100%
rename from build.zig
rename to packages/core/build.zig
diff --git a/js/index.js b/packages/core/js/index.js
similarity index 100%
rename from js/index.js
rename to packages/core/js/index.js
diff --git a/js/md4w.d.ts b/packages/core/js/md4w.d.ts
similarity index 100%
rename from js/md4w.d.ts
rename to packages/core/js/md4w.d.ts
diff --git a/js/md4w.js b/packages/core/js/md4w.js
similarity index 100%
rename from js/md4w.js
rename to packages/core/js/md4w.js
diff --git a/js/unwasm.js b/packages/core/js/unwasm.js
similarity index 100%
rename from js/unwasm.js
rename to packages/core/js/unwasm.js
diff --git a/js/workerd.js b/packages/core/js/workerd.js
similarity index 100%
rename from js/workerd.js
rename to packages/core/js/workerd.js
diff --git a/packages/core/package.json b/packages/core/package.json
new file mode 100644
index 0000000..cf9b25e
--- /dev/null
+++ b/packages/core/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "md4w",
+  "description": "A Markdown renderer written in Zig & C, compiled to WebAssymbly for all JS runtimes.",
+  "version": "0.2.6",
+  "type": "module",
+  "module": "./js/index.js",
+  "main": "./js/index.js",
+  "types": "./js/md4w.d.ts",
+  "exports": {
+    ".": {
+      "unwasm": "./js/unwasm.js",
+      "workerd": "./js/workerd.js",
+      "import": "./js/index.js",
+      "types": "./js/md4w.d.ts"
+    }
+  },
+  "scripts": {
+    "prepublishOnly": "zig build"
+  },
+  "files": [
+    "js/",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ije/md4w.git"
+  },
+  "license": "MIT"
+}
diff --git a/src/libc.zig b/packages/core/src/libc.zig
similarity index 100%
rename from src/libc.zig
rename to packages/core/src/libc.zig
diff --git a/src/md4w.zig b/packages/core/src/md4w.zig
similarity index 100%
rename from src/md4w.zig
rename to packages/core/src/md4w.zig
diff --git a/test/benchmark-screenshot.png b/packages/core/test/benchmark-screenshot.png
similarity index 100%
rename from test/benchmark-screenshot.png
rename to packages/core/test/benchmark-screenshot.png
diff --git a/test/benchmark.js b/packages/core/test/benchmark.js
similarity index 100%
rename from test/benchmark.js
rename to packages/core/test/benchmark.js
diff --git a/test/commonmark-spec.md b/packages/core/test/commonmark-spec.md
similarity index 100%
rename from test/commonmark-spec.md
rename to packages/core/test/commonmark-spec.md
diff --git a/test/test.js b/packages/core/test/test.js
similarity index 100%
rename from test/test.js
rename to packages/core/test/test.js
diff --git a/vendor/md4c b/packages/core/vendor/md4c
similarity index 100%
rename from vendor/md4c
rename to packages/core/vendor/md4c
diff --git a/packages/webcomponent/.gitignore b/packages/webcomponent/.gitignore
new file mode 100644
index 0000000..f06235c
--- /dev/null
+++ b/packages/webcomponent/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/packages/webcomponent/README.md b/packages/webcomponent/README.md
new file mode 100644
index 0000000..2151536
--- /dev/null
+++ b/packages/webcomponent/README.md
@@ -0,0 +1,64 @@
+# md4wc
+
+A Web component for rendering Markdown to HTML.
+
+## Features
+
+- ⚡ Insane fast rendering using [md4w](https://github.com/ije/md4w) (written in Zig)
+- ✨ Declarative usage
+- 💡 Lightweight
+- 📘 ESM modules
+
+## Installation
+
+```sh
+npm install md4wc md4c
+# or pnpm install md4wc md4c
+```
+
+## How to use
+
+### Register
+
+Register the `MarkdownContent` and optionally `MarkdownContext`.
+
+```js
+import { MarkdownContent } from "md4wc";
+customElements.define("md-content", new MarkdownContent());
+```
+
+Or you can use the static helper
+
+```js
+import { MarkdownContent } from "md4wc";
+class YourComponent extends MarkdownContent {
+  static {
+    this.register("md-content", YourComponent);
+  }
+}
+
+export default MarkdownContextComponent;
+```
+
+### Usage
+
+Declare your markup and pass the `WASM` module path as `href`. This will initialize the `md4c` module under to hood. But you can do the same thing manually using `import { init } from "md4w`.
+
+```html
+<md-context href="/path/to/md4w.wasm">
+  <md-content></md-content>
+</md-context>
+```
+
+```js
+const md = this.querySelector("md-content");
+md.dispatchEvent(new CustomEvent("render", { detail: "Markdown content" }));
+```
+
+## References
+
+- https://developer.mozilla.org/en-US/docs/Web/API/Web_components
+
+```
+
+```
diff --git a/packages/webcomponent/package.json b/packages/webcomponent/package.json
new file mode 100644
index 0000000..c8c48e7
--- /dev/null
+++ b/packages/webcomponent/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "md4wc",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ije/md4w.git",
+    "directory": "packages/webcomponent"
+  },
+  "version": "1.0.1",
+  "description": "",
+  "type": "module",
+  "types": "./types/index.d.ts",
+  "module": "./dist/index.js",
+  "scripts": {
+    "build": "rollup -c && pnpm generate:types",
+    "generate:types": "node ./scripts/generate-types.js",
+    "prepublishOnly": "pnpm build"
+  },
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "browser": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@karesztrk/webcomponent-base": "^1.0.9"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "dts-buddy": "^0.5.1",
+    "prettier": "^3.3.3",
+    "rollup": "^4.19.0"
+  },
+  "peerDependencies": {
+    "md4w": "workspace:*"
+  }
+}
diff --git a/packages/webcomponent/rollup.config.js b/packages/webcomponent/rollup.config.js
new file mode 100644
index 0000000..d369e0e
--- /dev/null
+++ b/packages/webcomponent/rollup.config.js
@@ -0,0 +1,19 @@
+import terser from "@rollup/plugin-terser";
+import resolve from "@rollup/plugin-node-resolve";
+import { defineConfig } from "rollup";
+
+export default defineConfig({
+  input: "src/index.js",
+  output: [
+    {
+      dir: "dist",
+      format: "es",
+      exports: "named",
+      preserveModules: true,
+      preserveModulesRoot: "src",
+      sourcemap: true,
+    },
+  ],
+  external: ["md4w"],
+  plugins: [resolve(), terser()],
+});
diff --git a/packages/webcomponent/scripts/generate-types.js b/packages/webcomponent/scripts/generate-types.js
new file mode 100644
index 0000000..3754316
--- /dev/null
+++ b/packages/webcomponent/scripts/generate-types.js
@@ -0,0 +1,13 @@
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+import { createBundle } from "dts-buddy";
+
+const dir = fileURLToPath(new URL("..", import.meta.url));
+const pkg = JSON.parse(fs.readFileSync(`${dir}/package.json`, "utf-8"));
+
+await createBundle({
+  output: `${dir}/types/index.d.ts`,
+  modules: {
+    [pkg.name]: `${dir}/src/index.d.ts`,
+  },
+});
diff --git a/packages/webcomponent/src/MarkdownContent.js b/packages/webcomponent/src/MarkdownContent.js
new file mode 100644
index 0000000..c7fa761
--- /dev/null
+++ b/packages/webcomponent/src/MarkdownContent.js
@@ -0,0 +1,29 @@
+import { mdToHtml } from "md4w";
+import { LightElement } from "@karesztrk/webcomponent-base";
+
+class MarkdownContent extends LightElement {
+  /**
+   * @type {string| undefined} content
+   */
+  content;
+
+  constructor() {
+    super();
+
+    this.addEventListener("render", (e) => {
+      if (e instanceof CustomEvent) {
+        const content = e.detail;
+        this.content = content;
+        this.render();
+      }
+    });
+  }
+
+  render() {
+    if (this.content) {
+      this.innerHTML = mdToHtml(this.content);
+    }
+  }
+}
+
+export default MarkdownContent;
diff --git a/packages/webcomponent/src/MarkdownContext.js b/packages/webcomponent/src/MarkdownContext.js
new file mode 100644
index 0000000..8c54cf0
--- /dev/null
+++ b/packages/webcomponent/src/MarkdownContext.js
@@ -0,0 +1,35 @@
+import { init } from "md4w";
+import { LightElement } from "@karesztrk/webcomponent-base";
+
+class MarkdownContext extends LightElement {
+  constructor() {
+    super();
+    this.init();
+  }
+
+  /**
+   * Initializes the context.
+   * @returns {Promise<void>} href
+   */
+  init() {
+    return new Promise((resolve, reject) => {
+      if (this.href) {
+        init(this.href)
+          .then(() => {
+            resolve();
+          })
+          .catch(() => reject());
+      } else {
+        reject();
+      }
+    });
+  }
+
+  get href() {
+    return this.getAttribute("href");
+  }
+
+  render() {}
+}
+
+export default MarkdownContext;
diff --git a/packages/webcomponent/src/index.js b/packages/webcomponent/src/index.js
new file mode 100644
index 0000000..1498ba5
--- /dev/null
+++ b/packages/webcomponent/src/index.js
@@ -0,0 +1,4 @@
+import MarkdownContext from "./MarkdownContext";
+import MarkdownContent from "./MarkdownContent";
+
+export { MarkdownContext, MarkdownContent };
diff --git a/packages/webcomponent/tsconfig.json b/packages/webcomponent/tsconfig.json
new file mode 100644
index 0000000..92f53c8
--- /dev/null
+++ b/packages/webcomponent/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "include": ["./*.js", "./src/"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "target": "esnext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "noEmitOnError": true,
+    "noErrorTruncation": true,
+    "allowSyntheticDefaultImports": true,
+    "verbatimModuleSyntax": true,
+    "strict": true,
+    "allowJs": true,
+    "checkJs": true
+  }
+}
diff --git a/packages/webcomponent/types/index.d.ts b/packages/webcomponent/types/index.d.ts
new file mode 100644
index 0000000..c99ebf8
--- /dev/null
+++ b/packages/webcomponent/types/index.d.ts
@@ -0,0 +1,23 @@
+declare module 'md4wc' {
+	import type { LightElement } from '@karesztrk/webcomponent-base';
+	export default MarkdownContext;
+	class MarkdownContext extends LightElement {
+		/**
+		 * Initializes the context.
+		 * @returns href
+		 */
+		init(): Promise<void>;
+		get href(): string | null;
+	}
+	export default MarkdownContent;
+	class MarkdownContent extends LightElement {
+		/**
+		 * @type {string| undefined} content
+		 */
+		content: string | undefined;
+	}
+
+	export { MarkdownContext, MarkdownContent };
+}
+
+//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/packages/webcomponent/types/index.d.ts.map b/packages/webcomponent/types/index.d.ts.map
new file mode 100644
index 0000000..664a3f0
--- /dev/null
+++ b/packages/webcomponent/types/index.d.ts.map
@@ -0,0 +1,9 @@
+{
+	"version": 3,
+	"file": "index.d.ts",
+	"names": [],
+	"sources": [],
+	"sourcesContent": [],
+	"mappings": "",
+	"ignoreList": []
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..a1ee8f1
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,553 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .: {}
+
+  packages/core: {}
+
+  packages/webcomponent:
+    dependencies:
+      '@karesztrk/webcomponent-base':
+        specifier: ^1.0.9
+        version: 1.0.9
+      md4w:
+        specifier: workspace:*
+        version: link:../core
+    devDependencies:
+      '@rollup/plugin-node-resolve':
+        specifier: ^15.2.3
+        version: 15.2.3(rollup@4.19.0)
+      '@rollup/plugin-terser':
+        specifier: ^0.4.4
+        version: 0.4.4(rollup@4.19.0)
+      dts-buddy:
+        specifier: ^0.5.1
+        version: 0.5.1(typescript@5.5.4)
+      prettier:
+        specifier: ^3.3.3
+        version: 3.3.3
+      rollup:
+        specifier: ^4.19.0
+        version: 4.19.0
+
+packages:
+
+  '@jridgewell/gen-mapping@0.3.5':
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/source-map@0.3.6':
+    resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==}
+
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
+  '@karesztrk/webcomponent-base@1.0.9':
+    resolution: {integrity: sha512-rlHiPm2XQv/BpRFIQYIWVKCRFMzNGZb9TupRNc6GKUf7s4nUDMK9klpyrrC0/8nBEysMwVUcAv6bnSG8IjOqUg==}
+
+  '@rollup/plugin-node-resolve@15.2.3':
+    resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/plugin-terser@0.4.4':
+    resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/pluginutils@5.1.0':
+    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/rollup-android-arm-eabi@4.19.0':
+    resolution: {integrity: sha512-JlPfZ/C7yn5S5p0yKk7uhHTTnFlvTgLetl2VxqE518QgyM7C9bSfFTYvB/Q/ftkq0RIPY4ySxTz+/wKJ/dXC0w==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.19.0':
+    resolution: {integrity: sha512-RDxUSY8D1tWYfn00DDi5myxKgOk6RvWPxhmWexcICt/MEC6yEMr4HNCu1sXXYLw8iAsg0D44NuU+qNq7zVWCrw==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.19.0':
+    resolution: {integrity: sha512-emvKHL4B15x6nlNTBMtIaC9tLPRpeA5jMvRLXVbl/W9Ie7HhkrE7KQjvgS9uxgatL1HmHWDXk5TTS4IaNJxbAA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.19.0':
+    resolution: {integrity: sha512-fO28cWA1dC57qCd+D0rfLC4VPbh6EOJXrreBmFLWPGI9dpMlER2YwSPZzSGfq11XgcEpPukPTfEVFtw2q2nYJg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.19.0':
+    resolution: {integrity: sha512-2Rn36Ubxdv32NUcfm0wB1tgKqkQuft00PtM23VqLuCUR4N5jcNWDoV5iBC9jeGdgS38WK66ElncprqgMUOyomw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.19.0':
+    resolution: {integrity: sha512-gJuzIVdq/X1ZA2bHeCGCISe0VWqCoNT8BvkQ+BfsixXwTOndhtLUpOg0A1Fcx/+eA6ei6rMBzlOz4JzmiDw7JQ==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.19.0':
+    resolution: {integrity: sha512-0EkX2HYPkSADo9cfeGFoQ7R0/wTKb7q6DdwI4Yn/ULFE1wuRRCHybxpl2goQrx4c/yzK3I8OlgtBu4xvted0ug==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.19.0':
+    resolution: {integrity: sha512-GlIQRj9px52ISomIOEUq/IojLZqzkvRpdP3cLgIE1wUWaiU5Takwlzpz002q0Nxxr1y2ZgxC2obWxjr13lvxNQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.19.0':
+    resolution: {integrity: sha512-N6cFJzssruDLUOKfEKeovCKiHcdwVYOT1Hs6dovDQ61+Y9n3Ek4zXvtghPPelt6U0AH4aDGnDLb83uiJMkWYzQ==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.19.0':
+    resolution: {integrity: sha512-2DnD3mkS2uuam/alF+I7M84koGwvn3ZVD7uG+LEWpyzo/bq8+kKnus2EVCkcvh6PlNB8QPNFOz6fWd5N8o1CYg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.19.0':
+    resolution: {integrity: sha512-D6pkaF7OpE7lzlTOFCB2m3Ngzu2ykw40Nka9WmKGUOTS3xcIieHe82slQlNq69sVB04ch73thKYIWz/Ian8DUA==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.19.0':
+    resolution: {integrity: sha512-HBndjQLP8OsdJNSxpNIN0einbDmRFg9+UQeZV1eiYupIRuZsDEoeGU43NQsS34Pp166DtwQOnpcbV/zQxM+rWA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.19.0':
+    resolution: {integrity: sha512-HxfbvfCKJe/RMYJJn0a12eiOI9OOtAUF4G6ozrFUK95BNyoJaSiBjIOHjZskTUffUrB84IPKkFG9H9nEvJGW6A==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-win32-arm64-msvc@4.19.0':
+    resolution: {integrity: sha512-HxDMKIhmcguGTiP5TsLNolwBUK3nGGUEoV/BO9ldUBoMLBssvh4J0X8pf11i1fTV7WShWItB1bKAKjX4RQeYmg==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.19.0':
+    resolution: {integrity: sha512-xItlIAZZaiG/u0wooGzRsx11rokP4qyc/79LkAOdznGRAbOFc+SfEdfUOszG1odsHNgwippUJavag/+W/Etc6Q==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.19.0':
+    resolution: {integrity: sha512-xNo5fV5ycvCCKqiZcpB65VMR11NJB+StnxHz20jdqRAktfdfzhgjTiJ2doTDQE/7dqGaV5I7ZGqKpgph6lCIag==}
+    cpu: [x64]
+    os: [win32]
+
+  '@types/estree@1.0.5':
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+
+  '@types/resolve@1.20.2':
+    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
+
+  acorn@8.12.1:
+    resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  builtin-modules@3.3.0:
+    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
+    engines: {node: '>=6'}
+
+  commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  dts-buddy@0.5.1:
+    resolution: {integrity: sha512-naiM3F8hSlBIrMl+WyU9KQsC+Vd0i9jVBeksQ5IsH9Rfzpqx27TmSCftlsY9UxFxAWxoGcf5EB3p1xi0JxWzPw==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.4 <5.6'
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  globalyzer@0.1.0:
+    resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
+
+  globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  is-builtin-module@3.2.1:
+    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
+    engines: {node: '>=6'}
+
+  is-core-module@2.15.0:
+    resolution: {integrity: sha512-Dd+Lb2/zvk9SKy1TGCt1wFJFo/MWBPMX5x7KcvLajWTGuomczdQX61PvY5yK6SVACwpoexWo81IfFyoKY2QnTA==}
+    engines: {node: '>= 0.4'}
+
+  is-module@1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
+  locate-character@3.0.0:
+    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
+
+  magic-string@0.30.10:
+    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
+
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  prettier@3.3.3:
+    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  randombytes@2.1.0:
+    resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
+
+  resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+    hasBin: true
+
+  rollup@4.19.0:
+    resolution: {integrity: sha512-5r7EYSQIowHsK4eTZ0Y81qpZuJz+MUuYeqmmYmRMl1nwhdmbiYqt5jwzf6u7wyOzJgYqtCRMtVRKOtHANBz7rA==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  sade@1.8.1:
+    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
+    engines: {node: '>=6'}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  serialize-javascript@6.0.2:
+    resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
+
+  smob@1.5.0:
+    resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
+
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  terser@5.31.3:
+    resolution: {integrity: sha512-pAfYn3NIZLyZpa83ZKigvj6Rn9c/vd5KfYGX7cN1mnzqgDcxWvrU5ZtAfIKhEXz9nRecw4z3LXkjaq96/qZqAA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  tiny-glob@0.2.9:
+    resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
+
+  ts-api-utils@1.3.0:
+    resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+
+  typescript@5.5.4:
+    resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+snapshots:
+
+  '@jridgewell/gen-mapping@0.3.5':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/set-array@1.2.1': {}
+
+  '@jridgewell/source-map@0.3.6':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  '@karesztrk/webcomponent-base@1.0.9': {}
+
+  '@rollup/plugin-node-resolve@15.2.3(rollup@4.19.0)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.19.0)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-builtin-module: 3.2.1
+      is-module: 1.0.0
+      resolve: 1.22.8
+    optionalDependencies:
+      rollup: 4.19.0
+
+  '@rollup/plugin-terser@0.4.4(rollup@4.19.0)':
+    dependencies:
+      serialize-javascript: 6.0.2
+      smob: 1.5.0
+      terser: 5.31.3
+    optionalDependencies:
+      rollup: 4.19.0
+
+  '@rollup/pluginutils@5.1.0(rollup@4.19.0)':
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    optionalDependencies:
+      rollup: 4.19.0
+
+  '@rollup/rollup-android-arm-eabi@4.19.0':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.19.0':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.19.0':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.19.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.19.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.19.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.19.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.19.0':
+    optional: true
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.19.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.19.0':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.19.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.19.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.19.0':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.19.0':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.19.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.19.0':
+    optional: true
+
+  '@types/estree@1.0.5': {}
+
+  '@types/resolve@1.20.2': {}
+
+  acorn@8.12.1: {}
+
+  buffer-from@1.1.2: {}
+
+  builtin-modules@3.3.0: {}
+
+  commander@2.20.3: {}
+
+  deepmerge@4.3.1: {}
+
+  dts-buddy@0.5.1(typescript@5.5.4):
+    dependencies:
+      '@jridgewell/source-map': 0.3.6
+      '@jridgewell/sourcemap-codec': 1.5.0
+      globrex: 0.1.2
+      kleur: 4.1.5
+      locate-character: 3.0.0
+      magic-string: 0.30.10
+      sade: 1.8.1
+      tiny-glob: 0.2.9
+      ts-api-utils: 1.3.0(typescript@5.5.4)
+      typescript: 5.5.4
+
+  estree-walker@2.0.2: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  globalyzer@0.1.0: {}
+
+  globrex@0.1.2: {}
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  is-builtin-module@3.2.1:
+    dependencies:
+      builtin-modules: 3.3.0
+
+  is-core-module@2.15.0:
+    dependencies:
+      hasown: 2.0.2
+
+  is-module@1.0.0: {}
+
+  kleur@4.1.5: {}
+
+  locate-character@3.0.0: {}
+
+  magic-string@0.30.10:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
+  mri@1.2.0: {}
+
+  path-parse@1.0.7: {}
+
+  picomatch@2.3.1: {}
+
+  prettier@3.3.3: {}
+
+  randombytes@2.1.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  resolve@1.22.8:
+    dependencies:
+      is-core-module: 2.15.0
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  rollup@4.19.0:
+    dependencies:
+      '@types/estree': 1.0.5
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.19.0
+      '@rollup/rollup-android-arm64': 4.19.0
+      '@rollup/rollup-darwin-arm64': 4.19.0
+      '@rollup/rollup-darwin-x64': 4.19.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.19.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.19.0
+      '@rollup/rollup-linux-arm64-gnu': 4.19.0
+      '@rollup/rollup-linux-arm64-musl': 4.19.0
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.19.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.19.0
+      '@rollup/rollup-linux-s390x-gnu': 4.19.0
+      '@rollup/rollup-linux-x64-gnu': 4.19.0
+      '@rollup/rollup-linux-x64-musl': 4.19.0
+      '@rollup/rollup-win32-arm64-msvc': 4.19.0
+      '@rollup/rollup-win32-ia32-msvc': 4.19.0
+      '@rollup/rollup-win32-x64-msvc': 4.19.0
+      fsevents: 2.3.3
+
+  sade@1.8.1:
+    dependencies:
+      mri: 1.2.0
+
+  safe-buffer@5.2.1: {}
+
+  serialize-javascript@6.0.2:
+    dependencies:
+      randombytes: 2.1.0
+
+  smob@1.5.0: {}
+
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map@0.6.1: {}
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  terser@5.31.3:
+    dependencies:
+      '@jridgewell/source-map': 0.3.6
+      acorn: 8.12.1
+      commander: 2.20.3
+      source-map-support: 0.5.21
+
+  tiny-glob@0.2.9:
+    dependencies:
+      globalyzer: 0.1.0
+      globrex: 0.1.2
+
+  ts-api-utils@1.3.0(typescript@5.5.4):
+    dependencies:
+      typescript: 5.5.4
+
+  typescript@5.5.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..dee51e9
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+packages:
+  - "packages/*"