ucode 0.1.0 → 0.1.1

data/lib/ucode/audit/browser/templates/face.js

@@ -0,0 +1,298 @@
+// ucode audit face browser — vanilla JS, no dependencies.
+// Reads inlined overview JSON, renders header + plane band + block table.
+// Lazy-fetches per-block chunk on row click.
+
+(function () {
+  "use strict";
+
+  var overview = JSON.parse(
+    document.getElementById("audit-overview").textContent
+  );
+  var verbose = document.body.dataset.verbose === "true";
+  var withGlyphs = document.body.dataset.withGlyphs === "true";
+  var universalSet = {
+    available: document.body.dataset.universalSetAvailable === "true",
+    glyphsDir: document.body.dataset.universalSetGlyphsDir || "",
+    manifestPath: document.body.dataset.universalSetManifestPath || ""
+  };
+  var chunkCache = new Map();
+  var glyphCache = new Map();
+
+  // Detect file:// — fetches blocked in some browsers
+  if (location.protocol === "file:") {
+    document.getElementById("file-url-hint").classList.remove("hidden");
+  }
+
+  renderOverview();
+  renderBlocks();
+  renderDiscrepancies();
+
+  function renderOverview() {
+    var font = overview.font || {};
+    var baseline = overview.baseline || {};
+    var totals = overview.totals || {};
+
+    var html = '<div class="card">';
+    html += '<dl class="identity-grid">';
+    html += dt("PostScript name", font.postscript_name);
+    html += dt("Family", font.family_name);
+    html += dt("Subfamily", font.subfamily_name);
+    html += dt("Version", font.version);
+    html += dt("Source file", font.source_file);
+    html += dt("SHA-256", font.source_sha256);
+    html += dt("Baseline Unicode", baseline.unicode_version);
+    html += dt("Generated", overview.generated_at);
+    html += '</dl>';
+    html += '<div class="totals">';
+    html += cell("Codepoints covered", totals.covered_codepoints_total);
+    html += cell("Blocks touched", totals.blocks_touched);
+    html += cell("Complete", totals.blocks_complete);
+    html += cell("Partial", totals.blocks_partial);
+    html += cell("Scripts touched", totals.scripts_touched);
+    html += '</div>';
+    html += '</div>';
+
+    document.getElementById("overview").innerHTML = html;
+  }
+
+  function renderBlocks() {
+    var blocks = overview.block_summaries || [];
+    if (!blocks.length) {
+      document.getElementById("blocks").innerHTML = "";
+      return;
+    }
+    var html = '<h2>Blocks</h2>';
+    html += '<table class="block-table"><thead><tr>';
+    html += '<th>Block</th><th class="num">Range</th>';
+    html += '<th class="num">Covered</th><th class="num">Total</th>';
+    html += '<th class="num">%</th><th>Status</th>';
+    html += '</tr></thead><tbody>';
+    blocks.forEach(function (block, i) {
+      var name = escapeAttr(block.name);
+      html += '<tr class="block-row" data-block="' + name + '" data-index="' + i + '">';
+      html += '<td>' + escapeHtml(block.name) + '</td>';
+      html += '<td class="num">' + escapeHtml(block.range || '') + '</td>';
+      html += '<td class="num">' + escapeHtml(block.covered_count) + '</td>';
+      html += '<td class="num">' + escapeHtml(block.total_assigned) + '</td>';
+      html += '<td class="num">' + escapeHtml((block.coverage_percent || 0).toFixed(1)) + '%</td>';
+      html += '<td><span class="status status-' + escapeAttr(block.status) + '">' +
+              escapeHtml(block.status) + '</span></td>';
+      html += '</tr>';
+      html += '<tr class="block-detail hidden" data-detail-for="' + name + '"><td colspan="6"></td></tr>';
+    });
+    html += '</tbody></table>';
+    document.getElementById("blocks").innerHTML = html;
+
+    Array.prototype.forEach.call(
+      document.querySelectorAll(".block-row"),
+      function (row) {
+        row.addEventListener("click", onBlockRowClick);
+      }
+    );
+  }
+
+  function renderDiscrepancies() {
+    var discrepancies = overview.discrepancies || [];
+    if (!discrepancies.length) return;
+
+    var html = '<h2>Discrepancies</h2>';
+    html += '<ul class="discrepancies-list">';
+    discrepancies.forEach(function (d) {
+      html += '<li><span class="kind">' + escapeHtml(d.kind) + '</span> — ' +
+              escapeHtml(d.detail || '') + '</li>';
+    });
+    html += '</ul>';
+    var section = document.getElementById("discrepancies");
+    section.innerHTML = html;
+    section.classList.remove("hidden");
+  }
+
+  function onBlockRowClick(event) {
+    var row = event.currentTarget;
+    var blockName = row.dataset.block;
+    var detailRow = document.querySelector(
+      '.block-detail[data-detail-for="' + blockName + '"]'
+    );
+    var cell = detailRow.querySelector("td");
+
+    if (!detailRow.classList.contains("hidden")) {
+      detailRow.classList.add("hidden");
+      return;
+    }
+    detailRow.classList.remove("hidden");
+
+    var block = overview.block_summaries[parseInt(row.dataset.index, 10)];
+    cell.innerHTML = renderMissingChips(block);
+    if (verbose || withGlyphs) {
+      fetchBlockChunk(blockName).then(function (chunk) {
+        cell.innerHTML = renderExpandedBlock(block, chunk);
+        wireChipClicks(cell);
+      }).catch(function () {
+        // 404 or fetch blocked — keep the basic missing-chips view.
+      });
+    }
+  }
+
+  function renderMissingChips(block) {
+    var missing = block.missing_codepoints || [];
+    var html = '<p class="hint">Missing (' + escapeHtml(missing.length) + "):</p>";
+    if (!missing.length) return html;
+    html += '<div class="cp-chips">';
+    missing.slice(0, 200).forEach(function (cp) {
+      var cpInt = parseInt(cp, 10);
+      var cpHex = isNaN(cpInt) ? "" : cpInt.toString(16).toUpperCase().padStart(4, "0");
+      var glyphAttr = universalSet.available
+        ? ' data-show-glyph="1"'
+        : "";
+      html += '<span class="cp-chip" data-cp="' + escapeAttr(cpInt) + '"' + glyphAttr + ">U+" +
+              escapeHtml(cpHex) + "</span>";
+    });
+    if (missing.length > 200) {
+      html += '<span class="cp-chip">… +' + escapeHtml(missing.length - 200) + " more</span>";
+    }
+    html += "</div>";
+    return html;
+  }
+
+  function renderExpandedBlock(block, chunk) {
+    var html = renderMissingChips(block);
+    if (verbose && chunk && chunk.codepoints) {
+      html += '<p class="hint">Verbose detail available — click a chip.</p>';
+    }
+    return html;
+  }
+
+  function wireChipClicks(container) {
+    Array.prototype.forEach.call(
+      container.querySelectorAll(".cp-chip[data-cp]"),
+      function (chip) {
+        chip.addEventListener("click", onChipClick);
+      }
+    );
+  }
+
+  function onChipClick(event) {
+    var cp = parseInt(event.currentTarget.dataset.cp, 10);
+    var blockName = event.currentTarget.closest("[data-detail-for]").dataset.detailFor;
+    showDetail(cp, blockName);
+  }
+
+  function showDetail(cp, blockName) {
+    var panel = document.getElementById("detail");
+    panel.classList.remove("hidden");
+
+    fetchCodepointChunk(blockName).then(function (chunk) {
+      var detail = (chunk.codepoints || []).find(function (row) {
+        return row.codepoint === cp;
+      });
+      if (!detail) {
+        panel.innerHTML = '<div class="detail-panel">No detail for U+' +
+                          escapeHtml(cp.toString(16).toUpperCase()) + "</div>";
+        return;
+      }
+      var html = '<div class="detail-panel"><dl class="identity-grid">';
+      html += dt("Codepoint", "U+" + cp.toString(16).toUpperCase().padStart(4, "0"));
+      html += dt("Name", detail.name || "(unknown)");
+      html += dt("General category", detail.general_category || "");
+      html += dt("Script", detail.script || "");
+      html += dt("Block", detail.block_name || blockName);
+      html += dt("Age", detail.age || "");
+      html += "</dl>";
+      if (withGlyphs && detail.glyph_svg_path) {
+        html += '<div class="glyph-preview" id="glyph-preview"></div>';
+      }
+      if (universalSet.available) {
+        html += '<div class="glyph-preview universal-set-preview" id="universal-set-glyph">';
+        html += '<p class="hint">Universal-set glyph (this font is missing this codepoint):</p>';
+        html += "</div>";
+      }
+      html += "</div>";
+      panel.innerHTML = html;
+      if (withGlyphs && detail.glyph_svg_path) {
+        fetchGlyph(detail.glyph_svg_path);
+      }
+      if (universalSet.available) {
+        fetchUniversalSetGlyph(cp);
+      }
+    }).catch(function () {
+      panel.innerHTML = '<div class="detail-panel">Detail fetch failed.</div>';
+    });
+  }
+
+  function fetchGlyph(path) {
+    fetchLocal(path).then(function (svg) {
+      var preview = document.getElementById("glyph-preview");
+      if (preview) preview.innerHTML = svg;
+    }).catch(function () {});
+  }
+
+  function fetchUniversalSetGlyph(cp) {
+    var hex = cp.toString(16).toUpperCase().padStart(4, "0");
+    var path = universalSet.glyphsDir + "U+" + hex + ".svg";
+    if (glyphCache.has(path)) {
+      renderUniversalSetGlyph(path);
+      return;
+    }
+    fetch(path)
+      .then(function (res) {
+        if (!res.ok) throw new Error("HTTP " + res.status);
+        return res.text();
+      })
+      .then(function (svg) {
+        glyphCache.set(path, svg);
+        renderUniversalSetGlyph(path);
+      })
+      .catch(function () {
+        var slot = document.getElementById("universal-set-glyph");
+        if (slot) {
+          slot.innerHTML = '<p class="hint">No universal-set glyph at U+' + escapeHtml(hex) + ".</p>";
+        }
+      });
+  }
+
+  function renderUniversalSetGlyph(path) {
+    var slot = document.getElementById("universal-set-glyph");
+    if (slot) slot.innerHTML = glyphCache.get(path);
+  }
+
+  function fetchBlockChunk(blockName) {
+    return fetchLocal("blocks/" + blockName + ".json");
+  }
+
+  function fetchCodepointChunk(blockName) {
+    return fetchLocal("codepoints/" + blockName + ".json");
+  }
+
+  function fetchLocal(path) {
+    if (chunkCache.has(path)) {
+      return Promise.resolve(chunkCache.get(path));
+    }
+    return fetch(path).then(function (res) {
+      if (!res.ok) throw new Error("HTTP " + res.status);
+      return res.json();
+    }).then(function (data) {
+      chunkCache.set(path, data);
+      return data;
+    });
+  }
+
+  // --- HTML helpers ----------------------------------------------------
+
+  function dt(label, value) {
+    return '<dt>' + escapeHtml(label) + '</dt><dd>' +
+           escapeHtml(value == null ? '' : String(value)) + '</dd>';
+  }
+  function cell(label, value) {
+    return '<div class="total-cell"><div class="label">' + escapeHtml(label) +
+           '</div><div class="value">' + escapeHtml(value == null ? '' : String(value)) +
+           '</div></div>';
+  }
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, function (c) {
+      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
+    });
+  }
+  function escapeAttr(s) {
+    return escapeHtml(s).replace(/"/g, "&quot;");
+  }
+})();

data/lib/ucode/audit/browser/templates/library.css

@@ -0,0 +1,119 @@
+:root {
+  --bg: #fafafa;
+  --fg: #1a1a1a;
+  --muted: #5a5a5a;
+  --card-bg: #ffffff;
+  --border: #d8d8d8;
+  --accent: #2962ff;
+  --coverage-complete: #1b5e20;
+  --coverage-strong: #66bb6a;
+  --coverage-weak: #fdd835;
+  --coverage-none: #c62828;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #1a1a1a;
+    --fg: #e8e8e8;
+    --muted: #b0b0b0;
+    --card-bg: #2a2a2a;
+    --border: #3a3a3a;
+    --accent: #82b1ff;
+  }
+}
+
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--fg);
+  line-height: 1.5;
+}
+
+.page-header {
+  padding: 1.5rem 2rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--card-bg);
+}
+.page-header h1 { margin: 0 0 0.25rem; font-size: 1.5rem; }
+.tagline { margin: 0; color: var(--muted); font-size: 0.875rem; }
+
+main { padding: 1.5rem 2rem; max-width: 1200px; margin: 0 auto; }
+
+.controls {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+.controls input[type="search"],
+.controls select {
+  padding: 0.4rem 0.6rem;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--card-bg);
+  color: var(--fg);
+  font: inherit;
+}
+.controls input[type="search"] { flex: 1; min-width: 240px; }
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+}
+
+.font-card {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 1rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s ease;
+}
+.font-card:hover { border-color: var(--accent); }
+
+.font-name { font-size: 1.1rem; font-weight: 600; margin: 0; }
+.font-meta { font-size: 0.75rem; color: var(--muted); margin: 0; }
+
+.coverage-bar {
+  height: 8px;
+  border-radius: 4px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+.coverage-bar > div {
+  height: 100%;
+  background: var(--coverage-strong);
+}
+
+.quick-stats {
+  font-size: 0.8rem;
+  color: var(--muted);
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.badges { display: flex; flex-wrap: wrap; gap: 4px; }
+.badge {
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--muted);
+}
+.badge-badge-discrepancy { background: #c62828; color: #fff; border-color: #c62828; }
+
+.empty {
+  text-align: center;
+  color: var(--muted);
+  padding: 4rem 1rem;
+}

data/lib/ucode/audit/browser/templates/library.html.erb

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%= page_title %></title>
+  <style>
+<%= _css %>
+  </style>
+</head>
+<body>
+  <header class="page-header">
+    <h1>ucode audit library</h1>
+    <p class="tagline" id="library-tagline"></p>
+  </header>
+
+  <main>
+    <section id="controls" class="controls">
+      <input type="search" id="filter-search" placeholder="Filter by family or PostScript name…"
+             aria-label="Search fonts">
+      <select id="sort-select" aria-label="Sort fonts">
+        <option value="name">Sort: name</option>
+        <option value="codepoints">Sort: codepoint count</option>
+        <option value="glyphs">Sort: glyph count</option>
+        <option value="weight">Sort: weight class</option>
+      </select>
+      <select id="status-select" aria-label="Filter by status">
+        <option value="">All fonts</option>
+        <option value="complete">Complete coverage</option>
+        <option value="partial">Partial only</option>
+      </select>
+    </section>
+
+    <section id="cards" aria-live="polite" aria-busy="true"></section>
+  </main>
+
+  <script type="application/json" id="library-overview"><%= library_json %></script>
+  <script>
+<%= _js %>
+  </script>
+</body>
+</html>

data/lib/ucode/audit/browser/templates/library.js

@@ -0,0 +1,99 @@
+// ucode audit library browser — vanilla JS.
+// Renders a card grid with search/sort/filter.
+
+(function () {
+  "use strict";
+
+  var data = JSON.parse(
+    document.getElementById("library-overview").textContent
+  );
+
+  var state = {
+    search: "",
+    sort: "name",
+    status: "",
+  };
+
+  renderTagline();
+  renderCards();
+
+  document.getElementById("filter-search").addEventListener("input", function (e) {
+    state.search = e.target.value.toLowerCase();
+    renderCards();
+  });
+  document.getElementById("sort-select").addEventListener("change", function (e) {
+    state.sort = e.target.value;
+    renderCards();
+  });
+  document.getElementById("status-select").addEventListener("change", function (e) {
+    state.status = e.target.value;
+    renderCards();
+  });
+
+  function renderTagline() {
+    var metrics = data.aggregate_metrics || {};
+    var tagline = document.getElementById("library-tagline");
+    tagline.textContent =
+      (data.total_faces || 0) + " faces across " +
+      (data.total_files || 0) + " source files · " +
+      (metrics.total_codepoints || 0) + " codepoints (with duplicates)";
+  }
+
+  function renderCards() {
+    var faces = (data.faces || []).filter(matchesFilter).sort(bySort);
+    var container = document.getElementById("cards");
+    container.setAttribute("aria-busy", "false");
+
+    if (!faces.length) {
+      container.innerHTML = '<p class="empty">No fonts match the current filter.</p>';
+      return;
+    }
+    container.innerHTML = '<div class="cards">' + faces.map(renderCard).join("") + '</div>';
+  }
+
+  function renderCard(face) {
+    var pct = (face.total_assigned_total && face.covered_total) ?
+              (face.covered_total / face.total_assigned_total * 100) : 0;
+    var badges = [];
+    if (face.blocks_complete) badges.push('<span class="badge">' + escapeHtml(face.blocks_complete) + ' complete</span>');
+    if (face.blocks_partial)  badges.push('<span class="badge">' + escapeHtml(face.blocks_partial) + ' partial</span>');
+
+    var stats = escapeHtml((face.total_codepoints || 0).toLocaleString()) + " cps";
+    if (face.total_glyphs) stats += " · " + escapeHtml(face.total_glyphs.toLocaleString()) + " glyphs";
+
+    return '<a class="font-card" href="' + escapeAttr(face.index_path) + '">' +
+      '<h3 class="font-name">' + escapeHtml(face.family_name || face.label) + '</h3>' +
+      '<p class="font-meta">' + escapeHtml(face.postscript_name || "") + ' · wght ' +
+      escapeHtml(face.weight_class || 400) + '</p>' +
+      '<div class="coverage-bar"><div style="width:' + escapeAttr(pct.toFixed(1)) + '%"></div></div>' +
+      '<p class="quick-stats">' + stats + '</p>' +
+      '<div class="badges">' + badges.join("") + '</div>' +
+      '</a>';
+  }
+
+  function matchesFilter(face) {
+    if (state.status === "complete" && !face.blocks_complete) return false;
+    if (state.status === "partial" && !face.blocks_partial) return false;
+    if (!state.search) return true;
+    var haystack = ((face.family_name || "") + " " +
+                    (face.postscript_name || "") + " " +
+                    (face.label || "")).toLowerCase();
+    return haystack.indexOf(state.search) !== -1;
+  }
+
+  function bySort(a, b) {
+    var key = state.sort;
+    if (key === "name") return (a.family_name || "").localeCompare(b.family_name || "");
+    if (key === "codepoints") return (b.total_codepoints || 0) - (a.total_codepoints || 0);
+    if (key === "glyphs") return (b.total_glyphs || 0) - (a.total_glyphs || 0);
+    if (key === "weight") return (a.weight_class || 0) - (b.weight_class || 0);
+    return 0;
+  }
+
+  function escapeHtml(s) {
+    return String(s == null ? "" : s).replace(/[&<>"']/g, function (c) {
+      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
+    });
+  }
+  function escapeAttr(s) { return escapeHtml(s); }
+})();

data/lib/ucode/audit/browser/templates/missing_glyph_page.css

@@ -0,0 +1,119 @@
+:root {
+  --bg: #fafafa;
+  --fg: #1a1a1a;
+  --muted: #5a5a5a;
+  --card-bg: #ffffff;
+  --border: #d8d8d8;
+  --accent: #2962ff;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #1a1a1a;
+    --fg: #e8e8e8;
+    --muted: #b0b0b0;
+    --card-bg: #2a2a2a;
+    --border: #3a3a3a;
+    --accent: #82b1ff;
+  }
+}
+
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--fg);
+  line-height: 1.5;
+}
+
+.page-header {
+  padding: 1.5rem 2rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--card-bg);
+}
+.page-header h1 { margin: 0 0 0.25rem; font-size: 1.5rem; }
+.tagline { margin: 0; color: var(--muted); font-size: 0.875rem; }
+
+main { padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; }
+
+.hint {
+  background: #fff3cd; color: #664d03;
+  padding: 0.75rem 1rem; border-radius: 4px;
+  font-size: 0.875rem;
+}
+@media (prefers-color-scheme: dark) {
+  .hint { background: #4d3a00; color: #ffe082; }
+}
+
+.glyph-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 0.75rem;
+}
+
+.glyph-cell {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.glyph-thumb {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+@media (prefers-color-scheme: dark) {
+  .glyph-thumb { background: #f0f0f0; }
+}
+.glyph-thumb svg {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+}
+.glyph-na {
+  color: var(--muted);
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+}
+
+.glyph-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.1rem;
+}
+.cp-id {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+.source {
+  font-size: 0.65rem;
+  color: var(--muted);
+  text-align: center;
+  word-break: break-all;
+}
+
+.overflow {
+  margin-top: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg);
+  border: 1px dashed var(--border);
+  border-radius: 4px;
+  color: var(--muted);
+  font-size: 0.85rem;
+}