Add deps and docs

.gitignore

···
 .DS_Store
+/node_modules

README.md

···
+# actor-typeahead
+
+A small web component that progressively enhances an `<input>` element into an autocomplete for ATProto handles!
+
+It works with any web stack and any JavaScript framework.
+
+## Installation
+
+The easiest way to install is to just copy `actor-typeahead.js` into your project and reference it in a script tag:
+
+```html
+<script type="module" src="actor-typeahead.js"></script>
+```
+
+It will automatically register the `<actor-typeahead>` tag as a custom element.
+
+If you'd like to use a different tag, you can import the file with a query string:
+
+```html
+<script type="module" src="actor-typeahead.js?tag=some-other-tag"></script>
+```
+
+If you'd prefer to manually register the custom element, you can use the query string `?tag=none` and call the static method `define`:
+
+<script type="module">
+  import ActorTypeahead from "actor-typeahead.js?tag=none";
+  ActorTypeahead.define("some-other-tag");
+</script>
+
+
+## Usage
+
+Simply wrap your `<input>` with `<actor-typeahead>`:
+
+```html
+<actor-typeahead>
+  <input>
+</actor-typeahead>
+```

actor-typeahead.js

···
     if (name && name !== tag) return console.warn(`${this.name} already defined as <${name}>!`);
 
     const ce = customElements.get(tag);
-    if (Boolean(ce) && ce !== this) return console.warn(`<${tag}> already defined as ${ce.name}!`);
+    if (ce && ce !== this) return console.warn(`<${tag}> already defined as ${ce.name}!`);
 
     customElements.define(tag, this);
   }
 
   static {
-    const tag = new URL(import.meta.url).searchParams.get("define") || this.tag;
-    if (tag !== "false") this.define(tag);
+    const tag = new URL(import.meta.url).searchParams.get("tag") || this.tag;
+    if (tag !== "none") this.define(tag);
   }
 
   #shadow = this.attachShadow({ mode: "closed" });
···
   }
 
   get #rows() {
-    const rows = Number.parseInt(this.getAttribute("rows"));
+    const rows = Number.parseInt(this.getAttribute("rows") ?? "");
 
     if (Number.isNaN(rows)) return 5;
     return rows;
···
         break;
 
       case "pointerdown":
-        this.#onpointerdown(evt);
+        this.#onpointerdown(/** @type {PointerEvent} */ (evt));
         break;
 
       case "pointerup":
-        this.#onpointerup(evt);
+        this.#onpointerup(/** @type {PointerEvent} */ (evt));
         break;
     }
   }
···
         break;
 
       case "PageDown":
-        event.preventDefault();
+        evt.preventDefault();
         this.#index = this.#rows - 1;
         this.#render();
         break;
···
         break;
 
       case "PageUp":
-        event.preventDefault();
+        evt.preventDefault();
         this.#index = 0;
         this.#render();
         break;
···
 
   /** @param {PointerEvent} evt */
   #onclick(evt) {
-    const button = evt.target.closest(".user");
+    const button = evt.target?.closest(".user");
     const input = this.querySelector("input");
     if (!input || !button) return;
 
···
 
   /** @param {InputEvent} evt */
   async #oninput(evt) {
-    const query = evt.target.value;
+    const query = evt.target?.value;
     if (!query) {
       this.#actors = [];
       this.#render();
···
     const host = this.getAttribute("host") ?? "https://public.api.bsky.app";
     const url = new URL("xrpc/app.bsky.actor.searchActorsTypeahead", host);
     url.searchParams.set("q", query);
-    url.searchParams.set("limit", this.getAttribute("rows") ?? 5);
+    url.searchParams.set("limit", `${this.#rows}`);
 
     const res = await fetch(url);
     const json = await res.json();
···
       fragment.append(li);
     }
 
-    this.#shadow.querySelector(".menu").replaceChildren(...fragment.children);
+    this.#shadow.querySelector(".menu")?.replaceChildren(...fragment.children);
   }
 
   /** @param {PointerEvent} evt */
   #onpointerdown(evt) {
     const menu = this.#shadow.querySelector(".menu");
+    if (!menu) return;
 
     if (!menu.contains(evt.target)) return;
     menu.setPointerCapture(evt.pointerId);
···
   /** @param {PointerEvent} evt */
   #onpointerup(evt) {
     const menu = this.#shadow.querySelector(".menu");
+    if (!menu) return;
 
     if (!menu.hasPointerCapture(evt.pointerId)) return;
     menu.releasePointerCapture(evt.pointerId);

jsconfig.json

···
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "checkJs": true,
+    "strict": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true
+  },
+  "include": ["./*.js"]
+}

package-lock.json

···
+{
+  "name": "actor-typeahead",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "actor-typeahead",
+      "version": "1.0.0",
+      "license": "MPL-2.0",
+      "devDependencies": {
+        "typescript": "^5.9.3"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    }
+  }
+}

package.json

···
+{
+  "name": "actor-typeahead",
+  "version": "1.0.0",
+  "description": "",
+  "main": "actor-typeahead.js",
+  "scripts": {
+    "typecheck": "tsc -p jsconfig.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "[e-mail]:jakelazaroff.com/actor-typeahead"
+  },
+  "author": "",
+  "license": "MPL-2.0",
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  }
+}