mevebu 2.0.0 → 2.1.0

package/README.md

@@ -2,7 +2,7 @@
 
 # mevebu
 
-**200 free browser tools, one page each. No sign up. No uploads. Everything runs in your tab.**
+**205 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-200-brightgreen)
+![Tools](https://img.shields.io/badge/tools-205-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 **200 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 **205 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,11 +64,11 @@ mevebu tries port `5555` first, then `5678`, then `5432`, and finally any free p
 
 ## What's inside
 
-mevebu has **200 tools in 20 categories**. Here is the full breakdown:
+mevebu has **205 tools in 20 categories**. Here is the full breakdown:
 
 | Category           | Tools |
 | ------------------ | ----: |
-| Data Generator     |     5 |
+| Data Generator     |    10 |
 | Passwords and keys |    10 |
 | Developer          |    21 |
 | Convert            |    15 |
@@ -88,7 +88,7 @@ mevebu has **200 tools in 20 categories**. Here is the full breakdown:
 | GitHub             |     8 |
 | Units              |     8 |
 | QR codes           |     2 |
-| **Total**          | **200** |
+| **Total**          | **205** |
 
 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 200 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 205 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

@@ -37,9 +37,6 @@
     --text-lead--line-height: 1.06;
     --text-hero: clamp(34px, 6vw, 58px);
     --text-hero--line-height: 1.03;
-    --text-display: 44px;
-    --text-display--line-height: 1;
-    --animate-toss: toss 450ms ease;
   }
 }
 @layer base {
@@ -512,6 +509,9 @@
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
+  .h-40 {
+    height: calc(var(--spacing) * 40);
+  }
   .h-\[22px\] {
     height: 22px;
   }
@@ -539,6 +539,9 @@
   .h-px {
     height: 1px;
   }
+  .max-h-56 {
+    max-height: calc(var(--spacing) * 56);
+  }
   .max-h-80 {
     max-height: calc(var(--spacing) * 80);
   }
@@ -773,6 +776,9 @@
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   .grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }

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.0.0";
+export const VERSION = "2.1.0";
 export const PACKAGE_NAME = "mevebu";
 export const REPO_SLUG = "mevebu/mevebu";
 

package/mevebu/libs/js/random.js

@@ -0,0 +1,54 @@
+// A small seeded generator shared by the data tools. A seed is worth writing
+// down: the same one always produces the same file, so a fixture can be rebuilt
+// after it drifts.
+
+/** Mulberry32. Fast, deterministic, and good enough for fixtures. */
+export function seeded(seed) {
+  let state = hashSeed(String(seed)) >>> 0;
+  return () => {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let t = state;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+export function hashSeed(text) {
+  let hash = 2166136261;
+  for (let i = 0; i < text.length; i++) {
+    hash ^= text.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+
+export function pick(random, list) {
+  return list[Math.floor(random() * list.length)];
+}
+
+export function shuffle(list, random) {
+  const out = [...list];
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(random() * (i + 1));
+    [out[i], out[j]] = [out[j], out[i]];
+  }
+  return out;
+}
+
+/** A number from a normal distribution, by Box-Muller. */
+export function gaussian(random, mean = 0, deviation = 1) {
+  const u = Math.max(1e-9, random());
+  const v = random();
+  return mean + deviation * Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);
+}
+
+export function uuid(random) {
+  const hex = "0123456789abcdef";
+  let out = "";
+  for (let i = 0; i < 32; i++) {
+    if (i === 8 || i === 12 || i === 16 || i === 20) out += "-";
+    out += i === 12 ? "4" : hex[Math.floor(random() * 16)];
+  }
+  return out;
+}

package/mevebu/libs/js/registry.js

@@ -120,6 +120,96 @@ export const TOOLS = [
     keywords: "data dictionary csv schema profile columns nulls distinct metadata",
     load: () => import("./tools/data-dictionary.js"),
   },
+  {
+    id: "json-schema-sample",
+    category: "data-gen",
+    name: "JSON Schema Sample",
+    icon: "braces",
+    note: "Generate documents from a JSON Schema.",
+    about: "Required fields, types, enums, bounds and patterns, with a seed.",
+    tutorial: {
+      intro: "Make sample documents that pass a schema.",
+      steps: [
+        "Paste a JSON Schema.",
+        "Set how many documents and a seed.",
+        "Press Generate, then copy the JSON or take a ZIP with one file per document.",
+      ],
+    },
+    keywords: "json schema sample mock fixture generate validator draft 2020-12",
+    load: () => import("./tools/json-schema-sample.js"),
+  },
+  {
+    id: "mock-api-payload",
+    category: "data-gen",
+    name: "Mock API Payload",
+    icon: "braces",
+    note: "Write the JSON an endpoint returns.",
+    about: "A list with pagination, a single item, or an error, from one field list.",
+    tutorial: {
+      intro: "Build a fixture before the endpoint exists.",
+      steps: [
+        "Define the fields and their types.",
+        "Pick the shape: list, single item, or error.",
+        "Copy the JSON or download it.",
+      ],
+    },
+    keywords: "mock api payload fixture json response pagination error frontend",
+    load: () => import("./tools/mock-api-payload.js"),
+  },
+  {
+    id: "dataset-splitter",
+    category: "data-gen",
+    name: "Dataset Splitter",
+    icon: "table",
+    note: "Split a CSV into train, validation and test.",
+    about: "Seeded and stratified, and every row lands in exactly one set.",
+    tutorial: {
+      intro: "Prepare a dataset for training.",
+      steps: [
+        "Drop a CSV.",
+        "Set the train and validation percentages, a seed, and an optional stratify column.",
+        "Press Split and download for a ZIP with three files.",
+      ],
+    },
+    keywords: "dataset split train validation test machine learning csv stratified seed",
+    load: () => import("./tools/dataset-splitter.js"),
+  },
+  {
+    id: "time-series",
+    category: "data-gen",
+    name: "Synthetic Time Series",
+    icon: "chart-line",
+    note: "Generate a dated series with trend and season.",
+    about: "Preview the chart, add a spike, then download the CSV.",
+    tutorial: {
+      intro: "Make a series that looks like real data.",
+      steps: [
+        "Set the start date, the frequency and the length.",
+        "Shape the trend, the season and the noise, then add a spike if you need one.",
+        "Press Download CSV.",
+      ],
+    },
+    keywords: "time series synthetic data trend season noise chart demo seed",
+    load: () => import("./tools/time-series.js"),
+  },
+  {
+    id: "survey-responses",
+    category: "data-gen",
+    name: "Survey Responses",
+    icon: "clipboard-list",
+    note: "Generate fake survey answers.",
+    about: "Weights per option, so answers lean the way real answers lean.",
+    tutorial: {
+      intro: "Test a results dashboard with plausible responses.",
+      steps: [
+        "Add questions and their options.",
+        "Set a weight per option and the number of respondents.",
+        "Press Download CSV. One row is one respondent.",
+      ],
+    },
+    keywords: "survey responses fake data dashboard test weights csv",
+    load: () => import("./tools/survey-responses.js"),
+  },
 
   {
     id: "password-generator",

package/mevebu/libs/js/tools/dataset-splitter.js

@@ -0,0 +1,181 @@
+// Split a CSV into train, validation and test sets. Seeded, so the same seed
+// and the same file always give the same split, and a row never lands in two
+// sets.
+import {
+  el, toast, download, bench, stack, panel, numberInput, textInput, selectInput,
+  button, actions, toolcard, blank, notice,
+} from "../core.js";
+import { dropzone, baseName, formatBytes } from "../files.js";
+import { parseDelimited, detectDelimiter, headerKeys, toCsv } from "../csv.js";
+import { seeded, shuffle } from "../random.js";
+import { zip } from "../zip.js";
+
+export function mount(slot) {
+  let file = null;
+  let header = [];
+  let rows = [];
+  let split = null;
+
+  const train = numberInput({ min: "0", max: "100", step: "5", value: "70", "aria-label": "Train percent" });
+  const validation = numberInput({ min: "0", max: "100", step: "5", value: "15", "aria-label": "Validation percent" });
+  const seed = textInput({ value: "mevebu", "aria-label": "Seed", class: "font-mono" });
+  const stratify = selectInput([{ value: "", label: "Do not stratify" }], { value: "", "aria-label": "Stratify by" });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const tiles = el("div", { class: "grid grid-cols-3 gap-2" });
+  const empty = blank("table", "Drop a CSV to split it.");
+
+  const drop = dropzone({ label: "Drop a CSV here", accept: ".csv,text/csv,text/plain", iconName: "table" });
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+  const splitButton = button("Split and download", { icon: "download", kind: "fill" });
+
+  function tile(label) {
+    const value = el("span", { class: "text-xl font-bold tracking-[-0.02em] tabular-nums" }, "0");
+    const rows = el("span", { class: "text-2xs text-ink-3" }, "");
+    const node = el("div", { class: "grid gap-0.5 rounded-r1 border border-orbit bg-deck-2 px-3 py-2.5" },
+      el("span", { class: "text-2xs font-semibold tracking-[0.06em] text-ink-3 uppercase" }, label),
+      value, rows);
+    node.set = (count, percent) => {
+      value.textContent = String(count);
+      rows.textContent = `${percent}% of rows`;
+    };
+    return node;
+  }
+
+  const trainTile = tile("Train");
+  const validationTile = tile("Validation");
+  const testTile = tile("Test");
+  tiles.append(trainTile, validationTile, testTile);
+
+  function weights() {
+    const a = Math.max(0, Number(train.value) || 0);
+    const b = Math.max(0, Number(validation.value) || 0);
+    const c = Math.max(0, 100 - a - b);
+    return { train: a, validation: b, test: c };
+  }
+
+  function compute() {
+    const w = weights();
+    const random = seeded(seed.value || "mevebu");
+    const key = stratify.value;
+    const keyIndex = key ? header.indexOf(key) : -1;
+
+    const buckets = new Map();
+    for (const row of rows) {
+      const group = keyIndex >= 0 ? row[keyIndex] ?? "" : "__all__";
+      if (!buckets.has(group)) buckets.set(group, []);
+      buckets.get(group).push(row);
+    }
+
+    const out = { train: [], validation: [], test: [] };
+    for (const group of buckets.values()) {
+      const list = shuffle(group, random);
+      const n = list.length;
+      const trainEnd = Math.round((w.train / 100) * n);
+      const validationEnd = trainEnd + Math.round((w.validation / 100) * n);
+      out.train.push(...list.slice(0, trainEnd));
+      out.validation.push(...list.slice(trainEnd, validationEnd));
+      out.test.push(...list.slice(validationEnd));
+    }
+
+    // Shuffle the final sets so a stratified split is not grouped by class.
+    for (const name of Object.keys(out)) out[name] = shuffle(out[name], random);
+    return out;
+  }
+
+  function render() {
+    empty.hidden = rows.length > 0;
+    tiles.hidden = rows.length === 0;
+    splitButton.disabled = rows.length === 0;
+    clearButton.disabled = rows.length === 0;
+    if (!rows.length) {
+      summary.textContent = "";
+      return;
+    }
+    const w = weights();
+    split = compute();
+    const total = rows.length;
+    trainTile.set(split.train.length, Math.round((split.train.length / total) * 100));
+    validationTile.set(split.validation.length, Math.round((split.validation.length / total) * 100));
+    testTile.set(split.test.length, Math.round((split.test.length / total) * 100));
+    summary.textContent = `${total} rows · ${header.length} columns · seed ${seed.value || "mevebu"}${w.test < 0 ? " · the percentages add to more than 100, so test is empty" : ""}`;
+    if (w.test < 0) error.write("Train and validation add to more than 100 percent. Test gets nothing.");
+    else error.write("");
+  }
+
+  async function open(files) {
+    const picked = Array.from(files).find((entry) => /\.(csv|tsv|txt)$/i.test(entry.name) || entry.type.startsWith("text/"));
+    if (!picked) {
+      error.write("That file is not a CSV.");
+      return;
+    }
+    try {
+      const text = await picked.text();
+      const parsed = parseDelimited(text, detectDelimiter(text));
+      if (parsed.length < 2) throw new Error("A CSV needs a header row and at least one data row.");
+      file = picked;
+      header = headerKeys(parsed[0]);
+      rows = parsed.slice(1).filter((row) => row.some((cell) => cell !== ""));
+      stratify.replaceChildren(
+        el("option", { value: "" }, "Do not stratify"),
+        ...header.map((name) => el("option", { value: name }, name))
+      );
+      stratify.value = "";
+      error.write("");
+      render();
+    } catch (caught) {
+      error.write(caught?.message || "This file could not be read.");
+    }
+  }
+
+  drop.onFiles(open);
+  train.addEventListener("input", render);
+  validation.addEventListener("input", render);
+  seed.addEventListener("input", render);
+  stratify.addEventListener("change", render);
+
+  splitButton.addEventListener("click", () => {
+    if (!split) return;
+    const base = baseName(file?.name || "data");
+    const files = ["train", "validation", "test"].map((name) => ({
+      name: `${base}-${name}.csv`,
+      bytes: new TextEncoder().encode(toCsv([header, ...split[name]])),
+    }));
+    download(`${base}-split.zip`, zip(files), "application/zip");
+    toast("Three files ready");
+  });
+
+  clearButton.addEventListener("click", () => {
+    file = null;
+    header = [];
+    rows = [];
+    split = null;
+    error.write("");
+    render();
+  });
+
+  render();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Train %", train), panel("Validation %", validation)),
+        panel("Seed", seed, "The same seed and file give the same split."),
+        panel("Stratify by", stratify, "Keeps each class proportional across the three sets."),
+        error
+      ),
+      stack(summary, empty, tiles,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "Every row goes to exactly one set. The test share is whatever is left after train and validation."))
+    ),
+    foot: actions(clearButton, splitButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };