From 329dc382ab95964971d66cf156e09234518a573b Mon Sep 17 00:00:00 2001
From: defunkt-dev <mydevprep@gmail.com>
Date: Mon, 22 Jun 2026 16:14:45 -0600
Subject: [PATCH 1/5] feat: marko v6 auto-animate integration

---
 build/bundle.ts                      |  27 +-
 marko.json                           |   3 +
 package.json                         |  15 +-
 pnpm-lock.yaml                       | 443 +++++++++++++++++++++++++++
 src/marko/auto-animate.marko         |  48 +++
 tests/marko/App.marko                |  46 +++
 tests/marko/index.html               |  12 +
 tests/marko/main.ts                  |   6 +
 tests/marko/marko-animations.spec.ts |  79 +++++
 tests/marko/playwright.config.ts     |  37 +++
 tests/marko/vite.config.ts           |  18 ++
 11 files changed, 729 insertions(+), 5 deletions(-)
 create mode 100644 marko.json
 create mode 100644 src/marko/auto-animate.marko
 create mode 100644 tests/marko/App.marko
 create mode 100644 tests/marko/index.html
 create mode 100644 tests/marko/main.ts
 create mode 100644 tests/marko/marko-animations.spec.ts
 create mode 100644 tests/marko/playwright.config.ts
 create mode 100644 tests/marko/vite.config.ts

diff --git a/build/bundle.ts b/build/bundle.ts
index 9ebff09f..16b5afe6 100644
--- a/build/bundle.ts
+++ b/build/bundle.ts
@@ -208,6 +208,22 @@ async function bundleDeclarations() {
   await execa("shx", ["rm", `${rootDir}/dist/index.js`])
 }
 
+async function markoBuild() {
+  info("Copying Marko tag")
+  await execa("shx", ["mkdir", "-p", `${rootDir}/dist/tags`])
+  await execa("shx", [
+    "cp",
+    `${rootDir}/src/marko/auto-animate.marko`,
+    `${rootDir}/dist/tags/auto-animate.marko`,
+  ])
+  // The taglib manifest (marko.json) is a committed static file, copied to dist
+  // by addAssets() alongside README/LICENSE — see there. The tag's `../index`
+  // import is left extensionless on purpose: it is NOT compiled by rollup (the
+  // consumer's @marko/vite compiles it), and Vite resolves the extension to
+  // `index.mjs` in dist and to `index.ts` against source in a dev harness — so
+  // no `.mjs` fixup is needed here, unlike the JS-framework builds.
+}
+
 async function addPackageJSON() {
   info("Writing package.json")
   const raw = await readFile(resolve(rootDir, "package.json"), "utf8")
@@ -222,13 +238,21 @@ async function addPackageJSON() {
 }
 
 async function addAssets() {
-  info("Writing readme and license.")
+  info("Writing readme, license, and marko manifest.")
   await execa("shx", [
     "cp",
     `${rootDir}/README.md`,
     `${rootDir}/dist/README.md`,
   ])
   await execa("shx", ["cp", `${rootDir}/LICENSE`, `${rootDir}/dist/LICENSE`])
+  // marko.json is a committed, static taglib manifest — copied verbatim like
+  // README/LICENSE, never generated. Its "exports" path is authored relative to
+  // the published package root (dist), so "./tags" resolves to dist/tags.
+  await execa("shx", [
+    "cp",
+    `${rootDir}/marko.json`,
+    `${rootDir}/dist/marko.json`,
+  ])
 }
 
 async function prepareForPublishing() {
@@ -291,6 +315,7 @@ async function main() {
   if (!process.env.NO_NUXT) {
     await nuxtBuild()
   }
+  await markoBuild()
   await addPackageJSON()
   await addAssets()
   await outputSize()
diff --git a/marko.json b/marko.json
new file mode 100644
index 00000000..cd3ec886
--- /dev/null
+++ b/marko.json
@@ -0,0 +1,3 @@
+{
+  "exports": "./tags"
+}
diff --git a/package.json b/package.json
index 3ee39e04..75107ac2 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "vue",
     "angular",
     "svelte",
-    "solid"
+    "solid",
+    "marko"
   ],
   "type": "module",
   "main": "index.mjs",
@@ -54,6 +55,9 @@
       "import": "./solid/index.mjs",
       "default": "./solid/index.mjs"
     },
+    "./marko": {
+      "default": "./tags/auto-animate.marko"
+    },
     "./angular": {
       "types": "./angular/index.d.ts",
       "import": "./angular/index.mjs",
@@ -74,6 +78,8 @@
   "devDependencies": {
     "@angular/core": "^17.1.0",
     "@formkit/vue": "^1.6.5",
+    "@marko/compiler": "^5.39.65",
+    "@marko/vite": "^5.4.10",
     "@nuxt/kit": "^3.12.4",
     "@nuxt/module-builder": "^0.8.3",
     "@nuxt/schema": "^3.12.4",
@@ -92,9 +98,12 @@
     "consola": "^3.2.3",
     "execa": "^6.1.0",
     "jiti": "^1.21.6",
+    "marko": "^6.1.15",
     "mlly": "^1.7.1",
     "nuxi": "^3.12.0",
     "pathe": "^1.1.2",
+    "pixelmatch": "^5.3.0",
+    "pngjs": "^7.0.0",
     "preact": "^10.23.2",
     "pretty-bytes": "^6.1.1",
     "prompts": "^2.4.2",
@@ -109,9 +118,7 @@
     "vite-ssg": "^28.1.0",
     "vue": "^3.5.0",
     "vue-github-button": "^3.1.3",
-    "vue-router": "^4.4.3",
-    "pixelmatch": "^5.3.0",
-    "pngjs": "^7.0.0"
+    "vue-router": "^4.4.3"
   },
   "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eb376758..e7384165 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,12 @@ importers:
       '@formkit/vue':
         specifier: ^1.6.5
         version: 1.6.9(vue@3.5.25(typescript@5.9.3))
+      '@marko/compiler':
+        specifier: ^5.39.65
+        version: 5.39.65
+      '@marko/vite':
+        specifier: ^5.4.10
+        version: 5.4.10(@marko/compiler@5.39.65)(vite@7.3.0(@types/node@20.19.27)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2))
       '@nuxt/kit':
         specifier: ^3.12.4
         version: 3.20.2
@@ -68,6 +74,9 @@ importers:
       jiti:
         specifier: ^1.21.6
         version: 1.21.7
+      marko:
+        specifier: ^6.1.15
+        version: 6.1.15
       mlly:
         specifier: ^1.7.1
         version: 1.8.0
@@ -221,6 +230,10 @@ packages:
     resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
 
+  '@chialab/estransform@0.19.1':
+    resolution: {integrity: sha512-Op0TvQxnzdcnBriFUIjgg3V3MpOB9Cfs4S7TvIuypPegFOSvuFAOcPl5V02NJ9dyGoOc8W6ORbSldc5PYKhOCQ==}
+    engines: {node: '>=18'}
+
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
     engines: {node: '>=18'}
@@ -761,6 +774,102 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@luxass/strip-json-comments@1.4.0':
+    resolution: {integrity: sha512-Zl343to4u/t8jz1q7R/1UY6hLX+344cwPLEXsIYthVwdU5zyjuVBGcpf2E24+QZkwFfRfmnHTcscreQzWn3hiA==}
+    engines: {node: '>=18'}
+
+  '@marko/compiler@5.39.65':
+    resolution: {integrity: sha512-m8RLnKj8OqYu8/wXCTw9ftSgsBJfHH/4VUdVDSq106ibXDiv5K+RXIi2BsIV4JVlEjClM64P0b34+S56d0Gb7Q==}
+    engines: {node: 18 || 20 || >=22}
+
+  '@marko/vite@5.4.10':
+    resolution: {integrity: sha512-4HAyrAJmmjVYkVIF72FRAjh4CdqYMEGGErQ8cCBtxDRpvgB24uaTE9uGSdz7BmU0Z8fwgfNcjuO4HXQrluJrQw==}
+    peerDependencies:
+      '@marko/compiler': ^5
+      vite: 4 - 8
+
+  '@napi-rs/magic-string-android-arm-eabi@0.3.4':
+    resolution: {integrity: sha512-sszAYxqtzzJ4FDerDNHcqL9NhqPhj8W4DNiOanXYy50mA5oojlRtaAFPiB5ZMrWDBM32v5Q30LrmxQ4eTtu2Dg==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [android]
+
+  '@napi-rs/magic-string-android-arm64@0.3.4':
+    resolution: {integrity: sha512-jdQ6HuO0X5rkX4MauTcWR4HWdgjakTOmmzqXg8L26+jOHVVG1LZE+Su5qvV4bP8vMb2h+vPE+JsnwqSmWymu3Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@napi-rs/magic-string-darwin-arm64@0.3.4':
+    resolution: {integrity: sha512-6NmMtvURce9/oq09XBZmuIeI6lPLGtEJ2ZPO/QzL3nLZa6wygiCnO/sFACKYNg5/73ET5HMMTeuogE1JI+r2Lw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@napi-rs/magic-string-darwin-x64@0.3.4':
+    resolution: {integrity: sha512-f9LmfMiUAKDOtl0meOuLYeVb6OERrgGzrTg1Tn3R3fTAShM2kxRbfAuPE9ljuXxIFzOv/uqRNLSl/LqCJwpREA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@napi-rs/magic-string-freebsd-x64@0.3.4':
+    resolution: {integrity: sha512-rqduQ4odiDK4QdM45xHWRTU4wtFIfpp8g8QGpz+3qqg7ivldDqbbNOrBaf6Oeu77uuEvWggnkyuChotfKgJdJQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@napi-rs/magic-string-linux-arm-gnueabihf@0.3.4':
+    resolution: {integrity: sha512-pVaJEdEpiPqIfq3M4+yMAATS7Z9muDcWYn8H7GFH1ygh8GwgLgKfy/n/lG2M6zp18Mwd0x7E2E/qg9GgCyUzoQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@napi-rs/magic-string-linux-arm64-gnu@0.3.4':
+    resolution: {integrity: sha512-9FwoAih/0tzEZx0BjYYIxWkSRMjonIn91RFM3q3MBs/evmThXUYXUqLNa1PPIkK1JoksswtDi48qWWLt8nGflQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@napi-rs/magic-string-linux-arm64-musl@0.3.4':
+    resolution: {integrity: sha512-wCR7R+WPOcAKmVQc1s6h6HwfwW1vL9pM8BjUY9Ljkdb8wt1LmZEmV2Sgfc1SfbRQzbyl+pKeufP6adRRQVzYDA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@napi-rs/magic-string-linux-x64-gnu@0.3.4':
+    resolution: {integrity: sha512-sbxFDpYnt5WFbxQ1xozwOvh5A7IftqSI0WnE9O7KsQIOi0ej2dvFbfOW4tmFkvH/YP8KJELo5AhP2+kEq1DpYA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@napi-rs/magic-string-linux-x64-musl@0.3.4':
+    resolution: {integrity: sha512-jN4h/7e2Ul8v3UK5IZu38NXLMdzVWhY4uEDlnwuUAhwRh26wBQ1/pLD97Uy/Z3dFNBQPcsv60XS9fOM1YDNT6w==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@napi-rs/magic-string-win32-arm64-msvc@0.3.4':
+    resolution: {integrity: sha512-gMUyTRHLWpzX2ntJFCbW2Gnla9Y/WUmbkZuW5SBAo/Jo8QojHn76Y4PNgnoXdzcsV9b/45RBxurYKAfFg9WTyg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@napi-rs/magic-string-win32-ia32-msvc@0.3.4':
+    resolution: {integrity: sha512-QIMauMOvEHgL00K9np/c9CT/CRtLOz3mRTQqcZ9XGzSoAMrpxH71KSpDJrKl7h7Ro6TZ+hJ0C3T+JVuTCZNv4A==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@napi-rs/magic-string-win32-x64-msvc@0.3.4':
+    resolution: {integrity: sha512-V8FMSf828MzOI3P6/765MR7zHU6CUZqiyPhmAnwYoKFNxfv7oCviN/G6NcENeCdcYOvNgh5fYzaNLB96ndId5A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@napi-rs/magic-string@0.3.4':
+    resolution: {integrity: sha512-DEWl/B99RQsyMT3F9bvrXuhL01/eIQp/dtNSE3G1jQ4mTGRcP4iHWxoPZ577WrbjUinrNgvRA5+08g8fkPgimQ==}
+    engines: {node: '>= 10'}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -788,6 +897,50 @@ packages:
     resolution: {integrity: sha512-fp584AiXON7vI6NDDpNTjxiJ485iM/ztJSPX9CqptKUNjULhBy9qlacF9+NiwQqxlEs3zvbxHpo/1qLPNSb4MQ==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
+  '@oxc-parser/binding-darwin-arm64@0.8.0':
+    resolution: {integrity: sha512-3Dws5Wzj9efojjqvhS4ZF+Abh0EoiI5ciOE2kdLifMzSg4fnmYAIOktoUnPEo87TNIb4SiFJ5JgPBgEyq42Eow==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.8.0':
+    resolution: {integrity: sha512-DAUJ/mfq0Jn2VDYn69bhHTsIWj+aZ/viamexFwaLL7ntkIFmGpzAJZUlWofpY1IRJynKWW+P5AOLYXMllw4qUw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.8.0':
+    resolution: {integrity: sha512-ZHQVey/O4K3zTIKtpfsbtJIE8MPTRHRxgY3dejaoeFQGf9C3HasgF132Yp4zN/jOUx+x8czKPVa/Af40ViyhGQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.8.0':
+    resolution: {integrity: sha512-Diw+Tnf5v+zAYXzDoSKCZsMaroU6GoqZMS7smfDtFnZYTHWZrsTmPBLUQe7AFiG7O7tkhsCdcWjOYgbVkrSVOA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.8.0':
+    resolution: {integrity: sha512-WloqcRrtQUVEP/Sy8ZeEgF0HgBKQjOv3zLFZqbC5ipkerKriGcVbsq3fOIMOi/55AM6/UhIAjeZGnoeco72JjQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-x64-musl@0.8.0':
+    resolution: {integrity: sha512-2j7BD9szwSXTvSj0Q8VE98UHGYvrgZzdLy4EyB0FilhQnopEfz+YV674rWGY2Il1VYxHJwGctrTJHvARolu37g==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.8.0':
+    resolution: {integrity: sha512-mcomr1og17yCmnwn8Q7CRzrH9Va0HccWe4Ld3/u/elBsw0SEzYGVvECRzCyRglYAbKTtusz7as9Jee0RiMOMmg==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.8.0':
+    resolution: {integrity: sha512-nIBkc1KZOVYUaHT3+U+gM354P3byMAIXMvlmLMbs0kWVRcI4vrzL8qwWpC6QdBQxWKZGqPEqGolv8H4dDYA9nQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/source-map@2.1.1':
+    resolution: {integrity: sha512-Ejx1P/mj+kMjQb8/y5XxDUn4reGdr+WyKYloBljpppUy8gs42T+BNoEOuRYqDVdgPc6NxduzIDoJS9pOFfV5Ew==}
+    engines: {node: ^12.18.3 || >=14}
+
   '@playwright/test@1.57.0':
     resolution: {integrity: sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==}
     engines: {node: '>=18'}
@@ -1084,6 +1237,10 @@ packages:
     resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
     engines: {node: '>=14'}
 
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
   args-tokenizer@0.3.0:
     resolution: {integrity: sha512-xXAd7G2Mll5W8uo37GETpQ2VrE84M181Z7ugHFGQnJZ50M2mbOv0osSZ9VsSgPfJQ+LVG0prSi0th+ELMsno7Q==}
 
@@ -1166,6 +1323,9 @@ packages:
   citty@0.1.6:
     resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
 
+  cjs-module-lexer@1.4.3:
+    resolution: {integrity: sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==}
+
   clean-css@5.3.3:
     resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
     engines: {node: '>= 10.0'}
@@ -1187,6 +1347,9 @@ packages:
   commondir@1.0.1:
     resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
 
+  complain@1.6.1:
+    resolution: {integrity: sha512-WsiVAbAPcPSwyC5k8g/PLceaW0MXJUw61KqBd9uiyDOSuDIC6Ho/EbyhdFjeV6wq44R2g/b8IFpvV/1ZyXiqUQ==}
+
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
@@ -1288,6 +1451,11 @@ packages:
   destr@2.0.5:
     resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
 
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -1326,9 +1494,19 @@ packages:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
 
+  entities@7.0.1:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
+    engines: {node: '>=0.12'}
+
+  error-stack-parser@2.1.4:
+    resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
+
   errx@0.1.0:
     resolution: {integrity: sha512-fZmsRiDNv07K6s2KkKFTiD2aIvECa7++PKyD5NC32tpRw46qZA3sOz+aM+/V9V0GDHxVTKLziveV4JhzBHDp9Q==}
 
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
   esbuild@0.19.12:
     resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==}
     engines: {node: '>=12'}
@@ -1365,6 +1543,10 @@ packages:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
 
+  fastest-levenshtein@1.0.16:
+    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
+    engines: {node: '>= 4.9.1'}
+
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
@@ -1436,6 +1618,10 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -1451,6 +1637,12 @@ packages:
   html5parser@2.0.2:
     resolution: {integrity: sha512-L0y+IdTVxHsovmye8MBtFgBvWZnq1C9WnI/SmJszxoQjmUH1psX2uzDk21O5k5et6udxdGjwxkbmT9eVRoG05w==}
 
+  htmljs-parser@5.11.0:
+    resolution: {integrity: sha512-YXdNqYB/FChJMpCG+UfVS/q/zfFErui92zIIduCFT71C3F6+lZWE4K6l5nGfFWQ2w4GCkgH/eEWQ1nWayBXIDQ==}
+
+  htmlparser2@10.1.0:
+    resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==}
+
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -1555,6 +1747,10 @@ packages:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
 
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
   klona@2.0.6:
     resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
     engines: {node: '>= 8'}
@@ -1562,6 +1758,12 @@ packages:
   knitwork@1.3.0:
     resolution: {integrity: sha512-4LqMNoONzR43B1W0ek0fhXMsDNW/zxa1NdFAVMY+k28pgZLovR4G3PB5MrpTxCy1QaZCqNoiaKPr5w5qZHfSNw==}
 
+  lasso-caching-fs@1.0.2:
+    resolution: {integrity: sha512-mudop0s8U3tLm3Fn9lhiZsiELpLeJToEo6RlDLdph7vWRxL9Sz0o+9WUw1IwlpCYXv/P0CLsMYWFgPwIKWEYvg==}
+
+  lasso-package-root@1.0.1:
+    resolution: {integrity: sha512-j6LnauNCldqSDvOxoKpD6sTzudPGMiwcZQbySoF9KvJ0lD9Dp2t6QZF8kC0jbUDHuQPiAo5RuQ/mC3AGXscUYA==}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -1588,6 +1790,10 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  marko@6.1.15:
+    resolution: {integrity: sha512-X0pt2BqquwnFkPHnmZIJm+48bjY4O3sJL/DNpQ+/cFo/TCUHt68ShDBhbFPwPsmtGIy6KwqKLOBhCxpVMyu1Tw==}
+    engines: {node: '>=22'}
+
   mdn-data@2.0.28:
     resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
 
@@ -1654,6 +1860,10 @@ packages:
   node-releases@2.0.27:
     resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
   npm-run-path@5.3.0:
     resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -1681,6 +1891,9 @@ packages:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
 
+  oxc-parser@0.8.0:
+    resolution: {integrity: sha512-ObPeMkbDX7igb7NyyAC8CbVC3fY+YmlMsxsRQ2oyFBkpQtI5tjoyqSDKbS9A9EcJvt2q89C4UoC+HjVBdLYYJg==}
+
   package-manager-detector@1.6.0:
     resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
 
@@ -1967,6 +2180,15 @@ packages:
   randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
 
+  raptor-async@1.1.3:
+    resolution: {integrity: sha512-VZCxygWMjW9lKqnApK9D2QbfyzRn7ehiTqnXWwMCLBXANSy+xbnYfbX/5f8YX3bZXu+g+JESmqWPchIQrZj2ig==}
+
+  raptor-regexp@1.0.1:
+    resolution: {integrity: sha512-DqC7ViHJUs3jLIxJI1/HVvCu3yPJaP8CM7PGsHvjimg7yJ3lLOdCBxlPE0G2Q8OJgUA8Pe7nvhm6lcQ3hZepow==}
+
+  raptor-util@3.2.0:
+    resolution: {integrity: sha512-uEDMMkBCJvjTqYMBnJNxn+neiS6a0rhybQNA9RaexGor1uvKjwyHA5VcbZMZEuqXhKUWbL+WNS7PhuZVZNB7pw==}
+
   rc9@2.1.2:
     resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
 
@@ -1990,10 +2212,21 @@ packages:
     resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
     engines: {node: '>= 0.10'}
 
+  relative-import-path@1.0.0:
+    resolution: {integrity: sha512-ZvbtoduKQmD4PZeJPfH6Ql21qUWhaMxiHkIsH+FUnZqKDwNIXBtGg5zRZyHWomiGYk8n5+KMBPK7Mi4D0XWfNg==}
+
   require-from-string@2.0.2:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
+  resolve.exports@2.0.3:
+    resolution: {integrity: sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==}
+    engines: {node: '>=10'}
+
   resolve@1.22.11:
     resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
     engines: {node: '>= 0.4'}
@@ -2042,6 +2275,10 @@ packages:
   scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
+  self-closing-tags@1.0.1:
+    resolution: {integrity: sha512-7t6hNbYMxM+VHXTgJmxwgZgLGktuXtVVD5AivWzNTdJBM4DBjnDKDzkf2SrNjihaArpeJYNjxkELBu1evI4lQA==}
+    engines: {node: '>=0.12.0'}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -2109,6 +2346,9 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  stackframe@1.3.4:
+    resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==}
+
   std-env@3.10.0:
     resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
 
@@ -2504,6 +2744,14 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@chialab/estransform@0.19.1':
+    dependencies:
+      '@napi-rs/magic-string': 0.3.4
+      '@parcel/source-map': 2.1.1
+      cjs-module-lexer: 1.4.3
+      es-module-lexer: 1.7.0
+      oxc-parser: 0.8.0
+
   '@csstools/color-helpers@5.1.0': {}
 
   '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
@@ -2834,6 +3082,93 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@luxass/strip-json-comments@1.4.0': {}
+
+  '@marko/compiler@5.39.65':
+    dependencies:
+      '@luxass/strip-json-comments': 1.4.0
+      complain: 1.6.1
+      he: 1.2.0
+      htmljs-parser: 5.11.0
+      jsesc: 3.1.0
+      kleur: 4.1.5
+      lasso-package-root: 1.0.1
+      raptor-regexp: 1.0.1
+      raptor-util: 3.2.0
+      relative-import-path: 1.0.0
+      resolve-from: 5.0.0
+      self-closing-tags: 1.0.1
+      source-map-support: 0.5.21
+
+  '@marko/vite@5.4.10(@marko/compiler@5.39.65)(vite@7.3.0(@types/node@20.19.27)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2))':
+    dependencies:
+      '@chialab/estransform': 0.19.1
+      '@marko/compiler': 5.39.65
+      anymatch: 3.1.3
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      fast-glob: 3.3.3
+      htmlparser2: 10.1.0
+      relative-import-path: 1.0.0
+      resolve: 1.22.11
+      resolve.exports: 2.0.3
+      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2)
+
+  '@napi-rs/magic-string-android-arm-eabi@0.3.4':
+    optional: true
+
+  '@napi-rs/magic-string-android-arm64@0.3.4':
+    optional: true
+
+  '@napi-rs/magic-string-darwin-arm64@0.3.4':
+    optional: true
+
+  '@napi-rs/magic-string-darwin-x64@0.3.4':
+    optional: true
+
+  '@napi-rs/magic-string-freebsd-x64@0.3.4':
+    optional: true
+
+  '@napi-rs/magic-string-linux-arm-gnueabihf@0.3.4':
+    optional: true
+
+  '@napi-rs/magic-string-linux-arm64-gnu@0.3.4':
+    optional: true
+
+  '@napi-rs/magic-string-linux-arm64-musl@0.3.4':
+    optional: true
+
+  '@napi-rs/magic-string-linux-x64-gnu@0.3.4':
+    optional: true
+
+  '@napi-rs/magic-string-linux-x64-musl@0.3.4':
+    optional: true
+
+  '@napi-rs/magic-string-win32-arm64-msvc@0.3.4':
+    optional: true
+
+  '@napi-rs/magic-string-win32-ia32-msvc@0.3.4':
+    optional: true
+
+  '@napi-rs/magic-string-win32-x64-msvc@0.3.4':
+    optional: true
+
+  '@napi-rs/magic-string@0.3.4':
+    optionalDependencies:
+      '@napi-rs/magic-string-android-arm-eabi': 0.3.4
+      '@napi-rs/magic-string-android-arm64': 0.3.4
+      '@napi-rs/magic-string-darwin-arm64': 0.3.4
+      '@napi-rs/magic-string-darwin-x64': 0.3.4
+      '@napi-rs/magic-string-freebsd-x64': 0.3.4
+      '@napi-rs/magic-string-linux-arm-gnueabihf': 0.3.4
+      '@napi-rs/magic-string-linux-arm64-gnu': 0.3.4
+      '@napi-rs/magic-string-linux-arm64-musl': 0.3.4
+      '@napi-rs/magic-string-linux-x64-gnu': 0.3.4
+      '@napi-rs/magic-string-linux-x64-musl': 0.3.4
+      '@napi-rs/magic-string-win32-arm64-msvc': 0.3.4
+      '@napi-rs/magic-string-win32-ia32-msvc': 0.3.4
+      '@napi-rs/magic-string-win32-x64-msvc': 0.3.4
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -2899,6 +3234,34 @@ snapshots:
       pkg-types: 2.3.0
       std-env: 3.10.0
 
+  '@oxc-parser/binding-darwin-arm64@0.8.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-x64@0.8.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.8.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-musl@0.8.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.8.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.8.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.8.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.8.0':
+    optional: true
+
+  '@parcel/source-map@2.1.1':
+    dependencies:
+      detect-libc: 1.0.3
+
   '@playwright/test@1.57.0':
     dependencies:
       playwright: 1.57.0
@@ -3175,6 +3538,11 @@ snapshots:
 
   ansis@4.2.0: {}
 
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
   args-tokenizer@0.3.0: {}
 
   autoprefixer@10.4.23(postcss@8.5.6):
@@ -3280,6 +3648,8 @@ snapshots:
     dependencies:
       consola: 3.4.2
 
+  cjs-module-lexer@1.4.3: {}
+
   clean-css@5.3.3:
     dependencies:
       source-map: 0.6.1
@@ -3294,6 +3664,10 @@ snapshots:
 
   commondir@1.0.1: {}
 
+  complain@1.6.1:
+    dependencies:
+      error-stack-parser: 2.1.4
+
   concat-map@0.0.1: {}
 
   confbox@0.1.8: {}
@@ -3411,6 +3785,8 @@ snapshots:
 
   destr@2.0.5: {}
 
+  detect-libc@1.0.3: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -3448,8 +3824,16 @@ snapshots:
 
   entities@6.0.1: {}
 
+  entities@7.0.1: {}
+
+  error-stack-parser@2.1.4:
+    dependencies:
+      stackframe: 1.3.4
+
   errx@0.1.0: {}
 
+  es-module-lexer@1.7.0: {}
+
   esbuild@0.19.12:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.19.12
@@ -3563,6 +3947,8 @@ snapshots:
       merge2: 1.4.1
       micromatch: 4.0.8
 
+  fastest-levenshtein@1.0.16: {}
+
   fastq@1.19.1:
     dependencies:
       reusify: 1.1.0
@@ -3635,6 +4021,8 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  he@1.2.0: {}
+
   hookable@5.5.3: {}
 
   html-encoding-sniffer@4.0.0:
@@ -3655,6 +4043,15 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  htmljs-parser@5.11.0: {}
+
+  htmlparser2@10.1.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 7.0.1
+
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.4
@@ -3754,10 +4151,20 @@ snapshots:
 
   kleur@3.0.3: {}
 
+  kleur@4.1.5: {}
+
   klona@2.0.6: {}
 
   knitwork@1.3.0: {}
 
+  lasso-caching-fs@1.0.2:
+    dependencies:
+      raptor-async: 1.1.3
+
+  lasso-package-root@1.0.1:
+    dependencies:
+      lasso-caching-fs: 1.0.2
+
   lilconfig@3.1.3: {}
 
   lodash.memoize@4.1.2: {}
@@ -3788,6 +4195,13 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  marko@6.1.15:
+    dependencies:
+      '@marko/compiler': 5.39.65
+      csstype: 3.2.3
+      fastest-levenshtein: 1.0.16
+      magic-string: 0.30.21
+
   mdn-data@2.0.28: {}
 
   mdn-data@2.12.2: {}
@@ -3851,6 +4265,8 @@ snapshots:
 
   node-releases@2.0.27: {}
 
+  normalize-path@3.0.0: {}
+
   npm-run-path@5.3.0:
     dependencies:
       path-key: 4.0.0
@@ -3879,6 +4295,17 @@ snapshots:
     dependencies:
       mimic-fn: 4.0.0
 
+  oxc-parser@0.8.0:
+    optionalDependencies:
+      '@oxc-parser/binding-darwin-arm64': 0.8.0
+      '@oxc-parser/binding-darwin-x64': 0.8.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.8.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.8.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.8.0
+      '@oxc-parser/binding-linux-x64-musl': 0.8.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.8.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.8.0
+
   package-manager-detector@1.6.0: {}
 
   packrup@0.1.2: {}
@@ -4136,6 +4563,12 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  raptor-async@1.1.3: {}
+
+  raptor-regexp@1.0.1: {}
+
+  raptor-util@3.2.0: {}
+
   rc9@2.1.2:
     dependencies:
       defu: 6.1.4
@@ -4153,8 +4586,14 @@ snapshots:
 
   relateurl@0.2.7: {}
 
+  relative-import-path@1.0.0: {}
+
   require-from-string@2.0.2: {}
 
+  resolve-from@5.0.0: {}
+
+  resolve.exports@2.0.3: {}
+
   resolve@1.22.11:
     dependencies:
       is-core-module: 2.16.1
@@ -4223,6 +4662,8 @@ snapshots:
 
   scule@1.3.0: {}
 
+  self-closing-tags@1.0.1: {}
+
   semver@6.3.1: {}
 
   semver@7.7.3: {}
@@ -4277,6 +4718,8 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  stackframe@1.3.4: {}
+
   std-env@3.10.0: {}
 
   strip-final-newline@3.0.0: {}
diff --git a/src/marko/auto-animate.marko b/src/marko/auto-animate.marko
new file mode 100644
index 00000000..76f78cdf
--- /dev/null
+++ b/src/marko/auto-animate.marko
@@ -0,0 +1,48 @@
+client import autoAnimate from "../index";
+import type {
+  AutoAnimateOptions,
+  AutoAnimationPlugin,
+  AnimationController,
+} from "../index";
+
+export interface Input {
+  // A reference to the parent element whose *direct children* will be animated.
+  // Pass a native element tag-variable, e.g. `<ul/listRef>` then `parent=listRef`.
+  parent: () => HTMLElement;
+  // auto-animate options (duration / easing / disrespectUserMotionPreference)
+  // OR a plugin function. Read once when the tag mounts; the core has no setOptions,
+  // so changing this later has no effect (remount the tag to apply new options).
+  options?: Partial<AutoAnimateOptions> | AutoAnimationPlugin;
+  // Reactively enable/disable animations. Defaults to true.
+  enabled?: boolean;
+}
+
+<lifecycle<{
+  controller?: AnimationController;
+  lastEnabled?: boolean;
+}>
+  onMount() {
+    const el = input.parent();
+    if (!el) return;
+    this.controller = autoAnimate(el, input.options ?? {});
+    this.lastEnabled = input.enabled ?? true;
+    if (this.lastEnabled === false) {
+      this.controller.disable();
+    }
+  }
+  onUpdate() {
+    if (!this.controller) return;
+    const enabled = input.enabled ?? true;
+    if (enabled !== this.lastEnabled) {
+      this.lastEnabled = enabled;
+      if (enabled) {
+        this.controller.enable();
+      } else {
+        this.controller.disable();
+      }
+    }
+  }
+  onDestroy() {
+    this.controller?.destroy?.();
+  }
+/>
diff --git a/tests/marko/App.marko b/tests/marko/App.marko
new file mode 100644
index 00000000..1b5cd47a
--- /dev/null
+++ b/tests/marko/App.marko
@@ -0,0 +1,46 @@
+import AutoAnimate from "../../src/marko/auto-animate.marko"
+
+<let/items = [
+  { id: 1, text: "Item 1" },
+  { id: 2, text: "Item 2" },
+  { id: 3, text: "Item 3" },
+]>
+<let/nextId = 4>
+<let/enabled = true>
+
+<main>
+  <div class="controls">
+    <button data-testid="add" onClick() {
+      items = [...items, { id: nextId, text: `Item ${nextId}` }];
+      nextId++;
+    }>
+      Add item
+    </button>
+
+    <button data-testid="remove-first" onClick() {
+      items = items.slice(1);
+    }>
+      Remove first
+    </button>
+
+    <button data-testid="reverse" onClick() {
+      items = [...items].reverse();
+    }>
+      Reverse order
+    </button>
+
+    <button data-testid="toggle" onClick() {
+      enabled = !enabled;
+    }>
+      Animations: ${enabled ? "on" : "off"}
+    </button>
+  </div>
+
+  <ul/listRef data-testid="list">
+    <for|item| of=items by="id">
+      <li data-testid=`item-${item.id}`>${item.text}</li>
+    </for>
+  </ul>
+
+  <AutoAnimate parent=listRef enabled=enabled/>
+</main>
diff --git a/tests/marko/index.html b/tests/marko/index.html
new file mode 100644
index 00000000..07743b3f
--- /dev/null
+++ b/tests/marko/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>auto-animate · Marko harness</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/tests/marko/main.ts b/tests/marko/main.ts
new file mode 100644
index 00000000..609f46a5
--- /dev/null
+++ b/tests/marko/main.ts
@@ -0,0 +1,6 @@
+import App from "./App.marko"
+
+const target = document.getElementById("app")
+if (target) {
+  App.mount({}, target)
+}
diff --git a/tests/marko/marko-animations.spec.ts b/tests/marko/marko-animations.spec.ts
new file mode 100644
index 00000000..ae71da1d
--- /dev/null
+++ b/tests/marko/marko-animations.spec.ts
@@ -0,0 +1,79 @@
+import { test, expect } from '@playwright/test'
+import { assertNoConsoleErrors, withAnimationObserver } from '../e2e/utils'
+
+// Served by the standalone Marko harness (this folder's playwright.config.ts sets
+// baseURL to the @marko/vite server on :5174), so we navigate to '/'.
+const LIST = '[data-testid="list"]'
+
+test.describe('Marko <auto-animate> adapter', () => {
+  test('animates on add, reorder, and remove', async ({ page }) => {
+    const assertNoErrorsLater = await assertNoConsoleErrors(page)
+    await page.goto('/')
+
+    const list = page.getByTestId('list')
+    await expect(list.locator('li')).toHaveCount(3)
+
+    const observer = await withAnimationObserver(page, LIST)
+
+    // Add → enter animation on the new child
+    await page.getByTestId('add').click()
+    await expect(list.locator('li')).toHaveCount(4)
+    await page.waitForTimeout(50)
+    expect(await observer.count()).toBeGreaterThan(0)
+
+    // Let it settle, then reverse → move/FLIP (keyed by id: nodes persist and slide)
+    await page.waitForTimeout(300)
+    await page.getByTestId('reverse').click()
+    await page.waitForTimeout(50)
+    expect(await observer.count()).toBeGreaterThan(0)
+
+    // Settle, then remove first → leave animation (the absolutely-positioned ghost)
+    await page.waitForTimeout(300)
+    await page.getByTestId('remove-first').click()
+    await page.waitForTimeout(50)
+    expect(await observer.count()).toBeGreaterThan(0)
+
+    await assertNoErrorsLater()
+  })
+
+  test('node identity survives reorder (keyed <for by="id">)', async ({ page }) => {
+    await page.goto('/')
+
+    await expect(page.getByTestId('item-1')).toHaveText('Item 1')
+    // Mark the live DOM node, reverse, and confirm the SAME element instance moved
+    // (FLIP) rather than being destroyed and recreated.
+    await page.evaluate(() => {
+      document
+        .querySelector('[data-testid="item-1"]')!
+        .setAttribute('data-marker', 'x')
+    })
+    await page.getByTestId('reverse').click()
+    await page.waitForTimeout(350)
+    await expect(page.locator('[data-testid="item-1"][data-marker="x"]')).toHaveCount(1)
+  })
+
+  test('enabled=false disables animation; re-enabling resumes it (no re-init)', async ({ page }) => {
+    const assertNoErrorsLater = await assertNoConsoleErrors(page)
+    await page.goto('/')
+
+    const observer = await withAnimationObserver(page, LIST)
+
+    // Turn animations off
+    await page.getByTestId('toggle').click()
+    await expect(page.getByTestId('toggle')).toHaveText(/off/)
+
+    // Add while disabled → item appears, but no animation runs
+    await page.getByTestId('add').click()
+    await page.waitForTimeout(80)
+    expect(await observer.count()).toBe(0)
+
+    // Turn back on → next mutation animates again (same controller, just re-enabled)
+    await page.getByTestId('toggle').click()
+    await expect(page.getByTestId('toggle')).toHaveText(/on/)
+    await page.getByTestId('add').click()
+    await page.waitForTimeout(50)
+    expect(await observer.count()).toBeGreaterThan(0)
+
+    await assertNoErrorsLater()
+  })
+})
\ No newline at end of file
diff --git a/tests/marko/playwright.config.ts b/tests/marko/playwright.config.ts
new file mode 100644
index 00000000..ee8c5d53
--- /dev/null
+++ b/tests/marko/playwright.config.ts
@@ -0,0 +1,37 @@
+import { defineConfig, devices } from '@playwright/test'
+
+// Standalone Playwright config for the Marko adapter's e2e tests, kept separate from
+// the repo-root config on purpose: the Marko spec only needs the @marko/vite harness
+// (port 5174), so this boots *only* that server — never the Vue docs app — and the
+// maintainers' root playwright.config.ts stays untouched.
+export default defineConfig({
+  // Relative to this config's directory (tests/marko/). Picks up the *.spec.ts here.
+  testDir: '.',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: [['list'], ['html', { open: 'never' }]],
+  use: {
+    baseURL: 'http://localhost:5174',
+    trace: 'retain-on-failure',
+    video: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    viewport: { width: 1200, height: 900 },
+  },
+  webServer: {
+    // `pnpm exec` resolves the project-local vite (a bare `vite` is not on the PATH
+    // of the shell Playwright spawns). pnpm runs the command from the package root,
+    // so the --config path is written relative to the repo root.
+    command: 'pnpm exec vite --config tests/marko/vite.config.ts --port=5174',
+    port: 5174,
+    stdout: 'pipe',
+    stderr: 'pipe',
+    reuseExistingServer: !process.env.CI,
+    timeout: 60 * 1000,
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+  ],
+})
\ No newline at end of file
diff --git a/tests/marko/vite.config.ts b/tests/marko/vite.config.ts
new file mode 100644
index 00000000..6bc86dd5
--- /dev/null
+++ b/tests/marko/vite.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig, searchForWorkspaceRoot } from "vite"
+import marko from "@marko/vite"
+import { fileURLToPath } from "node:url"
+
+// This harness folder is the Vite root; the adapter (and its core) live in the
+// repo's src/ tree, outside this folder, so we widen server.fs.allow to the
+// workspace root (the dir containing pnpm-lock.yaml).
+const here = fileURLToPath(new URL(".", import.meta.url))
+
+export default defineConfig({
+  root: here,
+  plugins: [marko()],
+  server: {
+    fs: {
+      allow: [searchForWorkspaceRoot(here)],
+    },
+  },
+})

From 6cfcc73e4f917ec9af968c9ede36f3e4e21f5e2a Mon Sep 17 00:00:00 2001
From: defunkt-dev <mydevprep@gmail.com>
Date: Mon, 22 Jun 2026 23:09:13 -0600
Subject: [PATCH 2/5] e2e test suite for marko

---
 tests/marko/App.marko                | 111 ++++++++++++++-----
 tests/marko/marko-edge-cases.spec.ts | 156 +++++++++++++++++++++++++++
 2 files changed, 242 insertions(+), 25 deletions(-)
 create mode 100644 tests/marko/marko-edge-cases.spec.ts

diff --git a/tests/marko/App.marko b/tests/marko/App.marko
index 1b5cd47a..f364f767 100644
--- a/tests/marko/App.marko
+++ b/tests/marko/App.marko
@@ -1,5 +1,6 @@
 import AutoAnimate from "../../src/marko/auto-animate.marko"
 
+// ── Section A: keyed object list — add / remove-first / reverse / clear / toggle ──
 <let/items = [
   { id: 1, text: "Item 1" },
   { id: 2, text: "Item 2" },
@@ -8,39 +9,99 @@ import AutoAnimate from "../../src/marko/auto-animate.marko"
 <let/nextId = 4>
 <let/enabled = true>
 
+// ── Section B: reactive-unmount teardown (the tag lives inside an <if>) ──
+<let/mounted = true>
+
+// ── Section C: primitive-keyed list (by=n => n) ──
+<let/nums = [10, 20, 30]>
+<let/nextNum = 40>
+
+// ── Section D: conditional parent (the <ul> itself is inside an <if>, tag co-located) ──
+<let/showParent = true>
+<let/condItems = [
+  { id: 1, text: "C1" },
+  { id: 2, text: "C2" },
+]>
+<let/condNextId = 3>
+
 <main>
-  <div class="controls">
+  <section data-testid="sec-main">
     <button data-testid="add" onClick() {
       items = [...items, { id: nextId, text: `Item ${nextId}` }];
       nextId++;
-    }>
-      Add item
-    </button>
-
+    }>Add item</button>
     <button data-testid="remove-first" onClick() {
       items = items.slice(1);
-    }>
-      Remove first
-    </button>
-
+    }>Remove first</button>
     <button data-testid="reverse" onClick() {
       items = [...items].reverse();
-    }>
-      Reverse order
-    </button>
-
+    }>Reverse order</button>
+    <button data-testid="clear" onClick() {
+      items = [];
+    }>Clear all</button>
     <button data-testid="toggle" onClick() {
       enabled = !enabled;
-    }>
-      Animations: ${enabled ? "on" : "off"}
-    </button>
-  </div>
-
-  <ul/listRef data-testid="list">
-    <for|item| of=items by="id">
-      <li data-testid=`item-${item.id}`>${item.text}</li>
-    </for>
-  </ul>
-
-  <AutoAnimate parent=listRef enabled=enabled/>
+    }>Animations: ${enabled ? "on" : "off"}</button>
+
+    <ul/listRef data-testid="list">
+      <for|item| of=items by="id">
+        <li data-testid=`item-${item.id}`>${item.text}</li>
+      </for>
+    </ul>
+    <AutoAnimate parent=listRef enabled=enabled/>
+  </section>
+
+  <section data-testid="sec-unmount">
+    <button data-testid="unmount-toggle" onClick() {
+      mounted = !mounted;
+    }>Mounted: ${mounted ? "yes" : "no"}</button>
+
+    <if=mounted>
+      <ul/umRef data-testid="um-list">
+        <li>Always</li>
+        <li>Here</li>
+      </ul>
+      <AutoAnimate parent=umRef/>
+    </if>
+  </section>
+
+  <section data-testid="sec-primitive">
+    <button data-testid="prim-add" onClick() {
+      nums = [...nums, nextNum];
+      nextNum += 10;
+    }>Add number</button>
+    <button data-testid="prim-remove-first" onClick() {
+      nums = nums.slice(1);
+    }>Remove first number</button>
+    <button data-testid="prim-reverse" onClick() {
+      nums = [...nums].reverse();
+    }>Reverse numbers</button>
+
+    <ul/primRef data-testid="prim-list">
+      <for|n| of=nums by=n => n>
+        <li data-testid=`num-${n}`>${n}</li>
+      </for>
+    </ul>
+    <AutoAnimate parent=primRef/>
+  </section>
+
+  <section data-testid="sec-cond">
+    <button data-testid="cond-toggle" onClick() {
+      showParent = !showParent;
+    }>Parent: ${showParent ? "shown" : "hidden"}</button>
+
+    <if=showParent>
+      <button data-testid="cond-add" onClick() {
+        condItems = [...condItems, { id: condNextId, text: `C${condNextId}` }];
+        condNextId++;
+      }>Add to parent</button>
+
+      <ul/condRef data-testid="cond-list">
+        <for|item| of=condItems by="id">
+          <li data-testid=`cond-${item.id}`>${item.text}</li>
+        </for>
+      </ul>
+      <AutoAnimate parent=condRef/>
+    </if>
+  </section>
 </main>
diff --git a/tests/marko/marko-edge-cases.spec.ts b/tests/marko/marko-edge-cases.spec.ts
new file mode 100644
index 00000000..9ec8d002
--- /dev/null
+++ b/tests/marko/marko-edge-cases.spec.ts
@@ -0,0 +1,156 @@
+import { test, expect } from '@playwright/test'
+import { assertNoConsoleErrors, withAnimationObserver } from '../e2e/utils'
+
+const LIST = '[data-testid="list"]'
+const PRIM = '[data-testid="prim-list"]'
+const COND = '[data-testid="cond-list"]'
+
+test.describe('Marko <auto-animate> — edge cases', () => {
+  // Scenario 4: removing every child triggers Marko's textContent="" fast path; the
+  // removal ghost vs that clear must not crash (the §5 crux), and re-adding still works.
+  test('clear all (textContent fast path) then re-add is clean and animates', async ({ page }) => {
+    const assertNoErrorsLater = await assertNoConsoleErrors(page)
+    await page.goto('/')
+    const list = page.getByTestId('list')
+    await expect(list.locator('li')).toHaveCount(3)
+
+    const observer = await withAnimationObserver(page, LIST)
+
+    // Remove all at once → sole-content list cleared via textContent="".
+    await page.getByTestId('clear').click()
+    // Auto-waits past the removal-ghost animation until the list is truly empty.
+    await expect(list.locator('li')).toHaveCount(0)
+
+    // Re-add → list still functions; the new child animates in.
+    await page.getByTestId('add').click()
+    await expect(list.locator('li')).toHaveCount(1)
+    await page.waitForTimeout(50)
+    expect(await observer.count()).toBeGreaterThan(0)
+
+    await assertNoErrorsLater()
+  })
+
+  // Scenario 5: rapid, overlapping mutations (removal ghosts still in flight as reconciles
+  // run) must not crash and must settle to the right count.
+  test('rapid overlapping mutations do not crash and settle correctly', async ({ page }) => {
+    const assertNoErrorsLater = await assertNoConsoleErrors(page)
+    await page.goto('/')
+    const list = page.getByTestId('list')
+    await expect(list.locator('li')).toHaveCount(3)
+
+    // Back-to-back, no settle waits. Net change is zero → ends at 3.
+    await page.getByTestId('add').click() // 4
+    await page.getByTestId('add').click() // 5
+    await page.getByTestId('reverse').click() // 5
+    await page.getByTestId('remove-first').click() // 4
+    await page.getByTestId('add').click() // 5
+    await page.getByTestId('reverse').click() // 5
+    await page.getByTestId('remove-first').click() // 4
+    await page.getByTestId('remove-first').click() // 3
+
+    await page.waitForTimeout(600) // let every overlapping animation finish
+    await expect(list.locator('li')).toHaveCount(3)
+    await assertNoErrorsLater()
+  })
+
+  // Scenario 10: primitive-keyed list (by=n => n) — animates and FLIPs by value.
+  test('primitive-keyed list animates and preserves node identity by value', async ({ page }) => {
+    const assertNoErrorsLater = await assertNoConsoleErrors(page)
+    await page.goto('/')
+    const prim = page.getByTestId('prim-list')
+    await expect(prim.locator('li')).toHaveCount(3)
+
+    const observer = await withAnimationObserver(page, PRIM)
+
+    await page.getByTestId('prim-add').click()
+    await expect(prim.locator('li')).toHaveCount(4)
+    await page.waitForTimeout(50)
+    expect(await observer.count()).toBeGreaterThan(0)
+
+    // Mark the node for value 10, reverse, confirm the same node moved (keyed by value).
+    await page.waitForTimeout(300)
+    await page.evaluate(() => {
+      document.querySelector('[data-testid="num-10"]')!.setAttribute('data-marker', 'x')
+    })
+    await page.getByTestId('prim-reverse').click()
+    await page.waitForTimeout(350)
+    await expect(page.locator('[data-testid="num-10"][data-marker="x"]')).toHaveCount(1)
+
+    await assertNoErrorsLater()
+  })
+
+  // Scenario 11: conditional parent — the <ul> itself is inside an <if>, tag co-located.
+  test('conditional parent: co-located tag mounts, unmounts, and remounts cleanly', async ({ page }) => {
+    const assertNoErrorsLater = await assertNoConsoleErrors(page)
+    await page.goto('/')
+    const cond = page.getByTestId('cond-list')
+    await expect(cond).toBeVisible()
+    await expect(cond.locator('li')).toHaveCount(2)
+
+    const observer = await withAnimationObserver(page, COND)
+    await page.getByTestId('cond-add').click()
+    await expect(cond.locator('li')).toHaveCount(3)
+    await page.waitForTimeout(50)
+    expect(await observer.count()).toBeGreaterThan(0)
+
+    // Hide parent → the <ul> AND the co-located tag unmount together (no crash).
+    await page.waitForTimeout(300)
+    await page.getByTestId('cond-toggle').click()
+    await expect(page.getByTestId('cond-list')).toHaveCount(0)
+
+    // Show again → parent + tag remount (top-level state persisted: 3 items); adding
+    // animates again via a fresh controller.
+    await page.getByTestId('cond-toggle').click()
+    await expect(page.getByTestId('cond-list')).toBeVisible()
+    await expect(page.getByTestId('cond-list').locator('li')).toHaveCount(3)
+    const observer2 = await withAnimationObserver(page, COND)
+    await page.getByTestId('cond-add').click()
+    await page.waitForTimeout(50)
+    expect(await observer2.count()).toBeGreaterThan(0)
+
+    await assertNoErrorsLater()
+  })
+
+  // Scenario 7: teardown via reactive unmount (NOT a bare destroy) — the abort-signal case.
+  // Driving the <if> false fires onDestroy through a real render pass, which is the only
+  // way Marko flushes the queued teardown.
+  test('reactive unmount tears down cleanly and remounts', async ({ page }) => {
+    const assertNoErrorsLater = await assertNoConsoleErrors(page)
+    await page.goto('/')
+    await expect(page.getByTestId('um-list')).toBeVisible()
+
+    await page.getByTestId('unmount-toggle').click()
+    await expect(page.getByTestId('um-list')).toHaveCount(0)
+    await page.waitForTimeout(100)
+
+    await page.getByTestId('unmount-toggle').click()
+    await expect(page.getByTestId('um-list')).toBeVisible()
+
+    await assertNoErrorsLater()
+  })
+
+  // Scenario 9: reduced motion — mutations still apply, but no animation runs.
+  // auto-animate reads matchMedia('(prefers-reduced-motion: reduce)') once, at the
+  // autoAnimate() call in onMount; when it matches, the entire observer setup is
+  // skipped and the parent is fully inert. So emulate the preference *before*
+  // navigating (so it is active at mount), and assert the page actually reports it —
+  // if this ever regresses, the failure then points at the emulation, not the adapter.
+  test('respects prefers-reduced-motion (item appears, no animation runs)', async ({ page }) => {
+    const assertNoErrorsLater = await assertNoConsoleErrors(page)
+    await page.emulateMedia({ reducedMotion: 'reduce' })
+    await page.goto('/')
+    expect(
+      await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches),
+    ).toBe(true)
+
+    const list = page.getByTestId('list')
+    await expect(list.locator('li')).toHaveCount(3)
+    const observer = await withAnimationObserver(page, LIST)
+    await page.getByTestId('add').click()
+    await expect(list.locator('li')).toHaveCount(4) // mutation still applies
+    await page.waitForTimeout(80)
+    expect(await observer.count()).toBe(0) // …but no animation under reduced motion
+
+    await assertNoErrorsLater()
+  })
+})

From 7442480c4c592762f842566a9e161a1eff5388b5 Mon Sep 17 00:00:00 2001
From: defunkt-dev <mydevprep@gmail.com>
Date: Tue, 23 Jun 2026 00:33:23 -0600
Subject: [PATCH 3/5] e2e ssr test suite for marko

---
 tests/marko-ssr/marko-ssr.spec.ts    | 75 ++++++++++++++++++++++++++++
 tests/marko-ssr/playwright.config.ts | 23 +++++++++
 tests/marko-ssr/server.mjs           | 59 ++++++++++++++++++++++
 tests/marko-ssr/src/index.js         | 33 ++++++++++++
 tests/marko-ssr/src/page.marko       | 55 ++++++++++++++++++++
 5 files changed, 245 insertions(+)
 create mode 100644 tests/marko-ssr/marko-ssr.spec.ts
 create mode 100644 tests/marko-ssr/playwright.config.ts
 create mode 100644 tests/marko-ssr/server.mjs
 create mode 100644 tests/marko-ssr/src/index.js
 create mode 100644 tests/marko-ssr/src/page.marko

diff --git a/tests/marko-ssr/marko-ssr.spec.ts b/tests/marko-ssr/marko-ssr.spec.ts
new file mode 100644
index 00000000..be406688
--- /dev/null
+++ b/tests/marko-ssr/marko-ssr.spec.ts
@@ -0,0 +1,75 @@
+import { test, expect } from "@playwright/test";
+import { withAnimationObserver } from "../e2e/utils";
+
+const LIST = '[data-testid="list"]';
+
+test.describe("Marko <auto-animate> — SSR + resume", () => {
+  test("server-renders the list, resumes, and animates a post-resume mutation", async ({
+    page,
+    request,
+  }) => {
+    // (1) Server-rendered: the raw HTML (no client JS executed) already contains the list
+    //     and its items, and the resume marker reads "no".
+    const html = await (await request.get("/")).text();
+    expect(html).toMatch(/data-testid=["']?list["']?/);
+    expect(html).toContain("Item 1");
+    expect(html).toContain("Item 3");
+    expect(html).toMatch(/data-testid=["']?resumed["']?>\s*no/); // marker before any client JS
+
+    // (2) The page resumes — client JS runs and flips the marker to "yes".
+    await page.goto("/");
+    await expect(page.getByTestId("resumed")).toHaveText("yes");
+
+    const list = page.getByTestId("list");
+    await expect(list.locator("li")).toHaveCount(3);
+
+    // (3) The server-rendered children are NOT animated on load — auto-animate animates
+    //     mutations, never the children already present when it attaches.
+    const observer = await withAnimationObserver(page, LIST);
+    expect(await observer.count()).toBe(0);
+
+    // (4) After resume, a mutation animates — proving onMount wired autoAnimate to the
+    //     server-rendered <ul>. The tag reads its parent as a real DOM node via the ref, so
+    //     the leaf-first resume order (which broke marko-query's effect-to-effect handoff)
+    //     is not a problem here: there is no sibling effect to wait on.
+    await page.getByTestId("add").click();
+    await expect(list.locator("li")).toHaveCount(4);
+    await page.waitForTimeout(50);
+    expect(await observer.count()).toBeGreaterThan(0);
+  });
+
+  test("plain options object survives resume", async ({ page }) => {
+    await page.goto("/plain-options");
+    await expect(page.getByTestId("resumed")).toHaveText("yes");
+    const list = page.getByTestId("list");
+    await expect(list.locator("li")).toHaveCount(3);
+
+    const observer = await withAnimationObserver(page, LIST);
+    await page.getByTestId("add").click();
+    await expect(list.locator("li")).toHaveCount(4);
+    await page.waitForTimeout(50);
+    // A plain options object ({ duration, easing }) written inline crossed resume and the
+    // tag still animates.
+    expect(await observer.count()).toBeGreaterThan(0);
+  });
+
+  // Characterization (the run settles this). Per the marko-query finding, a function WRITTEN
+  // INLINE in a template is compiled code and resumes, whereas a function arriving as a
+  // separate runtime prop cannot be serialized across resume. An inline plugin is therefore
+  // expected to resume and animate. If instead the server render throws a serialization error
+  // (the route would 500 and this would fail at goto/resume), that confirms the opposite
+  // boundary — and the documented contract becomes "plain options for SSR; a plugin needs a
+  // client-only path."
+  test("inline plugin option resumes and animates", async ({ page }) => {
+    await page.goto("/plugin-options");
+    await expect(page.getByTestId("resumed")).toHaveText("yes");
+    const list = page.getByTestId("list");
+    await expect(list.locator("li")).toHaveCount(3);
+
+    const observer = await withAnimationObserver(page, LIST);
+    await page.getByTestId("add").click();
+    await expect(list.locator("li")).toHaveCount(4);
+    await page.waitForTimeout(50);
+    expect(await observer.count()).toBeGreaterThan(0);
+  });
+});
diff --git a/tests/marko-ssr/playwright.config.ts b/tests/marko-ssr/playwright.config.ts
new file mode 100644
index 00000000..f3c5dd8f
--- /dev/null
+++ b/tests/marko-ssr/playwright.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig, devices } from "@playwright/test";
+
+// Boots the SSR dev server (server.mjs) and runs the SSR spec in real Chromium. Run from the
+// repo root:
+//   pnpm exec playwright test --config tests/marko-ssr/playwright.config.ts
+// The webServer command runs in this folder (Playwright's default cwd is the config dir), so
+// `node server.mjs` finds server.mjs and its src/ here; Node resolves vite/@marko/vite from
+// the repo-root node_modules by walking up.
+export default defineConfig({
+  testDir: ".",
+  testMatch: /\.spec\.ts$/,
+  timeout: 30_000,
+  use: {
+    baseURL: "http://localhost:5175",
+    ...devices["Desktop Chrome"],
+  },
+  webServer: {
+    command: "node server.mjs",
+    url: "http://localhost:5175",
+    reuseExistingServer: true,
+    timeout: 120_000,
+  },
+});
diff --git a/tests/marko-ssr/server.mjs b/tests/marko-ssr/server.mjs
new file mode 100644
index 00000000..d7dfb990
--- /dev/null
+++ b/tests/marko-ssr/server.mjs
@@ -0,0 +1,59 @@
+// Dev SSR server for the auto-animate Marko e2e suite. Modeled on the marko-query e2e server
+// (and @marko/vite's own isomorphic dev-server fixtures). Two details the marko-query work
+// paid for, and that apply here too:
+//   1. It ssrLoadModules the JS entry (src/index.js), which imports the page -- NOT the .marko
+//      page directly. Only the JS-entry path gets @marko/vite's server-entry treatment that
+//      injects the browser <script> tags; without it the page renders but never resumes.
+//   2. Marko 6's render(input) is an async iterable that must be consumed (for-await the
+//      chunks, write each, then end). The render(input, res) form does not drive the stream
+//      here and the request hangs.
+// Unlike the marko-query server, NO resolve.alias / ssr.noExternal is needed: auto-animate's
+// core is pulled in by the tag via `client import`, so it is stripped from the server bundle
+// entirely; only the client build resolves it, and Vite resolves the TS source normally.
+// fs.allow is widened to the workspace root because the page imports the tag from the repo's
+// src/ (outside this harness folder).
+
+import { createServer as createHttpServer } from "node:http";
+import { createRequire } from "node:module";
+import path from "node:path";
+import url from "node:url";
+
+import { createServer as createViteServer, searchForWorkspaceRoot } from "vite";
+
+const require = createRequire(import.meta.url);
+const marko = require("@marko/vite").default;
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+const PORT = 5175;
+
+const devServer = await createViteServer({
+  root: __dirname,
+  configFile: false,
+  appType: "custom",
+  logLevel: "warn",
+  plugins: [marko()],
+  optimizeDeps: { force: true },
+  server: {
+    ws: false,
+    hmr: false,
+    middlewareMode: true,
+    fs: { allow: [searchForWorkspaceRoot(__dirname)] },
+  },
+});
+
+devServer.middlewares.use(async (req, res, next) => {
+  try {
+    const { handler } = await devServer.ssrLoadModule(
+      path.join(__dirname, "./src/index.js"),
+    );
+    await handler(req, res, next);
+  } catch (err) {
+    devServer.ssrFixStacktrace(err);
+    next(err);
+  }
+});
+
+createHttpServer(devServer.middlewares).listen(PORT, () => {
+  // eslint-disable-next-line no-console
+  console.log(`auto-animate e2e SSR server on http://localhost:${PORT}`);
+});
diff --git a/tests/marko-ssr/src/index.js b/tests/marko-ssr/src/index.js
new file mode 100644
index 00000000..7536229a
--- /dev/null
+++ b/tests/marko-ssr/src/index.js
@@ -0,0 +1,33 @@
+// JS server entry. Importing page.marko from here (rather than ssrLoadModule-ing the .marko
+// directly) is what makes @marko/vite treat it as an entry and inject the browser <script>
+// tags so the page resumes on the client -- mirroring @marko/vite's isomorphic dev-server
+// fixtures and the marko-query e2e harness.
+//
+// One page, three routes. The route only varies `mode` (a plain string, safe to pass), which
+// the page uses to choose the <auto-animate> options variant (default / plain object / inline
+// plugin). render(input) is a Marko 6 async iterable and must be consumed with for-await.
+
+import page from "./page.marko";
+
+const routes = {
+  "/": { mode: "default" },
+  "/plain-options": { mode: "plain" },
+  "/plugin-options": { mode: "plugin" },
+};
+
+export async function handler(req, res, next) {
+  const pathname = (req.url || "/").split("?")[0];
+  const route = routes[pathname];
+  if (!route) {
+    if (next) next();
+    return;
+  }
+
+  res.statusCode = 200;
+  res.setHeader("Content-Type", "text/html; charset=utf-8");
+  const $global = { serializedGlobals: {} };
+  for await (const chunk of page.render({ $global, mode: route.mode })) {
+    res.write(chunk);
+  }
+  res.end();
+}
diff --git a/tests/marko-ssr/src/page.marko b/tests/marko-ssr/src/page.marko
new file mode 100644
index 00000000..8c48ae65
--- /dev/null
+++ b/tests/marko-ssr/src/page.marko
@@ -0,0 +1,55 @@
+import AutoAnimate from "../../../src/marko/auto-animate.marko"
+
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <title>marko auto-animate SSR + resume harness</title>
+</head>
+<body>
+  // Resume marker (marko-query's pattern): "no" on the server, "yes" once a client onMount
+  // runs. Confirms the page actually resumed before we interpret any animation.
+  <let/resumed = "no">
+  <lifecycle onMount() { resumed = "yes"; }/>
+  <div data-testid="resumed">${resumed}</div>
+
+  <let/items = [
+    { id: 1, text: "Item 1" },
+    { id: 2, text: "Item 2" },
+    { id: 3, text: "Item 3" },
+  ]>
+  <let/nextId = 4>
+  <let/enabled = true>
+
+  <button data-testid="add" onClick() {
+    items = [...items, { id: nextId, text: `Item ${nextId}` }];
+    nextId++;
+  }>Add item</button>
+  <button data-testid="remove-first" onClick() {
+    items = items.slice(1);
+  }>Remove first</button>
+  <button data-testid="reverse" onClick() {
+    items = [...items].reverse();
+  }>Reverse order</button>
+
+  <ul/listRef data-testid="list">
+    <for|item| of=items by="id">
+      <li data-testid=`item-${item.id}`>${item.text}</li>
+    </for>
+  </ul>
+
+  // The animated parent (the <ul> above) is server-rendered, so on resume the tag's onMount
+  // reads a real DOM node via the ref -- it does not depend on a sibling effect having run,
+  // which is why leaf-first resume ordering is not a problem here. The tag variant is chosen
+  // per route to exercise default / plain-object / inline-plugin options.
+  <if=input.mode === "plain">
+    <AutoAnimate parent=listRef options=({ duration: 400, easing: "ease-in-out" })/>
+  </if>
+  <else if=input.mode === "plugin">
+    <AutoAnimate parent=listRef options=(el) => new KeyframeEffect(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 150 })/>
+  </else>
+  <else>
+    <AutoAnimate parent=listRef enabled=enabled/>
+  </else>
+</body>
+</html>

From 3e934b07a6836a9670f5207294c1b0ec54621cfe Mon Sep 17 00:00:00 2001
From: defunkt-dev <mydevprep@gmail.com>
Date: Tue, 23 Jun 2026 02:46:24 -0600
Subject: [PATCH 4/5] fix some ts errors

---
 package.json                   |  1 +
 pnpm-lock.yaml                 | 38 ++++++++++++++++++++++++++++++++++
 src/marko/auto-animate.marko   |  5 +----
 tests/marko-ssr/src/page.marko |  5 +++++
 tests/marko/App.marko          |  2 +-
 5 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 75107ac2..42f8bd9d 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "@angular/core": "^17.1.0",
     "@formkit/vue": "^1.6.5",
     "@marko/compiler": "^5.39.65",
+    "@marko/type-check": "^3.0.4",
     "@marko/vite": "^5.4.10",
     "@nuxt/kit": "^3.12.4",
     "@nuxt/module-builder": "^0.8.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e7384165..c6206aa0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@marko/compiler':
         specifier: ^5.39.65
         version: 5.39.65
+      '@marko/type-check':
+        specifier: ^3.0.4
+        version: 3.0.4
       '@marko/vite':
         specifier: ^5.4.10
         version: 5.4.10(@marko/compiler@5.39.65)(vite@7.3.0(@types/node@20.19.27)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2))
@@ -782,6 +785,13 @@ packages:
     resolution: {integrity: sha512-m8RLnKj8OqYu8/wXCTw9ftSgsBJfHH/4VUdVDSq106ibXDiv5K+RXIi2BsIV4JVlEjClM64P0b34+S56d0Gb7Q==}
     engines: {node: 18 || 20 || >=22}
 
+  '@marko/language-tools@2.5.62':
+    resolution: {integrity: sha512-1GIOMEEVNvdodePrEDf7MZy74ySxotqWhcIZCd5eyqKlKMzBfdQh0j/EeotWntZpUh/DQpT+fQuylrTXLkF4iA==}
+
+  '@marko/type-check@3.0.4':
+    resolution: {integrity: sha512-3+tltY5esB17Ctef7ayp2aSx6JGWo9tn0GQEyF9YavG0DSbv89RrefoNy70ijgiAPvPjKea6uokl0d3wZQ/yJg==}
+    hasBin: true
+
   '@marko/vite@5.4.10':
     resolution: {integrity: sha512-4HAyrAJmmjVYkVIF72FRAjh4CdqYMEGGErQ8cCBtxDRpvgB24uaTE9uGSdz7BmU0Z8fwgfNcjuO4HXQrluJrQw==}
     peerDependencies:
@@ -1241,6 +1251,9 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
   args-tokenizer@0.3.0:
     resolution: {integrity: sha512-xXAd7G2Mll5W8uo37GETpQ2VrE84M181Z7ugHFGQnJZ50M2mbOv0osSZ9VsSgPfJQ+LVG0prSi0th+ELMsno7Q==}
 
@@ -2427,6 +2440,11 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  typescript@6.0.3:
+    resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   ufo@1.6.1:
     resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
 
@@ -3100,6 +3118,22 @@ snapshots:
       self-closing-tags: 1.0.1
       source-map-support: 0.5.21
 
+  '@marko/language-tools@2.5.62':
+    dependencies:
+      '@luxass/strip-json-comments': 1.4.0
+      '@marko/compiler': 5.39.65
+      htmljs-parser: 5.11.0
+      relative-import-path: 1.0.0
+
+  '@marko/type-check@3.0.4':
+    dependencies:
+      '@luxass/strip-json-comments': 1.4.0
+      '@marko/compiler': 5.39.65
+      '@marko/language-tools': 2.5.62
+      arg: 5.0.2
+      kleur: 4.1.5
+      typescript: 6.0.3
+
   '@marko/vite@5.4.10(@marko/compiler@5.39.65)(vite@7.3.0(@types/node@20.19.27)(jiti@1.21.7)(terser@5.44.1)(yaml@2.8.2))':
     dependencies:
       '@chialab/estransform': 0.19.1
@@ -3543,6 +3577,8 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  arg@5.0.2: {}
+
   args-tokenizer@0.3.0: {}
 
   autoprefixer@10.4.23(postcss@8.5.6):
@@ -4786,6 +4822,8 @@ snapshots:
 
   typescript@5.9.3: {}
 
+  typescript@6.0.3: {}
+
   ufo@1.6.1: {}
 
   unbuild@2.0.0(typescript@5.9.3):
diff --git a/src/marko/auto-animate.marko b/src/marko/auto-animate.marko
index 76f78cdf..39d17ffe 100644
--- a/src/marko/auto-animate.marko
+++ b/src/marko/auto-animate.marko
@@ -17,10 +17,7 @@ export interface Input {
   enabled?: boolean;
 }
 
-<lifecycle<{
-  controller?: AnimationController;
-  lastEnabled?: boolean;
-}>
+<lifecycle<{ controller?: AnimationController; lastEnabled?: boolean }>
   onMount() {
     const el = input.parent();
     if (!el) return;
diff --git a/tests/marko-ssr/src/page.marko b/tests/marko-ssr/src/page.marko
index 8c48ae65..b2b06c84 100644
--- a/tests/marko-ssr/src/page.marko
+++ b/tests/marko-ssr/src/page.marko
@@ -1,5 +1,10 @@
 import AutoAnimate from "../../../src/marko/auto-animate.marko"
 
+export interface Input {
+  // Chosen per route in src/index.js: default / plain object / inline plugin.
+  mode?: "default" | "plain" | "plugin";
+}
+
 <!doctype html>
 <html lang="en">
 <head>
diff --git a/tests/marko/App.marko b/tests/marko/App.marko
index f364f767..d339c31d 100644
--- a/tests/marko/App.marko
+++ b/tests/marko/App.marko
@@ -78,7 +78,7 @@ import AutoAnimate from "../../src/marko/auto-animate.marko"
     }>Reverse numbers</button>
 
     <ul/primRef data-testid="prim-list">
-      <for|n| of=nums by=n => n>
+      <for|n| of=nums by=(n => String(n))>
         <li data-testid=`num-${n}`>${n}</li>
       </for>
     </ul>

From d0755a32db886ee5bf882061cb8f9cd180e8f41c Mon Sep 17 00:00:00 2001
From: defunkt-dev <mydevprep@gmail.com>
Date: Tue, 23 Jun 2026 03:38:22 -0600
Subject: [PATCH 5/5] docs support

---
 docs/src/components/CodeExample.vue        | 11 +++++-
 docs/src/components/IconMarko.vue          | 38 +++++++++++++++++++
 docs/src/components/Navigation.vue         |  1 +
 docs/src/examples/disable/disable.marko    | 23 +++++++++++
 docs/src/examples/disable/index.ts         |  6 +++
 docs/src/examples/dropdown/dropdown.marko  | 13 +++++++
 docs/src/examples/dropdown/index.ts        |  6 +++
 docs/src/examples/intro/index.ts           |  6 +++
 docs/src/examples/intro/intro.marko        |  6 +++
 docs/src/examples/marko/ActualMarkoApp.vue | 33 ++++++++++++++++
 docs/src/examples/marko/index.ts           | 20 ++++++++++
 docs/src/sections/SectionUsage.vue         | 44 ++++++++++++++++++++++
 12 files changed, 206 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/components/IconMarko.vue
 create mode 100644 docs/src/examples/disable/disable.marko
 create mode 100644 docs/src/examples/dropdown/dropdown.marko
 create mode 100644 docs/src/examples/intro/intro.marko
 create mode 100644 docs/src/examples/marko/ActualMarkoApp.vue
 create mode 100644 docs/src/examples/marko/index.ts

diff --git a/docs/src/components/CodeExample.vue b/docs/src/components/CodeExample.vue
index fae80f28..2295cb5f 100644
--- a/docs/src/components/CodeExample.vue
+++ b/docs/src/components/CodeExample.vue
@@ -11,6 +11,7 @@ import IconPNPM from "./IconPNPM.vue"
 import IconJavaScript from "./IconJavaScript.vue"
 import IconSvelte from "./IconSvelte.vue"
 import IconAngular from "./IconAngular.vue"
+import IconMarko from "./IconMarko.vue"
 import IconNuxt from "./IconNuxt.vue"
 import IconBun from "./IconBun.vue"
 import { computed, ref } from "vue"
@@ -25,6 +26,7 @@ type LanguageOption =
   | "solid"
   | "svelte"
   | "angular"
+  | "marko"
   | "qwik"
   | "js"
   | "yarn"
@@ -34,7 +36,7 @@ type LanguageOption =
   | "bun"
 
 type Language = {
-  ext: "jsx" | "vue" | "html"
+  ext: "jsx" | "vue" | "html" | "marko"
   example: string
   title?: string
   language: string
@@ -154,6 +156,13 @@ function copyCode(value: string) {
         >
           <IconAngular />Angular
         </li>
+        <li
+          v-if="'marko' in props.examples"
+          @click="current = 'marko'"
+          :data-selected="current === 'marko' || null"
+        >
+          <IconMarko />Marko
+        </li>
         <li
           v-if="'qwik' in props.examples"
           @click="current = 'qwik'"
diff --git a/docs/src/components/IconMarko.vue b/docs/src/components/IconMarko.vue
new file mode 100644
index 00000000..25f88f75
--- /dev/null
+++ b/docs/src/components/IconMarko.vue
@@ -0,0 +1,38 @@
+<script setup>
+// Official multi-color Marko logomark. It uses internal id references (clipPath +
+// <use>) to draw the darker two-tone overlays; because this icon renders multiple
+// times on a page (every code-window framework switcher plus the jump-link), the
+// ids are made unique per instance via useId() so there are no duplicate-id
+// collisions. useId() is SSR-stable, which the vite-ssg docs build needs.
+import { useId } from "vue"
+const uid = useId()
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 78 347 191">
+    <title>Marko Logo</title>
+    <path :id="uid + 'f'" fill="#00CFFB" d="M72.6 141c1.2-2 1.2-4.6 0-6.6L49.8 95.3a3.5 3.5 0 00-6.2 0L.9 170.2a6.6 6.6 0 000 6.6l51.8 88.8a6.6 6.6 0 005.8 3.3h44c3.5 0 5.6-3.7 3.8-6.7l-52-88.8"/>
+    <path :id="uid + 'g'" fill="#7CED64" d="M114 173.5h48c2.4 0 4.6-1.3 5.8-3.4L183.9 141c1.2-2 1.1-4.5 0-6.6l-22.8-39a3.5 3.5 0 00-6.2 0l-17 30.3-26-44.4A6.6 6.6 0 00106.2 78H62.3a4.4 4.4 0 00-3.8 6.7l49.8 85.5c1.2 2 3.4 3.3 5.8 3.3"/>
+    <path :id="uid + 'h'" fill="#FFD100" d="M221.3 173.4l-51.8 88.8c-1.7 3 .4 6.6 3.8 6.6h44.2c2.3 0 4.5-1.2 5.7-3.3l52-88.7c1.2-2 1.2-4.6 0-6.7l-52-88.8A6.6 6.6 0 00217.5 78H173.3a4.4 4.4 0 00-3.8 6.7l51.8 88.7"/>
+    <path :id="uid + 'i'" fill="#FF5467" d="M244.5 78h44.1c2.4 0 4.5 1.3 5.7 3.3l51.8 88.8c1.2 2 1.2 4.6 0 6.7l-51.8 88.7a6.6 6.6 0 01-5.7 3.3H244.5a4.4 4.4 0 01-3.9-6.6l51.8-88.8-51.8-88.7c-1.7-3 .4-6.7 3.9-6.7"/>
+    <use fill="#0073D8" :clip-path="'url(#' + uid + 'a)'" :href="'#' + uid + 'b'"/>
+    <use fill="#00B068" :clip-path="'url(#' + uid + 'c)'" :href="'#' + uid + 'b'"/>
+    <use fill="#FC5C00" :clip-path="'url(#' + uid + 'd)'" :href="'#' + uid + 'b'"/>
+    <use fill="#CC0067" :clip-path="'url(#' + uid + 'e)'" :href="'#' + uid + 'b'"/>
+    <defs>
+      <clipPath :id="uid + 'a'">
+        <use :href="'#' + uid + 'f'"/>
+      </clipPath>
+      <clipPath :id="uid + 'c'">
+        <use :href="'#' + uid + 'g'"/>
+      </clipPath>
+      <clipPath :id="uid + 'd'">
+        <use :href="'#' + uid + 'h'"/>
+      </clipPath>
+      <clipPath :id="uid + 'e'">
+        <use :href="'#' + uid + 'i'"/>
+      </clipPath>
+      <path :id="uid + 'b'" d="M0 173.4H111.1376L137.9 125.7V78H157l51 95.4H347V425H0"/>
+    </defs>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/docs/src/components/Navigation.vue b/docs/src/components/Navigation.vue
index db8f671d..b6b435f3 100644
--- a/docs/src/components/Navigation.vue
+++ b/docs/src/components/Navigation.vue
@@ -44,6 +44,7 @@ if (typeof window !== "undefined") {
       <li><a href="#usage-solid">Solid</a></li>
       <li><a href="#usage-svelte">Svelte</a></li>
       <li><a href="#usage-angular">Angular</a></li>
+      <li><a href="#usage-marko">Marko</a></li>
       <!-- <li><a href="#usage-qwik">Qwik</a></li> -->
       <li><a href="#usage-disable">Disable</a></li>
       <li><a href="#examples">Examples</a></li>
diff --git a/docs/src/examples/disable/disable.marko b/docs/src/examples/disable/disable.marko
new file mode 100644
index 00000000..9c1e51a9
--- /dev/null
+++ b/docs/src/examples/disable/disable.marko
@@ -0,0 +1,23 @@
+import AutoAnimate from "@formkit/auto-animate/marko"
+
+<let/balls = ["red", "green", "blue"]>
+<let/isEnabled = true>
+
+<script>
+  // Rotate the list every 600ms so there is always something to animate.
+  const id = setInterval(() => {
+    balls = [...balls.slice(1), balls[0]];
+  }, 600);
+  $signal.onabort = () => clearInterval(id);
+</script>
+
+<ul/listRef class="balls">
+  <for|color| of=balls by=(color => color)>
+    <li class=color>${color}</li>
+  </for>
+</ul>
+<AutoAnimate parent=listRef options=({ duration: 500 }) enabled=isEnabled/>
+
+<button onClick() { isEnabled = !isEnabled }>
+  ${isEnabled ? "🚫 Disable" : "✅ Enable"} animations
+</button>
diff --git a/docs/src/examples/disable/index.ts b/docs/src/examples/disable/index.ts
index ac7ac922..b9a12c6a 100644
--- a/docs/src/examples/disable/index.ts
+++ b/docs/src/examples/disable/index.ts
@@ -1,5 +1,6 @@
 import vueExample from "./disable.vue?raw"
 import reactExample from "./disable.jsx?raw"
+import markoExample from "./disable.marko?raw"
 // import htmlExample from "./disable.html?raw"
 
 export default {
@@ -13,6 +14,11 @@ export default {
     language: "html",
     example: vueExample,
   },
+  marko: {
+    ext: "marko",
+    language: "html",
+    example: markoExample,
+  },
   // js: {
   //   example: htmlExample,
   //   ext: "html",
diff --git a/docs/src/examples/dropdown/dropdown.marko b/docs/src/examples/dropdown/dropdown.marko
new file mode 100644
index 00000000..ee963faa
--- /dev/null
+++ b/docs/src/examples/dropdown/dropdown.marko
@@ -0,0 +1,13 @@
+import AutoAnimate from "@formkit/auto-animate/marko"
+
+<let/show = false>
+
+<div/dropdown class="dropdown">
+  <strong class="dropdown-label" onClick() { show = !show }>
+    Click me to open!
+  </strong>
+  <if=show>
+    <p class="dropdown-content">Lorum ipsum...</p>
+  </if>
+</div>
+<AutoAnimate parent=dropdown/>
diff --git a/docs/src/examples/dropdown/index.ts b/docs/src/examples/dropdown/index.ts
index 1f849054..e3dad920 100644
--- a/docs/src/examples/dropdown/index.ts
+++ b/docs/src/examples/dropdown/index.ts
@@ -2,6 +2,7 @@ import vueExample from "./dropdown.vue?raw"
 import reactExample from "./dropdown.jsx?raw"
 import solidExample from "./dropdown-solid.tsx?raw"
 import nativeExample from "./dropdown.html?raw"
+import markoExample from "./dropdown.marko?raw"
 export default {
   react: {
     language: "jsx",
@@ -18,6 +19,11 @@ export default {
     ext: "vue",
     example: vueExample,
   },
+  marko: {
+    language: "html",
+    ext: "marko",
+    example: markoExample,
+  },
   js: {
     language: "html",
     ext: "html",
diff --git a/docs/src/examples/intro/index.ts b/docs/src/examples/intro/index.ts
index 87e92dd2..b68239f6 100644
--- a/docs/src/examples/intro/index.ts
+++ b/docs/src/examples/intro/index.ts
@@ -5,6 +5,7 @@ import solidExample from "./intro-solid.jsx?raw"
 import htmlExample from "./intro.html?raw"
 import svelteExample from "./intro.svelte?raw"
 import angularExample from "./intro.angular?raw"
+import markoExample from "./intro.marko?raw"
 
 export default {
   react: {
@@ -37,6 +38,11 @@ export default {
     ext: "angular",
     language: "html",
   },
+  marko: {
+    example: markoExample,
+    ext: "marko",
+    language: "html",
+  },
   js: {
     example: htmlExample,
     ext: "html",
diff --git a/docs/src/examples/intro/intro.marko b/docs/src/examples/intro/intro.marko
new file mode 100644
index 00000000..250e922e
--- /dev/null
+++ b/docs/src/examples/intro/intro.marko
@@ -0,0 +1,6 @@
+import AutoAnimate from "@formkit/auto-animate/marko"
+
+<ul/listRef>
+  <!-- 🪄 Magic animations for your list -->
+</ul>
+<AutoAnimate parent=listRef/>
diff --git a/docs/src/examples/marko/ActualMarkoApp.vue b/docs/src/examples/marko/ActualMarkoApp.vue
new file mode 100644
index 00000000..dc54d457
--- /dev/null
+++ b/docs/src/examples/marko/ActualMarkoApp.vue
@@ -0,0 +1,33 @@
+<script setup>
+// Like the other framework demos on this page (e.g. ActualReactApp.vue), the *live*
+// preview is implemented with the Vue adapter so nothing Marko has to enter the docs'
+// vite-ssg build. The Marko-specific code is shown in the adjacent code sample; the
+// animation behavior is identical because it all runs on the same auto-animate core.
+import { useAutoAnimate } from "../../../../src/vue/index.ts"
+import { ref } from "vue"
+const [parent, setEnabled] = useAutoAnimate()
+const items = ref([0, 1, 2])
+</script>
+
+<template>
+  <div class="example marko-example">
+    <ul ref="parent">
+      <li v-for="item in items" :key="item">{{ item }}</li>
+    </ul>
+    <button @click="items.push(items.length)" class="button button--alt add">
+      Add number
+    </button>
+    <button @click="setEnabled(false)" class="button button--alt">
+      Disable
+    </button>
+  </div>
+</template>
+
+<style scoped>
+ul {
+  list-style-type: disc;
+}
+li::before {
+  display: none;
+}
+</style>
\ No newline at end of file
diff --git a/docs/src/examples/marko/index.ts b/docs/src/examples/marko/index.ts
new file mode 100644
index 00000000..8486d093
--- /dev/null
+++ b/docs/src/examples/marko/index.ts
@@ -0,0 +1,20 @@
+export default {
+  marko: {
+    language: "html",
+    ext: "marko",
+    example: `import AutoAnimate from "@formkit/auto-animate/marko"
+
+<let/items = [0, 1, 2]>
+<let/enabled = true>
+
+<ul/listRef>
+  <for|item| of=items by=(n => String(n))>
+    <li>\${item}</li>
+  </for>
+</ul>
+<AutoAnimate parent=listRef enabled=enabled/>
+
+<button onClick() { items = [...items, items.length] }>Add number</button>
+<button onClick() { enabled = false }>Disable</button>`,
+  },
+}
\ No newline at end of file
diff --git a/docs/src/sections/SectionUsage.vue b/docs/src/sections/SectionUsage.vue
index b5cc4c3e..a3d81bef 100644
--- a/docs/src/sections/SectionUsage.vue
+++ b/docs/src/sections/SectionUsage.vue
@@ -18,6 +18,8 @@ import ActualPreactApp from "../examples/preact/ActualPreactApp.vue"
 import ActualSolidApp from "../examples/solid/ActualSolidApp.vue"
 import ActualDropdown from "../examples/dropdown/ActualDropdown.vue"
 import svelteAction from "../examples/svelte"
+import markoTag from "../examples/marko"
+import ActualMarkoApp from "../examples/marko/ActualMarkoApp.vue"
 import qwikHook from "../examples/qwik"
 import ActualSvelteApp from "../examples/svelte/ActualSvelteApp.vue"
 import ActualVueApp from "../examples/vue/ActualVueApp.vue"
@@ -30,6 +32,7 @@ import IconVue from "../components/IconVue.vue"
 import IconAngular from "../components/IconAngular.vue"
 import IconSvelte from "../components/IconSvelte.vue"
 import IconSolid from "../components/IconSolid.vue"
+import IconMarko from "../components/IconMarko.vue"
 import IconQwik from "../components/IconQwik.vue"
 </script>
 <template>
@@ -140,6 +143,9 @@ import IconQwik from "../components/IconQwik.vue"
       <li>
         <a href="#usage-angular"><span>Angular</span><IconAngular /></a>
       </li>
+      <li>
+        <a href="#usage-marko"><span>Marko</span><IconMarko /></a>
+      </li>
       <!-- <li>
         <a href="#usage-qwik"><span>Qwik</span><IconQwik /></a>
       </li> -->
@@ -277,6 +283,44 @@ import IconQwik from "../components/IconQwik.vue"
       but you can easily write a wrapper.
     </AsideTip>
 
+    <h2 id="usage-marko">Marko tag</h2>
+    <p>
+      Marko users can import the <code>&lt;auto-animate&gt;</code> tag from
+      <code>@formkit/auto-animate/marko</code>. Rather than returning a ref, the
+      tag takes one: give your parent element a
+      <a
+        href="https://markojs.com/docs/reference/language/#tag-variables"
+        target="_blank"
+        rel="noopener noreferrer"
+        >tag variable</a
+      >
+      (for example <code>&lt;ul/listRef&gt;</code>) and pass it to the tag’s
+      <code>parent</code> attribute. The tag attaches AutoAnimate to that element
+      on mount and tears it down automatically when it leaves the DOM.
+    </p>
+    <CodeExample :examples="markoTag" title="App" />
+    <ActualMarkoApp />
+    <AsideTip>
+      To <a href="#usage-disable">enable or disable</a> animations, set the
+      reactive <code>enabled</code> attribute
+      (<code>&lt;auto-animate parent=listRef enabled=animationsOn/&gt;</code>) —
+      flipping it on or off is all that’s needed; the tag is not re-created.
+    </AsideTip>
+    <AsideTip>
+      Options are passed once via the <code>options</code> attribute
+      (<code>options=(&#123; duration: 200 &#125;)</code>) and are read
+      a single time when the tag mounts, mirroring the core’s API (there is no
+      <code>setOptions</code>). To apply different options later, re-mount the tag.
+    </AsideTip>
+    <AsideTip>
+      For reorderable lists, key your <code>&lt;for&gt;</code> by identity so
+      Marko moves nodes instead of recreating them — otherwise moves and exits
+      won’t animate. Use <code>by="id"</code> for objects, or an identity function
+      for primitives (<code>by=(n =&gt; String(n))</code>). Under SSR, prefer
+      plain serializable <code>options</code>; plugin functions are a client-only
+      path.
+    </AsideTip>
+
     <!-- <h2 id="usage-qwik">Qwik hook</h2>
     <p>
       Qwik users can use the hook <code>useAutoAnimate</code> by importing it