@uniqbit/mate-core 0.18.4 → 1.0.0-canary.0

package/src/cli/commands/report/markdown.ts

@@ -0,0 +1,110 @@
+import { highlightInline } from "./highlight";
+
+/**
+ * Safe Markdown subset for report text and captions: paragraphs, headings shifted
+ * below the section heading, one-level lists, code spans, strong, emphasis,
+ * `http(s)` links, and highlighted fenced code. Every literal is escaped before
+ * markup is added, so raw HTML and any other syntax degrade to visible text.
+ */
+
+export function escapeHTML(value: string): string {
+  return value.replace(/[&<>"']/g, (character) => {
+    switch (character) {
+      case "&":
+        return "&amp;";
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case '"':
+        return "&quot;";
+      default:
+        return "&#39;";
+    }
+  });
+}
+
+const FENCE = /^\s{0,3}```\s*([\w+#.-]*)\s*$/;
+const HEADING = /^\s{0,3}(#{1,6})\s+(.*)$/;
+const LIST_ITEM = /^\s{0,3}([-*]|\d+[.)])\s+(.*)$/;
+const INLINE_TOKEN = /`([^`\n]+)`|\[([^\]\n]+)\]\(([^()\s]+)\)/g;
+const SAFE_URL = /^https?:\/\/\S+$/i;
+
+/** Emphasis runs over already-escaped text, which carries no `*` or `_` of its own. */
+function emphasize(escaped: string): string {
+  return escaped
+    .replace(/\*\*(?=\S)([^*]*?\S)\*\*/g, "<strong>$1</strong>")
+    .replace(/\*(?=\S)([^*]*?\S)\*/g, "<em>$1</em>")
+    .replace(/(^|\W)_(?=\S)([^_]*?\S)_(?!\w)/g, "$1<em>$2</em>");
+}
+
+function renderInline(source: string): string {
+  let html = "";
+  let last = 0;
+  for (const match of source.matchAll(INLINE_TOKEN)) {
+    html += emphasize(escapeHTML(source.slice(last, match.index)));
+    const [whole, code, label, url] = match;
+    if (code !== undefined) {
+      html += `<code>${escapeHTML(code)}</code>`;
+    } else if (SAFE_URL.test(url)) {
+      html += `<a href="${escapeHTML(url)}" rel="noopener noreferrer">${emphasize(escapeHTML(label))}</a>`;
+    } else {
+      html += emphasize(escapeHTML(whole));
+    }
+    last = match.index + whole.length;
+  }
+  return html + emphasize(escapeHTML(source.slice(last)));
+}
+
+function renderFence(code: string[], language: string): string {
+  return `<pre class="report-code">${highlightInline(code.join("\n"), language || undefined)}</pre>`;
+}
+
+export function renderMarkdownSubset(source: string): string {
+  const lines = source.replace(/\r\n?/g, "\n").split("\n");
+  const blocks: string[] = [];
+  let paragraph: string[] = [];
+  let list: { tag: "ul" | "ol"; items: string[] } | undefined;
+
+  const flush = (): void => {
+    if (paragraph.length) blocks.push(`<p>${paragraph.map(renderInline).join("\n")}</p>`);
+    if (list) blocks.push(`<${list.tag}>${list.items.join("")}</${list.tag}>`);
+    paragraph = [];
+    list = undefined;
+  };
+
+  for (let index = 0; index < lines.length; index++) {
+    const line = lines[index];
+    const fence = FENCE.exec(line);
+    if (fence) {
+      flush();
+      const code: string[] = [];
+      while (++index < lines.length && !FENCE.test(lines[index])) code.push(lines[index]);
+      blocks.push(renderFence(code, fence[1]));
+      continue;
+    }
+    if (line.trim() === "") {
+      flush();
+      continue;
+    }
+    const heading = HEADING.exec(line);
+    if (heading) {
+      flush();
+      const level = Math.min(heading[1].length + 2, 6);
+      blocks.push(`<h${level}>${renderInline(heading[2].trim())}</h${level}>`);
+      continue;
+    }
+    const item = LIST_ITEM.exec(line);
+    if (item) {
+      const tag = /\d/.test(item[1]) ? "ol" : "ul";
+      if (paragraph.length || (list && list.tag !== tag)) flush();
+      list ??= { tag, items: [] };
+      list.items.push(`<li>${renderInline(item[2])}</li>`);
+      continue;
+    }
+    if (list) flush();
+    paragraph.push(line);
+  }
+  flush();
+  return blocks.join("");
+}

package/src/cli/commands/report/palette.ts

@@ -0,0 +1,118 @@
+import { BRAND_COLORS } from "../../../brand";
+
+const { ink, mateGreen, cream, lightGreen, night } = BRAND_COLORS;
+
+/**
+ * Report colours from the Mate brand kit as CSS custom properties. Light uses Ink on
+ * white (Mate green on Cream falls below 4.5:1), dark uses Cream on Night with Light
+ * green, and print forces dark text on white whatever the screen scheme.
+ */
+
+export interface ReportPalette {
+  ink: string;
+  bg: string;
+  muted: string;
+  rule: string;
+  accent: string;
+  surface: string;
+  ok: string;
+  warn: string;
+  error: string;
+  info: string;
+  neutral: string;
+  addBg: string;
+  delBg: string;
+  hunkBg: string;
+}
+
+/** Colours read as text or markers on `bg`; each must reach 4.5:1 against it. */
+export const CONTRAST_TOKENS = [
+  "ink",
+  "muted",
+  "accent",
+  "ok",
+  "warn",
+  "error",
+  "info",
+  "neutral",
+] as const satisfies readonly (keyof ReportPalette)[];
+
+export const LIGHT_PALETTE: ReportPalette = {
+  ink: ink.hex,
+  bg: "#FFFFFF",
+  muted: "#59625E",
+  rule: "#E2DED5",
+  accent: mateGreen.hex,
+  surface: "#F7F5F0",
+  ok: mateGreen.hex,
+  warn: "#8A5A00",
+  error: "#B3261E",
+  info: "#2F5F9E",
+  neutral: "#66706B",
+  addBg: "#E4F3EA",
+  delBg: "#FBE8E6",
+  hunkBg: "#F1EEE7",
+};
+
+export const DARK_PALETTE: ReportPalette = {
+  ink: cream.hex,
+  bg: night.hex,
+  muted: "#A5AEA9",
+  rule: "#2D3433",
+  accent: lightGreen.hex,
+  surface: "#1C2223",
+  ok: lightGreen.hex,
+  warn: "#E3B45C",
+  error: "#F28B82",
+  info: "#8DB8F0",
+  neutral: "#A5AEA9",
+  addBg: "#16382A",
+  delBg: "#46211E",
+  hunkBg: "#232A2B",
+};
+
+export const PRINT_PALETTE: ReportPalette = {
+  ...LIGHT_PALETTE,
+  ink: "#000000",
+  muted: "#444444",
+  rule: "#BBBBBB",
+  accent: "#1F5C41",
+  surface: "#FFFFFF",
+};
+
+const kebab = (name: string): string => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+
+function declarations(palette: ReportPalette): string {
+  return Object.entries(palette)
+    .map(([name, value]) => `--${kebab(name)}: ${value};`)
+    .join(" ");
+}
+
+/**
+ * Light by default; dark on screen when the browser prefers it, unless the page sets
+ * `data-scheme="light"`; dark on screen whenever it sets `data-scheme="dark"`. Both dark
+ * rules are screen-only, so print always falls back to the print tokens.
+ */
+export function paletteCss(): string {
+  return `:root { color-scheme: light dark; ${declarations(LIGHT_PALETTE)} }
+    @media screen and (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { ${declarations(DARK_PALETTE)} } }
+    @media screen { :root[data-scheme="dark"] { color-scheme: dark; ${declarations(DARK_PALETTE)} } }
+    :root[data-scheme="light"] { color-scheme: light; }
+    @media print { :root { color-scheme: light; ${declarations(PRINT_PALETTE)} } }`;
+}
+
+function channel(value: number): number {
+  const c = value / 255;
+  return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+
+function luminance(hex: string): number {
+  const [r, g, b] = [1, 3, 5].map((start) => Number.parseInt(hex.slice(start, start + 2), 16));
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+
+/** WCAG 2 contrast ratio between two `#RRGGBB` colours. */
+export function contrastRatio(foreground: string, background: string): number {
+  const [light, dark] = [luminance(foreground), luminance(background)].toSorted((a, b) => b - a);
+  return (light + 0.05) / (dark + 0.05);
+}