chore: Use webpack to build production version

.devcontainer/devcontainer-lock.json

@@ -5,10 +5,15 @@
       "resolved": "ghcr.io/anthropics/devcontainer-features/claude-code@sha256:cfc2e7d3e9fd3b9b01f8d5cb158508a884c8c0ede2e23ed10f32dea5d4ffe69a",
       "integrity": "sha256:cfc2e7d3e9fd3b9b01f8d5cb158508a884c8c0ede2e23ed10f32dea5d4ffe69a"
     },
-    "ghcr.io/devcontainers/features/node:1": {
-      "version": "1.7.1",
-      "resolved": "ghcr.io/devcontainers/features/node@sha256:8c0de46939b61958041700ee89e3493f3b2e4131a06dc46b4d9423427d06e5f6",
-      "integrity": "sha256:8c0de46939b61958041700ee89e3493f3b2e4131a06dc46b4d9423427d06e5f6"
+    "ghcr.io/devcontainers/features/node:2.0.0": {
+      "version": "2.0.0",
+      "resolved": "ghcr.io/devcontainers/features/node@sha256:fedd4c11f7adfb64283b578dddc7da906728daa25fa293351c9d913231acf12f",
+      "integrity": "sha256:fedd4c11f7adfb64283b578dddc7da906728daa25fa293351c9d913231acf12f"
+    },
+    "ghcr.io/jsburckhardt/devcontainer-features/just:1": {
+      "version": "1.0.0",
+      "resolved": "ghcr.io/jsburckhardt/devcontainer-features/just@sha256:5c90013b36669270be21c69e7d8e5b6148b4b0b34fca9e104a599edf0d7c11af",
+      "integrity": "sha256:5c90013b36669270be21c69e7d8e5b6148b4b0b34fca9e104a599edf0d7c11af"
     }
   }
 }

.devcontainer/devcontainer.json

@@ -1,7 +1,8 @@
 {
   "image": "mcr.microsoft.com/devcontainers/base:ubuntu",
   "features": {
-    "ghcr.io/devcontainers/features/node:1": {},
+    "ghcr.io/devcontainers/features/node:2.0.0": {},
+    "ghcr.io/jsburckhardt/devcontainer-features/just:1": {},
     "ghcr.io/anthropics/devcontainer-features/claude-code:1.0": {}
   }
 }

Justfile

@@ -3,9 +3,12 @@ host := "chimaera.malzahn.lan"
 www-root := "/home/admin/caddy/public_html/fabula"
 
 serve:
-    python3 -m http.server
+    npm run dev
 
-deploy:
-    scp fabula-ultima-sheet.html {{ user }}@{{ host }}:{{ www-root }}/index.html
-    scp fabula-ultima-sheet.css {{ user }}@{{ host }}:{{ www-root }}/fabula-ultima-sheet.css
-    scp fabula-ultima-sheet.js {{ user }}@{{ host }}:{{ www-root }}/fabula-ultima-sheet.js
+deploy: build
+    scp dist/index.html {{ user }}@{{ host }}:{{ www-root }}/index.html
+    scp dist/bundle.*.js {{ user }}@{{ host }}:{{ www-root }}/
+    scp dist/styles.*.css {{ user }}@{{ host }}:{{ www-root }}/
+
+build:
+    npm run build

fabula-ultima-sheet.css

@@ -201,6 +201,7 @@ label {
 }
 
 input[type="text"],
+input:not([type]),
 input[type="number"],
 textarea,
 select {
@@ -219,6 +220,7 @@ select {
 }
 
 input[type="text"]:focus,
+input:not([type]):focus,
 input[type="number"]:focus,
 textarea:focus,
 select:focus {
@@ -1062,6 +1064,7 @@ input[type="number"] {
 }
 
 [data-theme="light"] input[type="text"]:focus,
+[data-theme="light"] input:not([type]):focus,
 [data-theme="light"] input[type="number"]:focus,
 [data-theme="light"] textarea:focus,
 [data-theme="light"] select:focus {

fabula-ultima-sheet.html

@@ -8,7 +8,6 @@
       href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inconsolata:wght@400;600&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="fabula-ultima-sheet.css" />
     <script>
       (function () {
         var t =
@@ -685,6 +684,5 @@
       </div>
     </div>
 
-    <script src="fabula-ultima-sheet.js"></script>
   </body>
 </html>

fabula-ultima-sheet.js

@@ -1,3 +1,5 @@
+import './fabula-ultima-sheet.css';
+
 // ── STATE ──────────────────────────────────────────
 let urlMode = false;
 let level = 1;

package.json

@@ -1,5 +1,19 @@
 {
+  "scripts": {
+    "build": "webpack --mode=production",
+    "dev": "webpack serve --mode=development"
+  },
   "dependencies": {
     "prettier": "^3.8.3"
+  },
+  "devDependencies": {
+    "css-loader": "^7.1.4",
+    "css-minimizer-webpack-plugin": "^8.0.0",
+    "html-webpack-plugin": "^5.6.7",
+    "mini-css-extract-plugin": "^2.10.2",
+    "style-loader": "^4.0.0",
+    "webpack": "^5.107.2",
+    "webpack-cli": "^7.0.3",
+    "webpack-dev-server": "^5.2.4"
   }
 }

webpack.config.js

@@ -0,0 +1,48 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+
+module.exports = (env, argv) => {
+  const isProd = argv.mode === 'production';
+
+  return {
+    entry: './fabula-ultima-sheet.js',
+    output: {
+      filename: isProd ? 'bundle.[contenthash].js' : 'bundle.js',
+      path: path.resolve(__dirname, 'dist'),
+      clean: true,
+      // Disable IIFE wrapping so onclick= handlers can reach global functions
+      iife: false,
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [
+            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
+            'css-loader',
+          ],
+        },
+      ],
+    },
+    plugins: [
+      ...(isProd
+        ? [new MiniCssExtractPlugin({ filename: 'styles.[contenthash].css' })]
+        : []),
+      new HtmlWebpackPlugin({
+        template: './fabula-ultima-sheet.html',
+        filename: 'index.html',
+        scriptLoading: 'blocking',
+      }),
+    ],
+    optimization: {
+      minimizer: ['...', new CssMinimizerPlugin()],
+    },
+    devServer: {
+      static: { directory: path.resolve(__dirname, 'dist') },
+      port: 8080,
+      open: true,
+    },
+  };
+};