mevebu 2.4.0 → 2.5.1

package/README.md

@@ -2,7 +2,7 @@
 
 # mevebu
 
-**220 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
+**225 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
 
 A private toolbox for the small jobs that do not deserve a whole app: format JSON, decode a JWT, make a password, build a cron line, pick a color, scan a QR code, and a lot more.
 
@@ -10,7 +10,7 @@ A private toolbox for the small jobs that do not deserve a whole app: format JSO
 [![npm downloads](https://img.shields.io/npm/dm/mevebu?color=2ea44f)](https://www.npmjs.com/package/mevebu)
 [![License: MIT](https://img.shields.io/github/license/mevebu/mevebu?color=blue)](./LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/mevebu/mevebu?style=flat&color=yellow)](https://github.com/mevebu/mevebu/stargazers)
-![Tools](https://img.shields.io/badge/tools-220-brightgreen)
+![Tools](https://img.shields.io/badge/tools-225-brightgreen)
 ![Privacy](https://img.shields.io/badge/privacy-100%25%20in--browser-blue)
 
 [Quick start](#quick-start) · [What's inside](#whats-inside) · [Privacy](#privacy-by-design) · [Credit](#credit) · [Development](#development) · [FAQ](#faq)
@@ -23,7 +23,7 @@ A private toolbox for the small jobs that do not deserve a whole app: format JSO
 
 ## What is mevebu?
 
-mevebu is a collection of **220 small online tools** that all run **inside your browser**. Each tool lives on its own page, does one job, and does it fast. Most of them update as you type, so there is no submit button and no waiting.
+mevebu is a collection of **225 small online tools** that all run **inside your browser**. Each tool lives on its own page, does one job, and does it fast. Most of them update as you type, so there is no submit button and no waiting.
 
 Think of it as a clean, private alternative to the usual "free online tools" websites. There are no accounts, no ads in your way, no uploads, and no tracking. Your text, passwords, tokens, and files stay on your device.
 
@@ -64,33 +64,33 @@ mevebu tries port `5555` first, then `5678`, then `5432`, and finally any free p
 
 ## What's inside
 
-mevebu has **220 tools in 20 categories**. Here is the full breakdown:
-
-| Category           | Tools |
-| ------------------ | ----: |
-| Data Generator     |    10 |
-| Passwords and keys |    20 |
-| Developer          |    26 |
-| Convert            |    15 |
-| Text and data      |    14 |
-| Daily use          |     8 |
-| Math               |    17 |
-| Date and time      |     7 |
-| Data and lists     |     8 |
-| Design             |    10 |
-| Web and SEO        |    12 |
-| Encoding           |     8 |
-| Academic           |    15 |
-| Study              |     7 |
-| Business           |    10 |
-| Locale             |     7 |
-| Content            |     8 |
-| GitHub             |     8 |
-| Units              |     8 |
-| QR codes           |     2 |
-| **Total**          | **220** |
-
-The counts come straight from the tool registry, so this table and the app never drift apart.
+mevebu has **225 tools in 20 categories**. Here is the full breakdown:
+
+| Category | A few tools | Count |
+| --- | --- | ---: |
+| [Data Generator](https://github.com/mevebu/mevebu/blob/main/docs/tools/data-gen.md) | Team Generator, Roster Rotation, Sample CSV |   10 |
+| [Passwords and keys](https://github.com/mevebu/mevebu/blob/main/docs/tools/security.md) | Password Generator, JWT Generator, Hash Generator |   20 |
+| [Developer](https://github.com/mevebu/mevebu/blob/main/docs/tools/developer.md) | JavaScript Formatter, JavaScript Minifier, YAML to JSON |   31 |
+| [Convert](https://github.com/mevebu/mevebu/blob/main/docs/tools/convert.md) | Base64, URL Encoder, Case Converter |   15 |
+| [Text and data](https://github.com/mevebu/mevebu/blob/main/docs/tools/text.md) | Lorem Ipsum, Test Data, Word Counter |   14 |
+| [Daily use](https://github.com/mevebu/mevebu/blob/main/docs/tools/daily.md) | Countdown Timer, Stopwatch, Checklist |    8 |
+| [Math](https://github.com/mevebu/mevebu/blob/main/docs/tools/math.md) | Percentage Calculator, Percentage Change, Discount Calculator |   17 |
+| [Date and time](https://github.com/mevebu/mevebu/blob/main/docs/tools/datetime.md) | Date Difference, Add or Subtract Days, Business Days |    7 |
+| [Data and lists](https://github.com/mevebu/mevebu/blob/main/docs/tools/data.md) | CSV Viewer, CSV to JSON, JSON to CSV |    8 |
+| [Design](https://github.com/mevebu/mevebu/blob/main/docs/tools/design.md) | Color Picker, Color Palette, Gradient Generator |   10 |
+| [Web and SEO](https://github.com/mevebu/mevebu/blob/main/docs/tools/seo.md) | Meta Tags, Open Graph Tags, Robots.txt |   12 |
+| [Academic](https://github.com/mevebu/mevebu/blob/main/docs/tools/academic.md) | APA 7 Reference, MLA Citation, IEEE Reference |   15 |
+| [Study](https://github.com/mevebu/mevebu/blob/main/docs/tools/education.md) | Flashcard Creator, Quiz Formatter, Grade Calculator |    7 |
+| [Business](https://github.com/mevebu/mevebu/blob/main/docs/tools/business.md) | Cost per Unit, Selling Price, Break-Even Point |   10 |
+| [Encoding](https://github.com/mevebu/mevebu/blob/main/docs/tools/encoding.md) | Unicode Inspector, UTF-8 Byte Counter, HTML to Text |    8 |
+| [Locale](https://github.com/mevebu/mevebu/blob/main/docs/tools/locale.md) | Reading Time, Readability, Sentence Length |    7 |
+| [Content](https://github.com/mevebu/mevebu/blob/main/docs/tools/content.md) | Caption Counter, Hashtag Formatter, Line Break Formatter |    8 |
+| [GitHub](https://github.com/mevebu/mevebu/blob/main/docs/tools/git.md) | README Generator, Gitignore Generator, Semantic Version |    8 |
+| [Units](https://github.com/mevebu/mevebu/blob/main/docs/tools/measure.md) | Length Converter, Weight Converter, Temperature Converter |    8 |
+| [QR codes](https://github.com/mevebu/mevebu/blob/main/docs/tools/qr.md) | QR Generator, QR Scanner |    2 |
+| **Total** | **20 categories** | **225** |
+
+The counts and the category pages come straight from the tool registry. Run `npm run docs` after adding a tool, so this table, the pages under `docs/tools/`, and the app never drift apart.
 
 ### Popular tools
 
@@ -128,7 +128,7 @@ Do not just take our word for it. Open the Network tab in your browser dev tools
 
 ## Credit
 
-mevebu is built and maintained by the [mevebu](https://github.com/mevebu) organization, created by [Ilyas Mukhlisin](https://www.instagram.com/ilyas.mukhlisin). Two repositories live there: **Mevebu**, this toolbox, and **Waitsec**, a set of guardrails for coding agents.
+mevebu is built and maintained by the [mevebu](https://github.com/mevebu) organization, created by [Ilyas Mukhlisin](https://github.com/ilyasmukhlisin). Two repositories live there: **Mevebu**, this toolbox, and **Waitsec**, a set of guardrails for coding agents.
 
 The code is MIT licensed. If you learn from it, borrow a helper, or ship something inspired by it, keep the copyright notice and say where it came from. A link back to [github.com/mevebu/mevebu](https://github.com/mevebu/mevebu) is enough.
 
@@ -176,7 +176,7 @@ That is all. The catalog, search, breadcrumbs, and category pages pick it up aut
 ## FAQ
 
 **What is mevebu?**
-mevebu is a free, open source collection of 220 browser based tools for developers, students, creators, and everyday use. Every tool runs locally in your browser.
+mevebu is a free, open source collection of 225 browser based tools for developers, students, creators, and everyday use. Every tool runs locally in your browser.
 
 **Is mevebu really free?**
 Yes. It is MIT licensed, with no paid tier, no account, and no usage limits.

package/mevebu/app/tailwind.css

@@ -3,8 +3,20 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
+    --color-amber-300: oklch(87.9% 0.169 91.605);
+    --color-amber-400: oklch(82.8% 0.189 84.429);
+    --color-amber-500: oklch(76.9% 0.188 70.08);
+    --color-amber-600: oklch(66.6% 0.179 58.318);
+    --color-emerald-400: oklch(76.5% 0.177 163.223);
+    --color-emerald-500: oklch(69.6% 0.17 162.48);
+    --color-emerald-600: oklch(59.6% 0.145 163.225);
+    --color-rose-400: oklch(71.2% 0.194 13.428);
+    --color-rose-500: oklch(64.5% 0.246 16.439);
+    --color-rose-600: oklch(58.6% 0.253 17.585);
     --color-black: #000;
     --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 14px;
     --text-sm--line-height: 1.5;
     --text-base: 16px;
@@ -21,6 +33,7 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --leading-normal: 1.5;
+    --radius-xs: 0.125rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --default-transition-duration: 150ms;
@@ -608,6 +621,9 @@
   .w-0 {
     width: 0px;
   }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
@@ -964,6 +980,9 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -996,6 +1015,12 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-amber-500\/40 {
+    border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent);
+    }
+  }
   .border-current\/15 {
     border-color: currentcolor;
     @supports (color: color-mix(in lab, red, red)) {
@@ -1011,6 +1036,12 @@
       border-color: color-mix(in oklab, var(--danger) 40%, transparent);
     }
   }
+  .border-emerald-500\/40 {
+    border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-emerald-500) 40%, transparent);
+    }
+  }
   .border-jade {
     border-color: var(--jade);
   }
@@ -1020,6 +1051,12 @@
   .border-orbit-hard {
     border-color: var(--orbit-hard);
   }
+  .border-rose-500\/40 {
+    border-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-rose-500) 40%, transparent);
+    }
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1035,6 +1072,12 @@
   .bg-\[var\(--scrim\)\] {
     background-color: var(--scrim);
   }
+  .bg-amber-300\/60 {
+    background-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-300) 60%, transparent);
+    }
+  }
   .bg-black {
     background-color: var(--color-black);
   }
@@ -1176,6 +1219,9 @@
   .px-0 {
     padding-inline: 0px;
   }
+  .px-0\.5 {
+    padding-inline: calc(var(--spacing) * 0.5);
+  }
   .px-1 {
     padding-inline: var(--spacing);
   }
@@ -1400,6 +1446,10 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   .text-\[0\.92em\] {
     font-size: 0.92em;
   }
@@ -1513,9 +1563,18 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
+  .text-amber-600 {
+    color: var(--color-amber-600);
+  }
   .text-danger {
     color: var(--danger);
   }
+  .text-emerald-600 {
+    color: var(--color-emerald-600);
+  }
+  .text-inherit {
+    color: inherit;
+  }
   .text-ink {
     color: var(--ink);
   }
@@ -1537,6 +1596,9 @@
   .text-orbit-hard {
     color: var(--orbit-hard);
   }
+  .text-rose-600 {
+    color: var(--color-rose-600);
+  }
   .text-void {
     color: var(--void);
   }
@@ -1568,6 +1630,12 @@
   .underline {
     text-decoration-line: underline;
   }
+  .decoration-dotted {
+    text-decoration-style: dotted;
+  }
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
   .underline-offset-\[3px\] {
     text-underline-offset: 3px;
   }
@@ -2055,6 +2123,21 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+  .dark\:bg-amber-400\/40:where([data-theme="dark"], [data-theme="dark"] *) {
+    background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-amber-400) 40%, transparent);
+    }
+  }
+  .dark\:text-amber-400:where([data-theme="dark"], [data-theme="dark"] *) {
+    color: var(--color-amber-400);
+  }
+  .dark\:text-emerald-400:where([data-theme="dark"], [data-theme="dark"] *) {
+    color: var(--color-emerald-400);
+  }
+  .dark\:text-rose-400:where([data-theme="dark"], [data-theme="dark"] *) {
+    color: var(--color-rose-400);
+  }
   .\[\&_a\]\:text-jade a {
     color: var(--jade);
   }

package/mevebu/libs/js/core.js

@@ -750,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 = "2.4.0";
+export const VERSION = "2.5.1";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/mevebu/libs/js/registry.js

@@ -662,6 +662,96 @@ export const TOOLS = [
     keywords: "xml minify compact whitespace cdata size",
     load: () => import("./tools/xml-minifier.js"),
   },
+  {
+    id: "json-diff",
+    category: "developer",
+    name: "JSON Diff",
+    icon: "git-compare",
+    note: "Compare two JSON documents by path.",
+    about: "Lists every added, removed and changed path, with a count per kind.",
+    tutorial: {
+      intro: "See what changed between two JSON documents.",
+      steps: [
+        "Paste the old document and the new one.",
+        "Read the paths that were added, removed or changed.",
+        "Copy the report.",
+      ],
+    },
+    keywords: "json diff compare changes paths added removed",
+    load: () => import("./tools/json-diff.js"),
+  },
+  {
+    id: "json-path-tester",
+    category: "developer",
+    name: "JSONPath Tester",
+    icon: "text-search",
+    note: "Run a JSONPath expression on JSON.",
+    about: "Supports root, child, wildcard, index, slice and filter selectors.",
+    tutorial: {
+      intro: "Test a JSONPath expression against a document.",
+      steps: [
+        "Paste the JSON.",
+        "Type an expression such as $.items[?(@.price > 10)].name.",
+        "Read the matches and their paths.",
+      ],
+    },
+    keywords: "jsonpath json query path filter select expression",
+    load: () => import("./tools/json-path-tester.js"),
+  },
+  {
+    id: "cron-next-runs",
+    category: "developer",
+    name: "Cron Next Runs",
+    icon: "calendar-clock",
+    note: "See the next ten times a cron job runs.",
+    about: "Reads five fields and the @daily shortcuts, in your timezone or UTC.",
+    tutorial: {
+      intro: "Find out when a cron expression actually runs.",
+      steps: [
+        "Paste an expression such as */15 9-17 * * 1-5.",
+        "Pick your browser timezone or UTC.",
+        "The next ten runs appear as dates.",
+      ],
+    },
+    keywords: "cron schedule next runs crontab job time",
+    load: () => import("./tools/cron-next-runs.js"),
+  },
+  {
+    id: "html-to-jsx",
+    category: "developer",
+    name: "HTML to JSX",
+    icon: "code-xml",
+    note: "Convert an HTML fragment to JSX.",
+    about: "Renames attributes, turns inline styles into objects, and closes void tags.",
+    tutorial: {
+      intro: "Turn copied markup into a JSX fragment.",
+      steps: [
+        "Paste the HTML.",
+        "Read the JSX on the right.",
+        "Copy it into your component.",
+      ],
+    },
+    keywords: "html to jsx react convert className htmlFor style object",
+    load: () => import("./tools/html-to-jsx.js"),
+  },
+  {
+    id: "regex-cheatsheet",
+    category: "developer",
+    name: "Regex Cheatsheet",
+    icon: "book-open",
+    note: "Look up regex tokens with examples.",
+    about: "Every row shows the token, what it matches and a highlighted example.",
+    tutorial: {
+      intro: "Find the regex token you need.",
+      steps: [
+        "Type to filter the list.",
+        "Read the token and its example.",
+        "Open Regex Tester to try the full pattern.",
+      ],
+    },
+    keywords: "regex cheatsheet reference tokens syntax javascript",
+    load: () => import("./tools/regex-cheatsheet.js"),
+  },
   {
     id: "uuid-generator",
     category: "developer",

package/mevebu/libs/js/tools/cron-next-runs.js

@@ -0,0 +1,179 @@
+// Lists the next ten times a five-field cron expression fires, in the browser
+// timezone or UTC.
+import { el, bench, stack, panel, textInput, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
+
+const MONTHS = ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
+const DAYS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+const SPECIAL = {
+  "@yearly": "0 0 1 1 *", "@annually": "0 0 1 1 *", "@monthly": "0 0 1 * *",
+  "@weekly": "0 0 * * 0", "@daily": "0 0 * * *", "@midnight": "0 0 * * *",
+  "@hourly": "0 * * * *",
+};
+
+function valueOf(raw, names, min, max) {
+  const text = raw.toUpperCase();
+  if (names && names.includes(text)) return names.indexOf(text) + (names === MONTHS ? 1 : 0);
+  if (!/^\d+$/.test(text)) throw new Error(`Unknown value ${raw}.`);
+  const value = Number(text);
+  if (value < min || value > max) {
+    throw new Error(`Value ${raw} is out of range.`);
+  }
+  return value;
+}
+
+function parseField(raw, min, max, names = null) {
+  if (raw === "*") {
+    const set = new Set();
+    for (let value = min; value <= max; value++) set.add(value);
+    return { set, restricted: false };
+  }
+  const set = new Set();
+  for (const part of raw.split(",")) {
+    const [range, stepText] = part.split("/");
+    const step = stepText === undefined ? 1 : Number(stepText);
+    if (!Number.isInteger(step) || step < 1) throw new Error(`Bad step in ${part}.`);
+    let from;
+    let to;
+    if (range === "*") {
+      from = min;
+      to = max;
+    } else if (range.includes("-")) {
+      const [a, b] = range.split("-");
+      from = valueOf(a, names, min, max);
+      to = valueOf(b, names, min, max);
+    } else {
+      from = valueOf(range, names, min, max);
+      to = stepText === undefined ? from : max;
+    }
+    if (from > to) throw new Error(`Range ${range} runs backwards.`);
+    for (let value = from; value <= to; value += step) {
+      set.add(names === DAYS && value === 7 ? 0 : value);
+    }
+  }
+  return { set, restricted: true };
+}
+
+function compile(expression) {
+  const raw = SPECIAL[expression.trim().toLowerCase()] ?? expression.trim();
+  const fields = raw.split(/\s+/);
+  if (fields.length !== 5) throw new Error("A cron expression needs exactly five fields.");
+  return {
+    minute: parseField(fields[0], 0, 59),
+    hour: parseField(fields[1], 0, 23),
+    day: parseField(fields[2], 1, 31),
+    month: parseField(fields[3], 1, 12, MONTHS),
+    weekday: parseField(fields[4], 0, 6, DAYS),
+  };
+}
+
+function nextRuns(expression, timezone, count = 10) {
+  const cron = compile(expression);
+  const utc = timezone === "utc";
+  const get = (date, key) => date[utc ? `getUTC${key}` : `get${key}`]();
+  const hours = [...cron.hour.set].sort((a, b) => a - b);
+  const minutes = [...cron.minute.set].sort((a, b) => a - b);
+  const results = [];
+  const start = new Date();
+  const cursor = new Date(start.getTime());
+  if (utc) cursor.setUTCHours(0, 0, 0, 0);
+  else cursor.setHours(0, 0, 0, 0);
+
+  for (let day = 0; day < 3660 && results.length < count; day++) {
+    const month = get(cursor, "Month") + 1;
+    const dayOfMonth = get(cursor, "Date");
+    const weekday = get(cursor, "Day");
+    const dayMatch = cron.day.set.has(dayOfMonth);
+    const weekdayMatch = cron.weekday.set.has(weekday);
+    const dayOk = cron.day.restricted && cron.weekday.restricted
+      ? dayMatch || weekdayMatch
+      : dayMatch && weekdayMatch;
+    if (dayOk && cron.month.set.has(month)) {
+      const year = get(cursor, "FullYear");
+      for (const hour of hours) {
+        for (const minute of minutes) {
+          const candidate = utc
+            ? new Date(Date.UTC(year, month - 1, dayOfMonth, hour, minute))
+            : new Date(year, month - 1, dayOfMonth, hour, minute);
+          if (candidate <= start) continue;
+          results.push(candidate);
+          if (results.length === count) break;
+        }
+        if (results.length === count) break;
+      }
+    }
+    if (utc) cursor.setUTCDate(cursor.getUTCDate() + 1);
+    else cursor.setDate(cursor.getDate() + 1);
+  }
+  if (!results.length) throw new Error("No run found in the next ten years.");
+  return results;
+}
+
+export function mount(slot) {
+  const expression = textInput({ value: "*/15 9-17 * * 1-5", "aria-label": "Cron expression", class: "font-mono" });
+  const error = notice("error");
+  const list = el("div", { class: "grid gap-1.5" });
+  let timezone = "local";
+
+  const chips = chipRow(
+    [{ value: "local", label: "Browser" }, { value: "utc", label: "UTC" }],
+    { value: "local", label: "Timezone", onChange: (value) => { timezone = value; run(); } },
+  );
+
+  const presets = chipRow(
+    [
+      { value: "*/15 * * * *", label: "Every 15 min" },
+      { value: "0 * * * *", label: "Hourly" },
+      { value: "0 0 * * *", label: "Daily" },
+      { value: "0 9 * * 1-5", label: "Weekdays 9:00" },
+      { value: "0 0 * * 1", label: "Weekly" },
+    ],
+    { label: "Presets", onChange: (value) => { if (!value) return; expression.value = value; run(); } },
+  );
+
+  const formatter = () => new Intl.DateTimeFormat(undefined, {
+    timeZone: timezone === "utc" ? "UTC" : undefined,
+    weekday: "short", year: "numeric", month: "short", day: "2-digit",
+    hour: "2-digit", minute: "2-digit", hour12: false,
+  });
+
+  let runs = [];
+
+  function run() {
+    error.write("");
+    runs = [];
+    if (!expression.value.trim()) {
+      list.replaceChildren();
+      return;
+    }
+    try {
+      runs = nextRuns(expression.value, timezone);
+    } catch (caught) {
+      error.write(caught.message);
+      list.replaceChildren();
+      return;
+    }
+    const format = formatter();
+    list.replaceChildren(...runs.map((date, index) =>
+      el("div", { class: "flex items-baseline gap-3 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-2.5" },
+        el("span", { class: "w-5 flex-none text-2xs font-bold tabular-nums text-ink-3" }, String(index + 1)),
+        el("span", { class: "font-mono text-sm" }, format.format(date)))));
+  }
+
+  expression.addEventListener("input", () => { presets.select(""); run(); });
+
+  const report = () => runs.map((date) => formatter().format(date)).join("\n");
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Expression", expression), panel("Presets", presets), panel("Timezone", chips), error),
+      stack(panel("Next runs", list)),
+    ),
+    foot: actions(copyButton(report, "Copy times", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/html-to-jsx.js

@@ -0,0 +1,144 @@
+// Converts an HTML fragment to JSX: class to className, for to htmlFor, inline
+// styles to objects, and void tags self closed.
+import { bench, stack, panel, textArea, output, notice, copyButton, actions, toolcard } from "../core.js";
+
+const EXAMPLE = '<section class="card" style="padding: 12px; background-color: #fff">\n  <h2 for="title">Hello</h2>\n  <img src="logo.png" alt="">\n  <input type="text" disabled>\n</section>';
+
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+const BOOLEAN = new Set(["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "defer", "disabled", "hidden", "loop", "multiple", "muted", "novalidate", "open", "readonly", "required", "reversed", "selected"]);
+const SPECIAL = {
+  class: "className", for: "htmlFor", tabindex: "tabIndex", readonly: "readOnly",
+  maxlength: "maxLength", minlength: "minLength", colspan: "colSpan", rowspan: "rowSpan",
+  contenteditable: "contentEditable", autocomplete: "autoComplete", autofocus: "autoFocus",
+  enctype: "encType", srcset: "srcSet", crossorigin: "crossOrigin", datetime: "dateTime",
+  novalidate: "noValidate", spellcheck: "spellCheck", formaction: "formAction",
+  allowfullscreen: "allowFullScreen", usemap: "useMap", frameborder: "frameBorder",
+  accesskey: "accessKey", charset: "charSet", cellpadding: "cellPadding", cellspacing: "cellSpacing",
+  hreflang: "hrefLang", referrerpolicy: "referrerPolicy",
+  inputmode: "inputMode", enterkeyhint: "enterKeyHint", autoplay: "autoPlay",
+};
+
+const camel = (name) => {
+  if (name.startsWith("data-") || name.startsWith("aria-")) return name;
+  return SPECIAL[name] ?? name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+};
+
+const escapeAttribute = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+const escapeText = (value) => value
+  .replace(/&/g, "&amp;")
+  .replace(/</g, "&lt;")
+  .replace(/>/g, "&gt;")
+  .replace(/[{}]/g, (brace) => (brace === "{" ? "{'{'}" : "{'}'}"));
+
+function styleObject(text) {
+  const parts = text.split(";").map((part) => part.trim()).filter(Boolean);
+  const pairs = parts.map((part) => {
+    const index = part.indexOf(":");
+    if (index === -1) return null;
+    const name = part.slice(0, index).trim().replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    const value = part.slice(index + 1).trim();
+    return `${name}: ${JSON.stringify(value)}`;
+  }).filter(Boolean);
+  return `{ ${pairs.join(", ")} }`;
+}
+
+function attributes(node) {
+  const output = [];
+  for (const attribute of node.attributes) {
+    const name = attribute.name;
+    const lower = name.toLowerCase();
+    if (BOOLEAN.has(lower) && (attribute.value === "" || attribute.value === lower)) {
+      output.push(camel(lower));
+      continue;
+    }
+    if (lower === "style") {
+      output.push(`style={${styleObject(attribute.value)}}`);
+      continue;
+    }
+    output.push(`${camel(name)}="${escapeAttribute(attribute.value)}"`);
+  }
+  return output;
+}
+
+function serializeChildren(node, depth) {
+  const pad = "  ".repeat(depth);
+  return Array.from(node.childNodes).map((child) => serializeNode(child, depth, pad)).filter(Boolean);
+}
+
+function serializeNode(node, depth, pad = "  ".repeat(depth)) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    const text = node.textContent.replace(/\s+/g, " ").trim();
+    return text ? `${pad}${escapeText(text)}` : "";
+  }
+  if (node.nodeType === Node.COMMENT_NODE) {
+    return `${pad}{/* ${node.textContent.trim()} */}`;
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return "";
+
+  const html = node.namespaceURI === "http://www.w3.org/1999/xhtml";
+  const name = html ? node.tagName.toLowerCase() : node.tagName;
+  const attrs = attributes(node);
+  const open = `<${name}${attrs.length ? ` ${attrs.join(" ")}` : ""}`;
+
+  if (VOID.has(name.toLowerCase())) return `${pad}${open} />`;
+
+  const children = Array.from(node.childNodes);
+  if (!children.length) return `${pad}${open} />`;
+
+  const onlyText = children.every((child) => child.nodeType === Node.TEXT_NODE);
+  if (onlyText) {
+    const text = children.map((child) => child.textContent.replace(/\s+/g, " ").trim()).filter(Boolean).join(" ");
+    return text ? `${pad}${open}>${escapeText(text)}</${name}>` : `${pad}${open} />`;
+  }
+
+  const body = serializeChildren(node, depth + 1);
+  return `${pad}${open}>\n${body.join("\n")}\n${pad}</${name}>`;
+}
+
+function convert(source) {
+  const document = new DOMParser().parseFromString(`<body>${source}</body>`, "text/html");
+  const roots = Array.from(document.body.childNodes).filter((node) =>
+    node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) || node.nodeType === Node.COMMENT_NODE);
+  if (!roots.length) return { text: "" };
+  if (roots.length === 1 && roots[0].nodeType === Node.ELEMENT_NODE) {
+    return { text: serializeNode(roots[0], 0, "") };
+  }
+  const body = roots.map((node) => serializeNode(node, 1)).join("\n");
+  return { text: `<>\n${body}\n</>` };
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 14, "aria-label": "HTML", value: EXAMPLE });
+  const result = output({ tag: "textarea", rows: 14 });
+  const error = notice("error");
+
+  function run() {
+    error.write("");
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    try {
+      result.value = convert(source.value).text;
+    } catch (caught) {
+      result.value = "";
+      error.write(caught.message);
+    }
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("HTML", source), error),
+      stack(panel("JSX", result)),
+    ),
+    foot: actions(copyButton(() => result.value, "Copy JSX", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/json-diff.js

@@ -0,0 +1,111 @@
+// Compares two JSON documents by path, so a reformatted file does not look
+// like a rewrite.
+import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
+
+const EXAMPLE_OLD = '{\n  "name": "mevebu",\n  "tools": 220,\n  "tags": ["offline", "browser"]\n}';
+const EXAMPLE_NEW = '{\n  "name": "mevebu",\n  "tools": 225,\n  "tags": ["offline", "browser", "free"],\n  "license": "MIT"\n}';
+
+const kindLabel = { added: "Added", removed: "Removed", changed: "Changed" };
+
+function isObject(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function walk(oldValue, newValue, path, output) {
+  if (Array.isArray(oldValue) && Array.isArray(newValue)) {
+    const length = Math.max(oldValue.length, newValue.length);
+    for (let index = 0; index < length; index++) {
+      const child = `${path}[${index}]`;
+      if (index >= oldValue.length) output.push({ kind: "added", path: child, after: newValue[index] });
+      else if (index >= newValue.length) output.push({ kind: "removed", path: child, before: oldValue[index] });
+      else walk(oldValue[index], newValue[index], child, output);
+    }
+    return;
+  }
+  if (isObject(oldValue) && isObject(newValue)) {
+    const keys = new Set([...Object.keys(oldValue), ...Object.keys(newValue)]);
+    for (const key of keys) {
+      const child = path ? `${path}.${key}` : key;
+      if (!(key in newValue)) output.push({ kind: "removed", path: child, before: oldValue[key] });
+      else if (!(key in oldValue)) output.push({ kind: "added", path: child, after: newValue[key] });
+      else walk(oldValue[key], newValue[key], child, output);
+    }
+    return;
+  }
+  if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
+    output.push({ kind: "changed", path, before: oldValue, after: newValue });
+  }
+}
+
+const show = (value) => {
+  if (value === undefined) return "";
+  const text = JSON.stringify(value);
+  return text.length > 80 ? `${text.slice(0, 77)}...` : text;
+};
+
+export function mount(slot) {
+  const before = textArea({ rows: 10, "aria-label": "Old JSON", value: EXAMPLE_OLD });
+  const after = textArea({ rows: 10, "aria-label": "New JSON", value: EXAMPLE_NEW });
+  const error = notice("error");
+  const list = el("div", { class: "grid gap-2" });
+  const summary = el("div", { class: "flex flex-wrap gap-2 text-2xs font-semibold" });
+  let rows = [];
+
+  function run() {
+    error.write("");
+    rows = [];
+    if (!before.value.trim() || !after.value.trim()) {
+      list.replaceChildren(el("p", { class: "text-sm text-ink-3" }, "Paste both documents."));
+      summary.replaceChildren();
+      return;
+    }
+    let oldValue;
+    let newValue;
+    try {
+      oldValue = JSON.parse(before.value);
+      newValue = JSON.parse(after.value);
+    } catch (caught) {
+      list.replaceChildren();
+      summary.replaceChildren();
+      error.write(caught.message);
+      return;
+    }
+    walk(oldValue, newValue, "$", rows);
+    const counts = rows.reduce((total, row) => ({ ...total, [row.kind]: (total[row.kind] ?? 0) + 1 }), {});
+    summary.replaceChildren(...["added", "removed", "changed"].map((kind) =>
+      el("span", { class: `rounded-full border px-2.5 py-1 ${kind === "added" ? "border-emerald-500/40 text-emerald-600 dark:text-emerald-400" : kind === "removed" ? "border-rose-500/40 text-rose-600 dark:text-rose-400" : "border-amber-500/40 text-amber-600 dark:text-amber-400"}` },
+        `${counts[kind] ?? 0} ${kind}`)));
+    if (!rows.length) {
+      list.replaceChildren(el("p", { class: "text-sm text-ink-2" }, "No differences."));
+      return;
+    }
+    list.replaceChildren(...rows.map((row) =>
+      el("div", { class: "grid gap-1 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+        el("div", { class: "flex flex-wrap items-baseline gap-2" },
+          el("span", { class: "rounded-full border border-orbit px-2 py-0.5 text-2xs font-semibold text-ink-2" }, kindLabel[row.kind]),
+          el("code", { class: "wrap-anywhere text-sm font-semibold" }, row.path)),
+        el("p", { class: "wrap-anywhere font-mono text-xs text-ink-2" },
+          row.kind === "added" ? show(row.after)
+            : row.kind === "removed" ? show(row.before)
+              : `${show(row.before)} -> ${show(row.after)}`))));
+  }
+
+  before.addEventListener("input", run);
+  after.addEventListener("input", run);
+
+  const report = () => rows.map((row) => `${kindLabel[row.kind]}: ${row.path}`).join("\n");
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Old", before), panel("New", after), error),
+      stack(panel("Changes", el("div", { class: "grid gap-2" }, summary, list))),
+    ),
+    foot: actions(copyButton(report, "Copy report", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/json-path-tester.js

@@ -0,0 +1,215 @@
+// Runs a documented JSONPath subset against a document. No library, no
+// network: the parser and the evaluator live here.
+import { el, bench, stack, panel, textArea, textInput, notice, copyButton, actions, toolcard } from "../core.js";
+
+const EXAMPLE = '{\n  "items": [\n    { "name": "pen", "price": 2 },\n    { "name": "lamp", "price": 18 },\n    { "name": "desk", "price": 120 }\n  ],\n  "meta": { "currency": "USD" }\n}';
+
+function tokenizePath(expr) {
+  if (!expr.startsWith("$")) throw new Error("Start with $.");
+  const steps = [];
+  let i = 1;
+  while (i < expr.length) {
+    const ch = expr[i];
+    if (ch === ".") {
+      if (expr[i + 1] === ".") {
+        let end = i + 2;
+        while (end < expr.length && /[\w$-]/.test(expr[end])) end++;
+        const name = expr.slice(i + 2, end);
+        if (!name) throw new Error("Expected a name after ..");
+        steps.push({ kind: "descend", name });
+        i = end;
+      } else {
+        let end = i + 1;
+        if (expr[end] === "*") {
+          steps.push({ kind: "wildcard" });
+          i = end + 1;
+          continue;
+        }
+        while (end < expr.length && /[\w$-]/.test(expr[end])) end++;
+        const name = expr.slice(i + 1, end);
+        if (!name) throw new Error("Expected a name after .");
+        steps.push({ kind: "child", name });
+        i = end;
+      }
+      continue;
+    }
+    if (ch === "[") {
+      let end = i + 1;
+      let quote = null;
+      while (end < expr.length) {
+        const c = expr[end];
+        if (quote) { if (c === quote) quote = null; }
+        else if (c === "'" || c === '"') quote = c;
+        else if (c === "]") break;
+        end++;
+      }
+      if (end >= expr.length) throw new Error("Expected ].");
+      const body = expr.slice(i + 1, end).trim();
+      if (body === "*") steps.push({ kind: "wildcard" });
+      else if (/^['"]/.test(body)) steps.push({ kind: "child", name: body.slice(1, -1) });
+      else if (body.startsWith("?(") && body.endsWith(")")) steps.push({ kind: "filter", test: body.slice(2, -1).trim() });
+      else if (/^-?\d+$/.test(body)) steps.push({ kind: "index", index: Number(body) });
+      else if (/^-?\d*:-?\d*$/.test(body)) {
+        const [from, to] = body.split(":");
+        steps.push({ kind: "slice", from: from === "" ? null : Number(from), to: to === "" ? null : Number(to) });
+      } else throw new Error(`Unknown selector [${body}].`);
+      i = end + 1;
+      continue;
+    }
+    throw new Error(`Unexpected ${ch}.`);
+  }
+  return steps;
+}
+
+function readField(value, path) {
+  const parts = path.split(".").filter(Boolean);
+  let current = value;
+  for (const part of parts) {
+    if (current === null || typeof current !== "object") return undefined;
+    current = current[part];
+  }
+  return current;
+}
+
+function makeTest(source) {
+  const match = source.match(/^@((?:\.[\w$-]+)+)\s*(?:(>=|<=|==|!=|>|<)\s*(.+))?$/);
+  if (!match) throw new Error("Filter must look like @.price > 10.");
+  const [, path, operator, raw] = match;
+  let expected;
+  if (operator) {
+    const text = raw.trim();
+    if (/^-?\d+(?:\.\d+)?$/.test(text)) expected = Number(text);
+    else if (text === "true" || text === "false") expected = text === "true";
+    else if (text === "null") expected = null;
+    else expected = text.replace(/^['"]|['"]$/g, "");
+  }
+  return (value) => {
+    const actual = readField(value, path.slice(1));
+    if (!operator) return Boolean(actual);
+    if (actual === undefined) return false;
+    if (operator === "==") return actual === expected;
+    if (operator === "!=") return actual !== expected;
+    if (operator === ">") return actual > expected;
+    if (operator === "<") return actual < expected;
+    if (operator === ">=") return actual >= expected;
+    return actual <= expected;
+  };
+}
+
+function select(step, entries) {
+  const output = [];
+  for (const entry of entries) {
+    const value = entry.value;
+    const path = entry.path;
+    if (step.kind === "child") {
+      if (value !== null && typeof value === "object" && step.name in value) {
+        output.push({ path: `${path}.${step.name}`, value: value[step.name] });
+      }
+    } else if (step.kind === "index") {
+      if (Array.isArray(value)) {
+        const index = step.index < 0 ? value.length + step.index : step.index;
+        if (index >= 0 && index < value.length) output.push({ path: `${path}[${index}]`, value: value[index] });
+      }
+    } else if (step.kind === "slice") {
+      if (Array.isArray(value)) {
+        const from = step.from ?? 0;
+        const to = step.to ?? value.length;
+        const start = from < 0 ? Math.max(value.length + from, 0) : from;
+        value.slice(from, to).forEach((item, offset) =>
+          output.push({ path: `${path}[${start + offset}]`, value: item }));
+      }
+    } else if (step.kind === "wildcard") {
+      if (Array.isArray(value)) value.forEach((item, index) => output.push({ path: `${path}[${index}]`, value: item }));
+      else if (value !== null && typeof value === "object") {
+        Object.entries(value).forEach(([key, item]) => output.push({ path: `${path}.${key}`, value: item }));
+      }
+    } else if (step.kind === "filter") {
+      const test = makeTest(step.test);
+      if (Array.isArray(value)) value.forEach((item, index) => {
+        if (item !== null && typeof item === "object" && test(item)) output.push({ path: `${path}[${index}]`, value: item });
+      });
+    } else if (step.kind === "descend") {
+      const visit = (node, at) => {
+        if (node === null || typeof node !== "object") return;
+        for (const [key, item] of Object.entries(node)) {
+          const childPath = Array.isArray(node) ? `${at}[${key}]` : `${at}.${key}`;
+          if (step.name === "*" || key === step.name) output.push({ path: childPath, value: item });
+          visit(item, childPath);
+        }
+      };
+      visit(value, path);
+    }
+  }
+  return output;
+}
+
+const show = (value) => {
+  const text = JSON.stringify(value) ?? String(value);
+  return text.length > 90 ? `${text.slice(0, 87)}...` : text;
+};
+
+export function mount(slot) {
+  const source = textArea({ rows: 13, "aria-label": "JSON", value: EXAMPLE });
+  const expression = textInput({ value: "$.items[?(@.price > 10)].name", "aria-label": "JSONPath", class: "font-mono" });
+  const error = notice("error");
+  const list = el("div", { class: "grid gap-2" });
+  const count = el("p", { class: "text-sm text-ink-3" });
+  let results = [];
+
+  function run() {
+    error.write("");
+    results = [];
+    if (!source.value.trim() || !expression.value.trim()) {
+      list.replaceChildren();
+      count.textContent = "";
+      return;
+    }
+    let document;
+    try {
+      document = JSON.parse(source.value);
+    } catch (caught) {
+      error.write(caught.message);
+      list.replaceChildren();
+      count.textContent = "";
+      return;
+    }
+    try {
+      let entries = [{ path: "$", value: document }];
+      for (const step of tokenizePath(expression.value.trim())) entries = select(step, entries);
+      results = entries;
+    } catch (caught) {
+      error.write(caught.message);
+      list.replaceChildren();
+      count.textContent = "";
+      return;
+    }
+    count.textContent = `${results.length} ${results.length === 1 ? "match" : "matches"}`;
+    if (!results.length) {
+      list.replaceChildren(el("p", { class: "text-sm text-ink-2" }, "No match."));
+      return;
+    }
+    list.replaceChildren(...results.map((row) =>
+      el("div", { class: "grid gap-1 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+        el("code", { class: "wrap-anywhere text-sm font-semibold" }, row.path),
+        el("p", { class: "wrap-anywhere font-mono text-xs text-ink-2" }, show(row.value)))));
+  }
+
+  source.addEventListener("input", run);
+  expression.addEventListener("input", run);
+
+  const report = () => results.map((row) => `${row.path}: ${JSON.stringify(row.value)}`).join("\n");
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("JSON", source), panel("JSONPath", expression), error),
+      stack(panel("Matches", el("div", { class: "grid gap-2" }, count, list))),
+    ),
+    foot: actions(copyButton(report, "Copy matches", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/regex-cheatsheet.js

@@ -0,0 +1,100 @@
+// A searchable reference for JavaScript regular expressions. Each row shows
+// the token, what it matches, and an example with the match highlighted.
+import { el, bench, stack, panel, textInput, toolcard } from "../core.js";
+
+const ROWS = [
+  { token: ".", meaning: "Any character except a newline.", pattern: "a.c", example: "abc adc a\nc" },
+  { token: "\\d", meaning: "A digit, 0 to 9.", pattern: "\\d+", example: "Order 42 shipped" },
+  { token: "\\D", meaning: "Anything that is not a digit.", pattern: "\\D+", example: "42 and 7" },
+  { token: "\\w", meaning: "A letter, digit or underscore.", pattern: "\\w+", example: "hello_world!" },
+  { token: "\\W", meaning: "Anything that is not a word character.", pattern: "\\W+", example: "a-b c" },
+  { token: "\\s", meaning: "A space, tab or line break.", pattern: "\\s", example: "a b\tc" },
+  { token: "\\S", meaning: "Anything that is not whitespace.", pattern: "\\S+", example: "  keep  this" },
+  { token: "^", meaning: "The start of the string, or of a line with m.", pattern: "^abc", example: "abc abc" },
+  { token: "$", meaning: "The end of the string, or of a line with m.", pattern: "abc$", example: "abc abc" },
+  { token: "*", meaning: "Zero or more of the previous token.", pattern: "ab*", example: "a ab abb" },
+  { token: "+", meaning: "One or more of the previous token.", pattern: "ab+", example: "a ab abb" },
+  { token: "?", meaning: "Zero or one of the previous token.", pattern: "colou?r", example: "color colour" },
+  { token: "{n,m}", meaning: "Between n and m repeats.", pattern: "\\d{2,3}", example: "5 42 1234" },
+  { token: "[abc]", meaning: "One character from the set.", pattern: "[aeiou]", example: "mevebu" },
+  { token: "[^abc]", meaning: "One character outside the set.", pattern: "[^aeiou]", example: "mevebu" },
+  { token: "[a-z]", meaning: "One character from a range.", pattern: "[a-c]+", example: "abcxyz" },
+  { token: "(...)", meaning: "A capturing group.", pattern: "(\\d{4})-(\\d{2})", example: "2026-10-20" },
+  { token: "(?:...)", meaning: "A group that is not captured.", pattern: "(?:cat|dog)s", example: "cats dogs" },
+  { token: "(?<name>...)", meaning: "A named capturing group.", pattern: "(?<year>\\d{4})", example: "in 2026" },
+  { token: "\\b", meaning: "A word boundary.", pattern: "\\bcat\\b", example: "cat scatter cat" },
+  { token: "|", meaning: "Either the left or the right side.", pattern: "cat|dog", example: "cat dog cow" },
+  { token: "\\.", meaning: "A literal dot, escaped.", pattern: "\\d+\\.\\d+", example: "3.14 and 42" },
+  { token: "(?=...)", meaning: "Lookahead: what comes next.", pattern: "\\d+(?= USD)", example: "10 USD 20 EUR" },
+  { token: "(?<=...)", meaning: "Lookbehind: what came before.", pattern: "(?<=\\$)\\d+", example: "$5 and €7" },
+  { token: "*?", meaning: "Lazy: match as little as possible.", pattern: "<.+?>", example: "<a><b>" },
+  { token: "i", meaning: "Ignore case. A flag, not a token.", pattern: "[a-z]+", flags: "gi", example: "AbC abc" },
+  { token: "g", meaning: "Find every match, not just the first.", pattern: "\\d+", flags: "g", example: "1 22 333" },
+  { token: "m", meaning: "Make ^ and $ work per line.", pattern: "^\\w+", flags: "gm", example: "one\ntwo" },
+  { token: "s", meaning: "Let . match a newline too.", pattern: "a.b", flags: "s", example: "a\nb" },
+  { token: "u", meaning: "Unicode mode, for full code points.", pattern: "\\u{1F600}", flags: "u", example: "hi \u{1F600}" },
+];
+
+function highlight(example, pattern, flags = "") {
+  let regex;
+  try {
+    regex = new RegExp(pattern, flags.includes("g") ? flags : `${flags}g`);
+  } catch {
+    return [document.createTextNode(example)];
+  }
+  const nodes = [];
+  let last = 0;
+  for (const match of example.matchAll(regex)) {
+    if (match.index > last) nodes.push(document.createTextNode(example.slice(last, match.index)));
+    if (!match[0]) break;
+    nodes.push(el("mark", { class: "rounded-xs bg-amber-300/60 px-0.5 text-inherit dark:bg-amber-400/40" }, match[0]));
+    last = match.index + match[0].length;
+  }
+  if (last < example.length) nodes.push(document.createTextNode(example.slice(last)));
+  return nodes;
+}
+
+export function mount(slot) {
+  const search = textInput({ placeholder: "Filter tokens", "aria-label": "Filter" });
+  const list = el("div", { class: "grid gap-2" });
+
+  function render() {
+    const query = search.value.trim().toLowerCase();
+    const rows = ROWS.filter((row) =>
+      !query || row.token.toLowerCase().includes(query) || row.meaning.toLowerCase().includes(query));
+    if (!rows.length) {
+      list.replaceChildren(el("p", { class: "text-sm text-ink-2" }, "No token matches that."));
+      return;
+    }
+    list.replaceChildren(...rows.map((row) =>
+      el("div", { class: "grid gap-1.5 rounded-r1 border border-orbit bg-deck-2 px-3.5 py-3" },
+        el("div", { class: "flex flex-wrap items-baseline gap-2" },
+          el("code", { class: "rounded-xs border border-orbit bg-deck px-1.5 py-0.5 font-mono text-sm font-semibold" }, row.token),
+          el("span", { class: "text-sm text-ink-2" }, row.meaning)),
+        el("p", { class: "font-mono text-sm" },
+          ...highlight(row.example, row.pattern, row.flags)),
+        el("div", { class: "flex flex-wrap items-center gap-2 text-xs text-ink-3" },
+          el("code", { class: "font-mono" }, `/${row.pattern}/${row.flags ?? ""}`),
+          el("a", { href: "#/developer/regex-tester", class: "underline decoration-dotted underline-offset-2 hover:text-ink-2" }, "Try it")))));
+  }
+
+  search.addEventListener("input", render);
+
+  const link = el("p", { class: "text-sm text-ink-3" },
+    "Matches are JavaScript flavoured. Open ",
+    el("a", { href: "#/developer/regex-tester", class: "underline decoration-dotted underline-offset-2 hover:text-ink-2" }, "Regex Tester"),
+    " to run a full pattern.");
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Find a token", search), link),
+      stack(panel("Tokens", list)),
+    ),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mevebu",
-  "version": "2.4.0",
+  "version": "2.5.1",
   "description": "Small tools that run in your browser. No accounts, no uploads, no tracking.",
   "license": "MIT",
   "type": "module",
@@ -20,7 +20,8 @@
     "dev": "node bin/mevebu.js",
     "start": "node bin/mevebu.js",
     "ship": "node scripts/ship.js",
-    "social": "node scripts/vendor-social.mjs"
+    "social": "node scripts/vendor-social.mjs",
+    "docs": "node scripts/tools-docs.mjs"
   },
   "keywords": [
     "tools",