mevebu 1.0.0 → 1.2.0

package/mevebu/index.html

@@ -4,10 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>mevebu, small tools that run in your browser</title>
-    <meta name="description" content="15 small tools that run in your browser. Passwords, QR codes, random draws, text and encoding. No accounts, no tracking." />
+    <meta name="description" content="Small tools that run in your browser. Passwords, QR codes, random draws, text, dates and encoding. No accounts, no uploads, no tracking." />
     <link rel="icon" type="image/png" href="./icon.png" />
-    <link rel="stylesheet" href="./app/mevebu.css" />
-    <link rel="stylesheet" href="./libs/css/tools.css" />
+    <link rel="stylesheet" href="./app/tailwind.css" />
     <script type="module">
       import { getTheme } from "./libs/js/core.js";
       document.documentElement.dataset.theme = getTheme();

package/mevebu/libs/js/core.js

@@ -241,9 +241,9 @@ export function openPalette({ onPick } = {}) {
     "p",
     { class: "mvb-pal__foot" },
     "↑↓ navigate  ",
-    el("kbd", { class: "mvb-pal__key" }, "↵"),
+    el("kbd", { class: "mvb-kbd" }, "↵"),
     " open  ",
-    el("kbd", { class: "mvb-pal__key" }, "esc"),
+    el("kbd", { class: "mvb-kbd" }, "esc"),
     " close"
   );
 
@@ -593,7 +593,7 @@ export function blank(iconName, text) {
 // ---------- version ----------
 
 // Kept in one place. The CLI reads the same value from package.json.
-export const VERSION = "1.0.0";
+export const VERSION = "1.2.0";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/mevebu/libs/js/registry.js

@@ -40,7 +40,7 @@ export const TOOLS = [
     tutorial: {
       intro: "Add one option per line. The wheel picks one at random when you spin.",
       steps: [
-        "Type your options in the field on the left, one per line.",
+        "Type your options, one per line.",
         "Press Spin. The wheel eases to a stop on one entry.",
         "Each pick is added to the history strip below. Press Clear past picks to reset.",
       ],

package/mevebu/libs/js/tools/coin-flip.js

@@ -1,20 +1,37 @@
 // Heads or tails with a running count that survives a page change.
-import { el, button, bench, stack, panel, output, actions, readPin, writePin, randomInt, toolcard } from "../core.js";
+import { el, button, bench, stack, panel, actions, readPin, writePin, randomInt, toolcard } from "../core.js";
+
+// A toss is one flip: a click while the coin is still turning replaces the turn
+// in progress instead of queueing another one behind it.
+const TOSS_MS = 400;
+
+/** A tally tile. The value is the node the tool writes to. */
+function tile(key) {
+  const value = el("span", { class: "mvb-stat__v" }, "0");
+  const row = el("div", { class: "mvb-stat" }, value, el("span", { class: "mvb-stat__k" }, key));
+  return { row, value };
+}
 
 export function mount(slot) {
   const PIN = "coin-flip";
   const saved = readPin(PIN, { heads: 0, tails: 0 });
   let heads = Number(saved.heads) || 0;
   let tails = Number(saved.tails) || 0;
+  let timer = 0;
 
-  const coin = el("div", { class: "mvb-coin", role: "img", "aria-label": "Coin" }, "?");
-  const result = output({ rows: 1 });
-  const tally = el("p", { class: "mvb-flip__tally", "aria-live": "polite" });
+  const coin = el("div", { class: "mvb-coin", role: "img", "aria-label": "Coin, not flipped yet" }, "?");
+  const verdict = el("p", { class: "mvb-flip__result min-h-7", "aria-live": "polite" });
+  const headsTile = tile("Heads");
+  const tailsTile = tile("Tails");
+  const totalTile = tile("Total");
+  const stats = el("div", { class: "mvb-stats" }, headsTile.row, tailsTile.row, totalTile.row);
 
   function render(decision) {
-    result.write(decision ? `${decision}` : "");
-    const total = heads + tails;
-    tally.textContent = total ? `Heads ${heads}, tails ${tails}. ${total} flips.` : "No flips yet.";
+    verdict.textContent = decision;
+    coin.setAttribute("aria-label", decision ? `Coin: ${decision.toLowerCase()}` : "Coin, not flipped yet");
+    headsTile.value.textContent = String(heads);
+    tailsTile.value.textContent = String(tails);
+    totalTile.value.textContent = String(heads + tails);
     writePin(PIN, { heads, tails });
   }
 
@@ -22,19 +39,21 @@ export function mount(slot) {
   const resetButton = button("Reset the count", { kind: "quiet" });
 
   flipButton.addEventListener("click", () => {
+    clearTimeout(timer);
     coin.classList.remove("mvb-toss");
     void coin.offsetWidth;
     coin.classList.add("mvb-toss");
-    setTimeout(() => {
+    timer = setTimeout(() => {
       const isHeads = randomInt(2) === 0;
       if (isHeads) heads++;
       else tails++;
       coin.textContent = isHeads ? "H" : "T";
       render(isHeads ? "Heads" : "Tails");
-    }, 400);
+    }, TOSS_MS);
   });
 
   resetButton.addEventListener("click", () => {
+    clearTimeout(timer);
     heads = 0;
     tails = 0;
     coin.textContent = "?";
@@ -44,14 +63,18 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(panel("Coin", coin)),
-      stack(panel("Result", result), tally)
+      stack(panel("Result", verdict), stats)
     ),
     foot: actions(resetButton, flipButton),
   });
   slot.append(card.node);
   render("");
 
-  return {};
+  return {
+    unmount() {
+      clearTimeout(timer);
+    },
+  };
 }
 
 export default { mount };

package/mevebu/libs/js/tools/color-converter.js

@@ -91,7 +91,7 @@ export function mount(slot) {
   const cssField = readonly("CSS variable");
 
   const error = notice("error");
-  const reading = el("p", { class: "note" });
+  const reading = el("p", { class: "mvb-note" });
 
   function show(color, keepPicker) {
     const hex = hexOf(color);

package/mevebu/libs/js/tools/hash-generator.js

@@ -6,7 +6,7 @@ const ALGORITHMS = ["SHA-1", "SHA-256", "SHA-384", "SHA-512"];
 export function mount(slot) {
   const source = textArea({ value: "mevebu", rows: 5, "aria-label": "Text to hash", placeholder: "Type or paste text" });
   const result = output();
-  const digest = el("p", { class: "note" });
+  const digest = el("p", { class: "mvb-note" });
   const error = notice("error");
 
   let algorithm = "SHA-256";
@@ -41,11 +41,11 @@ export function mount(slot) {
   const copy = copyButton(() => result.textContent, "Copy hash");
 
   const card = toolcard({
-    head: actions(copy),
     body: bench(
       stack(panel("Algorithm", chips), panel("Text", source)),
       stack(panel("Hash", result), digest, error)
     ),
+    foot: actions(copy),
   });
   slot.append(card.node);
   run();

package/mevebu/libs/js/tools/hmac-generator.js

@@ -47,8 +47,7 @@ export function mount(slot) {
       stack(
         panel("Message", message),
         panel("Secret key", el("div", { class: "mvb-secret" }, secret, showButton)),
-        panel("Hash", hashField),
-        el("p", { class: "mvb-note" }, "The message and key stay in this tab. Do not paste a production secret into a site you do not trust.")
+        panel("Hash", hashField)
       ),
       stack(panel("Signature", result), error)
     ),

package/mevebu/libs/js/tools/jwt-generator.js

@@ -3,9 +3,10 @@
 import { el, icon, bench, stack, panel, textArea, textInput, notice, copyButton, output, debounce, actions, toolcard } from "../core.js";
 
 const encoder = new TextEncoder();
-const decode = (segment) => JSON.parse(new TextDecoder().decode(
-  Uint8Array.from(atob(segment.replace(/-/g, "+").replace(/_/g, "/")), (char) => char.charCodeAt(0))
-));
+
+// Only claims that carry a value the JSON does not show by itself: a Unix
+// timestamp means nothing to read, the date behind it does.
+const TIME_CLAIMS = [["iat", "Issued at"], ["nbf", "Not before"], ["exp", "Expires"]];
 
 const toUrl = (bytes) => {
   let text = "";
@@ -31,8 +32,9 @@ export function mount(slot) {
   const error = notice("error");
   const tokenOut = output({ tag: "textarea", rows: 4 });
   const decoded = output({ rows: 4 });
+  const timePanel = panel("Time claims", decoded);
 
-  const copyBtn = copyButton(() => tokenOut.textContent, "Copy token", "fill");
+  const copyBtn = copyButton(() => tokenOut.value, "Copy token", "fill");
 
   showButton.addEventListener("click", () => {
     const visible = secretField.type === "text";
@@ -70,17 +72,14 @@ export function mount(slot) {
       return;
     }
     tokenOut.write(token);
-    try {
-      const body = decode(token.split(".")[1]);
-      const readable = [
-        body.sub !== undefined ? `Subject: ${body.sub}` : "",
-        body.name !== undefined ? `Name: ${body.name}` : "",
-        body.exp !== undefined ? `Expires: ${new Date(body.exp * 1000).toLocaleString()}` : "No expiry set",
-      ].filter(Boolean).join("\n");
-      decoded.write(readable);
-    } catch {
-      decoded.write("");
-    }
+    const times = TIME_CLAIMS
+      .filter(([key]) => payload[key] !== undefined)
+      .map(([key, label]) => {
+        const value = Number(payload[key]);
+        return Number.isFinite(value) ? `${label}: ${new Date(value * 1000).toLocaleString()}` : `${label}: ${payload[key]}`;
+      });
+    timePanel.hidden = !times.length;
+    decoded.write(times.join("\n"));
   }
 
   // Live signing. The textareas are the only slow field: invalid JSON while a
@@ -98,7 +97,7 @@ export function mount(slot) {
         panel("Secret", el("div", { class: "mvb-secret" }, secretField, showButton)),
         error
       ),
-      stack(panel("Token", tokenOut), panel("Payload reading", decoded))
+      stack(panel("Token", tokenOut), timePanel)
     ),
     foot: actions(copyBtn),
   });

package/mevebu/libs/js/tools/name-picker.js

@@ -8,7 +8,7 @@ export function mount(slot) {
   const listField = textArea({ value: saved.entries ?? "", rows: 8, "aria-label": "Entries, one per line", placeholder: "One entry per line" });
   const countField = numberInput({ value: saved.winners ?? "1", min: "1", max: "500", "aria-label": "How many to draw" });
   const uniqueBox = checkbox("No repeats", { checked: saved.unique !== false });
-  const notify = el("p", { class: "note" });
+  const notify = el("p", { class: "mvb-note" });
 
   const drawButton = button("Draw", { icon: "play", kind: "fill" });
   const copyButton = button("Copy", { icon: "copy" });

package/mevebu/libs/js/tools/password-generator.js

@@ -11,11 +11,9 @@ const SETS = {
 export function mount(slot) {
   const lengthField = rangeInput({ min: "6", max: "64", value: "16", "aria-label": "Length" });
   const lengthLabel = el("span", { class: "mvb-field__label" });
-  const lengthRead = el("p", { class: "note" });
 
   function showLength() {
     lengthLabel.textContent = `Length: ${lengthField.value}`;
-    lengthRead.textContent = `${lengthField.value} characters.`;
   }
 
   const groups = toggleRow([
@@ -27,7 +25,7 @@ export function mount(slot) {
 
   const secret = textInput({ class: "mvb-in mvb-in--mono", readonly: true, "aria-label": "Password", placeholder: "Press Generate" });
   const meter = el("div", { class: "mvb-meter", role: "img", "aria-label": "Strength" }, el("div", { class: "mvb-meter__fill" }));
-  const strength = el("p", { class: "note" });
+  const strength = notice("note");
   const error = notice("error");
 
   const generateButton = button("Generate", { kind: "fill" });
@@ -37,10 +35,15 @@ export function mount(slot) {
     return groups.values().map((key) => SETS[key]).join("");
   }
 
-  function draw(count) {
+  function draw() {
     const source = pool();
+    const fill = meter.querySelector(".mvb-meter__fill");
     if (!source) {
       secret.value = "";
+      fill.style.width = "0%";
+      fill.className = "mvb-meter__fill";
+      meter.setAttribute("aria-label", "Strength");
+      strength.write("");
       error.write("Pick at least one group above.");
       return;
     }
@@ -60,10 +63,12 @@ export function mount(slot) {
     secret.value = password;
     showLength();
     const bits = Math.round(length * Math.log2(source.length));
-    const fill = meter.querySelector(".mvb-meter__fill");
+    const word = bits < 50 ? "weak" : bits < 90 ? "good" : "strong";
     fill.style.width = `${Math.min(100, (bits / 128) * 100)}%`;
     fill.className = `mvb-meter__fill ${bits < 50 ? "mvb-weak" : bits < 90 ? "mvb-ok" : "mvb-strong"}`;
-    strength.textContent = `${bits} bits, ${bits < 50 ? "weak" : bits < 90 ? "good" : "strong"}.`;
+    // The bar is colour only, so the reading it stands for also goes on the bar itself.
+    meter.setAttribute("aria-label", `Strength: ${bits} bits, ${word}`);
+    strength.write(`${bits} bits, ${word}.`);
   }
 
   lengthField.addEventListener("input", () => { showLength(); draw(); });
@@ -76,7 +81,7 @@ export function mount(slot) {
 
   const card = toolcard({
     body: bench(
-      stack(panel(lengthLabel, lengthField), lengthRead, groups, error),
+      stack(panel(lengthLabel, lengthField), groups, error),
       stack(panel("Password", secret), meter, strength)
     ),
     foot: actions(copyButton, generateButton),

package/mevebu/libs/js/tools/password-strength.js

@@ -14,12 +14,12 @@ const GROUPS = [
 ];
 
 const LEVELS = [
-  { name: "very weak", cls: "mvb-weak" },
-  { name: "weak", cls: "mvb-weak" },
-  { name: "fair", cls: "mvb-ok" },
-  { name: "good", cls: "mvb-ok" },
-  { name: "strong", cls: "mvb-strong" },
-  { name: "very strong", cls: "mvb-strong" },
+  { name: "Very weak", cls: "mvb-weak" },
+  { name: "Weak", cls: "mvb-weak" },
+  { name: "Fair", cls: "mvb-ok" },
+  { name: "Good", cls: "mvb-ok" },
+  { name: "Strong", cls: "mvb-strong" },
+  { name: "Very strong", cls: "mvb-strong" },
 ];
 
 function analyze(value) {
@@ -53,7 +53,7 @@ export function mount(slot) {
   const field = passwordInput({ autocomplete: "off", "aria-label": "Password", placeholder: "Type a password" });
   const showButton = button("Show", { icon: "eye" });
   const meter = el("div", { class: "mvb-meter", role: "img", "aria-label": "Strength" }, el("div", { class: "mvb-meter__fill" }));
-  const label = el("p", { class: "note" });
+  const label = el("p", { class: "mvb-note text-[1.0625rem] font-bold text-ink" });
   const lengthValue = el("span", { class: "mvb-kv__v" }, "-");
   const groupsValue = el("span", { class: "mvb-kv__v" }, "-");
   const kv = el("div", { class: "mvb-kv" }, kvRow("Length", lengthValue), kvRow("Character groups", groupsValue));
@@ -75,6 +75,7 @@ export function mount(slot) {
       fill.style.width = "0%";
       fill.className = "mvb-meter__fill";
       label.textContent = "";
+      meter.setAttribute("aria-label", "Strength");
       lengthValue.textContent = "-";
       groupsValue.textContent = "-";
       status.write("");
@@ -85,7 +86,9 @@ export function mount(slot) {
     const level = LEVELS[score];
     fill.style.width = `${(score / 5) * 100}%`;
     fill.className = `mvb-meter__fill ${level.cls}`;
-    label.textContent = `${level.name} by length and patterns.`;
+    label.textContent = level.name;
+    // The bar is colour only, so the reading it stands for also goes on the bar itself.
+    meter.setAttribute("aria-label", `Strength: ${level.name}`);
     lengthValue.textContent = `${length} characters`;
     groupsValue.textContent = `${groups} of 4`;
     for (const text of why) {
@@ -101,10 +104,7 @@ export function mount(slot) {
 
   const card = toolcard({
     body: bench(
-      stack(
-        panel("Password", el("div", { class: "mvb-secret" }, field, showButton)),
-        el("p", { class: "mvb-note" }, "The check runs in this tab. Do not type a real password into a site you do not trust.")
-      ),
+      stack(panel("Password", el("div", { class: "mvb-secret" }, field, showButton))),
       stack(meter, label, kv, hints, status)
     ),
     foot: actions(copyButton(() => report, "Copy report", "fill")),

package/mevebu/libs/js/tools/qr-generator.js

@@ -7,7 +7,7 @@ export function mount(slot) {
   const content = textArea({ rows: 4, value: "https://mevebu.app", "aria-label": "Text or link", placeholder: "Text or link" });
   const sizeField = numberInput({ value: "256", min: "120", max: "1024", step: "8", "aria-label": "Size in pixels" });
   const canvas = el("canvas", { class: "mvb-qrcode", role: "img", "aria-label": "QR code" });
-  const reading = el("p", { class: "note" });
+  const reading = el("p", { class: "mvb-note" });
   const error = notice("error");
   let svg = "";
 

package/mevebu/libs/js/tools/qr-scanner.js

@@ -21,7 +21,7 @@ function loadJsQR() {
 export function mount(slot) {
   const video = el("video", { class: "mvb-qrview", playsinline: true, muted: true, hidden: true });
   const fileField = el("input", { type: "file", accept: "image/*", hidden: true, "aria-label": "Image file" });
-  const status = el("p", { class: "note" });
+  const status = el("p", { class: "mvb-note" });
   const found = output({ rows: 3 });
   const error = notice("error");
 

package/mevebu/libs/js/tools/secure-token.js

@@ -1,5 +1,5 @@
 // Random tokens from the browser random source, in hex or URL-safe Base64.
-import { el, numberInput, chipRow, output, notice, button, copyButton, bench, stack, panel, actions, toolcard } from "../core.js";
+import { numberInput, chipRow, output, notice, button, copyButton, bench, stack, panel, actions, toolcard } from "../core.js";
 
 function toHex(bytes) {
   return [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("");
@@ -44,7 +44,6 @@ export function mount(slot) {
       stack(
         panel("Bytes", bytesField),
         panel("Format", formats),
-        el("p", { class: "mvb-note" }, "The token is drawn from the browser random source in this tab. Store real tokens safely."),
         error
       ),
       stack(panel("Token", result))

package/mevebu/libs/js/tools/spin-wheel.js

@@ -1,9 +1,20 @@
 // Spins through your options and lands on one. Canvas wheel with an eased
 // spin, driven by the browser random source, so every option has equal odds.
-import { el, toast, randomInt, bench, stage, stack, panel, textArea, button, output, readPin, writePin, toolcard, actions } from "../core.js";
+import { el, toast, copyButton, randomInt, bench, stage, stack, panel, textArea, button, readPin, writePin, toolcard, actions } from "../core.js";
 
 const SEGMENTS = ["#2456D6", "#151D2E", "#5F8BFF", "#4B5871", "#1A43AD", "#69748C", "#1D2A4D", "#C2CBDF"];
 
+/**
+ * The slice label, in whichever ink reads better on that fill. Every fill in the
+ * palette sits far enough from mid grey that one of the two clears 4.5:1, so a
+ * pale slice never gets white text.
+ */
+function textOn(hex) {
+  const linear = (value) => (value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4);
+  const [r, g, b] = [1, 3, 5].map((at) => linear(parseInt(hex.slice(at, at + 2), 16) / 255));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.2056 ? "#151D2E" : "#FFFFFF";
+}
+
 function entriesFrom(text) {
   return text.split(/\n+/).map((line) => line.trim()).filter(Boolean);
 }
@@ -15,18 +26,18 @@ export function mount(slot) {
   const listField = textArea({ value: saved.entries ?? "", "aria-label": "Options, one per line", placeholder: "One option per line" });
   const canvas = el("canvas", { class: "mvb-wheel", width: 360, height: 360, role: "img", "aria-label": "The wheel" });
   const context = canvas.getContext("2d");
-  const result = output({ rows: 2 });
   const historyBox = el("div", { class: "mvb-wheel__history", role: "list" });
 
   const spinButton = button("Spin", { icon: "rotate-cw", kind: "fill" });
   const clearButton = button("Clear past picks", { icon: "trash", kind: "quiet" });
+  const copyWinner = copyButton(() => winner, "Copy winner");
 
   const status = el("div", { class: "mvb-wheel__status", "aria-live": "polite" }, "Add options, then spin.");
-  result.write("");
 
   let rotation = 0;
   let busy = false;
   let frame = 0;
+  let winner = "";
 
   function draw() {
     const entries = entriesFrom(listField.value);
@@ -44,7 +55,7 @@ export function mount(slot) {
       context.fillStyle = faint;
       context.font = "15px system-ui";
       context.textAlign = "center";
-      context.fillText(entries.length ? "Add one more option to spin" : "Type options on the left", center, center);
+      context.fillText(entries.length ? "Add one more option to spin" : "Type options to spin", center, center);
       status.textContent = entries.length ? "One more option to go." : "Add options, then spin.";
       return;
     }
@@ -61,7 +72,7 @@ export function mount(slot) {
       context.translate(center, center);
       context.rotate(a0 + slice / 2);
       context.textAlign = "right";
-      context.fillStyle = "#fff";
+      context.fillStyle = textOn(SEGMENTS[i % SEGMENTS.length]);
       context.font = "600 13px system-ui, sans-serif";
       const label = entry.length > 13 ? `${entry.slice(0, 12)}…` : entry;
       context.fillText(label, radius - 12, 4);
@@ -92,8 +103,8 @@ export function mount(slot) {
     spinButton.disabled = true;
     status.dataset.winner = "";
     const slice = (Math.PI * 2) / entries.length;
-    const winner = randomInt(entries.length);
-    const finish = (-Math.PI / 2) - (winner * slice + slice / 2);
+    const winnerIndex = randomInt(entries.length);
+    const finish = (-Math.PI / 2) - (winnerIndex * slice + slice / 2);
     const fullTurns = Math.PI * 2 * (5 + randomInt(3));
     const delta = ((finish - rotation) % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2) + fullTurns;
     const start = rotation;
@@ -110,9 +121,9 @@ export function mount(slot) {
         busy = false;
         spinButton.disabled = false;
         status.dataset.winner = "1";
-        status.textContent = entries[winner];
-        result.write(entries[winner]);
-        const chip = el("span", { class: "mvb-wheel__chip", role: "listitem" }, entries[winner]);
+        winner = entries[winnerIndex];
+        status.textContent = winner;
+        const chip = el("span", { class: "mvb-wheel__chip", role: "listitem" }, winner);
         historyBox.prepend(chip);
         while (historyBox.children.length > 12) historyBox.lastChild.remove();
       }
@@ -122,13 +133,14 @@ export function mount(slot) {
 
   listField.addEventListener("input", () => {
     status.dataset.winner = "";
+    winner = "";
     writePin(PIN, { entries: listField.value });
     draw();
   });
   spinButton.addEventListener("click", spin);
   clearButton.addEventListener("click", () => {
     historyBox.replaceChildren();
-    result.write("");
+    winner = "";
     status.dataset.winner = "";
     status.textContent = "Past picks cleared.";
   });
@@ -136,9 +148,9 @@ export function mount(slot) {
   const card = toolcard({
     body: bench(
       stack(panel("Options, one per line", listField)),
-      stage(canvas, status, result, historyBox)
+      stage(canvas, status, historyBox)
     ),
-    foot: actions(clearButton, spinButton),
+    foot: actions(copyWinner, clearButton, spinButton),
   });
   slot.append(card.node);
   draw();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mevebu",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",
@@ -14,6 +14,8 @@
     "LICENSE"
   ],
   "scripts": {
+    "css": "tailwindcss -i mevebu/app/tailwind.src.css -o mevebu/app/tailwind.css",
+    "css:watch": "tailwindcss -i mevebu/app/tailwind.src.css -o mevebu/app/tailwind.css --watch",
     "icons": "node scripts/vendor-icons.mjs",
     "dev": "node bin/mevebu.js",
     "start": "node bin/mevebu.js",
@@ -42,8 +44,10 @@
     "node": ">=18"
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4.3.3",
     "jsqr": "^1.4.0",
     "lucide": "^1.57.0",
-    "qrcode-generator": "^2.0.4"
+    "qrcode-generator": "^2.0.4",
+    "tailwindcss": "^4.3.3"
   }
 }