Add basic monochrome popup UI with Tailwind CSS

Black-on-white, monospace, Universal Paperclips aesthetic.
All views: lock, setup/create/import, main account, send,
receive, add token, settings, and approval. Vanilla JS view
switching with stub state. README updated with full UI design
philosophy, external services documentation, and view descriptions.

build.js

@@ -1,21 +1,26 @@
 const fs = require("fs");
 const path = require("path");
+const { execSync } = require("child_process");
 
 const DIST_CHROME = path.join(__dirname, "dist", "chrome");
 const DIST_FIREFOX = path.join(__dirname, "dist", "firefox");
+const SRC = path.join(__dirname, "src");
 
 function ensureDir(dir) {
     fs.mkdirSync(dir, { recursive: true });
 }
 
-function copyDir(src, dest) {
+function copyDir(src, dest, opts = {}) {
     ensureDir(dest);
     const entries = fs.readdirSync(src, { withFileTypes: true });
     for (const entry of entries) {
         const srcPath = path.join(src, entry.name);
         const destPath = path.join(dest, entry.name);
+        if (opts.skip && opts.skip.includes(entry.name)) {
+            continue;
+        }
         if (entry.isDirectory()) {
-            copyDir(srcPath, destPath);
+            copyDir(srcPath, destPath, opts);
         } else {
             fs.copyFileSync(srcPath, destPath);
         }
@@ -25,12 +30,40 @@ function copyDir(src, dest) {
 function build() {
     console.log("Building AutistMask extension...");
 
-    ensureDir(DIST_CHROME);
-    ensureDir(DIST_FIREFOX);
+    // compile tailwind CSS
+    console.log("Compiling Tailwind CSS...");
+    const tailwindInput = path.join(SRC, "popup", "styles", "main.css");
+    const tailwindOutput = path.join(__dirname, "dist", "styles.css");
+    ensureDir(path.join(__dirname, "dist"));
+    execSync(
+        `npx @tailwindcss/cli -i ${tailwindInput} -o ${tailwindOutput} --minify`,
+        { stdio: "inherit" },
+    );
 
-    copyDir(path.join(__dirname, "src"), path.join(DIST_CHROME, "src"));
-    copyDir(path.join(__dirname, "src"), path.join(DIST_FIREFOX, "src"));
+    // copy source files (skip the styles dir, we compiled it)
+    for (const distDir of [DIST_CHROME, DIST_FIREFOX]) {
+        ensureDir(distDir);
+        copyDir(path.join(SRC, "popup"), path.join(distDir, "src", "popup"), {
+            skip: ["styles"],
+        });
+        copyDir(
+            path.join(SRC, "background"),
+            path.join(distDir, "src", "background"),
+        );
+        copyDir(
+            path.join(SRC, "content"),
+            path.join(distDir, "src", "content"),
+        );
+        copyDir(path.join(SRC, "shared"), path.join(distDir, "src", "shared"));
 
+        // place compiled CSS next to popup HTML
+        fs.copyFileSync(
+            tailwindOutput,
+            path.join(distDir, "src", "popup", "styles.css"),
+        );
+    }
+
+    // copy manifests
     fs.copyFileSync(
         path.join(__dirname, "manifest", "chrome.json"),
         path.join(DIST_CHROME, "manifest.json"),