mevebu 0.3.0 → 0.4.0

package/mevebu/libs/js/tools/contrast-checker.js

@@ -0,0 +1,93 @@
+// Check the contrast between text and background against WCAG.
+import { el, bench, stack, panel, colorInput, button, copyButton, actions, toolcard } from "../core.js";
+
+function hexToRgb(hex) {
+  const clean = String(hex).trim().replace(/^#/, "");
+  let value;
+  if (/^[0-9a-f]{3}$/i.test(clean)) value = parseInt(clean.split("").map((c) => c + c).join(""), 16);
+  else if (/^[0-9a-f]{6}$/i.test(clean)) value = parseInt(clean, 16);
+  else return null;
+  return { r: (value >> 16) & 255, g: (value >> 8) & 255, b: value & 255 };
+}
+
+function luminance({ r, g, b }) {
+  const step = (value) => {
+    const channel = value / 255;
+    return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * step(r) + 0.7152 * step(g) + 0.0722 * step(b);
+}
+
+function ratio(a, b) {
+  const la = luminance(a);
+  const lb = luminance(b);
+  const hi = Math.max(la, lb);
+  const lo = Math.min(la, lb);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+export function mount(slot) {
+  const textPicker = colorInput({ value: "#111111", "aria-label": "Text color" });
+  const bgPicker = colorInput({ value: "#ffffff", "aria-label": "Background color" });
+
+  const kvRow = (key) => {
+    const value = el("span", { class: "mvb-kv__v" }, "-");
+    return { v: value, node: el("div", { class: "mvb-kv__row" }, el("span", { class: "mvb-kv__k" }, key), value) };
+  };
+  const ratioRow = kvRow("Contrast ratio");
+  const normalAA = kvRow("Normal text AA");
+  const normalAAA = kvRow("Normal text AAA");
+  const largeAA = kvRow("Large text AA");
+  const largeAAA = kvRow("Large text AAA");
+  const list = el("div", { class: "mvb-kv" }, ratioRow.node, normalAA.node, normalAAA.node, largeAA.node, largeAAA.node);
+
+  const sample = el(
+    "div",
+    { class: "mvb-preview__sample" },
+    el("p", { style: "margin:0 0 8px;font-size:20px;font-weight:700" }, "Large text sample"),
+    el("p", { style: "margin:0;font-size:15px" }, "Normal text sample for the contrast reading.")
+  );
+
+  let reading = "";
+
+  const pass = (ok) => (ok ? "Pass" : "Fail");
+
+  function update() {
+    const text = hexToRgb(textPicker.value);
+    const bg = hexToRgb(bgPicker.value);
+    const value = ratio(text, bg);
+    ratioRow.v.textContent = `${value.toFixed(2)}:1`;
+    normalAA.v.textContent = pass(value >= 4.5);
+    normalAAA.v.textContent = pass(value >= 7);
+    largeAA.v.textContent = pass(value >= 3);
+    largeAAA.v.textContent = pass(value >= 4.5);
+    sample.style.color = textPicker.value;
+    sample.style.background = bgPicker.value;
+    reading = `Contrast ${value.toFixed(2)}:1\nNormal text: AA ${pass(value >= 4.5)}, AAA ${pass(value >= 7)}\nLarge text: AA ${pass(value >= 3)}, AAA ${pass(value >= 4.5)}`;
+  }
+
+  textPicker.addEventListener("input", update);
+  bgPicker.addEventListener("input", update);
+
+  const swap = button("Swap", { icon: "arrow-left-right" });
+  swap.addEventListener("click", () => {
+    const text = textPicker.value;
+    textPicker.value = bgPicker.value;
+    bgPicker.value = text;
+    update();
+  });
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Text color", textPicker), panel("Background color", bgPicker)),
+      stack(sample, list)
+    ),
+    foot: actions(swap, copyButton(() => reading, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  update();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/countdown-timer.js

@@ -0,0 +1,174 @@
+// Counts down from a duration you set, then beeps and flags the tab title.
+import { toast, bench, stack, row, panel, numberInput, chipRow, button, output, notice, actions, toolcard } from "../core.js";
+
+const PRESETS = [
+  { value: 5, label: "5 min" },
+  { value: 10, label: "10 min" },
+  { value: 15, label: "15 min" },
+  { value: 25, label: "25 min" },
+];
+
+function format(ms) {
+  const total = Math.ceil(ms / 1000);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  const pad = (n) => String(n).padStart(2, "0");
+  return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
+}
+
+function beep() {
+  const Ctx = window.AudioContext || window.webkitAudioContext;
+  if (!Ctx) return;
+  try {
+    const context = new Ctx();
+    const osc = context.createOscillator();
+    const gain = context.createGain();
+    osc.type = "sine";
+    osc.frequency.value = 880;
+    gain.gain.setValueAtTime(0.15, context.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.0001, context.currentTime + 0.4);
+    osc.connect(gain).connect(context.destination);
+    osc.start();
+    osc.stop(context.currentTime + 0.4);
+    osc.onended = () => context.close();
+  } catch {
+    /* audio blocked, the title still changes */
+  }
+}
+
+export function mount(slot) {
+  const baseTitle = document.title;
+
+  const hoursIn = numberInput({ min: 0, max: 99, value: 0, "aria-label": "Hours" });
+  const minsIn = numberInput({ min: 0, max: 59, value: 25, "aria-label": "Minutes" });
+  const secsIn = numberInput({ min: 0, max: 59, value: 0, "aria-label": "Seconds" });
+
+  const presets = chipRow(PRESETS, {
+    value: 25,
+    label: "Presets",
+    onChange: (minutes) => {
+      hoursIn.value = 0;
+      minsIn.value = minutes;
+      secsIn.value = 0;
+      reset();
+    },
+  });
+
+  const display = output({ rows: 2 });
+  const status = notice("good");
+  const startButton = button("Start", { icon: "play", kind: "fill" });
+  const resetButton = button("Reset", { icon: "refresh-cw" });
+
+  let interval = 0;
+  let endAt = 0;
+  let remaining = 25 * 60 * 1000;
+  let mode = "idle";
+
+  const label = () => startButton.querySelector("span");
+
+  function readInputs() {
+    const h = Math.max(0, Number(hoursIn.value) || 0);
+    const m = Math.max(0, Number(minsIn.value) || 0);
+    const s = Math.max(0, Number(secsIn.value) || 0);
+    return ((h * 60 + m) * 60 + s) * 1000;
+  }
+
+  function paint() {
+    display.write(format(remaining));
+  }
+
+  function setInputsDisabled(off) {
+    hoursIn.disabled = off;
+    minsIn.disabled = off;
+    secsIn.disabled = off;
+  }
+
+  function stopTimer() {
+    clearInterval(interval);
+    interval = 0;
+  }
+
+  function tick() {
+    remaining = Math.max(0, endAt - performance.now());
+    paint();
+    if (remaining <= 0) finish();
+  }
+
+  function finish() {
+    stopTimer();
+    mode = "idle";
+    remaining = 0;
+    paint();
+    document.title = "Time is up";
+    status.write("Time is up.");
+    label().textContent = "Start";
+    setInputsDisabled(false);
+    beep();
+  }
+
+  function reset() {
+    stopTimer();
+    mode = "idle";
+    remaining = readInputs();
+    document.title = baseTitle;
+    status.write("");
+    label().textContent = "Start";
+    setInputsDisabled(false);
+    paint();
+  }
+
+  function start() {
+    if (mode === "running") {
+      remaining = Math.max(0, endAt - performance.now());
+      stopTimer();
+      mode = "paused";
+      label().textContent = "Resume";
+      return;
+    }
+    if (remaining <= 0) {
+      remaining = readInputs();
+      if (remaining <= 0) return toast("Set a duration first");
+    }
+    endAt = performance.now() + remaining;
+    mode = "running";
+    setInputsDisabled(true);
+    status.write("");
+    document.title = baseTitle;
+    label().textContent = "Pause";
+    interval = setInterval(tick, 200);
+  }
+
+  startButton.addEventListener("click", start);
+  resetButton.addEventListener("click", reset);
+  for (const input of [hoursIn, minsIn, secsIn]) {
+    input.addEventListener("input", () => {
+      if (mode === "idle") {
+        remaining = readInputs();
+        paint();
+      }
+    });
+  }
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Presets", presets),
+        row(panel("Hours", hoursIn), panel("Minutes", minsIn), panel("Seconds", secsIn))
+      ),
+      stack(display, status)
+    ),
+    foot: actions(resetButton, startButton),
+  });
+  slot.append(card.node);
+  paint();
+
+  return {
+    unmount() {
+      stopTimer();
+      document.title = baseTitle;
+    },
+  };
+}
+
+export default { mount };

package/mevebu/libs/js/tools/cron-builder.js

@@ -0,0 +1,91 @@
+// Builds a cron expression and reads it back in plain words.
+import { el, bench, stack, panel, textInput, notice, button, copyButton, actions, toolcard } from "../core.js";
+
+const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+const WEEKDAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+const pad = (value) => String(value).padStart(2, "0");
+
+function nameList(value, names, offset) {
+  return value.split(",").map((part) => {
+    if (/^\d+$/.test(part)) return names[(Number(part) - offset + names.length) % names.length] ?? part;
+    if (part.includes("-")) {
+      const [a, b] = part.split("-");
+      const from = names[(Number(a) - offset + names.length) % names.length] ?? a;
+      const to = names[(Number(b) - offset + names.length) % names.length] ?? b;
+      return `${from} through ${to}`;
+    }
+    return part;
+  }).join(", ");
+}
+
+function describe([minute, hour, day, month, weekday]) {
+  const parts = [];
+  const step = (value) => (value.startsWith("*/") ? value.slice(2) : null);
+  if (minute === "*" && hour === "*") parts.push("Every minute");
+  else if (step(minute) && hour === "*") parts.push(`Every ${step(minute)} minutes`);
+  else if (/^\d+$/.test(minute) && hour === "*") parts.push(`Every hour at minute ${Number(minute)}`);
+  else if (/^\d+$/.test(minute) && /^\d+$/.test(hour)) parts.push(`At ${pad(hour)}:${pad(minute)}`);
+  else parts.push(`Minute ${minute}, hour ${hour}`);
+  if (weekday !== "*") parts.push(`on ${nameList(weekday, WEEKDAYS, 0)}`);
+  else if (day !== "*") parts.push(`on day ${day} of the month`);
+  if (month !== "*") parts.push(`in ${nameList(month, MONTHS, 1)}`);
+  return `${parts.join(" ")}.`;
+}
+
+const FIELDS = [
+  ["minute", "Minute", "0-59", "*"],
+  ["hour", "Hour", "0-23", "*"],
+  ["day", "Day of month", "1-31", "*"],
+  ["month", "Month", "1-12", "*"],
+  ["weekday", "Day of week", "0-6", "*"],
+];
+
+export function mount(slot) {
+  const inputs = {};
+  const controls = FIELDS.map(([key, label, hint, value]) => {
+    const input = textInput({ value, "aria-label": label, spellcheck: "false" });
+    inputs[key] = input;
+    return panel(label, input, hint);
+  });
+
+  const expression = textInput({ readonly: true, class: "mvb-in mvb-in--mono", "aria-label": "Cron expression" });
+  const reading = el("p", { class: "mvb-note" });
+  const error = notice("error");
+
+  function run() {
+    error.write("");
+    const values = FIELDS.map(([key]) => inputs[key].value.trim() || "*");
+    const invalid = values.find((value) => !/^[\d*,/\-\s]+$/.test(value));
+    if (invalid) {
+      error.write("Fields accept numbers, *, lists with commas, ranges with a hyphen and steps with a slash.");
+      expression.value = "";
+      reading.textContent = "";
+      return;
+    }
+    expression.value = values.join(" ");
+    reading.textContent = describe(values);
+  }
+
+  for (const key of Object.keys(inputs)) inputs[key].addEventListener("input", run);
+
+  const reset = button("Reset to every minute", { icon: "refresh-cw" });
+  reset.addEventListener("click", () => {
+    for (const [key, , , value] of FIELDS) inputs[key].value = value;
+    run();
+  });
+
+  const card = toolcard({
+    body: bench(
+      stack(...controls, error),
+      stack(panel("Expression", expression), panel("Reading", reading))
+    ),
+    foot: actions(reset, copyButton(() => expression.value, "Copy expression", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/css-clamp.js

@@ -0,0 +1,66 @@
+// Build a fluid size with the CSS clamp function.
+import { el, bench, stack, rangeInput, output, copyButton, actions, toolcard } from "../core.js";
+
+function slider(label, { min, max, step, value, unit }) {
+  const input = rangeInput({ min, max, step, value, "aria-label": label });
+  const val = el("span", { class: "mvb-slider__val" }, `${value}${unit}`);
+  const node = el(
+    "div",
+    { class: "mvb-slider" },
+    el("span", { class: "mvb-slider__label" }, label),
+    input,
+    val
+  );
+  node.input = input;
+  node.value = () => parseFloat(input.value) || 0;
+  node.setVal = (text) => { val.textContent = text; };
+  return node;
+}
+
+export function mount(slot) {
+  const min = slider("Minimum", { min: 8, max: 96, step: 1, value: 16, unit: "px" });
+  const preferred = slider("Preferred", { min: 1, max: 10, step: 0.1, value: 2.5, unit: "vw" });
+  const max = slider("Maximum", { min: 8, max: 160, step: 1, value: 48, unit: "px" });
+
+  const sample = el(
+    "div",
+    { class: "mvb-preview__sample" },
+    el("p", { style: "margin:0" }, "The quick brown fox jumps over the lazy dog.")
+  );
+  const code = output();
+
+  function clampValue() {
+    let lo = min.value();
+    let hi = max.value();
+    if (lo > hi) [lo, hi] = [hi, lo];
+    return `clamp(${lo}px, ${preferred.value()}vw, ${hi}px)`;
+  }
+
+  function update() {
+    const value = clampValue();
+    sample.style.fontSize = value;
+    code.write(`font-size: ${value};`);
+  }
+
+  for (const control of [min, preferred, max]) {
+    const unit = control === preferred ? "vw" : "px";
+    control.input.addEventListener("input", () => {
+      control.setVal(`${control.value()}${unit}`);
+      update();
+    });
+  }
+
+  const card = toolcard({
+    body: bench(
+      stack(min, preferred, max),
+      stack(sample, code)
+    ),
+    foot: actions(copyButton(() => `font-size: ${clampValue()};`, "Copy CSS", "fill")),
+  });
+  slot.append(card.node);
+  update();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/css-formatter.js

@@ -0,0 +1,84 @@
+// Formats CSS: selectors on their own line, one property per line.
+import { bench, stack, panel, textArea, chipRow, copyButton, actions, toolcard } from "../core.js";
+
+const clean = (text) => text.trim().replace(/\s*\n\s*/g, " ");
+
+function format(css, size) {
+  const pad = " ".repeat(size);
+  const lines = [];
+  let depth = 0;
+  let buffer = "";
+  let i = 0;
+  const push = (line) => { if (line) lines.push(pad.repeat(depth) + line); };
+
+  while (i < css.length) {
+    const ch = css[i];
+    if (ch === "/" && css[i + 1] === "*") {
+      const end = css.indexOf("*/", i + 2);
+      const comment = css.slice(i, end === -1 ? css.length : end + 2);
+      const before = clean(buffer);
+      if (before) { push(before); buffer = ""; }
+      push(comment);
+      i = end === -1 ? css.length : end + 2;
+      continue;
+    }
+    if (ch === "{") {
+      push(`${clean(buffer)} {`);
+      buffer = "";
+      depth++;
+    } else if (ch === "}") {
+      const decl = clean(buffer);
+      if (decl) push(decl.endsWith(";") ? decl : `${decl};`);
+      buffer = "";
+      depth = Math.max(0, depth - 1);
+      push("}");
+      lines.push("");
+    } else if (ch === ";") {
+      const decl = clean(buffer);
+      if (decl) push(`${decl};`);
+      buffer = "";
+    } else {
+      buffer += ch;
+    }
+    i++;
+  }
+  const rest = clean(buffer);
+  if (rest) push(rest);
+  return lines.join("\n").replace(/\n{3,}/g, "\n\n").trim();
+}
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 12,
+    class: "mvb-in mvb-in--area mvb-in--mono",
+    "aria-label": "CSS",
+    value: ".card{color:red;padding:10px 12px}.card:hover{color:blue}",
+  });
+  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Formatted CSS" });
+  let size = "2";
+
+  const chips = chipRow(
+    [{ value: "2", label: "2 spaces" }, { value: "4", label: "4 spaces" }],
+    { value: "2", label: "Indent", onChange: (value) => { size = value; run(); } }
+  );
+
+  function run() {
+    result.value = source.value.trim() ? format(source.value, Number(size)) : "";
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Indent", chips), panel("CSS", source)),
+      stack(panel("Formatted", result))
+    ),
+    foot: actions(copyButton(() => result.value, "Copy CSS", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/css-grid.js

@@ -0,0 +1,75 @@
+// Lay out a CSS grid: columns, rows and gaps with a live preview.
+import { el, bench, stack, panel, numberInput, rangeInput, output, copyButton, actions, toolcard } from "../core.js";
+
+const CELL = "min-height:32px;background:var(--mvb-nebula);border:1px solid var(--mvb-comet);border-radius:6px";
+
+function slider(label, value) {
+  const input = rangeInput({ min: 0, max: 48, value, "aria-label": label });
+  const val = el("span", { class: "mvb-slider__val" }, `${value}px`);
+  const node = el(
+    "div",
+    { class: "mvb-slider" },
+    el("span", { class: "mvb-slider__label" }, label),
+    input,
+    val
+  );
+  node.input = input;
+  node.value = () => parseFloat(input.value) || 0;
+  node.setVal = (text) => { val.textContent = text; };
+  return node;
+}
+
+const clampInt = (value, min, max) => Math.max(min, Math.min(max, parseInt(value, 10) || min));
+
+export function mount(slot) {
+  const columns = numberInput({ value: 3, min: "1", max: "8", "aria-label": "Columns" });
+  const rows = numberInput({ value: 2, min: "1", max: "8", "aria-label": "Rows" });
+  const columnGap = slider("Column gap", 12);
+  const rowGap = slider("Row gap", 12);
+
+  const grid = el("div");
+  const code = output();
+
+  function declarations() {
+    const c = clampInt(columns.value, 1, 8);
+    const r = clampInt(rows.value, 1, 8);
+    const cg = columnGap.value();
+    const rg = rowGap.value();
+    const gap = cg === rg ? `gap: ${cg}px;` : `gap: ${rg}px ${cg}px;`;
+    return { c, r, cg, rg, gap };
+  }
+
+  function update() {
+    const { c, r, cg, rg, gap } = declarations();
+    grid.style.display = "grid";
+    grid.style.width = "100%";
+    grid.style.gridTemplateColumns = `repeat(${c}, 1fr)`;
+    grid.style.gridTemplateRows = `repeat(${r}, 1fr)`;
+    grid.style.gap = `${rg}px ${cg}px`;
+    grid.replaceChildren(...Array.from({ length: c * r }, () => el("div", { style: CELL })));
+    code.write(`display: grid;\ngrid-template-columns: repeat(${c}, 1fr);\ngrid-template-rows: repeat(${r}, 1fr);\n${gap}`);
+  }
+
+  columns.addEventListener("input", update);
+  rows.addEventListener("input", update);
+  for (const control of [columnGap, rowGap]) {
+    control.input.addEventListener("input", () => {
+      control.setVal(`${control.value()}px`);
+      update();
+    });
+  }
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Columns", columns), panel("Rows", rows), columnGap, rowGap),
+      stack(el("div", { class: "mvb-preview" }, grid), code)
+    ),
+    foot: actions(copyButton(() => code.textContent, "Copy CSS", "fill")),
+  });
+  slot.append(card.node);
+  update();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/css-minifier.js

@@ -0,0 +1,98 @@
+// Compacts CSS and reports the size saved. Comments can be kept.
+import { el, bench, stack, panel, textArea, switchControl, copyButton, actions, toolcard } from "../core.js";
+
+const bytes = (text) => new TextEncoder().encode(text).length;
+
+const tile = (key, value) =>
+  el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__v" }, value), el("span", { class: "mvb-stat__k" }, key));
+
+function minify(css, stripComments) {
+  let out = "";
+  let pending = false;
+  let i = 0;
+  const n = css.length;
+  while (i < n) {
+    const ch = css[i];
+    const next = css[i + 1];
+    if (stripComments && ch === "/" && next === "*") {
+      i += 2;
+      while (i < n && !(css[i] === "*" && css[i + 1] === "/")) i++;
+      i += 2;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      if (pending && out) out += " ";
+      pending = false;
+      out += ch;
+      i++;
+      while (i < n) {
+        out += css[i];
+        if (css[i] === ch) {
+          if (css[i + 1] === ch) { out += css[i + 1]; i += 2; continue; }
+          i++;
+          break;
+        }
+        i++;
+      }
+      continue;
+    }
+    if (/\s/.test(ch)) {
+      pending = true;
+      i++;
+      continue;
+    }
+    if (pending && out) {
+      const prev = out[out.length - 1];
+      if (!"{};,>+~(".includes(prev) && !"{};,>+~)".includes(ch)) out += " ";
+    }
+    pending = false;
+    out += ch;
+    i++;
+  }
+  return out.trim().replace(/;}/g, "}");
+}
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 12,
+    class: "mvb-in mvb-in--area mvb-in--mono",
+    "aria-label": "CSS",
+    value: "/* card */\n.card {\n  color: red;\n  padding: 10px 12px;\n}",
+  });
+  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Minified CSS" });
+  const stats = el("div", { class: "mvb-stats" });
+  let stripComments = true;
+
+  const comments = switchControl("Remove comments", { checked: true });
+  comments.input.addEventListener("change", () => { stripComments = comments.input.checked; run(); });
+
+  function run() {
+    stats.replaceChildren();
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    const compact = minify(source.value, stripComments);
+    const before = bytes(source.value);
+    const after = bytes(compact);
+    const saved = before ? Math.max(0, Math.round((1 - after / before) * 100)) : 0;
+    result.value = compact;
+    stats.append(tile("Before", `${before} B`), tile("After", `${after} B`), tile("Saved", `${saved}%`));
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Options", comments), panel("CSS", source)),
+      stack(panel("Minified", result), stats)
+    ),
+    foot: actions(copyButton(() => result.value, "Copy CSS", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };