diff --git a/.editorconfig b/.editorconfig
index c6c8b36..0f17867 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,9 +1,9 @@
 root = true
 
 [*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
 charset = utf-8
-trim_trailing_whitespace = true
+end_of_line = lf
+indent_size = 2
+indent_style = space
 insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 6fffba4..80eb13a 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,29 +1,23 @@
-name: main
-on:
-  push:
-    branches:
-      - website
-  schedule:
-    - cron: '45 7 2 * *'
 jobs:
   main:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-        with:
-          persist-credentials: false
-      - uses: dcodeIO/setup-node-nvm@master
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: node
       - run: npm install
       - run: npm test
-      - name: Deploy
-        uses: JamesIves/github-pages-deploy-action@3.7.1
+      - uses: JamesIves/github-pages-deploy-action@releases/v4
         with:
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-          BRANCH: gh-pages
-          FOLDER: dest
-          SINGLE_COMMIT: true
-          COMMIT_MESSAGE: .
-          GIT_CONFIG_NAME: Titus Wormer
-          GIT_CONFIG_EMAIL: tituswormer@gmail.com
+          branch: gh-pages
+          commit-message: .
+          folder: dest
+          git-config-email: tituswormer@gmail.com
+          git-config-name: Titus Wormer
+          single-commit: true
+name: main
+on:
+  push:
+    branches:
+      - website
diff --git a/.gitignore b/.gitignore
index ebce694..84ce63e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,8 @@
-.DS_Store
-*.log
+dest/
 node_modules/
+*.d.ts
+*.log
+*.map
+*.tsbuildinfo
+.DS_Store
 yarn.lock
-dest/
diff --git a/.npmrc b/.npmrc
index 43c97e7..3757b30 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
+ignore-scripts=true
 package-lock=false
diff --git a/package.json b/package.json
index 84a71a5..3893f72 100644
--- a/package.json
+++ b/package.json
@@ -1,60 +1,39 @@
 {
-  "name": "www-direction",
-  "private": true,
-  "license": "MIT",
-  "repository": "wooorm/direction",
-  "bugs": "https://github.com/wooorm/direction/issues",
   "author": "Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)",
-  "contributors": [
-    "Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)"
-  ],
-  "type": "module",
-  "devDependencies": {
-    "cssnano": "^4.0.0",
-    "direction": "^2.0.0",
-    "esbuild": "^0.9.0",
-    "postcss-cli": "^8.0.0",
-    "postcss-preset-env": "^6.0.0",
-    "prettier": "^2.0.0",
-    "rehype-cli": "^10.0.0",
-    "rehype-preset-minify": "^5.0.0",
-    "rehype-prevent-favicon-request": "^2.0.0",
-    "remark-cli": "^9.0.0",
-    "remark-preset-wooorm": "^8.0.0",
-    "stylelint": "^13.0.0",
-    "stylelint-config-standard": "^21.0.0",
-    "xo": "^0.38.0"
-  },
-  "scripts": {
-    "format": "remark . -qfo && prettier . -w --loglevel warn && xo --fix && stylelint src/index.css --fix",
-    "build:js": "esbuild src/index.js --bundle --minify --target=es6 --outfile=dest/index.nomodule.js && esbuild src/index.js --bundle --minify --target=es2020 --format=esm --outfile=dest/index.module.js",
-    "build:css": "postcss src/index.css -o dest/index.css",
-    "build:html": "rehype -u preset-minify -u prevent-favicon-request src -o dest",
-    "build": "npm run build:js && npm run build:css && npm run build:html",
-    "test": "npm run format && npm run build"
-  },
-  "prettier": {
-    "tabWidth": 2,
-    "useTabs": false,
-    "singleQuote": true,
-    "bracketSpacing": false,
-    "semi": false,
-    "trailingComma": "none"
-  },
-  "xo": {
-    "prettier": true,
-    "rules": {
-      "no-var": "off"
-    }
-  },
-  "stylelint": {
-    "extends": "stylelint-config-standard"
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
   ],
+  "bugs": "https://github.com/wooorm/direction/issues",
+  "contributors": [
+    "Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)"
+  ],
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "cssnano": "^7.0.0",
+    "devlop": "^1.1.0",
+    "direction": "^2.0.1",
+    "esbuild": "^0.24.0",
+    "postcss-cli": "^11.0.0",
+    "postcss-preset-env": "^10.0.0",
+    "prettier": "^3.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rehype-cli": "^12.0.0",
+    "rehype-preset-minify": "^7.0.0",
+    "rehype-prevent-favicon-request": "^4.0.0",
+    "remark-cli": "^12.0.0",
+    "remark-preset-wooorm": "^10.0.0",
+    "stylelint": "^16.0.0",
+    "stylelint-config-standard": "^36.0.0",
+    "type-coverage": "^2.0.0",
+    "typescript": "^5.0.0",
+    "xo": "^0.59.0"
+  },
+  "license": "MIT",
+  "name": "www-direction",
   "postcss": {
     "plugins": {
       "postcss-preset-env": {},
@@ -63,9 +42,44 @@
       }
     }
   },
+  "prettier": {
+    "bracketSpacing": false,
+    "semi": false,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "none",
+    "useTabs": false
+  },
+  "private": true,
   "remarkConfig": {
     "plugins": [
-      "preset-wooorm"
+      "remark-preset-wooorm"
     ]
+  },
+  "repository": "wooorm/direction",
+  "typeCoverage": {
+    "atLeast": 100,
+    "strict": true
+  },
+  "type": "module",
+  "scripts": {
+    "build": "tsc --build --clean && tsc --build && type-coverage",
+    "format": "remark --frail --output --quiet -- . && prettier --log-level warn --write -- . && xo --fix && stylelint src/index.css --fix",
+    "generate:css": "postcss --output dest/index.css -- src/index.css",
+    "generate:html": "rehype --frail --output dest/ --quiet --use rehype-preset-minify --use rehype-prevent-favicon-request -- src/",
+    "generate:js:module": "esbuild src/index.js --bundle --conditions=browser,production --define:process.env.NODE_ENV=\\\"production\\\" --format=esm --log-level=warning --minify --outfile=dest/index.module.js --target=es2020",
+    "generate:js:nomodule": "esbuild src/index.js --bundle --conditions=browser,production --define:process.env.NODE_ENV=\\\"production\\\" --log-level=warning --minify --outfile=dest/index.nomodule.js --target=es6",
+    "generate:js": "npm run generate:js:module && npm run generate:js:nomodule",
+    "generate": "npm run generate:css && npm run generate:html && npm run generate:js",
+    "test": "npm run build && npm run format && npm run generate"
+  },
+  "stylelint": {
+    "extends": "stylelint-config-standard"
+  },
+  "xo": {
+    "prettier": true,
+    "rules": {
+      "unicorn/prefer-at": "off"
+    }
   }
 }
diff --git a/src/index.css b/src/index.css
index 3b89234..833bebc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,8 +1,3 @@
-:root {
-  color-scheme: light dark;
-  background-color: hsl(0, 0%, 90%);
-}
-
 a {
   color: #0367d8;
 }
@@ -13,13 +8,18 @@ body {
   max-width: 30em;
 }
 
+html {
+  background-color: hsl(0deg 0% 90%);
+  color-scheme: light dark;
+}
+
 output {
   font-weight: bold;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
-    background-color: hsl(214, 13%, 10%);
-    color: hsl(214, 13%, 90%);
+  html {
+    color: hsl(214deg 13% 90%);
+    background-color: hsl(214deg 13% 10%);
   }
 }
diff --git a/src/index.html b/src/index.html
index 9a1765e..30d2308 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,12 +1,12 @@
 <!doctypehtml>
 <meta charset=utf8>
-<meta content=width=device-width,initial-scale=1 name=viewport>
 <title>direction</title>
-<link rel=stylesheet href=index.css>
+<meta content=initial-scale=1,width=device-width name=viewport>
+<link href=index.css rel=stylesheet>
 <h1>direction</h1>
 <p>A quick demo of <a href=https://github.com/wooorm/direction>direction</a>.</p>
 <p>Raise issues on <a href=https://github.com/wooorm/direction/issues>Github</a>.</p>
-<textarea autofocus spellcheck=false rows=20 cols=80>זהו סעיף בעברית.</textarea>
-<p>Direction: <output></output></p>
-<script type=module src=index.module.js></script>
+<textarea autofocus cols=80 rows=20 spellcheck=false>העלא, פּלוטאָ!</textarea>
+<p>Direction:<output></output></p>
+<script src=index.module.js type=module></script>
 <script nomodule src=index.nomodule.js></script>
diff --git a/src/index.js b/src/index.js
index cec1cdf..c8bc4dc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,20 @@
-import {direction} from 'direction'
-
 /* eslint-env browser */
 
-var $input = document.querySelector('textarea')
-var $output = document.querySelector('output')
+import {ok as assert} from 'devlop'
+import {direction} from 'direction'
+
+const $input = document.querySelector('textarea')
+const $output = document.querySelector('output')
+assert($input)
+assert($output)
 
+$output.before(' ')
 $input.addEventListener('input', oninputchange)
 
 oninputchange()
 
 function oninputchange() {
+  assert($input)
+  assert($output)
   $output.textContent = direction($input.value)
 }
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..3329e7d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "checkJs": true,
+    "customConditions": ["development"],
+    "declarationMap": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "exactOptionalPropertyTypes": true,
+    "lib": ["dom", "es2023"],
+    "module": "node16",
+    "strict": true,
+    "target": "es2023"
+  },
+  "exclude": ["dest/", "node_modules/"],
+  "include": ["**/*.js"]
+}