codeclone 1.1.0__py3-none-any.whl → 1.2.1__py3-none-any.whl

codeclone/html_report.py

@@ -9,29 +9,35 @@ Licensed under the MIT License.
 from __future__ import annotations
 
 import html
+import importlib
 import itertools
+from collections.abc import Iterable
 from dataclasses import dataclass
-from pathlib import Path
-from typing import Any, Optional, Iterable
+from functools import lru_cache
+from typing import Any, NamedTuple, cast
 
 from codeclone import __version__
+from codeclone.errors import FileProcessingError
 
+from .templates import FONT_CSS_URL, REPORT_TEMPLATE
 
 # ============================
 # Pairwise
 # ============================
 
+
 def pairwise(iterable: Iterable[Any]) -> Iterable[tuple[Any, Any]]:
     a, b = itertools.tee(iterable)
     next(b, None)
-    return zip(a, b)
+    return zip(a, b, strict=False)
 
 
 # ============================
 # Code snippet infrastructure
 # ============================
 
-@dataclass
+
+@dataclass(slots=True)
 class _Snippet:
     filepath: str
     start_line: int
@@ -40,28 +46,79 @@ class _Snippet:
 
 
 class _FileCache:
-    def __init__(self) -> None:
-        self._lines: dict[str, list[str]] = {}
+    __slots__ = ("_get_lines_impl", "maxsize")
+
+    def __init__(self, maxsize: int = 128) -> None:
+        self.maxsize = maxsize
+        # Create a bound method with lru_cache
+        # We need to cache on the method to have instance-level caching if we wanted
+        # different caches per instance. But lru_cache on method actually caches
+        # on the function object (class level) if not careful,
+        # or we use a wrapper.
+        # However, for this script, we usually have one reporter.
+        # To be safe and cleaner, we can use a method that delegates to a cached
+        # function, OR just use lru_cache on a method (which requires 'self' to be
+        # hashable, which it is by default id).
+        # But 'self' changes if we create new instances.
+        # Let's use the audit's pattern: cache the implementation.
+
+        self._get_lines_impl = lru_cache(maxsize=maxsize)(self._read_file_range)
+
+    def _read_file_range(
+        self, filepath: str, start_line: int, end_line: int
+    ) -> tuple[str, ...]:
+        if start_line < 1:
+            start_line = 1
+        if end_line < start_line:
+            return ()
+
+        try:
+
+            def _read_with_errors(errors: str) -> tuple[str, ...]:
+                lines: list[str] = []
+                with open(filepath, encoding="utf-8", errors=errors) as f:
+                    for lineno, line in enumerate(f, start=1):
+                        if lineno < start_line:
+                            continue
+                        if lineno > end_line:
+                            break
+                        lines.append(line.rstrip("\n"))
+                return tuple(lines)
 
-    def get_lines(self, filepath: str) -> list[str]:
-        if filepath not in self._lines:
             try:
-                text = Path(filepath).read_text("utf-8")
+                return _read_with_errors("strict")
             except UnicodeDecodeError:
-                text = Path(filepath).read_text("utf-8", errors="replace")
-            self._lines[filepath] = text.splitlines()
-        return self._lines[filepath]
+                return _read_with_errors("replace")
+        except OSError as e:
+            raise FileProcessingError(f"Cannot read {filepath}: {e}") from e
+
+    def get_lines_range(
+        self, filepath: str, start_line: int, end_line: int
+    ) -> tuple[str, ...]:
+        return self._get_lines_impl(filepath, start_line, end_line)
+
+    class _CacheInfo(NamedTuple):
+        hits: int
+        misses: int
+        maxsize: int | None
+        currsize: int
+
+    def cache_info(self) -> _CacheInfo:
+        return cast(_FileCache._CacheInfo, self._get_lines_impl.cache_info())
 
 
-def _try_pygments(code: str) -> Optional[str]:
+def _try_pygments(code: str) -> str | None:
     try:
-        from pygments import highlight
-        from pygments.formatters import HtmlFormatter
-        from pygments.lexers import PythonLexer
+        pygments = importlib.import_module("pygments")
+        formatters = importlib.import_module("pygments.formatters")
+        lexers = importlib.import_module("pygments.lexers")
     except Exception:
         return None
 
-    result = highlight(code, PythonLexer(), HtmlFormatter(nowrap=True))
+    highlight = pygments.highlight
+    formatter_cls = formatters.HtmlFormatter
+    lexer_cls = lexers.PythonLexer
+    result = highlight(code, lexer_cls(), formatter_cls(nowrap=True))
     return result if isinstance(result, str) else None
 
 
@@ -71,21 +128,23 @@ def _pygments_css(style_name: str) -> str:
     If Pygments is not available or style missing, returns "".
     """
     try:
-        from pygments.formatters import HtmlFormatter
+        formatters = importlib.import_module("pygments.formatters")
     except Exception:
         return ""
 
     try:
-        fmt = HtmlFormatter(style=style_name)
+        formatter_cls = formatters.HtmlFormatter
+        fmt = formatter_cls(style=style_name)
     except Exception:
         try:
-            fmt = HtmlFormatter()
+            fmt = formatter_cls()
         except Exception:
             return ""
 
     try:
         # `.codebox` scope: pygments will emit selectors like `.codebox .k { ... }`
-        return fmt.get_style_defs(".codebox")
+        css = fmt.get_style_defs(".codebox")
+        return css if isinstance(css, str) else ""
     except Exception:
         return ""
 
@@ -101,10 +160,10 @@ def _prefix_css(css: str, prefix: str) -> str:
         if not stripped:
             out_lines.append(line)
             continue
-        if stripped.startswith("/*") or stripped.startswith("*") or stripped.startswith("*/"):
+        if stripped.startswith(("/*", "*", "*/")):
             out_lines.append(line)
             continue
-        # Selector lines usually end with `{`
+        # Selector lines usually end with `{
         if "{" in line:
             # naive prefix: split at "{", prefix selector part
             before, after = line.split("{", 1)
@@ -119,25 +178,24 @@ def _prefix_css(css: str, prefix: str) -> str:
 
 
 def _render_code_block(
-        *,
-        filepath: str,
-        start_line: int,
-        end_line: int,
-        file_cache: _FileCache,
-        context: int,
-        max_lines: int,
+    *,
+    filepath: str,
+    start_line: int,
+    end_line: int,
+    file_cache: _FileCache,
+    context: int,
+    max_lines: int,
 ) -> _Snippet:
-    lines = file_cache.get_lines(filepath)
-
     s = max(1, start_line - context)
-    e = min(len(lines), end_line + context)
+    e = end_line + context
 
     if e - s + 1 > max_lines:
         e = s + max_lines - 1
 
+    lines = file_cache.get_lines_range(filepath, s, e)
+
     numbered: list[tuple[bool, str]] = []
-    for lineno in range(s, e + 1):
-        line = lines[lineno - 1]
+    for lineno, line in enumerate(lines, start=s):
         hit = start_line <= lineno <= end_line
         numbered.append((hit, f"{lineno:>5} | {line.rstrip()}"))
 
@@ -157,7 +215,7 @@ def _render_code_block(
         filepath=filepath,
         start_line=start_line,
         end_line=end_line,
-        code_html=f'<pre class="codebox"><code>{body}</code></pre>',
+        code_html=f'<div class="codebox"><pre><code>{body}</code></pre></div>',
     )
 
 
@@ -165,6 +223,7 @@ def _render_code_block(
 # HTML report builder
 # ============================
 
+
 def _escape(v: Any) -> str:
     return html.escape("" if v is None else str(v))
 
@@ -177,12 +236,12 @@ def _group_sort_key(items: list[dict[str, Any]]) -> tuple[int, int]:
 
 
 def build_html_report(
-        *,
-        func_groups: dict[str, list[dict[str, Any]]],
-        block_groups: dict[str, list[dict[str, Any]]],
-        title: str = "CodeClone Report",
-        context_lines: int = 3,
-        max_snippet_lines: int = 220,
+    *,
+    func_groups: dict[str, list[dict[str, Any]]],
+    block_groups: dict[str, list[dict[str, Any]]],
+    title: str = "CodeClone Report",
+    context_lines: int = 3,
+    max_snippet_lines: int = 220,
 ) -> str:
     file_cache = _FileCache()
 
@@ -203,15 +262,77 @@ def build_html_report(
     pyg_dark = _prefix_css(pyg_dark_raw, "html[data-theme='dark']")
     pyg_light = _prefix_css(pyg_light_raw, "html[data-theme='light']")
 
+    # ============================
+    # Icons (Inline SVG)
+    # ============================
+    ICON_SEARCH = (
+        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" '
+        'stroke="currentColor" stroke-width="2.5" stroke-linecap="round" '
+        'stroke-linejoin="round">'
+        '<circle cx="11" cy="11" r="8"></circle>'
+        '<line x1="21" y1="21" x2="16.65" y2="16.65"></line>'
+        "</svg>"
+    )
+    ICON_X = (
+        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" '
+        'stroke="currentColor" stroke-width="2.5" stroke-linecap="round" '
+        'stroke-linejoin="round">'
+        '<line x1="18" y1="6" x2="6" y2="18"></line>'
+        '<line x1="6" y1="6" x2="18" y2="18"></line>'
+        "</svg>"
+    )
+    ICON_CHEV_DOWN = (
+        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" '
+        'stroke="currentColor" stroke-width="2.5" stroke-linecap="round" '
+        'stroke-linejoin="round">'
+        '<polyline points="6 9 12 15 18 9"></polyline>'
+        "</svg>"
+    )
+    # ICON_CHEV_RIGHT = (
+    #     '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" '
+    #     'stroke="currentColor" stroke-width="2.5" stroke-linecap="round" '
+    #     'stroke-linejoin="round">'
+    #     '<polyline points="9 18 15 12 9 6"></polyline>'
+    #     "</svg>"
+    # )
+    ICON_THEME = (
+        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" '
+        'stroke="currentColor" stroke-width="2" stroke-linecap="round" '
+        'stroke-linejoin="round">'
+        '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>'
+        "</svg>"
+    )
+    ICON_CHECK = (
+        '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" '
+        'stroke="currentColor" stroke-width="2" stroke-linecap="round" '
+        'stroke-linejoin="round">'
+        '<polyline points="20 6 9 17 4 12"></polyline>'
+        "</svg>"
+    )
+    ICON_PREV = (
+        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" '
+        'stroke="currentColor" stroke-width="2" stroke-linecap="round" '
+        'stroke-linejoin="round">'
+        '<polyline points="15 18 9 12 15 6"></polyline>'
+        "</svg>"
+    )
+    ICON_NEXT = (
+        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" '
+        'stroke="currentColor" stroke-width="2" stroke-linecap="round" '
+        'stroke-linejoin="round">'
+        '<polyline points="9 18 15 12 9 6"></polyline>'
+        "</svg>"
+    )
+
     # ----------------------------
     # Section renderer
     # ----------------------------
 
     def render_section(
-            section_id: str,
-            section_title: str,
-            groups: list[tuple[str, list[dict[str, Any]]]],
-            pill_cls: str,
+        section_id: str,
+        section_title: str,
+        groups: list[tuple[str, list[dict[str, Any]]]],
+        pill_cls: str,
     ) -> str:
         if not groups:
             return ""
@@ -221,26 +342,43 @@ def build_html_report(
             f'<section id="{section_id}" class="section" data-section="{section_id}">',
             '<div class="section-head">',
             f"<h2>{_escape(section_title)} "
-            f'<span class="pill {pill_cls}" data-count-pill="{section_id}">{len(groups)} groups</span></h2>',
+            f'<span class="pill {pill_cls}" data-count-pill="{section_id}">'
+            f"{len(groups)} groups</span></h2>",
             f"""
-<div class="section-toolbar" role="toolbar" aria-label="{_escape(section_title)} controls">
+<div class="section-toolbar"
+     role="toolbar"
+     aria-label="{_escape(section_title)} controls">
   <div class="toolbar-left">
     <div class="search-wrap">
-      <span class="search-ico">⌕</span>
-      <input class="search" id="search-{section_id}" placeholder="Search by qualname / path / fingerprint…" autocomplete="off" />
-      <button class="btn ghost" type="button" data-clear="{section_id}" title="Clear search">×</button>
+      <span class="search-ico">{ICON_SEARCH}</span>
+      <input class="search"
+             id="search-{section_id}"
+             placeholder="Search..."
+             autocomplete="off" />
+      <button class="btn ghost"
+              type="button"
+              data-clear="{section_id}"
+              title="Clear search">{ICON_X}</button>
     </div>
     <div class="segmented">
-      <button class="btn seg" type="button" data-collapse-all="{section_id}">Collapse</button>
-      <button class="btn seg" type="button" data-expand-all="{section_id}">Expand</button>
+      <button class="btn seg"
+              type="button"
+              data-collapse-all="{section_id}">Collapse</button>
+      <button class="btn seg"
+              type="button"
+              data-expand-all="{section_id}">Expand</button>
     </div>
   </div>
 
   <div class="toolbar-right">
     <div class="pager">
-      <button class="btn" type="button" data-prev="{section_id}">‹</button>
+      <button class="btn"
+              type="button"
+              data-prev="{section_id}">{ICON_PREV}</button>
       <span class="page-meta" data-page-meta="{section_id}">Page 1</span>
-      <button class="btn" type="button" data-next="{section_id}">›</button>
+      <button class="btn"
+              type="button"
+              data-next="{section_id}">{ICON_NEXT}</button>
     </div>
     <select class="select" data-pagesize="{section_id}" title="Groups per page">
       <option value="5">5 / page</option>
@@ -256,10 +394,6 @@ def build_html_report(
         ]
 
         for idx, (gkey, items) in enumerate(groups, start=1):
-            # Create search blob for group:
-            # - gkey (fingerprint)
-            # - all qualnames + filepaths
-            # This is used by JS filtering (no heavy DOM scans on each keystroke).
             search_parts: list[str] = [str(gkey)]
             for it in items:
                 search_parts.append(str(it.get("qualname", "")))
@@ -268,20 +402,22 @@ def build_html_report(
             search_blob_escaped = html.escape(search_blob, quote=True)
 
             out.append(
-                f'<div class="group" data-group="{section_id}" data-search="{search_blob_escaped}">'
+                f'<div class="group" data-group="{section_id}" '
+                f'data-search="{search_blob_escaped}">'
             )
 
             out.append(
-                f'<div class="group-head">'
-                f'<div class="group-left">'
-                f'<button class="chev" type="button" aria-label="Toggle group" data-toggle-group="{section_id}-{idx}">▾</button>'
+                '<div class="group-head">'
+                '<div class="group-left">'
+                f'<button class="chev" type="button" aria-label="Toggle group" '
+                f'data-toggle-group="{section_id}-{idx}">{ICON_CHEV_DOWN}</button>'
                 f'<div class="group-title">Group #{idx}</div>'
                 f'<span class="pill small {pill_cls}">{len(items)} items</span>'
-                f"</div>"
-                f'<div class="group-right">'
+                "</div>"
+                '<div class="group-right">'
                 f'<code class="gkey">{_escape(gkey)}</code>'
-                f"</div>"
-                f"</div>"
+                "</div>"
+                "</div>"
             )
 
             out.append(f'<div class="items" id="group-body-{section_id}-{idx}">')
@@ -303,11 +439,11 @@ def build_html_report(
                         '<div class="item">'
                         f'<div class="item-head">{_escape(item["qualname"])}</div>'
                         f'<div class="item-file">'
-                        f'{_escape(item["filepath"])}:'
-                        f'{item["start_line"]}-{item["end_line"]}'
-                        f'</div>'
-                        f'{snippet.code_html}'
-                        '</div>'
+                        f"{_escape(item['filepath'])}:"
+                        f"{item['start_line']}-{item['end_line']}"
+                        f"</div>"
+                        f"{snippet.code_html}"
+                        "</div>"
                     )
 
                 out.append("</div>")  # item-pair
@@ -320,634 +456,37 @@ def build_html_report(
         return "\n".join(out)
 
     # ============================
-    # HTML
+    # HTML Rendering
     # ============================
 
     empty_state_html = ""
     if not has_any:
-        empty_state_html = """
+        empty_state_html = f"""
 <div class="empty">
   <div class="empty-card">
-    <div class="empty-icon">✓</div>
+    <div class="empty-icon">{ICON_CHECK}</div>
     <h2>No code clones detected</h2>
-    <p>No structural or block-level duplication was found above configured thresholds.</p>
+    <p>
+      No structural or block-level duplication was found above configured thresholds.
+    </p>
     <p class="muted">This usually indicates healthy abstraction boundaries.</p>
   </div>
 </div>
 """
 
-    return f"""<!doctype html>
-<html lang="en" data-theme="dark">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>{_escape(title)}</title>
-
-<style>
-/* ============================
-   CodeClone UI/UX
-   ============================ */
-
-:root {{
-  --bg: #0b0f14;
-  --panel: rgba(255,255,255,0.04);
-  --panel2: rgba(255,255,255,0.06);
-  --text: rgba(255,255,255,0.92);
-  --muted: rgba(255,255,255,0.62);
-  --border: rgba(255,255,255,0.10);
-  --border2: rgba(255,255,255,0.14);
-  --accent: #6aa6ff;
-  --accent2: rgba(106,166,255,0.18);
-  --good: #7cffa0;
-  --shadow: 0 18px 60px rgba(0,0,0,.55);
-  --shadow2: 0 10px 26px rgba(0,0,0,.45);
-  --radius: 14px;
-  --radius2: 18px;
-  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}}
-
-html[data-theme="light"] {{
-  --bg: #f6f8fb;
-  --panel: rgba(0,0,0,0.03);
-  --panel2: rgba(0,0,0,0.05);
-  --text: rgba(0,0,0,0.88);
-  --muted: rgba(0,0,0,0.55);
-  --border: rgba(0,0,0,0.10);
-  --border2: rgba(0,0,0,0.14);
-  --accent: #1f6feb;
-  --accent2: rgba(31,111,235,0.14);
-  --good: #1f883d;
-  --shadow: 0 18px 60px rgba(0,0,0,.12);
-  --shadow2: 0 10px 26px rgba(0,0,0,.10);
-}}
-
-* {{ box-sizing: border-box; }}
-
-body {{
-  margin: 0;
-  background: radial-gradient(1200px 800px at 20% -10%, rgba(106,166,255,.18), transparent 45%),
-              radial-gradient(900px 600px at 80% 0%, rgba(124,255,160,.10), transparent 35%),
-              var(--bg);
-  color: var(--text);
-  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
-  line-height: 1.55;
-}}
-
-.container {{
-  max-width: 1600px;
-  margin: 0 auto;
-  padding: 26px 22px 110px;
-}}
-
-.topbar {{
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
-  border-bottom: 1px solid var(--border);
-  padding: 14px 0 12px;
-}}
-
-.topbar-inner {{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-}}
-
-.brand {{
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}}
-
-.brand h1 {{
-  margin: 0;
-  font-size: 22px;
-  letter-spacing: 0.2px;
-}}
-
-.brand .sub {{
-  color: var(--muted);
-  font-size: 12.5px;
-}}
-
-.top-actions {{
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}}
-
-.btn {{
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border-radius: 10px;
-  border: 1px solid var(--border);
-  background: var(--panel);
-  color: var(--text);
-  cursor: pointer;
-  user-select: none;
-  font-weight: 600;
-  font-size: 12.5px;
-  box-shadow: var(--shadow2);
-}}
-
-.btn:hover {{
-  border-color: var(--border2);
-  background: var(--panel2);
-}}
-
-.btn:active {{
-  transform: translateY(1px);
-}}
-
-.btn.ghost {{
-  background: transparent;
-  box-shadow: none;
-}}
-
-.select {{
-  padding: 8px 10px;
-  border-radius: 10px;
-  border: 1px solid var(--border);
-  background: var(--panel);
-  color: var(--text);
-  font-weight: 600;
-  font-size: 12.5px;
-}}
-
-.section {{
-  margin-top: 22px;
-}}
-
-.section-head {{
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 18px;
-}}
-
-.section-head h2 {{
-  margin: 0;
-  font-size: 16px;
-  letter-spacing: 0.2px;
-}}
-
-.section-toolbar {{
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}}
-
-.toolbar-left, .toolbar-right {{
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}}
-
-.search-wrap {{
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border-radius: 12px;
-  border: 1px solid var(--border);
-  background: var(--panel);
-  box-shadow: var(--shadow2);
-  min-width: 320px;
-}}
-
-.search-ico {{
-  opacity: .72;
-  font-weight: 800;
-}}
-
-.search {{
-  width: 100%;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--text);
-  font-size: 13px;
-}}
-
-.search::placeholder {{
-  color: var(--muted);
-}}
-
-.segmented {{
-  display: inline-flex;
-  border-radius: 12px;
-  overflow: hidden;
-  border: 1px solid var(--border);
-}}
-
-.btn.seg {{
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  background: transparent;
-}}
-
-.pager {{
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}}
-
-.page-meta {{
-  color: var(--muted);
-  font-size: 12.5px;
-  min-width: 120px;
-  text-align: center;
-}}
-
-.pill {{
-  padding: 4px 10px;
-  border-radius: 999px;
-  background: var(--accent2);
-  border: 1px solid rgba(106,166,255,0.25);
-  font-size: 12px;
-  font-weight: 800;
-  color: var(--text);
-}}
-
-.pill.small {{
-  padding: 3px 8px;
-  font-size: 11px;
-}}
-
-.pill-func {{
-  background: rgba(106,166,255,0.14);
-  border-color: rgba(106,166,255,0.25);
-}}
-
-.pill-block {{
-  background: rgba(124,255,160,0.10);
-  border-color: rgba(124,255,160,0.22);
-}}
-
-.section-body {{
-  margin-top: 12px;
-}}
-
-.group {{
-  margin-top: 14px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius2);
-  background: var(--panel);
-  box-shadow: var(--shadow);
-  overflow: hidden;
-}}
-
-.group-head {{
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 14px;
-  border-bottom: 1px solid var(--border);
-}}
-
-.group-left {{
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}}
-
-.group-title {{
-  font-weight: 900;
-  font-size: 13px;
-}}
-
-.group-right {{
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  max-width: 60%;
-}}
-
-.gkey {{
-  font-family: var(--mono);
-  font-size: 11.5px;
-  color: var(--muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}}
-
-.chev {{
-  width: 30px;
-  height: 30px;
-  border-radius: 10px;
-  border: 1px solid var(--border);
-  background: var(--panel2);
-  color: var(--text);
-  cursor: pointer;
-  font-weight: 900;
-}}
-
-.items {{
-  padding: 14px;
-}}
-
-.item-pair {{
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 14px;
-  margin-top: 14px;
-}}
-
-@media (max-width: 1100px) {{
-  .item-pair {{
-    grid-template-columns: 1fr;
-  }}
-  .search-wrap {{
-    min-width: 260px;
-  }}
-}}
-
-.item {{
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  overflow: hidden;
-  background: rgba(0,0,0,0.10);
-}}
-
-html[data-theme="light"] .item {{
-  background: rgba(255,255,255,0.60);
-}}
-
-.item-head {{
-  padding: 10px 12px;
-  font-weight: 900;
-  font-size: 12.8px;
-  border-bottom: 1px solid var(--border);
-}}
-
-.item-file {{
-  padding: 6px 12px;
-  font-family: var(--mono);
-  font-size: 11.5px;
-  color: var(--muted);
-  border-bottom: 1px solid var(--border);
-}}
-
-.codebox {{
-  margin: 0;
-  padding: 12px;
-  font-family: var(--mono);
-  font-size: 12.5px;
-  overflow: auto;
-  background: rgba(0,0,0,0.18);
-}}
-
-html[data-theme="light"] .codebox {{
-  background: rgba(0,0,0,0.03);
-}}
-
-.line {{
-  white-space: pre;
-}}
-
-.hitline {{
-  white-space: pre;
-  background: rgba(255, 184, 107, .18);
-}}
-
-.empty {{
-  margin-top: 34px;
-  display: flex;
-  justify-content: center;
-}}
-
-.empty-card {{
-  max-width: 640px;
-  border-radius: 22px;
-  border: 1px solid var(--border);
-  background: var(--panel);
-  box-shadow: var(--shadow);
-  padding: 26px 26px;
-  text-align: center;
-}}
-
-.empty-icon {{
-  font-size: 52px;
-  color: var(--good);
-  font-weight: 900;
-  margin-bottom: 8px;
-}}
-
-.footer {{
-  margin-top: 40px;
-  text-align: center;
-  color: var(--muted);
-  font-size: 12px;
-}}
-
-.muted {{
-  color: var(--muted);
-}}
-
-/* ============================
-   Pygments CSS (SCOPED)
-   IMPORTANT: without this, `nowrap=True` output won't be colored.
-   ============================ */
-{pyg_dark}
-{pyg_light}
-</style>
-</head>
-
-<body>
-<div class="topbar">
-  <div class="container">
-    <div class="topbar-inner">
-      <div class="brand">
-        <h1>{_escape(title)}</h1>
-        <div class="sub">AST + CFG clone detection • CodeClone v{__version__}</div>
-      </div>
-
-      <div class="top-actions">
-        <button class="btn" type="button" id="theme-toggle" title="Toggle theme">🌓 Theme</button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="container">
-{empty_state_html}
-
-{render_section("functions", "Function clones (Type-2)", func_sorted, "pill-func")}
-{render_section("blocks", "Block clones (Type-3-lite)", block_sorted, "pill-block")}
-
-<div class="footer">Generated by CodeClone v{__version__}</div>
-</div>
-
-<script>
-(() => {{
-  // ----------------------------
-  // Theme toggle
-  // ----------------------------
-  const htmlEl = document.documentElement;
-  const btnTheme = document.getElementById("theme-toggle");
-
-  const stored = localStorage.getItem("codeclone_theme");
-  if (stored === "light" || stored === "dark") {{
-    htmlEl.setAttribute("data-theme", stored);
-  }}
-
-  btnTheme?.addEventListener("click", () => {{
-    const cur = htmlEl.getAttribute("data-theme") || "dark";
-    const next = cur === "dark" ? "light" : "dark";
-    htmlEl.setAttribute("data-theme", next);
-    localStorage.setItem("codeclone_theme", next);
-  }});
-
-  // ----------------------------
-  // Group collapse toggles
-  // ----------------------------
-  document.querySelectorAll("[data-toggle-group]").forEach((btn) => {{
-    btn.addEventListener("click", () => {{
-      const id = btn.getAttribute("data-toggle-group");
-      const body = document.getElementById("group-body-" + id);
-      if (!body) return;
-
-      const isHidden = body.style.display === "none";
-      body.style.display = isHidden ? "" : "none";
-      btn.textContent = isHidden ? "▾" : "▸";
-    }});
-  }});
-
-  // ----------------------------
-  // Search + Pagination ("soft virtualization")
-  // ----------------------------
-  function initSection(sectionId) {{
-    const section = document.querySelector(`section[data-section='${{sectionId}}']`);
-    if (!section) return;
-
-    const groups = Array.from(section.querySelectorAll(`.group[data-group='${{sectionId}}']`));
-    const searchInput = document.getElementById(`search-${{sectionId}}`);
-
-    const btnPrev = section.querySelector(`[data-prev='${{sectionId}}']`);
-    const btnNext = section.querySelector(`[data-next='${{sectionId}}']`);
-    const meta = section.querySelector(`[data-page-meta='${{sectionId}}']`);
-    const selPageSize = section.querySelector(`[data-pagesize='${{sectionId}}']`);
-
-    const btnClear = section.querySelector(`[data-clear='${{sectionId}}']`);
-    const btnCollapseAll = section.querySelector(`[data-collapse-all='${{sectionId}}']`);
-    const btnExpandAll = section.querySelector(`[data-expand-all='${{sectionId}}']`);
-    const pill = section.querySelector(`[data-count-pill='${{sectionId}}']`);
-
-    const state = {{
-      q: "",
-      page: 1,
-      pageSize: parseInt(selPageSize?.value || "10", 10),
-      filtered: groups
-    }};
-
-    function setGroupVisible(el, yes) {{
-      el.style.display = yes ? "" : "none";
-    }}
-
-    function applyFilter() {{
-      const q = (state.q || "").trim().toLowerCase();
-      if (!q) {{
-        state.filtered = groups;
-      }} else {{
-        state.filtered = groups.filter(g => {{
-          const blob = g.getAttribute("data-search") || "";
-          return blob.indexOf(q) !== -1;
-        }});
-      }}
-      state.page = 1;
-      render();
-    }}
-
-    function render() {{
-      const total = state.filtered.length;
-      const pageSize = Math.max(1, state.pageSize);
-      const pages = Math.max(1, Math.ceil(total / pageSize));
-      state.page = Math.min(Math.max(1, state.page), pages);
-
-      const start = (state.page - 1) * pageSize;
-      const end = Math.min(total, start + pageSize);
-
-      // hide all (this is the "virtualization": only show the slice)
-      groups.forEach(g => setGroupVisible(g, false));
-      state.filtered.slice(start, end).forEach(g => setGroupVisible(g, true));
-
-      if (meta) {{
-        meta.textContent = `Page ${{state.page}} / ${{pages}} • ${{total}} groups`;
-      }}
-      if (pill) {{
-        pill.textContent = `${{total}} groups`;
-      }}
-
-      if (btnPrev) btnPrev.disabled = state.page <= 1;
-      if (btnNext) btnNext.disabled = state.page >= pages;
-    }}
-
-    // Wiring
-    searchInput?.addEventListener("input", (e) => {{
-      state.q = e.target.value || "";
-      applyFilter();
-    }});
-
-    btnClear?.addEventListener("click", () => {{
-      if (searchInput) searchInput.value = "";
-      state.q = "";
-      applyFilter();
-    }});
-
-    selPageSize?.addEventListener("change", () => {{
-      state.pageSize = parseInt(selPageSize.value || "10", 10);
-      state.page = 1;
-      render();
-    }});
-
-    btnPrev?.addEventListener("click", () => {{
-      state.page -= 1;
-      render();
-    }});
-
-    btnNext?.addEventListener("click", () => {{
-      state.page += 1;
-      render();
-    }});
-
-    btnCollapseAll?.addEventListener("click", () => {{
-      section.querySelectorAll(".items").forEach((b) => {{
-        b.style.display = "none";
-      }});
-      section.querySelectorAll("[data-toggle-group]").forEach((c) => {{
-        c.textContent = "▸";
-      }});
-    }});
-
-    btnExpandAll?.addEventListener("click", () => {{
-      section.querySelectorAll(".items").forEach((b) => {{
-        b.style.display = "";
-      }});
-      section.querySelectorAll("[data-toggle-group]").forEach((c) => {{
-        c.textContent = "▾";
-      }});
-    }});
-
-    // Initial render
-    render();
-  }}
-
-  initSection("functions");
-  initSection("blocks");
-}})();
-</script>
-</body>
-</html>
-"""
+    func_section = render_section(
+        "functions", "Function clones", func_sorted, "pill-func"
+    )
+    block_section = render_section("blocks", "Block clones", block_sorted, "pill-block")
+
+    return REPORT_TEMPLATE.substitute(
+        title=_escape(title),
+        version=__version__,
+        pyg_dark=pyg_dark,
+        pyg_light=pyg_light,
+        empty_state_html=empty_state_html,
+        func_section=func_section,
+        block_section=block_section,
+        icon_theme=ICON_THEME,
+        font_css_url=FONT_CSS_URL,
+    )