diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2f94ddc..058df2a 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -15,12 +15,12 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
-          node-version: 20
+          node-version: 25
           cache: npm
 
       - name: Install dependencies
diff --git a/package-lock.json b/package-lock.json
index cf43c3b..5e95520 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "esbuild": "^0.27.3",
         "eslint": "^9.39.3",
         "lerna": "^9.0.5",
+        "neostandard": "^0.13.0",
         "typescript": "^5.9.3",
         "vitest": "^4.0.18"
       }
@@ -837,7 +838,6 @@
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
       "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "eslint-visitor-keys": "^3.4.3"
@@ -856,7 +856,6 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
       "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1062,6 +1061,17 @@
         "node": ">=18.18.0"
       }
     },
+    "node_modules/@humanwhocodes/gitignore-to-minimatch": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz",
+      "integrity": "sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -3081,6 +3091,21 @@
         "node": ">=14"
       }
     },
+    "node_modules/@prettier/sync": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@prettier/sync/-/sync-0.5.5.tgz",
+      "integrity": "sha512-6BMtNr7aQhyNcGzmumkL0tgr1YQGfm9d7ZdmRpWqWuqpc9vZBind4xMe5NMiRECOhjuSiWHfBWLBnXkpeE90bw==",
+      "license": "MIT",
+      "dependencies": {
+        "make-synchronized": "^0.4.2"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier-synchronized?sponsor=1"
+      },
+      "peerDependencies": {
+        "prettier": "*"
+      }
+    },
     "node_modules/@react-pug/babel-plugin-react-pug": {
       "resolved": "packages/babel-plugin-react-pug",
       "link": true
@@ -3651,6 +3676,25 @@
         "pug-error": "^1.3.3"
       }
     },
+    "node_modules/@stylistic/eslint-plugin": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-2.11.0.tgz",
+      "integrity": "sha512-PNRHbydNG5EH8NK4c+izdJlxajIR6GxcUhzsYNRsn6Myep4dsZt0qFCz3rCPnkvgO5FYibDcMqgNHUT+zvjYZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/utils": "^8.13.0",
+        "eslint-visitor-keys": "^4.2.0",
+        "espree": "^10.3.0",
+        "estraverse": "^5.3.0",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=8.40.0"
+      }
+    },
     "node_modules/@swc/core": {
       "version": "1.15.18",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.18.tgz",
@@ -4079,6 +4123,276 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.57.0.tgz",
+      "integrity": "sha512-qeu4rTHR3/IaFORbD16gmjq9+rEs9fGKdX0kF6BKSfi+gCuG3RCKLlSBYzn/bGsY9Tj7KE/DAQStbp8AHJGHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.57.0",
+        "@typescript-eslint/type-utils": "8.57.0",
+        "@typescript-eslint/utils": "8.57.0",
+        "@typescript-eslint/visitor-keys": "8.57.0",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.57.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.57.0.tgz",
+      "integrity": "sha512-XZzOmihLIr8AD1b9hL9ccNMzEMWt/dE2u7NyTY9jJG6YNiNthaD5XtUHVF2uCXZ15ng+z2hT3MVuxnUYhq6k1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.57.0",
+        "@typescript-eslint/types": "8.57.0",
+        "@typescript-eslint/typescript-estree": "8.57.0",
+        "@typescript-eslint/visitor-keys": "8.57.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.57.0.tgz",
+      "integrity": "sha512-pR+dK0BlxCLxtWfaKQWtYr7MhKmzqZxuii+ZjuFlZlIGRZm22HnXFqa2eY+90MUz8/i80YJmzFGDUsi8dMOV5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.57.0",
+        "@typescript-eslint/types": "^8.57.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.57.0.tgz",
+      "integrity": "sha512-nvExQqAHF01lUM66MskSaZulpPL5pgy5hI5RfrxviLgzZVffB5yYzw27uK/ft8QnKXI2X0LBrHJFr1TaZtAibw==",
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.57.0",
+        "@typescript-eslint/visitor-keys": "8.57.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.57.0.tgz",
+      "integrity": "sha512-LtXRihc5ytjJIQEH+xqjB0+YgsV4/tW35XKX3GTZHpWtcC8SPkT/d4tqdf1cKtesryHm2bgp6l555NYcT2NLvA==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.57.0.tgz",
+      "integrity": "sha512-yjgh7gmDcJ1+TcEg8x3uWQmn8ifvSupnPfjP21twPKrDP/pTHlEQgmKcitzF/rzPSmv7QjJ90vRpN4U+zoUjwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.57.0",
+        "@typescript-eslint/typescript-estree": "8.57.0",
+        "@typescript-eslint/utils": "8.57.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.57.0.tgz",
+      "integrity": "sha512-dTLI8PEXhjUC7B9Kre+u0XznO696BhXcTlOn0/6kf1fHaQW8+VjJAVHJ3eTI14ZapTxdkOmc80HblPQLaEeJdg==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.57.0.tgz",
+      "integrity": "sha512-m7faHcyVg0BT3VdYTlX8GdJEM7COexXxS6KqGopxdtkQRvBanK377QDHr4W/vIPAR+ah9+B/RclSW5ldVniO1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.57.0",
+        "@typescript-eslint/tsconfig-utils": "8.57.0",
+        "@typescript-eslint/types": "8.57.0",
+        "@typescript-eslint/visitor-keys": "8.57.0",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz",
+      "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
+      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.57.0.tgz",
+      "integrity": "sha512-5iIHvpD3CZe06riAsbNxxreP+MuYgVUsV0n4bwLH//VJmgtt54sQeY2GszntJ4BjYCpMzrfVh2SBnUQTtys2lQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.57.0",
+        "@typescript-eslint/types": "8.57.0",
+        "@typescript-eslint/typescript-estree": "8.57.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.57.0.tgz",
+      "integrity": "sha512-zm6xx8UT/Xy2oSr2ZXD0pZo7Jx2XsCoID2IUh9YSTFRu7z+WdwYTRk6LhUftm1crwqbuoF6I8zAFeCMw0YjwDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.57.0",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@vitest/expect": {
       "version": "4.0.18",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.18.tgz",
@@ -4321,7 +4635,6 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
@@ -4452,6 +4765,23 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array-differ": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
@@ -4469,6 +4799,29 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -4479,40 +4832,164 @@
         "node": ">=8"
       }
     },
-    "node_modules/arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/assertion-error": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
-      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/async": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
-      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
       "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/axios": {
       "version": "1.13.6",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.6.tgz",
@@ -4950,6 +5427,25 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -4964,6 +5460,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -5631,6 +6144,60 @@
         "node": ">=8"
       }
     },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/dateformat": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
@@ -5645,7 +6212,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -5744,6 +6310,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -5754,6 +6338,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -5791,6 +6393,19 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -5987,6 +6602,75 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/es-abstract": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
+      "integrity": "sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -6007,6 +6691,35 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.3.1.tgz",
+      "integrity": "sha512-zWwRvqWiuBPr0muUG/78cW3aHROFCNIQ3zpmYDpwdbnt2m+xlNyRWpHBpa2lJjSBit7BQ+RXA1iwbSmu5yJ/EQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.1",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.1.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.3.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.5",
+        "math-intrinsics": "^1.1.0",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
@@ -6043,6 +6756,37 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
@@ -6168,32 +6912,219 @@
         }
       }
     },
-    "node_modules/eslint-scope": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
-      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+    "node_modules/eslint-compat-utils": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
+      "integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
       "dev": true,
-      "license": "BSD-2-Clause",
+      "license": "MIT",
       "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
+        "semver": "^7.5.4"
       },
       "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+        "node": ">=12"
       },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
+      "peerDependencies": {
+        "eslint": ">=6.0.0"
       }
     },
-    "node_modules/eslint-visitor-keys": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+    "node_modules/eslint-plugin-es-x": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-es-x/-/eslint-plugin-es-x-7.8.0.tgz",
+      "integrity": "sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==",
       "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
+      "funding": [
+        "https://github.com/sponsors/ota-meshi",
+        "https://opencollective.com/eslint"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.1.2",
+        "@eslint-community/regexpp": "^4.11.0",
+        "eslint-compat-utils": "^0.5.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=8"
+      }
+    },
+    "node_modules/eslint-plugin-n": {
+      "version": "17.24.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-n/-/eslint-plugin-n-17.24.0.tgz",
+      "integrity": "sha512-/gC7/KAYmfNnPNOb3eu8vw+TdVnV0zhdQwexsw6FLXbhzroVj20vRn2qL8lDWDGnAQ2J8DhdfvXxX9EoxvERvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.5.0",
+        "enhanced-resolve": "^5.17.1",
+        "eslint-plugin-es-x": "^7.8.0",
+        "get-tsconfig": "^4.8.1",
+        "globals": "^15.11.0",
+        "globrex": "^0.1.2",
+        "ignore": "^5.3.2",
+        "semver": "^7.6.3",
+        "ts-declaration-location": "^1.0.6"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": ">=8.23.0"
+      }
+    },
+    "node_modules/eslint-plugin-n/node_modules/globals": {
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint-plugin-promise": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-7.2.1.tgz",
+      "integrity": "sha512-SWKjd+EuvWkYaS+uN2csvj0KoP43YTu7+phKQ5v+xw6+A0gutVX2yqCeCkC3uLCJFiPfR2dD8Es5L7yUsmvEaA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.6",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.6.tgz",
+      "integrity": "sha512-3JmVl5hMGtJ3kMmB3zi3DL25KfkCEyy3Tw7Gmw7z5w8M9WlwoPFnIvwChzu1+cF3iaK3sp18hhPz8ANeimdJfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "node-exports-info": "^1.6.0",
+        "object-keys": "^1.1.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
       "funding": {
         "url": "https://opencollective.com/eslint"
       }
@@ -6285,7 +7216,6 @@
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
       "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "acorn": "^8.15.0",
@@ -6343,7 +7273,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
@@ -6465,7 +7394,6 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -6623,6 +7551,22 @@
         }
       }
     },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -6751,6 +7695,47 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -7021,6 +8006,37 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.13.6",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.6.tgz",
+      "integrity": "sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
     "node_modules/git-raw-commits": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-3.0.0.tgz",
@@ -7161,6 +8177,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -7213,6 +8253,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -7223,6 +8276,35 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -7581,6 +8663,21 @@
         }
       }
     },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/ip-address": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
@@ -7591,6 +8688,24 @@
         "node": ">= 12"
       }
     },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -7598,6 +8713,42 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -7611,6 +8762,36 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-ci": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
@@ -7640,6 +8821,41 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-docker": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -7666,6 +8882,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -7676,6 +8908,26 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -7702,6 +8954,32 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -7712,6 +8990,23 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-obj": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
@@ -7742,6 +9037,54 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-ssh": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/is-ssh/-/is-ssh-1.4.1.tgz",
@@ -7752,14 +9095,49 @@
         "protocols": "^2.0.1"
       }
     },
-    "node_modules/is-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+    "node_modules/is-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-text-path": {
@@ -7775,6 +9153,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-unicode-supported": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.1.0.tgz",
@@ -7788,6 +9182,52 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -7867,6 +9307,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/jackspeak": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@@ -8111,6 +9569,22 @@
         "node": "*"
       }
     },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/jszip": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
@@ -8585,6 +10059,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -8641,6 +10128,15 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/make-synchronized": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/make-synchronized/-/make-synchronized-0.4.2.tgz",
+      "integrity": "sha512-EwEJSg8gSGLicKXp/VzNi1tvzhdmNBxOzslkkJSoNUCQFZKH/NIUIp7xlfN+noaHrz4BJDN73gne8IHnjl/F/A==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/fisker/make-synchronized?sponsor=1"
+      }
+    },
     "node_modules/map-obj": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
@@ -9293,7 +10789,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/multimatch": {
@@ -9403,6 +10898,153 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/neostandard": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/neostandard/-/neostandard-0.13.0.tgz",
+      "integrity": "sha512-R3iglFr+Dla/8qFBqsMxBvcYBOgP6rAGw7uRHKMpM3bUP0wLDRzUstxtEI9RfEwn7xszE/UUnh8H090Ru4Z52A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@humanwhocodes/gitignore-to-minimatch": "^1.0.2",
+        "@stylistic/eslint-plugin": "2.11.0",
+        "eslint-plugin-n": "^17.23.2",
+        "eslint-plugin-promise": "^7.2.1",
+        "eslint-plugin-react": "^7.37.5",
+        "find-up": "^8.0.0",
+        "globals": "^17.3.0",
+        "peowly": "^1.3.3",
+        "typescript-eslint": "^8.56.0"
+      },
+      "bin": {
+        "neostandard": "cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "peerDependencies": {
+        "eslint": "^9.0.0"
+      }
+    },
+    "node_modules/neostandard/node_modules/find-up": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-8.0.0.tgz",
+      "integrity": "sha512-JGG8pvDi2C+JxidYdIwQDyS/CgcrIdh18cvgxcBge3wSHRQOrooMD3GlFBcmMJAN9M42SAZjDp5zv1dglJjwww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^8.0.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/neostandard/node_modules/globals": {
+      "version": "17.4.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-17.4.0.tgz",
+      "integrity": "sha512-hjrNztw/VajQwOLsMNT1cbJiH2muO3OROCHnbehc8eY5JyD2gqz4AcMHPqgaOR59DjgUjYAYLeH699g/eWi2jw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/neostandard/node_modules/locate-path": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-8.0.0.tgz",
+      "integrity": "sha512-XT9ewWAC43tiAV7xDAPflMkG0qOPn2QjHqlgX8FOqmWa/rxnyYDulF9T0F7tRy1u+TVTmK/M//6VIOye+2zDXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/neostandard/node_modules/p-limit": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
+      "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^1.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/neostandard/node_modules/p-locate": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-6.0.0.tgz",
+      "integrity": "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/neostandard/node_modules/yocto-queue": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.2.tgz",
+      "integrity": "sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/node-exports-info": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.0.tgz",
+      "integrity": "sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array.prototype.flatmap": "^1.3.3",
+        "es-errors": "^1.3.0",
+        "object.entries": "^1.1.9",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/node-exports-info/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
     "node_modules/node-gyp": {
       "version": "12.2.0",
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.2.0.tgz",
@@ -10026,54 +11668,152 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/nx/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+    "node_modules/nx/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nx/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nx/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/nx/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^5.0.1"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/nx/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/obug": {
@@ -10173,6 +11913,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
@@ -10645,6 +12403,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/peowly": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/peowly/-/peowly-1.3.3.tgz",
+      "integrity": "sha512-5UmUtvuCv3KzBX2NuQw2uF28o0t8Eq4KkPRZfUCzJs+DiNVKw7OaYn29vNDgrt/Pggs23CPlSTqgzlhHJfpT0A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.6.0",
+        "typescript": ">=5.8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -10656,7 +12425,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -10747,6 +12515,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -10800,6 +12578,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "30.2.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.2.0.tgz",
@@ -10912,6 +12705,25 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/protocols": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.2.tgz",
@@ -11261,6 +13073,50 @@
         "node": ">=8"
       }
     },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -11325,6 +13181,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
     "node_modules/resolve.exports": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.3.tgz",
@@ -11531,6 +13397,33 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-array-concat/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -11538,6 +13431,48 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -11549,7 +13484,6 @@
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
       "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -11575,6 +13509,55 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -11582,27 +13565,103 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "shebang-regex": "^3.0.0"
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/siginfo": {
@@ -11858,6 +13917,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -11932,6 +14005,104 @@
         "node": ">=8"
       }
     },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
@@ -12230,7 +14401,6 @@
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
       "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -12312,6 +14482,41 @@
         "node": ">=8"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/ts-declaration-location": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/ts-declaration-location/-/ts-declaration-location-1.0.7.tgz",
+      "integrity": "sha512-EDyGAwH1gO0Ausm9gV6T2nUvBgXT5kGoCMJPllOaooZ+4VvJiKBdZE7wK18N1deEowhcUptS+5GXZK8U/fvpwA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "ko-fi",
+          "url": "https://ko-fi.com/rebeccastevens"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/ts-declaration-location"
+        }
+      ],
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "picomatch": "^4.0.2"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.0.0"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
@@ -12382,6 +14587,84 @@
         "node": ">=8"
       }
     },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -12403,6 +14686,30 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.57.0.tgz",
+      "integrity": "sha512-W8GcigEMEeB07xEZol8oJ26rigm3+bfPHxHvwbYUlu1fUDsGuQ7Hiskx5xGW/xM4USc9Ephe3jtv7ZYPQntHeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.57.0",
+        "@typescript-eslint/parser": "8.57.0",
+        "@typescript-eslint/typescript-estree": "8.57.0",
+        "@typescript-eslint/utils": "8.57.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
     "node_modules/uglify-js": {
       "version": "3.19.3",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
@@ -12417,6 +14724,25 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/undici-types": {
       "version": "7.18.2",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
@@ -12424,6 +14750,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/unicorn-magic": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
+      "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/unique-filename": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-5.0.0.tgz",
@@ -12769,6 +15108,102 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
+      "integrity": "sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/why-is-node-running": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
@@ -13303,7 +15738,12 @@
       "name": "@react-pug/eslint-plugin-react-pug",
       "version": "0.1.3",
       "dependencies": {
-        "@react-pug/react-pug-core": "^0.1.3"
+        "@babel/parser": "^7.0.0",
+        "@prettier/sync": "^0.5.5",
+        "@react-pug/react-pug-core": "^0.1.3",
+        "@stylistic/eslint-plugin": "^2.11.0",
+        "@typescript-eslint/parser": "^8.0.0",
+        "prettier": "^3.0.0"
       },
       "peerDependencies": {
         "eslint": "^9.0.0"
diff --git a/package.json b/package.json
index b09f349..cb0e2cd 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "test:core": "vitest run packages/react-pug-core/test",
     "test:ts-plugin": "vitest run packages/typescript-plugin-react-pug/test",
     "test:vscode:unit": "vitest run packages/vscode-react-pug-tsx/test/unit",
-    "test:unit": "vitest run",
+    "test:unit": "npm run deps:example && npm run build:plugin && vitest run",
     "test": "npm run test:unit && npm run test:vscode",
     "deps:example": "node scripts/ensure-workspace-deps.mjs example",
     "pretest:vscode": "npm run deps:example && npm run build",
@@ -47,6 +47,7 @@
     "esbuild": "^0.27.3",
     "eslint": "^9.39.3",
     "lerna": "^9.0.5",
+    "neostandard": "^0.13.0",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"
   }
diff --git a/packages/babel-plugin-react-pug/test/unit/transform.test.ts b/packages/babel-plugin-react-pug/test/unit/transform.test.ts
index 614c00b..00ec30e 100644
--- a/packages/babel-plugin-react-pug/test/unit/transform.test.ts
+++ b/packages/babel-plugin-react-pug/test/unit/transform.test.ts
@@ -458,7 +458,7 @@ describe('babel-plugin-react-pug transform', () => {
         .item
           color red
       \`;
-      const view = <div styleName={["item"]}><span>Hello</span></div>;"
+      const view = <div styleName={['item']}><span>Hello</span></div>;"
     `);
   });
 
@@ -490,8 +490,8 @@ describe('babel-plugin-react-pug transform', () => {
         .two
           color blue
       \`;
-      const first = <div styleName={["one"]}><span>One</span></div>;
-      const second = <div styleName={["two"]}><span>Two</span></div>;"
+      const first = <div styleName={['one']}><span>One</span></div>;
+      const second = <div styleName={['two']}><span>Two</span></div>;"
     `);
   });
 
@@ -525,8 +525,8 @@ describe('babel-plugin-react-pug transform', () => {
         .two
           color blue
       \`;
-      const first = <div styleName={["one"]}><span>One</span></div>;
-      const second = <div styleName={["two"]}><span>Two</span></div>;"
+      const first = <div styleName={['one']}><span>One</span></div>;
+      const second = <div styleName={['two']}><span>Two</span></div>;"
     `);
   });
 
@@ -547,7 +547,7 @@ describe('babel-plugin-react-pug transform', () => {
         .item
           color red
       \`;
-      const view = <div styleName={["item"]}><span>Hello</span></div>;"
+      const view = <div styleName={['item']}><span>Hello</span></div>;"
     `);
   });
 
@@ -578,7 +578,7 @@ describe('babel-plugin-react-pug transform', () => {
       const active = {
         active: true
       };
-      const view = <span styleName={["title", active]} />;"
+      const view = <span styleName={['title', active]} />;"
     `);
   });
 
@@ -598,7 +598,7 @@ describe('babel-plugin-react-pug transform', () => {
     ].join('\n'));
     expect(out).toMatchInlineSnapshot(`
       "import "startupjs";
-      const view = <span styleName={["title"]} />;"
+      const view = <span styleName={['title']} />;"
     `);
   });
 
@@ -609,7 +609,7 @@ describe('babel-plugin-react-pug transform', () => {
     ].join('\n'));
     expect(out).toMatchInlineSnapshot(`
       "import { observer } from "startupjs";
-      const view = <span styleName={["title"]} />;"
+      const view = <span styleName={['title']} />;"
     `);
   });
 
diff --git a/packages/check-types/src/index.js b/packages/check-types/src/index.js
index 6cdf96f..425c113 100644
--- a/packages/check-types/src/index.js
+++ b/packages/check-types/src/index.js
@@ -365,6 +365,8 @@ export async function runCli (argv = process.argv.slice(2), io = {}) {
   const stderr = io.stderr ?? console.error
   const cwd = io.cwd ?? process.cwd()
   const prettyIsTTY = io.stderrIsTTY ?? process.stderr.isTTY
+  const loadPluginModule = io.loadPluginModule
+  const loadTypeScriptModule = io.loadTypeScriptModule
 
   let parsed
   try {
@@ -388,7 +390,9 @@ export async function runCli (argv = process.argv.slice(2), io = {}) {
       filePaths,
       projectPath: parsed.projectPath,
       tagFunction: parsed.tagFunction,
-      injectCssxjsTypes: parsed.injectCssxjsTypes
+      injectCssxjsTypes: parsed.injectCssxjsTypes,
+      loadPluginModule,
+      loadTypeScriptModule
     })
     const pretty = resolvePrettyOption(parsed.pretty, prettyIsTTY)
     if (result.ok) {
diff --git a/packages/check-types/test/unit/index.test.ts b/packages/check-types/test/unit/index.test.ts
index e5336ef..86ec001 100644
--- a/packages/check-types/test/unit/index.test.ts
+++ b/packages/check-types/test/unit/index.test.ts
@@ -2,8 +2,15 @@ import { describe, expect, it } from 'vitest'
 import { checkTypes, formatDiagnosticOutput, formatSummary, parseArgs, resolveCliTargets, resolvePrettyOption, resolveTsconfigPath, runCli } from '../../src/index.js'
 import ts from 'typescript'
 import { resolve } from 'node:path'
+import { createRequire } from 'node:module'
 
 const repoRoot = resolve(__dirname, '../../../..')
+const require = createRequire(import.meta.url)
+const loadPluginModule = async () => {
+  const plugin = require(resolve(repoRoot, 'packages/typescript-plugin-react-pug/dist/plugin.js'))
+  return plugin.default ?? plugin
+}
+const loadTypeScriptModule = async () => ts
 
 describe('@react-pug/check-types', () => {
   it('parses CLI args', () => {
@@ -48,7 +55,9 @@ describe('@react-pug/check-types', () => {
     const exitCode = await runCli(['example'], {
       stdout: line => stdout.push(line),
       stderr: line => stderr.push(line),
-      cwd: repoRoot
+      cwd: repoRoot,
+      loadPluginModule,
+      loadTypeScriptModule
     })
 
     expect(exitCode).toBe(0)
@@ -61,7 +70,9 @@ describe('@react-pug/check-types', () => {
     const projectRoot = resolve(repoRoot, 'example')
     const result = await checkTypes({
       cwd: projectRoot,
-      filePaths: ['src/App.tsx']
+      filePaths: ['src/App.tsx'],
+      loadPluginModule,
+      loadTypeScriptModule
     })
 
     expect(result.ok).toBe(true)
diff --git a/packages/esbuild-plugin-react-pug/test/unit/plugin.test.ts b/packages/esbuild-plugin-react-pug/test/unit/plugin.test.ts
index 9966a44..91823a0 100644
--- a/packages/esbuild-plugin-react-pug/test/unit/plugin.test.ts
+++ b/packages/esbuild-plugin-react-pug/test/unit/plugin.test.ts
@@ -39,9 +39,9 @@ describe('esbuild-plugin-react-pug', () => {
       'const view = pug`span.title(styleName=active)`;',
     ].join('\n'), 'fixture.tsx');
     expect(transformed.code).toMatchInlineSnapshot(`
-      "import "startupjs";             
+      "import "startupjs";
       const active = { active: true };
-      const view = (<span styleName={["title", active]} />);"
+      const view = (<span styleName={['title', active]} />);"
     `);
   });
 
diff --git a/packages/eslint-plugin-react-pug/package.json b/packages/eslint-plugin-react-pug/package.json
index 5ed90ae..e926146 100644
--- a/packages/eslint-plugin-react-pug/package.json
+++ b/packages/eslint-plugin-react-pug/package.json
@@ -11,7 +11,12 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@react-pug/react-pug-core": "^0.1.3"
+    "@typescript-eslint/parser": "^8.0.0",
+    "@babel/parser": "^7.0.0",
+    "@prettier/sync": "^0.5.5",
+    "@stylistic/eslint-plugin": "^2.11.0",
+    "@react-pug/react-pug-core": "^0.1.3",
+    "prettier": "^3.0.0"
   },
   "peerDependencies": {
     "eslint": "^9.0.0"
diff --git a/packages/eslint-plugin-react-pug/src/index.ts b/packages/eslint-plugin-react-pug/src/index.ts
index 7ae2ce1..27ce955 100644
--- a/packages/eslint-plugin-react-pug/src/index.ts
+++ b/packages/eslint-plugin-react-pug/src/index.ts
@@ -7,6 +7,11 @@ import {
   type StartupjsCssxjsOption,
   transformSourceFile,
 } from '@react-pug/react-pug-core';
+import { parse } from '@babel/parser';
+import { Linter } from 'eslint';
+import stylisticPlugin from '@stylistic/eslint-plugin';
+import prettier from '@prettier/sync';
+const tsParser = require('@typescript-eslint/parser');
 
 interface EslintReactPugProcessorOptions {
   tagFunction?: string;
@@ -27,6 +32,32 @@ interface EslintLintMessage {
 
 type SourceTransformState = ReturnType<typeof transformSourceFile>;
 
+interface FormattedCopySegment {
+  formattedStart: number;
+  formattedEnd: number;
+  transformedStart: number;
+  transformedEnd: number;
+}
+
+interface FormattedRegionSegment {
+  formattedStart: number;
+  formattedEnd: number;
+  transformedStart: number;
+  transformedEnd: number;
+  boundaryMap: number[];
+}
+
+interface FormattedLintCode {
+  code: string;
+  copySegments: FormattedCopySegment[];
+  regionSegments: FormattedRegionSegment[];
+}
+
+interface CachedLintState {
+  transformed: SourceTransformState;
+  formatted: FormattedLintCode | null;
+}
+
 interface EslintProcessorLike {
   preprocess: (
     text: string,
@@ -36,35 +67,375 @@ interface EslintProcessorLike {
   supportsAutofix: boolean;
 }
 
+const FORMAT_WRAPPER_PREFIX = 'const __pug = ';
+const FORMAT_RULE_CONFIG: Linter.LegacyConfig = {
+  parserOptions: {
+    ecmaVersion: 2022 as const,
+    sourceType: 'module' as const,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    '@stylistic/indent': ['error', 2, { SwitchCase: 1 }],
+    '@stylistic/jsx-indent': ['error', 2],
+    '@stylistic/jsx-indent-props': ['error', 2],
+    '@stylistic/jsx-wrap-multilines': ['error', {
+      declaration: 'parens-new-line',
+      assignment: 'parens-new-line',
+      return: 'parens-new-line',
+      arrow: 'parens-new-line',
+      condition: 'parens-new-line',
+      logical: 'parens-new-line',
+      prop: 'ignore',
+    }],
+    '@stylistic/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
+    '@stylistic/jsx-closing-bracket-location': ['error', 'tag-aligned'],
+    '@stylistic/jsx-closing-tag-location': 'error',
+    '@stylistic/multiline-ternary': ['error', 'always-multiline'],
+    '@stylistic/jsx-curly-newline': ['error', { multiline: 'consistent', singleline: 'consistent' }],
+    '@stylistic/eol-last': ['error', 'always'],
+  },
+};
+
+const formatLinter = new Linter({ configType: 'eslintrc' });
+for (const [ruleName, rule] of Object.entries(stylisticPlugin.rules)) {
+  formatLinter.defineRule(`@stylistic/${ruleName}`, rule as any);
+}
+formatLinter.defineParser('react-pug-typescript-parser', tsParser as any);
+
+function isTypeScriptLikeFilename(filename: string): boolean {
+  return /\.(?:ts|tsx|mts|cts)$/i.test(filename);
+}
+
 function getVirtualLintFilename(filename: string): string {
-  // ESLint nests processor blocks under "<physical-file>/0_<block-filename>".
-  // We escape back to a sibling filename so flat-config globs see a clean
-  // ".jsx"/".tsx" path instead of ".../file.js/0_pug-react.jsx".
-  if (/\.(?:ts|tsx|mts|cts)$/i.test(filename)) return '../../../pug-react.tsx';
+  if (isTypeScriptLikeFilename(filename)) return '../../../pug-react.tsx';
   return '../../../pug-react.jsx';
 }
 
+function getLineIndent(text: string, offset: number): string {
+  const lineStart = text.lastIndexOf('\n', Math.max(0, offset - 1)) + 1;
+  const lineText = text.slice(lineStart, text.indexOf('\n', lineStart) >= 0 ? text.indexOf('\n', lineStart) : text.length);
+  return lineText.match(/^[ \t]*/)?.[0] ?? '';
+}
+
+function indentFormattedRegion(text: string, baseIndent: string): string {
+  if (baseIndent.length === 0) return text;
+  return text.replace(/\n/g, `\n${baseIndent}`);
+}
+
+function normalizeTernaryBranchIndent(text: string): string {
+  const lines = text.split('\n');
+  const stack: Array<{
+    baseIndent: number;
+    closeIndent: number;
+    jsxIndent: number;
+    valueIndent: number;
+  }> = [];
+
+  for (let i = 0; i < lines.length; i += 1) {
+    const line = lines[i];
+    const trimmed = line.trim();
+    const indent = line.match(/^[ \t]*/)?.[0].length ?? 0;
+
+    while (stack.length > 0 && indent < stack[stack.length - 1].baseIndent) {
+      stack.pop();
+    }
+
+    if (/^[?:]\s*\($/.test(trimmed)) {
+      stack.push({
+        baseIndent: indent,
+        closeIndent: indent + 2,
+        jsxIndent: indent + 2,
+        valueIndent: indent + 4,
+      });
+      continue;
+    }
+
+    const current = stack[stack.length - 1];
+    if (!current) continue;
+
+    if (trimmed === ')' || trimmed === ')}') {
+      if (indent < current.closeIndent) {
+        lines[i] = `${' '.repeat(current.closeIndent)}${trimmed}`;
+      }
+      stack.pop();
+      continue;
+    }
+
+    const expectedIndent = /^[<{}]/.test(trimmed)
+      ? current.jsxIndent
+      : current.valueIndent;
+    if (trimmed.length > 0 && indent < expectedIndent) {
+      lines[i] = `${' '.repeat(expectedIndent)}${trimmed}`;
+    }
+  }
+
+  return lines.join('\n');
+}
+
+function normalizeJsxClosingBracketIndent(text: string): string {
+  const lines = text.split('\n');
+  const stack: number[] = [];
+
+  for (let i = 0; i < lines.length; i += 1) {
+    const line = lines[i];
+    const trimmed = line.trim();
+    const indent = line.match(/^[ \t]*/)?.[0].length ?? 0;
+
+    if (/^<[^/!][^>]*$/.test(trimmed)) {
+      stack.push(indent);
+      continue;
+    }
+
+    if ((trimmed === '/>' || trimmed === '>') && stack.length > 0) {
+      const openIndent = stack.pop()!;
+      if (indent !== openIndent) {
+        lines[i] = `${' '.repeat(openIndent)}${trimmed}`;
+      }
+    }
+  }
+
+  return lines.join('\n');
+}
+
+function parseExpressionTokens(expr: string, filename: string) {
+  const wrapped = `${FORMAT_WRAPPER_PREFIX}${expr}\n`;
+  const ast = parse(wrapped, {
+    sourceType: 'module',
+    plugins: [
+      'jsx',
+      'decorators-legacy',
+      ...(isTypeScriptLikeFilename(filename) ? ['typescript'] : []),
+    ] as any,
+    errorRecovery: false,
+    tokens: true,
+  }) as any;
+
+  const prefixLength = FORMAT_WRAPPER_PREFIX.length;
+  const endLimit = wrapped.length - 1;
+  const tokens = (ast.tokens ?? [])
+    .filter((token: any) => token.start >= prefixLength && token.end <= endLimit)
+    .map((token: any) => ({
+      start: token.start - prefixLength,
+      end: token.end - prefixLength,
+      label: token.type?.label ?? token.type,
+      value: token.value,
+    }));
+
+  return tokens;
+}
+
+function buildBoundaryMap(
+  originalExpr: string,
+  formattedExpr: string,
+  filename: string,
+): number[] {
+  try {
+    const originalTokens = parseExpressionTokens(originalExpr, filename);
+    const formattedTokens = parseExpressionTokens(formattedExpr, filename);
+
+    if (originalTokens.length !== formattedTokens.length) {
+      throw new Error('token-count-mismatch');
+    }
+
+    const anchors = [{ formatted: 0, original: 0 }];
+    for (let i = 0; i < originalTokens.length; i += 1) {
+      const original = originalTokens[i];
+      const formatted = formattedTokens[i];
+      if (original.label !== formatted.label) throw new Error('token-label-mismatch');
+
+      anchors.push({ formatted: formatted.start, original: original.start });
+      anchors.push({ formatted: formatted.end, original: original.end });
+    }
+    anchors.push({ formatted: formattedExpr.length, original: originalExpr.length });
+
+    anchors.sort((a, b) => a.formatted - b.formatted || a.original - b.original);
+
+    const deduped: Array<{ formatted: number; original: number }> = [];
+    for (const anchor of anchors) {
+      const last = deduped[deduped.length - 1];
+      if (!last || last.formatted !== anchor.formatted || last.original !== anchor.original) {
+        deduped.push(anchor);
+      }
+    }
+
+    const boundaryMap = new Array<number>(formattedExpr.length + 1);
+    for (let i = 0; i < deduped.length - 1; i += 1) {
+      const current = deduped[i];
+      const next = deduped[i + 1];
+      const formattedSpan = next.formatted - current.formatted;
+      const originalSpan = next.original - current.original;
+
+      if (formattedSpan <= 0) continue;
+
+      for (let offset = current.formatted; offset < next.formatted; offset += 1) {
+        const relative = offset - current.formatted;
+        boundaryMap[offset] = current.original + Math.round(relative * originalSpan / formattedSpan);
+      }
+    }
+
+    boundaryMap[formattedExpr.length] = originalExpr.length;
+    for (let i = 0; i < boundaryMap.length; i += 1) {
+      if (boundaryMap[i] == null) {
+        boundaryMap[i] = i === 0 ? 0 : boundaryMap[i - 1];
+      }
+    }
+    return boundaryMap;
+  } catch {
+    return Array.from({ length: formattedExpr.length + 1 }, (_, index) => (
+      Math.min(originalExpr.length, Math.round(index * originalExpr.length / Math.max(1, formattedExpr.length)))
+    ));
+  }
+}
+
+function formatPugRegionForLint(
+  expr: string,
+  baseIndent: string,
+  filename: string,
+): { code: string; boundaryMap: number[] } {
+  const wrapped = `${FORMAT_WRAPPER_PREFIX}${expr}\n`;
+  const prettyWrapped = prettier.format(wrapped, {
+    parser: isTypeScriptLikeFilename(filename) ? 'babel-ts' : 'babel',
+    semi: false,
+    singleQuote: true,
+    jsxSingleQuote: true,
+    trailingComma: 'none',
+    bracketSameLine: false,
+  });
+
+  const fixedWrapped = formatLinter.verifyAndFix(prettyWrapped, {
+    ...FORMAT_RULE_CONFIG,
+    ...(isTypeScriptLikeFilename(filename)
+      ? { parser: 'react-pug-typescript-parser' }
+      : {}),
+  }, 'pug-react.jsx').output;
+  let body = fixedWrapped.slice(FORMAT_WRAPPER_PREFIX.length);
+  if (body.endsWith('\n')) body = body.slice(0, -1);
+  body = indentFormattedRegion(body, baseIndent);
+  body = normalizeTernaryBranchIndent(body);
+  body = normalizeJsxClosingBracketIndent(body);
+
+  return {
+    code: body,
+    boundaryMap: buildBoundaryMap(expr, body, filename),
+  };
+}
+
+function formatLintCode(transformed: SourceTransformState, filename: string): FormattedLintCode | null {
+  const pugRegions = transformed.document.mappedRegions
+    .filter(region => region.kind === 'pug')
+    .sort((a, b) => a.shadowStart - b.shadowStart);
+
+  if (pugRegions.length === 0) return null;
+
+  let code = '';
+  let cursor = 0;
+  const copySegments: FormattedCopySegment[] = [];
+  const regionSegments: FormattedRegionSegment[] = [];
+
+  for (const region of pugRegions) {
+    if (cursor < region.shadowStart) {
+      const formattedStart = code.length;
+      const copied = transformed.code.slice(cursor, region.shadowStart);
+      code += copied;
+      copySegments.push({
+        formattedStart,
+        formattedEnd: code.length,
+        transformedStart: cursor,
+        transformedEnd: region.shadowStart,
+      });
+    }
+
+    const formattedStart = code.length;
+    const baseIndent = getLineIndent(transformed.code, region.shadowStart);
+    const formattedRegion = formatPugRegionForLint(
+      transformed.code.slice(region.shadowStart, region.shadowEnd),
+      baseIndent,
+      filename,
+    );
+    code += formattedRegion.code;
+    regionSegments.push({
+      formattedStart,
+      formattedEnd: code.length,
+      transformedStart: region.shadowStart,
+      transformedEnd: region.shadowEnd,
+      boundaryMap: formattedRegion.boundaryMap,
+    });
+    cursor = region.shadowEnd;
+  }
+
+  if (cursor < transformed.code.length) {
+    const formattedStart = code.length;
+    code += transformed.code.slice(cursor);
+    copySegments.push({
+      formattedStart,
+      formattedEnd: code.length,
+      transformedStart: cursor,
+      transformedEnd: transformed.code.length,
+    });
+  }
+
+  return { code, copySegments, regionSegments };
+}
+
+function mapFormattedOffsetToTransformed(
+  formatted: FormattedLintCode,
+  formattedOffset: number,
+): number | null {
+  const clamped = Math.max(0, Math.min(formattedOffset, formatted.code.length));
+
+  for (const region of formatted.regionSegments) {
+    if (clamped < region.formattedStart || clamped > region.formattedEnd) continue;
+    const localOffset = clamped - region.formattedStart;
+    const mappedLocal = region.boundaryMap[Math.min(localOffset, region.boundaryMap.length - 1)] ?? 0;
+    return region.transformedStart + mappedLocal;
+  }
+
+  for (const segment of formatted.copySegments) {
+    if (clamped < segment.formattedStart || clamped > segment.formattedEnd) continue;
+    return segment.transformedStart + (clamped - segment.formattedStart);
+  }
+
+  return null;
+}
+
 function mapLintMessage(
   message: EslintLintMessage,
-  transformed: SourceTransformState,
+  cached: CachedLintState,
 ): EslintLintMessage {
   if (message.line == null || message.column == null) return message;
 
-  const generatedStart = lineColumnToOffset(transformed.code, message.line, message.column);
+  const generatedStart = cached.formatted
+    ? mapFormattedOffsetToTransformed(
+      cached.formatted,
+      lineColumnToOffset(cached.formatted.code, message.line, message.column),
+    )
+    : lineColumnToOffset(cached.transformed.code, message.line, message.column);
+  if (generatedStart == null) return message;
+
   const generatedEnd = (message.endLine != null && message.endColumn != null)
-    ? lineColumnToOffset(transformed.code, message.endLine, message.endColumn)
+    ? (
+        cached.formatted
+          ? mapFormattedOffsetToTransformed(
+            cached.formatted,
+            lineColumnToOffset(cached.formatted.code, message.endLine, message.endColumn),
+          )
+          : lineColumnToOffset(cached.transformed.code, message.endLine, message.endColumn)
+      )
     : generatedStart + 1;
+  if (generatedEnd == null) return message;
 
   const mapped = mapGeneratedRangeToOriginal(
-    transformed.document,
+    cached.transformed.document,
     generatedStart,
     Math.max(1, generatedEnd - generatedStart),
   );
 
   if (!mapped) return message;
 
-  const startLc = offsetToLineColumn(transformed.document.originalText, mapped.start);
-  const endLc = offsetToLineColumn(transformed.document.originalText, mapped.end);
+  const startLc = offsetToLineColumn(cached.transformed.document.originalText, mapped.start);
+  const endLc = offsetToLineColumn(cached.transformed.document.originalText, mapped.end);
 
   return {
     ...message,
@@ -78,7 +449,7 @@ function mapLintMessage(
 function createReactPugProcessor(
   options: EslintReactPugProcessorOptions = {},
 ): EslintProcessorLike {
-  const cache = new Map<string, SourceTransformState>();
+  const cache = new Map<string, CachedLintState>();
 
   return {
     preprocess(
@@ -94,23 +465,24 @@ function createReactPugProcessor(
         startupjsCssxjs: options.startupjsCssxjs ?? 'auto',
         componentPathFromUppercaseClassShorthand: options.componentPathFromUppercaseClassShorthand ?? true,
       });
-      cache.set(filename, transformed);
+      const formatted = formatLintCode(transformed, filename);
+      cache.set(filename, { transformed, formatted });
       if (transformed.regions.length === 0) return [transformed.code];
       return [{
-        text: transformed.code,
+        text: formatted?.code ?? transformed.code,
         filename: getVirtualLintFilename(filename),
       }];
     },
 
     postprocess(messages: EslintLintMessage[][], filename: string): EslintLintMessage[] {
-      const transformed = cache.get(filename);
+      const cached = cache.get(filename);
       cache.delete(filename);
 
       const flat = messages.flat();
-      if (!transformed) return flat;
-      if (transformed.regions.length === 0) return flat;
+      if (!cached) return flat;
+      if (cached.transformed.regions.length === 0) return flat;
 
-      return flat.map((msg) => mapLintMessage(msg, transformed));
+      return flat.map((msg) => mapLintMessage(msg, cached));
     },
 
     supportsAutofix: true,
diff --git a/packages/eslint-plugin-react-pug/test/unit/processor.test.ts b/packages/eslint-plugin-react-pug/test/unit/processor.test.ts
index c2e38a1..af50c64 100644
--- a/packages/eslint-plugin-react-pug/test/unit/processor.test.ts
+++ b/packages/eslint-plugin-react-pug/test/unit/processor.test.ts
@@ -19,7 +19,7 @@ describe('eslint-plugin-react-pug processor', () => {
     expect(blocks[0]).toMatchInlineSnapshot(`
       {
         "filename": "../../../pug-react.jsx",
-        "text": "const view = (<Button label="Save" />);",
+        "text": "const view = <Button label='Save' />;",
       }
     `);
   });
@@ -34,9 +34,9 @@ describe('eslint-plugin-react-pug processor', () => {
     const [block] = processor.preprocess(input, 'file.jsx');
     const code = typeof block === 'string' ? block : block.text;
     expect(code).toMatchInlineSnapshot(`
-      "import "startupjs";             
+      "import "startupjs";
       const active = { active: true };
-      const view = (<span styleName={["title", active]} />);"
+      const view = <span styleName={['title', active]} />;"
     `);
   });
 
@@ -47,14 +47,22 @@ describe('eslint-plugin-react-pug processor', () => {
     });
     const [block] = processor.preprocess('const view = pug`span.title(class=isActive)`;', 'file.jsx');
     const code = typeof block === 'string' ? block : block.text;
-    expect(code).toMatchInlineSnapshot(`"const view = (<span class={"title" + " " + (isActive)} />);"`);
+    expect(code).toMatchInlineSnapshot(`"const view = <span class={'title' + ' ' + isActive} />;"`);
   });
 
   it('preprocess output for JS/JSX is runtime-safe and TS-free', () => {
     const processor = createReactPugProcessor();
     const [block] = processor.preprocess(COMPILER_JS_RUNTIME_SOURCE, 'file.jsx');
     const code = typeof block === 'string' ? block : block.text;
-    expect(code).toMatchInlineSnapshot(`"const view = ((() => {const __r = [];while (ready) {__r.push(<span>Ok</span>);}return __r;})());"`);
+    expect(code).toMatchInlineSnapshot(`
+      "const view = (() => {
+        const __r = []
+        while (ready) {
+          __r.push(<span>Ok</span>)
+        }
+        return __r
+      })();"
+    `);
     expectNoTsOnlyRuntimeSyntax(code);
   });
 
@@ -68,13 +76,52 @@ describe('eslint-plugin-react-pug processor', () => {
     `);
   });
 
+  it('preserves surrounding JS formatting while reformatting only pug output', () => {
+    const processor = createReactPugProcessor();
+    const input = [
+      'function renderTitle () {',
+      '  return pug`',
+      '    Card(',
+      "      title='Hello'",
+      '      subtitle=condition ? value : fallback',
+      '    )',
+      '  `',
+      '}',
+    ].join('\n');
+
+    const [block] = processor.preprocess(input, 'file.jsx');
+    const code = typeof block === 'string' ? block : block.text;
+    expect(code).toMatchInlineSnapshot(`
+      "function renderTitle () {
+        return <Card title='Hello' subtitle={condition ? value : fallback} />
+      }"
+    `);
+  });
+
   it('uses a TSX virtual filename for transformed TypeScript files', () => {
     const processor = createReactPugProcessor();
     const [block] = processor.preprocess('const view = pug`Button(label="Save")`;', 'file.ts');
     expect(block).toMatchInlineSnapshot(`
       {
         "filename": "../../../pug-react.tsx",
-        "text": "const view = (<Button label="Save" />);",
+        "text": "const view = <Button label='Save' />;",
+      }
+    `);
+  });
+
+  it('formats transformed pug regions in tsx files with TypeScript syntax', () => {
+    const processor = createReactPugProcessor();
+    const input = [
+      "const variant = 'text' as const;",
+      "const view = pug`Button(variant=(variant as 'text' | 'solid'))`;",
+    ].join('\n');
+
+    const [block] = processor.preprocess(input, 'file.tsx');
+    expect(block).toMatchInlineSnapshot(`
+      {
+        "filename": "../../../pug-react.tsx",
+        "text": "const variant = 'text' as const;
+      const view = null;",
       }
     `);
   });
diff --git a/packages/react-pug-core/src/language/extractRegions.ts b/packages/react-pug-core/src/language/extractRegions.ts
index d750319..b46bd15 100644
--- a/packages/react-pug-core/src/language/extractRegions.ts
+++ b/packages/react-pug-core/src/language/extractRegions.ts
@@ -169,9 +169,9 @@ function findProgramInsertionOffset(text: string, program: Program): number {
   return lastLeading ? getOffsetAfterTrailingLineBreak(text, lastLeading.end ?? 0) : 0;
 }
 
-function findBlockInsertionOffset(block: BlockStatement): number {
+function findBlockInsertionOffset(text: string, block: BlockStatement): number {
   const firstNonDirective = block.body.find(statement => !isDirectiveStatement(statement));
-  if (firstNonDirective) return firstNonDirective.start ?? ((block.start ?? 0) + 1);
+  if (firstNonDirective) return getLineStartOffset(text, firstNonDirective.start ?? ((block.start ?? 0) + 1));
   return Math.max(0, (block.end ?? 0) - 1);
 }
 
@@ -194,7 +194,7 @@ function buildBlockScopeTarget(text: string, block: BlockStatement): StyleScopeT
   const blockIndent = getLineIndent(text, block.start ?? 0);
   return {
     kind: 'block',
-    insertionOffset: findBlockInsertionOffset(block),
+    insertionOffset: findBlockInsertionOffset(text, block),
     statementIndent: `${blockIndent}  `,
     closingIndent: blockIndent,
   };
diff --git a/packages/react-pug-core/src/language/mapping.ts b/packages/react-pug-core/src/language/mapping.ts
index 1245c1f..ed452b9 100644
--- a/packages/react-pug-core/src/language/mapping.ts
+++ b/packages/react-pug-core/src/language/mapping.ts
@@ -119,7 +119,7 @@ export interface TagImportCleanup {
   /** Offset of the full import declaration in the original file */
   originalStart: number;
   originalEnd: number;
-  /** Fixed-length replacement text for the shadow/transformed output */
+  /** Replacement text for the shadow/transformed output */
   replacementText: string;
 }
 
diff --git a/packages/react-pug-core/src/language/pugToTsx.ts b/packages/react-pug-core/src/language/pugToTsx.ts
index 1cc73f4..6a9a586 100644
--- a/packages/react-pug-core/src/language/pugToTsx.ts
+++ b/packages/react-pug-core/src/language/pugToTsx.ts
@@ -1049,14 +1049,14 @@ function emitMergedClassShorthandAttribute(
     emitter.emitSynthetic('={[');
     for (let i = 0; i < classNames.length; i += 1) {
       if (i > 0) emitter.emitSynthetic(', ');
-      emitter.emitSynthetic('"');
+      emitter.emitSynthetic('\'');
       emitter.emitDerived(
         classNames[i].name,
         classNames[i].offset,
         Math.max(1, classNames[i].sourceLength),
         CSS_CLASS,
       );
-      emitter.emitSynthetic('"');
+      emitter.emitSynthetic('\'');
     }
 
     if (existingAttr) {
diff --git a/packages/react-pug-core/src/language/shadowDocument.ts b/packages/react-pug-core/src/language/shadowDocument.ts
index 38c536e..2e2707c 100644
--- a/packages/react-pug-core/src/language/shadowDocument.ts
+++ b/packages/react-pug-core/src/language/shadowDocument.ts
@@ -17,7 +17,6 @@ import {
   type StyleScopeTarget,
 } from './extractRegions';
 import { compilePugToTsx, type CompileOptions } from './pugToTsx';
-import { originalToShadow } from './positionMapping';
 
 const STARTUPJS_OR_CSSXJS_RE = /['"](?:startupjs|cssxjs)['"]/;
 
@@ -38,6 +37,14 @@ interface PendingInsertion {
   priority: number;
 }
 
+interface PendingTextReplacement {
+  kind: 'import-cleanup';
+  originalStart: number;
+  originalEnd: number;
+  text: string;
+  priority: number;
+}
+
 interface StyleCallPlan {
   regionIndex: number;
   helper: StyleTagLang;
@@ -124,7 +131,7 @@ function buildStyleCallText(
     generatedOffset += 1;
   }
 
-  text += `${statementIndent}\`;\n`;
+  text += `${statementIndent}\`\n`;
 
   return {
     text,
@@ -165,7 +172,13 @@ function buildStyleInsertions(
 
     if (target.kind === 'arrow-expression' || target.kind === 'statement-body') {
       text += '{\n';
-    } else if (target.insertionOffset > 0) {
+    } else if (
+      target.insertionOffset > 0
+      && originalText[target.insertionOffset - 1] !== '\n'
+      && originalText[target.insertionOffset - 1] !== '\r'
+      && originalText[target.insertionOffset] !== '\n'
+      && originalText[target.insertionOffset] !== '\r'
+    ) {
       const prevChar = originalText[target.insertionOffset - 1];
       if (prevChar !== '\n' && prevChar !== '\r') text += '\n';
     }
@@ -233,26 +246,6 @@ function buildStyleInsertions(
   return insertions;
 }
 
-function applyImportCleanups(doc: PugDocument, cleanups: TagImportCleanup[]): string {
-  if (cleanups.length === 0) return doc.shadowText;
-  const chars = doc.shadowText.split('');
-  for (const cleanup of cleanups) {
-    const shadowStart = originalToShadow(doc, cleanup.originalStart);
-    if (shadowStart == null) continue;
-    const shadowEnd = shadowStart + (cleanup.originalEnd - cleanup.originalStart);
-    for (let i = shadowStart; i < shadowEnd; i += 1) {
-      chars[i] = '';
-    }
-    chars[shadowStart] = cleanup.replacementText;
-  }
-  return chars.join('');
-}
-
-function padToLength(text: string, targetLength: number): string | null {
-  if (text.length > targetLength) return null;
-  return text + ' '.repeat(targetLength - text.length);
-}
-
 function buildImportCleanupWithHelpers(
   originalText: string,
   entry: ExtractedImportData,
@@ -263,7 +256,6 @@ function buildImportCleanupWithHelpers(
   const originalStart = declaration.start ?? 0;
   const originalEnd = declaration.end ?? originalStart;
   const originalImportText = originalText.slice(originalStart, originalEnd);
-  const originalLength = originalEnd - originalStart;
   const hasSemicolon = originalImportText.trimEnd().endsWith(';');
   const sourceText = entry.sourceText;
   const matchedSpecifiers = removeTagImport ? entry.matchedSpecifiers : [];
@@ -299,31 +291,11 @@ function buildImportCleanupWithHelpers(
     replacement = `${importPrefix}${parts.join(', ')} from ${sourceText}${hasSemicolon ? ';' : ''}`;
   }
 
-  let replacementText = padToLength(replacement, originalLength);
-  if (replacementText == null) {
-    const compactParts: string[] = [];
-    if (defaultSpecifier) compactParts.push(originalText.slice(defaultSpecifier.start ?? 0, defaultSpecifier.end ?? 0));
-    if (namespaceSpecifier) compactParts.push(originalText.slice(namespaceSpecifier.start ?? 0, namespaceSpecifier.end ?? 0));
-    if (namedPieces.length > 0) compactParts.push(`{${namedPieces.join(',')}}`);
-    const importPrefix = declaration.importKind === 'type' ? 'import type ' : 'import ';
-    const compactReplacement = compactParts.length === 0
-      ? (declaration.importKind === 'type' ? '' : `import ${sourceText}${hasSemicolon ? ';' : ''}`)
-      : `${importPrefix}${compactParts.join(',')} from ${sourceText}${hasSemicolon ? ';' : ''}`;
-    replacementText = padToLength(compactReplacement, originalLength);
-  }
-
-  if (replacementText == null) {
-    return {
-      cleanup: removeTagImport ? entry.cleanup : null,
-      mergedHelpers: new Set<StyleTagLang>(),
-    };
-  }
-
   return {
     cleanup: {
       originalStart,
       originalEnd,
-      replacementText,
+      replacementText: replacement,
     },
     mergedHelpers,
   };
@@ -442,6 +414,13 @@ export function buildShadowDocument(
     }
   }
   pendingInsertions.push(...buildStyleInsertions(originalText, regions, stylePlans));
+  const pendingImportCleanups: PendingTextReplacement[] = importCleanups.map((cleanup) => ({
+    kind: 'import-cleanup',
+    originalStart: cleanup.originalStart,
+    originalEnd: cleanup.originalEnd,
+    text: cleanup.replacementText,
+    priority: -2,
+  }));
 
   const pendingReplacements: PendingReplacement[] = regions.map((region, regionIndex) => ({
     kind: 'replace',
@@ -461,6 +440,11 @@ export function buildShadowDocument(
   }));
 
   const edits = [
+    ...pendingImportCleanups.map((replacement) => ({
+      sortStart: replacement.originalStart,
+      priority: replacement.priority,
+      edit: replacement,
+    })),
     ...pendingInsertions.map((insertion) => ({
       sortStart: insertion.originalOffset,
       priority: insertion.priority,
@@ -498,14 +482,16 @@ export function buildShadowDocument(
 
       const shadowStart = shadowText.length;
       edit.text && (shadowText += edit.text);
-      regions[edit.regionIndex].shadowStart = shadowStart;
-      regions[edit.regionIndex].shadowEnd = shadowText.length;
-      if (edit.mappedRegion) {
-        mappedRegions.push({
-          ...edit.mappedRegion,
-          shadowStart,
-          shadowEnd: shadowText.length,
-        });
+      if ('regionIndex' in edit) {
+        regions[edit.regionIndex].shadowStart = shadowStart;
+        regions[edit.regionIndex].shadowEnd = shadowText.length;
+        if (edit.mappedRegion) {
+          mappedRegions.push({
+            ...edit.mappedRegion,
+            shadowStart,
+            shadowEnd: shadowText.length,
+          });
+        }
       }
       cursor = edit.originalEnd;
       continue;
@@ -570,9 +556,5 @@ export function buildShadowDocument(
     missingTagImport,
   };
 
-  if (importCleanups.length > 0) {
-    document.shadowText = applyImportCleanups(document, importCleanups);
-  }
-
   return document;
 }
diff --git a/packages/react-pug-core/test/integration/real-project-compiler-snapshots.test.ts b/packages/react-pug-core/test/integration/real-project-compiler-snapshots.test.ts
index 9bb7dc7..cd642db 100644
--- a/packages/react-pug-core/test/integration/real-project-compiler-snapshots.test.ts
+++ b/packages/react-pug-core/test/integration/real-project-compiler-snapshots.test.ts
@@ -3,11 +3,13 @@ import { dirname, join, relative } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { describe, expect, it } from 'vitest';
 import { transformSync as babelTransformSync } from '@babel/core';
+import { ESLint } from 'eslint';
+import neostandard from 'neostandard';
 import { TraceMap, eachMapping, originalPositionFor } from '@jridgewell/trace-mapping';
 import { build as esbuildBuild } from 'esbuild';
 import babelPluginReactPug from '../../../babel-plugin-react-pug/src/index';
 import { transformReactPugSourceForSwc } from '../../../swc-plugin-react-pug/src/index';
-import { createReactPugProcessor } from '../../../eslint-plugin-react-pug/src/index';
+import reactPugEslintPlugin, { createReactPugProcessor } from '../../../eslint-plugin-react-pug/src/index';
 import { reactPugEsbuildPlugin } from '../../../esbuild-plugin-react-pug/src/index';
 import { buildShadowDocument, createTransformSourceMap, transformSourceFile } from '../../src/index';
 import { lineColumnToOffset } from '../../src/language/diagnosticMapping';
@@ -22,8 +24,20 @@ const FIXTURES = [
   'event-tabs-breed.js',
   'cat-profile-link.js',
   'CatCard.js',
+  'event-tabs-layout.tsx',
+  'event-tabs-breed.tsx',
+  'cat-profile-link.tsx',
+  'CatCard.tsx',
 ];
 
+function isTypeScriptLikeFixture(fileName: string): boolean {
+  return /\.(?:ts|tsx|mts|cts)$/.test(fileName);
+}
+
+function parserPluginsForFixture(fileName: string): string[] {
+  return isTypeScriptLikeFixture(fileName) ? ['jsx', 'typescript'] : ['jsx'];
+}
+
 function fixturePath(fileName: string): string {
   return join(FIXTURES_DIR, fileName);
 }
@@ -38,6 +52,31 @@ function readFixture(fileName: string): string {
   return readFileSync(fixturePath(fileName), 'utf8');
 }
 
+function formatEslintResults(results: Awaited<ReturnType<ESLint['lintText']>>): string {
+  const lines: string[] = [];
+  let totalErrors = 0;
+  let fileCount = 0;
+
+  for (const result of results) {
+    if (result.messages.length === 0) continue;
+    fileCount += 1;
+    lines.push(result.filePath.replaceAll('\\', '/'));
+    for (const message of result.messages) {
+      totalErrors += message.severity === 2 ? 1 : 0;
+      const severity = message.severity === 2 ? 'error' : 'warning';
+      const location = `${message.line ?? 0}:${message.column ?? 0}`;
+      const rule = message.ruleId ?? '(no-rule)';
+      lines.push(`  ${location}  ${severity}  ${message.message}  ${rule}`);
+    }
+    lines.push('');
+  }
+
+  if (lines.length === 0) return 'Found 0 errors.';
+
+  lines.push(`Found ${totalErrors} errors in ${fileCount} files.`);
+  return lines.join('\n');
+}
+
 function normalizeMapSources(map: any): any {
   if (!map || !Array.isArray(map.sources)) return map;
   return {
@@ -133,6 +172,31 @@ function countMappingsInsidePugRegions(
 describe('real project fixtures compiler snapshots', () => {
   it('matches output snapshots for Babel, SWC, esbuild, ESLint preprocess, and shadow TSX', async () => {
     mkdirSync(SNAPSHOTS_DIR, { recursive: true });
+    const eslintForNeostandard = new ESLint({
+      cwd: REPO_ROOT,
+      ignore: false,
+      overrideConfigFile: true,
+      overrideConfig: [
+        ...neostandard({
+          ts: true,
+        }),
+        {
+          files: ['**/*.js', '**/*.mjs', '**/*.cjs'],
+          languageOptions: {
+            parserOptions: {
+              ecmaFeatures: { jsx: true },
+              sourceType: 'module',
+            },
+          },
+        },
+        {
+          plugins: {
+            'react-pug': reactPugEslintPlugin as any,
+          },
+          processor: 'react-pug/pug-react',
+        },
+      ] as any,
+    });
 
     for (const fileName of FIXTURES) {
       const source = readFixture(fileName);
@@ -147,7 +211,7 @@ describe('real project fixtures compiler snapshots', () => {
         sourceMaps: true,
         parserOpts: {
           sourceType: 'module',
-          plugins: ['jsx'],
+          plugins: parserPluginsForFixture(fileName),
         },
         generatorOpts: {
           compact: false,
@@ -169,7 +233,7 @@ describe('real project fixtures compiler snapshots', () => {
         sourceMaps: true,
         parserOpts: {
           sourceType: 'module',
-          plugins: ['jsx'],
+          plugins: parserPluginsForFixture(fileName),
         },
         generatorOpts: {
           compact: false,
@@ -210,6 +274,8 @@ describe('real project fixtures compiler snapshots', () => {
         jsx: 'preserve',
         loader: {
           '.js': 'jsx',
+          '.ts': 'ts',
+          '.tsx': 'tsx',
         },
         target: 'esnext',
         sourcemap: 'external',
@@ -217,8 +283,10 @@ describe('real project fixtures compiler snapshots', () => {
         plugins: [reactPugEsbuildPlugin()],
       });
 
-      const esbuildJs = transformedByEsbuildPlugin.outputFiles?.find((f) => f.path.endsWith('.js'))?.text ?? '';
-      const esbuildMapRaw = transformedByEsbuildPlugin.outputFiles?.find((f) => f.path.endsWith('.js.map'))?.text ?? 'null';
+      const esbuildCodeFile = transformedByEsbuildPlugin.outputFiles?.find((f) => !f.path.endsWith('.map'));
+      const esbuildMapFile = transformedByEsbuildPlugin.outputFiles?.find((f) => f.path.endsWith('.map'));
+      const esbuildJs = esbuildCodeFile?.text ?? '';
+      const esbuildMapRaw = esbuildMapFile?.text ?? 'null';
       const esbuildMap = JSON.parse(esbuildMapRaw);
       await expect(esbuildJs).toMatchFileSnapshot(snapshotPath('esbuild', fileName, 'output.jsx'));
       await expect(JSON.stringify(normalizeMapSources(esbuildMap), null, 2))
@@ -230,6 +298,12 @@ describe('real project fixtures compiler snapshots', () => {
       const eslintOutputText = typeof eslintOutput === 'string' ? eslintOutput : eslintOutput.text;
       await expect(eslintOutputText).toMatchFileSnapshot(snapshotPath('eslint', fileName, 'output.jsx'));
 
+      const eslintNeostandardResults = await eslintForNeostandard.lintText(source, {
+        filePath: fixturePath(fileName),
+      });
+      await expect(formatEslintResults(eslintNeostandardResults))
+        .toMatchFileSnapshot(snapshotPath('eslint-neostandard', fileName, 'diagnostics.txt'));
+
       const shadowDoc = buildShadowDocument(source, relativeFixture, 1, 'pug');
       await expect(shadowDoc.shadowText).toMatchFileSnapshot(snapshotPath('shadow', fileName, 'output.tsx'));
 
diff --git a/packages/react-pug-core/test/unit/extractRegions.test.ts b/packages/react-pug-core/test/unit/extractRegions.test.ts
index a5c0b22..8989955 100644
--- a/packages/react-pug-core/test/unit/extractRegions.test.ts
+++ b/packages/react-pug-core/test/unit/extractRegions.test.ts
@@ -297,7 +297,7 @@ describe('style scope and import analysis', () => {
 
     expect(analysis.styleScopeTargets).toHaveLength(1);
     expect(analysis.styleScopeTargets[0].kind).toBe('block');
-    expect(analysis.styleScopeTargets[0].insertionOffset).toBe(text.indexOf('const view'));
+    expect(analysis.styleScopeTargets[0].insertionOffset).toBe(text.indexOf('    const view'));
   });
 
   it('targets single-line statement bodies so they can be normalized into blocks', () => {
diff --git a/packages/react-pug-core/test/unit/pugToTsx.test.ts b/packages/react-pug-core/test/unit/pugToTsx.test.ts
index a61dcfd..08c07be 100644
--- a/packages/react-pug-core/test/unit/pugToTsx.test.ts
+++ b/packages/react-pug-core/test/unit/pugToTsx.test.ts
@@ -1441,7 +1441,7 @@ describe('class shorthand strategy', () => {
       classAttribute: 'styleName',
       classMerge: 'classnames',
     });
-    expect(result.tsx).toContain('styleName={["title", active]}');
+    expect(result.tsx).toContain("styleName={['title', active]}");
   });
 
   it('concatenate mode for className merges into string expression', () => {
@@ -1457,7 +1457,7 @@ describe('class shorthand strategy', () => {
       classAttribute: 'styleName',
       classMerge: 'classnames',
     });
-    expect(result.tsx).toContain('styleName={["title", "bold"]}');
+    expect(result.tsx).toContain("styleName={['title', 'bold']}");
   });
 
   it('keeps mapping for existing className attr when merged with shorthand class', () => {
diff --git a/packages/react-pug-core/test/unit/shadowDocument.test.ts b/packages/react-pug-core/test/unit/shadowDocument.test.ts
index 4d3f1fd..2bea22a 100644
--- a/packages/react-pug-core/test/unit/shadowDocument.test.ts
+++ b/packages/react-pug-core/test/unit/shadowDocument.test.ts
@@ -132,7 +132,7 @@ describe('single pug region', () => {
       'const v = pug`span.title(styleName=active)`;',
     ].join('\n');
     const doc = buildShadowDocument(text, 'test.tsx');
-    expect(doc.shadowText).toContain('styleName={["title", active]}');
+    expect(doc.shadowText).toContain("styleName={['title', active]}");
     expect(doc.shadowText).not.toContain('className="title"');
   });
 
@@ -179,16 +179,15 @@ describe('terminal style blocks in shadow document', () => {
     const doc = buildShadowDocument(text, 'app.tsx');
 
     expect(doc.shadowText).toMatchInlineSnapshot(`
-      "import {observer,styl} from 'startupjs';  
+      "import { observer, styl } from 'startupjs';
       function App() {
         if (visible) {
-          
           styl\`
             .title
               color red
 
-          \`;
-      const view = (<div styleName={["title"]}>Hello</div>);
+          \`
+          const view = (<div styleName={['title']}>Hello</div>);
         }
       }"
     `);
@@ -212,8 +211,8 @@ describe('terminal style blocks in shadow document', () => {
         css\`
           .title { color: red; }
 
-        \`;
-        return (<div styleName={["title"]}>Hello</div>);
+        \`
+        return (<div styleName={['title']}>Hello</div>);
       };"
     `);
   });
@@ -244,15 +243,15 @@ describe('terminal style blocks in shadow document', () => {
           css\`
             .one { color: red; }
 
-          \`;
-          return (<div styleName={["title"]}>One</div>)
+          \`
+          return (<div styleName={['title']}>One</div>)
         }
         else {
           css\`
             .two { color: blue; }
 
-          \`;
-          return (<div styleName={["title"]}>Two</div>)
+          \`
+          return (<div styleName={['title']}>Two</div>)
         }
       }"
     `);
diff --git a/packages/react-pug-core/test/unit/sourceTransform.test.ts b/packages/react-pug-core/test/unit/sourceTransform.test.ts
index 68a7acf..89534f2 100644
--- a/packages/react-pug-core/test/unit/sourceTransform.test.ts
+++ b/packages/react-pug-core/test/unit/sourceTransform.test.ts
@@ -100,9 +100,9 @@ describe('transformSourceFile', () => {
     ].join('\n');
     const result = transformSourceFile(source, 'file.tsx', { compileMode: 'runtime' });
     expect(result.code).toMatchInlineSnapshot(`
-      "import 'startupjs';             
+      "import 'startupjs';
       const active = { active: true };
-      const view = (<span styleName={["title", active]} />);"
+      const view = (<span styleName={['title', active]} />);"
     `);
   });
 
@@ -139,8 +139,8 @@ describe('transformSourceFile', () => {
     ].join('\n');
     const result = transformSourceFile(source, 'file.tsx', { compileMode: 'runtime' });
     expect(result.code).toMatchInlineSnapshot(`
-      "import 'startupjs';             
-      const view = (<span styleName={["title"]} />);"
+      "import 'startupjs';
+      const view = (<span styleName={['title']} />);"
     `);
   });
 
@@ -151,8 +151,8 @@ describe('transformSourceFile', () => {
     ].join('\n');
     const result = transformSourceFile(source, 'file.tsx', { compileMode: 'runtime' });
     expect(result.code).toMatchInlineSnapshot(`
-      "import { observer } from 'startupjs';     
-      const view = (<span styleName={["title"]} />);"
+      "import { observer } from 'startupjs';
+      const view = (<span styleName={['title']} />);"
     `);
   });
 
@@ -167,7 +167,7 @@ describe('transformSourceFile', () => {
     });
     expect(result.code).toMatchInlineSnapshot(`
       "import { pug } from 'startupjs';
-      const view = (<span styleName={["title"]} />);"
+      const view = (<span styleName={['title']} />);"
     `);
   });
 
@@ -194,15 +194,14 @@ describe('transformSourceFile', () => {
     const result = transformSourceFile(source, 'file.tsx', { compileMode: 'runtime' });
 
     expect(result.code).toMatchInlineSnapshot(`
-      "import {observer,styl} from 'startupjs';  
+      "import { observer, styl } from 'startupjs';
       function App() {
-        
         styl\`
           .title
             color red
 
-        \`;
-      return (<div styleName={["title"]}>Hello</div>);
+        \`
+        return (<div styleName={['title']}>Hello</div>);
       }"
     `);
   });
@@ -233,15 +232,15 @@ describe('transformSourceFile', () => {
           css\`
             .one { color: red; }
 
-          \`;
-          return (<div styleName={["title"]}>One</div>)
+          \`
+          return (<div styleName={['title']}>One</div>)
         }
         else {
           css\`
             .two { color: blue; }
 
-          \`;
-          return (<div styleName={["title"]}>Two</div>)
+          \`
+          return (<div styleName={['title']}>Two</div>)
         }
       }"
     `);
diff --git a/packages/swc-plugin-react-pug/test/unit/transform.test.ts b/packages/swc-plugin-react-pug/test/unit/transform.test.ts
index 965980d..309f1f5 100644
--- a/packages/swc-plugin-react-pug/test/unit/transform.test.ts
+++ b/packages/swc-plugin-react-pug/test/unit/transform.test.ts
@@ -34,7 +34,7 @@ describe('swc-plugin-react-pug transform', () => {
       'const view = pug`span.title(styleName=active)`;',
     ].join('\n');
     const result = transformReactPugSourceForSwc(source, 'fixture.tsx');
-    expect(result.code).toContain('styleName={["title", active]}');
+    expect(result.code).toContain("styleName={['title', active]}");
   });
 
   it('allows forcing class shorthand property and merge strategy', () => {
diff --git a/packages/typescript-plugin-react-pug/test/integration/config.test.ts b/packages/typescript-plugin-react-pug/test/integration/config.test.ts
index 4daf1f1..27ffce8 100644
--- a/packages/typescript-plugin-react-pug/test/integration/config.test.ts
+++ b/packages/typescript-plugin-react-pug/test/integration/config.test.ts
@@ -366,9 +366,9 @@ describe('plugin with class shorthand config', () => {
 
     const shadow = snapshotText(result.host.getScriptSnapshot(file));
     expect(shadow).toMatchInlineSnapshot(`
-      "import "startupjs";             
+      "import "startupjs";
       const active = { active: true };
-      const view = (<span styleName={["title", active]} />);
+      const view = (<span styleName={['title', active]} />);
 
       /* [pug-react] startupjs/cssxjs extra react attributes */
       // extra props for cssxjs \`:part\` and \`styleName\` features
diff --git a/packages/typescript-plugin-react-pug/test/unit/plugin-host-patching.test.ts b/packages/typescript-plugin-react-pug/test/unit/plugin-host-patching.test.ts
index a98c812..e544dad 100644
--- a/packages/typescript-plugin-react-pug/test/unit/plugin-host-patching.test.ts
+++ b/packages/typescript-plugin-react-pug/test/unit/plugin-host-patching.test.ts
@@ -498,8 +498,8 @@ describe('pug-to-JSX transformation', () => {
     });
     const text = snapshotText(host.getScriptSnapshot('app.tsx'));
     expect(text).toMatchInlineSnapshot(`
-      "import "startupjs";             
-      const v = (<span styleName={["foo", active]} />);
+      "import "startupjs";
+      const v = (<span styleName={['foo', active]} />);
 
       /* [pug-react] startupjs/cssxjs extra react attributes */
       // extra props for cssxjs \`:part\` and \`styleName\` features
diff --git a/packages/vscode-react-pug-tsx/test/unit/show-shadow-tsx.test.ts b/packages/vscode-react-pug-tsx/test/unit/show-shadow-tsx.test.ts
index fe48533..8c447e9 100644
--- a/packages/vscode-react-pug-tsx/test/unit/show-shadow-tsx.test.ts
+++ b/packages/vscode-react-pug-tsx/test/unit/show-shadow-tsx.test.ts
@@ -344,7 +344,7 @@ describe('pugReact.showShadowTsx command', () => {
     const provider = registeredProviders.get('pug-react-shadow');
     const uriArg = openTextDocument.mock.calls[0][0];
     const content = provider.provideTextDocumentContent(uriArg);
-    expect(content).toContain('styleName={["title", active]}');
+    expect(content).toContain("styleName={['title', active]}");
     expect(content).not.toContain('className="title"');
   });
 
diff --git a/test/fixtures/real-project/CatCard.js b/test/fixtures/real-project/CatCard.js
index 804043a..70ccb46 100644
--- a/test/fixtures/real-project/CatCard.js
+++ b/test/fixtures/real-project/CatCard.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { pug, styl, observer, useSub, $ } from 'startupjs'
+import { pug, observer, useSub, $ } from 'startupjs'
 import { Div, Span, Avatar, Link } from 'startupjs-ui'
 
 export default observer(({ $cat, showPhone, large, small }) => {
@@ -27,18 +27,17 @@ export default observer(({ $cat, showPhone, large, small }) => {
               Span.text(styleName={ large })
                 Span(bold) Phonegram:#{' '}
                 Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram
-  `
-  /* eslint-disable-line */styl`
-    .avatar
-      margin-right 1u
-      &.large
-        width 12u
-        height @width
-      &.small
-        width 4u
-        height @width
-    .text.large
-      font(h6)
+    style(lang='styl')
+      .avatar
+        margin-right 1u
+        &.large
+          width 12u
+          height @width
+        &.small
+          width 4u
+          height @width
+      .text.large
+        font(h6)
   `
 })
 
diff --git a/test/fixtures/real-project/CatCard.tsx b/test/fixtures/real-project/CatCard.tsx
new file mode 100644
index 0000000..70ccb46
--- /dev/null
+++ b/test/fixtures/real-project/CatCard.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+import { pug, observer, useSub, $ } from 'startupjs'
+import { Div, Span, Avatar, Link } from 'startupjs-ui'
+
+export default observer(({ $cat, showPhone, large, small }) => {
+  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()
+  return pug`
+    Div(part='root' row vAlign='center')
+      if photoFileId
+        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)
+      else
+        Avatar.avatar(styleName={ large, small })= name
+      Div(row)
+        Span.text(bold styleName={ large })= (number || 'X') + '. '
+        Div
+          Span.text(styleName={ large })= name
+          if showPhone
+            if phone
+              Span.text(styleName={ large })
+                Span(bold) Phone:#{' '}
+                = phone
+            if catgram
+              Span.text(styleName={ large })
+                Span(bold) Catgram:#{' '}
+                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram
+            if phonegram
+              Span.text(styleName={ large })
+                Span(bold) Phonegram:#{' '}
+                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram
+    style(lang='styl')
+      .avatar
+        margin-right 1u
+        &.large
+          width 12u
+          height @width
+        &.small
+          width 4u
+          height @width
+      .text.large
+        font(h6)
+  `
+})
+
+const Photo = observer(({ fileId, name }) => {
+  const $file = useSub($.files[fileId])
+  let url
+  try { url = $file.getUrl() } catch (err) {}
+  return pug`
+    Avatar(part='root' src=url)= name
+  `
+})
+
+function getCatgramLink (username) {
+  if (!username) return
+  if (/:\/\//.test(username)) return username
+  return 'https://catgr.am/' + username
+}
+
+function getPhonegramLink (username) {
+  if (!username) return
+  if (/:\/\//.test(username)) return username
+  return 'https://www.phonegram.com/' + username
+}
diff --git a/test/fixtures/real-project/cat-profile-link.js b/test/fixtures/real-project/cat-profile-link.js
index cdc3889..3a075ae 100644
--- a/test/fixtures/real-project/cat-profile-link.js
+++ b/test/fixtures/real-project/cat-profile-link.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { pug, observer, $, useSub, styl } from 'startupjs'
+import { pug, observer, $, useSub } from 'startupjs'
 import { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'
 import { useGlobalSearchParams, Stack } from 'expo-router'
 import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
@@ -73,10 +73,9 @@ const Profile = observer(({ $cat, $event }) => {
         fields=profileEditFields
         $value=$cat
       )
-  `
-  styl`
-    .hackSidePadding
-      width 1u
+    style(lang='styl')
+      .hackSidePadding
+        width 1u
   `
 })
 
diff --git a/test/fixtures/real-project/cat-profile-link.tsx b/test/fixtures/real-project/cat-profile-link.tsx
new file mode 100644
index 0000000..3a075ae
--- /dev/null
+++ b/test/fixtures/real-project/cat-profile-link.tsx
@@ -0,0 +1,97 @@
+import React from 'react'
+import { pug, observer, $, useSub } from 'startupjs'
+import { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'
+import { useGlobalSearchParams, Stack } from 'expo-router'
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
+import CatCard from '@/components/CatCard'
+import * as stages from '@/components/stages'
+import { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'
+import { STAGES } from '@/model/events/schema'
+
+export default observer(() => {
+  const { token } = useGlobalSearchParams()
+  const [$cat] = useSub($.cats, { token })
+  if (!$cat) return renderExpired()
+
+  const eventId = $cat.eventId.get()
+  const $event = useSub($.events[eventId])
+
+  function renderTitle () {
+    return pug`
+      CatCard($cat=$cat)
+    `
+  }
+
+  function renderSettings () {
+    return pug`
+      Profile($cat=$cat $event=$event)
+    `
+  }
+
+  const Stage = stages[$cat.getMyStage()]
+
+  return pug`
+    Stack.Screen(
+      options={
+        headerTitle: renderTitle,
+        headerRight: renderSettings
+      }
+    )
+    Stage($cat=$cat $event=$event)
+  `
+})
+
+const Profile = observer(({ $cat, $event }) => {
+  const $showEdit = $()
+  const { tablet } = useMedia()
+  const excludeNumber = $event.stage.get() !== STAGES.InProgress
+  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})
+
+  return pug`
+    Div(row vAlign='center' gap=1)
+      if !hasContact($cat)
+        Tag(color='error') No contact
+      if !$cat.photoFileId.get()
+        Tag(color='error') No photo
+      if $cat.getMyStage() === STAGES.Profile
+        Div.hackSidePadding
+      else
+        Button(
+          variant='text'
+          icon=faPen
+          onPress=() => $showEdit.set(true)
+        )
+          if tablet
+            = 'Edit cat profile'
+          else
+            = 'Edit'
+    Modal(
+      title='Edit cat profile'
+      $visible=$showEdit
+    )
+      Form(
+        fields=profileEditFields
+        $value=$cat
+      )
+    style(lang='styl')
+      .hackSidePadding
+        width 1u
+  `
+})
+
+function hasContact ($cat) {
+  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()
+}
+
+function renderExpired () {
+  return pug`
+    Content(padding)
+      Alert(variant='error')
+        Span
+          | Cat profile link is incorrect or already expired.
+          |
+          | Your cat meetup profile link is only valid for a limited period of time.
+          |
+          | If you believe this is an error, please contact the cat meetup organizer.
+  `
+}
diff --git a/test/fixtures/real-project/event-tabs-breed.tsx b/test/fixtures/real-project/event-tabs-breed.tsx
new file mode 100644
index 0000000..71bda71
--- /dev/null
+++ b/test/fixtures/real-project/event-tabs-breed.tsx
@@ -0,0 +1,153 @@
+import React, { useState } from 'react'
+import { pug, observer, useSub, $ } from 'startupjs'
+import {
+  Link, Item, ScrollView, Form, useFormProps, Alert,
+  Content, Tag, Br, Button, Modal, Div, confirm,
+  useFormFields$, useValidate
+} from 'startupjs-ui'
+import { useGlobalSearchParams } from 'expo-router'
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
+import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'
+import { faLink } from '@fortawesome/free-solid-svg-icons/faLink'
+import CatCard from '@/components/CatCard'
+import { CAT_FORM } from '@/model/cats/schema'
+
+export default observer(({ breed }) => {
+  const { eventId } = useGlobalSearchParams()
+  const [$selected, set$selected] = useState()
+  const $new = $()
+  const $showModal = $()
+  const $mode = $()
+  const $fields = useFormFields$(CAT_FORM)
+  const validate = useValidate()
+
+  function showCreate () {
+    $new.set({ breed })
+    $fields.breed.disabled.set(true)
+    set$selected(() => $new)
+    $mode.set('new')
+    $showModal.set(true)
+  }
+
+  function showEdit ($cat) {
+    $fields.breed.disabled.del()
+    set$selected(() => $cat)
+    $mode.set('edit')
+    $showModal.set(true)
+  }
+
+  function cancel () {
+    if (!$showModal.get()) return
+    $showModal.del()
+    $mode.del()
+  }
+
+  async function create () {
+    if (!validate()) return
+    await $.cats.addNew({
+      ...$new.getDeepCopy(),
+      eventId
+    })
+    cancel()
+  }
+
+  async function deleteCat () {
+    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return
+    await $selected.del()
+    cancel()
+  }
+
+  return pug`
+    ScrollView(full)
+      Content(full pure)
+        CatsList(eventId=eventId onEdit=showEdit breed=breed)
+    Content(padding=1)
+      Button(onPress=showCreate) Add new #{breed}
+    Modal(
+      title=$mode.get() === 'new' ? 'Create cat' : 'Edit cat'
+      $visible=$showModal
+      onDismiss=cancel
+    )
+      - const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic')
+      Form(
+        key=$selected?.getId() || 'NEW'
+        $fields=$fields
+        $value=$selected
+        oppositeBreed=oppositeBreed
+        eventId=eventId
+        customInputs={
+          likes: SelectLikesInput
+        }
+        validate=validate
+      )
+      Br
+      if $mode.get() === 'new'
+        Div(align='right' row)
+          Button(onPress=cancel) Cancel
+          Button(disabled=validate.hasErrors pushed variant='flat' color='primary' onPress=create) Create
+      else if $mode.get() === 'edit'
+        Div(align='right' row)
+          Button(color='error' onPress=deleteCat) Delete
+  `
+})
+
+const CatsList = observer(({ onEdit, breed, eventId }) => {
+  if (!eventId) return pug`Alert(variant='error') No event specified`
+  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })
+  return pug`
+    each $cat in $cats
+      Item(key=$cat.getId())
+        CatCard($cat=$cat)
+        Item.Right
+          Div(vAlign='center' row gap=1)
+            if !hasContact($cat)
+              Tag(color='error') No contact
+            if !$cat.photoFileId.get()
+              Tag(color='error') No photo
+            Button(variant='text' icon=faPen onPress=() => onEdit($cat) tooltip='Edit')
+            Link(href='/events/' + eventId + '/matches/' + $cat.getId())
+              Button(variant='text' icon=faHeart tooltip='Matches')
+            Link(href='/cats/' + $cat.token.get())
+              Button(variant='text' icon=faLink tooltip='Cat profile link') Link
+  `
+})
+
+function hasContact ($cat) {
+  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()
+}
+
+const SelectLikesInput = observer(({ $value, ...props }) => {
+  const { oppositeBreed, eventId } = { ...useFormProps(), ...props }
+  return pug`
+    if oppositeBreed
+      SelectLikes(
+        $likes=$value
+        oppositeBreed=oppositeBreed
+        eventId=eventId
+      )
+    else
+      Alert(variant='warning') Select breed to choose likes
+  `
+})
+
+const SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {
+  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })
+  return pug`
+    each $cat in $cats
+      - const catId = $cat.getId()
+      Item.item(
+        key=catId
+        styleName={ selected: $likes[catId].get() }
+        onPress=() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)
+      )
+        CatCard($cat=$cat small)
+    else
+      Alert(variant='info') No cats with selected breed yet
+    style(lang='styl')
+      .item
+        border-radius 1u
+        &.selected
+          // FIXME: We can't use color var(--color-text-success-strong) here
+          background-color var(--color-text-success-strong)
+  `
+})
diff --git a/test/fixtures/real-project/event-tabs-layout.js b/test/fixtures/real-project/event-tabs-layout.js
index 3291584..7f4158d 100644
--- a/test/fixtures/real-project/event-tabs-layout.js
+++ b/test/fixtures/real-project/event-tabs-layout.js
@@ -1,6 +1,6 @@
 // import { Platform } from 'react-native'
 import React from 'react'
-import { pug, observer, styl, $, useSub } from 'startupjs'
+import { pug, observer, $, useSub } from 'startupjs'
 import { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'
 import { Tabs, useLocalSearchParams, Stack } from 'expo-router'
 import { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'
@@ -70,15 +70,14 @@ export default observer(function TabLayout () {
           tabBarIcon: renderTestIcon
         }
       )
-  `
-  styl`
-    +tablet()
-      .screen
-        &:part(tabBar)
-          order -1
-          background-color transparent
-          border-bottom-width 1px
-          border-bottom-color rgba(0, 0, 0, 0.1)
+    style(lang='styl')
+      +tablet()
+        .screen
+          &:part(tabBar)
+            order -1
+            background-color transparent
+            border-bottom-width 1px
+            border-bottom-color rgba(0, 0, 0, 0.1)
   `
 })
 
diff --git a/test/fixtures/real-project/event-tabs-layout.tsx b/test/fixtures/real-project/event-tabs-layout.tsx
new file mode 100644
index 0000000..7f4158d
--- /dev/null
+++ b/test/fixtures/real-project/event-tabs-layout.tsx
@@ -0,0 +1,127 @@
+// import { Platform } from 'react-native'
+import React from 'react'
+import { pug, observer, $, useSub } from 'startupjs'
+import { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'
+import { Tabs, useLocalSearchParams, Stack } from 'expo-router'
+import { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'
+import { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'
+import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
+import { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'
+import { EVENT_FORM } from '@/model/events/schema'
+
+export default observer(function TabLayout () {
+  const getColor = useColors()
+  const { eventId } = useLocalSearchParams()
+  const $event = useSub($.events[eventId])
+  if (!$event.get()) throw Error('No such event')
+
+  // NOTE:
+  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.
+  // tabBarStyle/order - Move the tab bar to the top on tablet+
+  return pug`
+    Stack.Screen(
+      options={
+        title: $event.name.get(),
+        headerRight: () => renderEditEvent({ $event })
+      }
+    )
+    Tabs(
+      title=$event.name.get()
+      screenOptions={
+        ...styl('screen'),
+        tabBarActiveTintColor: getColor('primary'),
+        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',
+        headerShown: false,
+        headerTitle: $event.name.get()
+      }
+    )
+      Tabs.Screen(
+        name='index'
+        options={
+          title: 'Dashboard',
+          tabBarIcon: renderHomeIcon
+        }
+      )
+      Tabs.Screen(
+        name='-breed'
+        options={
+          href: null
+        }
+      )
+      Tabs.Screen(
+        name='domestic'
+        options={
+          title: 'Domestic Cats',
+          tabBarIcon: renderDomesticIcon
+        }
+      )
+      Tabs.Screen(
+        name='wild'
+        options={
+          title: 'Wild Cats',
+          tabBarIcon: renderWildIcon
+        }
+      )
+      Tabs.Screen(
+        name='test'
+        options={
+          title: 'Dev Only',
+          tabBarIcon: renderTestIcon
+        }
+      )
+    style(lang='styl')
+      +tablet()
+        .screen
+          &:part(tabBar)
+            order -1
+            background-color transparent
+            border-bottom-width 1px
+            border-bottom-color rgba(0, 0, 0, 0.1)
+  `
+})
+
+function renderEditEvent ({ $event }) {
+  return pug`
+    EditEvent($event=$event)
+  `
+}
+
+const EditEvent = observer(({ $event }) => {
+  const $showModal = $()
+  return pug`
+    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup
+    Modal(
+      title='Edit cat meetup'
+      $visible=$showModal
+    )
+      Form(
+        $value=$event
+        fields=EVENT_FORM
+      )
+  `
+})
+
+function renderWildIcon ({ color, size }) {
+  return pug`
+    Icon(icon=faWildBadge style={ color, width: size, height: size })
+  `
+}
+
+function renderDomesticIcon ({ color, size }) {
+  return pug`
+    Icon(icon=faDomesticBadge style={ color, width: size, height: size })
+  `
+}
+
+function renderHomeIcon ({ color, size }) {
+  return pug`
+    Icon(icon=faHeart style={ color, width: size, height: size })
+  `
+}
+
+function renderTestIcon ({ color, size }) {
+  return pug`
+    Icon(icon=faToolbox style={ color, width: size, height: size })
+  `
+}
diff --git a/test/fixtures/real-project/snapshots/babel-basic/CatCard.js.output.jsx b/test/fixtures/real-project/snapshots/babel-basic/CatCard.js.output.jsx
index e209606..6c57779 100644
--- a/test/fixtures/real-project/snapshots/babel-basic/CatCard.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/babel-basic/CatCard.js.output.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { styl, observer, useSub, $ } from 'startupjs';
+import { observer, useSub, $, styl } from 'startupjs';
 import { Div, Span, Avatar, Link } from 'startupjs-ui';
 export default observer(({
   $cat,
@@ -7,6 +7,18 @@ export default observer(({
   large,
   small
 }) => {
+  styl`
+  .avatar
+    margin-right 1u
+    &.large
+      width 12u
+      height @width
+    &.small
+      width 4u
+      height @width
+  .text.large
+    font(h6)
+`;
   const {
     name,
     number,
@@ -15,39 +27,27 @@ export default observer(({
     photoFileId,
     phonegram
   } = $cat.get();
-  return <Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={["avatar", {
+  return <Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={['avatar', {
       large,
       small
-    }]} fileId={photoFileId} name={name} /> : <Avatar styleName={["avatar", {
+    }]} fileId={photoFileId} name={name} /> : <Avatar styleName={['avatar', {
       large,
       small
-    }]}>{name}</Avatar>}<Div row><Span styleName={["text", {
+    }]}>{name}</Avatar>}<Div row><Span styleName={['text', {
         large
-      }]} bold>{(number || 'X') + '. '}</Span><Div><Span styleName={["text", {
+      }]} bold>{(number || 'X') + '. '}</Span><Div><Span styleName={['text', {
           large
-        }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={["text", {
+        }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={['text', {
             large
-          }]}><Span bold>Phone:{' '}</Span>{phone}</Span> : null}{catgram ? <Span styleName={["text", {
+          }]}><Span bold>Phone:{' '}</Span>{phone}</Span> : null}{catgram ? <Span styleName={['text', {
             large
-          }]}><Span bold>Catgram:{' '}</Span><Link styleName={["text", {
+          }]}><Span bold>Catgram:{' '}</Span><Link styleName={['text', {
               large
-            }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={["text", {
+            }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={['text', {
             large
-          }]}><Span bold>Phonegram:{' '}</Span><Link styleName={["text", {
+          }]}><Span bold>Phonegram:{' '}</Span><Link styleName={['text', {
               large
             }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>;
-  styl`
-    .avatar
-      margin-right 1u
-      &.large
-        width 12u
-        height @width
-      &.small
-        width 4u
-        height @width
-    .text.large
-      font(h6)
-  `;
 });
 const Photo = observer(({
   fileId,
diff --git a/test/fixtures/real-project/snapshots/babel-basic/CatCard.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel-basic/CatCard.js.output.sourcemap.json
index 949169e..f91ae68 100644
--- a/test/fixtures/real-project/snapshots/babel-basic/CatCard.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/babel-basic/CatCard.js.output.sourcemap.json
@@ -2,10 +2,10 @@
   "version": 3,
   "names": [
     "React",
-    "styl",
     "observer",
     "useSub",
     "$",
+    "styl",
     "Div",
     "Span",
     "Avatar",
@@ -37,8 +37,8 @@
     "test/fixtures/real-project/CatCard.js"
   ],
   "sourcesContent": [
-    "import React from 'react'\nimport { pug, styl, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n  `\n  /* eslint-disable-line */styl`\n    .avatar\n      margin-right 1u\n      &.large\n        width 12u\n        height @width\n      &.small\n        width 4u\n        height @width\n    .text.large\n      font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
+    "import React from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n    style(lang='styl')\n      .avatar\n        margin-right 1u\n        &.large\n          width 12u\n          height @width\n        &.small\n          width 4u\n          height @width\n      .text.large\n        font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
   ],
-  "mappings": "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",
+  "mappings": "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",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel-basic/CatCard.tsx.output.jsx b/test/fixtures/real-project/snapshots/babel-basic/CatCard.tsx.output.jsx
new file mode 100644
index 0000000..6c57779
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel-basic/CatCard.tsx.output.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { observer, useSub, $, styl } from 'startupjs';
+import { Div, Span, Avatar, Link } from 'startupjs-ui';
+export default observer(({
+  $cat,
+  showPhone,
+  large,
+  small
+}) => {
+  styl`
+  .avatar
+    margin-right 1u
+    &.large
+      width 12u
+      height @width
+    &.small
+      width 4u
+      height @width
+  .text.large
+    font(h6)
+`;
+  const {
+    name,
+    number,
+    phone,
+    catgram,
+    photoFileId,
+    phonegram
+  } = $cat.get();
+  return <Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={['avatar', {
+      large,
+      small
+    }]} fileId={photoFileId} name={name} /> : <Avatar styleName={['avatar', {
+      large,
+      small
+    }]}>{name}</Avatar>}<Div row><Span styleName={['text', {
+        large
+      }]} bold>{(number || 'X') + '. '}</Span><Div><Span styleName={['text', {
+          large
+        }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={['text', {
+            large
+          }]}><Span bold>Phone:{' '}</Span>{phone}</Span> : null}{catgram ? <Span styleName={['text', {
+            large
+          }]}><Span bold>Catgram:{' '}</Span><Link styleName={['text', {
+              large
+            }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={['text', {
+            large
+          }]}><Span bold>Phonegram:{' '}</Span><Link styleName={['text', {
+              large
+            }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>;
+});
+const Photo = observer(({
+  fileId,
+  name
+}) => {
+  const $file = useSub($.files[fileId]);
+  let url;
+  try {
+    url = $file.getUrl();
+  } catch (err) {}
+  return <Avatar part='root' src={url}>{name}</Avatar>;
+});
+function getCatgramLink(username) {
+  if (!username) return;
+  if (/:\/\//.test(username)) return username;
+  return 'https://catgr.am/' + username;
+}
+function getPhonegramLink(username) {
+  if (!username) return;
+  if (/:\/\//.test(username)) return username;
+  return 'https://www.phonegram.com/' + username;
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel-basic/CatCard.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel-basic/CatCard.tsx.output.sourcemap.json
new file mode 100644
index 0000000..4cd4fda
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel-basic/CatCard.tsx.output.sourcemap.json
@@ -0,0 +1,44 @@
+{
+  "version": 3,
+  "names": [
+    "React",
+    "observer",
+    "useSub",
+    "$",
+    "styl",
+    "Div",
+    "Span",
+    "Avatar",
+    "Link",
+    "$cat",
+    "showPhone",
+    "large",
+    "small",
+    "name",
+    "number",
+    "phone",
+    "catgram",
+    "photoFileId",
+    "phonegram",
+    "get",
+    "getCatgramLink",
+    "getPhonegramLink",
+    "Photo",
+    "fileId",
+    "$file",
+    "files",
+    "url",
+    "getUrl",
+    "err",
+    "username",
+    "test"
+  ],
+  "sources": [
+    "test/fixtures/real-project/CatCard.tsx"
+  ],
+  "sourcesContent": [
+    "import React from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n    style(lang='styl')\n      .avatar\n        margin-right 1u\n        &.large\n          width 12u\n          height @width\n        &.small\n          width 4u\n          height @width\n      .text.large\n        font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
+  ],
+  "mappings": "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",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.js.output.jsx b/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.js.output.jsx
index b9488bc..ef46ae5 100644
--- a/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.js.output.jsx
@@ -33,6 +33,10 @@ const Profile = observer(({
   $cat,
   $event
 }) => {
+  styl`
+  .hackSidePadding
+    width 1u
+`;
   const $showEdit = $();
   const {
     tablet
@@ -41,11 +45,7 @@ const Profile = observer(({
   const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? {
     exclude: ['number']
   } : {});
-  return <><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={["hackSidePadding"]} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? 'Edit cat profile' : 'Edit'}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>;
-  styl`
-    .hackSidePadding
-      width 1u
-  `;
+  return <><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={['hackSidePadding']} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? 'Edit cat profile' : 'Edit'}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>;
 });
 function hasContact($cat) {
   return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim();
diff --git a/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.js.output.sourcemap.json
index 5449bb7..a9eb637 100644
--- a/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.js.output.sourcemap.json
@@ -57,8 +57,8 @@
     "test/fixtures/real-project/cat-profile-link.js"
   ],
   "sourcesContent": [
-    "import React from 'react'\nimport { pug, observer, $, useSub, styl } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n  `\n  styl`\n    .hackSidePadding\n      width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
+    "import React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n    style(lang='styl')\n      .hackSidePadding\n        width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
   ],
-  "mappings": "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",
+  "mappings": "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",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.tsx.output.jsx b/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.tsx.output.jsx
new file mode 100644
index 0000000..ef46ae5
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.tsx.output.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { observer, $, useSub, styl } from 'startupjs';
+import { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui';
+import { useGlobalSearchParams, Stack } from 'expo-router';
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
+import CatCard from '@/components/CatCard';
+import * as stages from '@/components/stages';
+import { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema';
+import { STAGES } from '@/model/events/schema';
+export default observer(() => {
+  const {
+    token
+  } = useGlobalSearchParams();
+  const [$cat] = useSub($.cats, {
+    token
+  });
+  if (!$cat) return renderExpired();
+  const eventId = $cat.eventId.get();
+  const $event = useSub($.events[eventId]);
+  function renderTitle() {
+    return <CatCard $cat={$cat} />;
+  }
+  function renderSettings() {
+    return <Profile $cat={$cat} $event={$event} />;
+  }
+  const Stage = stages[$cat.getMyStage()];
+  return <><Stack.Screen options={{
+      headerTitle: renderTitle,
+      headerRight: renderSettings
+    }} /><Stage $cat={$cat} $event={$event} /></>;
+});
+const Profile = observer(({
+  $cat,
+  $event
+}) => {
+  styl`
+  .hackSidePadding
+    width 1u
+`;
+  const $showEdit = $();
+  const {
+    tablet
+  } = useMedia();
+  const excludeNumber = $event.stage.get() !== STAGES.InProgress;
+  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? {
+    exclude: ['number']
+  } : {});
+  return <><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={['hackSidePadding']} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? 'Edit cat profile' : 'Edit'}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>;
+});
+function hasContact($cat) {
+  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim();
+}
+function renderExpired() {
+  return <Content padding><Alert variant='error'><Span>Cat profile link is incorrect or already expired.
+
+Your cat meetup profile link is only valid for a limited period of time.
+
+If you believe this is an error, please contact the cat meetup organizer.</Span></Alert></Content>;
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.tsx.output.sourcemap.json
new file mode 100644
index 0000000..8037b89
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel-basic/cat-profile-link.tsx.output.sourcemap.json
@@ -0,0 +1,64 @@
+{
+  "version": 3,
+  "names": [
+    "React",
+    "observer",
+    "$",
+    "useSub",
+    "styl",
+    "Alert",
+    "Span",
+    "Modal",
+    "Content",
+    "Button",
+    "Form",
+    "Div",
+    "Tag",
+    "useMedia",
+    "useFormFields",
+    "useGlobalSearchParams",
+    "Stack",
+    "faPen",
+    "CatCard",
+    "stages",
+    "CAT_PROFILE_EDIT_FORM",
+    "STAGES",
+    "token",
+    "$cat",
+    "cats",
+    "renderExpired",
+    "eventId",
+    "get",
+    "$event",
+    "events",
+    "renderTitle",
+    "renderSettings",
+    "Stage",
+    "getMyStage",
+    "headerTitle",
+    "headerRight",
+    "Profile",
+    "$showEdit",
+    "tablet",
+    "excludeNumber",
+    "stage",
+    "InProgress",
+    "profileEditFields",
+    "exclude",
+    "hasContact",
+    "photoFileId",
+    "set",
+    "phone",
+    "trim",
+    "catgram",
+    "phonegram"
+  ],
+  "sources": [
+    "test/fixtures/real-project/cat-profile-link.tsx"
+  ],
+  "sourcesContent": [
+    "import React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n    style(lang='styl')\n      .hackSidePadding\n        width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
+  ],
+  "mappings": "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",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel-basic/event-tabs-breed.js.output.jsx b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-breed.js.output.jsx
index 2726e32..91b09cd 100644
--- a/test/fixtures/real-project/snapshots/babel-basic/event-tabs-breed.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-breed.js.output.jsx
@@ -122,7 +122,7 @@ const SelectLikes = observer(({
     for (const $cat of $cats) {
       __pugEachResult.push((() => {
         const catId = $cat.getId();
-        return <Item styleName={["item", {
+        return <Item styleName={['item', {
           selected: $likes[catId].get()
         }]} key={catId} onPress={() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)}><CatCard $cat={$cat} small /></Item>;
       })());
diff --git a/test/fixtures/real-project/snapshots/babel-basic/event-tabs-breed.tsx.output.jsx b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-breed.tsx.output.jsx
new file mode 100644
index 0000000..91b09cd
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-breed.tsx.output.jsx
@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+import { observer, useSub, $, styl } from 'startupjs';
+import { Link, Item, ScrollView, Form, useFormProps, Alert, Content, Tag, Br, Button, Modal, Div, confirm, useFormFields$, useValidate } from 'startupjs-ui';
+import { useGlobalSearchParams } from 'expo-router';
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
+import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart';
+import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
+import CatCard from '@/components/CatCard';
+import { CAT_FORM } from '@/model/cats/schema';
+export default observer(({
+  breed
+}) => {
+  const {
+    eventId
+  } = useGlobalSearchParams();
+  const [$selected, set$selected] = useState();
+  const $new = $();
+  const $showModal = $();
+  const $mode = $();
+  const $fields = useFormFields$(CAT_FORM);
+  const validate = useValidate();
+  function showCreate() {
+    $new.set({
+      breed
+    });
+    $fields.breed.disabled.set(true);
+    set$selected(() => $new);
+    $mode.set('new');
+    $showModal.set(true);
+  }
+  function showEdit($cat) {
+    $fields.breed.disabled.del();
+    set$selected(() => $cat);
+    $mode.set('edit');
+    $showModal.set(true);
+  }
+  function cancel() {
+    if (!$showModal.get()) return;
+    $showModal.del();
+    $mode.del();
+  }
+  async function create() {
+    if (!validate()) return;
+    await $.cats.addNew({
+      ...$new.getDeepCopy(),
+      eventId
+    });
+    cancel();
+  }
+  async function deleteCat() {
+    if (!(await confirm(`Are you sure you want to delete ${$selected.name.get()}?`))) return;
+    await $selected.del();
+    cancel();
+  }
+  return <><ScrollView full><Content full pure><CatsList eventId={eventId} onEdit={showEdit} breed={breed} /></Content></ScrollView><Content padding={1}><Button onPress={showCreate}>Add new {breed}</Button></Content><Modal title={$mode.get() === 'new' ? 'Create cat' : 'Edit cat'} $visible={$showModal} onDismiss={cancel}>{(() => {
+        const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic');
+        return <><Form key={$selected?.getId() || 'NEW'} $fields={$fields} $value={$selected} oppositeBreed={oppositeBreed} eventId={eventId} customInputs={{
+            likes: SelectLikesInput
+          }} validate={validate} /><Br />{$mode.get() === 'new' ? <Div align='right' row><Button onPress={cancel}>Cancel</Button><Button disabled={validate.hasErrors} pushed variant='flat' color='primary' onPress={create}>Create</Button></Div> : $mode.get() === 'edit' ? <Div align='right' row><Button color='error' onPress={deleteCat}>Delete</Button></Div> : null}</>;
+      })()}</Modal></>;
+});
+const CatsList = observer(({
+  onEdit,
+  breed,
+  eventId
+}) => {
+  if (!eventId) return <Alert variant='error'>No event specified</Alert>;
+  const $cats = useSub($.cats, {
+    eventId,
+    breed,
+    $sort: {
+      breed: 1,
+      number: 1
+    }
+  });
+  return (() => {
+    const __pugEachResult = [];
+    for (const $cat of $cats) {
+      __pugEachResult.push(<Item key={$cat.getId()}><CatCard $cat={$cat} /><Item.Right><Div vAlign='center' row gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}<Button variant='text' icon={faPen} onPress={() => onEdit($cat)} tooltip='Edit' /><Link href={'/events/' + eventId + '/matches/' + $cat.getId()}><Button variant='text' icon={faHeart} tooltip='Matches' /></Link><Link href={'/cats/' + $cat.token.get()}><Button variant='text' icon={faLink} tooltip='Cat profile link'>Link</Button></Link></Div></Item.Right></Item>);
+    }
+    return __pugEachResult;
+  })();
+});
+function hasContact($cat) {
+  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim();
+}
+const SelectLikesInput = observer(({
+  $value,
+  ...props
+}) => {
+  const {
+    oppositeBreed,
+    eventId
+  } = {
+    ...useFormProps(),
+    ...props
+  };
+  return oppositeBreed ? <SelectLikes $likes={$value} oppositeBreed={oppositeBreed} eventId={eventId} /> : <Alert variant='warning'>Select breed to choose likes</Alert>;
+});
+const SelectLikes = observer(({
+  $likes,
+  oppositeBreed,
+  eventId
+}) => {
+  styl`
+  .item
+    border-radius 1u
+    &.selected
+      // FIXME: We can't use color var(--color-text-success-strong) here
+      background-color var(--color-text-success-strong)
+`;
+  const $cats = useSub($.cats, {
+    eventId,
+    breed: oppositeBreed,
+    $sort: {
+      breed: 1,
+      number: 1
+    }
+  });
+  return (() => {
+    const __pugEachResult = [];
+    for (const $cat of $cats) {
+      __pugEachResult.push((() => {
+        const catId = $cat.getId();
+        return <Item styleName={['item', {
+          selected: $likes[catId].get()
+        }]} key={catId} onPress={() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)}><CatCard $cat={$cat} small /></Item>;
+      })());
+    }
+    return __pugEachResult.length ? __pugEachResult : <Alert variant='info'>No cats with selected breed yet</Alert>;
+  })();
+});
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel-basic/event-tabs-breed.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-breed.tsx.output.sourcemap.json
new file mode 100644
index 0000000..100f6b7
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-breed.tsx.output.sourcemap.json
@@ -0,0 +1,89 @@
+{
+  "version": 3,
+  "names": [
+    "React",
+    "useState",
+    "observer",
+    "useSub",
+    "$",
+    "styl",
+    "Link",
+    "Item",
+    "ScrollView",
+    "Form",
+    "useFormProps",
+    "Alert",
+    "Content",
+    "Tag",
+    "Br",
+    "Button",
+    "Modal",
+    "Div",
+    "confirm",
+    "useFormFields$",
+    "useValidate",
+    "useGlobalSearchParams",
+    "faPen",
+    "faHeart",
+    "faLink",
+    "CatCard",
+    "CAT_FORM",
+    "breed",
+    "eventId",
+    "$selected",
+    "set$selected",
+    "$new",
+    "$showModal",
+    "$mode",
+    "$fields",
+    "validate",
+    "showCreate",
+    "set",
+    "disabled",
+    "showEdit",
+    "$cat",
+    "del",
+    "cancel",
+    "get",
+    "create",
+    "cats",
+    "addNew",
+    "getDeepCopy",
+    "deleteCat",
+    "name",
+    "oppositeBreed",
+    "getId",
+    "likes",
+    "SelectLikesInput",
+    "hasErrors",
+    "CatsList",
+    "onEdit",
+    "$cats",
+    "$sort",
+    "number",
+    "__pugEachResult",
+    "push",
+    "hasContact",
+    "photoFileId",
+    "token",
+    "phone",
+    "trim",
+    "catgram",
+    "phonegram",
+    "$value",
+    "props",
+    "SelectLikes",
+    "$likes",
+    "catId",
+    "selected",
+    "length"
+  ],
+  "sources": [
+    "test/fixtures/real-project/event-tabs-breed.tsx"
+  ],
+  "sourcesContent": [
+    "import React, { useState } from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport {\n  Link, Item, ScrollView, Form, useFormProps, Alert,\n  Content, Tag, Br, Button, Modal, Div, confirm,\n  useFormFields$, useValidate\n} from 'startupjs-ui'\nimport { useGlobalSearchParams } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faLink } from '@fortawesome/free-solid-svg-icons/faLink'\nimport CatCard from '@/components/CatCard'\nimport { CAT_FORM } from '@/model/cats/schema'\n\nexport default observer(({ breed }) => {\n  const { eventId } = useGlobalSearchParams()\n  const [$selected, set$selected] = useState()\n  const $new = $()\n  const $showModal = $()\n  const $mode = $()\n  const $fields = useFormFields$(CAT_FORM)\n  const validate = useValidate()\n\n  function showCreate () {\n    $new.set({ breed })\n    $fields.breed.disabled.set(true)\n    set$selected(() => $new)\n    $mode.set('new')\n    $showModal.set(true)\n  }\n\n  function showEdit ($cat) {\n    $fields.breed.disabled.del()\n    set$selected(() => $cat)\n    $mode.set('edit')\n    $showModal.set(true)\n  }\n\n  function cancel () {\n    if (!$showModal.get()) return\n    $showModal.del()\n    $mode.del()\n  }\n\n  async function create () {\n    if (!validate()) return\n    await $.cats.addNew({\n      ...$new.getDeepCopy(),\n      eventId\n    })\n    cancel()\n  }\n\n  async function deleteCat () {\n    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return\n    await $selected.del()\n    cancel()\n  }\n\n  return pug`\n    ScrollView(full)\n      Content(full pure)\n        CatsList(eventId=eventId onEdit=showEdit breed=breed)\n    Content(padding=1)\n      Button(onPress=showCreate) Add new #{breed}\n    Modal(\n      title=$mode.get() === 'new' ? 'Create cat' : 'Edit cat'\n      $visible=$showModal\n      onDismiss=cancel\n    )\n      - const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic')\n      Form(\n        key=$selected?.getId() || 'NEW'\n        $fields=$fields\n        $value=$selected\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n        customInputs={\n          likes: SelectLikesInput\n        }\n        validate=validate\n      )\n      Br\n      if $mode.get() === 'new'\n        Div(align='right' row)\n          Button(onPress=cancel) Cancel\n          Button(disabled=validate.hasErrors pushed variant='flat' color='primary' onPress=create) Create\n      else if $mode.get() === 'edit'\n        Div(align='right' row)\n          Button(color='error' onPress=deleteCat) Delete\n  `\n})\n\nconst CatsList = observer(({ onEdit, breed, eventId }) => {\n  if (!eventId) return pug`Alert(variant='error') No event specified`\n  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      Item(key=$cat.getId())\n        CatCard($cat=$cat)\n        Item.Right\n          Div(vAlign='center' row gap=1)\n            if !hasContact($cat)\n              Tag(color='error') No contact\n            if !$cat.photoFileId.get()\n              Tag(color='error') No photo\n            Button(variant='text' icon=faPen onPress=() => onEdit($cat) tooltip='Edit')\n            Link(href='/events/' + eventId + '/matches/' + $cat.getId())\n              Button(variant='text' icon=faHeart tooltip='Matches')\n            Link(href='/cats/' + $cat.token.get())\n              Button(variant='text' icon=faLink tooltip='Cat profile link') Link\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nconst SelectLikesInput = observer(({ $value, ...props }) => {\n  const { oppositeBreed, eventId } = { ...useFormProps(), ...props }\n  return pug`\n    if oppositeBreed\n      SelectLikes(\n        $likes=$value\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n      )\n    else\n      Alert(variant='warning') Select breed to choose likes\n  `\n})\n\nconst SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {\n  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      - const catId = $cat.getId()\n      Item.item(\n        key=catId\n        styleName={ selected: $likes[catId].get() }\n        onPress=() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)\n      )\n        CatCard($cat=$cat small)\n    else\n      Alert(variant='info') No cats with selected breed yet\n    style(lang='styl')\n      .item\n        border-radius 1u\n        &.selected\n          // FIXME: We can't use color var(--color-text-success-strong) here\n          background-color var(--color-text-success-strong)\n  `\n})\n"
+  ],
+  "mappings": "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",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.js.output.jsx b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.js.output.jsx
index f385144..7269869 100644
--- a/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.js.output.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer, styl, $, useSub } from 'startupjs';
+import { observer, $, useSub, styl } from 'startupjs';
 import { useColors, Icon, Form, Modal, Button } from 'startupjs-ui';
 import { Tabs, useLocalSearchParams, Stack } from 'expo-router';
 import { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus';
@@ -9,6 +9,15 @@ import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
 import { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox';
 import { EVENT_FORM } from '@/model/events/schema';
 export default observer(function TabLayout() {
+  styl`
+  +tablet()
+    .screen
+      &:part(tabBar)
+        order -1
+        background-color transparent
+        border-bottom-width 1px
+        border-bottom-color rgba(0, 0, 0, 0.1)
+`;
   const getColor = useColors();
   const {
     eventId
@@ -41,15 +50,6 @@ export default observer(function TabLayout() {
         title: 'Dev Only',
         tabBarIcon: renderTestIcon
       }} /></Tabs></>;
-  styl`
-    +tablet()
-      .screen
-        &:part(tabBar)
-          order -1
-          background-color transparent
-          border-bottom-width 1px
-          border-bottom-color rgba(0, 0, 0, 0.1)
-  `;
 });
 function renderEditEvent({
   $event
diff --git a/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.js.output.sourcemap.json
index 170757f..4e91faa 100644
--- a/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.js.output.sourcemap.json
@@ -3,9 +3,9 @@
   "names": [
     "React",
     "observer",
-    "styl",
     "$",
     "useSub",
+    "styl",
     "useColors",
     "Icon",
     "Form",
@@ -55,8 +55,8 @@
     "test/fixtures/real-project/event-tabs-layout.js"
   ],
   "sourcesContent": [
-    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, styl, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n  `\n  styl`\n    +tablet()\n      .screen\n        &:part(tabBar)\n          order -1\n          background-color transparent\n          border-bottom-width 1px\n          border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
+    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n    style(lang='styl')\n      +tablet()\n        .screen\n          &:part(tabBar)\n            order -1\n            background-color transparent\n            border-bottom-width 1px\n            border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
   ],
-  "mappings": "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",
+  "mappings": "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",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.tsx.output.jsx b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.tsx.output.jsx
new file mode 100644
index 0000000..7269869
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.tsx.output.jsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { observer, $, useSub, styl } from 'startupjs';
+import { useColors, Icon, Form, Modal, Button } from 'startupjs-ui';
+import { Tabs, useLocalSearchParams, Stack } from 'expo-router';
+import { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus';
+import { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars';
+import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart';
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
+import { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox';
+import { EVENT_FORM } from '@/model/events/schema';
+export default observer(function TabLayout() {
+  styl`
+  +tablet()
+    .screen
+      &:part(tabBar)
+        order -1
+        background-color transparent
+        border-bottom-width 1px
+        border-bottom-color rgba(0, 0, 0, 0.1)
+`;
+  const getColor = useColors();
+  const {
+    eventId
+  } = useLocalSearchParams();
+  const $event = useSub($.events[eventId]);
+  if (!$event.get()) throw Error('No such event');
+  return <><Stack.Screen options={{
+      title: $event.name.get(),
+      headerRight: () => renderEditEvent({
+        $event
+      })
+    }} /><Tabs title={$event.name.get()} screenOptions={{
+      ...styl('screen'),
+      tabBarActiveTintColor: getColor('primary'),
+      tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',
+      headerShown: false,
+      headerTitle: $event.name.get()
+    }}><Tabs.Screen name='index' options={{
+        title: 'Dashboard',
+        tabBarIcon: renderHomeIcon
+      }} /><Tabs.Screen name='-breed' options={{
+        href: null
+      }} /><Tabs.Screen name='domestic' options={{
+        title: 'Domestic Cats',
+        tabBarIcon: renderDomesticIcon
+      }} /><Tabs.Screen name='wild' options={{
+        title: 'Wild Cats',
+        tabBarIcon: renderWildIcon
+      }} /><Tabs.Screen name='test' options={{
+        title: 'Dev Only',
+        tabBarIcon: renderTestIcon
+      }} /></Tabs></>;
+});
+function renderEditEvent({
+  $event
+}) {
+  return <EditEvent $event={$event} />;
+}
+const EditEvent = observer(({
+  $event
+}) => {
+  const $showModal = $();
+  return <><Button onPress={() => $showModal.set(true)} variant='text' icon={faPen}>Edit this cat meetup</Button><Modal title='Edit cat meetup' $visible={$showModal}><Form $value={$event} fields={EVENT_FORM} /></Modal></>;
+});
+function renderWildIcon({
+  color,
+  size
+}) {
+  return <Icon icon={faWildBadge} style={{
+    color,
+    width: size,
+    height: size
+  }} />;
+}
+function renderDomesticIcon({
+  color,
+  size
+}) {
+  return <Icon icon={faDomesticBadge} style={{
+    color,
+    width: size,
+    height: size
+  }} />;
+}
+function renderHomeIcon({
+  color,
+  size
+}) {
+  return <Icon icon={faHeart} style={{
+    color,
+    width: size,
+    height: size
+  }} />;
+}
+function renderTestIcon({
+  color,
+  size
+}) {
+  return <Icon icon={faToolbox} style={{
+    color,
+    width: size,
+    height: size
+  }} />;
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.tsx.output.sourcemap.json
new file mode 100644
index 0000000..7a20900
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel-basic/event-tabs-layout.tsx.output.sourcemap.json
@@ -0,0 +1,62 @@
+{
+  "version": 3,
+  "names": [
+    "React",
+    "observer",
+    "$",
+    "useSub",
+    "styl",
+    "useColors",
+    "Icon",
+    "Form",
+    "Modal",
+    "Button",
+    "Tabs",
+    "useLocalSearchParams",
+    "Stack",
+    "faVenus",
+    "faWildBadge",
+    "faMars",
+    "faDomesticBadge",
+    "faHeart",
+    "faPen",
+    "faToolbox",
+    "EVENT_FORM",
+    "TabLayout",
+    "getColor",
+    "eventId",
+    "$event",
+    "events",
+    "get",
+    "Error",
+    "title",
+    "name",
+    "headerRight",
+    "renderEditEvent",
+    "tabBarActiveTintColor",
+    "tabBarActiveBackgroundColor",
+    "headerShown",
+    "headerTitle",
+    "tabBarIcon",
+    "renderHomeIcon",
+    "href",
+    "renderDomesticIcon",
+    "renderWildIcon",
+    "renderTestIcon",
+    "EditEvent",
+    "$showModal",
+    "set",
+    "color",
+    "size",
+    "width",
+    "height"
+  ],
+  "sources": [
+    "test/fixtures/real-project/event-tabs-layout.tsx"
+  ],
+  "sourcesContent": [
+    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n    style(lang='styl')\n      +tablet()\n        .screen\n          &:part(tabBar)\n            order -1\n            background-color transparent\n            border-bottom-width 1px\n            border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
+  ],
+  "mappings": "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",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel/CatCard.js.output.jsx b/test/fixtures/real-project/snapshots/babel/CatCard.js.output.jsx
index e209606..23924ea 100644
--- a/test/fixtures/real-project/snapshots/babel/CatCard.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/babel/CatCard.js.output.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { styl, observer, useSub, $ } from 'startupjs';
+import { observer, useSub, $, styl } from 'startupjs';
 import { Div, Span, Avatar, Link } from 'startupjs-ui';
 export default observer(({
   $cat,
@@ -7,6 +7,19 @@ export default observer(({
   large,
   small
 }) => {
+  styl`
+    .avatar
+      margin-right 1u
+      &.large
+        width 12u
+        height @width
+      &.small
+        width 4u
+        height @width
+    .text.large
+      font(h6)
+
+  `;
   const {
     name,
     number,
@@ -15,39 +28,27 @@ export default observer(({
     photoFileId,
     phonegram
   } = $cat.get();
-  return <Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={["avatar", {
+  return <Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={['avatar', {
       large,
       small
-    }]} fileId={photoFileId} name={name} /> : <Avatar styleName={["avatar", {
+    }]} fileId={photoFileId} name={name} /> : <Avatar styleName={['avatar', {
       large,
       small
-    }]}>{name}</Avatar>}<Div row><Span styleName={["text", {
+    }]}>{name}</Avatar>}<Div row><Span styleName={['text', {
         large
-      }]} bold>{(number || 'X') + '. '}</Span><Div><Span styleName={["text", {
+      }]} bold>{(number || 'X') + '. '}</Span><Div><Span styleName={['text', {
           large
-        }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={["text", {
+        }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={['text', {
             large
-          }]}><Span bold>Phone:{' '}</Span>{phone}</Span> : null}{catgram ? <Span styleName={["text", {
+          }]}><Span bold>Phone:{' '}</Span>{phone}</Span> : null}{catgram ? <Span styleName={['text', {
             large
-          }]}><Span bold>Catgram:{' '}</Span><Link styleName={["text", {
+          }]}><Span bold>Catgram:{' '}</Span><Link styleName={['text', {
               large
-            }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={["text", {
+            }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={['text', {
             large
-          }]}><Span bold>Phonegram:{' '}</Span><Link styleName={["text", {
+          }]}><Span bold>Phonegram:{' '}</Span><Link styleName={['text', {
               large
             }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>;
-  styl`
-    .avatar
-      margin-right 1u
-      &.large
-        width 12u
-        height @width
-      &.small
-        width 4u
-        height @width
-    .text.large
-      font(h6)
-  `;
 });
 const Photo = observer(({
   fileId,
diff --git a/test/fixtures/real-project/snapshots/babel/CatCard.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel/CatCard.js.output.sourcemap.json
index 07c5dd0..caf64a9 100644
--- a/test/fixtures/real-project/snapshots/babel/CatCard.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/babel/CatCard.js.output.sourcemap.json
@@ -2,14 +2,11 @@
   "version": 3,
   "names": [
     "React",
-    "styl",
-    "observer",
-    "useSub",
-    "$",
     "Div",
     "Span",
     "Avatar",
     "Link",
+    "observer",
     "$cat",
     "showPhone",
     "large",
@@ -26,6 +23,8 @@
     "Photo",
     "fileId",
     "$file",
+    "useSub",
+    "$",
     "files",
     "url",
     "getUrl",
@@ -37,8 +36,8 @@
     "test/fixtures/real-project/CatCard.js"
   ],
   "sourcesContent": [
-    "import React from 'react'\nimport { pug, styl, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n  `\n  /* eslint-disable-line */styl`\n    .avatar\n      margin-right 1u\n      &.large\n        width 12u\n        height @width\n      &.small\n        width 4u\n        height @width\n    .text.large\n      font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
+    "import React from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n    style(lang='styl')\n      .avatar\n        margin-right 1u\n        &.large\n          width 12u\n          height @width\n        &.small\n          width 4u\n          height @width\n      .text.large\n        font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
   ],
-  "mappings": "AAAA,OAAAA,KAAA;AACA,SAAAC,IAAA,EAAAC,QAAA,EAAAC,MAAA,EAAAC,CAAA;AACA,SAAAC,GAAA,EAAAC,IAAA,EAAAC,MAAA,EAAAC,IAAA;AAEA,eAAAN,QAAA;EAAAO,IAAA;EAAAC,SAAA;EAAAC,KAAA;EAAAC;AAAA;EACA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAT,IAAA,CAAAU,GAAA;EACA,QACI,qCACKF,WAAA,IACD,MAAa,oBAAR,EAAkB;MAAAN,KAAA;MAAAC;IAAA,IAAiB,QAAOK,WAAA,EAAY,MAAKJ,IAAA,QAEhE,OAAc,oBAAR,EAAkB;MAAAF,KAAA;MAAAC;IAAA,KAAmBC,IAAA,YAC7C,SACE,KAAe,kBAAX,EAAqB;QAAAF;MAAA,IAAf,MAA2B,CAAAG,MAAA,wBACrC,KACE,KAAU,kBAAN,EAAgB;UAAAH;QAAA,KAAYE,IAAA,SAC7BH,SAAA,MACEK,KAAA,IACD,KAAU,kBAAN,EAAgB;YAAAJ;UAAA,KAClB,UAAW,OAAQ,YACjBI,KAAA,iBACHC,OAAA,IACD,KAAU,kBAAN,EAAgB;YAAAL;UAAA,KAClB,UAAW,SAAU,YACrB,KAAU,kBAAN,EAAgB;cAAAA;YAAA,IAAU,IAAGS,cAAA,CAAAJ,OAAA,IAA0BA,OAAA,wBAC5DE,SAAA,IACD,KAAU,kBAAN,EAAgB;YAAAP;UAAA,KAClB,UAAW,WAAY,YACvB,KAAU,kBAAN,EAAgB;cAAAA;YAAA,IAAU,IAAGU,gBAAA,CAAAH,SAAA,IAA8BA,SAAA;EAE/EjB,IAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAAqB,KAAA,GAAApB,QAAA;EAAAqB,MAAA;EAAAV;AAAA;EACA,MAAAW,KAAA,GAAArB,MAAA,CAAAC,CAAA,CAAAqB,KAAA,CAAAF,MAAA;EACA,IAAAG,GAAA;EACA;IAAAA,GAAA,GAAAF,KAAA,CAAAG,MAAA;EAAA,SAAAC,GAAA;EACA,QACI,wBAAuBF,GAAA,GAAMb,IAAA;AAEjC;AAEA,SAAAO,eAAAS,QAAA;EACA,KAAAA,QAAA;EACA,YAAAC,IAAA,CAAAD,QAAA,UAAAA,QAAA;EACA,6BAAAA,QAAA;AACA;AAEA,SAAAR,iBAAAQ,QAAA;EACA,KAAAA,QAAA;EACA,YAAAC,IAAA,CAAAD,QAAA,UAAAA,QAAA;EACA,sCAAAA,QAAA;AACA",
+  "mappings": "AAAA,OAAAA,KAAA;qDACoD;AACpD,SAAAC,GAAA,EAAAC,IAAA,EAAAC,MAAA,EAAAC,IAAA;AAEA,eAAAC,QAAA;EAAAC,IAAA;EAAAC,SAAA;EAAAC,KAAA;EAAAC;AAAA;;;;;;;;;;;;;;EACA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAT,IAAA,CAAAU,GAAA;EACA,QACI,qCACKF,WAAA,IACD,MAAa,oBAAR,EAAkB;MAAAN,KAAA;MAAAC;IAAA,IAAiB,QAAOK,WAAA,EAAY,MAAKJ,IAAA,QAEhE,OAAc,oBAAR,EAAkB;MAAAF,KAAA;MAAAC;IAAA,KAAmBC,IAAA,YAC7C,SACE,KAAe,kBAAX,EAAqB;QAAAF;MAAA,IAAf,MAA2B,CAAAG,MAAA,wBACrC,KACE,KAAU,kBAAN,EAAgB;UAAAH;QAAA,KAAYE,IAAA,SAC7BH,SAAA,MACEK,KAAA,IACD,KAAU,kBAAN,EAAgB;YAAAJ;UAAA,KAClB,UAAW,OAAQ,YACjBI,KAAA,iBACHC,OAAA,IACD,KAAU,kBAAN,EAAgB;YAAAL;UAAA,KAClB,UAAW,SAAU,YACrB,KAAU,kBAAN,EAAgB;cAAAA;YAAA,IAAU,IAAGS,cAAA,CAAAJ,OAAA,IAA0BA,OAAA,wBAC5DE,SAAA,IACD,KAAU,kBAAN,EAAgB;YAAAP;UAAA,KAClB,UAAW,WAAY,YACvB,KAAU,kBAAN,EAAgB;cAAAA;YAAA,IAAU,IAAGU,gBAAA,CAAAH,SAAA,IAA8BA,SAAA;AAa/E;AAEA,MAAAI,KAAA,GAAAd,QAAA;EAAAe,MAAA;EAAAV;AAAA;EACA,MAAAW,KAAA,GAAAC,MAAA,CAAAC,CAAA,CAAAC,KAAA,CAAAJ,MAAA;EACA,IAAAK,GAAA;EACA;IAAAA,GAAA,GAAAJ,KAAA,CAAAK,MAAA;EAAA,SAAAC,GAAA;EACA,QACI,wBAAuBF,GAAA,GAAMf,IAAA;AAEjC;AAEA,SAAAO,eAAAW,QAAA;EACA,KAAAA,QAAA;EACA,YAAAC,IAAA,CAAAD,QAAA,UAAAA,QAAA;EACA,6BAAAA,QAAA;AACA;AAEA,SAAAV,iBAAAU,QAAA;EACA,KAAAA,QAAA;EACA,YAAAC,IAAA,CAAAD,QAAA,UAAAA,QAAA;EACA,sCAAAA,QAAA;AACA",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel/CatCard.tsx.output.jsx b/test/fixtures/real-project/snapshots/babel/CatCard.tsx.output.jsx
new file mode 100644
index 0000000..23924ea
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel/CatCard.tsx.output.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { observer, useSub, $, styl } from 'startupjs';
+import { Div, Span, Avatar, Link } from 'startupjs-ui';
+export default observer(({
+  $cat,
+  showPhone,
+  large,
+  small
+}) => {
+  styl`
+    .avatar
+      margin-right 1u
+      &.large
+        width 12u
+        height @width
+      &.small
+        width 4u
+        height @width
+    .text.large
+      font(h6)
+
+  `;
+  const {
+    name,
+    number,
+    phone,
+    catgram,
+    photoFileId,
+    phonegram
+  } = $cat.get();
+  return <Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={['avatar', {
+      large,
+      small
+    }]} fileId={photoFileId} name={name} /> : <Avatar styleName={['avatar', {
+      large,
+      small
+    }]}>{name}</Avatar>}<Div row><Span styleName={['text', {
+        large
+      }]} bold>{(number || 'X') + '. '}</Span><Div><Span styleName={['text', {
+          large
+        }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={['text', {
+            large
+          }]}><Span bold>Phone:{' '}</Span>{phone}</Span> : null}{catgram ? <Span styleName={['text', {
+            large
+          }]}><Span bold>Catgram:{' '}</Span><Link styleName={['text', {
+              large
+            }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={['text', {
+            large
+          }]}><Span bold>Phonegram:{' '}</Span><Link styleName={['text', {
+              large
+            }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>;
+});
+const Photo = observer(({
+  fileId,
+  name
+}) => {
+  const $file = useSub($.files[fileId]);
+  let url;
+  try {
+    url = $file.getUrl();
+  } catch (err) {}
+  return <Avatar part='root' src={url}>{name}</Avatar>;
+});
+function getCatgramLink(username) {
+  if (!username) return;
+  if (/:\/\//.test(username)) return username;
+  return 'https://catgr.am/' + username;
+}
+function getPhonegramLink(username) {
+  if (!username) return;
+  if (/:\/\//.test(username)) return username;
+  return 'https://www.phonegram.com/' + username;
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel/CatCard.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel/CatCard.tsx.output.sourcemap.json
new file mode 100644
index 0000000..5fca439
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel/CatCard.tsx.output.sourcemap.json
@@ -0,0 +1,43 @@
+{
+  "version": 3,
+  "names": [
+    "React",
+    "Div",
+    "Span",
+    "Avatar",
+    "Link",
+    "observer",
+    "$cat",
+    "showPhone",
+    "large",
+    "small",
+    "name",
+    "number",
+    "phone",
+    "catgram",
+    "photoFileId",
+    "phonegram",
+    "get",
+    "getCatgramLink",
+    "getPhonegramLink",
+    "Photo",
+    "fileId",
+    "$file",
+    "useSub",
+    "$",
+    "files",
+    "url",
+    "getUrl",
+    "err",
+    "username",
+    "test"
+  ],
+  "sources": [
+    "test/fixtures/real-project/CatCard.tsx"
+  ],
+  "sourcesContent": [
+    "import React from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n    style(lang='styl')\n      .avatar\n        margin-right 1u\n        &.large\n          width 12u\n          height @width\n        &.small\n          width 4u\n          height @width\n      .text.large\n        font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
+  ],
+  "mappings": "AAAA,OAAAA,KAAA;qDACoD;AACpD,SAAAC,GAAA,EAAAC,IAAA,EAAAC,MAAA,EAAAC,IAAA;AAEA,eAAAC,QAAA;EAAAC,IAAA;EAAAC,SAAA;EAAAC,KAAA;EAAAC;AAAA;;;;;;;;;;;;;;EACA;IAAAC,IAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAT,IAAA,CAAAU,GAAA;EACA,QACI,qCACKF,WAAA,IACD,MAAa,oBAAR,EAAkB;MAAAN,KAAA;MAAAC;IAAA,IAAiB,QAAOK,WAAA,EAAY,MAAKJ,IAAA,QAEhE,OAAc,oBAAR,EAAkB;MAAAF,KAAA;MAAAC;IAAA,KAAmBC,IAAA,YAC7C,SACE,KAAe,kBAAX,EAAqB;QAAAF;MAAA,IAAf,MAA2B,CAAAG,MAAA,wBACrC,KACE,KAAU,kBAAN,EAAgB;UAAAH;QAAA,KAAYE,IAAA,SAC7BH,SAAA,MACEK,KAAA,IACD,KAAU,kBAAN,EAAgB;YAAAJ;UAAA,KAClB,UAAW,OAAQ,YACjBI,KAAA,iBACHC,OAAA,IACD,KAAU,kBAAN,EAAgB;YAAAL;UAAA,KAClB,UAAW,SAAU,YACrB,KAAU,kBAAN,EAAgB;cAAAA;YAAA,IAAU,IAAGS,cAAA,CAAAJ,OAAA,IAA0BA,OAAA,wBAC5DE,SAAA,IACD,KAAU,kBAAN,EAAgB;YAAAP;UAAA,KAClB,UAAW,WAAY,YACvB,KAAU,kBAAN,EAAgB;cAAAA;YAAA,IAAU,IAAGU,gBAAA,CAAAH,SAAA,IAA8BA,SAAA;AAa/E;AAEA,MAAAI,KAAA,GAAAd,QAAA;EAAAe,MAAA;EAAAV;AAAA;EACA,MAAAW,KAAA,GAAAC,MAAA,CAAAC,CAAA,CAAAC,KAAA,CAAAJ,MAAA;EACA,IAAAK,GAAA;EACA;IAAAA,GAAA,GAAAJ,KAAA,CAAAK,MAAA;EAAA,SAAAC,GAAA;EACA,QACI,wBAAuBF,GAAA,GAAMf,IAAA;AAEjC;AAEA,SAAAO,eAAAW,QAAA;EACA,KAAAA,QAAA;EACA,YAAAC,IAAA,CAAAD,QAAA,UAAAA,QAAA;EACA,6BAAAA,QAAA;AACA;AAEA,SAAAV,iBAAAU,QAAA;EACA,KAAAA,QAAA;EACA,YAAAC,IAAA,CAAAD,QAAA,UAAAA,QAAA;EACA,sCAAAA,QAAA;AACA",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel/cat-profile-link.js.output.jsx b/test/fixtures/real-project/snapshots/babel/cat-profile-link.js.output.jsx
index b9488bc..424e8f3 100644
--- a/test/fixtures/real-project/snapshots/babel/cat-profile-link.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/babel/cat-profile-link.js.output.jsx
@@ -33,6 +33,11 @@ const Profile = observer(({
   $cat,
   $event
 }) => {
+  styl`
+    .hackSidePadding
+      width 1u
+
+  `;
   const $showEdit = $();
   const {
     tablet
@@ -41,11 +46,7 @@ const Profile = observer(({
   const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? {
     exclude: ['number']
   } : {});
-  return <><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={["hackSidePadding"]} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? 'Edit cat profile' : 'Edit'}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>;
-  styl`
-    .hackSidePadding
-      width 1u
-  `;
+  return <><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={['hackSidePadding']} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? 'Edit cat profile' : 'Edit'}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>;
 });
 function hasContact($cat) {
   return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim();
diff --git a/test/fixtures/real-project/snapshots/babel/cat-profile-link.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel/cat-profile-link.js.output.sourcemap.json
index ad29a27..819d09f 100644
--- a/test/fixtures/real-project/snapshots/babel/cat-profile-link.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/babel/cat-profile-link.js.output.sourcemap.json
@@ -2,10 +2,6 @@
   "version": 3,
   "names": [
     "React",
-    "observer",
-    "$",
-    "useSub",
-    "styl",
     "Alert",
     "Span",
     "Modal",
@@ -23,8 +19,11 @@
     "stages",
     "CAT_PROFILE_EDIT_FORM",
     "STAGES",
+    "observer",
     "token",
     "$cat",
+    "useSub",
+    "$",
     "cats",
     "renderExpired",
     "eventId",
@@ -57,8 +56,8 @@
     "test/fixtures/real-project/cat-profile-link.js"
   ],
   "sourcesContent": [
-    "import React from 'react'\nimport { pug, observer, $, useSub, styl } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n  `\n  styl`\n    .hackSidePadding\n      width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
+    "import React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n    style(lang='styl')\n      .hackSidePadding\n        width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
   ],
-  "mappings": "AAAA,OAAAA,KAAA;AACA,SAAAC,QAAA,EAAAC,CAAA,EAAAC,MAAA,EAAAC,IAAA;AACA,SAAAC,KAAA,EAAAC,IAAA,EAAAC,KAAA,EAAAC,OAAA,EAAAC,MAAA,EAAAC,IAAA,EAAAC,GAAA,EAAAC,GAAA,EAAAC,QAAA,EAAAC,aAAA;AACA,SAAAC,qBAAA,EAAAC,KAAA;AACA,SAAAC,KAAA;AACA,OAAAC,OAAA;AACA,YAAAC,MAAA;AACA,SAAAC,qBAAA;AACA,SAAAC,MAAA;AAEA,eAAApB,QAAA;EACA;IAAAqB;EAAA,IAAAP,qBAAA;EACA,OAAAQ,IAAA,IAAApB,MAAA,CAAAD,CAAA,CAAAsB,IAAA;IAAAF;EAAA;EACA,KAAAC,IAAA,SAAAE,aAAA;EAEA,MAAAC,OAAA,GAAAH,IAAA,CAAAG,OAAA,CAAAC,GAAA;EACA,MAAAC,MAAA,GAAAzB,MAAA,CAAAD,CAAA,CAAA2B,MAAA,CAAAH,OAAA;EAEA,SAAAI,YAAA;IACA,QACM,cAAaP,IAAA;EAEnB;EAEA,SAAAQ,eAAA;IACA,QACM,cAAaR,IAAA,EAAK,QAAOK,MAAA;EAE/B;EAEA,MAAAI,KAAA,GAAAb,MAAA,CAAAI,IAAA,CAAAU,UAAA;EAEA,UACI,aACE,SAAQ;MACVC,WAAA,EAAAJ,WAAA;MACAK,WAAA,EAAAJ;IACA,MAEA,YAAWR,IAAA,EAAK,QAAOK,MAAA;AAE3B;AAEA,MAAAQ,OAAA,GAAAnC,QAAA;EAAAsB,IAAA;EAAAK;AAAA;EACA,MAAAS,SAAA,GAAAnC,CAAA;EACA;IAAAoC;EAAA,IAAAzB,QAAA;EACA,MAAA0B,aAAA,GAAAX,MAAA,CAAAY,KAAA,CAAAb,GAAA,OAAAN,MAAA,CAAAoB,UAAA;EACA,MAAAC,iBAAA,GAAA5B,aAAA,CAAAM,qBAAA,EAAAmB,aAAA;IAAAI,OAAA;EAAA;EAEA,UACI,6BAA4B,IACvB,CAAAC,UAAA,CAAArB,IAAA,KACD,kBAAmB,yBAClB,CAAAA,IAAA,CAAAsB,WAAA,CAAAlB,GAAA,MACD,kBAAmB,uBAClBJ,IAAA,CAAAU,UAAA,OAAAZ,MAAA,CAAAe,OAAA,IACD,iCAAG,SAEH,OACE,eACA,MAAKnB,KAAA,EACL,SAAQ,MAAAoB,SAAA,CAAAS,GAAA,SAELR,MAAA,GACC,qBAEA,wBACV,MACE,yBACA,UAASD,SAAA,GAET,KACE,QAAOK,iBAAA,EACP,QAAOnB,IAAA;EAGfnB,IAAA;AACA;AACA;AACA;AACA;AAEA,SAAAwC,WAAArB,IAAA;EACA,QAAAA,IAAA,CAAAwB,KAAA,CAAApB,GAAA,UAAAqB,IAAA,OAAAzB,IAAA,CAAA0B,OAAA,CAAAtB,GAAA,UAAAqB,IAAA,OAAAzB,IAAA,CAAA2B,SAAA,CAAAvB,GAAA,UAAAqB,IAAA;AACA;AAEA,SAAAvB,cAAA;EACA,QACI,iBACE,uBACE,KACI;AACP;AACA;AACA;AACA,yEAAQ;AAEb",
+  "mappings": "AAAA,OAAAA,KAAA;qDACoD;AACpD,SAAAC,KAAA,EAAAC,IAAA,EAAAC,KAAA,EAAAC,OAAA,EAAAC,MAAA,EAAAC,IAAA,EAAAC,GAAA,EAAAC,GAAA,EAAAC,QAAA,EAAAC,aAAA;AACA,SAAAC,qBAAA,EAAAC,KAAA;AACA,SAAAC,KAAA;AACA,OAAAC,OAAA;AACA,YAAAC,MAAA;AACA,SAAAC,qBAAA;AACA,SAAAC,MAAA;AAEA,eAAAC,QAAA;EACA;IAAAC;EAAA,IAAAR,qBAAA;EACA,OAAAS,IAAA,IAAAC,MAAA,CAAAC,CAAA,CAAAC,IAAA;IAAAJ;EAAA;EACA,KAAAC,IAAA,SAAAI,aAAA;EAEA,MAAAC,OAAA,GAAAL,IAAA,CAAAK,OAAA,CAAAC,GAAA;EACA,MAAAC,MAAA,GAAAN,MAAA,CAAAC,CAAA,CAAAM,MAAA,CAAAH,OAAA;EAEA,SAAAI,YAAA;IACA,QACM,cAAaT,IAAA;EAEnB;EAEA,SAAAU,eAAA;IACA,QACM,cAAaV,IAAA,EAAK,QAAOO,MAAA;EAE/B;EAEA,MAAAI,KAAA,GAAAhB,MAAA,CAAAK,IAAA,CAAAY,UAAA;EAEA,UACI,aACE,SAAQ;MACVC,WAAA,EAAAJ,WAAA;MACAK,WAAA,EAAAJ;IACA,MAEA,YAAWV,IAAA,EAAK,QAAOO,MAAA;AAE3B;AAEA,MAAAQ,OAAA,GAAAjB,QAAA;EAAAE,IAAA;EAAAO;AAAA;;;;;;EACA,MAAAS,SAAA,GAAAd,CAAA;EACA;IAAAe;EAAA,IAAA5B,QAAA;EACA,MAAA6B,aAAA,GAAAX,MAAA,CAAAY,KAAA,CAAAb,GAAA,OAAAT,MAAA,CAAAuB,UAAA;EACA,MAAAC,iBAAA,GAAA/B,aAAA,CAAAM,qBAAA,EAAAsB,aAAA;IAAAI,OAAA;EAAA;EAEA,UACI,6BAA4B,IACvB,CAAAC,UAAA,CAAAvB,IAAA,KACD,kBAAmB,yBAClB,CAAAA,IAAA,CAAAwB,WAAA,CAAAlB,GAAA,MACD,kBAAmB,uBAClBN,IAAA,CAAAY,UAAA,OAAAf,MAAA,CAAAkB,OAAA,IACD,iCAAG,SAEH,OACE,eACA,MAAKtB,KAAA,EACL,SAAQ,MAAAuB,SAAA,CAAAS,GAAA,SAELR,MAAA,GACC,qBAEA,wBACV,MACE,yBACA,UAASD,SAAA,GAET,KACE,QAAOK,iBAAA,EACP,QAAOrB,IAAA;AAMf;AAEA,SAAAuB,WAAAvB,IAAA;EACA,QAAAA,IAAA,CAAA0B,KAAA,CAAApB,GAAA,UAAAqB,IAAA,OAAA3B,IAAA,CAAA4B,OAAA,CAAAtB,GAAA,UAAAqB,IAAA,OAAA3B,IAAA,CAAA6B,SAAA,CAAAvB,GAAA,UAAAqB,IAAA;AACA;AAEA,SAAAvB,cAAA;EACA,QACI,iBACE,uBACE,KACI;AACP;AACA;AACA;AACA,yEAAQ;AAEb",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel/cat-profile-link.tsx.output.jsx b/test/fixtures/real-project/snapshots/babel/cat-profile-link.tsx.output.jsx
new file mode 100644
index 0000000..424e8f3
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel/cat-profile-link.tsx.output.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { observer, $, useSub, styl } from 'startupjs';
+import { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui';
+import { useGlobalSearchParams, Stack } from 'expo-router';
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
+import CatCard from '@/components/CatCard';
+import * as stages from '@/components/stages';
+import { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema';
+import { STAGES } from '@/model/events/schema';
+export default observer(() => {
+  const {
+    token
+  } = useGlobalSearchParams();
+  const [$cat] = useSub($.cats, {
+    token
+  });
+  if (!$cat) return renderExpired();
+  const eventId = $cat.eventId.get();
+  const $event = useSub($.events[eventId]);
+  function renderTitle() {
+    return <CatCard $cat={$cat} />;
+  }
+  function renderSettings() {
+    return <Profile $cat={$cat} $event={$event} />;
+  }
+  const Stage = stages[$cat.getMyStage()];
+  return <><Stack.Screen options={{
+      headerTitle: renderTitle,
+      headerRight: renderSettings
+    }} /><Stage $cat={$cat} $event={$event} /></>;
+});
+const Profile = observer(({
+  $cat,
+  $event
+}) => {
+  styl`
+    .hackSidePadding
+      width 1u
+
+  `;
+  const $showEdit = $();
+  const {
+    tablet
+  } = useMedia();
+  const excludeNumber = $event.stage.get() !== STAGES.InProgress;
+  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? {
+    exclude: ['number']
+  } : {});
+  return <><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={['hackSidePadding']} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? 'Edit cat profile' : 'Edit'}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>;
+});
+function hasContact($cat) {
+  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim();
+}
+function renderExpired() {
+  return <Content padding><Alert variant='error'><Span>Cat profile link is incorrect or already expired.
+
+Your cat meetup profile link is only valid for a limited period of time.
+
+If you believe this is an error, please contact the cat meetup organizer.</Span></Alert></Content>;
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel/cat-profile-link.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel/cat-profile-link.tsx.output.sourcemap.json
new file mode 100644
index 0000000..d607ee3
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel/cat-profile-link.tsx.output.sourcemap.json
@@ -0,0 +1,63 @@
+{
+  "version": 3,
+  "names": [
+    "React",
+    "Alert",
+    "Span",
+    "Modal",
+    "Content",
+    "Button",
+    "Form",
+    "Div",
+    "Tag",
+    "useMedia",
+    "useFormFields",
+    "useGlobalSearchParams",
+    "Stack",
+    "faPen",
+    "CatCard",
+    "stages",
+    "CAT_PROFILE_EDIT_FORM",
+    "STAGES",
+    "observer",
+    "token",
+    "$cat",
+    "useSub",
+    "$",
+    "cats",
+    "renderExpired",
+    "eventId",
+    "get",
+    "$event",
+    "events",
+    "renderTitle",
+    "renderSettings",
+    "Stage",
+    "getMyStage",
+    "headerTitle",
+    "headerRight",
+    "Profile",
+    "$showEdit",
+    "tablet",
+    "excludeNumber",
+    "stage",
+    "InProgress",
+    "profileEditFields",
+    "exclude",
+    "hasContact",
+    "photoFileId",
+    "set",
+    "phone",
+    "trim",
+    "catgram",
+    "phonegram"
+  ],
+  "sources": [
+    "test/fixtures/real-project/cat-profile-link.tsx"
+  ],
+  "sourcesContent": [
+    "import React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n    style(lang='styl')\n      .hackSidePadding\n        width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
+  ],
+  "mappings": "AAAA,OAAAA,KAAA;qDACoD;AACpD,SAAAC,KAAA,EAAAC,IAAA,EAAAC,KAAA,EAAAC,OAAA,EAAAC,MAAA,EAAAC,IAAA,EAAAC,GAAA,EAAAC,GAAA,EAAAC,QAAA,EAAAC,aAAA;AACA,SAAAC,qBAAA,EAAAC,KAAA;AACA,SAAAC,KAAA;AACA,OAAAC,OAAA;AACA,YAAAC,MAAA;AACA,SAAAC,qBAAA;AACA,SAAAC,MAAA;AAEA,eAAAC,QAAA;EACA;IAAAC;EAAA,IAAAR,qBAAA;EACA,OAAAS,IAAA,IAAAC,MAAA,CAAAC,CAAA,CAAAC,IAAA;IAAAJ;EAAA;EACA,KAAAC,IAAA,SAAAI,aAAA;EAEA,MAAAC,OAAA,GAAAL,IAAA,CAAAK,OAAA,CAAAC,GAAA;EACA,MAAAC,MAAA,GAAAN,MAAA,CAAAC,CAAA,CAAAM,MAAA,CAAAH,OAAA;EAEA,SAAAI,YAAA;IACA,QACM,cAAaT,IAAA;EAEnB;EAEA,SAAAU,eAAA;IACA,QACM,cAAaV,IAAA,EAAK,QAAOO,MAAA;EAE/B;EAEA,MAAAI,KAAA,GAAAhB,MAAA,CAAAK,IAAA,CAAAY,UAAA;EAEA,UACI,aACE,SAAQ;MACVC,WAAA,EAAAJ,WAAA;MACAK,WAAA,EAAAJ;IACA,MAEA,YAAWV,IAAA,EAAK,QAAOO,MAAA;AAE3B;AAEA,MAAAQ,OAAA,GAAAjB,QAAA;EAAAE,IAAA;EAAAO;AAAA;;;;;;EACA,MAAAS,SAAA,GAAAd,CAAA;EACA;IAAAe;EAAA,IAAA5B,QAAA;EACA,MAAA6B,aAAA,GAAAX,MAAA,CAAAY,KAAA,CAAAb,GAAA,OAAAT,MAAA,CAAAuB,UAAA;EACA,MAAAC,iBAAA,GAAA/B,aAAA,CAAAM,qBAAA,EAAAsB,aAAA;IAAAI,OAAA;EAAA;EAEA,UACI,6BAA4B,IACvB,CAAAC,UAAA,CAAAvB,IAAA,KACD,kBAAmB,yBAClB,CAAAA,IAAA,CAAAwB,WAAA,CAAAlB,GAAA,MACD,kBAAmB,uBAClBN,IAAA,CAAAY,UAAA,OAAAf,MAAA,CAAAkB,OAAA,IACD,iCAAG,SAEH,OACE,eACA,MAAKtB,KAAA,EACL,SAAQ,MAAAuB,SAAA,CAAAS,GAAA,SAELR,MAAA,GACC,qBAEA,wBACV,MACE,yBACA,UAASD,SAAA,GAET,KACE,QAAOK,iBAAA,EACP,QAAOrB,IAAA;AAMf;AAEA,SAAAuB,WAAAvB,IAAA;EACA,QAAAA,IAAA,CAAA0B,KAAA,CAAApB,GAAA,UAAAqB,IAAA,OAAA3B,IAAA,CAAA4B,OAAA,CAAAtB,GAAA,UAAAqB,IAAA,OAAA3B,IAAA,CAAA6B,SAAA,CAAAvB,GAAA,UAAAqB,IAAA;AACA;AAEA,SAAAvB,cAAA;EACA,QACI,iBACE,uBACE,KACI;AACP;AACA;AACA;AACA,yEAAQ;AAEb",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel/event-tabs-breed.js.output.jsx b/test/fixtures/real-project/snapshots/babel/event-tabs-breed.js.output.jsx
index 956d194..013f293 100644
--- a/test/fixtures/real-project/snapshots/babel/event-tabs-breed.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/babel/event-tabs-breed.js.output.jsx
@@ -123,7 +123,7 @@ const SelectLikes = observer(({
     for (const $cat of $cats) {
       __pugEachResult.push((() => {
         const catId = $cat.getId();
-        return <Item styleName={["item", {
+        return <Item styleName={['item', {
           selected: $likes[catId].get()
         }]} key={catId} onPress={() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)}><CatCard $cat={$cat} small /></Item>;
       })());
diff --git a/test/fixtures/real-project/snapshots/babel/event-tabs-breed.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel/event-tabs-breed.js.output.sourcemap.json
index 88fd73f..4cce8fc 100644
--- a/test/fixtures/real-project/snapshots/babel/event-tabs-breed.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/babel/event-tabs-breed.js.output.sourcemap.json
@@ -3,10 +3,6 @@
   "names": [
     "React",
     "useState",
-    "observer",
-    "useSub",
-    "$",
-    "styl",
     "Link",
     "Item",
     "ScrollView",
@@ -28,11 +24,13 @@
     "faLink",
     "CatCard",
     "CAT_FORM",
+    "observer",
     "breed",
     "eventId",
     "$selected",
     "set$selected",
     "$new",
+    "$",
     "$showModal",
     "$mode",
     "$fields",
@@ -59,6 +57,7 @@
     "CatsList",
     "onEdit",
     "$cats",
+    "useSub",
     "$sort",
     "number",
     "__pugEachResult",
@@ -84,6 +83,6 @@
   "sourcesContent": [
     "import React, { useState } from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport {\n  Link, Item, ScrollView, Form, useFormProps, Alert,\n  Content, Tag, Br, Button, Modal, Div, confirm,\n  useFormFields$, useValidate\n} from 'startupjs-ui'\nimport { useGlobalSearchParams } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faLink } from '@fortawesome/free-solid-svg-icons/faLink'\nimport CatCard from '@/components/CatCard'\nimport { CAT_FORM } from '@/model/cats/schema'\n\nexport default observer(({ breed }) => {\n  const { eventId } = useGlobalSearchParams()\n  const [$selected, set$selected] = useState()\n  const $new = $()\n  const $showModal = $()\n  const $mode = $()\n  const $fields = useFormFields$(CAT_FORM)\n  const validate = useValidate()\n\n  function showCreate () {\n    $new.set({ breed })\n    $fields.breed.disabled.set(true)\n    set$selected(() => $new)\n    $mode.set('new')\n    $showModal.set(true)\n  }\n\n  function showEdit ($cat) {\n    $fields.breed.disabled.del()\n    set$selected(() => $cat)\n    $mode.set('edit')\n    $showModal.set(true)\n  }\n\n  function cancel () {\n    if (!$showModal.get()) return\n    $showModal.del()\n    $mode.del()\n  }\n\n  async function create () {\n    if (!validate()) return\n    await $.cats.addNew({\n      ...$new.getDeepCopy(),\n      eventId\n    })\n    cancel()\n  }\n\n  async function deleteCat () {\n    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return\n    await $selected.del()\n    cancel()\n  }\n\n  return pug`\n    ScrollView(full)\n      Content(full pure)\n        CatsList(eventId=eventId onEdit=showEdit breed=breed)\n    Content(padding=1)\n      Button(onPress=showCreate) Add new #{breed}\n    Modal(\n      title=$mode.get() === 'new' ? 'Create cat' : 'Edit cat'\n      $visible=$showModal\n      onDismiss=cancel\n    )\n      - const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic')\n      Form(\n        key=$selected?.getId() || 'NEW'\n        $fields=$fields\n        $value=$selected\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n        customInputs={\n          likes: SelectLikesInput\n        }\n        validate=validate\n      )\n      Br\n      if $mode.get() === 'new'\n        Div(align='right' row)\n          Button(onPress=cancel) Cancel\n          Button(disabled=validate.hasErrors pushed variant='flat' color='primary' onPress=create) Create\n      else if $mode.get() === 'edit'\n        Div(align='right' row)\n          Button(color='error' onPress=deleteCat) Delete\n  `\n})\n\nconst CatsList = observer(({ onEdit, breed, eventId }) => {\n  if (!eventId) return pug`Alert(variant='error') No event specified`\n  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      Item(key=$cat.getId())\n        CatCard($cat=$cat)\n        Item.Right\n          Div(vAlign='center' row gap=1)\n            if !hasContact($cat)\n              Tag(color='error') No contact\n            if !$cat.photoFileId.get()\n              Tag(color='error') No photo\n            Button(variant='text' icon=faPen onPress=() => onEdit($cat) tooltip='Edit')\n            Link(href='/events/' + eventId + '/matches/' + $cat.getId())\n              Button(variant='text' icon=faHeart tooltip='Matches')\n            Link(href='/cats/' + $cat.token.get())\n              Button(variant='text' icon=faLink tooltip='Cat profile link') Link\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nconst SelectLikesInput = observer(({ $value, ...props }) => {\n  const { oppositeBreed, eventId } = { ...useFormProps(), ...props }\n  return pug`\n    if oppositeBreed\n      SelectLikes(\n        $likes=$value\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n      )\n    else\n      Alert(variant='warning') Select breed to choose likes\n  `\n})\n\nconst SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {\n  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      - const catId = $cat.getId()\n      Item.item(\n        key=catId\n        styleName={ selected: $likes[catId].get() }\n        onPress=() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)\n      )\n        CatCard($cat=$cat small)\n    else\n      Alert(variant='info') No cats with selected breed yet\n    style(lang='styl')\n      .item\n        border-radius 1u\n        &.selected\n          // FIXME: We can't use color var(--color-text-success-strong) here\n          background-color var(--color-text-success-strong)\n  `\n})\n"
   ],
-  "mappings": "AAAA,OAAAA,KAAA,IAAAC,QAAA;AACA,SAAAC,QAAA,EAAAC,MAAA,EAAAC,CAAA,EAAAC,IAAA;AACA,SACAC,IAAA,EAAAC,IAAA,EAAAC,UAAA,EAAAC,IAAA,EAAAC,YAAA,EAAAC,KAAA,EACAC,OAAA,EAAAC,GAAA,EAAAC,EAAA,EAAAC,MAAA,EAAAC,KAAA,EAAAC,GAAA,EAAAC,OAAA,EACAC,cAAA,EAAAC,WAAA,QACA;AACA,SAAAC,qBAAA;AACA,SAAAC,KAAA;AACA,SAAAC,OAAA;AACA,SAAAC,MAAA;AACA,OAAAC,OAAA;AACA,SAAAC,QAAA;AAEA,eAAAxB,QAAA;EAAAyB;AAAA;EACA;IAAAC;EAAA,IAAAP,qBAAA;EACA,OAAAQ,SAAA,EAAAC,YAAA,IAAA7B,QAAA;EACA,MAAA8B,IAAA,GAAA3B,CAAA;EACA,MAAA4B,UAAA,GAAA5B,CAAA;EACA,MAAA6B,KAAA,GAAA7B,CAAA;EACA,MAAA8B,OAAA,GAAAf,cAAA,CAAAO,QAAA;EACA,MAAAS,QAAA,GAAAf,WAAA;EAEA,SAAAgB,WAAA;IACAL,IAAA,CAAAM,GAAA;MAAAV;IAAA;IACAO,OAAA,CAAAP,KAAA,CAAAW,QAAA,CAAAD,GAAA;IACAP,YAAA,OAAAC,IAAA;IACAE,KAAA,CAAAI,GAAA;IACAL,UAAA,CAAAK,GAAA;EACA;EAEA,SAAAE,SAAAC,IAAA;IACAN,OAAA,CAAAP,KAAA,CAAAW,QAAA,CAAAG,GAAA;IACAX,YAAA,OAAAU,IAAA;IACAP,KAAA,CAAAI,GAAA;IACAL,UAAA,CAAAK,GAAA;EACA;EAEA,SAAAK,OAAA;IACA,KAAAV,UAAA,CAAAW,GAAA;IACAX,UAAA,CAAAS,GAAA;IACAR,KAAA,CAAAQ,GAAA;EACA;EAEA,eAAAG,OAAA;IACA,KAAAT,QAAA;IACA,MAAA/B,CAAA,CAAAyC,IAAA,CAAAC,MAAA;MACA,GAAAf,IAAA,CAAAgB,WAAA;MACAnB;IACA;IACAc,MAAA;EACA;EAEA,eAAAM,UAAA;IACA,YAAA9B,OAAA,oCAAAW,SAAA,CAAAoB,IAAA,CAAAN,GAAA;IACA,MAAAd,SAAA,CAAAY,GAAA;IACAC,MAAA;EACA;EAEA,UACI,iBACE,mBACE,kBAAiBd,OAAA,EAAQ,QAAOW,QAAA,EAAS,OAAMZ,KAAA,4BACnD,iBAAgB,IACd,gBAAeS,UAAA,EAAY,SAAUT,KAAA,qBACvC,MACE,OAAMM,KAAA,CAAAU,GAAA,0CACN,UAASX,UAAA,EACT,WAAUU,MAAA;QAER,MAAAQ,aAAA,GAAArB,SAAA,EAAAF,KAAA,CAAAgB,GAAA,OAAAd,SAAA,CAAAF,KAAA,CAAAgB,GAAA;QAAA,UACF,KACE,KAAId,SAAA,EAAAsB,KAAA,aACJ,SAAQjB,OAAA,EACR,QAAOL,SAAA,EACP,eAAcqB,aAAA,EACd,SAAQtB,OAAA,EACR,cAAa;YACjBwB,KAAA,EAAAC;UACA,GACI,UAASlB,QAAA,KAEX,MACGF,KAAA,CAAAU,GAAA,gBACD,uBACE,gBAAeD,MAAA,EAAQ,gBACvB,iBAAgBP,QAAA,CAAAmB,SAAA,EAAmB,+CAA8CV,MAAA,EAAQ,wBACrFX,KAAA,CAAAU,GAAA,iBACN,uBACE,8BAA6BK,SAAA,EAAW;MAAA;AAElD;AAEA,MAAAO,QAAA,GAAArD,QAAA;EAAAsD,MAAA;EAAA7B,KAAA;EAAAC;AAAA;EACA,KAAAA,OAAA,UAA2B,sBAAuB;EAClD,MAAA6B,KAAA,GAAAtD,MAAA,CAAAC,CAAA,CAAAyC,IAAA;IAAAjB,OAAA;IAAAD,KAAA;IAAA+B,KAAA;MAAA/B,KAAA;MAAAgC,MAAA;IAAA;EAAA;EACA;IAAA,MAAAC,eAAA;IAAA,WACSpB,IAAA,IAAQiB,KAAA;MAAAG,eAAA,CAAAC,IAAA,EACX,UAASrB,IAAA,CAAAW,KAAA,KACP,cAAaX,IAAA,KACb,YACE,6BAA4B,IACvB,CAAAsB,UAAA,CAAAtB,IAAA,KACD,kBAAmB,yBAClB,CAAAA,IAAA,CAAAuB,WAAA,CAAApB,GAAA,MACD,kBAAmB,uBACrB,4BAA2BrB,KAAA,EAAM,SAAQ,MAAAkC,MAAA,CAAAhB,IAAA,GAAmB,kBAC5D,WAAU,aAAAZ,OAAA,iBAAAY,IAAA,CAAAW,KAAA,KACR,4BAA2B5B,OAAA,EAAQ,4BACrC,WAAU,WAAAiB,IAAA,CAAAwB,KAAA,CAAArB,GAAA,KACR,4BAA2BnB,MAAA,EAAO,2BAA4B;IAAA;IAAA,OAAAoC,eAAA;EAAA;AAE5E;AAEA,SAAAE,WAAAtB,IAAA;EACA,QAAAA,IAAA,CAAAyB,KAAA,CAAAtB,GAAA,UAAAuB,IAAA,OAAA1B,IAAA,CAAA2B,OAAA,CAAAxB,GAAA,UAAAuB,IAAA,OAAA1B,IAAA,CAAA4B,SAAA,CAAAzB,GAAA,UAAAuB,IAAA;AACA;AAEA,MAAAb,gBAAA,GAAAnD,QAAA;EAAAmE,MAAA;EAAA,GAAAC;AAAA;EACA;IAAApB,aAAA;IAAAtB;EAAA;IAAA,GAAAlB,YAAA;IAAA,GAAA4D;EAAA;EACA,OACOpB,aAAA,IACD,YACE,QAAOmB,MAAA,EACP,eAAcnB,aAAA,EACd,SAAQtB,OAAA,QAGV,wBAAyB;AAE/B;AAEA,MAAA2C,WAAA,GAAArE,QAAA;EAAAsE,MAAA;EAAAtB,aAAA;EAAAtB;AAAA;;;;;;;;;EACE,MAAA6B,KAAA,GAAAtD,MAAA,CAAAC,CAAA,CAAAyC,IAAA;IAAAjB,OAAA;IAAAD,KAAA,EAAAuB,aAAA;IAAAQ,KAAA;MAAA/B,KAAA;MAAAgC,MAAA;IAAA;EAAA;EACF;IAAA,MAAAC,eAAA;IAAA,WACSpB,IAAA,IAAQiB,KAAA;MAAAG,eAAA,CAAAC,IAAA;QACT,MAAAY,KAAA,GAAAjC,IAAA,CAAAW,KAAA;QAAA,QACF,KAEE,kBAFE,EAEQ;UAAAuB,QAAA,EAAAF,MAAA,CAAAC,KAAA,EAAA9B,GAAA;QAAA,IADV,KAAI8B,KAAA,EAEJ,SAAQ,MAAAD,MAAA,CAAAC,KAAA,EAAA9B,GAAA,KAAA6B,MAAA,CAAAC,KAAA,EAAAhC,GAAA,KAAA+B,MAAA,CAAAC,KAAA,EAAApC,GAAA,SAER,cAAaG,IAAA,EAAK;MAAA;IAAA;IAAA,OAAAoB,eAAA,CAAAe,MAAA,GAAAf,eAAA,IAEpB,qBAAsB;EAAA;AAQ5B",
+  "mappings": "AAAA,OAAAA,KAAA,IAAAC,QAAA;qDACoD;AACpD,SACAC,IAAA,EAAAC,IAAA,EAAAC,UAAA,EAAAC,IAAA,EAAAC,YAAA,EAAAC,KAAA,EACAC,OAAA,EAAAC,GAAA,EAAAC,EAAA,EAAAC,MAAA,EAAAC,KAAA,EAAAC,GAAA,EAAAC,OAAA,EACAC,cAAA,EAAAC,WAAA,QACA;AACA,SAAAC,qBAAA;AACA,SAAAC,KAAA;AACA,SAAAC,OAAA;AACA,SAAAC,MAAA;AACA,OAAAC,OAAA;AACA,SAAAC,QAAA;AAEA,eAAAC,QAAA;EAAAC;AAAA;EACA;IAAAC;EAAA,IAAAR,qBAAA;EACA,OAAAS,SAAA,EAAAC,YAAA,IAAA1B,QAAA;EACA,MAAA2B,IAAA,GAAAC,CAAA;EACA,MAAAC,UAAA,GAAAD,CAAA;EACA,MAAAE,KAAA,GAAAF,CAAA;EACA,MAAAG,OAAA,GAAAjB,cAAA,CAAAO,QAAA;EACA,MAAAW,QAAA,GAAAjB,WAAA;EAEA,SAAAkB,WAAA;IACAN,IAAA,CAAAO,GAAA;MAAAX;IAAA;IACAQ,OAAA,CAAAR,KAAA,CAAAY,QAAA,CAAAD,GAAA;IACAR,YAAA,OAAAC,IAAA;IACAG,KAAA,CAAAI,GAAA;IACAL,UAAA,CAAAK,GAAA;EACA;EAEA,SAAAE,SAAAC,IAAA;IACAN,OAAA,CAAAR,KAAA,CAAAY,QAAA,CAAAG,GAAA;IACAZ,YAAA,OAAAW,IAAA;IACAP,KAAA,CAAAI,GAAA;IACAL,UAAA,CAAAK,GAAA;EACA;EAEA,SAAAK,OAAA;IACA,KAAAV,UAAA,CAAAW,GAAA;IACAX,UAAA,CAAAS,GAAA;IACAR,KAAA,CAAAQ,GAAA;EACA;EAEA,eAAAG,OAAA;IACA,KAAAT,QAAA;IACA,MAAAJ,CAAA,CAAAc,IAAA,CAAAC,MAAA;MACA,GAAAhB,IAAA,CAAAiB,WAAA;MACApB;IACA;IACAe,MAAA;EACA;EAEA,eAAAM,UAAA;IACA,YAAAhC,OAAA,oCAAAY,SAAA,CAAAqB,IAAA,CAAAN,GAAA;IACA,MAAAf,SAAA,CAAAa,GAAA;IACAC,MAAA;EACA;EAEA,UACI,iBACE,mBACE,kBAAiBf,OAAA,EAAQ,QAAOY,QAAA,EAAS,OAAMb,KAAA,4BACnD,iBAAgB,IACd,gBAAeU,UAAA,EAAY,SAAUV,KAAA,qBACvC,MACE,OAAMO,KAAA,CAAAU,GAAA,0CACN,UAASX,UAAA,EACT,WAAUU,MAAA;QAER,MAAAQ,aAAA,GAAAtB,SAAA,EAAAF,KAAA,CAAAiB,GAAA,OAAAf,SAAA,CAAAF,KAAA,CAAAiB,GAAA;QAAA,UACF,KACE,KAAIf,SAAA,EAAAuB,KAAA,aACJ,SAAQjB,OAAA,EACR,QAAON,SAAA,EACP,eAAcsB,aAAA,EACd,SAAQvB,OAAA,EACR,cAAa;YACjByB,KAAA,EAAAC;UACA,GACI,UAASlB,QAAA,KAEX,MACGF,KAAA,CAAAU,GAAA,gBACD,uBACE,gBAAeD,MAAA,EAAQ,gBACvB,iBAAgBP,QAAA,CAAAmB,SAAA,EAAmB,+CAA8CV,MAAA,EAAQ,wBACrFX,KAAA,CAAAU,GAAA,iBACN,uBACE,8BAA6BK,SAAA,EAAW;MAAA;AAElD;AAEA,MAAAO,QAAA,GAAA9B,QAAA;EAAA+B,MAAA;EAAA9B,KAAA;EAAAC;AAAA;EACA,KAAAA,OAAA,UAA2B,sBAAuB;EAClD,MAAA8B,KAAA,GAAAC,MAAA,CAAA3B,CAAA,CAAAc,IAAA;IAAAlB,OAAA;IAAAD,KAAA;IAAAiC,KAAA;MAAAjC,KAAA;MAAAkC,MAAA;IAAA;EAAA;EACA;IAAA,MAAAC,eAAA;IAAA,WACSrB,IAAA,IAAQiB,KAAA;MAAAI,eAAA,CAAAC,IAAA,EACX,UAAStB,IAAA,CAAAW,KAAA,KACP,cAAaX,IAAA,KACb,YACE,6BAA4B,IACvB,CAAAuB,UAAA,CAAAvB,IAAA,KACD,kBAAmB,yBAClB,CAAAA,IAAA,CAAAwB,WAAA,CAAArB,GAAA,MACD,kBAAmB,uBACrB,4BAA2BvB,KAAA,EAAM,SAAQ,MAAAoC,MAAA,CAAAhB,IAAA,GAAmB,kBAC5D,WAAU,aAAAb,OAAA,iBAAAa,IAAA,CAAAW,KAAA,KACR,4BAA2B9B,OAAA,EAAQ,4BACrC,WAAU,WAAAmB,IAAA,CAAAyB,KAAA,CAAAtB,GAAA,KACR,4BAA2BrB,MAAA,EAAO,2BAA4B;IAAA;IAAA,OAAAuC,eAAA;EAAA;AAE5E;AAEA,SAAAE,WAAAvB,IAAA;EACA,QAAAA,IAAA,CAAA0B,KAAA,CAAAvB,GAAA,UAAAwB,IAAA,OAAA3B,IAAA,CAAA4B,OAAA,CAAAzB,GAAA,UAAAwB,IAAA,OAAA3B,IAAA,CAAA6B,SAAA,CAAA1B,GAAA,UAAAwB,IAAA;AACA;AAEA,MAAAd,gBAAA,GAAA5B,QAAA;EAAA6C,MAAA;EAAA,GAAAC;AAAA;EACA;IAAArB,aAAA;IAAAvB;EAAA;IAAA,GAAAnB,YAAA;IAAA,GAAA+D;EAAA;EACA,OACOrB,aAAA,IACD,YACE,QAAOoB,MAAA,EACP,eAAcpB,aAAA,EACd,SAAQvB,OAAA,QAGV,wBAAyB;AAE/B;AAEA,MAAA6C,WAAA,GAAA/C,QAAA;EAAAgD,MAAA;EAAAvB,aAAA;EAAAvB;AAAA;;;;;;;;;EACA,MAAA8B,KAAA,GAAAC,MAAA,CAAA3B,CAAA,CAAAc,IAAA;IAAAlB,OAAA;IAAAD,KAAA,EAAAwB,aAAA;IAAAS,KAAA;MAAAjC,KAAA;MAAAkC,MAAA;IAAA;EAAA;EACA;IAAA,MAAAC,eAAA;IAAA,WACSrB,IAAA,IAAQiB,KAAA;MAAAI,eAAA,CAAAC,IAAA;QACT,MAAAY,KAAA,GAAAlC,IAAA,CAAAW,KAAA;QAAA,QACF,KAEE,kBAFE,EAEQ;UAAAwB,QAAA,EAAAF,MAAA,CAAAC,KAAA,EAAA/B,GAAA;QAAA,IADV,KAAI+B,KAAA,EAEJ,SAAQ,MAAAD,MAAA,CAAAC,KAAA,EAAA/B,GAAA,KAAA8B,MAAA,CAAAC,KAAA,EAAAjC,GAAA,KAAAgC,MAAA,CAAAC,KAAA,EAAArC,GAAA,SAER,cAAaG,IAAA,EAAK;MAAA;IAAA;IAAA,OAAAqB,eAAA,CAAAe,MAAA,GAAAf,eAAA,IAEpB,qBAAsB;EAAA;AAQ5B",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel/event-tabs-breed.tsx.output.jsx b/test/fixtures/real-project/snapshots/babel/event-tabs-breed.tsx.output.jsx
new file mode 100644
index 0000000..013f293
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel/event-tabs-breed.tsx.output.jsx
@@ -0,0 +1,133 @@
+import React, { useState } from 'react';
+import { observer, useSub, $, styl } from 'startupjs';
+import { Link, Item, ScrollView, Form, useFormProps, Alert, Content, Tag, Br, Button, Modal, Div, confirm, useFormFields$, useValidate } from 'startupjs-ui';
+import { useGlobalSearchParams } from 'expo-router';
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
+import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart';
+import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
+import CatCard from '@/components/CatCard';
+import { CAT_FORM } from '@/model/cats/schema';
+export default observer(({
+  breed
+}) => {
+  const {
+    eventId
+  } = useGlobalSearchParams();
+  const [$selected, set$selected] = useState();
+  const $new = $();
+  const $showModal = $();
+  const $mode = $();
+  const $fields = useFormFields$(CAT_FORM);
+  const validate = useValidate();
+  function showCreate() {
+    $new.set({
+      breed
+    });
+    $fields.breed.disabled.set(true);
+    set$selected(() => $new);
+    $mode.set('new');
+    $showModal.set(true);
+  }
+  function showEdit($cat) {
+    $fields.breed.disabled.del();
+    set$selected(() => $cat);
+    $mode.set('edit');
+    $showModal.set(true);
+  }
+  function cancel() {
+    if (!$showModal.get()) return;
+    $showModal.del();
+    $mode.del();
+  }
+  async function create() {
+    if (!validate()) return;
+    await $.cats.addNew({
+      ...$new.getDeepCopy(),
+      eventId
+    });
+    cancel();
+  }
+  async function deleteCat() {
+    if (!(await confirm(`Are you sure you want to delete ${$selected.name.get()}?`))) return;
+    await $selected.del();
+    cancel();
+  }
+  return <><ScrollView full><Content full pure><CatsList eventId={eventId} onEdit={showEdit} breed={breed} /></Content></ScrollView><Content padding={1}><Button onPress={showCreate}>Add new {breed}</Button></Content><Modal title={$mode.get() === 'new' ? 'Create cat' : 'Edit cat'} $visible={$showModal} onDismiss={cancel}>{(() => {
+        const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic');
+        return <><Form key={$selected?.getId() || 'NEW'} $fields={$fields} $value={$selected} oppositeBreed={oppositeBreed} eventId={eventId} customInputs={{
+            likes: SelectLikesInput
+          }} validate={validate} /><Br />{$mode.get() === 'new' ? <Div align='right' row><Button onPress={cancel}>Cancel</Button><Button disabled={validate.hasErrors} pushed variant='flat' color='primary' onPress={create}>Create</Button></Div> : $mode.get() === 'edit' ? <Div align='right' row><Button color='error' onPress={deleteCat}>Delete</Button></Div> : null}</>;
+      })()}</Modal></>;
+});
+const CatsList = observer(({
+  onEdit,
+  breed,
+  eventId
+}) => {
+  if (!eventId) return <Alert variant='error'>No event specified</Alert>;
+  const $cats = useSub($.cats, {
+    eventId,
+    breed,
+    $sort: {
+      breed: 1,
+      number: 1
+    }
+  });
+  return (() => {
+    const __pugEachResult = [];
+    for (const $cat of $cats) {
+      __pugEachResult.push(<Item key={$cat.getId()}><CatCard $cat={$cat} /><Item.Right><Div vAlign='center' row gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}<Button variant='text' icon={faPen} onPress={() => onEdit($cat)} tooltip='Edit' /><Link href={'/events/' + eventId + '/matches/' + $cat.getId()}><Button variant='text' icon={faHeart} tooltip='Matches' /></Link><Link href={'/cats/' + $cat.token.get()}><Button variant='text' icon={faLink} tooltip='Cat profile link'>Link</Button></Link></Div></Item.Right></Item>);
+    }
+    return __pugEachResult;
+  })();
+});
+function hasContact($cat) {
+  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim();
+}
+const SelectLikesInput = observer(({
+  $value,
+  ...props
+}) => {
+  const {
+    oppositeBreed,
+    eventId
+  } = {
+    ...useFormProps(),
+    ...props
+  };
+  return oppositeBreed ? <SelectLikes $likes={$value} oppositeBreed={oppositeBreed} eventId={eventId} /> : <Alert variant='warning'>Select breed to choose likes</Alert>;
+});
+const SelectLikes = observer(({
+  $likes,
+  oppositeBreed,
+  eventId
+}) => {
+  styl`
+    .item
+      border-radius 1u
+      &.selected
+        // FIXME: We can't use color var(--color-text-success-strong) here
+        background-color var(--color-text-success-strong)
+
+  `;
+  const $cats = useSub($.cats, {
+    eventId,
+    breed: oppositeBreed,
+    $sort: {
+      breed: 1,
+      number: 1
+    }
+  });
+  return (() => {
+    const __pugEachResult = [];
+    for (const $cat of $cats) {
+      __pugEachResult.push((() => {
+        const catId = $cat.getId();
+        return <Item styleName={['item', {
+          selected: $likes[catId].get()
+        }]} key={catId} onPress={() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)}><CatCard $cat={$cat} small /></Item>;
+      })());
+    }
+    return __pugEachResult.length ? __pugEachResult : <Alert variant='info'>No cats with selected breed yet</Alert>;
+  })();
+});
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel/event-tabs-breed.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel/event-tabs-breed.tsx.output.sourcemap.json
new file mode 100644
index 0000000..77ee875
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel/event-tabs-breed.tsx.output.sourcemap.json
@@ -0,0 +1,88 @@
+{
+  "version": 3,
+  "names": [
+    "React",
+    "useState",
+    "Link",
+    "Item",
+    "ScrollView",
+    "Form",
+    "useFormProps",
+    "Alert",
+    "Content",
+    "Tag",
+    "Br",
+    "Button",
+    "Modal",
+    "Div",
+    "confirm",
+    "useFormFields$",
+    "useValidate",
+    "useGlobalSearchParams",
+    "faPen",
+    "faHeart",
+    "faLink",
+    "CatCard",
+    "CAT_FORM",
+    "observer",
+    "breed",
+    "eventId",
+    "$selected",
+    "set$selected",
+    "$new",
+    "$",
+    "$showModal",
+    "$mode",
+    "$fields",
+    "validate",
+    "showCreate",
+    "set",
+    "disabled",
+    "showEdit",
+    "$cat",
+    "del",
+    "cancel",
+    "get",
+    "create",
+    "cats",
+    "addNew",
+    "getDeepCopy",
+    "deleteCat",
+    "name",
+    "oppositeBreed",
+    "getId",
+    "likes",
+    "SelectLikesInput",
+    "hasErrors",
+    "CatsList",
+    "onEdit",
+    "$cats",
+    "useSub",
+    "$sort",
+    "number",
+    "__pugEachResult",
+    "push",
+    "hasContact",
+    "photoFileId",
+    "token",
+    "phone",
+    "trim",
+    "catgram",
+    "phonegram",
+    "$value",
+    "props",
+    "SelectLikes",
+    "$likes",
+    "catId",
+    "selected",
+    "length"
+  ],
+  "sources": [
+    "test/fixtures/real-project/event-tabs-breed.tsx"
+  ],
+  "sourcesContent": [
+    "import React, { useState } from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport {\n  Link, Item, ScrollView, Form, useFormProps, Alert,\n  Content, Tag, Br, Button, Modal, Div, confirm,\n  useFormFields$, useValidate\n} from 'startupjs-ui'\nimport { useGlobalSearchParams } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faLink } from '@fortawesome/free-solid-svg-icons/faLink'\nimport CatCard from '@/components/CatCard'\nimport { CAT_FORM } from '@/model/cats/schema'\n\nexport default observer(({ breed }) => {\n  const { eventId } = useGlobalSearchParams()\n  const [$selected, set$selected] = useState()\n  const $new = $()\n  const $showModal = $()\n  const $mode = $()\n  const $fields = useFormFields$(CAT_FORM)\n  const validate = useValidate()\n\n  function showCreate () {\n    $new.set({ breed })\n    $fields.breed.disabled.set(true)\n    set$selected(() => $new)\n    $mode.set('new')\n    $showModal.set(true)\n  }\n\n  function showEdit ($cat) {\n    $fields.breed.disabled.del()\n    set$selected(() => $cat)\n    $mode.set('edit')\n    $showModal.set(true)\n  }\n\n  function cancel () {\n    if (!$showModal.get()) return\n    $showModal.del()\n    $mode.del()\n  }\n\n  async function create () {\n    if (!validate()) return\n    await $.cats.addNew({\n      ...$new.getDeepCopy(),\n      eventId\n    })\n    cancel()\n  }\n\n  async function deleteCat () {\n    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return\n    await $selected.del()\n    cancel()\n  }\n\n  return pug`\n    ScrollView(full)\n      Content(full pure)\n        CatsList(eventId=eventId onEdit=showEdit breed=breed)\n    Content(padding=1)\n      Button(onPress=showCreate) Add new #{breed}\n    Modal(\n      title=$mode.get() === 'new' ? 'Create cat' : 'Edit cat'\n      $visible=$showModal\n      onDismiss=cancel\n    )\n      - const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic')\n      Form(\n        key=$selected?.getId() || 'NEW'\n        $fields=$fields\n        $value=$selected\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n        customInputs={\n          likes: SelectLikesInput\n        }\n        validate=validate\n      )\n      Br\n      if $mode.get() === 'new'\n        Div(align='right' row)\n          Button(onPress=cancel) Cancel\n          Button(disabled=validate.hasErrors pushed variant='flat' color='primary' onPress=create) Create\n      else if $mode.get() === 'edit'\n        Div(align='right' row)\n          Button(color='error' onPress=deleteCat) Delete\n  `\n})\n\nconst CatsList = observer(({ onEdit, breed, eventId }) => {\n  if (!eventId) return pug`Alert(variant='error') No event specified`\n  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      Item(key=$cat.getId())\n        CatCard($cat=$cat)\n        Item.Right\n          Div(vAlign='center' row gap=1)\n            if !hasContact($cat)\n              Tag(color='error') No contact\n            if !$cat.photoFileId.get()\n              Tag(color='error') No photo\n            Button(variant='text' icon=faPen onPress=() => onEdit($cat) tooltip='Edit')\n            Link(href='/events/' + eventId + '/matches/' + $cat.getId())\n              Button(variant='text' icon=faHeart tooltip='Matches')\n            Link(href='/cats/' + $cat.token.get())\n              Button(variant='text' icon=faLink tooltip='Cat profile link') Link\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nconst SelectLikesInput = observer(({ $value, ...props }) => {\n  const { oppositeBreed, eventId } = { ...useFormProps(), ...props }\n  return pug`\n    if oppositeBreed\n      SelectLikes(\n        $likes=$value\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n      )\n    else\n      Alert(variant='warning') Select breed to choose likes\n  `\n})\n\nconst SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {\n  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      - const catId = $cat.getId()\n      Item.item(\n        key=catId\n        styleName={ selected: $likes[catId].get() }\n        onPress=() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)\n      )\n        CatCard($cat=$cat small)\n    else\n      Alert(variant='info') No cats with selected breed yet\n    style(lang='styl')\n      .item\n        border-radius 1u\n        &.selected\n          // FIXME: We can't use color var(--color-text-success-strong) here\n          background-color var(--color-text-success-strong)\n  `\n})\n"
+  ],
+  "mappings": "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",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel/event-tabs-layout.js.output.jsx b/test/fixtures/real-project/snapshots/babel/event-tabs-layout.js.output.jsx
index f385144..4b5ba56 100644
--- a/test/fixtures/real-project/snapshots/babel/event-tabs-layout.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/babel/event-tabs-layout.js.output.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { observer, styl, $, useSub } from 'startupjs';
+import { observer, $, useSub, styl } from 'startupjs';
 import { useColors, Icon, Form, Modal, Button } from 'startupjs-ui';
 import { Tabs, useLocalSearchParams, Stack } from 'expo-router';
 import { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus';
@@ -9,6 +9,16 @@ import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
 import { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox';
 import { EVENT_FORM } from '@/model/events/schema';
 export default observer(function TabLayout() {
+  styl`
+    +tablet()
+      .screen
+        &:part(tabBar)
+          order -1
+          background-color transparent
+          border-bottom-width 1px
+          border-bottom-color rgba(0, 0, 0, 0.1)
+
+  `;
   const getColor = useColors();
   const {
     eventId
@@ -41,15 +51,6 @@ export default observer(function TabLayout() {
         title: 'Dev Only',
         tabBarIcon: renderTestIcon
       }} /></Tabs></>;
-  styl`
-    +tablet()
-      .screen
-        &:part(tabBar)
-          order -1
-          background-color transparent
-          border-bottom-width 1px
-          border-bottom-color rgba(0, 0, 0, 0.1)
-  `;
 });
 function renderEditEvent({
   $event
diff --git a/test/fixtures/real-project/snapshots/babel/event-tabs-layout.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel/event-tabs-layout.js.output.sourcemap.json
index adaeb5a..3713b9d 100644
--- a/test/fixtures/real-project/snapshots/babel/event-tabs-layout.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/babel/event-tabs-layout.js.output.sourcemap.json
@@ -2,10 +2,6 @@
   "version": 3,
   "names": [
     "React",
-    "observer",
-    "styl",
-    "$",
-    "useSub",
     "useColors",
     "Icon",
     "Form",
@@ -22,10 +18,13 @@
     "faPen",
     "faToolbox",
     "EVENT_FORM",
+    "observer",
     "TabLayout",
     "getColor",
     "eventId",
     "$event",
+    "useSub",
+    "$",
     "events",
     "get",
     "Error",
@@ -33,6 +32,7 @@
     "name",
     "headerRight",
     "renderEditEvent",
+    "styl",
     "tabBarActiveTintColor",
     "tabBarActiveBackgroundColor",
     "headerShown",
@@ -55,8 +55,8 @@
     "test/fixtures/real-project/event-tabs-layout.js"
   ],
   "sourcesContent": [
-    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, styl, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n  `\n  styl`\n    +tablet()\n      .screen\n        &:part(tabBar)\n          order -1\n          background-color transparent\n          border-bottom-width 1px\n          border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
+    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n    style(lang='styl')\n      +tablet()\n        .screen\n          &:part(tabBar)\n            order -1\n            background-color transparent\n            border-bottom-width 1px\n            border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
   ],
-  "mappings": "AACA,OAAAA,KAAA;AACA,SAAAC,QAAA,EAAAC,IAAA,EAAAC,CAAA,EAAAC,MAAA;AACA,SAAAC,SAAA,EAAAC,IAAA,EAAAC,IAAA,EAAAC,KAAA,EAAAC,MAAA;AACA,SAAAC,IAAA,EAAAC,oBAAA,EAAAC,KAAA;AACA,SAAAC,OAAA,IAAAC,WAAA;AACA,SAAAC,MAAA,IAAAC,eAAA;AACA,SAAAC,OAAA;AACA,SAAAC,KAAA;AACA,SAAAC,SAAA;AACA,SAAAC,UAAA;AAEA,eAAAnB,QAAA,UAAAoB,UAAA;EACA,MAAAC,QAAA,GAAAjB,SAAA;EACA;IAAAkB;EAAA,IAAAZ,oBAAA;EACA,MAAAa,MAAA,GAAApB,MAAA,CAAAD,CAAA,CAAAsB,MAAA,CAAAF,OAAA;EACA,KAAAC,MAAA,CAAAE,GAAA,UAAAC,KAAA;EAKA,UACI,aACE,SAAQ;MACVC,KAAA,EAAAJ,MAAA,CAAAK,IAAA,CAAAH,GAAA;MACAI,WAAA,EAAAA,CAAA,KAAAC,eAAA;QAAAP;MAAA;IACA,MAEA,KACE,OAAMA,MAAA,CAAAK,IAAA,CAAAH,GAAA,IACN,eAAc;MAChB,GAAAxB,IAAA;MACA8B,qBAAA,EAAAV,QAAA;MACAW,2BAAA;MACAC,WAAA;MACAC,WAAA,EAAAX,MAAA,CAAAK,IAAA,CAAAH,GAAA;IACA,IAEE,YACE,aACA,SAAQ;QACZE,KAAA;QACAQ,UAAA,EAAAC;MACA,MAEE,YACE,cACA,SAAQ;QACZC,IAAA;MACA,MAEE,YACE,gBACA,SAAQ;QACZV,KAAA;QACAQ,UAAA,EAAAG;MACA,MAEE,YACE,YACA,SAAQ;QACZX,KAAA;QACAQ,UAAA,EAAAI;MACA,MAEE,YACE,YACA,SAAQ;QACZZ,KAAA;QACAQ,UAAA,EAAAK;MACA;EAGJvC,IAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAAA6B,gBAAA;EAAAP;AAAA;EACA,QACI,kBAAiBA,MAAA;AAErB;AAEA,MAAAkB,SAAA,GAAAzC,QAAA;EAAAuB;AAAA;EACA,MAAAmB,UAAA,GAAAxC,CAAA;EACA,UACI,gBAAe,MAAAwC,UAAA,CAAAC,GAAA,QAA2B,qBAAoB1B,KAAA,EAAO,8BACrE,MACE,wBACA,UAASyB,UAAA,GAET,KACE,QAAOnB,MAAA,EACP,QAAOJ,UAAA;AAGf;AAEA,SAAAoB,eAAA;EAAAK,KAAA;EAAAC;AAAA;EACA,QACI,WAAUhC,WAAA,EAAY,OAAM;IAAA+B,KAAA;IAAAE,KAAA,EAAAD,IAAA;IAAAE,MAAA,EAAAF;EAAA;AAEhC;AAEA,SAAAP,mBAAA;EAAAM,KAAA;EAAAC;AAAA;EACA,QACI,WAAU9B,eAAA,EAAgB,OAAM;IAAA6B,KAAA;IAAAE,KAAA,EAAAD,IAAA;IAAAE,MAAA,EAAAF;EAAA;AAEpC;AAEA,SAAAT,eAAA;EAAAQ,KAAA;EAAAC;AAAA;EACA,QACI,WAAU7B,OAAA,EAAQ,OAAM;IAAA4B,KAAA;IAAAE,KAAA,EAAAD,IAAA;IAAAE,MAAA,EAAAF;EAAA;AAE5B;AAEA,SAAAL,eAAA;EAAAI,KAAA;EAAAC;AAAA;EACA,QACI,WAAU3B,SAAA,EAAU,OAAM;IAAA0B,KAAA;IAAAE,KAAA,EAAAD,IAAA;IAAAE,MAAA,EAAAF;EAAA;AAE9B",
+  "mappings": "AACA,OAAAA,KAAA;qDACoD;AACpD,SAAAC,SAAA,EAAAC,IAAA,EAAAC,IAAA,EAAAC,KAAA,EAAAC,MAAA;AACA,SAAAC,IAAA,EAAAC,oBAAA,EAAAC,KAAA;AACA,SAAAC,OAAA,IAAAC,WAAA;AACA,SAAAC,MAAA,IAAAC,eAAA;AACA,SAAAC,OAAA;AACA,SAAAC,KAAA;AACA,SAAAC,SAAA;AACA,SAAAC,UAAA;AAEA,eAAAC,QAAA,UAAAC,UAAA;;;;;;;;;;;EACA,MAAAC,QAAA,GAAAlB,SAAA;EACA;IAAAmB;EAAA,IAAAb,oBAAA;EACA,MAAAc,MAAA,GAAAC,MAAA,CAAAC,CAAA,CAAAC,MAAA,CAAAJ,OAAA;EACA,KAAAC,MAAA,CAAAI,GAAA,UAAAC,KAAA;EAKA,UACI,aACE,SAAQ;MACVC,KAAA,EAAAN,MAAA,CAAAO,IAAA,CAAAH,GAAA;MACAI,WAAA,EAAAA,CAAA,KAAAC,eAAA;QAAAT;MAAA;IACA,MAEA,KACE,OAAMA,MAAA,CAAAO,IAAA,CAAAH,GAAA,IACN,eAAc;MAChB,GAAAM,IAAA;MACAC,qBAAA,EAAAb,QAAA;MACAc,2BAAA;MACAC,WAAA;MACAC,WAAA,EAAAd,MAAA,CAAAO,IAAA,CAAAH,GAAA;IACA,IAEE,YACE,aACA,SAAQ;QACZE,KAAA;QACAS,UAAA,EAAAC;MACA,MAEE,YACE,cACA,SAAQ;QACZC,IAAA;MACA,MAEE,YACE,gBACA,SAAQ;QACZX,KAAA;QACAS,UAAA,EAAAG;MACA,MAEE,YACE,YACA,SAAQ;QACZZ,KAAA;QACAS,UAAA,EAAAI;MACA,MAEE,YACE,YACA,SAAQ;QACZb,KAAA;QACAS,UAAA,EAAAK;MACA;AAWJ;AAEA,SAAAX,gBAAA;EAAAT;AAAA;EACA,QACI,kBAAiBA,MAAA;AAErB;AAEA,MAAAqB,SAAA,GAAAzB,QAAA;EAAAI;AAAA;EACA,MAAAsB,UAAA,GAAApB,CAAA;EACA,UACI,gBAAe,MAAAoB,UAAA,CAAAC,GAAA,QAA2B,qBAAoB9B,KAAA,EAAO,8BACrE,MACE,wBACA,UAAS6B,UAAA,GAET,KACE,QAAOtB,MAAA,EACP,QAAOL,UAAA;AAGf;AAEA,SAAAwB,eAAA;EAAAK,KAAA;EAAAC;AAAA;EACA,QACI,WAAUpC,WAAA,EAAY,OAAM;IAAAmC,KAAA;IAAAE,KAAA,EAAAD,IAAA;IAAAE,MAAA,EAAAF;EAAA;AAEhC;AAEA,SAAAP,mBAAA;EAAAM,KAAA;EAAAC;AAAA;EACA,QACI,WAAUlC,eAAA,EAAgB,OAAM;IAAAiC,KAAA;IAAAE,KAAA,EAAAD,IAAA;IAAAE,MAAA,EAAAF;EAAA;AAEpC;AAEA,SAAAT,eAAA;EAAAQ,KAAA;EAAAC;AAAA;EACA,QACI,WAAUjC,OAAA,EAAQ,OAAM;IAAAgC,KAAA;IAAAE,KAAA,EAAAD,IAAA;IAAAE,MAAA,EAAAF;EAAA;AAE5B;AAEA,SAAAL,eAAA;EAAAI,KAAA;EAAAC;AAAA;EACA,QACI,WAAU/B,SAAA,EAAU,OAAM;IAAA8B,KAAA;IAAAE,KAAA,EAAAD,IAAA;IAAAE,MAAA,EAAAF;EAAA;AAE9B",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel/event-tabs-layout.tsx.output.jsx b/test/fixtures/real-project/snapshots/babel/event-tabs-layout.tsx.output.jsx
new file mode 100644
index 0000000..4b5ba56
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel/event-tabs-layout.tsx.output.jsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import { observer, $, useSub, styl } from 'startupjs';
+import { useColors, Icon, Form, Modal, Button } from 'startupjs-ui';
+import { Tabs, useLocalSearchParams, Stack } from 'expo-router';
+import { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus';
+import { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars';
+import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart';
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
+import { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox';
+import { EVENT_FORM } from '@/model/events/schema';
+export default observer(function TabLayout() {
+  styl`
+    +tablet()
+      .screen
+        &:part(tabBar)
+          order -1
+          background-color transparent
+          border-bottom-width 1px
+          border-bottom-color rgba(0, 0, 0, 0.1)
+
+  `;
+  const getColor = useColors();
+  const {
+    eventId
+  } = useLocalSearchParams();
+  const $event = useSub($.events[eventId]);
+  if (!$event.get()) throw Error('No such event');
+  return <><Stack.Screen options={{
+      title: $event.name.get(),
+      headerRight: () => renderEditEvent({
+        $event
+      })
+    }} /><Tabs title={$event.name.get()} screenOptions={{
+      ...styl('screen'),
+      tabBarActiveTintColor: getColor('primary'),
+      tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',
+      headerShown: false,
+      headerTitle: $event.name.get()
+    }}><Tabs.Screen name='index' options={{
+        title: 'Dashboard',
+        tabBarIcon: renderHomeIcon
+      }} /><Tabs.Screen name='-breed' options={{
+        href: null
+      }} /><Tabs.Screen name='domestic' options={{
+        title: 'Domestic Cats',
+        tabBarIcon: renderDomesticIcon
+      }} /><Tabs.Screen name='wild' options={{
+        title: 'Wild Cats',
+        tabBarIcon: renderWildIcon
+      }} /><Tabs.Screen name='test' options={{
+        title: 'Dev Only',
+        tabBarIcon: renderTestIcon
+      }} /></Tabs></>;
+});
+function renderEditEvent({
+  $event
+}) {
+  return <EditEvent $event={$event} />;
+}
+const EditEvent = observer(({
+  $event
+}) => {
+  const $showModal = $();
+  return <><Button onPress={() => $showModal.set(true)} variant='text' icon={faPen}>Edit this cat meetup</Button><Modal title='Edit cat meetup' $visible={$showModal}><Form $value={$event} fields={EVENT_FORM} /></Modal></>;
+});
+function renderWildIcon({
+  color,
+  size
+}) {
+  return <Icon icon={faWildBadge} style={{
+    color,
+    width: size,
+    height: size
+  }} />;
+}
+function renderDomesticIcon({
+  color,
+  size
+}) {
+  return <Icon icon={faDomesticBadge} style={{
+    color,
+    width: size,
+    height: size
+  }} />;
+}
+function renderHomeIcon({
+  color,
+  size
+}) {
+  return <Icon icon={faHeart} style={{
+    color,
+    width: size,
+    height: size
+  }} />;
+}
+function renderTestIcon({
+  color,
+  size
+}) {
+  return <Icon icon={faToolbox} style={{
+    color,
+    width: size,
+    height: size
+  }} />;
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/babel/event-tabs-layout.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/babel/event-tabs-layout.tsx.output.sourcemap.json
new file mode 100644
index 0000000..b6cf61a
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/babel/event-tabs-layout.tsx.output.sourcemap.json
@@ -0,0 +1,62 @@
+{
+  "version": 3,
+  "names": [
+    "React",
+    "useColors",
+    "Icon",
+    "Form",
+    "Modal",
+    "Button",
+    "Tabs",
+    "useLocalSearchParams",
+    "Stack",
+    "faVenus",
+    "faWildBadge",
+    "faMars",
+    "faDomesticBadge",
+    "faHeart",
+    "faPen",
+    "faToolbox",
+    "EVENT_FORM",
+    "observer",
+    "TabLayout",
+    "getColor",
+    "eventId",
+    "$event",
+    "useSub",
+    "$",
+    "events",
+    "get",
+    "Error",
+    "title",
+    "name",
+    "headerRight",
+    "renderEditEvent",
+    "styl",
+    "tabBarActiveTintColor",
+    "tabBarActiveBackgroundColor",
+    "headerShown",
+    "headerTitle",
+    "tabBarIcon",
+    "renderHomeIcon",
+    "href",
+    "renderDomesticIcon",
+    "renderWildIcon",
+    "renderTestIcon",
+    "EditEvent",
+    "$showModal",
+    "set",
+    "color",
+    "size",
+    "width",
+    "height"
+  ],
+  "sources": [
+    "test/fixtures/real-project/event-tabs-layout.tsx"
+  ],
+  "sourcesContent": [
+    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n    style(lang='styl')\n      +tablet()\n        .screen\n          &:part(tabBar)\n            order -1\n            background-color transparent\n            border-bottom-width 1px\n            border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
+  ],
+  "mappings": "AACA,OAAAA,KAAA;qDACoD;AACpD,SAAAC,SAAA,EAAAC,IAAA,EAAAC,IAAA,EAAAC,KAAA,EAAAC,MAAA;AACA,SAAAC,IAAA,EAAAC,oBAAA,EAAAC,KAAA;AACA,SAAAC,OAAA,IAAAC,WAAA;AACA,SAAAC,MAAA,IAAAC,eAAA;AACA,SAAAC,OAAA;AACA,SAAAC,KAAA;AACA,SAAAC,SAAA;AACA,SAAAC,UAAA;AAEA,eAAAC,QAAA,UAAAC,UAAA;;;;;;;;;;;EACA,MAAAC,QAAA,GAAAlB,SAAA;EACA;IAAAmB;EAAA,IAAAb,oBAAA;EACA,MAAAc,MAAA,GAAAC,MAAA,CAAAC,CAAA,CAAAC,MAAA,CAAAJ,OAAA;EACA,KAAAC,MAAA,CAAAI,GAAA,UAAAC,KAAA;EAKA,UACI,aACE,SAAQ;MACVC,KAAA,EAAAN,MAAA,CAAAO,IAAA,CAAAH,GAAA;MACAI,WAAA,EAAAA,CAAA,KAAAC,eAAA;QAAAT;MAAA;IACA,MAEA,KACE,OAAMA,MAAA,CAAAO,IAAA,CAAAH,GAAA,IACN,eAAc;MAChB,GAAAM,IAAA;MACAC,qBAAA,EAAAb,QAAA;MACAc,2BAAA;MACAC,WAAA;MACAC,WAAA,EAAAd,MAAA,CAAAO,IAAA,CAAAH,GAAA;IACA,IAEE,YACE,aACA,SAAQ;QACZE,KAAA;QACAS,UAAA,EAAAC;MACA,MAEE,YACE,cACA,SAAQ;QACZC,IAAA;MACA,MAEE,YACE,gBACA,SAAQ;QACZX,KAAA;QACAS,UAAA,EAAAG;MACA,MAEE,YACE,YACA,SAAQ;QACZZ,KAAA;QACAS,UAAA,EAAAI;MACA,MAEE,YACE,YACA,SAAQ;QACZb,KAAA;QACAS,UAAA,EAAAK;MACA;AAWJ;AAEA,SAAAX,gBAAA;EAAAT;AAAA;EACA,QACI,kBAAiBA,MAAA;AAErB;AAEA,MAAAqB,SAAA,GAAAzB,QAAA;EAAAI;AAAA;EACA,MAAAsB,UAAA,GAAApB,CAAA;EACA,UACI,gBAAe,MAAAoB,UAAA,CAAAC,GAAA,QAA2B,qBAAoB9B,KAAA,EAAO,8BACrE,MACE,wBACA,UAAS6B,UAAA,GAET,KACE,QAAOtB,MAAA,EACP,QAAOL,UAAA;AAGf;AAEA,SAAAwB,eAAA;EAAAK,KAAA;EAAAC;AAAA;EACA,QACI,WAAUpC,WAAA,EAAY,OAAM;IAAAmC,KAAA;IAAAE,KAAA,EAAAD,IAAA;IAAAE,MAAA,EAAAF;EAAA;AAEhC;AAEA,SAAAP,mBAAA;EAAAM,KAAA;EAAAC;AAAA;EACA,QACI,WAAUlC,eAAA,EAAgB,OAAM;IAAAiC,KAAA;IAAAE,KAAA,EAAAD,IAAA;IAAAE,MAAA,EAAAF;EAAA;AAEpC;AAEA,SAAAT,eAAA;EAAAQ,KAAA;EAAAC;AAAA;EACA,QACI,WAAUjC,OAAA,EAAQ,OAAM;IAAAgC,KAAA;IAAAE,KAAA,EAAAD,IAAA;IAAAE,MAAA,EAAAF;EAAA;AAE5B;AAEA,SAAAL,eAAA;EAAAI,KAAA;EAAAC;AAAA;EACA,QACI,WAAU/B,SAAA,EAAU,OAAM;IAAA8B,KAAA;IAAAE,KAAA,EAAAD,IAAA;IAAAE,MAAA,EAAAF;EAAA;AAE9B",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/esbuild/CatCard.js.output.jsx b/test/fixtures/real-project/snapshots/esbuild/CatCard.js.output.jsx
index bfa7917..73095f5 100644
--- a/test/fixtures/real-project/snapshots/esbuild/CatCard.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/esbuild/CatCard.js.output.jsx
@@ -1,9 +1,7 @@
 import React from "react";
-import { styl, observer, useSub, $ } from "startupjs";
+import { observer, useSub, $, styl } from "startupjs";
 import { Div, Span, Avatar, Link } from "startupjs-ui";
 var CatCard_default = observer(({ $cat, showPhone, large, small }) => {
-  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get();
-  return <Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={["avatar", { large, small }]} fileId={photoFileId} name={name} /> : <Avatar styleName={["avatar", { large, small }]}>{name}</Avatar>}<Div row><Span styleName={["text", { large }]} bold>{(number || "X") + ". "}</Span><Div><Span styleName={["text", { large }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={["text", { large }]}><Span bold>Phone:{" "}</Span>{phone}</Span> : null}{catgram ? <Span styleName={["text", { large }]}><Span bold>Catgram:{" "}</Span><Link styleName={["text", { large }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={["text", { large }]}><Span bold>Phonegram:{" "}</Span><Link styleName={["text", { large }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>;
   styl`
     .avatar
       margin-right 1u
@@ -15,7 +13,10 @@ var CatCard_default = observer(({ $cat, showPhone, large, small }) => {
         height @width
     .text.large
       font(h6)
+
   `;
+  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get();
+  return <Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={["avatar", { large, small }]} fileId={photoFileId} name={name} /> : <Avatar styleName={["avatar", { large, small }]}>{name}</Avatar>}<Div row><Span styleName={["text", { large }]} bold>{(number || "X") + ". "}</Span><Div><Span styleName={["text", { large }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={["text", { large }]}><Span bold>Phone:{" "}</Span>{phone}</Span> : null}{catgram ? <Span styleName={["text", { large }]}><Span bold>Catgram:{" "}</Span><Link styleName={["text", { large }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={["text", { large }]}><Span bold>Phonegram:{" "}</Span><Link styleName={["text", { large }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>;
 });
 const Photo = observer(({ fileId, name }) => {
   const $file = useSub($.files[fileId]);
diff --git a/test/fixtures/real-project/snapshots/esbuild/CatCard.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/esbuild/CatCard.js.output.sourcemap.json
index 62552c6..7ae87ed 100644
--- a/test/fixtures/real-project/snapshots/esbuild/CatCard.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/esbuild/CatCard.js.output.sourcemap.json
@@ -4,8 +4,8 @@
     "../../test/fixtures/real-project/CatCard.js"
   ],
   "sourcesContent": [
-    "import React from 'react'\nimport { pug, styl, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n  `\n  /* eslint-disable-line */styl`\n    .avatar\n      margin-right 1u\n      &.large\n        width 12u\n        height @width\n      &.small\n        width 4u\n        height @width\n    .text.large\n      font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
+    "import React from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n    style(lang='styl')\n      .avatar\n        margin-right 1u\n        &.large\n          width 12u\n          height @width\n        &.small\n          width 4u\n          height @width\n      .text.large\n        font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
   ],
-  "mappings": "AAAA,OAAA,WAAA;AACA,SAAA,MAAA,UAAA,QAAA,SAAA;AACA,SAAA,KAAA,MAAA,QAAA,YAAA;AAEA,IAAA,kBAAA,SAAA,CAAA,EAAA,MAAA,WAAA,OAAA,MAAA,MAAA;AACA,QAAA,EAAA,MAAA,QAAA,OAAA,SAAA,aAAA,UAAA,IAAA,KAAA,IAAA;AACA,SAAA,CACI,IAAA,KAAA,OAAA,IAAA,OAAA,UACK,cAAA,CACD,MAAa,WAAA,CAAA,UAAU,EAAA,OAAA,MAAA,CAAA,GAAiB,QAAO,aAAY,MAAK,MAAA,KAAA,CAEhE,OAAc,WAAA,CAAA,UAAU,EAAA,OAAA,MAAA,CAAA,IAAmB,KAAA,EAA3C,QAA2C,CAC7C,IAAA,IAAA,CACE,KAAe,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAf,OAA2B,UAAA,OAAA,KAAA,EAArC,KAAqC,CACrC,IAAA,CACE,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,IAAY,KAAA,EAAhC,MACG,YAAA,GACE,QAAA,CACD,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAA,CAClB,KAAA,KAAW,OAAQ,IAAA,EAAnB,MACE,MAAA,EAFJ,QAEI,MACH,UAAA,CACD,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAA,CAClB,KAAA,KAAW,SAAU,IAAA,EAArB,KAAqB,CACrB,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAU,IAAG,eAAA,OAAA,IAA0B,QAAA,EAA3D,KAA2D,EAF7D,QAE6D,MAC5D,YAAA,CACD,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAA,CAClB,KAAA,KAAW,WAAY,IAAA,EAAvB,KAAuB,CACvB,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAU,IAAG,iBAAA,SAAA,IAA8B,UAAA,EAA/D,KAA+D,EAFjE,QAEiE,KAAA,MAAA,KAAA,EAdvE,IAcuE,EAhBzE,IAgByE,EArB3E;AAuBJ;;;;;;;;;;;;AAYA,CAAA;AAEA,MAAA,QAAA,SAAA,CAAA,EAAA,QAAA,KAAA,MAAA;AACA,QAAA,QAAA,OAAA,EAAA,MAAA,MAAA,CAAA;AACA,MAAA;AACA,MAAA;AAAA,UAAA,MAAA,OAAA;EAAA,SAAA,KAAA;EAAA;AACA,SAAA,CACI,OAAA,KAAA,OAAA,KAAuB,MAAM,KAAA,EAA7B;AAEJ,CAAA;AAEA,SAAA,eAAA,UAAA;AACA,MAAA,CAAA,SAAA;AACA,MAAA,QAAA,KAAA,QAAA,EAAA,QAAA;AACA,SAAA,sBAAA;AACA;AAEA,SAAA,iBAAA,UAAA;AACA,MAAA,CAAA,SAAA;AACA,MAAA,QAAA,KAAA,QAAA,EAAA,QAAA;AACA,SAAA,+BAAA;AACA;",
+  "mappings": "AAAA,OAAA,WAAA;;AAEA,SAAA,KAAA,MAAA,QAAA,YAAA;AAEA,IAAA,kBAAA,SAAA,CAAA,EAAA,MAAA,WAAA,OAAA,MAAA,MAAA;;;;;;;;;;;;;;AACA,QAAA,EAAA,MAAA,QAAA,OAAA,SAAA,aAAA,UAAA,IAAA,KAAA,IAAA;AACA,SAAA,CACI,IAAA,KAAA,OAAA,IAAA,OAAA,UACK,cAAA,CACD,MAAa,WAAA,CAAA,UAAU,EAAA,OAAA,MAAA,CAAA,GAAiB,QAAO,aAAY,MAAK,MAAA,KAAA,CAEhE,OAAc,WAAA,CAAA,UAAU,EAAA,OAAA,MAAA,CAAA,IAAmB,KAAA,EAA3C,QAA2C,CAC7C,IAAA,IAAA,CACE,KAAe,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAf,OAA2B,UAAA,OAAA,KAAA,EAArC,KAAqC,CACrC,IAAA,CACE,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,IAAY,KAAA,EAAhC,MACG,YAAA,GACE,QAAA,CACD,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAA,CAClB,KAAA,KAAW,OAAQ,IAAA,EAAnB,MACE,MAAA,EAFJ,QAEI,MACH,UAAA,CACD,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAA,CAClB,KAAA,KAAW,SAAU,IAAA,EAArB,KAAqB,CACrB,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAU,IAAG,eAAA,OAAA,IAA0B,QAAA,EAA3D,KAA2D,EAF7D,QAE6D,MAC5D,YAAA,CACD,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAA,CAClB,KAAA,KAAW,WAAY,IAAA,EAAvB,KAAuB,CACvB,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAU,IAAG,iBAAA,SAAA,IAA8B,UAAA,EAA/D,KAA+D,EAFjE,QAEiE,KAAA,MAAA,KAAA,EAdvE,IAcuE,EAhBzE,IAgByE,EArB3E;AAkCJ,CAAA;AAEA,MAAA,QAAA,SAAA,CAAA,EAAA,QAAA,KAAA,MAAA;AACA,QAAA,QAAA,OAAA,EAAA,MAAA,MAAA,CAAA;AACA,MAAA;AACA,MAAA;AAAA,UAAA,MAAA,OAAA;EAAA,SAAA,KAAA;EAAA;AACA,SAAA,CACI,OAAA,KAAA,OAAA,KAAuB,MAAM,KAAA,EAA7B;AAEJ,CAAA;AAEA,SAAA,eAAA,UAAA;AACA,MAAA,CAAA,SAAA;AACA,MAAA,QAAA,KAAA,QAAA,EAAA,QAAA;AACA,SAAA,sBAAA;AACA;AAEA,SAAA,iBAAA,UAAA;AACA,MAAA,CAAA,SAAA;AACA,MAAA,QAAA,KAAA,QAAA,EAAA,QAAA;AACA,SAAA,+BAAA;AACA;",
   "names": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/esbuild/CatCard.tsx.output.jsx b/test/fixtures/real-project/snapshots/esbuild/CatCard.tsx.output.jsx
new file mode 100644
index 0000000..bc7a10a
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/esbuild/CatCard.tsx.output.jsx
@@ -0,0 +1,41 @@
+import { observer, useSub, $, styl } from "startupjs";
+import { Div, Span, Avatar, Link } from "startupjs-ui";
+var CatCard_default = observer(({ $cat, showPhone, large, small }) => {
+  styl`
+    .avatar
+      margin-right 1u
+      &.large
+        width 12u
+        height @width
+      &.small
+        width 4u
+        height @width
+    .text.large
+      font(h6)
+
+  `;
+  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get();
+  return <Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={["avatar", { large, small }]} fileId={photoFileId} name={name} /> : <Avatar styleName={["avatar", { large, small }]}>{name}</Avatar>}<Div row><Span styleName={["text", { large }]} bold>{(number || "X") + ". "}</Span><Div><Span styleName={["text", { large }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={["text", { large }]}><Span bold>Phone:{" "}</Span>{phone}</Span> : null}{catgram ? <Span styleName={["text", { large }]}><Span bold>Catgram:{" "}</Span><Link styleName={["text", { large }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={["text", { large }]}><Span bold>Phonegram:{" "}</Span><Link styleName={["text", { large }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>;
+});
+const Photo = observer(({ fileId, name }) => {
+  const $file = useSub($.files[fileId]);
+  let url;
+  try {
+    url = $file.getUrl();
+  } catch (err) {
+  }
+  return <Avatar part='root' src={url}>{name}</Avatar>;
+});
+function getCatgramLink(username) {
+  if (!username) return;
+  if (/:\/\//.test(username)) return username;
+  return "https://catgr.am/" + username;
+}
+function getPhonegramLink(username) {
+  if (!username) return;
+  if (/:\/\//.test(username)) return username;
+  return "https://www.phonegram.com/" + username;
+}
+export {
+  CatCard_default as default
+};
diff --git a/test/fixtures/real-project/snapshots/esbuild/CatCard.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/esbuild/CatCard.tsx.output.sourcemap.json
new file mode 100644
index 0000000..aa7bfd7
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/esbuild/CatCard.tsx.output.sourcemap.json
@@ -0,0 +1,11 @@
+{
+  "version": 3,
+  "sources": [
+    "../../test/fixtures/real-project/CatCard.tsx"
+  ],
+  "sourcesContent": [
+    "import React from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n    style(lang='styl')\n      .avatar\n        margin-right 1u\n        &.large\n          width 12u\n          height @width\n        &.small\n          width 4u\n          height @width\n      .text.large\n        font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
+  ],
+  "mappings": ";AAEA,SAAA,KAAA,MAAA,QAAA,YAAA;AAEA,IAAA,kBAAA,SAAA,CAAA,EAAA,MAAA,WAAA,OAAA,MAAA,MAAA;;;;;;;;;;;;;;AACA,QAAA,EAAA,MAAA,QAAA,OAAA,SAAA,aAAA,UAAA,IAAA,KAAA,IAAA;AACA,SAAA,CACI,IAAA,KAAA,OAAA,IAAA,OAAA,UACK,cAAA,CACD,MAAa,WAAA,CAAA,UAAU,EAAA,OAAA,MAAA,CAAA,GAAiB,QAAO,aAAY,MAAK,MAAA,KAAA,CAEhE,OAAc,WAAA,CAAA,UAAU,EAAA,OAAA,MAAA,CAAA,IAAmB,KAAA,EAA3C,QAA2C,CAC7C,IAAA,IAAA,CACE,KAAe,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAf,OAA2B,UAAA,OAAA,KAAA,EAArC,KAAqC,CACrC,IAAA,CACE,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,IAAY,KAAA,EAAhC,MACG,YAAA,GACE,QAAA,CACD,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAA,CAClB,KAAA,KAAW,OAAQ,IAAA,EAAnB,MACE,MAAA,EAFJ,QAEI,MACH,UAAA,CACD,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAA,CAClB,KAAA,KAAW,SAAU,IAAA,EAArB,KAAqB,CACrB,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAU,IAAG,eAAA,OAAA,IAA0B,QAAA,EAA3D,KAA2D,EAF7D,QAE6D,MAC5D,YAAA,CACD,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAA,CAClB,KAAA,KAAW,WAAY,IAAA,EAAvB,KAAuB,CACvB,KAAU,WAAA,CAAA,QAAU,EAAA,MAAA,CAAA,GAAU,IAAG,iBAAA,SAAA,IAA8B,UAAA,EAA/D,KAA+D,EAFjE,QAEiE,KAAA,MAAA,KAAA,EAdvE,IAcuE,EAhBzE,IAgByE,EArB3E;AAkCJ,CAAA;AAEA,MAAA,QAAA,SAAA,CAAA,EAAA,QAAA,KAAA,MAAA;AACA,QAAA,QAAA,OAAA,EAAA,MAAA,MAAA,CAAA;AACA,MAAA;AACA,MAAA;AAAA,UAAA,MAAA,OAAA;EAAA,SAAA,KAAA;EAAA;AACA,SAAA,CACI,OAAA,KAAA,OAAA,KAAuB,MAAM,KAAA,EAA7B;AAEJ,CAAA;AAEA,SAAA,eAAA,UAAA;AACA,MAAA,CAAA,SAAA;AACA,MAAA,QAAA,KAAA,QAAA,EAAA,QAAA;AACA,SAAA,sBAAA;AACA;AAEA,SAAA,iBAAA,UAAA;AACA,MAAA,CAAA,SAAA;AACA,MAAA,QAAA,KAAA,QAAA,EAAA,QAAA;AACA,SAAA,+BAAA;AACA;",
+  "names": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.js.output.jsx b/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.js.output.jsx
index d6f7afa..85e5028 100644
--- a/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.js.output.jsx
@@ -26,15 +26,16 @@ var cat_profile_link_default = observer(() => {
   }} /><Stage $cat={$cat} $event={$event} /></>;
 });
 const Profile = observer(({ $cat, $event }) => {
+  styl`
+    .hackSidePadding
+      width 1u
+
+  `;
   const $showEdit = $();
   const { tablet } = useMedia();
   const excludeNumber = $event.stage.get() !== STAGES.InProgress;
   const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ["number"] } : {});
   return <><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={["hackSidePadding"]} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? "Edit cat profile" : "Edit"}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>;
-  styl`
-    .hackSidePadding
-      width 1u
-  `;
 });
 function hasContact($cat) {
   return ($cat.phone.get() || "").trim() || ($cat.catgram.get() || "").trim() || ($cat.phonegram.get() || "").trim();
diff --git a/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.js.output.sourcemap.json
index 1b12b5c..4804ed6 100644
--- a/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.js.output.sourcemap.json
@@ -4,8 +4,8 @@
     "../../test/fixtures/real-project/cat-profile-link.js"
   ],
   "sourcesContent": [
-    "import React from 'react'\nimport { pug, observer, $, useSub, styl } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n  `\n  styl`\n    .hackSidePadding\n      width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
+    "import React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n    style(lang='styl')\n      .hackSidePadding\n        width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
   ],
-  "mappings": "AAAA,OAAA,WAAA;AACA,SAAA,UAAA,GAAA,QAAA,YAAA;AACA,SAAA,OAAA,MAAA,OAAA,SAAA,QAAA,MAAA,KAAA,KAAA,UAAA,qBAAA;AACA,SAAA,uBAAA,aAAA;AACA,SAAA,aAAA;AACA,OAAA,aAAA;AACA,YAAA,YAAA;AACA,SAAA,6BAAA;AACA,SAAA,cAAA;AAEA,IAAA,2BAAA,SAAA,MAAA;AACA,QAAA,EAAA,MAAA,IAAA,sBAAA;AACA,QAAA,CAAA,IAAA,IAAA,OAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AACA,MAAA,CAAA,KAAA,QAAA,cAAA;AAEA,QAAA,UAAA,KAAA,QAAA,IAAA;AACA,QAAA,SAAA,OAAA,EAAA,OAAA,OAAA,CAAA;AAEA,WAAA,cAAA;AACA,WAAA,CACM,QAAA,MAAa,MAAA;EAEnB;AAEA,WAAA,iBAAA;AACA,WAAA,CACM,QAAA,MAAa,MAAK,QAAO,QAAA;EAE/B;AAEA,QAAA,QAAA,OAAA,KAAA,WAAA,CAAA;AAEA,SAAA,EAAA,CACI,MAAA,OACE,SAAQ;IACV,aAAA;IACA,aAAA;EACA,GAAA,EAAA,CAEA,MAAA,MAAW,MAAK,QAAO,QAAA,EAAA;AAE3B,CAAA;AAEA,MAAA,UAAA,SAAA,CAAA,EAAA,MAAA,OAAA,MAAA;AACA,QAAA,YAAA,EAAA;AACA,QAAA,EAAA,OAAA,IAAA,SAAA;AACA,QAAA,gBAAA,OAAA,MAAA,IAAA,MAAA,OAAA;AACA,QAAA,oBAAA,cAAA,uBAAA,gBAAA,EAAA,SAAA,CAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAEA,SAAA,EAAA,CACI,IAAA,IAAA,OAAA,SAAA,KAA4B,IACvB,CAAA,WAAA,IAAA,IAAA,CACD,IAAA,MAAA,QAAmB,UAAA,EAAnB,OAAmB,MAClB,CAAA,KAAA,YAAA,IAAA,IAAA,CACD,IAAA,MAAA,QAAmB,QAAA,EAAnB,OAAmB,MAClB,KAAA,WAAA,MAAA,OAAA,UAAA,CACD,IAAA,WAAA,CAAA,iBAAG,GAAA,KAAA,CAEH,OACE,QAAA,OACA,MAAK,OACL,SAAQ,MAAA,UAAA,IAAA,IAAA,IAEL,SACC,qBAEA,OAAA,EARN,QAQM,EAhBV,IAgBU,CACV,MACE,MAAA,mBACA,UAAS,WAAA,CAET,KACE,QAAO,mBACP,QAAO,MAAA,EAAA,EANX,MAMW;AAGf;;;;AAIA,CAAA;AAEA,SAAA,WAAA,MAAA;AACA,UAAA,KAAA,MAAA,IAAA,KAAA,IAAA,KAAA,MAAA,KAAA,QAAA,IAAA,KAAA,IAAA,KAAA,MAAA,KAAA,UAAA,IAAA,KAAA,IAAA,KAAA;AACA;AAEA,SAAA,gBAAA;AACA,SAAA,CACI,QAAA,QAAA,CACE,MAAA,QAAA,QAAA,CACE,KACI;;;;yEAIC,EALL,KAKK,EANP,MAMO,EAPT;AASJ;",
+  "mappings": "AAAA,OAAA,WAAA;;AAEA,SAAA,OAAA,MAAA,OAAA,SAAA,QAAA,MAAA,KAAA,KAAA,UAAA,qBAAA;AACA,SAAA,uBAAA,aAAA;AACA,SAAA,aAAA;AACA,OAAA,aAAA;AACA,YAAA,YAAA;AACA,SAAA,6BAAA;AACA,SAAA,cAAA;AAEA,IAAA,2BAAA,SAAA,MAAA;AACA,QAAA,EAAA,MAAA,IAAA,sBAAA;AACA,QAAA,CAAA,IAAA,IAAA,OAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AACA,MAAA,CAAA,KAAA,QAAA,cAAA;AAEA,QAAA,UAAA,KAAA,QAAA,IAAA;AACA,QAAA,SAAA,OAAA,EAAA,OAAA,OAAA,CAAA;AAEA,WAAA,cAAA;AACA,WAAA,CACM,QAAA,MAAa,MAAA;EAEnB;AAEA,WAAA,iBAAA;AACA,WAAA,CACM,QAAA,MAAa,MAAK,QAAO,QAAA;EAE/B;AAEA,QAAA,QAAA,OAAA,KAAA,WAAA,CAAA;AAEA,SAAA,EAAA,CACI,MAAA,OACE,SAAQ;IACV,aAAA;IACA,aAAA;EACA,GAAA,EAAA,CAEA,MAAA,MAAW,MAAK,QAAO,QAAA,EAAA;AAE3B,CAAA;AAEA,MAAA,UAAA,SAAA,CAAA,EAAA,MAAA,OAAA,MAAA;;;;;;AACA,QAAA,YAAA,EAAA;AACA,QAAA,EAAA,OAAA,IAAA,SAAA;AACA,QAAA,gBAAA,OAAA,MAAA,IAAA,MAAA,OAAA;AACA,QAAA,oBAAA,cAAA,uBAAA,gBAAA,EAAA,SAAA,CAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAEA,SAAA,EAAA,CACI,IAAA,IAAA,OAAA,SAAA,KAA4B,IACvB,CAAA,WAAA,IAAA,IAAA,CACD,IAAA,MAAA,QAAmB,UAAA,EAAnB,OAAmB,MAClB,CAAA,KAAA,YAAA,IAAA,IAAA,CACD,IAAA,MAAA,QAAmB,QAAA,EAAnB,OAAmB,MAClB,KAAA,WAAA,MAAA,OAAA,UAAA,CACD,IAAA,WAAA,CAAA,iBAAG,GAAA,KAAA,CAEH,OACE,QAAA,OACA,MAAK,OACL,SAAQ,MAAA,UAAA,IAAA,IAAA,IAEL,SACC,qBAEA,OAAA,EARN,QAQM,EAhBV,IAgBU,CACV,MACE,MAAA,mBACA,UAAS,WAAA,CAET,KACE,QAAO,mBACP,QAAO,MAAA,EAAA,EANX,MAMW;AAMf,CAAA;AAEA,SAAA,WAAA,MAAA;AACA,UAAA,KAAA,MAAA,IAAA,KAAA,IAAA,KAAA,MAAA,KAAA,QAAA,IAAA,KAAA,IAAA,KAAA,MAAA,KAAA,UAAA,IAAA,KAAA,IAAA,KAAA;AACA;AAEA,SAAA,gBAAA;AACA,SAAA,CACI,QAAA,QAAA,CACE,MAAA,QAAA,QAAA,CACE,KACI;;;;yEAIC,EALL,KAKK,EANP,MAMO,EAPT;AASJ;",
   "names": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.tsx.output.jsx b/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.tsx.output.jsx
new file mode 100644
index 0000000..322cdbc
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.tsx.output.jsx
@@ -0,0 +1,51 @@
+import { observer, $, useSub, styl } from "startupjs";
+import { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from "startupjs-ui";
+import { useGlobalSearchParams, Stack } from "expo-router";
+import { faPen } from "@fortawesome/free-solid-svg-icons/faPen";
+import CatCard from "@/components/CatCard";
+import * as stages from "@/components/stages";
+import { CAT_PROFILE_EDIT_FORM } from "@/model/cats/schema";
+import { STAGES } from "@/model/events/schema";
+var cat_profile_link_default = observer(() => {
+  const { token } = useGlobalSearchParams();
+  const [$cat] = useSub($.cats, { token });
+  if (!$cat) return renderExpired();
+  const eventId = $cat.eventId.get();
+  const $event = useSub($.events[eventId]);
+  function renderTitle() {
+    return <CatCard $cat={$cat} />;
+  }
+  function renderSettings() {
+    return <Profile $cat={$cat} $event={$event} />;
+  }
+  const Stage = stages[$cat.getMyStage()];
+  return <><Stack.Screen options={{
+    headerTitle: renderTitle,
+    headerRight: renderSettings
+  }} /><Stage $cat={$cat} $event={$event} /></>;
+});
+const Profile = observer(({ $cat, $event }) => {
+  styl`
+    .hackSidePadding
+      width 1u
+
+  `;
+  const $showEdit = $();
+  const { tablet } = useMedia();
+  const excludeNumber = $event.stage.get() !== STAGES.InProgress;
+  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ["number"] } : {});
+  return <><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={["hackSidePadding"]} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? "Edit cat profile" : "Edit"}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>;
+});
+function hasContact($cat) {
+  return ($cat.phone.get() || "").trim() || ($cat.catgram.get() || "").trim() || ($cat.phonegram.get() || "").trim();
+}
+function renderExpired() {
+  return <Content padding><Alert variant='error'><Span>Cat profile link is incorrect or already expired.
+
+Your cat meetup profile link is only valid for a limited period of time.
+
+If you believe this is an error, please contact the cat meetup organizer.</Span></Alert></Content>;
+}
+export {
+  cat_profile_link_default as default
+};
diff --git a/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.tsx.output.sourcemap.json
new file mode 100644
index 0000000..abc4292
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/esbuild/cat-profile-link.tsx.output.sourcemap.json
@@ -0,0 +1,11 @@
+{
+  "version": 3,
+  "sources": [
+    "../../test/fixtures/real-project/cat-profile-link.tsx"
+  ],
+  "sourcesContent": [
+    "import React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n    style(lang='styl')\n      .hackSidePadding\n        width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
+  ],
+  "mappings": ";AAEA,SAAA,OAAA,MAAA,OAAA,SAAA,QAAA,MAAA,KAAA,KAAA,UAAA,qBAAA;AACA,SAAA,uBAAA,aAAA;AACA,SAAA,aAAA;AACA,OAAA,aAAA;AACA,YAAA,YAAA;AACA,SAAA,6BAAA;AACA,SAAA,cAAA;AAEA,IAAA,2BAAA,SAAA,MAAA;AACA,QAAA,EAAA,MAAA,IAAA,sBAAA;AACA,QAAA,CAAA,IAAA,IAAA,OAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AACA,MAAA,CAAA,KAAA,QAAA,cAAA;AAEA,QAAA,UAAA,KAAA,QAAA,IAAA;AACA,QAAA,SAAA,OAAA,EAAA,OAAA,OAAA,CAAA;AAEA,WAAA,cAAA;AACA,WAAA,CACM,QAAA,MAAa,MAAA;EAEnB;AAEA,WAAA,iBAAA;AACA,WAAA,CACM,QAAA,MAAa,MAAK,QAAO,QAAA;EAE/B;AAEA,QAAA,QAAA,OAAA,KAAA,WAAA,CAAA;AAEA,SAAA,EAAA,CACI,MAAA,OACE,SAAQ;IACV,aAAA;IACA,aAAA;EACA,GAAA,EAAA,CAEA,MAAA,MAAW,MAAK,QAAO,QAAA,EAAA;AAE3B,CAAA;AAEA,MAAA,UAAA,SAAA,CAAA,EAAA,MAAA,OAAA,MAAA;;;;;;AACA,QAAA,YAAA,EAAA;AACA,QAAA,EAAA,OAAA,IAAA,SAAA;AACA,QAAA,gBAAA,OAAA,MAAA,IAAA,MAAA,OAAA;AACA,QAAA,oBAAA,cAAA,uBAAA,gBAAA,EAAA,SAAA,CAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAEA,SAAA,EAAA,CACI,IAAA,IAAA,OAAA,SAAA,KAA4B,IACvB,CAAA,WAAA,IAAA,IAAA,CACD,IAAA,MAAA,QAAmB,UAAA,EAAnB,OAAmB,MAClB,CAAA,KAAA,YAAA,IAAA,IAAA,CACD,IAAA,MAAA,QAAmB,QAAA,EAAnB,OAAmB,MAClB,KAAA,WAAA,MAAA,OAAA,UAAA,CACD,IAAA,WAAA,CAAA,iBAAG,GAAA,KAAA,CAEH,OACE,QAAA,OACA,MAAK,OACL,SAAQ,MAAA,UAAA,IAAA,IAAA,IAEL,SACC,qBAEA,OAAA,EARN,QAQM,EAhBV,IAgBU,CACV,MACE,MAAA,mBACA,UAAS,WAAA,CAET,KACE,QAAO,mBACP,QAAO,MAAA,EAAA,EANX,MAMW;AAMf,CAAA;AAEA,SAAA,WAAA,MAAA;AACA,UAAA,KAAA,MAAA,IAAA,KAAA,IAAA,KAAA,MAAA,KAAA,QAAA,IAAA,KAAA,IAAA,KAAA,MAAA,KAAA,UAAA,IAAA,KAAA,IAAA,KAAA;AACA;AAEA,SAAA,gBAAA;AACA,SAAA,CACI,QAAA,QAAA,CACE,MAAA,QAAA,QAAA,CACE,KACI;;;;yEAIC,EALL,KAKK,EANP,MAMO,EAPT;AASJ;",
+  "names": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/esbuild/event-tabs-breed.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/esbuild/event-tabs-breed.js.output.sourcemap.json
index c08d02a..22d034f 100644
--- a/test/fixtures/real-project/snapshots/esbuild/event-tabs-breed.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/esbuild/event-tabs-breed.js.output.sourcemap.json
@@ -6,6 +6,6 @@
   "sourcesContent": [
     "import React, { useState } from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport {\n  Link, Item, ScrollView, Form, useFormProps, Alert,\n  Content, Tag, Br, Button, Modal, Div, confirm,\n  useFormFields$, useValidate\n} from 'startupjs-ui'\nimport { useGlobalSearchParams } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faLink } from '@fortawesome/free-solid-svg-icons/faLink'\nimport CatCard from '@/components/CatCard'\nimport { CAT_FORM } from '@/model/cats/schema'\n\nexport default observer(({ breed }) => {\n  const { eventId } = useGlobalSearchParams()\n  const [$selected, set$selected] = useState()\n  const $new = $()\n  const $showModal = $()\n  const $mode = $()\n  const $fields = useFormFields$(CAT_FORM)\n  const validate = useValidate()\n\n  function showCreate () {\n    $new.set({ breed })\n    $fields.breed.disabled.set(true)\n    set$selected(() => $new)\n    $mode.set('new')\n    $showModal.set(true)\n  }\n\n  function showEdit ($cat) {\n    $fields.breed.disabled.del()\n    set$selected(() => $cat)\n    $mode.set('edit')\n    $showModal.set(true)\n  }\n\n  function cancel () {\n    if (!$showModal.get()) return\n    $showModal.del()\n    $mode.del()\n  }\n\n  async function create () {\n    if (!validate()) return\n    await $.cats.addNew({\n      ...$new.getDeepCopy(),\n      eventId\n    })\n    cancel()\n  }\n\n  async function deleteCat () {\n    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return\n    await $selected.del()\n    cancel()\n  }\n\n  return pug`\n    ScrollView(full)\n      Content(full pure)\n        CatsList(eventId=eventId onEdit=showEdit breed=breed)\n    Content(padding=1)\n      Button(onPress=showCreate) Add new #{breed}\n    Modal(\n      title=$mode.get() === 'new' ? 'Create cat' : 'Edit cat'\n      $visible=$showModal\n      onDismiss=cancel\n    )\n      - const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic')\n      Form(\n        key=$selected?.getId() || 'NEW'\n        $fields=$fields\n        $value=$selected\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n        customInputs={\n          likes: SelectLikesInput\n        }\n        validate=validate\n      )\n      Br\n      if $mode.get() === 'new'\n        Div(align='right' row)\n          Button(onPress=cancel) Cancel\n          Button(disabled=validate.hasErrors pushed variant='flat' color='primary' onPress=create) Create\n      else if $mode.get() === 'edit'\n        Div(align='right' row)\n          Button(color='error' onPress=deleteCat) Delete\n  `\n})\n\nconst CatsList = observer(({ onEdit, breed, eventId }) => {\n  if (!eventId) return pug`Alert(variant='error') No event specified`\n  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      Item(key=$cat.getId())\n        CatCard($cat=$cat)\n        Item.Right\n          Div(vAlign='center' row gap=1)\n            if !hasContact($cat)\n              Tag(color='error') No contact\n            if !$cat.photoFileId.get()\n              Tag(color='error') No photo\n            Button(variant='text' icon=faPen onPress=() => onEdit($cat) tooltip='Edit')\n            Link(href='/events/' + eventId + '/matches/' + $cat.getId())\n              Button(variant='text' icon=faHeart tooltip='Matches')\n            Link(href='/cats/' + $cat.token.get())\n              Button(variant='text' icon=faLink tooltip='Cat profile link') Link\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nconst SelectLikesInput = observer(({ $value, ...props }) => {\n  const { oppositeBreed, eventId } = { ...useFormProps(), ...props }\n  return pug`\n    if oppositeBreed\n      SelectLikes(\n        $likes=$value\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n      )\n    else\n      Alert(variant='warning') Select breed to choose likes\n  `\n})\n\nconst SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {\n  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      - const catId = $cat.getId()\n      Item.item(\n        key=catId\n        styleName={ selected: $likes[catId].get() }\n        onPress=() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)\n      )\n        CatCard($cat=$cat small)\n    else\n      Alert(variant='info') No cats with selected breed yet\n    style(lang='styl')\n      .item\n        border-radius 1u\n        &.selected\n          // FIXME: We can't use color var(--color-text-success-strong) here\n          background-color var(--color-text-success-strong)\n  `\n})\n"
   ],
-  "mappings": "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",
+  "mappings": "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",
   "names": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/esbuild/event-tabs-breed.tsx.output.jsx b/test/fixtures/real-project/snapshots/esbuild/event-tabs-breed.tsx.output.jsx
new file mode 100644
index 0000000..9aacd95
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/esbuild/event-tabs-breed.tsx.output.jsx
@@ -0,0 +1,113 @@
+import { useState } from "react";
+import { observer, useSub, $, styl } from "startupjs";
+import {
+  Link,
+  Item,
+  ScrollView,
+  Form,
+  useFormProps,
+  Alert,
+  Content,
+  Tag,
+  Br,
+  Button,
+  Modal,
+  Div,
+  confirm,
+  useFormFields$,
+  useValidate
+} from "startupjs-ui";
+import { useGlobalSearchParams } from "expo-router";
+import { faPen } from "@fortawesome/free-solid-svg-icons/faPen";
+import { faHeart } from "@fortawesome/free-solid-svg-icons/faHeart";
+import { faLink } from "@fortawesome/free-solid-svg-icons/faLink";
+import CatCard from "@/components/CatCard";
+import { CAT_FORM } from "@/model/cats/schema";
+var event_tabs_breed_default = observer(({ breed }) => {
+  const { eventId } = useGlobalSearchParams();
+  const [$selected, set$selected] = useState();
+  const $new = $();
+  const $showModal = $();
+  const $mode = $();
+  const $fields = useFormFields$(CAT_FORM);
+  const validate = useValidate();
+  function showCreate() {
+    $new.set({ breed });
+    $fields.breed.disabled.set(true);
+    set$selected(() => $new);
+    $mode.set("new");
+    $showModal.set(true);
+  }
+  function showEdit($cat) {
+    $fields.breed.disabled.del();
+    set$selected(() => $cat);
+    $mode.set("edit");
+    $showModal.set(true);
+  }
+  function cancel() {
+    if (!$showModal.get()) return;
+    $showModal.del();
+    $mode.del();
+  }
+  async function create() {
+    if (!validate()) return;
+    await $.cats.addNew({
+      ...$new.getDeepCopy(),
+      eventId
+    });
+    cancel();
+  }
+  async function deleteCat() {
+    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return;
+    await $selected.del();
+    cancel();
+  }
+  return <><ScrollView full><Content full pure><CatsList eventId={eventId} onEdit={showEdit} breed={breed} /></Content></ScrollView><Content padding={1}><Button onPress={showCreate}>Add new {breed}</Button></Content><Modal title={$mode.get() === "new" ? "Create cat" : "Edit cat"} $visible={$showModal} onDismiss={cancel}>{(() => {
+    const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === "domestic" ? "wild" : "domestic");
+    return <><Form key={$selected?.getId() || "NEW"} $fields={$fields} $value={$selected} oppositeBreed={oppositeBreed} eventId={eventId} customInputs={{
+      likes: SelectLikesInput
+    }} validate={validate} /><Br />{$mode.get() === "new" ? <Div align='right' row><Button onPress={cancel}>Cancel</Button><Button disabled={validate.hasErrors} pushed variant='flat' color='primary' onPress={create}>Create</Button></Div> : $mode.get() === "edit" ? <Div align='right' row><Button color='error' onPress={deleteCat}>Delete</Button></Div> : null}</>;
+  })()}</Modal></>;
+});
+const CatsList = observer(({ onEdit, breed, eventId }) => {
+  if (!eventId) return <Alert variant='error'>No event specified</Alert>;
+  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } });
+  return (() => {
+    const __pugEachResult = [];
+    for (const $cat of $cats) {
+      __pugEachResult.push(<Item key={$cat.getId()}><CatCard $cat={$cat} /><Item.Right><Div vAlign='center' row gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}<Button variant='text' icon={faPen} onPress={() => onEdit($cat)} tooltip='Edit' /><Link href={"/events/" + eventId + "/matches/" + $cat.getId()}><Button variant='text' icon={faHeart} tooltip='Matches' /></Link><Link href={"/cats/" + $cat.token.get()}><Button variant='text' icon={faLink} tooltip='Cat profile link'>Link</Button></Link></Div></Item.Right></Item>);
+    }
+    return __pugEachResult;
+  })();
+});
+function hasContact($cat) {
+  return ($cat.phone.get() || "").trim() || ($cat.catgram.get() || "").trim() || ($cat.phonegram.get() || "").trim();
+}
+const SelectLikesInput = observer(({ $value, ...props }) => {
+  const { oppositeBreed, eventId } = { ...useFormProps(), ...props };
+  return oppositeBreed ? <SelectLikes $likes={$value} oppositeBreed={oppositeBreed} eventId={eventId} /> : <Alert variant='warning'>Select breed to choose likes</Alert>;
+});
+const SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {
+  styl`
+    .item
+      border-radius 1u
+      &.selected
+        // FIXME: We can't use color var(--color-text-success-strong) here
+        background-color var(--color-text-success-strong)
+
+  `;
+  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } });
+  return (() => {
+    const __pugEachResult = [];
+    for (const $cat of $cats) {
+      __pugEachResult.push((() => {
+        const catId = $cat.getId();
+        return <Item styleName={["item", { selected: $likes[catId].get() }]} key={catId} onPress={() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)}><CatCard $cat={$cat} small /></Item>;
+      })());
+    }
+    return __pugEachResult.length ? __pugEachResult : <Alert variant='info'>No cats with selected breed yet</Alert>;
+  })();
+});
+export {
+  event_tabs_breed_default as default
+};
diff --git a/test/fixtures/real-project/snapshots/esbuild/event-tabs-breed.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/esbuild/event-tabs-breed.tsx.output.sourcemap.json
new file mode 100644
index 0000000..cadcd5d
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/esbuild/event-tabs-breed.tsx.output.sourcemap.json
@@ -0,0 +1,11 @@
+{
+  "version": 3,
+  "sources": [
+    "../../test/fixtures/real-project/event-tabs-breed.tsx"
+  ],
+  "sourcesContent": [
+    "import React, { useState } from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport {\n  Link, Item, ScrollView, Form, useFormProps, Alert,\n  Content, Tag, Br, Button, Modal, Div, confirm,\n  useFormFields$, useValidate\n} from 'startupjs-ui'\nimport { useGlobalSearchParams } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faLink } from '@fortawesome/free-solid-svg-icons/faLink'\nimport CatCard from '@/components/CatCard'\nimport { CAT_FORM } from '@/model/cats/schema'\n\nexport default observer(({ breed }) => {\n  const { eventId } = useGlobalSearchParams()\n  const [$selected, set$selected] = useState()\n  const $new = $()\n  const $showModal = $()\n  const $mode = $()\n  const $fields = useFormFields$(CAT_FORM)\n  const validate = useValidate()\n\n  function showCreate () {\n    $new.set({ breed })\n    $fields.breed.disabled.set(true)\n    set$selected(() => $new)\n    $mode.set('new')\n    $showModal.set(true)\n  }\n\n  function showEdit ($cat) {\n    $fields.breed.disabled.del()\n    set$selected(() => $cat)\n    $mode.set('edit')\n    $showModal.set(true)\n  }\n\n  function cancel () {\n    if (!$showModal.get()) return\n    $showModal.del()\n    $mode.del()\n  }\n\n  async function create () {\n    if (!validate()) return\n    await $.cats.addNew({\n      ...$new.getDeepCopy(),\n      eventId\n    })\n    cancel()\n  }\n\n  async function deleteCat () {\n    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return\n    await $selected.del()\n    cancel()\n  }\n\n  return pug`\n    ScrollView(full)\n      Content(full pure)\n        CatsList(eventId=eventId onEdit=showEdit breed=breed)\n    Content(padding=1)\n      Button(onPress=showCreate) Add new #{breed}\n    Modal(\n      title=$mode.get() === 'new' ? 'Create cat' : 'Edit cat'\n      $visible=$showModal\n      onDismiss=cancel\n    )\n      - const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic')\n      Form(\n        key=$selected?.getId() || 'NEW'\n        $fields=$fields\n        $value=$selected\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n        customInputs={\n          likes: SelectLikesInput\n        }\n        validate=validate\n      )\n      Br\n      if $mode.get() === 'new'\n        Div(align='right' row)\n          Button(onPress=cancel) Cancel\n          Button(disabled=validate.hasErrors pushed variant='flat' color='primary' onPress=create) Create\n      else if $mode.get() === 'edit'\n        Div(align='right' row)\n          Button(color='error' onPress=deleteCat) Delete\n  `\n})\n\nconst CatsList = observer(({ onEdit, breed, eventId }) => {\n  if (!eventId) return pug`Alert(variant='error') No event specified`\n  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      Item(key=$cat.getId())\n        CatCard($cat=$cat)\n        Item.Right\n          Div(vAlign='center' row gap=1)\n            if !hasContact($cat)\n              Tag(color='error') No contact\n            if !$cat.photoFileId.get()\n              Tag(color='error') No photo\n            Button(variant='text' icon=faPen onPress=() => onEdit($cat) tooltip='Edit')\n            Link(href='/events/' + eventId + '/matches/' + $cat.getId())\n              Button(variant='text' icon=faHeart tooltip='Matches')\n            Link(href='/cats/' + $cat.token.get())\n              Button(variant='text' icon=faLink tooltip='Cat profile link') Link\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nconst SelectLikesInput = observer(({ $value, ...props }) => {\n  const { oppositeBreed, eventId } = { ...useFormProps(), ...props }\n  return pug`\n    if oppositeBreed\n      SelectLikes(\n        $likes=$value\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n      )\n    else\n      Alert(variant='warning') Select breed to choose likes\n  `\n})\n\nconst SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {\n  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      - const catId = $cat.getId()\n      Item.item(\n        key=catId\n        styleName={ selected: $likes[catId].get() }\n        onPress=() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)\n      )\n        CatCard($cat=$cat small)\n    else\n      Alert(variant='info') No cats with selected breed yet\n    style(lang='styl')\n      .item\n        border-radius 1u\n        &.selected\n          // FIXME: We can't use color var(--color-text-success-strong) here\n          background-color var(--color-text-success-strong)\n  `\n})\n"
+  ],
+  "mappings": "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",
+  "names": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.js.output.jsx b/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.js.output.jsx
index aff6a78..48fbd78 100644
--- a/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.js.output.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { observer, styl, $, useSub } from "startupjs";
+import { observer, $, useSub, styl } from "startupjs";
 import { useColors, Icon, Form, Modal, Button } from "startupjs-ui";
 import { Tabs, useLocalSearchParams, Stack } from "expo-router";
 import { faVenus as faWildBadge } from "@fortawesome/free-solid-svg-icons/faVenus";
@@ -9,6 +9,16 @@ import { faPen } from "@fortawesome/free-solid-svg-icons/faPen";
 import { faToolbox } from "@fortawesome/free-solid-svg-icons/faToolbox";
 import { EVENT_FORM } from "@/model/events/schema";
 var event_tabs_layout_default = observer(function TabLayout() {
+  styl`
+    +tablet()
+      .screen
+        &:part(tabBar)
+          order -1
+          background-color transparent
+          border-bottom-width 1px
+          border-bottom-color rgba(0, 0, 0, 0.1)
+
+  `;
   const getColor = useColors();
   const { eventId } = useLocalSearchParams();
   const $event = useSub($.events[eventId]);
@@ -37,15 +47,6 @@ var event_tabs_layout_default = observer(function TabLayout() {
     title: "Dev Only",
     tabBarIcon: renderTestIcon
   }} /></Tabs></>;
-  styl`
-    +tablet()
-      .screen
-        &:part(tabBar)
-          order -1
-          background-color transparent
-          border-bottom-width 1px
-          border-bottom-color rgba(0, 0, 0, 0.1)
-  `;
 });
 function renderEditEvent({ $event }) {
   return <EditEvent $event={$event} />;
diff --git a/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.js.output.sourcemap.json
index cebf10e..c770eb4 100644
--- a/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.js.output.sourcemap.json
@@ -4,8 +4,8 @@
     "../../test/fixtures/real-project/event-tabs-layout.js"
   ],
   "sourcesContent": [
-    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, styl, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n  `\n  styl`\n    +tablet()\n      .screen\n        &:part(tabBar)\n          order -1\n          background-color transparent\n          border-bottom-width 1px\n          border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
+    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n    style(lang='styl')\n      +tablet()\n        .screen\n          &:part(tabBar)\n            order -1\n            background-color transparent\n            border-bottom-width 1px\n            border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
   ],
-  "mappings": "AACA,OAAA,WAAA;AACA,SAAA,UAAA,MAAA,GAAA,cAAA;AACA,SAAA,WAAA,MAAA,MAAA,OAAA,cAAA;AACA,SAAA,MAAA,sBAAA,aAAA;AACA,SAAA,WAAA,mBAAA;AACA,SAAA,UAAA,uBAAA;AACA,SAAA,eAAA;AACA,SAAA,aAAA;AACA,SAAA,iBAAA;AACA,SAAA,kBAAA;AAEA,IAAA,4BAAA,SAAA,SAAA,YAAA;AACA,QAAA,WAAA,UAAA;AACA,QAAA,EAAA,QAAA,IAAA,qBAAA;AACA,QAAA,SAAA,OAAA,EAAA,OAAA,OAAA,CAAA;AACA,MAAA,CAAA,OAAA,IAAA,EAAA,OAAA,MAAA,eAAA;AAKA,SAAA,EAAA,CACI,MAAA,OACE,SAAQ;IACV,OAAA,OAAA,KAAA,IAAA;IACA,aAAA,MAAA,gBAAA,EAAA,OAAA,CAAA;EACA,GAAA,EAAA,CAEA,KACE,OAAM,OAAA,KAAA,IAAA,GACN,eAAc;IAChB,GAAA,KAAA,QAAA;IACA,uBAAA,SAAA,SAAA;IACA,6BAAA;IACA,aAAA;IACA,aAAA,OAAA,KAAA,IAAA;EACA,GAAA,CAEE,KAAA,OACE,KAAA,QACA,SAAQ;IACZ,OAAA;IACA,YAAA;EACA,GAAA,EAAA,CAEE,KAAA,OACE,KAAA,SACA,SAAQ;IACZ,MAAA;EACA,GAAA,EAAA,CAEE,KAAA,OACE,KAAA,WACA,SAAQ;IACZ,OAAA;IACA,YAAA;EACA,GAAA,EAAA,CAEE,KAAA,OACE,KAAA,OACA,SAAQ;IACZ,OAAA;IACA,YAAA;EACA,GAAA,EAAA,CAEE,KAAA,OACE,KAAA,OACA,SAAQ;IACZ,OAAA;IACA,YAAA;EACA,GAAA,EAAA,EA1CA,KA0CA;AAGJ;;;;;;;;;AASA,CAAA;AAEA,SAAA,gBAAA,EAAA,OAAA,GAAA;AACA,SAAA,CACI,UAAA,QAAiB,QAAA;AAErB;AAEA,MAAA,YAAA,SAAA,CAAA,EAAA,OAAA,MAAA;AACA,QAAA,aAAA,EAAA;AACA,SAAA,EAAA,CACI,OAAA,SAAe,MAAA,WAAA,IAAA,IAAA,GAA2B,QAAA,OAAA,MAAoB,OAAO,oBAAA,EAArE,OAAqE,CACrE,MACE,MAAA,kBACA,UAAS,YAAA,CAET,KACE,QAAO,QACP,QAAO,YAAA,EAAA,EANX,MAMW;AAGf,CAAA;AAEA,SAAA,eAAA,EAAA,OAAA,KAAA,GAAA;AACA,SAAA,CACI,KAAA,MAAU,aAAY,OAAM,EAAA,OAAA,OAAA,MAAA,QAAA,KAAA,GAAA;AAEhC;AAEA,SAAA,mBAAA,EAAA,OAAA,KAAA,GAAA;AACA,SAAA,CACI,KAAA,MAAU,iBAAgB,OAAM,EAAA,OAAA,OAAA,MAAA,QAAA,KAAA,GAAA;AAEpC;AAEA,SAAA,eAAA,EAAA,OAAA,KAAA,GAAA;AACA,SAAA,CACI,KAAA,MAAU,SAAQ,OAAM,EAAA,OAAA,OAAA,MAAA,QAAA,KAAA,GAAA;AAE5B;AAEA,SAAA,eAAA,EAAA,OAAA,KAAA,GAAA;AACA,SAAA,CACI,KAAA,MAAU,WAAU,OAAM,EAAA,OAAA,OAAA,MAAA,QAAA,KAAA,GAAA;AAE9B;",
+  "mappings": "AACA,OAAA,WAAA;;AAEA,SAAA,WAAA,MAAA,MAAA,OAAA,cAAA;AACA,SAAA,MAAA,sBAAA,aAAA;AACA,SAAA,WAAA,mBAAA;AACA,SAAA,UAAA,uBAAA;AACA,SAAA,eAAA;AACA,SAAA,aAAA;AACA,SAAA,iBAAA;AACA,SAAA,kBAAA;AAEA,IAAA,4BAAA,SAAA,SAAA,YAAA;;;;;;;;;;;AACA,QAAA,WAAA,UAAA;AACA,QAAA,EAAA,QAAA,IAAA,qBAAA;AACA,QAAA,SAAA,OAAA,EAAA,OAAA,OAAA,CAAA;AACA,MAAA,CAAA,OAAA,IAAA,EAAA,OAAA,MAAA,eAAA;AAKA,SAAA,EAAA,CACI,MAAA,OACE,SAAQ;IACV,OAAA,OAAA,KAAA,IAAA;IACA,aAAA,MAAA,gBAAA,EAAA,OAAA,CAAA;EACA,GAAA,EAAA,CAEA,KACE,OAAM,OAAA,KAAA,IAAA,GACN,eAAc;IAChB,GAAA,KAAA,QAAA;IACA,uBAAA,SAAA,SAAA;IACA,6BAAA;IACA,aAAA;IACA,aAAA,OAAA,KAAA,IAAA;EACA,GAAA,CAEE,KAAA,OACE,KAAA,QACA,SAAQ;IACZ,OAAA;IACA,YAAA;EACA,GAAA,EAAA,CAEE,KAAA,OACE,KAAA,SACA,SAAQ;IACZ,MAAA;EACA,GAAA,EAAA,CAEE,KAAA,OACE,KAAA,WACA,SAAQ;IACZ,OAAA;IACA,YAAA;EACA,GAAA,EAAA,CAEE,KAAA,OACE,KAAA,OACA,SAAQ;IACZ,OAAA;IACA,YAAA;EACA,GAAA,EAAA,CAEE,KAAA,OACE,KAAA,OACA,SAAQ;IACZ,OAAA;IACA,YAAA;EACA,GAAA,EAAA,EA1CA,KA0CA;AAWJ,CAAA;AAEA,SAAA,gBAAA,EAAA,OAAA,GAAA;AACA,SAAA,CACI,UAAA,QAAiB,QAAA;AAErB;AAEA,MAAA,YAAA,SAAA,CAAA,EAAA,OAAA,MAAA;AACA,QAAA,aAAA,EAAA;AACA,SAAA,EAAA,CACI,OAAA,SAAe,MAAA,WAAA,IAAA,IAAA,GAA2B,QAAA,OAAA,MAAoB,OAAO,oBAAA,EAArE,OAAqE,CACrE,MACE,MAAA,kBACA,UAAS,YAAA,CAET,KACE,QAAO,QACP,QAAO,YAAA,EAAA,EANX,MAMW;AAGf,CAAA;AAEA,SAAA,eAAA,EAAA,OAAA,KAAA,GAAA;AACA,SAAA,CACI,KAAA,MAAU,aAAY,OAAM,EAAA,OAAA,OAAA,MAAA,QAAA,KAAA,GAAA;AAEhC;AAEA,SAAA,mBAAA,EAAA,OAAA,KAAA,GAAA;AACA,SAAA,CACI,KAAA,MAAU,iBAAgB,OAAM,EAAA,OAAA,OAAA,MAAA,QAAA,KAAA,GAAA;AAEpC;AAEA,SAAA,eAAA,EAAA,OAAA,KAAA,GAAA;AACA,SAAA,CACI,KAAA,MAAU,SAAQ,OAAM,EAAA,OAAA,OAAA,MAAA,QAAA,KAAA,GAAA;AAE5B;AAEA,SAAA,eAAA,EAAA,OAAA,KAAA,GAAA;AACA,SAAA,CACI,KAAA,MAAU,WAAU,OAAM,EAAA,OAAA,OAAA,MAAA,QAAA,KAAA,GAAA;AAE9B;",
   "names": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.tsx.output.jsx b/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.tsx.output.jsx
new file mode 100644
index 0000000..576348c
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.tsx.output.jsx
@@ -0,0 +1,71 @@
+import { observer, $, useSub, styl } from "startupjs";
+import { useColors, Icon, Form, Modal, Button } from "startupjs-ui";
+import { Tabs, useLocalSearchParams, Stack } from "expo-router";
+import { faVenus as faWildBadge } from "@fortawesome/free-solid-svg-icons/faVenus";
+import { faMars as faDomesticBadge } from "@fortawesome/free-solid-svg-icons/faMars";
+import { faHeart } from "@fortawesome/free-solid-svg-icons/faHeart";
+import { faPen } from "@fortawesome/free-solid-svg-icons/faPen";
+import { faToolbox } from "@fortawesome/free-solid-svg-icons/faToolbox";
+import { EVENT_FORM } from "@/model/events/schema";
+var event_tabs_layout_default = observer(function TabLayout() {
+  styl`
+    +tablet()
+      .screen
+        &:part(tabBar)
+          order -1
+          background-color transparent
+          border-bottom-width 1px
+          border-bottom-color rgba(0, 0, 0, 0.1)
+
+  `;
+  const getColor = useColors();
+  const { eventId } = useLocalSearchParams();
+  const $event = useSub($.events[eventId]);
+  if (!$event.get()) throw Error("No such event");
+  return <><Stack.Screen options={{
+    title: $event.name.get(),
+    headerRight: () => renderEditEvent({ $event })
+  }} /><Tabs title={$event.name.get()} screenOptions={{
+    ...styl("screen"),
+    tabBarActiveTintColor: getColor("primary"),
+    tabBarActiveBackgroundColor: "rgba(255, 255, 255, 0.5)",
+    headerShown: false,
+    headerTitle: $event.name.get()
+  }}><Tabs.Screen name='index' options={{
+    title: "Dashboard",
+    tabBarIcon: renderHomeIcon
+  }} /><Tabs.Screen name='-breed' options={{
+    href: null
+  }} /><Tabs.Screen name='domestic' options={{
+    title: "Domestic Cats",
+    tabBarIcon: renderDomesticIcon
+  }} /><Tabs.Screen name='wild' options={{
+    title: "Wild Cats",
+    tabBarIcon: renderWildIcon
+  }} /><Tabs.Screen name='test' options={{
+    title: "Dev Only",
+    tabBarIcon: renderTestIcon
+  }} /></Tabs></>;
+});
+function renderEditEvent({ $event }) {
+  return <EditEvent $event={$event} />;
+}
+const EditEvent = observer(({ $event }) => {
+  const $showModal = $();
+  return <><Button onPress={() => $showModal.set(true)} variant='text' icon={faPen}>Edit this cat meetup</Button><Modal title='Edit cat meetup' $visible={$showModal}><Form $value={$event} fields={EVENT_FORM} /></Modal></>;
+});
+function renderWildIcon({ color, size }) {
+  return <Icon icon={faWildBadge} style={{ color, width: size, height: size }} />;
+}
+function renderDomesticIcon({ color, size }) {
+  return <Icon icon={faDomesticBadge} style={{ color, width: size, height: size }} />;
+}
+function renderHomeIcon({ color, size }) {
+  return <Icon icon={faHeart} style={{ color, width: size, height: size }} />;
+}
+function renderTestIcon({ color, size }) {
+  return <Icon icon={faToolbox} style={{ color, width: size, height: size }} />;
+}
+export {
+  event_tabs_layout_default as default
+};
diff --git a/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.tsx.output.sourcemap.json
new file mode 100644
index 0000000..b017ad1
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/esbuild/event-tabs-layout.tsx.output.sourcemap.json
@@ -0,0 +1,11 @@
+{
+  "version": 3,
+  "sources": [
+    "../../test/fixtures/real-project/event-tabs-layout.tsx"
+  ],
+  "sourcesContent": [
+    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n    style(lang='styl')\n      +tablet()\n        .screen\n          &:part(tabBar)\n            order -1\n            background-color transparent\n            border-bottom-width 1px\n            border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
+  ],
+  "mappings": ";AAGA,SAAA,WAAA,MAAA,MAAA,OAAA,cAAA;AACA,SAAA,MAAA,sBAAA,aAAA;AACA,SAAA,WAAA,mBAAA;AACA,SAAA,UAAA,uBAAA;AACA,SAAA,eAAA;AACA,SAAA,aAAA;AACA,SAAA,iBAAA;AACA,SAAA,kBAAA;AAEA,IAAA,4BAAA,SAAA,SAAA,YAAA;;;;;;;;;;;AACA,QAAA,WAAA,UAAA;AACA,QAAA,EAAA,QAAA,IAAA,qBAAA;AACA,QAAA,SAAA,OAAA,EAAA,OAAA,OAAA,CAAA;AACA,MAAA,CAAA,OAAA,IAAA,EAAA,OAAA,MAAA,eAAA;AAKA,SAAA,EAAA,CACI,MAAA,OACE,SAAQ;IACV,OAAA,OAAA,KAAA,IAAA;IACA,aAAA,MAAA,gBAAA,EAAA,OAAA,CAAA;EACA,GAAA,EAAA,CAEA,KACE,OAAM,OAAA,KAAA,IAAA,GACN,eAAc;IAChB,GAAA,KAAA,QAAA;IACA,uBAAA,SAAA,SAAA;IACA,6BAAA;IACA,aAAA;IACA,aAAA,OAAA,KAAA,IAAA;EACA,GAAA,CAEE,KAAA,OACE,KAAA,QACA,SAAQ;IACZ,OAAA;IACA,YAAA;EACA,GAAA,EAAA,CAEE,KAAA,OACE,KAAA,SACA,SAAQ;IACZ,MAAA;EACA,GAAA,EAAA,CAEE,KAAA,OACE,KAAA,WACA,SAAQ;IACZ,OAAA;IACA,YAAA;EACA,GAAA,EAAA,CAEE,KAAA,OACE,KAAA,OACA,SAAQ;IACZ,OAAA;IACA,YAAA;EACA,GAAA,EAAA,CAEE,KAAA,OACE,KAAA,OACA,SAAQ;IACZ,OAAA;IACA,YAAA;EACA,GAAA,EAAA,EA1CA,KA0CA;AAWJ,CAAA;AAEA,SAAA,gBAAA,EAAA,OAAA,GAAA;AACA,SAAA,CACI,UAAA,QAAiB,QAAA;AAErB;AAEA,MAAA,YAAA,SAAA,CAAA,EAAA,OAAA,MAAA;AACA,QAAA,aAAA,EAAA;AACA,SAAA,EAAA,CACI,OAAA,SAAe,MAAA,WAAA,IAAA,IAAA,GAA2B,QAAA,OAAA,MAAoB,OAAO,oBAAA,EAArE,OAAqE,CACrE,MACE,MAAA,kBACA,UAAS,YAAA,CAET,KACE,QAAO,QACP,QAAO,YAAA,EAAA,EANX,MAMW;AAGf,CAAA;AAEA,SAAA,eAAA,EAAA,OAAA,KAAA,GAAA;AACA,SAAA,CACI,KAAA,MAAU,aAAY,OAAM,EAAA,OAAA,OAAA,MAAA,QAAA,KAAA,GAAA;AAEhC;AAEA,SAAA,mBAAA,EAAA,OAAA,KAAA,GAAA;AACA,SAAA,CACI,KAAA,MAAU,iBAAgB,OAAM,EAAA,OAAA,OAAA,MAAA,QAAA,KAAA,GAAA;AAEpC;AAEA,SAAA,eAAA,EAAA,OAAA,KAAA,GAAA;AACA,SAAA,CACI,KAAA,MAAU,SAAQ,OAAM,EAAA,OAAA,OAAA,MAAA,QAAA,KAAA,GAAA;AAE5B;AAEA,SAAA,eAAA,EAAA,OAAA,KAAA,GAAA;AACA,SAAA,CACI,KAAA,MAAU,WAAU,OAAM,EAAA,OAAA,OAAA,MAAA,QAAA,KAAA,GAAA;AAE9B;",
+  "names": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/eslint-neostandard/CatCard.js.diagnostics.txt b/test/fixtures/real-project/snapshots/eslint-neostandard/CatCard.js.diagnostics.txt
new file mode 100644
index 0000000..713796e
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/eslint-neostandard/CatCard.js.diagnostics.txt
@@ -0,0 +1 @@
+Found 0 errors.
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/eslint-neostandard/CatCard.tsx.diagnostics.txt b/test/fixtures/real-project/snapshots/eslint-neostandard/CatCard.tsx.diagnostics.txt
new file mode 100644
index 0000000..713796e
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/eslint-neostandard/CatCard.tsx.diagnostics.txt
@@ -0,0 +1 @@
+Found 0 errors.
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/eslint-neostandard/cat-profile-link.js.diagnostics.txt b/test/fixtures/real-project/snapshots/eslint-neostandard/cat-profile-link.js.diagnostics.txt
new file mode 100644
index 0000000..713796e
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/eslint-neostandard/cat-profile-link.js.diagnostics.txt
@@ -0,0 +1 @@
+Found 0 errors.
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/eslint-neostandard/cat-profile-link.tsx.diagnostics.txt b/test/fixtures/real-project/snapshots/eslint-neostandard/cat-profile-link.tsx.diagnostics.txt
new file mode 100644
index 0000000..713796e
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/eslint-neostandard/cat-profile-link.tsx.diagnostics.txt
@@ -0,0 +1 @@
+Found 0 errors.
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/eslint-neostandard/event-tabs-breed.js.diagnostics.txt b/test/fixtures/real-project/snapshots/eslint-neostandard/event-tabs-breed.js.diagnostics.txt
new file mode 100644
index 0000000..713796e
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/eslint-neostandard/event-tabs-breed.js.diagnostics.txt
@@ -0,0 +1 @@
+Found 0 errors.
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/eslint-neostandard/event-tabs-breed.tsx.diagnostics.txt b/test/fixtures/real-project/snapshots/eslint-neostandard/event-tabs-breed.tsx.diagnostics.txt
new file mode 100644
index 0000000..713796e
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/eslint-neostandard/event-tabs-breed.tsx.diagnostics.txt
@@ -0,0 +1 @@
+Found 0 errors.
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/eslint-neostandard/event-tabs-layout.js.diagnostics.txt b/test/fixtures/real-project/snapshots/eslint-neostandard/event-tabs-layout.js.diagnostics.txt
new file mode 100644
index 0000000..713796e
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/eslint-neostandard/event-tabs-layout.js.diagnostics.txt
@@ -0,0 +1 @@
+Found 0 errors.
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/eslint-neostandard/event-tabs-layout.tsx.diagnostics.txt b/test/fixtures/real-project/snapshots/eslint-neostandard/event-tabs-layout.tsx.diagnostics.txt
new file mode 100644
index 0000000..713796e
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/eslint-neostandard/event-tabs-layout.tsx.diagnostics.txt
@@ -0,0 +1 @@
+Found 0 errors.
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/eslint/CatCard.js.output.jsx b/test/fixtures/real-project/snapshots/eslint/CatCard.js.output.jsx
index fc33d6c..dbfa36e 100644
--- a/test/fixtures/real-project/snapshots/eslint/CatCard.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/eslint/CatCard.js.output.jsx
@@ -1,11 +1,9 @@
 import React from 'react'
-import { styl, observer, useSub, $ } from 'startupjs'     
+import { observer, useSub, $, styl } from 'startupjs'
 import { Div, Span, Avatar, Link } from 'startupjs-ui'
 
 export default observer(({ $cat, showPhone, large, small }) => {
-  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()
-  return (<Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={["avatar", { large, small }]} fileId={photoFileId} name={name} /> : <Avatar styleName={["avatar", { large, small }]}>{name}</Avatar>}<Div row><Span styleName={["text", { large }]} bold>{(number || 'X') + '. '}</Span><Div><Span styleName={["text", { large }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={["text", { large }]}><Span bold>Phone:{' '}</Span>{phone}</Span> : null}{catgram ? <Span styleName={["text", { large }]}><Span bold>Catgram:{' '}</Span><Link styleName={["text", { large }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={["text", { large }]}><Span bold>Phonegram:{' '}</Span><Link styleName={["text", { large }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>)
-  /* eslint-disable-line */styl`
+  styl`
     .avatar
       margin-right 1u
       &.large
@@ -16,14 +14,83 @@ export default observer(({ $cat, showPhone, large, small }) => {
         height @width
     .text.large
       font(h6)
+
   `
+  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()
+  return (
+    <Div part='root' row vAlign='center'>
+      {photoFileId
+        ? (
+          <Photo
+            styleName={['avatar', { large, small }]}
+            fileId={photoFileId}
+            name={name}
+          />
+          )
+        : (
+          <Avatar styleName={['avatar', { large, small }]}>{name}</Avatar>
+          )}
+      <Div row>
+        <Span styleName={['text', { large }]} bold>
+          {(number || 'X') + '. '}
+        </Span>
+        <Div>
+          <Span styleName={['text', { large }]}>{name}</Span>
+          {showPhone
+            ? (
+              <>
+                {phone
+                  ? (
+                    <Span styleName={['text', { large }]}>
+                      <Span bold>Phone: </Span>
+                      {phone}
+                    </Span>
+                    )
+                  : null}
+                {catgram
+                  ? (
+                    <Span styleName={['text', { large }]}>
+                      <Span bold>Catgram: </Span>
+                      <Link
+                        styleName={['text', { large }]}
+                        to={getCatgramLink(catgram)}
+                      >
+                        {catgram}
+                      </Link>
+                    </Span>
+                    )
+                  : null}
+                {phonegram
+                  ? (
+                    <Span styleName={['text', { large }]}>
+                      <Span bold>Phonegram: </Span>
+                      <Link
+                        styleName={['text', { large }]}
+                        to={getPhonegramLink(phonegram)}
+                      >
+                        {phonegram}
+                      </Link>
+                    </Span>
+                    )
+                  : null}
+              </>
+              )
+            : null}
+        </Div>
+      </Div>
+    </Div>
+  )
 })
 
 const Photo = observer(({ fileId, name }) => {
   const $file = useSub($.files[fileId])
   let url
   try { url = $file.getUrl() } catch (err) {}
-  return (<Avatar part='root' src={url}>{name}</Avatar>)
+  return (
+    <Avatar part='root' src={url}>
+      {name}
+    </Avatar>
+  )
 })
 
 function getCatgramLink (username) {
diff --git a/test/fixtures/real-project/snapshots/eslint/CatCard.tsx.output.jsx b/test/fixtures/real-project/snapshots/eslint/CatCard.tsx.output.jsx
new file mode 100644
index 0000000..dbfa36e
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/eslint/CatCard.tsx.output.jsx
@@ -0,0 +1,106 @@
+import React from 'react'
+import { observer, useSub, $, styl } from 'startupjs'
+import { Div, Span, Avatar, Link } from 'startupjs-ui'
+
+export default observer(({ $cat, showPhone, large, small }) => {
+  styl`
+    .avatar
+      margin-right 1u
+      &.large
+        width 12u
+        height @width
+      &.small
+        width 4u
+        height @width
+    .text.large
+      font(h6)
+
+  `
+  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()
+  return (
+    <Div part='root' row vAlign='center'>
+      {photoFileId
+        ? (
+          <Photo
+            styleName={['avatar', { large, small }]}
+            fileId={photoFileId}
+            name={name}
+          />
+          )
+        : (
+          <Avatar styleName={['avatar', { large, small }]}>{name}</Avatar>
+          )}
+      <Div row>
+        <Span styleName={['text', { large }]} bold>
+          {(number || 'X') + '. '}
+        </Span>
+        <Div>
+          <Span styleName={['text', { large }]}>{name}</Span>
+          {showPhone
+            ? (
+              <>
+                {phone
+                  ? (
+                    <Span styleName={['text', { large }]}>
+                      <Span bold>Phone: </Span>
+                      {phone}
+                    </Span>
+                    )
+                  : null}
+                {catgram
+                  ? (
+                    <Span styleName={['text', { large }]}>
+                      <Span bold>Catgram: </Span>
+                      <Link
+                        styleName={['text', { large }]}
+                        to={getCatgramLink(catgram)}
+                      >
+                        {catgram}
+                      </Link>
+                    </Span>
+                    )
+                  : null}
+                {phonegram
+                  ? (
+                    <Span styleName={['text', { large }]}>
+                      <Span bold>Phonegram: </Span>
+                      <Link
+                        styleName={['text', { large }]}
+                        to={getPhonegramLink(phonegram)}
+                      >
+                        {phonegram}
+                      </Link>
+                    </Span>
+                    )
+                  : null}
+              </>
+              )
+            : null}
+        </Div>
+      </Div>
+    </Div>
+  )
+})
+
+const Photo = observer(({ fileId, name }) => {
+  const $file = useSub($.files[fileId])
+  let url
+  try { url = $file.getUrl() } catch (err) {}
+  return (
+    <Avatar part='root' src={url}>
+      {name}
+    </Avatar>
+  )
+})
+
+function getCatgramLink (username) {
+  if (!username) return
+  if (/:\/\//.test(username)) return username
+  return 'https://catgr.am/' + username
+}
+
+function getPhonegramLink (username) {
+  if (!username) return
+  if (/:\/\//.test(username)) return username
+  return 'https://www.phonegram.com/' + username
+}
diff --git a/test/fixtures/real-project/snapshots/eslint/cat-profile-link.js.output.jsx b/test/fixtures/real-project/snapshots/eslint/cat-profile-link.js.output.jsx
index 8df3c21..11cbe12 100644
--- a/test/fixtures/real-project/snapshots/eslint/cat-profile-link.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/eslint/cat-profile-link.js.output.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { observer, $, useSub, styl } from 'startupjs'     
+import { observer, $, useSub, styl } from 'startupjs'
 import { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'
 import { useGlobalSearchParams, Stack } from 'expo-router'
 import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
@@ -17,32 +17,59 @@ export default observer(() => {
   const $event = useSub($.events[eventId])
 
   function renderTitle () {
-    return (<CatCard $cat={$cat} />)
+    return <CatCard $cat={$cat} />
   }
 
   function renderSettings () {
-    return (<Profile $cat={$cat} $event={$event} />)
+    return <Profile $cat={$cat} $event={$event} />
   }
 
   const Stage = stages[$cat.getMyStage()]
 
-  return (<><Stack.Screen options={{
-    headerTitle: renderTitle,
-    headerRight: renderSettings
-  }} /><Stage $cat={$cat} $event={$event} /></>)
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerTitle: renderTitle,
+          headerRight: renderSettings
+        }}
+      />
+      <Stage $cat={$cat} $event={$event} />
+    </>
+  )
 })
 
 const Profile = observer(({ $cat, $event }) => {
+  styl`
+    .hackSidePadding
+      width 1u
+
+  `
   const $showEdit = $()
   const { tablet } = useMedia()
   const excludeNumber = $event.stage.get() !== STAGES.InProgress
   const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})
 
-  return (<><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={["hackSidePadding"]} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? 'Edit cat profile' : 'Edit'}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>)
-  styl`
-    .hackSidePadding
-      width 1u
-  `
+  return (
+    <>
+      <Div row vAlign='center' gap={1}>
+        {!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}
+        {!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}
+        {$cat.getMyStage() === STAGES.Profile
+          ? (
+            <Div styleName={['hackSidePadding']} />
+            )
+          : (
+            <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>
+              {tablet ? 'Edit cat profile' : 'Edit'}
+            </Button>
+            )}
+      </Div>
+      <Modal title='Edit cat profile' $visible={$showEdit}>
+        <Form fields={profileEditFields} $value={$cat} />
+      </Modal>
+    </>
+  )
 })
 
 function hasContact ($cat) {
@@ -50,9 +77,15 @@ function hasContact ($cat) {
 }
 
 function renderExpired () {
-  return (<Content padding><Alert variant='error'><Span>Cat profile link is incorrect or already expired.
-
-Your cat meetup profile link is only valid for a limited period of time.
-
-If you believe this is an error, please contact the cat meetup organizer.</Span></Alert></Content>)
+  return (
+    <Content padding>
+      <Alert variant='error'>
+        <Span>
+          Cat profile link is incorrect or already expired. Your cat meetup
+          profile link is only valid for a limited period of time. If you believe
+          this is an error, please contact the cat meetup organizer.
+        </Span>
+      </Alert>
+    </Content>
+  )
 }
diff --git a/test/fixtures/real-project/snapshots/eslint/cat-profile-link.tsx.output.jsx b/test/fixtures/real-project/snapshots/eslint/cat-profile-link.tsx.output.jsx
new file mode 100644
index 0000000..11cbe12
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/eslint/cat-profile-link.tsx.output.jsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import { observer, $, useSub, styl } from 'startupjs'
+import { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'
+import { useGlobalSearchParams, Stack } from 'expo-router'
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
+import CatCard from '@/components/CatCard'
+import * as stages from '@/components/stages'
+import { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'
+import { STAGES } from '@/model/events/schema'
+
+export default observer(() => {
+  const { token } = useGlobalSearchParams()
+  const [$cat] = useSub($.cats, { token })
+  if (!$cat) return renderExpired()
+
+  const eventId = $cat.eventId.get()
+  const $event = useSub($.events[eventId])
+
+  function renderTitle () {
+    return <CatCard $cat={$cat} />
+  }
+
+  function renderSettings () {
+    return <Profile $cat={$cat} $event={$event} />
+  }
+
+  const Stage = stages[$cat.getMyStage()]
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerTitle: renderTitle,
+          headerRight: renderSettings
+        }}
+      />
+      <Stage $cat={$cat} $event={$event} />
+    </>
+  )
+})
+
+const Profile = observer(({ $cat, $event }) => {
+  styl`
+    .hackSidePadding
+      width 1u
+
+  `
+  const $showEdit = $()
+  const { tablet } = useMedia()
+  const excludeNumber = $event.stage.get() !== STAGES.InProgress
+  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})
+
+  return (
+    <>
+      <Div row vAlign='center' gap={1}>
+        {!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}
+        {!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}
+        {$cat.getMyStage() === STAGES.Profile
+          ? (
+            <Div styleName={['hackSidePadding']} />
+            )
+          : (
+            <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>
+              {tablet ? 'Edit cat profile' : 'Edit'}
+            </Button>
+            )}
+      </Div>
+      <Modal title='Edit cat profile' $visible={$showEdit}>
+        <Form fields={profileEditFields} $value={$cat} />
+      </Modal>
+    </>
+  )
+})
+
+function hasContact ($cat) {
+  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()
+}
+
+function renderExpired () {
+  return (
+    <Content padding>
+      <Alert variant='error'>
+        <Span>
+          Cat profile link is incorrect or already expired. Your cat meetup
+          profile link is only valid for a limited period of time. If you believe
+          this is an error, please contact the cat meetup organizer.
+        </Span>
+      </Alert>
+    </Content>
+  )
+}
diff --git a/test/fixtures/real-project/snapshots/eslint/event-tabs-breed.js.output.jsx b/test/fixtures/real-project/snapshots/eslint/event-tabs-breed.js.output.jsx
index 809bae2..c72e1b4 100644
--- a/test/fixtures/real-project/snapshots/eslint/event-tabs-breed.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/eslint/event-tabs-breed.js.output.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import {observer,useSub,$,styl} from 'startupjs'    
+import { observer, useSub, $, styl } from 'startupjs'
 import {
   Link, Item, ScrollView, Form, useFormProps, Alert,
   Content, Tag, Br, Button, Modal, Div, confirm,
@@ -57,15 +57,105 @@ export default observer(({ breed }) => {
     cancel()
   }
 
-  return (<><ScrollView full><Content full pure><CatsList eventId={eventId} onEdit={showEdit} breed={breed} /></Content></ScrollView><Content padding={1}><Button onPress={showCreate}>Add new {breed}</Button></Content><Modal title={$mode.get() === 'new' ? 'Create cat' : 'Edit cat'} $visible={$showModal} onDismiss={cancel}>{(() => {const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic');return (<><Form key={$selected?.getId() || 'NEW'} $fields={$fields} $value={$selected} oppositeBreed={oppositeBreed} eventId={eventId} customInputs={{
-      likes: SelectLikesInput
-    }} validate={validate} /><Br />{$mode.get() === 'new' ? <Div align='right' row><Button onPress={cancel}>Cancel</Button><Button disabled={validate.hasErrors} pushed variant='flat' color='primary' onPress={create}>Create</Button></Div> : $mode.get() === 'edit' ? <Div align='right' row><Button color='error' onPress={deleteCat}>Delete</Button></Div> : null}</>);})()}</Modal></>)
+  return (
+    <>
+      <ScrollView full>
+        <Content full pure>
+          <CatsList eventId={eventId} onEdit={showEdit} breed={breed} />
+        </Content>
+      </ScrollView>
+      <Content padding={1}>
+        <Button onPress={showCreate}>Add new {breed}</Button>
+      </Content>
+      <Modal
+        title={$mode.get() === 'new' ? 'Create cat' : 'Edit cat'}
+        $visible={$showModal}
+        onDismiss={cancel}
+      >
+        {(() => {
+          const oppositeBreed =
+            $selected?.breed.get() &&
+            ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic')
+          return (
+            <>
+              <Form
+                key={$selected?.getId() || 'NEW'}
+                $fields={$fields}
+                $value={$selected}
+                oppositeBreed={oppositeBreed}
+                eventId={eventId}
+                customInputs={{
+                  likes: SelectLikesInput
+                }}
+                validate={validate}
+              />
+              <Br />
+              {$mode.get() === 'new'
+                ? (
+                  <Div align='right' row>
+                    <Button onPress={cancel}>Cancel</Button>
+                    <Button
+                      disabled={validate.hasErrors}
+                      pushed
+                      variant='flat'
+                      color='primary'
+                      onPress={create}
+                    >
+                      Create
+                    </Button>
+                  </Div>
+                  )
+                : $mode.get() === 'edit'
+                  ? (
+                    <Div align='right' row>
+                      <Button color='error' onPress={deleteCat}>
+                        Delete
+                      </Button>
+                    </Div>
+                    )
+                  : null}
+            </>
+          )
+        })()}
+      </Modal>
+    </>
+  )
 })
 
 const CatsList = observer(({ onEdit, breed, eventId }) => {
-  if (!eventId) return (<Alert variant='error'>No event specified</Alert>)
+  if (!eventId) return <Alert variant='error'>No event specified</Alert>
   const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })
-  return ((() => {const __pugEachResult = [];for (const $cat of $cats) {__pugEachResult.push(<Item key={$cat.getId()}><CatCard $cat={$cat} /><Item.Right><Div vAlign='center' row gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}<Button variant='text' icon={faPen} onPress={() => onEdit($cat)} tooltip='Edit' /><Link href={'/events/' + eventId + '/matches/' + $cat.getId()}><Button variant='text' icon={faHeart} tooltip='Matches' /></Link><Link href={'/cats/' + $cat.token.get()}><Button variant='text' icon={faLink} tooltip='Cat profile link'>Link</Button></Link></Div></Item.Right></Item>);}return __pugEachResult;})())
+  return (() => {
+    const __pugEachResult = []
+    for (const $cat of $cats) {
+      __pugEachResult.push(
+        <Item key={$cat.getId()}>
+          <CatCard $cat={$cat} />
+          <Item.Right>
+            <Div vAlign='center' row gap={1}>
+              {!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}
+              {!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}
+              <Button
+                variant='text'
+                icon={faPen}
+                onPress={() => onEdit($cat)}
+                tooltip='Edit'
+              />
+              <Link href={'/events/' + eventId + '/matches/' + $cat.getId()}>
+                <Button variant='text' icon={faHeart} tooltip='Matches' />
+              </Link>
+              <Link href={'/cats/' + $cat.token.get()}>
+                <Button variant='text' icon={faLink} tooltip='Cat profile link'>
+                  Link
+                </Button>
+              </Link>
+            </Div>
+          </Item.Right>
+        </Item>
+      )
+    }
+    return __pugEachResult
+  })()
 })
 
 function hasContact ($cat) {
@@ -74,11 +164,20 @@ function hasContact ($cat) {
 
 const SelectLikesInput = observer(({ $value, ...props }) => {
   const { oppositeBreed, eventId } = { ...useFormProps(), ...props }
-  return (oppositeBreed ? <SelectLikes $likes={$value} oppositeBreed={oppositeBreed} eventId={eventId} /> : <Alert variant='warning'>Select breed to choose likes</Alert>)
+  return oppositeBreed
+    ? (
+      <SelectLikes
+        $likes={$value}
+        oppositeBreed={oppositeBreed}
+        eventId={eventId}
+      />
+      )
+    : (
+      <Alert variant='warning'>Select breed to choose likes</Alert>
+      )
 })
 
 const SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {
-  
   styl`
     .item
       border-radius 1u
@@ -86,7 +185,35 @@ const SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {
         // FIXME: We can't use color var(--color-text-success-strong) here
         background-color var(--color-text-success-strong)
 
-  `;
-const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })
-  return ((() => {const __pugEachResult = [];for (const $cat of $cats) {__pugEachResult.push((() => {const catId = $cat.getId();return <Item styleName={["item", { selected: $likes[catId].get() }]} key={catId} onPress={() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)}><CatCard $cat={$cat} small /></Item>;})());}return __pugEachResult.length ? __pugEachResult : <Alert variant='info'>No cats with selected breed yet</Alert>;})())
+  `
+  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })
+  return (() => {
+    const __pugEachResult = []
+    for (const $cat of $cats) {
+      __pugEachResult.push(
+        (() => {
+          const catId = $cat.getId()
+          return (
+            <Item
+              styleName={['item', { selected: $likes[catId].get() }]}
+              key={catId}
+              onPress={() =>
+                $likes[catId].get()
+                  ? $likes[catId].del()
+                  : $likes[catId].set(true)}
+            >
+              <CatCard $cat={$cat} small />
+            </Item>
+          )
+        })()
+      )
+    }
+    return __pugEachResult.length
+      ? (
+          __pugEachResult
+        )
+      : (
+        <Alert variant='info'>No cats with selected breed yet</Alert>
+        )
+  })()
 })
diff --git a/test/fixtures/real-project/snapshots/eslint/event-tabs-breed.tsx.output.jsx b/test/fixtures/real-project/snapshots/eslint/event-tabs-breed.tsx.output.jsx
new file mode 100644
index 0000000..c72e1b4
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/eslint/event-tabs-breed.tsx.output.jsx
@@ -0,0 +1,219 @@
+import React, { useState } from 'react'
+import { observer, useSub, $, styl } from 'startupjs'
+import {
+  Link, Item, ScrollView, Form, useFormProps, Alert,
+  Content, Tag, Br, Button, Modal, Div, confirm,
+  useFormFields$, useValidate
+} from 'startupjs-ui'
+import { useGlobalSearchParams } from 'expo-router'
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
+import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'
+import { faLink } from '@fortawesome/free-solid-svg-icons/faLink'
+import CatCard from '@/components/CatCard'
+import { CAT_FORM } from '@/model/cats/schema'
+
+export default observer(({ breed }) => {
+  const { eventId } = useGlobalSearchParams()
+  const [$selected, set$selected] = useState()
+  const $new = $()
+  const $showModal = $()
+  const $mode = $()
+  const $fields = useFormFields$(CAT_FORM)
+  const validate = useValidate()
+
+  function showCreate () {
+    $new.set({ breed })
+    $fields.breed.disabled.set(true)
+    set$selected(() => $new)
+    $mode.set('new')
+    $showModal.set(true)
+  }
+
+  function showEdit ($cat) {
+    $fields.breed.disabled.del()
+    set$selected(() => $cat)
+    $mode.set('edit')
+    $showModal.set(true)
+  }
+
+  function cancel () {
+    if (!$showModal.get()) return
+    $showModal.del()
+    $mode.del()
+  }
+
+  async function create () {
+    if (!validate()) return
+    await $.cats.addNew({
+      ...$new.getDeepCopy(),
+      eventId
+    })
+    cancel()
+  }
+
+  async function deleteCat () {
+    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return
+    await $selected.del()
+    cancel()
+  }
+
+  return (
+    <>
+      <ScrollView full>
+        <Content full pure>
+          <CatsList eventId={eventId} onEdit={showEdit} breed={breed} />
+        </Content>
+      </ScrollView>
+      <Content padding={1}>
+        <Button onPress={showCreate}>Add new {breed}</Button>
+      </Content>
+      <Modal
+        title={$mode.get() === 'new' ? 'Create cat' : 'Edit cat'}
+        $visible={$showModal}
+        onDismiss={cancel}
+      >
+        {(() => {
+          const oppositeBreed =
+            $selected?.breed.get() &&
+            ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic')
+          return (
+            <>
+              <Form
+                key={$selected?.getId() || 'NEW'}
+                $fields={$fields}
+                $value={$selected}
+                oppositeBreed={oppositeBreed}
+                eventId={eventId}
+                customInputs={{
+                  likes: SelectLikesInput
+                }}
+                validate={validate}
+              />
+              <Br />
+              {$mode.get() === 'new'
+                ? (
+                  <Div align='right' row>
+                    <Button onPress={cancel}>Cancel</Button>
+                    <Button
+                      disabled={validate.hasErrors}
+                      pushed
+                      variant='flat'
+                      color='primary'
+                      onPress={create}
+                    >
+                      Create
+                    </Button>
+                  </Div>
+                  )
+                : $mode.get() === 'edit'
+                  ? (
+                    <Div align='right' row>
+                      <Button color='error' onPress={deleteCat}>
+                        Delete
+                      </Button>
+                    </Div>
+                    )
+                  : null}
+            </>
+          )
+        })()}
+      </Modal>
+    </>
+  )
+})
+
+const CatsList = observer(({ onEdit, breed, eventId }) => {
+  if (!eventId) return <Alert variant='error'>No event specified</Alert>
+  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })
+  return (() => {
+    const __pugEachResult = []
+    for (const $cat of $cats) {
+      __pugEachResult.push(
+        <Item key={$cat.getId()}>
+          <CatCard $cat={$cat} />
+          <Item.Right>
+            <Div vAlign='center' row gap={1}>
+              {!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}
+              {!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}
+              <Button
+                variant='text'
+                icon={faPen}
+                onPress={() => onEdit($cat)}
+                tooltip='Edit'
+              />
+              <Link href={'/events/' + eventId + '/matches/' + $cat.getId()}>
+                <Button variant='text' icon={faHeart} tooltip='Matches' />
+              </Link>
+              <Link href={'/cats/' + $cat.token.get()}>
+                <Button variant='text' icon={faLink} tooltip='Cat profile link'>
+                  Link
+                </Button>
+              </Link>
+            </Div>
+          </Item.Right>
+        </Item>
+      )
+    }
+    return __pugEachResult
+  })()
+})
+
+function hasContact ($cat) {
+  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()
+}
+
+const SelectLikesInput = observer(({ $value, ...props }) => {
+  const { oppositeBreed, eventId } = { ...useFormProps(), ...props }
+  return oppositeBreed
+    ? (
+      <SelectLikes
+        $likes={$value}
+        oppositeBreed={oppositeBreed}
+        eventId={eventId}
+      />
+      )
+    : (
+      <Alert variant='warning'>Select breed to choose likes</Alert>
+      )
+})
+
+const SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {
+  styl`
+    .item
+      border-radius 1u
+      &.selected
+        // FIXME: We can't use color var(--color-text-success-strong) here
+        background-color var(--color-text-success-strong)
+
+  `
+  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })
+  return (() => {
+    const __pugEachResult = []
+    for (const $cat of $cats) {
+      __pugEachResult.push(
+        (() => {
+          const catId = $cat.getId()
+          return (
+            <Item
+              styleName={['item', { selected: $likes[catId].get() }]}
+              key={catId}
+              onPress={() =>
+                $likes[catId].get()
+                  ? $likes[catId].del()
+                  : $likes[catId].set(true)}
+            >
+              <CatCard $cat={$cat} small />
+            </Item>
+          )
+        })()
+      )
+    }
+    return __pugEachResult.length
+      ? (
+          __pugEachResult
+        )
+      : (
+        <Alert variant='info'>No cats with selected breed yet</Alert>
+        )
+  })()
+})
diff --git a/test/fixtures/real-project/snapshots/eslint/event-tabs-layout.js.output.jsx b/test/fixtures/real-project/snapshots/eslint/event-tabs-layout.js.output.jsx
index 158af3e..018ad30 100644
--- a/test/fixtures/real-project/snapshots/eslint/event-tabs-layout.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/eslint/event-tabs-layout.js.output.jsx
@@ -1,6 +1,6 @@
 // import { Platform } from 'react-native'
 import React from 'react'
-import { observer, styl, $, useSub } from 'startupjs'     
+import { observer, $, useSub, styl } from 'startupjs'
 import { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'
 import { Tabs, useLocalSearchParams, Stack } from 'expo-router'
 import { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'
@@ -11,38 +11,6 @@ import { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'
 import { EVENT_FORM } from '@/model/events/schema'
 
 export default observer(function TabLayout () {
-  const getColor = useColors()
-  const { eventId } = useLocalSearchParams()
-  const $event = useSub($.events[eventId])
-  if (!$event.get()) throw Error('No such event')
-
-  // NOTE:
-  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.
-  // tabBarStyle/order - Move the tab bar to the top on tablet+
-  return (<><Stack.Screen options={{
-    title: $event.name.get(),
-    headerRight: () => renderEditEvent({ $event })
-  }} /><Tabs title={$event.name.get()} screenOptions={{
-    ...styl('screen'),
-    tabBarActiveTintColor: getColor('primary'),
-    tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',
-    headerShown: false,
-    headerTitle: $event.name.get()
-  }}><Tabs.Screen name='index' options={{
-      title: 'Dashboard',
-      tabBarIcon: renderHomeIcon
-    }} /><Tabs.Screen name='-breed' options={{
-      href: null
-    }} /><Tabs.Screen name='domestic' options={{
-      title: 'Domestic Cats',
-      tabBarIcon: renderDomesticIcon
-    }} /><Tabs.Screen name='wild' options={{
-      title: 'Wild Cats',
-      tabBarIcon: renderWildIcon
-    }} /><Tabs.Screen name='test' options={{
-      title: 'Dev Only',
-      tabBarIcon: renderTestIcon
-    }} /></Tabs></>)
   styl`
     +tablet()
       .screen
@@ -51,30 +19,111 @@ export default observer(function TabLayout () {
           background-color transparent
           border-bottom-width 1px
           border-bottom-color rgba(0, 0, 0, 0.1)
+
   `
+  const getColor = useColors()
+  const { eventId } = useLocalSearchParams()
+  const $event = useSub($.events[eventId])
+  if (!$event.get()) throw Error('No such event')
+
+  // NOTE:
+  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.
+  // tabBarStyle/order - Move the tab bar to the top on tablet+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: $event.name.get(),
+          headerRight: () => renderEditEvent({ $event })
+        }}
+      />
+      <Tabs
+        title={$event.name.get()}
+        screenOptions={{
+          ...styl('screen'),
+          tabBarActiveTintColor: getColor('primary'),
+          tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',
+          headerShown: false,
+          headerTitle: $event.name.get()
+        }}
+      >
+        <Tabs.Screen
+          name='index'
+          options={{
+            title: 'Dashboard',
+            tabBarIcon: renderHomeIcon
+          }}
+        />
+        <Tabs.Screen
+          name='-breed'
+          options={{
+            href: null
+          }}
+        />
+        <Tabs.Screen
+          name='domestic'
+          options={{
+            title: 'Domestic Cats',
+            tabBarIcon: renderDomesticIcon
+          }}
+        />
+        <Tabs.Screen
+          name='wild'
+          options={{
+            title: 'Wild Cats',
+            tabBarIcon: renderWildIcon
+          }}
+        />
+        <Tabs.Screen
+          name='test'
+          options={{
+            title: 'Dev Only',
+            tabBarIcon: renderTestIcon
+          }}
+        />
+      </Tabs>
+    </>
+  )
 })
 
 function renderEditEvent ({ $event }) {
-  return (<EditEvent $event={$event} />)
+  return <EditEvent $event={$event} />
 }
 
 const EditEvent = observer(({ $event }) => {
   const $showModal = $()
-  return (<><Button onPress={() => $showModal.set(true)} variant='text' icon={faPen}>Edit this cat meetup</Button><Modal title='Edit cat meetup' $visible={$showModal}><Form $value={$event} fields={EVENT_FORM} /></Modal></>)
+  return (
+    <>
+      <Button onPress={() => $showModal.set(true)} variant='text' icon={faPen}>
+        Edit this cat meetup
+      </Button>
+      <Modal title='Edit cat meetup' $visible={$showModal}>
+        <Form $value={$event} fields={EVENT_FORM} />
+      </Modal>
+    </>
+  )
 })
 
 function renderWildIcon ({ color, size }) {
-  return (<Icon icon={faWildBadge} style={{ color, width: size, height: size }} />)
+  return (
+    <Icon icon={faWildBadge} style={{ color, width: size, height: size }} />
+  )
 }
 
 function renderDomesticIcon ({ color, size }) {
-  return (<Icon icon={faDomesticBadge} style={{ color, width: size, height: size }} />)
+  return (
+    <Icon icon={faDomesticBadge} style={{ color, width: size, height: size }} />
+  )
 }
 
 function renderHomeIcon ({ color, size }) {
-  return (<Icon icon={faHeart} style={{ color, width: size, height: size }} />)
+  return (
+    <Icon icon={faHeart} style={{ color, width: size, height: size }} />
+  )
 }
 
 function renderTestIcon ({ color, size }) {
-  return (<Icon icon={faToolbox} style={{ color, width: size, height: size }} />)
+  return (
+    <Icon icon={faToolbox} style={{ color, width: size, height: size }} />
+  )
 }
diff --git a/test/fixtures/real-project/snapshots/eslint/event-tabs-layout.tsx.output.jsx b/test/fixtures/real-project/snapshots/eslint/event-tabs-layout.tsx.output.jsx
new file mode 100644
index 0000000..018ad30
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/eslint/event-tabs-layout.tsx.output.jsx
@@ -0,0 +1,129 @@
+// import { Platform } from 'react-native'
+import React from 'react'
+import { observer, $, useSub, styl } from 'startupjs'
+import { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'
+import { Tabs, useLocalSearchParams, Stack } from 'expo-router'
+import { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'
+import { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'
+import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
+import { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'
+import { EVENT_FORM } from '@/model/events/schema'
+
+export default observer(function TabLayout () {
+  styl`
+    +tablet()
+      .screen
+        &:part(tabBar)
+          order -1
+          background-color transparent
+          border-bottom-width 1px
+          border-bottom-color rgba(0, 0, 0, 0.1)
+
+  `
+  const getColor = useColors()
+  const { eventId } = useLocalSearchParams()
+  const $event = useSub($.events[eventId])
+  if (!$event.get()) throw Error('No such event')
+
+  // NOTE:
+  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.
+  // tabBarStyle/order - Move the tab bar to the top on tablet+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: $event.name.get(),
+          headerRight: () => renderEditEvent({ $event })
+        }}
+      />
+      <Tabs
+        title={$event.name.get()}
+        screenOptions={{
+          ...styl('screen'),
+          tabBarActiveTintColor: getColor('primary'),
+          tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',
+          headerShown: false,
+          headerTitle: $event.name.get()
+        }}
+      >
+        <Tabs.Screen
+          name='index'
+          options={{
+            title: 'Dashboard',
+            tabBarIcon: renderHomeIcon
+          }}
+        />
+        <Tabs.Screen
+          name='-breed'
+          options={{
+            href: null
+          }}
+        />
+        <Tabs.Screen
+          name='domestic'
+          options={{
+            title: 'Domestic Cats',
+            tabBarIcon: renderDomesticIcon
+          }}
+        />
+        <Tabs.Screen
+          name='wild'
+          options={{
+            title: 'Wild Cats',
+            tabBarIcon: renderWildIcon
+          }}
+        />
+        <Tabs.Screen
+          name='test'
+          options={{
+            title: 'Dev Only',
+            tabBarIcon: renderTestIcon
+          }}
+        />
+      </Tabs>
+    </>
+  )
+})
+
+function renderEditEvent ({ $event }) {
+  return <EditEvent $event={$event} />
+}
+
+const EditEvent = observer(({ $event }) => {
+  const $showModal = $()
+  return (
+    <>
+      <Button onPress={() => $showModal.set(true)} variant='text' icon={faPen}>
+        Edit this cat meetup
+      </Button>
+      <Modal title='Edit cat meetup' $visible={$showModal}>
+        <Form $value={$event} fields={EVENT_FORM} />
+      </Modal>
+    </>
+  )
+})
+
+function renderWildIcon ({ color, size }) {
+  return (
+    <Icon icon={faWildBadge} style={{ color, width: size, height: size }} />
+  )
+}
+
+function renderDomesticIcon ({ color, size }) {
+  return (
+    <Icon icon={faDomesticBadge} style={{ color, width: size, height: size }} />
+  )
+}
+
+function renderHomeIcon ({ color, size }) {
+  return (
+    <Icon icon={faHeart} style={{ color, width: size, height: size }} />
+  )
+}
+
+function renderTestIcon ({ color, size }) {
+  return (
+    <Icon icon={faToolbox} style={{ color, width: size, height: size }} />
+  )
+}
diff --git a/test/fixtures/real-project/snapshots/shadow/CatCard.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/shadow/CatCard.js.output.sourcemap.json
index c236dde..6970ef4 100644
--- a/test/fixtures/real-project/snapshots/shadow/CatCard.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/shadow/CatCard.js.output.sourcemap.json
@@ -6,8 +6,8 @@
     "test/fixtures/real-project/CatCard.js"
   ],
   "sourcesContent": [
-    "import React from 'react'\nimport { pug, styl, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n  `\n  /* eslint-disable-line */styl`\n    .avatar\n      margin-right 1u\n      &.large\n        width 12u\n        height @width\n      &.small\n        width 4u\n        height @width\n    .text.large\n      font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
+    "import React from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n    style(lang='styl')\n      .avatar\n        margin-right 1u\n        &.large\n          width 12u\n          height @width\n        &.small\n          width 4u\n          height @width\n      .text.large\n        font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
   ],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA,WACI,qCACK,eACD,MAAa,aAAR,SAAkB,mBAAiB,QAAO,aAAY,MAAK,YAEhE,OAAc,aAAR,SAAkB,oBAAmB,gBAC7C,SACE,KAAe,aAAX,OAAqB,YAAf,MAA2B,+BACrC,KACE,KAAU,aAAN,OAAgB,aAAY,aAC7B,eACE,SACD,KAAU,aAAN,OAAgB,aAClB,UAAW,OAAQ,YACjB,sBACH,WACD,KAAU,aAAN,OAAgB,aAClB,UAAW,SAAU,YACrB,KAAU,aAAN,OAAgB,YAAU,IAAG,0BAA0B,+BAC5D,aACD,KAAU,aAAN,OAAgB,aAClB,UAAW,WAAY,YACvB,KAAU,aAAN,OAAgB,YAAU,IAAG,8BAA8B,8DAC5E;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WACI,wBAAuB,MAAM,eAC9B;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA",
+  "mappings": "AAAA;qDACoD;AACpD;AACA;AACA;;IA0BM;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAlCN;AACA,WACI,qCACK,eACD,MAAa,aAAR,SAAkB,mBAAiB,QAAO,aAAY,MAAK,YAEhE,OAAc,aAAR,SAAkB,oBAAmB,gBAC7C,SACE,KAAe,aAAX,OAAqB,YAAf,MAA2B,+BACrC,KACE,KAAU,aAAN,OAAgB,aAAY,aAC7B,eACE,SACD,KAAU,aAAN,OAAgB,aAClB,UAAW,OAAQ,YACjB,sBACH,WACD,KAAU,aAAN,OAAgB,aAClB,UAAW,SAAU,YACrB,KAAU,aAAN,OAAgB,YAAU,IAAG,0BAA0B,+BAC5D,aACD,KAAU,aAAN,OAAgB,aAClB,UAAW,WAAY,YACvB,KAAU,aAAN,OAAgB,YAAU,IAAG,8BAA8B,8DAY5E;AACH;AACA;AACA;AACA;AACA;AACA;AACA,WACI,wBAAuB,MAAM,eAC9B;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/shadow/CatCard.js.output.tsx b/test/fixtures/real-project/snapshots/shadow/CatCard.js.output.tsx
index fc33d6c..c373b6f 100644
--- a/test/fixtures/real-project/snapshots/shadow/CatCard.js.output.tsx
+++ b/test/fixtures/real-project/snapshots/shadow/CatCard.js.output.tsx
@@ -1,11 +1,9 @@
 import React from 'react'
-import { styl, observer, useSub, $ } from 'startupjs'     
+import { observer, useSub, $, styl } from 'startupjs'
 import { Div, Span, Avatar, Link } from 'startupjs-ui'
 
 export default observer(({ $cat, showPhone, large, small }) => {
-  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()
-  return (<Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={["avatar", { large, small }]} fileId={photoFileId} name={name} /> : <Avatar styleName={["avatar", { large, small }]}>{name}</Avatar>}<Div row><Span styleName={["text", { large }]} bold>{(number || 'X') + '. '}</Span><Div><Span styleName={["text", { large }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={["text", { large }]}><Span bold>Phone:{' '}</Span>{phone}</Span> : null}{catgram ? <Span styleName={["text", { large }]}><Span bold>Catgram:{' '}</Span><Link styleName={["text", { large }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={["text", { large }]}><Span bold>Phonegram:{' '}</Span><Link styleName={["text", { large }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>)
-  /* eslint-disable-line */styl`
+  styl`
     .avatar
       margin-right 1u
       &.large
@@ -16,7 +14,10 @@ export default observer(({ $cat, showPhone, large, small }) => {
         height @width
     .text.large
       font(h6)
+
   `
+  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()
+  return (<Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={['avatar', { large, small }]} fileId={photoFileId} name={name} /> : <Avatar styleName={['avatar', { large, small }]}>{name}</Avatar>}<Div row><Span styleName={['text', { large }]} bold>{(number || 'X') + '. '}</Span><Div><Span styleName={['text', { large }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={['text', { large }]}><Span bold>Phone:{' '}</Span>{phone}</Span> : null}{catgram ? <Span styleName={['text', { large }]}><Span bold>Catgram:{' '}</Span><Link styleName={['text', { large }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={['text', { large }]}><Span bold>Phonegram:{' '}</Span><Link styleName={['text', { large }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>)
 })
 
 const Photo = observer(({ fileId, name }) => {
diff --git a/test/fixtures/real-project/snapshots/shadow/CatCard.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/shadow/CatCard.tsx.output.sourcemap.json
new file mode 100644
index 0000000..fd7dc9f
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/shadow/CatCard.tsx.output.sourcemap.json
@@ -0,0 +1,13 @@
+{
+  "version": 3,
+  "file": "test/fixtures/real-project/CatCard.tsx",
+  "names": [],
+  "sources": [
+    "test/fixtures/real-project/CatCard.tsx"
+  ],
+  "sourcesContent": [
+    "import React from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n    style(lang='styl')\n      .avatar\n        margin-right 1u\n        &.large\n          width 12u\n          height @width\n        &.small\n          width 4u\n          height @width\n      .text.large\n        font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
+  ],
+  "mappings": "AAAA;qDACoD;AACpD;AACA;AACA;;IA0BM;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAlCN;AACA,WACI,qCACK,eACD,MAAa,aAAR,SAAkB,mBAAiB,QAAO,aAAY,MAAK,YAEhE,OAAc,aAAR,SAAkB,oBAAmB,gBAC7C,SACE,KAAe,aAAX,OAAqB,YAAf,MAA2B,+BACrC,KACE,KAAU,aAAN,OAAgB,aAAY,aAC7B,eACE,SACD,KAAU,aAAN,OAAgB,aAClB,UAAW,OAAQ,YACjB,sBACH,WACD,KAAU,aAAN,OAAgB,aAClB,UAAW,SAAU,YACrB,KAAU,aAAN,OAAgB,YAAU,IAAG,0BAA0B,+BAC5D,aACD,KAAU,aAAN,OAAgB,aAClB,UAAW,WAAY,YACvB,KAAU,aAAN,OAAgB,YAAU,IAAG,8BAA8B,8DAY5E;AACH;AACA;AACA;AACA;AACA;AACA;AACA,WACI,wBAAuB,MAAM,eAC9B;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/shadow/CatCard.tsx.output.tsx b/test/fixtures/real-project/snapshots/shadow/CatCard.tsx.output.tsx
new file mode 100644
index 0000000..c373b6f
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/shadow/CatCard.tsx.output.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { observer, useSub, $, styl } from 'startupjs'
+import { Div, Span, Avatar, Link } from 'startupjs-ui'
+
+export default observer(({ $cat, showPhone, large, small }) => {
+  styl`
+    .avatar
+      margin-right 1u
+      &.large
+        width 12u
+        height @width
+      &.small
+        width 4u
+        height @width
+    .text.large
+      font(h6)
+
+  `
+  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()
+  return (<Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={['avatar', { large, small }]} fileId={photoFileId} name={name} /> : <Avatar styleName={['avatar', { large, small }]}>{name}</Avatar>}<Div row><Span styleName={['text', { large }]} bold>{(number || 'X') + '. '}</Span><Div><Span styleName={['text', { large }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={['text', { large }]}><Span bold>Phone:{' '}</Span>{phone}</Span> : null}{catgram ? <Span styleName={['text', { large }]}><Span bold>Catgram:{' '}</Span><Link styleName={['text', { large }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={['text', { large }]}><Span bold>Phonegram:{' '}</Span><Link styleName={['text', { large }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>)
+})
+
+const Photo = observer(({ fileId, name }) => {
+  const $file = useSub($.files[fileId])
+  let url
+  try { url = $file.getUrl() } catch (err) {}
+  return (<Avatar part='root' src={url}>{name}</Avatar>)
+})
+
+function getCatgramLink (username) {
+  if (!username) return
+  if (/:\/\//.test(username)) return username
+  return 'https://catgr.am/' + username
+}
+
+function getPhonegramLink (username) {
+  if (!username) return
+  if (/:\/\//.test(username)) return username
+  return 'https://www.phonegram.com/' + username
+}
diff --git a/test/fixtures/real-project/snapshots/shadow/cat-profile-link.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/shadow/cat-profile-link.js.output.sourcemap.json
index c078110..d014b54 100644
--- a/test/fixtures/real-project/snapshots/shadow/cat-profile-link.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/shadow/cat-profile-link.js.output.sourcemap.json
@@ -6,8 +6,8 @@
     "test/fixtures/real-project/cat-profile-link.js"
   ],
   "sourcesContent": [
-    "import React from 'react'\nimport { pug, observer, $, useSub, styl } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n  `\n  styl`\n    .hackSidePadding\n      width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
+    "import React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n    style(lang='styl')\n      .hackSidePadding\n        width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
   ],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACM,cAAa,SACd;AACL;AACA;AACA;AACA,aACM,cAAa,MAAK,QAAO,WAC1B;AACL;AACA;AACA;AACA;AACA,aACI,aACE,SAAQ;AACV;AACA;AACA,QAEA,YAAW,MAAK,QAAO,cACxB;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,6BAA4B,IACvB,qBACD,kBAAmB,yBAClB,2BACD,kBAAmB,uBAClB,wCACD,iBAAG,yBAEH,OACE,eACA,MAAK,OACL,SAAQ,4BAEL,SACC,qBAEA,wBACV,MACE,yBACA,UAAS,YAET,KACE,QAAO,mBACP,QAAO,oBAEZ;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WACI,iBACE,uBACE,KACI;AACP;AACA,CAAQ;AACR;AACA,CAAQ,kGACV;AACH",
+  "mappings": "AAAA;qDACoD;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACM,cAAa,SACd;AACL;AACA;AACA;AACA,aACM,cAAa,MAAK,QAAO,WAC1B;AACL;AACA;AACA;AACA;AACA,aACI,aACE,SAAQ;AACV;AACA;AACA,QAEA,YAAW,MAAK,QAAO,cACxB;AACH;AACA;AACA;;IAiCM;IACA;;;AAjCN;AACA;AACA;AACA;AACA;AACA,aACI,6BAA4B,IACvB,qBACD,kBAAmB,yBAClB,2BACD,kBAAmB,uBAClB,wCACD,iBAAG,yBAEH,OACE,eACA,MAAK,OACL,SAAQ,4BAEL,SACC,qBAEA,wBACV,MACE,yBACA,UAAS,YAET,KACE,QAAO,mBACP,QAAO,oBAKZ;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WACI,iBACE,uBACE,KACI;AACP;AACA,CAAQ;AACR;AACA,CAAQ,kGACV;AACH",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/shadow/cat-profile-link.js.output.tsx b/test/fixtures/real-project/snapshots/shadow/cat-profile-link.js.output.tsx
index 8df3c21..5975a21 100644
--- a/test/fixtures/real-project/snapshots/shadow/cat-profile-link.js.output.tsx
+++ b/test/fixtures/real-project/snapshots/shadow/cat-profile-link.js.output.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { observer, $, useSub, styl } from 'startupjs'     
+import { observer, $, useSub, styl } from 'startupjs'
 import { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'
 import { useGlobalSearchParams, Stack } from 'expo-router'
 import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
@@ -33,16 +33,17 @@ export default observer(() => {
 })
 
 const Profile = observer(({ $cat, $event }) => {
+  styl`
+    .hackSidePadding
+      width 1u
+
+  `
   const $showEdit = $()
   const { tablet } = useMedia()
   const excludeNumber = $event.stage.get() !== STAGES.InProgress
   const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})
 
-  return (<><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={["hackSidePadding"]} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? 'Edit cat profile' : 'Edit'}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>)
-  styl`
-    .hackSidePadding
-      width 1u
-  `
+  return (<><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={['hackSidePadding']} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? 'Edit cat profile' : 'Edit'}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>)
 })
 
 function hasContact ($cat) {
diff --git a/test/fixtures/real-project/snapshots/shadow/cat-profile-link.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/shadow/cat-profile-link.tsx.output.sourcemap.json
new file mode 100644
index 0000000..2603a48
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/shadow/cat-profile-link.tsx.output.sourcemap.json
@@ -0,0 +1,13 @@
+{
+  "version": 3,
+  "file": "test/fixtures/real-project/cat-profile-link.tsx",
+  "names": [],
+  "sources": [
+    "test/fixtures/real-project/cat-profile-link.tsx"
+  ],
+  "sourcesContent": [
+    "import React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n    style(lang='styl')\n      .hackSidePadding\n        width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
+  ],
+  "mappings": "AAAA;qDACoD;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACM,cAAa,SACd;AACL;AACA;AACA;AACA,aACM,cAAa,MAAK,QAAO,WAC1B;AACL;AACA;AACA;AACA;AACA,aACI,aACE,SAAQ;AACV;AACA;AACA,QAEA,YAAW,MAAK,QAAO,cACxB;AACH;AACA;AACA;;IAiCM;IACA;;;AAjCN;AACA;AACA;AACA;AACA;AACA,aACI,6BAA4B,IACvB,qBACD,kBAAmB,yBAClB,2BACD,kBAAmB,uBAClB,wCACD,iBAAG,yBAEH,OACE,eACA,MAAK,OACL,SAAQ,4BAEL,SACC,qBAEA,wBACV,MACE,yBACA,UAAS,YAET,KACE,QAAO,mBACP,QAAO,oBAKZ;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WACI,iBACE,uBACE,KACI;AACP;AACA,CAAQ;AACR;AACA,CAAQ,kGACV;AACH",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/shadow/cat-profile-link.tsx.output.tsx b/test/fixtures/real-project/snapshots/shadow/cat-profile-link.tsx.output.tsx
new file mode 100644
index 0000000..5975a21
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/shadow/cat-profile-link.tsx.output.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import { observer, $, useSub, styl } from 'startupjs'
+import { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'
+import { useGlobalSearchParams, Stack } from 'expo-router'
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
+import CatCard from '@/components/CatCard'
+import * as stages from '@/components/stages'
+import { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'
+import { STAGES } from '@/model/events/schema'
+
+export default observer(() => {
+  const { token } = useGlobalSearchParams()
+  const [$cat] = useSub($.cats, { token })
+  if (!$cat) return renderExpired()
+
+  const eventId = $cat.eventId.get()
+  const $event = useSub($.events[eventId])
+
+  function renderTitle () {
+    return (<CatCard $cat={$cat} />)
+  }
+
+  function renderSettings () {
+    return (<Profile $cat={$cat} $event={$event} />)
+  }
+
+  const Stage = stages[$cat.getMyStage()]
+
+  return (<><Stack.Screen options={{
+    headerTitle: renderTitle,
+    headerRight: renderSettings
+  }} /><Stage $cat={$cat} $event={$event} /></>)
+})
+
+const Profile = observer(({ $cat, $event }) => {
+  styl`
+    .hackSidePadding
+      width 1u
+
+  `
+  const $showEdit = $()
+  const { tablet } = useMedia()
+  const excludeNumber = $event.stage.get() !== STAGES.InProgress
+  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})
+
+  return (<><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={['hackSidePadding']} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? 'Edit cat profile' : 'Edit'}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>)
+})
+
+function hasContact ($cat) {
+  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()
+}
+
+function renderExpired () {
+  return (<Content padding><Alert variant='error'><Span>Cat profile link is incorrect or already expired.
+
+Your cat meetup profile link is only valid for a limited period of time.
+
+If you believe this is an error, please contact the cat meetup organizer.</Span></Alert></Content>)
+}
diff --git a/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.js.output.sourcemap.json
index 054c38f..ee09fba 100644
--- a/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.js.output.sourcemap.json
@@ -8,6 +8,6 @@
   "sourcesContent": [
     "import React, { useState } from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport {\n  Link, Item, ScrollView, Form, useFormProps, Alert,\n  Content, Tag, Br, Button, Modal, Div, confirm,\n  useFormFields$, useValidate\n} from 'startupjs-ui'\nimport { useGlobalSearchParams } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faLink } from '@fortawesome/free-solid-svg-icons/faLink'\nimport CatCard from '@/components/CatCard'\nimport { CAT_FORM } from '@/model/cats/schema'\n\nexport default observer(({ breed }) => {\n  const { eventId } = useGlobalSearchParams()\n  const [$selected, set$selected] = useState()\n  const $new = $()\n  const $showModal = $()\n  const $mode = $()\n  const $fields = useFormFields$(CAT_FORM)\n  const validate = useValidate()\n\n  function showCreate () {\n    $new.set({ breed })\n    $fields.breed.disabled.set(true)\n    set$selected(() => $new)\n    $mode.set('new')\n    $showModal.set(true)\n  }\n\n  function showEdit ($cat) {\n    $fields.breed.disabled.del()\n    set$selected(() => $cat)\n    $mode.set('edit')\n    $showModal.set(true)\n  }\n\n  function cancel () {\n    if (!$showModal.get()) return\n    $showModal.del()\n    $mode.del()\n  }\n\n  async function create () {\n    if (!validate()) return\n    await $.cats.addNew({\n      ...$new.getDeepCopy(),\n      eventId\n    })\n    cancel()\n  }\n\n  async function deleteCat () {\n    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return\n    await $selected.del()\n    cancel()\n  }\n\n  return pug`\n    ScrollView(full)\n      Content(full pure)\n        CatsList(eventId=eventId onEdit=showEdit breed=breed)\n    Content(padding=1)\n      Button(onPress=showCreate) Add new #{breed}\n    Modal(\n      title=$mode.get() === 'new' ? 'Create cat' : 'Edit cat'\n      $visible=$showModal\n      onDismiss=cancel\n    )\n      - const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic')\n      Form(\n        key=$selected?.getId() || 'NEW'\n        $fields=$fields\n        $value=$selected\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n        customInputs={\n          likes: SelectLikesInput\n        }\n        validate=validate\n      )\n      Br\n      if $mode.get() === 'new'\n        Div(align='right' row)\n          Button(onPress=cancel) Cancel\n          Button(disabled=validate.hasErrors pushed variant='flat' color='primary' onPress=create) Create\n      else if $mode.get() === 'edit'\n        Div(align='right' row)\n          Button(color='error' onPress=deleteCat) Delete\n  `\n})\n\nconst CatsList = observer(({ onEdit, breed, eventId }) => {\n  if (!eventId) return pug`Alert(variant='error') No event specified`\n  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      Item(key=$cat.getId())\n        CatCard($cat=$cat)\n        Item.Right\n          Div(vAlign='center' row gap=1)\n            if !hasContact($cat)\n              Tag(color='error') No contact\n            if !$cat.photoFileId.get()\n              Tag(color='error') No photo\n            Button(variant='text' icon=faPen onPress=() => onEdit($cat) tooltip='Edit')\n            Link(href='/events/' + eventId + '/matches/' + $cat.getId())\n              Button(variant='text' icon=faHeart tooltip='Matches')\n            Link(href='/cats/' + $cat.token.get())\n              Button(variant='text' icon=faLink tooltip='Cat profile link') Link\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nconst SelectLikesInput = observer(({ $value, ...props }) => {\n  const { oppositeBreed, eventId } = { ...useFormProps(), ...props }\n  return pug`\n    if oppositeBreed\n      SelectLikes(\n        $likes=$value\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n      )\n    else\n      Alert(variant='warning') Select breed to choose likes\n  `\n})\n\nconst SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {\n  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      - const catId = $cat.getId()\n      Item.item(\n        key=catId\n        styleName={ selected: $likes[catId].get() }\n        onPress=() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)\n      )\n        CatCard($cat=$cat small)\n    else\n      Alert(variant='info') No cats with selected breed yet\n    style(lang='styl')\n      .item\n        border-radius 1u\n        &.selected\n          // FIXME: We can't use color var(--color-text-success-strong) here\n          background-color var(--color-text-success-strong)\n  `\n})\n"
   ],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,iBACE,mBACE,kBAAiB,SAAQ,QAAO,UAAS,OAAM,iCACnD,iBAAgB,IACd,gBAAe,YAAY,SAAU,0BACvC,MACE,OAAM,mDACN,UAAS,YACT,WAAU,iBAER,wHACF,KACE,KAAI,6BACJ,SAAQ,SACR,QAAO,WACP,eAAc,eACd,SAAQ,SACR,cAAa;AACjB;AACA,OACI,UAAS,aAEX,MACG,yBACD,uBACE,gBAAe,QAAQ,gBACvB,iBAAgB,oBAAmB,+CAA8C,QAAQ,wBACrF,0BACN,uBACE,8BAA6B,WAAW,mDAC/C;AACH;AACA;AACA;AACA,yBAA2B,sBAAuB,2BAAmB;AACrE;AACA,uEACS,QAAQ,8BACX,UAAS,eACP,cAAa,SACb,YACE,6BAA4B,IACvB,qBACD,kBAAmB,yBAClB,2BACD,kBAAmB,uBACrB,4BAA2B,OAAM,SAAQ,oBAAmB,kBAC5D,WAAU,oDACR,4BAA2B,SAAQ,4BACrC,WAAU,8BACR,4BAA2B,QAAO,2BAA4B,6EACzE;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UACO,iBACD,YACE,QAAO,QACP,eAAc,eACd,SAAQ,eAGV,wBAAyB,qCAC5B;AACH;AACA;AACA;AACA;;IAaM;IACA;IACA;IACA;IACA;;;AAjBJ;AACF,uEACS,QAAQ,qCACT,mCACF,KAEE,aAFE,OAEQ,oCADV,KAAI,OAEJ,SAAQ,4EAER,cAAa,MAAK,0EAEpB,qBAAsB,6CAOzB;AACH",
+  "mappings": "AAAA;qDACoD;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,iBACE,mBACE,kBAAiB,SAAQ,QAAO,UAAS,OAAM,iCACnD,iBAAgB,IACd,gBAAe,YAAY,SAAU,0BACvC,MACE,OAAM,mDACN,UAAS,YACT,WAAU,iBAER,wHACF,KACE,KAAI,6BACJ,SAAQ,SACR,QAAO,WACP,eAAc,eACd,SAAQ,SACR,cAAa;AACjB;AACA,OACI,UAAS,aAEX,MACG,yBACD,uBACE,gBAAe,QAAQ,gBACvB,iBAAgB,oBAAmB,+CAA8C,QAAQ,wBACrF,0BACN,uBACE,8BAA6B,WAAW,mDAC/C;AACH;AACA;AACA;AACA,yBAA2B,sBAAuB,2BAAmB;AACrE;AACA,uEACS,QAAQ,8BACX,UAAS,eACP,cAAa,SACb,YACE,6BAA4B,IACvB,qBACD,kBAAmB,yBAClB,2BACD,kBAAmB,uBACrB,4BAA2B,OAAM,SAAQ,oBAAmB,kBAC5D,WAAU,oDACR,4BAA2B,SAAQ,4BACrC,WAAU,8BACR,4BAA2B,QAAO,2BAA4B,6EACzE;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UACO,iBACD,YACE,QAAO,QACP,eAAc,eACd,SAAQ,eAGV,wBAAyB,qCAC5B;AACH;AACA;AACA;;IAcM;IACA;IACA;IACA;IACA;;;AAjBN;AACA,uEACS,QAAQ,qCACT,mCACF,KAEE,aAFE,OAEQ,oCADV,KAAI,OAEJ,SAAQ,4EAER,cAAa,MAAK,0EAEpB,qBAAsB,6CAOzB;AACH",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.js.output.tsx b/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.js.output.tsx
index 01bc51a..6d3b4ec 100644
--- a/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.js.output.tsx
+++ b/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.js.output.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import {observer,useSub,$,styl} from 'startupjs'    
+import { observer, useSub, $, styl } from 'startupjs'
 import {
   Link, Item, ScrollView, Form, useFormProps, Alert,
   Content, Tag, Br, Button, Modal, Div, confirm,
@@ -78,7 +78,6 @@ const SelectLikesInput = observer(({ $value, ...props }) => {
 })
 
 const SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {
-  
   styl`
     .item
       border-radius 1u
@@ -86,7 +85,7 @@ const SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {
         // FIXME: We can't use color var(--color-text-success-strong) here
         background-color var(--color-text-success-strong)
 
-  `;
-const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })
-  return ((() => {const __pugEachResult: JSX.Element[] = [];for (const $cat of $cats) {__pugEachResult.push((() => {const catId = $cat.getId();return <Item styleName={["item", { selected: $likes[catId].get() }]} key={catId} onPress={() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)}><CatCard $cat={$cat} small /></Item>;})());}return __pugEachResult.length ? __pugEachResult : <Alert variant='info'>No cats with selected breed yet</Alert>;})())
+  `
+  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })
+  return ((() => {const __pugEachResult: JSX.Element[] = [];for (const $cat of $cats) {__pugEachResult.push((() => {const catId = $cat.getId();return <Item styleName={['item', { selected: $likes[catId].get() }]} key={catId} onPress={() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)}><CatCard $cat={$cat} small /></Item>;})());}return __pugEachResult.length ? __pugEachResult : <Alert variant='info'>No cats with selected breed yet</Alert>;})())
 })
diff --git a/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.tsx.output.sourcemap.json
new file mode 100644
index 0000000..529de6b
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.tsx.output.sourcemap.json
@@ -0,0 +1,13 @@
+{
+  "version": 3,
+  "file": "test/fixtures/real-project/event-tabs-breed.tsx",
+  "names": [],
+  "sources": [
+    "test/fixtures/real-project/event-tabs-breed.tsx"
+  ],
+  "sourcesContent": [
+    "import React, { useState } from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport {\n  Link, Item, ScrollView, Form, useFormProps, Alert,\n  Content, Tag, Br, Button, Modal, Div, confirm,\n  useFormFields$, useValidate\n} from 'startupjs-ui'\nimport { useGlobalSearchParams } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faLink } from '@fortawesome/free-solid-svg-icons/faLink'\nimport CatCard from '@/components/CatCard'\nimport { CAT_FORM } from '@/model/cats/schema'\n\nexport default observer(({ breed }) => {\n  const { eventId } = useGlobalSearchParams()\n  const [$selected, set$selected] = useState()\n  const $new = $()\n  const $showModal = $()\n  const $mode = $()\n  const $fields = useFormFields$(CAT_FORM)\n  const validate = useValidate()\n\n  function showCreate () {\n    $new.set({ breed })\n    $fields.breed.disabled.set(true)\n    set$selected(() => $new)\n    $mode.set('new')\n    $showModal.set(true)\n  }\n\n  function showEdit ($cat) {\n    $fields.breed.disabled.del()\n    set$selected(() => $cat)\n    $mode.set('edit')\n    $showModal.set(true)\n  }\n\n  function cancel () {\n    if (!$showModal.get()) return\n    $showModal.del()\n    $mode.del()\n  }\n\n  async function create () {\n    if (!validate()) return\n    await $.cats.addNew({\n      ...$new.getDeepCopy(),\n      eventId\n    })\n    cancel()\n  }\n\n  async function deleteCat () {\n    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return\n    await $selected.del()\n    cancel()\n  }\n\n  return pug`\n    ScrollView(full)\n      Content(full pure)\n        CatsList(eventId=eventId onEdit=showEdit breed=breed)\n    Content(padding=1)\n      Button(onPress=showCreate) Add new #{breed}\n    Modal(\n      title=$mode.get() === 'new' ? 'Create cat' : 'Edit cat'\n      $visible=$showModal\n      onDismiss=cancel\n    )\n      - const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic')\n      Form(\n        key=$selected?.getId() || 'NEW'\n        $fields=$fields\n        $value=$selected\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n        customInputs={\n          likes: SelectLikesInput\n        }\n        validate=validate\n      )\n      Br\n      if $mode.get() === 'new'\n        Div(align='right' row)\n          Button(onPress=cancel) Cancel\n          Button(disabled=validate.hasErrors pushed variant='flat' color='primary' onPress=create) Create\n      else if $mode.get() === 'edit'\n        Div(align='right' row)\n          Button(color='error' onPress=deleteCat) Delete\n  `\n})\n\nconst CatsList = observer(({ onEdit, breed, eventId }) => {\n  if (!eventId) return pug`Alert(variant='error') No event specified`\n  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      Item(key=$cat.getId())\n        CatCard($cat=$cat)\n        Item.Right\n          Div(vAlign='center' row gap=1)\n            if !hasContact($cat)\n              Tag(color='error') No contact\n            if !$cat.photoFileId.get()\n              Tag(color='error') No photo\n            Button(variant='text' icon=faPen onPress=() => onEdit($cat) tooltip='Edit')\n            Link(href='/events/' + eventId + '/matches/' + $cat.getId())\n              Button(variant='text' icon=faHeart tooltip='Matches')\n            Link(href='/cats/' + $cat.token.get())\n              Button(variant='text' icon=faLink tooltip='Cat profile link') Link\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nconst SelectLikesInput = observer(({ $value, ...props }) => {\n  const { oppositeBreed, eventId } = { ...useFormProps(), ...props }\n  return pug`\n    if oppositeBreed\n      SelectLikes(\n        $likes=$value\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n      )\n    else\n      Alert(variant='warning') Select breed to choose likes\n  `\n})\n\nconst SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {\n  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      - const catId = $cat.getId()\n      Item.item(\n        key=catId\n        styleName={ selected: $likes[catId].get() }\n        onPress=() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)\n      )\n        CatCard($cat=$cat small)\n    else\n      Alert(variant='info') No cats with selected breed yet\n    style(lang='styl')\n      .item\n        border-radius 1u\n        &.selected\n          // FIXME: We can't use color var(--color-text-success-strong) here\n          background-color var(--color-text-success-strong)\n  `\n})\n"
+  ],
+  "mappings": "AAAA;qDACoD;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,iBACE,mBACE,kBAAiB,SAAQ,QAAO,UAAS,OAAM,iCACnD,iBAAgB,IACd,gBAAe,YAAY,SAAU,0BACvC,MACE,OAAM,mDACN,UAAS,YACT,WAAU,iBAER,wHACF,KACE,KAAI,6BACJ,SAAQ,SACR,QAAO,WACP,eAAc,eACd,SAAQ,SACR,cAAa;AACjB;AACA,OACI,UAAS,aAEX,MACG,yBACD,uBACE,gBAAe,QAAQ,gBACvB,iBAAgB,oBAAmB,+CAA8C,QAAQ,wBACrF,0BACN,uBACE,8BAA6B,WAAW,mDAC/C;AACH;AACA;AACA;AACA,yBAA2B,sBAAuB,2BAAmB;AACrE;AACA,uEACS,QAAQ,8BACX,UAAS,eACP,cAAa,SACb,YACE,6BAA4B,IACvB,qBACD,kBAAmB,yBAClB,2BACD,kBAAmB,uBACrB,4BAA2B,OAAM,SAAQ,oBAAmB,kBAC5D,WAAU,oDACR,4BAA2B,SAAQ,4BACrC,WAAU,8BACR,4BAA2B,QAAO,2BAA4B,6EACzE;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UACO,iBACD,YACE,QAAO,QACP,eAAc,eACd,SAAQ,eAGV,wBAAyB,qCAC5B;AACH;AACA;AACA;;IAcM;IACA;IACA;IACA;IACA;;;AAjBN;AACA,uEACS,QAAQ,qCACT,mCACF,KAEE,aAFE,OAEQ,oCADV,KAAI,OAEJ,SAAQ,4EAER,cAAa,MAAK,0EAEpB,qBAAsB,6CAOzB;AACH",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.tsx.output.tsx b/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.tsx.output.tsx
new file mode 100644
index 0000000..6d3b4ec
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/shadow/event-tabs-breed.tsx.output.tsx
@@ -0,0 +1,91 @@
+import React, { useState } from 'react'
+import { observer, useSub, $, styl } from 'startupjs'
+import {
+  Link, Item, ScrollView, Form, useFormProps, Alert,
+  Content, Tag, Br, Button, Modal, Div, confirm,
+  useFormFields$, useValidate
+} from 'startupjs-ui'
+import { useGlobalSearchParams } from 'expo-router'
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
+import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'
+import { faLink } from '@fortawesome/free-solid-svg-icons/faLink'
+import CatCard from '@/components/CatCard'
+import { CAT_FORM } from '@/model/cats/schema'
+
+export default observer(({ breed }) => {
+  const { eventId } = useGlobalSearchParams()
+  const [$selected, set$selected] = useState()
+  const $new = $()
+  const $showModal = $()
+  const $mode = $()
+  const $fields = useFormFields$(CAT_FORM)
+  const validate = useValidate()
+
+  function showCreate () {
+    $new.set({ breed })
+    $fields.breed.disabled.set(true)
+    set$selected(() => $new)
+    $mode.set('new')
+    $showModal.set(true)
+  }
+
+  function showEdit ($cat) {
+    $fields.breed.disabled.del()
+    set$selected(() => $cat)
+    $mode.set('edit')
+    $showModal.set(true)
+  }
+
+  function cancel () {
+    if (!$showModal.get()) return
+    $showModal.del()
+    $mode.del()
+  }
+
+  async function create () {
+    if (!validate()) return
+    await $.cats.addNew({
+      ...$new.getDeepCopy(),
+      eventId
+    })
+    cancel()
+  }
+
+  async function deleteCat () {
+    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return
+    await $selected.del()
+    cancel()
+  }
+
+  return (<><ScrollView full><Content full pure><CatsList eventId={eventId} onEdit={showEdit} breed={breed} /></Content></ScrollView><Content padding={1}><Button onPress={showCreate}>Add new {breed}</Button></Content><Modal title={$mode.get() === 'new' ? 'Create cat' : 'Edit cat'} $visible={$showModal} onDismiss={cancel}>{(() => {const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic');return (<><Form key={$selected?.getId() || 'NEW'} $fields={$fields} $value={$selected} oppositeBreed={oppositeBreed} eventId={eventId} customInputs={{
+      likes: SelectLikesInput
+    }} validate={validate} /><Br />{$mode.get() === 'new' ? <Div align='right' row><Button onPress={cancel}>Cancel</Button><Button disabled={validate.hasErrors} pushed variant='flat' color='primary' onPress={create}>Create</Button></Div> : $mode.get() === 'edit' ? <Div align='right' row><Button color='error' onPress={deleteCat}>Delete</Button></Div> : null}</>);})()}</Modal></>)
+})
+
+const CatsList = observer(({ onEdit, breed, eventId }) => {
+  if (!eventId) return (<Alert variant='error'>No event specified</Alert>)
+  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })
+  return ((() => {const __pugEachResult: JSX.Element[] = [];for (const $cat of $cats) {__pugEachResult.push(<Item key={$cat.getId()}><CatCard $cat={$cat} /><Item.Right><Div vAlign='center' row gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}<Button variant='text' icon={faPen} onPress={() => onEdit($cat)} tooltip='Edit' /><Link href={'/events/' + eventId + '/matches/' + $cat.getId()}><Button variant='text' icon={faHeart} tooltip='Matches' /></Link><Link href={'/cats/' + $cat.token.get()}><Button variant='text' icon={faLink} tooltip='Cat profile link'>Link</Button></Link></Div></Item.Right></Item>);}return __pugEachResult;})())
+})
+
+function hasContact ($cat) {
+  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()
+}
+
+const SelectLikesInput = observer(({ $value, ...props }) => {
+  const { oppositeBreed, eventId } = { ...useFormProps(), ...props }
+  return (oppositeBreed ? <SelectLikes $likes={$value} oppositeBreed={oppositeBreed} eventId={eventId} /> : <Alert variant='warning'>Select breed to choose likes</Alert>)
+})
+
+const SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {
+  styl`
+    .item
+      border-radius 1u
+      &.selected
+        // FIXME: We can't use color var(--color-text-success-strong) here
+        background-color var(--color-text-success-strong)
+
+  `
+  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })
+  return ((() => {const __pugEachResult: JSX.Element[] = [];for (const $cat of $cats) {__pugEachResult.push((() => {const catId = $cat.getId();return <Item styleName={['item', { selected: $likes[catId].get() }]} key={catId} onPress={() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)}><CatCard $cat={$cat} small /></Item>;})());}return __pugEachResult.length ? __pugEachResult : <Alert variant='info'>No cats with selected breed yet</Alert>;})())
+})
diff --git a/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.js.output.sourcemap.json
index e5b03fc..8a020cb 100644
--- a/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.js.output.sourcemap.json
@@ -6,8 +6,8 @@
     "test/fixtures/real-project/event-tabs-layout.js"
   ],
   "sourcesContent": [
-    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, styl, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n  `\n  styl`\n    +tablet()\n      .screen\n        &:part(tabBar)\n          order -1\n          background-color transparent\n          border-bottom-width 1px\n          border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
+    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n    style(lang='styl')\n      +tablet()\n        .screen\n          &:part(tabBar)\n            order -1\n            background-color transparent\n            border-bottom-width 1px\n            border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
   ],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,aACE,SAAQ;AACV;AACA;AACA,QAEA,KACE,OAAM,mBACN,eAAc;AAChB;AACA;AACA;AACA;AACA;AACA,MAEE,YACE,aACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,cACA,SAAQ;AACZ;AACA,UAEE,YACE,gBACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,YACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,YACA,SAAQ;AACZ;AACA;AACA,oBAED;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WACI,kBAAiB,WAClB;AACH;AACA;AACA;AACA;AACA,aACI,gBAAe,4BAA2B,qBAAoB,OAAO,8BACrE,MACE,wBACA,UAAS,aAET,KACE,QAAO,QACP,QAAO,0BAEZ;AACH;AACA;AACA;AACA,WACI,WAAU,aAAY,OAAM,yCAC7B;AACH;AACA;AACA;AACA,WACI,WAAU,iBAAgB,OAAM,yCACjC;AACH;AACA;AACA;AACA,WACI,WAAU,SAAQ,OAAM,yCACzB;AACH;AACA;AACA;AACA,WACI,WAAU,WAAU,OAAM,yCAC3B;AACH",
+  "mappings": "AAAA;AACA;qDACoD;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;IA6DM;IACA;IACA;IACA;IACA;IACA;IACA;;;AAlEN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,aACE,SAAQ;AACV;AACA;AACA,QAEA,KACE,OAAM,mBACN,eAAc;AAChB;AACA;AACA;AACA;AACA;AACA,MAEE,YACE,aACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,cACA,SAAQ;AACZ;AACA,UAEE,YACE,gBACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,YACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,YACA,SAAQ;AACZ;AACA;AACA,oBAUD;AACH;AACA;AACA;AACA,WACI,kBAAiB,WAClB;AACH;AACA;AACA;AACA;AACA,aACI,gBAAe,4BAA2B,qBAAoB,OAAO,8BACrE,MACE,wBACA,UAAS,aAET,KACE,QAAO,QACP,QAAO,0BAEZ;AACH;AACA;AACA;AACA,WACI,WAAU,aAAY,OAAM,yCAC7B;AACH;AACA;AACA;AACA,WACI,WAAU,iBAAgB,OAAM,yCACjC;AACH;AACA;AACA;AACA,WACI,WAAU,SAAQ,OAAM,yCACzB;AACH;AACA;AACA;AACA,WACI,WAAU,WAAU,OAAM,yCAC3B;AACH",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.js.output.tsx b/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.js.output.tsx
index 158af3e..9e97862 100644
--- a/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.js.output.tsx
+++ b/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.js.output.tsx
@@ -1,6 +1,6 @@
 // import { Platform } from 'react-native'
 import React from 'react'
-import { observer, styl, $, useSub } from 'startupjs'     
+import { observer, $, useSub, styl } from 'startupjs'
 import { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'
 import { Tabs, useLocalSearchParams, Stack } from 'expo-router'
 import { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'
@@ -11,6 +11,16 @@ import { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'
 import { EVENT_FORM } from '@/model/events/schema'
 
 export default observer(function TabLayout () {
+  styl`
+    +tablet()
+      .screen
+        &:part(tabBar)
+          order -1
+          background-color transparent
+          border-bottom-width 1px
+          border-bottom-color rgba(0, 0, 0, 0.1)
+
+  `
   const getColor = useColors()
   const { eventId } = useLocalSearchParams()
   const $event = useSub($.events[eventId])
@@ -43,15 +53,6 @@ export default observer(function TabLayout () {
       title: 'Dev Only',
       tabBarIcon: renderTestIcon
     }} /></Tabs></>)
-  styl`
-    +tablet()
-      .screen
-        &:part(tabBar)
-          order -1
-          background-color transparent
-          border-bottom-width 1px
-          border-bottom-color rgba(0, 0, 0, 0.1)
-  `
 })
 
 function renderEditEvent ({ $event }) {
diff --git a/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.tsx.output.sourcemap.json
new file mode 100644
index 0000000..8dbf3d1
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.tsx.output.sourcemap.json
@@ -0,0 +1,13 @@
+{
+  "version": 3,
+  "file": "test/fixtures/real-project/event-tabs-layout.tsx",
+  "names": [],
+  "sources": [
+    "test/fixtures/real-project/event-tabs-layout.tsx"
+  ],
+  "sourcesContent": [
+    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n    style(lang='styl')\n      +tablet()\n        .screen\n          &:part(tabBar)\n            order -1\n            background-color transparent\n            border-bottom-width 1px\n            border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
+  ],
+  "mappings": "AAAA;AACA;qDACoD;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;IA6DM;IACA;IACA;IACA;IACA;IACA;IACA;;;AAlEN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,aACE,SAAQ;AACV;AACA;AACA,QAEA,KACE,OAAM,mBACN,eAAc;AAChB;AACA;AACA;AACA;AACA;AACA,MAEE,YACE,aACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,cACA,SAAQ;AACZ;AACA,UAEE,YACE,gBACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,YACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,YACA,SAAQ;AACZ;AACA;AACA,oBAUD;AACH;AACA;AACA;AACA,WACI,kBAAiB,WAClB;AACH;AACA;AACA;AACA;AACA,aACI,gBAAe,4BAA2B,qBAAoB,OAAO,8BACrE,MACE,wBACA,UAAS,aAET,KACE,QAAO,QACP,QAAO,0BAEZ;AACH;AACA;AACA;AACA,WACI,WAAU,aAAY,OAAM,yCAC7B;AACH;AACA;AACA;AACA,WACI,WAAU,iBAAgB,OAAM,yCACjC;AACH;AACA;AACA;AACA,WACI,WAAU,SAAQ,OAAM,yCACzB;AACH;AACA;AACA;AACA,WACI,WAAU,WAAU,OAAM,yCAC3B;AACH",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.tsx.output.tsx b/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.tsx.output.tsx
new file mode 100644
index 0000000..9e97862
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/shadow/event-tabs-layout.tsx.output.tsx
@@ -0,0 +1,81 @@
+// import { Platform } from 'react-native'
+import React from 'react'
+import { observer, $, useSub, styl } from 'startupjs'
+import { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'
+import { Tabs, useLocalSearchParams, Stack } from 'expo-router'
+import { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'
+import { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'
+import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
+import { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'
+import { EVENT_FORM } from '@/model/events/schema'
+
+export default observer(function TabLayout () {
+  styl`
+    +tablet()
+      .screen
+        &:part(tabBar)
+          order -1
+          background-color transparent
+          border-bottom-width 1px
+          border-bottom-color rgba(0, 0, 0, 0.1)
+
+  `
+  const getColor = useColors()
+  const { eventId } = useLocalSearchParams()
+  const $event = useSub($.events[eventId])
+  if (!$event.get()) throw Error('No such event')
+
+  // NOTE:
+  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.
+  // tabBarStyle/order - Move the tab bar to the top on tablet+
+  return (<><Stack.Screen options={{
+    title: $event.name.get(),
+    headerRight: () => renderEditEvent({ $event })
+  }} /><Tabs title={$event.name.get()} screenOptions={{
+    ...styl('screen'),
+    tabBarActiveTintColor: getColor('primary'),
+    tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',
+    headerShown: false,
+    headerTitle: $event.name.get()
+  }}><Tabs.Screen name='index' options={{
+      title: 'Dashboard',
+      tabBarIcon: renderHomeIcon
+    }} /><Tabs.Screen name='-breed' options={{
+      href: null
+    }} /><Tabs.Screen name='domestic' options={{
+      title: 'Domestic Cats',
+      tabBarIcon: renderDomesticIcon
+    }} /><Tabs.Screen name='wild' options={{
+      title: 'Wild Cats',
+      tabBarIcon: renderWildIcon
+    }} /><Tabs.Screen name='test' options={{
+      title: 'Dev Only',
+      tabBarIcon: renderTestIcon
+    }} /></Tabs></>)
+})
+
+function renderEditEvent ({ $event }) {
+  return (<EditEvent $event={$event} />)
+}
+
+const EditEvent = observer(({ $event }) => {
+  const $showModal = $()
+  return (<><Button onPress={() => $showModal.set(true)} variant='text' icon={faPen}>Edit this cat meetup</Button><Modal title='Edit cat meetup' $visible={$showModal}><Form $value={$event} fields={EVENT_FORM} /></Modal></>)
+})
+
+function renderWildIcon ({ color, size }) {
+  return (<Icon icon={faWildBadge} style={{ color, width: size, height: size }} />)
+}
+
+function renderDomesticIcon ({ color, size }) {
+  return (<Icon icon={faDomesticBadge} style={{ color, width: size, height: size }} />)
+}
+
+function renderHomeIcon ({ color, size }) {
+  return (<Icon icon={faHeart} style={{ color, width: size, height: size }} />)
+}
+
+function renderTestIcon ({ color, size }) {
+  return (<Icon icon={faToolbox} style={{ color, width: size, height: size }} />)
+}
diff --git a/test/fixtures/real-project/snapshots/swc/CatCard.js.output.jsx b/test/fixtures/real-project/snapshots/swc/CatCard.js.output.jsx
index fc33d6c..c373b6f 100644
--- a/test/fixtures/real-project/snapshots/swc/CatCard.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/swc/CatCard.js.output.jsx
@@ -1,11 +1,9 @@
 import React from 'react'
-import { styl, observer, useSub, $ } from 'startupjs'     
+import { observer, useSub, $, styl } from 'startupjs'
 import { Div, Span, Avatar, Link } from 'startupjs-ui'
 
 export default observer(({ $cat, showPhone, large, small }) => {
-  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()
-  return (<Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={["avatar", { large, small }]} fileId={photoFileId} name={name} /> : <Avatar styleName={["avatar", { large, small }]}>{name}</Avatar>}<Div row><Span styleName={["text", { large }]} bold>{(number || 'X') + '. '}</Span><Div><Span styleName={["text", { large }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={["text", { large }]}><Span bold>Phone:{' '}</Span>{phone}</Span> : null}{catgram ? <Span styleName={["text", { large }]}><Span bold>Catgram:{' '}</Span><Link styleName={["text", { large }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={["text", { large }]}><Span bold>Phonegram:{' '}</Span><Link styleName={["text", { large }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>)
-  /* eslint-disable-line */styl`
+  styl`
     .avatar
       margin-right 1u
       &.large
@@ -16,7 +14,10 @@ export default observer(({ $cat, showPhone, large, small }) => {
         height @width
     .text.large
       font(h6)
+
   `
+  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()
+  return (<Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={['avatar', { large, small }]} fileId={photoFileId} name={name} /> : <Avatar styleName={['avatar', { large, small }]}>{name}</Avatar>}<Div row><Span styleName={['text', { large }]} bold>{(number || 'X') + '. '}</Span><Div><Span styleName={['text', { large }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={['text', { large }]}><Span bold>Phone:{' '}</Span>{phone}</Span> : null}{catgram ? <Span styleName={['text', { large }]}><Span bold>Catgram:{' '}</Span><Link styleName={['text', { large }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={['text', { large }]}><Span bold>Phonegram:{' '}</Span><Link styleName={['text', { large }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>)
 })
 
 const Photo = observer(({ fileId, name }) => {
diff --git a/test/fixtures/real-project/snapshots/swc/CatCard.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/swc/CatCard.js.output.sourcemap.json
index c236dde..6970ef4 100644
--- a/test/fixtures/real-project/snapshots/swc/CatCard.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/swc/CatCard.js.output.sourcemap.json
@@ -6,8 +6,8 @@
     "test/fixtures/real-project/CatCard.js"
   ],
   "sourcesContent": [
-    "import React from 'react'\nimport { pug, styl, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n  `\n  /* eslint-disable-line */styl`\n    .avatar\n      margin-right 1u\n      &.large\n        width 12u\n        height @width\n      &.small\n        width 4u\n        height @width\n    .text.large\n      font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
+    "import React from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n    style(lang='styl')\n      .avatar\n        margin-right 1u\n        &.large\n          width 12u\n          height @width\n        &.small\n          width 4u\n          height @width\n      .text.large\n        font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
   ],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA,WACI,qCACK,eACD,MAAa,aAAR,SAAkB,mBAAiB,QAAO,aAAY,MAAK,YAEhE,OAAc,aAAR,SAAkB,oBAAmB,gBAC7C,SACE,KAAe,aAAX,OAAqB,YAAf,MAA2B,+BACrC,KACE,KAAU,aAAN,OAAgB,aAAY,aAC7B,eACE,SACD,KAAU,aAAN,OAAgB,aAClB,UAAW,OAAQ,YACjB,sBACH,WACD,KAAU,aAAN,OAAgB,aAClB,UAAW,SAAU,YACrB,KAAU,aAAN,OAAgB,YAAU,IAAG,0BAA0B,+BAC5D,aACD,KAAU,aAAN,OAAgB,aAClB,UAAW,WAAY,YACvB,KAAU,aAAN,OAAgB,YAAU,IAAG,8BAA8B,8DAC5E;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WACI,wBAAuB,MAAM,eAC9B;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA",
+  "mappings": "AAAA;qDACoD;AACpD;AACA;AACA;;IA0BM;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAlCN;AACA,WACI,qCACK,eACD,MAAa,aAAR,SAAkB,mBAAiB,QAAO,aAAY,MAAK,YAEhE,OAAc,aAAR,SAAkB,oBAAmB,gBAC7C,SACE,KAAe,aAAX,OAAqB,YAAf,MAA2B,+BACrC,KACE,KAAU,aAAN,OAAgB,aAAY,aAC7B,eACE,SACD,KAAU,aAAN,OAAgB,aAClB,UAAW,OAAQ,YACjB,sBACH,WACD,KAAU,aAAN,OAAgB,aAClB,UAAW,SAAU,YACrB,KAAU,aAAN,OAAgB,YAAU,IAAG,0BAA0B,+BAC5D,aACD,KAAU,aAAN,OAAgB,aAClB,UAAW,WAAY,YACvB,KAAU,aAAN,OAAgB,YAAU,IAAG,8BAA8B,8DAY5E;AACH;AACA;AACA;AACA;AACA;AACA;AACA,WACI,wBAAuB,MAAM,eAC9B;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/swc/CatCard.tsx.output.jsx b/test/fixtures/real-project/snapshots/swc/CatCard.tsx.output.jsx
new file mode 100644
index 0000000..c373b6f
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/swc/CatCard.tsx.output.jsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { observer, useSub, $, styl } from 'startupjs'
+import { Div, Span, Avatar, Link } from 'startupjs-ui'
+
+export default observer(({ $cat, showPhone, large, small }) => {
+  styl`
+    .avatar
+      margin-right 1u
+      &.large
+        width 12u
+        height @width
+      &.small
+        width 4u
+        height @width
+    .text.large
+      font(h6)
+
+  `
+  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()
+  return (<Div part='root' row vAlign='center'>{photoFileId ? <Photo styleName={['avatar', { large, small }]} fileId={photoFileId} name={name} /> : <Avatar styleName={['avatar', { large, small }]}>{name}</Avatar>}<Div row><Span styleName={['text', { large }]} bold>{(number || 'X') + '. '}</Span><Div><Span styleName={['text', { large }]}>{name}</Span>{showPhone ? <>{phone ? <Span styleName={['text', { large }]}><Span bold>Phone:{' '}</Span>{phone}</Span> : null}{catgram ? <Span styleName={['text', { large }]}><Span bold>Catgram:{' '}</Span><Link styleName={['text', { large }]} to={getCatgramLink(catgram)}>{catgram}</Link></Span> : null}{phonegram ? <Span styleName={['text', { large }]}><Span bold>Phonegram:{' '}</Span><Link styleName={['text', { large }]} to={getPhonegramLink(phonegram)}>{phonegram}</Link></Span> : null}</> : null}</Div></Div></Div>)
+})
+
+const Photo = observer(({ fileId, name }) => {
+  const $file = useSub($.files[fileId])
+  let url
+  try { url = $file.getUrl() } catch (err) {}
+  return (<Avatar part='root' src={url}>{name}</Avatar>)
+})
+
+function getCatgramLink (username) {
+  if (!username) return
+  if (/:\/\//.test(username)) return username
+  return 'https://catgr.am/' + username
+}
+
+function getPhonegramLink (username) {
+  if (!username) return
+  if (/:\/\//.test(username)) return username
+  return 'https://www.phonegram.com/' + username
+}
diff --git a/test/fixtures/real-project/snapshots/swc/CatCard.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/swc/CatCard.tsx.output.sourcemap.json
new file mode 100644
index 0000000..fd7dc9f
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/swc/CatCard.tsx.output.sourcemap.json
@@ -0,0 +1,13 @@
+{
+  "version": 3,
+  "file": "test/fixtures/real-project/CatCard.tsx",
+  "names": [],
+  "sources": [
+    "test/fixtures/real-project/CatCard.tsx"
+  ],
+  "sourcesContent": [
+    "import React from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport { Div, Span, Avatar, Link } from 'startupjs-ui'\n\nexport default observer(({ $cat, showPhone, large, small }) => {\n  const { name, number, phone, catgram, photoFileId, phonegram } = $cat.get()\n  return pug`\n    Div(part='root' row vAlign='center')\n      if photoFileId\n        Photo.avatar(styleName={ large, small } fileId=photoFileId name=name)\n      else\n        Avatar.avatar(styleName={ large, small })= name\n      Div(row)\n        Span.text(bold styleName={ large })= (number || 'X') + '. '\n        Div\n          Span.text(styleName={ large })= name\n          if showPhone\n            if phone\n              Span.text(styleName={ large })\n                Span(bold) Phone:#{' '}\n                = phone\n            if catgram\n              Span.text(styleName={ large })\n                Span(bold) Catgram:#{' '}\n                Link.text(styleName={ large } to=getCatgramLink(catgram))= catgram\n            if phonegram\n              Span.text(styleName={ large })\n                Span(bold) Phonegram:#{' '}\n                Link.text(styleName={ large } to=getPhonegramLink(phonegram))= phonegram\n    style(lang='styl')\n      .avatar\n        margin-right 1u\n        &.large\n          width 12u\n          height @width\n        &.small\n          width 4u\n          height @width\n      .text.large\n        font(h6)\n  `\n})\n\nconst Photo = observer(({ fileId, name }) => {\n  const $file = useSub($.files[fileId])\n  let url\n  try { url = $file.getUrl() } catch (err) {}\n  return pug`\n    Avatar(part='root' src=url)= name\n  `\n})\n\nfunction getCatgramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://catgr.am/' + username\n}\n\nfunction getPhonegramLink (username) {\n  if (!username) return\n  if (/:\\/\\//.test(username)) return username\n  return 'https://www.phonegram.com/' + username\n}\n"
+  ],
+  "mappings": "AAAA;qDACoD;AACpD;AACA;AACA;;IA0BM;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAlCN;AACA,WACI,qCACK,eACD,MAAa,aAAR,SAAkB,mBAAiB,QAAO,aAAY,MAAK,YAEhE,OAAc,aAAR,SAAkB,oBAAmB,gBAC7C,SACE,KAAe,aAAX,OAAqB,YAAf,MAA2B,+BACrC,KACE,KAAU,aAAN,OAAgB,aAAY,aAC7B,eACE,SACD,KAAU,aAAN,OAAgB,aAClB,UAAW,OAAQ,YACjB,sBACH,WACD,KAAU,aAAN,OAAgB,aAClB,UAAW,SAAU,YACrB,KAAU,aAAN,OAAgB,YAAU,IAAG,0BAA0B,+BAC5D,aACD,KAAU,aAAN,OAAgB,aAClB,UAAW,WAAY,YACvB,KAAU,aAAN,OAAgB,YAAU,IAAG,8BAA8B,8DAY5E;AACH;AACA;AACA;AACA;AACA;AACA;AACA,WACI,wBAAuB,MAAM,eAC9B;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/swc/cat-profile-link.js.output.jsx b/test/fixtures/real-project/snapshots/swc/cat-profile-link.js.output.jsx
index 8df3c21..5975a21 100644
--- a/test/fixtures/real-project/snapshots/swc/cat-profile-link.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/swc/cat-profile-link.js.output.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { observer, $, useSub, styl } from 'startupjs'     
+import { observer, $, useSub, styl } from 'startupjs'
 import { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'
 import { useGlobalSearchParams, Stack } from 'expo-router'
 import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
@@ -33,16 +33,17 @@ export default observer(() => {
 })
 
 const Profile = observer(({ $cat, $event }) => {
+  styl`
+    .hackSidePadding
+      width 1u
+
+  `
   const $showEdit = $()
   const { tablet } = useMedia()
   const excludeNumber = $event.stage.get() !== STAGES.InProgress
   const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})
 
-  return (<><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={["hackSidePadding"]} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? 'Edit cat profile' : 'Edit'}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>)
-  styl`
-    .hackSidePadding
-      width 1u
-  `
+  return (<><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={['hackSidePadding']} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? 'Edit cat profile' : 'Edit'}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>)
 })
 
 function hasContact ($cat) {
diff --git a/test/fixtures/real-project/snapshots/swc/cat-profile-link.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/swc/cat-profile-link.js.output.sourcemap.json
index c078110..d014b54 100644
--- a/test/fixtures/real-project/snapshots/swc/cat-profile-link.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/swc/cat-profile-link.js.output.sourcemap.json
@@ -6,8 +6,8 @@
     "test/fixtures/real-project/cat-profile-link.js"
   ],
   "sourcesContent": [
-    "import React from 'react'\nimport { pug, observer, $, useSub, styl } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n  `\n  styl`\n    .hackSidePadding\n      width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
+    "import React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n    style(lang='styl')\n      .hackSidePadding\n        width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
   ],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACM,cAAa,SACd;AACL;AACA;AACA;AACA,aACM,cAAa,MAAK,QAAO,WAC1B;AACL;AACA;AACA;AACA;AACA,aACI,aACE,SAAQ;AACV;AACA;AACA,QAEA,YAAW,MAAK,QAAO,cACxB;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,6BAA4B,IACvB,qBACD,kBAAmB,yBAClB,2BACD,kBAAmB,uBAClB,wCACD,iBAAG,yBAEH,OACE,eACA,MAAK,OACL,SAAQ,4BAEL,SACC,qBAEA,wBACV,MACE,yBACA,UAAS,YAET,KACE,QAAO,mBACP,QAAO,oBAEZ;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WACI,iBACE,uBACE,KACI;AACP;AACA,CAAQ;AACR;AACA,CAAQ,kGACV;AACH",
+  "mappings": "AAAA;qDACoD;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACM,cAAa,SACd;AACL;AACA;AACA;AACA,aACM,cAAa,MAAK,QAAO,WAC1B;AACL;AACA;AACA;AACA;AACA,aACI,aACE,SAAQ;AACV;AACA;AACA,QAEA,YAAW,MAAK,QAAO,cACxB;AACH;AACA;AACA;;IAiCM;IACA;;;AAjCN;AACA;AACA;AACA;AACA;AACA,aACI,6BAA4B,IACvB,qBACD,kBAAmB,yBAClB,2BACD,kBAAmB,uBAClB,wCACD,iBAAG,yBAEH,OACE,eACA,MAAK,OACL,SAAQ,4BAEL,SACC,qBAEA,wBACV,MACE,yBACA,UAAS,YAET,KACE,QAAO,mBACP,QAAO,oBAKZ;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WACI,iBACE,uBACE,KACI;AACP;AACA,CAAQ;AACR;AACA,CAAQ,kGACV;AACH",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/swc/cat-profile-link.tsx.output.jsx b/test/fixtures/real-project/snapshots/swc/cat-profile-link.tsx.output.jsx
new file mode 100644
index 0000000..5975a21
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/swc/cat-profile-link.tsx.output.jsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import { observer, $, useSub, styl } from 'startupjs'
+import { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'
+import { useGlobalSearchParams, Stack } from 'expo-router'
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
+import CatCard from '@/components/CatCard'
+import * as stages from '@/components/stages'
+import { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'
+import { STAGES } from '@/model/events/schema'
+
+export default observer(() => {
+  const { token } = useGlobalSearchParams()
+  const [$cat] = useSub($.cats, { token })
+  if (!$cat) return renderExpired()
+
+  const eventId = $cat.eventId.get()
+  const $event = useSub($.events[eventId])
+
+  function renderTitle () {
+    return (<CatCard $cat={$cat} />)
+  }
+
+  function renderSettings () {
+    return (<Profile $cat={$cat} $event={$event} />)
+  }
+
+  const Stage = stages[$cat.getMyStage()]
+
+  return (<><Stack.Screen options={{
+    headerTitle: renderTitle,
+    headerRight: renderSettings
+  }} /><Stage $cat={$cat} $event={$event} /></>)
+})
+
+const Profile = observer(({ $cat, $event }) => {
+  styl`
+    .hackSidePadding
+      width 1u
+
+  `
+  const $showEdit = $()
+  const { tablet } = useMedia()
+  const excludeNumber = $event.stage.get() !== STAGES.InProgress
+  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})
+
+  return (<><Div row vAlign='center' gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}{$cat.getMyStage() === STAGES.Profile ? <Div styleName={['hackSidePadding']} /> : <Button variant='text' icon={faPen} onPress={() => $showEdit.set(true)}>{tablet ? 'Edit cat profile' : 'Edit'}</Button>}</Div><Modal title='Edit cat profile' $visible={$showEdit}><Form fields={profileEditFields} $value={$cat} /></Modal></>)
+})
+
+function hasContact ($cat) {
+  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()
+}
+
+function renderExpired () {
+  return (<Content padding><Alert variant='error'><Span>Cat profile link is incorrect or already expired.
+
+Your cat meetup profile link is only valid for a limited period of time.
+
+If you believe this is an error, please contact the cat meetup organizer.</Span></Alert></Content>)
+}
diff --git a/test/fixtures/real-project/snapshots/swc/cat-profile-link.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/swc/cat-profile-link.tsx.output.sourcemap.json
new file mode 100644
index 0000000..2603a48
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/swc/cat-profile-link.tsx.output.sourcemap.json
@@ -0,0 +1,13 @@
+{
+  "version": 3,
+  "file": "test/fixtures/real-project/cat-profile-link.tsx",
+  "names": [],
+  "sources": [
+    "test/fixtures/real-project/cat-profile-link.tsx"
+  ],
+  "sourcesContent": [
+    "import React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { Alert, Span, Modal, Content, Button, Form, Div, Tag, useMedia, useFormFields } from 'startupjs-ui'\nimport { useGlobalSearchParams, Stack } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport CatCard from '@/components/CatCard'\nimport * as stages from '@/components/stages'\nimport { CAT_PROFILE_EDIT_FORM } from '@/model/cats/schema'\nimport { STAGES } from '@/model/events/schema'\n\nexport default observer(() => {\n  const { token } = useGlobalSearchParams()\n  const [$cat] = useSub($.cats, { token })\n  if (!$cat) return renderExpired()\n\n  const eventId = $cat.eventId.get()\n  const $event = useSub($.events[eventId])\n\n  function renderTitle () {\n    return pug`\n      CatCard($cat=$cat)\n    `\n  }\n\n  function renderSettings () {\n    return pug`\n      Profile($cat=$cat $event=$event)\n    `\n  }\n\n  const Stage = stages[$cat.getMyStage()]\n\n  return pug`\n    Stack.Screen(\n      options={\n        headerTitle: renderTitle,\n        headerRight: renderSettings\n      }\n    )\n    Stage($cat=$cat $event=$event)\n  `\n})\n\nconst Profile = observer(({ $cat, $event }) => {\n  const $showEdit = $()\n  const { tablet } = useMedia()\n  const excludeNumber = $event.stage.get() !== STAGES.InProgress\n  const profileEditFields = useFormFields(CAT_PROFILE_EDIT_FORM, excludeNumber ? { exclude: ['number'] } : {})\n\n  return pug`\n    Div(row vAlign='center' gap=1)\n      if !hasContact($cat)\n        Tag(color='error') No contact\n      if !$cat.photoFileId.get()\n        Tag(color='error') No photo\n      if $cat.getMyStage() === STAGES.Profile\n        Div.hackSidePadding\n      else\n        Button(\n          variant='text'\n          icon=faPen\n          onPress=() => $showEdit.set(true)\n        )\n          if tablet\n            = 'Edit cat profile'\n          else\n            = 'Edit'\n    Modal(\n      title='Edit cat profile'\n      $visible=$showEdit\n    )\n      Form(\n        fields=profileEditFields\n        $value=$cat\n      )\n    style(lang='styl')\n      .hackSidePadding\n        width 1u\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nfunction renderExpired () {\n  return pug`\n    Content(padding)\n      Alert(variant='error')\n        Span\n          | Cat profile link is incorrect or already expired.\n          |\n          | Your cat meetup profile link is only valid for a limited period of time.\n          |\n          | If you believe this is an error, please contact the cat meetup organizer.\n  `\n}\n"
+  ],
+  "mappings": "AAAA;qDACoD;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACM,cAAa,SACd;AACL;AACA;AACA;AACA,aACM,cAAa,MAAK,QAAO,WAC1B;AACL;AACA;AACA;AACA;AACA,aACI,aACE,SAAQ;AACV;AACA;AACA,QAEA,YAAW,MAAK,QAAO,cACxB;AACH;AACA;AACA;;IAiCM;IACA;;;AAjCN;AACA;AACA;AACA;AACA;AACA,aACI,6BAA4B,IACvB,qBACD,kBAAmB,yBAClB,2BACD,kBAAmB,uBAClB,wCACD,iBAAG,yBAEH,OACE,eACA,MAAK,OACL,SAAQ,4BAEL,SACC,qBAEA,wBACV,MACE,yBACA,UAAS,YAET,KACE,QAAO,mBACP,QAAO,oBAKZ;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WACI,iBACE,uBACE,KACI;AACP;AACA,CAAQ;AACR;AACA,CAAQ,kGACV;AACH",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/swc/event-tabs-breed.js.output.jsx b/test/fixtures/real-project/snapshots/swc/event-tabs-breed.js.output.jsx
index 809bae2..f35ccc8 100644
--- a/test/fixtures/real-project/snapshots/swc/event-tabs-breed.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/swc/event-tabs-breed.js.output.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import {observer,useSub,$,styl} from 'startupjs'    
+import { observer, useSub, $, styl } from 'startupjs'
 import {
   Link, Item, ScrollView, Form, useFormProps, Alert,
   Content, Tag, Br, Button, Modal, Div, confirm,
@@ -78,7 +78,6 @@ const SelectLikesInput = observer(({ $value, ...props }) => {
 })
 
 const SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {
-  
   styl`
     .item
       border-radius 1u
@@ -86,7 +85,7 @@ const SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {
         // FIXME: We can't use color var(--color-text-success-strong) here
         background-color var(--color-text-success-strong)
 
-  `;
-const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })
-  return ((() => {const __pugEachResult = [];for (const $cat of $cats) {__pugEachResult.push((() => {const catId = $cat.getId();return <Item styleName={["item", { selected: $likes[catId].get() }]} key={catId} onPress={() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)}><CatCard $cat={$cat} small /></Item>;})());}return __pugEachResult.length ? __pugEachResult : <Alert variant='info'>No cats with selected breed yet</Alert>;})())
+  `
+  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })
+  return ((() => {const __pugEachResult = [];for (const $cat of $cats) {__pugEachResult.push((() => {const catId = $cat.getId();return <Item styleName={['item', { selected: $likes[catId].get() }]} key={catId} onPress={() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)}><CatCard $cat={$cat} small /></Item>;})());}return __pugEachResult.length ? __pugEachResult : <Alert variant='info'>No cats with selected breed yet</Alert>;})())
 })
diff --git a/test/fixtures/real-project/snapshots/swc/event-tabs-breed.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/swc/event-tabs-breed.js.output.sourcemap.json
index 9ba2911..3f46fa4 100644
--- a/test/fixtures/real-project/snapshots/swc/event-tabs-breed.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/swc/event-tabs-breed.js.output.sourcemap.json
@@ -8,6 +8,6 @@
   "sourcesContent": [
     "import React, { useState } from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport {\n  Link, Item, ScrollView, Form, useFormProps, Alert,\n  Content, Tag, Br, Button, Modal, Div, confirm,\n  useFormFields$, useValidate\n} from 'startupjs-ui'\nimport { useGlobalSearchParams } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faLink } from '@fortawesome/free-solid-svg-icons/faLink'\nimport CatCard from '@/components/CatCard'\nimport { CAT_FORM } from '@/model/cats/schema'\n\nexport default observer(({ breed }) => {\n  const { eventId } = useGlobalSearchParams()\n  const [$selected, set$selected] = useState()\n  const $new = $()\n  const $showModal = $()\n  const $mode = $()\n  const $fields = useFormFields$(CAT_FORM)\n  const validate = useValidate()\n\n  function showCreate () {\n    $new.set({ breed })\n    $fields.breed.disabled.set(true)\n    set$selected(() => $new)\n    $mode.set('new')\n    $showModal.set(true)\n  }\n\n  function showEdit ($cat) {\n    $fields.breed.disabled.del()\n    set$selected(() => $cat)\n    $mode.set('edit')\n    $showModal.set(true)\n  }\n\n  function cancel () {\n    if (!$showModal.get()) return\n    $showModal.del()\n    $mode.del()\n  }\n\n  async function create () {\n    if (!validate()) return\n    await $.cats.addNew({\n      ...$new.getDeepCopy(),\n      eventId\n    })\n    cancel()\n  }\n\n  async function deleteCat () {\n    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return\n    await $selected.del()\n    cancel()\n  }\n\n  return pug`\n    ScrollView(full)\n      Content(full pure)\n        CatsList(eventId=eventId onEdit=showEdit breed=breed)\n    Content(padding=1)\n      Button(onPress=showCreate) Add new #{breed}\n    Modal(\n      title=$mode.get() === 'new' ? 'Create cat' : 'Edit cat'\n      $visible=$showModal\n      onDismiss=cancel\n    )\n      - const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic')\n      Form(\n        key=$selected?.getId() || 'NEW'\n        $fields=$fields\n        $value=$selected\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n        customInputs={\n          likes: SelectLikesInput\n        }\n        validate=validate\n      )\n      Br\n      if $mode.get() === 'new'\n        Div(align='right' row)\n          Button(onPress=cancel) Cancel\n          Button(disabled=validate.hasErrors pushed variant='flat' color='primary' onPress=create) Create\n      else if $mode.get() === 'edit'\n        Div(align='right' row)\n          Button(color='error' onPress=deleteCat) Delete\n  `\n})\n\nconst CatsList = observer(({ onEdit, breed, eventId }) => {\n  if (!eventId) return pug`Alert(variant='error') No event specified`\n  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      Item(key=$cat.getId())\n        CatCard($cat=$cat)\n        Item.Right\n          Div(vAlign='center' row gap=1)\n            if !hasContact($cat)\n              Tag(color='error') No contact\n            if !$cat.photoFileId.get()\n              Tag(color='error') No photo\n            Button(variant='text' icon=faPen onPress=() => onEdit($cat) tooltip='Edit')\n            Link(href='/events/' + eventId + '/matches/' + $cat.getId())\n              Button(variant='text' icon=faHeart tooltip='Matches')\n            Link(href='/cats/' + $cat.token.get())\n              Button(variant='text' icon=faLink tooltip='Cat profile link') Link\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nconst SelectLikesInput = observer(({ $value, ...props }) => {\n  const { oppositeBreed, eventId } = { ...useFormProps(), ...props }\n  return pug`\n    if oppositeBreed\n      SelectLikes(\n        $likes=$value\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n      )\n    else\n      Alert(variant='warning') Select breed to choose likes\n  `\n})\n\nconst SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {\n  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      - const catId = $cat.getId()\n      Item.item(\n        key=catId\n        styleName={ selected: $likes[catId].get() }\n        onPress=() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)\n      )\n        CatCard($cat=$cat small)\n    else\n      Alert(variant='info') No cats with selected breed yet\n    style(lang='styl')\n      .item\n        border-radius 1u\n        &.selected\n          // FIXME: We can't use color var(--color-text-success-strong) here\n          background-color var(--color-text-success-strong)\n  `\n})\n"
   ],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,iBACE,mBACE,kBAAiB,SAAQ,QAAO,UAAS,OAAM,iCACnD,iBAAgB,IACd,gBAAe,YAAY,SAAU,0BACvC,MACE,OAAM,mDACN,UAAS,YACT,WAAU,iBAER,wHACF,KACE,KAAI,6BACJ,SAAQ,SACR,QAAO,WACP,eAAc,eACd,SAAQ,SACR,cAAa;AACjB;AACA,OACI,UAAS,aAEX,MACG,yBACD,uBACE,gBAAe,QAAQ,gBACvB,iBAAgB,oBAAmB,+CAA8C,QAAQ,wBACrF,0BACN,uBACE,8BAA6B,WAAW,mDAC/C;AACH;AACA;AACA;AACA,yBAA2B,sBAAuB,2BAAmB;AACrE;AACA,wDACS,QAAQ,8BACX,UAAS,eACP,cAAa,SACb,YACE,6BAA4B,IACvB,qBACD,kBAAmB,yBAClB,2BACD,kBAAmB,uBACrB,4BAA2B,OAAM,SAAQ,oBAAmB,kBAC5D,WAAU,oDACR,4BAA2B,SAAQ,4BACrC,WAAU,8BACR,4BAA2B,QAAO,2BAA4B,6EACzE;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UACO,iBACD,YACE,QAAO,QACP,eAAc,eACd,SAAQ,eAGV,wBAAyB,qCAC5B;AACH;AACA;AACA;AACA;;IAaM;IACA;IACA;IACA;IACA;;;AAjBJ;AACF,wDACS,QAAQ,qCACT,mCACF,KAEE,aAFE,OAEQ,oCADV,KAAI,OAEJ,SAAQ,4EAER,cAAa,MAAK,0EAEpB,qBAAsB,6CAOzB;AACH",
+  "mappings": "AAAA;qDACoD;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,iBACE,mBACE,kBAAiB,SAAQ,QAAO,UAAS,OAAM,iCACnD,iBAAgB,IACd,gBAAe,YAAY,SAAU,0BACvC,MACE,OAAM,mDACN,UAAS,YACT,WAAU,iBAER,wHACF,KACE,KAAI,6BACJ,SAAQ,SACR,QAAO,WACP,eAAc,eACd,SAAQ,SACR,cAAa;AACjB;AACA,OACI,UAAS,aAEX,MACG,yBACD,uBACE,gBAAe,QAAQ,gBACvB,iBAAgB,oBAAmB,+CAA8C,QAAQ,wBACrF,0BACN,uBACE,8BAA6B,WAAW,mDAC/C;AACH;AACA;AACA;AACA,yBAA2B,sBAAuB,2BAAmB;AACrE;AACA,wDACS,QAAQ,8BACX,UAAS,eACP,cAAa,SACb,YACE,6BAA4B,IACvB,qBACD,kBAAmB,yBAClB,2BACD,kBAAmB,uBACrB,4BAA2B,OAAM,SAAQ,oBAAmB,kBAC5D,WAAU,oDACR,4BAA2B,SAAQ,4BACrC,WAAU,8BACR,4BAA2B,QAAO,2BAA4B,6EACzE;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UACO,iBACD,YACE,QAAO,QACP,eAAc,eACd,SAAQ,eAGV,wBAAyB,qCAC5B;AACH;AACA;AACA;;IAcM;IACA;IACA;IACA;IACA;;;AAjBN;AACA,wDACS,QAAQ,qCACT,mCACF,KAEE,aAFE,OAEQ,oCADV,KAAI,OAEJ,SAAQ,4EAER,cAAa,MAAK,0EAEpB,qBAAsB,6CAOzB;AACH",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/swc/event-tabs-breed.tsx.output.jsx b/test/fixtures/real-project/snapshots/swc/event-tabs-breed.tsx.output.jsx
new file mode 100644
index 0000000..f35ccc8
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/swc/event-tabs-breed.tsx.output.jsx
@@ -0,0 +1,91 @@
+import React, { useState } from 'react'
+import { observer, useSub, $, styl } from 'startupjs'
+import {
+  Link, Item, ScrollView, Form, useFormProps, Alert,
+  Content, Tag, Br, Button, Modal, Div, confirm,
+  useFormFields$, useValidate
+} from 'startupjs-ui'
+import { useGlobalSearchParams } from 'expo-router'
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
+import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'
+import { faLink } from '@fortawesome/free-solid-svg-icons/faLink'
+import CatCard from '@/components/CatCard'
+import { CAT_FORM } from '@/model/cats/schema'
+
+export default observer(({ breed }) => {
+  const { eventId } = useGlobalSearchParams()
+  const [$selected, set$selected] = useState()
+  const $new = $()
+  const $showModal = $()
+  const $mode = $()
+  const $fields = useFormFields$(CAT_FORM)
+  const validate = useValidate()
+
+  function showCreate () {
+    $new.set({ breed })
+    $fields.breed.disabled.set(true)
+    set$selected(() => $new)
+    $mode.set('new')
+    $showModal.set(true)
+  }
+
+  function showEdit ($cat) {
+    $fields.breed.disabled.del()
+    set$selected(() => $cat)
+    $mode.set('edit')
+    $showModal.set(true)
+  }
+
+  function cancel () {
+    if (!$showModal.get()) return
+    $showModal.del()
+    $mode.del()
+  }
+
+  async function create () {
+    if (!validate()) return
+    await $.cats.addNew({
+      ...$new.getDeepCopy(),
+      eventId
+    })
+    cancel()
+  }
+
+  async function deleteCat () {
+    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return
+    await $selected.del()
+    cancel()
+  }
+
+  return (<><ScrollView full><Content full pure><CatsList eventId={eventId} onEdit={showEdit} breed={breed} /></Content></ScrollView><Content padding={1}><Button onPress={showCreate}>Add new {breed}</Button></Content><Modal title={$mode.get() === 'new' ? 'Create cat' : 'Edit cat'} $visible={$showModal} onDismiss={cancel}>{(() => {const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic');return (<><Form key={$selected?.getId() || 'NEW'} $fields={$fields} $value={$selected} oppositeBreed={oppositeBreed} eventId={eventId} customInputs={{
+      likes: SelectLikesInput
+    }} validate={validate} /><Br />{$mode.get() === 'new' ? <Div align='right' row><Button onPress={cancel}>Cancel</Button><Button disabled={validate.hasErrors} pushed variant='flat' color='primary' onPress={create}>Create</Button></Div> : $mode.get() === 'edit' ? <Div align='right' row><Button color='error' onPress={deleteCat}>Delete</Button></Div> : null}</>);})()}</Modal></>)
+})
+
+const CatsList = observer(({ onEdit, breed, eventId }) => {
+  if (!eventId) return (<Alert variant='error'>No event specified</Alert>)
+  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })
+  return ((() => {const __pugEachResult = [];for (const $cat of $cats) {__pugEachResult.push(<Item key={$cat.getId()}><CatCard $cat={$cat} /><Item.Right><Div vAlign='center' row gap={1}>{!hasContact($cat) ? <Tag color='error'>No contact</Tag> : null}{!$cat.photoFileId.get() ? <Tag color='error'>No photo</Tag> : null}<Button variant='text' icon={faPen} onPress={() => onEdit($cat)} tooltip='Edit' /><Link href={'/events/' + eventId + '/matches/' + $cat.getId()}><Button variant='text' icon={faHeart} tooltip='Matches' /></Link><Link href={'/cats/' + $cat.token.get()}><Button variant='text' icon={faLink} tooltip='Cat profile link'>Link</Button></Link></Div></Item.Right></Item>);}return __pugEachResult;})())
+})
+
+function hasContact ($cat) {
+  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()
+}
+
+const SelectLikesInput = observer(({ $value, ...props }) => {
+  const { oppositeBreed, eventId } = { ...useFormProps(), ...props }
+  return (oppositeBreed ? <SelectLikes $likes={$value} oppositeBreed={oppositeBreed} eventId={eventId} /> : <Alert variant='warning'>Select breed to choose likes</Alert>)
+})
+
+const SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {
+  styl`
+    .item
+      border-radius 1u
+      &.selected
+        // FIXME: We can't use color var(--color-text-success-strong) here
+        background-color var(--color-text-success-strong)
+
+  `
+  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })
+  return ((() => {const __pugEachResult = [];for (const $cat of $cats) {__pugEachResult.push((() => {const catId = $cat.getId();return <Item styleName={['item', { selected: $likes[catId].get() }]} key={catId} onPress={() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)}><CatCard $cat={$cat} small /></Item>;})());}return __pugEachResult.length ? __pugEachResult : <Alert variant='info'>No cats with selected breed yet</Alert>;})())
+})
diff --git a/test/fixtures/real-project/snapshots/swc/event-tabs-breed.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/swc/event-tabs-breed.tsx.output.sourcemap.json
new file mode 100644
index 0000000..b79c019
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/swc/event-tabs-breed.tsx.output.sourcemap.json
@@ -0,0 +1,13 @@
+{
+  "version": 3,
+  "file": "test/fixtures/real-project/event-tabs-breed.tsx",
+  "names": [],
+  "sources": [
+    "test/fixtures/real-project/event-tabs-breed.tsx"
+  ],
+  "sourcesContent": [
+    "import React, { useState } from 'react'\nimport { pug, observer, useSub, $ } from 'startupjs'\nimport {\n  Link, Item, ScrollView, Form, useFormProps, Alert,\n  Content, Tag, Br, Button, Modal, Div, confirm,\n  useFormFields$, useValidate\n} from 'startupjs-ui'\nimport { useGlobalSearchParams } from 'expo-router'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faLink } from '@fortawesome/free-solid-svg-icons/faLink'\nimport CatCard from '@/components/CatCard'\nimport { CAT_FORM } from '@/model/cats/schema'\n\nexport default observer(({ breed }) => {\n  const { eventId } = useGlobalSearchParams()\n  const [$selected, set$selected] = useState()\n  const $new = $()\n  const $showModal = $()\n  const $mode = $()\n  const $fields = useFormFields$(CAT_FORM)\n  const validate = useValidate()\n\n  function showCreate () {\n    $new.set({ breed })\n    $fields.breed.disabled.set(true)\n    set$selected(() => $new)\n    $mode.set('new')\n    $showModal.set(true)\n  }\n\n  function showEdit ($cat) {\n    $fields.breed.disabled.del()\n    set$selected(() => $cat)\n    $mode.set('edit')\n    $showModal.set(true)\n  }\n\n  function cancel () {\n    if (!$showModal.get()) return\n    $showModal.del()\n    $mode.del()\n  }\n\n  async function create () {\n    if (!validate()) return\n    await $.cats.addNew({\n      ...$new.getDeepCopy(),\n      eventId\n    })\n    cancel()\n  }\n\n  async function deleteCat () {\n    if (!await confirm(`Are you sure you want to delete ${$selected.name.get()}?`)) return\n    await $selected.del()\n    cancel()\n  }\n\n  return pug`\n    ScrollView(full)\n      Content(full pure)\n        CatsList(eventId=eventId onEdit=showEdit breed=breed)\n    Content(padding=1)\n      Button(onPress=showCreate) Add new #{breed}\n    Modal(\n      title=$mode.get() === 'new' ? 'Create cat' : 'Edit cat'\n      $visible=$showModal\n      onDismiss=cancel\n    )\n      - const oppositeBreed = $selected?.breed.get() && ($selected.breed.get() === 'domestic' ? 'wild' : 'domestic')\n      Form(\n        key=$selected?.getId() || 'NEW'\n        $fields=$fields\n        $value=$selected\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n        customInputs={\n          likes: SelectLikesInput\n        }\n        validate=validate\n      )\n      Br\n      if $mode.get() === 'new'\n        Div(align='right' row)\n          Button(onPress=cancel) Cancel\n          Button(disabled=validate.hasErrors pushed variant='flat' color='primary' onPress=create) Create\n      else if $mode.get() === 'edit'\n        Div(align='right' row)\n          Button(color='error' onPress=deleteCat) Delete\n  `\n})\n\nconst CatsList = observer(({ onEdit, breed, eventId }) => {\n  if (!eventId) return pug`Alert(variant='error') No event specified`\n  const $cats = useSub($.cats, { eventId, breed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      Item(key=$cat.getId())\n        CatCard($cat=$cat)\n        Item.Right\n          Div(vAlign='center' row gap=1)\n            if !hasContact($cat)\n              Tag(color='error') No contact\n            if !$cat.photoFileId.get()\n              Tag(color='error') No photo\n            Button(variant='text' icon=faPen onPress=() => onEdit($cat) tooltip='Edit')\n            Link(href='/events/' + eventId + '/matches/' + $cat.getId())\n              Button(variant='text' icon=faHeart tooltip='Matches')\n            Link(href='/cats/' + $cat.token.get())\n              Button(variant='text' icon=faLink tooltip='Cat profile link') Link\n  `\n})\n\nfunction hasContact ($cat) {\n  return ($cat.phone.get() || '').trim() || ($cat.catgram.get() || '').trim() || ($cat.phonegram.get() || '').trim()\n}\n\nconst SelectLikesInput = observer(({ $value, ...props }) => {\n  const { oppositeBreed, eventId } = { ...useFormProps(), ...props }\n  return pug`\n    if oppositeBreed\n      SelectLikes(\n        $likes=$value\n        oppositeBreed=oppositeBreed\n        eventId=eventId\n      )\n    else\n      Alert(variant='warning') Select breed to choose likes\n  `\n})\n\nconst SelectLikes = observer(({ $likes, oppositeBreed, eventId }) => {\n  const $cats = useSub($.cats, { eventId, breed: oppositeBreed, $sort: { breed: 1, number: 1 } })\n  return pug`\n    each $cat in $cats\n      - const catId = $cat.getId()\n      Item.item(\n        key=catId\n        styleName={ selected: $likes[catId].get() }\n        onPress=() => $likes[catId].get() ? $likes[catId].del() : $likes[catId].set(true)\n      )\n        CatCard($cat=$cat small)\n    else\n      Alert(variant='info') No cats with selected breed yet\n    style(lang='styl')\n      .item\n        border-radius 1u\n        &.selected\n          // FIXME: We can't use color var(--color-text-success-strong) here\n          background-color var(--color-text-success-strong)\n  `\n})\n"
+  ],
+  "mappings": "AAAA;qDACoD;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,iBACE,mBACE,kBAAiB,SAAQ,QAAO,UAAS,OAAM,iCACnD,iBAAgB,IACd,gBAAe,YAAY,SAAU,0BACvC,MACE,OAAM,mDACN,UAAS,YACT,WAAU,iBAER,wHACF,KACE,KAAI,6BACJ,SAAQ,SACR,QAAO,WACP,eAAc,eACd,SAAQ,SACR,cAAa;AACjB;AACA,OACI,UAAS,aAEX,MACG,yBACD,uBACE,gBAAe,QAAQ,gBACvB,iBAAgB,oBAAmB,+CAA8C,QAAQ,wBACrF,0BACN,uBACE,8BAA6B,WAAW,mDAC/C;AACH;AACA;AACA;AACA,yBAA2B,sBAAuB,2BAAmB;AACrE;AACA,wDACS,QAAQ,8BACX,UAAS,eACP,cAAa,SACb,YACE,6BAA4B,IACvB,qBACD,kBAAmB,yBAClB,2BACD,kBAAmB,uBACrB,4BAA2B,OAAM,SAAQ,oBAAmB,kBAC5D,WAAU,oDACR,4BAA2B,SAAQ,4BACrC,WAAU,8BACR,4BAA2B,QAAO,2BAA4B,6EACzE;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UACO,iBACD,YACE,QAAO,QACP,eAAc,eACd,SAAQ,eAGV,wBAAyB,qCAC5B;AACH;AACA;AACA;;IAcM;IACA;IACA;IACA;IACA;;;AAjBN;AACA,wDACS,QAAQ,qCACT,mCACF,KAEE,aAFE,OAEQ,oCADV,KAAI,OAEJ,SAAQ,4EAER,cAAa,MAAK,0EAEpB,qBAAsB,6CAOzB;AACH",
+  "ignoreList": []
+}
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/swc/event-tabs-layout.js.output.jsx b/test/fixtures/real-project/snapshots/swc/event-tabs-layout.js.output.jsx
index 158af3e..9e97862 100644
--- a/test/fixtures/real-project/snapshots/swc/event-tabs-layout.js.output.jsx
+++ b/test/fixtures/real-project/snapshots/swc/event-tabs-layout.js.output.jsx
@@ -1,6 +1,6 @@
 // import { Platform } from 'react-native'
 import React from 'react'
-import { observer, styl, $, useSub } from 'startupjs'     
+import { observer, $, useSub, styl } from 'startupjs'
 import { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'
 import { Tabs, useLocalSearchParams, Stack } from 'expo-router'
 import { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'
@@ -11,6 +11,16 @@ import { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'
 import { EVENT_FORM } from '@/model/events/schema'
 
 export default observer(function TabLayout () {
+  styl`
+    +tablet()
+      .screen
+        &:part(tabBar)
+          order -1
+          background-color transparent
+          border-bottom-width 1px
+          border-bottom-color rgba(0, 0, 0, 0.1)
+
+  `
   const getColor = useColors()
   const { eventId } = useLocalSearchParams()
   const $event = useSub($.events[eventId])
@@ -43,15 +53,6 @@ export default observer(function TabLayout () {
       title: 'Dev Only',
       tabBarIcon: renderTestIcon
     }} /></Tabs></>)
-  styl`
-    +tablet()
-      .screen
-        &:part(tabBar)
-          order -1
-          background-color transparent
-          border-bottom-width 1px
-          border-bottom-color rgba(0, 0, 0, 0.1)
-  `
 })
 
 function renderEditEvent ({ $event }) {
diff --git a/test/fixtures/real-project/snapshots/swc/event-tabs-layout.js.output.sourcemap.json b/test/fixtures/real-project/snapshots/swc/event-tabs-layout.js.output.sourcemap.json
index e5b03fc..8a020cb 100644
--- a/test/fixtures/real-project/snapshots/swc/event-tabs-layout.js.output.sourcemap.json
+++ b/test/fixtures/real-project/snapshots/swc/event-tabs-layout.js.output.sourcemap.json
@@ -6,8 +6,8 @@
     "test/fixtures/real-project/event-tabs-layout.js"
   ],
   "sourcesContent": [
-    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, styl, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n  `\n  styl`\n    +tablet()\n      .screen\n        &:part(tabBar)\n          order -1\n          background-color transparent\n          border-bottom-width 1px\n          border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
+    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n    style(lang='styl')\n      +tablet()\n        .screen\n          &:part(tabBar)\n            order -1\n            background-color transparent\n            border-bottom-width 1px\n            border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
   ],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,aACE,SAAQ;AACV;AACA;AACA,QAEA,KACE,OAAM,mBACN,eAAc;AAChB;AACA;AACA;AACA;AACA;AACA,MAEE,YACE,aACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,cACA,SAAQ;AACZ;AACA,UAEE,YACE,gBACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,YACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,YACA,SAAQ;AACZ;AACA;AACA,oBAED;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WACI,kBAAiB,WAClB;AACH;AACA;AACA;AACA;AACA,aACI,gBAAe,4BAA2B,qBAAoB,OAAO,8BACrE,MACE,wBACA,UAAS,aAET,KACE,QAAO,QACP,QAAO,0BAEZ;AACH;AACA;AACA;AACA,WACI,WAAU,aAAY,OAAM,yCAC7B;AACH;AACA;AACA;AACA,WACI,WAAU,iBAAgB,OAAM,yCACjC;AACH;AACA;AACA;AACA,WACI,WAAU,SAAQ,OAAM,yCACzB;AACH;AACA;AACA;AACA,WACI,WAAU,WAAU,OAAM,yCAC3B;AACH",
+  "mappings": "AAAA;AACA;qDACoD;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;IA6DM;IACA;IACA;IACA;IACA;IACA;IACA;;;AAlEN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,aACE,SAAQ;AACV;AACA;AACA,QAEA,KACE,OAAM,mBACN,eAAc;AAChB;AACA;AACA;AACA;AACA;AACA,MAEE,YACE,aACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,cACA,SAAQ;AACZ;AACA,UAEE,YACE,gBACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,YACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,YACA,SAAQ;AACZ;AACA;AACA,oBAUD;AACH;AACA;AACA;AACA,WACI,kBAAiB,WAClB;AACH;AACA;AACA;AACA;AACA,aACI,gBAAe,4BAA2B,qBAAoB,OAAO,8BACrE,MACE,wBACA,UAAS,aAET,KACE,QAAO,QACP,QAAO,0BAEZ;AACH;AACA;AACA;AACA,WACI,WAAU,aAAY,OAAM,yCAC7B;AACH;AACA;AACA;AACA,WACI,WAAU,iBAAgB,OAAM,yCACjC;AACH;AACA;AACA;AACA,WACI,WAAU,SAAQ,OAAM,yCACzB;AACH;AACA;AACA;AACA,WACI,WAAU,WAAU,OAAM,yCAC3B;AACH",
   "ignoreList": []
 }
\ No newline at end of file
diff --git a/test/fixtures/real-project/snapshots/swc/event-tabs-layout.tsx.output.jsx b/test/fixtures/real-project/snapshots/swc/event-tabs-layout.tsx.output.jsx
new file mode 100644
index 0000000..9e97862
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/swc/event-tabs-layout.tsx.output.jsx
@@ -0,0 +1,81 @@
+// import { Platform } from 'react-native'
+import React from 'react'
+import { observer, $, useSub, styl } from 'startupjs'
+import { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'
+import { Tabs, useLocalSearchParams, Stack } from 'expo-router'
+import { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'
+import { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'
+import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen'
+import { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'
+import { EVENT_FORM } from '@/model/events/schema'
+
+export default observer(function TabLayout () {
+  styl`
+    +tablet()
+      .screen
+        &:part(tabBar)
+          order -1
+          background-color transparent
+          border-bottom-width 1px
+          border-bottom-color rgba(0, 0, 0, 0.1)
+
+  `
+  const getColor = useColors()
+  const { eventId } = useLocalSearchParams()
+  const $event = useSub($.events[eventId])
+  if (!$event.get()) throw Error('No such event')
+
+  // NOTE:
+  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.
+  // tabBarStyle/order - Move the tab bar to the top on tablet+
+  return (<><Stack.Screen options={{
+    title: $event.name.get(),
+    headerRight: () => renderEditEvent({ $event })
+  }} /><Tabs title={$event.name.get()} screenOptions={{
+    ...styl('screen'),
+    tabBarActiveTintColor: getColor('primary'),
+    tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',
+    headerShown: false,
+    headerTitle: $event.name.get()
+  }}><Tabs.Screen name='index' options={{
+      title: 'Dashboard',
+      tabBarIcon: renderHomeIcon
+    }} /><Tabs.Screen name='-breed' options={{
+      href: null
+    }} /><Tabs.Screen name='domestic' options={{
+      title: 'Domestic Cats',
+      tabBarIcon: renderDomesticIcon
+    }} /><Tabs.Screen name='wild' options={{
+      title: 'Wild Cats',
+      tabBarIcon: renderWildIcon
+    }} /><Tabs.Screen name='test' options={{
+      title: 'Dev Only',
+      tabBarIcon: renderTestIcon
+    }} /></Tabs></>)
+})
+
+function renderEditEvent ({ $event }) {
+  return (<EditEvent $event={$event} />)
+}
+
+const EditEvent = observer(({ $event }) => {
+  const $showModal = $()
+  return (<><Button onPress={() => $showModal.set(true)} variant='text' icon={faPen}>Edit this cat meetup</Button><Modal title='Edit cat meetup' $visible={$showModal}><Form $value={$event} fields={EVENT_FORM} /></Modal></>)
+})
+
+function renderWildIcon ({ color, size }) {
+  return (<Icon icon={faWildBadge} style={{ color, width: size, height: size }} />)
+}
+
+function renderDomesticIcon ({ color, size }) {
+  return (<Icon icon={faDomesticBadge} style={{ color, width: size, height: size }} />)
+}
+
+function renderHomeIcon ({ color, size }) {
+  return (<Icon icon={faHeart} style={{ color, width: size, height: size }} />)
+}
+
+function renderTestIcon ({ color, size }) {
+  return (<Icon icon={faToolbox} style={{ color, width: size, height: size }} />)
+}
diff --git a/test/fixtures/real-project/snapshots/swc/event-tabs-layout.tsx.output.sourcemap.json b/test/fixtures/real-project/snapshots/swc/event-tabs-layout.tsx.output.sourcemap.json
new file mode 100644
index 0000000..8dbf3d1
--- /dev/null
+++ b/test/fixtures/real-project/snapshots/swc/event-tabs-layout.tsx.output.sourcemap.json
@@ -0,0 +1,13 @@
+{
+  "version": 3,
+  "file": "test/fixtures/real-project/event-tabs-layout.tsx",
+  "names": [],
+  "sources": [
+    "test/fixtures/real-project/event-tabs-layout.tsx"
+  ],
+  "sourcesContent": [
+    "// import { Platform } from 'react-native'\nimport React from 'react'\nimport { pug, observer, $, useSub } from 'startupjs'\nimport { useColors, Icon, Form, Modal, Button } from 'startupjs-ui'\nimport { Tabs, useLocalSearchParams, Stack } from 'expo-router'\nimport { faVenus as faWildBadge } from '@fortawesome/free-solid-svg-icons/faVenus'\nimport { faMars as faDomesticBadge } from '@fortawesome/free-solid-svg-icons/faMars'\nimport { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'\nimport { faPen } from '@fortawesome/free-solid-svg-icons/faPen'\nimport { faToolbox } from '@fortawesome/free-solid-svg-icons/faToolbox'\nimport { EVENT_FORM } from '@/model/events/schema'\n\nexport default observer(function TabLayout () {\n  const getColor = useColors()\n  const { eventId } = useLocalSearchParams()\n  const $event = useSub($.events[eventId])\n  if (!$event.get()) throw Error('No such event')\n\n  // NOTE:\n  // headerShown -- Disable the static render of the header on web to prevent a hydration error in React Navigation v6.\n  // tabBarStyle/order - Move the tab bar to the top on tablet+\n  return pug`\n    Stack.Screen(\n      options={\n        title: $event.name.get(),\n        headerRight: () => renderEditEvent({ $event })\n      }\n    )\n    Tabs(\n      title=$event.name.get()\n      screenOptions={\n        ...styl('screen'),\n        tabBarActiveTintColor: getColor('primary'),\n        tabBarActiveBackgroundColor: 'rgba(255, 255, 255, 0.5)',\n        headerShown: false,\n        headerTitle: $event.name.get()\n      }\n    )\n      Tabs.Screen(\n        name='index'\n        options={\n          title: 'Dashboard',\n          tabBarIcon: renderHomeIcon\n        }\n      )\n      Tabs.Screen(\n        name='-breed'\n        options={\n          href: null\n        }\n      )\n      Tabs.Screen(\n        name='domestic'\n        options={\n          title: 'Domestic Cats',\n          tabBarIcon: renderDomesticIcon\n        }\n      )\n      Tabs.Screen(\n        name='wild'\n        options={\n          title: 'Wild Cats',\n          tabBarIcon: renderWildIcon\n        }\n      )\n      Tabs.Screen(\n        name='test'\n        options={\n          title: 'Dev Only',\n          tabBarIcon: renderTestIcon\n        }\n      )\n    style(lang='styl')\n      +tablet()\n        .screen\n          &:part(tabBar)\n            order -1\n            background-color transparent\n            border-bottom-width 1px\n            border-bottom-color rgba(0, 0, 0, 0.1)\n  `\n})\n\nfunction renderEditEvent ({ $event }) {\n  return pug`\n    EditEvent($event=$event)\n  `\n}\n\nconst EditEvent = observer(({ $event }) => {\n  const $showModal = $()\n  return pug`\n    Button(onPress=() => $showModal.set(true) variant='text' icon=faPen) Edit this cat meetup\n    Modal(\n      title='Edit cat meetup'\n      $visible=$showModal\n    )\n      Form(\n        $value=$event\n        fields=EVENT_FORM\n      )\n  `\n})\n\nfunction renderWildIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faWildBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderDomesticIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faDomesticBadge style={ color, width: size, height: size })\n  `\n}\n\nfunction renderHomeIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faHeart style={ color, width: size, height: size })\n  `\n}\n\nfunction renderTestIcon ({ color, size }) {\n  return pug`\n    Icon(icon=faToolbox style={ color, width: size, height: size })\n  `\n}\n"
+  ],
+  "mappings": "AAAA;AACA;qDACoD;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;IA6DM;IACA;IACA;IACA;IACA;IACA;IACA;;;AAlEN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aACI,aACE,SAAQ;AACV;AACA;AACA,QAEA,KACE,OAAM,mBACN,eAAc;AAChB;AACA;AACA;AACA;AACA;AACA,MAEE,YACE,aACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,cACA,SAAQ;AACZ;AACA,UAEE,YACE,gBACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,YACA,SAAQ;AACZ;AACA;AACA,UAEE,YACE,YACA,SAAQ;AACZ;AACA;AACA,oBAUD;AACH;AACA;AACA;AACA,WACI,kBAAiB,WAClB;AACH;AACA;AACA;AACA;AACA,aACI,gBAAe,4BAA2B,qBAAoB,OAAO,8BACrE,MACE,wBACA,UAAS,aAET,KACE,QAAO,QACP,QAAO,0BAEZ;AACH;AACA;AACA;AACA,WACI,WAAU,aAAY,OAAM,yCAC7B;AACH;AACA;AACA;AACA,WACI,WAAU,iBAAgB,OAAM,yCACjC;AACH;AACA;AACA;AACA,WACI,WAAU,SAAQ,OAAM,yCACzB;AACH;AACA;AACA;AACA,WACI,WAAU,WAAU,OAAM,yCAC3B;AACH",
+  "ignoreList": []
+}
\ No newline at end of file