mevebu 2.3.0 → 2.5.0

package/README.md

@@ -2,7 +2,7 @@
 
 # mevebu
 
-**215 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
+**220 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-215-brightgreen)
+![Tools](https://img.shields.io/badge/tools-220-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 **215 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 **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.
 
 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,13 +64,13 @@ mevebu tries port `5555` first, then `5678`, then `5432`, and finally any free p
 
 ## What's inside
 
-mevebu has **215 tools in 20 categories**. Here is the full breakdown:
+mevebu has **225 tools in 20 categories**. Here is the full breakdown:
 
 | Category           | Tools |
 | ------------------ | ----: |
 | Data Generator     |    10 |
 | Passwords and keys |    20 |
-| Developer          |    21 |
+| Developer          |    31 |
 | Convert            |    15 |
 | Text and data      |    14 |
 | Daily use          |     8 |
@@ -88,7 +88,7 @@ mevebu has **215 tools in 20 categories**. Here is the full breakdown:
 | GitHub             |     8 |
 | Units              |     8 |
 | QR codes           |     2 |
-| **Total**          | **215** |
+| **Total**          | **225** |
 
 The counts come straight from the tool registry, so this table and the app never drift apart.
 
@@ -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 215 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 220 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.3.0";
+export const VERSION = "2.5.0";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/mevebu/libs/js/js-tokens.js

@@ -0,0 +1,195 @@
+// A small JavaScript scanner shared by the formatter and the minifier. It does
+// not build an AST: it separates code from strings, templates, regexes and
+// comments so whitespace can be changed without touching what a token means.
+
+const KEYWORDS_BEFORE_REGEX = new Set([
+  "return", "typeof", "instanceof", "in", "of", "new", "delete", "void", "do",
+  "else", "case", "yield", "await", "throw",
+]);
+
+const PUNCT = [
+  ">>>=", "===", "!==", "**=", "<<=", ">>=", ">>>", "...", "&&=", "||=", "??=",
+  "=>", "==", "!=", "<=", ">=", "&&", "||", "??", "?.", "++", "--", "+=", "-=",
+  "*=", "/=", "%=", "&=", "|=", "^=", "<<", ">>", "**",
+];
+
+const isWordStart = (ch) => /[A-Za-z_$\u0080-\uffff]/.test(ch);
+const isWord = (ch) => /[A-Za-z0-9_$\u0080-\uffff]/.test(ch);
+const isDigit = (ch) => /[0-9]/.test(ch);
+
+function regexAllowed(previous) {
+  if (!previous) return true;
+  if (previous.type === "word") return KEYWORDS_BEFORE_REGEX.has(previous.value);
+  if (previous.type === "number" || previous.type === "string" || previous.type === "template" || previous.type === "regex") return false;
+  if (previous.type === "punct") return ![")", "]", "}"].includes(previous.value);
+  return true;
+}
+
+function scanTemplate(source, start) {
+  let i = start + 1;
+  while (i < source.length) {
+    const ch = source[i];
+    if (ch === "\\") { i += 2; continue; }
+    if (ch === "`") return { end: i + 1 };
+    if (ch === "$" && source[i + 1] === "{") {
+      const inner = scanBraces(source, i + 2);
+      if (inner.error) return inner;
+      i = inner.end;
+      continue;
+    }
+    i++;
+  }
+  return { error: "Unclosed template literal." };
+}
+
+function scanBraces(source, start) {
+  let depth = 1;
+  let i = start;
+  while (i < source.length) {
+    const ch = source[i];
+    if (ch === "'" || ch === '"') {
+      const end = scanString(source, i);
+      if (end.error) return end;
+      i = end.end;
+      continue;
+    }
+    if (ch === "`") {
+      const end = scanTemplate(source, i);
+      if (end.error) return end;
+      i = end.end;
+      continue;
+    }
+    if (ch === "/" && source[i + 1] === "/") {
+      const end = source.indexOf("\n", i);
+      i = end === -1 ? source.length : end;
+      continue;
+    }
+    if (ch === "/" && source[i + 1] === "*") {
+      const end = source.indexOf("*/", i + 2);
+      if (end === -1) return { error: "Unclosed block comment." };
+      i = end + 2;
+      continue;
+    }
+    if (ch === "{") depth++;
+    if (ch === "}") {
+      depth--;
+      if (depth === 0) return { end: i + 1 };
+    }
+    i++;
+  }
+  return { error: "Unclosed ${ in a template literal." };
+}
+
+function scanString(source, start) {
+  const quote = source[start];
+  let i = start + 1;
+  while (i < source.length) {
+    const ch = source[i];
+    if (ch === "\\") { i += 2; continue; }
+    if (ch === quote) return { end: i + 1 };
+    if (ch === "\n") return { error: "Unclosed string." };
+    i++;
+  }
+  return { error: "Unclosed string." };
+}
+
+function scanRegex(source, start) {
+  let i = start + 1;
+  let inClass = false;
+  while (i < source.length) {
+    const ch = source[i];
+    if (ch === "\\") { i += 2; continue; }
+    if (ch === "[") inClass = true;
+    else if (ch === "]") inClass = false;
+    else if (ch === "/" && !inClass) {
+      i++;
+      while (i < source.length && /[a-z]/i.test(source[i])) i++;
+      return { end: i };
+    } else if (ch === "\n") return { error: "Unclosed regular expression." };
+    i++;
+  }
+  return { error: "Unclosed regular expression." };
+}
+
+/**
+ * Split JavaScript into significant tokens. Whitespace is dropped, but each
+ * token remembers whether a newline came before it.
+ * @param {string} source
+ * @returns {{tokens: object[], error: string|null}}
+ */
+export function tokenize(source) {
+  const tokens = [];
+  let i = 0;
+  let newline = false;
+  const push = (token) => {
+    token.newline = newline;
+    newline = false;
+    tokens.push(token);
+  };
+
+  while (i < source.length) {
+    const ch = source[i];
+    if (ch === "\n") { newline = true; i++; continue; }
+    if (/\s/.test(ch)) { i++; continue; }
+
+    if (ch === "/" && source[i + 1] === "/") {
+      const end = source.indexOf("\n", i);
+      const stop = end === -1 ? source.length : end;
+      push({ type: "lineComment", value: source.slice(i, stop) });
+      i = stop;
+      continue;
+    }
+    if (ch === "/" && source[i + 1] === "*") {
+      const end = source.indexOf("*/", i + 2);
+      if (end === -1) return { tokens, error: "Unclosed block comment." };
+      push({ type: "blockComment", value: source.slice(i, end + 2) });
+      i = end + 2;
+      continue;
+    }
+    if (ch === "'" || ch === '"') {
+      const result = scanString(source, i);
+      if (result.error) return { tokens, error: result.error };
+      push({ type: "string", value: source.slice(i, result.end) });
+      i = result.end;
+      continue;
+    }
+    if (ch === "`") {
+      const result = scanTemplate(source, i);
+      if (result.error) return { tokens, error: result.error };
+      push({ type: "template", value: source.slice(i, result.end) });
+      i = result.end;
+      continue;
+    }
+    if (ch === "/" && regexAllowed(tokens[tokens.length - 1])) {
+      const result = scanRegex(source, i);
+      if (result.error) return { tokens, error: result.error };
+      push({ type: "regex", value: source.slice(i, result.end) });
+      i = result.end;
+      continue;
+    }
+    if (isDigit(ch) || (ch === "." && isDigit(source[i + 1]))) {
+      const match = source.slice(i).match(/^(?:0[xX][0-9a-fA-F_]+|0[bB][01_]+|0[oO][0-7_]+|(?:\d[\d_]*)?\.?\d[\d_]*(?:[eE][+-]?\d[\d_]*)?n?)/);
+      const value = match ? match[0] : ch;
+      push({ type: "number", value });
+      i += value.length;
+      continue;
+    }
+    if (isWordStart(ch)) {
+      let end = i + 1;
+      while (end < source.length && isWord(source[end])) end++;
+      push({ type: "word", value: source.slice(i, end) });
+      i = end;
+      continue;
+    }
+    const multi = PUNCT.find((entry) => source.startsWith(entry, i));
+    const value = multi || ch;
+    push({ type: "punct", value });
+    i += value.length;
+  }
+
+  return { tokens, error: null };
+}
+
+export function bytes(text) {
+  return new TextEncoder().encode(text).length;
+}

package/mevebu/libs/js/registry.js

@@ -572,6 +572,186 @@ export const TOOLS = [
     load: () => import("./tools/ssh-fingerprint.js"),
   },
 
+  {
+    id: "javascript-formatter",
+    category: "developer",
+    name: "JavaScript Formatter",
+    icon: "file-code",
+    note: "Indent a JavaScript file so it reads like code again.",
+    about: "Re-indents tokens and keeps strings, templates, regexes and comments as they were.",
+    tutorial: {
+      intro: "Paste a script and get the same code with readable indentation.",
+      steps: [
+        "Paste the script. Pick two or four spaces.",
+        "Read the first bracket or string problem if the script cannot be laid out.",
+        "Copy the result. Only whitespace changed, not the code.",
+      ],
+    },
+    keywords: "javascript js format beautify indent pretty print code",
+    load: () => import("./tools/javascript-formatter.js"),
+  },
+  {
+    id: "javascript-minifier",
+    category: "developer",
+    name: "JavaScript Minifier",
+    icon: "minimize-2",
+    note: "Strip comments and extra whitespace from JavaScript.",
+    about: "Shows the bytes before and after. Variables are never renamed.",
+    tutorial: {
+      intro: "Make a script smaller without changing what it does.",
+      steps: [
+        "Paste the script.",
+        "Read the size before and after, and the percentage saved.",
+        "Copy the result. Keep license comments with /*! or @license.",
+      ],
+    },
+    keywords: "javascript js minify compress whitespace comments size",
+    load: () => import("./tools/javascript-minifier.js"),
+  },
+  {
+    id: "yaml-to-json",
+    category: "developer",
+    name: "YAML to JSON",
+    icon: "braces",
+    note: "Turn a YAML document into JSON.",
+    about: "Anchors are resolved, comments are dropped, and the key order stays.",
+    tutorial: {
+      intro: "Convert a config file for an API or a script that expects JSON.",
+      steps: [
+        "Paste the YAML.",
+        "Read the JSON on the right. An invalid document reports its line.",
+        "Copy it or download data.json.",
+      ],
+    },
+    keywords: "yaml yml to json convert config kubernetes ci",
+    load: () => import("./tools/yaml-to-json.js"),
+  },
+  {
+    id: "json-to-yaml",
+    category: "developer",
+    name: "JSON to YAML",
+    icon: "file-text",
+    note: "Write JSON as block or flow YAML.",
+    about: "Two-space block style by default, with a flow toggle for compact output.",
+    tutorial: {
+      intro: "Turn an API response into a config file.",
+      steps: [
+        "Paste the JSON.",
+        "Pick Block or Flow. Block reads better, flow is shorter.",
+        "Copy the YAML or download data.yaml.",
+      ],
+    },
+    keywords: "json to yaml yml convert config block flow",
+    load: () => import("./tools/json-to-yaml.js"),
+  },
+  {
+    id: "xml-minifier",
+    category: "developer",
+    name: "XML Minifier",
+    icon: "code",
+    note: "Remove indentation between XML tags.",
+    about: "CDATA, comments and attribute values are copied unchanged.",
+    tutorial: {
+      intro: "Compact an XML file without touching its content.",
+      steps: [
+        "Paste the XML.",
+        "Read the size saved. Text that is not only whitespace stays.",
+        "Copy the result.",
+      ],
+    },
+    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",