mevebu 1.6.0 → 1.7.0

package/mevebu/app/tailwind.css

@@ -631,6 +631,9 @@
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .grid-cols-\[minmax\(0\,1fr\)_auto\] {
     grid-template-columns: minmax(0,1fr) auto;
   }
@@ -824,6 +827,9 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-danger {
+    border-color: var(--danger);
+  }
   .border-jade {
     border-color: var(--jade);
   }
@@ -851,6 +857,9 @@
   .bg-black {
     background-color: var(--color-black);
   }
+  .bg-danger {
+    background-color: var(--danger);
+  }
   .bg-deck {
     background-color: var(--deck);
   }
@@ -1229,6 +1238,9 @@
   .text-jade {
     color: var(--jade);
   }
+  .text-on-danger {
+    color: var(--on-danger);
+  }
   .text-on-jade {
     color: var(--on-jade);
   }
@@ -1419,6 +1431,9 @@
     border-color: var(--jade);
   }
   @media (hover: hover) {
+    .hover\:border-danger-deep:hover {
+      border-color: var(--danger-deep);
+    }
     .hover\:border-jade:hover {
       border-color: var(--jade);
     }
@@ -1428,6 +1443,9 @@
     .hover\:border-orbit-hard:hover {
       border-color: var(--orbit-hard);
     }
+    .hover\:bg-danger-deep:hover {
+      background-color: var(--danger-deep);
+    }
     .hover\:bg-deck:hover {
       background-color: var(--deck);
     }
@@ -1651,6 +1669,11 @@
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
+  @media (width >= 80rem) {
+    .min-\[80rem\]\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .\[\&_a\]\:text-jade a {
     color: var(--jade);
   }
@@ -1994,6 +2017,8 @@
   --on-jade: #ffffff;
   --jade-soft: #e0f0e7;
   --danger: #b0231d;
+  --danger-deep: #8e1b16;
+  --on-danger: #ffffff;
   --star: #b37700;
   --track: #bfcac1;
   --scrim: rgb(8 14 11 / 0.5);
@@ -2039,8 +2064,10 @@
   --on-jade: #04120b;
   --jade-soft: #10291f;
   --danger: #ff8a80;
+  --danger-deep: #ffb3ab;
+  --on-danger: #2a0b08;
   --star: #ffcf4d;
-  --track: #2b4033;
+  --track: #3f5c49;
   --scrim: rgb(2 6 4 / 0.68);
   --shadow: 0 22px 50px -20px rgb(0 0 0 / 0.7);
   --caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385978a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
@@ -2075,7 +2102,10 @@
     border-radius: 6px;
   }
   ::selection {
-    background: var(--jade-soft);
+    background: var(--jade);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in srgb, var(--jade) 34%, transparent);
+    }
   }
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {

package/mevebu/app/tailwind.src.css

@@ -50,6 +50,8 @@
   --on-jade: #ffffff;
   --jade-soft: #e0f0e7;
   --danger: #b0231d;
+  --danger-deep: #8e1b16;
+  --on-danger: #ffffff;
   --star: #b37700;
   --track: #bfcac1;
   --scrim: rgb(8 14 11 / 0.5);
@@ -106,8 +108,10 @@
   --on-jade: #04120b;
   --jade-soft: #10291f;
   --danger: #ff8a80;
+  --danger-deep: #ffb3ab;
+  --on-danger: #2a0b08;
   --star: #ffcf4d;
-  --track: #2b4033;
+  --track: #3f5c49;
   --scrim: rgb(2 6 4 / 0.68);
   --shadow: 0 22px 50px -20px rgb(0 0 0 / 0.7);
   --caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385978a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
@@ -136,6 +140,8 @@
   --color-on-jade: var(--on-jade);
   --color-jade-soft: var(--jade-soft);
   --color-danger: var(--danger);
+  --color-danger-deep: var(--danger-deep);
+  --color-on-danger: var(--on-danger);
   --color-star: var(--star);
   --color-track: var(--track);
 
@@ -201,7 +207,13 @@
     border-radius: 6px;
   }
 
-  ::selection { background: var(--jade-soft); }
+  /* A selection has to read on both grounds. The browser default nearly vanishes
+     on the dark deck, and `--jade-soft` is darker still there, so the highlight
+     is the accent mixed down instead, which stays visible over a field, a
+     readout and the page alike. */
+  ::selection {
+    background: color-mix(in srgb, var(--jade) 34%, transparent);
+  }
 
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {

package/mevebu/libs/js/core.js

@@ -616,6 +616,7 @@ const BTN_KIND = {
   fill: "border-jade bg-jade px-4 text-on-jade hover:border-jade-deep hover:bg-jade-deep",
   plain: "border-orbit bg-deck px-4 text-ink hover:border-orbit-hard hover:bg-deck-2",
   quiet: "border-transparent bg-transparent px-2.5 text-ink-2 hover:bg-deck-2 hover:text-ink",
+  danger: "border-danger bg-danger px-4 text-on-danger hover:border-danger-deep hover:bg-danger-deep",
 };
 
 export function button(labelText, { icon: iconName, kind = "plain", class: extra, tag = "button", ...rest } = {}) {
@@ -623,7 +624,9 @@ export function button(labelText, { icon: iconName, kind = "plain", class: extra
     tag,
     { class: withExtra(`${BTN} ${BTN_KIND[kind] ?? BTN_KIND.plain}`, extra), ...(tag === "button" ? { type: "button" } : null), ...rest },
     iconName ? icon(iconName) : null,
-    el("span", {}, labelText)
+    // An icon-only button skips the label span: an empty one still spends the
+    // row's gap, which pushes the icon off centre.
+    labelText ? el("span", {}, labelText) : null
   );
 }
 
@@ -681,10 +684,14 @@ export function chipRow(items, { value, onChange, label } = {}) {
   return wrap;
 }
 
-/** Independent toggles. Returns the wrapper with `.values()` reading the boxes. */
-export function toggleRow(items) {
+/**
+ * Independent toggles. Returns the wrapper with `.values()` reading the boxes.
+ * `columns: 2` lays them out on an even grid, so a set of related boxes lines up
+ * instead of ragging across the row.
+ */
+export function toggleRow(items, { columns } = {}) {
   const boxes = new Map();
-  const wrap = el("div", { class: "flex flex-wrap gap-1.5" });
+  const wrap = el("div", { class: columns === 2 ? "grid grid-cols-2 gap-1.5" : "flex flex-wrap gap-1.5" });
   for (const item of items) {
     const node = checkbox(item.label, { checked: item.checked !== false });
     boxes.set(item.value, node.input);
@@ -743,7 +750,7 @@ export function blank(iconName, text) {
 // ---------- version ----------
 
 // Kept in one place. The CLI reads the same value from package.json.
-export const VERSION = "1.6.0";
+export const VERSION = "1.7.0";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/mevebu/libs/js/tools/flashcard-creator.js

@@ -34,7 +34,7 @@ export function mount(slot) {
     JSON.stringify(cards.map(({ question: q, answer: a }) => ({ question: q, answer: a })), null, 2);
 
   function removeButton(card) {
-    const node = button("", { icon: "trash", "aria-label": `Remove ${card.question}` });
+    const node = button("", { icon: "trash", kind: "danger", "aria-label": `Remove ${card.question}` });
     node.addEventListener("click", () => {
       cards = cards.filter((entry) => entry.id !== card.id);
       if (index >= cards.length) index = Math.max(0, cards.length - 1);
@@ -52,10 +52,22 @@ export function mount(slot) {
       const card = cards[index];
       faceLabel.textContent = flipped ? "Answer" : "Question";
       face.textContent = flipped ? card.answer : card.question;
-      listWrap.replaceChildren(el("table", { class: "w-full border-collapse font-mono text-sm [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:border-b [&_td]:border-b [&_th]:border-orbit [&_td]:border-orbit [&_th]:px-2.5 [&_td]:px-2.5 [&_th]:py-2 [&_td]:py-2 [&_th]:text-start [&_td]:text-start [&_th]:font-sans [&_th]:text-2xs [&_th]:font-semibold [&_th]:text-ink-2 [&_tbody>tr:last-child>th]:border-b-0 [&_tbody>tr:last-child>td]:border-b-0" },
-        el("tbody", {}, ...cards.map((entry, i) => el("tr", {},
-          el("th", {}, `${i + 1}. ${entry.question}`),
-          el("td", {}, removeButton(entry)))))));
+      // A row per card, not a table: the question takes the width it needs and
+      // the remove button stays on the centre line of every row.
+      listWrap.replaceChildren(
+        el(
+          "ol",
+          { class: "m-0 grid list-none gap-1.5 p-0" },
+          ...cards.map((entry, i) =>
+            el(
+              "li",
+              { class: "flex items-center gap-3 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-2.5" },
+              el("span", { class: "min-w-0 flex-1 wrap-anywhere font-mono text-sm" }, `${i + 1}. ${entry.question}`),
+              removeButton(entry)
+            )
+          )
+        )
+      );
     }
     stats.replaceChildren(tile("Cards", cards.length), tile("Card", cards.length ? `${index + 1} / ${cards.length}` : "-"));
     flipButton.disabled = !cards.length;

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

@@ -1,9 +1,14 @@
-// Signs a JSON Web Token with HS256. Checks that the JSON parses and shows a
+// Signs a JSON Web Token with HMAC. Checks that the JSON parses and shows a
 // readable decode of the payload, so a typo surfaces before signing.
-import { el, icon, bench, stack, panel, textArea, textInput, notice, copyButton, output, debounce, actions, toolcard } from "../core.js";
+import { el, icon, bench, stack, panel, textArea, textInput, selectInput, notice, copyButton, output, button, debounce, actions, toolcard } from "../core.js";
 
 const encoder = new TextEncoder();
 
+// What can actually be signed here. The select is built from this, so the list
+// and the signing call can never drift apart.
+const ALGS = { HS256: "SHA-256", HS384: "SHA-384", HS512: "SHA-512" };
+const TYPES = ["JWT", "at+jwt"];
+
 // 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"]];
@@ -18,16 +23,14 @@ const toUrlString = (text) => toUrl(encoder.encode(text));
 export function mount(slot) {
   const now = Math.floor(Date.now() / 1000);
 
-  const headerField = textArea({ rows: 3, value: '{\n  "alg": "HS256",\n  "typ": "JWT"\n}' });
+  const headerField = textArea({ rows: 6, value: '{\n  "alg": "HS256",\n  "typ": "JWT"\n}' });
   const payloadField = textArea({
-    rows: 7,
+    rows: 6,
     value: `{\n  "sub": "1234567890",\n  "name": "Ada",\n  "admin": true,\n  "iat": ${now}\n}`});
   const secretField = textInput({ type: "password", value: "your-256-bit-secret", autocomplete: "new-password" });
-  const showButton = el(
-    "button",
-    { class: "inline-flex size-[var(--ctl)] cursor-pointer items-center justify-center rounded-r1 border border-transparent bg-transparent text-ink-2 transition-colors duration-150 hover:bg-deck-2 hover:text-ink focus-visible:border-jade", type: "button", "aria-label": "Show secret", "aria-pressed": "false" },
-    icon("eye")
-  );
+  const algField = selectInput(Object.keys(ALGS), { value: "HS256", "aria-label": "Algorithm" });
+  const typField = selectInput(TYPES, { value: "JWT", "aria-label": "Token type" });
+  const showButton = button("", { icon: "eye", kind: "plain", "aria-label": "Show secret", "aria-pressed": "false" });
   const error = notice("error");
   const tokenOut = output({ tag: "textarea", rows: 4 });
   const decoded = output({ rows: 4 });
@@ -43,6 +46,33 @@ export function mount(slot) {
     showButton.setAttribute("aria-pressed", String(!visible));
   });
 
+  /** The header as data, or null while it is mid edit. */
+  const readHeader = () => {
+    try {
+      const parsed = JSON.parse(headerField.value);
+      return parsed && typeof parsed === "object" ? parsed : null;
+    } catch {
+      return null;
+    }
+  };
+
+  /** A header typed by hand still moves the two selects when it names a known value. */
+  function followHeader() {
+    const header = readHeader();
+    if (!header) return;
+    if (ALGS[header.alg]) algField.value = header.alg;
+    if (TYPES.includes(header.typ)) typField.value = header.typ;
+  }
+
+  /** A select writes back into the header, which stays the one source of truth. */
+  function writeHeader() {
+    const header = readHeader() ?? {};
+    header.alg = algField.value;
+    header.typ = typField.value;
+    headerField.value = JSON.stringify(header, null, 2);
+    sign();
+  }
+
   async function sign() {
     error.write("");
     let header;
@@ -54,8 +84,9 @@ export function mount(slot) {
       error.write(`That JSON does not parse. ${caught.message}`);
       return;
     }
-    if (header.alg && header.alg !== "HS256") {
-      error.write("HS256 is the only algorithm here. Change alg to HS256.");
+    const hash = ALGS[header.alg];
+    if (!hash) {
+      error.write(`Only ${Object.keys(ALGS).join(", ")} can be signed here. Set alg to one of those.`);
       return;
     }
     let token = "";
@@ -63,7 +94,7 @@ export function mount(slot) {
       const first = toUrlString(JSON.stringify(header));
       const second = toUrlString(JSON.stringify(payload));
       const message = `${first}.${second}`;
-      const key = await crypto.subtle.importKey("raw", encoder.encode(secretField.value), { name: "HMAC", hash: "SHA-256" }, false, ["sign"]);
+      const key = await crypto.subtle.importKey("raw", encoder.encode(secretField.value), { name: "HMAC", hash }, false, ["sign"]);
       const signature = await crypto.subtle.sign("HMAC", key, encoder.encode(message));
       token = `${message}.${toUrl(new Uint8Array(signature))}`;
     } catch (caught) {
@@ -84,19 +115,30 @@ export function mount(slot) {
   // Live signing. The textareas are the only slow field: invalid JSON while a
   // half-typed brace is on screen is normal, so the wait is longer than usual.
   const live = debounce(sign, 250);
-  for (const field of [headerField, payloadField, secretField]) {
-    field.addEventListener("input", live);
-  }
+  headerField.addEventListener("input", () => { followHeader(); live(); });
+  for (const field of [payloadField, secretField]) field.addEventListener("input", live);
+  for (const field of [algField, typField]) field.addEventListener("change", writeHeader);
 
   const card = toolcard({
     body: bench(
       stack(
-        panel("Header", headerField),
-        panel("Payload", payloadField),
+        // The secret leads the column: it is the one field a visitor has to fill
+        // before the token means anything, and the two header choices are the
+        // adjustment after it.
         panel("Secret", el("div", { class: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2" }, secretField, showButton)),
+        panel("Algorithm", algField),
+        panel("Type", typField),
         error
       ),
-      stack(panel("Token", tokenOut), timePanel)
+      stack(
+        // Header and payload sit side by side once there is room for two columns,
+        // which is the pair a reader compares anyway.
+        el("div", { class: "grid gap-4 min-[80rem]:grid-cols-2" },
+          panel("Header", headerField),
+          panel("Payload", payloadField)),
+        panel("Token", tokenOut),
+        timePanel
+      )
     ),
     foot: actions(copyBtn)});
   slot.append(card.node);
@@ -105,4 +147,4 @@ export function mount(slot) {
   return {};
 }
 
-export default { mount };
+export default { mount };

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

@@ -15,11 +15,12 @@ export function mount(slot) {
     lengthLabel.textContent = `Length: ${lengthField.value}`;
   }
 
+  // Two columns, so the four groups read as a block instead of ragging.
   const groups = toggleRow([
     { value: "lower", label: "a to z" },
     { value: "upper", label: "A to Z" },
     { value: "digits", label: "0 to 9" },
-    { value: "symbols", label: "Symbols" }]);
+    { value: "symbols", label: "Symbols" }], { columns: 2 });
 
   const secret = textInput({ mono: true, readonly: true, "aria-label": "Password", placeholder: "Press Generate" });
   const meter = el("div", { class: "h-2 overflow-hidden rounded-full bg-deck-2", role: "img", "aria-label": "Strength" }, el("div", { class: "h-full w-0 rounded-full bg-orbit-hard transition-[width,background-color] duration-150 data-[level=weak]:bg-danger data-[level=ok]:bg-star data-[level=strong]:bg-jade" }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mevebu",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",