ucode 0.1.0 → 0.1.1

data/lib/ucode/audit/browser/library_page.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+require "pathname"
+require "json"
+
+require "ucode/repo/atomic_writes"
+require "ucode/audit/browser"
+require "ucode/audit/browser/template"
+require "ucode/audit/emitter/paths"
+require "ucode/audit/emitter/library_emitter"
+
+module Ucode
+  module Audit
+    module Browser
+      # Renders the library-level `index.html` — a card grid of all
+      # audited fonts in a library, with search/sort/filter controls.
+      #
+      # The page inlines the same JSON shape that
+      # {Emitter::LibraryEmitter} writes to `index.json`, plus inlined
+      # CSS and JS. Clicking a card navigates to that face's
+      # per-face browser (`<label>/index.html`).
+      #
+      # Self-contained: no external resources. The entire
+      # `output/font_audit/` tree is portable as a unit.
+      #
+      # Two construction modes — pass exactly one of:
+      #   - `summary:` — a live {Models::Audit::LibrarySummary}. The
+      #     JSON shape is derived via {Emitter::LibraryEmitter#build_index}.
+      #   - `library_json:` — a pre-built JSON string of the library
+      #     overview shape. Used by {Commands::AuditBrowserCommand}
+      #     when regenerating HTML from an existing `index.json`.
+      class LibraryPage
+        include Ucode::Repo::AtomicWrites
+
+        # @param summary [Models::Audit::LibrarySummary, nil]
+        # @param library_json [String, nil] pre-built library overview JSON
+        def initialize(summary: nil, library_json: nil)
+          raise ArgumentError, "pass exactly one of summary: / library_json:" \
+            unless summary.nil? ^ library_json.nil?
+
+          @summary = summary
+          @library_json = library_json
+        end
+
+        # Write the rendered page to `<library_root>/index.html`.
+        # @param output_root [String, Pathname]
+        # @return [Boolean] true if written, false if skipped
+        def write(output_root)
+          path = Ucode::Audit::Emitter::Paths.library_html_path(output_root)
+          write_atomic(path, render)
+        end
+
+        # Render the page as a string.
+        # @return [String]
+        def render
+          Template.new(:library).render(
+            library_json: library_json,
+            page_title: "ucode audit library",
+          )
+        end
+
+        private
+
+        def library_json
+          @library_json ||=
+            begin
+              hash = Ucode::Audit::Emitter::LibraryEmitter.new.build_index(@summary)
+              JSON.generate(hash)
+            end
+        end
+      end
+    end
+  end
+end

data/lib/ucode/audit/browser/missing_glyph_page.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+require "pathname"
+
+require "ucode/repo/atomic_writes"
+require "ucode/audit/browser"
+require "ucode/audit/browser/template"
+require "ucode/audit/browser/glyph_panel"
+require "ucode/audit/emitter/paths"
+
+module Ucode
+  module Audit
+    module Browser
+      # Renders one standalone per-block HTML gallery of missing
+      # glyphs at `<face_dir>/missing/<BLOCK>.html` (TODO 26).
+      #
+      # Every touched block with at least one missing codepoint gets
+      # one page. The gallery is fully static — inlined CSS, no
+      # client-side fetch — so it works via `file://` and is what
+      # fontist.org can iframe or screenshot for the "what's missing"
+      # widget.
+      #
+      # SVGs are inlined from the co-located universal-set build
+      # (when {GlyphPanel#available?}). When the universal set is
+      # absent, the page renders codepoint IDs only — no errors, no
+      # broken-image placeholders.
+      #
+      # For very large missing-codepoint sets (CJK can be thousands),
+      # the page emits at most +page_size+ thumbnails inline; an
+      # overflow notice replaces the rest.
+      class MissingGlyphPage
+        include Ucode::Repo::AtomicWrites
+
+        DEFAULT_PAGE_SIZE = 500
+
+        # @param block_name [String] Unicode block name (verbatim)
+        # @param missing_codepoints [Array<Integer>] codepoints the
+        #   font does not cover for this block
+        # @param glyph_panel [GlyphPanel] service that reads the
+        #   universal-set manifest + glyphs dir
+        # @param page_size [Integer] max thumbnails emitted inline
+        def initialize(block_name:, missing_codepoints:, glyph_panel:,
+                       page_size: DEFAULT_PAGE_SIZE)
+          @block_name = block_name
+          @missing_codepoints = missing_codepoints
+          @glyph_panel = glyph_panel
+          @page_size = page_size
+        end
+
+        # @param face_dir [String, Pathname]
+        # @return [Boolean] true if written, false if skipped (identical)
+        def write(face_dir)
+          path = Ucode::Audit::Emitter::Paths.missing_glyph_page_under(face_dir, @block_name)
+          write_atomic(path, render)
+        end
+
+        # @return [String] rendered HTML
+        def render
+          Template.new(:missing_glyph_page).render(
+            block_name: @block_name,
+            panels: panel_data,
+            visible_count: visible.size,
+            total_count: @missing_codepoints.size,
+            overflow_count: overflow_count,
+            universal_set_available: @glyph_panel.available?,
+          )
+        end
+
+        private
+
+        def panel_data
+          visible.take(@page_size).map { |cp| @glyph_panel.to_hash(cp) }
+        end
+
+        def visible
+          @missing_codepoints.sort
+        end
+
+        def overflow_count
+          return 0 if @missing_codepoints.size <= @page_size
+
+          @missing_codepoints.size - @page_size
+        end
+      end
+    end
+  end
+end

data/lib/ucode/audit/browser/template.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+require "erb"
+require "pathname"
+
+require "ucode/audit/browser"
+
+module Ucode
+  module Audit
+    module Browser
+      # Minimal ERB wrapper for the browser templates.
+      #
+      # Reads an `.erb` template plus its sibling `.css` and `.js`
+      # assets from {Browser::TEMPLATE_DIR}, renders them with the
+      # supplied binding, and returns a complete HTML document.
+      #
+      # Templates are plain ERB — no partials, no layouts, no helpers
+      # beyond what the binding provides. The CSS/JS assets are
+      # inlined into the rendered HTML so the page is fully
+      # self-contained (no external requests).
+      class Template
+        # @param name [String, Symbol] template name without extension
+        #   (e.g. `:face`, `:library`)
+        def initialize(name)
+          @name = name
+        end
+
+        # @param locals [Hash{Symbol=>Object}] variables exposed in the
+        #   template binding
+        # @return [String] rendered HTML
+        def render(locals = {})
+          erb = ERB.new(read("#{@name}.html.erb"), trim_mode: "-")
+          erb.result_with_hash(locals.merge(
+                                 _css: read("#{@name}.css"),
+                                 _js: read("#{@name}.js"),
+                               ))
+        end
+
+        private
+
+        def read(filename)
+          Browser.const_get(:TEMPLATE_DIR).join(filename).read
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,200 @@
+: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;
+  --coverage-na: #b0b0b0;
+}
+
+@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; }
+
+section { margin-bottom: 2rem; }
+
+.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; }
+}
+.hidden { display: none; }
+code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
+
+.card {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 1rem 1.25rem;
+}
+
+.identity-grid {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 0.4rem 1.5rem;
+  font-size: 0.875rem;
+}
+.identity-grid dt {
+  color: var(--muted);
+  font-weight: 500;
+  text-align: right;
+}
+.identity-grid dd { margin: 0; word-break: break-all; }
+
+.totals {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+.total-cell {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.75rem 1rem;
+}
+.total-cell .label { color: var(--muted); font-size: 0.75rem; }
+.total-cell .value { font-size: 1.25rem; font-weight: 600; }
+
+.plane-band {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0.25rem 0;
+}
+.plane-band .label {
+  width: 60px;
+  color: var(--muted);
+  font-size: 0.75rem;
+  text-align: right;
+}
+.plane-band .strip {
+  flex: 1;
+  height: 12px;
+  background: var(--coverage-na);
+  border-radius: 2px;
+  display: flex;
+  overflow: hidden;
+}
+.plane-band .strip span {
+  height: 100%;
+}
+
+.block-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.block-table th,
+.block-table td {
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+.block-table th {
+  background: var(--bg);
+  color: var(--muted);
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+}
+.block-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
+.block-table tr.block-row { cursor: pointer; }
+.block-table tr.block-row:hover { background: rgba(41, 98, 255, 0.08); }
+
+.status {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+.status-COMPLETE { background: var(--coverage-complete); color: #fff; }
+.status-PARTIAL  { background: var(--coverage-weak); color: #4a3500; }
+.status-UNCOVERED_ASSIGNED { background: var(--coverage-none); color: #fff; }
+.status-NO_ASSIGNED_IN_BLOCK,
+.status-OUTSIDE_BASELINE { background: var(--coverage-na); color: #fff; }
+
+.cp-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 0.5rem;
+}
+.cp-chip {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 2px 6px;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 0.7rem;
+  cursor: pointer;
+}
+.cp-chip:hover { background: var(--accent); color: #fff; }
+
+.detail-panel {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1rem;
+  margin-top: 0.5rem;
+}
+.detail-panel dt { color: var(--muted); font-size: 0.75rem; }
+.glyph-preview {
+  background: #fff;
+  border: 1px solid var(--border);
+  padding: 0.5rem;
+  margin-top: 0.5rem;
+  display: inline-block;
+  min-width: 120px;
+  min-height: 60px;
+}
+.glyph-preview svg { max-width: 240px; max-height: 120px; display: block; }
+.universal-set-preview { display: block; }
+.universal-set-preview .hint { margin: 0 0 0.5rem; }
+@media (prefers-color-scheme: dark) {
+  .glyph-preview { background: #f0f0f0; }
+}
+
+.discrepancies-list {
+  list-style: disc;
+  padding-left: 1.5rem;
+  font-size: 0.875rem;
+}
+.discrepancies-list li { margin-bottom: 0.25rem; }
+.discrepancies-list .kind { font-family: ui-monospace, monospace; color: var(--accent); }

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

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%= page_title %> — ucode audit</title>
+  <style>
+<%= _css %>
+  </style>
+</head>
+<body data-verbose="<%= verbose %>" data-with-glyphs="<%= with_glyphs %>"
+      data-universal-set-available="<%= universal_set["available"] == true %>"
+      data-universal-set-glyphs-dir="<%= universal_set["glyphs_dir"] || "" %>"
+      data-universal-set-manifest-path="<%= universal_set["manifest_path"] || "" %>">
+  <header class="page-header">
+    <h1><%= page_title %></h1>
+    <p class="tagline">ucode font audit — self-contained page</p>
+  </header>
+
+  <main id="audit" aria-live="polite">
+    <noscript>
+      <p class="hint">This page requires JavaScript for interactive block drilldown.
+      The overview below is read from inlined JSON and renders without JS.</p>
+    </noscript>
+    <p class="hint hidden" id="file-url-hint">
+      Open via a local server (e.g. <code>python3 -m http.server</code> in this
+      directory) for full functionality. Block detail and glyph fetches are
+      blocked under <code>file://</code>.
+    </p>
+    <section id="overview" aria-busy="true"></section>
+    <section id="blocks"></section>
+    <section id="detail" class="hidden"></section>
+    <section id="discrepancies" class="hidden"></section>
+  </main>
+
+  <script type="application/json" id="audit-overview"><%= overview_json %></script>
+  <script>
+<%= _js %>
+  </script>
+</body>
+</html>